@media (max-width:1870px) {
  .footer-columns {
    gap: 220px
  }
}

@media (max-width:1618px) {
  .footer-columns {
    gap: 114px
  }
}

@media (max-width:1437px) {
  .StreamBottom {
    padding: 24px 50px
  }

  .stream-video {
    max-width: 390px
  }
}

@media (max-width:1440px) {
  .streaming-section-content {
    padding: 395px 0 40px 100px
  }

  .stream-video {
    max-width: 370px
  }
}

@media (max-width:1400px) {
  .cards-container {
    padding: 24px
  }

  .artVideo {
    margin-top: 120px
  }

  .numbers-border-wrapper {
    margin: 0 24px
  }

  .info-section {
    position: static
  }

  .card:nth-child(2) {
    transform: translateY(0)
  }

  .streaming-section-content {
    flex-direction: column;
    align-items: center;
    padding: 395px 0 40px 0
  }

  .info-section {
    padding: 0 24px
  }

  .device-mockup.last-device {
    border-top-left-radius: 44px;
    border-bottom-left-radius: 44px;
    border-top-right-radius: 44px;
    border-bottom-right-radius: 44px
  }

  .device-mockup.last-device::before {
    border-top-left-radius: 44px;
    border-bottom-left-radius: 44px;
    border-top-right-radius: 44px;
    border-bottom-right-radius: 44px
  }

  .appTitle {
    font-size: 28px;
    line-height: 40px
  }

  .appParagraph {
    padding-bottom: 32px
  }

  input[type="text"] {
    width: 305px;
    height: 48px
  }

  .testimonials-title {
    margin: 200px 24px 66px 24px
  }

  .column p {
    line-height: 32px;
    font-size: 24px
  }

  .column h2 {
    font-size: 28px
  }

  .slowArt-section .healthContentList li {
    font-size: 20px
  }

  .numbers-border-wrapper {
    width: auto
  }

  .footer-section {
    margin: 24px
  }

  .install-app-section {
    align-items: center
  }

  .device-mockup:nth-child(3) {
    border-bottom-right-radius: 32px;
    border-top-right-radius: 32px
  }

  .device-mockup:nth-child(3)::before {
    border-bottom-right-radius: 32px;
    border-top-right-radius: 32px
  }

  .streaming-section-content {
    flex-direction: column;
    justify-content: center;
    align-items: center
  }

  .info-section {
    position: static
  }

  .install-app-section {
    align-items: center
  }
}

@media (max-width:1024px) {
  .section-2 {
    margin-top: 200px
  }

  .leftItem {
    gap: 20px
  }

  .cta-group {
    gap: 20px
  }

  .numbers-border-wrapper {
    margin: 0 24px
  }

  .info-section h2,
  .available-on-section h2 {
    font-size: 28px
  }

        .available-on-section h2,
        .install-section h2 {
       font-size: 16px
     }

  .stream-video {
    max-width: 340px
  }

  .available-Install {
    gap: 30px;
    align-items: start
  }

  .footer-columns {
    gap: 60px
  }

  .footer-gradient {
    padding: 30px
  }

  .footer-section {
    padding: 196px 20px
  }

  .StreamBottom {
    padding: 24px
  }
}

@media (max-width:992px) {
  .streamspan {
    display: none
  }

  .bottomPara {
    display: none
  }

  .artwork {
    margin-bottom: 200px
  }

  .artwork {
    margin-top: 100px
  }

  .navbar {
    display: none
  }

  .cta-link {
    display: none
  }

  .mobileMenu,
  .menuClose {
    display: flex;
    flex-direction: column;
    align-items: center
  }

  .menu-label {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #ff23a5
  }

  .artButton {
    padding-top: 57px
  }

  .numbers-border-wrapper {
    margin: 0 24px
  }

  .numbers-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px
  }

  .numbers {
    margin-top: 186px
  }

  .experiance {
    margin-top: 221px
  }

  .button-wrapper {
    margin-bottom: 207px
  }

  .streaming-section-content {
    flex-direction: column;
    align-items: center
  }

  .install-app-section {
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    scrollbar-width: none;
    -ms-overflow-style: none
  }

  .install-app-section::-webkit-scrollbar {
    display: none
  }

  .device-mockup {
    flex: 0 0 90%;
    scroll-snap-align: start;
    border-radius: 18px
  }

  .device-mockup::before {
    border-radius: 18px;
    padding: 1px
  }

  .device-mockup.last-device {
    border-radius: 18px
  }

  .device-mockup.last-device::before {
    border-radius: 18px
  }

  .device-mockup:nth-child(4) {
    transform: unset;
    max-width: 792px;
    padding: 6px 13px
  }

  .device-mockup:nth-child(3) {
    transform: unset;
    top: unset;
    right: unset;
    max-width: 740px;
    padding: 6px 13px
  }

  .device-mockup:nth-child(2) {
    top: unset;
    right: unset;
    max-width: fit-content;
    max-width: 495px;
    padding: 6px 13px
  }

  .device-mockup:nth-child(1) {
    top: unset;
    right: unset;
    max-width: 355px;
    padding: 6px 13px
  }

  .device-mockup video {
    height: 100%;
    border-radius: 18px
  }

  .excellenceDots {
    display: flex;
    margin-top: 37px
  }

  .slowArt-section {
    flex-direction: column;
    gap: 30px;
    padding: 15px 0
  }

  .gradient-border.left {
    margin-left: 15px;
    width: 100%;
    align-self: end;
    max-width: 391px
  }

  .gradient-border.right {
    margin-right: 15px;
    width: 100%;
    max-width: 391px;
    align-self: start
  }

  .column h2 {
    font-family: Chillax;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: capitalize;
    text-align: start;
    margin-top: 48px
  }

  .column p {
    font-family: Chillax;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 1px
  }

  .healthContentList li {
    font-family: Chillax;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 1px
  }

  .gradient-border.left .info-card {
    padding: 0
  }

  .gradient-border.right {
    padding-left: 0
  }

  .content {
    gap: 24px
  }

  .content p {
    font-size: 32px;
    line-height: 40px;
    text-align: left
  }

  .gradient-border input {
    width: 100%;
    padding-left: 20px;
    height: 52px
  }

  input::placeholder {
    font-size: 16px;
    line-height: 52px
  }

  .arrow-btn img {
    width: 24px;
    height: 19px
  }

  .contentright p {
    font-size: 16px;
    line-height: 24px;
    width: 100%
  }

  .gradient-border {
    flex-direction: row;
    width: 100%
  }

  .arrow-btn {
    right: 12px;
    width: 24px
  }

  .healthContentList li {
    padding-bottom: 16px
  }

  .startWatching {
    margin-top: 40px
  }

  .column .startWatching {
    margin-bottom: 48px
  }

  .inner-content-container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left
  }

  .column-left,
  .column-right {
    flex: 1;
    max-width: 50%
  }

  .column-left {
    padding-right: 20px
  }

  .column-right {
    padding-left: 20px
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    margin: 100px 24px 0 24px
  }

  .content p {
    margin-bottom: 0
  }

  .testimonials-gradient-wrapper {
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none
  }

  .testimonials-gradient-wrapper::-webkit-scrollbar {
    display: none
  }

  .testimonials-cards-wrapper {
    display: flex;
    gap: 32px;
    width: max-content
  }

  .testimonial-card {
    flex-shrink: 0;
    width: 100vw;
    max-width: 320px
  }

  .app-section {
    flex-direction: column;
    gap: 30px;
    padding: 15px 0
  }

  .appGradient-border.left {
    margin-left: 15px;
    width: 100%;
    align-self: end;
    max-width: 391px
  }

  .appGradient-border.right {
    margin-right: 15px;
    width: 100%;
    max-width: 355px;
    align-self: start
  }

  .appcolumn-left,
  .appcolumn-right {
    flex: 1;
    max-width: 50%
  }

  .appcolumn-left {
    padding-right: 20px
  }

  .appcolumn-right {
    padding-left: 20px
  }

  .appcolumn.right .appcontent-body img {
    height: 568px
  }

  .appcolumn.left .appcontent-body {
    padding: 48px 40px;
    height: auto
  }

  .appButton button {
    margin-top: 0;
    margin-bottom: 32px
  }

  .slowArt-section {
    height: unset
  }

  .mockup-p {
    display: none
  }
}

@media (max-width:768px) {

  .streaming-intro,
  .streaming-intro-wrapper {
    width: 100%;
    border-radius: 24px
  }

     .logoMenu img {
       padding-left: 2px;
       padding-top: 14px;
       padding-bottom: 14px;
     }
     
  .streaming-heading {
    font-size: 21px;
    line-height: 28px
  }

  .streaming-description {
    font-size: 16px;
    line-height: 24px
  }

  .discover-button {
    padding: 10px 16px
  }

  .discover-button a {
    font-size: 17px
  }

  .TransformArt {
    font-size: 28px;
    line-height: 40px;
    padding: 0 24px
  }

  .experiance,
  .artwork {
    font-size: 28px;
    padding: 0 24px
  }

  .artP {
    font-size: 28px;
    line-height: 32px;
    padding: 0 24px
  }

  .testimonials-title {
    font-size: 28px;
    line-height: 32px
  }

  .artTitle {
    font-size: 30px;
    padding: 0 24px
  }

  .numbers h2 {
    font-size: 28px
  }

  .streaming-section-content {
    padding-top: 100px
  }

  .card-number {
    width: fit-content;
    font-size: 28px
  }

  .footer-section {
    display: block;
    padding: 64px 0;
    margin: 0 24px
  }

  .footer-columns {
    flex-direction: column;
    gap: 40px;
    margin-top: 32px
  }

  .footer-heading {
    font-size: 28px
  }

  .mobileHeader {
    padding: 24px
  }

  .menuConetnt {
    padding: 0 24px
  }

  .gradient-input-wrapper {
    margin-bottom: 28px
  }

  .footer-links li,
  .platform-list li {
    font-size: 14px
  }

  .menuConetnt .getintouch {
    margin: 15px 0
  }

  .follow {
    margin-bottom: 10px
  }

  .install {
    padding-bottom: 0;
    margin-bottom: 10px
  }

  .footer-signup-title,
  .footer-subscribe,
  .footer-availability,
  .footer-apps {
    font-size: 14px;
    line-height: 22px;
    width: 205px
  }

  .footer-col .footer-subscribe a {
    font-size: 14px
  }

  .getintouch a {
    padding-top: 24px;
    font-size: 14px
  }

  .app-buttons {
    flex-direction: column;
    align-items: flex-start
  }

  .footer-bottom {
    flex-direction: column;
    gap: 24px;
    margin-top: 32px
  }

  .footerBottom {
    flex-direction: column;
    gap: 16px
  }

  .footer-links-bottom {
    flex-direction: column;
    gap: 8px
  }

  .streaming-intro-wrapper::before {
    border-radius: 24px
  }

  .streaming-intro {
    padding: 20px
  }

  .modal-content {
    gap: 20px
  }

  .modal-content iframe {
    height: 280px
  }
}

@media (max-width:575px) {
  .install-app-section {
    align-items: start
  }

  .cta-glow {
    margin-bottom: 7px
  }
}

@media (max-width:500px) {
  .numbers-card {
    width: 100%
  }

  .shadow-upper {
    position: fixed
  }

  .app-buttons {
    margin-top: 0;
    flex-direction: row
  }

  .footer-gradient {
    padding: 24px 24px 30px
  }

  .footer-gradient::before,
  .footer-gradient {
    border-radius: 24px
  }

  .footerBottom {
    gap: 12px
  }

  .footer-columns {
    padding: 0
  }

  .platform-list li {
    margin-bottom: 6px
  }

  .getintouch {
    margin-top: 0
  }

  .email-input {
    height: 56px
  }

  .gradient-border input {
    padding-top: 12px;
    height: 56px
  }

  .footer-signup-title {
    padding-top: 0
  }
}

@media (max-width:481px) {
  .stream-video {
    top: 30%;
    max-width: 300px
  }

  .header {
    position: fixed;
    top: 0;
    padding: 24px 6px 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9
  }

  .shadow-upper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 200px
  }

  .cta-glow {
    padding: 4px 10px
  }

  .cta-group {
    gap: 5px
  }

  .coming-soonContent {
    gap: 6px;
    padding: 0 4px 0 4px;
    font-size: 14px;
    height: 46px
  }

  .artwork {
    margin-bottom: 0
  }

  .video-inner {
    border-radius: 24px
  }

  .artVideo {
    border-radius: 24px
  }

  .artVideo::before {
    border-radius: 24px
  }

  .cards-container {
    display: grid;
    grid-template-columns: 1fr
  }

  .app-section {
    padding: 0 0;
    overflow: hidden
  }

  .subTitle img {
    width: 20px
  }

  input[type="text"] {
    width: 100%
  }

  .gradient-border.left {
    max-width: 345px
  }

  .gradient-border.right {
    max-width: 345px
  }

  .appGradient-border.right {
    max-width: 345px
  }

  .StreamBottom {
    bottom: 52px
  }

  .modal-content {
    border-radius: 8px
  }

  .modal-content iframe {
    height: 260px
  }
}
/* 2026-08-30 (Reno). The TV page header and drawer below 1150px.

   Rule 1 to 4, the header. Hide the desktop nav pill and the two in-page
   CTA links from 1150px down, instead of from 992px down. This header
   carries the logo, the nav pill and two text CTAs on one line. With five
   items in the pill instead of three it stops fitting at 1141px, not at
   992px. Measured on the rendered DOM: at 1142 the CTA group is 46px (one
   line) and the logo is its natural 95px; at 1141 the CTA group is 58px
   (both CTAs wrapped) and the logo is squeezed, reaching 15px by 993.
   1150 is used rather than 1141 so there is 8px of measured clearance
   between the pill and the CTA group at the boundary, rather than 0px.

   Rule 5, the drawer. Below 1150 the drawer is the only navigation on this
   page, so it needs the gutter at every width where it can be opened, not
   only below 768. The base .menuConetnt in Css/stream.css sets no padding
   and the only padding rule lives in the max-width:768px block further up
   this file, so from 769 to 992 the live drawer has run its links flush
   against x=0. Verified on the live host before changing anything: at 900
   and 800 the computed padding is 0px and the first link's left edge is 0;
   at 760 it is 0px 24px and 24. Pre-existing defect, fixed here rather than
   widened. Same 24px the 768 block already uses, so nothing below 768
   changes. The MENU button is display:none above 1150, so the drawer cannot
   be reached there and this block covers its whole reachable range.

   Scope. Only these five rules are repeated from the 992 block. That block
   is left alone, so the 993-1149 band keeps the desktop body layout it has
   today. Moving its own boundary instead would have applied all 68 of its
   rules early and repainted about 70% of the page in that band; verified by
   full-page pixel diff before choosing this shape.

   Cost. Between 1101 and 1149, `Install Streaming App` and `Enter Contest`
   leave the header. Both are in-page anchors (#streamsec, #slowartsec), so
   nothing becomes unreachable; the sections are still there to scroll to.
   This file is loaded by tv.html only. */
@media (max-width:1150px) {
  .navbar {
    display: none
  }

  .cta-link {
    display: none
  }

  .mobileMenu,
  .menuClose {
    display: flex;
    flex-direction: column;
    align-items: center
  }

  .menu-label {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #ff23a5
  }

  .menuConetnt {
    padding: 0 24px
  }
}