@font-face {
    font-family: 'Nimbus';
    src: url('fonts/NimbusSanL-Reg.otf');
}
body{font-family: 'Nimbus', sans-serif; margin:0px;}
body img{width:auto; max-width:100%;}
.video_layer{position: absolute;top: 20px;right: 20px;background-color: white;padding: 20px;border-radius: 50%; }

.brand-banner{position:relative; height:100px; width:100%;overflow:hidden;}
.brand-banner .image{top:0px;}
.image {position: absolute; left: 0;width: 100%; object-fit: cover; animation: scroll 10s linear infinite;}
.image2{left:100%;}
@keyframes scroll {from {transform: translateX(0%);}to {transform: translateX(-100%);}}

.grid-container {display: grid;grid-template-columns: 33% 66%;grid-template-rows: auto auto;gap: 0px; padding: 0px; padding:150px 0}
.grid-container div{width:100%;}
.item1 {grid-column: 1;grid-row: 1;}
.item2 {grid-column: 2;grid-row: 1;}
.item3 {grid-column: 1;grid-row: 2;}
.item4 {grid-column: 2;grid-row: 2;}

.location-section { background-color: #ffdaed; width:100%; overflow:hidden;}
.location-sidebar { font-size: 130px; line-height: 1; text-align: right; }
.location-details { font-size: 180px; line-height: 194px; }


.event-landing { background-color: #fff; display: flex; flex-direction: column; align-items: center; }
.hero-animation { display: flex; height: 100%; width: 100%; }
/* .brand-banner { background-color: #07ff72; padding: 36px 0; } */
.main-content { background-color: #fff; max-width: 1440px; padding: 97px 97px 0; color: #000; font-size: 51px; }
.event-description { margin-top: 102px; }
.rsvp-section { background-color: #07ff72; padding: 87px 0px; width:100%; max-width:100%}
.rsvp-container { max-width: 1440px; width: 100%; margin: 0 auto; background-color: #07ff72;}
.rsvp-header { display: flex; align-items: flex-end; flex-wrap: wrap; }
.rsvp-title { font-size: 200px; line-height: 179px; width: auto; }
.rsvp-deadline { font-size: 92px; line-height: 1; }
.form-container { width: 727px; max-width: 100%; margin-top: 126px; font-size: 28px; }
.form-input { border-radius: 72px; background-color: #fff; min-height: 86px; padding: 27px 57px; margin-top: 32px; width: 100%; }
.form-input:first-child { margin-top: 0; }
.checkbox-group { display: flex; align-items: center; gap: 19px; margin-top: 32px; }
.checkbox { border-radius: 72px; background-color: #fff; width: 60px; height: 61px; }
.consent-text { font-size: 20px; margin-top: 32px; }
.submit-button { background-color: #000; color: #fff; border-radius: 72px; padding: 28px 48px; margin-top: 35px; width: 385px; max-width: 100%; text-align: center; }
.features-section { background-color: #fff; padding: 108px 97px; }
.features-title { font-size: 200px; line-height: 1; }
.features-description { font-size: 51px; margin-top: 102px; }
.dress-code { background-color: #000; color: #fff; padding: 103px 97px; font-size: 51px; }
.footer-message { background-color: #fff; padding: 109px 97px; font-size: 200px; }
.footer-banner { /*background-color: #ffdaed; padding: 36px 0; */height:100px;position:relative; width:100%; overflow:hidden;}
.footer-banner .image{bottom:0px;}

@media (max-width: 1440px) {
    #toggleSoundButton{width:50px;}
    .brand-banner, .footer-banner{height:100px}

    /* big font*/
    .footer-message, .location-details, .rsvp-title,.features-title{font-size:150px; line-height:150px}
}

@media (max-width: 1280px) {
    #toggleSoundButton{width:40px;}
    .brand-banner, .footer-banner{height:90px}

    /* big font*/
    .footer-message, .location-details, .rsvp-title,.features-title{font-size:120px;line-height:120px}

    #cookie-notice span{margin-top:0px; margin-bottom:5px;}
}

@media (max-width: 991px) {
    #toggleSoundButton{width:40px;}
    .brand-banner, .footer-banner{height:70px}
    .event-description{margin-top:32px;}

    /* big font*/
    .footer-message, .location-details, .rsvp-title,.features-title{font-size:100px;line-height:100px}

    /* medium font */
    .location-sidebar{font-size:90px}
}

@media (max-width: 768px) {
    #toggleSoundButton{width:20px;}
    .video_layer{padding:10px;}
    .brand-banner, .footer-banner{height:40px;}
	.main-content, .features-section, .dress-code, .footer-message { padding-left:15px; padding-right:15px;}
	.features-description{margin-top:20px;}

    /* big font*/
    .footer-message, .rsvp-title, .features-title{font-size:60px; line-height:60px}

    /* medium font */
    .location-sidebar, .rsvp-deadline, .location-details{font-size:40px; line-height:50px;}

	/* small font*/
	.features-description, .dress-code, .main-content{font-size:32px;}
    .dress-code{line-height:48px;}
}