/* Alternative alert bg */
/* alt alerts */
.alt_alert_secondary {
  background-color: #e2e3e5;
}

.alt_alert_danger {
  background-color: #f8d7da;
}

.alt_alert_success {
  background-color: #d4edda;
}

.alt_alert_warning {
  background-color: #fff3cd;
}

.alt_alert_info {
  background-color: #d1ecf1;
}

.alt_alert_light {
  background-color: #fefefe;
}

.alt_alert_dark {
  background-color: #d6d8d9;
}



/* variables */

:root {

  /* ===========================================
       BRAND
    =========================================== */

  --color-primary: #12355B;
  --color-primary-light: #2F5F8C;
  --color-primary-dark: #0D2744;

  --color-accent: #C8A96A;
  --color-accent-light: #D8BD87;

  /* ===========================================
       BACKGROUNDS
    =========================================== */

  --color-background: #F8F6F2;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1EEE8;

  /* ===========================================
       TEXT
    =========================================== */

  --color-heading: #223047;
  --color-body: #4F5B66;
  --color-muted: #7C8895;
  --color-light: #FFFFFF;

  /* ===========================================
       BORDERS
    =========================================== */

  --color-border: #E4DED4;

  /* ===========================================
       STATUS
    =========================================== */

  --color-success: #2E7D57;
  --color-warning: #C48B18;
  --color-danger: #B74A4A;

  /* ===========================================
       SHADOWS
    =========================================== */

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .05);

  --shadow-md: 0 10px 30px rgba(0, 0, 0, .08);

  --shadow-lg: 0 25px 60px rgba(0, 0, 0, .12);

  /* ===========================================
       RADIUS
    =========================================== */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  /* ===========================================
       TRANSITIONS
    =========================================== */

  --transition: .35s ease;

  /* ===========================================
       CONTAINER
    =========================================== */

  --container: 1320px;

}



/* Typography */

:root {

  --space-xs: .5rem;

  --space-sm: 1rem;

  --space-md: 2rem;

  --space-lg: 4rem;

  --space-xl: 7rem;

  --space-2xl: 10rem;

}


/* Components */

.section-label{

    display:inline-block;

    margin-bottom:20px;

    color:var(--color-accent);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.section-heading{

    max-width:760px;

    margin-bottom:70px;

}

.section-heading p{

    color:var(--color-muted);

    font-size:1.15rem;

}



/* Buttons */

.btn-primary-brand {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 16px 38px;

  border-radius: 999px;

  background: var(--color-primary);

  color: #fff;

  font-weight: 700;

  border: none;

  transition: var(--transition);

}

.btn-primary-brand:hover {

  background: var(--color-primary-light);

  color: #fff;

  transform: translateY(-3px);

}

.btn-outline-brand {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 16px 38px;

  border: 2px solid var(--color-primary);

  border-radius: 999px;

  color: var(--color-primary);

  background: transparent;

  font-weight: 700;

}

.btn-outline-brand:hover {

  background: var(--color-primary);

  color: #fff;

}

.btn-primary {
    padding: 16px 38px;
    border: 2px solid var(--color-primary);
    border-radius: 999px;

    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

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

.btn-outline {

  padding: 16px 38px;

  border: 2px solid var(--color-primary);

  border-radius: 999px;

  color: var(--color-primary);

  background: transparent;

  font-weight: 700;

}





* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  background: var(--color-background);

  color: var(--color-body);

  font-family: 'Manrope', sans-serif;

  font-size: 16px;

  line-height: 1.8;

  overflow-x: hidden;

  text-rendering: optimizeLegibility;

}

section {

  position: relative;

  padding: 110px 0;

}

.container-xl {

  max-width: var(--container);

}

img {

  max-width: 100%;

  height: auto;

}

a {

  transition: var(--transition);

  text-decoration: none;

}

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family: 'Cormorant Garamond', serif;

  color: var(--color-heading);

  font-weight: 600;

  line-height: 1.1;

  margin-bottom: 1.25rem;

}

h1 {

  font-size: clamp(3.5rem, 7vw, 6rem);

}

h2 {

  font-size: clamp(2.6rem, 5vw, 4rem);

}

h3 {

  font-size: 2rem;

}

p {

  margin-bottom: 1.5rem;

}




/* navigation */

#site-navigation {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  transition: .4s ease;

  padding: 30px 0;

}

#site-navigation.scrolled {

  padding: 18px 0;

  background: rgba(255, 255, 255, .82);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid var(--color-border);

  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);

}

#site-navigation .container-xl {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.navigation-links {

  display: flex;

  gap: 42px;

  list-style: none;

  margin: 0;

  padding: 0;

}

.navigation-links a {

  position: relative;

  color: var(--color-heading);

  font-weight: 600;

  padding: 8px 0;

}

.navigation-links a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 2px;

  background: var(--color-accent);

  transition: width .3s ease;

}

.navigation-links a:hover::after,

.navigation-links a.active::after {

  width: 100%;

}

.navigation-actions {

  display: flex;

  align-items: center;

  gap: 20px;

}




#mobile-menu-button {

  display: none;

  width: 48px;

  height: 48px;

  border: none;

  background: transparent;

  padding: 0;

}

#mobile-menu-button span {

  display: block;

  width: 28px;

  height: 2px;

  background: var(--color-heading);

  margin: 6px auto;

  transition: .3s ease;

}

@media(max-width:991px) {

  .navigation-links {

    display: none;

  }

  #mobile-menu-button {

    display: block;

  }

}


/* ==========================================================
   FOOTER
========================================================== */

#site-footer {

  margin-top: 120px;

  background: #F8F7F4;

  border-top: 1px solid #E7E7E7;

}

.footer-cta {

  padding: 90px 0;

  border-bottom: 1px solid #E7E7E7;

}

.footer-cta span {

  display: inline-block;

  margin-bottom: 15px;

  color: var(--color-primary);

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

}

.footer-cta h2 {

  margin-bottom: 20px;

  max-width: 600px;

}

.footer-main {

  padding: 80px 0;

}

.footer-logo {

  font-size: 2rem;

  font-weight: 700;

  color: var(--color-heading);

  text-decoration: none;

  display: inline-block;

  margin-bottom: 25px;

}

.footer-main h5 {

  margin-bottom: 25px;

}

.footer-main ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

.footer-main li {

  margin-bottom: 14px;

}

.footer-main a {

  color: var(--color-text);

  text-decoration: none;

  transition: .3s;

}

.footer-main a:hover {

  color: var(--color-primary);

}

.footer-contact li {

  display: flex;

  align-items: flex-start;

  gap: 12px;

}

.footer-social {

  display: flex;

  gap: 15px;

  margin-top: 25px;

}

.footer-social a {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background: #FFFFFF;

  border: 1px solid #E7E7E7;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: .3s;

}

.footer-social a:hover {

  background: var(--color-primary);

  color: #FFFFFF;

  transform: translateY(-3px);

}

.footer-bottom {

  padding: 25px 0;

  border-top: 1px solid #E7E7E7;

  font-size: .95rem;

}






/* =========================================================
   TRUST BAR
========================================================= */

.trust-bar {

  position: relative;

  overflow: hidden;

  padding: 55px 0 40px;

  background: var(--color-primary-dark);

  border-top: 1px solid var(--color-primary-light);

  border-bottom: 1px solid var(--color-border);

}

.trust-text {

  margin-bottom: 35px;

  text-align: center;

  color: var(--color-muted);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: .12em;

  text-transform: uppercase;

}


/* =========================================================
   TRUST MARQUEE
========================================================= */

.trust-marquee {

  position: relative;

  width: 100%;

  overflow: hidden;

  margin-top: 25px;

}


/* Edge fades */

.trust-marquee::before,
.trust-marquee::after {

  content: "";

  position: absolute;

  top: 0;

  width: 140px;

  height: 100%;

  z-index: 2;

  pointer-events: none;

}

.trust-marquee::before {

  left: 0;

  background:
    linear-gradient(to right,
      var(--color-primary-dark),
      transparent);

}

.trust-marquee::after {

  right: 0;

  background:
    linear-gradient(to left,
      var(--color-primary-dark),
      transparent);

}


/* Track */

.trust-track {

  display: flex;

  align-items: center;

  width: max-content;

  gap: 80px;

  animation:
    scrollLogos 25s linear infinite;

}

.trust-marquee:hover .trust-track {

  animation-play-state: paused;

}


/* Logos */

.trust-track .logo {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 120px;

}

.trust-track .logo img {

  max-width: 150px;

  max-height: 60px;

  opacity: .55;

  /* filter: grayscale(100%); */

  transition:
    opacity var(--transition),
    filter var(--transition),
    transform var(--transition);

}

.trust-track .logo img:hover {

  opacity: 1;

  filter: grayscale(0%);

  transform: scale(1.04);

}

@keyframes scrollLogos {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* =========================================================
   PILLARS
========================================================= */

.pillars-section {

  position: relative;

  background: var(--color-background);

}

.pillars-header {

  max-width: 650px;

  margin-bottom: 70px;

}

.pillars-header p {

  max-width: 600px;

  font-size: 17px;

  color: var(--color-body);

}


/* Grid */

.pillars {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 30px;

}


/* Pillar */

.pillar {

  position: relative;

  cursor: pointer;

}

.pillar-inner {

  position: relative;

  min-height: 430px;

  height: 100%;

  padding: 40px;

  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  background: var(--color-surface);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);

}


/* Index */

.pillar-index {

  position: relative;

  z-index: 3;

  margin-bottom: 25px;

  color: var(--color-accent);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: .14em;

}


/* Content */

.pillar-content {

  position: relative;

  z-index: 3;

  transition:
    transform var(--transition);

}

.pillar h3 {

  margin-bottom: 15px;

  color: var(--color-heading);

  font-size: 28px;

}

.pillar p {

  max-width: 400px;

  color: var(--color-body);

  transition: color var(--transition);

}


/* Background image */

.pillar-bg {

  position: absolute;

  inset: 0;

  z-index: 1;

  opacity: 0;

  transition:
    opacity .6s ease;

}

.pillar-bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scale(1.08);

  filter:
    grayscale(100%) brightness(.65);

  transition:
    transform 1.2s ease,
    filter 1.2s ease;

}


/* Image overlay */

.pillar-bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(to top,
      rgba(13, 39, 68, .92),
      rgba(13, 39, 68, .35));

}


/* Hover */

.pillar:hover .pillar-inner {

  transform: translateY(-8px);

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

  box-shadow: var(--shadow-lg);

}

.pillar:hover .pillar-bg {

  opacity: 1;

}

.pillar:hover .pillar-bg img {

  transform: scale(1.02);

  filter:
    grayscale(20%) brightness(.75);

}

.pillar:hover .pillar-content {

  transform: translateY(-5px);

}

.pillar:hover h3,
.pillar:hover p {

  color: var(--color-light);

}


/* Gold indicator */

.pillar::after {

  content: "";

  position: absolute;

  left: 40px;

  bottom: 0;

  width: 0;

  height: 2px;

  background: var(--color-accent);

  transition:
    width .5s ease;

}

.pillar:hover::after {

  width: calc(100% - 80px);

}

@media (max-width: 767px) {

  .trust-bar {

    padding: 45px 0 30px;

  }

  .trust-marquee::before,
  .trust-marquee::after {

    width: 60px;

  }

  .trust-track {

    gap: 45px;

    animation-duration: 18s;

  }

  .pillars-header,
  .highlights-header {

    margin-bottom: 45px;

  }

  .pillar-inner {

    min-height: 340px;

    padding: 30px;

  }

  .pillar::after {

    left: 30px;

  }

  .pillar:hover::after {

    width: calc(100% - 60px);

  }

  .highlight-image {

    height: 280px;

  }

  .highlight-content {

    padding: 25px;

  }

  .why-item p {

    font-size: 18px;

  }

  .testimonial-stage {

    min-height: 320px;

  }

}