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

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

@media (max-width:1075px) {
  .overflow-x-hidden {
    overflow-x: hidden
  }
}

@media (max-width:1440px) {
  .StreamTop .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px
  }

  .email-input {
    width: 100%
  }

  .only-desktop img {
    width: 944px
  }

  .book-img {
    top: -120px;
    right: 0
  }
}

@media (max-width:1363px) {
  .book-img {
    position: absolute;
    right: -25px;
    top: -182px
  }

  .only-desktop img {
    max-width: 980px
  }

  .footer-container {
    padding: 0 24px
  }

  .book-section {
    overflow: hidden
  }
}

@media (max-width:1200px) {
  .book-desc {
    width: 365px
  }

  .book-img {
    position: absolute;
    right: -22px;
    top: -50px
  }

  .only-desktop img {
    max-width: 850px
  }

  .email-input {
    width: 100%
  }

  .visionary-container {
    padding: 0 24px
  }

  .featured-row {
    gap: 35px
  }
}

@media (max-width:880px) {
  .content {
    display: unset
  }

  .text-start {
    text-align: start
  }

  .gradient-border {
    width: auto
  }

  .gradient-border input {
    width: 100%
  }
}

@media (max-width:767px) {
  .container {
    padding: 0 16px
  }

  .logoMenu img {
    padding-left: 2px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .only-desktop img {
    max-width: 100%
  }

  .StreamBottom {
    top: 100px;
    bottom: 16px
  }

  .StreamBottom .container {
    width: fit-content;
    padding: 0 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end
  }

  .hide-on-mobile {
    display: none !important
  }

  .show-on-mobile {
    display: block !important
  }

  .streaming-content {
    display: flex;
    gap: 10px;
    justify-content: space-between
  }

  .streaming-content div {
    height: fit-content
  }

  .flex-col-mobile {
    flex-direction: column
  }

  .streaming-intro .wrap-flex {
    justify-content: start;
    align-items: start;
    gap: 8px
  }

  .streaming-intro .wrap-flex img {
    width: 60px;
    height: 60px
  }

  .streaming-intro .wrap-flex h3 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: math-auto
  }

  .streaming-intro .wrap-flex h3 span {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1%;
    text-transform: capitalize;
    margin-bottom: 8px
  }

  .streaming-intro-wrapper .streaming-heading {
    font-weight: 500;
    font-size: 21px;
    line-height: 28px;
    letter-spacing: 1%;
    text-transform: capitalize
  }

  .streaming-intro-wrapper .streaming-heading span {
    font-weight: 500;
    font-size: 21px;
    line-height: 28px;
    letter-spacing: 1%;
    text-transform: capitalize
  }

  .streaming-intro-wrapper .streaming-content .streaming-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    padding-top: 12px;
    max-width: 212px
  }

  .streaming-intro-wrapper:not(.profile-intro) .streaming-intro {
    padding: 16px
  }

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

  .streaming-intro-wrapper.profile-intro .streaming-intro {
    padding: 10px !important;
    border-radius: 24px
  }

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

  .streaming-intro-wrapper .streaming-content .discover-wrapper {
    flex-direction: column;
    justify-content: start;
    align-items: flex-start
  }

  .streaming-intro-wrapper .streaming-content .discover-wrapper a {
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    text-transform: capitalize;
    padding: 4px 16px
  }

  .streaming-intro-wrapper .streaming-intro .discover-wrapper {
    gap: 10px
  }

  .text-nowrap {
    text-wrap-mode: nowrap;
    font-size: 18px
  }
}

@media (min-width:767px) and (max-width:992px) {
  .container {
    padding: 0 16px
  }

  .StreamBottom {
    top: unset;
    bottom: 16px
  }

  .logoMenu img {
    padding-left: 2px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .StreamBottom .container {
    width: fit-content;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start
  }

  .hide-on-mobile {
    display: none !important
  }

  .show-on-mobile {
    display: block !important
  }

  .streaming-content {
    display: flex;
    gap: 20px
  }

  .streaming-content div {
    height: fit-content
  }

  .profile-intro {
    margin-top: auto
  }

  .streaming-intro-wrapper .streaming-intro {
    width: fit-content
  }

  .streaming-intro .wrap-flex {
    justify-content: start;
    align-items: start;
    gap: 8px
  }

  .streaming-intro .wrap-flex img {
    width: 80px;
    height: 80px
  }

  .streaming-intro .wrap-flex h3 {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: math-auto
  }

  .streaming-intro .wrap-flex h3 span {
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-bottom: 8px
  }

  .streaming-intro-wrapper .streaming-heading {
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 1%;
    text-transform: capitalize
  }

  .streaming-intro-wrapper .streaming-heading span {
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 1px;
    text-transform: capitalize
  }

  .streaming-intro-wrapper .streaming-content .streaming-description {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    padding-top: 12px;
    max-width: 212px
  }

  .streaming-intro-wrapper:not(.profile-intro) .streaming-intro {
    padding: 16px
  }

  .streaming-intro-wrapper .streaming-content .discover-wrapper {
    flex-direction: column;
    justify-content: start;
    align-items: flex-start
  }

  .streaming-intro-wrapper .streaming-content .discover-wrapper a {
    font-weight: 500;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    text-transform: capitalize;
    padding: 4px 16px
  }

  .streaming-intro-wrapper .streaming-intro .discover-wrapper {
    gap: 10px
  }

  .StreamBottom .coming-soonContent .subTitle {
    margin-left: auto
  }
}

@media (min-width:992px) and (max-width:1024px) {
  .StreamBottom .steram-wrapper {
    gap: 15px
  }

  .StreamBottom .streaming-intro {
    padding: 20px
  }
}

@media (max-width:1024px) {
  .footer-columns {
    gap: 60px
  }

  .footer-gradient {
    padding: 30px
  }

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

  .only-desktop img {
    max-width: 794px
  }
}

@media (max-width:992px) {
  .container {
    padding: 0 20px;
    max-width: 100%
  }

  .streaming-intro {
    width: 100%;
    padding: 24px
  }

  .navbar {
    display: none
  }

  .mobileMenu {
    display: flex
  }

  .transformation-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
  }

  .visionary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
  }

  .featured-row,
  .featured-row-2 {
    flex-wrap: wrap;
    gap: 28px
  }

  .featured-section {
    margin: 247px auto 254px auto
  }

  .watch-img {
    width: 100%
  }

  .only-desktop img {
    max-width: 684px
  }

  .streaming-intro {
    width: 100%;
    padding: 24px
  }

  .navbar {
    display: none
  }

  .mobileMenu {
    display: flex
  }

  .transformation-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
  }

  .visionary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
  }

  .featured-row,
  .featured-row-2 {
    flex-wrap: wrap;
    gap: 60px
  }

  .book-card {
    flex-direction: column;
    align-items: center;
    gap: 65px
  }

  .book-img {
    top: 50%;
    transform: translateY(-50%);
    right: 0
  }

  .book-card-left,
  .book-card-right {
    padding: 48px 32px;
    text-align: start
  }

  .book-card-left {
    margin-left: 50px
  }

  .book-title {
    font-size: 28px;
    font-weight: 500
  }

  .book-desc {
    width: auto
  }

  .book-card-right {
    position: relative
  }

  .email-input {
    width: 100%
  }

  .only-desktop {
    display: none
  }

  .only-mobile {
    display: block
  }

  .book-card-left {
    width: 100%
  }

  .book-card-right {
    margin: 0 24px 0 -24px;
    width: 100%;
    align-items: center;
    text-align: center;
    min-height: 542px
  }

  .book-image {
    max-width: 260px
  }
}

@media (max-width:768px) {
  .bottom-text {
    display: none
  }

  .banner-image {
    position: relative;
    height: 100vh
  }

  .StreamTop video {
    object-position: 51% 90%;
    object-fit: none;
    width: 100%;
    height: 100%
  }

  .container {
    padding: 0 24px
  }

  .banner-image {
    position: relative;
    height: 100vh
  }

  .gradient-border input {
    width: 100%
  }

  .gradient-border {
    width: auto
  }

  .contentright p {
    width: auto
  }

  .text-start {
    text-align: start;
    font-size: 32px
  }

  .font-32 {
    font-size: 32px
  }

  .content {
    display: unset
  }

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

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

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

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

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

  .store-buttons {
    margin-bottom: 0
  }

  .install,
  .follow {
    margin-top: 0;
    margin-bottom: 10px
  }


  .menuConetnt {
    padding: 0 24px
  }

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

  .app-buttons {
    flex-direction: row;
    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
  }

  .follow-us a:last-child {
    display: none
  }

  .popup-content {
    gap: 15px
  }

  .popup-close {
    font-size: 24px
  }

  .popup-content iframe {
    min-height: 280px
  }

  .watch-wrapper {
    margin-top: 187px
  }

  .watch-img {
    margin-top: 35px
  }

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

  .transformation-grid {
    margin: 60px 0 104px 0
  }
}

@media (max-width:600px) {
  .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
  }

  .container {
    padding: 0 24px
  }

  .p-0 {
    padding: 0
  }

  .transformation-title {
    font-size: 28px;
    margin-bottom: 38px
  }

  .transformation-grid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .transformation-card {
    padding: 32px
  }

  .visionary-grid {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .featured-logos {
    grid-template-columns: 1fr;
    gap: 18px 0
  }

  .featured-row,
  .featured-row-2 {
    gap: 60px
  }

  .featured-row img {
    flex: 0 0 calc(50% - 16px);
    max-width: calc(50% - 50px)
  }

  .featured-row-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    justify-items: center
  }

  .featured-row-1 img {
    max-width: 120px
  }

  .featured-row-1 img:nth-child(1) {
    grid-column: span 2;
    max-width: 160px
  }

  .featured-row-2 img:last-child {
    max-width: calc(50% - 119px)
  }

  .featured-row-2 img:nth-child(3) {
    max-width: calc(100% - 165px)
  }

  .featured-row-3 img:nth-child(1) {
    max-width: calc(50% - 16px)
  }

  .featured-row-3 img:nth-child(2) {
    max-width: calc(50% - 96px)
  }

  .featured-row-3 img:nth-child(3),
  .featured-row-3 img:nth-child(4) {
    max-width: calc(50% - 105px)
  }

  .button-wrapper {
    display: none
  }

  .visionary-card .discover-button {
    margin-top: 45px
  }

  .contentright p {
    font-size: 16px;
    font-weight: 400
  }

  .line1,
  .line2 {
    display: block
  }

  .watch-content {
    padding: 0
  }
}

@media (min-width:1075px) {
  .swiper-pagination {
    display: none
  }
}

@media (min-width:993px) {
  .only-desktop {
    display: block
  }

  .only-mobile {
    display: none
  }
}

@media (min-width:768px) {
  .show-on-mobile {
    display: none
  }
}

@media (min-width:600px) {
  .book-container {
    padding: 0 24px
  }
}

@media (max-width:380px) {
  .coming-soonContent {
    gap: 6px;
    padding: 0 4px 0 4px;
    font-size: 14px;
    height: 46px
  }
}

@media (max-width:400px) {
  .StreamTop video {
    object-position: 53% 84%
  }

  .StreamTop {
    height: auto;
    min-height: max(715px, 100vh)
  }

  .StreamBottom {
    min-height: 595px
  }

  .streaming-intro-wrapper {
    bottom: 50px
  }

  .discover-button,
  .follow-button {
    text-wrap: nowrap
  }

  .streaming-intro-wrapper .streaming-content .discover-wrapper a {
    font-size: 14px;
    padding: 4px 10px
  }

  .modal-content {
    padding: 15px;
    border-radius: 8px
  }
}

@media (max-width:350px) {
  .StreamTop video {
    object-position: 52% 83%
  }

  .StreamTop {
    height: auto;
    min-height: max(760px, 100vh)
  }

  .StreamBottom {
    min-height: 610px
  }

  .discover-button,
  .follow-button {
    text-wrap: nowrap
  }

  .streaming-intro-wrapper .streaming-content .discover-wrapper a {
    font-size: 12px;
    padding: 4px 10px
  }
}

@media (max-width:500px) {
  .StreamBottom .container {
    width: 100%;
    padding: 0 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
  }

  #bookSection {
    width: 100vw;
    overflow: hidden
  }

  .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
  }
}