@media (max-width:750px) {
    footer{
        justify-content: start;
        gap: 3vw;
    }
    .footer-part1, .footer-part2{
        flex-direction: column;
        gap: 2vw;
    }
    .footer-part1 div a{
        font-size: 2vw;
    }
    .footer-part2 div{
        font-size: 2vw;
    }
}
@media (max-width : 809px) {
    section .box{
        width: 43%;
        flex-shrink: 0;
        height: 40vw;
    }
    section div{
        justify-content: center;
        align-items: center;
        width: fit-content;
        display: flex;
        flex-wrap: wrap;
    }
    section .box .boxFooter p{
        font-size: 1.9vw;
    }
    .boxFooter i{
        font-size: 1.3vw;
    }
    .hero h2{
        font-size: 2vw;
    }
    .hero h1{
        font-size: 8vw;
        line-height: 7vw;
    }
    .hero p{
        font-size: 2vw;
    }
    .links a{
        display: none;
    }
    .links i{
        display: block;
        font-size: 3vw;
    }
}
@media (max-width:600px) {
    .heroContainer nav{
        height: 11vh;
    }
    .signUps input{
        display: none;
    }  
    .links img{
        height: 9vw;
    } 
    #signIn{
        font-size: 2vw;
        border-radius: 5vw;
        padding: 3vw 4vw;
    }
    .hero{
        padding: 0;
        /* justify-content: space-between; */
    }
    .hero h1{
        font-size: 12vw;
        width: 70%;
        line-height: 12vw;
    }
    .overlay{
        height: 20%;
    }
    .hero p{
        font-size: 3vw;
        width: 70%;
    }
    .scroller{
        height: 40vh;
    }
    section h2{
        font-size: 7vw;
        margin-top: 6vw;
    }
    .scroller .elem{
        width: 50vw;
    }
    section .box{
        width: 100%;
        height: 70vw;
    }
    .hover{
        height: 20%;

    }
    section .box .boxFooter img{
        width: 6vw;
    }
    .boxFooter i{
        font-size: 3vw;
    }
    section .box .boxFooter p{
        font-size: 3vw;
    }
    #pro{
        font-size: 2vw;
    }
    #explore{
        font-size: 3vw;
        padding: 3vw 4vw;
        border-radius: 5vw;
    }
    .join h2{
        font-size: 12vw;
        line-height: 12vw;
    }
    .join{
        height: fit-content;
        gap: 9vw;
        padding: 10vw 0;
    }
    .join p{
        font-size: 4.2vw;
        line-height: 7vw;
    }
    .join .btns button{
        width: 42vw;
        height: 13vw;
        border-radius: 7vw;
        font-size: 3vw;
    }
    .join h6{
        font-size: 5vw;
    }
    footer{
        height: fit-content;
    }
    .footerScroller{
        height: 20vh;
    }
    .footer-part1 div a{
        font-size: 3vw;
    }
    .footer-part1 img{
        height: 12vw;
    }
    .footer-part1 .icons i{
        font-size: 4vw;
    }
   
}
@media (max-width : 400px) {
    .hero h2{
        font-size: 4vw;
    }
    .hero{
        gap: 8vw;
    }
    .hero h1{
        font-size: 17vw;
        width: 90%;
        line-height: 15vw;
    }
    .hero p{
        font-size: 5vw;
    }
    .footerScroller{
        height: 26vh; 
}