/* ───────────────────────────  index.css  ───────────────────────────
   Home‑page styling for ABIK Engineering Construction Limited
   • Light background, dark header (from header.css)
   • Gold accent #d4af37
   • Mobile‑first with two breakpoints (≥768 & ≥992 px)
   • Scroll‑reveal animations triggered by .visible
   ------------------------------------------------------------------ */

/* 0. Palette & sizing ------------------------------------------------ */
:root{
    --gold:        #d4af37;
    --gold-dark:   #b88700;
    --black:       #000;
    --text:        #111;
    --muted:       #6f6f6f;
    --bg:          #fff;
    --card-bg:     #fafafa;
    --shadow:      0 8px 20px rgba(0,0,0,.06);
    --container:   1200px;
}

body{background:var(--bg);color:var(--text);font-family:'Poppins',sans-serif;line-height:1.6;margin:0;}

img{max-width:100%;height:auto;display:block;}

.container{max-width:var(--container);margin:auto;padding:0 1rem;}

/* 1. Utilities ------------------------------------------------------- */
.section-pad{padding:4rem 1rem;}
.section-title{font-size:clamp(2rem,5vw,2.8rem);text-align:center;margin-bottom:2.5rem;color:var(--text);}

.btn{display:inline-block;padding:.95rem 2.5rem;border-radius:50px;background:var(--gold);
     color:var(--black);font-weight:600;text-decoration:none;transition:.3s;}
.btn:hover{background:var(--gold-dark);transform:translateY(-3px);}
.btn-outline{background:transparent;color:var(--gold);border:2px solid var(--gold);}
.btn-outline:hover{background:var(--gold);color:var(--black);}

.link-arrow{color:var(--gold-dark);text-decoration:none;font-weight:500;}
.link-arrow:hover{text-decoration:underline;}

/* 2. Scroll‑reveal animations --------------------------------------- */
/* Elements are visible; .visible triggers animation */
.reveal{--delay:0s;}
.reveal[class*="delay-"]{--delay:calc(.15s*var(--step,0));}
.delay-1{--step:1;}.delay-2{--step:2;}.delay-3{--step:3;}
.delay-4{--step:4;}.delay-5{--step:5;}
/* fade-up */
.reveal.fade-up.visible{animation:fadeUp .7s ease-out var(--delay) both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
/* fade-right / left */
.reveal.fade-right.visible{animation:fadeRight .7s ease-out var(--delay) both;}
@keyframes fadeRight{from{opacity:0;transform:translateX(-25px);}to{opacity:1;transform:none;}}
.reveal.fade-left.visible{animation:fadeLeft .7s ease-out var(--delay) both;}
@keyframes fadeLeft{from{opacity:0;transform:translateX(25px);}to{opacity:1;transform:none;}}
/* zoom‑in */
.reveal.zoom-in.visible{animation:zoomIn .55s ease-out var(--delay) both;}
@keyframes zoomIn{from{opacity:0;transform:scale(.85);}to{opacity:1;transform:scale(1);}}

/* Reduce‑motion respect */
@media(prefers-reduced-motion:reduce){.reveal.visible{animation:none!important;}}

/* ───────────  HERO : fixed-band, image always covers  ─────────── */
.hero {
  position: relative;
  overflow: hidden;
  /* Height never exceeds 550px, never drops below 300px */
  height: clamp(550px, 50vh, 650px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero picture,
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill the band without distortion */
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}

.hero-overlay h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.15;
  margin-bottom: 1.2rem;
  color: var(--gold);
}

.hero-overlay h1 span {
  color: var(--gold-dark);
}

.hero-overlay p {
  max-width: 700px;
  font-size: 1.1rem;
  margin-bottom: 2.2rem;
  color: #eee;
}

/* Fine-tune very wide / very narrow screens */
@media (min-width: 1400px) {
  .hero { height: 500px; }
}
@media (max-width: 768px) {
  .hero { height: clamp(500px, 50vh, 500px); }
  .hero-overlay h1 { font-size: clamp(2rem, 8vw, 3rem); }
}
@media (max-width: 480px) {
  .hero { height: clamp(500px, 50vh, 500px); }
  .hero-overlay h1 { font-size: 1.8rem; }
}


/* Animated gold shimmer inside the dark overlay */
.hero-overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;
    justify-content:center;align-items:center;text-align:center;
    padding:0 1rem;background:rgba(0,0,0,.55);
    background-image:linear-gradient(
        135deg,
        rgba(212,175,55,.12) 0%,
        rgba(212,175,55,0)   55%
    );
    animation:gradientShift 12s linear infinite;
}
@keyframes gradientShift{
    0%{background-position:0 0;}
    100%{background-position:400% 0;}
}

/* Scroll cue arrow */
.scroll-cue{
    margin-top:2.4rem;font-size:2rem;color:#fff;
    text-decoration:none;display:inline-block;
    animation:bounce 2s infinite;
}
@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0);}
    40%{transform:translateY(-6px);}
    60%{transform:translateY(-3px);}
}

/* Optional: lighter arrow on very small screens */
@media(max-width:480px){
    .scroll-cue{font-size:1.6rem;}
}


/* 4. ABOUT ----------------------------------------------------------- */
.about .container{display:grid;gap:3rem;grid-template-columns:1fr;}
.about .text p{margin-bottom:1.3rem;}
.core-values{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0 1.5rem;padding:0;list-style:none;}
.core-values li{background:var(--card-bg);padding:.4rem .9rem;border-radius:30px;font-size:.9rem;font-weight:500;}
.vision-mission article{background:var(--card-bg);padding:1.8rem;border-radius:12px;box-shadow:var(--shadow);margin-bottom:1.5rem;}
.vision-mission h3{color:var(--gold);margin-bottom:.6rem;font-size:1.2rem;}

@media(min-width:768px){
    .about .container{grid-template-columns:1fr 1fr;align-items:center;}
}

/* 5. SERVICES -------------------------------------------------------- */
.services .grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.services .card{background:var(--card-bg);border-radius:12px;padding:2rem 1.5rem;text-align:center;
                box-shadow:var(--shadow);transition:.25s;}
.services .card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.08);}
.services .card img{width:56px;height:56px;margin-bottom:1rem;}
.services .card h3{font-size:1.15rem;color:var(--text);}

/* 6. WHY CHOOSE US --------------------------------------------------- */
.why-choose .grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.reason{display:flex;align-items:flex-start;gap:.8rem;}
.reason .tick{font-size:1.4rem;color:var(--gold);}
.reason p{margin:0;font-weight:500;}

/* 7. PROJECTS -------------------------------------------------------- */
.project-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.proj-card{position:relative;overflow:hidden;border-radius:8px;display:block;}
.proj-card img{width:100%;height:240px;object-fit:cover;transition:transform .4s;}
.proj-card:hover img{transform:scale(1.08);}
.proj-card .caption{
    position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.65);
    padding:.9rem 1rem;color:#fff;
}
.proj-card h3{font-size:1.05rem;margin-bottom:.12rem;color:var(--gold);}
.proj-card span{font-size:.85rem;}

/* 8. CTA ------------------------------------------------------------- */
.cta{background:url('/images/cta-bg.jpg') center/cover fixed;}
.cta .container{
    text-align:center;color:#fff;padding:5rem 1rem;
    backdrop-filter:brightness(.3);
}
.cta h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem;color:var(--gold-light);}
.cta p{max-width:620px;margin:0 auto 2rem;font-size:1.05rem;}

/* 9. Small‑screen tweaks -------------------------------------------- */
@media(max-width:576px){
    .section-pad{padding:3rem 1rem;}
}