* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      min-height: 100vh;
      background: #29333F;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .wrapper {
      text-align: center;
    }

    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    .tv-text {
      font-size: 125px;
      font-weight: 700;
      color: #0a1016;
      letter-spacing: 2px;
      animation: slideFromLeft 1.2s ease-out forwards;
    }

    .ring {
      position: relative;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: conic-gradient(
        #29d3ff,
        #5f6cff,
        #b44cff,
        #ff4fd8,
        #ff6a4f,
        #ffb84f,
        #29d3ff
      );
      display: flex;
      align-items: center;
      justify-content: center;
      animation: slideFromRight 1.2s ease-out forwards;
    }

    .ring::before {
      content: "";
      position: absolute;
      width: 78px;
      height: 78px;
      background: #2b3643;
      border-radius: 50%;
    }

    .play {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 18px solid white;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      margin-left: 4px;
      z-index: 2;
    }

    .tagline {
      margin-top: 28px;
      font-size: 20px;
      color: #d7dde5;
      letter-spacing: 0.5px;
      opacity: 0;
      animation: slideFromBottom 1s ease-out forwards;
      animation-delay: 1s;
    }

    /* Animations */
    @keyframes slideFromLeft {
      from {
        transform: translateX(-200px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideFromRight {
      from {
        transform: translateX(200px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideFromBottom {
      from {
        transform: translateY(60px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @media (min-width: 1050px) {
      .tv-text {
        font-size: 200px;
      }

      .ring {
        width: 120px;
        height: 120px;
      }

      .ring::before {
        width: 64px;
        height: 64px;
      }
    }




    /* ===================================
    ==========  unlock premium ===========
    ====================================== */

    .page {
      display: flex;
      width: 100%;
      height: 100%;
    }

    /* Left Section */
    .left {
      flex: 1;
      padding: 60px 80px;
      color: #e5ebf1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .lock {
      width: 170px;
      height: 170px;
      /* margin-bottom: 30px; */
    }

    .title {
      font-size: 60px;
      font-weight: 500;
      margin-bottom: 10px;
    }

    .subtitle {
      font-size: 20px;
      color: #c7d0da;
      margin-bottom: 20px;
    }

    ul {
      list-style: none;
      padding-left: 0;
      margin-left: 20px;
    }

    ul li {
      margin-bottom: 10px;
      font-size: 20px;
      color: #d7dde5;
      position: relative;
      padding-left: 16px;
    }

    ul li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: #d7dde5;
    }

    /* Right Section */
    .right {
      width: 35%;
      height: 100vh;
      background: linear-gradient(to bottom, #2f3b48, #232d37);
            box-shadow: inset 2px 0px 10px rgb(80, 80, 80);
      display: flex;
      justify-content: end;
      align-items: center;
    }
    .btn-div{
        width: 80%;
    }
    .btn-next {
      width: 100%;
      text-align: left;
      padding: 12px 10px;
      background-color: #29333F;
      color: #fff;
      border: none;
      border-radius: 6px 0px 0px 6px;
      font-size: 16px;
      cursor: pointer;
      margin-bottom: 18px;
    }
    .btn-next:hover{
        background: #099CDF;
        color: #c7d0da;
    }
    .cancel {
      color: #c7d0da;
      background: #29333F;
      width: 100%;
      text-align: left;
      padding: 12px 10px;
      border: none;
      border-radius: 6px 0px 0px 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .cancel:hover{
        background-color: #099CDF;
        color: #fff;
    }

    @media (max-width: 900px) {
      .page {
        flex-direction: column;
      }

      .right {
        width: 100%;
        padding: 40px 0;
      }
    }

    /* Add-Playlist page */

    .side-menu{
      width: 30%;
      height: 100vh;
      background: #099CDF;
      padding: 0px;
      margin: 0px;
      padding-top: 20px;
      position: fixed;
      right: 100%;
      z-index: 2;
    }
    .menu-list{
      list-style:none;
      /* padding: 20px 5px; */
      padding: 0px;
      margin: 0px;
    }
    .menu-list-item{
      margin: 0px;
      padding: 20px;
      text-transform: capitalize;
      /* background: #0a1016; */
    }
      .menu-list .menu-list-item::before {
      content: "";
    }
    .menu-list-link{
      color: #fff;
      text-decoration: none;
      font-size: 20px;
    }

    .menu-list-item:hover{
     background: #0a1016;
    }