#header  {
    display:grid;
    grid-template-rows: 100px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: 
    "a a a b b b b b b c c c "
    ;
    margin:auto;
    
}
#header1{
    grid-area: a;
}
#header2{
    grid-area: b;
   
}
#header3{
    grid-area: c;
}

@media only screen and (min-width:375px) and (max-width:768px)
{
  #header{
    width:100%;
    grid-template-rows: 80px 80px 80px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
    "a"
    "b"
    "c";
  }
}
.headerimg{
    height:80%;
    width:70%;
    margin:4px 50px;
}

#header2 input[type=text] {
   
    width:80%;
    height:30px;
    font-size: 17px;
    padding:7px;
    margin-left: 10px;
    border:none;
  }

  
#elementsContainer{
    border:1px solid #dcdcdc;
    width:100%;
    margin-top: 10px;
    height:20px;
    margin:2px;
  
}
.searchicon{
    color:#dcdcdc;
    margin:2px;
 
}
#header3{
    display:flex;
    justify-content: space-evenly;
}
#header3 > div{
    margin-top:35px;

}
#header3 > div:nth-child(2){
    margin-top:30px;

}
.hicon1{
    text-decoration: none;
    font-size:15px;
    color:#aca1a1;
    font-style: italic;
    font-family: Arial;
}

.active{
    background:white;
    border-radius:10px;
    text-decoration: none;
    font-family: Arial;
 }

.active:hover{
     background:white;
     transition:0s;
     color:rgb(247, 64, 192);
     text-decoration: none;
        
    }
    #elementsContainer > tr> #tdid{
        height:20px;
        padding:0px;
    }

/* Menu bar */

.menubar{
    width:100%;
    height:30px;


}

nav ul{
    padding : 0;
    margin : 0;
    float : left;
    margin-right: 30px;
    color:black;
    font-weight: bold;   

}
nav ul li{
    position : relative;
    text-decoration: none;
    display : inline-block;

}
nav ul li a{
  display : block;
  padding : 0 20px;
  color: black;
  text-decoration: none;
  line-height:30px;
  font-size:15px;
  font-family: 'Poppins', sans-serif;

}
nav ul ul a{
    color:gray;

}
nav ul li a:hover{
 color:#fc2779;

 
}
nav ul ul{
  position:absolute;
  display:none;
  top:30px;
}
nav ul ul h3{
    margin-left:20px;
    margin-bottom:2px;
    font-family: 'Poppins', sans-serif;
}
nav ul li:hover > ul{
  display:block;
  background-color: white;
  margin-left:20px;


  
}
nav ul ul li{
  width:250px;
  float:none;
  height:10px;
  position:relative;
  margin-top:3px;
 
  font-size:8px;
  font-weight: lighter;
  font-family: 'Poppins', sans-serif;
}
nav ul ul li a:hover{
    width:250px;
    position:relative;
    margin-left: 10px;
    overflow: hidden;
    z-index: 1;
    position: relative;
   }
   .container{
    background-color: black;
    color: white;
    width:100%;
    margin-top:20px;
    min-height:50px;
    }
  .container1{
      background-color: black;
      color: white;
      width:100%;
    
      min-height:50px;
      }
    #logo{
    width:70%;
    margin:auto;
    justify-content: end;
    text-align: center;
    }
    #content{
    width:80%;
    margin:auto;
    height:450px;
    display:grid;
    grid-template-columns: repeat(4,1fr);
    /* border:1px solid red; */
    text-align:centre;
    }
    #content>div{
    font-family:Quicksand;
    width:90%;
    height:100%;
    /* border:1px solid yellow; */
    margin:10px;
    color:gray;
    font-size:16px;
    line-height:30px;
    }
    #content>div>h3{
    color:white
    }
    #content>div>div>a{
    color:gray;
    text-decoration: none;
    }
    #content>div>div>a:hover{
    text-decoration: underline;
    color:white
    }
    /* #content>a{
    color:red;
    } */
    .iOG{
    width:80%;
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap:10px
    }
    .icon{
    font-size:30px;
    padding:10px;
    color:gray;
    cursor:pointer;
    }
    #Email>div>input{
    border:none;
    background: transparent;
    color:white
    }
    #Email>div>button{
    padding:10px 30px;
    border-radius: 5px;
    background-color:#fc2779;
    cursor:pointer;
    border:none
    }
    #minbox{
        display:flex;
        justify-content:space-evenly;
    }
   #cont{
     width:350px;
       /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
        height:458px;
         margin:30px 120px; 
   }
 h4{
     padding:15px 30px;
 }
 h1{
     padding-left: 50px ;
     font-size: 30px;
 }
div>button:nth-child(1),div>button:nth-child(2){
     width:310px;
     height:40px;
    margin:3px 0px 0px 20px ;
    color:white;
     font-weight:bold;
     border:0px ;
     text-align: left;
 }
  p{
     text-align: center;
  }  
 div>button:nth-child(1){
     background-color:#4267b2;
    
     
 }
 div>button:nth-child(2){
     background-color:#dd4b39;
     
 }
label, input{
    margin:16px;
    width:300px;
    height:30px;
 }
 button{
     margin:19px;
     border:2px solid black;
     height:40px;
     width:300px
 }

button:hover{
   background-color:rgb(43, 40, 40);
   color:white;
   cursor: pointer;
}
#cont2{
    width:340px;
    height:390px;
    /* border: 1px solid black; */
    margin: 100px;
    margin-top:40px;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
}
.headerdiv{
     width:100%;
      height:100px;
      background-color:rgb(43 40 40);
        color:white;
     text-align: center;
}
.headerdiv>h5{
 line-height: 9px;
 padding-left: 50px;
 font-size: 15px;
}
#cont2>h1{
 padding-left: 120px;
}
#btn1>i,#btn2>i{
 font-size: 20px;
}
@media only screen and (min-width:365) and (max-width:781){
   #minbox{
        flex-direction: column;
   }
   .headerdiv{
       width:100%;
   }
}