/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-92 {
        padding: var(--sectionPadding);
        background: var(--primaryLight2);
    }
    #sbsr-92 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-92 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 39.375rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-92 .cs-text {
        max-width: 35.125rem;
        margin-bottom: 1rem;
    }
    #sbsr-92 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-92 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-92 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-92 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-92 .cs-picture {
        width: 90%;
        /* pushes down the by the same amount as the yellow circle overflows the container */
        /* 40px -88px */
        margin: 0 0 2.75rem clamp(2.5rem, 6.9vw, 5.5rem);
        position: relative;
        display: block;
        /* width divided by height */
        aspect-ratio: 1.30909091;
    }
    #sbsr-92 .cs-picture:before {
        /* yellow circle */
        content: "";
        width: 13.5625rem;
        height: 13.5625rem;
        background: var(--primaryLight);
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        bottom: -2.75rem;
        /* wrapped in a clamp so we can have a negative clamp */
        left: calc(clamp(2.5rem, 5.9vw + 1rem, 5.5rem) * -1);
    }
    #sbsr-92 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-92 {
        overflow: visible;
    }
    #sbsr-92 .cs-container {
        max-width: 80rem;
        justify-content: space-between;
        align-items: center;
        /* set flexbox back to the row orientation */
        flex-direction: row;
    }
    #sbsr-92 .cs-picture {
        /* 300px - 455px */
        width: clamp(18.75rem, 42.5vw, 28.4375rem);
        height: 17.625rem;
        /* prevent flexbox from squishing it */
        flex: none;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}
/* Clouds */
.cs-content {
    position: relative;
    text-align: center;
    overflow: hidden; /* hides clouds drifting off screen */
}

/* Cloud container */
.css-clouds {
    position: relative;
    height: 80px;
    margin-bottom: 15px;
}

/* Base cloud shape */
.cloud {
    position: absolute;
    background: #fff;
    border-radius: 50px;
    width: 80px;
    height: 45px;
    opacity: 0.9;
    box-shadow:
        25px 10px 0 -5px #fff,
        50px 5px 0 -5px #fff,
        70px 10px 0 -5px #fff;
    animation: drift 30s linear infinite;
}

/* Different starting points for realism */
.cloud1 {
    top: -175px;
    left: -120px;
    transform: scale(1.8);
    animation-delay: 0s;
}

.cloud2 {
    top: -150px;
    left: -200px;
    transform: scale(1.5);
    animation-delay: 10s;
    animation-duration: 35s;
}

.cloud3 {
    top: -200px;
    left: -250px;
    transform: scale(2);
    animation-delay: 20s;
    animation-duration: 40s;
}

/* Drifting animation */
@keyframes drift {
    0% {
        transform: translateX(-200px) scale(var(--scale, 2));
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(120vw) scale(var(--scale, 2));
        opacity: 0.8;
    }
}

/* Optional subtle floating motion (adds realism) */
.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: -15px;
}

.cloud::before {
    left: 10px;
}

.cloud::after {
    right: 10px;
}
body,
html {
    overflow-x: hidden;
}
/* ☀️ Sun */
.sun {
    position: absolute;
    top: -250px;         /* move up or down relative to the clouds */
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at center, #FFD93D 60%, #FFC300 100%);
    border-radius: 50%;
    z-index: 0;          /* ensures clouds stay in front */
    box-shadow: 0 0 40px 10px rgba(255, 217, 61, 0.5);
    animation: pulse 6s ease-in-out infinite;
}

/* soft pulsing glow animation */
@keyframes pulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 40px 10px rgba(255, 217, 61, 0.5);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 0 60px 20px rgba(255, 217, 61, 0.4);
    }
}