/* =========================
   Modern Professional CSS
   Replace your /public/css/style.css with this
   ========================= */

/* -------------------------
   COLOR PALETTES (choose one)
   -------------------------
   Uncomment one palette block you prefer and comment others.
*/

/* ===== Default: Teal - Coral (modern, warm+trust) ===== */
:root{
  --primary-900: #06324a;   /* deep teal */
  --primary-700: #0b6b79;
  --accent-500: #ff6b4a;    /* coral accent */
  --accent-300: #ff8b6a;
  --muted-600: #6c757d;
  --bg: #f4f8fb;
  --glass: rgba(255,255,255,0.78);
  --shadow-1: 0 8px 30px rgba(6,50,74,0.06);
  --shadow-2: 0 20px 70px rgba(6,50,74,0.08);
  --radius-lg: 14px;
  --gov-orange: linear-gradient(90deg,#ff9f66,#ff6b4a);
  --gov-white: linear-gradient(90deg,#ffffff,#f9fafb);
  --gov-green: linear-gradient(90deg,#14a34a,#0f8a3b);
  --gov-top-text: #ffffff; /* top contact white text */
}

/* ===== Alt palette 1: Indigo - Gold =====
:root{
  --primary-900:#08123a;
  --primary-700:#23327b;
  --accent-500:#f6b042;
  --accent-300:#ffd078;
  --muted-600:#6b7280;
  --bg:#f6f7fb;
  --glass:rgba(255,255,255,0.82);
  --shadow-1:0 8px 30px rgba(35,50,120,0.06);
  --shadow-2:0 20px 70px rgba(35,50,120,0.08);
  --radius-lg:14px;
  --gov-orange: linear-gradient(90deg,#f6b042,#f59e2b);
  --gov-white: linear-gradient(90deg,#ffffff,#f8f9fb);
  --gov-green: linear-gradient(90deg,#1aa64a,#138808);
  --gov-top-text:#ffffff;
}
*/

/* ===== Alt palette 2: Deep Sea - Mint =====
:root{
  --primary-900:#021b2b;
  --primary-700:#006d6a;
  --accent-500:#00c5a0;
  --accent-300:#6ef0c7;
  --muted-600:#7b8794;
  --bg:#f3fbfb;
  --glass:rgba(255,255,255,0.8);
  --shadow-1:0 8px 30px rgba(2,27,43,0.06);
  --shadow-2:0 20px 70px rgba(2,27,43,0.08);
  --radius-lg:14px;
  --gov-orange: linear-gradient(90deg,#ff9f66,#ff6b4a);
  --gov-white: linear-gradient(90deg,#ffffff,#f9fafb);
  --gov-green: linear-gradient(90deg,#0db36b,#0a9a5a);
  --gov-top-text:#ffffff;
}
*/

:root{
  --text-dark: #081a26;
  --muted: var(--muted-600);
}

/* ---------- Reset & globals ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,#f7f9fc,#eef3fa 60%);
  color: var(--text-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
}

/* container tweak */
.container{max-width:1180px;padding-left:18px;padding-right:18px;margin:0 auto}

/* links & basic */
a{color:var(--primary-700); text-decoration:none; transition:color .22s ease}
a:hover{color:var(--accent-500)}

/* ---------- GOV tri-color top strip (modern) ---------- */
.gov-strip{display:flex;align-items:center;position:relative;overflow:hidden;height:46px}
.gov-strip > div{height:100%}
.gov-orange{flex:0 0 28%; background: var(--gov-orange)}
.gov-white{flex:0 0 44%; background: var(--gov-white)}
.gov-green{flex:0 0 28%; background: var(--gov-green)}
.gov-contact{
  position:absolute; right:18px;
  color: var(--gov-top-text);
  font-weight:700;
  font-size:13px;
  display:flex; align-items:center; gap:18px;
  padding-right:8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
/* contact item style */
.gov-contact .contact-item{display:flex;align-items:center;gap:8px}
.gov-contact .contact-item i{font-size:14px;color:var(--gov-top-text);}

/* make the links in the top strip white, but slightly transparent on hover */
.gov-contact a{ color: var(--gov-top-text); opacity:0.96; font-weight:600; transition:opacity .18s ease }
.gov-contact a:hover{ opacity:0.88; text-decoration:underline }

/* ---------- Mobile topbar (visible on small screens) ---------- */
.topbar-mobile{
  display:none;
  background:linear-gradient(90deg,var(--primary-700),var(--primary-900));
  color: var(--gov-top-text);
  padding:8px 12px;
  font-size:13px;
  text-align:center;
  font-weight:700;
}
.topbar-mobile .mobile-contact{display:flex;gap:14px;justify-content:center;align-items:center}
.topbar-mobile .mobile-contact a{color:var(--gov-top-text);font-weight:700}

/* show mobile topbar on small screens */
@media (max-width: 991px){
  .gov-strip{display:none}
  .topbar-mobile{display:block}
}

/* ---------- Navbar (glass + animated underline) ---------- */
.navbar{
  padding:0.6rem 0;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.82));
  box-shadow: var(--shadow-1);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  z-index: 999;
}
.navbar-brand img{height:46px}
.navbar .nav-link{
  color: #10222a !important;
  padding:0.55rem 0.9rem;
  position:relative;
  font-weight:600;
  letter-spacing:0.05em;
}
.navbar .nav-link::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%) scaleX(0); bottom:-6px; height:3px; width:48%; border-radius:6px;
  background: linear-gradient(90deg,var(--accent-500),var(--accent-300));
  transition: transform .28s cubic-bezier(.2,.9,.3,1);
  transform-origin:center;
}
.navbar .nav-link:hover::after{ transform:translateX(-50%) scaleX(1);}

/* active nav style */
.navbar .nav-link.active{ color:var(--accent-500) !important; }
.navbar .nav-link.active::after{ transform:translateX(-50%) scaleX(1); }

/* CTA in navbar */
.btn-register{
  background: linear-gradient(90deg,var(--accent-500),var(--accent-300));
  color:#fff; border:none; padding:9px 18px; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-register:hover{ transform:translateY(-3px); box-shadow:0 22px 60px rgba(0,0,0,0.08) }

/* ---------- HERO / Carousel ---------- */
.hero-slide{
  height:78vh;
  display:flex;
  align-items:center;
  position:relative;
  background-position:center;
  background-size:cover;
  overflow:hidden;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.hero-slide::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(3,6,15,0.22), rgba(3,6,15,0.45));
  transition:opacity .4s ease;
}
.hero-content{ position:relative; z-index:2; max-width:920px; color: #fff; padding:24px }
.hero-content h1{ font-size:clamp(22px,4.2vw,44px); line-height:1.02; font-weight:800; margin:0 0 10px; text-shadow:0 12px 30px rgba(4,8,20,0.55)}
.hero-content p.lead{ font-size:16px; color:rgba(255,255,255,0.92); margin:0 0 16px }

/* CTA buttons */
.hero-cta{ display:flex; gap:12px; align-items:center; margin-top:12px }
.btn-cta{
  background:linear-gradient(90deg,var(--accent-500),var(--accent-300));
  color:#fff; padding:12px 22px; border-radius:10px; border:none; font-weight:700;
  box-shadow:0 18px 44px rgba(6,50,74,0.06);
  transition:transform .22s ease, box-shadow .22s ease;
}
.btn-ghost{
  background:transparent; border:1px solid rgba(255,255,255,0.18); color:#fff; padding:11px 18px; border-radius:10px;
  transition:all .2s ease;
}

/* subtle decorative shape */
.hero-shape{ position:absolute; right:-40px; bottom:-30px; width:360px; height:360px; filter:blur(40px); opacity:0.08; z-index:1; }

/* wave svg (below hero) */
.hero-wave svg{display:block; height:72px; transform:translateY(2px)}

/* ---------- Sections ---------- */
.section{padding:72px 0}
.section.white{background:#fff; border-radius:18px 18px 0 0; margin-top:-2px; padding-top:48px}
.section .section-title{ font-weight:800; font-size:28px; margin-bottom:14px; color:var(--primary-900) }

/* cards (glass) */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(6,50,74,0.04);
  overflow:hidden;
  transition: transform .32s cubic-bezier(.2,.9,.3,1), box-shadow .32s ease;
}
.card:hover{ transform:translateY(-10px) scale(1.005); box-shadow: 0 30px 90px rgba(6,50,74,0.08); }

/* card images */
.card img{ display:block; width:100%; height:220px; object-fit:cover; }

/* small card body */
.card .card-body{ padding:18px }
.card h5{ margin:0 0 8px; font-weight:700; color:var(--primary-900) }
.card p.small{ margin:0; color:var(--muted) }

/* stats */
.stats .box{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
  padding:20px; border-radius:12px; text-align:center; box-shadow: var(--shadow-1);
}

/* counter style */
.counter{ font-size:34px; font-weight:800; color:var(--primary-700) }

/* gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px }
.gallery-grid img{ width:100%; height:220px; object-fit:cover; border-radius:12px; transition: transform .25s ease, box-shadow .25s ease; }
.gallery-grid a{ display:block; overflow:hidden; border-radius:12px; }
.gallery-grid img:hover{ transform:scale(1.04); box-shadow:0 30px 60px rgba(6,50,74,0.06) }

/* tilt helper class */
.tilt{ transform-style:preserve-3d }

/* small text muted */
.text-muted{ color:var(--muted) }

/* footer */
footer{ padding:48px 0 72px; border-top:1px solid rgba(6,50,74,0.04); background:linear-gradient(180deg,#fbfdff,#f7fbff) }
footer h5{ color:var(--primary-900) }

/* back to top */
#backToTop{ position:fixed; right:18px; bottom:18px; background:var(--primary-700); border:none; color:#fff; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 40px rgba(6,50,74,0.12); opacity:0; transform:translateY(16px); transition:all .32s ease; z-index:9999 }
#backToTop.show{ opacity:1; transform:translateY(0) }

/* responsive tweaks for mobile (improved tap target & icons) */
@media (max-width: 991px){
  .hero-slide{height:60vh}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gov-contact{display:none}
  .topbar-mobile{display:flex}
  .card img{height:160px}
  .navbar .nav-link{ font-size:15px; padding:0.45rem 0.6rem }
  .btn-register{ padding:8px 14px; font-size:14px }
}

@media (max-width:575px){
  .hero-content h1{ font-size:20px }
  .gallery-grid{grid-template-columns:1fr}
  .hero-slide{height:48vh}
  .card img{height:140px}
  .nav-link{ padding:0.45rem 0.5rem }
  .gov-strip{display:none}
  .topbar-mobile .mobile-contact{flex-direction:column; gap:6px}
  .gov-contact{right:8px; gap:8px}
  .gov-contact .contact-item{font-size:12px}
}

/* small utilities */
.text-primary-strong{ color:var(--primary-700); font-weight:800 }
.muted { color:var(--muted) }
.small { font-size:13px; color:var(--muted) }

/* accessibility focus outlines */
a:focus, button:focus, .nav-link:focus{ outline:3px solid rgba(6,50,74,0.08); outline-offset:3px; border-radius:6px; }

/* fallback micro-animation */
.fade-up { opacity:0; transform:translateY(12px); transition: opacity .6s ease, transform .6s ease }
.fade-up.visible{ opacity:1; transform:translateY(0) }
/* ---------- Slide info bar ---------- */
.slide-info-bar{
  background: #fff;
  border-radius: 10px;
  padding:10px 16px;
  position:relative;
  transform: translateY(-22px);
  margin: 0 auto;
  max-width:1140px;
  z-index: 50;
  box-shadow: 0 12px 38px rgba(6,50,74,0.06);
}
.slide-info-bar .small { color: #6b7280 }

/* FAB WhatsApp */
.fab-whatsapp{
  position:fixed; right:18px; bottom:84px; width:56px; height:56px; border-radius:12px;
  background: linear-gradient(90deg,#25D366,#1DA851);
  display:flex; align-items:center; justify-content:center; color:#fff; z-index:9999;
  box-shadow: 0 18px 50px rgba(37,211,102,0.12); transition: transform .18s ease, box-shadow .18s ease;
}
.fab-whatsapp:hover{ transform: translateY(-6px); box-shadow: 0 26px 70px rgba(37,211,102,0.18) }
.fab-whatsapp i{ font-size:20px }

/* Testimonials small */
#testimonials .carousel-item{ padding:18px 24px }
#testimonials .carousel-item img{ border: 2px solid rgba(6,50,74,0.04); }

/* Newsletter CTA variant background */
.bg-primary-variant{
  background: linear-gradient(90deg, rgba(11,61,145,0.95), rgba(13,92,169,0.95));
  border-radius:12px;
}

/* Accessibility for forms */
form input, form textarea { box-shadow: none; border-radius:8px; border:1px solid rgba(6,50,74,0.06); }
form input:focus, form textarea:focus { outline: none; box-shadow: 0 8px 30px rgba(11,61,145,0.06); border-color: rgba(11,61,145,0.18); }

/* small responsive tweak: slide-info-bar */
@media (max-width:991px){
  .slide-info-bar{ transform:none; margin:12px; }
  .fab-whatsapp{ right:12px; bottom:90px }
}