:root{
  /* Dark theme */
  --bg:#0b1020;
  --surface:#111630;
  --surface-2:#0f1530;
  --text:#e9ecff;
  --muted:#a7acd0;

  --accent:#ff6b6b;     /* coral */
  --accent-b:#845ef7;   /* violet */
  --accent-c:#23b5d3;   /* teal */
  --accent-d:#ffb703;   /* sunflower */

  --border:#22294d;
  --shadow:0 14px 40px rgba(4,6,18,.35);
}

*{box-sizing:border-box}
html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:150%;display:block}
.container{width:min(1120px,92%); margin-inline:auto ;}

.muted{color:var(--muted)}
.page-enter{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0; transform:translateY(10px)}}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,16,32,.7); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;transform: scale(1.5);}
@media (max-width: 520px) {
  .brand {
    margin-left: 36px;
  }
  .footer-text {
    margin-left: auto;
    margin-right: auto;
  }
  .brand--footer {
    font-weight:800;
    margin-left: auto;
    margin-right: auto;
  }
  .footer__links {
    display:flex;
    gap:1rem;
    margin-left: auto;
    margin-right: auto;
  }
    
}
.brand__icon{color:var(--accent);font-size:1.4rem}
.nav__links{display:flex;align-items:center;gap:1.25rem}
.nav__links a{opacity:.9}
.nav__links a:hover{color:var(--accent)}
.nav__toggle{display:none;background:none;border:0;font-size:1.4rem;color:var(--text)}
.footer {
  padding-bottom: 30px;
}
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  padding: 0.7rem 1rem;
  border-radius: 1rem;
  font-weight: 700;
  gap: 0.4rem;
  background: transparent;
  color: var(--text);
  transition: all 1s ease; /* ⏳ smooth transition for color, shadow, etc. */
}
.btn--primary {
  background: linear-gradient(135deg, var(--accent-b), var(--accent));
  color: #fff;
  border: none;
  border-radius: 1rem;
  padding: 0.8rem 1.5rem;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(132, 94, 247, 0.35);
  transition: all 0.8s ease;
  background-size: 200% auto;
}

.btn--primary:hover {
  background-position: right center; /* smooth gradient slide */
  box-shadow: 0 0 25px rgba(132, 94, 247, 0.6);
  transform: translateY(-3px);
}


.btn--ghost {
  background: rgba(255, 255, 255, .04);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
}

.full {
  width: 100%;
}

.pulse {
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: translateZ(0); }
  50% { transform: translateZ(0) scale(1.03); }
}


/* Gradient headline */
.gradient-text{
  background:linear-gradient(135deg,#9fa9ff 0%, #ff8fab 40%, #ffd36a 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* HERO */
.hero{position:relative; padding:6rem 0 4rem; overflow:hidden}
.hero--colorful{
  background:
   radial-gradient(1400px 700px at 85% -10%, #301934 0%, transparent 40%),
   radial-gradient(1000px 560px at -10% 20%, #112641 0%, transparent 45%),
   radial-gradient(800px 480px at 60% 120%, #241b49 0%, transparent 55%);
}
.blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0;
  animation:float 12s ease-in-out infinite alternate;
}
.blob--1{width:420px;height:420px; background:#4b2e83; top:-90px; right:10%}
.blob--2{width:360px;height:360px; background:#1e5a73; bottom:-60px; left:-120px; animation-delay:1.2s}
.blob--3{width:280px;height:280px; background:#70421e; top:40%; left:50%; animation-delay:.6s}
@keyframes float{to{transform:translateY(30px) translateX(20px)}}

.hero__grid{position:relative; z-index:1; display:grid;grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.eyebrow{color:#b9bfff; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.8rem); line-height:1.08; margin:.4rem 0 1rem}
.lead{color:var(--muted); max-width:46ch}
.hero__cta{margin-top:1.25rem; display:flex; gap:.8rem; flex-wrap:wrap}
.hero__art{position:relative}
.illus{width:100%; height:auto; border-radius:1.2rem; box-shadow:var(--shadow); object-fit:contain}
.hero__badge{
  position:absolute; bottom:6%; left:6%;
  background:rgba(17,22,48,.9); border:1px solid var(--border); padding:.6rem .8rem; border-radius:.9rem; 
  box-shadow:var(--shadow); display:flex; gap:.5rem; align-items:center; font-weight:700;
}
.hero__badge i{color:#ffd36a}

/* Strip marquee */
.author-marquee {
  background-color: #0d0d16;
  padding: 20px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee span {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 500;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-left: 100%;
  animation: scroll-left 45s linear infinite;
}

/* Medium speed control */
.marquee[data-speed="medium"] span {
  animation-duration: 45s;
}

/* 🌀 Start from the middle (instead of left) */
@keyframes scroll-left {
  0% {
    transform: translateX(-50%); /* start halfway through the scroll */
  }
  100% {
    transform: translateX(-150%); /* keep looping seamlessly */
  }
}

/* Prevent overlap with spacing */
.marquee span::after {
  content: "                                             ";
}



/* Sections */
.section{padding:4.5rem 0}
.section--alt{background:var(--surface)}
.section__head{text-align:center; margin-bottom:2rem}
.section__head h2{font-size:clamp(1.6rem,2.8vw,2.2rem); margin:0}
.section__head p{color:var(--muted)}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.cards--alt .card__icon{background:linear-gradient(135deg,var(--accent-b), var(--accent))}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:1.2rem; padding:1.2rem;
  box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s;
  position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.45); border-color:#3a4180}
.card__icon{
  width:50px; height:50px; display:grid; place-items:center; border-radius:1rem; 
  color:#fff; margin-bottom:.6rem; font-size:1.3rem; background:linear-gradient(135deg,#3d7fff,#9c4dff);
}
.card h3{margin:.2rem 0 .2rem}
.card p{color:var(--muted); margin:0}
/* Portfolio card cover images */
.project-card .card__thumb {
  border-radius: 0.9rem;
  overflow: hidden;
  margin: -1.2rem -1.2rem 0.9rem; /* full-bleed top image inside card */
}

.project-card .card__thumb img {
  width: 100%;
  max-width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* Nice hover zoom on the cover */
.project-card:hover .card__thumb img {
  transform: scale(1.05);
}

/* About */
.about{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.about__list{list-style:none;padding:0;margin:1rem 0 1.5rem;display:grid;gap:.5rem}
.about__list i{color:#2adf95;margin-right:.4rem}
.about__art img{border-radius:1.2rem; box-shadow:var(--shadow)}

/* CTA */
.cta{background:linear-gradient(135deg,#2b1b5f,#0e3a52); padding:3.2rem 0}
.cta__inner{display:grid; place-items:center; text-align:center; gap:.6rem}
.cta__inner h3{margin:0 0 .2rem}

/* Accordion (if used) */
.accordion{display:grid; gap:.7rem; max-width:820px; margin-inline:auto}
.accordion__item{border:1px solid var(--border); border-radius:1rem; background:rgba(255,255,255,.03)}
.accordion__toggle{
  width:100%; text-align:left; padding:1rem 1.1rem; background:transparent; border:0; 
  font-weight:800; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--text);
}
.accordion__toggle i{transition:transform .2s}
.accordion__item.open .accordion__toggle i{transform:rotate(45deg)}
.accordion__content{padding:0 1.1rem .9rem 1.1rem; color:var(--muted); display:none}
.accordion__item.open .accordion__content{display:block}

/* Contact */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:start}
.contact__form{
  background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:1.2rem; box-shadow:var(--shadow);
  padding:1.2rem;
}
.contact__form .grid{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
label{display:grid; gap:.35rem; font-weight:700}
input, select, textarea{
  width:100%; padding:.75rem .9rem; border:1px solid var(--border); border-radius:.9rem;
  outline:none; font:inherit; background:#0d1430; color:var(--text);
}
input:focus, select:focus, textarea:focus{border-color:#606cff; box-shadow:0 0 0 3px rgba(96,108,255,.25)}
.form__msg{margin:.5rem 0 0; font-weight:700}

/* Footer */
/* Add professional spacing before footer */
footer::before {
  content: "";
  display: block;
  height: 2px;
  width: 80%;
  margin: 0 auto 40px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
}


.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.footer__links{display:flex; gap:1rem}
.brand--footer{font-weight:800}

/* Reveal */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s}
.fade-up.show{opacity:1; transform:none}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}

/* Mini hero for inner pages */
.hero--mini{padding:3rem 0 1rem; background:linear-gradient(180deg, #151a39, transparent)}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; text-align:center}
  .hero__badge{left:50%; transform:translateX(-50%)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .contact__form .grid{grid-template-columns:1fr}
  .nav__links{position:fixed; inset:64px 0 auto 0; background:var(--surface-2); border-bottom:1px solid var(--border);
    padding:1rem; display:none; flex-direction:column; gap:1rem}
  .nav__links.open{display:flex}
  .nav__toggle{display:block}
}
@media (max-width: 520px){
  .cards{grid-template-columns:1fr}
}

/* --- Portfolio gallery --- */
.gallery{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.gallery__item{
  position:relative; border-radius:.8rem; overflow:hidden;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
  transform:translateZ(0);
}
.gallery__item img{
  width:100%; height:220px; object-fit:cover; display:block; transition:transform .35s ease;
  filter:saturate(1.05) contrast(1.02);
}
.gallery__item:after{
  content:"View"; position:absolute; inset:auto 10px 10px auto;
  background:linear-gradient(135deg,var(--accent-b), var(--accent));
  color:#fff; font-size:.8rem; padding:.25rem .5rem; border-radius:.6rem; opacity:0; transform:translateY(6px);
  transition:.25s;
}
.gallery__item:hover img{ transform:scale(1.06); }
.gallery__item:hover:after{ opacity:1; transform:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(3,6,18,.9);
  display:none; place-items:center; z-index:200;
}
.lightbox.show{ display:grid; }
.lightbox__img{
  max-width:min(92vw,1200px); max-height:80vh; border-radius:1rem; box-shadow:var(--shadow);
  border:1px solid var(--border); background:#000;
}
.lightbox__caption{
  margin-top:.7rem; color:var(--muted); text-align:center;
}
.lightbox__close{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border:0; border-radius:.6rem;
  background:rgba(255,255,255,.07); color:#fff; cursor:pointer;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
  display:grid; place-items:center; border:0; border-radius:.6rem; cursor:pointer;
  background:rgba(255,255,255,.07); color:#fff;
}
.lightbox__prev{ left:16px }
.lightbox__next{ right:16px }
/* Hover View Button */
.card__view-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--accent-b), var(--accent));
    padding: 0.6rem 1.2rem;
    color: #fff;
    font-weight: 700;
    border-radius: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    z-index: 5;
}

/* On hover: fade in + slight zoom */
.project-card:hover .card__view-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
    pointer-events: auto;
    cursor: pointer !important;
}



/* Responsive gallery */
@media (max-width: 1100px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 740px){ .gallery{grid-template-columns:repeat(2,1fr)} .gallery__item img{height:180px} }
@media (max-width: 460px){ .gallery{grid-template-columns:1fr} .gallery__item img{height:200px} }

/* Trusted partners tweaks*/
.trusted-partners {
  background: #0e0f18;
  padding: 5rem 2rem;
  text-align: center;
}

.trusted-partners h2 {
  color: #fff;
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
}

.trusted-partners p {
  color: #bdbdbd;
  margin-bottom: 3rem;
  font-size: 1.05rem;
}

.partners-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.partners-logos img {
  height: 45px;
  width: auto;
  opacity: 0.85;
  transition: all 0.4s ease;
  filter: grayscale(100%);
}

/* 🟢 On hover: brighter + color reveal */
.partners-logos img:hover {
  opacity: 1;
  filter: grayscale(0%) brightness(1.2);
  transform: scale(1.05);
}

/* 🌙 Make dark logos visible on dark background */
.dark-logo {
  filter: brightness(200%) invert(1) grayscale(100%);
}

.dark-logo:hover {
  filter: brightness(250%) invert(0) grayscale(0%);
}



/* Gallery empty placeholder tile */
.gallery__item--empty{
  display:grid; place-items:center; background:repeating-linear-gradient(
    45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px
  );
  border:1px dashed #445;
}
.gallery__empty{
  display:grid; place-items:center; gap:.35rem; text-align:center; color:#cdd3ff;
}
.gallery__empty i{
  font-size:1.6rem; width:48px; height:48px; display:grid; place-items:center;
  border-radius:.8rem; background:rgba(255,255,255,.06); color:#fff;
}
.gallery__empty span{font-weight:800; letter-spacing:.02em}
.section.section--alt.work {
  padding-bottom: 42px;
  margin-bottom: 57px;
  
}
/* Nav contact button hover: use teal→violet (not red) */
.nav .btn--primary:hover{
  /* background: linear-gradient(135deg, #23b5d3, #845ef7); */
  box-shadow: 0 8px 22px rgba(35,181,211,.35);
  filter: none !important; /* cancel the old brightness filter */
}
/* Smaller illustration on homepage About preview */
.about__art--small .illus{
  max-width: 520px;     /* desktop cap */
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 980px){
  .about__art--small .illus{ max-width: 420px; }
}
@media (max-width: 520px){
  .about__art--small .illus{ max-width: 320px; }
}
/* Gallery empty placeholder tile (clickable) */
figure.gallery__item {
  margin-right: 0px;
  margin-left: 0px;
}

.gallery__item--empty{
  cursor: pointer;
  background:repeating-linear-gradient(
    45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 10px,
           rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px
  );
  border:1px dashed #445;
}
.gallery__item--empty:hover{
  border-color:#606cff;
  box-shadow: 0 8px 24px rgba(96,108,255,.18);
}
.gallery__empty{
  display:grid; place-items:center; gap:.4rem; text-align:center; color:#cdd3ff; padding:1rem;
}
.gallery__empty i{
  font-size:1.6rem; width:48px; height:48px; display:grid; place-items:center;
  border-radius:.8rem; background:rgba(255,255,255,.06); color:#fff;
}
.gallery__empty span{font-weight:800; letter-spacing:.02em}

/* Force smaller image on Home > "Who we are" */
.about__art--small{ 
  justify-self:end; 
  align-self:center; 
  display:flex; 
  justify-content:center; 
}
.about__art--small .illus{
  /* hard cap + responsive clamp, override generic .illus width */
  width: clamp(220px, 38vw, 420px);
  max-height: 360px;
  height: auto;
  object-fit: contain;
}

/* tighten on tablets/phones too */
@media (max-width: 980px){
  .about__art--small .illus{ width: clamp(200px, 60vw, 380px); max-height: 320px; }
}
@media (max-width: 520px){
  .about__art--small .illus{ width: clamp(180px, 70vw, 320px); max-height: 280px; }
}
/* CTA with photo background + dark overlay */
.cta--photo{
  /* If your file is literally named with spaces and parentheses, keep the quotes */
  background:
    linear-gradient(0deg, rgba(11,16,32,.80), rgba(11,16,32,.80)), /* overlay */
    url("assets/download (4).webp") center/cover no-repeat fixed;
}
/* HERO with background photo + dark overlay + keep subtle gradients */
.hero--photo{
  /* overlay to keep text readable */
  background:
    linear-gradient(180deg, rgba(11,16,32,.70), rgba(11,16,32,.70)),
    url("assets/download\ \(5\).webp") center/cover no-repeat,
    radial-gradient(1400px 700px at 85% -10%, #301934 0%, transparent 40%),
    radial-gradient(1000px 560px at -10% 20%, #112641 0%, transparent 45%),
    radial-gradient(800px 480px at 60% 120%, #241b49 0%, transparent 55%);
}

/* Optional: make blobs subtler over photos */
.hero--photo .blob{ opacity:.35; filter:blur(80px); }
/* ===== Enhanced portfolio grid ===== */
.filterbar{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 1.2rem;
}
.filterbar button{
  padding:.45rem .8rem; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:#dfe3ff; font-weight:700; cursor:pointer;
}
.filterbar button.active{ 
  background:linear-gradient(135deg,var(--accent-b), var(--accent));
  color:#fff; border-color:transparent;
}

.gallery--enhanced{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 10px;              /* base row height */
  grid-auto-flow: dense;             /* fills gaps */
  gap:10px;
}

.gallery__item{
  position:relative; overflow:hidden; border-radius:.9rem;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
  /* Span rows based on --h (you can tweak per item inline) */
  grid-row: span var(--h, 10);
  display:flex;                       /* allow caption overlay */
}
.gallery__item--wide{ grid-column: span 2; }
.gallery__item--tall{ --h: calc(var(--h, 24) + 10); } /* a bit taller */

.gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .35s ease;
  filter:saturate(1.05) contrast(1.02);
}
.gallery__item:hover img{ transform:scale(1.06); }

.caption{
  position:absolute; inset:auto 8px 8px 8px; padding:.5rem .6rem;
  border-radius:.6rem; color:#eaefff; font-weight:700;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
  display:flex; align-items:center; gap:.5rem;
  opacity:0; transform:translateY(6px); transition:.25s;
}
.gallery__item:hover .caption{ opacity:1; transform:none; }
.caption .tag{
  font-size:.72rem; padding:.18rem .5rem; border-radius:.6rem;
  background:linear-gradient(135deg,var(--accent-b), var(--accent));
}

/* Empty tile keeps previous look and is clickable */
.gallery__item--empty{
  cursor:pointer; align-items:center; justify-content:center;
  border:1px dashed #445;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 10px,
                                              rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px);
}
.gallery__item--empty:hover{ border-color:#606cff; box-shadow:0 8px 24px rgba(96,108,255,.18); }
.gallery__empty{ display:grid; place-items:center; gap:.4rem; text-align:center; color:#cdd3ff; padding:1rem; }
.gallery__empty i{ font-size:1.6rem; width:48px; height:48px; display:grid; place-items:center;
  border-radius:.8rem; background:rgba(255,255,255,.06); color:#fff; }
.gallery__empty span{ font-weight:800; letter-spacing:.02em }

/* Responsive tweaks */
@media (max-width:1100px){ .gallery__item--wide{ grid-column: span 1; } }
@media (max-width:740px){
  .gallery--enhanced{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 9px; }
}
/* Uniform portfolio grid (equal tiles) */
.gallery--uniform{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.gallery--uniform .gallery__item{
  position:relative; overflow:hidden; border-radius:.9rem;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
  aspect-ratio: 4 / 3;          /* equal size tiles */
}
.gallery--uniform .gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease, filter .35s ease;
  filter:saturate(1.05) contrast(1.03);
}
.gallery--uniform .gallery__item:hover img{ transform:scale(1.06); }

/* Lightbox (keep if not already present) */
.lightbox{
  position:fixed; inset:0; background:rgba(3,6,18,.9);
  display:none; place-items:center; z-index:200;
}
.lightbox.show{ display:grid; }
.lightbox__img{
  max-width:min(92vw,1200px); max-height:80vh; border-radius:1rem;
  border:1px solid var(--border); background:#000;
}
.lightbox__caption{ margin-top:.7rem; color:#cbd2ff; text-align:center; }
.lightbox__close, .lightbox__nav{
  position:absolute; border:0; border-radius:.6rem; cursor:pointer;
  width:44px; height:44px; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.07);
}
.lightbox__close{ top:16px; right:16px; }
.lightbox__prev{ left:16px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:16px; top:50%; transform:translateY(-50%); }

@media (max-width: 520px){
  .gallery--uniform{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
  }
}
button:hover,
.btn:hover,
.publish-btn:hover {
  color: #fff !important; /* Makes hover text pure white */
  transition: color 0.3s ease; /* Smooth color fade */
}
/* ✅ CONTACT FORM IMPROVEMENTS */
.contact__form {
  font-family: 'Montserrat', sans-serif;
}

/* Headings inside labels (like Name, Email, Service, Message) */
.contact__form label span {
  display: block;
  font-weight: 600;
  margin-bottom: 8px; /* space between heading and input */
  color: #ffffff;
}

/* Inputs and textarea spacing */
.contact__form input,
.contact__form select,
.contact__form textarea {
  margin-bottom: 22px; /* adds vertical breathing room */
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #2c2f47;
  background: #0b0f22;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

/* Fix the Service and Message label top spacing */
.contact__form label {
  margin-top: 16px; /* adds distance from the field above */
  display: block;
}

/* Send Message button */
.contact__form .btn.full {
  margin-top: 22px;
  padding: 14px 0;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  border-radius: 12px;
}

.about p,
.cta p {
  font-family: 'Montserrat', sans-serif;
  color: #e3e3e3; }

/* === TESTIMONIALS SECTION FIX === */
/* === CLEAN TESTIMONIALS SECTION === */
/* === FIXED SINGLE SLIDE TESTIMONIALS === */
.testimonials {
  background: var(--surface, #0b0f22);
  color: var(--text, #fff);
  padding: 6rem 0 5rem;
  text-align: center;
  overflow: hidden;
}

.testimonials h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 3rem;
  font-weight: 700;
}

.testimonials-slider {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  height: auto;
}

.testimonials-grid {
  display: flex;
  transition: transform 0.8s ease-in-out;
  width: 100%;
}

.testimonials-grid blockquote {
  flex: 0 0 100%;
  padding: 2rem 3rem;
  margin: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.testimonials-grid footer {
  margin-top: 1rem;
  font-style: normal;
  font-weight: 600;
  color: var(--accent, #b28cff);
}

.testimonial-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.testimonial-controls button {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonial-controls button:hover {
  background: var(--accent, #845ef7);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .testimonials-grid blockquote {
    padding: 1.5rem;
  }
}




blockquote {
  background: #0b0f22;
  padding: 1.5rem;
  border-left: 4px solid #f107a3;
  border-radius: 10px;
  font-style: italic;
}

.cta {
  /* background: linear-gradient(135deg, #3b2b7a 0%, #563a98 50%, #7d4fb0 100%); */
  background: linear-gradient(rgba(68, 68, 68, 0.55), rgba(0, 0, 0, 0.55)), url("assets/photo-1737302998863-6e7252d55a02.webp");
  background-repeat: no-repeat;
  background-size: inherit;
  background-position: revert;
  
  padding: 3rem 2rem;
  border-radius: 1.5rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 6px 24px rgba(60, 40, 120, 0.25);
  transition: background 1s ease, box-shadow 0.6s ease;

  width: 93%;
  margin-right: auto;
  margin-left: auto;
}



.why-section {
  padding: 6rem 2rem;
  background: #0d0f1a;
  text-align: center;
  color: #fff;
}

.why-section h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
}

.why-section h2 span {
  color: var(--accent);
}

.why-section .subtext {
  color: #bdbdbd;
  max-width: 750px;
  margin: 0 auto 3rem auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

.why-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  flex-wrap: wrap;
}

.why-card {
  flex: 1 1 300px;
  max-width: 340px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  transition: all 0.6s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.why-card:hover {
  border-color: var(--accent);
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(132, 94, 247, 0.3);
}

.why-card .icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.why-card h3 {
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 0.6rem;
}

.why-card p {
  color: #bdbdbd;
  line-height: 1.5;
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .why-grid {
    flex-direction: column;
    align-items: center;
  }
}

/* space before footer */

.section.cta {
  margin-bottom: 80px;
  width: 93%;
  margin-right: auto;
  margin-left: auto;
}
/* =========================================
   SMOOTH COLOR + HOVER TRANSITIONS
   ========================================= */

/* Apply gentle transitions globally */
*, *::before, *::after {
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- Universal button & link styling --- */
button,
a.button,
.btn,
.cta-button {
  transition: background-color 0.45s ease, color 0.45s ease,
              box-shadow 0.45s ease, transform 0.35s ease !important;
  transform: translateY(0);
}

/* Hover state: smooth lift + fade */
button:hover,
a.button:hover,
.btn:hover,
.cta-button:hover {
  transform: translateY(-3px);
  background-color: var(--accent, #8c6bff);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* --- Specific fix for “SEND MESSAGE” button in contact section --- */
#contactForm button,
.contact-form button {
  /* background: var(--accent, #845ef7); */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.8rem 1.8rem;
  font-weight: 600;
  transition: background-color 0.5s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

#contactForm button:hover,
.contact-form button:hover {
  background-color: #6f4df7;
  box-shadow: 0 8px 24px rgba(132, 94, 247, 0.4);
  transform: translateY(-3px);
}

/* --- CTA “LET’S PUBLISH” button --- */
.section.cta a.button,
.section.cta button {
  background: linear-gradient(90deg, #845ef7, #a779ff);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 1rem 2rem;
  transition: background 0.6s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.section.cta a.button:hover,
.section.cta button:hover {
  background: linear-gradient(90deg, #a779ff, #845ef7);
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(132, 94, 247, 0.3);
}

/* --- Other interactive elements --- */
nav a:hover {
  color: var(--accent, #845ef7);
  transition: color 0.4s ease;
}

.card:hover,
.service-card:hover,
.feature-box:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.5s ease;
}

/* Prevent ANY background movement on hover across the site */
*[style*="background"]:hover {
  background-position: center !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ================================
   HERO IMAGE CAROUSEL
   ================================ */

.hero-carousel {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide.active {
  opacity: 1;
}




/* =========================================
   ULTIMATE ABOUT SECTION FIX: Shrink Vertical Space
   ========================================= */

/* 1. LAYOUT: Ensure the ABOUT section grid aligns to the top */
.about {
  /* Aligns the content of the two columns (text and image) to the start (top) */
  align-items: start !important; 
  /* Sets new column ratio: 55% text (1.1fr) / 45% image (0.9fr). 
     You can adjust the ratio here if you prefer a different split: */
  grid-template-columns: 1.1fr 0.9fr !important; 
}

/* 2. IMAGE CONTAINER (Crucial for Vertical Space) */
.about .about__art {
  /* Set the column item to align to the start of its row (top) */
  align-self: start !important; 
  /* Tell the grid item to only take up the necessary vertical space */
  height: fit-content !important; 
  /* Limit the visual size of the image itself */
  max-width: 90% !important; 
  /* Ensures the image is pushed to the top corner of its column */
  margin-top: 0 !important;
}

/* 3. EYEBROW STYLING: Make "Who we are" text BIG (Re-added for completeness) */
.about .eyebrow {
  color: #b9bfff !important; 
  font-weight: 800 !important; 
  letter-spacing: .15em !important; 
  text-transform: uppercase !important;
  font-size: 1.5rem !important; 
  margin-top: 0 !important; 
  margin-bottom: 2rem !important; 
  display: block !important; 
}

/* 4. HEADLINE STYLING: Ensure the h2 starts right after the eyebrow */
.about h2 {
  margin-top: 0 !important; 
}

/* 5. ILLUSTRATION STYLING */
.about .about__art .illus {
  /* Ensure the illustration itself scales correctly */
  max-width: 100% !important; 
  height: auto !important;
}
/* =========================================
   NEW: STYLING FOR BULLETED TEXT
   ========================================= */

/* =========================================
   BULLETED LIST FINAL FIX: Perfect Hanging Indent
   ========================================= */

.about__features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem; 
  display: grid; 
  gap: 0.8rem !important; 
}

/* Use flexbox on the list item */
.about__features li {
  display: flex !important; 
  align-items: flex-start !important; 
  font-size: 1.05rem;
  color: var(--text, #ffffff);
  line-height: 1.5; 
}

/* Style the icon (first item) */
.about__features li i {
  flex-shrink: 0; /* Ensures the icon doesn't move */
  color: #2adf95; 
  margin-right: 0.6rem;
  font-size: 1.2rem;
  padding-top: 3px; 
}

/* Style the new text wrapper (second item) */
.about__features li span {
  flex-grow: 1; /* Allows the span to take up the remaining space */
}

/* Ensure bolded text stays strong */
.about__features strong {
  color: var(--text-highlight, #ffffff); 
  font-weight: 700;
  display: inline;
}


/*WORK PAGE CSS FIXES*/
/* =========================================
/* =========================================
   NEW MODAL STYLE: Main View + Thumbnails
   ========================================= */

/* 1. Modal Overlay (Positioning for Centering) */
/* =========================================
   CRITICAL: NEW MODAL STYLE OVERRIDE
   ========================================= */

/* Clean & simple overlay for project lightbox */
#projectLightbox {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(3, 6, 18, 0.95);
  display: none;                /* hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#projectLightbox.show {
  display: flex;                /* shown when .show is added */
}




/* 2. Modal Content Box (Size and Structure) */
.lightbox__content {
    /* Fixed size relative to viewport, centered by the parent flexbox */
    width: 90vw; /* Takes up 90% of the viewport width */
    max-width: 1300px; /* But won't get huge on massive screens */
    height: 90vh; /* Takes up 90% of the viewport height */
    max-height: 900px; /* Won't get huge vertically */
    
    background: var(--surface); /* Use the surface color for the background */
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 20px;
    
    display: flex;
    flex-direction: column; /* Stacks title, main image, and thumbnails */
    position: relative;
}

/* 3. Header & Close Button */
.lightbox__caption {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-b);
    text-align: center;
    margin-bottom: 15px;
}

#projectLightbox .lightbox__close {
    position: absolute; 
    top: 10px; 
    right: 10px; 
    z-index: 10000;
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text);
    font-size: 1.2rem;
    transition: background 0.3s ease;
}

/* 4. Main Image Display Area */
.lightbox__main-view {
    flex-grow: 1; /* Takes up most of the vertical space */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Important for containing large images */
    margin-bottom: 15px;
    border-radius: 0.5rem;
    background: var(--bg);
}

.lightbox__main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures the image fits without cropping */
    display: block;
    transition: opacity 0.4s ease;
}

/* 5. Thumbnails Bar */
.lightbox__thumbnails {
    /* Uses Flexbox for horizontal scrolling thumbnails */
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* Allows horizontal scrolling */
    flex-shrink: 0; /* Prevents shrinking when space is tight */
    padding-bottom: 5px; /* Space for scrollbar */
}

.lightbox__thumb-tile {
    width: 100px;
    height: 75px; 
    flex-shrink: 0;
    margin-right: 10px;
    opacity: 0.6;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
}

.lightbox__thumb-tile:hover,
.lightbox__thumb-tile.active {
    opacity: 1;
    border-color: var(--accent-b); /* Highlight active/hovered thumbnail */
}

.lightbox__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- CRITICAL FIX: Preventing ancestor style conflict --- */
/* Target the main content section containers */
.section, .container {
    /* Explicitly undo properties that break position:fixed */
    transform: none !important;
    perspective: none !important;
    filter: none !important;
}

/* FIX: Don't allow the body (.page-enter) to be transformed,
   so position: fixed overlays (like the lightbox) work relative to the viewport */
body.page-enter {
  transform: none !important;
}
@keyframes pageIn {
  from { opacity: 0; }  /* removed transform */
}