@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root {
    --primary-blue: #0062ff;
    --dark-blue: #0046b3;
    --accent-yellow: #ffc107;
    --light-gray: #f8f9fa;
}

body { font-family: 'Inter', sans-serif; background-color: #f4f7f6; scroll-behavior: smooth; overflow-x: hidden; }

/* --- Floating Button Animation --- */
.floating-container { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column; gap: 15px; align-items: flex-end; }
.floating-btn { width: 60px; height: 60px; border-radius: 50px; display: flex; align-items: center; justify-content: center; color: white; border: none; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none; overflow: hidden; white-space: nowrap; box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
.search-btn { background: var(--primary-blue); }
.whatsapp-btn { background: #25d366; font-size: 28px; }
.btn-text { font-size: 15px; font-weight: 700; margin-left: 10px; opacity: 0; display: inline-block; width: 0; transition: 0.3s; }

.expand-animation { animation: autoExpand 6s infinite; }
@keyframes autoExpand {
    0%, 10%, 90%, 100% { width: 60px; }
    20%, 80% { width: 220px; }
}
.expand-animation .btn-text { animation: fadeText 6s infinite; }
@keyframes fadeText {
    0%, 15%, 85%, 100% { opacity: 0; width: 0; }
    25%, 75% { opacity: 1; width: auto; margin-left: 10px; }
}

/* --- Top Bar --- */
.top-bar { background: #ffffff; padding: 12px 0; border-bottom: 1px solid #eee; }
.btn-lang { background: transparent; border: 2px solid #333; border-radius: 20px; padding: 3px 15px; font-size: 12px; font-weight: 800; }
.btn-staff { background: var(--primary-blue); padding: 8px 20px; border-radius: 20px; font-weight: 700; }

/* --- Navigation --- */
.navbar { background: var(--primary-blue) !important; padding: 15px 0; }
.nav-item { margin: 0 5px; }
.nav-link { font-weight: 700; color: white !important; font-size: 13px; text-transform: uppercase; padding: 8px 20px !important; border-radius: 30px; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.1); border: 1px solid transparent; }
.nav-link:hover { background-color: var(--accent-yellow) !important; color: #000 !important; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

.hero-section {
    position: relative;
    /* මෙහි මුලින්ම ඇත්තේ අලුත් පසුබිම් පින්තූරයයි, දෙවැන්න ඔබ දුන් පින්තූරයයි */
    background: linear-gradient(to right, rgba(0, 128, 128, 0.85) 30%, rgba(0, 128, 128, 0.4) 60%, transparent 100%), 
                url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'), /* මේක වෛද්‍ය මධ්‍යස්ථාන පින්තූරය */
                url('Green and White Simple Medical Center Banner.png'); /* ඔබ ලබා දුන් පින්තූරය */
    
    background-size: cover;
    background-position: center;
    height: 100vh; /* හෝ 600px වැනි උසක් */
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-content {
    z-index: 2;
}

.text-wrapper {
    max-width: 650px;
    padding-left: 20px;
}

.main-title {
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 4.5rem); /* විවිධ screen වලට ගැලපෙන ලෙස */
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
}

.sub-title {
    color: #ffd700; /* රන්වන් පැහැය (Warning color එකට ගැලපෙන ලෙස) */
    font-size: 0.8em;
}

.channel-btn {
    background-color: #ffc107;
    border: none;
    color: #000;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.channel-btn:hover {
    background-color: #e0a800;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-section {
        background: linear-gradient(to bottom, rgba(0, 128, 128, 0.9), rgba(0, 128, 128, 0.7)), 
                    url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=800&q=80');
        text-align: center;
    }
    .text-wrapper {
        margin: 0 auto;
        padding: 0;
    }
}

/* --- Sections --- */
.section-padding { padding: 100px 0; }
.section-title { font-weight: 800; text-align: center; margin-bottom: 60px; position: relative; }
.section-title::after { content: ''; width: 80px; height: 5px; background: var(--accent-yellow); position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); }

/* --- Doctor Cards --- */
.doctor-card { background: white; border-radius: 20px; border-top: 6px solid var(--primary-blue); transition: 0.3s; overflow: hidden; padding: 25px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.doctor-card:hover { box-shadow: 0 15px 40px rgba(0,0,0,0.12); }
.schedule-box { background: #f0f7ff; border-left: 5px solid var(--primary-blue); padding: 15px; border-radius: 10px; font-weight: 600; text-align: left; }
.btn-channel { background: var(--primary-blue); color: white; border-radius: 50px; font-weight: 800; padding: 12px; border: none; transition: 0.3s; }

/* --- Service Cards --- */
.service-card { background: white; border-radius: 20px; padding: 40px 25px; transition: 0.4s; border-bottom: 6px solid var(--primary-blue); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.service-icon { font-size: 3.5rem; color: var(--primary-blue); margin-bottom: 20px; }

/* --- Trust Section --- */
.trust-heading { font-weight: 800; font-size: 38px; line-height: 1.2; margin: 20px 0; color: #1a1a1a; }
.trust-subtitle { color: var(--primary-blue); font-weight: 800; letter-spacing: 1px; }
.trust-feature { font-weight: 800; display: flex; align-items: center; font-size: 17px; }
.trust-feature i { background: #28a745; color: white; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; font-size: 14px; }

.image-box { position: relative; }
.doctor-img, .staff-img { border-radius: 40px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.experience-badge { position: absolute; bottom: 30px; left: -10px; background: var(--accent-yellow); padding: 25px 35px; border-radius: 25px; text-align: center; z-index: 10; border: 4px solid white; }
.experience-badge h3 { font-weight: 900; margin: 0; font-size: 2.8rem; color: #000; }

/* --- Stats --- */
.stats-bar { background: var(--primary-blue); color: white; padding: 75px 0; border-radius: 30px; margin-top: -40px; }
.stats-bar h2 { font-size: 3.5rem; font-weight: 900; }

/* --- Footer --- */
footer { background: #181a1d; color: #ffffff; padding: 90px 0 30px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li a { color: #959798; text-decoration: none; font-weight: 600; transition: 0.3s; display: block; margin-bottom: 10px; }
.social-btn { width: 45px; height: 45px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #4d4e51; color: white; text-decoration: none; margin-right: 12px; }
.footer-map iframe { width: 100%; height: 220px; border-radius: 20px; border: none; }


/* ============================================================
   MOBILE RESPONSIVE ADJUSTMENTS (මෙය අලුතින් එක් කරන ලදී)
   ============================================================ */

@media (max-width: 991px) {
    .top-bar .contact-info { flex-direction: column; align-items: flex-start !important; gap: 5px !important; }
    .top-bar .top-actions { gap: 10px !important; }
    .hero-section h1 { font-size: 3rem; }
    .trust-heading { font-size: 28px; }
    .section-padding { padding: 60px 0; }
    .experience-badge { padding: 15px 20px; bottom: 10px; }
    .experience-badge h3 { font-size: 1.8rem; }
}

@media (max-width: 767px) {
    .floating-btn { width: 50px; height: 50px; }
    .hero-section { height: 60vh; }
    .hero-section h1 { font-size: 2.2rem; }
    .hero-section p { font-size: 1rem; }
    .navbar-brand { font-size: 1.1rem; }
    .nav-item { margin: 5px 0; text-align: center; }
    .stats-bar h2 { font-size: 2rem; }
    .stats-bar p { font-size: 13px; }
    .service-card { padding: 25px 15px; }
    .service-icon { font-size: 2.5rem; }
    .doctor-img, .staff-img { border-radius: 20px; }
    .footer-map iframe { height: 150px; }
}





/* ============================================================
   MOBILE & TABLET RESPONSIVE FIXES latest
   ============================================================ */

@media (max-width: 991px) {
    /* Top Bar එක පිළිවෙල කිරීම */
    .top-bar .container-fluid {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .contact-info {
        flex-direction: column; /* WhatsApp සහ Email එක යටට වැටීමට */
        gap: 5px !important;
    }

    .contact-info span {
        display: none; /* මැද තියෙන "|" ඉර ඉවත් කිරීමට */
    }

    /* Hero Section එකේ අකුරු කුඩා කිරීම */
    .hero-section h1 {
        font-size: 2.5rem !important;
    }

    /* Trust Section එකේ පින්තූරය සහ Badge එක */
    .experience-badge {
        padding: 15px 20px;
        bottom: 10px;
        left: 10px;
    }
    
    .experience-badge h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    /* Navbar Brand එකේ අකුරු කුඩා කිරීම */
    .navbar-brand {
        font-size: 1rem;
    }

    /* Section Titles වල පරතරය අඩු කිරීම */
    .section-padding {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 40px;
    }

    /* Floating Buttons (Search & WhatsApp) */
    .floating-container {
        bottom: 15px;
        right: 15px;
    }
    
    .floating-btn {
        width: 50px;
        height: 50px;
    }

    /* Stats Bar එකේ ඉලක්කම් කුඩා කිරීම */
    .stats-bar h2 {
        font-size: 2.2rem;
    }

    /* Modal ඇතුලත Padding අඩු කිරීම (Phone එකේ වැඩි ඉඩක් ගැනීමට) */
    .modal-body {
        padding: 15px !important;
    }

    /* "Confirm Channeling" Button එක Mobile එකේදී ලොකු කිරීම */
    #bookingSubmitBtn {
        font-size: 0.9rem;
        padding: 15px 10px;
    }

    /* පින්තූර වල Radius එක අඩු කිරීම */
    .doctor-img, .staff-img {
        border-radius: 20px;
    }

    /* Footer Map එකේ උස අඩු කිරීම */
    .footer-map iframe {
        height: 180px;
    }
}

/* ඉතා කුඩා Screen සඳහා (iPhone SE etc.) */
@media (max-width: 380px) {
    .hero-section h1 {
        font-size: 2rem !important;
    }
    
    .top-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-lang, .btn-staff {
        width: 100%;
        text-align: center;
    }
}




/* --- Designer Credit Styling --- */
.designer-link {
    color: #ffc107; /* අපේ accent yellow පාට */
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
    border-bottom: 1px solid transparent;
}

.designer-link:hover {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
}

/* Stats Bar icons animation and layout */
.stats-bar i {
    display: block;
    transition: transform 0.3s ease;
}

.stats-bar div:hover i {
    transform: translateY(-10px) scale(1.1);
}















/* ---------------------------------------------------
   SMOOTH & PREMIUM ENTRANCE ANIMATIONS
--------------------------------------------------- */

/* 1. ඉතා සිනිඳු ලෙස මතු වීමේ ඇනිමේෂන් එක (Soft Reveal) */
@keyframes smoothEntrance {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: blur(5px); /* මදක් නොපැහැදිලි වී පැහැදිලි වීමට */
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* සියලුම කාඩ්පත් සහ පින්තූර (දොස්තර පින්තූර ඇතුළුව) මෙතැනට ඇතුළත් කර ඇත */
.doctor-card, 
.service-card, 
.doctor-img, 
.staff-img, 
.experience-badge,
.summary-card {
    opacity: 0;
    animation: smoothEntrance 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* එකින් එක මතු වීමට කාල පරාසයන් (Delay) */
.doctor-card:nth-child(1) { animation-delay: 0.1s; }
.doctor-card:nth-child(2) { animation-delay: 0.2s; }
.doctor-card:nth-child(3) { animation-delay: 0.3s; }

.service-card { animation-delay: 0.2s; }

/* ප්‍රධාන පින්තූර සඳහා විශේෂ Delay */
.doctor-img { animation-delay: 0.4s; }
.staff-img { animation-delay: 0.5s; }

/* 2. HOVER EFFECTS (මවුස් එක උඩට ගිය විට ඉතා සෙමින් සිදුවන වෙනස්කම්) */

/* කාඩ්පත් සඳහා */
.doctor-card, .service-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.doctor-card:hover, .service-card:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 30px 60px rgba(0, 98, 255, 0.12) !important;
    background-color: #ffffff;
}

/* පින්තූර සඳහා (Zoom effect) */
.doctor-img, .staff-img {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.doctor-img:hover, .staff-img:hover {
    transform: scale(1.03) !important; /* ඉතා සියුම්ව Zoom වීම */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
}

/* 3. BUTTON ANIMATION */
.btn-channel {
    transition: all 0.3s ease;
}

.doctor-card:hover .btn-channel {
    background-color: var(--accent-yellow) !important;
    color: #000 !important;
    transform: scale(1.05);
}

/* Admin Dashboard එකේ තියෙන කාඩ්පත් සඳහා */
.summary-card:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}