:root{
--orange:#e86d1f;
--black:#050505;
--white:#ffffff;
}

html{
    scroll-behavior:smooth;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:Arial,Helvetica,sans-serif;
background:var(--black);
color:var(--white);
line-height:1.6;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* ======================
   NAVBAR
====================== */

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(0,0,0,.92);
backdrop-filter:blur(10px);
z-index:9999;
border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-container{
max-width:1400px;
margin:auto;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo-area{
display:flex;
align-items:center;
text-decoration:none;
color:#fff;
transition:.3s ease;
}

.logo-area:hover{
transform:scale(1.03);
}

.logo-area img{
width:60px;
margin-right:15px;
}

.logo-text{
display:flex;
flex-direction:column;
}

.logo-title{
font-size:16px;
font-weight:700;
}

.nav-links{
display:flex;
gap:30px;
}

.nav-links a{
color:#fff;
text-decoration:none;
font-weight:600;
font-size:14px;
text-transform:uppercase;
transition:.3s;
}

.nav-links a:hover{
color:var(--orange);
}

.nav-links a.active{
color:var(--orange);
position:relative;
}

.nav-links a.active::after{
content:'';
position:absolute;
left:0;
bottom:-8px;
width:100%;
height:2px;
background:var(--orange);
border-radius:2px;
}

/* HAMBURGER MENU */

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
    transition:.3s;
}

/* ======================
   HERO
====================== */

.hero{
min-height:100vh;
padding-top:90px;
padding-bottom:120px;
position:relative;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
overflow:hidden;
}

.hero .container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

.hero::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url('../images/hero/hero-08-oasis-lab-night.jpg') center center/cover no-repeat;
animation:kenburns 45s ease-in-out infinite alternate;
transform-origin:center center;
z-index:0;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.80)
);
z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding-top:40px;
}


.hero-logo{
    display:block;
    width:250px;
    max-width:90%;
    margin:0 auto;
    filter:drop-shadow(0 0 20px rgba(0,0,0,.4));
}

.hero h1{
font-size:4rem;
margin-top:0;
margin-bottom:15px;
   line-height:1;
}

.hero h2{
font-size:1.6rem;
color:var(--orange);
margin-bottom:25px;
}

.hero p{
font-size:1.15rem;
max-width:800px;
margin:auto;
line-height:1.8;
}

.hero-buttons{
margin-top:35px;
}

/* ======================
   BUTTONS
====================== */

.btn-primary{
display:inline-block;
background:var(--orange);
color:#fff;
padding:15px 30px;
text-decoration:none;
border-radius:6px;
font-weight:700;
transition:.3s;
}

.btn-primary:hover{
opacity:.9;
}

.btn-secondary{
display:inline-block;
border:2px solid var(--orange);
color:#fff;
padding:13px 30px;
text-decoration:none;
border-radius:6px;
font-weight:700;
margin-left:10px;
transition:.3s;
}

.btn-secondary:hover{
background:var(--orange);
}

/* ======================
   SECTIONS
====================== */


.about,
.latest-releases,
.artists,
.numbers,
.projects{
padding:60px 0;
}

.about,
.latest-releases{
text-align:center;
}

.about h2,
.latest-releases h2,
.artists h2,
.numbers h2,
.projects h2{
text-align:center;
margin-bottom:25px;
font-size:2.2rem;
line-height:1.2;
}

/* ======================
   RELEASES
====================== */

.coming-soon{
max-width:800px;
margin:auto;
background:#111;
padding:60px;
border-radius:15px;
border:1px solid rgba(255,255,255,.05);
}

.coming-soon h3{
color:var(--orange);
margin-bottom:20px;
}

/* ======================
   ARTISTS
====================== */

.artist-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.artist-card{
background:#111;
border-radius:12px;
overflow:hidden;
transition:.35s ease;
cursor:pointer;
}

.artist-card:hover{
transform:translateY(-8px);
box-shadow:0 0 25px rgba(232,109,31,.25);
}

.artist-card img{
width:100%;
height:420px;
object-fit:cover;
display:block;
}

.artist-info{
padding:25px;
text-align:center;
}

.artist-info h3{
margin-bottom:15px;
font-size:1.5rem;
}

.artist-info h3 a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.artist-info h3 a:hover{
    color:#e86d1f;
}

.artist-country{
color:#d0d0d0;
font-size:16px;
margin-bottom:10px;
}

.artist-genre{
color:var(--orange);
font-size:15px;
margin-bottom:15px;
}

.artist-link{
display:inline-block;
color:var(--orange);
text-decoration:none;
font-weight:700;
transition:.3s;
}

.artist-link:hover{
color:#fff;
}

/* ======================
   NUMBERS
====================== */

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
text-align:center;
}

.stat{
background:#111;
padding:40px;
border-radius:12px;
}

.stat span{
display:block;
font-size:3rem;
font-weight:700;
color:var(--orange);
margin-bottom:10px;
}

/* ======================
   DEMO
====================== */

.demo-section{
text-align:center;
padding:120px 20px;
background:#0f0f0f;
}

/* ======================
   FOOTER
====================== */

footer{
    background:#000;
    padding:40px 20px;
    text-align:center;
}

footer h3{
    margin-bottom:10px;
}

footer p{
    margin-bottom:6px;
}

footer a{
    color:var(--orange);
    text-decoration:none;
}

.footer-logo{
    width:110px;
    margin-bottom:12px;
}

.footer-location{
    margin-bottom:15px;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:20px;
}

.footer-socials{
    margin-top:15px;
    margin-bottom:15px;
}

.footer-copyright{
    margin-top:15px;
}

/* ======================
   PROJECTS
====================== */

.projects{
padding:100px 0;
background:#090909;
text-align:center;
}

.about p,
.projects-intro{
max-width:800px;
margin:0 auto 30px;
font-size:1.05rem;
line-height:1.8;
color:#cfcfcf;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.project-card{
background:#111;
padding:35px;
border-radius:12px;
border:1px solid rgba(255,255,255,.05);
transition:.3s;
}

.project-card:hover{
transform:translateY(-5px);
border-color:var(--orange);
}

.project-card h3{
margin-bottom:10px;
}

.project-card span{
display:inline-block;
color:var(--orange);
font-weight:700;
margin-bottom:15px;
}

@keyframes kenburns{

0%{
transform:scale(1);
}

100%{
transform:scale(1.12);
}

}

.page-hero{
padding:140px 0 60px;
text-align:center;
background:#090909;
}

.page-hero h1{
font-size:3rem;
margin-bottom:20px;
}

.page-hero p{
max-width:800px;
margin:auto;
color:#cfcfcf;
}

.artists-page{
padding:80px 0;
}

.artist-profile{
display:grid;
grid-template-columns:350px 1fr;
gap:60px;
margin-bottom:80px;
align-items:center;
scroll-margin-top:140px;
}

.artist-details{
max-width:700px;
width:100%;
padding-right:40px;
}

.artist-photo img{
width:100%;
border-radius:12px;
display:block;
}

.artist-role{
display:block;
color:var(--orange);
font-weight:700;
margin-top:5px;
margin-bottom:10px;
}

.artist-meta{
color:var(--orange);
font-weight:600;
margin-bottom:20px;
}

.artist-links{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:25px;
}

.artist-links a{
padding:10px 18px;
border:1px solid var(--orange);
border-radius:6px;
text-decoration:none;
color:#fff;
transition:.3s;
}

.artist-links a:hover{
background:var(--orange);
}


/* ======================
   FEATURED RELEASE
====================== */

.featured-release{
display:flex;
align-items:center;
gap:50px;
max-width:900px;
margin:50px auto 0;
padding:40px;
background:#111;
border:2px solid transparent;
border-radius:18px;
box-shadow:0 0 30px rgba(0,0,0,.3);
transition:.3s ease;
}

.featured-cover img{
width:280px;
height:280px;
object-fit:cover;
border-radius:12px;
display:block;
transition:.4s ease;
}

.featured-release:hover{
transform:translateY(-6px);
box-shadow:0 0 35px rgba(232,109,31,.25);
border-color:#e86d1f;
}

.featured-release:hover .featured-cover img{
transform:scale(1.05);
}
.featured-cover a{
    display:block;
}

.featured-release{
cursor:pointer;
}

.featured-release-link{
display:block;
text-decoration:none;
color:inherit;
}

.featured-cover img{
    cursor:pointer;
}

.featured-content{
flex:1;
text-align:left;
}

.featured-type{
display:inline-block;
background:var(--orange);
padding:8px 14px;
border-radius:6px;
font-size:13px;
font-weight:700;
margin-bottom:20px;
}

.featured-content h3{
font-size:3rem;
line-height:1.1;
margin-bottom:15px;
}

.featured-content p{
font-size:1.3rem;
color:var(--orange);
font-weight:600;
margin-bottom:10px;
}

.artist-catalogue-btn{
display:inline-block;
margin-top:10px;
margin-bottom:30px;
padding:10px 18px;
border:1px solid var(--orange);
border-radius:6px;
color:#fff;
text-decoration:none;
transition:.3s;
}

.artist-catalogue-btn:hover{
background:var(--orange);
}

.catalogue-page{
padding:140px 0 80px;
}

.artist-filters{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:40px;
}

.artist-filters a{
padding:10px 18px;
border:1px solid #e86d1f;
border-radius:6px;
color:white;
text-decoration:none;
}

.artist-filters a.active{
background:#e86d1f;
color:#fff;
font-weight:700;
}

.artist-filters a:hover{
background:#e86d1f;
}

.catalogue-header{
text-align:center;
margin-bottom:20px;
}

.catalogue-header h1{
font-size:3rem;
margin-bottom:15px;
}

.catalogue-header p{
max-width:700px;
margin:auto;
color:#cfcfcf;
}

.catalogue-header .artist-catalogue-btn{
display:inline-block;
margin-top:15px;
margin-bottom:15px;
}

.release-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:30px;
}

.release-card{
background:#111;
border-radius:14px;
overflow:hidden;
transition:.3s;
display:flex;
flex-direction:column;
}

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

.release-card:hover{
transform:translateY(-6px);
}

.release-card img{
width:100%;
aspect-ratio:1/1;
object-fit:contain;
background:#111;
display:block;
transition:.4s ease;
}

.release-card{
    cursor:pointer;
}

.release-info{
padding:25px;
display:flex;
flex-direction:column;
flex:1;

align-items:flex-start;
text-align:left;
}

.release-info .release-type{
align-self:flex-start;
}

.release-single-wrapper .release-info{
    text-align:left;
    align-items:flex-start;
}

.release-single-wrapper .release-type{
    align-self:flex-start;
}

.links{
margin-top:auto;
}
.links a .fa-spotify{
color:#1DB954;
}

.links a .fa-youtube{
color:#FF0000;
}

.links a .fa-amazon{
color:#FF9900;
}

.links a .fa-deezer{
color:#A238FF;
}

.links a .fa-apple{
color:#ffffff;
}

.links a .fa-headphones{
color:#00FF99;
}

.release-info h3{
margin-bottom:10px;
text-align:left;
}

.release-artist{
margin-bottom:15px;
text-align:left;
}

.release-artist a{
color:#cfcfcf;
text-decoration:none;
font-weight:600;
}

.release-artist a:hover{
color:#e86d1f;
}

.release-type{
display:inline-block;
width:auto;
background:#e86d1f;
color:#fff;
padding:6px 12px;
border-radius:6px;
font-size:12px;
font-weight:700;
line-height:1;
margin-bottom:15px;
white-space:nowrap;
}

.release-date{
display:block;
color:#999;
margin-bottom:20px;
}

.links{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.links a{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
background:#1d1d1d;
color:white;
text-decoration:none;
border-radius:8px;
font-size:18px;
transition:.3s;
}

.links a:hover{
background:#e86d1f;
}

.featured{
border:2px solid #e86d1f;
}

.featured-badge{
position:absolute;
top:15px;
left:15px;
background:#e86d1f;
padding:8px 12px;
font-size:12px;
font-weight:bold;
border-radius:6px;
}

.image-wrap{
position:relative;
}

.image-wrap a{
    display:block;
}

.image-wrap img{
    cursor:pointer;
}

.empty{
text-align:center;
padding:80px;
}

.catalogue-summary{
text-align:center;
margin-top:20px;
margin-bottom:30px;
color:#e86d1f;
font-weight:700;
}

.catalogue-summary h3{
font-size:1.4rem;
color:#e86d1f;
margin-bottom:20px;
}

.catalogue-stats{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:20px;
}

.stat-box{
background:#111;
padding:20px 30px;
border-radius:12px;
min-width:140px;
border:1px solid rgba(255,255,255,.05);
}

.stat-box span{
display:block;
font-size:2rem;
font-weight:700;
color:#e86d1f;
margin-bottom:5px;
}

.stat-box p{
color:#cfcfcf;
font-size:14px;
margin:0;
}

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:60px 0;
flex-wrap:wrap;
}

.pagination a{
padding:10px 15px;
background:#111;
border:1px solid #333;
border-radius:8px;
color:white;
text-decoration:none;
transition:.3s;
}

.pagination a:hover,
.pagination a.active{
background:#e86d1f;
border-color:#e86d1f;
}

.type-filters{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap;
}

.type-filters a{
padding:10px 18px;
border:1px solid #e86d1f;
border-radius:6px;
color:white;
text-decoration:none;
}

.type-filters a.active{
background:#e86d1f;
color:#fff;
font-weight:700;
}

.type-filters a:hover{
background:#e86d1f;
color:#fff;
}

.artist-single{
    text-align:center;
    max-width:900px;
    margin:40px auto;
}

.artist-profile-photo{
    width:250px;
    height:250px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #ff6a00;
    margin:30px auto;
    display:block;
}

.artist-country-single{
    margin-top:20px;
    margin-bottom:8px;
}

.artist-genre-single{
    margin-bottom:25px;
}

.artist-bio-single{
    max-width:700px;
    margin:0 auto;
    line-height:1.8;
    font-size:18px;
    color:#cfcfcf;
}

.artist-links-single{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin-top:30px;
}

.artist-links-single a{
    padding:10px 18px;
    border:1px solid #e86d1f;
    border-radius:6px;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.artist-links-single a:hover{
    background:#e86d1f;
}

.artist-single .artist-catalogue-btn{
    margin-top:40px;
}

.artist-buttons{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    margin-top:50px;
}

.artist-single .links a{
    width:36px;
    height:36px;
    font-size:15px;
}

.artist-single .links{
    justify-content:center;
    gap:8px;
}

.release-cover-large{
    width:500px;
    max-width:100%;
    border-radius:12px;
    display:block;
    margin:30px auto;
}

.artist-single .release-type{
    display:inline-block;
    margin:15px 0;
}

.artist-single .release-date{
    display:block;
    margin-bottom:25px;
}

.artist-single .links{
    justify-content:center;
    margin-bottom:25px;
}

.artist-single h3{
    margin:15px 0 10px;
    font-size:2rem;
}

.artist-single .release-artist{
    color:#cfcfcf;
    margin-bottom:15px;
    font-size:1.2rem;
    font-weight:600;
}

.release-single-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 30px;
}

.release-single-wrapper .release-card{
    width:100%;
    max-width:500px;
    margin:0 auto;
}

.release-back-btn{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:25px;
}

.release-info h3 a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.release-info h3 a:hover{
    color:#e86d1f;
}

.related-releases{
    margin-top:70px;
}

.related-releases h2{
    text-align:center;
    margin-bottom:30px;
}

.featured-content h3 a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.featured-content h3 a:hover{
    color:#e86d1f;
}

.featured-content p a{
    color:#cfcfcf;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.featured-content p a:hover{
    color:#e86d1f;
}

.featured-content h3 a{
    display:inline-block;
}

.featured-content h3 a:hover{
    color:#e86d1f;
    transform:translateY(-2px);
}

/* Homepage Latest Releases Only */

.home-release-grid .release-info{
    align-items:flex-start;
    text-align:left;
}

.home-release-grid .release-type{
    align-self:flex-start;
}

/* Artist Page Release Cards */

.artist-single .release-info{
    text-align:left;
    align-items:flex-start;
}

.artist-single .release-type{
    align-self:flex-start;
}

.artist-single .release-info h3{
    text-align:left;
}

.artist-single .release-artist{
    text-align:left;
}

.artist-single .release-date{
    text-align:left;
}

.artist-single .release-card{
    cursor:pointer;
}

.footer-socials{
display:flex;
justify-content:center;
gap:15px;
margin-top:20px;
}

.footer-socials a{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
background:#111;
border-radius:10px;
color:#fff;
text-decoration:none;
font-size:20px;
transition:.3s;
}

.footer-socials a:hover{
background:#e86d1f;
transform:translateY(-3px);
}

/* Artist Stats */

.artist-role-single{
    color:#e86d1f;
    font-size:20px;
    font-weight:700;
    margin-top:10px;
    margin-bottom:25px;
}

.artist-bio-single{
    max-width:700px;
    margin:0 auto 35px;
    line-height:2;
    font-size:18px;
    color:#cfcfcf;
}

.artist-links-single{
    margin-top:35px;
    margin-bottom:40px;
}

.contact-box{
    max-width:800px;
    margin:60px auto;
    background:#111;
    padding:60px;
    border-radius:16px;
    text-align:center;
    border:1px solid rgba(255,255,255,.05);
}

.contact-box h3{
    color:#e86d1f;
    font-size:1.5rem;
    margin-top:35px;
    margin-bottom:15px;
}

.contact-box h3:first-child{
    margin-top:0;
}

.contact-box p{
    margin-bottom:20px;
    color:#cfcfcf;
    line-height:1.9;
}

.contact-box a{
    color:#e86d1f;
    text-decoration:none;
    font-weight:700;
}

.contact-box a:hover{
    text-decoration:underline;
}

/* ======================
   DEMO SECTION
====================== */

.demo-section{
    padding:80px 20px;
    background:#090909;
}

.demo-section .container{
    max-width:800px;
    margin:0 auto;
    text-align:center;
    background:#111;
    padding:60px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.05);
}

.demo-section h2{
    font-size:2.2rem;
    margin-bottom:15px;
}

.demo-section p{
    color:#cfcfcf;
    margin-bottom:30px;
    line-height:1.8;
}

/* FILTER BUTTON */

.filters-toggle{
    display:inline-block;
    padding:10px 18px;
    border:1px solid var(--orange);
    border-radius:6px;
    background:transparent;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.filters-toggle:hover{
    background:var(--orange);
}

/* FILTER PANEL */

.filters-panel{
    display:none;
}

.filters-panel.active{
    display:block;
    max-width:600px;
    margin:20px auto 40px;
    padding:30px;
    background:#111;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.05);
}

/* FILTER FORM */

.catalogue-filters-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.filter-row{
    display:flex;
    flex-direction:column;
    text-align:left;
}

.filter-row label{
    color:var(--orange);
    font-size:14px;
    font-weight:700;
    margin-bottom:8px;
    text-transform:uppercase;
}

.filter-row select{
    width:100%;
    background:#090909;
    color:#fff;
    border:1px solid #333;
    border-radius:6px;
    padding:12px 15px;
    font-size:14px;
    transition:.3s;
}

.filter-row select:focus{
    outline:none;
    border-color:var(--orange);
}

/* SEARCH + FILTER BAR */

.catalogue-toolbar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-bottom:30px;
}

.catalogue-search{
    width:100%;
    max-width:500px;
}

.catalogue-search input{
    width:100%;
    padding:12px 15px;
    background:#111;
    border:1px solid #333;
    color:#fff;
    border-radius:6px;
    transition:.3s;
}

.catalogue-search input:focus{
    outline:none;
    border-color:var(--orange);
}

/* ======================
   MOBILE
====================== */

@media screen and (max-width:900px){

html,
body{
    overflow-x:hidden;
}

/* Navbar */

.nav-container{
    position:relative;
}

.nav-container{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
}

.menu-toggle{
    display:block;
}

.nav-links{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#050505;
    box-shadow:0 8px 20px rgba(0,0,0,.35);

    flex-direction:column;
    align-items:center;
    gap:4px;

    overflow:hidden;

    max-height:0;
    opacity:0;

    transition:
    max-height .2s ease,
    opacity .15s ease;

    border-top:1px solid rgba(255,255,255,.08);
}


.nav-links.show{
    display:flex;
    max-height:300px;
    opacity:1;
    padding:15px 0;
}

.logo-area{
    justify-content:flex-start;
}

.logo-area img{
    width:50px;
}

.logo-title{
    font-size:14px;
}

.nav-links a{
    font-size:13px;
}

.nav-links a{
    padding:6px 0;
}

.nav-links a.active::after{
    width:40px;
    left:50%;
    transform:translateX(-50%);
    bottom:-3px;
}

/* Hero */

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

.hero-content{
    width:100%;
    max-width:100%;
    text-align:center;
}

.hero-logo{
    width:180px;
    max-width:100%;
    margin:0 auto 15px;
}

.hero h1{
    font-size:2rem;
    line-height:1.05;
    margin-bottom:10px;
}

.hero h2{
    font-size:.8rem;
    line-height:1.2;
    margin-bottom:15px;
    white-space:nowrap;
}

.hero p{
    font-size:.9rem;
    line-height:1.7;
    max-width:320px;
    margin:0 auto;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    margin-top:30px;
}

.btn-primary,
.btn-secondary{
    width:220px;
    text-align:center;
    margin:0;
}

/* Homepage Section Titles */

.about h2,
.latest-releases h2,
.artists h2,
.numbers h2,
.projects h2,
.demo-section h2{
    font-size:1.7rem !important;
    line-height:1.15 !important;
    text-align:center !important;
}

/* Page Titles */

.page-hero h1,
.catalogue-header h1{
    font-size:1.8rem !important;
    line-height:1.15 !important;
    margin-bottom:15px !important;
    text-align:center !important;
}

/* Page Paragraphs */

.page-hero p,
.catalogue-header p{
    max-width:100% !important;
    padding:0 10px !important;
    font-size:.95rem !important;
    line-height:1.7;
}

/* Demo Section */

.demo-section .container{
    width:100%;
    max-width:100%;
    padding:40px 20px;
}

.demo-section p{
    font-size:.95rem;
    line-height:1.7;
}

/* Contact */

.contact-box{
    padding:35px 20px !important;
    margin:40px auto !important;
    width:100% !important;
    max-width:100% !important;
}

.contact-box h3{
    font-size:1.3rem;
}

/* Artists */

.artist-grid{
    grid-template-columns:1fr;
}

.artist-profile{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
}

.artist-details{
    width:100%;
    padding-right:0;
}

.artist-photo{
    width:100%;
}

.artist-photo img{
    width:100%;
    max-width:100%;
    display:block;
}

.artist-single{
    max-width:100%;
    padding:0 20px;
}

.artist-bio-single{
    max-width:100%;
}

/* Releases */

.release-grid{
    grid-template-columns:1fr;
}

.featured-release{
    flex-direction:column;
    text-align:center;
    padding:30px;
}

.featured-content{
    text-align:left;
}

.featured-content h3,
.featured-content p,
.featured-content .release-date{
    text-align:left;
}

.featured-content .btn-primary{
    display:block;
    width:fit-content;
    margin:25px auto 0;
}

.featured-cover img{
    width:240px;
    height:240px;
}

.featured-content h3{
    font-size:2rem;
}

/* Projects */

.projects-grid{
    grid-template-columns:1fr;
}

/* Stats */

.stats{
    grid-template-columns:1fr 1fr;
}

/* Cards */

.coming-soon{
    padding:30px;
}

 .catalogue-toolbar{
        flex-direction:column;
        gap:15px;
    }

    .catalogue-search{
        max-width:100%;
    }

    .filters-toggle{
        width:100%;
        max-width:250px;
    }

/* MOBILE */

    .catalogue-toolbar{
    flex-direction:column;
    align-items:center;
}

    .catalogue-search{
        max-width:100%;
    }

   .filters-toggle{
    width:auto;
    min-width:180px;
}

    .filters-panel.active{
        max-width:100%;
        padding:20px;
    }
.catalogue-toolbar .filters-toggle{
    margin:0 auto;
}

}