/*****************************************************
    Media Queries Start
*****************************************************/

@media only screen and (max-width:1100px) and (max-height:800px) {
    html {
        font-size: 60%;
    }

    .max-width {
        width: 90%;
    }

    #hero-section {
        padding: 0 2rem;
    }

    .subscribe-email-right .email-btn-box input,
    .subscribe-email-right .email-btn-box button {
        font-size: 1.4rem;
    }
}

@media only screen and (max-width:1100px) and (min-height:801px) {
    html {
        font-size: 100%;
    }

    .max-width {
        width: 90%;
    }

    .navbar-inner.flex {
        justify-content: center;
    }

    .menubar {
        margin: 3rem 0;
    }

    #hero-section {
        padding: 0 1rem;
    }

    #hero-section .input-btn-box {
        width: 80%;
    }

    .gallery-imgs-container img {
        width: 49%;
    }

    .members-imgs-container img {
        width: 33.33%;
    }

    .social-media-images img {
        width: 15%;
    }

    .footer-inner .subscribe-email-box {
        padding: 1rem;
    }

    .subscribe-email-left {
        width: 40%;
    }

    .subscribe-email-right {
        width: 60%;
        padding-left: 2%;
    }

    .subscribe-email-left h1,
    .subscribe-email-left p {
        font: 1.4rem;
    }

    .subscribe-email-right .email-btn-box {
        width: 100%;
    }

    .subscribe-email-right .email-btn-box input {
        width: 65%;
        font-size: 1.5rem;
    }

    .subscribe-email-right .email-btn-box button {
        width: 35%;
        font-size: 1.5rem;
    }

    .footer-info-col h2 {
        font-size: 2rem;
    }

    .footer-info-col p {
        font-size: 1.3rem;
    }
}

@media only screen and (max-width:850px) {
    .max-width {
        width: 95%;
    }

    .menubar ul.flex {
        gap: 2.2rem;
    }
}

@media only screen and (max-width:768px) {
    html {
        font-size: 92%;
    }

    .open-menubar-btn,
    .close-menubar-btn {
        display: block;
    }

    .navbar-inner.flex {
        justify-content: space-between;
    }

    .menubar {
        position: fixed;
        top: 100%;
        width: 100vw;
        height: 100vh;
        background-color: var(--dark-red);
        transition: all 0.4s ease-in-out;
        left: 0;
        overflow: hidden;
    }

    .menubar ul {
        height: 100%;
    }

    .menubar ul.flex {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6rem;
    }

    .menubar ul li a {
        font-size: 2rem;
        font-weight: 600;
        color: var(--white);
    }

    .menubar ul li a span.red-text {
        color: var(--white);
    }

    #hero-section {
        padding: 1%;
    }

    #hero-section .input-btn-box {
        width: 90%;
    }

    .subscribe-email-left,
    .subscribe-email-right {
        text-align: center;
        width: 100%;
        margin: 1rem auto;
    }

    .subscribe-email-right .email-btn-box input {
        width: 68%;
    }

    .subscribe-email-right .email-btn-box button {
        width: 32%;
    }

    .footer-info-col {
        flex: none;
        width: 48%;
        margin-bottom: 2rem;
    }


}

@media only screen and (max-width:660px) and (max-height:500px) {
    html {
        font-size: 47%;
    }

    .subscribe-email-right .email-btn-box {
        float: none;
        margin: auto;
    }

}

@media only screen and (max-width:660px) and (min-height:500px) {
    html {
        font-size: 90%;
    }

    #hero-section h1 {
        font-size: 4.4rem;
    }

    #hero-section .input-btn-box input {
        width: 68%;
    }

    #hero-section .input-btn-box button {
        width: 32%;
    }

    .gallery-menubar ul.flex {
        gap: 1.5rem;
    }

    .gallery-imgs-container img {
        width: 49%;
    }

    .members-imgs-container img {
        width: 50%;
    }

    .subscribe-email-right .email-btn-box input,
    .subscribe-email-right .email-btn-box button {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width:550px) {
    html {
        font-size: 60%;
    }
}

@media only screen and (max-width:450px) {
    html {
        font-size: 56%;
    }

    #hero-section h1 {
        margin: 5rem 0;
    }

    .gallery-imgs-container img {
        width: 100%;
    }

    .subscribe-email-right .email-btn-box {
        width: 100%;

    }

    .subscribe-email-right .email-btn-box input {
        width: 65%;
    }

    .subscribe-email-right .email-btn-box button {
        width: 35%;
    }

}

@media only screen and (max-width:340px) {
    html {
        font-size: 43%;
    }

    .footer-info-col {
        width: 90%;
        margin-bottom: 3rem;
    }

    .footer-info-col p {
        font-size: 1.5rem;
        padding: 1.5rem;
    }

    .footer-infos-row.flex {
        justify-content: center;
    }
}

@media only screen and (max-width:270px) {
    html {
        font-size: 30%;
    }
}


/*****************************************************
    Media Queries End
*****************************************************/