/* ================================
   HERO + DOUBLE-ROW NAVBAR FIX
   ================================ */

/* FULL navbar height (white bar + menu row) */
:root {
  --navbar-total-height: 150px;
}

/* Hero wrapper */
.hero-section {
  position: relative;
  height: 75vh;
  min-height: 520px;
  width: 100%;
  overflow: hidden;
}

/* Background allowed behind navbar */
.hero-background {
  position: absolute;
  top: calc(-1 * var(--navbar-total-height));
  left: 0;
  width: 100%;
  height: calc(100% + var(--navbar-total-height));
  z-index: 1;
}

/* Background image */
.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* 🔒 CONTENT is pushed BELOW the navbar */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  width: 100%;
  padding-top: calc(var(--navbar-total-height) + 3rem);
  padding-left: 10rem;
  padding-right: 2rem;
}

/* Main heading styles (responsive) */
.hero-heading {
  margin-bottom: 0.5rem;
}
.main-heading {
  font-family: 'Inter', sans-serif;
  font-size: 64px;
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  max-width: 900px;
  text-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

@media (max-width: 1024px) {
  :root {
    --navbar-total-height: 135px;
  }

  .main-heading {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  :root {
    --navbar-total-height: 120px;
  }

  .hero-section {
    height: 65vh;
  }

  .hero-content {
    padding-top: calc(var(--navbar-total-height) + 2.5rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .main-heading {
    font-size: 34px;
    line-height: 1.08;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  :root {
    --navbar-total-height: 110px;
  }

  .hero-section {
    /* crop the hero on small screens so background area is smaller */
    /* height: 45vh;
     */
      height: clamp(45vh, 70vh, 85vh);
    min-height: unset;
  }

  /* Make heading smaller and lift it upward on small phones */
  .hero-content {
    /* reduce the top padding so heading sits higher under the navbar */
    padding-top: calc(var(--navbar-total-height) - 1.25rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .main-heading {
    font-size: 20px;
    line-height: 1.05;
    max-width: 100%;
  }

  /* Move the heading upward more aggressively and keep it above the fold */
  .hero-heading {
    position: relative;
    z-index: 3;
    transform: translateY(-400%);
    margin-bottom: 0;
  }

  /* Extra small phones */
  @media (max-width: 360px) {
    .main-heading { font-size: 18px; }
    /* .hero-heading { transform: translateY(-400%); } */
  }
}

    /* Fix for small phones around 360-400px (prevents overflow at 375px) */
    @media (max-width: 400px) {
      .hero-content {
        padding-top: calc(var(--navbar-total-height) - 1.5rem);
      }

      .main-heading {
        font-size: 20px;
        line-height: 1.06;
        text-shadow: 0 5px 16px rgba(0,0,0,0.55);
      }

      .hero-heading {
        transform: translateY(-320%);
      }
    }

    /* ================================
   STABLE RESPONSIVE HERO TEXT
================================ */

  .hero-section {
  height: 60vh;
  min-height: 420px;
}


.hero-background {
  position: absolute;
  inset: 0;
}

  .hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-overlay {
  position: absolute;
  top: calc(50% + var(--navbar-total-height) / 2);
  left: 8%;
  transform: translateY(-50%);
  max-width: 700px;
  z-index: 2;
}


.hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* TABLET */
@media (max-width: 768px) {
  .hero-overlay {
    top: calc(50% + var(--navbar-total-height));
    left: 5%;
    max-width: 90%;
  }

  .hero-title {
    font-size: clamp(1.3rem, 4vw, 2.2rem);
  }
}

/* MOBILE */
@media (max-width: 480px) {
  .hero-section {
    height: 45vh;
  }

  .hero-overlay {
    left: 5%;
    top: 60%;
    max-width: 90%;
  }

  .hero-title {
    font-size: 1.25rem;
  }
}

.hero-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 6px 20px rgba(0,0,0,0.6);

  /* responsive but controlled */
  font-size: clamp(1.4rem, 3vw, 4rem);
}

.hero-title span {
  display: block;
  white-space: nowrap;   /* 🔒 PREVENT LINE BREAK */
}
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.15rem;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .hero-bg-image {
    object-position: center center;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .hero-bg-image {
    object-position: center bottom;
  }
}

        /* Prevent horizontal scrolling */
        * {
          box-sizing: border-box;
        }
        
        html, body {
          overflow-x: hidden;
          width: 100%;
          max-width: 100vw;
        }
        
        main {
          overflow-x: hidden;
          width: 100%;
          max-width: 100vw;
        }
        
        /* Ensure section doesn't overflow */
        section[style*="padding: 5rem 2rem"] {
          max-width: 100vw;
          overflow-x: hidden;
        }
        
        section[style*="padding: 5rem 2rem"] > div {
          max-width: 100%;
          overflow-x: hidden;
        }
        
        section[style*="padding: 5rem 2rem"] > div > div {
          max-width: 100%;
          overflow-x: hidden;
        }
        
        /* Ensure all child elements are constrained */
        section[style*="padding: 5rem 2rem"] * {
          max-width: 100%;
        }
        
        /* Fix inputs and form elements */
        input, textarea, button {
          max-width: 100%;
          box-sizing: border-box;
        }
        
        @media (max-width: 968px) {
          section[style*="padding: 5rem 2rem"] {
            padding: 3rem 1rem !important;
            max-width: 100vw !important;
          }
          
          section[style*="padding: 5rem 2rem"] > div {
            padding: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
          }
          
          section[style*="padding: 5rem 2rem"] > div > div {
            grid-template-columns: 1fr !important;
            gap: 2rem !important;
            max-width: 100% !important;
            width: 100% !important;
          }
          
          section[style*="padding: 5rem 2rem"] > div > div > div {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
          }
          
          section[style*="padding: 5rem 2rem"] > div > div > div:last-child {
            position: relative !important;
            top: 0 !important;
            padding: 1.5rem 1rem !important;
          }
          
          /* Fix contact cards padding on mobile */
          section[style*="padding: 5rem 2rem"] > div > div > div > div[style*="padding: 1.25rem 1.5rem"] {
            padding: 1rem !important;
          }
          
          /* Fix form inputs on mobile */
          input[type="text"],
          input[type="email"],
          textarea {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
          }
        }
        
        @media (max-width: 480px) {
          section[style*="padding: 5rem 2rem"] {
            padding: 2rem 1rem !important;
          }
          
          section[style*="padding: 5rem 2rem"] > div > div {
            gap: 1.5rem !important;
          }
          
          section[style*="padding: 5rem 2rem"] > div > div > div:last-child {
            padding: 1.25rem 0.75rem !important;
          }
          
          /* Reduce font sizes on very small screens */
          h2 {
            font-size: 1.5rem !important;
          }
          
          h3 {
            font-size: 1.2rem !important;
          }
        }
        /* CONTACT SECTION SPACING FIX */
        /* #contact-section {
          width: 100%;
          overflow-x: hidden;
        } */

        .contact-container {
          width: 100%;
          padding: 2rem 2rem; 
          box-sizing: border-box;
        }

        /* Tablet */
        @media (max-width: 1024px) {
          .contact-container {
            padding: 2rem 1.5rem;
          }
        }

        /* Mobile */
        @media (max-width: 768px) {
          .contact-container {
            padding: 1rem 1.25rem;
          }
        }

        /* Small mobile */
        @media (max-width: 480px) {
          .contact-container {
            padding: 1rem 1rem;
          }
        }

        /* ==============================
          CONTACT SECTION FIX (CLEAN)
          ============================== */

        /* #contact-section {
          width: 100%;
          overflow-x: hidden;
        } */

        .contact-container {
          max-width: 1400px;
          margin: 0 auto;
          padding: 2rem 2rem;
          box-sizing: border-box;
        }

        /* GRID */
        .contact-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          width: 100%;
        }

        /* FORM CARD */
        .contact-form-card {
          background: var(--white);
          padding: 2rem;
          border-radius: 16px;
          box-shadow: 0 10px 60px rgba(0,0,0,0.1);
          width: 100%;
        }

        /* ==============================
          TABLET
          ============================== */
        @media (max-width: 1024px) {
          .contact-container {
            padding: 2rem 1.5rem;
          }

          .contact-grid {
            gap: 3rem;
          }
        }

        /* ==============================
          MOBILE (KEY FIX)
          ============================== */
        @media (max-width: 768px) {

          .contact-container {
            padding: 1rem 1.25rem;
          }

          .contact-grid {
            grid-template-columns: 1fr; /* STACK */
            gap: 2rem;
          }

          .contact-form-card {
            position: relative;   /* 🔥 remove sticky */
            top: 0;
            padding: 1.5rem;
          }
        }

        /* ==============================
          SMALL MOBILE
          ============================== */
        @media (max-width: 480px) {

          .contact-container {
            padding: 1rem 1rem;
          }

          h2 {
            font-size: 1.75rem !important;
          }

          h3 {
            font-size: 1.25rem !important;
          }
        }