/* ==========================================================================
   Dr. Rawnok Jahan Rahman - 3-Color Harmonious Palette & Color Grading System
   Palette:
   1. Primary (60%): Deep Sapphire Navy (#0A2540)
   2. Secondary (30%): Crystal Vision Cyan (#0284C7 / #00D4B2)
   3. Accent (10%): Champagne Amber Gold (#F59E0B)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
    --primary-color: #0A2540;
    --primary-dark: #071729;
    --secondary-color: #0284C7;
    --cyan-accent: #00D4B2;
    --accent-color: #F59E0B;
    --accent-dark: #D97706;
    
    --bg-light: #F8FAFC;
    --text-dark: #0F172A;
    --text-muted: #64748B;
    --border-light: rgba(226, 232, 240, 0.9);

    --gradient-brand: linear-gradient(135deg, #0A2540 0%, #0284C7 100%);
    --gradient-secondary: linear-gradient(135deg, #0284C7 0%, #00D4B2 100%);
    --gradient-accent: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    
    --box-shadow-soft: 0 15px 35px -5px rgba(10, 37, 64, 0.07), 0 8px 15px -6px rgba(10, 37, 64, 0.03);
    --box-shadow-hover: 0 25px 45px -10px rgba(2, 132, 199, 0.2);
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
    overflow-x: hidden;
}

/* Animations */
@keyframes floatElement {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(245, 158, 11, 0); }
}

/* Top Announcement Bar */
.top-info-bar {
    background: #071729 !important;
    color: #94A3B8 !important;
    font-size: 0.86rem !important;
    padding: 0.55rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.top-info-bar a {
    color: #CBD5E1 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.top-info-bar a:hover {
    color: #00D4B2 !important;
}

/* Header & Navbar Color Grading */
.index2-header-con, .header-main-con {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 20px rgba(10, 37, 64, 0.05) !important;
}

.navbar-nav .nav-item .nav-link {
    font-weight: 700 !important;
    color: #0A2540 !important;
    font-size: 0.95rem !important;
    padding: 0.6rem 1.1rem !important;
    border-radius: 30px !important;
    transition: all 0.25s ease !important;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: #0284C7 !important;
    background: rgba(2, 132, 199, 0.08) !important;
}

/* Rich Deep Sapphire & Cyan Hero Banner Section */
.index3-banner-section, .banner-main-con {
    background: linear-gradient(135deg, #0A2540 0%, #0c2f52 45%, #0284C7 100%) !important;
    padding: 75px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.index3-banner-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(0, 212, 178, 0.18) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
}

.banner-txt-section h1, .hero-title {
    color: #ffffff !important;
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.banner-txt-section .small-txt {
    color: #00D4B2 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    margin-bottom: 0.8rem !important;
}

.banner-txt-section p {
    color: #cbd5e1 !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    margin-bottom: 2rem !important;
}

.banner-btns a:first-child, .btn-accent-gold {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 0.85rem 2.2rem !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.25s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.banner-btns a:first-child:hover, .btn-accent-gold:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.5) !important;
    color: #ffffff !important;
}

.banner-btns a:last-child {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 30px !important;
    padding: 0.85rem 2.2rem !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
    margin-left: 0.8rem !important;
}

.banner-btns a:last-child:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.index3-banner-image-con img {
    border-radius: 24px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
}

.opening-hours {
    background: rgba(10, 37, 64, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    padding: 1rem 1.25rem !important;
}

/* Card Components Color Grading & Equal Height */
.custom-card, .service-box-item, .blog-box, .blog-card-item {
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 20px !important;
    box-shadow: var(--box-shadow-soft) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.custom-card:hover, .service-box-item:hover, .blog-box:hover, .blog-card-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--box-shadow-hover) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
}

/* Fixed Uniform Blog Card Utilities */
.blog-card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.8rem !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: #0A2540 !important;
    margin-bottom: 0.5rem !important;
}

.blog-card-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.6rem !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: #64748B !important;
    margin-bottom: 1rem !important;
}

.blog-card-img {
    height: 200px !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* Badges */
.badge-sapphire {
    background: rgba(10, 37, 64, 0.1) !important;
    color: #0A2540 !important;
    font-weight: 700 !important;
}

.badge-cyan {
    background: rgba(2, 132, 199, 0.12) !important;
    color: #0284C7 !important;
    font-weight: 700 !important;
}

.badge-gold {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #D97706 !important;
    font-weight: 700 !important;
}

/* Footer Deep Sapphire Color Grading */
.footer-main-con, footer {
    background: #071729 !important;
    color: #94A3B8 !important;
}

.footer-main-con h4, footer h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.footer-main-con a, footer a {
    color: #94A3B8 !important;
    transition: color 0.2s ease !important;
}

.footer-main-con a:hover, footer a:hover {
    color: #00D4B2 !important;
}

.copyright-con {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Aspect Ratio Utilities (Fallback for BS4) */
.ratio {
    position: relative;
    width: 100%;
}
.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio, 56.25%);
    content: "";
}
.ratio > iframe,
.ratio > embed,
.ratio > object,
.ratio > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ratio-16x9 {
    --bs-aspect-ratio: 56.25%;
}