:root {
  --black: #000000;
  --black-100: #707070;
  --black-200: #040F20;
  --black-300: #303030;
  --black-400: #16253C;
  --white: #ffffff;
  --blue: #00B1EC;


  --transition: all 0.5s ease-in-out;
}

html {
  font-size: 0.534vw;
}

body {
  position: relative;
  font-family: "Poppins", sans-serif;
  color: var(--black-100);
  font-size: 2rem;
  font-weight: 400;
  line-height: 3rem;
  background: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
  list-style-position: inside;
  line-height: 0;
}

ol li {
  list-style-type: inherit;
  list-style-position: inside;
}

figure,
address,
blockquote {
  margin: 0;
  padding: 0;
}

input:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.container { padding: 0 2rem;}
.row{margin-left: -2rem;margin-right: -2rem;}
.row>*{padding: 0 2rem;}

/* ================== USER FOR SAFRI auto Complete field off ============================== */
input::-webkit-contacts-auto-fill-button {visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0;}

/* Common Style Start */
.common-btn{display: inline-block; padding: 1.3rem 3.8rem; color: var(--white); font-size: 1.5rem; font-weight: 500; line-height: 2.5rem; background-color: var(--blue); border: 0.1rem solid transparent; transition: var(--transition); }
.common-btn:hover{background-color: transparent; border-color: var(--blue); color: var(--blue);}

.common-btn-border{display: inline-block; padding: 1.3rem 3.8rem; color: var(--white); font-size: 1.5rem; font-weight: 500; line-height: 2.5rem; background-color: transparent; border: 0.1rem solid white; transition: var(--transition); }
.common-btn-border:hover{background-color: var(--black); border-color: var(--black); color: var(--white);}


.swiper-button-prev svg,.swiper-button-next svg { display: none;}

.swiper-button-prev,.swiper-button-next { width: 10rem !important; height: 10rem !important; border-radius: 0; background: var(--white); top: auto !important; bottom: 0; right: 0 !important; transition: var(--transition); z-index: 10;}

.swiper-button-prev{ left: auto !important; right: 100px !important; }
.swiper-button-next{ background: var(--blue);}

.swiper-button-prev:hover,.swiper-button-next:hover { background: var(--black-200)}

.swiper-button-prev:focus,.swiper-button-next:focus { outline: none; border: none;}

.swiper-button-prev i,.swiper-button-next i {  color: var(--black); font-size: 3rem;transition: var(--transition);}
.swiper-button-next i { color: var(--white);}

.swiper-button-prev:hover i,.swiper-button-next:hover i { color: var(--white);}



.common-heading-sec {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.common-heading-sec .common-sub-heading { display: inline-block; color: var(--blue); font-size: 2rem; font-weight: 400; line-height: 2.5rem; margin-bottom: 1.5rem}
.common-heading-sec .common-heading { color: var(--black); font-size: 5rem; font-weight: 600; line-height: 5.5rem;}
.common-heading-sec .common-heading-text { margin-bottom: 3.5rem}
















.top-block{ background: var(--blue); padding: 0.8rem 0;}
.site-header .inner-block {display: flex;align-items: center;justify-content: center; gap: 4rem;}
.site-header .inner-block .location , .site-header .inner-block a { position: relative; font-size: 1.5rem; font-weight: 500; line-height: 2.5rem; color: var(--white); display: flex; align-items: center; gap: 2rem; transition: var(--transition); }
.site-header .inner-block a::after {position: absolute; content: ""; left: -20px; top: 0; width: 100%; height: 100%; border-left: 0.1rem solid var(--white);}
.site-header .inner-block a:hover { color: var(--black);}


.bottom-block{display: flex;align-items: center; justify-content: space-between;}
.bottom-block.sticky {  position: fixed;width: 100%; top: 0; left: 0; z-index: 99; overflow: hidden; background-color: #ffffff; transition: var(--transition);}

.site-header .site-logo , .contact-btn {min-width: 34.8rem; min-height: 10rem; background: var(--black-200); display: flex;align-items: center;justify-content: center; font-size: 2rem; font-weight: 500; line-height: 2.5rem; color: var(--blue); transition: var(--transition);}
.contact-btn:hover {background: var(--white);}
.bottom-block.sticky .site-logo , .bottom-block.sticky .contact-btn { min-height: 7rem;}

.bottom-block .custom-logo-link {display: inline-block; width: 17.5rem; transition: var(--transition);}
.bottom-block.sticky .custom-logo-link { width: 12rem;}


ul.menu-wrapper {display: flex;align-items: center;gap: 4.5rem;}
ul.menu-wrapper li a{ display: inline-block; color: var(--black); font-size: 1.5rem;font-weight: 500;line-height: 2.5rem; transition: var(--transition);}
ul.menu-wrapper li ul.sub-menu{ display:none;}
ul.menu-wrapper li.current-menu-item a , ul.menu-wrapper li:hover a {color: var(--blue);}







.banner-area{position: relative;}
.bannerSlider .swiper-slide {position: relative;}
.bannerSlider .container {height: 100%;}
.bannerSlider .banner-text-area {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
.banner-text-inner{width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.banner-heading{ max-width: 88.8rem; color: var(--white); font-size: 13rem;font-weight: 500;line-height: 12rem;}
.banner-heading span {color: var(--blue); }
.btn-block{ margin-top: 3rem; display: flex;align-items: center;gap: 2rem;}







.key-areas{margin-top: -10rem; position: relative; z-index: 2; width: calc(100% - 25rem);}
.key-inner{ display: flex;align-items: center;gap: 0.3rem;}
.key-item{display: flex;align-items: center;gap: 1.8rem; color: var(--white); font-size: 4rem;font-weight: 500;line-height: 4.6rem; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(2.3604865074157715px); padding: 20px; min-height: 10rem;}







.what-we-do{padding: 10rem 0;}
.what-right-text{color: var(--black-300); font-size: 2.4rem;font-weight: 400;line-height: 3.5rem; margin-bottom: 5rem;}
.image-wrapper{display: flex;align-items: flex-start; gap: 1.8rem; flex-wrap: wrap;}
.image-item{ width: calc(33.33% - 1.2rem);}
.image-item figure { height: 36.1rem; overflow: hidden; margin-bottom: 3.2rem;}
.image-item figure img{ width: 100%; height: 100%; object-fit: cover; transition: var(--transition);}
.image-item:hover figure img{ transform: scale(1.2);}
.image-item h2{color: var(--black); font-size: 2.2rem;font-weight: 600;line-height: 2.8rem; margin-bottom: 1rem;}
.image-item p{color: var(--black-100); font-size: 1.6rem;font-weight: 400;line-height: 2.2rem;}







.why-choose-us{padding: 8.4rem 0; background-color: var(--black-200);}
.why-choose-us .common-heading-sec .common-heading , .why-choose-us .common-heading-sec .common-heading-text {color: var(--white);}
.why-item-wrapper{display: flex;align-items: flex-start; gap: 3.8rem; flex-wrap: wrap;}
.why-item{width: calc(50% - 2rem); padding: 3.2rem 3.6rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 35.3rem; background: var(--black-400);}
.why-item h3{ margin-top: 3rem; color: var(--blue); font-size: 3rem;font-weight: 500;line-height: 3.5rem;}  
.why-choose-us .common-btn-border:hover{ border-color: var(--blue); color: var(--blue);}






.logo-slider{padding: 7.5rem 0;}
.logoSlider .swiper-wrapper { transition-timing-function: linear !important;}






.service-area{background-color: var(--black-200); padding-bottom: 6rem;}
.service-inner {display: flex;align-items: center; margin-bottom: 6rem;}
.service-item{width: 33.33%; position: relative;}
.service-item figure { position: relative; height: 69.7rem; overflow: hidden;}
.service-item figure:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 42.4%, rgba(0, 0, 0, 0.50) 100%); z-index: 1;}
.service-item figure img{ width: 100%; height: 100%; object-fit: cover; transition: var(--transition);}
.service-item:hover figure img{ transform: scale(1.2);}
.service-text-wrap{ position: absolute; bottom: 0; right: 0; width: 100%; padding: 6.5rem 9.2rem; z-index: 2; overflow: hidden;}
.service-text-wrap h2{color: var(--white); font-size: 5rem;font-weight: 600;line-height: 6rem; margin-bottom: -2.5rem; transition: var(--transition);}
.service-item:hover .service-text-wrap h2 {margin-bottom: 1.2rem;}
.service-text-wrap a{ position: relative; bottom: -100px; display: flex; align-items: center; gap: 1.5rem; width: fit-content; color: var(--white); font-size: 1.5rem;font-weight: 500;line-height: 2.5rem; transition: var(--transition);}
.service-item:hover .service-text-wrap a {bottom: 0px;}
.service-text-wrap a:hover{color: var(--blue);}
.service-area .common-btn { margin: 0 auto; display: block; width: fit-content;}





.get-to-know { padding: 7.5rem 0 6.5rem;}
.get-to-know .common-heading-sec .common-heading { margin-bottom: 2.4rem;}
.get-to-know p {color: var(--black-100); font-size: 2rem;font-weight: 400;line-height: 3rem; margin-bottom: 1rem;}
.get-to-know .left figure { margin-top: 5rem;}
.get-to-know .inner-area { position: relative; display: flex; align-items: flex-start; gap: 10.6rem;}
.get-to-know .inner-area .left , .get-to-know .inner-area .right{ width: calc(50% - 2.5rem);}
.get-to-know .inner-area .right {  margin-top: 11rem;}
.get-to-know .inner-area .right figure { margin-bottom: 1.5rem;}
.get-middle {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}



.subscribe-area{overflow: hidden;}
.subscribe-area .inner-wrap {display: flex; align-items: flex-start;}
.subscribe-area .inner-wrap .left , .subscribe-area .inner-wrap .right {width: 50%; padding: 3.6rem 0;}
.subscribe-area .inner-wrap .left { position: relative; background-image: url(../images/subscribe-bg.png); background-position: center; background-size: cover; background-repeat: no-repeat;}
.subscribe-area .inner-wrap .left::after { position: absolute; content: ""; top: 0; right: 0; width: 100vw; height: 100%; background-color: rgba(0, 177, 236, 0.6);}
.subscribe-area .inner-wrap .right{position: relative;}
.subscribe-area .inner-wrap .right::after { position: absolute; content: ""; top: 0; left: 0; width: 100vw; height: 100%; background-color: #16253C;}
.subscribe-area h2 { position: relative; z-index: 1; color: var(--white); font-size: 4rem;font-weight: 600;line-height: 6rem; text-align: center; margin-bottom: 2rem;}
.subscribe-area .common-btn-border { position: relative; z-index: 1; margin: 0 auto; display: block; width: fit-content;}

.subscribe-area .inner-wrap .right form p{display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;}
.form-control { display: inline-block; width: 55.2rem; padding: 1rem; border: 0.1rem solid var(--blue); background: transparent; height: 5.3rem; border-radius: 0; box-shadow: none; color: var(--white); font-size: 1.6rem;font-weight: 400;line-height: 3rem;}
.form-control::placeholder { color: var(--black-100); font-size: 1.6rem;font-weight: 400;line-height: 3rem;}
.form-control:focus { color: var(--white); box-shadow: none;outline: none; background: transparent;}

.submit-btn { margin-left: -14rem; display: flex; align-items: center; height: 5.3rem; padding: 1rem 3.3rem; color: var(--white); font-size: 1.5rem; font-weight: 500; line-height: 2.5rem; border-radius: 0; border: none; cursor: pointer; background-color: var(--blue);}





.site-footer { padding-top: 5rem; background: linear-gradient(180deg, #040F20 57.84%, #00B1EC 199.11%);}
.site-footer .custom-logo-link {display: block; width: 32.5rem; margin: 0 auto;}
.site-footer address {color: var(--white); font-size: 2rem; font-weight: 400; line-height: 5rem; text-align: center; margin-bottom: 2.5rem;}


ul.footer-nav {display: flex;align-items: center; justify-content: center; gap: 5rem; margin-bottom: 3rem;}
ul.footer-nav li a{ display: inline-block; color: var(--white); font-size: 1.5rem;font-weight: 500;line-height: 2.5rem; transition: var(--transition);}
ul.footer-nav li.current-menu-item a , ul.footer-nav li:hover a {color: var(--blue);}

.footer-bottom {padding: 1.6rem 0; border: 0.1rem solid #075076;}
.footer-bottom .inner-wrap{display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap;}

.socialmenu-nav { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;}
.socialmenu-nav li a { line-height: 0}
.socialmenu-nav li a i { font-size: 2rem; color: var(--white); transition: var(--transition);}
.socialmenu-nav li a:hover i { color: var(--blue)}


ul.footer-secondary-nav , .footer-bottom .right{ display: flex; align-items: center; gap: 3rem; flex-wrap: wrap;}
ul.footer-secondary-nav li a { position: relative; display: inline-block; padding: 0; color: var(--white); font-size: 1.6rem; font-weight: 400; line-height: 2rem; transition: var(--transition);}
ul.footer-secondary-nav li{ position: relative;}
ul.footer-secondary-nav li::after { content: ""; position: absolute; top: 50%; right: -1.5rem; transform: translateY(-50%); width: 0.1rem; height: 2rem; background: var(--white);}
ul.footer-secondary-nav li a:hover { color: var(--blue)}
ul.footer-secondary-nav li.current-menu-item a { color: var(--blue); font-weight: 700;}

.footer-bottom .right span {  display: inline-block; color: var(--white); font-size: 1.6rem; font-weight: 400; line-height: 2rem;}