* { 
  font-family: "Poppins", sans-serif;
  
 margin: 0; padding: 0; box-sizing: border-box;
	-webkit-transition-property: all;
	-webkit-transition-duration: .3s;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
	-moz-transition-property: all;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);}

 html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite,
 code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,
  embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin:0; padding:0;border:0; font-size:100%; font:inherit; vertical-align:baseline; scroll-behavior: smooth;;  
  font-family: Inter, Ubuntu, Helvetica, Arial, sans-serif;Font-size:1rem; color: rgb(0, 0, 0);Font-weight:300;Line height:32.04px;}

 body{ width:100%; margin-left:0;  margin-right:0; margin-top:0; margin-bottom:0; margin-width:0; margin-height:0; background: #fff ;
  justify-content: center; align-items: center;
    font-family: Inter, Ubuntu, Helvetica, Arial, sans-serif;Font-size:1rem; color: rgb(0, 0, 0);Font-weight:300;Line height: 32.04px;	
  display: flex;
  background: #333;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 100vh;	
	}
    


.container{  width:100%; min-height:100vh; background:#fff;  position:relative; margin:0; padding:0;   
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */  
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font: inherit;
  vertical-align: baseline;
   white-space: normal;z-index:0;
}
.responsive{height:auto;display:block;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;width:99.8%;justify-content:center;align-items:center;}

 strong{font-size:15px; font-weight:bold;Font-weight:550;}
 em {font-size:14px; font-weight:bold;Font-weight:300; text-decoration:underline; font-style:oblique}
 
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  left: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color:#ff6f61; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover { background-color:#555;transition: 1s; }
    
  .preheader{height:50px; line-height:50px; width:100%; font-size:18px;text-align:left; background-color:#fff; color:#333; padding:0;z-index:9999; z-index:99; }

  header {height:140px; width:100%; margin:1px 1px; font-size:1rem; text-align:center; background-color:#fff; color:white; padding:0; position:-webkit-sticky; position:sticky;top:0; z-index:99; }

  .header-top{height:50px;line-height:50px; width:100%;color:#333;padding:2px; }
  .header-mid{height:45px;  width:100%;   background-color:#fff; padding:2px; margin-bottom:1px;}
  .header-bottom{height:40px;line-height:40px; width:100%;  text-align:center; background-color:#004967;  color:white; padding:2px; }
  

  #whatsapp p{  float:left; line-height:40px ; font-size:1rem;  color:#fff;  margin-left:1px; animation: 1s ease-out 0s 1 slideInFrombottom;    }
  #whatsapp p i{  float:left; line-height:40px;font-size:1rem;  color:#fff; margin-left:2px;  }
  #email{ line-height:40px; font-size:1rem; float:right ; color:#fff; margin-right:15px;animation: 1s ease-out 0s 1 slideInFromtop; }
  
  #logo{width:50px; height:50px;  float:left; margin-top:1px; margin-left:3px; animation: 2s ease-out 0s 1 lightSpeedInLeft;}

  @media (max-width: 700px) {
  #whatsapp p{  line-height:40px; float:left; font-size:.9rem;  color:#fff;  margin-left:2px;  }
  #whatsapp p i{  float:left;  font-size:.9rem;  color:#fff; margin-left:2px;  }
  #email{  font-size:.9rem; float:right ; color:#fff; margin-right:3px; }
    #logo{width:50px; height:50px;  float:left; margin-top:1px; margin-left:3px;}

  }  


.banner{ height:480px; width:100%; text-align:center;  background:#fff ;  padding:0;  color:#000; margin:5px 1px 5px 1px;  z-index:1; 
	-webkit-box-shadow: 0 9px 5px -6px #0c2834;
	-moz-box-shadow: 0 9px 5px -6px #0c2834;
    box-shadow: 0 9px 5px -6px #0c2834; 
	animation: 2s ease-out 0s 1 heartBeat;;
	 }
	@media (max-width:1200px) { .banner{ height:450px; width:100%;   }  }  
	@media (max-width:990px) { .banner{ height:350px; width:100%;   }  }  
	@media (max-width:800px) { .banner{ height:290px; width:100%;   }  }  
	@media (max-width:700px) { .banner{ height:250px; width:100%;   }  }   
	@media (max-width:600px) { .banner{ height:213px; width:100%;   }  }   
	@media (max-width:450px) { .banner{ height:190px; width:100%;   }  }   

 
 section::after{ content: '';display: table;clear:both;   overflow: hidden; z-index:0}

 article {width:100%; min-height:auto; padding:20px;margin-bottom:4px; float:left; background-color:#fff; padding:5px; position:relative ; z-index:0;
 	-webkit-box-shadow: 0 9px 5px -6px #0c2834;
	-moz-box-shadow: 0 9px 5px -6px #0c2834;
    box-shadow: 0 9px 5px -6px #0c2834;
	}
	
article h1{ text-align:center; Font-size:1rem; Font-weight:800; Line-height:28px; color:#333333;margin-top:5px;    z-index:0; animation: 2s ease-out 0s 1 jackInTheBox;}
article h2, article h3{ text-align:left ;  Font-size:18px; Font-weight:650; Line-height:28px; color:#333333;margin-top:5px; margin:1px 13px;   }
article h4{ text-align:left ;  Font-size:18px; Font-weight:550; Line-height:28px; color:#333333;margin-top:5px; margin:1px 13px;   }
article h5, article h6{ text-align:left ;  Font-size:20px; Font-weight:550; Line-height:28px; color:#333333;margin-top:5px; margin:1px 13px;   }
article p { text-align:justify;Font-size:16px;Font-weight:400;  Line-height:28px; color:#26272C; margin-top:5px; margin:1px 13px;   }

	
@media (max-width: 800px) {
	article {width:100%; min-height:auto;  padding:20px; margin-bottom:4px;  float:left;  background-color:#fff; padding:5px;  position:relative ; z-index:9;
  /* only for demonstration, should be removed */
 	-webkit-box-shadow: 0 9px 5px -6px #0c2834;
	-moz-box-shadow: 0 9px 5px -6px #0c2834;
    box-shadow: 0 9px 5px -6px #0c2834;}
	
article h1{ text-align:center; Font-size:13px; Font-weight:700; Line-height:28px; color:#222222;margin-top:5px;  z-index:0;}
article h2, article h3{ text-align:left ;  Font-size:14px; Font-weight:600; Line-height:28px; color:#333333;margin-top:5px; margin:1px 13px;   }
article h4, article h5{ text-align:left ;  Font-size:14px; Font-weight:550; Line-height:28px; color:#333333;margin-top:5px; margin:1px 13px;   }
article h6{ text-align:left ;  Font-size:14px; Font-weight:550; Line-height:28px; color:#333333;margin-top:5px; margin:1px 13px;   }
article p { text-align:left; Font-size:13px;Font-weight:400;  Line-height:28px; color:#26272C; margin-top:5px; margin:1px 13px;   z-index:1; }
}

.row{  display:flex;  box-sizing: border-box;text-align:center ; font-family:"Work Sans", sans-serif  ;  color: rgb(51, 51, 51);z-index:0;}

.column  {  flex:49.50%; padding:10px;  z-index:0; }
.column img{ border-radius:30%;  z-index:1;}

.column h2{  text-align: left; Font-size: 15.8px; Font-weight:550; Line-height:28.8px; color:#283943; }
.column h3{  text-align: left;  Font-size:14px; Font-weight:500; Line-height:28.8px; color:#26272C;}
.column p{  text-align: left;  Font-size: 13px; Font-weight:350; Line-height:28.8px; color:#3A4D57; }
.column p span{  font-weight:bold; font-style:oblique; text-decoration:underline; }


/**************************************** NAV****************************/


/**************************button****************************/

.dropbtns {
  background-color:#004967;
  color:#fff;
  padding:1px 13px;
  font-size:14px;
  border:1px #ccc solid;
  cursor: pointer;
 
   Line-height:35px;
   border-radius:10px;
}

.dropdowns { position: relative;float:left; margin-left:3px; margin-top:1px; color:#000; display: inline-block;}

.dropdowns-content {  position:absolute; display:none; background-color: #fff; min-width:160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index:999;}

.dropdowns-content a {  display:block;  text-decoration:none;  font-size:14px;  padding:1px 12px;  color: black;  border:1px #ccc groove; }

.dropdowns-content a:hover {background-color:#004967;color:#fff;}

.dropdowns:hover .dropdowns-content {  display: block;}

.dropdowns:hover .dropbtns {background-color: #004965;}



/***********************************/

/*for dropdown menu on right side- hamburger*/
.navbar{  position:relative;  float:right; margin-right:16px;top:2px;  z-index:99999999999;}
.dropdown {  position:relative;  display:inline-block; width:60px;  right:22px; }
.dropdown .icon{  position:relative;  background-color:transparent;  padding:0;}
.dropdown .icon:hover{background:none;}
.dropdown ul { 
  list-style-type: none;
  display: block;
  margin: 0;
  padding: 0;
  right:-35px;
  line-height:40px;
  position: absolute;
  width: 225%;
  box-shadow: 0 6px 5px -5px rgba(0,0,0,0.3);
  overflow: hidden;
  text-decoration: none;
  background-color:#fff
}
.dropdown a,  dropdown.toggle > label {
  display: block;
  text-align:center;
  text-decoration: none;
  font-family:helvetica;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: lighter;
  color: #000;
  background-color: #FFF;
}
.dropdown li {
  height: 0;
  overflow: hidden;
  transition: all 500ms;
}
.dropdown.hover li {
  transition-delay: 300ms;
}
.dropdown li:first-child a {
  border-radius: 2px 2px 0 0;
}
.dropdown li:last-child a {
  border-radius: 0 0 2px 2px;
}
.dropdown li:first-child a::before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #FFF;
  margin: -10px 0 0 42px;
}
.dropdown a:hover, .dropdown.toggle > label:hover, .dropdown.toggle > input:checked ~ label {
  background-color: #EEE;
  color: #666;
}
.dropdown > a:hover::after, .dropdown.toggle > label:hover::after, .dropdown.toggle > input:checked ~ label::after {
  border-top-color: #AAA;
}
.dropdown li:first-child a:hover::before {
  border-bottom-color: #EEE;
}
.dropdown.hover:hover li, .dropdown.toggle > input:checked ~ ul li {          
  height: 40px;
}
.dropdown.hover:hover li:first-child, .dropdown.toggle > input:checked ~ ul li:first-child {
  padding-top: 15px;
}
/*for navigation hamburger icon*/
.hamburger { 
  position: relative;
    display: inline-block;
    line-height: 12px;
    width: 35px;
    height: 25px;
    cursor: pointer;
    transition: 1s;
}
.hamburger .line {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 80%;
  border-top: 2px solid #000;
  transition: .5s ease;
}
.hamburger .line:first-child {
  transform: translateY(3.5px);
}
.hamburger .line:last-child {
  transform: translateY(-3.5px);
}

.hamburger.cross .line {
  left: 0;
}
.dropdown:hover .hamburger.cross .line:first-child {
  transform: translateY(11.6667px) rotateZ(45deg);
}
.dropdown:hover .hamburger.cross .line:last-child {
  transform: translateY(-11.6667px) rotateZ(-45deg);
}
.dropdown:hover .hamburger.cross .line:first-child,.dropdown:hover .hamburger.cross .line:last-child {
  width: 100%;
}
.dropdown:hover .hamburger.cross .line:nth-child(2) {
  width: 0;
}

	@media screen and (max-width : 768px) {.navbar{float:right;position:relative; top:5px; }  }

/************************************************/



  nav form { display:flex; width:100%; background-color:#004967; align-content:center;  animation: 2s ease-out 0s 1 bounceIn ; 
  position:-webkit-sticky; position:sticky;top:0; z-index:9999;}
	.navmenu a { color:#ffffff; text-decoration:none; text-transform:uppercase; height:45px; Line-height:45px;  }
	.navmenu label { color:#ffffff; text-decoration:none; text-transform:uppercase;  }
	.navmenu .checkboxlabel, [id^=check] { display: none; cursor:pointer;   }
	.navmenu { margin: 0px auto; padding:0px; background-color: #0d688d;  color:#ffffff; white-space:nowrap; font-weight:normal; }
	.navmenu:after { content: ''; display: table;clear:both; }
	.navmenu ul { position:relative; float:none; padding:0px; margin:0px; list-style:none; cursor:pointer;} 
	.navmenu ul li { float:left; display:inline-block; margin: 0px; background-color: #004967 ; }
	.navmenu ul li:hover { background-color: #0087be;     }
	.navmenu a { display: block; padding:0px 15px; font-size:17px;  }
	.navmenu ul li ul li:hover { background-color:#0d688d; }
	.navmenu a:hover { background-color:#0d688d; }
	.navmenu ul li ul { position: absolute; display: none; top:45px; } 
	.navmenu ul li:hover > ul { display: inherit;background-color: #0d688d; } 
	.navmenu ul li ul li { position:relative; float:none; display: list-item; width:auto; background-color: #0274b2;  animation: 1s ease-out 0s 1 slideInFromtop;}
	.navmenu ul li ul li ul { position: absolute; top:0px; left:100%; }
	.navmenu li > label:after { margin-left:1px; content: '\25bc'; }
	.navmenu li > a:after { margin-left:1px; content: '\25bc'; }
	.navmenu li ul li a:after { display: inline-block; transform: rotate(270deg);       }
	
	.navmenu li > a:only-child:after { content: ''; }

	@media screen and (max-width :750px) {
	
	.navmenu .checkboxlabel  {font-size:16px;font-weight:bold;  }

		.navmenu { margin:0px; white-space:normal; word-wrap: break-word !important; width:100%; }
		.navmenu a:hover { background-color:#0274b2; color:#fff; }
		.navmenu .topmenu { font-size:18px; background-color: #004967; }
		.navmenu .topmenu:after { float:right; content: '\2630'; margin-right:-8px; }
		.navmenu .checkboxlabel + a, .menu { display: none; }
		.navmenu .checkboxlabel { display: block; background-color:#004967 ; padding:0px 16px;  }
		.navmenu .checkboxlabel:hover { background-color: #0d688d; }
		.navmenu [id^=check]:checked + ul { display: block; }
		.navmenu ul li { display: block; width: 100%; }
		.navmenu ul li ul .checkboxlabel, .navmenu ul li ul a { padding: 0px 25px; }
		.navmenu ul li ul li ul { position: relative; left: 0px; }
		.navmenu ul li ul li a {  background: #fff; color: #222; }
		.navmenu ul li ul li ul a { background-color: #0099d8; }
		.navmenu ul li ul li .checkboxlabel, .navmenu ul li ul a, .navmenu ul li ul li ul a { padding: 0px 20px; font-size:16px;  background: #fff; color: #222; }
		.navmenu ul li ul li .checkboxlabel, .navmenu ul li ul a { background-color:#0274b2; }
		.navmenu ul li ul { position: static; float: none; } 
		.navmenu ul li ul li:hover > ul, .navmenu ul li:hover > ul { display: none; } 
		.navmenu ul li ul li { display:block; width:100%; }
		.navmenu ul li ul li ul li { position:static; }
		.navmenu li > label:after { float:right; }
		.navmenu li > a:after { float:right; }
	}
	
	

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromright {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}



@keyframes slideInFromtop{
  0% {
 transform: translatey(100%);  }
  100% {
    transform: translatey(0);
  }
}

@keyframes slideInFrombottom{
  0% {
 transform: translatey(-100%);  }
  100% {
    transform: translatey(0);
  }
}

/*********************get quote**********************************/


.clicker-holder{ float:right;  margin:7px 10px 2px 1px ;}

.clicker { float:right;
    width:162px;
    height:34px;
	line-height:34px;
	margin-top:8px;
	margin-right:8px;

    background:#FF6D4A;
    border-radius:5%;
    color: #FFF;
    font-size:15px;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    animation: animate-pulse 3s linear infinite;
    cursor: pointer
	}

.hiddendiv {display:none;height:0px;width:0px;background-color:#FF6D4A; border: 15px double #b4b8bf;  border-radius:15%; Font-size:12px;
    transition:height 0.5s; 
    -webkit-transition:height 0.5s; 
    text-align: center;
  position: fixed; top: 50%;left: 50%;
  transform: translate(-50%, -50%);
}
.hiddendiv:hover{display:block;	height:300px;width:300px;   border-radius:15%;}
.clicker:focus + .hiddendiv{ display:block;	height:300px;width:300px; z-index:999999999999999999; animation: 2s ease-out 0s 1 zoomInLeft  ; }


@keyframes animate-pulse{
    0%{
        box-shadow: 0 0 0 0 rgba(255,109,74,0.7),  0 0 0 0 rgba(255,109,74,0.7);
    }
    40%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0.0),  0 0 0 0 rgba(255,109,74,0.7);
    }
    80%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0.0),  0 0 0 30px rgba(255,109,74,0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(255,109,74,0.0),  0 0 0 30px rgba(255,109,74,0);
    }
    
}
/*********************get quote**********************************/
.contactus { margin-top:10px;}
.contactus a{ width:200px; height:50px;
  background-image: linear-gradient(#0dccea, #0d70ea);
  border-radius:15px;
  box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
  box-sizing:border-box;
  color:#fff;
  cursor: pointer;
  font-size:16px;
  margin:1px;
  padding:7px 18px;
  text-align:center;
  text-decoration:none;
  margin-top:10px;
}

.contactus a:hover { text-decoration:underline;
  background-color: #222;
  color: white;
}



/********************************** Begin table ************************************/

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse:collapse;
  width:100%;
}

#customers td, #customers th {Font-size:13px;
  border: 1px solid #ddd;
  padding:2px; width:72%;
}

#customers tr:nth-child(even){background-color:#f2f2f3;}

#customers tr:hover {background-color:#ccc;}

#customers th {
  padding-top:6px 0 6px 0;
  text-align:left;
  background-color:#1e4e79;
  color:white;
}
/********************************** End table ************************************/




/************************* gallary image ************************/
 .rowimages { 
  padding:1rem 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap:1rem;
  width:100%;
  overflow: hidden;
  height:7rem;
  position: relative;
}

.rowimages::after {
  content: " ";
  height: 100%;
  width: 100%;
  z-index: 10;
  position: absolute;

}

.item {
  font-weight: bold;
  text-transform: uppercase;
  flex-shrink: 0;
  width:150px;
  height:7rem;
  line-height:7rem;
  padding: 1rem;
  text-align: center;
  border-radius:10px;
  color: #e2e8f0;
  font-size: 0.9rem;
  background-color: #334155;


}

.invert > .original,
.invert > .shadow {
  animation-direction: reverse;
}

.original {
  animation-timing-function: linear;
  animation-duration: 10s;
  animation-name: slide-left;
  animation-iteration-count: infinite;
  animation-direction: forward;
}

.shadow {
  animation-timing-function: linear;
  animation-duration: 10s;
  animation-name: slide-left;
  animation-iteration-count: infinite;
  animation-direction: forward;
}

@keyframes slide-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(-5 * 148px));
  }
}

@keyframes slide-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(-5 * 148px));
  }
}

/***************************************************************/



@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");




.footer {
  position: relative;
  width: 100%;
  background: #3586ff;
  min-height: 100px;
  padding: 20px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.social-icon,
.bottom-menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

.social-icon__item,
.menu__item {
  list-style: none;
}

.social-icon__link {
  font-size: 18px;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}
.social-icon__link:hover {
  transform: translateY(-10px);
}

.menu__link {
  font-size:13px;
  color: #fff;
  margin: 0 8px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 300;
}

.menu__link:hover {
  opacity: 1;
}

.footer p {
  color: #fff;
  margin: 14px 0 4px 0;
  font-size:13px;
  font-weight: 300;
}

.wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("images/banner/wave.png");
  background-size: 1000px 100px;
}

.wave#wave1 {
  z-index: 1000;
  opacity: 1;
  bottom: 0;
  animation: animateWaves 4s linear infinite;
}

.wave#wave2 {
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animate 4s linear infinite !important;
}

.wave#wave3 {
  z-index: 1000;
  opacity: 0.2;
  bottom: 15px;
  animation: animateWaves 3s linear infinite;
}

.wave#wave4 {
  z-index: 999;
  opacity: 0.7;
  bottom: 20px;
  animation: animate 3s linear infinite;
}

@keyframes animateWaves {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-positon-x: 0px;
  }
}

@keyframes animate {
  0% {
    background-position-x: -1000px;
  }
  100% {
    background-positon-x: 0px;
  }
}