/* ═══════════════════════════════════════════════════════ xxl — 1400px ═══════════════════════════════════════════════════════ */ @media screen and (max-width: 1400px) { } /* ═══════════════════════════════════════════════════════ xl — 1200px ═══════════════════════════════════════════════════════ */ @media screen and (max-width: 1200px) { .hero-content { width: 90%; max-width: 673px; } .contact-info { width: 460px; } } /* ═══════════════════════════════════════════════════════ lg — 992px ═══════════════════════════════════════════════════════ */ @media screen and (max-width: 992px) { .hero-card { height: auto; min-height: 240px; padding: 40px 24px; } .hero-h1 { font-size: 28px; line-height: 42px; } .contact-grid { flex-direction: column; gap: 32px; } .contact-info { width: 100%; } .contact-form-wrapper { width: 100%; } .steps-row { flex-direction: column; gap: 16px; } .step-card__title { white-space: normal; } } /* ═══════════════════════════════════════════════════════ md — 768px ═══════════════════════════════════════════════════════ */ @media screen and (max-width: 768px) { .hero-h1 { font-size: 22px; line-height: 36px; } .hero-sub { font-size: 14px; } .contact-form-title__h2 { font-size: 20px; line-height: 30px; } .form-row { flex-direction: column; gap: 16px; } .steps-header__title { font-size: 20px; } .map-card { height: 300px; border-radius: 24px; } .map-card__img { border-radius: 24px; } .map-card__nav { right: 16px; bottom: 16px; gap: 8px; } .map-nav-btn { padding: 6px 10px; } } /* ═══════════════════════════════════════════════════════ sm — 576px ═══════════════════════════════════════════════════════ */ @media screen and (max-width: 576px) { .hero-section { padding-bottom: 50px; } .container-hero-section{ padding: 0 ; } .hero-card { height: 400px; border-radius: 0; } .hero-content { width: 100%; } .contact-form-wrapper{ padding: 0; } .hero-h1 { font-size: 24px; line-height: 32px; } .contact-social__icons { flex-wrap: wrap; justify-content: flex-start; } .form-submit-btn { width: 100%; justify-content: center; } .form-submit-row { justify-content: stretch; } .steps-grid { gap: 16px; } .step-card { padding: 16px; } .map-card { height: 240px; border-radius: 16px; } .map-card__img { border-radius: 16px; } .map-nav-btn span { display: none; } .map-card__nav { gap: 6px; } .map-nav-btn { padding: 8px; } }