:root {
    --primary-color: #0B0B0B;
    --secondary-color: #F5E9DA;
    --dusty-gold: #C2A878;
    --gold-color: #d4af37;
    --background-color: #0f0f0f;
    --light-bg: #edebeb;
    --Heading-Color: #fff;
    --Highlight-Color: #ff0000;
    --Text-color: #555;
    --navbar-color: #0b0b0bf1;
    --navbar-text-color: var(--secondary-color);
    --footer-color: var(--primary-color);
    --footer-bottom-color: #272727;
    --footer-heading-color: #FFF;
    --footer-text-color: #ccc;
    --white-color: #fff;
    --primary-Btn-color: #8B2E2E;
    --Secondary-Btn-color: var(--dusty-gold);
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background: #000;
    padding-top: 90px;
    overflow-x: hidden;
}

body p {
    font-family: 'poppins', sans-serif;
}

body h1,
h2,
h3,
h4,
h5 {
    font-family: 'Playfair Display', serif;
}

.sub-heading {
    letter-spacing: 1px;
    font-size: 15px;
    color: var(--Highlight-Color);
}

.highlite-des {
    color: var(--Highlight-Color);
    letter-spacing: 1px;
}

.highlite {
    color: var(--Highlight-Color);
}

.dark-mode .highlite {
    color: var(--Highlight-Color) !important;
}

@media (max-width:768px) {
    .highlite-des {
        color: inherit;
    }

}

.hyper-link {
    text-decoration: none;
    color: inherit;
}

/*-- Buttons Start --*/

.primary-btn {
    background: #f5b942;
    color: #000;
    padding: 10px 25px;
    border: none;
    padding: 14px 40px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s;
}

.primary-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width:768px) {
    .primary-btn {
        font-size: 18px;
        padding: 15px 25px;
    }

    .secondary-btn {
        padding: 10px 25px;
    }

}

.secondary-btn {
    text-decoration: none;
    padding: 15px 25px;
    background: var(--Secondary-Btn-color);
    border: none;
    color: #000;
    border-radius: 10px;
    font-weight: 500;
    transition: 0.3s;
}

.secondary-btn:hover {
    background: #503f20;
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/*-- Buttons End --*/

/*---- Empty Bg -----*/
.empty-bg {
    height: 50vh;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://i.pinimg.com/736x/3b/30/25/3b30255ef763b534285bccdee89aa71a.jpg') center / cover no-repeat;
    background-attachment: fixed;
}

/*------ NAVBAR -------*/

.custom-navbar {
    background: var(--navbar-color);
    padding: 15px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    z-index: 9999;
}


.brand-logo {
    width: 100px;
}

/* center menu */
.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}



/* hover animation */

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--secondary-color);
    transition: 0.4s;
}

.dark-mode .nav-link::after {
    background: #000;
}

.nav-link:hover::after {
    width: 100%;
}

/* dropdown */

.dropdown-menu {
    background: #222222;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dropdown-item {
    color: var(--navbar-text-color);
    transition: 0.3s;
}

.dropdown-item:hover {
    background: #0d6efd;
    color: var(--white-color);
}


/* login button */

.login-btn {
    background: var(--gold-color);
    border: none;
    color: #000;
    padding: 10px 25px;
    border-radius: 30px;
    transition: 0.3s;
    text-decoration: none;
    font-weight: 600;
}

.login-btn:hover {
    background: #FFF;
    color: #000;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* dark mode toggle */

.dark-toggle {
    font-size: 20px;
    color: var(--white-color);
    margin-right: 15px;
    cursor: pointer;
}


/* ARROW ICON */

.nav-arrow {
    font-size: 12px;
    margin-left: 6px;
    transition: 0.3s;
}

/* Rotate arrow when dropdown open */

.show>.nav-link .nav-arrow {
    transform: rotate(180deg);
}

/* ACTIVE NAV */

.nav-link.active {
    color: var(--Highlight-Color) !important;
}

.dark-mode .nav-link.active {
    color: var(--Highlight-Color) !important;
}

.nav-link.active::after {
    width: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--navbar-text-color) !important;
    margin: 0 14px;
    font-weight: 500;
    position: relative;
    padding-bottom: 6px;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    color: #FFF !important;
    filter: brightness(99999999999);
}

.dark-mode .navbar-toggler-icon {
    color: #000;
    filter: brightness(0);
}



/* Desktop center menu */

@media (min-width:992px) {

    .nav-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

}

/* Mobile layout fix */

@media (max-width:991px) {

    .nav-center {
        position: static;
        transform: none;
        text-align: left;
        margin-top: 20px;
    }

    .navbar-nav {
        gap: 10px;
    }

    .login-btn {
        width: 100%;
        margin-top: 10px;
    }

}

/*------- NAVBAR DARK MODE START ------*/

.dark-mode .navbar {
    background: #ffffff !important;
}

.dark-mode .nav-link {
    color: #000 !important;
}

.dark-mode .dropdown-menu {
    background: #cacaca;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.dark-mode .dropdown-item {
    color: #000;
    transition: 0.3s;
}

.dark-mode .dropdown-item:hover {
    background: #0d6efd;
    color: var(--white-color);
}

/*------- NAVBAR DARK MODE END --------*/


/*------ END OF NAVBAR -------*/

/*------ FOOTER -------*/
.footer {
    background: var(--footer-color);
    padding-top: 60px;
    font-size: 14px;
    border-top: 2px solid var(--secondary-color);
}

.footer-logo {
    width: 120px;
    margin-bottom: 20px;
}


.footer-title {
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--footer-heading-color);
}

.footer-text {
    color: var(--footer-text-color);
    line-height: 1.6;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links a {
    text-decoration: none;
    color: var(--footer-text-color);
    display: block;
    margin-bottom: 8px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--Highlight-Color);
    transform: translateX(4px);
}

.footer-contact {
    margin-bottom: 8px;
}

.footer-contact {
    color: var(--footer-text-color);
}


.footer-newsletter {
    display: flex;
    margin-top: 10px;
}

.footer-newsletter input {
    border: 1px solid #ddd;
    padding: 8px;
    flex: 1;
    border-radius: 4px 0 0 4px;
}

.footer-newsletter button {
    background: var(--gold-color);
    border: none;
    color: var(--white-color);
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
}

.footer-social {
    margin-top: 20px;
}

.social-icons i {
    color: var(--footer-heading-color);
    font-size: 18px;
    margin-right: 15px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.social-icons i:hover {
    color: var(--Highlight-Color);
    transform: translateY(-3px);
}

/* Bottom Footer */

.footer-bottom {
    background: var(--footer-bottom-color);
    color: var(--white-color);
    padding: 15px 0;
    margin-top: 40px;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-copy {
    justify-content: center;
    margin-top: 10px;
}

.footer-menu a {
    color: white;
    margin-right: 20px;
    text-decoration: none;
    transition: .3s;
}

.footer-menu a:hover {
    color: var(--Highlight-Color);
    transform: translateY(-5px);
}


/* Responsive */

@media(max-width:768px) {

    .footer-bottom-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

}

/*------ FOOTER DARK MODE START -----*/
.dark-mode .dark-footer {
    background: #ffffff;
}


.dark-mode .dark-footer h6,
.dark-mode .social-icons i {
    color: #000;
}

.dark-mode .social-icons i:hover,
.dark-mode .footer-links a:hover {
    color: var(--Highlight-Color) !important;
}

.dark-mode .dark-footer p,
.dark-mode .dark-footer a,
.dark-mode .dark-footer span {
    color: #666;
}

.dark-mode .footer-copy {
    color: #000 !important;
}

.dark-mode .footer-bottom {
    background: #f3f3f3;
}

.dark-mode .footer-menu a {
    color: #000;
}

.dark-mode .footer-menu a:hover {
    color: var(--Highlight-Color);
}

/*------ FOOTER DARK MODE END -------*/

/*------ END OF FOOTER -------*/



/*====== DARK MODE  ======*/

body {
    transition: 0.4s;
}

.dark-mode-toggle {
    font-size: 22px;
    color: gold;
    cursor: pointer;
    margin-right: 20px;
    transition: 0.3s;
}

.dark-mode .dark-mode-toggle {
    color: #000;
}

.dark-mode .rtl-toggle {
    color: #000;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
}


.dark-mode {
    background: #0a0a0a;
    color: white;
}


.dark-mode .highlite {
    color: var(--Highlight-Color) !important;
}

.dark-mode .secondary-btn:hover {
    background: var(--Secondary-Btn-color);
}

/*---- Dark mode for sections ----*/

.dark-mode .dark-section {
    background-color: #ffffff;
}


.dark-mode .dark-section-2 {
    background-color: #e1e1e1;
}

.dark-mode .dark-section h1,
.dark-mode .dark-section h2,
.dark-mode .dark-section h3,
.dark-mode .dark-section h4,
.dark-mode .dark-section h5,
.dark-mode .dark-section-2 h1,
.dark-mode .dark-section-2 h2,
.dark-mode .dark-section-2 h3,
.dark-mode .dark-section-2 h4,
.dark-mode .dark-section-2 h5 {
    color: #000;
}

.dark-mode .dark-section p,
.dark-mode .dark-section li,
.dark-mode .dark-section a,
.dark-mode .dark-section-2 p,
.dark-mode .dark-section-2 li,
.dark-mode .dark-section-2 a {
    color: #999 !important;
}

.dark-mode .dark-section-2 li:hover,
.dark-mode .dark-section-2 a:hover,
.dark-mode .dark-section li:hover,
.dark-mode .dark-section a:hover,
.dark-mode .dark-section-2 .sub-heading,
.dark-mode .dark-section .sub-heading {
    color: var(--Highlight-Color);
}

.dark-mode .dark-section-card {
    background: #f3f3f3;
    border: 1px solid #909090;
}

.dark-mode .dark-section-card h5 {
    color: #000;
}

.dark-mode .dark-section-card p {
    color: #999;
}

.dark-mode .dark-section-card .social-box i {
    color: #FFF;
}

.dark-mode .dark-section-card .social-box i:hover {
    color: var(--Highlight-Color);
}

.dark-mode .event-icon {
    background-color: #626262;
    border: none;
}

.dark-mode .em-icon {
    background-color: #5a5a5a;
}

.dark-mode .dark-section-card .primary-btn {
    color: #000 !important;
}

.dark-mode .dark-section-card .primary-btn:hover {
    background: #000;
    color: #FFF !important;
}

.dark-mode .dark-section-2 .secondary-btn {
    color: #000 !important;
}

.dark-mode .dark-section-2 .primary-btn:hover,
.dark-mode .dark-section-2 .secondary-btn:hover {
    color: #000 !important;
}


/*------ END OF DARK MODE  ------*/

/*============= Index.HTML Start ==============*/

/*---------- V1 Hero Section Start --------*/
/* HERO */
.v1-hero {
    background: #0f0f0f;
    color: #fff;
    overflow: hidden;
}

/* SPIN ANIMATION */
@keyframes v2-hero-spin {
    from {
        transform: translateX(80px) rotate(0deg);
    }

    to {
        transform: translateX(80px) rotate(360deg);
    }
}

/* APPLY TO IMAGE */
.v1-vinyl-hero {
    animation: v2-hero-spin 8s linear infinite;
}

@media (max-width: 991px) {
    .v1-vinyl-hero {
        animation: v2-hero-spin-mobile 8s linear infinite;
        text-align: center;
        justify-content: center;
    }

    @keyframes v2-hero-spin-mobile {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}


/* TITLE */
.v1-hero-title {
    font-size: 64px;
    letter-spacing: 3px;
    line-height: 1.1;
}

/* DESC */
.v1-hero-desc {
    color: #aaa;
    font-size: 14px;
    max-width: 420px;
    margin-top: 15px;
}

/* BUTTON */
.v1-btn {
    background: #f5b942;
    color: #000;
    padding: 10px 25px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
}

.v1-btn:hover {
    background: #fff;
    color: #000;
}

/* RIGHT SIDE */
.v1-hero-right {
    position: relative;
}

/* STRIPES */
.v1-stripes {
    position: absolute;
    top: 0;
    left: -60px;
    height: 100%;
    width: 260px;
    transform: skewX(-20deg);
    display: flex;
    z-index: 1;
}

.v1-stripes span {
    flex: 1;
}

.v1-stripes span:nth-child(1) {
    background: #7a0019;
}

.v1-stripes span:nth-child(2) {
    background: #d9480f;
}

.v1-stripes span:nth-child(3) {
    background: #f76707;
}

.v1-stripes span:nth-child(4) {
    background: #ffd43b;
}

/* VINYL */
.v1-vinyl-hero {
    width: 450px;
    height: 450px;
    margin: auto;
    border-radius: 50%;
    background: url('../img/hero-bg.png') center / cover no-repeat;
    position: relative;
    z-index: 2;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v1-hero-title {
        font-size: 42px;
    }

    .v1-vinyl-hero {
        width: 240px;
        height: 240px;
    }

    .v1-stripes {
        display: none;
    }

    .v1-hero {
        text-align: center;
    }

    .v1-hero-desc {
        text-align: center;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/*---------- V1 Hero  Section End --------*/

/*---------- V1 About Us  Section Start --------*/
/* SECTION */
.v1-about-split {
    background: #070707;
    color: #fff;
    padding: 90px 10px;
}

/* VIDEO */
.v1-video-wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(245, 185, 66, 0.15);
}

.v1-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TAG */
.v1-about-tag {
    color: #f5b942;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dark-mode .v1-about-tag {
    color: rgb(0, 0, 0);
}

/* HEADING */
.v1-about-heading {
    font-size: 42px;
    margin-top: 10px;
}

/* DESC */
.v1-about-desc {
    color: #aaa;
    font-size: 14px;
    margin-top: 15px;
}

/* BUTTON */
.v1-about-btn {
    margin-top: 20px;
    background: #f5b942;
    color: #000 !important;
    padding: 10px 25px;
    border-radius: 30px;
    transition: 0.3s;
}

.v1-about-btn:hover {
    background: #cdcdcd;
    color: #000;
}

.dark-mode .dark-section .v1-about-btn {
    background: #f5b942;
    color: #000 !important;
}

.dark-mode .dark-section .v1-about-btn:hover {
    background: #000;
    color: #FFF !important;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v1-about-heading {
        font-size: 30px;
    }

    .v1-about-split {
        text-align: center;
    }
}

/*---------- V1 About Us  Section End --------*/

/*---------- Categories Section Start -----*/

/* SECTION */
.v1-cat-section {
    background: var(--background-color);
    color: #fff;
}

/* TITLE */
.v1-cat-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
}

.v1-cat-sub {
    color: #aaa;
    font-size: 14px;
}

/* CARD */
.v1-cat-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

/* IMAGE */
.v1-cat-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: 0.5s ease;
}

/* OVERLAY */
.v1-cat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 40));
    transform: translateY(100%);
    transition: 0.4s ease;
}

/* TEXT */
.v1-cat-overlay h5 {
    color: var(--Highlight-Color);
    margin-bottom: 5px;
}

.v1-cat-overlay p {
    font-size: 13px;
    color: #ddd;
}

/* HOVER EFFECT */
.v1-cat-card:hover img {
    transform: scale(1.1);
}

.v1-cat-card:hover .v1-cat-overlay {
    transform: translateY(0);
}

/* GLOW */
.v1-cat-card:hover {
    box-shadow: 0 0 25px rgba(245, 185, 66, 0.3);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v1-cat-title {
        font-size: 28px;
    }
}

/*---------- Categories Section End -------*/

/*---------- V1 Staff Section Start --------*/

/* SECTION */
.v1-playlists {
    background: #0f0f0f;
    color: #fff;
    padding: 90px 10px;
}

/* TITLE */
.v1-playlist-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
}

.v1-playlist-sub {
    color: #aaa;
    font-size: 14px;
}

/* CARD */
.v1-playlist-card {
    background: #151515;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

/* HOVER GLOW */
.v1-playlist-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px #f5b942, 0 0 60px rgba(245, 185, 66, 0.3);
}

/* VINYL */
.v1-vinyl {
    width: 150px;
    height: 150px;
    margin: 0 auto 15px;
}

.v1-vinyl img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.6s ease;
}

/* ROTATE ON HOVER */
.v1-playlist-card:hover .v1-vinyl img {
    transform: rotate(180deg);
}

/* ROTATE ON HOVER */
.v1-playlist-card:hover .v1-vinyl {
    transform: rotate(180deg);
}

/* TEXT */
.v1-playlist-card h5 {
    margin-top: 10px;
    font-size: 18px;
}

.v1-curator {
    color: #f5b942;
    font-size: 13px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v1-playlist-title {
        font-size: 30px;
    }
}

/*---------- V1 Staff Section End --------*/


/*---------- V1 Why Choose Us  Section Start --------*/
/* SECTION */
.v1-why-section {
    background: #0a0a0a;
    color: #fff;
}

/* TAG */
.v1-why-tag {
    color: #f5b942;
    font-size: 13px;
    text-transform: uppercase;
}

/* TITLE */
.v1-why-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    margin-top: 10px;
}

/* BOX */
.v1-why-box {
    padding: 15px;
    border-radius: 10px;
    transition: 0.3s;
}

/* HOVER */
.v1-why-box:hover {
    background: #111;
    box-shadow: 0 0 15px rgba(245, 185, 66, 0.2);
}

/* NUMBER */
.v1-why-number {
    font-size: 28px;
    font-weight: bold;
    color: #f5b942;
    display: block;
}

/* TEXT */
.v1-why-box h6 {
    margin-top: 5px;
}

.v1-why-box p {
    font-size: 13px;
    color: #aaa;
}

/* IMAGE */
.v1-why-img-box {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(245, 185, 66, 0.15);
}

.v1-why-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: 0.4s;
}

/* IMAGE HOVER */
.v1-why-img-box:hover .v1-why-img {
    transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v1-why-title {
        font-size: 28px;
        text-align: center;
    }

    .v1-why-section {
        text-align: center;
    }
}

/*---------- V1 Why Choose Us  Section End --------*/

/*---------- V1 How to use Section Start ---------*/

/* SECTION */
.rg-vinyl-how {
    background: #0f0f0f;
    color: #fff;
    padding: 100px 10px;
}

/* TITLE */
.rg-vinyl-title {
    font-size: 40px;
}


.rg-vinyl-desc {
    color: #aaa;
    font-size: 14px;
    margin-top: 15px;
    max-width: 400px;
}

/* STEP ITEM */
.rg-vinyl-step {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
    align-items: flex-start;
}

/* NUMBER */
.rg-vinyl-step span {
    min-width: 40px;
    height: 40px;
    background: #d4af37;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* TEXT */
.rg-vinyl-step h6 {
    margin: 0;
    font-size: 16px;
}

.rg-vinyl-step p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #aaa;
}

/* HOVER EFFECT */
.rg-vinyl-step:hover span {
    background: #fff;
    color: #000;
}

/* DARK MODE (LIGHT UI SWITCH) */
.dark-mode .rg-vinyl-how {
    background: #fff;
    color: #000;
}

.dark-mode .rg-vinyl-step p {
    color: #555;
}

.dark-mode .rg-vinyl-step span {
    background: #000;
    color: #fff;
}

@media (max-width:575px) {
    .rg-vinyl-title {
        font-size: 30px;
    }

    .rg-vinyl-step div h6 {
        font-size: 18px;
    }

    .rg-vinyl-step div p {
        font-size: 14px;
    }
}

@media (max-width:1000px) {
    .rg-vinyl-how {
        text-align: center;
        justify-content: center;
    }

    .rg-vinyl-desc {
        margin: auto;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .rg-vinyl-step h6 {
        font-size: 22px;
    }

    .rg-vinyl-step p {
        font-size: 16px;
    }

    .rg-vinyl-step {
        justify-content: center;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .rg-vinyl-step span {
        justify-content: center;
        text-align: center;
        margin: auto;
        min-width: 60px;
        height: 60px;
    }

    .rg-vinyl-step div {
        margin: auto;
        text-align: center;
        justify-content: center;
    }
}

/*---------- V1 How to use Section End -----------*/

/*============= Index.HTML END  =============*/

/*============= Home.HTML Start =============*/

/*-------- V2 Hero Section Start ------*/
/* SECTION */
.v2-hero-section {
    position: relative;
    height: 90vh;
    background: url('https://i.pinimg.com/736x/da/eb/55/daeb5565e4916d95778eb3e146c91534.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    color: #fff;
}

/* OVERLAY */
.v2-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.85) 40%,
            rgba(0, 0, 0, 0.4) 70%,
            rgba(0, 0, 0, 0.1));
}

/* CONTENT */
.v2-hero-content {
    position: relative;
    z-index: 2;
}

/* TITLE */
.v2-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 60px;
    line-height: 1.1;
}

/* TEXT */
.v2-hero-text {
    margin-top: 20px;
    font-size: 16px;
    color: #ddd;
    max-width: 450px;
}

/* BUTTONS */
.v2-hero-btns {
    margin-top: 30px;
}


/* RESPONSIVE */
@media (max-width: 991px) {
    .v2-hero-title {
        font-size: 36px;
        text-align: center;
    }

    .v2-hero-text {
        text-align: center;
        margin: 20px auto;
    }

    .v2-hero-btns {
        text-align: center;
    }

    .v2-hero-section {
        height: auto;
        padding: 80px 0;
    }
}

/*-------- V2 Hero Section End --------*/

/*-------- V2 About Us Section Start ---*/
/* SECTION */
.v2-abt-section {
    background: #0a0a0a;
    color: #fff;
}

/* TITLE */
.v2-abt-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
}

/* TEXT */
.v2-abt-text {
    color: #aaa;
    font-size: 14px;
}

/* IMAGE GRID */
.v2-abt-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.v2-abt-img {
    width: 100%;
    border-radius: 15px;
    transition: 0.4s;
}

.v2-abt-img:hover {
    transform: scale(1.05);
}

/* PROGRESS */
.v2-abt-progress-item {
    margin-top: 20px;
}

.v2-abt-bar {
    height: 6px;
    background: #222;
    border-radius: 10px;
    overflow: hidden;
    margin: 5px 0;
}

.v2-abt-fill {
    height: 100%;
    background: #f5b942;
    box-shadow: 0 0 10px #f5b942;
}

/* BUTTON */
.v2-abt-btn {
    background: #f5b942;
    color: #000;
    padding: 10px 20px;
    border-radius: 30px;
}

.v2-abt-btn:hover {
    background: #fff;
    box-shadow: 0 0 15px #f5b942;
}

/* STATS */
.v2-abt-stat {
    color: #f5b942;
    font-size: 28px;
}

.v2-abt-stats {
    background: var(--background-color);
    padding: 50px 20px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v2-abt-title {
        font-size: 30px;
        text-align: center;
    }

    .v2-abt-section {
        text-align: center;
    }

    .v2-abt-img-grid {
        grid-template-columns: 1fr;
    }
}

/*--- Dark Mode ---*/

.dark-mode .v2-abt-section {
    background: #FFF;
    color: #000;
}

.dark-mode .v2-abt-stats {
    background: #d5d5d5bb;
    border-radius: 20px;
}

.dark-mode .v2-abt-stat {
    color: rgb(151, 128, 0);
}

.dark-mode .v2-abt-text {
    color: #555;
}

/*-------- V2 About Us Section End -----*/

/*-------- V2 What We Do Start ---------*/
/* SECTION */
.v2-wwd-section {
    background: #000;
}

/* TAG */
.v2-wwd-tag {
    color: #f5b942;
    font-size: 13px;
    text-transform: uppercase;
}

/* TITLE */
.v2-wwd-title {
    font-size: 38px;
    font-weight: 700;
    color: #FFF;
}

/* SUBTEXT */
.v2-wwd-sub {
    color: #ccc;
    max-width: 500px;
    margin: auto;
}

/* CARD */
.v2-wwd-card {
    background: var(--background-color);
    padding: 25px;
    border-radius: 15px;
    height: 200px;
    transition: 0.4s;
    justify-content: center !important;
    text-align: center !important;
    justify-items: center !important;
}

/* HOVER */
.v2-wwd-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.v2-wwd-card h5 {
    color: #FFF;
    margin-top: 30px;
}

.v2-wwd-card p {
    color: #ccc;
}

/* IMAGE CARD */
.v2-wwd-img-card {
    padding: 0;
    overflow: hidden;
}

.v2-wwd-img-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: 0.5s;
    background: var(--background-color);
}

.v2-wwd-img-card:hover img {
    transform: scale(1.1);
}



/* RESPONSIVE */
@media (max-width: 991px) {
    .v2-wwd-title {
        font-size: 28px;
    }

    .v2-wwd-card h5 {
        margin-top: 0px;
    }

    .v2-wwd-section {
        text-align: center;
    }
}

@media (max-width:575px) {
    .v2-wwd-card h5 {
        margin-top: 30px;
    }
}

.dark-mode .v2-process-section {
    background: #FFF;
    color: #000;
}

.dark-mode .v2-abt-section .primary-btn:hover {
    background: #000;
    color: #FFF;
}

.dark-mode .v2-process-section p {
    color: #666;
}

/*-------- V2 What We Do End -----------*/

/*-------- V2 Process Start ------------*/
/* SECTION */
.v2-process-section {
    background: #0a0a0a;
    color: #fff;
    padding: 90px 10px;
}

/* TITLE */
.v2-process-title {
    font-size: 42px;
}

.v2-process-sub {
    color: #aaa;
    font-size: 14px;
}

/* WRAPPER */
.v2-process-wrapper {
    position: relative;
    margin-top: 60px;
}

/* CURVE LINE */
.v2-process-wrapper::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 5%;
    width: 90%;
    height: 120px;
    border-top: 2px solid #f5b942;
    border-radius: 50%/100px;
    z-index: 0;
}

/* STEP */
.v2-process-step {
    position: relative;
    width: 30%;
    display: inline-block;
    text-align: center;
    z-index: 2;
}

/* ICON */
.v2-process-icon {
    width: 75px;
    height: 75px;
    background: #111;
    border: 2px solid #f5b942;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #f5b942;
    transition: 0.3s;
}

/* HOVER EFFECT */
.v2-process-icon:hover {
    background: #f5b942;
    color: #000;

}


/* TEXT */
.v2-process-step h5 {
    margin-top: 10px;
}

.v2-process-step p {
    font-size: 14px;
    color: #aaa;
}

/* WAVE POSITION */
.v2-process-step-1 {
    transform: translateY(21px);
    transform: translateX(20px);
}

.v2-process-step-2 {
    transform: translateY(-5px);
    transform: translateX(20px);
}

.v2-process-step-3 {
    transform: translateY(20px);
    transform: translateX(20px);
}

/* TABLET */
@media (max-width: 991px) {
    .v2-process-step {
        width: 100%;
        margin-bottom: 40px;
        transform: none !important;
    }

    .v2-process-wrapper::before {
        display: none;
    }
}

/* MOBILE */
@media (max-width: 576px) {
    .v2-process-title {
        font-size: 28px;
    }
}

/*-------- V2 Process End --------------*/

/*============= Home.HTML End ==================*/

/*============= Inner Hero Section =============*/
.inhero-section {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('https://i.pinimg.com/1200x/f4/88/0d/f4880dbb72a9e6df8fbd0fe69cadaa96.jpg') Top center/cover no-repeat;
    overflow: hidden;
}

.inhero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.inhero-section .container {
    position: relative;
    z-index: 2;
}

.inhero-subtitle {
    color: var(--Highlight-Color);
    font-weight: 600;
    letter-spacing: 4px;
    font-size: 16px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.inhero-title {
    color: #fff !important;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.2;
}

/* Tablet */
@media (max-width:991px) {

    .inhero-section {
        height: 360px;
    }

    .inhero-title {
        font-size: 42px;
    }

}

/* Mobile */
@media (max-width:576px) {

    .inhero-section {
        height: 300px;
        padding: 40px 15px;
    }

    .inhero-title {
        font-size: 30px;
    }

    .inhero-subtitle {
        font-size: 13px;
        letter-spacing: 2px;
    }

}

/*============= Inner Hero Section End =========*/

/*============= About.HTML Start ================*/

/*------ Our Mision & Vission ------*/

/* SECTION */
.rg-abt--tabs {
    background: #0a0a0a;
    color: #fff;
}

/* TITLE */
.rg-abt--tabs-title {
    font-size: 38px;
}

/* NAV */
.rg-abt--tabs-nav .abt-nav-link {
    border: 1px solid #333;
    margin: 5px;
    border-radius: 30px;
    padding: 10px 20px;
    color: #aaa;
    transition: 0.3s;
    background: #000;
}

/* ACTIVE TAB */
.rg-abt--tabs-nav .abt-nav-link.active {
    background: #f5b942;
    color: #000;
    border-color: #f5b942;
}

/* HOVER */
.rg-abt--tabs-nav .abt-nav-link:hover {
    color: #fff;
    border-color: #f5b942;
}

/* IMAGE */
.rg-abt--tabs-img {
    border-radius: 15px;
    transition: 0.4s;
    height: 400px;
    width: 100%;
}

.rg-abt--tabs-img:hover {
    transform: scale(1.05);
}

/* TEXT */
.rg-abt--tabs p {
    color: #aaa;
    font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .rg-abt--tabs-title {
        font-size: 28px;
    }

    .rg-abt--tabs {
        text-align: center;
    }
}

/*--- Dark Mode ---*/

.dark-mode .rg-abt--tabs {
    background: #FFF;
    color: #000;
}

.dark-mode .rg-abt--tabs p {
    color: #666;
}

/*----- Our Mission & Vission END ------*/

/*----- Who We Are Start ---------*/

/* SECTION */
.v2-work-section {
    background: var(--background-color);
}

/* TITLE */
.v2-work-title {
    color: #FFF;
    font-size: 40px;
}

.v2-work-sub {
    color: #ccc;
}

/* CARD */
.v2-work-card {
    position: relative;
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
    background: #000;
    min-height: 220px;
    transition: 0.4s;
    color: #FFF;
}

/* VARIANTS */
.v2-work-card.light {
    background: #1a1919;
}

.v2-work-card.dark {
    background: #2b2b2b;
    color: #fff;
}

/* IMAGE (HIDDEN INITIALLY) */
.v2-work-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 0.5s;
}

.v2-work-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTENT */
.v2-work-content {
    position: relative;
    z-index: 2;
}

/* HOVER EFFECT */
.v2-work-card:hover .v2-work-img {
    opacity: 1;
}

/* DARK OVERLAY ON IMAGE */
.v2-work-card:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

/* TEXT COLOR ON HOVER */
.v2-work-card:hover {
    color: #fff;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v2-work-title {
        font-size: 28px;
    }

    .v2-work-card {
        padding: 25px;
    }
}

/*----- Who We Are End -----------*/

/*---------- testimonial Start ------------------------------------*/
/* SECTION */
.v2-test-section {
    background: #050505;
    color: #fff;
}

/* TITLE */
.v2-test-title {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
}

.v2-test-sub {
    color: #aaa;
}

/* CARD */
.v2-test-card {
    position: relative;
    border: 1px solid #333;
    padding: 25px;
    border-radius: 10px;
    background: #0d0d0d;
    transition: 0.4s;
}

/* HOVER */
.v2-test-card:hover {
    border-color: #f5b942;
    box-shadow: 0 0 20px rgba(245, 185, 66, 0.2);
}

/* STARS */
.v2-test-stars {
    color: #f5b942;
    font-size: 18px;
    margin-bottom: 10px;
}

/* TEXT */
.v2-test-text {
    font-size: 14px;
    color: #ccc;
}

/* USER */
.v2-test-user {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.v2-test-user img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
}

/* NAME */
.v2-test-user h6 {
    margin: 0;
}

.v2-test-user span {
    font-size: 12px;
    color: #aaa;
}

/* QUOTE ICON */
.v2-test-quote {
    position: absolute;
    right: 15px;
    bottom: 10px;
    font-size: 40px;
    color: #f5b942;
    opacity: 0.3;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v2-test-title {
        font-size: 28px;
    }
}

/*--- Dark Mode ---*/

.dark-mode .v2-test-section {
    background: #FFF;
    color: #000;
}

.dark-mode .v2-test-section p,
.dark-mode .v2-test-text {
    color: #666;
}

.dark-mode .v2-test-card span {
    color: #000;
}

.dark-mode .v2-test-stars,
.dark-mode .v2-test-quote {
    color: darkorange !important;
}

/*---------- testionial END ------------------------------------*/

/*---------- Our Team Section Start ----------*/

/* SECTION */
.v2-team-section {
    background: #000;
    color: #fff;
}

/* TITLE */
.v2-team-title {
    font-size: 38px;
}

.v2-team-sub {
    color: #aaa;
}

/* CARD */
.v2-team-card {
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: #111;
    transition: 0.4s;
}

/* IMAGE */
.v2-team-img {
    position: relative;
    margin-bottom: 15px;
}

.v2-team-img img {
    width: 100%;
    border-radius: 20px;
    filter: grayscale(100%);
    transition: 0.4s;
    height: 330px;
}

/* ROLE BADGE */
.v2-team-role {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #f5b942;
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    width: 150px;
}

/* HOVER EFFECT */
.v2-team-card:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.v2-team-card:hover {
    box-shadow: 0 0 20px rgba(245, 185, 66, 0.3);
}

/* TEXT */
.v2-team-card p {
    color: #aaa;
    font-size: 14px;
}

/* INFO */
.v2-team-info span {
    display: block;
    font-size: 13px;
    margin-top: 5px;
    color: #f5b942;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v2-team-title {
        font-size: 28px;
    }
}

/*---------- Our Team section End ------------*/

/*============= About.HTML End =================*/

/*============= Shop.HTML Start ================*/
/* SECTION */
.rg-sh-section {
    padding: 90px 10px;
    background: #0a0a0a;
    color: #fff;
}

/* TITLE */
.rg-sh-title {
    font-weight: 600;
}

/* NAV BUTTONS */
.rg-sh-btn {
    background: #111;
    border: 1px solid #333;
    color: #f5b942;
    padding: 6px 12px;
    margin-left: 5px;
    border-radius: 5px;
    transition: 0.3s;
}

.rg-sh-btn:hover {
    background: #f5b942;
    color: #000;
}

/* SLIDER */
.rg-sh-slider {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scroll-behavior: smooth;
    padding: 40px 10px;
}

.rg-sh-slider::-webkit-scrollbar {
    display: none;
}

/*---------- Shop Section Start --------*/
/* SLIDER */
.rg-sh-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.rg-sh-slider::-webkit-scrollbar {
    display: none;
}

/* CARD */
.rg-sh-card {
    flex: 0 0 calc(25% - 15px);
    /* 4 cards desktop */
    background: #151515;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    transition: 0.4s;
}

/* HOVER */
.rg-sh-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px #f5b942;
}

/* VINYL */
.rg-sh-vinyl {
    width: 150px;
    height: 150px;
    margin: auto;
}

.rg-sh-vinyl img {
    width: 100%;
    transition: 0.6s;
}

.rg-sh-card:hover .rg-sh-vinyl img {
    transform: rotate(180deg);
}

/* TEXT */
.rg-sh-curator {
    color: #f5b942;
    font-size: 13px;
}

.rg-sh-price {
    color: #f5b942;
    font-weight: bold;
    margin: 10px 0;
    display: block;
}

/* BUTTONS */
.rg-sh-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rg-sh-cart {
    border: 1px solid #f5b942;
    background: transparent;
    color: #f5b942;
    padding: 8px;
    border-radius: 6px;
}

.rg-sh-cart:hover {
    background: #f5b942;
    color: #000;
}

.rg-sh-buy {
    background: #f5b942;
    color: #000;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
}

/* TABLET (2 CARDS) */
@media (max-width: 991px) {
    .rg-sh-card {
        flex: 0 0 calc(50% - 10px);
    }
}

/* MOBILE (1 CARD) */
@media (max-width: 576px) {
    .rg-sh-card {
        flex: 0 0 100%;
    }
}

/*---------- Shop Section End --------*/


/* PRICE */
.rg-sh-card span {
    color: #f5b942;
    display: block;
    margin-bottom: 10px;
}

/* ACTIONS */
.rg-sh-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* BUTTONS */
.rg-sh-cart {
    background: transparent;
    border: 1px solid #f5b942;
    color: #f5b942;
    padding: 5px;
    border-radius: 5px;
}

.rg-sh-cart:hover {
    background: #f5b942;
    color: #000;
}

.rg-sh-buy {
    background: #f5b942;
    color: #000;
    border: none;
    padding: 5px;
    border-radius: 5px;
}

.rg-sh-buy:hover {
    background: #fff;
}


/*--- Staff Card Start ---*/
/* SECTION */
.sh-st-playlists {
    background: #0f0f0f;
    padding: 80px 0;
    color: #fff;
}

/* TITLE */
.sh-st-playlist-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
}

.sh-st-playlist-sub {
    color: #aaa;
}

/* CARD */
.sh-st-playlist-card {
    background: #151515;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    transition: 0.4s;
}

.sh-st-playlist-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px #f5b942;
}

.dark-mode .sh-st-playlist-card:hover {
    box-shadow: none;
}

/* VINYL */
.sh-st-vinyl {
    width: 150px;
    height: 150px;
    margin: 0 auto 15px;
}

.sh-st-vinyl img {
    width: 100%;
    transition: 0.6s;
}

.sh-st-playlist-card:hover .sh-st-vinyl img {
    transform: rotate(180deg);
}

/* TEXT */
.sh-st-curator {
    display: block;
    font-size: 13px;
    color: #f5b942;
}

.sh-st-price {
    display: block;
    margin: 10px 0;
    color: #f5b942;
    font-weight: bold;
}

/* BUTTONS */
.sh-st-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sh-st-cart {
    background: transparent;
    border: 1px solid #f5b942;
    color: #f5b942;
    padding: 8px;
    border-radius: 6px;
}

.sh-st-cart:hover {
    background: #f5b942;
    color: #000;
}

.sh-st-buy {
    background: #f5b942;
    color: #000;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
}

.sh-st-buy:hover {
    background: #fff;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .sh-st-playlist-title {
        font-size: 30px;
    }
}


.dark-mode .sh-st-playlists,
.dark-mode .rg-rare {
    background: #FFF;
    color: #000;
}

.dark-mode .dark-section-card .sh-st-price {
    color: #000;
}

.dark-mode .dark-section-card .sh-st-cart:hover,
.dark-mode .dark-section-card .sh-st-buy:hover {
    background: #000 !important;
    color: #FFF !important;
}

/*--- Staff Card End ----*/

/*--- Limited Offer Start ----*/
/* SECTION */
.rg-offer {
    background: linear-gradient(135deg, #0b0b0b, #111);
    padding: 80px 0;
    color: #fff;
}

/* IMAGE */
.rg-offer-img {
    max-width: 350px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    animation: rg-offer-spin 8s linear infinite;
    text-align: left;
}

/* SPIN ANIMATION */
@keyframes rg-offer-spin {
    from {
        transform: translateX(0px) rotate(0deg);
    }

    to {
        transform: translateX(0px) rotate(360deg);
    }
}

@media (max-width: 991px) {
    .rg-offer-img {
        animation: rg-offer-spin-mobile 8s linear infinite;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    .rg-offer {
        text-align: center;

    }

    .rg-offer-timer {
        justify-content: center;
    }

    @keyframes rg-offer-spin-mobile {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

/* TAG */
.rg-offer-tag {
    color: #d4af37;
    letter-spacing: 3px;
    font-size: 12px;
}

/* TITLE */
.rg-offer-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    margin: 15px 0;
}

/* TEXT */
.rg-offer-text {
    color: #aaa;
    margin-bottom: 20px;
}

/* PRICE */
.rg-offer-price {
    margin-bottom: 25px;
}

.rg-offer-price .old {
    text-decoration: line-through;
    color: #777;
    margin-right: 10px;
}

.rg-offer-price .new {
    color: #d4af37;
    font-size: 26px;
    font-weight: bold;
}

/* TIMER */
.rg-offer-timer {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.rg-offer-timer div {
    background: #1a1a1a;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    min-width: 70px;
}

.rg-offer-timer h4 {
    margin: 0;
    color: #d4af37;
}

.rg-offer-timer span {
    font-size: 12px;
    color: #aaa;
}

/* BUTTON */
.rg-offer-btn {
    background: #d4af37;
    color: #000;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

.rg-offer-btn:hover {
    background: #fff;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .rg-offer-title {
        font-size: 30px;
    }

    .rg-offer-img {
        margin-bottom: 30px;
    }
}

@media (max-width: 400px) {
    .rg-offer-timer {
        gap: 6px;
    }

    .rg-offer-timer div {
        flex: 1 1 45%;
        /* 2 per row */
        max-width: 100%;
        padding: 10px;
    }

    .rg-offer-timer h4 {
        font-size: 16px;
    }
}

/*--- Limited Offer End ------*/

/*--- Rare Find Start --------*/
/* SECTION */
.rg-rare {
    background: #0b0b0b;
    padding: 80px 0;
    color: #fff;
}

/* HEADER */
.rg-rare-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
}

.rg-rare-sub {
    color: #aaa;
}

.rg-rare-view {
    color: #d4af37;
    text-decoration: none;
}

/* CARD */
.rg-rare-card {
    background: #151515;
    padding: 20px;
    border-radius: 18px;
    text-align: center;
    position: relative;
    transition: 0.4s;
}

.rg-rare-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px #d4af37;
}

/* BADGE */
.rg-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #d4af37;
    color: #000;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
}

/* IMAGE */
.rg-rare-img {
    width: 140px;
    margin: auto;
}

.rg-rare-img img {
    width: 100%;
    transition: 0.6s;
}

.rg-rare-card:hover img {
    transform: rotate(180deg);
}

/* TEXT */
.rg-rare-artist {
    color: #d4af37;
    font-size: 13px;
    display: block;
    margin-bottom: 5px;
}

.rg-rare-price span {
    color: #d4af37;
    font-weight: bold;
    font-size: 18px;
}

/* BUTTONS */
.rg-rare-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rg-rare-actions button {
    border: 1px solid #d4af37;
    background: transparent;
    color: #d4af37;
    padding: 6px;
    border-radius: 6px;
}

.rg-rare-actions a {
    background: #d4af37;
    color: #000;
    padding: 6px;
    border-radius: 6px;
    text-decoration: none;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .rg-rare-title {
        font-size: 28px;
    }
}

.dark-mode .rg-rare p {
    color: #555;
}

.dark-mode .rg-rare-card:hover {
    box-shadow: none;
}

.dark-mode .rg-rare-price span {
    color: #000 !important;
}

/*--- Rare Find End ----------*/
/*============= Shop.HTML END ==================*/

/*============= Shop Detail.HTML Start =========*/

/* ---------------- PRODUCT SECTION ---------------- */
.rg-product-section {
    background: #000;
    color: #fff;
    padding: 80px 0;
}

/* IMPORTANT */
.container,
.row {
    overflow: visible;
}

/* STICKY IMAGE */
.rg-sticky-wrap {
    position: sticky;
    top: 100px;
    text-align: center;
    background: #3c3c3c;
    padding: 20px;
    border-radius: 10px;

}

.rg-sticky-wrap img {
    max-width: 400px;
    animation: rg-shop-spin 8s linear infinite;
}

/* SPIN ANIMATION */
@keyframes rg-shop-spin {
    from {
        transform: translateX(0px) rotate(0deg);
    }

    to {
        transform: translateX(0px) rotate(360deg);
    }
}

@media (max-width: 991px) {
    .rg-sticky-wrap img {
        animation: rg-shop-spin-mobile 8s linear infinite;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    @keyframes rg-shop-spin-mobile {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

/* CONTENT */
.rg-content h1 {
    font-size: 42px;
    font-weight: 700;
}

.rg-artist {
    color: #aaa;
    margin-bottom: 15px;
}

.rg-price {
    font-size: 28px;
    color: #d4af37;
    margin-bottom: 20px;
}

/* BUTTON */
.rg-main-btn {
    background: #d4af37;
    border: none;
    padding: 12px 25px;
    font-weight: bold;
    margin-bottom: 25px;
    margin-left: 20px;
    color: #000;
    border-radius: 10px;
    transition: .4s;
}

.rg-main-btn:hover {
    background: #FFF;
    color: #000;
}

/* DETAILS */
.rg-details p {
    color: #ccc;
}

.rg-details ul {
    padding-left: 18px;
}

/* ---------------- FLOAT BAR ---------------- */
.rg-floating-bar {
    position: fixed;
    bottom: -120px;
    left: 0;
    width: 100%;
    background: #111;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.4s;
    z-index: 999;
}

.rg-floating-bar.show {
    bottom: 0;
}

/* BAR LEFT */
.rg-bar-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFF;
}

.rg-bar-content img {
    width: 50px;
}

/* BAR RIGHT */
.rg-bar-action {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rg-bar-action span {
    color: #d4af37;
    font-weight: bold;
}



/* ---------------- NEXT SECTION ---------------- */
.rg-next {
    height: 500px;
    background: #111;
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 991px) {

    .rg-sticky-wrap {
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }

    .rg-content h1 {
        font-size: 28px;
    }

    .rg-content {
        text-align: center;
    }

    .rg-details ul {
        list-style: none;
        /* remove default dots */
        padding: 0;
        text-align: center;
    }

    .rg-details ul li::before {
        content: "•";
        margin-right: 8px;
    }
}

@media (max-width:575px) {
    .rg-floating-bar {
        display: none;
    }
}

/* ---------------- PLAY SECTION ---------------- */
.rg-sh-play-section {
    margin-top: 40px;
    background: #000;
}

/* CARD */
.rg-sh-play-card {
    background: #151515;
    border-radius: 15px;
    padding: 25px;
}

/* TOP */
.rg-sh-play-top {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* IMAGE */
.rg-sh-play-cover {
    width: 90px;
    border-radius: 10px;
}

/* INFO */
.rg-sh-play-info h3 {
    margin: 0;
    color: #fff;
}

.rg-sh-play-info p {
    color: #ccc;
}

/* BUTTON */
.rg-sh-play-btn {
    background: #1db954;
    border: none;
    padding: 8px 15px;
    margin-top: 10px;
    color: #000;
    font-weight: bold;
    border-radius: 20px;
}

/* LIST */
.rg-sh-play-list {
    margin-top: 20px;
}

/* TRACK */
.rg-sh-play-track {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    cursor: pointer;
    color: #fff;
    border-bottom: 1px solid #333;
    transition: 0.3s;
}

.rg-sh-play-track:hover {
    background: #222;
}

/* ACTIVE TRACK */
.rg-sh-play-track.active {
    background: #1db95420;
    border-left: 3px solid #1db954;
}

.dark-mode .rg-sh-play-card {
    background: #f3f3f3;
    border: 1px solid #909090;
    color: #000000 !important;
}

.rg-sh-play-card {
    color: #FFF;
}

.dark-mode .rg-sh-play-track span {
    color: #444;
}

.dark-mode .rg-sh-play-track:hover {
    background: #fff;
    color: #000;
}

.dark-mode .rg-sh-pair-section {
    background: #f3f3f3;
    border: 1px solid #909090;
    color: #000000 !important;
}

.dark-mode .rg-sh-pair-item:hover {
    background: #FFF;
    color: #000;
}

.dark-mode body {
    background: #FFF;
}

/* ---------------- PAIRINGS ---------------- */
.rg-sh-pair-section {
    background: var(--background-color);
    color: #fff;
    padding: 15px;
    border-radius: 10px;
}

/* HEADER */
.rg-sh-pair-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 20px;
}

.rg-sh-pair-header h3 {
    font-size: 26px;
}

/* LIST */
.rg-sh-pair-list {
    border: 1px solid #222;
    border-radius: 10px;
    overflow: hidden;
}

/* ITEM */
.rg-sh-pair-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #222;
    transition: 0.3s;
}

.rg-sh-pair-item:hover {
    background: #111;
}

.rg-sh-pair-item img {
    width: 70px;
}

/* INFO */
.rg-sh-pair-info {
    flex: 1;
}

.rg-sh-pair-info h5 {
    margin: 0;
    font-size: 16px;
}

/* META */
.rg-sh-pair-meta {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.rg-sh-pair-meta .price {
    font-weight: bold;
}

.rg-sh-pair-meta .old {
    text-decoration: line-through;
    color: #777;
}

.rg-sh-pair-meta .tag {
    border: 1px solid #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* BUTTON */
.rg-sh-pair-btn {
    background: transparent;
    border: none;
    color: #d4af37;
    font-weight: bold;
}

/* COLLAPSE */
.rg-sh-pair-list.hide {
    display: none;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 991px) {
    .rg-sh-play-top {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 576px) {

    .rg-sh-pair-item {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
    }

    .rg-sh-pair-btn {
        grid-column: 1 / -1;
        width: fit-content;
        text-align: center;
        border: 2px solid var(--gold-color);
        border-radius: 10px;
        justify-content: center;
        margin: auto;
        padding: 2px 25px;
    }
}

/*---- Related Vinly End -----*/


/*--------- FAQ Section Start ---------------*/
/* SECTION */
.rg-faq {
    background: #000;
    color: #fff;
    padding: 80px 0;
}

/* TITLE */
.rg-faq-title {
    font-size: 42px;
    margin-bottom: 40px;
}

/* ITEM */
.rg-faq-item {
    border-bottom: 1px solid #222;
    padding: 20px 0;
}

/* QUESTION */
.rg-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

/* ICON */
.rg-faq-question i {
    transition: 0.3s;
}

/* ANSWER */
.rg-faq-answer {
    max-height: 0;
    overflow: hidden;
    color: #aaa;
    transition: 0.4s ease;
    margin-top: 10px;
}

/* ACTIVE */
.rg-faq-item.active .rg-faq-answer {
    max-height: 200px;
}

.rg-faq-item.active i {
    transform: rotate(180deg);
}

.dark-mode .rg-faq {
    background: #FFF;
    color: #000;
}

.dark-mode .rg-faq-answer {
    color: #555;
}


/*--------- FAQ Section End -----------------*/

/*============= Shop Detsil.HTML End ===========*/

/*============= Blog.HTML Start==================*/

/* SECTION */
.rg-blog {
    background: #000;
    color: #fff;
}

/* FILTER */
.rg-blog-filter {
    display: flex;
    gap: 10px;
    justify-content: center;
    text-align: center;
}

.rg-blog-search {
    width: 400px;
    padding: 10px;
    background: #0f0f0f;
    border: 1px solid #222;
    color: #fff;
}

#categoryFilter {
    padding: 10px 20px;
    background: #0f0f0f;
    border: 1px solid #222;
    color: #fff;
    text-align: start;
}

/* CARD */
.rg-blog-card {
    background: #0f0f0f;
    padding: 15px;
    border-radius: 12px;
    transition: 0.3s;
    position: relative;
}

.rg-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* IMAGE */
.rg-blog-card img {
    width: 100%;
    height: 320px;
    border-radius: 10px;
    margin-bottom: 10px;
}


/* TEXT */
.rg-blog-card h5 {
    margin-top: 10px;
}

.rg-blog-card p {
    color: #aaa;
}

/* LINK */
.rg-blog-card a {
    color: #d4af37;
    text-decoration: none;
    font-weight: bold;
    transition: .4s;
}

.rg-blog-card a:hover {
    letter-spacing: 2px;
}

/* RESPONSIVE */
@media (max-width: 576px) {
    .rg-blog-filter {
        flex-direction: column;
    }
}

.rg-badge-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #d4af37;
    color: #000;
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.dark-mode .rg-blog {
    background: #e3e3e3;
}

.dark-mode .rg-blog-card {
    background: #f3f3f3;
    border: 1px solid #909090;
    color: #000;
}

.dark-mode .rg-blog-card p {
    color: #555 !important;
}

.dark-mode .rg-blog-card a {
    color: #d4af37 !important;
}

.dark-mode .rg-blog-card a:hover {
    letter-spacing: 2px;
}

.dark-mode .rg-blog-search {
    background: #ccc;
    color: #000;
    border-radius: 10px;

}

.dark-mode #categoryFilter {
    background: #ccc;
    color: #000;
    border-radius: 10px;
}

/*============= Blog.HTML END ===================*/

/*============= BLOG DETAILS START ==============*/
/* SECTION */
.rg-blog-detail-hero {
    background: #000;
    color: #fff;
    padding: 10px 0;
}

/* TITLE */
.rg-blog-detail-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    line-height: 1.3;
}

/* DATE */
.rg-blog-detail-date {
    color: #aaa;
    margin: 15px 0;
}

/* DIVIDER */
.rg-blog-divider {
    width: 60px;
    height: 2px;
    background: #d4af37;
    margin: 20px auto;
}

/* TEXT */
.rg-blog-detail-text {
    max-width: 700px;
    margin: auto;
    color: #ccc;
    line-height: 1.8;
    text-align: center;
}

/* IMAGE */
.rg-blog-detail-img {
    width: 100%;
    border-radius: 10px;
    background: #0f0f0f;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .rg-blog-detail-title {
        font-size: 32px;
    }
}


/* SECTION */
.rg-blog-detail-content {
    background: #000;
    color: #ccc;
    padding: 60px 0;
}

/* TEXT */
.rg-blog-detail-content p {
    max-width: 750px;
    margin: 0 auto 25px;
    line-height: 1.9;
    font-size: 16px;
    text-align: center;
}

/* QUOTE */
.rg-blog-quote {
    max-width: 750px;
    margin: 40px auto;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: #fff;
    font-style: italic;
    position: relative;
}

/* GOLD LINE */
.rg-blog-quote::before {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: #d4af37;
    margin: 0 auto 15px;
}

/* AUTHOR */
.rg-blog-quote span {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #d4af37;
}




/* SECTION */
.rg-blog-gallery {
    background: #000;
    padding: 0px 0;
}

/* GRID */
.rg-gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
}

/* RIGHT SIDE SPLIT */
.rg-gallery-grid .rg-gallery-item:nth-child(2),
.rg-gallery-grid .rg-gallery-item:nth-child(3) {
    height: 100%;
}

/* RIGHT COLUMN */
.rg-gallery-grid {
    grid-template-rows: auto auto;
}

/* ITEM */
.rg-gallery-item {
    overflow: hidden;
    border-radius: 10px;
    background: #0f0f0f;
}

/* LARGE LEFT */
.rg-large {
    grid-row: span 2;
}

/* IMAGE */
.rg-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

/* HOVER */
.rg-gallery-item:hover img {
    transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .rg-gallery-grid {
        grid-template-columns: 1fr;
    }

    .rg-large {
        grid-row: span 1;
    }
}



/* SECTION */
.rg-blog-detail-final {
    background: #000;
    padding: 60px 0;
    color: #ccc;
}

/* TEXT */
.rg-blog-detail-final p {
    max-width: 750px;
    margin: 0 auto 25px;
    line-height: 1.9;
    font-size: 16px;
    text-align: center;
}

/* LAST LINE */
.rg-blog-end-line {
    width: 60px;
    height: 2px;
    background: #d4af37;
    margin: 40px auto 0;
}

.dark-mode .rg-blog-detail-hero {
    background: #e3e3e3;
    color: #000;
}

.dark-mode .rg-blog-detail-date {
    color: #555;
}

.dark-mode .rg-blog-detail-hero p {
    color: #555;
}

.dark-mode .rg-blog-detail-content {
    background: #e3e3e3;
    color: #000;
}

.dark-mode .rg-blog-detail-content p {
    color: #555;
}

.dark-mode .rg-blog-quote {
    color: #000;
}

.dark-mode .rg-blog-detail-final,
.dark-mode .rg-blog-gallery {
    background: #e3e3e3;
    color: #000;
}

/*============= BLOG DETAILS END ================*/

/*============= CONTACT.HTML START ==============*/

.rg-contact-section {
    background: #000;
    color: #fff;
}

/* LEFT BOX */
.rg-contact-form-box {
    background: #0f0f0f;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* TEXT */
.rg-contact-subtitle {
    color: #d4af37;
    font-size: 14px;
    letter-spacing: 1px;
}

.rg-contact-title {
    font-size: 32px;
    font-weight: 600;
}

.rg-contact-desc {
    color: #aaa;
    max-width: 500px;
}

/* FORM */
.rg-contact-label {
    font-size: 13px;
    color: #bbb;
    margin-bottom: 5px;
}

.rg-contact-input {
    background: transparent;
    border: 1px solid #333;
    color: #fff;
    padding: 10px;
}

.rg-contact-input:focus {
    border-color: #d4af37;
    box-shadow: none;
    background: transparent;
    color: #fff;
}

.rg-contact-input::placeholder {
    color: #767676;
}

/* BUTTON */
.rg-contact-btn {
    background: transparent;
    background: #d4af37;
    color: #000;
    padding: 12px;
    border-radius: 50px;
    transition: 0.3s;
}

.rg-contact-btn:hover {
    background: #FFF;
    color: #000;
}

/* INFO */
.rg-contact-info-box h6 {
    margin-top: 10px;
    font-size: 14px;
}

.rg-contact-info-box p {
    font-size: 13px;
    color: #aaa;
}

.rg-contact-icon {
    font-size: 22px;
    color: #d4af37;
}

/* MAP */
.rg-contact-map iframe {
    border-radius: 6px;
}

.dark-mode .rg-contact-section {
    background: #e3e3e3;
    color: #000;
}

.dark-mode .rg-contact-subtitle {
    color: goldenrod !important;
}

.dark-mode .rg-contact-label {
    color: #000;
}

.dark-mode .dark-section-card .form-control {
    color: #000;
}

.dark-mode .rg-contact-btn {
    border: none;
}

.dark-mode .rg-contact-btn:hover {
    background: #000;
    color: #FFF;
}

.dark-mode .rg-contact-desc {
    color: #555;
}

.dark-mode .rg-contact-info-box p {
    color: #555;
}

/*================= CONTACT.HTML END ===============*/

/*------------ CTA SECTION ------------*/

/* SECTION */
.v1-cta-section {
    background: linear-gradient(135deg, #0a0a0a, #111);
    color: #fff;
}

/* TITLE */
.v1-cta-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
}

/* TEXT */
.v1-cta-text {
    color: #ddd;
    font-size: 14px;
    margin-top: 15px;
    max-width: 450px;
}

/* BUTTON WRAPPER */
.v1-cta-buttons {
    margin-top: 25px;
}

/* IMAGE */
.v1-cta-img-box {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(245, 185, 66, 0.15);
}

.v1-cta-img {
    transition: 0.5s;
}

/* IMAGE HOVER */
.v1-cta-img-box:hover .v1-cta-img {
    transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .v1-cta-title {
        font-size: 30px;
        text-align: center;
    }

    .v1-cta-text {
        text-align: center;
        margin: auto;
    }

    .v1-cta-buttons {
        text-align: center;
    }

    .v1-cta-img-box {
        display: none;
    }

    .v1-cta-section {
        background: linear-gradient(135deg, #0a0a0a9b, #111111ac), url('https://i.pinimg.com/736x/31/be/0b/31be0b7fc85a3453d869aa9f87afae30.jpg') left center /cover no-repeat;
    }

    .dis-no {
        display: none;
    }
}

/*--- RTL  ---*/

.rtl-toggle {
    font-size: 22px;
    cursor: pointer;
    transition: .3s;
    color: #FFF;
}

.rtl-toggle:hover {
    transform: scale(1.1);
}

/* RTL NAVBAR ONLY */
.custom-navbar.rtl-mode {
    direction: rtl;
}

/* Fix center menu */
.custom-navbar.rtl-mode .nav-center {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Fix nav links spacing */
.custom-navbar.rtl-mode .nav-link {
    flex-direction: row-reverse;
}

/* Fix dropdown alignment */
.custom-navbar.rtl-mode .dropdown-menu {
    text-align: right;
}

/* Fix icons spacing */
.custom-navbar.rtl-mode .nav-link i {
    margin-left: 0;
    margin-right: 6px;
}

.custom-navbar.rtl-mode .login-btn {
    margin-left: 0 !important;
    margin-right: 15px;
}

.custom-navbar.rtl-mode .dark-mode-toggle,
.custom-navbar.rtl-mode .rtl-toggle {
    margin-right: 0;
    margin-left: 15px;
}

.custom-navbar.rtl-mode .nav-link {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.custom-navbar.rtl-mode .dropdown-menu {
    text-align: right;
    left: auto !important;
    right: 0 !important;
}

@media (max-width: 991px) {

    .nav-center {
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        text-align: left;
    }

    /* RTL fix */
    .custom-navbar.rtl-mode .nav-center {
        text-align: right;
    }

}

@media (max-width: 991px) {

    .navbar-collapse {
        padding: 20px 0;
    }

    .custom-navbar.rtl-mode .navbar-collapse {
        text-align: right;
    }

}

@media (max-width: 991px) {

    .navbar-nav {
        gap: 10px;
    }

    .nav-link {
        display: block;
        width: 100%;
    }

}

@media (max-width: 991px) {

    /* STOP RTL affecting login button */
    .custom-navbar.rtl-mode .login-btn {
        direction: ltr !important;
        text-align: center !important;
        width: 100%;
    }

}

@media (max-width: 991px) {

    .custom-navbar.rtl-mode .login-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}


.custom-navbar.rtl-mode {
    direction: rtl;
}

/* FIX FLEX ORDER (IMPORTANT) */
.custom-navbar.rtl-mode .nav-center {
    direction: rtl;
}

.custom-navbar.rtl-mode .navbar-nav {
    text-align: right;
}


.custom-navbar {
    position: fixed;
    width: 100%;
}

/* Ensure always visible */
.custom-navbar.rtl-mode {
    background: var(--navbar-color);
}


@media (max-width: 900px) {
    .custom-navbar.rtl-mode .login-btn {
        direction: ltr;
        text-align: center;
    }
}