.sisgain-page{
  --bg:#f6f8fc;
  --bg-soft:#eef2fa;
  --ink:#0b1324;
  --ink-soft:#4b5468;
  --blue:#1d4ed8;
  --blue-bright:#3b7bff;
  --blue-deep:#081335;
  --card-dark:#0c1638;
  --card-dark-2:#0f1e4d;
  --white:#ffffff;
  --line:#e3e8f3;
  --radius:16px;
  --pad-section:30px;

  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  scroll-behavior:smooth;
}
.sisgain-page, .sisgain-page *{box-sizing:border-box;}
.sisgain-page img{max-width:100%;display:block;}
.sisgain-page a{color:inherit;}
.section{padding:30px;}
.wrap{max-width:1240px;margin:0 auto; text-align: center;}
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:14px;
}
.h2-grad{
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  font-weight:800;
  line-height:1.25;
  margin:0 0 16px;
  background:linear-gradient(90deg,var(--ink) 0%,var(--blue) 65%,var(--blue-bright) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.section-intro{max-width:760px;margin-bottom:44px; text-align: center; margin: auto;}
.section-intro p{color:var(--ink-soft);font-size:1.05rem;text-align: center; margin: auto;}
.center{text-align:center;margin-left:auto;margin-right:auto;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  border-radius:12px;
  font-weight:700;
  font-size:.98rem;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform .35s ease, background .35s ease, box-shadow .35s ease, color .35s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn-primary-software{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(29,78,216,.28);}
.btn-primary-software:hover{background: #fff;transform:translateY(-3px) scale(1.02);box-shadow:0 14px 30px rgba(8,19,53,.32);}
.btn-outline{background:transparent;color:var(--blue-deep);border-color:var(--blue-deep);}
.btn-outline:hover{background:var(--blue-deep);color:#fff;transform:translateY(-3px) scale(1.02);}
.btn-light{background:#fff;color:var(--blue-deep);}
.btn-light:hover{background:var(--blue-deep);color:#fff;transform:translateY(-3px) scale(1.02);}
.btn-line{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.btn-line:hover{background:#fff;color:var(--blue-deep);transform:translateY(-3px) scale(1.02);}

/* ============ HERO ============ */
#hero{background:linear-gradient(180deg,#fbfcff 0%,#eef2fa 100%);padding-top:30px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{
  font-size:clamp(2rem,4vw,3.1rem);
  font-weight:800;
  line-height:1.18;
  margin:0 0 20px;
  color:var(--ink);
}
.hero h1 .accent{
  background:linear-gradient(90deg,var(--blue-deep),var(--blue),var(--blue-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{font-size:1.08rem;color:var(--ink-soft);margin-bottom:14px;}
.hero-copy{font-size:1rem;color:var(--ink-soft);margin-bottom:30px;}
.hero-ctas{display:flex;gap:16px;margin-bottom:28px;}
.trust-row{display:flex;gap:12px 22px;margin-bottom:26px;}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--ink-soft);}
.trust-item i{color:var(--blue);}
.cloud-row{display:flex;gap:28px;flex-wrap:wrap;align-items:center;font-weight:700;color:var(--ink-soft);opacity:.8;}
.cloud-row span{display:flex;align-items:center;gap:8px;font-size:.95rem;}
#industries .card-dark a h3{
    text-decoration: underline;
}
/* Hero signature dashboard mockup */
.hub{
  background:var(--blue-deep);
  border-radius:22px;
  padding:22px;
  position:relative;
  box-shadow:0 30px 60px rgba(8,19,53,.35);
  color:#fff;
  overflow:hidden;
}
.hub::before{
  content:'';position:absolute;inset:-40% -20% auto auto;width:280px;height:280px;
  background:radial-gradient(circle,rgba(59,123,255,.35),transparent 70%);
}
.hub-top{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;margin-bottom:18px;position:relative;z-index:2;}
.hub-top i{color:var(--blue-bright);}
.hub-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;position:relative;z-index:2;}
.hub-col{display:flex;flex-direction:column;gap:10px;}
.hub-node{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:9px 12px;
  font-size:.8rem;
  font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.hub-node i{color:var(--blue-bright);width:16px;text-align:center;}
.hub-gateway{
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2454ff,#0c1638);
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(59,123,255,.55);
  box-shadow:0 0 0 8px rgba(59,123,255,.08);
  margin:0 auto;
  position:relative;
}
.hub-gateway i{font-size:1.6rem;}
.hub-gateway::after{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  border:1px dashed rgba(59,123,255,.4);
  animation:spin 12s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.hub-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;position:relative;z-index:2;}
.hub-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px;}
.hub-stat .num{font-size:1.3rem;font-weight:800;color:var(--blue-bright);}
.hub-stat .lbl{font-size:.74rem;color:rgba(255,255,255,.65);margin-top:2px;}
/* ==========================
   Hero Responsive
========================== */
@media (max-width:991px){

    .hero-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    #hero{
        padding:30px;
    }

    #hero h1{
        font-size:2rem;
        line-height:1.25;
        text-align:center;
    }

    .hero-lead,
    .hero-copy{
        text-align:center;
    }

    .hero-ctas{
        flex-direction:column;
        gap:12px;
    }

    .hero-ctas .btn{
        width:100%;
        justify-content:center;
    }

    .trust-row{
        justify-content:center;
        flex-wrap:wrap;
        gap:12px;
    }

    .cloud-row{
        justify-content:center;
        gap:18px;
    }

    .hub{
        padding:18px;
    }
}

@media (max-width:767px){

    #hero{
        padding:20px 0;
    }

    #hero h1{
        font-size:1.75rem;
    }

    .hero-lead{
        font-size:1rem;
    }

    .hero-copy{
        font-size:.95rem;
    }

    .hub-flow{
        grid-template-columns:1fr;
        gap:18px;
    }

    .hub-gateway{
        width:70px;
        height:70px;
        order:2;
    }

    .hub-col:first-child{
        order:1;
    }

    .hub-col:last-child{
        order:3;
    }

    .hub-stats{
        grid-template-columns:1fr;
    }

    .hub-stat{
        text-align:center;
    }

    .hub-node{
        justify-content:center;
        text-align:center;
    }

    .trust-item{
        width:100%;
        justify-content:center;
    }

    .cloud-row span{
        width:100%;
        justify-content:center;
    }
}
@media (max-width:767px){

    #hero .wrap{
        padding-left:16px;
        padding-right:16px;
    }

    .hero-ctas .btn{
        width:100%;
        border-radius:12px;
    }

    .hub{
        margin:24px 0 0;
        border-radius:18px;
    }

}
/* ============ TRUSTED / LOGOS ============ */

.sg-logos{
  /* scoped tokens */
  --line: rgba(255,255,255,0.07);
  --line-2: rgba(255,255,255,0.12);
 
  position: relative;
  padding: 26px 0;
  background: #f5f8fd;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  /* mask removed from here — it was fading the section's own dark background to
     transparent at the edges, letting the page's white background show through */
}
 
.sg-logos__track{
  display: flex;
  gap: 42px;
  align-items: center;
  width: max-content;
  animation: sg-logos-marq 42s linear infinite;
  /* mask now lives on the track only, so it fades the logo strip itself
     while the section background underneath stays solid #07080b */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
@keyframes sg-logos-marq{ to{ transform: translateX(-50%); } }
 
.sg-logos__item{
  height: 56px;
  min-width: 150px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, border-color .25s ease;
}
.sg-logos__item:hover{
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.sg-logos__item img{
  max-width: 118px;
  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sg-logos{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 26px 0;
}

.sg-logos .container{
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.sg-logos__track{
    width: max-content;
}
 
@media (prefers-reduced-motion: reduce){
  .sg-logos__track{ animation: none; }
}

/* ============ STATS ============ */
.stats-bar{
  background:linear-gradient(120deg,var(--blue-deep),var(--card-dark-2));
  border-radius:20px;
  padding:36px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:50px;
  box-shadow:0 20px 45px rgba(8,19,53,.25);
}
.stat-item{color:#fff;text-align:left;}
.stat-item i{color:var(--blue-bright);font-size:1.3rem;margin-bottom:10px;}
.stat-num{font-size:2rem;font-weight:800;display:block;}
.stat-lbl{font-size:.85rem;color:rgba(255,255,255,.72);margin-top:4px;}
.stats-note{color:var(--ink-soft);font-size:.92rem;max-width:820px;margin:26px auto 0;text-align:center;}

/* ============ GENERIC CARD GRID ============ */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card-dark{
  background:var(--card-dark);
  border-radius:var(--radius);
  padding:26px;
  color:#fff;
  border:1px solid rgba(59,123,255,.18);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s ease, box-shadow .35s ease, border-color .35s ease;
  position:relative;
  overflow:hidden;
}
.card-dark:hover{
  transform:translateY(-8px) scale(1.015);
  background:var(--card-dark-2);
  border-color:var(--blue-bright);
  box-shadow:0 24px 48px rgba(8,19,53,.35);
}
.card-icon{
  width:52px;height:52px;border-radius:12px;
  background:rgba(59,123,255,.14);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  transition:background .35s ease, color .35s ease, transform .35s ease;
}
.card-icon i{color:var(--blue-bright);font-size:1.3rem;transition:color .35s ease;}
.card-dark:hover .card-icon{background:var(--blue-bright);transform:scale(1.08) rotate(-4deg);}
.card-dark:hover .card-icon i{color:#fff;}
.card-dark h3{margin:0 0 10px;font-size:1.12rem;font-weight:700;}
.card-dark .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:10px;}
.card-dark p{color:rgba(255,255,255,.78);font-size:.92rem;margin:0 0 8px;}
.card-dark .cta-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue-bright);font-weight:700;font-size:.9rem;margin-top:10px;text-decoration:none;transition:gap .3s ease;}
.card-dark .cta-link:hover{gap:10px;color:#fff;}

/* ============ SLIDER (generic) ============ */
.slider-wrap{position:relative;}
.slider-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 22px;cursor:grab;
  scrollbar-width:thin;scrollbar-color:var(--blue) var(--bg-soft);
}
.slider-track.dragging{cursor:grabbing;scroll-snap-type:none;}
.slider-track::-webkit-scrollbar{height:6px;}
.slider-track::-webkit-scrollbar-thumb{background:var(--blue);border-radius:10px;}
.slider-track > *{scroll-snap-align:start;flex:0 0 300px;}
.slider-nav{display:flex;gap:10px;justify-content:flex-end;margin-bottom:16px;}
.slider-nav button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--blue-deep);cursor:pointer;font-size:1rem;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.slider-nav button:hover{background:var(--blue-deep);color:#fff;transform:scale(1.06);}

/* ============ ROOT CAUSES (accordion) ============ */
.cause-diagram{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  background:var(--bg-soft);border-radius:20px;padding:24px;margin-bottom:36px;
}
.cause-diagram .step{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.85rem;color:var(--blue-deep);}
.cause-diagram .step i.arrow{color:var(--blue-bright);}
.acc{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden;transition:border-color .3s ease, box-shadow .3s ease;}
.acc:hover{border-color:var(--blue-bright);box-shadow:0 8px 22px rgba(29,78,216,.08);}
.acc summary{
  list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:14px;
  font-weight:700;font-size:1rem;color:var(--ink);
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary .num{
  width:34px;height:34px;border-radius:10px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;flex:none;
}
.acc summary .chev{margin-left:auto;transition:transform .3s ease;color:var(--blue);}
.acc[open] summary .chev{transform:rotate(180deg);}
.acc .acc-body{padding:0 22px 20px 70px;color:var(--ink-soft);font-size:.95rem; text-align: left;}
.acc .acc-body b{color:var(--ink);}

/* ============ CHAIN / VS ============ */
.chain-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;}
.chain-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;}
.chain-col.bad{border-top:4px solid #d64545;}
.chain-col.good{border-top:4px solid var(--blue);}
.chain-col h3{margin:0 0 14px;font-size:1rem;font-weight:800;}
.chain-flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem;font-weight:700;color:var(--ink-soft);}
.chain-flow i{color:var(--blue-bright);font-size:.75rem;}
.chain-col p{color:var(--ink-soft);font-size:.92rem;margin-top:16px;}
.vs-badge{
  width:56px;height:56px;border-radius:50%;background:var(--blue-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;
  box-shadow:0 10px 24px rgba(8,19,53,.3);
}

/* ============ ARCHITECTURE ============ */
.arch-flow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-bottom:30px;}
.arch-step{
  background:var(--card-dark);color:#fff;border-radius:14px;padding:16px 18px;text-align:center;min-width:120px;
  border:1px solid rgba(59,123,255,.2);
}
.arch-step i{color:var(--blue-bright);font-size:1.2rem;margin-bottom:8px;display:block;}
.arch-step span{font-size:.82rem;font-weight:700;}
.arch-arrow{color:var(--blue);font-size:1.1rem;}
.arch-detail{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.detail-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;}
.detail-card b{color:var(--blue-deep);display:block;margin-bottom:6px;}
.detail-card span{color:var(--ink-soft);font-size:.9rem;}

/* ============ TABLE STYLE (comparison) ============ */
.comp-table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(8,19,53,.06);}
.comp-table th,.comp-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem;}
.comp-table thead th{background:var(--blue-deep);color:#fff;font-weight:700;}
.comp-table tbody tr:hover{background:var(--bg-soft);}
.comp-table td i.yes{color:#1b9c5b;}
.comp-table td i.no{color:#d64545;}
/* ============================================================
   Add this CSS to your main stylesheet
   (software-integration-services-dubai.css)
   ============================================================ */

/* ---------- COMPARISON TABLE: mobile card layout ---------- */
@media (max-width:640px){
  .comp-table{
    box-shadow:none;
    border-radius:0;
  }
  .comp-table thead{
    display:none; /* header text is repeated as labels on each row instead */
  }
  .comp-table, .comp-table tbody, .comp-table tr, .comp-table td{
    display:block;
    width:100%;
  }
  .comp-table tr{
    margin-bottom:16px;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 6px 18px rgba(8,19,53,.05);
  }
  .comp-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    font-size:.9rem;
  }
  .comp-table tr td:first-child{
    background:var(--blue-deep);
    color:#fff;
    font-weight:700;
    border-bottom:none;
  }
  .comp-table tr td:first-child b{ color:#fff; }
  .comp-table td:nth-child(2){
    position:relative;
    padding-top:26px;
  }
  .comp-table td:nth-child(2)::before{
    content:"SISGAIN";
    position:absolute;
    top:6px; left:16px;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--blue);
  }
  .comp-table td:nth-child(3){
    position:relative;
    padding-top:26px;
    border-bottom:none;
  }
  .comp-table td:nth-child(3)::before{
    content:"Typical Vendor";
    position:absolute;
    top:6px; left:16px;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
}

/* ---------- TESTIMONIALS: extra breakpoint safety ---------- */
@media (max-width:900px){
  #testimonials .grid-3{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:640px){
  #testimonials .grid-3{
    grid-template-columns:1fr !important;
  }
  .test-card{ padding:20px; }
  .test-quote{ font-size:.92rem; }
}

/* ============ TESTIMONIALS ============ */
.test-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:26px;
    transition:transform .35s ease, box-shadow .35s ease;
    display:flex;
    flex-direction:column;
    height:100%;
}

.test-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(8,19,53,.1);
}

.test-quote{
    font-size:.95rem;
    color:var(--ink);
    margin-bottom:20px;
    flex:1; /* Quote jitni bhi ho, author bottom me rahega */
    line-height:1.8;
}

.test-quote i{
    color:var(--blue-bright);
    margin-right:6px;
}

.test-person{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:auto;
    border-top:1px solid #eef2f7;
    padding-top:18px;
}

.test-person img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--blue-bright);
    flex-shrink:0;
}

.test-person .name{
    font-weight:700;
    font-size:1rem;
    margin-bottom:2px;
}

.test-person .role{
    color:var(--ink-soft);
    font-size:.85rem;
}
.grid.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    align-items:stretch;
}

.grid.grid-3 .test-card{
    height:100%;
}

/* ============ FINAL CTA ============ */
#final-cta{background:linear-gradient(120deg,var(--blue-deep),var(--card-dark-2));color:#fff;}
#final-cta h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;margin:0 0 10px;}
#final-cta .lead{color:rgba(255,255,255,.8);margin-bottom:24px;max-width:640px; text-align: center; margin: auto;}
.final-badges{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px; justify-content:center;}
.final-badges span{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:rgba(255,255,255,.85);}
.final-badges i{color:var(--blue-bright);}
.final-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px; justify-content:center;}

/* ============ FADE ANIMATIONS ============ */
/* Content is visible by default. Only hidden-then-revealed once JS confirms it's running
   (see .sisgain-page.js-anim-ready below) — so a JS error or blocked script never blanks the page. */
.js-anim-ready [data-animate]{opacity:0;transition:opacity .8s ease, transform .8s ease;}
.js-anim-ready [data-animate="fade-up"]{transform:translateY(28px);}
.js-anim-ready [data-animate="fade-left"]{transform:translateX(-28px);}
.js-anim-ready [data-animate="fade-right"]{transform:translateX(28px);}
.js-anim-ready [data-animate="zoom"]{transform:scale(.92);}
[data-animate].in-view{opacity:1;transform:translate(0,0) scale(1);}
.stagger.in-view > *{animation:none;}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .hero-grid{grid-template-columns:1fr;}
  .chain-wrap{grid-template-columns:1fr;}
  .vs-badge{margin:0 auto;}
  .arch-detail{grid-template-columns:1fr;}
  .stats-bar{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .section{padding:30px 18px;}
  .hero-ctas,.final-ctas{flex-direction:column;}
  .btn{width:100%;justify-content:center;}
  .stats-bar{grid-template-columns:1fr 1fr;padding:24px;}
  .slider-track > *{flex-basis:82vw;}
}
@media (prefers-reduced-motion:reduce){
  .sisgain-page, .sisgain-page *{animation:none !important;transition:none !important;}
}
.slider-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity; /* was: mandatory */
  padding:6px 4px 22px;cursor:grab;
  scrollbar-width:thin;scrollbar-color:var(--blue) var(--bg-soft);
}

  /* ===== SCOPED TO #CaseStudies SECTION ONLY ===== */
  #CaseStudies {
    background: #07080B;
    padding: 30px 0;
    position: relative;
    overflow: hidden;
    color: #F3F4F6;
  }

  #CaseStudies::before {
    content: "";
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, rgba(139,92,246,0.06) 45%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
  }

  #CaseStudies::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }

  #CaseStudies .cs-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
  }

  #CaseStudies .client-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 16px 0;
    color: #F3F4F6;
  }



  #CaseStudies .cs-subtext {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 64px auto;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
    color: #8A8F9B;
  }

  /* ===== VIEWPORT (shows exactly one card) ===== */
  #CaseStudies .cs-viewport {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    overflow: hidden;
  }

  #CaseStudies .casestudies_slider {
    position: relative;
    overflow: hidden;
  }

  #CaseStudies .slider-casestudies {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
  }

  #CaseStudies .caseStudiesSliderBox {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px;
  }

  /* ===== CARD ===== */
  #CaseStudies .case_box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 36px;
    background: #0F1219;
    border-radius: 24px;
    overflow: hidden;
    padding: 40px;
    transition: transform 0.35s ease, background 0.35s ease;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 0;
  }

  /* static border */
  #CaseStudies .case_box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: rgba(255,255,255,0.07);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1;
  }

  /* animated gradient border on hover */
  #CaseStudies .case_box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: conic-gradient(from var(--angle, 0deg), #22D3EE, #8B5CF6, #5EE6E0, #22D3EE);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    animation: cs-rotate 3s linear infinite;
    z-index: 2;
  }

  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes cs-rotate {
    to { --angle: 360deg; }
  }

  #CaseStudies .case_box:hover {
    transform: translateY(-6px);
    background: rgba(15, 18, 25, 0.92);
    box-shadow: 0 24px 60px -20px rgba(56,189,248,0.25), 0 0 40px rgba(56,189,248,0.08);
  }

  #CaseStudies .case_box:hover::before { opacity: 0; }
  #CaseStudies .case_box:hover::after { opacity: 1; }

  #CaseStudies .case_box__image {
    flex: 0 0 420px;
    width: 420px;
    height: 300px;
    position: relative;
    overflow: hidden;
    /* background: #0C0E14; */
    /* border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07); */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #CaseStudies .case_box__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  #CaseStudies .case_box__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  #CaseStudies .case_box__content h4 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 14px 0;
    color: #F3F4F6;
  }

  #CaseStudies .case_box__content p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: #C7CAD1;
    margin: 0 0 20px 0;
  }

  #CaseStudies .case_box__points {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #CaseStudies .case_box__points li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    font-weight: 400;
    color: #8A8F9B;
    line-height: 1.4;
  }

  #CaseStudies .case_box__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22D3EE, #8B5CF6);
  }

  #CaseStudies .viewCaseStudies {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 14px 22px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #07080B;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease, gap 0.3s ease;
  }

  #CaseStudies .viewCaseStudies i {
    font-style: normal;
    transition: transform 0.3s ease;
  }

  #CaseStudies .viewCaseStudies::after {
    content: "\2192";
    transition: transform 0.3s ease;
  }

  #CaseStudies .viewCaseStudies i {
    display: none; /* font-awesome glyph not loaded, use unicode arrow above */
  }

  #CaseStudies .viewCaseStudies:hover {
    transform: translateY(-3px);
    background: #22D3EE;
  }

  #CaseStudies .viewCaseStudies:hover::after {
    transform: translateX(4px);
  }

  /* ===== DOTS / PROGRESS ===== */
  #CaseStudies .cs-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  #CaseStudies .cs-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: none;
    cursor: pointer;
    transition: width 0.35s ease, background 0.35s ease;
    padding: 0;
  }

  #CaseStudies .cs-dot.active {
    width: 26px;
    background: linear-gradient(90deg, #22D3EE, #8B5CF6);
  }

  /* ===== ARROWS ===== */
  #CaseStudies .caseStudiesBottomArrows {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
  }

  #CaseStudies .caseStudiesBottomArrows button {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    color: #F3F4F6;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  }

  #CaseStudies .caseStudiesBottomArrows button:hover {
    border-color: rgba(56,189,248,0.55);
    background: rgba(56,189,248,0.08);
    transform: translateY(-2px);
  }

  #CaseStudies .caseStudiesBottomArrows i {
    font-style: normal;
  }

  #CaseStudies .caseStudiesBottomArrows .fa-arrow-left::before { content: "\2190"; }
  #CaseStudies .caseStudiesBottomArrows .fa-arrow-right::before { content: "\2192"; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 991px) {
    #CaseStudies { padding: 90px 0; }
    #CaseStudies .client-title { font-size: 40px; }
    #CaseStudies .case_box { flex-direction: column; padding: 32px; gap: 24px; }
    #CaseStudies .case_box__image { width: 100%; max-width: 360px; height: 260px; flex: 0 0 260px; }
    #CaseStudies .case_box__content { align-items: center; text-align: center; }
    #CaseStudies .case_box__content h4 { font-size: 24px; }
    #CaseStudies .case_box__points { align-items: flex-start; }
  }

  @media (max-width: 575px) {
    #CaseStudies { padding: 30px 0; }
    #CaseStudies .cs-container { padding: 0 20px; }
    #CaseStudies .client-title { font-size: 30px; }
    #CaseStudies .cs-subtext { font-size: 15px; margin-bottom: 40px; }
    #CaseStudies .case_box { padding: 24px; }
    #CaseStudies .case_box__image { width: 100%; max-width: 280px; height: 220px; flex: 0 0 220px; }
    #CaseStudies .case_box__content h4 { font-size: 21px; }
    #CaseStudies .case_box__points li { font-size: 12px; }
    #CaseStudies .caseStudiesBottomArrows button { width: 42px; height: 42px; }
  }
.tr-gradient-text{
    background: linear-gradient(90deg, #22D3EE, #8B5CF6, #FFFFFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
   display:inline-block;
    padding-bottom:6px;
    line-height:inherit;
}