/* =====================================
   MOBILE CLINIC PREMIUM DESIGN
   STYLE CSS PART 1
===================================== */


/* ---------- GLOBAL ---------- */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}



body{

    font-family:'Inter',sans-serif;

    color:#111827;

    background:#ffffff;

    overflow-x:hidden;

}



a{

    text-decoration:none;

}



img{

    max-width:100%;

}





/* =====================================
   SPLASH SCREEN
===================================== */


.splash-screen{

    position:fixed;

    inset:0;

    background:

    linear-gradient(
        135deg,
        #020617,
        #0f172a,
        #2563eb
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    z-index:9999;

    animation:removeSplash 1s ease forwards;

    animation-delay:3s;

}



.splash-logo{

    width:100px;

    height:100px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    backdrop-filter:blur(20px);

    margin-bottom:25px;

    animation:pulse 1.5s infinite;

}



.splash-logo i{

    font-size:45px;

    color:#38bdf8;

}



.splash-screen h1{

    font-size:45px;

    font-weight:800;

}



.splash-screen p{

    color:#cbd5e1;

    font-size:18px;

}



.loader{

    width:45px;

    height:45px;

    margin-top:25px;

    border-radius:50%;

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

    border-top-color:white;

    animation:rotate 1s linear infinite;

}




@keyframes rotate{

    100%{

        transform:rotate(360deg);

    }

}



@keyframes pulse{

    50%{

        transform:scale(1.1);

    }

}



@keyframes removeSplash{

    to{

        opacity:0;

        visibility:hidden;

    }

}









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


.navbar-custom{

    padding:25px 0;

    transition:.4s;

}



.navbar-custom.scrolled{

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

    backdrop-filter:blur(15px);

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

}



.brand{

    font-size:28px;

    font-weight:800;

    color:white;

}



.navbar-custom.scrolled .brand{

    color:#0f172a;

}



.brand i{

    color:#38bdf8;

}



.nav-link{

    color:white!important;

    font-weight:500;

    margin-left:30px;

    position:relative;

}



.navbar-custom.scrolled .nav-link{

    color:#111827!important;

}



.nav-link:after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#38bdf8;

    transition:.3s;

}



.nav-link:hover:after{

    width:100%;

}



.navbar-toggler{

    color:white;

    border:none;

    font-size:28px;

}



.navbar-toggler:focus{

    box-shadow:none;

}







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


.hero-section{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    background:

    radial-gradient(
        circle at top right,
        #1d4ed8,
        transparent 40%
    ),

    linear-gradient(
        135deg,
        #020617,
        #0f172a
    );

    padding-top:100px;

    overflow:hidden;

}



.hero-section:before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(56,189,248,.15);

    filter:blur(80px);

    right:-150px;

    bottom:-100px;

}




.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 22px;

    border-radius:50px;

    color:#e0f2fe;

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

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

    backdrop-filter:blur(15px);

    margin-bottom:30px;

}



.hero-content h1{

    color:white;

    font-size:70px;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-2px;

}



.hero-content h1 span{

    background:

    linear-gradient(
        90deg,
        #38bdf8,
        #2563eb
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero-content p{

    color:#cbd5e1;

    font-size:18px;

    line-height:1.8;

    max-width:550px;

    margin:30px 0;

}






/* BUTTONS */


.main-btn{

    background:#2563eb;

    color:white;

    padding:16px 38px;

    border-radius:50px;

    font-weight:600;

}



.main-btn:hover{

    background:#1d4ed8;

    color:white;

    transform:translateY(-4px);

}



.second-btn{

    margin-left:15px;

    padding:16px 38px;

    border-radius:50px;

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

    color:white;

}



.second-btn:hover{

    background:white;

    color:#020617;

}







/* =====================================
   HERO IMAGE
===================================== */


.hero-image{

    position:relative;

    text-align:center;

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

}



.hero-image img{

    width:430px;

    filter:drop-shadow(
        0 40px 60px rgba(0,0,0,.5)
    );

}



@keyframes floating{

    50%{

        transform:translateY(-20px);

    }

}



.floating-card{

    position:absolute;

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

    padding:18px 22px;

    border-radius:20px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}



.floating-card i{

    color:#2563eb;

    font-size:28px;

}



.floating-card h6{

    margin:0;

    font-weight:700;

}



.floating-card p{

    margin:0;

    color:#64748b;

    font-size:13px;

}



.card-left{

    left:-40px;

    top:100px;

}



.card-right{

    right:-40px;

    bottom:100px;

}
/* =====================================
   STATS SECTION
===================================== */


.stats-section{

    padding:90px 0;

    background:#ffffff;

}



.stats-section h2{

    font-size:48px;

    font-weight:800;

    background:linear-gradient(
        90deg,
        #2563eb,
        #38bdf8
    );

    -webkit-background-clip:text;

    color:transparent;

}



.stats-section p{

    color:#64748b;

    font-weight:500;

}








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


.section-heading{

    margin-bottom:70px;

}



.section-heading span{

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

}



.section-heading h2{

    font-size:48px;

    font-weight:800;

    margin-top:15px;

    color:#0f172a;

}



.section-heading p{

    color:#64748b;

    font-size:17px;

}








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


.services-section{

    padding:120px 0;

    background:#f8fafc;

}



.service-card{

    height:100%;

    padding:40px 35px;

    background:white;

    border-radius:30px;

    border:1px solid #e5e7eb;

    transition:.4s;

    position:relative;

    overflow:hidden;

}



.service-card:before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:#dbeafe;

    border-radius:50%;

    top:-90px;

    right:-90px;

    transition:.4s;

}



.service-card:hover:before{

    background:#2563eb;

}



.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(37,99,235,.15);

}



.service-card i{

    position:relative;

    font-size:45px;

    color:#2563eb;

}



.service-card h4{

    margin-top:30px;

    font-size:24px;

    font-weight:700;

}



.service-card p{

    color:#64748b;

    line-height:1.8;

}



.service-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:15px;

    color:#2563eb;

    font-weight:600;

}








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


.about-section{

    padding:120px 0;

    background:white;

}



.about-image{

    position:relative;

}



.about-image img{

    border-radius:35px;

    box-shadow:

    0 40px 80px rgba(0,0,0,.15);

}



.about-content span{

    color:#2563eb;

    font-size:14px;

    letter-spacing:3px;

    font-weight:700;

}



.about-content h2{

    font-size:48px;

    font-weight:800;

    margin:20px 0;

}



.about-content p{

    color:#64748b;

    line-height:1.9;

    font-size:16px;

}



.about-points{

    margin-top:30px;

}



.about-points div{

    margin-bottom:18px;

    font-weight:600;

}



.about-points i{

    color:#2563eb;

    margin-right:12px;

}








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


.contact-section{

    padding:120px 0;

    background:#f8fafc;

}



.contact-wrapper{

    max-width:900px;

    margin:auto;

    background:white;

    padding:50px;

    border-radius:35px;

    box-shadow:

    0 30px 70px rgba(0,0,0,.08);

}



.form-control{

    padding:18px 22px;

    margin-bottom:20px;

    border-radius:18px;

    border:1px solid #e5e7eb;

}



.form-control:focus{

    border-color:#2563eb;

    box-shadow:

    0 0 0 .25rem rgba(37,99,235,.15);

}



textarea{

    resize:none;

}








/* =====================================
   TOAST MESSAGE
===================================== */


.toast{

    background:#0f172a;

    color:white;

    border-radius:15px;

}



.toast-body{

    padding:18px 25px;

    font-weight:600;

}



.toast-body i{

    color:#38bdf8;

}








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


.footer{

    background:#020617;

    color:white;

    padding:80px 0 25px;

}


.footer-logo{
    width:200px;
    height:auto;
    object-fit:contain;
    display:block;
    margin-bottom:20px;
}



.footer h3{

    font-size:32px;

    font-weight:800;

}



.footer h3 i{

    color:#38bdf8;

}



.footer h5{

    font-size:18px;

    margin-bottom:25px;

}



.footer p{

    color:#94a3b8;

    line-height:1.8;

}



.footer a{

    display:block;

    color:#94a3b8;

    margin-bottom:14px;

    transition:.3s;

}



.footer a:hover{

    color:#38bdf8;

    transform:translateX(5px);

}



.social-icons{

    margin-top:25px;

}



.social-icons a{

    display:inline-flex;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#1e293b;

    align-items:center;

    justify-content:center;

    margin-right:10px;

}



.social-icons a:hover{

    background:#2563eb;

    transform:none;

}



.social-icons i{

    font-size:18px;

}



.footer hr{

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

    margin:50px 0 20px;

}



.footer-bottom p{

    margin:0;

    color:#64748b;

}







/* =====================================
   GLOBAL HOVER EFFECTS
===================================== */


.btn,
.service-card,
.social-icons a{

    transition:.3s;

}

.navbar .nav-link.active{
    color:#3b82f6 !important;
    font-weight:600;
}

.navbar .nav-link.active::after{
    width:100%;
}