/* ==========================================
   RESPONSIVE DESIGN
========================================== */

/* Large Laptop */

@media (max-width:1400px){

.container{

width:92%;

}

.hero h1{

font-size:5rem;

}

}

/* ===========================
Laptop
=========================== */

@media (max-width:1200px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero-left{

align-items:center;

}

.hero p{

max-width:700px;

}

.hero-buttons{

justify-content:center;

}

.hero-social{

justify-content:center;

}

.about-grid{

grid-template-columns:1fr;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.featured-project{

grid-template-columns:1fr;

}

}

/* ===========================
Tablet
=========================== */

@media (max-width:992px){

.section{

padding:90px 0;

}

.section-heading{

text-align:center;

}

.section-heading h2{

margin:auto;

}

.section-heading p{

margin:auto;

margin-top:18px;

}

.nav-links{

display:none;

}

.menu-btn{

display:block;

font-size:24px;

}

.hero{

padding-top:140px;

}

.hero h1{

font-size:4rem;

}

.hero h2{

font-size:24px;

}

.profile-card{

width:320px;

height:320px;

}

.stack-grid{

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

}

.projects-grid{

grid-template-columns:1fr;

}

.opensource-grid{

grid-template-columns:1fr;

}

.profiles-grid{

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

}

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

@media (max-width:768px){

.container{

width:92%;

}

.section{

padding:75px 0;

}

/* ===========================
Navbar
=========================== */

.navbar{

height:72px;

}

.logo{

font-size:24px;

}

.nav-actions{

gap:10px;

}

/* ===========================
Hero
=========================== */

.hero{

min-height:auto;

padding-top:120px;

padding-bottom:80px;

}

.hero h1{

font-size:3.2rem;

line-height:1.05;

}

.hero h2{

font-size:22px;

}

.hero p{

font-size:16px;

}

.badge{

font-size:11px;

padding:8px 14px;

}

.hero-buttons{

flex-direction:column;

width:100%;

gap:15px;

}

.btn-primary,

.btn-secondary{

width:100%;

}

.hero-social{

flex-wrap:wrap;

gap:14px;

}

.hero-social a{

width:46px;

height:46px;

font-size:17px;

}

.profile-card{

width:280px;

height:280px;

}

/* ===========================
About
=========================== */

.about-left h3{

font-size:30px;

}

.about-left p{

font-size:16px;

}

.about-card{

padding:24px;

}

/* ===========================
Timeline
=========================== */

.timeline{

padding-left:25px;

}

.timeline-item{

padding-left:28px;

}

.timeline-item h3{

font-size:24px;

}

/* ===========================
Stack
=========================== */

.stack-grid{

grid-template-columns:1fr;

}

.stack-card{

padding:28px;

}

/* ===========================
Projects
=========================== */

.project-card{

border-radius:18px;

}

.project-content{

padding:24px;

}

.project-header h3{

font-size:24px;

}

.project-links{

flex-direction:column;

}

/* ===========================
Open Source
=========================== */

.opensource-card{

padding:28px;

}

/* ===========================
Profiles
=========================== */

.profiles-grid{

grid-template-columns:1fr;

}

.profile-card{

padding:28px;

}

/* ===========================
Contact
=========================== */

.contact-info h3{

font-size:32px;

}

.contact-info p{

font-size:16px;

}

.contact-list p{

font-size:15px;

}

#contactForm input,

#contactForm textarea{

padding:16px;

font-size:15px;

}

/* ===========================
Footer
=========================== */

.footer-container h2{

font-size:30px;

}

.footer-icons{

gap:12px;

}

.footer-icons a{

width:46px;

height:46px;

font-size:18px;

}

}

/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:480px){

.hero h1{

font-size:2.6rem;

}

.hero h2{

font-size:20px;

}

.section-heading h2{

font-size:2rem;

}

.profile-card{

width:240px;

height:240px;

}

.stack-card,

.project-card,

.opensource-card,

.profile-card,

.about-card{

border-radius:16px;

}

}