:root{
    --parchment:#eaeef1;
    --parchment-deep:#e1eaf2;
    --ink:#1E2430;
    --ink-soft:#4A5163;
    --gold:#026cc8;
    --gold-bright:#004e91;
    --vermillion:#004d90;
    --teal:#24484A;
    --teal-deep:#172F31;
    --card:#eaeef1;
    --line: rgba(30,36,48,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--parchment);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
   h1{font-size: 50px!important;}
  h2{font-size: 40px !important;}
  
   /* =========================================================
   SUSRUT — FLOATING EYE PLEDGE BUTTON
========================================================= */

.susrut-pledge-tab{
    position:fixed;

    right:0;
    top:50%;

    z-index:1040;

    width:46px;
    min-height:185px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:12px 7px;

    border:1px solid rgba(255,255,255,.25);
    border-right:0;
    border-radius:10px 0 0 10px;

    background:linear-gradient(
        180deg,
        #0879bd 0%,
        #065f98 100%
    );

    color:#fff;
    text-decoration:none;

    box-shadow:
        0 8px 24px rgba(8,118,184,.22);

    transform:
        translateY(-50%);

    transition:
        width .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        transform .25s ease;
}


/* ICON */

.susrut-pledge-icon{
    width:29px;
    height:29px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;

    background:rgba(255,255,255,.1);

    color:#c9efff;

    font-size:11px;

    flex-shrink:0;
}


/* TEXT */

.susrut-pledge-text{
    display:block;

    writing-mode:vertical-rl;
    transform:rotate(180deg);

    color:#fff;

    font-size:12px;
    line-height:1;

    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;

    white-space:nowrap;
}

.susrut-donate-btn{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    overflow:hidden;

    background:#ff6633 !important;
    border:1px solid #ff6633 !important;
    border-radius:50px !important;

    color:#fff !important;

    font-size:13px !important;
    font-weight:700 !important;

    box-shadow:
        0 7px 18px rgba(255,102,51,.20);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


/* ICON */

.susrut-donate-btn i{
    font-size:12px;
    transition:
        transform .3s ease;
}


/* SHINE EFFECT */

.susrut-donate-btn:before{
    content:"";

    position:absolute;
    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.30),
        transparent
    );

    transform:skewX(-20deg);

    animation:susrutDonateShine 3.5s infinite;
}


/* HOVER */

.susrut-donate-btn:hover{
    background:#e95727 !important;
    border-color:#e95727 !important;

    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(255,102,51,.28);
}

.susrut-donate-btn:hover i{
    transform:
        scale(1.15)
        rotate(-8deg);
}


/* HEART PULSE */

.susrut-donate-btn i{
    animation:susrutDonatePulse 2s infinite;
}


/* SHINE ANIMATION */

@keyframes susrutDonateShine{

    0%{
        left:-120%;
    }

    45%,
    100%{
        left:150%;
    }

}


/* ICON PULSE */

@keyframes susrutDonatePulse{

    0%,
    100%{
        transform:scale(1);
    }

    10%{
        transform:scale(1.18);
    }

    20%{
        transform:scale(1);
    }

}


/* MOBILE */

@media(max-width:1199.98px){

    .susrut-donate-btn{
        width:100%;
        min-height:46px;

        border-radius:50px !important;
        background:#ff6633 !important;
        border-color:#ff6633 !important;

        font-size:13px !important;
        font-weight:700 !important;
    }

}
/* HOVER */

.susrut-pledge-tab:hover{
    width:53px;

    background:linear-gradient(
        180deg,
        #0a84c9 0%,
        #075d96 100%
    );

    color:#fff;

    box-shadow:
        0 10px 28px rgba(8,118,184,.30);

    transform:
        translateY(-50%)
        translateX(-2px);
}

.susrut-pledge-tab:hover
.susrut-pledge-icon{
    background:rgba(255,255,255,.18);
    color:#fff;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .susrut-pledge-tab{
        width:43px;
        min-height:170px;
    }

    .susrut-pledge-text{
        font-size:9px;.susrut-pledge-text
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .susrut-pledge-tab{
        width:40px;
        min-height:155px;

        padding:10px 6px;

        border-radius:8px 0 0 8px;
    }

    .susrut-pledge-icon{
        width:26px;
        height:26px;
        font-size:10px;
    }

    .susrut-pledge-text{
        font-size:12px;
        letter-spacing:.06em;
    }
.top-menu a {font-size: 12px;}
    .susrut-pledge-tab:hover{
        width:46px;
    }

}
  
  /* =========================================================
   SUSRUT MOBILE NAVIGATION
   BOOTSTRAP 5 - MOBILE / TABLET ONLY
========================================================= */

@media (max-width:1199.98px){

    /* -----------------------------------------------------
       NAVBAR
    ----------------------------------------------------- */

    .navbar{
        position:sticky;
        top:0;
        z-index:1050;
        min-height:76px;
        background:#fff !important;
    }

    .navbar>.container{
        min-height:76px;
        padding-left:16px;
        padding-right:16px;
    }


    /* -----------------------------------------------------
       LOGO
    ----------------------------------------------------- */

    .navbar-brand{
        display:flex;
        align-items:center;
        margin:0;
        padding:0;
    }

    .navbar-brand img{
        width:auto;
        height:58px;
        max-width:150px;
        object-fit:contain;
    }


    /* -----------------------------------------------------
       HAMBURGER
    ----------------------------------------------------- */

    .navbar-toggler{
        position:relative;
        width:44px;
        height:44px;
        padding:0 !important;

        display:flex;
        align-items:center;
        justify-content:center;

        border:1px solid #dce8ef !important;
        border-radius:8px !important;

        background:#fff;

        box-shadow:none !important;
    }

    .navbar-toggler:hover,
    .navbar-toggler:focus{
        border-color:#0875b6 !important;
        box-shadow:0 0 0 3px rgba(8,118,184,.08) !important;
    }

    .navbar-toggler-icon{
        width:20px;
        height:20px;
        background-image:none !important;
        position:relative;
    }

    .navbar-toggler-icon:before,
    .navbar-toggler-icon:after,
    .navbar-toggler-icon{
        background-repeat:no-repeat;
    }


    /* custom hamburger */

    .navbar-toggler-icon:before,
    .navbar-toggler-icon:after{
        content:"";
        position:absolute;
        left:0;
        width:20px;
        height:2px;
        border-radius:4px;
        background:#294d66;
        transition:.25s ease;
    }

    .navbar-toggler-icon:before{
        top:5px;
        box-shadow:0 6px 0 #294d66;
    }

    .navbar-toggler-icon:after{
        top:17px;
    }


    /* -----------------------------------------------------
       MOBILE MENU PANEL
    ----------------------------------------------------- */

    .navbar-collapse{
        position:absolute !important;
        top:100%;
        left:0;
        right:0;

        width:100%;

        margin:0 !important;
        padding:8px 14px 18px !important;

        background:#fff;

        border-top:1px solid #edf2f5;
        border-bottom:1px solid #dbe7ed;

        box-shadow:
            0 15px 30px rgba(20,60,90,.10);

        max-height:calc(100vh - 76px);
        overflow-y:auto;
        overflow-x:hidden;

        scrollbar-width:thin;
        scrollbar-color:#9cc2d5 #f2f7f9;
    }

    .navbar-collapse::-webkit-scrollbar{
        width:5px;
    }

    .navbar-collapse::-webkit-scrollbar-track{
        background:#f2f7f9;
    }

    .navbar-collapse::-webkit-scrollbar-thumb{
        background:#9cc2d5;
        border-radius:10px;
    }


    /* -----------------------------------------------------
       NAVIGATION LIST
    ----------------------------------------------------- */

    .navbar-nav{
        width:100%;
        margin:0 !important;
        padding:0 !important;

        display:flex;
        flex-direction:column;
        align-items:stretch !important;
    }

    .navbar-nav .nav-item{
        width:100%;
        margin:0;
        border-bottom:1px solid #edf2f5;
    }

    .navbar-nav .nav-item:last-child{
        border-bottom:0;
    }


    /* -----------------------------------------------------
       MAIN MENU LINKS
    ----------------------------------------------------- */

    .navbar-nav .nav-link{
        position:relative;

        display:flex !important;
        align-items:center;
        justify-content:space-between;

        width:100%;
        min-height:52px;

        padding:14px 8px !important;

        color:#294d66 !important;

        font-size:14px;
        line-height:1.4;
        font-weight:600;

        text-decoration:none;

        background:transparent !important;

        transition:
            color .2s ease,
            background .2s ease,
            padding .2s ease;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus{
        color:#0875b6 !important;
        background:#f5fafc !important;
    }

    .navbar-nav .nav-link:active{
        color:#075f98 !important;
    }


    /* -----------------------------------------------------
       DROPDOWN ARROW
    ----------------------------------------------------- */

    .navbar-nav .dropdown-toggle::after{
        margin-left:auto;

        border-top:5px solid #6f8794;
        border-right:4px solid transparent;
        border-left:4px solid transparent;

        vertical-align:middle;

        transition:
            transform .25s ease,
            border-color .2s ease;
    }

    .navbar-nav .dropdown-toggle.show{
        color:#0875b6 !important;
        background:#f5fafc !important;
    }

    .navbar-nav .dropdown-toggle.show::after{
        transform:rotate(180deg);
        border-top-color:#0875b6;
    }


    /* -----------------------------------------------------
       DROPDOWN MENU
    ----------------------------------------------------- */

    .navbar-nav .dropdown-menu{
        position:static !important;

        width:100%;
        min-width:0;

        margin:0 0 9px !important;
        padding:7px !important;

        border:1px solid #dce8ef !important;
        border-radius:9px !important;

        background:#f8fbfd !important;

        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.6),
            0 5px 15px rgba(25,70,100,.04) !important;

        transform:none !important;
    }


    /* -----------------------------------------------------
       DROPDOWN ITEMS
    ----------------------------------------------------- */

    .navbar-nav .dropdown-item{
        position:relative;

        display:flex;
        align-items:center;

        min-height:43px;

        padding:10px 11px 10px 27px !important;

        border-radius:6px;

        color:#536f80 !important;

        font-size:12px;
        line-height:1.4;
        font-weight:500;

        white-space:normal;

        transition:
            background .2s ease,
            color .2s ease,
            padding .2s ease;
    }

    .navbar-nav .dropdown-item:before{
        content:"";
        position:absolute;

        left:12px;
        top:50%;

        width:5px;
        height:5px;

        border-radius:50%;

        background:#9bb9c8;

        transform:translateY(-50%);

        transition:
            background .2s ease,
            transform .2s ease;
    }

    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus{
        color:#0875b6 !important;
        background:#eaf6fb !important;
        padding-left:30px !important;
    }

    .navbar-nav .dropdown-item:hover:before,
    .navbar-nav .dropdown-item:focus:before{
        background:#0875b6;
        transform:translateY(-50%) scale(1.3);
    }


    /* -----------------------------------------------------
       CONTACT BUTTON
    ----------------------------------------------------- */

    .navbar-collapse>.d-flex{
        width:100%;
        margin:12px 0 0 !important;
        padding-top:5px;
    }

    .navbar-collapse>.d-flex .btn:not(.susrut-donate-btn){
        width:100%;

        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:12px 18px !important;

        border-radius:7px !important;

        background:#0875b6 !important;
        border-color:#0875b6 !important;

        color:#fff !important;

        font-size:13px;
        font-weight:700;

        box-shadow:
            0 7px 16px rgba(8,118,184,.15);

        transition:.25s ease;
    }

    .navbar-collapse>.d-flex .btn:not(.susrut-donate-btn):hover{
        background:#075f98 !important;
        border-color:#075f98 !important;
        transform:translateY(-1px);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:575.98px){

    .navbar,
    .navbar>.container{
        min-height:68px;
    }

    .navbar>.container{
        padding-left:13px;
        padding-right:13px;
    }

    .navbar-brand img{
        height:52px;
        max-width:135px;
    }

    .navbar-toggler{
        width:41px;
        height:41px;
    }

    .navbar-collapse{
        max-height:calc(100vh - 68px);
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .navbar-nav .nav-link{
        min-height:50px;
        padding:13px 7px !important;
        font-size:13px;
    }

    .navbar-nav .dropdown-item{
        min-height:41px;
        font-size:13px;
    }

    .navbar-collapse>.d-flex .btn:not(.susrut-donate-btn){
        min-height:44px;
        font-size:12px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media(max-width:380px){

    .navbar-brand img{
        height:48px;
        max-width:125px;
    }

    .navbar-nav .nav-link{
        font-size:12.5px;
    }

    .navbar-nav .dropdown-item{
        font-size:13px;
    }

}
  
  .mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; }
  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:1320px; margin:0 auto; padding:0 0px;}
  ::selection{ background:var(--gold); color:var(--parchment); }
  :focus-visible{ outline:2px solid var(--vermillion); outline-offset:3px; }

  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{scroll-behavior:auto;}
  }

  /* ---------- eyebrow ---------- */
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--vermillion); margin-bottom:16px;
  }
  .eyebrow::before{
    content:""; width:22px; height:1px; background:var(--vermillion);
  }
  .section-teal .eyebrow{ color:var(--gold-bright); }
  .section-teal .eyebrow::before{ background:var(--gold-bright); }

  /* ================= NAV ================= */
 /* Top Bar */
.top-header{
    background:linear-gradient(90deg,#004e91,#0064b8,#004e91);
    font-size:14px;
}

.top-menu{
    gap:25px;
    padding:10px 0;
}

.top-menu li{
    position:relative;
}

.top-menu li:not(:last-child)::after{
    content:"|";
    position:absolute;
    right:-14px;
    color:rgba(255,255,255,.35);
}

.top-menu a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
    font-weight:500;
}

.top-menu a:hover{
    color:#ffd54a;
}

/* Main Navbar */

.navbar{
    padding:0px 0 !important;
}
.navbar-brand img{width: 100px; height: auto;}
.navbar-nav .nav-link{
    color:#222;
    font-weight:600;
    padding:18px 16px;
    transition:.3s;
    font-size: 15px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
    color:#004e91;
}

.dropdown-menu{
    border:none;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    padding:12px 0;
}

.dropdown-item{
    padding:10px 22px;
    font-weight:500;
}

.dropdown-item:hover{
    background:#eef6ff;
    color:#004e91;
}

.btn-primary{
    background:#004e91;
    border-color:#004e91;
}

.btn-primary:hover{
    background:#003d72;
    border-color:#003d72;
}
.wrap {
  max-width: 1320px;} 
/* Desktop hover dropdown */

@media(max-width:1280px){
    
  
  
    
    
    
    
    h1{font-size: 48px!important;}
  h2{  font-size: 30px !important;}
 .wrap {
  max-width: 1200px;}   
    
  
}








@media(min-width:1280px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1200px !important;
  
}  
}
@media(min-width:1380px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1320px !important;
  
}  
}

@media(min-width:992px){

    .navbar .dropdown:hover>.dropdown-menu{
        display:block;
        margin-top:0;
    }

}

/* Mobile */

@media(max-width:991px){

   .top-menu li:not(:last-child)::after {

  right: -9px;
 
}

 h1 {
    font-size: 28px !important;
  }
 h2 {
    font-size: 18px !important;
  }







.navbar-brand img {
  width: 70px;
  height: auto;
}
.top-menu {
  gap: 13px;
  padding: 10px 0;}
  
    .navbar-nav .nav-link{
        padding:12px 0;
    }

}

@media(max-width:767px){
 .page-hero {padding: 20px !important;}   
  .page-hero h1{font-size: 22px !important;}  
    
    
  .hero .wrap{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    /* Eye visual first */
    .hero .wrap > div:nth-child(2){
        order:1;
        width:100%;
    }

    /* Text/content second */
    .hero .wrap > div:first-child{
        order:2;
        width:100%;
    }

    .eye-stage{
        margin:0 auto;
    }  
    
    
    
    
.hero{padding: 20px !important;}
.hero .wrap{display: inherit !important;}
.btn-primary{width: 90%;}
.btn-ghost{width: 90%; margin-top:10px}
.heritage .wrap{padding:0px 20px !important;}
.heritage{padding: 140px 0px 20px 0 !important;}
.stats {  padding: 20px !important;}
.stats-grid {  display: block !important;}
.sec-head{padding: 20px !important; margin-bottom: 20px !important;}
.spec-grid{gap: 18px !important;padding: 20px !important;}
.py-5 {
  padding-top: 10px !important;
  padding-bottom: 3rem !important;
  padding-left: 10px;
  padding-right: 10px;
}
.section-teal {  padding: 20px 0 !important;}

.outreach {  padding: 20px !important;}
.outreach-box{margin-top: 0px !important;}
.appointment{  padding: 20px !important;}

.hero-trust {  display: block !important; margin:0px !important}
.hero-trust div{margin: 10px 0px !important; width: 90%;padding: 15px !important;}

.hero .btn-ghost {
  
  background: #fff !important;
}


}

.glaucoma-doctors-heading {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto 50px;
  text-align: center;
}
/* =========================================================
   MEDICALLY REVIEWED — SUSRUT
========================================================= */

.medical-review {

    padding: 45px 0;

    background: #f7fafc;
}


.medical-review-inner {

    max-width: 1295px;

    min-height: 230px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 350px 1fr;

    border: 1px solid #d8e3ea;

    border-radius: 20px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(24, 66, 90, .055);
}


/* =========================================================
   LEFT PROFILE
========================================================= */

.review-profile {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            #eef7fb 0%,
            #f5fafc 100%
        );

    border-right:
        1px solid #dce7ed;
}


/* =========================================================
   DOCTOR PHOTO
========================================================= */

.review-photo {

    width: 105px;

    height: 105px;

    flex-shrink: 0;

    border-radius: 50%;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 10px 25px rgba(20, 80, 110, .13);
}


.review-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================================
   PROFILE INFORMATION
========================================================= */

.review-profile-info {

    min-width: 0;
}


.review-label {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: #006da6;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .09em;
}


.review-label i {

    color: #19a96b;

    font-size: 7px;
}


.review-profile-info h3 {

    margin: 0 0 7px;

    color: #183b5b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    line-height: 1.02;

    font-weight: 600;
}


.review-profile-info p {

    margin: 0;

    color: #60798c;

    font-size: 12px;

    line-height: 1.45;
}


/* =========================================================
   RIGHT DETAILS
========================================================= */

.review-details {

    padding: 30px 32px;
}


/* =========================================================
   VERIFIED
========================================================= */

.review-verified {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 23px;

    color: #087c4b;

    font-size: 12px;

    font-weight: 500;
}


.review-verified i {

    font-size: 14px;
}


/* =========================================================
   META
========================================================= */

.review-meta {

    display: grid;

    grid-template-columns:
        1.05fr 1.35fr 1fr 1fr;

    gap: 20px;

    margin-bottom: 22px;
}


.review-meta-item {

    min-width: 0;
}


.review-meta-item span {

    display: block;

    margin-bottom: 7px;

    color: #7d8c98;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .07em;
}


.review-meta-item strong {

    display: block;

    color: #29445b;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.45;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.review-disclaimer {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 13px 15px;

    border-left:
        3px solid #0876b6;

    border-radius: 6px;

    background: #f1f6fa;
}


.review-disclaimer i {

    flex-shrink: 0;

    margin-top: 2px;

    color: #0870ad;

    font-size: 12px;
}


.review-disclaimer p {

    margin: 0;

    color: #61778b;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   HOVER
========================================================= */

.review-photo {

    transition:
        transform .25s ease;
}


.medical-review-inner:hover .review-photo {

    transform:
        scale(1.03);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .medical-review-inner {

        grid-template-columns: 300px 1fr;
    }

    .review-profile {

        padding: 25px;

    }

    .review-photo {

        width: 85px;

        height: 85px;
    }

    .review-profile-info h3 {

        font-size: 22px;
    }

    .review-details {

        padding: 25px;
    }

    .review-meta {

        grid-template-columns: 1fr 1fr;

        row-gap: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .medical-review {

        padding: 35px 15px;
    }


    .medical-review-inner {

        display: block;

        border-radius: 15px;
    }


    .review-profile {

        justify-content: flex-start;

        padding: 22px;

        border-right: none;

        border-bottom:
            1px solid #dce7ed;
    }


    .review-photo {

        width: 80px;

        height: 80px;
    }


    .review-profile-info h3 {

        font-size: 22px;
    }


    .review-details {

        padding: 22px;
    }


    .review-verified {

        margin-bottom: 18px;
    }


    .review-meta {

        grid-template-columns: 1fr 1fr;

        gap: 15px;
    }


    .review-disclaimer {

        padding: 12px;
    }


    .review-disclaimer p {

        font-size: 12px;

        line-height: 1.6;
    }

}

.glaucoma-doctors-section {
  position: relative;
  padding: 60px 0;
  background: radial-gradient( circle at 8% 15%, rgba(0,78,145,.06), transparent 28% ), radial-gradient( circle at 92% 85%, rgba(0,119,201,.05), transparent 30% ), linear-gradient( 135deg, #ffffff 0%, #f8fafc 55%, #edf2f6 100% );
  overflow: hidden;
}

.doctor-section-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: #004e91;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.glaucoma-doctors-heading h2 {
  margin: 0 0 15px;
  color: #173557;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px,4vw,48px);
  font-weight: 600;
  line-height: 1.15;
}
.glaucoma-doctors-heading p {
  margin: 0;
  color: #68798b;
  font-size: 16px;
  line-height: 1.7;
}
/* =========================================
   DOCTORS SECTION
========================================= */

.doctors-section{

    position:relative;

    padding:90px 0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(0,78,145,.05),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f9fb 50%,
            #ededed 100%
        );

}
/* =========================================================
   FINAL CTA — REFRACTIVE SURGERY
========================================================= */

.final-cta {

    position: relative;

    padding: 95px 0 105px;

    background:
        linear-gradient(
            115deg,
            #064d80 0%,
            #0566a5 48%,
            #087cc2 100%
        );

    overflow: hidden;

    color: #ffffff;
}


/* =========================================================
   BACKGROUND CIRCLES
========================================================= */

.final-cta::before {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    left: -240px;

    top: -210px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 55px
        rgba(255,255,255,.025),
        0 0 0 110px
        rgba(255,255,255,.015);
}


.final-cta::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -170px;

    bottom: -210px;

    border-radius: 50%;

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


/* =========================================================
   GRID / INNER
========================================================= */

.final-cta-inner {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.final-cta-eyebrow {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

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

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .09em;
}


.final-cta-eyebrow::before,
.final-cta-eyebrow::after {

    content: "";

    width: 25px;

    height: 1px;

    background:
        rgba(255,255,255,.38);
}


/* =========================================================
   ICON
========================================================= */

.final-cta-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

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

    border-radius: 12px;

    background:
        rgba(255,255,255,.10);

    color: #ffffff;

    font-size: 17px;

    backdrop-filter: blur(5px);
}


/* =========================================================
   HEADING
========================================================= */

.final-cta-content h2 {

    max-width: 850px;

    margin: 0 auto 20px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5vw, 66px);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -.025em;
}


.final-cta-content h2 em {

    display: block;

    color: #bfe5ff;

    font-style: italic;

    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.final-cta-content > p {

    max-width: 720px;

    margin: 0 auto;

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

    font-size: 13px;

    line-height: 1.8;
}


.final-cta-content > p strong {

    color: #ffffff;

    font-weight: 700;
}


/* =========================================================
   SUBTEXT
========================================================= */

.final-cta-subtext {

    margin-top: 4px !important;

    color:
        rgba(255,255,255,.78) !important;
}


/* =========================================================
   BUTTONS
========================================================= */

.final-cta-buttons {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 30px;
}


.final-cta-btn {

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 17px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.final-cta-btn:hover {

    transform:
        translateY(-2px);
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.final-cta-btn-primary {

    background: #ffffff;

    color: #075e99;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.12);
}


.final-cta-btn-primary:hover {

    background: #f3faff;

    color: #075e99;

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.17);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.final-cta-btn-secondary {

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

    background:
        rgba(255,255,255,.08);

    color: #ffffff;
}


.final-cta-btn-secondary:hover {

    background:
        rgba(255,255,255,.15);

    color: #ffffff;
}


/* =========================================================
   BUTTON ARROW
========================================================= */

.final-cta-btn > i:last-child {

    margin-left: 5px;

    font-size: 10px;
}


/* =========================================================
   CALL LINK
========================================================= */

.final-cta-call {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 27px;

    padding-bottom: 4px;

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

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        border-color .2s ease,
        color .2s ease;
}


.final-cta-call:hover {

    color: #ffffff;

    border-color:
        rgba(255,255,255,.8);
}


.final-cta-call i:first-child {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.12);

    font-size: 10px;
}


.final-cta-call i:last-child {

    margin-left: 3px;

    font-size: 13px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .final-cta {

        padding:
            70px 20px 75px;
    }


    .final-cta-icon {

        width: 46px;

        height: 46px;

        margin-bottom: 17px;
    }


    .final-cta-content h2 {

        font-size: 42px;

        line-height: 1.08;
    }


    .final-cta-content > p {

        font-size: 12px;

        line-height: 1.75;
    }


    .final-cta-buttons {

        flex-direction: column;

        align-items: stretch;

        max-width: 320px;

        margin:
            25px auto 0;
    }


    .final-cta-btn {

        width: 100%;
    }


    .final-cta-call {

        margin-top: 22px;
    }

}

/* =========================================
   HEADING
========================================= */

.section-eyebrow{

    display:inline-block;

    margin-bottom:12px;

    color:#004e91;

    font-size:13px;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.section-heading h2{

    margin:0 0 12px;

    color:#263b57;

    font-size:42px;

    font-weight:700;

}

.section-heading p{

    max-width:650px;

    margin:0 auto;

    color:#6c7685;

    font-size:17px;

}


/* =========================================
   FILTER BAR
========================================= */

.doctor-filter{

    display:grid;

    grid-template-columns:
        1fr
        1fr
        1fr
        auto;

    gap:18px;

    align-items:end;

    padding:25px;

    margin-bottom:35px;

    background:#ffffff;

    border:1px solid rgba(0,78,145,.10);

    border-radius:18px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.06);

}

.filter-item label{

    display:block;

    margin-bottom:8px;

    color:#34415a;

    font-size:14px;

    font-weight:600;

}

.filter-item .form-select{

    height:52px;

    padding:0 16px;

    border:1px solid #dce2e8;

    border-radius:10px;

    color:#445268;

    background-color:#fff;

    box-shadow:none;

}

.filter-item .form-select:focus{

    border-color:#004e91;

    box-shadow:
        0 0 0 3px rgba(0,78,145,.08);

}

.filter-item .form-select:disabled{

    background:#f2f4f6;

    color:#9aa2ad;

}


/* Reset */

.doctor-reset{

    height:52px;

    padding:0 22px;

    border:1px solid #004e91;

    border-radius:10px;

    background:#fff;

    color:#004e91;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.doctor-reset:hover{

    background:#004e91;

    color:#fff;

}


/* =========================================
   DOCTOR CARD
========================================= */

.doctor-card{

    height:100%;

    padding:22px;

    background:#ffffff;

    border:1px solid rgba(0,78,145,.09);

    border-radius:18px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.06);

    transition:

        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.doctor-card:hover{

    transform:translateY(-7px);

    border-color:rgba(0,78,145,.18);

    box-shadow:
        0 22px 50px rgba(0,78,145,.12);

}


/* =========================================
   DOCTOR TOP
========================================= */

.doctor-main{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}


/* Doctor Image */

.doctor-image{

    width:105px;

    height:105px;

    flex:0 0 105px;

    overflow:hidden;

    border-radius:14px;

    background:#edf3f8;

}

.doctor-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.doctor-card:hover .doctor-image img{

    transform:scale(1.06);

}


/* Doctor Information */

.doctor-info{

    min-width:0;

}

.doctor-info h3 {
  margin: 0 0 8px;
  color: #263b57;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}
.doctor-reg{ margin:0 0 3px;font-size:13px;}
.doctor-speciality{

    margin:0 0 3px;

    color:#004e91;

    font-size:14px;

    font-weight:600;

    line-height:1.4;

}

.doctor-location{

    display:flex;

    align-items:center;

    gap:6px;
font-weight:600;
    margin:0;

    color:#737d8c;

    font-size:13px;

}

.doctor-location i{

    color:#004e91;

}
/* ==========================================
   DOCTOR INFINITE SCROLL
========================================== */

.doctor-loading {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 35px 20px;
    color: #004e91;
    font-size: 14px;
    font-weight: 600;
}

.doctor-loading.active {
    display: flex;
}


/* Spinner */

.doctor-spinner {
    width: 32px;
    height: 32px;

    border: 3px solid #dce8f3;
    border-top-color: #004e91;

    border-radius: 50%;

    animation: doctorSpin .8s linear infinite;
}


@keyframes doctorSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* Loading dots */

.doctor-loading span {
    position: relative;
}


/* End message */

.doctor-end-message {
    display: none;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 30px 20px;

    color: #64748b;

    font-size: 14px;
}

.doctor-end-message.show {
    display: flex;
}

.doctor-end-message i {
    color: #004e91;
}


/* Doctor appearing animation */

.doctor-item.doctor-show {
    animation: doctorFadeUp .5s ease both;
}


@keyframes doctorFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

}


/* Optional skeleton effect */

.doctor-loading::before {
    content: "";
    position: absolute;
}


/* Mobile */

@media (max-width: 767px) {

    .doctor-loading {
        padding: 25px 15px;
    }

    .doctor-spinner {
        width: 28px;
        height: 28px;
    }

}

/* =========================================
   ACTIONS
========================================= */

.doctor-actions{

    padding-top:18px;

    border-top:1px solid #edf0f3;

}
/* =====================================================
   DOCTOR FILTER SECTION
===================================================== */

.doctor-filter-section {
    position: relative;
    
}


/* =====================================================
   MAIN FILTER BOX
===================================================== */

.doctor-filter-box {

    position: relative;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid #e4eaf0;

    border-radius: 20px;

    padding: 28px 30px 22px;

    box-shadow:
        0 15px 45px rgba(15, 45, 75, 0.08),
        0 3px 12px rgba(15, 45, 75, 0.04);

}


/* =====================================================
   FILTER HEADER
===================================================== */

.doctor-filter-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 24px;

    border-bottom: 1px solid #edf0f3;

    margin-bottom: 24px;

}


.doctor-filter-title {

    display: flex;

    align-items: center;

    gap: 16px;

}


.filter-title-icon {

    width: 52px;

    height: 52px;

    flex: 0 0 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #004e91,
            #006dc5
        );

    color: #ffffff;

    font-size: 21px;

    box-shadow:
        0 8px 20px rgba(0, 78, 145, 0.20);

}


.filter-eyebrow {

    display: block;

    margin-bottom: 3px;

    font-family:
        'IBM Plex Mono',
        monospace;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color: #004e91;

}


.doctor-filter-title h3 {

    margin: 0 0 3px;

    font-size: 25px;

    font-weight: 700;

    color: #172b4d;

}


.doctor-filter-title p {

    margin: 0;

    color: #718096;

    font-size: 14px;

}


/* =====================================================
   FILTER FORM
===================================================== */

.doctor-filter-form {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr
        auto
        auto;

    gap: 18px;

    align-items: end;

}


/* =====================================================
   FIELD
===================================================== */

.doctor-filter-field {

    min-width: 0;

}


.doctor-filter-field label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 600;

    color: #334155;

}


.doctor-filter-field label i {

    color: #004e91;

    font-size: 13px;

}


/* =====================================================
   SELECT
===================================================== */

.doctor-select-wrap {

    position: relative;

}


.doctor-filter-select {

    width: 100%;

    height: 50px;

    padding:
        0 42px
        0 15px;

    border: 1px solid #dce3ea;

    border-radius: 10px;

    background: #ffffff;

    color: #253858;

    font-size: 14px;

    font-weight: 500;

    appearance: none;

    -webkit-appearance: none;

    outline: none;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.doctor-filter-select:hover {

    border-color: #aebdca;

}


.doctor-filter-select:focus {

    border-color: #006dc5;

    box-shadow:
        0 0 0 4px rgba(0, 109, 197, 0.10);

}


.doctor-filter-select:disabled {

    background: #f4f6f8;

    color: #9aa5b1;

    cursor: not-allowed;

}


/* Dropdown arrow */

.doctor-select-wrap > i {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    pointer-events: none;

    color: #64748b;

    font-size: 12px;

}


/* =====================================================
   SEARCH BUTTON
===================================================== */

.doctor-filter-action {

    display: flex;

    align-items: flex-end;

}


.doctor-search-btn {

    height: 50px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #004e91,
            #006dc5
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(0, 78, 145, 0.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.doctor-search-btn:hover {

    background:
        linear-gradient(
            135deg,
            #003c70,
            #005da9
        );

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0, 78, 145, 0.25);

}


.doctor-search-btn i {

    font-size: 14px;

}


/* =====================================================
   RESET BUTTON
===================================================== */

.doctor-reset-wrapper {

    display: flex;

    align-items: flex-end;

}


.doctor-reset-btn {

    height: 50px;

    padding: 0 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border: 1px solid #dce3ea;

    border-radius: 10px;

    background: #ffffff;

    color: #64748b;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition: all .2s ease;

}


.doctor-reset-btn:hover {

    border-color: #004e91;

    color: #004e91;

    background: #f5f9fd;

}


/* =====================================================
   FILTER RESULT
===================================================== */

.doctor-filter-result {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    padding-top: 16px;

    border-top: 1px solid #edf0f3;

    color: #64748b;

    font-size: 13px;

}


.doctor-filter-result::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #18a558;

    box-shadow:
        0 0 0 4px rgba(24, 165, 88, 0.10);

}


/* =====================================================
   RESPONSIVE - TABLET
===================================================== */

@media (max-width: 1199px) {

    .doctor-filter-form {

        grid-template-columns:
            1fr
            1fr;

    }


    .doctor-filter-action {

        grid-column: span 1;

    }


    .doctor-reset-wrapper {

        grid-column: span 1;

    }

}


/* =====================================================
   RESPONSIVE - MOBILE
===================================================== */

@media (max-width: 767px) {

    .doctor-filter-section {

        padding: 10px 0 25px;

    }


    .doctor-filter-box {

        padding: 22px 18px 18px;

        border-radius: 16px;

    }


    .doctor-filter-header {

        margin-bottom: 20px;

        padding-bottom: 20px;

    }


    .doctor-filter-title {

        align-items: flex-start;

        gap: 12px;

    }


    .filter-title-icon {

        width: 44px;

        height: 44px;

        flex-basis: 44px;

        border-radius: 11px;

        font-size: 17px;

    }


    .filter-eyebrow {

        font-size: 13px;

    }


    .doctor-filter-title h3 {

        font-size: 21px;

    }


    .doctor-filter-title p {

        font-size: 12px;

        line-height: 1.5;

    }


    .doctor-filter-form {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .doctor-filter-action,
    .doctor-reset-wrapper {

        grid-column: auto;

        width: 100%;

    }


    .doctor-search-btn,
    .doctor-reset-btn {

        width: 100%;

    }

}

/* Appointment */

.doctor-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    min-height:45px;

    padding:10px 14px;

    border-radius:9px;

    background:#004e91;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.doctor-btn:hover{

    background:#003b6e;

    color:#fff;

    transform:translateY(-2px);

}


/* Phone */

.doctor-call{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-top:11px;

    color:#004e91;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

}

.doctor-call:hover{

    color:#002f5e;

}

.doctor-call i{

    font-size:12px;

}


/* =========================================
   NO RESULT
========================================= */

.no-doctor-result{

    display:none;

    padding:50px 20px;

    text-align:center;

}

.no-doctor-result i{

    margin-bottom:15px;

    color:#004e91;

    font-size:45px;

}

.no-doctor-result h4{

    margin-bottom:7px;

    color:#34415a;

}

.no-doctor-result p{

    margin:0;

    color:#7c8490;

}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .doctor-filter{

        grid-template-columns:
            1fr
            1fr;

    }

    .filter-button{

        grid-column:span 2;

    }

    .doctor-reset{

        width:100%;

    }

}

@media(max-width:767px){

    .doctors-section{

        padding:65px 0;

    }

    .section-heading h2{

        font-size:34px;

    }

    .doctor-filter{

        grid-template-columns:1fr;

    }

    .filter-button{

        grid-column:auto;

    }

}

@media(max-width:480px){

    .doctor-main{

        align-items:flex-start;

    }

    .doctor-image{

        width:85px;

        height:85px;

        flex-basis:85px;

    }

    .doctor-info h3{

        font-size:18px;

    }

}
    /* ===========================================
BACK TO TOP
=========================================== */

#backToTop{
    position:fixed;
    right:30px;
    bottom:30px;

    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#004e91,#0067c0);

    color:#fff;

    text-decoration:none;

    box-shadow:
    0 10px 25px rgba(0,78,145,.30);

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    z-index:9999;
}

#backToTop:hover{

    transform:translateY(-5px) scale(1.08);

    box-shadow:
    0 18px 40px rgba(0,78,145,.40);

    color:#fff;
}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

#backToTop svg{

    transition:.3s;

}

#backToTop:hover svg{

    transform:translateY(-3px);

}

/* pulse ring */

#backToTop::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    border:2px solid rgba(0,78,145,.20);

    animation:pulseRing 2.5s infinite;

}

@keyframes pulseRing{

0%{

transform:scale(.9);

opacity:.8;

}

100%{

transform:scale(1.4);

opacity:0;

}

}




  /* ================= HERO ================= */
/* ===========================================
 HERO
===========================================*/
.hero .btn{
    display:inline-flex!important; align-items:center; gap:10px!important;
    padding:15px 26px!important; font-weight:600!important; font-size:15px!important; border-radius:2px!important;
    border:1.5px solid transparent!important; cursor:pointer!important; transition:all .2s ease!important;
  }
  .hero .btn-primary{ background:#004d90 !important ; color:var(--card)!important; }
  .hero .btn-primary:hover{ background:#000!important; transform:translateY(-1px)!important; }
  .hero .btn-ghost {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  background: transparent ;
}
  .hero .btn-ghost:hover{ background:var(--ink)!important; color:var(--parchment)!important; }
.hero{
    position: relative;
    overflow: hidden;
    padding: 60px 0px 120px 0;

    background:
        radial-gradient(circle at 15% 20%, rgba(0,78,145,.08) 0%, transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(0,150,255,.06) 0%, transparent 25%),
        radial-gradient(circle at 90% 90%, rgba(0,78,145,.05) 0%, transparent 35%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f8f9fb 25%,
            #ededed 55%,
            #f8f9fb 80%,
            #ffffff 100%);

    color: #222;
}

/* soft vignette */

.hero:before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(to bottom,

rgba(0,0,0,.18),

transparent 30%,

transparent 70%,

rgba(0,0,0,.18));

pointer-events:none;

}

/* big glow */

.hero:after{

content:"";

position:absolute;

width:900px;

height:900px;

border-radius:50%;

background:radial-gradient(circle,

rgba(255,255,255,.14),

transparent 70%);

right:-320px;

top:-280px;

filter:blur(20px);

animation:glowMove 14s infinite alternate;

}

.hero .wrap{

position:relative;

z-index:5;

display:grid;

grid-template-columns:1.05fr .95fr;

gap:60px;

align-items:center;

}

.hero h1 {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.04;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: italic;
  color: var(--vermillion);
}

/* ===========================================
 Grid
===========================================*/

.hero-grid{

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

background-size:70px 70px;

animation:gridMove 35s linear infinite;

opacity:.6;

}

/* ===========================================
 Floating Rings
===========================================*/

.hero-ring{

position:absolute;

border-radius:50%;

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

animation:ringRotate 20s linear infinite;

}

.ring1{

width:600px;

height:600px;

top:-260px;

right:-120px;

}

.ring2{

width:400px;

height:400px;

bottom:-180px;

left:-100px;

animation-duration:26s;

}

.ring3{

width:250px;

height:250px;

top:50%;

left:60%;

animation-duration:16s;

}

/* ===========================================
 Plus Symbols
===========================================*/

.hero-plus{

position:absolute;

width:24px;

height:24px;

opacity:.25;

}

.hero-plus:before,

.hero-plus:after{

content:"";

position:absolute;

background:#fff;

}

.hero-plus:before{

width:24px;

height:2px;

top:11px;

}

.hero-plus:after{

width:2px;

height:24px;

left:11px;

}

.plus1{

top:18%;

left:12%;

animation:floatY 5s infinite;

}

.plus2{

top:65%;

right:15%;

animation:floatY 7s infinite;

}

.plus3{

top:30%;

right:35%;

animation:floatY 6s infinite;

}

/* ===========================================
 Floating Particles
===========================================*/

.hero-particles{

position:absolute;

inset:0;

pointer-events:none;

}

.hero-particles span{

position:absolute;

width:8px;

height:8px;

border-radius:50%;

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

animation:particle 7s infinite;

}

.hero-particles span:nth-child(1){top:15%;left:8%;}
.hero-particles span:nth-child(2){top:25%;right:18%;}
.hero-particles span:nth-child(3){top:45%;left:30%;}
.hero-particles span:nth-child(4){top:70%;left:15%;}
.hero-particles span:nth-child(5){top:82%;right:28%;}
.hero-particles span:nth-child(6){top:60%;right:8%;}
.hero-particles span:nth-child(7){top:35%;left:80%;}
.hero-particles span:nth-child(8){top:12%;left:55%;}

/* ===========================================
 Eye Card
===========================================*/



  .eye-stage{
    position:relative; aspect-ratio:1/1; max-width:480px; margin:0 auto;
   background:
radial-gradient(circle at 50% 40%,
#ffffff 0%,
#f9f9f9 45%,
#f1f1f1 75%,
#e8e8e8 100%);
    border-radius:50%;
    border:1px solid var(--line);
  }
  .eye-stage svg{ width:100%; height:100%; }
  .eye-part{ cursor:pointer; }
  .eye-part path, .eye-part circle, .eye-part ellipse{ transition:opacity .2s ease, stroke-width .2s ease; }
  .eye-part:hover path, .eye-part:hover circle, .eye-part:hover ellipse, .eye-part.active path, .eye-part.active circle, .eye-part.active ellipse{
    stroke-width:2.6 !important;
    filter: drop-shadow(0 0 6px rgba(184,134,59,0.45)) !important;
  }
  .eye-tooltip{
    position:absolute; max-width:230px; background:var(--ink); color:var(--parchment);
    padding:14px 16px; border-radius:3px; font-size:13.5px; line-height:1.5;
    box-shadow:0 12px 28px rgba(0,0,0,0.22);
    opacity:0; pointer-events:none; transition:opacity .18s ease;
    z-index:20;
  }
  .eye-tooltip.show{ opacity:1; }
  .eye-tooltip b{ display:block; font-family:'IBM Plex Mono', monospace; color:var(--gold-bright); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:5px;}
  .eye-caption{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:16px; font-style:italic; }

/* ===========================================
 Counter
===========================================*/

.hero-trust{

display:flex;

gap:15px;

margin-top:50px;

}

.hero-trust div{

flex:1;

padding: 17px 10px;
line-height: 15px;
background: #fff;
  border: 1px solid #ccc;
border-radius:20px;

backdrop-filter:blur(15px);

transition:.35s;

animation:cardFloat 5s ease-in-out infinite;

}

.hero-trust div:nth-child(2){

animation-delay:.4s;

}

.hero-trust div:nth-child(3){

animation-delay:.8s;

}

.hero-trust div:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.16);

}

.hero-trust b{

display:block;

font-size:25px;

font-weight:700;

color:#004d90;
padding-bottom: 10px;

}

.hero-trust span{

color:#333;

font-size:13px;

}

/* ===========================================
 Bottom Wave
===========================================*/

.hero-wave{

position:absolute;

left:0;

right:0;

bottom:0;

height:130px;

background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150'%3E%3Cpath fill='%23ffffff' fill-opacity='0.10' d='M0,96L80,90.7C160,85,320,75,480,80C640,85,800,107,960,112C1120,117,1280,107,1360,101.3L1440,96L1440,160L0,160Z'/%3E%3C/svg%3E");

background-size:cover;

}

/* ===========================================
 Animations
===========================================*/

@keyframes particle{

0%,100%{

transform:translateY(0) scale(1);

opacity:.4;

}

50%{

transform:translateY(-18px) scale(1.6);

opacity:1;

}

}

@keyframes cardFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@keyframes floatY{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

@keyframes gridMove{

from{

background-position:0 0;

}

to{

background-position:70px 70px;

}

}

@keyframes glowMove{

0%{

transform:translate(0,0);

}

100%{

transform:translate(-80px,60px);

}

}

@keyframes ringRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

  /* ================= HERITAGE STRIP ================= */
  .heritage{
    background:var(--card);  border-bottom:1px solid var(--line);
    padding: 140px 0;
  margin-top: -120px;
  }
  .heritage .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; }
  .heritage-quote{
    font-family:'Fraunces', serif; font-size:clamp(22px,2.6vw,30px); line-height:1.35; font-weight:500;
  }
  .heritage-quote span{ color:var(--vermillion); font-style:italic; }
  .heritage-attr{ margin-top:20px; font-size:13.5px; color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; }
  .heritage-body p{ color:var(--ink-soft); font-size:16px; margin-bottom:16px; }
  .heritage-body strong{ color:var(--ink); }

  /* ================= STATS ================= */
 /* =========================================================
   PROFESSIONAL STATS SECTION
========================================================= */

.stats {
    padding: 35px 0 75px;

    background: #ffffff;
}


/* =========================================================
   STATS GRID
========================================================= */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border:
        1px solid #d9e3e9;

    background:
        #f4f7f9;

    overflow: hidden;
}


/* =========================================================
   STAT CELL
========================================================= */

.stat-cell {

    position: relative;

    min-height: 145px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 30px 25px;

    text-align: center;

    border-right:
        1px solid #d9e3e9;

    transition:
        background .25s ease;
}


/* Remove last divider */

.stat-cell:last-child {
    border-right: 0;
}


/* =========================================================
   HOVER
========================================================= */

.stat-cell:hover {

    background:
        #edf5f9;
}


/* =========================================================
   SMALL ACCENT
========================================================= */

.stat-accent {

    width: 28px;

    height: 2px;

    margin-bottom: 13px;

    background:
        #0875b5;
}


/* =========================================================
   NUMBER
========================================================= */

.stat-cell b {

    display: block;

    margin-bottom: 8px;

    color:
        #07558b;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 34px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: -.5px;
}


/* =========================================================
   LABEL
========================================================= */

.stat-cell span {

    display: block;

    color:
        #536879;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 500;
}


/* =========================================================
   OPTIONAL TOP BORDER
========================================================= */

.stats-grid::before {

    content: "";

    position: absolute;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .stats {

        padding:
            25px 0 60px;
    }


    .stats-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .stat-cell:nth-child(2) {

        border-right: 0;
    }


    .stat-cell:nth-child(-n+2) {

        border-bottom:
            1px solid #d9e3e9;
    }


    .stat-cell b {

        font-size: 30px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .stats {

        padding:
            20px 0 45px;
    }


    .stats-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .stat-cell {

        min-height: 125px;

        padding:
            22px 12px;
    }


    .stat-cell b {

        font-size: 24px;
    }


    .stat-cell span {

        font-size: 10px;
    }


    .stat-accent {

        width: 22px;

        margin-bottom: 11px;
    }

}
  /* ================= SPECIALTIES ================= */
/* =========================================================
   SPECIALTIES — PREMIUM FLAT DESIGN
========================================================= */

.specialties {
    padding: 0px 0px 85px 0;
    background: #ffffff;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.specialties .sec-head {
    max-width: 850px;
    margin-bottom: 42px;
}

.specialties .eyebrow {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: #0876b8;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.specialties .eyebrow::before {
    content: "";

    width: 22px;
    height: 1px;

    background: #0876b8;
}


.specialties .sec-head h2 {
    margin: 0 0 14px;

    color: #1d2d3a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 40px;
    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -.7px;
}


.specialties .sec-head p {
    max-width: 760px;

    margin: 0;

    color: #637583;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   SPECIALTY GRID
========================================================= */

.spec-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid #d9e3e9;

    border-left:
        1px solid #d9e3e9;

    background: #eef3f6;
}


/* =========================================================
   CARD
========================================================= */

.spec-card {

    position: relative;

    min-height: 285px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 30px 28px 26px;

    background: #f5f8fa;

    border-right:
        1px solid #d9e3e9;

    border-bottom:
        1px solid #d9e3e9;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.spec-card:hover {

    background: #ffffff;

    transform:
        translateY(-4px);

    box-shadow:
        0 14px 35px rgba(24, 69, 96, .08);

    z-index: 2;
}


/* =========================================================
   BLUE TOP ACCENT
========================================================= */

.spec-card::before {

    content: "";

    display: block;

    width: 26px;
    height: 2px;

    margin-bottom: 24px;

    background:
        linear-gradient(
            90deg,
            #075b91,
            #1595d0
        );

    transition:
        width .3s ease;
}


.spec-card:hover::before {
    width: 45px;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.spec-card > div {
    display: block;
}


/* =========================================================
   CARD EYEBROW
========================================================= */

.spec-card .spec-eyebrow {

    display: block;

    margin-bottom: 9px;

    color: #0876b8;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* =========================================================
   CARD TITLE
========================================================= */

.spec-card h3 {

    margin: 0 0 12px;

    color: #20394c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 600;

    letter-spacing: -.2px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.spec-card p {

    max-width: 330px;

    margin: 0;

    color: #637887;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   LEARN MORE
========================================================= */

.spec-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-top: 25px;

    padding-bottom: 4px;

    color: #075b91;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .01em;
}


.spec-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 22px;
    height: 1px;

    background: #0876b8;

    transition:
        width .3s ease;
}


.spec-card:hover .spec-link::after {
    width: 100%;
}


.spec-link:hover {
    color: #064d7d;
}


/* =========================================================
   SUBTLE CARD NUMBER EFFECT
========================================================= */

.spec-card:nth-child(1)::after,
.spec-card:nth-child(2)::after,
.spec-card:nth-child(3)::after,
.spec-card:nth-child(4)::after,
.spec-card:nth-child(5)::after,
.spec-card:nth-child(6)::after {

    position: absolute;

    right: 24px;
    top: 24px;

    color: rgba(8, 118, 184, .08);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 34px;

    font-weight: 700;

    pointer-events: none;
}

.spec-card:nth-child(1)::after {
    content: "01";
}

.spec-card:nth-child(2)::after {
    content: "02";
}

.spec-card:nth-child(3)::after {
    content: "03";
}

.spec-card:nth-child(4)::after {
    content: "04";
}

.spec-card:nth-child(5)::after {
    content: "05";
}

.spec-card:nth-child(6)::after {
    content: "06";
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .specialties {
        padding: 70px 0 80px;
    }

    .spec-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .spec-card {
        min-height: 260px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .specialties {
        padding: 55px 0 65px;
    }


    .specialties .sec-head {
        margin-bottom: 30px;
    }


    .specialties .sec-head h2 {
        font-size: 31px;
    }


    .specialties .sec-head p {
        font-size: 12px;
        line-height: 1.7;
    }


    .spec-grid {
        grid-template-columns: 1fr;
    }


    .spec-card {
        min-height: auto;

        padding:
            27px 22px 24px;
    }


    .spec-card h3 {
        font-size: 20px;
    }


    .spec-card p {
        max-width: none;

        font-size: 11px;
    }

}
  /* ================= RESEARCH (dark) ================= */
  /* =========================================================
   RESEARCH CENTRE — DARK SECTION
========================================================= */

.section-teal {
    position: relative;
    overflow: hidden;

    padding: 95px 0 100px;

    background:
        linear-gradient(
            120deg,
            #082f35 0%,
            #0a3d43 48%,
            #073b48 100%
        );

    color: #ffffff;
}


/* =========================================================
   SUBTLE DECORATIVE CIRCLE
========================================================= */

.section-teal::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    top: -250px;

    border: 1px solid rgba(122, 211, 220, .12);

    border-radius: 50%;

    pointer-events: none;
}


.section-teal::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -250px;
    bottom: -250px;

    border: 1px solid rgba(122, 211, 220, .10);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   WRAPPER
========================================================= */

.section-teal .wrap {
    position: relative;

    z-index: 2;

    

    margin: 0 auto;

    padding-left: 20px;
    padding-right: 20px;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.section-teal .sec-head {
    max-width: 820px;

    margin-bottom: 48px;
}


/* =========================================================
   EYEBROW
========================================================= */

.section-teal .eyebrow {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #65c9d4;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.section-teal .eyebrow::before {
    content: "";

    width: 23px;
    height: 1px;

    background: #65c9d4;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.section-teal .sec-head h2 {
    margin: 0 0 15px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 42px;

    line-height: 1.12;

    font-weight: 600;

    letter-spacing: -.7px;
}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.section-teal .sec-head > p {
    max-width: 760px;

    margin: 0;

    color: rgba(230, 243, 245, .72);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   RESEARCH GRID
========================================================= */

.research-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(320px, .85fr);

    border-top:
        1px solid rgba(153, 218, 225, .18);

    border-left:
        1px solid rgba(153, 218, 225, .18);
}


/* =========================================================
   RESEARCH LIST
========================================================= */

.research-list {

    margin: 0;

    padding: 0;

    list-style: none;

    background:
        rgba(255,255,255,.025);
}


/* =========================================================
   RESEARCH ITEM
========================================================= */

.research-list li {

    position: relative;

    display: grid;

    grid-template-columns: 48px 1fr;

    gap: 18px;

    min-height: 145px;

    padding: 28px 30px;

    border-right:
        1px solid rgba(153, 218, 225, .18);

    border-bottom:
        1px solid rgba(153, 218, 225, .18);

    transition:
        background .3s ease;
}


.research-list li:hover {

    background:
        rgba(255,255,255,.045);
}


/* =========================================================
   NUMBER
========================================================= */

.research-num {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 1px;

    border:
        1px solid rgba(101, 201, 212, .35);

    border-radius: 7px;

    background:
        rgba(101, 201, 212, .08);

    color: #72d2dc;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   RESEARCH TITLE
========================================================= */

.research-list h4 {

    margin: 0 0 8px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 600;
}


/* =========================================================
   RESEARCH DESCRIPTION
========================================================= */

.research-list p {

    max-width: 600px;

    margin: 0;

    color: rgba(220, 239, 242, .65);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   RIGHT SIDE CARD
========================================================= */

.research-side {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 38px 35px;

    border-right:
        1px solid rgba(153, 218, 225, .18);

    border-bottom:
        1px solid rgba(153, 218, 225, .18);

    background:
        linear-gradient(
            145deg,
            rgba(101, 201, 212, .10),
            rgba(255,255,255,.025)
        );
}


/* =========================================================
   SIDE LABEL
========================================================= */

.research-side .mono {

    display: block;

    margin-bottom: 13px;

    color: #65c9d4;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;
}


/* =========================================================
   SIDE HEADING
========================================================= */

.research-side h3 {

    margin: 0 0 13px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   SIDE DESCRIPTION
========================================================= */

.research-side p {

    margin: 0 0 25px;

    color: rgba(220, 239, 242, .68);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   RESEARCH BUTTON
========================================================= */

.research-side .btn-primary {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

   

    min-height: 42px!important;

    padding:
        0 18px!important;

    border:
        1px solid #ffffff!important;

    border-radius: 6px!important;

    background: #ffffff!important;

    color: #07556c!important;

    text-decoration: none!important;

    font-size: 13px!important;

    font-weight: 700!important;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.research-side .btn-primary:hover {

    background:
        #65c9d4;

    border-color:
        #65c9d4;

    color:
        #073b43;

    transform:
        translateY(-2px);
}


/* =========================================================
   SUBTLE GRID PATTERN
========================================================= */

.research-side::after {

    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -35px;
    bottom: -50px;

    opacity: .09;

    background-image:
        linear-gradient(
            rgba(101,201,212,.6) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,201,212,.6) 1px,
            transparent 1px
        );

    background-size: 18px 18px;

    transform:
        rotate(-5deg);

    pointer-events: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .section-teal {
        padding:
            75px 0 80px;
    }

    .section-teal .sec-head h2 {
        font-size: 36px;
    }

    .research-grid {
        grid-template-columns: 1fr;
    }

    .research-side {
        min-height: 300px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .section-teal {
        padding:
            60px 0 65px;
    }


    .section-teal .wrap {
        padding-left: 15px;
        padding-right: 15px;
    }


    .section-teal .sec-head {
        margin-bottom: 32px;
    }


    .section-teal .sec-head h2 {
        font-size: 31px;

        line-height: 1.2;
    }


    .section-teal .sec-head > p {
        font-size: 12px;

        line-height: 1.7;
    }


    .research-list li {

        grid-template-columns:
            38px 1fr;

        gap: 12px;

        min-height: auto;

        padding:
            23px 18px;
    }


    .research-num {

        width: 32px;
        height: 32px;

        font-size: 8px;
    }


    .research-list h4 {

        font-size: 16px;
    }


    .research-list p {

        font-size: 11px;
    }


    .research-side {

        padding:
            30px 22px;

        min-height: 280px;
    }


    .research-side h3 {

        font-size: 24px;
    }

}

  /* ================= DOCTORS ================= */
  .doctors{ padding:100px 0; }
  .doc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .doc-card{ text-align:left; }
  .doc-photo{
    aspect-ratio:4/5; border-radius:3px; background:linear-gradient(160deg, var(--parchment-deep), var(--card));
    border:1px solid var(--line); margin-bottom:16px;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:12px;
  }
  .doc-card h4{ font-size:17px; margin-bottom:3px; }
  .doc-card span{ font-size:13px; color:var(--vermillion); font-weight:600; display:block; margin-bottom:6px;}
  .doc-card p{ font-size:13.5px; color:var(--ink-soft); }

  /* ================= JOURNEY ================= */
  .journey{ background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:100px 0; }
  .journey-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
  .journey-steps::before{
    content:""; position:absolute; top:20px; left:5%; right:5%; height:1px; background:var(--line);
  }
  .j-step{ position:relative; padding-right:24px; }
  .j-num{
    width:40px; height:40px; border-radius:50%; background:var(--parchment); border:1.5px solid var(--vermillion);
    color:var(--vermillion); font-family:'IBM Plex Mono',monospace; font-size:14px;
    display:flex; align-items:center; justify-content:center; margin-bottom:20px; position:relative; z-index:2;
  }
  .j-step h4{ font-size:17px; margin-bottom:8px; }
  .j-step p{ font-size:14px; color:var(--ink-soft); }

  /* ================= TESTIMONIALS ================= */
  .stories{ padding:100px 0; }
  .story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .story-card{
    background:var(--card); border:1px solid var(--line); border-radius:3px; padding:32px;
    display:flex; flex-direction:column; justify-content:space-between; min-height:230px;
  }
  .story-card p.quote{ font-family:'Fraunces', serif; font-size:17px; line-height:1.5; margin-bottom:20px; }
  .story-meta{ display:flex; align-items:center; gap:12px; }
  .story-dot{ width:34px; height:34px; border-radius:50%; background:var(--gold); opacity:0.85; flex-shrink:0; }
  .story-meta b{ display:block; font-size:14px; }
  .story-meta span{ font-size:12.5px; color:var(--ink-soft); }

  /* ================= OUTREACH ================= */
 /* =========================================================
   COMMUNITY OUTREACH
========================================================= */

.outreach {
    position: relative;
    padding: 85px 0 90px;
    background: #f5f9fc;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.outreach::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    left: -260px;
    top: -220px;

    border: 1px solid rgba(8, 103, 164, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


.outreach::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -230px;
    bottom: -220px;

    border: 1px solid rgba(8, 103, 164, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   WRAPPER
========================================================= */

.outreach .wrap {
    position: relative;

    z-index: 2;

   

    margin: 0 auto;

    padding-left: 20px;
    padding-right: 20px;
}


/* =========================================================
   MAIN OUTREACH BOX
========================================================= */

.outreach-box {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, .65fr);

    gap: 70px;

    padding: 58px 48px;

    overflow: hidden;

    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            #19222e 0%,
            #1d2735 55%,
            #172331 100%
        );

    box-shadow:
        0 20px 50px
        rgba(20, 45, 65, .12);
}


/* =========================================================
   SUBTLE GRID PATTERN
========================================================= */

.outreach-box::before {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -45px;
    top: -55px;

    background-image:
        linear-gradient(
            rgba(40, 145, 205, .12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(40, 145, 205, .12) 1px,
            transparent 1px
        );

    background-size: 18px 18px;

    transform: rotate(4deg);

    opacity: .7;

    pointer-events: none;
}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.outreach-box::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -175px;
    bottom: -185px;

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

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.outreach-box > div:first-child {

    position: relative;

    z-index: 2;
}


/* =========================================================
   EYEBROW
========================================================= */

.outreach .eyebrow {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #5bbbd1 !important;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.outreach .eyebrow::before {

    content: "";

    width: 24px;

    height: 1px;

    background: #5bbbd1;
}


/* =========================================================
   HEADING
========================================================= */

.outreach-box h2 {

    max-width: 600px;

    margin: 0 0 16px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;

    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -.5px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.outreach-box p {

    max-width: 620px;

    margin: 0 0 27px;

    color: rgba(235, 244, 248, .72);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   BUTTON
========================================================= */

.outreach-box .btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px!important;

    padding:
        0 20px!important;

    border:
        1px solid #0876b8 !important;

    border-radius: 4px!important;

    background: #0876b8!important;

    color: #ffffff!important;

    text-decoration: none;

    font-size: 13px!important;

    font-weight: 700!important;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.outreach-box .btn-primary:hover {

    background: #0b8acb;

    border-color: #0b8acb;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(8, 118, 184, .25);
}


/* =========================================================
   STATISTICS
========================================================= */

.outreach-stats {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 25px;

    padding-left: 35px;

    border-left:
        1px solid rgba(255,255,255,.12);
}


/* =========================================================
   INDIVIDUAL STAT
========================================================= */

.outreach-stats > div {

    position: relative;

    padding-left: 18px;
}


/* Small vertical accent */

.outreach-stats > div::before {

    content: "";

    position: absolute;

    left: 0;
    top: 7px;

    width: 2px;
    height: 25px;

    background:
        #0876b8;

    border-radius: 2px;
}


/* =========================================================
   NUMBER
========================================================= */

.outreach-stats b {

    display: block;

    margin-bottom: 4px;

    color: #118fd0;

    font-family:
        "IBM Plex Mono",
        "Courier New",
        monospace;

    font-size: 25px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -.5px;
}


/* =========================================================
   LABEL
========================================================= */

.outreach-stats span {

    display: block;

    color: rgba(231, 241, 245, .65);

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   HOVER EFFECT ON STATS
========================================================= */

.outreach-stats > div {

    transition:
        transform .25s ease;
}


.outreach-stats > div:hover {

    transform:
        translateX(5px);
}


.outreach-stats > div:hover b {

    color: #25a4dd;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .outreach {

        padding:
            70px 0 75px;
    }


    .outreach-box {

        grid-template-columns:
            1fr;

        gap: 40px;

        padding:
            45px 38px;
    }


    .outreach-stats {

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 20px;

        padding-left: 0;

        padding-top: 28px;

        border-left: 0;

        border-top:
            1px solid rgba(255,255,255,.12);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .outreach {

        padding:
            55px 0 60px;
    }


    .outreach .wrap {

        padding-left: 15px;
        padding-right: 15px;
    }


    .outreach-box {

        padding:
            35px 24px;

        gap: 32px;

        border-radius: 3px;
    }


    .outreach-box h2 {

        font-size: 30px;

        line-height: 1.2;
    }


    .outreach-box p {

        font-size: 11px;

        line-height: 1.75;
    }


    .outreach-box .btn-primary {

        width: 100%;
    }


    .outreach-stats {

        grid-template-columns: 1fr;

        gap: 20px;

        padding-top: 25px;
    }


    .outreach-stats > div {

        padding-left: 15px;
    }


    .outreach-stats b {

        font-size: 22px;
    }


    .outreach-box::before {

        width: 170px;
        height: 170px;

        right: -50px;
        top: -30px;
    }

}
  /* ================= APPOINTMENT CTA ================= */
 /* =========================================================
   APPOINTMENT CTA
========================================================= */

.appointment {
    position: relative;
    padding: 20px 0;
    
    overflow: hidden;
}


/* =========================================================
   WRAPPER
========================================================= */

.appointment .wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}


/* =========================================================
   MAIN CTA BOX
========================================================= */

.appointment .page-cta {

    position: relative;

    display: flex;
    align-items: center;

    min-height: 128px;

    padding: 20px 24px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            105deg,
            #075b91 0%,
            #0876b8 48%,
            #118fd0 100%
        );

    box-shadow:
        0 14px 30px
        rgba(7, 91, 145, .18);
}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */






/* =========================================================
   LEFT ICON
========================================================= */

.appointment .page-cta {

    padding-left: 90px;
}


/*
If you don't have an icon in the HTML, this creates
a simple eye icon using CSS.
*/




/* =========================================================
   CONTENT
========================================================= */

.appointment .page-cta > div:first-child {

    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;
}


/* =========================================================
   HEADING
========================================================= */

.appointment .page-cta h3 {

    margin: 0 0 4px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 600;

    letter-spacing: -.2px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.appointment .page-cta p {

    max-width: 700px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   BUTTON
========================================================= */

.appointment .page-cta .btn {

    position: relative;

    z-index: 5;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center!important;

    min-height: 40px!important;

    margin-left: 30px!important;

    padding:
        0 18px!important;

    border:
        1px solid rgba(255,255,255,.9)!important;

    border-radius: 7px!important;

    background: #ffffff!important;

    color: #075b91!important;

    text-decoration: none!important;

    font-size: 15px;

    font-weight: 700 !important;

    white-space: nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


/* Arrow */

.appointment .page-cta .btn::after {

    content: "→";

    margin-left: 8px;

    font-size: 14px;

    transition:
        transform .25s ease;
}


/* Hover */

.appointment .page-cta .btn:hover {

    background: #eef8fc;

    color: #064d7d;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.12);
}


.appointment .page-cta .btn:hover::after {

    transform:
        translateX(3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .appointment .page-cta {

        min-height: 120px;

        padding-left: 82px;

        padding-right: 20px;
    }


    .appointment .page-cta .btn {

        margin-left: 20px;
    }


    .appointment .page-cta h3 {

        font-size: 19px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .appointment {

        padding: 15px 0;
    }


    .appointment .wrap {

        padding:
            0 15px;
    }


    .appointment .page-cta {

        display: block;

        min-height: auto;

        padding:
            25px 20px 22px;

        border-radius: 12px;
    }


    /* Icon */

    .appointment .page-cta > div:first-child::before {

        position: static;

        transform: none;

        margin-bottom: 15px;

        width: 42px;
        height: 42px;
    }


    /* Remove desktop left spacing */

    .appointment .page-cta {

        padding-left: 20px;
    }


    .appointment .page-cta h3 {

        font-size: 20px;

        line-height: 1.25;
    }


    .appointment .page-cta p {

        font-size: 11px;

        line-height: 1.7;

        margin-bottom: 18px;
    }


    .appointment .page-cta .btn {

        width: 100%;

        margin-left: 0;

        min-height: 43px;
    }


    .appointment .page-cta::before {

        right: -50px;

        top: -90px;
    }


    .appointment .page-cta::after {

        right: -75px;

        top: -70px;
    }

}

  /* ================= FOOTER ================= */

/* =========================================================
   SUSRUT PROFESSIONAL FOOTER
========================================================= */

.susrut-footer {

    position: relative;

    background:
        #102f31;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND
========================================================= */

.susrut-footer::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: -280px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 70px
        rgba(255,255,255,.015);

    pointer-events: none;
}


.susrut-footer::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -180px;
    bottom: -220px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.susrut-footer-main {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.45fr
        1fr
        .85fr
        .85fr;

    gap: 60px;

    padding:
        40px 0;
}


/* =========================================================
   BRAND
========================================================= */

.susrut-footer-logos{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:14px;
}

.susrut-footer-logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.susrut-footer-logo img{
    display:block;
    width:125px;
    height:auto;
    object-fit:contain;
}

.susrut-footer-nabh{
    display:block;
    width:100px;
    height:auto;
    max-height:110px;
    object-fit:contain;
}

/* Mobile */
@media(max-width:600px){
    .susrut-footer-logos{
        justify-content:flex-start;
        gap:15px;
    }

    .susrut-footer-logo img{
        width:110px;
    }

    .susrut-footer-nabh{
        width:70px;
        max-height:70px;
    }
}


/* =========================================================
   SOCIAL
========================================================= */

.susrut-footer-social {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;
}


.susrut-footer-social a {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

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

    text-decoration: none;

    font-size: 11px;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.susrut-footer-social a:hover {

    background:
        #ffffff;

    border-color:
        #ffffff;

    color:
        #0f4d70;

    transform:
        translateY(-2px);
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.susrut-footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.susrut-footer-label {

    display: block;

    margin-bottom: 19px;

    color:
        #54a9d3;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.susrut-footer-column h4 {

    margin:
        -3px 0 15px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: 500;
}


/* =========================================================
   ADDRESS
========================================================= */

.susrut-footer-contact {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-bottom: 13px;
}


.susrut-footer-contact-icon {

    width: 27px;
    height: 27px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background:
        rgba(255,255,255,.07);

    color:
        #63afd4;

    font-size: 10px;
}


.susrut-footer-contact p {

    margin: 0;

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

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   CONTACT LINKS
========================================================= */

.susrut-footer-link {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 8px;

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

    text-decoration: none;

    font-size: 11px;

    transition:
        color .2s ease;
}


.susrut-footer-link i {

    width: 15px;

    color:
        #63afd4;

    font-size: 13px;

    text-align: center;
}


.susrut-footer-link:hover {

    color:
        #ffffff;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.susrut-footer-column > a {

    position: relative;

    display: inline-block;

    margin-bottom: 11px;

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

    text-decoration: none;

    font-size: 13px;

    line-height: 1.5;

    transition:
        color .2s ease,
        transform .2s ease;
}


.susrut-footer-column > a:hover {

    color:
        #ffffff;

    transform:
        translateX(3px);
}


/* =========================================================
   APPOINTMENT STRIP
========================================================= */

.susrut-footer-appointment {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding: 19px 22px;

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

    border-radius: 10px;

    background:
        rgba(255,255,255,.045);
}


.susrut-footer-appointment-content {

    display: flex;

    align-items: center;

    gap: 13px;
}


.susrut-footer-appointment-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        rgba(76,159,199,.15);

    color:
        #65b5dc;

    font-size: 14px;
}


.susrut-footer-appointment-content strong {

    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;
}


.susrut-footer-appointment-content span {

    display: block;

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

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   APPOINTMENT BUTTON
========================================================= */

.susrut-footer-appointment-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 11px 16px;

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

    border-radius: 7px;

    background:
        #ffffff;

    color:
        #0f4d70;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.susrut-footer-appointment-btn:hover {

    color:
        #0f4d70;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.15);
}


.susrut-footer-appointment-btn i {

    font-size: 13px;

    transition:
        transform .25s ease;
}


.susrut-footer-appointment-btn:hover i {

    transform:
        translateX(3px);
}


/* =========================================================
   BOTTOM
========================================================= */

.susrut-footer-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 35px;

    padding:
        20px 0 25px;

    border-top:
        1px solid
        rgba(255,255,255,.09);

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

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   LEGAL
========================================================= */

.susrut-footer-legal {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;
}


.susrut-footer-legal a {

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

    text-decoration: none;

    transition:
        color .2s ease;
}


.susrut-footer-legal a:hover {

    color:
        #ffffff;
}


.susrut-footer-legal span {

    color:
        rgba(255,255,255,.25);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .susrut-footer-main {

        grid-template-columns:
            1.2fr 1fr 1fr;

        gap: 40px;
    }


    .susrut-footer-brand {

        grid-column:
            1 / -1;

        max-width: 500px;
    }


    .susrut-footer-appointment {

        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    
    
    
    
    
    
    
    

    .susrut-footer-main {

        grid-template-columns: 1fr;

        gap: 32px;

        padding:
            50px 0 35px;
    }


    .susrut-footer-brand {

        grid-column: auto;

        max-width: 100%;
    }


    .susrut-footer-logo img {

        height: 82px;
    }


    .susrut-footer-description {

        max-width: 320px;

        font-size: 13px;
    }


    .susrut-footer-column {

        padding-top: 5px;

        border-top:
            1px solid
            rgba(255,255,255,.07);
    }


    .susrut-footer-column:first-of-type {

        border-top: 0;
    }


    .susrut-footer-label {

        margin-top: 18px;
    }


    .susrut-footer-appointment {

        padding: 18px;

        gap: 17px;
    }


    .susrut-footer-appointment-content {

        align-items: flex-start;
    }


    .susrut-footer-appointment-btn {

        width: 100%;

        justify-content: center;
    }


    .susrut-footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        margin-top: 25px;

        gap: 12px;
    }


    .susrut-footer-legal {

        justify-content: flex-start;

        font-size: 13px;
    }

}
    /* ===========================================
BACK TO TOP
=========================================== */

#backToTop{
    position:fixed;
    right:30px;
    bottom:30px;

    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#004e91,#0067c0);

    color:#fff;

    text-decoration:none;

    box-shadow:
    0 10px 25px rgba(0,78,145,.30);

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    z-index:9999;
}

#backToTop:hover{

    transform:translateY(-5px) scale(1.08);

    box-shadow:
    0 18px 40px rgba(0,78,145,.40);

    color:#fff;
}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

#backToTop svg{

    transition:.3s;

}

#backToTop:hover svg{

    transform:translateY(-3px);

}

/* pulse ring */

#backToTop::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    border:2px solid rgba(0,78,145,.20);

    animation:pulseRing 2.5s infinite;

}

@keyframes pulseRing{

0%{

transform:scale(.9);

opacity:.8;

}

100%{

transform:scale(1.4);

opacity:0;

}

}


  /* ================= RESPONSIVE ================= */
  @media (max-width:920px){
    .nav-links{ display:none; }
    .burger{ display:block; }
    .hero .wrap{ grid-template-columns:1fr; }
    .eye-stage{ margin-top:20px; max-width:340px; }
    .heritage .wrap{ grid-template-columns:1fr; }
    .stats-grid{ grid-template-columns:repeat(2,1fr); }
    .spec-grid{ grid-template-columns:repeat(1,1fr); }
    .research-grid{ grid-template-columns:1fr; }
    .doc-grid{ grid-template-columns:repeat(2,1fr); }
    .journey-steps{ grid-template-columns:repeat(2,1fr); gap:30px; }
    .journey-steps::before{ display:none; }
    .story-grid{ grid-template-columns:1fr; }
    .outreach-box{ grid-template-columns:1fr; padding:36px; }
    .appt-wrap{ grid-template-columns:1fr; }
    .appt-form .row{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }
/* ================= SHARED SUB-PAGE STYLES ================= */
.page-hero{
    position:relative;
    overflow:hidden;

    padding:56px 0 60px;

    border-bottom:1px solid var(--line);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0,78,145,.08) 0%,
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 15%,
            rgba(0,150,255,.06) 0%,
            transparent 25%
        ),

        radial-gradient(
            circle at 90% 90%,
            rgba(0,78,145,.05) 0%,
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f9fb 25%,
            #ededed 55%,
            #f8f9fb 80%,
            #ffffff 100%
        );
}


/* =========================================
   DECORATIVE GRAPHIC - RIGHT
========================================= */

.page-hero::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    top:-190px;

    border-radius:50%;

    border:1px solid rgba(0,78,145,.10);

    box-shadow:
        0 0 0 35px rgba(0,78,145,.025),
        0 0 0 70px rgba(0,78,145,.018),
        0 0 0 105px rgba(0,78,145,.012);

    pointer-events:none;

}


/* =========================================
   DECORATIVE GRAPHIC - LEFT
========================================= */

.page-hero::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    left:-150px;
    bottom:-170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,78,145,.09) 0%,
            rgba(0,78,145,.035) 40%,
            transparent 70%
        );

    border:1px solid rgba(0,78,145,.07);

    pointer-events:none;

}
.page-hero .eyebrow{ margin-bottom:14px; }
.page-hero h1{ font-size:clamp(32px,4.4vw,50px); max-width:760px; margin-bottom:16px; }
.page-hero p{ font-size:17px; color:var(--ink-soft); max-width:600px; }
.breadcrumb{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-soft); margin-bottom:20px; }
.breadcrumb a{ color:var(--vermillion); }

.prose{ max-width:720px; }
.prose p{ font-size:16.5px; color:var(--ink-soft); margin-bottom:20px; }
.prose h2{ font-size:26px; margin:40px 0 16px; }
.prose h3{ font-size:20px; margin:28px 0 12px; }
.prose strong{ color:var(--ink); }

.timeline{ list-style:none; margin-top:20px; }
.timeline li{
  display:grid; grid-template-columns:110px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--line);
}
.timeline li:last-child{ border-bottom:1px solid var(--line); }
.timeline .t-year{ font-family:'IBM Plex Mono', monospace; color:var(--vermillion); font-size:15px; padding-top:2px; }
.timeline h4{ font-size:17px; margin-bottom:6px; }
.timeline p{ font-size:14.5px; color:var(--ink-soft); margin:0; }

.page-cta{
  background:var(--ink); color:var(--parchment); border-radius:4px; padding:56px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  margin:80px 0;
}
.page-cta h3{ color:var(--parchment); font-size:26px; margin-bottom:8px; }
.page-cta p{ color:rgba(243,236,220,0.72); font-size:15px; }

.filter-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px; }
.filter-chip{
  padding:9px 18px; border:1px solid var(--line); border-radius:20px; font-size:13.5px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; background:var(--card); transition:all .2s ease;
}
.filter-chip.active, .filter-chip:hover{ background:var(--ink); color:var(--parchment); border-color:var(--ink); }

.doc-detail{
  display:grid; grid-template-columns:220px 1fr; gap:34px; padding:40px 0; border-top:1px solid var(--line);
}
.doc-detail:last-child{ border-bottom:1px solid var(--line); }
.doc-detail .doc-photo{ margin-bottom:0; }
.doc-detail-body h3{ font-size:22px; margin-bottom:4px; }
.doc-detail-body .doc-role{ font-size:13.5px; color:var(--vermillion); font-weight:600; display:block; margin-bottom:14px; }
.doc-detail-body p{ font-size:15px; color:var(--ink-soft); margin-bottom:10px; }
.doc-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.doc-tag{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:5px 10px; border:1px solid var(--line); border-radius:2px; color:var(--ink-soft); }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-info-list{ list-style:none; margin-top:24px; }
.contact-info-list li{ display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.contact-info-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-info-list b{ display:block; font-size:15px; margin-bottom:3px; }
.contact-info-list span{ font-size:14px; color:var(--ink-soft); }
.map-block{
  aspect-ratio:16/10; background:linear-gradient(160deg, var(--parchment-deep), var(--card));
  border:1px solid var(--line); border-radius:3px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:13px; margin-top:28px;
}

@media (max-width:920px){
  .doc-detail{ grid-template-columns:1fr; }
  .doc-detail .doc-photo{ max-width:180px; }
  .contact-grid{ grid-template-columns:1fr; }
  .page-cta{ flex-direction:column; align-items:flex-start; }
}

/* mobile nav open state */
@media (max-width:920px){
  .nav-links.mobile-open{
    display:flex !important; position:absolute; top:64px; left:0; right:0; flex-direction:column;
    background:var(--parchment); padding:20px 32px; border-bottom:1px solid var(--line); gap:16px;
  }
}

.susrut-cms-content,
.susrut-cms-sections {
  max-width: 100%;
}
.susrut-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.susrut-person-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}
.susrut-person-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 12px;
}
.susrut-directory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.susrut-directory-filters a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold);
  text-decoration: none;
  font-size: 13px;
}