*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
    
}

/* ******************nav bar****************** */

#navUl{
  list-style-type: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 111;
  height: 3.5rem;
  background-color: #03346E;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

/* ************* level 1 **************** */

#navUl a{
  color: white;
}

#navUl a:hover,#home a:hover .fa-house{
  color: rgb(184, 252, 12);;
}

#navUl #lvl1DEng .lvl1DEngLi{
  list-style-type: none;
}

#navUl .lvl1 a{
  text-decoration: none;
  color:black;
}

#lvl1DEng {
  position: absolute;
  top: 100%;
  left: 35%;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  display: none;
  border-top: 3px solid red;
  width: 140px;
  z-index: 2;
}

.lvl1DEngLi{
  margin-left: 10px;
}

#lvl1DEng li i{
  margin-left: 8px;
  color: red;
}
 
#lvl1DEng > hr{
  margin: 8px 0;
}

/* ****************** level 2 ************************ */
#dEnglvl2sec{
  width: 740px;
  position: absolute;
  top: 11%;
  left: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  display: none;
  list-style-type: none;
  border-top: 3px solid red;
  line-height: 1.5;
 }

.lvl2DEngLi a{
  margin-left: 15px;
}
.lvl2DEngLi a:hover{
  border: 2px solid gold;
  border-radius: 10px;
  padding: 2px;
}

.lvl2Left{
 list-style-type: none;
 position: relative;
 right: 1.5%;
 bottom: 2%;
 width: 35%;
 border-right: 1px solid rgb(145, 142, 142);
}

.lvl2Left,.lvl2Mid,.lvl2Right{
  line-height: 2;
}

.lvl2Mid{
  list-style-type: none;
  position: absolute;
  top: 3%;
  left: 34%;
 border-right: 1px solid rgb(145, 142, 142);
 width: 250px;

}

.lvl2Right{
  list-style-type: none;
  position: absolute;
  top: 3%;
  left: 68%;
  width: 240px;
}

/* 03346E  blue, 6EACDA light blue, E2E2B6 light cream, 021526 black */

.ulLi a{ 
  text-decoration: none;
  color: white;
  font-size: large;
}

.ulLi a:hover{
    color: #D3C5E5;
}
.ulLi{
    margin-left: 28px;
    padding: 14px 0;
}

#logo{
    width: 15%;
}

#home .fa-house{
    color: #fff;
   position: relative;
   right: 5px;
   bottom: 2px;
   cursor: pointer;
}
#navUl li>#inputSearch{
    width: 300px;
    border-radius: 10px;
    height: 25px;
}

#navUl .DMain i{
  margin-left: 5px; 
  color: white;
   font-size: 16px;
}

#navUl .ulLi:hover #dieselEng,#navUl .ulLi:hover i{
  color: rgb(197, 248, 69);
  transition: 0.5s;
}

#navUl li>#inputSearch::placeholder{
  font-size: small;
 }

#navUl li>#inputSearch ~ .fa-magnifying-glass{
    position: relative;
    right: 45px;
    color: black;
}

.ulLi a {
    position: relative;
  }
  
  /* to add a moving line below  */
  .ulLi a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    transition: width 0.3s ease-in-out; 
  }
  
  .ulLi a:hover::after {
    width: 100%;
  }

/* **************** section1 *********************** */

#cont{
  margin-top: 75px;
}
#cont #contDiv1 h1,#cont #contDiv2 h1{
    text-align: center;
    color: rgb(255, 145, 12);
}

#cont #contDiv1 p{
    padding: 20px;
}

#cont #contDiv1 p span{
    font-size: 20px;
}

#cont #contDiv1 p span:hover{
    color: #f11414;
    cursor: pointer;
}

#cont #contDiv1{
    margin: 25px 20%;
    border: 2px solid firebrick;
}

#cont #contDiv2{
    border: 2px solid green;
    margin: 20px 30%;
}



#cont #contDiv2 #socialMedia{
    list-style-type: none;
    display: flex;
}

#cont #contDiv2 #socialMedia li{
    margin: 30px 9.8%;
}

#cont #contDiv2 #socialMedia li i{
    font-size: 30px;
}

#cont #contDiv2 #socialMedia li:hover i{
    transform: scale(1.5);
  transition: transform 0.2s ease-in-out;
}


#cont #contDiv2 #socialMedia li .fa-facebook{
    color: #1877F2;
}

#cont #contDiv2 #socialMedia li .fa-square-instagram {
    color:#ee2a7b;
}

#cont #contDiv2 #socialMedia li .fa-linked-in {
    color: #0A66C2;
}

#cont #contDiv2 #socialMedia li .fa-youtube {
    color: #FF0000;
}

  /* ****************** footer *********************** */

 #footer{
 background-color: rgba(84, 76, 76, 0.89);
 color: #fff;
 padding: 20px 0;
  }
  
  #footer #divfoot{
    display: flex;
    margin: 0 25px;
  }
  
  #footer ul{
    list-style-type: none;
  }
  
  #footer ul li a{
    color: white;
    text-decoration: none;
  }
  
  #footer #ulLeft,#footer #ulMidLeft , #footer #ulRightMid{
    width: 30%;
    line-height:2;
  }
  
  #footer ul li h1{
    color:rgb(138, 40, 243);
    font-size: 20px;
    font-weight: 700;
    margin-left: 25px;
  }
  
  #footer #ulMidLeft .QLs{
    margin-left: 50px;
  }
  #footer #ulMidLeft li{
    margin-left: 8 rem;
    padding-right: 35px;
    position: relative;
    transition: right 0.2s ease-in-out;
    width: fit-content;
  }
  
  #footer #ulMidLeft li:hover i,#footer #ulMidLeft li:hover a{
    color: #FF0000;
    position: relative; 
    left: 10px;
    transition: right 0.3s ease-in;
  } 
  
  #footer #ulRightMid li i{
    color: rgb(87, 181, 248);
    padding-right: 25px;
  }
  
  #footer #ulRightMid li i:hover{
    font-size:25px;
    transition: font-size 0.2s ease-in-out;
  }
  
  #footer #ulRight{
    margin: 10px 40px;
  }
  #footer #ulRight .fa-brands{
    color: black;
    font-size: 30px;
    padding: 10px;
  }
  
  #footer #ulRight .fa-brands:hover{
    font-size:35px;
    transition: font-size 0.2s ease-in-out;
  }
  
  #footer #ulRight .fa-facebook{
    color: #1877F2;
  }
  
  #footer #ulRight .fa-square-instagram{
    color:#ee2a7b;
  }
  
  #footer #ulRight .fa-linkedin{
    color: #0A66C2;
  }
  
  #footer #ulRight .fa-youtube{
    color: #FF0000;
  }
  
  #footer .moving-lineF{
    position: relative;
    display: inline-block;
  }
  
  #footer .moving-lineF::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0f54dff1;
    transition: width 0.3s ease-in-out;
  }
  
  #footer .moving-lineF:hover::after {
    width: 100%;
  }
  
  #footer p{
    text-align: center;
    /* color: rgb(236, 238, 112); */
    color: bisque;
    margin-top: 20px;
  }

  #footer p .gradient {
    background: linear-gradient(to right, #9dc3f9, #8aecc0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 17px;
    font-weight: 700;
  }