/* HERO Version 2
-------------------------------------------------- */

.desktop-hero {
  position: relative;
  margin-top: 2rem;
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .desktop-hero {
    margin-bottom: -2rem;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .desktop-hero {
    margin-bottom: -3rem;
  }
}

@media (min-width: 2000px) {
  .desktop-hero {
    margin-bottom: -5rem;
  }
}

.sunny-hero-desktop {
  position: absolute;
  width: 44%;
  bottom: -47%;
  z-index: 1;
  right: -1%;
}

.tin-hero-desktop {
  position: absolute;
  width: 47%;
  bottom: -75%;
  left: 5%;
}

.hero-coming-soon-ani {
  position: absolute;
  width: 90%;
  right: 42px;
  bottom: -24%;
}

.hero-dobble-bubble-ani {
  position: absolute;
  width: 62%;
  left: 0px;
  top: 0%;
}

/* HERO Version 1 - 2024
-------------------------------------------------- */
  .hero {
    /*margin-top: calc( -148px - -50px );*/
    /*min-height: 100vh;*/
    background: rgb(2, 64, 137);
    background: linear-gradient( 180deg, rgba(2, 64, 137, 1) 35%, rgba(107, 179, 227, 1) 100% );
    background-size: cover;
    position: relative;
  }

  @media (min-width: 1200px) {
    .hero {
      margin-top: calc(-10px - -0px);
    }
  }

  /* --- Soccer Pouch --- */
  .hero-pouch-soccer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 67%;
    transform: translate(-50%, 37%);
    z-index: 1;
  }

  @media (min-width: 576px) {
    .hero-pouch-soccer {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 67%;
      transform: translate(-50%, 30%);
      z-index: 1;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-soccer {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 67%;
      transform: translate(-50%, 23%);
      z-index: 1;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-soccer {
      position: absolute;
      width: 26%;
      bottom: -14%;
      left: 18%;
      top: unset;
      transform: none;
    }
  }

  /* --- Soccer Pouch V2 --- */

  .hero-pouch-soccer-v2 {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 67%;
    transform: translate(-50%, 37%);
    z-index: 1;
  }

  @media (min-width: 576px) {
    .hero-pouch-soccer-v2 {
      position: absolute;
      left: 50%;
      top: 26%;
      width: 67%;
      transform: translate(-50%, 30%);
      z-index: 1;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-soccer-v2 {
      position: absolute;
      left: 50%;
      top: 23%;
      width: 67%;
      transform: translate(-50%, 23%);
      z-index: 1;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-soccer-v2 {
      position: absolute;
      left: 50%;
      top: 7%;
      width: 30%;
      transform: translate(-50%, 37%);
      z-index: 1;
    }
  }

  /* --- Soccer Pouch V3 --- */

  .hero-pouch-soccer-v3 {
    position: absolute;
    width: 40%;
    bottom: -8%;
    left: 15px;
    z-index: 0;
  }

  @media (min-width: 576px) {
    .hero-pouch-soccer-v3 {
      bottom: -8%;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-soccer-v3 {
      bottom: -5.5%;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-soccer-v3 {
      position: absolute;
      width: 20%;
      bottom: -3%;
      left: 24%;
      z-index: 0;
    }
  }

  /* --- Swimming Pouch --- */

  .hero-pouch-swimming {
    position: absolute;
    width: 40%;
    bottom: -8%;
    left: 15px;
    z-index: 0;
  }

  @media (min-width: 576px) {
    .hero-pouch-swimming {
      bottom: -8%;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-swimming {
      bottom: -3.5%;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-swimming {
      position: absolute;
      width: 28%;
      bottom: -12%;
      right: 15%;
      left: unset;
    }
  }

  /* --- Swimming Pouch V2 --- */

  .hero-pouch-swimming-v2 {
    position: absolute;
    width: 40%;
    bottom: -8%;
    left: 15px;
    z-index: 0;
  }

  @media (min-width: 576px) {
    .hero-pouch-swimming-v2 {
      bottom: -8%;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-swimming-v2 {
      bottom: -3.5%;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-swimming-v2 {
      position: absolute;
      width: 20%;
      bottom: -1%;
      left: 26%;
      z-index: 0;
    }
  }

  /* --- Swimming Pouch - V3 --- */

  .hero-pouch-swimming-v3 {
    position: absolute;
    width: 40%;
    bottom: -6%;
    right: 0%;
    z-index: 0;
  }

  @media (min-width: 576px) {
    .hero-pouch-swimming-v3 {
      bottom: -8%;
      right: 0%;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-swimming-v3 {
      bottom: -3.5%;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-swimming-v3 {
      position: absolute;
      width: 21%;
      bottom: -1%;
      right: 21%;
      z-index: 0;
    }
  }

  /* --- Dancing Pouch --- */

  .hero-pouch-dancing {
    position: absolute;
    width: 40%;
    bottom: -8%;
    right: 0px;
    z-index: 0;
  }

  @media (min-width: 576px) {
    .hero-pouch-dancing {
      bottom: -8%;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-dancing {
      bottom: -3.5%;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-dancing {
      display: none;
    }
  }

  /* --- Dancing Pouch - V2 --- */

  .hero-pouch-dancing-v2 {
    position: absolute;
    width: 40%;
    bottom: -8%;
    right: 0px;
    z-index: 0;
  }

  @media (min-width: 576px) {
    .hero-pouch-dancing-v2 {
      bottom: -8%;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-dancing-v2 {
      bottom: -3.5%;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-dancing-v2 {
      position: absolute;
      width: 21%;
      bottom: -1%;
      right: 25%;
      z-index: 0;
    }
  }

  /* --- Rugby Pouch --- */

  .hero-pouch-rugby {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 67%;
    transform: translate(-50%, 37%);
    z-index: 1;
  }

  @media (min-width: 576px) {
    .hero-pouch-rugby {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 67%;
      transform: translate(-50%, 30%);
      z-index: 1;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-rugby {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 67%;
      transform: translate(-50%, 23%);
      z-index: 1;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-rugby {
      position: absolute;
      width: 28%;
      bottom: -9%;
      right: 18%;
      left: unset;
      top: unset;
      transform: none;
    }
  }

  /* --- Rugby Pouch V2 --- */

  .hero-pouch-rugby-v2 {
    position: absolute;
    left: 50%;
    top: 25%;
    width: 64%;
    transform: translate(-50%, 37%);
    z-index: 1;
  }

  @media (min-width: 576px) {
    .hero-pouch-rugby-v2 {
      position: absolute;
      left: 50%;
      top: 26%;
      width: 67%;
      transform: translate(-50%, 30%);
      z-index: 1;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-rugby-v2 {
      position: absolute;
      left: 50%;
      top: 33%;
      width: 62%;
      transform: translate(-50%, 23%);
      z-index: 1;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-rugby-v2 {
      position: absolute;
      left: 50%;
      top: 10%;
      width: 30%;
      transform: translate(-50%, 37%);
      z-index: 1;
    }
  }

  .hero-pouch-rugby-v3 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 67%;
    transform: translate(-50%, 37%);
    z-index: 1;
  }

  @media (min-width: 576px) {
    .hero-pouch-rugby-v3 {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 67%;
      transform: translate(-50%, 30%);
      z-index: 1;
    }
  }

  @media (min-width: 768px) {
    .hero-pouch-rugby-v3 {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 67%;
      transform: translate(-50%, 23%);
      z-index: 1;
    }
  }

  @media (min-width: 992px) {
    .hero-pouch-rugby-v3 {
      position: absolute;
      width: 28%;
      top: 30%;
      right: 3%;
      left: unset;
    }
  }

  /* --- FR Win Experience logo --- */

  .win-experience-logo {
    margin-bottom: -5rem;
  }

  @media (min-width: 992px) {
    .win-experience-logo {
      margin-bottom: 0rem !important;
    }
  }

  /* --- Lockup --- */

  .hero-lockup {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 55%;
    transform: translate(-50%, -73%);
  }

  @media (min-width: 576px) {
    .hero-lockup {
      transform: translate(-50%, -80%);
    }
  }

  @media (min-width: 768px) {
    .hero-lockup {
      transform: translate(-50%, -80%);
    }
  }

  @media (min-width: 992px) {
    .hero-lockup {
      width: 20%;
      transform: translate(-50%, -28%);
    }
  }

  .hero-gradient-push {
    background: rgb(2, 64, 137);
    background: linear-gradient( 180deg, rgba(2, 64, 137, 1) 35%, rgba(107, 179, 227, 1) 100% );
    position: absolute;
    width: 100%;
    height: 50vh;
  }

  .pattern-section {
    position: absolute;
    width: 100%;
    top: 0;
    margin-top: 50vh;
  }

  .sunny-hero {
    position: relative;
  }

  .hero-speach-bubble {
    position: absolute;
    width: 100%;
    top: 12%;
    left: -88%;
  }