/* montserrat-600 - latin */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Satoshi-Regular.otf');
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Satoshi-Medium.otf');
}

/* montserrat-800 - latin */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/Satoshi-Bold.otf');
}

/* montserrat-900 - latin */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/Satoshi-Black.otf');
}
:root {
  --bolt-black: #222;
  --white: #ffffff;
  --sol-black: #454545;
  --background-grey: #fbfbfb;
  --button-grey: #f5f5f5;
  --inactive-text: #a3a3a3;
  --booked-red: #ffe6e6;
}
html {
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
  margin: 0px;
  font-family: 'Satoshi', serif;
  letter-spacing: -0.03em;
  color: var(--bolt-black);
}
body {
  overflow-x: hidden;
  width: 100vw;
}
.section {
  overflow: hidden;
}

/* ── Scroll-reveal base states ── */
.reveal {
  
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* stagger delays */
.stagger-1 {
  transition-delay: 0.08s;
}
.stagger-2 {
  transition-delay: 0.18s;
}
.stagger-3 {
  transition-delay: 0.28s;
}
.stagger-4 {
  transition-delay: 0.38s;
}
.stagger-5 {
  transition-delay: 0.48s;
}

/* ── Hero h1 entrance ── */
@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.intro-section h1 {
  animation: heroSlideUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* ── Nav link underline hover ── */
.navigation-buttons-holder a {
  position: relative;
}
/* .navigation-buttons-holder a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: #222;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.navigation-buttons-holder a:hover::after {
    transform: scaleX(1);
} */

/* ── Service box hover lift ── */
.service-box {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.service-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
}

/* ── Treatment card hover lift ── */
.box-vertical,
.box-horizontal {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.box-vertical:hover,
.box-horizontal:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.09);
}

/* ── Blog box image zoom ── */
.blog-background img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.blog-box:hover .blog-background img {
  transform: scale(1.06);
}

/* ── Stat box hover ── */
.stat-box {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-box:hover {
  transform: translateY(-6px);
}

/* ── Timeline blip pulse ── */
@keyframes blipPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(24, 117, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(24, 117, 255, 0);
  }
}
.timeline-blip {
  animation: blipPulse 2.2s ease-in-out infinite;
}

/* ── FAQ arrow rotate ── */
.downwards-arrow {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-question-container.clicked .downwards-arrow {
  transform: rotate(180deg);
}

/* ── Schedule container hover ── */
.schedule-container {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.schedule-container:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
/* .cursor,
.follower {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor {
  width: 33px;
  height: 33px;
  background: url('assets/images/cursor.png') no-repeat center center;
  background-size: contain;
}

.follower {
  width: 36.5px;
  height: 32px;
  background: url('assets/images/follower.png') no-repeat center center;
  background-size: contain;
  transition: transform 0.15s ease-out;
} */
h1 {
  font-weight: 700;
  letter-spacing: -0.05em;
  font-size: 80px;
  line-height: 75px;
}

h2 {
  font-weight: 700;
  letter-spacing: -0.05em;
  font-size: 55px;
  line-height: 60px;
}
h3 {
  letter-spacing: -0.05em;
}

.navigation-bar-mobile {
  display: none;
  height: 0px;
  width: 0px;
  overflow: hidden;
}
.navigation-bar {
  height: 80px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.6s ease-in-out;
  /* background-color: red; */
}
.navigation-bar.opaque {
  background: rgba(255, 255, 255, 0.63);
  backdrop-filter: blur(13.149999618530273px);
  -webkit-backdrop-filter: blur(13.149999618530273px);
}
.navigation-buttons-holder {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: end;
}
.navigation-buttons-holder nav {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: end;
  /* flex: 1; */
  display: block;
}
.nav-btns {
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.navigation-buttons-holder a {
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  color: #222;
  text-shadow: #ffffff95 0px 0px 30px;
  border: #ffffff00 solid 1px;
  padding-inline: 18px;
  padding-block: 7px;
  border-radius: 20px;
  transition: all 600ms ease-in-out;
  /* margin-inline: 20px; */
}
.navigation-buttons-holder a:first-of-type {
  /* margin-left: auto; */
}
.navigation-buttons-holder a:last-of-type {
  /* margin-left: auto; */
}
.navigation-buttons-holder a:hover {
  background-color: #ffffff34;
  border: #ffffff7e solid 1px;
  backdrop-filter: blur(5px);
}
.navigation-buttons-holder a.active-nav {
  background-color: #ffffff34;
  border: #ffffff7e solid 1px;
  backdrop-filter: blur(5px);
}

.navigation-buttons-holder a.bolded {
  font-weight: 700;
}
.bolt-logo {
  height: 32px;
  width: auto;
  margin-left: 100px;
  margin-right: auto;
  flex: none;
}
.bolt-logo img {
  height: 100%;
  width: auto;
}

.bolt-cameleon {
  display: none;
  height: 40px;
  width: auto;
  /* margin-right: 50px; */
  margin-left: auto;
  flex: none;
  filter: grayscale(100%);
}
.bolt-cameleon img {
  height: 100%;
  width: 1px;
  filter: grayscale(100%);
}

.intro-section {
  width: 100%;
  height: 100vh;
  margin-top: -90px;
  position: relative;
}
.intro-section::after {
  content: '';
  position: absolute;
  inset: 0; /* fill entire image */
  pointer-events: none; /* click-through */
  background: linear-gradient(to bottom, transparent 50%, white 100%);
}
.intro-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.intro-section h1 {
  position: absolute;
  bottom: 90px;
  left: 100px;
  font-size: 90px;
  line-height: 90px;
  z-index: 2;
}
.intro-section h1.contact-header {
  left: 10%;
}

.side-text {
  font-size: 18px;
  width: 40%;
  line-height: 18px;
}
.heading-side-text-row-column {
  display: flex;
  width: 90%;
  margin-inline: auto;
  align-items: start;
  justify-content: space-between;

  margin-top: 100px;
}

.reverse-image-text-section {
  width: 95%;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow-y: hidden;
  margin-top: 50px;
}
.reverse-container {
  width: 70%;

  position: relative;
}
.reverse-image-scroller {
  width: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;

  gap: 20px;
}
.reverse-image-scroller img {
  border-radius: 5px;
}
.reverse-image-scroller::-webkit-scrollbar {
  display: none;
}

.reverse-image-gradient {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    to bottom,
    white 0%,
    /* White at the very top */ rgba(255, 255, 255, 0) 10%,
    /* White up to 10% */ transparent 10%,
    /* Transparent from 10% */ transparent 90%,
    /* Transparent up to 90% */ rgba(255, 255, 255, 0) 90%,
    /* White from 90% */ white 100% /* White at the very bottom */
  );
}
.reverse-image-text-section h2 {
  width: 100%;
  margin-left: 50px;
  margin-top: 0px;
  font-size: 45px;
  font-weight: 700;
}
.revealed-text {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.revealed-text b {
  font-size: 20px;
  width: 90%;
}
.text-cover-reveal {
  width: 100%;
  height: 1000px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: #ffffffaa;
  transition: all 1s 0.5s ease-in-out;
}
.text-cover-reveal.shown {
  height: 0px;
}
.reverse-image-scroller img {
  width: 100%;
  height: auto;
}

.testimonial-brackets-section {
  width: 75%;
  margin-inline: auto;

  margin-top: 50px;
}
.testimonial-brackets-section.color-bg {
  background: url('/assets/images/color-bg.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.testimonial-bracket-container {
  display: flex;
  margin-top: 50px;
}
.up-bracket {
  width: 100px;
  height: 200px;
  background: url('/assets/images/bracket-up.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 20px;
  flex: none;
}
#up-fade {
  background: url('/assets/images/bracket-up-fade.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.testimonial-brackets-section p {
  font-size: 20px;

  margin-inline: 50px;
  opacity: 1;
  transition: all 0.3s;
}
.testimonial-brackets-section span {
  font-weight: 800;
  margin-top: 20px;
}
.testimonial-brackets-section p.hide {
  opacity: 0;
}
.down-bracket {
  width: 100px;
  height: 200px;
  background: url('/assets/images/bracket-down.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 20px;
  flex: none;
}
#down-fade {
  background: url('/assets/images/bracket-down-fade.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.grid-container {
  margin-top: 50px;
  display: grid;
  /* 5 equal columns */
  grid-template-columns: repeat(5, 1fr);
  /* 2 equal rows */
  grid-template-rows: repeat(2, 1fr);

  /* This creates the lines between cells */
  gap: 2px; /* 2px stroke */
  background-color: #e8e8e8; /* Gray color for the lines */
  border: 2px solid #e8e8e8; /* Add border around the whole grid */

  width: 90%; /* Adjust as needed */
  margin-inline: auto;
}
.grid-container.three-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
}
.small-grid {
  grid-template-columns: repeat(4, 1fr);
  /* 2 equal rows */
  grid-template-rows: repeat(2, 1fr);
}

.grid-item {
  background-color: #ffffff; /* White background for the cells */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 1.2em;
  color: #333;
  box-sizing: border-box; /* Include padding in element's total width/height */
  aspect-ratio: 1;
  transition: all 0.3s;
}
.grid-item:hover {
  /* background-color: #f1f1f1; */
}
.grid-item.grid-small {
  background-color: transparent;
}
.grid-item.grid-small:hover {
  background-color: #ffffffaa;
}
.grid-item:hover img {
  filter: grayscale(0%);
}
.grid-logo {
  width: 80%;
  height: 80%;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-logo img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
}

.team-section {
  width: 90%;
  margin-inline: auto;
  margin-top: 50px;
}
.team-box-row {
  display: flex;
  width: 100%;
  margin-top: 50px;
}
.team-box {
  width: 8vw;
  background: url('/assets/images/team1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
  flex: auto;
  margin-right: 15px;
  border-radius: 10px;
  filter: grayscale(100%);
  position: relative;
  cursor: pointer;
  transition: all 0.5s 0s linear;
}
#aya {
  background: url('/assets/images/1.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
#nicole {
  background: url('/assets/images/6.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
#Sarah {
  background: url('/assets/images/4.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
#emil {
  background: url('/assets/images/3.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
#lynn {
  background: url('/assets/images/5.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
#zeina {
  background: url('/assets/images/2.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.team-box.active {
  width: 600px;
  flex: none;
  filter: grayscale(0%);
  transition: all 0.5s 0s linear;
}
.flipped-name {
  position: absolute;
  bottom: 30px;
  right: 10px;
  rotate: 270deg;
  font-size: 30px;
  color: white;
  font-weight: 700;
}
.team-box.active .flipped-name {
  opacity: 0;
}

.frosted-container {
  position: absolute;
  right: 15px;
  bottom: 15px;
  border-radius: 7px;
  padding: 15px;
  width: 75%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.63);
  backdrop-filter: blur(13.149999618530273px);
  -webkit-backdrop-filter: blur(13.149999618530273px);
  display: flex;
  opacity: 1;
  transition: all 0.5s 0.6s;
}
.frosted-container.inactive {
  opacity: 0;
  transition: all 0.2s 0s;
}
.team-box-description {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-right: auto;
}
.frosted-container h3 {
  font-size: 22px;
  font-weight: 700;
}
.frosted-container b {
  font-size: 13px;
  font-weight: 700;
  line-height: 0.9;
}
.frosted-container p {
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
  max-lines: 4;
}
.frosted-container h4 {
  font-size: 13px;
  font-weight: 700;
  margin-top: auto;
}
.accreditation-container {
  width: unset;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: start;
}
.acrid-bubble {
  width: 90%;
  margin-bottom: 5px;
  padding-block: 5px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.63);
  backdrop-filter: blur(13.149999618530273px);
  -webkit-backdrop-filter: blur(13.149999618530273px);
}
.linkedin-logo {
  margin-top: 15px;
  height: 23px;
  width: 23px;
  background: url('/assets/images/linkedin.png');
  background-size: contain;
  opacity: 0.8;
}

.scattered-perks-section {
  width: 95%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 100px;
  margin-bottom: 50px;
  height: 1000px;
}
.scattered-perks-section h2 {
  font-size: 120px;
  font-weight: 800;
}
.scattered-perks-container {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
  min-height: 250px; /* Give it a minimum height */
  color: black;
  padding: 0px; /* Padding inside the container */
}
.scattered-perks-container .perk-grid-box:nth-child(1) {
  animation-delay: 2s;
}
.scattered-perks-container .perk-grid-box:nth-child(2) {
  animation-delay: 3s;
}
.scattered-perks-container .perk-grid-box:nth-child(3) {
  animation-delay: 6s;
}
.scattered-perks-container .perk-grid-box:nth-child(4) {
  animation-delay: 8s;
}
.scattered-perks-container .perk-grid-box:nth-child(5) {
  animation-delay: 9s;
}
.scattered-perks-container .perk-grid-box:nth-child(6) {
  animation-delay: 5s;
}
.scattered-perks-container .perk-grid-box:nth-child(7) {
  animation-delay: 1s;
}
.scattered-perks-container .perk-grid-box:nth-child(8) {
  animation-delay: 2s;
}
.scattered-perks-container .perk-grid-box:nth-child(9) {
  animation-delay: 7s;
}
.scattered-perks-container .perk-grid-box:nth-child(10) {
  animation-delay: 4s;
}
.scattered-perks-container .perk-grid-box:nth-child(11) {
  animation-delay: 4s;
}
.scattered-perks-container .perk-grid-box:nth-child(12) {
  animation-delay: 6s;
}
.scattered-perks-container .perk-grid-box:nth-child(13) {
  animation-delay: 8s;
}
.scattered-perks-container .perk-grid-box:nth-child(14) {
  animation-delay: 9s;
}
.scattered-perks-container .perk-grid-box:nth-child(15) {
  animation-delay: 5s;
}
.scattered-perks-container .perk-grid-box:nth-child(16) {
  animation-delay: 1s;
}
.scattered-perks-container .perk-grid-box:nth-child(17) {
  animation-delay: 3s;
}
.scattered-perks-container .perk-grid-box:nth-child(18) {
  animation-delay: 7s;
}
.scattered-perks-container .perk-grid-box:nth-child(19) {
  animation-delay: 0s;
}
.scattered-perks-container .perk-grid-box:nth-child(20) {
  animation-delay: 2s;
}
.scattered-perks-container .perk-grid-box:nth-child(21) {
  animation-delay: 7s;
}
.scattered-perks-container .perk-grid-box:nth-child(22) {
  animation-delay: 6s;
}
.scattered-perks-container .perk-grid-box:nth-child(23) {
  animation-delay: 4s;
}
.scattered-perks-container .perk-grid-box:nth-child(24) {
  animation-delay: 3s;
}
.scattered-perks-container .perk-grid-box:nth-child(25) {
  animation-delay: 9s;
}
.scattered-perks-container .perk-grid-box:nth-child(26) {
  animation-delay: 4s;
}
.scattered-perks-container .perk-grid-box:nth-child(27) {
  animation-delay: 6s;
}
.scattered-perks-container .perk-grid-box:nth-child(28) {
  animation-delay: 8s;
}
.scattered-perks-container .perk-grid-box:nth-child(29) {
  animation-delay: 2s;
}
.scattered-perks-container .perk-grid-box:nth-child(30) {
  animation-delay: 5s;
}
.scattered-perks-container .perk-grid-box:nth-child(31) {
  animation-delay: 1s;
}
.scattered-perks-container .perk-grid-box:nth-child(32) {
  animation-delay: 7s;
}
.scattered-perks-container .perk-grid-box:nth-child(33) {
  animation-delay: 1s;
}
.scattered-perks-container .perk-grid-box:nth-child(34) {
  animation-delay: 9s;
}
.scattered-perks-container .perk-grid-box:nth-child(35) {
  animation-delay: 3s;
}
.scattered-perks-container .perk-grid-box:nth-child(36) {
  animation-delay: 1s;
}
.scattered-perks-container .perk-grid-box:nth-child(37) {
  animation-delay: 8s;
}
.scattered-perks-container .perk-grid-box:nth-child(38) {
  animation-delay: 2s;
}
.scattered-perks-container .perk-grid-box:nth-child(39) {
  animation-delay: 5s;
}
.scattered-perks-container .perk-grid-box:nth-child(40) {
  animation-delay: 3s;
}
.perk-grid-box {
  font-weight: bold;
  display: flex; /* Use flexbox to center content inside each item */
  justify-content: center;
  align-items: center;
  padding: 15px;
  border-radius: 5px;
  animation: floatDisappear 25s ease-in-out infinite;
}
.perk-image-box {
  background: #ffffffe9;

  border-radius: 15px;
  padding: 20px;
  height: 120px;
  width: 120px;
  border: 2px solid #e3e3e3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.perk-image-box:nth-of-type(1) {
}
.perk-image-box img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  opacity: 1;
}

.scattered-boxes-section {
  width: 95%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 100px;
  margin-bottom: 50px;
  height: 600px;
}
.scattered-boxes-section h2 {
  font-size: 120px;
  font-weight: 800;
}
.scattered-boxes-container {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  min-height: 250px; /* Give it a minimum height */
  color: black;
  padding: 10px; /* Padding inside the container */
}

.grid-box {
  font-weight: bold;
  display: flex; /* Use flexbox to center content inside each item */
  justify-content: center;
  align-items: center;
  padding: 15px;
  border-radius: 5px;
}
.perk-box {
  background: #f6f6f6;
  border-radius: 15px;
  padding: 20px;
  min-height: 230px;
  width: 200px;
  border: 2px solid #e3e3e3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;

  animation: float 10s ease-in-out infinite;
}

#type2 {
  background: #ffffff45;
  animation: float1 10s ease-in-out infinite;
}
#type2:first-child {
  background: #fff;
}
#type3 {
  border: 2px solid rgba(222, 222, 222, 0.3);
  background-color: rgba(222, 222, 222, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: float2 10s ease-in-out infinite;
}
/* Custom positions */
.perk-box:nth-child(1) {
  animation-delay: 0s;
}

.perk-box:nth-child(2) {
  animation-delay: 1s;
}

.perk-box:nth-child(3) {
  animation-delay: 2s;
}
.perk-box:nth-child(4) {
  animation-delay: 1.5s;
}

.perk-box:nth-child(5) {
  animation-delay: 2.5s;
}

.perk-box b {
  font-size: 18px;
}
.perk-box p {
  margin-top: 5px;
  font-size: 15px;
}

@keyframes floatDisappear {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

  25% {
    transform: translate(5px, -5px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    transform: translate(0px, -10px);
  }
  75% {
    transform: translate(-5px, -5px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, -5px);
  }
  50% {
    transform: translate(0px, -10px);
  }
  75% {
    transform: translate(-5px, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes float1 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-5px, -5px);
  }
  50% {
    transform: translate(2px, -5px);
  }
  75% {
    transform: translate(-1px, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes float2 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, 5px);
  }
  50% {
    transform: translate(-2px, 5px);
  }
  75% {
    transform: translate(-1px, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.points-and-images-section {
  width: 90%;
  margin-inline: auto;
  margin-block: 50px;
  margin-top: 70px;
  margin-bottom: 150px;
  overflow-x: hidden;
  overflow-y: visible;
  height: auto;
}
.points-and-images-row {
  position: relative;
  display: flex;
  margin-top: 50px;
}
.countdown-container {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 70px;
  height: 70px;
  opacity: 0;
}

svg {
  transform: rotate(-90deg);
}

.ring-bg {
  fill: #ffffff99;
  stroke: #eee;
  stroke-width: 0;
}

.ring {
  fill: none;
  stroke: #ffffffdd;
  stroke-width: 3;

  stroke-dasharray: 157; /* 2 * π * r (approx) */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.countdown-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.points-column {
  width: 60%;
}
.point-container {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: solid 10px #ececec;
  padding-inline: 20px;
  font-size: 28px;
  width: 100%;
  border-radius: 0px 12px 12px 0px;
  transition: all 300ms ease-in-out;
}
.point-container h3 {
  font-weight: 600;
}
.point-container p {
  display: none;
  font-size: 17px;
  margin-top: 5px;
}
.point-container.active-point {
  height: 180px;
  border-left: solid 10px #222;

  background: #e5e5e574;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.point-container.active-point p {
  display: block;
}
.point-image-container {
  width: 40%;
  height: 100%;
  position: absolute;
  right: 10%;
  top: -20px;
  z-index: -1;
  opacity: 1;
  transition: all 400ms ease-in-out;
}
.hidden-image {
  opacity: 0;
  transition: all 600ms ease-in-out;
}

.point-image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.image-collection-section {
  width: 85%;
  margin-top: 50px;
  margin-inline: auto;
}
.image-collection-section img {
  width: 100%;
  /* height: auto; */
  margin-top: 30px;
  margin-bottom: 30px;
}

.network-section {
  width: 85%;
  margin-top: 150px;
  margin-bottom: 60px;
  margin-inline: auto;
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
}

.network-section img {
  width: 100%;
  height: auto;
  opacity: 0;
}

.network-images {
  position: absolute;
  width: 125px;
  height: 150px;
  background-color: #eee;
  border-radius: 10px;
  top: 0px;

  opacity: 0;
}
.network-images.appear {
  opacity: 1;
}
.floating-text {
  width: 50%;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  display: flex;
}
.network-section h2 {
  font-size: 40px;
  text-align: center;
  line-height: 40px;
}
.floating-text b {
  text-align: center;
}
.network-images:nth-of-type(1) {
  margin-left: 10px;
  margin-top: 60px;

  transition: all 700ms 000ms ease-in-out;
}
.network-images:nth-of-type(2) {
  margin-left: 10px;
  margin-top: 220px;

  transition: all 700ms 100ms ease-in-out;
}
.network-images:nth-of-type(3) {
  margin-left: 145px;
  margin-top: 10px;

  transition: all 700ms 200ms ease-in-out;
}
.network-images:nth-of-type(4) {
  margin-left: 145px;
  margin-top: 170px;

  transition: all 700ms 300ms ease-in-out;
}
.network-images:nth-of-type(5) {
  margin-left: 280px;
  margin-top: 70px;

  transition: all 700ms 400ms ease-in-out;
}
.network-images:nth-of-type(6) {
  margin-left: 415px;
  margin-top: 20px;

  transition: all 700ms 500ms ease-in-out;
}
.network-images:nth-of-type(7) {
  margin-left: 550px;
  margin-top: 50px;

  transition: all 700ms 600ms ease-in-out;
}
.network-images:nth-of-type(8) {
  margin-left: 685px;
  margin-top: 20px;

  transition: all 700ms 700ms ease-in-out;
}
.network-images:nth-of-type(9) {
  margin-left: 820px;
  margin-top: 85px;

  transition: all 700ms 800ms ease-in-out;
}
.network-images:nth-of-type(10) {
  margin-left: 955px;
  margin-top: 10px;

  transition: all 700ms 900ms ease-in-out;
}
.network-images:nth-of-type(11) {
  margin-left: 955px;
  margin-top: 170px;

  transition: all 700ms 1000ms ease-in-out;
}
.network-images:nth-of-type(12) {
  margin-left: 1090px;
  margin-top: 70px;

  transition: all 700ms 1100ms ease-in-out;
}
.network-images:nth-of-type(13) {
  margin-left: 1090px;
  margin-top: 230px;

  transition: all 700ms 1200ms ease-in-out;
}
.network-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  border-radius: 5px;
}

.doctor-timeline-section {
  width: 85%;
  margin-inline: auto;
  display: flex;
  margin-top: 80px;
}
.header-left-container {
  width: 80%;
  margin-top: 50px;
  padding-inline-end: 30px;
  display: flex;
  flex-direction: column;
}
.header-left-container h2 {
  margin-bottom: 15px;
}
.timeline-right-container {
  width: 100%;
  margin-top: 50px;
  border-left: solid #99c2ff 1px;
}

.timeline-box {
  margin-bottom: 50px;
  padding-inline: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.timeline-box b {
  color: #1875ff;
  margin-bottom: 10px;
}
.timeline-box h3 {
  margin-bottom: 10px;
}
.timeline-box:last-of-type {
  margin-bottom: 10px;
}
.timeline-blip {
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: #1875ff;
  position: absolute;
  left: -5px;
  top: 5px;
}

.stagered-boxes {
  width: 85%;
  margin-top: 10px;
  margin-inline: auto;
}

.stagered-container {
  width: 100%;
  display: flex;
  margin-top: 40px;
  gap: 15px;
}
.stagered-column {
  width: 100%;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.stagered-boxes img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}
.large-stagered {
  width: 100%;
  border-radius: 20px;
  opacity: 0;
}
.small-stagered {
  width: 100%;
  border-radius: 20px;
  opacity: 0;
}
.large-stagered.appear {
  opacity: 1;
}
.small-stagered.appear {
  opacity: 1;
}

#small0 {
  transition: all 0.8s 0.5s ease-out;
}
#small1 {
  transition: all 0.8s 0.8s ease-out;
}
#big0 {
  transition: all 0.8s 0s ease-out;
}
#big1 {
  transition: all 0.8s 0.3s ease-out;
}
.horizontal-new-section {
  width: 100%;
  position: relative;
}
.horizontal-timeline-section-new {
  width: 100%;
  position: relative;
  height: 100vh;
}
.horizontal-timeline-container-new {
  display: flex;
  height: 100vh;
  width: max-content;
  position: sticky;
  top: 0;
}
.horizontal-timeline-section {
  width: 100%;
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}

.gradient-left {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 100%;
  background: linear-gradient(to right, white, transparent);
}
.gradient-right {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 200px;
  height: 100%;
  background: linear-gradient(to left, white, transparent);
}
.timeline-header {
  margin-left: 100px;
  margin-top: 100px;
}
.horizontal-timeline-container {
  height: 100%;
  display: flex;
  overflow-x: scroll;
  position: relative;
  scrollbar-width: none;
  flex: none;
  transition: transform 0.1s ease;
  width: max-content;
}
.horizontal-timeline-container::-webkit-scrollbar {
  display: hidden;
}
.timeline-line {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;

  height: 7px;
  transform: translateY(-50%);
}
.timeline-image-text-pair {
  width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-right: 100px;
}
.timeline-text-container {
  height: 300px;
  width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-block: 70px;
  flex: none;
}
.timeline-dot {
  width: 30px;
  height: 30px;
  border-radius: 15px;

  flex: none;
}
.timeline-text-container.under {
  justify-content: start;
}
.timeline-image-text-pair:first-child {
  margin-left: 20vw;
}
.timeline-image-text-pair h3 {
  width: 90%;
  font-size: 30px;
}
.timeline-image-text-pair p {
  width: 90%;
  font-size: 18px;
}
.timeline-image-container {
  height: 300px;
  width: 450px;
  margin-block: 70px;
}
.timeline-image-container img {
  height: 100%;
  width: 100%;
  border-radius: 7px;
}

.stats-section {
  width: 95%;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.stat-box {
  width: 15%;
  margin-inline: auto;
}
.stat-box h3 {
  font-size: 40px;
  /* font-size: 70px; */
}
.stat-seperator {
  height: 120px;
  width: 2px;
  background-color: #d1d1d1;
}

.treated-section {
  width: 90%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  gap: 20px;
}

.top-three-row {
  display: flex;
  gap: 20px;
}
.bottom-two-row {
  display: flex;
  gap: 20px;
}
.box-vertical {
  height: 500px;
  width: 100%;
  border: #e7e7e7 2px solid;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.box-vertical h3 {
  font-size: 25px;
}
.box-vertical p {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.treatment-image {
  margin-top: auto;
  width: 100%;
  height: 300px;

  position: relative;
  border: solid 3px #ffffffaa;
}
.treatment-image::after {
  content: '';
  position: absolute;
  inset: 0; /* fill entire image */
  pointer-events: none; /* click-through */
  background: linear-gradient(to bottom, transparent 50%, white 100%);
}

.treatment-image img {
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.box-horizontal {
  height: 300px;
  width: 100%;
  border: #e7e7e7 3px solid;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: row;
}
.box-horizontal h3 {
  font-size: 30px;
}
.box-horizontal p {
  font-size: 17px;
  font-weight: 600;
}
.box-horizontal .treatment-image {
  margin-top: auto;
  width: 50%;
  height: 100%;
}
.box-horizontal .treatment-image::after {
  content: '';
  position: absolute;
  inset: 0; /* fill entire image */
  pointer-events: none; /* click-through */
  background: linear-gradient(to left, transparent 30%, white 100%);
}
.right-text-and-images-section {
  width: 85%;
  margin-inline: auto;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}
.right-text-and-images-section h3 {
  width: 70%;
  font-size: 40px;
  margin-inline: auto;
}
.right-text-and-images-section p {
  font-size: 20px;
  width: 70%;
  margin-inline: auto;
  margin-top: 20px;
}
.right-text-and-images-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* grid-auto-columns: max-content; */
  /* grid-template-columns: 1fr 1fr 1fr; */
  /* grid-template-columns: repeat(auto-fit, min-content); */
  margin-top: 30px;
  gap: 20px;
}

.right-text-and-image {
  flex: none;
  height: 320px;
  width: 320px;
  background-color: #eee;
  border-radius: 20px;
}

.right-text-and-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.right-only-images-section {
  width: 100%;

  margin-top: 50px;
  overflow: hidden;
}
.right-only-images-section h2 {
  margin-left: 100px;
}
.right-only-images-container {
  width: 100%;
  align-items: center;
  justify-content: start;
  display: flex;
  overflow-x: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
  margin-top: 30px;
  margin-bottom: 50px;
}

.right-only-images-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.right-only-images {
  flex: none;
  height: 23vw;
  width: 23%;
  background-color: #eee;
  border-radius: 20px;
  margin-right: 15px;
  position: relative;
}
.right-only-images img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.right-only-image-overlay {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 15px;
}
.right-bubble {
  width: fit-content;
  padding-inline: 15px;
  padding-block: 5px;
  border-radius: 20px;
  border: #fff solid 3px;
  color: #fff;
  box-shadow: #c3c3c344 0px 0px 20px;
  background-color: #ffffff00;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.right-frosted-label {
  width: 100%;
  height: 90px;
  border-radius: 15px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.63);
  backdrop-filter: blur(13.149999618530273px);
  -webkit-backdrop-filter: blur(13.149999618530273px);
  color: #222;
  font-size: 20px;
  font-weight: 700;
  padding: 10px;
  padding-block: 15px;
}
.right-only-images:nth-child(1) {
  margin-left: 100px;
}
.right-only-images img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.team-information-section {
  width: 80%;
  margin-inline: auto;
  margin-top: 50px;
  display: flex;
  gap: 100px;
}
.team-information-text-column {
  width: 70%;
  opacity: 1;
  transition: 0.3s ease-in-out;
}
.team-information-text-column.disappear {
  width: 70%;
  opacity: 0;
}
.team-information-section h2 {
  font-size: 50px;
  font-weight: 800;
}
.team-information-section b {
  font-size: 23px;
  font-weight: 800;
}
.team-information-section p {
  font-size: 19px;
  font-weight: 700;
  margin-top: 25px;
}
.team-information-section h3 {
  font-size: 23px;
  font-weight: 800;
  margin-top: 20px;
}
.skills-bubbles-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 13px;
}
.skill-bubble {
  height: 40px;
  padding-inline: 20px;
  border-radius: 20px;
  border: solid 2.5px #222;
  flex: none;
  font-size: 21px;
  font-weight: 700;
  margin-right: 13px;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-member-image {
  width: 80%;
  height: auto;
  margin-top: 20px;
  aspect-ratio: 1;
}
.team-member-image img {
  height: 100%;
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  object-position: bottom;
  transition: all 0.3s ease-in-out;
  opacity: 1;
}
.team-member-image img.disappear {
  opacity: 0;
}

.career-section {
  width: 85%;
  margin-inline: auto;
  margin-top: 100px;
  margin-bottom: 100px;
}
.career-section h2 {
  margin-left: 20px;
  margin-bottom: 30px;
}
.career-option {
  display: flex;
  align-items: center;
  padding: 20px;
  padding-block: 30px;
  border-bottom: solid 2px #dcdcdc;
}
.career-option:last-child {
  border-bottom: none;
}
.career-description-container {
  width: 80%;
  margin-right: auto;
}
.career-description-container h3 {
  font-size: 30px;
}
.career-description-container p {
  font-size: 17px;
}
.career-option b {
  font-size: 30px;
}
.apply-row {
  display: flex;
}

.contact-form-section {
  width: 80%;
  position: relative;
  margin-inline: auto;
  height: unset;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
}
.contact-form-section h2 {
  margin-bottom: 50px;
}
.contact-form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  height: unset;
  scrollbar-width: none;
  position: relative;
}
.contact-form-container::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}
.contact-form-line {
  height: 550px;
  width: 8px;
  background: linear-gradient(
    to bottom,
    #22222200 0%,
    /* Transparent at the very top */ #222 10%,
    /* Transparent up to 10% */ #222 10%,
    /* Black from 10% */ #222 90%,
    /* Black up to 90% */ #222 90%,
    /* Transparent from 90% */ #22222200 100%
      /* Transparent at the very bottom */
  );
  position: absolute;
  top: 50px;
  left: 56.5px;
}

.contact-form-question-container {
  display: flex;
  width: 100%;
  align-items: start;
  justify-content: start;
  margin-top: 20px;
}
.contact-point {
  width: 22px;
  height: 22px;
  border-radius: 11px;

  flex: none;
  margin-top: 7px;
}
.contact-question {
  width: 100%;
}
.contact-form-question-container h3 {
  font-size: 25px;
}

.question-bubbles-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 13px;
}
.question-bubble {
  height: 36px;
  padding-inline: 15px;
  border-radius: 18px;
  border: solid 2px #222;
  flex: none;
  font-size: 16px;
  font-weight: 700;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: all 0.5s ease-in-out;
}
.question-bubble.selected {
  color: white;
}
.next-button {
  height: 40px;
  padding-inline: 20px;
  border-radius: 20px;

  color: white;
  width: min-content;
  flex: none;
  font-size: 16px;
  font-weight: 700;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-top: 20px;
}

.input-group {
  position: relative;
  width: 100%; /* Adjust width as needed */
  margin-bottom: 25px; /* Space for the floating label */
}
.input-field {
  width: 100%;
  padding: 10px 0; /* Vertical padding */
  border: none; /* Remove all borders */
  border-bottom: 2px solid #222; /* Only the bottom line */
  background-color: transparent; /* No background */
  font-size: 1rem;
  color: #222;
  outline: none; /* Remove outline on focus */
  transition: border-color 0.3s ease; /* Smooth transition for border color */
  margin-top: 20px;
}

/* Change bottom line color on focus */
.input-field:focus {
  border-bottom-color: #222; /* Blue bottom line on focus */
}

/* Hide placeholder on focus for better floating label experience */
.input-field:focus::placeholder {
  color: transparent;
}

/* The Label for Floating Effect */
.input-label {
  position: absolute;
  left: 0;
  top: 20px; /* Aligns with input text */
  color: #222;
  font-size: 18px;
  pointer-events: none; /* Allows clicks to pass through to the input */
  transition:
    top 0.3s ease,
    font-size 0.3s ease,
    color 0.3s ease; /* Smooth transition */
}

.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
  top: 0px; /* Move label up */
  font-size: 0.8rem; /* Make label smaller */
  color: #222; /* Change label color */
}

/* Prevent autocomplete background from interfering with transparency */
.input-field:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
  -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
  transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
}

.venues-section {
  width: 85%;
  margin-inline: auto;
  margin-top: 100px;
  position: relative;
}
.venue-image {
  width: 100%;
  height: 800px;
  background: url('/assets/images/color-bg.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  opacity: 1;
  transition: all 600ms ease-in-out;
}
.venue-image.fade-out {
  opacity: 0;
}

.venue-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.venues-container {
  position: absolute;
  top: 0px;
  left: 0px;

  width: 100%;
  height: 800px;
  border-radius: 20px;
  background-color: #ffffff40;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}
.venue-description {
  width: 40%;

  display: flex;
  flex-direction: column;
  margin-block: 80px;
  margin-right: 70px;
}
.venues-container h3 {
  font-size: 80px;
  line-height: 80px;
  text-shadow: #ffffffdf 0px 0px 100px;
}
.venues-container p {
  font-size: 22px;
  margin-top: 30px;
  text-shadow: #ffffffaa 0px 0px 20px;
}
.venue-bubbles {
  display: flex;
  margin-top: auto;
  display: none;
}
.venue-bubble {
  height: 45px;
  border: solid 2.5px #222;
  border-radius: 22.5px;
  padding-inline: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 10px;
}
.moving-boxes-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;

  align-items: start;
  justify-content: start;

  width: 40%;
  max-width: 800px; /* Limit overall width */
  scrollbar-width: none;
}
.moving-boxes-container::-webkit-scrollbar {
  display: none;
}
.venue-box-row {
  display: flex;
  height: 250px;
  width: 100%;
  margin-top: 12px;
}
.box-spacer {
  width: 12px;
  height: 1px;
  flex: none;
}
.vanue-item {
  width: 50%;
  height: 250px;
  background-color: #ffffff6f;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  margin-top: 15px;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.5s ease-in-out;
}
.vanue-item.active-venue {
  background-color: #ffd9b595;
}
.vanue-item.active-venue p {
  opacity: 1;
}
.vanue-item.active-venue b {
  opacity: 1;
}
.vanue-item b {
  font-weight: 700px;
  letter-spacing: -0.05em;
  font-size: 22px;
  opacity: 0.15;
  transition: all 600ms ease-in-out;
}
.vanue-item p {
  font-weight: 700px;
  letter-spacing: -0.03em;
  font-size: 15px;
  margin-top: 10px;
  opacity: 0.15;
  transition: all 600ms ease-in-out;
}
.vanue-item.active-venue .bubble-dark {
  opacity: 1;
}
.bubble-dark {
  border: 2px solid #222;
  width: fit-content;
  padding: 15px;
  padding-block: 5px;
  border-radius: 20px;
  margin-top: auto;
  opacity: 0.15;
  transition: all 600ms ease-in-out;
}
.vanue-item.right-vanue {
  margin-top: 100px;
}

.timeline-section-section {
  width: 100%;
  height: unset;
  position: relative;
  margin-top: 50px;
}
.timeline-line-moving {
  height: 500px;
  width: 45vw;
  background-color: #ffffffaa;
  border-right: 2px #222 solid;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 99;
  display: none;
}
.timeline-section {
  width: 95%;
  margin-inline: auto;

  background-color: #fff;
  overflow: hidden;
}
.timeline-container {
  width: 100%;
  min-height: 40px;
  height: auto;
  position: relative;
}
.timeline-cover {
  background-color: #ffffffaa;
  width: 15%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 22;
  transition: all 1000ms ease-in-out;
  border-right: #222 solid 3px;
}
.timeline-p {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: flex;
  z-index: 23;
  align-items: end;
  justify-content: end;
}
.timeline-arrow {
  width: 36px;
  height: 36px;
  border-radius: 18px;

  position: absolute;
  right: -20px;
  top: 50%;
  padding: 10px;
}
.timeline-arrow img {
  height: 100%;
  width: 100%;
  margin-left: -1px;
}
.timeline-floating-box {
  position: absolute;
  padding-inline: auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff63;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-size: 27px;
  border-radius: 12px;
  transition: all 600ms ease-in-out;
}
.timeline-floating-box.activated-box {
}
.timeline-floating-box.activated-box b {
  color: #fff;
}

.timeline-container b {
  margin-inline: 25px;
}
.timeline-container p {
  margin-right: 10%;
  margin-bottom: 10%;
  font-size: 24px;
  font-weight: 700;
  width: 50%;
}
#float0 {
  left: 10%;
  top: 40%;
}
#float1 {
  left: 25%;
  top: 50%;
}
#float2 {
  left: 40%;
  top: 60%;
}
#float3 {
  left: 55%;
  top: 40%;
}
#float4 {
  left: 70%;
  top: 50%;
}
.timeline-container img {
  width: 100%;
  height: auto;
}

.hall-of-fame-section {
  width: 85%;
  margin-inline: auto;
  margin-top: 50px;
}
.fame-container {
  width: 100%;
  display: flex;
  margin-top: 40px;
}
.fame-line {
  width: 1px;
  height: 600px;
  background-color: #e1e1e1;
  margin-inline: 5px;
  flex: none;
}
.fame-box {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fame-description {
  width: 90%;
}
.fame-image {
  width: 90%;
  height: auto;
}

.fame-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.fame-box h3 {
  font-size: 23px;
  margin-top: 15px;
  margin-inline: 10px;
}
.fame-box p {
  font-size: 18px;
  margin-top: -5px;
  margin-inline: 10px;
}
.fame-box h4 {
  font-size: 40px;
  margin-top: 15px;
  margin-inline: 10px;
}
.fame-box span {
  font-size: 60px;
}

.golden-ratio-section {
  width: 70%;
  margin-inline: auto;
  margin-top: 50px;
}
.golden-ratio-container {
  display: flex;
  margin-top: 40px;
  gap: 15px;
}
.golden-ratio-column {
  width: 66%;

  height: 350px;
  gap: 15px;
}
.golden-column-two {
  width: 33%;

  height: 700px;
  gap: 15px;
}
.golden-top-two {
  width: 100%;
  height: 68%;
  background: url('/assets/images/golden-top1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 15px;
  border: solid 2px #eee;
}
.golden-top-two.program {
  background: url('/assets/images/golden-program.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.golden-bottom-three {
  width: 100%;
  height: 30%;
  background: url('/assets/images/bottom-3.png'), #222;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 15px;
  margin-top: 15px;
  position: relative;
}
.golden-bottom-three:hover {
  opacity: 0.9;
}
@keyframes slideLeftRight {
  0% {
    transform: translateX(0); /* Start at original position */
  }
  50% {
    transform: translateX(10px); /* Move 200px to the right */
  }
  100% {
    transform: translateX(0); /* Return to original position */
  }
}
.golden-floating-arrow {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: absolute;
  right: 40px;
  top: 40px;
  animation: slideLeftRight 2s ease-in-out infinite alternate;
  animation-duration: 2s; /* How long one cycle of the animation takes */
  animation-timing-function: ease-in-out; /* Speed curve of the animation */
  animation-iteration-count: infinite; /* How many times the animation should play (infinite for endless loop) */
  animation-direction: alternate;
}
.golden-floating-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.golden-top {
  width: 100%;
  height: 340px;
  background-color: #eee;
  background: url('/assets/images/golden-top.png');
  background-size: cover;
  background-position: top right;
  border-radius: 15px;
  display: flex;
}
.golden-top.event {
  background: url('/assets/images/event-golden.png');
  background-size: cover;
  background-position: top right;
}
.golden-frosted-label {
  height: 70px;
  width: 95%;
  margin-inline: auto;
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.63);
  backdrop-filter: blur(13.149999618530273px);
  -webkit-backdrop-filter: blur(13px);
  font-size: 30px;
  border-radius: 20px;
}
.golden-row {
  height: 345px;
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
.golden-bottom-one {
  width: 55%;
  height: 100%;
  background-color: #fff;
  border-radius: 15px;
  border: solid 2px #eee;
  background: url('/assets/images/golden-bottom0.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}
.golden-bottom-two {
  width: 45%;
  height: 100%;
  background-color: #e8e8e8;
  background: url('assets/images/golden-bottom1.png'), #e8e8e8;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 15px;
}

.numbers-section {
  width: 85%;
  margin-inline: auto;
  margin-top: 100px;
}
.numbers-box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.number-box {
  background-color: #f4f4f4;
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  height: 270px;
  width: 200px;
  border-radius: 15px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.number-box h3 {
  font-size: 20px;
}
.number-box b {
  font-size: 60px;
  font-weight: 600;
}

.schedule-section {
  display: flex;
  width: 95%;
  margin-inline: auto;
  margin-top: 50px;
  gap: 20px;
}
.schedule-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  border: solid #dddddd 1px;
  padding: 30px;
}
.schedule-container h3 {
  font-size: 30px;
}
.schedule-container h4 {
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
}
.schedule-seperator {
  height: 2px;
  width: 100%;
  background-color: #ddd;
  margin-top: 30px;
}
.day-hour-row {
  display: flex;
  justify-content: space-between;
}

.service-boxes-container {
  display: flex;
  margin-top: 50px;

  width: 95%;
  margin-inline: auto;
}
.service-box {
  height: 400px;
  width: 100%;
  background-color: #f6f6f6;
  margin-left: 20px;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s linear;
}

.service-background {
  height: 360px;
  width: 100%;
}
.service-background img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 40px;
}
.service-box-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.service-header {
  font-size: 30px;
  font-weight: 700;
  padding: 10px;
}
.service-logo {
  margin-top: 10px;
  height: 50px;
  width: 50px;

  margin-left: 10px;
}
.service-logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.service-bubbles-arrow-row {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-inline: 20px;
  margin-bottom: auto;
}
.service-bubble {
  height: 40px;
  width: auto;
  padding: 10px;
  padding-inline: 15px;
  border-radius: 20px;
  border: #fff solid 3px;
  color: white;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-NE {
  height: 32px;
  width: 35px;
  background-image: url('/assets/images/arrow.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: 5px;
  margin-top: 10px;
}
.service-label-container {
  height: auto;
  border-radius: 20px;
  width: 100%;
  margin-inline: auto;
  margin-bottom: 20px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.2s linear;
  padding: 30px;
}

.blog-posts-footer-container {
  display: flex;
  margin-top: 40px;
  padding-right: 20px;
  margin-bottom: 120px;
  width: 90%;
  margin-inline: auto;
}
.blog-posts-page-container {
  display: flex;
  margin-top: 40px;
  padding-right: 20px;

  width: 90%;
  margin-inline: auto;
}
.blog-box {
  width: 100%;

  margin-left: 20px;
  border-radius: 15px;
  position: relative;
  padding-bottom: 20px;
  cursor: pointer;
  margin-top: 10px;
  overflow: hidden;
}

.blog-image-container {
  height: 300px;
  width: 100%;

  border-radius: 15px 15px 0px 0px;
  position: relative;
  overflow: hidden;
}
.blog-background {
  height: 300px;
  width: 100%;
}
.blog-background img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 15px;
}
.blog-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  padding: 20px;
  border-radius: 5px 5px 0px 0px;
  background: linear-gradient(0deg, #fff 5.25%, rgba(255, 255, 255, 0) 60%);
}
.glass-tag {
  height: 40px;
  width: auto;
  padding: 10px;
  padding-inline: 15px;
  border-radius: 8px;
  border: #ffffffa1 solid 2px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(13px);
  color: #222;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.dark-bubble {
  height: 40px;
  width: auto;
  padding: 10px;
  padding-inline: 15px;
  border-radius: 20px;
  border: #222 solid 2px;
  color: #222;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.blog-description-container {
  margin-top: 20px;
  width: 95%;
  margin-inline: auto;
}
.blog-description-container h3 {
  font-size: 29px;
  line-height: 40px;
}
.blog-description-container p {
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
  line-height: 22px;
}
.blog-tags-arrow-row {
  display: flex;
  margin-top: 30px;
}
.arrow-NE {
  height: 32px;
  width: 35px;
  background-image: url('/assets/images/arrow.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: 5px;
  margin-top: 10px;
}
.arrow-NE-dark {
  height: 32px;
  width: 35px;
  background-image: url('/assets/images/arrow-dark.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: 5px;
  margin-top: 10px;
}

.footer {
  background-color: #f5f5f5;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  margin-top: 100px;
}
.footer-logo {
  width: 180px;
  height: 48px;
  background: url('/assets/images/logo-large.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.footer-columns-row {
  display: flex;
}
.footer-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.footer-column h4 {
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.05em;
}
.footer-column a {
  font-size: 22px;
  opacity: 0.44;
  text-decoration: none;
}
.footer-column span {
  text-decoration: underline;
}
.footer b {
  margin-top: 100px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  opacity: 0.4;
}
.text-logo-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.footer-logo-small {
  width: 53px;
  height: 45px;
  background: url('/assets/images/footer-logo-small.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.study-boxes-container {
  display: flex;
  margin-top: 40px;
  padding-right: 20px;
  width: 90%;
  margin-inline: auto;
}
.study-box {
  height: 360px;
  width: 100%;
  background-color: #a3a3a3;
  margin-left: 20px;
  border-radius: 40px;
  position: relative;
  cursor: pointer;
}
.study-box:hover {
  transition: all 0.2s linear;
}
.study-box:hover .study-box-overlay {
  opacity: 1;
}
.study-box:hover .study-box-hovered-overlay {
  opacity: 0;
}
.study-background {
  height: 360px;
  width: 100%;
}
.study-background img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 40px;
}
.study-box-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: all 0.05s linear;
}
.study-box-hovered-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(13px);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  transition: all 0.2s linear;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: #222;
  font-weight: 700;
  font-size: 20px;
  opacity: 0;
  transition: all 0.3s 0.05s linear;
}
.study-bubbles-arrow-row {
  display: flex;
  margin-top: 20px;
  margin-inline: 20px;
  margin-bottom: auto;
}
.study-bubble {
  height: 40px;
  width: auto;
  padding: 10px;
  padding-inline: 15px;
  border-radius: 20px;
  border: #fff solid 3px;
  color: white;
  font-weight: 700;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(13px);
  box-shadow: #a6a6a6aa 0px 0px 10px;
  text-shadow: #a6a6a6aa 0px 0px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.study-label-container {
  height: 90px;
  border-radius: 30px;
  width: 90%;
  margin-inline: auto;
  margin-bottom: 20px;
  margin-top: auto;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.63);
  backdrop-filter: blur(13.149999618530273px);
  -webkit-backdrop-filter: blur(13px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  transition: all 0.2s linear;
  padding: 20px;
}

.horizontal-scroll-section {
  /* overflow: hidden; */
}
.spacer {
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.horizontal-scroll {
  position: relative;
  height: 100vh;
  width: 100%;
}

.scroll-track {
  display: flex;
  height: 100vh;
  width: max-content;
  position: sticky;
  top: 0;
}
.spaceholder-panel {
  width: 50px;
  height: 1px;
}
.spaceholder-timeline {
  width: 900px;
  height: 1px;
}
.panel {
  width: 700px;
  height: 100%;

  padding-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;

  margin-left: 30px;
}
.panel h3 {
  font-size: 30px;
  font-weight: 700;
  margin-inline: 20px;
  margin-top: 20px;
  letter-spacing: -0.03em;
}

.scrolling-boxes-image-container {
  height: 500px;
  width: 700px;
  background-color: #a3a3a3;
  margin-left: 20px;
  border-radius: 40px;
  position: relative;
  cursor: pointer;
}

.scrolling-boxes-image-container img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 40px;
}
.scrolling-boxes-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: all 0.05s linear;
}
.scrolling-box-bubbles-row {
  display: flex;
  margin-top: 20px;
  margin-inline: 20px;
  margin-bottom: auto;
}
.scrolling-box-bubble {
  height: 40px;
  width: auto;
  padding: 10px;
  padding-inline: 15px;
  border-radius: 20px;
  border: #fff solid 3px;
  color: white;
  font-weight: 700;
  font-size: 20px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: #22222234 0px 0px 10px;
  shadow: #22222242 0px 0px 10px;
  text-shadow: #22222242 0px 0px 10px;
}

.scrolling-box-label-container {
  height: 90px;
  border-radius: 30px;
  width: 90%;
  margin-inline: auto;
  margin-bottom: 20px;
  margin-top: auto;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.63);
  backdrop-filter: blur(13.149999618530273px);
  -webkit-backdrop-filter: blur(13px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 700;
  transition: all 0.2s linear;
  padding: 20px;
}

.image-text-section {
  width: 90%;
  margin-inline: auto;
  margin-top: 70px;
}
.image-text-section h2 {
  margin-bottom: 40px;
  margin-left: 100px;
}
.revealed-text {
  width: 90%;
}
.image-text-container {
  display: flex;
  width: 100%;

  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
.image-text-container:first-child {
  margin-top: 40px;
}

.image-container {
  width: 600px;
  height: 730px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  border-radius: 7px;
}
.image-cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 600px;
  height: 730px;
  transition: all 1.8s 1s ease-in-out;
  background-color: #fff;
  opacity: 1;
}
.image-cover.appear {
  opacity: 0;
}
.image-text-container img {
  width: 600px;
  height: 730px;
  object-fit: cover;
  border-radius: 7px;
}

.text-description {
  margin-inline: 80px;
  max-width: 500px;
}
.text-description h4 {
  font-size: 35px;
  line-height: 45px;
}

.text-description b {
  margin-top: 200px;
  font-size: 27px;
  font-weight: 800;
}
.text-description p {
  font-size: 18px;
  font-weight: 700;
  color: #a3a3a3;
}

.faq-section {
  display: flex;
  margin-inline: 30px;
  margin-top: 40px;
  width: 90%;
  margin-inline: auto;
}
.faq-image-container {
  width: 40%;
  height: 35vw;
  position: relative;
  margin-left: auto;
  margin-right: 50px;
}
.faq-image-container img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.faq-categories-container {
  position: absolute;
  top: 20px;
  right: -40px;
  display: flex;
  flex-direction: column;
}
.faq-category {
  width: 350px;
  height: auto;
  padding: 15px;
  padding-inline: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: #d9d3d34f;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(13px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28px;
  margin-top: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  transform: translateX(0px);
}
.faq-category:hover {
  transform: translateX(20px);
}
.faq-category.active-category {
  transform: translateX(20px);
}
.right-arrow {
  height: 30px;
  width: 30px;
  background: url('/assets/images/arrow-right.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.faq-questions-section {
  width: 100%;
  margin-inline: auto;
  padding-top: 40px;
  transition: all 600ms ease-in-out;
  opacity: 1;
}
.faq-questions-section.blink {
  opacity: 0;
}
.faq-question-container {
  border-bottom: solid 2px #eee;
  width: 100%;
  padding-inline: 30px;
  padding-block: 15px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  cursor: pointer;
}
.faq-q-arrow-row {
  display: flex;
  margin-block: 5px;
  width: 100%;
  justify-content: space-between;
}
.faq-question-container p {
  font-size: 22px;
  font-weight: 600;
  text-align: left;
}
.faq-question-container b {
  height: 0px;
  color: white;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  transition:
    all 300ms ease-in-out,
    color 300ms 0ms ease-in-out;
  /* text-align: left; */
}
.faq-question-container.clicked b {
  height: 100px;
  color: #222;
  transition:
    all 600ms ease-in-out,
    color 600ms 400ms ease-in-out;
}
.downwards-arrow {
  width: 20px;
  height: 20px;
  background: url('/assets/images/arrow-dark.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  rotate: 180deg;
  transition: all 600ms;
}
.faq-question-container.clicked .downwards-arrow {
  rotate: 0deg;
}

.blog-page {
  width: 90%;
  margin-inline: auto;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  margin-top: -50px;
}
.blog-header {
  width: 90%;
  margin-inline: auto;
  max-width: 1400px;
  display: flex;
  align-items: start;
  justify-content: start;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, -00%);
}
.blog-header h1 {
  position: relative;
  font-size: 80px;
  line-height: 80px;
  bottom: unset;
  left: unset;
  width: 90%;
  margin-left: 5%;
  margin-right: auto;
}
.blog-page p {
  width: 90%;
  margin-inline: auto;
  margin-top: 50px;
  font-size: 20px;
}
.blog-page h2 {
  width: 90%;
  padding-left: 5%;
  margin-right: auto;
  margin-top: 50px;
  font-size: 40px;
  margin-bottom: -25px;
}
.blog-page img {
  width: 95%;
  margin-inline: auto;
  height: auto;
  margin-top: 50px;
}

.maps-section {
  width: 80%;
  margin-inline: auto;
  margin-top: 60px;
  margin-bottom: 100px;
}
.map-frame {
  width: 100%;
  height: 500px;
  margin-top: 50px;
}
.popup-section {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  height: 100%;
  width: 100%;
  background-color: #ffffffaa;
  backdrop-filter: blur(13px);
  transition: all 0.3s 0.3s ease-in-out;
  opacity: 0;
  display: none;
}
.popup-section.active-popup {
  transition: all 0.6s ease-in-out;
  opacity: 1;
}
.popup-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px;
  opacity: 1;
}

.popup-title-x-row {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
  opacity: 0;
  transition: all 0.3s 0s ease-in-out;
}
.popup-title-x-row.active-popup {
  opacity: 1;
  transition: all 0.6s 0.6s ease-in-out;
}
#popup-title {
  width: 90%;
}

.popup-title-x-row b {
  cursor: pointer;
  font-size: 50px;
}
.popup-images-description {
  display: flex;
  align-items: center;
  margin-top: 50px;
}

.popup-images {
  height: 70vh;

  width: 0%;
  flex: none;
  margin-right: 0px;
  opacity: 0;
  transition: all 0.3s 0s ease-in-out;
}
.popup-images img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.popup-images.active-popup {
  opacity: 1;
  transition: all 0.6s 0.6s ease-in-out;
}
.popup-description {
  opacity: 0;
  width: 48%;
  transition: all 0.3s 0s ease-in-out;
}
.popup-description.active-popup {
  opacity: 1;
  transition: all 0.6s 0.6s ease-in-out;
}
.popup-description p {
  font-size: 25px;
}

.policy-page {
  width: 90%;
  margin-top: 50px;
  margin-inline: auto;
}
.policy-page h1 {
  font-size: 50px;
}
.policy-page h2 {
  font-size: 30px;
  margin-top: 20px;
}
.policy-page h3 {
  font-size: 25px;
  margin-top: 10px;
}
.policy-page h4 {
  margin-top: 10px;
}
.policy-page ul {
  margin-top: 10px;
}
/* mobile */
@media (max-width: 480px) {
  .langBtn {
    display: block !important;
  }
  /* .cursor,
.follower {
    display: none;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; 
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor {
    display: none;
  width: 33px;
  height: 33px;
  background: url('assets/images/cursor.png') no-repeat center center;
  background-size: contain;
}

.follower {
  width: 36.5px;
  height: 32px;
  background: url('assets/images/follower.png') no-repeat center center;
  background-size: contain;
  transition: transform 0.15s ease-out;
} */
  h1 {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 40px;
    line-height: 55px;
  }

  h2 {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 30px;
    line-height: 28px;
  }
  h3 {
    letter-spacing: -0.05em;
  }

  .navigation-bar-mobile {
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    width: 100%;
    height: 100vh;
    z-index: 8000;
    background-color: #ffffff83;
    backdrop-filter: blur(13.1px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    opacity: 1;
    transition: all 0.3s 0s ease-in-out;
  }
  .navigation-bar-mobile .bolt-logo {
    margin-right: 10px;
    margin-left: -10px;
    margin-top: 40px;
    margin-bottom: 20px;
    height: 30px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navigation-bar-mobile.hide-bar {
    display: none;
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .navigation-bar-mobile a {
    font-size: 25px;
    margin-top: 20px;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .navigation-bar-mobile a:nth-child(1) {
    transition-delay: 0s;
  }

  .navigation-bar-mobile a:nth-child(2) {
    transition-delay: 0.1s;
  }

  .navigation-bar-mobile a:nth-child(3) {
    transition-delay: 0.2s;
  }
  .navigation-bar-mobile a:nth-child(4) {
    transition-delay: 0.3s;
  }
  .navigation-bar-mobile a:nth-child(5) {
    transition-delay: 0.4s;
  }
  .navigation-bar-mobile a:nth-child(6) {
    transition-delay: 0.5s;
  }
  .navigation-bar-mobile a:nth-child(7) {
    transition-delay: 0.6s;
  }
  .navigation-bar-mobile a:nth-child(8) {
    transition-delay: 0.7s;
  }
  .navigation-bar-mobile a:nth-child(9) {
    transition-delay: 0.8s;
  }
  .navigation-bar-mobile a:nth-child(10) {
    transition-delay: 0.9s;
  }
  .navigation-bar-mobile.hide-bar a {
    opacity: 0;

    transition: all 0.3s 0s ease-in-out;
  }
  .navigation-bar {
    /* height: 50px; */
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
  }
  .navigation-bar.opaque {
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
  }
  .navigation-buttons-holder {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navigation-buttons-holder a {
    display: none;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: #222;
    text-shadow: #ffffff95 0px 0px 30px;
  }
  .bolt-logo {
    height: 25px;
    width: auto;
    margin-left: 10px;
    margin-right: auto;
    flex: none;
  }
  .bolt-logo img {
    height: 100%;
    width: 210px;
  }

  .bolt-cameleon {
    display: block;
    height: 25px;
    width: 23px;
    margin-right: 25px;
    margin-left: auto;
    flex: none;
    background: url('assets/images/burger.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
  }
  .bolt-cameleon img {
    height: 100%;
    width: 1px;
    opacity: 0;
    filter: grayscale(100%);
  }

  .service-header {
    font-size: 25px;
    font-weight: 700;
    padding: 10px;
  }

  .intro-section {
    width: 100%;
    height: 100vh;
    margin-top: -90px;
    position: relative;
    overflow-x: hidden;
  }

  .intro-section img {
    width: unset;
    height: 100%;
    margin-left: -210%;
  }
  [dir='rtl'] .intro-section img {
    width: unset;
    height: 100%;
    margin-right: -80%;
  }
  .intro-section img.prog-intro {
    margin-left: -150%;
  }

  .intro-section img.team-intro {
    margin-left: -150%;
  }
  .intro-section img.event-intro {
    margin-left: -200%;
  }
  .intro-section h1 {
    position: absolute;
    bottom: 50px;
    left: 20px;
    font-size: 50px;
    line-height: 45px;
  }
  .intro-section h1.contact-header {
    left: 5%;
  }

  .side-text {
    font-size: 14px;
    width: 95%;
    line-height: 18px;
  }
  .heading-side-text-row-column {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-inline: auto;
    align-items: start;
    justify-content: space-between;

    margin-top: 50px;
  }

  .reverse-image-text-section {
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: hidden;
    margin-top: 0px;
  }
  .reverse-container {
    height: unset;
    width: 100%;

    position: relative;
  }
  .reverse-image-scroller {
    height: 100vh;
    width: 0%;

    overflow-y: scroll;
    display: none;
    flex-direction: column-reverse;
    scrollbar-width: none; /* Hides the scrollbar */
  }
  .reverse-image-scroller::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }

  .reverse-image-gradient {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(
      to bottom,
      white 0%,
      /* White at the very top */ rgba(255, 255, 255, 0) 15%,
      /* White up to 10% */ transparent 10%,
      /* Transparent from 10% */ transparent 90%,
      /* Transparent up to 90% */ rgba(255, 255, 255, 0) 85%,
      /* White from 90% */ white 100% /* White at the very bottom */
    );
  }
  .reverse-image-text-section h2 {
    width: 100%;
    margin-left: 0px;
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 33px;
    font-weight: 700;
  }
  .revealed-text {
    width: 90%;
  }
  .revealed-text {
    width: 90%;
  }
  .revealed-text b {
    width: 100%;
  }
  .reverse-image-scroller img {
    width: 0%;
  }

  .doctor-timeline-section {
    width: 85%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    margin-top: 80px;
  }
  .header-left-container {
    width: 100%;
    margin-top: 30px;
    padding-right: 30px;
  }
  .timeline-right-container {
    width: 100%;
    margin-top: 50px;
    border-left: solid #99c2ff 1px;
  }

  .timeline-box {
    margin-bottom: 50px;
    padding-inline: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .timeline-box b {
    color: #1875ff;
    margin-bottom: 10px;
  }
  .timeline-box h3 {
    margin-bottom: 10px;
  }
  .timeline-box:last-of-type {
    margin-bottom: 10px;
  }
  .timeline-blip {
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: #1875ff;
    position: absolute;
    left: -5px;
    top: 5px;
  }

  .testimonial-brackets-section {
    width: 95%;
    margin-inline: auto;

    margin-top: 10px;
  }
  .testimonial-brackets-section.color-bg {
    background: url('/assets/images/color-bg-vert.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .testimonial-bracket-container {
    display: flex;
    margin-top: 50px;
  }
  .up-bracket {
    width: 20px;
    height: 200px;
    background: url('/assets/images/bracket-up.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    flex: none;
  }
  #up-fade {
    background: url('/assets/images/bracket-up-fade.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .testimonial-brackets-section p {
    font-size: 12px;

    margin-inline: 10px;
    opacity: 1;
    transition: all 0.3s;
  }
  .testimonial-brackets-section p.hide {
    opacity: 0;
  }
  .down-bracket {
    width: 20px;
    height: 200px;
    background: url('/assets/images/bracket-down.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    flex: none;
  }
  #down-fade {
    background: url('/assets/images/bracket-down-fade.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .grid-container {
    margin-top: 20px;
    display: grid;
    /* 5 equal columns */
    grid-template-columns: repeat(2, 1fr);
    /* 2 equal rows */
    grid-template-rows: repeat(5, 1fr);

    /* This creates the lines between cells */
    gap: 2px; /* 2px stroke */
    background-color: #e8e8e8; /* Gray color for the lines */
    border: 2px solid #e8e8e8; /* Add border around the whole grid */

    width: 90%; /* Adjust as needed */
    margin-inline: auto;
  }

  .grid-item {
    background-color: #ffffff; /* White background for the cells */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 1.2em;
    color: #333;
    box-sizing: border-box; /* Include padding in element's total width/height */
    aspect-ratio: 1;
    transition: all 0.3s;
  }
  .grid-item:hover {
    /* background-color: #f1f1f1; */
  }
  .grid-logo {
    width: 80%;
    height: 80%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grid-logo img {
    width: 100%;
    height: auto;
  }

  .team-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 20px;
  }
  .team-box-row {
    display: flex;
    width: 100%;
    margin-top: 20px;
    flex-direction: column;
  }
  .team-box {
    width: 100%;
    background: url('/assets/images/team1.png');
    background-size: cover;

    background-position: center 10%;
    background-repeat: no-repeat;
    height: 100px;

    flex: auto;
    margin-right: 0px;
    margin-top: 7px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.4s 0s linear;
  }
  .team-box.active {
    width: 100%;
    height: 90vw;
    aspect-ratio: 1;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.4s 0s linear;
  }
  .flipped-name {
    position: absolute;
    bottom: 10px;
    right: 10px;
    rotate: 0deg;
    font-size: 22px;
    color: white;
    font-weight: 700;
  }
  .team-box.active .flipped-name {
    opacity: 0;
  }

  .frosted-container {
    position: absolute;
    right: 15px;
    bottom: 15px;
    border-radius: 7px;
    padding: 15px;
    width: 80%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    opacity: 1;
    transition: all 0.5s 0.6s;
  }
  .frosted-container.inactive {
    opacity: 0;
    transition: all 0.2s 0s;
  }
  .team-box-description {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .frosted-container h3 {
    font-size: 18px;
    font-weight: 700;
  }
  .frosted-container b {
    font-size: 12px;
    font-weight: 700;
    line-height: 0.9;
  }
  .frosted-container p {
    font-size: 10px;
    font-weight: 600;
    margin-top: 10px;
  }
  .frosted-container h4 {
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
  }
  .accreditation-container {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
  }
  .acrid-bubble {
    width: 20px;

    margin-bottom: 5px;
    padding-block: 5px;
    font-size: 13px;
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
  }
  .linkedin-logo {
    margin-top: 15px;
    height: 20px;
    width: 20px;
    background: url('/assets/images/linkedin.png');
    background-size: contain;
    opacity: 0.8;
  }

  .scattered-perks-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
    height: 900px;
  }
  .scattered-perks-section h2 {
    font-size: 80px;
    font-weight: 800;
  }
  .scattered-perks-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 0px; /* Padding inside the container */
    flex: none;
  }

  .perk-grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 0px;
    border-radius: 5px;
    flex: none;
  }
  .perk-image-box {
    background: #ffffffdd;

    border-radius: 15px;
    padding: 20px;
    height: 80px;
    width: 80px;
    flex: none;
    border: 2px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;

    animation: float 10s ease-in-out infinite;
  }
  .perk-image-box img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.6;
  }

  .scattered-boxes-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
    height: 800px;
  }

  .scattered-boxes-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0px;
    column-gap: 30px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 10px; /* Padding inside the container */
  }

  .perk-grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 0px;
    border-radius: 5px;
  }

  .scattered-boxes-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
    height: 1000px;
  }
  .scattered-boxes-section h2 {
    font-size: 70px;
    font-weight: 800;
  }
  .scattered-boxes-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0px;
    column-gap: 30px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 10px; /* Padding inside the container */
  }

  .grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 0px;
    border-radius: 5px;
  }
  .perk-box {
    background: #f6f6f6;
    border-radius: 15px;
    padding: 10px;
    min-height: 160px;
    padding-block: 10px;
    width: 130px;
    border: 2px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.3s 0.7s;
  }

  #type2 {
    background: #ffffff38;
    border: 2px solid rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  #type2:first-child {
    background: #fff;
    background: #ffffff38;
  }
  #type3 {
    border: 2px solid rgba(222, 222, 222, 0.3);
    background-color: rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .perk-box b {
    font-size: 14px;
  }
  .perk-box p {
    margin-top: 5px;
    font-size: 11px;
  }

  .points-and-images-section {
    width: 95%;
    margin-inline: auto;
    margin-block: 50px;
    margin-top: 70px;
    margin-bottom: 50px;
  }
  .points-column {
    width: 100%;
  }
  .points-and-images-row {
    position: relative;
    display: flex;
    margin-top: 50px;
  }
  .point-container {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: solid 5px #ececec;
    padding-inline: 10px;
    font-size: 30px;
    width: 100%;
    border-radius: 0px 12px 12px 0px;
  }
  .point-container h3 {
    font-weight: 600;
    font-size: 20px;
  }
  .point-container p {
    display: none;
    font-size: 14px;
    margin-top: 5px;
  }
  .point-container.active-point {
    height: 180px;
    border-left: solid 5px #222;

    background: #e5e5e574;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .point-container.active-point p {
    display: block;
  }
  .point-image-container {
    display: none;
    width: 50%;
    height: 120%;
    position: absolute;
    right: 0;
    top: -20px;
    z-index: -1;
  }

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

  .image-collection-section {
    width: 95%;
    margin-top: 50px;
    margin-inline: auto;
  }
  .image-collection-section img {
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .network-section {
    width: 85%;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-inline: auto;
  }

  .network-section img {
    width: 100%;
    height: auto;
    opacity: 1;
  }

  .network-images {
    display: none;
  }

  .floating-text {
    display: none;
  }

  .stagered-boxes {
    width: 95%;
    margin-top: 10px;
    margin-inline: auto;
  }

  .stagered-container {
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    margin-top: 40px;
    gap: 5px;
  }
  .stagered-column {
    width: 100%;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .stagered-boxes img {
    width: 100%;
    height: auto;
    border-radius: 5px;
  }
  .large-stagered {
    width: 100%;
    border-radius: 20px;
    opacity: 0;
  }
  .small-stagered {
    width: 100%;
    border-radius: 20px;
    opacity: 0;
  }
  .large-stagered.appear {
    opacity: 1;
  }
  .small-stagered.appear {
    opacity: 1;
  }

  #small0 {
    transition: all 0.8s 0.5s ease-out;
  }
  #small1 {
    transition: all 0.8s 0.8s ease-out;
  }
  #big0 {
    transition: all 0.8s 0s ease-out;
  }
  #big1 {
    transition: all 0.8s 0.3s ease-out;
  }

  .horizontal-timeline-section-new {
    width: 100%;
    margin-top: 30px;
    position: relative;
    height: 100vh;
  }
  .horizontal-timeline-container-new {
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
  }

  .horizontal-timeline-section {
    width: 100%;
    margin-top: 20px;
    position: relative;
    height: 90vh;
  }
  .gradient-left {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, white, transparent);
  }
  .gradient-right {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 0px;
    height: 100%;
    background: linear-gradient(to left, white, transparent);
  }
  .timeline-header {
    margin-left: 20px;
    margin-top: 50px;
  }
  .horizontal-timeline-container {
    height: 100%;
    display: flex;
    overflow-x: scroll;
    position: relative;
    scrollbar-width: none;
    flex: none;
    transition: transform 0.1s ease;
    width: max-content;
  }
  .horizontal-timeline-container::-webkit-scrollbar {
    display: hidden;
  }
  .timeline-line {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;

    height: 7px;
    transform: translateY(-50%);
  }
  .timeline-image-text-pair {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 100px;
  }
  .timeline-text-container {
    height: 220px;
    width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-block: 30px;
    flex: none;
  }
  .timeline-dot {
    width: 30px;
    height: 30px;
    border-radius: 15px;

    flex: none;
  }
  .timeline-text-container.under {
    justify-content: start;
  }
  .timeline-image-text-pair:first-child {
    margin-left: 5vw;
  }
  .timeline-image-text-pair h3 {
    width: 90%;
    font-size: 20px;
  }
  .timeline-image-text-pair p {
    width: 90%;
    font-size: 14px;
  }
  .timeline-image-container {
    height: 220px;
    width: 280px;
    margin-block: 30px;
  }
  .timeline-image-container img {
    height: 100%;
    width: 100%;
  }

  .right-text-and-images-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
  }
  .right-text-and-images-section h3 {
    width: 90%;
    font-size: 22px;
    margin-inline: auto;
  }
  .right-text-and-images-section p {
    font-size: 15px;
    width: 90%;
    margin-inline: auto;
    margin-top: 10px;
  }
  .right-text-and-images-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    gap: 5px;
  }
  .right-text-and-image {
    flex: none;
    height: 50vw;
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
  }

  .right-text-and-image img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .right-only-images-section {
    width: 100%;

    margin-top: 50px;
    overflow: hidden;
  }
  .right-only-images-section h2 {
    margin-left: 30px;
  }
  .right-only-images-container {
    width: 100%;
    align-items: center;
    justify-content: start;
    display: flex;
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .right-only-images-container::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .right-only-images {
    flex: none;
    height: 45vw;
    width: 45%;
    background-color: #eee;
    border-radius: 10px;
  }
  .right-only-image-overlay {
    padding: 7px;
  }
  .right-bubble {
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 2px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
    font-size: 12px;
  }
  .right-frosted-label {
    width: 100%;
    height: 60px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    color: #222;
    font-size: 13px;
    font-weight: 700;
    padding: 10px;
    padding-block: 15px;
  }
  .right-only-images:nth-child(1) {
    margin-left: 30px;
  }
  .right-only-images img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }

  .team-information-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    gap: 100px;
  }
  .team-information-text-column {
    width: 100%;
    opacity: 1;
    transition: 0.3s ease-in-out;
  }
  .team-information-text-column.disappear {
    width: 100%;
    opacity: 0;
  }
  .team-information-section h2 {
    font-size: 27px;
    font-weight: 800;
  }
  .team-information-section b {
    font-size: 15px;
    font-weight: 800;
  }
  .team-information-section p {
    font-size: 15px;
    font-weight: 700;
    margin-top: 25px;
  }
  .team-information-section h3 {
    font-size: 18px;
    font-weight: 800;
    margin-top: 20px;
  }
  .skills-bubbles-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
  }
  .skill-bubble {
    height: 30px;
    padding-inline: 10px;
    border-radius: 20px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 7px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .team-member-image {
    width: 80%;
    height: auto;
    margin-top: 20px;
    display: none;
  }
  .team-member-image img {
    height: auto;
    width: 100%;
    border-radius: 20px;
  }

  .career-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .career-section h2 {
    margin-left: 0px;
    margin-bottom: 30px;
  }
  .career-option {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 5px;
    padding-block: 30px;
    border-bottom: solid 2px #dcdcdc;
  }
  .career-option:last-child {
    border-bottom: none;
  }
  .career-description-container {
    width: 100%;
    margin-right: auto;
  }
  .career-description-container h3 {
    font-size: 22px;
  }
  .career-description-container p {
    font-size: 15px;
    margin-top: 10px;
  }
  .career-option b {
    font-size: 20px;
    margin-top: 5px;
    margin-right: auto;
  }
  .apply-row {
    margin-top: 30px;
  }

  .contact-form-section {
    width: 90%;
    position: relative;
    margin-inline: auto;
    border-radius: 10px;
  }
  .contact-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: unset;
    scrollbar-width: none;
    position: relative;
  }
  .contact-form-container::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }
  .contact-form-line {
    height: 450px;
    width: 8px;
    background: linear-gradient(
      to bottom,
      #22222200 0%,
      /* Transparent at the very top */ #222 10%,
      /* Transparent up to 10% */ #222 10%,
      /* Black from 10% */ #222 90%,
      /* Black up to 90% */ #222 90%,
      /* Transparent from 90% */ #22222200 100%
        /* Transparent at the very bottom */
    );
    position: absolute;
    top: 30px;
    left: 20px;
  }

  .contact-form-question-container {
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    margin-top: 10px;
  }
  .contact-point {
    width: 22px;
    height: 22px;
    border-radius: 11px;

    flex: none;
    margin-top: 7px;
  }
  .contact-question {
    margin-left: 15px;
    width: 100%;
  }
  .contact-form-question-container h3 {
    font-size: 18px;
  }

  .question-bubbles-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
  }
  .question-bubble {
    height: 36px;
    padding-inline: 15px;
    border-radius: 18px;
    border: solid 2px #222;
    flex: none;
    font-size: 14px;
    font-weight: 700;
    margin-right: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.5s ease-in-out;
  }
  .question-bubble.selected {
    color: white;
  }
  .next-button {
    height: 40px;
    padding-inline: 20px;
    border-radius: 20px;

    color: white;
    width: min-content;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-top: 20px;
  }

  .input-group {
    position: relative;
    width: 100%; /* Adjust width as needed */
    margin-bottom: 25px; /* Space for the floating label */
  }
  .input-field {
    width: 100%;
    padding: 10px 0; /* Vertical padding */
    border: none; /* Remove all borders */
    border-bottom: 2px solid #222; /* Only the bottom line */
    background-color: transparent; /* No background */
    font-size: 1rem;
    color: #222;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    margin-top: 10px;
  }

  /* Change bottom line color on focus */
  .input-field:focus {
    border-bottom-color: #222; /* Blue bottom line on focus */
  }

  /* Hide placeholder on focus for better floating label experience */
  .input-field:focus::placeholder {
    color: transparent;
  }

  /* The Label for Floating Effect */
  .input-label {
    position: absolute;
    left: 0;
    top: 20px; /* Aligns with input text */
    color: #222;
    font-size: 18px;
    pointer-events: none; /* Allows clicks to pass through to the input */
    transition:
      top 0.3s ease,
      font-size 0.3s ease,
      color 0.3s ease; /* Smooth transition */
  }

  .input-field:focus + .input-label,
  .input-field:not(:placeholder-shown) + .input-label {
    top: 0px; /* Move label up */
    font-size: 0.8rem; /* Make label smaller */
    color: #222; /* Change label color */
  }

  /* Prevent autocomplete background from interfering with transparency */
  .input-field:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
    -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
    transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
  }

  .venues-section {
    width: 95%;
    margin-inline: auto;

    position: relative;
  }
  .venue-image {
    width: 100%;
    height: 600px;
    background: url('/assets/images/color-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    opacity: 1;
    transition: all 600ms ease-in-out;
  }
  .venue-image.fade-out {
    opacity: 0;
  }

  .venue-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }
  .venues-container {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 600px;
    padding-block: 20px;
    border-radius: 20px;
    background-color: #ffffff40;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .venue-description {
    width: 90%;

    display: flex;
    flex-direction: column;
    margin-block: 20px;
    margin-inline: auto;
  }
  .venues-container h3 {
    font-size: 40px;
    line-height: 40px;
  }
  .venues-container p {
    font-size: 16px;
    margin-top: 15px;
  }
  .venue-bubbles {
    display: flex;
    margin-top: auto;
    display: none;
  }
  .venue-bubble {
    height: 45px;
    border: solid 2.5px #222;
    border-radius: 22.5px;
    padding-inline: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
  }
  .moving-boxes-container {
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: scroll;

    width: 100%;
    max-width: 800px; /* Limit overall width */
    scrollbar-width: none;
  }
  .moving-boxes-container::-webkit-scrollbar {
    display: none;
  }
  .venue-box-row {
    display: flex;
    flex-direction: column;
    height: 350px;
    width: 100%;
    margin-top: 12px;
    margin-left: 0px;
  }
  .box-spacer {
    width: 1px;
    height: 12px;
    flex: none;
  }
  .vanue-item {
    width: 200px;
    height: 160px;
    background-color: #ffffff6f;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin-top: 15px;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .vanue-item.active-venue p {
    opacity: 1;
  }
  .vanue-item.active-venue b {
    opacity: 1;
  }
  .vanue-item b {
    font-weight: 700px;
    letter-spacing: -0.05em;
    font-size: 16px;
    opacity: 0.1;
    transition: all 600ms ease-in-out;
  }
  .vanue-item p {
    font-weight: 700px;
    letter-spacing: -0.03em;
    font-size: 12px;
    margin-top: 10px;
    opacity: 0.1;
    transition: all 600ms ease-in-out;
  }
  .vanue-item.active-venue .bubble-dark {
    opacity: 1;
  }
  .bubble-dark {
    border: 2px solid #222;
    width: fit-content;
    padding: 15px;
    padding-block: 5px;
    border-radius: 20px;
    margin-top: auto;
    opacity: 0.1;
    transition: all 600ms ease-in-out;
    display: none;
  }

  .vanue-item.right-vanue {
    margin-top: 0px;
    margin-left: 14px;
  }

  .timeline-section-section {
    height: 500px;
    margin-top: 50px;
    background: #222;
  }
  .timeline-line-moving {
    height: 500px;
    width: 45vw;
    background-color: #ffffffaa;
    border-right: 2px #222 solid;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    display: block;
  }
  .timeline-section {
    width: 100%;
    height: 500px;
    overflow-x: scroll;

    margin-inline: auto;

    background-color: #fff;
    position: relative;

    scrollbar-width: none; /* Hides the scrollbar */
  }
  .timeline-section::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }
  .timeline-container {
    height: 500px;
    width: auto;
    min-height: 40px;

    position: relative;
  }
  .timeline-cover {
    display: none;
  }
  .timeline-p {
    width: 100%;
    height: 100%;
    position: absolute;
    display: hidden;
  }
  .timeline-floating-box {
    position: absolute;
    padding-inline: 10px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff63;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(3px);
    font-size: 15px;
    border-radius: 5px;
    width: max-content;
  }
  .timeline-container b {
    margin-inline: 10px;
    flex: none;
  }
  .timeline-container p {
  }
  #float0 {
    left: 15%;
    top: 35%;
  }
  #float1 {
    left: 40%;
    top: 45%;
  }
  #float2 {
    left: 55%;
    top: 55%;
  }
  #float3 {
    left: 80%;
    top: 35%;
  }
  #float4 {
    left: 100%;
    top: 45%;
  }
  .timeline-container img {
    width: auto;
    height: 500px;
  }
  .timeline-section p {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 700;
    width: 90%;
    z-index: 99;
    display: none;
  }

  .hall-of-fame-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .fame-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }
  .fame-line {
    width: 90%;
    height: 1px;
    background-color: #e1e1e1;
    margin-inline: 5px;
    margin-block: 10px;
    flex: none;
  }
  .fame-box {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .fame-description {
    width: 50%;
    margin-left: 10px;
  }
  .fame-image {
    width: 40%;
    height: auto;
  }

  .fame-image img {
    width: 100%;
    height: auto;
  }
  .fame-box h3 {
    font-size: 18px;
    margin-top: 15px;
    margin-inline: 10px;
  }
  .fame-box p {
    font-size: 16px;
    margin-top: -5px;
    margin-inline: 10px;
  }
  .fame-box h4 {
    font-size: 23px;
    margin-top: 15px;
    margin-inline: 10px;
  }
  .fame-box span {
    font-size: 30px;
  }

  .golden-ratio-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .golden-ratio-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 10px;
  }
  .golden-ratio-column {
    width: 100%;

    height: auto;
    gap: 10px;
  }
  .golden-column-two {
    width: 100%;
    display: flex;

    height: auto;
    gap: 10px;
  }
  .golden-top-two {
    width: 100%;
    height: 200px;
    background: url('/assets/images/golden-top1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    border: solid 2px #eee;
  }
  .golden-bottom-three {
    width: 100%;
    height: 200px;
    background: url('/assets/images/bottom-3.png'), #222;
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 0px;
  }
  .golden-top {
    width: 100%;
    height: 200px;
    background-color: #eee;
    background: url('/assets/images/golden-top.png');
    background-size: cover;
    background-position: top right;
    border-radius: 15px;
    display: flex;
  }
  .golden-frosted-label {
    height: 45px;
    width: 95%;
    margin-inline: auto;
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    font-size: 20px;
    border-radius: 10px;
  }
  .golden-row {
    height: 170px;
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }
  .golden-bottom-one {
    width: 50%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    border: solid 2px #eee;
    background: url('/assets/images/golden-bottom0.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
  }
  .golden-bottom-two {
    width: 50%;
    height: 100%;
    background-color: #e8e8e8;
    background: url('assets/images/golden-bottom1.png'), #e8e8e8;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
  }

  .numbers-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .numbers-box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  .number-box {
    background-color: #f4f4f4;
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 170px;
    width: 130px;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .number-box h3 {
    font-size: 15px;
  }
  .number-box b {
    font-size: 40px;
    font-weight: 600;
  }

  .number-stack {
    display: flex;
  }

  .stats-section {
    width: 95%;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    margin-inline: auto;
  }
  .stat-box {
    width: 70%;
    margin-inline: unset;
    margin-block: 50px;
    margin-inline: 20px;
  }
  .stat-box h3 {
    font-size: 40px;
    /* font-size: 70px; */
  }
  .stat-seperator {
    width: 70%;
    height: 2px;
    margin-inline: 30px;
    background-color: #d1d1d1;
  }

  .schedule-section {
    display: flex;
    flex-direction: column;
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
    gap: 20px;
  }
  .schedule-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    border: solid #dddddd 1px;
    padding: 30px;
  }
  .schedule-container h3 {
    font-size: 30px;
  }
  .schedule-container h4 {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
  }
  .schedule-seperator {
    height: 2px;
    width: 100%;
    background-color: #ddd;
    margin-top: 30px;
  }
  .day-hour-row {
    display: flex;
    justify-content: space-between;
  }

  .service-boxes-container {
    display: flex;
    margin-top: 50px;
    flex-direction: column;
    width: 95%;
    margin-inline: auto;
  }
  .service-box {
    height: 320px;
    width: 100%;
    background-color: #f3f3f3;
    margin-left: 0px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s linear;
    margin-bottom: 15px;
  }
  .service-box:hover {
    width: 150%;

    transition: all 0.3s linear;
  }
  .service-box:hover .service-label-container {
    width: 50%;
    margin-left: 0px;
    margin-right: auto;
    padding-inline: 30px;
    transition: all 0.3s linear;
  }
  .service-background {
    height: 260px;
    width: 100%;
  }
  .service-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 40px;
  }
  .service-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .service-bubbles-arrow-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .service-bubble {
    height: 32px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;

    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .arrow-NE {
    height: 24px;
    width: 24px;
    background-image: url('/assets/images/arrow.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }
  .service-label-container {
    border-radius: 20px;
    width: 100%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.2s linear;
  }

  .blog-posts-footer-container {
    display: flex;
    margin-top: 20px;
    padding-right: 0px;
    margin-bottom: 30px;
    width: 95%;
    margin-inline: auto;
    flex-direction: column;
  }
  .blog-posts-page-container {
    display: flex;
    margin-top: 20px;
    padding-right: 0px;
    margin-bottom: 30px;
    width: 95%;
    margin-inline: auto;
    flex-direction: column;
    margin-bottom: 0px;
  }
  .blog-box {
    width: 100%;

    margin-left: 0px;
    border-radius: 15px;
    position: relative;
    padding-bottom: 20px;
    cursor: pointer;
  }
  .blog-box:hover {
    background-color: #efefef;
  }
  .blog-box:hover .blog-image-overlay {
    background: linear-gradient(
      0deg,
      #efefef 5.25%,
      rgba(224, 224, 224, 0) 100%
    );
  }
  .blog-image-container {
    height: 180px;
    width: 100%;
    overflow: hidden;

    border-radius: 15px 15px 0px 0px;
    position: relative;
  }
  .blog-background {
    height: 180px;
    width: 100%;
  }
  .blog-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 15px;
  }
  .blog-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    padding: 20px;
    border-radius: 5px 5px 0px 0px;
    background: linear-gradient(0deg, #fff 5.25%, rgba(255, 255, 255, 0) 60%);
  }
  .glass-tag {
    height: 35px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 8px;
    border: #ffffffa1 solid 2px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(13px);
    color: #222;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px;
  }

  .dark-bubble {
    height: 35px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 20px;
    border: #222 solid 1.5px;
    color: #222;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 10px;
  }
  .blog-description-container {
    margin-top: 20px;
    width: 95%;
    margin-inline: auto;
  }
  .blog-description-container h3 {
    font-size: 20px;
    line-height: 22px;
  }
  .blog-description-container p {
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 14px;
  }
  .blog-tags-arrow-row {
    display: flex;
    margin-top: 30px;
  }
  .arrow-NE {
    height: 20px;
    width: 20px;
    background-image: url('/assets/images/arrow.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }
  .arrow-NE-dark {
    height: 24px;
    width: 24px;
    background-image: url('/assets/images/arrow-dark.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }

  .footer {
    background-color: #f5f5f5;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  .footer-logo {
    width: 120px;
    height: 48px;
    background: url('/assets/images/logo-large.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .footer-columns-row {
    display: flex;
    flex-direction: column;
  }
  .footer-column {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .footer-column h4 {
    margin-top: 20;
    margin-bottom: 10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.05em;
  }
  .footer-column a {
    font-size: 16px;
    opacity: 0.44;
    text-decoration: none;
  }
  .footer-column span {
    text-decoration: underline;
  }
  .footer b {
    margin-top: 100px;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    opacity: 0.4;
  }
  .text-logo-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }

  .footer-logo-small {
    width: 30px;
    height: 40px;
    background: url('/assets/images/footer-logo-small.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .treated-section {
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 10px;
  }

  .top-three-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .bottom-two-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .box-vertical {
    height: 400px;
    width: 100%;
    border: #e7e7e7 2px solid;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .box-vertical h3 {
    font-size: 25px;
  }
  .box-vertical p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .treatment-image {
    margin-top: auto;
    width: 100%;
    height: 250px;
  }
  .box-horizontal {
    height: 350px;
    width: 100%;
    border: #e7e7e7 3px solid;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .box-horizontal h3 {
    font-size: 25px;
  }
  .box-horizontal p {
    font-size: 15px;
    font-weight: 600;
  }
  .box-horizontal .treatment-image {
    margin-top: auto;
    width: 100%;
    height: 150px;
  }

  .service-header {
    font-size: 25px;
    font-weight: 700;
    padding: 10px;
  }

  .study-boxes-container {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    padding-right: 0px;
    width: 90%;
    margin-inline: auto;
  }
  .study-box {
    height: 220px;
    width: 100%;
    background-color: #a3a3a3;
    margin-left: 0px;
    margin-bottom: 15px;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
  }
  .study-box:hover {
    transition: all 0.2s linear;
  }
  .study-box:hover .study-box-overlay {
    opacity: 1;
  }
  .study-box:hover .study-box-hovered-overlay {
    opacity: 0;
  }
  .study-background {
    height: 220px;
    width: 100%;
  }
  .study-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 20px;
  }
  .study-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
    border-radius: 20px;
  }
  .study-box-hovered-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.6);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(13px);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    transition: all 0.2s linear;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #222;
    font-weight: 700;
    font-size: 20px;
    opacity: 0;
    transition: all 0.3s 0.05s linear;
    border-radius: 20px;
  }
  .study-bubbles-arrow-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .study-bubble {
    height: 32px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;
    font-size: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .study-label-container {
    height: 60px;
    border-radius: 20px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
  }

  .spacer {
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .horizontal-scroll {
    position: relative;
    height: 100vh;
    width: 100%;
    /* overflow-x: hidden; */
  }

  .scroll-track {
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
  }
  .spaceholder-timeline {
    width: 100px;
    height: 1px;
  }

  .panel {
    width: 320px;

    padding-top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 10px;
  }
  .panel h3 {
    font-size: 20px;
    font-weight: 700;
    margin-inline: 20px;
    margin-top: 20px;
    letter-spacing: -0.03em;
  }

  .scrolling-boxes-image-container {
    height: 300px;
    width: 320px;
    background-color: #a3a3a3;
    margin-left: 20px;
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    margin-top: -50px;
  }

  .scrolling-boxes-image-container img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 25px;
  }
  .scrolling-boxes-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
  }
  .scrolling-box-bubbles-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .scrolling-box-bubble {
    height: 33px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;
    font-size: 13px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scrolling-box-label-container {
    height: 60px;
    border-radius: 15px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
  }

  .image-text-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 70px;
  }
  .image-text-section h2 {
    margin-bottom: 30px;
    width: 90%;
    margin-inline: auto;
  }

  .image-text-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 30px;
  }
  .image-text-container.reverse-column {
    flex-direction: column-reverse;
    margin-top: 60px;
  }
  .image-text-container:first-child {
    margin-top: 0px;
  }

  .image-container {
    width: 100%;
    height: 450px;
    position: relative;
  }
  .image-cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 730px;
    opacity: 1;
    background-color: #fff;
  }
  .image-cover.appear {
    opacity: 0;
  }
  .image-text-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .text-description {
    margin-inline: 80px;
    width: 100%;
    margin-top: 20px;
    min-height: unset;
  }
  .text-description h4 {
    font-size: 20px;
    line-height: 22px;
  }

  .text-description b {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 800;
  }
  .text-description p {
    font-size: 16px;
    font-weight: 700;
    color: #a3a3a3;
  }

  .faq-section {
    display: flex;
    flex-direction: column;
    margin-inline: 30px;
    margin-top: 40px;
    width: 90%;
    margin-inline: auto;
  }
  .faq-image-container {
    width: 100%;
    height: 90vw;
    position: relative;
    margin-left: auto;
    margin-right: 0px;
  }
  .faq-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .faq-categories-container {
    position: absolute;
    bottom: 20px;
    right: 10px;
    display: flex;
    flex-direction: column;
  }
  .faq-category {
    width: 180px;
    height: auto;
    padding: 10px;
    padding-inline: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: #d9d3d34f;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
  }
  .faq-category:hover {
    transform: translateX(20px);
  }
  .right-arrow {
    height: 20px;
    width: 20px;
    background: url('/assets/images/arrow-right.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .faq-questions-section {
    width: 100%;
    margin-inline: auto;
    margin-top: 10px;
  }
  .faq-question-container {
    border-bottom: solid 2px #eee;
    width: 100%;
    padding-inline: 5px;
    padding-block: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .faq-question-container p {
    font-size: 14px;
    font-weight: 700;
  }
  .faq-question-container b {
    height: 0px;
    color: white;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    transition:
      all 300ms ease-in-out,
      color 300ms 0ms ease-in-out;
  }
  .faq-question-container.clicked b {
    height: 100px;
    color: #222;
    transition:
      all 600ms ease-in-out,
      color 600ms 400ms ease-in-out;
  }
  .downwards-arrow {
    width: 15px;
    height: 15px;
    background: url('/assets/images/arrow-dark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    rotate: 180deg;
    /* margin-left: auto; */
  }

  .blog-page {
    width: 100%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    margin-top: -50px;
  }
  .blog-header {
    width: 90%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    align-items: start;
    justify-content: start;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -00%);
  }
  .blog-header h1 {
    position: relative;
    font-size: 30px;
    line-height: 30px;
    bottom: unset;
    left: unset;
    width: 90%;
    margin-left: 2.5%;
    margin-right: auto;
  }
  .blog-page p {
    width: 90%;
    margin-inline: auto;
    margin-top: 20px;
    font-size: 17px;
  }
  .blog-page h2 {
    width: 90%;
    padding-left: 5%;
    margin-right: auto;
    margin-top: 40px;
    font-size: 22px;
    margin-bottom: -5px;
  }
  .blog-page img {
    width: 95%;
    margin-inline: auto;
    height: auto;
    margin-top: 50px;
  }
  .maps-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 60px;
    margin-bottom: 100px;
  }
  .map-frame {
    width: 100%;
    height: 400px;
    margin-top: 50px;
  }
  .popup-section {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: #ffffffaa;
    backdrop-filter: blur(13px);
    transition: all 0.3s 0.6s ease-in-out;
    opacity: 0;
    display: none;
    overflow-y: scroll;
  }
  .popup-section.active-popup {
    transition: all 0.6s ease-in-out;
    opacity: 1;
  }
  .popup-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    padding: 30px;
    opacity: 1;
  }

  .popup-title-x-row {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s 0.6s ease-in-out;
  }
  .popup-title-x-row.active-popup {
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
  }
  #popup-title {
    width: 90%;
  }

  .popup-title-x-row b {
    font-size: 35px;
  }
  .popup-images-description {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
  }

  .popup-images {
    height: 40vh;
    height: 0px;
    background-color: #ffffffaa;
    width: 100%;
    flex: none;
    margin-right: 0px;
    /* margin-bottom: 30px; */
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .popup-images.active-popup {
    opacity: 1;
    transition: all 0.6s 1.2s ease-in-out;
  }
  .popup-description {
    opacity: 0;
    width: 100%;
    transition: all 0.3s 0s ease-in-out;
  }
  .popup-description.active-popup {
    opacity: 1;
    transition: all 0.6s 1.8s ease-in-out;
  }
  .popup-description p {
    font-size: 16px;
  }
  .lang-toggle {
    display: none;
  }
}
/* large mobile */
@media (min-width: 481px) and (max-width: 767px) {
  /* .lang-toggle {
    display: none !important;
  } */
  .langBtn {
    display: block !important;
  }
  /* .cursor,
    .follower {
        display: none;
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none; 
      z-index: 9999;
      transform: translate(-50%, -50%);
    }
    
    .cursor {
        display: none;
      width: 33px;
      height: 33px;
      background: url('assets/images/cursor.png') no-repeat center center;
      background-size: contain;
    }
    
    .follower {
      width: 36.5px;
      height: 32px;
      background: url('assets/images/follower.png') no-repeat center center;
      background-size: contain;
      transition: transform 0.15s ease-out;
    } */
  h1 {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 50px;
    line-height: 75px;
  }

  h2 {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 32px;
    line-height: 35px;
  }
  h3 {
    letter-spacing: -0.05em;
  }
  .lang-toggle {
    display: none !important;
  }
  .langBtn {
    display: block !important;
  }
  .navigation-bar-mobile {
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    width: 100%;
    height: 100vh;
    z-index: 8000;
    background-color: #ffffff83;
    backdrop-filter: blur(13.1px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    opacity: 1;
    transition: all 0.3s 0s ease-in-out;
  }
  .navigation-bar-mobile .bolt-logo {
    margin-right: 10px;
    margin-left: -10px;
    margin-top: 40px;
    margin-bottom: 20px;
    height: 30px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navigation-bar-mobile.hide-bar {
    opacity: 0;
    display: none;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .navigation-bar-mobile a {
    font-size: 27px;
    margin-top: 20px;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .navigation-bar-mobile a:nth-child(1) {
    transition-delay: 0s;
  }

  .navigation-bar-mobile a:nth-child(2) {
    transition-delay: 0.1s;
  }

  .navigation-bar-mobile a:nth-child(3) {
    transition-delay: 0.2s;
  }
  .navigation-bar-mobile a:nth-child(4) {
    transition-delay: 0.3s;
  }
  .navigation-bar-mobile a:nth-child(5) {
    transition-delay: 0.4s;
  }
  .navigation-bar-mobile a:nth-child(6) {
    transition-delay: 0.5s;
  }
  .navigation-bar-mobile a:nth-child(7) {
    transition-delay: 0.6s;
  }
  .navigation-bar-mobile a:nth-child(8) {
    transition-delay: 0.7s;
  }
  .navigation-bar-mobile a:nth-child(9) {
    transition-delay: 0.8s;
  }
  .navigation-bar-mobile a:nth-child(10) {
    transition-delay: 0.9s;
  }
  .navigation-bar-mobile.hide-bar a {
    opacity: 0;
    transition: all 0.3s 0s ease-in-out;
  }
  .navigation-bar {
    height: 60px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
  }
  .navigation-bar.opaque {
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
  }
  .navigation-buttons-holder {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navigation-buttons-holder a {
    display: none;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: #222;
    text-shadow: #ffffff95 0px 0px 30px;
  }
  .bolt-logo {
    height: 27px;
    width: auto;
    margin-left: 10px;
    margin-right: auto;
    flex: none;
  }
  .bolt-logo img {
    height: 100%;
    width: auto;
  }

  .bolt-cameleon {
    display: block;
    height: 25px;
    width: 23px;
    margin-right: 25px;
    margin-left: auto;
    flex: none;
    background: url('assets/images/burger.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
  }
  .bolt-cameleon img {
    height: 100%;
    width: 1px;
    opacity: 0;
    filter: grayscale(100%);
  }

  .intro-section {
    width: 100%;
    height: 100vh;
    margin-top: -90px;
    position: relative;
    overflow-x: hidden;
  }
  .intro-section img {
    width: unset;
    height: 100%;
    margin-left: -100%;
  }

  .intro-section h1 {
    position: absolute;
    bottom: 100px;
    left: 20px;
    font-size: 60px;
    line-height: 50px;
  }
  .intro-section h1.contact-header {
    left: 5%;
  }

  .side-text {
    font-size: 16px;
    width: 95%;
    line-height: 18px;
  }
  .heading-side-text-row-column {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-inline: auto;
    align-items: start;
    justify-content: space-between;

    margin-top: 50px;
  }

  .reverse-image-text-section {
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: hidden;
    margin-top: 0px;
  }
  .reverse-container {
    height: unset;
    width: 100%;

    position: relative;
  }
  .reverse-image-scroller {
    height: 100vh;
    width: 0%;

    overflow-y: scroll;
    display: flex;
    display: none;
    flex-direction: column-reverse;
    scrollbar-width: none; /* Hides the scrollbar */
  }
  .reverse-image-scroller::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }

  .reverse-image-gradient {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(
      to bottom,
      white 0%,
      /* White at the very top */ rgba(255, 255, 255, 0) 15%,
      /* White up to 10% */ transparent 10%,
      /* Transparent from 10% */ transparent 90%,
      /* Transparent up to 90% */ rgba(255, 255, 255, 0) 85%,
      /* White from 90% */ white 100% /* White at the very bottom */
    );
  }
  .reverse-image-text-section h2 {
    width: 100%;
    margin-left: 0px;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 35px;
    font-weight: 700;
    line-height: 35px;
  }
  .revealed-text {
    width: 90%;
  }
  .revealed-text b {
    width: 100%;
  }
  .reverse-image-scroller img {
    width: 0%;
  }

  .doctor-timeline-section {
    width: 85%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    margin-top: 80px;
  }
  .header-left-container {
    width: 100%;
    margin-top: 30px;
    padding-right: 30px;
  }
  .timeline-right-container {
    width: 100%;
    margin-top: 50px;
    border-left: solid #99c2ff 1px;
  }

  .timeline-box {
    margin-bottom: 50px;
    padding-inline: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .timeline-box b {
    color: #1875ff;
    margin-bottom: 10px;
  }
  .timeline-box h3 {
    margin-bottom: 10px;
  }
  .timeline-box:last-of-type {
    margin-bottom: 10px;
  }
  .timeline-blip {
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: #1875ff;
    position: absolute;
    left: -5px;
    top: 5px;
  }

  .testimonial-brackets-section {
    width: 95%;
    margin-inline: auto;

    margin-top: 10px;
  }
  .testimonial-brackets-section.color-bg {
    background: url('/assets/images/color-bg-vert.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .testimonial-bracket-container {
    display: flex;
    margin-top: 50px;
  }
  .up-bracket {
    width: 20px;
    height: 200px;
    background: url('/assets/images/bracket-up.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    flex: none;
  }
  #up-fade {
    background: url('/assets/images/bracket-up-fade.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .testimonial-brackets-section p {
    font-size: 14px;

    margin-inline: 10px;
    opacity: 1;
    transition: all 0.3s;
  }
  .testimonial-brackets-section p.hide {
    opacity: 0;
  }
  .down-bracket {
    width: 20px;
    height: 200px;
    background: url('/assets/images/bracket-down.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 5px;
    flex: none;
  }
  #down-fade {
    background: url('/assets/images/bracket-down-fade.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .grid-container {
    margin-top: 20px;
    display: grid;
    /* 5 equal columns */
    grid-template-columns: repeat(2, 1fr);
    /* 2 equal rows */
    grid-template-rows: repeat(5, 1fr);

    /* This creates the lines between cells */
    gap: 2px; /* 2px stroke */
    background-color: #e8e8e8; /* Gray color for the lines */
    border: 2px solid #e8e8e8; /* Add border around the whole grid */

    width: 90%; /* Adjust as needed */
    margin-inline: auto;
  }

  .grid-item {
    background-color: #ffffff; /* White background for the cells */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 1.2em;
    color: #333;
    box-sizing: border-box; /* Include padding in element's total width/height */
    aspect-ratio: 1;
    transition: all 0.3s;
  }
  .grid-item:hover {
    /* background-color: #f1f1f1; */
  }
  .grid-logo {
    width: 80%;
    height: 80%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grid-logo img {
    width: 100%;
    height: auto;
  }
  .service-header {
    font-size: 25px;
    font-weight: 700;
    padding: 10px;
  }

  .team-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 20px;
  }
  .team-box-row {
    display: flex;
    width: 100%;
    margin-top: 20px;
    flex-direction: column;
  }
  .team-box {
    width: 100%;
    background: url('/assets/images/team1.png');
    background-size: cover;

    background-position: center 10%;
    background-repeat: no-repeat;
    height: 100px;

    flex: auto;
    margin-right: 0px;
    margin-top: 7px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.4s 0s linear;
  }
  .team-box.active {
    width: 100%;
    height: 90vw;
    aspect-ratio: 1;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.4s 0s linear;
  }
  .flipped-name {
    position: absolute;
    bottom: 10px;
    right: 10px;
    rotate: 0deg;
    font-size: 22px;
    color: white;
    font-weight: 700;
  }
  .team-box.active .flipped-name {
    opacity: 0;
  }

  .frosted-container {
    position: absolute;
    right: 15px;
    bottom: 15px;
    border-radius: 7px;
    padding: 15px;
    width: 80%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    opacity: 1;
    transition: all 0.5s 0.6s;
  }
  .frosted-container.inactive {
    opacity: 0;
    transition: all 0.2s 0s;
  }
  .team-box-description {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .frosted-container h3 {
    font-size: 18px;
    font-weight: 700;
  }
  .frosted-container b {
    font-size: 12px;
    font-weight: 700;
    line-height: 0.9;
  }
  .frosted-container p {
    font-size: 10px;
    font-weight: 600;
    margin-top: 10px;
  }
  .frosted-container h4 {
    font-size: 13px;
    font-weight: 700;
    margin-top: auto;
  }
  .accreditation-container {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
  }
  .acrid-bubble {
    width: 20px;

    margin-bottom: 5px;
    padding-block: 5px;
    font-size: 13px;
    display: flex;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
  }
  .linkedin-logo {
    margin-top: 15px;
    height: 20px;
    width: 20px;
    background: url('/assets/images/linkedin.png');
    background-size: contain;
    opacity: 0.8;
  }

  .scattered-perks-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
    height: 1000px;
  }
  .scattered-perks-section h2 {
    font-size: 120px;
    font-weight: 800;
  }
  .scattered-perks-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 0px; /* Padding inside the container */
  }

  .perk-grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
  }
  .perk-image-box {
    background: #ffffffdd;

    border-radius: 15px;
    padding: 20px;
    height: 90px;
    width: 90px;
    border: 2px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;

    animation: float 10s ease-in-out infinite;
  }
  .perk-image-box img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.6;
  }

  .scattered-boxes-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 50px;
    margin-bottom: 20px;
    height: 1100px;
  }
  .scattered-boxes-section h2 {
    font-size: 70px;
    font-weight: 800;
  }
  .scattered-boxes-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    column-gap: 50px;
    min-height: 200px; /* Give it a minimum height */
    color: black;
    padding: 10px; /* Padding inside the container */
  }

  .grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 0px;
    border-radius: 5px;
  }
  .perk-box {
    background: #f6f6f6;
    border-radius: 15px;
    padding: 10px;
    min-height: 160px;
    width: 130px;
    border: 2px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.3s 0.7s;
  }

  #type2 {
    background: #fff;
    background: #ffffff38;

    border: 2px solid rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(2px);
  }

  #type3 {
    border: 2px solid rgba(222, 222, 222, 0.3);
    background-color: rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .perk-box b {
    font-size: 14px;
    display: none;
  }
  .perk-box p {
    margin-top: 5px;
    font-size: 11px;
  }

  .points-and-images-section {
    width: 85%;
    margin-inline: auto;
    margin-block: 50px;
    margin-top: 70px;
    margin-bottom: 50px;
  }
  .points-and-images-row {
    position: relative;
    display: flex;
    margin-top: 50px;
  }
  .points-column {
    width: 100%;
  }
  .point-container {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: solid 5px #ececec;
    padding-inline: 20px;
    font-size: 30px;
    width: 100%;
    border-radius: 0px 12px 12px 0px;
  }
  .point-container h3 {
    font-weight: 600;
    font-size: 23px;
  }
  .point-container p {
    display: none;
    font-size: 15px;
    margin-top: 5px;
  }
  .point-container.active-point {
    height: 180px;
    border-left: solid 5px #222;

    background: #e5e5e574;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .point-container.active-point p {
    display: block;
  }
  .point-image-container {
    width: 45%;
    display: none;
    height: 120%;
    position: absolute;
    right: 0;
    top: -20px;
    z-index: -1;
  }

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

  .image-collection-section {
    width: 85%;
    margin-top: 50px;
    margin-inline: auto;
  }
  .image-collection-section img {
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .network-section {
    width: 90%;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-inline: auto;
  }

  .network-section img {
    width: 100%;
    height: auto;
    opacity: 1;
  }

  .network-images {
    display: none;
  }
  .floating-text {
    display: none;
  }

  .stagered-boxes {
    width: 90%;
    margin-top: 10px;
    margin-inline: auto;
  }

  .stagered-container {
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    margin-top: 40px;
    gap: 5px;
  }
  .stagered-column {
    width: 100%;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .stagered-boxes img {
    width: 100%;
    height: auto;
    border-radius: 5px;
  }
  .large-stagered {
    width: 100%;
    border-radius: 20px;
    opacity: 0;
  }
  .small-stagered {
    width: 100%;
    border-radius: 20px;
    opacity: 0;
  }
  .large-stagered.appear {
    opacity: 1;
  }
  .small-stagered.appear {
    opacity: 1;
  }

  #small0 {
    transition: all 0.8s 0.5s ease-out;
  }
  #small1 {
    transition: all 0.8s 0.8s ease-out;
  }
  #big0 {
    transition: all 0.8s 0s ease-out;
  }
  #big1 {
    transition: all 0.8s 0.3s ease-out;
  }

  .horizontal-timeline-section-new {
    width: 100%;
    margin-top: 30px;
    position: relative;
    height: 100vh;
  }
  .horizontal-timeline-container-new {
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
  }

  .horizontal-timeline-section {
    width: 100%;
    margin-top: 20px;
    position: relative;
    height: 90vh;
  }
  .gradient-left {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, white, transparent);
  }
  .gradient-right {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 0px;
    height: 100%;
    background: linear-gradient(to left, white, transparent);
  }
  .timeline-header {
    margin-left: 30px;
    margin-top: 50px;
  }
  .horizontal-timeline-container {
    height: unset;
    display: flex;
    overflow-x: scroll;
    position: relative;
    scrollbar-width: none;
    flex: none;
    width: 100%;
  }
  .horizontal-timeline-container::-webkit-scrollbar {
    display: hidden;
  }
  .timeline-line {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;

    height: 7px;
    transform: translateY(-50%);
  }
  .timeline-image-text-pair {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 100px;
  }
  .timeline-text-container {
    height: 220px;
    width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-block: 30px;
    flex: none;
  }
  .timeline-dot {
    width: 30px;
    height: 30px;
    border-radius: 15px;

    flex: none;
  }
  .timeline-text-container.under {
    justify-content: start;
  }
  .timeline-image-text-pair:first-child {
    margin-left: 20vw;
  }
  .timeline-image-text-pair h3 {
    width: 90%;
    font-size: 23px;
  }
  .timeline-image-text-pair p {
    width: 90%;
    font-size: 16px;
  }
  .timeline-image-container {
    height: 220px;
    width: 320px;
    margin-block: 30px;
  }
  .timeline-image-container img {
    height: 100%;
    width: 100%;
  }

  .right-text-and-images-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
  }
  .right-text-and-images-section h3 {
    width: 90%;
    font-size: 22px;
    margin-inline: auto;
  }
  .right-text-and-images-section p {
    font-size: 15px;
    width: 90%;
    margin-inline: auto;
    margin-top: 10px;
  }
  .right-text-and-images-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    gap: 5px;
  }
  .right-text-and-image {
    flex: none;
    height: 50vw;
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
  }

  .right-text-and-image img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .right-only-images-section {
    width: 100%;

    margin-top: 50px;
    overflow: hidden;
  }
  .right-only-images-section h2 {
    margin-left: 40px;
  }
  .right-only-images-container {
    width: 100%;
    align-items: center;
    justify-content: start;
    display: flex;
    overflow-x: scroll;
    margin-top: 30px;
    margin-bottom: 00px;
  }
  .right-only-images {
    flex: none;
    height: 40vw;
    width: 40%;
    background-color: #eee;
    border-radius: 10px;
  }
  .right-only-image-overlay {
    padding: 7px;
  }
  .right-bubble {
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
  }
  .right-frosted-label {
    width: 100%;
    height: 90px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    color: #222;
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
    padding-block: 15px;
  }
  .right-only-images:nth-child(1) {
    margin-left: 40px;
  }
  .right-only-images img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
  }

  .team-information-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    gap: 100px;
  }
  .team-information-text-column {
    width: 100%;
    opacity: 1;
    transition: 0.3s ease-in-out;
  }
  .team-information-text-column.disappear {
    width: 100%;
    opacity: 0;
  }
  .team-information-section h2 {
    font-size: 27px;
    font-weight: 800;
  }
  .team-information-section b {
    font-size: 15px;
    font-weight: 800;
  }
  .team-information-section p {
    font-size: 15px;
    font-weight: 700;
    margin-top: 25px;
  }
  .team-information-section h3 {
    font-size: 18px;
    font-weight: 800;
    margin-top: 20px;
  }
  .skills-bubbles-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
  }
  .skill-bubble {
    height: 30px;
    padding-inline: 10px;
    border-radius: 20px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 7px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .team-member-image {
    width: 80%;
    height: auto;
    margin-top: 20px;
    display: none;
  }
  .team-member-image img {
    height: auto;
    width: 100%;
    border-radius: 20px;
  }

  .career-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .career-section h2 {
    margin-left: 0px;
    margin-bottom: 30px;
  }
  .career-option {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 5px;
    padding-block: 30px;
    border-bottom: solid 2px #dcdcdc;
  }
  .career-option:last-child {
    border-bottom: none;
  }
  .career-description-container {
    width: 100%;
    margin-right: auto;
  }
  .career-description-container h3 {
    font-size: 22px;
  }
  .career-description-container p {
    font-size: 15px;
    margin-top: 10px;
  }
  .career-option b {
    font-size: 20px;
    margin-top: 5px;
    margin-right: auto;
  }

  .apply-row {
    margin-top: 20px;
  }

  .contact-form-section {
    width: 90%;
    border-radius: 10px;
  }
  .contact-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;

    scrollbar-width: none;
    position: relative;
  }
  .contact-form-container::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }
  .contact-form-line {
    height: 450px;
    width: 8px;
    background: linear-gradient(
      to bottom,
      #22222200 0%,
      /* Transparent at the very top */ #222 10%,
      /* Transparent up to 10% */ #222 10%,
      /* Black from 10% */ #222 90%,
      /* Black up to 90% */ #222 90%,
      /* Transparent from 90% */ #22222200 100%
        /* Transparent at the very bottom */
    );
    position: absolute;
    top: 30px;
    left: 20px;
  }

  .contact-form-question-container {
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    margin-top: 10px;
  }
  .contact-point {
    width: 22px;
    height: 22px;
    border-radius: 11px;

    flex: none;
    margin-top: 7px;
  }
  .contact-question {
    width: 100%;
  }
  .contact-form-question-container h3 {
    font-size: 18px;
  }

  .question-bubbles-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
  }
  .question-bubble {
    height: 36px;
    padding-inline: 15px;
    border-radius: 18px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.5s ease-in-out;
  }
  .question-bubble.selected {
    color: white;
  }
  .next-button {
    height: 40px;
    padding-inline: 20px;
    border-radius: 20px;

    color: white;
    width: min-content;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-top: 20px;
  }

  .input-group {
    position: relative;
    width: 100%; /* Adjust width as needed */
    margin-bottom: 25px; /* Space for the floating label */
  }
  .input-field {
    width: 100%;
    padding: 10px 0; /* Vertical padding */
    border: none; /* Remove all borders */
    border-bottom: 2px solid #222; /* Only the bottom line */
    background-color: transparent; /* No background */
    font-size: 1rem;
    color: #222;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    margin-top: 20px;
  }

  /* Change bottom line color on focus */
  .input-field:focus {
    border-bottom-color: #222; /* Blue bottom line on focus */
  }

  /* Hide placeholder on focus for better floating label experience */
  .input-field:focus::placeholder {
    color: transparent;
  }

  /* The Label for Floating Effect */
  .input-label {
    position: absolute;
    left: 0;
    top: 20px; /* Aligns with input text */
    color: #222;
    font-size: 18px;
    pointer-events: none; /* Allows clicks to pass through to the input */
    transition:
      top 0.3s ease,
      font-size 0.3s ease,
      color 0.3s ease; /* Smooth transition */
  }

  .input-field:focus + .input-label,
  .input-field:not(:placeholder-shown) + .input-label {
    top: 0px; /* Move label up */
    font-size: 0.8rem; /* Make label smaller */
    color: #222; /* Change label color */
  }

  /* Prevent autocomplete background from interfering with transparency */
  .input-field:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
    -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
    transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
  }

  .venues-section {
    width: 95%;
    margin-inline: auto;

    position: relative;
  }
  .venue-image {
    width: 100%;
    height: 600px;
    background: url('/assets/images/color-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    opacity: 1;
    transition: all 600ms ease-in-out;
  }
  .venue-image.fade-out {
    opacity: 0;
  }

  .venue-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }
  .venues-container {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 600px;
    padding-block: 20px;
    border-radius: 20px;
    background-color: #ffffff40;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .venue-description {
    width: 90%;

    display: flex;
    flex-direction: column;
    margin-block: 20px;
    margin-inline: auto;
  }
  .venues-container h3 {
    font-size: 50px;
    line-height: 50px;
  }
  .venues-container p {
    font-size: 16px;
    margin-top: 15px;
  }
  .venue-bubbles {
    display: flex;
    margin-top: auto;
    display: none;
  }
  .venue-bubble {
    height: 45px;
    border: solid 2.5px #222;
    border-radius: 22.5px;
    padding-inline: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
  }
  .moving-boxes-container {
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: scroll;

    width: 100%;
    max-width: 800px; /* Limit overall width */
    scrollbar-width: none;
  }
  .moving-boxes-container::-webkit-scrollbar {
    display: none;
  }
  .venue-box-row {
    display: flex;
    flex-direction: column;
    height: 350px;
    width: 100%;
    margin-top: 12px;
    margin-left: 0px;
  }
  .box-spacer {
    width: 1px;
    height: 12px;
    flex: none;
  }
  .vanue-item {
    width: 200px;
    height: 160px;
    background-color: #ffffff6f;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin-top: 15px;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .vanue-item.active-venue p {
    opacity: 1;
  }
  .vanue-item.active-venue b {
    opacity: 1;
  }
  .vanue-item b {
    font-weight: 700px;
    letter-spacing: -0.05em;
    font-size: 16px;
    opacity: 0.1;
    transition: all 600ms ease-in-out;
  }
  .vanue-item p {
    font-weight: 700px;
    letter-spacing: -0.03em;
    font-size: 12px;
    margin-top: 10px;
    opacity: 0.1;
    transition: all 600ms ease-in-out;
  }
  .vanue-item.active-venue .bubble-dark {
    opacity: 1;
  }
  .bubble-dark {
    border: 2px solid #222;
    width: fit-content;
    padding: 15px;
    padding-block: 5px;
    border-radius: 20px;
    margin-top: auto;
    opacity: 0;
    transition: all 600ms ease-in-out;
    display: none;
  }

  .vanue-item.right-vanue {
    margin-top: 0px;
    margin-left: 14px;
  }

  .timeline-section-section {
    height: 500px;
    margin-top: 50px;
    background: #222;
  }
  .timeline-line-moving {
    height: 500px;
    width: 45vw;
    background-color: #ffffffaa;
    border-right: 2px #222 solid;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 99;
    display: block;
  }
  .timeline-section {
    width: 100%;
    height: 500px;
    overflow-x: scroll;
    margin-inline: auto;

    background-color: #fff;
    position: relative;
  }
  .timeline-container {
    height: 500px;
    width: auto;
    min-height: 40px;

    position: relative;
  }
  .timeline-cover {
    display: none;
  }
  .timeline-p {
    width: 100%;
    height: 100%;
    position: absolute;
    display: hidden;
  }
  .timeline-floating-box {
    position: absolute;
    padding-inline: 10px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff63;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    font-size: 17px;
    border-radius: 5px;
    width: max-content;
  }
  .timeline-container b {
    margin-inline: 10px;
    flex: none;
  }
  .timeline-container p {
  }
  #float0 {
    left: 5%;
    top: 35%;
  }
  #float1 {
    left: 22%;
    top: 45%;
  }
  #float2 {
    left: 35%;
    top: 55%;
  }
  #float3 {
    left: 65%;
    top: 35%;
  }
  #float4 {
    left: 75%;
    top: 45%;
  }
  .timeline-container img {
    width: auto;
    height: 500px;
  }
  .timeline-section p {
    margin-right: 10px;

    font-size: 14px;
    font-weight: 700;
    width: 90%;
    z-index: 99;
  }

  .hall-of-fame-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .fame-container {
    width: 100%;
    display: flex;
    margin-top: 40px;
    flex-direction: column;
  }
  .fame-line {
    width: 90%;
    height: 1px;
    background-color: #e1e1e1;
    margin-inline: 5px;
    flex: none;
    margin-block: 10px;
  }
  .fame-box {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .fame-description {
    width: 90%;
  }
  .fame-image {
    width: 200px;
    height: 200px;
    height: auto;
  }

  .fame-image img {
    width: 100%;
    height: auto;
  }
  .fame-box h3 {
    font-size: 20px;
    margin-top: 15px;
    margin-inline: 10px;
  }
  .fame-box p {
    font-size: 16px;
    margin-top: -5px;
    margin-inline: 10px;
  }
  .fame-box h4 {
    font-size: 25px;
    margin-top: 15px;
    margin-inline: 10px;
  }
  .fame-box span {
    font-size: 40px;
  }

  .golden-ratio-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .golden-ratio-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 10px;
  }
  .golden-ratio-column {
    width: 100%;

    height: auto;
    gap: 10px;
  }
  .golden-column-two {
    width: 100%;
    display: flex;

    height: auto;
    gap: 10px;
  }
  .golden-top-two {
    width: 100%;
    height: 200px;
    background: url('/assets/images/golden-top1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    border: solid 2px #eee;
  }
  .golden-bottom-three {
    width: 100%;
    height: 200px;
    background: url('/assets/images/bottom-3.png'), #222;
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 0px;
  }
  .golden-top {
    width: 100%;
    height: 200px;
    background-color: #eee;
    background: url('/assets/images/golden-top.png');
    background-size: cover;
    background-position: top right;
    border-radius: 15px;
    display: flex;
  }
  .golden-frosted-label {
    height: 45px;
    width: 95%;
    margin-inline: auto;
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    font-size: 20px;
    border-radius: 10px;
  }
  .golden-row {
    height: 170px;
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }
  .golden-bottom-one {
    width: 50%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    border: solid 2px #eee;
    background: url('/assets/images/golden-bottom0.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
  }
  .golden-bottom-two {
    width: 50%;
    height: 100%;
    background-color: #e8e8e8;
    background: url('assets/images/golden-bottom1.png'), #e8e8e8;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
  }

  .numbers-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .numbers-box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  .number-box {
    background-color: #f4f4f4;
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 200px;
    width: 150px;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .number-box h3 {
    font-size: 18px;
  }
  .number-box b {
    font-size: 50px;
    font-weight: 600;
  }

  .number-stack {
    display: flex;
  }

  .stats-section {
    width: 95%;
    margin-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
  }
  .stat-box {
    width: 20%;
    margin-inline: auto;
  }
  .stat-box h3 {
    font-size: 30px;
    /* font-size: 40px; */
  }
  .stat-seperator {
    height: 120px;
    width: 2px;
    background-color: #d1d1d1;
  }

  .schedule-section {
    display: flex;
    flex-direction: column;
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
    gap: 20px;
  }
  .schedule-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    border: solid #dddddd 1px;
    padding: 30px;
  }
  .schedule-container h3 {
    font-size: 30px;
  }
  .schedule-container h4 {
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
  }
  .schedule-seperator {
    height: 2px;
    width: 100%;
    background-color: #ddd;
    margin-top: 30px;
  }
  .day-hour-row {
    display: flex;
    justify-content: space-between;
  }

  .service-boxes-container {
    display: grid;
    margin-top: 50px;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    width: 95%;
    margin-inline: auto;
  }
  .service-box {
    height: 400px;
    width: 100%;
    background-color: #f3f3f3;
    margin-left: 0px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s linear;
    margin-bottom: 15px;
  }

  .service-background {
    height: 280px;
    width: 100%;
  }
  .service-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 40px;
  }
  .service-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .service-bubbles-arrow-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .service-bubble {
    height: 32px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;

    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .arrow-NE {
    height: 24px;
    width: 24px;
    background-image: url('/assets/images/arrow.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }
  .service-label-container {
    border-radius: 20px;
    width: 100%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.2s linear;
  }

  .blog-posts-footer-container {
    display: flex;
    margin-top: 20px;
    padding-right: 0px;
    margin-bottom: 30px;
    width: 95%;
    margin-inline: auto;
    flex-direction: column;
  }
  .blog-posts-page-container {
    display: flex;
    margin-top: 20px;
    padding-right: 0px;
    margin-bottom: 30px;
    width: 95%;
    margin-inline: auto;
    flex-direction: column;
    margin-bottom: 0px;
  }
  .blog-box {
    width: 100%;

    margin-left: 0px;
    border-radius: 15px;
    position: relative;
    padding-bottom: 20px;
    cursor: pointer;
  }
  .blog-box:hover {
    background-color: #efefef;
  }
  .blog-box:hover .blog-image-overlay {
    background: linear-gradient(
      0deg,
      #efefef 5.25%,
      rgba(224, 224, 224, 0) 100%
    );
  }
  .blog-image-container {
    height: 180px;
    width: 100%;
    overflow: hidden;

    border-radius: 15px 15px 0px 0px;
    position: relative;
  }
  .blog-background {
    height: 180px;
    width: 100%;
  }
  .blog-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 15px;
  }
  .blog-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    padding: 20px;
    border-radius: 5px 5px 0px 0px;
    background: linear-gradient(0deg, #fff 5.25%, rgba(255, 255, 255, 0) 60%);
  }
  .glass-tag {
    height: 35px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 8px;
    border: #ffffffa1 solid 2px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(13px);
    color: #222;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px;
  }

  .dark-bubble {
    height: 35px;
    width: auto;
    padding: 10px;
    padding-inline: 10px;
    border-radius: 20px;
    border: #222 solid 1.5px;
    color: #222;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 10px;
  }
  .blog-description-container {
    margin-top: 20px;
    width: 95%;
    margin-inline: auto;
  }
  .blog-description-container h3 {
    font-size: 20px;
    line-height: 22px;
  }
  .blog-description-container p {
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 14px;
  }
  .blog-tags-arrow-row {
    display: flex;
    margin-top: 30px;
  }
  .arrow-NE {
    height: 20px;
    width: 20px;
    background-image: url('/assets/images/arrow.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }
  .arrow-NE-dark {
    height: 24px;
    width: 24px;
    background-image: url('/assets/images/arrow-dark.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }

  .footer {
    background-color: #f5f5f5;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }
  .footer-logo {
    width: 120px;
    height: 48px;
    background: url('/assets/images/logo-large.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .footer-columns-row {
    display: flex;
    flex-direction: column;
  }
  .footer-column {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .footer-column h4 {
    margin-top: 20;
    margin-bottom: 10px;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.05em;
  }
  .footer-column a {
    font-size: 16px;
    opacity: 0.44;
    text-decoration: none;
  }
  .footer-column span {
    text-decoration: underline;
  }
  .footer b {
    margin-top: 100px;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    opacity: 0.4;
  }
  .text-logo-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }

  .footer-logo-small {
    width: 53px;
    height: 45px;
    background: url('/assets/images/footer-logo-small.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .treated-section {
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 10px;
  }

  .top-three-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .bottom-two-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .box-vertical {
    height: 400px;
    width: 100%;
    border: #e7e7e7 2px solid;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .box-vertical h3 {
    font-size: 25px;
  }
  .box-vertical p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .treatment-image {
    margin-top: auto;
    width: 100%;
    height: 250px;
  }
  .box-horizontal {
    height: 220px;
    width: 100%;
    border: #e7e7e7 3px solid;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
  }
  .box-horizontal h3 {
    font-size: 25px;
  }
  .box-horizontal p {
    font-size: 15px;
    font-weight: 600;
  }
  .box-horizontal .treatment-image {
    margin-top: auto;
    width: 50%;
    height: 100%;
  }

  .study-boxes-container {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    padding-right: 0px;
    width: 90%;
    margin-inline: auto;
  }
  .study-box {
    height: 240px;
    width: 100%;
    background-color: #a3a3a3;
    margin-left: 0px;
    margin-bottom: 15px;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
  }
  .study-box:last-child {
    display: none;
  }
  .study-box:hover {
    transition: all 0.2s linear;
  }
  .study-box:hover .study-box-overlay {
    opacity: 1;
  }
  .study-box:hover .study-box-hovered-overlay {
    opacity: 0;
  }
  .study-background {
    height: 240px;
    width: 100%;
  }
  .study-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 20px;
  }
  .study-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
    border-radius: 20px;
  }
  .study-box-hovered-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.6);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(13px);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    transition: all 0.2s linear;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #222;
    font-weight: 700;
    font-size: 20px;
    opacity: 0;
    transition: all 0.3s 0.05s linear;
    border-radius: 20px;
  }
  .study-bubbles-arrow-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .study-bubble {
    height: 32px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;
    font-size: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .study-label-container {
    height: 60px;
    border-radius: 20px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
  }

  .spacer {
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .horizontal-scroll {
    position: relative;
    height: 100vh;
    width: 100%;
    /* overflow-x: hidden; */
  }

  .scroll-track {
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
  }
  .spaceholder-timeline {
    width: 200px;
    height: 1px;
  }
  .panel {
    width: 350px;

    padding-top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 10px;
  }
  .panel h3 {
    font-size: 20px;
    font-weight: 700;
    margin-inline: 20px;
    margin-top: 20px;
    letter-spacing: -0.03em;
  }

  .scrolling-boxes-image-container {
    height: 300px;
    width: 350px;
    background-color: #a3a3a3;
    margin-left: 20px;
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    margin-top: -50px;
  }

  .scrolling-boxes-image-container img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 25px;
  }
  .scrolling-boxes-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
  }
  .scrolling-box-bubbles-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .scrolling-box-bubble {
    height: 33px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;
    font-size: 13px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scrolling-box-label-container {
    height: 60px;
    border-radius: 15px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
  }

  .image-text-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 70px;
  }
  .image-text-section h2 {
    margin-bottom: 30px;
    width: 90%;
    margin-inline: auto;
  }

  .image-text-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
  }
  .image-text-container.reverse-column {
    flex-direction: column-reverse;
  }
  .image-text-container:first-child {
    margin-top: 0px;
  }

  .image-container {
    width: 100%;
    height: 500px;
    position: relative;
  }
  .image-cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 730px;
    opacity: 1;
    background-color: #fff;
  }
  .image-cover.appear {
    opacity: 0;
  }
  .image-text-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .text-description {
    margin-inline: 80px;
    width: 100%;
    margin-top: 20px;
    min-height: unset;
  }
  .text-description h4 {
    font-size: 20px;
    line-height: 22px;
  }

  .text-description b {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 800;
  }
  .text-description p {
    font-size: 16px;
    font-weight: 700;
    color: #a3a3a3;
  }

  .faq-section {
    display: flex;
    flex-direction: column;
    margin-inline: 30px;
    margin-top: 40px;
    width: 90%;
    margin-inline: auto;
  }
  .faq-image-container {
    width: 100%;
    height: 90vw;
    position: relative;
    margin-left: auto;
    margin-right: 0px;
  }
  .faq-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .faq-categories-container {
    position: absolute;
    bottom: 20px;
    right: 10px;
    display: flex;
    flex-direction: column;
  }
  .faq-category {
    width: 210px;
    height: auto;
    padding: 15px;
    padding-inline: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: #d9d3d34f;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    margin-top: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
  }
  .faq-category:hover {
    transform: translateX(20px);
  }
  .right-arrow {
    height: 20px;
    width: 20px;
    background: url('/assets/images/arrow-right.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .faq-questions-section {
    width: 100%;
    margin-inline: auto;
    margin-top: 10px;
  }
  .faq-question-container {
    border-bottom: solid 2px #eee;
    width: 100%;
    padding-inline: 5px;
    padding-block: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .faq-question-container p {
    font-size: 14px;
    font-weight: 600;
  }
  .faq-question-container b {
    height: 0px;
    color: white;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    transition:
      all 300ms ease-in-out,
      color 300ms 0ms ease-in-out;
  }
  .faq-question-container.clicked b {
    height: 100px;
    color: #222;
    transition:
      all 600ms ease-in-out,
      color 600ms 400ms ease-in-out;
  }
  .downwards-arrow {
    width: 15px;
    height: 15px;
    background: url('/assets/images/arrow-dark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    rotate: 180deg;
    margin-left: auto;
  }

  .blog-page {
    width: 100%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    margin-top: -50px;
  }
  .blog-header {
    width: 90%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    align-items: start;
    justify-content: start;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -00%);
  }
  .blog-header h1 {
    position: relative;
    font-size: 30px;
    line-height: 30px;
    bottom: unset;
    left: unset;
    width: 90%;
    margin-left: 2.5%;
    margin-right: auto;
  }
  .blog-page p {
    width: 90%;
    margin-inline: auto;
    margin-top: 20px;
    font-size: 17px;
  }
  .blog-page h2 {
    width: 90%;
    padding-left: 5%;
    margin-right: auto;
    margin-top: 40px;
    font-size: 22px;
    margin-bottom: -5px;
  }
  .blog-page img {
    width: 95%;
    margin-inline: auto;
    height: auto;
    margin-top: 50px;
  }
  .maps-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 60px;
    margin-bottom: 100px;
  }
  .map-frame {
    width: 100%;
    height: 400px;
    margin-top: 50px;
  }

  .popup-section {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: #ffffffaa;
    backdrop-filter: blur(13px);
    transition: all 0.3s 0.6s ease-in-out;
    opacity: 0;
    display: none;
    overflow-y: scroll;
  }
  .popup-section.active-popup {
    transition: all 0.6s ease-in-out;
    opacity: 1;
  }
  .popup-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 1;
  }

  .popup-title-x-row {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s 0.6s ease-in-out;
  }
  .popup-title-x-row.active-popup {
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
  }
  #popup-title {
    width: 90%;
  }

  .popup-title-x-row b {
    font-size: 35px;
  }
  .popup-images-description {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
  }

  .popup-images {
    height: 40vh;
    height: 0px;
    background-color: #ffffffaa;
    width: 100%;
    flex: none;
    margin-right: 0px;
    /* margin-bottom: 30px; */
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .popup-images.active-popup {
    opacity: 1;
    transition: all 0.6s 1.2s ease-in-out;
  }
  .popup-description {
    opacity: 0;
    width: 100%;
    transition: all 0.3s 0s ease-in-out;
  }
  .popup-description.active-popup {
    opacity: 1;
    transition: all 0.6s 1.8s ease-in-out;
  }
  .popup-description p {
    font-size: 16px;
  }
  .lang-toggle {
    display: block;
  }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .lang-toggle {
    display: none !important;
  }
  .langBtn {
    display: block !important;
  }
  h1 {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 80px;
    line-height: 75px;
  }

  h2 {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 40px;
    line-height: 45px;
  }
  h3 {
    letter-spacing: -0.05em;
  }

  .navigation-bar-mobile {
    position: fixed;
    top: 0px;
    left: unset;
    right: 0px;
    display: none;
    width: 50%;
    height: 100vh;
    z-index: 8000;
    background-color: #ffffff83;
    backdrop-filter: blur(13.1px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    opacity: 1;
    transition: all 0.3s 0s ease-in-out;
  }
  .navigation-bar-mobile .bolt-logo {
    margin-right: 10px;
    margin-left: -10px;
    margin-top: 80px;
    margin-bottom: 40px;
    height: 30px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navigation-bar-mobile.hide-bar {
    opacity: 0;
    width: 0%;
    display: none;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .navigation-bar-mobile a {
    font-size: 27px;
    margin-top: 25px;
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .navigation-bar-mobile a:nth-child(1) {
    transition-delay: 0s;
  }

  .navigation-bar-mobile a:nth-child(2) {
    transition-delay: 0.1s;
  }

  .navigation-bar-mobile a:nth-child(3) {
    transition-delay: 0.2s;
  }
  .navigation-bar-mobile a:nth-child(4) {
    transition-delay: 0.3s;
  }
  .navigation-bar-mobile a:nth-child(5) {
    transition-delay: 0.4s;
  }
  .navigation-bar-mobile a:nth-child(6) {
    transition-delay: 0.5s;
  }
  .navigation-bar-mobile a:nth-child(7) {
    transition-delay: 0.6s;
  }
  .navigation-bar-mobile a:nth-child(8) {
    transition-delay: 0.7s;
  }
  .navigation-bar-mobile a:nth-child(9) {
    transition-delay: 0.8s;
  }
  .navigation-bar-mobile a:nth-child(10) {
    transition-delay: 0.9s;
  }
  .navigation-bar-mobile.hide-bar a {
    opacity: 0;

    transition: all 0.3s 0s ease-in-out;
  }
  .navigation-bar {
    height: 60px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
  }
  .navigation-bar.opaque {
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
  }
  .navigation-buttons-holder {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
  .navigation-buttons-holder a {
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    color: #222;
    display: none;
    text-shadow: #ffffff95 0px 0px 30px;
  }
  .bolt-logo {
    height: 30px;
    width: auto;
    margin-left: 30px;
    margin-right: auto;
    flex: none;
  }

  .bolt-cameleon {
    display: block;
    height: 30px;
    width: 23px;
    margin-right: 30px;
    margin-left: auto;
    flex: none;
    background: url('assets/images/burger.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
  }
  .bolt-cameleon img {
    opacity: 0;
    filter: grayscale(100%);
  }

  .intro-section {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    margin-top: -90px;
    position: relative;
  }
  .intro-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .intro-section h1 {
    position: absolute;
    bottom: 50px;
    left: 50px;
    font-size: 90px;
    line-height: 80px;
  }

  .side-text {
    font-size: 15px;
    width: 60%;
    margin-left: auto;
    line-height: 18px;
  }
  .heading-side-text-row-column {
    display: flex;
    width: 90%;
    flex-direction: column;
    margin-inline: auto;
    align-items: start;
    justify-content: space-between;

    margin-top: 100px;
  }

  .reverse-image-text-section {
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-y: hidden;
    margin-top: 50px;
  }
  .reverse-container {
    height: unset;
    width: 60%;

    position: relative;
  }
  .reverse-image-scroller {
    height: unset;
    width: 100%;
    overflow-y: scroll;
    display: flex;
    display: none;
    width: 0%;
    flex-direction: column;
    scrollbar-width: none; /* Hides the scrollbar */
  }
  .reverse-image-scroller::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }

  .reverse-image-gradient {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(
      to bottom,
      white 0%,
      /* White at the very top */ rgba(255, 255, 255, 0) 15%,
      /* White up to 10% */ transparent 10%,
      /* Transparent from 10% */ transparent 90%,
      /* Transparent up to 90% */ rgba(255, 255, 255, 0) 85%,
      /* White from 90% */ white 100% /* White at the very bottom */
    );
  }
  .reverse-image-text-section h2 {
    width: 100%;
    margin-left: 0px;
    margin-top: 0px;
    font-size: 40px;
    font-weight: 700;
  }
  .revealed-text {
    width: 90%;
  }
  .reverse-image-scroller img {
    width: 100%;
  }

  .testimonial-brackets-section {
    width: 90%;
    margin-inline: auto;

    margin-top: 50px;
  }
  .testimonial-bracket-container {
    display: flex;
    margin-top: 50px;
  }
  .up-bracket {
    width: 50px;
    height: 200px;
    background: url('/assets/images/bracket-up.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
    flex: none;
  }

  .testimonial-brackets-section p {
    font-size: 17px;

    margin-inline: 50px;
    opacity: 1;
    transition: all 0.3s;
  }

  .down-bracket {
    width: 50px;
    height: 200px;
    background: url('/assets/images/bracket-down.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 10px;
    flex: none;
  }

  .grid-container {
    width: 100%; /* Adjust as needed */
  }

  .team-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .team-box-row {
    display: flex;
    width: 100%;
    margin-top: 50px;
  }
  .team-box {
    width: 8vw;
    background: url('/assets/images/team1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 360px;
    flex: auto;
    margin-right: 5px;
    border-radius: 10px;
    filter: grayscale(100%);
    position: relative;
    cursor: pointer;
    transition: all 0.5s 0s linear;
  }
  .team-box.active {
    width: 300px;
    flex: none;
    filter: grayscale(0%);
    transition: all 0.5s 0s linear;
  }
  .flipped-name {
    position: absolute;
    bottom: 30px;
    right: 10px;
    rotate: 270deg;
    font-size: 25px;
    color: white;
    font-weight: 700;
  }
  .team-box.active .flipped-name {
    opacity: 0;
  }
  .team-box-description {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .accreditation-container {
    width: 23px;
  }
  .acrid-bubble {
    display: none;
  }

  .scattered-boxes-section h2 {
    font-size: 80px;
    font-weight: 800;
  }

  .grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
  }
  .perk-box {
    background: #f6f6f6;
    border-radius: 15px;
    padding: 15px;
    min-height: 200px;
    width: 150px;
    border: 2px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.3s 0.7s;
  }

  .perk-box b {
    font-size: 15px;
  }
  .perk-box p {
    margin-top: 5px;
    font-size: 13px;
  }

  .points-and-images-section {
    width: 95%;
    margin-inline: auto;
    margin-block: 50px;
    margin-top: 70px;
    margin-bottom: 100px;
  }
  .points-and-images-row {
    position: relative;
    display: flex;
    margin-top: 50px;
  }
  .point-container {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: solid 10px #ececec;
    padding-inline: 20px;
    font-size: 30px;
    width: 100%;
    border-radius: 0px 12px 12px 0px;
  }
  .point-container h3 {
    font-weight: 600;
    font-size: 24px;
  }
  .point-container p {
    display: none;
    font-size: 15px;
    margin-top: 5px;
  }
  .point-container.active-point {
    height: 160px;
    border-left: solid 10px #222;

    background: #e5e5e574;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .point-container.active-point p {
    display: block;
  }
  .point-image-container {
    width: 40%;
    height: 100%;
    position: absolute;
    right: 10%;
    top: -20px;
    z-index: -1;
  }

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

  .image-collection-section {
    width: 95%;
    margin-top: 50px;
    margin-inline: auto;
  }
  .image-collection-section img {
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .network-section {
    width: 868px;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-inline: auto;
  }
  .network-section img {
    width: 100%;
    height: auto;
    opacity: 0;
  }
  .network-images {
    position: absolute;
    width: 85px;
    height: 110px;
    background-color: #eee;
    border-radius: 5px;
    top: 0px;
  }
  .network-images img {
    opacity: 1;
  }
  .network-images.appear {
    opacity: 1;
  }
  .floating-text {
    width: 50%;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    display: flex;
  }
  .network-section h2 {
    font-size: 35px;
    text-align: center;
    line-height: 40px;
  }
  .floating-text b {
    text-align: center;
  }
  .network-images:nth-of-type(1) {
    margin-left: 0px;
    margin-top: 60px;
  }
  .network-images:nth-of-type(2) {
    margin-left: 0px;
    margin-top: 180px;
  }
  .network-images:nth-of-type(3) {
    margin-left: 95px;
    margin-top: 10px;
  }
  .network-images:nth-of-type(4) {
    margin-left: 95px;
    margin-top: 130px;
  }
  .network-images:nth-of-type(5) {
    margin-left: 190px;
    margin-top: 50px;
  }
  .network-images:nth-of-type(6) {
    margin-left: 285px;
    margin-top: 10px;
  }
  .network-images:nth-of-type(7) {
    margin-left: 380px;
    margin-top: 50px;
  }
  .network-images:nth-of-type(8) {
    margin-left: 475px;
    margin-top: 10px;
  }
  .network-images:nth-of-type(9) {
    margin-left: 570px;
    margin-top: 75px;
  }
  .network-images:nth-of-type(10) {
    margin-left: 665px;
    margin-top: 10px;
  }
  .network-images:nth-of-type(11) {
    margin-left: 665px;
    margin-top: 130px;
  }
  .network-images:nth-of-type(12) {
    margin-left: 760px;
    margin-top: 70px;
  }
  .network-images:nth-of-type(13) {
    margin-left: 760px;
    margin-top: 190px;
  }
  .network-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .stagered-boxes {
    width: 95%;
    margin-top: 10px;
    margin-inline: auto;
  }

  .timeline-image-text-pair {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 100px;
  }
  .timeline-text-container {
    height: 300px;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-block: 70px;
    flex: none;
  }

  .right-text-and-images-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
  }
  .right-text-and-images-section h3 {
    width: 90%;
    font-size: 30px;
    margin-inline: auto;
  }
  .right-text-and-images-section p {
    font-size: 17px;
    width: 70%;
    margin-inline: auto;
    margin-top: 20px;
  }
  .right-text-and-images-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
    gap: 15px;
  }
  .right-text-and-image {
    flex: none;
    height: 300px;
    width: 300px;
    background-color: #eee;
    border-radius: 20px;
  }

  .right-text-and-image img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }

  .right-only-images-section {
    width: 100%;

    margin-top: 50px;
    overflow: hidden;
  }
  .right-only-images-section h2 {
    margin-left: 50px;
  }
  .right-only-images-container {
    width: 100%;
    align-items: center;
    justify-content: start;
    display: flex;
    overflow-x: scroll;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .right-only-images {
    flex: none;
    height: 30vw;
    width: 30%;
    background-color: #eee;
    border-radius: 10px;
  }
  .right-only-image-overlay {
    padding: 10px;
  }
  .right-bubble {
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
  }
  .right-frosted-label {
    width: 100%;
    height: 90px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    color: #222;
    font-size: 17px;
    font-weight: 700;
    padding: 10px;
    padding-block: 15px;
  }
  .right-only-images:nth-child(1) {
    margin-left: 30px;
  }
  .right-only-images img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }

  .team-information-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    display: flex;
    gap: 30px;
  }
  .team-information-text-column {
    width: 100%;
    opacity: 1;
    transition: 0.3s ease-in-out;
  }
  .team-information-text-column.disappear {
    width: 100%;
    opacity: 0;
  }
  .team-information-section h2 {
    font-size: 35px;
    font-weight: 800;
  }
  .team-information-section b {
    font-size: 20px;
    font-weight: 800;
  }
  .team-information-section p {
    font-size: 16px;
    font-weight: 700;
    margin-top: 25px;
  }
  .team-information-section h3 {
    font-size: 20px;
    font-weight: 800;
    margin-top: 20px;
  }
  .skills-bubbles-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
  }
  .skill-bubble {
    height: 30px;
    padding-inline: 15px;
    border-radius: 20px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .career-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .career-section h2 {
    margin-left: 20px;
    margin-bottom: 30px;
  }
  .career-option {
    display: flex;
    align-items: center;
    padding: 20px;
    padding-block: 30px;
    border-bottom: solid 2px #dcdcdc;
  }
  .career-option:last-child {
    border-bottom: none;
  }
  .career-description-container {
    width: 80%;
    margin-right: auto;
  }
  .career-description-container h3 {
    font-size: 27px;
  }
  .career-description-container p {
    font-size: 15px;
  }
  .career-option b {
    font-size: 20px;
  }

  .contact-form-section {
    width: 90%;

    border-radius: 10px;
  }
  .contact-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;

    scrollbar-width: none;
    position: relative;
  }
  .contact-form-container::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }
  .contact-form-line {
    height: 450px;
    width: 8px;
    background: linear-gradient(
      to bottom,
      #22222200 0%,
      /* Transparent at the very top */ #222 10%,
      /* Transparent up to 10% */ #222 10%,
      /* Black from 10% */ #222 90%,
      /* Black up to 90% */ #222 90%,
      /* Transparent from 90% */ #22222200 100%
        /* Transparent at the very bottom */
    );
    position: absolute;
    top: 30px;
    left: 20px;
  }

  .contact-form-question-container {
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    margin-top: 20px;
  }
  .contact-point {
    width: 22px;
    height: 22px;
    border-radius: 11px;

    flex: none;
    margin-top: 7px;
  }
  .contact-question {
    width: 100%;
  }
  .contact-form-question-container h3 {
    font-size: 22px;
  }

  .question-bubbles-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
  }
  .question-bubble {
    height: 36px;
    padding-inline: 15px;
    border-radius: 18px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.5s ease-in-out;
  }
  .question-bubble.selected {
    color: white;
  }
  .next-button {
    height: 40px;
    padding-inline: 20px;
    border-radius: 20px;

    color: white;
    width: min-content;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-top: 20px;
  }

  .input-group {
    position: relative;
    width: 100%; /* Adjust width as needed */
    margin-bottom: 25px; /* Space for the floating label */
  }
  .input-field {
    width: 100%;
    padding: 10px 0; /* Vertical padding */
    border: none; /* Remove all borders */
    border-bottom: 2px solid #222; /* Only the bottom line */
    background-color: transparent; /* No background */
    font-size: 1rem;
    color: #222;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    margin-top: 20px;
  }

  /* Change bottom line color on focus */
  .input-field:focus {
    border-bottom-color: #222; /* Blue bottom line on focus */
  }

  /* Hide placeholder on focus for better floating label experience */
  .input-field:focus::placeholder {
    color: transparent;
  }

  /* The Label for Floating Effect */
  .input-label {
    position: absolute;
    left: 0;
    top: 20px; /* Aligns with input text */
    color: #222;
    font-size: 18px;
    pointer-events: none; /* Allows clicks to pass through to the input */
    transition:
      top 0.3s ease,
      font-size 0.3s ease,
      color 0.3s ease; /* Smooth transition */
  }

  .input-field:focus + .input-label,
  .input-field:not(:placeholder-shown) + .input-label {
    top: 0px; /* Move label up */
    font-size: 0.8rem; /* Make label smaller */
    color: #222; /* Change label color */
  }

  /* Prevent autocomplete background from interfering with transparency */
  .input-field:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
    -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
    transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
  }

  .venues-section {
    width: 85%;
    margin-inline: auto;

    position: relative;
  }
  .venue-image {
    width: 100%;
    height: 800px;
    background: url('/assets/images/color-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    opacity: 1;
    transition: all 600ms ease-in-out;
  }
  .venue-image.fade-out {
    opacity: 0;
  }

  .venue-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }
  .venues-container {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 800px;
    border-radius: 20px;
    background-color: #ffffff40;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .venue-description {
    width: 80%;

    display: flex;
    flex-direction: column;
    margin-top: 80px;
    margin-bottom: 20px;
    margin-left: 70px;
  }
  .venues-container h3 {
    font-size: 60px;
    line-height: 60px;
  }
  .venues-container p {
    font-size: 18px;
    margin-top: 30px;
  }
  .venue-bubbles {
    display: flex;
    margin-top: auto;
    display: none;
  }
  .venue-bubble {
    height: 45px;
    border: solid 2.5px #222;
    border-radius: 22.5px;
    padding-inline: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
  }
  .moving-boxes-container {
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: scroll;

    height: 400px;
    width: 100%;
    max-width: unset; /* Limit overall width */
    scrollbar-width: none;
    margin-bottom: 50px;
  }
  .moving-boxes-container::-webkit-scrollbar {
    display: none;
  }
  .venue-box-row {
    display: flex;
    flex-direction: column;
    height: 400px;
    width: 100%;
    margin-top: 12px;
    margin-left: 0px;
  }
  .box-spacer {
    width: 1px;
    height: 12px;
    flex: none;
  }
  .vanue-item {
    width: 200px;
    height: 160px;
    background-color: #ffffff6f;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin-top: 15px;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .vanue-item.active-venue p {
    opacity: 1;
  }
  .vanue-item.active-venue b {
    opacity: 1;
  }
  .vanue-item b {
    font-weight: 700px;
    letter-spacing: -0.05em;
    font-size: 16px;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
  }
  .vanue-item p {
    font-weight: 700px;
    letter-spacing: -0.03em;
    font-size: 12px;
    margin-top: 10px;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
  }
  .vanue-item.active-venue .bubble-dark {
    opacity: 1;
  }
  .bubble-dark {
    border: 2px solid #222;
    width: fit-content;
    padding: 15px;
    padding-block: 5px;
    border-radius: 20px;
    margin-top: auto;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
    display: none;
  }

  .vanue-item.right-vanue {
    margin-top: 0px;
    margin-left: 14px;
  }

  .timeline-line-moving {
    display: none;
  }
  .timeline-section {
    width: 100%;
    margin-inline: auto;
    margin-top: 50px;
    background-color: #fff;
  }
  .timeline-container {
    width: 100%;
    min-height: 40px;
    height: auto;
    position: relative;
  }
  .timeline-floating-box {
    position: absolute;
    padding-inline: auto;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff63;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(3px);
    font-size: 20px;
    border-radius: 9px;
  }
  .timeline-container b {
    margin-inline: 18px;
  }
  .timeline-container p {
    position: absolute;
    right: 7%;
    bottom: 0%;
    font-size: 18px;
    font-weight: 700;
    width: 50%;
  }

  .scattered-perks-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
    height: 1000px;
  }
  .scattered-perks-section h2 {
    font-size: 120px;
    font-weight: 800;
  }
  .scattered-perks-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 0px; /* Padding inside the container */
  }

  .perk-grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
  }
  .perk-image-box {
    background: #ffffffdd;

    border-radius: 15px;
    padding: 20px;
    height: 100px;
    width: 100px;
    border: 2px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;

    animation: float 10s ease-in-out infinite;
  }
  .perk-image-box img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.6;
  }

  .hall-of-fame-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .fame-container {
    width: 100%;
    display: flex;
    margin-top: 40px;
  }
  .fame-line {
    width: 1px;
    height: 350px;
    background-color: #e1e1e1;
    margin-inline: 5px;
    flex: none;
  }
  .fame-box {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fame-description {
    width: 90%;
  }
  .fame-image {
    width: 90%;
    height: auto;
  }

  .fame-image img {
    width: 100%;
    height: auto;
  }
  .fame-box h3 {
    font-size: 18px;
    margin-top: 15px;
    margin-inline: 10px;
  }
  .fame-box p {
    font-size: 13px;
    margin-top: -5px;
    margin-inline: 10px;
  }
  .fame-box h4 {
    font-size: 25px;
    margin-top: 15px;
    margin-inline: 10px;
  }
  .fame-box span {
    font-size: 30px;
  }

  .golden-ratio-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .golden-ratio-container {
    display: flex;
    margin-top: 40px;
    gap: 10px;
  }
  .golden-ratio-column {
    width: 66%;

    height: 280px;
    gap: 15px;
  }
  .golden-column-two {
    width: 33%;

    height: 575px;
    gap: 15px;
  }
  .golden-top-two {
    width: 100%;
    height: 68%;
    background: url('/assets/images/golden-top1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    border: solid 2px #eee;
  }
  .golden-bottom-three {
    width: 100%;
    height: 30%;
    background: url('/assets/images/bottom-3.png'), #222;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
    margin-top: 15px;
  }
  .golden-top {
    width: 100%;
    height: 280px;
    background-color: #eee;
    background: url('/assets/images/golden-top.png');
    background-size: cover;
    background-position: top right;
    border-radius: 15px;
    display: flex;
  }
  .golden-frosted-label {
    height: 70px;
    width: 95%;
    margin-inline: auto;
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    font-size: 30px;
    border-radius: 20px;
  }
  .golden-row {
    height: 285px;
    display: flex;
    gap: 15px;
    margin-top: 15px;
  }
  .golden-bottom-one {
    width: 55%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    border: solid 2px #eee;
    background: url('/assets/images/golden-bottom0.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
  }
  .golden-bottom-two {
    width: 45%;
    height: 100%;
    background-color: #e8e8e8;
    background: url('assets/images/golden-bottom1.png'), #e8e8e8;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 15px;
  }

  .numbers-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .numbers-box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
  .number-box {
    background-color: #f4f4f4;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 180px;
    width: 140px;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .number-box h3 {
    font-size: 16px;
  }
  .number-box b {
    font-size: 40px;
    font-weight: 600;
  }

  .service-boxes-container {
    display: flex;
    margin-top: 50px;

    width: 95%;
    margin-inline: auto;
  }
  .service-box {
    min-height: 400px;
    width: 100%;
    background-color: #f3f3f3;
    margin-left: 15px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s linear;
  }

  .service-background {
    height: 300px;
    width: 100%;
  }
  .service-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 40px;
  }
  .service-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .service-bubbles-arrow-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .service-bubble {
    height: 35px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 2px;
    color: white;
    font-weight: 700;
    font-size: 13px;

    display: flex;
    align-items: center;
    justify-content: center;
  }
  .arrow-NE {
    height: 25px;
    width: 25px;
    background-image: url('/assets/images/arrow.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }
  .service-header {
    font-size: 25px;
    font-weight: 700;
    padding: 10px;
  }
  .service-logo {
    margin-top: 10px;
    height: 50px;
    width: 50px;

    margin-left: 10px;
  }
  .service-label-container {
    border-radius: 20px;
    width: 100%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.2s linear;
  }

  .blog-posts-footer-container {
    display: flex;
    /* flex-direction: column; */
    margin-top: 40px;
    padding-right: 20px;
    margin-bottom: 50px;
    width: 100%;
    margin-inline: auto;
  }
  .blog-posts-page-container {
    display: flex;
    /* flex-direction: column; */
    margin-top: 40px;
    padding-right: 20px;
    margin-bottom: 50px;
    width: 100%;
    margin-inline: auto;
  }
  .blog-box {
    width: 100%;

    margin-left: 12px;
    border-radius: 15px;
    position: relative;
    padding-bottom: 20px;
    cursor: pointer;
    margin-bottom: 30px;
  }
  .blog-box:hover {
    background-color: #efefef;
  }
  .blog-box:hover .blog-image-overlay {
    background: linear-gradient(
      0deg,
      #efefef 5.25%,
      rgba(224, 224, 224, 0) 100%
    );
  }
  .blog-image-container {
    height: 250px;
    width: 100%;
    overflow: hidden;

    border-radius: 15px 15px 0px 0px;
    position: relative;
  }
  .blog-background {
    height: 250px;
    width: 100%;
  }
  .blog-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 15px;
  }
  .blog-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    padding: 20px;
    border-radius: 5px 5px 0px 0px;
    background: linear-gradient(0deg, #fff 5.25%, rgba(255, 255, 255, 0) 60%);
  }
  .glass-tag {
    height: 40px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 8px;
    border: #ffffffa1 solid 2px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(13px);
    color: #222;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
  }

  .dark-bubble {
    height: 40px;
    width: auto;
    padding: 10px;
    padding-inline: 7px;
    border-radius: 20px;
    border: #222 solid 2px;
    color: #222;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px;
  }
  .blog-description-container {
    margin-top: 20px;
    width: 95%;
    margin-inline: auto;
  }
  .blog-description-container h3 {
    font-size: 22px;
    line-height: 25px;
  }
  .blog-description-container p {
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 14px;
  }
  .blog-tags-arrow-row {
    display: flex;
    margin-top: 30px;
  }
  .arrow-NE {
    height: 23px;
    width: 23px;
    background-image: url('/assets/images/arrow.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }
  .arrow-NE-dark {
    height: 23px;
    width: 23px;
    background-image: url('/assets/images/arrow-dark.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: 5px;
    margin-top: 10px;
  }

  .footer {
    background-color: #f5f5f5;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    padding: 40px;
  }
  .footer-logo {
    width: 120px;
    height: 40px;
    background: url('/assets/images/logo-large.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .footer-columns-row {
    display: flex;
  }
  .footer-column {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .footer-column h4 {
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.05em;
  }
  .footer-column a {
    font-size: 18px;
    opacity: 0.44;
    text-decoration: none;
  }
  .footer-column span {
    text-decoration: underline;
  }
  .footer b {
    margin-top: 100px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    opacity: 0.4;
  }
  .text-logo-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }

  .footer-logo-small {
    width: 53px;
    height: 45px;
    background: url('/assets/images/footer-logo-small.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .treated-section {
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 10px;
  }

  .top-three-row {
    display: flex;
    gap: 10px;
  }
  .bottom-two-row {
    display: flex;
    gap: 10px;
  }
  .box-vertical {
    height: 300px;
    width: 100%;
    border: #e7e7e7 2px solid;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .box-vertical h3 {
    font-size: 25px;
  }
  .box-vertical p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .treatment-image {
    margin-top: auto;
    width: 100%;
    height: 150px;
  }
  .box-horizontal {
    height: 220px;
    width: 100%;
    border: #e7e7e7 3px solid;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
  }
  .box-horizontal h3 {
    font-size: 25px;
  }
  .box-horizontal p {
    font-size: 15px;
    font-weight: 600;
  }
  .box-horizontal .treatment-image {
    margin-top: auto;
    width: 50%;
    height: 100%;
  }

  .study-boxes-container {
    display: flex;
    margin-top: 40px;
    padding-right: 0px;
    width: 100%;
    margin-inline: auto;
  }
  .study-box:nth-child(4) {
    display: none;
  }
  .study-box {
    height: 300px;
    width: 100%;
    background-color: #a3a3a3;
    margin-left: 10px;
    border-radius: 40px;
    position: relative;
    cursor: pointer;
  }
  .study-box:hover {
    transition: all 0.2s linear;
  }
  .study-box:hover .study-box-overlay {
    opacity: 1;
  }
  .study-box:hover .study-box-hovered-overlay {
    opacity: 0;
  }
  .study-background {
    height: 300px;
    width: 100%;
  }
  .study-background img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 40px;
  }
  .study-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
  }
  .study-box-hovered-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.6);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(13px);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 40px;
    transition: all 0.2s linear;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #222;
    font-weight: 700;
    font-size: 16px;
    opacity: 0;
    transition: all 0.3s 0.05s linear;
  }
  .study-bubbles-arrow-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .study-bubble {
    height: 40px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 2.5px;
    color: white;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .study-label-container {
    height: 90px;
    border-radius: 30px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
  }

  .spacer {
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .horizontal-scroll {
    position: relative;
    height: 100vh;
    width: 100%;
    /* overflow-x: hidden; */
  }

  .scroll-track {
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
  }
  .spaceholder-timeline {
    width: 300px;
    height: 1px;
  }

  .panel {
    width: 500px;

    padding-top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 20px;
  }
  .panel h3 {
    font-size: 24px;
    font-weight: 700;
    margin-inline: 20px;
    margin-top: 20px;
    letter-spacing: -0.03em;
  }

  .scrolling-boxes-image-container {
    height: 400px;
    width: 500px;
    background-color: #a3a3a3;
    margin-left: 20px;
    border-radius: 40px;
    position: relative;
    cursor: pointer;
    margin-top: -50px;
  }

  .scrolling-boxes-image-container img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-radius: 40px;
  }
  .scrolling-boxes-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: all 0.05s linear;
  }
  .scrolling-box-bubbles-row {
    display: flex;
    margin-top: 20px;
    margin-inline: 20px;
    margin-bottom: auto;
  }
  .scrolling-box-bubble {
    height: 40px;
    width: auto;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: white;
    font-weight: 700;
    font-size: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scrolling-box-label-container {
    height: 90px;
    border-radius: 30px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
  }

  .image-text-section {
    width: 95%;
    margin-inline: auto;
    margin-top: 70px;
  }
  .image-text-section h2 {
    margin-bottom: 40px;
    margin-left: 100px;
  }

  .image-text-container {
    display: flex;
    width: 100%;

    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
  }
  .image-text-container:first-child {
    margin-top: 40px;
  }

  .image-container {
    width: 320px;
    height: 400px;
    position: relative;
  }
  .image-cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 320px;
    opacity: 1;
    transition: all 0.9s 0.5s ease-in-out;
    background-color: #fff;
  }
  .image-cover.appear {
    opacity: 0;
  }
  .image-text-container img {
    width: 320px;
    height: 400px;
    border-radius: 7px;
  }

  .text-description {
    margin-inline: 40px;
    max-width: 320px;
  }
  .text-description h4 {
    font-size: 23px;
    line-height: 26px;
  }

  .text-description b {
    margin-top: 0px;
    font-size: 23px;
    font-weight: 800;
  }
  .text-description p {
    font-size: 17px;
    font-weight: 700;
    color: #a3a3a3;
  }

  .faq-section {
    display: flex;
    margin-inline: 30px;
    margin-top: 40px;
    width: 95%;
    margin-inline: auto;
  }
  .faq-image-container {
    width: 40%;
    height: 35vw;
    position: relative;
    margin-left: auto;
    margin-right: 50px;
    aspect-ratio: 1;
  }
  .faq-image-container img {
    width: 100%;
    height: 100%;
  }
  .faq-categories-container {
    position: absolute;
    top: 20px;
    right: -40px;
    display: flex;
    flex-direction: column;
  }
  .faq-category {
    width: 230px;
    height: auto;
    padding: 15px;
    padding-inline: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: #d9d3d34f;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    margin-top: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
  }
  .faq-category:hover {
    transform: translateX(20px);
  }
  .right-arrow {
    height: 30px;
    width: 30px;
    background: url('/assets/images/arrow-right.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .faq-questions-section {
    width: 100%;
    margin-inline: auto;
    padding-top: 40px;
  }
  .faq-question-container {
    border-bottom: solid 2px #eee;
    width: 100%;
    padding-inline: 30px;
    padding-block: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .faq-question-container p {
    font-size: 17px;
    font-weight: 700;
  }
  .faq-question-container b {
    height: 0px;
    color: white;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    transition:
      all 300ms ease-in-out,
      color 300ms 0ms ease-in-out;
  }
  .faq-question-container.clicked b {
    height: 100px;
    color: #222;
    transition:
      all 600ms ease-in-out,
      color 600ms 400ms ease-in-out;
  }
  .downwards-arrow {
    width: 17px;
    height: 17px;
    background: url('/assets/images/arrow-dark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    rotate: 180deg;
  }

  .blog-page {
    width: 90%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    margin-top: -50px;
  }
  .blog-header {
    width: 90%;
    margin-inline: auto;
    max-width: 1400px;
    display: flex;
    align-items: start;
    justify-content: start;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -00%);
  }
  .blog-header h1 {
    position: relative;
    font-size: 80px;
    line-height: 80px;
    bottom: unset;
    left: unset;
    width: 90%;
    margin-left: 5%;
    margin-right: auto;
  }
  .blog-page p {
    width: 90%;
    margin-inline: auto;
    margin-top: 50px;
    font-size: 20px;
  }
  .blog-page h2 {
    width: 90%;
    padding-left: 5%;
    margin-right: auto;
    margin-top: 50px;
    font-size: 40px;
    margin-bottom: -25px;
  }
  .blog-page img {
    width: 95%;
    margin-inline: auto;
    height: auto;
    margin-top: 50px;
  }
  .maps-section {
    width: 85%;
    margin-inline: auto;
    margin-top: 60px;
    margin-bottom: 100px;
  }
  .map-frame {
    width: 100%;
    height: 500px;
    margin-top: 50px;
  }
  .popup-section {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: #ffffffaa;
    backdrop-filter: blur(13px);
    transition: all 0.3s 0.6s ease-in-out;
    opacity: 0;
    display: none;
    overflow-y: scroll;
  }
  .popup-section.active-popup {
    transition: all 0.6s ease-in-out;
    opacity: 1;
  }
  .popup-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 1;
  }

  .popup-title-x-row {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s 0.6s ease-in-out;
  }
  .popup-title-x-row.active-popup {
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
  }
  #popup-title {
    width: 90%;
  }

  .popup-title-x-row b {
    font-size: 35px;
  }
  .popup-images-description {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
  }

  .popup-images {
    height: 40vh;
    height: 0px;
    background-color: #ffffffaa;
    width: 100%;
    flex: none;
    margin-right: 0px;
    /* margin-bottom: 30px; */
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .popup-images.active-popup {
    opacity: 1;
    transition: all 0.6s 1.2s ease-in-out;
  }
  .popup-description {
    opacity: 0;
    width: 100%;
    transition: all 0.3s 0s ease-in-out;
  }
  .popup-description.active-popup {
    opacity: 1;
    transition: all 0.6s 1.8s ease-in-out;
  }
  .popup-description p {
    font-size: 20px;
  }
  .lang-toggle {
    display: block;
  }
}
/* small desktop */
@media (min-width: 1024px) and (max-width: 1400px) {
  h1 {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 60px;
    line-height: 75px;
  }

  h2 {
    font-weight: 700;
    letter-spacing: -0.05em;
    font-size: 45px;
    line-height: 65px;
  }
  h3 {
    letter-spacing: -0.05em;
  }

  .navigation-bar-mobile {
    display: none;
    height: 0px;
    width: 0px;
    overflow: hidden;
  }
  .navigation-bar {
    height: 80px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.6s ease-in-out;
  }
  .navigation-bar.opaque {
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
  }
  .navigation-buttons-holder {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
  }
  .navigation-buttons-holder a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    text-shadow: #ffffff95 0px 0px 30px;
  }
  .bolt-logo {
    height: 35px;
    width: auto;
    margin-left: 30px;
    margin-right: auto;
    flex: none;
  }
  .bolt-logo img {
    height: 100%;
    width: auto;
  }

  .bolt-cameleon {
    display: block;
    height: 35px;
    width: 35px;
    margin-right: 30px;
    margin-left: auto;
    flex: none;
    background: url('assets/images/burger.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    filter: grayscale(100%);
  }
  .bolt-cameleon img {
    height: 100%;
    width: 1px;
    display: none;
    filter: grayscale(100%);
  }

  .intro-section {
    width: 100%;
    height: 100vh;
    margin-top: -90px;
    position: relative;
  }
  .intro-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .intro-section h1 {
    position: absolute;
    bottom: 50px;
    left: 100px;
    font-size: 90px;
    line-height: 80px;
  }

  .side-text {
    font-size: 16px;
    width: 40%;
    line-height: 18px;
  }
  .heading-side-text-row-column {
    display: flex;
    width: 90%;
    margin-inline: auto;
    align-items: start;
    justify-content: space-between;

    margin-top: 100px;
  }

  .reverse-image-text-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-y: hidden;
    margin-top: 50px;
  }
  .reverse-container {
    width: 60%;

    position: relative;
  }
  .reverse-image-scroller {
    width: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    scrollbar-width: none; /* Hides the scrollbar */
    margin-right: 20px;
  }
  .reverse-image-scroller::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }

  .reverse-image-gradient {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
      to bottom,
      white 0%,
      /* White at the very top */ rgba(255, 255, 255, 0) 15%,
      /* White up to 10% */ transparent 10%,
      /* Transparent from 10% */ transparent 90%,
      /* Transparent up to 90% */ rgba(255, 255, 255, 0) 85%,
      /* White from 90% */ white 100% /* White at the very bottom */
    );
  }
  .reverse-image-text-section h2 {
    width: 100%;
    margin-left: 50px;
    margin-top: 0px;
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;
  }
  .reverse-image-scroller img {
    width: 100%;
  }
  .revealed-text {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .text-cover-reveal {
    width: 100%;
    height: 1000px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: #ffffffaa;
    transition: all 2s 1s ease-in-out;
  }
  .text-cover-reveal.shown {
    height: 0px;
  }
  .reverse-image-scroller img {
    width: 100%;
  }

  .testimonial-brackets-section {
    width: 90%;
  }
  .testimonial-bracket-container {
    display: flex;
    margin-top: 50px;
  }
  .up-bracket {
    width: 60px;
    height: 200px;
  }

  .testimonial-brackets-section p {
    font-size: 22px;

    margin-inline: 50px;
    opacity: 1;
    transition: all 0.3s;
  }
  .testimonial-brackets-section p.hide {
    opacity: 0;
  }
  .down-bracket {
    width: 60px;
    height: 200px;
  }

  .grid-container {
    margin-top: 50px;
    display: grid;
    /* 5 equal columns */
    grid-template-columns: repeat(5, 1fr);
    /* 2 equal rows */
    grid-template-rows: repeat(2, 1fr);

    /* This creates the lines between cells */
    gap: 2px; /* 2px stroke */
    background-color: #e8e8e8; /* Gray color for the lines */
    border: 2px solid #e8e8e8; /* Add border around the whole grid */

    width: 100%; /* Adjust as needed */
    margin-inline: auto;
  }
  .small-grid {
    grid-template-columns: repeat(4, 1fr);
    /* 2 equal rows */
    grid-template-rows: repeat(2, 1fr);
  }
  .grid-item {
    background-color: #ffffff; /* White background for the cells */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 1.2em;
    color: #333;
    box-sizing: border-box; /* Include padding in element's total width/height */
    aspect-ratio: 1;
    transition: all 0.3s;
  }
  .grid-item:hover {
    /* background-color: #f1f1f1; */
  }
  .grid-logo {
    width: 80%;
    height: 80%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grid-logo img {
    width: 100%;
    height: auto;
  }

  .team-section {
    width: 95%;
  }
  .team-box-row {
    display: flex;
    width: 100%;
    margin-top: 50px;
  }
  .team-box {
    width: 8vw;
    height: 400px;
    margin-right: 10px;
  }
  .team-box.active {
    width: 400px;
  }
  .team-box-description {
    width: 90%;
  }
  .accreditation-container {
    width: 10%;
  }
  .acrid-bubble {
    display: none;
  }

  .scattered-perks-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
    height: 1000px;
  }
  .scattered-perks-section h2 {
    font-size: 120px;
    font-weight: 800;
  }
  .scattered-perks-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 0px; /* Padding inside the container */
  }

  .perk-grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-radius: 5px;
  }
  .perk-image-box {
    background: #ffffffdd;

    border-radius: 15px;
    padding: 20px;
    height: 110px;
    width: 110px;
    border: 2px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;

    animation: float 10s ease-in-out infinite;
  }
  .perk-image-box img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.6;
  }

  .scattered-boxes-section {
    width: 95%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 50px;
    height: 600px;
  }
  .scattered-boxes-section h2 {
    font-size: 120px;
    font-weight: 800;
  }
  .scattered-boxes-container {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    min-height: 250px; /* Give it a minimum height */
    color: black;
    padding: 10px; /* Padding inside the container */
  }

  .grid-box {
    font-weight: bold;
    display: flex; /* Use flexbox to center content inside each item */
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
  }
  .perk-box {
    background: #f6f6f6;
    border-radius: 15px;
    padding: 20px;
    min-height: 230px;
    width: 200px;
    border: 2px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: all 0.3s 0.7s;
  }

  #type2 {
    background: #ffffff3e;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  #type2:first-child {
    background: #fff;
  }
  #type3 {
    border: 2px solid rgba(222, 222, 222, 0.3);
    background-color: rgba(222, 222, 222, 0.3);
    backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .perk-box b {
    font-size: 20px;
  }
  .perk-box p {
    margin-top: 5px;
    font-size: 16px;
  }

  .points-and-images-section {
    width: 95%;
    margin-inline: auto;
    margin-block: 50px;
    margin-top: 70px;
    margin-bottom: 150px;
  }
  .points-and-images-row {
    position: relative;
    display: flex;
    margin-top: 50px;
  }
  .point-container {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: solid 10px #ececec;
    padding-inline: 20px;
    font-size: 30px;
    width: 100%;
    border-radius: 0px 12px 12px 0px;
  }
  .point-container h3 {
    font-weight: 600;
  }
  .point-container p {
    display: none;
    font-size: 18px;
    margin-top: 5px;
  }
  .point-container.active-point {
    height: 180px;
    border-left: solid 10px #222;

    background: #e5e5e574;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(13px);
  }
  .point-container.active-point p {
    display: block;
  }
  .point-image-container {
    width: 40%;
    height: 100%;
    position: absolute;
    right: 10%;
    top: -20px;
    z-index: -1;
  }

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

  .image-collection-section {
    width: 85%;
    margin-top: 50px;
    margin-inline: auto;
  }
  .image-collection-section img {
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .network-section {
    width: 1090px;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-inline: auto;
    max-width: 1090px;
  }

  .network-section img {
    width: 100%;
    height: auto;
    opacity: 0;
  }

  .network-section img {
    width: 100%;
    height: auto;
  }

  .network-images {
    position: absolute;
    width: 110px;
    height: 135px;
    background-color: #eee;
    border-radius: 10px;
    top: 0px;
  }
  .network-images img {
    opacity: 1;
  }
  .network-images.appear {
    opacity: 1;
  }
  .floating-text {
    width: 50%;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    display: flex;
  }
  .network-section h2 {
    font-size: 40px;
    text-align: center;
    line-height: 40px;
  }
  .floating-text b {
    text-align: center;
  }
  .network-images:nth-of-type(1) {
    margin-left: 0px;
    margin-top: 60px;
  }
  .network-images:nth-of-type(2) {
    margin-left: 0px;
    margin-top: 205px;
  }
  .network-images:nth-of-type(3) {
    margin-left: 120px;
    margin-top: 10px;
  }
  .network-images:nth-of-type(4) {
    margin-left: 120px;
    margin-top: 155px;
  }
  .network-images:nth-of-type(5) {
    margin-left: 240px;
    margin-top: 70px;
  }
  .network-images:nth-of-type(6) {
    margin-left: 360px;
    margin-top: 20px;
  }
  .network-images:nth-of-type(7) {
    margin-left: 480px;
    margin-top: 50px;
  }
  .network-images:nth-of-type(8) {
    margin-left: 600px;
    margin-top: 20px;
  }
  .network-images:nth-of-type(9) {
    margin-left: 720px;
    margin-top: 85px;
  }
  .network-images:nth-of-type(10) {
    margin-left: 840px;
    margin-top: 10px;
  }
  .network-images:nth-of-type(11) {
    margin-left: 840px;
    margin-top: 155px;
  }
  .network-images:nth-of-type(12) {
    margin-left: 960px;
    margin-top: 70px;
  }
  .network-images:nth-of-type(13) {
    margin-left: 960px;
    margin-top: 215px;
  }
  .network-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .stagered-boxes {
    width: 85%;
    margin-top: 10px;
    margin-inline: auto;
  }

  .stagered-container {
    width: 100%;
    display: flex;
    margin-top: 40px;
    gap: 15px;
  }
  .stagered-column {
    width: 100%;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .stagered-boxes img {
    width: 100%;
    height: auto;
    border-radius: 15px;
  }
  .large-stagered {
    width: 100%;
    border-radius: 20px;
    opacity: 0;
  }
  .small-stagered {
    width: 100%;
    border-radius: 20px;
    opacity: 0;
  }
  .large-stagered.appear {
    opacity: 1;
  }
  .small-stagered.appear {
    opacity: 1;
  }

  #small0 {
    transition: all 0.8s 0.5s ease-out;
  }
  #small1 {
    transition: all 0.8s 0.8s ease-out;
  }
  #big0 {
    transition: all 0.8s 0s ease-out;
  }
  #big1 {
    transition: all 0.8s 0.3s ease-out;
  }

  .horizontal-timeline-section-new {
    width: 100%;
    margin-top: 30px;
    position: relative;
    height: 100vh;
  }
  .horizontal-timeline-container-new {
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
  }

  .horizontal-timeline-section {
    width: 100%;
    margin-top: 30px;
    position: relative;
  }
  .gradient-left {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, white, transparent);
  }
  .gradient-right {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, white, transparent);
  }
  .timeline-header {
    margin-left: 100px;
    margin-top: 100px;
  }
  .horizontal-timeline-container {
    height: 100%;
    display: flex;
    overflow-x: scroll;
    position: relative;
    scrollbar-width: none;
    flex: none;
  }
  .horizontal-timeline-container::-webkit-scrollbar {
    display: hidden;
  }
  .timeline-line {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 100%;

    height: 7px;
    transform: translateY(-50%);
  }
  .timeline-image-text-pair {
    width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 100px;
  }
  .timeline-text-container {
    height: 300px;
    width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-block: 70px;
    flex: none;
  }
  .timeline-dot {
    width: 30px;
    height: 30px;
    border-radius: 15px;

    flex: none;
  }
  .timeline-text-container.under {
    justify-content: start;
  }
  .timeline-image-text-pair:first-child {
    margin-left: 20vw;
  }
  .timeline-image-text-pair h3 {
    width: 90%;
    font-size: 30px;
  }
  .timeline-image-text-pair p {
    width: 90%;
    font-size: 18px;
  }
  .timeline-image-container {
    height: 300px;
    width: 450px;
    margin-block: 70px;
  }
  .timeline-image-container img {
    height: 100%;
    width: 100%;
  }

  .treated-section {
    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 10px;
  }

  .top-three-row {
    display: flex;
    gap: 10px;
  }
  .bottom-two-row {
    display: flex;
    gap: 10px;
  }
  .box-vertical {
    height: 300px;
    width: 100%;
    border: #e7e7e7 2px solid;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .box-vertical h3 {
    font-size: 25px;
  }
  .box-vertical p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .treatment-image {
    margin-top: auto;
    width: 100%;
    height: 150px;
  }
  .box-horizontal {
    height: 220px;
    width: 100%;
    border: #e7e7e7 3px solid;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
  }
  .box-horizontal h3 {
    font-size: 25px;
  }
  .box-horizontal p {
    font-size: 15px;
    font-weight: 600;
  }
  .box-horizontal .treatment-image {
    margin-top: auto;
    width: 50%;
    height: 100%;
  }

  .right-text-and-images-section {
    width: 90%;
  }
  .right-text-and-images-section h3 {
    font-size: 30px;
  }
  .right-text-and-images-section p {
    font-size: 18px;
  }
  .right-text-and-images-row {
    flex-wrap: wrap;
    margin-top: 30px;
    gap: 20px;
  }
  .right-text-and-image {
    flex: none;
    height: 240px;
    width: 240px;
    background-color: #eee;
    border-radius: 20px;
  }

  .right-only-images-section {
    width: 100%;

    margin-top: 50px;
    overflow: hidden;
  }
  .right-only-images-section h2 {
    margin-left: 100px;
  }
  .right-only-images-container {
    width: 100%;
    align-items: center;
    justify-content: start;
    display: flex;
    overflow-x: scroll;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .right-only-images {
    flex: none;
    height: 23vw;
    width: 23%;
    background-color: #eee;
    border-radius: 10px;
  }
  .right-only-image-overlay {
    padding: 10px;
  }
  .right-bubble {
    width: fit-content;
    padding-inline: 15px;
    padding-block: 5px;
    border-radius: 20px;
    border: #fff solid 3px;
    color: #fff;
    box-shadow: #c3c3c344 0px 0px 20px;
  }
  .right-frosted-label {
    width: 100%;
    height: 90px;
    border-radius: 15px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    color: #222;
    font-size: 17px;
    font-weight: 700;
    padding: 10px;
    padding-block: 15px;
  }
  .right-only-images:nth-child(1) {
    margin-left: 100px;
  }
  .right-only-images img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }

  .team-information-section {
    width: 90%;

    gap: 50px;
  }

  .team-information-section h2 {
    font-size: 40px;
    font-weight: 800;
  }
  .team-information-section b {
    font-size: 20px;
    font-weight: 800;
  }
  .team-information-section p {
    font-size: 17px;
    font-weight: 700;
    margin-top: 25px;
  }
  .team-information-section h3 {
    font-size: 21px;
    font-weight: 800;
    margin-top: 20px;
  }

  .skill-bubble {
    height: 37px;
    padding-inline: 20px;
    border-radius: 20px;
    border: solid 2.5px #222;
    flex: none;
    font-size: 18px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .team-member-image {
    width: 70%;
    height: auto;
    margin-top: 20px;
    aspect-ratio: 1;
  }
  .team-member-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
  }

  .career-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .career-section h2 {
    margin-left: 20px;
    margin-bottom: 30px;
  }
  .career-option {
    display: flex;
    align-items: center;
    padding: 20px;
    padding-block: 30px;
    border-bottom: solid 2px #dcdcdc;
  }
  .career-option:last-child {
    border-bottom: none;
  }
  .career-description-container {
    width: 80%;
    margin-right: auto;
  }
  .career-description-container h3 {
    font-size: 30px;
  }
  .career-description-container p {
    font-size: 17px;
  }
  .career-option b {
    font-size: 30px;
  }

  .contact-form-section {
    width: 80%;

    border-radius: 10px;
  }
  .contact-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;

    scrollbar-width: none;
    position: relative;
  }
  .contact-form-container::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }
  .contact-form-line {
    height: 550px;
    width: 8px;
    background: linear-gradient(
      to bottom,
      #22222200 0%,
      /* Transparent at the very top */ #222 10%,
      /* Transparent up to 10% */ #222 10%,
      /* Black from 10% */ #222 90%,
      /* Black up to 90% */ #222 90%,
      /* Transparent from 90% */ #22222200 100%
        /* Transparent at the very bottom */
    );
    position: absolute;
    top: 50px;
    left: 56.5px;
  }

  .contact-form-question-container {
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    margin-top: 20px;
  }
  .contact-point {
    width: 22px;
    height: 22px;
    border-radius: 11px;

    flex: none;
    margin-top: 7px;
  }
  .contact-question {
    width: 100%;
  }
  .contact-form-question-container h3 {
    font-size: 25px;
  }

  .question-bubbles-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 13px;
  }
  .question-bubble {
    height: 30px;
    padding-inline: 15px;
    border-radius: 18px;
    border: solid 2px #222;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.5s ease-in-out;
  }
  .question-bubble.selected {
    color: white;
  }
  .next-button {
    height: 40px;
    padding-inline: 20px;
    border-radius: 20px;

    color: white;
    width: min-content;
    flex: none;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-top: 20px;
  }

  .input-group {
    position: relative;
    width: 100%; /* Adjust width as needed */
    margin-bottom: 25px; /* Space for the floating label */
  }
  .input-field {
    width: 100%;
    padding: 10px 0; /* Vertical padding */
    border: none; /* Remove all borders */
    border-bottom: 2px solid #222; /* Only the bottom line */
    background-color: transparent; /* No background */
    font-size: 1rem;
    color: #222;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
    margin-top: 20px;
  }

  /* Change bottom line color on focus */
  .input-field:focus {
    border-bottom-color: #222; /* Blue bottom line on focus */
  }

  /* Hide placeholder on focus for better floating label experience */
  .input-field:focus::placeholder {
    color: transparent;
  }

  /* The Label for Floating Effect */
  .input-label {
    position: absolute;
    left: 0;
    top: 20px; /* Aligns with input text */
    color: #222;
    font-size: 18px;
    pointer-events: none; /* Allows clicks to pass through to the input */
    transition:
      top 0.3s ease,
      font-size 0.3s ease,
      color 0.3s ease; /* Smooth transition */
  }

  .input-field:focus + .input-label,
  .input-field:not(:placeholder-shown) + .input-label {
    top: 0px; /* Move label up */
    font-size: 0.8rem; /* Make label smaller */
    color: #222; /* Change label color */
  }

  /* Prevent autocomplete background from interfering with transparency */
  .input-field:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Forces a white background */
    -webkit-text-fill-color: #333 !important; /* Ensures text color is still visible */
    transition: background-color 50000s ease-in-out 0s; /* Delay the white background to hide it */
  }

  .venues-section {
    width: 90%;
    margin-inline: auto;
    position: relative;
  }
  .venue-image {
    width: 100%;
    height: 800px;
    background: url('/assets/images/color-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    opacity: 1;
    transition: all 600ms ease-in-out;
  }
  .venue-image.fade-out {
    opacity: 0;
  }

  .venue-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }
  .venues-container {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 800px;
    border-radius: 20px;
    background-color: #ffffff40;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
  }
  .venue-description {
    width: 35%;

    display: flex;
    flex-direction: column;
    margin-block: 80px;
    margin-right: 70px;
  }
  .venues-container h3 {
    font-size: 60px;
    line-height: 60px;
  }
  .venues-container p {
    font-size: 19px;
    margin-top: 30px;
  }
  .venue-bubbles {
    display: flex;
    margin-top: auto;
    display: none;
  }
  .venue-bubble {
    height: 40px;
    border: solid 2px #222;
    border-radius: 22.5px;
    padding-inline: 12px;
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
  }
  .moving-boxes-container {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    align-items: start;
    justify-content: start;

    width: 50%;
    max-width: 800px; /* Limit overall width */
    scrollbar-width: none;
  }
  .moving-boxes-container::-webkit-scrollbar {
    display: none;
  }
  .venue-box-row {
    display: flex;
    height: 250px;
    width: 100%;
    margin-top: 12px;
  }
  .box-spacer {
    width: 12px;
    height: 1px;
    flex: none;
  }
  .vanue-item {
    width: 50%;
    height: 250px;
    background-color: #ffffff6f;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin-top: 15px;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .vanue-item.active-venue p {
    opacity: 1;
  }
  .vanue-item.active-venue b {
    opacity: 1;
  }
  .vanue-item b {
    font-weight: 700px;
    letter-spacing: -0.05em;
    font-size: 20px;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
  }
  .vanue-item p {
    font-weight: 700px;
    letter-spacing: -0.03em;
    font-size: 14px;
    margin-top: 10px;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
  }
  .vanue-item.active-venue .bubble-dark {
    opacity: 1;
  }
  .bubble-dark {
    border: 2px solid #222;
    width: fit-content;
    padding: 15px;
    padding-block: 5px;
    border-radius: 20px;
    margin-top: auto;
    opacity: 0.15;
    transition: all 600ms ease-in-out;
  }
  .vanue-item.right-vanue {
    margin-top: 100px;
  }

  .timeline-floating-box {
    height: 50px;

    font-size: 23px;
  }

  .timeline-container p {
    position: absolute;
    right: 7%;
    bottom: 0%;
    font-size: 19px;
    font-weight: 700;
    width: 50%;
  }

  .hall-of-fame-section {
    width: 90%;
  }

  .fame-line {
    height: 450px;
  }
  .fame-box h3 {
    font-size: 21px;
  }
  .fame-box p {
    font-size: 16px;
  }
  .fame-box h4 {
    font-size: 30px;
  }
  .fame-box span {
    font-size: 45px;
  }

  .golden-ratio-section {
    width: 90%;
    max-width: 1100px;
  }

  .numbers-section {
    width: 85%;
    margin-inline: auto;
    margin-top: 50px;
  }
  .numbers-box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
  .number-box {
    background-color: #f4f4f4;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    height: 270px;
    width: 200px;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .number-box h3 {
    font-size: 20px;
  }
  .number-box b {
    font-size: 60px;
    font-weight: 600;
  }

  .service-boxes-container {
    display: flex;
    margin-top: 50px;
  }
  .service-box {
    height: 380px;
    width: 100%;
    border-radius: 15px;
    margin-left: 10px;
  }

  .service-background {
    height: 330px;
  }

  .service-label-container {
    font-size: 17px;
  }
  .service-header {
    font-size: 30px;
    font-weight: 700;
    padding: 10px;
  }
  .service-logo {
    margin-top: 10px;
    height: 50px;
    width: 50px;

    margin-left: 10px;
  }

  .blog-posts-footer-container {
    width: 95%;
  }

  .blog-description-container h3 {
    font-size: 26px;
    line-height: 40px;
  }
  .blog-description-container p {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 18px;
  }
  .dark-bubble {
    font-size: 14px;
  }
  .arrow-NE {
    height: 28px;
    width: 28px;
  }
  .arrow-NE-dark {
    height: 28px;
    width: 28px;
  }

  .footer-column h4 {
    font-size: 22px;
  }
  .footer-column a {
    font-size: 19px;
  }

  .footer b {
    margin-top: 100px;
    font-size: 16px;
  }

  .study-boxes-container {
    width: 95%;
  }
  .study-box {
    height: 340px;
  }
  .study-box:nth-child(4) {
    display: none;
  }

  .study-background {
    height: 340px;
    width: 100%;
  }

  .study-box-hovered-overlay {
    font-size: 18px;
  }

  .study-label-container {
    font-size: 20px;
  }

  .spacer {
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .horizontal-scroll {
    position: relative;
    height: 100vh;
    width: 100%;
    /* overflow-x: hidden; */
  }

  .scroll-track {
    display: flex;
    height: 100vh;
    width: max-content;
    position: sticky;
    top: 0;
  }

  .spaceholder-timeline {
    width: 600px;
    height: 1px;
  }

  .panel {
    width: 600px;
  }
  .panel h3 {
    font-size: 26px;
    margin-top: 20px;
  }

  .scrolling-boxes-image-container {
    height: 450px;
    width: 600px;
  }
  .scrolling-box-bubble {
    height: 35px;
    font-size: 20px;
  }

  .scrolling-box-label-container {
    height: 90px;
    border-radius: 30px;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 20px;
    margin-top: auto;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(13.149999618530273px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 700;
    transition: all 0.2s linear;
    padding: 20px;
  }

  .image-text-section {
    width: 90%;
    margin-inline: auto;
    margin-top: 70px;
  }
  .image-text-section h2 {
    margin-bottom: 40px;
    margin-left: 100px;
  }

  .image-text-container {
    display: flex;
    width: 100%;

    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
  }
  .image-text-container:first-child {
    margin-top: 40px;
  }

  .image-container {
    width: 420px;
    height: 530px;
  }
  .image-cover {
    position: absolute;
    opacity: 1;
    width: 420px;
    height: 530px;
  }
  .image-cover.appear {
    opacity: 0;
  }
  .image-text-container img {
    width: 420px;
    height: 530px;
  }

  .text-description {
    margin-inline: 80px;
    max-width: 450px;
  }
  .text-description h4 {
    font-size: 28px;
    line-height: 32px;
  }

  .text-description b {
    margin-top: 5px;
    font-size: 25px;
  }
  .text-description p {
    font-size: 18px;
    font-weight: 700;
  }
  .faq-question-container b {
    height: 0px;
    color: white;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    transition:
      all 300ms ease-in-out,
      color 300ms 0ms ease-in-out;
  }
  .faq-question-container.clicked b {
    height: 100px;
    color: #222;
    transition:
      all 600ms ease-in-out,
      color 600ms 400ms ease-in-out;
  }

  .faq-category {
    width: 280px;
    font-size: 22px;
  }

  .maps-section {
    width: 85%;
    margin-inline: auto;
    margin-top: 60px;
    margin-bottom: 100px;
  }
  .map-frame {
    width: 100%;
    height: 500px;
    margin-top: 50px;
  }
  .popup-section {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: #ffffffaa;
    backdrop-filter: blur(13px);
    transition: all 0.3s 0.6s ease-in-out;
    opacity: 0;
    display: none;
  }
  .popup-section.active-popup {
    transition: all 0.6s ease-in-out;
    opacity: 1;
  }
  .popup-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    opacity: 1;
  }

  .popup-title-x-row {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.3s 0.6s ease-in-out;
  }
  .popup-title-x-row.active-popup {
    opacity: 1;
    transition: all 0.6s 0.6s ease-in-out;
  }
  #popup-title {
    width: 90%;
  }

  .popup-title-x-row b {
    font-size: 40px;
  }
  .popup-images-description {
    display: flex;
    align-items: center;
    margin-top: 50px;
  }

  .popup-images {
    height: 48vw;
    background-color: #ffffffaa;
    width: 48%;
    width: 0px;
    flex: none;
    margin-right: 30px;
    margin-right: 0px;
    opacity: 0;
    transition: all 0.3s 0.3s ease-in-out;
  }
  .popup-images.active-popup {
    opacity: 1;
    transition: all 0.6s 1.2s ease-in-out;
  }
  .popup-description {
    opacity: 0;
    width: 48%;
    transition: all 0.3s 0s ease-in-out;
  }
  .popup-description.active-popup {
    opacity: 1;
    transition: all 0.6s 1.8s ease-in-out;
  }
  .popup-description p {
    font-size: 20px;
  }
}

/* ── Language Toggle Button ── */
.lang-toggle {
  /* background: rgba(255, 255, 255, 0.25); */
  background-color: transparent;
  /* border: 1.5px solid rgba(34, 34, 34, 0.18); */
  border: none;
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #222;
  font-family: 'Satoshi', serif;
  letter-spacing: 0;
  transition:
    background 0.3s,
    border-color 0.3s;
  margin-inline-start: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.lang-toggle:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(34, 34, 34, 0.35);
}

/* ── Arabic font ── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

[lang='ar'] * {
  font-family: 'Cairo', sans-serif;
}

/* ── RTL layout overrides ── */
[dir='rtl'] .navigation-bar {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .bolt-logo {
  margin-left: auto;
  margin-right: 100px;
}
[dir='rtl'] .navigation-buttons-holder {
  /* justify-content: flex-start; */
}
[dir='rtl'] .bolt-cameleon {
  margin-left: 50px;
  margin-right: auto;
}
[dir='rtl'] .intro-section h1 {
  left: unset;
  right: 100px;
}
[dir='rtl'] .reverse-image-text-section {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .heading-side-text-row-column {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .stats-section {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .service-boxes-container {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .top-three-row {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .bottom-two-row {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .box-horizontal {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .doctor-timeline-section {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .timeline-right-container {
  border-left: none;
  border-right: 2px solid #e8e8e8;
  padding-left: 0;
  /* padding-right: 30px; */
}
[dir='rtl'] .timeline-blip {
  left: unset;
  right: -5px;
}
[dir='rtl'] .schedule-section {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .blog-posts-footer-container {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .blog-tags-arrow-row {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .arrow-NE-dark {
  transform: scaleX(-1);
  margin-right: auto;
  margin-left: 5px;
}
[dir='rtl'] .footer-columns-row {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .footer-column {
  text-align: right;
}
[dir='rtl'] .text-logo-row {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .faq-q-arrow-row {
  /* flex-direction: row-reverse; */
}
[dir='rtl'] .service-bubbles-arrow-row {
  /* align-items: flex-end; */
}
[dir='rtl'] .navigation-buttons-holder a::after {
  transform-origin: right;
}
[dir='rtl'] .blog-description-container {
  text-align: right;
}
[dir='rtl'] .blog-page {
  text-align: right;
}
[dir='rtl'] .stat-box {
  /* text-align: center; */
}
[dir='rtl'] .day-hour-row {
  flex-direction: row-reverse;
}
[dir='rtl'] .intro-section h1 {
  direction: rtl !important;
}

@media (max-width: 1023px) {
  [dir='rtl'] .bolt-logo {
    margin-right: 10px;
    margin-left: auto;
  }
  [dir='rtl'] .bolt-cameleon {
    margin-left: 10px;
    margin-right: auto;
  }
  [dir='rtl'] .intro-section h1 {
    right: 20px;
    left: unset;
    line-height: 65px;
  }
}
.bolt-cameleon {
  filter: brightness(0) !important;
}
.langBtn{
  margin: 15px 0;
}