/**
 * ===========================================================================
 * RESPONSIVE DESIGN SYSTEM (GOLDEN RULE — WITH SCALING INTENT)
 * ===========================================================================
 *
 * WHY (Intent)
 * - Desktop (1440px) is the primary design reference
 * - Figma designs may exist ONLY for desktop initially
 * - UI must remain readable and balanced on all devices
 * - Responsive behavior must be predictable, not improvised
 *
 * Responsive design exists to PRESERVE INTENT, not exact sizes.
 *
 *
 * HOW (Strategy & Governance)
 *
 * 1. PRIMARY DESIGN REFERENCE (LOCKED)
 *    - 1440px is the ONLY authoritative design reference
 *    - All sizes (font, spacing, layout) are evaluated here first
 *
 *    Example:
 *    - Desktop heading = 74px
 *    - Desktop spacing = 6rem
 *
 *
 * 2. RESPONSIVE SCALING PHILOSOPHY
 *    - Desktop values define INTENT
 *    - Other devices receive DERIVED values
 *
 *    Derived values must:
 *    - preserve hierarchy
 *    - preserve readability
 *    - avoid visual dominance or crowding
 *
 *    Pixel-perfect matching on non-desktop devices is NOT required.
 *
 *
 * 3. AUTO-SCALING PERMISSION (IMPORTANT)
 *    When Figma designs for tablet/mobile are NOT available:
 *
 *    - Developer/Agent MAY derive responsive values using media queries
 *    - BUT ONLY for:
 *      • font-size
 *      • vertical spacing
 *
 *    - Structural changes are NOT allowed
 *
 *
 * 4. SCALING RULE OF THUMB (INDUSTRY PRACTICE)
 *    - Tablet (≤768px):
 *      • Reduce large text by ~25–30%
 *      • Reduce section spacing by ~30–40%
 *
 *    - Mobile (<576px):
 *      • Reduce large text by ~40–50%
 *      • Reduce section spacing by ~50%
 *
 *    These are GUIDELINES, not strict math.
 *
 *
 * 5. CONFIRMATION RULE (SAFETY VALVE)
 *    - If a responsive adjustment affects:
 *      • visual hierarchy
 *      • brand prominence
 *      • key headings (hero / page title)
 *
 *    → Developer MUST confirm before implementation.
 *
 *
 * WHAT (Implementation Rules)
 *
 * - Desktop values live in style.css
 * - Responsive reductions live ONLY in media.css
 *
 * - media.css MAY:
 *   • reduce font-size
 *   • reduce padding / margin
 *   • hide non-critical elements
 *
 * - media.css MUST NOT:
 *   • increase sizes beyond desktop
 *   • redefine layout structure
 *   • change grid logic
 *
 * - Units:
 *   • rem preferred (allows natural scaling)
 *   • px allowed ONLY when matching Figma exactly on desktop
 *
 *
 * DESIGN REVIEW REFERENCES
 * - Desktop review at 1440px
 * - Tablet sanity check at 768px
 * - Mobile sanity check at 402px
 *
 *
 * GOLDEN RULE (DO NOT BREAK)
 * - Desktop defines intent.
 * - Other devices adapt the intent.
 * - media.css refines, never re-designs.
 * - When in doubt, ASK before scaling.
 * ===========================================================================
 */

 @media (max-width: 992px) {}

 @media (max-width: 768px) {}
 
 @media (max-width: 576px) {
 
     p {
         line-height: var(--text_font_size_lg);
         margin-bottom: 0px;
         font-size: var(--text_font_size_xs);
         font-weight: var(--text_font_weight_normal);
     }
 
     ._section_horizontal_padding {
         padding-left: 10px;
         padding-right: 10px;
     }
 
     ._section_vertical_padding {
         padding-top: 60px;
         padding-bottom: 60px;
     }
 
     ._section_vertical_bottom_only_padding {
         padding-bottom: 60px;
     }
 
     ._section_title {
         font-size: 36px;
         line-height: 39px;
     }
 
     ._header {
         padding: 13px 0;
     }
 
     ._header_nav {
         flex-direction: column;
         gap: 1rem;
         align-items: center;
     }
 
     ._header_logo_wrap ._brand_logo_img {
         height: 34px;
     }
 
     ._header_nav_left,
     ._header_nav_right {
         gap: 0.5rem;
     }
 
     ._btn_primary {
         padding: 13px 16px;
         font-size: var(--text_font_size_xs);
     }
 
     ._btn_primary_bordered {
         padding: 13px 16px;
         font-size: var(--text_font_size_xs);
     }
 
     ._btn_extra_padding {
         padding: 12px 22px !important;
     }
 
     ._banner_section_heading {
         font-size: var(--text_font_size_xl);
     }
 
     ._banner_section_subheading {
         font-size: var(--text_font_size_base);
     }
 
     ._banner_section_wrap {
         gap: 15px;
     }
 
     ._guaranteed_rent_text {
         width: 100%;
     }
 
     ._form_card_wrap {
         padding: 20px 15px;
     }
 
     ._form_card_subtitle {
         padding: 0px 10px;
     }
 
     ._section_inner:has(._auction_services_wrap) ._section_title {
         text-align: center;
     }
 
     ._auction_services_wrap {
         flex-direction: column !important;
         align-items: stretch;
     }
 
     ._auction_services_wrap ._auction_service_card {
         width: 100%;
         max-width: 100%;
         flex: 0 0 auto;
     }
 
     ._auction_service_card._middle_card {
         padding: 30px 30px;
         border-left: none;
         border-right: none;
         border-top: 1px solid #9D223629;
         border-bottom: 1px solid #9D223629;
     }
 
     ._auction_service_card_icon {
         height: 62px;
         width: 62px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 3px 0px;
         background-color: var(--theme_color_primary);
         border-radius: 50%;
     }
 
     ._auction_service_card_icon svg {
         height: 26px;
         width: 26px;
         object-fit: contain;
         fill: var(--ink_white);
     }
 
     ._testimonials_wrap {
         flex-direction: column !important;
         align-items: stretch;
         gap: 15px;
     }
 
     ._testimonials_wrap ._testimonial_card {
         width: 100%;
         max-width: 100%;
         flex: 0 0 auto;
         padding: 15px;
         gap: 15px;
     }
 
     ._testimonial_content {
         font-size: var(--text_font_size_base);
         line-height: var(--text_line_height_base);
     }
 
     ._testimonial_name {
         font-size: var(--text_font_size_xs);
         line-height: var(--text_line_height_xs);
     }
 
     .sm-display-none {
         display: none;
     }
 
     ._section_bg_auction_properties {
         text-align: center;
     }
 
     ._section_bg_auction_properties .d-flex.flex-column {
         gap: 20px !important;
     }
 
     ._auction_properties_wrap .owl-nav button.owl-prev,
     ._auction_properties_wrap .owl-nav button.owl-next {
         transform: translateY(-50%);
         border-radius: 8px;
         padding: 8px 10px !important;
     }
 
     ._auction_properties_wrap .owl-nav ._owl_nav_svg {
         width: 20px;
         height: 20px;
     }
 
     ._auction_properties_wrap .owl-nav {
         left: -15px;
         right: -15px;
     }
 
     ._auction_properties_wrap {
         padding: 0px 5px;
     }
 
     ._section_bg_sell_with {
         position: relative;
         background-attachment: scroll;
     }
 
     ._section_bg_sell_with::before,
     ._section_bg_sell_with::after {
         display: none;
     }
 
     ._section_bg_sell_with ._section_content {
         min-height: 50vh;
     }
     ._benefits_list_wrap ul li {
         gap: 10px;
         margin-bottom: 0px;
     }
     ._benefits_list_wrap ul li svg {
         height: 20px;
         width: 20px;
     }
     ._find_out_wrap ._section_title
     {
         text-align: center;
     }
 
     ._footer_brand_logos_wrap {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 20px;
     }
     ._footer_brand_logos_wrap ._footer_brand_logo_wrap {
         width: 120px;
         height: 120px;
         flex: 0 0 auto;
     }
     
 }
 
 @media (max-width: 402px) {}