@media (max-width: 900px) {
    h1,h2,h3 {
        font-size: 20px !important;
    }
    h4 {
        font-size: 16px !important;
    }
    h5, h6{
        font-size: 15px !important;
    }
    p , a , li , button {
        font-size: 11px !important;
    }
    .brand-name{
        display: flex !important;
    }
    .header-content{
        display: none !important;
    }
    .navbar .top-nav{
        padding:  0 0 10px 0px;
    }
    .navbar .top-nav .top-nav-content {
        flex-direction: column-reverse !important;
    }
    .navbar .top-nav .top-nav-content , footer .content{
        justify-content: center  !important;
    }
    footer .content{
        flex-direction: column !important;
    }
    .navbar .top-nav .top-nav-content , footer .content ul{
        padding: 20px 0px 0px 0px;
    }
    .navbar .top-nav .top-nav-content .content-items{
        width: 100%;
    }
    .navbar .header-content {
        display: none !important;
        
    }
    .navbar .top-nav .brand-name {
        display: flex !important;
        
    }
    .navbar .bottom-nav{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 120px;
        right: -100%;
        border-radius: 0px !important;
        transition: all 300ms linear;
    }
    header{
        padding-top: 100px !important;
    }
    .active-nav{
        right: 0 !important;
    }
    .services .box{
        margin-top: 75px !important;
    }
    .navbar .navbar-toggler{
        display: block !important;
    }
    .navbar .bottom-nav .nav-content .data-content ,
    .navbar .bottom-nav .nav-content{
        flex-direction: column;
    }
    .navbar .bottom-nav .nav-content .data-content li {
        margin: 10px 0px;
    }
    .navbar .top-nav .call-number{
        flex-direction: row;
    }
    .navbar .top-nav .call-number p{
        margin: 0px 10px;
    }
    .navbar .contact , .company-logo{
        display: none;
    }
}