/*=========================================
        RESPONSIVE CSS
        Rahmat Portfolio
==========================================*/


/*=========================================
      LARGE LAPTOP (1200px)
==========================================*/

@media (max-width:1200px){

.container{
    width:95%;
}

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

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

}


/*=========================================
      LAPTOP (992px)
==========================================*/

@media (max-width:992px){

.hero-content,
.about-content,
.contact-container{

    display:flex;
    flex-direction:column;
    text-align:center;
    gap:40px;

}

.hero-image{
    margin-top:40px;
}

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

.social-icons{
    justify-content:center;
}

.services-grid,
.portfolio-grid,
.testimonial-grid{

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

}

.footer-content{

    grid-template-columns:1fr;
    text-align:center;

}

.timeline{

    padding-left:30px;

}

}


/*=========================================
      TABLET (768px)
==========================================*/

@media (max-width:768px){

header .container{

    flex-direction:column;
    height:auto;
    padding:20px 0;

}

nav ul{

    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    margin:20px 0;

}

.hire-btn{

    margin-top:15px;

}

.hero{

    padding-top:180px;

}

.hero h1{

    font-size:42px;

}

.hero h2{

    font-size:26px;

}

.hero-image img{

    width:280px;
    height:280px;

}

.services-grid,
.portfolio-grid,
.testimonial-grid{

    grid-template-columns:1fr;

}

.portfolio-filter{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;

}

.portfolio-filter button{

    padding:10px 18px;

}

.contact-container{

    grid-template-columns:1fr;

}

.footer-content{

    grid-template-columns:1fr;

}

}


/*=========================================
      MOBILE (576px)
==========================================*/

@media (max-width:576px){

.container{

    width:92%;

}

.hero{

    padding-top:190px;

}

.hero h1{

    font-size:34px;

}

.hero h2{

    font-size:22px;

}

.description{

    font-size:15px;

}

.hero-image img{

    width:230px;
    height:230px;

}

.hero-buttons{

    flex-direction:column;
    gap:15px;

}

.btn-primary,
.btn-secondary{

    width:100%;
    text-align:center;

}

.social-icons{

    justify-content:center;
    flex-wrap:wrap;

}

.section-title{

    font-size:30px;

}

.section-subtitle{

    font-size:16px;

}

.portfolio-filter{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;

}

.portfolio-filter button{

    font-size:14px;
    padding:10px 15px;

}

.contact{

    padding:80px 20px;

}

.contact-container{

    display:grid;
    grid-template-columns:1fr;
    gap:30px;

}

.contact-box{

    width:100%;

}

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

    width:100%;

}

.footer{

    text-align:center;

}

.footer-content{

    grid-template-columns:1fr;
    gap:40px;

}

.footer-links ul{

    padding:0;

}

.footer-links li{

    list-style:none;

}

.timeline{

    padding-left:20px;

}

.timeline-dot{

    left:-31px;

}

}


/*=========================================
      SMALL MOBILE (400px)
==========================================*/

@media (max-width:400px){

.logo{

    font-size:26px;

}

.hero h1{

    font-size:28px;

}

.hero h2{

    font-size:18px;

}

.hero-image img{

    width:190px;
    height:190px;

}

.btn-primary,
.btn-secondary{

    padding:14px;

}

.portfolio-filter button{

    width:100%;

}

.contact-box{

    flex-direction:column;
    text-align:center;

}

.contact-box i{

    margin-bottom:10px;

}

.footer-about h2{

    font-size:28px;

}

}

/*=========================
      STATS RESPONSIVE
==========================*/

@media (max-width:768px){

    .stats-container{
        grid-template-columns:1fr 1fr;
    }

}

@media (max-width:500px){

    .stats-container{
        grid-template-columns:1fr;
    }

}

/*=========================================
        MOBILE MENU
=========================================*/

@media (max-width:768px){
.hire-btn{

    display:none;

}

nav{

    width:100%;

}

.menu-toggle{

    display:block;
    text-align:right;

}

.nav-links{

    position:absolute;

    top:80px;

    left:-100%;

    width:100%;

    background:#0f172a;

    flex-direction:column;

    align-items:center;

    padding:30px 0;

    gap:25px;

    transition:.4s;

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

}

.nav-links.active{

    left:0;

}

}