/* 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: 300px;
        height: 400px;
    }
    .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: 100%;
        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;
	}
}