/* ==========================================================================
   Stateland Centralized Responsive Stylesheet
   ========================================================================== */

/* Prevent overall horizontal scroll issues on mobile viewports */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
}

.page-wrapper,
#smooth-wrapper,
#smooth-content {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* ==========================================================================
   1. Header Section
   ========================================================================== */
@media (max-width: 1199px) {

    /* Header main container wrapping and sizing */
    header.header-1 {
        padding: 10px 0 !important;
    }
}

@media (max-width: 575px) {

    /* Adjust logo height on small mobile screens */
    header.header-1 .logo img,
    header.header-1 .header-logo img,
    header.header-1 .header-logo-2 img {
        width: 195px !important;
    }

    .sidebar__toggle {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   2. Hero Section
   ========================================================================== */
@media (max-width: 375px) {
    .hero-1 .hero-title {
        font-size: 40px !important;
    }
}

@media (max-width: 767px) {

    /* Constrain interaction card container to screen boundaries on mobile */
    .hero-1 .hero-interaction .interaction-inner .interaction-content {
        left: 15px !important;
        right: 15px !important;
        bottom: 15px !important;
        padding: 20px !important;
        height: auto !important;
    }

    .hero-1 .hero-interaction .interaction-inner .interaction-content .title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
        line-height: 1.3 !important;
    }

    .hero-1 .hero-interaction .interaction-inner .interaction-content .text {
        font-size: 13px !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }
}

/* ==========================================================================
   3. About Us Section
   ========================================================================== */
@media (max-width: 991px) {

    /* Adjust image height to look proportional when stacked */
    .about-wrapper-2 .about-image {
        height: 380px !important;
        margin-top: 25px !important;
    }

    .about-wrapper-2 .about-content .text {
        margin-bottom: 0px !important;
    }
}

@media (max-width: 575px) {
    .about-wrapper-2 .about-image {
        height: 280px !important;
        margin-top: 20px !important;
    }
}

/* ==========================================================================
   4. Amenities Section
   ========================================================================== */
@media (max-width: 480px) {
    .amenities-title-box h2 {
        font-size: 28px !important;
    }
}

/* ==========================================================================
   5. Layout Plan Section
   ========================================================================== */
@media (max-width: 991px) {

    /* Set symmetrical padding for stacked timeline controls */
    .layout-menu-container {
        padding: 14px !important;
        display: grid;
        grid-template-columns: 1fr;
    }

    .layout-menu-container::before {
        display: none !important;
    }

    .layout-plan-item {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    .layout-plan-item.active {
        transform: translateX(0px);
    }
}

@media (max-width: 768px) {
    .layout-menu-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .layout-menu-container {
        grid-template-columns: 1fr;
    }

    /* Make single floorplan interactive container fit smaller screens */
    .creative-single-img {
        height: 300px !important;
    }

    .plan-img-single {
        padding: 10px 10px 10px 10px !important;
    }

    .layout-overlay-info {
        padding: 10px 15px !important;
    }

    .layout-overlay-info h3 {
        font-size: 16px !important;
    }

    .layout-overlay-info p {
        font-size: 11px !important;
    }

    .layout-plan-item {
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    .layout-plan-item .item-title {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   6. Gallery Section
   ========================================================================== */
@media (max-width: 767px) {

    /* Fix spacing for stacked columns containing mb-0 elements */
    .epic-gallery-item,
    .epic-gallery-item.mb-0 {
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   7. Specifications Section
   ========================================================================== */
@media (max-width: 575px) {
    .spec-slider .service-card-items-2 {
        padding: 20px !important;
    }

    .spec-slider .service-card-items-2::after {
        top: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
    }

    .spec-slider .service-card-items-2 .content .title {
        font-size: 20px !important;
    }

    .spec-slider .service-card-items-2 .icon img {
        width: 48px !important;
        height: 48px !important;
    }

    .spec-slider .service-card-items-2 .content p {
        font-size: 13px !important;
    }
}

/* ==========================================================================
   8. Contact Us Section
   ========================================================================== */
@media (max-width: 991px) {
    .contact-information-box .information-box .icon-item {
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .contact-information-box .information-box .icon-item .icon {
        flex-shrink: 0 !important;
    }

    .contact-information-box .information-box .icon-item span {
        font-size: 16px !important;
    }
}

@media (max-width: 575px) {


    .contact-information-box .information-box {
        padding: 25px 20px !important;
    }

    .contact-information-box .contact-form-box {
        padding: 25px 20px !important;
    }

    .contact-information-box .information-box .icon-item {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .contact-information-box .information-box .icon-item .icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px;
        line-height: 44px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .contact-information-box .information-box .icon-item .icon img {
        width: 18px !important;
        height: 18px !important;
    }

    .contact-information-box .information-box .icon-item span {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   9. Footer Section
   ========================================================================== */
@media (max-width: 480px) {

    /* Make RERA Banner scan/text items stack vertically on narrow screens */
    .f-rera-banner-right {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .f-rera-scan-text {
        text-align: left !important;
    }
}

/* ==========================================================================
   10. Custom Mouse Cursor Mobile View Fix
   ========================================================================== */
@media (max-width: 1199px) {
    .mouseCursor {
        display: none !important;
    }
}