body{
    font-family:'Poppins',sans-serif;
}

.hero{
    padding:80px 0;
    background:#f8f9fa;
}

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

.hero p{
    font-size:20px;
}

.card{
    transition:.3s;
}

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

footer{
    margin-top:80px;
}

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

.top-bar{
    background:#2B6CB0;
    color:white;
    font-size:14px;
    padding:8px 0;
}

.top-bar i{
    margin-right:6px;
}

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

.navbar{
    transition:.3s;
}

.navbar-brand{
    font-size:22px;
    font-weight:700;
}

.nav-link{
    font-weight:500;
    margin-left:18px;
    color:#2D3748 !important;
    transition:.3s;
}

.nav-link:hover{
    color:#2B6CB0 !important;
}
.navbar .btn{
    border-radius:50px;
    padding:10px 24px;
}

.navbar-brand img{
    border-radius:50%;
}

.navbar-brand .brand-title{
    line-height:1.2;
}

.navbar-brand .brand-subtitle{
    display:block;
    font-size:0.72rem;
    line-height:1.3;
    color:#64748b;
    white-space:normal;
    max-width:220px;
}

.card{
    border-radius:20px;
}

/* ==========================================
   HERO SECTION + BLOG DETAIL LAYOUT
   Improved hero spacing and responsive typography
========================================== */
.hero-section{

    min-height:60vh;

    display:flex;

    align-items:center;

    background:linear-gradient(
        rgba(247,250,252,.95),
        rgba(247,250,252,.95)
    ),
    url("../images/hero-bg.jpg");

    background-size:cover;

    background-position:center;

    padding:60px 0;

}

.hero-subtitle{
    color:#2B6CB0;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    display:inline-block;
    margin-bottom:14px;
}

.hero-section h1{
    font-size:44px;
    font-weight:700;
    color:#2D3748;
    margin:0 0 10px 0;
    line-height:1.12;
}

.hero-title{font-size:44px}
.hero-lead{font-size:18px;color:#555;margin-bottom:18px}

.hero-buttons{margin-top:18px}

.hero-content{padding:8px 12px}

.blog-layout{display:block}

.blog-floated-image{display:block;width:100%;height:auto;object-fit:contain;margin-bottom:1rem}

.blog-text-col .blog-content{line-height:1.8;color:#333}

@media (max-width:767.98px){
    .blog-floated-image{float:none !important;width:100% !important;margin:0 0 1rem 0}
}

@media (min-width:768px){
    .blog-floated-image{width:48%;max-width:48%}
    .blog-floated-image.float-md-end{float:right;margin-left:1.5rem}
    .blog-floated-image.float-md-start{float:left;margin-right:1.5rem}
    .blog-text-col:after{content:'';display:table;clear:both}
}

.hero-image{max-width:520px;width:100%;height:auto;aspect-ratio:4/3;background:#f6f8fa;display:block}

/* Floating Image */

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.about-section{
    background:#ffffff;
}

.section-subtitle{
    color:#2B6CB0;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
}

.section-title{
    font-size:40px;
    font-weight:700;
    margin:15px 0;
    color:#2D3748;
}

.about-section p{
    font-size:18px;
    color:#555;
    line-height:1.8;
}

.about-list{
    list-style:none;
    padding:0;
    margin-top:25px;
}

.about-list li{
    margin-bottom:12px;
    font-size:18px;
}

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

.why-choose-us{
    background:#F7FAFC;
}

.feature-card{

    background:#fff;

    padding:35px 25px;

    border-radius:15px;

    text-align:center;

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

    transition:.3s;
}

.feature-card:hover{

    transform:translateY(-10px);

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

}

.feature-card i{

    font-size:50px;

    color:#2B6CB0;

    margin-bottom:20px;

}

.feature-card h5{

    font-weight:600;

    margin-bottom:15px;

}

.feature-card p{

    color:#666;

    margin-bottom:0;

}

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

.services-section{

    background:#ffffff;

}

.service-card{

    background:#fff;

    border-radius:15px;

    padding:35px;

    text-align:center;

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

    transition:.3s;

    height:100%;

}

.service-card:hover{

    transform:translateY(-10px);

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

}

.service-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#E6F0FA;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.service-icon i{

    font-size:40px;

    color:#2B6CB0;

}

.service-card h4{

    font-weight:600;

    margin-bottom:20px;

}

.service-card p{

    color:#666;

    margin-bottom:25px;

}

.testimonial-section .card{
    border-radius:20px;
}

.testimonial-section img{
    object-fit:cover;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color:#2B6CB0;
    border-radius:50%;
    padding:20px;
}

/* ==========================================
   APPOINTMENT FORM
========================================== */

.form-control,
.form-select{

    border-radius:10px;

    padding:12px;

}

.form-control:focus,
.form-select:focus{

    border-color:#2B6CB0;

    box-shadow:0 0 0 .2rem rgba(43,108,176,.15);

}

.card{

    border-radius:20px;


/* ==========================================
   BLOG DETAIL LAYOUT
   Side-by-side image / text with responsive behavior
========================================== */

.blog-layout{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
}

.blog-image-col img{
    display:block;
    width:100%;
    height:auto;
    max-height:800px;
    object-fit:contain;
}

.blog-text-col .blog-content{
    line-height:1.8;
    color:#333;
}

/* On small screens stack naturally */
@media (max-width:767.98px){
    .blog-image-col, .blog-text-col{
        order:initial !important;
    }
    .blog-image-col img{
        max-height:none;
    }
}

/* On larger screens, float the image so text wraps and fills below when image ends */
@media (min-width:768px){
    .blog-layout{ /* cancel Bootstrap row flex for our layout */
        display:block;
    }
    .blog-image-col{
        float:right;
        width:50%;
        max-width:50%;
        margin-left:1.5rem;
    }
    .blog-text-col{
        margin-right:50%;
    }
}
}

/* ===========================
   Gallery
=========================== */

.gallery-card{

    border-radius:15px;

    overflow:hidden;

    background:#fff;

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

    transition:.3s;

}

.gallery-card:hover{

    transform:translateY(-8px);

}

.gallery-img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.4s;

}

.gallery-card:hover .gallery-img{

    transform:scale(1.05);

}

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

.navbar {

    padding: 12px 0;

    transition: all .3s ease;

    z-index: 1030;

}

.navbar-brand img{

    object-fit: cover;

    border:2px solid #E2E8F0;

}

.navbar-nav .nav-link{

    position:relative;

    margin:0 10px;

    font-weight:500;

    color:#2D3748 !important;

    transition:all .3s ease;

}

.navbar-nav .nav-link:hover{

    color:#2B6CB0 !important;

}

.navbar-nav .nav-link.active{

    color:#2B6CB0 !important;

    font-weight:700;

}

.navbar-nav .nav-link.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:3px;

    background:#2B6CB0;

    border-radius:10px;

}

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

.btn{

    transition:all .3s ease;

}

.btn-primary{

    background:#2B6CB0;

    border-color:#2B6CB0;

}

.btn-primary:hover{

    background:#1E4F87;

    border-color:#1E4F87;

    transform:translateY(-2px);

}

.btn-outline-primary{

    color:#2B6CB0;

    border-color:#2B6CB0;

}

.btn-outline-primary:hover{

    background:#2B6CB0;

    color:white;

}


/* ==========================================
   GLOBAL SECTION SPACING
========================================== */

section{

    padding:80px 0;

}

.section-title{

    margin-bottom:20px;

}

.section-subtitle{

    margin-bottom:10px;

}

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

footer{

    background:#1A202C;

    color:white;

    margin-top:80px;

    padding:60px 0 20px;

}

footer h5{

    font-weight:600;

    margin-bottom:20px;

}

footer p,

footer li{

    color:#CBD5E0;

}

footer a{

    color:#CBD5E0;

    text-decoration:none;

    transition:.3s;

}

footer a:hover{

    color:white;

}

footer ul{

    list-style:none;

    padding:0;

}

footer ul li{

    margin-bottom:10px;

}

.footer-bottom{

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

    margin-top:40px;

    padding-top:20px;

    text-align:center;

    color:#A0AEC0;

}


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

#topBtn{

    display:none;

    position:fixed;

    bottom:30px;

    right:30px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#2B6CB0;

    color:white;

    font-size:20px;

    cursor:pointer;

    z-index:999;

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

    transition:.3s;

}

#topBtn:hover{

    background:#1E4F87;

    transform:translateY(-4px);

}


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

@media (max-width:991px){

    .navbar-nav{

        margin-top:20px;

    }

    .navbar-nav .nav-link{

        margin:8px 0;

    }

    .hero-section{

        text-align:center;

        min-height:auto;

    }

    .hero-section h1{

        font-size:38px;

    }

    .hero-image{

        margin-top:40px;

        max-width:100%;

    }

}

@media (max-width:768px){

    .section-title{

        font-size:30px;

    }

    .hero-section h1{

        font-size:32px;

    }

    .top-bar{

        text-align:center;

        font-size:13px;

    }

    .top-bar .d-flex{

        gap:10px;

        justify-content:center !important;

    }

    .navbar-brand img{
        width:46px;
        height:46px;
    }

    .navbar-brand .brand-title{
        font-size:1rem;
    }

    .navbar-brand .brand-subtitle{
        font-size:0.78rem;
    }

}