/* =================================
GLOBAL RESPONSIVE SYSTEM
================================= */


/* -------- DESKTOP MEDIANO -------- */

@media (max-width:1200px){

section{
padding:6rem 3rem;
}

.hero{
padding:7rem 3rem 4rem;
}

.hero-visual{
display:none;
}

.courses-grid{
grid-template-columns:repeat(2,1fr);
}

.cats-grid{
grid-template-columns:repeat(2,1fr);
}

.learn-grid{
grid-template-columns:repeat(2,1fr);
}

.includes-grid{
grid-template-columns:repeat(2,1fr);
}

.footer-top{
grid-template-columns:1fr 1fr;
}

}



/* -------- TABLETS -------- */

@media (max-width:992px){

nav{
padding:1rem 2rem;
}

.nav-inner-pill{
display:none;
}

.hero{
flex-direction:column;
text-align:center;
padding:6rem 2rem;
}

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

.hero-stats{
justify-content:center;
}

.how-grid{
grid-template-columns:1fr;
gap:3rem;
}

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

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

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

.instructor-card{
grid-template-columns:1fr;
text-align:center;
}

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

}



/* -------- TABLET SMALL -------- */

@media (max-width:768px){

section{
padding:5rem 1.5rem;
}

.hero{
padding:5rem 1.5rem;
}

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

.hero-actions{
flex-direction:column;
}

.hero-stats{
flex-direction:column;
gap:1rem;
}

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

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

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

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

.footer-top{
grid-template-columns:1fr;
}

}



/* -------- MOBILE -------- */

@media (max-width:480px){

nav{
padding:.9rem 1rem;
}

.hero{
padding:4rem 1rem;
}

.hero h1{
font-size:2.1rem;
}

.hero-sub{
font-size:.95rem;
}

.btn-primary{
width:100%;
justify-content:center;
}

.btn-ghost{
width:100%;
justify-content:center;
}

.cat-card{
padding:1.4rem;
}

.course-tile{
margin-bottom:1rem;
}

.section-title{
font-size:1.6rem;
}

.section-sub{
font-size:.9rem;
}

}



/* -------- LOGIN Y REGISTER -------- */

@media (max-width:768px){

.login-card{
width:100%;
max-width:420px;
padding:2rem;
}

}

@media (max-width:480px){

.login-card{
padding:1.5rem;
}

.login-header h1{
font-size:1.4rem;
}

.input-wrapper input{
font-size:.85rem;
}

.btn-login{
font-size:.9rem;
}

}