:root {
  /* Typography */
  --font-body--family: "Inter", sans-serif;
  --font-body--style: normal;
  --font-body--weight: 400;

  --font-heading--family: "Poppins", sans-serif;
  --font-heading--style: normal;
  --font-heading--weight: 600;

  --font-button--family: "Poppins", sans-serif;
  --font-button--style: normal;
  --font-button--weight: 600;

  /* h1-h6 */
  --font-h1--size: 60px;
  --font-h2--size: 48px;
  --font-h3--size: 36px;
  --font-h4--size: 24px;
  --font-h5--size: 20px;
  --font-h6--size: 16px;

  /* header nav */
  --font-nav-main: 16px;

  /* Colors */
  --color-background: rgba(255, 255, 255, 1);
  --color-foreground: #364371;
  --color-foreground-heading: #364371;
  --color-foreground-subheading: rgba(93, 102, 111, 1);
  --color-background-subheading: rgba(255, 255, 255, 0.1);
  --color-border-subheading-bg: rgba(32, 40, 45, 0.1);
  --color-primary: #364371;
  --color-primary-background: #364371;
  --color-primary-hover: #364371;
  --color-primary-background-hover: #364371;
  --color-border: rgba(255, 255, 255, 0.2);
  --color-border-hover: rgba(93, 102, 111, 0.5);
  --color-shadow: rgba(0, 0, 0, 1);
  --color-overlay: rgba(28, 37, 57, 0.6);

  /* Buttons */
  --font-button-size: 16px;
  --font-button-size-mobile: 16px;
  --style-button-height: 56px;
  --style-button-height-mobile: 48px;
  --style-button-slim-height: 52px;
  --style-button-slim-height-mobile: 40px;
  --style-cta-underline-offset: 5px;
  --style-cta-underline-thickness: 1px;

  /* Colors - Primary Button */
  --color-primary-button-text: rgba(255, 255, 255, 1);
  --color-primary-button-background: #364371;
  --color-primary-button-border: #364371;
  --color-primary-button-icon: #364371;
  --color-primary-button-icon-background: rgba(255, 255, 255, 1);

  --color-primary-button-hover-text: #364371;
  --color-primary-button-hover-background: rgba(255, 255, 255, 1);
  --color-primary-button-hover-border: #364371;
  --color-primary-button-hover-icon: rgba(255, 255, 255, 1);
  --color-primary-button-hover-icon-background: #364371;

  /* Colors - Secondary Button */
  --color-secondary-button-text: #364371;
  --color-secondary-button-background: rgba(255, 255, 255, 1);
  --color-secondary-button-border: rgba(255, 255, 255, 1);
  --color-secondary-button-icon: rgba(255, 255, 255, 1);
  --color-secondary-button-icon-background: #364371;

  --color-secondary-button-hover-text: rgba(255, 255, 255, 1);
  --color-secondary-button-hover-background: #364371;
  --color-secondary-button-hover-border: #364371;
  --color-secondary-button-hover-icon: #364371;
  --color-secondary-button-hover-icon-background: rgba(255, 255, 255, 1);

  /* Colors - Input */
  --color-input-background: rgba(255, 255, 255, 1);
  --color-input-text: rgba(93, 102, 111, 1);
  --color-input-border: rgba(93, 102, 111, 0.2);
  --color-input-hover-background: rgba(255, 255, 255, 1);
  --color-input-hover-text: rgba(93, 102, 111, 1);
  --color-input-hover-border: rgba(93, 102, 111, 0.2);

  /* Borders */
  --style-border-width-buttons-primary: 1px;
  --style-border-width-buttons-secondary: 1px;
  --style-border-radius-buttons-primary: 40px;
  --style-border-radius-buttons-secondary: 40px;

  --style-border-width-inputs: 1px;
  --style-border-radius-inputs: 8px;
  --style-border-width: 1px;

  /* Focus */
  --focus-outline-width: 1px;
  --focus-outline-offset: 3px;

  /* Pagination */
  --style-pagination-border-width: 1px;
  --pagination-item-foreground: rgba(28, 37, 57, 1);
  --pagination-item-background: rgba(242, 242, 242, 1);
  --pagination-item-border: rgba(242, 242, 242, 1);
  --pagination-item-active-foreground: rgba(255, 255, 255, 1);
  --pagination-item-active-background: rgba(28, 37, 57, 1);
  --pagination-item-active-border: rgba(28, 37, 57, 1);

  /* Swiper */
  --swiper-navigation-size: 14px;
  --swiper-navigation-color: rgba(28, 37, 57, 1);
  --swiper-navigation-background-color: rgba(242, 242, 242, 1);
  --swiper-navigation-hover-color: rgba(28, 37, 57, 1);
  --swiper-navigation-hover-background-color: transparent;
  --swiper-pagination-bullet-inactive-color: rgba(242, 242, 242);
  --swiper-pagination-color: rgba(28, 37, 57, 1);
  --swiper-pagination-bullet-inactive-opacity: 1;
}

.text-36 {
  font-size: 36px;
  line-height: 1.4;
}

.home .hero-carousel .heading,
.home .hero-carousel p.text {
  color: #fff;
  text-shadow: 0px 1px 1px #000;
}

.home .hero-carousel .banner-wrapper:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.home .hero-carousel {
  position: relative;
  width: 100%;
}

.home .hero-carousel .swiper-slide,
.home .hero-carousel .banner-wrapper {
  min-height: 720px;
}

.home .hero-carousel .media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home .hero-carousel .content-absolute {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home .hero-carousel__content {
  max-width: 1024px;
  color: #fff;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Pause scrolling marquee on hover */
.running-content:hover .running-animation,
.running-animation:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.header-grid {
  gap: 15px;
}

.logo-bg img {
  position: relative;
}

.logo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: #fff;
  z-index: 0;
}

.drawer-additional {
  --color-background: rgba(255, 255, 255, 1);
}

.header-3 {
  --color-background: #364371;
}

.running-content .separator {
  font-size: 3rem;
}

.running-content,
.running-content .content-inner {
  background-color: #e8f44c;
}

@media (min-width: 992px) {
  .header-menu {
    /* justify-content: right; */
  }
  .logo-bg::before {
    width: 23%;
  }
}

@media (min-width: 1600px) {
  .header-menu {
    /* justify-content: right; */
  }
  .logo-bg::before {
    width: 30%;
  }
}

@media (max-width: 767px) {
  :root {
    --font-h1--size: 48px;
    --font-h2--size: 40px;
    --font-h3--size: 28px;
    --font-h4--size: 20px;
    --font-h5--size: 18px;
    --swiper-navigation-size: 12px;
  }

  .home .hero-carousel .text-64 {
    font-size: 28px;
  }
}

@media (max-width: 991px) {
  .header-nav {
    --color-background: rgba(255, 255, 255, 1);
  }
}

@media (max-width: 1279px) {
  .header-grid {
    grid-template-columns: 200px 1fr 80px;
  }
}

@media (max-width: 1600px) {
  .menu-link-main {
    padding: 28px 16px;
  }
}