.ant-design--youtube-filled {
    display: inline-block;
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23ac0a0a' d='M941.3 296.1a112.3 112.3 0 0 0-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7A112.12 112.12 0 0 0 82.7 296C64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9M423 646V378l232 133z'/%3E%3C/svg%3E");
}

.akar-icons--instagram-fill {
    display: inline-block;
    width: 35px !important;
    height: 35px !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d19c0c' fill-rule='evenodd' d='M7.465 1.066C8.638 1.012 9.012 1 12 1s3.362.013 4.534.066s1.972.24 2.672.511c.733.277 1.398.71 1.948 1.27c.56.549.992 1.213 1.268 1.947c.272.7.458 1.5.512 2.67C22.988 8.639 23 9.013 23 12s-.013 3.362-.066 4.535c-.053 1.17-.24 1.97-.512 2.67a5.4 5.4 0 0 1-1.268 1.949c-.55.56-1.215.992-1.948 1.268c-.7.272-1.5.458-2.67.512c-1.174.054-1.548.066-4.536.066s-3.362-.013-4.535-.066c-1.17-.053-1.97-.24-2.67-.512a5.4 5.4 0 0 1-1.949-1.268a5.4 5.4 0 0 1-1.269-1.948c-.271-.7-.457-1.5-.511-2.67C1.012 15.361 1 14.987 1 12s.013-3.362.066-4.534s.24-1.972.511-2.672a5.4 5.4 0 0 1 1.27-1.948a5.4 5.4 0 0 1 1.947-1.269c.7-.271 1.5-.457 2.67-.511m8.98 1.98c-1.16-.053-1.508-.064-4.445-.064s-3.285.011-4.445.064c-1.073.049-1.655.228-2.043.379c-.513.2-.88.437-1.265.822a3.4 3.4 0 0 0-.822 1.265c-.151.388-.33.97-.379 2.043c-.053 1.16-.064 1.508-.064 4.445s.011 3.285.064 4.445c.049 1.073.228 1.655.379 2.043c.176.477.457.91.822 1.265c.355.365.788.646 1.265.822c.388.151.97.33 2.043.379c1.16.053 1.507.064 4.445.064s3.285-.011 4.445-.064c1.073-.049 1.655-.228 2.043-.379c.513-.2.88-.437 1.265-.822c.365-.355.646-.788.822-1.265c.151-.388.33-.97.379-2.043c.053-1.16.064-1.508.064-4.445s-.011-3.285-.064-4.445c-.049-1.073-.228-1.655-.379-2.043c-.2-.513-.437-.88-.822-1.265a3.4 3.4 0 0 0-1.265-.822c-.388-.151-.97-.33-2.043-.379m-5.85 12.345a3.669 3.669 0 0 0 4-5.986a3.67 3.67 0 1 0-4 5.986M8.002 8.002a5.654 5.654 0 1 1 7.996 7.996a5.654 5.654 0 0 1-7.996-7.996m10.906-.814a1.337 1.337 0 1 0-1.89-1.89a1.337 1.337 0 0 0 1.89 1.89' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.akar-icons--tiktok-fill {
    display: inline-block;
    width: 30px !important;
    height: 30px !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.321 5.562a5 5 0 0 1-.443-.258a6.2 6.2 0 0 1-1.137-.966c-.849-.971-1.166-1.956-1.282-2.645h.004c-.097-.573-.057-.943-.05-.943h-3.865v14.943q.002.3-.008.595l-.004.073q0 .016-.003.033v.009a3.28 3.28 0 0 1-1.65 2.604a3.2 3.2 0 0 1-1.6.422c-1.8 0-3.26-1.468-3.26-3.281s1.46-3.282 3.26-3.282c.341 0 .68.054 1.004.16l.005-3.936a7.18 7.18 0 0 0-5.532 1.62a7.6 7.6 0 0 0-1.655 2.04c-.163.281-.779 1.412-.853 3.246c-.047 1.04.266 2.12.415 2.565v.01c.093.262.457 1.158 1.049 1.913a7.9 7.9 0 0 0 1.674 1.58v-.01l.009.01c1.87 1.27 3.945 1.187 3.945 1.187c.359-.015 1.562 0 2.928-.647c1.515-.718 2.377-1.787 2.377-1.787a7.4 7.4 0 0 0 1.296-2.153c.35-.92.466-2.022.466-2.462V8.273c.047.028.672.441.672.441s.9.577 2.303.952c1.006.267 2.363.324 2.363.324V6.153c-.475.052-1.44-.098-2.429-.59'/%3E%3C/svg%3E");
}

.at-icons--lock {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23d2bf37' d='M8 1a4 4 0 0 1 4 4v2l.204.01A2 2 0 0 1 14 9v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2V5a4 4 0 0 1 4-4m0 8a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1m0-6a2 2 0 0 0-2 2v2h4V5a2 2 0 0 0-2-2'/%3E%3C/svg%3E");
}

.page-content {
    height: fit-content;
}

.page-row.music {
    display: flex;
    justify-content: center;
}

.home-section {
    display: flex !important;
    width: 100% !important;
}

#section3.home-section {
    flex-direction: column !important;
    padding-top: 50px !important;
    gap: 20px !important;

    & h1 {
        margin-left: 40px;
        margin-bottom: 15px;
        font-size: 32px;
    }

    & #slider-list li .song-div {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        & img {
            height: -webkit-fill-available !important;
        }
    }
}

.card-song-cont {
    display: flex;
    flex-direction: row;
    gap: 7px;
}

.audio-cont-buy {
    display: flex;
    flex-direction: column;
}

.btn {
    padding: 12px;
    border-radius: 8px;
}

.btn-gold {
    background: gold;
}

.form-control:focus {
    border-color: gold;
}

#buy-fant-section {
    height: 950px;

    & .page-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    & #page-header {
        width: 100% !important;
        text-align: center;
        height: 95px;
    }
}

#buy-fant {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 750px !important;

    & #left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    & #right {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;

        & .field-row {
            margin-bottom: 8px;
        }

        & form {
            width: 70%;
        }

        & .select {
            max-width: unset !important;
        }
    }
}

#buy-fant > * {
    flex: 0 0 calc((100% - 10px) / 2);
}

.select {
    border: 1px solid #d3d3d3;
    font-size: 1.00rem !important;
    & select {
        padding-left: 10px !important;
    }
}

#apple-pay-button {
    display: none;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 4px;
    background: black;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: buy;
    -apple-pay-button-style: black;
}

.btn-primary {
    background-color: #D4AF37;
    border-color: #D4AF37;
}

@media only screen and (max-width: 630px) {
    #home-captcha-wrapper {
        display: flex;
        justify-content: center;
    }

    #buy-fant-section {
        height: 1500px;
    }

    #buy-fant {
        flex-direction: column;
        height: 1050px !important;
        & img {
            height: 350px;
            width: 350px;
        }

        & #left {
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: center;
            height: 350px;
        }

        & #right {
            justify-content: center;
            align-items: center;
            height: 800px;
        }

    }
}

.header {
    background: #000;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
}

.logo {
    color: #d4af37;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(
            90deg,
            #8a6f1d,
            #d4af37,
            #fff3a6,
            #d4af37,
            #8a6f1d
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(212, 175, 55, 0.6);
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 9px;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #d4af37;
    transition: 0.3s ease;
}

.offcanvas {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    max-width: 85%;
    height: 100vh;
    background: #050505;
    border-left: 1px solid rgba(212, 175, 55, 0.4);
    padding: 90px 32px 32px;
    transition: right 0.35s ease;
    z-index: 999;
    box-shadow: -20px 0 40px rgba(0, 0, 0, 0.6);
}

.offcanvas.active {
    right: 0;
}

.offcanvas nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.offcanvas a {
    color: #d4af37;
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.25s ease;
}

.offcanvas a:hover {
    color: #fff3a6;
    padding-left: 8px;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 998;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 768px) {
    .offcanvas {
        width: 360px;
    }
}

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

.submenu-toggle {
    background: none;
    border: none;
    color: #d4af37;
    font: inherit;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    transition: 0.25s ease;
}

.submenu-toggle:hover {
    color: #fff3a6;
    padding-left: 8px;
}

.submenu-toggle span {
    font-size: 1.3rem;
    line-height: 1;
}

.submenu-links {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 18px 0 0 18px;
}

.submenu-links a {
    font-size: 0.95rem;
    color: #b9962f;
}

.submenu.active .submenu-links {
    display: flex;
}

.submenu.active .submenu-toggle span {
    transform: rotate(45deg);
}