/* RESET & FONTS */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:#1c0122;color:#F8FAFC;line-height:1.6;}
h1,h2,h3,h4{font-family:'Times','Times New Roman', Times, serif;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;}

/* NAVIGATION */
nav{position:sticky;top:0;background:#14081c;padding:15px 0;z-index:1000;box-shadow:0 2px 6px rgba(0,0,0,0.4);}
.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px;}
.nav-logo{font-weight:700;font-size:1.5rem;color:#C084FC;}
.nav-links a{margin-left:25px;color:#F8FAFC;font-weight:500;transition:0.3s;}
.nav-links a:hover,.nav-links a.active{color:#C084FC;}
.hamburger{display:none;flex-direction:column;cursor:pointer;}
.hamburger div{width:25px;height:3px;background:#F8FAFC;margin:4px 0;transition:0.4s;}
.nav-links-mobile{display:none;flex-direction:column;background:#0F172A;position:absolute;top:60px;left:0;width:100%;padding:20px 0;}
.nav-links-mobile a{margin:10px 0;text-align:center;}

/* BUTTONS */
.btn-primary{background:#E11D48;color:#F8FAFC;padding:12px 30px;border:none;border-radius:6px;font-weight:600;transition:0.3s;}
.btn-primary:hover{background:#BE123C;}
.btn-secondary{border:2px solid #E11D48;color:#E11D48;padding:10px 28px;border-radius:6px;font-weight:600;background:none;transition:0.3s;}
.btn-secondary:hover{background:#E11D48;color:#F8FAFC;}

/* SECTIONS */
section{padding:80px 20px;}
.container{max-width:1200px;margin:0 auto;}

/* HERO */
.hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:100vh;
  padding:60px;
  background:#14081c;
  color:white;
  flex-wrap:wrap;
}

.hero-left{
  max-width:600px;
}

.hero-left h1{
  font-size:2.8rem;
}

.highlight{
  color:#C084FC;
}

.typing-text{
  margin:10px 0;
  font-size:1.3rem;
  color:#aaa;
}

.hero-description{
  margin:20px 0;
  line-height:1.6;
  color:#ccc;
}

.hero-buttons{
  margin-top:20px;
}

.hero-right img{
  width:350px;
  border-radius:20px;
  filter:grayscale(100%);
}

/* Buttons */
.btn-primary{
  background:#C084FC;
  color:white;
  padding:12px 25px;
  border-radius:25px;
  text-decoration:none;
  margin-right:10px;
}

.btn-secondary{
  border:1px solid #C084FC;
  color:#C084FC;
  padding:12px 25px;
  border-radius:25px;
  text-decoration:none;
}

/* Tech Stack */
.tech-stack{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tech-stack span{
  background:#1a1a1a;
  padding:6px 14px;
  border-radius:20px;
  font-size:0.8rem;
}

/* ABOUT */
.about{
  padding:80px 60px;
  background:#14081c;
  color:white;
}

.about-container{
  display:flex;
  gap:50px;
  align-items:center;
  flex-wrap:wrap;
}

.about-image img{
  width:300px;
  border-radius:20px;
}

.about-content{
  max-width:600px;
}

.about-content h2{
  font-size:2rem;
  margin-bottom:20px;
}

.about-content p{
  color:#ccc;
  margin-bottom:15px;
}

/* Achievements */
.about-achievements{
  display:flex;
  gap:20px;
  margin-top:25px;
  flex-wrap:wrap;
}

.achievement-card{
  background:#14081c;
  padding:15px 20px;
  border-radius:10px;
  text-align:center;
  min-width:120px;
}

.achievement-card h3{
  color:#E11D48;
}


/* SERVICES */
/* Container Split */
.services-container{
  display:flex;
  gap:50px;
  padding:60px 20px;
  flex-wrap:wrap;
  align-items:flex-start;
}

/* Left side (title & text) */
.services-left{
  flex:1;
  min-width:250px;
}

.services-left h2{
  font-size:2rem;
  margin-bottom:15px;
}

.services-left p{
  color:#94A3B8;
  line-height:1.6;
}

/* Right side (cards) */
.services-right{
  flex:2;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

/* Individual Cards */
.service-card{
  background:#1a1a1a;
  padding:20px;
  border-radius:10px;
  transition:0.3s;
  border:1px solid #334155;
}

.service-card:hover{
  transform:translateY(-5px);
  border-color:#C084FC;
}

.service-card h3{
  margin-bottom:10px;
  color:#E2E8F0;
}

.service-card p{
  color:#94A3B8;
  font-size:0.9rem;
}

/* Icon Styling */
.service-icon{
  font-size:2rem;
  color:#C084FC;
  margin-bottom:15px;
}

/* Responsive for mobile */
@media(max-width:768px){
  .services-container{
    flex-direction:column;
  }
  .services-right{
    grid-template-columns:1fr;
  }
}



/* PROJECT — grid layout like expertise but custom 2-1 structure */
.projects-section{
    padding:100px 8%;
    background:#14081c;
    color:white;
}

/* HEADER */

.projects-header{
    margin-bottom:60px;
}

.projects-label{
    color:#C084FC;
    letter-spacing:2px;
    font-size:0.9rem;
}

.projects-header h2{
    font-size:3rem;
    margin:15px 0;
}

.projects-header p{
    color:#94A3B8;
    max-width:600px;
    line-height:1.8;
}

/* GRID */

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

/* CARD */

.project-card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:24px;
    overflow:hidden;
    transition:0.3s;
    backdrop-filter:blur(12px);
}

.project-card:hover{
    transform:translateY(-8px);
    border-color:#C084FC;
}

/* IMAGE */

.project-image{
    position:relative;
}

.project-image img{
    width:100%;
    height:220px;
    object-fit:cover;
}

/* STATUS */

.status{
    position:absolute;
    top:18px;
    right:18px;
    padding:8px 14px;
    border-radius:20px;
    font-size:0.8rem;
    font-weight:600;
}

.completed{
    background:#16A34A;
    color:white;
}

.progress{
    background:#F59E0B;
    color:white;
}

/* CONTENT */

.project-content{
    padding:25px;
}

.project-content h3{
    margin-bottom:15px;
    font-size:1.4rem;
}

.project-content p{
    color:#94A3B8;
    line-height:1.7;
    margin-bottom:25px;
}

/* TAGS */

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;
}

.project-tags span{
    background:#111827;
    padding:8px 14px;
    border-radius:20px;
    font-size:0.8rem;
    color:#CBD5E1;
}

/* BUTTON */

.project-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:white;
    background:linear-gradient(90deg,#C084FC,#A855F7);
    padding:12px 20px;
    border-radius:14px;
    transition:0.3s;
}

.project-btn:hover{
    transform:translateY(-3px);
}

/* MODAL */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.95);justify-content:center;align-items:center;z-index:2000;}
.modal-content{background:#a08fac;padding:30px;border-radius:10px;max-width:600px;width:90%;text-align:center;position:relative;}
.close{position:absolute;top:10px;right:15px;font-size:1.5rem;cursor:pointer;color:#E11D48;}

/* TESTIMONIALS */
#testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.testimonial-card{background:#14081c;border-radius:10px;padding:20px;box-shadow:0 4px 6px rgba(154, 151, 151, 0.3);opacity:0;transform:translateY(20px);}
.testimonial-card.visible{opacity:1;transform:translateY(0);}
.testimonial-card p{font-style:italic;color:ghostwhite;}
.testimonial-card h4{color:#8a6492;margin-top:10px;font-weight:600;}

/* CONTACT ME */
.contact-section{
    padding:100px 8%;
    background:#14081c;
    color:white;
    position:relative;
    overflow:hidden;
}

/* Glow effect */

.contact-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:#14081c;
    filter:blur(120px);
    top:-100px;
    left:-100px;
}

/* WRAPPER */

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    position:relative;
    z-index:2;
}

/* LEFT */

.contact-label{
    color:#C084FC;
    font-size:0.9rem;
    letter-spacing:2px;
}

.contact-left h2{
    font-size:3rem;
    margin:15px 0;
}

.contact-text{
    color:#94A3B8;
    line-height:1.8;
    margin-bottom:35px;
    max-width:500px;
}

/* CARDS */

.contact-card{
    display:flex;
    gap:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    padding:20px;
    border-radius:18px;
    margin-bottom:18px;
    backdrop-filter:blur(12px);
    transition:0.3s;
}

.contact-card:hover{
    transform:translateY(-4px);
    border-color:#C084FC;
}

.contact-icon{
    width:55px;
    height:55px;
    background:rgba(192,132,252,0.15);
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#C084FC;
    font-size:1.2rem;
}

.contact-card h4{
    font-size:0.8rem;
    color:#94A3B8;
    margin-bottom:5px;
}

.contact-card p{
    font-weight:600;
}

.contact-card span{
    font-size:0.85rem;
    color:#64748B;
}

/* SOCIALS */

.social-section{
    margin-top:30px;
}

.social-section h5{
    color:#94A3B8;
    margin-bottom:15px;
    letter-spacing:2px;
}

.social-icons{
    display:flex;
    gap:15px;
}

.social-icons a{
    width:45px;
    height:45px;
    border-radius:12px;
    background:rgba(255,255,255,0.04);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    transition:0.3s;
}

.social-icons a:hover{
    background:#C084FC;
}

/* STATUS */

.availability{
    margin-top:30px;
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.03);
    padding:15px 20px;
    border-radius:14px;
    width:fit-content;
}

.dot{
    width:10px;
    height:10px;
    background:#22C55E;
    border-radius:50%;
}

/* RIGHT SIDE */

.contact-right{
    background:#14081c;
    border:1px solid rgba(255,255,255,0.06);
    padding:35px;
    border-radius:24px;
    backdrop-filter:blur(20px);
}

.contact-form h3{
    margin-bottom:25px;
    font-size:1.5rem;
}

/* GRID */

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.input-group{
    margin-bottom:20px;
}

.input-group label{
    display:block;
    margin-bottom:8px;
    color:#CBD5E1;
    font-size:0.9rem;
}

.input-group input,
.input-group textarea{
    width:100%;
    padding:15px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
    background:#0F172A;
    color:white;
    outline:none;
}

.input-group input:focus,
.input-group textarea:focus{
    border-color:#C084FC;
}

/* BUTTON */

.send-btn{
    width:100%;
    padding:16px;
    border:none;
    border-radius:14px;
    background:linear-gradient(90deg,#C084FC,#A855F7);
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.send-btn:hover{
    transform:translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:900px){

.contact-wrapper{
    grid-template-columns:1fr;
}

.form-grid{
    grid-template-columns:1fr;
}

.contact-left h2{
    font-size:2.3rem;
}

}
.contact-section{
    padding:100px 8%;
    background:#14081c;
    color:white;
    position:relative;
    overflow:hidden;
}

/* Glow effect */

.contact-section::before{
    content:'';
    position:absolute;
    width:500px;
    height:300px;
    background:rgba(168,85,247,0.25);
    filter:blur(120px);
    top:-100px;
    left:-100px;
}

/* WRAPPER */

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    position:relative;
    z-index:2;
}

/* LEFT */

.contact-label{
    color:#C084FC;
    font-size:0.9rem;
    letter-spacing:2px;
}

.contact-left h2{
    font-size:3rem;
    margin:15px 0;
}

.contact-text{
    color:#94A3B8;
    line-height:1.8;
    margin-bottom:35px;
    max-width:500px;
}

/* CARDS */

.contact-card{
    display:flex;
    gap:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    padding:20px;
    border-radius:18px;
    margin-bottom:18px;
    backdrop-filter:blur(12px);
    transition:0.3s;
}

.contact-card:hover{
    transform:translateY(-4px);
    border-color:#C084FC;
}

.contact-icon{
    width:55px;
    height:55px;
    background:rgba(192,132,252,0.15);
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#C084FC;
    font-size:1.2rem;
}

.contact-card h4{
    font-size:0.8rem;
    color:#94A3B8;
    margin-bottom:5px;
}

.contact-card p{
    font-weight:600;
}

.contact-card span{
    font-size:0.85rem;
    color:#64748B;
}

/* SOCIALS */

.social-section{
    margin-top:30px;
}

.social-section h5{
    color:#94A3B8;
    margin-bottom:15px;
    letter-spacing:2px;
}

.social-icons{
    display:flex;
    gap:15px;
}

.social-icons a{
    width:45px;
    height:45px;
    border-radius:12px;
    background:rgba(255,255,255,0.04);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    transition:0.3s;
}

.social-icons a:hover{
    background:#C084FC;
}

/* STATUS */

.availability{
    margin-top:30px;
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.03);
    padding:15px 20px;
    border-radius:14px;
    width:fit-content;
}

.dot{
    width:10px;
    height:10px;
    background:#22C55E;
    border-radius:50%;
}

/* RIGHT SIDE */

.contact-right{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    padding:35px;
    border-radius:24px;
    backdrop-filter:blur(20px);
}

.contact-form h3{
    margin-bottom:25px;
    font-size:1.5rem;
}

/* GRID */

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.input-group{
    margin-bottom:20px;
}

.input-group label{
    display:block;
    margin-bottom:8px;
    color:#CBD5E1;
    font-size:0.9rem;
}

.input-group input,
.input-group textarea{
    width:100%;
    padding:15px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
    background:#0F172A;
    color:white;
    outline:none;
}

.input-group input:focus,
.input-group textarea:focus{
    border-color:#C084FC;
}

/* BUTTON */

.send-btn{
    width:100%;
    padding:16px;
    border:none;
    border-radius:14px;
    background:linear-gradient(90deg,#C084FC,#A855F7);
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.send-btn:hover{
    transform:translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:900px){

.contact-wrapper{
    grid-template-columns:1fr;
}

.form-grid{
    grid-template-columns:1fr;
}

.contact-left h2{
    font-size:2.3rem;
}

}

/* Modal Styles */
.modal{
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.8);
  justify-content:center;
  align-items:center;
  z-index:1000;
}

.modal-content{
  background:#1e293b;
  padding:30px;
  border-radius:15px;
  width:90%;
  max-width:500px;
  position:relative;
  color:white;
}

.modal-content h3{
  margin-bottom:20px;
}

.modal-content input,
.modal-content textarea{
  width:100%;
  margin-bottom:15px;
  padding:12px;
  border-radius:8px;
  border:none;
}

.modal-content button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:8px;
  background:#E11D48;
  color:white;
  cursor:pointer;
}

.close{
  position:absolute;
  top:10px;
  right:15px;
  font-size:1.5rem;
  cursor:pointer;
}

/* FOOTER */
footer{padding:10px 10px;text-align:center;color:#94A3B8;background:#1c0122;}

/* RESPONSIVE */
@media(max-width:768px){
  #hero h1{font-size:2.5rem;}
  #hero h2{font-size:1.3rem;}
  #about{flex-direction:column;}
  .hamburger{display:flex;}
  .nav-links{display:none;}
  .nav-links-mobile.active{display:flex;}
}