.homepage-hero-video-carousel-component{
--accent: #fff;
--gap: 24px;
--peek: 24px;
@media (max-width:600px){
 --gap: 6px;
 --peek: 28px;
}
@media (max-width:360px){
 --gap: 3px;
 --peek: 20px;
}
.controls{
		direction: ltr;
        position:relative;
        margin-top:0px;
        padding:0px 16px 28px;
        display:flex;
        align-items: start;
        justify-content:flex-end;
        flex-direction: row-reverse;
		max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
@media (min-width:1220px){
	.controls{
	padding-left:0;
	padding-right:0;
	}
}
     .nav-group{
        display:flex;
        gap:8px;
        align-items:center;
    }
     .nav-btn{
         background:#000;
         border:2px solid #000;
         padding:0px;
         text-align:center;
         border-radius:48px;
         width: 45px;
         height: 45px;
         cursor:pointer;
         font:inherit;
         font-size: 0px;
         line-height: 0;
         letter-spacing: normal;
         text-transform: none;
         display: inline-block;
         white-space: nowrap;
         word-wrap: normal;
         direction: ltr;
         font-feature-settings: "liga";
         -webkit-font-smoothing: antialiased;
         transition:all .15s ease;
         overflow:hidden;
    }
     .nav-btn:hover{
        border-color:var(--accent);
        color:var(--accent);
    }
    /* Accessible disabled state */
     .nav-btn:disabled{
         opacity:0.55;
         cursor:not-allowed;
    }
     .left-icon {
         color: #fff;
		 position: relative;
         left: -1px;
    }
     .right-icon {
         color: #fff;
		 position: relative;
         left: 1px;
    }
 	.play-icon {
         color: #000;
    }
	.pause-icon {
         color: #000;
    }
	.left-icon, .right-icon {
		svg {
		width: 0.75rem;
		height: 0.75rem;
		stroke: currentColor;
		fill: none;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		}
	}
	.play-icon, .pause-icon{ 
		svg {
		width: 55%;
		height: 55%;
		fill: currentColor;
		flex-shrink: 0;
		min-width: 17px;
		}
	}
	.rotation-button{
	  padding:0px;
      text-align:center;
      border-radius:48px;
      width: 45px;
      height: 45px;
      cursor:pointer;
      font:inherit;
      font-size: 0px;
      line-height: 0;
      letter-spacing: normal;
      text-transform: none;
				border: 1px solid black;
				background: #44D62C;
				order: 3;
				> span{
						display: none;
				}
				> span.is-visible{
						display: inline-block;
				}
				&:hover{
					background: #73e161;
				}
			}
		     .dots{
        top:60px;
        display:flex;
        flex-flow: row wrap;
        gap:8px;
        row-gap:8px;
        align-items:center;
        justify-content:center;
        width: 100%;
        overflow:hidden;
        margin-left: 151px;
		min-height: stretch;
    }
     .dot{
        width:24px;
        height:24px;
        border:none;
        cursor:pointer;
        margin:0px;
		background: transparent;
				&:before{
			content: "";
			width:8px;
			height:8px;
			border-radius:50%;
			background:#5C5C5C;
			border:none;
			display: inline-block;
		}
        &:hover{
			&:before{
				outline: 2px solid #fff;
			}
        }
    }
     .dot[aria-current="true"]{
		&:before{
			background:var(--accent);
			box-shadow:0 0 0 4px rgba(6,108,255,.12);
			width:8px;
			height:8px;
			border-radius:50%;
		}
         &:hover{
			&:before{
				outline: none;
			}
        }
    }
     @media (max-width:600px){
		.dots{
			margin-left: 112px;
		}
				.dots:has(> :nth-child(4)){
			margin-left: 0px;
		}
			.nav-btn, .rotation-button{
			width: clamp(2rem, 3.5vw, 2.75rem);
			height: clamp(2rem, 3.5vw, 2.75rem);
			padding: 5px 5px 5px 6px;
						.gmd{
				font-size:20px;
			}
		}
		    }
		@media (max-width:360px){
		.dots{
			margin-left: 0;
		}
	}
		.homepage-hero-video-carousel[aria-hidden="true"]{
         pointer-events: none;
		 filter: brightness(0.6);
	}
 &:has(.dots > .dot:first-child:last-child) .controls, &:has(.dots:empty) .controls{
         display: none;
}
.homepage-hero-video-carousel-viewport {
    display: block;
    width: 100%;
	padding-top: 24px;
	padding-bottom: 24px;
    overflow: hidden;
}
.homepage-hero-video-carousel-wrap {
  background: transparent;
	 display: flex;
	gap: var(--gap);
	transition:transform .45s cubic-bezier(.2,.9,.2,1);
    direction: ltr;
	will-change: transform;
	left: calc(50% - (min(calc(100% - var(--peek)), 1200px) / 2));
    position: relative;
	backface-visibility: hidden;
	-webkit-transform:translate3d(0,0,0);
}
.homepage-hero-video-carousel:last-child {
  margin-bottom: 0;
}
.homepage-hero-video-carousel {
  direction: initial;
  position: relative;
  width: min(calc(100% - var(--peek)), 1200px);
  aspect-ratio: 1920 / 700;
  min-height: 700px;
  max-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #000;
  height: 65vh;
	scroll-snap-align: center;
	flex: 0 0 auto;
	will-change: filter;
	backface-visibility: hidden;
	-webkit-transform:translate3d(0,0,0);
	transition: opacity linear 0.1s;
}
.homepage-hero-video-carousel .hhvc__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.homepage-hero-video-carousel .homepage-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 65vh;
  min-height: 700px;
  max-height: 700px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center bottom;
  object-position: center bottom;
}
.homepage-hero-video-carousel .homepage-hero-image img {
  width: 100vw;
  max-width: 100%;
  height: 65vh;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center bottom;
  object-position: center bottom;
  min-height: 700px;
  max-height: 700px;
}
.homepage-hero-video-carousel .hhvc-image-link {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  text-decoration: none !important;
}
/* Dark gradient overlay */
.hhvc__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient( to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 100% );
  pointer-events: none;
  z-index: 1;
}
/* Content – 1200 px max-width container */
.hhvc__content-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 3.625rem;
  backface-visibility: hidden;
  -webkit-transform:translate3d(0,0,0);
}
.hhvc__content-wrap.hhvc-has-ribbon {
  margin-top: 24px;
}
/* Exclusive Badge */
.hhvc__ribbon {
  display: inline-flex;
  background: #ff9c07;
  color: #000000;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 8px;
  margin-bottom: 1.125rem;
  height: 26px;
  align-items: center;
}
/* Title */
.hhvc__title {
  font-family: RazerF5,Arial,Helvetica,sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  text-transform: uppercase;
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.homepage-hero-video-carousel.text-black .hhvc__title { 
  color: #000000; 
}
/* Description */
.hhvc__description {
  font-family: RazerF5,Arial,Helvetica,sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  color: #FFFFFF;
  font-weight: 400;
  margin-bottom: 0.8rem;
	text-transform: uppercase;
}
.homepage-hero-video-carousel.text-black .hhvc__description { 
  color: #000000; 
}
.lowercase-exception { text-transform: lowercase; }
/* Button Group */
.hhvc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  justify-content: center;
  margin-top: clamp(.25rem, 1vw, .35rem);
}
/* Shared button base */
.hhvc__btn {
  font-family: RazerF5,Arial,Helvetica,sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 1rem;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 3px;
  min-width: 5rem;
  white-space: nowrap;
  text-decoration: none !important;
  /* Prevent layout shift on focus-visible outline */
  outline-offset: 3px;
  transition: background-color 0.3s ease;
  backface-visibility: hidden;
  -webkit-transform:translate3d(0,0,0);
}
@supports (-webkit-touch-callout: none) {
/* ios text vertical misalign for razerf5 */
  .hhvc__btn {
     padding-top: calc(1rem * 0.1875);
  }
}
.hhvc__btn:focus-visible {
  outline: 2px solid #44D62C;
}
/* "Learn More" primary variant button */
.hhvc__btn--primary {
  background: #44D62C;
  color: #000000 !important;
  border-color: #44D62C;
}
.hhvc__btn--primary:hover,
.hhvc__btn--primary:focus-visible {
  background: #73e161;
}
/* "Buy" – secondary variant button */
.hhvc__btn--secondary {
  background-color: rgba(0, 0, 0, 0.5);
  color: #44D62C;
  border: 2px solid #44D62C;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.hhvc__btn--secondary:hover,
.hhvc__btn--secondary:focus-visible {
  background: #122f0d;
}
:lang(ar-MENA), :lang(en-MENA), :lang(zh-CN), :lang(pt-BR), :lang(es-MX) {
  .hhvc__btn--secondary {
    display: none;
  }
}
.homepage-hero-video-carousel.text-black{
	.hhvc__btn--primary, .hhvc__btn--secondary, .hhvc__ribbon{
		box-shadow: 1px 0px 0px rgba(0,0,0,1), -1px 0px 0px rgba(0,0,0,1), 0px -1px 0px rgba(0,0,0,1), 0px 1px 0px rgba(0,0,0,1);
	}
	.hhvc__btn--secondary:not(:hover){
		background-color: rgba(0, 0, 0, 0.6);
	}
}
/* Play / Pause Button */
/* Anchored relative to the 1200 px inner container */
.hhvc__playback-wrap {
  position: absolute;
  bottom: clamp(.875rem, 2.5vw, 1.5rem);
  /* Right edge of the 1200 px container */
  right: max(calc((100% - 1200px) / 2), clamp(1rem, 4vw, 2.5rem));
  z-index: 3;
}
.hhvc__playback-btn {
  width: clamp(2rem, 3.5vw, 2.75rem);
  height: clamp(2rem, 3.5vw, 2.75rem);
  border-radius: 50%;
  border: none;
  background: #44D62C;
  color: #000000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backface-visibility: hidden;
  -webkit-transform:translate3d(0,0,0);
}
.hhvc__playback-btn:hover {
  background: #73e161;
}
.hhvc__playback-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.hhvc__playback-btn:active { transform: scale(.97); }
/* SVG icons inside the button */
.hhvc__playback-btn svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
  flex-shrink: 0;
	 min-width: 17px;
}
.hhvc__playback-btn .icon-pause { display: block; }
.hhvc__playback-btn .icon-play { display: none; }
.hhvc__playback-btn[data-state="paused"] .icon-play  { display: block; }
.hhvc__playback-btn[data-state="paused"] .icon-pause { display: none; }
/* Make the wrapper relative so the badge positions correctly */
.hhvc__playback-btn { position: relative; }
@media (max-width: 1400px) {
  .homepage-hero-video-carousel .homepage-hero-image img {
    min-height: 700px;
	max-height: 700px;
  }
  .homepage-hero-video-carousel {
    min-height: 700px;
	max-height: 700px;
  }
}
/* Tablet view */
@media (max-width: 1024px) {
  .homepage-hero-video-carousel .hhvc__title {
     font-size: 2rem;
  }
  .homepage-hero-video-carousel .hhvc__description {
     font-size: 1.3125rem;
  }
}
@media (max-width: 768px) {
  .homepage-hero-video-carousel, .homepage-hero-image img {
    max-height: 700px;
  }
}
/* Mobile view */
@media (max-width: 480px) {
  .homepage-hero-video-carousel {
    aspect-ratio: unset;
    padding: 0 0.625rem;
    min-height: 610px;
  }
  .homepage-hero-video-carousel .hhvc__description {
			 font-size: 1.1875rem;
     line-height: 1.3;
    padding-top: 5px;
  }
  .homepage-hero-video-carousel .homepage-hero-image img, .homepage-hero-video-carousel .hhvc__video {
    min-height: 610px;
  }
}
}