.main-banner {
    position: relative;
    width: 100%;
    height: calc(100vh - 56px);
    background: url("/static/nexus/img/aerial_cdmx.4084bdec04ff.webp") no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Default for non-iOS browsers */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Target iOS devices specifically */
@supports (-webkit-touch-callout: none) and (not (overflow: -moz-scrollbars-none)) {
    .main-banner {
        background-attachment: scroll; /* Workaround for iOS Safari */
    }
}

.main-banner::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, var(--kaiju-dark) 60%, transparent 100%);
    pointer-events: none;
}

@media (min-width: 768px) {
    .main-banner::before {
        background: linear-gradient(to right, var(--kaiju-dark) 40%, transparent 80%);
    }
}

.main-banner-content {
	position: absolute;
	left: 5%;
	right: 60%;
}

.kaiju-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    padding: 20px;
    z-index: 1;
}

.kaiju-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(var(--kaiju-dark-rgb), 0.25) 50%, #0000 95%),
                linear-gradient(to bottom, rgba(var(--kaiju-dark-rgb), 0.25) 50%, #0000 95%);
    z-index: -1;
    pointer-events: none;
    border-radius: 15px;
}

.tools-banner-mejubi {
	position: absolute;
	width: 40%;
	margin-left: 25px;
	text-align: left;
}

.tools-banner-evalz {
	position: absolute;
	width: 40%;
	margin-right: 25px;
	text-align: right;
}

.carousel-item img {
    max-height: 70vh;
    object-fit: cover;
}