/*==================================================
RESPONSIVE
CareerWithUMG
==================================================*/

/*==============================
1400px
==============================*/

@media (max-width:1400px){

.container{

width:92%;

}

.hero h1{

font-size:5rem;

}

.hero-stats{

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.featured-grid{

grid-template-columns:repeat(2,1fr);

}

.market-grid{

grid-template-columns:repeat(2,1fr);

}

.metrics-grid{

grid-template-columns:repeat(2,1fr);

}

.partner-logos{

grid-template-columns:repeat(3,1fr);

}

.editorial-grid{

grid-template-columns:repeat(2,1fr);

}

.experience-grid{

grid-template-columns:1fr;

}

.career-layout{

grid-template-columns:1fr;

gap:70px;

}

.career-image{

height:650px;

}

.footer-grid{

grid-template-columns:repeat(2,1fr);

gap:50px;

}

.mega-menu{

width:1000px;

}

}


/*==============================
1200px
==============================*/

@media (max-width:1200px){

.hero{

padding:160px 0;

}

.hero h1{

font-size:4.2rem;

line-height:1.05;

}

.hero p{

font-size:1.05rem;

}

.hero-buttons{

flex-wrap:wrap;

gap:20px;

}

.section-intro h2,

.section-header h2{

font-size:3rem;

}

.artist-experience,

.marketplace,

.metrics,

.editorial-strip,

.careers-showcase,

.newsletter{

padding:120px 0;

}

.market-grid{

grid-template-columns:repeat(2,1fr);

}

.featured-grid{

grid-template-columns:repeat(2,1fr);

}

.editorial-grid{

grid-template-columns:1fr;

}

.editorial-card{

height:420px;

}

.partner-logos{

grid-template-columns:repeat(3,1fr);

row-gap:40px;

}

.partner-logos img{

width:120px;

}

.nav-links{

gap:22px;

}

.join-btn{

padding:14px 26px;

}

.search-btn{

display:none;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form button{

width:100%;

}

.newsletter-form input{

width:100%;

}

}
/*==============================
992px
==============================*/

@media (max-width:992px){

.navbar{

padding:18px 25px;

}

.nav-center{

display:none;

}

.mobile-toggle{

display:flex;

}

.login-btn{

display:none;

}

.join-btn{

display:none;

}

.hero{

min-height:100vh;

padding:140px 0 100px;

text-align:center;

}

.hero-content{

margin:auto;

max-width:100%;

}

.hero h1{

font-size:3.5rem;

line-height:1.1;

}

.hero p{

max-width:700px;

margin:30px auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

grid-template-columns:repeat(2,1fr);

margin-top:60px;

}

.hero-stats div{

padding:30px;

}

.section-header,

.section-intro{

text-align:center;

margin-left:auto;

margin-right:auto;

}

.featured-grid,

.market-grid,

.metrics-grid,

.editorial-grid,

.partner-logos,

.footer-grid{

grid-template-columns:1fr;

}

.experience-grid,

.career-layout{

grid-template-columns:1fr;

}

.experience-large{

height:500px;

}

.career-image{

height:500px;

}

.editorial-card{

height:360px;

}

.newsletter-box{

padding:50px 35px;

}

.footer-bottom{

flex-direction:column;

gap:15px;

text-align:center;

}

.scroll-indicator{

display:none;

}

.mega-menu{

display:none;

}

}


/*==============================
768px
==============================*/

@media (max-width:768px){

.container{

width:94%;

}

.hero{

padding:120px 0 80px;

}

.hero h1{

font-size:2.8rem;

letter-spacing:-1px;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.hero-buttons a{

width:100%;

text-align:center;

}

.primary-btn,

.secondary-btn{

width:100%;

justify-content:center;

}

.hero-stats{

grid-template-columns:1fr;

gap:20px;

}

.hero-stats div{

padding:25px;

}

.section-header h2,

.section-intro h2,

.career-content h2{

font-size:2.3rem;

line-height:1.15;

}

.section-header p,

.section-intro p{

font-size:1rem;

}

.artist-experience,

.marketplace,

.metrics,

.editorial-strip,

.careers-showcase,

.newsletter,

.partner-bar{

padding:90px 0;

}

.featured-card,

.market-card{

border-radius:22px;

}

.featured-card img,

.market-card img{

height:260px;

}

.experience-large{

height:380px;

}

.career-image{

height:380px;

}

.editorial-card{

height:300px;

}

.newsletter-box{

padding:40px 25px;

border-radius:24px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input,

.newsletter-form button{

width:100%;

}

.partner-logos img{

width:110px;

}

.footer-grid{

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

display:block;

}

}
/*==============================
576px
==============================*/

@media (max-width:576px){

.hero{

min-height:auto;

padding:100px 0 70px;

}

.hero h1{

font-size:2.2rem;

line-height:1.15;

}

.hero p{

font-size:.95rem;

margin:20px auto 35px;

}

.eyebrow{

font-size:.72rem;

letter-spacing:2px;

}

.hero-buttons{

gap:15px;

}

.primary-btn,
.secondary-btn{

padding:18px 24px;

font-size:.95rem;

}

.hero-stats h2{

font-size:2.3rem;

}

.section-label{

font-size:.7rem;

padding:8px 16px;

}

.section-header h2,
.section-intro h2,
.career-content h2{

font-size:2rem;

}

.section-header p,
.section-intro p{

font-size:.95rem;

}

.featured-card img,
.market-card img,
.editorial-card,
.experience-large,
.career-image{

height:260px;

}

.newsletter-box{

padding:30px 20px;

}

.dashboard{

padding:25px;

}

.dashboard-row{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

.footer{

text-align:center;

}

.footer-bottom{

font-size:.85rem;

}

}

/*==============================
430px
==============================*/

@media (max-width:430px){

.container{

width:92%;

}

.navbar{

padding:16px 18px;

}

.logo img{

height:34px;

}

.hero h1{

font-size:1.9rem;

}

.hero p{

font-size:.9rem;

}

.hero-stats div{

padding:20px;

}

.hero-stats h2{

font-size:2rem;

}

.section-header h2,
.section-intro h2{

font-size:1.8rem;

}

.market-body{

padding:20px;

}

.metric{

padding:25px;

}

.metric h2{

font-size:2.6rem;

}

.newsletter-box{

padding:25px 18px;

}

.newsletter-form input{

padding:18px;

}

.newsletter-form button{

padding:18px;

}

}

/*==============================
390px
==============================*/

@media (max-width:390px){

.hero h1{

font-size:1.75rem;

}

.section-header h2,
.section-intro h2{

font-size:1.65rem;

}

.hero-buttons a{

font-size:.9rem;

}

.market-price{

font-size:1rem;

}

.metric h2{

font-size:2.2rem;

}

}

/*==============================
360px
==============================*/

@media (max-width:360px){

.hero{

padding:90px 0 60px;

}

.hero h1{

font-size:1.55rem;

}

.hero p{

font-size:.85rem;

}

.section-header h2,
.section-intro h2{

font-size:1.5rem;

}

.primary-btn,
.secondary-btn{

padding:16px 18px;

font-size:.85rem;

}

.hero-stats h2{

font-size:1.8rem;

}

.partner-logos img{

width:90px;

}

.footer-grid{

gap:30px;

}

}

/*==============================
Overflow Fixes
==============================*/

html,
body{

overflow-x:hidden;

width:100%;

}

img,
video{

max-width:100%;

height:auto;

display:block;

}

section{

overflow:hidden;

}

*{

word-wrap:break-word;

}