/*
====================================================================
RESPONSIVE STYLES - REBUILTO CHILD THEME
====================================================================
File: style_responsive.css
Purpose: All mobile and responsive styling
Author: Your Name
====================================================================

/* ====================================================================
   1. MOBILE BREAKPOINTS
   ==================================================================== */

/* Extra Large devices (1200px and up) */
@media (min-width: 1200px) {
    /* Desktop styles if needed */
}

/* Large devices (992px and up) */
@media (max-width: 1199.98px) {
    /* Large tablet / small desktop */
}

/* Medium devices (768px and up) */
@media (max-width: 991.98px) {
    /* Tablet styles */
}

/* Small devices (576px and up) */
@media (max-width: 767.98px) {
    /* Mobile landscape */
}

/* Extra small devices (less than 576px) */
@media (max-width: 575.98px) {
    /* Mobile portrait */
}

/* ====================================================================
   2. HEADER & NAVIGATION MOBILE
   ==================================================================== */

@media (max-width: 991.98px) {
    /* Header mobile styles */
}

@media (max-width: 767.98px) {
    /* Mobile specific header styles */

    img.hfe-site-logo-img.elementor-animation- {
        width: 90%;
    }

    .breadcrumb-wrap {
        background-size: cover;
    }

    .elementor-7902 .elementor-element.elementor-element-d37711c .rebuilto-title {
        font-size: 50px;
    }

}

/* ====================================================================
   3. MOBILE MENU STYLES
   ==================================================================== */

@media (max-width: 991.98px) {
    /* Mobile menu container */
    .mobile-nav-tabs {
        display: none;
    }
}


/* ====================================================================
   3. Home Page
   ==================================================================== */

@media (max-width: 991.98px) {

    .elementor-service-wrapper .grid-item {
        padding: 0 0 1px 0;
    }

    .elementor-20 .elementor-element.elementor-element-9ca1b0b .elementor-brand-item .elementor-brand-image img {
        width: 120px;
    }
}



/* ====================================================================
   3. Location
   ==================================================================== */

@media (max-width: 991.98px) {
    
    .about-location {
        margin: 30px 0 0px 0;
    }

    .single-location i.rebuilto-icon-check:before {
        font-size: 20px;
    }

    .location-custom-map .swiper-autowidth .swiper-slide {
        max-width: 100% !important;
    }

    .rebuilto-mobile-nav {
        background-color: #000;
    }

    .mobile-navigation ul > li.menu-item > a, .mobile-navigation-categories ul > li.menu-item > a, .mobile-navigation ul ul.sub-menu > li.menu-item > a, .mobile-navigation-categories ul ul.sub-menu > li.menu-item > a {
        color: #fff;
    }

    .mobile-navigation .dropdown-toggle, .mobile-navigation .dropdown-toggle:hover {
        color: #fff;
    }

    .elementor-7902 .elementor-element.elementor-element-d37711c > .elementor-widget-container {
        padding: 305px 0px 0px 0px;
    }
    
}



/* ====================================================================
   3.5 PROJECT PAGE - AMENITIES CARDS
   ==================================================================== */

@media (max-width: 1024px) {
    .amenities-grid {
        --e-con-grid-template-columns: repeat(2, 1fr) !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .amenities-grid {
        --e-con-grid-template-columns: repeat(1, 1fr) !important;
        grid-template-columns: repeat(1, 1fr) !important;
        --gap: 12px 12px;
        --row-gap: 12px;
        --column-gap: 12px;
        /* Left/right space so cards don't touch screen edges */
        --padding-left: 60px !important;
        --padding-right: 60px !important;
        padding-left: 60px !important;
        padding-right: 60px !important;
        /* Remove gap between the two grids */
        --margin-bottom: 0px !important;
        margin-bottom: 0 !important;
    }

    .amenities-grid > .e-con {
        padding: 24px 20px !important;
    }

    .amenities-grid > .e-con .elementor-icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .amenities-grid > .e-con .elementor-heading-title {
        font-size: 13px !important;
    }
}


/* ====================================================================
   4. PROJECT ARCHIVE MOBILE
   ==================================================================== */

@media (max-width: 991.98px) {
    /* Project archive container */
}

@media (max-width: 767.98px) {
    /* Small mobile project archive */
}

/* ====================================================================
   5. PROJECT SINGLE PAGE MOBILE
   ==================================================================== */

@media (max-width: 991.98px) {
    /* Single project page —
       Hero shows clean image at top (no dark text overlay).
       Text block (project label + title) appears below image on white bg.
    */

    /* Reduce hero padding so only the background image is visible above the text */
    .single-rebuilto_project .elementor-element.elementor-element-ade665b {
        --padding-top: 480px !important;
        --padding-bottom: 0px !important;
    }

    /* Text block: white background, remove dark overlay */
    .single-rebuilto_project .elementor-element.elementor-element-0b62f02 {
        background-color: #ffffff !important;
        --overlay-opacity: 0 !important;
    }

    .single-rebuilto_project .elementor-element.elementor-element-0b62f02::before {
        opacity: 0 !important;
    }

    /* Heading titles on white background — set to black */
    .single-rebuilto_project .elementor-element.elementor-element-0b62f02 .elementor-heading-title {
        color: #000000 !important;
    }
}

@media (max-width: 767.98px) {
    .single-rebuilto_project .elementor-element.elementor-element-ade665b {
        --padding-top: 420px !important;
        --padding-bottom: 0px !important;
    }

    .single-rebuilto_project .elementor-element.elementor-element-0b62f02 {
        background-color: #ffffff !important;
        --overlay-opacity: 0 !important;
    }

    .single-rebuilto_project .elementor-element.elementor-element-0b62f02::before {
        opacity: 0 !important;
    }

    .single-rebuilto_project .elementor-element.elementor-element-0b62f02 .elementor-heading-title {
        color: #000000 !important;
    }
}

@media (max-width: 991.98px) {

    .project_logo {
        left: 80px !important;
        top: 10px !important;
    }

    .project_properties_top {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
    }

    .about_project {
        margin-top: 500px !important;
    }
    .project_gallery {
        margin-top: 60px !important;
    }


    .project_highlight_title .elementor-absolute.elementor-widget-heading {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
    }

    .project_highlight_text {
        position: relative !important;
        top: 0px !important;
        left: auto !important;
        text-shadow: none !important;
    }

    .project_highlight_text .elementor-widget-container {
        padding: 0 20px 0 20px !important;
    }

    .project_highlight_text ul {
        margin: 0;
    }

    .project_highlight_title .e-con-boxed {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .project_highlight_title .e-con-inner {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .project_highlights {
        background: none !important;
    }

    .breadcrumb-wrap .elementor-element::before {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

}

/* ====================================================================
   6. SEARCH FORM MOBILE
   ==================================================================== */

@media (max-width: 767.98px) {
    /* Project search form mobile */
}

/* ====================================================================
   7. FOOTER MOBILE
   ==================================================================== */

@media (max-width: 991.98px) {
    /* Footer mobile styles */
    footer img.hfe-site-logo-img.elementor-animation- {
        width: 80% !important;
    }
}

/* ====================================================================
   8. TYPOGRAPHY MOBILE
   ==================================================================== */

@media (max-width: 767.98px) {
    /* Headings mobile */
    /*h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }*/
    
    /* Body text mobile */
    body {
        
    }
    
    /* Paragraph mobile */
    p {
        
    }
}

/* ====================================================================
   9. BUTTONS MOBILE
   ==================================================================== */

@media (max-width: 767.98px) {
    
}

/* ====================================================================
   10. FORMS MOBILE
   ==================================================================== */

@media (max-width: 767.98px) {
    
}