/* Background Colors */
.bg-light-gray{
    background-color: #f0f0f0 !important;
}
.bg-subtle-gray{
    background-color: #F4F3F1;
}
.bg-hero-opacity{
    background-color: #365b7086;
}

/* Hero Section Background Image */
#hero-section {
    position: relative;
    background-color: #1a1a1a; /* Fallback color */
    background-image: linear-gradient(rgba(2, 15, 22, 0.6), rgba(2, 15, 22, 0.7)), url('../img/landing/real-estate-card-img.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Ensure content stays above background */
#hero-section .container {
    position: relative;
    z-index: 2;
}

.card-border-hover:hover{
    border: 1px solid #ff6900 !important;
    box-shadow: 0 4px 8px rgba(255, 98, 0, 0.2) !important;
    transition: all 0.3s ease-in-out;
}

/* Video Container */
.video-wrapper {
    max-width: 950px;
}

/* Storage Facility Video Section - Larger Video */
#video-section .video-wrapper {
    max-width: 1400px;
    width: 100%;
}

#video-section .responsive-width {
    width: 90%;
}

@media (max-width: 1200px) {
    #video-section .video-wrapper {
        max-width: 1200px;
    }
}

@media (max-width: 991px) {
    #video-section .video-wrapper {
        max-width: 100%;
    }
    
    #video-section .responsive-width {
        width: 95%;
    }
}

@media (max-width: 768px) {
    #video-section .video-wrapper,
    #video-section .responsive-width {
        width: 100% !important;
    }
}

/* High-DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #hero-section {
        background-image: linear-gradient(rgba(2, 15, 22, 0.6), rgba(2, 15, 22, 0.7)), url('../img/landing/real-estate-card-img.png');
    }
}

/* ===== RESPONSIVE STYLES ===== */
    
/* Large Tablets and Small Desktops (≤991px) */
@media (max-width: 991px) {
    .display-3 {
        font-size: 2.5rem !important;
    }
    
    .display-4 {
        font-size: 2rem !important;
    }

    .lead {
        font-size: 1.125rem !important;
    }

    #hero-section {
        min-height: auto !important;
        padding: 8rem 0 5rem 0 !important;
        background-attachment: scroll;
        background-position: center center;
    }
}

/* Tablets (≤768px) */
@media (max-width: 768px) {
    /* Hero Section */
    #hero-section {
        min-height: auto !important;
        padding: 8rem 0 5rem 0 !important;
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
    }

    #hero-section .display-3 {
        font-size: 1.875rem !important;
    }

    #hero-section .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

 /* Mobile (≤576px) */
@media (max-width: 576px) {
    /* Hero Section */
    #hero-section {
        padding: 8rem 0 !important;
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
    }

    #hero-section .display-3 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }

    #hero-section .lead {
        font-size: 0.95rem !important;
    }

    #hero-section .btn-lg {
        padding: 0.625rem 1.25rem;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }

    #hero-section .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    #hero-section .feature-list li {
        font-size: 0.875rem;
    }

}



/* Extra Small Mobile (≤375px) */
@media (max-width: 375px) {
    #hero-section {
        background-position: 40% center;
    }

    .display-3,
    .display-4 {
        font-size: 1.375rem !important;
    }

    #hero-section .btn-lg {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

#horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

#horizontal-scroll:active {
    cursor: grabbing;
}

#horizontal-scroll::-webkit-scrollbar {
    display: none;
}

#horizontal-scroll .card {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.pricing-card-popular {
    border: 2px solid var(--bs-primary) !important;
    border-radius: 1rem !important;
}

.testimonial-card {
    max-width: 700px;
    width: 100%;
}

.testimonials-carousel {
    position: relative;
}

.testimonials-control {
    width: auto;
    top: 50%;
    transform: translateY(-60%);
}

.testimonials-control-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #212529;
    font-size: 1rem;
}

.testimonials-control-icon:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.testimonials-indicators {
    bottom: 0;
    margin-bottom: 0;
}

.testimonials-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dee2e6;
    border: none;
    opacity: 1;
}

.testimonials-indicators .active {
    background-color: var(--bs-primary);
}