@media (max-width:1870px) {
  .overlay-video {
    display: none
  }

  .footer-columns {
    gap: 220px
  }
}

@media (max-width:1618px) {
  .overlay-video {
    display: none
  }

  .footer-columns {
    gap: 114px
  }

  .whatServerSection video {
    top: 37%;
    width: 287px;
    height: 163px
  }
}

@media (max-width:1440px) {
  .whatServerSection video {
    top: 40%;
    width: 281px;
    height: 158px
  }
}

@media (max-width:1400px) {
  .card:hover {
    transform: none
  }

  .section-3 {
    padding-left: 24px
  }

  .cardBox {
    width: 100%
  }

  .wellnessImgWrapper img {
    width: 700px;
    height: 100%
  }

  .excellenceCards {
    padding: 90px 80px
  }

  .section-4 .gradientBorderWrapper {
    margin: 40px 24px
  }

  .excellenceCardp p {
    max-width: 400px
  }

  .scienceSection {
    gap: 32px
  }

  .scienceImg video {
    width: 650px
  }

  .scienceContentCards1 {
    width: 100%
  }

  .card1,
  .card2,
  .card3,
  .card4 {
    height: auto;
    padding: 32px
  }

  .section-6 {
    margin-top: 200px
  }

  .expectationSection {
    gap: 20px;
    flex-wrap: nowrap
  }

  .expectationContent {
    margin-left: 24px;
    padding: 60px 10px 0 20px;
    max-width: 600px
  }

  .contentHeading {
    padding-bottom: 0
  }

  .contentHeading span {
    display: inline
  }

  .healthContent h3 {
    margin-top: 60px
  }

  .healthContentList {
    padding-top: 55px
  }

  .wellnessLayout {
    gap: 40px
  }

  .grid-wrapper {
    padding: 0 24px
  }

  .footer-section {
    margin: 24px
  }

  .streamBottom {
    padding: 0 50px
  }
}

@media (max-width:1360px) {
  .calmByCards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center
  }

  .whatServerSection video {
    width: 197px;
    height: 114px
  }
}

@media (max-width:1200px) {
  .streamBottom {
    padding: 0 10px
  }

  .videoText {
    margin: 0 20px
  }

  .cardBox {
    width: 100%
  }

  .wellnessTitle p {
    font-size: 24px
  }

  .wellnessP p {
    font-size: 20px
  }

  .section-3 {
    margin-top: 0
  }

  .section-2 {
    padding: 100px 0
  }

  .section-4 {
    margin-top: 128px
  }

  .excellenceCards {
    padding: 90px 40px
  }

  .excellenceCardp p {
    max-width: 500px
  }

  .excellenceCardTitle p {
    font-size: 32px
  }

  .scienceImg video {
    width: 450px
  }

  .scienceContent h1 {
    font-size: 30px
  }

  .scienceSection {
    display: flex;
    gap: 40px
  }

  .scienceContentpara p {
    max-width: 500px
  }

  .scienceContentCards1 {
    gap: 18px
  }

  .expectationSection {
    display: flex;
    flex-direction: column
  }

  .expectationContent {
    margin: 0 auto;
    padding: 64px 32px 0 64px;
    max-width: 768px
  }

  .healthContentList {
    padding-top: 32px
  }

  .healthContent h3 {
    font-size: 24px;
    line-height: 32px
  }

  .expectationSection .healthContentList li {
    padding-bottom: 32px
  }

  .expectationImgBorder {
    border-radius: 0 64px 64px 0;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: #fff0;
    margin-right: 24px;
    width: fit-content;
    max-height: unset
  }

  .expectationImgInner {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 64px;
    border-bottom-right-radius: 64px
  }

  .expectationImgInner img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 64px;
    border-bottom-right-radius: 64px
  }

  .wellnessImgWrapper {
    width: unset;
    height: unset;
    padding: 0;
    background: none
  }

  .contentHeading span {
    display: block
  }

  .section7 {
    margin-top: 200px
  }

  .location-item {
    padding: 8px;
    font-size: 16px
  }

  .location-nav {
    padding: 16px 20px
  }

  .footer-columns {
    gap: 60px
  }

  .footer-gradient {
    padding: 30px
  }

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

@media (max-width:992px) {
  .section-3 {
    padding: 0 0 0 24px;
    display: flex;
    flex-direction: column;
    min-height: 100vh
  }

  .wellnessLayout {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    gap: 40px;
    margin-top: 65px
  }

  .wellnessCards {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center
  }

  .cardBox {
    width: 100%
  }

  .wellnessImgWrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px
  }

  .excellenceWrap {
    overflow-x: auto;
    width: 100%;
    padding: 24px;
    scrollbar-width: none;
    -ms-overflow-style: none
  }

  .excellenceWrap::-webkit-scrollbar {
    display: none
  }

  .gradientBorderWrapper {
    display: flex;
    gap: 32px;
    width: max-content
  }

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

  .excellenceDots {
    display: flex
  }

  .excellenceHeading p {
    margin-bottom: 40px
  }

  .slowdownMessage {
    padding: 48px 24px 0
  }

  .scienceContentTitle h1 {
    padding: 0 24px;
    font-size: 28px
  }

  .scienceImg {
    padding: 0 24px
  }

  .section-5 {
    margin-top: 241px
  }

  .section-5 .suervaybutton {
    display: flex;
    justify-content: center;
    margin-top: 58px
  }

  .scienceDesc {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
  }

  .scienceSection {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    overflow: hidden
  }

  .scienceContent {
    width: 100%;
    overflow: auto
  }

  .scienceImgBorder {
    border: none;
    background: none;
    border-radius: 0;
    width: 100%;
    height: unset
  }

  .scienceImg {
    border-radius: 24px
  }

  .scienceImg video {
    width: 100%;
    height: 300px;
    border-radius: 24px
  }

  .scienceContent span {
    display: inline
  }

  .scienceContent h1 {
    font-size: 40px
  }

  .scienceScrollWrap {
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-left: 16px;
    padding-right: 16px
  }

  .scienceScrollWrap::-webkit-scrollbar {
    display: none
  }

  .scienceContentCards1 {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    margin-bottom: 43px
  }

  .scienceCardWrapper {
    flex: 0 0 90%;
    max-width: 240px;
    scroll-snap-align: start
  }

  .section7 {
    margin-top: 100px
  }

  .feature-card p {
    font-size: 22px
  }

  .feature-card {
    padding: 32px 24px
  }

  .featureCards {
    overflow-x: auto;
    width: 100%
  }

  .features-scroll-wrapper {
    overflow-x: auto;
    width: 100%;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-left: 16px;
    padding-right: 16px
  }

  .features-scroll-wrapper::-webkit-scrollbar {
    display: none
  }

  .features-grid {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
    padding-bottom: 16px;
    width: max-content;
    margin: 0 24px
  }

  .feature-border {
    flex: 0 0 90%;
    max-width: 304px;
    scroll-snap-align: end
  }

  .partner-host-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;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 1%;
    text-align: center;
    text-transform: capitalize;
    text-align: start;
    margin-top: 0
  }

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

  .column.left {
    padding: 48px 20px 40px 40px
  }

  .column.right {
    padding: 48px 40px 40px 20px
  }

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

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

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

  .healthContentList li {
    padding-bottom: 16px
  }

  .surveyBtn {
    margin-top: 40px
  }

  .column .surveyBtn {
    margin-bottom: 5px
  }

  .footer-section {
    padding: 80px 0
  }

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

  .app-buttons {
    display: flex;
    flex-direction: row
  }

  .section-7 {
    margin-top: 200px
  }

  .plug-play-section .excellenceDots {
    margin-top: 45px
  }
}

@media (max-width:768px) {
  .streamBottom {
    padding: 0 24px
  }

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

  .quiz-card-wrapper {
    border-radius: 32px
  }

  .quiz-card-content {
    padding: 16px;
    border-radius: 32px;
    gap: 8px
  }

  .left-side-text {
    font-size: 20px;
    text-align: left
  }

  .right-side-circle {
    width: 120px;
    height: 120px
  }

  .whatServerSection video {
    left: 53%
  }

  .expectationContent {
    margin: 0 24px;
    padding: 64px 32px 0 64px;
    max-width: 768px
  }

  .section-1,
  .bgImg {
    position: relative;
    height: 100%
  }

  .bgImg {
    height: 100vh;
    min-height: max-content
  }

  .topShadowImage {
    height: 300px
  }

  .bottomShadowImage {
    height: 393px
  }

  .artOfSlow p {
    font-size: 21px;
    line-height: 28px
  }

  .artOfSlow .transformationText {
    padding-top: 12px;
    font-size: 16px;
    line-height: 24px
  }

  .menuConetnt .getintouch {
    margin: 15px 0
  }

  .follow {
    margin-bottom: 28px
  }

  .install {
    padding-bottom: 0
  }

  .btnPrimary,
  .btnSecondary {
    padding: 10px 16px;
    font-size: 17px
  }

  .menu-icon {
    display: flex;
    align-items: center
  }

  .menu-icon {
    display: flex;
    flex-direction: column;
    gap: 5px
  }

  .artOfSlowGradientWrapper {
    left: 0;
    bottom: 0
  }

  .navbar {
    display: none
  }

  .section-2 {
    padding: 118px 24px 168px
  }

  .ctaButtonGroup {
    display: flex;
    flex-direction: column;
    align-items: self-start
  }

  .streamBottom {
    align-items: center
  }

  .slowArtIntro {
    font-size: 28px;
    max-width: 600px;
    line-height: 40px
  }

  .artOfSlow {
    padding: 19px
  }

  .info-card {
    flex-direction: column
  }

  .expectationImg img {
    width: 100%
  }

  .contentHeading {
    font-size: 28px
  }

  .healthContent {
    font-size: 24px
  }

  .scienceDesc {
    text-align: start
  }

  .calmByCards {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    border-radius: 48px
  }

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

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

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

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

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

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

  .scienceContentpara p:first-child {
    margin-top: 20px
  }

  .scienceCardsWrapper {
    margin-top: 79px
  }

  .section-5 .suervaybutton {
    margin-top: 40px
  }

  .section-6 {
    margin-top: 347px
  }

  .title {
    font-size: 28px;
    line-height: 40px;
    width: auto
  }

  .calmByP {
    font-size: 24px;
    line-height: 32px;
    padding-top: 29px
  }

  .calmByCards {
    margin: 59px auto 80px
  }

  .card1P {
    font-size: 20px;
    line-height: 32px
  }

  .curate p {
    font-size: 24px;
    line-height: 40px
  }

  .stillness {
    width: 285px;
    margin: 80px auto 248px
  }

  .expectationImgBorder {
    border-radius: 0 24px 24px 0
  }

  .expectationImgInner {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px
  }

  .expectationImgInner img {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px
  }

  .expectationContent {
    padding: 24px;
    border-radius: 32px;
    text-align: left !important;
    margin-bottom: 74px
  }

  .expectationContent::before {
    border-radius: 32px
  }

  .expectationContent .contentHeading {
    text-align: left !important
  }

  .expectationContent .healthContent h3 {
    margin-top: 40px;
    padding: 0
  }

  .healthContentList {
    margin-bottom: 0
  }

  .healthContentList li:last-child {
    padding-bottom: 0
  }

  .expectationImg img {
    height: 656px
  }

  .plug-play-section .title {
    font-weight: 500;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: 1%;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 36px
  }

  .features-grid {
    padding-bottom: 0
  }

  .plug-play-section .excellenceDots {
    margin-bottom: 65px
  }

  .slow-section .line {
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 1%;
    text-align: center;
    text-transform: capitalize
  }

  .slow-section {
    min-height: auto
  }

  .partner-host-section {
    overflow: hidden
  }

  .gradient-border.left {
    transform: translateX(24px)
  }

  .gradient-border.right {
    transform: translateX(-24px)
  }

  .footer-heading {
    text-align: left
  }

  .videoP {
    display: none
  }

  .scienceContent .surveyBtn {
    margin-top: 0
  }

  .calmBy .title {
    padding: 0 24px
  }

  .card4 .curate svg {
    width: 30px;
    min-width: 30px
  }

  .location-nav-wrapper {
    overflow-x: auto;
    width: 100%;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-left: 24px;
    padding-right: 24px
  }

  .location-nav {
    width: fit-content
  }

  .whatserve-text {
    width: 100%;
    padding: 0 24px
  }
}

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

  .whatServerSection video {
    left: 52%
  }

}

@media (max-width:480px) {
  .artOfSlowGradientWrapper {
    left: 0;
    bottom: 50px
  }

  .expectationContent {
    width: fit-content
  }

  .getInTouch {
    padding: 0 6px
  }

  .card1,
  .card2,
  .card3,
  .card4 {
    width: 255px
  }

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

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

  .wellnessCards {
    width: 100%;
    padding: 0 24px 0 0
  }

  .gradientBorderWrapper {
    width: 100%
  }

  .slowArtIntro {
    font-size: 24px;
    max-width: 360px;
    line-height: 40px
  }

  .surveyPrompt {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 1%;
    text-align: center;
    max-width: 305px
  }

  .wellnessHeading p {
    font-size: 28px
  }

  .excellenceHeading p {
    font-size: 28px;
    width: 341px;
    margin-bottom: 0
  }

  .excellenceCards {
    padding: 32px 32px
  }

  .scienceImg video {
    height: 194px
  }

  .section-4 .gradientBorderWrapper {
    margin: 40px 0 0 0
  }

  .excellenceWrap {
    padding: 0 24px 32px
  }

  .slowdownMessage {
    font-size: 24px
  }

  .calmByCards {
    padding: 24px
  }

  .bgImageOnly {
    background-position: bottom
  }

  .bgImageOnly video {
    width: 253px;
    height: 142px;
    margin-bottom: 300px;
    border: 1px solid #0c0800;
    box-shadow: 0 5px 10px 0 #0003
  }

  .scienceContentTitle.only-mobile h1 {
    text-align: center
  }

  .scienceContentpara p {
    padding: 0 24px
  }

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

@media (max-width:320px) {
  .artOfSlowGradientWrapper {
    margin: 0
  }

  .header {
    display: flex;
    flex-direction: column
  }

  .bgImg video {
    width: 110%
  }

  .artOfSlowGradientWrapper {
    margin: 10px
  }

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

@media (max-width:768px) {
  .only-desktop {
    display: none
  }

  .only-mobile {
    display: block
  }
}

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

  .only-mobile {
    display: none
  }
}

@media (min-width:1242) {
  .expectationSection {
    justify-content: flex-start;
    padding: 0 0 0 83px
  }

  .expectationImg {
    flex: 1
  }
}

@media (min-width:1200) {
  .expectationImg img {
    max-height: max-content
  }
}