/* === Palette === */
:root{
  --light:#FEF3E2;
  --amber:#FAB12F;
  --orange:#FA812F;
  --red:#DD0303;
  --white:#FFFFFF;
  --ink:#111111;
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,Arial,sans-serif;
  color:var(--ink);
  background:var(--light);
}

/* Utilities */
.container{width:min(1200px,92%);margin-inline:auto}
.center{text-align:center}

/* NAVBAR */
.site-header{position:sticky;top:0;z-index:100;background:rgba(240, 150, 15, 0.85);backdrop-filter:blur(6px)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;position:relative}
.brand{color:var(--white);font-weight:800;font-size:1.4rem;letter-spacing:.5px}
.nav__links{list-style:none;display:flex;gap:22px}
.nav__links a{color:var(--white);text-decoration:none;font-weight:600;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--amber);transition:width .25s}
.nav__links a:hover::after{width:100%}
.nav__toggle{display:none;font-size:1.6rem;color:var(--white);background:none;border:0;cursor:pointer}


/* === FINAL MOBILE MENU (compact, dark blue + gold) === */
@media (max-width: 850px) {
  :root {
    --menu-bg: #001833;    /* panel background */
    --menu-text: #FAB12F;  /* link color */
    --menu-hover: #FA812F; /* hover accent */
  }

  .nav__toggle {
    display: block;
    z-index: 1003;   /* always above overlay/panel */
    position: relative;
  }

  /* Dim overlay behind the menu panel (below the panel) */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1001;
  }

  /* Compact slide-in panel (top-right) */
  .nav__links {
    position: fixed;
    top: 60px;           /* slightly below sticky header */
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: var(--menu-bg);
    color: var(--menu-text);
    padding: 18px 22px;
    border-radius: 12px;
    width: max-content;
    max-width: 240px;

    /* start off-screen to the right */
    transform: translateX(140%);
    opacity: 0;
    pointer-events: none;

    transition: transform .32s ease, opacity .32s ease;
    z-index: 1002;       /* above overlay, below toggle */
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
  }

  .nav__links.show {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto; /* clickable only when visible */
  }

  .nav__links a {
    color: var(--menu-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15rem;
    position: relative;
    transition: color .2s ease;
  }

  /* subtle glowing underline on hover */
  .nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 0;
    background: var(--menu-hover);
    box-shadow: 0 0 8px var(--menu-hover);
    transition: width .25s ease;
  }
  .nav__links a:hover { color: var(--menu-hover); }
  .nav__links a:hover::after { width: 100%; }
}



/* HERO */
.hero{position:relative;min-height:80vh;display:grid;place-items:center;overflow:hidden;color:var(--white)}

.hero {
  position: relative;
  height: 80vh;
  display: grid;
  place-items: center;
  color: var(--white);
  text-align: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* darken for readability */
}

.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55))}
.hero__content{position:relative;text-align:center;z-index:1}
.hero__title{font-size:clamp(2rem,4vw+1rem,3.2rem);font-weight:800}
.hero__subtitle{margin:.6rem 0 1.2rem;font-size:1.1rem}
.btn{display:inline-block;padding:12px 24px;border-radius:10px;font-weight:700;text-decoration:none}
.btn--primary{background:linear-gradient(45deg,var(--red),var(--orange),var(--amber));color:var(--white);box-shadow:0 8px 22px rgba(0,0,0,0.35)}

/* Sections */
.section{padding:80px 0}
.section--alt{background:linear-gradient(180deg,#fff4e6, #ffe8c7)}
.section__title{font-weight:800;color:var(--orange);margin:0 0 10px}
.section__text{color:#333;line-height:1.7;margin:0 0 18px}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* Bullets */
.bullets{list-style:none;margin-top:10px}
.bullets li{margin:8px 0;display:flex;gap:8px;align-items:center}
.bullets i{color:var(--red)}

/* Cards / Glass */
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:22px;box-shadow:0 10px 26px rgba(0,0,0,.08)}
.glass{background:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.card__title{margin:.2rem 0 6px;color:#111;font-weight:800}
.card__text{color:#333}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.stat{background:#fff;border:1px solid rgba(0,0,0,.06);padding:12px 16px;border-radius:12px;text-align:center;min-width:110px}
.stat span{display:block;font-size:1.3rem;font-weight:800;color:#111}

/* ===== SERVICE CARDS ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 20px;
  margin-top: 20px;
}

.card {
  background: var(--white);
  border-radius: 16px;
  padding: 28px 20px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.35s ease;
  transform: translateY(0) scale(1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}


/* cards icons styling */
.card i {
  font-size: 2.2rem;
  color: var(--red);
  margin-bottom: 20px;
  margin-right: 150px;
  transition: transform 0.35s ease, color 0.35s ease;
}

.card h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--dark);
  transition: transform 0.35s ease, color 0.35s ease;
}

.card p {
  color: #333;
  font-size: 1rem;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Hover interaction */
.card:hover {
  transform: translateY(-8px) scale(1.25);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
}


.card:hover i {
  transform: scale(1.2);
  color: var(--orange);
}

.card:hover h3 {
  transform: scale(1.1);
  color: var(--amber);
}

.card:hover p {
  transform: scale(1.02);
  opacity: 0.9;
}

/* Contact */
.contact-section{
  background:linear-gradient(135deg,#fff8ee,#ffe0b5);
  padding:90px 0; position:relative; overflow:hidden;
}
.contact-container{width:min(1200px,92%);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media (max-width:900px){.contact-container{grid-template-columns:1fr}}
.contact-info .section__title{color:var(--orange)}
.contact-info p i{color:var(--red);margin-right:8px}
.contact-form-card{
  background:#ffffffc7;border:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 14px 34px rgba(0,0,0,.12);padding:28px
}
.contact-form-card h3{color:var(--orange);text-align:center;margin:8px 0 18px}

.modern-form input,.modern-form textarea{
  width:100%;margin-bottom:14px;padding:14px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#fff;color:#111;transition:border .18s, box-shadow .18s
}
.modern-form input::placeholder,.modern-form textarea::placeholder{color:#777}
.modern-form input:focus,.modern-form textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(250,177,47,.25)
}
.modern-form button{
  width:100%;padding:14px;border:none;border-radius:12px;cursor:pointer;
  color:#fff;font-weight:800;text-transform:uppercase;
  background:linear-gradient(45deg,var(--red),var(--orange),var(--amber));
  box-shadow:0 12px 28px rgba(0,0,0,.18);transition:transform .18s, box-shadow .18s
}
.modern-form button:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(0,0,0,.22)}

/* Footer */
.footer{background:#111;color:#ddd;padding:20px 0}
.footer__inner{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.footer__brand{font-weight:800;color:#fff}
.footer__links{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.95rem;margin:6px 0}
.footer__links a{color:var(--amber);text-decoration:none;font-weight:600}
.footer__links a:hover{color:var(--red)}
.footer__links span{color:#666;user-select:none}
.footer__copy{font-size:.95rem;color:#ccc}

/* Reveal animation */
/* Default: visible (in case JS fails) */
.reveal { opacity: 1; transform: none; }

/* Only animate when JS is running */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }