/* UNIVERSAL LAYOUT RESET for "Normal Website" Flow */

/* Force all top-level sections to stack normally */
.main-cover {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000;
    z-index: auto !important;
}

.main-slide-section,
.main-solution-intro,
.main-solution-main,
.main-global,
.main-sustainability,
.main-bottom-links {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff;
    z-index: auto !important;
}

/* Fix for inner containers to not be absolute */
.slide-inner,
.solution-intro-inner,
.cover-inner {
    position: relative !important;
    height: 100vh !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Ensure backgrounds cover the area but don't float */
.slide-background,
.main-cover video,
.cover-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

/* Titles should be centered on top of the background */
.cover-title,
.slide-title,
.solution-intro-title {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* Center horizontally */
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    max-width: 1200px;
    z-index: 10 !important;
    text-align: center !important;
    /* Center alignment looks safer for overlaps */
    margin: 0 !important;
}

/* Left alignment for specific requests if needed, but center is safer to avoid overlap with edges.
   User asked for "Title overlap", usually z-index or positioning issue. 
   Let's keep text left-aligned if that was the design, but ensure container is safe.
*/
.slide-title {
    text-align: left !important;
    left: 10% !important;
    transform: translateY(-50%) !important;
}

/* Card Section Specifics - Section 4 */
.main-solution-intro {
    background-color: #f5f5f7 !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.solution-intro-inner {
    height: auto !important;
    padding: 60px 0 !important;
    display: block !important;
}

/* Hide original map elements if they persist */
.solution-intro-map,
.solution-intro-map-dot {
    display: none !important;
}

/* Ensure card container is visible */
.card-section-container {
    opacity: 1 !important;
    /* Handled by animation class, but base must be visible layout-wise */
    position: relative !important;
    z-index: 20 !important;
    background: transparent !important;
    /* Let section bg show */
}

/* Reset ScrollMagic/GSAP pinning spacers if they exist */
.scroll-content,
.pin-spacer {
    height: auto !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Navigation spacing */
.header {
    position: absolute !important;
    /* Or fixed if sticky nav desired, but absolute puts it at top flow */
    z-index: 100 !important;
}

/* Video controls adjustments */
.video-control {
    display: none !important;
}