.navbar{



    margin-bottom: -97px;



    background: #0000008a;



}



.navbar .navbar-brand{



    width: 17%;



}



.navbar .navbar-brand img{



    width: 100%;



}



/* .navbar-collapse{



    justify-content: center;



} */



.navbar-nav .nav-item .nav-link {



    font-size: 13px;



    font-family: inherit;



    color: rgb(255, 255, 255);



    font-weight: 500;



    padding: 8px 11px;



    transition: 0.4s;



}



.navbar-nav .nav-item .nav-link:hover{



    color: red;



}



.icon-login{



    position: absolute;



    right: 42px;



}







.icon-login .nav-item .login-button{



    border: 1px solid white;



    padding: 7px 20px !important;



    transition: 0.4s;



}



.icon-login .nav-item .login-button:hover{



    background-color: white;



    color: black;



}



.navbar-nav .dropdown .dropdown-menu{



    background: #0000009e;



    border: 1px solid #ffffff85;



    padding: 0px;



    border-radius: 3px;



}



.navbar-nav .dropdown .dropdown-menu li{



    border-bottom: 1px solid #ffffff5e;



    padding: 2px 3px 6px 3px;



}



.navbar-nav .dropdown .dropdown-menu li:hover{



background-color: white;



}



.navbar-nav .dropdown .dropdown-menu li a{



    color: white;



    font-size: 13px;



}



.navbar-nav .dropdown .dropdown-menu li:hover a{



    color: black;



    



}



.icon-login .login{



    display: flex;



}











/* Responsive class */



 @media (max-width: 1300px){



    .navbar-nav .nav-item .nav-link {



        font-size: 12px;



        padding: 8px 9px;



    }



    .navbar-nav .dropdown .dropdown-menu li a {



        font-size: 15px;



    }



 }







 @media (max-width: 1150px){



    .navbar-nav .nav-item .nav-link {



        font-size: 13px;



        padding: 8px 7px;



    }



    .navbar-nav .dropdown .dropdown-menu li a {



        font-size: 15px;



    }



 }



 @media (max-width: 997px){



    .navbar {



        margin-bottom: 0px !important;
        background: #000000b3;
        width: 100%;
        position: absolute;


    }



.navbar-toggler{



    background-color: white;



}



.navbar .navbar-brand {



    width: 29%;



}



.icon-login {



    position: inherit;



}



.icon-login .login {



    direction: rtl;



    justify-content: end;



    margin-top: 9px;



    margin-bottom: 10px;



}



 }







 @media (max-width:768px){



    .navbar-toggler{



        font-size: 15px;



    }



    .navbar .navbar-brand {



        width: 35%;



    }



 }

 @media(max-width:500px){
    .navbar-nav .nav-item .nav-link {
        font-size: 13px;
        padding: 8px 7px;
    }
 }


 @media (max-width:400px){



    .navbar-toggler {



        font-size: 13px;



    }



    .navbar .navbar-brand {



        width: 40%;



    }

    



 }