/*====================================================
    RESPONSIVE.CSS
    Portfolio V2
=====================================================*/

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

@media (min-width:1400px){

.container,
.hero,
.navbar{

    max-width:1400px;

    margin:auto;

}

.hero{

    gap:120px;

}

.hero-left h1{

    font-size:4.8rem;

}

.section-title h2{

    font-size:3.2rem;

}

}

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

@media (max-width:1200px){

section{

    padding:100px 6%;

}

.navbar{

    padding:18px 6%;

}

.hero{

    gap:60px;

}

.profile-container{

    width:360px;

    height:360px;

}

.hero-left h1{

    font-size:3.5rem;

}

}

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

@media (max-width:992px){

.hero{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-left{

    order:2;

}

.hero-right{

    order:1;

}

.hero-buttons{

    justify-content:center;

}

.social-links{

    justify-content:center;

}

.about-grid,
.skills-grid,
.cert-grid,
.projects-grid,
.stats-container{

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

}

.contact-container{

    grid-template-columns:1fr;

}

.timeline-container{

    padding-left:30px;

}

}

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

@media (max-width:768px){

#hamburger{

    display:block;

}

.nav-menu{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    background:rgba(15,23,42,.98);

    backdrop-filter:blur(20px);

    flex-direction:column;

    align-items:center;

    gap:35px;

    padding:50px 0;

    transition:.4s;

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

}

body.light .nav-menu{

    background:rgba(255,255,255,.96);

}

.nav-menu.active{

    left:0;

}

.hero{

    padding-top:150px;

}

.hero-left h1{

    font-size:3rem;

}

.hero h2{

    font-size:1.6rem;

}

.hero-description{

    font-size:1rem;

}

.profile-container{

    width:320px;

    height:320px;

}

.profile-ring{

    inset:25px;

}

.about-grid,
.skills-grid,
.cert-grid,
.projects-grid,
.stats-container{

    grid-template-columns:1fr;

}

.project-buttons{

    flex-direction:column;

}

.cloud-status{

    grid-template-columns:1fr;

}

.contact-container{

    grid-template-columns:1fr;

}

.footer-icons{

    flex-wrap:wrap;

}

#topBtn{

    right:20px;

    bottom:20px;

}

}

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

@media (max-width:576px){

section{

    padding:80px 20px;

}

.navbar{

    padding:18px 20px;

}

.logo{

    font-size:1.5rem;

}

.hero{

    gap:40px;

}

.hero-left h1{

    font-size:2.5rem;

}

.hero h2{

    font-size:1.3rem;

}

.hero-description{

    line-height:1.8;

}

.profile-container{

    width:270px;

    height:270px;

}

.hero-buttons{

    flex-direction:column;

}

.btn{

    width:100%;

    text-align:center;

}

.social-links{

    gap:15px;

}

.social-links a{

    width:45px;

    height:45px;

}

.section-title h2{

    font-size:2.2rem;

}

.section-title p{

    font-size:.95rem;

}

.skill-card,
.cert-card,
.about-card,
.stat-box,
.timeline-content,
.project-card{

    padding:25px;

}

.timeline-container{

    padding-left:20px;

}

.timeline-dot{

    left:-29px;

}

.cloud-node{

    width:100%;

}

.server{

    width:95px;

    height:95px;

}

.contact-info div{

    flex-direction:column;

    text-align:center;

}

.contact-form input,
.contact-form textarea{

    padding:15px;

}

.footer-content h2{

    font-size:1.5rem;

}

.footer-content p{

    font-size:.9rem;

}

}

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

@media (max-width:360px){

.hero-left h1{

    font-size:2rem;

}

.profile-container{

    width:220px;

    height:220px;

}

.logo{

    font-size:1.3rem;

}

.section-title h2{

    font-size:2rem;

}

.counter{

    font-size:2.2rem;

}

}

/*==========================
      LANDSCAPE PHONES
===========================*/

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

.hero{

    min-height:auto;

    padding:140px 6% 80px;

}

.profile-container{

    width:220px;

    height:220px;

}

.nav-menu{

    max-height:calc(100vh - 80px);

    overflow-y:auto;

}

}

/*==========================
      PRINT
===========================*/

@media print{

header,
footer,
#topBtn,
#loader,
#progress-bar,
.social-links,
.hero-buttons{

    display:none;

}

body{

    background:white;

    color:black;

}

section{

    padding:20px;

}

}