@media only screen and (max-width : 900px){
    #Herosection{
        flex-direction: column;
    }
}
@media only screen and (max-width : 800px){
    #About{
        height: auto;
    }
    .contact_cont{
        flex-direction: column;
    }
}
@media only screen and (max-width : 531px){
    .herocont{
        height: 50%;
        align-items: end;
    }
    .image{
        height: 80%;
    }
    .herotxts{
        width: 100%;
        align-items: center;
    }
    .heromaintext{
        height: 140px;
        width: 80%;
    }
    .heromaintext h2{
        font-size: 14px;
    }
    .ablut_cont{
        flex-direction: column-reverse;
    }
    .abluttt{
        width: 90%;
    }
    .ablutTXTcont{
        width: 80%;
    }
    .about_imgcont{
        width: 90%;
    }
}