:root {

  --bg-primary: #0d1117;

  --bg-secondary: #161b22;

  --card-bg: #21262d;

  --bg-soft: #1c2128;

  --text-main: #c9d1d9;

  --text-dim: #8b949e;

  --accent: #58a6ff;

  --accent-green: #7ee787;

  --border: #30363d;

  --white: #ffffff;

}


/* =========================
   RESET
========================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  font-family: "Inter", sans-serif;

  background: var(--bg-primary);

  color: var(--text-main);

  line-height: 1.7;

  overflow-x: hidden;

}


.container {

  width: 90%;

  max-width: 1150px;

  margin: auto;

}


section {

  scroll-margin-top: 80px;

}


/* =========================
   HEADER
========================= */

.header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: rgba(13, 17, 23, 0.88);

  backdrop-filter: blur(15px);

  border-bottom: 1px solid var(--border);

}


.nav-container {

  min-height: 72px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}


.logo {

  font-size: 1.4rem;

  font-weight: 800;

  color: var(--white);

  text-decoration: none;

}


.logo span {

  color: var(--accent);

}


.nav-links {

  display: flex;

  list-style: none;

  gap: 2rem;

}


.nav-links a {

  color: var(--text-main);

  text-decoration: none;

  font-size: 0.9rem;

  transition: 0.3s;

}


.nav-links a:hover {

  color: var(--accent);

}


.hamburger {

  display: none;

  background: transparent;

  border: none;

  color: var(--white);

  font-size: 1.7rem;

  cursor: pointer;

}


/* =========================
   HERO
========================= */

.hero {

  min-height: 720px;

  display: flex;

  align-items: center;

  padding: 7rem 0;

}


.hero-flex {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 5rem;

}


.hero-text {

  max-width: 620px;

}


.hero-intro {

  color: var(--accent);

  font-family: "Fira Code", monospace;

  margin-bottom: 0.5rem;

}


.hero-text h1 {

  font-size: clamp(3rem, 6vw, 5rem);

  line-height: 1.1;

  color: var(--white);

  margin-bottom: 1rem;

}


.hero-text h1 span {

  color: var(--accent);

}


.hero-role {

  font-family: "Fira Code", monospace;

  font-size: 1.1rem;

  color: var(--accent-green);

  margin-bottom: 1.5rem;

}


.hero-description {

  max-width: 550px;

  color: var(--text-dim);

  font-size: 1.05rem;

  margin-bottom: 2rem;

}


.hero-btns {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}


/* =========================
   BUTTONS
========================= */

.btn {

  background: var(--accent);

  color: white;

  padding: 0.85rem 1.6rem;

  border-radius: 8px;

  text-decoration: none;

  font-weight: 600;

  border: none;

  cursor: pointer;

  transition: 0.3s;

}


.btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(88, 166, 255, 0.2);

}


.btn-outline {

  background: transparent;

  border: 1px solid var(--border);

  color: var(--text-main);

}


.btn-outline:hover {

  color: var(--accent);

  border-color: var(--accent);

  background: rgba(88, 166, 255, 0.05);

}


.btn-block {

  width: 100%;

}


/* =========================
   HERO IMAGE
========================= */

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}



.photo-glow {

  padding: 6px;

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    var(--accent),
    transparent,
    var(--accent-green)
  );

}


.hero-photo {

  width: 280px;

  height: 280px;

  border-radius: 50%;

  overflow: hidden;

  background: var(--bg-primary);

}


.hero-photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


/* PROFILE BUTTONS */


.photo-socials {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  justify-content: center;
}

.photo-socials a {
  text-decoration: none;

  color: var(--white);

  background: var(--card-bg);

  border: 1px solid var(--border);

  padding: 10px 18px;

  border-radius: 8px;

  font-size: 0.85rem;

  font-weight: 600;

  transition: 0.3s ease;
}

.photo-socials a:hover {
  background: var(--accent);

  border-color: var(--accent);

  transform: translateY(-4px);

  box-shadow: 0 8px 20px rgba(88, 166, 255, 0.25);
}

/* =========================
   SECTION HEADINGS
========================= */

.section-heading {

  text-align: center;

  margin-bottom: 3rem;

}


.section-heading p {

  color: var(--accent);

  font-size: 0.8rem;

  letter-spacing: 2px;

  font-family: "Fira Code", monospace;

  margin-bottom: 0.5rem;

}


.section-heading h2 {

  color: var(--white);

  font-size: 2rem;

}


/* =========================
   ABOUT
========================= */

.about {

  background: var(--bg-secondary);

  padding: 6rem 0;

}


.about-content {

  max-width: 750px;

  margin: auto;

  text-align: center;

}


.about-content p {

  color: var(--text-dim);

  margin-bottom: 1rem;

}


.stats {

  display: grid;

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

  max-width: 700px;

  margin: 3rem auto 0;

  gap: 2rem;

}


.stat-item {

  text-align: center;

}


.stat-item h3 {

  color: var(--accent-green);

  font-size: 2.4rem;

}


.stat-item p {

  color: var(--text-dim);

  font-size: 0.85rem;

}


/* =========================
   SKILLS
========================= */

.skills {

  padding: 6rem 0;

}


.skills-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 1.5rem;

}


.skill-card {

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 14px;

  padding: 2rem;

  transition: 0.3s;

}


.skill-card:hover {

  transform: translateY(-8px);

  border-color: var(--accent);

}


.skill-icon {

  font-size: 2rem;

  margin-bottom: 1rem;

}


.skill-card h3 {

  color: var(--white);

  margin-bottom: 1.2rem;

}


.skill-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

}


.skill-tags span {

  background: var(--bg-primary);

  border: 1px solid var(--border);

  padding: 0.35rem 0.7rem;

  border-radius: 6px;

  font-size: 0.75rem;

  color: var(--text-dim);

}


/* =========================
   EXPERIENCE
========================= */

.experience {

  background: var(--bg-secondary);

  padding: 6rem 0;

}


.experience-card {

  max-width: 850px;

  margin: auto;

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 14px;

  padding: 2rem;

  border-left: 4px solid var(--accent);

}


.experience-header {

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1.5rem;

}


.experience-card h3 {

  color: var(--white);

  font-size: 1.3rem;

}


.experience-card h4 {

  color: var(--accent);

  font-weight: 500;

}


.experience-date {

  color: var(--text-dim);

  font-size: 0.85rem;

}


.experience-card ul {

  padding-left: 1.2rem;

  color: var(--text-dim);

}


.experience-card li {

  margin-bottom: 0.6rem;

}


/* =========================
   PROJECTS
========================= */

.projects {

  padding: 6rem 0;

}


.projects-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 2rem;

}


.project-card {

  background: var(--card-bg);

  border: 1px solid var(--border);

  border-radius: 14px;

  overflow: hidden;

  transition: 0.3s;

}


.project-card:hover {

  transform: translateY(-10px);

  border-color: var(--accent);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);

}


.project-image {

  overflow: hidden;

  height: 190px;

}


.project-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s;

}


.project-card:hover img {

  transform: scale(1.08);

}


.project-content {

  padding: 1.5rem;

}


.project-content h3 {

  color: var(--white);

  margin-bottom: 0.8rem;

}


.project-content p {

  color: var(--text-dim);

  font-size: 0.9rem;

  margin-bottom: 1.3rem;

}


.project-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-bottom: 1.5rem;

}


.project-tags span {

  font-size: 0.7rem;

  background: rgba(88, 166, 255, 0.1);

  color: var(--accent);

  padding: 0.35rem 0.6rem;

  border-radius: 5px;

}


.card-buttons {

  display: flex;

  gap: 0.7rem;

}


.card-btn,

.card-btn-outline {

  padding: 0.55rem 1rem;

  text-decoration: none;

  border-radius: 6px;

  font-size: 0.8rem;

  transition: 0.3s;

}


.card-btn {

  background: var(--accent);

  color: white;

}


.card-btn:hover {

  transform: translateY(-2px);

}


.card-btn-outline {

  border: 1px solid var(--border);

  color: var(--text-main);

}


.card-btn-outline:hover {

  border-color: var(--accent);

  color: var(--accent);

}


.projects-note {

  text-align: center;

  color: var(--text-dim);

  margin-top: 3rem;

}


/* =========================
   CONTACT
========================= */

.contact {

  background: var(--bg-secondary);

  padding: 6rem 0;

}


.contact-description {

  text-align: center;

  color: var(--text-dim);

  margin-top: -2rem;

}


.contact-wrapper {

  max-width: 600px;

  margin: 3rem auto 0;

}


.contact-form {

  background: var(--card-bg);

  border: 1px solid var(--border);

  padding: 2rem;

  border-radius: 14px;

}


.form-group {

  margin-bottom: 1.2rem;

}


.form-group input,

.form-group textarea {

  width: 100%;

  padding: 1rem;

  background: var(--bg-primary);

  border: 1px solid var(--border);

  border-radius: 8px;

  color: var(--white);

  font-family: inherit;

  outline: none;

  transition: 0.3s;

}


.form-group textarea {

  resize: vertical;

}


.form-group input:focus,

.form-group textarea:focus {

  border-color: var(--accent);

  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.08);

}


#form-status {

  display: none;

  text-align: center;

  margin-top: 1rem;

  font-size: 0.9rem;

}


/* =========================
   FOOTER
========================= */

footer {

  padding: 3rem 0;

  text-align: center;

  border-top: 1px solid var(--border);

}


footer p {

  color: var(--text-dim);

  font-size: 0.85rem;

}


.footer-social {

  margin-top: 1rem;

}


.footer-social a {

  color: var(--accent);

  text-decoration: none;

  margin: 0 0.7rem;

  font-size: 0.85rem;

}


.footer-social a:hover {

  text-decoration: underline;

}


/* =========================
   SCROLL ANIMATION
========================= */

.reveal {

  opacity: 0;

  transform: translateY(30px);

  transition:

    opacity 0.7s ease,

    transform 0.7s ease;

}


.reveal.active {

  opacity: 1;

  transform: translateY(0);

}


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

@media (max-width: 768px) {


  .hamburger {

    display: block;

  }


  .nav-links {

    display: none;

  }


  .nav-links.show {

    display: flex;

    flex-direction: column;

    position: absolute;

    top: 72px;

    right: 5%;

    width: 220px;

    padding: 1.5rem;

    background: var(--bg-secondary);

    border: 1px solid var(--border);

    border-radius: 10px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

  }


  .hero {

    min-height: auto;

    padding: 5rem 0;

  }


  .hero-flex {

    flex-direction: column-reverse;

    text-align: center;

    gap: 3rem;

  }


  .hero-socials,

  .hero-btns {

    justify-content: center;

  }


  .hero-description {

    margin-left: auto;

    margin-right: auto;

  }


  .hero-photo {

    width: 220px;

    height: 220px;

  }


  .stats {

    grid-template-columns: 1fr;

    gap: 1rem;

  }


  .experience-header {

    flex-direction: column;

  }


}


@media (max-width: 480px) {


  .container {

    width: 92%;

  }


  .hero-text h1 {

    font-size: 2.8rem;

  }


  .hero-role {

    font-size: 0.9rem;

  }


  .hero-btns {

    flex-direction: column;

  }


  .hero-btns .btn {

    width: 100%;

  }


  .section-heading h2 {

    font-size: 1.6rem;

  }


  .contact-form {

    padding: 1.3rem;

  }

}