.navigation-wrapper {
  display: contents;
}
 
.navigation-container {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
  background-color: #22205f;
}
 
.navigation-thq-navbar-interactive-elm {
  width: 100%;
  display: flex;
  max-width: idth;
  align-items: center;
  padding-top: var(--dl-layout-space-halfunit);
  padding-left: var(--dl-layout-space-threeunits);
  padding-right: var(--dl-layout-space-threeunits);
  padding-bottom: var(--dl-layout-space-halfunit);
  justify-content: space-between;
}
 
.navigation-navlink {
  display: contents;
}
 
.navigation-thq-image1-elm {
  height: 3rem;
  text-decoration: none;
}
 
.navigation-thq-desktop-menu-elm {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
 
.navigation-thq-link1-elm1 {
  text-decoration: none;
}
 
.navigation-thq-link2-elm1 {
  text-decoration: none;
}
 
.navigation-thq-link4-elm1 {
  text-decoration: none;
}
 
.navigation-thq-burger-menu-elm {
  display: none;
}
 
.navigation-icon16 {
  fill: #ffffff;
  width: var(--dl-layout-size-xsmall);
  height: var(--dl-layout-size-xsmall);
}
 
.navigation-thq-mobile-menu-elm {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  padding: var(--dl-layout-space-twounits);
  z-index: 100;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
}
 
.navigation-thq-nav-elm {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
 
.navigation-thq-top-elm {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: var(--dl-layout-space-threeunits);
  justify-content: space-between;
}
 
.navigation-thq-logo-elm {
  height: 3rem;
}
 
.navigation-thq-close-menu-elm {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.navigation-icon18 {
  width: var(--dl-layout-size-xsmall);
  height: var(--dl-layout-size-xsmall);
}
 
.navigation-thq-links-elm2 {
  gap: var(--dl-layout-space-unit);
  flex: 0 0 auto;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
 
.navigation-thq-icon-group-elm2 {
  gap: var(--dl-layout-space-twounits);
  display: flex;
}
 
.play-fragment10 {
  display: contents;
}
 
.play-text10 {
  display: inline-block;
}
 
.play-fragment12 {
  display: contents;
}
 
.play-text12 {
  display: inline-block;
}
 
.play-fragment13 {
  display: contents;
}
 
.play-text13 {
  display: inline-block;
}
 
.play-fragment14 {
  display: contents;
}
 
.play-text14 {
  display: inline-block;
}
 
.play-fragment11 {
  display: contents;
}
 
.play-text11 {
  display: inline-block;
}
 

 

 

 

 

 

 

 

 

 
@media(max-width: 1600px) {
  .navigation-thq-link1-elm1 {
    fill: var(--dl-color-theme-neutral-light);
    color: #ffffff;
    text-decoration: none;
  }
  .navigationroot-class-name5 {
    position: relative;
  }
}
 
@media(max-width: 767px) {
  .navigation-thq-navbar-interactive-elm {
    padding-left: var(--dl-layout-space-twounits);
    padding-right: var(--dl-layout-space-twounits);
  }
  .navigation-thq-desktop-menu-elm {
    display: none;
  }
  .navigation-thq-burger-menu-elm {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
 
@media(max-width: 479px) {
  .navigation-thq-navbar-interactive-elm {
    padding: var(--dl-layout-space-unit);
  }
  .navigation-thq-mobile-menu-elm {
    padding: var(--dl-layout-space-unit);
  }
}

.come-and-join-the-fun-wrapper {
  display: contents;
}
 
.come-and-join-the-fun-thq-header19-elm {
  display: flex;
  justify-content: center;
}
 
.come-and-join-the-fun-thq-max-width-elm {
  align-self: center;
  align-items: center !important;
}
 
.come-and-join-the-fun-video {
  width: 100%;
  max-width: 1000px;
  height: auto;
  border-radius: 24px;
  align-self: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
 
.come-and-join-the-fun-thq-column-elm {
  gap: var(--dl-layout-space-oneandhalfunits);
  flex: 1;
  display: flex;
  align-items: center !important;
  flex-direction: column;
}
 
.come-and-join-the-fun-thq-content-elm {
  gap: var(--dl-layout-space-oneandhalfunits);
  display: flex;
  align-self: stretch;
  align-items: center !important;
  flex-direction: column;
}
 
.come-and-join-the-fun-thq-text-elm1 {
  text-align: center !important;
}
 
.come-and-join-the-fun-thq-text-elm2 {
  text-align: center !important;
  max-width: 800px;
  margin: 0 auto;
}
 
.come-and-join-the-fun-thq-actions-elm {
  gap: var(--dl-layout-space-unit);
  display: flex;
  align-items: flex-start;
}
 
.play-fragment15 {
  display: contents;
}
 
.play-text15 {
  display: inline-block;
}
 
.play-fragment16 {
  display: contents;
}
 
.play-text16 {
  display: inline-block;
}
 
.play-fragment17 {
  display: contents;
}
 
.play-text17 {
  display: inline-block;
}
 
.play-fragment18 {
  display: contents;
}
 
.play-text25 {
  display: inline-block;
}
 

 
@media(max-width: 991px) {
  .come-and-join-the-fun-thq-max-width-elm {
    flex-direction: column;
  }
  .come-and-join-the-fun-video {
    width: 100%;
  }
  .come-and-join-the-fun-thq-text-elm1 {
    text-align: center !important;
  }
  .come-and-join-the-fun-thq-text-elm2 {
    text-align: center !important;
  }
  .come-and-join-the-fun-thq-actions-elm {
    align-self: center;
    justify-content: flex-start;
  }
}
 
@media(max-width: 479px) {
  .come-and-join-the-fun-thq-actions-elm {
    width: 100%;
    flex-direction: column;
  }
  .come-and-join-the-fun-thq-button-elm1 {
    width: 100%;
  }
  .come-and-join-the-fun-thq-button-elm2 {
    width: 100%;
  }
}

.playgroups-wrapper {
  display: contents;
}
 
.playgroups-container1 {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
 
.playgroups-thq-max-width-elm {
  gap: var(--dl-layout-space-fourunits);
  width: 80%; max-width: 900px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-direction: row;
}
 
.playgroups-container2 {
  width: 100%;
  align-self: center;
  align-items: start;
}
 
.playgroups-container3 {
  width: auto;
  grid-area: span 1/span 1/span 1/span 1;
  align-self: start;
  justify-self: center;
}
 
.playgroups-container4 {
  top: 10%;
  position: sticky;
  
  margin-bottom: var(--dl-layout-space-twounits);
  text-decoration: none;
  background-color: var(--dl-color-theme-accent1);
}
 
.playgroups-text11 {
  text-align: left !important;
}
 
.playgroups-text12 {
  top: var(--dl-layout-space-unit);
  right: var(--dl-layout-space-unit);
  position: absolute;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
}
 
.playgroups-container5 {
  top: 10%;
  position: sticky;
  
  margin-bottom: var(--dl-layout-space-twounits);
  text-decoration: none;
  background-color: var(--dl-color-theme-accent2);
}
 
.playgroups-text14 {
  text-align: left !important;
}
 
.playgroups-text15 {
  top: var(--dl-layout-space-unit);
  right: var(--dl-layout-space-unit);
  position: absolute;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
}
 
.playgroups-container6 {
  top: 10%;
  position: sticky;
  
  margin-bottom: var(--dl-layout-space-twounits);
  text-decoration: none;
  background-color: var(--dl-color-theme-accent1);
}
 
.playgroups-text17 {
  text-align: left !important;
}
 
.playgroups-text18 {
  top: var(--dl-layout-space-unit);
  right: var(--dl-layout-space-unit);
  position: absolute;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
}
 
.play-fragment19 {
  display: contents;
}
 
.play-text26 {
  display: inline-block;
}
 
.play-fragment20 {
  display: contents;
}
 
.play-text27 {
  display: inline-block;
}
 
.play-fragment21 {
  display: contents;
}
 
.play-text28 {
  display: inline-block;
}
 
.play-fragment22 {
  display: contents;
}
 
.play-text29 {
  display: inline-block;
}
 
.play-fragment23 {
  display: contents;
}
 
.play-text30 {
  display: inline-block;
}
 
.play-fragment24 {
  display: contents;
}
 
.play-text31 {
  display: inline-block;
}
 
@media(max-width: 991px) {
  .playgroups-thq-max-width-elm {
    flex-direction: column;
  }
}
 
@media(max-width: 767px) {
  .playgroups-container4 {
    width: 100%;
  }
  .playgroups-container5 {
    width: 100%;
  }
  .playgroups-container6 {
    width: 100%;
  }
}

.play-container {
  width: 100%;
  display: flex;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
}
 
.play-fragment10 {
  display: contents;
}
 
.play-text10 {
  display: inline-block;
}
 
.play-fragment11 {
  display: contents;
}
 
.play-text11 {
  display: inline-block;
}
 
.play-fragment12 {
  display: contents;
}
 
.play-text12 {
  display: inline-block;
}
 
.play-fragment13 {
  display: contents;
}
 
.play-text13 {
  display: inline-block;
}
 
.play-fragment14 {
  display: contents;
}
 
.play-text14 {
  display: inline-block;
}
 
.play-fragment15 {
  display: contents;
}
 
.play-text15 {
  display: inline-block;
}
 
.play-fragment16 {
  display: contents;
}
 
.play-text16 {
  display: inline-block;
}
 
.play-fragment17 {
  display: contents;
}
 
.play-text17 {
  display: inline-block;
}
 
.play-fragment18 {
  display: contents;
}
 
.play-text25 {
  display: inline-block;
}
 
.play-fragment19 {
  display: contents;
}
 
.play-text26 {
  display: inline-block;
}
 
.play-fragment20 {
  display: contents;
}
 
.play-text27 {
  display: inline-block;
}
 
.play-fragment21 {
  display: contents;
}
 
.play-text28 {
  display: inline-block;
}
 
.play-fragment22 {
  display: contents;
}
 
.play-text29 {
  display: inline-block;
}
 
.play-fragment23 {
  display: contents;
}
 
.play-text30 {
  display: inline-block;
}
 
.play-fragment24 {
  display: contents;
}
 
.play-text31 {
  display: inline-block;
}
 
@media(max-width: 1200px) {
  .play-container {
    background-color: var(--dl-color-theme-neutral-light);
  }
}


.modern-play-card {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 2.5rem 3rem !important;
  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transform: none !important;
  text-decoration: none;
  gap: 1rem;
}

.modern-play-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 60px 0 rgba(31, 38, 135, 0.1);
  background: rgba(255, 255, 255, 0.95) !important;
}

.modern-play-card .thq-heading-2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: var(--dl-color-theme-primary1) !important;
  margin: 0 !important;
}

.modern-play-card .thq-body-small {
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  color: #333 !important;
  opacity: 0.9;
  max-width: 85%;
}

.playgroups-text12, .playgroups-text15, .playgroups-text18 {
  top: 1.5rem !important;
  right: 2rem !important;
  position: absolute !important;
  font-size: 5rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  opacity: 0.05 !important;
  color: #000 !important;
  pointer-events: none;
}


/* Styling for background SVGs on Play cards */
.card-bg-icon {
  position: absolute !important;
  top: 2rem !important;
  right: 3rem !important;
  width: 7rem !important;
  height: 7rem !important;
  opacity: 0.05 !important;
  color: #000 !important;
  pointer-events: none;
}

/* Modern Typography */
.modern-heading {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: #4B5563 !important;
  line-height: 1.1 !important;
  margin-bottom: 1.5rem !important;
}
.modern-subtitle {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  opacity: 0.8 !important;
  color: #4B5563 !important;
}

.modern-badge {
  display: inline-block;
  padding: 0.25rem 1.25rem;
  background-color: rgba(35, 41, 127, 0.1); 
  color: var(--dl-color-theme-primary1);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .modern-play-card {
    align-items: center !important;
    text-align: center !important;
  }
  .modern-play-card .thq-heading-2 {
    order: 1;
    margin-bottom: 0.5rem !important;
  }
  .modern-play-card .card-bg-icon {
    position: static !important;
    order: 2;
    opacity: 1 !important;
    color: var(--dl-color-theme-primary1) !important;
    width: 4rem !important;
    height: 4rem !important;
    margin: 1.5rem 0 !important;
  }
  .modern-play-card .thq-body-small {
    order: 3;
    max-width: 100% !important;
    text-align: center !important;
  }
  .playgroups-text11, .playgroups-text14, .playgroups-text17 {
    text-align: center !important;
  }
}