@media(max-width:992px){

    section{ padding:70px 0;}
    
}
@media (max-width: 991px) {

    /* 1. Navbar Alignment */
    .custom-navbar .container,
    .header.inner-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .custom-navbar .logo,
    .header.inner-header .logo {
        height: 55px;
        width: auto;
    }

    /* 2. Slide-out Navigation Panel (Fixed Viewport Top & Height) */
    .custom-navbar .navbar-collapse,
    .header.inner-header .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: -100%; /* Hidden off-screen to the left */
        width: 400px;
        max-width: 85vw; /* Prevents overflow on narrow screens */
        height: 100vh !important;
        height: 100dvh !important; /* Handles mobile browser URL bar shifts */
        background: #FAF8F2 !important;
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
        transition: left 0.35s ease-in-out;
        z-index: 10000 !important; /* Keeps drawer above all header elements */
        overflow-y: auto !important; /* Enables scrolling for menu content */
        -webkit-overflow-scrolling: touch;
    }

    /* 3. Show Menu State */
    .custom-navbar .navbar-collapse.show,
    .header.inner-header .navbar-collapse.show {
        left: 0 !important; /* Slide in from left */
    }

    /* 4. Drawer Header (Full-width flex container preventing top cutoff) */
    .offcanvas-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
        border-bottom: 1px solid rgba(217, 180, 106, 0.4) !important;
        flex-shrink: 0 !important; /* Keeps header pinned at the top without squishing */
    }

    /* Logo inside drawer */
    .mobile-menu-logo {
        height: 40px !important;
        width: auto !important;
        max-width: 75% !important;
    }

    /* Close (X) button styling & explicit visibility fix */
.close-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    color: #355E3B !important; /* Matches primary brand green */
    background: transparent !important;
    border: none !important;
    opacity: 0.8 !important;
    margin-left: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.close-menu-btn:hover {
    opacity: 1 !important;
    color: #C7A46A !important; /* Gold hover effect */
}

    /* 5. Mobile Nav Links Spacing */
    .navbar-nav {
        width: 100% !important;
        align-items: flex-start !important;
        flex-grow: 1;
    }
  .navbar-nav .nav-item{
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
  }
    .navbar-nav .nav-link {
        font-size: 16px;
        padding: 12px 0 !important;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .navbar-nav .nav-link::after {
        display: none; /* Hide desktop animated underline on mobile */
    }

    /* 6. Dropdown Menu within Mobile Drawer */
    .custom-dropdown {
        position: static;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none;
        border: none;
        background: transparent;
        margin-top: 0;
        padding-left: 12px;
    }

    .custom-dropdown .dropdown-item {
        padding: 10px 0;
    }

    .join-btn {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
  .header,
    .header.inner-header,
    .custom-navbar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
   .custom-navbar .logo {
        height: 55px !important;
        width: auto !important;
        max-height: 55px !important;
    }

    .custom-navbar.scrolled .logo {
        height: 55px !important;
        max-height: 55px !important;
    }
}
@media (max-width:1199px){

    .hero h1{font-size:4.5rem; }
        
    .hero p{font-size:1.1rem;}
        
    .hero-content{max-width:520px;}
          
    .logo{ height:75px;}
        
}

@media (max-width:767px){

    .hero{padding:120px 0 60px;}
            
    .hero h1{ font-size:2.8rem;line-height:1.1;}
            
    .hero p{font-size:1rem;line-height:1.8;}
            
    .hero-buttons{flex-direction:column;gap:15px;}
            
    .btn-primary-custom, .btn-outline-custom{width:100%;justify-content:center;}
            
    .hero-wave svg{height:60px;}
            
}

@media (max-width:575px){

    .logo{height:60px;}
                
    .hero{padding-top:110px;}
                
    .hero h1{font-size:2.2rem;}
                
    .hero-tag span{font-size:15px;}
                
    .hero p{font-size:15px;}
                
    .wave-lotus{width:50px; height:50px;}
                
    .wave-lotus img{width:24px;}
                
}

/* ==========================================
   DAILY REFLECTIONS - MOBILE FIX
========================================== */

@media (max-width: 767px) {

    .daily-reflections-main .reflection-block {
        height: auto;
    }

    .daily-reflections-main .reflection-card {
        height: auto;
        min-height: 350px;
    }

    .daily-reflections-main .reflection-empty {
        min-height: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .daily-reflections-main .reflection-empty p {
        margin: 0;
        padding: 20px;
    }

}