/* =====================================
LARGE LAPTOPS
===================================== */

@media (max-width:1400px){

.content{

margin-right:380px;

padding:50px;

}

.sidebar{

width:300px;

}

.hero-grid{

grid-template-columns:420px 1fr;

gap:50px;

}

.hero-text h1{

font-size:3.8rem;

}

.hero-image img{

height:560px;

}

}

/* =====================================
LAPTOP
===================================== */

@media (max-width:1200px){

.sidebar{

width:280px;

padding:25px;

}

.content{

margin-right:330px;

padding:40px;

}

.hero-grid{

grid-template-columns:1fr;

}

.hero-image{

max-width:500px;

margin:auto;

}

.hero-image img{

height:550px;

}

.hero-text{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.info-grid{

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

}

.skills-grid{

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

}

}

/* =====================================
TABLET
===================================== */

@media (max-width:992px){

.sidebar{

position:relative;

width:100%;

height:auto;

right:auto;

top:auto;

border-radius:0;

margin-bottom:40px;

}

.layout{

display:block;

}

.content{

margin-right:0;

padding:30px;

}

.hero-section{

min-height:auto;

padding-top:30px;

}

.hero-grid{

grid-template-columns:1fr;

}

.hero-image{

max-width:450px;

margin:auto;

}

.hero-image img{

height:500px;

}

.hero-text h1{

font-size:3rem;

text-align:center;

}

.hero-text h2{

text-align:center;

}

.hero-text p{

text-align:center;

margin:auto auto 30px;

}

.hero-buttons{
    margin-bottom: 10%;
}

.projects-grid{

grid-template-columns:1fr;

}

.documents-grid{

grid-template-columns:1fr;

}

.skills-grid{

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

}

.section-title{

font-size:2.2rem;

}

}

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

@media (max-width:768px){

.content{

padding:20px;

}

.sidebar{

padding:25px;

}

.sidebar-profile img{

width:110px;

height:110px;

}

.sidebar-profile h2{

font-size:1.2rem;

}

.sidebar-nav{

margin-top:25px;

}

.sidebar-nav a{

padding:10px;

font-size:.9rem;

}

.hero-image{

max-width:350px;

}

.hero-image img{

height:420px;

border-radius:30px;

}

.hero-text h1{

font-size:2.4rem;

}

.hero-text h2{

font-size:1.1rem;

}

.hero-text p{

font-size:.95rem;

}

.hero-buttons{

flex-direction:column;

align-items:center;

margin-bottom: 10%;

}

.btn-primary,
.btn-secondary{

width:250px;

text-align:center;

}

.card{

padding:30px;

}

.info-grid{

grid-template-columns:1fr;

}

.skills-grid{

grid-template-columns:1fr 1fr;

}

.section{

margin-bottom:80px;

}

.section-title{

font-size:2rem;

}

}

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

@media (max-width:576px){

.content{

padding:15px;

}

.hero-image{

max-width:280px;

}

.hero-image img{

height:350px;

}

.hero-text h1{

font-size:2rem;

}

.hero-text h2{

font-size:1rem;

}

.hero-text p{

font-size:.9rem;

}

.hero-buttons{
    margin-bottom: 5%;
}

.section-title{

font-size:1.8rem;

}

.card{

padding:25px;

border-radius:20px;

}

.project-card{

padding:25px;

}

.document-card{

padding:25px;

}

.skill{

padding:15px;

font-size:.9rem;

}

.social-links{

flex-direction:column;

align-items:center;

}

.social-links a{

width:220px;

text-align:center;

}

}

/* =====================================
VERY SMALL DEVICES
===================================== */

@media (max-width:380px){

.hero-text h1{

font-size:1.7rem;

}

.hero-image{

max-width:240px;

}

.hero-image img{

height:300px;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.skills-grid{

grid-template-columns:1fr;

}

.section-title{

font-size:1.6rem;

}

}

/* =====================================
ULTRA WIDE
===================================== */

@media (min-width:1800px){

.content{

max-width:1800px;

}

.hero-text h1{

font-size:5.5rem;

}

.hero-image img{

height:750px;

}

.section-title{

font-size:3rem;

}

}


@media (max-width:992px){

.mobile-header{

display:flex;

position:fixed;

top:0;

left:0;

width:100%;

height:70px;

background:white;

z-index:2000;

justify-content:space-between;

align-items:center;

padding:0 20px;

border-bottom:1px solid var(--border);

}

.mobile-logo{

text-decoration:none;

font-weight:700;

color:var(--text);

}

#menuToggle{

border:none;

background:none;

font-size:32px;

cursor:pointer;

color:var(--gold);

}

.sidebar{

position:fixed;

top:0;

right:-380px;

width:340px;

height:100vh;

z-index:3000;

border-radius:0;

transition:.4s;

will-change:right;

}

.sidebar.active{

right:0;

box-shadow:
-10px 0 50px rgba(0,0,0,.15);

}

.close-sidebar{

display:block;

position:absolute;

top:20px;

left:20px;

width:40px;

height:40px;

border:none;

background:white;

border-radius:50%;

cursor:pointer;

font-size:26px;

color:#d33;

}

.overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:2500;

}

.overlay.active{

opacity:1;

visibility:visible;

}

.content{

margin-right:0;

padding-top:100px;

}

}