/* =========================
   HERO FIX (Layout + Responsive)
   ========================= */

/* Hero wrapper / section (adjust selector if different) */
.hero,
.banner,
.banner-container,
.hero-section {
  width: 100%;
  overflow: hidden;
}

/* Main hero inner layout */
.hero .container,
.banner-container .container,
.hero-section .container,
.banner .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 16px;
}

/* Flex/grid balance */
.hero .hero-inner,
.banner-container .banner,
.hero-section .hero-inner,
.banner .banner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Headings spacing */
.hero h1,
.banner-container h1,
.hero-section h1 {
  margin: 0 0 14px;
  line-height: 1.15;
  font-size: clamp(28px, 3.4vw, 56px);
}

/* Paragraph */
.hero p,
.banner-container p,
.hero-section p {
  margin: 0 0 22px;
  max-width: 520px;
  opacity: 0.95;
  font-size: 16px;
  line-height: 1.7;
}

/* Buttons row */
.hero .hero-buttons,
.banner-container .hero-buttons,
.hero-section .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* Buttons consistent */
.hero a.btn,
.hero button,
.banner-container a.btn,
.banner-container button {
  border-radius: 14px !important;
  padding: 12px 18px !important;
  min-height: 44px;
}

/* Chips/badges row */
.hero .hero-badges,
.hero .badges,
.banner-container .badges,
.hero-section .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Right side image control */
.hero .hero-image,
.banner-container .banner-image,
.hero-section .hero-image,
.banner .banner-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image should NOT be too large */
.hero img,
.banner-container img.banner_image,
.hero-section img,
.banner img {
  width: 100%;
  max-width: 440px;   /* <<< yeh control karta hai */
  height: auto;
  display: block;
  border-radius: 26px;
}

/* Background look smooth */
.hero,
.banner-container,
.hero-section,
.banner {
  background: linear-gradient(180deg, #9b6a0b 0%, #b68112 50%, #9b6a0b 100%);
}

/* =========================
   MOBILE FIX
   ========================= */
@media (max-width: 900px) {
  .hero .hero-inner,
  .banner-container .banner,
  .hero-section .hero-inner,
  .banner .banner-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .hero .container,
  .banner-container .container,
  .hero-section .container,
  .banner .container {
    padding: 46px 14px;
  }

  .hero img,
  .banner-container img.banner_image,
  .hero-section img,
  .banner img {
    max-width: 340px;
  }
}