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; background: #ffffff;}
.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-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
    color: #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;}
/* .top-bar span a.active-sub {border-bottom: 2px solid #ffffff; color: rgb(255 255 255 / 85%); text-decoration: none;} */

header{position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 15px rgba(7, 26, 65, 0.06);}
#navigation .container {position:relative;}
.navbar-brand {width: 200px; height:auto; padding: 0px; margin:8px 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: #000000; 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; line-height: normal;}
.footer_ul span{font-size: 12px; float: left; color: #666666; text-transform: uppercase; line-height: normal; padding-top: 5px;}
.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/slide-2.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.access-banner{width:100%; height: auto; background:url("../images/access-bnr-bg.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.cctv-banner{width:100%; height: auto; background:url("../images/cctv-bnr.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.turnstiles-banner{width:100%; height: auto; background:url("../images/turnstile-bnr-img.avif") no-repeat center bottom #0565ca; background-size: cover;}
.gatebarriers-banner{width:100%; height: auto; background:url("../images/gatebarri-bnr-img.avif") no-repeat center bottom #0565ca; background-size: cover;}
.xray-banner{width:100%; height: auto; background:url("../images/xray-bnr-img.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.amc-banner{width:100%; height: auto; background:url("../images/amc-bnr-img.avif") no-repeat center bottom #0565ca; background-size: cover;}
.meetingroom-banner{width:100%; height: auto; background:url("../images/meetingroom-bnr.avif") no-repeat center bottom #0565ca; background-size: cover;}
.pabx-banner{width:100%; height: auto; background:url("../images/pabx-bnr-img.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.audiosys-banner{width:100%; height: auto; background:url("../images/audiosys-bnr.jpg") no-repeat center bottom #0565ca; background-size: cover;}
.displaysys-banner{width:100%; height: auto; background:url("../images/displaysys-bnr.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: 205px; margin:10px 0px 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:15px; 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:0px;}
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: 0 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;}
	.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 h3{padding: 0px 0 30px 0;}
.about-intro-box h3 a{color: #000000; text-decoration: underline; text-decoration-thickness: 6px; text-decoration-color: #1542ff;}
.about-intro-box h3 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 a {margin-top: 50px;}
/* .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; font-weight: bold;}
.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;
}

.about-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.info-card{
    background:#f8faff;
    padding:35px;
    border-radius:20px;
    border:1px solid #e5e7eb;
}

.info-card h4{
    margin:20px 0 10px;
    font-size:20px;
}

.info-card p{
    color:#6b7280;
}
.sg-hero-eyebrow {
    color: #9db6ff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0px;
}
/*===============
NETWORK and ELECTRIC page CSS =========  */

    .sg-intro {
        padding: 110px 0;
        position: relative;
    }

    .sg-intro-image {
        position: relative;
        border-radius: var(--sg-radius);
        overflow: hidden;
    }

    .sg-intro-image img {
        width: 100%;
        min-height: 420px;
        object-fit: cover;
    }

    .sg-image-label {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background: rgb(20 59 255);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        padding: 15px 18px;
        color: #ffffff;
        font-size: 16px;
    }

    .sg-intro-copy {
        padding-left: 35px;
    }

    .sg-intro-copy h2 {
        font-size: clamp(34px, 4vw, 50px);
        line-height: 1.12;
        font-weight: 400;
        margin-bottom: 20px;
    }

    .sg-intro-copy p {
        color: var(--sg-muted);
        margin-bottom: 18px;
    }

    .sg-mini-feature {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        margin-top: 28px;
    }

    .sg-mini-icon {
        min-width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #e2e3e4;
        color: var(--sg-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .sg-mini-feature h5 {
        font-size: 22px;
        margin-bottom: 3px;
    }

    .sg-mini-feature p {
        font-size: 13px;
        margin: 0;
    }

    /* =========================================================
       SERVICES
    ========================================================= */

    .sg-services {
        background: #f6f8fc;
        padding: 110px 0;
    }

    .sg-service-card {
        height: 100%;
        background: #ffffff;
        border: 1px solid var(--sg-border);
        border-radius: 16px;
        overflow: hidden;
        transition: transform .35s ease,
                    box-shadow .35s ease,
                    border-color .35s ease;
    }

    .sg-service-card:hover {
        transform: translateY(-8px) scale(1.015);
        box-shadow: 0 22px 55px rgba(16,24,40,.10);
        border-color: rgba(36,83,255,.25);
    }

    .sg-service-image {
        height: 235px;
        overflow: hidden;
    }

    .sg-service-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

    .sg-service-card:hover .sg-service-image img {
        transform: scale(1.06);
    }

    .sg-service-content {
        padding: 30px;
    }

    .sg-service-number {
        font-size: 12px;
        font-weight: 700;
        color: var(--sg-blue);
    }

    .sg-service-content h3 {
        font-size: 24px;
        font-weight: 500;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    .sg-service-content > p {
        color: var(--sg-muted);
        font-size: 14px;
        margin-bottom: 22px;
    }

    .sg-service-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sg-service-list li {
        color: #475467;
        font-size: 13px;
        padding: 0 0;
        border-bottom: 1px solid #edf0f5;
    }

    .sg-service-list li:last-child {
        border-bottom: none;
    }

    .sg-service-list li::before {
        content: "✓";
        color: var(--sg-blue);
        font-weight: 700;
        margin-right: 9px;
    }

    .sg-service-link {
        display: inline-block;
        margin-top: 22px;
        color: var(--sg-blue);
        font-size: 13px;
        font-weight: 600;
    }

    /* =========================================================
       CAPABILITIES
    ========================================================= */

    .sg-capabilities {
        padding: 110px 0;
    }

    .sg-capability-wrap {
        margin-top: 45px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .sg-tag {
        border: 1px solid #dfe5f2;
        background: #ffffff;
        color: #344054;
        border-radius: 50px;
        padding: 10px 16px;
        font-size: 13px;
        transition: .25s ease;
    }

    .sg-tag:hover {
        background: rgb(20 59 255);
        border-color: var(--sg-blue);
        color: #ffffff;
        transform: translateY(-2px);
    }

    /* =========================================================
       WHY SMART GRID
    ========================================================= */

    .sg-why {
        padding: 110px 0;
        color: #ffffff;

        background:
            radial-gradient(circle at 10% 20%, rgb(113 0 193 / 77%), transparent 32%), linear-gradient(120deg, #0a3ac1, rgb(20 59 255));

        position: relative;
        overflow: hidden;
    }

    .sg-why::after {
      content: "Smart Grid";
  position: absolute;
  right: 0px;
  bottom: 28px;
  font-size: 120px;
  font-weight: 800;
  color: rgb(255 255 255 / 17%);
  pointer-events: none;
    }

    .sg-why .sg-eyebrow {
        color: #d0dcff;
    }

    .sg-why .sg-section-description {
        color: rgba(255,255,255,.7);
        font-size: 16px;
        margin: 0px 0 30px 0;
    }

    .sg-why-card {
        position: relative;
        height: 100%;
        padding: 30px;
        border-radius: 16px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgb(109 134 248);
        transition: .35s ease;
    }

    .sg-why-card:hover {
        transform: translateY(-7px);
        background: rgba(255,255,255,.1);
        border-color: rgba(125,160,255,.5);
    }

    .sg-why-icon {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0b4aff;
        font-weight: 800;
        margin-bottom: 22px;
    }
    .sg-why-icon img{
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: 0px auto;
    }

    .sg-why-card h4 {
        color: #ffffff;
        margin-bottom: 12px;
        margin-top: 15px;
    }

    .sg-why-card p {
        color: rgba(255,255,255,.65);
        margin: 0;
    }

    /* =========================================================
       PROCESS
    ========================================================= */

    .sg-process {
        padding: 120px 0;
        background: #ffffff;
    }

    .sg-process-wrapper {
        position: relative;
        margin-top: 65px;
    }

    /* Desktop connector line */

    .sg-process-wrapper::before {
        content: "";
        position: absolute;
        top: 48px;
        left: 12%;
        right: 12%;
        height: 1px;

        background: linear-gradient(
            90deg,
            rgba(36,83,255,.1),
            rgba(36,83,255,.8),
            rgba(36,83,255,.1)
        );

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

    .sg-process-card {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 0 20px;
        text-align: center;
    }

    .sg-process-number {
        width: 76px;
        height: 76px;
        margin: 0 auto 28px;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #ffffff;
        border: 1px solid rgba(36,83,255,.25);

        color: var(--sg-blue);
        font-size: 20px;
        font-weight: 700;

        box-shadow:
            0 0 0 7px rgba(36,83,255,.05),
            0 0 25px rgba(36,83,255,.12);
    }

    .sg-process-card h3 {
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .sg-process-card h5 {
        color: #6c6c6c;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .sg-process-card p {
        max-width: 270px;
        margin: auto;
    }

    /* =========================================================
       INDUSTRIES
    ========================================================= */

    .sg-industries {
        padding: 110px 0;
        background: #f6f8fc;
    }

    .sg-industry-card {
        height: 100%;
        position: relative;
        min-height: 300px;
        border-radius: 16px;
        overflow: hidden;
        background: #0a1748;
        margin-bottom: 30px;
    }

    .sg-industry-card img {
        width: 100%;
        height: 100%;
        min-height: 270px;
        object-fit: cover;
        opacity: .75;
        transition: transform .5s ease;
    }

    .sg-industry-card:hover img {
        transform: scale(1.07);
    }

    .sg-industry-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        padding: 25px;

        background:
            linear-gradient(
                transparent 25%,
                rgba(3,11,43,.92)
            );
    }

    .sg-industry-overlay h4 {
        color: #ffffff;
        margin-bottom: 4px;
    }

    .sg-industry-overlay p {
        color: rgba(255,255,255,.7);
        margin: 0;
    }

    /* =========================================================
       INTEGRATION SECTION
    ========================================================= */

    .sg-integration {
        padding: 110px 0;
        background: #ffffff;
    }

    .sg-integration-box {
        border-radius: 22px;
        background: linear-gradient(
            135deg,
            #eef3ff,
            #ffffff
        );
        border: 1px solid #dfe7ff;
        padding: 65px;
        position: relative;
        overflow: hidden;
    }

    .sg-integration-box::after {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        right: -120px;
        top: -130px;
        border-radius: 50%;
        background: rgba(36,83,255,.09);
    }

    .sg-integration-copy {
        position: relative;
        z-index: 2;
    }

    .sg-system-flow {
        position: relative;
        z-index: 2;
        margin-top: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .sg-flow-item {
        background: #ffffff;
        border: 1px solid #dfe5f2;
        border-radius: 12px;
        padding: 15px 20px;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0 7px 20px rgba(16,24,40,.05);
    }

    .sg-flow-arrow {
        color: var(--sg-blue);
        font-weight: 700;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .sg-cta {
        padding: 100px 0;
        background: radial-gradient(circle at 10% 20%, rgb(0 193 169 / 77%), transparent 32%), linear-gradient(120deg, #0a3ac1, rgb(20 59 255));
        color: #ffffff;
        text-align: center;
    }

    .sg-cta h2 {
        font-size: clamp(34px, 5vw, 55px);
        font-weight: 400;
        line-height: 1.1;
        margin-bottom: 18px;
        color: #ffffff;
    }

    .sg-cta p {
        max-width: 700px;
        margin: 0 auto 30px;
        color: rgba(255,255,255,.72);
    }
    .sg-btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
            90deg,
            #2453ff,
            #315df8
        );
        color: #ffffff;
        border: none;
        border-radius: 50px;
        padding: 13px 24px;
        font-weight: 600;
        transition: .3s ease;
    }

    .sg-btn-primary:hover {
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(36,83,255,.35);
        text-decoration: none;
    }

    .sg-btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,.4);
        color: #ffffff;
        border-radius: 50px;
        padding: 12px 24px;
        transition: .3s ease;
    }

    .sg-btn-outline:hover {
        background: #ffffff;
        color: blue;
        text-decoration: none;
    }

    @media (max-width: 991px) {

        .sg-header {
            background: rgba(3,11,43,.94);
        }

        .sg-navbar {
            padding: 12px 0;
        }

        .sg-hero {
            min-height: 620px;
        }

        .sg-intro-copy {
            padding-left: 0;
            margin-top: 40px;
        }

        .sg-process-wrapper::before {
            display: none;
        }

        .sg-process-card {
            margin-bottom: 45px;
        }

        .sg-integration-box {
            padding: 45px 30px;
        }
    }

    @media (max-width: 767px) {

        .sg-hero {
            min-height: 650px;
        }

        .sg-hero h1 {
            font-size: 43px;
        }

        .sg-hero p {
            font-size: 15px;
        }

        .sg-intro,
        .sg-services,
        .sg-capabilities,
        .sg-why,
        .sg-process,
        .sg-industries,
        .sg-integration {
            padding: 75px 0;
        }

        .sg-section-title {
            font-size: 35px;
        }

        .sg-service-image {
            height: 210px;
        }

        .sg-system-flow {
            flex-direction: column;
        }

        .sg-flow-arrow {
            transform: rotate(90deg);
        }

        .sg-cta {
            padding: 75px 20px;
        }

        .sg-footer {
            padding-top: 55px;
        }
    }
    /* networkelectric CSS ends here -----============ */
    .sg-why h2{color: #ffffff;}
    .sg-why h2 a {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-decoration-color: #ffffff;
}
.sg-process h2 a {
text-decoration: underline;
text-decoration-thickness: 6px;
text-decoration-color: #1542ff;}
.sg-process h2 a:hover{background: #1542ff; text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #1542ff; color: #ffffff;}
.sg-industries h2 a {
text-decoration: underline;
text-decoration-thickness: 6px;
text-decoration-color: #1542ff;}
.sg-industries h2 a:hover{background: #1542ff; text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #1542ff; color: #ffffff;}
.sg-capabilities h2 a:hover{background: #1542ff; text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #1542ff; color: #ffffff;}
.sg-capabilities h2 a {
text-decoration: underline;
text-decoration-thickness: 6px;
text-decoration-color: #1542ff;}

/* AV CSS starts here */
.sg-av-services {
    padding: 110px 0;
    background: #f6f8fc;
}

.sg-section-heading {
    text-align: center;
    margin-bottom: 60px;
}

/* =====================================================
   SERVICE CARD
===================================================== */

.sg-av-card {
    position: relative;
    height: 100%;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e5eaf3;
    border-radius: 16px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    overflow: hidden;
}

.sg-av-card::before {
    content: "";
    position: absolute;

    width: 120px;
    height: 120px;

    right: -50px;
    top: -50px;

    border-radius: 50%;

    background: rgba(36,83,255,.05);

    transition: .4s ease;
}

.sg-av-card:hover {
    transform: translateY(-8px) scale(1.015);

    border-color: rgba(36,83,255,.25);

    box-shadow:
        0 22px 55px rgba(16,24,40,.09);
}

.sg-av-card:hover::before {
    transform: scale(2);
}

.sg-av-number {
    color: #2453ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 22px;
}

.sg-av-icon {
    width: 52px;
    height: 52px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef3ff;
    color: #2453ff;

    font-size: 20px;
    font-weight: 700;

    margin-bottom: 22px;
}

.sg-av-card h3 {
    position: relative;
    z-index: 2;

    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;

    margin-bottom: 12px;
}

.sg-av-card p {
    position: relative;
    z-index: 2;

    color: #667085;
    font-size: 13px;

    margin: 0;
}

.sg-eyebrow{display: inline-block;
    color: #2453ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;}
.sg-section-title a:hover{background: #1542ff; text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #1542ff; color: #ffffff;}
.sg-section-title a {
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-decoration-color: #1542ff;}
    .sg-av-feature {
        padding: 110px 0;
    }

    .sg-feature-box {
        background:
            linear-gradient(
                135deg,
                #eef3ff,
                #ffffff
            );

        border: 1px solid #dfe7ff;

        border-radius: 22px;

        padding: 65px;

        position: relative;
        overflow: hidden;
    }

    .sg-feature-box::after {
        content: "AV";

        position: absolute;

        right: -25px;
        bottom: -75px;

        font-size: 220px;
        font-weight: 800;

        color: rgba(36,83,255,.035);
    }

    .sg-feature-content {
        position: relative;
        z-index: 2;
    }

    .sg-feature-list {
        margin-top: 30px;

        display: flex;
        flex-wrap: wrap;

        gap: 10px;
    }

    .sg-feature-tag {
        padding: 10px 16px;

        border: 1px solid #dfe5f2;
        background: #ffffff;

        border-radius: 50px;

        color: #344054;

        font-size: 13px;

        transition: .25s ease;
    }

    .sg-feature-tag:hover {
      background: rgb(20 59 255);
      border-color: var(--sg-blue);
      color: #ffffff;
      transform: translateY(-2px);
    }
    .sg-title a:hover{background: #1542ff; text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #1542ff; color: #ffffff;}
    .sg-title a {
        text-decoration: underline;
        text-decoration-thickness: 6px;
        text-decoration-color: #1542ff;}

/* new menu css  */
/* =====================================================
   SMART GRID MEGA MENU
===================================================== */


/* MAIN NAV
----------------------------------------------------- */

.smart-nav {
    position: relative;
    z-index: 9999;
}

.smart-menu {
  width: 70%;
    display: flex;
    align-items: center;
    gap: 35px;
    margin: 0;
    padding: 0;
    list-style: none;
}


/* MAIN LINKS
----------------------------------------------------- */

.smart-menu > li {
    position: relative;
}

.smart-menu > li > a {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 30px 0;

    color: #071a41;

    font-size: 16px;
    /* font-weight: 600; */

    text-decoration: none;

    transition: all 0.3s ease;
}

.smart-menu > li > a:hover {
    color: #245cff;
}


/* ARROW
----------------------------------------------------- */

.smart-mega-trigger i {
    font-size: 12px;

    transition:
        transform 0.3s ease;
}

.smart-mega-parent:hover
.smart-mega-trigger i {

    transform: rotate(180deg);
}


/* =====================================================
   MEGA MENU
===================================================== */

.smart-mega-menu {

    position: absolute;

    top: 100%;
    left: 50%;

    width: min(1180px, 94vw);

    transform:
        translateX(-50%)
        translateY(15px);

    background: #ffffff;

    border-radius: 0 0 18px 18px;

    box-shadow:
        0 25px 70px rgba(7, 26, 65, 0.14);

    /* border-top: 2px solid #245cff; */

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


/* SHOW MENU */

.smart-mega-parent:hover
.smart-mega-menu {

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =====================================================
   MEGA INNER
===================================================== */

.smart-mega-inner {

    display: grid;

    /* grid-template-columns: 1.15fr 1fr 1fr 1fr; */
    grid-template-columns: 1fr 1fr 1fr;

    gap: 0;

    padding: 38px 40px;
}


/* =====================================================
   INTRO COLUMN
===================================================== */

.smart-mega-intro {

    padding-right: 45px;

    border-right:
        1px solid #e9edf5;
}


.smart-small-title {

    display: block;

    margin-bottom: 14px;

    color: #245cff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.smart-mega-intro h3 {

    margin: 0 0 18px;

    color: #071a41;

    font-size: 25px;
    line-height: 1.15;
    font-weight: 700;
}


.smart-mega-intro p {

    margin: 0 0 25px;

    max-width: 280px;

    color: #657089;

    font-size: 13px;
    line-height: 1.7;
}


/* EXPLORE BUTTON */

.smart-view-all {

    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: #071a41;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.25s ease;
}


.smart-view-all span {

    font-size: 18px;

    transition:
        transform 0.25s ease;
}


.smart-view-all:hover {

    color: #245cff;
}


.smart-view-all:hover span {

    transform: translateX(5px);
}


/* =====================================================
   SERVICE COLUMNS
===================================================== */

.smart-mega-column {

    position: relative;

    padding:
        0 30px;
}


.smart-mega-column:not(:last-child) {

    border-right:
        1px solid #e9edf5;
}


/* NUMBER */

.smart-mega-number {

    position: absolute;

    top: -5px;
    right: 25px;

    color: #e7ebf3;

    font-size: 32px;
    font-weight: 800;

    line-height: 1;
}


/* ICON */

.smart-mega-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 18px;

    border-radius: 12px;

    background: #f2f6ff;

    color: #245cff;

    font-size: 18px;

    transition:
        all 0.3s ease;
}


.smart-mega-column:hover
.smart-mega-icon {

    background: #245cff;

    color: #ffffff;

    transform:
        translateY(-3px);
}


/* TITLE */

.smart-mega-column h4 {

    margin: 0 0 0;

    color: #071a41;

    font-size: 17px;
    line-height: normal;

    font-weight: 700;
}


/* DESCRIPTION */

.smart-column-desc {

    margin: 0 0 17px;

    color: #8992a5;

    font-size: 12px;

    font-style: italic;
}


/* SERVICE LIST */

.smart-mega-column ul {
    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}


.smart-mega-column ul li {

    margin-bottom: 7px;
}


.smart-mega-column ul li a {

    position: relative;

    display: inline-block;

    color: #000000;

    font-size: 12.5px;

    text-decoration: none;

    transition:
        all 0.2s ease;
      padding: 0 0 0 0;
}


.smart-mega-column ul li a::before {

    content: "";

    display: inline-block;

    width: 4px;
    height: 4px;

    margin-right: 8px;

    vertical-align: middle;

    border-radius: 50%;

    background: #cbd2df;

    transition:
        background 0.2s ease;
}


.smart-mega-column ul li a:hover {

    color: #245cff;

    transform:
        translateX(3px);
}


.smart-mega-column ul li a:hover::before {

    background: #22e85d;
}


/* VIEW CATEGORY LINK */

.smart-column-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    color: #071a41;

    font-size: 11.5px;
    font-weight: 800;

    text-decoration: none;

    transition:
        all 0.25s ease;
}


.smart-column-link span {

    color: #245cff;

    font-size: 15px;

    transition:
        transform 0.25s ease;
}


.smart-column-link:hover {

    color: #245cff;
}


.smart-column-link:hover span {

    transform:
        translateX(4px);
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.smart-menu-btn {

    display: none;

    width: 42px;
    height: 42px;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    cursor: pointer;
}


.smart-menu-btn span {

    display: block;

    width: 33px;
    height: 2px;

    background: #000000;

    transition:
        all 0.3s ease;
}


#smart-menu-toggle {

    display: none;
}
/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .smart-menu {
        gap: 22px;
    }

    .smart-mega-menu {
        width: 95vw;
    }

    .smart-mega-inner {
        grid-template-columns:
            1fr 1fr 1fr 1fr;

        padding: 30px 25px;
    }

    .smart-mega-intro {
        padding-right: 25px;
    }

    .smart-mega-column {
        padding: 0 20px;
    }

}
/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .smart-nav {
        width: 100%;
    }


    /* HAMBURGER */

    .smart-menu-btn {

        display: flex;

        margin-left: auto;
        margin-top: 15px;
    }


    /* MAIN MENU */

    .smart-menu {

        display: none;

        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        background: #ffffff;

        box-shadow:
            0 20px 40px rgba(7, 26, 65, 0.12);
    }


    /* OPEN MENU */

    #smart-menu-toggle:checked
    ~ .smart-menu {

        display: flex;
    }


    /* MENU ITEMS */

    .smart-menu > li {

        width: 100%;

        border-bottom:
            1px solid #edf0f5;
    }


    .smart-menu > li > a {

        justify-content: space-between;

        padding:
            17px 22px;
    }


    /* =================================================
       MOBILE MEGA MENU
    ================================================= */

    .smart-mega-menu {

        position: static;

        width: 100%;

        transform: none;

        border: none;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        display: none;

        background: #f7f9fd;
    }


    /* Disable hover opening */

    .smart-mega-parent:hover
    .smart-mega-menu {

        transform: none;

    }


    /* =================================================
       MOBILE MEGA CONTENT
    ================================================= */

    .smart-mega-inner {

        display: block;

        padding: 0;
    }


    /* INTRO */

    .smart-mega-intro {

        padding:
            25px 22px;

        border-right: none;

        border-bottom:
            1px solid #e5e9f1;
    }


    .smart-mega-intro h3 {

        font-size: 21px;
    }


    .smart-mega-intro p {

        max-width: none;

        margin-bottom: 18px;
    }


    /* COLUMNS */

    .smart-mega-column {

        padding:
            22px;

        border-right: none !important;

        border-bottom:
            1px solid #e5e9f1;
    }


    .smart-mega-column:last-child {

        border-bottom: none;
    }


    /* NUMBER */

    .smart-mega-number {

        right: 22px;
    }


    /* =================================================
       MOBILE DROPDOWN TOGGLE
    ================================================= */

    .smart-mega-parent.mobile-open
    .smart-mega-menu {

        display: block;
    }


    .smart-mega-parent.mobile-open
    .smart-mega-trigger i {

        transform:
            rotate(180deg);
    }

}
/* BLOGS CSS */
.blogs-banner{width: 100%; height: auto; float: left; padding-top: 150px;}
/* .blogs-banner h2{padding-top: 42vh; float: left;} */
/* .blogs-banner .container::before {content: "Journey Into Inspiration"; font-family: 'League Gothic', sans-serif; font-weight: normal; font-size: 250px; line-height: 200px; text-transform: uppercase; color: #f4f4f4; position: absolute; z-index: -1;} */

.blog_listing{width: 100%; height: auto; float: left; padding: 80px 0 100px 0;}
.blogs_listing_box {display: block; top: 0px; position: relative; background: #fafafa; padding: 0px; margin-bottom: 15px; text-decoration: none; z-index: 0; overflow: hidden; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;}
.blogs_listing_box:hover {transition: all 0.2s ease-out; background: #ffffff; -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;}
.blogs_listing_box img{width: 100%; height: auto; float: left;}
.blogs_listing_copy{width: 100%; height: auto; float: left; padding: 15px;}
.blogs_listing_copy a{width: 100%; height: auto; float: left; padding-bottom: 15px; font-family: "Albert Sans", sans-serif; font-size:26px; color: #000000; font-weight: normal; text-decoration: underline; text-decoration-color: #1542ff; text-decoration-thickness: 2px; line-height: 28px;}
.blogs_listing_copy a:hover{text-decoration-color: #d3d3d3; color: #000000;}
/* .blogs_listing_copy p{width: 100%; height: auto; float: left;} */
.blog_content_details{width: 100%; height: auto; float: left; border-top: 1px solid #e3e3e3; padding-top: 10px; margin-top: 10px;}
.blog_content_details a{width: auto; font-size: 13px; font-family: inherit; text-decoration: none; color: #838383; float: left; padding: 0 0 0 0;}
.blog_content_details a label{margin: 0 0 0 0; cursor: pointer;}
.blog_content_details span{width: auto; font-size: 13px; font-family: inherit; text-decoration: none; color: #838383; float: right;}

.blog_deets_share{width: 100%; height: auto; float: left; padding: 30px 0;}
.blog_auth_date{width: auto; height: auto; float: left;}
.blog_auth_date a{color: #838383; font-size: 18px; padding: 0 5px;}
.blog_auth_date span{color: #838383; font-size: 13px; padding: 0 5px;}
.social-share{width: auto; height: auto; float: right; }
.social-share h6{width: auto; height: auto; float: left; padding-right: 10px;}
.social-share ul{width: auto; height: auto; float: left; }
.social-share ul li{width: auto; height: auto; float: left; padding: 0 3px;}
.social-share ul li a{width: auto; height: auto; float: left; color: #ffffff; padding:0px 10px; background: #1542ff; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;}
.social-share ul li a:hover{color: #b4dafb; background: #009fe5;}
.blog_featured_img{width: 100%; height: auto; float: left;}
.blog_featured_img img{width: 100%; height: auto; float: left; padding: 0 0 0 0; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;}
.img-wrapper {overflow: hidden; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;}
.inner-img {transition: 0.3s;}
.inner-img:hover {transform: scale(1.1); -webkit-filter: contrast(0.5); filter: contrast(0.5);}
.blog_content{float: left;}
.blog_content h3{width: 100%; height: auto; float: left; padding: 0 0 20px 0;}
.blog_content p{width: 100%; height: auto; float: left; padding: 0 0 20px 0;}

.recent_blogs{width: 100%; height: auto; float: left;}
.recent_blogs h2{width: 100%; height: auto; float: left; font-size: 32px; line-height: normal; padding: 0 0 20px 0; border-bottom: 1px solid #e3e3e3; margin-bottom: 20px;}