/* That css file for the template in all pages   */
/* Variables */
:root {
   --mainBackColor: rgb(13, 179, 199);
   --mainForColor: white;
   --secondForColor: rgb(201, 245, 251);

   --divBorder: none;
}
body {
   font-family: Verdana, sans-serif;
}

/* Format banner div */
.div-banner {
   width: 100%;
   background-color:  rgb(13, 179, 199);
   border: var(--divBorder);
   text-align: center;
}
/* Format banner div -> logo div */
.div-logo {
   width: 20%;
   vertical-align: middle;
   display: inline-block;
   text-align: center;
   border: var(--divBorder);
}
.div-logo img {
   width: 60%;
   padding: 6px;
}
/* Format banner div -> main menu div */
.div-main-menu {
   display: inline-block;
   width: 60%;
   border: var(--divBorder);
   text-align: left;
}
.div-main-menu div {
   display: inline-block;
   vertical-align: middle;
   padding: 10px;
   border: var(--divBorder);
}
.div-main-menu button {
   border: none;
   background: none;
   color: var(--mainForColor);
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   transition: 0.6s ease;
}

.div-main-menu button:hover {
    text-shadow: 2px 2px 5px rgba(0 , 0 , 0 , 7);
}

/* Format banner div -> right div */
.div-right {
   display: inline-block;
   width:15%; 
   vertical-align: middle;
   border: var(--divBorder);
   min-width: 150px;
}
/* Format banner div -> right div -> top, mid, bottom div */
.div-right div {
   height: 33%;
   text-align: left;
   border: var(--divBorder);
   padding: 3px;
}
.div-right a {
   text-decoration: none;
   color: var(--secondForColor);
   padding-right: 20px;
   font-size: 12px;
}
.div-right a:hover {
   text-shadow: 2px 2px 2px rgba(0 , 0 , 0 , 3);
}
.div-right img {
   height: 30px;
   cursor: pointer;
   padding: 2px;
   /* border-radius: 50%;*/
}
.div-right img:hover {
   outline: 2px solid black;
}

/* Format the drop down mwnu*/
.div-main-menu-prod {
   position: relative;
   display: inline-block;
   border: var(--divBorder);
}
.drop-down-div {
   display: none !important;
   position: absolute;
   background-color: var(--mainBackColor);
   min-width: 250px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
   z-index: 2;
   
}
.drop-down-div a {
   color: white;
   text-decoration: none;
   display: block;
   background-color: var(--mainBackColor);
   padding: 2px;
   transition: 0.6s ease;
}

.drop-down-div a:hover {
   background-color: gray;
   color: white;
}

.div-main-menu-prod:hover .drop-down-div {
   display: block !important;
}

.h1Test {
   height: 200px;
}

/* ---------------- Footer Zone ----------------------------------- */
.div-footer {
   width: 100%;
   background-color: rgb(7,99,111);
}
.div-footer div {
   border: 1px solid rgb(7,99,111);
}
/* Footer Zone ---> upper div */
.div-upper-foot {
   width: 100%;
}
.div-foot-cleint-logo {
   display: flex;
   width: 98%;
   background-color: white;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
   margin: 10px auto;
   border-radius: 20px;
   flex-wrap: wrap;
}
.div-foot-cleint-logo img {
   height: 80px;
   padding: 10px;
}

/* Footer Zone ---> lower div */

.div-lower-foot {
   height: fit-content;
   width: fit-content;
   margin: 0px auto;
}
.div-lower-foot div {
   border: none; /*1px solid rgb(5 , 70 , 79);*/
   padding-right: 17px;
   padding-left: 17px;
}
.div-lower-foot a {
   color: black;
   width: fit-content;
   text-decoration: none;
   display: block;
   padding: 2px;
   font-size: 12px;
}
.div-lower-foot a:hover {
   color: white;
}
.div-lower-foot button {
   display: inline-block;
   background-color: rgb(27, 133, 145);
   font-size: 12px;
   border: 0px;
   cursor: pointer;
}
#txtEmailReg {
   background-color: rgb(124, 176, 184);
   color: white;
   font-size: 12px;
   border: 0.5px solid black;
} 

/* Footer Zone ---> lower div ---> vertical lower dives (first, second, third and fourth div */
.div-first-lower-foot, .div-second-lower-foot, .div-third-lower-foot, .div-fourth-lower-foot {
   display: inline-block;
   width: fit-content;
   vertical-align: top;
}

.div-low-first-low-foot p {
   margin: 2px auto;
   font-size: 12px;
}

.div-low-first-low-foot button {
   margin-top: 12px;
}
.div-second-lower-foot p {
   margin: 2px auto;
   font-size: 12px;
}

.div-second-lower-foot-low {
   text-align: left;
   padding-left: 0px;
   margin: 0 auto;
}
.btn-rfq-footer {
   width: 100%;
   padding: 0px;
}
.div-third-lower-foot p{
   margin: 0px auto;
   font-size: 12px;
}
.div-third-facility-foot {
   display:  inline-block;
   width: 300px;
   text-align: center;
   margin: 2px auto;
}
.div-third-facility-foot img {
   width: 70px;
   padding: 2px;
}
.div-fourth-lower-up-foot {
   display: inline-block;
   vertical-align: top;
}
.div-fourth-lower-down-foot {
   display: block;
   background-color: var(--mainBackColor);
   width: fit-content;
   height: fit-content;
   text-align: center;
   box-shadow: 2px 2px 5px rgba(0 , 0 , 0 , 7);
   position: relative; 
   top: -50px;
   left: 180px;
}
.div-fourth-lower-down-foot img {
   height: 25px;
   cursor: pointer;
   padding: 2px;
}
.div-fourth-lower-down-foot img:hover {
   outline: 1px solid black;
}
hr {
   border: 0.5px solid black;
}
.rights-reserved-div {
   text-align: center;
   font-size: 12px;
   color : gray;
}