: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, .countdown {
      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);
}
#flash-msg {
      padding: 1rem;
      margin-bottom: 1rem;
      border-width: 1px;
      border-style: solid;
      border-radius: 0.375rem;
}
.flash-success {
      color: #0c4128;
      background-color: #d1e7dd;
      border-color: #badbcc;
}
.flash-danger {
      color: #842029;
      background-color: #f8d7da;
      border-color: #f5c2c7;
}
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) ;
}
.background {
      height: 100vh;
      width: 100vw;
      opacity: 0.9;
}
.card .img-holder {
      height: 25vh;
}
#slider-section .background, #rsvp .background, #food .background {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #414141;
      z-index: 2;
}
.background img, .card .img-holder img{
      object-fit: cover;
      height: 100%;
      width: 100%;
}
#invite {
      margin-bottom: 64px;

}
.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%);
}
.bg-img {
      position: relative;
      padding: 48px 0;
      margin-bottom: 75px;
      height: 100vh;
}
#rsvp.bg-img, #food.bg-img {
      height: auto;
}
.bg-container {
      background-color: var(--ivory);
      padding: 32px;
      z-index: 4;
}
.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;
}

.form-holder {
      position: relative;
}
#rsvp {
      margin-bottom: 0;
      overflow: hidden;
}
#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;
}
#already_registered .btn {
      width: 100%;
      margin-bottom: 10px;
}
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 .heading {
      margin-bottom: 48px;
      color: var(--black);
}
#food .title {
      margin-bottom: 5px;
}
#not_attend_message .title, #menu_confirmation .title, #already_registered .title {
      margin-bottom: 48px;
}
#not_attend_confirmation .btn {
      margin-bottom: 15px;
      width: 100%;
}
.slider-container {
      z-index: 4;
      position: relative;
      height: 100%;
      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;
}
.slide-holder {
      padding-right: 15px;
}
.slide-holder img {
      width: 85vw;
      height: 100%;
      border-radius: 14em 14em 3px 3px;
      object-fit: contain;
}
.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) and (orientation:landscape){ 

      #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: 768px){
      .slide-holder img {
            border-radius: 25em 25em 3px 3px;
      }

}
@media (min-width: 768px) and (orientation: landscape){
      .bg-img {
            height: auto;
      }
      #intro {
            position: relative;
      }
      #intro .couple-container {
            position: static;
      }
      #intro img {
            height: 35vh;
            width: auto;
            max-width: 16vw;
            position: absolute;
            top: 1vh;
            border-radius: 5px;
      }
      #intro .couple-img.groom img {
            right: 15vw;
      }
      #intro .couple-img.bride img {
            left: 15vw;
      }
      #intro .heart {
            font-size: 7em;
            top: 28vh;
      }
}


@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;
      }
      #invite .overlay {
            display: none;
      }
      .slider-container {
            height: 50em;
      }
      .slider-track-holder {
            left: 50vw;
            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;
      }
}