/* =========================================================
   BASE & THEME
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

:root{
  --bg-0:#0f0b1a;
  --bg-1:#15122a;
  --card:#1b1740;
  --text:#f6f4ff;
  --muted:#bdb6d8;
  --accent:#c084fc;
  --accent-2:#7dd3fc;
  --accent-3:#f472b6;
  --radius-lg:22px;
  --radius:14px;
  --shadow:0 12px 40px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background: linear-gradient(180deg,var(--bg-0),var(--bg-1));
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height: 1.6;
}

a{ color: var(--accent-2); text-decoration: none; }
a:hover{ color: var(--accent); text-decoration: underline; text-underline-offset:.25rem; }

/* =========================================================
   NAVIGATION
   ========================================================= */
nav, .nav-links{ display:flex; }
nav{
  justify-content:space-between;
  align-items:center;
  padding: 0 1.5rem;
  height:70px;
  background: rgba(15,11,26,.35);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(192,132,252,.18);
}
.nav-links{ gap:1.5rem; list-style:none; font-size:1rem; }
.logo{ font-size:1.5rem; font-weight:700; color:var(--text); }
.nav-links a{ color:var(--text); }
.nav-links a:hover{ color:var(--accent); }

/* Hamburger navigation */
#hamburger-nav{ display:none; }
.hamburger-menu{ position:relative; display:inline-block; z-index:1002; }
.hamburger-icon{
  display:flex; flex-direction:column; justify-content:space-between;
  height:24px; width:30px; cursor:pointer;
}
.hamburger-icon span{
  width:100%; height:2px; background:var(--text); transition:all .3s ease-in-out;
}
.menu-links{
  position:absolute; top:100%; right:0;
  width:220px; max-height:0; overflow:hidden;
  background:rgba(21,18,42,.95);
  border:1px solid rgba(192,132,252,.2);
  border-radius:var(--radius);
  transition: all .3s ease-in-out;
  box-shadow: var(--shadow);
  z-index:1001;
}
.menu-links a{ display:block; padding:12px 16px; font-size:1rem; color:var(--text); }
.menu-links li{ list-style:none; }
.menu-links.open{ max-height:300px; }
.hamburger-icon.open span:first-child{ transform: rotate(45deg) translate(6px, 6px); }
.hamburger-icon.open span:nth-child(2){ opacity:0; }
.hamburger-icon.open span:last-child{ transform: rotate(-45deg) translate(6px, -6px); }

/* =========================================================
   LAYOUT: SECTIONS & TITLES
   ========================================================= */
section{
  padding: 4vh 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.section-container{ display:flex; flex-wrap:wrap; gap:2rem; }

.title{
  font-size:2.5rem; font-weight:800; text-align:center;
  background: linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom: 1rem;
}
.section__text__p1, .section__text__p2{ color:var(--muted); }

/* =========================================================
   PROFILE (HERO)
   ========================================================= */
#profile{
  display:flex; flex-direction:column; align-items:center; gap:2rem;
  text-align:center; margin-top:30px;
}
.section__text p{ font-weight:600; }
.section__text__p2{ font-size:1.5rem; margin-bottom:1rem; }

#profile .section__pic-container{
  height:220px; width:220px; border-radius:50%; overflow:hidden;
  border:2px solid rgba(192,132,252,.45);
  box-shadow:0 8px 30px rgba(192,132,252,.25);
}
#profile .section__pic-container img{ width:100%; height:100%; object-fit:cover; }

#socials-container{ display:flex; justify-content:center; margin-top:1rem; gap:1rem; }
.icon{ height:2rem; cursor:pointer; transition: transform .3s ease; }
.icon:hover{ transform: scale(1.08); }

.btn-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.btn{
  padding:.9rem 1rem; border-radius:var(--radius);
  font-weight:600; min-width:140px;
  border:1px solid rgba(192,132,252,.35);
  text-align:center; cursor:pointer;
}
.btn-color-1{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0b12; border:none; }
.btn-color-2{ background:rgba(255,255,255,.06); color:var(--text); }

/* =========================================================
   ABOUT
   ========================================================= */
#about .about-containers{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap:1rem;
}
.details-container{
  padding:1.5rem; border-radius:var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(192,132,252,.25);
  text-align:center;
}

/* =========================================================
   EXPERIENCE
   ========================================================= */
.article-container{
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center;
}
article{ display:flex; flex-direction:column; align-items:center; width:140px; gap:.5rem; }

/* =========================================================
   PROJECTS
   ========================================================= */
#projects{ position:relative; }
.color-container{
  border-color: rgba(163,163,163,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
#projects .about-containers{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:2rem; align-items:stretch;
}
#projects .details-container{
  display:flex; flex-direction:column; gap:1rem; padding:1.25rem; height:100%;
  border-radius:var(--radius-lg);
}
#projects .article-container{ aspect-ratio:16/9; overflow:hidden; border-radius:1rem; }
#projects .project-img{ width:100%; height:100%; object-fit:cover; }
#projects .project-title{
  font-size:1.35rem; font-weight:700; text-align:center; min-height:2.8rem;
  margin:.25rem 0 .5rem; color:var(--text);
}
#projects .project-desc{
  font-size:.98rem; color:var(--text); text-align:center; line-height:1.5;
  margin:.25rem 0 .5rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; min-height:3.6rem;
}
#projects .btn-container{ margin-top:auto; justify-content:center; gap:.75rem; }
#projects .project-btn{ min-width:120px; color:var(--text); border-color: rgba(192,132,252,.35); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-info-upper-container{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
  border:1px solid rgba(192,132,252,.25);
  border-radius:var(--radius-lg);
  padding:1rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{ padding:1.5rem; text-align:center; color:var(--muted); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  nav{ padding:0 1rem; }
  #desktop-nav{ display:none; }
  #hamburger-nav{ display:flex; }
  .title{ font-size:2rem; }
  .section__text__p2{ font-size:1.3rem; }
}

@media (max-width:600px){
  .btn{ min-width:100%; }
  #profile .section__pic-container{ height:180px; width:180px; }
  .title{ font-size:1.8rem; }
}