@import url(http://fonts.googleapis.com/css?family=Roboto);

* {  margin: 0; padding: 0; box-sizing: border-box;
	-webkit-transition-property: all;
	-moz-transition-property: all; }
	
 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;   scroll-behavior: smooth;  Line-height:35.007px; color:#1E1E1E;
body {  min-height: 100vh; background: #fff;  color:#1E1E1E;   font-family: 'Poppins', sans-serif, "Montserrat";}

.container{  width:100%; min-height:100%; background:#fff;  position:relative; margin:0; padding:0;  color:#1E1E1E; Font-size:16px;
 justify-content: center;align-items: center;  
  -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; font-family: 'Poppins', sans-serif, "Montserrat";}
  
.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;}
h1, h21, h3, h4, h5,h6 { display: block; margin-left:0; margin-right:0; font-weight:  }
h1 { font-size: 1.2em;text-align:center; margin-top: 0.67em; margin-bottom: 0.67em; font-weight: bold; }
h2 {font-size: 1.15em; margin-top: 0.83em; margin-bottom: 0.83em;  font-weight: bold; }
h3 {font-size: 1.1em; margin-top: 1em; margin-bottom: 1em; font-weight: bold; }
h4 { font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em;  font-weight: bold; }
h5 { font-size: 1em; margin-top: 1.67em; margin-bottom: 1.67em;  font-weight: bold; }
h6 {font-size: 1em; margin-top: 2.33em; margin-bottom: 2.33em;  font-weight: bold;color:#000;color:#1E1E1E; }

p { font-size:18px; margin-right:10px;margin-left:5px; }
span{​​text-align:left; background-color:#000;color:#ecf39e;}

header {width:100%; height:70px; line-height:70px;background-color:#262626; text-align:center; font-size:22px;  color:#fff; position:-webkit-sticky; position:sticky;top:0; z-index:99999999; }
	@media screen and (max-width: 700px) {  header{height:60px;}}	

.logo-name{float:right; margin-right:2px; } 
.logo-name p{font-size:14px; color: #212529; line-height:40px; } 

  .header-top{height:40px;line-height:40px;font-size:1rem; width:100%;  text-align:center; background-color:#2581DC; padding:2px; }
  #whatsapp p{  float:left; line-height:40px ;  margin-left:1px; color:#fff;   }
  #whatsapp p i{  float:left; line-height:40px; margin-left:2px; color:#fff; }
  #email{float:right; line-height:40px; margin-right:1px;color:#fff; }

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

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

.column {float:left; width:25%; display: block; padding: 5px 10px; background-color: #fff;  } 
.column img{ animation:appear 2s ease-out 0s 1 ; animation-timeline: view(); animation-range: entry 0% cover 40%; }
.row {margin:0px -5px; margin-bottom:22px ;}

.row:after {content: ""; display: table; clear: both;}
@media screen and (max-width: 1100px) {.column {width:50%;   display: block; margin-bottom:5px;}}
@media screen and (max-width:600px) {.column {width: 100%; display: block; margin-bottom:5px;}img{width:96%;height:96%;padding:1px;} }
img{margin-left:7px;display:inline-block;}

.animated {animation-duration: 1s;animation-duration: var(--animate-duration);animation-fill-mode: both;}
@keyframes appear {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
}


	.banner{min-height:400px, width:100%;   margin:4px 0 4px 0; 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;  } 
    .banner img{ width: 100%; ;}

.banner{ display:inline-block; height:470px; width:100%; background-color:#fff ; margin:0;  padding:0; border-radius:10px 10px 10px 10px; color: white;
 margin:0px; z-index:0; }
    
@media (max-width: 1350px) {
.banner{ height:390px;   margin-bottom:10px; margin-top:0; }
}
@media (max-width: 1200px) {
.banner{ height:360px; margin-bottom:10px; margin-top:0; padding:0 10px;}
.subbanner{  height:60px;   }
}
@media (max-width: 1100px) {
.banner{ height:310px;  margin-bottom:10px; margin-top:0; }
.subbanner{  height:60px;  }
}
@media (max-width: 900px) {
.banner{ height:290px;  margin-bottom:10px; margin-top:0; }
}
@media (max-width: 800px) {
.banner{ height:220px;  margin-bottom:10px; margin-top:0; }
.subbanner{  height:60px;  }
}
@media (max-width: 650px) {
.banner{ height:180px;  margin-bottom:10px; margin-top:0; }
.subbanner{  height:25px;  }
}
@media (max-width: 500px) {
.banner{ height:120px; margin-bottom:10px; margin-top:0;}
.subbanner{  height:30px;   }

}
@media (max-width: 300px) {
.banner{ height:100px; margin-bottom:10px; margin-top:0;}
.subbanner{  height:5px;  }

}

video {width: 100%; height: auto;}





.searchbox{width:99%;margin:5px auto;}

#value{ font-size:20px;
  border:none;
  background:#013d4b;
  padding:3px;
  width:99%;
  border-radius:6px;
  color:white;
}


/* --navigation Start -- */

.navigation { height:70px;background:#fff; /*background:#2581DC;*/  font-size: 0.8em; border-top:1px #ccc groove;}

.brand {
  position: absolute;
  padding-left:10px;
  float: left;
  line-height:70px;
  text-transform: uppercase;
  font-size: 1.0em;
}
.brand a,
.brand a:visited { color:#000000;  text-decoration: none;}

.nav-wrapper {max-width:100%; margin: 0 auto;}

nav { float: right;}
nav ul {list-style: none; margin: 0; padding: 0;}
nav ul li {float: left; position: relative;}
nav ul li a,
nav ul li a:visited { display: block;  padding: 0 10px;  line-height: 70px;  background:#ffffff;  color: #000000; text-decoration:none; border-left:1px #ccc groove;}
nav ul li a:hover,
nav ul li a:visited:hover {background: #2581DC; color: #ffffff;}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {padding-left: 4px; content: " ▾";}
nav ul li ul li { min-width:240px;}

nav ul li ul li a {padding: 10px;line-height: 20px; border-bottom:1px groove #0b437a}


.nav-dropdown { position: absolute; display: none;  z-index: 1; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);}

/* Mobile navigation */
.nav-mobile {display: none;position: absolute; top: 0;right: 0;background:#2581DC;height:70px; width:70px;}

@media only screen and (max-width: 800px) {
	.navigation { height:60px; }
  .nav-mobile { display: block;height:60px;}
  nav {width: 100%;padding:70px 0 15px;}
  nav ul {display: none;}
  nav ul li {float: none;}
  nav ul li a { padding: 15px; line-height: 20px; }
  nav ul li ul li a {padding-left:20px;}

  .nav-dropdown {position: static;}
}

@media screen and (min-width: 800px) { .nav-list { display: block !important;}}
#nav-toggle {position: absolute; left: 18px; top: 20px;cursor: pointer; padding: 10px 35px 16px 0px;}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {top: -10px;}
#nav-toggle span:after { bottom: -10px;}
#nav-toggle.active span { background-color: transparent;}
#nav-toggle.active span:before, #nav-toggle.active span:after {top: 0;}
#nav-toggle.active span:before { transform: rotate(45deg);}
#nav-toggle.active span:after { transform: rotate(-45deg);}


#myBtn {display:none; position:fixed;bottom:20px;left:20px;z-index:99;border:none; outline:none;background-color:#2581DC;color:#fff;cursor:pointer;padding:15px;border-radius:10px; font-size:18px;transition:1s;  }
#myBtn:hover {background-color:#114477;}

footer {position:relative;width:100%;height:auto;padding:40px 50px;background:#fff;}
footer .wrapper {width: 100%;display:grid;grid-template-columns: 2fr 1fr 1fr 1fr;gap:20px;}
footer .wrapper .box {position: relative;}
footer .wrapper .box h2 {position: relative;color: #333;font-size: 20px;font-weight: 600;margin-bottom: 15px;}
footer .wrapper .box .title {color: #4070f4;}
footer .wrapper .box p {font-size: 15px;color: #555;}
footer .wrapper .box .icons {margin-top: 20px;display:grid;grid-template-columns: repeat(4, 50px);}
footer .wrapper .box .icons a {width:36px;height:36px;background: #333;border-radius: 5px;display: grid;place-items: center;}
footer .wrapper .box .icons a i { font-size: 18px;color: #fff;}
footer .wrapper .links a {font-size:15px;color:#555;margin-bottom:10px;display: inline-block;transition:0.3s;}
footer .wrapper .links a:hover,
footer .wrapper .contact li a:hover {color: #4070f4;}
footer .wrapper .contact li {display:grid;grid-template-columns:30px 1fr;margin-bottom:16px;}
footer .wrapper .contact li span {font-size: 18px;color: #555;}
footer .wrapper .contact li a {color: #555;}
.copyright {width:100%;background:#fff;padding: 20px 100px 30px;text-align:center;font-size:15px;color: #555;border-top: 1px solid rgba(0, 0, 0, 0.15);}
@media (max-width: 925px) {
  footer {padding: 30px;}
  footer .wrapper {grid-template-columns: repeat(2, 1fr);}
  .copyright {padding: 20px 40px 30px;}
}

@media (max-width: 640px) {footer .wrapper {grid-template-columns: repeat(1, 1fr);}}

table, th, td { border: 1px solid;}