:root {
            --light-blue: #99B7D1;
            --navy-blue: #002D62;
            --ivory: #fffff0;
            --golden-brown: #e1bf29;
            /* --golden-brown: #bf9e52; */
            --black: #000;
            --grey: #b9b9b9;
            --dark-grey: #585858;
            --light-grey: #f1f1f1;
            --red: #dc3545
      }
      * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
      }

      /* @media screen and (max-width: 750px ) { */
            
            section {
                  display: flex;
                  justify-content: center;
            }
            footer {
                  background-color: #bf9e52;
                  height: 100px;
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
            }
            .container {
                  max-width: 350px;
                  text-align: center;
                  width: 100%;
            }
            .overlay {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background-color: #414141;
                  opacity: 0.1;
                  z-index: 2;

            }
            .heading, .sub-heading, .heading3 {
                  color: #fff;
            }
            .heading, .sub-heading, .heading3, .heading2, .text, .light-text, .card .title, .card-text {
                  font-family: 'playfair display', serif;
                  max-width: 80vw;
                  font-stretch: 100%;
                  margin: auto;
            }
            .heading {
                  font-size: 35px;
            }
            .sub-heading {
                  font-size: 20px;
                  font-style: italic;
                  font-weight: bold;
                  color: var(--golden-brown);
                  margin-bottom: 24px;
            }
            .heading3 {
                  margin-bottom: 24px;
                  font-size: 23px;
            }
            .light-text {
                  font-size: 19px;
                  line-height: 26px;
                  color: var(--grey);
            }
            nav {
                  background-color: transparent;
                  max-height: 77px;
                  padding: 8px 16px;
                  display: flex;
                  position: fixed;
                  z-index: 1000;
                  width: 100%;
            }
            nav .nav-container {
                  display: flex;
                  justify-content: space-between;
                  width: 86vw;
                  margin: auto;
            }
            nav .nav-container a:hover {
                  transform: scale(0.90);
            }
            .logo {
                  height: 52px;
                  width: 57px;
                  margin: auto 0;
            }
            nav .burger {
                  width: fit-content;
                  align-self: center;
                  cursor: pointer;
                  border: none; 
                  background-color: transparent;
                  margin-right: 20px;

            }
            nav .burger .bar {

                  background-color: var(--navy-blue);
                  width: 30px;
                  height: 2px;
                  display: block;
                  margin: 5px 0;
                  border-radius: 999px;
                  transition: 0.8s;
            }
            .burger.active .bar {
                  background-color: var(--ivory);
            }
            .burger.active .bar:nth-child(1) {
                  transform: translateY(4px) rotate(-45deg);
            }
            .burger.active .bar:nth-child(2) {
                  opacity: 0;
            }
            .burger.active .bar:nth-child(3) {
                  transform: translateY(-9px) rotate(45deg);
            }
            nav .nav-menu {
                  position: absolute;
                  top: -500px;
                  right: 0;
                  flex-direction: column;
                  width: 100vw;
                  align-items: center;
                  justify-content: center;
                  opacity: 0.5;
                  padding: 65px 0 20px;
                  display: flex;
                  transition: ease-in-out 0.8s;
                  background-color: var(--black);
            }
            nav .nav-menu.active {
                  top: -4vh;
            }
            nav .nav-option {
                  list-style: none;
                  padding: 8px;
                  opacity: 1;
            }
            nav .nav-link {
                  text-decoration: none;
                  color: var(--ivory) ;
            }
            section#login {
                  flex-direction: column;
                  margin: 0;
            }
            #login input::placeholder {
                  color: var(--black);
                  opacity: 0.7;
            }
            #login input {
                  width: 77%;
            }

            #login .logo {
                  margin: 0;
            }
            #login .btn {
                  display: inline;
                  width: fit-content;
                  padding: 7px 16px;
                  background-color: transparent;
            }
            #login .btn i {
                  font-size: large;
            }
            #login #passcode {
                  padding: 16px;
                  border-bottom: 2px solid var(--ivory);
            }
            #login .container {
                  margin: auto;
                  transform: translateY(-50%);
            }
            .login-container {
                  height: 15vh;
                  width: 70%;
                  display: flex;
                  flex-direction: column;
                  /* align-items: center; */
                  justify-content: center;
                  margin: auto;                  
            }
            .incorrect-password {
                  color: var(--red);
                  opacity: 0.9;
                  text-align: left;
                  margin-bottom: 15px;
                  visibility: hidden;
            }
            .incorrect-password.active {
                  visibility: visible;
            }
            #invite, #login {
                  position: relative;
                  background-image: url("images/TheStoryteller--44_websize.jpg");
                  background-size: 190%;
                  /* background-position: center; */
                  background-position-x: 51%;
                  background-position-y: 50%;
                  /* background-size: cover; */
                  /* background-position: center; */
                  min-height: 100vh;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-bottom: 64px;
            }
            #invite .content {
                  position: relative;
                  z-index: 4;
            }
            .fade-in-img { 
                  animation: fadeIn 5s;
            }
            @keyframes fadeIn {
                  0% { opacity: 0; }
                  100% { opacity: 1; }
                }
            .line-container {
                  text-align: center;
            }
            .line {
                  display: inline-block;
                  width: 200px;
                  height: 2px;
                  background-color: var(--golden-brown);
                  margin-top: 1rem;
                  margin-bottom: 2rem;
                  margin: 16px 0 32px;
            }
            #invite .heading {
                  margin-bottom: 40px;
            }
            #invite .sub-heading {
                  text-shadow: 0.25px 0.25px 1px var(--black); 


            }
            h3.heading3 {
                  color: var(--black);
                  margin-left: auto;
                  margin-right: auto;           
            }
            #intro .couple-container {
                  display: flex;
                  justify-content: space-evenly;
                  position: relative;
                  margin-bottom: 64px;
            }
            #intro .couple-img {
                  height: 161px;
                  width: 138px;
            }
            #intro img {
                  object-fit: cover;
                  height: 100%;
                  width: 100%;
            }
            #intro .groom {
                  margin-left: 32px;
            }
            #intro .heart {
                  position: absolute;
                  color: var(--golden-brown);
                  font-size: 80px;
                  font-weight: 400;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
            }
            /* #text-section, #rsvp, #food */
            .bg-img {
                  position: relative;
                  padding: 48px 0;
                  background-image: url("images/bg-gifts.jpg");
                  background-size: cover;
                  background-position:center;
                  margin-bottom: 75px;
            }
            .bg-img.solo {
                  height: 100vh;
            }
            .overlay + .bg-container{
                  transform: none;
            }
            .bg-container {
                  background-color: var(--ivory);
                  padding: 32px;
                  z-index: 4;
                  transform: translateY(-15%);
            }
            /* #slider-section {
                  height: 100vh;
                  background-color: var(--ivory);
                  position: relative;
                  padding: 48px 0;
                  margin-bottom: 75px;

            } */
            .bg-section {
                  height: 100vh;
                  background-color: var(--ivory);
                  display: flex;
                  align-items: center;

            }
            #text-section .line {
                  margin-top: 0;
            }

            #text-section .heading2 {
                  font-size: 35px;
                  line-height: 49px;
                  margin-bottom: 48px;
            }
            #text-section .text {
                  font-size: 23px;
                  line-height: 32px;
                  margin-bottom: 24px;
            }
            #text-section .light-text {
                  margin-bottom: 24px;
            }
            /* #features  */
            .icon {
                  font-size: 48px;
                  color: var(--golden-brown);
                  margin-bottom: 32px;
            }
            #features .container {
                  width: 100%;
            }
            .cards-container {
                  width: 100%;
                  padding: 15px;

            }
            .card {
                  width: 100%;
                  margin-bottom:32px;
                  border: 1px solid #f1f1f1;

            }
            .card .card-text {
                  margin: 0 auto;
                  padding: 32px 32px 0;
            }
            .card .title {
                  font-size: 18.75px;
                  margin-bottom: 16px;
            }
            #features .card .light-text {
                  margin-bottom: 24px;
                  font-size: 16px;
                  font-stretch: 100%;
                  font-family: "merriweather", serif;
                  color: var(--dark-grey);
            }
            .card .card-image {
                  background-size: cover;
                  width: 100%;
                  height: 208px;
            }
            .ceremony .card-image {
                  background-image: url(images/rings.jpg);
                  background-size: 130%;
                  background-position: center;
            }
            .dinner .card-image {
                  background-image: url(images/windsor_path.jpg);
                  background-position-x: center;
            }
            .form-holder {
                  position: relative;
            }
            #rsvp {
                  margin-bottom: 0;
            }
            #rsvp .heading {
                  color: var(--black);
                  margin-bottom: 24px;
            }
            #rsvp .line {
                  margin-bottom: 16px;
            }

            form fieldset {
                  border: none;
            }
            form input, form textarea, form label, form button, a {
                  font-family: 'playfair display', serif;
                  font-size: 14px;
                  font-stretch: 100%;
            }
            form input, form textarea, form label {
                  color: var(--black);
                  line-height: normal;
            }
            form input, form textarea {
                  padding: 16px 16px 16px 0;
                  margin-bottom: 32px;
                  border: 0px;
                  border-bottom: 5px solid #f1f1f1;
                  background-color: transparent;
                  width: 100%;
            }
            form textarea {
                  height: 100px;
            }
            form textarea:focus, form input:focus{
                  outline: none;
              }
            /* form button, #not_attend_message a  */
            .btn {
                  display: inline-block;
                  text-decoration: none;
                  background-color: var(--navy-blue);
                  padding: 13px 32px;
                  line-height: 20.5px;
                  font-weight: 700;
                  color: #fff;
                  border: none;
                  border-radius: 3px;
                  text-transform: capitalize;
            }
            .btn:hover {
                  transform: scale(0.95);
                  transform: 0.8s;
            }
            .btn-container {
                  margin-top: 30px;
              }
            form .checkbox-holder {
                  display: flex;
                  justify-content: start;
                  flex-direction: row;
                  column-gap: 12px;
                  margin-bottom: 10px;
                  padding: 8px;
                  border: 0.5px solid var(--ivory);
            }
            form .checkbox-holder label {
                  display: flex;
                  align-items: center;
            }
            form .checkbox-holder input {
                  margin-bottom: 0;
                  width: 1em;
                  margin-right: 10px;
                  display: inline-block;
                  vertical-align: middle;
            }
            form .checkbox-holder .checkbox-text {
                  vertical-align: middle;
            }
            form .checkbox-holder .checkbox-text em {
                  color: var(--dark-grey);

            }

            #food {
                  margin-bottom: 0;
            }

            #food .options-holder {
                  margin-bottom: 24px;
            }
            /* #food .checkbox-holder {
                  column-gap: 5px;
                  margin-bottom: 0;
            } */
            #food .heading {
                  margin-bottom: 48px;
                  color: var(--black);
            }
            #food .title {
                  margin-bottom: 5px;
            }
            /* #not_attend_message, #menu_confirmation, #already_registered {
                  height: 100vh;
                  background-color: var(--ivory);
                  display: flex;
                  align-items: center;
                  transform: translateY(-10%);

            } */
            #not_attend_message .title, #menu_confirmation .title, #already_registered .title {
                  margin-bottom: 48px;
            }
            #not_attend_confirmation .btn {
                  margin-bottom: 15px;
                  width: 100%;
            }
            /* #not_attend_message a, #menu_confirmation a {
                  text-decoration: none;
                  display: inline-block;
                  margin-top: 48px;
            } */
            /* #not_attend_message .container {
                  margin-top: 22vh;
            } */
             .slider-container {
                  z-index: 4;
                  position: relative;
                  height: 45em;
                  width: 100vw;
             }
             .slider-track-holder {
                  height: 100%;
                  width: 85vw;
                  position: absolute;
                  left: 50vw;
                  transform: translateX(-50%);
                  max-width: 740px;
                  border-radius: 14em 14em 0 0;
                  overflow: hidden;
             }
             .slider-track {
                  height: 100%;
                  transition: 0.8s;
                  display: flex;
                  /* border-radius: 150px 150px 0 0; */
             }
             /* .slider-form {
                  border-radius: 150px 150px 0 0;
                  overflow: hidden;
                  width: 100%;
             } */
            .slide-holder {
                  padding-right: 15px;
            }

             .slide-holder img {
                  width: 85vw;
                  height: 45em;
                  /* border-radius: 3px; */
                  border-radius: 14em 14em 3px 3px;
             }
             .slide-holder .slide-img {
                  width: 100%;
                  height: 100%;
                  /* box-shadow: 5px 10px 20px 0px var(--ivory);  */
                  background-image: url(images/invitation1.jpg);
                  background-position-x: 50%;
                  background-position-y: 50%;
                  background-size: 100%;
                  background-repeat: no-repeat;
             }
            .slider-btn {
                  position: absolute;
                  background-color: transparent;
                  font-size: 32px;
                  border: none;
                  top: 50%;
                  transform: translateY(-50%);
                  color: var(--navy-blue);
                  transition: opacity 0.15s ease-in, scale 0.15s ease-in;
            }
            .slider-btn .fa-solid:hover {
                  opacity: 0.5;
                  transform: scale(0.96);
                  cursor: pointer;
            }
            .slider-btn-left {
                  left: 3%;
            }
            .slider-btn-right {
                  right: 3%;
            }
            .fa-solid, .fas { 
                  opacity: 1;
            }
      /* } */
      @media (min-width:480px) { 
            #invite, #login {
                  background-position-y: 44%;
                  background-size: 120%;
            }
            .slider-track-holder {
                  border-radius: 0;
            }
            .slide-holder img {
                  object-fit: contain;
                  border-radius: 0;
            }
            .bg-container {
                  transform: none;
            }

      }
      @media (min-width:950px) { 
            nav {
                  width: 100%;
            }
            nav .nav-container {
                  width: 60vw;
                  margin: auto;
            }
            .container {
                  width: 85vw;
            }
            #invite, #login {
                  background-size: 100%;
                  background-position-y: 42%;
                  min-height: 65vh;
                  /* background-image: url(images/TheStoryteller--95_websize.jpg); */
            }
            #invite .overlay {
                  display: none;
            }
            .slider-container {
                  height: 50em;
            }
            .slider-track-holder {
                  left: 50vw;
                  /* background-color: pink; */
                  /* overflow: visible; */
                  max-width: 382px;
            }
            .slide-holder img {
                  height: 50em;
                  width: auto;
            }
            #features {
                  margin-bottom: 75px;
            }
            #features .container {
                  width: 85vw;
            }
            .cards-container {
                  display: grid;
                  grid-template-columns: 365px 365px;
                  justify-content: center;
                  gap: 125px;
            }
            .card {
                  margin-bottom: unset;
            }

       }