/* =========================================================
                RESPONSIVE CSS
                PART 1
========================================================= */

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

@media (max-width:1200px){

.container{

width:92%;

}

.hero{

padding:140px 5% 80px;

gap:60px;

}

.hero-left h1{

font-size:60px;

}

.hero-left h2{

font-size:28px;

}

.hero-description{

font-size:17px;

line-height:30px;

}

.profile-card{

width:360px;

height:360px;

}

.profile-border{

width:290px;

height:290px;

}

.stats .container{

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

gap:25px;

}

.skills-grid{

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

}

.projects-grid{

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

}

.timeline{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1.5fr 1fr;

gap:40px;

}

}

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

@media (max-width:992px){

.navbar{

position:relative;

}

.menu-btn{

display:flex;

align-items:center;

justify-content:center;

}

.resume-btn{

display:none;

}

/* Mobile Menu */

.nav-links{

position:absolute;

top:90px;

left:-100%;

width:280px;

height:calc(100vh - 90px);

background:var(--bg2);

flex-direction:column;

align-items:flex-start;

padding:40px 30px;

gap:25px;

transition:.35s;

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

box-shadow:var(--shadow);

}

.nav-links.active{

left:0;

}

.nav-links a{

font-size:18px;

width:100%;

}

.hero{

flex-direction:column-reverse;

text-align:center;

padding-top:140px;

}

.hero-left{

display:flex;

flex-direction:column;

align-items:center;

}

.hero-description{

max-width:100%;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.social-links{

justify-content:center;

}

.profile-card{

width:320px;

height:320px;

}

.profile-border{

width:250px;

height:250px;

}

.stats .container{

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

}

.skills-grid{

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

}

.projects-grid{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-social .social-icons{

justify-content:center;

}

.footer-links ul{

align-items:center;

}

}
/* =========================================================
                RESPONSIVE CSS
                PART 2
========================================================= */

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

@media (max-width:768px){

header{

padding:18px 0;

}

.container{

width:94%;

}

.hero{

padding:120px 25px 70px;

gap:50px;

}

.hero-left h1{

font-size:46px;

line-height:1.2;

}

.hero-left h2{

font-size:24px;

height:36px;

}

.hero-description{

font-size:16px;

line-height:30px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.primary-btn,
.secondary-btn{

width:100%;

text-align:center;

}

.profile-card{

width:280px;

height:280px;

}

.profile-border{

width:220px;

height:220px;

}

.stats{

padding:80px 0;

}

.stats .container{

grid-template-columns:1fr;

gap:20px;

}

.skills-grid{

grid-template-columns:1fr;

}

.projects-grid{

grid-template-columns:1fr;

}

.timeline{

grid-template-columns:1fr;

}

.section-title{

font-size:34px;

}

.section-subtitle{

font-size:16px;

margin-bottom:40px;

}

.cta{

padding:80px 0;

}

.cta-box{

padding:45px 25px;

}

.cta-box h2{

font-size:30px;

}

.cta-box p{

font-size:16px;

line-height:28px;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons .primary-btn,
.cta-buttons .secondary-btn{

width:100%;

text-align:center;

}

.footer-container{

gap:35px;

}

.footer-about h2{

font-size:28px;

}

.footer-bottom{

font-size:14px;

}

}

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

@media (max-width:480px){

.logo{

font-size:28px;

}

.hero{

padding:110px 20px 60px;

}

.hero-left h1{

font-size:36px;

}

.hero-left h2{

font-size:20px;

}

.hero-description{

font-size:15px;

line-height:28px;

}

.profile-card{

width:240px;

height:240px;

}

.profile-border{

width:190px;

height:190px;

}

.theme-btn,
.menu-btn{

width:44px;

height:44px;

font-size:16px;

}

.social-links{

gap:12px;

}

.social-links a{

width:46px;

height:46px;

font-size:18px;

}

.section-title{

font-size:28px;

}

.stat-card h2{

font-size:34px;

}

.project-card{

padding:25px;

}

.timeline-card{

padding:25px;

}

.cta-box{

padding:35px 20px;

}

.cta-box h2{

font-size:26px;

}

footer{

padding:60px 20px 25px;

}

}

/* ==========================================
            FOLDABLE DEVICES
========================================== */

@media (max-width:360px){

.hero-left h1{

font-size:32px;

}

.hero-left h2{

font-size:18px;

}

.profile-card{

width:210px;

height:210px;

}

.profile-border{

width:170px;

height:170px;

}

.primary-btn,
.secondary-btn{

padding:14px 20px;

font-size:15px;

}

}
/* =========================================================
                RESPONSIVE CSS
                PART 3 (FINAL)
========================================================= */

/* ==========================================
            LARGE SCREENS
========================================== */

@media (min-width:1400px){

.container{

max-width:1400px;

}

.hero{

padding:170px 8% 120px;

}

.hero-left h1{

font-size:88px;

}

.hero-left h2{

font-size:42px;

}

.hero-description{

max-width:760px;

font-size:20px;

line-height:36px;

}

.profile-card{

width:480px;

height:480px;

}

.profile-border{

width:390px;

height:390px;

}

}

/* ==========================================
            2K / 4K MONITORS
========================================== */

@media (min-width:1800px){

body{

font-size:18px;

}

.container{

max-width:1650px;

}

.hero-left h1{

font-size:100px;

}

.section-title{

font-size:60px;

}

}

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

@media (max-height:600px) and (orientation:landscape){

.hero{

min-height:auto;

padding:120px 6% 60px;

}

.profile-card{

width:220px;

height:220px;

}

.profile-border{

width:170px;

height:170px;

}

}

/* ==========================================
        TOUCH DEVICES
========================================== */

@media (hover:none){

.primary-btn:hover,
.secondary-btn:hover,
.resume-btn:hover,
.project-card:hover,
.skill-card:hover,
.timeline-card:hover,
.stat-card:hover,
.social-links a:hover{

transform:none;

}

}

/* ==========================================
        IMAGE RESPONSIVE
========================================== */

img{

max-width:100%;

height:auto;

display:block;

}

/* ==========================================
        BUTTON WRAP
========================================== */

.hero-buttons,
.cta-buttons{

flex-wrap:wrap;

}

/* ==========================================
        LONG WORD FIX
========================================== */

h1,
h2,
h3,
p{

word-wrap:break-word;

overflow-wrap:break-word;

}

/* ==========================================
        SAFETY
========================================== */

html{

overflow-x:hidden;

}

body{

overflow-x:hidden;

}

/* ==========================================
        END
========================================== */