/* File: public_html/assets/css/style.css
   ✅ BRAND UPDATED to match your HEADER + FOOTER (solid logo colours, no mixing)
   Palette:
   - Blue: #0A4E82
   - Navy: #063A5F
   - Gold: #C18A2D
*/

:root{
  /* ✅ Logo colours (match header/footer) */
  --logo-blue:#0A4E82;   /* main blue */
  --logo-navy:#063A5F;   /* deep navy */
  --logo-gold:#C18A2D;   /* gold accent */

  /* UI neutrals */
  --bg:#F5F7FF;
  --surface:#FFFFFF;
  --text:#0f172a;
  --muted:#64748b;

  /* effects */
  --border: rgba(2,6,23,.10);
  --shadow: 0 18px 45px rgba(2,6,23,.06);
  --shadow2: 0 24px 70px rgba(2,6,23,.10);
}

body{ background:var(--bg); color:var(--text); }
.fw-black{ font-weight: 900; }

/* brand dot uses GOLD */
.brand-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--logo-gold);
  display:inline-block;
}

/* =========================
   BUTTONS
========================= */
.btn-primary{
  background: var(--logo-navy);
  border-color: var(--logo-navy);
}
.btn-primary:hover{
  background: var(--logo-blue);
  border-color: var(--logo-blue);
}

/* Gold button helper (used in header/footer Apply Online) */
.btn-gold,
.btn-apply{
  background: var(--logo-gold);
  border-color: var(--logo-gold);
  color:#1b1b1b;
  font-weight:800;
}
.btn-gold:hover,
.btn-apply:hover{
  filter: brightness(.95);
  color:#1b1b1b;
}

/* outline on dark backgrounds */
.btn-outline-light{
  border-color: rgba(255,255,255,.45);
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.55);
}

/* =========================
   HERO SLIDESHOW (SOLID LAYERS, NO MIXING)
   - Use solid navy overlay + separate gold band
========================= */
.hero-slideshow{ background: var(--surface); }

.hero-banner{
  position:relative;
  min-height: 440px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* ✅ optional gold band at top of hero */
.hero-band-top{
  position:absolute;
  left:0; right:0; top:0;
  height:6px;
  background: var(--logo-gold);
  z-index:2;
}

.hero-banner-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ solid navy overlay (no gradients) */
.hero-banner-overlay{
  position:absolute;
  inset:0;
  background: rgba(6,58,95,.82); /* navy */
}

/* ✅ separate thin gold band near bottom (optional) */
.hero-band-bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  height:4px;
  background: var(--logo-gold);
  z-index:2;
}

.hero-banner-content{
  position:relative;
  z-index:3;
  padding-top: 84px;
  padding-bottom: 84px;
}

.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:900;
  font-size:13px;
  margin-bottom: 14px;
}

.hero-title{
  color:#fff;
  font-weight: 900;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  margin-bottom: 14px;
}

.hero-sub{
  color: rgba(255,255,255,.86);
  font-size: 18px;
  max-width: 760px;
  margin-bottom: 22px;
}

.hero-slideshow .carousel-indicators [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.hero-slideshow .carousel-control-prev,
.hero-slideshow .carousel-control-next{
  width: 60px;
}

@media (max-width: 768px){
  .hero-banner{ min-height: 360px; }
  .hero-banner-content{ padding-top: 64px; padding-bottom: 64px; }
}

/* =========================
   STATS / SMALL CARDS
========================= */
.stat-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}
.stat-n{ font-weight:900; font-size:20px; color: var(--logo-navy); }
.stat-l{ color:var(--muted); font-size:12px; }

/* =========================
   GALLERY
========================= */
.gallery-tile{
  background: var(--surface);
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
}
.gallery-tile img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}

/* =========================
   WHATSAPP FLOAT
========================= */
.wa-float{
  position:fixed;
  right:16px;
  bottom:16px;
  width:52px;height:52px;
  border-radius:16px;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  box-shadow: 0 10px 25px rgba(2,6,23,.22);
  z-index:9999;
  text-decoration:none;
}
.wa-float:hover{ filter: brightness(.95); color:#fff; }

/* =========================
   QUICK LINKS TILES
========================= */
.tiles-wrap{ background: transparent; }

.tile-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px 18px;
  box-shadow: var(--shadow);
  text-align:center;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 240px;
}

.tile-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(2,6,23,.10);
}

/* ✅ separate solid gold top line (no gradients) */
.tile-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:4px;
  background: var(--logo-gold);
  opacity:.95;
}

.tile-icon{
  width:62px;
  height:62px;
  border-radius:16px;
  background: rgba(10,78,130,.08); /* logo blue tint */
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 14px auto;
  border: 1px solid rgba(10,78,130,.12);
}

.tile-icon i{
  font-size: 28px;
  color: var(--logo-navy);
}

.tile-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.tile-text{
  color:var(--muted);
  font-size: 14px;
  margin-bottom: 14px;
  min-height: 42px;
}

.tile-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width: 230px;
  padding: 10px 14px;
  border-radius: 12px;

  /* separate solid colours */
  border: 1px solid rgba(193,138,45,.55);     /* gold border */
  background: rgba(193,138,45,.10);           /* gold tint */
  color: var(--logo-navy);
  text-decoration:none;
  font-weight: 900;

  transition: background .18s ease, transform .18s ease, color .18s ease, border-color .18s ease;
}
.tile-btn:hover{
  background: rgba(193,138,45,.16);
  border-color: rgba(193,138,45,.80);
  transform: translateY(-1px);
  color: var(--logo-blue);
}

/* =========================
   REVIEWS
========================= */
.reviews-wrap{
  background: var(--bg);
}

.review-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px 22px 18px 22px;
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction:column;
  min-height: 280px;
  position: relative;
}

/* use gold for stars */
.review-stars i{
  color: var(--logo-gold);
  margin-right: 3px;
  font-size: 16px;
}

.review-footer{
  display:flex;
  gap: 12px;
  align-items:center;
  border-top: 1px solid rgba(2,6,23,.06);
}

.review-avatar{
  width:46px;
  height:46px;
  border-radius: 50%;
  background: rgba(193,138,45,.14); /* gold tint */
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--logo-navy);
  flex: 0 0 46px;
  border: 1px solid rgba(193,138,45,.25);
}
.review-avatar i{ font-size: 22px; }

/* carousel controls */
.carousel-control-prev,
.carousel-control-next{
  width: 48px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: invert(25%);
}

@media (min-width: 992px){
  .carousel-control-prev{ left: -70px; }
  .carousel-control-next{ right: -70px; }
}

/* =========================
   OPTIONAL: HEADER/FOOTER HELPERS
   (if you want consistent classes available site-wide)
========================= */
.ec-head-band-top{ height:6px; background: var(--logo-gold); }
.ec-topbar{ background: var(--logo-blue); color:#fff; }
.ec-nav-border{ border-bottom:4px solid var(--logo-gold); }

.ec-footer{ background: var(--logo-blue); color:#fff; }
.ec-footer-bottom{ background: var(--logo-navy); color: rgba(255,255,255,.88); }