/********** Template CSS **********/
:root {
            /* Brand color sampled directly from the site (logo / buttons / nav) -
               hard-coded so it always works, regardless of whether the theme's
               own Bootstrap build exposes --bs-primary / --bs-primary-rgb */
            --brand: #20bbec;
            --brand-rgb: 32, 187, 236;
            --brand-dark: #051225;
            --brand-dark-rgb: 5, 18, 37;

           --primary:#20BBEC;
    --primary-dark:#0898C5;
    --primary-light:#EAFBFF;

    --secondary:#0B2545;
    --secondary-light:#1B3B67;

    --dark:#14213D;
    --text:#5B6777;

    --white:#ffffff;
    --light:#F8FBFD;
    --border:#E8EEF3;

        --success:#21C16B;
    --warning:#F6B100;

    --gradient:linear-gradient(135deg,#20BBEC,#0A8ECF);

    --shadow:0 15px 45px rgba(11,37,69,.10);
    --shadow-lg:0 20px 60px rgba(11,37,69,.16);

    --radius:18px;
    --radius-sm:12px;

    --pdc-radius: 16px;
            --pdc-shadow: 0 15px 45px rgba(15, 30, 60, 0.08);
            --pdc-shadow-hover: 0 20px 55px rgba(15, 30, 60, 0.14);
        }

 
        body{
    background:
        radial-gradient(circle at 15% 10%,
            rgba(32,187,236,.10) 0%,
            transparent 40%),

        radial-gradient(circle at 85% 90%,
            rgba(11,37,69,.06) 0%,
            transparent 45%),

        linear-gradient(180deg,
            #EAF9FE 0%,
            #F6FBFF 50%,
            #FFFFFF 100%);
    background-attachment:fixed;
}

h1,
h2,
.font-weight-bold {
    font-weight: 700 !important;
}

h3,
h4,
.font-weight-semi-bold {
    font-weight: 600 !important;
}

h5,
h6,
.font-weight-medium {
    font-weight: 500 !important;
}

.btn {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-primary,
.btn-secondary {
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

.top-shape::before {
    position: absolute;
    content: "";
    width: 35px;
    height: 100%;
    top: 0;
    left: -17px;
    background: #20baec!important;
    transform: skew(40deg);
}

/*==========================
        TOPBAR
===========================*/

.topbar{

    background:var(--secondary);
    color:#fff;

    font-size:14px;

}

.topbar-wrapper{

    min-height:50px;

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

}

.topbar-left,
.topbar-right{

    display:flex;
    gap:30px;
    align-items:center;
    flex-wrap:wrap;

}

topbar-left span{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:14px;
    white-space:nowrap;
}

.topbar-left span i{
    color:#20BAEC;
    font-size:15px;
}

.working-hours strong{
    font-weight:600;
}

.topbar span,
.topbar a{

    color:#fff;
    text-decoration:none;

    display:flex;
    align-items:center;
    gap:8px;

    transition:.35s;

}

.topbar a:hover{

    color:var(--primary);

}

.topbar i{

    color:var(--primary);

}


/*==========================
        NAVBAR
===========================*/

.pdc-navbar{

    background:#fff;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

    transition:.35s;

}

.pdc-navbar .container{

    min-height:78px;

}

.navbar-brand img{

    height:78px;

    transition:.35s;

}

.sticky-top.pdc-navbar{

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.navbar-nav{

    gap:8px;

}

.nav-link{

    position:relative;

    padding:14px 18px !important;

    color:var(--dark)!important;

    font-weight:600;

    font-size:17px;

    border-radius:12px;

    transition:.35s;

}

.nav-link:hover{

    color:var(--primary)!important;

    background:var(--primary-light);

}

.nav-link.active{

    color:var(--primary)!important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:18px;
    right:18px;
    bottom:8px;

    height:3px;

    background:var(--primary);

    border-radius:10px;

    transform:scaleX(0);

    transition:.35s;

}

.nav-link:hover::after,
.nav-link.active::after{

    transform:scaleX(1);

}


/*==========================
      Appointment Button
===========================*/

.appointment-btn{

    background:var(--gradient);

    color:#fff;

    border:none;

    border-radius:50px;

    padding:13px 28px;

    font-weight:600;

    box-shadow:0 15px 30px rgba(32,187,236,.25);

    transition:.35s;

}

.appointment-btn:hover{

    transform:translateY(-3px);

    color:#fff;

    box-shadow:0 22px 45px rgba(32,187,236,.35);

}


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

.navbar-toggler{

    border:none;

    width:46px;
    height:46px;

    border-radius:12px;

    background:var(--primary-light);

    color:var(--primary);

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler i{

    font-size:20px;

}


/*==========================
   Mobile Collapse
===========================*/

@media(max-width:991px){

.pdc-navbar .container{

min-height:80px;

}

.navbar-brand img{

height:62px;

}

.navbar-collapse{

margin-top:20px;

padding:20px;

background:#fff;

border-radius:20px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.navbar-nav{

gap:0;

}

.nav-link{

padding:15px!important;

margin-bottom:6px;

}

.appointment-btn{

display:block;

margin-top:15px;

width:100%;

text-align:center;

}

.topbar{

font-size:13px;

}

.topbar-wrapper{

padding:8px 0;

justify-content:center;

gap:8px;

}

.topbar-left,
.topbar-right{

width:100%;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

}

@media(max-width:576px){

.topbar{

display:none;

}

.navbar-brand img{

height:54px;

}

.pdc-navbar .container{

min-height:72px;

}

@media (max-width:991px){

.nav-link::after{
    display:none;
}

.nav-link.active{

    background:var(--primary-light);

    color:var(--primary)!important;

    border-left:4px solid var(--primary);

    border-radius:12px;

}

.nav-link:hover{

    background:var(--primary-light);

}

}

}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(9, 30, 62, .85);
    z-index: 1;
}

@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

.section-title h5::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 3px;
    right: -55px;
    bottom: 11px;
    background: var(--primary);
}

.section-title h5::after {
    position: absolute;
    content: "";
    width: 15px;
    height: 3px;
    right: -75px;
    bottom: 11px;
    background: var(--secondary);
}

.hero-header {
    background: linear-gradient(rgba(9, 30, 62, .85), rgba(9, 30, 62, .85)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.service-item img,
.service-item .bg-light,
.service-item .bg-light h5,
.team-item .team-text {
    transition: .5s;
}

.service-item:hover img {
    transform: scale(1.15);
}

.team-item .team-text::after,
.service-item .bg-light::after {
    position: absolute;
    content: "";
    top: 50%;
    bottom: 0;
    left: 15px;
    right: 15px;
    border-radius:100px / 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .7);
    opacity: 0;
    transition: .5s;
    z-index: -1;
}

.team-item:hover .team-text::after,
.service-item:hover .bg-light::after {
    opacity: 1;
}



/* added by dhaval */
.hero-section {
    position: relative;
    background: linear-gradient(180deg, #EAF8FB 0%, #F7FBFD 60%, #FFFFFF 100%);
    padding: 70px 0 50px;
    overflow: hidden;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.shape-1 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(14,165,196,0.18) 0%, rgba(14,165,196,0) 70%);
    top: -180px;
    right: -120px;
}

.shape-2 {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(11,37,69,0.10) 0%, rgba(11,37,69,0) 70%);
    bottom: -140px;
    left: -100px;
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

/* ==========================================
   HERO SLIDER
========================================== */

/* .hero-slider {
    position: relative;
    min-height: 620px;
    overflow: hidden;
} */

.hero-slider {
    display: grid;
    grid-template-areas: "slide";
    /* Remove the fixed min-height that was causing the gap */
}
/* 
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    opacity: 0;
    visibility: hidden;

    transform: translateY(25px);

    transition:
        opacity 1.4s ease-in-out,
        transform 1.4s ease-in-out,
        visibility 1.4s ease-in-out;

    z-index: 1;
} */

.hero-slide {
    grid-area: slide;
    width: 100%;

    opacity: 0;
    visibility: hidden;
    transform: translateY(25px);

    transition:
        opacity 1.4s ease-in-out,
        transform 1.4s ease-in-out,
        visibility 1.4s ease-in-out;

    /* Key: inactive slides are absolute so they don't push height */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


/* .hero-slide.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    z-index: 2;
}
*/

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 2;
    position: relative; /* ← this is the critical fix */
}

/* .hero-row {
    min-height: 620px;
    align-items: center;
} */

.hero-row {
    min-height: unset;
    padding: 60px 0 40px;
    align-items: center;
}



/* Tablet */
@media (max-width: 991px) {
    .hero-section {
        padding: 40px 0 30px;
    }

    .hero-row {
        padding: 30px 0 20px;
        flex-direction: column;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-visual {
        margin-top: 40px;
        max-width: 340px;
    }

    /* Shrink orbit badges on tablet */
    .orbit-badge {
        padding: 8px 12px;
        gap: 8px;
    }

    .orbit-badge strong { font-size: 12px; }
    .orbit-badge small  { font-size: 10px; }
    .orbit-badge i      { width: 34px; height: 34px; font-size: 16px; }
}

/* Mobile */
@media (max-width: 575px) {
    .hero-section {
        padding: 30px 0 20px;
    }

    .hero-row {
        padding: 20px 0;
    }

    .hero-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .hero-text {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    .hero-btn-primary,
    .hero-btn-outline {
        justify-content: center;
        padding: 13px 24px;
        font-size: 14px;
    }

    .hero-features {
        gap: 10px 16px;
    }

    .hero-features span {
        font-size: 13px;
    }

    /* Visual: smaller circle, hide orbit badges on very small screens */
    .hero-visual {
        max-width: 260px;
        margin-top: 30px;
    }

    .orbit-badge {
        display: none; /* badges overlap badly on 375px screens */
    }

    .hero-nav {
        margin-top: 24px;
        gap: 16px;
    }
}
/* ==========================================
   CONTENT ANIMATION
========================================== */

.hero-title,
.hero-text,
.hero-buttons,
.hero-features,
.hero-visual,
.hero-badge {
    opacity: 0;
    transform: translateY(25px);
}

/* Badge */
.hero-slide.active .hero-badge {
    opacity: 1;
    transform: translateY(0);
    transition: all .6s ease;
    transition-delay: .1s;
}

/* Title */
.hero-slide.active .hero-title {
    opacity: 1;
    transform: translateY(0);
    transition: all .8s ease;
    transition-delay: .2s;
}

/* Text */
.hero-slide.active .hero-text {
    opacity: 1;
    transform: translateY(0);
    transition: all .8s ease;
    transition-delay: .4s;
}

/* Buttons */
.hero-slide.active .hero-buttons {
    opacity: 1;
    transform: translateY(0);
    transition: all .8s ease;
    transition-delay: .6s;
}

/* Features */
.hero-slide.active .hero-features {
    opacity: 1;
    transform: translateY(0);
    transition: all .8s ease;
    transition-delay: .8s;
}

/* Right Visual */
.hero-slide.active .hero-visual {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s ease;
    transition-delay: .3s;
}

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

@media (max-width: 991px) {

    .hero-slider {
        min-height: auto;
    }

    .hero-row {
        min-height: auto;
        padding: 40px 0;
    }

    .hero-slide {
        position: relative;
    }
}



/* ============ LEFT CONTENT ============ */
.hero-badge {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid rgba(14,165,196,0.25);
    color: #0EA5C4;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(14,165,196,0.10);
}

.hero-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.45;
    color: #0B2545;
    margin-bottom: 22px;
    letter-spacing: -0.5px;
}

.hero-title span {
    display: block;
    background: linear-gradient(90deg, #0EA5C4 0%, #5BD0E8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-text {
    font-size: 17px;
    line-height: 1.8;
    color: #5C6B7A;
    max-width: 520px;
    margin-bottom: 32px;
}

.hero-text strong {
    color: #0B2545;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #0EA5C4 0%, #0B86A8 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 32px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 10px 24px rgba(14,165,196,0.30);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(14,165,196,0.38);
    color: #ffffff;
}

.hero-btn-outline {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    color: #0B2545;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 32px;
    border-radius: 50px;
    border: 1.5px solid #D8E4EC;
    transition: all 0.25s ease;
}

.hero-btn-outline:hover {
    border-color: #0EA5C4;
    color: #0EA5C4;
    transform: translateY(-3px);
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
}

.hero-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #344A5E;
}

.hero-features i {
    color: #0EA5C4;
    font-size: 16px;
}

/* ============ VISUAL / ORBIT ============ */
.hero-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-ring {
    position: absolute;
    border: 1.5px dashed rgba(14,165,196,0.30);
    border-radius: 50%;
}

.ring-outer {
    width: 100%;
    height: 100%;
    animation: spinSlow 40s linear infinite;
}

.ring-inner {
    width: 78%;
    height: 78%;
    border-color: rgba(11,37,69,0.12);
    animation: spinSlow 30s linear infinite reverse;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.hero-image-box {
    position: relative;

    width: 100%;
    max-width: 450px;

    aspect-ratio: 1 / 1;

    margin: 0 auto;

    border-radius: 50%;
    overflow: hidden;

    border: 6px solid #ffffff;

    box-shadow: 0 20px 50px rgba(11, 37, 69, 0.15);

    background: #ffffff;
}

.hero-image {
    width: 100%;
    height: 100%;

    object-fit: fill;
    object-position: center top;

    display: block;
}

/* Tablet */
@media (max-width: 991px) {
    .hero-image-box {
        max-width: 350px;
        margin-top: 40px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .hero-image-box {
        max-width: 280px;
    }
}

.orbit-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 18px;
    box-shadow: 0 12px 30px rgba(11,37,69,0.12);
    z-index: 3;
    animation: floatBadge 4s ease-in-out infinite;
}

.orbit-badge i {
    font-size: 22px;
    color: #0EA5C4;
    background: #EAF8FB;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.orbit-badge strong {
    display: block;
    font-size: 14px;
    color: #0B2545;
    font-weight: 700;
}

.orbit-badge small {
    display: block;
    font-size: 12px;
    color: #8AA0B2;
}

.badge-top {
    top: 0;
    right: 6%;
    animation-delay: 0s;
}

.badge-left {
    bottom: 18%;
    left: -6%;
    animation-delay: 1.3s;
}

.badge-right {
    bottom: 4%;
    right: -4%;
    animation-delay: 2.6s;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ============ SLIDER NAV ============ */
.hero-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 36px;
}

.hero-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid #D8E4EC;
    background: #ffffff;
    color: #0B2545;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero-arrow:hover {
    background: #0EA5C4;
    border-color: #0EA5C4;
    color: #ffffff;
}

.hero-dots {
    display: flex;
    gap: 10px;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #D8E4EC;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.hero-dot.active {
    width: 34px;
    border-radius: 6px;
    background: linear-gradient(90deg, #0EA5C4, #0B86A8);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
    .hero-title { font-size: 38px; }
    .hero-visual { margin-top: 50px; max-width: 380px; }
    .hero-slider { min-height: auto; }
    .hero-row { min-height: auto; }
}

@media (max-width: 575px) {
    .hero-title { font-size: 30px; }
    .hero-text { font-size: 15px; }
    .orbit-badge { padding: 8px 12px; }
    .orbit-badge strong { font-size: 12px; }
    .orbit-badge small { font-size: 10px; }
    .hero-buttons { flex-direction: column; }
    .hero-btn-primary, .hero-btn-outline { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .orbit-ring, .orbit-badge, .hero-slide { animation: none !important; }
}

/* ============ SERVICES BASE ============ */
.services-section {
    background: #F7FBFD;
    padding: 70px 0;
}

.services-eyebrow {
    position: relative;
    display: inline-block;
    color: #0EA5C4;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 28px;
    padding-bottom: 12px;
}

.services-eyebrow .title-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: #0EA5C4;
}

.services-eyebrow .title-dash {
    position: absolute;
    bottom: 0;
    left: 40px;
    width: 12px;
    height: 2px;
    background: #F4A261;
}

.services-heading {
    font-size: 48px;
    font-weight: 700;
    color: #0B2545;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.services-subtext {
    font-size: 17px;
    color: #5C6B7A;
    max-width: 700px;
    line-height: 1.8;
}

/* ============ FEATURED EXPERTISE CARDS ============ */
.feature-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #E6EEF3;
    border-top: 3px solid #0EA5C4;
    border-radius: 16px;
    padding: 32px;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(11,37,69,0.08);
}

.feature-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.feature-badge {
    display: inline-block;
    background: #EAF8FB;
    color: #0B86A8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 50px;
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #EAF8FB;
    color: #0EA5C4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.feature-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: #0B2545;
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #5C6B7A;
    max-width: 440px;
    margin-bottom: 20px;
}

.feature-link {
    display: inline-flex;
    align-items: center;
    color: #0B86A8;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1.5px solid #0EA5C4;
    padding-bottom: 4px;
    transition: opacity 0.2s ease;
}

.feature-link:hover {
    opacity: 0.7;
    color: #0B86A8;
}

/* ============ SERVICE CATEGORY CARDS ============ */
.service-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #E6EEF3;
    padding: 28px 24px;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(11,37,69,0.08);
}

.service-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #EAF8FB;
    color: #0EA5C4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.service-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: #0B2545;
    margin-bottom: 16px;
}

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

.service-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: #5C6B7A;
    line-height: 1.6;
    margin-bottom: 10px;
}

.service-list li i {
    color: #0EA5C4;
    font-size: 13px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ============ CTA STRIP ============ */
.services-cta {
    margin-top: 48px;
    background: #ffffff;
    border: 1.5px solid #E6EEF3;
    border-radius: 18px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.cta-text h3 {
    font-size: 22px;
    font-weight: 700;
    color: #0B2545;
    margin-bottom: 6px;
}

.cta-text p {
    font-size: 14px;
    color: #5C6B7A;
    margin: 0;
}

.cta-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #0EA5C4 0%, #0B86A8 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 13px 28px;
    border-radius: 50px;
    box-shadow: 0 10px 24px rgba(14,165,196,0.28);
    transition: transform 0.25s ease;
}

.cta-btn-primary:hover {
    transform: translateY(-3px);
    color: #ffffff;
}

.cta-btn-outline {
    display: inline-flex;
    align-items: center;
    background: #F7FBFD;
    color: #0B2545;
    font-weight: 600;
    font-size: 14px;
    padding: 13px 28px;
    border-radius: 50px;
    border: 1.5px solid #D8E4EC;
    transition: all 0.25s ease;
}

.cta-btn-outline:hover {
    border-color: #0EA5C4;
    color: #0EA5C4;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
    .services-cta { justify-content: center; text-align: center; }
}

@media (max-width: 575px) {
    .feature-card { padding: 28px 22px; }
    .services-cta { padding: 24px; }
    .cta-buttons { width: 100%; justify-content: center; }
}


/* ===== WHY US ===== */
.why-card-new {
    background: #fff;
    border: 1px solid #E6EEF3;
    border-top: 3px solid #0EA5C4;
    border-radius: 16px;
    padding: 28px 22px;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
}
.why-card-new:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(11,37,69,.08); }
.why-icon-box {
    width: 62px; height: 62px; border-radius: 16px;
    background: #EAF8FB; color: #0EA5C4;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin-bottom: 18px;
}
.why-card-new h5 { font-size: 16px; font-weight: 700; color: #0B2545; margin-bottom: 8px; }
.why-card-new p  { font-size: 13px; color: #5C6B7A; line-height: 1.7; }
.why-stat-num    { font-size: 24px; font-weight: 800; color: #0EA5C4; margin-top: 12px; }

/* ===== PROCESS ===== */
/* .process-steps-row { position: relative; }
.process-steps-row::before {
    content: '';
    position: absolute;
    top: 36px; left: 14%; right: 14%;
    height: 2px;
    background: linear-gradient(90deg, #0EA5C4, #5BD0E8);
    z-index: 0;
}
.process-num {
    width: 72px; height: 72px; border-radius: 50%;
    background: #fff; border: 2px solid #0EA5C4;
    color: #0EA5C4; font-size: 22px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(14,165,196,.18);
    position: relative; z-index: 1;
}
.process-num.active-num { background: linear-gradient(135deg,#0EA5C4,#0B86A8); color: #fff; }
.step-check {
    position: absolute; bottom: -8px; right: -8px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #F4A261; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
}
@media (max-width: 991px) { .process-steps-row::before { display: none; } } */

/* ===== PROCESS ===== */
.process-steps-row { position: relative; }
.process-steps-row::before {
    content: '';
    position: absolute;
    top: 36px; left: 14%; right: 14%;
    height: 2px;
    background: #D8E4EC;
    z-index: 0;
}
/* animated fill line */
.process-steps-row::after {
    content: '';
    position: absolute;
    top: 36px; left: 14%;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #0EA5C4, #5BD0E8);
    z-index: 0;
    transition: width 0.6s ease;
}

.process-num {
    width: 72px; height: 72px; border-radius: 50%;
    background: #fff; border: 2px solid #D8E4EC;
    color: #B0C4CE; font-size: 22px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(14,165,196,.10);
    position: relative; z-index: 1;
    transition: background .4s, border-color .4s, color .4s, box-shadow .4s;
}

/* active step */
.process-step-item.active-step .process-num {
    background: linear-gradient(135deg, #0EA5C4, #0B86A8);
    border-color: #0EA5C4;
    color: #fff;
    box-shadow: 0 8px 24px rgba(14,165,196,.32);
}

/* done steps */
.process-step-item.done-step .process-num {
    background: #EAF8FB;
    border-color: #0EA5C4;
    color: #0EA5C4;
}

.process-title {
    color: #B0C4CE;
    transition: color .4s;
}
.process-step-item.active-step .process-title,
.process-step-item.done-step .process-title {
    color: #0B2545 !important;
}

.step-check {
    position: absolute; bottom: -8px; right: -8px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #F4A261; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    opacity: 0;
    transform: scale(0);
    transition: opacity .3s, transform .3s;
}
.process-step-item.active-step .step-check,
.process-step-item.done-step .step-check {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 991px) {
    .process-steps-row::before,
    .process-steps-row::after { display: none; }
}/* ===== GALLERY ===== *//*===============================
        GALLERY
================================*/
.gallery-section-new{
    background:
    radial-gradient(circle at top right,#EAF9FE 0%,transparent 30%),
    linear-gradient(180deg,#F8FCFF,#ffffff);
    position:relative;
    overflow:hidden;
}

.gallery-subtitle{
    max-width:700px;
    margin:auto;
    color:#66788A;
    font-size:17px;
    line-height:1.9;
}

/*=========================
      SLIDER CONTAINER
==========================*/

.gallery-slider{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    height:620px;
    box-shadow:0 25px 60px rgba(11,37,69,.12);
}

.gallery-slides-track{
    display:flex;
    height:100%;
    transition:transform .7s cubic-bezier(.65,0,.35,1);
}

.gallery-slide{
    position:relative;
    min-width:100%;
    height:100%;
}

.gallery-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.gallery-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(to top,
    rgba(7,30,77,.92),
    rgba(7,30,77,.15),
    transparent);
    z-index:1;
}

.gallery-content{
    position:absolute;
    left:35px;
    bottom:60px;
    z-index:2;
    color:#fff;
    max-width:520px;
}

.gallery-category{
    display:inline-block;
    padding:8px 18px;
    background:#20BBEC;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:18px;
}

.gallery-content h3{
    font-size:34px;
    font-weight:700;
    margin-bottom:12px;
}

.gallery-content p{
    font-size:16px;
    color:rgba(255,255,255,.9);
    max-width:400px;
}

/*=========================
      NAV ARROWS
==========================*/

.gallery-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.9);
    color:#0B90C9;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:.3s;
}

.gallery-nav:hover{
    background:#20BBEC;
    color:#fff;
}

.gallery-prev{ left:20px; }
.gallery-next{ right:20px; }

/*=========================
      DOTS
==========================*/

.gallery-dots{
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:5;
}

.gallery-dot{
    width:11px;
    height:11px;
    border-radius:50%;
    border:2px solid #fff;
    background:transparent;
    cursor:pointer;
    padding:0;
    transition:.3s;
}

.gallery-dot.active{
    background:#20BBEC;
    border-color:#20BBEC;
    width:26px;
    border-radius:20px;
}

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

.gallery-btn{
    padding:16px 42px;
    border-radius:60px;
    background:linear-gradient(135deg,#20BBEC,#0B90C9);
    border:none;
    color:#fff;
    font-size:17px;
    font-weight:600;
    box-shadow:0 20px 45px rgba(32,187,236,.28);
    transition:.35s;
}

.gallery-btn:hover{
    transform:translateY(-4px);
    color:#fff;
    box-shadow:0 30px 60px rgba(32,187,236,.35);
}

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

@media(max-width:991px){

    .gallery-slider{
        height:460px;
    }

    .gallery-content{
        bottom:50px;
    }

    .gallery-content h3{
        font-size:28px;
    }
}

@media(max-width:768px){

    .gallery-slider{
        height:380px;
    }

    .gallery-content{
        left:22px;
        bottom:40px;
    }

    .gallery-content h3{
        font-size:22px;
        margin-bottom:8px;
    }

    .gallery-content p{
        font-size:14px;
    }

    .gallery-nav{
        width:42px;
        height:42px;
        font-size:15px;
    }

    .gallery-prev{ left:12px; }
    .gallery-next{ right:12px; }
}

@media(max-width:480px){

    .gallery-slider{
        height:320px;
        border-radius:16px;
    }

    .gallery-content p{
        display:none;
    }

    .gallery-category{
        padding:6px 14px;
        font-size:11px;
        margin-bottom:10px;
    }

    .gallery-nav{
        width:36px;
        height:36px;
    }
}

/* ===== TESTIMONIALS ===== */
.testi-card-new {
    background: #fff; border: 1px solid #E6EEF3;
    border-radius: 16px; padding: 28px 24px;
    position: relative; transition: all .25s; height: 100%;
}
.testi-card-new:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,37,69,.08); }
.testi-quote { font-size: 64px; line-height: 1; color: #EAF8FB; font-family: serif; position: absolute; top: 14px; right: 20px; font-weight: 700; }
.testi-stars { color: #F4A261; font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.testi-text { font-size: 14px; color: #5C6B7A; line-height: 1.8; font-style: italic; margin-bottom: 20px; }
.testi-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid #F0F5F8; padding-top: 16px; }
.testi-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #0EA5C4, #0B86A8);
    color: #fff; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testi-author strong { display: block; font-size: 14px; color: #0B2545; }
.testi-author small  { font-size: 12px; color: #8AA0B2; }
.testi-badge {
    display: inline-flex; align-items: center;
    background: #EAF8FB; color: #0B86A8;
    font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 50px; margin-top: 4px;
}

.footer{
    background:linear-gradient(
        135deg,
        #08244f,
        #0f376f
    );
    color:#fff;
}



/*  about */
/* ===== ABOUT HERO (matches homepage hero) ===== */:root{
    --primary:#20baec;
    --primary-dark:#0f9ac5;
    --dark:#0B2545;
    --text:#6B7280;
    --light:#F8FCFE;
    --border:#E8F1F5;
}









/* service */
.services-pro{
    background:#f8fbff;
}

.service-label{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:#EAF8FB;
    color:#20baec;
    font-size:13px;
    font-weight:700;
}

.service-title{
    font-size:48px;
    font-weight:800;
    color:#0B2545;
    margin-top:15px;
}

.service-subtitle{
    max-width:700px;
    margin:auto;
    color:#64748B;
}

.services-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:30px;
}

.services-nav{
    background:#fff;
    border-radius:24px;
    padding:15px;
    border:1px solid #e8eef3;
    height:fit-content;
    position:sticky;
    top:120px;
}

.service-tab{
    width:100%;
    border:none;
    background:#fff;
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px;
    border-radius:16px;
    margin-bottom:10px;
    color:#0B2545;
    font-weight:600;
    transition:.3s;
}

.service-tab:hover{
    background:#f5fbfd;
}

.service-tab.active{
    background:linear-gradient(135deg,#20baec,#0f9ac5);
    color:#fff;
}

.services-content{
    background:#fff;
    border-radius:30px;
    border:1px solid #e8eef3;
    padding:40px;
}

.service-panel{
    display:none;
    grid-template-columns:420px 1fr;
    gap:40px;
    align-items:center;
}

.service-panel.active{
    display:grid;
}

.service-image img{
    width:100%;
    border-radius:24px;
    height:320px;
    object-fit:contain;
}

.service-badge{
    display:inline-block;
    padding:8px 16px;
    border-radius:50px;
    background:#EAF8FB;
    color:#20baec;
    font-size:12px;
    font-weight:700;
}

.service-info h3{
    font-size:40px;
    font-weight:800;
    color:#0B2545;
    margin:15px 0;
}

.service-info p{
    color:#64748B;
    line-height:1.9;
}

.service-info ul{
    list-style:none;
    padding:0;
    margin-top:25px;
}

.service-info li{
    position:relative;
    padding-left:30px;
    margin-bottom:12px;
    font-weight:500;
}

.service-info li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:#20baec;
    font-weight:800;
}


/* ===== STICKY HORIZONTAL CATEGORY BAR ===== */
.cat-bar-wrap {
    position: sticky; top: 0; z-index: 60;
    background: #fff; border-bottom: 1px solid #e8eef3;
    box-shadow: 0 4px 20px rgba(11,37,69,.04);
}
.cat-bar {
    display: flex; gap: 6px; padding: 14px 24px;
    max-width: 1160px; margin: 0 auto; overflow-x: auto;
    scrollbar-width: none;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-pill {
    display: flex; align-items: center; gap: 9px;
    background: #f8fbff; border: 1px solid #e8eef3; color: #475569;
    font-size: 13.5px; font-weight: 700; padding: 11px 20px; border-radius: 50px;
    white-space: nowrap; cursor: pointer; transition: .25s; flex-shrink: 0;
}
.cat-pill i { font-size: 14px; }
.cat-pill .count { background: rgba(0,0,0,.06); color: inherit; font-size: 11px; padding: 2px 7px; border-radius: 50px; font-weight: 700; }
.cat-pill.active {
    background: linear-gradient(135deg, #20baec, #0f9ac5); color: #fff;
    border-color: transparent; box-shadow: 0 8px 20px rgba(32,186,236,.3);
}
.cat-pill.active .count { background: rgba(255,255,255,.25); }

/* ===== HEADER ===== */
.svc-head { text-align: center; padding: 48px 0 8px; }
.service-subtitle { font-size: 15.5px; line-height: 1.8; }

/* ===== UPDATED SIDEBAR (grouped) ===== */
.nav-group-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #94A3B8; padding: 14px 16px 8px;
}
.service-tab i {
    width: 34px; height: 34px; border-radius: 9px;
    background: #EAF8FB; color: #20baec;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.service-tab.active i { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 991px) {
    .services-nav { display: block; }
}

/* ===== WHY CHOOSE OUR TREATMENTS ===== */
.why-treat {
    padding: 64px 0;
    background: linear-gradient(180deg, #EAF8FB 0%, #F7FBFD 60%, #FFFFFF 100%);
}
.sk {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: #0B86A8; margin-bottom: 12px;
}
.sk::before { content: ''; width: 22px; height: 2px; background: linear-gradient(90deg, #0EA5C4, #F4A261); border-radius: 2px; }
.wt-h2 { font-size: 32px; font-weight: 800; color: #0B2545; margin-bottom: 14px; letter-spacing: -.4px; }
.wt-sub { font-size: 15.5px; color: #5C6B7A; max-width: 640px; line-height: 1.8; }

.wt-card {
    background: #fff; border: 1px solid #E6EEF3; border-radius: 18px;
    padding: 34px 26px; height: 100%;
    box-shadow: 0 1px 2px rgba(11,37,69,.03), 0 12px 28px -16px rgba(11,37,69,.1);
    transition: transform .25s, box-shadow .25s;
}
.wt-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(11,37,69,.1); }
.wt-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, #0EA5C4, #0B86A8);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff; margin-bottom: 20px;
    box-shadow: 0 10px 24px rgba(14,165,196,.3);
}
.wt-card h5 { font-size: 16px; font-weight: 700; color: #0B2545; margin-bottom: 10px; }
.wt-card p { font-size: 13.5px; color: #5C6B7A; line-height: 1.7; }

@media(max-width:991px){

    .services-layout{
        grid-template-columns:1fr;
    }

    .services-nav{
        position:relative;
        top:0;
    }

    .service-panel{
        grid-template-columns:1fr;
    }

    .service-image img{
        height:250px;
    }

    .service-title{
        font-size:34px;
    }

    .service-info h3{
        font-size:30px;
    }
}



/* ---------- Page Header ---------- */
        .page-header {
            position: relative;
            padding: 90px 0 110px;
            background: linear-gradient(135deg, var(--brand) 0%, #1690b8 38%, var(--brand-dark) 100%);
            overflow: hidden;
            isolation: isolate;
        }

        .page-header::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.16), transparent 38%),
                radial-gradient(circle at 92% 78%, rgba(255, 255, 255, 0.10), transparent 42%),
                radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
            background-size: auto, auto, 26px 26px;
            background-position: 0 0, 0 0, 0 0;
            opacity: 0.9;
        }

        .page-header .ph-tooth {
            position: absolute;
            top: 50%;
            right: 6%;
            transform: translateY(-50%);
            font-size: 230px;
            color: rgba(255, 255, 255, 0.08);
            z-index: 0;
            pointer-events: none;
        }

        .page-header .container {
            z-index: 1;
        }

        .page-header .ph-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.25);
            padding: 6px 18px;
            border-radius: 50px;
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-family: 'Jost', sans-serif;
        }

        .page-header h1 {
            color: #fff;
            font-family: 'Jost', sans-serif;
            font-weight: 700;
            font-size: 48px;
            margin: 18px 0 10px;
        }

        .page-header p {
            color: rgba(255, 255, 255, 0.85);
            max-width: 560px;
        }

        .page-header .breadcrumb {
            background: transparent;
            margin: 0;
        }

        .page-header .breadcrumb-item,
        .page-header .breadcrumb-item a {
            color: rgba(255, 255, 255, 0.75);
            font-size: 14px;
        }

        .page-header .breadcrumb-item.active {
            color: #fff;
            font-weight: 600;
        }

        .page-header .breadcrumb-item+.breadcrumb-item::before {
            color: rgba(255, 255, 255, 0.5);
        }


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

.footer-section{

    background:#071E4D;

    padding:80px 0 25px;

    color:#fff;

}

/* Logo */

.footer-logo{

    width:220px;

    max-width:100%;

    display:block;

    /* margin-bottom:25px; */

}

/* Text */

.footer-text{

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

    line-height:1.9;

    font-size:16px;

    max-width:330px;

}

/* Title */

.footer-section .footer-title{

    color:#fff !important;

    font-size:30px;

    font-weight:700;

    margin-bottom:28px;

    position:relative;

}

.footer-section .footer-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:65px;

    height:3px;

    background:#20BAEC;

}

/* Links */

.footer-links{

    padding:0;

    margin:0;

    list-style:none;

}

.footer-links li{

    margin-bottom:15px;

}

.footer-links a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

    font-size:17px;

}

.footer-links a:hover{

    color:#20BAEC;

    padding-left:8px;

}

/* Contact */

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

}

.contact-item i{

    color:#20BAEC;

    width:30px;

    font-size:20px;

    margin-top:4px;

}

.contact-item div{

    color:#fff;

    line-height:1.8;

    font-size:17px;

}

/* Social */

.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}

.footer-social a{

    width:48px;

    height:48px;

    background:#20BAEC;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:8px;

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:#fff;

    color:#071E4D;

}

/* Divider */

.footer-section hr{

    margin:55px 0 20px;

    border-color:rgba(255,255,255,.15);

}

/* Bottom */

.footer-bottom{

    text-align:center;

    color:#fff;

}

/*=========================
        Mobile
==========================*/

@media(max-width:991px){

.footer-section{

text-align:center;

}

.footer-logo{

width:250px;

margin:auto auto 25px;

}

.footer-text{

max-width:100%;

margin:auto;

margin-bottom:25px;

}

.footer-section .footer-title{

margin-top:35px;

}

.footer-section .footer-title::after{

left:50%;

transform:translateX(-50%);

}

.footer-social{

justify-content:center;

}

.footer-contact{

align-items:center;

}

.contact-item{

width:100%;

max-width:320px;

text-align:left;

}

}

        /* =========================
   FOOTER
========================= */
/* .footer-section{
    background: #071E4D;
    color: #fff;
    padding: 80px 0 25px;
    position: relative;
}

.footer-logo{
    display:block;
    width:100%;
    max-width:300px;      
    height:150px;         
    object-fit:contain;  
    object-position:left center;

    padding:0;
    margin-bottom:25px;
}

.footer-text{
    color: rgba(255,255,255,.80);
    line-height: 1.9;
    font-size: 15px;
    margin-bottom: 0;
}

.footer-title{
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
}

.footer-title::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-10px;
    width:60px;
    height:3px;
    background:#20BAEC;
    border-radius:10px;
}

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:14px;
}

.footer-links a{
    color:rgba(255,255,255,.85);
    text-decoration:none;
    transition:.3s;
    font-size:16px;
}

.footer-links a i{
    color:#20BAEC;
    margin-right:8px;
}

.footer-links a:hover{
    color:#20BAEC;
    padding-left:6px;
}

.footer-contact p{
    color:rgba(255,255,255,.85);
    margin-bottom:18px;
    line-height:1.8;
    font-size:15px;
}

.footer-contact i{
    color:#20BAEC;
    margin-right:10px;
    font-size:18px;
}

.footer-social{
    display:flex;
    gap:12px;
}

.footer-social a{
    width:45px;
    height:45px;
    background:#20BAEC;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    text-decoration:none;
    transition:.3s;
}

.footer-social a:hover{
    background:#fff;
    color:#071E4D;
    transform:translateY(-4px);
}

.footer-divider{
    border-color: rgba(255,255,255,.10);
    margin:50px 0 20px;
}

.footer-bottom{
    text-align:center;
}

.footer-bottom p{
    margin:0;
    color:rgba(255,255,255,.75);
    font-size:15px;
}

@media(max-width:768px){

    .footer-section{
        text-align:center;
    }

    .footer-title::after{
        left:50%;
        transform:translateX(-50%);
    }

    .footer-social{
        justify-content:center;
    }
} */


/* =========================
   GLOBAL SECTION HEADING
========================= */

.section-header{
    max-width:800px;
    margin:0 auto 70px;
    text-align:center;
}

.section-tag{
    position:relative;
    display:inline-block;
    color:#20BAEC;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
    padding-bottom:12px;
}

.section-tag::after{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    width:80px;
    height:3px;
    background:#20BAEC;
    border-radius:10px;
}

.section-heading{
    font-size:52px;
    line-height:1.5;
    font-weight:800;
    color:#0A2A5E;
    margin-bottom:20px;
}

.section-description{
    font-size:18px;
    line-height:1.9;
    color:#667085;
    margin:0;
}

/* Tablet */
@media(max-width:991px){

    .section-heading{
        font-size:40px;
    }
}

/* Mobile */
@media(max-width:767px){

    .section-heading{
        font-size:32px;
    }

    .section-description{
        font-size:16px;
    }
}

.about-img {
    object-fit: contain;
    border-radius: 10%;
}

.abt-us {
    border-radius: 20px !important;
}

.abt-btn {
    border-radius: 50px !important;
}





.services-section,
.process-section-new,
.testimonial-section-new,
.gallery-section-new,
.why-us-section{
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at top right,
            rgba(32,187,236,.14) 0%,
            transparent 35%),

        radial-gradient(circle at bottom left,
            rgba(11,37,69,.05) 0%,
            transparent 40%),

        linear-gradient(180deg,
            #F9FDFF 0%,
            #F2FAFE 55%,
            #FFFFFF 100%);
}


.services-section::before,
.process-section-new::before,
.about-section::before
.gallery-section-new::before,
.why-us-section::before,
.testimonial-section-new::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(32,187,236,.12),
        transparent 70%);
    top:-180px;
    right:-120px;
    pointer-events:none;
}

.services-section::after,
.process-section-new::after,
.about-section::after,
.gallery-section-new::after,
.why-us-section::after,
.testimonial-section-new::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(11,37,69,.05),
        transparent 70%);
    bottom:-120px;
    left:-80px;
    pointer-events:none;
}


.section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(rgba(32,187,236,.06) 1px, transparent 1px);
    background-size:28px 28px;
    opacity:.5;
}

.cta-section{
    background:
        linear-gradient(135deg,
            #0B2545 0%,
            #0E7FB0 55%,
            #20BAEC 100%);
    position:relative;
    overflow:hidden;
}

.cta-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-250px;
    right:-180px;
}

.cta-section::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    bottom:-120px;
    left:-120px;
}


.expertise-section{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 100% 0,
            rgba(32,186,236,.10),
            transparent 40%),

        linear-gradient(180deg,#ffffff,#f8fdff);
}

.expertise-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(11,37,69,.05),
        transparent 70%);
    bottom:-140px;
    right:-120px;
}

.doctor2-section{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,#f7fcff 0%,#eef9ff 100%);
}

.doctor2-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(rgba(32,186,236,.05) 1px,transparent 1px);
    background-size:32px 32px;
}

.doctor-section{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top left,
            rgba(32,186,236,.12) 0%,
            transparent 35%),

        radial-gradient(circle at bottom right,
            rgba(11,37,69,.05) 0%,
            transparent 45%),

        linear-gradient(135deg,#ffffff 0%,#f4fbff 100%);
}

.doctor-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(32,186,236,.12),
        transparent 70%);
    top:-220px;
    left:-150px;
}


.testimonial-carousel .owl-stage{
    display:flex;
    padding:10px 0;
}

.testimonial-carousel .owl-item{
    display:flex;
}

.testimonial-carousel .testi-card-new{
    margin:12px;
    height:100%;
}

.testimonial-carousel .owl-nav{
    text-align:center;
    margin-top:35px;
}

.testimonial-carousel .owl-nav button{
    width:50px;
    height:50px;
    border-radius:50%!important;
    background:#20baec!important;
    color:#fff!important;
    margin:0 8px;
    transition:.3s;
}

.testimonial-carousel .owl-nav button:hover{
    background:#0b4f73!important;
}

.testimonial-carousel .owl-nav i{
    font-size:18px;
}

.testimonial-carousel .owl-dots{
    margin-top:18px;
}

.testimonial-carousel .owl-dot span{
    width:12px;
    height:12px;
    background:#cfd8dc!important;
}

.testimonial-carousel .owl-dot.active span{
    background:#20baec!important;
}

/*=========================
   UNIVERSAL ATTRACTIVE BACKGROUND
   Add class="pdc-bg" to any <section> on any page
==========================*/

.pdc-bg{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(32,187,236,.22) 0%,
            transparent 42%),

        radial-gradient(circle at 85% 15%,
            rgba(11,37,69,.16) 0%,
            transparent 45%),

        radial-gradient(circle at 90% 85%,
            rgba(32,187,236,.18) 0%,
            transparent 40%),

        radial-gradient(circle at 10% 90%,
            rgba(11,37,69,.10) 0%,
            transparent 45%),

        linear-gradient(160deg,
            #EAF9FE 0%,
            #F3FBFF 40%,
            #FFFFFF 100%);
}

/* Dotted grid pattern overlay for texture */
.pdc-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(11,37,69,.14) 1.6px, transparent 1.6px);
    background-size:26px 26px;
    opacity:.55;
    z-index:0;
    pointer-events:none;
}

/* Big glowing blob top-right */
.pdc-bg::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(32,187,236,.30),
        transparent 70%);
    top:-220px;
    right:-160px;
    z-index:0;
    pointer-events:none;
}

/* Extra glowing blob bottom-left, added via a wrapping pseudo trick */
.pdc-bg .pdc-blob{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(11,37,69,.14),
        transparent 70%);
    bottom:-160px;
    left:-120px;
    z-index:0;
    pointer-events:none;
}

/* Keep actual content above the decorative layers */
.pdc-bg > .container,
.pdc-bg > .container-fluid{
    position:relative;
    z-index:1;
}

/* ---------- Dark variant for banners/CTAs ---------- */
.pdc-bg-dark{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(circle at 20% 20%, rgba(32,187,236,.35), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(32,187,236,.20), transparent 45%),
        linear-gradient(120deg, #051225 0%, #0a2f4a 50%, #0e4a72 100%);
}

.pdc-bg-dark::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
    background-size:24px 24px;
    z-index:0;
    pointer-events:none;
}

.pdc-bg-dark::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    top:-250px;
    right:-180px;
    z-index:0;
    pointer-events:none;
}

.pdc-bg-dark > .container,
.pdc-bg-dark > .container-fluid{
    position:relative;
    z-index:1;
}


  .language-wrapper{
    display:flex;
    align-items:center;
}

.language-dropdown{
    min-width:110px;
    padding:10px 15px;
    border:1px solid #dce5ec;
    border-radius:30px;
    background:#fff;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    outline:none;
    transition:.3s;
}

.language-dropdown:hover{
    border-color:#20baec;
}

.language-dropdown:focus{
    border-color:#20baec;
    box-shadow:0 0 0 3px rgba(32,186,236,.15);
}


@media (max-width:991.98px){

    .language-wrapper{
        width:100%;
        margin-top:15px;
        margin-bottom:10px;
    }

    .language-dropdown{
        width:100%;
        min-width:100%;
        height:48px;
        font-size:15px;
        padding:0 18px;
    }

    .appointment-btn{
        width:100%;
        margin-bottom:15px;
    }

}