@media (max-width: 500px){
    .logo{
        left: 5px;
    }

    .container{
        max-width: 450px;
        margin: 0 auto;
    }

    .hero_left_header h2{
        font-size: 45px;
    }

    .hero_right_image img{
        width: 400px;
    }

    .hero_left_button p{
        width: 400px;
    }

    .bit_left_header h2{
        font-size: 35px;
    }
}


@media (max-width: 430px){

    .container{
        max-width: 380px;
    }

    .hero_left_header{
        padding-top: 5px;
    }

    .hero_left_header h2{
        font-size: 40px;
    }

    .hero_right_image img{
        width: 380px;
    }

    .hero_left_button p{
        width: 350px;
    }

    .bit_left_header h2{
        font-size: 35px;
    }
}

@media (max-width: 400px){

    .container{
        max-width: 380px;
    }

    .hero_left_header{
        padding-top: 5px;
    }

    .hero_left_header h2{
        font-size: 38px;
    }

    .hero_right_image img{
        width: 380px;
    }

    .hero_left_button p{
        width: 320px;
    }

    .bit_left_header h2{
        font-size: 33px;
    }
}

@media (max-width: 380px){

    .container{
        max-width: 350px;
    }

    .hero_left_header h2{
        font-size: 38px;
    }

    .hero_right_image img{
        width: 350px;
    }

    .hero_left_button p{
        width: 300px;
    }

    .bit_left_header h2{
        font-size: 32px;
    }
}

@media (max-width: 360px){

    .logo img{
        width: 40px;
    }
    

    .container{
        max-width: 320px;
    }

    .hero_left_header h2{
        font-size: 35px;
    }

    .hero_right_image img{
        width: 330px;
    }

    .hero_left_button p{
        width: 300px;
    }

    .bit_left_header h2{
        font-size: 30px;
    }
}