/* =====================================
   LARGE TABLETS / SMALL LAPTOPS
===================================== */


@media (max-width:1100px){



.hero-content {

    grid-template-columns:1fr;

    text-align:center;

}



.hero-description {

    margin-left:auto;

    margin-right:auto;

}



.hero-buttons {

    justify-content:center;

}



.social-links {

    justify-content:center;

}



.profile-card {

    width:320px;

    height:320px;

}





.skills-grid {

    grid-template-columns:

    repeat(2,1fr);

}





.projects-grid {

    grid-template-columns:

    1fr;

}





.contact-container {

    grid-template-columns:1fr;

}



}





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


@media (max-width:850px){



.navbar {

    padding:20px 25px;

}



.nav-links {


    position:absolute;

    top:80px;

    left:0;

    width:100%;


    background:

    rgba(5,8,22,.95);


    backdrop-filter:blur(20px);


    flex-direction:column;


    align-items:center;


    padding:30px;


    gap:25px;


    display:none;


}



.nav-links.active {

    display:flex;

}



.menu-toggle {

    display:block;

}



.hero {


    padding-top:130px;

}



.hero h1 {

    font-size:55px;

}



.hero h2 {

    font-size:28px;

}





.section {

    padding:80px 5%;

}



.section-title h2 {

    font-size:36px;

}





.github-stats {

    flex-direction:column;

    align-items:center;

}



.stat-box {

    width:80%;

}





}





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


@media (max-width:600px){



.logo {

    font-size:24px;

}



.hero {

    padding-left:20px;

    padding-right:20px;

}



.hero h1 {

    font-size:42px;

}



.hero h2 {

    font-size:24px;

}



.hero-description {

    font-size:16px;

}





.hero-buttons {


    flex-direction:column;

    align-items:center;


}



.primary-btn,
.secondary-btn {

    width:220px;

    text-align:center;

}





.profile-card {

    width:260px;

    height:260px;

}





.skills-grid {


    grid-template-columns:

    1fr;


}



.skill-card {


    padding:30px;


}




.timeline::before {


    left:10px;


}



.timeline-item {


    padding:

    25px 20px 25px 45px;


}



.timeline-dot {


    left:0;


}





.project-content {


    padding:20px;


}



.project-content h3 {


    font-size:21px;


}



.architecture {


    font-size:13px;

    overflow-x:auto;


}





.contact-info,
.contact-form {


    padding:25px;


}





.footer-links {


    flex-direction:column;

    gap:15px;


}



#back-to-top {


    width:45px;

    height:45px;


    right:20px;

    bottom:20px;


}



}





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


@media (max-width:380px){



.hero h1 {

    font-size:36px;

}



.hero h2 {

    font-size:21px;

}



.profile-card {

    width:220px;

    height:220px;

}



.section-title h2 {

    font-size:30px;

}



}