@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

      .header-2-3 .modal-backdrop.show {
        background-color: #707092;
        opacity: 0.6;
      }

      .header-2-3 .modal-item.modal {
        top: 2rem;
      }

      .header-2-3 .navbar,
      .header-2-3 .hero {
        padding: 3rem 2rem;
      }

      .header-2-3 .navbar-dark .navbar-nav .nav-link {
        font: 300 18px/1.5rem Poppins, sans-serif;
        color: #707092;
        transition: 0.3s;
      }

      .header-2-3 .navbar-dark .navbar-nav .nav-link:hover {
        font: 600 18px/1.5rem Poppins, sans-serif;
        color: #E7E7E8;
        transition: 0.3s;
      }

      .header-2-3 .navbar-dark .navbar-nav .active>.nav-link,
      .header-2-3 .navbar-dark .navbar-nav .nav-link.active,
      .header-2-3 .navbar-dark .navbar-nav .nav-link.show,
      .header-2-3 .navbar-dark .navbar-nav .show>.nav-link {
        font-weight: 600;
        transition: 0.3s;
      }

      .header-2-3 .navbar-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      }

      .header-2-3 .btn:focus,
      .header-2-3 .btn:active {
        outline: none !important;
      }

      .header-2-3 .btn-fill {
        font: 600 18px / normal Poppins, sans-serif;
        background-color: #524EEE;
        border-radius: 12px;
        padding: 12px 32px;
        transition: 0.3s;
      }

      .header-2-3 .btn-fill:hover {
        --tw-shadow: inset 0 0px 25px 0 rgba(20, 20, 50, 0.7);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        transition: 0.3s;
      }

      .header-2-3 .btn-no-fill {
        font: 300 18px/1.75rem Poppins, sans-serif;
        color: #E7E7E8;
        padding: 12px 32px;
        transition: 0.3s;
      }

      .header-2-3 .btn-no-fill:hover {
        color: #E7E7E8;
      }

      .header-2-3 .modal-item .modal-dialog .modal-content {
        border-radius: 8px;
        transition: 0.3s;
      }

      .header-2-3 .responsive li a {
        padding: 1rem;
        transition: 0.3s;
      }

      .header-2-3 .left-column {
        margin-bottom: 2.75rem;
        width: 100%;
      }

      .header-2-3 .text-caption {
        font: 400 0.875rem/1.625 Poppins, sans-serif;
        margin-bottom: 2rem;
        color: #CBCBD2;
      }

      .header-2-3 .title-text-big {
        font: 600 2.25rem/2.5rem Poppins, sans-serif;
        margin-bottom: 2rem;
        color: #CBCBD2;
      }

      .header-2-3 .btn-try {
        font: 600 1rem/1.5rem Poppins, sans-serif;
        padding: 1rem 1.5rem;
        border-radius: 0.75rem;
        background-color: #524EEE;
        transition: 0.3s;
      }

      .header-2-3 .btn-try:hover {
        --tw-shadow: inset 0 0px 25px 0 rgba(20, 20, 50, 0.7);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        transition: 0.3s;
      }

      .header-2-3 .btn-outline {
        font: 400 1rem/1.5rem Poppins, sans-serif;
        border: 1px solid #707092;
        color: #707092;
        padding: 1rem 1.5rem;
        border-radius: 0.75rem;
        background-color: transparent;
        transition: 0.3s;
      }

      .header-2-3 .btn-outline:hover {
        border: 1px solid #FFFFFF;
        color: #FFFFFF;
        transition: 0.3s;
      }

      .header-2-3 .btn-outline:hover div path {
        fill: #FFFFFF;
        transition: 0.3s;
      }

      .header-2-3 .right-column {
        width: 100%;
      }

      .header-2-3 .dropdown-menu {
        border: 1px solid #eeeeee;
        background-color: #ffffff;
        border-radius: 0.75rem;
        padding: 14px;
        box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.03);
      }

      .header-2-3 .dropdown-item {
        padding: 0.625rem 0rem !important;
      }

      .header-2-3 .dropdown-item:hover {
        background-color: #ffffff !important;
        color: #5252ff;
      }

      .header-2-3 .user-dropdown {
        margin-right: 1.25rem;
      }

      .content-4-4 p,
      .content-4-4 h5 {
        margin: 0rem;
      }

      .content-4-4 .btn-learn-more {
        padding: 0.75rem 1.75rem;
        border-radius: 0.75rem;
        font: 500 0.875rem/1.25rem "Asap", sans-serif;
        background-color: #524EEE;
        transition: 0.3s;
      }

      .content-4-4 .btn-learn-more:hover {
        background-color: #285a7b;
        transition: 0.3s;
      }

      .content-4-4 img {
          width: 300px;
          height: 300px;
      }

      .content-4-4 .text-title {
        font: 600 3rem/1 "Poppins", sans-serif;
        margin: 0.2rem;
        margin-bottom: 1.75rem;
        color: #285a7b;
      }

      .content-4-4 .caption-description {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #bfbfbf;
      }

      .content-4-4 .caption-title {
        font: 500 1.25rem/1.625 "Poppins", sans-serif;
        padding-top: 1.25rem;
        padding-bottom: 0.5rem;
        color: #323232;
      }

      .content-4-4 .caption-text {
        font-size: 0.875rem;
        color: #bfbfbf;

        line-height: 1.625;
        margin-bottom: 1.5rem;
      }

      .content-4-4.main {
        padding: 5rem 2rem;
      }

      .content-4-4 .item {
        width: 100%;
        margin-bottom: 1.5rem;
      }

      .content-4-4 .content-section {
        margin-bottom: 4rem;
      }

      .content-3-1 .btn:focus,
      .content-3-1 .btn:active {
        outline: none !important;
      }

      .content-3-1 {
        padding: 5rem 2rem;
      }

      .content-3-1 .img-hero {
        width: 100%;
        margin-bottom: 3rem;
      }

      .content-3-1 .right-column {
        width: 100%;
      }

      .content-3-1 .title-text {
        font: 600 1.875rem/2.25rem Poppins, sans-serif;
        margin-bottom: 2.5rem;
        letter-spacing: -0.025em;
        color: #121212;
        text-align: center;
      }

      .content-3-1 .text-caption {
        font: 400 1rem/1.75rem Poppins, sans-serif;
        letter-spacing: 0.025em;
        color: #565656;
      }

      .content-3-1 .btn-learn {
        font: 600 1rem/1.5rem Poppins, sans-serif;
        padding: 1rem 2.5rem;
        background-color: #113873;
        transition: 0.3s;
        letter-spacing: 0.025em;
        border-radius: 0.75rem;
      }

      .content-3-1 .btn-learn:hover {
        background-color: #154894;
        transition: 0.3s;
      }

      :root{
        --pink: #6A8795;
        --violet: #1F282C;
        --lightblack: #515C6F;
        --white: #ffffff;
        --darkwhite: #cecaca;
        --pinkshadow: #ffcbdd;
        --lightbshadow: rgba(0,0,0,0.15);
      }
      
            body .wrapper{
              min-height: 700px;
              width: 98%;
              display: flex;
              align-items: center;
              justify-content: center;
              font: 400 0.875rem/1.625 Poppins, sans-serif;
            }
      
            .wrapper {
              height: 80%;
              width: 90%;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              top: 15px;
              left: 15px;
              bottom: 15px;
              border-radius: 15px;
              margin-top: 15px;
              margin-bottom: 50px;
              background: #FFFFFF;
              box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
            }
      
            .wrapper #logo{
              position: absolute;
              top: 30px;
              left: 70px;
              font-size: 25px;
              color: #285a7b;
              text-transform: capitalize;
            }
      
            .wrapper #logo img{
              margin-right: 15px;
              color: #003049;
              height: 40px;
            }
      
            .wrapper i {
              cursor: pointer;
            }
      
            .top-bar, .progress-area .timer, .controls, .music-list .header, .music-list ul li {
              display: flex;
              top: 80px;
              align-items: center;
              justify-content: space-between;
              position: absolute;
            }
      
            .top-bar i {
              padding: 0 200px;
              color: #003049;
              font-size: 30px;
            }
      
            .top-bar i:first-child {
              margin-left: -7px;
            }
      
            .top-bar span {
              font-size: 20px;
              color: #003049;
              margin-left: -3px;
            }
      
            .img-area {
              height: 300px;
              width: 400px;
              position: absolute;        
              overflow: hidden;
              margin-top: 25px;
              top: 120px;
              border-radius: 15px;
              box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
            }
      
            .img-area img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
      
            .song-details {
              text-align: center;
              margin: 10px 0;
              top: 450px;
              position: absolute;
            }
      
            .song-details p {
              color: #003049;
            }
      
            .song-details .name {
              font-size: 21px;
            }
      
            .song-details .artist {
              font-size: 18px;
              opacity: 0.9;
              line-height: 35px;
            }
      
            .progress-area {
              height: 6px;
              width: 33%;
              margin-top: 450px;
              background: #CBCBD2;
              border-radius: 50px;
              cursor: pointer;
            }
      
            .progress-area .progress-bar {
              height: inherit;
              width: 0;
              position: relative;
              border-radius: inherit;
              background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 100%);
            }
      
            .progress-bar::before {
              content: "";
              position: absolute;
              height: 15px;
              width: 15px;
              background: #000;
              border-radius: 50%;
              top: 50%;
              right: -5px;
              transform: translateY(-50%);
              background: inherit;
              opacity: 0;
              transition: opacity 0.2s ease;
            }
      
            .progress-area:hover .progress-bar::before {
              opacity: 1;
            }
      
            .progress-area .timer {
              margin-top: 2px;
            }
      
            .timer span {
              font-size: 13px;
              color: #003049;
              top: 500px;
              position: relative;
            }
      
            .timer .max-duration {
              margin-left: 370px;
            }
      
            .controls{
              margin: 40px 0 5px 0;
              top: 560px;
            }
      
            .controls i{
              padding: 0 40px;
              font-size: 28px;
              user-select: none;
              background: #003049;
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
      
            .controls i:nth-child(2), .controls i:nth-child(4){
              font-size: 43px;
            }
      
            .controls #prev{
              margin-right: -13px;
            }
      
            .controls #next{
              margin-left: -13px;
            }
      
            .controls .play-pause{
              height: 54px;
              width: 54px;
              display: flex;
              cursor: pointer;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              background: linear-gradient(var(--white) 0%, var(--darkwhite) 100%);
              box-shadow: 0px 0px 5px #003049;
            }
      
            .play-pause::before{
              position: absolute;
              content: "";
              height: 43px;
              width: 43px;
              border-radius: inherit;
              background: #003049;
            }
      
            .play-pause i{
              height: 43px;
              width: 43px;
              left: 190px;
              line-height: 43px;
              text-align: center;
              background: inherit;
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              position: absolute;
            }
      
            .music-list{
              position: absolute;
              background: var(--white);
              width: 30%;
              left: 450px;
              bottom: -55%;
              opacity: 0;
              pointer-events: none;
              z-index: 5;
              padding: 120px 30px 20px 30px;
              border-radius: 15px;
              box-shadow: 0px -5px 10px rgba(0,0,0,0.1);
              transition: all 0.15s ease-out;
            }
            .music-list.show{
              bottom: 0;
              opacity: 1;
              pointer-events: auto;
            }
            .header .row{
              display: flex;
              align-items: center;
              font-size: 19px;
              color: var(--lightblack);
            }
            .header .row i{
              cursor: default;
              margin-left: 10px;
            }
            .header .row span{
              margin-left: 40px;
              position: absolute;
            }
            .header #close{
              font-size: 22px;
              color: var(--lightblack);
              margin-left: 270px;
            }
            .music-list ul{
              margin: 5px 0;
              max-height: 140px;
              overflow: auto;
            }
            .music-list ul::-webkit-scrollbar{
              width: 0px;
            }
            .music-list ul li{
              list-style: none;
              display: flex;
              right: 18px;
              margin-top: 10px;
              top: 0px;
              position: relative;
              cursor: pointer;
              color: var(--lightblack);
              border-bottom: 1px solid #E5E5E5;
            }
            .music-list ul li:last-child{
              border-bottom: 0px;
            }
            .music-list ul li .row span{
              font-size: 17px;
            }
            .music-list ul li .row p{
              opacity: 0.9;
            }
            ul li .audio-duration{
              font-size: 16px;
            }
            ul li.playing{
              pointer-events: none;
              color: var(--violet);
      }

      .content-7-6 .title-font {
        font: 800 3rem/1.25 'Poppins', sans-serif;
        margin-bottom: 2rem;
        letter-spacing: -0.025em;
        color: #113873;
      }

      .content-7-6 .caption-text {
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: 0.05em;
        line-height: 2rem;
        margin-bottom: 1.5rem;
        color: #6681A9;
      }

      .content-7-6 .card-item {
        padding: 4rem 3.5rem;
        background-color: #D8E7FF;
      }

      .content-7-6 .btn-send {
        font-size: 1.125rem;
        line-height: 1.75rem;
        border-radius: 999px;
        padding: 1rem 3.5rem;
        background-color: #0343E5;
        transition: 0.3s;
      }

      .content-7-6 .btn-send:hover {
        background-color: #195AFF;
        transition: 0.3s;
      }

      .content-7-6 .main {
        padding: 3rem 2rem 3.5rem;
      }

      .content-7-6 .label {
        font-size: 1rem;
        line-height: 1.75rem;
      }

      .content-7-6 .input {
        border: none;
        margin-top: 0.5rem;
        font-size: 1rem;
        line-height: 2rem;
        padding: 0.25rem 0.75rem;
      }

      .footer-4-1 .list-footer li a {
        color: #6681A9;
        transition: 0.3s;
      }

      .footer-4-1 .list-footer li a {
        line-height: 35px;
      }

      .footer-4-1 .list-footer li:hover a {
        color: #113873;
        font-weight: 500;
        transition: 0.3s;
      }

      .footer-4-1 .dropdown-header .dropdown-header-hover:hover a {
        color: #113873 !important;
        font-weight: 500;
        transition: 0.1s;
      }

      .footer-4-1 .main {
        padding: 6rem 1rem 3.5rem;
        background-color: #ebebeb;
      }

      .footer-4-1 .left-col,
      .footer-4-1 .right-col {
        width: 100%;
      }

      .footer-4-1 .caption-font {
        font-weight: 400;
        font-size: 1rem;
        line-height: 2rem;
        letter-spacing: 1%;
        color: #6681A9;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
      }

      .footer-4-1 .title-font {
        font: 600 1.125rem/1.75rem 'Inter', sans-serif;
        margin-bottom: 1.25rem;
        color: #113873;
      }

      .footer-4-1 .text-base {
        font-size: 1rem;
        line-height: 1.5rem;
      }

      .footer-4-1 .dropdown-toggle::after {
        display: none;
      }

      .footer-4-1 .nav-dropdown {
        background-color: #FBFCFD;
        padding: 1rem;
        border-radius: 0.5rem;
        border: none;
        width: 138px;
      }

      .footer-4-1 .dropdown-item a,
      .footer-4-1 .dropdown-item {
        color: #6681A9;
        background-color: #FBFCFD;
        transition: 0.2s;
      }

      .footer-4-1 .dropdown-item:focus a,
      .footer-4-1 .dropdown-item:hover a {
        color: #113873;
        font-weight: 500;
        transition: 0.2s;
        background-color: #FBFCFD;
      }

      .footer-4-1 .icon-footer:hover path {
        fill: #113873;
      }


      .footer-4-1 a.footer-link {
        color: #6681A9;
        transition: 0.1s;
      }

      .footer-4-1 a.footer-link:hover {
        color: #113873;
        font-weight: 500;
        transition: 0.1s;
      }

      .footer-4-1 img {
          width: 50px;
          height: 50px;
      }

      @media (min-width: 576px) {
        .header-2-3 .modal-item .modal-dialog {
          max-width: 95%;
          border-radius: 12px;
        }

        .header-2-3 .navbar {
          padding: 3rem 2rem;
        }

        .header-2-3 .hero {
          padding: 3rem 2rem 5rem;
        }

        .header-2-3 .title-text-big {
          font-size: 3rem;
          line-height: 1.2;
        }
        
        .footer-4-1 .dropdown-header .dropdown-header-hover:hover .dropdown-header-icon-arrow {
            display: block;
          }
  
          .footer-4-1 .main {
            padding: 3rem 2rem 3.5rem;
          }
      }

      @media (min-width: 768px) {
        .header-2-3 .navbar {
          padding: 3rem 4rem;
        }

        .header-2-3 .hero {
          padding: 3rem 4rem 5rem;
        }

        .header-2-3 .left-column {
          margin-bottom: 3rem;
        }
  
        .footer-4-1 .main {
            padding: 3rem 4rem 3.5rem;
          }
      }

      @media (min-width: 992px) {
        .header-2-3 .navbar-expand-lg .navbar-nav .nav-link {
          padding-right: 1.25rem;
          padding-left: 1.25rem;
        }

        .header-2-3 .navbar {
          padding: 3rem 6rem;
        }

        .header-2-3 .hero {
          padding: 3rem 6rem 5rem;
        }

        .header-2-3 .left-column {
          width: 50%;
          margin-bottom: 0;
        }

        .header-2-3 .title-text-big {
          font-size: 3.75rem;
          line-height: 1.2;
        }

        .header-2-3 .right-column {
          width: 50%;
          background-image: ("");
        }

        .header-2-3 .user-dropdown .dropdown-menu {
          display: none;
        }

        .header-2-3 .user-dropdown:hover .user-nav {
          color: #1b1b1b;
        }

        .header-2-3 .user-dropdown:hover .dropdown-menu {
          display: block;
        }

        .header-2-3 .user-dropdown .dropdown-menu {
          margin-top: 0;
        }
      }

        .content-4-4.main {
            padding: 5rem 10rem;
          }
  
          .content-4-4 .items {
            width: auto;
            margin-bottom: 0rem;
          }
          .footer-4-1 .main {
            padding: 6rem 8rem 3.5rem;
          }
  
          .footer-4-1 .left-col {
            width: 60%;
          }
  
          .footer-4-1 .right-col {
            width: 40%;
          }

        @media all and (min-width: 992px) {
            .content-4-4.main {
          padding: 5rem 10rem;
        }

        .content-4-4 .items {
          width: auto;
          margin-bottom: 0rem;
        }
  
            .footer-4-1 .nav-item .dropdown-menu {
              display: none;
            }
    
            .footer-4-1 .nav-item:hover .dropdown-menu {
              display: block;
            }
    
            .footer-4-1 .nav-item .dropdown-menu {
              margin-top: 0;
            }
          }
    
          @media (min-width: 1200px) {}