/*------------------------------*\
 * Project Name: Momra
 * Date of Dev: 12/12/2021
 * File Name: responsive.css
 * Dev Name: Mohamed ELShabrawy
\*------------------------------*/

@media (max-width:992px) {
    .navbar-collapse{background-color: #FFF; padding: 10px;}
}

@media (max-width:768px) {
    .header_content .item_right{
        background-position: 70% 115%;
        background-size: 95% 75%;
        padding-top: 30px;
    }
    .header_content .item_right img.circle{
        margin-top: 15%;
        width: 100%;
        height: 100%;
    }
    .header_content .item_left{background-size: 100% 100%;}
    .header_content h1{font-size: 20px;}
    .header_content p{width: 100%;}
    .btns a{margin: 2px auto 0;}
    .btns a.go_indications{
        font-size: 20px;
        padding: 0 20px;
    }

}

@media (max-width:576px) {
    .header_content{padding: 20px 0;}
    .header_content .item_right{
        background-position: center top;
        background-size: 60% 82%;
        padding-top: 0;
        height: 1500px;
    }
    .header_content .item_right img.circle{
        margin: 0% 5%;
        width: 90%;
        height: 90%;
    }

    .header_content .item_left{
        padding-top: 0;
    }
    
}

@media (min-width:500px) and (max-width:575px) {
    .header_content p{margin-bottom: 5px;}
    .header_content .item_left img{width: 75%; display: block; margin: 0 auto;}
    .header_content h1 span{margin-bottom: 5px;}
}

@media (min-width:350px) and (max-width:500px) {
    .header_content .item_left img{width: 90%;}
    .header_content h1 span{margin-bottom: 5px;}
}


@media (min-width:768px) and (max-width:1200px) {
    .indications .item .top h4{font-size: 20px; padding-top: 17px;}   
}

@media (max-width:495px) {
    .user_inf .avatar{ width: 35px; height: 35px;}
    .user_inf .name{font-size: 12px;}

    .user_inf .setting .dropdown-menu[data-bs-popper] {
        right: -320%;
    }
}
@media (max-width:340px) {
    .user_inf .avatar{ width: 30px; height: 30px;}
    .user_inf .name{font-size: 10px; padding:6px 3px 0 0}
    .login_btn{padding: 6px 10px !important;font-size: 10px;}
}