@media screen and (max-width: 768px) {

    /* banner */
    .banner-container {
        align-items: center;
        flex-direction: column;
    }

    .banner-main {
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
    }

    /* navigation */
    .navigation {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .logo {
        font-size: 1rem;
    }

    .menu-btn {
        display: block;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        text-align: center;
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .nav-list.show {
        display: flex;
        padding: 2rem;
        transform: translateY(0);
        opacity: 1;
        animation: slideInFromBottom 0.5s ease;
    }

    .nav-list li {
        width: 100%;
        padding: 10px;
    }

    .nav-components {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .advert-img {
        width: 100%;
        height: 70%;
        border-radius: 10px;
    }

    .closeNew {
        color: var(--primary-red);
    }

    .closeNew:hover,
    .closeNew:focus {
        color: var(--primary-red);
    }

    /* Header */
    .header {
        background-size: cover;
        height: 100vh;
        background-position: center;
    }

    .header-title h1 {
        font-size: 2rem;
        font-weight: 800;
    }

    /* About */
    .about-content_cont {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about-cont_img {
        width: 100%;
    }

    .about-cont_briefing {
        width: 100%;
    }

    .mission {
        flex-direction: column-reverse;
    }

    /* newsroom section */
    .news-container {
        width: 100%;
        background: transparent;
        padding: 0px;
    }

    .news-content-container {
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }

    .news-content {
        width: 100%;
    }


    /* Donate Section */
    .donate-title {
        text-align: center;
    }

    .donate-title h1 {
        font-size: 1.6rem;
    }

    /* Services */
    .services-content_container {
        flex-direction: column;
    }

    .services-content {
        width: 100%;
        gap: 1rem;
    }

    /* News */
    .newsletter-title h1 {
        font-size: 2rem;
    }

    .newsletter-form {
        flex-direction: column;
        width: 90%;
    }

    .newsletter-inputs input::placeholder {
        text-align: center;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    /* Other Pages */
    /* career */
    .career_content-cont {
        flex-direction: column;
    }

    .career_cont {
        width: 100%;
        flex-direction: column;
        gap: 2rem;
        align-items: flex-start;
    }

    .career-title h1 {
        font-size: 1.8rem;
    }

    .requirement-title h2 {
        font-size: 1rem;
    }

    .what-header {
        background-position: top;
    }

    .what-content_container {
        flex-direction: column;
    }

    .what-content {
        width: 100%;
    }

    /* Programs */
    .program-content_container {
        flex-direction: column;
    }

    .program-content {
        width: 100%;
    }

    .program_tabs {
        padding: 0px;
    }

    .tab-details h1 {
        font-size: 24px;
    }

    .tab-details p {
        font-size: 13px;
    }

    .tab_button {
        font-size: 13px;
        padding: 8px 16px;
    }

    /* Team */
    .team-member {
        width: 100%;
    }

    /* Contact */
    .contact-container {
        flex-direction: column;
    }

    .contact-form {
        width: 100%;
    }

    .contact-info {
        width: 100%;
    }

    .opt {
        flex-direction: column;
    }

    .extra {
        width: 100%;
    }

    /* sponsors */
    .sponsor-content-container {
        flex-direction: column;
    }

    .sponsor-img {
        width: 100%;
    }
}

/* Responsive styles */
@media screen and (max-width: 992px) {
    .tabs {
        flex-direction: column;
        gap: 10px;
    }

    .tab-pane {
        flex-direction: column;
    }

    .tab-image,
    .tab-details {
        width: 100%;
        margin-right: 0;
    }

    .tab-details h1 {
        font-size: 28px;
    }

    .tab-details p {
        font-size: 14px;
    }

    .tab_button {
        font-size: 14px;
        padding: 10px 20px;
    }
}

@media screen and (max-width: 576px) {
    .program-container {
        padding: 5px;
    }

    .tabs {
        flex-direction: column;
        gap: 5px;
    }

    .tab-details h1 {
        font-size: 20px;
    }

    .tab-details p {
        font-size: 12px;
    }

    .tab_button {
        font-size: 12px;
        padding: 5px 10px;
    }
}

@media screen and (max-width: 1200px) {
    .gallery-image-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .gallery-image-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .gallery-image-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Keyframe animation for sliding in from bottom */
@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}