.div2,
    .div3,
    .div4 {
        padding-bottom: 0 !important;
    }
    /* Remove shadow/line between units header and cards */
    .units-header {
        border-bottom: none !important;
    }
    /* Remove padding from units-display so unit-card can be full width */
    .units-display {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        /* Keep original padding-bottom if any */
    }

/* ========================================
   MOBILE PORTRAIT VIEW CSS
   Single-column layout optimized for
   vertical mobile phone screens
   ======================================== */

@media only screen and (orientation: portrait) and (max-width: 768px) {

    
    
    /* Change to single column grid layout */
    .parent {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 15px;
        padding: 8px;
        min-height: 100vh;
    }
    
    /* Header - Full width at top */
    .div1 {
        grid-column: 1;
        grid-row: auto;
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    
    .logo-container {
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    
    .logo-container img,
    .logo-container svg {
        height: 3.5rem !important;
        max-width: 250px !important;
    }
    
    .auth-links {
        width: 100%;
        justify-content: center;
        gap: 0.75rem;
    }
    
    .auth-links a {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Landscape Images - Full width */
    .div2 {
        grid-column: 1;
        grid-row: auto;
        min-height: unset;
        height: auto;
    }
    
    /* Current Status Images - Full width */
    .div3 {
        grid-column: 1;
        grid-row: auto;
        min-height: unset;
        height: auto;
    }
    
    /* Floor Plans - Full width */
    .div4 {
        grid-column: 1;
        grid-row: auto;
        min-height: 350px;
    }
    
    /* Units - Full width */
    .div5 {
        grid-column: 1;
        grid-row: auto;
        min-height: 550px;
    }
    
    /* Location Features - Full width */
    .div6 {
        grid-column: 1;
        grid-row: auto;
        min-height: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Section Headers */
    .section-header {
        font-size: 1.125rem;
        padding: 1rem;
    }
    
    /* Units Header */
    .units-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 1rem 0.5rem 0.5rem 0.5rem;
        gap: 0;
        position: relative;
    }
    
    .units-header .section-header {
        flex: 1 1 auto;
        padding: 0;
        margin: 0;
        text-align: center;
        position: relative;
        left: 0;
        /* Center visually by offsetting by half the view-all button width */
        transform: translateX(30px);
        background: transparent !important;
    }
    
    .view-all-btn {
        width: auto;
        max-width: 110px;
        padding: 0.35rem 0.7rem;
        font-size: 0.75rem;
        margin-left: auto;
        margin-right: 0;
        align-self: flex-end;
        white-space: nowrap;
    }
    
    /* Gallery Carousel */
    .gallery-container {
        height: 100%;
    }
    
    .gallery-slide {
        padding: 0;
    }
    
    .gallery-slide img {
        max-height: 350px;
        width: 100%;
        object-fit: contain;
    }
    
    /* Show portrait images on mobile portrait, hide landscape */
    .gallery-image-landscape {
        display: none !important;
    }
    
    .gallery-image-portrait {
        display: block !important;
    }
    
    .gallery-title {
        font-size: 1rem;
        padding: 0.75rem;
    }
    
    /* Status Images Carousel */
    .status-container {
        height: 100%;
    }
    
    .status-slide {
        padding: 0;
    }
    
    .status-slide img {
        max-height: 350px;
        width: 100%;
        object-fit: contain;
    }
    
    .status-title {
        font-size: 1rem;
        padding: 0.75rem;
    }
    
    /* Floor Plans Carousel */
    .floorplan-container {
        height: 100%;
    }
    
    .floorplan-slide {
        padding: 0;
    }
    
    .floorplan-image {
        max-height: 350px;
        width: 100%;
        object-fit: contain;
    }
    
    .floorplan-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .floorplan-type {
        font-size: 0.875rem;
    }
    
    /* Units Cards */
    .units-carousel {
        padding: 0;
    }
    
    .unit-card {
        margin-bottom: 1rem;
        width: 100%;
    }
    
    .unit-image-frame {
        height: 300px;
    }
    
    .unit-details {
        padding: 1rem;
    }
    
    .unit-number {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .unit-info {
        font-size: 0.875rem;
        padding: 0.5rem 0;
    }
    
    .unit-price {
        font-size: 1rem;
        padding: 0.75rem;
        margin-top: 0.5rem;
        padding-bottom: 10px !important; /* Extra bottom space for stubborn layouts */
    }
    
       .carousel-indicators {
            position: absolute;
            bottom: -10px; /* Float above the bottom */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 25; /* Above everything */

            opacity: 1; /* Always visible */
            transition: opacity 0.3s ease;
        }
    /* Location Features - Stack vertically */
    .feature-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
             padding-left: 3px !important;
        padding-right: 3px !important;
        padding-top: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .feature-item {
        padding: 1.25rem;
        text-align: center;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
    }
    
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
    }
    
    .feature-icon img {
        width: 48px !important;
        height: 48px !important;
    }
    
    .feature-item h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .feature-item p {
        font-size: 0.875rem;
    }
    
    /* Carousel Controls - Larger touch targets */
    .carousel-controls,
    .status-carousel-controls,
    .floorplan-carousel-controls,
    .units-controls {
        padding: 0 0.75rem;
    }
    
    .carousel-controls button,
    .status-carousel-controls button,
    .floorplan-carousel-controls button,
    .units-controls button {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }
    
    /* Carousel Dots */
    .carousel-dots,
    .status-carousel-dots,
    .floorplan-carousel-dots {
        padding: 0.75rem;
        gap: 8px;
    }
    
    .gallery-dot,
    .status-dot,
    .floorplan-dot {
        width: 10px;
        height: 10px;
    }
    
    .carousel-counter,
    .status-carousel-counter,
    .floorplan-carousel-counter,
    .units-counter {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Carousel Indicators */
    .carousel-indicators {
        padding: 0.75rem;
    }
    
    /* Swipe Guide - Adjust for mobile */
    .swipe-guide {
        gap: 20px;
    }
    
    .swipe-arrow {
        width: 70px;
        height: 70px;
    }
    
    .swipe-text {
        font-size: 70px;
    }
    
    /* Hide swipe guide on very small screens */
    @media (max-width: 375px) {
        .swipe-guide {
            display: none !important;
        }
    }
}

/* Extra small portrait devices */
@media only screen and (orientation: portrait) and (max-width: 375px) {
    
    .parent {
        gap: 12px;
        padding: 6px;
    }
    
    .div1 {
        padding: 0.5rem 0.75rem;
    }
    
    .logo-container img,
    .logo-container svg {
        height: 3rem !important;
        max-width: 200px !important;
    }
    
    .auth-links a {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }
    
    .section-header {
        font-size: 1rem;
        padding: 0.75rem;
    }
    
    .div2,
    .div3 {
        min-height: 350px;
    }
    
    .div4 {
        min-height: 400px;
    }
    
    .div5 {
        min-height: 500px;
    }
    
    .gallery-slide img,
    .status-slide img,
    .floorplan-image {
        max-height: 280px;
    }
    
    .unit-image-frame {
        height: 250px;
    }
    
    .feature-item {
        padding: 1rem;
    }
    
    .feature-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .feature-icon img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .feature-item h3 {
        font-size: 0.875rem;
    }
    
    .feature-item p {
        font-size: 0.75rem;
    }
    
    /* Show counters on mobile - always visible since hover doesn't work well on touch */
    .gallery-counter,
    .status-counter,
    .floorplan-counter,
    .div2 .gallery-counter,
    .div3 .status-counter,
    .div4 .floorplan-counter {
        opacity: 1 !important;
    }
}