/* ✅ Global Fix */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/*———————————————————————
  VARIABLES & BASE
———————————————————————*/
:root {
  --fs-base: 1rem;
  --space: 1rem;
  --clr-gold: #D4AF37;
  --clr-pink: #FF91C1;
}

/* Make typography fluid */
.title {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
}
.hero-right p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}
.btn {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
}

/*———————————————————————
  HERO (MOBILE FIRST)
———————————————————————*/
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space);
  background: linear-gradient(to right, #FCE4EC, #F8BFBF);
  text-align: center;
  overflow: hidden;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  width: 100%;
  max-width: 1200px;
  z-index: 2;
}

.hero-left,
.hero-right {
  width: 100%;
}

.header-photo {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  border-radius: 10px;
}

/*———————————————————————
  SLANTED SECTION (MOBILE FIRST)
———————————————————————*/
.slanted-section {
  padding: 40px 20px; /* custom padding for mobile */
}

.slanted-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.text-container,
.image-container {
  width: 100%;
}

/* Slanted boxes shrink on mobile */
.slanted-box {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(0.5rem, 2vw, 1.5rem) clamp(1rem, 3vw, 3rem);
}

/* Reduce paragraph spacing */
.intro-text p {
  margin-bottom: 20px;
}

/* Remove unintended spacing above image */
.image-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Refine spacing below intro text */
.text-container .intro-text {
  margin-bottom: 0;
}

/* Make “Professional” & “Wedding MC” ~1.8× larger */
.professional,
.wedding-mc {
  font-size: clamp(1.9rem, 7.2vw, 6.3rem);
}

@media (min-width: 768px) {
  .slanted-section .slanted-content {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 30px !important;
  }

  .slanted-section .slanted-content .image-container {
    margin-top: 0 !important;
    transform: translateY(-30px) !important;
  }

  .slanted-section .text-container .intro-text {
    margin-top: 0 !important;
  }
}



/*———————————————————————
  TABLET & UP (≥ 768px)
———————————————————————*/
@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    text-align: left;
    padding: calc(var(--space) * 2);
  }
  .hero-content {
    flex-direction: row;
    gap: calc(var(--space) * 2);
  }
  .hero-left,
  .hero-right {
    width: 50%;
  }

 
  /* Slanted section side-by-side */
  .slanted-content {
    flex-direction: row;
    align-items: center;
  }
  .text-container,
  .image-container {
    width: 50%;
  }
}

/*———————————————————————
  DESKTOP (≥ 1200px) OPTIONAL
———————————————————————*/
@media (min-width: 1200px) {
  .hero {
    padding: 4rem 2rem;
  }
  .slanted-section {
    padding: 4rem 2rem;
  }
}

@media (max-width: 767px) {
  /* 1) Kill any overflow on the page itself */
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  /* 2) Guard against any child element blowing past 100% */
  *, *::before, *::after {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* 3) If you have a main wrapper/container, enforce no horizontal overflow */
  .site-wrapper, .main, .container {
    overflow-x: hidden;
    width: 100%;
  }
}