/* ========================== HEADER RESPONSIVE ========================== */
 @media(max-width:900px){
     header{
         padding:15px 0;
    }
     nav{
         flex-wrap:wrap;
    }
     .nav-links{
         gap:20px;
    }
     .logo{
         font-size:24px;
    }
}
 @media(max-width:768px){
     nav{
         flex-direction:column;
         gap:20px;
    }
     .nav-links{
         flex-wrap:wrap;
         justify-content:center;
         gap:15px;
    }
     .nav-links a{
         font-size:14px;
    }
     .theme-btn{
         position:absolute;
         top:20px;
         right:20px;
    }
}
 @media(max-width:480px){
     .nav-links{
         display:none;
    }
     .logo{
         font-size:22px;
    }
}
/* ========================== HERO RESPONSIVE ========================== */
 @media(max-width:1024px){
     .hero-wrapper{
         gap:40px;
    }
     .hero-content h1{
         font-size:48px;
    }
     .hero-content h2{
         font-size:28px;
    }
}
 @media(max-width:768px){
     .hero{
         padding:80px 0;
    }
     .hero-wrapper{
         flex-direction:column-reverse;
         text-align:center;
    }
     .hero-content{
         width:100%;
    }
     .hero-content h1{
         font-size:40px;
    }
     .hero-content h2{
         font-size:24px;
    }
     .hero-content p{
         font-size:15px;
    }
     .hero-btns{
         justify-content:center;
    }
     .hero-image{
         width:70%;
    }
}
 @media(max-width:480px){
     .hero{
         padding:60px 0;
    }
     .hero-content h1{
         font-size:34px;
    }
     .hero-content h2{
         font-size:20px;
    }
     .hero-image{
         width:90%;
    }
     .hero-btns{
         flex-direction:column;
         align-items:center;
    }
     .btn{
         width:100%;
         max-width:250px;
         text-align:center;
    }
}
/* ABOUT RESPONSIVE */
 @media(max-width:991px){
     .about-wrapper{
         flex-direction:column;
         text-align:center;
    }
     .about-cards{
         grid-template-columns:repeat(2,1fr);
    }
}
 @media(max-width:600px){
     .section-title h2{
         font-size:32px;
    }
     .about-content h3{
         font-size:24px;
    }
     .about-cards{
         grid-template-columns:1fr;
    }
}
/*========================== CONTACT RESPONSIVE ===========================*/
 @media(max-width:900px){
     .contact-wrapper{
         flex-direction:column;
    }
}
/*========================== FOOTER RESPONSIVE ===========================*/
 @media(max-width:600px){
     .footer-links{
         flex-direction:column;
         gap:15px;
    }
     .footer-logo{
         font-size:26px;
    }
}
/* ========================== SKILLS RESPONSIVE ========================== */
/* Large Tablets */
 @media (max-width: 1024px){
     .skills-grid{
         grid-template-columns: repeat(2, 1fr);
         gap:25px;
    }
     .skill-card{
         padding:30px;
    }
}
/* Tablets */
 @media (max-width: 768px){
     .skills{
         padding:80px 0;
    }
     .skills-grid{
         grid-template-columns:1fr;
         gap:25px;
    }
     .skill-card{
         text-align:center;
    }
     .skill-tags{
         justify-content:center;
    }
     .skill-card h3{
         font-size:20px;
    }
}
/* Mobile */
 @media (max-width:480px){
     .skills-grid{
         width:100%;
    }
     .skill-card{
         padding:22px;
         border-radius:18px;
    }
     .skill-card i{
         font-size:30px;
    }
     .skill-card h3{
         font-size:18px;
    }
     .skill-tags{
         gap:8px;
    }
     .skill-tags span{
         font-size:13px;
         padding:7px 12px;
    }
}
 @media(max-width:768px){
     nav{
         display:flex;
         align-items:center;
         justify-content:space-between;
    }
     .menu-btn{
         display:block;
    }
     .nav-links{
         position:absolute;
         top:75px;
         left:0;
         width:100%;
         display:flex;
         flex-direction:column;
         align-items:center;
         gap:25px;
         padding:30px 0;
         background:white;
         transform:translateY(-200%);
         transition:.4s ease;
    }
     .nav-links.active{
         transform:translateY(0);
    }

     .theme-btn{
         margin-left:auto;
         margin-right:20px;
    }
}
 .theme-btn{
     position:absolute;
     right:60px;
}