:root {
  --brand-navy: #002b66;

  --brand-slate: #0f1e36;

  --brand-light: #f8fafc;

  --brand-accent: #f37021;

  --brand-accent-hover: #d95d12;

  --brand-gray-dark: #334155;

  --brand-gray-light: #e2e8f0;
}

/* html {
  scroll-behavior: smooth;
} */

body {
  font-family: Inter !important;

  background-color: #ffffff;

  color: #0f172a;

  overflow-x: hidden;
}

.rounded-4,
.rounded-5 {
  border-radius: 15px;
}

.btn-brand-navy {
  background-color: var(--brand-navy);
}

.text-opacity-75 {
  opacity: 0.75;
}

/* Normal state */
#top_header {
  width: 100%;
  background-color: transparent;
  transition: all 0.3s ease;
}

/* Scrolled state */
#top_header.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* .display-6 {

  font-size: 43px !important;

} */

::selection {
  background-color: var(--brand-accent);

  color: #ffffff;
}

.desktopflex {
  display: flex;

  justify-content: space-between;
}

.navbar {
  padding-top: 0;

  padding-bottom: 0px;
}

.icon-bg {
  background: rgba(0, 43, 102, 0.1) !important;
}

/* Custom Theme Colors */

.bg-brand-navy {
  background-color: var(--brand-navy) !important;
}

.bg-brand-slate {
  background-color: var(--brand-slate) !important;
}

.bg-brand-light {
  background-color: var(--brand-light) !important;
}

.bg-brand-accent {
  background-color: var(--brand-accent) !important;
}

.text-brand-navy {
  color: var(--brand-navy) !important;
}

.text-brand-accent {
  color: var(--brand-accent) !important;
}

.border-brand-navy {
  border-color: var(--brand-navy) !important;
}

.btn-brand-accent {
  background-color: var(--brand-accent);

  border-color: var(--brand-accent);

  color: #ffffff;

  font-weight: 700;

  transition: all 0.2s ease-in-out;
}

.btn-brand-accent:hover,
.btn-brand-accent:focus {
  background-color: var(--brand-accent-hover);

  border-color: var(--brand-accent-hover);

  color: #ffffff;

  transform: translateY(-2px);
}

.orange-glow {
  box-shadow: 0 10px 25px -5px rgba(243, 112, 33, 0.35);
}

/* Header Transition */

#mainHeader {
  transition: all 0.3s ease-in-out;
}

.glass-header-scrolled {
  background: rgba(255, 255, 255, 0.98) !important;

  box-shadow: 0 4px 20px -2px rgba(0, 43, 102, 0.12);

  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

/* Hero Slider */

.hero-slide {
  transition: opacity 1s ease-in-out;
}

.hero-radial-glow {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background: radial-gradient(
    circle at 25% 40%,

    rgba(243, 112, 33, 0.18) 0%,

    transparent 65%
  );

  z-index: 2;
}

.hero-overlay-horizontal {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    to right,

    rgba(2, 6, 23, 0.95),
    rgba(2, 6, 23, 0.75),
    transparent
  );
}

.hero-overlay-vertical {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    to top,

    rgba(2, 6, 23, 0.8),
    transparent,
    rgba(2, 6, 23, 0.4)
  );
}

.slide-dot {
  height: 10px;

  border-radius: 999px;

  border: none;

  transition: all 0.3s ease;
}

.slide-dot.active {
  width: 40px;

  background-color: var(--brand-accent);
}

.slide-dot.inactive {
  width: 12px;

  background-color: rgba(148, 163, 184, 0.6);
}

/* Stat Cards */

.stat-card {
  opacity: 0;

  transform: translateY(24px) scale(0.97);

  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card:hover {
  border-color: rgba(243, 112, 33, 0.5);

  background: rgba(255, 255, 255, 0.1);
}

.stat-card.animate-in {
  opacity: 1;

  transform: translateY(0) scale(1);
}

/* Glass / Dark Container Styling */

.glass-panel {
  background-color: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-control-dark {
  background-color: #0b1329;

  border: 1px solid #334155;

  color: #ffffff;
}

.form-control-dark:focus {
  background-color: #0b1329;

  border-color: var(--brand-accent);

  color: #ffffff;

  box-shadow: 0 0 0 0.25rem rgba(243, 112, 33, 0.25);
}

.form-control-dark::placeholder {
  color: #94a3b8;
}

.nav-link {
  font-weight: 600;

  color: #1e293b !important;

  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--brand-accent) !important;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--brand-accent) !important;
}

.title-divider {
  width: 64px;

  height: 4px;

  background-color: var(--brand-accent);

  border-radius: 999px;

  margin: 0 auto 1.5rem auto;
}

a.scrollup {
  cursor: pointer;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background-color: var(--secondary-color);

  color: var(--primary-green);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 18px;

  position: fixed;

  right: 14px;

  bottom: 14px;

  z-index: 999;

  /* transform: rotate(-90deg); */

  padding: 10px;

  background: #e2ab4b;
}

.footerlink .text-secondary {
  color: #6c757d !important;

  font-weight: 600;
}

@media (max-width: 991px) {
  .desktopflex {
    display: none;
  }

  .web-logo img {
    display: block;

    margin: 0px auto;
  }

  button#my-icon {
    position: absolute;

    top: 15px;

    left: 15px;
  }
}

/* Hero Slide Fade Transition & Layering */
.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease-in-out,
    visibility 0.8s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.hero-slide.active-slide {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* Slide Indicator Dots Styling */
.slide-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #f37021; /* text-brand-accent color */
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}

.slide-dot.active {
  background: #f37021;
  width: 32px;
  border-radius: 6px;
}

.slide-dot.inactive {
  background: rgba(255, 255, 255, 0.3);
  border-color: transparent;
}
.web-logo {
  width: 70%;
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}
footer .text-decoration-underline {
  text-decoration: underline !important;
  color: var(--brand-navy) !important;
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .h2,
  h2 {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 991px) {
  .web-logo {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px auto;
  }
}