/* UX Improvements CSS - All client feedback fixes */

/* ============================================
   1. SLIDER - Seamless Transitions (Production Optimized)
   ============================================ */
/* Remove black overlay during transitions */
.hero-blur-container:before,
.hsbw_bg:before {
    background: rgba(0, 0, 0, 0) !important;
    transition: none !important;
    display: none !important; /* Completely hide overlay */
}

.hero-blur-container.hideblur:before,
.hsbw_bg.hideblur:before {
    background: rgba(0, 0, 0, 0) !important;
    display: none !important;
}

/* Ensure smooth fade transitions with hardware acceleration */
.hero-slider .swiper-container {
    background: transparent !important;
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px; /* 3D perspective for smoother transitions */
}

.hero-slider .swiper-wrapper {
    background: transparent !important;
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
}

/* Optimized slide transitions with hardware acceleration */
.hero-slider .swiper-slide {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0); /* Force hardware acceleration */
    -webkit-font-smoothing: antialiased; /* Smooth text rendering */
    -moz-osx-font-smoothing: grayscale;
}

.hero-slider .swiper-slide-active {
    opacity: 1 !important;
    z-index: 2; /* Ensure active slide is on top */
}

/* Smooth image transitions */
.hero-slider .swiper-slide img,
.hero-slider .swiper-slide .bg {
    opacity: 1;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateZ(0); /* Hardware acceleration */
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast; /* Better image rendering */
    image-rendering: crisp-edges;
}

/* Optimized Swiper container for smooth transitions */
.hero-slider .swiper-container {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0); /* Force GPU acceleration */
    -webkit-transform: translateZ(0);
}

/* Smooth fade effect for Swiper with optimized timing */
.swiper-container-fade .swiper-slide {
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.swiper-container-fade .swiper-slide-active {
    opacity: 1 !important;
}

/* Background container optimizations */
.hero-blur-container {
    background: transparent !important;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.hero-blur-container .bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed; /* Smooth parallax effect */
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), background-image 0s linear !important;
    transform: translateZ(0); /* Force GPU acceleration */
    will-change: opacity, background-image;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    /* Prevent flickering during transitions */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

/* Ensure background images are properly loaded */
.bg-wrap.bg-hero {
    background: transparent !important;
    transform: translateZ(0); /* Hardware acceleration */
}

.bg-wrap.bg-hero .bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: translateZ(0); /* Hardware acceleration */
    backface-visibility: hidden;
}

/* Prevent layout shifts during transitions */
.hero-section,
.hero-section-wrap,
.hero-section-wrap-item {
    contain: layout style paint; /* CSS containment for performance */
}

/* Optimize transition performance */
@media (prefers-reduced-motion: no-preference) {
    .hero-slider .swiper-slide,
    .hero-blur-container .bg {
        transition-duration: 1s !important;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ============================================
   2. MOBILE SLIDER - Full Screen
   ============================================ */
@media (max-width: 768px) {
    /* Full screen hero section */
    .hero-section,
    .hero-section-wrap,
    .hero-section-wrap-item {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
    
    /* Remove fixed height from container */
    .hero-section .container {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        padding: 0 !important;
    }
    
    .hero-section-container {
        height: 100vh !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Full screen slider wrapper */
    .hero-slider-wrapper {
        height: 100vh !important;
        min-height: 100vh !important;
        flex: 1 1 auto !important;
    }
    
    .hero-slider,
    .hero-slider .swiper-container,
    .hero-slider .swiper-wrapper {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .hero-slider .swiper-slide {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .hero-carousel_item {
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Background images full screen */
    .bg-wrap.bg-hero,
    .hero-blur-container,
    .hero-blur-container_item,
    .bg-wrap.bg-hero .bg,
    .hero-blur-container .bg {
        height: 100vh !important;
        min-height: 100vh !important;
        width: 100% !important;
    }
    
    /* Ensure images cover full screen */
    .hero-carousel_item .bg,
    .hero-blur-container .bg {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        height: 100vh !important;
        width: 100% !important;
    }
    
    /* Adjust title positioning for mobile */
    .hero-section-title {
        position: relative !important;
        z-index: 10 !important;
        padding: 20px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 8px !important;
        backdrop-filter: blur(8px) !important;
        margin: 20px !important;
    }
    
    /* Remove fixed height from container wrapper */
    .hero-section-container-wrapper {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    /* Hide scroll down on mobile if needed */
    .hs-scroll-down-wrap {
        position: absolute !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
    }
}

/* ============================================
   2. BOARD COMMITTEES - Typography
   ============================================ */
.board-committee-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin-bottom: 12px !important;
    line-height: 1.2 !important;
}

.board-committee-subtitle {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #4CA3AF !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}

.board-committee-body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* How Our Committees Operate - Better Alignment */
.how-committees-operate .row {
    display: flex;
    align-items: stretch;
}

.how-committees-operate .col-md-4 {
    display: flex;
    flex-direction: column;
}

.how-committees-operate .col-md-4 h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #000;
}

.how-committees-operate .col-md-4 p {
    flex: 1;
    line-height: 1.7;
}

/* ============================================
   3. PROPERTY LISTING - Font Colors
   ============================================ */
.property-listing-item h2,
.property-listing-item h3,
.property-listing-item .property-title {
    color: #000 !important;
    font-weight: 600 !important;
}

.property-development-title,
.property-management-title {
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
}

/* ============================================
   4. PROPERTY MANAGEMENT - Block Alignment
   ============================================ */
.property-management-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.property-management-block {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ============================================
   5. DIASPORA - Improvements
   ============================================ */
/* Diaspora CTA - removed custom blocks, using standard contact form style */

.diaspora-browse-link {
    display: inline-block;
    background: #4CA3AF;
    color: #fff !important;
    padding: 15px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
    margin-top: 0;
}

.diaspora-browse-link:hover {
    background: #3a8a94;
    color: #fff !important;
}

/* Ensure contact-wh-item blocks are displayed properly on diaspora page */
.contacts-opt-wrap .contact-wh {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.contacts-opt-wrap .contact-wh-item {
    padding: 15px 20px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #eee;
    font-weight: 600;
    font-size: 0.9em;
}

.contacts-opt-wrap .contact-wh-item strong {
    color: var(--main-color);
    padding-left: 8px;
}

/* Diaspora process items - ensure all have white background and uniform spacing */
section.gray-bg .process-item {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 30px !important;
    border-radius: 20px !important;
}

section.gray-bg .process-item .process-count {
    background: #111 !important;
    color: #fff !important;
    margin-bottom: 20px !important;
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    text-align: center !important;
    border-radius: 6px !important;
}

section.gray-bg .process-item h4 {
    color: #333 !important;
    font-size: 1.4em !important;
    font-weight: 500 !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

section.gray-bg .process-item p {
    color: #333 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    flex: 1 !important;
}

/* Ensure uniform row spacing with gaps for vertical and horizontal spacing */
section.gray-bg .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -15px !important;
    gap: 0 !important;
}

section.gray-bg .row > [class*="col-"] {
    padding: 0 15px !important;
    display: flex !important;
    margin-bottom: 30px !important;
}

/* Uniform card heights with consistent spacing */
section.gray-bg .col-lg-4,
section.gray-bg .col-md-6 {
    margin-bottom: 30px !important;
}

/* Add horizontal spacing between cards */
@media (min-width: 992px) {
    section.gray-bg .row > [class*="col-lg-4"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Add vertical spacing between rows */
section.gray-bg .row > [class*="col-"]:nth-child(n+4) {
    margin-top: 0 !important;
}

/* Diaspora blocks 3, 6, 9 dividers */
.diaspora-process-item:nth-child(3),
.diaspora-process-item:nth-child(6),
.diaspora-process-item:nth-child(9) {
    border-top: 2px solid #4CA3AF;
    padding-top: 30px;
    margin-top: 30px;
}

/* Why Diaspora Investors - Better Alignment */
.why-diaspora-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.why-diaspora-section ul {
    list-style: none;
    padding: 0;
}

.why-diaspora-section li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.why-diaspora-section li:last-child {
    border-bottom: none;
}

/* ============================================
   6. BLOCK BACKGROUNDS - Green Color
   ============================================ */
.stats-block-green {
    background: #4CA3AF !important;
    color: #fff !important;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

.stats-block-green h3,
.stats-block-green h4 {
    color: #fff !important;
}

/* Title Deed, Investors, Apartments, Projects blocks */
.diaspora-stats-block {
    background: #4CA3AF;
    color: #fff;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
}

.diaspora-stats-block h4 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.diaspora-stats-block .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
}

/* ============================================
   7. NEWS LISTING - View Details Button Sky Blue
   ============================================ */
.post-card_link,
.post-card_link:visited,
.post-card_link:link {
    background: #87CEEB !important; /* Sky blue */
    color: #fff !important;
    border: 1px solid rgba(135, 206, 235, 0.3) !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 0.9em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.post-card_link:hover,
.post-card_link:focus {
    background: #6BB6D6 !important; /* Darker sky blue on hover */
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.4) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

.post-card_link i {
    color: #fff !important;
    transition: transform 0.3s ease !important;
}

.post-card_link:hover i {
    transform: translateX(3px) !important;
}

/* Mobile responsive for View Details button */
@media (max-width: 768px) {
    .post-card_link {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        margin-top: 15px !important;
        padding: 10px 18px !important;
        font-size: 0.85em !important;
    }
}

@media (max-width: 480px) {
    .post-card_link {
        padding: 10px 16px !important;
        font-size: 0.8em !important;
    }
}

/* ============================================
   7. CALENDAR OF EVENTS - PDF Color
   ============================================ */
.calendar-pdf-link {
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    background: #87CEEB !important; /* Sky blue */
    display: inline-block !important;
    transition: all 0.3s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
}

.calendar-pdf-link:hover {
    background: #6BB6D6 !important; /* Darker sky blue on hover */
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.5);
    transform: translateY(-2px);
}

.calendar-pdf-link i {
    margin-right: 6px;
}

/* Ensure PDF link is visible on mobile and desktop */
@media (max-width: 768px) {
    .calendar-pdf-link {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 5px 0;
        font-size: 14px;
        padding: 8px 14px;
    }
}

@media (max-width: 480px) {
    .calendar-pdf-link {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 13px;
        padding: 7px 12px;
        width: auto;
    }
}

/* Ensure View Album button is visible on mobile and desktop */
@media (max-width: 768px) {
    .gid_link {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 10px !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    
    .geodir-category-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 15px 20px !important;
    }
}

@media (max-width: 640px) {
    /* Override any display:none rules for gid_link */
    .geodir-category-footer .gid_link,
    .fw-listing-item .geodir-category-footer .gid_link,
    .listing-grid-item .geodir-category-footer .gid_link,
    .gid_link {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 10px !important;
        width: 100% !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .gid_link {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 12px !important;
        padding: 10px 16px !important;
    }
}

/* ============================================
   9. ALL BUTTONS - Sky Blue Styling
   ============================================ */

/* View Details button (gid_link) - Sky Blue */
.gid_link,
.geodir-category-footer .gid_link,
.fw-listing-item .geodir-category-footer .gid_link,
.listing-grid-item .geodir-category-footer .gid_link {
    background: #87CEEB !important; /* Sky blue */
    color: #fff !important;
    border: 1px solid rgba(135, 206, 235, 0.3) !important;
    box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
    transition: all 0.3s ease;
}

.gid_link:hover,
.geodir-category-footer .gid_link:hover,
.fw-listing-item .geodir-category-footer .gid_link:hover,
.listing-grid-item .geodir-category-footer .gid_link:hover {
    background: #6BB6D6 !important; /* Darker sky blue on hover */
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.5);
}

.gid_link i {
    transition: transform 0.3s ease;
}

.gid_link:hover i {
    transform: translateX(3px);
}

/* All submit/action buttons (commentssubmit) - Sky Blue */
.commentssubmit,
.commentssubmit_fw,
.commentssubmit.cs_amin_btn,
.commentssubmit.csb_color {
    background: #87CEEB !important; /* Sky blue */
    color: #fff !important;
    border: 1px solid rgba(135, 206, 235, 0.3) !important;
    box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
    transition: all 0.3s ease;
}

.commentssubmit:hover,
.commentssubmit_fw:hover,
.commentssubmit.cs_amin_btn:hover,
.commentssubmit.csb_color:hover {
    background: #6BB6D6 !important; /* Darker sky blue on hover */
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.5);
}

/* Search submit button - Sky Blue */
.search-submit,
.search-submit.color-bg {
    background: #87CEEB !important; /* Sky blue */
    color: #fff !important;
    border: 1px solid rgba(135, 206, 235, 0.3) !important;
    box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
    transition: all 0.3s ease;
}

.search-submit:hover,
.search-submit.color-bg:hover {
    background: #6BB6D6 !important; /* Darker sky blue on hover */
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.5);
}

/* Subscribe button (non-footer) - Sky Blue */
.subscribe-button {
    background: #87CEEB !important; /* Sky blue */
    color: #fff !important;
    border: 1px solid rgba(135, 206, 235, 0.3) !important;
    box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
    transition: all 0.3s ease;
}

.subscribe-button:hover {
    background: #6BB6D6 !important; /* Darker sky blue on hover */
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.5);
}

/* Exclude footer subscribe buttons - keep original styling */
footer .subscribe-button,
.main-footer .subscribe-button,
.footer-widget .subscribe-button,
.footer-widget-content .subscribe-button,
footer .subscribe-button:hover,
.main-footer .subscribe-button:hover,
.footer-widget .subscribe-button:hover,
.footer-widget-content .subscribe-button:hover {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    box-shadow: none !important;
    transform: none !important;
}

footer .subscribe-button:hover,
.main-footer .subscribe-button:hover,
.footer-widget .subscribe-button:hover,
.footer-widget-content .subscribe-button:hover {
    background: #000 !important;
    color: #fff !important;
}

/* Generic buttons in body - Sky Blue */
body button:not(.ha-btn-danger):not(.ha-btn-warning):not(.ha-btn-success),
body .btn:not(.btn-danger):not(.btn-warning):not(.btn-success),
body input[type="submit"]:not([style*="background"]):not([class*="danger"]):not([class*="warning"]):not([class*="success"]) {
    background: #87CEEB !important; /* Sky blue */
    color: #fff !important;
    border: 1px solid rgba(135, 206, 235, 0.3) !important;
    box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
    transition: all 0.3s ease;
}

body button:not(.ha-btn-danger):not(.ha-btn-warning):not(.ha-btn-success):hover,
body .btn:not(.btn-danger):not(.btn-warning):not(.btn-success):hover,
body input[type="submit"]:not([style*="background"]):not([class*="danger"]):not([class*="warning"]):not([class*="success"]):hover {
    background: #6BB6D6 !important; /* Darker sky blue on hover */
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.5);
}

/* Exclude admin/cms danger/warning buttons - keep original styling */
.ha-btn-danger,
.btn-danger,
button[onclick*="confirm"][onclick*="Delete"] {
    /* Keep original styling for danger buttons */
}

/* ============================================
   10. PHOTO GALLERY - Mobile View Album
   ============================================ */
@media (max-width: 768px) {
    .photo-gallery-album-selector {
        display: block !important;
        margin-bottom: 20px;
        padding: 15px;
        background: #f5f5f5;
        border-radius: 8px;
    }
    
    .photo-gallery-album-selector select {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 2px solid #4CA3AF;
        border-radius: 4px;
    }
}

/* Desktop - keep existing album navigation */
@media (min-width: 769px) {
    .photo-gallery-album-selector {
        display: none;
    }
}

/* ============================================
   9. CONTACT - Mobile Alignment
   ============================================ */
@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: 20px !important;
    }
    
    .contact-form-wrapper .row {
        margin: 0;
    }
    
    .contact-form-wrapper .col-lg-6,
    .contact-form-wrapper .col-md-6 {
        padding: 0 15px;
        margin-bottom: 20px;
    }
    
    .contact-info-item {
        text-align: center;
        margin-bottom: 25px;
    }
}

/* ============================================
   10. INVESTOR INFO - Mobile View
   ============================================ */
@media (max-width: 768px) {
    .investor-info-card {
        margin-bottom: 20px;
        padding: 20px;
    }
    
    .investor-info-accordion {
        width: 100%;
    }
    
    .investor-info-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .investor-info-table table {
        min-width: 600px;
    }
}

/* ============================================
   11. REMOVE LINES - Browse Projects / Mitini
   ============================================ */
.browse-projects-section::after,
.mitini-scapes-section::before {
    display: none !important;
}

.browse-projects-section,
.mitini-scapes-section {
    border: none !important;
}

/* ============================================
   12. SLIDER - Seamless Transitions (no black background)
   ============================================ */
.hero-slider .swiper-slide {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slider .swiper-slide-active {
    opacity: 1;
}

/* Remove black overlay during transitions */
.hero-blur-container:before,
.hsbw_bg:before {
    background: rgba(0, 0, 0, 0) !important;
    transition: none !important;
}

.hero-blur-container.hideblur:before,
.hsbw_bg.hideblur:before {
    background: rgba(0, 0, 0, 0) !important;
}

/* Ensure smooth fade transitions */
.hero-slider .swiper-container {
    background: transparent !important;
}

.hero-slider .swiper-wrapper {
    background: transparent !important;
}

/* Preload images for seamless transitions */
.hero-slider .swiper-slide img,
.hero-slider .swiper-slide .bg {
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}

.hero-blur-container {
    background: transparent !important;
}

.hero-blur-container .bg {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: opacity 1.5s ease-in-out !important;
}

/* ============================================
   MOBILE: PREVENT IMAGE CROPPING - SLIDER OVERRIDES
   ============================================ */
@media (max-width: 768px) {
    /* Hero slider images - use contain on mobile to show full images */
    .hero-slider .swiper-slide img,
    .hero-slider .swiper-slide .bg {
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
    }
    
    .hero-blur-container .bg {
        background-size: contain !important;
        background-attachment: scroll !important; /* Better performance on mobile */
        background-position: center center !important;
    }
    
    .bg-wrap.bg-hero .bg {
        background-size: contain !important;
        background-position: center center !important;
    }
    
    /* Slider containers - allow height to adjust */
    .hero-slider .swiper-slide,
    .hero-slider .swiper-wrapper {
        height: auto !important;
        min-height: auto !important;
    }
}

@media (max-width: 480px) {
    .hero-slider .swiper-slide img,
    .hero-slider .swiper-slide .bg {
        max-height: 50vh !important;
    }
}

/* ============================================
   13. GENERAL MOBILE IMPROVEMENTS
   ============================================ */
@media (max-width: 768px) {
    /* Better spacing on mobile */
    .boxed-content {
        padding: 20px 15px;
    }
    
    /* Larger touch targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better text readability */
    body {
        font-size: 16px;
        line-height: 1.6;
    }
}