h1,h2,h3,h4,h5,h6{
    font-weight:bold;    
}

.top-strip{
    padding-top:120px;
    background:#131313;
}

/* HEADER BANNER */
.header-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #131313 url("../images/nvidia-dgx-landingP/nvidia-spark-header.webp") no-repeat;
  background-position: center center;
  background-size: cover;
  height: 520px;
  padding-top:120px;
  /* border-image: fill 0 linear-gradient(to left, hsla(0, 0%, 0%, 0.2) 80%, hsla(0, 0%, 0%, 0.5) 80%); */
}
.header-banner .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 1480px;
}

/* HEADER BANNER - LEFT SIDE */
.header-banner .header-content-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1em;
  border-left: 5px solid #006fff;
  padding: 2em;
  width: 45%;
  text-wrap: balance;
}

.header-banner .header-content-left .header-logo {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}

.header-banner .header-content-left .header-logo img {
  max-width: 100%;
  height: 45px;
  object-fit: contain;
  object-position: left;
}

/* HEADER BANNER - LEFT SIDE TEXT */
.header-banner .header-content-left .header-title {
  padding: 0;
  color: #fff;
  font-size: clamp(2rem, 0.5rem + 1vw, 2rem);
  line-height: 2.2rem;
  
}

.header-banner .header-content-left h2 {
  padding: 0;
  color: #fff;
  font-size: clamp(0.8rem, 0.5rem + 0.75vw, 1.5rem);
  line-height: 1.6rem;
  
}

.header-banner .header-content-left h3 {
  padding: 10px 0 0 0;
  color: #fff;
  font-size: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);
  line-height: 1.6rem;
  
  text-transform: none;
}

.header-banner .header-content-left p {
  padding: 0;
  color: #fff;
  font-weight: 400;
  font-size: clamp(1rem, 0.5rem + 0.25vw, 0.75rem);
  line-height: 1.2rem;
  font-family: "Poppins-Regular", sans-serif;
  padding-bottom: 10px;
}

.header-banner .header-content-left .small-txt {
  color: #fff;
  font-size: clamp(0.4375rem, 0.375rem + 0.2vw, 0.55rem);
  line-height: 1.2rem;
  font-family: "Poppins-Regular";
}

.header-banner a {
  text-decoration: none;
}

/* HEADER BANNER - RIGHT SIDE */
.header-banner .header-content-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10em;
  padding: 2em;
  width: 50%;
}

/* HEADER BANNER - RIGHT SIDE - LOGOS */
.header-banner .header-content-right .header-logo-top,
.header-banner .header-content-right .header-logo-center,
.header-banner .header-content-right .header-logo-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2em;
}

/* LOGO TOP */
.header-banner .header-content-right .header-logo-top img {
  width: auto;
  height: 2em;
  object-fit: contain;
}

/* LOGO CENTER */
.header-banner .header-content-right .header-logo-center img {
  width: auto;
  height: 2em;
  object-fit: contain;
}

/* LOGO BOTTOM */
.header-banner .header-content-right .header-logo-bottom img {
  width: auto;
  height: 2em;
  object-fit: contain;
}

/* BUTTONS */
.btn-solid,
.btn-ghost {
  transition: ease-out all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2em;
  padding: 0.8em 3em;
  /* margin-top: 1em; */
  width: fit-content;
  min-width: 5rem;
  font-size: 0.8rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* BUTTONS - SOLID WHITE */
.btn-solid.white {
  border: none;
  background-color: rgba(255, 255, 255, 1);
  color: #000;
}

.btn-solid.white:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* BUTTONS - SOLID BLACK */
.btn-solid.black {
  border: none;
  background-color: #000;
  color: #fff;
}

.btn-solid.black:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* BUTTONS - GHOST WHITE */
.btn-ghost.white {
  border: solid 2px #fff;
  background-color: transparent;
  color: #fff;
}

.btn-ghost.white:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* BUTTONS - GHOST BLACK */
.btn-ghost.black {
  border: solid 2px #000;
  background-color: transparent;
  color: #000;
}

.btn-ghost.black:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* BUTTONS - GHOST OPTIC */
.btn-solid.optic {
  background-color: #ddfb09;
  color: #000;
}

.btn-solid.optic:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* BUTTON ROW */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* SEO TEXT */
.header-seo-title {
  display: none;
}

/* RESPONSIVE STYLES */
@media (width <= 768px) {
  .header-banner {
    border-image: fill 0 linear-gradient(hsla(0, 0%, 0%, 0.5), hsla(0, 0%, 0%, 0.6));
    background-position: 65% 50%;
  }

  .header-banner .header-content {
    flex-direction: column;
    align-items: center;
    padding: 1em 0;
  }

  .header-banner .header-content h1,
  .header-banner .header-content h2,
  .header-banner .header-content p {
    color: #fff;
    text-align: center;
  }

  .header-banner .header-content-left {
    align-items: center;
    margin: auto;
    border: none;
    width: auto;
  }

  .header-banner .header-content-left .small-txt {
    font-size: 0.8em;
    line-height: 1.2em;
  }

  .header-banner .header-content-right {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding: 0;
    width: 0;
  }

  .header-banner .header-content-right .header-logo-top,
  .header-banner .header-content-right .header-logo-center,
  .header-banner .header-content-right .header-logo-bottom {
    display: flex;
    justify-content: center;
    gap: 2em;
    margin: 0 auto;
  }

  .header-banner .header-content-left img {
    width: 100%;
  }

  .header-banner .header-content-center img {
    width: 100%;
  }

  .header-banner .header-content-right img {
    width: 100%;
  }

  .header-banner .header-content-right .header-logo-top img,
  .header-banner .header-content-right .header-logo-center img,
  .header-banner .header-content-right .header-logo-bottom img {
    width: auto;
    height: 1em;
    object-fit: contain;
  }
}

/* BACKGROUNDS */
.bg-black {
  background-color: #000;
}

.bg-white {
  background-color: #fff;
}

.bg-grey {
  background-color: #f1f1f1;
}

.bg-midgrey {
  background-color: #cacaca;
}

.bg-darkgrey {
  background-color: #303030;
}

/* LAYOUTS */
.container-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
  margin: 0 auto;
  padding: 5em;
  max-width: 1480px;
}

.container-content img {
  padding: 0;
  max-width: 80%;
  height: auto;
  object-fit: contain;
}

@media (width <= 768px) {
  .container-content {
    align-content: center;
    align-items: center;
    padding: 2em;
    text-align: center;
  }

  .container-content img {
    max-width: 100%;
  }
}

/* COLUMNS */
.container-content.column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.container-content.column img {
  padding: 0;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.column.flex {
  flex: 1;
}

/* ROWS */
/*.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.row img {
  padding: 0;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
*/
.row.flex {
  flex: 1;
}

/* FONTS */
.container-content h1 {
  padding: 0;
  font-size: 2.986rem;
  line-height: 1.2;
  font-family: "Poppins-Bold", sans-serif;
  text-wrap: balance;
}

.container-content h2 {
  padding: 0;
  font-size: 2.488rem;
  line-height: 1.3;
  font-family: "Poppins-SemiBold", sans-serif;
  text-wrap: balance;
}

.container-content h3 {
  color: #fff;
  font-size: 2.074rem;
  line-height: 1.4;
  font-family: "Poppins-SemiBold", sans-serif;
  text-transform: capitalize;
  text-wrap: balance;
}

.container-content h4 {
  font-size: 1.728rem;
  line-height: 1.4;
  font-family: "Poppins-SemiBold", sans-serif;
  text-wrap: balance;
}

.container-content h5 {
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: "Poppins-SemiBold", sans-serif;
  text-align: center;
  text-wrap: balance;
}

.container-content h6 {
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: "Poppins-SemiBold", sans-serif;
  text-wrap: balance;
}

.container-content p {
  padding: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.6;
  font-family: "Poppins-Regular", sans-serif;
  text-align: center;
  text-wrap: pretty;
}
.container-content .small-txt {
  font-size: 0.833rem;
  line-height: 1.4;
  font-family: "Poppins-Regular";
}
.container-content a {
  cursor: pointer;
  color: var(--scan-blue);
  font-size: 0.9rem;
  font-weight:600;
  text-decoration: none;
}

/*.container-content li {
	margin: 0.5rem 2rem;
	padding: 0;
	font-size: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);
	line-height: 1.5;
	font-family: "Poppins-Regular", sans-serif;
	list-style-type: disc;
	list-style-position: outside;
	/~ text-indent: 1em; ~/
	text-align: left;
	text-wrap: pretty;

	&::marker {
		color: var(--scan-optic);
	}
}*/

/* TEXT ALIGNMENT UTILITIES */
.container-content .text-center {
  text-align: center !important;
}

.container-content .text-left {
  text-align: left !important;
}

.container-content .text-right {
  text-align: right !important;
}

/* TEXT COLORS */
.container-content .text-black *:not(a):not(.btn-solid):not(.btn-ghost):not(span) {
  color: #000;
}

.container-content .text-white *:not(a):not(.btn-solid):not(.btn-ghost):not(span) {
  color: #fff;
}

.container-content .text-blue *:not(a):not(.btn-solid):not(.btn-ghost):not(span) {
  color: var(--scan-blue-color);
}

.container-content .text-optic *:not(a):not(.btn-solid):not(.btn-ghost):not(span) {
  color: var(--optic-yellow-color);
}

.text-blue {
  color: var(--scan-blue-color);
}

.text-optic {
  color: var(--optic-yellow-color);
}

.text-grey {
  color: #ccc;
}

.text-white {
  color: #fff;
}

.text-black {
  color: #000 !important;
}

/* UTILITY CLASSES */
.seperator.grey {
  margin: 1rem 0;
  background-color: #ccc;
  width: 100%;
  height: 1px;
}

.seperator.blue {
  margin: 1rem 0;
  background-color: var(--scan-blue);
  width: 5rem;
  height: 5px;
}

.seperator.optic {
  margin: 1rem 0;
  background-color: var(--scan-optic);
  width: 5rem;
  height: 5px;
}

/* SPACERS */
.spacer-top {
  margin-top: 2rem;
}

.spacer-bottom {
  margin-bottom: 2rem;
}

/* PADDING REMOVE */
.padding-0 {
  padding: 0 !important;
}

.padding-1 {
  padding: 1rem !important;
}

/* UNDERLINE TEXT */
.underline-text.blue {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #006fff;
  text-decoration-thickness: 0.2rem;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.1rem;
}

.underline-text.optic {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #ddfb09;
  text-decoration-thickness: 0.2rem;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.1rem;
}

/* HIGHLIGHT TEXT */
.highlight-color.blue {
  background-color: #006fff;
  padding: 0.1rem 0.5rem;
  color: #fff;
  line-height: 1;
}

.highlight-color.optic {
  background-color: #ddfb09;
  padding: 0.1rem 0.5rem;
  color: #fff;
  line-height: 1;
}

/* TWO-COLUMN SECTION */
.two-column-section {
  padding: 1rem;
}

.two-column-section.start {
  width: 100%;
}

.two-column-section .flex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}
.two-column-section .flex-row.reverse {
  flex-direction: row-reverse !important;
}

.two-column-section .flex-row.start {
  align-items: flex-start;
}

.two-column-section .flex-row.start .feature-icon.large-image {
  width: 400px;
}

@media (width <= 985px) {
  .two-column-section .flex-row.start {
    flex-direction: column !important;
    align-items: center;
  }
}


.two-column-section .flex-row.start img {
  aspect-ratio: auto;
  padding-bottom: 20px;
}

.two-column-section .flex-row.features {
  align-items: flex-end;
}

.two-column-section .left-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.two-column-section .left-column img {
  padding: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* mix-blend-mode: darken; */
}

.two-column-section .right-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.two-column-section .left-column h2,
.two-column-section .left-column h3 {
  width: 100%;
  font-family: "Poppins-Bold", sans-serif;
  text-align: center;
}

.two-column-section .right-column img {
  padding: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* aspect-ratio: 1 / 1; */
  /* mix-blend-mode: darken; */
}

.two-column-section .right-column.tab-img img {
  border-radius: 0.5rem;
  aspect-ratio: auto;
  overflow: hidden;
}

.two-column-section .feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100px;
  height: auto;
  object-fit: contain;
}

@media (width <= 768px) {
  .two-column-section {
    padding: 0;
  }

  .two-column-section .flex-row {
    flex-direction: column !important;
    gap: 2rem;
  }

  .two-column-section .left-column,
  .two-column-section .right-column {
    align-items: center;
    text-align: center !important;
  }

  .two-column-section .left-column h3,
  .two-column-section .left-column p,
  .two-column-section .right-column h3,
  .two-column-section .right-column p {
    text-align: center !important;
  }
}

/* TAB SECTION */
.tab-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}

.tab-section-border-light {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.tab-section-border-dark {
  border-bottom: 1px solid #303030;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
}

.tab-buttons button {
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0.8em 2em;
  color: #fff;
  font-size: 1rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-transform: uppercase;
}

.tab-buttons button.selected {
  position: relative;
  cursor: pointer;
  border: none;
  border-radius: 2em;
  background: #373737;
  padding: 0.8em 2em;
  color: #ddfb09;
  font-size: 1rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
}

.tab-buttons button:hover {
  color: #ddfb09;
}

/* TAB BUTTONS - LIGHT */
.tab-buttons.light button {
  position: relative;
  cursor: pointer;
  border-radius: 2em;
  background: none;
  padding: 0.8em 2em;
  color: #434343;
  font-size: 1rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.tab-buttons.light button.selected {
  position: relative;
  cursor: pointer;
  border-radius: 2em;
  background: #e4e5eb;
  padding: 0.8em 2em;
  color: #434343;
  font-size: 1rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.tab-buttons.light button:hover:not(.selected) {
  color: #006fff;
}

/* TAB CONTENT */
.tab-content-section [data-tab] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

/* SLIDE SECTION - NEW */
:root {
  --light: #ffe6e6;
  --dark: #191919;
  --optic: #ddfc0a;
  --transition-timing: cubic-bezier(0.33, 0.1, 0.25, 1);
  --transition-duration: 0.5s;
  --content-gap: 1.25rem;
  --container-gap: clamp(0.5rem, 1vw, 1rem);
  --content-height: 11rem;
  --max-width: 1500px;
  --height: clamp(10vh, 30vw, 40vh);
}

/* MAIN CONTAINER */
.slider-accordion {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background-color: var(--dark);
  padding: 8rem;
  width: 100%;
  overflow: hidden;
}

.slider-accordion .content-text h5 {
  margin-bottom: 3rem;
  color: #fff;
  font-size: 2.074rem;
  line-height: normal;
  font-family: "Poppins-Bold", sans-serif;
  text-align: center;
}

/* ACCORDION CONTAINER */
.slider-accordion-container {
  display: flex;
  gap: var(--container-gap);
  margin-inline: auto;
  width: 100%;
  max-width: var(--max-width);
  height: var(--height);
}

/* ACCORDION ITEM */
.slider-accordion-item {
  display: grid;
  position: relative;
  grid-template-rows: 1fr auto;
  flex: 1;
  transition: flex var(--transition-duration) var(--transition-timing);
  cursor: pointer;
  border-radius: 1rem;
  isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}

.slider-accordion-container a {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.slider-accordion-item::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  content: "";
}

@media (width <= 768px) {
  .slider-accordion {
    padding: 1rem;
  }
}

/* IMAGES */
.slider-accordion-item img {
  position: absolute;
  z-index: -2;
  transition: opacity var(--transition-duration) var(--transition-timing);
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slider-accordion-item img:nth-child(2) {
  opacity: 0;
}

/* CONTENT DETAILS */
.slider-accordion-details {
  display: flex;
  position: relative;
  flex-direction: column;
  align-self: end;
  gap: 1rem;
  z-index: 1;
  width: 100%;
}

.slider-accordion-details span {
  color: #fff;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-family: "Poppins-Bold", sans-serif;
  white-space: nowrap;
}

/* CONTENT CONTAINER */
.slider-accordion-content {
  transition: max-height var(--transition-duration) var(--transition-timing);
  max-height: 0;
  overflow: hidden;
}

.slider-accordion-content > div {
  transform: translateY(20px);
  opacity: 0;
  transition:
    opacity var(--transition-duration) var(--transition-timing),
    transform var(--transition-duration) var(--transition-timing);
}

.slider-accordion-content > div {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}

.slider-accordion-content p {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  line-height: 1.4;
  font-family: "Poppins-Regular", sans-serif;
  text-wrap: pretty;
}

/* HOVER STATES */
.slider-accordion-container:has(.slider-accordion-item:hover) .slider-accordion-item:not(:hover) {
  flex: 0.5;
}

.slider-accordion-item:hover {
  flex: 1;
}

.slider-accordion-item:hover img:first-child {
  opacity: 0;
}

.slider-accordion-item:hover img:nth-child(2) {
  opacity: 1;
}

.slider-accordion-item:hover .slider-accordion-button {
  opacity: 1;
}

.slider-accordion-item:hover .slider-accordion-content {
  max-height: var(--content-height);
  overflow: hidden;
}

.slider-accordion-item:hover .slider-accordion-content > div {
  transform: translateY(0);
  opacity: 1;
}

/* CONTENT FADE-UP ANIMATION */
.slider-accordion-content > div {
  /* opacity: 0; */
  /* transform: translateY(20px); */
  transition:
    opacity var(--transition-duration) var(--transition-timing),
    transform var(--transition-duration) var(--transition-timing);
}

.play-icon{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 70px;
    color: white;
    opacity: 0.8;
}

@media (max-width: 1024px) {
  .slider-accordion-container {
    flex-direction: column;
    height: auto;
  }

  .slider-accordion-item:hover {
    flex: 2;
  }
}

@media (max-width: 768px) {
  .slider-accordion-container {
    gap: 1rem;
  }

  .slider-accordion-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .slider-accordion-button {
    align-self: center;
    opacity: 1;
    margin-top: 0.5rem;
  }

  .slider-accordion-content {
    display: block;
    max-height: none;
  }

  .slider-accordion-content > div {
    align-items: center;
  }

  .btn-pill.btn-ghost-white {
    display: none;
  }

  .slider-accordion-content p {
    display: none;
  }

  .slider-accordion-item {
    cursor: default;
  }

  .slider-accordion-container .slider-accordion-item {
    flex: 1;
  }

  .slider-accordion-item:hover {
    flex: 1;
  }

  .slider-accordion-item:hover img:first-child {
    opacity: 1;
  }

  .slider-accordion-item:hover img:nth-child(2) {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 0.1s;
  }
}

/* COMPARISON TABLE STYLING */
.comparison-table-wrapper {
  margin: 2rem 0;
  width: 100%;
  overflow-x: auto;
}

.comparison-table {
  border-collapse: collapse;
  width: 100%;
  font-family: "Poppins-Regular", sans-serif;
}

.comparison-table th,
.comparison-table td {
  align-content: center;
  border: 1px solid #e0e0e0;
  padding: 1rem;
  text-align: center;
}

.comparison-table th {
  background-color: #f7f7f7;
  font-family: "Poppins-SemiBold", sans-serif;
}

.comparison-table th.dark-header {
  background-color: #4a4f55;
  color: white;
}

.comparison-table .feature-name {
  background-color: #f0f0f0;
  font-family: "Poppins-SemiBold", sans-serif;
  text-align: left;
}

.comparison-table .small-text {
  display: block;
  color: #666;
  font-size: 0.8rem;
}

.comparison-table .notes {
  border-right: none;
  color: #666;
  font-size: 0.8rem;
  text-align: left;
  text-wrap: pretty;
}

.btn-table {
  display: inline-flex;
  transition: all 0.3s ease;
  border-radius: 2rem;
  background-color: var(--scan-blue-color);
  padding: 0.5rem 1.5rem;
  color: #fff !important;
  font-size: 0.9rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.btn-table:hover {
  background-color: #0056b3;
  color: #fff !important;
}
/* CHART VARIABLES */
:root {
  --chart-tops-color: var(--scan-blue-color);
  --chart-params-color: #76b900;
  --chart-grid-color: rgba(0, 0, 0, 0.08);
  --chart-label-color: #333;
  --chart-value-text-color: white;

  /* Chart Dimensions */
  --chart-margin: clamp(1rem, 3vw, 2rem);
  --chart-bar-height: clamp(1.5rem, 4vw, 2rem);
  --chart-row-gap: clamp(0.8rem, 2vw, 1rem);
  --chart-bar-gap: 0.75rem;
  --chart-label-width: clamp(7rem, 15%, 11rem);

  /* Chart Typography */
  --chart-label-font-size: clamp(0.8rem, 1vw, 0.9rem);
  --chart-value-font-size: clamp(0.75rem, 1vw, 0.85rem);
  --chart-legend-font-size: clamp(0.75rem, 1vw, 0.9rem);

  /* Chart Animation */
  --chart-animation-duration: 1.5s;
  --chart-animation-timing: ease-out;

  /* Chart Legend */
  --chart-legend-gap: clamp(0.5rem, 2vw, 1.25rem);
  --chart-legend-icon-size: 1rem;
}

/* BAR CHART */
.horizontal-chart-container {
  position: relative;
  margin: var(--chart-margin) auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--chart-legend-gap);
  margin-bottom: var(--chart-margin);
}

.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--chart-legend-font-size);
  font-family: "Poppins-Regular", sans-serif;
  text-align: left;
  text-wrap: pretty;
}

.legend-color {
  display: inline-block;
  width: var(--chart-legend-icon-size);
  height: var(--chart-legend-icon-size);
}

.tops-color {
  background-color: var(--chart-tops-color);
}

.params-color {
  background-color: var(--chart-params-color);
}

.horizontal-chart {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--chart-row-gap);
  z-index: 2;
  width: 100%;
}

.chart-grid {
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  grid-template-columns: repeat(10, 1fr);
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.grid-line {
  border-right: 1px solid var(--chart-grid-color);
  height: 100%;
}

.chart-row {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1rem);
  width: 100%;
}

.chart-label {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0.625rem;
  width: var(--chart-label-width);
  color: var(--chart-label-color);
  font-size: var(--chart-label-font-size);
  line-height: 1.2;
  font-family: "Poppins-SemiBold", sans-serif;
  text-align: right;
}

.bars-container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: var(--chart-bar-gap);
  padding: 0.125rem 0;
}

.bar-wrapper {
  position: relative;
  width: 100%;
  height: var(--chart-bar-height);
}

.bar {
  display: flex;
  position: relative;
  align-items: center;
  transition: width var(--chart-animation-duration) var(--chart-animation-timing);
  width: 0%;
  height: 100%;
  overflow: hidden;
}

.tops-bar {
  background-color: var(--chart-tops-color);
}

.params-bar {
  background-color: var(--chart-params-color);
}

/* SET BAR FULL */
.max-bar {
  width: 100% !important;
}

.bar-label {
  padding-left: 0.75rem;
  color: var(--chart-value-text-color);
  font-size: var(--chart-value-font-size);
  font-family: "Poppins-Regular", sans-serif;
  white-space: nowrap;
}

@media (max-width: 768px) {
  :root {
    /* Mobile-specific overrides */
    --chart-label-width: 100%;
  }

  .horizontal-chart-container {
    margin: calc(var(--chart-margin) / 2) 0;
  }

  .chart-legend {
    justify-content: left;
  }

  .chart-row {
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
  }

  .chart-label {
    justify-content: flex-start;
    padding: 0 0 0.25rem 0;
    width: 100%;
    text-align: left;
  }

  .bar-label {
    font-size: clamp(0.7rem, 2.5vw, 0.85rem);
  }
}

@media (width <= 425px) {
  .bar-label {
    font-size: 0.6rem;
  }

  /* .bar {
		overflow: visible;
	} */
}

/* FAQs */
.borders {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.faqs-container {
  margin: 0 auto;
  padding: 2em;
  max-width: 1480px;
}

.faqs-container .faqs {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.faq-item:not(.faq-answer) {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.faqs-container .faqs h4 {
  margin: 1em 0;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.8rem;
  font-family: "Poppins-Bold", sans-serif;
}

.faq-toggle {
  display: none;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #e6e6e6;
  padding: 1em;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.2rem;
  font-family: "Poppins-SemiBold", sans-serif;
  user-select: none;
}

.faq-question::after {
  float: right;
  padding-left: 1em;
  content: "+";
}

.faq-answer {
  padding: 0 2em;
  max-height: 0;
  overflow: hidden;
}

.faq-answer h2 {
  padding: 2rem 0 0 0;
  color: #000;
  font-size: 1.1rem;
  line-height: 1.5rem;
  font-family: "Poppins-SemiBold", sans-serif;
}

.faq-answer ul {
  padding: 1rem 2rem;
  font-size: 0.9rem;
  line-height: 1.5rem;
  font-family: "Poppins-Regular", sans-serif;
  list-style: disc;
}

.faq-answer p {
  padding: 0;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.2rem;
  font-family: "Poppins-Regular", sans-serif;
  text-align: left;
  text-wrap: pretty;
}

.faq-answer a {
  color: var(--scan-blue-color);
  font-size: 0.9rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-decoration: none;
}

.faq-answer a:hover {
  text-decoration: underline;
}

.faq-answer table {
  max-width: none;
}

.faq-answer table.guideTable .rowHead,
.faq-answer table.guideTable .grey,
.faq-answer table.guideTable td {
  width: auto;
}

.faq-answer ul li {
  margin: 0 0 0.5rem 0;
}

.faq-answer ul b {
  font-family: "Poppins-SemiBold", sans-serif;
}

.faq-toggle:checked + .faq-question + .faq-answer {
  padding: 1rem 1rem 2rem;
  max-height: 100%;
}

@media (width < 768px) {
  .faqs-container {
    padding: 1rem;
  }
}

/* SITESHOP */
.siteshop-container {
  margin: 0 auto;
  padding: 2em;
  max-width: 2000px;
}

/* LETS CHAT BUTTONS */
.container-content .borderArrowBtn {
  display: table;
  position: relative;
  transition: ease-out all 100ms;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 20px;
  border: solid 3px var(--black-color);
  border-radius: var(--button-border-radius);
  background: var(--main-button-color);
  padding: 0 50px;
  width: auto;
  color: var(--black-color);
  font-size: 1.1rem;
  line-height: 3em;
  font-family: var(--header-font-family);
  text-align: center;
  text-decoration: none;
}

.container-content .borderArrowBtn.yellow {
  border: solid 3px var(--white-color);
  background: var(--main-button-color);
  color: var(--white-color);
}

.container-content .borderArrowBtn.blue {
  border: solid 3px var(--black-color);
  background: var(--main-button-color);
  color: var(--black-color);
}

.container-content .borderArrowBtn::before {
  display: block;
  position: absolute;
  top: 24px;
  right: -55px;
  transition: inherit;
  border-radius: 10px;
  background-color: var(--scan-blue-color);
  width: 75px;
  height: 4px;
  content: "";
}

.container-content .borderArrowBtn.yellow::before {
  background-color: var(--optic-yellow-color);
}

.container-content .borderArrowBtn.blue::before {
  background-color: var(--scan-blue-color);
}

.container-content .borderArrowBtn::after {
  display: block;
  position: absolute;
  top: 16px;
  right: 8px;
  transform: rotate(180deg);
  transition: inherit;
  background: url(../images/nvidia-dgx-landingP/blue-link-arrow.svg) no-repeat;
  background-position: center;
  background-size: contain;
  width: 16px;
  height: 20px;
  content: "";
}

.container-content .borderArrowBtn.yellow::after {
  background: url(../images/nvidia-dgx-landingP/yellow-link-arrow.svg) no-repeat;
}

.container-content .borderArrowBtn:hover {
  background: #f1f1f1;
}

.container-content .borderArrowBtn.blue:hover {
  background: hsla(0, 0%, 95%, 0.2);
}

.container-content .borderArrowBtn.yellow:hover {
  background: #646464;
}

.container-content .borderArrowBtn:hover::before {
  right: -40px;
}

.container-content .borderArrowBtn:hover::after {
  right: 25px;
}

@media screen and (max-width: 900px) {
  .container-content .borderArrowBtn {
    margin-top: 10px;
    padding: 0px 30px;
    font-size: 0.9rem;
  }

  .container-content .borderArrowBtn::before {
    top: 20px;
    right: -45px;
    width: 60px;
  }

  .container-content .borderArrowBtn::after {
    top: 12px;
    right: 4px;
  }

  .container-content .borderArrowBtn:hover::after {
    right: 9px;
  }
}

/* CONTACT FORM */
:root {
  --black-color: #000;
  --white-color: #fff;
  --scan-blue-color: #006fff;
  --optic-yellow-color: #ddfb09;
  --main-button-color: transparent;
  --button-border-radius: 30px;
  --button-border-color: #fff;
  --header-font-family: "Poppins-Bold", sans-serif;
  --subheader-font-family: "Poppins-SemiBold", sans-serif;
  --main-font-family: "Poppins-Regular", sans-serif;
  --light-font-family: "Poppins-Light", sans-serif;
}

/* CONTACT BAR */
.fixedPhoneBar {
  position: fixed;
  bottom: 0;
  z-index: 2;
  border-top: solid 2px var(--optic-yellow-color);
  background: var(--black-color);
  width: 100%;
  height: 80px;
}

.fixedPhoneBar .max-centerCont {
  position: relative;
  margin-top: 10px;
}

.fixedPhoneBar img,
.fixedPhoneBar .enq,
.fixedPhoneBar .enq p,
.fixedPhoneBar .enq button {
  display: inline-block;
  vertical-align: middle;
}

.fixedPhoneBar img {
  margin-top: 5px;
}

.fixedPhoneBar .enq {
  position: absolute;
  right: 60px;
}

.fixedPhoneBar .enq p {
  margin-right: 20px;
  font-family: var(--header-font-family);
}

.fixedPhoneBar .enq button {
  margin-top: 0;
  border: none;
}

@media screen and (max-width: 480px) {
  .fixedPhoneBar .enq {
    display: block;
    position: unset;
    right: auto;
    text-align: center;
  }

  .fixedPhoneBar img {
    display: none;
  }
}

/* CONTACT BAR CONTAINER */
.max-centerCont {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 25px;
  width: 100%;
  max-width: 1330px;
}

.max-centerCont.expanded {
  max-width: 1600px;
}

.max-centerCont.relative {
  position: relative;
}

.max-centerCont.sphere {
  position: relative;
  z-index: 1;
  padding: 0 1rem;
  max-width: 1500px;
}

.max-centerCont .leftAlign {
  text-align: left;
}

.max-centerCont .centerAlign {
  text-align: center;
}

.max-centerCont .black {
  color: var(--black-color);
}

.max-centerCont .blue {
  color: var(--scan-blue-color);
}

.max-centerCont h4 {
  color: var(--white-color);
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 2rem;
  font-family: var(--header-font-family);
  text-transform: none;
}

.max-centerCont h4 span {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--scan-blue-color);
  text-decoration-thickness: 7px;
  text-underline-offset: 10px;
}

.max-centerCont h4 span.highlight {
  background-color: var(--scan-blue-color);
  padding: 1rem 15px;
  color: var(--white-color);
  text-decoration: none;
}

.max-centerCont p {
  color: var(--white-color);
  font-size: clamp(0.8rem, 1vw, 1rem);
  line-height: 1.6rem;
  font-family: var(--main-font-family);
}

.max-centerCont p.centerAlign {
  padding-top: 50px;
}

.max-centerCont p span {
  display: block;
  padding-bottom: 10px;
  font-family: var(--subheader-font-family);
}

.max-centerCont p.halfWidth {
  max-width: 65%;
}

.max-centerCont p.usp {
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-family: var(--header-font-family);
}

.max-centerCont p.usp span {
  display: inline-block;
  font-size: 2em;
  font-family: inherit;
}

/* BUTTONS */
.yellowAiButton {
  display: table;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 20px;
  border: none;
  border-radius: var(--button-border-radius);
  background: var(--optic-yellow-color);
  padding: 0 35px;
  width: auto;
  color: var(--black-color);
  font-size: 1.1rem;
  line-height: 3em;
  font-family: var(--header-font-family);
  text-align: center;
  text-decoration: none;
}

.yellowAiButton.buttonCenter {
  margin: 0 auto;
}

.yellowAiButton.blue {
  transition: all 0.3s ease;
  background: var(--scan-blue-color);
  padding: 0.2rem 2rem;
  color: var(--white-color);
  font-size: 1.1rem;
}

.yellowAiButton.blue:hover {
  background: rgb(0, 85, 196);
  color: var(--white-color);
}

@media screen and (max-width: 900px) {
  .yellowAiButton {
    font-size: 0.8rem;
  }

  .yellowAiButton.blue {
    padding: 0.2rem 1.5rem;
    font-size: 0.9rem;
  }
}

.borderArrowBtn {
  display: table;
  position: relative;
  transition: ease-out all 100ms;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 20px;
  border: solid 3px var(--black-color);
  border-radius: var(--button-border-radius);
  background: var(--main-button-color);
  padding: 0 50px;
  width: auto;
  color: var(--black-color);
  font-size: 1.1rem;
  line-height: 3em;
  font-family: var(--header-font-family);
  text-align: center;
  text-decoration: none;
}

.borderArrowBtn.yellow {
  border: solid 3px var(--white-color);
  background: var(--main-button-color);
  color: var(--white-color);
}

.borderArrowBtn.blue {
  border: solid 3px var(--black-color);
  background: var(--main-button-color);
  color: var(--black-color);
}

.borderArrowBtn::before {
  display: block;
  position: absolute;
  top: 24px;
  right: -55px;
  transition: inherit;
  border-radius: 10px;
  background-color: var(--scan-blue-color);
  width: 75px;
  height: 4px;
  content: "";
}

.borderArrowBtn.yellow::before {
  background-color: var(--optic-yellow-color);
}

.borderArrowBtn::after {
  display: block;
  position: absolute;
  top: 16px;
  right: 8px;
  transform: rotate(180deg);
  transition: inherit;
  background: url(/images/homepages/ai/homepage/blue-link-arrow.svg) no-repeat;
  background-position: center;
  background-size: contain;
  width: 16px;
  height: 20px;
  content: "";
}

.borderArrowBtn.yellow::after {
  background: url(/images/homepages/ai/homepage/yellow-link-arrow.svg) no-repeat;
}

.borderArrowBtn:hover {
  background: #f1f1f1;
}

.borderArrowBtn.yellow:hover {
  background: #646464;
}

.borderArrowBtn:hover::before {
  right: -40px;
}

.borderArrowBtn:hover::after {
  right: 25px;
}

@media screen and (max-width: 780px) {
  .max-centerCont h4 span.highlight {
    padding: 0.2rem 15px;
  }
}

@media screen and (max-width: 520px) {
  .yellowAiButton {
    margin-top: 10px;
    padding: 0px 20px;
    font-size: 0.875rem;
    line-height: 2.8em;
  }
}

@media screen and (max-width: 480px) {
  .max-centerCont {
    padding: 0 1rem;
  }
}

/* CONTACT FORM - POPOVER */
.popover.aiContactForm .header {
  flex: none;
  box-sizing: border-box;
  background-color: black;
}

.popover.aiContactForm .header button.close {
  margin-top: 22px;
}

.popover.aiContactForm .header button.close:before {
  color: white;
}

.popover.aiContactForm .header h6 {
  float: left;
  padding: 10px 0 10px 20px;
  width: auto;
  color: white;
  font-size: 1.6em;
  line-height: 2em;
  font-family: var(--header-font-family);
  text-align: left;
}

@media screen and (max-width: 420px) {
  .popover.aiContactForm .header h6 {
    padding: 12px 0 10px 20px;
    font-size: 1.2em;
  }

  .popover.aiContactForm .header button.close {
    margin-top: 18px;
  }
}

.popover.aiContactForm .pageContent {
  box-sizing: border-box;
  padding: 0;
}

.popover.aiContactForm .pageContent .oneColumnContainer {
  padding: 0;
}

.popover.aiContactForm .pageContent .row {
  margin-bottom: 20px;
  height: auto;
}

.popover.aiContactForm .pageContent .row label {
  display: block;
  width: 100%;
  color: var(--black-color);
  font-size: 1em;
  font-family: var(--main-font-family);
}

.popover.aiContactForm .pageContent .row input,
.popover.aiContactForm .pageContent .row select {
  display: block;
  box-sizing: border-box;
  border: 1px solid #c1c1c1;
  padding-left: 5px;
  width: 100%;
  color: var(--black-color);
  font-size: 1em;
  font-family: var(--main-font-family);
  text-indent: initial;
}

.popover.aiContactForm .pageContent .row select {
  background-color: #f1f1f1;
  color: var(--black-color);
}

.popover.aiContactForm .pageContent .row input {
  font-size: 16px;
}

.popover.aiContactForm .pageContent .row .field-validation-error {
  display: block;
  margin-top: 3px;
  padding-left: 0;
}

.popover.aiContactForm .pageContent .row textarea {
  box-sizing: border-box;
  padding: 1em;
  color: var(--black-color);
}

.popover.aiContactForm .pageContent .buttonContainer {
  background: transparent;
  padding: 0 !important;
  text-align: left;
}

.popover.aiContactForm .pageContent .buttonContainer button {
  transition: ease-in-out background 100ms;
  cursor: pointer;
  border: none;
  border-radius: 30px;
  background: var(--black-color);
  padding: 12px 30px;
  color: var(--white-color);
  font-size: 1.2em;
  font-family: var(--header-font-family);
}

.popover.aiContactForm .pageContent .buttonContainer button:hover,
.popover.aiContactForm .pageContent .buttonContainer button:focus {
  --black-color: #737373;
  background: var(--black-color);
}

.popover.aiContactForm .pageContent div[data-leadform="DataScience"] > div p {
  color: var(--black-color);
  font-size: 1em;
  line-height: 1em;
  font-family: var(--main-font-family);
}

.popover.aiContactForm .pageContent div[data-leadform="DataScience"] > div p strong {
  font-family: var(--header-font-family);
}

.popover.aiContactForm .formFooter {
  box-sizing: border-box;
  width: 100%;
}

.popover.aiContactForm .formFooter .aiPhone {
  background: var(--optic-yellow-color);
  color: var(--black-color);
  font-size: 1.2em;
  font-family: var(--header-font-family);
  text-align: center;
}

.popover.aiContactForm .formFooter .aiPhone:before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  content: "\e919";
  color: var(--black-color);
  font-size: 16px;
  font-family: "scanicons";
}

.popover.aiContactForm .formFooter .aiLogo {
  background: var(--black-color);
  padding: 1em 0;
}

.popover.aiContactForm .formFooter .aiLogo img {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 50px;
  object-fit: contain;
  text-align: center;
}

/* SITESHOPS */
.siteshop-container {
  margin: 0 auto;
  padding: 2rem 0 2rem 0;
  max-width: 1500px;
}

/* LAUNCH INFO BAR */
.info-content-wrapper {
  border-top: 1px solid #bbb;
  background-color: #f1f1f1;

  &.team-message {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    background-color: #fff;
  }
}

.info-bar-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 1em;
  max-width: 1480px;
}

.info-bar-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  border-bottom: 1px solid #bbb;
  padding: 1em;
  text-align: center;
}

.info-bar-content h4 {
  margin: 0;
  padding: 0;
  color: #000;
  font-size: clamp(0.9rem, 0.5rem + 1vw, 0.5rem);
  line-height: 1.2rem;
  font-family: "Poppins-SemiBold", sans-serif;
}

.info-bar-content a {
  cursor: pointer;
  color: #006fff;
  font-size: clamp(0.8rem, 0.5rem + 1vw, 0.5rem);
  line-height: 1.2rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.info-bar-content .divider {
  background-color: #006fff;
  width: 2px;
  height: 2vh;

  &.black {
    background-color: #000;
    width: 1px;
    height: 3vh;
  }
}

/* INFO BAR EXPAND */
.info-bar .expands {
  overflow: hidden;
}

.info-bar .expanded-content h3 {
  padding: 0.5rem 0;
  color: #000;
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-family: "Poppins-SemiBold", sans-serif;
}

.info-bar .expanded-content h4 {
  padding: 0.5rem 0;
  color: #000;
  font-size: 1rem;
  font-family: "Poppins-SemiBold", sans-serif;
}

.info-bar .expanded-content p {
  margin: 0.2rem 0;
  padding: 0;
  color: #000;
  font-size: 0.8rem;
  line-height: normal;
  font-family: "Poppins-Regular", sans-serif;
  text-wrap: pretty;
}

/* CHEVRON ICON */
.info-bar .chevron {
  display: inline-block;
  position: relative;
  top: -2px;
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
  margin-left: 0.5em;
  border-right: 2px solid #006fff;
  border-bottom: 2px solid #006fff;
  width: 0.5em;
  height: 0.5em;
}

/* ROTATE CHEVRON ICON */
.info-bar [data-plugin="expandableBlock"].expanded .chevron {
  top: 2px;
  transform: rotate(-135deg);
}

/* LATEST UPDATE IMPROVED LAYOUT */
.update-content-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 0 auto;
  padding: 2em;
  max-width: 1480px;
}

.update-column {
  flex: 1;
  /* min-width: 280px; */
  margin: 0em;
  border-radius: 1em;
  background-color: #fff;
  padding: 3em;
}

.update-column h5 {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  font-family: "Poppins-SemiBold", sans-serif;
  text-decoration: underline;
  text-transform: uppercase;
}

.update-column p {
  font-size: 1rem;
  line-height: 1.6;
  font-family: "Poppins-SemiBold", sans-serif;
}

.update-column p.italic-text {
  font-style: italic;
  font-family: "Poppins-SemiBold", sans-serif;
}

.update-column p.bold-text {
  font-family: "Poppins-Bold", sans-serif;
}

.main-updates {
  flex: 1;
  margin: 0em;
  border-radius: 0.5em;
  background-color: #fff;
  padding: 3em;
}

.supply-info {
  flex: 1;
}

.shipment-list {
  padding: 0;
  list-style-type: none;
}

.shipment-list li {
  margin: 0.2rem 0;
  color: #000;
  font-size: 0.8rem;
  line-height: 1.6;
  font-family: "Poppins-Medium", sans-serif;
  list-style-type: disc;
  list-style-position: inside;
  text-transform: uppercase;
}

.shipment-list li::marker {
  color: #000;
}

.track-order-btn {
  display: inline-block;
  margin: 0.5rem 0;
  text-decoration: none;
}

.exchange-note {
  margin-top: 0.5rem;
  color: #555 !important;
  font-size: 0.7rem !important;
}

.exchange-section p {
  margin: 0 !important;
}

/* RESPONSIVE FOR LATEST UPDATE */
@media (max-width: 768px) {
  .update-content-columns {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1em 0 0;
  }

  .main-updates,
  .supply-info {
    flex: 1 0 100%;
    padding: 2em;
  }

  .supply-section,
  .exchange-section,
  .suppliers-section {
    margin-bottom: 1.5rem;
  }

  .update-column h5 {
    text-align: center;
  }
}

/* LAUNCH INFO */
.launch-info-intro {
  margin: 0 auto;
  padding: 3em;
  max-width: 1480px;
  text-align: center;

  .scan-message {
    color: #555;
    font-size: 1rem;
    font-family: "Poppins-SemiBold", sans-serif;
  }

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1480px;
  }

  li {
    color: #000;
    font-size: 0.8rem;
    line-height: 1.6;
    font-family: "Poppins-Regular", sans-serif;
  }

  .bold-text {
    font-family: "Poppins-Bold", sans-serif;
  }

  .txt-nopad p {
    padding: 0;
  }
}

.launch-info-intro img {
  filter: invert(29%) sepia(91%) saturate(3904%) hue-rotate(210deg) brightness(104%) contrast(101%);
  width: 1rem;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.launch-info-intro h3 {
  color: #000;
  font-size: 1.2rem;
  line-height: normal;
  font-family: "Poppins-Bold", sans-serif;
  text-transform: uppercase;
  text-wrap: pretty;
}

.launch-info-intro h4 {
  color: #000;
  font-size: 1.1rem;
  line-height: normal;
  font-family: "Poppins-SemiBold", sans-serif;
  text-transform: capitalize;
  text-wrap: pretty;
}

.launch-info-intro h5 {
  color: #fff;
  font-size: 1rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-transform: capitalize;
}

.launch-info-intro p {
  padding: 0.5em 0;
  color: #000;
  font-size: 0.8rem;
  line-height: 1.6;
  font-family: "Poppins-Regular", sans-serif;
  text-wrap: pretty;
}

.launch-info-intro a {
  cursor: pointer;
  color: #006fff;
  font-size: clamp(0.8rem, 0.5rem + 1vw, 0.5rem);
  line-height: 1.2rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.launch-update {
  margin: 2em 0;
  border-radius: 0.5em;
  background-color: #fff;
  padding: 2em;
}

.launch-update h4 {
  color: #000;
  font-size: 0.8rem;
  line-height: normal;
  font-family: "Poppins-Regular", sans-serif;
  text-transform: uppercase;
}

.launch-update.invert {
  flex: 1 1 100%;
  margin: 0;
  border-radius: 0.5em;
  background-color: #f1f1f1;
  padding: 1em;

  h3 {
    margin: 1rem 0 0;
  }
}

.launch-update.invert .timestamp {
  background-color: #006fff;
  color: #fff;
}

.launch-update.invert .timestamp.next {
  background-color: #555;
  color: #fff;
}

@media (width <= 768px) {
  .launch-update {
    padding: 1em;
  }

  .launch-info-intro {
    padding: 1em;
  }
}

@media (width <= 425px) {
  .divider {
    display: none;
  }

  .launch-info-intro img {
    display: none;
  }

  .info-box.team-message p {
    text-align: center !important;
  }

  .info-box-content.left h4,
  .info-box-content.left h5,
  .info-box-content.left p,
  .info-item {
    align-items: center !important;
    align-self: center !important;
    text-align: center !important;
  }
}

.launch-update .timestamp {
  display: inline-block;
  margin-bottom: 0.5em;
  border-radius: 3px;
  background-color: #f5f5f5;
  padding: 0.25em 0.75em;
  color: #555;
  font-size: 0.75rem;
  font-family: "Monospace", sans-serif;
  letter-spacing: 0.02em;
}

.launch-update .timestamp.next {
  background-color: #f5f5f5;
  color: #555;
  font-family: "Monospace", sans-serif;
}

.update-content {
  padding: 0.5em 0 0;
}

.update-content h5 {
  color: #000;
  font-size: 0.8rem;
  font-family: "Poppins-SemiBold", sans-serif;
}

.update-content p {
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 0.8rem;
  line-height: 1.6;
  font-family: "Poppins-Regular", sans-serif;
  text-wrap: pretty;
}

.launch-update .update-content a {
  cursor: pointer;
  color: #006fff;
  font-size: clamp(0.7rem, 0.5rem + 1vw, 0.5rem);
  line-height: 1.2rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.launch-update a {
  cursor: pointer;
  color: #fff;
  font-size: clamp(0.7rem, 0.5rem + 1vw, 0.5rem);
  line-height: 1.2rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

.status-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 1em 0;
}

/* TEAM MESSAGE */
.info-box.team-message {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  background-color: #fff;
  padding: 0;
  text-align: center;

  & img {
    width: 10rem;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

.info-box.team-message p {
  margin: 0;
  padding: 0;
  color: #006fff;
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.6;
  font-family: "Poppins-Medium", sans-serif;
}

.team-message .signature {
  color: #000;
  font-size: 0.8rem;
  font-family: "Poppins-Medium", sans-serif;
  text-align: right;

  img {
    vertical-align: middle;
    filter: invert(1);
    width: 15px;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

/* STATUS INDICATOR */
:root {
  --status-green: 0, 177, 0;
  --status-amber: 255, 153, 0;
  --status-blue: 0, 102, 255;
  --status-red: 255, 0, 0;
  --status-grey: 128, 128, 128;
}

.status-indicator {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 1rem 1rem 0rem 0rem;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}

@media (width <= 378px) {
  .status-info {
    flex-direction: column-reverse;
  }

  .status-indicator {
    margin: 1rem 0 0.5rem 0;
  }
}

.status-info h3 {
  margin: 1em 0 0.5em;
  color: #000;
  font-size: 1.1rem;
  font-family: "Poppins-SemiBold", sans-serif;
}

.status-green {
  animation: pulse-green 2s infinite;
  background: rgba(var(--status-green), 1);
}

.status-amber {
  animation: pulse-amber 2s infinite;
  background: rgba(var(--status-amber), 1);
}

.status-blue {
  animation: pulse-blue 2s infinite;
  background: rgba(var(--status-blue), 1);
}

.status-red {
  animation: pulse-red 2s infinite;
  background: rgba(var(--status-red), 1);
}

.status-grey {
  animation: pulse-grey 2s infinite;
  background: rgba(var(--status-grey), 1);
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-green), 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(var(--status-green), 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-green), 0);
  }
}

@keyframes pulse-amber {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-amber), 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(var(--status-amber), 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-amber), 0);
  }
}

@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-blue), 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(var(--status-blue), 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-blue), 0);
  }
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-red), 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(var(--status-red), 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-red), 0);
  }
}

@keyframes pulse-grey {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-grey), 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(var(--status-grey), 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--status-grey), 0);
  }
}

/* STEPS */
/* STEPS */
.steps-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin: 2em 0 0;
}

.step {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  background-color: #f1f1f1;
  overflow: hidden;
}

.step-title {
  border: 1px solid transparent;
  background-color: #000;
  padding: 1em;
  text-align: center;
}

.step-title h5 {
  margin: 0;
  color: #fff;
}

.step-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.5rem 0 0;
  border-radius: 5em;
  background-color: #ddfb09;
  padding: 0.6rem;
  width: 0.2em;
  height: 0.2em;
  color: #000;
  font-size: 0.9rem;
  line-height: 0;
  font-family: "Poppins-Bold", sans-serif;
}

.step-content {
  display: grid;
  place-items: center;
  padding: 1.5em;
  text-align: center;
}

.step p {
  margin: 0.5em 0;
  padding: 0;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.3rem;
  font-family: "Poppins-Regular", sans-serif;
  text-wrap: balance;
}

.step-description {
  display: block;
  margin-top: 0.5em;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.4;
  font-family: "Poppins-Regular", sans-serif;
  text-wrap: balance;
}

@media (width <= 768px) {
  .steps-wrapper {
    flex-direction: column;
    gap: 1em;
  }

  .info-box h4 {
    text-align: center !important;
  }
}

/* INFO BOXES */
.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin: 2em 0 0;

  &.main {
    margin: 0 auto;
    padding: 2em;
    max-width: 1480px;
  }

  &.status {
    margin: 0;
    padding: 0;
  }
}

.info-box {
  flex: 1 1 45%;
  border-radius: 0.5em;
  background-color: #f1f1f1;
  padding: 0 0 2em;

  &.main {
    border: 1px solid #ccc;
    background-color: #fff;
  }
}

.info-box-content video,
.info-box-content iframe {
  border-radius: 0.5em;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.info-box-content img {
  /* aspect-ratio: 16 / 5; */
  border-radius: 0.5em;
  width: 100%;
  height: auto;
}

.info-box p {
  margin: 1rem 0;
  padding: 0;
  color: #000;
  font-size: 0.8rem;
  line-height: 1.4;
  font-family: "Poppins-Regular", sans-serif;
  text-align: center;
  text-wrap: pretty;
}

.info-box .txt-note {
  color: #555;
  font-style: italic;
}

.info-box h4 {
  padding: 0;
  color: #000;
  font-size: 1rem;
  font-family: "Poppins-Bold", sans-serif;
  text-align: left;
  /* margin-bottom: 1rem; */
}

.info-box .no-margin {
  margin: 0;
}

.info-box-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.info-box-content.left {
  align-items: flex-start;
  align-self: start;
  text-align: left;
  text-wrap: pretty;

  h4,
  h5,
  p {
    align-items: center;
    align-self: start;
    text-align: left;
  }
}

/* INFO BOXES - 4 COLUMNS */
.info-boxes-wrapper {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2em;
  padding: 3em 0;
}

.info-box-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 1em;
  text-align: center;
}

.info-box-item .material-symbols-outlined {
  font-size: 4rem;
}

.info-box-item .material-symbols-outlined.blue {
  color: #006fff;
}

.info-box-item .divider-line-blue {
  margin-bottom: 1em;
  background-color: #006fff;
  width: 5rem;
  height: 0.3rem;
}

.info-box-item h5 {
  margin: 0;
  color: #000;
  font-size: 1.2rem;
  line-height: 1.3;
  font-family: "Poppins-SemiBold", sans-serif;
  text-wrap: balance;
}

.info-box-item p {
  margin: 0;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.4;
  font-family: "Poppins-Regular", sans-serif;
}

.info-boxes-wrapper .separator {
  align-self: stretch;
  background-color: #ccc;
  width: 1px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .info-boxes-wrapper {
    flex-wrap: wrap;
    gap: 1.5em;
  }

  .info-box-item {
    flex: 1 1 40%;
    min-width: 250px;
  }

  .info-boxes-wrapper .separator {
    display: none;
  }
}

@media (max-width: 768px) {
  .info-box-item {
    flex: 1 1 100%;
  }
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-item h5 {
  margin: 0;
  color: #006fff;
  font-size: 0.9rem;
  font-family: "Poppins-SemiBold", sans-serif;
  text-wrap: balance;
}

.info-item p {
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 0.8rem;
  line-height: 1.4;
  font-family: "Poppins-Regular", sans-serif;
}

.info-item .note-text {
  margin: 0;
  padding: 0;
  color: #555;
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.4;
  font-family: "Poppins-Regular", sans-serif;
}

.info-item ul {
  margin: 0;
  padding-left: 1.2rem;
}

.info-item li {
  color: #333;
  font-size: 0.8rem;
  line-height: 1.4;
  font-family: "Poppins-Regular", sans-serif;
  list-style-type: number;
  list-style-position: inside;
  text-wrap: balance;
}

.info-item li::marker {
  color: #000;
  font-size: 0.8rem;
  line-height: 1.4;
  font-family: "Poppins-SemiBold", sans-serif;
}

.bullet {
  color: #006fff;
  font-size: 1rem;
  font-family: "Poppins-Bold", sans-serif;
}

.info-item.highlight {
  margin-top: 0.5rem;
  border-radius: 0.3rem;
  background-color: rgba(0, 111, 255, 0.1);
  padding: 0.8rem;
}

.info-item strong {
  font-family: "Poppins-SemiBold", sans-serif;
}

@media (max-width: 768px) {
  .content-wrapper {
    gap: 0.8rem;
  }

  .info-box {
    flex: 1 1 100%;
    padding: 2em;
  }

  .info-box.updates {
    padding: 1em;
  }
}

/* TRACKING FORM */
.tracking-form {
  width: 100%;
}

.track-orders {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.track-orders input {
  border: 1px solid #ccc;
  border-radius: 0.25em;
  padding: 0.5em;
  min-width: 25%;
  font-family: "Poppins-Regular", sans-serif;
  field-sizing: content;
}

.btn-round {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: none;
  border-radius: 100px;
  background-color: #000;
  padding: 0.1rem;
  line-height: 0;
}

.btn-round:hover {
  background-color: #333;
}

.chevron-right {
  color: #fff !important;
}

@media (width <= 768px) {
  .steps-wrapper {
    flex-direction: column;
    gap: 1em;
  }

  .step {
    width: 100%;
  }
}

::selection {
  background-color: #ddfb09;
  color: #000;
}

::target-text {
  background-color: transparent;
  color: #000;
}

/* GOOGLE ICONS - ALIGNMENT FIX */
.material-symbols-outlined {
  vertical-align: middle;
}

/* STEPS */
/* STEPS */
.steps-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin: 2em 0 0;
}

.step {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  background-color: #f1f1f1;
  overflow: hidden;
}

.step-title {
  border: 1px solid transparent;
  background-color: #000;
  padding: 1em;
  text-align: center;
}

.step-title h5 {
  margin: 0;
  color: #fff;
}

.step-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.5rem 0 0;
  border-radius: 5em;
  background-color: #ddfb09;
  padding: 0.6rem;
  width: 0.2em;
  height: 0.2em;
  color: #000;
  font-size: 0.9rem;
  line-height: 0;
  font-family: "Poppins-Bold", sans-serif;
}

.step-content {
  display: grid;
  place-items: center;
  padding: 1.5em;
  text-align: center;
}

.step p {
  margin: 0.5em 0;
  padding: 0;
  color: #000;
  font-size: 0.9rem;
  line-height: 1.3rem;
  font-family: "Poppins-Regular", sans-serif;
  text-wrap: balance;
}

.step-description {
  display: block;
  margin-top: 0.5em;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.4;
  font-family: "Poppins-Regular", sans-serif;
  text-wrap: balance;
}

@media (width <= 768px) {
  .steps-wrapper {
    flex-direction: column;
    gap: 1em;
  }

  .info-box h4 {
    text-align: center !important;
  }
}

/* TRACKING FORM */
.tracking-form {
  width: 100%;
}

.track-orders {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.track-orders input {
  border: 1px solid #ccc;
  border-radius: 0.25em;
  padding: 0.5em;
  min-width: 25%;
  font-family: "Poppins-Regular", sans-serif;
  field-sizing: content;
}

.btn-round {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
  border: none;
  border-radius: 100px;
  background-color: #000;
  padding: 0.1rem;
  line-height: 0;
}

.btn-round:hover {
  background-color: #333;
}

.chevron-right {
  color: #fff !important;
}

@media (width <= 768px) {
  .steps-wrapper {
    flex-direction: column;
    gap: 1em;
  }

  .step {
    width: 100%;
  }
}

::selection {
  background-color: #ddfb09;
  color: #000;
}

::target-text {
  background-color: transparent;
  color: #000;
}

/* VIDEO SECTION */

/*****************************Videos*************************************/

.videoScroll {
  border-top: 1px solid #ccc;
}

.videoScroll .sliding-banner {
  width: 100%;
}

.videoScroll h3 {
  color: #000;
  font-size: 1.8em;
  font-family: var(--header-font-family);
}

.videoScroll [data-plugin="youtube"] {
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.videoScroll .maxCont .videosAnc {
  display: inline-block;
  width: 100%;
}

.videoScroll #vidOfset .vidBlock > div::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  border-image: fill 0 linear-gradient(to left, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 1) 100%);
  content: "";
}

.videoScroll .maxCont .videosAnc::after {
  float: right;
  background: url("/images/homepages/proaudio/Full-width-page/black-link-arrow.svg") no-repeat;
  background-position: center;
  background-size: contain;
  width: 16px;
  height: 30px;
  content: "";
}

.videoScroll #vidOfset {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 1rem;
  width: 100%;
  overflow-x: scroll;
  scrollbar-width: auto;
  scrollbar-color: #555 #e0e0e0;
}

.videoScroll #vidOfset::-webkit-scrollbar {
  height: 12px;
}

.videoScroll #vidOfset::-webkit-scrollbar-track {
  border-radius: 6px;
  background: #e0e0e0;
}

.videoScroll #vidOfset::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #555;
}

.videoScroll #vidOfset::-webkit-scrollbar-thumb:hover {
  background: #333;
}

.videoScroll #vidOfset .vidBlock {
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0 10px 0 0;
  background-color: #111;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.videoScroll #vidOfset .vidBlock a {
  display: block;
  background-color: #824293;
  width: 100%;
  height: 100%;
}

.videoScroll #vidOfset .vidBlock img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.videoScroll #vidOfset .vidBlock > div {
  position: relative;
}

.videoScroll #vidOfset .vidBlock > div h3 {
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  max-width: 350px;
  color: #fff;
  font-size: 1.4em;
  text-wrap: balance;
}

.videoScroll #vidOfset .vidBlock > div::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
  background: transparent url("/images/homepages/proaudio/full-width-page/play-icon.svg") no-repeat;
  background-size: contain;
  width: 72px;
  height: 72px;
  content: "";
}

.videoScroll #vidOfset .vidBlock > div:hover::after {
  transform: translate(-50%, -50%) scale(1.1);
}

.videoScroll .sliding-banner-tabs.tabSpots {
  display: none;
}

@media screen and (max-width: 768px) {
  .videoScroll #vidOfset .vidBlock {
    width: 430px;
    height: 230px;
  }

  .videoScroll [data-plugin="youtube"] {
    height: 230px !important;
  }

  .videoScroll #vidOfset .vidBlock iframe {
    width: 430px;
    height: 230px;
  }
}

@media screen and (max-width: 480px) {
  .videoScroll #vidOfset {
    flex-direction: column;
    overflow-x: hidden;
  }

  .videoScroll #vidOfset .vidBlock {
    width: 100%;
    height: auto;
  }

  .videoScroll #vidOfset .vidBlock > div h3 {
    top: 25px;
    right: 25px;
    left: 25px;
    max-width: 50%;
    font-size: 1em;
  }

  .videoScroll [data-plugin="youtube"] {
    height: 230px !important;
  }

  .videoScroll #vidOfset .vidBlock iframe {
    width: 100%;
    height: 230px;
  }

  .videoScroll .sliding-banner-tabs.tabSpots {
    display: block;
  }
}

.video-scrollable {
  align-items: flex-start;
  /* overflow-y: hidden;
	overflow-x: auto; */
}

/*****************************Videos*************************************/

/*****************************lower advert banner*************************************/

.bg-spark {
  background: #000 url("../ui_assets/customer/images/nvidia-spark-header.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.comparison-table .deliveryTag,
.comparison-table .finance-block,
.comparison-table .rightColumn,
.comparison-table .btn.wishList {
  display: none !important;
}



.video-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--spacing-lg);
	margin-inline: auto;
	margin-block-start: var(--spacing-2xl);
	margin-block-end: 0;
	inline-size: 100%;
}

@container video-section (inline-size >= 768px) {
	.video-container:not(.two-column) {
        max-inline-size: 50cqw;
        flex: 1;
        justify-content: center;
        align-items: center;
	}
}

/* TWO VIDEOS SIDE BY SIDE */
.video-container.two-column {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-xl);
	inline-size: 100%;
	max-inline-size: var(--container-max-width);
}

@container video-section (inline-size <= 1024px) {
	.video-container {
		grid-auto-columns: minmax(min(300px, 100%), 1fr);
		grid-auto-flow: column;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		scrollbar-color: var(--color-grey-300) transparent;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		padding-block-end: var(--spacing-md);
	}

	.video-container::-webkit-scrollbar {
		block-size: 6px;
	}

	.video-container::-webkit-scrollbar-track {
		border-radius: var(--border-radius-full);
		background: transparent;
	}

	.video-container::-webkit-scrollbar-thumb {
		transition: background-color var(--transition-quick);
		border-radius: var(--border-radius-full);
		background: var(--color-grey-300);
	}

	.video-container::-webkit-scrollbar-thumb:hover {
		background: var(--color-scan-blue);
	}

	.video-container > * {
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
}

/* TWO VIDEOS RESPONSIVE */
@container video-section (inline-size <= 768px) {
	.video-container.two-column {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}
}


.video-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	transition:
		transform var(--transition-smooth),
		box-shadow var(--transition-smooth);
	will-change: transform;
	border: none;
	border-radius: var(--border-radius-base);
	background: transparent;
	aspect-ratio: 16 / 9;
	inline-size: auto;
	/* overflow: hidden; */
}

/* ONLY YOUTUBE VIDEOS GET CURSOR POINTER AND BLACK BACKGROUND */
.video-wrapper:has([data-plugin="youtube"]) {
	cursor: pointer;
	background: var(--color-black);
}

.video-wrapper [data-plugin="youtube"] {
	border-radius: var(--border-radius-base);
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	block-size: 100%;
	overflow: hidden;
}

/* NATIVE HTML5 VIDEO PLAYER (SERVER-HOSTED) */
.video-wrapper video {
	display: block;
	border-radius: var(--border-radius-base);
	background: transparent;
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

/* ONLY STYLE YOUTUBE THUMBNAIL IMAGES, NOT VIDEO ELEMENTS */
.video-thumbnail-container img {
	position: absolute;
	inset: 0;
	border-radius: var(--border-radius-base);
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.video-wrapper img {
	border-radius: var(--border-radius-base);
	aspect-ratio: 16 / 9;
	inline-size: auto;
	block-size: 100%;
	object-fit: cover;
}

.video-wrapper iframe {
	border-radius: var(--border-radius-base);
	aspect-ratio: 16 / 9;
	inline-size: auto;
	block-size: 100%;
	overflow: hidden;
}

.video-thumbnail-container {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	border-radius: var(--border-radius-base);
	aspect-ratio: 16 / 9;
	inline-size: 100%;
	block-size: 100%;
}

.video-wrapper .video-play-icon.material-symbols-outlined {
	position: absolute;
	opacity: 0.85;
	filter: drop-shadow(0 2px 6px oklch(0% 0 0 / 0.5));
	transition: all var(--transition-smooth);
	will-change: transform, opacity;
	cursor: pointer;
	border-radius: var(--border-radius-full);
	color: white;
	font-size: 5rem;
	font-variation-settings:
		"FILL" 1,
		"wght" 400,
		"GRAD" 0,
		"opsz" 48;
}
/* HOVER ONLY FOR YOUTUBE VIDEOS */
.video-wrapper:has([data-plugin="youtube"]):hover {
	border-color: var(--color-scan-blue);
}

.video-wrapper:has([data-plugin="youtube"]):hover .video-play-icon {
	transform: var(--scale-up);
	opacity: 1;
	color: var(--color-white);
}

/* NO HOVER EFFECTS FOR NATIVE VIDEO ELEMENTS */
.video-wrapper:has(video) {
	cursor: default;
	background: transparent;
}

.video-wrapper:has(video):hover {
	border-color: var(--color-grey-100);
}

@media (width <= 985px) {
  .two-column-section .flex-row.reverse {
    flex-direction: column !important;
    align-items: normal;
  }
}