body, html {
  margin: 0;
  padding: 0;
}

/* =========================
   HERO BANNER MODULE
   ========================= */

.hero-banner {
  position: relative;
  
  /* 1. USE THE VARIABLE */
  background-image: var(--bg-desktop);
  
  background-size: cover;
  background-position: 50% 50%; 
  background-repeat: no-repeat;
  min-height: clamp(580px, 40vw, 484px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1px; 
  margin-top: 0;
  text-align: center;
  overflow: hidden;
  width: 100vw; 
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* =========================
   MOBILE FIXES (The Swap)
   ========================= */
@media (max-width: 767px) {
  .hero-banner {
    /* 1. SWAP TO MOBILE IMAGE VARIABLE */
    background-image: var(--bg-mobile) !important;
    
    /* 2. Reset Width/Margins (Fixes the white bar) */
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    
    /* 3. Set your specific height */
    height: 599px !important;
    min-height: 599px !important;

    /* 4. Perfect scaling for the portrait photo */
    background-size: cover !important; 
    background-position: center center !important;
    
    align-items: center !important;
  }
}

/* Overlay */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* Your XD gradient */
  background: linear-gradient(180deg, #2B4048 0%, rgba(128,128,128,0) 100%);

  mix-blend-mode: multiply;
  opacity: 0.29;
}


/* Content Wrapper */
.hero-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1200px;
  padding-top: 0;

  /* MAIN CONTROL: move content up/down */
  padding-top: clamp(300px, 14vw, 10px);
}

/* Headline */
.hero-banner h1 {
  font-family: 'Outfit', sans-serif;
  color: #FFFFFF;
  text-transform: capitalize;
margin-top: 0;
  font-size: clamp(40px, 4.2vw, 63px);
  line-height: 1.05;
  letter-spacing: 0px;

  margin: 0 0 18px;

  /* Keeps the two parts together cleanly */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero-banner h1 .text-thin {
  font-weight: 200;
}

.hero-banner h1 .text-normal {
  font-weight: 400;
}

/* Subtext */
.hero-subtext {
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 3px;
  text-transform: uppercase;

  margin: 0 0 34px;
}

/* Button Wrapper */
.hero-btn-wrapper {
  margin-top: 0;
}

/* Button Styling */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: #85B7D4;
  color: #ffffff !important;

  padding: 15px 40px;
  text-decoration: none !important;

  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  border-radius: 50px;

  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: none;
  border: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #073345;
  transform: translateY(-2px);
  outline: none;
}

/* Optional: if HubSpot/theme adds underline on hover */
.btn-primary:hover {
  text-decoration: none;
}

/* =========================
   MOBILE FIXES - HERO BANNER ONLY
   ========================= */
@media (max-width: 767px) {

  .hero-banner {
    /* 1. Set the fixed height of the container */
    height: 599px !important;
    min-height: 599px !important;

    /* 2. Scale image based on HEIGHT (Auto Width, 599px Height) */
    background-size: auto 599px !important;
    
    /* 3. Center the image horizontally so it crops sides equally */
    background-position: center top !important;
    background-repeat: no-repeat !important;
    
    /* Ensure flexbox still centers your text vertically if you want */
    align-items: center !important;
    display: flex !important;
  }
} 

  /* 2. FIX THE CONTENT PADDING
     Adjusts spacing so text isn't pushed too far down or up. */
  .hero-content {
    padding-top: 130px !important; 
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
  }

  /* 3. FIX THE HEADLINE SIZE
     Makes the big text smaller so it fits on phone screens. */
  .hero-banner h1 {
    font-size: 50px !important;
    line-height: 55px !important;
    margin-bottom: 35px !important;
  }
  .hero-banner h1 .text-thin {
    font-weight: 400;
}

  /* 4. FIX THE SUBTEXT
     Ensures the smaller text is readable. */
  .hero-subtext {
        font-size: 13px !important;
        line-height: 23px;
        padding: 0 15px !important; 
        
    }
  }