.name{
    display:inline-block;
   }
    .li{
margin-left:10px;
background-color:grey;
margin-top:20px;
}
.ul{
display:none;
right:0;
top:50px;
float:right;
background-color:black;
}
    .navbtn{
display:inline-block;
cursor:pointer;
height:50px;
width:50px;
float:right;
margin-top:8px;
margin-right:20px;
}
    .close{
display:none;
position:fixed;
width:100%;
height:100%;
top:50px;
left:0px;
right:35%;
background-color:grey;
opacity: 0.5;
z-index: 100;
}
.bar, .bar1, .bar2{
display:block;
width:35px;
background-color:#ECB042;
box-shadow:1px 1px 1px grey;
height:3px;
margin:6px;

}

.ul{
list-style-type: none;
margin-top: 0;
padding: 0;
width: 35%;
z-index: 200;
position: fixed;
height: 100%;
overflow: auto;  
}
.lbtn{
background-color:gold;
box-shadow:2px 2px 4px black;
width:100px;
height:30px;
border-radius:5px;
border:0px;
margin-bottom:20px;
text-decoration:none;
color:white;
text-shadow:2px 2px 5px black;
}.lbtn:hover{
box-shadow:2px 2px 2px blue;
}
.container{
    margin-top:100px;
}   
.first,.second, .third{
width:30%;
height:300px;
margin:10px;
box-shadow:1px 1px 10px black;
display:inline-block;
text-align:center;
}.header{
width:100%;
position:fixed;
top:0;
left:0;
right:0;
background-color:black;
text-align:center;
font-size:40px;
height:50px;
margin-top:0;
color:#ECB042;
text-shadow:2px 2px 10px grey;
box-shadow:1px 5px 20px green;

}.footer{
margin-top:100px;
background-color:black;
box-shadow:1px -5px 20px green;
width:100%;
height:100px;
text-shadow: 4px 2px 2px white;
bottom:0;
margin-bottom:0px;
}.first-h, .second-h, .third-h{
color:white;
text-shadow:2px 2px 2px black;
} 
@media only screen and (max-width:800px){
    .first,.second, .third{
    width:45%;
    margin:10px;
}
}
@media only screen and (max-width:500px){
.first,.second, .third{
    width:90%;
    margin:10px;
}.header{
    font-size:30px;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
.name{
    display:none;
}
}@media only screen and (max-width:370px){
.name{
    display:none;
}
}
.footer-text{
color:black;
text-shadow:2px 2px 2px white;
}
.search{
display:block;
color:blue;
border-radius:10px;
margin-top:80px;
margin-left:2.5%;
}.input{
width:80%;
}.sres{

}
.logo{
display:inline-block;
cursor:pointer;
height:50px;
width:50px;
float:left;
margin-top:2px;
margin-left:20px;

}
#overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3); /* Change the opacity here */
      z-index: 999; /* Ensure the overlay is on top of other elements */
    }
    #loader {
      display: none;
      border: 8px solid white;
      border-top: 8px solid gold;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px;
      z-index: 1000; /* Ensure the loader is on top of the overlay */
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }