/* =========================================
   GOOGLE FONTS
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');


/* =========================================
   ROOT COLORS & FONTS
========================================= */
:root{

    /* Brand Colors */
    --primary-color:#0B2F66;
    --secondary-color:#1457A4;
   

    /* Text Colors */
    --heading-color:#1A1A1A;
    --text-color:#000000;

    /* Background */
    --light-bg:#F7F7F7;
    --white:#ffffff;

    /* Fonts */
    --heading-font:'Cormorant Garamond', serif;
    --body-font:'Outfit', sans-serif;

}

body{
    background: linear-gradient(135deg, #0B2F66, #1457A4);
    overflow-x: hidden;
}

/* =========================================
   GLOBAL RESET
========================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:var(--body-font);
    color:var(--text-color);
    background:var(--white);
    overflow-x:hidden;
}


/* =========================================
   HEADING TYPOGRAPHY
========================================= */
h1,
h2,
h3{
    font-family:var(--heading-font);
    color:var(--primary-color) !important;
    font-weight:500 !important;
    line-height:1.2;
    letter-spacing:0.5px;
}

h4,
h5,
h6{
    font-family:var(--body-font);
    color:var(--heading-color);
    font-weight:400;
    line-height:1.4;
}


/* =========================================
   PARAGRAPH TYPOGRAPHY
========================================= */
p,
span,
li,
a,
input,
textarea,
label,
button{
    font-family:var(--body-font);
    color:var(--text-color);
    line-height:1.8;
}


/* =========================================
   DESKTOP FONT SIZE
========================================= */
h1{
    font-size:56px;
}

h2{
    font-size:46px;
}

h3{
    font-size:36px;
}

h4{
    font-size:28px;
}

h5{
    font-size:22px;
}

h6{
    font-size:18px;
}

p{
    font-size:17px;
}

small{
    font-size:14px;
}


/* =========================================
   TABLET RESPONSIVE
========================================= */
@media(max-width:1199px){

    h1{
        font-size:44px;
    }

    h2{
        font-size:38px;
    }

    h3{
        font-size:30px;
    }

    h4{
        font-size:24px;
    }

    h5{
        font-size:20px;
    }

    h6{
        font-size:17px;
    }

    p{
        font-size:16px;
    }

}


/* =========================================
   MOBILE RESPONSIVE
========================================= */
@media(max-width:767px){

    h1{
        font-size:34px;
    }

    h2{
        font-size:30px;
    }

    h3{
        font-size:26px;
    }

    h4{
        font-size:22px;
    }

    h5{
        font-size:18px;
    }

    h6{
        font-size:16px;
    }

    p{
        font-size:15px;
        line-height:1.7;
    }

}
  
  *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .top-bar{
        background: #1f4d8f;
        padding: 10px 0;
    }

    .social-icons a{
        color: #fff;
        font-size: 20px;
        margin-right: 18px;
        transition: 0.3s;
    }

    .social-icons a:hover{
        transform: translateY(-3px);
        color: #ff4f81;
    }

    .contact-info{
        display: flex;
        justify-content: end;
        gap: 30px;
        align-items: center;
    }

    .contact-info a{
        text-decoration: none;
        font-size: 18px;
        font-weight: 500;
    }

    .contact-info i{
        margin-right: 8px;
    }

    .main-navbar{
        background: #fff;
        padding: 15px 0;
        box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    }

    .navbar-brand img{
        height: 70px;
    }

    .navbar-nav .nav-link{
        font-size: 20px;
        font-weight: 500;
        margin: 0 15px;
        transition: 0.3s;
    }

    .navbar-nav .nav-link:hover{
        color: var(--secondary-color) !important;
    }

    .appointment-btn{
        border: 2px solid #1f4d8f;
        padding: 12px 28px;
        border-radius: 2px;
        color: #1f4d8f;
        text-decoration: none;
        font-size: 18px;
        font-weight: 500;
        transition: 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .appointment-btn:hover{
        background: #1f4d8f;
        color: #fff;
    }

    @media(max-width:991px){
        .top-bar, .appointment-btn{display: none;}

        .navbar-brand img{height: 80px; width: 260px !important;}

        .container{
            padding-top:10px ;
        }
        .contact-info{
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .social-icons{
            text-align: center;
        }

        .navbar-nav{
            margin-top: 20px;
        }

        .navbar-nav .nav-link{
            margin: 10px 0;
        }

        .appointment-btn{
            margin-top: 20px;
            width: 100%;
            justify-content: center;
        }
    }

/*=========== Slider Height Fix================================== */
    #carouselExampleControls{
        margin-top: 0;
    }

    #carouselExampleControls .carousel-item img{
        height: 80vh;          /* Short Height */
        object-fit: cover;     /* Image Proper Fit */
        width: 100%;
    }

    /* Mobile Responsive */
    @media(max-width:768px){
        #carouselExampleControls .carousel-item img{
            height: 45vh;
        }
    }

    /* Remove Extra Scroll */
    body{
        overflow-x: hidden;
    }

    .carousel{
        overflow: hidden;
    }

    /* ==============about section============ */
     .about-clinic-section{
        background: #f5f5f5;
        padding: 90px 0;
        position: relative;
        overflow: hidden;
    }

    /* Background Curve */
    /* .about-clinic-section::before{
        content: "";
        position: absolute;
        width: 1200px;
        height: 1200px;
        border: 6px solid rgba(20, 74, 143, 0.12);
        border-radius: 50%;
        top: -500px;
        right: -350px;
    } */

    .section-main-heading{
        font-size: 62px;
        line-height: 1.2;
        text-align: center;
        font-weight: 500;
        margin-bottom: 70px;
    }

    .clinic-image{
        position: relative;
        z-index: 2;
    }

    .clinic-image img{
        width: 100%;
        height: 520px;
        object-fit: cover;
        border: 8px solid #d9e4f2;
    }

    .clinic-content{
        padding-left: 60px;
        position: relative;
        z-index: 2;
    }

    .clinic-subtitle{
        font-size: 22px;
        margin-bottom: 10px;
    }

    .clinic-title{
        font-size: 48px;
        margin-bottom: 30px;
    }

    .clinic-feature{
        margin-bottom: 28px;
    }

    .clinic-feature h5{
        font-size: 20px;
        margin-bottom: 8px;
    }

    .clinic-feature p{
        font-size: 17px;
        margin-bottom: 0;
    }

    .clinic-btn{
        display: inline-block;
        margin-top: 15px;
        padding: 14px 34px;
        border: 1px solid #0b3d91;
        color: #0b3d91;
        text-decoration: none;
        transition: 0.4s;
        font-size: 17px;
        font-weight: 500;
    }

    .clinic-btn:hover{
        background: #0b3d91;
        color: #fff;
    }

    @media(max-width:991px){

        .section-main-heading{
            font-size: 38px;
            margin-bottom: 40px;
        }

        .clinic-content{
            padding-left: 0;
            margin-top: 40px;
        }

        .clinic-image img{
            height: auto;
        }

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

    @media(max-width:576px){

        .section-main-heading{
            font-size: 30px;
        }

        .clinic-title{
            font-size: 28px;
        }

        .clinic-subtitle{
            font-size: 18px;
        }
    }

    /* ==============counter section====================== */
      .counter-section{
        background:#f7f7f7;
        padding:90px 0;
    }

    .counter-box{
        text-align:center;
        padding:20px 30px;
        border-right:1px solid #dcdcdc;
        height:100%;
    }

    .counter-box.last{
        border-right:none;
    }

    .counter-number{
        font-size:90px;
        line-height:1;
        font-weight:700;
        margin-bottom:20px;
    }

    .counter-number span{
        font-size:55px;
    }

    .counter-title{
        font-size:28px;
        line-height:1.4;
        font-weight:700;
        max-width:320px;
        margin:auto;
    }

    @media(max-width:991px){

        .counter-box{
            border-right:none;
            border-bottom:1px solid #dcdcdc;
            padding:40px 20px;
        }

        .counter-box.last{
            border-bottom:none;
        }

        .counter-number{
            font-size:70px;
        }

        .counter-title{
            font-size:24px;
        }
    }

    @media(max-width:767px){

        .counter-section{
            padding:60px 0;
        }

        .counter-number{
            font-size:56px;
        }

        .counter-number span{
            font-size:34px;
        }

        .counter-title{
            font-size:20px;
        }
    }

    /* =================about slider======================= */
     .treatment-section{
        background:#f7f7f7;
        padding:100px 0;
        overflow:hidden;
    }

    /* LEFT CONTENT */
    .treatment-left{
        padding-right:5px;
        padding-left: 10px;
        position:sticky;
        top:100px;
    }

    .treatment-left h2{
        font-size:62px;
        line-height:1.05;
        margin-bottom:35px;
    }

    .treatment-left p{
        /* font-size:20px; */
        line-height:1.9;
        max-width:650px;
        text-align: justify;
    }

    /* RIGHT SLIDER */
    .treatment-slider{
        overflow:hidden;
        padding-bottom:20px;
    }

    .treatment-card{
        background:transparent;
    }

    .treatment-image{
        overflow:hidden;
        margin-bottom:25px;
    }

    .treatment-image img{
        width:100%;
        height:520px;
        object-fit:cover;
        transition:0.5s;
        border-radius:60px 0 0 0;
    }

    .treatment-card:hover .treatment-image img{
        transform:scale(1.05);
    }

    .treatment-card h3{
        font-size:42px;
        margin-bottom:18px;
    }

    .treatment-card p{
        font-size:18px;
        line-height:1.8;
    }

    /* Swiper */
    .swiper{
        overflow:hidden;
    }

    /* Responsive */
    @media(max-width:1399px){

        .treatment-left h2{
            font-size:58px;
        }

        .treatment-image img{
            height:450px;
        }
    }

    @media(max-width:991px){

        .treatment-left{
            position:relative;
            top:0;
            padding-right:0;
            margin-bottom:60px;
        }

        .treatment-left h2{
            font-size:48px;
        }

        .treatment-left p{
            font-size:17px;
        }

        .treatment-card h3{
            font-size:34px;
        }

        .treatment-image img{
            height:400px;
        }
    }

    @media(max-width:767px){

        .treatment-section{
            padding:70px 0;
        }

        .treatment-left h2{
            font-size:38px;
        }

        .treatment-card h3{
            font-size:28px;
        }

        .treatment-image img{
            height:320px;
        }

        .treatment-card p{
            font-size:16px;
        }
    }



    /* =====================bg content=========== */
     .why-dermaglo{
        position:relative;
        padding:120px 0;
        background:url('/img/bg-img.jpg') center center/cover no-repeat;
        overflow:hidden;
        z-index:1;
    }

    /* Dark Overlay */
    .why-dermaglo::before{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(to right, rgba(16, 69, 150, 0.88), rgba(11,47,102,0.65));
        z-index:-1;
    }

    .why-heading{
        text-align:center;
        color:#fff;
        margin-bottom:80px;
    }

    .why-heading h2{
        color:#fff !important;
        margin-bottom:10px;
        font-size: 62px;
        font-weight: 500;
    }

    .why-heading p{
        color:#f1f1f1;
        max-width:900px;
        margin:auto;
    }

    /* Feature Card */
    .why-card{
        text-align:center;
        padding:20px 25px;
        transition:0.4s ease;
    }

    .why-card:hover{
        transform:translateY(-10px);
    }

    .why-icon{
        width:110px;
        height:110px;
        border:1px solid rgba(255,255,255,0.25);
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        margin:auto auto 30px;
        backdrop-filter:blur(10px);
        background:rgba(255,255,255,0.05);
    }

    .why-icon i{
        font-size:42px;
        color:#fff;
    }

    .why-card h4{
        color:#fff;
        line-height:1.5;
        max-width:320px;
        margin:auto;
        font-size: 20px;
    }

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

        .why-dermaglo{
            padding:90px 0;
        }

        .why-card{
            margin-bottom:50px;
        }

        .why-heading{
            margin-bottom:60px;
        }
    }

    @media(max-width:767px){

        .why-dermaglo{
            padding:70px 0;
        }

        .why-icon{
            width:90px;
            height:90px;
        }

        .why-icon i{
            font-size:34px;
        }
    }

/* ================mens and womens care ======================== */
   .bodycare-section{
        background:#f7f7f7;
        overflow:hidden;
    }

    /* LEFT IMAGE */
    .bodycare-image{
        height:100%;
        min-height:100%;
    }

    .bodycare-image img{
        width:100%;
        height:93%;
        min-height:600px;
        object-fit:cover;
        display:block;
    }

    /* RIGHT CONTENT */
    .bodycare-content{
        padding: 15px 20px;
    }

    .bodycare-top{
        text-align:center;
        margin-bottom:50px;
    }

    .bodycare-top h2{
        letter-spacing:1px;
        margin-bottom:12px;
        font-size: 62px;
    }

    .bodycare-top h5{
        margin-bottom:16px;
    }

    .bodycare-top p{
        max-width:750px;
        margin:0 auto;
    }

    /* GRID */
    .bodycare-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:35px 30px;
    }

    /* CARD */
    .bodycare-card{
        text-decoration:none;
        display:block;
        transition:0.4s ease;
    }

    .bodycare-card:hover{
        transform:translateY(-8px);
    }

    .bodycare-card:hover img{
        transform:scale(1.05);
    }

    .bodycare-card-image{
        overflow:hidden;
        margin-bottom:18px;
        background:#eee;
        border-radius:50px 0 0 0;
        position:relative;
    }

    .bodycare-card-image::after{
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(to top, rgba(11,47,102,0.5) 0%, transparent 60%);
        transition:0.4s ease;
        pointer-events:none;
    }

    .bodycare-card:hover .bodycare-card-image::after{
        background:linear-gradient(to top, rgba(11,47,102,0.7) 0%, transparent 70%);
    }

    .bodycare-card-image img{
        width:100%;
        height:260px;
        object-fit:cover;
        transition:0.5s ease;
    }

    .bodycare-card h5{
        transition:0.3s ease;
        padding-left:6px;
        border-left:3px solid #1457A4;
    }

    .bodycare-card:hover h5{
        padding-left:12px;
        color:#1457A4;
    }

  

    /* Responsive */
    @media(max-width:1399px){

        .bodycare-content{
            padding:70px 50px;
        }
    }

    @media(max-width:991px){

        .bodycare-content{
            padding:60px 25px;
        }

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

        .bodycare-image img{
            min-height:400px;
        }
    }

    @media(max-width:767px){

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

        .bodycare-image img{
            min-height:350px;
        }

        .bodycare-card-image img{
            height:280px;
        }

        .bodycare-top{
            margin-bottom:40px;
        }
    }


    /* ==================concern===================== */
     .concern-section{
        background:#f7f7f7;
        padding:110px 0 90px;
        position:relative;
        overflow:hidden;
    }

    .concern-content{
        text-align:center;
        max-width:1600px;
        margin:auto;
    }

    .concern-content h2{
        margin-bottom:35px;
        font-size: 62px;
        font-weight: 500;
    }

    .concern-content p{
        max-width:1550px;
        margin:auto;
        line-height:1.9;
    }

    /* Bottom Line */
    .concern-line{
       width: 313px;
       height: 2px;
       background: #1185e5;
       margin: 40px auto 0;
    }

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

        .concern-section{
            padding:90px 0 70px;
        }

        .concern-line{
            width:220px;
            margin-top:50px;
        }
    }

    @media(max-width:767px){

        .concern-section{
            padding:70px 0 60px;
        }

        .concern-content p{
            line-height:1.8;
        }

        .concern-line{
            width:140px;
            margin-top:40px;
        }
    }


/*================= ===== TAB SECTION ================================= */
    .tab-treatment-section {
        background: #EEF4FB;
        padding: 0 0 80px;
    }

    /* TABS NAV */
    .treatment-tabs {
        display: flex;
        border-bottom: 1px solid #d0dff0;
        background: #fff;
        padding: 0 60px;
        align-items: center;
        justify-content:space-around;
        gap: 0;
    }

    .treatment-tab {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 22px 40px;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: 0.3s ease;
        text-decoration: none;
        position: relative;
        top: 1px;
    }

    .treatment-tab img {
        width: 36px;
        height: 36px;
        object-fit: cover;
        opacity: 0.5;
        transition: 0.3s;
    }

    .treatment-tab span {
        font-size: 20px;
        font-weight: 500;
        /* color: #888; */
        transition: 0.3s;
        font-family: var(--body-font);
    }

    .treatment-tab.active img,
    .treatment-tab:hover img {
        opacity: 5;
    }

    .treatment-tab.active span,
    .treatment-tab:hover span {
        color: var(--primary-color);
        
        
    }

    .treatment-tab.active {
        border-bottom: 3px solid var(--primary-color);
    }

    /* CONTENT PANELS */
    .treatment-panels {
        padding: 70px 60px 0;
    }

    .treatment-panel {
        display: none;
    }

    .treatment-panel.active {
        display: flex;
        align-items: center;
        gap: 70px;
    }

    /* LEFT IMAGE */
    .panel-image {
        flex: 0 0 480px;
        max-width: 480px;
    }

    .panel-image img {
        width: 100%;
        height: 460px;
        object-fit: cover;
        border-radius: 60px 0 0 0;
    }

    /* RIGHT CONTENT */
    .panel-content {
        flex: 1;
    }

    .panel-content h2 {
        font-size: 46px;
        margin-bottom: 20px;
    }

    .panel-content p {
        font-size: 17px;
        line-height: 1.9;
        margin-bottom: 25px;
    }

    .panel-content ul {
        list-style: none;
        padding: 0;
        margin-bottom: 35px;
    }

    .panel-content ul li {
        font-size: 16px;
        padding: 6px 0;
        padding-left: 20px;
        position: relative;
    }

    .panel-content ul li::before {
        content: '•';
        position: absolute;
        left: 0;
        color: var(--secondary-color);
        font-size: 18px;
    }

    .panel-btn {
        display: inline-block;
        padding: 12px 32px;
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
    }

    .panel-btn:hover {
        background: var(--primary-color);
        color: #fff;
    }

    /* RESPONSIVE */
    @media(max-width: 1199px) {
        .treatment-tabs { padding: 0 30px; }
        .treatment-tab { padding: 20px 25px; }
        .treatment-panels { padding: 50px 30px 0; }
        .panel-image { flex: 0 0 380px; max-width: 380px; }
        .treatment-panel.active { gap: 50px; }
    }

    @media(max-width: 991px) {
        .treatment-tabs { padding: 0 15px; overflow-x: auto; flex-wrap: nowrap; }
        .treatment-tab { padding: 18px 20px; white-space: nowrap; }
        .treatment-panels { padding: 40px 20px 0; }
        .treatment-panel.active { flex-direction: column; gap: 35px; }
        .panel-image { flex: none; max-width: 100%; width: 100%; }
        .panel-image img { height: 350px; }
    }

    @media(max-width: 767px) {
        .treatment-tab span { font-size: 16px; }
        .treatment-tab img { width: 28px; height: 28px; }
        .panel-content h2 { font-size: 32px; }
        .panel-image img { height: 280px; }
    }

/* WhatsApp Submit Button Hover & Active States */
.btn-submit-appointment {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.btn-submit-appointment:hover {
    background: #b4d1f9 !important; /* Premium matching hover blue */
    color: #0b3d91 !important; /* Vibrant primary brand contrast on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(171, 201, 250, 0.6) !important;
}
.btn-submit-appointment:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(171, 201, 250, 0.4) !important;
}