/* ─── InnateModern UX Improvements ────────────────────────────────────────── */

/* ── 1. FIX: background-attachment:fixed breaks on iOS/mobile — use scroll ── */
.section-2 {
  background-attachment: scroll, scroll !important;
  background-size: cover, cover !important;
  background-position: 50%, 50% !important;
}

/* ── 2. Hero homepage slider: add left/right edge padding (container-17 has
        none by default; sub-page heroes already have 30px built in) ──────── */
@media screen and (max-width: 1279px) {
  .container-17 {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* ── 3. Sub-page hero banners: tighten excessive top/bottom padding ──────── */
.hero-2 {
  padding: 140px 30px 72px !important;
}

.hero-2._02.about-hero {
  padding-top: 140px !important;
  padding-bottom: 64px !important;
}

.contact-banner {
  padding: 140px 30px 72px !important;
}

.contact-banner._03 {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* ── 3. Section spacing: reduce generous 100–120px pads ──────────────────── */
.section-3 {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.section-3.process {
  padding-top: 0 !important;
}

.section-4 {
  padding-top: 64px !important;
  margin-bottom: 56px !important;
  row-gap: 32px !important;
}

.section-5 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.section-6 {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.section-6.what {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.section-padding {
  padding: 80px 30px !important;
}

/* ── 4. Contact section: reduce excessive padding and inner gap ───────────── */
.contact {
  padding-top: 64px !important;
  padding-bottom: 80px !important;
}

.contact-content-wrapper {
  row-gap: 36px !important;
  padding-top: 0 !important;
}

.cintact-content {
  padding-top: 0 !important;
  gap: 60px !important;
}

/* ── 5. Contact info items: add dividers and tighten spacing ─────────────── */
.single-information-box {
  padding-bottom: 20px !important;
  border-bottom: 1px solid #e6e6e6 !important;
  gap: 8px !important;
}

.single-information-box._03 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.information-box-wrapper {
  gap: 20px !important;
}

/* ── 6. Project cards: make image area slightly taller ───────────────────── */
.image-3 {
  min-height: 280px !important;
  max-height: 280px !important;
}

/* ── 7. Fix paragraph-5: 24px is too large for body text; fix flex display ─ */
.paragraph-5 {
  font-size: 18px !important;
  line-height: 1.75 !important;
  display: block !important;
}

/* ── 8. Section headings (heading-16): 43px is too large for two-col layout */
.heading-16 {
  font-size: 34px !important;
  line-height: 1.25 !important;
}

/* ── 9. Projects page: "Timeless Interior Design" heading size ──────────── */
.section-4 .heading-10,
h2.heading-10 {
  font-size: 40px !important;
  margin-bottom: 8px !important;
}

/* ── 10. Hero text block: responsive width instead of fixed 550px ─────────── */
.text-block-2 {
  width: 100% !important;
  max-width: 580px !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
}

/* ── 11. Hide the empty funfact section on homepage ─────────────────────── */
#Funfact {
  display: none !important;
}

/* ── 12. Hero content: nudge bottom padding on main hero slider ───────────── */
.hero-sec.darya-slider {
  min-height: 92vh;
}

/* ── 13. Improve image border-radius consistency ──────────────────────────── */
.image-2 {
  border-radius: 16px !important;
}

/* ── 14. Smooth image hover on project cards ─────────────────────────────── */
.link-block .image-3,
.column-2.card-i .image-3,
.column-7.card-i .image-3 {
  transition: transform 0.35s ease, filter 0.35s ease;
}

.link-block:hover .image-3,
.column-2.card-i:hover .image-3,
.column-7.card-i:hover .image-3 {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* ── 15. Section 2 (mission parallax) - ensure always visible ────────────── */
.section-2 {
  background-color: #113347;
}

/* ── 16. Project detail gallery – breathing room ─────────────────────────── */
.project-gallery {
  gap: 14px !important;
  padding: 40px 24px 60px !important;
}

/* ── 17. About-us: tighten gap between banner and bio ────────────────────── */
.hero-2._02.about-hero + * {
  margin-top: 0;
}

/* ── 18. Footer: tighten top padding ─────────────────────────────────────── */
.footer {
  padding-top: 60px !important;
}

/* ── 19. Blogs hero background position ──────────────────────────────────── */
.contact-banner._02.what-we-do {
  background-position: 0 0, 50% 35% !important;
}

/* ── 20. What We Do / interior design services icon grid ─────────────────── */
.pricing-overview-2 {
  padding: 60px 30px !important;
}

.pricing-grid-2 {
  margin-top: 36px !important;
}

/* ── 21. General smooth image transitions ────────────────────────────────── */
img {
  transition: opacity 0.3s ease;
}

/* ── 22. Hero subtitle line-height for readability ───────────────────────── */
.hero-subtitle {
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ── 23. Webflow empty CMS blocks ────────────────────────────────────────── */
.w-dyn-empty {
  background-image: none !important;
}

/* ── 24. Contact info links: better typography ───────────────────────────── */
.information-link,
.information-address {
  font-size: 15px;
  line-height: 1.6;
}

/* ── 25. Footer content wrapper – reduce gap on mid-size screens ─────────── */
.footer-content-wrapper {
  grid-column-gap: 48px !important;
  grid-row-gap: 48px !important;
}

/* ─── Tablet (max 991px) ─────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .container-17 {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .hero-2 {
    padding: 120px 24px 60px !important;
  }

  .section-3 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .section-4 {
    padding-top: 56px !important;
    margin-bottom: 48px !important;
  }

  .heading-16 {
    font-size: 30px !important;
  }

  .cintact-content {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .contact-information {
    width: 100% !important;
  }

  .contact-form-box {
    width: 100% !important;
  }
}

/* ─── Mobile (max 767px) ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .container-17 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .hero-2 {
    padding: 110px 20px 52px !important;
  }

  .hero-2._02.about-hero {
    padding-top: 110px !important;
    padding-bottom: 44px !important;
  }

  .contact-banner {
    padding: 110px 20px 52px !important;
  }

  .section-3 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-4 {
    padding-top: 48px !important;
    margin-bottom: 40px !important;
  }

  .section-6 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-padding {
    padding: 56px 20px !important;
  }

  .image-3 {
    min-height: 220px !important;
    max-height: 220px !important;
  }

  .section-4 .heading-10,
  h2.heading-10 {
    font-size: 32px !important;
  }

  .heading-16 {
    font-size: 26px !important;
  }

  .paragraph-5 {
    font-size: 16px !important;
  }

  .text-block-2 {
    font-size: 17px !important;
  }

  .pricing-overview-2 {
    padding: 48px 20px !important;
  }

  .pricing-grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  .contact {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }

  .footer-content-wrapper {
    flex-direction: column !important;
    grid-row-gap: 32px !important;
  }
}

/* ─── Small mobile (max 479px) ───────────────────────────────────────────── */
@media (max-width: 479px) {
  .container-17 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-2,
  .contact-banner {
    padding: 96px 16px 44px !important;
  }

  .section-3,
  .section-4,
  .section-6 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .pricing-grid-2 {
    grid-template-columns: 1fr !important;
  }

  .heading-16 {
    font-size: 24px !important;
  }
}