/* Mobile Responsiveness */
@media (max-width: 480px) {
    .date-flex-row {
        gap: 8px;
        /* Reduce gap on small screens */
    }

    .line-box {
        font-size: 10px;
        padding: 4px 0;
        border-width: 1px;
    }

    .day-number {
        font-size: 40px;
    }

    .month-text,
    .year-text {
        font-size: 14px;
    }

    .sp-time h2 {
        font-size: 30px;
    }

    .sp-time .row .sp-title {
        width: auto;
    }

    .sp-banner .sp-box {
        width: 100%;
        height: auto;
        transform-origin: top;
    }

    .sp-title .sp_box {
        padding: 0 25px;
    }

    .rsvp h2 {
        font-size: 140px;
    }

    footer ul {
        justify-content: center;
    }

    .sp-form {
        width: 100%;
    }

    .sp-form form {
        padding: 15px;
    }

    .sp-rsvp .sp-rsbp_box .sp_content img {
        width: 95px;
        margin: 60px auto 15px;
    }

    .sp-rsvp .sp-rsbp_box .sp_content {
        width: 85%;
    }

    .sp-rsvp .sp-rsbp_box .sp_content .sp_box {
        padding: 10px 10px 50px;
    }

    .sp-rsvp .sp-rsbp_box .sp_content .sp_box h2 {
        font-size: 20px;
        line-height: 25px;
    }

    .sp-rsvp .sp-rsbp_box .sp_content .sp_box p {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 20px;
    }

    .sp-rsvp .sp-rsbp_box .sp-btn2,
    .sp-rsvp .sp-rsbp_box .sp-btn {
        padding: 7px 10px 7px 17px;
    }

    .sp-rsvp .sp-rsbp_box .sp_content .sp_box {
        box-shadow: -5px 5px 0px 0px #12274e;
    }

    .sp-banner .sp-box .sp-sperkle1 {
        width: 67px;
        position: absolute;
        top: 34px;
        left: 10px;
    }

    .sp-banner .sp-box .sp-sperkle2 {
        width: 75px;
        position: absolute;
        top: 275px;
        left: 70px;
    }

    .sp-banner .sp-box .sp-sperkle3 {
        width: 70px;
        position: absolute;
        top: 195px;
        left: 230px;
    }

    .sp-banner .sp-box {
        padding: 180px 0 0;
    }

    .sp-nm {
        font-size: 50px;
        line-height: 52px;
        margin-top: 15px;
    }

    .sp-nm span {
        font-size: 15px;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .sp-venue-box .sp_day,
    .sp-venue-box .sp_time,
    .sp-venue-box .sp_date {
        font-size: 20px;
    }

    .sp-venue-box .sp_date span {
        font-size: 35px;
    }

    .sp-venue-box {
        margin-top: 25px;
        margin-right: 0;
    }

    .sp-place {
        font-size: 18px;
        margin-left: 0;
        margin-top: 15px;
    }

    .sp-butterfly1-wrapper {
        top: 130px;
        left: 50px;
    }

    .sp-butterfly2-wrapper {
        top: 110px;
        left: 275px;
    }

    .sp-map-btn a {
        padding: 10px 20px 7px;
        font-size: 19px;
    }

    .sp-map-btn {
        margin: 10px 0 0 0;
    }

    .sp-r img {
        width: 50px;
    }

    .sp-r {
        position: absolute;
        top: 140px;
        left: 88px;
    }

    .sp-s img {
        width: 100px;
    }

    .sp-s {
        position: absolute;
        top: 120px;
        right: 80px;
    }

    .sp-v img {
        width: 90px;
    }

    .sp-v {
        position: absolute;
        top: 270px;
        left: 87px;
    }

    .sp-p img {
        width: 90px;
    }

    .sp-p {
        position: absolute;
        top: 265px;
        right: 120px;
    }

    .sp-banner .row {
        min-height: auto;
    }

    .sp-logo img {
        width: 230px;
    }

    .sp_venue {
        width: 100%;
    }

    .sp-r .sp_gif {
        left: -26px;
        top: -20px;
    }

    .sp-s .sp_gif {
        right: 33px;
        top: 0;
    }

    .sp-v .sp_gif {
        left: -15px;
        top: 11px;
    }

    .sp-p .sp_gif {
    }

    .sp-logo {
        margin-bottom: 10px;
    }
}