/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --brand:#3a6cf4;
  --accent:#4e9eff;
  --bg:#000;
  --muted:#666;
  --card-bg:#ffffff;
  --glass: rgba(255,255,255,0.06);
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: #fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  scroll-behavior:smooth;
}

/* ======================= Sparkles ======================= */
.sparkles{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.spark{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,0.05));
  filter: drop-shadow(0 0 8px rgba(78,158,255,0.9));
  animation: sparkleFloat 3.6s linear forwards;
  opacity:.9;
  transform-origin:center;
}
@keyframes sparkleFloat {
  0% { transform: translateY(0) scale(1); opacity:1; }
  100% { transform: translateY(-120px) scale(.45); opacity:0; }
}

/* ======================= Header ======================= */
.site-header{
  position:fixed; top:14px; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  backdrop-filter: blur(6px);
  border-radius:12px;
  margin: 0 18px;
}
.logo{
  color:var(--brand); font-weight:700; font-size:1.15rem; text-decoration:none;
}

/* nav dropdown wrapper */
.nav-wrap{ position:relative; display:flex; align-items:center; gap:8px }
.nav-toggle{
  background:transparent; border:1px solid rgba(58,108,244,0.14); padding:8px 10px; border-radius:8px; color:var(--brand);
  cursor:pointer; font-size:1rem;
}

/* main navigation (dropdown) */
.navigation{
  position:absolute; top:48px; right:0; background:rgba(255,255,255,0.03); padding:12px; border-radius:10px; display:none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.navigation.open{ display:block }
.navigation ul{ list-style:none; margin:0; padding:0; }
.navigation a{
  color:var(--brand); text-decoration:none; font-weight:700; display:block; padding:8px 12px;
}
.navigation a:hover{ background: rgba(255,255,255,0.02); border-radius:6px }

/* ======================= Main hero ======================= */
main{ position:relative; z-index:5; padding-top:110px; }
.main-hero{
  padding:60px 28px 40px; min-height:60vh; display:flex; gap:30px; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto;
}
.hero-inner{ max-width:820px; }
.hero-title{ font-size:2rem; margin:0 0 6px; color:#fff }
.name{ color:var(--accent); display:inline-block }
.role{ color:var(--accent) }

.typewrap{ margin:10px 0 18px; font-weight:600; font-size:1rem; color: #fff; min-height:44px }
.typewriter{ color:#fff }
.cursor{ color:var(--accent); margin-left:6px; animation: blink 900ms steps(2,start) infinite }
@keyframes blink{ 50% { opacity:0 } }

.btn.primary{
  display:inline-block; padding:12px 18px; border-radius:12px; background:var(--brand); color:white; text-decoration:none; font-weight:700;
  box-shadow: 0 6px 20px rgba(58,108,244,0.14);
}

/* hero socials */
.hero-socials{ display:flex; gap:10px; align-items:center }
.hero-socials a{ color:#fff; font-size:1.25rem; opacity:.95 }

/* ======================= Section common ======================= */
.title{ font-weight:700; color:var(--brand); text-align:left; margin:0; font-size:1.6rem }
.section-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:1200px; margin:0 auto; padding: 24px 18px 6px; }
.section-header .title{ margin:0 }
.section-toggle{ background:transparent; border:0; color:var(--accent); cursor:pointer; font-size:1.1rem }

/* wrap for collapsed content */
.section-body{ overflow:hidden; transition: max-height 420ms ease; max-height: 0 } 
.collapsible-section.open .section-body { /* open state controlled by script */ }

/* ======================= Testimonials slider ======================= */
.testimonials{
  padding: 0 18px 18px; background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
  margin-top:10px;
}
.testimonials .title{ color:var(--accent) }

/* container with arrows + slider */
.testimonial-wrap{ display:flex; align-items:center; gap:10px; max-width:1100px; margin:0 auto; position:relative }
.t-arrow{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--accent); padding:8px 12px; border-radius:8px; cursor:pointer }
.t-arrow:focus{ outline:2px solid rgba(78,158,255,0.3) }

/* slider itself */
.testimonial-slider{
  flex:1; display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  scrollbar-width:none;
}
.testimonial-slider::-webkit-scrollbar{ display:none }

/* --- Match Folder A sizes for testimonial cards --- */
.testimonial-card{
  flex: 0 0 80%;              /* Folder A: flex-basis 80% */
  background:var(--card-bg);
  color:#222;
  border-radius:12px;
  padding:25px;               /* Folder A padding */
  scroll-snap-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  transition: 0.5s ease;
}
.testimonial-card:hover { transform: scale(1.05); }
.testimonial-text{ font-style:italic; margin-bottom:20px; color:#333; font-size:0.95em; line-height:1.5em }

/* client info */
.client-info { text-align:center; }
.client-info img{ width:70px; height:70px; border-radius:50%; margin-bottom:10px; border:3px solid var(--brand); object-fit:cover; }
.client-info h3{ margin:5px 0; font-size:1.2em; color:#111 }
.client-info span{ color:var(--muted); font-size:0.9em }

/* dots */
.testimonial-dots{ display:flex; gap:8px; justify-content:center; margin-top:8px }
.testimonial-dots .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.12); border:0; cursor:pointer }
.testimonial-dots .dot.active{ background:var(--accent) }

/* ======================= Cards / Skills / Projects ======================= */
.cards { padding: 0 18px 48px; max-width:1200px; margin:0 auto; }
.cards-grid{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap }

/* --- APPLY FOLDER A SIZE STYLES EXACTLY --- */
.card{
  background:var(--card-bg);
  color:#111;
  border-radius:10px;
  padding:25px;              /* Folder A padding */
  margin:15px;               /* Folder A margin */
  width:21.25em;             /* Folder A width */
  box-shadow:0 5px 25px rgba(0,0,0,0.15);
  text-align:center;
  transition: transform .25s ease;
}
.card:hover{ transform: scale(1.03) }

/* Icon size same as Folder A */
.icon{ color:var(--brand); font-size:5em; text-align:center; margin-bottom:6px; }

/* card text */
.card h3{ margin:10px 0 8px; color:var(--brand); font-size:1.2rem }
.card p{ color:var(--muted); margin:0 }

/* projects grid */
.projects { padding: 0 18px 48px; max-width:1200px; margin:0 auto; background:transparent; }
.projects-grid{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px }

/* --- APPLY FOLDER A project size EXACTLY --- */
.project-card{
  background:var(--card-bg);
  color:#111;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 5px 25px rgba(0,0,0,0.12);
  width:20em;               /* Folder A width */
  min-height:12em;         /* Folder A min-height */
  margin:20px;             /* Folder A margin */
  transition: transform .25s ease;
}
.project-card:hover{ transform: scale(1.03) }

.project-image img{ width:100%; display:block; height:180px; object-fit:cover }
.project-info{ padding:12px }
.project-category{ font-size:0.8em; color:#000 }
.project-title{ display:flex; justify-content:space-between; align-items:center; text-transform:uppercase; font-weight:800; margin-top:10px }
.more-details{ text-decoration:none; color:var(--brand); font-weight:700 }

/* ======================= Videos styles (new) ======================= */
.videos { padding: 0 18px 48px; max-width:1200px; margin:0 auto; }
.videos-grid{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; align-items:flex-start }

.video-card{
  background:var(--card-bg);
  color:#111;
  border-radius:10px;
  padding:16px;
  margin:15px;
  width:40em;               /* wider card for video */
  max-width:100%;
  box-shadow:0 5px 25px rgba(0,0,0,0.12);
  text-align:left;
}
.video-player{
  position:relative;
  width:100%;
  background:#000;
  border-radius:8px;
  overflow:hidden;
}

/* Placeholder / play overlay */
.video-placeholder{
  position:relative;
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  height:220px; /* provide a visible target so user knows to click */
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-placeholder .play-icon{
  font-size:44px;
  background:rgba(0,0,0,0.45);
  color:white;
  width:72px;
  height:72px;
  line-height:72px;
  text-align:center;
  border-radius:50%;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  pointer-events:none;
}

/* Native video element — responsive 16:9 */
.video-player video,
.video-player iframe{
  width:100%;
  height:calc(100vw * 9 / 16); /* responsive height based on viewport width */
  max-height:420px;
  display:block;
  object-fit:cover;
  background:#000;
}

/* When video card is narrower (desktop) lock to aspect-ratio via CSS where supported */
@supports (aspect-ratio: 16 / 9) {
  .video-player video,
  .video-player iframe {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height:420px;
  }
}

.video-card figcaption{
  margin-top:10px;
  color:#222;
}
.video-card .muted{ color:var(--muted); margin:6px 0 0; }

/* iframe fallback hidden by default */
.iframe-fallback{ display:none }

/* ======================= contact & footer ======================= */
.contact-grid{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap }

.footer{ padding:20px; background:linear-gradient(180deg,#000016,#000014); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; max-width:1200px; margin:20px auto }
.footer .footer-title span{ color:var(--brand) }

/* ======================= Responsive tweaks ======================= */
@media (max-width:900px){
  .testimonial-card{ flex:0 0 88% }
  .card{ width:21.25em } /* keep Folder A width on medium screens */
  .project-card{ width:18.5em; min-height:11.5em }
  .video-card{ width:100%; padding:12px }
  .video-player video,
  .video-player iframe{ max-height:360px; height:auto }
  .site-header{ margin:0 12px; padding:10px 14px }
  .main-hero{ flex-direction:column; align-items:flex-start; gap:18px; padding:36px 18px }
  .hero-socials{ order:3 }
  .nav-toggle{ font-size:1rem }
  .navigation{ right:10px }
}

/* small screens */
@media (max-width:640px){
  .card{ width:19.5em; padding:20px }
  .project-card{ width:100%; min-height:10rem; margin:12px 0 }
  .client-info img{ width:58px; height:58px }
  .testimonial-card{ flex:0 0 92% }
  .video-player video,
  .video-player iframe{ height:auto; max-height:320px }
  .video-placeholder{ height:180px }
}

/* tiny screens */
@media (max-width:420px){
  .card{ width:100%; margin:10px 0; padding:18px }
  .icon{ font-size:4.2em }
}

/* Accessibility: focus styles and reduced motion */
:focus {
  outline: 3px solid rgba(78,158,255,0.28);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .spark { animation: none; opacity: .9; }
  .cursor { animation: none; }
  * { scroll-behavior: auto; }
}
/* Profile photo */
.hero-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 3px solid var(--brand);
}

/* Center hero content */
.hero-inner {
  max-width: 820px;
  display: flex;
  flex-direction: column; /* stacked vertically */
  align-items: center;
  text-align: center;
}

/* Adjust main-hero for small gap */
.main-hero {
  padding: 60px 28px 40px;
  min-height: 60vh;
  display: flex;
  flex-direction: column; /* stacked */
  gap: 20px;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
.site-header {
  margin-bottom: 0;
  padding-bottom: 0;
}

.main-hero {
  margin-top: -50px;   /* pull it closer to the logo */
  padding-top: 0;
  }