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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:#222;
    background:#fff;
}

.container{
    width:90%;
    max-width:1280px;
    margin:auto;
}

/*==================================================
TOP BAR
==================================================*/

.top-bar{
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    font-size:14px;
    padding:10px 0;
    position:relative;
    overflow:hidden;
}

.top-bar::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.08);
    transform:skewX(-30deg);
    transition:1.5s;
}

.top-bar:hover::before{
    left:120%;
}

.top-bar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.top-left,
.top-right{
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
}

.top-bar a,
.top-bar span{
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:8px;
    transition:.3s;
    font-weight:500;
}

.top-bar a:hover{
    color:#C8F7E8;
}

.top-bar i{
    color:#A8F0DE;
    font-size:15px;
    transition:.3s;
}

.top-bar a:hover i{
    transform:scale(1.15);
    color:#fff;
}

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

.top-right a{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
}

.top-right a:hover{
    background:#fff;
    color:#0F4C81;
    transform:translateY(-3px);
}

.top-right a i{
    margin:0;
    color:inherit;
}

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

@media(max-width:768px){

.top-bar{
    display:none;
}

}



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

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

.header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid #E8EEF5;
    box-shadow:0 8px 25px rgba(15,76,129,.08);
    z-index:999;
    transition:.35s;
}

.navbar{
    height:85px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo img{
    height:65px;
    transition:.3s;
}

.logo img:hover{
    transform:scale(1.03);
}

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

.nav-menu{
    display:flex;
    align-items:center;
    gap:35px;
    list-style:none;
}

.nav-menu li{
    position:relative;
}

.nav-menu li a{
    position:relative;
    text-decoration:none;
    color:#1F2937;
    font-size:16px;
    font-weight:600;
    padding:8px 0;
    transition:.3s;
}

.nav-menu li a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:3px;
    background:#16A085;
    border-radius:50px;
    transition:.35s;
}

.nav-menu li a:hover,
.nav-menu li a.active{
    color:#0F4C81;
}

.nav-menu li a:hover::after,
.nav-menu li a.active::after{
    width:100%;
}

/*==================================================
DROPDOWN
==================================================*/

.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:120%;
    left:0;
    width:270px;
    background:#fff;
    border-radius:16px;
    padding:12px 0;
    list-style:none;
    border:1px solid #E8EEF5;
    box-shadow:0 20px 45px rgba(15,76,129,.12);

    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:.35s;
    z-index:100;
}

.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-menu li a{
    display:block;
    padding:14px 22px;
    color:#4B5563;
    font-size:15px;
}

.dropdown-menu li a:hover{
    background:#F5FAFD;
    color:#16A085;
    padding-left:28px;
}

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

.nav-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.call-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#F5FAFD;
    color:#0F4C81;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    transition:.35s;
}

.call-btn:hover{
    background:#16A085;
    color:#fff;
}

.appointment-btn{
    padding:14px 30px;
    border-radius:50px;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
    box-shadow:0 12px 25px rgba(15,76,129,.18);
}

.appointment-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(15,76,129,.22);
}

/*==================================================
HAMBURGER
==================================================*/

.menu-toggle{
    display:none;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
}

.menu-toggle span{
    width:28px;
    height:3px;
    background:#0F4C81;
    border-radius:20px;
}

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

.mobile-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:330px;
    height:100%;
    background:#fff;
    padding:30px;
    transition:.4s;
    z-index:1001;
    overflow-y:auto;
    box-shadow:-10px 0 35px rgba(0,0,0,.08);
}

.mobile-menu.active{
    right:0;
}

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:1000;
}

.overlay.active{
    opacity:1;
    visibility:visible;
}

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

@media(max-width:992px){

.nav-menu,
.call-btn,
.appointment-btn{
    display:none;
}

.menu-toggle{
    display:flex;
}

.logo img{
    height:55px;
}

.navbar{
    height:75px;
}

}

@media(max-width:576px){

.mobile-menu{
    width:100%;
}

.logo img{
    height:48px;
}

}




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

.footer{
    background:#0B2545;
    color:#dbe8f2;
    padding:80px 0 0;
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(22,160,133,.08);
    top:-180px;
    right:-150px;
}

.footer::after{
    content:'';
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(45,156,219,.08);
    bottom:-150px;
    left:-120px;
}

.footer .container{
    position:relative;
    z-index:2;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:50px;
}

.footer-logo{
    width:200px;
    margin-bottom:25px;
}

.footer-box p{
    color:#c9d7e3;
    line-height:1.8;
    margin-bottom:25px;
}

.footer-box h3{
    color:#ffffff;
    margin-bottom:25px;
    font-size:22px;
    position:relative;
}

.footer-box h3::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-10px;
    width:50px;
    height:3px;
    background:#16A085;
    border-radius:20px;
}

.footer-box ul{
    list-style:none;
    padding:0;
}

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

.footer-box ul li a{
    color:#dbe8f2;
    text-decoration:none;
    transition:.3s;
}

.footer-box ul li a:hover{
    color:#16A085;
    padding-left:6px;
}

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

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    line-height:1.8;
}

.footer-contact i{
    color:#16A085;
    margin-top:5px;
    min-width:20px;
}

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

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

.footer-social a{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.08);
    color:#fff;
    text-decoration:none;
    transition:.35s;
}

.footer-social a:hover{
    background:#16A085;
    transform:translateY(-5px);
}

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

.footer-bottom{
    margin-top:70px;
    border-top:1px solid rgba(255,255,255,.08);
    padding:22px 0;
}

.footer-bottom .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.footer-bottom p{
    color:#b8c8d8;
    margin:0;
    font-size:15px;
}

.footer-bottom a{
    color:#16A085;
    text-decoration:none;
    font-weight:600;
}

.footer-bottom a:hover{
    color:#2D9CDB;
}

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

@media(max-width:992px){

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

}

@media(max-width:768px){

.footer{
    padding-top:60px;
}

.footer-grid{
    grid-template-columns:1fr;
    gap:40px;
}

.footer-bottom .container{
    flex-direction:column;
    text-align:center;
}

.footer-logo{
    width:170px;
}

}


/*==================================================
HERO SECTION
==================================================*/

.hero{
    position:relative;
    padding:100px 0;
    background:linear-gradient(135deg,#F5FAFD 0%,#EAF7F5 100%);
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    background:rgba(15,76,129,.05);
    border-radius:50%;
    top:-250px;
    right:-180px;
}

.hero::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(22,160,133,.08);
    border-radius:50%;
    bottom:-150px;
    left:-120px;
}

.hero-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    position:relative;
    z-index:2;
}

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

.hero-left{
    flex:1;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:50px;
    background:#EAF7F5;
    color:#16A085;
    font-weight:600;
    margin-bottom:30px;
}

.hero-badge i{
    font-size:18px;
}

.hero h1{
    font-size:62px;
    line-height:1.15;
    font-weight:800;
    color:#1F2937;
    margin-bottom:25px;
}

.hero h1 span{
    color:#0F4C81;
}

.hero p{
    font-size:18px;
    color:#6B7280;
    line-height:1.9;
    margin-bottom:40px;
    max-width:620px;
}

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

.hero-buttons{
    display:flex;
    gap:20px;
    margin-bottom:40px;
}

.btn-primary{

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

    padding:16px 35px;

    border-radius:50px;

    background:linear-gradient(135deg,#0F4C81,#16A085);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

    box-shadow:0 15px 35px rgba(15,76,129,.18);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

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

    padding:16px 35px;

    border-radius:50px;

    border:2px solid #16A085;

    color:#16A085;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-secondary:hover{

    background:#16A085;

    color:#fff;

}

/*==================================================
FEATURES
==================================================*/

.hero-features{

    display:flex;
    flex-wrap:wrap;
    gap:30px;

}

.hero-features div{

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

    color:#374151;

    font-weight:600;

}

.hero-features i{

    color:#16A085;

}

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

.hero-right{

    flex:1;
    position:relative;

}

.hero-image{

    border-radius:35px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(15,76,129,.15);

}

.hero-image img{

    width:100%;
    display:block;

}

/*==================================================
FLOATING CARDS
==================================================*/

.floating-card{

    position:absolute;

    background:#fff;

    border-radius:20px;

    padding:18px 22px;

    box-shadow:0 20px 40px rgba(15,76,129,.12);

    text-align:center;

    width:170px;

    animation:float 4s ease-in-out infinite;

}

.floating-card i{

    font-size:28px;

    color:#16A085;

    margin-bottom:10px;

}

.floating-card h4{

    font-size:26px;

    color:#0F4C81;

    margin-bottom:5px;

}

.floating-card p{

    font-size:14px;

    color:#6B7280;

    margin:0;

}

.card-one{

    top:30px;
    left:-60px;

}

.card-two{

    right:-50px;
    top:160px;

}

.card-three{

    left:20px;
    bottom:20px;

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

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

@media(max-width:992px){

.hero{

    padding:80px 0;

}

.hero-content{

    flex-direction:column-reverse;

    text-align:center;

}

.hero h1{

    font-size:46px;

}

.hero p{

    margin:auto auto 35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;

}

.card-one{

    left:0;

}

.card-two{

    right:0;

}

.card-three{

    left:50%;
    transform:translateX(-50%);

}

}

@media(max-width:768px){

.hero h1{

    font-size:36px;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary,
.btn-secondary{

    width:100%;

}

.floating-card{

    display:none;

}

}

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

.stats{

    margin-top:-70px;
    position:relative;
    z-index:10;

}

.stats-wrapper{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.stat-card{

    background:#fff;

    border-radius:25px;

    padding:35px 25px;

    text-align:center;

    box-shadow:0 20px 45px rgba(15,76,129,.10);

    transition:.35s;

    border:1px solid #E8EEF5;

}

.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(15,76,129,.15);

}

.stat-icon{

    width:80px;
    height:80px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#0F4C81,#16A085);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}

.stat-icon i{

    color:#fff;

    font-size:30px;

}

.stat-card h2{

    font-size:42px;

    color:#0F4C81;

    margin-bottom:10px;

    font-weight:800;

}

.stat-card p{

    color:#6B7280;

    font-size:17px;

    font-weight:500;

}

/*=========================================
Responsive
=========================================*/

@media(max-width:992px){

.stats{

    margin-top:60px;

}

.stats-wrapper{

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

}

}

@media(max-width:576px){

.stats-wrapper{

    grid-template-columns:1fr;

}

.stat-card{

    padding:30px;

}

}

/*==================================================
ABOUT
==================================================*/

.about{

    padding:120px 0;
    background:#fff;

}

.about-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;

}

.about-images{

    position:relative;

}

.main-img{

    width:100%;
    border-radius:30px;
    box-shadow:0 25px 60px rgba(15,76,129,.12);

}

.experience-box{

    position:absolute;
    right:-30px;
    bottom:40px;

    background:linear-gradient(135deg,#0F4C81,#16A085);

    color:#fff;

    padding:25px;

    border-radius:20px;

    text-align:center;

    widthexperience-box h2{

    font-size:42px;

}

.experience-box span{

    font-size:15px;

}:170px;

}



.section-tag{
  

    display:inline-block;

    background:#EAF7F5;

    color:#16A085;

    padding:10px 22px;

    border-radius:40px;

    margin-bottom:20px;

    font-weight:600;

}

.about-content h2{

    font-size:48px;

    color:#1F2937;

    margin-bottom:25px;

    line-height:1.3;

}

.about-content p{

    color:#64748B;

    line-height:1.9;

    margin-bottom:35px;

}

.about-list{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;

}

.about-list div{

    display:flex;

    gap:12px;

    font-weight:600;

    color:#374151;

}

.about-list i{

    color:#16A085;

}

@media(max-width:992px){

.about-wrapper{

    grid-template-columns:1fr;

}

.about-content{

    text-align:center;

}

.about-list{

    grid-template-columns:1fr;

}

.experience-box{

    right:20px;

}

}

/* =========================================================
   ABOUT CLINIC - DESKTOP PREMIUM LAYOUT
   MOBILE IS NOT TOUCHED
========================================================= */

@media screen and (min-width: 769px) {

    .about {
        padding: 80px 0 !important;
    }

    .about .container {
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 30px !important;
    }

    .about-wrapper {
        display: grid !important;
        grid-template-columns: 500px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 85px !important;
        max-width: 1180px !important;
        margin: 0 auto !important;
    }


    /* ================= VIDEO ================= */

    .about-images {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .main-video {
        display: block !important;
        width: 500px !important;
        height: 560px !important;

        object-fit: cover !important;

        border-radius: 22px !important;

        box-shadow:
            0 20px 50px rgba(15, 76, 129, 0.14) !important;

        background: #f5fafa !important;
    }


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

    .about-content {
        width: 100% !important;
        max-width: 620px !important;

        padding: 10px 0 !important;
    }


    .section-tag {
        display: inline-block !important;

        margin-bottom: 18px !important;

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

        color: #16A085 !important;
    }


    .about-content h2 {
        margin: 0 0 18px !important;

        font-size: 34px !important;
        line-height: 1.2 !important;

        font-weight: 800 !important;

        color: #242424 !important;

        max-width: 620px !important;
    }


    .about-content p {
        margin: 0 0 20px !important;

        font-size: 16px !important;
        line-height: 1.65 !important;

        color: #444 !important;

        max-width: 610px !important;
    }


    /* ================= CHECK LIST ================= */

    .about-list {
        display: flex !important;
        flex-direction: column !important;

        gap: 9px !important;

        margin: 18px 0 25px !important;
    }

    .about-list > div {
        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        font-size: 15px !important;
        font-weight: 500 !important;

        color: #333 !important;
    }


    .about-list i {
        color: #16A085 !important;

        font-size: 16px !important;
    }


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

    .about-content .btn-primary {
        display: inline-flex !important;

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

        min-width: 155px !important;
        height: 52px !important;

        padding: 0 25px !important;

        border-radius: 30px !important;

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

        box-shadow:
            0 12px 25px rgba(22, 160, 133, 0.20) !important;

        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease !important;
    }

    .about-content .btn-primary:hover {
        transform: translateY(-3px) !important;

        box-shadow:
            0 16px 30px rgba(22, 160, 133, 0.28) !important;
    }


    /* Never show mobile experience on desktop */
    .mobile-experience {
        display: none !important;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media screen and (min-width: 769px) and (max-width: 1100px) {

    .about-wrapper {
        grid-template-columns: 430px minmax(0, 1fr) !important;
        gap: 50px !important;
    }

    .main-video {
        width: 430px !important;
        height: 500px !important;
    }

    .about-content h2 {
        font-size: 29px !important;
    }

    .about-content p {
        font-size: 15px !important;
    }
}

/*==================================================
SERVICES
==================================================*/

.services{

    padding:120px 0;

    background:#F7FBFE;

}

.section-title{

    text-align:center;

    max-width:750px;

    margin:0 auto 70px;

}

.section-title span{

    display:inline-block;

    background:#EAF7F5;

    color:#16A085;

    padding:10px 25px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:20px;

}

.section-title h2{

    font-size:48px;

    color:#1F2937;

    margin-bottom:20px;

}

.section-title p{

    color:#64748B;

    line-height:1.9;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#fff;

    padding:40px 30px;

    border-radius:25px;

    box-shadow:0 15px 45px rgba(15,76,129,.08);

    transition:.4s;

    border:1px solid #E8EEF5;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(15,76,129,.15);

}

.service-icon{

    width:75px;

    height:75px;

    border-radius:20px;

    background:linear-gradient(135deg,#0F4C81,#16A085);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.service-icon i{

    color:#fff;

    font-size:30px;

}

.service-card h3{

    margin-bottom:15px;

    color:#1F2937;

    font-size:24px;

}

.service-card p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:25px;

}

.service-card a{

    color:#0F4C81;

    text-decoration:none;

    font-weight:600;

}

.service-card a i{

    margin-left:8px;

    transition:.3s;

}

.service-card:hover a i{

    margin-left:15px;

}

@media(max-width:992px){

.services-grid{

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

}

}

@media(max-width:768px){

.services-grid{

    grid-template-columns:1fr;

}

.section-title h2{

    font-size:36px;

}

}

/*==================================================
WHY CHOOSE US
==================================================*/

.why-us{
    padding:120px 0;
    background:#ffffff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.why-card{
    background:#fff;
    padding:40px 30px;
    border-radius:24px;
    text-align:center;
    border:1px solid #E8EEF5;
    box-shadow:0 15px 40px rgba(15,76,129,.08);
    transition:.4s;
}

.why-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(15,76,129,.15);
}

.why-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    border-radius:50%;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    display:flex;
    justify-content:center;
    align-items:center;
}

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

.why-card h3{
    margin-bottom:15px;
    color:#1F2937;
    font-size:24px;
}

.why-card p{
    color:#64748B;
    line-height:1.8;
}

@media(max-width:992px){

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

}

@media(max-width:768px){

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

}

/*==================================================
MEET THE DOCTOR
==================================================*/

.doctor{
    padding:120px 0;
    background:#F7FBFE;
}

.doctor-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.doctor-image{
    position:relative;
}

.doctor-image img{
    width:100%;
    border-radius:30px;
    box-shadow:0 25px 60px rgba(15,76,129,.15);
}

.doctor-badge{
    position:absolute;
    left:30px;
    bottom:30px;
    background:#fff;
    padding:18px 25px;
    border-radius:15px;
    font-weight:600;
    color:#0F4C81;
    box-shadow:0 15px 35px rgba(15,76,129,.12);
}

.doctor-badge i{
    color:#16A085;
    margin-right:8px;
}

.doctor-content h2{
    font-size:46px;
    margin:15px 0 10px;
    color:#1F2937;
}

.doctor-content h4{
    color:#16A085;
    margin-bottom:25px;
    font-size:22px;
}

.doctor-content p{
    color:#64748B;
    line-height:1.9;
    margin-bottom:35px;
}

.doctor-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-bottom:40px;
}

.doctor-info>div{
    display:flex;
    align-items:flex-start;
    gap:15px;
    background:#fff;
    padding:20px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(15,76,129,.08);
}

.doctor-info i{
    width:55px;
    height:55px;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.doctor-info h5{
    margin-bottom:5px;
    color:#1F2937;
}

.doctor-info p{
    margin:0;
    color:#64748B;
    font-size:15px;
}

@media(max-width:992px){

.doctor-wrapper{
    grid-template-columns:1fr;
}

.doctor-info{
    grid-template-columns:1fr;
}

.doctor-content{
    text-align:center;
}

}

/*==================================================
TREATMENT PROCESS
==================================================*/

.process{

    padding:120px 0;

    background:#ffffff;

}

.process-wrapper{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.process-card{

    position:relative;

    background:#fff;

    border-radius:25px;

    padding:45px 30px;

    text-align:center;

    border:1px solid #E8EEF5;

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

    transition:.35s;

}

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(15,76,129,.15);

}

.process-number{

    position:absolute;

    top:20px;
    right:20px;

    font-size:40px;

    font-weight:800;

    color:#EAF3FA;

}

.process-icon{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#0F4C81,#16A085);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.process-icon i{

    color:#fff;

    font-size:34px;

}

.process-card h3{

    margin-bottom:15px;

    color:#1F2937;

}

.process-card p{

    color:#64748B;

    line-height:1.8;

}

@media(max-width:992px){

.process-wrapper{

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

}

}

@media(max-width:768px){

.process-wrapper{

    grid-template-columns:1fr;

}

}

/*==================================================
VIDEO TESTIMONIALS
==================================================*/

.video-testimonials{

    padding:120px 0;

    background:#ffffff;

}

.testimonial-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.testimonial-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #E8EEF5;

    box-shadow:0 15px 45px rgba(15,76,129,.08);

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(15,76,129,.15);

}

.testimonial-card video{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

    background:#000;

}

.testimonial-content{

    padding:30px;

}

.testimonial-content h3{

    color:#1F2937;

    margin-bottom:15px;

    font-size:22px;

}

.testimonial-content p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:20px;

}

.testimonial-content h4{

    color:#16A085;

    font-size:16px;

    font-weight:600;

}

@media(max-width:992px){

.testimonial-grid{

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

}

}

@media(max-width:768px){

.testimonial-grid{

    grid-template-columns:1fr;

}

.testimonial-card video{

    height:260px;

}

}

/*==================================================
VIDEO TESTIMONIALS
==================================================*/

.testimonial-grid{
    display:flex;
    gap:25px;
    margin-top:60px;
    width:100%;
}

.testimonial-card{
    flex:1;
    min-width:0;
}


/* Video */

.testimonial-card video{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
    background:#000;
}


/* Tablet */

@media(max-width:992px){

.testimonial-grid{
    flex-wrap:wrap;
}

.testimonial-card{
    flex:0 0 calc(50% - 15px);
}

}


/* Mobile */

@media(max-width:768px){

.testimonial-grid{
    flex-direction:column;
}

.testimonial-card{
    width:100%;
}

.testimonial-card video{
    height:450px;
}

}

.doctor-image{
    position:relative;
    overflow:hidden;
    border-radius:25px;
}

.doctor-image video{
    width:100%;
    height:550px;
    object-fit:cover;
    display:block;
    border-radius:25px;
}


/* Mobile */

@media(max-width:768px){

.doctor-image video{
    height:420px;
}

}

/* APPOINTMENT CTA */

.appointment-cta{

padding:100px 0;
background:#F7FBFE;

}


.cta-box{

background:linear-gradient(135deg,#0F4C81,#16A085);
border-radius:30px;
padding:60px;
display:flex;
align-items:center;
justify-content:space-between;
overflow:hidden;
position:relative;

}


.cta-content span{

color:#fff;
font-weight:600;
font-size:16px;

}


.cta-content h2{

color:#fff;
font-size:42px;
margin:20px 0;

}


.cta-content p{

color:#e5f5f5;
max-width:650px;
line-height:1.8;
font-size:17px;

}



.cta-buttons{

display:flex;
gap:15px;
margin-top:30px;
flex-wrap:wrap;

}



.cta-buttons a{

padding:15px 28px;
border-radius:50px;
font-weight:600;
text-decoration:none;
display:flex;
align-items:center;
gap:10px;

}



.cta-primary{

background:#fff;
color:#0F4C81;

}


.cta-secondary{

background:transparent;
color:#fff;
border:2px solid #fff;

}


.cta-whatsapp{

background:#25D366;
color:#fff;

}



.cta-icon i{

font-size:180px;
color:rgba(255,255,255,.15);

}



/* Tablet */

@media(max-width:992px){

.cta-box{

flex-direction:column;
text-align:center;

}


.cta-content p{

margin:auto;

}


.cta-icon{

display:none;

}

}



/* Mobile */

@media(max-width:768px){

.cta-box{

padding:40px 25px;

}


.cta-content h2{

font-size:28px;

}


.cta-buttons{

justify-content:center;

}


.cta-buttons a{

width:100%;
justify-content:center;

}

}


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

.footer{
    background:#0F172A;
    color:#CBD5E1;
    padding-top:80px;
}


.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:40px;
}


/* Footer Logo */

.footer-logo{
    width:180px;
    margin-bottom:20px;
}



.footer-box p{
    line-height:1.8;
    font-size:15px;
    color:#CBD5E1;
}


/* Titles */

.footer-box h3{
    color:#ffffff;
    font-size:20px;
    margin-bottom:25px;
    position:relative;
}


.footer-box h3::after{
    content:"";
    width:45px;
    height:3px;
    background:#16A085;
    position:absolute;
    left:0;
    bottom:-10px;
    border-radius:5px;
}



/* Lists */

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


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



.footer-box ul li a{

    color:#CBD5E1;
    text-decoration:none;
    transition:.3s;

}


.footer-box ul li a:hover{

    color:#16A085;
    padding-left:5px;

}



/* Social */

.footer-social{

display:flex;
gap:12px;
margin-top:25px;

}


.footer-social a{

width:42px;
height:42px;
border-radius:50%;
background:#1E293B;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:18px;
transition:.3s;

}


.footer-social a:hover{

background:#16A085;
transform:translateY(-5px);

}





/* Contact */

.footer-contact li{

display:flex;
gap:12px;
align-items:flex-start;
color:#CBD5E1;

}


.footer-contact i{

color:#16A085;
font-size:18px;
margin-top:4px;

}


.footer-contact a{

color:#CBD5E1;

}





/* Appointment CTA */

.footer-cta{

margin-top:60px;
background:#16A085;
padding:35px 20px;
text-align:center;

}


.footer-cta h3{

color:#fff;
font-size:30px;
margin-bottom:10px;

}


.footer-cta p{

color:#E6FFFA;
margin-bottom:20px;

}


.footer-cta a{

display:inline-flex;
align-items:center;
gap:10px;
background:#fff;
color:#0F4C81;
padding:14px 30px;
border-radius:50px;
font-weight:600;
text-decoration:none;
transition:.3s;

}


.footer-cta a:hover{

transform:translateY(-4px);

}




/* Bottom Footer */

.footer-bottom{

background:#020617;
padding:20px 0;

}


.footer-bottom .container{

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;

}


.footer-bottom p{

margin:0;
font-size:14px;

}



.footer-bottom a{

color:#16A085;
text-decoration:none;

}



.legal-links{

display:flex;
gap:20px;

}




/* WhatsApp Floating */

.whatsapp-float{

position:fixed;
right:25px;
bottom:25px;
width:60px;
height:60px;
background:#25D366;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
z-index:999;
box-shadow:0 10px 25px rgba(0,0,0,.2);

}



/* Tablet */

@media(max-width:992px){

.footer-grid{

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

}


.footer-bottom .container{

flex-direction:column;
text-align:center;

}

}



/* Mobile */

@media(max-width:768px){


.footer{

padding-top:60px;

}


.footer-grid{

grid-template-columns:1fr;
text-align:center;

}


.footer-box h3::after{

left:50%;
transform:translateX(-50%);

}



.footer-social{

justify-content:center;

}



.footer-contact li{

justify-content:center;

}



.footer-cta h3{

font-size:24px;

}


.legal-links{

justify-content:center;
flex-wrap:wrap;

}



.whatsapp-float{

width:55px;
height:55px;
font-size:28px;

}


}


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


/*==================================================
ABOUT PAGE
==================================================*/

/*==================================================
ABOUT PAGE
==================================================*/

/*==================================================
BIOGRAPHY
==================================================*/

.biography-section{
    padding:100px 0;
    background:#fff;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    display:inline-block;
    padding:10px 24px;
    background:#EAF8F6;
    color:#16A085;
    border-radius:50px;
    font-weight:600;
    margin-bottom:15px;
}

.section-title h2{
    font-size:42px;
    color:#0F4C81;
}

.biography-content{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.biography-content p{
    font-size:18px;
    line-height:2;
    color:#555;
    margin-bottom:20px;
}

/*==================================================
AREAS OF CARE
==================================================*/

.care-section{
    padding:100px 0;
    background:#F8FBFD;
}

.care-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.care-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

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

.care-card i{
    width:70px;
    height:70px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
}

.care-card h4{
    color:#0F4C81;
}

/*==================================================
LANGUAGES
==================================================*/

.language-section{
    padding:90px 0;
}

.language-list{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
}

.language-list span{
    padding:14px 28px;
    border-radius:50px;
    background:#F5FAFD;
    border:1px solid #DCEAF2;
    color:#0F4C81;
    font-weight:600;
    transition:.3s;
}

.language-list span:hover{
    background:#16A085;
    color:#fff;
}

/*==================================================
WHY CHOOSE US
==================================================*/

.why-section{
    padding:100px 0;
    background:#F8FBFD;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.why-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

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

.why-card i{
    width:70px;
    height:70px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
}

.why-card h4{
    color:#0F4C81;
    margin-bottom:10px;
}

.why-card p{
    color:#666;
    line-height:1.8;
}

/*==================================================
CTA
==================================================*/

.consultation-section{
    padding:100px 0;
}

.consultation-box{
    padding:70px;
    border-radius:25px;
    text-align:center;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
}

.consultation-box h2{
    font-size:42px;
    margin-bottom:20px;
}

.consultation-box p{
    max-width:700px;
    margin:0 auto 35px;
    line-height:1.8;
}

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

@media(max-width:992px){

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

}

@media(max-width:768px){

.section-title h2{
    font-size:32px;
}

.care-grid,
.why-grid{
    grid-template-columns:1fr;
}

.consultation-box{
    padding:40px 25px;
}

.biography-content p{
    font-size:16px;
}

.language-list{
    gap:12px;
}

}

/*=========================================
ABOUT PAGE
=========================================*/

.page-banner{
    position:relative;
    padding:130px 0;
    background:linear-gradient(rgba(15,76,129,.88),rgba(22,160,133,.88)),
    url("../images/about-banner.jpg") center/cover no-repeat;
    text-align:center;
    overflow:hidden;
}

.banner-content{
    max-width:900px;
    margin:auto;
    color:#fff;
}

.banner-content .section-tag{
    display:inline-block;
    padding:10px 24px;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.3);
    border-radius:50px;
    font-weight:600;
    margin-bottom:20px;
    backdrop-filter:blur(8px);
}

.banner-content h1{
    font-size:56px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:25px;
}

.banner-content p{
    font-size:18px;
    line-height:1.9;
    max-width:760px;
    margin:auto;
    opacity:.95;
}

/*=========================================
COMMON SECTION
=========================================*/

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    display:inline-block;
    background:#EAF8F6;
    color:#16A085;
    padding:10px 24px;
    border-radius:40px;
    font-weight:600;
    margin-bottom:15px;
}

.section-title h2{
    font-size:42px;
    color:#0F4C81;
    margin-bottom:15px;
}

.section-title p{
    max-width:700px;
    margin:auto;
    color:#64748B;
    line-height:1.8;
}

/*=========================================
DOCTOR SECTION
=========================================*/

.doctor{
    padding:100px 0;
    background:#fff;
}

.doctor-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.doctor-image{
    position:relative;
}

.doctor-image video{
    width:100%;
    display:block;
    border-radius:25px;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.doctor-badge{
    position:absolute;
    left:25px;
    bottom:25px;
    background:#16A085;
    color:#fff;
    padding:14px 24px;
    border-radius:50px;
    font-weight:600;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.doctor-content .section-tag{
    display:inline-block;
    padding:8px 20px;
    border-radius:50px;
    background:#EAF8F6;
    color:#16A085;
    font-weight:600;
    margin-bottom:20px;
}

.doctor-content h2{
    font-size:42px;
    color:#0F4C81;
    margin-bottom:8px;
}

.doctor-content h4{
    color:#16A085;
    margin-bottom:25px;
    font-size:22px;
}

.doctor-content p{
    color:#555;
    line-height:1.9;
    margin-bottom:35px;
}

.doctor-btns{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-block;
    padding:15px 34px;
    border-radius:50px;
    text-decoration:none;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    font-weight:600;
    transition:.35s;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(15,76,129,.25);
}

.btn-outline{
    display:inline-block;
    padding:15px 34px;
    border-radius:50px;
    border:2px solid #16A085;
    color:#16A085;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.btn-outline:hover{
    background:#16A085;
    color:#fff;
}

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

@media(max-width:992px){

.banner-content h1{
    font-size:40px;
}

.doctor-wrapper{
    grid-template-columns:1fr;
}

.doctor-content{
    text-align:center;
}

.doctor-btns{
    justify-content:center;
}

}

@media(max-width:576px){

.page-banner{
    padding:90px 0;
}

.banner-content h1{
    font-size:30px;
}

.section-title h2{
    font-size:30px;
}

}


/*=========================================
ABOUT PAGE
=========================================*/

/*==================================================
ABOUT PAGE CSS
Part 1
==================================================*/

:root{

    --primary:#0F4C81;
    --secondary:#16A085;
    --white:#ffffff;
    --dark:#1E293B;
    --text:#64748B;
    --light:#F8FAFC;
    --border:#E5E7EB;
    --shadow:0 15px 40px rgba(0,0,0,.08);
    --radius:20px;

}

/*=========================================
PAGE BANNER
=========================================*/

.page-banner{

    position:relative;
    padding:130px 0;
    background:linear-gradient(rgba(15,76,129,.90),rgba(22,160,133,.85)),
    url("../images/about-banner.jpg") center center/cover no-repeat;

}

.page-banner::before{

    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.15);

}

.banner-content{

    position:relative;
    z-index:2;
    max-width:900px;
    margin:auto;
    text-align:center;
    color:#fff;

}

.banner-content .section-tag{

    display:inline-block;
    padding:10px 24px;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.30);
    border-radius:50px;
    font-weight:600;
    margin-bottom:25px;
    backdrop-filter:blur(10px);

}

.banner-content h1{

    font-size:56px;
    line-height:1.2;
    margin-bottom:25px;
    font-weight:800;

}

.banner-content p{

    font-size:18px;
    line-height:1.9;
    opacity:.95;
    max-width:760px;
    margin:auto;

}

/*=========================================
COMMON SECTION
=========================================*/

section{

    padding:100px 0;

}

.section-title{

    text-align:center;
    margin-bottom:60px;

}

.section-title span{

    display:inline-block;
    background:#EAF8F6;
    color:var(--secondary);
    padding:10px 24px;
    border-radius:40px;
    font-weight:600;
    margin-bottom:15px;

}

.section-title h2{

    font-size:42px;
    color:var(--primary);
    margin-bottom:18px;

}

.section-title p{

    max-width:700px;
    margin:auto;
    color:var(--text);
    line-height:1.8;

}

/*=========================================
DOCTOR SECTION
=========================================*/

.doctor{

    background:#fff;

}

.doctor-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

/* Doctor Video */

.doctor-image{

    position:relative;

}

.doctor-image video{

    width:100%;
    border-radius:25px;
    display:block;
    box-shadow:var(--shadow);

}

.doctor-badge{

    position:absolute;
    left:25px;
    bottom:25px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    padding:14px 24px;
    border-radius:50px;
    font-weight:600;
    box-shadow:0 15px 30px rgba(0,0,0,.15);

}

.doctor-badge i{

    margin-right:8px;

}

/* Doctor Content */

.doctor-content .section-tag{

    display:inline-block;
    background:#EAF8F6;
    color:var(--secondary);
    padding:10px 24px;
    border-radius:50px;
    font-weight:600;
    margin-bottom:20px;

}

.doctor-content h2{

    font-size:44px;
    color:var(--primary);
    margin-bottom:10px;

}

.doctor-content h4{

    color:var(--secondary);
    margin-bottom:25px;
    font-size:22px;
    font-weight:600;

}

.doctor-content p{

    color:var(--text);
    line-height:1.9;
    margin-bottom:20px;

}

/*=========================================
DOCTOR INFO
=========================================*/

.doctor-info{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin:35px 0;

}

.info-card{

    display:flex;
    align-items:center;
    gap:18px;
    padding:20px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    transition:.35s;
    box-shadow:0 8px 20px rgba(0,0,0,.04);

}

.info-card:hover{

    transform:translateY(-6px);
    border-color:var(--secondary);

}

.info-card i{

    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;

}

.info-card h5{

    color:var(--primary);
    margin-bottom:5px;
    font-size:17px;

}

.info-card p{

    margin:0;
    color:var(--text);
    font-size:15px;

}

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

.doctor-btns{

    display:flex;
    gap:18px;
    flex-wrap:wrap;

}

.btn-primary{

    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 34px;
    border-radius:50px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-outline{

    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 34px;
    border-radius:50px;
    border:2px solid var(--secondary);
    color:var(--secondary);
    text-decoration:none;
    font-weight:600;
    transition:.35s;

}

.btn-outline:hover{

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

}

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

@media(max-width:991px){

.doctor-wrapper{

grid-template-columns:1fr;

}

.doctor-content{

text-align:center;

}

.doctor-btns{

justify-content:center;

}

}

@media(max-width:768px){

.page-banner{

padding:90px 0;

}

.banner-content h1{

font-size:34px;

}

.banner-content p{

font-size:16px;

}

.section-title h2{

font-size:30px;

}

.doctor-info{

grid-template-columns:1fr;

}

.doctor-btns{

flex-direction:column;

}

.btn-primary,
.btn-outline{

justify-content:center;
width:100%;

}

}

/*=========================================
ABOUT CLINIC
=========================================*/

.about-clinic{
    background:#F8FBFD;
}

.about-clinic-wrapper{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:50px;
    align-items:center;
}

.about-clinic-content p{
    color:#64748B;
    line-height:1.9;
    margin-bottom:22px;
    font-size:17px;
}

.about-clinic-content strong{
    color:#0F4C81;
}

.clinic-highlights{
    display:grid;
    gap:25px;
}

.highlight-card{
    background:#fff;
    padding:30px;
    border-radius:18px;
    border:1px solid #E5E7EB;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.highlight-card:hover{
    transform:translateY(-8px);
    border-color:#16A085;
}

.highlight-card i{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    font-size:28px;
    margin-bottom:18px;
}

.highlight-card h4{
    color:#0F4C81;
    margin-bottom:10px;
    font-size:21px;
}

.highlight-card p{
    color:#64748B;
    line-height:1.7;
}

/*=========================================
BIOGRAPHY
=========================================*/

.biography{
    background:#fff;
}

.biography-wrapper{
    max-width:950px;
    margin:auto;
}

.biography-content p{
    font-size:18px;
    color:#555;
    line-height:2;
    margin-bottom:25px;
    text-align:center;
}

/*=========================================
QUALIFICATION
=========================================*/

.qualification{
    background:#F8FBFD;
}

.qualification-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.qualification-card{
    background:#fff;
    border-radius:20px;
    padding:40px 30px;
    text-align:center;
    transition:.35s;
    border:1px solid #E5E7EB;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.qualification-card:hover{
    transform:translateY(-8px);
    border-color:#16A085;
}

.qualification-card i{
    width:80px;
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    font-size:32px;
    margin-bottom:20px;
}

.qualification-card h4{
    color:#0F4C81;
    margin-bottom:12px;
    font-size:21px;
}

.qualification-card p{
    color:#64748B;
    line-height:1.8;
}

/*=========================================
LANGUAGES
=========================================*/

.languages{
    background:#fff;
}

.language-list{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
}

.language-list span{
    padding:15px 30px;
    border-radius:50px;
    background:#EAF8F6;
    color:#0F4C81;
    font-weight:600;
    border:1px solid #D9ECE7;
    transition:.3s;
}

.language-list span:hover{
    background:#16A085;
    color:#fff;
    transform:translateY(-4px);
}

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

@media(max-width:991px){

.about-clinic-wrapper{
    grid-template-columns:1fr;
}

.clinic-highlights{
    margin-top:20px;
}

}

@media(max-width:768px){

.about-clinic,
.biography,
.qualification,
.languages{
    padding:70px 0;
}

.biography-content p{
    font-size:16px;
    text-align:left;
}

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

.language-list{
    gap:12px;
}

.language-list span{
    width:100%;
    text-align:center;
}

}

/*=========================================
AREAS OF EXPERTISE
=========================================*/

.expertise{
    background:#F8FBFD;
}

.expertise-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.expertise-card{
    background:#fff;
    border-radius:20px;
    padding:35px 30px;
    text-align:center;
    border:1px solid #E8EEF3;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.expertise-card:hover{
    transform:translateY(-10px);
    border-color:#16A085;
    box-shadow:0 20px 40px rgba(22,160,133,.15);
}

.expertise-card i{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:32px;
}

.expertise-card h4{
    color:#0F4C81;
    margin-bottom:12px;
    font-size:21px;
}

.expertise-card p{
    color:#64748B;
    line-height:1.8;
}

/*=========================================
TREATMENTS & SERVICES
=========================================*/

.services-section{
    background:#fff;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.service-card{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.service-card:hover{
    transform:translateY(-8px);
    background:linear-gradient(135deg,#0F4C81,#16A085);
}

.service-card:hover h4,
.service-card:hover p,
.service-card:hover i{
    color:#fff;
}

.service-card i{
    width:75px;
    height:75px;
    margin:auto;
    margin-bottom:18px;
    border-radius:50%;
    background:#F0F9F8;
    color:#16A085;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    transition:.3s;
}

.service-card:hover i{
    background:rgba(255,255,255,.20);
}

.service-card h4{
    color:#0F4C81;
    font-size:20px;
    margin-bottom:10px;
    transition:.3s;
}

.service-card p{
    color:#64748B;
    line-height:1.8;
    transition:.3s;
}

/*=========================================
WHY CHOOSE US
=========================================*/

.why-us{
    background:#F8FBFD;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.why-card{
    background:#fff;
    padding:40px 30px;
    border-radius:20px;
    border:1px solid #E5E7EB;
    text-align:center;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.why-card:hover{
    transform:translateY(-10px);
    border-color:#16A085;
}

.why-card i{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    font-size:30px;
}

.why-card h4{
    color:#0F4C81;
    margin-bottom:15px;
    font-size:22px;
}

.why-card p{
    color:#64748B;
    line-height:1.9;
}

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

@media(max-width:768px){

.expertise,
.services-section,
.why-us{
    padding:70px 0;
}

.expertise-grid,
.services-grid,
.why-grid{
    grid-template-columns:1fr;
}

.expertise-card,
.service-card,
.why-card{
    padding:30px 20px;
}

.expertise-card h4,
.service-card h4,
.why-card h4{
    font-size:20px;
}

}

/*=========================================
MISSION & VISION
=========================================*/

.mission-vision{
    background:#ffffff;
}

.mission-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
}

.mission-card{
    background:#fff;
    padding:45px 35px;
    border-radius:20px;
    border:1px solid #E5E7EB;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.mission-card:hover{
    transform:translateY(-8px);
    border-color:#16A085;
}

.mission-card i{
    width:80px;
    height:80px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    font-size:32px;
    margin-bottom:20px;
}

.mission-card h3{
    color:#0F4C81;
    margin-bottom:15px;
    font-size:28px;
}

.mission-card p{
    color:#64748B;
    line-height:1.9;
}

/*=========================================
CLINIC INFORMATION
=========================================*/

.clinic-info{
    background:#F8FBFD;
}

.clinic-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.clinic-card{
    background:#fff;
    padding:35px 25px;
    border-radius:20px;
    text-align:center;
    border:1px solid #E5E7EB;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.clinic-card:hover{
    transform:translateY(-8px);
    border-color:#16A085;
}

.clinic-card i{
    width:75px;
    height:75px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    margin-bottom:20px;
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    font-size:30px;
}

.clinic-card h4{
    color:#0F4C81;
    margin-bottom:12px;
    font-size:20px;
}

.clinic-card p,
.clinic-card a{
    color:#64748B;
    line-height:1.8;
    text-decoration:none;
}

.clinic-card a:hover{
    color:#16A085;
}

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

.statistics{
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    text-align:center;
}

.stat-box{
    padding:30px;
}

.stat-box h2{
    font-size:55px;
    font-weight:800;
    margin-bottom:10px;
}

.stat-box p{
    font-size:18px;
    opacity:.95;
}

/*=========================================
CTA
=========================================*/

.about-cta{
    padding:100px 0;
    background:#ffffff;
}

.cta-box{
    background:linear-gradient(135deg,#0F4C81,#16A085);
    color:#fff;
    padding:70px;
    border-radius:30px;
    text-align:center;
    box-shadow:0 20px 50px rgba(15,76,129,.25);
}

.cta-box .section-tag{
    display:inline-block;
    padding:10px 24px;
    border-radius:50px;
    background:rgba(255,255,255,.15);
    color:#fff;
    margin-bottom:20px;
    font-weight:600;
}

.cta-box h2{
    font-size:46px;
    margin-bottom:20px;
    color:#fff;
}

.cta-box p{
    max-width:760px;
    margin:0 auto 35px;
    line-height:1.9;
    opacity:.95;
}

.cta-box .doctor-btns{
    justify-content:center;
}

.cta-box .btn-primary{
    background:#fff;
    color:#0F4C81;
}

.cta-box .btn-primary:hover{
    background:#F3F4F6;
}

.cta-box .btn-outline{
    border:2px solid #fff;
    color:#fff;
}

.cta-box .btn-outline:hover{
    background:#fff;
    color:#0F4C81;
}

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

@media(max-width:991px){

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

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

.cta-box{
    padding:50px 30px;
}

}

@media(max-width:768px){

.mission-vision,
.clinic-info,
.statistics,
.about-cta{
    padding:70px 0;
}

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

.stats-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.stat-box h2{
    font-size:42px;
}

.cta-box h2{
    font-size:32px;
}

.cta-box{
    padding:40px 20px;
}

.cta-box .doctor-btns{
    flex-direction:column;
}

.cta-box .btn-primary,
.cta-box .btn-outline{
    width:100%;
    justify-content:center;
}

}


/*=========================================
CONTACT PAGE CSS
=========================================*/


/* PAGE BANNER */

.page-banner{
    background:linear-gradient(135deg,#0F4C81,#16A085);
    padding:100px 0;
    text-align:center;
    color:#fff;
}

.banner-content{
    max-width:850px;
    margin:auto;
}

.section-tag{
    display:inline-block;
    background:rgba(255,255,255,0.15);
    padding:8px 20px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.page-banner h1{
    font-size:48px;
    margin-bottom:20px;
}

.page-banner p{
    font-size:18px;
    line-height:1.7;
}



/* COMMON SECTION */

.contact-info,
.contact-form-section,
.map-section,
.why-contact,
.faq-section,
.social-section,
.contact-cta{
    padding:90px 0;
}


.section-title{
    text-align:center;
    max-width:700px;
    margin:0 auto 50px;
}

.section-title span{
    color:#16A085;
    font-weight:700;
    text-transform:uppercase;
    font-size:14px;
}

.section-title h2{
    font-size:38px;
    color:#0F4C81;
    margin:15px 0;
}

.section-title p{
    color:#666;
    line-height:1.7;
}



/* CONTACT CARDS */

.contact-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}


.contact-card{
    background:#fff;
    padding:35px 25px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.3s;
}


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


.contact-card i{
    width:70px;
    height:70px;
    background:#e8f7f4;
    color:#16A085;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:28px;
}


.contact-card h4{
    margin:20px 0 10px;
    color:#0F4C81;
    font-size:20px;
}


.contact-card p{
    color:#666;
    line-height:1.7;
}


.contact-card a{
    display:inline-block;
    margin-top:15px;
    color:#16A085;
    font-weight:600;
}



/* APPOINTMENT FORM */


.contact-wrapper{
    display:grid;
    grid-template-columns:40% 60%;
    gap:40px;
    background:#f7fbfc;
    padding:50px;
    border-radius:30px;
}


.contact-content h2{
    font-size:40px;
    color:#0F4C81;
}


.contact-content p{
    color:#666;
    line-height:1.8;
}


.contact-form{
    background:#fff;
    padding:35px;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}


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


.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#333;
}


.form-group input,
.form-group select,
.form-group textarea{

    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:12px;
    outline:none;
    font-size:15px;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

border-color:#16A085;

}



.btn-primary{

background:#16A085;
color:#fff;
padding:15px 35px;
border-radius:30px;
border:none;
font-weight:600;
cursor:pointer;
display:inline-block;
transition:.3s;

}


.btn-primary:hover{

background:#0F4C81;

}



/* MAP */

.map-wrapper iframe{

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

}



/* WHY CONTACT */


.why-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}


.why-card{

background:#fff;
padding:35px 25px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.why-card i{

font-size:35px;
color:#16A085;
margin-bottom:20px;

}


.why-card h4{

color:#0F4C81;

}


.why-card p{

color:#666;

}



/* FAQ */


.faq-container{

max-width:900px;
margin:auto;

}


.faq-item{

background:#fff;
padding:25px;
margin-bottom:20px;
border-radius:15px;
box-shadow:0 8px 25px rgba(0,0,0,.07);

}


.faq-item h4{

color:#0F4C81;
margin-bottom:10px;

}


.faq-item p{

color:#666;
line-height:1.7;

}



/* SOCIAL */


.social-grid{

display:flex;
justify-content:center;
gap:25px;

}


.social-grid a{

width:180px;
padding:18px;
background:#fff;
border-radius:15px;
text-align:center;
color:#0F4C81;
font-weight:600;
box-shadow:0 10px 25px rgba(0,0,0,.08);

}


.social-grid i{

display:block;
font-size:30px;
margin-bottom:10px;
color:#16A085;

}



/* CTA */


.cta-box{

background:linear-gradient(135deg,#0F4C81,#16A085);
color:white;
padding:60px;
border-radius:30px;
text-align:center;

}


.cta-box h2{

font-size:42px;

}


.cta-box p{

max-width:750px;
margin:20px auto;
line-height:1.8;

}


.doctor-btns{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;

}


.btn-outline{

padding:14px 30px;
border:2px solid white;
border-radius:30px;
color:white;
font-weight:600;

}


.btn-outline:hover{

background:white;
color:#0F4C81;

}



/* RESPONSIVE */


@media(max-width:992px){

.contact-grid,
.why-grid{

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

}


.contact-wrapper{

grid-template-columns:1fr;

}


.page-banner h1{

font-size:38px;

}

}



@media(max-width:600px){


.contact-grid,
.why-grid{

grid-template-columns:1fr;

}


.contact-info,
.contact-form-section,
.map-section,
.why-contact,
.faq-section,
.social-section,
.contact-cta{

padding:60px 15px;

}


.section-title h2{

font-size:30px;

}


.contact-wrapper{

padding:20px;

}


.contact-form{

padding:20px;

}


.social-grid{

flex-direction:column;

}


.social-grid a{

width:100%;

}


.cta-box{

padding:35px 20px;

}


.cta-box h2{

font-size:30px;

}

}


/*=========================================
PAGE BANNER
=========================================*/

.page-banner{
    position: relative;
    padding: 140px 0 90px;
    background: linear-gradient(rgba(15,76,129,.90), rgba(15,76,129,.90)),
                url('../images/page-banner/testimonials-banner.jpg') center center/cover no-repeat;
}

.page-banner-content{
    max-width: 750px;
    color: #fff;
}

.page-banner-content .section-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.page-banner-content h1{
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.page-banner-content p{
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,.9);
    margin-bottom: 30px;
}

.breadcrumb{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.breadcrumb a{
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.breadcrumb a:hover{
    color: #4fd1c5;
}

.breadcrumb span{
    color: rgba(255,255,255,.85);
}


/*=========================================
VIDEO TESTIMONIALS
=========================================*/


.main-video{
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    display: block;
}


/* =====================================================
   SERVICES PAGE
===================================================== */


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

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    padding:8px;
    cursor:pointer;
}

.menu-toggle span{
    display:block;
    width:25px;
    height:2px;
    margin:5px auto;
    background:#0F4C81;
    border-radius:5px;
    transition:.3s;
}


/* =====================================================
   MOBILE MENU PANEL
===================================================== */

.mobile-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:350px;
    max-width:90%;
    height:100vh;
    background:#ffffff;
    z-index:10001;
    box-shadow:-15px 0 45px rgba(0,0,0,.15);
    transition:right .35s ease;
    overflow-y:auto;
}

.mobile-menu.active{
    right:0;
}


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

.mobile-header{
    height:78px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #e8eeee;
    background:#ffffff;
}

.mobile-logo img{
    width:145px;
    height:auto;
    display:block;
}

.close-menu{
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#F1F8F6;
    color:#0F4C81;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    cursor:pointer;
}


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

.mobile-navigation{
    padding:10px 20px 25px;
}

.mobile-navigation ul{
    list-style:none;
    padding:0;
    margin:0;
}

.mobile-navigation > ul > li{
    border-bottom:1px solid #edf2f1;
}

.mobile-navigation > ul > li > a{
    min-height:54px;
    display:flex;
    align-items:center;
    color:#173D45;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:.2s;
}

.mobile-navigation > ul > li > a:hover,
.mobile-navigation > ul > li > a.active{
    color:#16A085;
}


/* =====================================================
   MOBILE SERVICES HEADER
===================================================== */

.mobile-services-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.mobile-services-header > a{
    flex:1;
    min-height:54px;
    display:flex;
    align-items:center;
    color:#173D45;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
}

.mobile-services-header > a:hover,
.mobile-services-header > a.active{
    color:#16A085;
}


/* =====================================================
   SERVICES ARROW
===================================================== */

.services-toggle{
    width:48px;
    height:48px;
    border:0;
    background:transparent;
    color:#16A085;
    cursor:pointer;
    font-size:13px;
}

.services-toggle i{
    transition:.3s ease;
}

.services-toggle.active i{
    transform:rotate(180deg);
}


/* =====================================================
   SERVICE SUB MENU
===================================================== */

.mobile-services-list{
    display:none;
    padding:0 0 10px 12px !important;
}

.mobile-services-list.active{
    display:block;
}

.mobile-services-list li{
    border-left:2px solid #D9EEE8;
}

.mobile-services-list li a{
    display:block;
    padding:10px 12px;
    color:#637B80;
    text-decoration:none;
    font-size:13px;
    line-height:1.45;
    transition:.2s;
}

.mobile-services-list li a:hover{
    color:#16A085;
    background:#F3FAF8;
}


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

.mobile-navigation .mobile-appointment{
    border:0;
    margin-top:18px;
}

.mobile-appointment a{
    min-height:50px !important;
    justify-content:center;
    gap:8px;
    border-radius:10px;
    background:linear-gradient(
        135deg,
        #0F4C81,
        #16A085
    );
    color:#ffffff !important;
    box-shadow:0 8px 20px rgba(15,76,129,.15);
}


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

.mobile-contact{
    margin:0 20px 25px;
    padding:15px;
    border-radius:12px;
    background:#F3FAF8;
}

.mobile-contact a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    color:#315C63;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.mobile-contact i{
    width:25px;
    color:#16A085;
    text-align:center;
}


/* =====================================================
   OVERLAY
===================================================== */

.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(8,31,38,.5);
    z-index:10000;
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
}


/* Prevent background scrolling */

body.menu-open{
    overflow:hidden;
}


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

@media(max-width:850px){

    .nav-menu{
        display:none;
    }

    .appointment-btn{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .nav-right{
        gap:8px;
    }

    .call-btn{
        display:flex;
    }

}


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

@media(max-width:480px){

    .mobile-menu{
        width:100%;
        max-width:100%;
    }

    .mobile-header{
        padding:0 18px;
    }

    .mobile-navigation{
        padding-left:18px;
        padding-right:18px;
    }

}

/* =====================================================
   PREMIUM MOBILE SOCIAL BAR
===================================================== */

.mobile-social-bar {

    position: fixed;

    left: 0;
    top: 52%;

    transform: translateY(-50%);

    z-index: 9999;

    display: flex;
    flex-direction: column;

    gap: 3px;

    padding: 4px 4px 4px 0;

}


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

.mobile-social-bar a {

    width: 42px;
    height: 42px;

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

    border-radius: 0 10px 10px 0;

    text-decoration: none !important;

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

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

}


.mobile-social-bar a:hover {

    transform: translateX(3px);

    box-shadow:
        0 6px 16px rgba(0,0,0,.18);

}


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

.mobile-social-bar svg {

    width: 19px;
    height: 19px;

}


/* =====================================================
   FACEBOOK
===================================================== */

.social-facebook {

    background: #1877F2;

}


.social-facebook svg {

    fill: #FFFFFF;

}


/* =====================================================
   INSTAGRAM
===================================================== */

.social-instagram {

    background:
        linear-gradient(
            135deg,
            #833AB4,
            #E1306C,
            #F77737
        );

}


.social-instagram svg {

    fill: none;

    stroke: #FFFFFF;

    stroke-width: 2;

}


.social-instagram .instagram-dot {

    fill: #FFFFFF;

    stroke: none;

}


/* =====================================================
   YOUTUBE
===================================================== */

.social-youtube {

    background: #FF0000;

}


.social-youtube svg {

    fill: #FFFFFF;

    stroke: none;

}


.social-youtube .youtube-play {

    fill: #FF0000;

}


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

@media (max-width: 600px) {

    .mobile-social-bar {

        top: 53%;

    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 380px) {

    .mobile-social-bar a {

        width: 38px;
        height: 38px;

        border-radius:
            0 9px 9px 0;

    }


    .mobile-social-bar svg {

        width: 17px;
        height: 17px;

    }

}


.testimonial-video {
    display: block;
    width: 100%;
    height: 300px;
    background: #111;
    object-fit: cover;
    border: 0;
}

@media (max-width: 768px) {

    .testimonial-video {
        height: 240px;
    }

}

/* =========================================
   WHY CHOOSE US
========================================= */

.why-us {
    width: 100%;
    padding: 90px 0;
    background: #f6fafc;
}

.why-us .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}


/* =========================================
   SECTION TITLE
========================================= */

.why-us .section-title {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.why-us .section-title span {
    display: inline-block;
    margin-bottom: 12px;
    color: #16a085;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.why-us .section-title h2 {
    margin: 0 0 18px;
    color: #0f4c81;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
}

.why-us .section-title p {
    margin: 0 auto;
    max-width: 700px;
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   FEATURES GRID
========================================= */

.why-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}


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

.why-feature {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 30px;
    background: #ffffff;
    border: 1px solid #e2edf1;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 76, 129, 0.06);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.why-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(22, 160, 133, 0.35);
    box-shadow: 0 18px 40px rgba(15, 76, 129, 0.11);
}


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

.why-icon {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;

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

    background: #eaf7f5;
    color: #16a085;

    border-radius: 16px;
    font-size: 25px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.why-feature:hover .why-icon {
    background: #16a085;
    color: #ffffff;
    transform: scale(1.05);
}


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

.why-content {
    flex: 1;
}

.why-content h3 {
    margin: 2px 0 10px;
    color: #0f4c81;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 750;
}

.why-content p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.75;
}


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

@media (max-width: 900px) {

    .why-us {
        padding: 75px 0;
    }

    .why-us .section-title h2 {
        font-size: 32px;
    }

    .why-features {
        gap: 20px;
    }

    .why-feature {
        padding: 25px;
        gap: 18px;
    }

}


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

@media (max-width: 768px) {

    .why-us {
        padding: 65px 0;
    }

    .why-us .container {
        padding: 0 18px;
    }

    .why-us .section-title {
        margin-bottom: 40px;
    }

    .why-us .section-title span {
        font-size: 12px;
        letter-spacing: 1.2px;
    }

    .why-us .section-title h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .why-us .section-title p {
        font-size: 15px;
        line-height: 1.7;
    }

    .why-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .why-feature {
        padding: 22px;
        gap: 17px;
        border-radius: 16px;
    }

    .why-icon {
        flex: 0 0 54px;
        width: 54px;
        height: 54px;
        border-radius: 14px;
        font-size: 21px;
    }

    .why-content h3 {
        font-size: 18px;
    }

    .why-content p {
        font-size: 14px;
        line-height: 1.65;
    }

}


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

@media (max-width: 480px) {

    .why-us {
        padding: 55px 0;
    }

    .why-us .section-title h2 {
        font-size: 25px;
    }

    .why-feature {
        padding: 20px;
        gap: 14px;
    }

    .why-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        font-size: 19px;
        border-radius: 12px;
    }

    .why-content h3 {
        font-size: 17px;
    }

    .why-content p {
        font-size: 13.5px;
    }

}