@media screen and (max-width:576px) {
    header .navbar {
        max-width: 94%;
    }

    .navbar button {
        display: none;
    }

    .hamburger {
        display: block;
    }


    header .banner-container {
        max-width: 94%;
        flex-direction: column-reverse;
        gap: 50px;
    }

    .banner-content h1 {
        font-size: 40px;
    }

    .banner-container .banner-content {
        max-width: 100%;
    }

    .banner-container .banner-image img {
        max-width: 100%;
    }

    /* Piller Section */

    .piller-section {
        max-width: 94%;
    }

    .piller-card-container {
        flex-direction: column;
        margin: 0 auto;
    }

    .piller-card {
        margin: 0 auto;
    }

    .piller-section .piller-heading {
        font-size: 37px;
        text-align: center;
    }


    .piller-card-container .piller-card {
        max-width: 95%;
        border-radius: 16px;
        border: 1px solid rgba(14, 14, 14, 0.15);
        background-color: #fff;
        padding: 24px;
    }


    /* Vision Section */

    .vision-section {
        max-width: 94%;
        margin-bottom: 60px;
    }

    .vision-div {
        max-width: 95%;
    }


    .vision-card-container {
        max-width: 100%;
        display: flex;
        margin: 0 auto;
        flex-direction: column;
    }

    .vision-card {
        max-width: 95%;
        border-radius: 12px;
        padding: 32px;
        margin: 0 auto;
    }

    /* Recent News */

    .recent-section {
        max-width: 94%;
        margin: 0 auto;
        margin-top: 70px;
    }

    .news-card {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 18px;
    }

    .news-card-container {
        max-width: 100%;
        margin: 0 auto;
        padding-bottom: 16px;
    }

    .news-card-left img {
        max-width: 100%;
        border: none;
        border-radius: 18px;
    }

    /* Donate Section */

    .donate-section {
        max-width: 94%;
        margin-top: 70px;
    }

    .donate-card-container {
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .input {
        width: 100%;

        border-radius: 6px;
        margin-bottom: 16px;
    }

    .donate-card h2 {
        font-size: 30px;
        color: #0E0E0E;
    }


    /* Subscribe Section */



    .subscribe-section {
        max-width: 98%;
        padding: 0 16px 60px;
    }

    .subscribe-main-container {
        padding: 50px 20px;
        border-radius: 16px;
    }

    .subscribe-content {
        width: 100%;
    }

    .subs-heading h2 {
        font-size: 30px;
    }

    .subs-heading p {
        font-size: 14px;
        line-height: 22px;
    }

    .input--btn {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .input--btn input {
        min-width: 100%;
        width: 100%;
        height: 52px;
        border-radius: 8px;
        padding: 0 20px;
        font-size: 15px;
        box-sizing: border-box;
    }

    .subs-btn {
        width: 100%;
        border-radius: 8px;
        padding: 14px 20px;
    }

    .message {
        font-size: 14px;
        line-height: 22px;
        margin-top: 20px;
    }


    /* Footer */

    footer .footer-container {
        max-width: 90%;
    }

    footer h2 {
        font-size: 32px;
        color: #0E0E0E;
        margin-bottom: 32px;
    }



}