/* 


.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: italic;
}
*/

html,
body {
  overflow-x: hidden;
  margin: 0;
  background-color: #8c0000;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 51px;
  line-height: 1.4;
}

h2 {
  font-family: "Merriweather", serif;
  font-size: 39px;
  line-height: 1.2;
  text-align: center;
  color: #8c0000;
}

h3 {
  font-family: "Merriweather", serif;
  font-size: 26px;
  line-height: 1.6;
}

h4 {
  font-family: "Merriweather", serif;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 400;
}

p {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

.headshot {
  max-width: 180px;
}

a,
.email-address {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

.revealUp1 {
  position: relative;
  transform: translateY(15px);
  opacity: 0;
  transition: 0.75s all ease-in-out;
  transition-delay: 0.25s;
}

.revealUp1.active {
  transform: translateY(0);
  opacity: 1;
}

.revealUp2 {
  position: relative;
  transform: translateY(15px);
  opacity: 0;
  transition: 0.75s all ease-in-out;
  transition-delay: 0.5s;
}

.revealUp2.active {
  transform: translateY(0);
  opacity: 1;
}

.revealUp3 {
  position: relative;
  transform: translateY(15px);
  opacity: 0;
  transition: 0.75s all ease-in-out;
  transition-delay: 0.75s;
}

.revealUp3.active {
  transform: translateY(0);
  opacity: 1;
}

.revealUp1Load {
  position: relative;
  transform: translateY(15px);
  opacity: 0;
  transition: 0.75s all ease-in-out;
  transition-delay: 0.25s;
}

.revealUp1Load.active {
  transform: translateY(0);
  opacity: 1;
}

.revealUp2Load {
  position: relative;
  transform: translateY(15px);
  opacity: 0;
  transition: 0.75s all ease-in-out;
  transition-delay: 0.5s;
}

.revealUp2Load.active {
  transform: translateY(0);
  opacity: 1;
}

.revealUp3Load {
  position: relative;
  transform: translateY(15px);
  opacity: 0;
  transition: 0.75s all ease-in-out;
  transition-delay: 0.75s;
}

.revealUp3Load.active {
  transform: translateY(0);
  opacity: 1;
}

.revealUp4 {
  position: relative;
  transform: translateY(15px);
  opacity: 0;
  transition: 0.75s all ease-in-out;
  transition-delay: 2s;
}

.revealUp4.active {
  transform: translateY(0);
  opacity: 1;
}

.revealFade {
  position: relative;
  opacity: 0;
  transition: 0.75s all ease-in-out;
  transition-delay: 0.25s;
}

.revealFade.active {
  opacity: 1;
}

button {
  padding: 15px 35px;
  background-color: #8c0000;
  border: 0px;
  border-radius: 15px;
  font-family: "Press Start 2P", system-ui;
  line-height: 1.8;
  text-align: center;
  color: #feeeee;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  cursor: pointer;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
}

button:hover {
  background-color: #f91710;
  color: #8c0000;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
}

.noDecoration {
  text-decoration: none;
  color: #8c0000;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
}

.noDecoration:hover {
  text-decoration: none;
  color: #f76c68;
}

.noDecoration2 {
  text-decoration: none;
  color: #feeeee;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
}

.noDecoration2:hover {
  text-decoration: none;
  color: #f76c68;
}

.vocab-item {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

/* Start Nav */

.topNav {
  display: grid;
  justify-content: center;
  background-color: #feeeee;
  align-items: center;
  height: 170px;
  z-index: 99;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "logo";
  padding: 30px 60px;
  margin: 15px 80px 0 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5); /* Right */
}

.topNav2 {
  display: grid;
  justify-content: center;
  background-color: #feeeee;
  align-items: center;
  height: 170px;
  z-index: 99;
  grid-template-columns: 40% 20% 20% 20%;
  grid-template-rows: 100%;
  grid-template-areas: "logo about faq button";
  padding: 30px 60px;
  margin: 15px 80px 0 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5); /* Right */
}

#navItem {
  font-size: 18px;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  align-content: center;
}

.navLogo {
  grid-area: logo;
  height: 100%;
  margin: 0;
  padding: 0;
}

.navAbout {
  grid-area: about;
  text-align: center !important;
  color: #8c0000;
}

.navFaq {
  grid-area: faq;
  text-align: center;
  color: #8c0000;
}

.navButton {
  grid-area: button;
  text-align: center;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
  display: block;
}

.logo {
  max-height: 100px;
  margin-left: auto;
  margin-right: auto;
}

.topNav .icon {
  display: none;
}

.mobileNav {
  display: none;
}

/* End Nav */

ul {
  margin-left: 60px;
  margin-right: 60px;
}

ol {
  margin-left: 60px;
  margin-right: 60px;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 1.4;
}

#headlineImage {
  max-width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.imageRight {
  max-width: 350px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  float: right;
  margin: 30px 0 30px 60px;
}

.imageLeft {
  max-width: 300px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  float: left;
  margin: 30px 60px 30px 0;
}

/* Progress bar css Start */

.progress-container {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  height: 20px;
  position: relative; /* Position relative for text centering */
}

.progress-bar {
  height: 100%;
  width: 50%; /* This will be updated by JS */
  background-color: #f76c68;
  transition: width 0.3s ease;
}

#progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #8c0000;
}

.progress-wrapper {
  text-align: center;
  align-items: center;
  gap: 10px; /* Space between "Course Progress" text and the bar */
}

/* Progress bar css end */

.hero {
  display: grid;
  background-color: #feeeee;
  position: relative;
  justify-content: center;
  grid-template-columns: 7% 35% 53% 7%;
  grid-template-rows: 45% 55%;
  grid-template-areas:
    "headline headline headline headline"
    ". image bullets .";
  column-gap: 24px;
  row-gap: 40px;
  padding: 30px 120px 120px 120px;
  margin: 0px 80px;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
    /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
}

.headline {
  grid-area: headline;
  text-align: center;
  margin: 0;
  padding: 0;
  color: #333333;
}

.headline h1 {
  color: #8c0000;
}

.bodyText h1 {
  color: #333333;
  text-align: center;
}

.image {
  grid-area: image;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bullets {
  grid-area: bullets;
  text-align: left;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ccc-hero {
  display: grid;
  background-color: #feeeee;
  position: relative;
  justify-content: center;
  row-gap: 15px;
  grid-template-areas:
    "headline"
    "video";
  padding: 30px 120px 60px 120px;
  margin: 0px 80px;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
    /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
}

.ccc-headline {
  grid-area: headline;
  text-align: center;
  margin: 0;
  padding: 0;
  color: #8c0000;
}

.ccc-headline h1 {
  font-size: 72px;
}

.ccc-headline h2 {
  color: #333;
  font-size: 48px;
  margin-top: 15px;
  font-family: "Montserrat", sans-serif;
}

/* .video-container {
  width: 50%;
  height: 50%;
  object-fit: cover;
  display: block;
} */

.video-container {
  position: relative;
  width: 100%; /* fill available width */
  height: auto; /* let height adjust naturally */
  overflow: hidden; /* crop any overflow */
  background-color: #000; /* fallback background color */
}

/* Core video scaling */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.body {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "text";
  column-gap: 24px;
  row-gap: 40px;
  padding: 0px 120px 90px 120px;
  margin: 0px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.bodyText {
  grid-area: text;
  text-align: left;
  color: #333333;
}

.VSLhero {
  display: grid;
  background-color: #feeeee;
  position: relative;
  justify-content: center;
  grid-template-columns: 7% 35% 53% 7%;
  /* grid-template-rows: 20% 65% 9% 6%; */
  grid-template-areas:
    "headline headline headline headline"
    ". vsl vsl ."
    ". link link ."
    ". transcript transcript .";
  column-gap: 24px;
  row-gap: 40px;
  padding: 30px 120px 90px 120px;
  margin: 0px 80px;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
    /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
}

.headline {
  grid-area: headline;
  text-align: center;
  margin: 0;
  padding: 0;
  color: #333333;
}

.vsl {
  grid-area: vsl;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%; /* Prevent container distortion */
  height: auto;
}

.vsl video {
  width: 100%;
  max-width: 800px;
  height: auto;
}

#playButton {
  all: unset; /* Resets all styles */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button#playButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vslLink {
  grid-area: link;
  text-align: center;
  font-family: "Merriweather", serif;
  font-size: 28px;
  line-height: 1.2;
}

.transcriptLink {
  grid-area: transcript;
  text-align: center;
}

.terms {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: 30px 120px;
  text-align: center;
  margin: 30px 0;
  background: #8c0000;
  color: #feeeee;
}

.guarantee {
  padding: 30px 60px;
  text-align: center;
  margin: 60px 0;
  background: #8c0000;
  color: #feeeee;
  border: 10px dashed #feeeee;
}

.guarantee h2 {
  color: #feeeee;
}

.about {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "text";
  column-gap: 24px;
  padding: 60px 120px 90px 120px;
  margin: 0px 80px 30px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.aboutText {
  grid-area: text;
}

.footer {
  display: grid;
  background-color: #8c0000;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 60% 40%;
  grid-template-rows: 100%;
  grid-template-areas: "logo text";
  column-gap: 24px;
  padding: 60px 60px 90px 60px;
  margin: 0px 80px;
}

#footerLogo {
  max-width: 60%;
}

.email {
  grid-area: text;
  color: #feeeee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.footerLogo {
  grid-area: logo;
  text-align: center;
}

.faq {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "text";
  column-gap: 24px;
  padding: 60px 120px 90px 120px;
  margin: 0px 80px 0px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.faqText {
  grid-area: text;
}

.lessons {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "text";
  column-gap: 24px;
  padding: 60px 120px 90px 120px;
  margin: 0px 80px 0px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.lessonText {
  grid-area: text;
}

.lessonButtons {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
  grid-template-areas: "button1 button2";
  padding: 0px 120px 190px 120px;
  margin: 0px 80px 30px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.previousButton {
  grid-area: button1;
  text-align: left;
}

.nextButton {
  grid-area: button2;
  text-align: right;
}

.contact {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "text";
  column-gap: 24px;
  padding: 60px 120px 90px 120px;
  margin: 0px 80px 30px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.contactText {
  grid-area: text;
}

.form2 {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  border-radius: 5px;
}

/* Style for form input fields */
.input2[type="text"],
.input2[type="email"],
.textarea2 {
  width: 100%;
  padding: 10px;
  margin-bottom: 0px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Make sure padding is included in width */
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  font-family: "Istok Web", sans-serif;
}

#form-button2 {
  width: 100%;
  padding: 15px;
  margin: 10px auto;
  background-color: #8c0000;
  box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
  outline: none;
  border: 0;
  border-radius: 5px;
  text-align: center;
  color: #feeeee;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  cursor: pointer;
  font-size: 22px;
}

#form-button2:hover {
  background-color: #f76c68;
  box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
  border-radius: 5px;
  color: #8c0000;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
}

#btn-yes,
#btn-yes-ds1 {
  width: 100%;
  padding: 15px;
  margin: 10px auto;
  background-color: #8c0000;
  box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
  outline: none;
  border: 0;
  border-radius: 5px;
  text-align: center;
  color: #feeeee;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  cursor: pointer;
  font-size: 22px;
}

#btn-yes:hover,
#btn-yes-ds1:hover {
  background-color: #f76c68;
  box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
  border-radius: 5px;
  color: #8c0000;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
}

#btn-no,
#btn-no-ds1 {
  width: 100%;
  padding: 15px;
  margin: 10px auto;
  background-color: transparent;
  box-shadow: 0px 0px 0px 0px rgba(85, 92, 152, 0.5);
  outline: none;
  border: 1px solid #333333;
  border-radius: 5px;
  text-align: center;
  color: #333333;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
  cursor: pointer;
  font-size: 18px;
}

#btn-no:hover,
#btn-no-ds1:hover {
  background-color: #333333;
  box-shadow: 0px 0px 1px 1px rgba(85, 92, 152, 0.5);
  border-radius: 5px;
  color: #feeeee;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
}

/* Style for form error messages */
.error {
  color: red;
  font-size: 0.8em;
  margin-top: -10px;
  margin-bottom: 10px;
}

/* Checkout CSS Start */

.checkout {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 60% 40%;
  /* grid-template-rows: 18% 72%; */
  grid-template-areas:
    "headline headline"
    "text form";
  column-gap: 54px;
  padding: 60px 120px 90px 120px;
  margin: 0px 80px 0px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.checkoutHeadline {
  grid-area: headline;
}

.checkoutText {
  grid-area: text;
}

.checkoutForm {
  grid-area: form;
}

#payment-form input[type="text"],
#payment-form input[type="email"] {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  box-shadow: none;
  transition: border 0.2s ease-in-out;
}

#payment-form input[type="text"]:focus,
#payment-form input[type="email"]:focus {
  border-color: #4a90e2; /* Similar to Square's active border */
  outline: none;
}

#payment-form label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

#submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Checkout CSS End */

/* OptIn CSS Start */

.optIn {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 60% 40%;
  /* grid-template-rows: 18% 72%; */
  grid-template-areas:
    "headline headline"
    "text1 form"
    "text2 text2";
  column-gap: 54px;
  padding: 30px 90px 90px 90px;
  margin: 0px 80px 0px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.optInHeadline {
  grid-area: headline;
}

.optInText1 {
  grid-area: text1;
}

.optInText2 {
  grid-area: text2;
  padding: 30px 80px;
}

#optInForm {
  grid-area: form;
}

/* OptIn CSS End */

/* Academy CSS Start */

.academyHomeButtons {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 100%;
  grid-template-areas: "button1 button2 button3";
  column-gap: 24px;
  padding: 0px 120px 190px 120px;
  margin: 0px 80px 30px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.bigButton {
  padding: 60px 30px;
  border-radius: 30px;
  border: solid 2px #e6cdcd;
  background-color: #e6cdcd;
  text-align: center;
  color: #8c0000;
  text-decoration: none;
  transition: all 0.9s ease-in-out;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.bigButton:hover {
  border: solid 2px #8c0000;
  background-color: #feeeee;
  text-decoration: none;
}

.academyHomeButton1 {
  grid-area: button1;
}

.academyHomeButton2 {
  grid-area: button2;
}

.academyHomeButton3 {
  grid-area: button3;
}

/* Academy CSS End */

/* Resources CSS Start */

.resources {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  grid-template-areas:
    "headline headline headline"
    "button1 button2 button3"
    "button4 button5 button6";
  column-gap: 24px;
  row-gap: 60px;
  padding: 60px 120px 90px 120px;
  margin: 0px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.bigButton2 {
  display: block;
  padding: 60px 30px;
  border-radius: 30px;
  border: solid 2px #e6cdcd;
  background-color: #e6cdcd;
  text-align: center;
  color: #8c0000;
  text-decoration: none;
  transition: all 0.9s ease-in-out;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -webkit-transition: all 0.9s ease-in-out;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.bigButton2:hover {
  border: solid 2px #8c0000;
  background-color: #feeeee;
  text-decoration: none;
}

.resources-headline {
  grid-area: headline;
}

.resources-button1 {
  grid-area: button1;
}

.resources-button2 {
  grid-area: button2;
}

.resources-button3 {
  grid-area: button3;
}

.resources-button4 {
  grid-area: button4;
}

.resources-button5 {
  grid-area: button5;
}

.resources-button6 {
  grid-area: button6;
}

/* Resources CSS End */

/* FastPass CSS Start */

.fastpass {
  display: grid;
  background-color: #feeeee;
  overflow: hidden;
  position: relative;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "headline headline headline"
    "button1 button2 button3"
    "button4 button5 button6"
    "button7 button8 button9"
    "button10 button11 button12";
  column-gap: 24px;
  row-gap: 60px;
  padding: 60px 120px 90px 120px;
  margin: 0px 80px;
  box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
    /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
}

.fastpass-headline {
  grid-area: headline;
}

.fastpass-button1 {
  grid-area: button1;
}

.fastpass-button2 {
  grid-area: button2;
}

.fastpass-button3 {
  grid-area: button3;
}

.fastpass-button4 {
  grid-area: button4;
}

.fastpass-button5 {
  grid-area: button5;
}

.fastpass-button6 {
  grid-area: button6;
}

.fastpass-button7 {
  grid-area: button7;
}

.fastpass-button8 {
  grid-area: button8;
}

.fastpass-button9 {
  grid-area: button9;
}

.fastpass-button10 {
  grid-area: button10;
}

.fastpass-button11 {
  grid-area: button11;
}

.fastpass-button12 {
  grid-area: button12;
}

/* FastPass CSS End */

/* Chatbox CSS Start */

#chat-container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
}

#chat-box {
  border: 1px solid #ccc;
  padding: 10px;
  height: 300px;
  overflow-y: auto;
  margin-bottom: 10px;
}

#user-input {
  width: 100%;
  padding: 10px;
}

/* Chatbox CSS End */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .topNav,
  .topNav2 {
    padding: 60px 20px 20px 20px;
    margin: 0px 15px;
  }

  .hero {
    display: grid;
    background-color: #feeeee;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 25% 47% 28%;
    grid-template-areas:
      "headline"
      "bullets"
      "image";
    column-gap: 24px;
    row-gap: 10px;
    padding: 60px 20px 190px 20px;
    margin: 0px 15px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
      /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
  }

  .ccc-hero {
    display: grid;
    background-color: #feeeee;
    position: relative;
    justify-content: center;
    column-gap: 24px;
    row-gap: 10px;
    padding: 60px 20px 190px 20px;
    margin: 0px 15px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
      /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
  }

  .video-container {
    width: 100%;
    height: auto;
  }

  .hero-video {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .VSLhero {
    display: grid;
    background-color: #feeeee;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 20% 65% 9% 6%;
    grid-template-areas:
      "headline"
      "vsl"
      "link"
      "transcript";
    column-gap: 24px;
    row-gap: 10px;
    padding: 60px 20px 190px 20px;
    margin: 0px 15px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
      /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
  }

  .body {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "text";
    column-gap: 24px;
    row-gap: 40px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .about {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "text";
    column-gap: 24px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .footer {
    display: grid;
    background-color: #8c0000;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 60% 40%;
    grid-template-rows: 100%;
    grid-template-areas: "logo text";
    column-gap: 24px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
  }

  .faq {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "text";
    column-gap: 24px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .contact {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "text";
    column-gap: 24px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .academyHomeButtons {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 100%;
    grid-template-areas: "button1 button2 button3";
    column-gap: 24px;
    padding: 30px 40px 20px 40px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .checkout {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 12% 58% 30%;
    grid-template-areas:
      "headline"
      "text"
      "form";
    column-gap: 24px;
    row-gap: 60px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }
}

@media (max-width: 768px) {
  h1 {
    font-family: "Montserrat", sans-serif;
    font-size: 31px;
    line-height: 1.4;
  }

  h2 {
    font-family: "Merriweather", serif;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    color: #8c0000;
  }

  h3 {
    font-family: "Merriweather", serif;
    font-size: 17px;
    line-height: 1.6;
  }

  h4 {
    font-family: "Merriweather", serif;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
  }

  p {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
  }

  .ccc-headline h1 {
    font-size: 31px;
  }

  .ccc-headline h2 {
    font-size: 22px;
  }

  .topNav .navAbout,
  .topNav .navFaq,
  .topNav2 .navAbout,
  .topNav2 .navFaq {
    display: none;
  }

  .navButton {
    display: none;
  }

  .topNav {
    display: grid;
    justify-content: center;
    background-color: #feeeee;
    align-items: center;
    height: 40px;
    z-index: 99;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "logo";
    padding: 60px 20px 90px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5); /* Right */
  }

  .topNav2 {
    display: grid;
    justify-content: center;
    background-color: #feeeee;
    align-items: center;
    height: 170px;
    z-index: 99;
    grid-template-columns: 40% 60%;
    grid-template-rows: 100%;
    grid-template-areas: "logo hamburger";
    padding: 60px 20px 90px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5); /* Right */
  }

  .logo {
    max-height: 60px;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .mobile-logo {
    display: block;
    position: absolute;
    max-height: 70px;
  }

  .mobileNav {
    display: block;
  }

  .menuItem {
    display: block;
    margin: 2rem 2rem;
    font-size: 1.8rem;
    font-family: "Montserrat", sans-serif;
    color: white;
    text-decoration: none;
  }

  .material-icons {
    background-color: transparent;
    color: #8c0000;
  }

  .hamburger {
    position: absolute;
    z-index: 100;
    top: 1rem;
    right: 1rem;
    padding: 60px 20px 0 15px;
    cursor: pointer;
  }

  .closeIcon {
    display: none;
    position: fixed;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    text-align: left;
    padding: 30px 40px 0 0;
    margin-right: 0px;
    color: #feeeee;
  }

  .menu {
    position: fixed;
    transform: translateY(-100%);
    transition: transform 0.2s;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: #8c0000 !important;
    color: white;
    list-style: none;
    padding-top: 4rem;
  }

  .showMenu {
    transform: translateY(0);
    background-color: #8c0000 !important;
    color: #ffffff;
    backdrop-filter: blur(50px);
  }

  .menuIcon {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    font-size: 22px;
    text-align: center;
  }

  .noDecoration {
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
    font-family: "Raleway", sans-serif;
    line-height: 1.4;
  }

  .imageRight {
    max-width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    float: right;
    margin: 30px 0 30px 60px;
  }

  .imageLeft {
    max-width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    float: left;
    margin: 30px 60px 30px 0;
  }

  ul {
    margin-left: 20px;
    margin-right: 20px;
  }

  ol {
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 1.4;
  }

  .hero {
    display: grid;
    background-color: #feeeee;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 25% 47% 28%;
    grid-template-areas:
      "headline"
      "bullets"
      "image";
    column-gap: 24px;
    row-gap: 10px;
    padding: 60px 20px 90px 20px;
    margin: 0px 15px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
      /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
  }

  .ccc-hero {
    display: grid;
    background-color: #feeeee;
    position: relative;
    justify-content: center;
    column-gap: 24px;
    row-gap: 10px;
    padding: 60px 20px 0px 20px;
    margin: 0px 15px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
      /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
  }

  .VSLhero {
    display: grid;
    background-color: #feeeee;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 27% 52% 17% 4%;
    grid-template-areas:
      "headline"
      "vsl"
      "link"
      "transcript";
    column-gap: 24px;
    row-gap: 10px;
    padding: 30px 20px 90px 20px;
    margin: 0px 15px;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5),
      /* Left */ 0px 20px 20px -10px rgba(0, 0, 0, 0.5); /* Right */
  }

  .body {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "text";
    column-gap: 24px;
    row-gap: 40px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .guarantee {
    padding: 30px 20px;
    text-align: center;
    margin: 60px 0;
    background: #8c0000;
    color: #feeeee;
    border: 10px dashed #feeeee;
  }

  .terms {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    background: #8c0000;
    color: #feeeee;
  }

  .about {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "text";
    column-gap: 24px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .footer {
    display: grid;
    background-color: #8c0000;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 60% 40%;
    grid-template-rows: 100%;
    grid-template-areas: "logo text";
    column-gap: 24px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
  }

  .faq {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "text";
    column-gap: 24px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .contact {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "text";
    column-gap: 24px;
    padding: 30px 20px 20px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .input2[type="text"],
  .input2[type="email"],
  .textarea2 {
    width: 100%;
    padding: 10px;
    margin-bottom: 0px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Make sure padding is included in width */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    font-family: "Istok Web", sans-serif;
  }

  .academyHomeButtons {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    grid-template-rows: 33% 33% 33%;
    grid-template-areas:
      "button1"
      "button2"
      "button3";
    column-gap: 0px;
    row-gap: 24px;
    padding: 30px 40px 160px 40px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .checkout {
    display: grid;
    background-color: #feeeee;
    overflow: hidden;
    position: relative;
    justify-content: center;
    grid-template-columns: 100%;
    /* grid-template-rows: 8% 62% 30%; */
    grid-template-areas:
      "headline"
      "text"
      "form";
    column-gap: 24px;
    row-gap: 60px;
    padding: 30px 20px 30px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .optIn {
    grid-template-columns: 100%;
    grid-template-areas:
      "headline"
      "form"
      "text1"
      "text2";
    column-gap: 54px;
    padding: 30px 20px 30px 20px;
    margin: 0px 15px;
    box-shadow: -10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Left */ 10px 10px 10px -10px rgba(0, 0, 0, 0.5),
      /* Right */ 0 10px 10px rgba(0, 0, 0, 0.5); /* Bottom */
  }

  .optInText2 {
    grid-area: text2;
    padding: 30px 0px;
  }

  #optInForm {
    grid-area: form;
    padding-bottom: 30px;
  }
}