/* Import CSS files in order */
@import url("reset.css");
@import url("lenis.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

html.lenis {
  scroll-behavior: auto !important;
}

/* Header */
:root{

  --header-height: 10rem;
  --header-height-scrolled:7rem;
  --section-padding:var(--lg);

}
@media(width < 992px){
  :root{

    --header-height: var(--header-height-scrolled);
    --section-padding:var(--md);

  }
}

/* Header */
header{height: var(--header-height); position: fixed; left: 0; top: 0; width: 100%; z-index: 9999; border-bottom: .1rem solid var(--border-color);
background: rgba(30, 111, 182, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: var(--transition);
}
header .container{height: 100%; display: flex; align-items: center;}
header .logo img{max-width: 19.1rem;}
header.header-scrolled{height: var(--header-height-scrolled);}
header .container > :first-child{flex: 1 0 0%;}
header .btn{height: calc(var(--btn-height) + .6rem); min-width: 19.6rem; margin-left: var(--md);}
@media(width < 1200px){
  header .btn{min-width: auto; margin-left: var(--gutter);}
}
@media(width < 576px){
  header .logo img{max-width: 15rem;}
  header .btn{padding: 0 var(--gutter-half);}
}

/* Nav */
nav{display: flex; align-items: center; gap: 0 var(--md);}
nav a{display: flex; align-items: center; justify-content: center; white-space: nowrap; line-height: 1; text-transform: uppercase; font-family: var(--headding-font); font-size: var(--body-font-size); color: white; gap: 0 .8rem; transition: var(--transition);}
nav a svg{width: .6rem; display: block; opacity: 0; visibility: hidden; transition: var(--transition); position: relative; left: -.8rem;}
nav a svg path{fill: var(--primary-4);}
@media(width < 1200px){
  nav{gap: 0 var(--gutter);}
}
@media(width > 991px){
  nav a:hover{color: var(--primary-4);}
  nav a:hover svg{opacity: 1; visibility: visible; left: 0;}
  nav a:hover svg path{fill: var(--primary-4);}
}
@media(width < 992px){
  nav{flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100dvh; background-color: var(--primary-1); gap: var(--gutter) 0; transition: var(--transition); opacity: 0; visibility: hidden; pointer-events: none;}
  nav a{text-align: center; font-size: clamp(2rem, 4vw, 24vw);}
  nav.active{opacity: 1; visibility: visible; pointer-events: auto;}
}

/* Hero Section */
.hero-section{height: 100dvh; width: 100%; background: url(../images/hero-bg.jpg) center center no-repeat; background-size: cover; display: flex; align-items: flex-end; padding: var(--section-padding) 0; position: fixed; left: 0; top: 0; isolation: isolate; z-index: 0; overflow: hidden;}
.hero-section::before{position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; pointer-events: none; z-index: 1; content: ""; background: linear-gradient(to bottom, rgba(24,76,110,0) 0%,rgba(24,76,110,0.75) 100%);}
.hero-section-video{position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;}
.hero-section .container{height: 100%; display: flex; align-items: flex-end; position: relative; z-index: 2;}
.hero-section .container h1{font-weight: 600;}
.hero-section .container h1, .hero-section .container h3{text-transform: uppercase;}
.hero-section .container h3:not(:last-child){margin-bottom: var(--gutter-half);}
.hero-section .container h3{color: var(--primary-4); display: flex; align-items: center; gap: 0 1rem;}
.hero-section .container h3 svg{width: .6rem;}
.hero-section .container h3 svg path{fill: var(--primary-4);}
.hero-section + *{margin-top: 100dvh;}

/* Main */
main{position: relative; z-index: 1;}

/* Section */
.section-padding{padding: var(--section-padding) 0;}
.section-header:not(:last-child){margin-bottom: var(--section-padding);}
.section-content:not(:last-child){margin-bottom: var(--section-padding);}

/* Footer */
footer{background: url(../images/gradient-bg-1.jpg) center center no-repeat; background-size: cover; position: relative; z-index: 1;}
.footer-content{padding: var(--md) 0; border-top: .1rem solid var(--border-color); min-height: 62rem; display: flex; align-items: center;}
.footer-content .container{display: flex; gap: 0 calc(var(--xl) + var(--gutter));}
.footer-content .container > :first-child{align-self: center; flex: 1 0 0%;}
.footer-logo{display: flex; justify-content: flex-start;}
.footer-logo a{display: flex;}
.footer-logo img{max-width: 75.2rem;}
.address > :not(:last-child){margin-bottom: var(--gutter-half);}
.address p, .address p a{color: white;}
.footer-content-header{color: var(--primary-4); font-family: var(--headding-font); text-transform: uppercase; letter-spacing: .08rem;}
.footer-content-header:not(:last-child){margin-bottom: var(--gutter);}
.footer-content-block ul li{display: flex; align-items: center;}
.footer-content-block ul li:not(:last-child){margin-bottom: 1.5rem;}
.footer-content-block ul li:last-child{margin-top: var(--sm);}
.footer-content-block ul li a{display: flex; align-items: center; gap: 0 .8rem; line-height: 1; text-transform: uppercase; font-family: var(--headding-font); color: white; white-space: nowrap;}
.footer-content-block ul li a svg{min-width: .6rem; display: block;}
.footer-content-block ul li a svg path{fill: white;}
.copyright{border-top: .1rem solid rgba(255,255,255,55%); padding: var(--gutter) 0;}
.copyright .container{display: flex; align-items: center; gap: var(--gutter);}
.copyright p{color: var(--primary-4);}
.copyright .container > :first-child{flex: 1 0 0%;}
.copyright ul{display: flex; align-items: center; gap: 0 var(--gutter);}
.copyright ul li{display: flex; align-items: center;}
.copyright ul li a{display: flex; align-items: center; gap: 0 1rem; white-space: nowrap; color: var(--primary-4); transition: var(--transition);}
.copyright ul li a:hover{color: white;}
@media(width < 1500px){
  .footer-content{min-height: 50rem;}
  .footer-content .container{gap: 0 var(--lg);}
  .footer-logo img{max-width: 50rem;}
}
@media(width < 1200px){
  .footer-content{min-height: 40rem;}
  .footer-content .container{gap: 0 var(--md);}
  .footer-logo img{max-width: 40rem;}
}
@media(width < 992px){
  .footer-content{min-height: auto;}
  .footer-logo img{max-width: 30rem;}
  .copyright ul{gap: 0 var(--gutter-half);}
  .copyright .container{flex-direction: column; align-items: flex-start;}
}
@media(width < 768px){
  .footer-logo img{max-width: 25rem;}
  .footer-content .container{flex-direction: column; gap: var(--sm) 0;}
  .footer-content-header:not(:last-child){margin-bottom: var(--gutter-half);}
  .footer-content .container > :first-child{align-self: flex-start;}
  .copyright ul{flex-direction: column; align-items: flex-start; gap: 1rem 0;}
}

/* Page Hero Section */
.page-hero-section{min-height: 70dvh; background: url(../images/gradient-bg-1.jpg) center top no-repeat; background-size: cover; position: relative; isolation: isolate; padding: var(--section-padding) 0; padding-top: calc(var(--header-height) + var(--section-padding)); display: flex; align-items: flex-end;}
.page-hero-section::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/grid.png) center center no-repeat; background-size: cover; content: ""; z-index: -1; pointer-events: none; opacity: 70%;}
.page-hero-section-content h2{text-transform: uppercase; font-weight: 600;}
.headding{display: flex; align-items: center; font-family: var(--headding-font); gap: 0 1rem; text-transform: uppercase;}
.headding:not(:last-child){margin-bottom: var(--gutter);}
.headding.headding-primary{color: var(--primary-4);}
.headding svg{display: block;}
.headding.headding-primary svg path{fill: var(--primary-4);}

.intro-text-section{min-height: 56rem;}
@media(width < 1200px){
  .intro-text-section{min-height: 45rem;}
}
@media(width < 992px){
  .intro-text-section{min-height: 35rem;}
}


/* Page Banner */
.page-banner{aspect-ratio: 3.6/1; overflow: hidden;}
.page-banner img{object-fit: cover; width: 100%; height: 100%;}
.map-banner iframe{display: block; width: 100%; height: 100%; border: 0;}
@media(width < 768px){
  .page-banner{aspect-ratio: 1.6/1;}
}
@media(width < 576px){
  .page-banner{aspect-ratio: 1.2/1;}
}

/* Article */
article:not(:first-child){margin-top: var(--gutter);}
article h2:not(:last-child), article h3:not(:last-child){margin-bottom: var(--sm);}
@media(width < 992px){
  article h2:not(:last-child), article h3:not(:last-child){margin-bottom: var(--gutter-half);}
  .index-about-content{padding-left: 0 !important;}
  .index-sectors-content{padding-right: var(--gutter) !important;}
}

.services li .service-box{border-radius: 1.3rem; border: .1rem solid var(--primary-4); padding: var(--gutter-half) var(--gutter); min-height: 9rem; display: flex; align-items: center; transition: var(--transition);}
.services li.is-active .service-box{padding-left: calc(var(--gutter) * 2); border-color: white;}
.services li h3{text-transform: uppercase; color: var(--primary-4); display: flex; align-items: center; gap: 0 var(--gutter); transition: var(--transition);}
.services li h3 > *{display: block; transition: var(--transition);}
.services li h3 > :first-child{min-width: 4.5rem;}
.services li h3 svg{display: block;}
.services li h3 svg path, .services li h3 svg line, .services li h3 svg circle, .services li h3 svg rect{stroke: var(--primary-4); transition: var(--transition);}
.services li.is-active h3{color: white;}
.services li.is-active h3 svg path, .services li.is-active h3 svg line, .services li.is-active h3 svg circle, .services li.is-active h3 svg rect{stroke: white;}
.services li.is-active h3 svg path{color: white;}
.services li:not(:last-child){margin-bottom: -.1rem;}
.services li.is-active{position: relative; z-index: 1;}
@media(width < 992px){
  .services li h3{gap: 0 var(--gutter-half);}
  .services li.is-active .service-box{padding-left: calc(var(--gutter) * 1.5);}
}

.logo-slider .swiper-slide, .logo-slider-2 .swiper-slide{width: auto;}
.logo-slide{min-width: 40rem; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter);}
@media(width < 992px){
  .logo-slide{min-width: auto;}
}


.accordian li{border-radius: 1.3rem; border: .1rem solid var(--border-color); padding: var(--md); cursor: pointer;}
.accordian li:not(:last-child){margin-top: -.1rem;}
.accordian li h3{display: flex; align-items: center; text-transform: uppercase; color: var(--primary-4); font-weight: 600;}
.accordian li h3 svg{display: block;}
.accordian li h3 svg path{fill: white;}
.accordian li p{margin-top: var(--xl); max-width: 70rem; color: var(--primary-4); display: none;}
.accordian li h3 svg{width: 0; transition: var(--transition);}
.accordian li h3 span:last-child{padding-left: 0; transition: var(--transition);}
.accordian li.active h3{color: white;}
.accordian li.active h3 svg{width: 1rem;}
.accordian li.active h3 span:last-child{padding-left: 2rem;}
.accordian li.active p{color: white;}
@media(width < 992px){
  .accordian{padding: 0 var(--gutter);}
  .accordian li{padding: var(--sm);}
  .accordian li p{margin-top: var(--md);}
  .index-sectors-accordion{padding-bottom: var(--section-padding);}
}
@media(width < 768px){
  .accordian{padding: 0 var(--gutter);}
  .accordian li{padding: var(--gutter);}
  .accordian li p{margin-top: var(--sm);}
}

.marquee-slider-section{min-height: 80dvh; display: flex; align-items: center;}
.bottom-section{min-height: 80dvh;}
@media(width < 992px){
  .bottom-section{min-height: 60dvh;}
}
@media(width < 768px){
  .bottom-section{min-height: auto;}
}

.border-boxes li:not(:first-child){margin-top: -.1rem;}
.border-box{border: .1rem solid var(--border-color); border-radius: 1.3rem; padding: var(--md) var(--sm);}
.border-boxes li{cursor: default;}
.border-boxes li.border-box svg{transition: var(--transition);}
.border-boxes li.border-box svg line, .border-boxes .border-box svg circle, .border-boxes .border-box svg rect, .border-boxes .border-box svg path{stroke: var(--primary-4); transition: var(--transition);}
.border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover svg line, .border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover svg circle, .border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover svg rect, .border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover svg path,
.border-boxes li.border-box.grid-column-lg-2.is-active svg line, .border-boxes li.border-box.grid-column-lg-2.is-active svg circle, .border-boxes li.border-box.grid-column-lg-2.is-active svg rect, .border-boxes li.border-box.grid-column-lg-2.is-active svg path{stroke: white;}
.border-boxes li.border-box article h2, .border-boxes li.border-box article p{transition: var(--transition); color: var(--primary-4);}
.border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover article h2, .border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover article p,
.border-boxes li.border-box.grid-column-lg-2.is-active article h2, .border-boxes li.border-box.grid-column-lg-2.is-active article p{transition: var(--transition); color: white;}
@media(width < 768px){
  .border-box{padding: var(--gutter);}
  .border-boxes li.border-box svg{max-width: 10rem;}
}

.arrow-headding{display: flex; align-items: center;}
.arrow-headding svg {width: 0; display: block;}
.arrow-headding svg path{fill: white;}
.border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover .arrow-headding svg,
.border-boxes li.border-box.grid-column-lg-2.is-active .arrow-headding svg{width: 1rem;}
.arrow-headding span:last-child {padding-left: 0; transition: var(--transition);}
.border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover .arrow-headding h3 span:last-child,
.border-boxes li.border-box.grid-column-lg-2.is-active .arrow-headding h3 span:last-child {padding-left: 2rem;}
.border-boxes:not(.scroll-active-boxes) li.border-box:not(.grid-column-lg-2):hover span:last-child,
.border-boxes li.border-box.grid-column-lg-2.is-active span:last-child {padding-left: 2rem;}
.border-boxes.scroll-active-boxes li.border-box.is-active svg line, .border-boxes.scroll-active-boxes li.border-box.is-active svg circle, .border-boxes.scroll-active-boxes li.border-box.is-active svg rect, .border-boxes.scroll-active-boxes li.border-box.is-active svg path{stroke: white;}
.border-boxes.scroll-active-boxes li.border-box.is-active article h2, .border-boxes.scroll-active-boxes li.border-box.is-active article p{color: white;}
.border-boxes.scroll-active-boxes li.border-box.is-active .arrow-headding svg{width: 1rem;}
.border-boxes.scroll-active-boxes li.border-box.is-active .arrow-headding h3 span:last-child,
.border-boxes.scroll-active-boxes li.border-box.is-active span:last-child{padding-left: 2rem;}
.border-boxes.contact-boxes{display: flex; flex-direction: column; gap: var(--gutter);}
.border-boxes.contact-boxes li{border-color: var(--primary-4) !important;}
.border-boxes.contact-boxes li:not(:first-child){margin-top: 0;}
.border-boxes.contact-boxes li > *{color:var(--primary-4);}

.pin-section{z-index: 9;}
section{position: relative; z-index: 99;}

.contact-field{border: .1rem solid var(--border-color); border-radius: 1.3rem; padding: var(--md) var(--sm); min-height: 15rem; font-size: var(--h3); font-family: var(--headding-font); font-weight: 600; color: var(--primary-4); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; min-width: 100%; background: none; transition: var(--transition);}
.contact-field span{display: block; color: inherit; text-transform: uppercase; transition: var(--transition);}
.border-boxes.contact-boxes .contact-field:hover,
.border-boxes.contact-boxes .contact-field:hover span{color: white;}
.contact-field:hover{border-color: white; background-color: var(--primary-2);}
@media(width < 768px){
  .contact-field{padding: var(--gutter);}
}