/* Customise the colors on your website here! */

:root {
  --bs-primary: #753f98;
  --bs-primary-rgb: 117, 63, 152;
  --bs-primary-text-emphasis: #482460;
  --bs-primary-bg-subtle: rgba(117, 63, 152, 0.1);
  --bs-heading-color: var(--bs-primary);
  --divider-url: url('/assets/linuxvic-divider.svg');
  --gradient: linear-gradient(135deg, #4E45CA 0%, #803D99 100%);
}

/* Customise your Font, change "Ubuntu" to another font */

@font-face {
  font-family: "Ubuntu";
  src: url("/assets/fonts/UbuntuSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

body {
  font-family: "Ubuntu", var(--bs-body-font-family);
}

/* -------------------------------------------- */


html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-text-emphasis) ;
  --bs-btn-hover-border-color: var(--bs-primary-text-emphasis) ;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-secondary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-secondary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-secondary-text-emphasis);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

#navbar-main .nav-link {
  --bs-nav-link-color: var(--bs-primary);
  --bs-nav-link-hover-color: var(--bs-primary);
  --bs-navbar-nav-link-padding-x: 1rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#navbar-main .nav-link:hover {
  background-color: var(--bs-primary-bg-subtle);
}

#navbar-main .navbar-brand div span {
  transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#navbar-main .navbar-brand:hover div span {
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

#navbar-main .icon-link-hover>.bi {
  width: 0em;
  opacity: 0;
  transition: .2s ease-in-out transform, width 0.2s ease-in-out;
}

#navbar-main .icon-link-hover:hover>.bi {
  width: 1em !important;
  opacity: unset !important;
}

#footer-main .nav-link {
  transition: all 0.2s ease-in-out;
  border-bottom: 2px var(--bs-border-style) transparent !important;
  border-radius: 0px;
}

#footer-main .nav-link:hover {
  border-bottom: 2px var(--bs-border-style) var(--bs-border-color) !important;
  --bs-border-width: 3px;
}

.border-primary-hover {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.border-primary-hover:hover {
  border-color: rgba(var(--bs-primary-rgb), 1) !important;
}

.border-secondary-hover {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.border-secondary-hover:hover {
  border-color: rgba(var(--bs-secondary-rgb), 1) !important;
}

.text-preline {
  white-space: pre-line;
}

/* Initiatives Cards with Divider Mask */
.initiatives-wrapper {
  position: relative;
}

.initiative-card {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
}

/* SVG divider layer - thin bottom border style */
.initiative-card::before {
  content: "";
  position: absolute;
  bottom: -32px;
  left: 0;
  right: 0;
  height: 30px;
  background-image: var(--divider-url);
  background-position: center bottom;
  background-size: auto 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

/* Gradient overlay with blend - like footer */
.initiative-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: var(--gradient);
  mix-blend-mode: lighten;
  pointer-events: none;
  z-index: 2;
}

.initiative-card .card-body {
  padding-bottom: 2.5rem;
}

.initiative-cta-section {
  position: relative;
  z-index: 3;
  margin-bottom: 0.5rem;
}

/* Desktop: seamless divider across 4 cards */
@media (min-width: 992px) {
  .initiatives-wrapper .row {
    --initiative-cols: 4;
  }

  .initiative-card::before,
  .initiative-card::after {
    height: 80px;
  }

  .initiative-card::before {
    /* Make it repeat-x so no gaps on any side */
    background-repeat: repeat-x;
    background-size: auto 100%;
    /* Size pseudo-element to the full row width, position it via left offset */
    width: calc(var(--initiative-cols) * 100% + (var(--initiative-cols) - 1) * var(--bs-gutter-x, 1.5rem));
  }

  .initiatives-wrapper .row > div:nth-child(1) .initiative-card::before {
    left: 0;
  }
  .initiatives-wrapper .row > div:nth-child(2) .initiative-card::before {
    left: calc(-100% - var(--bs-gutter-x, 1.5rem));
  }
  .initiatives-wrapper .row > div:nth-child(3) .initiative-card::before {
    left: calc(-200% - var(--bs-gutter-x, 1.5rem) * 2);
  }
  .initiatives-wrapper .row > div:nth-child(4) .initiative-card::before {
    left: calc(-300% - var(--bs-gutter-x, 1.5rem) * 3);
  }
}

/* Tablet: seamless across 2 cards per row */
@media (min-width: 768px) and (max-width: 991px) {
  .initiative-card::before,
  .initiative-card::after {
    height: 80px;
  }

  .initiative-card::before {
    background-repeat: repeat-x;
    background-size: auto 100%;
    width: calc(200% + var(--bs-gutter-x, 1.5rem));
  }

  .initiatives-wrapper .row > div:nth-child(odd) .initiative-card::before {
    left: 0;
  }
  .initiatives-wrapper .row > div:nth-child(even) .initiative-card::before {
    left: calc(-100% - var(--bs-gutter-x, 1.5rem));
  }
}

/* Tablet: seamless across 2 cards per row */
@media (min-width: 425px) and (max-width: 767px) {
  .initiative-card::before,
  .initiative-card::after {
    height: 80px;
  }

  .initiative-card::before {
    background-repeat: repeat-x;
    background-size: auto 100%;
    width: calc(200% + var(--bs-gutter-x, 1.5rem));
  }

  .initiatives-wrapper .row > div:nth-child(odd) .initiative-card::before {
    left: 0;
  }
  .initiatives-wrapper .row > div:nth-child(even) .initiative-card::before {
    left: calc(-100% - var(--bs-gutter-x, 1.5rem));
  }
}

/* Mobile */
@media (max-width: 424px) {
  .initiative-card::before,
  .initiative-card::after {
    height: 80px;
  }
}



.footer-wrapper {
  position: relative;
}

.footer-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient);
  opacity: 1;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: lighten;
}

.divider {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  z-index: 3;
  isolation: isolate;
}


.divider::before {
  content: "";
  display: block;
  padding-bottom: 7%;
}


.divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 100%;
  min-width: 0;
  background-image: var(--divider-url);
  background-position: center top;
  background-size: auto 100%;
  transform: translate(-50%, 50%);
  pointer-events: none;
}

/* Homepage hero styles */
.homepage-hero h1:first-child {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.homepage-hero > p {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.75;
}

/* Responsive sizing */
@media (max-width: 768px) {
  .homepage-hero h1:first-child {
    font-size: 2.5rem;
  }
  
  .homepage-hero > p {
    font-size: 1.1rem;
  }
}


@media (max-width: 1200px) {
  .divider::before {
    padding-bottom: 12%;
  }

  .divider::after {
    width: 300%;
  }
}

@media (max-width: 992px) {
  .divider::before {
    padding-bottom: 15%;
  }

  .divider::after {
    width: 300%;
  }
}

@media (max-width: 768px) {
  .divider::before {
    padding-bottom: 20%;
  }

  .divider::after {
    width: 300%;
  }
}

@media (max-width: 576px) {
  .divider::before {
    padding-bottom: 28%;
  }

  .divider::after {
    width: 300%;
  }
}


.mauticform_wrapper {
    max-width: 100% !important;
    margin: 0px 0px !important;
}