/* ###
|
|  Basic Template V1 - Designed by Arti Graphic
|  https://artigraphic.com
|
| ###### */

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. Font & Reset css
02. Global Styles
03. Header
04. Banner
05. Services
06. Products
07. About us
08. Contact us
09. Footer
10. Responsive

--------------------------------------------- */
/* --- font & Reset CSS --- */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {margin:0;padding:0;border:0;outline:0}
.clearfix:after {content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.clearfix {display:inline-block}
html[xmlns] .clearfix {display:block}
* html .clearfix {height:1%}
ul, li {padding:0;margin:0;list-style:none}
header, nav, section, article, aside, footer, hgroup {display:block}
* {box-sizing:border-box}
html, body {-ms-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}

/* --- Global styles --- */
a {text-decoration:none !important;color:#027fff}
h1, h2, h3, h4, h5, h6 {margin-top:0px;color:#027fff}
h2, h4{margin-bottom:20px;color:#17234d}
h3 {margin-bottom:20px}
p {line-height:26px}
img{width:100%;overflow:hidden}
html, body {background:#fff;font-family:'Poppins', sans-serif;font-size:16px;color:#17234d;}
::selection {background:#17234d;color:#fff}
::-moz-selection {background:#17234d;color:#fff}

/* --- Header --- */

.background-header {background-color: #17234d;height:80px!important;position:fixed!important;top:0!important;left:0;right:0;box-shadow:0px 0px 10px rgba(0,0,0,0.15)!important}
.background-header .main-nav .logo {line-height:80px !important;width:160px}
.background-header .nav {margin-top:18px !important}
.header-area {position:absolute;height:110px;top:0;left:0;right:0;z-index:100;transition: all .5s ease 0s}
.header-area .main-nav {min-height:80px;background:transparent}
.header-area .main-nav .logo {line-height:120px;float:left;transition:all 0.3s ease 0s}
.header-area .main-nav .nav {float:right;margin-top:40px;transition:all 0.3s ease 0s;position:relative;z-index:999}
.header-area .main-nav .nav li {padding:0px 25px}
.header-area .main-nav .nav li:last-child {padding-right:0px}
.header-area .main-nav .nav li a {display:block;font-size:14px;color:#fff;transition: all 0.3s ease 0s;height:40px;line-height:40px;letter-spacing:1px}
.header-area .main-nav .nav li:last-child a {font-size:14px;color:#fff;background-color:#027fff;padding:10px 20px !important;display:inline-block;border-radius:7px;height:auto;line-height:25px}
.header-area .main-nav .nav li:last-child a:hover {color:#192452;background-color:#fff}
.header-area .main-nav .menu-trigger {cursor:pointer;display:block;position:absolute;top:33px;width:32px;height:40px;text-indent:-9999em;z-index:99;right:40px;display:none}
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {transition:all 0.4s;background-color:#fff;display:block;position:absolute;width:30px;height:2px;left:0}
.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {background-color: #fff}
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {transition:all 0.4s;background-color: #fff;display:block;position:absolute;width:30px;height:2px;left:0;width:75%}
.background-header .main-nav .menu-trigger span:before, .background-header .main-nav .menu-trigger span:after {background-color:#fff}
.header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after {content:""}
.header-area .main-nav .menu-trigger span {top:16px}
.header-area .main-nav .menu-trigger span:before {transform-origin:33% 100%;top:-10px;z-index:10}
.header-area .main-nav .menu-trigger span:after {transform-origin:33% 0;top:10px}
.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {background-color:transparent;width:100%}
.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}
.background-header .main-nav .menu-trigger.active span:before {background-color:#fff}
.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}
.background-header .main-nav .menu-trigger.active span:after {background-color:#fff}
.header-area.header-sticky {min-height:80px}
.header-area .nav {margin-top:30px}
.header-area.header-sticky .nav li a.active {color:#c8e52a}

/* --- Banner --- */

.banner {height:calc(100vh - 0px);margin:0px;background:#212741 url(../images/banner.jpg);background-size:cover;background-position:center;background-attachment: fixed;}
.banner .container {position:relative;width:90%;margin:0px auto;height:100%}
.banner .header-text {position:absolute;width:70%;top:50%;transform:translateY(-50%)}
.banner .header-text h1 {position:relative;z-index:2;font-size:50px;color: #fff;font-weight:600;opacity:1;visibility:visible;line-height:70px;margin:40px 0px;animation:fadeInLeft 1s;-webkit-animation-delay:1s;animation-delay:.5s}
.banner .header-text h1 em {font-style:normal;color:#c8e52a}
.banner .header-text .buttons {display:inline;opacity:1;visibility:visible}
.blue-button a,
.yellow-button a {
  font-size:14px;
  color:#fff;
  padding:15px 30px;
  display:inline-block;
  border-radius:7px;
  letter-spacing:0.5px;
  transition:all .3s;
}
.blue-button a {background:#027fff}
.yellow-button a {background:#c8e52a}
.blue-button a:hover,
.yellow-button a:hover {background:#17234d}
.banner .header-text .buttons .blue-button {display:inline;float:left;margin-right:20px}
.banner .buttons .blue-button,
.banner .buttons .yellow-button {animation:fadeInUp 2s;-webkit-animation-delay:2s;animation-delay:.5s;opacity:1}

/* --- Services --- */ 

.services {margin:100px auto;display:block;text-align:justify}
.services img{max-width:400px;border-radius:50px 0px}

/* --- Products --- */

.products {background-image: url(../images/cta-bg.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;width: 100%;padding: 80px 0px;text-align:center;color:#fff}
.products-des{margin-bottom:50px}
.products h2{color:#fff;margin-bottom:30px}
.products h3{color:#fff;font-size:20px;margin-bottom:10px}
.products img {margin:0px auto 20px;max-width:75px;}

/* --- About us --- */

section.about-us {margin:100px 0px 200px;text-align:center}
section.about-us h2 {margin-bottom:0px}

/* --- Contact us --- */

#contact{background:#f5f5f5}
#contact .container{max-width:70%;margin:75px auto 0px;padding-bottom:100px}
#contact .info-item {background:#fff;color:#027fff;font-size:15px;text-align:center;padding:40px;border-radius:7px;box-shadow:0px 0px 15px rgba(0, 0, 0, 0.1);transition:all .5s;margin:-100px 0px 75px 0px}
#contact .info-item:hover {background:#17234d;color:#fff}
#contact .info-item:hover h4{color:#fff}
#contact .info-item i {font-size:36px;margin-bottom:25px}
#contact .info-item h4 {margin-bottom:15px}
#contact input,
#contact textarea {background:#fcfcfc;color:#17234d;border-radius:5px;border:1px solid #ddd;font-size:14px;padding:15px 15px;margin:10px 5px;width:100%}
#contact input {height:50px}
#contact textarea {height:150px}
#contact input:hover,
#contact textarea:hover {background:#fcfcfc;color:#17234d;border:1px solid #ccc}
#contact input:hover::placeholder,
#contact textarea:hover::placeholder {color:#17234d}
#contact input::placeholder, 
#contact textarea::placeholder { color:#999}
#contact button{font-size:14px;color:#fff;background:#027fff;padding:15px 30px;display:block;margin:10px auto;border-radius:7px;letter-spacing:0.5px;border:none;transition:all .3s}
#contact button:hover {background:#17234d}

/*  --- Footer --- */

footer {background-color:#17234d;text-align:center;padding:20px 0px;font-size:11px;color:#eee;letter-spacing:1px}
footer p{line-height:20px}
footer a {color:#eee}

/* --- Responsive --- */

@media (max-width: 1200px) {
  .header-area .main-nav .nav li{padding-left:10px;padding-right:10px}
  .header-area .main-nav:before {display:none}
}
@media (min-width: 767px) {.header-area .main-nav .nav {display:flex !important}}
@media (max-width: 992px) {
  .header-area .main-nav .nav li ul li:last-child {display:inline-block}
  .header-area {background-color:#212741}
  .banner .header-text {width:80%}
}
@media (max-width: 767px) {
  .header-area .main-nav .logo {line-height:100px}
  .background-header .main-nav .logo {line-height:80px}
  .banner .header-text {text-align:center;margin-left:10%;margin-right:10%}
  .banner .header-text h1{font-size:40px;line-height:50px;}
  .products-des{margin-bottom:0px}
  .products img{margin-top:50px}
  .services {margin:70px 25px}
  .services img{max-width:400px;margin-top:50px}
  section.about-us {margin:100px 25px;text-align:center}
  #contact .container{max-width:80%;margin:75px auto 0px;padding-bottom:100px}
  #contact .info-item {margin:-50px 0px 75px 0px}
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {color:#17234d !important;opacity:1}
  .header-area {background-color: #17234d;padding:0px 15px;height:100px;box-shadow:none;text-align:center}
  .header-area .container {padding:0px}
  .header-area .logo {margin-left:0px;line-height:80px}
  .header-area .menu-trigger {display:block !important}
  .header-area .main-nav {overflow:hidden}
  .header-area .main-nav .nav {float:none;width:95%;display:none;-webkit-transition: all 0s ease 0s;-moz-transition: all 0s ease 0s;-o-transition: all 0s ease 0s;transition: all 0s ease 0s;margin:0px}
  .header-area .main-nav .nav li:first-child {border-top:1px solid #eee}
  .header-area.header-sticky .nav {margin-top:100px !important}
  .background-header.header-sticky .nav {margin-top:80px !important}
  .header-area .main-nav .nav li {width:100%;background:#fff;border-bottom:1px solid #eee;padding-left:0px !important;padding-right:0px !important}
  .header-area .main-nav .nav li a {height:50px !important;line-height:50px !important;padding:0px !important;border:none !important;background:#f7f7f7 !important;color:#17234d !important}
  .header-area .main-nav .nav li a:hover {background:#17234d !important;color:#fff!important}
}

@keyframes fadeInLeft{
  0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}
  to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}
}
@keyframes fadeInUp{
  0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}
  to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}
}