*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family:Roboto,sans-serif;
}
body{
    background: #efefef;
}
#header{
    width: 100%;
    height: 200px;
}
#tophead{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dad8d9;
    padding: 10px 10px 10px 10px;
    font-family:Roboto,sans-serif;
    font-size: small;
    font-weight: bold;
}
#tophead div{
    margin-left: 10px;
    margin-right: 10px;
}
#tophead div:hover{
    border-top: 3px solid red;
}
#middlehead{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    text-align: center;font-family:Roboto,sans-serif;
}
#follow{
    width: 6%;
    height: 70px;
    margin-top: 15px;
    margin-left: 20px;
    display: inline-block;
    justify-content: left;
    text-align: center;
    font-size: small;
    font-weight: bold;
}
#followus{
    display: flex;
    margin-top: 10px;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
}
#followus img{
    width: 35px;
    height: 35px;
}
#logo{
    width: 50%;
    height: 70px;
    display: inline-block;
    margin-left: 20%;
    margin-top: 15px;
    text-align: center;
}
#logo img{
    width: 100%;
    height: 50px;
}
#logo p{
    margin-top: 10px;
    font-size: small;
    font-weight: bold;
}
#bottomhead{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #1f1f1f;
    text-decoration: none;
    color: #fff;
    font-size: medium;
    font-weight: bold;
}
#bottomhead div:hover{
    border-bottom: 3px solid red;
}
#bottomhead div a{
    text-decoration: none;color: #fff;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}

.openBtn:hover {
background: #bbb;
}

.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}

.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: white;
}

.overlay .closebtn:hover {
color: #ccc;
}

.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: white;
}

.overlay input[type=text]:hover {
background: #f1f1f1;
}

.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 20px;
border: none;
cursor: pointer;
}

.overlay button:hover {
background: #bbb;
}
.SearchHero{
color: #ffffff;
padding: 20px;
}
.SearchHero p{
font-size: 13px;
}
#footer{
    width: 100%;
    height: 1050px;
    background-color: #000;
    color: #fff;font-family: Roboto,sans-serif;
    margin-top: 50px;
  }
  #inside-footer{
   width: 900px;
   margin: auto;
   height: 1050px;
  }
  #footer-title{
     width: 900px;
     height: 50px;
     display: flex;color: #787677;
   font-size: 14px;
   line-height: 20px;
   font-weight: 700;
     align-items: center;
     margin-left: 20px;
     border-bottom: 1px solid #4f4f57;
   color: #787677;
   font-size: 14px;
   font-weight: 700;
  }
  #footer-title-inside{
     width: 900px;
     color: #eee;
   text-transform: capitalize;
   font-size: 13px;
   font-weight: normal;
     height: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
  }
  #footer-title-inside-li{
   width: 225px;
   height: 150px;
  }
  #footer-title-inside-li ul{
   margin-left: 30px;
  }
  #footer-title-inside-li li{
   margin-top: 10px;
   margin-bottom: 10px;
  }
  #second-footer{
     width: 900px;
     height: 400px;
     margin-top: 0px;
     display: flex;
     align-items: center;
     border-top: 1px solid #4f4f57;
    
  }
  #second-footer-1 div{
   width: 200px;
   height: 200px;
  }
  #second-footer-1{
   display: inline-block;
   width: 200px;
   height: 400px;
  }
  #second-footer-1 div img{
   width: 40px ;
   height: 40px;
  }
  #second-footer-1 #followwe{
    text-align: left;
    margin-left: 10px;
    padding-top: 30px;
  }
  #second-footer-1 #followwe h5{
   margin-top: 10px ;
   margin-bottom: 10px;color: #787677;
   font-size: 14px;
   line-height: 20px;
   font-weight: 700;
  }
  #second-footer-1 #wireguard{
   width: 100px ;
   height: 50px;
  }
  #second-footer-1 #wg{
   color: #eee;
   text-transform: capitalize;
   font-size: 13px;
  }
  #second-footer-2{
   width: 450px;
   height: 400px;
   display: flex;
   align-items: center;
   justify-content: left;
   border-left: 1px solid #4f4f57;
  }
  #second-footer-2 div{
   width: 225px;
   height: 400px;
  }
  #second-footer-2 div ul{
   padding-left: 30px;
   list-style-type: none;
   margin-top: 50px;
  }
  #second-footer-2 div ul li{
   margin-top: 15px ;
     margin-bottom: 20px;
     color: #eee;
   text-transform: capitalize;
   font-size: 13px;
  }
  #second-footer-3{
   width: 250px;
   height: 400px;
   display: inline-block;
   border-left: 1px solid #4f4f57;
  }
  #second-footer-3 ul{
   padding-left: 30px;
   list-style-type: none;
   color: #eee;
   text-transform: capitalize;
   font-size: 13px;
   margin-top: 50px;
   margin-left: 10px;
   line-height: 20px;
  }
  #second-footer-3 ul li{
     margin-top: 10px ;
     margin-bottom: 10px;
  }
  #footer-end{
   width: 900px;
   height: 50px;
   display: flex;
   align-items: center;

  }
  #footer-end div{
     width: 450px;
     height: 50px;
     display: flex;
   align-items: center;
  }
  #fe2 img{
   width: 200px;
   height: 30px;
   margin-left: 250px;
  }
  #fe1 h6{
   color: #787677;
   font-size: 14px;
   line-height: 20px;
   font-weight: 700;
   margin-left: 0px;
  }