@media screen and (min-width:1000px) {
     :root {
          --primary-font: Inter;
          --primary-black-color:#000000;
          --primary-white-color: #FFF;
      }

     .header {
          height: 1000px;
          background-position: 50% 64%; 
          background-size: cover; 
     }

     #logo {
          height: 50px;
     }

     

     .hamburger-menu {
          display: none;
     }

     .mobile-nav {
          /* background-color: coral; */

          width: 100%;

          display: flex;
          justify-content: center;
          align-items: center;

          padding-inline: 30px;
     }

     .mobile-nav a {
          /* background-color:darkgreen; */
          color: rgb(255, 255, 255);
          font-size: 15px;
          font-family: var(--primary-font);
          font-weight: 600;
          line-height: 25.50px;
          
          margin-inline: 10px;

          text-decoration: none;
          /* color: inherit !important; */
          transition: all .3s ease;
          /* display: inline-block; */
          position: relative;
     }

     .mobile-nav a:hover {
          color: #eddeff;
          font-size: 16px;
     }

     .mobile-nav a:after{
          content: '';
          width: 0;
          height: 1px;
          position: absolute;
          left: auto;
          right: 0;
          bottom: -3px;
          transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
          background: currentColor;
     }

     .mobile-nav a:hover:after{
          width:100%;
          left:0;
          right:auto;
     }

     .mobile-nav a:hover{color:#eddeff !important;}

     .mobile-nav-left {
          /* background-color: darkslateblue; */
          width: 50%;
     }

     .mobile-nav-right {
          /* background-color: yellow; */
          width: 50%;
          text-align: end;
     }

     

     .main-title {
          position: absolute;
          top: 850px;
          background: #1E0E4C; 

          gap: 50px;

          height: 200px;
     }

     .frame-main-title {
          gap: 45px;
     }

     .title h1 {
          width: auto;
          font-size: 60px;
     }

     .price-box {
          /* background-color: antiquewhite; */
          
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: center;
     }

     .best-value {
          top: -15px;
     }

     .best-value p {
          width: 90px;
          height: 25px;

          font-size: 15px;
          line-height: 25px;
     }

     .text-box1 {
          width: 425px;
          height: 60px;
     }

     .text-box2 {
          width: 425px;
          height: 60px;
     }

     .free-trial-notes p {
          /* background-color: brown; */
          text-align: center;
          width: 700px;

          font-size: 12px;
          line-height: 18px;
     }

     .features-box {
          /* background-color: brown; */
          width: 90%;
          padding-top: 90px;
     }

     .columns p {
          width: 100%;
          font-size: 23px;
     }

     .columns {
          font-size: 26px;
          gap: 8%;
     }

     .downloads, .stars, .ratings, .appstores {
          width: 200px;
          text-align: center;
          line-height: 30px;
     }

     .icon-star i {
          margin-bottom: 5px;
          font-size: 25px;
          margin-top: -5px;
     }

     .left-column {
          /* background-color: aquamarine; */
          width: 50%;

          flex-direction: row;
          justify-content: center;
          align-items: center;
          display: inline-flex;
          gap: 25%;
     }

     .right-column {
          /* background-color: orchid; */
          width: 50%;

          flex-direction: row;
          justify-content: center;
          align-items: center;
          display: inline-flex;

          gap: 25%;
     }

     .title3 h2 {
          font-size: 250%;
     }

     .title4 {
          gap: 10px;
     }

     .function-box {
          padding-top: 120px;
          padding-bottom: 60px;

          gap: 50px;
     }

     .seperate-function-box{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
     }
     
     .seperate-function-box p {
          font-size: 15px;
          line-height: 23px;
     }

     .seperate-function-box h3{
          text-align: center;
     }

     #line-learn-more {
          width: 80px; 

      }
        
     .chill-out{
          /* background-color: brown; */
          flex-direction: column;
      
     }
     
     .text-chill-out{
           width: 70%;
           font-size: 22px;
           gap: 20px;
     }
     
     .img-wrapper {
          width: 350px; 
          height: 350px; 
     }
     
     .snooze-better{
          flex-direction: column;
          position: relative;
          display: none;
     }
      
     .hightpx{
          display: flex;
     }
      
     .text-snooze-better, .text-mindful-living {
          font-size: 22px;
          text-align: left;
          gap: 20px;

          width: 70%;
      
          /* position: absolute;
          bottom: -165px; */     
     }

     .crack-line-snooze{
          width: 100%;
      
          display: flex;
          justify-content: flex-start;
     }
      
     .mindful-living{
          flex-direction: column;
          /* gap: 10px; */
     }      

     .tools-box {
          gap: 40px;
     }

     .title4 h2 {
          font-size: 250%;
     }     

     .title4 p {
          width: 57%;
          font-size: 15px;
          
          line-height: 23px;
     }

     .topic {
          top: -20px;
     }

     .frame-topic {
          /* background-color: #4ab2c0; */
          width: 80%;

          display: flex;
          justify-content: center;
          align-items: center;

          gap: 25px;
     }

     .name-topic {
          font-size: 15px;
          padding: 15px;
          border-radius: 10px;
     }

     /* .name-topic:hover {
          background-color: #F99417;
          scale: 120%;
          font-size: 18px;
          font-weight: 700;
      } */



     .playlist-frame {
          height: 430px;
          width: 900px;

          display: flex;
          align-items: flex-end;
     }

     .playlist-content {
          display: none;
     }

     .playlist-hightpx {
          /* background-color: darkgoldenrod; */
          width: 1000px;

          display: flex;
          flex-direction: row;
          gap: 80px;
     }
     
     .playlist-right {
          /* background-color: aquamarine; */
          width: 400px;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          gap: 40px;
     }

     .title-playlist{
          font-size: 18px;

          line-height: 15px;
      }

     .play {
          scale: 110%;
     }

     .playlist-text p {
          width: 100%;

          font-size: 13px;
          line-height: 20px;
     }

     .playlist-hightpx img {
          width: 300px;
          height: 380px;

          box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
          border-bottom-left-radius: 60px;
          border-top-right-radius: 60px;
     }

     .title5 h2 {
          font-size: 230%;
     }

     .logo-business {
          padding-top: 100px;
          padding-bottom: 100px;

          gap: 50px;
     }

     .logo-img-wrapper img {
          width: 150px;
      }

      #Slide {
          /* background-color: #FFD233; */
          width: 90%;
     }

     .frame-slide {
          position: relative;
      }

      

     .blog-box {
          display: none;
      }

     .blog-box-hightpx {
          background-color:#EEEEEE;
          width: 100%;
          height: auto;

          display: flex;
          justify-content: center;
          align-items: center;

          padding-top: 60px;
          padding-bottom: 60px;
      }

     .blog-container {
          /* background-color: brown; */
          width: 75%;
          height: auto;

          /* padding: 20px;
          margin: 20px; */
          gap: 60px;
          
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: row;
     }

      .title7-hightpx {
          /* background-color: #4621B2; */
          width: 40%;
          height: auto;
      
          display: flex;
          flex-direction: column;
          justify-content: center; 
          align-items: flex-start; 
          
          gap: 20px;
      }
      
     .title7-hightpx h2 {
          /* background-color: #F99417; */
          width: 100%; 
          
          color: var(--primary-black-color); 
          font-size: 230%; 
          font-family: var(--primary-font); 
          font-weight: 700; 
          line-height: 40px;
      }

     .feature-blog-box-hightpx {
          width: 60%;
          height: auto; 

          display: flex;
          flex-direction: row; 
          justify-content: center; 
          align-items: flex-start; 

          gap: 25px;
     }

     /* .CTA-blog {
          background: var(--primary-black-color); 
          width: 100px; 
          height: 25px; 
          
          padding-left: 24px; 
          padding-right: 24px; 
          padding-top: 12px; 
          padding-bottom: 12px; 
      
          margin-bottom: 40px;
           
          display: inline-flex;
          justify-content: center; 
          align-items: center; 
      
          border-radius: 5px; 
          
          cursor: pointer;
      }
      
     .CTA-blog p {
          font-size: 15px; 
          font-family: var(--primary-font); 
          font-weight: 500; 
          line-height: 16.80px;
      }

     .CTA-blog:hover{
          color: rgb(0, 0, 0);
          background-color: transparent !important;
          transition: 0.5s ease;
      } */
     
      .blog-left, .blog-right {
          /* background-color:darkgreen; */
          width: 100%;
          height: auto;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;          

          gap: 15px;
      }

      .blog {
          color: yellow;
          width: 85%;
          height: 200px;
      
          position: relative;
      
          border-radius: 20px;
          box-shadow: 7px 10px 8px 0px rgba(41, 41, 41, 0.25);
          overflow: hidden;
      }

     .blog:hover {
          scale: 105%;
          transition: 0.3s ease; 
     }

     #blog-1, #blog-4, #blog-5, #blog-6, #blog-7 {
          width: 100%;
          height: 160px;
     }
      #blog-2 {
          width: 100%;
          height: 280px;
      }

      #blog-3 {
          width: 100%;
          height: 455px;
      }

     .frame-QA-box {
          /* background-color: chocolate; */

          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: flex-start;
          width: 85%;

          margin-top: 20px;
          margin-bottom: 20px;
     }

     .title8 {
          width: 48%;
     }

     .title8 h2 {
          font-size: 230%;
     }     

     .column-QA-box {
          width: 60%;
     }

     .general-box h3, .meditation-box h3, .stress-box h3, .sleep-box h3 {
          font-size: 130%;
     }

     .general-box p, .meditation-box p, .stress-box p, .sleep-box p {
          font-size: 14px;
     }

     .text-QA-box {
          font-size: 115%;
     }

     .footer {
          flex-direction: column;
          align-items: center;
          padding-bottom: 0px;
     }

     .main-footer {
          /* background-color: blueviolet; */
          flex-direction: row;
          gap: 5%;
     }

     .copyright-hightpx {
          /* background-color: aqua; */
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%; 
          height: 80px;
          
          padding-top: 30px;
          text-align: center; 
          
          color: white; 
          font-size: 12px; 
          font-family: var(--primary-font); 
          font-weight: 400; 
          letter-spacing: 2px;
     }

     .logo-footer {
          width: auto;
          height: 60px;
     }

     .about-us {
          width: 15%;
     }

     .get-some-blissify {
          width: 20%;
     }

     .support {
          width: 25%;
     }

     .socialicon{
          width: 15%;
          display: flex;
          justify-content: flex-end; 
          align-items: flex-start;
     }

     .copyright{
          display: none;
     }

     /* .mobile-nav-wrapper{
    display: none;
     } */
}

@media screen and (max-width:1000px) {
     .mobile-nav{
       display: none;
     }
      .hightpx{
       display: none;
     }
     /* .playlist-hightpx{
       display: none;
     } */
     /* .mobile-nav-wrapper{
       display: none;
     } */
   }

@media screen and (max-width: 429px) {
     .playlist-content img {
       width: 300px;
       height: 200px;
   
       border-radius: 10px;
     }
     /* .mobile-nav-wrapper{
       display: none;
     } */
   }