/* navbar */
@media (max-width:610px) {
    .navbar  {
        height: 90px;
        flex-direction: column;
        
    
    }
    .navbar ul{
    
    margin-left: 20px;
    
    }
    .navbar ul a{
        font-size: 1.2rem;
        

    }
    .logo {
        margin-right: 85px;
    }
}
@media (max-width:321px) {
    .navbar{
        height: 90px;
        
    
    }
    .navbar ul a{
        font-size: 1rem;
    }
    
}
/* hero */
@media (max-width:426px) {
    .hy{position: absolute;
        bottom: 65%;
        font-size:4.5rem ;
        text-align: center;
        margin-left: 20px;

    }
.hj{
    position: absolute;
    bottom: 45%;
    font-size:4rem ;
    text-align: center;

}
.ft{
    position: absolute;
    bottom:20%;
    font-size:3rem ;
    text-align: center;
}



}
@media (max-width:376px) {
    .hj{
        font-size: 3.5rem;
    }
    
}
@media (max-width:662px) {
    .ft{
        font-size: 3rem;
    }
    
}
@media (max-width:567px) {
    .ft{
        font-size: 2.8rem;
    }
    
}
@media (max-width:533px) {
    .ft{
        font-size: 2.5rem;
    }
    
}
@media (max-width:472px) {
    .hy{position: absolute;
        bottom: 65%;
        font-size:4.5rem ;
        text-align: center;
        margin-left: 20px;

    }
.hj{
    position: absolute;
    bottom: 45%;
    font-size:4rem ;
    text-align: center;

}
.ft{
    position: absolute;
    bottom:20%;
    font-size:3rem ;
    text-align: center;
}
    
}
@media (max-width:401px) {
    .hy{
        font-size:3.6rem ;
        text-align: center;
        margin-left: 20px;


    }
.hj{
    
    font-size:3.5rem ;
    text-align: center;
    
    

}
.ft{
    font-size:3rem ;


}
    
}