html{scroll-behavior: smooth;}
::selection {background: #1542ff; color: #ffffff; text-shadow: none;}
::-moz-selection {background: #1542ff; /* Firefox */ color: #ffffff; text-shadow: none;}
::-webkit-selection {background: #1542ff; /* Safari */ color: #ffffff; text-shadow: none;}

body{font-family: 'Roboto', sans-serif; font-size:16px; line-height: 32px; color:#000000; margin: 0px; padding: 0px; background-color:#ffffff; -webkit-font-smoothing: antialiased;}
ul {list-style: none; margin:0;	padding:0;}
ul,li{padding:0; margin:0;}
li{list-style-type: none; font-size: 14px; text-transform: uppercase; font-weight: bold;}
.navbar-nav{margin: 0 0 0 0;}
.navbar-nav li a:hover,
.navbar-nav li a:focus {outline:none;	outline-offset: 0;text-decoration:none; background: transparent;}
a {color: #4f4f4f;	text-decoration: none;-webkit-transition: 300ms;	-moz-transition: 300ms;	-o-transition: 300ms;	transition: 300ms;}
a:focus, a:hover {color: #23527c; text-decoration: underline;}
a:active, a:hover {outline: 0;}
span{font-size: 18px; line-height: 30px; color: #787878;}

h1{font-family: "Albert Sans", sans-serif; font-size:80px; color: #000000; line-height: 80px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h2{font-family: "Albert Sans", sans-serif; font-size:64px; color: #000000; line-height: 78px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h3{font-family: "Albert Sans", sans-serif; font-size:38px; color: #000000; line-height: 48px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h4{font-family: "Albert Sans", sans-serif; font-size:28px; color: #000000; line-height: 38px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h5{font-family: "Albert Sans", sans-serif; font-size:18px; color: #000000; line-height: 22px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h6{font-family: 'Roboto', sans-serif; font-size:22px; color: #6f7381; line-height: 30px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
p{font-family: 'Roboto', sans-serif; font-size:16px; line-height: 24px; color:#000000; margin:0px 0 0 0; padding: 0 0 0 0;}
/* font-family: 'League Gothic', sans-serif; */

@media (max-width:767px){
  h1{ font-size: 12vw; margin: 0 0 0 0; line-height: normal;}
  h2{ font-size: 48px; margin: 0 0 0 0; padding: 0 0 0.5em 0em !important; line-height: 54px;}
  /* h3{ font-size: 22px !important; } */
  /* h4{ font-size: 6vw !important; } */
  p{font-size: 16px;}
}
mark, .mark{background: rgb(19, 111, 245); color: #ffffff;}
.padding-hundred{padding: 100px;}
.padding-top {padding-top:150px;}
.padding-bottom{padding-bottom:150px;}
.padding-none{padding: 0 0 0 0;}
.space-50{padding-top:40px;}
.space-bottom-50{padding-bottom:50px;}

.navbar-toggle {/*border:1px solid #fff;*/	margin-top:15px;}
.navbar-toggle i{color: #ffffff; font-size: 34px;}
.main-nav {left: 0;	position: absolute;	top: 0;	width: 100%; z-index: 1000; border: 0px;}
.top-bar-hide {display: none;}
.top-bar {position:absolute; right:30px;	top:35px;	z-index: 10;}
.top-bar span {margin-left:10px; float: left;}
.top-bar span a {color: #000000; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; float: left; background: #ffffff; padding: 10px 35px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px;}
/* .top-bar span a:hover {color:rgb(255 255 255 / 65%); border: 0;} */
.top-bar span a:hover {color: #513333; text-decoration: none; background: #ffeb3b; -webkit-box-shadow: 0px 4px 17px -1px rgba(4,50,130,1); -moz-box-shadow: 0px 4px 17px -1px rgba(4,50,130,1); box-shadow: 0px 4px 17px -1px rgba(4,50,130,1);}
/* .top-bar span a.active-sub {border-bottom: 2px solid #ffffff; color: rgb(255 255 255 / 85%); text-decoration: none;} */

#navigation .container {position:relative;}
.navbar-brand {width: 240px; height:auto; padding: 0px; margin:20px 0 0 0;}
.navbar-brand a:hover{border: 0px;}
#navigation .navbar-right {margin-top: 60px; margin-right: 0px;}
#navigation .navbar-right li a {color:#ffffff; height: 100%; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: normal; text-transform: none; margin: 0 3px; padding:3px 10px;}
#navigation .navbar-right li a.active,
#navigation .navbar-right li a:hover,
#navigation .navbar-right li a:focus,
#navigation .navbar-right li.active a{border-bottom: 3px solid #f9068b;}

.primary-btn{width: auto; float: left; margin: 0; padding: 20px 30px; background: #2aff42; background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%); color: #ffffff; transition: 0.5s; background-size: 200% auto; -webkit-font-smoothing:auto; font-size: 16px; text-transform: uppercase; line-height: normal; -webkit-border-radius:75px; moz-border-radius: 75px; border-radius:75px; text-align:center; display:block; border: 0px;}
/* .btn-grad {
  background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
} */

/* .btn-grad {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
  outline: none;
  border: none;
}

.btn-grad:hover {

  color: #fff;
  text-decoration: none;
}
 */

.primary-btn:hover{text-decoration: none; color: #fff; background-position: right center;}
.primary-btn i{font-size: 16px; padding: 0 0 0 12px;}
.secondary-btn{width: auto; float: left; margin: 0; padding: 20px 30px; background: #169bb8; color: #fff; -webkit-font-smoothing:auto; font-size: 16px; line-height: normal; -webkit-border-radius:75px; moz-border-radius: 75px; border-radius:75px; text-align:center; display:block; border: none;}
.secondary-btn:hover{color: #fff; background: #1542ff; text-decoration: none; text-decoration: none;}
.submit-btn{padding: 16px 30px; background: #06201b; color: #ffffff; font-family: 'Roboto', sans-serif; -webkit-font-smoothing:auto; font-size: 14px; line-height: normal; -webkit-border-radius:6px; moz-border-radius: 6px; border-radius:6px; border: 0px; text-align:center;}
.submit-btn:hover{text-decoration: none; background: #00745c; color: #fffde8;}
.underline-btn{width: auto; float: left; margin: -10px 0 0 30px; padding: 0px 10px; border-bottom: 2px solid #ffffff; font-size: 16px; color: #ffffff; line-height: normal;}
.underline-btn:hover{text-decoration: none; border-bottom: 3px solid #98989a; color: #98989a;}
.call-btn{width: auto; height: auto; float: left; background: #f8f8f8; padding: 5px 25px 5px 15px; margin: 10px 0 0 30px; font-size: 16px; color: #000000; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.call-btn span{float: left; padding: 5px 10px 0 0; color: #000000;}
.call-btn:hover{background: #efefef; color: #000000; text-decoration: none;}

.roundshadow-btn{width: 60%; height: auto; padding: 10px 30px 10px 30px; background: #ffffff; text-align: center; text-decoration: none; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; box-shadow: -1px 2px 20px -9px rgb(65 65 65); -webkit-box-shadow: -1px 2px 20px -9px rgb(65 65 65); -moz-box-shadow: -1px 2px 20px -9px rgb(65 65 65);}
.roundshadow-btn span{position: absolute; padding-left: 5px}
.roundshadow-btn:hover{text-decoration: none; color: #513333; background: #ffeb3b;}
.logoelement-btn{width: auto; float: left; margin: 0; padding: 10px 40px 10px 25px; background: none; color: #f0ee35; -webkit-font-smoothing:auto; font-size: 14px; line-height: normal; -webkit-border-radius:75px; moz-border-radius: 75px; border-radius:75px; border: 2px solid #f0ee35; text-align:center; display:block;}
.logoelement-btn:hover{text-decoration: none; background: #f0ee35; color: #06201b;}

.textinline-link{color: inherit; text-decoration: underline; text-decoration-thickness: 6px; text-decoration-color: #1542ff;}
.textinline-link:hover{color: #ffffff; background: #1542ff; text-decoration: none; text-decoration-thickness: 5px; text-decoration-color: #ff5a00; padding: 0 0px;}

.contact-btn{color: #ffffff; font-size: 16px; float: left; background: #00745c; padding: 10px 35px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px;}
.contact-btn:hover {color: #179753; text-decoration: none; background: #17ea7b; }

/*++++++++++++++++ Footer CSS +++++++++++++++++*/
.footer {width: 100%; height: auto; float: left; background: #f8f8f8; padding: 100px 0 0 0;}
.hrtext {display: flex; flex-direction: row; align-items: center; width: auto;}
.hrtext h6 {font-family: "Albert Sans", sans-serif; font-size: 18px; color: #000000; flex-grow: 0;}
.foot_site_parent{width: 100%; height: auto; float: left; padding: 0 0 10px 0; margin: 0 0 50px 0; border-bottom: 1px solid #e2e2e2;}
.foot_site_nav {float: left; padding-top: 7px;}
.foot_site_nav ul{width: 100%; height: auto; float: left;}
.foot_site_nav ul li{width: auto; height: auto; padding: 0 14px; float: left;}
.foot_site_nav ul li a{width: auto; height: auto; float: left; font-size: 13px; color: #000000; font-weight: normal; text-transform: none; line-height: 22px;}
.foot_site_nav ul li a:hover {color: #8e90a3; text-decoration: underline; text-decoration-color: #1542ff; text-decoration-thickness: 2px;}
.headerhr {width: 80%; height: 1px; margin: 1rem 0 0 0.8rem; padding: 0 0 0 5rem; background-color: #e2e2e2;}
.footer_logo{float: left;}
.footer_logo img{width: 146px; height: auto; float: left; padding: 0 0 0px 0; margin-right: 15px;}
.footer_logo h6{width: auto; height: auto; float: left; font-family: "Albert Sans", sans-serif; font-size: 16px; color: #000000; line-height: 18px; padding-top: 10px;}
.footer_logo p{width: 100%; height: auto; float: left; font-size: 13px; padding-top: 0px;}
.footer_ul{float: left; }
.footer_ul h4{font-size: 16px; float: left; font-weight: bold; text-transform: uppercase;}
.footer_ul span{font-size: 12px; float: left; color: #666666; text-transform: uppercase; line-height: 0;}
.footer_ul ul{width: 100%; height: auto; float: left; padding-top: 20px;}
.footer_ul ul li{width: 100%; height: auto; float: left; padding: 5px 0;}
.footer_ul ul li a{width: auto; height: auto; float: left; font-size: 13px; color: #000000; font-weight: normal; text-transform: none; line-height: 22px;}
.footer_ul ul li a:hover {color: #8e90a3; text-decoration: underline; text-decoration-color: #1542ff; text-decoration-thickness: 2px;}
.footer_sm_links{width: 100%; height: auto; float: left;}
.footer_sm_links .headerhr{width: 90%;}
.social_ul {float: left;}
.social_ul ul{width: 100%; float: left;}
.social_ul ul li{width: auto; float: left; padding: 0 5px;}
.social_ul ul li a{width: auto; height: auto; float: left; font-size: 13px; color: #000000; font-weight: 500; text-transform: none; line-height: 22px;}
.social_ul ul li a:hover {color: #8e90a3; text-decoration: underline; text-decoration-color: #1542ff; text-decoration-thickness: 2px;}
.footer_ul p{width: 100%; height: auto; float: left; font-size: 13px; color: #000000; font-weight: normal; text-transform: none; line-height: 22px;}
.direction{width: 100%; height: auto; float: left; padding-top: 30px;}
.direction span{font-size: 18px; float: left; padding-right: 5px;}
.direction a{width: auto; height: auto; float: left; font-size: 13px; color: #000000; font-weight: 500; text-transform: none; line-height: 22px;}
.direction a:hover {color: #8e90a3; text-decoration: underline; text-decoration-color: #1542ff; text-decoration-thickness: 2px;}
.social-links{margin: 10px 0 0 0; float: right;}
.social-links h4{padding: 0 0 0 0;}
.social-links P{padding-bottom: 20px;}
.social-links ul{width: auto; height:  auto; float: right; padding: 0px 0 0 0px;}
.social-links ul li{width: auto; height:  auto; float: left; padding-top: 0px; padding-right: 5px; list-style: none;}
.social-links ul li a{width: auto; height: auto; font-size:14px; color: #ffffff; background: #1542ff; padding: 8px 10px; border-radius: 36px;}
.social-links ul li a:hover{color: #ffffff; background: #1542ff;}
.social-links ul li a svg{fill:#ffffff;}
.social-links ul li a svg:hover{fill:#ffffff;}

.copyright {width: 100%; float: left; padding: 25px 0; margin: 0px 0 0 0;}
.copyright .container{border-top: 1px solid #e2e2e2; padding-top: 15px;}
.copyright .col-md-6{padding: 0px;}
.copyright p {text-align:left; font-size: 13px; color: #7e7e7e; padding:10px 20px 10px 0px; margin-bottom:0; float: left;}
.copyright { list-style-type:none; float: left; padding-top:14px; padding-bottom: 14px; margin-bottom:0;}
.copyright li {color: #7e7e7e; float:left; line-height:18px; font-size: 13px; text-transform: none; font-weight: normal; list-style: none; border-right: 1px solid #bcbcbc; padding: 0 10px;}
.copyright li:last-child{border-right: 0px;}
.copyright li:first-child{padding: 0 10px 0 0;}
.copyright li a { color:#7e7e7e;  font-size:12px;}
/* kreativemug styles */
.kreativemug{width:auto; float: right; margin-top: 0;}
.kreativemug span{text-align: left; color: #00755d; font-size: 12px; padding: 10px 0; margin-bottom: 0; float: left;}
.kreativemug a{text-align: left; color: #00755d; font-size: 12px; padding: 13px 0 0 0; margin-bottom: 0; float: left;}
.kreativemug i{font-size: 16px; color: #00755d; float: left; padding: 17px 6px 0 6px;}
.kreativemug a:hover{opacity: 0.8; text-decoration: underline;}
/*++++++++++++++++ Footer CSS ends here +++++++++++++++++*/

/* subpage css */
.sub-pg-banner{width:100%; height: 500px; background:url("../images/packages-pg-bnr.jpg") no-repeat center bottom #fafafc; background-size: cover;}
.subpg-bnr-content{width: 75%; height: auto; padding: 14em 0px 10em 0; margin: 0 auto;}
.subpg-bnr-content h1{color: #ffffff;}
/* .subpg-bnr-content h1:before {background-color: #f0ee35; content: ''; display: block; height: 8px; width: 150px; margin-bottom: 0.25rem;} */
.subpg-bnr-content h6{color: #ffffff; padding-top: 15px;}
.contact-banner{width:100%; height: auto; background:url("../images/contact-bnr-img2.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.about-banner{width:100%; height: auto; background:url("../images/about-us-bnr.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.av-banner{width:100%; height: auto; background:url("../images/security-sytems-bnr.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.homeautomat-banner{width:100%; height: auto; background:url("../images/parking-facilites-img.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.icts-banner{width:100%; height: auto; background:url("../images/network-electric-img.jpg") no-repeat center bottom #0565ca; background-size: cover;}
/* .c2c-banner{width:100%; height: auto; background:url("../images/c2c-bnr-img.jpg") no-repeat center bottom #0565ca; background-size: cover;} */
.contact-sec{width: 100%; height: auto; float: left;}
.contact-main-text {padding: 0 0 50px 0;}
.contact-main-text span{color: inherit;}
.contact-main-text h2{padding-bottom: 15px;}
.contact-main-text h3{padding-bottom: 10px;}
.contact-main-text h5{padding-bottom: 10px;}
.building-box{ padding: 0 0 0 0; margin: 0 0 0 0;}
.building-box span{font-weight: bold; color: inherit;}
.address-box {background: #efefef; padding: 30px 30px 20px 30px; float: left; height: auto}
.address-box h3{padding: 0 0 15px 0;}
.address-box h5{padding: 0 0 15px 0;}
.address-box p{padding: 0 0 16px 0;}
.info-box {background: #e3e3e3; padding: 30px; float: left; height: auto}
.info-box h3{padding: 0 0 15px 0;}
.info-box h5{padding: 0 0 15px 0;}
.info-box p{padding: 0 0 35px 0;}
.email-call{width: 100%; height: auto; float: left; padding: 0px 10px 30px 0px;}
.email-call span{width:100%; height: auto; float: left; padding: 0 15px 0 0;}
.email-call i {color:#464646; font-size:18px; padding-right:5px;}
.email-call a { color:#464646; font-size:15px;}
.email-call a:hover {color: #8e90a3; text-decoration: underline; text-decoration-color: #1542ff; text-decoration-thickness: 2px;}

.contact-form{padding: 15px 0 0 0; /*float: left;*/}
.contact-form .form-group{margin-bottom: 25px;}
.input-box{padding: 0 30px;}
.form-group span{font-size:14px; line-height:24px; color:#1b002e; }
.form-group label{color: #ff0000; background: none; padding: 0 0 0 0;}
.form-box{padding:0 48px; margin: 0 0 0 0; }
.form-box h3{padding: 0 0 20px 0;}
.form-box h6{padding: 0 0 20px 0;}
.form-box h6 a{color: #000000; text-decoration: underline; text-decoration-color: #f64444; text-decoration-thickness: 6px;}
.form-box h6 a:hover{background:#f64444; color: #ffffff;}
.form-group input {width: 100%; height: 42px; background: #ffffff; border: 0px; border-bottom: 1px solid #8c8c8c; box-shadow: none; border-radius: 0;}
.form-group select {width: 100%; height: 38px; font-size: 14px; color: #868686; border-radius: 0px;background: none; border: 1px solid #bfbfbf; box-shadow: none;}
.form-group textarea{border: 1px solid #bfbfbf; border-radius: 6; background: #ffffff; }
.career-img-box{padding: 10px;}
/*========================
g-map styles
===========================*/
.g-map{ margin-bottom: 0px; margin-top:0px;}
/* .g-map img{width: 100px;} */
#map {width: 100%; height: 330px; margin-top: 0px; margin-bottom: 0px;}
.info-window {font-family: 'Roboto', sans-serif; font-size:14px;}
.info-content {color: #999;}
.info-window p{font-size: 12px; line-height: 18px; padding: 0  0;}
/*========================== MEDIA QUERY CSS FOR RESPONSIVE
 Extra small devices (phones, 600px and down)
 ================================ */
  @media only screen and (max-width: 600px) {
    .navbar-brand {width: 225px; margin:20px 10px 10px 10px;}
    .navbar-brand a img{width:160px;}
    #navigation .navbar-right li a{color: #}
    .banner-text h1 {margin: 0 0 20px 0; height: 21px;}
    .welcome-sec h6 {padding-left: 0em !important;}
    .section-background-parallax{background-size: cover !important;}
    .section-background-parallax2{background-size: cover !important;}
    .logo-img-box img {margin: 15px 0px !important;}
    .headerhr{width: 40% !important;}
    .footer_logo{display: none;}

    .form-box{padding: 30px;}
    .input-box{padding: 0 0px;}
    .form-group{padding: 0px;}
    .contact-form .form-group{margin-bottom: 15px;}
    .intro-bullet-parent{padding: 20px 0px 0 10px}
    .footer .container{padding-left:25px; padding-right: 25px;}
    .method-clickarea{padding: 50px 0 !important;}
    .growmetic-waybox-content {padding: 2em !important;}
    .text-black {font-size: 70px !important; line-height: 60px !important;}
    .text-black-2 {font-size: 70px !important; line-height: 60px !important;}
    .subpg-bnr-content{width: 90%;}
    .subpg-bnr-content h1{font-size: 56px !important; line-height: 60px !important;}
    .subpg-bnr-content h6{font-size: 28px; line-height: 28px; padding-top: 15px;}
    .address-box{width: 100%;}
    .info-box{width: 100%;}
    .slider h4 a{font-size: 12px;}
    .nexior-in-numbers h6{padding: 0 0 50px 0;}
    .abt-team-img{padding: 0px !important;}
  }
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
    .sub-pg-text{width: 100%; padding-top: 10em;}
  }
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    /* .navbar-brand{width: 180px;} */
    .top-bar {top:35px; right: 0px;}
  }
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {

  }
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {

  }

  /*+++++++++++++++++
  nav with dropdowns
  ++++++++++++++++++ */
.toggle, [id^=drop] {display: none;}
.toggle i{font-size: 28px; float: right; padding: 10px 5px 0 0;}
nav {display: block; margin-left: auto; margin-right: auto; width:75%;}
nav:after {content:""; display:table; clear:both;}
nav ul {float: right; padding:0; margin:0; list-style: none; position: relative; top:50px;}
nav ul li {text-transform: none; margin: 0px 0px; display:inline-block; float: left;}
nav a {margin: 0 10px; padding:3px 10px; color: #ffffff; font-size: 16px; font-weight: normal; display:block; text-decoration:none; line-height: normal;}
/* nav ul li ul li:hover { border-bottom: 3px solid #f9068b; } */
.menu ul li .active{text-decoration: none; border: 0; text-decoration: none;}
nav ul li ul li:hover{text-decoration: none; border: 0; text-decoration: none;}
nav a:hover {border-bottom: 2px solid #14ff0c; color:rgb(255 255 255 / 66%); text-decoration: none;}
nav a.active {border-bottom: 2px solid #14ff0c; color: rgb(255 255 255 / 66%); text-decoration: none;}
nav ul ul {display: none; position: absolute; top:35px; background: #26a888;}
nav ul li:hover > ul {display:inherit;}
nav ul ul li {width:100%; float:none; display:list-item; position: relative; padding: 3px 0;}
nav ul ul li a{color: #fffde8;}
nav ul ul li a:hover{color: #79e7cc; text-decoration: none; border-bottom: 0px;}
nav ul ul ul li {position: relative; top:-60px; left:170px; }
li > a:after { content:  ''; }
li > a:only-child:after { content: ''; }
@media all and (max-width : 768px) {
nav {width: 100%; margin: 0; background: #1368c7;}
	.toggle + a,
	.menu {display: none;}
  .toggle {display: block; padding:0 0; color:#332537; font-size:14px; text-decoration:none; border:none;}
  .toggle .fa-bars {display: block; padding:20px 10px; color:#ffffff; text-decoration:none; border:none;}
  .toggle .fa-caret-down {display: block; padding: 0 0 0 0; color:#332537; text-decoration:none; border:none;}
  .toggle:hover {background-color: none;}
  [id^=drop]:checked + ul {display: block;}
  nav ul{top: 0;}
	nav ul li {display: block; width: 100%; padding: 5px 10px;}
	nav ul ul .toggle,
	nav ul ul a {padding: 0 40px;}
  nav ul ul ul a {padding: 0 80px;}
	nav a:hover,
 	nav ul ul ul a {}
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{margin: 0 3px; padding:3px 10px; color:#FFF; font-size:14px;}
	nav ul li ul li .toggle,
	nav ul ul a {}
	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		has to be the same number as the "line-height" of "nav a"
	}

	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}

	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {position: static;}
  #btn{display: none;}
}
@media all and (max-width : 330px) {
 	nav ul li {display:block; width: 94%;}

}

.text-black{font-family: "Albert Sans", sans-serif; font-weight: bold; font-size: 140px; line-height: 130px; color: #f6f7ff !important; padding:0px 0 0px 0; float: left;}
.text-black-2{width: 100%; float: left; font-family: 'League Gothic', sans-serif; font-weight: normal; font-size: 150px; line-height: 130px; text-transform:uppercase; padding:0px 0 10px 0; float: left;}
.chakra-petch-bold-italic { font-weight: 700; font-style: italic;}



.address {padding:20px;}
.address h4 {color: #1c022e;}
.address p {color: #1c022e; font-size: 14px; margin:0 0 30px 0;}
.address a{font-size: 14px; color: #1c022e; display:block; line-height:normal; float: left; margin: 0 25px 0 0;}
.address a i{padding-right: 12px; font-size: 16px; color: #ff2ab1;}
.address a:hover{color: #adadad; text-decoration: underline; text-decoration-color: #ff2ab1; text-decoration-thickness: 2px;}

/*  ==== page Progress scroll load === */
.blok:nth-of-type(odd) {background-color:white;}
.blok:nth-of-type(even) {background-color:black;}
@-webkit-keyframes border-transform{

  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; }
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; }
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; }
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; }
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; }
}
/* .paginacontainer {height: 3000px;} */
.progress-wrap {position: fixed; right: 30px; bottom: 30px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset  0 0 0 2px rgba(0,0,0,0.1); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear;}
.progress-wrap.active-progress {opacity: 1; visibility: visible; transform: translateY(0);}
.progress-wrap::after {position: absolute; font-family: 'unicons'; content: '\e84b'; text-align: center; line-height: 46px; font-size: 24px; color: rgba(0, 0, 0, 0.3); left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear;}
.progress-wrap:hover::after {opacity: 0;}
.progress-wrap::before {position: absolute; font-family: 'unicons'; content: '\e84b'; text-align: center; line-height: 46px; font-size: 24px; opacity: 0; background: black; /* --- Pijl hover kleur --- */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; -webkit-transition: all 200ms linear; transition: all 200ms linear;}
.progress-wrap:hover::before {opacity: 1;}
.progress-wrap svg path {fill: none;}
.progress-wrap svg.progress-circle path {stroke: #1542ff; stroke-width: 4px; box-sizing:border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear;}



.contact-form {margin-top: 0px;}
.contact-form .input-block {border: solid 1px #989898; width: 100%; height: 40px; padding: 20px; position: relative; margin-bottom: 15px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.contact-form .input-block.focus {border: solid 1px #eeeeee;}
.contact-form .input-block.textarea {height: auto;}
.contact-form .input-block.textarea .form-control {height: auto; resize: none;}
.contact-form .input-block label {padding: 0 10px; background: #fff; position: absolute; left: 8px; top: 15px; display: block; margin: 0; z-index: 1; color: #999; font-size: 14px; font-weight: normal; line-height: 10px;}
.contact-form .input-block .form-control {background-color: transparent; border: medium none; border-radius: 0; box-shadow: none; color: #333; font-size: 14px; height: 40px; padding: 0; position: relative; top: -20px; z-index: 2;}
.contact-form .input-block .form-control:focus label {top: 0;}
.contact-form .square-button {background: #000000; color: #fff; font-size: 26px; text-transform: uppercase; text-align: center; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 0 60px; height: 60px; border: none; width: 100%;}
.contact-form .square-button:hover,
.contact-form .square-button:focus {background-color: red;}
.contact-form .input-block span{font-size: 12px; position: absolute; top: 38px; color: #7e7e7e;}
.contact-form .input-block.textarea{margin-top: 10px;}
/* a:visited{ color: red } */
/* parallax css */
.parallax-item {display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: Montserrat, sans-serif; width: 100%; min-height: 50vh;}

.socialbtns{width: 100%; height: auto; float: left; padding-top: 30px !important;}
.socialbtns h3{width: 100%; padding-bottom: 20px;}
.socialbtns, .socialbtns ul, .socialbtns li {margin: 0; padding: 0px;}
.socialbtns li {list-style: none outside none; display: inline-block;}
.socialbtns a {width: auto; height: auto; font-size: 22px; color: #464646; padding:10px;}
.socialbtns a svg{  fill: #464646;}
/* .socialbtns a:hover{  fill: white;} */
.socialbtns a svg:hover {fill: #cacaca;}
.nexior-offices{padding: 50px 0 0 0; margin: 0;}
.nexior-offices h3{padding-bottom: 30px; }
.right-border:before {content :""; position: absolute; right: 0; top: 0; height: 80px; width: 50%; border-right:3px solid #169cb9;}
.right-border2:before {content :""; position: absolute; right: 0; top: 0; height: 120px; width: 50%; border-right:3px solid #169cb9;}
.right-border3:before {content :""; position: absolute; right: 0; top: 0; height: 160px; width: 50%; border-right:3px solid #169cb9;}

.about-pg-intro{width: 100%; height: auto; float: left;}
.about-intro-box {padding: 0px 0 50px 0;}
.about-intro-box h2{padding: 0px 0 30px 0;}
.about-intro-box h2 a{color: #000000; text-decoration: underline; text-decoration-thickness: 6px; text-decoration-color: #1542ff;}
.about-intro-box h2 a:hover{background: #1542ff; text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #1542ff; color: #ffffff;}
.about-intro-box-img img{padding-bottom: 2em;}
.about-intro-box-img p{font-family: 'League Gothic', sans-serif; font-weight: normal; font-size:18px; text-transform: uppercase;}
.about-intro-box h6 a{color:#000000; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: #1542ff;}
.about-intro-box h6 a:hover{background: #1542ff; text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #1542ff;}
.reasons-tochoose{padding: 0px; margin-bottom: 3em;}
.reasons-tochoose h2{width: 100%; height: auto; float: left; text-align: center; padding-bottom: 0px;}
.reasons-tochoose span{width: 100%; height: auto; float: left; text-align: center; padding-bottom: 30px;}
.ourvalue_detail_box{padding: 30px; background: #efefef; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; margin: 0 20px 20px 0px; display: block; top: 0px; position: relative; z-index: 0; overflow: hidden;}
.ourvalue_detail_box:hover {transition: all 0.2s ease-out; background: #f7faff; -webkit-box-shadow: 3px 3px 46px 0px rgb(184 184 184 / 44%); -moz-box-shadow: 3px 3px 46px 0px rgb(184 184 184 / 44%); box-shadow: 3px 3px 46px 0px rgb(184 184 184 / 44%); top: -4px;}
.ourvalue_detail_box h6{color: #000000; padding-bottom: 15px;}
.reasons-tochoose h1{font-family: 'League Gothic', sans-serif; font-weight: normal; font-size:70px; padding-bottom: 30px;}
.reasons-subdiv{padding: 30px; border: 1px solid #dddddd; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; float: left;}

.team-section{width: 100%; height: auto; float: left;}
.position-bg-colour{padding:3em 3em 5em 3em; background:#1542ff; position: absolute; z-index:-0; color: #ffffff; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;}
.position-bg-colour h2{padding-bottom: 10px;}
.position-bg-colour h6{color: #245667; padding-bottom: 10px;}
.abt-team-img{width: 100%; height: auto; float: left;}
/* .abt-team-img img{-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;} */
.abt-team-img h3{padding-bottom: 20px;}
.were-defined{width: 100%; height: auto; float: left; margin-top: 5em; background:no-repeat top center #f6f6fa;}
.were-defined h3{color: #ffffff; padding:20px 0 10px 0;}
/* .were-defined img{padding-bottom: 0px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} */
.were-defined p{color: #ffffff;}
.nexior-in-numbers h3{color: #1542ff; font-weight: normal; text-transform: uppercase; font-size: 70px;}
.nexior-in-numbers h3 span{color: #ffffff; font-size: 70px;}
.nexior-in-numbers h6{font-family: "Albert Sans", sans-serif; font-size: 24px; line-height: 30px; padding-top:10px; color: #ffffff;}
.our-people{width: 100%; height: auto; float: left;}

.section-background-parallax3 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax3 {background-image: url("../images/smartgrid-why-bg.jpg");}
.section-background-parallax4 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax4 {background-image: url("../images/team-img-bg.jpg");}

/* .section-background-parallax5 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax5 {background-image: url("../images/meeting-av.jpg");}
.section-background-parallax6 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax6 {background-image: url("../images/theater-av-img.jpg");} */
/* .section-background-parallax7 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax7 {background-image: url("../images/av-console.jpg");} */
/* .section-background-parallax8 {background-attachment: fixed; background-position: center; background-size: contain; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax8 {background-image: url("../images/vidoe-walls.jpg");} */
/* .section-background-parallax9 {background-attachment: fixed; background-position: center; background-size: contain; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax9 {background-image: url("../images/soundwave.jpg");} */
/* .section-background-parallax10 {background-attachment: fixed; background-position: center; background-size: contain; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax10 {background-image: url("../images/studio-img.jpg");} */
/* .section-background-parallax11 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax11 {background-image: url("../images/light-system.jpg");} */

/* Float animate button */
.float {position:fixed; bottom:92px; right:24px; text-align:center; z-index:1000;}
.float .trigger {border-radius:50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); position:relative; background:#42cf47; color:#fff; height:50px; width:50px; vertical-align:middle; animation: 1.5s linear 0s infinite normal pulse; transition: ease-in-out 0.2s; cursor: pointer;}
.float .trigger a i{color: #ffffff;}
.float .trigger:hover{transform:scale(1.1);}
.float.open .trigger .fa::before{content: "\f00d";}
.float .trigger .fa::after{transition: ease-in-out 1s;}
.fab.open .trigger i{transition: all 0.4s ease; transform: translateY(5px) rotate(360deg);}
.float i{font-size:28px; line-height:50px;}
.float .actions{opacity:0; transition: opacity 0.4s ease;}
.float.open .actions{opacity:1;}
.float .p-whatsapp a{position: absolute; opacity:0; background: #fff; color: #333; height: 60px; width: 60px; line-height: 40px; transition: transform 0.4s ease; right: 80px; transform: translateY(50px); transition: all 0.4s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); border-radius: 50%; right:-50px; transition-delay:0.3s; transform-origin: right center 0;}
.float.open .p-whatsapp a{position: absolute; top: 0; opacity:1; background: #fff; color: #333; height: 60px; width: 60px; line-height: 40px; transition: transform 0.4s ease; right: 0px; transform: translateY(50px); transition: all 0.4s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); border-radius: 50%; transition-delay:0.2s;}
.float.open .p-whatsapp a:hover{background:#25d366; color:white;}
.float .actions .p-info:nth-child(1){transform: translateY(-180px)}
@keyframes pulse {
    0% {box-shadow: 0px 1px 0px 3px #42cf477a, 0px 0px 0px 0px #42cf4742;}
    30% {box-shadow: 0px 1px 0px 3px #42cf477a, 0px 0px 0px 5px #42cf4742;}
    70% {box-shadow: 0px 1px 0px 3px #42cf477a, 0px 0px 0px 15px #42cf4742;}
    100% {box-shadow: 1px 1px 2px 1px #42cf477a, 0px 0px 0px 20px transparent;}
  }

.method-clickarea{width: 100%; height: auto; float: left; padding:30px 100px 100px 100px;}
.form-box-homepage{padding:20px 40px 0 40px; background: #ffffff; -webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;}
/* Form radio btn css */
.radio-btn{width: auto; height: auto; float: left; border: 1px dashed #8c8c8c;}
.radio-btn input{width: auto; height: auto; float: left;}
.form-row {background: #ffffff; border-radius: 50px; height: auto; margin: -5px 10px 20px 0px; overflow: hidden; position: relative; width: 150px;}
.form-input {-webkit-appearance: none; appearance: none;}
.form-input::before {content: ''; cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
.form-input:checked::before {background: #00755d;}
.form-input::after {content: ''; cursor: pointer; height: 15px; border-radius: 50px; border: 4px solid #00745c; left: 10%; position: absolute; top: 50%; transform: translate(0, -50%); width: 15px;}
.form-input:checked::after {border: 4px solid #ffffff;}
.radio-btn .form-label {color: #06201b; font-size: 1.3rem; font-weight: normal; margin-left: 40px; margin-top: 5px; /* z-index: 1; position: absolute; This is an alternative option */}
.form-input:checked ~ .form-label {color: #ffffff; position: relative;}


.welcome-sec{width: 100%; height: auto; float: left; background: url("../images/smart-bg.jpg") no-repeat top center;}
.welcome-sec h2{padding: 0 0 0.5em 2em}
.welcome-sec h6{padding-left:6em}
.hilight-text{width:48%; float: left; padding: 0 0 0 50px;}
.hilight-text span {background: #1542ff; font-family: "Albert Sans", sans-serif; font-size: 16px; color: #ffffff; font-weight: bold; text-transform: uppercase;}

.services-intro{width: 100%; height: auto; float: left;}
.services-intro h2{padding-bottom: 30px;}
.services-intro-copy{padding: 20px; float: left;}
.services-intro-copy img{width: 98px; padding: 0 0 50px 0;}
.services-intro-copy p{color: #787878;}
.img-wrapper {overflow: hidden;}
.img-wrapper img {width: 100%;}
.inner-img {transition: 0.3s;}
.inner-img:hover {transform: scale(1.1); -webkit-filter: contrast(0.5); filter: contrast(0.5);}
.feaured-solutions-img{padding: 0 0 0 0; float: left; }
.feaured-solutions{float: left;}
.feaured-solutions span{width: 100%; padding-bottom: 20px; float: left;}
.feaured-solutions h3{width: 100%; padding-bottom: 20px; float: left;}
/* .feaured-solutions span{width: 10%; padding-bottom: 20px; float: left;} */
.feaured-solutions ul{width: 100%; height: auto; float: left;}
.feaured-solutions ul li {width: auto;; height: auto; float: left; padding: 7px 20px; background: #ffffff; font-family: "Albert Sans", sans-serif; font-size: 14px; text-transform: uppercase; color: #000000; margin:0 8px 8px 0; border-radius: 50px; border: 1px solid #c6c6c6;}
.solution-addons{width: 100%; height: auto; float: left; padding: 2.5em;}
.solution-addons img{width: 64px; height: 64px; float: left; margin-bottom: 30px;}
.solution-addons h6{padding-bottom: 0.5em;}
.solution-addons:hover{background: #efefef; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;}
.solution-addons a{width: 100%; height: auto; float: left; border-top: 1px solid #000000; padding: 0.5em 0 0 0;}
.solution-addons a:hover{text-decoration: none; color: #000000;}
.solution-addons a:hover h6{text-decoration: none; color: #000000;}

.solutions-sec{width: 100%; height: auto; float: left; background: #f8f8f8;}
.section-background-parallax {background-attachment: fixed; background-position:top right; background-size: contain; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center; background-repeat: no-repeat;}
.parallax1 {background-image: url("../images/powering-sec-bg.jpg");}

/* .solutions-sec{min-height:100%; background:#fff url("../images/solutions-sec-bg.jpg") no-repeat 50% 100%;
width:100%; overflow:hidden;} */
.solutions-sec-heading{float: left;}
.solutions-sec-heading span{width: 100%; float: left; padding-bottom: 20px;}
.solutions-sec-heading h2{width: 100%; float: left; padding-bottom: 20px;}
.solutions-sec-heading h6{width: 100%; color: #000000; float: left; padding-bottom: 20px;}
.solution-card-parent{float: left;}
.solution-card{width: auto; height: auto; padding:3em 1em 1em 2em; -webkit-border-radius: 38px; -moz-border-radius: 38px; border-radius: 38px; float: left; background: rgb(255,255,255);
background: linear-gradient(168deg, rgba(255,255,255,0.1237088585434174) 0%, rgba(255,255,255,1) 100%); border: 1px solid #ffffff;}
.solution-card img{width: 78px; height: auto; float: left; padding: 0 0 20px 0;}
.solution-card h6{width: 100%; height: auto; float: left; color: #000000; padding: 0 0 20px 0; font-size: 30px;}
.solution-card p{width: 100%; height: auto; float: left; padding: 0 0 0px 0;}
.cta {width: 50px; height: 50px; float: right; border-radius: 50px; border: none; background-color: #1542ff; color: #fff; transition: width 0.7s; margin: 0px 0 0 0;}
.cta:hover {width: 140px; transition: width 0.7s;}
.cta span {opacity: 1; transition: opacity 0.5s; color: #ffffff; font-size: 28px; line-height: 48px; padding-left: 10px;}
.cta:hover span {opacity: 0; transition: opacity 0.5s;}
.cta .button-text {opacity: 0; transition: opacity .5s; position: absolute; left: 285px; font-size: 16px; line-height: 50px; color: #ffffff;}
.cta:hover .button-text {opacity: 1; transition: opacity 0.5s;}


.whyus-sec{width: 100%; height: auto; float: left; background: #000104;}
.whyus-sec span{width: 100%; float: left; padding-bottom: 0px; color: rgb(255 255 255 / 74%);}
.whyus-sec h2{width: 100%; float: left; padding-bottom: 10px; color: #ffffff;}
.whyus-sec h6{width: 100%; color: rgb(255 255 255 / 74%); float: left; padding-bottom: 20px;}
.section-background-parallax2 {background-attachment: fixed; background-position:top left; background-size: contain; width: 100%; color: #FFFFFF; display: flex; background-repeat: no-repeat;}
.parallax2 {background-image: url("../images/facility-sec-bg.jpg");}

/* ======  WHYUS HOVER CARDS ========== */
:root {--d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: "Rubik", sans-serif;
  --font-serif: "Cardo", serif;}
.whyus-cards-parent{float: left;}
.whyus-cards {display: grid; grid-gap:0; margin: 0 auto;}
@media (min-width: 600px) {
  .whyus-cards {grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 800px) {
  .whyus-cards {grid-template-columns: repeat(3, 1fr);}
}
.whyus-cards-detail {position: relative; display: flex; align-items: flex-end; overflow: hidden; width: 100%; text-align: left; color: #ffffff; background: #ffffff; padding: 1em;}
@media (min-width: 600px) {
  .whyus-cards-detail {height: 520px;}
}
.whyus-cards-detail:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 110%; background-size: cover; background-position: 0 0; transition: transform calc(var(--d) * 1.5) var(--e); pointer-events: none;}
.whyus-cards-detail:after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 200%; pointer-events: none; background: rgb(255 255 255); background: linear-gradient(0deg, rgb(11 15 26 / 80%) 30%, rgb(105 78 78 / 0%) 100%); transform: translateY(-50%); transition: transform calc(var(--d) * 2) var(--e);}
.whyus-cards-detail:nth-child(1):before {background-image: url("../images/build-mngmnt-img.jpg"); background-size: cover; background-repeat: no-repeat;}
.whyus-cards-detail:nth-child(2):before {background-image: url("../images/smart-build-img.jpg"); background-size: cover; background-repeat: no-repeat;}
.whyus-cards-detail:nth-child(3):before {background-image: url("../images/building-maintenance-img.jpg"); background-size: cover; background-repeat: no-repeat;}
/* .whyus-cards-detail:nth-child(4):before {background-image: url("../images/scalablity-img.jpg"); background-size: cover; background-repeat: no-repeat;} */
.whyus-cards-content {position: relative; display: flex; flex-direction: column; width: 90%; padding: 1rem; transition: transform var(--d) var(--e); z-index: 1; margin: 0px auto;}
.whyus-cards-content > * + * {margin-top: 1rem;}
.whyus-cards-title {font-family: "Albert Sans", sans-serif; font-size: 32px; line-height: normal; width: 100%; padding-bottom: 0 !important;}
.whyus-cards-copy {color: #ffffff; }
@media (hover: hover) and (min-width: 600px) {
  .whyus-cards-detail:after {transform: translateY(0);}
  .whyus-cards-content {transform: translateY(calc(100% - 26.5rem));}
  .whyus-cards-content > *:not(.title) {/*opacity: 0;*/ transform: translateY(1rem); transition: transform var(--d) var(--e), opacity var(--d) var(--e);}
  .whyus-cards-detail:hover,
  .whyus-cards-detail:focus-within {align-items: center;}
  .whyus-cards-detail:hover:before,
  .whyus-cards-detail:focus-within:before {transform: translateY(-4%);}
  .whyus-cards-detail:hover:after,
  .whyus-cards-detail:focus-within:after {transform: translateY(-50%);}
  .whyus-cards-detail:hover .whyus-cards-content,
  .whyus-cards-detail:focus-within .whyus-cards-content {transform: translateY(0);}
  .whyus-cards-detail:hover .whyus-cards-content > *:not(.title),
  .whyus-cards-detail:focus-within .whyus-cards-content > *:not(.title) {opacity: 1; transform: translateY(0); transition-delay: calc(var(--d) / 8);}
  .whyus-cards-detail:focus-within:before, .whyus-cards-detail:focus-within:after,
  .whyus-cards-detail:focus-within .whyus-cards-content,
  .whyus-cards-detail:focus-within .whyus-cards-content > *:not(.title) {transition-duration: 0s;}
}

.client-logo-grid{width: 100%; height: auto; float: left;}
.client-logo-grid h2{width: 100%; height: auto; float: left; text-align: center; padding-bottom: 10px;}
.client-logo-grid h2 label{color: #1542ff;}
.client-logo-grid h2 span{font-family: 'Roboto', sans-serif; font-size:28px; color: #000000;}
.client-logo-grid p{width: 100%; height: auto; float: left; font-size:18px; color: #787878; text-align: center; padding-bottom: 0px;}
.logo-img-box{width: 100%; height: auto; padding:50px 0px 0 0;}
.logo-img-box h2{padding:0 0 30px 0;}
.logo-img-box img{width: 90px; height: auto; margin: 5px 10px; opacity:1;}
.logo-img-box img:hover {opacity: 0.5;}

/* practicle bg css */
#particles-js{width: 100%; height: 70vh; position: absolute; z-index: 1;}
/* .service_listing_div{float: left; margin: 0 0 20px 0; padding-bottom: 20px; border-bottom: 1px solid #e2e2e2;}
.service_listing_div_img{float: left;}
.service_listing_div_p{float: left; padding: 30px;}
.service_listing_div_p h4{padding-bottom: 15px;} */

/* .corporate-boarding-sec {width: 100%; height: auto; float: left;} */
.service_listing_sec{width: 100%; height: auto; float: left; padding: 3em; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; margin: 20px 0; background-image: linear-gradient(to top, #f5f3ff 0%, #f1f6ff 99%, #e3eeff 100%);}
.service_listing_sec img{width: 76px; height: auto; float: left; padding-bottom: 20px;}
.service_listing_sec h4{padding-bottom: 15px; width: 100%; height: auto; float: left;}
.service_listing_sec p{width: 100%; height: auto; float: left;}
.service_listing_sec ul{width: 100%; height: auto; float: left; padding: 20px 0;}
.service_listing_sec ul li{width: 100%; height: auto; float: left; padding:5px 0 5px 0; border-bottom: 1px solid #bbb0b3; line-height: normal; text-transform: none; font-weight: normal;}
.product_intro_sec{width: 100%; height: auto; float: left;}
.product_intro_det{padding: 0 0 60px 0;}
.product_intro_det h2{padding-bottom: 20px;}
.product_intro_det img{width: 78px; height: auto; float: left; padding-bottom: 20px;}
.product_intro_det h5{width: 100%; height: auto; float: left; padding-bottom: 20px;}
.product_intro_det p{width: 100%; height: auto; float: left;}
/* ======= index pg card hover */
.content-wrapper {margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: center; padding: 0.5rem;}
.news-card {margin: 0; position: relative; height: 42rem; overflow: hidden; flex: 1; min-width: 290px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); border-radius: 18px; margin: 0 5px;}
@media (min-width: 900px) {
.news-card {height: 42rem}
}
.news-card::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /*background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(8 9 67) 80%);*/}
.news-card__card-link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /*background: rgba(255,0,0,.5); */}
.news-card__image {width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: -1;}
.news-card__text-wrapper {position: absolute; bottom: 0rem; padding:3rem; color: white; /*background-color: rgba(0, 0, 0, 0.4); */ transition: background-color 1.5s ease;}
.news-card__text-wrapper img{width: 64px; height: 64px; }
.news-card__title_sub {width: 100%; height: auto; float: left; color: rgb(189 204 255); font-size: 18px; text-transform: none; line-height: 26px; padding: 0; transition: color 1s ease;}
.news-card__title {color: #ffffff; font-size: 42px; line-height: 38px; padding: 10px 0 0 0; transition: color 1s ease; margin-bottom: .5rem;}
.news-card__details-wrapper {max-height: 0; opacity: 0; transition: max-height 1.5s ease, opacity 1s ease;}
.news-card__details-wrapper a{margin-top: 30px; font-size: 16px; color: #ffffff; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: #ffffff;}
@media (min-width: 900px) {
    .news-card:hover .news-card__details-wrapper {max-height: 20rem; opacity: 1;}
    /* .news-card:hover .news-card__text-wrapper {background-color: rgb(0 0 0 / 70%);} */
    /* .news-card:hover .news-card__text-wrapper {background-color: rgb(40 46 215 / 70%);} */
    .news-card:hover .news-card__image {transform: scale(1.2); z-index: -1;}
  }
.news-card__excerpt {color: #ffffff;}
.grad-bg-1{background: #1f54cf; background: linear-gradient(90deg, rgba(31, 84, 207, 1) 0%, rgba(35, 35, 219, 1) 100%);}
.grad-bg-2{background: #971fcf; background: linear-gradient(324deg, rgb(0 45 240) 0%, rgba(0, 77, 255, 1) 100%);}
.grad-bg-3{background: #1f2ecf; background: linear-gradient(324deg, rgba(31, 46, 207, 1) 0%, rgba(0, 43, 135, 1) 100%);}
.content-wrapper :nth-child(1){margin-top: 0px;}
.content-wrapper :nth-child(2){margin-top: 0px;}
.content-wrapper :nth-child(3){margin-top: 0px;}
/* ===================================
OUR APPROACH
=================================== */

.workflow-section {
    padding: 120px 0;
    background: #ffffff;
    position: relative;
}

.workflow-section .container {
    max-width: 1320px;
    margin: auto;
    padding: 0 20px;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 80px;
}

.section-heading .eyebrow {
    color: #2453ff;
    font-weight: 700;
    letter-spacing: 2px;
}

.section-heading h2 {
    font-size: 52px;
    line-height: 1.15;
    margin: 15px 0;
    color: #111827;
}

.section-heading p {
    font-size: 18px;
    color: #6b7280;
    line-height: 1.8;
}

/* Cards Layout */

.workflow-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    position: relative;
}

/* Connector Line */

.workflow-wrapper::before {
    content: "";
    position: absolute;
    top: 90px;
    left: 12%;
    width: 76%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(36,83,255,.15),
        rgba(36,83,255,.9),
        rgba(36,83,255,.15)
    );
    box-shadow: 0 0 12px rgba(36,83,255,.5);
    z-index: 0;
}

/* Card */

.workflow-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    border: 1px solid #edf2ff;
    overflow: hidden;
    transition: all .35s ease;
}

.workflow-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow:
    0 20px 50px rgba(16,24,40,.08),
    0 0 20px rgba(36,83,255,.08);
}

/* Large Number */

.step-number {
    font-size: 90px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 20px;

    background: linear-gradient(
        180deg,
        #2453ff,
        #6f8cff
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    opacity: .18;
}

/* Dot on Connector */

.step-number::after {
    content: "";
    position: absolute;
    top: 82px;
    left: 48px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #2453ff;

    box-shadow:
    0 0 0 6px rgba(36,83,255,.12),
    0 0 12px rgba(36,83,255,.5);
}

/* Headings */

.workflow-card h3 {
    margin-bottom: 12px;
}

.workflow-card .subtitle {
    color: #2453ff;
    font-weight: 600;
    margin-bottom: 18px;
}

.workflow-card p {
    color: #6b7280;
    line-height: 1.8;
}

/* Responsive */

@media (max-width: 991px) {

    .workflow-wrapper {
        grid-template-columns: 1fr;
    }

    .workflow-wrapper::before {
        display: none;
    }

    .section-heading h2 {
        font-size: 40px;
    }

    .workflow-card {
        padding: 35px;
    }

    .step-number {
        font-size: 70px;
    }
}

@media (max-width: 767px) {

    .workflow-section {
        padding: 80px 0;
    }

    .section-heading h2 {
        font-size: 32px;
    }

    .section-heading p {
        font-size: 16px;
    }

    .workflow-card h3 {
        font-size: 24px;
    }
}

.primary-btn .fa-phone{font-size: 18px; padding: 0 10px 0 0;}

/* = = = = = = = =\
GPT CSS FILES TEST */
/* body{
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    color:#111827;
}

:root{
    --sg-blue:#2453ff;
    --sg-dark:#061540;
    --sg-light:#f8faff;
} */

.section-padding{
    padding:100px 0;
}

.section-title{
    font-size:52px;
    font-weight:700;
    line-height:1.15;
}

.section-subtitle{
    color:var(--sg-blue);
    font-size:14px;
    text-transform:uppercase;
    font-weight:600;
    letter-spacing:1px;
}

.text-muted-custom{
    color:#6b7280;
}

/* HERO */

.hero{
    min-height:850px;
    background:
    linear-gradient(
    rgba(4,12,50,.85),
    rgba(4,12,50,.85)),
    url('images/network-banner.jpg');

    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    color:#fff;
}

.hero h1{
    font-size:72px;
    font-weight:800;
    line-height:1.05;
}

.hero p{
    font-size:18px;
    color:#dbe4ff;
}

.btn-smart{
    background:#2453ff;
    color:#fff;
    border-radius:50px;
    padding:14px 28px;
    font-weight:600;
}

.btn-outline-smart{
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    border-radius:50px;
    padding:14px 28px;
}

/* IMAGE CARD */

.image-card{
    border-radius:24px;
    overflow:hidden;
    position:relative;
}

.image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* SERVICE CARD */

.service-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,.05);
    transition:.4s;
    height:100%;
}

.service-card:hover{
    transform:translateY(-8px);
}

.service-content{
    padding:30px;
}

.service-content h4{
    font-weight:700;
}

.service-content ul{
    margin:0;
    padding-left:18px;
}

.service-content li{
    margin-bottom:8px;
    color:#4b5563;
}

.service-icon{
    width:60px;
    height:60px;
    background:#2453ff;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    margin-bottom:20px;
}

/* TECHNOLOGY CARDS */

.tech-card{
    background:#fff;
    border:1px solid #edf0f7;
    border-radius:18px;
    padding:35px;
    text-align:center;
    transition:.3s;
    height:100%;
}

.tech-card:hover{
    transform:translateY(-5px);
}

.tech-icon{
    font-size:40px;
    color:#2453ff;
    margin-bottom:20px;
}

@media(max-width:991px){

.hero{
    min-height:auto;
    padding:150px 0 100px;
}

.hero h1{
    font-size:48px;
}

.section-title{
    font-size:38px;
}

}

.coming-soon {
    cursor: not-allowed;
    opacity: 0.7;
}