/* Mobile-first responsive overrides for index.blade.php */

/* Mobile styles (default) */
.hero-section {
    padding: 2rem 1rem; /* Reduced padding for better balance on small screens */
}

.hero-text h1 {
    font-size: 1.8rem; /* Smaller heading on mobile */
}

.hero-text p {
    font-size: 1rem;
}

.hero-image {
    margin-top: 1rem;
}

.hero-image img {
    max-width: 100%;
    height: auto;
}

.why-choose-section {
    padding: 2rem 1rem;
}

.section-heading {
    font-size: 1.5rem; /* Smaller section headings on mobile */
}

.feature-item {
    margin-bottom: 1rem;
    text-align: left;
}

.center-image {
    max-width: 80%; /* Smaller center image on mobile */
    margin: 1rem auto;
}

.properties-section {
    padding: 2rem 1rem;
}

#featured-container.row {
    display: block; /* Force cards to stack vertically on mobile */
}

#featured-container .card {
    width: 100%; /* Ensure cards take full width on mobile */
    margin-bottom: 1rem;
}

/* Tablet and larger (768px and up) */
@media (min-width: 768px) {
    .hero-section {
        padding: 4rem 2rem; /* Restore padding for larger screens */
    }

    .hero-text h1 {
        font-size: 2.5rem; /* Larger heading on tablet+ */
    }

    .hero-text p {
        font-size: 1.1rem;
    }

    .hero-image {
        margin-top: 0;
    }

    .why-choose-section {
        padding: 4rem 2rem;
    }

    .section-heading {
        font-size: 2rem; /* Larger section headings */
    }

    .feature-item {
        margin-bottom: 1.5rem;
    }

    .center-image {
        max-width: 100%;
        margin: 0;
    }

    .properties-section {
        padding: 4rem 2rem;
    }

    #featured-container.row {
        display: flex; /* Restore flex layout for multi-column grid */
        flex-wrap: wrap;
        justify-content: center;
    }

    #featured-container .card {
        width: auto; /* Auto width for grid items */
        margin-bottom: 0;
    }
}

/* Desktop and larger (1024px and up) - optional additional adjustments */
@media (min-width: 1024px) {
    .hero-section {
        padding: 6rem 2rem; /* Full padding on desktop */
    }

    .hero-text h1 {
        font-size: 3rem;
    }

    .why-choose-section {
        padding: 6rem 2rem;
    }

    .properties-section {
        padding: 6rem 2rem;
    }
}