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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background: white;
  font-family: "Noto Sans", sans-serif;
  color: #000;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

p {
  font-size: clamp(16px, 1rem + 0.8vw, 21px);
  line-height: 1.55;
}

h1 {
  font-size: clamp(44px, 6vw, 52px);
  line-height: 0.95;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

h1 span {
  display: block;
}

h3 {
  display: block;
}

p span {
  display: block;
}

/* CONTAINER FLUIDO */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* HEADER FLUIDA */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.header-container {
  width: 100%;
  height: 48px;
  margin: 0 auto;
  padding: 0px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}

.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: background 0.2s ease;
}

.lang-btn:hover {
  background: #f5f5f5;
}

.lang-menu {
  display: none;
  position: absolute;
  top: 120%;
  right: 0;
  background-color: white;
  min-width: 80px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  z-index: 101;
}

.lang-menu a {
  color: black;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  text-align: center;
  transition: background 0.2s ease;
}

.lang-menu a:hover {
  background-color: #f0f0f0;
}

.lang-dropdown.open .lang-menu {
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-menu a {
  display: block;
  color: rgb(138, 140, 152);
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  text-decoration: none;
  font-size: 16px;
  padding: 0 0 0 10px;
  line-height: 48px;
  white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: #46435B;
}

.nav-menu .active {
  color: #46435B;
}

.nav-menu:hover {
  color: #46435B;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #46435B;
  border-radius: 2px;
}

/* Attivazione Mobile a 768px */
@media (max-width: 768px) {
  .header-container {
    justify-content: space-between; /* Spinge lingue a sinistra e hamburger a destra */
  }

  .hamburger {
    display: flex; /* Rivela il bottone */
  }

  /* Il menu diventa una tendina sotto l'header */
  .nav-menu {
    position: absolute;
    top: 100%; /* Si attacca esattamente al bordo basso dell'header */
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: none; /* Nasconde la tendina */
  }

  /* Questa classe verrà aggiunta dal Javascript al click */
  .nav-menu.open {
    display: flex;
    padding: 15px 0;
    gap: 15px;
  }

  .nav-menu a {
    line-height: normal;
    padding: 5px;
    font-size: 18px;
  }
}


/* HERO FLUIDA */
.hero {
  padding-top: 48px;
  padding-bottom: 70px;
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 0;
}

/* LEFT HERO */
.hero-left {
  flex: 0 1 450px;
  max-width: 500px;
  padding-top: 80px;
}

.hero-logo {
  width: 100%;
  max-width: 365px;
  height: auto;
  margin-bottom: 30px;
  float: right;
  margin-right: 13%;
}

.hero-left h1 {
  font-size: 52px;
  line-height: 0.95;
  margin-bottom: 25px;
  white-space: normal;
}

.hero-text {
  max-width: 500px;
  margin-bottom: 20px;
}

.hero-text-bottom {
  margin-top: 15px;
  margin-bottom: 35px;
}

/* CTA */
.hero-cta {
  display: flex;
  width: 100%;
  max-width: 390px;
  height: 56px;
  border: 1px solid black;
  border-radius: 8px 8px 0 8px;
  overflow: hidden;
}

.hero-cta input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding-left: 20px;
  font-size: 16px;
  font-family: "Noto Sans", sans-serif;
}

.hero-cta button {
  width: 140px;
  flex-shrink: 0;
  background: black;
  color: white;
  border: none;
  cursor: pointer;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
}

.hero-cta button:hover {
  background: #222;
}

/* RIGHT HERO */
.hero-right {
  flex: 0 1 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero-image {
  width: 90%;
  height: auto;
  overflow: hidden;
  border-radius: 0 0 0 90px;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-credits {
  margin-top: 40px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #3c4155;
}

.hero-credits img {
  width: 36.4688px;
  height: 16.8906px;
}

/* SECTION ACADEMIC */

.academic {
  padding-top: 70px;
}

.academic-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

/* LAPTOP */

.academic-left {
  flex: 0 1 700px;
  max-width: 100%;
}

.laptop-container {
  position: relative;
  width: 100%;
  transform: translateX(-15%);
}

.laptop {
  width: 100%;
  position: relative;
  z-index: 2;
}

.laptop-screen {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 0%;
  width: 86%;
}

/* TESTO */

.academic-right {
  flex: 1 1 500px;
}

.academic-right h1 {
  margin-bottom: 25px;
}

.academic-right p {
  margin-bottom: 30px;
}

.university-logos {
  display: flex;
  align-items: center;
}

.university-logos img {
  width: 220px;
  height: auto;
}

/*--------SECTION 3 RULES---------*/

.rules {
  padding: 45px 0;
}

.rules-content {
  display: flex;
  align-items: flex-start;
  gap: 10%;
}

/* LEFT */

.rules-left {
  flex: 0 1 500px;
  position: relative;
}

.rules-left .form-btn {
  margin: 40px 80px 0;
  display: flex;
}

/*LEFT EMOJIES */

.yellow-smile {
  position: absolute;
  width: clamp(20px, 7.15%, 28px);
  height: auto;
  left: 30%;
  transform: translate(-50%, -50%);
}

.red-angry {
  position: absolute;
  width: clamp(24px, 8.8%, 34px);
  height: auto;
  top: 6%;
  left: 90%;
  transform: translate(-50%, -50%);
}

/* TESTO */

.rules-left h1 {
  font-size: 52px;
  line-height: 0.95;
  margin-top: 64px;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 45px;
}

.rule-first {
  margin-left: 7px;
}

.rule-second {
  margin-top: 32px;
  gap: 30px;
}

.rule-third {
  margin-top: 34px;
  gap: 30px;
}

.rule-number {
  width: 40px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 45.333px;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
}

.rule-first .rule-content h3 {
  transform: translateX(10px);
}

.rule-content h3 {
  font-size: clamp(16px, 5.55vw, 21.33px);
  font-weight: 700;
  margin-bottom: 6px;
}

/* RIGHT */

.rules-right {
  padding-top: 63.4844px;
  flex: 0 1 700px;
  max-width: 100%;
  flex-direction: column;
}

/* CONTENITORE GENERALE */
.game-uni-experience-container {
  display: flex;
  justify-content: flex-start;
}

.monash-img-container {
  position: relative;
  width: clamp(240px, 80%, 384.65px);
  flex-shrink: 0;
  min-width: 280px;
  aspect-ratio: 384.65 / 276.55;
  overflow: hidden;
  border-radius: 100px;
  z-index: 2;
  box-shadow: clamp(20px, 5vw, 35px) clamp(20px, 5vw, 35px) 0 #8e7cc1;
}

.meeting-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.green-v-smile {
  position: relative;
  max-width: 2.313rem;
  width: 100%;
  max-height: 2.313rem;
  height: 100%;
  z-index: 3;
}

.students-bubble-container {
  position: relative;
  background-color: rgb(245, 245, 245);
  max-width: 182px;
  width: 100%;
  max-height: 80px;
  height: 100%;
  z-index: 3;
  border-radius: 0 19.64px 19.64px 19.64px;
}

.students-bubble-container span {
  display: block;
  margin: 10px;
  font-family: "Noto Sans", sans-serif;
  font-size: 13.3335px;
}

.debrief-main-container {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 60px;
}

.bubble-graph-layout {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2%;
}

.debrief-bubble-container {
  background-color: rgb(245, 245, 245);
  max-width: 203px;
  width: 100%;
  max-height: 102px;
  height: 100%;
  border-radius: 19.64px 0 19.64px 19.64px;
  box-sizing: border-box;
}

.debrief-bubble-container span {
  display: block;
  margin: 16px 0 4px 13px;
  font-family: "Noto Sans", sans-serif;
  font-size: 13.3335px;
}

.green-r-smile {
  width: clamp(28px, 2.8vw, 41px);
  height: auto;
}

.students-graph-container {
  position: relative;
  width: clamp(240px, 80%, 384.65px);
  flex-shrink: 0;
  min-width: 280px;
  aspect-ratio: 384.65 / 276.55;
  overflow: hidden;
  border-radius: 100px 0 0 100px;
  border: 1px solid #000;
  border-right: 0;
  z-index: 2;
  box-shadow:
    calc(-1 * clamp(20px, 5vw, 25px)) clamp(20px, 5vw, 25px) 0 #e8b971,
    0px clamp(20px, 5vw, 25px) 0 #e8b971;
}

.student-graph-img {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.yellow-sad {
  position: absolute;
  top: 40%;
  width: clamp(20px, 7.54%, 29px);
  height: auto;
  margin-top: 7%;
}

/*--------SECTION 4 LEARN---------*/

.learn {
  padding-top: 80px;
}

.learn-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.learn-left {
  flex: 0 1 500px;
  position: relative;
  margin-top: 50px;
  margin-left: 5%;
}

/* --- L'SVG DI JEFF --- */
.jeff-svg {
  position: absolute;
  width: 37.6%;
  aspect-ratio: 1 / 1;
  top: -8.3%;
  left: -8.4%;
  z-index: 4;
}

.jeff-bubble {
  position: absolute;
  width: clamp(140px, 15vw, 217px);
  height: clamp(35px, 3.5vw, 49px);
  background-color: rgb(245, 245, 245);
  border-radius: 19.64px 19.64px 19.64px 0;

  top: -78px;
  left: 110px;
  z-index: 3;

  display: flex;
  align-items: center;
}

.jeff-bubble span {
  margin: 7%;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 18.67px);
  color: #000;
}

/* --- IL BOX VERDE ACQUA --- */
.impara-box {
  position: relative;
  width: 100%;
  max-width: 474px;
  aspect-ratio: 474 / 543;
  background-color: rgb(191, 230, 229);
  border-radius: 25.94% / 22.64%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16.9% 9.5% 9.5% 9.5%;
  /* rimosso overflow: hidden — copriva Jeff che deve sporgere fuori */
}

.impara-box h1 {
  position: relative;
  font-size: clamp(30px, 2.6vw, 37.3335px);
  line-height: 1.05;
  margin: 0 auto;
  text-align: center;
  transform: translate(13%, -0.75em);
  /* em invece di px: scala col font */
  white-space: nowrap;
}

.impara-points-container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 30px auto 0 0;
  gap: 19px;
}

.impara-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.yellow-plus-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.impara-item p {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 18.6667px;
  line-height: 1.18;
  text-align: left;
  color: #000;
}

.learn-right {
  position: relative;
  flex: 1 1 474px;
  max-width: 500px;
  min-width: 280px;
  margin-top: 50px;
}

.green-puke {
  position: relative;
  width: 19.3281px;
  height: 19.3281px;
  float: right;
}

.need-box {
  position: relative;
  width: 100%;
  max-width: 474px;
  aspect-ratio: 474 / 543;
  background-color: #fbfbfb;
  border-radius: 25.94% / 22.64%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16.9% 9.5% 9.5% 9.5%;
}

.need-box h1 {
  position: relative;
  font-size: 37.3335px;
  line-height: 1.05;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-0.75em);
  white-space: nowrap;
}

.what-needed-container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 auto 0 0;
  /* gap ridotto per guadagnare spazio */
  gap: 12px;
}

.need-item p {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 18.67px;
  /* minimo più basso di prima */
  line-height: 1.1;
  text-align: left;
  color: #000;
}

/* Avatar Maria: Posizionato in Basso a Destra */
.maria-svg {
  position: absolute;
  width: 37.6%;
  aspect-ratio: 1 / 1;
  bottom: -8.3%;
  right: -8.4%;
  z-index: 4;
}

/* Fumetto di Maria: Posizionato a sinistra di Maria in basso */
.maria-bubble {
  position: absolute;
  width: clamp(160px, 15vw, 224px);
  height: clamp(35px, 3.5vw, 49px);
  background-color: rgb(245, 245, 245);
  border-radius: 19.64px 0 19.64px 19.64px;
  /* Bordo a punta verso Maria */

  bottom: -58px;
  right: 130px;
  z-index: 3;

  display: flex;
  align-items: center;
}

.maria-bubble span {
  margin: 7%;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 18.67px);
  color: #000;
}

/*--------SECTION 5 ADOZIONE---------*/

.adozione {
  padding-top: 92px;
}

.adozione-content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.adozione-left {
  flex: 0 1 500px;
  position: relative;
}

.adozione-left .form-btn {
  margin: 60px 110px 0;
  display: flex;
}

.red-angry2 {
  position: relative;
  height: 26.75px;
  width: 26.75px;
  left: 29%;
}

.yellow-big-smile {
  position: relative;
  width: clamp(24px, 1.5vw + 18px, 35.77px);
  aspect-ratio: 1 / 1;
  float: right;
  margin-top: 30px;
}

.adozione-left h1 {
  font-size: 52px;
  line-height: 54px;
  margin-top: 16%;
}

.adozione-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 45px;
}

.adozione-second {
  margin-top: 32px;
}

.adozione-number {
  font-family: "Bebas Neue", sans-serif;
  font-size: 45.333px;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
}

.adozione-text {
  margin-left: 20px;
}

.adozione-text h3 {
  font-size: 21.3333px;
  font-weight: 700;
  margin-bottom: 2px;
  text-align: left;
}

.adozione-text p {
  font-size: 21px;
  line-height: 1.5;
  text-align: left;
}

.yellow-star {
  position: absolute;
  left: 78%;
  top: 98%;
}

.adozione-right {
  flex: 0 1 700px;
  position: relative;
}

.play-me {
  display: flex;
  margin-top: 4%;
  margin-left: 35%;
  gap: 7px;
  padding-bottom: 18px;
}

.play-me span {
  font-family: "Oswald", sans-serif;
  font-size: 18.6673px;
  font-weight: bold;
  transform: translateY(-15px);
}

.green-v-smile2 {
  width: 39.5625px;
  height: 39.5625px;
  transform: translateY(-16px);
}

.laptop-container-video {
  position: relative;
  width: 100%;
}

.laptop-adozione {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

.screen-area {
  position: absolute;
  z-index: 3;
  top: 7.7%;
  left: 13.9%;
  width: 86.1%;
  height: 80%;
  background-color: #000;
  overflow: hidden;
}

.vid-tutorial {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

video::-webkit-media-controls-panel {
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !important;
}

/* Rende la barra di riempimento nativa di colore bianco */
video::-webkit-media-controls-timeline {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.green-r-smile2 {
  height: 40.9219px;
  width: 40.9219px;
  margin-top: 2%;
  margin-left: 84%;
}

/*--------SECTION 6 PROVA---------*/

.prova {
  padding-top: 130px;
}

.prova-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.prova-left {
  flex: 0 1 700px;
  position: relative;
}

.prova-main-img {
  width: 614px;
  height: 767px;
  transform: translateX(-13%);
}

.prova-right {
  flex: 0 1 700px;
  position: relative;
  margin-top: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prova-right h1 {
  font-size: 52px;
}

.prova-title {
  height: 97.4844px;
  width: 401.156px;
}

.prova-links-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 7%;
}

.purple-prova-bg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9e5f4;
  width: 237px;
  height: 59px;
  border-radius: 100px;
}

.purple-prova-bg p {
  position: absolute;
  font-family: "Oswald", sans-serif;
  font-size: 15.2px;
  font-weight: 400;
  line-height: 19px;
  top: 18%;
}

.prova-tutorial-vid {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 39.9688px;
  width: 119.094px;
  background-color: #fff;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 5px 5px 0 #000;
  border: 1px solid #000;
  bottom: -30%;
}

.prova-tutorial-vid span {
  font-family: "Oswald", sans-serif;
  font-size: 15.8332px;
  font-weight: 700;
  color: #000;
}

.link-due {
  margin-top: 16%;
}

.link-tre {
  margin-top: 16%;
  background-color: #c1ebe9;
}

.link-quattro {
  margin-top: 16%;
  background-color: #fad663;
}

.form-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 59px;
  width: 177px;
  background-color: #fff;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 8px 8px 0 #000;
  border: 1px solid #000;
  margin-top: 70px;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.form-btn span {
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  transition: color 0.25s ease;
}

.form-btn:hover {
  background-color: #000;
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 #000;
}

.form-btn:hover span {
  color: #fff;
}

.prova-credits {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #3c4155;
  align-self: flex-end;
}

.prova-credits img {
  width: 36.4688px;
  height: 16.8906px;
}

/*--------SECTION 7 CUSTOM---------*/

.custom-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.custom-left {
  flex: 0 1 500px;
  position: relative;
}

.custom-img-container {
  background-color: #c1ebe9;
  height: 770px;
  width: 346.984px;
  transform: translateX(-23%);
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

.blue-guy-img {
  position: absolute;
  left: 23%;
  width: 100%;
  max-width: 422.281px;
  height: 579px;
}

.custom-right {
  flex: 0 1 700px;
  position: relative;
}

.custom-right h1 {
  font-size: 51.9998px;
  margin-top: 12%;
  margin-left: 5%;
}

.on-demand {
  display: flex;
  margin-left: 60%;
  margin-top: 7%;
}

.freccia-custom {
  height: 29.2344px;
  width: 47.6406px;
}

.star-custom {
  width: 35.7656px;
  height: 35.7656px;
  transform: translate(20%, -40%);
}

.on-demand span {
  font-size: 19px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  transform: translate(18%, -40%);
}

.custom-boxes-container {
  display: flex;
  gap: 40px;
  justify-content: flex-start;
  margin-top: 1%;
}

.level-box {
  width: clamp(310px, 20vw + 180px, 316.38px);
  aspect-ratio: 316.38 / 362.67;
  height: auto;
  max-width: 100%;
  background-color: #f5f5f5;
  border-radius: 67px;

  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

  transform: translateX(-22%);
}

.level-box h1 {
  font-size: 37.3335px;
  margin-right: 5%;
  margin-top: 18%;
}

.level-box p {
  font-size: 18.6667px;
  line-height: 22px;
  margin-top: 5%;
}

.crisi-box {
  background-color: #e9e5f4;
}

.price-box {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 49.7812px;
  width: 148.312px;
  background-color: #fff;
  border-radius: 100px;
  box-shadow: 7px 7px 0 #000;
  border: 1px solid #000;
  bottom: -10px;
}

.price-box span {
  position: absolute;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  left: 23%;
}

.price-box p {
  font-family: "Oswald", sans-serif;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  left: 66%;
  top: 5px;
}

.inclusa {
  display: flex;
  gap: 15px;
  margin-top: 3%;
  margin-left: 5%;
}

.inclusa .freccia-custom {
  transform: scaleY(-1);
}

.virus-custom {
  width: 39.5px;
  height: 39.5px;
  transform: translate(-10%, 20%);
}

.inclusa span {
  font-size: 19px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  transform: translate(-20%, 27%);
}

/*--------SECTION 8 FORMAZIONE---------*/

.formazione-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.formazione-left {
  flex: 0 1 700px;
  position: relative;
}

.formazione-left .form-btn {
  margin: 100px 270px 0;
  display: flex;
}

.formazione-left h1 {
  margin-top: 10%;
  margin-left: 15%;
  font-size: 52px;
}

.support-box {
  background-color: #e9e5f4;
  margin-top: 8%;
  margin-left: 38%;
}

.support-box h1 {
  font-size: 37.3335px;
  text-align: center;
  transform: translateX(-6.7%);
  line-height: 39px;
}

.support-box p {
  line-height: 22px;
  margin-top: 6%;
}

.support-box span {
  line-height: 22px;
  margin-top: 6%;
  font-family: "Oswald", sans-serif;
  font-size: 15.7186px;
}

.support-box .price-box span {
  transform: translateY(-20%);
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

.formazione-right {
  flex: 0 1 600px;
}

.formazione-img-container {
  position: relative;
  float: right;
  background-color: #937fc7;
  height: 770px;
  width: 346.984px;
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

.green-lady-img {
  position: absolute;
  right: 30%;
  width: 100%;
  max-width: 422.281px;
  height: 790px;
}

/*-------- SECTION 9 INPUT ---------*/

.input-content {
  display: flex;
  align-items: flex-start;
}

.input-left {
  flex: 0 1 350px;
}

.yellow-lady-img-container {
  position: relative;
  background-color: #ebafae;
  height: 770px;
  width: 346.984px;
  display: flex;
  align-items: flex-end;
  overflow: visible;
  transform: translateX(-23%);
}

.yellow-lady-img {
  position: absolute;
  width: 294px;
  height: 651px;
  max-width: none;
  left: 15%;
  top: 17.2%;
}

.input-right {
  flex: 0 1 970px;
  margin-top: 4%;
}

.input-yellow-smile {
  width: 27.4844px;
  height: 27.4844px;
  margin-left: 25%;
}

.input-right h1 {
  font-size: 52px;
  text-align: center;
}

.screenshots-container {
  display: flex;
  margin-left: 5%;
  gap: 1px;
}

.ieseg-container {
  max-width: 100%;
  flex: 1 1 281px;
  display: flex;
  flex-direction: column;
  margin-top: 8%;
  align-items: center;
  gap: 2px;
}

.uni-logo-bubble {
  width: 193px;
  height: 44px;
  background-color: #fad663;
  border-radius: 14px 14px 14px 0;

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

.ieseg-white {
  height: 95.4688px;
  width: 95.4688px;
  margin-right: 5%;
}

.screenshot-ieseg {
  width: 280.516px;
  height: 460px;
}

.vu-container {
  max-width: 100%;
  flex: 1 1 281px;
  display: flex;
  flex-direction: column;
  margin-top: 4%;
  align-items: center;
  gap: 8px;
}

.vu-container .uni-logo-bubble {
  background-color: #ebafae;
}

.vu-white {
  height: 76.7656px;
  width: 115.438px;
}

.screenshot-vu {
  width: 280.516px;
  height: 460px;
}

.monash-container {
  max-width: 100%;
  flex: 1 1 281px;
  display: flex;
  flex-direction: column;
  margin-top: 8%;
  align-items: center;
  gap: 10px;
}

.monash-container .uni-logo-bubble {
  background-color: #937fc7;
}

.monash-white {
  height: 30.3125px;
  width: 99.4219px;
  margin-right: 5%;
}

.screenshot-monash {
  width: 280.516px;
  height: 460px;
}

.input-big-smile {
  width: clamp(24px, 1.5vw + 20px, 35.77px);
  aspect-ratio: 1 / 1;
  height: auto;
  margin-top: 58%;
}

.quinte {
  padding-top: 3%;
}

.quinte-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.quinte-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
}

.flame-quinte {
  transform: translate(-7%, -34%);
}

.quinte-content h1 {
  font-size: 52px;
}

.vid-making-of {
  height: auto;
  max-width: 100%;
  width: 100%;
  margin-bottom: 5%;
}

/*-------- Animations ---------*/

.slide-in {
  opacity: 0;
  transform: translateX(150px);
  transition: opacity 1.5s ease-out, transform 0.9s ease-out;
  will-change: transform, opacity;
}

.slide-in.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.screenshot-vu.slide-in {
  transition-delay: 0s;
}

.screenshot-ieseg.slide-in {
  transition-delay: 0.20s;
}

.screenshot-monash.slide-in {
  transition-delay: 0.30s;
}

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

.site-footer {
  width: 100%;
  background-color: #000000;
  padding: 14px 24px;
  box-sizing: border-box;
}

.footer-container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Allinea i link a sinistra */
}

.footer-links {
  display: flex;
  gap: 24px;
  /* Spazio tra i due link */
}

.footer-links a {
  color: #ffffff;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 0.813rem;
  /* ~13px */
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-links a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Adattamento per Schermi Piccoli (Mobile) */
@media (max-width: 600px) {
  .site-footer {
    padding: 12px 16px;
  }

  .footer-links {
    gap: 16px;
  }

  .footer-links a {
    font-size: 0.75rem;
  }
}

@media (max-width: 1092px) {
  /*----------------- HERO----------------- */

  .hero-content {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .hero-left {
    max-width: 100%;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-text,
  .hero-cta {
    max-width: 100%;
  }

  .hero-right {
    max-width: 100%;
    align-items: center;
  }

  .hero-image {
    max-width: 100%;
  }

  .hero-credits {
    margin-right: 0;
    margin-top: 2%;
  }

  /*----------------- ACADEMIC ----------------- */

  .academic {
    padding-top: 5px;
  }

  .academic-content {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .academic-left {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    align-items: center;
    margin-bottom: 0;
  }

  .academic-right {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  /*----------------- RULES ----------------- */

  .rules {
    padding-top: 10%;
  }

  .rules-content {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .rules-left {
    max-width: 100%;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .rules-right {
    max-width: 100%;
    height: auto;
  }

  .game-uni-experience-container {
    margin-left: 2%;
  }

  .debrief-main-container {
    margin-right: 2%;
  }

  /*----------------- LEARN ----------------- */

  .learn-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .learn-left,
  .learn-right {
    width: 100%;
    max-width: 500px;
  }

  /*----------------- ADOZIONE ----------------- */

  .adozione-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .adozione-left {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .adozione-left h1 {
    font-size: clamp(34px, 8vw, 52px);
    line-height: 1.05;
    text-align: center;
  }

  .adozione-left .form-btn {
    margin: 60px auto 0;
  }

  .adozione-item {
    justify-content: center;
  }

  .adozione-text {
    margin-left: 0;
    text-align: center;
  }

  .adozione-text h3,
  .adozione-text p {
    text-align: center;
  }

  .red-angry2 {
    left: 40%;
  }

  .yellow-big-smile {
    float: none;
    right: 30%;
  }

  .yellow-star {
    left: 10%;
    transform: translateX(-20%);
  }

  /*----------------- PROVA ----------------- */

  .prova-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .prova-right h1 {
    transform: translateX(0%);
  }

  .prova-links-container {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .form-btn {
    margin-bottom: 30px;
  }

  .prova-credits {
    justify-content: flex-end;
    width: 100%;
    align-self: flex-end;
  }

  /*----------------- CUSTOM ----------------- */

  .custom-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .custom-img-container {
    transform: translateX(0);
  }

  .custom-left {
    width: 100%;
  }

  .level-box {
    transform: translateX(0);
  }

  .on-demand {
    transform: translateX(20%);
  }

  .inclusa {
    transform: translateX(-10%);
  }

  /*----------------- FORMAZIONE ----------------- */

  .formazione-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .formazione-left {
    width: 100%;
  }

  .formazione-left .form-btn {
    margin: 100px auto 0;
  }

  .formazione-left h1 {
    margin: 40px auto;
  }

  .support-box {
    margin: 8% auto;
  }

  .support-box h1 {
    margin: 10% auto;
  }

  .support-box h1 {
    transform: translateX(0%);
  }

  .support-box p {
    line-height: 22px;
    margin-top: 0;
  }

  .formazione-right {
    width: 100%;
  }

  /*----------------- INPUT ----------------- */

  .input-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .input-left {
    width: 100%;
  }

  .input-big-smile {
    margin: 0 90%;
  }

  /*----------------- QUINTE ----------------- */
  .quinte-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .screenshots-container {
    flex-direction: column;
    gap: 10px;
    margin-left: 0;
    align-items: center;
  }

  .screenshot-ieseg,
  .screenshot-vu,
  .screenshot-monash {
    max-width: 100%;
    width: auto;
    height: auto;
  }

  .inclusa {
    float: none;
    width: 100%;
    transform: translateX(0);
    margin-left: 0;
    justify-content: center;
  }

  .vid-making-of,
  .vid-tutorial {
    max-width: 100%;
  }
}

@media (max-width: 631px) {
  .game-uni-experience-container {
    flex-direction: column;
  }

  .students-bubble-container {
    margin: 2% 40%;
  }

  .bubble-graph-layout {
    flex-direction: column-reverse;
    margin-left: auto;
    align-items: flex-end;
    width: 100%;
  }

  .green-r-smile {
    position: absolute;
    bottom: 25%;
  }

  .debrief-bubble-container {
    margin: 7% 30%;
  }

  .maria-svg {
    bottom: -5%;
    right: -2%;
  }

  .custom-boxes-container {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }

  .on-demand {
    transform: translateX(-20%);
  }

  .inclusa {
    float: none;
    transform: translateX(0);
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .form-btn {
    margin-bottom: 40px;
  }

  .prova-credits {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  p span {
    display: inline;
  }

  .university-logos {
    flex-direction: column;
  }

  .jeff-svg {
    left: -4%;
  }

  .maria-svg {
    bottom: -5%;
    right: -2%;
  }

  .maria-bubble {
    right: 32%;
    bottom: -35px;
  }

  .impara-box p,
  .need-box p {
    font-size: clamp(13px, 3.8vw, 16px);
  }

  .green-lady-img {
    right: 0;
  }

  .support-box h1 {
    font-size: 33px;
    margin-bottom: 0;
  }

  .support-box p {
    margin-top: 0;
  }

  .blue-guy-img {
    left: 0;
  }

  .adozione-right,
  .hero-right {
    max-height: 500px;
  }
}

@media (max-width: 376px) {
  .jeff-bubble {
    top: -58px;
  }

  .maria-svg {
    bottom: 5px;
  }

  .maria-bubble {
    bottom: 5px;
  }

  .on-demand {
    transform: translate(-70%, 20%);
  }
}