/* ========================== RESET ========================== */
 *{
     margin:0;
     padding:0;
     box-sizing:border-box;
}
 html{
     scroll-behavior:smooth;
}
 body{
     font-family:"Inter",sans-serif;
     background:var(--bg);
     color:var(--text);
     transition:.4s ease;
}
 a{
     text-decoration:none;
}
 li{
     list-style:none;
}
 img{
     width:100%;
     display:block;
}
 .container{
     width:min(1150px,90%);
     margin:auto;
}
/* ========================== THEME VARIABLES ========================== */
 :root{
     --primary:#8B5CF6;
     --secondary:#EC4899;
     --accent:#6366F1;
     --bg:#f8fafc;
     --text:#111827;
     --paragraph:#64748b;
     --card-bg:rgba(255,255,255,.55);
     --border:rgba(0,0,0,.08);
     --nav-bg:rgba(255,255,255,.6);
}
 body.dark{
     --bg:#020617;
     --text:#f8fafc;
     --paragraph:#cbd5e1;
     --card-bg:rgba(255,255,255,.08);
     --border:rgba(255,255,255,.15);
     --nav-bg:rgba(2,6,23,.75);
}
/* ========================== BLOBS ========================== */
 .blob{
     position:fixed;
     width:350px;
     height:350px;
     border-radius:50%;
     filter:blur(120px);
     z-index:-1;
     transition:.5s;
}
 .blob-one{
     top:10%;
     left:-100px;
     background:#8b5cf6;
     opacity:.25;
}
 .blob-two{
     right:-100px;
     bottom:10%;
     background:#ec4899;
     opacity:.20;
}
 body.dark .blob-one{
     opacity:.45;
}
 body.dark .blob-two{
     opacity:.35;
}
/* ========================== HEADER ========================== */
 header{
     position:fixed;
     width:100%;
     top:0;
     z-index:1000;
     background:var(--nav-bg);
     backdrop-filter:blur(18px);
     border-bottom:1px solid var(--border);
}
 nav{
     height:80px;
     display:flex;
     align-items:center;
     justify-content:space-between;
}
 .logo{
     font-family:"Poppins",sans-serif;
     font-size:28px;
     font-weight:700;
     color:var(--text);
}
 .logo span{
     color:var(--primary);
}
 .nav-links{
     display:flex;
     gap:35px;
}
 .nav-links a{
     color:var(--text);
     font-weight:500;
     transition:.3s;
}
 .nav-links a:hover{
     color:var(--primary);
}
 .theme-btn{
     width:42px;
     height:42px;
     border-radius:50%;
     border:none;
     cursor:pointer;
     background:var(--text);
     color:var(--bg);
     display:flex;
     justify-content:center;
     align-items:center;
}
/* ========================== HERO ========================== */
 .hero{
     min-height:100vh;
     display:flex;
     align-items:center;
     padding-top:80px;
}
 .hero-wrapper{
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:60px;
}
 .hero-content{
     flex:1;
}
 .hero-image{
     flex:1;
     display:flex;
     justify-content:center;
}
 .hello{
     color:var(--primary);
     font-weight:600;
}
 .hero-content h1{
     font-family:"Poppins",sans-serif;
     font-size:65px;
     margin:15px 0;
}
 .hero-content h2{
     font-size:32px;
     color:var(--secondary);
     margin-bottom:20px;
}
 .hero-content p{
     color:var(--paragraph);
     line-height:1.8;
     max-width:550px;
}
 .hero-btns{
     display:flex;
     gap:20px;
     margin-top:35px;
}
/* ========================== BUTTONS ========================== */
 .btn{
     padding:14px 28px;
     border-radius:40px;
     transition:.3s;
     display:inline-block;
}
 .primary-btn{
     background:linear-gradient( 135deg, #8B5CF6, #EC4899 );
     color:white;
     box-shadow: 0 10px 30px rgba(139,92,246,.35);
}
 .secondary-btn{
     border:1px solid var(--border);
     color:var(--text);
}
 .btn:hover{
     transform:translateY(-5px);
     box-shadow: 0 15px 35px rgba(139,92,246,.35);
}
/* ========================== GLASS CARD ========================== */
  .skill-card, .project-card, .contact-card, .contact-form, .footer-box{
     background:var(--card-bg);
     backdrop-filter:blur(20px);
     border:1px solid var(--border);
}
 /* .glass-card{
     padding:25px;
     border-radius:30px;
     box-shadow:0 20px 50px rgba(0,0,0,.15);
} */
 .glass-card img{
     border-radius:20px;
}
/* ========================== SECTION TITLE ========================== */
 .section-title{
     text-align:center;
     margin-bottom:70px;
}
 .section-title p{
     color:#8B5CF6;
     font-size:15px;
     letter-spacing:1px;
     margin-bottom:10px;
}
 .section-title h2{
     font-family:"Poppins",sans-serif;
     font-size:42px;
     color:var(--text);
}
/* ========================== ABOUT SECTION ========================== */
 .about{
     padding:120px 0;
}
 .about-wrapper{
     display:flex;
     align-items:center;
     gap:70px;
}
 .about-image, .about-content{
     flex:1;
}
 .about-image .glass-card{
     padding:10px;
}
 .about-content h3{
     font-family:"Poppins",sans-serif;
     font-size:30px;
     margin-bottom:20px;
}
 .about-content p{
     color:var(--paragraph);
     line-height:1.8;
     margin-bottom:18px;
}
 .about-cards{
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:20px;
     margin-top:40px;
}
 .about-card{
     padding:25px;
     text-align:center;
     border-radius:20px;
     background:var(--card-bg);
     backdrop-filter:blur(20px);
     border:1px solid var(--border);
     transition:.35s;
}
 .about-card:hover{
     transform:translateY(-10px);
}
 .about-card i{
     font-size:32px;
     color:var(--secondary);
     margin-bottom:15px;
}
 .about-card h4{
     margin-bottom:8px;
     color:var(--text);
}
 .about-card p{
     font-size:14px;
     margin:0;
}
/* ========================== SKILLS SECTION ========================== */
 .skills{
     padding:120px 0;
}
 .skills-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:30px;
}
 .skill-card{
     padding:35px;
     border-radius:25px;
     transition:.4s;
}
 .skill-card:hover{
     transform:translateY(-10px);
     box-shadow:0 20px 40px rgba(0,0,0,.15);
}
 .skill-card i{
     font-size:35px;
     color:var(--secondary);
     margin-bottom:20px;
}
 .skill-card h3{
     font-size:22px;
     margin-bottom:20px;
     color:var(--text);
}
 .skill-tags{
     display:flex;
     flex-wrap:wrap;
     gap:12px;
}
 .skill-tags span{
     padding:8px 15px;
     border-radius:30px;
     background:rgba(139,92,246,.15);
     color:var(--text);
     font-size:14px;
     transition:.3s;
}
 .skill-tags span:hover{
     background:var(--secondary);
     color:white;
}
/* ========================== PROJECT SECTION ========================== */
 .projects{
     padding:120px 0;
}
 .projects-grid{
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:30px;
}
 .project-card{
     border-radius:25px;
     overflow:hidden;
     transition:.4s;
}
 .project-card:hover{
     transform:translateY(-10px);
}
 .project-image{
     overflow:hidden;
}
 .project-image img{
     transition:.5s;
}
 .project-card:hover img{
     transform:scale(1.1);
}
 .project-content{
     padding:25px;
}
 .project-content h3{
     font-size:22px;
     margin-bottom:12px;
     color:var(--text);
}
 .project-content p{
     color:var(--paragraph);
     line-height:1.7;
}
 .project-btn{
     display:inline-block;
     margin-top:20px;
     color:var(--primary);
     font-weight:600;
}
 .project-btn:hover{
     text-decoration:underline;
}
/* ========================== CONTACT SECTION ========================== */
 .contact{
     padding:120px 0;
}
.contact-btn{
    margin-top: 20px;
}
 .contact-wrapper{
     display:flex;
     gap:70px;
     align-items:flex-start;
}
 .contact-info, .contact-form{
     flex:1;
}
 .contact-info h3{
     font-family:"Poppins",sans-serif;
     font-size:32px;
     margin-bottom:20px;
}
 .contact-info p{
     color:var(--paragraph);
     line-height:1.8;
}
 .contact-card{
     display:flex;
     align-items:center;
     gap:20px;
     padding:20px;
     margin-top:25px;
     border-radius:18px;
}
 .contact-card i{
     font-size:25px;
     color:var(--secondary);
}
 .contact-card h4{
     color:var(--text);
     margin-bottom:5px;
}
 .contact-card p{
     margin:0;
     font-size:14px;
}
 .social-links{
     display:flex;
     gap:15px;
     margin-top:30px;
}
 .social-links a{
     width:45px;
     height:45px;
     display:flex;
     justify-content:center;
     align-items:center;
     border-radius:50%;
     background:var(--secondary);
     color:white;
     transition:.3s;
}
 .social-links a:hover{
     transform:translateY(-5px);
}
/* FORM */
 .contact-form{
     padding:35px;
     border-radius:25px;
}
 .contact-form input, .contact-form textarea{
     width:100%;
     padding:15px;
     margin-bottom:20px;
     border:1px solid var(--border);
     outline:none;
     border-radius:12px;
     background:rgba(255,255,255,.15);
     color:var(--text);
}
 .contact-form textarea{
     height:150px;
     resize:none;
}
 .contact-form input::placeholder, .contact-form textarea::placeholder{
     color:var(--paragraph);
}
 .contact-form button{
     border:none;
     cursor:pointer;
}
/* ========================== FOOTER ========================== */
 .footer{
     padding:60px 0 25px;
}
 .footer-box{
     text-align:center;
     padding:45px 25px;
     border-radius:25px;
}
 .footer-box h3{
     font-family:"Poppins",sans-serif;
     font-size:30px;
     margin-bottom:15px;
}
 .footer-box p{
     max-width:500px;
     margin:auto;
     color:var(--paragraph);
     line-height:1.7;
}
 .footer-social{
     display:flex;
     justify-content:center;
     gap:18px;
     margin-top:30px;
}
 .footer-social a{
     width:45px;
     height:45px;
     display:flex;
     justify-content:center;
     align-items:center;
     border-radius:50%;
     background:var(--secondary);
     color:white;
     transition:.3s;
}
 .footer-social a:hover{
     transform:translateY(-7px);
}
 .footer-bottom{
     text-align:center;
     margin-top:25px;
     color:var(--paragraph);
     font-size:14px;
}
/* ========================== HAMBURGER ========================== */
 .menu-btn{
     display:none;
     font-size:28px;
     cursor:pointer;
     color:var(--text);
}
/* ========================== RESPONSIVE ========================== */
 @media(max-width:1024px){
     .hero-content h1{
         font-size:52px;
    }
     .about-wrapper{
         gap:40px;
    }
     .projects-grid{
         grid-template-columns:repeat(2,1fr);
    }
}
 @media(max-width:768px){
    /* HEADER */
     .menu-btn{
         display:block;
    }
     nav{
         height:70px;
    }
     .nav-links{
         position:absolute;
         top:70px;
         left:0;
         width:100%;
         padding:30px 0;
         flex-direction:column;
         align-items:center;
         gap:25px;
         background:var(--nav-bg);
         backdrop-filter:blur(20px);
         transform:translateY(-150%);
         transition:.4s;
    }
     .nav-links.active{
         transform:translateY(0);
    }
    /* HERO */
     .hero-wrapper{
         flex-direction:column-reverse;
         text-align:center;
    }
     .hero-content h1{
         font-size:40px;
    }
     .hero-content h2{
         font-size:24px;
    }
     .hero-btns{
         justify-content:center;
    }
     .hero-image{
         width:80%;
    }
    /* ABOUT */
     .about-wrapper{
         flex-direction:column;
    }
     .about-cards{
         grid-template-columns:1fr;
    }
    /* SKILLS */
     .skills-grid{
         grid-template-columns:1fr;
    }
    /* PROJECTS */
     .projects-grid{
         grid-template-columns:1fr;
    }
    /* CONTACT */
     .contact-wrapper{
         flex-direction:column;
         gap:40px;
    }
}
 @media(max-width:480px){
     .container{
         width:92%;
    }
     .hero-content h1{
         font-size:34px;
    }
     .section-title h2{
         font-size:32px;
    }
     .skill-card, .contact-form{
         padding:25px;
    }
     .footer-box h3{
         font-size:24px;
    }
}