.roi-rsvp-button {
  background-color: #cca351; 
  color: #fff; 
  border-radius: 50px; 
  padding: 14px 30px;
  font-size: 16px; 
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px; 
  border: none; 
  cursor: pointer;
  outline: none; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-in-out; 
}


.roi-rsvp-button:hover {
  background-color: #b89249; 
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); 
  transform: translateY(-2px); 
}


.roi-rsvp-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
}

/* General styling for the section */
        

        /* Styles for the responsive portrait video container */
        .video-container-portrait {
            position: relative;
            /* This padding-top percentage creates the 9:16 aspect ratio */
            padding-top: 77.77%; 
            height: 0;
            overflow: hidden;
            max-width: 100%;
            border-radius: 25px; /* Optional: for rounded corners */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow */
            height: 550px;
            max-width: 311px;
        }

        /* Style for the iframe itself */
        .video-container-portrait iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* You can keep your existing styles for titles, etc. */
        .section-title h2 {
            font-size: 3rem;
        }

        .padding-bottom-50 {
          padding-bottom: 100px;
        }

        .padding-top-100{
          padding-top: 35px;
        }


        @media (max-width: 768px){
          .mpb-10 {
            padding-bottom: 10px;
          }
        }