/* =========================================================
   Global Theme Variables (brand-safe)
   ========================================================= */
:root{
  --brand-primary:#003366;
  --brand-primary-600:#004d99;
  --brand-accent:#ff8c00;

  --text-body:#333;
  --bg-body:#f8f9fa;

  --radius:16px;
  --shadow:0 10px 22px rgba(2,32,71,.08);
  --shadow-lg:0 16px 36px rgba(2,32,71,.14);

  /* Ticker defaults (PHP inline can override) */
  --ticker-height:40px;
  --ticker-speed:20s; /* lower = faster */
}

/* Optional auto dark-mode */
@media (prefers-color-scheme: dark){
  :root{
    --text-body:#e5e7eb;
    --bg-body:#0f172a;
    --shadow:0 10px 22px rgba(0,0,0,.35);
    --shadow-lg:0 16px 36px rgba(0,0,0,.5);
    --brand-primary:#0ea5e9;
    --brand-primary-600:#38bdf8;
    --brand-accent:#f59e0b;
  }
}

/* =========================================================
   Base
   ========================================================= */
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  background-color:var(--bg-body);
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}

/* Small utilities used in templates */
.object-fit-cover{object-fit:cover}
.rounded-3{border-radius:1rem!important}

/* Bootstrap color overrides (non-breaking) */
.text-primary{color:var(--brand-primary)!important}
.bg-primary{background-color:var(--brand-primary)!important}
.text-warning{color:var(--brand-accent)!important}

/* Buttons */
.btn{border-radius:12px}
.btn-primary{
  background-color:var(--brand-primary);
  border-color:var(--brand-primary);
  transition:transform .25s,box-shadow .25s,filter .25s;
}
.btn-primary:hover{
  background-color:var(--brand-primary-600);
  border-color:var(--brand-primary-600);
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(11,79,153,.18);
}
.btn-warning{
  background-color:var(--brand-accent);
  border-color:var(--brand-accent);
  color:#fff;
  transition:transform .25s,box-shadow .25s,filter .25s;
}
.btn-warning:hover{filter:brightness(1.05);transform:translateY(-1px)}

/* Links */
a{color:var(--brand-primary)}
a:hover{color:var(--brand-primary-600)}

/* =========================================================
   Navbar
   ========================================================= */
.navbar{
  background:linear-gradient(90deg,var(--brand-primary),#1f3f75)!important;
  box-shadow:var(--shadow);
}
.navbar .navbar-brand{font-weight:700;letter-spacing:.2px}
.navbar .nav-link{font-weight:600;letter-spacing:.2px;opacity:.95}
.navbar .nav-link.active{opacity:1}
.offcanvas-end{width:260px!important}

/* =========================================================
   Hero / Page headers
   ========================================================= */
.hero-section{
  background:
    linear-gradient(rgba(0,51,102,.70),rgba(0,51,102,.70)),
    url('https://images.unsplash.com/photo-1574026343414-25785a21e06d?q=80&w=2070&auto=format&fit=crop')
    center/cover no-repeat;
  min-height:70vh;display:flex;flex-direction:column;justify-content:center;
  text-align:center;
}
.hero-content{text-align:center}
.header-content h1{font-size:3.25rem}
.header-content p{font-size:1.125rem}

.page-header{
  background:
    linear-gradient(rgba(0,51,102,.82),rgba(0,51,102,.82)),
    url('https://images.unsplash.com/photo-1550993077-e6f77c3e8e1f?q=80&w=2070&auto=format&fit=crop')
    center/cover no-repeat;
}

/* Glassy blur for taglines/buttons */
.blur-effect{
  backdrop-filter:blur(6px);
  background:rgba(0,0,0,.18);
  padding:10px 18px;border-radius:12px;
}

/* =========================================================
   Headings / Sections
   ========================================================= */
.section{padding:64px 0}
h2{
  font-weight:700;position:relative;padding-bottom:.5rem;margin-bottom:.75rem;
}
h2::after{
  content:'';display:block;width:84px;height:4px;margin:.5rem auto 0;
  background:var(--brand-accent);border-radius:999px;
}

/* =========================================================
   Cards & media
   ========================================================= */
.card{
  border:0!important;border-radius:var(--radius);
  background:#fff;box-shadow:var(--shadow);
  transition:transform .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card img{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.list-group-item{border:1px solid rgba(0,0,0,.06)}

/* =========================================================
   Social icons
   ========================================================= */
.social-icon{transition:color .25s,transform .25s}
.social-icon:hover{color:var(--brand-accent)!important;transform:translateY(-2px)}

/* =========================================================
   Scroll-in Animations (supports .is-visible and .visible)
   ========================================================= */
.animate-on-scroll{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:transform,opacity;
}
.animate-on-scroll.visible,
.animate-on-scroll.is-visible{opacity:1;transform:none}

/* =========================================================
   Legacy marquee area
   ========================================================= */
.marquee-box{border:none!important;padding:0!important;background:transparent!important}
.marquee-text{color:#d9534f;font-weight:500}

/* =========================================================
   Ticker (Scrolling Announcement)
   ========================================================= */
.ticker-wrap{
  position:relative;z-index:1019;
  overflow:hidden;display:flex;align-items:center;
  padding-inline:10px;line-height:1;
}
.navbar.sticky-top{z-index:1030}
.ticker{
  display:inline-block;white-space:nowrap;
  padding-left:100%;
  transform:translateZ(0);will-change:transform;
  -webkit-font-smoothing:antialiased;
  animation:ticker-move var(--ticker-speed) linear infinite;
  font-weight:700;letter-spacing:.5px;
  transition:animation-play-state .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .ticker:hover{animation-play-state:paused}
}
@keyframes ticker-move{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}
.ticker span{text-shadow:none!important}

/* =========================================================
   Forms & tables
   ========================================================= */
.form-control,.form-select{
  border-radius:10px;border-color:rgba(0,0,0,.12);
  transition:box-shadow .2s,border-color .2s;
}
.form-control:focus,.form-select:focus{
  box-shadow:0 0 0 .2rem rgba(0,77,153,.15);
  border-color:var(--brand-primary-600);
}
.table{--bs-table-border-color:rgba(0,0,0,.08)}

/* Help text */
.form-text.muted{color:#6b7280}

/* =========================================================
   Footer (supports dark and light)
   ========================================================= */
/* Default: do NOT force footer white, respect your HTML classes */
footer{background:transparent}
footer.bg-dark{background:#111827!important;color:#e5e7eb}
footer.bg-dark .text-white-50{color:rgba(255,255,255,.6)!important}
footer .social-icon{font-size:1.125rem}

/* Optional mini contact strip above footer */
.contact-strip{
  background:linear-gradient(90deg,var(--brand-primary),#1f3f75);
  color:#fff; padding:14px 0;
  box-shadow:var(--shadow);
}
.contact-strip .btn{border-radius:999px}
.contact-strip .btn-outline-light:hover{background:rgba(255,255,255,.15)}

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width:992px){
  .header-content h1{font-size:2.5rem}
}
@media (max-width:768px){
  .hero-section{min-height:52vh}
  .header-content h1{font-size:2rem}
  .header-content p{font-size:1rem}
  .ticker{letter-spacing:.2px}
  .navbar-toggler{border:none}
}

/* =========================================================
   Accessibility
   ========================================================= */
:focus-visible{
  outline:3px solid rgba(0,77,153,.45);
  outline-offset:2px;border-radius:8px;
}

/* =========================================================
   Performance helpers (non-breaking)
   ========================================================= */
/* Aspect-ratio utilities you can drop onto wrappers if needed */
.ratio-16x9{aspect-ratio:16 / 9}
.ratio-1x1{aspect-ratio:1 / 1}
.ratio-4x3{aspect-ratio:4 / 3}

/* Respect reduced-motion users: minimize motion everywhere */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .ticker{animation:none !important}
  .animate-on-scroll{opacity:1 !important; transform:none !important}
}

/* ===== FTL v2: compact round avatars, infinite horizontal loop ===== */
.ftl2-scroller{
  --ftl-h: 68px;                  /* total strip height (compact) */
  --ftl-gap: 14px;
  --ftl-speed: 28s;               /* lower = faster */
  background: linear-gradient(90deg, var(--brand-primary), #1f3f75);
  color: #fff;
  padding: 8px 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ftl2-track{
  display: inline-flex;
  gap: var(--ftl-gap);
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ftl2-scroll var(--ftl-speed) linear infinite;
}
.ftl2-scroller:hover .ftl2-track{ animation-play-state: paused; } /* pause on hover */
@keyframes ftl2-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* requires duplicated set to loop */
}
.ftl2-dup{ display: contents; }

.ftl2-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 10px;
  height: calc(var(--ftl-h) - 18px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ftl2-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.ftl2-avatar{
  --size: 44px;                   /* circle size (compact) */
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  flex: 0 0 var(--size);
  background:
    radial-gradient(120px 120px at 30% 20%, rgba(255,255,255,.22), transparent 60%),
    var(--img, linear-gradient(135deg, #79a6ff, #2a6edb));
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.18);
}
.ftl2-badge{
  position: absolute;
  right: -6px;
  bottom: -4px;
  padding: 2px 8px;
  background: var(--brand-accent);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  white-space: nowrap;
}
.ftl2-name{
  color:#fff;
  font-weight: 600;
  letter-spacing:.2px;
  font-size: 14px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ftl2-track{ animation: none; }
}
@media (max-width: 576px){
  .ftl2-name{ font-size: 13px; }
  .ftl2-avatar{ --size: 40px; }
}

/* Logo image inside navbar */
.navbar .navbar-brand img {
    height: 100%;       /* fill navbar height */
    max-height: 80px;   /* match navbar height */
    width: auto;        /* scale width proportionally */
    object-fit: contain;
}
/* Optional: reduce logo size on mobile */
@media (max-width: 768px) {
  .navbar .navbar-brand img {
      max-height: 45px;
  }
}

/* Logo image inside navbar */
.navbar .navbar-brand img {
    height: 100%;       /* fill navbar height */
    max-height: 80px;   /* match navbar height */
    width: auto;        /* scale width proportionally */
    object-fit: contain;
}
/* Optional: reduce logo size on mobile */
@media (max-width: 768px) {
  .navbar .navbar-brand img {
      max-height: 45px;
  }
}

.top-info-bar {
  background: #084c61; /* teal background */
  color: #fff;
  font-size: 14px;
  padding: 6px 0;
}
.top-info-bar a { color: #fff; margin-left: 12px; }
.top-info-bar .info-left span { margin-right: 20px; }

/* Mobile-friendly Top Info Bar */
@media (max-width: 768px) {
  .top-info-bar .container {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
    text-align: left;
  }
  .top-info-bar .info-left span {
    display: block;
    margin-right: 0;
  }
  .top-info-bar .info-right {
    margin-top: 4px;
  }
}

/* Offcanvas Menu CTA button styling */
.offcanvas-body .btn-quote {
  margin-top: 15px;
  width: 100%; /* full width on mobile */
  justify-content: center;
}