/* Poppins font */

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* Geom Graphic font */

@font-face {
  font-family: "Geom Graphic";
  src: url("/assets/fonts/GeomGraphicW03Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
  /* Colors */
  --primary-color: #09c6c7;
  --secondairy-color: #000;
  --low-opacity-color: #09c6c70f;
  --low-opcaity-black-color: #00000005;

  /* Fonts */
  --poppins: "Poppins", Arial, Helvetica, sans-serif;
  --geo-graphic-bold: "Geom Graphic", Arial, Helvetica, sans-serif;

  /* Sizes */
  --desktop-size: 90vw;
  --max-desktop-size: 1360px;
}



*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-weight: 400;
}



.nav-logo {
  width: 170px;
}

nav {
  width: 100%;
  box-sizing: border-box;
  height: 80px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 999;
  border-bottom: var(--light-border);
  top: 50px;
  background: rgb(255, 255, 255);
  box-shadow: 7px 7px 13px rgba(0, 0, 0, 0.03);
}

.black-color {
  color: #000 !important;
}

.text-left {
  text-align: left !important;
}

.section-header-wrapper .section-header {
  margin-bottom: 0;
  text-align: left;
}

/* .section-wrapper.our-company {
  display: flex;
  flex-direction: row;
} */

.block-img-wrapper {
  width: 100%;
  height: 450px;
  background: black;
  border-radius: 30px;
}

.section-wrapper.our-company {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


/* .nav-col {
  display: flex;
  align-items: center;
} */

.nav-col:first-child {
  flex: 1;
  min-width: 0;
}


.nav-col.menu-items{
  display: flex;
  width: max-content;
  justify-content: flex-end;
}

.section-header-wrapper {
  width: 50%;
  margin-bottom: 20px;
}

.section-header-wrapper h3.section-sub-header
{
  text-align: left;
}

/* 
.nav-wrapper .nav-col:first-child{
  display: flex;
  justify-content: flex-start;
} */


.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90vw;
  margin: 0 auto;
}

.nav-col:first-child {
  flex: 1;
  min-width: 0;
}

.nav-col.menu-items {
  flex: 0 0 auto;
}

p.paragraph.about {
  text-align: left;
  width: 50%;
}

.hero-section-wrapper.left-align {
  justify-content: flex-end;
  align-items: flex-start;
}

.hero-section-wrapper.connect .hero-header-text {
  margin-bottom: 80px;
}

img.top-light {
  position: absolute;
  top: -100px;
  opacity: 80%;
  width: 100%;
  box-sizing: border-box;
}

ul.ul {
  display: inline-flex;
  margin-right: 20px;
}

img.plan-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
ul.ul li {
  margin: 18px;
  list-style: none;
}

ul.ul li a.menu-item {
  font-family: var(--poppins-medium);
  font-size: 12px;
  color: var(--secondairy-color);
  text-decoration: none;
  text-transform: capitalize;
  transition: 0.2s ease-in;
}


ul.ul li a.menu-item:hover{
  color: var(--primary-color);
}

h1.section-header {
  text-align: center;
  color: black;
  font-size: 40px;
  line-height: 40px;
  text-transform: uppercase;
  font-family: var(--geo-graphic-bold);
  margin-bottom: 40px;
  width: 60%;
}

/* .section.partners-sections .section-wrapper .section-header{
  margin-top: 60px;
} */

a.special-btn {
  text-decoration: none;
  background-color: white;
  padding: 14px 26px;
  border-radius: 40px;
  color: black;
  font-size: 12px;
  text-transform: capitalize;
}

.why-chose-wrapper {
  /* background: var(--primary-color); */
  background: linear-gradient(135deg, #0097b2, #50fafb);
}

.section-col.mockup {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 40px;
  margin-left: 0;
}

.section-wrapper.why-chose-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  /* padding: 50px; */
  border-radius: 30px;
  width: var(--desktop-size);
}

.grid-header {
  font-size: 20px;
  line-height: 20px;
  font-family: var(--geo-graphic-bold);
  text-transform: uppercase;
  margin-bottom: 10px;
}

h2.pricing-header {
  color: black;
  margin-top: 20px;
  border-top: 1px solid #00000030;
  padding-top: 20px;
}
.plan-content {
  text-align: center;
  margin-top: 20px;
  background-color: var(--low-opcaity-black-color);
  padding: 20px;
  border-radius: 20px;
}

h3.package-label {
  font-size: 28px;
  text-transform: uppercase;
  font-family: var(--poppins-black);
  color: var(--primary-color);
}



h3.plan-header {
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
  font-family: var(--geo-graphic-bold);
  color: black;
}

div.paragraph p {
  color: black;
}

span.colored {
  font-family: var(--poppins-bold);

  color: var(--primary-color);
}

.plan-card-wrapper {
  width: 100%;
  padding: 20px;
  background: white;
  border-radius: 30px;
  box-shadow: 7px 7px 13px rgba(0, 0, 0, 0.03);
}
.plan-content .paragraph {
  font-size: 18px;
  border-bottom: 1px solid var(--primary-color);
  padding-bottom: 30px;
  margin-bottom: 20px;
  color: black;
}


/* .page-header {
    background-color: linear-gradient(135deg, #0097b2, #50fafb);
} */

.page-header {
    background: linear-gradient(135deg, #0097b2, #50fafb) !important;
    /* margin-top: 50px; */
            margin-bottom: 60px;

}

h4.sub-header {
    font-size: 20px;
}

.page-header-wrapper {
  width: 90vw;
  max-width: var(--max-desktop-size);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  /* height: 160px; */
  padding: 40px 0px;
  text-align: left;
  z-index: 3;
}

h1.page-header-tekst{
  font-family: var(--geo-graphic-bold);
  text-transform: uppercase;
  font-size: 40px;
}

.service-brand-container button{
  color: black;
}

.service-brand-container {
    /* margin-top: 200px; */
    width: 90vw;
    margin: 0 auto;
    /* margin-top: 100px; */
    min-height: 500px;
}

.service-brand-container h1{
  color: black;
  line-height: 25px;
  font-size: 25px;
}

select.select-field {
  background: #e5e5e5;
  border: none;
  color: #000000;
  padding: 12px;
  border-radius: 8px;
}

.plan-card {
  width: 550px;
  /* height: 600px !important; */
  /* background: white; */
  /* padding: 13px; */
  padding: 20px 14px;
  display: flex !important;
  justify-content: center;
  align-items: end;
  margin-right: 10px;
  margin: 0px 5px;
  /* box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08); */
}

.section-wrapper.plan-wrapper {
  /* width: 100%; */
}

.section-wrapper.plan-wrapper .section-header {
  margin: 0;
  margin-top: 40px;
}

.plan-slider-wrapper {
  /* background: red; */
  width: 100%;
  display: flex;
}

.plan-slider-wrapper.slick-slider {
  width: 100% !important;
}

.icon-circle-wrapper {
  width: 70px;
  height: 70px;
  background: #ffffff38;
  border-radius: 50px;

  margin-bottom: 20px;
}

.section.plan-section {
  /* background: var(--low-opacity-color); */
  background-color: var(--low-opcaity-black-color);
  padding-bottom: 40px;
  margin: 60px 0px;
  margin-bottom: 0;
  margin-top: 0;
}

.page-container {
  /* margin-top: 80px; */
}

.section.featured-work-section .section-wrapper {
  display: flex;
  align-items: flex-start;
}

.featured-grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  margin-top: 40px;
}

.section.quote-request-section .section-wrapper {
  background-color: var(--low-opcaity-black-color);
  border-radius: 30px;
}

.section.quote-request-section .section-wrapper h1.section-header {
  color: var(--primary-color);
  margin-bottom: 20px;
}

.grid-col .section-header-wrapper {
  width: 100%;
}

.company-col .section-header-wrapper {
  width: 100%;
}

.company-col:first-child {
  margin-right: 30px;
}

.two-grid-wrapper {
  width: 100%;
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

h3.featured-label {
  border-bottom: 2px solid var(--primary-color);
  width: 260px;
  padding-bottom: 10px;
  padding-left: 20px;
  font-weight: 20px;
  font-size: 18px;
  line-height: 20px;
}

.text-content {
  /* margin-left: -30px; */
  margin-top: 30px;
  position: absolute;
}

img.featured-work-bg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.featured-sub-container {
  width: 100%;
  height: 400px;
  background-color: rgb(216, 216, 216);
  border-radius: 30px;
  /* padding: 30px; */
}

img.company_img_logo {
  width: 100%;
  height: 100%;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-direction: column;
  padding-bottom: 100px;
  /* padding: 100px; */
}

img.slider-arrow-img {
  width: 16px;
}

.section.hero-section {
  /* background-image: url("/assets/bg_2.webp"); */
  background: linear-gradient(135deg, #0097b2, #50fafb);
  height: 1070px;
  background-position: center;
  background-repeat: no-repeat;

  /* background-attachment: fixed;  */
  /* border-bottom: var(--light-border); */
  padding: 0;

  display: flex;
  justify-content: end;
}

.body-content {
  margin-top: 130px;
  overflow-y: hidden;
}

.hero-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.hero-col.text-wrapper {
  justify-content: center;
  top: -40px;
  position: relative;
}

.btn-wrapper {
  margin-top: 20px;
  position: relative;
  z-index: 1;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

img.arrow-icon {
  width: 10px;
  margin-left: 14px;
  transition: 0.3s ease-in-out;
}

img.jm_logo {
  width: 200px;
  margin-bottom: 40px;
}

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

img.mockup_img {
  width: auto;
  height: 980px;
}

.contact-wrapper {
  display: flex;
}

img.mockup_cutout_img {
  height: 300px;
  position: absolute;
  /* right: 90px; */
}

.contact-wrapper-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 30px;
}

.contact-wrapper-col.cutout-wrapper {
  align-items: flex-end;
  padding: 0;
}


/* .home_link {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;

  margin: 0;
  padding: 0;
} */

img.nav-logo {
    display: block;
    height: auto;
    flex-shrink: 0;
}

.hero-section-wrapper {
  display: flex;
  flex-direction: revert;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
  position: relative;
  z-index: 1;
  width: var(--desktop-size);
  max-width: var(--max-desktop-size);
}

.hero-section-wrapper.about {
  margin-bottom: 100px;
}

.top-nav-contact-container {
  background: black;
  color: white;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
}

.top-wrapper {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

h1.hero-header-text {
      font-size: 40px;
    line-height: 40px;
  width: 100%;
  font-family: var(--geo-graphic-bold);
  text-transform: uppercase;
  margin-bottom: 20px;

  background: var(--light-to-lighGrey);

  color: white;
}

.bg_circle {
  content: "";
  width: 170px;
  height: 170px;
  background: linear-gradient(135deg, #0097b2, #50fafb) red;
  border-radius: 50%;
  position: absolute;
  opacity: 18%;
}

h4.company_name_header {
  font-size: 10px;
  color: black;
  font-size: 20px;
}

.icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

h1.hero-header-text .gradien-color-txt {
  font-family: var(--mortend-font);
  text-transform: uppercase;
}

.gradien-color-txt {
  /* Gradient setup */
  background: linear-gradient(
    90deg,
    var(--Light-blue),
    var(--super-light-blue),
    var(--Light-blue) /* Repeat first color for smooth looping */
  );
  background-size: 200% auto; /* Double width for seamless transition */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  /* Text styling */
  width: max-content;
  /* font-family: var(--mortend-font);
  text-transform: uppercase;
   */
  /* Animation - Smooth infinite loop */
  animation: gradientFlow 2s linear infinite;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% center; /* Start left */
  }
  100% {
    background-position: 200% center; /* Move fully right (double width) */
  }
}

button{
  cursor: pointer;
}

.check-icon {
  width: 14px;
  height: 21px;
  fill: var(--primary-color);
  /* backgro
  
  
  und:url('/assets/check.svg'); */
}

h4.sm-text {
  margin-left: 20px;
  font-size: 16px;
  width: 70%;
  font-weight: 500;
}


.section.service_brand_packge{
  background-color: var(--low-opcaity-black-color);
  padding-top: 40px;
}

.section.service_brand_packge .section-wrapper{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

h3.hero-sm-text {
  font-size: 20px;
  font-family: var(--montserrat-regular) !important;
  font-weight: 500;
  width: 80%;
  line-height: 30px;
}

.tabcontent h3 {
  color: black;
}

.tabcontent p {
  color: black;
}

/* button style primary */

a.btn.primary-btn,
button.btn.primary-btn {
  position: relative;
  background: var(--btn-light-to-blue);
  box-shadow: var(--primary-btn-glow);

  transition: box-shadow 0.5s ease-in;
  overflow: hidden; /* This ensures the pseudo-element doesn't overflow */
  z-index: 1; /* Establish stacking context */
  border: 1px solid #ffffff69;
}


img.svg-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}


.section.section-job-openings .section-wrapper {
  background: var(--low-opcaity-black-color);
  border-radius: 30px;
  padding: 60px;
}

.section.hero-section.about,
.section.hero-section.connect {
  padding-top: 200px;
  height: max-content;
}

.job-wrapper:first-child {
  padding-top: 0 !important;
}

.job-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #0f0f0f21;
  padding-bottom: 20px;
  padding-top: 20px;
}

h3.job-type {
  color: black;
  font-size: 18px;
  text-transform: capitalize;
}

a.email {
  color: var(--primary-color);
}

h1.job-title {
  color: var(--primary-color);
  font-size: 24px;
  text-transform: capitalize;
}

.grid-column .section-header {
  margin-bottom: 0;
  text-align: left;
  line-height: 40px;
  margin-bottom: 20px;
}

.section-header span{
  font-family: var(--geo-graphic-bold) !important;
}

img.ajax-image {
  width: 100%;
}


.services-col-wrapper.odd {
  display: flex;
  flex-direction: row-reverse;
}

button.side-responisve-menu {
  width: 40px;
  height: 40px;
  /* background: #0000000f; */
  border: none;
  background: transparent;
}

.grid-column p {
  color: #000;
}
p.sub-paragraph {
  font-size: 14px;
  color: #c2c2c2;
}

h1.page-header {
  color: var(--primary-color);
  font-size: 230px;
}

.top-contact-info {
  display: flex;
  font-size: 12px;
  margin: 6px;
}

h3.sub-header {
  color: black;
  font-size: 30px;
}

.page-header-wrapper .sub-header
{
  text-transform: uppercase;
}

.page-header.service-page {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-header-wrapper .description
{
  width: 40%;
  font-size: 16px;
  line-height: 24px;
  margin-top: 10px;
}

.view-more-btn {
  border: none;
  padding: 12px 30px;
  font-size: 14px;
  border-radius: 50px;
  background-color: var(--primary-color);
  text-decoration: none;
}

.error-box-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid-column.openings-wrapper {
  width: 45%;
}

p.header-paragraph {
  font-size: 14px;
  line-height: 21px;
}

.job-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid-2x-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

img.mockup_img-why-chose {
  width: 100%;
  /* height: 100%;
  object-fit: cover; */
  width: 430px;
  position: absolute;
  box-sizing: border-box;
}

a.btn.primary-btn::before,
button.btn.primary-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    70deg,
    var(--Light-blue),
    var(--super-light-blue)
  );
  opacity: 0;
  transition: opacity 0.5s ease-in;
  z-index: -1; /* Place it behind the text */
  box-shadow: 0px 12px 50px #3a93ff9b;
}

a.btn.primary-btn:hover,
button.btn.primary-btn:hover {
  /* nieuwe schaduw op hover */
  box-shadow: 0 12px 50px #3a93ff9b;
}

a.btn.primary-btn:hover .arrow-icon,
button.btn.primary-btn:hover .arrow-icon {
  margin-left: 20px;
}

a.btn.primary-btn:hover::before,
button.btn.primary-btn:hover::before {
  /* gradient fade‑in */
  opacity: 1;
}

a.btn,
button.btn {
  text-decoration: none;
  padding: 20px 26px;
  border-radius: 50px;
  margin: 10px;
  /* border: 1px solid #ffffff69; */
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}

a.btn.secondary-btn {
  padding: 0;
}

/* end button style */

.sec-btn-wrapper {
  position: relative;
  display: inline-block; /* of flex/inline-flex wat jij gebruikt */
  padding: 20px 26px;
  border-radius: 110px;
  background: var(--btn-light-to-grey); /* vaste basis */
  border: 1px solid #ffffff24;
  backdrop-filter: blur(4px);
  overflow: hidden; /* verberg ::before buiten rand */

  /* alleen animaties die wél kúnnen vloeien */
  transition:
    backdrop-filter 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

/* pseudo-laag met de hover‑gradient */
.sec-btn-wrapper::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background: linear-gradient(-100deg, #0d1321, #b2b2b224);
  opacity: 0; /* onzichtbaar bij start */
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* klik blijft op de knop zelf */
  z-index: -1; /* achter de content, vóór de achtergrond */
}

.sec-btn-wrapper:hover::before {
  opacity: 1; /* fade‑in → vloeiende overgang */
}

.sec-btn-wrapper img.arrow-icon {
  transition: 0.3s ease-in-out;
}
.sec-btn-wrapper:hover img.arrow-icon {
  margin-left: 20px;
}

.page-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-height: 250px;
}

/* .page-wrapper {
  width: 1280px;
} */

.section.about-me {
  border-top: var(--light-border);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 100px; */
  border-bottom: var(--light-border);
}

.section-wrapper {
  width: 90vw;
  max-width: var(--max-desktop-size);
  display: flex;

  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.service-parent-wrapper {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    margin: 0 4px;
    transition: 0.2s all ease;
}

img.block-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25d366;
  color: white;
  font-size: 24px;
  padding: 15px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 70px;
  height: 70px;
  z-index: 9999;
}

.whatsapp-float svg {
  width: 40px;
  height: 35px;
}

img.card-bg-img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}


.service-card-wrapper {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 32px;
    overflow: hidden;

    /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); */

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1.3 / 1;

    flex-shrink: 0;
    overflow: hidden;

    border-bottom: 6px solid #25bec6;
}

h2.card-title {
  font-size: 20px;
  /* border-bottom: 1px solid var(--primary-color); */
  /* padding-bottom: 16px; */
  /* padding-left: 20px;
  padding-right: 20px; */
      width: 100%;
      /* padding-top: 20px; */
  color: black;
  font-family: var(--geo-graphic-bold);
}

.section-wrapper.terms_conditions {
  margin-top: 80px;
}

.section.short-msg .section-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section.hero-section.about .section-wrapper {
  flex-direction: column;
  align-items: center;
}

.section.about-me .section-wrapper {
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
}

h1.primary-header {
  font-family: var(--mortend-font);
  text-transform: uppercase;
  font-size: 30px;
  margin-bottom: 20px;
}

p.paragraph {
  font-size: 14px;
  font-family: var(--montserrat-regular);
  line-height: 21px;
}

.company-col p {
  margin-bottom: 20px;
}

.text-center {
  text-align: center !important;
}

p.paragraph.md-paragraph-size {
  width: 50vw;
}

.btn.secondary-btn.m-top {
  margin-top: 40px;
}

.section.services-section {
  padding: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--low-opcaity-black-color);
}

.transparant-window-container {
  background: var(--bg-light-to-grey);
  padding: 20px;
  border-radius: 30px;
  z-index: 1;
  border: 1px solid #ffffff34;
}

.win-header-wrapper.left-align {
  display: flex;
  align-items: flex-start;
}

.win-header-wrapper.about {
  border-bottom: none;
}

a.header-btn {
  background: white;
  padding: 20px;
  border-radius: 50px;
  width: 230px;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
}

.bottom-box-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

p.header-paragraph {
  width: 100%;
}

.bottom-col.btn-wrapper {
  display: flex;
  justify-content: left;
  padding-left: 0;
  background-color: transparent;
  border-top: 1px solid #ffffff5e;
  border-radius: 0;
  padding: 30px 0px;
}

.bottom-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  background: #ffffff17;
  border-radius: 30px;
  padding: 40px;
  width: 85%;
  /* position: absolute; */
}

h1.include_box_header {
    color: black;
    font-size: 14px;
    text-align: center;
    text-transform: capitalize;
}

h1.include_box_header_total {
    color: black;
    text-align: center;
}



.content_box.detailes_package_page {
    width: 90vw;
    margin: 0 auto;
    background: none;
    padding: 0;
        margin-top: 100px;
    margin-bottom: 60px;

}

.content_box .box-col {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.includes_container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

.tabs-wrapper {
    /* margin: 0 auto; */
    width: 100%;
    margin-bottom: 30px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

label.link_label {
    color: rgb(2, 2, 2);
        /* padding-left: 20px;
    padding-right: 20px; */
    /* text-decoration: underline;
    text-align: center; */
    margin: 0;
    font-weight: 600;
}

a.brand_link {
    display: flex;
    width: 100%;
    height: 110px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #e5e5e5;
}

.section.service-page-wrapper {
    padding-top: 40px;
}

.section.service-page-wrapper .section-wrapper .section-header{
  margin-bottom: 10px;
}
.includes_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 40px;
  padding-bottom: 40px;
}

img.brand_logo_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.include_box {
  color: black;
  background: white;
  border-radius: 10px;
  border: 1px solid #f1f1f1;
  box-shadow: 7px 7px 13px rgba(0, 0, 0, 0.03);

  padding: 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  flex: 0 1 130px;
  min-height: 130px;
}

.include_box .brand_logo {
  width: 100%;
  height: 35px;

  padding: 0;
  display: block !important;
  border-radius: 0;
}

.include_box .brand_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.content_box.detailes_package_page .box-col .content_box_header
{
  color: black;
}

.content_box.detailes_package_page .box-col .box_img_box
{
      width: 100%;
      height: 650px;
}


.header-icon-main {
  min-width: 60px;
  min-height: 60px;
  background: #ffffff3d;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

.window-wrapper {
  background-color: white;
  border-radius: 15px;
  padding: 60px;
  box-shadow: var(--white-btn-glow);
  height: 100%;
}

img.mission-vision-icon {
  width: 40px;
}

.icon-wrapper {
  background: var(--btn-light-to-blue);
  width: 80px;
  height: 80px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ffffff69;
  box-shadow: var(--primary-btn-glow);
}

.window-wrapper.about {
  /* display: flex;
  justify-content: center;
  align-items: flex-start; */
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 40px;
  align-items: flex-start;
}

.dark-text {
  color: var(--dark-blue) !important;
}

.win-header-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding-bottom: 40px;
  border-bottom: 1px solid #dddddd;
}

.win-header-wrapper .paragraph {
  width: 25%;
}

.win-header-wrapper .paragraph.about {
  width: 100% !important;
}

.footer-content-col .col {
  /* padding-left: 130px !important; */
}

.footer-content-col {
  display: flex;
  flex-direction: column;

  /* display: flex; */
  /* display: grid
; */
  /* grid-template-columns: 1fr 1fr; */
  /* gap: 160px; */
}

ul.footer-ul {
  /* display: grid
; */
  /* grid-template-columns: 1fr 1fr; */
  /* gap: 70px; */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  flex-direction: column;
}

h2.service-title {
  font-size: 20px;
}

.win-sub-wrapper {
  margin-top: 40px;
}

h3.service-sub-title {
  font-size: 14px;
  color: var(--dark-blue);
  margin-bottom: 8px;
}

img.burger-icon {
  width: 24px;
}

.header-sub-wrapper {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.list-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.sidebar-header {
  display: flex;
  flex-direction: column-reverse;
  align-items: end;
  border-bottom: 1px solid #0000001f;
  padding-bottom: 20px;
  margin: -20px;
}

button#sidebarClose {
  background: none;
  border: none;
  color: black;
  font-size: 40px;
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Sidebar style */
.sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  width: 60%;
  height: 100vh;
  background-color: white;
  /* backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); */
  /* background: #0d13217d; */
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: right 0.5s ease;
  z-index: 1000;
}

.check-circle {
  min-width: 30px;
  min-height: 30px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
}

a.menu-item {
  /* margin-bottom: 10px; */
  font-size: 14px;
  text-decoration: none;
  /* border-bottom: 1px solid #0000001a; */
  padding-bottom: 20px;
  padding-top: 20px;
}


.sidebar-wrapper a.menu-item {
  /* margin-bottom: 10px; */
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid #0000001a;
  padding-bottom: 20px;
  padding-top: 20px;
}

a.home_link {
  display: flex;
}

.sidebar-wrapper {
  /* display: none; */
display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.sidebar.active {
  right: 0;
}

.sidebar .menu-item,
.sidebar {
  color: rgb(0, 0, 0);
}

.special-btn {
  color: var(--dark-blue);
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
}

.overlay.active {
  display: block;
}

.col-box p.paragraph {
  color: var(--dark-blue);
}

.service-grid-wrapper {
  margin-top: 30px;
}

.service-grid-wrapper {
  margin-top: 4 0px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
}

.projects-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 80px;
  margin-bottom: 60px;
}

.project-box {
  background: var(--bg-light-to-grey);
  width: max-content;
  padding: 10px;
  border-radius: 30px;
  border: 1px solid #ffffff34;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.project-img-box {
  margin-bottom: 40px;
}

.project-img-box img {
  border-radius: inherit;
  width: 100%;
  border-radius: 22px;
}

label.project-date {
  font-size: 12px;
  /* margin-top: 40px; */
  text-align: center;
  margin-bottom: 8px;
  color: var(--light-grey);
}

.project-img-box {
  margin-bottom: 12px;
}

h2.project-title {
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}

.section.portfolio .section-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 60px;
}

.section.portfolio .section-wrapper .header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1.primary-header.portfolio {
  width: 70%;
}

p.paragraph.portfolio {
  width: 60%;
}

.section.portfolio {
  padding-bottom: 100px;
  border-bottom: var(--light-border);
  /* height: 450px; */
}

.faq-wrapper {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 60px;
}

.faq-col h1 {
  width: 60%;
}

.faq-col p {
  width: 50%;
}

.page-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.win-header-wrapper.about {
  padding-bottom: 0;
}

.faq-content-wrapper {
  display: flex;
  align-items: flex-start;
  border-bottom: var(--light-border);
  padding-bottom: 20px;
  padding-top: 20px;
  flex-direction: column;
  cursor: pointer;
}

.question {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  cursor: pointer;
}

.answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.6s ease;
  margin-top: 20px;
  padding-left: 50px;
}

.answer .paragraph {
  width: 100%;
  color: var(--light-grey);
}

.faq-content-wrapper.active .answer {
  max-height: 600px;
  /* transition: max-height 0.5s ease, opacity 0.5s ease; */
}

.faq-content-wrapper h1 {
  width: max-content;
  width: 10px;
  margin-right: 40px;
  font-size: 30px;
  margin-bottom: 0;
}

h2.faq-question {
  font-size: 20px;
  font-family: var(--montserrat-regular);
}

.faq-col {
  width: 100%;
}

.section-wrapper.short-msg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 140px;
  padding-bottom: 60px;
}

h1.hg-header {
  font-family: var(--mortend-font);
  font-size: 40px;
  line-height: 50px;
  text-transform: uppercase;
  width: 1000px;
  text-align: center;

  background: var(--light-to-lighGrey);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* For Firefox */
  color: transparent;
  margin-bottom: 40px;
}

img.footer-logo {
  width: 100%;
  margin-bottom: 40px;
}

img.footer-icon {
  width: 30px;
}

.footer-icon-main {
  width: 40px;
  height: 40px;
  display: flex;
  background: #ffffff38;
  /* border: 1px solid #ffffff69; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  margin: 0;
  margin-right: 20px;
  box-shadow: var(--primary-btn-glow);
}

footer.main-footer {
  border-top: var(--light-border);
  /* padding: 100px; */
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;

  /* backdrop-filter: blur(24px); */
}

a.main-btn {
  background-color: white;
  border-radius: 50px;
  font-size: 14px;
  color: var(--primary-color);
  align-content: center;
  text-align: center;
  text-decoration: none;
  padding: 18px;
  margin-bottom: 10px;
}

.col h4.sm-section-header
{
  color: var(--primary-color);
}

.main-form-btn {
  display: inline-flex;
    align-items: center;
    justify-content: center;

    background-color: black;
    color: white;

    border-radius: 50px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;

    padding: 18px 20px;

    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 10px;

    cursor: pointer;
}

.main-form-btn .slider-arrow-img,
button.form-btn .slider-arrow-img
{
  margin-left: 20px;
  transition: 0.2s all ease;
}

.main-form-btn:hover .slider-arrow-img,
button.form-btn:hover .slider-arrow-img{
  margin-left: 24px;
}

.sub-col-wrapper {
  display: flex;
  flex-direction: column;
}

.footer-wrapper {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  width: var(--desktop-size);
  max-width: var(--max-desktop-size);
  margin: 80px 0px;
}

.sub-col-wrapper.socials {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

a.social-btn {
  width: 60px;
  height: 60px;
  background-color: #ffffff38;
  border-radius: 50px;
  margin-right: 10px;
}

.footer-parent-wrapper {
  width: 100%;
  backdrop-filter: blur(100px);
}

.sub-footer {
  border-top: var(--light-border);
  padding: 20px;
  width: 100%;
}

.windows-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

p.footer-txt {
  font-size: 12px;
  text-align: center;
  color: black;
}

.footer-txt a {
  color: black;
  text-decoration: none;
}

h1.footer-header {
  font-family: var(--geo-graphic-bold);
  text-transform: uppercase;
  font-size: 30px;
  margin-bottom: 20px;
}

a.footer-link {
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid #ffffff61;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.colored-text {
  color: var(--primary-color);
}

svg.contact-icon {
  fill: white;
  width: 20px;
}

a.social-btn {
  width: 60px;
  height: 60px;
  background-color: #ffffff38;
  border-radius: 50px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-icon {
  fill: white;
  width: 30px;
}

li.footer-li:last-child {
  margin-right: 0;
}

li.footer-li {
  margin-bottom: 30px;
  list-style: none;
  display: flex;
  align-items: center;
  background: var(--bg-light-to-grey);
  /* border: 1px solid #ffffff34; */
  /* padding: 10px; */
  border-radius: 50px;
  /* padding-right: 40px; */
  margin-right: 20px;
}

.footer-li-col {
  display: block;
  display: flex;
  flex-direction: column;
}

.footer-li b {
  font-size: 14px;
}

a.footer-info {
  font-size: 14px;
  text-decoration: none;
  color: var(--light-grey);
}

p.footer-info {
  font-size: 14px;
  color: var(--light-grey);
}

.footer-main-wrapper {
  width: 80vw;
  /* backdrop-filter: blur(50px); */
}

img.bottom-light {
  width: 100%;
  position: absolute;
  z-index: -3;
  height: 35%;
  object-fit: cover;
}

.footer.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* background-color: var(--primary-color); */
  background: linear-gradient(135deg, #0097b2, #50fafb);
  width: 100%;
}

.section.short-msg {
  border-top: var(--light-border);
  margin-bottom: 80px;
}

.paragraph-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  width: 80%;
  border-top: var(--light-border);
  padding-top: 60px;
}

.paragraph-wrapper p {
  color: var(--light-grey);
}

.section.short-msg .hg-header {
  margin-bottom: 60px;
}

img.social-img {
  width: 20px;
  object-fit: contain;
  height: 20px;
}

a.social-link:last-child {
  margin-right: 0;
}

a.social-link {
  width: 50px;
  height: 50px;
  display: flex;
  background: var(--btn-light-to-blue);
  border: 1px solid #ffffff69;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  margin: 0;
  margin-right: 10px;
  margin-bottom: 18px;
  box-shadow: var(--primary-btn-glow);
}

.social-links {
  display: ruby;
  margin-bottom: 60px;
}

.footer-wrapper .col {
  /* padding-left: 40px; */
  width: 80%;
}

.col.social {
  padding-left: 40px;
  padding-right: 40px;
}

h2.form-header {
  font-family: var(--mortend-font);
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.input-sub-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 30px;
  width: 100%;
}

.card-bg-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}
form.primary-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* box-shadow: 10px 4px 20px 0 rgba(0, 0, 0, 0.06); */
}

.card-title-wrapper {
    position: static;
    width: 100%;
    min-height: 260px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background: #ffffff;
}



.card-text-content {
    width: 100%;
}




.top-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 40%;
  border-radius: inherit;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), transparent);
  pointer-events: none;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.body_text_wrapper p{
  color: black;
  font-size: 14px;
  line-height: 21px;
}

.message_container {
  position: absolute;
  z-index: 999999;
  width: 100%;
  padding: 20px;

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


/* SUCCESS MESSAGE */

.message_container.success_msg .msg_wrapper {
  background-color: #26c999;
}


/* ERROR MESSAGE */

.message_container.error_msg .msg_wrapper {
  background-color: #e74c3c;
}


/* MESSAGE WRAPPER */

.msg_wrapper {
  position: relative;

  padding: 20px;
  border-radius: 10px;
}


/* MESSAGE TEXT */

p.msg_text {
  color: #ffffff;
  font-size: 14px;
  text-align: center;

  margin: 0;
}


/* CLOSE BUTTON */

.msg_close_btn {
  position: absolute;

  right: 20px;
  top: 50%;

  transform: translateY(-50%);

  background: transparent;
  border: none;

  color: #ffffff;

  font-size: 26px;
  font-weight: bold;
  line-height: 1;

  cursor: pointer;
}


/* FADE OUT */

.message_container.hide {
  opacity: 0;
  transform: translateY(-10px);
}




input.input-field {
  border: none;
  background: #f7f7f7;
  padding: 16px;
  border-radius: 10px;
  color: black;
  width: 100%;
  text-transform: capitalize;
}

h3.total_label {
  color: black;
  font-family: var(--poppins);
  font-weight: 800;
  font-size: 40px;
}


.include_title{
  color: black;
  font-size: 12px;
  text-align: center;
}

img.include_logo {
  width: 60px;
  height: max-content;
  object-fit: contain;
}

label {
  color: var(--dark-blue);
  font-size: 14px;
  font-family: var(--montserrat-bold);
  /* text-transform: capitalize; */
  margin-bottom: 10px;
  color: black;
  font-size: 18px;

  font-size: 14px;
}

textarea.textarea {
  height: 190px;
  border: none;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 14px;
  color: black;
  font-size: 14px;
  font-family: var(--poppins);
}

h3.section-sub-header {
  font-size: 14px;
  text-align: center;
  font-weight: 500;
}

/* button.form-btn {
  padding: 20px;
  padding: 20px;
  width: 180px;
  border: none;
  border-radius: 50px;
  background-color: var(--primary-color);
  font-size: 14px;
  text-transform: capitalize;
} */


button.form-btn {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    padding: 18px 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 10px;
    cursor: pointer;
    border: none;
}


.section-header-wrapper .section-header {
  color: var(--primary-color);
  line-height: 40px;
  margin-bottom: 20px;
}

form.quote-form {
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 10px 4px 20px 0 rgba(0, 0, 0, 0.06);
}

form.job-form {
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 10px 4px 20px 0 rgba(0, 0, 0, 0.06);
}

h4.sm-section-header {
  color: black;
  font-size: 18px;
}

.input-2x-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

input.primary-input {
  width: 350px;
  padding: 14px;
  border: 1px solid #c4c4c4;
  border-radius: 10px;
  font-size: 14px;
  color: var(--dark-blue);
}

textarea.primary-text-area {
  width: 100%;
  height: 160px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #c4c4c4;
  color: var(--dark-blue);
  font-size: 14px;
  font-family: var(--montserrat-medium);
}

.msg-wrapper {
  padding: 20px;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 40px;
}

.msg-wrapper.success {
  background-color: #8fffaa;
}

.burger-btn {
  display: none;
}

.msg-wrapper.error {
  background-color: #ff8f8f;
}

p.msg-text {
  font-size: 14px;
  color: rgb(255, 255, 255);
}

textarea.primary-text-area:focus-visible,
input.primary-input:focus-visible {
  outline: none;
  border: 1px solid var(--Light-blue);
}

button.filter-btn {
  color: #ffffff7d;
  font-size: 14px;
  font-family: var(--montserrat-medium);
  background-color: #ffffff1c;
  border-radius: 50px;
  border: none;
  padding: 14px 30px;
  transition: 0.6s ease-in-out;
  cursor: pointer;
  border: 1px solid #ffffff12;
  margin: 0px 6px;
}

button.filter-btn:first-child,
button.filter-btn:last-child {
  margin: 0;
}

button.filter-btn.active {
  background: var(--btn-light-to-blue);
  box-shadow: var(--primary-btn-glow);
  border: 1px solid #ffffff69;
  color: white;
}

button.filter-btn:hover {
  box-shadow: var(--primary-btn-glow);
  color: white;
}

label.cat_name {
  color: #ffffffb8;
  font-family: var(--montserrat-regular);
  font-size: 12px;
}

.card-title {
    margin: 0 0 18px;

    color: #111111;
    font-size: clamp(22px, 2vw, 31px);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.card-description p {
    margin: 0;

    color: #3f3f3f;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.link-label {
    display: inline-block;

    margin-top: auto;
    padding-top: 30px;
    align-self: center;

    color: #111111;
    font-size: 18px;
    font-weight: 700;

    border-bottom: 2px solid #111111;
}

.service-parent-wrapper:hover .service-card-wrapper {
    border: 1px solid var(--primary-color);
    transition: 0.2s all ease;
}

/* Hover-effect */
/* 
.service-parent-wrapper:hover .service-card-wrapper {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.service-parent-wrapper:hover .card-bg-img {
    transform: scale(1.04);
} */

.card-bg-img {
    transition: transform 0.4s ease;
}

.card-body {
  margin-top: 20px;
  margin-bottom: 10px;
}

p.card-text {
  color: var(--dark-blue);
  font-size: 14px;
  font-family: var(--montserrat-medium);
}

.filterable_cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.card {
  background: var(--bg-light-to-grey);
  border: 1px solid #ffffff34;
  display: flex;
  flex-direction: column;
  width: calc(20% - 8px);
  padding: 10px;
  height: max-content;
  border-radius: 15px;
  /* margin-right: 10px; */
  /* margin-bottom: 10px; */
}

.card.hide {
  display: none;
}

.section.portfolio {
  padding-top: 150px;
}


.section.service-page-wrapper
{
  background: var(--low-opcaity-black-color);
}


.section.portfolio .section-wrapper,
.hero-section-wrapper.portfolio,
.hero-section-wrapper.portfolio .hero-header-text {
  margin-bottom: 0;
  padding: 0;
}

.section-wrapper .portfolio-gallery {
  display: flex;
  justify-content: flex-start;
}

.filter-btns-wrapper {
  margin-bottom: 60px;
  background: #0d13218e;
  padding: 8px;
  border-radius: 50px;
  border: var(--light-border);
  position: sticky;
  top: 100px;
  z-index: 10;

  backdrop-filter: blur(24px);
}

.gallery-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;


}



.lazy-render-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.section.hero-section.portfolio {
  height: 400px;
  /* background: var(--Light-blue); */
  margin: 20px;
  margin-top: 100px;
  border-radius: 15px;
  padding: 0;

  background-image: url("/assets/colored_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-section-wrapper.portfolio .hero-header-text {
  color: white;
  background: none;
  -webkit-text-fill-color: unset;
}

.gallery-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
}

img.card-img {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  height: max-content;
}

.card {
  cursor: pointer;
  /* Make card appear clickable */
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.05);
  /* Slight zoom on hover */
}

.section.portfolio-section {
  padding: 20px;
  padding-top: 40px;
}

.section-wrapper.portfolio-gallery {
  width: 100%;
}

/* .popup {
  position: fixed;
  top: -100vh;
  left: 0px;
  width: 100%;
  height: 100%;
}

.popup .overlay {
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 100ms ease-in-out 200ms;
}

.popup .popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  width: 95%;
  max-width: 350px;
  height: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 2px 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 300ms ease-in-out;
  opacity: 0;
}

.popup.active {
  top: 0px;
  transition: top 0ms ease-in-out 0ms;
  position: fixed;
  z-index: 99;
}

.popup.active .overlay {
  opacity: 1;
  transition: all 300ms ease-in-out;
}

.popup.active .popup-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
} */

/* Popup container */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* Semi-transparent background */
.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 200ms ease-in-out;
}

/* Popup content box */
.popup-box {
  background: var(--bg-light-to-grey);
  border: 1px solid #ffffff34;
  display: flex;
  flex-direction: column;
  width: 600px;
  padding: 10px;
  height: max-content;
  border-radius: 15px;
  transition:
    transform 200ms ease-in-out,
    opacity 200ms ease-in-out;
  opacity: 1;
  z-index: 1000;
  backdrop-filter: blur(24px);
}

/* Popup image */
.popup-img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 10px;
}

/* Close button */
.close-btn {
  position: absolute;
  top: -10px;
  right: -9px;
  font-size: 24px;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  background: none;
  border: none;

  background-color: #ff3737;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  color: white;
  font-weight: 100;
}

.popup-txt-wrapper {
  padding-bottom: 20px;
}

.projects-container {
  width: 100% !important;
  box-sizing: border-box;
}

.slick-slider {
  width: var(--desktop-size) !important;
  box-sizing: border-box;
}

.item-box .card {
  width: 100% !important;
}

.item-box {
  padding: 6px;
}

.slick-list.draggable {
  padding: 10px 0px !important;
}

.item-box .card img.card-img {
  /* height: 260px; */
  height: 28vh;
  height: max-content;
}

.slick-list.draggable {
  cursor: grab;
}

.answer p {
  font-size: 14px;
  font-weight: normal;
  line-height: 21px;
  width: 100% !important;
}

a.menu-item.active {
  color: var(--Light-blue);
}

a.menu-item:hover {
  color: var(--Light-blue);
}

.price-card {
  background: var(--bg-light-to-grey);
  padding: 14px;
  border-radius: 30px;
  z-index: 1;
  border: 1px solid #ffffff34;
}

.price-card-wrapper {
  background-color: white;
  border-radius: 18px;
  padding: 30px;
  box-shadow: var(--white-btn-glow);
  height: 100%;

  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  justify-content: space-between;
}

h1.card-header {
  font-size: 20px;
}

.card-sub-header {
  color: var(--dark-blue);
  color: var(--Light-blue);
  font-size: 30px;
  font-family: var(--montserrat-bold);
  margin-top: 10px;
  display: flex;
  align-items: center;
  /* text-transform: capitalize; */
}

.section.price-cards-section {
  padding-top: 0;
  padding: 20px;
}

h3.md-header {
  font-size: 26px;
}

.card-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-section-wrapper.pricing {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section-wrapper.pricing h1 {
  text-align: center !important;
  margin-top: 6px;
}

.card-content {
  margin-top: 20px;
  width: 100%;
  border-top: 1px solid #00000024;
  padding-top: 30px;
}

.process-card-content {
  border: none;
  margin-top: 20px;
}

.card-sub-header span {
  color: #0d13218a;
  font-size: 13px;
  margin-right: 4px;
}

span.monthly_package {
  margin-left: 4px;
}

.price-cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

/* .card-content {
  padding: 20px;
  background-color: #00000008;
  border-radius: 14px;
  margin-top: 20px;
  width: 100%;
  height: 100%;
} */

.service_sub_items {
  /* padding: 14px;
  background-color: #00000008; */
  border-radius: 14px;
  /* margin-top: 10px; */
  margin-bottom: 16px;
  width: 100%;
  /* height: 100%; */
  display: flex;
  align-items: center;
}

.card-content p,
.process-card p {
  color: #0d1321cf;
  font-size: 12px;
  width: 80%;
}

.process-card p {
  font-size: 14px;
  margin-top: 20px;
}

.service_sub_items p strong {
  color: #0d1321cf;
}

.process-card .price-card-wrapper {
  display: flex;
  align-items: flex-start;
}

.section.how-it-works .section-wrapper {
  flex-direction: column;
}

.section-sub-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.process-card .price-card-wrapper .card-col .footer-icon-main {
  width: 80px;
  height: 80px;
}

h1.process-card-header {
  font-size: 24px;
}

.process-card .price-card-wrapper .card-col {
  align-items: flex-start;
}

a.btn.primary-btn.card-btn {
  width: 100%;
  text-align: center;
  margin-top: 40px;
  justify-content: center;
}

img.card-sub-icon {
  width: 12px;
}

.card-icon {
  width: 30px;
  height: 30px;
  display: flex;
  background: var(--btn-light-to-blue);
  border: 1px solid #ffffff69;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  margin: 0;
  margin-right: 20px;
  /* margin-bottom: 18px; */
  box-shadow: var(--primary-btn-glow);
}

h2.contact-header {
  font-size: 28px;
  line-height: 28px;
  margin-bottom: 20px;
  font-family: var(--geo-graphic-bold);
  text-transform: uppercase;
}

.contact-info-wrapper {
  margin-bottom: 20px;
}

.col-header {
      color: black;
    font-family: var(--geo-graphic-bold);
    text-transform: uppercase;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 20px;
}

.col-paragraph {
  color: black;
  font-size: 14px;
}

.contact-container {
  /* background-color: var(--primary-color); */
  background: linear-gradient(135deg, #0097b2, #50fafb);
  /* padding: 30px; */
  border-radius: 20px;
}

.services-col-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: var(--desktop-size);
  margin-top: 60px;
  max-width: var(--max-desktop-size);
}

/* ============================= */
/* Infinite trusted brands */
/* ============================= */
/* ============================= */
/* TRUSTED BRANDS MARQUEE */
/* ============================= */

.trusted-marquee {
  position: relative;

  width: 100vw;
  max-width: 100vw;

  left: 50%;
  transform: translateX(-50%);

  overflow: hidden;
}


/* Bewegende container */
.trusted-marquee-track {
  display: flex;

  width: max-content;

  animation: trustedLogoScroll 25s linear infinite;

  will-change: transform;
}


/* Eén complete set logos */
.trusted-marquee-group {
  display: flex;
  align-items: center;

  width: max-content;

  flex-shrink: 0;

  gap: 40px;
  padding-right: 40px;
}


/* Individuele logo container */
.trusted-logo-item {
  flex: 0 0 180px;

  width: 180px;
  min-width: 180px;

  height: 100px;

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

  padding: 15px;

  overflow: hidden;
}


/* Logo */
.trusted-logo-img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 70px;

  object-fit: contain;
}


/* Infinite animation */
@keyframes trustedLogoScroll {

  from {
      transform: translateX(0);
  }

  to {
      transform: translateX(-50%);
  }

}


/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 768px) {

  .trusted-marquee-track {
      animation-duration: 20s;
  }

  .trusted-marquee-group {
      gap: 25px;
      padding-right: 25px;
  }

  .trusted-logo-item {
      flex: 0 0 130px;

      width: 130px;
      min-width: 130px;

      height: 85px;

      padding: 10px;
  }

  .trusted-logo-img {
      max-width: 100%;
      max-height: 55px;
  }

}


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

@media (max-width: 480px) {

  .trusted-marquee-track {
      animation-duration: 18s;
  }

  .trusted-marquee-group {
      gap: 20px;
      padding-right: 20px;
  }

  .trusted-logo-item {
      flex: 0 0 110px;

      width: 110px;
      min-width: 110px;

      height: 75px;

      padding: 8px;
  }

  .trusted-logo-img {
      width: auto;
      height: auto;

      max-width: 100%;
      max-height: 48px;
  }

}



/* Optional */

/* .partners-slider-wrapper:hover .partners-track {
  animation-play-state: paused;
} */





.section.partners-sections {
  padding-bottom: 140px;
}

.job_type_pill {
  background: var(--primary-color);
  padding: 10px 20px;
  font-size: 14px;
  text-transform: capitalize;
  border-radius: 50px;
  width: max-content;
  margin-bottom: 10px;
}

h1.job_header {
  font-size: 40px;
  line-height: 40px;
  color: white;
  text-transform: uppercase;
  font-family: var(--geo-graphic-bold );
  margin-bottom: 20px;
  width: 80%;
}

.job-description p {
  color: white;
  font-size: 14px;
  font-family: var(--poppins-mediums);
}

.job-description h2 strong {
  font-weight: bold;
  font-family: var(--poppins-bold);
}

/* img.brand_img_logo {
  width: 70%;
  height: 100%;
  object-fit: contain;
} */

.wrapper-brand-logos h1.section-header {
  margin-bottom: 40px;
}

img.main-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto;
}

.partners-logo-slider {
  /* width: var(--desktop-size); */
  overflow: hidden;
  margin: 0;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.job-container {
  display: flex;
  padding: 40px;
  width: 100%;
  justify-content: space-between;
  /* background: var(--low-opacity-color); */
  background: linear-gradient(135deg, #0097b2, #50fafb);
  width: var(--desktop-size);
  border-radius: 30px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  margin-top: 80px;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  /* padding: 6px 12px; */
  border-top: none;
}

img.brand_logo {
    width: 200px;
    border-radius: 10px;
    padding: 10px;
    padding-left: 0;
}

img.box_img {
    width: 100%;
    height: 100%;
}

.content_price {
    color: black;
}

.plan_description {
  margin-top: 20px;
}

.plan_description p,
.plan_description ol li{
  color: black;
  font-size: 14px;
}


.plan_description p strong{
  color: black;
}

.plan_description ol li 
{
  text-align: left;
}

.plan_description li[data-list="bullet"] {
  list-style-type: disc;
}


.section.current_packge {
  padding-top: 60px;
  background-color: var(--low-opcaity-black-color);
}

.text-wrapper .sm-header
{
  color: var(--primary-color);
  font-size: 16px;
}

ol {
  padding-left: 40px;
}

.body_text_wrapper p strong{
  font-size: 14px;
  line-height: 21px;
  color: var(--primary-color);
}

.body_text_wrapper h1 strong
{
  color: black;
  font-size: 30px;
  line-height: 30px;
  font-family: var(--geo-graphic-bold);
  text-transform: uppercase;
  width: 90%;
  display: block;
}


/* .body_text_wrapper p strong{
  color: black;
} */

.body_text_wrapper ol {
  list-style-type: disc;
  padding-left: 25px;
  font-size: 14px;
}

.body_text_wrapper ul li {
  display: list-item;
}

.body_text_wrapper h1{
  color: black;
  font-size: 30px;
  line-height: 30px;
  font-family: var(--geo-graphic-bold);
  text-transform: uppercase;
}

.wrapper-brand-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  /* max-width: var(--max-desktop-size); */
}


.body_text_wrapper ol li{
  color: black;
}

.body_text_wrapper p{

}

a.package_view_link {
    color: #f6f6f6;
    background-color: var(--primary-color);
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 50px;
    display: block;
        width: 100%;
        text-align: center;
    box-sizing: border-box;
    margin-top: 10px;
}

.section-wrappe.package-grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 40%;
  gap: 20px;
  flex-direction: column;
  width: 90vw;
}

.section-wrappe.package-grid-wrapper .grid-col {
  padding: 40px;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  height: max-content;
  margin-bottom: 20px;
}


.section-wrappe.package-grid-wrapper .grid-col .grid-sub-col
{
  border-top: 1px solid #e5e5e5;
}


.section-wrappe.package-grid-wrapper .grid-sub-col {
  width: 100%;
}

img.grid_package_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.grid-col:first-child{
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items: center;
  align-items: flex-start;
  height: max-content;
}

h4.sm-header
{
  color: black;
  font-size: 16px;
  text-transform: capitalize;
}

.sub-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 60%;
}

.slider-btn-wrapper {
  /* position: absolute; */
  top: 50%;
  left: 50%;
  /* width: 108%; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* transform: translate(-50%, -50%); */
  z-index: 10;
}

button.main-btn.secundairy-btn {
  margin-left: 10px;
  background-color: #09c7c71c;
  color: var(--primary-color);
}

.main-btn{
  color: #f6f6f6;
  background-color: var(--primary-color);
  padding: 10px 20px;
  text-decoration: none;
  font-size: 14px;
  border-radius: 50px;
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  margin-top: 10px;
  border: none;
  cursor: pointer;
}

.text-wrapper
{
  /* border-bottom: 1px solid #0000002b; */
}

.price_wrapper {
  padding: 10px 0px;
  margin-top: 20px;
}

h1.price-header
{
  color: var(--primary-color);
    font-size: 45px;
    line-height: 45px;
    font-family: var(--geo-graphic-bold);
    text-transform: uppercase;
    width: 90%;
    display: block;
}

.tabcontent_sub_wrapper {
    display: flex;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.tabcontent{
    display:none;
    /* padding:20px; */
    margin-top:10px;
}

button.tablinks {
    background: #ededed;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    color: #000000;
    border-radius: 50px;
        cursor: pointer;
}

.content_box {
    background-color: white;
    border: none;
    padding: 20px;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-content: center;
    display: flex;
    justify-content: space-between;
    border: 1px solid #e5e5e5;

    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    height: 100%;
}

h1.content_box_header
{
  color: black;
  font-size: 16px;
  text-align: center;
}

.tablinks.active{
    background:var(--primary-color);
    color:#fff;
}

.page-header.brand-package-page {
  margin-bottom: 0;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

.services-slider {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: column;
}

.slider-viewport {
    width: 100%;
    overflow: hidden;

    /* Alleen ruimte boven en onder */
    padding: 30px 0 45px;

    /* Alleen verticale negatieve margins */
    margin: -30px 0 -45px;
}

.slider-wrapper {
    --items-per-view: 4;
    --slider-gap: 6px;

    display: flex;
    gap: var(--slider-gap);
    transition: transform 0.5s ease;
    will-change: transform;
}

.service-card {
    flex: 0 0 calc(
        (
            100% -
            (var(--slider-gap) * (var(--items-per-view) - 1))
        ) / var(--items-per-view)
    );

    min-width: 0;
    display: block;
    box-sizing: border-box;
    text-decoration: none;
    transition: 0.2s all ease;
}


.service-card:hover .card-bottom-col .sm-link-icon
{
  transition: 0.2s all ease;
  margin-left: 20px;
}

.slider-button {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;

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

    border: none;
    border-radius: 50%;
    background: #000;
    color: #fff;
    margin: 4px;
    font-size: 22px;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.image_product_wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.image_product_wrapper {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
  
}


.slider-button:hover {
    transform: scale(1.08);
}

.slider-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}


.page-header.service-page {
  position: relative;
  width: 100%;
  min-height: 415px;
  overflow: hidden;

  display: flex;
  align-items: center;

  background-color: #00b8c8;
  margin: 0;
}

.page-header.service-page.brand-package-page {
  min-height: 200px;
}

/* De afbeelding vult de volledige header */
.page-header.service-page .header-card-bg-img {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: auto;

  width: 45%;
  height: 100%;
  opacity: 0.3;
  object-fit: cover;
  object-position: center right;

  z-index: 1;

  /* Transparant links, volledig zichtbaar rechts */
  -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 20%,
      rgba(0, 0, 0, 0.7) 45%,
      black 70%
  );

  mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 20%,
      rgba(0, 0, 0, 0.7) 45%,
      black 70%
  );
}

/* Turquoise laag zoals in je screenshot */
.page-header.service-page .page-header-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  /* background: linear-gradient(
      90deg,
      #159db8 0%,
      #159db8 35%,
      rgba(21, 157, 184, 0.96) 44%,
      rgba(21, 157, 184, 0.78) 53%,
      rgba(21, 157, 184, 0.48) 63%,
      rgba(21, 157, 184, 0.18) 73%,
      rgba(21, 157, 184, 0) 85%
  ); */
}


.page-header.service-page .sub-header {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* .page-header.service-page .page-header-tekst {
  margin: 0 0 18px;
  max-width: 650px;

  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
  text-transform: uppercase;
} */

.page-header.service-page .description {
  max-width: 580px;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 30px;
  width: 50%;
}




/* 
@media (max-width: 1024px) {
    .slider-wrapper {
        --items-per-view: 3;
    }
}

-@media (max-width: 768px) {
    .slider-wrapper {
        --items-per-view: 2;
    }

    .services-slider {
        gap: 10px;
    }

    .slider-button {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }
}

-@media (max-width: 520px) {
    .slider-wrapper {
        --items-per-view: 1;
    }
} */



.circle_check {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.check_wrapper {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.check_wrapper h4{
  margin-left: 10px;
}

img.sm-link-icon {
  width: 14px;
  margin-left: 10px;
  transition: 0.2s all ease;
}

.card-bottom-col {
  display: flex;
  align-items: center;
  border-top: 1px solid #00000014;
  padding-top: 10px;
  margin-top: 20px;
}


.side-window {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;

  width: min(600px, 100%);
  height: 100vh;
  background-color: #070707;
  box-shadow: -8px 0 25px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-direction: column;

  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow: scroll;
}

.side-window.is-open {
  transform: translateX(0);
}

.side-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 40px;
  border-bottom:1px solid #e5e7eb29;
}

.side-window-header h2 {
  margin: 0;
  font-size: 20px;
}

h1.form-header {
  color: rgb(255, 255, 255);
  font-family: var(--geo-graphic-bold);
  text-transform: uppercase;
  font-size: 30px;
}

.side-window-close {
  border: none;
  background: none;
  color: #ffffff;
  font-size: 36px;
  /* line-height: 1; */
  /* cursor: pointer; */
}

.side-window .form
{
  padding: 40px;
}

.sidebar-logo-wrapper .nav-logo
{
  height: 30px;
  width: max-content;
  margin: 0px 10px;
}


.sidebar-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.home_link img {
  width: max-content;
  height: 30px;
  object-fit: contain;
  margin-right: 20px;
}
.side-window .form .input-wrapper .input-field
{
  background-color: #f7f7f70d;
  color: white;
}

.side-window .form .input-wrapper .textarea{
  background-color: #f7f7f70d;
  color: white;
  font-size: 14px;
}  
form.form {
  width: 100%;
}


.side-window-content {
  flex: 1;
  min-height: 0;
}

.side-window iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.sub_section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 90vw;
  max-width: 1280px; */
}


.sub_description p{
  color: black;
  font-size: 14px;
  line-height: 21px;
}

.header_1
{
  font-family: var(--geo-graphic-bold);
  font-size: 30px;
  color: black;
  text-transform: uppercase;
  line-height: 30px;
  margin-bottom: 10px;
}

.sub_section.even {
  flex-direction: row-reverse;
}

.sub_section_col {
  /* background-color: red; */
  width: 50%;
}


.sub_section.odd .sub_section_col:first-child{
  margin-right: 20px;
}



.sub_section.even .sub_section_col:first-child{
  margin-left: 20px;
  text-align: right;
}


.section.sub_sections
{
  margin-top: 40px;
}


img.sub_section_img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
}

.sub_section_col div{
  color: black;
}

.side-window-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;

  visibility: hidden;
  opacity: 0;

  background-color: rgba(0, 0, 0, 0.55);

  transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
}

.side-window-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

body.side-window-open {
  overflow: hidden;
}