/* =============================
   GLOBAL STYLES & VARIABLES
============================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

@font-face {
  font-family: 'Jeko';
  src: url('Fonts/Jeko-Black.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

:root {
  --yellow: #EEBC5A;
  --gray: #aaa;
  --sec-background: #1C1C1C;
  --nav-height: 72px;
  --bottom-height: 56px;
  --max-width: 1440px;
  --shell-width: min(90vw, var(--max-width));
  --content-width: calc(var(--shell-width) - 10px);
  --shell-padding: clamp(20px, 2.6vw, 32px);
  --section-inline-padding: clamp(20px, 2.4vw, 32px);
  --section-top-space: calc(var(--nav-height) + 88px);
  --section-bottom-space: calc(var(--bottom-height) + 96px);
  --gallery-gap: 18px;
  --gallery-loop-distance: 0px;
  --page-bg: #050505;
  --page-surface: #000000;
  --text-primary: #ffffff;
  --text-secondary: #dddddd;
  --text-muted: #aaaaaa;
  --nav-link: #999999;
  --shell-bg: linear-gradient(90.59deg, rgba(235,235,235,0.17) 0%, rgba(255,255,255,0.095) 100%);
  --shell-border: rgba(255,255,255,0.18);
  --divider-soft: rgba(255,255,255,0.1);
  --divider-strong: rgba(255,255,255,0.15);
  --panel-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.12);
  --image-shadow: 0 8px 20px rgba(0,0,0,0.4);
  --sticky-image-shadow: 0 6px 16px rgba(0,0,0,0.4);
  --gallery-shadow: 0 18px 48px rgba(0,0,0,0.26);
  --mobile-menu-bg: rgba(0,0,0,0.95);
  --hero-fade-color: #000000;
  --control-icon-filter: none;
  --social-filter: brightness(0) invert(0.6);
  --social-filter-hover: brightness(0) invert(1);
}

body[data-theme="light"] {
  --gray: #71685e;
  --sec-background: #efe6d8;
  --page-bg: #f7f1e6;
  --page-surface: #fbf7ef;
  --text-primary: #191714;
  --text-secondary: #4f483f;
  --text-muted: #756c61;
  --nav-link: #655d54;
  --shell-bg: linear-gradient(90.59deg, rgba(255,255,255,0.88) 0%, rgba(242,232,218,0.82) 100%);
  --shell-border: rgba(38,31,20,0.14);
  --divider-soft: rgba(38,31,20,0.1);
  --divider-strong: rgba(38,31,20,0.16);
  --panel-bg: rgba(255,255,255,0.74);
  --card-border: rgba(38,31,20,0.12);
  --image-shadow: 0 12px 28px rgba(73,56,29,0.14);
  --sticky-image-shadow: 0 12px 24px rgba(73,56,29,0.14);
  --gallery-shadow: 0 16px 40px rgba(73,56,29,0.12);
  --mobile-menu-bg: rgba(250,245,237,0.98);
  --hero-fade-color: #f7f1e6;
  --control-icon-filter: brightness(0) saturate(100%) invert(8%) sepia(9%) saturate(980%) hue-rotate(356deg) brightness(93%) contrast(89%);
  --social-filter: brightness(0) saturate(100%) invert(32%) sepia(6%) saturate(628%) hue-rotate(356deg) brightness(89%) contrast(84%);
  --social-filter-hover: brightness(0) saturate(100%) invert(8%) sepia(9%) saturate(980%) hue-rotate(356deg) brightness(93%) contrast(89%);
}

a, a:visited { color: inherit; /* Inherit from parent (so it follows your theme color) */ text-decoration: none; } a:hover, a:focus { color: #EEBC5A; /* Your highlight color */ text-decoration: underline; /* optional */ } a:active { color: #d4a24c; /* slightly darker for click feedback */ }

/* RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%;}
body {
  font-family: 'Poppins', sans-serif;
  background: var(--page-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html, body {
  overflow-x: hidden;         /* disables scrollbars completely */
  height: 100%;             /* make sure layout is constrained */
}

/* =============================
   NAVBAR
============================= */
.navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--shell-width);
  height: var(--nav-height);
  background: var(--shell-bg);
  border-radius: 16px;
  border: 1px solid var(--shell-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--shell-padding);
  z-index: 1000;
  gap: 12px;
}

.logo img {
  height: 40px;
  width: auto;
  display: block;
}

.nav-links { list-style: none; display: flex; gap: 24px; align-items: center; }
.nav-links li a {
  text-decoration: none;
  color: var(--nav-link);
  position: relative;
  transition: color 0.2s ease;
}
.nav-links li a:hover { color: var(--text-primary); }

.nav-links li a.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
}

.theme-toggle img {
  width: 24px;
  height: 24px;
  display: block;
  filter: var(--control-icon-filter);
}

/* =============================
   MOBILE NAV
============================= */
.mobile-nav { display: none; align-items: center; gap: 16px; }
.mobile-nav img { width: 18px; height: auto; }
.theme-toggle-mobile img {
  width: 24px;
  height: 24px;
}
.hamburger, .close-btn {
  background: none; border: none; cursor: pointer;
  padding: 8px;
}

.mobile-menu {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: var(--mobile-menu-bg);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.mobile-menu ul { list-style: none; text-align: center; }
.mobile-menu ul li { margin: 20px 0; }
.mobile-menu ul li a {
  color: var(--text-primary);
  font-size: 24px;
  text-decoration: none;
}
.mobile-menu .close-btn {
  position: absolute;
  top: 20px; right: 20px;
}
.hamburger img,
.mobile-menu .close-btn img,
.mobile-nav .theme-toggle img {
  filter: var(--control-icon-filter);
}

.mobile-menu .close-btn img { width: 20px; height: auto; }

/* =============================
   MAIN CONTAINER & SCROLL SNAP
============================= */
/* Default: layout for viewports below 1440px */
.container {
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  overflow-y: auto;  /* allow scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--section-top-space);
  scroll-padding-bottom: var(--section-bottom-space);
}

.container::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

@media (max-width: 767px) {
  .container {
    height: auto;           /* let content define height */
    overflow-y: visible;    /* normal scroll */
    scroll-snap-type: none; /* disable snapping */
  }
}

/* =============================
   SECTIONS
   Desktop: snap-scroll blocks, one section fills viewport.
   Tablet/Mobile: disable snap, normal flow, 75px spacing.
============================= */
.section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;          /* each section fills viewport on snap-enabled breakpoints */
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--section-top-space) 0 var(--section-bottom-space);
  width: 100%;
  box-sizing: border-box;
}

.hero-content,
.about-content,
.edu-train .content,
.projects .content,
.experience .content,
.contact-content,
.gallery-content {
  width: min(var(--content-width), calc(100% - (var(--section-inline-padding) * 2)));
  margin: 0 auto;
}

/* Non-snap behavior for smaller devices (tablet & mobile)
   — disable snap, let content flow normally and add 75px gap.
*/
@media (max-width: 767px) {
  .container {
    height: auto;
    overflow-y: visible;
    scroll-snap-type: none; /* disable snap on tablet/mobile */
  }
  .section {
    min-height: auto;
    padding: 50px 0;
    margin-bottom: 75px; /* requested spacing between sections */
  }
  .navbar{
padding: 0 20px;

  }
}

/* =============================
   HERO
============================= */
.hero { background: transparent; }
.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 0;
}

.hero-text .intro {
  font-size: 20px;
  margin-bottom: 10px;
}
.hero-text .name {
  font-family: 'Jeko', sans-serif;
  font-size: clamp(48px, 8vw, 100px);
  line-height: 1;
  font-weight: 900;
  margin-bottom: 30px;
}
.hero-text .roles {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 40px;
}

.hero-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-links a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
}
.hero-links img { width: 24px; height: 24px; display: block; }

.hero-image {
  position: relative;   /* allow overlay positioning */
  display: inline-block;
  width: 100%;
  max-height: 75vh;
  border-radius: 8px;
  overflow: hidden;     /* keeps overlay inside the rounded corners */
}

.hero-image img {
  width: 100%;
  height: 65vh;
  object-fit: contain;
  display: block;
}

/* Gradient overlay */
.hero-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%; /* adjust how much of the image gets the fade */
  background: linear-gradient(
    359.99deg,
    var(--hero-fade-color) -4.66%,
    rgba(0, 0, 0, 0) 65.09%
  );
  pointer-events: none; /* overlay won’t block clicks */
}

@media (max-width: 767px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-image img {
  width: 100%;
  height: 100%;}
  .hero-text .name { font-size: 50px; }
  .hero-text .roles { font-size: 16px; }
  .hero-links { justify-content: center; }
}

/* =============================
   ABOUT
============================= */
.about { background: transparent; }
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Sticky Images */
.about-images {
  position: sticky;
  top: calc(var(--nav-height) + 40px);
  height: 500px;
  width: 100%;
  align-self: start;
}
.about-images .img-wrapper {
  position: absolute;
  width: 50%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--image-shadow);
}
.about-images .portrait { top: 25%; right: 0; z-index: 2; }
.about-images .workshop { bottom: 0; left: 20%; z-index: 1; }
.about-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text column */
.about-text h2 {
  padding-top: 60px;
  font-family: 'Jeko', sans-serif;
  font-size: clamp(32px, 6vw, 60px);
  font-weight: 900;
  margin-bottom: 30px;
}
.about-text p,
.about-text ul {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.about-text ul { list-style: none; padding-left: 0; }
.about-text ul li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}
.about-text ul li::before {
  content: "›";
  color: var(--yellow);
  position: absolute;
  left: 0;
}

@media (max-width: 767px) {
  .about-images .portrait { top: 150px; right: -25%; z-index: 2; }
.about-images .workshop { bottom: 0px; left: 0; z-index: 1; }
  .about-content { grid-template-columns: 1fr; gap: 40px;}
  .about-images { position: relative; height: auto; margin: -300px 0 50px;  }
  .about-images .img-wrapper { position: relative; width: 60%; margin: 0px 6px; }
  .about-text h2 { font-size: 40px; padding-top: 10px; }
  .about-text p, .about-text ul { font-size: 16px; }

  .about-content {
    display: flex;
    flex-direction: column; /* stack items vertically */
  }

  .about-text {
    order: 1; /* text first */
  }

  .about-images {
    order: 2; /* image second */
  }

}

/* =============================
   EDUCATION & TRAINING
============================= */
.edu-train {
  color: var(--text-primary);
}
.edu-train .content { max-width: none; }
.edu-train .section-heading { text-align: left; }

.edu-train-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border-top: 1px solid var(--divider-soft);
  padding-top: 40px;
}

.education h3, .trainings h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
  color: var(--yellow);
}

.edu-item { margin-bottom: 40px; }
.edu-item h4 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.edu-item .institution {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}
.edu-item .institution a { color: var(--text-primary); text-decoration: none; }
.edu-item .institution .date {
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  color: var(--gray);
}
.edu-item .grade, .edu-item .project {
  font-size: 20px;
  margin-bottom: 8px;
}

/* Trainings */
.trainings ul { list-style: none; padding-left: 0; }
.trainings li {
  font-size: 18px;
  margin-bottom: 14px;
  line-height: 1.5;
  position: relative;
  padding-left: 20px;
}
.trainings li::before {
  content: "•";
  color: var(--yellow);
  position: absolute;
  left: 0;
}
.trainings li strong { font-weight: 700; }
.trainings .date {
  font-size: 16px;
  font-style: italic;
  color: var(--gray);
  margin-left: 6px;
}

/* Separator */
.edu-train-grid > .education {
  border-right: 1px solid var(--divider-strong);
  padding-right: 30px;
}
.edu-train-grid > .trainings { padding-left: 30px; }

@media (max-width: 1024px) {
  .edu-train .section-heading { max-width: 100%; }
}
@media (max-width: 767px) {
  .edu-train-grid { grid-template-columns: 1fr; gap: 40px; }
  .edu-train-grid > .education { border-right: none; padding-right: 0; }
  .edu-train-grid > .trainings {
    padding-left: 0;
    border-top: 1px solid var(--divider-strong);
    padding-top: 30px;
  }
}

/* =============================
   PROJECTS & PUBLICATIONS
============================= */
.projects { background: var(--page-surface); color: var(--text-primary);}
.projects .content { max-width: none; }

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  border-top: 1px solid var(--divider-soft);
  padding-top: 40px;
}

.publications h3, .project-list h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
  color: var(--yellow);
}

.publications ul, .project-list ul { list-style: none; padding-left: 0; }
.publications li, .project-list li {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  padding-left: 20px;
  position: relative;
}
.publications li::before, .project-list li::before {
  content: "•";
  color: var(--yellow);
  position: absolute;
  left: 0;
}
.publications a, .project-list a {
  color: var(--yellow);
  text-decoration: none;
  margin-left: 6px;
}
.publications a:hover, .project-list a:hover { text-decoration: underline; }

/* Separator */
.projects-grid > .publications {
  border-right: 1px solid var(--divider-strong);
  padding-right: 30px;
}
.projects-grid > .project-list { padding-left: 30px; }

@media (max-width: 767px) {
  .projects-grid { grid-template-columns: 1fr; gap: 40px; }
  .projects-grid > .publications { border-right: none; padding-right: 0; }
  .projects-grid > .project-list {
    padding-left: 0;
    border-top: 1px solid var(--divider-strong);
    padding-top: 30px;
  }
}

/* =============================
   EXPERIENCE
============================= */
.experience {
  color: var(--text-primary);
}
.experience .content { max-width: none; }

.experience-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 50px;
}

/* Job List */
.experience-list { list-style: none; padding-left: 0; }
.experience-list li {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 40px;
  padding-left: 24px;
  position: relative;
}
.experience-list li::before {
  content: "•";
  color: var(--yellow);
  position: absolute;
  left: 0;
  font-size: 22px;
}
.experience-list p { margin: 0 0 8px; font-size: 18px; line-height: 1.6; }
.experience-list strong { font-weight: 700; }
.experience-list .date {
  font-style: italic;
  color: var(--gray);
  margin-left: 8px;
  font-size: 16px;
}
.experience-list .desc {
  font-weight: 400;
  font-size: 17px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Image sticky column */
.experience-image {
  position: sticky;
  top: calc(var(--nav-height) + 40px);
  align-self: start;
}
.experience-image img {
  width: 80%;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: var(--sticky-image-shadow);
  display: block;
}

@media (max-width: 1024px) {
  .experience-grid { grid-template-columns: 1fr; gap: 40px; }
  .experience-image { position: relative; order: -1;  width: 100%;  }
  .experience-image img { width: 80%; margin:0 auto; }
}
@media (max-width: 767px) {
  .experience-image { top: 0; }
  .experience-grid {
    display: flex;
    flex-direction: column; /* stack vertically */
  }

  .experience-list {
    order: 1; /* text first */
  }

  .experience-image {
    order: 2; /* image after text */
  }
}

/* =============================
   CONTACT
============================= */
.contact {
  background: var(--page-surface);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contact-content {
  width: min(640px, calc(var(--content-width) / 2));
  margin: 0 auto;
}
.contact .section-heading { text-align: center; margin-bottom: 20px; }
.contact p { font-size: 20px; line-height: 1.6; margin-bottom: 20px; }
.contact .contact-info {
  font-size: 20px;
  font-weight: 500;
  color: var(--yellow);
}

@media (max-width: 767px) {
  .contact-content {
    width: min(var(--content-width), calc(100% - (var(--section-inline-padding) * 2)));
  }
  .contact p { font-size: 16px; }
}

/* =============================
   GALLERY
============================= */
.gallery {
  align-items: center;
}

.gallery-content {
  display: grid;
  gap: 36px;
}

.gallery-copy {
  display: grid;
  gap: 14px;
}

.gallery-tag {
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
}

.gallery .section-heading {
  max-width: 840px;
  line-height: 1.05;
}

.gallery-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.gallery-track {
  width: max-content;
  display: flex;
  gap: var(--gallery-gap);
  align-items: flex-start;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.gallery-set {
  display: flex;
  gap: var(--gallery-gap);
  align-items: flex-start;
  flex: none;
}

.gallery-column {
  width: clamp(180px, 18vw, 280px);
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
}

.gallery-card {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: var(--panel-bg);
  box-shadow: var(--gallery-shadow);
}

.gallery-card img {
  width: 100%;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track {
    transform: none;
  }
}

/* =============================
   BOTTOM BAR
============================= */
/* =============================
   BOTTOM BAR
============================= */
.bottom-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--shell-width);
  height: var(--bottom-height);
  background: var(--shell-bg);
  border-radius: 16px;
  border: 1px solid var(--shell-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--shell-padding);
  z-index: 1000;
}

.next-section {
  height: 100%;
  display: flex;
  align-items: center;
}

.next-section a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1;
}

.arrow {
  width: 16px;
  display: block;
  filter: brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(508%) hue-rotate(1deg) brightness(101%) contrast(96%);
}

#next-label {
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  line-height: 1;
}

/* --- FIXED SOCIAL ICONS --- */
.social-icons {
  display: flex;
  flex-direction: row;   /* horizontal stack */
  gap: 8px;              /* spacing */
  align-items: center;
}

.social-icons a {
  display: inline-flex;   /* makes icons align nicely */
}

.social-icons img {
  width: 18px;
  filter: var(--social-filter);
  transition: filter 0.3s;
  display: block;
}

.social-icons a:hover img {
  filter: var(--social-filter-hover);
}

/* =============================
   RESPONSIVE NAV DISPLAY
============================= */
.desktop-only { display: flex; }
.mobile-only { display: none; }

@media (max-width: 1024px) {
  .desktop-only { display: none; }
  .mobile-only { display: flex; }
}

/* =============================
   TYPOGRAPHY (SIZES)
============================= */
h1 { font-size: 100px; line-height: 1; }
h2 { font-size: 60px; line-height: 1; }

@media (max-width: 1024px) {
  h1 { font-size: 72px; }
  h2 { font-size: 40px; }
}
@media (max-width: 767px) {
  h1 { font-size: 72px; }
  h2 { font-size: 40px; }
}

/* Small helper utilities */
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 0; list-style: none; }


@media (max-width: 767px) {
  .edu-train,
  .projects {
    background: var(--sec-background); /* alternate background */
    width: 100vw;  /* full screen width */
    margin-left: calc(-1 * (100vw - 100%)/2); /* flush with edges */
    padding-left: 20px;
    padding-right: 20px;
  }

  .gallery-content {
    width: min(var(--content-width), calc(100% - (var(--section-inline-padding) * 2)));
  }
}