/******************************************************************
  AQILA — Modern Design System
  Loaded after style.css / bootstrap / owl / slick — overrides look
  only. Structural/JS-coupled classes (.set-bg, .hero__slider,
  #snh-1, .slider__progress, .project__slider, .testimonial__carousel,
  .testimonial__client, .mobile-menu, #mobile-menu-wrap,
  .offcanvas-menu-wrapper, .canvas__open) are preserved untouched.
******************************************************************/

:root {
  /* Gold / Bronze — primary brand */
  --color-gold-900: #7A5C22;
  --color-gold-700: #A67C3D;
  --color-gold-500: #C9A24B;
  --color-gold-300: #E3C588;
  --color-gold-100: #FBF3E3;

  /* Deep purple — secondary / accent */
  --color-purple-900: #241333;
  --color-purple-700: #4B2179;
  --color-purple-500: #6B3FA0;
  --color-purple-100: #F1EAFB;

  /* Neutrals */
  --color-ink: #14101B;
  --color-text: #201C1F;
  --color-text-muted: #5C5660;
  --color-text-inverse: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-soft: #FAF8F4;
  --color-bg-muted: #F2EEE6;
  --color-border: #E6E1D6;

  /* Typography */
  --font-display: 'Fraunces', serif;
  --font-body: 'Poppins', sans-serif;
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --fs-h3: 1.75rem;
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-eyebrow: 0.8125rem;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Radius / shadow */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(20,16,27,.06);
  --shadow-md: 0 8px 24px rgba(20,16,27,.10);
  --shadow-lg: 0 20px 48px rgba(20,16,27,.18);
  --shadow-gold-glow: 0 12px 32px rgba(201,162,75,.35);
}

/* ---------------- Base ---------------- */

body {
  font-family: var(--font-body);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { font-family: var(--font-body); color: var(--color-text-muted); line-height: 1.75; }

a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }

::selection { background: var(--color-gold-300); color: var(--color-ink); }

/* ---------------- Section title ---------------- */

.section-title span {
  color: var(--color-gold-700);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.section-title h2 {
  margin-top: var(--space-2);
  font-family: var(--font-display);
}

/* ---------------- Buttons ---------------- */

.primary-btn,
.site-btn,
.more_btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  transition: all .25s ease;
}

.primary-btn {
  background: linear-gradient(135deg, var(--color-gold-500), var(--color-gold-700));
  color: var(--color-ink) !important;
  border: none;
  box-shadow: var(--shadow-sm);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-glow);
  color: var(--color-ink) !important;
}

.more_btn {
  background: transparent;
  color: var(--color-text-inverse) !important;
  border: 1.5px solid rgba(255,255,255,.5);
}

.more_btn:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff !important;
}

.site-btn {
  background: var(--color-purple-700);
  color: #fff !important;
  border: none;
}

.site-btn:hover {
  background: var(--color-purple-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-gold-500);
  color: var(--color-gold-700) !important;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  transition: all .25s ease;
}

.btn-ghost:hover {
  background: var(--color-gold-500);
  color: var(--color-ink) !important;
}

/* ---------------- Header ---------------- */

.header {
  background: transparent;
  position: absolute;
  width: 100%;
  z-index: 30;
  padding: var(--space-4) 0;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}

.header--scrolled {
  position: fixed;
  top: 0;
  background: rgba(20,16,27,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) 0;
}

.header__logo img { max-height: 44px; }

.header__menu ul li a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  color: #fff;
}

.header__menu ul li a:after { background: var(--color-gold-500); }
.header__menu ul li.active a, .header__menu ul li:hover a { color: var(--color-gold-300); }

.header__menu ul li .dropdown {
  background: var(--color-ink);
  border-top: 2px solid var(--color-gold-500);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.header__menu ul li .dropdown li a { color: rgba(255,255,255,.8); }
.header__menu ul li .dropdown li a:hover { color: var(--color-gold-300); }

.header__widget span { color: rgba(255,255,255,.7); }
.header__widget h4 { color: #fff; font-family: var(--font-body); font-weight: 700; }

.canvas__open i { color: #fff; }

/* Body padding so fixed/absolute header doesn't overlap non-hero pages */
body:not(.has-hero) { padding-top: 0; }

/* ---------------- Offcanvas mobile menu ---------------- */

.offcanvas-menu-wrapper {
  background: var(--color-ink);
}

.offcanvas__widget span { color: rgba(255,255,255,.6); }
.offcanvas__widget h4 { color: var(--color-gold-300); }

/* ---------------- Hero ---------------- */

.hero__items {
  position: relative;
}

.hero__items:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,27,.55) 0%, rgba(20,16,27,.75) 55%, rgba(20,16,27,.92) 100%);
  z-index: 1;
}

.hero__text { position: relative; z-index: 2; }

.hero__text span {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--color-gold-300);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.hero__text h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
}

/* The base template absolutely-positions .more_btn (it was originally a
   small "Discover more" text link, not a full button) and floats
   .hero__social independently — both escape normal flow and overlap
   .primary-btn now that .more_btn is a real CTA button. Reset them into
   a clean, centered button row instead. */
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__text .hero__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.hero__text .primary-btn,
.hero__text .more_btn {
  position: static;
  top: auto;
  left: auto;
  bottom: auto;
  margin: 0;
  opacity: 1;
}

/* ---------------- Breadcrumb / page header ---------------- */

.breadcrumb-option {
  position: relative;
}

.breadcrumb-option:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,27,.55) 0%, rgba(20,16,27,.85) 100%);
}

.breadcrumb__text, .breadcrumb__links { position: relative; z-index: 2; }

.breadcrumb__text h2 {
  color: #fff;
  font-family: var(--font-display);
}

.breadcrumb__links a, .breadcrumb__links span { color: rgba(255,255,255,.75); }
.breadcrumb__links span { color: var(--color-gold-300); }

/* ---------------- Cards (services, projects, stats, gallery) ---------------- */

.services__item,
.about-page__mission,
.product__details__widget {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.services__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold-300);
}

/* The source icon PNGs are tiny (62x62) line-art on transparent backgrounds.
   Flexbox's default align-items:stretch (from the column layout above)
   was stretching them to the full card width, blowing them up into a
   blurry mess. Pin them to a small fixed size in a soft gold badge
   instead — reads as an icon, not a giant pixelated graphic. */
.services__item img {
  align-self: flex-start;
  width: 26px;
  height: 26px;
  object-fit: contain;
  padding: 13px;
  box-sizing: content-box;
  background: var(--color-gold-100);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  transition: background-color .25s ease;
}

.services__item:hover img {
  background: var(--color-gold-300);
}

.services__item h4 {
  font-size: 1.05rem;
  letter-spacing: .01em;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.card-modern {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Bootstrap's .row stretches columns to equal height by default, but the
   card inside each column only takes its own content height unless told
   to fill it — without this, cards with shorter copy end up visibly
   shorter than their row-mates. Make every card-style element fill its
   column and let the row of same-type siblings line up evenly.
   The row-to-row gutter has to move onto the column itself: once the
   card fills 100% of the column, a margin-bottom on the card sits
   *inside* the stretched box instead of creating visible space below it. */
.row > [class*="col-"] > .services__item,
.row > [class*="col-"] > .card-modern,
.row > [class*="col-"] > .cta-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.row > [class*="col-"]:has(> .services__item),
.row > [class*="col-"]:has(> .card-modern),
.row > [class*="col-"]:has(> .cta-card) {
  margin-bottom: var(--space-6);
}

.services__item p:last-of-type,
.services__item ul {
  margin-top: auto;
}

.card-modern > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-modern:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-gold-100);
  color: var(--color-gold-900);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Gallery grid (service-detail image sets) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.gallery-grid a {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.gallery-grid a:hover img { transform: scale(1.08); }

@media (max-width: 767px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- Counter / stats ---------------- */

.counter__item h2, .counter__item .count {
  font-family: var(--font-display);
  color: var(--color-gold-700);
}

.counter__item p { color: var(--color-text-muted); font-weight: 600; }

/* ---------------- Testimonial ---------------- */

.testimonial__text {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.testimonial__text p { color: var(--color-text); font-family: var(--font-display); font-size: 1.15rem; }
.testimonial__text h5 { color: var(--color-gold-700); }

/* ---------------- CTA banner ---------------- */

.callto {
  position: relative;
}

.callto:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--color-ink) 0%, var(--color-purple-900) 100%);
  opacity: .92;
}

.callto__text, .callto__widget { position: relative; z-index: 2; }
.callto__text h2 { color: #fff; font-family: var(--font-display); }
.callto__text span { color: var(--color-gold-300); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-eyebrow); }

/* CTA contact cards (WhatsApp / phone / email) */
.cta-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.cta-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cta-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-gold-300); }

.cta-card__icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-gold-100);
  color: var(--color-gold-700);
  font-size: 22px;
}

.cta-card h4 { margin: 0; }
.cta-card p { margin: 0; }

@media (max-width: 767px) {
  .cta-card-grid { grid-template-columns: 1fr; }
}

/* ---------------- Footer ---------------- */

.footer {
  position: relative;
  background: var(--color-ink);
}

.footer:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20,16,27,.9);
}

.footer__top, .footer__widget, .copyright { position: relative; z-index: 2; }

.footer__widget h6 { color: var(--color-gold-300); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.footer__widget ul li a, .footer__widget p, .footer__widget span { color: rgba(255,255,255,.65); }
.footer__widget ul li a:hover { color: var(--color-gold-300); }

.footer__social a {
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.footer__social a:hover { background: var(--color-gold-500); border-color: var(--color-gold-500); color: var(--color-ink); }

.copyright { border-top: 1px solid rgba(255,255,255,.1); }
.copyright p, .copyright a { color: rgba(255,255,255,.55); }
.copyright a:hover { color: var(--color-gold-300); }

/* ---------------- WhatsApp floating button ---------------- */

.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 40;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform .25s ease;
}

.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------------- Scroll reveal ---------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}