:root {
            --primary-white: #ffffff;
            --primary-blue: #1e3c72;
            --accent-red: #ff4b5c;
            --accent-yellow: #ffcc00;
            --accent-orange: #ff9e00;
            --text-dark: #222222;
            --text-gray: #666666;
            --gradient-blue-red: linear-gradient(135deg, #1e3c72, #ff4b5c);
            --gradient-blue-orange: linear-gradient(135deg, #1e3c72, #ff9e00);
            --gradient-bluenavy-subtle: linear-gradient(135deg, #0b132b, #1c2541);
            --gradient-bluenavy-modern: linear-gradient(180deg, #f7f7f7ff, #96d3ffff);
            --gradient-bluenavy-electric: linear-gradient(145deg, #020617, #0b2a4a, #1e90ff);
        }

        body {
            font-family: 'Montserrat', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--primary-white);
            color: var(--text-dark);
            overflow-x: hidden;
            width: 100%; /* Ensure body doesn't exceed viewport */
            box-sizing: border-box; /* Include padding/border in width calculation */
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        /* Custom Bootstrap Overrides */
        .btn-primary {
            background: var(--gradient-bluenavy-subtle);
            border: none;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 0.75rem 1.5rem;
            border-radius: 30px;
        }

        .btn-primary:hover {
            color: white;
            background: var(--gradient-bluenavy-electric);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(30, 60, 114, 0.3);
        }

        .btn-outline {
            background: transparent;
            color: var(--primary-blue);
            border: 2px solid var(--primary-blue);
            padding: 0.75rem 1.5rem;
            border-radius: 30px;
        }

        .btn-outline:hover {
            background: var(--primary-blue);
            color: var(--primary-white);
        }

        .nav-link {
            color: var(--primary-white) !important;
            font-weight: 600;
            position: relative;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--accent-yellow) !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            /* background: var(--primary-white); */
            transition: all 0.3s ease;
        }

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

        /* Navbar Sticky Effect */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
            padding: 15px 0;
        }

        .navbar-sticky {
            background: rgba(30, 60, 114, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-sticky .navbar-brand h1 {
            background: var(--gradient-bluenavy-modern) ;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Original navbar styles for non-sticky state */
        .navbar:not(.navbar-sticky) {
            background: transparent;
        }

        /* Hero Section */
        /* Tulisan Di Kiri Start */
        /* .hero-section {
            background: var(--gradient-bluenavy-electric);
            padding: 0 0 100px;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            z-index: 1;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('./images/mastering.png');
            background-size: 140% auto;
            background-position: 10% center;
            background-repeat: no-repeat;
            opacity: .25;
            z-index: -1;
        }

        .hero-title {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary-white);
            font-weight: 700;
        }

        .logo-horizontal {
            max-width: 70%;
            height: auto;
            width: auto;
            margin-bottom: 1.5rem;
            display: block;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            color: rgba(255, 255, 255, 0.9);
            max-width: 500px;
        } */
        /* Tulisan Di Kiri End */

        /* Tulisan Di Tengah CSS Start */
        .hero-section {
            background: 
                var(--gradient-bluenavy-electric),
                #081b2e;
            padding: 0 0 100px;
            position: relative;
            z-index: 1;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: var(--hero-bg-url);
            background-size: 180% auto;
            background-position: 25% center;
            background-repeat: no-repeat;
            opacity: .25;
            z-index: -1;
        }

        .hero-content {
            display: flex;
            flex-direction: column;
            justify-content: center; 
            align-items: center;      
            height: 100%;       
            width: 75%;       
        }

        .hero-title {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: var(--primary-white);
            font-weight: 700;
        }

        .logo-horizontal {
            max-width: 80%;
            height: auto;
            width: auto;
            margin-bottom: 1.5rem;
            display: block;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            color: rgba(255, 255, 255, 0.9);
            max-width: 530px;
            text-align: center;
        }

        /* Tulisan Di Tengah CSS End */

        /* .record-visual {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            position: relative;
            transition: all .3s ease;
        }

        .record-visual:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
        }

        .banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            transition: transform .3s ease;
        }

        .record-visual:hover .banner-image {
            transform: scale(1.03);
        } */

        /* Spotify Modal Styling */
        .modal-content {
            border-radius: 15px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .modal-header {
            border-bottom: none;
            padding: 1.5rem 1.5rem 0 1.5rem;
        }

        .modal-title {
            font-weight: 700;
            color: var(--primary-blue);
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .btn-close {
            width: 20px;
            height: 20px;
            opacity: 0.6;
        }

        .btn-close:hover {
            opacity: 1;
        }

        .modal-body {
            padding: 0 1.5rem 1.5rem 1.5rem;
        }

        .spotify-embed-container {
            position: relative;
            padding-bottom: 60%; /* Maintain aspect ratio */
            height: 0;
            overflow: hidden;
        }

        .spotify-embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
            border-radius: 10px;
        }

        .modal-footer {
            border-top: none;
            padding: 0 1.5rem 1.5rem 1.5rem;
        }

        .btn-secondary {
            background: var(--primary-blue);
            border: none;
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 30px;
        }

        .btn-secondary:hover {
            background: var(--accent-red);
            transform: translateY(-2px);
        }

        /* Featured Artists Section */

        .featured-artists .container {
            max-width: 100%; 
            width: 100%; 
            padding: 0 15px;
        }

        .featured-artists .container .section-header {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .featured-artists {
            padding: 80px 0;
            background-color: var(--primary-white);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3rem;
        }

        .section-title {
            font-size: 2rem;
            margin-bottom: 0;
            position: relative;
            padding-bottom: 1rem;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 255px;
            height: 3px;
            background: #026ad3;
        }

        .section-title.latest-releases::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 235px;
            height: 3px;
            background: #026ad3;
        }

        .section-title.best-releases::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 220px;
            height: 3px;
            background: #026ad3;
        }

        .view-all {
            color: var(--primary-blue);
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .view-all:hover {
            color: var(--accent-red);
        }

        /* Artist Carousel */
        .artist-carousel {
            position: relative;
            overflow: hidden;
        }

        .carousel-item {
            padding: 15px 15px;
        }

        .carousel-inner {
            padding: 15px 0;
        }

    .artist-card {
        background: var(--primary-white);
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        display: flex;
        height: 300px;
        margin-bottom: 25px;
    }

    .artist-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    .artist-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .artist-image img {
        width: 100%;
        height: 100%;
        /* object-fit: fill;  */
        object-fit: cover; 
        object-position: center;
        /* display: block;
        user-select: none;
        pointer-events: none; */
    }
    
    .artist-info {
        width: 50%;
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .artist-info h3 {
        margin-bottom: 0.5rem;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .genre {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        font-size: .75rem;
        font-weight: 600;
        color: var(--primary-blue);
        margin: .5rem 0;
    }

    .genre p {
        margin: 0;
        line-height: 1.3;
        display: flex;
        align-items: center;
    }

    /* Optional: add subtle label emphasis */
    .genre p strong,
    .genre p:first-child {
        font-weight: 600;
        color: #555;
    }

    .artist-description {
        height: 100px;
        margin-bottom: 1.5rem;
        color: var(--text-gray);
        font-size: 0.95rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .btn-view-profile {
        width: auto;
        text-align: center;
        border: 2px solid var(--primary-blue);
        color: var(--primary-blue);
        padding: 0.5rem 1rem;
        border-radius: 30px;
        transition: all 0.3s ease;
        font-size: 0.75rem;
    }

    .btn-view-profile:hover {
        background: var(--primary-blue);
        color: var(--primary-white);
    }

    /* Carousel Controls - Positioned outside */
    .carousel-control-prev,
    .carousel-control-next {
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        opacity: 0.8;
        transition: all 0.3s ease;
        position: absolute;
        top: 50%;
    }

    .carousel-control-prev {
        left: 15px;
    }

    .carousel-control-next {
        right: 15px;
    }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        opacity: 1;
        background: var(--primary-white);
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 20px;
        height: 20px;
        background-image: none;
        color: var(--primary-blue);
    }

    .carousel-indicators {
        bottom: -30px;
    }

    .carousel-indicators button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--text-gray);
        opacity: 0.5;
        transition: all 0.3s ease;
    }

    .carousel-indicators button.active {
        background: var(--primary-blue);
        opacity: 1;
    }

    /* Thin Line Carousel Indicators */
    .carousel-indicators {
        bottom: 10px; /* Position closer to bottom */
        margin-bottom: 0;
    }

    .carousel-indicators [data-bs-target] {
        width: 40px; /* Length of the line */
        height: 3px; /* Thickness of the line */
        border-radius: 0; /* Remove rounded corners for clean lines */
        background-color: rgba(133, 131, 131, 0.5); /* Semi-transparent white */
        border: none;
        margin: 0 5px; /* Spacing between indicators */
        transition: all 0.3s ease;
    }

    /* Active indicator - fully opaque and slightly longer */
    .carousel-indicators .active {
        background-color: white; /* Full white when active */
        width: 50px; /* Slightly longer when active */
        transform: scaleX(1.25); /* Subtle scale effect */
    }

    /* Hover effect (optional) */
    .carousel-indicators [data-bs-target]:hover {
        background-color: rgba(83, 83, 83, 0.8);
        width: 45px;
    }


    /* Releases Section */
    .releases-section {
        padding: 80px 0;
        background-color: #f8f9fa;
    }

    .releases-section .container {
        padding: 0 15px;
        max-width: 1400px;
    }

    .release-card {
        background: var(--primary-white);
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .release-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    .album-cover {
        height: 300px;
        min-height: 300px;
        overflow: hidden;
        position: relative;
    }

    .album-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image covers entire area without distortion */
        object-position: center; /* Centers the image */
        display: block;
        transition: transform 0.3s ease;
    }

    .release-card:hover .album-image {
        transform: scale(1.05);
    }

    .placeholder-cover {
        width: 100%;
        height: 100%;
        background: var(--gradient-bluenavy-electric);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-white);
    }

    .release-info {
        padding: 1.5rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .release-info .artist {
        color: var(--text-gray);
        margin-bottom: 0.3rem;
        font-size: 1.1rem;
    }

    .release-info .year {
        color: rgb(38, 38, 212);
        font-weight: 600;
        margin-bottom: 1rem;
        font-size: 1rem;
    }

    /* About Section */
    .about-section {
        padding: 80px 0;
        background-color: var(--primary-white);
    }

    .stats {
        display: flex;
        gap: 2rem;
        margin: 2rem 0;
    }

    .stat {
        text-align: center;
    }

    .stat .number {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        background: var(--gradient-bluenavy-electric);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0.5rem;
    }

    .stat .label {
        color: var(--text-gray);
        font-size: 0.9rem;
    }

    .about-image {
        height: auto;
        min-height: 300px;
        border-radius: 15px;
        overflow: visible;
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
    }

    .about-image img {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: contain;
        border-radius: 15px;
        display: block;
    }

    .placeholder-studio {
        width: 100%;
        height: 100%;
        background: var(--gradient-bluenavy-electric);
    }

    /* Newsletter Section */
    .newsletter-section {
        padding: 60px 0;
        background: #0b2a4a;
        color: var(--primary-white);
    }

    .newsletter-section h2 {
        margin-bottom: 0.5rem;
        color: var(--primary-white);
        text-align: center;
    }

    /* .newsletter-section .col-md-6:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    } */

    /* .newsletter-form .form-control {
        border-radius: 30px;
        padding: 0.75rem 1.5rem;
        border: none;
    } */

    /* Contact Section */
    .contact-section {
        padding: 80px 0;
        background-color: var(--primary-white);
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 16px;
        font-size: 1rem;
    }

    .contact-item i {
    font-size: 1.25rem; /* ~20px */
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    }

    .contact-item span {
        color: var(--text-gray);
    }

    .social-links {
        display: flex;
        gap: 14px;
    }

    .social-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem; /* slightly bigger for visibility */
        color: inherit;
        transition: color 0.2s;
    }

    .social-links a:hover i.bi-instagram { color: #E1306C; }
    .social-links a:hover i.bi-spotify  { color: #1ED760; }
    .social-links a:hover i.bi-youtube  { color: #FF0000; }
    .social-links a:hover i.bi-facebook { color: #0045a0; }

    .form-control, .form-select {
        border: 1px solid #dddddd;
        padding: 0.75rem;
        border-radius: 5px;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 0.2rem rgba(30, 60, 114, 0.1);
    }

    /* Footer */
    .footer {
        background: #f8f9fa;
        padding: 40px 0 20px;
        border-top: 1px solid rgba(30, 60, 114, 0.1);
    }

    .footer-logo h2 {
        color: var(--primary-blue);
        margin-bottom: 0.5rem;
        background: var(--gradient-blue-red);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
    }

    .footer-links a {
        color: var(--text-dark);
        text-decoration: none;
        transition: all 0.3s ease;
        margin-right: 1.5rem;
    }

    .footer-links a:hover {
        color: var(--primary-blue);
    }

    .copyright {
        text-align: center;
        padding-top: 20px;
        color: var(--text-gray);
        font-size: 0.9rem;
        border-top: 1px solid rgba(30, 60, 114, 0.1);
    }

    /* Responsive Adjustments */

    @media (max-width: 1199px) {

        .hero-title {
            font-size: 2.6rem;
        }

        .hero-subtitle {
            font-size: 1.15rem;
            max-width: 480px;
        }

        .hero-content {
            width: 80%;
        }

        .logo-horizontal {
            width: 500px;
        }

        .modal-content {
            max-width: 90vw;
            margin: 1rem auto;
        }

        .modal-title {
            font-size: 1.4rem;
            margin-bottom: 10px;
        }

        .modal-header,
        .modal-body,
        .modal-footer {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }

        .btn-view-profile {
            font-size: .7rem;
            padding: 0.4rem 0.8rem;
            width: auto;
        }

        .featured-artists .btn-view-profile {
            font-size: .6rem;
            padding: .5rem .5rem;
            width: auto;
        }

        .featured-artists .container .section-header {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            text-align: center;
        }

        .featured-artists .container {
            max-width: 1200px;
            width: 100%;
            padding: 0;
        }

        .artist-card {
            height: 300px;
            display: flex;
            flex-direction: row;
            margin-bottom: 25px;
        }

        .artist-image {
            width: 80%;
            height: 100%;
            overflow: hidden;
        }

        .artist-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .artist-info {
            width: 100%;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .artist-info h3 {
            font-size: 1.5rem;
        }

        .featured-artists .artist-info h3 {
            font-size: 1rem;
        }

        .genre {
            display: flex;
            flex-direction: column;
            gap: .25rem;
            font-size: .7rem;
            font-weight: 600;
            color: var(--primary-blue);
            margin: .5rem 0;
        }

        .genre p {
            margin: 0;
            line-height: 1.3;
            display: flex;
            align-items: center;
        }

        /* Optional: add subtle label emphasis */
        .genre p strong,
        .genre p:first-child {
            font-weight: 600;
            color: #555;
        }

        .release-card {
            min-width: 240px;
        }
    }

    @media (max-width: 991px) {

        .hero-section::before {
            background-size: cover;
            background-position: center;
            opacity: 0.22;
        }

        .hero-title {
            font-size: 2.3rem;
        }

        .hero-subtitle {
            font-size: 1.1rem;
            max-width: 450px;
        }

        .logo-horizontal {
            max-width: 85%;
        }

        .hero-content {
            width: 85%;
        }

        .logo-horizontal {
            width: 400px;
        }

        .modal-content {
            max-width: 95vw;
            margin: .8rem auto;
            border-radius: 12px;
        }

        .modal-title {
            font-size: 1.3rem;
            margin-bottom: 10px;
        }

        .modal-header,
        .modal-body,
        .modal-footer {
            padding: 1rem;
        }

        .spotify-embed-container {
            padding-bottom: 58%;
        }

        .btn-view-profile {
            width: auto;
            padding: .6rem 1.2rem;
            font-size: .9rem;
        }

        .featured-artists .container .section-header {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .featured-artists .container {
            max-width: 900px;
            width: 95%;
            padding: 0 20px;
        }

        .artist-card {
            height: 350px;
            display: flex;
            flex-direction: row;
        }        

        .artist-image {
            width: 50%;
            height: 100%;
        }

        .artist-info {
            width: 65%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        
        .artist-info h3 {
            font-size: 1.5rem;
        }

        .genre {
            display: flex;
            flex-direction: column;
            gap: .25rem;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--primary-blue);
            margin: .5rem 0;
        }

        .genre p {
            margin: 0;
            line-height: 1.3;
            display: flex;
            align-items: center;
        }

        /* Optional: add subtle label emphasis */
        .genre p strong,
        .genre p:first-child {
            font-weight: 600;
            color: #555;
        }
        
        .artist-description {
            font-size: 0.9rem;
        }
    }



    @media (max-width: 768px) {

        .hero-section::before {
            background-size: cover;
            background-position: center;
            opacity: 0.2;
        }

        .hero-title {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .hero-subtitle {
            font-size: 1rem;
            margin-bottom: 1.75rem;
            max-width: 420px;
        }

        .logo-horizontal {
            max-width: 90%;
            margin-bottom: 1.25rem;
        }

        .hero-content {
            width: 90%;
            padding: 0 15px;
        }

        .logo-horizontal {
            width: 400px;
        }

        .modal-content {
            max-width: 100vw;
            margin: 0;
            border-radius: 0;
            height: 100vh; /* Full height on mobile */
            display: flex;
            flex-direction: column;
        }
        
        .modal-dialog {
            margin: 0;
            max-width: 100vw;
            height: 100vh;
        }
        
        .modal-header {
            padding: 1rem;
            text-align: center;
        }
        
        .modal-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }
        
        .modal-body {
            padding: 0 1rem 1rem 1rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .spotify-embed-container {
            padding-bottom: 60%; /* Taller on mobile */
            flex: 1;
        }
        
        .modal-footer {
            padding: 0 1rem 1rem 1rem;
        }

        body {
            padding-top: 70px;
        }

        .navbar-brand h1 {
            background: var(--gradient-bluenavy-modern);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .navbar:not(.navbar-sticky) {
            background: #081b2e;
        }
        
        .hero-title {
            font-size: 2.2rem;
        }
        
        .hero-content .text-center {
            text-align: left 
        }
        
        .section-header {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
        
        .stats {
            flex-wrap: wrap;
        }

        .featured-artists .container .section-header {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .featured-artists .container {
            width: 100%;
            max-width: 100%;
            padding: 0;
        }
        
        .artist-card {
            height: 180px;
            display: flex;
            flex-direction: row;
            width: 100%; /* Full width */
        }

        .artist-info {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: calc(100% - 120px); /* Account for image width */
        }

        .artist-info h3 {
            font-size: 1.2rem;
        }

        .genre {
            display: flex;
            flex-direction: column;
            gap: .25rem;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--primary-blue);
            margin: .5rem 0;
        }

        .genre p {
            margin: 0;
            line-height: 1.3;
            display: flex;
            align-items: center;
        }

        /* Optional: add subtle label emphasis */
        .genre p strong,
        .genre p:first-child {
            font-weight: 600;
            color: #555;
        }

        .btn-view-profile {
            width: auto;
            padding: .5rem 1rem;
            font-size: .85rem;
            align-self: stretch;
        }
        
        .artist-image {
            width: 120px;
            height: 100%;
        }
                
        .carousel-control-prev,
        .carousel-control-next {
            width: 40px;
            height: 40px;
        }

        .album-cover {
            height: 250px;
            min-height: 250px;
        }
    }


@media (max-width: 576px) {

    .hero-section {
        min-height: 100vh;
        padding-bottom: 70px;
    }

    .hero-section::before {
        background-size: cover;        
        background-position: center;   
        opacity: 0.18;
    }

    .hero-title {
        font-size: 1.9rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
        max-width: 380px;
    }

    .logo-horizontal {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .hero-content {
        width: 100%;
        padding: 0 20px;
    }

    .modal-content {
        border-radius: 0;
    }
    
    .modal-title {
        font-size: 1.1rem;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.8rem;
    }
    
    .spotify-embed-container {
        padding-bottom: 65%; /* Even taller on small screens */
    }

    html, body {
        /* padding-top: 60px; */
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .navbar-brand h1 {
        background: var(--gradient-bluenavy-modern);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .carousel-inner {
        padding: 15px 0;
    }

    .navbar {
        overflow-x: hidden;
    }

    .navbar:not(.navbar-sticky) {
        background: #081b2e;
    }

    .featured-artists .container {
        padding: 0 0px; 
        width: 100%;
        max-width: 100%;
    }

    /* Make artist cards vertical and square */
    .artist-card {
        height: auto;
        aspect-ratio: 1/1;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Make image take appropriate space in vertical layout */
    .artist-image {
        width: 100%;
        height: 60%;
    }

    /* Adjust info section for vertical layout */
    .artist-info {
        padding: 0.8rem;
        height: 40%; /* Take remaining 40% of card height */
        width: 100%; /* Full width */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .artist-info h3 {
        font-size: .8rem;
    }

    .genre {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        font-size: .75rem;
        font-weight: 600;
        color: var(--primary-blue);
        margin: .5rem 0;
    }

    .genre p {
        margin: 0;
        line-height: 1.3;
        display: flex;
        align-items: center;
    }

    /* Optional: add subtle label emphasis */
    .genre p strong,
    .genre p:first-child {
        font-weight: 600;
        color: #555;
    }
    
    .artist-description {
        font-size: 0.8rem;
        display: none; /* Hide description on smallest screens to save space */
    }
    
    .btn-view-profile {
        width: 100%; /* Full width button */
        font-size: 0.75rem; /* Reduced from 1rem */
        padding: 0.4rem 0.8rem;
        text-align: center;
        align-self: stretch;
    }
    
    .featured-artists .btn-view-profile {
        width: 100%; /* Full width button */
        font-size: 0.75rem; /* Reduced from 1rem */
        padding: .6rem 0.8rem;
        text-align: center;
        align-self: stretch;
    }
    
    .stats {
        gap: 1rem;
    }

    .album-cover {
        height: 200px;
        min-height: 200px;
    }

    .releases-section .container {
        padding: 0 10px;
    }
}