* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  /* Base Root Variables */
  /*--card-hover-gradient: linear-gradient(180deg, #4db8f0 10%, #143f7b 100%);*/
  --card-hover-gradient: linear-gradient(180deg, None 10%, None 100%);
  --font-family-primary: "Montserrat", sans-serif;
  --font-family-secondary: "Montserrat", sans-serif;
  --color-text-primary: #a9a9a9;
  --base-color-text-secondary: #000000;
  --color-theme-primary: #003366;
  --color-theme-secondary: #339933;

  --color-text-highlight: #ffd520;
  --color-slider-navigation-bg: #339933;
  --color-button-primary: #003366;
  /*--circle-bg-radius: #81b5f5;*/

  --color-badge-live: #f51e1e;

  --border-accent-color: #1e90ff;
  --danger-red-color: #ea5455;
  --theme-orange-color: #ff9f43;
  --spacing-xxs: 4px;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-background-primary: #ffffff;
  --social-login-color: #344054;

  --circle-bg-radius: color-mix(
    in srgb,
    var(--color-theme-primary) 70%,
    var(--color-background-primary)
  );

    /* Spacing Scale */
  --spacing-xs: calc(2 * var(--spacing-xxs)); /* 8px */
  --spacing-sm: calc(3 * var(--spacing-xxs)); /* 12px */
  --spacing-md: calc(4 * var(--spacing-xxs)); /* 16px */
  --spacing-lg: calc(5 * var(--spacing-xxs)); /* 20px */
  --spacing-xl: calc(6 * var(--spacing-xxs)); /* 24px */
  --spacing-2xl: calc(7 * var(--spacing-xxs)); /* 28px */
  --spacing-3xl: calc(8 * var(--spacing-xxs)); /* 32px */
  --spacing-4xl: calc(9 * var(--spacing-xxs)); /* 36px */
  --spacing-5xl: calc(10 * var(--spacing-xxs)); /* 40px */
  --spacing-6xl: calc(11 * var(--spacing-xxs)); /* 44px */
  --spacing-46: calc(11.5 * var(--spacing-xxs)); /* 46px */
  --spacing-7xl: calc(12 * var(--spacing-xxs)); /* 48px */
  --spacing-8xl: calc(13 * var(--spacing-xxs)); /* 52px */
  --spacing-9xl: calc(14 * var(--spacing-xxs)); /* 56px */
  --spacing-10xl: calc(15 * var(--spacing-xxs)); /* 60px */
  --spacing-11xl: calc(16 * var(--spacing-xxs)); /* 64px */
  --spacing-12xl: calc(17 * var(--spacing-xxs)); /* 68px */
  --spacing-13xl: calc(18 * var(--spacing-xxs)); /* 72px */
  --spacing-14xl: calc(19 * var(--spacing-xxs)); /* 76px */
  --spacing-15xl: calc(20 * var(--spacing-xxs)); /* 80px */
  --spacing-16xl: calc(21 * var(--spacing-xxs)); /* 84px */
  --spacing-17xl: calc(22 * var(--spacing-xxs)); /* 88px */
  --spacing-18xl: calc(23 * var(--spacing-xxs)); /* 92px */
  --spacing-19xl: calc(24 * var(--spacing-xxs)); /* 96px */
  /* Colors */

  --login-form-backgroundColor: color-mix(
    in srgb,
    var(--color-background-primary) 80%,
    transparent
  );
  --mobile-navbar-bg-color: color-mix(
    in srgb,
    var(--color-background-primary) 70%,
    transparent
  );
  --hero-slider-pagination-bg: color-mix(
    in srgb,
    var(--base-color-text-secondary) 30%,
    transparent
  );
  --color-text-secondary: color-mix(
    in srgb,
    var(--base-color-text-secondary) 70%,
    transparent
  );
  --light-border-color: color-mix(in srgb, var(--base-color-text-secondary) 10%, transparent);
  --login-mobile-bg-gradient: linear-gradient(
    -90deg,
    color-mix(in srgb, var(--color-background-primary) 50%, transparent) 0%,
    color-mix(in srgb, var(--color-background-primary) 80%, transparent) 30%,
    var(--color-background-primary) 100%
  );
  --color-theme-gradient: linear-gradient(
    -90deg,
    color-mix(in srgb, var(--color-background-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-background-primary) 70%, transparent) 50%,
    var(--color-background-primary) 100%
  );
  --color-theme-navbar-gradient: linear-gradient(
    0deg,
    color-mix(in srgb, var(--color-background-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-background-primary) 70%, transparent) 50%,
    var(--color-background-primary) 100%
  );
  --color-theme-hero-btm-gradient: linear-gradient(
    -180deg,
    color-mix(in srgb, var(--color-background-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-background-primary) 70%, transparent) 50%,
    var(--color-background-primary) 100%
  );
  --video-player-background-color: linear-gradient(
    -180deg,
    color-mix(in srgb, var(--color-background-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-background-primary) 50%, transparent) 70%,
    var(--color-background-primary) 100%
  );
  --color-theme-login-btm-gradient: linear-gradient(
    -180deg,
    color-mix(in srgb, var(--color-background-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-background-primary) 50%, transparent) 30%,
    var(--color-background-primary) 100%
  );
  --color-theme-login-top-gradient: linear-gradient(
    0deg,
    color-mix(in srgb, var(--color-background-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-background-primary) 50%, transparent) 30%,
    var(--color-background-primary) 100%
  );

  /* Fonts */

  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-900: 900;

  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-34: 34px;
  --font-size-36: 36px;
  --font-size-38: 38px;
  --font-size-40: 40px;
  --font-size-42: 42px;
  --font-size-44: 44px;
  --font-size-46: 46px;
  --letter-spacing: 5px;

  --heading-3xl-size: 60px; /* special case */
  --line-height-heading: 120%;
  --line-height-body: 150%;
  --line-height-navbar: 140%;
  /* Border Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;

  /* Assets */
  --background-image: url("/staticdj/platform-whitelabel/img/default-hero.jpg");
  --footer-background-image: url("/staticdj/platform-whitelabel/img/footer-vector.png");
  --faq-pattern-vector: url("/staticdj/platform-whitelabel/img/pattern-vector.png");
  --partnership-logo-height: 43px;
  --partnership-logo-height-mobile: 30px;

  /* Navbar Specific */
  --navbar-padding-top: 16px;
  --navbar-padding-bottom: 16px;
  --navbar-padding-top: 16px;
  --navbar-padding-bottom: 16px;
  --navbar-logo-width-default: 180px;
  --navbar-logo-height-default: 48px;

  --navbar-logo-sm-width: 106px;
  --navbar-logo-sm-height: 38px;

  --footer-logo-width-default: 210px;
  --footer-logo-height-default: 48px;
}

.wiistream-container,
.wiistream-contact-us-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
@media only screen and (max-width: 767px) {
  .wiistream-container {
    overflow: hidden;
  }
}
@media only screen and (min-width: 1200px) {
  .wiistream-container {
    width: calc(100% - 50px) !important;
    margin: 0 auto;
    padding: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wiistream-contact-us-container {
    width: calc(100% - 150px) !important;
    margin: 0 auto;
    padding: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media only screen and (min-width: 1300px) {
  .wiistream-container {
    width: calc(100% - 90px) !important;
    margin: 0 auto;
    padding: 0;
  }
  .wiistream-contact-us-container {
    width: calc(100% - 200px) !important;
    margin: 0 auto;
    padding: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media only screen and (min-width: 1400px) {
  .wiistream-container {
    width: calc(100% - 128px) !important;
    margin: 0 auto;
    padding: 0;
  }
  .wiistream-contact-us-container {
    width: calc(100% - 447px) !important;
    margin: 0 auto;
    padding: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1000px;
  }
}
@media only screen and (min-width: 2200px) {
  .wiistream-container {
    width: calc(100% - 250px) !important;
    margin: 0 auto;
    padding: 0;
  }
}
@media only screen and (min-width: 2400px) {
  .wiistream-container {
    width: calc(100% - 350px) !important;
    margin: 0 auto;
    padding: 0;
  }
}
@media only screen and (min-width: 2600px) {
  .wiistream-container {
    width: calc(100% - 300px) !important;
    margin: 0 auto;
    padding: 0;
  }
}
@media only screen and (min-width: 2800px) {
  .wiistream-container {
    width: calc(100% - 400px) !important;
    margin: 0 auto;
    padding: 0;
  }
}
@media only screen and (min-width: 3000px) {
  .wiistream-container {
    width: calc(100% - 600px) !important;
    margin: 0 auto;
    padding: 0;
  }
}
.bg-theme-primary {
  background-color: var(--color-background-primary);
}
.flex {
  display: flex;
}
.overflow-auto {
  overflow: auto;
}
.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}
.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}
.py-10xl{
  padding-top: var(--spacing-10xl);
  padding-bottom: var(--spacing-10xl);
}
.pr-12{
  padding-right: 12px;
}
.px-5xl {

  padding-left: var(--spacing-5xl);
  padding-right: var(--spacing-5xl);
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE & Edge */
}
.uppercase{
  text-transform: uppercase;
}
.pl-sm{
  padding-left: var(--spacing-sm) !important;
}
.justify-start {
  justify-content: flex-start;
}
.social-login-button-color {
  color: var(--social-login-color) !important;
}
.items-center {
  align-items: center;
}
.form-check-box {
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
}
.items-stretch {
  align-items: stretch;
}
.ml-auto {
  margin-left: auto;
}
.h-auto {
  height: auto !important;
}
.text-white {
  color: var(--color-white);
}
.pb-46 {
  padding-bottom: var(--spacing-46) !important;
}
.absolute {
  position: absolute;
}
.left-0 {
  left: 0;
}
.bottom-0 {
  bottom: 0;
}
.text-decoration-none {
  text-decoration: none;
}
.list-style-none {
  list-style: none;
}
.gap-30 {
  gap: var(--spacing-2xl);
}
.p-3xl {
  padding: var(--spacing-3xl);
}
.gap-3xl {
  gap: var(--spacing-3xl);
}
.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}
.pt-sm {
  padding-top: var(--spacing-sm);
}
.pt-xl {
  padding-top: var(--spacing-xl);
}
.gap-sm {
  gap: var(--spacing-sm);
}
.line-height-120 {
  line-height: var(--line-height-heading);
}
.w-full {
  width: 100%;
}
.px-xxs {
  padding-left: var(--spacing-xxs);
  padding-right: var(--spacing-xxs);
}
.h-full {
  height: 100%;
}
.btn-primary {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  background-color: var(--color-button-primary);
  padding: var(--spacing-sm) var(--spacing-xl);
  border: 0;
  color: var(--color-text-primary);
  border-radius: var(--radius-8);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-600);
  cursor: pointer;
  fill: var(--color-text-primary);
}

.btn-outline {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-14);
  background-color: transparent;
  padding: var(--spacing-sm) var(--spacing-8xl);
  border: 3px solid rgba(255, 255, 255, 0.5);
  color: var(--color-text-primary);
  border-radius: var(--radius-8);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-600);
  cursor: pointer;
    fill: var(--color-text-primary);

}
.rounded-8 {
  border-radius: var(--radius-8);
}
.text-primary {
  color: var(--color-text-primary);
}
.text-primary-80 {
  color: color-mix(in srgb, var(--color-text-primary) 80%, transparent);
}
.text-italic {
  font-style: italic;
}
.pt-xs {
  padding-top: var(--spacing-xs);
}
.pt-lg {
  padding-top: var(--spacing-lg);
}
.inline-block {
  display: inline-block;
}
.opacity-40 {
  opacity: 40%;
}
.pt-2xl {
  padding-top: var(--spacing-2xl);
}
.pb-base {
  padding-bottom: var(--spacing-md);
}
.pb-8xl {
  padding-bottom: var(--spacing-8xl);
}
.pb-2xl {
  padding-bottom: var(--spacing-2xl);
}
.pb-lg {
  padding-bottom: var(--spacing-lg);
}
.pt-15xl {
  padding-top: var(--spacing-15xl);
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}

.pt-xxs {
  padding-top: var(--spacing-xxs);
}
.pl-xxs {
  padding-left: var(--spacing-xxs);
}
.pr-xxs {
  padding-right: var(--spacing-xxs);
}
.pl-xs {
  padding-left: var(--spacing-xs);
}
.gap-lg {
  gap: var(--spacing-lg);
}
.p-lg {
  padding: var(--spacing-lg);
}
.pb-xs {
  padding-bottom: var(--spacing-xs);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-extra-light {
  color: var(--hero-slider-pagination-bg);
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-col {
  flex-direction: column;
}
.gap-xxs {
  gap: var(--spacing-xxs);
}
.py-xxs {
  padding-top: var(--spacing-xxs);
  padding-bottom: var(--spacing-xxs);
}
.text-highlight {
  color: var(--color-text-highlight);
}
.text-danger {
  color: var(--danger-red-color);
}
.text-orange {
  color: var(--theme-orange-color);
}
.text-black{
  color: var(--color-black);
}
.text-black-70 {
  color: color-mix(in srgb, var(--color-black) 70%, transparent);
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.mt-lg {
  margin-top: var(--spacing-lg);
}
.overflow-y-auto {
  overflow-y: auto;
}
.login-line-divider {
  background-color: var(--light-border-color);
  width: 76.2px;
  height: 0.19px;
  display: flex;
}
.rounded-12 {
  border-radius: var(--radius-12);
}
.relative {
  position: relative;
}
.w-fit {
  width: fit-content;
}
.h-fit {
  height: fit-content;
}
.overflow-hidden {
  overflow: hidden;
}
.gap-xs {
  gap: var(--spacing-xs);
}
.px-4xl {
  padding-left: var(--spacing-4xl);
  padding-right: var(--spacing-4xl);
}
.px-sm {
  padding-right: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}
.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}
.pt-8xl {
  padding-top: var(--spacing-8xl);
}
.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}
.bg-white {
  background-color: var(--color-white);
}
.rounded-4 {
  border-radius: var(--radius-4);
}
.scale-1 {
  scale: 1.1;
}
.text-secondary-70 {
  color: var(--color-text-secondary);
}
.bg-black-70 {
  background-color: rgba(0, 0, 0, 0.7);
}
.bg-theme-70 {
  background-color: color-mix(
    in srgb,
    var(--color-background-primary) 70%,
    transparent
  );
}
.rounded-2 {
  border-radius: 2px;
}
.bg-live {
  background-color: var(--color-badge-live);
}
.font-size-8 {
  font-size: 8px;
}
.rounded-3 {
  border-radius: 3px;
}

.highlights-header-btn {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-14);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  transition: 0.2s linear;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-8);
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .highlights-header-btn:hover {
    background-color: var(--color-button-primary);
    color: var(--color-white);
  }
}
.resize-none {
  resize: none;
}

.highlights-header-btn.active {
  background-color: var(--color-button-primary);
  color: var(--color-white);
}
.gap-xl {
  gap: var(--spacing-xl);
}
.py-13xl {
  padding-top: var(--spacing-13xl) !important;
  padding-bottom: var(--spacing-13xl) !important;
}
.flex-wrap {
  flex-wrap: wrap;
}
.max-faq-container {
  max-width: 1440px;
}
.min-w-full {
  min-width: 100%;
}
.text-accent {
  color: var(--color-button-primary);
}
.border-accent {
  border: 2px solid var(--border-accent-color);
}
.pt-8xl {
  padding-top: var(--spacing-8xl);
}
.flex-grow {
  flex-grow: 1;
}
.pt-4xl {
  padding-top: var(--spacing-4xl);
}
.text-accent-primary {
  color: var(--color-button-primary);
}
.py-19xl {
  padding-top: var(--spacing-19xl);
  padding-bottom: var(--spacing-19xl);
}
.text-center {
  text-align: center;
}
.mt-3xl {
  margin-top: var(--spacing-3xl);
}
.slider-play-button {
  width: 64px;
  height: 64px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.justify-end {
  justify-content: flex-end;
}
.p-md {
  padding: var(--spacing-md);
}
.p-xs {
  padding: var(--spacing-xs);
}
.d-none {
  display: none !important;
}
.pl-4 {
  padding-left: 4px;
}
.theme-bg-color {
  background-color: var(--color-background-primary);
}
.pt-md {
  padding-top: var(--spacing-md);
}
.items-end {
  align-items: flex-end;
}
.text-nowrap {
  white-space: nowrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.w-screen {
  width: 100vw;
}
.pb-5xl {
  padding-bottom: var(--spacing-5xl);
}
.h-screen {
  height: 100vh;
}
.min-w-screen {
  min-width: 100vw;
}
.pt-6{
  padding-top: 6px;
}
.min-h-screen {
  min-height: 100vh;
}
.items-start {
  align-items: flex-start;
}

.border-light {
  border: 1px solid var(--light-border-color);
}
.h-100{
  height: 100% !important;
}
.min-w-fit {
  min-width: fit-content;
  text-wrap: nowrap;
}
.border-b-light {
  border-bottom: 1px solid var(--light-border-color);
}
.border-l-0 {
  border-left: 0;
}
.pb-4xl {
  padding-bottom: var(--spacing-4xl);
}
.gap-4xl {
  gap: var(--spacing-4xl);
}
.text-theme-accent {
  color: var(--color-slider-navigation-bg);
}
.color-theme-text-primary {
  color: var(--color-text-primary);
}
.partnership-logo {
  height: var(--partnership-logo-height);
}
.pt-7xl {
  padding-top: var(--spacing-7xl);
}
.pb-xxs {
  padding-bottom: var(--spacing-xxs);
}
.pb-xs{
  padding-bottom: var(--spacing-xs);
}
.pb-md {
  padding-bottom: var(--spacing-md);
}
.text-start {
  text-align: start;
}
.render-down-arrow {
  position: relative;
}
.render-down-arrow::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  display: flex;
  top: 50%;
  right: 20px;
  background-image: url("/staticdj/platform-whitelabel/svg/down-arrow-white.svg");
  background-position: center;
  background-size: cover;
  transform: translateY(-50%);
}

.text-uppercase {
  text-transform: uppercase;
}
.primary-letter-spacing {
  letter-spacing: var(--letter-spacing);
}
.min-w-30 {
  min-width: 30%;
}
.gap-md {
  gap: var(--spacing-md);
}
.bottom-32 {
  bottom: var(--spacing-3xl);
}
.pb-56 {
  padding-bottom: var(--spacing-9xl) !important;
}
.fixed {
  position: fixed;
}
.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}
.inner-flex-no-wrap .flex-wrap {
  flex-wrap: nowrap !important;
}
.bg-transparent {
  background-color: transparent;
}
.p-0{
  padding: 0 !important;
}
.pb-0{
  padding-bottom: 0 !important;
}
.border-0 {
  border: 0;
}
.mx-auto {
  margin: 0 auto;
}
.outline-0 {
  outline: none;
}
.pb-13xl {
  padding-bottom: var(--spacing-13xl);
}
.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}
.border-bottom-light-black {
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-black) 10%, transparent);
}
.z-10 {
  z-index: 10;
}
.cursor-pointer {
  cursor: pointer;
}
.pr-4 {
  padding-right: 4px;
}
.object-fit-cover {
  object-fit: cover;
}
.d-block {
  display: block;
}
.pt-5xl {
  padding-top: var(--spacing-5xl);
}
.gap-2xl {
  gap: var(--spacing-2xl);
}
.pb-3xl {
  padding-bottom: var(--spacing-3xl);
}
.pt-3xl {
  padding-top: var(--spacing-3xl);
}

/* Responsive Media Query */

@media only screen and (max-width: 575px) {
  .pt-8xl {
    padding-top: var(--spacing-3xl);
  }

  .py-19xl,
  .py-13xl {
    padding-top: var(--spacing-3xl) !important;
    padding-bottom: var(--spacing-3xl) !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .pt-8xl {
    padding-top: var(--spacing-5xl);
  }

  .py-19xl,
  .py-13xl {
    padding-top: var(--spacing-5xl) !important;
    padding-bottom: var(--spacing-5xl) !important;
  }
  .gap-sm-xl {
    gap: var(--spacing-xl);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .py-19xl,
  .py-13xl {
    padding-top: var(--spacing-7xl) !important;
    padding-bottom: var(--spacing-7xl) !important;
  }
}
@media only screen and (max-width: 767px) {
  .hide-on-sm-mobile {
    display: none !important;
  }
  .py-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .border-lg-1 {
    border-top: 1px solid var(--light-border-color);
  }
  .partnership-logo {
    height: var(--partnership-logo-height-mobile);
  }
  .btn-outline,
  .btn-primary {
    padding: 12px 24px;
  }
}
@media only screen and (min-width: 768px) {
  .justify-md-start {
    justify-content: start;
  }
  .flex-lg-row {
    flex-direction: row;
  }
  .items-mb-end {
    align-items: flex-end;
  }
  .justify-mb-between {
    justify-content: space-between;
  }
  .items-md-start {
    align-items: flex-start;
  }
  .pt-md-xxs {
    padding-top: var(--spacing-xxs);
  }
  .gap-md-xl {
    gap: var(--spacing-xl);
  }
  .pt-md-7xl {
    padding-top: var(--spacing-7xl);
  }
  .hide-on-sm-tab {
    display: none !important;
  }
  .gap-md-4xl {
    gap: var(--spacing-4xl);
  }
  .pb-md-3xl {
    padding-bottom: var(--spacing-3xl);
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pt-8xl {
    padding-top: var(--spacing-7xl);
  }
  .p-md-lg {
    padding: var(--spacing-lg);
  }

  .pb-md-7xl {
    padding-bottom: var(--spacing-7xl);
  }
  .hide-lg-mobile {
    display: none !important;
  }
  .gap-md-4xl {
    gap: var(--spacing-4xl);
  }
  .items-md-center {
    align-items: center;
  }
  .flex-md-row {
    flex-direction: row;
  }
  .w-md-50 {
    width: 50%;
  }
  .border-md-light {
    border: 1px solid var(--light-border-color);
  }
  .hide-from-sm-tab {
    display: none !important;
  }
  .d-md-inline-block{
    display: inline-block;
  }
  .pl-md-xxs{
    padding-left: var(--spacing-xxs);
  }
}

@media only screen and (max-width: 991px) {
  .hide-on-mobile {
    display: none !important;
  }
  .flex-lg-nowrap {
    flex-wrap: wrap;
  }
  .flex-lg-row {
    flex-direction: column;
  }
  .py-mobile-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .hide-till-sm-tab {
    display: none !important;
  }
}

@media only screen and (min-width: 992px) {
  .ml-lg-auto {
    margin-left: auto;
  }
  .gap-67 {
    gap: var(--spacing-11xl);
  }
  .hide-on-tab {
    display: none !important;
  }
  .justify-lg-start {
    justify-content: start;
  }
  .hide-on-desktop {
    display: none !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pt-lg-xs {
    padding-top: var(--spacing-xs);
  }
  .text-lg-center {
    text-align: center;
  }
  .pb-lg-3xl {
    padding-bottom: var(--spacing-3xl);
  }
  .pt-lg-xl {
    padding-top: var(--spacing-xl);
  }
  .pt-lg-2xl {
    padding-top: var(--spacing-2xl);
  }
  .pt-lg-4xl {
    padding-top: var(--spacing-4xl);
  }
  .p-lg-3xl {
    padding: var(--spacing-3xl);
  }
  .pt-lg-3xl{
    padding-top: var(--spacing-3xl);
  }
  .pb-lg-13xl{
    padding-bottom: var(--spacing-13xl);
  }
}

/* Css Media Quey For The Landscape Also Take It Is MD Range  */

@media (min-width: 600px) and (max-width: 768px) and (orientation: landscape) {
  .wiistream-hero-section {
    padding-top: var(--spacing-9xl);
  }
  .wiistream-hero-section-main-wrapper {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
  }
  .pt-md-landscape-sm {
    padding-top: var(--spacing-sm);
  }
  .hero-card-inner-wrapper .streaming-badge {
    width: 75px;
    height: 30px;
  }
  .hero-card-inner-wrapper .streaming-badge img {
    width: 65px;
    height: 20px;
  }
  .btn-outline,
  .btn-primary {
    padding: var(--spacing-xs) var(--spacing-lg);
  }
}

.hide-til-1200 {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 1200px) {
  .hide-til-1200 {
    display: none !important;
  }
  .show-til-1200 {
    display: block !important;
  }
  .highlights-header-btn {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}
@media only screen and (min-width: 1200px) {
  .hide-til-1200 {
    display: block !important;
  }
  .show-til-1200 {
    display: none !important ;
  }
  .gap-xl-xl {
    gap: var(--spacing-xl);
  }
  .pb-xl-8xl {
    padding-bottom: var(--spacing-8xl);
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .pt-15xl {
    padding-top: var(--spacing-8xl);
  }
}

.wiistream-login-section {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  position: relative;
  padding-top: var(--spacing-15xl);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Fallback background when no slider content */
.wiistream-login-bg-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.wiistream-login-logo {
  width: var(--navbar-logo-width-default);
  /* height: var(--navbar-logo-height-default); */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--spacing-3xl);
}

.wiistream-login-logo img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain; /* logo scales properly */
}
.wiistream-login-section .wiistream-login-bg-slider-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.wiistream-login-back-button {
  position: absolute;
  top: 20px;
  left: 47px;
  z-index: 1000 !important;
}

.wiistream-login-section .hero-navbar-vector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  background: var(--color-theme-login-top-gradient);
  aspect-ratio: 1440/275;
}
.wiistream-login-section .swiper-overlay-vector {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  background: var(--color-theme-login-btm-gradient);
  aspect-ratio: 1440/858.9999389648445;
}
.wiistream-login-section-main-wrapper {
  padding-bottom: var(--spacing-xl) !important;
}
@media only screen and (min-width: 1300px) and (min-height: 730px) {
  .wiistream-login-section-main-wrapper {
    padding-bottom: var(--spacing-13xl) !important;
  }
}

@media (min-height: 700px) and (max-height: 900px) {
  .wiistream-login-section-main-wrapper {
    padding-bottom: var(--spacing-lg) !important;
  }
}
.wiistream-login-section-main-wrapper
  .hero-section-thumb-slider-container
  .hero-card-inner-wrapper {
  max-width: 580px;
}

.wiistream-login-swiper-pagination .swiper-pagination-bullet {
  width: 47px;
  height: 9px;
  border-radius: 0;
  opacity: 0.3 !important;
  background-color: var(--hero-slider-pagination-bg);
  margin: 5px;
}
/* swiper-pagination-bullet-active" */

.wiistream-login-swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-slider-navigation-bg);
  opacity: 1 !important;
}
.wiistream-login-form {
  padding: var(--spacing-3xl);
  background-color: var(--login-form-backgroundColor);
  border-radius: var(--radius-8);
  border: 1px solid var(--light-border-color);
  min-width: 465px;
  max-width: 465px;
  max-height: calc(100vh - 80px);
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE & Edge */
}
.wiistream-login-form::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.login-form-input {
  background-color: var(--light-border-color);
  border: 1px solid var(--light-border-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-8);
}
.login-form-input ::placeholder {
  color: color-mix(in srgb, var(--color-white) 50%, transparent);
}
.login-form-input:focus {
  outline: none;
  background-color: var(--light-border-color);
  border: 1px solid var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-8);
}
.progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 4px;
  padding-right: 4px;
}
.progress-container .progress-wrapper .circle {
  min-width: 20px;
  min-height: 20px;
  outline: 2px solid var(--color-text-secondary);
  border: 2px solid transparent;
  border-radius: 100px;
  background-color: var(--light-border-color);
  position: relative;
}
.progress-container .progress-wrapper .circle::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 8px;
  min-height: 8px;
  border-radius: 100px;
  background-color: var(--color-text-secondary);
}
.progress-container .progress-wrapper.active .circle {
  min-width: 20px;
  min-height: 20px;
  outline: 2px solid var(--color-white);
  border: 2px solid var(--color-button-primary);
  border-radius: 100px;
  background-color: var(--color-white);
  position: relative;
}
.progress-container .progress-wrapper.active .circle::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 8px;
  min-height: 8px;
  border-radius: 100px;
  background-color: var(--color-button-primary);
}
.progress-container .progress-wrapper.finished .circle {
  min-width: 20px;
  min-height: 20px;
  outline: 2px solid var(--color-white);
  border: 2px solid var(--color-button-primary);
  border-radius: 100px;
  background-color: var(--color-white);
  position: relative;
}
.progress-container .progress-wrapper.finished .circle::after {
  position: absolute;
  content: "✓";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 8px;
  min-height: 8px;
  border-radius: 100px;
  background-color: transparent;
  color: var(--color-button-primary);
}
.progress-container .progress-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* width: 50%; */
}
.progress-container .progress-wrapper .progress {
  height: 2px;
  flex-grow: 1;
  width: 100%;
  background-color: var(--hero-slider-pagination-bg);
}
.progress-container .progress-wrapper.active .progress {
  height: 2px;
  flex-grow: 1;
  width: 100%;
  background-color: var(--color-button-primary);
}
.progress-container .progress-wrapper.finished .progress {
  height: 2px;
  flex-grow: 1;
  width: 100%;
  background-color: var(--color-button-primary);
}
.slider-outer {
  transition: 0.2s ease-in-out;
  max-height: 450px;
}
.slider-outer-subscription {
  transition: 0.2s ease-in-out;
  max-height: 635px;
}
.transition-duration-300 {
  transition: 0.3s ease-in-out;
}
.wiistream-sign-up-form-slider {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  transition: 0.3s ease-in-out;
  height: auto;
}
.wiistream-sign-up-form-slider .container-inner-wrapper {
  width: 100%;
  min-width: 100%;
  padding: var(--spacing-xxs);
  height: auto;
}
.show-form-1 {
  transform: translateX(-100%);
}
.show-form-2 {
  transform: translateX(-200%);
}
.show-form-3 {
  transform: translateX(-300%);
}

.sign-up-dropdown-main-wrapper {
  position: absolute;

  left: 0;
  width: 100%;
  background-color: black;
  border-radius: var(--radius-8);
  max-height: 0px;
  overflow: hidden;
  transition: 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
}
.sign-up-dropdown-main-wrapper.active {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: black;
  border-radius: var(--radius-8);
  max-height: 500px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}
.sign-up-dropdown-main-wrapper.position-up {
  bottom: 0;
}
.sign-up-dropdown-main-wrapper.position-down {
  top: 0;
}
.sign-up-dropdown-main-wrapper .login-form-input {
  border-radius: 0 0 var(--radius-8) var(--radius-8);
}
.sign-up-dropdown-main-wrapper.position-down .login-form-input {
  border-radius: var(--radius-8) var(--radius-8) 0 0;
}
.sign-up-dropdown-main-wrapper .dropdown {
  max-height: 300px;
  overflow: auto;
}
.sign-up-dropdown-main-wrapper .dropdown .location-button {
  font-size: var(--font-family-primary);
  color: var(--color-white);
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-4);
  cursor: pointer;
}

.sign-up-dropdown-main-wrapper .dropdown .location-button:hover {
  font-size: var(--font-family-primary);
  color: var(--color-black);
  background-color: var(--color-white);
  border: 0;
  outline: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
}
@media only screen and (max-width: 991px) {
  .wiistream-login-section {
    padding-top: var(--spacing-14xl);
  }
  .wiistream-login-section.h-screen {
    height: 100%;
    min-height: 100vh;
  }
  .wiistream-login-section .wiistream-login-bg-slider-wrapper {
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .wiistream-login-form {
    padding: 0;
    background-color: transparent;
    border-radius: var(--radius-8);
    border: 0;
    min-width: 100%;
    max-height: calc(100vh - 50px);
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE & Edge */
    max-width: 640px;
  }
  .wiistream-login-form .max-w-640 {
    max-width: 640px;
    margin: 0 auto;
  }
  .wiistream-login-section .swiper-overlay-vector,
  .wiistream-login-section .hero-navbar-vector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: 4;
    background: var(--login-mobile-bg-gradient);
    aspect-ratio: 1440/858.9999389648445;
  }

  .wiistream-login-section-main-wrapper {
    padding-bottom: 0 !important;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .wiistream-login-section {
    padding-top: var(--spacing-5xl);
  }
}

/* Error and Success Messages */
.text-error {
  color: #ef4444;
}
.text-success {
  color: #10b981;
}

/* Checkbox styles */
.checkbox-wrapper-12 {
  position: relative;
}

.checkbox-wrapper-12 > svg {
  position: absolute;
  top: -130%;
  left: -170%;
  width: 110px;
  pointer-events: none;
}

.checkbox-wrapper-12 * {
  box-sizing: border-box;
}

.checkbox-wrapper-12 input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin: 0;
}

.checkbox-wrapper-12 input[type="checkbox"]:focus {
  outline: 0;
}

.checkbox-wrapper-12 .cbx {
  width: 24px;
  height: 24px;
  top: calc(100px - 12px);
  left: calc(100px - 12px);
}

.checkbox-wrapper-12 .cbx input {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-text-secondary);
  border-radius: 50%;
}

.checkbox-wrapper-12 .cbx label {
  width: 24px;
  height: 24px;
  background: none;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: trasnlate3d(0, 0, 0);
  pointer-events: none;
}

.checkbox-wrapper-12 .cbx svg {
  position: absolute;
  top: 5px;
  left: 4px;
  z-index: 1;
  pointer-events: none;
}

.checkbox-wrapper-12 .cbx svg path {
  stroke: var(--color-white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  transition: stroke-dashoffset 0.3s ease;
  transition-delay: 0.2s;
}

.checkbox-wrapper-12 .cbx input:checked + label {
  animation: splash-12 0.6s ease forwards;
}

.checkbox-wrapper-12 .cbx input:checked + label + svg path {
  stroke-dashoffset: 0;
}

@-moz-keyframes splash-12 {
  40% {
    background: var(--color-button-primary);
    box-shadow: 0 -18px 0 -8px var(--color-button-primary), 16px -8px 0 -8px var(--color-button-primary), 16px 8px 0 -8px var(--color-button-primary), 0 18px 0 -8px var(--color-button-primary), -16px 8px 0 -8px var(--color-button-primary), -16px -8px 0 -8px var(--color-button-primary);
  }

  100% {
    background: var(--color-button-primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@-webkit-keyframes splash-12 {
  40% {
    background: var(--color-button-primary);
    box-shadow: 0 -18px 0 -8px var(--color-button-primary), 16px -8px 0 -8px var(--color-button-primary), 16px 8px 0 -8px var(--color-button-primary), 0 18px 0 -8px var(--color-button-primary), -16px 8px 0 -8px var(--color-button-primary), -16px -8px 0 -8px var(--color-button-primary);
  }

  100% {
    background: var(--color-button-primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@-o-keyframes splash-12 {
  40% {
    background: var(--color-button-primary);
    box-shadow: 0 -18px 0 -8px var(--color-button-primary), 16px -8px 0 -8px var(--color-button-primary), 16px 8px 0 -8px var(--color-button-primary), 0 18px 0 -8px var(--color-button-primary), -16px 8px 0 -8px var(--color-button-primary), -16px -8px 0 -8px var(--color-button-primary);
  }

  100% {
    background: var(--color-button-primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@keyframes splash-12 {
  40% {
    background: var(--color-button-primary);
    box-shadow: 0 -18px 0 -8px var(--color-button-primary), 16px -8px 0 -8px var(--color-button-primary), 16px 8px 0 -8px var(--color-button-primary), 0 18px 0 -8px var(--color-button-primary), -16px 8px 0 -8px var(--color-button-primary), -16px -8px 0 -8px var(--color-button-primary);
  }

  100% {
    background: var(--color-button-primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

.font-secondary {
  font-family: var(--font-family-secondary);
  font-optical-sizing: auto;
  font-style: normal;
  line-height: var(--line-height-heading);
}

.font-primary {
  font-family: var(--font-family-primary);
  line-height: var(--line-height-body);
  font-optical-sizing: auto;
  font-style: normal;
}
.line-height-140{
  line-height: var(--line-height-navbar);
}
.line-height-heading {
  line-height: var(--line-height-heading);
}
.font-style-oblique {
  font-style: oblique;
}
.font-poppins {
  font-family: "Poppins", sans-serif;
}
.font-inter {
  font-family: "Inter", sans-serif;
}
/* Text Sizes */
.text-xxs {
  font-size: var(--font-size-12);
}
.text-xs {
  font-size: var(--font-size-14);
}
.text-sm {
  font-size: var(--font-size-16);
}
.text-16 {
  font-size: var(--font-size-16);
}
.text-md {
  font-size: var(--font-size-18);
}
.text-lg {
  font-size: var(--font-size-20);
}
.text-xl {
  font-size: var(--font-size-24);
}
.text-20 {
  font-size: var(--font-size-20);
}
.text-2xl {
  font-size: var(--font-size-28);
}

.text-3xl {
  font-size: var(--font-size-32);
}
.text-4xl {
  font-size: var(--font-size-34);
}
.text-5xl {
  font-size: var(--font-size-36);
}
.text-6xl {
  font-size: var(--font-size-38);
}
.text-7xl {
  font-size: var(--font-size-40);
}
.text-display {
  font-size: var(--heading-3xl-size);
}

/* Font Weights */
.font-thin {
  font-weight: var(--font-weight-100);
}
.font-extra-light {
  font-weight: var(--font-weight-200);
}
.font-light {
  font-weight: var(--font-weight-300);
}
.font-regular {
  font-weight: var(--font-weight-400);
}
.font-medium {
  font-weight: var(--font-weight-500);
}
.font-semibold {
  font-weight: var(--font-weight-600);
}
.font-bold {
  font-weight: var(--font-weight-700);
}
.font-extrabold {
  font-weight: var(--font-weight-800);
}
.font-black {
  font-weight: var(--font-weight-900);
}

/* Responsive Media Query */

@media only screen and (max-width: 575px) {
  .text-display {
    font-size: var(--font-size-32);
  }
  .text-5xl,
  .text-7xl {
    font-size: var(--font-size-24);
  }
  .text-md,
  .text-lg {
    font-size: var(--font-size-16);
  }
  .text-sm-xl {
    font-size: var(--font-size-24);
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .text-display {
    font-size: var(--font-size-34);
  }
  .text-5xl,
  .text-7xl {
    font-size: var(--font-size-28);
  }
  .text-md,
  .text-lg {
    font-size: var(--font-size-16);
  }
  .text-sm-xl {
    font-size: var(--font-size-24);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .text-display {
    font-size: var(--font-size-34);
  }
  .text-5xl,
  .text-7xl {
    font-size: var(--font-size-28);
  }
  .text-md,
  .text-lg {
    font-size: var(--font-size-16);
  }
  .text-lg-2xl {
    font-size: var(--font-size-28);
  }
}
@media only screen and (min-width: 768px) {
  .text-md-xs {
    font-size: var(--font-size-14);
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .text-display {
    font-size: var(--font-size-46);
  }
  .text-5xl,
  .text-7xl {
    font-size: var(--font-size-32);
  }
  .text-md,
  .text-lg {
    font-size: var(--font-size-18);
  }
  .text-lg-3xl{
    font-size: var(--font-size-32);
  }
}
@media only screen and (min-width: 375px) {
  .text-sm-2xl {
    font-size: var(--font-size-28);
  }
}
@media only screen and (min-width: 992px) {
  .text-lg-md {
    font-size: var(--font-size-18);
  }
  .text-lg-20 {
    font-size: var(--font-size-20);
  }
  .text-lg-2xl {
    font-size: var(--font-size-28);
  }
  .text-lg-3xl {
    font-size: var(--font-size-32);
  }
  .text-md-sm {
    font-size: var(--font-size-16);
  }
}

@media only screen and (min-width: 1200px) {
  .text-xl-5xl {
    font-size: var(--font-size-36);
  }
}

.wiistream-navbar-wrapper {
  width: 100%;
  height: auto;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  border-bottom: 1px solid var(--light-border-color);

}
.wiistream-solid-bg-navbar {
  background-color: var(--color-background-primary);
}
.wiistream-blur-bg-navbar {
  background-color: color-mix(in srgb, var(--color-background-primary) 30%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.navbar-brand-logo {
  width: var(--navbar-logo-width-default);
  height: var(--navbar-logo-height-default);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wiistream-searchbar-clear-btn-black {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 22px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
}
.navbar-brand-logo img {
  object-fit: fill;
}
@media only screen and (max-width: 767px) {
  .navbar-brand-logo {
    width: var(--navbar-logo-sm-width);
    height: var(--navbar-logo-sm-heigh);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navbar-brand-logo img {
    object-fit: fill;
  }
}
.footer-logo {
  width: var(--footer-logo-width-default);
  height: var(--footer-logo-height-default);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-logo img {
   object-fit: fill;
}

.wiistream-navbar-inner-wrapper {
  padding-top: var(--navbar-padding-top);
  padding-bottom: var(--navbar-padding-bottom);
}
@media only screen and (max-width: 991px) {
  .wiistream-navbar-inner-wrapper {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
}

.wiistream-navbar-inner-wrapper .navbar-links-main-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.wiistream-navbar-inner-wrapper .wiistream-search-bar input {
  height: 100%;
  border-radius: var(--radius-8);
  border: 0;
  min-width: 377px;
  font-size: var(--font-large);
  padding-left: 42px;
  font-family: var(--font-family-primary);
}
.wiistream-navbar-inner-wrapper .wiistream-search-bar input:focus {
  height: 100%;
  border-radius: var(--radius-8);
  border: 0;
  min-width: 377px;
  font-size: var(--font-large);
  padding-left: 42px;
  font-family: var(--font-family-primary);
  outline: none;
  border: 0;
}
@media (min-width: 992px) and (max-width: 1200px) {
  .wiistream-navbar-inner-wrapper .wiistream-search-bar {
    height: 100%;
    border-radius: var(--radius-8);
    border: 0;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    font-family: var(--font-family-primary);
    background-color: var(--color-white);
  }
  .wiistream-navbar-inner-wrapper .wiistream-search-bar .search-icon {
    left: 50% !important;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) !important;
  }
  .wiistream-navbar-inner-wrapper .wiistream-search-bar input {
    display: none;
  }
}

.wiistream-navbar-inner-wrapper .wiistream-search-bar {
  position: relative;
}
.wiistream-navbar-inner-wrapper .wiistream-search-bar .search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 14px;
}

@media only screen and (max-width: 991px) {
  .wiistream-navbar-inner-wrapper {
    justify-content: space-between;
  }

  .wiistream-navbar-inner-wrapper.active-mobile-navbar
    .navbar-links-main-wrapper {
    transform: translateX(0%);
    transition: 0.3s ease-in-out;
  }
}
.wiistream-mobile-bg-navbar-wrapper {
  position: fixed;
  display: flex;

  width: 100vw;
  min-height: 100dvh;
  top: 0;
  left: 0;
  background-color: var(--mobile-navbar-bg-color);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s ease-in-out;
  overflow-y: auto; /* force vertical scroll */
  overflow-x: hidden;
}

.wiistream-mobile-navbar-wrapper {
  /* max-width: 375px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
  background-color: var(--color-background-primary);
}
@media only screen and (max-width: 599px) and (orientation: landscape) {
  .wiistream-mobile-bg-navbar-wrapper {
    width: 100vw;
    height: 100dvh;
    overflow-y: auto; /* force vertical scroll */
    overflow-x: hidden;
    flex-direction: column;
  }

  .wiistream-mobile-navbar-wrapper {
    height: 300dvh;
  }
  .wiistream-mobile-navbar-wrapper .navbar-links-main-wrapper .pt-md {
    padding-top: var(--spacing-4xl);
  }
  .wiistream-hero-section {
    padding-top: var(--spacing-5xl) !important;
  }
  .wiistream-hero-section .hero-info-header.pt-2xl {
    padding-top: var(--spacing-md) !important;
  }
}
@media (min-width: 600px) and (max-width: 768px) and (orientation: landscape) {
  .wiistream-mobile-bg-navbar-wrapper {
    width: 100vw;
    height: 100dvh;
    overflow-y: auto; /* force vertical scroll */
    overflow-x: hidden;
    flex-direction: column;
  }

  .wiistream-mobile-navbar-wrapper {
    height: 300dvh;
  }
  .wiistream-mobile-navbar-wrapper .navbar-links-main-wrapper .pt-md {
    padding-top: var(--spacing-8xl);
  }
}
.wiistream-mobile-bg-navbar-wrapper
  .wiistream-mobile-navbar-wrapper
  .nav-link
  .nav-link-dropdown {
  padding: 0 var(--spacing-sm);
  max-height: 0;
  overflow: hidden;
  transform-origin: top;
  transition: max-height 0.2s ease, linear 0.2s;
}
.wiistream-mobile-bg-navbar-wrapper .wiistream-mobile-navbar-wrapper .nav-link {
  transition: linear 0.2s;
}
.wiistream-mobile-bg-navbar-wrapper
  .wiistream-mobile-navbar-wrapper
  .nav-link
  .nav-item {
  padding: 0;
  transition: linear 0.2s;
}

.wiistream-mobile-bg-navbar-wrapper
  .wiistream-mobile-navbar-wrapper
  .nav-link.active
  .nav-item {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-6);
  background-color: var(--color-button-primary) !important;
  transition: linear 0.2s;
}
.wiistream-mobile-bg-navbar-wrapper
  .wiistream-mobile-navbar-wrapper
  .nav-link.active
  .nav-link-dropdown {
  max-height: 500px; /* enough for your tallest dropdown */
  transition: max-height 0.2s ease, linear 0.5s; /* hide after animation ends */
}
.wiistream-mobile-bg-navbar-wrapper
  .wiistream-mobile-navbar-wrapper
  .nav-link
  .nav-link-dropdown
  a {
  padding: var(--spacing-xs) var(--spacing-xs);
  display: flex;
  color: var(--color-white);
}
.wiistream-mobile-navbar-wrapper .nav-link a,
.wiistream-mobile-navbar-wrapper .nav-link span {
  line-height: var(--line-height-navbar) !important;
  font-weight: var(--font-weight-400) !important;
}

.wiistream-navbar-inner-wrapper.active-mobile-navbar
  .wiistream-mobile-navbar-wrapper {
  transform: translateX(0%);
  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
  opacity: 1;
  visibility: visible;
}

.wiistream-navbar-inner-wrapper.active-mobile-navbar
  .wiistream-mobile-bg-navbar-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}

.wiistream-mobile-navbar-wrapper .close-hamburger-menu {
  padding: var(--spacing-sm) var(--spacing-xl);
  background-color: var(--color-background-primary);
  position: relative;
}
.wiistream-mobile-navbar-wrapper .close-hamburger-menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  gap: 10px;
}
.wiistream-mobile-navbar-wrapper .close-hamburger-menu::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(255, 255, 255, 0.04);
}
.wiistream-mobile-navbar-wrapper .navbar-links-main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-xl) var(--spacing-sm);
  width: 100%;
  height: 100%;
}
.wiistream-mobile-navbar-wrapper .navbar-links-main-wrapper .nav-link {
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Footer Css Code  */

.wiistream-footer {
  background-color: var(--color-background-primary);
  position: relative;
  overflow: hidden;
}
.wiistream-footer::after {
  position: absolute;
  content: "";
  display: flex;
  bottom: -20%;
  left: -10%;
  width: 300px;
  height: 300px;
  background-color: var(--circle-bg-radius);
  border-radius: 50%;
  filter: blur(100px);
  opacity: 30%;
}
.wiistream-footer .wiistream-partnerships {
  background-image: var(--footer-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 1200px) {
  .wiistream-footer .wiistream-partnerships .wiistream-container {
    max-width: 745px;
    margin: auto;
    padding-top: var(--spacing-7xl);
  }
}

.wiistream-footer .footer-links-section {
  position: relative;
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-13xl);
  overflow: hidden;
  border-top: 1px solid var(--light-border-color);
}
@media only screen and (max-width: 768px) {
  .wiistream-footer .footer-links-section {
    padding-top: var(--spacing-3xl) !important;
    padding-bottom: var(--spacing-3xl) !important;
  }
}

.wiistream-footer .footer-links-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--footer-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: rotate(180deg);
}

#footer-links-container {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 16px;
}
@media only screen and (min-width: 1200px) {
  #footer-links-container {
    padding: 0;
    margin: 0 auto;
    width: calc(100% - 410px);
  }
}
.footer-section {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.footer-title {
  font-weight: bold;
  margin-bottom: var(--spacing-xl);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-link {
  display: block;
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer-link:hover {
    color: var(--color-white);
  }
}

@media only screen and (max-width: 575px) {
  #footer-links-container {
    gap: 16px;
  }
  #footer-links-container .footer-section {
    width: 45%;
  }

  #footer-links-container .footer-section .footer-section-inner-wrapper {
    min-width: 110px;
  }

  /* Odd items aligned to the end (right) */
  #footer-links-container .footer-section:nth-child(even) {
    display: flex;
    align-items: flex-end;
  }

  /* Even items aligned to the start (left) */
  #footer-links-container .footer-section:nth-child(odd) {
    display: flex;
    align-items: flex-start;
  }
}

/* Css To Handel DropDown For The Navbar  */
.wiistream-navbar-wrapper
  .wiistream-navbar-inner-wrapper
  .navbar-links-main-wrapper
  .links-wrapper
  a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
}
.wiistream-navbar-wrapper
  .wiistream-navbar-inner-wrapper
  .navbar-links-main-wrapper
  .links-wrapper
  .nav-link
  .nav-link-dropdown {
  /* display: none; */
  position: absolute;
  left: -10px;
  top: 100%;
  background: var(--color-background-primary);
  border: 1px solid var(--light-border-color);
  list-style: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 99;
  margin-top: var(--spacing-md);
  width: max-content;
  min-width: 100%;
  border-radius: var(--radius-20);
  transform: translateY(10px); /* small slide effect */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.wiistream-navbar-wrapper
  .wiistream-navbar-inner-wrapper
  .navbar-links-main-wrapper
  .links-wrapper
  .nav-link.active
  .nav-link-dropdown {
  transform: translateY(0px); /* small slide effect */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}
.wiistream-navbar-wrapper
  .wiistream-navbar-inner-wrapper
  .navbar-links-main-wrapper
  .links-wrapper
  .nav-link-dropdown
  a {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  width: 100%;
  border-radius: var(--radius-8);
  transition: 0.05s ease-in-out;
}
.wiistream-navbar-wrapper
  .wiistream-navbar-inner-wrapper
  .navbar-links-main-wrapper
  .links-wrapper
  .nav-link-dropdown
  a:hover {
  background-color: var(--color-white);
  color: var(--color-black) !important;
}
.inactive-nav-link {
  color: var(--color-text-secondary) !important;
}
.inactive-nav-link:hover {
  color: var(--color-white) !important;
}
.active-nav-link {
  color: var(--color-white) !important;
}

.wiistream-search-bar {
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-dropdown {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.search-dropdown.hidden {
  display: none;
}

.search-dropdown div {
  padding: 8px 10px;
  cursor: pointer;
}

.search-dropdown div:hover {
  background-color: #f0f0f0;
}

.wiistream-popular-highlights {
  background-color: var(--color-background-primary);
}
.wiistream-popular-highlights .highlights-header-wrapper {
  width: 100%;
}
@media only screen and (min-width: 1300px) {
  .wiistream-popular-highlights .highlights-header-wrapper {
    max-width: 360px;
    min-width: 360px;
  }
}
@media (min-width: 1200px) and (max-width: 1300px) {
  .wiistream-popular-highlights .highlights-header-wrapper {
    max-width: 360px;
  }
}
.wiistream-popular-highlights
  .popularHighlightsSliderWrapper
  .popular-highlights-swiper-slider-card-wrapper
  .card-image {
  /* 2025-11-13 (AV): Changed aspect ratio from portrait to landscape */
  aspect-ratio: 220/175;
}

.wiistream-popular-highlights
  .popularHighlightsSliderWrapper
  .popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .live-recording {
  color: var(--color-slider-navigation-bg);
}

.wiistream-popular-highlights
  .popularHighlightsSliderWrapper
  .popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .card-header {
  position: absolute;
  top: 12px;
  left: 0px;
}

.wiistream-popular-highlights
  .popularHighlightsSliderWrapper
  .popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .live-recording
  .line-divider {
  height: 14px;
  display: flex;
  width: 1px;
  border-radius: 2px;
  margin-top: 4px;
  margin-bottom: 4px;
  background-color: var(--color-slider-navigation-bg);
}

.wiistream-popular-highlights
  #PastEventsSliderWrapper
  .popular-highlights-swiper-slider-card-wrapper
  .card-image {
  /* 2025-11-13 (AV): Changed aspect ratio from portrait to landscape */
  aspect-ratio: 220/175;
}

.popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .slider-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiistream-popular-highlights
  #PastEventsSliderWrapper
  .popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .live-recording {
  color: var(--color-slider-navigation-bg);
}

.wiistream-popular-highlights
  #PastEventsSliderWrapper
  .popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .card-header {
  position: absolute;
  top: 12px;
  left: 0px;
}

.wiistream-popular-highlights
  #PastEventsSliderWrapper
  .popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .live-recording
  .line-divider {
  height: 14px;
  display: flex;
  width: 1px;
  border-radius: 2px;
  margin-top: 4px;
  margin-bottom: 4px;
  background-color: var(--color-slider-navigation-bg);
}

.popular-highlights-swiper-button-prev,
.popular-highlights-swiper-button-next,
.past-events-slider-swiper-button-next,
.past-events-slider-swiper-button-prev {
  padding: var(--spacing-sm);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  cursor: pointer;
}

.popular-highlights-swiper-button-prev img,
.popular-highlights-swiper-button-next img,
.past-events-slider-swiper-button-next img,
.past-events-slider-swiper-button-prev img {
  pointer-events: none;
}

.popular-highlights-swiper-button-next.swiper-button-disabled,
.popular-highlights-swiper-button-prev.swiper-button-disabled,
.past-events-slider-swiper-button-next.swiper-button-disabled,
.past-events-slider-swiper-button-prev.swiper-button-disabled {
  opacity: 20%;
}

.popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .slider-banner-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}
.popular-highlights-swiper-slider-card-wrapper
  .popular-highlights-swiper-slider-banner
  .slider-play-button {
  display: none;
}

.popular-highlights-swiper-slider-card-wrapper .hover-overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .popular-highlights-swiper-slider-card-wrapper
    .popular-highlights-swiper-slider-banner:hover
    .slider-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .popular-highlights-swiper-slider-card-wrapper
    .popular-highlights-swiper-slider-banner:hover
    .card-header {
    display: none;
  }

  .popular-highlights-swiper-slider-card-wrapper
    .popular-highlights-swiper-slider-banner:hover
    .slider-play-button {
    display: block;
  }
  /* Show static banner on hover */
  .popular-highlights-swiper-slider-card-wrapper:hover .hover-overlay-image {
    opacity: 1;
    visibility: visible;
  }

  /* Optional: fade out main image on hover */
  .popular-highlights-swiper-slider-card-wrapper:hover .main-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
}

.wiistream-faq-section {
  background-color: var(--color-background-primary);
  position: relative;
}
.wiistream-faq-section::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: var(--faq-pattern-vector);
  background-repeat: repeat;
  opacity: 80%;
}

.wiistream-faq-container {
  width: 100%;
  margin: auto;
  padding: 0 16px;
}

@media only screen and (min-width: 1200px) {
  .wiistream-faq-container {
    width: calc(100% - 340px);
    margin: 0 auto;
  }
}
.faq-item {
  border-bottom: 1px solid var(--light-border-color);
  transition: 0.15s linear;
}
.faq-item button {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

@media only screen and (max-width: 767px) {
  .faq-item button {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
  .faq-answer .pb-md{
padding-bottom: var(--spacing-lg);
  }
}
.faq-item .circled-down-arrow {
  transition: 0.15s linear;
}
.faq-item.open .circled-down-arrow {
  transform: rotate(180deg);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;

  cursor: pointer;
  outline: none;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-item.open{
  background-color: var(--circle-bg-radius);
  transition: 0.15s linear;
  /* border-radius: var(--radius-8); */
}
.faq-item.open .text-primary , .faq-item.open .text-secondary {
  color:  var(--color-text-secondary);
}

@media only screen and (min-width: 2000px) {
  .hero-slider-info-container {
    min-height: 50vh;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
.stop-scrolling {
  height: 100vh !important;
  overflow: hidden !important;
}
.text-under-line {
  text-decoration: underline;
}
.wiistream-hero-section {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: var(--spacing-15xl);
  overflow: hidden;
}
@media only screen and (min-width: 1200px) {
  .wiistream-hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
}
.wiistream-hero-section .hero-banner-bg-slider-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.wiistream-hero-section .hero-navbar-vector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  background: var(--color-theme-navbar-gradient);
  aspect-ratio: 1440/275;
}
.wiistream-hero-section .hero-left-banner-vector {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 2;
  aspect-ratio: 1035/956;

  background: var(--color-theme-gradient);
}
.wiistream-hero-section .swiper-overlay-vector {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background: var(--color-theme-hero-btm-gradient);
}

.wiistream-hero-section-main-wrapper {
  padding-top: var(--spacing-18xl);
  position: relative;
  z-index: 5;

  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* push everything down */
  flex: 1;
  position: relative;
}
@media only screen and (max-width: 575px) {
  .wiistream-hero-section-main-wrapper {
    padding-top: var(--spacing-5xl);
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .wiistream-hero-section-main-wrapper {
    padding-top: var(--spacing-8xl);
    padding-bottom: var(--spacing-3xl);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .wiistream-hero-section-main-wrapper {
    padding-top: var(--spacing-8xl);
    padding-bottom: var(--spacing-3xl);
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .wiistream-hero-section-main-wrapper {
    padding-top: var(--spacing-10xl);
  }
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
  .wiistream-hero-section {
    padding-top: var(--spacing-10xl);
  }
  .hero-card-inner-wrapper .streaming-badge {
    width: 75px;
    height: 30px;
  }
  .hero-card-inner-wrapper .streaming-badge img {
    width: 65px;
    height: 20px;
  }
}
@media (min-width: 600px) and (max-width: 768px) and (orientation: landscape) {
  .wiistream-hero-section {
    padding-top: var(--spacing-9xl);
  }
  .wiistream-hero-section-main-wrapper {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
  }
}

.wiistream-hero-section-main-wrapper .hero-slider-info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.wiistream-hero-section-main-wrapper
  .hero-slider-info-container
  .hero-info-header {
  max-width: 435px;
}
/* Your badge styles */

.streaming-header .streaming-badge {
  padding: 4px 10px;
  border-radius: var(--radius-4);
  background-color: var(--color-badge-live);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;

  /* Animation */
  animation: blinkBadge 1.2s infinite ease-in-out;
}

/* Blink / pulse keyframes */
@keyframes blinkBadge {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.streaming-header .streaming-badge .streaming-badge-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  min-width: 15px;
  min-height: 15px;
  background-color: transparent;
  border-right: 2px solid rgb(255, 255, 255);
  position: relative;
}

.streaming-header .streaming-badge .streaming-badge-dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: flex;
  min-width: 8px;
  min-height: 8px;
  background-color: white;
  position: relative;
}

.streaming-header .streaming-badge .streaming-badge-text {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-16);
  padding-left: 5px;
  color: white;
}

@media only screen and (max-width: 475px) {
  .streaming-header .streaming-badge .streaming-badge-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
  }

  .streaming-header .streaming-badge .streaming-badge-dot::after {
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    min-width: 6px;
    min-height: 6px;
  }

  .streaming-header .streaming-badge .streaming-badge-text {
    font-size: var(--font-size-12);
  }
}
/* swiper-slide-thumb-active */

/* Base state: hidden */
.wiistream-hero-section
  .hero-slider-info-container
  .hero-banner-thumb-slider
  .swiper-wrapper
  .swiper-slide:first-child() {
  opacity: 1 !important;
  /* visibility: hidden !important; */
}
.wiistream-hero-section
  .hero-slider-info-container
  .hero-banner-thumb-slider
  .swiper-wrapper
  .swiper-slide {
  opacity: 0 !important;
  /* visibility: hidden !important; */
}

.wiistream-hero-section
  .hero-slider-info-container
  .hero-banner-thumb-slider
  .swiper-wrapper
  .swiper-slide.swiper-slide-thumb-active {
  opacity: 1 !important;
  visibility: visible !important;
}
/* swiper-pagination-bullet */
.wiistream-hero-section
  .hero-slider-info-container
  .wiistream-hero-banner-swiper-pagination
  .swiper-pagination-bullet {
  width: 47px;
  height: 9px;
  border-radius: 0;
  opacity: 0.3 !important;
  background-color: var(--hero-slider-pagination-bg);
}
/* swiper-pagination-bullet-active" */
.wiistream-hero-section
  .hero-slider-info-container
  .wiistream-hero-banner-swiper-pagination
  .swiper-pagination-bullet-active {
  background-color: var(--color-slider-navigation-bg);
  opacity: 1 !important;
}

.hero-banner-live-events-slider
  .swiper-slider-main-wrapper
  .swiper-slider-card-wrapper {
  border: 1px solid var(--light-border-color);
  padding: var(--spacing-sm);
  padding-bottom: var(--spacing-xl);
  border-radius: var(--radius-24);
  background-color: transparent;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  height: 100%;
  flex-direction: column;
}

.hero-banner-live-events-slider
  .swiper-slider-main-wrapper
  .swiper-slider-card-wrapper
  .swiper-slider-banner
  .slider-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s linear;
}

.hero-banner-live-events-slider
  .swiper-slider-main-wrapper
  .swiper-slider-card-wrapper
  .swiper-slider-banner
  .slider-banner-overlay
  .slider-play-button {
  display: none;
}

.hero-banner-live-events-slider
  .swiper-slider-main-wrapper
  .swiper-slider-card-wrapper
  .swiper-slider-banner
  .live-recording {
  color: var(--color-slider-navigation-bg);
}
/* card-header */

.hero-banner-live-events-slider
  .swiper-slider-main-wrapper
  .swiper-slider-card-wrapper
  .swiper-slider-banner
  .card-header {
  position: absolute;
  top: 12px;
  left: 0px;
}

.hero-banner-live-events-slider
  .swiper-slider-main-wrapper
  .swiper-slider-card-wrapper
  .swiper-slider-banner
  .live-recording
  .line-divider {
  height: 14px;
  display: flex;
  width: 1px;
  border-radius: 2px;
  margin-top: 4px;
  margin-bottom: 4px;
  background-color: var(--color-slider-navigation-bg);
}

/* From Universe.io by TimTrailer */
.wiistream-switch {
  --secondary-container: #000000b2;
  --primary: #84da89;
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  box-shadow: 0 0 0 4px #354756;
  border-radius: 30px;
}

.wiistream-switch input {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
}

.wiistream-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--secondary-container);
  transition: 0.2s;
  border-radius: 30px;
}

.wiistream-switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  border-radius: 20px;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  transition: 0.4s;
}

input:checked + .wiistream-switch-slider {
  background-color: var(--color-button-primary);
}

input:focus + .wiistream-switch-slider {
  box-shadow: 0 0 1px var(--secondary-container);
}

input:checked + .wiistream-switch-slider:before {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

/*  */
.remember-me-switch {
  --secondary-container: var(--light-border-color);
  --primary: #84da89;
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 30px;
}

.remember-me-switch input {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
}

.remember-me-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--secondary-container);
  transition: 0.2s;
  border-radius: 30px;
  border: 1px solid var(--hero-slider-pagination-bg);
}

.remember-me-switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  border-radius: 20px;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  transition: 0.4s;
}

input:checked + .remember-me-switch-slider {
  background-color: var(--color-button-primary);
}

input:focus + .remember-me-switch-slider {
  box-shadow: 0 0 1px var(--secondary-container);
}

input:checked + .remember-me-switch-slider:before {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.wiistream-platform-championship {
  /* TODO: this needs to be specified on the template tag */
  background-image: var(--background-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.wiistream-platform-championship::before {
  content: "";
  background: var(--color-theme-navbar-gradient);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.wiistream-platform-championship::after {
  content: "";
  background: var(--color-theme-hero-btm-gradient);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.wiistream-platform-championship .wiistream-info-header {
  max-width: 790px;
  margin: auto;
}

.wiistream-platform-championship
  .platform-championship-swiper-slider
  .swiper-slide {
  height: auto !important;
}
.hero-banner-live-events-slider
  .live-events-swiper-slider
  .live-event-card-wrapper {
  transition: background 0.2s linear;
}
.wiistream-platform-championship
  .platform-championship-swiper-slider
  .platform-championship-slider-card-wrapper {
  border: 1px solid var(--light-border-color);
  padding: var(--spacing-sm);
  padding-bottom: var(--spacing-xl);
  background-color: var(--color-background-primary);
  border-radius: var(--radius-24);
  background-clip: padding-box;
  transition: background 0.2s linear;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wiistream-platform-championship
  .platform-championship-swiper-slider
  .platform-championship-slider-card-wrapper
  .slider-play-button-overlay {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0, 0, 0, 0.5);
  transition: 0.2s linear;
}
.wiistream-contact-us-section {
  background-color: var(--color-background-primary);
  position: relative;
}
@media only screen and (min-width: 2400px) {
  .wiistream-contact-us-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.wiistream-contact-us-section::before {
  position: absolute;
  content: "";
  width: 310px;
  height: 310px;
  display: inline-flex;
  background-color: var(--circle-bg-radius);
  filter: blur(100px);
  opacity: 20%;
  left: 50%;
  transform: translateX(-50%);
  top: -5%;
  border-radius: 500px;
}

.wiistream-contact-us-footer .wiistream-partnerships {
  display: none;
}
.login-form-input {
  background-color: var(--light-border-color);
  border: 1px solid var(--light-border-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-8);
}
.login-form-input ::placeholder {
  color: color-mix(in srgb, var(--color-white) 50%, transparent);
}
.login-form-input:focus {
  outline: none;
  background-color: var(--light-border-color);
  border: 1px solid var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-8);
}

.wiistream-success-popup {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: color-mix(
    in srgb,
    var(--color-background-primary) 60%,
    transparent
  );
  backdrop-filter: blur(44px);
  -webkit-backdrop-filter: blur(44px);
  z-index: 1000;
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  transition: 0.2s linear;
  padding: 16px;
}
.wiistream-success-popup.hidden {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.wiistream-success-popup .wiistream-success-popup-main-wrapper {
  width: 100%;
  background-color: var(--color-background-primary);
  padding: var(--spacing-xl);
  border-radius: var(--radius-8);
  border: 2px solid color-mix(in srgb, var(--color-white) 20%, transparent);
}
.wiistream-events-listing-filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  z-index: 10;
  border-radius: var(--radius-8);
  overflow: hidden;
  background-color: var(--color-white);
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  transition: 0.3s linear;
  min-width: 180px;
}
.wiistream-events-listing-filter-dropdown .filter-dropdown-button {
  padding: var(--spacing-sm) calc(6 * var(--spacing-xxs));
  background-color: var(--color-white);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-14);
  color: var(--color-black);
}
.wiistream-events-listing-filter-dropdown .filter-dropdown-button:hover {
  background-color: color-mix(in srgb, var(--color-black) 4%, transparent);
}

.wiistream-events-listing-filter-dropdown.active {
  opacity: 1;
  visibility: visible;
  max-height: 400px;
  margin-top: var(--spacing-md);
}
@media only screen and (min-width: 475px) {
  .wiistream-success-popup .wiistream-success-popup-main-wrapper {
    min-width: 406px;
    max-width: 406px;
    background-color: var(--color-background-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-8);
    border: 2px solid color-mix(in srgb, var(--color-white) 20%, transparent);
  }
}

.wiistream-subscriptions-card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--spacing-lg);
  border-radius: var(--radius-10);
  gap: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--color-white) 50%, transparent);
}
.wiistream-subscriptions-card .wiistream-subscriptions-radio-button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin-top: var(--spacing-xxs);
}
/* This Is The Css For All The Hover We Have Write It Here so That It Can Be Removed On Touch Device  */

/* Check Box Css  */
/* From Uiverse.io by Shoh2008 */
.checkbox-wrapper-12 {
  position: relative;
}

.checkbox-wrapper-12 > svg {
  position: absolute;
  top: -130%;
  left: -170%;
  width: 110px;
  pointer-events: none;
}

.checkbox-wrapper-12 * {
  box-sizing: border-box;
}

.checkbox-wrapper-12 input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  margin: 0;
}

.checkbox-wrapper-12 input[type="checkbox"]:focus {
  outline: 0;
}

.checkbox-wrapper-12 .cbx {
  width: 20px;
  height: 20px;
  top: calc(100px - 12px);
  left: calc(100px - 12px);
}

.checkbox-wrapper-12 .cbx input {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-4);
}

.checkbox-wrapper-12 .cbx label {
  width: 20px;
  height: 20px;
  background: none;
  border-radius: var(--radius-4);
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

.checkbox-wrapper-12 .cbx svg {
  position: absolute;
  top: 4px;
  left: 3.5px;
  z-index: 1;
  pointer-events: none;
}

.checkbox-wrapper-12 .cbx svg path {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  transition: stroke-dashoffset 0.3s ease;
  transition-delay: 0.2s;
}

.checkbox-wrapper-12 .cbx input:checked + label {
  animation: splash-12 0.6s ease forwards;
}

.checkbox-wrapper-12 .cbx input:checked + label + svg path {
  stroke-dashoffset: 0;
}

@-moz-keyframes splash-12 {
  40% {
    background: var(--color-button-primary);
    box-shadow: 0 -18px 0 -8px var(--color-button-primary),
      16px -8px 0 -8px var(--color-button-primary),
      16px 8px 0 -8px var(--color-button-primary),
      0 18px 0 -8px var(--color-button-primary),
      -16px 8px 0 -8px var(--color-button-primary),
      -16px -8px 0 -8px var(--color-button-primary);
  }

  100% {
    background: var(--color-button-primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@-webkit-keyframes splash-12 {
  40% {
    background: var(--color-button-primary);
    box-shadow: 0 -18px 0 -8px var(--color-button-primary),
      16px -8px 0 -8px var(--color-button-primary),
      16px 8px 0 -8px var(--color-button-primary),
      0 18px 0 -8px var(--color-button-primary),
      -16px 8px 0 -8px var(--color-button-primary),
      -16px -8px 0 -8px var(--color-button-primary);
  }

  100% {
    background: var(--color-button-primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@-o-keyframes splash-12 {
  40% {
    background: var(--color-button-primary);
    box-shadow: 0 -18px 0 -8px var(--color-button-primary),
      16px -8px 0 -8px var(--color-button-primary),
      16px 8px 0 -8px var(--color-button-primary),
      0 18px 0 -8px var(--color-button-primary),
      -16px 8px 0 -8px var(--color-button-primary),
      -16px -8px 0 -8px var(--color-button-primary);
  }

  100% {
    background: var(--color-button-primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@keyframes splash-12 {
  40% {
    background: var(--color-button-primary);
    box-shadow: 0 -18px 0 -8px var(--color-button-primary),
      16px -8px 0 -8px var(--color-button-primary),
      16px 8px 0 -8px var(--color-button-primary),
      0 18px 0 -8px var(--color-button-primary),
      -16px 8px 0 -8px var(--color-button-primary),
      -16px -8px 0 -8px var(--color-button-primary);
  }

  100% {
    background: var(--color-button-primary);
    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
  }
}

@media (hover: hover) and (pointer: fine) {
  .hero-banner-live-events-slider
    .swiper-slider-main-wrapper
    .swiper-slider-card-wrapper
    .swiper-slider-banner:hover
    .slider-banner-overlay {
    background-color: rgb(0, 0, 0, 0.9);
  }
  .hero-banner-live-events-slider
    .live-events-swiper-slider
    .live-event-card-wrapper:hover
    .swiper-slider-banner
    .slider-banner-overlay {
    background-color: rgb(0, 0, 0, 0.9);
  }

  .hero-banner-live-events-slider
    .live-events-swiper-slider
    .live-event-card-wrapper:hover
    .swiper-slider-banner
    .slider-banner-overlay
    .slider-play-button {
    display: flex;
  }

  .hero-banner-live-events-slider
    .swiper-slider-main-wrapper
    .swiper-slider-card-wrapper
    .swiper-slider-banner:hover
    .slider-banner-overlay
    .slider-play-button {
    display: flex;
  }
  .hero-banner-live-events-slider
    .live-events-swiper-slider
    .live-event-card-wrapper:hover
    .swiper-slider-banner
    .slider-banner-overlay
    .card-header {
    display: none;
  }
  .hero-banner-live-events-slider
    .swiper-slider-main-wrapper
    .swiper-slider-card-wrapper
    .swiper-slider-banner:hover
    .slider-banner-overlay
    .card-header {
    display: none;
  }

  .hero-banner-live-events-slider
    .live-events-swiper-slider
    .live-event-card-wrapper:hover
    .swiper-slider-banner
    .slider-banner-overlay
    .centred-section {
    display: none;
  }
  .hero-banner-live-events-slider
    .swiper-slider-main-wrapper
    .swiper-slider-card-wrapper
    .swiper-slider-banner:hover
    .slider-banner-overlay
    .centred-section {
    display: none;
  }
  .wiistream-platform-championship
    .platform-championship-swiper-slider
    .platform-championship-slider-card-wrapper:hover,
  .hero-banner-live-events-slider
    .live-events-swiper-slider
    .live-event-card-wrapper:hover {
    background: var(--card-hover-gradient);
    border: 1px solid var(--color-button-primary) !important;
  }
  .wiistream-platform-championship
    .platform-championship-swiper-slider
    .platform-championship-slider-card-wrapper:hover
    .slider-play-button-overlay {
    background-color: rgb(0, 0, 0, 0.9);
  }
}

@media only screen and (min-width: 4800px) {
  .wiistream-faq-section,
  .wiistream-privacy-policy-section {
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.hero-banner-bg-image {
  object-fit: cover;
}

.player-fake-wrapper{
  max-width: 400px;
  margin: auto;
  width: calc(100% - 32px);
  padding-top: var(--spacing-5xl);
  padding-bottom: var(--spacing-5xl);
}

.position-sticky {
  position: sticky !important;
}
.text-50xl {
  font-size: calc(20 * var(--font-size-12));
}
@media only screen and (max-width: 1199px) {
  .text-50xl {
    font-size: clamp(20px, 10vh, 20 * var(--font-size-12));
  }
}

.max-w-700{
  max-width: 700px;
}
.woot-widget-bubble{
    background-color: var(--color-theme-primary) !important;
}

.woot-widget-bubble.woot-widget--expanded div{
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-primary) !important;
}