/*            header part                   */
#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: 20px;
  
}
.searchicon{
    color:#dcdcdc;
 
}
#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;
        
    }

/* 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;
   }


/*      middle part    */
#cont{
    font-family: Quicksand; 
    display:flex;
    margin:auto;
    margin-top:30px;
    width:70%;
    min-height: 400px;
    justify-content: space-around;
    /* border:1px solid red; */

}
#name{
    width:90%;
    height:30px;
    border-radius: 5px;
}
#email{
    width:90%;
    height:30px;
    border-radius: 5px;
}
#subject{
    width:90%;
    height:30px;
    border-radius: 5px;
}
#phone{
    width:90%;
    height:30px;
    border-radius: 5px;
}
#order{
    width:90%;
    height:30px;
    border-radius: 5px;
}
#attachment{
    width:90%;
    height:30px;
    border-radius: 5px;
}
#message{
    width:90%;
    min-height:30px;
    border-radius: 5px;
}
#submit{
    color:white;
    border-radius: 5px;
    border:none;
    background-color: deeppink;
    padding:10px 40px;
    cursor: pointer;
}        
#leftbox{
    font-family: Quicksand;
    font-size: 16px;
    color: #1B1919;
    width:40%;
    margin:15px;
    padding:20px;
    min-height: 200px;
    /* border:1px solid black */
}
#titletop{
    display: flex;
    
}
#rightbox{
    font-family: Quicksand;
    width:40%;
    min-height:400px;
    padding:20px;
    /* border:1px solid teal; */
}
#middle{
    font-family: Quicksand;
    display:flex;
    /* border:1px solid red; */
    min-height: 100px;
    margin-bottom: 50px;
}
#info1{
    width:100%;
    min-height:50px;
    line-height:20px;
    /* border:1px solid black;         */
}
#info2{
    width:100%;
    min-height:50px;
    line-height:20px;
    /* border:1px solid yellow;  */
}
#lower>a>i:nth-child(1){
    font-size:24px;
    background-color: darkslateblue;
    border-radius:50%;
    margin:5px;
    padding:10px;
} 
#lower>a>i:nth-child(2){
    font-size:16px;
    background-color: deepskyblue;
    border-radius:50%;
    margin:5px;
    padding:10px;
} 
#lower>a>i:nth-child(3){
    font-size:16px;
    background-color: goldenrod;
    border-radius:50%;
    margin:5px;
    padding:10px;
} 
#lower>a>i:nth-child(4){
    font-size:16px;
    background-color: saddlebrown;
    border-radius:50%;
    margin:5px;
    padding:10px;
} 
#lower>a>i:nth-child(5){
    font-size:20px;
    background-color: firebrick;
    border-radius:50%;
    margin:5px;
    padding:10px;
} 

/*                              footer part            */



.container{
    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
}
i{
    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

}