/* ==========================================
   LARGE TABLETS
========================================== */

@media (max-width:1100px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.hero-right{

min-height:450px;

}

.about-container{

grid-template-columns:1fr;

text-align:center;

}

.about-image{

max-width:420px;

margin:auto;

}

.projects-grid{

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

}

.skills-grid{

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

}

}

/* ==========================================
   TABLETS
========================================== */

@media (max-width:768px){

section{

padding:90px 0;

}

.section-title h2{

font-size:2.3rem;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:22px;

}

.nav-links{

position:fixed;

top:80px;

left:-100%;

width:100%;

background:#070B17;

display:flex;

flex-direction:column;

padding:35px;

gap:25px;

transition:.35s;

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

}

.nav-links.active{

left:0;

}

.menu-btn{

display:block;

}

.projects-grid{

grid-template-columns:1fr;

}

.skills-grid{

grid-template-columns:1fr 1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-container{

flex-direction:column;

text-align:center;

}

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

@media (max-width:576px){

.container{

width:92%;

}

#header{

height:70px;

}

.navbar{

height:70px;

}

.logo{

font-size:22px;

}

.hero{

padding-top:100px;

min-height:auto;

}

.hero-container{

gap:40px;

}

.hero h1{

font-size:38px;

}

.hero h2{

font-size:18px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

width:100%;

}

.btn-primary,

.btn-secondary{

width:100%;

max-width:280px;

text-align:center;

}

.hero-circle{

width:260px;

height:260px;

}

.floating-card{

display:none;

}

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:32px;

}

.about-content h2{

font-size:34px;

}

.about-container{

gap:40px;

}

.project-image{

height:180px;

}

.project-content{

padding:20px;

}

.project-content h3{

font-size:22px;

}

.skill-card{

padding:20px;

font-size:15px;

}

.contact-card{

padding:20px;

}

.footer-container{

padding:10px 0;

}

}

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

@media (max-width:380px){

.hero h1{

font-size:32px;

}

.hero h2{

font-size:16px;

}

.hero-circle{

width:220px;

height:220px;

}

.section-title h2{

font-size:28px;

}

.logo{

font-size:20px;

}

.btn-primary,

.btn-secondary{

padding:14px 20px;

font-size:15px;

}

}