/* General */
body {font-family: "Roboto", sans-serif;color: #444444;}
a {color: #008ED1;}
a:hover {color: #707070;text-decoration: none;}
h1, h2, h3, h4, h5, h6 {font-family: "Roboto", sans-serif;}

/* Preloader */
#preloader {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;overflow: hidden;background: #fff;}
#preloader:before {content: "";position: fixed;top: calc(50% - 30px);left: calc(50% - 30px); border: 6px solid #008ED1;
  border-top-color: #fff; border-bottom-color: #fff; border-radius: 50%; width: 60px; height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite; animation: animate-preloader 1s linear infinite;}
@-webkit-keyframes animate-preloader {
  0% { transform: rotate(0deg);  }
  100% { transform: rotate(360deg);  }
}
@keyframes animate-preloader {
  0% { transform: rotate(0deg);  }
  100% { transform: rotate(360deg);  }
}

/* Back to top button */
.back-to-top { position: fixed; display: none; right: 15px; bottom: 15px; z-index: 99999;}
.back-to-top i { display: flex; align-items: center; justify-content: center; font-size: 24px; width: 40px; height: 40px; border-radius: 50px; background: #008ED1; color: #fff; transition: all 0.4s;}
.back-to-top i:hover { background: #00acfd; color: #fff;}
.btn-down-show { position: absolute; right: 50%; bottom: 45px; z-index: 99999; color:#fff; text-align:center;}
.btn-down-show i { display: flex; align-items: center; justify-content: center; margin:0 auto; font-size: 24px; width: 40px; height: 40px; border-radius: 50px; background-color: rgba(200, 200, 200, 0.3); color: #fff; transition: all 0.4s;}
.btn-down-show i:hover { background: #ccc; color: #fff;}
.btn-down-show:hover {color:#fff;}
.btn-down { position: absolute; right: 25px; bottom: 25px; z-index: 99999; color:#999; text-align:center;}
.btn-down i { display: flex; align-items: center; justify-content: center; margin:0 auto; font-size: 24px; width: 40px; height: 40px; border-radius: 50px; background: #eee; color: #999; transition: all 0.4s;}
.btn-down i:hover { background: #ccc; color: #fff;}
.btn-up { position: absolute; right: 25px; top: 25px; z-index: 99999; color:#999; text-align:center;}
.btn-up i { display: flex; align-items: center; justify-content: center; margin:0 auto; font-size: 24px; width: 40px; height: 40px; border-radius: 50px; background: #eee; color: #999; transition: all 0.4s;}
.btn-up i:hover { background: #ccc; color: #fff;}

/* Header */
#header { transition: all 0.5s; z-index: 997; /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */ padding:0 5%;}
/* #header.header-scrolled, #header.header-inner-pages { background: rgba(40, 40, 40, 0.8);} */
#header.header-scrolled .nav-menu a {color:#fff;}
#header .logo { margin: 0; padding: 0; }
#header .logo img { max-height: 40px;}

@media (max-width: 992px) {
  #header { border: 0; padding: 15px 0;}
}

/* Menu */
/* Desktop Navigation */
.nav-menu ul { margin: 0; padding: 0; list-style: none;}
.nav-menu > ul { display: flex;}
.nav-menu > ul > li { position: relative; white-space: nowrap; margin: 0 20px;}
.nav-menu a { display: block; position: relative; /* color: rgba(255, 255, 255, 0.7); */ color:#333; transition: 0.3s;
  font-size: 0.9rem; padding: 10px 3px; font-weight: 600; font-family: "Roboto", sans-serif;}
.nav-menu > ul > li > a:before { /* content: ""; position: absolute; width: 100%; height: 2px; bottom: -2px; left: 0;
  background-color: #ccc ; visibility: hidden; width: 0px; transition: all 0.3s ease-in-out 0s; */}
.nav-menu a:hover:before, .nav-menu li:hover > a:before, .nav-menu .active > a:before { visibility: visible; width: 100%;}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a { color: #000;}
.nav-menu .drop-down ul { display: block; position: absolute; left: 0; top: calc(100% + 30px); z-index: 99; opacity: 0;
  visibility: hidden; padding: 5px 0; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s;
  border-top: 2px solid #008ED1;}
.nav-menu .drop-down:hover > ul { opacity: 1; top: 100%; visibility: visible;}
.nav-menu .drop-down li { min-width: 50px; position: relative;}
.nav-menu .drop-down ul a { padding: 5px 10px; font-size: 14px; font-weight: 500; text-transform: none; color: #282828;}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a { color: #008ED1;}
.nav-menu .drop-down > a:after { content: "\f107";/* "\ea99";*/ font-family: 'Font Awesome 5 Pro'; padding-left: 5px;}
.nav-menu .drop-down .drop-down ul { top: 0; left: calc(100% - 30px);}
.nav-menu .drop-down .drop-down:hover > ul { opacity: 1; top: 0; left: 100%;}
.nav-menu .drop-down .drop-down > a { padding-right: 35px;}
.nav-menu .drop-down .drop-down > a:after { content: "\f106";/* "\eaa0"; */ font-family: Font Awesome 5 Pro; position: absolute;
  right: 15px;}

.prodbut {border:2px solid #fff; color:#fff; padding:3px 15px;}
.prodbut:hover {color:#008ED1;}

@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul { left: -90%;}
  .nav-menu .drop-down .drop-down:hover > ul { left: -100%;}
  .nav-menu .drop-down .drop-down > a:after { content: "\ea9d";}
}

/* Contact Button */
.contact-btn { margin-left: 25px; background: #008ED1; color: #fff; /* border-radius: 50px; */ padding: 8px 25px 9px 25px;
  white-space: nowrap; transition: 0.3s; font-size: 14px; display: inline-block;}
.contact-btn:hover { background: #00acfd;/*00b371;*/ color: #fff;}

@media (max-width: 992px) {
  .contact-btn { margin: 0 48px 0 0; padding: 6px 18px;}
}

/* Mobile Navigation */
.mobile-nav-toggle { position: absolute; right: 15px; top: 20px; z-index: 9998; border: 0; background: none; font-size: 24px;
  transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right;}
.mobile-nav-toggle i { color: #333;}
.mobile-nav { position: fixed; top: 55px; right: 15px; bottom: 15px; left: 15px; z-index: 9999; overflow-y: auto; background: #fff;
  transition: ease-in-out 0.2s; opacity: 0; visibility: hidden; border-radius: 10px; padding: 10px 0;}
.mobile-nav * {  margin: 0; padding: 0; list-style: none;}
.mobile-nav a { display: block; position: relative; color: #282828; padding: 10px 20px; font-weight: 500; outline: none;}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { color: #008ED1; text-decoration: none;}
.mobile-nav .drop-down > a:after { content: "\f107"; /* "\ea99" */; font-family: 'Font Awesome 5 Pro'; padding-left: 10px;
  position: absolute; right: 15px;}
.mobile-nav .active.drop-down > a:after { content: "\f106";}
.mobile-nav .drop-down > a { padding-right: 35px;}
.mobile-nav .drop-down ul { display: none; overflow: hidden;}
.mobile-nav .drop-down li { padding-left: 20px;}
.mobile-nav-overly {width: 100%; height: 100%; z-index: 9997; top: 0; left: 0; position: fixed; background: rgba(15, 15, 15, 0.6);
  overflow: hidden; display: none; transition: ease-in-out 0.2s;}
.mobile-nav-active { overflow: hidden;}
.mobile-nav-active .mobile-nav { opacity: 1; visibility: visible;}
.mobile-nav-active .mobile-nav-toggle i { color: #fff;}

/*  Hero Section */
.hero { width: 100%; height: 90vh; position: relative;}
.hero:before { content: ""; background: rgba(0, 142, 209, 0.2); position: absolute; bottom: 0; top: 0; left: 0; right: 0;}
.hero .container-fluid { /* padding-top: 32px; */ position: relative; text-align: left;}
.hero h1 { margin: 0 0 10px 0; font-size: 64px; font-weight: 700; line-height: 96px; color: #fff; padding-top: 40px;}
.hero h2 { color: #eee; margin-bottom: 40px; font-size: 24px;}
.hero p {color:#fff; font-size:18px;}
#hero-home {background: url("../img/head-home.png") top center; background-size: cover; }
#hero-prod {background: url("../img/head-prod.png") top center; background-size: cover; }
#hero-tech {background: url("../img/head-tech.png") top center; background-size: cover; }
#hero-part {background: url("../img/head-part.png") top center; background-size: cover; }
#hero-about {background: url("../img/head-about.png") top center; background-size: cover; }
#hero-contact {background: url("../img/head-contact.png") top center; background-size: cover; }
#contact-domains {position:relative; margin-top:-300px;}
#contact-domains-wrap {background-color:#fff; border:1px solid #ccc; border-radius:20px; z-index:999999;padding: 3rem; margin:3rem 3rem 0 3rem;}

@media (min-width: 1024px) {
  .hero {  background-attachment: fixed; }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 36px; line-height: 44px;text-align:center; padding-top:0;}
  .hero h2 { font-size: 18px; line-height: 24px; margin-bottom: 30px;}
  .hero .px-5 {padding-left:0.8rem!important; padding-right:0.8rem!important;}
  .hero-contact .mt-5 {margin-top:0!important;}
}


/*  Sections  */
section { padding: 50px 0; overflow: hidden;}
.section-bg { background-color: #8fffd6;}
.section-title { padding-bottom: 30px;}
.section-title h2 { font-size: 24px; font-weight: bold; margin-bottom: 20px; /* padding-bottom: 20px; */ position: relative;}
/* .section-title h2::after { content: ''; position: absolute; display: block; width: 50px; height: 3px; background: #008ED1;
  bottom: 0; left: 0;} */
.section-title h3 { font-size: 20px;  margin-bottom: 20px;}
.section-title p { margin-bottom: 0; color: #777777; font-size: 15px;}

/* About Us */
.about h2 { font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 36px; line-height:50px; color:#8787a6; margin-left:30px;}
.about .img-about {width:65%;}
.about .about-interior {display:flex; align-items:center;}


/* Services */
.services {background-color:#fff}
 .icon-box {padding: 30px 30px; transition: all ease-in-out 0.3s; background: #fefefe; /*box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.1);   border-radius: 18px; */ border-bottom: 5px solid #fff; width:100%;}
.myshadow {box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.1)!important; /*  border-radius: 18px; */ }
 .icon-box .icon { /* width: 64px; height: 64px; background: #008ED1; border-radius: 50px; */ display: flex;
  align-items: center; justify-content: flex-start; margin-bottom: 20px; transition: ease-in-out 0.3s; color: #fff;}
 .icon-box .icon i { font-size: 28px;}
 .icon-box h4 { font-weight: 700; margin-bottom: 15px; font-size: 20px; text-align:left;}
 .icon-box h4 a { color: #002C3C; transition: ease-in-out 0.3s;}
 .icon-box p { line-height: 1.2rem; font-size: .9rem; margin-bottom: 0;}
 .icon-box:hover { transform: translateY(-10px); border-color: #008ED1;}
 .icon-box:hover h4 a { color: #008ED1;}
 .border {border:1px solid #ccc;}
 .more {}
 
 .shadow-sm:hover { transform: translateY(-10px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; transition: ease-in-out 0.3s;}


/* Contact */

section#contact {padding:20px 0px 0px 0px!important; background:url(../img/bg-contact.png) no-repeat right bottom;}
.contact .info { width: 100%; background: #fff;}
.contact .info i { font-size: 32px; color: #008ED1; float: left; line-height: 1;}
.contact .info h4 { padding: 0 0 0 60px; font-size: 22px; font-weight: 600; margin-bottom: 5px; color: #282828;}
.contact .info p { padding: 0 0 0 60px; margin-bottom: 0; font-size: 14px; color: #5b5b5b;}
.contact .info .email, .contact .info .phone { margin-top: 40px;}
.contact .contact-form { width: 100%; /* background: #fff; */}
.contact .contact-form .form-group { padding-bottom: 8px;}
.contact .contact-form .validate { display: none; color: red; margin: 0 0 15px 0; font-weight: 400; font-size: 13px;}
.contact .contact-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: center;
  padding: 15px; font-weight: 600;}
.contact .contact-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: left; padding: 15px;  font-weight: 600;}
.contact .contact-form .sent-message br + br { margin-top: 25px;}
.contact .contact-form .loading { display: none; background: #fff; text-align: center; padding: 15px;}
.contact .contact-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px;
  margin: 0 10px -6px 0; border: 3px solid #18d26e; border-top-color: #eee; -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;}
.contact .contact-form input, .contact .contact-form textarea { border-radius: 0; box-shadow: none; font-size: 14px; border-radius: 4px;}
.contact .contact-form input:focus, .contact .contact-form textarea:focus { border-color: #008ED1;}
.contact .contact-form input { height: 44px;  background:transparent;}
.contact .contact-form textarea { padding: 10px 12px;  background:transparent;}
.contact .contact-form button[type="submit"] { background: #008ED1; border: 0; padding: 10px 30px; color: #fff; transition: 0.4s;
  /* border-radius: 50px; */}
.contact .contact-form button[type="submit"]:hover { background: #00acfd;}

@-webkit-keyframes animate-loading {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes animate-loading {
  0% { transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

/* Breadcrumbs */
.breadcrumbs { padding: 15px 0; background: #f9f9f9; min-height: 40px; margin-top: 72px;}

@media (max-width: 992px) {
  .breadcrumbs { margin-top: 63px;}
}

.breadcrumbs h2 { font-size: 26px; font-weight: 500;}
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0 0 10px 0; margin: 0; font-size: 14px;}
.breadcrumbs ol li + li { padding-left: 10px;}
.breadcrumbs ol li + li::before { display: inline-block; padding-right: 10px; color: #424242; content: "/";}


/* Footer */
#footer { color: #333; font-size: 14px; text-align: center; padding: 30px 0;}
#footer .social-links { margin: 0 0 40px 0;}
#footer  a { display: inline-block; color: #707070;}


#offer {padding:50px 15px;}
#rsuite {height:100vh; background: url(../img/bg-rsuite.png) #f7f7f7 no-repeat top left; position:relative; padding:40px 0px;}
#hrsuite {height:100vh; background: url(../img/bg-hrsuite.png) #fff no-repeat top left; position:relative; padding:40px 0px;}
#inforsuite {height:100vh; background: url(../img/bg-inforsuite.png) #f7f7f7 no-repeat top left; position:relative; padding:40px 0px;}
#online {height:100vh; background: url(../img/bg-online.png) #fff no-repeat top left; position:relative; padding:40px 0px;}
#custom {height:100vh; background: url(../img/bg-custom.png) #f7f7f7 no-repeat top left; position:relative; padding:40px 0px;}
#rsuite .shadow-sm, #hrsuite .shadow-sm, #inforsuite .shadow-sm, #online .shadow-sm, #custom .shadow-sm, #rd .shadow-sm {background-color:#fff; border-radius:10px; min-height:140px;}
#rsuite .row, #hrsuite .row, #inforsuite .row, #online .row, #custom .row, #rd .row {margin:20px 0px;}
#rd { background: url(../img/bg-online.png) #f7f7f7 repeat-y top left; position:relative; padding:40px 0px;}


@media (max-width: 768px) {
  .about .img-about {width:100%;}
  .about .about-interior {display:block;}
  #footer .col-sm-2 {margin-top:10px;}
  #footer .text-right { margin-top:10px;text-align:center!important; }
  .contact-btn {position: absolute; left: 42%;}
    #contact-domains {margin-top:-400px;}
  #contact-domains-wrap {margin:1.5rem 1.5rem 0 1.5rem; padding:1rem;}
  #contact-domains-wrap .col-sm-4 {margin-top:0.5rem;}
  #rsuite, #hrsuite, #inforsuite, #online, #custom {height:auto; background-repeat: repeat-y; padding-bottom:70px;}
  .categprod .col-md-6 {margin-top:10px;}
  .categprod h1 {font-size:2rem;}
  .categprod .btn-up, .categprod .btn-down {display:none;}
}