navbar.css

/*-------------------------------- nav Starts Here --------------------------------*/
nav {
    background-color: #008cba;
    padding: 10px 20px;
    display: flex;
    height: 10%;
    align-items: center;
    font-family: "Times New Roman", Times, serif;
    justify-content: space-between;
}

nav .Hlogo {
    font-size: 24px;
    color: #fff;
}
 
 input.Hsearch {
        width: 470px;
        border: 1px solid #fff;
        display: block;
        height: 35px;
        border-radius: 20px;
        margin-left: 80px;
        padding: 9px 4px 9px 40px;
        background: white url("./icons/search.svg") no-repeat 13px;
    }

.Hicons a{
    
    text-decoration: none;
}

.HnavIcon{
        height: 25px;
    }
/* To display Icons in line*/
.Hicons{
    display: flex;
}

.Hcontainer {
  position: relative;
  width: 50%;
  margin-left: 25px;
}

.Himage {
  display: block;
  width: 20px;
  height: 20px;
}

.Hoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.Hcontainer:hover .Hoverlay {
  opacity: 100;
}

.Htext {
position:absolute;
height:25px;
width:25px;
}
/*-------------------------------- nav Ends Here --------------------------------*/