:root {
    --m: #9C0A3F;
    --md: #7A0830;
    --ml: #C4114F;
    --m05: rgba(156, 10, 63, .05);
    --m10: rgba(156, 10, 63, .10);
    --m20: rgba(156, 10, 63, .20);
    --dark: #0F0F0F;
    --dark2: #1A1A1A;
    --g: #1C1C1C;
    --gmid: #5A5A5A;
    --glt: #9A9A9A;
    --off: #F7F6F4;
    --off2: #F0EEE9;
    --border: #E5E3DF;
    --border-d: rgba(255, 255, 255, .08);
    --nav: 70px;
    --ease: cubic-bezier(.25, .46, .45, .94);
    --brand-maroon: #9c0a3f;
    --brand-maroon-dark: #9c0a3f;
    --border-color: #FFBAD3;
}

/* Remove spinners from number input */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* For Firefox */
}


/* Universal fix for all hash-targeted sections */
[id] {
    scroll-margin-bottom: 120px; /* Adjust based on your header height */
}

/* Specific targets for your solution page */
#brand_experience_lab,
#digital_commerce,
#digital_growth,
#ai_automation {
    scroll-margin-bottom: 120px;
}

/* For industries page targets */
#beauty,
#healthcare,
#health,
#professional {
    scroll-margin-bottom: 120px;
}

/* Alternative fallback for older browsers */
.section-target {
    scroll-margin-bottom: 120px;
}

/* ===== GLOBAL ===== */
body {
    font-family: 'Inter', sans-serif;
    color: var(--g);
    overflow-x: hidden;
}

.navbar-collapse{
    padding: 20px 0px !important;
}

.border-grey{
    border:0.1px solid #f7f6f4;
}

a {
    text-decoration: none;
    color: inherit;
}

.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.text-maroon {
    color: var(--m) !important;
}

.bg-maroon {
    background-color: var(--m) !important;
}

.bg-dark-custom {
    background-color: var(--dark) !important;
}

.bg-off {
    background-color: var(--off) !important;
}

.bg-off2 {
    background-color: var(--off2) !important;
}

.border-custom {
    border-color: var(--border) !important;
}

/* ===== NAVBAR ===== */
.navbar {
    height: var(--nav);
    background: rgba(15, 15, 15, .94) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -.04em;
}

.navbar-brand .dot {
    color: var(--m);
}

.navbar-brand sub {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, .28);
    margin-left: 6px;
    font-family: 'Inter', sans-serif;
}

.nav-link-custom {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 13px !important;
    border-radius: 4px;
    color: rgba(255, 255, 255, .5) !important;
    transition: color .18s, background .18s;
    background: none;
    border: none;
}

.nav-link-custom:hover,
.nav-link-custom.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
}

.btn-nav-cta {
    font-size: 13px;
    font-weight: 700;
    padding: 9px 20px;
    background: var(--m);
    color: #fff !important;
    border-radius: 4px;
    transition: background .18s, transform .15s, box-shadow .18s;
    letter-spacing: .02em;
    border: none;
}

.btn-nav-cta:hover {
    background: var(--ml);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(156, 10, 63, .4);
    color: #fff !important;
}

/* ===== PAGES ===== */
.page {
    display: none;
}

.page.active {
    display: block;
}

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: var(--dark);
    padding-top: var(--nav);
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 75% 65% at 68% 50%, rgba(156, 10, 63, .26) 0%, transparent 62%),
        radial-gradient(ellipse 38% 42% at 14% 78%, rgba(156, 10, 63, .11) 0%, transparent 60%),
        linear-gradient(140deg, #0F0F0F 0%, #180810 55%, #0F0F0F 100%);
    background-size: 400% 400%;
    background-position: 50% 50%;
    animation: heroBgFlowWithGlow 22s ease-in-out infinite;
}

@keyframes heroBgFlowWithGlow {
    0% {
        background-position: 0% 0%;
        filter: brightness(1) saturate(1);
    }
    25% {
        background-position: 100% 50%;
        filter: brightness(1.1) saturate(1.1);
    }
    50% {
        background-position: 50% 100%;
        filter: brightness(0.95) saturate(0.9);
    }
    75% {
        background-position: 0% 50%;
        filter: brightness(1.05) saturate(1.05);
    }
    100% {
        background-position: 0% 0%;
        filter: brightness(1) saturate(1);
    }
}
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 72px 0 88px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--m);
    padding: 7px 15px;
    border: 1px solid rgba(156, 10, 63, .28);
    border-radius: 50rem;
    background: rgba(156, 10, 63, .07);
    opacity: 0;
    transform: translateY(18px);
    animation: fu .7s var(--ease) .1s forwards;
}

.hero-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m);
    animation: pb 2.2s ease infinite;
}

@keyframes pb {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .35
    }
}



.herohead-other{
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.0 !important;
    color: #fff !important;
    letter-spacing: -.04em !important;
    opacity: 0 ;
    transform: translateY(0px) !important;
    animation: fu .85s var(--ease) .24s forwards !important;
}

.hero h1.herohead-other {
    font-size: clamp(44px, 6.8vw, 65px) !important;
}

.hero h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(44px, 6.8vw, 90px) !important;
    font-weight: 900;
    line-height: 1.0;
    color: #fff;
    letter-spacing: -.04em;
    opacity: 0;
    transform: translateY(28px);
    animation: fu .85s var(--ease) .24s forwards;
}


.hero h1 em {
    color: transparent;
    font-style: normal;
    background: linear-gradient(130deg, var(--ml) 0%, #F0507A 55%, var(--m) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-sub {
    font-size: 18px;
    color: rgba(255, 255, 255, .58);
    line-height: 1.75;
    font-weight: 300;
    opacity: 0;
    transform: translateY(28px);
    animation: fu .85s var(--ease) .38s forwards;
}

.hero-btns {
    opacity: 0;
    transform: translateY(28px);
    animation: fu .85s var(--ease) .52s forwards;
}

.btn-hp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 700;
    background: var(--m);
    color: #fff !important;
    border-radius: 4px;
    transition: all .18s var(--ease);
    box-shadow: 0 0 36px rgba(156, 10, 63, .38);
    letter-spacing: .02em;
    border: none;
}

.btn-hp:hover {
    background: var(--ml);
    transform: translateY(-2px);
    box-shadow: 0 10px 44px rgba(156, 10, 63, .58);
}

.btn-hg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .78) !important;
    border-radius: 4px;
    transition: all .18s var(--ease);
    background: transparent;
}

.btn-hg:hover {
    border-color: rgba(255, 255, 255, .44);
    color: #fff !important;
    background: rgba(255, 255, 255, .05);
}

.hero-micro {
    font-size: 12px;
    color: rgba(255, 255, 255, .26);
    opacity: 0;
    animation: fu .8s var(--ease) .66s forwards;
}

.hero-stats{
    width: 70% !important;
    align-items:center;
}

.hst{
    padding-right:38px;
    margin-right:38px;
    border-right:1px solid rgba(255,255,255,.07);
}

.hero-stats > div:last-child .hst{
    margin-right:0;
    padding-right:0;
}


.hst-n {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -.04em;
}

.hst-n span {
    color: var(--m);
}

.hst-l {
    font-size: 11px;
    color: rgba(255, 255, 255, .36);
    margin-top: 5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
@media (max-width:767px){

    .hero-stats{
        width: 100% !important;
        align-items:center;
    }

    .hero-stats .col-6{
        margin-bottom:20px;
    }

    .hst{
        margin-right:0;
        padding-right:0;
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.07);
        padding-bottom:15px;
    }

    .hero-stats .col-6:nth-last-child(-n+2) .hst{
        border-bottom:none;
    }
}

/* FORM GROUP */

.select2-container{
    width:100%!important;
    font-family:'Inter',sans-serif;
}

.select2-container--default .select2-selection--multiple{

    background:transparent!important;

    border:none!important;

    border-bottom:1px solid rgba(255,255,255,.35)!important;

    border-radius:0!important;

    min-height:48px;

    padding:6px 35px 6px 0;

    position:relative;

}

.select2-container--focus .select2-selection--multiple{

    border-bottom:1px solid #fff!important;

}

.select2-selection__rendered{

    display:flex!important;

    flex-wrap:wrap;

    gap:6px;

}

.select2-selection__choice {
    background: #9c0a3f!important;
    color: #fff!important;
    border: none!important;
    margin: 2px!important;
}

.select2-selection__choice__remove{

    color:#fff!important;

    margin-right:6px!important;

    border:none!important;

}

.select2-selection__choice__remove:hover{

    background:none!important;

    color:#fff!important;

}

.select2-search__field{

    color:#fff!important;

}

.select2-search__field::placeholder{

    color:rgba(255,255,255,.45);

}

.select2-dropdown{

    background:#151515;

    border:1px solid rgba(255,255,255,.08);

}

/* .select2-results__option{

    color:#fff;

    padding:10px 14px;

} */

.select2-results__option--highlighted{

    background:#9c0a3f!important;

    color:#fff!important;

}

.select2-results__option[aria-selected=true]{

    background:#252525;

}

.select2-container--default .select2-selection--multiple::after{

    content:"\f078";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    right:10px;

    top:50%;

    transform:translateY(-50%);

    color:#fff;

    pointer-events:none;

}

.form-group {
  margin-bottom: 22px;
}

/* LABEL */
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}

/* INPUT */
.form-control {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  padding: 10px 2px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  outline: none;
  font-family: 'Inter', sans-serif;
  box-shadow: none; /* IMPORTANT */
  transition: border-color 0.2s ease;
}

/* PLACEHOLDER */
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* FOCUS (IMPORTANT FIX) */
.form-control:focus {
  background: transparent !important;   /* stop white bg */
  color: #ffffff !important;            /* force white text */
  border-bottom: 1px solid #ffffff;
  outline: none;
  box-shadow: none !important;          /* removes bootstrap glow */
}

/* extra safety for bootstrap */
.form-control:active {
  background: transparent;
  color: #ffffff;
}
    /* checkbox grid (services) */
    .services-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }

    .service-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px 8px 8px;
        /* border-radius: 10px; */
        /* background: rgba(255, 255, 255, 0.02); */
        transition: background 0.15s;
        cursor: default;
        border: 1px solid transparent;
    }

    .service-item:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.04);
    }

    .service-item input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.06);
        border: 1.5px solid rgb(156 10 63);
        border-radius: 6px;
        flex-shrink: 0;
        transition: all 0.15s;
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-item input[type="checkbox"]:checked {
        background: #9c0a3f;
        border-color: #9c0a3f;
    }

    .service-item input[type="checkbox"]:checked::after {
      content: "✓";
      font-size: 14px;
      font-weight: 700;
      color: white;
      line-height: 1;
    }

    .service-item label {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.75);
      cursor: pointer;
      letter-spacing: 0.01em;
      flex: 1;
      margin-bottom: 0;
      text-transform: none;
    }

    .service-item label small {
      font-weight: 400;
      color: rgba(255, 255, 255, 0.3);
      font-size: 12px;
      margin-left: 4px;
    }

    /* book button */
    .book-btn {
        display: inline-block;
        width: 100%;
        background: #9c0a3f;
        border: none;
        border-radius: 4px;
        padding: 16px 20px;
        font-size: 16px;
        font-weight: 600;
        color: white;
        text-align: center;
        letter-spacing: 0.01em;
        transition: background 0.2s, transform 0.1s;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        margin-top: 12px;
        /* box-shadow: 0 6px 16px -6px rgba(108, 92, 231, 0.3); */
    }

    .book-btn:hover {
        background: #131112;
    }
    .book-btn:active {
      transform: scale(0.97);
    }

    .book-btn span {
      font-weight: 400;
      opacity: 0.7;
      margin-left: 4px;
    }
    /* FORM END */


.hero-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    /* border-radius: 12px; */
    padding: 26px;
    backdrop-filter: blur(14px);
    opacity: 0;
    animation: fl .9s var(--ease) .95s forwards;
    /* width: 265px; */
}

@keyframes fl {
    from {
        opacity: 0;
        transform: translateX(26px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.hc-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .28);
    margin-bottom: 14px;
}

.hc-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.hc-item:last-child {
    border-bottom: none;
}

.hc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--m);
    flex-shrink: 0;
}

.hc-text {
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    font-weight: 500;
}

.hc-ck {
    margin-left: auto;
    font-size: 12px;
    color: var(--m);
    font-weight: 700;
}

@keyframes fu {
    from {
        opacity: 0;
        transform: translateY(28px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ===== MARQUEE ===== */
.marquee {
    background: var(--m);
    padding: 12px 0;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, .15);
}

.mtrack {
    display: flex;
    width: max-content;
    animation: mq 22s linear infinite;
}

@keyframes mq {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.mitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
}

.msep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}

/* ===== SECTION BACKGROUNDS ===== */
.sec {
    padding: 88px 0;
}

.sec-off {
    padding: 88px 0;
    background: var(--off);
}

.sec-off2 {
    padding: 88px 0;
    background: var(--off2);
}

.sec-off2_withoutpd {
    background: var(--off2);
}

.sec-off2-carousel {
    padding: 40px 0;
    background: var(--off2);
}

.sec-maroon {
    padding: 88px 0;
    color: #fff;
    background-color: #6b0f35;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 180, 200, 0.35) 0%, rgba(220, 100, 140, 0.15) 30%, transparent 60%),
        radial-gradient(ellipse 500px 600px at 50% 45%, rgba(180, 20, 70, 0.5) 0%, rgba(160, 10, 50, 0.2) 35%, transparent 65%),
        radial-gradient(circle at 80% 60%, rgba(80, 5, 30, 0.6) 0%, rgba(50, 2, 20, 0.2) 40%, transparent 65%),
        radial-gradient(circle at 95% 15%, rgba(200, 50, 100, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 5% 85%, rgba(220, 120, 160, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #8a1a45 0%, #6b0f35 30%, #4a0a1f 65%, #2d0510 100%);
    background-blend-mode: normal;
    /*background-size: 300% 300%;*/
    background-position: 0% 0%;
    animation: maroonShiftRich 18s ease-in-out infinite;
}

@keyframes maroonShiftRich {
    0% {
        /*background-position: 300% 300%;*/
        filter: brightness(1) saturate(1);
        /*transform: scale(1);*/
    }
    20% {
        /*background-position: 300% 300%;*/
        filter: brightness(1.15) saturate(1.2);
        /*transform: scale(1.02);*/
    }
    40% {
        /*background-position: 300% 300%;*/
        filter: brightness(0.9) saturate(0.9);
        /*transform: scale(0.98);*/
    }
    60% {
        /*background-position: 300% 300%;*/
        filter: brightness(1.1) saturate(1.1);
        /*transform: scale(1.01);*/
    }
    80% {
        /*background-position: 300% 300%;*/
        filter: brightness(0.85) saturate(0.85);
        /*transform: scale(0.99);*/
    }
    100% {
        /*background-position: 300% 300%;*/
        filter: brightness(1) saturate(1);
        /*transform: scale(1);*/
    }
}

.sec-accent {
    padding: 88px 0;
    background: var(--dark);
    color: #fff;
}

.ph {
    padding: calc(var(--nav) + 64px) 0 72px;
    background: var(--dark);
    color: #fff;
}

/* CLIENTS CAROUSEL */
/* CLIENTS CAROUSEL */
.sec {
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

.sec-off2-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    gap: 2rem; /* Default gap */
    animation: scrollBrands 40s linear infinite;
    width: max-content;
    will-change: transform;
}

.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.2rem;
    font-weight: 600;
    font-size: 1.2rem;
    color: #1a1e2b;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent items from shrinking */
}

.brand-item img {
    max-height: 110px;
    width: auto;
    object-fit: contain;
}

.brand-item i {
    font-size: 1.8rem;
    margin-right: 6px;
    opacity: 0.7;
    color: #2a2f3f;
}

/* Duplicate items get same styling */
.brand-item.clone {
    opacity: 0.95;
}

@keyframes scrollBrands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sec-off2-carousel:hover .carousel-track {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
    .carousel-track {
        gap: 1.5rem; /* Consistent gap for tablet */
    }
    
    .page.active {
        overflow-x: hidden !important;
    }
    
    .brand-item {
        padding: 0 0.8rem;
        font-size: 0.9rem;
    }
    
    .brand-item img {
        max-height: 40px;
    }
    
    .hero-content {
        padding-left: 20px;
    }
    
    .btn-nav-cta {
        margin-top: 5px;
    }
    
    .navbar-nav {
        margin-bottom: 20px;
    }
    
    .bg-darknav {
        background-color: var(--dark) !important;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .carousel-track {
        gap: 1rem; /* Smaller but consistent gap for mobile */
    }
    
     .page.active {
        overflow-x: hidden !important;
    }
    
    .brand-item {
        padding: 0 0.5rem;
        font-size: 0.7rem;
    }
    
    .brand-item img {
        max-height: 30px;
    }
    
    .hero-content {
        padding-left: 20px;
    }
    
    .btn-nav-cta {
        margin-top: 5px;
    }
    
    .navbar-nav {
        margin-bottom: 20px;
    }
    
    .bg-darknav {
        background-color: var(--dark) !important;
        padding: 15px;
    }
}
/* CLIENTS CAROUSEL END */

/* FAQS */
.lead-custom {
    font-size: 17px;
    color: var(--gmid);
    line-height: 1.72;
    font-weight: 300;
}

/* Accordion - minimal border radius, black text, white bg, + / - icons */
.accordion {
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
  --bs-accordion-border-radius: 4px;
  --bs-accordion-inner-border-radius: 4px;
  --bs-accordion-bg: #ffffff;
  --bs-accordion-border-color: #e0e0e0;
  --bs-accordion-btn-bg: #ffffff;
  --bs-accordion-btn-color: #000000;
  --bs-accordion-active-bg: #ffffff;
  --bs-accordion-active-color: #000000;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-body-padding-x: 1rem;
  --bs-accordion-body-padding-y: 0 1rem 1rem 1rem;
}

.accordion-item {
  border: 1px solid #e0e0e0;
  border-radius: 4px !important;
  background: #ffffff;
}

.accordion-item:last-of-type {
  margin-bottom: 0;
}

.accordion-button {
    display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 4px !important;
  background: #ffffff;
  color: #000000;
  padding: 1rem 1rem;
  gap: 0.5rem;
  transition: background 0.2s;
  box-shadow: none !important;
  border: none;
}

.accordion-question {
    flex: 1;
    text-align: left;
    font-size: 0.95rem;
}

.accordion-button:not(.collapsed) {
  background: #ffffff;
  color: #000000;
  box-shadow: none;
  border-radius: 4px 4px 0 0 !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent;
}

/* Custom + / - icon instead of bootstrap arrow */
.accordion-button::after {
  display: none !important;
}

.accordion-icon {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--m);
  transition: transform 0.25s;
  display: inline-block;
  width: 1.3rem;
  text-align: center;
  flex-shrink: 0;
  margin-left: 1rem;
    flex-shrink: 0;
  margin-left: 1rem;
}

.accordion-button:not(.collapsed) .accordion-icon {
  transform: rotate(45deg);
}

.accordion-body {
  color: #000000;
  font-size: 0.95rem;
  line-height: 1.7;
  background: #ffffff;
  border-radius: 0 0 4px 4px;
  padding: 0 1rem 1.2rem 1rem;
}

.accordion-body strong {
  color: #000000;
  font-weight: 600;
}

/* remove any extra borders or shadows */
.accordion-button:not(.collapsed)::after {
  background-image: none !important;
}

.accordion-button::after {
  background-image: none !important;
}

.accordion-collapse {
  border: none;
}

/* reveal (simple fade) */
.reveal {
  opacity: 1;
  transition: opacity 0.3s;
}

@media (max-width: 576px) {
  .st { font-size: 1.6rem; }
  .lead-custom-center { font-size: 0.95rem; }
  .accordion-button { font-size: 0.9rem; padding: 0.8rem 0.8rem; }
  .accordion-body { font-size: 0.9rem; }
}
/* FAQS END */

/* ===== EYEBROWS ===== */
.ey {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--m);
    margin-bottom: 14px;
}

.ey::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--m);
    border-radius: 2px;
}

.ey-w {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    margin-bottom: 14px;
}

.ey-w::before {
    content: '';
    width: 20px;
    height: 2px;
    background: rgba(255, 255, 255, .22);
    border-radius: 2px;
}

/* ===== HEADINGS ===== */
h2.st {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(44px, 6.8vw, 50px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.035em;
    color: var(--g);
    margin-bottom: 14px;
}

h2.st.w {
    color: #fff;
}

.lead-custom {
    font-size: 17px;
    color: var(--gmid);
    line-height: 1.72;
    max-width: 540px;
    font-weight: 300;
}

.lead-custom.w {
    color: rgba(255, 255, 255, .55);
}

/* ===== BUTTONS ===== */
.btn-p {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    background: var(--m);
    color: #fff !important;
    border-radius: 4px;
    transition: all .18s var(--ease);
    box-shadow: 0 3px 14px rgba(156, 10, 63, .28);
    letter-spacing: .02em;
    border: none;
}

.btn-p:hover {
    background: var(--ml);
    transform: translateY(-1px);
    box-shadow: 0 7px 24px rgba(156, 10, 63, .46);
}

.btn-out {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid var(--border);
    color: var(--g) !important;
    border-radius: 4px;
    transition: all .18s var(--ease);
    background: transparent;
}

.btn-out:hover {
    border-color: var(--m);
    color: var(--m) !important;
    background: var(--m05);
}

.btn-w {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    background: #fff;
    color: var(--m) !important;
    border-radius: 4px;
    transition: opacity .18s;
    border: none;
}

.btn-w:hover {
    opacity: .9;
}

/* ===== PAIN CARDS ===== */
.pain-grid {
    margin-top: 44px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    gap: 1px;
}

.pc {
    background: #fff;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    transition: background .18s;
}

.pc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--m);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--ease);
}

.pc:hover {
    background: #FDF8FA;
}

.pc:hover::before {
    transform: scaleX(1);
}

.pc-ico {
    font-size: 26px;
    margin-bottom: 14px;
}

.pc strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 7px;
}

.pc p {
    font-size: 14px;
    color: var(--gmid);
    line-height: 1.65;
    font-style: italic;
    margin: 0;
}

.pain-cta {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--g);
    margin-top: 44px;
    letter-spacing: -.02em;
}

.pain-cta span {
    color: var(--m);
}

/* ===== PACKAGES ===== */
.pkc {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 36px 28px;
    position: relative;
    transition: box-shadow .22s, transform .22s, border-color .22s;
    height: 100%;
}

.pkc:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
    border-color: rgba(156, 10, 63, .2);
}

.pkc.feat {
    border: 2px solid var(--m);
    background: var(--dark);
}

.pkc.feat:hover {
    box-shadow: 0 8px 40px rgba(156, 10, 63, .28);
    transform: translateY(-4px);
}

.pk-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 50rem;
    background: var(--m);
    color: #fff;
    margin-bottom: 22px;
}

.pk-name {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--g);
    letter-spacing: -.03em;
    margin-bottom: 5px;
}

.pkc.feat .pk-name {
    color: #fff;
}

.pk-sub {
    font-size: 13px;
    color: var(--glt);
    margin-bottom: 24px;
}

.pkc.feat .pk-sub {
    color: rgba(255, 255, 255, .36);
}

.pk-price {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: var(--g);
    letter-spacing: -.04em;
    line-height: 1;
}

.pkc.feat .pk-price {
    color: #fff;
}

.pk-curr {
    font-size: 17px;
    font-weight: 600;
    vertical-align: top;
    margin-top: 8px;
     margin-right: 8px;
    display: inline-block;
}



.pk-uk {
    font-size: 13px;
    color: var(--glt);
    margin: 4px 0;
}

.pkc.feat .pk-uk {
    color: rgba(255, 255, 255, .34);
}

.pk-del {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--m);
    background: var(--m10);
    padding: 3px 9px;
    border-radius: 50rem;
    margin-bottom: 24px;
}

.pkc.feat .pk-del {
    background: rgba(156, 10, 63, .25);
    color: rgba(255, 255, 255, .85);
}

.pk-div {
    height: 1px;
    background: var(--border);
    margin-bottom: 22px;
}

.pkc.feat .pk-div {
    background: rgba(255, 255, 255, .09);
}

.pk-items {
    list-style: none;
    padding: 0;
    margin-bottom: 28px;
}

.pk-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--gmid);
    margin-bottom: 9px;
    line-height: 1.5;
}

.pkc.feat .pk-item {
    color: rgba(255, 255, 255, .58);
}

.pk-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid var(--m);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 9px;
    font-weight: 700;
    color: var(--m);
}

.pkc.feat .pk-dot {
    border-color: rgba(156, 10, 63, .5);
    color: rgba(156, 10, 63, .7);
}

.pk-btn {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: .02em;
    transition: all .18s var(--ease);
    border: none;
}

.pk-fill {
    background: var(--m);
    color: #fff;
    box-shadow: 0 3px 14px rgba(156, 10, 63, .28);
}

.pk-fill:hover {
    background: var(--ml);
    transform: translateY(-1px);
    box-shadow: 0 7px 24px rgba(156, 10, 63, .46);
}

.pk-out-d {
    border: 1.5px solid var(--border);
    color: var(--g);
    background: transparent;
}

.pk-out-d:hover {
    border-color: var(--m);
    color: var(--m);
    background: var(--m05);
}

.pk-wh {
    border: 1.5px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .8);
    background: transparent;
}

.pk-wh:hover {
    border-color: rgba(255, 255, 255, .44);
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

/* TESTIMOPNIALs */
.testimonials {
    background: #ffffff;
    border: 0.5px solid var(--md);         /* var(--border) */
    border-top: 4px solid var(--md);         /* var(--border) */
    border-radius: 12px;
    padding: 36px 28px 28px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.testimonials:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* ----- star rating (★★★★★) ----- */
.stars {
    color: var(--md);   /* warm gold */
    font-size: 1.4rem;
    letter-spacing: 2px;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 2px;
}
.stars i {
    margin-right: 1px;
}

/* ----- testimonial text ----- */
.procc p {
    font-size: 1rem;
    line-height: 1.6;
    color: #1e293b;
    margin: 0 0 1.8rem 0;
    flex: 1;
    font-weight: 450;
}

/* ----- avatar + author row ----- */
.author-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    border-top: 1px solid #edf2f7;
    padding-top: 1.3rem;
}

.avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffd5e5;        /* ✅ exactly as requested */
    color: #9C0A3F;             /* ✅ initials color */
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    font-family: system-ui, -apple-system, sans-serif;
    letter-spacing: 0.5px;
}

/* avatar images (custom per card) – using inline background */
.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #d9e2ef;
}

/* fallback icon if image missing */
.avatar i {
    font-size: 1.8rem;
    color: #4a5a72;
    opacity: 0.6;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 700;
    font-size: 1rem;
    color: #0b1a33;
    line-height: 1.3;
}

.author-title {
    font-size: 0.8rem;
    color: #5a6c84;
    letter-spacing: 0.02em;
    margin-top: 1px;
}

/* small badge for "JM" initials – but we keep avatar clean */
.initials-badge {
    display: none; /* not used, we use avatar */
}

/* TESTMONIALS END */

/* ===== PROCESS ===== */
.procc {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .22s, transform .22s;
    height: 100%;
}

.procc:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.proc-n-big {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    font-weight: 900;
    color: rgba(156, 10, 63, .06);
    line-height: 1;
    letter-spacing: -.04em;
}

.proc-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--m);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(156, 10, 63, .3);
}

.procc h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 10px;
    letter-spacing: -.02em;
}

.procc p {
    font-size: 14px;
    color: var(--gmid);
    line-height: 1.7;
    margin: 0;
}

/* PROCESS END */


/* ===== Technology ===== */
.techc {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .22s, transform .22s;
    height: 100%;
}

.techc:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.techc_small {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 36px 80px;
    text-align: center;
    position: relative;
    overflow: visible; /* CHANGE: overflow hidden se visible */
    transition: box-shadow .22s, transform .22s;
    height: 100%;
    display: flex; /* ADD: Centering ke liye */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    will-change: transform; /* ADD: Performance ke liye */
}

.techc_small:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

/* ADD: Border radius fix for children */
.techc_small .tech-dot {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    margin-bottom: 0; /* CHANGE: 18px se 0 kyunki gap use kar rahe hain */
    border: 0.5px solid var(--md);
    flex-shrink: 0; /* ADD: Shrink na ho */
}

/* ADD: Image centering */
.techc_small .tech-dot img {
    display: block;
    width: 70%;
    padding: 2px;
    margin: 0 auto;
}

/* ADD: Heading centering */
.techc_small h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--g);
    margin: 0; /* CHANGE: margin-bottom 10px se 0 */
    letter-spacing: -.02em;
    text-align: center;
    width: 100%;
}

/* OPTIONAL: Agar shadow blur ho toh isko add karein */
.techc_small::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: var(--border);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    transition: all .22s;
}

.techc_small:hover::before {
    background: var(--primary);
}

.tech-n-big {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    font-weight: 900;
    color: rgba(156, 10, 63, .06);
    line-height: 1;
    letter-spacing: -.04em;
}

.tech-dot {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    margin-bottom: 18px;
    border: 0.5px solid var(--md);
}
.technology-icon{
    width: 70%;
    padding: 2px;
}

.techc h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 10px;
    letter-spacing: -.02em;
}

.techc p {
    font-size: 14px;
    color: var(--gmid);
    line-height: 1.7;
    margin: 0;
}


.technologySwiper .swiper-slide {
    height: auto;
}

.technologySwiper .swiper-slide {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.technologySwiper .swiper-slide-active,
.technologySwiper .swiper-slide-next,
.technologySwiper .swiper-slide-next + .swiper-slide,
.technologySwiper .swiper-slide-next + .swiper-slide + .swiper-slide {
    opacity: 1;
}

/* Technology END */

/* ===== PROOF ===== */
.proof-box {
    background: var(--dark);
    border-radius: 12px;
    padding: 44px;
    margin-top: 36px;
    position: relative;
    overflow: hidden;
}

.proof-box::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(156, 10, 63, .16) 0%, transparent 70%);
}

.bac {
    border-radius: 8px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .07);
}

.bac.bef {
    background: rgba(255, 255, 255, .03);
}

.bac.aft {
    background: rgba(156, 10, 63, .1);
    border-color: rgba(156, 10, 63, .22);
}

.ba-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.bef .ba-lbl {
    color: rgba(255, 255, 255, .26);
}

.aft .ba-lbl {
    color: var(--m);
}

.ba-logo {
    height: 20px;
    width: 54px;
    border-radius: 3px;
    margin-bottom: 9px;
}

.bef .ba-logo {
    background: rgba(255, 255, 255, .09);
}

.aft .ba-logo {
    background: var(--m);
}

.ba-site {
    height: 48px;
    border-radius: 4px;
    width: 100%;
}

.bef .ba-site {
    background: rgba(255, 255, 255, .06);
}

.aft .ba-site {
    background: rgba(156, 10, 63, .2);
}

.ba-note {
    font-size: 12px;
    margin-top: 9px;
}

.bef .ba-note {
    color: rgba(255, 255, 255, .2);
}

.aft .ba-note {
    color: rgba(156, 10, 63, .8);
    font-weight: 600;
}

.qblk {
    border-left: 3px solid var(--m);
    padding: 16px 20px;
    background: rgba(255, 255, 255, .03);
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 16px;
}

.qcite {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .32);
    font-style: normal;
    font-weight: 600;
    margin-top: 9px;
}

.rpills {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.rp {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 50rem;
    background: rgba(156, 10, 63, .18);
    color: rgba(255, 255, 255, .76);
    border: 1px solid rgba(156, 10, 63, .28);
}

/* ===== SOLUTIONS ===== */
.solc {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 34px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .22s, transform .22s;
    height: 100%;
}

.solc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--m), var(--ml));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--ease);
}

.solc:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.solc:hover::before {
    transform: scaleX(1);
}

.sol-n {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 900;
    color: rgba(156, 10, 63, .08);
    line-height: 1;
    margin-bottom: 14px;
    letter-spacing: -.04em;
}

.solc h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 9px;
    letter-spacing: -.02em;
}

.solc>p {
    font-size: 14px;
    color: var(--gmid);
    line-height: 1.7;
    margin-bottom: 18px;
}

.si-list {
    list-style: none;
    padding: 0;
}

.si {
    font-size: 13px;
    color: var(--gmid);
    padding: 6px 0;
    border-bottom: 1px solid var(--off2);
    display: flex;
    align-items: center;
    gap: 9px;
}

.si::before {
    content: '→';
    color: var(--m);
    font-size: 12px;
    flex-shrink: 0;
}

.si:last-child {
    border-bottom: none;
}

.sol-cta-card {
    background: var(--m05);
    border: 1.5px dashed rgba(156, 10, 63, .22);
    border-radius: 12px;
    padding: 34px;
    margin-top: 20px;
}

/* ===== INDUSTRIES ===== */
.indc {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    transition: all .22s var(--ease);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.indc::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--m);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--ease);
}

.indc:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
    border-color: rgba(156, 10, 63, .15);
}

.indc:hover::after {
    transform: scaleX(1);
}

.ind-ico {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: var(--m10);
    color: var(--m);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 16px;
}

.indc h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 7px;
}

.indc p {
    font-size: 13px;
    color: var(--gmid);
    line-height: 1.65;
    margin-bottom: 14px;
}

.itags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.itag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--off);
    color: var(--gmid);
    font-weight: 500;
}

/* ===== CASE STUDIES ===== */
.casec {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    transition: all .22s var(--ease);
}

.casec:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.ct1 {
    background: linear-gradient(135deg, #1B0A2D, #4A2870)
}

.ct2 {
    background: linear-gradient(135deg, #0A1B12, #1E5C3A)
}

.ct3 {
    background: linear-gradient(135deg, #2D0A0A, #7A2020)
}

.ct4 {
    background: linear-gradient(135deg, #0A1428, #204878)
}

.cthumb {
    height: 160px;
    padding: 22px;
    display: flex;
    align-items: flex-end;
}

.ctag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    padding: 5px 11px;
    border-radius: 3px;
    background: var(--m);
}

.cbody {
    padding: 26px;
    background: #fff;
}

.cbody h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 7px;
    letter-spacing: -.02em;
}

.cbody p {
    font-size: 13px;
    color: var(--gmid);
    line-height: 1.65;
}

.cres {
    display: flex;
    gap: 28px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.cr-n {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #000000;
    letter-spacing: -.03em;
}

.cr-l {
    font-size: 15px;
    color: #9c0a3f;
    margin-top: 2px;
    font-weight: 900;
}
/* ===== PORTFOLIO ===== */
.port-note {
    background: var(--m05);
    border: 1px solid rgba(156, 10, 63, .15);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 13px;
    color: var(--gmid);
    line-height: 1.6;
    margin-bottom: 26px;
}

.port-note strong {
    color: var(--m);
}

.pf {
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 50rem;
    border: 1.5px solid var(--border);
    color: var(--gmid);
    background: #fff;
    transition: all .18s var(--ease);
    cursor: pointer;
}

.pf:hover {
    border-color: var(--m);
    color: var(--m);
}

.pf.on {
    background: var(--m);
    color: #fff;
    border-color: var(--m);
    box-shadow: 0 3px 10px rgba(156, 10, 63, .25);
}

.portc {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all .22s var(--ease);
}

.portc:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
    border-color: rgba(156, 10, 63, .25);
}

.pthumb {
    height: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ptlbl {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    background: rgba(0, 0, 0, .36);
    padding: 3px 8px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
}

.ptlogo {
    width: 56px;
    height: 20px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .38);
}

.ptbty {
    background: linear-gradient(135deg, #F0BBCC, #D07A95)
}

.pthlth {
    background: linear-gradient(135deg, #88CEBA, #52A888)
}

.ptret {
    background: linear-gradient(135deg, #A4C0EC, #6290D8)
}

.ptcl {
    background: linear-gradient(135deg, #B4D488, #7CB240)
}

.ptgr {
    background: linear-gradient(135deg, #ECB040, #C88820)
}

.ptcs {
    background: linear-gradient(135deg, #BCB4EE, #8878D4)
}

.ptsrv {
    background: linear-gradient(135deg, var(--m), var(--md))
}

.ptfn {
    background: linear-gradient(135deg, #489438, #6AB050)
}

.pthome {
    background: linear-gradient(135deg, #384878, #5870B8)
}

.pbody {
    padding: 15px 17px;
    background: #fff;
}

.pname {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--g);
}

.pcat {
    font-size: 12px;
    color: var(--glt);
    margin: 3px 0 9px;
}

.ptags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.ptag {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--off);
    color: var(--gmid);
    font-weight: 500;
}

/* ===== ABOUT ===== */
.aimg {
    background: var(--off);
    border-radius: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    position: relative;
    overflow: hidden;
}

.aimg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 65% 40%, rgba(156, 10, 63, .1), transparent 65%);
}

.ainit {
    font-family: 'Poppins', sans-serif;
    font-size: 96px;
    font-weight: 900;
    color: rgba(156, 10, 63, .1);
    position: relative;
    z-index: 1;
    letter-spacing: -.06em;
}

.astat {
    padding: 18px;
    background: var(--off);
    border-radius: 8px;
    border: 1.5px solid var(--border);
}

.astat-n {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--m);
    letter-spacing: -.03em;
}

.astat-l {
    font-size: 12px;
    color: var(--glt);
    margin-top: 2px;
}

.pillar {
    padding: 26px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    border-top: 3px solid var(--m);
    height: 100%;
}

.pillar h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 8px;
}

.pillar p {
    font-size: 13px;
    color: var(--gmid);
    line-height: 1.65;
    margin: 0;
}

/* ===== INSIGHTS ===== */
.insc {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    transition: all .22s var(--ease);
    cursor: pointer;
}

.insc:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
}

.inthumb {
    height: 120px;
    padding: 22px;
    display: flex;
    align-items: flex-end;
}

.it1 {
    background: linear-gradient(135deg, #1A0810, #3A1428)
}

.it2 {
    background: linear-gradient(135deg, #181818, #2A1020)
}

.it3 {
    background: linear-gradient(135deg, #0E0E0E, #280818)
}

.incat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    padding: 4px 9px;
    border-radius: 3px;
    background: var(--m);
}

.ins-body {
    padding: 18px;
    background: #fff;
}

.ins-body h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 7px;
    line-height: 1.4;
}

.ins-body p {
    font-size: 13px;
    color: var(--gmid);
    line-height: 1.6;
}

.ins-meta {
    font-size: 12px;
    color: var(--glt);
    margin-top: 11px;
}

/* ===== CONTACT ===== */
.cal-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
}

.cal-head {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--g);
    margin-bottom: 4px;
    letter-spacing: -.02em;
}

.cal-sub {
    font-size: 13px;
    color: var(--glt);
    margin-bottom: 22px;
}

.cal-slot {
    padding: 9px 4px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gmid);
    text-align: center;
    cursor: pointer;
    transition: all .18s var(--ease);
}

.cal-slot:hover {
    border-color: var(--m);
    color: var(--m);
}

.cal-slot.on {
    background: var(--m);
    color: #fff;
    border-color: var(--m);
    box-shadow: 0 3px 10px rgba(156, 10, 63, .25);
}

.cal-confirm {
    width: 100%;
    padding: 13px;
    background: var(--m);
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    transition: all .18s var(--ease);
    box-shadow: 0 3px 14px rgba(156, 10, 63, .26);
    border: none;
}

.cal-confirm:hover {
    background: var(--ml);
    transform: translateY(-1px);
    box-shadow: 0 7px 24px rgba(156, 10, 63, .44);
}

.ci-item {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.ci-ico {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--m10);
    color: var(--m);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ci-lbl {
    font-size: 11px;
    color: var(--glt);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

.ci-val {
    font-size: 14px;
    color: var(--g);
    font-weight: 600;
    margin-top: 2px;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--dark);
    padding: 60px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

.fl {
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.04em;
    margin-bottom: 12px;
}

.fl span {
    color: var(--m);
}

.fl sub {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, .2);
    margin-left: 5px;
    font-family: 'Inter', sans-serif;
}

.fd {
    font-size: 13px;
    color: rgba(255, 255, 255, .3);
    line-height: 1.7;
    max-width: 270px;
}

.fmkts {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.fmkt {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 3px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .3);
}

.footer-col h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    margin-bottom: 14px;
}

.footer-col a {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .34);
    margin-bottom: 8px;
    transition: color .18s;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .05);
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, .16);
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.rd1 {
    transition-delay: .1s
}

.rd2 {
    transition-delay: .2s
}

.rd3 {
    transition-delay: .3s
}

.rd4 {
    transition-delay: .4s
}


  .service-card-outer {
    position: relative;
    /*max-width: 480px;*/
    margin: 1rem auto;
  }

  /* Middle wrap = the pink/maroon border colour, notched at top-right */
  .service-card-wrap {
      --notch-r: 50px;
      --border-w: 1.5px;
      position: relative;
      padding: var(--border-w);
      background: #FFBAD3;
      border-radius: 24px;
      -webkit-mask-image: radial-gradient(circle var(--notch-r) at 100% 0%, transparent 99%, #000 100%);
      mask-image: radial-gradient(circle var(--notch-r) at 100% 0%, transparent 99%, #000 100%);
      transition: background 0.35s ease;
  }

  .service-card {
    background: #ffffff;
    border-radius: 23px;
    padding: 2rem;
    position: relative;
    transition: background 0.35s ease, color 0.35s ease;
    -webkit-mask-image: radial-gradient(circle var(--notch-r) at 100% 0%, transparent 99%, #000 100%);
    mask-image: radial-gradient(circle var(--notch-r) at 100% 0%, transparent 99%, #000 100%);
  }

  .service-card * {
    transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;
  }

  /* Icon lives OUTSIDE the masked layers so it never gets clipped */
  .service-card-icon {
      position: absolute;
      top: -20px;
      right: -20px;
      width: 60px;
      height: 60px;
      background: var(--brand-maroon);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.5rem;
      z-index: 3;
      transition: background 0.35s ease, color 0.35s ease;
  }

  .service-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
    padding-right: 56px;
  }

  .service-card-desc {
    color: #5a5a5a;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  .service-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .service-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.92rem;
    color: #333;
  }

  .service-card-list li:last-child {
    border-bottom: none;
  }

  .service-card-list li .arrow {
    color: var(--brand-maroon);
    font-weight: 700;
    flex-shrink: 0;
  }

  /* HOVER STATE - triggered from the outer container since icon is a sibling now */
  .service-card-outer:hover .service-card {
    background: var(--brand-maroon);
  }

  .service-card-outer:hover .service-card-title,
  .service-card-outer:hover .service-card-desc,
  .service-card-outer:hover .service-card-list li {
    color: #ffffff;
  }

  .service-card-outer:hover .service-card-list li {
    border-bottom-color: rgba(255, 255, 255, 0.25);
  }

  .service-card-outer:hover .service-card-list li .arrow {
    color: #ffffff;
  }

  /*.service-card-outer:hover .service-card-icon {*/
  /*  background: #ffffff;*/
  /*  color: var(--brand-maroon);*/
  /*}*/

  @media (max-width: 576px) {
    .service-card-outer {
      margin: 1.5rem auto;
    }
    .service-card-wrap {
      --notch-r: 40px;
    }
    .service-card {
      padding: 1.5rem;
    }
    .service-card-icon {
        width: 40px;
        height: 40px;
        top: -10px;
        right: -10px;
        font-size: 1.2rem;
    }
    .service-card-title {
      font-size: 1.1rem;
      padding-right: 44px;
    }
  }