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

    .container {
        overflow: hidden;
    }

    .nav-bar {
        overflow: hidden;
        height: 7vh;
    }

    .hero {
        flex-direction: column;
        width: 100%;
        overflow: hidden;
    }

    .crazout-hero {
        width: 100%;
        margin: 2rem 0rem;
        padding-left: 2.3rem;
    }

    .crazout-hero-text {
        width: 90%;
    }

    .hero-image {
        width: 90%;
        height: 100%;
    }
    .hero-unlock-container span{
        font-size: 1.7rem;
    }

    /* search-bar */
    .crazout-searchbar{
        width: 60%;
    }
    
    
    /* footer section */
    .footer-container {
        justify-content: space-evenly;
        padding-inline: 2rem;
    }


    
    
    /* why-crazout */
    .why-crazout-container{
        width: 100%;
        overflow: hidden;
    }
    
    .why-crazout-image{
        width: 90%;
        height: 100%;
    }
    .dine-lavish-container{
        flex-direction: column;
        justify-content: left;
        gap: 50px;
    }
    .dine-lavish{
        width: 100%;
    }
    
    /* BRANDING & MARKETING */
    .grow-with-crazout{
        width: 90%;
        overflow: hidden;
    }
    .groww-contain-text{
        width: 50%;
        height: 100%;
    }
    .groww-contain-image {
        width: 40%;
        height: 100%;
    }
    .grow-nav{
        margin: 2.5rem auto 2rem auto;
    }
    .grow-nav button{
        font-size: 1rem;
    }
    /* FAQs */
    .faq-container{
        width: 90%;
        overflow: hidden;
    }

}


@media screen and (max-width:767px) {
    .crazout-hero-text {
        width: 100%;
    }
}

@media screen and (max-width:479px) {
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }
    h3{
        font-size: 1.2rem;
    }
    p{
        font-size: 1rem;
    }
    .crazout-logo{
        display: none;
    }
    .nav-bar{
        justify-content: right;
    }
    .hero {
        flex-direction: column;
        width: 100%;
        overflow: hidden;
    }
    .crazout-hero {
        width: 100%;
        margin: 1rem 2rem 1rem 0rem;
        /* padding-inline: 2.5rem; */
        justify-content: left;
        /* margin-right: 2rem; */
    }
    .crazout-hero-text h1{
        font-size: 1.8rem;
    }
    .crazout-hero-text {
        width: 100%;
    }

    .crazout-searchbar {
        width: 80%;
    }

    .why-crazout-container h2{
        font-size: 1.6rem;
    }
    .why-crazout-container{
        width: 100%;
        overflow: hidden;
        margin-inline: auto;
        
    }
    .grow-with-crazout{
        width: 90%;
        overflow: hidden;
    }
    .dine-lavish{
        width: 100%;
        margin: 0rem auto;
        overflow: hidden;
    }


    
    .box1{
        flex-direction: column;
        border: none;
    }
    .box1 .joinus-text{
        display: none;
    }
    
    .container2{
        overflow: hidden;
        margin: 1rem 0rem;
    }
    .footer-container{
        height: 80vh;
        flex-direction: column;
    }

    /* BRANDING & MARKETING */
    .groww-contain{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .grow-with-crazout-text{
        display: none;
    }
    .groww-contain-text{
        width: 90%;
        height: 100%;
    }
    .grow-with-crazout-text2{
        text-align: center;
        display: block;
        font-size: 1.7rem;
        font-weight: 600;
    }
    .groww-contain-image {
        width: 90%;
        height: 100%;
    }
    .grow-nav{
        width: 90%;
        margin: 2.5rem auto;
    }
    .grow-nav .toggle-btn{
    font-size: 1.5vh;
    }
    
    
    .hidden{
        display: none;
    }
}