/* ===============================
   MOBILE (768px)
================================= */
@media (max-width: 768px) {
    /* Breadcrumb */
    .breadcrumb {
        height: 120px;
        margin-bottom: 20px;
    }

        .breadcrumb > p {
            margin-bottom: 0;
        }
    .top-nav {
        display:none;
    }
    /* Buttons */
    .donate-btn {
        text-align: center;
        margin: 0 !important;
    }

    /* Layout */
    .container-box {
        width: 100% !important;
        padding: 0 10px !important;
    }

    .row {
        -bs-gutter-x: 0 !important;
    }
    .gallery-container {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        gap: 10px;
    }
    /* Hero */
    .hero {
        height: 400px;
    }

        .hero h1 {
            font-weight: normal !important;
        }
    .timeline-item:nth-child(even)::before,  {
         left: 0px; 
    }
    .timeline-item:nth-child(odd)::before {
        right: 0px;
    }
    .testimonials-container{
        margin-bottom:20px;
    }
    /* Programs */
    .programs {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 40px;
    }

    /* About / Mission */
    .abt-img {
        padding-bottom: 20px;
    }

    .mission-vision {
        height: auto;
    }

    .mission {
        flex-direction: column-reverse;
        width: 100%;
        height: auto;
    }

    .mission-img, .mission-content {
        width: 100%;
    }

    .mission-img {
        display: flex;
        justify-content: center;
    }

        .mission-img img {
            position: static;
        }

    /* Statistics */
    .stat {
        padding-bottom: 10px;
    }

    .stat-img img {
        height: 80px;
        width: 80px;
    }

    /* Gallery / Donation / Testimonial */
    .gallery {
        margin-top: 0 !important;
        padding-bottom: 30px;
    }

    .donation-section {
        padding: 20px !important;
        background-image: none !important;
    }

    .testimonial {
        padding-bottom: 30px;
    }

    /* Footer */
    .footer {
        padding-top: 40px;
    }

    .f-mb {
        margin-bottom: 25px;
    }

    /* Why We */
    .whywe {
        flex-direction: column;
    }

    .ww-cont, .ww-img {
        width: 100%;
    }

    .w-content {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        position: static;
    }

    /* Team */
    .team {
        flex-direction: column;
    }

    .team-img {
        display: flex;
        justify-content: center;
        overflow: hidden;
        width: 100%;
    }

    .team-cont {
        width: 100%;
        height: auto;
    }

    /* Event */
    .event {
        padding-top: 10px;
    }

    .event-box {
        flex-direction: column;
        height: auto;
    }

    .event-img, .event-cont {
        width: 100%;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .col-rev-sm {
        flex-direction: column-reverse;
    }

    /* Volunteer */
    .volunteer-cont {
        flex-direction: column;
    }

    .vc-cont, .vc-img {
        width: 100%;
    }

    .vc-cont {
        height: auto;
    }

    .v-form-img img {
        margin-top: 10px;
    }

    .volunteers {
        padding: 30px 0;
    }

    /* Contact */
    .contact-form {
        padding-top: 0 !important;
    }
}

/* ===============================
   MOBILE (Landscape 481–767px)
================================= */
@media (min-width: 481px) and (max-width: 767px) {
    /* Inherit most mobile portrait rules */
    .breadcrumb {
        height: 120px;
        margin-bottom: 20px;
    }

        .breadcrumb > p {
            margin-bottom: 0;
        }

    .donate-btn {
        text-align: center;
        margin: 0 !important;
    }

    .container-box {
        width: 100% !important;
        padding: 0 10px;
    }

    .hero {
        height: 400px;
    }

        .hero h1 {
            font-weight: normal !important;
        }

    /* Same as portrait */
    .programs, .abt-img, .mission, .mission-img img, .stat, .gallery,
    .donation-section, .testimonial, .footer, .whywe, .team,
    .event, .event-box, .volunteer-cont, .contact-form {
        /* reuse portrait styles (no duplication here) */
    }

    /* Adjust timeline */
    .timeline::before {
        left: 10px;
    }

    .timeline-item::before {
        left: 0 !important;
    }

    /* Slightly smaller text for info cards */
    .info-card p {
        font-size: 0.9rem;
    }
}

/* ===============================
   TABLETS (Portrait 768–1024px)
================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    .container-box {
        width: 100% !important;
        padding: 0 10px;
    }

    /* Programs */
    .programs {
        flex-wrap: wrap;
        padding-bottom: 20px;
    }

    .tab-size {
        width: 300px;
    }

    /* Mission */
    .mission {
        height: auto;
    }

    .mission-img img {
        position: static;
    }

    /* Sections */
    .donation-section {
        padding: 40px;
    }

    .testimonial, .gallery {
        padding-bottom: 40px;
    }

    .footer {
        padding: 20px;
    }

    .f-logo {
        height: 50px;
    }

    .about {
        margin-top: 30px;
    }

    /* Team */
    .w-content {
        height: auto;
        width: auto;
        position: static;
    }

    .team-img {
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    .team-cont {
        height: auto;
    }

    .social-icons a {
        height: 35px;
        width: 35px;
        font-size: 18px;
    }

    /* Event */
    .event {
        padding-top: 10px;
    }

    .event-box {
        gap: 10px;
        height: auto;
    }

    .event-cont {
        width: 60%;
    }

    .event-img {
        width: 40%;
    }

    /* Volunteer */
    .volunteer-cont {
        padding: 20px 10px;
    }

    /* Ellipsis helpers */
    .ellipsis-4, .ellipsis-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ellipsis-4 {
        -webkit-line-clamp: 4;
    }

    .ellipsis-2 {
        -webkit-line-clamp: 2;
    }

    /* Utilities */
    .tab-hide {
        display: none;
    }

    .tw-95 {
        width: 95%;
    }

    .donate-btn {
        margin-left: 0;
    }
}