/* CSS 1 */
/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Base */
body {
  font-family: 'Inter', Arial, sans-serif;
  color: #fff;
  background: #000;
  line-height: 1.6;
}

/* HERO + VIDEO */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 28px 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(20px);
  z-index: 100;
}

.logo {
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  background: linear-gradient(90deg,#EBFFED 0%, #14C304 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}
.nav-links a:hover { color: #14C304; }

.talk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  gap: 10px;
  border-radius: 50px;
  background: #fff;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.talk-btn:hover {
  transform: translateY(-3px);
  background: linear-gradient(90deg,#14C304,#00FF66);
  color: #fff;
  box-shadow: 0 6px 18px rgba(20,195,4,0.18);
}

/* MIDDLE SECTION */
.middle-section {
  padding: 180px 120px 0 120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1440px;
  margin: 0 auto;
}

.intro-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}

/* Hey there */
.hey-text {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
}

/* I'm Shariar */
.name-text {
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 160px;
  font-weight: 700;
  line-height: 160px;
  letter-spacing: -8px;
  background: linear-gradient(90deg,#EBFFED 0%, #14C304 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.photo-wrapper {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  overflow: hidden;
  flex: 0 0 200px;
  align-self: center;
  background: #ddd;
}
.profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* UX Designer */
.ux-designer {
  font-family: 'Inter', sans-serif;
  font-size: 160px;
  font-weight: 700;
  line-height: 192px;
  letter-spacing: -8px;
  color: #FFF;
  text-align: right;
  margin-top: 31px;
}

/* ABOUT ME block */
.about-section {
  display: flex;
  align-items: flex-start;
  gap: 120px;          /* space between heading & text */
  margin-top: 96px;   /* space from UX Designer */
}



.about-heading {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: #fff;
}

.about-text-block {
  width: min(884px, 100%);
  padding-top: 6px;     /* baseline alignment with heading */
}


.about-text {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
  margin: 0;
}

/* SKILLS SLIDER */
.skills-section {
  margin-top: 60px;
  padding: 8px 0;
  background: linear-gradient(90deg,#EBFFED 0%, #14C304 100%);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.skills-viewport {
  width: 100%;
  overflow: hidden;
}


.skills-slider {
  display: flex;
  gap: 90px;
  width: max-content;
  animation: skillsScroll 22s linear infinite;
}

@keyframes skillsScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}



.skill {
  color: white;
  font-size: 18px;
  font-family: Inter;
  font-weight: 600;
  line-height: 21.6px;
  white-space: nowrap;
}




/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* Responsive */
@media (max-width: 1100px) {
  .name-text { font-size: 110px; line-height: 110px; letter-spacing: -6px; }
  .ux-designer { font-size: 96px; line-height: 116px; }
}
@media (max-width: 720px) {
  .navbar { padding: 16px 24px; }
  .middle-section { padding: 120px 24px 0 24px; gap: 24px; }
  .intro-container { flex-direction: column; align-items: center; gap: 16px; }
  .photo-wrapper { align-self: center; }
  .name-text { font-size: 48px; line-height: 52px; letter-spacing: -2px; text-align: center; }
  .hey-text { text-align: center; }
  .ux-designer { text-align: center; font-size: 48px; line-height: 56px; }
  .about-heading { text-align: center; }
  .about-text-block { justify-content: center; }
}

/* CSS 2 */
/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  position: relative;
}

/* PAGE 2 */
/* PAGE 2 MAIN CONTAINER */
.page2 {
  width: 100%;
  min-height: 100vh;
  background: #050505;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the whole project horizontally */
  justify-content: center; /* Centers the whole project vertically */
  padding: 130px 0;
  gap: 48px;
  overflow: hidden;
}

/* TITLE SECTION (Split Row) */
.title-section {
  width: 1170px; /* Standard Figma width */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 685px; /* From Figma Specs */
}

.design-text, .bold-text, .gradient-text {
  font-size: 68px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  line-height: 85px;
  color: white;
  margin: 0;
}

/* Specific Alignment for "Problems, one" */
.bar-line {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Pushes text to the right side of the container */
  gap: 15px;
  width: 100%;
}

.line {
  width: 100px;
  height: 2px;
  background: #fff;
}

.gradient-text {
  background: linear-gradient(90deg, #EBFFED 0%, #14C304 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* BUTTON STYLES */
.primary-btn {
  display: flex;
  padding: 20px 40px;
  border-radius: 50px;
  background: linear-gradient(90deg, #ACF9B2 0%, #14C304 100%);
  color: #000;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.primary-btn:hover { transform: scale(1.05); }

/* WORK SECTION */
.work-section {
  width: 1170px; /* Keeps list same width as title */
  display: flex;
  flex-direction: column;
}

.work-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.2); /* Soft white border */
  position: relative;
  cursor: pointer;
  transition: background-color 0.4s ease; /* Hover color animation */
}

.work-item:last-child {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Hover Background Color (Dark Green) */
.work-item:hover {
  background-color: #031c01;
}

.work-title {
  font-size: 48px;
  font-weight: 700;
  color: #FFF;
  z-index: 3;
}

.arrow-link svg {
  width: 52px;
  height: 52px;
  transition: transform 0.3s ease;
}

.work-item:hover .arrow-link svg {
  transform: translate(5px, -5px); /* Subtle arrow nudge */
}

/* HOVER IMAGE (Exactly 240x300) */
.hover-image {
  position: absolute;
  right: 180px; /* Adjust distance from the arrow */
  top: 50%;
  width: 240px;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  pointer-events: none;
  z-index: 5;
  
  /* Animation properties */
  opacity: 0;
  transform: translate(30px, -50%) scale(0.9);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-item:hover .hover-image {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

/* PAGE 3 */
.page3 { position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 130px 0; }
.page3 .background-video { position: absolute; top: 0; left: 0; width: 100%; height: 1000px; object-fit: cover; z-index: -1; }

.page3-content { display: flex; justify-content: center; align-items: center; gap: 135px; width: 100%; max-width: 1200px; }

.about-text-wrapper { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.about-title { font-size: 68px; font-weight: 700; line-height: normal; color: #FFF; max-width: 915px; }
.about-description { margin-top: 40px; font-size: 24px; font-weight: 500; line-height: 140%; text-transform: capitalize; opacity: 0.6; color: #FFF; max-width: 915px; }

.about-photo-wrapper { position: relative; width: 520px; height: 537px; flex-shrink: 0; }
.about-photo { width: 100%; height: 100%; border-radius: 16px; object-fit: cover; }
.yellow-icon { position: absolute; width: 82px; height: 104px; top: -30px; left: -30px; transform: rotate(-22deg); filter: blur(30px); }
.question-mark { position: absolute; right: -30px; top: 40%; }


/* ===============================
   PAGE 4 — TESTIMONIALS (FINAL)
   =============================== */

/* ===============================
   PAGE 4 — TESTIMONIALS (FIGMA MATCH)
   =============================== */

.page4 {
  min-height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  padding: 0 135px;
}

/* MAIN WRAPPER */
.testimonial-wrapper {
  width: 100%;
  max-width: none;          /* 🔥 Figma width */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
/* HEADER ROW */
.testimonial-header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:36px;
}
.verify-btn{
  padding:14px 28px;
  border-radius:40px;
  border:1px solid #fff;
  background:transparent;
  color:#fff;
  font-size:14px;
  letter-spacing:1px;
  cursor:pointer;
  transition:0.25s;
}

.verify-btn:hover{
  background:#14C304;
  border-color:#14C304;
  color:#000;
}

/* TAG */
.testimonial-tag {
  color: #14C304;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.6px;
  margin-bottom: 24px;
}

/* TITLE */
.testimonial-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  /* width: 100%; */
  margin: 0;
}

/* TEXT */
.testimonial-text {
  font-size: 20px;
  line-height: 34px;
  width: 100%;
  min-height: 220px; /* 🔥 prevents layout jump */
  margin-bottom: 40px;
}

.testimonial-text p {
  margin-bottom: 24px;   /* 👈 space between paragraphs (FIGMA-like) */
  line-height: 1.6;
}

.testimonial-text p:last-child {
  margin-bottom: 0;
}


/* AUTHOR ROW */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-author img {
  width: 40px;               /* 🔥 Figma size */
  height: 40px;
  border-radius: 50%;
}

.testimonial-author strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.testimonial-author span {
  display: block;
  font-size: 14px;
  opacity: 0.6;
}

/* ARROWS */
.testimonial-controls {
  position: absolute;
  right: 0;          /* align to right edge */
  bottom: 8px;       /* 👈 move DOWN like reference */
  
  display: flex;
  gap: 12px;
}


.testimonial-controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #14C304;
  background: transparent;
  color: #14C304;
  font-size: 20px;
  cursor: pointer;
  transition: 0.25s ease;
}

.testimonial-controls button:hover {
  background: #14C304;
  color: #000;
}





/* client avatars */
.client { position:absolute; border-radius:9999px; background-size:cover; background-position:center; box-shadow:0 10px 20px rgba(0,0,0,0.1); animation: floaty 6s ease-in-out infinite alternate; z-index:2; }
.client1 { width:83.26px; height:83.26px; left:199px; top:337px; background-image:url('../assets/images/client1.png'); }
.client2 { width:56.94px; height:56.94px; left:40px; top:500px; background-image:url('../assets/images/client2.png'); }
.client3 { width:64.29px; height:64.29px; left:134px; top:707px; background-image:url('../assets/images/client3.png'); }
.client4 { width:60.5px; height:60.5px; right:190px; top:333px; background-image:url('../assets/images/client4.png'); box-shadow:0 18px 24px rgba(0,0,0,0.14); }
.client5 { width:94.19px; height:94.23px; right:40px; top:500px; background-image:url('../assets/images/client5.png'); box-shadow:0 14px 24px rgba(67,48,48,0.14); }
.client6 { width:54.44px; height:54.44px; right:160px; bottom:120px; background-image:url('../assets/images/client6.png'); }

@keyframes floaty { 0%{ transform:translateY(0); } 50%{ transform:translateY(12px); } 100%{ transform:translateY(0); } }


/* PAGE 5 */
/* ===============================
   PAGE 5 — PROJECTS (FIGMA FINAL)
   =============================== */

.page5 {
  padding: 130px 135px;
  display: flex;
  flex-direction: column;
  gap: 54px;
  background: #000;
}

/* SLIDER */



/* CARD */
.project-card {
  width: 560px;
  flex-shrink: 0;
  text-decoration: none;
  color: #fff;
  transition: transform 0.45s ease;
}

.project-card:hover {
  transform: translateY(-12px);
}

.project-card img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
}

/* GLASS INFO */
.project-info {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  padding: 50px 52px;
  border-radius: 0 0 24px 24px;
  border: 0.5px solid rgba(255,255,255,0.4);
  border-top: none;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-info h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-meta span {
  font-size: 18px;
}

.view-link {
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(90deg,#EBFFED,#14C304);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.projects-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.projects-btn {
  padding: 20px 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  transition: 0.25s ease;
}

.projects-btn:hover {
  background: #fff;
  color: #000;
}


/* ===============================
   PROJECT TITLE — FIGMA FIX
   =============================== */

.projects-title {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 5;               /* ensures it's in front */
}

.title-white {
  color: #ffffff;
  font-size: 68px;
  font-family: Inter;
  font-weight: 700;
  line-height: 81.6px;
}

.title-green {
  color: #14C304;           /* exact Figma green */
  font-size: 68px;
  font-family: Inter;
  font-weight: 700;
  line-height: 81.6px;
}

.projects-slider {
  width: 100%;
  overflow-x: auto;

  cursor: grab;
  user-select: none;
  touch-action: none;          /* ❌ no momentum */
  scroll-behavior: auto;       /* ❌ no smooth */
}

.projects-slider:active {
  cursor: grabbing;
}

.projects-slider::-webkit-scrollbar {
  display: none;
}


.projects-track {
  display: flex;
  gap: 30px;
  width: max-content; /* 🔑 REQUIRED */
}


/* ===============================
   CTA — FIGMA MATCH (FINAL SCALE)
   =============================== */
.cta-section {
  min-height: 100vh;
  background: #000;

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

  gap: 72px;
  padding: 0 clamp(20px, 6vw, 135px);
}

/* MAIN TEXT */
.cta-text {
  font-size: clamp(32px, 6vw, 84px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-align: center;
  max-width: 1200px;
}

/* CTA LINK */
.cta-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;

  font-size: clamp(32px, 6vw, 84px);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;

  color: #EBFFED;
}

/* UNDERLINE */
.cta-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -16px;

  width: 100%;
  height: 4px;
  background: #14C304;
}

/* ARROW */
.cta-link svg {
  width: clamp(28px, 4vw, 64px);
  height: clamp(28px, 4vw, 64px);
  flex-shrink: 0;

  transform: translateY(2px);
  transition: transform 0.25s ease;
}

/* HOVER */
.cta-link:hover svg {
  transform: translateX(8px) translateY(-6px);
}

/* GRADIENT TEXT */
.cta-gradient-text {
  display: flex;
  justify-content: center;
  flex-direction: column;

  font-family: Inter;
  font-size: clamp(32px, 6vw, 84px);
  font-weight: 700;
  line-height: 1.1;

  background: linear-gradient(90deg, #EBFFED 0%, #14C304 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  word-wrap: break-word;
}




/* FOOTER SECTION */


.page7 {
  position: relative;
  min-height: 300px;              /* 🔥 smaller like Figma */
  padding: 80px 135px 50px;       /* 🔥 less video blocking */

  display: flex;
  align-items: flex-end;          /* 🔥 content sits lower */

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.65) 100%
  );

  overflow: hidden;
}




/* VIDEO BACKGROUND COVER */
.page7 .video-wrapper {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page7 .background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;     /* 16:9 cover */
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: none;
}


.video-wrapper iframe.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* perfect 16:9 full-cover */
  height: 100vh;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
}

/* Fix scaling on ultra-wide screens */
@media (min-aspect-ratio: 16/9) {
  .video-wrapper iframe.background-video {
    width: 100vw;
    height: 56.25vw;
  }
}

/* FOOTER CONTENT WRAPPER */
.footer-container {
  width: 100%;
  max-width: 1440px; /* 🔥 match site width */
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 40px;
}




/* ROWS */
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* ===========================================
   TEXT STYLES EXACTLY AS FIGMA + NEON GLOW
   =========================================== */

/* TOP NAME */
.footer-name {
  font-family: 'Bai Jamjuree';
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;

  background: linear-gradient(90deg, #EBFFED 0%, #14C304 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.footer-menu {
  display: flex;
  gap: 46px;
}

.footer-menu a {
  font-family: Inter;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-menu a.active {
  font-weight: 600;
}

.footer-menu a:hover {
  opacity: 0.7;
}



/* ===========================================
   ICONS + HOVER NEON
   =========================================== */

.footer-icons {
  display: flex;
  gap: 18px;
}


.icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 24px;
  outline: 1px solid #EBFFED;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s ease;
}

.icon-circle svg {
  width: 24px;
  height: 24px;
  fill: #EBFFED;  /* Neon base */
  transition: 0.25s ease;
}

/* Icon glow */
.icon-circle:hover {
  transform: scale(1.1);
  box-shadow:
    0 0 10px #14C304,
    0 0 18px #EBFFED,
    0 0 28px rgba(20,195,4,0.6);
}

.icon-circle:hover svg {
  filter:
    drop-shadow(0 0 6px #14C304)
    drop-shadow(0 0 12px #EBFFED);
}
/* ===============================
   LINKEDIN ICON (HEADER)
   =============================== */
.linkedin-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s ease;
}

.linkedin-icon svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.linkedin-icon:hover {
  background: linear-gradient(90deg,#14C304,#00FF66);
  border-color: transparent;
}

/* MOBILE IMPROVEMENT */
@media (max-width: 768px) {

  .cta-section {
    gap: 40px;
  }

  .cta-link {
    gap: 12px;
  }

}