/*=========================================================
                RESPONSIVE.CSS
                Mohd Kaif Portfolio
==========================================================*/

/*=============================
Large Desktop
==============================*/

@media (max-width:1400px){

.container{
    width:92%;
}

.hero h1{
    font-size:54px;
}

}

/*=============================
Laptop
==============================*/

@media (max-width:1200px){

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-image{

    order:-1;

}

.hero-image img{

    width:360px;

}

.hero-buttons{

    justify-content:center;

}

.social-icons{

    justify-content:center;

}

.about-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.about-image{

    margin-bottom:30px;

}

.contact-grid{

    grid-template-columns:1fr;

}

.project-grid{

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

}

.skills-grid{

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

}

.service-grid{

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

}

.counter-grid{

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

}

.process-grid{

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

}

.achievement-grid{

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

}

}

/*=============================
Tablet
==============================*/

@media (max-width:992px){

section{

    padding:80px 0;

}

h1{

    font-size:48px;

}

h2{

    font-size:34px;

}

nav{

    position:fixed;

    top:80px;

    right:-100%;

    width:280px;

    height:100vh;

    background:#111827;

    transition:.4s;

    padding-top:40px;

}

nav.active{

    right:0;

}

nav ul{

    flex-direction:column;

    align-items:center;

    gap:30px;

}

.menu-btn{

    display:block;

}

.skills-grid{

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

}

.service-grid{

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

}

.project-grid{

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

}

.process-grid{

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

}

.tech-grid{

    justify-content:center;

}

.hero{

    padding-top:120px;

}

.hero-image img{

    width:300px;

}

.page-banner{

    padding-top:140px;

}

.timeline-item{

    margin-left:50px;

}

.timeline::before{

    left:15px;

}

.timeline-item::before{

    left:-45px;

}

}

/*=============================
Mobile
==============================*/

@media (max-width:768px){

.container{

    width:94%;

}

section{

    padding:70px 0;

}

.hero{

    text-align:center;

}

.hero h1{

    font-size:40px;

}

.hero h2{

    font-size:28px;

}

.hero p{

    font-size:15px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons a{

    width:220px;

    text-align:center;

}

.social-icons{

    justify-content:center;

}

.hero-image img{

    width:250px;

}

.about-image img{

    width:250px;

    height:250px;

}

.skills-grid{

    grid-template-columns:1fr;

}

.service-grid{

    grid-template-columns:1fr;

}

.project-grid{

    grid-template-columns:1fr;

}

.counter-grid{

    grid-template-columns:1fr;

}

.process-grid{

    grid-template-columns:1fr;

}

.achievement-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

input,
textarea{

    width:100%;

}

.timeline-item{

    margin-left:35px;

    padding:20px;

}

.timeline::before{

    left:8px;

}

.timeline-item::before{

    left:-30px;

}

.page-banner h1{

    font-size:40px;

}

.section-title{

    font-size:32px;

}

}

/*=============================
Small Mobile
==============================*/

@media (max-width:576px){

.logo{

    font-size:24px;

}

h1{

    font-size:34px;

}

h2{

    font-size:28px;

}

.hero-image img{

    width:220px;

}

.btn{

    width:100%;

    text-align:center;

}

.btn-outline{

    width:100%;

    text-align:center;

}

.hero-buttons{

    width:100%;

}

.card{

    padding:20px;

}

.skill-card{

    padding:25px;

}

.service-card{

    padding:25px;

}

.project-card{

    padding:15px;

}

.project-card img{

    height:220px;

    object-fit:cover;

}

.contact-form{

    padding:20px;

}

.page-banner{

    padding-top:130px;

}

.social-icons a{

    width:45px;

    height:45px;

}

.tech-grid span{

    font-size:13px;

}

}

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

@media (max-width:400px){

.hero h1{

    font-size:30px;

}

.hero h2{

    font-size:22px;

}

.hero-image img{

    width:180px;

}

.section-title{

    font-size:26px;

}

.btn{

    padding:12px 20px;

    font-size:14px;

}

.btn-outline{

    padding:12px 20px;

    font-size:14px;

}

.social-icons{

    gap:10px;

}

.social-icons a{

    width:40px;

    height:40px;

}

.page-banner h1{

    font-size:30px;

}

.tech-grid{

    gap:10px;

}

.tech-grid span{

    padding:10px 15px;

    font-size:12px;

}

}

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

@media (max-height:500px){

.hero{

    padding:120px 0 60px;

}

nav{

    overflow-y:auto;

}

}

/*=============================
Print
==============================*/

@media print{

header,
footer,
.menu-btn,
.social-icons,
.btn,
.btn-outline{

    display:none;

}

body{

    background:#fff;

    color:#000;

}

section{

    padding:20px 0;

}

}