/* Global box-sizing */
@import url(./base.css);

:root {
  /* Color Box */
  --background: #0c0f17;
  --foreground: rgba(255, 255, 255, 0.05);
  --foreground-extra: #1a1e23;

  /* Color Text */
  --text-primary: #f5f5f5;
  --text-secondary: #e0e0e0;
  --text-muted: #3d5555;

  /* Color Extra */
  --primary: #00adb5;
  --success: #44cc77;
  --error: #992caa;
  --warning: #eecc00;

  /* Font Family */
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Open Sans", sans-serif;

  --font-size-hero: 3rem;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-subheading: 1.5rem;
  --font-size-body: 1rem;
  --font-size-caption: 0.75rem;
  --font-size-button: 1rem;

  /* Font Weight */
  --font-weight-hero: 800;
  --font-weight-h1: 700;
  --font-weight-h2: 600;
  --font-weight-subheading: 500;
  --font-weight-body: 400;
  --font-weight-caption: 400;
  --font-weight-button: 600;
  --font-weight-nav: 500;

  /* spacing */
  --spacing-primary: 2rem;
  --spacing-secondary: 4rem;
  --spacing-base: 1rem;
  --spacing-small: 0.5rem;
  --spacing-xs: 0.25rem;

  /* border */
  --border-radius: 5px;
  --border-radius-full: 50px;

  --item-h: 5rem; /* item height */
  --visible: 3; /* items visible at once */
}

/* ================= basic ================= */
* {
  box-sizing: border-box;
  font-family: var(--font-secondary);
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);

  /* Default desktop layout */
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  grid-template-areas: "sidebar main";
  height: 100vh;
}

/* Left sidebar */
.sidebar-left {
  grid-area: sidebar;
  /* background: var(--foreground-extra); */
  /* border-right: 1px solid #ccc; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 20px 0;
}

/* Main content */
.main-content {
  grid-area: main;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Sections */
section {
  height: 100vh;
  /* width: auto;
  display: flex; */
  scroll-snap-align: start;
  /* align-items: center; */
  /* justify-content: center; */
  /* font-size: 2rem; */
  background: var(--background);
}

.title {
  padding: 3rem 0 0 3rem;
  color: var(--primary);
}

/* Active nav item */
.nav-item {
  padding: 10px;
  cursor: pointer;
  color: var(--text-muted);
}
.nav-item.active {
  background: var(--foreground-extra);
  border-radius: 5px;
  color: var(--text-primary);
}

.nav-item > i {
  font-size: var(--font-size-body);
}

/* ================= section ================= */
.card {
  /* background-color: var(--foreground-extra); */
}

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

.hero {
  padding: 2rem;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  position: relative;
}
.h-title {
  align-self: center;
  flex-shrink: 1;
  width: 50%;
}

.h-title > h1 {
  font-size: var(--font-size-hero);
}
.h-title > h1 > span {
  color: var(--primary);
}

.h-title > h2 {
  font-size: var(--font-size-subheading);
  color: var(--text-secondary);
}
.h-title > p {
  color: var(--text-muted);
  /* width: 50%; */
}

.h-title > button {
  padding: var(--spacing-small);
  width: 10rem;
  background-color: transparent;
  color: var(--text-primary);
  border: var(--primary) solid 2px;
  font-size: var(--font-size-button);
}

.h-title > button:hover {
  background-color: var(--foreground-extra);
  color: var(--text-primary);
  border: var(--primary) solid 2px;
  cursor: pointer;
  transition: background-color 1s ease-in-out;
}

.h-img {
  max-width: 25rem;
  align-self: flex-end;
}

/* ================= about section ================= */

.about {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 var(--spacing-secondary) 0 10rem;
  height: 100vh;
}
.a-title > h1 {
  font-size: var(--font-size-h2);
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  width: fit-content;
  padding-right: var(--spacing-base);
}
.about > p {
  color: var(--text-muted);
  font-weight: var(--font-weight-subheading);
  font-size: var(--font-size-body);
  line-height: 1.6;
  font-family: var(--font-secondary);
}

/* ================= TESTIMONIALS ================= */

/* =========================
   TESTIMONIAL SECTION
   ========================= */

#testimonial{
    height:100vh;
    width:100%;
}

.testimonial{

    height:100%;
    width:100%;

    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

/* =========================
   HEADING
   ========================= */

.t-title{

    /* height:120px; */

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.t-title h1{

    /* font-size:2.5rem; */
    /* font-weight:300; */

    /* letter-spacing:8px; */

    color:var(--primary);
}

/* =========================
   TESTIMONIAL LIST
   ========================= */

.t-list{
  width: 95%;
  flex:1;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scrollbar-width: 4px;
}

.t-list::-webkit-scrollbar{
    display:none;
}

/* =========================
   INDIVIDUAL TESTIMONIAL
   ========================= */

.t-item{

    min-height:calc(100vh - 120px);

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:0 12%;

    scroll-snap-align:start;
}

/* =========================
   QUOTE
   ========================= */

.t-quote{
    color: var(--text-muted);
    max-width:850px;

    font-size:0.95rem;

    /* line-height:2.1; */

    /* font-style:italic; */
    text-align: center;

    opacity:.9;

    position:relative;
}

/* opening quote */

.t-quote::before{

    content:'"';

    position:absolute;

    top:-60px;
    left:-40px;

    font-size:7rem;

    opacity:.12;

    line-height:1;
}

/* closing quote */

.t-quote::after{

    content:'"';

    position:absolute;

    bottom:-90px;
    right:-30px;

    font-size:7rem;

    opacity:.12;

    line-height:1;
}

/* =========================
   AUTHOR
   ========================= */

.t-author{

    margin-top:50px;

    font-size:1.1rem;

    font-weight:600;

    letter-spacing:1px;
}

.t-position{

    margin-top:8px;

    font-size:.9rem;

    opacity:.7;
}

.t-link{

    margin-top:12px;

    font-size:.9rem;

    color:inherit;

    text-decoration:none;

    opacity:.7;

    transition:.3s;
}

.t-link:hover{

    opacity:1;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width:768px){

    .t-title{
        height:90px;
    }

    .t-title h1{

        font-size:1.8rem;

        letter-spacing:4px;
    }

    .t-item{

        min-height:calc(100vh - 90px);

        padding:0 8%;
    }

    .t-quote{

        font-size:.85rem;

        line-height:1.9;
    }

    .t-quote::before{

        font-size:4rem;

        left:-10px;
        top:-40px;
    }

    .t-quote::after{

        font-size:4rem;

        right:-10px;
        bottom:-50px;
    }

    .t-author{

        font-size:1rem;
    }
}
/* ================= Work Experience ================= */

.work-experience {
  background: var(--background);
  font-family: var(--font-primary);
}

.timeline {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.w-headding {
  align-self: flex-start;
  color: var(--primary);
  text-transform: uppercase;
}

.w-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.timeline-item {
  position: relative;
  display: flex;
  gap: var(--spacing-primary);
  padding-left: var(--spacing-primary);
  margin-left: var(--spacing-base);
  margin-right: var(--spacing-base);
}

.timeline-item:not(:last-child) {
  margin-bottom: var(--spacing-primary);
}

/* Timeline line */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--spacing-xs);
  background: var(--primary);
}

/* Stop line at last item */
.timeline-item:last-child::before {
  bottom: auto;
  height: 100%;
}

/* Timeline dot */
.timeline-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--font-size-subheading) * 1.2) / 2 - var(--spacing-base) / 2);
  width: var(--spacing-base);
  height: var(--spacing-base);
  background: var(--primary);
  border-radius: var(--border-radius-full);
  transform: translateX(calc(-50% + (var(--spacing-xs) / 2)));
}

.timeline-content {
  width: 100%;
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-base);
}

.job-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-subheading);
}

.job-date {
  color: var(--primary);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

.job-company {
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing-base);
  color: var(--text-secondary);
  font-style: italic;
  font-size: var(--font-size-caption);
}

.job-achievements {
  margin: 0;
  padding-left: var(--spacing-primary);
}

.job-achievements li {
  color: var(--text-muted);
  font-weight: var(--font-weight-subheading);
  font-size: var(--font-size-caption);
  line-height: 1.6;
  font-family: var(--font-secondary);
}

.job-achievements li::marker {
  color: var(--primary);
}

/* Mobile */
@media (max-width: 768px) {
  .job-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .job-date {
    order: 3;
  }
}

/* ================= projects ================= */

.projects {
  height: 100%;
  display: flex;
  position: relative;
}

.p-headding {
  position: absolute;
  padding: 2rem;
  top: 0;
  left: 0;
  color: var(--primary);
}

.p-btn {
  align-self: flex-end;
  position: absolute;
  padding: 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  width: 100%;
  /* height: 50%; */
  /* border: #00adb5 solid 2px; */
}

.p-btn > button {
  border: none;
  background-color: var(--foreground);
  color: var(--text-muted);
  font-size: var(--font-size-h2);
  border-radius: var(--border-radius);
  padding: var(--spacing-small);
}
.p-btn > button:hover {
  background-color: var(--foreground-extra);
  color: var(--primary);
}

.p-slider {
  display: flex;
  transition: transform 0.3s ease;
  gap: 2rem;
  /* border: #00adb5 solid 2px; */
  width: 100%;
  /* overflow-x: scroll; */
}

/* Section background */
.p-projects {
  /* padding: 2rem; */
  padding-left: 30%;
  display: flex;
  align-items: center;
  overflow: scroll;
  height: 100%;
  width: 100vw;
  /* border: #00adb5 solid 2px; */
  scrollbar-width: none;
}

/* Card style */
.p-card {
  position: relative;
  flex-shrink: 0;
  width: 90%;
  background: var(--foreground);
  padding: 1.5rem;
  border-radius: 10px;
  line-height: 1.6;
}

/* Date */
.p-date {
  font-size: var(--font-size-body);
  color: var(--text-muted);
}

/* Title & link style */
.p-title {
  font-size: var(--font-size-subheading);
  color: var(--text-secondary);
  margin-top: 0.2rem;
  font-weight: var(--font-weight-button);
}

/* Description */
.p-description {
  font-size: var(--font-size-body);
  color: #777;
  margin: 0.6rem 0 1rem;
}

/* github link */

.p-repo {
  padding: var(--spacing-small);
  margin-bottom: var(--spacing-small);
  font-size: var(--font-size-caption);
  display: flex;
  gap: var(--font-size-h2);
}
.p-repo > a {
  color: var(--text-secondary);
  text-decoration: none;
}
/* border: var(--primary) 2px solid;
padding: var(--spacing-xs) var(--spacing-base); */

/* Tags */
.p-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.p-tags span {
  background: RGBA(0, 173, 181, 0.15);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--primary);
}

/* ================= skills ================= */
.skills {
  background: var(--background);
  font-family: var(--font-primary);
  height: 100vh;
  width: 100%;
}

.skills-container {
  width: 100%;
  height: 100%;
  padding: var(--spacing-base);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.skills-heading {
  color: var(--primary);
  text-transform: uppercase;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  margin: 0 0 var(--spacing-primary);
  margin: 0;
}

.skills-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;        /* ← equal height rows */
  gap: var(--spacing-small);
  align-items: stretch;       /* ← stretch instead of start */
  height: calc(100% - 100px);
  overflow-y: scroll;
  /* height: fit-content; */
}

.skill-group:nth-child(1) { grid-column: span 1; }
.skill-group:nth-child(2) { grid-column: span 2; }
.skill-group:nth-child(3) { grid-column: span 1; }
.skill-group:nth-child(4) { grid-column: span 1; }
.skill-group:nth-child(5) { grid-column: span 1; }
.skill-group:nth-child(6) { grid-column: span 3; }

.skill-group { 
  align-self: stretch;         /* ← override the start */
  display: flex;
  flex-direction: column;
  background: var(--foreground-extra);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  padding: var(--spacing-small) var(--spacing-base);
}

.group-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-subheading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 var(--spacing-small);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-small);
  align-content: flex-start; /* ← tags stay at top, empty space fills bottom */
}

.tag {
  font-size: var(--font-size-caption);
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-body);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius);
  padding: 3px 10px;
  line-height: 1.6;
  transition: border-color 0.2s ease;
}

.tag.production {
  color: var(--primary);
  background: rgba(0, 173, 181, 0.08);
  border-color: rgba(0, 173, 181, 0.25);
}

.tag:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.tag.production:hover {
  border-color: var(--primary);
}

.skills-legend {
  display: flex;
  align-items: center;
  /* margin-top: var(--spacing-primary); */
  font-size: var(--font-size-caption);
  color: var(--text-muted);
  font-family: var(--font-secondary);
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-dot.production {
  background: rgba(0, 173, 181, 0.3);
  border-color: var(--primary);
}

@media (max-width: 768px) {
  .skills-container {
    padding: var(--spacing-base);
  }

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

  .skill-group:nth-child(n) {
    grid-column: span 1;
  }
}

/* ================= certificates ================= */

.c-body {
  height: 100%;
  /* border: #00ADB5 solid 2px; */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.certificates {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.c-text {
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: var(--spacing-primary);
}

.c-text > h1 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-caption);
  color: var(--primary);
  letter-spacing: 0.2ch;
}

/* The scrollable container */
.carousel-container {
  /* width: 240px; */
  height: calc(var(--item-h) * var(--visible));
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  /* border-radius: 12px; */
  /* border: 2px solid #222; */
  /* background: #fff; */
  /* box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08); */
  scrollbar-width: none; /* Firefox hide scrollbar */
  position: relative;
}
.carousel-container::-webkit-scrollbar {
  display: none;
} /* WebKit hide scrollbar */

/* We keep everything in a column with optional gap if you want spacing */
/* .stack {
  display: flex;
  flex-direction: column;
  gap: 0; 
} */

/* Space so first/last can reach the center */
/* spacer height = (containerHalf - itemHalf) = ((visible - 1) / 2) * item-h */
.spacer {
  height: calc((var(--visible) - 1) * var(--item-h) / 2);
  flex: 0 0 auto;
  pointer-events: none;
}

.carousel-item {
  height: var(--item-h);
  padding: 2rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--text-muted);
  font-size: var(--font-size-body);
  /* font-size: 18px; */
  /* background: #4c96ff; */
  /* border-bottom: 1px solid rgba(255,255,255,.5); */
  scroll-snap-align: center;
  scroll-snap-stop: always; /* don’t skip items on fast scrolls */
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}

.carousel-item:last-of-type {
  border-bottom: none;
}

/* Centered/highlighted item */
.carousel-item.active {
  /* background: #ff8c2a; */
  font-weight: bold;
  color: var(--text-primary);
  transform: scale(1.02);
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); */
}

/* ================= contact ================= */
.contacts {
  position: relative;
  /* border: #00ADB5 2px solid; */
  height: 100%;
  display: flex;
  /* justify-content: center;
  align-items: center; */
  flex-direction: column;
}

.cn-text {
  flex-grow: 1;
  /* border: solid 2px blue; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--spacing-base);
  color: var(--text-muted);
}
.cn-text > a {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  border-radius: var(--border-radius-full);
  padding: var(--spacing-base) 3rem;
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  text-decoration: none;
}
.cn-text > p {
  width: 70%;
}
.cn-text > a:hover {
  background-color: var(--primary);
  color: var(--background);
  transition: background-color 1s ease;
}
.cn-links {
  /* flex: 1; */
  border-top: var(--text-muted) solid 2px;
  padding: var(--spacing-base);
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: var(--spacing-primary);
}
.cn-links > a > i {
  font-size: var(--font-size-subheading);
}
.cn-links > a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-size-body);
}
.cn-links > a:hover {
  color: var(--text-primary);
  text-decoration: none;
}

/* ================= Responsive ================= */

/* Tablet: Hide right sidebar, keep left */
@media (max-width: 1024px) {
  html {
    font-size: 14px;
  }
  body {
    grid-template-columns: minmax(0, 80px) 1fr;
    grid-template-areas: "sidebar main";
  }

  .sidebar-left span {
    display: none;
  }

  /* about section */
  .about {
    padding: 0 var(--spacing-secondary) 0 5rem;
  }
}

/* Mobile: Only main content */
@media (max-width: 768px) {
  html {
    font-size: 12px;
  }
  body {
    grid-template-rows: auto 50px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
    font-size: 14px;
  }
  section {
  height: calc(100vh - 50px);
  }
  .sidebar-left {
    flex-direction: row;
  }

  .sidebar-left span {
    display: none;
  }
  .main-content {
    padding: 10px;
  }
  /* about section */
  .about {
    padding: 0 var(--spacing-base) 0 var(--spacing-base);
  }
  /* project section */
  .p-projects{
    flex-direction: column;
    padding: 1rem;
    padding-left: 1rem;

  }
  .p-headding {
    display: none;
  }
  .p-slider {
    /* border: #00adb5 solid 2px; */
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
  }
  .p-btn {
    display: none;
  }
  /* skills */
  .s-c-text {
    flex-basis: 20rem;
  }
  .s-c-skills {
    flex-basis: 20rem;
  }
  /* certifiactes */
  .certificates {
    display: flex;
    flex-direction: column;
  }
  .c-text {
    height: auto;
    font-size: var(--font-size-subheading);
    justify-content: center;
    border: #00adb5 solid 2px;
  }
}