/* public/assets/css/responsive.css */

/* Large Tablets & Medium screens */
@media (max-width: 991px) {
    .container {
        padding: 0 20px;
    }
    
    .slide-content h1 {
        font-size: 2.8rem;
    }
    
    .slide-content p {
        font-size: 1.15rem;
    }
    
    .hero-slider {
        height: 500px;
    }

    .nav-menu {
        display: none; /* Hide default menu, toggle will display it */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--bg-white);
        box-shadow: var(--shadow-md);
        padding: 20px;
        border-top: 1px solid #eee;
    }
    
    .nav-menu.open {
        display: block;
    }

    .nav-menu ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-menu ul li {
        margin: 12px 0;
        width: 100%;
    }

    .nav-menu ul li a {
        display: block;
        padding: 6px 0;
        width: 100%;
    }

    .nav-menu ul li a::after {
        display: none;
    }

    .nav-menu ul li .btn-donate-nav {
        display: inline-block;
        margin-top: 10px;
        width: auto;
    }

    .nav-toggle {
        display: block;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonial-item {
        flex: 0 0 calc(50% - 15px);
    }

    .service-detail .detail-wrapper {
        grid-template-columns: 1fr;
    }
    
    .blog-layout {
        grid-template-columns: 1fr;
    }
    
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }
    
    h2 {
        font-size: 2rem;
        margin-bottom: 35px;
    }

    .topbar {
        display: none; /* Hide topbar on mobile to save space */
    }

    .slide-content h1 {
        font-size: 2.2rem;
    }
    
    .slide-content p {
        font-size: 1.05rem;
        margin-bottom: 25px;
    }
    
    .hero-slider {
        height: 420px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-item {
        flex: 0 0 100%;
    }

    .stats-home .container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .bottom-flex {
        flex-direction: column-reverse;
        text-align: center;
        gap: 15px;
    }

    .bottom-links a {
        margin: 0 10px;
    }
    
    .page-banner {
        padding: 70px 0;
    }

    .banner-content h1 {
        font-size: 2.4rem;
    }
    
    .lightbox-content {
        max-width: 95%;
    }
    
    .lightbox-close {
        top: 15px;
        right: 20px;
        font-size: 35px;
    }
}

@media (max-width: 480px) {
    .slide-content h1 {
        font-size: 1.8rem;
    }
    
    .hero-slider {
        height: 360px;
    }
    
    .btn {
        padding: 10px 22px;
        font-size: 0.95rem;
    }
}