/* ==========================================================================
   1. Google Fonts & Global Variables
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

:root {
    --primary-start: #6d135c;
    --primary-end: #b33a91;
    --accent-red: #a23435;
    --accent-yellow: #f3b136;
    --footer-bg: #420b37;
}

body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    background: url('images/body-bg-pattern.png') repeat, #f9f9f9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 61px; /* Offset for fixed navbar */
}

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Quicksand', sans-serif; 
    font-weight: 700; 
}

.text-theme { color: var(--primary-start) !important; }
.bg-theme { background: linear-gradient(to right, var(--primary-start), var(--primary-end)) !important; }
.tracking-wide { letter-spacing: 1.5px; }
.text-justify { text-align: justify; }

/* ==========================================================================
   2. Navigation & Dropdown Behavior (Restored)
   ========================================================================== */
.nav-gradient { 
    background: linear-gradient(to right, var(--primary-start), var(--primary-end)); 
}

.navbar-toggler { 
    background-color: var(--accent-yellow); 
    border: none; 
}

.navbar-toggler-icon { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23a23435' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 
}

.hover-bg-light { transition: background-color 0.2s ease; }
.hover-bg-light:hover { background-color: #f8f9fa !important; }

/* Theme-Matched Tinted Icons */
.menu-icon-tint {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

/* Hover to Drop (Desktop Only) */
@media (min-width: 768px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeDropdown 0.25s ease forwards;
    }
    
    .navbar .dropdown-menu {
        margin-top: 0; /* Reset default bootstrap margin */
    }
    
    /* THE FIX: The Invisible Hover Bridge */
    .navbar .dropdown-menu::before {
        content: "";
        position: absolute;
        top: -20px; /* Reaches up to touch the navbar */
        left: 0;
        right: 0;
        height: 20px;
        background: transparent;
    }

    @keyframes fadeDropdown {
        from { opacity: 0; transform: translateX(-50%) translateY(10px); }
        to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.btn-theme {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    color: #fff; 
    border: none; 
    transition: 0.3s;
}
.btn-theme:hover { color: #fff; opacity: 0.9; }

.btn-outline-theme {
    color: var(--primary-start);
    border: 2px solid var(--primary-start);
    background-color: transparent;
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-outline-theme:hover {
    background: linear-gradient(to right, var(--primary-start), var(--primary-end));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(109, 19, 92, 0.3);
}

.btn-hover-slide i { transition: transform 0.3s ease; }
.btn-hover-slide:hover i { transform: translateX(5px); }

/* ==========================================================================
   4. Hero Section
   ========================================================================== */
.hero-section {
    min-height: 80vh;
    background: url('images/bg100.png') repeat, center/cover;
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(109, 19, 92, 0.88) 0%, rgba(179, 58, 145, 0.88) 100%);
    z-index: 1;
}

.z-index-2 { position: relative; z-index: 2; }
.hero-title { text-shadow: 2px 4px 8px rgba(0,0,0,0.4); letter-spacing: -1px; }
.hero-subtitle { text-shadow: 1px 2px 5px rgba(0,0,0,0.3); font-weight: 500; }

/* Quick DOB Card inside Hero */
.quick-dob-card {
    max-width: 900px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(15px);
    border-bottom: 5px solid var(--accent-yellow);
}
.quick-dob-card .form-control {
    border-radius: 12px;
    border: 1px solid #ced4da;
    height: 58px; 
}
.quick-dob-card .form-control:focus {
    border-color: var(--primary-end);
    box-shadow: 0 0 0 0.25rem rgba(179, 58, 145, 0.15);
}

/* ==========================================================================
   5. Cards & Layouts (Features & Insights)
   ========================================================================== */
.feature-card {
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-bottom: 4px solid transparent !important;
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
    border-bottom: 4px solid var(--accent-yellow) !important;
}

.icon-wrapper {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(109, 19, 92, 0.1), rgba(179, 58, 145, 0.1));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto; transition: all 0.4s ease;
}
.feature-card:hover .icon-wrapper {
    background: linear-gradient(135deg, var(--primary-start), var(--primary-end));
    color: #fff !important;
    transform: scale(1.05);
}

.insight-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid transparent;
}
.insight-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
    border-top: 4px solid var(--primary-end);
}

/* Remedies List Hover */
.remedy-list li { transition: all 0.3s ease; }
.remedy-list li:hover { transform: translateX(10px); }
.remedy-icon {
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}

/* ==========================================================================
   6. Expert Directory Cards
   ========================================================================== */
.expert-directory-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05) !important;
}
.expert-directory-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
    border-color: var(--accent-yellow) !important;
}

.online-indicator {
    box-shadow: 0 0 0 rgba(25, 135, 84, 0.4);
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}
.online-indicator.bg-danger {
    animation: none;
    box-shadow: none;
}

.hover-zoom { transition: transform 0.3s ease; }
.hover-zoom:hover { transform: scale(1.08); }

/* ==========================================================================
   7. Custom Accordion (SEO FAQ)
   ========================================================================== */
.custom-accordion {
    border: 1px solid rgba(0,0,0,0.05);
    background-color: #fff;
}
.custom-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.custom-accordion .accordion-item:last-child {
    border-bottom: none;
}
.custom-accordion .accordion-button {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1rem;
    color: #333;
    background-color: transparent;
    padding: 1.25rem 1.5rem;
    box-shadow: none;
}
.custom-accordion .accordion-button:not(.collapsed) {
    color: var(--primary-start);
    background-color: rgba(109, 19, 92, 0.03);
}
.custom-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236d135c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.custom-accordion .accordion-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
    line-height: 1.6;
    background-color: rgba(109, 19, 92, 0.03); 
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.footer-custom {
    background: url('images/footer-bg-pattern.png') repeat, var(--primary-start);
    border-top: 15px solid var(--footer-bg);
    color: #fff;
    padding: 3rem 0 1rem;
}
.footer-custom a { color: #fff; text-decoration: none; transition: 0.3s; }
.footer-custom a:hover { color: var(--accent-yellow); }
.footer-list { list-style: none; padding-left: 0; }
.footer-list li { margin-bottom: 10px; }

/*.footer-watermark {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='30' font-family='Quicksand, sans-serif' font-size='14' fill='%23ffffff' fill-opacity='0.03'%3E7%3C/text%3E%3Ctext x='35' y='50' font-family='Quicksand, sans-serif' font-size='12' fill='%23ffffff' fill-opacity='0.03'%3E3%3C/text%3E%3Ctext x='25' y='15' font-family='Quicksand, sans-serif' font-size='10' fill='%23ffffff' fill-opacity='0.02'%3E9%3C/text%3E%3C/svg%3E");
    background-repeat: repeat;
}*/
.footer-watermark {
    /*background-color: #0f172a;*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23ffffff'%3E%3Ctext x='12' y='20' font-family='sans-serif' font-size='11' font-weight='bold' fill-opacity='0.2' transform='rotate(-45 12 20)'%3E3%3C/text%3E%3Ctext x='45' y='18' font-family='sans-serif' font-size='22' font-weight='bold' fill-opacity='0.04' transform='rotate(15 45 18)'%3E7%3C/text%3E%3Ctext x='85' y='25' font-family='sans-serif' font-size='14' fill-opacity='0.025' transform='rotate(-15 85 25)'%3E1%3C/text%3E%3Ctext x='118' y='22' font-family='sans-serif' font-size='19' font-weight='bold' fill-opacity='0.035' transform='rotate(55 118 22)'%3E9%3C/text%3E%3Ctext x='22' y='55' font-family='sans-serif' font-size='16' fill-opacity='0.03' transform='rotate(30 22 55)'%3E5%3C/text%3E%3Ctext x='62' y='52' font-family='sans-serif' font-size='10' font-weight='bold' fill-opacity='0.02' transform='rotate(-60 62 52)'%3E2%3C/text%3E%3Ctext x='98' y='58' font-family='sans-serif' font-size='24' font-weight='bold' fill-opacity='0.04' transform='rotate(-30 98 58)'%3E8%3C/text%3E%3Ctext x='15' y='88' font-family='sans-serif' font-size='20' font-weight='bold' fill-opacity='0.035' transform='rotate(40 15 88)'%3E6%3C/text%3E%3Ctext x='52' y='85' font-family='sans-serif' font-size='13' fill-opacity='0.025' transform='rotate(10 52 85)'%3E4%3C/text%3E%3Ctext x='88' y='90' font-family='sans-serif' font-size='17' font-weight='bold' fill-opacity='0.03' transform='rotate(-20 88 90)'%3E3%3C/text%3E%3Ctext x='122' y='85' font-family='sans-serif' font-size='12' fill-opacity='0.02' transform='rotate(45 122 85)'%3E7%3C/text%3E%3Ctext x='28' y='122' font-family='sans-serif' font-size='15' fill-opacity='0.025' transform='rotate(-10 28 122)'%3E9%3C/text%3E%3Ctext x='65' y='125' font-family='sans-serif' font-size='25' font-weight='bold' fill-opacity='0.04' transform='rotate(-45 65 125)'%3E1%3C/text%3E%3Ctext x='102' y='120' font-family='sans-serif' font-size='11' font-weight='bold' fill-opacity='0.02' transform='rotate(25 102 120)'%3E5%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}