/* ===== sx-rainbow - full bleed, responsive hero ===== */
.sx-rainbow-container,
.sx-rainbow-container * {
    box-sizing: border-box;
}

.sx-rainbow-container {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden;
    background: transparent;
}

.sx-rainbow-row,
.sx-rainbow-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.sx-rainbow-hide {
    display: none !important;
}

.sx-rainbow-banner {
    position: relative;
    width: 100%;
    display: block;
    line-height: 0;
    overflow: hidden;
    background: linear-gradient(90deg, #fff9d7 0%, #fff2a0 45%, #fff056 100%);
}

.sx-rainbow-img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: bottom;
    object-fit: cover;
    max-height: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* TITLE — Luckiest Guy */
.sx-rainbow-title {
    position: absolute;
    top: 1%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    width: max-content;
    max-width: 90%;
    text-align: center;
    font-family: 'Luckiest Guy', cursive;
    font-size: 2rem;
    color: #0f1446;
    -webkit-text-stroke: 2px #0f1446;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
}

/* BUTTON — Poppins */
.sx-rainbow-btn {
    position: absolute;
    bottom: 6%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    width: max-content;
    max-width: 80%;
    text-align: center;
    background-color: #FFE600;
    color: #111;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    padding: 38px 60px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    box-shadow: 0 5px 0px rgba(0,0,0,0.35);
    box-sizing: border-box;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    .sx-rainbow-btn:hover,
    .sx-rainbow-btn:focus {
        box-shadow: 0 3px 0px rgba(0,0,0,0.35);
        transform: translateY(2px);
        outline: none;
        color: #111;
        text-decoration: none;
    }

/* TABLET — title only */
@media (max-width: 1024px) {
    .sx-rainbow-title {
        font-size: 1.5rem;
        -webkit-text-stroke: 1.5px #0f1446;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    .sx-rainbow-title {
        font-size: 0.7rem;
        -webkit-text-stroke: 1px #0f1446;
        top: 1%;
    }

    .sx-rainbow-btn {
        font-size: 0.9rem;
        padding: 10px 28px;
        border-width: 0;
        bottom: 8%;
    }
}

/* LARGE DESKTOP */
@media (min-width: 1200px) {
    .sx-rainbow-title {
        font-size: 2.4rem;
    }

    .sx-rainbow-btn {
        font-size: 2.2rem;
        padding: 42px 70px;
        border-radius: 50px;
    }
}

.sx-rainbow-btn {
    display: none !important;
}

/* Spacing — applies to ALL banners, reliable regardless of what's between them */
.sx-rainbow-container {
    margin-top: 48px !important;
}

/* Title above image — override absolute positioning */
.sx-rainbow-banner {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
    overflow: hidden;
}

.sx-rainbow-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1;
    padding: 20px 16px 10px !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    font-size: 2.5rem;
}

.sx-rainbow-img {
    order: 2;
    width: 100% !important;
}

/* If title is empty, collapse it */
.sx-rainbow-title:empty,
.sx-rainbow-title:-moz-only-whitespace {
    padding: 0 !important;
    min-height: 0 !important;
}

@media (max-width: 1024px) {
    .sx-rainbow-title {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 600px) {
    .sx-rainbow-title {
        font-size: 1.3rem !important;
        padding: 12px 8px 6px !important;
    }

    .sx-rainbow-container {
        margin-top: 24px !important;
    }
}

/* Remove background from title area — only show it behind the image */
.sx-rainbow-banner {
    background: transparent !important;
}

/* Bigger title */
.sx-rainbow-title {
    font-size: 3rem !important;
    padding: 24px 16px 16px !important;
}

@media (max-width: 1024px) {
    .sx-rainbow-title {
        font-size: 2.2rem !important;
    }
}

@media (max-width: 600px) {
    .sx-rainbow-title {
        font-size: 1.5rem !important;
        padding: 14px 8px 10px !important;
    }
}