/* Responsive Adjustments for Hero Homes Landing Page */

/* Tablet and smaller screens */
@media (max-width: 991px) {
    /* General Typography & Spacing */
    .about-title, .amenities-title, .floor-plan-title, .gallery-title, .faq-title {
        font-size: 38px;
    }

    /* Hero Section */
    .hero-section {
        padding: 180px 0 40px 0;
        min-height: 70vh;
    }
    .hero-heading {
        font-size: 3.5rem;
    }
    .hero-title {
        font-size: 1.8rem;
    }

    /* Amenities */
    .amenities-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .amenities-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Fix Mobile & Tablet Header Layout */
    .header-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: #fff;
        border-radius: 0 0 20px 20px;
        padding: 10px 15px !important;
        flex-wrap: wrap;
    }
    .header-logo-box {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        margin-bottom: 0 !important;
    }
    .header-logo-box .logo {
        max-height: 60px !important;
    }
    .header-nav-box {
        width: auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    .navbar-toggler {
        margin: 0 !important;
        border: 1px solid #ccc !important;
        padding: 4px 8px !important;
    }
    .collapse.navbar-collapse {
        flex-basis: 100%;
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }
}

/* Mobile Screens */
@media (max-width: 767px) {
    /* Prevent horizontal scrolling on sections */
    section {
        overflow: hidden;
    }

    /* General Typography */
    .about-title, .amenities-title, .floor-plan-title, .gallery-title, .faq-title {
        font-size: 30px;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 140px 0 40px 0;
    }
    .hero-heading {
        font-size: 2rem;
    }
    .hero-title {
        font-size: 1.25rem;
    }
    .hero-badge {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    .hero-btn-primary, .hero-secondary-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.8rem !important;
        font-size: 1rem;
    }

    /* Floating Sidebar (Move to bottom for mobile to avoid covering content) */
    .floating-sidebar {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        transform: none;
        flex-direction: row;
        width: 100%;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    .sidebar-btn {
        flex: 1;
        height: 60px;
        flex-direction: row;
        gap: 8px;
    }
    .sidebar-btn i {
        font-size: 1.2rem;
    }
    .sidebar-btn span {
        margin-top: 0;
        font-size: 0.85rem;
    }
    .sidebar-btn:hover {
        width: auto;
    }
    .call-btn {
        border-radius: 0;
    }
    .enq-btn {
        border-radius: 0;
    }
    
    /* Ensure padding at bottom of body to avoid content hiding behind mobile sidebar */
    body {
        padding-bottom: 60px;
    }

    /* Highlights Section */
    .highlight-item {
        min-width: 140px;
    }
    .highlight-title {
        font-size: 1.1rem;
    }
    .highlight-subtitle {
        font-size: 0.85rem;
    }

    /* About Section */
    .about-features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .about-feature-item::after {
        display: none; /* Hide dividers on mobile */
    }
    .about-section {
        padding: 50px 0;
    }
    .about-image {
        margin-top: 1rem;
    }

    /* Amenities Section */
    .amenities-section {
        padding: 50px 0;
    }
    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .amenity-gallery .gallery-col {
        flex-direction: column;
    }
    
    /* Floor Plans Section */
    .floor-plan-section {
        padding: 50px 0;
    }
    .floor-plan-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Other Sections (Gallery, FAQ, CTA, etc.) */
    .gallery-section, .faq-section, .cta-section {
        padding: 50px 0;
    }

    /* Testimonial Section */
    .testi-card {
        padding: 1.5rem;
    }
    
    /* Footer */
    footer .container {
        padding-bottom: 80px; /* Extra padding for mobile sidebar */
    }
}

/* Small Mobile Screens */
@media (max-width: 575px) {
    .hero-heading {
        font-size: 2.2rem;
    }
    
    .highlights-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .highlight-item {
        width: 100%;
        justify-content: flex-start;
    }
}