body {
    margin: 0;
    padding: 0;
    overflow-x:hidden;
    color: white;
    text-align: center;
    min-height: 100lvh;
}

/* Hamburger button */
.hamburger-btn {
    /* font-size: 24px; */
    background: rgb(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    padding: 10px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10;
    border-radius: 8px;
}

/* Side menu */
.side-menu {
    position: fixed;
    top: 0;
    left: -250px; /* Initially hidden off-screen */
    width: 250px;
    height: 100%;
    background-color: white;
    color: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    transition: 0.3s; /* Smooth sliding effect */
    padding-top: 60px;
    z-index: 1000;
}

.side-menu ul {
    list-style: none;
    padding: 0;
}

.side-menu ul li {
    padding: 0 10px;
    text-align: left;
}

.side-menu ul li a {
    color: #b77e1c;
    text-decoration: none;
    display: block;
    padding: 10px;
}

.side-menu ul li:has(button) a {
    color: initial;  /* Reset the color */
    text-decoration: none;  /* Keep the text-decoration as none or reset */
    padding: 0;  /* Reset padding */
}

.side-menu ul li a:hover {
    background-color: #e4b35d;
    transition: 0.3s;
    border-radius: 8px;
}

.side-menu ul li button {
    width: 100%;
    color: #b77e1c;
    border-color: #b77e1c;
}

.side-menu ul li button:hover {
    color: #865b11;
    border-color: #865b11;
    background-color: #e4b35d;
}

/* Close button */
.close-btn {
    font-size: 24px;
    background: none;
    border: none;
    color: #b77e1c;
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px;
}

/* Active menu class */
.side-menu.active {
    left: 0; /* Slide into view */
}

h1 {
    font-style: italic;
}

h1, h2, h3, h4, li a {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

p {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}


.height {
    height: 10px;
}

.row {
    width: 100lvw;
    margin: 0;
    padding: 0;
}

  
/* .row {
    height: 100lvh;
    width: 100vw;
    margin: 0;
    padding: 0;
} */

#main {
    background-image: url(../images/proposal_lisbon.jpg);
    background-size: cover;
    background-position: bottom;
    /* width: 100vw; */
}

.cover {
    background: rgba(0, 0, 0, 0.15); /* Dark overlay, adjust the opacity as needed */
}


.cover img {
    position: absolute;
    /* width: 100lvw; /* Full width of the viewport */
    height: 100lvh; /* Full height of the viewport */
    object-fit: cover; /* Ensures proportions are maintained while filling the viewport */
    object-position: bottom; /* Ensures the top of the image is prioritized */
    padding: 0;
    margin: 0;
    z-index: -1;
}

.cover .title {
    margin-top: auto;
    color: white;
}

div.center {
    width: 40%;
    margin: auto;
}

div.overlay {
    background: rgba(0, 0, 0, 0.3);
    align-content: center;
    /* height: 100lvh; */
}

.date, .schedule {
    color: black;
}

.date {
    padding: 10px;
    background-color:rgb(221, 239, 255);
    margin: auto;
    border-radius: 5px;
    width: 100lvw;
    /* margin-top: 20px; */
    z-index: -1;
}

.date div {
    margin: auto;
}

.date div img {
    height: 60lvh;
    width: auto;
}

div.day {
    border-top: 1px black solid ;
}


/* Schedule */

.schedule-arrows {
    min-height: 100lvh;
    width: 100lvw;
    align-items: center;
    padding: 10px;
}

.schedule-arrows .col-md-1 {
    /* height: 100%; */
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-shrink: 0;
}

.schedule-arrows .col-md-1:hover {
    /* height: 100%; */
    cursor: pointer;
}


.arrow {
    border: solid #b77e1c;
    border-width: 0 3px 3px 0;
    display: inline-block;
    /* padding: 3px; */
    height: 40px;
    width: 40px;
    margin: auto;
    text-align: center;
    justify-content: center;
    /* z-index: 200; */
    /* z-index: 200; */
}


.arrow:hover {
    border: solid #865b11;
    border-width: 0 3px 3px 0;
}



.right {
    margin: auto;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);}

.left {
    margin: auto;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

 .faded{
    align-self: stretch;
    display: flex;
    width: 60px;
    z-index: 2;
}

.fade-left {
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255, 0) 100%);
    margin-right: -60px;
}

.fade-right {
    background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255, 0) 100%);
    margin-left: -60px;
}

/* .arrow-right {
    margin-left: -100px;
    background: linear-gradient(to left, rgba(251,251,251,1) 0%, rgba(251,251,251, 0) 100%);
} */

/* .right {
    position: absolute;
    left: calc(92% - 20px);
    top: calc(50% - 20px);
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    position: absolute;
    left: calc(8% - 20px);
    top: calc(50% - 20px);
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
} */

.schedule {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    width: 100%;
    margin: auto;

    /* drag and scroll */
    /* touch-action: none; */
    /* user-select: none; */
    /* z-index:  5; */
    /* maybe remove scroll-behavior smooth? */
}

.schedule .event {
    flex: 0 0 auto; /* Prevent columns from shrinking */
    box-sizing: border-box; /* Include padding and border in width */
    max-width: 100%; /* Ensure it doesn’t exceed the container */
}

.first-schedule-event {
    border-left: #b77e1c 1px solid;
}


.schedule .event .row {
    border-right: #b77e1c 1px solid;
    height: 100%;
    overflow: hidden; /* Prevent text overflow */
    box-sizing: border-box; /* Include padding and border in dimensions */
    padding: 10px;
    width: 100%;
    text-align: left;
    /* white-space: initial; */
    white-space: nowrap;
    flex: 0 0 auto; /* Prevent columns from shrinking */
    min-width: none;
}

.schedule .event .row .col-md-8 {
    white-space: initial;
}


.schedule .event .row h4,
.schedule .event .row p,
.schedule .event .row a {
    word-wrap: break-word; /* Break long text */
    overflow-wrap: break-word; /* Ensure text wraps inside container */
}

.schedule .event div div img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.schedule .event div div a, .schedule .event div div a:hover {
    color: #b77e1c;
}

/* FAQ */

#faq-title { 
    color: black;
    text-align: center;
    padding: 30px;
}

.accordion, .accordion-button, .accordion-body {
    background-color: rgb(221, 239, 255);
    text-align: left;
}

.accordion-button:hover {
    background-color: #cfe2ff;
}

.accordion {
    margin-top: 10px;
    padding: 30px 10px 30px 10px;
}

.accordion-body {
    font-style: italic;
}

/* story */

.story-background {
    background-color: rgb(221, 239, 255);
}

.story {
    color: black;
    height: fit-content;
    width: 100%;
    /* margin: auto; */
    background-color: rgb(221, 239, 255);
    display: flex;
    align-items: stretch;
}

.full-screen-image {
    display: flex;
}

.story .text {
    padding: 20px;
    width: 40%;
    margin: auto;
}

.story .image {
    padding: 0;
}

.story .image div {
    height: 100%;
    margin: auto;
}

.story .image div img {
    width: 100%;
    height: auto;
    /* max-height: 100lvh; */
    object-position: top; /* Ensures the top of the image is prioritized */
    object-fit: cover;
}

/* tidbits */
.tidbits {
    /* margin: 20px; */
    color: black;
    margin: auto;
    width: 80%;
    padding: 20px;
}

.tidbit-text {
    align-content: center;
}

.tidbits .image {
    margin: auto;
}

.tidbits .image img {
    max-height: 100lvh;
    width: 100%;
    object-fit: cover;
}

.info {
    color: black;
    width: 80%;
    margin: auto;
}


.info-background {
    width: 100lvw;
    background-color: rgb(221, 239, 255);
    padding: 20px;
}

.info a, .info a:hover{
    color: #b77e1c;
}

.info div {
    margin: auto;
    height: 100%;
    padding: 10px;   
    /* height: 250px; */
}

.info h4 {
    margin-bottom: 30px;
}

#hotels {
    border-bottom: #b77e1c 1px solid;
    border-top: #b77e1c 1px solid;

}

#uber {
    margin: 0px;
}

/* rsvp */

.rsvp {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100lvh;
    color: black;
    margin: 20px;
}

.rsvp .row {
    width: 100%;
    margin: 10px 0px;
}


form {
    margin: auto;
    width: 50%;
    height: 100%;
    text-align: center;
}

input {
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 5px;
}

input:active {
    border-top: none;
    border-left: none;
    border-right: none;
}

form button {
    width: 50%;
    color: black;
    border-color: #b77e1c;
    background-color: #e4b35d;
    transition: 0.3s;
}

form button:hover {
    color: #865b11;
    border-color: #865b11;
    background-color: #e4b35d;
}

.code {
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100lvh;
    width: 100lvw;
    margin: auto;
}

.code .row {
    margin-top: 10lvh;
}

.code .text {
    margin: auto;
    align-items: right;
    text-align: center;
    width: 30%;
    height: 35lvh;
    position: relative;
}

.code img {
    /* position: absolute; */
    /* z-index: -1; */
    height: 100lvh;
    width: 100%;
    object-fit: cover;
}

.code div input {
    border-radius: 20px;
    text-align: center;
}

.code div button {
    margin-top: 10px;
    color: #b77e1c;
    border-color: #b77e1c;
    background-color: #e4b35d;
    transition: 0.3s;
    color: white;
    height: 40px;
    border-radius: 20px;
    width: 100%;
}

.code div button p {
    margin: auto;
}

.code div button:hover {
    color: #865b11;
    border-color: #865b11;
    background-color: #e4b35d;
}

.login-img-container {
    padding-right: 0px;
}

.rsvp .submit-button {
    width: 100%;
    height: 40px;
    color: white;
    border-radius: 10px;
}

#rsvp-next {
    border-radius: 10px;
    border-color: #b77e1c;
    color: white;
    padding: 5px;
    width: 100%;
}

#rsvp-name-message {
    margin: 10px;
}

.rsvp #questions {
    visibility: hidden;
    transition: all 1s ease-in-out;
    max-height: 0; 
    overflow: hidden;
}

#relatedGuests-Names {
    justify-content: center;
    font-style: italic;
}

.rsvp [readonly] {
    border-bottom-color: rgba(118, 118, 118, 0.3);
    cursor: default;
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
}
.rsvp [readonly]:focus {
    outline: none;
}

.options {
    display: flex;
    gap: 10px; /* Adds space between buttons */
    justify-content: center; /* Centers the buttons horizontally */
  }
  
  .options button {
    padding: 10px 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    height: 100%;
    transition: background-color 0.3s;
    border-radius: 10px;
  }
  
  .options button:hover {
    background-color: #ddd;
  }


/* Responsive adjustments for different screen sizes if needed */


.thanks {
    color: black;
    margin: auto;
    flex-direction: column; /* Stack children vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100lvh;
    width: 60%;
}

.thanks a {
    text-decoration: none;
}

.thank div {
    width: 100%;
}

.success-btn-row {
    display: flex; 
    justify-content: center;
}

.success-btn {
    transition: 0.3s;
    margin: 10px 0px;
    width: 275px;
}

#formBtn {
    background-color: white;
    color: #b77e16; 
    border-color: #b77e16;
}

#returnBtn {
    color: #865b11;
    border-color: #865b11;
    background-color: #e4b35d;
}

#formBtn:hover, #returnBtn:hover {
    color: #614106;
    background-color: #b77e16;
    border-color: #614106;
}

#loadingScreen {
    width: 100lvw;
    height: 100lvh;
    z-index: 1000;
    background-color: white;
    margin: auto;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 75px;
    height: 75px;
    margin: auto;
    animation: spin 2s linear infinite;
    position: absolute;
    left: calc(50% - 38.5px);
    top: calc(50% - 38.5px);
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


.rsvpTitle {
    /* width: 80%; */
    margin: auto;
    border-bottom: #e4b35d 1px solid;
    margin-bottom: 20px;
}

.rsvpTitle p {
    width: 80%;
    margin: auto;
    padding: 10px;
}

.footer {
    width: 100lvw;
    background-color: rgb(221, 239, 255);
    padding-bottom: 20px;
}

.footer a button {
    color: #b77e1c;
    border: none;
    padding: 15px;
    border: #b77e1c 1px solid;

}

.footer a button:hover {
    background-color: #b77e1c;
    color: white;
}


@media (min-width: 750px) {
    div.overlay {
        /* background: rgba(0, 0, 0, 0.3);
        align-content: center; */
        height: 100lvh;
    }
}
/* Responsive layout for smaller screens */
@media (max-width: 1200px) {

    
    .cover img {
        position: absolute;
        /* width: 100lvw; /* Full width of the viewport */
        height: 100%; /* Full height of the viewport */
        object-fit: cover; /* Ensures proportions are maintained while filling the viewport */
        object-position: bottom; /* Ensures the top of the image is prioritized */
    }

    .code {
        background-color: black;
        color: white;
        /* display: flex; */
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: none;
        width: 100lvw;
        margin: auto;
        padding: 0;
    }

    .code-padding {
        display: none;
    }
    
    .code .text {
        margin: auto;
        align-items: normal;
        align-content: flex-end;
        text-align: center;
        width: 85lvw;
        height: 35lvh;
        
    }
    
    .code img {
        /* position: absolute; */
        /* z-index: -1; */
        width: 100lvw;
        height: auto;
        object-fit: cover;
        margin-top: -50px;
    }
}

@media (max-width: 768px) {
    .faded {
        display: none;
    }

    .story .text {
        padding: 20px;
        width: 90%;
        margin: auto;
    }

    .arrows {
        z-index: -1;
    }

    .schedule-arrow {
        min-height: none;
    }

    .schedule-arrows .col-md-1 {
        display: none;
    }

    .first-schedule-event {
        border-left: none;
    }
    
    .cover {
        background: rgba(0, 0, 0, 0.3); /* Dark overlay, adjust the opacity as needed */
    }
    

    .schedule {
        flex-direction: column; /* Stack events vertically */
        width: 100%;
    }
    .schedule .event {
        flex: 1 1 100%; /* Full width for each event */
        flex-direction: column; /* Stack image and text vertically */
        margin-top: 10px;
    }
    .schedule .event .row {
        flex-direction: column; /* Stack image and text vertically */
        align-items: center;
    }
    .schedule .event .row .col-md-4 {
        flex: 0 0 auto; /* Adjust image dimensions */
        width: 100%;
        height: auto;
    }
    .schedule .event div div img {
        width: 100%; /* Full width image */
        /* height: 50lvh; */
        height: auto;
        margin-bottom: 10px;
        /* object-position: top; */
    }
    .schedule .event .row .col-md-8 {
        flex: 1;
        text-align: center; /* Optional: Center-align text for smaller screens */
        padding: 10px 0;
    }

    .schedule .event .row {
        /* border-top: #b77e1c 1px solid; */
        border-top: none;
        border-bottom: #b77e1c 1px solid;
        border-left: none;
        border-right: none;
    }

    .info div {
        margin: auto;
        height: 100%;
        padding: 10px;   
        height: auto;
    }

    .story div img {
        min-height: 50lvh;
    }

    .rsvp {
        padding: 20px;
    }
    
    form {
        margin: auto;
        width: 80%;
        height: 100%;
    }

    form .row {
        padding: 20px;
    }

    .arrows {
        display: none;
    }

    .tidbits {
        padding: 0px;
        width: 100lvw;
    }

    .tidbits h4 {
        padding-top: 30px;
    }

    .tidbit-text {
        padding: 15px 30px;
    }

    .tidbits .image {
        padding: 0px;
    }

    .tidbits .height {
        height: 0px;
    }

    #tidbit-first-title {
        padding-top: 0px;
    }
}