/* =====================================================
   01. GLOBAL STYLES
===================================================== */

body{
    font-family:'Poppins',sans-serif;
    color:#444;
    line-height:1.8;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5{
    font-family:'Playfair Display',serif;
    font-weight:700;
}

.py-100{
    padding:100px 0;
}
/*==================================
COMMON INNER PAGE HERO
==================================*/

.inner-page-hero{
    background:linear-gradient(
        135deg,
        #0A2E6D 0%,
        #123f92 100%
    );

    padding:140px 0 120px;
    position:relative;
    overflow:hidden;
}

.inner-page-hero::before{
    content:'';
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-180px;
    left:-180px;
}

.inner-page-hero::after{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    bottom:-150px;
    right:-120px;
}

.inner-page-content{
    max-width:900px;
    margin:auto;
    text-align:center;
    position:relative;
    z-index:2;
}

.inner-page-badge{
    display:inline-block;
    background:rgba(255,255,255,.12);
    color:#fff;
    padding:12px 25px;
    border-radius:50px;
    margin-bottom:25px;
    backdrop-filter:blur(10px);
}

.inner-page-badge i{
    color:#ff7a00;
    margin-right:8px;
}

.inner-page-hero h1{
    color:#fff;
    font-size:70px;
    font-weight:700;
    margin-bottom:20px;
    line-height:1.1;
}

.inner-page-hero h1 span{
    color:#ff7a00;
}

.inner-page-hero p{
    color:rgba(255,255,255,.85);
    font-size:20px;
    line-height:1.8;
    max-width:750px;
    margin:auto;
}

@media(max-width:768px){

    .inner-page-hero{
        padding:100px 0;
    }

    .inner-page-hero h1{
        font-size:42px;
    }

    .inner-page-hero p{
        font-size:16px;
    }

}


/*==================================
03. SERVICES INTRO SECTION
==================================*/

.premium-services-intro{
    padding:100px 0;
    background:#fff;
}

.intro-image-wrapper{
    position:relative;
}

.intro-main-image{
    width:100%;
    border-radius:30px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.experience-card{

    position:absolute;

    bottom:30px;
    right:-30px;

    background:#fff;

    padding:25px 30px;

    border-radius:20px;

    text-align:center;

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

.experience-card h3{

    font-size:40px;

    color:#ff7a00;

    margin-bottom:5px;
}

.experience-card p{

    margin:0;

    color:#666;
}

.section-heading span{
    color:#ff7a00;
}

.intro-features{
    margin-top:30px;
}

.intro-feature{

    margin-bottom:15px;

    font-size:17px;

    font-weight:500;

    color:#0A2E6D;
}

.intro-feature i{

    color:#ff7a00;

    margin-right:10px;
}

@media(max-width:991px){

    .experience-card{

        right:15px;
        bottom:15px;
    }

}

@media(max-width:768px){

    .premium-services-intro{
        padding:70px 0;
    }

    .experience-card{

        position:relative;

        right:auto;
        bottom:auto;

        margin-top:20px;
    }

}



/* =====================================================
   PATIENT TESTIMONIALS SECTION
===================================================== */

.testimonials-section{
    background:#f8fbff;
}

.testimonial-card{

    background:#fff;

    padding:35px;

    border-radius:25px;

    height:100%;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(13,34,77,.08);

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

    transition:.4s;
}

.testimonial-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 50px rgba(13,34,77,.15);
}

.quote-icon{

    width:60px;
    height:60px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #F97707,
        #1E88E5
    );

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

    margin-bottom:20px;
}

.quote-icon i{

    color:#fff;
    font-size:22px;
}

.rating{

    color:#F97707;

    font-size:18px;

    margin-bottom:15px;
}

.testimonial-card p{

    color:#666;

    margin-bottom:25px;

    line-height:1.8;
}

.patient-info{

    display:flex;

    align-items:center;

    gap:15px;
}

.patient-avatar{

    width:55px;
    height:55px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #0D224D,
        #1E88E5
    );

    color:#fff;

    font-weight:700;

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

.patient-info h5{

    margin:0;

    color:#0D224D;
}

.patient-info span{

    color:#777;

    font-size:14px;
}
/* =====================================================
   05. WHY CHOOSE OUR SERVICES
===================================================== */


.why-services{
    background:#f8f9fc;
}

.section-desc{
    max-width:700px;
    margin:15px auto 0;
    color:#666;
}

.feature-box{

    background:#fff;

    padding:40px 25px;

    border-radius:25px;

    text-align:center;

    height:100%;

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

    transition:.4s;

    position:relative;

    overflow:hidden;
}

.feature-box::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#ff7a00;
}

.feature-box:hover{

    transform:translateY(-12px);

    background:#0A2E6D;
}

.feature-icon{

    width:90px;
    height:90px;

    margin:auto;
    margin-bottom:25px;

    border-radius:50%;

    background:#f3f7ff;

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

.feature-icon i{

    font-size:38px;

    color:#ff7a00;
}

.feature-box h5{

    color:#0A2E6D;

    font-size:22px;

    margin-bottom:15px;

    transition:.3s;
}

.feature-box p{

    color:#666;

    margin:0;

    transition:.3s;
}

.feature-box:hover h5,
.feature-box:hover p{

    color:#fff;
}


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

.healthcare-cta{
    padding:100px 0;
}

.cta-wrapper{
    border-radius:35px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.cta-left,
.cta-right{

    padding:70px 50px;

    height:100%;
}

.cta-left{

    background:linear-gradient(
        135deg,
        #0A2E6D,
        #123f92
    );

    color:#fff;
}

.cta-right{

    background:#fff;
}

.cta-left span,
.cta-right span{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    font-size:14px;

    margin-bottom:20px;
}

.cta-left span{

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

.cta-right span{

    background:#fff3e8;

    color:#ff7a00;
}

.cta-left h2,
.cta-right h2{

    font-size:48px;

    line-height:1.1;

    margin-bottom:20px;

    font-weight:700;
}

.cta-right h2{
    color:#0A2E6D;
}

.cta-left p{

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

.cta-right p{

    color:#666;
}

.cta-left a,
.cta-right a{

    display:inline-block;

    margin-top:20px;

    padding:15px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;
}

.cta-left a{

    background:#ff7a00;

    color:#fff;
}

.cta-right a{

    background:#0A2E6D;

    color:#fff;
}

.cta-left a:hover,
.cta-right a:hover{

    color:#fff;
}

/* MOBILE */

@media(max-width:768px){

    .cta-left,
    .cta-right{

        padding:40px 25px;

        text-align:center;
    }

    .cta-left h2,
    .cta-right h2{

        font-size:32px;
    }

}

/* =====================================================
   08. ANIMATION EFFECTS
===================================================== */

.service-card,
.feature-box,
.cta-box,
.emergency-box{
    transition:all .4s ease;
}

/* =====================================================
   09. TABLET RESPONSIVE
===================================================== */

@media(max-width:991px){

    .services-hero{
        min-height:500px;
        text-align:center;
    }

    .services-hero h1{
        font-size:48px;
    }

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

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

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

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

    .emergency-box h2{
        font-size:36px;
    }

}

/* =====================================================
   10. MOBILE RESPONSIVE
===================================================== */

@media(max-width:767px){

    .py-100{
        padding:70px 0;
    }

    .services-hero{
        min-height:450px;
    }

    .services-hero h1{
        font-size:34px;
    }

    .services-hero p{
        font-size:16px;
    }

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

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

    .service-card i{
        font-size:45px;
    }

    .feature-box{
        padding:30px 20px;
    }

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

    .emergency-box h2{
        font-size:30px;
    }

    .cta-btn{
        margin-top:20px;
    }

}








/* ==============================
   MOBILE GAP FIX (HARD FIX)
============================== */

html,
body{
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    width:100%;
    max-width:100%;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

@media (max-width:767px){

    html,
    body{
        overflow-x:hidden !important;
    }

    .container,
    .container-fluid{
        width:100% !important;
        max-width:100% !important;
        padding-left:15px !important;
        padding-right:15px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .row{
        --bs-gutter-x:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    [class*="col-"]{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    img{
        max-width:100% !important;
        height:auto !important;
    }

    section{
        overflow:hidden !important;
    }
}