@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/myriad-pro');


@font-face {
  font-family: 'Tactic Sans';
  src: url('../styles/fonts/tactic-sans-bold.woff2') format('woff2'),
    url('../styles/fonts/tactic-sans-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tactic Sans';
  src: url('../styles/fonts/tactic-sans-black.woff2') format('woff2'),
    url('../styles/fonts/tactic-sans-black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #73D7F8;
  --color-secondary: #011935;
  --color-tertiary: #276089;
  --color-white: white;
  --color-header-sm: #111111;
  --color-header-bg: #001934;
  --color-text: #535353;
  --color-muted: #777777;
  --color-bg: #ffffff;
  --color-btn: #74D7F8;
}


.tactic-sans {
  font-family: 'Tactic Sans' !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: inherit;
}

.after::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0;
  width: 660px;
  height: 40px;
  z-index: -1;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  margin: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  min-width: 1470px;
  /* background: #111111; */
  overflow-x: hidden;
  font-family: 'Montesrrat', Arial, Helvetica, sans-serif;
  color: var(--color-muted);

}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:hover:not(.btn) {
  text-decoration: none;
}






.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
}

.clearfix {
  display: block;
}

/*cookie*/
.cc-animate.cc-revoke.cc-bottom {
  font-size: 14px;
  padding: 5px 10px;
  position: fixed;
  display: block !important;
  transform: none !important;
  bottom: 0 !important;
  left: 20px !important;
}

/*call to action*/
.cta {
  display: none;
}

/*=============================
	          HEADER
===============================*/
header .top {
  padding-inline: 5%;
  background: #0E1407;
  position: relative;
}

header .top .outer {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  max-width: 1411px;
  min-height: 52px;
  margin: 0 auto;
  padding-top: 12px;

}

header .top .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 1025px;
  margin-left: auto;
}

header .top .inner p {
  font-size: 15px;
  letter-spacing: 0.576px;
  font-family: 'Montserrat';
  font-weight: 400;
}

header nav {
  width: 100%;
  display: flex;
  color: var(--color-white);
  padding-inline: 5%;
  background: linear-gradient(180deg, #276089 0%, #011935 100%);

}

#header nav .outer {
  width: 100%;
  max-width: 1411px;
  margin: 0 auto;

}

#header nav .nav-container {
  min-height: 80px;
  max-width: 1275px;
  width: 100%;
  margin-left: auto;
  display: flex;
  justify-content: center;
}

@media(max-width:1450px) {
  #header nav .nav-container {
    /* max-width: 1140px; */
    max-width: 951px;
    gap: 15px;
  }

  header .top .outer {
    max-width: 896px;
    margin: 0 !important;
    margin-left: auto !important;
  }

  .mb-zero {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
}

#header nav .nav-container ul {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100% !important;
  max-width: 780px;
  margin: 0 auto;
  padding-top: 27px;
}

#header nav div ul li {
  font-family: 'Montserrat';
  font-weight: 400;
  font-size: 15px;
  line-height: 120%;
  text-transform: uppercase;
  letter-spacing: 0.54px;

}

#header nav ul li.active-menu a {
  color: var(--color-primary);
  font-weight: bold;
  background: #111111;
  padding: 19px;
  padding-inline: 22px;
  border-radius: 10px;

}

#header nav ul li a:hover {
  color: var(--color-primary);
}

/* logo */
.logo-section {
  width: 506px;
  background: url(../images/content/triangle.png) center no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 380px;
  position: absolute;
  top: 0;
  left: 0;
  background-position-x: -4px;
}


/*=============================
	          CONTENT
===============================*/

#main {
  min-height: 3015px;
  background: url(../images/content/bg-main1.jpg) center no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-inline: 5%;
  padding-top: 10px;
  padding-bottom: 50px;
}

#hero .inner {
  max-width: 1400px;
  margin: 0 auto;
}

#hero .inner .hero-card {
  min-height: 775px;
  background: url(../images/content/hero-img.jpg) center no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 4px solid #74D7F8;
  display: flex;
  flex-direction: column;
  justify-content: end;
  box-shadow: 0 6px 23px 7px rgba(0, 0, 0, 0.315);


}

#hero .inner .hero-card .shadow {
  min-height: 216px;
  background: url(../images/content/shadow-bg.png) center no-repeat;
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  border-left: 11px solid #74D7F8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 33px;
  margin-bottom: 26px;
  padding-left: 42px;
}

#hero .inner .hero-card h1 {
  font-size: 52px;
  font-family: 'Tactic Sans';
  font-weight: 900;
  letter-spacing: -1.3px;
  color: white;
  line-height: 114%;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 1);
  position: relative;
  z-index: 1;

}

#hero .inner .hero-card .content {
  min-height: 142px;
  background: rgba(14, 20, 7, 0.8);
  padding-top: 29px;
  padding-bottom: 15px;
  padding-left: 28px;
  padding-right: 33px;
  display: flex;
  justify-content: space-between;
}

#hero .inner .hero-card p {
  font-size: 23px;
  font-weight: normal;
}

#hero .inner .hero-card h2 {
  font-size: 33px;
  font-weight: 600;
}

#hero #features .inner {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  min-height: 100px;
  max-width: 1210px;
  margin-right: 0;
  margin-left: auto;
}

#hero #features .inner .right {
  display: flex;
  width: 100%;
  max-width: 1011px;
  justify-content: space-between;
  align-items: start;
}


#hero #features .inner .item {
  padding-block: 37px;
  padding-left: 31px;
  padding-right: 24px;
  min-height: 204px;
}

#hero #features .inner .item-shadow {
  box-shadow: inset -10px 0 6px -4px rgba(0, 0, 0, 0.65),
    inset 0 -12px 6px -4px rgba(0, 0, 0, 0.65);
}

#hero #features .inner .item h3 {
  font-family: 'Tactic Sans';
  font-size: 25px;
  color: #111111;
  line-height: 114%;
  letter-spacing: -0.575px;
  font-weight: 900;
  margin-bottom: 38px;
}

#hero #features .inner .item p {
  font-family: 'Poppins';
  font-size: 15px;
  color: #545454;
  line-height: 180%;
  letter-spacing: 0.45px;
}

#about .inner {
  max-width: 1410px;
  margin: 0 auto;
  margin-top: 82px;
}



#about .inner .content h2,
#services .inner h2,
#install .inner h2 {
  font-family: 'Tactic Sans';
  font-size: 51px;
  color: #001933;
  line-height: 114%;
  letter-spacing: -1.02px;
  font-weight: 900;
  margin-bottom: 32px;
}

#about .inner .content .details {
  font-family: 'Poppins';
  font-size: 16px;
  color: #666666;
  line-height: 161%;
  letter-spacing: 0.48px;
  font-weight: normal;
  margin-bottom: 27px;
}

/* SERVICES */
#services {
  padding-left: 33px;
}

#services .inner {
  /* max-width: 1396px; */
  max-width: 1438px;
  margin: 0 auto;
  margin-top: 111px;
}

#services .inner h2 {
  margin-bottom: 45px;
}

#services .inner .service-card {
  max-width: 455px;
  width: 100%;
  min-height: 534px;
  padding-inline: 35px;
  padding-block: 30px;
  box-shadow: 0 6px 23px 7px rgba(0, 0, 0, 0.315);

}




/* WHERE YOU CAN INSTALL */
#install .inner {
  max-width: 1410px;
  margin: 0 auto;
  margin-top: 58px;
  padding-right: 15px;
}

#install .inner h2 {
  margin-bottom: 29px;
}

#install .inner .items {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

}

#install .inner p {
  font-family: 'Poppins';
  font-size: 16px;
  color: #666666;
  line-height: 161%;
  letter-spacing: 0.48px;
  font-weight: normal;
  margin-bottom: 62px;
}

#install .inner .carousel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#install .inner .carousel .items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;

}

#install .inner .carousel .item {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}

#install .inner .carousel h3 {
  font-family: 'Tactic Sans';
  font-weight: 900;
  letter-spacing: -0.575px;
  font-size: 25px;
  margin-bottom: 15px;
  padding-top: 55px;
}

#install .inner .carousel p {
  font-family: 'Poppins';
  font-weight: 400;
  font-size: 16px;
  line-height: 161%;
  letter-spacing: 0.48px;
  text-align: center;
}

.drop-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* CALL US NOW*/
#call-us-now {
  min-height: 1156px;
  background: url(../images/content/bg-main2.jpg) center no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* padding-inline: 5%; */
  padding-top: 13px;
  padding-bottom: 50px;
  position: relative;

}

#call-us-now .inner {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;

}

#call-us-now .inner .top {
  width: 100%;
  display: flex;
  position: relative;
}

#call-us-now .inner .top .left {
  max-width: 1178px;
  background: url(../images/content/left-part.png) center no-repeat;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 304px;
  position: relative;
  z-index: 2;

}

#call-us-now .inner .top .content {
  max-width: 690px;
  padding-top: 17px;
  margin-left: auto;
  margin-right: 236px;
  padding-bottom: 16px;

}


#call-us-now .inner .top .left h2 {
  font-family: 'Tactic Sans';
  font-size: 51px;
  color: #001933;
  line-height: 114%;
  letter-spacing: -1.02px;
  font-weight: 900;
  margin-bottom: 8px;
}

#call-us-now .inner .top .right-image {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}

#call-us-now .inner .mid {
  padding-inline: 5%;
}

#call-us-now .inner .mid .inner {
  max-width: 1399px;
  margin: 0 auto;
  margin-top: 110px;
  display: flex;
  justify-content: space-between;
  align-items: start;

}

#call-us-now .inner .active h3 {
  font-family: 'Tactic Sans';
  font-size: 51px;
  color: var(--color-primary);
  line-height: 114%;
  letter-spacing: -1.02px;
  font-weight: 700;
  margin-bottom: 24px;
}

#call-us-now .inner .active p {
  font-family: 'Poppins';
  font-size: 16px;
  color: white;
  line-height: 180%;
  letter-spacing: 0.48px;
  font-weight: 400;
}

#call-us-now .inner .passive {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-top: -5px;
}

#call-us-now .inner .passive h3 {
  font-family: 'Tactic Sans';
  font-size: 96px;
  font-weight: 900;
  letter-spacing: -2.208px;
  color: rgba(255, 255, 255, 0.20);
  margin-bottom: -71px;
  margin-top: -31px;

}

#call-us-now .inner .passive h4 {
  font-family: 'Montserrat';
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.575px;
  color: var(--color-primary);
  line-height: 114%;
  margin-bottom: 18px;
}

#call-us-now .inner .passive p {
  font-family: 'Poppins';
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.48px;
  color: var(--color-white);
  line-height: 180%;
}

/* Testimonials */
#testimonials {
  min-height: 2174px;
  background: url(../images/content/bg-main-2.jpg) center no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-inline: 5%;
  padding-bottom: 50px;
  padding-top: 18px;

}

#testimonials .inner {
  max-width: 1412px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;

}

#testimonials .inner .left {
  width: auto;
  max-width: fit-content;
}

#testimonials .inner .right {
  width: auto;
  max-width: 461px;
  width: 100% !important;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 75px;
}

#testimonials .inner .right h2 {
  font-family: 'Tactic Sans';
  font-size: 51px;
  color: #001933;
  line-height: 114%;
  letter-spacing: -1.02px;
  font-weight: 900;
  margin-bottom: 30px;
}

#testimonials .inner .right p {
  font-family: 'Poppins';
  font-size: 18px;
  color: #212121;
  line-height: 180%;
  letter-spacing: 0.54px;
  font-style: italic;
  text-align: center;
  /* font-weight: 300; */
  margin-bottom: 109px;
}

#testimonials .inner .right .name {
  font-family: 'Tactic Sans';
  font-weight: 900;
  color: #111111;
  font-size: 25px;
  letter-spacing: 0.575px;
}

.arrow {
  flex-shrink: 0;
  width: 74px;
  height: 42px;
}

#testimonials #cta {
  max-width: 1411px;
  margin: 0 auto;
  min-height: 525px;

  background: url(../images/content/bg-cta.jpg) center no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  margin-top: 35px;
  padding-top: 46px;
  padding-left: 110px;
  padding-bottom: 77px;
}

#testimonials #cta h2 {
  font-family: 'Tactic Sans';
  font-weight: 900;
  color: white;
  font-size: 51px;
  letter-spacing: 1.173px;
  line-height: 114%;
  margin-bottom: 25px;
}

#testimonials #cta p {
  font-family: 'Poppins';
  font-size: 15px;
  color: white;
  line-height: 180%;
  letter-spacing: 0.45px;
  font-weight: 400;
  margin-bottom: 50px;
  max-width: 475px;
}








/*=============================
	          FOOTER
===============================*/



footer {
  background: url(../images/content/bg-footer.jpg) center no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 857px;
  padding-left: 5%;
  padding-right: 5%;
  /* padding: 126px 15px 0 15px; */

  display: flex;
  flex-direction: column;
}

footer .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding-top: 160px; */
  margin-top: auto;

  width: 100%;
}



footer .inner .form {
  width: 100%;
  min-height: 895px;
  background: white;
  padding-inline: 25px;
  padding-top: 85px;
  padding-bottom: 42px;
  margin-top: -656px;
  border-radius: 5px;
}

footer .inner .form-inner {
  max-width: 837px;
  width: 100%;
  margin: 0 auto !important;
}



footer .inner .form .form-inner h2 {
  margin-bottom: 16px;
  font-family: 'Tactic sans';
  font-size: 51px;
  color: #001934;
  line-height: 114%;
  font-weight: 900;
  letter-spacing: 0.45px;
  margin-bottom: 24px;
  text-align: center;

}


footer .inner .form .form-inner p {
  font-family: 'Poppins';
  font-size: 14px;
  color: #001933;
  line-height: 170%;
  text-align: center;
  margin-bottom: 18px;

}


.phone-div {
  position: relative;
}

.phone-div::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 18px;
  background-image: url('../images/content/phone-before.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}








/* Footer bot */
footer .bot {
  margin-top: 27px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: start;
  width: 100%;
}

footer .bot .details .item {
  max-width: 322px;
  min-height: 235px;
  background: white;
  width: 100%;
}

footer .bot .details .item .top {
  width: 100%;
  min-height: 166px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .bot .details .item .phone-link {
  font-family: 'Tactic Sans';
  font-size: 26px;
  color: #001933;
  font-weight: 900;
}

footer .bot .details .item .link {
  font-family: 'Montserrat';
  font-size: 14px;
  color: #001933;
}


footer .cp {
  font-family: 'Montserrat';
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 1.4px;
  color: white;
  text-align: center;

}

footer nav {
  margin-bottom: 14px;
}

footer nav ul li.active-menu a {
  font-weight: 700;
  color: #73DCFF;
}

footer nav ul li a:hover {
  color: #73DCFF;
}


.cp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.designed-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-logo {
  width: 40px;
  height: auto;
  vertical-align: middle;
}




.ctc-form {
  width: 100%;
  max-width: 1470px;
  margin: 0 auto;
}

select,
option,
.ctc-form input[type=text],
.ctc-form input[type=tel],
.ctc-form input[type=email],
.ctc-form textarea {
  height: 60px;
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  box-sizing: border-box;
  padding-left: 20px;
  border: 1px solid #D6D6D6;
  text-align: left;
  background: white;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.43);
  color: black
}

.ctc-form select {
  height: 60px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 40px;
  border: 1px solid #D6D6D6;
  text-align: left;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23535353' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.43);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #535353;
}

.ctc-form select:has(option:checked:not([value=""])) {
  color: black;
}

option::placeholder,
select::placeholder,
.ctc-form input::placeholder,
.ctc-form textarea::placeholder,
.ctc-form select {
  color: #535353;
  font-family: 'Poppins';
  font-size: 16px;
  line-height: 145%;
}

#other-input {
  height: auto !important;
  width: auto !important;
  display: inline-block !important;
  border: none !important;
  border-bottom: 1px solid #C2C2C2 !important;
  box-shadow: none !important;
  padding-left: 10px !important;
  padding-top: 10px;
  background: transparent !important;
}





.ctc-form textarea {
  padding-top: 16px;
  height: 150px;
  resize: none;
  padding-bottom: 30px;
}

.ctc-form .recap {
  display: inline-block;
}

.ctc-form .ctc-hide {
  display: none;
}

.ctc-form .copy {
  text-align: start;
  /* padding-top: 20px; */
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.ctc-form .btn,
.ctc-form .ctcBtn {
  width: 200px;
  height: 60px;
  font-size: 16px;
  padding: 10px;
  font-family: 'Poppins';
  font-weight: bold;
  font-size: 16px;
  background: linear-gradient(180deg, #0094D9, #004A88);

}


form .messages p {
  display: none;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-size: 16px !important;
}

form .loading {
  display: none;
}

form .alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

form .alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

form .alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}


/* INNER PAGES ========================== */
.inner-page {
  padding-bottom: 600px;
}



#inner-reviews .review-cards .r-card {
  max-width: 452px;
  width: 100%;
  min-height: 392px;
  border-radius: 15px;
  background: white;
  padding-inline: 37px;
  padding-top: 30px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
}

#inner-reviews .review-cards .r-card .circle {
  height: 84px;
  width: 84px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-bottom: 18px;
}

#inner-reviews .review-cards .r-card .circle p {
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 43px;
}

#inner-reviews .review-cards .r-card img {
  margin-bottom: 10px;
  max-width: 162px;
}

#inner-reviews .review-cards .r-card .details {
  color: #111111;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  margin-bottom: 8px;
}

#inner-reviews .review-cards .r-card .name {
  color: #132666;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 19px;
  margin-top: auto !important;
}