/* ==========================================
   RESPONSIVE.CSS
   Muhammad Sufyan Portfolio
==========================================*/

/* ===============================
   Large Screens (1200px and below)
================================ */

@media (max-width:1200px){

.container{
    width:95%;
}

.hero{
    gap:40px;
}

.hero-content h1{
    font-size:56px;
}

.hero-image img{
    width:340px;
    height:340px;
}

}

/* ===============================
   Tablets (992px and below)
================================ */

@media (max-width:992px){

.hero{
    flex-direction:column-reverse;
    text-align:center;
    padding-top:140px;
}

.hero-content{
    width:100%;
}

.hero-text{
    margin:auto;
}

.hero-buttons{
    justify-content:center;
}

.hero-image img{
    width:300px;
    height:300px;
    margin-bottom:30px;
}

.about-grid,
.cert-grid,
.contact-grid{
    grid-template-columns:repeat(2,1fr);
}

.timeline::before{
    left:30px;
}

.timeline-item{
    width:100%;
    left:0 !important;
    padding-left:70px;
}

.timeline-item::before{
    left:20px !important;
}

}

/* ===============================
   Mobile (768px and below)
================================ */

@media (max-width:768px){

.navbar{
    padding:15px 20px;
}

.logo{
    font-size:22px;
}

.menu-btn{
    display:flex;
}

.nav-links{
    position:fixed;
    top:75px;
    right:-100%;
    width:260px;
    height:calc(100vh - 75px);
    background:#08131f;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    padding-top:50px;
    gap:30px;
    transition:.4s;
}

.nav-links.active{
    right:0;
}

.hero{
    padding:120px 20px 80px;
}

.hero-content h1{
    font-size:42px;
}

.hero-content h2{
    font-size:26px;
}

.hero-content h3{
    font-size:18px;
}

.hero-text{
    font-size:16px;
}

.hero-image img{
    width:240px;
    height:240px;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.btn{
    width:240px;
    text-align:center;
}

.about-grid,
.cert-grid,
.contact-grid{
    grid-template-columns:1fr;
}

section h2{
    font-size:34px;
}

}

/* ===============================
   Small Mobile (576px)
================================ */

@media (max-width:576px){

.hero-content h1{
    font-size:34px;
}

.hero-content h2{
    font-size:22px;
}

.hero-image img{
    width:200px;
    height:200px;
}

.card,
.cert-card,
.education-box,
.contact-grid div{
    padding:25px;
}

.timeline-item{
    padding:25px 20px 25px 60px;
}

section{
    padding:80px 0;
}

}

/* ===============================
   Extra Small Devices
================================ */

@media (max-width:380px){

.logo{
    font-size:18px;
}

.hero-content h1{
    font-size:30px;
}

.hero-content h2{
    font-size:20px;
}

.hero-text{
    font-size:15px;
}

.btn{
    width:100%;
}

.nav-links{
    width:100%;
}

}

/* ===============================
   Landscape Phones
================================ */

@media (max-height:500px){

.hero{
    padding-top:100px;
    min-height:auto;
}

.nav-links{
    overflow-y:auto;
}

}

/* ===============================
   Images
================================ */

img{
    max-width:100%;
    height:auto;
}

/* ===============================
   Tables
================================ */

table{
    display:block;
    overflow-x:auto;
    width:100%;
}

/* ===============================
   Form Elements
================================ */

input,
textarea,
select,
button{
    width:100%;
}

/* ===============================
   Utility
================================ */

.hide-mobile{
    display:block;
}

.show-mobile{
    display:none;
}

@media(max-width:768px){

.hide-mobile{
    display:none;
}

.show-mobile{
    display:block;
}

}