html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* Prevent scrolling */
  width: 100%;
  /* Ensure full width */
  height: 100%;
  /* Ensure full height */
  background-image: url('../img/background.png');
  scroll-behavior: smooth;
  background-size: cover;
  /* Default to cover */
  background-position: center;
  background-repeat: no-repeat;
  font-family: 'Geomanist-Regular', sans-serif;
  /* Default font for the body */
}

@font-face {
  font-family: 'Geomanist-Black';
  /* Name of the font */
  src: url('./fonts/Geomanist-Black.otf') format('opentype');
  /* Format should be 'opentype' for .otf files */
  font-weight: normal;
  /* Define the weight for this font file */
  font-style: normal;
  /* Define the style for this font file */
}


@font-face {
  font-family: 'Geomanist-Regular';
  /* Name of the font */
  src: url('./fonts/Geomanist-Regular.otf') format('opentype');
  /* Format should be 'opentype' for .otf files */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Geomanist-Bold';
  /* Name of the font */
  src: url('./fonts/Geomanist-Bold.otf') format('opentype');
  /* Format should be 'opentype' for .otf files */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Geomanist-Regular-Italic';
  /* Name of the font */
  src: url('./fonts/Geomanist-Regular-Italic.otf') format('opentype');
  /* Format should be 'opentype' for .otf files */
  font-weight: normal;
  font-style: italic;
}

h1 {
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
}

@keyframes ringPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}



    .main-display {
      width: 700px;
      height: 345px;
      margin: 0 auto 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      font-weight: bold;
      font-size: 1.2rem;
      position: relative;
      transition: opacity 0.5s ease;
      opacity: 1;
      padding-top: 160px;
    }

    #mainImage {
  max-width: 1100px;
  max-height: auto;
  object-fit: contain; /* or cover */
}


    .main-display.fade {
      opacity: 0;
    }


   .thumbnails {
  display: flex;
  gap: 20px; /* spacing between thumbnails */
  justify-content: center;
  flex-wrap: wrap;
}

    .thumbnail-wrapper img {
      width: 100%;
      height: 80px;
      cursor: pointer;
      transition: transform 0.3s ease, border-color 0.3s ease;
      border-radius: 6px;
      user-select: none;
  margin-bottom: 20px;
    }

    .thumbnail-wrapper img.active {
      transform: scale(1.25);
      border: 3px solid #D4C029;
    }

.thumbnail-wrapper {
  display: inline-block;
  margin: 10px;
  cursor: pointer; /* Makes it clear it’s clickable */
  position: relative;
}



.outer-ring.pulse {
  animation: ringPulse 0.9s ease-out; /* Slowed from 0.5s to 0.8s */
  transition: transform 0.3s ease;
  will-change: transform;
}

.inner-circle.pulse {
  animation: ringPulse 0.9s ease-out; /* Slowed from 0.5s to 0.8s */
  transition: transform 0.3s ease;
  will-change: transform;
}


#home{
height: 33px;
width: auto;
}

#cs-font {
  font-family: 'Geomanist-Bold';
  /* Name of the font */
  src: url('./fonts/Geomanist-Bold.otf') format('opentype');
  /* Format should be 'opentype' for .otf files */
  font-weight: bold;
  font-style: normal;
}

#info {
  font-size: 30px;
  color: #206E63;
}

#info:hover {
  color: #D4C029;
  /* Text color on hover */
  text-decoration: none;
}

#info-icon {
  padding-left: 180px;
}

#info-button {
  padding-top: 60px;
}



#instruction1, #instruction2, #instruction3 {
   width: 100%;
  height: 100%;
  display: block;
    transition: opacity 0.2s ease-in-out;
}


#narration1, #narration2, #narration3 {
 position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

#howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

#car-video1,
#car-video2,
#car-video3 {
  width: 100%;
  height: 97%;
  display: block;
}

 #scenario-video1,#scenario-video2,
 #scenario-video3, #scenario-video4 {
  width: 100%;
 height: auto;
  display: block;
}

    #email-div{
    padding-top: 180px;
  }


  #util-img {
  width: 80%;
  height: auto;
}

#util-div {
  padding-top: 50px;
}

#util-btn {
  padding-bottom: 28px;
}

#index {
  padding-top: 150px;
}

#narrative{
 padding-top: 80px; 
}


#narrative-style {
  padding-top: 150px;
  width: 50%;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 65px;
  padding-right: 60px;
  padding-bottom: 100px;
}

#vacation {
  padding-top: 40px;
}

#title-items {
  padding-top: 10px;
}

  #game-desc1 {
  padding-bottom: 20px;
  }

.hovertest {
  padding-top: 30px;
  margin: 5px auto;
}

#end {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url('../img/gameend.png');
  background-size: cover;
  /* Default to cover */
  background-position: center;
  background-repeat: no-repeat;
}

#gameover {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url('../img/gameover.png');
  background-size: cover;
  /* Default to cover */
  background-position: center;
  background-repeat: no-repeat;
}

#title {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  background: none;
}

#mainbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  background: none;
}

#history {
  position: relative;
  /* Position the text relative to this container */
  background-image: url(../img/history.png);
  background-size: cover;
  /* Optional: to cover the container with the background image */
  background-position: center;
  /* Optional: to center the background image */
  width: auto;
  height: auto;
  color: white;
  /* Text color */
  padding-left: 45px;
  padding-top: 7px;
}

.index-hover {
  text-decoration: none;
  color: #D4C029;
  font-weight: bolder;
}

/* CSS for the text when hovered */
.index-hover:hover {
  color: #206E63;
  /* Text color on hover */
  text-decoration: none;
}

.hover-text {
  vertical-align: middle;
  font-size: 26px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  /* Default text color */
}

/* CSS for the text when hovered */
.hover-text:hover {
  color: #88C9ED;
  /* Text color on hover */
  text-decoration: none;
}

.overlay-text {
  position: absolute;
  top: 10%;
  /* Position the text at the vertical center */
  left: 30%;
  /* Position the text at the horizontal center */
  transform: translate(-50%, -50%);
  /* Center the text both horizontally and vertically */
  color: white;
  /* Text color */
  padding-top: 170px;
}


.header-text {
  position: absolute;
  top: 6%;
  /* Position the text at the vertical center */
  left: 5%;
  /* Position the text at the horizontal center */
  color: white;
  /* Text color */
}


.circular-progress-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Align items horizontally */
  position: relative;
  padding-bottom: 80px;
}

.circular-progress {
  width: 100px;
  /* Outer ring size */
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  /* Space between the circle and the factor image */
}


.circular-progress:hover .tooltip,
.circular-progress-container.touch .tooltip {
  opacity: 1;
  visibility: visible;
  transform: scale(0.9);
}

.credit-score-container:hover .tooltip2,
.credit-score-container.touch .tooltip2 {
  opacity: 1;
  visibility: visible;
  transform: scale(0.9);
}

.tooltip2 {
  position: absolute;
  top: 20px;
  left: calc(100% + 1px);
  z-index: 3;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 400;
  opacity: 0;
  white-space: nowrap;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.tooltip {
  position: absolute;
  top: 12px;
  right: calc(100% + 5px);
  z-index: 3;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 400;
  opacity: 0;
  white-space: nowrap;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.tooltip-arrow {
  border-top-color: #000000;
  /* Change arrow color */
}

.inner-circle {
  width: 80%;
  /* Inner circle size */
  height: 80%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}

.percentage {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}

.outer-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}


.outer-ring svg {
  width: 100%;
  height: 100%;
}

.outer-ring2 svg {
  width: 100%;
  height: 100%;
}


.progress-circle, .progress-circle2 {
  transition: stroke-dashoffset 0.5s ease;
}

.my-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 390px;
  background-position: center;
  /*background-color: transparent !important;*/
  background-color: #ffffff;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
}


.my-card .card-content {
  position: relative;
  z-index: 1;
}

.my-card:hover {
  background-image: url('../img/cardhover.png');
  background-size: 100% 390px;
  background-position: center;
  transform: scale(0.95) !important;
  /* Ensure the scale change on hover is applied */
  transition: transform 0.5s ease-in-out;
  /* Apply transition specifically to transform on hover */
}


.my-card2 {
  position: relative;
  overflow: hidden;
  width: 90%;
  height: 330px;
  background-position: center;
  padding: 15px;
  /*background-color: transparent !important;*/
  background-color: #FCF8EA;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
}

@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.my-card2:hover {
  background-image: url('../img/cardhover.png');
  background-size: 100% 317px;
  background-position: center;
  transform: scale(0.95) !important;
  /* Ensure the scale change on hover is applied */
  transition: transform 0.5s ease-in-out;
  /* Apply transition specifically to transform on hover */
}

.my-card2 ::before {
  visibility: hidden;
}


.my-card2 .card-content {
  position: relative;
  z-index: 1;
}

/*
.card2hover:hover::before {
  content: '';
  position: absolute;
  top: 10px; /* Adjust the top position as needed 
  left: 50%; /* Center the arrow horizontally 
  transform: translateX(-50%); /* Center the arrow horizontally
  width: 22px; /* Adjust the width as needed 
  height: 22px; /* Adjust the height as needed 
  background-image: url('../img/arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
*/

/*
.hovertest:hover::before {
  content: '';
  position: absolute;
  top: 10px; /* Adjust the top position as needed 
  left: 46%; /* Center the arrow horizontally 
  transform: translateX(-50%); /* Center the arrow horizontally 
  width: 22px; /* Adjust the width as needed 
  height: 22px; /* Adjust the height as needed 
  background-image: url('../img/arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
*/

.selection-card {
  position: relative;
  width: 60%;
  margin: 0 auto;
  transition: background-image 0.5s ease-in-out;
}


.selection-card:hover {
  background-image: url('../img/selectionhover.png');
  background-size: 100%;
  background-position: center;
  height: 50%;
}

/*
.selection-card:hover::before {
  content: '';
  position: absolute;
  top: 12px; /* Adjust the top position as needed 
  left: -5%; /* Center the arrow horizontally 
  transform: translate(-50%, 50%) rotate(-90deg); /* Rotate the text 
  width: 20px; /* Adjust the width as needed 
  height: 20px; /* Adjust the height as needed 
  background-image: url('../img/arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
*/

.cf-card1 {
  position: relative;
  width: 55%;
  margin: 0 auto;
  transition: background-image 0.5s ease-in-out;
  border: none;
  margin-bottom: 12px;
}

.cf-card1:hover {
  content: url('../img/cf-yellow1.png');
  /* Change this path to your hover image */
  transform: scale(1.06);
}

.cf-card2 {
  position: relative;
  width: 55%;
  margin: 0 auto;
  transition: background-image 0.5s ease-in-out;
  border: none;
  margin-bottom: 12px;
}

.cf-card2:hover {
  content: url('../img/cf-yellow2.png');
  /* Change this path to your hover image */
  transform: scale(1.06);
}

.cf-card3 {
  position: relative;
  width: 55%;
  margin: 0 auto;
  transition: background-image 0.5s ease-in-out;
  border: none;
}

.cf-card3:hover {
  content: url('../img/cf-yellow3.png');
  /* Change this path to your hover image */
  transform: scale(1.06);
}


.limit1 {
  position: relative;
  width: 55%;
  margin: 0 auto;
  transition: background-image 0.5s ease-in-out;
  border: none;
}

.limit1:hover {
  content: url('../img/limit-yellow1.png');
  /* Change this path to your hover image */
  transform: scale(1.06);
}

.limit2 {
  position: relative;
  width: 55%;
  margin: 0 auto;
  transition: background-image 0.5s ease-in-out;
  border: none;
}

.limit2:hover {
  content: url('../img/limit-yellow2.png');
  /* Change this path to your hover image */
  transform: scale(1.06);
}

.fund {
  width: 30%;
  margin: 0 auto;
  transition: background-image 0.5s ease-in-out;
}

.fund1,
.fund2,
.fund3,
.fund4 {
  margin: 0 auto;
  width: 180px;
  /* Adjust the width as needed */
  height: 180px;
  /* Adjust the height as needed */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /*  transition: transform 0.1s ease; Smooth transition for scaling */
}

.fund1 {
  background-image: url('../img/fund-green1.png');
}

.fund2 {
  background-image: url('../img/fund-green2.png');
}

.fund3 {
  background-image: url('../img/fund-green3.png');
}

.fund4 {
  background-image: url('../img/fund-green4.png');
}

/* Hover effects */
.fund1:hover {
  background-image: url('../img/fund-yellow1.png');
  transform: scale(1.05);
  /* Slightly scale up without affecting layout */
}

.fund2:hover {
  background-image: url('../img/fund-yellow2.png');
  transform: scale(1.05);
  /* Slightly scale up without affecting layout */
}

.fund3:hover {
  background-image: url('../img/fund-yellow3.png');
  transform: scale(1.05);
  /* Slightly scale up without affecting layout */
}

.fund4:hover {
  background-image: url('../img/fund-yellow4.png');
  transform: scale(1.05);
  /* Slightly scale up without affecting layout */
}


.sticky-row {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  background-color: unset;
  /* Optional: set a background color */
  z-index: 1000;
  /* Ensure it stays on top of other content */
  padding: 18px;
  /* Optional: add some padding */
  cursor: default;
}

.sticky-col {
  position: fixed;
  top: 0;
  z-index: 1000;
}

#creditmeter {
  position: fixed;
  top: 70px;
  /* Distance from the top */
  left: 0;
  /* Stick to the left */
  width: 20%;
  /* Adjust width */
  z-index: 1000;
  /* Ensure it’s above other content */
}

#factormeter {
  position: fixed;
  top: 70px;
  /* Distance from the top */
  right: 0;
  /* Stick to the right */
  width: 20%;
  /* Adjust width */
  z-index: 1000;
  /* Ensure it’s above other content */
}

#section {
  margin-left: 17%;
  /* Offset for creditmeter */
  justify-content: center;
  padding-right: 30px;
}

.image-container {
  position: relative;
  display: inline-block;
  width: 65%;
  /* Same width as the image */
}

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

.image-container .overlay-text {
  position: absolute;
  top: 45%;
  /* Adjust as needed */
  left: 50%;
  /* Adjust as needed */
  transform: translate(-50%, -50%) rotate(-35deg);
  /* Rotate the text */
  color: black;
  /* Adjust text color */
  font-weight: bolder;
  /* Adjust text style */
  font-size: 36px;
}

.info-container img {
  width: 38%;
  height: auto;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.info-container .overlay-text {
  top: 46%;
  /* Adjust as needed */
  left: 50%;
  /* Adjust as needed */
  right: 20%;
  /* Adjust as needed */
  color: black;
  /* Adjust text color */
  font-weight: normal;
  font-size: 17px;
  text-align: center;
  opacity: 0;
  /* Start hidden */
  transition: opacity 1s ease-in-out, background-image 1s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.info-container1 img {
  width: 60%;
  height: auto;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
  padding-top: 70px;
}

.info-container1 .overlay-text {
  top: 40%;
  /* Adjust as needed */
  left: 49%;
  /* Adjust as needed */
  right: 10%;
  /* Adjust as needed */
  color: black;
  /* Adjust text color */
  font-weight: normal;
  font-size: 17px;
  text-align: center;
  justify-content: center;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.info-container2 img {
  width: 60%;
  height: auto;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
  padding-top: 15px;
}

.info-container2 .overlay-text {
  top: 40%;
  /* Adjust as needed */
  left: 50%;
  /* Adjust as needed */
  right: 10%;
  /* Adjust as needed */
  color: black;
  /* Adjust text color */
  font-weight: normal;
  font-size: 17px;
  text-align: center;
  justify-content: center;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.info-container .overlay-button {
  text-align: center;
  left: 50%;
  /* Adjust as needed */
  color: black;
  /* Adjust text color */
  font-weight: normal;
  font-size: 24px;
  text-decoration: none;
}

.credit-container {
  text-align: left;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.credit-container .overlay-text {
  top: 52%;
  /* Adjust as needed */
  left: 50%;
  /* Adjust as needed */
  right: 20%;
  /* Adjust as needed */
  color: black;
  /* Adjust text color */
  font-weight: normal;
  font-size: 17px;
  text-align: center;
  opacity: 0;
  /* Start hidden */
  transition: opacity 1s ease-in-out, background-image 1s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}


.credit-container2 img {
  width: 50%;
  height: 550px;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.credit-container2 .overlay-text {
  top: 58%;
  /* Adjust as needed */
  left: 30%;
  /* Adjust as needed */
  right: 28%;
  /* Adjust as needed */
  color: black;
  /* Adjust text color */
  font-weight: normal;
  font-size: 17px;
  text-align: center;
  opacity: 0;
  /* Start hidden */
  transition: opacity 1s ease-in-out, background-image 1s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.credit-container3 img {
  width: 80%;
  height: 550px;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.credit-container3 .overlay-text {
  top: 41%;
  /* Adjust as needed */
  left: 0;
  /* Adjust as needed */
  right: 0;
  /* Adjust as needed */
  color: black;
  /* Adjust text color */
  font-weight: normal;
  font-size: 17px;
  margin-left: 770px;
  opacity: 0;
  /* Start hidden */
  transition: opacity 1s ease-in-out, background-image 1s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
  width: 48%;
  text-align: center;
}


.arrow {
  width: 15px;
  height: 0;
  background-color: #000;
  /* Color of the arrow */
  margin: 0 auto;
  /* Center the arrow horizontally */
  display: none;
  /* Hide by default */
  transition: height 2s, transform 2s;
}

.arrow-head {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
  /* Color of the arrow head */
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s;
}


/* Word Search Puzzle Game */
#word-search {
  display: grid;
  grid-template-columns: repeat(10, 38px);
  grid-gap: 2px;
  margin: 20px auto;
  justify-content: center;
}

.cell {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}

.selected {
  background-color: #205e55;
  color: #fff;
}

.crossed-out {
  text-decoration: line-through;
}

.completed {
  background-color: #D4C029;
  color: #fff;
}

.modal-open {
  overflow: hidden;
  /* Prevent scrolling of the background */
  pointer-events: none;
  /* Disable all pointer events on the body */
}

/* Modal Styles */
#modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

#modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  z-index: 1051;
  /* Ensure the modal content is above the backdrop */
  pointer-events: auto;
  /* Re-enable pointer events for the modal content */
}

#footer {
  position: fixed;
  bottom: 180px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
}

.howto-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 13px 30px 13px 30px;
  width: 20%;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}

.howto-button:hover {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;

}

.howto-button:active {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;
}


.game-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 10px 30px 13px 30px;
  width: 20%;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}

.game-button:hover {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;

}

.game-button:active {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;
}


.game-button2 {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 10px;
}

.game-button2:hover {
  background-color: #206E63;
  transform: scale(1.1);
  color: #fff;
  text-decoration: none;

}

.game-button2:active {
  background-color: #D4C029;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;
}

.game-button3 {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 13px 30px 13px 30px;
  width: 20%;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}

.game-button3:hover {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;

}

.game-button3:active {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;
}


.narrative-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
}

.narrative-button:hover {
  background-color: #206E63;
  transform: scale(1.1);
  color: #fff;
  text-decoration: none;

}

.narrative-button:active {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;
}


.accept-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  visibility: hidden;
  /* Start hidden */
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.3s ease-in-out;
  animation: fadeInButton 0.3s ease-in-out 3s forwards;
  /* Delay of 6 seconds */
  text-decoration: none;
}

@keyframes fadeInButton {
  to {
    visibility: visible;
    /* Make visible at the end */
    opacity: 1;
    /* Fully opaque */
  }
}


.accept-button:hover {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;

}

.accept-button:active {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;
}



#typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: pre-wrap;
  /* Allows wrapping */
  animation: blink-caret 0.15s step-end infinite;
  font-weight: normal;
  line-height: 150%;
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: #D4C029;
  }
}


.hidden {
  display: none;
}

.visible {
  display: block;
}

#car1,
#car2,
#car3 {
  padding-bottom: 270px;
}

#title-text {
  padding-bottom: 20px;
  padding-top: 40px;
  font-size: 24px;
}

   #title-text2 {
  padding-bottom: 20px;
  padding-top: 120px;
  font-size: 26px;
}

  #title-text3 {
  padding-bottom: 20px;
  padding-top: 40px;
  font-size: 24px;
}

 #title-text4 {
  padding-bottom: 20px;
  padding-top: 120px;
}

#qs-text {
  padding-bottom: 10px;
  padding-top: 10px;
}

.hidden-section {
  display: none;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

.visible-section {
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.2s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn3 0.4s ease-in-out 0.2s forwards;
  /* Animation with delay */
}

@keyframes fadeIn3 {
  to {
    opacity: 1;
  }
}

.fade-out {
  opacity: 0;
  /* Fade out effect */
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
  /* Disable interaction during fade-out */
}


.fade-in {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.notification {
  background-image: url('../img/notification.png');
  color: #000;
  text-decoration: none;
  padding: 9px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: #D4C029;
  color: white;
  text-decoration: none;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background: #DA1F27;
  color: white;
}

@keyframes zoomInOut {
  0% {
    transform: scale(0.7);
  }

  50% {
    transform: scale(0.9);
    /* Zoom in */
  }

  100% {
    transform: scale(0.7);
    /* Zoom out */
  }
}

.zoom-animation {
  visibility: hidden;
  /* Initially hidden */
  animation: zoomInOut 2s infinite;
  /* Animation duration and infinite repetition */
  animation-delay: 5s;
  /* Delay the animation for 5 seconds */
  animation-fill-mode: forwards;
  /* Keeps the final state after the animation ends */
}

.zoom-animation img {
  visibility: visible;
  /* Make image visible when the animation starts */
  opacity: 0;
  /* Start with opacity 0 */
  animation: fadeIn 0s 5s forwards, zoomInOut 2s infinite 5s;
  /* 0s fadeIn delay, 5s total delay before animation */
}

@keyframes fadeIn {
  to {
    opacity: 1;
    /* Fade in to full opacity */
  }
}

.factor-up-image {
  width: 28px;
  /* Adjust size as needed */
  height: auto;
  z-index: 2;
  /* Make sure it's on top */
  position: relative;
  /* Ensure it positions beside the circular progress */
  transform: translateX(0px);
  /* Optional: Adjust position */
  opacity: 0;
  /* Start with the image hidden */
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* Apply transition effects */
  bottom: 7px;
}


.factor-up-image.visible {
  opacity: 1;
  /* Show image with transition */
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* Apply transition effects */
}

.factor-up-image.hidden {
  opacity: 0;
  /* Hide image with transition */
  transition: opacity 0.5s ease;
  /* Smooth fade-out transition */
  animation: fadeOutButton 0.7s ease-in-out forwards;
  /* Smooth fade-out over 0.7s */
}

@keyframes fadeOutButton {
  0% {
    visibility: visible;
    /* Start visible */
    opacity: 1;
    /* Fully opaque */
  }

  100% {
    visibility: hidden;
    /* Hidden at the end */
    opacity: 0;
    /* Fully transparent */
  }
}

  .credit-score-container {
  position: relative;
  height: 450px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
}


.creditscore-img {
  width: 100%;
  height: 445px;
  opacity: 1;
  position: relative;
}

.opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.creditarrow-img {
  position: absolute;
  left: 90%;
  /* Move the arrow to the right */
  transform: translateX(-50%);
  /* Keep it centered relative to the new left position */
  width: 40%;
  /* Adjust the size as needed */
  height: auto;
  top: 49%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

.table-container {
  display: inline-block;
  margin: 0 auto;
}

table {
  border-collapse: collapse;
  table-layout: auto;
  /* Adjust table to fit content width */
  width: auto;
  /* Table adjusts to fit its content */
  margin: 0 auto;
  /* Center table horizontally */
  width: 70%;
  /* Adjust to desired percentage */
}

td {
  border: 1px solid #ddd;
  padding: 0;
  /* Remove padding */
  margin: 0;
  /* Remove margin */
  text-align: center;
  /* Optional: Center align images if needed */
}

table img {
  display: block;
  /* Remove extra space below images */
  width: 100%;
  /* Adjust to desired percentage */
  height: auto;
  /* Maintain aspect ratio */
}

table img:hover {
  cursor: pointer;
}


#result {
  margin-top: 10px;
  font-size: 20px;
  color: #D4C029;
}


.zoom-title {
  animation: easeInOutLoop 3s ease-in-out infinite;
  transition: opacity 0.3s, transform 0.3s;
}

@keyframes easeInOutLoop {
  0% {
    transform: scale(1);
    /* Start at original size */
    opacity: 1;
    /* Fully visible */
  }

  50% {
    transform: scale(1.05);
    /* Slightly enlarged */
    opacity: 0.8;
    /* Slightly faded */
  }

  100% {
    transform: scale(1);
    /* Return to original size */
    opacity: 1;
    /* Fully visible */
  }
}


.zoom-title:hover {
  content: url('../img/creditlit2.png');
  /* Change this path to your hover image */
}

.zoom-title2 {
  animation: easeInOutLoop 3s ease-in-out infinite;
  transition: opacity 0.3s, transform 0.3s;
}

.zoom-title2:hover {
  content: url('../img/graduation2.png');
  /* Change this path to your hover image */
}

.zoom-title3 {
  animation: easeInOutLoop 3s ease-in-out infinite;
  transition: opacity 0.3s, transform 0.3s;
}

.zoom-title3:hover {
  content: url('../img/workforce2.png');
  /* Change this path to your hover image */
}




.animated-button2 {
  opacity: 0;
  /* Initially hidden */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, opacity 1s;
}

.animated-button2:hover {

  transform: scale(0.9);
}

.animated-button3 {
  opacity: 0;
  /* Initially hidden */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, opacity 1s;
}

.animated-button3:hover {

  transform: scale(0.9);
}

.animated-button1 {
  cursor: pointer;
}

.animated-button1:hover {

  transform: scale(0.9);
}

.zoom-button:hover {
  content: url('../img/next-btn2.png');
  width: 20%;
  height: auto;
}

.zoom-button1:hover {
  content: url('../img/next1.png');
  width: 20%;
  height: auto;
}

.zoom-button2:hover {
  content: url('../img/next2.2.png');
  width: 20%;
  height: auto;
}

.zoom-button3:hover {
  content: url('../img/next1.1.png');
  width: 20%;
  height: auto;
}

.phone-call {
  background-image: url('../img/phonecall.png');
  width: 100%;
  /* Adjust as needed */
  height: 60vh;
  /* Adjust as needed */
  background-size: contain;
  /* Adjust as needed (cover, contain, etc.) */
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 80px;
}

#phone-answer {
  background-image: url('../img/answerphone.png');
  width: 100%;
  /* Adjust as needed */
  height: 85vh;
  /* Adjust as needed */
  background-size: contain;
  /* Adjust as needed (cover, contain, etc.) */
  background-position: center;
  background-repeat: no-repeat;
}


#phone-button {
  padding-top: 290px;
}

#phonebtn {
  visibility: hidden;
  /* Start hidden */
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.1s ease-in-out;
  animation: fadeInButton 0.1s ease-in-out 1s forwards;
  /* Delay of 6 seconds */
  text-decoration: none;
  width: 5%;
  height: auto;
}

#phonebtn:hover {
  transform: scale(1.1);
}


#hangup-phone {
  padding-top: 450px;
}

#open-email {
  background-image: url('../img/email.png');
  width: 100%;
  /* Adjust as needed */
  height: 90vh;
  /* Adjust as needed */
  background-size: contain;
  /* Adjust as needed (cover, contain, etc.) */
  background-position: center;
  background-repeat: no-repeat;
}


#accept-email {
  padding-top: 430px;
  padding-left: 620px;
}

#headerimg {
  width: 85%;
  height: auto;
}

#wordlist {
  padding-right: 150px;
  padding-top: 50px;
}

#word-list {
  padding: 10px;
  /* Padding around the code */
  overflow: auto;
  /* Scrollbar if code overflows */
  white-space: pre-wrap;
  /* Preserve whitespace and line breaks */
  margin: 20px;
  /* Margin around the container */
  color: #206E63;
  font-weight: bold;
}

@media (min-width: 820px) and (max-width: 1180px) {


  #viewscreen {
    padding-top: 6px;
  }

  #workforce {
    padding-top: 150px;
  }

  #accept-email {
    padding-top: 500px;
    padding-right: 630px;
  }

  #headerimg {
    width: 80%;
    height: auto;
    margin: 0 0px;
  }

  .header-text {
    position: absolute;
    top: 6%;
    /* Position the text at the vertical center */
    left: 4%;
    /* Position the text at the horizontal center */
    color: white;
    /* Text color */
  }

  .card-text {
    margin: 2px;
  }

  .my-card {
    position: relative;
    overflow: hidden;
    width: 110%;
    height: 390px;
    background-position: center;
    background-color: transparent !important;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  .my-card:hover {
    background-image: url('../img/cardhover.png');
    background-size: 100% 400px;
    background-position: center;
    transform: scale(0.95) !important;
    /* Ensure the scale change on hover is applied */
    transition: transform 0.5s ease-in-out;
    /* Apply transition specifically to transform on hover */
  }

  .my-card2:hover {
    background-image: url('../img/cardhover.png');
    background-size: 100% 300px;
    background-position: center;
    transform: scale(0.95) !important;
    /* Ensure the scale change on hover is applied */
    transition: transform 0.5s ease-in-out;
    /* Apply transition specifically to transform on hover */
  }


  #wordlist {
    padding-right: 150px;
    justify-content: center;
    align-items: center;
  }

  #phone-button {
    padding-top: 300px;
  }

  #hangup-phone {
    padding-top: 520px;
  }

}


.quiz,
.scores {
  margin: 30px auto 0 auto;
  max-width: 1000px;
}

#top {
  color: #206E63;
}

.containerNew {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 580px;
  width: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}


.landing {
  text-align: center;
}

.scoresHeader {
  position: absolute;
  top: 15px;
  left: 15px;
}


.options {
  display: flex;
  flex-wrap: wrap;
  /* Allows items to wrap onto new lines */
  justify-content: center;
  /* Centers the items horizontally */
  align-items: flex-start;
  /* Aligns items to the top of the container */
  gap: 30px;
  /* Optional: Adds spacing between the options */
}

.options button {
  width: 440px;
  /* Set a fixed width for buttons */
  height: 100px;
  /* Set a fixed height for buttons */
  margin: 1px;
}

.options .option-top {
  flex: 1 1 45%;
  /* This makes the top options take up 45% of the width, adjust as needed */
}

.options .option-bottom {
  flex: 1 1 45%;
  /* The same for bottom options */
}

#quiz-next {
  width: 7%;
  height: auto;
  display: block;
  margin: 0 auto;
}

#nextbtn-div {
  padding-top: 26px;
}


button {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  color: #206E63;
  font-weight: bold;
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px solid #206E63;
  padding: 20px;
  width: 80%;
}

button:hover {
  background-color: #206E63;
  color: #ffffff;
}


input[type="text"] {
  font-size: 100%;
}

.hide {
  display: none;
}

.feedback {
  font-style: bold;
  font-size: 120%;
  margin-top: 20px;
  padding-top: 15px;
  color: #fff;
  border-top: 2px dashed #7a797a;
  justify-content: flex-end;
  text-align: left;
}

ol {
  padding-left: 15px;
  max-height: 600px;
  overflow: auto;
}

li {
  padding: 5px;
  list-style: decimal inside none;
}

li:nth-child(odd) {
  background-color: #dfdae7;
}



.item-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 10px;
  padding-top: 10px;
  z-index: 1000;
}

.item-container2 {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-bottom: 10px;
  margin-top: 30px;
  margin-left: 50px;
}

#container1 {
  background-image: url('../img/collateral/Collateral-Box.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 360px;
  height: 180px;
  padding: 10px;
}

#container2 {
  background-image: url('../img/collateral/NonCollateral-Box.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 360px;
  height: 180px;
  padding: 10px;
}



#items {
  padding-top: 30px;
  padding-left: 150px;
  justify-content: center;
  display: grid;
  padding-right: 150px;
}

#drag-items {
  padding-bottom: 16px;
}


.draggable {
  cursor: move;
}

.dragged {
  opacity: 0.5;
}


.monument {
  width: 50%;
  padding-bottom: 8px;
  padding-right: 4px;
  height: auto;
}

.loader-container {
  position: relative;
  /* Allows us to position elements inside it */
  display: flex;
  justify-content: center;
  /* Horizontally center the loader and text */
  align-items: center;
  /* Vertically center */
  padding-top: 150px;
}

/* The rotating circle */
.loader {
  border: 20px solid #206E63;
  border-top: 20px solid #D4C029;
  /* Blue */
  border-radius: 50%;
  width: 300px;
  height: 300px;
  animation: spin 5s linear infinite;
  /* Infinite spinning animation */
  position: absolute;
  /* This makes it stay in place while the text is centered */
}

/* Text that stays in the center of the circle */
.loading-text {
  position: absolute;
  /* Absolute positioning inside the container */
  color: #000000;
  /* Text color */
  font-size: 18px;
  /* Adjust text size */
  font-weight: bold;
  /* Make text bold */
  z-index: 1;
  /* Ensure the text stays above the spinner */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#game-title1 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  background-image: url('../img/landmark/title-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

#game-title2 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  background-image: url('../img/wedding/game-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

#game-title3 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  background-image: url('../img/quiz/quiz-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

#game-title4 {
  position: absolute;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  background-image: url('../img/landmark/title-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}



/*
#business-game {
  position: relative; /* Change to relative 
  width: 100vw;
  height:100vh;/* Cover the full viewport height
  background-image: url('../img/business/business-game.png');
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}
*/

.game-container {
  position: relative;
  /* Change to relative */
  width: 100%;
  height: 58vh;
  /* Cover the full viewport height */
  background-image: url('../img/collateral/collateral-game1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}


.start-link {
  color: #206E63;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  font-weight: bold;
}

.start-link:hover {
  transform: scale(0.9);
  color: #D4C029;
  text-decoration: none;

}

.contact {
  color: #206E63;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  font-weight: bold;
}

.contact:hover {
  transform: scale(0.9);
  color: #D4C029;
  text-decoration: none;

}

.start-link2 {
  color: #ffffff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  font-weight: bold;
}

.start-link2:hover {
  transform: scale(0.9);
  color: #D4C029;
  text-decoration: none;

}

.start-link3 {
  color: #206E63;
  border: none;
  font-size: 22px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  font-weight: bold;
}

.start-link3:hover {
  transform: scale(0.9);
  color: #206E63;
  text-decoration: none;

}

#continuelink {
  padding-top: 80px;
  padding-left: 130px;
}

#question-progress {
  height: 10px;
  /* Adjust height if needed */
  width: 100%;
  background-color: #ffffff;
  /* Background of the progress bar */
  border-radius: 5px;
  /* Rounded corners for the progress bar */
  position: relative;
}

/* Progress bar active line */
#question-progress .active {
  background-color: #206E63;
  /* Active color for the progress bar line */
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
  /* Smooth transition for width change */
}

/* Container for the progress bar */
#question-progress-container {
  position: relative;
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  /* Center content vertically */
}

/* The line behind the dots */
#question-progress-container>div:first-child {
  position: absolute;
  width: 100%;
  height: 4px;
  /* Thickness of the line */
  background-color: #e0e0e0;
  /* Line color */
  top: 50%;
  transform: translateY(-50%);
  /* Center the line vertically */
  z-index: 1;
  /* Place it behind the dots */
}

/* Container for the dots */
#question-progress-dots {
  display: flex;
  justify-content: space-between;
  /* Spread dots evenly */
  width: 100%;
  position: relative;
  z-index: 2;
  /* Place it above the line */
}

/* Individual dots */
#question-progress-dots .dot {
  width: 15px;
  height: 15px;
  background-color: #c0bdbd;
  /* Inactive dot color */
  border-radius: 50%;
  /* Make dots circular */
  border: 2px solid #c0bdbd;
  /* Matches dot color */
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
  /* Needed for layering adjustments */
}

/* Active dots */
#question-progress-dots .dot.active {
  background-color: #206E63;
  /* Active dot color */
  border-color: #206E63;
}

#question-progress-container>div:first-child.active {
  background-color: #206E63;
  /* Active dot color */
  border-color: #206E63;
}

#question-words {
  color: #206E63;
  font-weight: bold;
  font-size: 24px;
  text-align: left;
}

.vertical-line {
  position: absolute;
  top: 420px;
  /* Adjust this value to control the distance from the top */
  left: 50%;
  width: 1px;
  /* Line thickness */
  height: 28px;
  /* Line height */
  background-color: #206E63;
  /* Line color */
  transform: translateX(-50%);
  /* Center the line horizontally */
}


#quiz-end {
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}


.choice-card {
  text-decoration: none;
  color: #206E63;
  /* Initial text color */
  font-size: 20px;
  font-weight: bold;
}

/* CSS for the text when hovered */
.choice-card:hover {
  color: #D4C029;
  /* Text color on hover */
  text-decoration: none;
  /* Optional: if you want underline on hover */
}

.card-title {
  font-weight: normal;
}

#name {
  position: absolute;
  top: 45%;
  left: 35%;
  transform: translate(-50%, -50%);
  color: #206E63;
  font-weight: bold;
}

#score {
  padding-top: 30px;
  padding-left: 0;
  padding-right: 400px;
  position: static
}


#name3 {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #206E63;
  font-weight: bold;
}

#wedding-box {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 100px;
  padding-left: 100px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 10px;
  /* Centering handled by parent */
  /* Removed top, left, and transform */
}

.card-game {
  width: 100px;
  height: 130px;
  background: url('../img/wedding/card-cover.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: right;
  font-size: 24px;
  cursor: pointer;
  border: 1px solid #D4C029;
}

.hidden {
  background-color: rgb(255, 255, 255);
}

.card-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.card-game.flipped img {
  transform: rotateY(180deg);
  /* Flip the image on the Y-axis */
}

#message {
  position: absolute;
  bottom: 50%;
  right: 200px;
  transform: translateY(-50%);
  background: #05050500;
  padding: 10px;
  border: 1px solid #eaeee900;
  border-radius: 5px;
  font-size: 30px;
  color: #206E63;
}

.title-image {
  width: 30%;
  /* Adjust the size as needed */
  height: auto;
  /* Maintain aspect ratio */
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 15%;
  left: 30px;
  transform: translate(30 -10%);
}

.timer {
  font-size: 40px;
  font-weight: bold;
  color: #206E63;
}

.timer .colon {
  width: auto;
  /* Smaller width */
  height: 50px;
  /* Fixed height */
  margin-right: 10px;
}

.score {
  font-size: 40px;
  font-weight: bolder;
  color: #206E63;
}


.text-box {
  font-size: 18px;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0);
  padding: 10px;
  margin: 20px 0;
  background-color: rgba(255, 255, 255, 0);
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  bottom: 40%;
  left: 10px;
  transform: translate(5%, -10%);
}

.timer-text-box {
  font-size: 40px;
  font-weight: bold;
  color: #206E63;
}

#wedding1 {
  padding-top: 180px;
  padding-left: 120px;

  border: 3px solid;
}

#wedding2 {
  margin-top: 100px;
  padding-top: 300px;
  padding-left: 200px;

  border: 3px solid;
}


#wedding-score1 {
  font-size: 42px;
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  text-align: left;
}

#wedd-box {
  margin-top: 50px;
}

#weddscore {
  padding-top: 30px;
  padding-left: 200px;
  text-align: left;
  opacity: 0;
  /* Start hidden */
  transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
  animation: fadeIn2 1s ease-in-out 0.8s forwards;
  /* Animation with delay */
}

#name2 {
  position: absolute;
  top: 73%;
  left: 32%;
  transform: translate(-50%, -50%);
  color: #206E63;
  font-weight: bold;
  font-size: 22px;
}

#wedding-score2 {
  padding-left: 380px;
  font-size: 24px;
  color: #206E63;
  font-weight: bold;
  margin-top: 200px;
}

.location {
  background-color: whitesmoke;
  width: 200px;
  height: 42px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 3px dotted #D4C029;
}

#location7 {
  margin-left: 40px;
}

.singapore {
  margin-right: 15px;
}

.monument {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 150px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin-bottom: 10px;
  /* Space between the image and location box */
}

.japan1 {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 150px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 24px;
  /* Space between the image and location box */
}

.egypt1 {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 150px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 5px;
  /* Space between the image and location box */
}


#vacay-box {
  display: flex;
  justify-content: center;
  /* Center content horizontally */
  align-items: center;
  /* Center content vertically */
  margin-bottom: 20px;
  /* Add some space between rows */
  width: 100%;
  /* Ensure they take up 100% of their container width */
}

#vacay-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}



.item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  /* Ensure container takes full height */
}

.imgs {
  width: 12%;
  /* Set the width relative to the container's width */
  height: auto;
  /* Maintain aspect ratio */
}


.index-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 15px 40px 15px 40px;
  width: 50%;
  font-size: 22px;
  font-weight: normal;
  opacity: 0;
  /* Initially hidden */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, opacity 1s;
  text-decoration: none;
  border-radius: 4px;
}


.index-button:hover {
  background-color: #206E63;
  transform: scale(1.1);
  color: #fff;
  text-decoration: none;

}



#scene2-opt1 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  margin: 0;
  padding: 0;
  background-size: contain;
}

#car1 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

#scene2-opt2 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  margin: 0;
  padding: 0;
  background-size: contain;
}

#car2 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}


#scene2-opt3 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  margin: 0;
  padding: 0;
  background-size: contain;
}

#car3 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}


#scene10tips, #scene13tips, #scene3tips {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  margin: 0;
  padding: 0;
  background-size: contain;
}

#tips10, #tips13, #tips3 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}


  #tips10-info, #tips13-info, #tips3-info{
   width: 100%;
   height: auto;
   display: block;
  }


#scenario8 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  margin: 0;
  padding: 0;
  background-size: contain;
}


#game1 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

#scenario5 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  margin: 0;
  padding: 0;
  background-size: contain;
}

#game2 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}


#scenario9 {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  margin: 0;
  padding: 0;
  background-size: contain;
}

#game3 {
  position: absolute;
  top: 93%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

#quiz-game {
  position: relative;
  /* Change to relative */
  width: 100vw;
  height: 100vh;
  /* Cover the full viewport height */
  margin: 0;
  padding: 0;
  background-size: contain;
}

.quiz-progress {
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 60px;
}

#game4 {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}


#game-intro {
  position: relative;
  /* Change to relative */
  width: 100%;
  height: 100vh;
  /* Cover the full viewport height */
  background-image: url('../video/business.mp4');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.start-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 12px 10px;
  width: 18%;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}

.start-button:hover {
  background-color: #206E63;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;

}

#call-convo {
  padding-top: 80px;
}

.phone-img {
  width: 75%;
  height: auto;
  margin: 0 auto;
}

.tooltip-container {
  position: relative;
}

.tooltip-text {
  visibility: hidden;
  width: 150px;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  border-radius: 2px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 85%;
  /* Position above the image */
  left: 40%;
  margin-left: -60px;
  /* Adjust the tooltip to be centered */
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

#email-img {
  opacity: 0;
  /* Start with the image hidden */
  animation: zoomInOut 0.8s ease-in-out forwards;
  /* Apply animation for display */
  transition: transform 0.3s ease-in-out;
  /* Smooth transition for hover effect */
}

/* Keyframes animation for zooming in and out */
@keyframes zoomInOut {
  0% {
    transform: scale(0.8);
    /* Start smaller */
    opacity: 0;
  }

  100% {
    transform: scale(1);
    /* Return to normal size */
    opacity: 1;
    /* Ensure it stays visible */
  }
}



/* Styling for the card */


/* Title styling */
#scene5a h2 {
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 48px;
  margin-top: 20px;
}

/* Subtitle styling */
#scene5a p {
  font-style: italic;
  font-weight: normal;
  color: #000000;
  margin-bottom: 30px;
  font-size: 26px;
}

#scene5b h2 {
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 48px;
  margin-top: 20px;
}

/* Subtitle styling */
#scene5b p {
  font-style: italic;
  font-weight: normal;
  color: #000000;
  margin-bottom: 30px;
  font-size: 26px;
}

/* Loan details styling */
/* Loan details container */
.loan-details {
  text-align: center;
}

.details {
  gap: 2px;
  /* Reduce the horizontal gap between label and value */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Ensures labels and values are vertically aligned */
  margin: 5px 0;
  max-width: 500px;
  /* Controls width to keep details compact */
  margin-left: auto;
  /* Centers the block horizontally */
  margin-right: auto;
  /* Centers the block horizontally */
  border: 3px solid;
}


.label {
  font-size: 22px;
  font-weight: bold;
  text-align: right;
  /* Left aligns the label */
  margin: 5px 0;
  color: #000000;
}

.value {
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  /* Right aligns the value */
  margin: 5px 0;
  color: #D4C029;
  font-style: italic;
}

.wedd-row {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ensures the content is centered */
}

.between {
  flex: 0 0 10px;
  /* Set a small fixed width for space */
}


/* Horizontal rule styling */
#scene5a hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 20px 0;
}

/* Monthly pay heading */
#scene5a .monthly-pay {
  font-weight: bold;
  font-size: 36px;
  margin-bottom: 5px;
  margin-top: 30px;
}

/* Monthly pay amount styling */
#scene5a .amount {
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
  color: #D4C029;
}

#scene5b hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 20px 0;
}

/* Monthly pay heading */
#scene5b .monthly-pay {
  font-weight: bold;
  font-size: 36px;
  margin-bottom: 5px;
  margin-top: 30px;
}

/* Monthly pay amount styling */
#scene5b .amount {
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
  color: #D4C029;
}


.line-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
}

.line {
  width: 80px;
  /* Short line length, adjust as needed */
  height: 2px;
  /* Line thickness */
  background-color: #D4C029;
  /* Line color */
}

.line-text {
  padding: 0 15px;
  font-weight: bold;
  /* Optional: Makes the text bold */
  font-size: 36px;
}

#choices-div {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-left: 230px;
  padding-right: 230px;
  gap: 4px;
}

#choices-col {
  width: 40%;
}

#wedd-img {
  width: 70%;
  height: auto;
}

#wedd-div {
  padding-top: 20px;
}

#seconds {
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  font-size: 52px;
}

#secs {
  color: #206E63;
  font-size: 32px;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
}

/* Slider Container */
.slider-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  max-width: 850px;
  height: 430px;
  /* Adjust the height as needed */
  margin: auto;
}

/* Slider */
.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: transform 0.5s ease;
}



/* Navigation Buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 10px;
  z-index: 10;
}

.slider-btn.prev {
  left: 0;
}

.slider-btn.next {
  right: 0;
}

/* Make sure the <a> tag is the size of the card */
.car a {
  pointer-events: none;
  /* Disable clicking */
  display: block;
  /* Ensure the <a> takes up the whole card */
}

/* Enable <a> tag only when the card is focused */
.car.focus a {
  pointer-events: auto;
  /* Enable clicking */
}


/* Other card styles */
/* Default Card Styles */
.car {
  position: absolute;
  width: 232px;
  height: auto;
  background: none;
  border: 3px solid #D4C029;
  color: white;
  text-align: center;
  transition: transform 0.3s ease, width 0.3s ease, z-index 0.3s, background 0.3s ease;
  opacity: 0.6;
}

/* Ensure the image fits within the card */
.car-image {
  width: 228px;
  height: auto;
  object-fit: contain;
  /* Ensures the image covers the card area without distortion */
}

/* Focused Card */
.car.focus {
  width: 245px;
  height: 330px;
  transform: translateX(0) scale(1.1);
  z-index: 3;
  opacity: 1;
  background-image: url('../img/cardhover.png');
  background-size: cover;
  /* Adjusts the background to fill the card */
  background-position: center;
  /* Centers the background image */
  background-repeat: no-repeat;
  /* Ensures the image doesn't repeat */
  margin: 20px auto;
}


/* Left and Right Cards Styling (same as before) */
.car.left {
  transform: translateX(-150px) scale(0.9);
  z-index: 2;
}

.car.right {
  transform: translateX(150px) scale(0.9);
  z-index: 2;
}

/* Hidden Cards Styling (same as before) */
.car.hidden {
  opacity: 0;
  z-index: 1;
  transform: scale(0.8);
}


.slider-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background: transparent;
  /* Remove background */
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
}

.slider-btn img {
  width: 40px;
  /* Adjust the size of the arrows */
  height: 40px;
  /* Adjust the size of the arrows */
}

/* Left Button */
.slider-btn.prev {
  left: 20px;
  /* Adjust position for the left button */
}

/* Right Button */
.slider-btn.next {
  right: 20px;
  /* Adjust position for the right button */
}

.game-end {
  background-color: #206E63;
  color: white;
  border: none;
  padding: 13px 30px 13px 30px;
  width: 20%;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}

.game-end:hover {
  background-color: #D4C029;
  transform: scale(0.9);
  color: #fff;
  text-decoration: none;

}

#end-div {
  padding-top: 130px;
}

#end-body {
  padding-top: 40px;
  padding-bottom: 5px;
  padding-left: 350px;
  padding-right: 350px;
}

#end-button {
  margin-left: 150px;
  margin-right: 130px;
  padding-top: 30px;
}



#summary-div{
  padding-top: 60px;
}


.result-container {
  position: relative;
  width: 450px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
  margin-top: 120px;
}


.result-img {
  width: 440px;
  height: 95%;
  opacity: 1;
  position: relative;
}

.opacity-overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 53%;
  height: 200%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.resultarrow-img {
  position: absolute;
  left: 75%;
  /* Move the arrow to the right */
  transform: translateX(-20%);
  /* Keep it centered relative to the new left position */
  width: 3%;
  /* Adjust the size as needed */
  height: auto;
  top: 68%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}


#resulttext{
  font-size: 19px;
}

.result-desc{
  padding-top: 100px;
  padding-left: 160px;
  padding-right: 160px;
}

#result-button {
  padding-top: 15px;
}

#mood-container{
  margin-top: 50px;
  height: 80px;
  width: 600px;
}

.inner-circle2 {
  width: 80%;
  /* Inner circle size */
  height: 80%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}

.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}

.outer-ring2 {
  width: 105%;
  height: 105%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}

.circular-progress2 {
   width: 100px;
  /* Outer ring size */
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  /* Space between the circle and the factor image */
}

.circular-progress-container2 {
   align-items: center;
  justify-content: center;
  /* Align items horizontally */
  padding-top: 20px;
  padding-right: 50px;
}


.result-container4 {
  height: 110px;
  width: 435px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
  padding-top: 10px;
}


.result-img4 {
  width: 480px;
  height: 100%;
  opacity: 1;
  position: relative;
}

.opacity-overlay4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 202%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.resultarrow-img4 {
  position: absolute;
 left: 54%;
  /* Move the arrow to the right */
  transform: translateX(-80%);
  /* Keep it centered relative to the new left position */
  width: 3%;
  /* Adjust the size as needed */
  height: auto;
  top: 68%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}


#result-text{
  position: absolute;
   font-size: 15px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 5%;
  transform: translateX(-45%);
}

.inner-circle4 {
  width: 80%;
  /* Inner circle size */
  height: 80%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}

.percentage4 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}

.outer-ring4 {
  width: 105%;
  height: 105%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}

.circular-progress4 {
  width: 100px;
  /* Outer ring size */
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  /* Space between the circle and the factor image */
}

.circular-progress-container4 {
  align-items: center;
  justify-content: center;
  /* Align items horizontally */
  padding-top: 20px;
  padding-right: 50px;
}

.result-desc4{
  padding-top: 120px;
  padding-left: 180px;
  padding-right: 180px;
}

#result-button4 {
  padding-top: 10px;
}

#mood-container4{
  height: 80px;
  width: 600px;
  margin-top: 50px;
}

#risk{
  margin-top: 20px;
}


#risk-img{
 width: 30%;
 height: auto;
 margin: 0;

}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 18px;
   padding-right: 20px;
}

#end-text{
  padding-bottom: 20px;
}


/* Breakpoints for index page*/

@media (min-width: 700px) and (max-width: 779px) {
  #index {
    padding-top: 30px;
  }

  .sticky-row {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  background-color: unset;
  /* Optional: set a background color */
  z-index: 1000;
  /* Ensure it stays on top of other content */
  padding: 8px;
  /* Optional: add some padding */
  cursor: default;
}

  #home{
height: 17px;
width: auto;
}

#info {
  font-size: 15px;
  color: #206E63;
}

 #instruction1, #instruction2, #instruction3 {
    width: 100%;
    height: 93%;
    display: block;
  }


  #howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

  .howto-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 8px 10px 8px 10px;
    width: 13%;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

#footer {
  position: fixed;
  bottom: 80px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
}

.start-link {
  font-size: 12px;
}

  #narrative-style {
    padding-top: 30px;
    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 35px;
    padding-right: 35px;
  }

  #typewriter {
    font-size: 15px;
  }

  .index-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 10px 20px 10px 20px;
    width: 30%;
    font-size: 14px;
    font-weight: normal;
    opacity: 0;
    /* Initially hidden */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, opacity 1s;
    text-decoration: none;
    border-radius: 4px;

  }


  #creditmeter {
    position: fixed;
    top: 15px;
    /* Distance from the top */
    left: 0;
    /* Stick to the left */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #factormeter {
    position: fixed;
    top: 6px;
    /* Distance from the top */
    right: 37px;
    /* Stick to the right */
    width: 40%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #cs-font {
    font-size: 10px;
  }

  .credit-score-container {
    position: relative;
    height: 170px;
    /* Set a specific height */
    overflow: visible;
    /* Hide overflow */
  }

  .creditscore-img {
    width: 100%;
    height: 100%;
    opacity: 1;
    position: relative;
  }

.opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.creditarrow-img {
  position: absolute;
  left: 90%;
  /* Move the arrow to the right */
  transform: translateX(-50%);
  /* Keep it centered relative to the new left position */
  width: 40%;
  /* Adjust the size as needed */
  height: auto;
  top: 49%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

  .hidden-section {
    padding-top: 5px;
  }

  #title-text {
    font-size:13px;
  padding-bottom: 8px;
  padding-top: 8px;
}

 #title-text2 {
    font-size:13px;
  padding-bottom: 4px;
  padding-top: 40px;
}

  #title-text3 {
    font-size:10px;
  padding-bottom: 8px;
  padding-top: 8px;
  }

   #title-text4 {
    font-size:10px;
  padding-bottom: 8px;
  padding-top: 40px;
  }

   #game-desc1 {
    font-size:11px;
  padding-top: 5px;
  padding-bottom: 5px;
  }

  h1 {
    font-size: small;
  }

  .hovertest {
    padding-top: 10px;
    margin: 0;
  }

  .my-card2 {
    width: 90%;
    height: 130px;
    background-position: center;
    padding: 15px;
  }

  .my-card2:hover {
    background-size: 100% 128px;
  }

  .circular-progress-container {
    padding-bottom: 25px;
    width: 75px;
  }

  .circular-progress {
    width: 48px;
    /* Outer ring size */
    height: 48px;
    margin-right: 5px;
    /* Space between the circle and the factor image */
  }

  .inner-circle {
    width: 80%;
    /* Inner circle size */
    height: 80%;
    background-color: #FCF8EA;
    /* Inner circle color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    /* Ensure it is above the outer ring */
  }

  .factor-up-image {
    width: 12px;
    /* Adjust size as needed */
    height: auto;
    z-index: 2;
    /* Make sure it's on top */
    position: relative;
    /* Ensure it positions beside the circular progress */
    transform: translateX(0px);
    /* Optional: Adjust position */
    opacity: 0;
    /* Start with the image hidden */
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Apply transition effects */
    bottom: 3px;
  }


    .info-container1 img {
    width: 55%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
     padding-top: 35px;
  }

  .info-container1 .overlay-text {
    top: 28%;
    /* Adjust as needed */
    left: 49%;
    /* Adjust as needed */
    right: 10%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 8px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  .info-container2 img {
    width: 55%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
      padding-top: 35px;
  }

  .info-container2 .overlay-text {
    top: 22%;
    /* Adjust as needed */
    left: 50%;
    /* Adjust as needed */
    right: 15%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 7px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  #info-button {
    padding-top: 25px;
  }


  .game-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 8px 10px 8px 10px;
    width: 13%;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

   #car1,
  #car2,
  #car3 {
    padding-bottom: 200px;
  }

  #car-video1,
#car-video2,
#car-video3 {
  width: 100%;
  height: 92%;
  display: block;
}

 #scenario-video1, #scenario-video2,
 #scenario-video3, #scenario-video4 {
  width: 100%;
 height: 99%;
  display: block;
}

   #game1, #game2, #game3 {
    padding-bottom: 120px;
  }

 #game4 {
    padding-bottom: 100px;
  }



.car {
    width: 105px;
    height: auto;
    background: none;
  }

  /* Ensure the image fits within the card */
  .car-image {
    width: 100px;
    height: auto;
    object-fit: contain;
    /* Ensures the image covers the card area without distortion */
  }

  /* Focused Card */
  .car.focus {
    width: 120px;
    height: 150px;
    transform: translateX(0) scale(1.1);
    z-index: 3;
    opacity: 1;
    background-image: url('../img/cardhover.png');
    background-size: cover;
    /* Adjusts the background to fill the card */
    background-position: center;
    /* Centers the background image */
    background-repeat: no-repeat;
    /* Ensures the image doesn't repeat */
    margin: 20px auto;
  }

  .slider-btn {
    top: 40%;
  }


  .slider-btn.prev {
  left: 0;
}

.slider-btn.next {
  right: 0;
}

  .slider-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 770px;
    height: 180px;
    /* Adjust the height as needed */
    margin: auto;
  }

  .car.left {
    transform: translateX(-70px) scale(0.9);
    z-index: 2;
  }

  .car.right {
    transform: translateX(70px) scale(0.9);
    z-index: 2;
  }

  .choice-card {
    text-decoration: none;
    color: #206E63;
    /* Initial text color */
    font-size: 10px;
    font-weight: bold;
  }

   #choices-div {
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    gap: 5px;
  }

  #util-img {
  width: 55%;
  height: auto;
}

#util-div {
  padding-top: 40px;
}

#util-btn {
  padding-bottom: 28px;
}

#vacation {
  padding-top: 10px;
  width: 420px;
}

.monument {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 50px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin-bottom: 3px;
  /* Space between the image and location box */
}

.location {
  background-color: whitesmoke;
  width: 100px;
  height: 22px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 3px dotted #D4C029;
}

.japan1 {
  width: 80%;
  /* Make sure the image takes the full width of its container */
  max-height: 30px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 12px;
  /* Space between the image and location box */
}

.egypt1 {
  width: 70%;
  /* Make sure the image takes the full width of its container */
  max-height: 50px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 4px;
  /* Space between the image and location box */
}

#location7 {
  margin-left: 0px;
   width: 100px;
  height: 22px;
  padding: 10px;
  margin-right: 5px;
}

 #title-items {
    padding-top: 2px;
  }

    #vacay-box {
    margin-bottom: 7px;
    /* Add some space between rows */
    width: 100%;
    /* Ensure they take up 100% of their container width */
  }

   .imgs {
    width: 10%;
    /* Set the width relative to the container's width */
    height: auto;
    /* Maintain aspect ratio */
  }

  
    #wedding-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 70px;
    padding-right: 0px;
    padding-bottom: 160px;
  }

  #wedd-box {
  margin-top: 10px;
}

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 40px);
    gap: 3px;
    /* Centering handled by parent */
    /* Removed top, left, and transform */
  }

  .card-game {
    width: 40px;
    height: 50px;
    background: url('../img/wedding/card-cover.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #D4C029;
  }

  table {
    border-collapse: collapse;
    table-layout: auto;
    /* Adjust table to fit content width */
    width: auto;
    /* Table adjusts to fit its content */
    margin: 0 auto;
    /* Center table horizontally */
    width: 57%;
    /* Adjust to desired percentage */
    padding-top: 20px;
  }

  .tooltip-text {
  visibility: hidden;
  width: 100px;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  border-radius: 2px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 85%;
  /* Position above the image */
  left: 40%;
  margin-left: -60px;
  /* Adjust the tooltip to be centered */
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  font-size: 9px;
}

  .timer-text-box {
  font-size: 20px;
  font-weight: bold;
  color: #206E63;
}

.timer {
  font-size: 40px;
  font-weight: bold;
  color: #206E63;
}

.timer .colon {
  width: auto;
  /* Smaller width */
  height: 18px;
  /* Fixed height */
  margin-right: 10px;
}

#seconds {
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  font-size: 22px;
}

#secs {
  color: #206E63;
  font-size: 15px;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
}

.score {
  font-size: 20px;
  font-weight: bolder;
  color: #206E63;
}

#wedding-score1 {
  font-size: 22px;
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  text-align: left;
}


.text-box {
  font-size: 18px;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0);
  padding: 10px;
  margin: 20px 0;
  background-color: rgba(255, 255, 255, 0);
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  bottom: 40%;
  left: 10px;
  transform: translate(5%, -10%);
}

#wedd-img {
  width: 57%;
  height: auto;
}

#wedd-div {
  padding-top: 3px;
}

.fund1,
  .fund2,
  .fund3,
  .fund4 {
    margin: 0 auto;
    width: 68px;
    /* Adjust the width as needed */
    height: 68px;
    /* Adjust the height as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /*  transition: transform 0.1s ease; Smooth transition for scaling */
  }

    #email-div{
    padding-top: 70px;
  }


    #accept-email {
    padding-top: 160px;
    padding-left: 310px;
  }

  
.accept-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 6px 8px;
  font-size: 10px;
  cursor: pointer;
  visibility: hidden;
  /* Start hidden */
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.3s ease-in-out;
  animation: fadeInButton 0.3s ease-in-out 3s forwards;
  /* Delay of 6 seconds */
  text-decoration: none;
}

 #tips10 {
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* Fully transparent */
    transition: opacity 0.2s ease-in-out;
    animation: fadeInButton 0.2s ease-in-out 2s forwards;
    /* Delay of 6 seconds */
    display: none;
  }

  #tips13, #tips3 {
    position: absolute;
    top: 73%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* Fully transparent */
    transition: opacity 0.2s ease-in-out;
    animation: fadeInButton 0.2s ease-in-out 2s forwards;
    /* Delay of 6 seconds */
    display: none;
  }

  #tips10-info{
   width: 100%;
   height: 98%;
   display: block;
  }

  #tips13-info, #tips3-info {
   width: 85%;
   height: auto;
   display: block;
   position: relative;
  }

    #phone-button {
    padding-top: 135px;
  }

  .phone-call {
    background-image: url('../img/phonecall.png');
    width: 100%;
    /* Adjust as needed */
    height: 60vh;
    /* Adjust as needed */
    background-size: contain;
    /* Adjust as needed (cover, contain, etc.) */
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 20px;
  }

  #call-convo {
  padding-top: 15px;
}

.phone-img {
  width: 65%;
  height: auto;
  margin: 0 auto;
}

.quiz-progress {
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 15px;
}

#questions{
  padding-left: 15px;
}

 #question-words {
    color: #206E63;
    font-weight: bold;
    font-size: 12px;
  }

  .options {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto new lines */
    justify-content: center;
    /* Centers the items horizontally */
    align-items: flex-start;
    /* Aligns items to the top of the container */
    gap: 10px;
    /* Optional: Adds spacing between the options */
    font-size: 9px;
  }

  .options button {
    width: 320px;
    /* Set a fixed width for buttons */
    height: 30px;
    /* Set a fixed height for buttons */
    padding: 5px;
  }

  .vertical-line {
    position: absolute;
    top: 198px;
    /* Adjust this value to control the distance from the top */
    left: 51%;
    width: 1px;
    /* Line thickness */
    height: 14px;
    /* Line height */
    background-color: #206E63;
    /* Line color */
    transform: translateX(-50%);
    /* Center the line horizontally */
  }



  .options .option-top {
    flex: 1 1 5%;
    /* This makes the top options take up 45% of the width, adjust as needed */
  }

  .options .option-bottom {
    flex: 1 1 60%;
    /* The same for bottom options */
  }

  button {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    color: #206E63;
    font-weight: bold;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #206E63;
    padding: 20px;
    width: 80%;
  }

  #quiz-next {
    width: 4%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #nextbtn-div {
    padding-top: 0px;
  }

  .feedback {
    font-style: bold;
    font-size: 100%;
    margin-top: 5px;
    padding-top: 5px;
    margin-right: 20px;
    color: #fff;
    border-top: 2px dashed #7a797a;
    justify-content: flex-end;
    text-align: left;
    font-size: 9px;
  }

 
  #end-div {
    padding-top: 30px;
  }

  #end-body {
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 80px;
    padding-right: 80px;
  }

  #end-text{
    font-size: 12px;
    padding-bottom: 5px;
  }

  #end-button {
    margin-left: 130px;
    margin-right: 130px;
    padding-top: 5px;
  }

.game-end {
  background-color: #206E63;
  color: white;
  border: none;
  padding: 8px 10px 8px 10px;
  width: 20%;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}




#summary-div{
  height: 110px;
   padding-top: 20px;
}

#risk{
  margin-top: 0;
}

#risk-img{
 width: 30%;
 height: auto;

}

.result-container {
 position: relative;
  width: 170px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
}

.result-img {
 width: 100%;
  height: 60%;
  opacity: 1;
  position: relative;
}


.opacity-overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.resultarrow-img {
  position: absolute;
 left: 54%;
  /* Move the arrow to the right */
  transform: translateX(40%);
  /* Keep it centered relative to the new left position */
  width: 3%;
  /* Adjust the size as needed */
  height: auto;
  top: 65%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}



#result-text{
  position: absolute;
   font-size: 7px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 4%;
  transform: translateX(-50%);
}

.inner-circle2 {
  width: 40%;
  /* Inner circle size */
  height: 40%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}



.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}


.outer-ring2 {
  width: 55%;
  height: 55%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}


.circular-progress2 {
  width: 50px;
  /* Outer ring size */
  height: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 17px;
  /* Space between the circle and the factor image */
}


.circular-progress-container2 {
  align-items: center;
  justify-content: center;
  /* Align items horizontally */
  padding-top: 0px;
  padding-right: 1px;
  width: 80px;
  height: 70px;
}



.result-desc{
  padding-top: 2px;
  padding-left: 90px;
  padding-right: 70px;
}

#resulttext{
  font-size: 8px;
}

#result-button{
  padding-top: 0px;
}

#mood-container{
  height: 70px;
  width: 300px;
  margin-top: 30px;
}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 0px;
   padding-right: 20px;
   padding-left: 20px;
   font-size: 8px;
}

  .game-button3 {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 6px 8px 6px 8px;
    width: 13%;
    font-size: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }


    .main-display {
      width: 450px;
      height: 150px;
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      color: #ecee71;
      font-weight: bold;
      font-size: 1.2rem;
      position: relative;
      transition: opacity 0.5s ease;
      opacity: 1;
      padding-top: 80px;
    }

    #mainImage {
  max-width: 480px;
  max-height: auto;
  object-fit: cover; /* or cover */
}


    .main-display.fade {
      opacity: 0;
    }


      .thumbnail-wrapper img {
      width: 100%;
      height: 40px;
      cursor: pointer;
      transition: transform 0.3s ease, border-color 0.3s ease;
      border-radius: 6px;
      user-select: none;
  margin-bottom: 2px;
    }

  .thumbnail-wrapper img.active {
      transform: scale(1.25);
      border: 3px solid #D4C029;
    }

   .thumbnails {
padding-top: 0px;
}

}

@media (min-width: 780px) and (max-width: 899px) {
  #index {
    padding-top: 30px;
  }

    .sticky-row {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  background-color: unset;
  /* Optional: set a background color */
  z-index: 1000;
  /* Ensure it stays on top of other content */
  padding: 8px;
  /* Optional: add some padding */
  cursor: default;
}

  #home{
height: 17px;
width: auto;
}

#info {
  font-size: 15px;
  color: #206E63;
}

  #instruction1, #instruction2, #instruction3 {
    width: 100%;
    height: 93%;
    display: block;
  }

  #howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

  .howto-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 8px 10px 8px 10px;
    width: 13%;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

#footer {
  position: fixed;
  bottom: 80px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
}

.start-link {
  font-size: 12px;
}

  #narrative-style {
    padding-top: 30px;
    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 35px;
    padding-right: 35px;
  }

  #typewriter {
    font-size: 15px;
  }

  .index-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 10px 20px 10px 20px;
    width: 30%;
    font-size: 14px;
    font-weight: normal;
    opacity: 0;
    /* Initially hidden */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, opacity 1s;
    text-decoration: none;
    border-radius: 4px;

  }


  #creditmeter {
    position: fixed;
    top: 24px;
    /* Distance from the top */
    left: 0;
    /* Stick to the left */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #factormeter {
    position: fixed;
    top: 6px;
    /* Distance from the top */
    right: 37px;
    /* Stick to the right */
    width: 40%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #cs-font {
    font-size: 10px;
  }

  .credit-score-container {
    position: relative;
    height: 190px;
    /* Set a specific height */
    overflow: visible;
    /* Hide overflow */
  }

  .creditscore-img {
    width: 100%;
    height: 100%;
    opacity: 1;
    position: relative;
  }

  .opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.creditarrow-img {
  position: absolute;
  left: 90%;
  /* Move the arrow to the right */
  transform: translateX(-50%);
  /* Keep it centered relative to the new left position */
  width: 40%;
  /* Adjust the size as needed */
  height: auto;
  top: 49%;
  /* Adjust this value to place the a53rrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

  .hidden-section {
    padding-top: 5px;
  }

  #title-text {
    font-size:13px;
  padding-bottom: 8px;
  padding-top: 10px;
}

 #title-text2 {
    font-size:13px;
  padding-bottom: 4px;
  padding-top: 50px;
}

  #title-text3 {
    font-size:10px;
  padding-bottom: 8px;
  padding-top: 8px;
  }

   #title-text4 {
    font-size:10px;
  padding-bottom: 8px;
  padding-top: 60px;
  }

   #game-desc1 {
    font-size:11px;
  padding-top: 5px;
  padding-bottom: 5px;
  }

  h1 {
    font-size: small;
  }

  .hovertest {
    padding-top: 10px;
    margin: 0;
  }

  .my-card2 {
    width: 90%;
    height: 148px;
    background-position: center;
    padding: 15px;
  }

  .my-card2:hover {
    background-size: 100% 150px;
  }

  .circular-progress-container {
    padding-bottom: 25px;
    width: 75px;
  }

  .circular-progress {
    width: 48px;
    /* Outer ring size */
    height: 48px;
    margin-right: 5px;
    /* Space between the circle and the factor image */
  }

  .inner-circle {
    width: 80%;
    /* Inner circle size */
    height: 80%;
    background-color: #FCF8EA;
    /* Inner circle color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    /* Ensure it is above the outer ring */
  }

  .factor-up-image {
    width: 12px;
    /* Adjust size as needed */
    height: auto;
    z-index: 2;
    /* Make sure it's on top */
    position: relative;
    /* Ensure it positions beside the circular progress */
    transform: translateX(0px);
    /* Optional: Adjust position */
    opacity: 0;
    /* Start with the image hidden */
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Apply transition effects */
    bottom: 3px;
  }


    .info-container1 img {
    width: 50%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
     padding-top: 30px;
  }

  .info-container1 .overlay-text {
    top: 25%;
    /* Adjust as needed */
    left: 49%;
    /* Adjust as needed */
    right: 16%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 8px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  .info-container2 img {
    width: 50%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
     padding-top: 25px;
  }

  .info-container2 .overlay-text {
    top: 25%;
    /* Adjust as needed */
    left: 50%;
    /* Adjust as needed */
    right: 15%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 8px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  #info-button {
    padding-top: 25px;
  }


  .game-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 8px 10px 8px 10px;
    width: 13%;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

   #car1,
  #car2,
  #car3 {
    padding-bottom: 200px;
  }

  #car-video1,
#car-video2,
#car-video3 {
  width: 100%;
  height: 92%;
  display: block;
}

 #scenario-video1, #scenario-video2,
  #scenario-video3, #scenario-video4 {
  width: 100%;
 height: 98%;
  display: block;
}

 #game1, #game2,
   #game3 {
    padding-bottom: 120px;
  }

#game4 {
    padding-bottom: 98px;
  }

.car {
    width: 105px;
    height: auto;
    background: none;
  }

  /* Ensure the image fits within the card */
  .car-image {
    width: 100px;
    height: auto;
    object-fit: contain;
    /* Ensures the image covers the card area without distortion */
  }

  /* Focused Card */
  .car.focus {
    width: 120px;
    height: 150px;
    transform: translateX(0) scale(1.1);
    z-index: 3;
    opacity: 1;
    background-image: url('../img/cardhover.png');
    background-size: cover;
    /* Adjusts the background to fill the card */
    background-position: center;
    /* Centers the background image */
    background-repeat: no-repeat;
    /* Ensures the image doesn't repeat */
    margin: 20px auto;
  }

  .slider-btn {
    top: 40%;
  }


  .slider-btn.prev {
  left: 0;
}

.slider-btn.next {
  right: 0;
}

  .slider-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 770px;
    height: 180px;
    /* Adjust the height as needed */
    margin: auto;
  }

  .car.left {
    transform: translateX(-70px) scale(0.9);
    z-index: 2;
  }

  .car.right {
    transform: translateX(70px) scale(0.9);
    z-index: 2;
  }

  .choice-card {
    text-decoration: none;
    color: #206E63;
    /* Initial text color */
    font-size: 10px;
    font-weight: bold;
  }

   #choices-div {
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    gap: 5px;
  }

  #util-img {
  width: 55%;
  height: auto;
}

#util-div {
  padding-top: 40px;
}

#util-btn {
  padding-bottom: 28px;
}

#vacation {
  padding-top: 20px;
  width: 420px;
}

.monument {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 50px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin-bottom: 3px;
  /* Space between the image and location box */
}

.location {
  background-color: whitesmoke;
  width: 100px;
  height: 22px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 3px dotted #D4C029;
}

.japan1 {
  width: 80%;
  /* Make sure the image takes the full width of its container */
  max-height: 30px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 12px;
  /* Space between the image and location box */
}

.egypt1 {
  width: 70%;
  /* Make sure the image takes the full width of its container */
  max-height: 50px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 4px;
  /* Space between the image and location box */
}

#location7 {
  margin-left: 0px;
   width: 100px;
  height: 22px;
  padding: 10px;
  margin-right: 5px;
}

 #title-items {
    padding-top: 2px;
  }

    #vacay-box {
    margin-bottom: 7px;
    /* Add some space between rows */
    width: 100%;
    /* Ensure they take up 100% of their container width */
  }

   .imgs {
    width: 10%;
    /* Set the width relative to the container's width */
    height: auto;
    /* Maintain aspect ratio */
  }

  
    #wedding-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 70px;
    padding-right: 0px;
    padding-bottom: 160px;
  }

  #wedd-box {
  margin-top: 10px;
}

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 40px);
    gap: 3px;
    /* Centering handled by parent */
    /* Removed top, left, and transform */
  }

  .card-game {
    width: 40px;
    height: 50px;
    background: url('../img/wedding/card-cover.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #D4C029;
  }

  table {
    border-collapse: collapse;
    table-layout: auto;
    /* Adjust table to fit content width */
    width: auto;
    /* Table adjusts to fit its content */
    margin: 0 auto;
    /* Center table horizontally */
    width: 50%;
    /* Adjust to desired percentage */
    padding-top: 20px;
  }

  .tooltip-text {
  visibility: hidden;
  width: 100px;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  border-radius: 2px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 85%;
  /* Position above the image */
  left: 40%;
  margin-left: -60px;
  /* Adjust the tooltip to be centered */
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  font-size: 9px;
}

  .timer-text-box {
  font-size: 20px;
  font-weight: bold;
  color: #206E63;
}

.timer {
  font-size: 40px;
  font-weight: bold;
  color: #206E63;
}

.timer .colon {
  width: auto;
  /* Smaller width */
  height: 18px;
  /* Fixed height */
  margin-right: 10px;
}

#seconds {
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  font-size: 22px;
}

#secs {
  color: #206E63;
  font-size: 15px;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
}

.score {
  font-size: 20px;
  font-weight: bolder;
  color: #206E63;
}

#wedding-score1 {
  font-size: 22px;
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  text-align: left;
}


.text-box {
  font-size: 18px;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0);
  padding: 10px;
  margin: 20px 0;
  background-color: rgba(255, 255, 255, 0);
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  bottom: 40%;
  left: 10px;
  transform: translate(5%, -10%);
}

#wedd-img {
  width: 57%;
  height: auto;
}

#wedd-div {
  padding-top: 3px;
}

.fund1,
  .fund2,
  .fund3,
  .fund4 {
    margin: 0 auto;
    width: 68px;
    /* Adjust the width as needed */
    height: 68px;
    /* Adjust the height as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /*  transition: transform 0.1s ease; Smooth transition for scaling */
  }

    #email-div{
    padding-top: 70px;
  }


    #accept-email {
    padding-top: 160px;
    padding-left: 320px;
  }

  
.accept-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 6px 8px;
  font-size: 10px;
  cursor: pointer;
  visibility: hidden;
  /* Start hidden */
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.3s ease-in-out;
  animation: fadeInButton 0.3s ease-in-out 3s forwards;
  /* Delay of 6 seconds */
  text-decoration: none;
}


  #tips13, #tips3, #tips10 {
    position: absolute;
    top: 73%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* Fully transparent */
    transition: opacity 0.2s ease-in-out;
    animation: fadeInButton 0.2s ease-in-out 2s forwards;
    /* Delay of 6 seconds */
    display: none;
  }

  #tips10-info{
   width: 100%;
   height: 98%;
   display: block;
  }

   #tips13-info, #tips3-info{
   width: 85%;
   height: auto;
   display: block;
   position: relative;
  }

    #phone-button {
    padding-top: 148px;
  }

  .phone-call {
    background-image: url('../img/phonecall.png');
    width: 100%;
    /* Adjust as needed */
    height: 60vh;
    /* Adjust as needed */
    background-size: contain;
    /* Adjust as needed (cover, contain, etc.) */
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 20px;
  }

  #call-convo {
  padding-top: 15px;
}

.phone-img {
  width: 65%;
  height: auto;
  margin: 0 auto;
}

.quiz-progress {
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 16px;
}

#questions{
  padding-left: 15px;
}

 #question-words {
    color: #206E63;
    font-weight: bold;
    font-size: 12px;
  }

  .options {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto new lines */
    justify-content: center;
    /* Centers the items horizontally */
    align-items: flex-start;
    /* Aligns items to the top of the container */
    gap: 10px;
    /* Optional: Adds spacing between the options */
    font-size: 9px;
  }

  .options button {
    width: 320px;
    /* Set a fixed width for buttons */
    height: 30px;
    /* Set a fixed height for buttons */
    padding: 5px;
  }

  .vertical-line {
    position: absolute;
    top: 198px;
    /* Adjust this value to control the distance from the top */
    left: 51%;
    width: 1px;
    /* Line thickness */
    height: 14px;
    /* Line height */
    background-color: #206E63;
    /* Line color */
    transform: translateX(-50%);
    /* Center the line horizontally */
  }



  .options .option-top {
    flex: 1 1 5%;
    /* This makes the top options take up 45% of the width, adjust as needed */
  }

  .options .option-bottom {
    flex: 1 1 60%;
    /* The same for bottom options */
  }

  button {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    color: #206E63;
    font-weight: bold;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #206E63;
    padding: 20px;
    width: 80%;
  }

  #quiz-next {
    width: 4%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #nextbtn-div {
    padding-top: 0px;
  }

  .feedback {
    font-style: bold;
    font-size: 100%;
    margin-top: 5px;
    padding-top: 5px;
    margin-right: 20px;
    color: #fff;
    border-top: 2px dashed #7a797a;
    justify-content: flex-end;
    text-align: left;
    font-size: 9px;
  }

 
  #end-div {
    padding-top: 40px;
  }

  #end-body {
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 80px;
    padding-right: 80px;
  }

  #end-text{
    font-size: 12px;
    padding-bottom: 5px;
  }

  #end-button {
    margin-left: 130px;
    margin-right: 130px;
    padding-top: 5px;
  }

.game-end {
  background-color: #206E63;
  color: white;
  border: none;
  padding: 8px 10px 8px 10px;
  width: 20%;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}



#summary-div{
  height: 110px;
   padding-top: 20px;
}

#risk{
  margin-top: 10px;
}

#risk-img{
 width: 30%;
 height: auto;

}

.result-container {
position: relative;
  width: 190px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
}



.result-img {
 width: 100%;
  height: 50%;
  opacity: 1;
  position: relative;
}



.opacity-overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}


.resultarrow-img {
  position: absolute;
 left: 54%;
  /* Move the arrow to the right */
  transform: translateX(30%);
  /* Keep it centered relative to the new left position */
  width: 3%;
  /* Adjust the size as needed */
  height: auto;
  top: 65%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}



#result-text{
  position: absolute;
   font-size: 7px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 4%;
  transform: translateX(-50%);
}

.inner-circle2 {
  width: 40%;
  /* Inner circle size */
  height: 40%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}


.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}


.outer-ring2 {
  width: 55%;
  height: 55%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}



.circular-progress2 {
  width: 50px;
  /* Outer ring size */
  height: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 17px;
  /* Space between the circle and the factor image */
}



.circular-progress-container2 {
  align-items: center;
  justify-content: center;
  /* Align items horizontally */
  padding-top: 0px;
  padding-right: 1px;
  width: 80px;
  height: 70px;
}


.result-desc{
  padding-top: 2px;
  padding-left: 90px;
  padding-right: 70px;
}

#resulttext{
  font-size: 8px;
}

#result-button{
  padding-top: 0px;
}

#mood-container{
  height: 70px;
  width: 300px;
  margin-top: 35px;
}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 0px;
   padding-right: 20px;
   padding-left: 20px;
   font-size: 8px;
}

  .game-button3 {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 6px 8px 6px 8px;
    width: 13%;
    font-size: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

  
    .main-display {
      width: 450px;
      height: 150px;
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      color: #ecee71;
      font-weight: bold;
      font-size: 1.2rem;
      position: relative;
      transition: opacity 0.5s ease;
      opacity: 1;
      padding-top: 60px;
    }

    #mainImage {
  max-width: 480px;
  max-height: auto;
  object-fit: cover; /* or cover */
      padding-top: 10px;
}


    .main-display.fade {
      opacity: 0;
    }

    .thumbnail-wrapper img {
      width: 100%;
      height: 40px;
      cursor: pointer;
      transition: transform 0.3s ease, border-color 0.3s ease;
      border-radius: 6px;
      user-select: none;
  margin-bottom: 2px;
    }

  .thumbnail-wrapper img.active {
      transform: scale(1.25);
      border: 3px solid #D4C029;
    }

   .thumbnails {
padding-top: 0px;
}

}



@media (min-width: 900px) and (max-width: 999px) {
  #index {
    padding-top: 20px;
  }

    .sticky-row {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  background-color: unset;
  /* Optional: set a background color */
  z-index: 1000;
  /* Ensure it stays on top of other content */
  padding-top: 3px;
  /* Optional: add some padding */
  cursor: default;
}

  #home{
height: 17px;
width: auto;
}

#info {
  font-size: 15px;
  color: #206E63;
}

#narration1, #narration2, #narration3 {

    position: relative;
    /* Change to relative */
    width: 100vw;
    height: 100vh;
    /* Cover the full viewport height */
    margin: 0;
    padding: 0;
    background-size: contain;


}

 #instruction1, #instruction2, #instruction3 {
    width: 100%;
    height: 93%;
    display: block;
  }


  #howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

#footer {
  position: fixed;
  bottom: 70px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
}

.start-link {
  font-size: 12px;
}

  #narrative-style {
    padding-top: 18px;
    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 35px;
    padding-right: 35px;
  }

  #typewriter {
    font-size: 15px;
  }

  .index-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 10px 20px 10px 20px;
    width: 30%;
    font-size: 14px;
    font-weight: normal;
    opacity: 0;
    /* Initially hidden */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, opacity 1s;
    text-decoration: none;
    border-radius: 4px;

  }


  #creditmeter {
    position: fixed;
    top: 24px;
    /* Distance from the top */
    left: 0;
    /* Stick to the left */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #factormeter {
    position: fixed;
    top: 6px;
    /* Distance from the top */
    right: 37px;
    /* Stick to the right */
    width: 40%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #cs-font {
    font-size: 10px;
  }

  .credit-score-container {
    position: relative;
    height: 175px;
    /* Set a specific height */
    overflow: visible;
    /* Hide overflow */
  }

  .creditscore-img {
    width: 100%;
    height: 100%;
    opacity: 1;
    position: relative;
  }

  .opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.creditarrow-img {
  position: absolute;
  left: 90%;
  /* Move the arrow to the right */
  transform: translateX(-50%);
  /* Keep it centered relative to the new left position */
  width: 40%;
  /* Adjust the size as needed */
  height: auto;
  top: 49%;
  /* Adjust this value to place the a53rrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

  .hidden-section {
    padding-top: 5px;
  }

  #title-text {
    font-size:13px;
  padding-bottom: 8px;
  padding-top: 8px;
}

 #title-text2 {
    font-size:13px;
  padding-bottom: 8px;
  padding-top: 60px;
}

  #title-text3 {
    font-size:10px;
  padding-bottom: 8px;
  padding-top: 8px;
  }

   #title-text4 {
    font-size:10px;
  padding-bottom: 8px;
  padding-top: 60px;
  }

   #game-desc1 {
    font-size:11px;
  padding-top: 5px;
  padding-bottom: 5px;
  }

  h1 {
    font-size: small;
  }

  .hovertest {
    padding-top: 10px;
    margin: 0;
  }

  .my-card2 {
    width: 90%;
    height: 148px;
    background-position: center;
    padding: 15px;
  }

  .my-card2:hover {
    background-size: 100% 150px;
  }

  .circular-progress-container {
    padding-bottom: 25px;
    width: 75px;
  }

  .circular-progress {
    width: 48px;
    /* Outer ring size */
    height: 48px;
    margin-right: 5px;
    /* Space between the circle and the factor image */
  }

  .inner-circle {
    width: 80%;
    /* Inner circle size */
    height: 80%;
    background-color: #FCF8EA;
    /* Inner circle color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    /* Ensure it is above the outer ring */
  }

  .factor-up-image {
    width: 12px;
    /* Adjust size as needed */
    height: auto;
    z-index: 2;
    /* Make sure it's on top */
    position: relative;
    /* Ensure it positions beside the circular progress */
    transform: translateX(0px);
    /* Optional: Adjust position */
    opacity: 0;
    /* Start with the image hidden */
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Apply transition effects */
    bottom: 3px;
  }

 
  .howto-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 8px 10px 8px 10px;
    width: 13%;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

    .info-container1 img {
    width: 50%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
     padding-top: 20px;
  }

  .info-container1 .overlay-text {
    top: 25%;
    /* Adjust as needed */
    left: 49%;
    /* Adjust as needed */
    right: 16%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 8px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  .info-container2 img {
    width: 50%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
     padding-top: 15px;
  }

  .info-container2 .overlay-text {
    top: 25%;
    /* Adjust as needed */
    left: 50%;
    /* Adjust as needed */
    right: 15%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 8px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  #info-button {
    padding-top: 25px;
  }


  .game-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 8px 10px 8px 10px;
    width: 13%;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

   #car1,
  #car2,
  #car3 {
    padding-bottom: 180px;
  }

  #car-video1,
#car-video2,
#car-video3 {
  width: 100%;
  height: 92%;
  display: block;
}

 #scenario-video1, #scenario-video2,
  #scenario-video3, #scenario-video4 {
  width: 100%;
 height: 98%;
  display: block;
}


 #game1, #game2,
   #game3, #game4 {
    padding-bottom: 98px;
  }

.car {
    width: 105px;
    height: auto;
    background: none;
  }

  /* Ensure the image fits within the card */
  .car-image {
    width: 100px;
    height: auto;
    object-fit: contain;
    /* Ensures the image covers the card area without distortion */
  }

  /* Focused Card */
  .car.focus {
    width: 120px;
    height: 150px;
    transform: translateX(0) scale(1.1);
    z-index: 3;
    opacity: 1;
    background-image: url('../img/cardhover.png');
    background-size: cover;
    /* Adjusts the background to fill the card */
    background-position: center;
    /* Centers the background image */
    background-repeat: no-repeat;
    /* Ensures the image doesn't repeat */
    margin: 20px auto;
  }

  .slider-btn {
    top: 40%;
  }


  .slider-btn.prev {
  left: 0;
}

.slider-btn.next {
  right: 0;
}

  .slider-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 770px;
    height: 180px;
    /* Adjust the height as needed */
    margin: auto;
  }

  .car.left {
    transform: translateX(-70px) scale(0.9);
    z-index: 2;
  }

  .car.right {
    transform: translateX(70px) scale(0.9);
    z-index: 2;
  }

  .choice-card {
    text-decoration: none;
    color: #206E63;
    /* Initial text color */
    font-size: 10px;
    font-weight: bold;
  }

   #choices-div {
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    gap: 5px;
  }

  #util-img {
  width: 55%;
  height: auto;
}

#util-div {
  padding-top: 40px;
}

#util-btn {
  padding-bottom: 28px;
}

#vacation {
  padding-top: 20px;
  width: 420px;
}

.monument {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 50px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin-bottom: 3px;
  /* Space between the image and location box */
}

.location {
  background-color: whitesmoke;
  width: 100px;
  height: 22px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 3px dotted #D4C029;
}

.japan1 {
  width: 80%;
  /* Make sure the image takes the full width of its container */
  max-height: 30px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 12px;
  /* Space between the image and location box */
}

.egypt1 {
  width: 70%;
  /* Make sure the image takes the full width of its container */
  max-height: 50px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 4px;
  /* Space between the image and location box */
}

#location7 {
  margin-left: 0px;
   width: 100px;
  height: 22px;
  padding: 10px;
  margin-right: 5px;
}

 #title-items {
    padding-top: 2px;
  }

    #vacay-box {
    margin-bottom: 7px;
    /* Add some space between rows */
    width: 100%;
    /* Ensure they take up 100% of their container width */
  }

   .imgs {
    width: 10%;
    /* Set the width relative to the container's width */
    height: auto;
    /* Maintain aspect ratio */
  }

  
    #wedding-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 70px;
    padding-right: 0px;
    padding-bottom: 160px;
  }

  #wedd-box {
  margin-top: 10px;
}

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 40px);
    gap: 3px;
    /* Centering handled by parent */
    /* Removed top, left, and transform */
  }

  .card-game {
    width: 40px;
    height: 50px;
    background: url('../img/wedding/card-cover.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #D4C029;
  }

  table {
    border-collapse: collapse;
    table-layout: auto;
    /* Adjust table to fit content width */
    width: auto;
    /* Table adjusts to fit its content */
    margin: 0 auto;
    /* Center table horizontally */
    width: 50%;
    /* Adjust to desired percentage */
    padding-top: 20px;
  }

  .tooltip-text {
  visibility: hidden;
  width: 100px;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  border-radius: 2px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 85%;
  /* Position above the image */
  left: 40%;
  margin-left: -60px;
  /* Adjust the tooltip to be centered */
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  font-size: 9px;
}

  .timer-text-box {
  font-size: 20px;
  font-weight: bold;
  color: #206E63;
}

.timer {
  font-size: 40px;
  font-weight: bold;
  color: #206E63;
}

.timer .colon {
  width: auto;
  /* Smaller width */
  height: 18px;
  /* Fixed height */
  margin-right: 10px;
}

#seconds {
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  font-size: 22px;
}

#secs {
  color: #206E63;
  font-size: 15px;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
}

.score {
  font-size: 20px;
  font-weight: bolder;
  color: #206E63;
}

#wedding-score1 {
  font-size: 22px;
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  text-align: left;
}


.text-box {
  font-size: 18px;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0);
  padding: 10px;
  margin: 20px 0;
  background-color: rgba(255, 255, 255, 0);
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  bottom: 40%;
  left: 10px;
  transform: translate(5%, -10%);
}

#wedd-img {
  width: 57%;
  height: auto;
}

#wedd-div {
  padding-top: 3px;
}

.fund1,
  .fund2,
  .fund3,
  .fund4 {
    margin: 0 auto;
    width: 68px;
    /* Adjust the width as needed */
    height: 68px;
    /* Adjust the height as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /*  transition: transform 0.1s ease; Smooth transition for scaling */
  }

    #email-div{
    padding-top: 70px;
  }


    #accept-email {
    padding-top: 160px;
    padding-left: 330px;
  }

  
.accept-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 6px 8px;
  font-size: 10px;
  cursor: pointer;
  visibility: hidden;
  /* Start hidden */
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.3s ease-in-out;
  animation: fadeInButton 0.3s ease-in-out 3s forwards;
  /* Delay of 6 seconds */
  text-decoration: none;
}

 #tips10 {
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* Fully transparent */
    transition: opacity 0.2s ease-in-out;
    animation: fadeInButton 0.2s ease-in-out 2s forwards;
    /* Delay of 6 seconds */
    display: none;
  }

  #tips13, #tips3 {
    position: absolute;
    top: 73%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* Fully transparent */
    transition: opacity 0.2s ease-in-out;
    animation: fadeInButton 0.2s ease-in-out 2s forwards;
    /* Delay of 6 seconds */
    display: none;
  }

  #tips10-info{
   width: 100%;
   height: 98%;
   display: block;
  }

   #tips13-info, #tips3-info{
   width: 85%;
   height: auto;
   display: block;
   position: relative;
  }

    #phone-button {
    padding-top: 148px;
  }

  .phone-call {
    background-image: url('../img/phonecall.png');
    width: 100%;
    /* Adjust as needed */
    height: 60vh;
    /* Adjust as needed */
    background-size: contain;
    /* Adjust as needed (cover, contain, etc.) */
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 20px;
  }

  #call-convo {
  padding-top: 15px;
}

.phone-img {
  width: 65%;
  height: auto;
  margin: 0 auto;
}

.quiz-progress {
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 16px;
}

#questions{
  padding-left: 15px;
}

 #question-words {
    color: #206E63;
    font-weight: bold;
    font-size: 12px;
  }

  .options {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto new lines */
    justify-content: center;
    /* Centers the items horizontally */
    align-items: flex-start;
    /* Aligns items to the top of the container */
    gap: 10px;
    /* Optional: Adds spacing between the options */
    font-size: 9px;
  }

  .options button {
    width: 320px;
    /* Set a fixed width for buttons */
    height: 30px;
    /* Set a fixed height for buttons */
    padding: 5px;
  }

  .vertical-line {
    position: absolute;
    top: 198px;
    /* Adjust this value to control the distance from the top */
    left: 51%;
    width: 1px;
    /* Line thickness */
    height: 14px;
    /* Line height */
    background-color: #206E63;
    /* Line color */
    transform: translateX(-50%);
    /* Center the line horizontally */
  }



  .options .option-top {
    flex: 1 1 5%;
    /* This makes the top options take up 45% of the width, adjust as needed */
  }

  .options .option-bottom {
    flex: 1 1 60%;
    /* The same for bottom options */
  }

  button {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    color: #206E63;
    font-weight: bold;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #206E63;
    padding: 20px;
    width: 80%;
  }

  #quiz-next {
    width: 4%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #nextbtn-div {
    padding-top: 0px;
  }

  .feedback {
    font-style: bold;
    font-size: 100%;
    margin-top: 5px;
    padding-top: 5px;
    margin-right: 20px;
    color: #fff;
    border-top: 2px dashed #7a797a;
    justify-content: flex-end;
    text-align: left;
    font-size: 9px;
  }

 
  #end-div {
    padding-top: 30px;
  }

  #end-body {
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 80px;
    padding-right: 80px;
  }

  #end-text{
    font-size: 12px;
    padding-bottom: 5px;
  }

  #end-button {
    margin-left: 130px;
    margin-right: 130px;
    padding-top: 5px;
  }

.game-end {
  background-color: #206E63;
  color: white;
  border: none;
  padding: 8px 10px 8px 10px;
  width: 20%;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}



#summary-div{
  height: 110px;
   padding-top: 20px;
}

#risk{
  margin-top: 10px;
}

#risk-img{
 width: 30%;
 height: auto;

}

.result-container {
   position: relative;
  width: 175px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
}



.result-img {
 width: 100%;
  height: 60%;
  opacity: 1;
  position: relative;
}



.opacity-overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 80%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}


.resultarrow-img {
  position: absolute;
 left: 54%;
  /* Move the arrow to the right */
  transform: translateX(-30%);
  /* Keep it centered relative to the new left position */
  width: 3%;
  /* Adjust the size as needed */
  height: auto;
  top: 35%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}



#result-text{
  position: absolute;
   font-size: 7px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 4%;
  transform: translateX(-50%);
}

.inner-circle2 {
  width: 40%;
  /* Inner circle size */
  height: 40%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}


.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}


.outer-ring2 {
  width: 55%;
  height: 55%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}



.circular-progress2 {
  width: 50px;
  /* Outer ring size */
  height: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 17px;
  /* Space between the circle and the factor image */
}



.circular-progress-container2 {
  align-items: center;
  justify-content: center;
  /* Align items horizontally */
  padding-top: 0px;
  padding-right: 1px;
  width: 80px;
  height: 70px;
}


.result-desc{
  padding-top: 2px;
  padding-left: 90px;
  padding-right: 70px;
}

#resulttext{
  font-size: 8px;
}

#result-button{
  padding-top: 0px;
}

#mood-container{
  height: 70px;
  width: 300px;
  margin-top: 35px;
}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 0px;
   padding-right: 20px;
   padding-left: 20px;
   font-size: 8px;
}

  .game-button3 {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 6px 8px 6px 8px;
    width: 13%;
    font-size: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

  
    .main-display {
      width: 450px;
      height: 140px;
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      color: #ecee71;
      font-weight: bold;
      font-size: 1.2rem;
      position: relative;
      transition: opacity 0.5s ease;
      opacity: 1;
      padding-top: 60px;
    }

    #mainImage {
  max-width: 480px;
  max-height: auto;
  object-fit: cover; /* or cover */
      padding-top: 20px;
}


    .main-display.fade {
      opacity: 0;
    }

 

    .thumbnail-wrapper img {
      width: 100%;
      height: 40px;
      cursor: pointer;
      transition: transform 0.3s ease, border-color 0.3s ease;
      border-radius: 6px;
      user-select: none;
  margin-bottom: 3px;
    }

  .thumbnail-wrapper img.active {
      transform: scale(1.25);
      border: 3px solid #D4C029;
    }

   .thumbnails {
padding-top: 2px;
}


}

@media (min-width: 1000px) and (max-width: 1200px) {
  #index {
    padding-top: 80px;
  }

     .sticky-row {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  background-color: unset;
  /* Optional: set a background color */
  z-index: 1000;
  /* Ensure it stays on top of other content */
  padding-top: 18px;
  /* Optional: add some padding */
  cursor: default;
}

#footer {
  position: fixed;
  bottom: 150px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
}

  #home{
height: 26px;
width: auto;
}

#info {
  font-size: 24px;
  color: #206E63;
}


  #instruction1, #instruction2, #instruction3 {
    width: 100%;
    height: 100%;
    display: block;
  }


    #howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

  #narrative-style {
    padding-top: 18vh;
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 20px;
  }

  #typewriter {
    font-size: 22px;

  }

  .index-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 12px 25px 12px 25px;
    width: 15%;
    font-size: 14px;
    font-weight: normal;
    opacity: 0;
    /* Initially hidden */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, opacity 1s;
    text-decoration: none;
    border-radius: 4px;

  }

  .grid {
    top: 10%;
    left: 10%;
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 10px;
    position: relative;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    z-index: 1000;
  }

  #car1,
  #car2,
  #car3 {
    padding-bottom: 250px;
  }



  #creditmeter {
    position: fixed;
    top: 60px;
    /* Distance from the top */
    left: 0;
    /* Stick to the left */
    width: 30%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #factormeter {
    position: fixed;
    top: 50px;
    /* Distance from the top */
    right: 18px;
    /* Stick to the right */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #cs-font {
    font-size: 18px;
    text-align: center;
  }

  .credit-score-container {
    position: relative;
    height: 315px;
    /* Set a specific height */
    overflow: visible;
    /* Hide overflow */
  }

.creditscore-img {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: relative;
}


.opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 125%;
  height: 99%;
background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.creditarrow-img {
  position: absolute;
  left: 90%;
  /* Move the arrow to the right */
  transform: translateX(-50%);
  /* Keep it centered relative to the new left position */
  width: 44%;
  /* Adjust the size as needed */
  height: auto;
  top: 48%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

  #title-text {
    font-size: large;
  padding-top: 20px;
  }

   #title-text2 {
    font-size:large;
  padding-top: 110px;
}

 #title-text3 {
 font-size: large;
}

 #title-text4 {
   font-size:large;
  padding-top: 120px;
  }

  h1 {
    font-size: x-large;
  }

  .hovertest {
    padding-top: 20px;
    margin: 0;
  }

  .my-card2 {
    width: 100%;
    height: 240px;
    background-position: center;
    padding: 15px;
  }

  .my-card2:hover {
    background-size: 100% 245px;
  }

  .circular-progress-container {
    padding-bottom: 50px;
  }

  .circular-progress {
    width: 80px;
    /* Outer ring size */
    height: 80px;
    margin-right: 10px;
    /* Space between the circle and the factor image */
  }

  .inner-circle {
    width: 83%;
    /* Inner circle size */
    height: 83%;
    background-color: #FCF8EA;
    /* Inner circle color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    /* Ensure it is above the outer ring */
  }

  .factor-up-image {
    width: 24px;
    /* Adjust size as needed */
    height: auto;
    z-index: 2;
    /* Make sure it's on top */
    position: relative;
    /* Ensure it positions beside the circular progress */
    transform: translateX(0px);
    /* Optional: Adjust position */
    opacity: 0;
    /* Start with the image hidden */
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Apply transition effects */
    bottom: 3px;
  }

  .monument {
    width: 40%;
    padding-bottom: 8px;
    padding-right: 4px;
    height: auto;
  }

  #vacation {
    padding-top: 30px;
  }

  .location {
    width: 150px;
    height: 42px;
    padding: 10px;
  }

  #title-items {
    padding-top: 5px;
  }

  #vacay-box {
    margin-bottom: 10px;
    /* Add some space between rows */
    width: 100%;
    /* Ensure they take up 100% of their container width */
  }

  .imgs {
    width: 10%;
    /* Set the width relative to the container's width */
    height: auto;
    /* Maintain aspect ratio */
  }

    .info-container1 img {
    width: 64%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
    padding-top: 35px;
  }

  .info-container1 .overlay-text {
    top: 34%;
    /* Adjust as needed */
    left: 49%;
    /* Adjust as needed */
    right: 14%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 11px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  .info-container2 img {
    width: 64%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
    padding-top: 35px;
  }

  .info-container2 .overlay-text {
    top: 34%;
    /* Adjust as needed */
    left: 50%;
    /* Adjust as needed */
    right: 14%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 11px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  #info-button {
    padding-top: 40px;
  }

  .car {
    width: 145px;
    height: auto;
    background: none;
  }

  /* Ensure the image fits within the card */
  .car-image {
    width: 140px;
    height: auto;
    object-fit: contain;
    /* Ensures the image covers the card area without distortion */
  }

  /* Focused Card */
  .car.focus {
    width: 160px;
    height: 207px;
    transform: translateX(0) scale(1.1);
    z-index: 3;
    opacity: 1;
    background-image: url('../img/cardhover.png');
    background-size: cover;
    /* Adjusts the background to fill the card */
    background-position: center;
    /* Centers the background image */
    background-repeat: no-repeat;
    /* Ensures the image doesn't repeat */
    margin: 20px auto;
  }

  .slider-btn {
    top: 50%;
  }

  .slider-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 730px;
    height: 320px;
    /* Adjust the height as needed */
  }

  .car.left {
    transform: translateX(-110px) scale(0.9);
    z-index: 2;
  }

  .car.right {
    transform: translateX(110px) scale(0.9);
    z-index: 2;
  }

  #choices-div {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-left: 80px;
    padding-right: 80px;
    gap: 5px;
  }

  .choice-card {
    text-decoration: none;
    color: #206E63;
    /* Initial text color */
    font-size: 16px;
    font-weight: bold;
  }

  .game-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 12px 25px 12px 25px;
    width: 15%;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

  #game1, #game2, #game3 {
    top: 73%;
  }

   #game4 {
    top: 60%;
  }

  .monument {
    width: 70%;
    /* Make sure the image takes the full width of its container */
    max-height: 100px;
    /* Limit the maximum height of the images */
    object-fit: contain;
    /* Ensures that the image is resized to fit within the box without distortion */
    margin-bottom: 10px;
    /* Space between the image and location box */
  }

  .japan1 {
    width: 100%;
    /* Make sure the image takes the full width of its container */
    max-height: 100px;
    /* Limit the maximum height of the images */
    object-fit: contain;
    /* Ensures that the image is resized to fit within the box without distortion */
    margin: 13px;
    /* Space between the image and location box */
  }

  .egypt1 {
    width: 95%;
    /* Make sure the image takes the full width of its container */
    max-height: 150px;
    /* Limit the maximum height of the images */
    object-fit: contain;
    /* Ensures that the image is resized to fit within the box without distortion */
    margin: 5px;
    /* Space between the image and location box */
  }

  #location7 {
    margin-left: 10px;
  }

  #wedding-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 220px;
    padding-left: 10px;
    padding-right: 20px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 70px);
    gap: 3px;
    /* Centering handled by parent */
    /* Removed top, left, and transform */
  }

  .card-game {
    width: 70px;
    height: 90px;
    background: url('../img/wedding/card-cover.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #D4C029;
  }

  table {
    border-collapse: collapse;
    table-layout: auto;
    /* Adjust table to fit content width */
    width: auto;
    /* Table adjusts to fit its content */
    margin: 0 auto;
    /* Center table horizontally */
    width: 60%;
    /* Adjust to desired percentage */
  }

  .fund1,
  .fund2,
  .fund3,
  .fund4 {
    margin: 0 auto;
    width: 120px;
    /* Adjust the width as needed */
    height: 120px;
    /* Adjust the height as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /*  transition: transform 0.1s ease; Smooth transition for scaling */
  }

  #email-div{
    padding-top: 160px;
  }

  #accept-email {
    padding-top: 320px;
    padding-left: 520px;
  }

  #tips10 {
    position: absolute;
    top: 73%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* Fully transparent */
    transition: opacity 0.2s ease-in-out;
    animation: fadeInButton 0.2s ease-in-out 2s forwards;
    /* Delay of 6 seconds */
    display: none;
  }

  #tips13, #tips3 {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* Fully transparent */
    transition: opacity 0.2s ease-in-out;
    animation: fadeInButton 0.2s ease-in-out 2s forwards;
    /* Delay of 6 seconds */
    display: none;
  }

  #tips10-info{
   width: 100%;
   height: auto;
   display: block;
  }

  
   #tips13-info, #tips3-info{
   width: 100%;
   height: auto;
   display: block;
   position: relative;
  }


  #phone-button {
    padding-top: 240px;
  }

  .phone-call {
    background-image: url('../img/phonecall.png');
    width: 100%;
    /* Adjust as needed */
    height: 60vh;
    /* Adjust as needed */
    background-size: contain;
    /* Adjust as needed (cover, contain, etc.) */
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 40px;
  }

  .quiz-progress {
  padding-top: 30px;
}
  
  #question-words {
    color: #206E63;
    font-weight: bold;
    font-size: 20px;
  }

  .options {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto new lines */
    justify-content: center;
    /* Centers the items horizontally */
    align-items: flex-start;
    /* Aligns items to the top of the container */
    gap: 20px;
    /* Optional: Adds spacing between the options */
  }

  .options button {
    width: 470px;
    /* Set a fixed width for buttons */
    height: 65px;
    /* Set a fixed height for buttons */
    margin: 1px;
  }

  .vertical-line {
    position: absolute;
    top: 300px;
    /* Adjust this value to control the distance from the top */
    left: 50%;
    width: 1px;
    /* Line thickness */
    height: 24px;
    /* Line height */
    background-color: #206E63;
    /* Line color */
    transform: translateX(-50%);
    /* Center the line horizontally */
  }



  .options .option-top {
    flex: 1 1 5%;
    /* This makes the top options take up 45% of the width, adjust as needed */
  }

  .options .option-bottom {
    flex: 1 1 60%;
    /* The same for bottom options */
  }

  button {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
    color: #206E63;
    font-weight: bold;
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px solid #206E63;
    padding: 20px;
    width: 80%;
  }

  #quiz-next {
    width: 5%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #nextbtn-div {
    padding-top: 10px;
  }

  .feedback {
    font-style: bold;
    font-size: 100%;
    margin-top: 20px;
    padding-top: 15px;
    color: #fff;
    border-top: 2px dashed #7a797a;
    justify-content: flex-end;
    text-align: left;
  }

  #end-div {
    padding-top: 60px;
  }

  #end-text{
    font-size: 18px;
  }

  #end-body {
    padding-top: 28px;
    padding-bottom: 5px;
    padding-left: 150px;
    padding-right: 150px;
  }

  #end-button {
    margin-left: 150px;
    margin-right: 130px;
    padding-top: 18px;
  }

  #util-img {
  width: 75%;
  height: auto;
}

#util-div {
  padding-top: 35px;
}

#util-btn {
  padding-bottom: 40px;
}



#summary-div{
  height: 110px;
    padding-top: 30px;
}

#risk{
  margin-top: 10px;
}

#risk-img{
 width: 40%;
 height: auto;

}

.result-container {
 height: 110px;
  width: 500px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
  margin-top: 80px;
}



.result-img {
   width: 310px;
  height: 73%;
  opacity: 1;
  position: relative;
}



.opacity-overlay2 {
   position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 86%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}


.resultarrow-img {
  position: absolute;
 left: 54%;
  /* Move the arrow to the right */
  transform: translateX(-20%);
  /* Keep it centered relative to the new left position */
  width: 4%;
  /* Adjust the size as needed */
  height: auto;
  top: 57%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}


#result-text{
  position: absolute;
   font-size: 14px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 4%;
  transform: translateX(-50%);
}

.inner-circle2 {
  width: 70%;
  /* Inner circle size */
  height: 70%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}



.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}


.outer-ring2 {
  width: 95%;
  height: 95%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}


.circular-progress2 {
   width: 90px;
  /* Outer ring size */
  height: 90px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  /* Space between the circle and the factor image */
}


.circular-progress-container2 {
  align-items: center;
  justify-content: center;
  /* Align items horizontally */
 padding-top: 100px;
  padding-left: 40px;
  width: 100px;
  height: 70px;
}

.result-desc{
  padding-top: 180px;
  padding-left: 150px;
  padding-right: 150px;
}

#resulttext{
  font-size: 14px;
}

#result-button{
  padding-top: 10px;
}

#mood-container{
  height: 70px;
  width: 580px;
  margin-top: 30px;
}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 15px;
   padding-right: 6px;
   padding-left: 10px;
   font-size: 14px;
}

  .game-button3 {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 12px 18px 12px 18px;
    width: 18%;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }
  
 

    .main-display {
      width: 700px;
      height: 270px;
      margin: 0 auto 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      color: #ecee71;
      font-weight: bold;
      font-size: 1.2rem;
      position: relative;
      transition: opacity 0.5s ease;
      opacity: 1;
      padding-top: 130px;
    }

    #mainImage {
  max-width: 900px;
  max-height: auto;
  object-fit: contain; /* or cover */
}


    .main-display.fade {
      opacity: 0;
    }

    .slider-container2 {
      position: relative;
      width: 540px;
      margin: 10px auto 0;
      height: 50px;
    }

    .slider-track {
      position: absolute;
      top: 3px;
      left: 0;
      right: 0;
      height: 8px;
      background: #206E63;
      border-radius: 2px;
    }

    .slider-thumb {
      position: absolute;
      top: 8px;
      width: 30px;
      height: 30px;
         background-image: url('../img/resultarrow.png');
    background-size: contain;
    /* Adjusts the background to fill the card */
    background-position: center;
    /* Centers the background image */
    background-repeat: no-repeat;
      transition: left 0.4s ease;
      transform: none;
      z-index: 2;
      pointer-events: none;
    }

    .thumbnails {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3px;
      width: 580px;
      margin: 0 auto;
    }

    .thumbnails img {
      width: 100%;
      height: 60px;
      cursor: pointer;
      transition: transform 0.3s ease, border-color 0.3s ease;
      border-radius: 6px;
      user-select: none;
    }

    .thumbnails img.active {
      transform: scale(1.25);
      border: 3px solid #D4C029;
    }

    input[type="range"] {
      position: absolute;
      top: 15px;
      left: 0;
      width: 580px;
      height: 20px;
      background: transparent;
      -webkit-appearance: none;
      appearance: none;
      pointer-events: auto;
      z-index: 3;
      margin: 0;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-runnable-track {
      background: transparent;
      height: 4px;
    }

    input[type="range"]::-moz-range-track {
      background: transparent;
      height: 4px;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background: transparent;
      border: none;
      margin-top: -8px;
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: transparent;
      border: none;
      cursor: pointer;
    }



}

@media (min-width: 1280px) and (max-width: 1399px) {
  #car1,
  #car2,
  #car3 {
    padding-bottom: 350px;
  }

   #instruction1, #instruction3  {
    width: 100%;
    height: 90%;
    display: block;
  }

   #instruction2 {
    width: 100%;
    height: 86%;
    display: block;
  }

  #howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 81%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

  #footer {
  position: fixed;
  bottom: 240px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
}



  #creditmeter {
    position: fixed;
    top: 60px;
    /* Distance from the top */
    left: 0;
    /* Stick to the left */
    width: 30%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #factormeter {
    position: fixed;
    top: 50px;
    /* Distance from the top */
    right: 18px;
    /* Stick to the right */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #cs-font {
    font-size: 18px;
    text-align: center;
  }

  .credit-score-container {
     position: relative;
    height: 450px;
    /* Set a specific height */
    overflow: visible;
    /* Hide overflow */
  }

.creditscore-img {
  width: 100px;
  height: 445px;
  opacity: 1;
  position: relative;
}


.opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 125%;
  height: 118%;
background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.creditarrow-img {
  position: absolute;
  left: 88%;
  /* Move the arrow to the right */
  transform: translateX(-50%);
  /* Keep it centered relative to the new left position */
  width: 44%;
  /* Adjust the size as needed */
  height: auto;
  top: 57%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

     #game1, #game2,
   #game3, #game4 {
    padding-bottom: 300px;
  }

     #game-desc1 {
  padding-top: 20px;
  padding-bottom: 5px;
  }

     #wedding-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 130px;
    padding-right: 0px;
    padding-bottom: 210px;
  }

     #accept-email {
    padding-top: 520px;
    padding-left: 600px;
  }

    .accept-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 10px 24px;
  font-size: 20px;
  cursor: pointer;
  visibility: hidden;
  /* Start hidden */
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.3s ease-in-out;
  animation: fadeInButton 0.3s ease-in-out 3s forwards;
  /* Delay of 6 seconds */
  text-decoration: none;
}

#tips10, #tips13 {
   top: 75%;
    left: 50%;
}

   #title-text2 {
  padding-bottom: 20px;
  padding-top: 130px;
}

     #phone-button {
    padding-top: 340px;
  }

    .phone-call {
    background-image: url('../img/phonecall.png');
    width: 100%;
    /* Adjust as needed */
    height: 60vh;
    /* Adjust as needed */
    background-size: contain;
    /* Adjust as needed (cover, contain, etc.) */
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 50px;
  }

  .quiz-progress {
  padding-top: 80px;
}

  .vertical-line {
    position: absolute;
    top: 440px;
    /* Adjust this value to control the distance from the top */
    left: 50%;
    width: 1px;
    /* Line thickness */
    height: 35px;
    /* Line height */
    background-color: #206E63;
    /* Line color */
    transform: translateX(-50%);
    /* Center the line horizontally */
  }

 #nextbtn-div {
    padding-top: 35px;
  }

  

#summary-div{
  height: 110px;
    padding-top: 40px;
}

#risk{
  margin-top: 30px;
}

#risk-img{
 width: 40%;
 height: auto;

}

.result-container {
 position: relative;
  width: 315px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
  margin-top: 120px;
}


.result-img {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: relative;
}



.opacity-overlay2 {
   position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 95%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}



.resultarrow-img {
  position: absolute;
 left: 54%;
  /* Move the arrow to the right */
  transform: translateX(50%);
  /* Keep it centered relative to the new left position */
  width: 4%;
  /* Adjust the size as needed */
  height: auto;
  top: 57%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}




#result-text{
  position: absolute;
   font-size: 16px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 4%;
  transform: translateX(-50%);
}

.inner-circle2 {
  width: 70%;
  /* Inner circle size */
  height: 70%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}



.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}

.outer-ring2 {
  width: 95%;
  height: 95%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}


.circular-progress2 {
   width: 90px;
  /* Outer ring size */
  height: 90px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  /* Space between the circle and the factor image */
}


.circular-progress-container2 {
  align-items: center;
  justify-content: center;
  /* Align items horizontally */
 padding-top: 100px;
  padding-left: 40px;
  width: 100px;
  height: 70px;
}


.result-desc{
  padding-top: 200px;
  padding-left: 150px;
  padding-right: 150px;
}

#resulttext{
  font-size: 20px;
}

#result-button{
  padding-top: 20px;
}

#mood-container{
  height: 70px;
  width: 580px;
  margin-top: 100px;
}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 15px;
   padding-right: 6px;
   padding-left: 10px;
   font-size: 14px;
}

  .game-button3 {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 12px 18px 12px 18px;
    width: 18%;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }



}



@media (min-width: 1350px) and (max-width: 1399px) {
 #index {
    padding-top: 200px;
  }

        .sticky-row {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  background-color: unset;
  /* Optional: set a background color */
  z-index: 1000;
  /* Ensure it stays on top of other content */
  padding: 30px;
  /* Optional: add some padding */
  cursor: default;
}

#narration1, #narration2, #narration3 {
 position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Hide parts that overflow */
}


 #instruction1, #instruction2, #instruction3 {
    width: 100%;
    height: 100%;
    display: block; 
    object-fit: contain; /* Keeps it proportional but fills */
  }


  #howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}
  
.howto-button {
  background-color: #D4C029;
  color: white;
  border: none;
 padding: 15px 40px 15px 40px;
  width: 20%;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}


   #car1,
  #car2,
  #car3 {
    padding-bottom: 420px;
  }


  #footer {
  position: fixed;
  bottom: 300px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
}

  #narrative-style {
    padding-top: 23vh;
    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 75px;
    padding-right: 80px;
  }

  #creditmeter {
    position: fixed;
    top: 120px;
    /* Distance from the top */
    left: 0;
    /* Stick to the left */
    width: 30%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #factormeter {
    position: fixed;
    top: 120px;
    /* Distance from the top */
    right: 18px;
    /* Stick to the right */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #cs-font {
    font-size: 18px;
    text-align: center;
  }

  .credit-score-container {
     position: relative;
    height: 455px;
    /* Set a specific height */
    overflow: visible;
    /* Hide overflow */
  }

.creditscore-img {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: relative;
}


.opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 125%;
  height: 100%;
background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.creditarrow-img {
  position: absolute;
  left: 98%;
  /* Move the arrow to the right */
  transform: translateX(-50%);
  /* Keep it centered relative to the new left position */
  width: 44%;
  /* Adjust the size as needed */
  height: auto;
  top: 49%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

     #game1, #game2,
   #game3, #game4 {
    padding-bottom: 480px;
  }

     #game-desc1 {
  padding-top: 60px;
  padding-bottom: 5px;
  }



   #title-text2 {
  padding-bottom: 20px;
  padding-top: 200px;
}

  #title-text {
  padding-bottom: 20px;
  padding-top: 40px;
}


    .info-container1 img {
    width: 64%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
    padding-top: 130px;
  }

  .info-container1 .overlay-text {
    top: 48%;
    /* Adjust as needed */
    left: 49%;
    /* Adjust as needed */
    right: 14%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  .info-container2 img {
    width: 64%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
    padding-top: 45px;
  }

  .info-container2 .overlay-text {
    top: 38%;
    /* Adjust as needed */
    left: 50%;
    /* Adjust as needed */
    right: 16%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

    #wedding-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 70px;
    padding-right: 0px;
    padding-bottom: 270px;
  }

  #wedd-box {
  margin-top: 60px;
}

  #wedd-div {
  padding-top: 70px;
}

#tips10, #tips13, #tips3 {
   top: 63%;
    left: 50%;
}

     #phone-button {
    padding-top: 360px;
  }

    .phone-call {
    background-image: url('../img/phonecall.png');
    width: 100%;
    /* Adjust as needed */
    height: 60vh;
    /* Adjust as needed */
    background-size: contain;
    /* Adjust as needed (cover, contain, etc.) */
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 50px;
  }

    #call-convo {
  padding-top: 130px;
}


#summary-div{
  height: 110px;
    padding-top: 100px;
}

#risk{
  margin-top: 30px;
}

#risk-img{
 width: 40%;
 height: auto;

}

.result-container {
   position: relative;
  width: 455px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
  margin-top: 120px;
}


.result-img {
  width: 100%;
  height: 95%;
  opacity: 1;
  position: relative;
}



.opacity-overlay2 {
   position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 95%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}


.resultarrow-img {
  position: absolute;
 left: 54%;
  /* Move the arrow to the right */
  transform: translateX(-20%);
  /* Keep it centered relative to the new left position */
  width: 4%;
  /* Adjust the size as needed */
  height: auto;
  top: 57%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

  #util-img {
  width: 80%;
  height: auto;
}

#util-div {
  padding-top: 120px;
}

#util-btn {
  padding-bottom: 40px;
}

  #vacation {
    padding-top: 30px;
  }

  #vacay-row {
  padding-top: 30px;
}

#title-items {
  padding-top: 10px;
}

#result-text{
  position: absolute;
   font-size: 18px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 4%;
  transform: translateX(-50%);
}

.inner-circle2 {
  width: 70%;
  /* Inner circle size */
  height: 70%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}



.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}

.outer-ring2 {
  width: 95%;
  height: 95%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}


.circular-progress2 {
   width: 90px;
  /* Outer ring size */
  height: 90px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  /* Space between the circle and the factor image */
}


.circular-progress-container2 {
  align-items: center;
  justify-content: center;
  /* Align items horizontally */
 padding-top: 100px;
  padding-left: 40px;
  width: 100px;
  height: 70px;
}


.result-desc{
  padding-top: 200px;
  padding-left: 150px;
  padding-right: 150px;
}

#resulttext{
  font-size: 20px;
}

#result-button {
  padding-bottom: 100px;
}


#mood-container{
  height: 70px;
  width: 580px;
  margin-top: 160px;
}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 15px;
   padding-right: 6px;
   padding-left: 10px;
   font-size: 14px;
}

  .game-button3 {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 12px 18px 12px 18px;
    width: 18%;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

    #end-div {
    padding-top: 210px;
  }

  #end-body {
    padding-top: 20px;
    padding-bottom: 5px;
    padding-left: 150px;
    padding-right: 150px;
  }

  #end-button {
    margin-left: 150px;
    margin-right: 130px;
    padding-top: 40px;
  }

  .main-display {
      margin-top: 20px;
    }

   .thumbnails {
padding-top: 10px;
}
  
}






@media (min-width: 1400px) and (max-width: 1510px) {
   #index {
    padding-top: 110px;
  }
  
   #car1,
  #car2,
  #car3 {
    padding-bottom: 370px;
  }


  #howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}

.howto-button {
  background-color: #D4C029;
  color: white;
  border: none;
 padding: 15px 40px 15px 40px;
  width: 20%;
  font-size: 24px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}

  #footer {
  position: fixed;
  bottom: 230px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
}



  #creditmeter {
    position: fixed;
    top: 60px;
    /* Distance from the top */
    left: 0;
    /* Stick to the left */
    width: 30%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #factormeter {
    position: fixed;
    top: 80px;
    /* Distance from the top */
    right: 18px;
    /* Stick to the right */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

  #cs-font {
    font-size: 18px;
    text-align: center;
  }

  .credit-score-container {
     position: relative;
    height: 485px;
    /* Set a specific height */
    overflow: visible;
    /* Hide overflow */
  }

.creditscore-img {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: relative;
}


.opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 125%;
  height: 100%;
background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.creditarrow-img {
  position: absolute;
  left: 90%;
  /* Move the arrow to the right */
  transform: translateX(-60%);
  /* Keep it centered relative to the new left position */
  width: 44%;
  /* Adjust the size as needed */
  height: auto;
  top: 48%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

     #game1, #game2,
   #game3 {
    padding-bottom: 280px;
  }

#game4 {
    padding-bottom: 260px;
  }

     #game-desc1 {
  padding-top: 20px;
  padding-bottom: 5px;
  }

     #wedding-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 130px;
    padding-right: 0px;
    padding-bottom: 210px;
  }

     #accept-email {
    padding-top: 520px;
    padding-left: 600px;
  }

    .accept-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 10px 24px;
  font-size: 20px;
  cursor: pointer;
  visibility: hidden;
  /* Start hidden */
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.3s ease-in-out;
  animation: fadeInButton 0.3s ease-in-out 3s forwards;
  /* Delay of 6 seconds */
  text-decoration: none;
}

#tips3, #tips10, #tips13 {
   top: 68%;
    left: 50%;
}

   #title-text2 {
  padding-bottom: 20px;
  padding-top: 130px;
}

     #phone-button {
    padding-top: 340px;
  }

    .phone-call {
    background-image: url('../img/phonecall.png');
    width: 100%;
    /* Adjust as needed */
    height: 60vh;
    /* Adjust as needed */
    background-size: contain;
    /* Adjust as needed (cover, contain, etc.) */
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 50px;
  }

  .quiz-progress {
  padding-top: 70px;
}

  .vertical-line {
    position: absolute;
    top: 430px;
    /* Adjust this value to control the distance from the top */
    left: 50%;
    width: 1px;
    /* Line thickness */
    height: 35px;
    /* Line height */
    background-color: #206E63;
    /* Line color */
    transform: translateX(-50%);
    /* Center the line horizontally */
  }

 #nextbtn-div {
    padding-top: 35px;
  }

  

#summary-div{
  height: 110px;
    padding-top: 40px;
}

#risk{
  margin-top: 30px;
}

#risk-img{
 width: 40%;
 height: auto;

}

.result-container {
 height: 110px;
  width: 485px;
  /* Set a specific height */
  overflow: visible;
  /* Hide overflow */
  margin-top: 120px;
}


.result-img {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: relative;
}



.opacity-overlay2 {
   position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 95%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}



.resultarrow-img {
  position: absolute;
 left: 54%;
  /* Move the arrow to the right */
  transform: translateX(-20%);
  /* Keep it centered relative to the new left position */
  width: 4%;
  /* Adjust the size as needed */
  height: auto;
  top: 57%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}




#result-text{
  position: absolute;
   font-size: 16px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 4%;
  transform: translateX(-50%);
}

.inner-circle2 {
  width: 70%;
  /* Inner circle size */
  height: 70%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}



.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}

.outer-ring2 {
  width: 95%;
  height: 95%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}


.circular-progress2 {
   width: 90px;
  /* Outer ring size */
  height: 90px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  /* Space between the circle and the factor image */
}


.circular-progress-container2 {
  align-items: center;
  justify-content: center;
  /* Align items horizontally */
 padding-top: 100px;
  padding-left: 40px;
  width: 100px;
  height: 70px;
}


.result-desc{
  padding-top: 200px;
  padding-left: 150px;
  padding-right: 150px;
}

#resulttext{
  font-size: 20px;
}

#result-button{
  padding-top: 20px;
}

#mood-container{
  height: 70px;
  width: 580px;
  margin-top: 100px;
}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 15px;
   padding-right: 6px;
   padding-left: 10px;
   font-size: 14px;
}

  .game-button3 {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 12px 18px 12px 18px;
    width: 18%;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }


  
  }

@media (min-width: 1920px) and (max-width: 2000px) {
   #index {
    padding-top: 200px;
  }

      .sticky-row {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  background-color: unset;
  /* Optional: set a background color */
  z-index: 1000;
  /* Ensure it stays on top of other content */
  padding-top: 30px;
  /* Optional: add some padding */
  cursor: default;
}

  #home{
height: 42px;
width: auto;
}

#info {
  font-size: 40px;
  color: #206E63;
}

#narration1, #narration2, #narration3 {
 position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Hide parts that overflow */
}

#instruction1, #instruction2, #instruction3 {
   position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Keeps it proportional but fills */
}

#howto-1, #howto-2, #howto-3 {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.2s ease-in-out;
  animation: fadeInButton 0.2s ease-in-out 2s forwards;
  /* Delay of 6 seconds */
  display: none;
}


.howto-button {
  background-color: #D4C029;
  color: white;
  border: none;
 padding: 25px 60px 25px 60px;
  width: 20%;
  font-size: 32px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}


  #footer {
    position: fixed;
  bottom: 310px;
  width: 100%;
  height: 5%;
  justify-content: center;
  padding-right: 10px;
  }

  #footer a{
    font-size: 30px;
  }

  #narrative-style {
    padding-top: 30vh;
    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 25px;
    padding-right: 45px;
  }

  #typewriter {
    font-size: 40px;

  }

  .index-button {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 25px 60px 25px 60px;
    width: 20%;
    font-size: 32px;
    font-weight: normal;
    opacity: 0;
    /* Initially hidden */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, opacity 1s;
    text-decoration: none;
    border-radius: 4px;

  }



 #creditmeter {
    position: fixed;
    top: 150px;
    /* Distance from the top */
    left: 0;
    /* Stick to the left */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }

    .credit-score-container {
    position: relative;
    height: 590px;
    /* Set a specific height */
    overflow: visible;
    /* Hide overflow */
  }

  .creditscore-img {
  width: 100%;
  height: 585px;
  opacity: 1;
  position: relative;
}

.creditarrow-img {
  position: absolute;
  left: 90%;
  /* Move the arrow to the right */
  transform: translateX(-50%);
  /* Keep it centered relative to the new left position */
  width: 60%;
  /* Adjust the size as needed */
  height: auto;
  top: 48%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}

.opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

#cs-font {
    font-size: 35px;
  }

  
  #factormeter {
    position: fixed;
    top: 190px;
    /* Distance from the top */
    right: 18px;
    /* Stick to the right */
    width: 20%;
    /* Adjust width */
    z-index: 1000;
    /* Ensure it’s above other content */
  }



.circular-progress-container {
    padding-bottom: 110px;
    width: 300px;
  }

  .circular-progress {
    width: 120px;
    /* Outer ring size */
    height: 120px;
    margin-right: 30px;
    /* Space between the circle and the factor image */
  }

  .inner-circle {
    width: 100%;
    /* Inner circle size */
    height: 100%;
    background-color: #FCF8EA;
    /* Inner circle color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    /* Ensure it is above the outer ring */
  }

  .outer-ring {
  width: 130%;
  height: 130%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}


  .factor-up-image {
    width: 50px;
    /* Adjust size as needed */
    height: auto;
    z-index: 2;
    /* Make sure it's on top */
    position: relative;
    /* Ensure it positions beside the circular progress */
    transform: translateX(0px);
    /* Optional: Adjust position */
    opacity: 0;
    /* Start with the image hidden */
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Apply transition effects */
    bottom: 3px;
  }


  #title-text {
    font-size: 37px;
  padding-bottom: 30px;
  padding-top: 70px;
}

h1 {
    font-size: 52px;
  }

   .hovertest {
    padding-top: 50px;
    margin: 0;
  }

  .my-card2 {
    width: 90%;
    height: 420px;
    background-position: center;
    padding: 15px;
  }

  .my-card2:hover {
    background-size: 100% 410px;
  }

      .info-container1 img {
    width: 65%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
     padding-top: 100px;
  }

  .info-container1 .overlay-text {
    top: 45%;
    /* Adjust as needed */
    left: 50%;
    /* Adjust as needed */
    right: 5%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 28px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

    .info-container2 img {
    width: 65%;
    height: auto;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  .info-container2 .overlay-text {
    top: 40%;
    /* Adjust as needed */
    left: 50%;
    /* Adjust as needed */
    right: 5%;
    /* Adjust as needed */
    color: black;
    /* Adjust text color */
    font-weight: normal;
    font-size: 28px;
    text-align: center;
    justify-content: center;
    opacity: 0;
    /* Start hidden */
    transition: opacity 0.5s ease-in-out, background-image 0.5s ease-in-out;
    animation: fadeIn2 1s ease-in-out 0.8s forwards;
    /* Animation with delay */
  }

  #info-button {
    padding-top: 55px;
  }

    .game-button {
    background-color: #D4C029;
    color: white;
    border: none;
  padding: 25px 60px 25px 60px;
  width: 30%;
  font-size: 32px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }


    #util-img {
  width: 75%;
  height: auto;
}

#util-div {
  padding-top: 150px;
}

#util-btn {
  padding-bottom: 58px;
}


.car {
    width: 310px;
    height: auto;
    background: none;
  }

  /* Ensure the image fits within the card */
  .car-image {
    width: 300px;
    height: auto;
    object-fit: contain;
    /* Ensures the image covers the card area without distortion */
  }

  /* Focused Card */
  .car.focus {
    width: 320px;
    height: 440px;
    transform: translateX(0) scale(1.1);
    z-index: 3;
    opacity: 1;
    background-image: url('../img/cardhover.png');
    background-size: cover;
    /* Adjusts the background to fill the card */
    background-position: center;
    /* Centers the background image */
    background-repeat: no-repeat;
    /* Ensures the image doesn't repeat */
    margin: 20px auto;
  }

  .slider-btn {
    top: 50%;
  }


  .slider-btn.prev {
  left: 0;
}

.slider-btn.next {
  right: 0;
}

  .slider-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 900px;
    height: 520px;
    /* Adjust the height as needed */
    margin: auto;
  }

  .car.left {
    transform: translateX(-170px) scale(0.9);
    z-index: 2;
  }

  .car.right {
    transform: translateX(160px) scale(0.9);
    z-index: 2;
  }

     #car1,
  #car2,
  #car3 {
    padding-bottom: 400px;
  }

    #title-text2 {
  padding-top: 200px;
      font-size: 37px;
}

  #choices-div {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    padding-left: 160px;
    padding-right: 160px;
    gap: 3px;
  }

  .choice-card {
    text-decoration: none;
    color: #206E63;
    /* Initial text color */
    font-size: 28px;
    font-weight: bold;
  }

    #title-text3 {
  font-size: 35px;
  padding-bottom: 50px;
  padding-top: 100px;
}


  #game1, #game2,
  #game3 {
    top: 80%;
  }

#game4{
    top: 70%;
  position: fixed;
  }


#game-desc1 {
    font-size:40px;
  padding-bottom: 25px;
  padding-top: 35px;
  }

  #vacation {
  width: 1500px;
 margin-top: 10px;
}

#vacay-row {
  padding-top: 20px;
}

.monument {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 200px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin-bottom: 10px;
  /* Space between the image and location box */
}

.location {
  background-color: whitesmoke;
  width: 260px;
  height: 65px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 3px dotted #D4C029;
}

.japan1 {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 150px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 40px;
  /* Space between the image and location box */
}

.egypt1 {
  width: 100%;
  /* Make sure the image takes the full width of its container */
  max-height: 190px;
  /* Limit the maximum height of the images */
  object-fit: contain;
  /* Ensures that the image is resized to fit within the box without distortion */
  margin: 14px;
  /* Space between the image and location box */
}

#location7 {
  margin-right: 40px;
}

#title-items {
  padding-top: 30px;
}

.imgs {
  width: 15%;
  /* Set the width relative to the container's width */
  height: auto;
  /* Maintain aspect ratio */
}


      #wedding-box {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 220px;
  }

  #wedd-box {
  margin-top: 10px;
}

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 160px);
    gap: 5px;
    /* Centering handled by parent */
    /* Removed top, left, and transform */
  }

   .card-game {
    width: 160px;
    height: 190px;
    background: url('../img/wedding/card-cover.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #D4C029;
  }

    .timer-text-box {
  font-size: 60px;
  font-weight: bold;
  color: #206E63;
}

.timer {
  font-size: 10px;
  font-weight: bold;
  color: #206E63;
}

.timer .colon {
  width: auto;
  /* Smaller width */
  height: 80px;
  /* Fixed height */
  margin-right: 10px;
}

#seconds {
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  font-size: 68px;
}

#secs {
  color: #206E63;
  font-size: 50px;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
}

.score {
  font-size: 60px;
  font-weight: bolder;
  color: #206E63;
}

#wedding-score1 {
  font-size: 68px;
  color: #206E63;
  font-family: 'Geomanist-Bold', sans-serif;
  /* Use bold font for headings */
  font-weight: bolder;
  /* Explicitly set the weight */
  text-align: left;
}

#wedd-img {
  width: 75%;
  height: auto;
}

#wedd-div {
  padding-top: 80px;
}

  table {
    border-collapse: collapse;
    table-layout: auto;
    /* Adjust table to fit content width */
    width: auto;
    /* Table adjusts to fit its content */
    margin: 0 auto;
    /* Center table horizontally */
    width: 78%;
    /* Adjust to desired percentage */
    padding-top: 40px;
  }

    .tooltip-text {
  visibility: hidden;
  width: 270px;
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 85%;
  /* Position above the image */
  left: 40%;
  margin-left: -60px;
  /* Adjust the tooltip to be centered */
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  font-size: 28px;
}

.fund1,
  .fund2,
  .fund3,
  .fund4 {
    margin: 0 auto;
    width: 250px;
    /* Adjust the width as needed */
    height: 250px;
    /* Adjust the height as needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /*  transition: transform 0.1s ease; Smooth transition for scaling */
  }

      #email-div{
    padding-top: 350px;
  }

  #open-email {
  background-image: url('../img/email.png');
  width: 130%;
  /* Adjust as needed */
  height: 90vh;
  /* Adjust as needed */
  background-size: contain;
  /* Adjust as needed (cover, contain, etc.) */
  background-position: center;
  background-repeat: no-repeat;
}


    #accept-email {
    padding-top: 680px;
    padding-left: 800px;
    position: sticky;
  }

  .accept-button {
  background-color: #D4C029;
  color: white;
  border: none;
  padding: 20px 34px;
  font-size: 24px;
  cursor: pointer;
  visibility: hidden;
  /* Start hidden */
  opacity: 0;
  /* Fully transparent */
  transition: opacity 0.3s ease-in-out;
  animation: fadeInButton 0.3s ease-in-out 3s forwards;
  /* Delay of 6 seconds */
  text-decoration: none;
}

#tips3, #tips10, #tips13 {
   top: 78%;
    left: 50%;
}

#title-text4 {
     font-size: 35px;
  padding-bottom: 50px;
  padding-top: 200px;
  }

   #phone-button {
    padding-top: 470px;
  }

  .phone-call {
    height: 65vh;
    margin-top: 100px;
  }

  #call-convo {
  padding-top: 150px;
}

.phone-img {
  width: 80%;
  height: auto;
  margin: 0 auto;
}

.quiz{
 position: absolute;
}

.quiz-progress {
  padding-top: 80px;
}

#question-progress-dots .dot {
  width: 35px;
  height: 35px;
}


#questions{
  padding-top: 50px;
  width: 1600px;
  margin-left: 150px;
}

#question-words {
    color: #206E63;
    font-weight: bold;
    font-size: 38px;
    padding-left: 30px;
  }

    .options {
    display: flex;
    flex-wrap: wrap;
    /* Allows items to wrap onto new lines */
    justify-content: center;
    /* Centers the items horizontally */
    align-items: flex-start;
    /* Aligns items to the top of the container */
    gap: 18px;
    /* Optional: Adds spacing between the options */
    font-size: 28px;
  }

  .options button {
    width: 750px;
    /* Set a fixed width for buttons */
    height: 120px;
    /* Set a fixed height for buttons */
    padding: 5px;
  }

    .vertical-line {
    position: absolute;
    top: 410px;
    /* Adjust this value to control the distance from the top */
    left: 95%;
    width: 1px;
    /* Line thickness */
    height: 58px;
    /* Line height */
    background-color: #206E63;
    /* Line color */
    transform: translateX(-50%);
    /* Center the line horizontally */
  }

  #quiz-next {
    width: 8%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #nextbtn-div {
    padding-top: 70px;
  }

  .feedback {
    font-style: bold;
    font-size: 100%;
    margin-top: 30px;
    padding-top: 5px;
    margin-right: 20px;
    color: #fff;
    border-top: 2px dashed #7a797a;
    justify-content: flex-end;
    text-align: left;
    font-size: 32px;
    padding: 15px;
    margin-bottom: 80px;
  }

  #credit-link4{
 margin-left: 820px;
  }

    #end-div {
    padding-top: 240px;
  }

  #end-body {
    padding-top: 20px;
    padding-bottom: 5px;
    padding-left: 150px;
    padding-right: 150px;
  }

  #end-button {
    margin-left: 150px;
    margin-right: 130px;
    padding-top: 40px;
  }

    #end-text{
    font-size: 30px;
    padding-bottom: 5px;
  }

  .game-end {
  background-color: #206E63;
  color: white;
  border: none;
  padding: 28px 40px 28px 40px;
  width: 60%;
  font-size: 34px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
  border-radius: 4px;
}

#credit-end{
  font-size: 58px;
}

#credit-end2{
  font-size: 52px;
}


#summary-div{
  height: 110px;
    padding-top: 80px;
}

#risk{
  margin-top: 30px;
}

#risk-img{
 width: 40%;
 height: auto;

}

.result-container {
  position: relative;
    width: 590px;
    /* Set a specific height */
    overflow: visible;
  /* Hide overflow */
  margin-top: 140px;
}


.result-img {
  width: 100%;
  height: 95%;
  opacity: 1;
  position: relative;
}

.opacity-overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 53%;
  height: 200%;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.486) 50%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  /* Ensure the overlay doesn't interfere with other elements */
  transition: opacity 5s ease-in-out;
  /* Add a transition for smooth movement */
}

.resultarrow-img {
    position: absolute;
  left: 60%;
  /* Move the arrow to the right */
  transform: translateX(-20%);
  /* Keep it centered relative to the new left position */
  width: 4%;
  /* Adjust the size as needed */
  height: auto;
  top: 60%;
  /* Adjust this value to place the arrow within the container */
  z-index: 10;
  /* Ensures the arrow stays on top */
  transition: left 0.2s ease, top 0.2s ease;
  /* Add a transition for smooth movement */
}




.inner-circle2 {
   width: 100%;
  /* Inner circle size */
  height: 100%;
  background-color: #FCF8EA;
  /* Inner circle color */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  /* Ensure it is above the outer ring */
}

.percentage2 {
  font-size: 22px;
  font-weight: bold;
  color: white;
  /* Text color */
  vertical-align: middle;
  line-height: 60%;
}

.outer-ring2 {
 width: 125%;
  height: 125%;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  /* Ensure it is below the inner circle */
}

.circular-progress2 {
  width: 120px;
  /* Outer ring size */
  height: 120px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  /* Space between the circle and the factor image */
}

.circular-progress-container2 {
    align-items: center;
  justify-content: center;
  /* Align items horizontally */
  padding-top: 20px;
  padding-left: 80px;
   width: 300px;
  height: 70px;
}



.result-desc{
  padding-top: 180px;
  padding-left: 180px;
  padding-right: 200px;
}

#result-button {
  padding-top: 50px;
}

#mood-container{
  margin-top: 360px;
  height: 80px;
  width: 900px;
}


#result-text{
  position: absolute;
   font-size: 24px;
   font-weight: bold;
  color: #000000;
  width: 160px;
  left: 5%;
  transform: translateX(-45%);
}

#resulttext{
  font-size: 32px;
}

#factortext{
   color: #206E63;
   font-style: italic;
   padding-top: 40px;
   padding-right: 36px;
   padding-left: 0px;
   font-size: 24px;
}

  .game-button3 {
    background-color: #D4C029;
    color: white;
    border: none;
    padding: 22px 40px 22px 40px;
    width: 24%;
    font-size: 28px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none;
    border-radius: 4px;
  }

  

    .main-display {
      width: 900px;
      height: 550px;
      margin: 0 auto 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      color: #ecee71;
      font-weight: bold;
      font-size: 1.2rem;
      position: relative;
      transition: opacity 0.5s ease;
      opacity: 1;
      padding-top: 250px;
    }

    #mainImage {
  max-width: 1600px;
  max-height: auto;
  object-fit: cover; /* or cover */
}


    .main-display.fade {
      opacity: 0;
    }



    .thumbnails img {
      width: 100%;
      height: 110px;
      cursor: pointer;
      transition: transform 0.3s ease, border-color 0.3s ease;
      border-radius: 6px;
      user-select: none;
    }

    .thumbnails img.active {
      transform: scale(1.25);
      border: 3px solid #D4C029;
    }



}