*,
*:before,
*:after {
  box-sizing: border-box;
  /* Ensures padding and border are included in the element's total width and height */
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
  /* Enables smooth scrolling for anchor links */
}

@font-face {
  font-family: "Geom";
  src: url("/assets/fonts/Geom/Geom-Black.woff2") format("woff2");
  font-weight: 900;
  /* Black */
  font-style: normal;
}

@font-face {
  font-family: "Geom";
  src: url("/assets/fonts/Geom/Geom-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  /* Black */
  font-style: italic;
}
@font-face {
  font-family: "Geom";
  src: url("/assets/fonts/Geom/Geom-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  /* Extra Bold */
  font-style: normal;
}
@font-face {
  font-family: "Geom";
  src: url("/assets/fonts/Geom/Geom-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  /* Extra Bold Italic */
  font-style: italic;
}
@font-face {
  font-family: "Geom";
  src: url("/assets/fonts/Geom/Geom-Bold.woff2") format("woff2");
  font-weight: 700;
  /* Bold */
  font-style: normal;
}
@font-face {
  font-family: "Geom";
  src: url("/assets/fonts/Geom/Geom-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  /* Bold Italic */
  font-style: italic;
}
@font-face {
  font-family: "Geom";
  src: url("/assets/fonts/Geom/Geom-SemiBold.woff2") format("woff2");
  font-weight: 600;
  /* SemiBold */
  font-style: normal;
}
@font-face {
  font-family: "Geom";
  src: url("/assets/fonts/Geom/Geom-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  /* SemiBold Italic */
  font-style: italic;
}
@font-face {
  font-family: "Geom";
  src: url("assets/fonts/Geom/Geom-Medium.woff2") format("woff2");
  font-weight: 500;
  /*  Medium */
  font-style: normal;
}
@font-face {
  font-family: "Geom";
  src: url("assets/fonts/Geom/Geom-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  /* Medium Italic */
  font-style: italic;
}
@font-face {
  font-family: "Geom";
  src: url("assets/fonts/Geom/Geom-Regular.woff2") format("woff2");
  font-weight: 400;
  /* Regular */
  font-style: normal;
}
@font-face {
  font-family: "Geom";
  src: url("assets/fonts/Geom/Geom-Italic.woff2") format("woff2");
  font-weight: 400;
  /* Italic */
  font-style: italic;
}
@font-face {
  font-family: "Geom";
  src: url("assets/fonts/Geom/Geom-Light.woff2") format("woff2");
  font-weight: 300;
  /* Light */
  font-style: normal;
}
@font-face {
  font-family: "Geom";
  src: url("assets/fonts/Geom/Geom-LightItalic.woff2") format("woff2");
  font-weight: 300;
  /* Light Italic */
  font-style: italic;
}

/* MOSAIC TOP SECTION */

.content-wrapper {
  display: flex;
  flex-direction: column;
  background-color: #fbfbfb;
  width: 100%;
}

.mosaic-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-auto-rows: calc((70vh - 3 * 5px) / 4);
  gap: 5px;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

/* New keyframes animation for image appearance */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Initial state before animation starts */
  opacity: 0;
  transform: scale(0.5);
  /* Animation properties */
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
}

.branding-container {
  height: 30vh;
  /* Total height for logo, headline, and button */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Align logo to the top of the container */
  width: 100%;
  /* Adjust padding to create some space from the top */
  margin-top: -1.5%;
}

.wingtap-logo {
  max-width: 13vh;
  /* Adjust as necessary */
}

.headline {
  height: 18vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Center the headline vertically */
  width: 100%;
}

.headline h1 {
  font-family: "Poppins";
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 4rem);
  /* Adjust as needed for responsive font size */
  color: #151419;
  text-align: center;
  /* Ensure the text is centered */
}

.mobile-break {
  display: none;
}

.button-container {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Align button to the bottom of the container */
  width: 100%;
  padding-bottom: 0vh;
  /* Adjust padding to create some space from the bottom */
}

.scroll-button {
  background: url("assets/down.png") no-repeat center center;
  background-size: contain;
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
  align-self: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 10;
  /* Use flexbox alignment instead of absolute positioning */
}

.scroll-button-white {
  background: url("assets/down_white.png") no-repeat center center;
  background-size: contain;
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
  align-self: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 10;
  /* Use flexbox alignment instead of absolute positioning */
}

.scroll-button:hover {
  /* Apply the animation only when hovering */
  animation: hoverAnimation 1s ease infinite;
  /* No need to change the transform property here since the animation is taking care of it */
}

.button-section {
  position: relative;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Align button to the bottom of the container */
  width: 100%;
  padding-bottom: 0vh;
}

/* Define the hover animation */
@keyframes hoverAnimation {
  0%,
  100% {
    /* Make sure to include both X and Y transformations */
    transform: translateX(-50%) translateY(0);
  }

  50% {
    /* Include both X and Y transformations */
    transform: translateX(-50%) translateY(-8px);
  }
}

.scroll-button:hover {
  /* Apply the animation only when hovering */
  animation: hoverAnimation 1s ease infinite;
  /* No need to change the transform property here since the animation is taking care of it */
}

/* Always hover for certain buttons */

.always-hover {
  animation: hoverAnimation 1.4s ease infinite;
}

/* NEW - INTRO SECTION */

.intro-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding-top: 5vh;
}

.progress-container {
  width: 60%;
  text-align: center;
  margin-bottom: 2.5%;
}

/* Updated .progress-bar to use flexbox without the 'gap' property */
.progress-bar {
  display: flex;
  align-items: end;
  position: relative;
  /* Position relative so we can position children absolutely within */
}

/* Removed the flex property and set the width to auto to only take up the space of the content */
#notna,
#kitani {
  width: 13%;
  /* Only take up as much space as the content needs */
}

#notna {
  margin-right: -2%;
  /* 10px gap to the progress bar */
}

#kitani {
  margin-left: -3%;
  /* 2px gap to the progress bar */
}

.launch-title {
  font-family: "Poppins";
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  color: #151419;
  margin-bottom: -2%;
}

.image-wrapper {
  display: flex;
  align-items: end;
}

.progress-container img {
  width: 75%;
  /* Adjust this as needed */
  display: block;
  margin: auto;
}

#ProgressBar {
  flex-grow: 1;
  /* Allow the progress bar to grow and fill the space */
  height: 30px;
  border: 2px solid black;
  border-radius: 20px;
  padding: 4px;
  position: relative;
  overflow: hidden;
  /* Add left and right margins to center the progress bar */
  margin-left: 10px;
  margin-right: 2px;
}

#Progress {
  width: 10%;
  background-color: #fe8d03;
  background: repeating-linear-gradient(
    45deg,
    #fe8d03,
    #fe8d03 10px,
    #feaf01 10px,
    #feaf01 20px
  );
  height: 100%;
  border-radius: 20px;
  transition: width 2s;
}

.animate-progress {
  animation-name: progressBar;
  animation-iteration-count: 1;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes progressBar {
  from {
    width: 20%;
  }

  to {
    width: 90%;
  }
}

.intro {
  width: 60%;
  margin-top: 0;
  display: grid;
  grid-template-columns: 20% 80%;
  align-items: center;
  padding: 4%;
  background: #1b564b;
  border-radius: 50px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.image-area {
  display: flex;
  justify-content: center;
  /* Centers the image horizontally */
  align-items: center;
  /* Centers the image vertically */
  overflow: hidden;
  /* Ensures no spillover if you round the corners */
  padding: 13%;
  background: white;
  border-radius: 30px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.image-area img {
  width: 100%;
  /* Makes the image fill the div */
  height: auto;
  /* Keeps the image aspect ratio */
}

.intro-text {
  padding-left: 0%;
  font-family: "Roboto";
  font-weight: 400;
  font-style: "Regular";
  font-size: clamp(1.1rem, 1.8vw, 2rem);
  line-height: 140%;
  color: #000000;
}

.intro-v2 {
  width: 50%;
  max-height: 50vh;
}

.video-wrapper {
  position: relative;
  width: 100%; /* Ensures that the wrapper takes the full width of the container */
  /* Maintains the 16:9 aspect ratio */
  padding-top: 56.25%;
  overflow: hidden; /* Ensures no overflow from the rounded corners */
  max-height: 50vh; /* Maximum half of the viewport height */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px; /* Rounds the corners */
}

.images-row {
  width: 7%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 3.5%;
}

.badge-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-image {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  margin-left: -20px; /* Adjust the margin as needed */
}

.right-image {
  position: absolute;
  right: 0;
  transform: translateX(100%);
  margin-right: -20px; /* Adjust the margin as needed */
}

.center-image img {
  display: block;
  height: 12vh;
  max-height: 150px;
}

.left-image img,
.right-image img {
  display: block;
  height: 7vh; /* Adjust the height using viewport height */
  max-height: 150px;
  width: auto;
}

.scroll-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7%;
  /* Adjust this value based on the exact positioning and size of your button */
  text-align: center;
  /* Center the text content */
  z-index: 5;
  /* Ensure it's properly layered; adjust as needed */
  font-family: "Roboto";
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 1vw, 2rem);
  line-height: 140%;
}

/* CAROUSEL SECTION */

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

body,
html {
  width: 100%;
  height: 100%;
}

.phone-section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
}

.content-container {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.contents {
  text-align: center;
  display: flex;
  flex-direction: column;
  /* Stack children vertically */
  justify-content: center;
  height: 50%;
  width: 70%;
}

.tabs {
  display: flex;
  justify-content: space-around;
  /* Space out the tabs evenly */
  align-items: flex-end;
  /* Align items to the end of the container's cross axis */
  height: 13vh;
  padding: 0;
  list-style: none;
  margin-left: 10%;
  width: 110%;
  margin-bottom: 0px;
  position: relative;
}

.tab {
  margin: 0;
  padding: 0 10px;
  cursor: pointer;
  font-family: "Poppins";
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  color: #151419;
  background-color: transparent;
  border: none;
  text-align: center;
  display: flex;
  /* Set display to flex to use flexbox alignment */
  align-items: flex-end;
  /* Align the text to the bottom */
  height: 100%;
  /* Set a height to align the content within */
  padding-bottom: 15px;
  margin-bottom: -8px;
  transition: color 0.3s ease;
}

.tab.selected {
  color: #fe8d03;
  font-weight: 600;
  box-sizing: border-box;
  z-index: 10;
  transition: color 0.3s ease;
}

.tab:hover {
  color: #fe8d03;
  /* Change to your desired hover color */
  cursor: pointer;
  /* This is to indicate that the title is clickable */
}

.tab:not(:last-child) {
  margin-right: 1px;
  /* This adds 10px margin only on the right side, except for the last tab */
}

.underline {
  position: absolute;
  bottom: 0px;
  /* Adjust as needed */
  left: 0;
  width: 0;
  /* Start with a width of 0 */
  height: 5px;
  background-color: #1b564b;
  border-radius: 50px;
  transition: all 0.3s ease;
  /* Smooth transition for the underline */
  margin-bottom: -4px;
  z-index: 10;
}

.orange-container {
  height: 30vh;
  display: flex;
  justify-content: left;
  align-items: center;
  background: rgb(254, 141, 3);
  background: linear-gradient(
    90deg,
    rgba(254, 141, 3, 1) 23%,
    rgba(254, 141, 3, 0.9542191876750701) 56%,
    rgba(255, 177, 83, 1) 82%,
    rgba(255, 202, 138, 1) 100%
  );
  width: 170%;
  border-radius: 50px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.description {
  text-align: left;
  margin-left: 7%;
  width: 55%;
  font-family: "Roboto";
  font-weight: 400;
  font-style: "Regular";
  font-size: clamp(1.1rem, 1.8vw, 2rem);
  line-height: 140%;
  color: #ffffff;
}

.phone {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* Assuming there is no additional padding or margin that affects the width */
  margin-right: auto;
  /* This will push the phone div to the left */
  margin-left: -5%;
}

.arrow {
  pointer-events: auto;
  position: absolute;
  top: calc(50% + 50px);
  /* Adjust this if you want to move the arrows up or down */
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  width: 30px;
  height: 30px;
  border: none;
  z-index: 10;
  cursor: pointer;
}

.arrow.left {
  left: calc(50% - 30% - 40px);
  /* Adjust this value based on your design */
  background-image: url("assets/left_white.png");
}

.arrow.right {
  right: calc(50% - 30% - 55px);
  /* Adjust this value based on your design */
  background-image: url("assets/right.png");
}

/* Left arrow hover animation */
@keyframes leftHoverAnimation {
  0%,
  100% {
    transform: translateY(-50%) translateX(0px);
  }

  50% {
    transform: translateY(-50%) translateX(-10px);
  }
}

.arrow.left:hover {
  animation: leftHoverAnimation 1s ease-in-out infinite alternate;
}

/* Right arrow hover animation */
@keyframes rightHoverAnimation {
  0%,
  100% {
    transform: translateY(-50%) translateX(0px);
  }

  50% {
    transform: translateY(-50%) translateX(10px);
  }
}

.arrow.right:hover {
  animation: rightHoverAnimation 1s ease-in-out infinite alternate;
}

.phone img {
  max-width: 60%;
  max-height: 100%;
  display: block;
  padding-bottom: 10%;
  padding-top: 10%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* HEADLINE SECTION */

.headline-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centers the headline vertically */
  align-items: center;
  /* Centers the headline horizontally */
  text-align: center;
  /* Centers the text of the headline */
  position: relative;
  /* For absolute positioning of the button */
  background-color: #1b564b;
}

.butterfly-image {
  position: absolute;
  top: 30%;
  /* Adjust this to move the butterfly up or down */
  left: 50%;
  transform: translate(200%, -140%);
  /* Adjust this to move the butterfly around */
  z-index: 1;
  /* Set to -1 to place it behind the text */
  max-width: 200px;
  /* Adjust as needed */
  max-height: 200px;
  /* Adjust as needed */
}

.revealUp {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.centered-headline {
  width: 100%;
  font-size: clamp(2.8rem, 4.2vw, 6rem);
  /* Adjust the font size as needed */
  margin: 0;
  padding: 0;
  position: relative;
  /* Ensure this is relative so the z-index takes effect */
  z-index: 2;
  font-family: "Poppins";
  font-weight: 600;
  /* SemiBold */
  font-style: normal;
  color: #f4f5f3;
  transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
}

/* MYSTERY BOX */

.container {
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -2%;
  margin-bottom: 2%;
}

.box {
  cursor: pointer;
  transition: transform 0.2s;
  /* Smooth transition for scaling */
  width: 8%;
}

.box:hover {
  transform: scale(1.05);
  /* Slightly enlarge the box on hover */
}

.hidden {
  display: none;
}

.visible {
  display: block;
  animation: newfadeIn 1s;
}

/* Ensure both the title and form are initially hidden */
#newsletter p,
#mystery-newsletter-form {
  opacity: 0;
  visibility: hidden;
}

#newsletter p {
  font-size: clamp(1.1rem, 1.2vw, 1.5rem);
  font-family: "Roboto";
  font-weight: 400;
  color: #151419;
  margin-bottom: 0.5%;
  margin-top: 1%;
}

/* Animation for fading in */
@keyframes newfadeIn {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* Class to start animation for the title */
.fadeInTitle {
  animation: newfadeIn 0.3s ease forwards;
  animation-delay: 0.4s;
  /* Start 0.5s after being applied */
}

/* Class to start animation for the form */
.fadeInForm {
  animation: newfadeIn 0.3s ease forwards;
  animation-delay: 0.4s;
  /* Start 1s after being applied */
}

#mystery-newsletter-email {
  padding: 10px;
  border: none;
  border-right: none;
  /* Remove the right border */
  border-radius: 5px 0 0 5px;
  /* Apply border-radius only on the left side */
  margin-right: -1px;
  /* Negative margin to make the elements overlap */
  width: 16vw;
  font-size: clamp(0.6rem, 1.2vw, 1.1rem);
}

#mystery-newsletter-email:focus {
  outline: none;
}

.mystery-newsletter-btn {
  border: none;
  padding: 0px 0px 0px 0px;
  /* Reduced the horizontal padding */
  background-color: #ff9900;
  color: white;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  width: 50px;
  /* Adjust this as needed, or remove it for the content to define the width */
  display: flex;
  /* To center the image vertically and horizontally */
  justify-content: center;
  align-items: center;
  position: relative;
}

.mystery-newsletter-btn img {
  width: auto;
  /* Set this to the actual width you want your image to be, for example, 20px */
  height: 20px;
  /* Adjust height accordingly */
}

#mystery-newsletter-email:hover,
.mystery-newsletter-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px inset,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  /* Inner shadow effect */
}

#mystery-response-message {
  height: 20px;
  margin-top: 5px;
  /* Allocate space for the message */
  color: transparent;
  /* Initially transparent */
  font-size: clamp(0.6rem, 1.2vw, 1.1rem);
  font-family: "Roboto";
  font-weight: 400;
  color: #151419;
}

/* ELEPHANT SECTION */

.full-height-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.half-height-container {
  width: 100%;
  height: 50vh;
  display: flex;
  position: relative;
}

.half-height-container.bottom {
  background: none;
  padding-bottom: 2%;
  margin-top: 5px;
}

/* Right text container */
.half-height-container.top .text-container.right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  /* Align text to the right */
  text-align: right;
  /* Text aligned right */
  padding: 0.3rem;
  /*background-color: #1B564B; */
}

/* Left text container */
.half-height-container.bottom .text-container.left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* Align text to the left */
  text-align: left;
  /* Text aligned left */
  padding: 0.4rem;
  /*background-color: #1B564B; */
}

/* Image container styling */

.text-container h2 {
  margin: 0;
  padding: 0;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-family: "Poppins";
  font-weight: 700;
  color: #151419;
  /* Add other styles such as font-size, font-weight, color as needed */
}

.text-container p {
  margin: 0;
  padding: 0;
  width: 90%;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  font-family: "Roboto";
  font-weight: 400;
  color: #151419;
}

.outer-image-container {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container {
  width: clamp(15rem, 30vw, 26rem);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  position: relative;
}

.image-container.bottom {
  width: clamp(15rem, 25vw, 26rem);
}

.image-container img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #151419;
  /* Set text color to black */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.4s ease;
  /* Smooth transitions for opacity and transform */
  border-radius: 40px;
  padding: 2em;
  cursor: pointer;
  text-align: center;
  font-family: "Poppins";
  font-weight: 500;
}

.overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 60px;
  background: rgba(232, 31, 31, 0);
  /* Slightly opaque layer */
  color: black;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.4s ease;
  cursor: pointer;
  border: none;
}

.overlay-link:hover {
  opacity: 1;
  /* Show the overlay on hover */
  filter: blur(0px);
  /* No blur by default */
}

.overlay-link:hover img {
  filter: blur(2px);
  /* Apply a blur effect to the image */
}

.overlay a {
  text-decoration: none;
  /* Remove underline */
  color: #151419;
  /* Set link color to black */
  text-align: center;
  padding: 1rem;
  transition: transform 0.4s ease;
  /* Smooth transition for transform */
  font-family: "Roboto";
  font-weight: 600;
}

.overlay a span {
  text-decoration: none;
  /* Remove underline from span as well */
}

.image-container:hover .overlay {
  opacity: 1;
  animation: zoomInOut 3s ease-in-out infinite;
  /* Apply the zoom in and out animation */
}

.image-container:hover img {
  filter: blur(5px);
  /* Apply a blur effect */
}

.image-container:hover.bottom img {
  filter: none;
}

/* Define the zoom in and out animation */
@keyframes zoomInOut {
  0%,
  100% {
    transform: scale(1);
    /* Original size */
  }

  50% {
    transform: scale(1.03);
    /* Slightly larger */
  }
}

.orange-line-container {
  width: 20%;
  /* Full width the line will occupy */
  min-height: 0.4vh;
  margin: 2% auto;
  display: block;
  position: relative;
  overflow: hidden;
  /* Ensures the line doesn't show when it's growing */
}

.orange-line {
  width: 0;
  min-height: 0.4vh;
  background: #1b564b;
  border-radius: 5px;
  position: absolute;
  transition: width 1s ease;
  /* Animate the width */
  left: 50%;
  transform: translateX(-50%);
  /* Center the line */
}

.animate {
  width: 100%;
  /* Grow to the full width of the container */
}

/* OUR STORY SECTION */

.ourstory-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /*background-image: linear-gradient(to right, #fe8d03, #fe9600, #fe9e00, #fea700, #feaf01); */
  /* Orange color */
  background-color: #fe8d03;
  width: 100%;
  position: relative;
}

.inner-container {
  width: 90%;
  /* Changed to 80% of the ourstory-container */
  display: flex;
  flex-direction: column;
  /* Stack title and content vertically */
  align-items: center;
  justify-content: center;
}

.photo {
  flex: 0 0 20%;
  /* Flex basis set to 20%, no grow, no shrink */
  position: relative;
  /* For positioning overlay and profile-pic */
  border-radius: 50%;
  /* Ensures the div itself is circular */
  overflow: hidden;
  /* Ensures nothing spills outside the circle */
  width: 100%;
  /* Width is 100% of the flex-basis */
  max-width: 100%;
  /* Ensures that the photo does not exceed its container */
  z-index: 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /*filter: drop-shadow(0 0 1px rgb(90, 75, 46)); */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.overlay-photo {
  display: none;
  position: absolute;
  flex: 0 0 20%;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 234, 0.46);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  z-index: 15;
  /* Ensure this is above the .photo content */
  overflow: hidden;
}

.overlay-photo a {
  display: flex;
  /* Use flexbox to center the content */
  justify-content: center;
  /* Center the content horizontally */
  align-items: center;
  /* Center the content vertically */
  width: 100%;
  /* Full width to maintain the flex container size */
  height: 20;
  /* Full height to maintain the flex container size */
}

.photo:hover .overlay-photo {
  display: flex;
  box-shadow: none;
  /* Show on hover */
}

.photo:hover {
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
    rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.profile-pic {
  width: 100%;
  /* Image will fill the width of its container */
  height: 100%;
  /* Image will fill the height of its container */
  border-radius: 50%;
  /* Ensures the image is circular */
  object-fit: cover;
  /* Ensures the image covers the area without distortion */
  border: 0px solid #fe8d03;
}

.linkedin-logo {
  width: 20%;
  /* Adjust as needed */
  height: auto;
}

.name {
  color: white;
  font-weight: bold;
  margin-top: 8px;
  font-family: "Poppins";
  font-weight: 700;
  font-size: calc(1vh + 1.5vw);
  /* Adjust as needed */
}

.ourstory-content {
  flex: 0 0 60%;
  /* Flex basis set to 60%, no grow, no shrink */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* Adjust padding as needed */
  box-sizing: border-box;
  /* Includes padding in the width */
}

.ourstory-title {
  margin-bottom: 0.5%;
  /* Adjust as necessary */
}

.ourstory-title h1 {
  /* Your CSS styles for the h1 element go here */
  margin: 0;
  /* Example: removes default margin */
  padding-bottom: 2%;
  /* Example: removes default padding */
  color: #fbfbfb;
  font-family: "Poppins";
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
}

.ourstory-text {
  background-color: #fbfbfb;
  padding: 3% 7% 3% 7%;
  /* Adjust padding as needed */
  margin: 0 -5%;
  /* Negative margins to create overflow */
  width: 100%;
  /* Width greater than 100% for the overflow effect */
  text-align: justify;
  text-align-last: center;
  border-radius: 40px;
  font-family: "Roboto";
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  box-sizing: border-box;
  /* Includes padding in the width calculation */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.dictionary-definition {
  font-family: "Cutive", monospace;
  /* This applies the Cutive font */
}

.underline-story {
  position: relative;
  bottom: 0;
  /* Position at the bottom of the ourstory-title div */
  left: 50%;
  /* Start from the middle */
  transform: translateX(-50%);
  /* Center the underline */
  width: 100%;
  /* Start with a width of 0 for the animation */
  height: 5px;
  /* Height of the underline */
  background-color: #1b564b;
  /* Color of the underline */
  border-radius: 50px;
  /* Rounded corners */
  transition: width 0.3s ease;
  /* Animate the width */
  margin-bottom: -8px;
  /* Adjust if necessary */
  display: none;
  /*remove to show underline */
}

/* FAQ SECTION */

.faq-section-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  /* Stack children vertically */
  justify-content: center;
  /* Center children vertically */
  align-items: center;
  /* Center children horizontally */
  position: relative;
  text-align: center;
  /* Center text for all children */
  padding: 2% 0 3% 0;
}

.faq-title {
  margin-top: 0;
  /* Add space at the top */
  margin-bottom: 2%;
  /* Space between title and questions */
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-family: "Poppins";
  font-weight: 700;
  color: #151419;
}

.faq-container {
  width: 100%;
  min-height: 50vh;
  /* Set a minimum height */
  max-height: auto;
  overflow-y: auto;
  /* Adjust to 'auto' to enable scrolling if content is too long */
  display: flex;
  gap: 3%;
  font-family: "Roboto";
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  text-align: left;
  color: #151419;
  justify-content: flex-start;
  /* Align content to the top */
}

.faq-questions {
  flex-basis: 50%;
  font-weight: 400;
  max-height: 48vh; /* Set maximum height to 50vh to make it scrollable */
  overflow-y: auto;
  direction: rtl;
  -webkit-mask-image: linear-gradient(
    to bottom,
    black calc(100% - 100px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black calc(100% - 100px),
    transparent 100%
  );
}

.faq-questions .question {
  direction: ltr; /* Left-to-right to maintain text direction as usual */
  /* Ensure the rest of your .question styles remain unchanged */
  margin-left: 10px;
}

.faq-answer {
  flex-basis: 50%;
}

/* For WebKit browsers */
.faq-questions::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

.faq-questions::-webkit-scrollbar-track {
  background-color: #d4d4d4; /* Color of the track */
  border-radius: 6px; /* Match the thumb's border-radius if needed */
  box-shadow: inset 0 0 0 3px #f9f9f9; /* Simulate spacing with shadow */
}

.faq-questions::-webkit-scrollbar-thumb {
  background-color: #454545; /* Color of the thumb */
  border-radius: 6px;
  /* Removed border */
}

.question {
  cursor: pointer;
  margin-bottom: 5px;
  background-color: #f9f9f9;
  padding: 20px 10px 20px 30px;
  align-items: center;
  height: 60px;
  display: flex;
  border-radius: 30px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.question.active {
  background-color: #e6e6e5;
  border-radius: 30px;
  /* Highlight the active question */
  padding: 20px 10px 20px 30px;
  align-items: center;
  display: flex;
  height: 60px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.answer {
  display: none;
  /* Hide all answers by default */
  padding: 50px;
  background-color: #e6e6e5;
  border-radius: 15px;
}

.answer.active {
  display: block;
  /* Show the active answer */
}

.wingsight {
  font-family: "Geom", sans-serif; /* Fallback to sans-serif if Geom doesn't load */
  font-weight: 700;
}

.wingsight > wing {
  color: #fe8d03;
}

.wingsight > sight {
  color: #1b564b;
}

/* Optional: Add some hover effect for questions */
.question:hover {
  background-color: #e9e9e9;
}

/* TOGGLE FOR FAQ */
:root {
  /* Define the base size of the toggle. Adjust this value to scale the toggle button. */
  --toggle-size: 3vh;
  /* Adjust the size of the toggle here */
}

.standard-checkbox {
  cursor: pointer;
  transform: scale(1.5);
  margin-right: 5px;
  vertical-align: middle;
  /* Helps align checkbox with the label */
}

.faq-toggle-container {
  width: 80%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.toggle-wrapper {
  width: 80%;
  display: flex;
  align-items: center;
  /* This will vertically center the children */
  flex-direction: row;
  padding-bottom: 1%;
  justify-content: center;
  margin-bottom: 2%;
}

.toggle-label {
  /* Adjust this as needed to align with your checkbox */
  display: inline-block;
  margin-left: 10px;
  /* Spacing between checkbox and label */
  font-family: "Poppins";
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  /* Adjust as needed */
  cursor: pointer;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;

  &:before,
  &:after {
    box-sizing: inherit;
  }
}

.second-orange-line-container {
  width: 20%;
  /* Full width the line will occupy */
  min-height: 0.4vh;
  margin: 2% auto;
  display: block;
  position: relative;
  overflow: hidden;
  /* Ensures the line doesn't show when it's growing */
  margin-bottom: 4%;
  margin-top: 4.5%;
}

.second-orange-line {
  width: 0;
  min-height: 0.4vh;
  background: #1b564b;
  border-radius: 5px;
  position: absolute;
  transition: width 1s ease;
  /* Animate the width */
  left: 50%;
  transform: translateX(-50%);
  /* Center the line */
}

.secondanimate {
  width: 100%;
  /* Grow to the full width of the container */
}

/* TIMELINE SECTION */
.outer-timeline-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 2%;
  padding-top: 5%;
}

.final-headline-container {
  width: 100%;
  text-align: center;
  margin-bottom: 5%;
  /* Adjust as needed */
}

.final-headline {
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-family: "Poppins";
  font-weight: 700;
  color: #151419;
}

.timeline-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 2rem;
  /* Space for the descriptions below */
}

.timeline-line {
  position: absolute;
  height: 4px;
  /* Thickness of the line */
  width: 100%;
  background-color: #d3d3d3;
  /* Color of the line */
  top: 50%;
  z-index: 1;
  background: linear-gradient(
    to right,
    #fe8d03 0%,
    #fe8d03 70%,
    /* End the orange at 60% */ #e6e6e5 70%,
    /* Start the grey at 60% */ #e6e6e5 100%
  );
}

.dates-container {
  display: flex;
  position: relative;
  z-index: 2;
  width: 100%;
  justify-content: space-between;
  padding: 0 0px;
  /* Padding to prevent the circles from touching the edge */
}

.date-point {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.date-circle {
  background-image: linear-gradient(
    to right,
    #fe8d03,
    #fe9600,
    #fe9e00,
    #fea700,
    #feaf01
  );
  /* Orange color */
  color: #151419;
  /* White text color */
  border-radius: 50%;
  width: clamp(5rem, 7vw, 8rem);
  height: clamp(5rem, 7vw, 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 3;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  font-family: "Roboto";
  font-weight: 500;
  color: #fbfbfb;
  border: 0px solid #fbfbfb;
  box-shadow: rgba(50, 50, 93, 0.15) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.15) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.17) 0px -2px 6px 0px inset;
}

.now {
  background-color: #fe8d03;
  /* Different color for the "Now" circle */

  color: #fbfbfb;
  /* Orange text color */
}

.spring {
  background-image: none;
  background-color: #FBFBFB;
  /* Different color for the "Now" circle */

  color: #151419;
  /* Orange text color */
}

.descriptions-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  gap: 4%;
}

.description-timeline {
  flex: 1;
  background: #e6e6e5;
  border-radius: 10px;
  padding: 1% 1.5% 1% 1.5%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
  font-family: "Roboto";
  font-weight: 400;
  color: #151419;
  text-align: left;
  margin: 0 10px;
  /* Adjust the margin as needed */
}

.title {
  font-size: clamp(0.8rem, 1.3vw, 1.2rem);
  font-family: "Roboto";
  font-weight: 600;
  color: #151419;
  margin-bottom: 5px;
}

.timeline-arrow {
  background: url("assets/right_timeline.png") no-repeat center center;
  /* Replace with your actual image path */
  background-size: contain;
  width: 20px;
  /* Set the width of the arrow */
  height: 20px;
  /* Set the height of the arrow */
  align-self: center;
  /* Align arrow with the timeline */
  flex-grow: 1;
  /* Allows the arrow to fill the space between dates */
  top: 50%;
  /* Start at the vertical center */
  transform: translateY(50%) translateY(-42%);
}

.timeline-arrow.four {
  background: url("assets/right_timeline_greyv2.png") no-repeat center center;
  background-size: contain;
}

/* OUR PARTNERS */
.third-orange-line-container {
  width: 20%;
  /* Full width the line will occupy */
  min-height: 0.4vh;
  margin: 2% auto;
  display: block;
  position: relative;
  overflow: hidden;
  /* Ensures the line doesn't show when it's growing */
  margin-bottom: 4%;
  margin-top: 4%;
}

.third-orange-line {
  width: 0;
  min-height: 0.4vh;
  background: #1b564b;
  border-radius: 5px;
  position: absolute;
  transition: width 1s ease;
  /* Animate the width */
  left: 50%;
  transform: translateX(-50%);
  /* Center the line */
}

.thirdanimate {
  width: 100%;
  /* Grow to the full width of the container */
}

@keyframes slides {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.marquee-section {
  width: 100%; /* Set the width of the container to 50% of the screen */
  margin: 0 auto; /* This will center the div horizontally */
  margin-top: 2%;
  margin-bottom: 1%;
  overflow: hidden; /* Ensures nothing spills outside the container */
  text-align: center;
}

.logos {
  overflow: hidden;
  padding: 3% 0px 2% 0px;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  content: "";
  width: 250px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logos:before {
  left: 0;
  background: linear-gradient(to right, #fbfbfb, rgba(251, 251, 251, 0));
}

.logos:after {
  right: 0;
  background: linear-gradient(to left, #fbfbfb, rgba(251, 251, 251, 0));
}

.logo_items {
  display: inline-block;
  animation: 55s slides infinite linear;
  will-change: transform;
}

.logos:hover .logo_items {
  animation-play-state: paused;
}

.logo_items img {
  height: 90px;
  margin-right: 50px;
  /* Keep your existing margin */
  transition: transform 0.3s ease;
  /* Smooth transition for scaling */
}

.logo_items img:hover {
  transform: scale(1.1);
  /* Increase the size by 10% on hover */
}

/* FOOTER */

footer {
  background-color: #1b564b;
  color: white;
  padding: 2% 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* Aligns children with space between them */
  height: 40vh;
  /* Set the height of the footer */
}

.footer-container {
  max-width: 1200px;
  width: 100%;
  /* Ensure it takes the full width available */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  /* Allows the container to grow and fill the space */
}

.newsletter {
  text-align: center;
}

.newsletter-label {
  color: #fbfbfb;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  /* Adjusted for visual fit */
  font-family: "Poppins";
  font-weight: 600;
  margin-bottom: 5px;
  /* Space between the label and the input */
}

.input-group {
  display: inline-flex;
  /* Aligns the input and button horizontally */
  margin-bottom: 0;
  /* Add margin to the bottom if necessary */
  border-radius: 5px;
  /* Apply border radius to the wrapper */
  overflow: hidden;
  /* Ensures the inner elements' borders are clipped */
}

#newsletter-email {
  padding: 10px;
  border: none;
  border-right: none;
  /* Remove the right border */
  border-radius: 5px 0 0 5px;
  /* Apply border-radius only on the left side */
  margin-right: -1px;
  /* Negative margin to make the elements overlap */
  width: 16vw;
  font-size: clamp(0.6rem, 1.2vw, 1.1rem);
}

#newsletter-email:focus {
  outline: none;
}

.newsletter-btn {
  border: none;
  padding: 0px 0px 0px 0px;
  /* Reduced the horizontal padding */
  background-color: #ff9900;
  color: white;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  width: 50px;
  /* Adjust this as needed, or remove it for the content to define the width */
  display: flex;
  /* To center the image vertically and horizontally */
  justify-content: center;
  align-items: center;
  position: relative;
}

.newsletter-btn img {
  width: auto;
  /* Set this to the actual width you want your image to be, for example, 20px */
  height: 20px;
  /* Adjust height accordingly */
}

#newsletter-email:hover,
.newsletter-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px inset,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  /* Inner shadow effect */
}

#response-message {
  height: 20px;
  margin-top: 5px;
  /* Allocate space for the message */
  color: transparent;
  /* Initially transparent */
  font-size: clamp(0.6rem, 1.2vw, 1.1rem);
  font-family: "Roboto";
  font-weight: 400;
  color: #151419;
}

.lds-ring {
  display: flex;
  /* Hidden initially */
  position: absolute;
  /* Positioned absolutely within the button */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Center the loader */
  width: 20px;
  /* Adjust as needed */
  height: 20px;
  /* Adjust as needed */
  justify-content: center;
  align-items: center;
  padding-left: 2px;
  padding-top: 2px;
}

.lds-ring div {
  box-sizing: border-box;
  display: flex;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

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

.socials-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding-bottom: 1%;
}

.social-icon {
  height: 50px; /* default height for all icons */
  transition: transform 0.3s ease; /* smooth transformation on hover */
  margin: 0 10px; /* space between icons */
}

.social-icon:hover {
  transform: scale(1.2); /* enlarges the icon by 10% on hover */
}

.footer-bottom {
  width: 100%;
  /* Ensure it takes the full width available */
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  /* Prevents the footer-bottom from shrinking */
  flex-basis: 10%;
  /* Takes up 20% of the footer's height */
  font-size: clamp(0.7rem, 1vw, 1.1rem);
  font-family: "Roboto";
  font-weight: 400;
  color: #151419;
}

.footer-text {
  /* Lighter text color */
  position: relative;
  /* Absolutely position this element */
  bottom: 10px;
  /* 10px from the bottom */
  /* Align with the horizontal padding of the footer */
  width: calc(100% - 40px);
  /* Subtract the left and right padding */
  text-align: center;
  margin-top: 20px;
}

.footer-items {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /*margin-top:10%;*/
}

.footer-item {
  display: inline-flex;
  /* This makes the div align its size with its content */
  margin: 0 10px;
  /* Adjust this value as needed for consistent spacing */
  padding: 0 5px;
  position: relative;
}

.footer-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  /* Adjust this value to be the same as the right margin */
  top: 0;
  bottom: 0;
  width: 1px;
  /* Width of the border */
  background: #000;
  /* Color of the border */
}

.footer-item a {
  color: #151419;
  text-decoration: none;
  transition: color 0.3s;
  /* Smooth color transition for hover effect */
}

.footer-item a:hover {
  color: orange;
  /* Text color changes to orange on hover */
}

.contact .email-text {
  display: none;
}

.contact:hover .contact-text {
  display: none;
}

.contact:hover .email-text {
  display: inline;
}

/* Portrait styles (like iPad in portrait mode for example) */

@media (orientation: portrait) {
  .images-row {
    width: 7%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 2%;
  }

  .badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .left-image {
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    margin-left: -20px; /* Adjust the margin as needed */
  }

  .right-image {
    position: absolute;
    right: 0;
    transform: translateX(100%);
    margin-right: -20px; /* Adjust the margin as needed */
  }

  .center-image img {
    display: block;
    height: 8vh;
    max-height: 150px;
  }

  .left-image img,
  .right-image img {
    display: block;
    height: 5vh; /* Adjust the height using viewport height */
    max-height: 150px;
    width: auto;
  }

  .phone {
    width: 100%;
    /* Set the width of the phone to 80% */
    position: relative;
    /* Use relative for z-index */
    z-index: 2;
    /* Make sure the phone is above the orange container */
    margin-top: 10vh;
    /* Adjust this value to overlap the orange container */
    order: 2;
    /* Place this second */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
  }

  .orange-container {
    height: 17vh;
    display: flex;
    justify-content: left;
    align-items: center;
    background: rgb(254, 141, 3);
    background: linear-gradient(
      90deg,
      rgba(254, 141, 3, 1) 23%,
      rgba(254, 141, 3, 0.9542191876750701) 56%,
      rgba(255, 177, 83, 1) 82%,
      rgba(255, 202, 138, 1) 100%
    );
    width: 170%;
    border-radius: 50px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
      rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
      rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  }

  .description {
    text-align: left;
    margin-left: 7%;
    width: 70%;
    font-family: "Roboto";
    font-weight: 400;
    font-style: "Regular";
    font-size: clamp(1.1rem, 1.8vw, 2rem);
    line-height: 140%;
    color: #ffffff;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    /* Space out the tabs evenly */
    align-items: flex-end;
    /* Align items to the end of the container's cross axis */
    height: 13vh;
    padding: 0;
    list-style: none;
    margin-left: 20%;
    width: 110%;
    margin-bottom: 0px;
    position: relative;
  }

  .image-container {
    width: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    position: relative;
  }

  .image-container.bottom {
    width: 40vw;
  }

  .faq-container {
    gap: 5%;
    width: 100%;
    min-height: 0;
    /* Adjust the gap between questions and answers if needed */
  }

  .faq-toggle-container {
    width: 90%;
  }

  footer {
    background-color: #1b564b;
    color: white;
    padding: 2% 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Aligns children with space between them */
    height: 20vh;
    /* Set the height of the footer */
  }

  #newsletter-email {
    padding: 10px;
    border: none;
    border-right: none;
    /* Remove the right border */
    border-radius: 5px 0 0 5px;
    /* Apply border-radius only on the left side */
    margin-right: -1px;
    /* Negative margin to make the elements overlap */
    width: 15vw;
    font-size: clamp(0.6rem, 1.2vw, 1.1rem);
  }
}

/* Mobile styles */
@media (max-width: 767px) {
  /* MOSAIC */
  .mosaic-container {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    grid-auto-rows: calc((70vh - 3 * 5px) / 7);
    height: 62vh;
  }

  .branding-container {
    height: 28vh;
    /* Reduced from 30vh to save space on mobile */
  }

  .logo-container {
    height: 10vh;
    /* Reduced proportionally */
    margin-top: 0%;
    align-items: flex-start;
    flex-direction: row;
  }

  .wingtap-logo {
    max-width: 10vh;
    /* Reduced proportionally */
  }

  .headline {
    height: 18vh;
    /* Reduced proportionally */
    padding: 0 0 1vh 0;
    width: 100%;
    /* Added padding for smaller screens */
  }

  .headline h1 {
    font-size: 7vw;
    /* Smaller font size on mobile */
  }

  .mobile-break {
    display: inline;
    /* Show the break on mobile */
  }

  .button-section,
  .scroll-button {
    height: 2vh;
    /* Reduced proportionally */
    bottom: 10px;
    /* Adjusted for less space */
  }

  /* NEW INTRO SECTION */

  .intro-section {
    height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding-top: 10vh;
  }

  .progress-container {
    width: 95%;
    text-align: center;
    margin-bottom: 14%;
  }

  /* Removed the flex property and set the width to auto to only take up the space of the content */
  #notna,
  #kitani {
    width: 20%;
    /* Only take up as much space as the content needs */
  }

  #notna {
    margin-right: -2%;
    /* 10px gap to the progress bar */
  }

  #kitani {
    margin-left: -3%;
    /* 2px gap to the progress bar */
  }

  .launch-title {
    font-family: "Poppins";
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    color: #151419;
    margin-bottom: 4%;
  }

  .progress-container img {
    width: 75%;
    /* Adjust this as needed */
    display: block;
    margin: auto;
  }

  #ProgressBar {
    flex-grow: 1;
    /* Allow the progress bar to grow and fill the space */
    height: 30px;
    border: 2px solid black;
    border-radius: 20px;
    padding: 4px;
    position: relative;
    overflow: hidden;
    /* Add left and right margins to center the progress bar */
    margin-left: 10px;
    margin-right: 2px;
  }

  @keyframes progressBar {
    from {
      width: 20%;
    }

    to {
      width: 82%;
    }
  }

  .intro {
    width: 90%;
    margin-top: 0;
    display: grid;
    grid-template-columns: 20% 80%;
    align-items: center;
    padding: 6%;
    background: #1b564b;
    border-radius: 50px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
      rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
      rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  }

  .image-area {
    display: flex;
    justify-content: center;
    /* Centers the image horizontally */
    align-items: center;
    /* Centers the image vertically */
    overflow: hidden;
    /* Ensures no spillover if you round the corners */
    padding: 13%;
    background: white;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
      rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
      rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  }

  .image-area img {
    width: 100%;
    /* Makes the image fill the div */
    height: auto;
    /* Keeps the image aspect ratio */
  }

  .intro-text {
    padding-left: 5%;
    font-family: "Roboto";
    font-weight: 400;
    font-style: "Regular";
    font-size: clamp(1.1rem, 1.8vw, 2rem);
    line-height: 140%;
    color: #000000;
  }

  .intro-v2 {
    width: 90%;
    max-height: 50vh;
  }

  .video-wrapper {
    position: relative;
    width: 100%; /* Ensures that the wrapper takes the full width of the container */
    /* Maintains the 16:9 aspect ratio */
    padding-top: 56.25%;
    overflow: hidden; /* Ensures no overflow from the rounded corners */
    max-height: 50vh; /* Maximum half of the viewport height */
  }

  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px; /* Rounds the corners */
  }

  .images-row {
    width: 0%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 20%;
  }

  .badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .left-image {
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    margin-left: -20px; /* Adjust the margin as needed */
  }

  .right-image {
    position: absolute;
    right: 0;
    transform: translateX(100%);
    margin-right: -20px; /* Adjust the margin as needed */
  }

  .center-image {
    display: none;
  }

  .left-image img,
  .right-image img {
    display: block;
    height: 5vh; /* Adjust the height using viewport height */
    max-height: 50px;
    width: auto;
  }

  /* CAROUSEL */
  .phone-section {
    flex-direction: column;
    justify-content: flex-start;
    height: 100vh;
    padding-top: 2%;
    /* Adding some padding to account for the overlap */
  }

  .content-container {
    width: 100%;
    order: 1;
    /* Place this first */
  }

  .contents {
    width: 100%;
    height: auto;
  }

  .tabs {
    height: 5vh;
    display: flex;
    justify-content: center;
    width: 100%;
    list-style: none;
    padding: 0 0%;
    /* Add padding to the sides */
    box-sizing: border-box;
    /* Include padding in width */
    margin-left: 0%;
    margin-right: -1%;
  }

  .tab {
    font-size: 5vw;
    /* Adjust the font size to be responsive */
    padding-right: 1.5%;
    padding-left: 1.5%;
  }

  .orange-container {
    width: 90%;
    height: 60vh;
    border-radius: 30px;
    /* Adjust border-radius if needed */
    position: relative;
    /* Set position to relative for z-index to work */
    z-index: 1;
    margin-top: 0;
    /* Space between tabs and orange container */
    /* Optional: Adjust or remove shadow if it doesn't look good on mobile */
    justify-content: center;
    align-items: flex-start;
    margin-left: auto;
    margin-right: auto;
    background: rgb(254, 141, 3);
    background: linear-gradient(
      0deg,
      rgba(255, 202, 138, 1) 0%,
      rgba(255, 177, 83, 1) 40%,
      rgba(254, 141, 3, 0.9542191876750701) 60%,
      rgba(254, 141, 3, 1) 100%
    );
  }

  .description {
    font-size: 4.2vw;
    /* Adjust the font size */
    padding: 5% 0 0 0;
    margin: 0;
    /* Add padding inside the orange container */
    text-align: center;
    /* Center align the text */
    width: 85%;
  }

  .phone {
    width: 85%;
    /* Set the width of the phone to 80% */
    position: relative;
    /* Use relative for z-index */
    z-index: 2;
    /* Make sure the phone is above the orange container */
    margin-top: -45vh;
    /* Adjust this value to overlap the orange container */
    order: 2;
    /* Place this second */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
  }

  .arrow {
    top: calc(50% + 0px);
    /* Adjust this if you want to move the arrows up or down */
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .arrow.left {
    left: calc(50% - 30% - 65px);
    /* Adjust this value based on your design */
    background-image: url("assets/left.png");
  }

  .arrow.right {
    right: calc(50% - 30% - 80px);
    /* Adjust this value based on your design */
    background-image: url("assets/right.png");
  }

  .phone img {
    width: 80%;
    max-width: none;
    padding: 0;
    /* Set phone image to width 100% of its container (.phone) */
    max-height: none;
    /* Override any max-height */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    /* Optional: Adjust or remove shadow if it doesn't look good on mobile */
  }

  .phone {
    margin-bottom: 10%;
  }

  /* MYSTERY BOX */

  .container {
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -5%;
  }

  .box {
    cursor: pointer;
    transition: transform 0.2s;
    /* Smooth transition for scaling */
    width: 25%;
  }

  #mystery-newsletter-email {
    padding: 10px;
    border: none;
    border-right: none;
    /* Remove the right border */
    border-radius: 5px 0 0 5px;
    /* Apply border-radius only on the left side */
    margin-right: -1px;
    /* Negative margin to make the elements overlap */
    width: 60vw;
    font-size: 4.2vw;
    background-color: #f2f2f2;
  }

  #newsletter p {
    font-size: clamp(1.1rem, 1.2vw, 1.5rem);
    font-family: "Roboto";
    font-weight: 400;
    color: #151419;
    margin-bottom: 2%;
    margin-top: 1%;
  }

  /* ELEPHANT SECTION */

  .desktop-break {
    display: none;
  }

  .text-container h2 {
    margin: 0;
    padding: 0;
    font-size: 5vw;
    font-family: "Poppins";
    font-weight: 700;
    color: #151419;
    /* Add other styles such as font-size, font-weight, color as needed */
  }

  .text-container p {
    margin: 0;
    padding: 0;
    width: 90%;
    font-size: 4.2vw;
    font-family: "Roboto";
    font-weight: 400;
    color: #151419;
  }

  .image-container {
    width: 40vw;
  }

  .half-height-container {
    width: 100%;
    height: 50vh;
    display: flex;
    position: relative;
    padding-bottom: 10%;
  }

  /* OURSTORY */
  .ourstory-container {
    min-height: auto;
    /* Allows the container to adjust its height based on its content */
  }

  .inner-container {
    /* Adjust the width for mobile */
    width: 90%;
    margin-bottom: 15%;
    margin-top: 10%;
    /* Example width, adjust as needed */
  }

  .ourstory-content {
    /* Switch to grid layout for better control */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns */
    grid-template-rows: auto auto;
    /* Two rows for photos at the top, text at the bottom */
    grid-gap: 10px;
    /* Space between grid items */
  }

  .photo {
    /* Reset flex settings and allow grid to place the item */
    flex: none;
    /* Remove flexbox settings */
    max-width: none;
    /* Remove max width limitation */
    width: 80%;
    /* Adjust the width of the photo */
    grid-row: 1;
    /* Place photos in the first row */
    position: relative;
  }

  #photo1 {
    grid-column: 1;
    /* Place first photo in the first column */
    justify-self: right;
    /* Right the photo in the grid cell */
  }

  #photo2 {
    grid-column: 2;
    /* Place second photo in the second column */
    justify-self: left;
    /* Left the photo in the grid cell */
  }

  .ourstory-text {
    /* Span the text across all columns in the second row */
    grid-column: 1 / -1;
    /* Stretch across all columns */
    grid-row: 2;
    /* Place text in the second row */
    margin: 0;
    /* Adjust left and right margins if necessary */
    margin-top: -25%;
    /* Pull the text box up to overlap with the photos */
    position: relative;
    /* Ensure the z-index is respected */
    z-index: 1;
    /* Set z-index lower than the photos so the text appears behind them */
    background-color: #fbfbfb;
    /* Assuming this is the white background color */
    border-radius: 30px;
    /* Maintain the border radius */
    padding: 28% 7% 8% 7%;
    font-size: 4.2vw;
  }

  .overlay {
    font-size: 3.5vw;
  }

  /* FAQ */

  .faq-section-container {
    padding: 10% 0 15% 0;
  }

  .faq-container {
    flex-direction: column;
    gap: 5%;
    width: 100%;
    /* Adjust the gap between questions and answers if needed */
  }

  .faq-container {
    min-height: none;
    /* Set a minimum height */
    max-height: auto;
    overflow-y: visible;
  }

  .faq-toggle-container {
    width: 90%;
  }

  .faq-answer {
    flex-basis: 100%;
    /* Take full width of the container */
    font-size: 4.2vw;
  }

  .faq-questions {
    flex-basis: 100%;
    /* Take full width of the container */
    max-height: 30vh;
    min-height: 30vh;
    /* Limit the height of the questions container */
    overflow-y: auto;
    /* Make it scrollable */
  }

  .question {
    margin-bottom: 5px;
    padding: 20px 10px 20px 20px;
    height: 60px;
  }

  .question.active {
    padding: 20px 10px 20px 20px;
    height: 60px;
  }

  .answer {
    /* Hide all answers by default */
    padding: 7% 10% 7% 10%;
    background-color: #e6e6e5;
    border-radius: 30px;
  }

  /* Adjust the toggle wrapper and label for better spacing and size on mobile */
  .toggle-wrapper {
    width: 90%;
    /* Adjusted for better spacing on the sides */
    margin-bottom: 5%;
    /* More space between the toggle and the faq-questions */
  }

  .toggle-label {
    font-size: 4.2vw;
    /* Adjust font size for mobile readability */
  }

  .second-orange-line-container {
    margin-bottom: 7%;
    margin-top: 7%;
  }

  /* MARQUEE */

  .logos:before,
  .logos:after {
    position: absolute;
    top: 0;
    content: "";
    width: 70px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }

  .logo_items img {
    height: 40px;
    margin-right: 30px;
    /* Keep your existing margin */
    transition: transform 0.3s ease;
    /* Smooth transition for scaling */
  }

  /* TIMELINE */
  .outer-timeline-container {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 30% 70%;
    /* Two columns of equal width */
    align-items: start;
    /* Align the grid items to the start */
    gap: 0px;
    /* Gap between columns */
    padding: 15% 5%;
    margin-bottom: 0%;
    height: auto;
  }

  /* Adjust the timeline-container for a vertical layout */
  .timeline-container {
    grid-column: 1;
    /* Place the timeline in the first column */
    display: flex;
    flex-direction: column;
    /* Stack date-points vertically */
    align-items: center;
    /* Center the date-points */
    align-self: stretch;
    /* Stretch the timeline container to fill the grid cell */
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
  }

  /* Hide the horizontal timeline line in mobile view */
  .timeline-line {
    position: absolute;
    width: 4px;
    /* Thickness of the line */
    height: 100%;
    /* Stretch from top to bottom */
    background-color: #d3d3d3;
    /* Base color of the line */
    left: 50%;
    /* Center the line horizontally within the timeline-container */
    top: 0;
    /* Start the line from the top of the timeline-container */
    transform: translateX(-50%);
    /* Center the line */
    z-index: 1;
    background: linear-gradient(
      to bottom,
      #fe8d03 0%,
      #fe8d03 70%,
      /* Orange for the height minus 60px for the 'Now' circle */ #e6e6e5
        calc(100% - 60px),
      /* Then grey for the bottom 60px */ #e6e6e5 100%
    );
  }

  /* Stack the date-points vertically */
  .dates-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Distribute the date circles evenly */
    align-items: center;
    /* Center the date-points */
    height: 100%;
    /* Set the height to be 100% of its parent container */
  }

  /* Adjust the size of the date circles for mobile */
  .date-circle {
    width: 20vw;
    /* Smaller width for mobile */
    height: 20vw;
    /* Smaller height for mobile */
    font-size: 4vw;
    /* Adjust font size for mobile */
    /* Other styles remain the same */
  }

  /* Hide the timeline arrows in the mobile view */
  .timeline-arrow {
    display: none;
  }

  /* Adjust the descriptions-container to stack descriptions vertically */
  .descriptions-container {
    grid-column: 2;
    /* Place the descriptions in the second column */
    display: flex;
    flex-direction: column;
    /* Stack descriptions vertically */
    width: auto;
    /* Auto width to fit content */
    gap: 20px;
    /* Gap between description boxes */
    align-self: stretch;
  }

  .title {
    font-size: 4vw;
    /* Adjust title size for mobile */
    /* Other styles remain the same */
  }

  /* Ensure description boxes don't stretch too wide on mobile */
  .description-timeline {
    width: 100%;
    /* Full width of the second column */
    /* Other styles remain the same */
    font-size: 3.8vw;
    padding: 5%;
  }

  /* FOOTER */
  footer {
    min-height: 30vh;
  }

  .final-headline-container {
    grid-column: 1 / -1;
    /* Span across all columns */
    width: 100%;
    /* Full width */
    text-align: center;
    /* Keep the text centered */
    /* Your other styles... */
  }

  /* Optionally, adjust headline and title sizes for mobile */
  .final-headline {
    font-size: 1.5em;
    /* Smaller font size for mobile */
    /* Other styles remain the same */
  }

  #newsletter-email {
    padding: 10px;
    border: none;
    border-right: none;
    /* Remove the right border */
    border-radius: 5px 0 0 5px;
    /* Apply border-radius only on the left side */
    margin-right: -1px;
    /* Negative margin to make the elements overlap */
    width: 45vw;
    font-size: 0.8rem;
  }

  /* SOME OTHER SECTION */

  .content-wrapper {
    width: 100%;
  }

  .carousel-container {
    height: 65vh;
    /* Or any other value suitable for mobile */
    padding-top: 15px;
    /* Less padding on mobile */
    /* ... other styles you want to change for mobile ... */
    max-width: 90%;
  }

  .carousel-container-wrapper {
    padding-bottom: 0px;
  }

  .carousel-image {
    width: 80%;
    /* For example, make the image take up 80% of the screen width */
    height: auto;
    /* Maintain aspect ratio */
    /* ... other styles you want to change for mobile ... */
  }

  .carousel-slides {
    left: 0;
    top: 0;
    transform: none;
  }

  .carousel-nav-title {
    display: inline-block;
    /* Align titles in line */
    margin: 0 0px;
    /* Space them out a bit */
    padding: 5px;
    /* Padding for clickable area */
    cursor: pointer;
    /* Change mouse pointer to indicate these are clickable */
    color: grey;
    /* Default non-active title color */
    transition: color 0.3s;
    /* Smooth transition for color change */
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 17px;
  }

  .carousel-subtitle {
    font-size: 1rem;
    /* Smaller text on mobile */
    left: 50%;
    margin-top: 20px;
    /* ... other styles you want to change for mobile ... */
  }

  /* Adjust the navigation arrows to be closer to the image on mobile */
  .carousel-button.prev {
    left: 10px;
    /* Closer to the edge for mobile */
  }

  .carousel-button.next {
    right: 10px;
    /* Closer to the edge for mobile */
  }
}