:root {


  
  /* Brand Colors */

  --color-primary: rgb(22, 176, 129);
  --color-secondary: rgb(35, 31, 32);
  --color-tertiary: rgb(255, 255, 255); 


  /* Font Colors */
 
  --primary-font-color: rgb(22, 176, 129);
  --secondary-font-color: rgb(35, 31, 32);
  --tertiary-font-color:rgb(255, 255, 255); 


  /* Background Colors */

    --primary-bg-color: linear-gradient(113deg,rgba(10, 51, 38, 1) 0%, rgba(22, 176, 128, 1) 100%);
    --secondary-bg-color: linear-gradient(121deg,rgba(35, 31, 32, 1) 37%, rgba(69, 67, 67, 1) 82%, rgba(110, 110, 110, 1) 100%);
    --tertiary-bg-color: rgb(255, 255, 255); 
   
   
   
  /* CTA Font Colors */

  --cta-primary-font-color: rgb(22, 176, 129);
  --cta-secondary-font-color: rgb(35, 31, 32);
  --cta-tertiary-font-color:rgb(255, 255, 255); 

  /* CTA Backgrounds */

    --cta-primary-bg-color: linear-gradient(113deg,rgba(10, 51, 38, 1) 0%, rgba(22, 176, 128, 1) 100%);
    --cta-secondary-bg-color: rgb(255, 255, 255);
    --cta-tertiary-bg-color: linear-gradient(121deg,rgba(35, 31, 32, 1) 37%, rgba(69, 67, 67, 1) 82%, rgba(110, 110, 110, 1) 100%);

  /* Border Colors */

    --border-primary-color: rgb(22, 176, 129);    
    --border-secondary-color:  rgb(35, 31, 32);
    --border-tertiary-color: rgb(255, 255, 255); 

    
    
    
 /* Font Sizes */

    --font-size-small: 0.875rem;  /* 14px */
    --font-size-medium: 1rem;     /* 16px */
    --font-size-large: 1.25rem;   /* 20px */
    --font-size-xlarge: 1.5rem;   /* 24px */
    --font-size-xxlarge: 2rem;    /* 32px */
    --font-size-special: 3rem;    /* 48px */
    

/* CTA padding */

 --cta-padding-y: 14px;
 --cta-padding-x: 28px;






  /* Fonts with Fallbacks */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:"Raleway", Arial, Helvetica, sans-serif;
  --font-cta:  "Roboto Flex", Arial, Helvetica, sans-serif;


/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
   
}

::-webkit-scrollbar-track {
    background: var(--color-tertiary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-tertiary);
    width: 8px;
    
}

  



}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
  }




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



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



/* NAVBAR */
.nav {
  position: sticky;
  top: 0;
  background: var(--tertiary-bg-color);
  z-index: 1000;
  
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 1rem 0.4rem 3rem;
  border-bottom: 0.5px solid rgba(105, 10, 10, 0.2);
}


.nav__logo img{
    height: auto;
    width: 270px;

}



/* DESKTOP MENU */
.nav__menu {

  display: flex;
  gap: 1rem;
}

.nav__link {
  font-family: var(--font-heading);
  font-size: var(--font-size-large);
  font-weight: 500;
  
  color: var(--secondary-font-color);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 6px 10px;
}

.nav__link:hover {
  
  background: none;
  color: var(--primary-font-color);
  transform: scale(1.1);
}

/* CTA */
.nav__cta {
  font-family: var(--font-cta);
  font-size: var(--font-size-medium);
  font-weight: 800;
  padding: var(--cta-padding-y) var(--cta-padding-x);
  background: var(--primary-bg-color);
  color: var(--cta-tertiary-font-color);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  border-radius: 3px;
}

.nav__cta:hover {
  background: var(--secondary-bg-color);

  color: var(--cta-tertiary-font-color);
  transform: scale(1.1);
}


.nav__cta img{

    height: auto;
    width: 25px;
  
}



/* DROPDOWN */
.nav__dropdown {
  position: relative;
  
}

.nav__icon img{
  height:auto;
  width: 16px;

}



.dropdown {
  
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  background: var(--tertiary-bg-color);
  border: 1px solid rgba(105, 10, 10, 0.2);
  display: none;
  grid-template-columns: 1fr;
  
  white-space: nowrap;
  padding: 1rem 1rem;
  border-radius: 15px;
  min-width: 350px;
}

.nav__dropdown.active .dropdown {
  display: grid;
}



.dropdown a {
  
  font-size: var(--font-size-medium);
  color: var(--secondary-font-color);
  border-bottom: 1px solid rgba(105, 10, 10, 0.1);
  padding: 10px;
  transition: background 0.2s;
  
}

.dropdown a:hover {
  
  
  
  color: var(--primary-font-color);
}




/* HAMBURGER */
.nav__hamburger {
  display: none;
  font-size: var(--font-size-xxlarge);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--secondary-font-color);
  border-radius: 50%;

}

.nav__hamburger:hover {
  
  font-size: var(--font-size-xxlarge);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--secondary-font-color);
   
}


/* MOBILE PANEL */
.mobile {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,0.0);
  z-index: 99999;
  
}

.mobile.active {
  display: block;
}



.mobile__panel {
  position: fixed;
  top: 0;   
  
  width: 100%;
  height: 100%;
  background: var(--tertiary-bg-color);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;

  text-align: center;
 
}



.mobile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -10px 0 0 0;
  padding: 15px 15px;
  background: var(--tertiary-bg-color);
  border-bottom: 1px solid #eee;
}





.mobile__close {
  padding: 20px;
  
  align-self: flex-end;
  font-size: var(--font-size-xxlarge);
  color: var(--secondary-font-color);
  background: none;
  border: none;
  cursor: pointer;
}





.mobile__body {
  flex: 1;
  overflow-y: auto;
 

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 130px 20px 20px; /* <-- THIS replaces all your fake padding */
  gap: 1.2rem;
}



.mobile__link {
  font-size: var(--font-size-large);
  font-family: var(--font-heading);
  color: var(--secondary-font-color);

}

.mobile__link:hover {
   font-size: var(--font-size-xlarge);


}

/* MOBILE DROPDOWN */
.mobile__submenu {
    font-family: var(--font-heading);
  display: none;
  padding-top: 20px;
  
}

.mobile__submenu:hover {
    font-family: var(--font-heading);
    color: var(--secondary-font-color);
  display: none;
  padding-top: 20px;
  
}


.mobile__submenu a {
    
  padding: 6px 10px;

 
}
.mobile__submenu a:hover {
 color: var(--primary-font-color);
 
}

.mobile__toggle {
font-family: var(--font-heading);

 font-size: var(--font-size-large);
 color: var(--secondary-font-color);
 cursor: pointer;

}

.mobile__toggle:hover {
 font-size: var(--font-size-xlarge);

}

.mobile__toggle img{
padding-left: 5px;
height: auto;
width: 25px;

}

.mobile__dropdown.active .mobile__submenu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile__link,
.mobile__toggle {
  font-size: var(--font-size-xlarge);
  
}

.mobile__cta {
 
  margin-top: auto;
  margin-bottom: 20px;
  
  display:flex;
  align-items:center;
  gap:4px;
  font-family: var(--font-cta);
  font-size: var(--font-size-large);
  font-weight: 600;
  padding: var(--cta-padding-y) var(--cta-padding-x);
  background: var(--primary-bg-color);
  color: var(--cta-tertiary-font-color);
  border-radius: 4px;

}

.mobile__cta:hover {
  background: var(--secondary-bg-color);
  color: var(--cta-tertiary-font-color);
  transform: scale(1.1);
}

.mobile__cta img{
  height: auto;
  width: 34px;
}

/* HIDE CTA ON MOBILE */
@media(max-width:768px){
  .nav__cta {
    display: none;
  }
}

/* MOBILE HEADER */
.mobile__header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:absolute;
  top:10px;
  left:0;
  padding:0 20px;
}

.mobile__logo{
  width:140px;
}

/* DROPDOWN ANIMATION */
.dropdown {
  transform-origin: top;
  transform: rotateX(-90deg);
  transition: transform 0.3s ease;
}

.nav__dropdown.active .dropdown {
  transform: rotateX(0);
}






/* RESPONSIVE */
@media(max-width: 768px) {

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem 0.9rem 1.5rem;
}

.nav__logo img{
    height: auto;
    width: 170px;

}

  .nav__menu {
    display: none;
  }

  .nav__hamburger {
    display: block;
  }

  .nav__cta {
    margin-right: auto;
    margin-left: 1rem;
  }
}







/*==================== Carousel Section Wrapper ================*/
.carousel-section {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  background-color: var(--color-primary);
  height: 90vh;
}

/*==================== Track ====================*/
.carousel-inner {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1000ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  touch-action: pan-y;
}

/*==================== Slides ====================*/
.carousel-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: clamp(10px, 10vw, 30px);
  min-height: 100vh;
  box-sizing: border-box;
}

.carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.65) 100%
    );
  z-index: 1;
  pointer-events: none;
}

/*==================== Content ====================*/
.slide-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  padding-inline: clamp(24px, 5vw, 60px);

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

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

/*==================== Typography ====================*/
.slide-title {
  margin: 0;

  font-family: var(--font-heading);
  font-weight: 800;

  font-size: clamp(2rem, 8vw, 5rem);
  line-height: 1.25;

  color: var(--color-tertiary);

  opacity: 0;
  transform: translateY(30px);
}

.slide-title span {
  color: inherit;
 text-underline-offset: 6px;
 text-decoration: underline var(--color-tertiary) 2px;
  font-weight: 700;
}

.slide-paragraph {
  margin-top: clamp(40px, 3vw, 60px);
  margin-bottom: clamp(40px, 3vw, 60px);

  max-width: 1050px;

  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 300;
  line-height: 1.8;

  color: var(--color-tertiary);

  opacity: 0;
  transform: translateY(20px);
}

/*==================== CTA Buttons ====================*/
.slide-ctas {
  padding-bottom: clamp(20px, 6vw, 50px);

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

  gap: 16px;

  opacity: 0;
  transform: translateY(20px);
}

button.cta-primary,
button.cta-secondary {
  font-family: var(--font-heading);

  font-size: clamp(1rem, 1vw, 1rem);
  font-weight: 800;

  padding: 16px 30px;

  border-radius: 4px;
  border: 2px solid var(--color-tertiary);

  cursor: pointer;

  text-transform: uppercase;
  letter-spacing: 1px;

  transition:
    transform var(--transition-medium),
    background-color var(--transition-medium),
    color var(--transition-medium);
}

button.cta-primary {
  background: var(--color-tertiary);
  color: var(--color-primary);
}

button.cta-primary:hover,
button.cta-primary:focus {
  background: transparent;
  color: var(--color-tertiary);
  transform: translateY(-4px);
}

button.cta-secondary {
  background: transparent;
  color: var(--color-tertiary);
}

button.cta-secondary:hover,
button.cta-secondary:focus {
  background: var(--secondary-bg-color);
  color: var(--color-tertiary);
  transform: translateY(-4px);
  border: 2px solid var(--secondary-bg-color);
}




/*==================== Circular Navigation ====================*/
.nav-dots {
  position: absolute;
  right: 40px;
  bottom: clamp(25px, 4vw, 40px);

  z-index: 10;

  display: flex;
  align-items: center;
  gap: 14px;
}

.dot {
  width: 18px;
  height: 18px;

  border-radius: 30%;

  border: 2px solid rgba(255,255,255,.5);
  background: transparent;

  cursor: pointer;

  transition: all var(--transition-medium);

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

  font-size: 0;
  color: transparent;
}

.dot:hover {
  transform: scale(1.2);
}

.dot[aria-selected="true"] {
  background: var(--color-tertiary);
  border-color: 2px solid rgba(255,255,255,.5);

  box-shadow:
    0 0 0 6px rgba(255,255,255,.15);
}

.dot[aria-selected="false"] {
  background: transparent;
}

/*==================== Accessibility ====================*/
.dot:focus,
.cta-primary:focus,
.cta-secondary:focus {
  outline: 3px solid rgba(255,255,255,.3);
  outline-offset: 4px;
}

/*==================== Animations ====================*/
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel-slide.is-active .slide-title {
  animation: fadeUp 900ms cubic-bezier(.2,.9,.2,1) 100ms both;
}

.carousel-slide.is-active .slide-paragraph {
  animation: fadeUp 900ms cubic-bezier(.2,.9,.2,1) 250ms both;
}

.carousel-slide.is-active .slide-ctas {
  animation: fadeUp 900ms cubic-bezier(.2,.9,.2,1) 400ms both;
}

/*==================== Responsive ====================*/
@media (max-width: 1024px) {

  .slide-content {
    padding-inline: 24px;
  }

  .slide-title {
    font-size: clamp(3rem, 9vw, 5rem);
    line-height: 1.25;
  }

  .slide-paragraph {
    font-size: clamp(1rem, 3vw, 1.1rem);
  }
}

@media (max-width: 767px) {

  .slide-content {
    text-align: center;
  }

  .slide-title {
    font-size: clamp(2rem, 12vw, 2.4rem);
    line-height: 1.25;
  }

  .slide-paragraph {
    line-height: 2;
  }

  .slide-ctas {
    flex-direction: column;
    width: 100%;
  }

  button.cta-primary,
  button.cta-secondary {
    width: 100%;
  }

  /*==================== Mobile Navigation ====================*/
  .nav-dots {
    left: 50%;
    right: auto;

    transform: translateX(-50%);

    bottom: 20px;

    gap: 12px;
  }

  .dot {
    width: 14px;
    height: 14px;
    display: block;
  }
}








/* ====================================
   LEGACY / ACHIEVEMENT SECTION
==================================== */

.legacy-section{
  width:100%;
  padding:clamp(5rem,8vw,8rem) 0;
  background: var(--tertiary-bg-color);
  color:var(--text-primary);
}

.legacy-section__header{
  margin-bottom:4rem;
}

.legacy-section__eyebrow-wrapper{
  display:flex;
  padding-left: 20px;
  align-items:center;
  width:95%;
  margin-bottom:1.25rem;
}

.legacy-section__eyebrow{
  flex-shrink:0;
  font-family: var(--font-body);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-right:1rem;
}

.legacy-section__line{
  flex:1;
  height:1px;
  background: var(--border-primary-color);
}

.legacy-section__title{
  font-family: var(--font-heading);  
  max-width:900px;
  font-size:clamp(2rem,4vw,4rem);
  color: var(--secondary-font-color);
  line-height:1.1;
  font-weight:700;
  margin-left:clamp(1.5rem,5vw,6rem);
}

.legacy-section__content{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:4rem;
  padding:0 clamp(1.5rem,5vw,6rem);
}

.legacy-section__text{
  flex:1;
  max-width:700px;
  font-family: var(--font-body);
  color: var(--secondary-font-color);
}

.legacy-section__text p{
  font-size:1.1rem;
  line-height:1.9;
  opacity:.9;
   font-family: var(--font-body);
  color: var(--secondary-font-color);
}

.legacy-section__stats{
  min-width:280px;
  text-align:left;
}

.legacy-section__number{
  display:block;
  font-size:clamp(8rem,15vw,12rem);
  font-family: var(--font-body);
  line-height:.9;
  font-weight:900;
  color:var(--color-accent);
}

.legacy-section__label{
  display:block;
  margin-top:.75rem;
  font-size:2rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.7;
  color: var(--color-primary);
}

/* Responsive */

@media (max-width:768px){

  .legacy-section__title{
    margin-left:1.5rem;
    padding-right:1.5rem;
  }

  .legacy-section__content{
    flex-direction:column;
    gap:2rem;
  }

  .legacy-section__stats{
    width:100%;
  }

}


/* Read Story Link */

.legacy-section__link{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin-top:2rem;

  font-family:var(--font-cta);
  font-weight:700;
  font-size:1rem;

  color:var(--color-primary);
  text-decoration:none;

  transition:all .3s ease;
}

.legacy-section__link svg{
  transition:transform .3s ease;
}

.legacy-section__link:hover{
  opacity:.9;
}

.legacy-section__link:hover svg{
  transform:translateX(3px);
}

.legacy-section__link:focus-visible{
  outline:2px solid var(--border-primary-color);
  outline-offset:4px;
}






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

.services-section{
  background:var(--primary-bg-color);
  padding:8rem 0;
  overflow:hidden;
}

.services-section__header{
  margin-bottom:5rem;
}

.services-section__eyebrow-wrapper{
  width:95%;
  margin-left:20px;
  display:flex;
  align-items:center;
  margin-bottom:1rem;
}

.services-section__eyebrow{
  flex-shrink:0;
  color:var(--tertiary-font-color);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.85rem;
  font-weight:700;
  margin-right:1rem;
  padding-right: 20px;  

}

.services-section__line{
  flex:1;
  height:1px;
  background:var(--color-tertiary);
  
}

.services-section__title{
  color:var(--tertiary-font-color);
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.1;
  margin-left:20px;
  max-width:850px;
}

.services-grid{
  width:min(1400px,95%);
  margin:auto;
  display:grid;
  gap:4rem;
}

.service-card{
  position:relative;
  display:grid;
  grid-template-columns:350px 1fr;
  gap:2rem;
  background:none;
  backdrop-filter:blur(10px);
  border:1px solid var(--border-tertiary-color);
  padding:2rem;
}

.service-card__number{
  position:absolute;
  top:-25px;
  left:-25px;
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-tertiary);
  color:var(--primary-font-color);
  font-family: var(--font-body);
  font-size:1.5rem;
  font-weight:800;
  z-index:2;
}

.service-card__image{
  width:100%;
  height:260px;
  object-fit:cover;
}

.service-card__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.service-card__content h3{
  color:var(--tertiary-font-color);
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,2vw,2.2rem);
  margin-bottom:1rem;
}

.service-card__content p{
  color:rgba(255,255,255,.9);
  line-height:1.9;
  margin-bottom:1.5rem;
  max-width:70ch;
}

.service-card__link{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  color:var(--primary-font-color);
  font-weight:700;
  width:max-content;
}

.service-card__arrow{
  transition:transform .3s ease;
}

.service-card__link:hover .service-card__arrow{
  transform:translateX(3px);
}

.service-card__link:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}

@media (max-width:900px){



    
  .service-card{
    grid-template-columns:1fr;
  }

  .service-card__image{
    height:240px;
  }

}

@media (max-width:600px){

  .services-section{
    padding:6rem 0;
  }

  .services-section__eyebrow-wrapper{
  width:90%;
  margin-left:20px;
  display:flex;
  align-items:center;
  margin-bottom:1rem;
}

  .service-card{
    padding:1.5rem;
  }

  .service-card__number{
    width:65px;
    height:65px;
    font-size:1.2rem;
  }

}








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

.cta-section{
  position:relative;
  background:url('/assets/images/background.webp') center/cover no-repeat;
  padding:6rem 0;
  color:var(--tertiary-font-color);
  overflow:hidden;
}

/* DARK OVERLAY */
.cta-section__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
  z-index:1;
}

/* CONTAINER */
.cta-section__container{
  position:relative;
  z-index:2;
  width:min(1200px,95%);
  margin:auto;
}

/* EYEBROW */
.cta-section__eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-left:20px;
  margin-bottom:3rem;
}

.cta-section__eyebrow{
  flex-shrink:0;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--tertiary-font-color);
  margin-right:1rem;
}

.cta-section__line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,0.3);
}

/* CONTENT LAYOUT */
.cta-section__content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:4rem;
}

/* LEFT TEXT */
.cta-section__text{
  flex:1;
  max-width:650px;
}

.cta-section__text h2{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3.5rem);
  margin-bottom:1rem;
}

.cta-section__text p{
  font-size:1.1rem;
  line-height:1.9;
  opacity:.9;
}

/* RIGHT ACTIONS */
.cta-section__actions{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:220px;
}

/* BUTTONS */
.cta-btn{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:var(--cta-padding-y) var(--cta-padding-x);
  font-family:var(--font-cta);
  font-weight:700;
  text-decoration:none;
  transition:transform .3s ease, background .3s ease;
  border-radius:4px;
}

/* WHATSAPP BUTTON */
.cta-btn--whatsapp{
  background:var(--color-primary);
  color:var(--tertiary-font-color);
}

/* CALL BUTTON */
.cta-btn--call{
  background: none;
  border: 2px solid var(--border-tertiary-color);
  color:var(--tertiary-font-color);
}

/* HOVER EFFECT */
.cta-btn:hover{
  transform:translateY(-2px);
}

.cta-btn img{
  width:20px;
  height:20px;
}

/* RESPONSIVE */
@media(max-width:900px){

  .cta-section__content{
    flex-direction:column;
    align-items:flex-start;
  }

  .cta-section__actions{
    width:100%;
    flex-direction:row;
  }

  .cta-btn{
    flex:1;
    justify-content:center;
  }
}









/* =========================
   WHY CHOOSE US SECTION
========================= */

.why-section{
  background:var(--primary-bg-color);
  padding:8rem 0;
  color:var(--tertiary-font-color);
}

/* HEADER */
.why-section__header{
  width:min(1200px,95%);
  margin:auto;
  margin-bottom:4rem;
}

.why-section__eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-left:20px;
  margin-bottom:1.5rem;
}

.why-section__eyebrow{
  flex-shrink:0;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  margin-right:1rem;
}

.why-section__line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.25);
}

.why-section__title{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1.1;
  margin-left:20px;
  max-width:900px;
}

.why-section__subtitle{
  margin-left:20px;
  margin-top:1rem;
  max-width:700px;
  font-size:1.1rem;
  line-height:1.8;
  opacity:.9;
}

/* GRID */
.why-section__grid{
  width:min(1200px,95%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

/* CARD */
.why-card{
  background: none;
  border: 1px solid var(--border-tertiary-color);
  padding:2rem;
  transition:transform .3s ease, background .3s ease;
}

.why-card:hover{
  transform:translateY(-4px);
  background:none;
  border: 1px solid var(--border-tertiary-color);
}

.why-card h3{
  font-family:var(--font-heading);
  font-size:1.4rem;
  margin-bottom:1rem;
  color: var(--color-tertiary);
}

.why-card p{
  line-height:1.8;
  opacity:.9;
  color: var(--color-tertiary);
}

/* RESPONSIVE */
@media(max-width:900px){

  .why-section__grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media(max-width:600px){

  .why-section__grid{
    grid-template-columns:1fr;
  }

  .why-section{
    padding:6rem 0;
  }

}







/* =========================
   OPERATING HOURS SECTION
========================= */

.hours-section{
  background:var(--tertiary-bg-color);
  padding:8rem 0;
  color:var(--secondary-font-color);
}

/* HEADER */
.hours-section__header{
  width:min(1200px,95%);
  margin:auto;
  margin-bottom:4rem;
}

.hours-section__eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-left:20px;
  margin-bottom:1.5rem;
}

.hours-section__eyebrow{
  flex-shrink:0;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  margin-right:1rem;
}

.hours-section__line{
  flex:1;
  height:1px;
  background:var(--border-primary-color);
}

.hours-section__title{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3.5rem);
  margin-left:20px;
}

/* CONTENT */
.hours-section__content{
  width:min(900px,95%);
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:4rem;
}

/* LEFT */
.hours-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.hours-list li{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  padding-bottom:.75rem;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.hours-status{
  margin-top:2rem;
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:700;
}

.status-icon{
  width:44px;
  height:44px;
}

/* RIGHT */
.hours-section__right{
  max-width:500px;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.hours-image{
  width:100%;
  height:360px;
  object-fit:cover;
}

.hours-location{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}

.hours-location img{
  width:22px;
  height:22px;
}

.hours-contact{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.hours-contact a{
  color:var(--primary-font-color);
  text-decoration:none;
  opacity:.9;
}

.hours-contact a:hover{
  opacity:1;
  text-decoration:underline;
}

/* RESPONSIVE */
@media(max-width:900px){

  .hours-section__content{
    flex-direction:column;
  }

}





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

.industries-section{
  background:var(--primary-bg-color);
  padding:8rem 0;
  color:var(--tertiary-font-color);
}

/* HEADER */
.industries-header{
  width:min(1200px,95%);
  margin:auto;
  margin-bottom:4rem;
}

.industries-eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-left:20px;
  margin-bottom:1.5rem;
}

.industries-eyebrow{
  flex-shrink:0;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  margin-right:1rem;
}

.industries-line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.25);
}

.industries-title{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3.5rem);
  margin-left:20px;
  max-width:900px;
}

.industries-subtitle{
  margin-left:20px;
  margin-top:1rem;
  max-width:750px;
  font-size:1.1rem;
  line-height:1.8;
  opacity:.9;
}

/* GRID */
.industries-grid{
  width:min(1200px,95%);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}

/* CARDS */
.industry-card{
  background: none;
  border:1px solid rgba(255,255,255,0.12);
  padding:1.5rem;
  text-align:center;
  font-weight:600;
  transition:transform .3s ease, background .3s ease;
}

.industry-card:hover{
  transform:translateY(-4px);
  background: var(--color-primary);
}

/* RESPONSIVE */
@media(max-width:1000px){
  .industries-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:700px){
  .industries-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:480px){
  .industries-grid{
    grid-template-columns:1fr;
  }
}










/* =========================
   FAQ SECTION
========================= */

.faq-section{
  background:var(--tertiary-bg-color);
  padding:8rem 0;
  color:var(--secondary-font-color);
}

/* HEADER */
.faq-header{
  width:min(1200px,95%);
  margin:auto;
  margin-bottom:4rem;
}

.faq-eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-left:20px;
  margin-bottom:1.5rem;
}

.faq-eyebrow{
  flex-shrink:0;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--primary-font-color);
  margin-right:1rem;
}

.faq-line{
  flex:1;
  height:1px;
  background:rgba(0,0,0,.15);
}

.faq-title{
  margin-left:20px;
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3rem);
  max-width:900px;
}

/* ACCORDION */
.faq-container{
  width:min(1200px,95%);
  margin:auto;
}

.faq-item{
  border-bottom:1px solid rgba(0,0,0,.1);
  padding:1.5rem 0;
}

.faq-item summary{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:1.1rem;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item .icon{
  font-size:1.5rem;
  font-weight:700;
}

.faq-item[open] .icon{
  content:"-";
}

.faq-item p{
  margin-top:1rem;
  line-height:1.8;
  opacity:.85;
}

/* FOOTER */
.faq-footer{
  width:min(1200px,95%);
  margin:auto;
  margin-top:4rem;
  display:flex;
  gap:2rem;
}

.faq-link{
  color:var(--primary-font-color);
  font-weight:700;
  text-decoration:none;
}

.faq-link:hover{
  text-decoration:underline;
}








/* =========================
   CONTACT SECTION
========================= */

.contact-section{
  background:var(--primary-bg-color);
  padding:8rem 0;
  color:var(--tertiary-font-color);
}

/* HEADER */
.contact-header{
  width:min(1200px,95%);
  margin:auto;
  margin-bottom:4rem;
}

.contact-eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-left:20px;
  margin-bottom:1.5rem;
}

.contact-eyebrow{
  flex-shrink:0;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  margin-right:1rem;
}

.contact-line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.25);
}

.contact-title{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3.5rem);
  margin-left:20px;
}

.contact-subtitle{
  margin-left:20px;
  margin-top:1rem;
  max-width:750px;
  line-height:1.8;
  opacity:.9;
}

/* LAYOUT */
.contact-content{
  width:min(1200px,95%);
  margin:auto;
  display:flex;
  gap:4rem;
  justify-content:space-between;
}

/* FORM */
.contact-form-wrapper{
  flex:1;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  padding:14px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.15);
  color:var(--tertiary-font-color);
  outline:none;
}

.contact-form textarea{
  resize:none;
}

.contact-buttons{
  display:flex;
  gap:1rem;
}

.btn-primary{
  background:var(--cta-primary-bg-color);
  color:white;
  border:none;
  padding:var(--cta-padding-y) var(--cta-padding-x);
  cursor:pointer;
  font-weight:700;
}

.btn-secondary{
  background:transparent;
  border:1px solid white;
  color:white;
  padding:var(--cta-padding-y) var(--cta-padding-x);
  cursor:pointer;
}

/* RIGHT SIDE */
.contact-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

/* MAP */
.map-wrapper iframe{
  width:100%;
  height:300px;
  border:0;
}

/* ADDRESS */
.contact-address{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}

.contact-address img{
  width:22px;
  height:22px;
}

/* LINKS */
.contact-links{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.contact-links a{
  color:white;
  text-decoration:none;
  opacity:.9;
}

.contact-links a:hover{
  opacity:1;
  text-decoration:underline;
}

/* RESPONSIVE */
@media(max-width:900px){

  .contact-content{
    flex-direction:column;
  }

}








/* ==========================================
   FLOATING CTA BUTTONS
========================================== */

.floating-cta-wrapper{
    position: fixed;
    left: 20px;
    bottom: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);

    transition:
    opacity .4s ease,
    visibility .4s ease,
    transform .4s ease;
}

.floating-cta-wrapper--visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-cta{
    display: flex;
}

.floating-cta a{
    display: flex;
    align-items: center;
    gap: .75rem;

    padding: 14px 24px;

    background: var(--color-tertiary);

    color: var(--tertiary-font-color);

    text-decoration: none;

    border-radius: 100px;

    font-family: var(--font-heading);
    font-weight: 300;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

    transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.floating-cta a:hover{
    transform: translateY(-3px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.2);
}

/* ICONS */

.floating-cta img{
    width: 22px;
    height: 22px;

    transition: transform .3s ease;
}

.floating-cta a:hover img{
    transform: rotate(20deg);
}

/* WHATSAPP */

.floating-cta--whatsapp a{
    background: #25D366;
}

/* CALL */

.floating-cta--call a{
    background: var(--primary-bg-color);
}

.floating-cta span{
    white-space: nowrap;
}

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

@media (max-width:768px){

    .floating-cta-wrapper{
        left: 10px;
        bottom: 20px;
        gap: 10px;
    }

    .floating-cta a{
        padding: 12px 18px;
    }

    .floating-cta img{
        width: 20px;
        height: 20px;
    }

    .floating-cta span{
        font-size: .9rem;
    }
}















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

.footer{
  background:var(--tertiary-bg-color);
  color:var(--primary-font-color);
  padding:5rem 0 2rem;
}

/* CONTAINER */
.footer-container{
  width:min(1200px,95%);
  margin:auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
}

/* LOGO */
.footer-logo{
  width:180px;
  margin-bottom:1rem;
}

/* TEXT */
.footer-about p{
  line-height:1.8;
  opacity:.85;
  max-width:400px;
}

/* HEADINGS */
.footer-col h3{
  margin-bottom:1rem;
  font-size:1.2rem;
  font-family:var(--font-heading);
}

/* LINKS */
.footer-col a{
  display:block;
  margin-bottom:.6rem;
  text-decoration:none;
  
  color:var(--secondary-font-color);
  opacity:.85;
  transition:opacity .3s ease, transform .3s ease;
}

.footer-col a:hover{
  opacity:1;
  transform:translateX(4px);
}

/* BOTTOM BAR */
.footer-bottom{
  font-family: var(--font-heading);  
  text-align:center;
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--border-primary-color);
  font-size:.9rem;
  opacity:.7;
}

/* RESPONSIVE */
@media(max-width:900px){
  .footer-container{
    grid-template-columns:1fr;
  }
}
















/* =====================================
          About Us
========================================*/



/* =========================
   HISTORY SECTION
========================= */

.history-section{
  background:var(--tertiary-bg-color);
  padding:8rem 0;
  color:var(--secondary-font-color);
}

/* HEADER */
.history-header{
  width:min(1200px,95%);
  margin:auto;
  margin-bottom:4rem;
}

.history-eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-left:20px;
  margin-bottom:1.5rem;
}

.history-eyebrow{
  flex-shrink:0;
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--primary-font-color);
  margin-right:1rem;
}

.history-line{
  flex:1;
  height:1px;
  background:rgba(0,0,0,.15);
}

.history-title{
  margin-left:20px;
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3.5rem);
  max-width:900px;
}

/* CONTENT */
.history-content{
  width:min(1200px,95%);
  margin:auto;
  display:flex;
  gap:4rem;
  align-items:center;
}

/* TEXT */
.history-text{
  flex:1;
}

.history-text p{
  margin-bottom:1.2rem;
  line-height:1.9;
  font-size:1.05rem;
  color:rgba(0,0,0,.75);
}

.history-text strong{
  color:var(--secondary-font-color);
}

/* IMAGE */
.history-image{
  flex:1;
}

.history-image img{
  width:100%;
  height:500px;
  object-fit:cover;
  border-radius:4px;
}

/* RESPONSIVE */
@media(max-width:900px){

  .history-content{
    flex-direction:column;
  }

  .history-image img{
    height:350px;
  }

}













/* ====================================
   PRIVACY POLICY PAGE
==================================== */

.privacy-policy-page{
  background:var(--tertiary-bg-color);
  color:var(--secondary-font-color);
}

/* ====================================
   HERO
==================================== */

.policy-hero{
  padding:clamp(5rem,8vw,8rem) 0 4rem;
}

.policy-container{
  width:min(1100px,95%);
  margin:auto;
}

/* Eyebrow */

.policy-eyebrow{
  display:inline-block;

  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.2em;

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

  margin-bottom:1rem;
}

/* H1 */

.policy-hero h1{
  font-family:var(--font-heading);
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:1.1;

  max-width:900px;

  margin-bottom:1.5rem;

  color:var(--secondary-font-color);
}

/* Intro Text */

.policy-hero p{
  max-width:800px;

  font-size:1.1rem;
  line-height:1.9;

  color:var(--secondary-font-color);

  opacity:.85;
}

.policy-hero p:last-child{
  margin-top:1rem;
  font-weight:600;
}

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

.policy-content{
  padding-bottom:8rem;
}

/* Sections */

.policy-content h2{
  font-family:var(--font-heading);

  font-size:clamp(1.5rem,2vw,2.2rem);

  color:var(--secondary-font-color);

  margin-top:4rem;
  margin-bottom:1rem;

  position:relative;
}

/* Decorative Line */

.policy-content h2::after{
  content:"";

  display:block;

  width:80px;
  height:3px;

  background:var(--color-primary);

  margin-top:.75rem;
}

/* Paragraphs */

.policy-content p{
  font-family:var(--font-body);

  font-size:1.05rem;

  line-height:2;

  color:var(--secondary-font-color);

  margin-bottom:1.5rem;

  opacity:.9;
}

/* Lists */

.policy-content ul{
  margin-bottom:2rem;

  padding-left:2rem;
}

.policy-content li{
  margin-bottom:.85rem;

  line-height:1.8;

  color:var(--secondary-font-color);

  opacity:.9;
}

/* Links */

.policy-content a{
  color:var(--primary-font-color);

  font-weight:600;

  text-decoration:none;

  transition:.3s ease;
}

.policy-content a:hover{
  text-decoration:underline;
}

/* ====================================
   CONTACT BLOCK
==================================== */

.policy-content strong{
  color:var(--secondary-font-color);
}

/* ====================================
   READING EXPERIENCE
==================================== */

.policy-content .policy-container{
  max-width:900px;
}

/* ====================================
   ACCESSIBILITY
==================================== */

.policy-content a:focus-visible{
  outline:2px solid var(--border-primary-color);
  outline-offset:4px;
}

/* ====================================
   RESPONSIVE
==================================== */

@media (max-width:768px){

  .policy-hero{
    padding:4rem 0 3rem;
  }

  .policy-hero h1{
    font-size:clamp(2rem,8vw,3rem);
  }

  .policy-content h2{
    margin-top:3rem;
  }

  .policy-content ul{
    padding-left:1.25rem;
  }

}







/* ====================================
   TERMS OF SERVICE PAGE
==================================== */

.terms-page{
  background:var(--tertiary-bg-color);
  color:var(--secondary-font-color);
}

/* HERO */

.terms-hero{
  padding:clamp(5rem,8vw,8rem) 0 4rem;
}

.terms-container{
  width:min(1100px,95%);
  margin:auto;
}

.terms-eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-bottom:1.5rem;
}

.terms-eyebrow{
  flex-shrink:0;

  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:700;

  letter-spacing:.2em;
  text-transform:uppercase;

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

  margin-right:1rem;
}

.terms-line{
  flex:1;
  height:1px;
  background:var(--border-primary-color);
}

.terms-hero h1{
  font-family:var(--font-heading);
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:1.1;

  max-width:900px;

  margin-bottom:1.5rem;

  color:var(--secondary-font-color);
}

.terms-hero p{
  max-width:800px;

  font-size:1.1rem;
  line-height:1.9;

  color:var(--secondary-font-color);

  opacity:.85;
}

.terms-hero p:last-child{
  margin-top:1rem;
  font-weight:600;
}

/* CONTENT */

.terms-content{
  padding-bottom:8rem;
}

.terms-content .terms-container{
  max-width:900px;
}

.terms-content h2{
  font-family:var(--font-heading);

  font-size:clamp(1.5rem,2vw,2.2rem);

  color:var(--secondary-font-color);

  margin-top:4rem;
  margin-bottom:1rem;
}

.terms-content h2::after{
  content:"";

  display:block;

  width:80px;
  height:3px;

  background:var(--color-primary);

  margin-top:.75rem;
}

.terms-content p{
  font-family:var(--font-body);

  font-size:1.05rem;

  line-height:2;

  color:var(--secondary-font-color);

  margin-bottom:1.5rem;

  opacity:.9;
}

.terms-content ul{
  padding-left:2rem;
  margin-bottom:2rem;
}

.terms-content li{
  margin-bottom:.85rem;
  line-height:1.8;
}

/* LINKS */

.terms-content a{
  color:var(--primary-font-color);
  text-decoration:none;
  font-weight:600;
  transition:.3s ease;
}

.terms-content a:hover{
  text-decoration:underline;
}

/* ACCESSIBILITY */

.terms-content a:focus-visible{
  outline:2px solid var(--border-primary-color);
  outline-offset:4px;
}

/* RESPONSIVE */

@media (max-width:768px){

  .terms-hero{
    padding:4rem 0 3rem;
  }

  .terms-hero h1{
    font-size:clamp(2rem,8vw,3rem);
  }

  .terms-content h2{
    margin-top:3rem;
  }

  .terms-content ul{
    padding-left:1.25rem;
  }

}












/* ====================================
   SERVICE HERO
==================================== */

.service-hero{
  position:relative;
  height:70vh;
  min-height:550px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.service-hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-hero__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.service-hero__content{
  position:relative;
  z-index:2;
  width:min(1400px,95%);
  margin:auto;
}

.service-hero__eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-bottom:1.5rem;
}

.service-hero__eyebrow{
  flex-shrink:0;
  color:white;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.9rem;
  font-weight:700;
  margin-right:1rem;
}

.service-hero__line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.4);
}

.service-hero__title{
  font-family:var(--font-heading);
  color:white;
  font-size:clamp(3rem,6vw,6rem);
  max-width:900px;
  line-height:1.05;
}

/* ====================================
   DESCRIPTION
==================================== */

.service-description{
  background:var(--tertiary-bg-color);
  padding:6rem 0;
}

.service-container{
  width:min(1200px,95%);
  margin:auto;
}

.service-description p{
  max-width:900px;
  margin-bottom:1.75rem;
  line-height:2;
  font-size:1.05rem;
  color:var(--secondary-font-color);
}

/* ====================================
   SECTION HEADER
==================================== */

.service-section-header{
  margin-bottom:4rem;
}

.service-section-header__eyebrow-wrapper{
  display:flex;
  align-items:center;
  width:95%;
  margin-bottom:1.25rem;
}

.service-section-header__eyebrow{
  flex-shrink:0;
  color:var(--primary-font-color);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.9rem;
  font-weight:700;
  margin-right:1rem;
}

.service-section-header__line{
  flex:1;
  height:1px;
  background:var(--border-primary-color);
}

.service-section-header h2{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,4rem);
  color:var(--secondary-font-color);
}

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

.service-subservices{
  background:var(--tertiary-bg-color);
  padding-bottom:8rem;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
}

.service-card{
  position:relative;
  background:white;
  border:1px solid rgba(0,0,0,.08);
  padding:2.5rem;
}

.service-card__number{
  display:inline-flex;
  justify-content:center;
  align-items:center;

  position:absolute;
  top:-20px;
  left:30px;

  width:50px;
  height:50px;

  background:var(--color-primary);
  color:white;

  font-weight:700;
}

.service-card h3{
  margin-top:1rem;
  margin-bottom:1rem;

  font-family:var(--font-heading);
  font-size:1.5rem;

  color:var(--secondary-font-color);
}

.service-card p{
  line-height:1.9;
  color:var(--secondary-font-color);
}

/* ====================================
   RESPONSIVE
==================================== */

@media (max-width:992px){

  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width:768px){

  .service-hero{
    min-height:450px;
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .service-hero__title{
    font-size:clamp(2.25rem,10vw,4rem);
  }

}