/*=========================================
        1400px
=========================================*/

@media(max-width:1400px){

.container{

    width:92%;

}

.hero h1{

    font-size:4rem;

}

.hero-container{

    gap:50px;

}

.image-card{

    width:360px;

}

}

/*=========================================
        1200px
=========================================*/

@media(max-width:1200px){

.hero-container{

    gap:40px;

}

.about-grid{

    grid-template-columns:320px 1fr;

}

.project-wrapper{

    gap:40px;

}

.skills-grid{

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

}

.learning-grid{

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

}

.github-grid{

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

}

.achievement-grid{

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

}

.stats-grid{

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

}

.contact-wrapper{

    grid-template-columns:330px 1fr;

}

.footer-top{

    grid-template-columns:2fr 1fr;

}

}

/*=========================================
        992px
=========================================*/

@media(max-width:992px){

.section{

    padding:90px 0;

}

.hero{

    padding-top:120px;

}

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero p{

    margin:auto auto 35px;

}

.hero-buttons{

    justify-content:center;

}

.social-links{

    justify-content:center;

}

.hero-image{

    order:-1;

}

.image-card{

    width:320px;

}

.about-grid{

    grid-template-columns:1fr;

}

.about-image{

    max-width:350px;

    margin:auto;

}

.project-wrapper{

    grid-template-columns:1fr;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

.architecture-flow{

    flex-direction:column;

}

.flow-arrow{

    transform:rotate(90deg);

}

.timeline{

    padding-left:25px;

}

.footer-top{

    grid-template-columns:1fr;

}

}

/*=========================================
        768px
=========================================*/

@media(max-width:768px){

.navbar{

    position:fixed;

    top:80px;

    right:-100%;

    width:280px;

    height:calc(100vh - 80px);

    background:#08111F;

    transition:.35s;

    padding:40px 30px;

}

.navbar.active{

    right:0;

}

.navbar ul{

    flex-direction:column;

    gap:25px;

}

.menu-btn{

    display:flex;

}

.hero h1{

    font-size:3rem;

}

.hero h2{

    font-size:1.5rem;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

    justify-content:center;

}

.skills-grid{

    grid-template-columns:1fr;

}

.learning-grid{

    grid-template-columns:1fr;

}

.github-grid{

    grid-template-columns:1fr;

}

.stats-grid{

    grid-template-columns:1fr;

}

.achievement-grid{

    grid-template-columns:1fr;

}

.certificate-grid{

    grid-template-columns:1fr;

}

.about-info{

    grid-template-columns:1fr;

}

.project-features{

    grid-template-columns:1fr;

}

.project-buttons{

    flex-direction:column;

}

.tech-stack{

    justify-content:center;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

}

/*=========================================
        576px
=========================================*/

@media(max-width:576px){

.hero{

    min-height:auto;

}

.hero h1{

    font-size:2.5rem;

}

.hero h2{

    font-size:1.3rem;

}

.section-title h2{

    font-size:2rem;

}

.image-card{

    width:260px;

}

.contact-form{

    padding:25px;

}

.contact-card{

    flex-direction:column;

    text-align:center;

}

.back-to-top{

    width:48px;

    height:48px;

    right:20px;

    bottom:20px;

}

.btn{

    padding:14px 22px;

}

}