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

    body {
        position: relative;
    }

    header .middle {
        position: absolute;
        background-color: white;
        width: 100%;
        height: 92vh;
        top: 100%;
        right: -100%;
        z-index: 10000;
        transition: all 0.5s;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }

    header .middle.active {
        right: 0;
    }

    header .middle .upper {
        color: black;
        font-size: 20px;
        flex-direction: column;
        text-align: center;
    }

    header .middle .lower nav ul {
        flex-direction: column;
        gap: 60px;
        text-align: center;
    }

    header .middle .lower nav ul li a {
        padding: 10px 25px;
        background-color: yellow;
        color: black;
        border-radius: 10px;
    }

    header .right {
        display: block;
    }

    #home {
        flex-direction: column;
        justify-content: center;
    }

    #home .left,
    #home .right {
        width: 100%;
    }

    #home .right {
        text-align: center;
    }

    #home .right img {
        width: 50%;
    }

    #menu {
        flex-direction: column;
    }

    #menu img {
        width: 100%;
    }

    #our-story .lower {
        flex-direction: column;
        gap: 50px;
    }

    #event {
        flex-direction: column;
    }

    #event .left,
    #event .right {
        width: 100%;
    }

}

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

    #home .right img {
        width: 65%;
    }

    footer .upper {
        flex-direction: column;
    }

    footer .upper .left img{
        width: 80%;
    }

    footer .upper .right ul li {
        gap: 10px;
    }

    footer .upper .right,
    footer .lower .right {
        justify-content: center;
    }

    footer .lower {
        flex-direction: column-reverse;
    }

    footer .lower .left {
        text-align: center;
    }

    footer .upper .left,
    footer .lower .left,
    footer .upper .right,
    footer .lower .right {
        width: 100%;
    }

}

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

    #home .right img {
        width: 75%;
    }

    #contact-us {
        background-image: none;
    }

    #contact-us .lower form {
        flex-direction: column;
    }

    #contact-us .lower form .left,
    #contact-us .lower form .right {
        width: 100%;
    }

    #contact-us .lower form .left input,
    #contact-us .lower form .right input,
    #contact-us .lower form .right button {
        width: 100%;
    }

}

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

    #home .right img {
        width: 100%;
    }

}

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

footer .upper .right ul li p {
    font-size: 12px;
}

}