/* Luxury Hero Slideshow Styling */

/* Full-screen hero section - No gaps */
#hero-slideshow {
    height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--black) !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure no spacing around hero */
body {
    margin: 0 !important;
    padding: 0 !important;
}

.home-content-wrapper {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Position hero right after navbar */
#hero-slideshow {
    position: relative;
    z-index: 1;
}

#heroCarousel {
    height: 100vh;
    min-height: 100vh;
    margin-top: 0;
    padding-top: 0;
}

.carousel-inner {
    height: 100vh;
    min-height: 100vh;
}

.carousel-item {
    height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Full-screen images with luxury filters */
.carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(1.0) contrast(1.1) !important;
    transition: all 0.4s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}

.carousel-item.active img {
    transform: scale(1.02) !important;
}

/* Clean gold arrows - NO CIRCLES */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next,
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    width: 100px !important;
    height: 100px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--main-gold) !important;
    font-size: 60px !important;
    margin: auto 30px !important;
    border-radius: 0 !important;
    transition: color 0.3s ease !important;
    opacity: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover,
.carousel .carousel-control-prev:hover,
.carousel .carousel-control-next:hover,
#hero-slideshow .carousel-control-prev:hover,
#hero-slideshow .carousel-control-next:hover {
    color: rgba(180, 145, 25, 1) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    box-shadow: none !important;
}

/* Perfect arrow icons to match 100px buttons */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon,
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon,
#hero-slideshow .carousel-control-prev-icon,
#hero-slideshow .carousel-control-next-icon {
    background-image: none !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 60px !important;
    height: 60px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 60px !important;
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Perfect Unicode arrows for 100px buttons */
#heroCarousel .carousel-control-prev-icon::before,
.carousel .carousel-control-prev-icon::before,
#hero-slideshow .carousel-control-prev-icon::before {
    content: '‹' !important;
    font-family: Arial, sans-serif !important;
    color: inherit !important;
    font-size: 60px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: block !important;
}

#heroCarousel .carousel-control-next-icon::before,
.carousel .carousel-control-next-icon::before,
#hero-slideshow .carousel-control-next-icon::before {
    content: '›' !important;
    font-family: Arial, sans-serif !important;
    color: inherit !important;
    font-size: 60px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: block !important;
}

/* Alternative: Use simple < > characters if Unicode doesn't work */
@supports not (content: '‹') {
    #heroCarousel .carousel-control-prev-icon::before,
    .carousel .carousel-control-prev-icon::before,
    #hero-slideshow .carousel-control-prev-icon::before {
        content: '<' !important;
    }
    
    #heroCarousel .carousel-control-next-icon::before,
    .carousel .carousel-control-next-icon::before,
    #hero-slideshow .carousel-control-next-icon::before {
        content: '>' !important;
    }
}

/* Remove any conflicting arrow icon styles */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none !important;
    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 60px !important;
    width: 60px !important;
    height: 60px !important;
    color: inherit !important;
}

.carousel-control-prev-icon::before {
    content: '‹' !important; /* Unicode left arrow */
    font-size: 60px !important;
    color: inherit !important;
}

.carousel-control-next-icon::before {
    content: '›' !important; /* Unicode right arrow */
    font-size: 60px !important;
    color: inherit !important;
}

/* Luxury carousel caption styling - Bottom Left Position with High Specificity */
#heroCarousel .carousel-caption,
.carousel .carousel-caption {
    position: absolute !important;
    bottom: 120px !important;
    left: 60px !important;
    right: auto !important;
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    border: none !important;
    max-width: 500px !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
}

#heroCarousel .carousel-caption h1,
.carousel .carousel-caption h1 {
    font-family: 'Playfair Display', serif !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: var(--main-gold) !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: 2px !important;
    line-height: 1.1 !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
    text-transform: uppercase !important;
    animation: none !important;
}

#heroCarousel .carousel-caption p,
.carousel .carousel-caption p {
    font-family: 'Libre Baskerville', serif !important;
    font-size: 1.5rem !important;
    color: var(--white) !important;
    margin-bottom: 2.5rem !important;
    line-height: 1.3 !important;
    opacity: 0.95 !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
    font-weight: 400 !important;
    animation: none !important;
}

/* Remove ALL animations and pulsing from buttons */
#heroCarousel .carousel-caption .eco-btn-hero, 
#heroCarousel .carousel-caption .btn,
.carousel .carousel-caption .eco-btn-hero, 
.carousel .carousel-caption .btn {
    background: var(--main-gold) !important;
    border: none !important;
    color: var(--black) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 18px 45px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    animation: none !important;
    transform: none !important;
}

#heroCarousel .carousel-caption .eco-btn-hero:hover, 
#heroCarousel .carousel-caption .btn:hover,
.carousel .carousel-caption .eco-btn-hero:hover, 
.carousel .carousel-caption .btn:hover {
    background: rgba(212, 175, 55, 0.9) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    text-decoration: none !important;
    color: var(--black) !important;
    animation: none !important;
}

/* Clean luxury carousel indicators - Higher position for visibility */
#heroCarousel .carousel-indicators,
.carousel .carousel-indicators {
    position: absolute !important;
    bottom: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 20 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

#heroCarousel .carousel-indicators [data-bs-target],
.carousel .carousel-indicators [data-bs-target] {
    width: 60px !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    border: none !important;
    border-radius: 2px !important;
    margin: 0 6px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-indent: 0 !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

#heroCarousel .carousel-indicators .active,
#heroCarousel .carousel-indicators [data-bs-target]:hover,
.carousel .carousel-indicators .active,
.carousel .carousel-indicators [data-bs-target]:hover {
    background: var(--main-gold) !important;
    opacity: 1 !important;
    transform: scaleX(1.1) !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.6) !important;
}

/* Ensure indicators stay above everything */
#heroCarousel .carousel-indicators {
    z-index: 20 !important;
}

/* Mobile indicator adjustments - Keep high for visibility */
@media (max-width: 768px) {
    #heroCarousel .carousel-indicators,
    .carousel .carousel-indicators {
        bottom: 80px !important;
        padding: 0 !important;
    }
    
    #heroCarousel .carousel-indicators [data-bs-target],
    .carousel .carousel-indicators [data-bs-target] {
        width: 40px !important;
        height: 3px !important;
        margin: 0 6px !important;
    }
}

/* Default carousel transitions - Normal Bootstrap behavior */
.carousel-inner .carousel-item {
    transition: transform 0.4s ease-in-out !important;
    opacity: 1 !important;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: block !important;
}

.carousel-inner .carousel-item-next:not(.carousel-item-start),
.carousel-inner .carousel-item.active.carousel-item-end {
    opacity: 0 !important;
}

.carousel-inner .carousel-item-next.carousel-item-start,
.carousel-inner .carousel-item.active.carousel-item-start,
.carousel-inner .carousel-item-prev.carousel-item-end {
    opacity: 1 !important;
}



/* Prevent image flashing underneath */
.carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(1.0) contrast(1.1) !important;
    transition: all 0.4s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}



/* Desktop: Keep normal Bootstrap slide transitions */
@media (min-width: 769px) {
    .carousel-inner .carousel-item {
        transition: transform 0.4s ease-in-out !important;
        opacity: 1 !important;
    }
    
    .carousel-item img {
        transition: all 0.4s ease !important;
    }
    
    /* Higher desktop caption positioning */
    #heroCarousel .carousel-caption,
    .carousel .carousel-caption {
        bottom: 120px !important;
    }
    
    /* Desktop indicators positioning */
    #heroCarousel .carousel-indicators,
    .carousel .carousel-indicators {
        bottom: 100px !important;
    }
}

/* MOBILE GAP PREVENTION - HIGH PRIORITY */
@media screen and (max-width: 768px) {
    /* Ensure body has no gaps */
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure container around hero has no gaps */
    .home-content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure hero section connects perfectly to navbar */
    #hero-slideshow {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border: none !important;
        outline: none !important;
    }
    
    /* Ensure no gaps after hero section */
    #hero-slideshow + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Mobile responsive: Force fade with CSS animations - Maximum specificity */
@media screen and (max-width: 768px) {
    /* Set background color to prevent flash showing through gaps */
    html body div#hero-slideshow {
        background-color: #000 !important;
        height: auto !important;
        min-height: 60vh !important;
        max-height: 90vh !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    html body div#hero-slideshow div#heroCarousel {
        background-color: #000 !important;
        height: auto !important;
        min-height: 60vh !important;
        max-height: 90vh !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner {
        background-color: #000 !important;
        height: auto !important;
        min-height: 60vh !important;
        max-height: 90vh !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* SMOOTH mobile transitions - NO aggressive hiding */
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
        height: auto !important;
        min-height: 60vh !important;
        max-height: 90vh !important;
        background-color: #000 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        opacity: 0 !important;
        transition: opacity 0.6s ease-in-out !important;
        transform: translateX(0) !important;
        z-index: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Show active item with smooth fade */
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.active {
        opacity: 1 !important;
        z-index: 2 !important;
        position: relative !important;
    }
    
    /* Handle transitioning items smoothly - NO AGGRESSIVE HIDING */
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.carousel-item-next,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.carousel-item-prev {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        opacity: 0 !important;
        transform: translateX(0) !important;
        z-index: 1 !important;
    }
    
    /* Show transitioning items properly */
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item-next.carousel-item-start,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item-prev.carousel-item-end {
        opacity: 1 !important;
        z-index: 2 !important;
    }
    
    /* Let images determine container height naturally */
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item img {
        width: 100% !important;
        height: auto !important;
        min-height: 60vh !important;
        max-height: 90vh !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background-color: transparent !important;
        position: relative !important;
        border: none !important;
        outline: none !important;
    }
    
    /* Mobile captions positioned over the image */
    html body div#hero-slideshow div#heroCarousel .carousel-caption {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90% !important;
        text-align: center !important;
        background: rgba(0, 0, 0, 0.7) !important;
        padding: 20px !important;
        border-radius: 10px !important;
        z-index: 20 !important;
    }
}

/* Additional iOS-specific targeting */
@media screen and (max-width: 896px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone-specific targeting */
    html body div#hero-slideshow {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        overflow: hidden !important;
    }
    
    html body div#hero-slideshow div#heroCarousel {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        position: relative !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        background-color: #000 !important;
        overflow: hidden !important;
        position: relative !important;
        display: block !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 10 !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item img {
        width: 100% !important;
        height: auto !important;
        max-height: 80vh !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
        background-color: #000 !important;
    }
}

/* Force mobile layout on smaller devices including older iPhones */
@media screen and (max-width: 430px), 
       screen and (device-width: 414px), 
       screen and (device-width: 393px),
       screen and (device-width: 390px),
       screen and (device-width: 375px) {
    html body div#hero-slideshow {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        overflow: hidden !important;
    }
    
    html body div#hero-slideshow div#heroCarousel {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        position: relative !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        background-color: #000 !important;
        overflow: hidden !important;
        position: relative !important;
        display: block !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 10 !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item img {
        width: 100% !important;
        height: auto !important;
        max-height: 80vh !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
        background-color: #000 !important;
    }
}

/* Touch device targeting */
@media (hover: none) and (pointer: coarse) {
    html body div#hero-slideshow {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        overflow: hidden !important;
    }
    
    html body div#hero-slideshow div#heroCarousel {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner {
        background-color: #000 !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        position: relative !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        background-color: #000 !important;
        overflow: hidden !important;
        position: relative !important;
        display: block !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item:not(.active) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 10 !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item img {
        width: 100% !important;
        height: auto !important;
        max-height: 80vh !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
        background-color: #000 !important;
    }
}

@media (max-width: 480px) {
    .carousel-caption {
        bottom: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, 50%) !important;
        padding: 1.5rem !important;
        max-width: 85% !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 6px !important;
    }
    
    .carousel-caption h1 {
        font-size: 2rem;
        letter-spacing: 1px;
    }
    
    .carousel-caption p {
        font-size: 1.1rem;
        margin-bottom: 1.8rem;
    }
    
    .carousel-caption .eco-btn-hero, .carousel-caption .btn {
        font-size: 0.85rem;
        padding: 14px 28px;
        letter-spacing: 1px;
    }
}

/* Animation for slide entrance */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.carousel-item.active .carousel-caption {
    animation: slideInFromLeft 0.8s ease-out 0.3s both;
}

/* Smooth luxury loading enhancement */
.luxury-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* NUCLEAR-LEVEL animation removal - Override everything */
#heroCarousel *,
.carousel *,
#hero-slideshow *,
.hero-slideshow * {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 0 !important;
    animation-fill-mode: none !important;
    animation-play-state: paused !important;
}

/* Remove any pulse, heartbeat, glow, or pulsing animations */
.pulse, .heartbeat, .animate-pulse, .glow, .pulsing, .animated {
    animation: none !important;
    -webkit-animation: none !important;
}

/* ABSOLUTE button styling override - No animations, no effects */
#heroCarousel .btn,
.carousel .btn,
#hero-slideshow .btn,
#heroCarousel .eco-btn-hero,
.carousel .eco-btn-hero,
#hero-slideshow .eco-btn-hero,
#heroCarousel .carousel-caption .btn,
#heroCarousel .carousel-caption .eco-btn-hero {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: all 0.3s ease !important;
    background: var(--main-gold) !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--black) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    outline: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Force remove ALL button states that could cause pulsing */
#heroCarousel .btn:hover,
#heroCarousel .btn:focus,
#heroCarousel .btn:active,
#heroCarousel .btn:visited,
.carousel .btn:hover,
.carousel .btn:focus,
.carousel .btn:active,
.carousel .btn:visited,
#heroCarousel .eco-btn-hero:hover,
#heroCarousel .eco-btn-hero:focus,
#heroCarousel .eco-btn-hero:active,
#heroCarousel .eco-btn-hero:visited {
    animation: none !important;
    -webkit-animation: none !important;
    transform: translateY(-2px) !important;
    -webkit-transform: translateY(-2px) !important;
    background: rgba(212, 175, 55, 0.9) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    border: none !important;
    color: var(--black) !important;
    outline: none !important;
}

/* Kill any keyframe animations globally for hero section */
@keyframes fadeIn {
    from { opacity: 1; }
    to { opacity: 1; }
}

@keyframes pulse {
    from { opacity: 1; }
    to { opacity: 1; }
}

@keyframes heartbeat {
    from { opacity: 1; }
    to { opacity: 1; }
}

/* Override any Bootstrap or theme button classes */
.btn-primary, .btn-secondary, .btn-success, .btn-warning, .btn-info, .btn-light, .btn-dark {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Force remove any ::before or ::after pseudo-element animations */
#heroCarousel .btn::before,
#heroCarousel .btn::after,
#heroCarousel .eco-btn-hero::before,
#heroCarousel .eco-btn-hero::after {
    animation: none !important;
    -webkit-animation: none !important;
    content: none !important;
    display: none !important;
}

/* Specific arrow fixes for squares issue */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    background-image: none !important;
    filter: none !important;
}

/* Remove any red backgrounds or borders from controls */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Font Awesome icon fix */
.fa, .fas, .fab, .far, .fal, .fad {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

/* FINAL CLEAN GOLD ARROWS - NO CIRCLES */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next,
.carousel .carousel-control-prev,
.carousel .carousel-control-next,
#hero-slideshow .carousel-control-prev,
#hero-slideshow .carousel-control-next {
    width: 100px !important;
    height: 100px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--main-gold) !important;
    font-size: 60px !important;
    margin: auto 30px !important;
    border-radius: 0 !important;
    transition: color 0.3s ease !important;
    opacity: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

/* Clean hover - arrows turn darker gold */
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover,
.carousel .carousel-control-prev:hover,
.carousel .carousel-control-next:hover,
#hero-slideshow .carousel-control-prev:hover,
#hero-slideshow .carousel-control-next:hover {
    color: rgba(180, 145, 25, 1) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    box-shadow: none !important;
}

/* Arrow icons - perfect size for 100px buttons */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon,
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon,
#hero-slideshow .carousel-control-prev-icon,
#hero-slideshow .carousel-control-next-icon {
    background-image: none !important;
    background: transparent !important;
    background-color: transparent !important;
    width: 60px !important;
    height: 60px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 60px !important;
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Perfect-sized Unicode arrows for 100px buttons */
#heroCarousel .carousel-control-prev-icon::before,
.carousel .carousel-control-prev-icon::before,
#hero-slideshow .carousel-control-prev-icon::before {
    content: '‹' !important;
    font-family: Arial, sans-serif !important;
    color: inherit !important;
    font-size: 60px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: block !important;
}

#heroCarousel .carousel-control-next-icon::before,
.carousel .carousel-control-next-icon::before,
#hero-slideshow .carousel-control-next-icon::before {
    content: '›' !important;
    font-family: Arial, sans-serif !important;
    color: inherit !important;
    font-size: 60px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: block !important;
}

/* ========================================
   LUXURY HERO CAROUSEL - ENHANCED STYLING
   ======================================== */

.hero-carousel {
    height: 100vh !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   HIDE DEFAULT BOOTSTRAP ARROWS COMPLETELY
   ======================================== */

/* Hide all default Bootstrap carousel controls */
.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background-image: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hide default Bootstrap arrow containers */
.carousel-control-prev::before,
.carousel-control-next::before,
.carousel-control-prev::after,
.carousel-control-next::after {
    display: none !important;
}

/* Override any default Bootstrap styling */
.carousel-control-prev[data-bs-slide="prev"],
.carousel-control-next[data-bs-slide="next"] {
    background: none !important;
    border: none !important;
}

/* ========================================
   CUSTOM ELEGANT THIN CAROUSEL ARROWS
   ======================================== */

.carousel-control-prev,
.carousel-control-next {
    width: 60px !important;
    height: 60px !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 0 !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    opacity: 0.8 !important;
    z-index: 1000 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

.carousel-control-prev {
    left: 40px !important;
}

.carousel-control-next {
    right: 40px !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: var(--main-gold) !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3) !important;
}

/* ========================================
   CUSTOM THIN ARROW ICONS ONLY
   ======================================== */

/* Create custom thin arrow icons */
.carousel-control-prev::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 12px solid var(--main-gold) !important;
    transform: translate(-40%, -50%) !important;
    transition: all 0.3s ease !important;
}

.carousel-control-next::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-left: 12px solid var(--main-gold) !important;
    transform: translate(-60%, -50%) !important;
    transition: all 0.3s ease !important;
}

/* Arrow Hover Effects */
.carousel-control-prev:hover::after {
    border-right-color: var(--white) !important;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8)) !important;
}

.carousel-control-next:hover::after {
    border-left-color: var(--white) !important;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8)) !important;
}

/* ========================================
   LUXURY CAROUSEL INDICATORS
   ======================================== */

.carousel-indicators {
    bottom: 30px !important;
    margin-bottom: 0 !important;
    z-index: 1000 !important;
}

.carousel-indicators [data-bs-target] {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(212, 175, 55, 0.5) !important;
    background: transparent !important;
    margin: 0 6px !important;
    transition: all 0.4s ease !important;
}

.carousel-indicators .active {
    background: var(--main-gold) !important;
    border-color: var(--main-gold) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6) !important;
}

/* ========================================
   LUXURY CAROUSEL CAPTIONS
   ======================================== */

.carousel-caption {
    position: absolute !important;
    bottom: 80px !important;
    left: 80px !important;
    right: auto !important;
    text-align: left !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    padding: 2.5rem 3rem !important;
    border-left: 4px solid var(--main-gold) !important;
    max-width: 600px !important;
    z-index: 100 !important;
}

.carousel-caption h1 {
    font-family: 'Playfair Display', serif !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: var(--main-gold) !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: 1px !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7) !important;
    line-height: 1.2 !important;
}

.carousel-caption p {
    font-family: 'Libre Baskerville', serif !important;
    font-size: 1.3rem !important;
    color: var(--cream) !important;
    margin-bottom: 2rem !important;
    line-height: 1.6 !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
}

.carousel-caption .btn {
    background: transparent !important;
    border: 2px solid var(--main-gold) !important;
    color: var(--main-gold) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    padding: 16px 40px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.4s ease !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.carousel-caption .btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--main-gold) !important;
    transition: left 0.4s ease !important;
    z-index: -1 !important;
}

.carousel-caption .btn:hover::before {
    left: 0 !important;
}

.carousel-caption .btn:hover {
    color: var(--black) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.4) !important;
}

/* ========================================
   REMOVE ANY WHITE GAPS OR SPACING
   ======================================== */

/* Ensure no spacing around hero */
.navbar + #hero-slideshow {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#hero-slideshow + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.container-fluid.p-0 {
    padding: 0 !important;
    margin: 0 !important;
}

/* ========================================
   MOBILE RESPONSIVE HERO DESIGN
   ======================================== */

@media (max-width: 768px) {
    /* Keep full height on mobile - NO GAPS */
    #hero-slideshow {
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
    }
    
    #heroCarousel {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .carousel-inner {
        height: 100vh !important;
        min-height: 100vh !important;
        position: relative !important;
    }

    .carousel-item {
        height: 100vh !important;
        min-height: 100vh !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        opacity: 0 !important;
        transition: opacity 0.5s ease-in-out !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .carousel-item.active {
        opacity: 1 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .carousel-item-next,
    .carousel-item-prev {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        z-index: 1 !important;
    }

    .carousel-item-next.carousel-item-start,
    .carousel-item-prev.carousel-item-end {
        opacity: 1 !important;
        transform: none !important;
        z-index: 2 !important;
    }

    /* Ensure images completely fill container on mobile */
    .carousel-item img {
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        object-fit: cover !important;
        object-position: center !important;
        backface-visibility: hidden !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transition: opacity 0.5s ease-in-out !important;
        filter: brightness(0.7) contrast(1.1) !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Mobile Caption Styling - CENTERED */
    .carousel-caption {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        padding: 0 !important;
        max-width: 90% !important;
        text-align: center !important;
        background: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        border-left: none !important;
        backdrop-filter: none !important;
        z-index: 10 !important;
    }
    
    .carousel-caption h1 {
        font-size: 2.2rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
        color: var(--main-gold) !important;
    }
    
    .carousel-caption p {
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.5 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
        color: white !important;
    }
    
    .carousel-caption .btn,
    .carousel-caption .eco-btn-hero {
        padding: 14px 28px !important;
        font-size: 1rem !important;
        letter-spacing: 1px !important;
        background: var(--main-gold) !important;
        color: var(--black) !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 50px;
        height: 50px;
        margin: auto 20px;
        font-size: 24px;
    }
    
    #heroCarousel .carousel-indicators,
    .carousel .carousel-indicators {
        bottom: 60px !important;
        padding: 0 !important;
    }
    
    #heroCarousel .carousel-indicators [data-bs-target],
    .carousel .carousel-indicators [data-bs-target] {
        width: 35px !important;
        height: 3px !important;
        margin: 0 5px !important;
    }
}

@media (max-width: 576px) {
    /* Keep full height on small mobile - NO GAPS */
    #hero-slideshow {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    #heroCarousel,
    .carousel-inner,
    .carousel-item {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .carousel-item img {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .carousel-caption {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        padding: 0 !important;
        max-width: 85% !important;
        text-align: center !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    
    .carousel-caption h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.8rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
        color: var(--main-gold) !important;
    }
    
    .carousel-caption p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.2rem !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
        color: white !important;
    }
    
    .carousel-caption .btn,
    .carousel-caption .eco-btn-hero {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
        letter-spacing: 1px !important;
        background: var(--main-gold) !important;
        color: var(--black) !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Smaller mobile arrows */
    .carousel-control-prev,
    .carousel-control-next {
        width: 44px !important;
        height: 44px !important;
    }
    
    .carousel-control-prev {
        left: 15px !important;
    }
    
    .carousel-control-next {
        right: 15px !important;
    }
    
    .carousel-control-prev::after {
        border-top: 5px solid transparent !important;
        border-bottom: 5px solid transparent !important;
        border-right: 8px solid var(--main-gold) !important;
    }
    
    .carousel-control-next::after {
        border-top: 5px solid transparent !important;
        border-bottom: 5px solid transparent !important;
        border-left: 8px solid var(--main-gold) !important;
    }
}

/* ========================================
   TOUCH/SWIPE SUPPORT FOR MOBILE
   ======================================== */

@media (max-width: 768px) {
    .carousel-inner {
        touch-action: pan-y pinch-zoom !important;
    }
    
    .carousel-item {
        transition: transform 0.3s ease-in-out !important;
    }
    
    /* Enable smooth swiping */
    .carousel.slide .carousel-item {
        transition: transform 0.3s ease-in-out !important;
    }
    
    /* Improve touch responsiveness */
    .carousel-control-prev,
    .carousel-control-next {
        touch-action: manipulation !important;
    }
}

/* JavaScript-forced mobile fade class */
.mobile-fade-forced .carousel-inner .carousel-item {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transition: opacity 0.6s ease-in-out !important;
}

.mobile-fade-forced .carousel-inner .carousel-item:not(.active) {
    opacity: 0 !important;
}

.mobile-fade-forced .carousel-inner .carousel-item.active {
    opacity: 1 !important;
}

.mobile-fade-forced .carousel-inner .carousel-item.carousel-item-next,
.mobile-fade-forced .carousel-inner .carousel-item.carousel-item-prev {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
}

.mobile-fade-forced .carousel-inner .carousel-item.carousel-item-start,
.mobile-fade-forced .carousel-inner .carousel-item.carousel-item-end {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
}

.mobile-fade-forced .carousel-inner .carousel-item.carousel-item-left,
.mobile-fade-forced .carousel-inner .carousel-item.carousel-item-right {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    opacity: 0 !important;
}

/* NUCLEAR OVERRIDE - Combat home.css conflicting styles */
html body div#hero-slideshow,
html body div#hero-slideshow div#heroCarousel,
html body div#hero-slideshow div#heroCarousel div.carousel-inner {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
}

html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
}

html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item img {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    object-fit: cover !important;
}

/* ULTRA MOBILE OVERRIDE - Force 100vh on all mobile screens */
@media screen and (max-width: 768px) {
    html body div#hero-slideshow,
    html body div#hero-slideshow div#heroCarousel,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
    }
    
    /* Force absolute positioning and fade for mobile */
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        opacity: 0 !important;
        transition: opacity 0.6s ease-in-out !important;
        transform: translateX(0) !important;
        z-index: 1 !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.active {
        opacity: 1 !important;
        z-index: 2 !important;
        position: relative !important;
    }
    
    /* Disable all sliding transforms on mobile */
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.carousel-item-next,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.carousel-item-prev,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.carousel-item-start,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.carousel-item-end,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.carousel-item-left,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item.carousel-item-right {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        opacity: 0 !important;
        z-index: 1 !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item-next.carousel-item-start,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item-prev.carousel-item-end {
        opacity: 1 !important;
        z-index: 2 !important;
    }
}

@media screen and (max-width: 576px) {
    html body div#hero-slideshow,
    html body div#hero-slideshow div#heroCarousel,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item img {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
}

/* MOBILE BLACK GAP FIX - Remove excessive black backgrounds */
@media screen and (max-width: 768px) {
    /* Remove black backgrounds that create gaps */
    html body div#hero-slideshow,
    html body div#hero-slideshow div#heroCarousel,
    html body div#hero-slideshow div#heroCarousel div.carousel-inner {
        background-color: transparent !important;
        background: transparent !important;
    }
    
    /* Let images size containers naturally */
    html body div#hero-slideshow {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    html body div#hero-slideshow div#heroCarousel {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        background-color: transparent !important;
        background: transparent !important;
    }
    
    /* Images should be responsive and determine container size */
    html body div#hero-slideshow div#heroCarousel div.carousel-inner div.carousel-item img {
        width: 100% !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 80vh !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: transparent !important;
        position: relative !important;
        border: none !important;
        outline: none !important;
    }
}



 

/* EMERGENCY MOBILE BLACK GAP FIX */
@media screen and (max-width: 768px) {
    #hero-slideshow,
    #heroCarousel,
    .carousel-inner,
    .carousel-item {
        background: transparent !important;
        background-color: transparent !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    .carousel-item img {
        width: 100% !important;
        height: auto !important;
        min-height: 50vh !important;
        max-height: 75vh !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
        background: transparent !important;
        position: relative !important;
    }
    
    /* Force fade transitions for mobile */
    .carousel-item {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        opacity: 0 !important;
        transition: opacity 0.6s ease-in-out !important;
        transform: translateX(0) !important;
    }
    
    .carousel-item.active {
        opacity: 1 !important;
        position: relative !important;
        z-index: 2 !important;
    }
}