@import url("https://fonts.googleapis.com/css?family=Merriweather|Raleway");

:root {
  --red: red;
  --pink: pink;
  --green: #20b1a3;
}

*,
*:before,
*:after {
  /* margin: 0;
  padding: 0; */
  word-break: break-all;
  box-sizing: border-box;
  text-decoration: none;
}

html,
body {
  display: grid;
  margin: 0;
  padding: 0;
  font-family: monospace;
  scroll-behavior: smooth;
  background-image: url("images/background-main.jpg");
  background-size: cover;
  height: 100%;

  overflow-x: hidden;
}

.navbar {
  background-image: url("images/navbar-bg-10.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 0;
  /* height: 22vh; */
  height: 231px;
  /* width: 100vw; */
  align-items: end;
  overflow: hidden;
}

.train-nav-menu {
  position: relative;
  display: flex;
  margin-right: 100px;
  list-style-type: none;
  flex-direction: row;
  /* top: 4px; */
  /* justify-content: center;
  align-items: end; */
  -webkit-animation: voyage 20s linear infinite;
  animation: voyage 20s linear infinite;
  animation-duration: 9s;
  animation-iteration-count: 1;
}

@-webkit-keyframes voyage {
  0% {
    right: -1500px;
  }
  100% {
    right: 0px;
  }
}
@keyframes voyage {
  0% {
    right: -1500px;
  }
  100% {
    right: 0px;
  }
}

/* ----- Main Car ----- */

.main-car {
  width: 331px;
  height: 231px;
  animation: train-shake 2s infinite linear;
  animation-delay: 0s;
  animation-duration: 0.9s;
  animation-iteration-count: 10;
}

.main-car-top {
  position: relative;
  background: url("images/main-car-top.png") center/cover no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 331px;
  height: 131px;
  top: 16px;
}

.main-car-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/main-car-top-hover.png") center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: opacity;
  pointer-events: none;
}

.main-car-top:hover::after {
  opacity: 1;
}

.main-car-bottom {
  position: relative;
  background-image: url("images/main-car-bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 331px;
  height: 100px;
  top: 16px;
}

.main-car-wheels {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  width: 250px;
  margin-left: -7px;
  top: 60px;
  left: 70px;
}
.main-car-big-wheels {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-left: 4px;
}
.main-car-big-wheel-1 {
  /* animation: rotate 2s linear infinite; */
  position: relative;
  background-image: url("images/wheel-big.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 71px;
  height: 71px;
  top: -47px;
  animation: main-car-big-wheel 1.8s infinite linear;
  animation-duration: 1.8s;
  animation-iteration-count: 5;
}
.main-car-big-wheel-2 {
  position: relative;
  background-image: url("images/wheel-big.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 8px;
  width: 71px;
  height: 71px;
  top: -47px;
  animation: main-car-big-wheel 1.8s infinite linear;
  animation-duration: 1.8s;
  animation-iteration-count: 5;
}
@keyframes main-car-big-wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.main-car-small-wheels {
  display: flex;
  flex-direction: row;
}
.main-car-small-wheel-1 {
  position: relative;
  background-image: url("images/wheel-sml.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  top: -47px;
  animation: main-car-small-wheel 0.9s infinite linear;
  animation-duration: 0.9s;
  animation-iteration-count: 10;
}
.main-car-small-wheel-2 {
  position: relative;
  background-image: url("images/wheel-sml.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-inline: 3px 4px;
  width: 30px;
  height: 30px;
  top: -47px;
  animation: main-car-small-wheel 0.9s infinite linear;
  animation-duration: 0.9s;
  animation-iteration-count: 10;
}
.main-car-small-wheel-3 {
  position: relative;
  background-image: url("images/wheel-sml.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  top: -47px;
  animation: main-car-small-wheel 0.9s infinite linear;
  animation-duration: 0.9s;
  animation-iteration-count: 10;
}
@keyframes main-car-small-wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.wheel-joint {
  position: relative;
  background-image: url("images/wheel-joint.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 158px;
  height: 33px;
  top: -47px;
  left: 122px;
}

.smoke {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  height: 1.4rem;
  position: absolute;
  top: 40px;
  left: 100px;
  width: 0.8rem;
  z-index: -1;
  animation: move-smoke 0.7s linear infinite;
  animation-duration: 0.9s;
  animation-iteration-count: 10;
}
.smoke-2 {
  animation-delay: 0.1s;
  animation-duration: 0.9s;
  animation-iteration-count: 10;
}
.smoke-3 {
  animation-delay: 0.2s;
  animation-duration: 0.9s;
  animation-iteration-count: 10;
}
.smoke-4 {
  animation-delay: 0s;
  animation-duration: 0.9s;
  animation-iteration-count: 10;
}
@keyframes move-smoke {
  0% {
    filter: blur(0);
    opacity: 1;
  }
  50% {
    filter: blur(0.2rem);
    opacity: 0.6;
    transform: translate(0, -3rem) scale(2);
  }
  100% {
    filter: blur(0.3rem);
    opacity: 0;
    transform: translate(2.5rem, -6rem) scale(3);
  }
}

/* ----- Car 1 ----- */

.car-dino-1-top {
  position: relative;
  width: 152px;
  height: 151px;
  top: 14px;

  /* IMPORTANT: no background on the element itself */
  background: none !important;

  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;

  transition: background 0s, opacity 0.25s ease;
}

/* Base image layer */
.car-dino-1-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-1-top.png") center/cover no-repeat;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover image layer */
.car-dino-1-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-1-top-hover.png") center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Cross-fade: base out, hover in */
.car-dino-1-top:hover::before {
  opacity: 0;
  transition: opacity 0.01s ease;
}
.car-dino-1-top:hover::after {
  opacity: 1;
}

/* Link sits above both layers and animates in smoothly */
.car-dino-1-top .nav-link-dino-1 {
  position: relative;
  z-index: 2; /* above ::before/::after */
  top: 102px;
  /* opacity: 0; */
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.car-dino-1-top:hover .nav-link-dino-1 {
  opacity: 1;
  top: 55px;
  transform: translateY(-12px);
}

.car-dino-1-bottom {
  position: relative;
  background-image: url("images/car-1-bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 152px;
  height: 80px;
  top: 14px;
  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;
}

.car-1-wheels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-left: 9px;
}
.car-1-wheel-1 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  top: 31px;
  animation: car-1-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
.car-1-wheel-2 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 8px;
  width: 35px;
  height: 35px;
  top: 31px;
  left: -9px;
  animation: car-1-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
@keyframes car-1-wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ----- Car 2 ----- */

.car-dino-2-top {
  position: relative;
  width: 152px;
  height: 151px;
  top: 14px;

  /* IMPORTANT: no background on the element itself */
  background: none !important;

  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;

  transition: background 0s, opacity 0.25s ease;
}

/* Base image layer */
.car-dino-2-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-2-top.png") center/cover no-repeat;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover image layer */
.car-dino-2-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-2-top-hover.png") center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Cross-fade: base out, hover in */
.car-dino-2-top:hover::before {
  opacity: 0;
  transition: opacity 0.01s ease;
}
.car-dino-2-top:hover::after {
  opacity: 1;
}

/* Link sits above both layers and animates in smoothly */
.car-dino-2-top .nav-link-dino-2 {
  position: relative;
  z-index: 2; /* above ::before/::after */
  top: 102px;
  /* opacity: 0; */
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.car-dino-2-top:hover .nav-link-dino-2 {
  opacity: 1;
  top: 55px;
  transform: translateY(-12px);
}

.car-dino-2-bottom {
  position: relative;
  background-image: url("images/car-2-bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 152px;
  height: 80px;
  top: 14px;
  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;
}

.car-2-wheels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-left: 9px;
}
.car-2-wheel-1 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  top: 31px;
  animation: car-2-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
.car-2-wheel-2 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 8px;
  width: 35px;
  height: 35px;
  top: 31px;
  left: -9px;
  animation: car-2-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
@keyframes car-2-wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ----- Car 3 ----- */

.car-dino-3-top {
  position: relative;
  width: 152px;
  height: 151px;
  top: 14px;

  /* IMPORTANT: no background on the element itself */
  background: none !important;

  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;

  transition: background 0s, opacity 0.25s ease;
}

/* Base image layer */
.car-dino-3-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-3-top.png") center/cover no-repeat;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover image layer */
.car-dino-3-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-3-top-hover.png") center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Cross-fade: base out, hover in */
.car-dino-3-top:hover::before {
  opacity: 0;
  transition: opacity 0.01s ease;
}
.car-dino-3-top:hover::after {
  opacity: 1;
}

/* Link sits above both layers and animates in smoothly */
.car-dino-3-top .nav-link-dino-3 {
  position: relative;
  z-index: 2; /* above ::before/::after */
  top: 102px;
  /* opacity: 0; */
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.car-dino-3-top:hover .nav-link-dino-3 {
  opacity: 1;
  top: 55px;
  transform: translateY(-12px);
}

.car-dino-3-bottom {
  position: relative;
  background-image: url("images/car-3-bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 152px;
  height: 80px;
  top: 14px;
  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;
}

.car-3-wheels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-left: 9px;
}
.car-3-wheel-1 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  top: 31px;
  left: 6px;
  animation: car-3-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
.car-3-wheel-2 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 8px;
  width: 35px;
  height: 35px;
  top: 31px;
  left: -4px;
  animation: car-3-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
@keyframes car-3-wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ----- Car 4 ----- */

.car-dino-4-top {
  position: relative;
  width: 152px;
  height: 151px;
  top: 14px;

  /* IMPORTANT: no background on the element itself */
  background: none !important;

  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;

  transition: background 0s, opacity 0.25s ease;
}

/* Base image layer */
.car-dino-4-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-4-top.png") center/cover no-repeat;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover image layer */
.car-dino-4-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-4-top-hover.png") center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Cross-fade: base out, hover in */
.car-dino-4-top:hover::before {
  opacity: 0;
  transition: opacity 0.01s ease;
}
.car-dino-4-top:hover::after {
  opacity: 1;
}

/* Link sits above both layers and animates in smoothly */
.car-dino-4-top .nav-link-dino-4 {
  position: relative;
  z-index: 2; /* above ::before/::after */
  top: 104px;
  /* opacity: 0; */
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.car-dino-4-top:hover .nav-link-dino-4 {
  opacity: 1;
  top: 57px;
  transform: translateY(-12px);
}

.car-dino-4-bottom {
  position: relative;
  background-image: url("images/car-4-bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 152px;
  height: 80px;
  top: 14px;
  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;
}

.car-4-wheels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-left: 9px;
}
.car-4-wheel-1 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  top: 31px;
  left: 6px;
  animation: car-4-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
.car-4-wheel-2 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 8px;
  width: 35px;
  height: 35px;
  top: 31px;
  left: -2px;
  animation: car-4-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
@keyframes car-4-wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ----- Car 5 ----- */

.car-dino-5-top {
  position: relative;
  width: 152px;
  height: 151px;
  top: 14px;

  /* IMPORTANT: no background on the element itself */
  background: none !important;

  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;

  transition: background 0s, opacity 0.25s ease;
}

/* Base image layer */
.car-dino-5-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-5-top.png") center/cover no-repeat;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover image layer */
.car-dino-5-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-5-top-hover.png") center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Cross-fade: base out, hover in */
.car-dino-5-top:hover::before {
  opacity: 0;
  transition: opacity 0.01s ease;
}
.car-dino-5-top:hover::after {
  opacity: 1;
}

/* Link sits above both layers and animates in smoothly */
.car-dino-5-top .nav-link-dino-5 {
  position: relative;
  z-index: 2; /* above ::before/::after */
  top: 104px;
  /* opacity: 0; */
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.car-dino-5-top:hover .nav-link-dino-5 {
  opacity: 1;
  top: 53px;
  transform: translateY(-12px);
}

.car-dino-5-bottom {
  position: relative;
  background-image: url("images/car-5-bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 152px;
  height: 80px;
  top: 14px;
  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;
}

.car-5-wheels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-left: 9px;
}
.car-5-wheel-1 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  top: 31px;
  left: 12px;
  animation: car-5-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
.car-5-wheel-2 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 8px;
  width: 35px;
  height: 35px;
  top: 31px;
  left: 2px;
  animation: car-5-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
@keyframes car-5-wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ----- Car 6 ----- */

.car-dino-6-top {
  position: relative;
  width: 152px;
  height: 151px;
  top: 14px;

  /* IMPORTANT: no background on the element itself */
  background: none !important;

  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;

  transition: background 0s, opacity 0.25s ease;
}

/* Base image layer */
.car-dino-6-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-6-top.png") center/cover no-repeat;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover image layer */
.car-dino-6-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/car-6-top-hover.png") center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

/* Cross-fade: base out, hover in */
.car-dino-6-top:hover::before {
  opacity: 0;
  transition: opacity 0.01s ease;
}
.car-dino-6-top:hover::after {
  opacity: 1;
}

/* Link sits above both layers and animates in smoothly */
.car-dino-6-top .nav-link-dino-6 {
  position: relative;
  z-index: 2; /* above ::before/::after */
  top: 104px;
  /* opacity: 0; */
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.car-dino-6-top:hover .nav-link-dino-6 {
  opacity: 1;
  top: 53px;
  transform: translateY(-12px);
}

.car-dino-6-bottom {
  position: relative;
  background-image: url("images/car-6-bottom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 152px;
  height: 80px;
  top: 14px;
  /*  shake animation  */
  animation: train-shake 2s infinite linear;
  animation-delay: 0.2s;
  animation-duration: 2s;
  animation-iteration-count: 4;
}

.car-6-wheels {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-left: 9px;
}
.car-6-wheel-1 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  top: 31px;
  left: 15px;
  animation: car-6-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
.car-6-wheel-2 {
  position: relative;
  background-image: url("images/car-wheel.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 8px;
  width: 35px;
  height: 35px;
  top: 31px;
  left: 2px;
  animation: car-6-wheel 1s infinite linear;
  animation-duration: 1s;
  animation-iteration-count: 9;
}
@keyframes car-6-wheel {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes train-shake {
  0% {
    transform: translate(0.09rem, 0.09rem);
  }
  10% {
    transform: translate(-0.09rem, 0rem);
  }
  20% {
    transform: translate(0rem, -0.09rem);
  }
  30% {
    transform: translate(0.09rem, -0.09rem);
  }
  40% {
    transform: translate(-0.09rem, 0rem);
  }
  50% {
    transform: translate(0rem, -0.09rem);
  }
  60% {
    transform: translate(-0.09rem, 0rem);
  }
  70% {
    transform: translate(0rem, -0.09rem);
  }
  80% {
    transform: translate(-0.09rem, 0.09rem);
  }
  90% {
    transform: translate(-0.09rem, -0.09rem);
  }
  100% {
    transform: translate(0.09rem, 0.09rem);
  }
}

/* --- Link a - Train Car --- */

.car-dino-1-top a {
  position: relative;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-shadow: 5px 5px 15px #00000044;
  top: 102px;
  left: 38px;
  font-weight: bold;
  font-size: 22px;
  color: rgba(85, 26, 139, 0.87);
  transition-delay: 0.3s;
}

.car-dino-2-top a {
  position: relative;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-shadow: 5px 5px 15px #00000044;
  top: 103px;
  left: 40px;
  font-weight: bold;
  font-size: 22px;
  color: rgba(85, 26, 139, 0.87);
  transition-delay: 0.3s;
}

.car-dino-3-top a {
  position: relative;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-shadow: 5px 5px 15px #00000044;
  top: 103px;
  left: 33px;
  font-weight: bold;
  font-size: 22px;
  color: rgba(85, 26, 139, 0.87);
  transition-delay: 0.3s;
}

.car-dino-4-top a {
  position: relative;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-shadow: 5px 5px 15px #00000044;
  top: 104px;
  left: 54px;
  font-weight: bold;
  font-size: 22px;
  color: rgba(85, 26, 139, 0.87);
  transition-delay: 0.3s;
}

.car-dino-5-top a {
  position: relative;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-shadow: 5px 5px 15px #00000044;
  top: 105px;
  left: 62px;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 1px;
  color: rgba(85, 26, 139, 0.87);
  transition-delay: 0.3s;
}

.car-dino-6-top a {
  position: relative;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-shadow: 5px 5px 15px #00000044;
  top: 105px;
  left: 43px;
  font-weight: bold;
  font-size: 20px;
  color: rgba(85, 26, 139, 0.88);
  transition-delay: 0.3s;
}

/* -------------- */

.logo {
  position: relative;
  /* align-self: center; */
  top: -98px;
  left: 110px;
}

/* -------------- */

.menu-uderline {
  width: 100%;
  height: 10px;
  /* background: #1badc7; */
  background: #60a7ff;
}

/* ------------------------------------- */

/* =========================================== */
/* ==                                       == */
/* ==             Language Modal            == */
/* ==                                       == */
/* =========================================== */

/* ============================ LANGUAGE MODAL =========================== */
/* Image-only parchment modal that opens via :target. No JS required.      */
/* Content is styled like ink on an antique scroll.                        */

/* ===================== LANGUAGE MODAL — FULL CSS ===================== */
/* Image-only parchment modal that opens via :target. No JS required.   */

/* ===================== LANGUAGE MODAL — FULL CSS ===================== */
/* Image-only parchment modal that opens via :target. No JS required.   */

/* ---------- Base modal & overlay ---------- */
.kp-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  pointer-events: none; /* disabled until :target */
}

.kp-modal__overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* no tint so PNG “absorbs” page bg */
  opacity: 0;
  transition: opacity 450ms ease;
  z-index: 0;
  pointer-events: none; /* enabled when :target */
}

/* ---------- Dialog (the parchment image) ---------- */
.kp-modal__dialog {
  position: relative;
  z-index: 1; /* above overlay */

  /* Ensure the parchment can show things that hang outside it */
  overflow: visible;
  /* Safe-area inside parchment (≈80% content height by default) */
  --scroll-top: 10%;
  --scroll-bottom: 10%;
  --side: 6%;

  /* PNG background — UPDATE PATH IF NEEDED */
  background-image: url("/images/language-menu-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; /* show full PNG */
  background-color: transparent;

  /* No visible box frame */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  padding: 0;

  /* Match PNG proportions (change if your PNG differs) */
  aspect-ratio: 641 / 800;

  /* Desktop default: size by height (bands below will adjust width) */
  height: 90vh;
  width: auto;
  max-height: 90vh;
  max-width: 90vw;

  /* Animation + initial hidden state */
  transform: scale(0.86);
  opacity: 0;
  visibility: hidden;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 600ms;

  isolation: isolate;
  overflow: visible;

  /* Optional: shadow that follows PNG alpha */
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.18));
}

/* Open state (:target) */
.kp-modal:target {
  pointer-events: auto;
}
.kp-modal:target .kp-modal__overlay {
  opacity: 1;
  pointer-events: auto; /* click background to close */
}
.kp-modal:target .kp-modal__dialog {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform 1600ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}

/* ------------------------------------------------------------------------ */
/* Wax-seal close button (floats outside top-right corner of the parchment) */
/* ------------------------------------------------------------------------ */
/* ======================= Wax Seal Close ======================= */
/* Let the seal sit slightly outside the parchment */
/* Let the seal hang outside the parchment */
.kp-modal__dialog {
  overflow: visible;
}

/* Base close button: size/position/interaction + gradient fallback */
.kp-modal__close {
  position: absolute;
  top: -24px;
  right: -24px;
  z-index: 5;

  /* one knob for size across breakpoints */
  --seal-size: clamp(52px, 6vw, 76px);
  width: var(--seal-size);
  height: var(--seal-size);

  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  color: transparent;

  /* fallback wax if image can’t load */
  background: radial-gradient(
      120% 120% at 30% 25%,
      #a32525 0%,
      #7e1717 55%,
      #5a1010 100%
    ),
    radial-gradient(
      80% 80% at 65% 70%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.34),
    inset 0 10px 14px rgba(255, 255, 255, 0.08),
    inset 0 -14px 18px rgba(0, 0, 0, 0.32);

  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Preferred: your PNG with transparent background */
.kp-modal__close.seal--image {
  background-image: url("images/red-wax-seal.png");
  background-size: contain; /* keep the image edge crisp */
  background-repeat: no-repeat;
  background-position: center;
  /* (we keep the same size/pos from .kp-modal__close) */
}

/* Hover / active */
.kp-modal__close:hover {
  transform: scale(1.05) rotate(-2deg);
  filter: brightness(1.08);
}
.kp-modal__close:active {
  transform: scale(0.96) rotate(1deg);
  filter: brightness(0.92);
}

/* Accessible focus ring */
.kp-modal__close:focus-visible {
  outline: 3px solid rgba(214, 184, 110, 0.9);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(60, 40, 10, 0.25), 0 12px 22px rgba(0, 0, 0, 0.34);
}

/* Small phones: tuck and size down */
@media (max-width: 549.98px) {
  .kp-modal__close {
    top: -14px;
    right: -14px;
    --seal-size: 46px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kp-modal__close {
    transition: none;
  }
}

/* ---------- Safe “writing area” on parchment ---------- */
.kp-modal__content.ancient {
  position: absolute;
  inset: var(--scroll-top) var(--side) var(--scroll-bottom) var(--side);
  box-sizing: border-box;
  max-width: 100%;
  max-height: 70%;
  /* The content box itself does not scroll on mobile; the list will */
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-content: start; /* title sits slightly higher */
  gap: clamp(14px, 2.2vw, 24px);
  text-align: center;
}

/* ---------- Ancient typography ---------- */
.ancient__title {
  margin: 0 0 clamp(10px, 1.4vw, 18px);
  font-family: "Cinzel Decorative", serif; /* include in <head> */
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  color: #5a3e1b;
  letter-spacing: 0.5px;
  position: relative;
  display: inline-block;
  padding: 4px 18px 10px;
  text-shadow: 0 1px 0 #f7ead0, 0 2px 2px rgba(0, 0, 0, 0.25);
}
.ancient__flare {
  opacity: 0.9;
  font-size: 0.85em;
  padding: 0 0.15em;
}
.ancient__title::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #8c6a2a 25%,
    #d7b86a 50%,
    #8c6a2a 75%,
    transparent 100%
  );
  box-shadow: 0 1px 0 rgba(255, 248, 214, 0.6);
}

/* Language list — multi-column on desktop, single column on mobile */
.ancient__list {
  list-style: none;
  padding: 0;
  margin: 0;

  /* Desktop default will be set in media queries; start simple here */
  columns: 1;
  column-gap: clamp(14px, 2vw, 22px);

  max-height: 100%;
  /* Mobile ranges will manage overflow; desktop often not needed */
}

.ancient__list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 6px 0;
}

/* Global parchment scrollbar for language modal */
.ancient__list::-webkit-scrollbar {
  width: 6px; /* you can set 6px if you want it thinner */
}

.ancient__list::-webkit-scrollbar-track {
  background: rgba(218, 200, 168, 0.6); /* parchment-like track */
  border-radius: 8px;
}

.ancient__list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d6c6a1, #b79f78);
  border-radius: 8px;
  border: 1px solid #a58c63;
}

.ancient__list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #cbb68a, #a58c63);
}

/* “Ink on paper” links — no buttons, just text */
.ancient__link {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 4px 0;
  text-decoration: none;
  text-align: center;

  font-family: "Uncial Antiqua", "Cinzel", serif; /* include in <head> */
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: #4a2e0f;
  text-shadow: 0 1px 0 #f9f1dd, 0 2px 2px rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease, transform 0.15s ease;
}
.ancient__link:hover {
  color: #7a4c19;
  transform: translateY(-1px);
}
.ancient__bullet {
  font-size: 0.85em;
  color: #3a240d;
  opacity: 0.85;
  margin-right: 0.4em;
  transform: translateY(-1px);
}
.ancient__link[lang="he"] {
  letter-spacing: 0;
  direction: rtl;
}
.ancient__link[lang="ja"] {
  letter-spacing: 0;
}

/* Lock page scroll while modal is open (modern browsers) */
html:has(#lang-modal:target) {
  overflow: hidden;
}

/* ===================== WIDTH BREAKPOINTS (ordered) ===================== */

/* ===================== WIDTH BREAKPOINTS ===================== */

/* 1) Phones (<= 767.98px) — One column, scrollable */
@media (max-width: 767.98px) {
  .kp-modal__dialog {
    width: 90vw;
    height: auto;
    max-height: 90vh;
  }

  .ancient__list {
    columns: 1;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .ancient__list::-webkit-scrollbar {
    display: block;
    width: 6px;
  }
  .ancient__list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }
}

/* 2) Small tablets (768–799.98px) — Still one column, scrollable */
@media (min-width: 768px) and (max-width: 799.98px) {
  .kp-modal__dialog {
    width: 90vw;
    height: auto;
    max-height: 90vh;
  }

  .ancient__list {
    columns: 1;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }

  .ancient__list::-webkit-scrollbar {
    display: block;
    width: 6px;
  }
  .ancient__list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }
}

/* 3) Medium screens (800–1199.98px) — Two columns, auto scroll */
@media (min-width: 800px) and (max-width: 1199.98px) {
  .kp-modal__dialog {
    width: clamp(700px, 68vw, 1000px);
    height: auto;
    max-height: 90vh;
    --scroll-top: 14%;
    --scroll-bottom: 14%;
    --side: 7%;
  }

  .kp-modal__content.ancient {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;

    max-height: 60%;
    overflow: hidden;
    padding: 0 clamp(6px, 0.9vw, 12px);
  }

  .ancient__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 12px 20px;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .ancient__list::-webkit-scrollbar {
    width: 6px;
  }
  .ancient__list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
  }

  .ancient__title {
    margin-top: clamp(4px, 0.6vw, 10px);
    margin-bottom: clamp(12px, 1.2vw, 18px);
  }
}

/* 4) Large desktops (>=1200px) — Two columns, wider gap */
@media (min-width: 1200px) {
  .kp-modal__dialog {
    width: clamp(820px, 62vw, 1100px);
    height: auto;
    max-height: 90vh;
    --scroll-top: 14%;
    --scroll-bottom: 14%;
    --side: 7%;
  }

  .kp-modal__content.ancient {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    max-height: 70%;
    overflow: hidden;
    padding: 0 clamp(6px, 0.9vw, 12px);
  }

  .ancient__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(270px, 1fr));
    gap: 12px 20px;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .ancient__list::-webkit-scrollbar {
    width: 6px;
  }
  .ancient__list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
  }
}

/* ========= Modal list: force vertical scroll when needed (desktop too) ========= */
@media (min-width: 800px) {
  .kp-modal .ancient__list {
    /* ensure grid 2-col layout and allow vertical scrolling */
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px 18px;
    height: 100%;
    max-height: 100%;
    overflow-y: auto; /* show bar when content is tall */
    overflow-x: hidden; /* never sideways */
    -webkit-mask-image: none; /* undo any fade mask that hides bar */
    mask-image: none;
  }
}

/* ========= Parchment-style scrollbar (scoped to the modal list) ========= */
.kp-modal .ancient__list {
  scrollbar-width: thin; /* Firefox */
  /* Firefox: thumb | track */
  scrollbar-color: rgba(139, 105, 44, 0.55) rgba(231, 210, 170, 0.65);
}

/* Chrome/Safari/Edge */
.kp-modal .ancient__list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: block; /* override any previous display:none */
}
.kp-modal .ancient__list::-webkit-scrollbar-track {
  background: linear-gradient(#e7d2aa, #e0c89a);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(120, 82, 26, 0.15),
    inset 0 6px 10px rgba(0, 0, 0, 0.05);
}
.kp-modal .ancient__list::-webkit-scrollbar-thumb {
  border-radius: 12px;
  background: linear-gradient(180deg, #d9bf89 0%, #c8a970 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 82, 26, 0.22),
    inset 0 -4px 6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 248, 214, 0.35);
}
.kp-modal .ancient__list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d2b679 0%, #bd9f63 100%);
}
.kp-modal .ancient__list::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #c9ab6c 0%, #b49359 100%);
}

/* Phone sizes: shrink the content height */
@media (max-width: 1120px) {
  .kp-modal__content.ancient {
    max-height: 60%; /* about 30% shorter than full height */
    padding-top: 4rem; /* ✅ pushes everything (including title) down */
  }

  .ancient__list {
    height: 100%; /* still scrolls if too many items */
    max-height: 100%; /* keep list inside content box */
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media (max-width: 799.98px) {
  .kp-modal__content.ancient {
    max-height: 70%; /* about 30% shorter than full height */
    padding-top: 4rem; /* ✅ pushes everything (including title) down */
  }

  .ancient__list {
    height: 100%; /* still scrolls if too many items */
    max-height: 100%; /* keep list inside content box */
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Phone sizes: Smaller Title Fonts */
@media (max-width: 550px) {
  .ancient__title {
    font-size: 1.7rem; /* smaller font size */
    margin-top: 1rem; /* keep some spacing from the top */
  }
}

@media (max-width: 470px) {
  .ancient__title {
    font-size: 1.6rem; /* smaller font size */
    margin-top: 1rem; /* keep some spacing from the top */
  }
}

@media (max-width: 440px) {
  .ancient__title {
    font-size: 1.4rem; /* smaller font size */
    margin-top: 1rem; /* keep some spacing from the top */
  }
}

/* ===================== HEIGHT BREAKPOINTS ===================== */

/* Short viewports (<= 820px) */
@media (max-height: 820px) {
  .kp-modal__dialog {
    --scroll-top: 12%;
    --scroll-bottom: 12%;
    --side: 8%;
  }
  .ancient__title {
    font-size: clamp(22px, 2.6vw, 32px);
  }
  .ancient__link {
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.18;
  }
}

/* Very short viewports (<= 700px) */
@media (max-height: 700px) {
  .kp-modal__dialog {
    --scroll-top: 14%;
    --scroll-bottom: 14%;
    --side: 9%;
  }
  .ancient__title {
    font-size: clamp(20px, 2.4vw, 30px);
  }
  .ancient__link {
    font-size: clamp(18px, 1.7vw, 24px);
  }
}

/* ===================== ACCESSIBILITY ===================== */
@media (prefers-reduced-motion: reduce) {
  .kp-modal__overlay,
  .kp-modal__dialog {
    transition: none;
  }
}

/* --------------------------------- */
/* --------------------------------- */
/* --                             -- */
/* --     Side Menu Container     -- */
/* --                             -- */
/* --------------------------------- */
/* --------------------------------- */

.image-sidemenu-container {
  position: relative;
  display: flex;
  /* margin-right: 100px; */
  /* list-style-type: none; */
  flex-direction: row;
  height: 600px;
  /* top: 4px; */
  justify-content: space-between;
  align-items: center;
}

/* -- carousel - Rotating Box -- */

.main-img-carousel {
  /* width: 1800px; */
  width: 50%;
  height: 500px;
  flex-shrink: 1;
}

.carousel-container {
  /* margin: 0; */
  position: relative;
  display: grid;
  place-content: center;
  /* animation: b 9s infinite; */
  top: -500px;
  left: 250px;
  width: 35%;
}

.gallery {
  --s: 540px; /* the size */

  display: grid;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5 * var(--s)));
  /* animation: r 15s infinite cubic-bezier(0.5, 0.5, 0.5, 0.5); */
  animation: r 35s infinite linear;
  animation-play-state: paused;
}
.carousel-container:hover .gallery {
  animation: r 35s infinite linear;
}
.gallery img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.5;
  object-fit: cover;
  transform: var(--_t) translateZ(calc(var(--s) / 2));
}
.gallery img:nth-child(1) {
  --_t: rotateZ(360deg);
}
.gallery img:nth-child(2) {
  --_t: rotateX(-90deg);
  display: none;
}
.gallery img:nth-child(3) {
  --_t: rotateY(90deg) rotate(-90deg) rotateZ(90deg);
}
.gallery img:nth-child(4) {
  --_t: rotateX(180deg) rotate(90deg) rotateZ(90deg);
}
.gallery img:nth-child(5) {
  --_t: rotateX(90deg) rotate(90deg);
  display: none;
}
.gallery img:nth-child(6) {
  --_t: rotateY(-90deg);
}
@keyframes r {
  0%,
  10% {
    transform: var(--_p);
  }
  22%,
  26% {
    transform: var(--_p) rotateY(90deg);
  }
  38%,
  42% {
    transform: var(--_p) rotateY(90deg) rotateY(90deg);
  }
  54%,
  58% {
    transform: var(--_p) rotateY(90deg) rotateY(90deg) rotateY(90deg);
  }
  70%,
  74% {
    transform: var(--_p) rotateY(90deg) rotateY(90deg) rotateY(90deg)
      rotateY(90deg);
  }
  99%,
  100% {
    transform: var(--_p);
  }
}

/* -- Side Menu -- */

.side-menu {
  position: relative;
  width: 50%;
  height: 100%;
  right: 150px;
  text-align: center;
  position: absolute;
  top: 20px;
  overflow: hidden;
  font-family: "Arial Rounded MT";
  flex-shrink: 6;
}

.side-menu span {
  font-size: 32px;
}

.cubes {
  transform-style: preserve-3d;
  background-color: transparent;
  width: 350px;
  height: 350px;
  position: relative;
  margin: 35px auto 0px auto;
  /* ---- */
  perspective-origin: 100% 120px;
  perspective: 1000px;
  z-index: 99;
}

.wrap {
  width: 300px;
  height: 100px;
  background-color: transparent;
  position: relative;
  transform-style: preserve-3d;
  display: inline-block;
  top: 0px;
  left: 0px;
  /* ---- */
  margin-block: -3px;
  /* ---- */
  transform: rotateX(-15deg) rotateY(-15deg) translateZ(0px);
}

.cube {
  width: 300px;
  height: 100px;
  display: block;
  transform-style: preserve-3d;
  perspective-origin: top 100px;
  background-color: transparent;
  position: absolute;
  margin: 0px;
  transition: all 1s linear;
}

.cube div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  box-sizing: border-box;
  position: absolute;
  opacity: 0.58;
}

.back {
  transform: translateZ(-30px) rotateY(180deg);
  width: 500px;
  padding: 20px;
}

.right {
  width: 80px;
  transform: rotateY(-270deg) translateX(30px) translateZ(520px);
  transform-origin: top right;
  left: -100px;
  top: 0px;
}

.left {
  width: 80px;
  transform: rotateY(270deg) translateX(-30px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-90deg) translateY(-50px);
  transform-origin: top center;
  width: 500px;
}

.bottom {
  transform: rotateX(90deg) translateY(50px);
  transform-origin: bottom center;
  width: 500px;
}

.front {
  transform: translateZ(50px);
  width: 500px;
}

.bottom a {
  transform: rotateX(180deg) translateY(-10px) translateX(20px);
  display: inline-block;
  position: relative;
  margin: -10px 30px 0px auto;
  /* margin-right: 10px; */
  color: black;
  text-shadow: 5px 5px 5px slategrey;
  visibility: visible;
  text-decoration: none;
}

.soft-emboss a {
  text-decoration: none;
  font-family: "Ubuntu", Tahoma;
  font-size: 1em;
  line-height: 20px;
  font-weight: bold;
  text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.8);
  /* text-shadow: 1px 2px 3px #f4f4f4, 0 0 0 #000, 1px 2px 3px #f4f4f4; */
}

.soft-emboss-2 a {
  text-decoration: none;
  font-family: "Ubuntu", Tahoma;
  font-size: 1em;
  line-height: 40px;
  font-weight: bold;
  text-shadow: -1px -1px 1px #fff, 1px 1px 3px rgba(251, 250, 250, 0.2),
    1px 2px 3px rgba(252, 252, 252, 0.1);
  transition: font-size 0.7s;
}
.soft-emboss-2 a:hover {
  font-size: 1.18em;
  text-shadow: -1px -2px 3px #fff, 1px 1px 3px rgba(251, 250, 250, 0.2),
    1px 2px 3px rgba(252, 252, 252, 0.1);
  color: black;
}

.cubes .wrap:first-child .cube div {
  background-color: deepskyblue;
  box-shadow: inset 0 0 35px blue;
  border: solid 1px blue;
}

.cubes .wrap:first-child .cube div .soft-emboss a {
  color: blue;
}
.cubes .wrap:first-child .cube div .soft-emboss-2 a {
  color: rgb(2, 2, 215);
}

.cubes .wrap:nth-child(4) .cube div {
  background-color: rgb(254, 183, 50);
  box-shadow: inset 0 0 25px #fd5102;
  border: solid 1px #fd5102;
  color: #fd5102;
}

.cubes .wrap:nth-child(4) .cube div .soft-emboss a {
  color: orangered;
}
.cubes .wrap:nth-child(4) .cube div .soft-emboss-2 a {
  color: rgb(221, 60, 2);
}

.cubes .wrap:nth-child(3) .cube div {
  background-color: rgb(255, 134, 174);
  box-shadow: inset 0 0 25px red;
  border: solid 1px red;
}

.cubes .wrap:nth-child(3) .cube div .soft-emboss a {
  color: red;
}
.cubes .wrap:nth-child(3) .cube div .soft-emboss-2 a {
  color: red;
}

.cubes .wrap:nth-child(2) .cube div {
  background-color: greenyellow;
  box-shadow: inset 0 0 30px darkolivegreen;
  border: solid 1px darkolivegreen;
}

.cubes .wrap:nth-child(2) .cube div .soft-emboss a {
  color: darkolivegreen;
}
.cubes .wrap:nth-child(2) .cube div .soft-emboss-2 a {
  color: darkolivegreen;
}

.cubes .wrap:nth-child(5) .cube div {
  background-color: #f8a1d1;
  box-shadow: inset 0 0 35px #fc50af;
  border: solid 2px #fc50af;
}

.cubes .wrap:nth-child(5) .cube div .soft-emboss a {
  color: #ff1695;
}
.cubes .wrap:nth-child(5) .cube div .soft-emboss-2 a {
  color: #ff1695;
}

.cube:hover {
  transform: rotateX(90deg) translateY(20px);
}

/* Side Menu - Glow on Hover Bottom */

.glow-on-hover {
  border: none;
  outline: none;
}

.glow-on-hover:before {
  content: "";
  background: linear-gradient(
    80deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 200%;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  animation: glowing 50s linear infinite;
}

.glow-on-hover:hover:before {
  opacity: 1;
  border: solid 10px rgba(255, 255, 255, 0.4);
  border-radius: 25%;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 800% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* .cube:hover {
  transform: rotateX(90deg);
} */

/* -- Side Menu End -- */

/* -- Ballons -- */

.balloons-container {
  position: absolute;
  margin: auto;
  display: block;
  margin-bottom: 8%;
  width: 230px;
  height: 600px;
  /* opacity: 0.9; */
  /* animation: floatUp 7s linear; */
  animation: floatUp 7.5s linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes floatUp {
  0% {
    transform: translateY(-2000px);
    opacity: 0;
  }
  2% {
    transform: translateY(80vh);
    opacity: 1;
  }

  100% {
    transform: translateY(-2000px);
  }
}

/* --------------- */
/*                 */
/*    Page Body    */
/*                 */
/* --------------- */

.content-container {
  position: relative;
  top: -500px;
  left: -120px;
  height: 1500px;
}

/* -- Page Title -- */

.page-title h1 {
  position: relative;
  font-family: Arial, sans-serif;
  /* font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif; */
  color: #fd5f68;
  font-size: 85px;
  text-shadow: 0px 1px 1px #fc98ab, 0px 2px 1px #fac1cb, 0px 3px 1px #93b7fe,
    0px 4px 1px #67dcf9, 0px 5px 1px #67dcf9, 0px 5px 1px #67dcf9,
    0px 5px 1px #67dcf9, 0px 5px 1px #67dcf9, 0px 5px 1px #026d88,
    0px 7px 4px rgba(200, 250, 1, 0.35);
  text-align: center;
  top: -5px;
  left: 50px;
  opacity: 0.98;
}
.page-title h2 {
  position: relative;
  font-family: Arial, sans-serif;
  /* font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif; */
  color: #3d58fa;
  font-size: 50px;
  text-shadow: 0px 1px 1px #fc98ab, 0px 2px 1px #fac1cb, 0px 3px 1px #93b7fe,
    0px 4px 1px #67dcf9, 0px 5px 1px #67dcf9, 0px 5px 1px #67dcf9,
    0px 5px 1px #67dcf9, 0px 5px 1px #67dcf9, 0px 5px 1px #67dcf9,
    0px 8px 5px rgba(0, 0, 0, 0.5);
  text-align: center;
  top: 34px;
  opacity: 0.75;
}

/* --------------- */
/*                 */
/*    Accordion    */
/*                 */
/* --------------- */

/* -- Basic Accordion Styles -- */
.accordion {
  position: absolute;
  left: 55%;
  transform: translate(-50%);
  width: 62%;
}
.accordion input[name="panel"] {
  display: none;
}
.accordion label {
  position: relative;
  display: block;
  padding: 1em;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.button-container {
  width: 120%;
  scroll-margin-top: 20px;
}

/* Accordion typography – force the same font on every device */
.accordion,
.accordion button,
.accordion .button-text,
.secondary-button-text,
.secondary-button-text-blue {
  font-family: "Comic Relief", cursive, "Delius", system-ui, -apple-system,
    Arial, Helvetica, sans-serif !important;
  font-weight: 700;
  font-synthesis: none; /* avoid fake bold/italic differences */
  -webkit-text-size-adjust: 100%;
}
/* Accordion panel/content */
.accordion .accordion-content {
  font-family: "Comic Relief", cursive, "Delius", system-ui, -apple-system,
    Arial, Helvetica, sans-serif !important;
  font-synthesis: none;
}

/* -- Yellow Main Button -- */
.button-main-yellow {
  width: 65%; /*Adjust width */
  height: 90px; /* Adjust height */
  background: linear-gradient(
    to bottom,
    #ffff00 0%,
    #ff9900 100%
  ); /* Yellow to orange gradient */
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2),
    /* Soft button shadow */ 0px 15px 20px -15px rgba(0, 0, 0, 0.5); /* Black elliptical shadow */
  border: none;
  border-bottom-right-radius: 75px 42px;
  border-bottom-left-radius: 75px 42px;
  border-top-right-radius: 75px 42px;
  border-top-left-radius: 75px 42px;
  margin-inline: auto;
  margin-bottom: 30px;
  right: 10%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}
.button-main-yellow:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0px 12px 20px rgba(130, 130, 130, 0.4),
    /* Enhanced button shadow */ 0px 40px 25px -10px rgba(130, 130, 130, 0.7); /* Enhanced black elliptical shadow on hover */
}
.button-main-yellow a h3 {
  width: 90%;
  text-align: center;
}

/* -- Blue Main Button -- */
.button-main-blue {
  width: 65%; /*Adjust width */
  height: 90px; /* Adjust height */
  background: linear-gradient(
    to bottom,
    #00c3ff 0%,
    #007aff 100%
  ); /* lighter cyan to deeper blue gradient */
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2),
    /* Soft button shadow */ 0px 15px 20px -15px rgba(0, 0, 0, 0.5); /* Black elliptical shadow */
  border: none;
  border-bottom-right-radius: 75px 42px;
  border-bottom-left-radius: 75px 42px;
  border-top-right-radius: 75px 42px;
  border-top-left-radius: 75px 42px;
  margin-inline: auto;
  margin-bottom: 30px;
  right: 10%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}
.button-main-blue:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0px 12px 20px rgba(130, 130, 130, 0.4),
    /* Enhanced button shadow */ 0px 40px 25px -10px rgba(130, 130, 130, 0.7); /* Enhanced black elliptical shadow on hover */
}
.button-main-blue a h3 {
  width: 90%;
  text-align: center;
}

/* -- Green Main Button -- */
.button-main-green {
  width: 65%; /*Adjust width */
  height: 90px; /* Adjust height */
  background: linear-gradient(
    to bottom,
    #ccff00 0%,
    #33cc00 100%
  ); /* bright lime → deeper green gradient */
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2),
    /* Soft button shadow */ 0px 15px 20px -15px rgba(0, 0, 0, 0.5); /* Black elliptical shadow */
  border: none;
  border-bottom-right-radius: 75px 42px;
  border-bottom-left-radius: 75px 42px;
  border-top-right-radius: 75px 42px;
  border-top-left-radius: 75px 42px;
  margin-inline: auto;
  margin-bottom: 30px;
  right: 10%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}
.button-main-green:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0px 12px 20px rgba(130, 130, 130, 0.4),
    /* Enhanced button shadow */ 0px 40px 25px -10px rgba(130, 130, 130, 0.7); /* Enhanced black elliptical shadow on hover */
}
.button-main-green a h3 {
  width: 90%;
  text-align: center;
}

/* -- Red Main Button -- */
.button-main-red {
  width: 65%; /*Adjust width */
  height: 90px; /* Adjust height */
  background: linear-gradient(
    to bottom,
    #ff6600 0%,
    #cc0000 100%
  ); /* Bright orange → deep red gradient */
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2),
    /* Soft button shadow */ 0px 15px 20px -15px rgba(0, 0, 0, 0.5); /* Black elliptical shadow */
  border: none;
  border-bottom-right-radius: 75px 42px;
  border-bottom-left-radius: 75px 42px;
  border-top-right-radius: 75px 42px;
  border-top-left-radius: 75px 42px;
  margin-inline: auto;
  margin-bottom: 30px;
  right: 10%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}
.button-main-red:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0px 12px 20px rgba(130, 130, 130, 0.4),
    /* Enhanced button shadow */ 0px 40px 25px -10px rgba(130, 130, 130, 0.7); /* Enhanced black elliptical shadow on hover */
}
.button-main-red a h3 {
  width: 90%;
  text-align: center;
}

/* --- Buttons Text Design - Candy --- */

.button-text {
  position: absolute;
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -132%);
  color: rgba(255, 255, 255, 0.3);
}
.layer-1 {
  /* font-variation-settings: "GLOW" 1000; */
  filter: invert(0.65) grayscale(1);
  position: absolute;
  z-index: 2;
  text-shadow: 8px 8px 4px rgba(255, 255, 255, 0.1),
    6px 3px 2px rgba(255, 255, 255, 0.2), 4px 2px 2px rgba(138, 0, 0, 0.2),
    4px 4px 5px rgba(255, 255, 255, 0.8);
  opacity: 0.75;
}
.layer-2-yellow {
  position: absolute;
  z-index: 3;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    -45deg,
    Yellowgreen 25%,
    white 25%,
    white 50%,
    Yellowgreen 50%,
    Yellowgreen 75.2%,
    white 75%,
    white
  );
  opacity: 0.75;
  background-size: 11px 11px;
  background-position: 0 0;
  mix-blend-mode: overlay;
  -webkit-text-stroke: 1px rgba(255, 255, 0, 0.5);
  /* animation: stripes 15s linear infinite; */
}
.layer-2-blue {
  position: absolute;
  z-index: 3;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    -45deg,
    DeepSkyBlue 25%,
    white 25%,
    white 50%,
    DeepSkyBlue 50%,
    DeepSkyBlue 75.2%,
    white 75%,
    white
  );
  opacity: 0.9;
  background-size: 11px 11px;
  background-position: 0 0;
  mix-blend-mode: overlay;
  -webkit-text-stroke: 1px rgba(100, 149, 237, 0.7);
  /* -webkit-text-stroke: 1px rgba(65, 65, 253, 0.3); */
  /* animation: stripes 15s linear infinite; */
}
.layer-2-green {
  position: absolute;
  z-index: 3;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    -45deg,
    SpringGreen 25%,
    white 25%,
    white 50%,
    SpringGreen 50%,
    SpringGreen 75.2%,
    white 75%,
    white
  );
  opacity: 0.9;
  background-size: 10px 10px;
  background-position: 0 0;
  mix-blend-mode: overlay;
  -webkit-text-stroke: 1px rgb(0, 255, 127, 0.7);
  /* animation: stripes 15s linear infinite; */
}
.layer-2-red {
  position: absolute;
  z-index: 3;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    -45deg,
    Pink 25%,
    white 25%,
    white 50%,
    Pink 50%,
    Pink 75.2%,
    white 75%,
    white
  );
  opacity: 0.9;
  background-size: 11px 11px;
  background-position: 0 0;
  mix-blend-mode: overlay;
  -webkit-text-stroke: 1px rgb(216, 112, 147, 0.7);
  /* animation: stripes 15s linear infinite; */
}

@keyframes stripes {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  50% {
    background-position: 20px 0, 20px 0, 20px 0;
  }
  100% {
    background-position: 0 0, 0 0, 0 0;
  }
}

/* ------------------------------- */
/* -                             - */
/* -      Accordion Content      - */
/* -                             - */
/* ------------------------------- */

.accordion-content {
  width: 100%;
  overflow: hidden;
  max-height: 0px;
  position: relative;
  background: transparent;
  color: #868686;
  margin-bottom: 15px;
  margin-top: 10px;
  padding-top: 20px;
  padding-inline: 25px;
  right: 9.5%;
  transform: translateY(-10px);
  transition: all 0.8s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
input[name="panel"]:checked ~ .accordion-content {
  /* Get this as close to what height you expect */
  /* max-height: 50em; */
  max-height: 6000px;
}

/* ----------------------------------- */
/* -                                 - */
/* -   Secondary Accordion Content   - */
/* -                                 - */
/* ----------------------------------- */

.secondary-accordion-content {
  overflow: hidden;
  max-height: 0em;
  width: 100%;
  position: relative;
  background: transparent;
  color: #868686;
  /* margin-bottom: 15px; */
  /* margin-top: 10px; */
  padding-top: 24px;
  padding-inline: 25px;
  /* right: 18%; */
  transform: translateY(-2px);
  transition: all 1s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
input[name="panel"]:checked ~ .secondary-accordion-content {
  /* Get this as close to what height you expect */
  /* max-height: 50em; */
  max-height: 4000px;
}

/* --------------------------------- */
/* -                               - */
/* -   Secondary Buttons Pannels   - */
/* -                               - */
/* --------------------------------- */

.secondary-buttons-panel {
  position: relative;
  margin-top: 20px;
  margin-bottom: 5px;
  /* margin-left: 14.5%; */
}

.secondary-button {
  display: inline-block;
  width: 55%;
  height: 84px;
  left: 22%;
  font-size: 16px;
  color: #333;
  background: linear-gradient(
    to bottom,
    #ffffff,
    #ffffff,
    #f0f0f0,
    #dedede,
    #c8c8c8,
    #b3b3b3
  );
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.2),
    /* Soft button shadow */ 0px 15px 20px -15px rgba(0, 0, 0, 0.5); /* Black elliptical shadow */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
  margin: 14px 0px;
  border-radius: 40px; /* Rounded corners */
  cursor: pointer;
  text-decoration: none;
}
.secondary-button:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0px 12px 20px rgba(130, 130, 130, 0.3),
    /* Enhanced button shadow */ 0px 40px 25px -10px rgba(130, 130, 130, 0.6); /* Enhanced black elliptical shadow on hover */
}

/* Secondary Blue Button */
.secondary-button-blue {
  border: 7px solid dodgerblue;
}

/* Secondary Orange Button */
.secondary-button-orange {
  border: 7px solid #ff9900;
}

/* Secondary Red Button */
.secondary-button-red {
  border: 7px solid #ff4d4d;
}

/* Secondary Gold Button */
.secondary-button-gold {
  border: 7px solid gold;
}

/* Secondary Light Blue Button */
.secondary-button-light-blue {
  border: 6px solid #a0cfec;
  border: 7px solid #76bae4;
}

/* Secondary Teal Button */
.secondary-button-teal {
  border: 7px solid #008b8b;
}

/* Secondary Light Green Button */
.secondary-button-light-green {
  border: 6px solid #a4e100;
  border: 7px solid limegreen;
}

/* Secondary Violet Button */
.secondary-button-violet {
  border: 7px solid #9966cc;
}

/* Secondary Pink Button */
.secondary-button-pink {
  border: 7px solid #f6a4c9;
}

/* Secondary Dark Green Button */
.secondary-button-dark-green {
  border: 7px solid #55a000;
}

/* Secondary Lightsalmon Button */
.secondary-button-lightsalmon {
  border: 7px solid lightsalmon;
}

/* Secondary Light Purple Button */
.secondary-button-light-purple {
  border: 6px solid #ca9bf7;
  border: 7px solid #f79bf6;
}

/* Secondary Gray Button */
.secondary-button-gray {
  border: 7px solid #aaa;
}

/* Secondary Orchid */
.secondary-button-orchid {
  border: 7px solid orchid;
}

/* Secondary CornflowerBlue */
.secondary-button-cornflowerblue {
  border: 7px solid CornflowerBlue;
}

/* Secondary LightSeaGreen */
.secondary-button-lightseagreen {
  border: 7px solid LightSeaGreen;
}

/* ------------------------------ */
/* -                            - */
/* -   Secondary Buttons Text   - */
/* -                            - */
/* ------------------------------ */

.secondary-button-text-blue {
  position: absolute;
  font-size: 34px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);

  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.4);
  color: rgba(175, 214, 252, 0.95);
  text-shadow: 2px 3px 5px rgba(231, 231, 231, 0.3), 0 0 0 rgba(0, 0, 0, 0.6),
    2px 3px 5px rgba(231, 231, 231, 0.3);

  letter-spacing: 1px;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-weight: 700;
  transition: all 0.3s;
}

.secondary-button-text {
  position: absolute;
  font-size: 32px;
  /* font-weight: bold; */
  /* letter-spacing: 5px important; */
  top: 49%;
  left: 50%;
  transform: translate(-50%, -55%);

  /* -webkit-text-stroke: 1.58px rgba(0, 0, 0, 0.58); */
  -webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.78);
  color: rgba(144, 199, 254, 0.99);
  color: rgba(180, 214, 249, 0.99);
  color: rgba(0, 0, 0, 0.1);
  /* text-shadow: 2px 3px 5px rgba(231, 231, 231, 0.3), 0 0 0 rgba(0, 0, 0, 0.6),
    2px 3px 5px rgba(231, 231, 231, 0.3); */
  /* text-shadow: 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc,
    0px 4px 1px #c5c5c5, 0px 5px 1px #cbcbcb, 0px 5px 1px #cbcbcb,
    0px 5px 1px #cbcbcb, 0px 5px 1px #cbcbcb, 0px 5px 1px #cbcbcb,
    0px 8px 5px rgba(0, 0, 0, 0.6); */
  /* text-shadow: 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc,
    0px 4px 1px #c5c5c5, 0px 6px 1px rgba(203, 203, 203, 0.7),
    0px 5px 1px rgba(203, 203, 203, 0.6), 0px 7px 7px rgba(0, 0, 0, 0.15); */
  text-shadow: 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc,
    0px 4px 1px #c5c5c5, 0px 4px 1px rgba(183, 183, 183, 0.8),
    0px 5px 1px rgba(183, 183, 183, 0.9), 0px 6px 5px rgba(0, 0, 0, 0.07),
    0px 11px 8px rgba(0, 0, 0, 0.02), 4px 1px 1px #ddd, 4px 2px 1px #d6d6d6,
    4px 3px 1px #ccc, 5px 6px 5px rgba(0, 0, 0, 0.07),
    5px 10px 8px rgba(0, 0, 0, 0.04);

  letter-spacing: 1px;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-weight: 700;
  transition: all 0.3s;
}

/* -------------------------------- */
/* -                              - */
/* -        Content Buttons       - */
/* -                              - */
/* -------------------------------- */

.accordion-content-container {
  /* position: relative; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
  justify-content: space-between;
}

.accordion-content-container button {
  height: 80px;
  cursor: pointer;
  background: linear-gradient(
    180deg,
    hsl(216, 4%, 85%) 10%,
    #6dd6d1 60%,
    80%,
    hsl(216, 4%, 70%)
  );
  border: none;
  border-radius: 40px;
  box-shadow: 3px 2px 10px rgba(87, 171, 167, 0.5), 15px -3px 15px #a6fffa,
    inset 0px -8px 5px #57aba7, inset 0px 3px 5px #a6fffa;
  margin-bottom: 25px;
  margin-top: 9px;
  cursor: pointer;
  transition: 500ms;
}

.accordion-content-container button > span {
  display: inline-block;
  margin-top: -8px;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: white;

  text-shadow: 0 1px 0 #ccc, /*0 2px 0 #c9c9c9,*/ 0 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2),
    0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.2), 0 15px 15px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 1px gray, 0 3px 2px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2),
    0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25);
}

.accordion-content-container button:hover {
  background: #6dd6d1;
  box-shadow: 0px 10px 25px #57aba7, 0px -3px 25px #a6fffa,
    inset 0px -8px 10px #57aba7, inset 0px 5px 10px #a6fffa;
  border: 2px solid #6dd6d1;
  transform: scale(1.04) translateY(-20px); /* Slight scale on hover */
  transition-duration: 1s;
  animation: hueRotation 13s ease-in-out infinite;
}

.accordion-content-container button:nth-child(3n-1):hover {
  background: #6dd6d1;
  box-shadow: 0px 10px 25px #57aba7, 0px -3px 25px #a6fffa,
    inset 0px -8px 10px #57aba7, inset 0px 5px 10px #a6fffa;
  border: 2px solid #6dd6d1;
  transform: scale(1.04) translateY(-20px); /* Slight scale on hover */
  transition-duration: 1s;
  animation: hueRotation-2 10s ease-in-out infinite;
}
.accordion-content-container button:nth-child(3n):hover {
  background: #6dd6d1;
  box-shadow: 0px 10px 25px #57aba7, 0px -3px 25px #a6fffa,
    inset 0px -8px 10px #57aba7, inset 0px 5px 10px #a6fffa;
  border: 2px solid #6dd6d1;
  transform: scale(1.04) translateY(-20px); /* Slight scale on hover */
  transition-duration: 1s;
  animation: hueRotation-3 13s ease-in-out infinite;
}

@keyframes hueRotation {
  0% {
    background: hwb(0.78turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(0.78turn 15% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
    transition-duration: 1s;
  }
  50% {
    background: hwb(-0.92turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(-0.92turn 15% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
  }
  75% {
    background: hwb(0turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(0turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
    transition-duration: 1s;
  }
  100% {
    background: hwb(0.78turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(0.78turn 15% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
  }
}
@keyframes hueRotation-2 {
  0% {
    background: hwb(-0.92turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(-0.92turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
    transition-duration: 1s;
  }
  50% {
    background: hwb(0.78turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(0.78turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
  }
  75% {
    background: hwb(0turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(0turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
    transition-duration: 1s;
  }
  100% {
    background: hwb(-0.92turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(-0.92turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
  }
}
@keyframes hueRotation-3 {
  0% {
    background: hwb(0turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(0turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
    transition-duration: 1s;
  }
  50% {
    background: hwb(-0.92turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(-0.92turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
  }
  80% {
    background: hwb(0.78turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(0.78turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
  }
  100% {
    background: hwb(0turn 5% 0% / 0.5);
    box-shadow: 0px 10px 25px hwb(0turn 5% 0% / 0.5), 0px 0px 25px #a6fffa,
      inset 0px 0px 10px #57aba7, inset 0px 5px 10px #a6fffa;
    border: 2px solid #6dd6d1;
    transition-duration: 1s;
  }
}

.accordion-content-container button:focus {
  outline: none;
}

/* ------------------------------------------------- */
/* -                                               - */
/* -   Content Buttons- Show Thumbnails on Hover   - */
/* -                                               - */
/* ------------------------------------------------- */

.thumbnail-show {
  position: absolute;
  display: block;
  top: 75px;
  left: 100px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.46s ease-in-out;
  transition-delay: 0s;
  transform: scaleY(0);
  transform-origin: 0 0;
}

.accordion-content-btn {
  font-size: 1rem;
}

.accordion-content-btn:hover .thumbnail-show {
  transition-delay: 0.25s;
  transition-duration: 0.7s;
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scaleY(1);
}

/* ------------------ */
/* -                - */
/* -     Footer     - */
/* -                - */
/* ------------------ */

footer {
  position: relative;
  bottom: 0;
  width: 161%;
  left: -27.9%;
  margin-top: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* The Fotter Menu */
footer .menu {
  position: relative;
  display: flex;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-weight: 400;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  top: 30px;
  left: -100px;
  z-index: 1001;
}
footer .menu li {
  list-style: none;
}
footer .menu li a {
  font-size: 22px;
  color: #ccc;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
}
:root {
  --text: #2b3044;
  --line: #bbc1e1;
  --line-active: #fafafb;
}
footer .menu li a:hover {
  opacity: 1;
  color: #fff;
}

.svg-home {
  width: 78px;
  height: 45px;
  position: absolute;
  left: 8.8%;
  bottom: 0;
  transform: translate(-50%, 7px) translateZ(0);
  fill: none;
  stroke: var(--stroke, var(--line));
  stroke-linecap: round;
  stroke-width: 2px;
  stroke-dasharray: var(--offset, 69px) 278px;
  stroke-dashoffset: 361px;
  transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
}
.footer-link-home:hover {
  opacity: 1;
  color: #fff;
  --spacing: 4px;
  --stroke: var(--line-active);
  --stroke-delay: 0.1s;
  --offset: 180px;
}
.svg-blog {
  width: 78px;
  height: 45px;
  position: absolute;
  left: 51%;
  bottom: 0;
  transform: translate(-50%, 7px) translateZ(0);
  fill: none;
  stroke: var(--stroke, var(--line));
  stroke-linecap: round;
  stroke-width: 2px;
  stroke-dasharray: var(--offset, 69px) 278px;
  stroke-dashoffset: 361px;
  transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
}
.footer-link-blog:hover {
  opacity: 1;
  color: #fff;
  --spacing: 4px;
  --stroke: var(--line-active);
  --stroke-delay: 0.1s;
  --offset: 180px;
}

footer > p {
  color: #eee;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
  font-family: "Comic Relief", cursive, "Delius", Arial, system-ui,
    -apple-system, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  transform: translateY(30px) translateX(-80px);
  opacity: 0.85;
  z-index: 1001;
}

/*wave and animation*/
footer .wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 250px;
  background: url(images/wave.png);
  background-size: 1000px;
}

footer .wave#wave1 {
  z-index: 1000;
  opacity: 0.9;
  bottom: 0;
  animation: animateWave 30s linear infinite;
}

footer .wave#wave2 {
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animateWave_02 40s linear infinite;
}
footer .wave#wave3 {
  z-index: 1000;
  opacity: 0.2;
  bottom: 0;
  animation: animateWave_01 20s linear infinite;
}

footer .wave#wave4 {
  z-index: 999;
  opacity: 0.7;
  bottom: 20px;
  animation: animateWave_02 20s linear infinite;
}

@keyframes animateWave {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-position-x: 0px;
  }
}

@keyframes animateWave_01 {
  0% {
    background-position-x: 1000px;
    filter: hue-rotate(0deg);
  }
  100% {
    background-position-x: 0px;
    filter: hue-rotate(360deg);
  }
}

@keyframes animateWave_02 {
  0% {
    background-position-x: 0px;
    filter: hue-rotate(0deg);
  }
  100% {
    background-position-x: 1000px;
    filter: hue-rotate(360deg);
  }
}

/* -- Responsive -- */
/* ======================================================================= */
/* ======================================================================= */
/* ======================================================================= */
/* =                                                                     = */
/* =        RESPONSIVE DESIGN - Works at any browser zoom level          = */
/* =                                                                     = */
/* ======================================================================= */
/* ======================================================================= */
/* ======================================================================= */

/* --------------------------------------------------- */
/* TABLETS + SMALL LAPTOPS: 800px–1023px  -  With JS!  */
/* --------------------------------------------------- */

/* Dealing Tablets and Small Lesktop sizes from index.html normalizeZoomForTV() JS function. */

/* ------------------------------------------------ */
/* SMALL DESKTOPS: 1024px–1439px  -  With JS!       */
/* ------------------------------------------------ */

/* Dealing small desktop sizes from index.html normalizeZoomForTV() JS function!!! */

/* ==============================================================================  */
/*   LARGE SCREENS (desktop zoom handled by JS on your site for 1439px - 3799px)   */
/*   These ranges scale the .scale-wrapper for big displays.                       */
/* =============================================================================== */

@media (min-width: 1440px) and (max-width: 1549px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(0.75);
    transform-origin: top left;
    width: calc(100% / 0.75);
    min-height: 100vh;
  }
}
@media (min-width: 1540px) and (max-width: 1649px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(0.8);
    transform-origin: top left;
    width: calc(100% / 0.8);
    min-height: 100vh;
  }
}
@media (min-width: 1650px) and (max-width: 1749px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(0.85);
    transform-origin: top left;
    width: calc(100% / 0.85);
    min-height: 100vh;
  }
}
@media (min-width: 1750px) and (max-width: 1829px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(0.9);
    transform-origin: top left;
    width: calc(100% / 0.9);
    min-height: 100vh;
  }
}
@media (min-width: 1830px) and (max-width: 1919px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(0.95);
    transform-origin: top left;
    width: calc(100% / 0.95);
    min-height: 100vh;
  }
}
/* ------------------------------ */
/* 4K SCREENS: 1920px and up      */
/* ------------------------------ */
@media (min-width: 1920px) and (max-width: 2099px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1);
    transform-origin: top left;
    width: calc(100% / 1);
    min-height: 100vh;
  }
}
@media (min-width: 2100px) and (max-width: 2199px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.05);
    transform-origin: top left;
    width: calc(100% / 1.05);
    min-height: 100vh;
  }
}
@media (min-width: 2200px) and (max-width: 2299px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.1);
    transform-origin: top left;
    width: calc(100% / 1.1);
    min-height: 100vh;
  }
}
@media (min-width: 2300px) and (max-width: 2399px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.15);
    transform-origin: top left;
    width: calc(100% / 1.15);
    min-height: 100vh;
  }
}
@media (min-width: 2400px) and (max-width: 2499px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.2);
    transform-origin: top left;
    width: calc(100% / 1.2);
    min-height: 100vh;
  }
}
@media (min-width: 2500px) and (max-width: 2599px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.25);
    transform-origin: top left;
    width: calc(100% / 1.25);
    min-height: 100vh;
  }
}

@media (min-width: 2600px) and (max-width: 2699px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.3);
    transform-origin: top left;
    width: calc(100% / 1.3);
    min-height: 100vh;
  }
}

@media (min-width: 2700px) and (max-width: 2799px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.35);
    transform-origin: top left;
    width: calc(100% / 1.35);
    min-height: 100vh;
  }
}

@media (min-width: 2800px) and (max-width: 2899px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.4);
    transform-origin: top left;
    width: calc(100% / 1.4);
    min-height: 100vh;
  }
}

@media (min-width: 2900px) and (max-width: 2999px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.45);
    transform-origin: top left;
    width: calc(100% / 1.45);
    min-height: 100vh;
  }
}

@media (min-width: 3000px) and (max-width: 3099px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.5);
    transform-origin: top left;
    width: calc(100% / 1.5);
    min-height: 100vh;
  }
}

@media (min-width: 3100px) and (max-width: 3199px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.55);
    transform-origin: top left;
    width: calc(100% / 1.55);
    min-height: 100vh;
  }
}

@media (min-width: 3200px) and (max-width: 3299px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.6);
    transform-origin: top left;
    width: calc(100% / 1.6);
    min-height: 100vh;
  }
}

@media (min-width: 3300px) and (max-width: 3399px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.65);
    transform-origin: top left;
    width: calc(100% / 1.65);
    min-height: 100vh;
  }
}

@media (min-width: 3400px) and (max-width: 3499px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.7);
    transform-origin: top left;
    width: calc(100% / 1.7);
    min-height: 100vh;
  }
}

@media (min-width: 3500px) and (max-width: 3599px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.75);
    transform-origin: top left;
    width: calc(100% / 1.75);
    min-height: 100vh;
  }
}

@media (min-width: 3600px) and (max-width: 3699px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.8);
    transform-origin: top left;
    width: calc(100% / 1.8);
    min-height: 100vh;
  }
}

@media (min-width: 3700px) and (max-width: 3799px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.85);
    transform-origin: top left;
    width: calc(100% / 1.85);
    min-height: 100vh;
  }
}

/* ---------- Secondary accordion font tweaks (wide-ish) ---------- */
@media (min-width: 900px) and (max-width: 1600px) {
  .secondary-button-text-blue {
    font-size: 30px;
  }
  .secondary-button-text {
    font-size: 28px;
  }
}

/* =======================================================================
   MOBILE & SMALL TABLETS — unified core (≤899px)
   - Navbar/Logo visible; menus hidden
   - Stack: logo → carousel → titles → accordion
   - Footer waves + link grid
   ======================================================================= */
@media (max-width: 899.98px) {
  /* Base */
  html,
  body {
    margin: 0 !important;
    overflow-x: hidden;
    background-size: cover;
  }

  /* Navbar / Logo */
  .navbar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    background: transparent;
  }
  .navbar .train-nav-menu,
  .navbar .side-menu,
  .train-nav-menu,
  .side-menu,
  .menu-uderline,
  .balloons-container {
    display: none !important;
  }
  .navbar .logo,
  .logo {
    display: block !important;
    position: static !important;
    margin: 14px auto 10px !important;
    width: 150px;
    max-width: min(60vw, 260px);
    height: auto;
  }
  .logo img {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
  }

  /* Layout wrappers */
  .image-sidemenu-container {
    position: static;
    display: block;
    height: auto;
    margin: 0 auto;
    padding: 0 12px;
  }

  /* Carousel wrappers: neutralize desktop offsets; support both spellings */
  .main-img-carousel,
  .carrousel-container,
  .carousel-container {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 6px auto 14px !important;
    display: grid !important;
    place-content: center;
  }

  /* Cube size by viewport so it fits */
  .gallery {
    --s: min(90vw, 340px);
    margin: 0 auto;
    animation-play-state: running;
  }
  .gallery img {
    width: var(--s);
    aspect-ratio: 1.5;
    object-fit: cover;
  }

  /* Titles */
  .content-container {
    position: static !important;
    margin: 0 auto;
    padding: 0 14px;
    max-width: 740px;
  }
  .page-title h1 {
    font-size: clamp(28px, 7vw, 44px);
    text-align: center;
    margin: 25px 0 30px;
    line-height: 1.1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    transform: translateX(-50px);
  }
  .page-title h2 {
    font-size: clamp(18px, 5.2vw, 28px);
    text-align: center;
    margin: 25px 0 10px;
    top: 18px;
    margin-bottom: 25px;
    opacity: 0.9;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  }

  /* Accordion core */
  .accordion {
    position: static !important;
    transform: none !important;
    width: 95% !important;
    margin: 10px auto 28px !important;
  }
  .button-container {
    width: 100%;
    scroll-margin-top: 16px;
  }
  .button-main-yellow,
  .button-main-blue,
  .button-main-green,
  .button-main-red {
    width: 100% !important;
    height: 72px;
    margin: 0 0 14px 0;
    right: 0 !important;
    border-radius: 999px;
  }

  /* Aaccordion fonts */
  .button-text {
    font-size: 36px;
  }

  /* Footer: waves + centered link grid */
  footer {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    margin-top: 24px !important;
    padding: 100px 0 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  footer .waves {
    position: absolute !important;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 180px !important;
    pointer-events: none;
    z-index: 1;
  }
  footer .wave {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 235px !important;
    transform: translateY(50px);
    background-size: 800px !important;
  }
  footer .wave#wave1 {
    z-index: 1000 !important;
    opacity: 0.9 !important;
  }
  footer .wave#wave3 {
    z-index: 1000 !important;
    opacity: 0.2 !important;
  }
  footer .wave#wave2 {
    z-index: 999 !important;
    opacity: 0.5 !important;
  }
  footer .wave#wave4 {
    z-index: 999 !important;
    opacity: 0.7 !important;
  }

  /* 2-row layout */
  footer .menu {
    position: relative !important;

    /* Center the UL itself */
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* Don’t let an old margin push it */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;

    /* Size: shrink to content and cap to viewport */
    width: max-content !important;
    max-width: 92vw !important;

    /* Grid stays centered */
    display: grid !important;
    justify-items: center !important;
    grid-template-columns: repeat(
      3,
      minmax(0, 1fr)
    ); /* good default on mobile */
    gap: 6px 10px;
    padding: 0 0 20px 0 !important;
  }
  footer .menu li:nth-child(5) {
    grid-column: 2;
  }
  footer .menu li:nth-child(6) {
    grid-column: 3;
  }
  footer .menu li:nth-child(7) {
    grid-column: 4;
  }
  footer .menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    background: transparent !important;
  }
  footer .menu a svg {
    display: none;
  }
  footer > p {
    display: none !important;
  }
}

/* ----------- Footer ≤700px: 3-row layout (3+3+1) ----------- */
/* -- ≤700px: 3 columns, last item spans all 3 if it's alone --*/

@media (max-width: 699.98px) {
  footer .menu {
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    transform: translateX(-4%) translateY(12%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: 100vw !important;

    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(3, 1fr) !important;
    justify-items: center !important;
    gap: 8px 12px !important;
  }

  footer .menu li {
    margin: 0 !important;
  }

  /* If the last row has only 1 item (7 items total, 10 items, etc.), center it */
  footer .menu li:last-child:nth-child(3n + 1) {
    grid-column: 2 / 3 !important; /* places it in the center column */
  }
}

/* ≤550px: scale footer menu font smaller */
@media (max-width: 549.98px) {
  footer .menu {
    transform: translateX(-2%) translateY(12%) !important;
  }
}

/* ≤490px: scale footer menu font smaller */
@media (max-width: 489.98px) {
  footer .menu a {
    font-size: 20px !important; /* tweak down from your current size */
    line-height: 1.2 !important; /* tighter vertical spacing */
    letter-spacing: 0.3px; /* optional: helps readability when smaller */
  }

  footer .menu {
    transform: translateX(-4%) translateY(12%) !important;
    gap: 4px 6px !important; /* slightly reduce grid gaps to save space */
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* ≤440px: scale footer menu font smaller */
@media (max-width: 439.98px) {
  footer .menu a {
    font-size: 18px !important; /* tweak down from your current size */
    line-height: 1 !important; /* tighter vertical spacing */
    letter-spacing: 0.2px; /* optional: helps readability when smaller */
  }

  footer .menu {
    gap: 2px 4px !important; /* slightly reduce grid gaps to save space */
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* ≤400px: scale footer menu font smaller */
@media (max-width: 399.98px) {
  footer .menu a {
    font-size: 16px !important; /* tweak down from your current size */
    line-height: 1 !important; /* tighter vertical spacing */
    letter-spacing: 0.3px; /* optional: helps readability when smaller */
  }

  footer .menu {
    gap: 0px 1px !important; /* slightly reduce grid gaps to save space */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ≤370px: scale footer menu font smaller */
@media (max-width: 369.98px) {
  footer .menu a {
    font-size: 14px !important; /* tweak down from your current size */
  }
}

/* ≤340px: scale footer menu font smaller */
@media (max-width: 339.98px) {
  footer .menu a {
    font-size: 12px !important; /* tweak down from your current size */
  }
}

/* -------------------------------------------------------------- */
/* -                                                            - */
/* -          H1 tightening tiers (≤700 / ≤630 / ≤580)            */
/* -                                                            - */
/* -------------------------------------------------------------- */

@media (max-width: 699.98px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
    margin: 8px 0 22px !important;
    white-space: normal !important;
  }
}
@media (min-width: 530px) and (max-width: 649.98px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    margin-right: 100px !important;
  }
}
@media (max-width: 649.98px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }
}
@media (max-width: 629.98px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(22px, 7vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }
}
@media (max-width: 612.98px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }
}
@media (max-width: 584.98px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(20px, 6.5vw, 30px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }
}
@media (max-width: 555.98px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(20px, 6.5vw, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }
}
@media (max-width: 382px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(16px, 6.5vw, 24px) !important;
    margin-top: 25px !important;
  }
}

@media (max-width: 370px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(14px, 6.5vw, 22px) !important;
  }
}

@media (max-width: 341px) {
  .page-title h1,
  .content-container .page-title h1,
  .navbar ~ .content-container .page-title h1 {
    font-size: clamp(12px, 6.5vw, 20px) !important;
  }
}

/* ------------------------------------------------------------------------ */
/* -                                                                      - */
/* -          H2 -> span - tightening tiers (≤700 / ≤630 / ≤580)          - */
/* -                                                                      - */
/* ------------------------------------------------------------------------ */

@media (max-width: 699.98px) {
  .page-title h2 span {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
    margin: 8px 0 12px !important;
    white-space: normal !important;
  }
}
@media (max-width: 629.98px) {
  .page-title h2 span {
    font-size: clamp(24px, 7vw, 36px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }
}
@media (max-width: 579.98px) {
  .page-title h2 span {
    font-size: clamp(20px, 6.5vw, 30px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
  }
}

/* ------------------------------------------------------ */
/* -                                                    - */
/* -          Carousel size caps (≤550 / ≤400)          - */
/* -                                                    - */
/* ------------------------------------------------------ */

@media (max-width: 899.98px) {
  .gallery {
    --s: min(90vw, 410px);
  }
}
@media (max-width: 749.98px) {
  .gallery {
    --s: min(90vw, 400px);
  }
}
@media (max-width: 699.98px) {
  .gallery {
    --s: min(90vw, 380px);
  }
}
@media (max-width: 649.98px) {
  .gallery {
    --s: min(90vw, 360px);
  }
}
@media (max-width: 599.98px) {
  .gallery {
    --s: min(89vw, 340px);
  }
}
@media (max-width: 549.98px) {
  .gallery {
    --s: min(88vw, 300px);
  }
}
@media (max-width: 499.98px) {
  .gallery {
    --s: min(87vw, 280px);
  }
}
@media (max-width: 449.98px) {
  .gallery {
    --s: min(86vw, 260px);
  }
}
@media (max-width: 399.98px) {
  .gallery {
    --s: min(85vw, 240px);
  }
}

/* ---------- Logo + carousel centering (≤520) ---------- */

@media (max-width: 519.98px) {
  .navbar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
  }
  .navbar .logo,
  .logo {
    position: static !important;
    margin: 0px auto !important;
    text-align: center;
  }
  .logo img {
    display: block;
    margin: 0 auto;
    max-width: 70%;
    height: auto;
  }
  .logo-mobile {
    display: none !important;
  } /* never show a second logo */

  .carousel-container,
  .carrousel-container,
  .main-img-carousel {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 20px !important;
  }
  .gallery {
    margin: 0 auto !important;
    max-width: 92vw;
  }
}

/* ---------------------------------------------------------- */
/* -                                                        - */
/* -          Main Accordion - no-overflow (≤529)           - */
/* -                                                        - */
/* ---------------------------------------------------------- */

@media (max-width: 529.98px) {
  html,
  body {
    overflow-x: hidden;
  }
  .accordion {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }
  .button-container {
    width: 100% !important;
    margin: 0 auto 16px !important;
    right: auto !important;
  }
  .button-main-yellow,
  .button-main-blue,
  .button-main-green,
  .button-main-red {
    width: 100% !important;
    right: 0 !important;
    height: 76px;
    margin: 0 0 14px 0 !important;
  }
  .accordion-content {
    right: auto !important;
    padding-inline: 12px !important;
    box-sizing: border-box;
  }
  .accordion-content-container {
    overflow-x: hidden;
  }
  .accordion-content-btn {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ---------- Aaccordion (Main) - Height & fonts size ---------- */

@media (max-width: 520px) {
  .button-text {
    font-size: 30px !important;
  }

  .button-main-yellow {
    height: 65px;
    margin-bottom: 0px !important;
  }

  .button-main-blue {
    height: 65px;
    margin-bottom: 0px !important;
  }

  .button-main-green {
    height: 65px;
    margin-bottom: 0px !important;
  }

  .button-main-red {
    height: 65px;
    margin-bottom: 0px !important;
  }

  .button-container {
    margin-bottom: -5px !important;
  }
}

@media (max-width: 440px) {
  .button-text {
    font-size: 26px !important;
  }

  .button-main-yellow {
    height: 62px;
    margin-bottom: 0px !important;
  }

  .button-main-blue {
    height: 62px;
    margin-bottom: 0px !important;
  }

  .button-main-green {
    height: 62px;
    margin-bottom: 0px !important;
  }

  .button-main-red {
    height: 62px;
    margin-bottom: 0px !important;
  }

  .button-container {
    margin-bottom: -10px !important;
  }
}

@media (max-width: 390px) {
  .button-text {
    font-size: 22px !important;
  }

  .button-main-yellow {
    height: 57px;
    margin-bottom: 0px !important;
  }

  .button-main-blue {
    height: 57px;
    margin-bottom: 0px !important;
  }

  .button-main-green {
    height: 57px;
    margin-bottom: 0px !important;
  }

  .button-main-red {
    height: 57px;
    margin-bottom: 0px !important;
  }

  .button-container {
    margin-bottom: -15px !important;
  }
}

@media (max-width: 344px) {
  .button-text {
    font-size: 20px !important;
  }

  .button-main-yellow {
    height: 51px;
    margin-bottom: 0px !important;
  }

  .button-main-blue {
    height: 51px;
    margin-bottom: 0px !important;
  }

  .button-main-green {
    height: 51px;
    margin-bottom: 0px !important;
  }

  .button-main-red {
    height: 51px;
    margin-bottom: 0px !important;
  }
}

@media (max-width: 322px) {
  .button-text {
    font-size: 18px !important;
  }

  .button-main-yellow {
    height: 50px;
    margin-bottom: 0px !important;
  }

  .button-main-blue {
    height: 50px;
    margin-bottom: 0px !important;
  }

  .button-main-green {
    height: 50px;
    margin-bottom: 0px !important;
  }

  .button-main-red {
    height: 50px;
    margin-bottom: 0px !important;
  }
}

/* ----------- Accordion Content ( + Buttons ) ----------- */
@media (max-width: 899.98px) {
  .accordion-content {
    right: 0% !important;
  }

  .accordion-content-container {
    margin-top: 20px;
  }

  .accordion-content-container button {
    margin-bottom: 5px;
  }

  .secondary-accordion-content {
    padding-bottom: 10px !important;
  }
}

@media (max-width: 582.98px) {
  .accordion-content-container {
    padding-top: 20px;
    margin-top: 0;
    margin-bottom: 10px !important;
    justify-items: center;
  }

  .accordion-content-container button {
    margin-bottom: 2px;
    width: 85% !important;
    height: 75px !important;
  }
}

@media (max-width: 399.98px) {
  .accordion-content-btn span {
    font-size: 22px !important;
  }
}

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* -                                                                - */
/* -          Aaccordion (Secondary) - Height & fonts size          - */
/* -                                                                - */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */

@media (max-width: 899.98px) {
  .secondary-buttons-panel {
    margin-top: 10px !important;
  }

  .secondary-button {
    width: 80%;
    height: 65px;
    left: 10%;
    margin: 3px 0;
  }

  /* Blue Accordion */

  .secondary-button-blue {
    border: 4px solid dodgerblue;
  }

  .secondary-button-text-blue {
    font-size: 28px;
  }

  /* Colored Accordion */

  .secondary-button-text {
    font-size: 22px;
    width: 90%;
    text-align: center;
  }

  .secondary-button-light-green {
    border: 5px solid limegreen;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-orange {
    border: 5px solid #ff9900;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-red {
    border: 5px solid #ff4d4d;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-dark-green {
    border: 5px solid #55a000;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-pink {
    border: 5px solid #f6a4c9;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-gray {
    border: 5px solid #aaa;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-light-purple {
    border: 5px solid #f79bf6;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-light-blue {
    border: 5px solid #76bae4;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-orchid {
    border: 5px solid orchid;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-violet {
    border: 5px solid #9966cc;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-cornflowerblue {
    border: 5px solid CornflowerBlue;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-lightseagreen {
    border: 5px solid LightSeaGreen;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-lightsalmon {
    border: 5px solid lightsalmon;
    width: 85%;
    transform: translateX(-2%);
  }

  .secondary-button-gold {
    border: 5px solid gold;
    width: 85%;
    transform: translateX(-2%);
  }
}

@media (max-width: 529.9px) {
  .secondary-buttons-panel {
    margin-top: 10px !important;
  }

  .secondary-button {
    width: 70%;
    height: 62px;
    left: 14%;
    margin: 3px 0;
  }

  .secondary-button:hover {
    transform: translatex(-15px);
  }

  /* Blue Accordion */

  .secondary-button-blue {
    border: 4px solid dodgerblue;
  }

  .secondary-button-text-blue {
    font-size: 28px;
  }

  /* Colored Accordion */

  .secondary-button-text {
    font-size: 22px;
    width: 90%;
    text-align: center;
  }

  .secondary-button-light-green {
    border: 5px solid limegreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orange {
    border: 5px solid #ff9900;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-red {
    border: 5px solid #ff4d4d;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-dark-green {
    border: 5px solid #55a000;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-pink {
    border: 5px solid #f6a4c9;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gray {
    border: 5px solid #aaa;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-purple {
    border: 5px solid #f79bf6;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-blue {
    border: 5px solid #76bae4;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orchid {
    border: 5px solid orchid;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-violet {
    border: 5px solid #9966cc;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-cornflowerblue {
    border: 5px solid CornflowerBlue;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightseagreen {
    border: 5px solid LightSeaGreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightsalmon {
    border: 5px solid lightsalmon;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gold {
    border: 5px solid gold;
    width: 90%;
    transform: translateX(-10%);
  }
}

@media (max-width: 459.9px) {
  .secondary-buttons-panel {
    margin-top: 10px !important;
  }

  .secondary-button {
    width: 70%;
    height: 60px;
    left: 14%;
    margin: 3px 0;
  }

  /* Blue Accordion */

  .secondary-button-blue {
    border: 4px solid dodgerblue;
  }

  .secondary-button-text-blue {
    font-size: 24px;
  }

  /* Colored Accordion */

  .secondary-button-text {
    font-size: 20px;
    width: 90%;
    text-align: center;
  }

  .secondary-button-light-green {
    border: 5px solid limegreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orange {
    border: 5px solid #ff9900;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-red {
    border: 5px solid #ff4d4d;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-dark-green {
    border: 5px solid #55a000;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-pink {
    border: 5px solid #f6a4c9;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gray {
    border: 5px solid #aaa;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-purple {
    border: 5px solid #f79bf6;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-blue {
    border: 5px solid #76bae4;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orchid {
    border: 5px solid orchid;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-violet {
    border: 5px solid #9966cc;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-cornflowerblue {
    border: 5px solid CornflowerBlue;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightseagreen {
    border: 5px solid LightSeaGreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightsalmon {
    border: 5px solid lightsalmon;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gold {
    border: 5px solid gold;
    width: 90%;
    transform: translateX(-10%);
  }
}

@media (max-width: 409.9px) {
  .secondary-buttons-panel {
    margin-top: 10px !important;
  }

  .secondary-button {
    width: 70%;
    height: 58px;
    left: 14%;
    margin: 3px 0;
  }

  /* Blue Accordion */

  .secondary-button-blue {
    border: 4px solid dodgerblue;
  }

  .secondary-button-text-blue {
    font-size: 20px;
  }

  /* Colored Accordion */

  .secondary-button-text {
    font-size: 18px;
    width: 90%;
    text-align: center;
  }

  .secondary-button-light-green {
    border: 5px solid limegreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orange {
    border: 5px solid #ff9900;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-red {
    border: 5px solid #ff4d4d;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-dark-green {
    border: 5px solid #55a000;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-pink {
    border: 5px solid #f6a4c9;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gray {
    border: 5px solid #aaa;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-purple {
    border: 5px solid #f79bf6;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-blue {
    border: 5px solid #76bae4;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orchid {
    border: 5px solid orchid;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-violet {
    border: 5px solid #9966cc;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-cornflowerblue {
    border: 5px solid CornflowerBlue;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightseagreen {
    border: 5px solid LightSeaGreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightsalmon {
    border: 5px solid lightsalmon;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gold {
    border: 5px solid gold;
    width: 90%;
    transform: translateX(-10%);
  }
}

@media (max-width: 369.9px) {
  .secondary-buttons-panel {
    margin-top: 10px !important;
  }

  .secondary-button {
    width: 70%;
    height: 55px;
    left: 14%;
    margin: 3px 0;
  }

  /* Blue Accordion */

  .secondary-button-blue {
    border: 4px solid dodgerblue;
  }

  .secondary-button-text-blue {
    font-size: 18px;
  }

  /* Colored Accordion */

  .secondary-button-text {
    font-size: 16px;
    width: 90%;
    text-align: center;
  }

  .secondary-button-light-green {
    border: 5px solid limegreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orange {
    border: 5px solid #ff9900;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-red {
    border: 5px solid #ff4d4d;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-dark-green {
    border: 5px solid #55a000;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-pink {
    border: 5px solid #f6a4c9;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gray {
    border: 5px solid #aaa;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-purple {
    border: 5px solid #f79bf6;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-blue {
    border: 5px solid #76bae4;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orchid {
    border: 5px solid orchid;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-violet {
    border: 5px solid #9966cc;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-cornflowerblue {
    border: 5px solid CornflowerBlue;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightseagreen {
    border: 5px solid LightSeaGreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightsalmon {
    border: 5px solid lightsalmon;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gold {
    border: 5px solid gold;
    width: 90%;
    transform: translateX(-10%);
  }
}

@media (max-width: 339.9px) {
  .secondary-buttons-panel {
    margin-top: 10px !important;
  }

  .secondary-button {
    width: 70%;
    height: 52px;
    left: 14%;
    margin: 3px 0;
  }

  /* Blue Accordion */

  .secondary-button-blue {
    border: 4px solid dodgerblue;
  }

  .secondary-button-text-blue {
    font-size: 16px;
  }

  /* Colored Accordion */

  .secondary-button-text {
    font-size: 14px;
    width: 90%;
    text-align: center;
  }

  .secondary-button-light-green {
    border: 5px solid limegreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orange {
    border: 5px solid #ff9900;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-red {
    border: 5px solid #ff4d4d;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-dark-green {
    border: 5px solid #55a000;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-pink {
    border: 5px solid #f6a4c9;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gray {
    border: 5px solid #aaa;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-purple {
    border: 5px solid #f79bf6;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-light-blue {
    border: 5px solid #76bae4;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-orchid {
    border: 5px solid orchid;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-violet {
    border: 5px solid #9966cc;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-cornflowerblue {
    border: 5px solid CornflowerBlue;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightseagreen {
    border: 5px solid LightSeaGreen;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-lightsalmon {
    border: 5px solid lightsalmon;
    width: 90%;
    transform: translateX(-10%);
  }

  .secondary-button-gold {
    border: 5px solid gold;
    width: 90%;
    transform: translateX(-10%);
  }
}

/* ---------- Ultra-narrow safety clamp (≤400) ---------- */
@media (max-width: 399.98px) {
  .scale-wrapper,
  .content-container,
  .page-title,
  .image-sidemenu-container,
  .carousel-container,
  .carrousel-container,
  .main-img-carousel,
  .accordion,
  .button-container,
  footer,
  .gallery {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  img,
  svg,
  canvas,
  video {
    max-width: 100% !important;
    height: auto !important;
  }
  footer {
    position: relative !important;
  } /* keep waves anchored to footer, not viewport */
}

/*---------------------------------------*/
/*                                       */
/*    PATCH: to fix the 530–649px band   */
/*                                       */
/*---------------------------------------*/

@media (min-width: 530px) and (max-width: 649.98px) {
  /* Let the page breathe or, better, prevent overflow in the first place */
  html,
  body {
    overflow-x: hidden; /* keep hidden */
  }

  /* Clamp common wrappers hard to the viewport so nothing can exceed 100vw */
  .scale-wrapper,
  .content-container,
  .page-title,
  .image-sidemenu-container,
  .carousel-container,
  .carrousel-container,
  .main-img-carousel,
  .accordion,
  .gallery {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Titles: remove the desktop-ish nudge that can push text out */
  .page-title h1 {
    transform: none !important;
  }
}

/* ---------- Container queries (optional fine control) ---------- */
@container (min-width: 600px) {
  .accordion {
    width: 80%;
  }
}
@container (min-width: 1200px) {
  .accordion {
    width: 62%;
  }
}

/* =======================================================================
   - Hide .logo-mobile by default (prevents double logos on ≥900px)
   - Add midrange safety clamp (≤530px) so layout keeps shrinking
   ======================================================================= */

/* Hide the optional mobile-only logo everywhere unless explicitly shown */
.logo-mobile {
  display: none !important;
}

/* Desktop explicit (>=900px) — make sure .logo-mobile never appears */
@media (min-width: 900px) {
  .logo-mobile {
    display: none !important;
  }
}

/* Midrange safety clamp — ensures wrappers don't exceed viewport at ≤530px */
@media (max-width: 529.98px) {
  /* Prevent any horizontal overflow */
  html,
  body {
    margin: 0;
    overflow-x: hidden;
  }

  /* Clamp common wrappers to viewport width and neutralize offsets */
  .scale-wrapper,
  .content-container,
  .page-title,
  .image-sidemenu-container,
  .carousel-container,
  .carrousel-container,
  .main-img-carousel,
  .accordion,
  .button-container,
  footer,
  .gallery {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Media elements should never push width */
  img,
  svg,
  canvas,
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Keep waves anchored to the footer (needed if another rule set footer static) */
  footer {
    position: relative !important;
  }
}

/* ==============================================================================  */
/*   LARGE SCREENS (desktop zoom handled by JS on your site for 3800px - 9999px)   */
/*   These ranges scale the .scale-wrapper for big displays.                       */
/* =============================================================================== */

@media (min-width: 3800px) and (max-width: 3849px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.904);
    transform-origin: top left;
    width: calc(100% / 1.904);
    min-height: 100vh;
  }
}
@media (min-width: 3850px) and (max-width: 3899px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.938);
    transform-origin: top left;
    width: calc(100% / 1.938);
    min-height: 100vh;
  }
}
@media (min-width: 3900px) and (max-width: 3949px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.958);
    transform-origin: top left;
    width: calc(100% / 1.958);
    min-height: 100vh;
  }
}
@media (min-width: 3950px) and (max-width: 3999px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(1.982);
    transform-origin: top left;
    width: calc(100% / 1.982);
    min-height: 100vh;
  }
}
@media (min-width: 4000px) and (max-width: 4049px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.006);
    transform-origin: top left;
    width: calc(100% / 2.006);
    min-height: 100vh;
  }
}
@media (min-width: 4050px) and (max-width: 4099px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.03);
    transform-origin: top left;
    width: calc(100% / 2.03);
    min-height: 100vh;
  }
}
@media (min-width: 4100px) and (max-width: 4149px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.072);
    transform-origin: top left;
    width: calc(100% / 2.072);
    min-height: 100vh;
  }
}
@media (min-width: 4150px) and (max-width: 4199px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.09);
    transform-origin: top left;
    width: calc(100% / 2.09);
    min-height: 100vh;
  }
}
@media (min-width: 4200px) and (max-width: 4249px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.114);
    transform-origin: top left;
    width: calc(100% / 2.114);
    min-height: 100vh;
  }
}
@media (min-width: 4250px) and (max-width: 4299px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.136);
    transform-origin: top left;
    width: calc(100% / 2.136);
    min-height: 100vh;
  }
}
@media (min-width: 4300px) and (max-width: 4349px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.158);
    transform-origin: top left;
    width: calc(100% / 2.158);
    min-height: 100vh;
  }
}
@media (min-width: 4350px) and (max-width: 4399px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.172);
    transform-origin: top left;
    width: calc(100% / 2.172);
    min-height: 100vh;
  }
}
@media (min-width: 4400px) and (max-width: 4449px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.198);
    transform-origin: top left;
    width: calc(100% / 2.198);
    min-height: 100vh;
  }
}
@media (min-width: 4450px) and (max-width: 4499px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.226);
    transform-origin: top left;
    width: calc(100% / 2.226);
    min-height: 100vh;
  }
}
@media (min-width: 4500px) and (max-width: 4549px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.25);
    transform-origin: top left;
    width: calc(100% / 2.25);
    min-height: 100vh;
  }
}
@media (min-width: 4550px) and (max-width: 4599px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.272);
    transform-origin: top left;
    width: calc(100% / 2.272);
    min-height: 100vh;
  }
}
@media (min-width: 4600px) and (max-width: 4649px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.302);
    transform-origin: top left;
    width: calc(100% / 2.302);
    min-height: 100vh;
  }
}
@media (min-width: 4650px) and (max-width: 4699px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.33);
    transform-origin: top left;
    width: calc(100% / 2.33);
    min-height: 100vh;
  }
}
@media (min-width: 4700px) and (max-width: 4749px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.358);
    transform-origin: top left;
    width: calc(100% / 2.358);
    min-height: 100vh;
  }
}
@media (min-width: 4750px) and (max-width: 4799px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.378);
    transform-origin: top left;
    width: calc(100% / 2.378);
    min-height: 100vh;
  }
}
@media (min-width: 4800px) and (max-width: 4849px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.412);
    transform-origin: top left;
    width: calc(100% / 2.412);
    min-height: 100vh;
  }
}
@media (min-width: 4850px) and (max-width: 4899px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.432);
    transform-origin: top left;
    width: calc(100% / 2.432);
    min-height: 100vh;
  }
}
@media (min-width: 4900px) and (max-width: 4949px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.458);
    transform-origin: top left;
    width: calc(100% / 2.458);
    min-height: 100vh;
  }
}
@media (min-width: 4950px) and (max-width: 4999px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.48);
    transform-origin: top left;
    width: calc(100% / 2.48);
    min-height: 100vh;
  }
}
/* ----- */
@media (min-width: 5000px) and (max-width: 5049px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.482);
    transform-origin: top left;
    width: calc(100% / 2.482);
    min-height: 100vh;
  }
}
@media (min-width: 5050px) and (max-width: 5099px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.514);
    transform-origin: top left;
    width: calc(100% / 2.514);
    min-height: 100vh;
  }
}
/* ----- */
@media (min-width: 5100px) and (max-width: 5299px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.6);
    transform-origin: top left;
    width: calc(100% / 2.6);
    min-height: 100vh;
  }
}
@media (min-width: 5300px) and (max-width: 5499px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.7);
    transform-origin: top left;
    width: calc(100% / 2.7);
    min-height: 100vh;
  }
}
@media (min-width: 5500px) and (max-width: 5699px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.8);
    transform-origin: top left;
    width: calc(100% / 2.8);
    min-height: 100vh;
  }
}
@media (min-width: 5700px) and (max-width: 5899px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(2.9);
    transform-origin: top left;
    width: calc(100% / 2.9);
    min-height: 100vh;
  }
}
@media (min-width: 5900px) and (max-width: 6099px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3);
    transform-origin: top left;
    width: calc(100% / 3);
    min-height: 100vh;
  }
}
@media (min-width: 6100px) and (max-width: 6299px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.1);
    transform-origin: top left;
    width: calc(100% / 3.1);
    min-height: 100vh;
  }
}
@media (min-width: 6300px) and (max-width: 6499px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.2);
    transform-origin: top left;
    width: calc(100% / 3.2);
    min-height: 100vh;
  }
}
@media (min-width: 6500px) and (max-width: 6699px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.3);
    transform-origin: top left;
    width: calc(100% / 3.3);
    min-height: 100vh;
  }
}
@media (min-width: 6700px) and (max-width: 6899px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.4);
    transform-origin: top left;
    width: calc(100% / 3.4);
    min-height: 100vh;
  }
}
@media (min-width: 6900px) and (max-width: 7099px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.5);
    transform-origin: top left;
    width: calc(100% / 3.5);
    min-height: 100vh;
  }
}
@media (min-width: 7100px) and (max-width: 7299px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.6);
    transform-origin: top left;
    width: calc(100% / 3.6);
    min-height: 100vh;
  }
}
@media (min-width: 7300px) and (max-width: 7499px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.7);
    transform-origin: top left;
    width: calc(100% / 3.7);
    min-height: 100vh;
  }
}
@media (min-width: 7500px) and (max-width: 7699px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.8);
    transform-origin: top left;
    width: calc(100% / 3.8);
    min-height: 100vh;
  }
}
@media (min-width: 7700px) and (max-width: 7899px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(3.9);
    transform-origin: top left;
    width: calc(100% / 3.9);
    min-height: 100vh;
  }
}
@media (min-width: 7900px) and (max-width: 8099px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(4);
    transform-origin: top left;
    width: calc(100% / 4);
    min-height: 100vh;
  }
}
@media (min-width: 8100px) and (max-width: 8299px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(4.1);
    transform-origin: top left;
    width: calc(100% / 4.1);
    min-height: 100vh;
  }
}

@media (min-width: 8299px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(4.3);
    transform-origin: top left;
    width: calc(100% / 4.3);
    min-height: 100vh;
  }
}
@media (min-width: 9000px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto;
    height: 100%;
  }
  .scale-wrapper {
    transform: scale(4.7);
    transform-origin: top left;
    width: calc(100% / 4.7);
    min-height: 100vh;
  }
}