/*======================================
    GOOGLE FONT
======================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*======================================
    ROOT VARIABLES
======================================*/

:root{

    --primary:#0d6efd;
    --secondary:#198754;
    --dark:#0f172a;
    --light:#f8f9fa;
    --white:#ffffff;
    --gray:#6c757d;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --radius:15px;
    --transition:.4s;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    color:#333;
    background:#fff;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:.4s;

}

section{

    padding:80px 0;

}

ul{

    padding:0;
    margin:0;
    list-style:none;

}

/*======================================
    TYPOGRAPHY
======================================*/

h1{

    font-size:58px;
    font-weight:700;

}

h2{

    font-size:42px;
    font-weight:700;

}

h3{

    font-size:30px;

}

h4{

    font-size:24px;

}

h5{

    font-size:20px;

}

p{

    color:#666;
    line-height:1.8;

}

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

.navbar{

    padding:15px 0;
    transition:.4s;

}

.navbar-brand{

    font-size:28px;
    font-weight:700;

}

.navbar-nav .nav-link{

    color:#fff !important;
    margin-left:15px;
    font-weight:500;

}

.navbar-nav .nav-link:hover{

    color:#ffc107 !important;

}

.navbar.scrolled{

    background:#0b5ed7 !important;
    box-shadow:0 5px 20px rgba(0,0,0,.15);

}
@media (min-width:992px){
    .navbar-collapse{
        justify-content:flex-end;
    }
}

@media (max-width:991px){

    .navbar-collapse{
        background:#0d6efd;
        margin-top:10px;
        border-radius:10px;
        padding:15px;
    }

    .navbar-nav{
        text-align:center;
    }

    .navbar-nav .nav-link{
        padding:12px;
    }

}
/*======================================
    HERO
======================================*/

.hero{

    background:linear-gradient(rgba(13,110,253,.07),
    rgba(13,110,253,.07)),
    url("../images/bg.jpg");

    background-size:cover;
    background-position:center;

    min-height:90vh;

    display:flex;
    align-items:center;

}

.hero h1{

    color:#0f172a;
    margin-bottom:20px;

}

.hero h2{

    color:var(--primary);

}

.hero p{

    font-size:18px;

}

.hero img{

    border-radius:20px;
    box-shadow:var(--shadow);

}

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

.btn{

    border-radius:50px;
    padding:14px 35px;
    font-weight:600;
    transition:.4s;

}

.btn-primary{

    background:var(--primary);
    border:none;

}

.btn-primary:hover{

    transform:translateY(-5px);
    box-shadow:0 15px 25px rgba(13,110,253,.3);

}

.btn-success:hover{

    transform:translateY(-5px);

}

.btn-warning:hover{

    transform:translateY(-5px);

}

.btn-light:hover{

    transform:translateY(-5px);

}

/*======================================
    BADGE
======================================*/

.badge{

    padding:12px 20px;
    font-size:15px;
    border-radius:30px;

}

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

.about img{

    border-radius:20px;
    box-shadow:var(--shadow);

}

.list-group-item{

    border:none;
    padding:18px;
    font-weight:500;

}

.list-group-item i{

    margin-right:10px;

}

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

.fa-solid{

    transition:.4s;

}

.card:hover .fa-solid{

    transform:scale(1.2);

}

/*======================================
    HOSPITAL SECTION
======================================*/

.bg-primary{

    background:#0d6efd !important;

}

.bg-primary h4{

    margin-top:15px;

}

.bg-primary i{

    transition:.4s;

}

.bg-primary i:hover{

    transform:rotate(8deg) scale(1.15);

}

/*======================================
    IMAGE EFFECT
======================================*/

img{

    transition:.5s;

}

img:hover{

    transform:scale(1.03);

}

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

.text-primary{

    color:#0d6efd !important;

}

.text-success{

    color:#198754 !important;

}

/*======================================
    SHADOW
======================================*/

.shadow{

    box-shadow:0 15px 35px rgba(0,0,0,.08)!important;

}

/*======================================
    CUSTOM CARD
======================================*/

.card{

    border:none;
    border-radius:20px;
    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

/*======================================
    SCROLLBAR
======================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

::-webkit-scrollbar-thumb{

    background:#0d6efd;

}

::-webkit-scrollbar-thumb:hover{

    background:#084298;

}

/*======================================
    SELECTION
======================================*/

::selection{

    background:#0d6efd;
    color:#fff;

}



/*======================================
        TREATMENTS SECTION
======================================*/

#treatments{

    background:#f8f9fa;

}

#treatments .card{

    border-radius:20px;
    overflow:hidden;
    transition:.4s;
    padding:25px;
    text-align:center;
    background:#fff;

}

#treatments .card i{

    font-size:55px;
    margin-bottom:20px;
    transition:.4s;

}

#treatments .card h4{

    font-weight:700;
    margin-bottom:15px;

}

#treatments .card p{

    color:#666;
    font-size:15px;

}

#treatments .card:hover{

    transform:translateY(-12px);

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

}

#treatments .card:hover i{

    color:#198754;

    transform:scale(1.2) rotate(10deg);

}

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

.why-box{

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

}

.why-box:hover{

    background:#0d6efd;
    color:#fff;

    transform:translateY(-10px);

}

.why-box:hover p{

    color:#fff;

}

.why-box:hover i{

    color:#fff;

}

.why-box i{

    font-size:55px;
    margin-bottom:20px;
    color:#0d6efd;
    transition:.4s;

}

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

.list-group{

    border-radius:20px;
    overflow:hidden;

}

.list-group-item{

    padding:18px 22px;
    border-bottom:1px solid #eee;
    transition:.4s;
    background:#fff;

}

.list-group-item:last-child{

    border-bottom:none;

}

.list-group-item:hover{

    background:#0d6efd;
    color:#fff;

    padding-left:35px;

}

.list-group-item:hover i{

    color:#fff;

}

.list-group-item i{

    color:#198754;
    margin-right:12px;

}

/*======================================
        WORKING HOURS
======================================*/

table{

    border-radius:20px;
    overflow:hidden;

}

table th{

    background:#0d6efd;
    color:#fff;
    padding:18px;

}

table td{

    padding:18px;
    vertical-align:middle;

}

.table-success{

    font-weight:700;

}

.table-bordered{

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

}

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

.bg-primary{

    position:relative;
    overflow:hidden;

}

.bg-primary::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

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

    top:-120px;
    right:-100px;

}

.bg-primary::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

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

    bottom:-80px;
    left:-70px;

}

.bg-primary h2,

.bg-primary p{

    position:relative;
    z-index:2;

}

/*======================================
        COUNTER
======================================*/

.counter-box{

    background:#fff;

    padding:35px;

    border-radius:20px;

    text-align:center;

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

    transition:.4s;

}

.counter-box:hover{

    transform:translateY(-10px);

}

.counter-box h1{

    font-size:55px;

    font-weight:700;

    color:#0d6efd;

}

.counter-box p{

    font-size:18px;

    margin-top:10px;

}

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

.card i{

    transition:.5s;

}

.card:hover i{

    transform:rotate(10deg) scale(1.2);

}

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

section h6{

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

}

section h2{

    margin-bottom:15px;

}

/*======================================
        IMAGE EFFECT
======================================*/

section img{

    border-radius:20px;

    transition:.5s;

}

section img:hover{

    transform:scale(1.04);

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

}

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

.btn{

    position:relative;

    overflow:hidden;

}

.btn::after{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transition:.5s;

}

.btn:hover::after{

    left:100%;

}

/*======================================
        SPACING
======================================*/

.py-5{

    padding-top:90px !important;

    padding-bottom:90px !important;

}


/*======================================
        GALLERY
======================================*/

#gallery img{

    width:100%;
    height:260px;
    object-fit:cover;

    border-radius:20px;

    transition:.5s;

    cursor:pointer;

}

#gallery img:hover{

    transform:scale(1.08);

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

}

/*======================================
        TESTIMONIAL
======================================*/

.carousel-item{

    padding:20px;

}

.carousel-item .card{

    border:none;

    border-radius:25px;

    padding:40px;

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

}

.carousel-item h4{

    color:#ffc107;

    font-size:32px;

}

.carousel-item p{

    font-size:18px;

    color:#555;

    line-height:1.8;

}

.carousel-item h5{

    margin-top:20px;

    color:#0d6efd;

    font-weight:600;

}

/*======================================
        FAQ
======================================*/

.accordion-item{

    border:none;

    margin-bottom:20px;

    border-radius:15px !important;

    overflow:hidden;

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

}

.accordion-button{

    font-weight:600;

    padding:22px;

}

.accordion-button:not(.collapsed){

    background:#0d6efd;

    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:20px;

    color:#666;

}

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

form{

    background:#fff;

    padding:35px;

    border-radius:20px;

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

}

.form-control{

    border-radius:12px;

    padding:14px;

    border:1px solid #ddd;

    margin-bottom:20px;

}

.form-control:focus{

    border-color:#0d6efd;

    box-shadow:0 0 10px rgba(13,110,253,.2);

}

textarea{

    resize:none;

}

/*======================================
        GOOGLE MAP
======================================*/

iframe{

    border-radius:20px;

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

}

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

footer{

    background:#111827;

}

footer h4{

    margin-bottom:20px;

    color:#fff;

}

footer p{

    color:#cbd5e1;

}

footer ul li{

    margin-bottom:12px;

}

footer ul li a{

    color:#cbd5e1;

    transition:.4s;

}

footer ul li a:hover{

    color:#0d6efd;

    padding-left:8px;

}

footer i{

    transition:.4s;

}

footer i:hover{

    color:#0d6efd;

    transform:scale(1.2);

}

footer hr{

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

}

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

.position-fixed{

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

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

    transition:.4s;

}

.position-fixed:hover{

    transform:scale(1.12);

}

/*======================================
        SCROLL TO TOP
======================================*/

#topBtn{

    position:fixed;

    left:20px;

    bottom:20px;

    width:55px;

    height:55px;

    background:#0d6efd;

    color:#fff;

    border-radius:50%;

    display:none;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:999;

    transition:.4s;

}

#topBtn:hover{

    background:#198754;

}

/*======================================
        ANIMATION
======================================*/

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

.hero{

    text-align:center;

    min-height:auto;

    padding:70px 0;

}

.hero h1{

    font-size:42px;

}

.hero h2{

    font-size:30px;

}

section{

    padding:70px 0;

}

.navbar-nav{

    text-align:center;

    padding-top:15px;

}

}

@media(max-width:768px){

h1{

    font-size:34px;

}

h2{

    font-size:28px;

}

.hero img{

    margin-top:35px;

}

.btn{

    width:100%;

    margin-bottom:15px;

}

.counter-box{

    margin-bottom:20px;

}

#gallery img{

    height:220px;

}

table{

    font-size:14px;

}

iframe{

    height:320px;

    margin-top:30px;

}

.position-fixed{

    width:55px !important;

    height:55px !important;

}

}

@media(max-width:576px){

.hero{

    padding-top:40px;

}

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:15px;

}

.badge{

    font-size:13px;

}

.carousel-item .card{

    padding:25px;

}

footer{

    text-align:center;

}

footer .col-lg-4{

    margin-bottom:30px;

}

}

/* ======================================
      DARK MODE
====================================== */

body.dark-mode{
    background:#121212;
    color:#ffffff;
    transition:0.4s;
}

body.dark-mode section{
    background:#121212 !important;
}

body.dark-mode .card{
    background:#1e1e1e;
    color:#fff;
}

body.dark-mode p{
    color:#d6d6d6;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{
    color:#fff;
}

body.dark-mode .navbar{
    background:#000 !important;
}

body.dark-mode .list-group-item{
    background:#1e1e1e;
    color:#fff;
    border-color:#333;
}

body.dark-mode table{
    color:#fff;
}

body.dark-mode .table{
    color:#fff;
}

body.dark-mode .accordion-button{
    background:#1f1f1f;
    color:#fff;
}

body.dark-mode .accordion-body{
    background:#1a1a1a;
    color:#ddd;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea{

    background:#1d1d1d;
    color:#fff;
    border:1px solid #444;

}

body.dark-mode .form-control::placeholder{
    color:#bbb;
}

body.dark-mode footer{
    background:#000 !important;
}

body.dark-mode .btn-light{
    background:#ffc107;
    color:#000;
}

body.dark-mode iframe{
    filter:grayscale(30%) invert(90%);
}

body.dark-mode .modal-content{
    background:#1f1f1f;
    color:#fff;
}

body.dark-mode .bg-light{
    background:#181818 !important;
}


.service-icon{
    width:70px;
    height:70px;
    display:block;
    margin:0 auto 20px;
    object-fit:contain;
}

.card:hover .service-icon{
    transform:scale(1.15) rotate(5deg);
}
.service-icon1{
    width:70px;
    height:70px;
    display:block;
    margin:0 auto 20px;
    object-fit:contain;
}

.card:hover .service-icon{
    transform:scale(1.15) rotate(0deg);
}


@media (max-width: 991px) {

    .navbar-collapse.show {
        display: block !important;
        background: #0d6efd !important;
        padding: 15px;
        border-radius: 10px;
    }

    .navbar-nav {
        display: flex;
        flex-direction: column;
    }

    .navbar-nav .nav-link {
        color: #fff !important;
        padding: 12px 0;
    }
}

/*======================================
    NAVBAR FIX: decorative circles must never block clicks
======================================*/
.bg-primary::before,
.bg-primary::after{
    pointer-events:none;
}
.navbar.bg-primary::before,
.navbar.bg-primary::after{
    display:none;
}


/*======================================
    APPOINTMENT PHOTO (centered, round)
======================================*/
.profile-img{
    display:block;
    width:220px;
    height:220px;
    max-width:100%;
    margin:0 auto 1rem;
    border-radius:50%;
    object-fit:cover;
    object-position:50% 12%;
    border:4px solid #fff;
    box-shadow:0 8px 24px rgba(13,110,253,.25);
}

/*======================================
    SCROLL ANIMATION (all pages)
======================================*/
.reveal{opacity:0}
.reveal.in{
    opacity:1;
    animation:revealUp .7s ease backwards;
    animation-delay:var(--d,0s);
}
@keyframes revealUp{
    from{opacity:0;transform:translateY(28px)}
    to{opacity:1;transform:none}
}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .5s ease}
.card{transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){
    .reveal{opacity:1}
    .reveal.in,body{animation:none}
    .card{transition:none}
    .card:hover{transform:none}
}

/*======================================
    DARK MODE: forms and cards readable everywhere
======================================*/
body.dark-mode .card,
body.dark-mode .card-body{
    background:#1e1e1e !important;
    color:#fff;
}
body.dark-mode label,
body.dark-mode .form-label{
    color:#e8e8e8;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus{
    background:#262626;
    color:#fff;
    border-color:#0d6efd;
    box-shadow:0 0 0 .2rem rgba(13,110,253,.25);
}
body.dark-mode input[type="date"],
body.dark-mode input[type="time"]{
    color-scheme:dark;
}
body.dark-mode .bg-light,
body.dark-mode .bg-white{
    background:#1a1a1a !important;
}
body.dark-mode .text-muted{
    color:#aaa !important;
}
body.dark-mode .profile-img{
    border-color:#1e1e1e;
}