/* style.css
   Dark theme using the palette you provided.
   Replace fonts/images paths as needed.
*/

/* ---------- VARIABLES ---------- */
:root{
  --color-slate-900: rgba(19,52,59,1);
  --color-teal-300: rgba(50,184,198,1);
  --color-teal-400: rgba(45,166,178,1);
  --color-teal-500: rgba(33,128,141,1);
  --color-teal-600: rgba(29,116,128,1);
  --color-teal-700: rgba(26,104,115,1);
  --color-teal-800: rgba(41,150,161,1);

  --bg: linear-gradient(180deg, rgba(6,22,24,0.95), rgba(2,10,12,0.95));
  --muted: rgba(200,215,216,0.55);
  --card-bg: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.03);
  --accent: var(--color-teal-400);
  --accent-strong: var(--color-teal-500);
  --accent-glow: 0 10px 30px rgba(33,128,141,0.07);
  --max-width: 1200px;
  --radius: 14px;
  --ease: cubic-bezier(.2,.9,.3,1);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100vh;background:var(--bg);background-attachment: fixed;color:#e6fbfb;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased; cursor: url(Assest/custom-cursor.svg), auto;}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* ---------- NAV ---------- */
.site-header{position:sticky;top:0;z-index:80;background:linear-gradient(180deg, rgba(6,22,24,0.6), rgba(6,22,24,0.4));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center;color:#e6fbfb}
.brand img{border-radius:8px}
.brand-text strong{font-size:1rem}
.brand-text .muted{display:block;color:var(--muted);font-size:0.82rem;margin-top:2px}

/* nav list */
.nav-list{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.nav-link{padding:8px 10px;border-radius:10px;color:rgba(255,255,255,0.9);transition:all .22s var(--ease)}
.nav-link:hover{transform:translateY(-2px);box-shadow:var(--accent-glow);color:var(--accent)}
.cta{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px}

/* hamburger */
.nav-toggle{display:none;background:transparent;border:0;padding:8px}
.hamburger{width:22px;height:2px;background:#dff6f6;display:block;position:relative}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#dff6f6}
.hamburger::before{top:-7px} .hamburger::after{top:7px}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;min-height:72vh;display:flex;align-items:center;justify-content:center}
.hero-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
.hero-inner{position:relative;z-index:3;text-align:center;padding:60px 20px;max-width:980px;margin:0 auto}
.hero-title{font-size:clamp(1.6rem,5.5vw,3rem);margin:0 0 12px;line-height:1.02;letter-spacing:-0.01em}
.hero-title .accent{color:var(--accent-strong);text-shadow:0 6px 30px rgba(33,128,141,0.08)}
.hero-sub{color:var(--muted);margin:0 auto 20px;max-width:720px;font-size:1rem}

/* === Typing Effect === */
#typing-text {
  position: relative;
  white-space: nowrap; /* Prevent wrapping on desktop */
}

#typing-text::after {
  content: '|'; /* Simple cursor */
  color: var(--accent);
  animation: blink 0.75s step-end infinite; /* Reuse your blink if desired */
  position: absolute;
  right: -0.1em; /* Adjust to overlap without adding width */
}

@keyframes blink {
  50% { opacity: 0; }
}

/* hero micro-animations */
.wow{display:inline-block;position:relative;overflow:visible;transform-origin:center;animation:pop-in .9s var(--ease) both}
@keyframes pop-in{from{transform:translateY(6px) scale(.98);opacity:0}to{transform:none;opacity:1}}

/* actions */
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:700;border:1px solid transparent;transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.btn:active{transform:translateY(1px) scale(.997)}
.btn-primary{background:linear-gradient(90deg,var(--color-teal-400),var(--color-teal-500));box-shadow:var(--accent-glow);color:#00282a}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:rgba(255,255,255,0.95)}
.btn:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.3)}

/* hero stats */
.hero-stats{display:flex;gap:18px;margin-top:20px;justify-content:center;color:var(--muted)}
.hero-stats .stat{text-align:center}
.hero-stats .num{font-weight:800;font-size:1.1rem;color:#e9fffe}

/* ---------- SECTIONS ---------- */
.section {
  padding: 56px 0;
  background: transparent;
  transition: background 0.6s ease;
}
.services-section {
  background: transparent;
}
.section-head h2{margin:0 0 18px;font-size:1.4rem; justify-content:center;position:relative; display:flex;}
.lead{color:var(--muted);margin-bottom:16px;display: flex;justify-content: center;}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--muted);
}
.service-list li::before {
  content: "✔";
  color: var(--accent-strong);
  margin-right: 6px;
}

/* About KWT SECTION*/
.about-section {
  background: transparent;
  padding: 80px 0;
}

.lead-about {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 720px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.features li{color: whitesmoke;}

.section-head h2{
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}

.about-copy {
  max-width: 580px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
}

.about-card {
  display: flex;
  justify-content: center;
}

.about-card .card {
  max-width: 360px;
  text-align: left;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.about-card .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-card {
    order: 2;
  }
  .about-copy {
    text-align: center;
  }
}

/* split layout */
.split{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:center}
.about-visual{display:flex;align-items:center;justify-content:center}
.card.glass{background:var(--card-bg);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(2,8,10,0.45);border:1px solid rgba(255,255,255,0.03)}
.link-arrow{display:inline-block;margin-top:12px;color:var(--accent);font-weight:700}

/* features */
.features{list-style:none;padding:0;margin:14px 0 0;color:var(--muted);display:grid;gap:8px}
.features li{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:10px;border-radius:8px}

/* ---------- CARDS / GRIDS ---------- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:var(--card-bg);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(2,8,10,0.6)}
.anim-fade{opacity:0;transform:translateY(6px);transition:all .6s var(--ease)}

/* portfolio grid */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr)); /* Larger min-width for bigger cards */
  gap: 24px; /* Increased gap for visual breathing room */
  margin-top: 24px; /* Slight increase for section flow */
  justify-content: center; /* Centers the grid in wider containers */
}

/* Individual Portfolio Items */
.portfolio-item {
  background: var(--card-bg);
  border-radius: var(--radius); /* Keeps your 14px radius */
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.portfolio-item img {
  display: block;
  width: 100%;
  height: 280px; /* Increased height for larger, more impactful visuals */
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.portfolio-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(2,8,10,0.6);
}

.portfolio-item:hover img {
  transform: scale(1.06); /* Subtle zoom on hover for engagement */
}

.portfolio-item figcaption {
  padding: 16px; /* Slightly more padding for balance with larger size */
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portfolio-item figcaption strong {
  color: #eafffe;
  font-size: 1.1rem; /* Slightly larger text for readability */
}

/* Scroll Progress Bar */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px; /* Thin and subtle */
  width: 0; /* Starts at 0% */
  background: var(--accent); /* Teal accent from your palette */
  z-index: 9999; /* Above other elements */
  transition: width 0.2s ease-out; /* Smooth width changes */
  opacity: 0.8; /* Slightly transparent for elegance */
}

/* Responsive adjustments (e.g., hide on very small screens if needed) */
@media (max-width: 480px) {
  #progress-bar {
    height: 3px; /* Thinner on mobile */
  }
}

/* calendly wrapper */
.calendly-wrapper{margin-top:12px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.calendly-wrapper:hover{cursor: url(Assest/custom-cursor.svg),auto;}

/* footer */
.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted)}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-contacts,.footer-social{display:flex}.footer-contacts{align-items:center;gap:1.5rem}.footer-email{color:inherit;text-decoration:underline;font-weight:500}.footer-social{gap:.75rem}.footer-social-icon svg{vertical-align:middle;width:24px;height:24px;fill:currentColor;transition:opacity .2s}.footer-social-icon:hover svg,.footer-email:hover{opacity:.75}
/* ---------- ANIMATIONS FOR REVEAL ---------- */
.anim-raise{transform:translateY(10px);opacity:0;transition:transform .6s var(--ease), opacity .6s var(--ease)}
.anim-card{transform:translateY(16px);opacity:0;transition:transform .6s var(--ease), opacity .6s var(--ease)}
.in-view{transform:none;opacity:1}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .portfolio-grid{grid-template-columns:repeat(2,minmax(300px,1fr));gap:20px}
  .portfolio-item img{height:260px}
}

@media (max-width:980px){
  .split{grid-template-columns:1fr}
  .about-visual{order:-1}
}

@media (max-width:640px){
  #typing-text{white-space:normal !important; display:inline-block;} /* Allow text to wrap on mobile */
  .nav-list{display:none;position:absolute;right:20px;top:64px;background:linear-gradient(180deg, rgba(6,22,24,0.9), rgba(6,22,24,0.85));padding:12px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.6)}
  .nav-toggle{display:block}
  .nav-list.open {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    min-width: 200px;
  }
  .portfolio-grid{grid-template-columns:minmax(280px,1fr);gap:16px;justify-content:center}
  .portfolio-item img{height:240px}
  .hero-inner{padding:40px 16px}
  .hero-title{font-size:1.4rem}
  #custom-cursor{display:none} /* hide custom cursor on touch devices */
}

/* small accessibility / focus */
[tabindex]:focus{outline:3px solid rgba(45,166,178,0.14);outline-offset:4px}