/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Poppins',sans-serif;background:#000;color:#eee;line-height:1.6}
img{max-width:100%;height:auto;display:block;border-radius:8px}

/* Colors */
:root{
  --gold:#d3ad49;
  --gold-strong:#ffc54d;
  --gold-soft:rgba(211,173,73,.3);
  --bg:#000;
  --bg2:#0b0b0b;
}

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border-bottom:1px solid rgba(211,173,73,.15);}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;}
.brand{font-weight:700;font-size:1.1rem;letter-spacing:.5px;color:#fff}
.brand span{color:var(--gold)}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-links a{color:#ddd;text-decoration:none;position:relative}
.nav-links a:after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-strong));transition:.25s}
.nav-links a:hover:after{width:100%}

/* Hero */
.hero{height:100vh;background-size:cover;background-position:center;position:relative;}
.hero-overlay{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55));padding:0 16px;}
.hero .sub{color:#fff;margin:10px 0 20px;opacity:.9}
.gold-sweep{color:#fff;font-size:clamp(34px,6vw,64px);position:relative;display:inline-block}
.gold-sweep:after{content:'';position:absolute;left:-10%;bottom:-8px;height:3px;width:120%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:sweep 2s ease-out forwards}
@keyframes sweep{0%{transform:translateX(-30%);opacity:0}100%{transform:translateX(0);opacity:1}}

.gold-particles{position:absolute;inset:0;background-image:radial-gradient(var(--gold-soft) 1px, transparent 1px);background-size:4px 4px;opacity:.15;pointer-events:none}

/* Dividers */
.divider-gold{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.divider-angled{height:60px;background:linear-gradient(180deg,transparent 40%,#0b0b0b 40%);}

/* Sections */
.section{padding:80px 20px}
.section h2{color:var(--gold);text-align:center;margin:0 0 24px}
.about,.services,.portfolio,.testimonials,.contact{max-width:1200px;margin:0 auto}

/* About */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.counters{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}
.counters div{background:#101010;border:1px solid var(--gold-soft);padding:12px 16px;border-radius:10px;min-width:160px;text-align:center}
.counter{font-size:28px;font-weight:700;color:var(--gold)}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:#0d0d0d;border:1px solid rgba(211,173,73,.25);padding:18px;border-radius:14px;box-shadow:0 0 0 rgba(211,173,73,0);transition:box-shadow .25s, transform .25s}
.card h3{color:#fff;margin:0 0 8px}
.card:hover{box-shadow:0 0 22px rgba(211,173,73,.45);transform:translateY(-3px)}

/* Buttons */
.btn-gold{padding:12px 22px;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-strong));border:none;color:#000;font-weight:700;text-decoration:none;display:inline-block;box-shadow:0 0 0 rgba(211,173,73,0);transition:transform .2s, box-shadow .2s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(211,173,73,.35)}

/* Portfolio */
.filters{text-align:center;margin:6px 0 20px}
.filter-btn{margin:0 8px 8px;padding:8px 16px;border-radius:999px;border:1px solid var(--gold);background:transparent;color:#fff;cursor:pointer}
.filter-btn.active,.filter-btn:hover{background:linear-gradient(90deg,var(--gold),var(--gold-strong));color:#000;border-color:transparent}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gallery .item{position:relative;overflow:hidden;border-radius:12px;background:#111;border:1px solid rgba(211,173,73,.2)}
.gallery .item img{transition:transform .35s ease}
.gallery .item:hover img{transform:scale(1.05)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:2000}
.lightbox img{max-width:90vw;max-height:85vh;border:2px solid var(--gold);border-radius:8px}
.lightbox-close{position:absolute;top:20px;right:26px;font-size:36px;color:#fff;cursor:pointer}
.lightbox-arrows{position:absolute;bottom:28px;display:flex;gap:12px}
.lightbox-arrows button{background:transparent;border:1px solid var(--gold);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.lightbox.show{display:flex}

/* Testimonials */
.testimonials{background:#0b0b0b;border:1px solid rgba(211,173,73,.15);border-radius:16px;padding:40px}
.carousel{display:flex;gap:24px;overflow:hidden;position:relative}
.slide{min-width:100%;text-align:center;opacity:.85;transform:scale(.98);transition:transform .4s, opacity .4s}
.slide.active{opacity:1;transform:scale(1)}

/* Contact */
.locations{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px}
.location{background:#0d0d0d;border:1px solid rgba(211,173,73,.25);padding:16px;border-radius:12px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(211,173,73,.35);background:#0d0d0d;color:#fff}
.contact-form textarea{resize:vertical}
.contact-form button{width:100%}

/* Footer */
.footer{text-align:center;padding:28px;color:#999;border-top:1px solid rgba(211,173,73,.15)}

/* Responsive */
@media (max-width: 900px){
  .about-grid{grid-template-columns:1fr}
  .locations{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
}

/* --- VISIBILITY & LAYOUT FIXES --- */
.section{position:relative; z-index:1;}
.portfolio{padding-bottom:120px;} /* space below large galleries */
.testimonials{margin-top:40px; min-height:260px;}
.carousel{min-height:160px;}
.slide{display:none;}
.slide.active{display:block;}
.lightbox{display:none;}
.lightbox.show{display:flex;}

/* Ensure iframes scale properly */
.location iframe{width:100%; height:260px; display:block;}

/* Make sure navbar doesn't cover anchors */
:target::before{content:""; display:block; height:70px; margin-top:-70px; visibility:hidden;}

/* Improve contrast for section headings on some screens */
.section h2{text-shadow:0 2px 12px rgba(0,0,0,0.6);}

/* --- Compact gallery layout fix --- */
.gallery{grid-auto-flow:dense;}
.gallery .item{min-height: 10px; background:#111; border:1px solid rgba(211,173,73,.2);}

/* --- Uniform gallery cards to prevent gaps --- */
.gallery .item{
  position:relative;
  aspect-ratio: 4 / 3;   /* uniform card heights */
  overflow:hidden;
  display:block;
}
.gallery .item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;       /* crops neatly without distortion */
}


/* --- Uniform project gallery sizing and image fit --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gallery .project-card {
  position: relative;
  aspect-ratio: 4 / 3; /* consistent tiles */
  overflow: hidden;
  border-radius: 12px;
  background: #f2f2f2; /* neutral fallback (no black boxes) */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.gallery .project-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* fills tile without distortion */
  transform: translateZ(0); /* fixes GPU flicker in some browsers */
}


/* --- Uniform 4:3 aspect ratio for all project images --- */
.gallery .project-card {
  aspect-ratio: 4 / 3 !important;
}
.gallery .project-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* --- OVERRIDE: Use 16:9 aspect ratio for All Projects gallery --- */
.gallery .project-card {
  aspect-ratio: 16 / 9 !important;
}
.gallery .project-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}


/* --- UNIFORM SQUARE GALLERY (1:1) --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.gallery .project-card {
  position: relative;
  aspect-ratio: 1 / 1 !important; /* uniform squares */
  border-radius: 14px;
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.gallery .project-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* smart crop to fill squares */
  display: block;
  transform: translateZ(0);
}
/* Nice hover feel (optional) */
.gallery .project-card:hover img {
  transform: scale(1.03);
  transition: transform .25s ease;
}



/* === ChatGPT: Force 4-in-a-row for ALL PROJECTS === */
#portfolio .filters{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* EXACTLY 4 per row */
  gap: 14px !important;
}
#portfolio .filters .project-card{
  position: relative !important;
  aspect-ratio: 4 / 3 !important;   /* uniform tiles */
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #111 !important;
  border: 1px solid rgba(211,173,73,.18) !important;
}
#portfolio .filters .project-card img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .3s ease !important;
  display: block !important;
}
#portfolio .filters .project-card:hover img{
  transform: scale(1.03) !important;
}
/* Optionally ensure .gallery (if unused) doesn't interfere */
#portfolio .gallery{ display: none !important; }



/* === ChatGPT: Mobile-friendly layout for All Projects (keep 4 on desktop) === */
@media (max-width: 900px){
  #portfolio .filters{
    grid-template-columns: repeat(2, 1fr) !important; /* 2 per row on tablets */
  }
  #portfolio .filters .project-card{
    aspect-ratio: 4 / 3 !important; /* keep consistent tiles */
  }
}
@media (max-width: 520px){
  #portfolio .filters{
    grid-template-columns: 1fr !important; /* 1 per row on small phones */
  }
  #portfolio .filters .project-card{
    aspect-ratio: 4 / 3 !important;
  }
}



/* === ChatGPT: Force same hero background on all devices === */
#hero{
  background-image: url('./assets/hero.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}
@media (max-width: 1024px){
  #hero{ background-image: url('./assets/hero.jpg') !important; }
}
@media (max-width: 600px){
  #hero{ background-image: url('./assets/hero.jpg') !important; }
}


/* Projects section styles (appended) */
.section-projects{background:#0f0f11;padding:72px 0}
.section-projects .section-title{color:#fff;text-align:center;margin-bottom:8px}
.section-projects .section-subtitle{color:#cfcfcf;text-align:center;margin-bottom:28px}
.filters{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.filter-btn{border:0;padding:10px 16px;border-radius:999px;background:#232325;color:#e6e6e6;font-weight:500;cursor:pointer;transition:.15s}
.filter-btn:hover{transform:translateY(-1px)}
.filter-btn.active{background:#d4af37;color:#111;box-shadow:0 4px 16px rgba(212,175,55,.35)}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
@media (max-width:1200px){.gallery{grid-template-columns:repeat(8,1fr)}}
@media (max-width:768px){.gallery{grid-template-columns:repeat(4,1fr)}}
.project-card{grid-column:span 4;background:#151517;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.06);transition:.2s}
.project-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.project-figure{aspect-ratio:4/3;overflow:hidden}
.project-figure img{width:100%;height:100%;object-fit:cover;display:block}
.project-meta{padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.project-meta span{color:#e9e9e9;font-weight:600;letter-spacing:.2px}



/* Projects section final style update */
.project-card {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.project-figure {
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 2px solid #d4af37; /* gold border */
  border-radius: 8px;
}
.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.project-meta {
  display: none !important; /* hide category names under images */
}



/* === Projects visual refinements (user request) === */
.section-projects .project-card{background:transparent;border:none;box-shadow:none;border-radius:0}
.section-projects .project-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.section-projects .project-figure{aspect-ratio:4/3;overflow:hidden;border:2px solid #d4af37;border-radius:8px}
.section-projects .project-meta{display:none}

#projects {
    scroll-margin-top: 80px;
}
/* adjust if your header height differs */
/* Mobile nav: allow horizontal scroll (no HTML changes) */
@media (max-width: 900px) {
    /* keep brand from shrinking */
    .navbar .brand, header .brand, nav .brand {
        flex: 0 0 auto;
    }

    /* make the links row scrollable */
    nav ul,
    nav .menu,
    .navbar nav ul,
    .navbar .menu,
    header nav ul {
        display: flex;
        gap: 16px;
        overflow-x: auto; /* swipe left/right */
        white-space: nowrap; /* keep items on one line */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

        /* hide scrollbars */
        nav ul::-webkit-scrollbar,
        nav .menu::-webkit-scrollbar,
        .navbar nav ul::-webkit-scrollbar,
        .navbar .menu::-webkit-scrollbar,
        header nav ul::-webkit-scrollbar {
            display: none;
        }

    nav ul, nav .menu, .navbar nav ul, .navbar .menu, header nav ul {
        scrollbar-width: none;
    }

    /* tighten spacing a bit */
    nav a, .navbar a, header nav a {
        padding: 8px 10px;
        font-size: 15px;
    }
}