.header{
color:rgb(223, 223, 223);
padding:0;
position:fixed;
top:0;
width:100%;
background-color: whitesmoke;
z-index:99;
transition:0.5s ease-in-out;
height:80px !important;

}

.header ul{
display:flex;
justify-content:space-around;
align-items: center;
}


.header ul .logo{
margin-left: -35px;
   
       }

.header ul .logo a img{
    height:90px;
    width:120px;
    object-fit:cover;
   
       }

.header ul li{
list-style:none;
z-index:9;
}


.header ul .logo a:hover{
   text-decoration:none !important;
   background-color: none !important;
    }

.menu-icon{
display:none;
}

@media only screen and (max-width: 1200px) {


    .menu-icon{

        display:inline-block;
        width:24px;
        height:30px;
        cursor: pointer;
        position: relative;
        
        }

    
     .menu-icon:focus,.menu-icon div:focus{
      opacity:1;
     background-color:rgba(10, 33, 68);
        }
      
        

        .bar{
            width:100%;
            height:3px;
            background-color:rgb(10, 33, 68) !important;
            margin:5px 0px;
            transition:0.5s ease-in-out;
           
        }

        .menu-icon.close .bar1{
            transform: rotate(45deg) translate(7px, 4px);
            background-color:rgb(10, 33, 68) !important;
        }

        .menu-icon.close .bar2{
            opacity: 0;
         }

         .menu-icon.close .bar3{
            transform: rotate(-45deg) translate(8px, -4px);
            background-color:rgb(10, 33, 68) !important;
        }

}




@media only screen and (max-width: 789px) {
    .header ul .logo{
     margin-left:-70px;
     z-index:9;
    
        }
}



.header ul li a{
color: rgb(7, 5, 112);
    text-decoration: none !important; 
    text-transform: capitalize;
    font-size:14px;
}

.header ul li a:hover{
    background-color:rgb(3, 66, 126);
    color:white;
    text-decoration: none;
    transition: 0.3s ease;
    padding:5px;


    }

 .login{
    background-color:rgb(3, 66, 126);
   color:white !important;
    padding:8px 10px; 
    border-radius:25px;  
}

.header ul .login a{
 color:white !important; 
}

.header ul .logo a{
    color:grey !important;
}

.header ul .logo a:hover{
  
    color:blue !important;
    text-decoration: none  !important;
    transition: background-color 0.3s ease;
    padding:0px !important;


    }

/* mobile version */

.overlay{
    height:100%;
    width:50%;
    display: block !important;
    position:fixed;
    top:0;
    left: 0;
    color:#818181;
    background-color:whitesmoke;
    overflow-x:hidden;
    transition: block 0.3s ease !important;
    z-index: 9;
    
    
    }
    .overlay-content{
    position:relative;
    top:10%;
    width: 100%;
    text-align: center;
    
    }
    
    .overlay a{
    padding: 4px;
    font-size:15px;
    margin:20px 0px;
    color: rgb(26, 14, 94); 
    display: block;
    text-transform: capitalize;
    font-weight:bold;
    font-family:poppins;
    text-transform:bold;
  
    text-decoration:none;
    }


    .overlay a:hover{
        opacity:0.7;
    }
    

@media only screen and (max-width: 768px) {
 .header ul .faq,
 .header ul .categories,
 .header ul .blacklisted,
 .header ul .blog,
 .header ul .golive,
 .header ul .signup,
 .header ul .protest,
 .header ul .complain
 {
display:none;
   
}

}



.overlayParent{
display:none !important;


}