/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. You may delete these comments and get started with your customizations.

By default, your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. Just write here what you want to change, you don't need to copy all your theme's stylesheet content.
*/

body {
  --brand-primary: #07337e;
  --brand-deep:    #031a47;   /* darker blue for contrast */
  --brand-accent:  #8eb6f9   /* #0e5bdd */;
  --brand-bg:      #ffffff;
  --brand-text:    #1f2937;
  --brand-muted:   #6b7280;
  --brand-border:  #e5e7eb;
  --brand-light:   #f8fafc;
  --brand-dark:    #0b1f44;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 8px 24px rgba(0,0,0,.06);
  --shadow-md: 0 18px 50px rgba(0,0,0,.10);
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;
}

html, body {
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

a {
  color: var(--brand-primary);
  transition: all .2s ease;
}

a:hover {
  color: var(--brand-accent);
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  color: var(--brand-primary);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.35rem; }

p { margin-bottom: 1rem; }

.section-pad     { padding: var(--space-6) 28px; }
.section-pad-sm  { padding: var(--space-5) 28px; }

.bg-light-elite   { background: var(--brand-light); }
.text-muted-elite { color: var(--brand-muted); }

.eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.btn-elite-primary,
.btn-elite-outline,
.btn-elite-outline2,
.btn-elite-light {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  border: 2px solid transparent;
}

.btn-elite-primary { background: var(--brand-primary); color: #fff; }
.btn-elite-primary:hover { background: var(--brand-deep); color: #fff; }

.btn-elite-outline { border-color: var(--brand-primary); color: var(--brand-primary); background: transparent; }
.btn-elite-outline:hover { background: var(--brand-primary); color: #fff; }

.btn-elite-outline a{color: white}   /* used for phones with dark background */

.btn-elite-outline2 { border-color: var(--brand-primary) 1px solid; color: var(--brand-primary); background: transparent; }
.btn-elite-outline2:hover { background: var(--brand-primary); color: #fff; }
.btn-elite-outline2 a{color: var(--brand-primary)}   /* used for phones with dark background */


.btn-elite-light { background: #fff; color: var(--brand-primary); }
.btn-elite-light:hover { background: #eef4ff; color: var(--brand-primary); }

.hero-elite {
  position: relative;
  color: #fff !important;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-elite h1 { color: #fff !important; }

.hero-elite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(3,26,71,.92), rgba(7,51,126,.72));
}

.hero-elite .hero-content {
  position: relative;
  z-index: 2;
  padding: 110px 28px;
}

.hero-card {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  padding: 24px;
}

.service-card,
.info-card,
.testimonial-card,
.contact-card,
.gallery-card {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
}

.service-card .service-body,
.info-card .info-body,
.testimonial-card .testimonial-body,
.contact-card .contact-body,
.gallery-card .gallery-body {
  padding: 22px;
}

.service-card img,
.gallery-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 0;
}

.icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(14,91,221,.10);
  color: var(--brand-accent);
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.list-check {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.list-check li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}

/* FontAwesome 4 check icon */
.list-check li::before {
  content: "\f00c";
  font-family: "FontAwesome";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--brand-accent);
}

.cta-band {
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-primary));
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 26px;
}

.cta-band h2,
.cta-band h3,
.cta-band p,
.cta-band a,
.cta-band .fa { color: #fff; }

/* Keep btn-elite-light text blue even inside dark CTAs */
.cta-band .btn-elite-light,
.cta-icon-strip .btn-elite-light,
.cta-dark .btn-elite-light {
  color: var(--brand-primary);
}

.stat-chip {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  margin: 0 8px 8px 0;
  font-weight: 700;
}

.about-snapshot {
  border-left: 4px solid var(--brand-accent);
  padding-left: 18px;
}

.contact-inline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-primary);
}

.page-hero {
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(3,26,71,.9), rgba(7,51,126,.62));
}

.page-hero .page-hero-content {
  position: relative;
  z-index: 2;
  padding: 90px 28px;
}

.page-hero h1,
.page-hero .lead,
.page-hero p { color: #fff; }

.placeholder-image {
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf2f7;
  color: var(--brand-muted);
  border-radius: var(--radius-md);
  border: 1px dashed #cbd5e1;
  text-align: center;
  padding: 24px;
}

.footer-note {
  color: var(--brand-muted);
  font-size: .95rem;
}

/* ============================================================
   CTA VARIATIONS — for service landing pages
   ============================================================ */

/* CTA #1 — Phone Card */
.cta-phone-card {
  background: #fff;
  border: 2px solid var(--brand-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px 28px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-phone-card .phone-big {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: .02em;
  margin: 6px 0 4px;
  text-decoration: none;
}

/* CTA #3 — Split Image + Content */
.cta-split {
  background: var(--brand-light);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cta-split .cta-split-img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: 0;
}
.cta-split-body {
  padding: 40px 32px;
}

/* CTA #4 — Dark Contrast */
.cta-dark {
  background: var(--brand-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 44px 28px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.cta-dark h2,
.cta-dark h3,
.cta-dark p { color: #fff; }

/* CTA #5 — Minimal Centered */
.cta-minimal {
  border-top: 4px solid var(--brand-primary);
  padding: 40px 0 20px;
  text-align: center;
}

/* CTA #6 — Icon Strip Horizontal */
.cta-icon-strip {
  background: var(--brand-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-md);
}
.cta-icon-strip h3,
.cta-icon-strip p,
.cta-icon-strip a,
.cta-icon-strip .fa { color: #fff; }

/* CTA #7 — Dashed Bordered Box */
.cta-bordered {
  border: 2px dashed var(--brand-accent);
  border-radius: var(--radius-lg);
  padding: 40px 28px;
  background: #fff;
  text-align: center;
}

/* CTA #8 — Checklist + Button Stack */
.cta-checklist {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 28px;
}

@media (max-width: 991.98px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.7rem; }

  .hero-elite .hero-content,
  .page-hero .page-hero-content {
    padding: 78px 22px;
  }

  .service-card img,
  .gallery-card img {
    height: 220px;
  }

  .cta-split .cta-split-img {
    min-height: 220px;
  }
}

@media (max-width: 575.98px) {
  .section-pad,
  .section-pad-sm {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-card { margin-top: 20px; }

  .cta-phone-card .phone-big { font-size: 1.9rem; }
  .cta-phone-card,
  .cta-dark,
  .cta-bordered,
  .cta-checklist { padding: 28px 20px; }
}


/* scroll banner */
.announcement-wrapper {
    background: linear-gradient(90deg,
        #031a47 0%,
        #07337e 35%,
        #2964d1 50%,
        #07337e 65%,
        #031a47 100%
    );
}



/*    scroll revel */

/* Scroll reveal */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}