/*************** VARIABLES ***************/
/*****************************************/
:root {
  /* COLORS */
  --primaryDark: #043824;
  --primaryLight: #FFF;
  --secondaryLight: #A3F5BE;
  --secondaryDark: #061710;
  --moderate: #016B42;
  --navBG: #FFF;
  --textLight: #FFFFFF;
  --textDark: #061710;
  --textBlack: #000000;
  --titleLight: #FFFFFF;
  --titleDark: #061710;
  --buttonLight: #016B42;
  --buttonLightHover: #07965f;
  --buttonDark: #061710;
  --buttonDarkHover: #092218;
  --lightGray: #dadada;
  --navLinkActive: #da4214;
  --borderColor: #da4214;
  --accentColor: #9A2F0E;
  --lightAccentColor: #db6845;
  --heroBG: #062418;

  /* FONTS */
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.4vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(1rem, 7.82vw, 3rem) 1.5rem;
}

/************* GENERAL STYLES ************/
/*****************************************/
/* FONTS */
/* fontsquirrel */
@font-face {
  font-family: 'roboto';
  src:url('../assets/fonts/Roboto-Regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'roboto';
  src:url('../assets/fonts/Roboto-Italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'roboto';
  src:url('../assets/fonts/RobotoCondensed-Bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}



body {
  margin: 0;
  padding: 0;
  font-family: 'roboto';
  letter-spacing: 0.08em;
  
}

*, *:before, *:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

.title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0;
  color: var(--textDark);
  position: relative;
}

.text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--textDark);
}

.topper {
  text-transform: capitalize;
}

/************ UTILTIY CLASSES ************/
/*****************************************/
.it {
  font-style: italic;
}

.bld {
  font-weight: bolder;
}
.button-solid {
  font-size: 1.25rem;
  line-height: 3.5rem;
  text-decoration: none;
  font-weight: 700;
  overflow: hidden;
  margin: 0;
  color: #fff;
  padding: 0 3rem;
  border-radius: 1.875rem;
  background-color: var(--accentColor);
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.button-solid:before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 0%;
  background: var(--primaryDark);
  opacity: 1;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width 0.3s;
}
.button-solid:hover:before {
  width: 100%;
}
#button-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
}
#button-box .button-solid-boxed {
  text-align: center;
  font-size: 1rem;
  /* 46px - 56px */
  line-height: clamp(2.875em, 5.5vw, 3.5em);
  min-width: 10rem;
  text-decoration: none;
  font-weight: 600;
  border-radius: 2rem;
  /* clips corners of the before element */
  overflow: hidden;
  margin: 0;
  color: #fff;
  padding: 0;
  background-color: var(--accentColor);
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: color 0.3s
}
#button-box .button-transparent-boxed {
  font-size: 1rem;
  /* 46px - 56px */
  line-height: clamp(2.875rem, 5.5vw, 3.5rem);
  min-width: 10rem;
  /* 46px - 56px */
  height: clamp(2.875rem, 5.5vw, 3.5rem);
  text-decoration: none;
  font-weight: 600;
  margin: 0;
  color: var(--textLight);
  padding: 0;
  background-color: var(--accentColor);
  border-radius: 2rem;
  box-sizing: border-box;
  display: inline-bloc;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* #button-box .picture {
  width: clamp(2.875rem, 5.5vw, 3.5rem);
  height: clamp(2.875rem, 5.5vw, 3.5rem);
  margin-right: 0.5rem;
  background-color: var(--buttonDark);
  border-radius: 50%;
  border: 6px solid #FFF;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
#button-box .image {
  width: 0.75rem;
  height: auto;
} */

/* Dark Mode */
body.dark-mode #button-box .button-transparent-boxed {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #button-box .button-transparent-boxed:before {
  background-color: var(--accentColor);
}
body.dark-mode #button-box .picture {
  border-color: #fff;
}
body.dark-mode #button-box .icon {
  /* makes icons that are not black turn white */
  filter: grayscale(1) brightness(1000%);
}


/*********** DARK MODE TOGGLE ************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .sun {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  body.dark-mode #dark-mode-toggle .moon {
    opacity: 0;
    transform: translate(-50%, -150%);
  }
  #dark-mode-toggle {
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    display: block;
    order: 3;
    position: relative;
    z-index: 1000;
    overflow: hidden;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  #dark-mode-toggle .moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s;
  }
  #dark-mode-toggle .sun {
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, 100%);
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    margin: 0;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
  }
  #dark-mode-toggle:hover {
    cursor: pointer;
  }
}

/*********** MOBILE NAVIGATION ***********/
/*****************************************/
/* Mobile - 360PX */
@media only screen and (max-width: 63.9375rem) {
  body.open {
    overflow: hidden;
  }
  /* When scroll class is applied, this changes mobile nav position */
  body.scroll #navigation {
    width: 100%;
    max-width: 100%;
    top: 0;
  }
  body.scroll #navigation:before {
    border-radius: 0;
  }
  body.scroll #navigation .ul-wrapper {
    top: 100%;
  }
  #navigation {
    width: 90%;
    max-width: 80rem;
    background-color: var(--navBG);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem);
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    box-shadow: rgb(17, 17, 17) 0px 12px 26px 0px;
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #navigation:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--navBG);
    opacity: 1;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  #navigation.active:before {
    transform: translateX(-50%) scale(1.03);
  }
  #navigation.active .toggle {
    transform: rotate(180deg);
  }
  #navigation.active .ul-wrapper {
    transform: scaleY(1);
    transition-delay: 0.12s;
  }
  #navigation.active .li {
    opacity: 1;
    transform: translateY(0);
  }
  #navigation .container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.25rem;
  }
  #navigation .logo {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
  }
  #navigation .logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
    /* makes logo green */
    filter: invert(15%) sepia(49%) saturate(1269%) hue-rotate(117deg) brightness(89%) contrast(97%);
  }
  #navigation .toggle {
    width: 3rem;
    height: 3rem;
    margin: 0 0 0 auto;
    background-color: var(--secondaryDark);
    border: none;
    border-radius: 0.25rem;
    display: flex;
    order: 4;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: transform 0.6s;
  }
  #navigation .nav {
    /* sends it to the right in the 3rd position */
    order: 3;
  }
  #navigation .active .line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #navigation .active .line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #navigation .active .line3 {
    opacity: 0;
    bottom: 100%;
  }
  #navigation .box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
  }
  #navigation .line {
    width: 100%;
    height: 2px;
    background-color: var(--navBG);
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #navigation .line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #navigation .line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #navigation .line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #navigation .ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: var(--navBG);
    border-radius: 0 0 1.5rem 1.5rem;
    position: absolute;
    top: 85%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
  }
  #navigation .ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    overflow: auto;
  }
  #navigation .li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-70/16rem);
    transition: transform 0.6s, opacity 0.9s;
  }

  #navigation .li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #navigation .li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #navigation .li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #navigation .li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #navigation .li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #navigation .li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #navigation .li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #navigation .li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #navigation .li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #navigation .li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #navigation .li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #navigation .li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #navigation .li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #navigation .li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 2rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--textDark);
    display: inline-block;
    position: relative;
  }
  #navigation .li-link.active {
    color: var(--navLinkActive);
  }
  #navigation .button-solid {
    display: none;
  }
}
/* Tablet - 768PX */
@media only screen and (min-width: 48rem) {
  #navigation .contact-group {
    display: block;
  }
  #navigation .button-solid {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #navigation:before {
    background-color: var(--darkNavBG);
    box-shadow: rgba(132, 139, 146) 0px 10px 26px 0px;
  }
  body.dark-mode #navigation {
    background-color: var(--darkNavBG);
  }
  body.dark-mode #navigation .logo {
    /* makes it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #navigation .toggle {
    background-color: var(--darkModeAccent2);
  }
  body.dark-mode #navigation .line {
    background-color: #fff;
  }
}

/********** NAVIGATION DROPDOWN **********/
/*****************************************/
/* Mobile - 1023px */ 
@media only screen and (max-width: 63.9375rem) {
  #navigation .li {
    text-align: center;
    width: 100%;
    display: block;
    font-weight: bolder;
  }
  #navigation .dropdown {
    position: relative;
  }
  #navigation .dropdown.active .drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #navigation .dropdown.active .drop-link {
    opacity: 1;
  }
  #navigation .dropdown .li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #navigation .drop-icon {
    display: none;
  }
  #navigation .drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--navBG);
    opacity: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #navigation .drop-li {
    list-style: none;
  }
  #navigation .li-link.drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #navigation .dropdown:hover .drop-icon {
    transform: rotate(-90deg);
  }
  #navigation .dropdown {
    position: relative;
  }
  #navigation .dropdown:hover {
    cursor: pointer;
  }
  #navigation .dropdown:hover .drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #navigation .dropdown:hover .drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #navigation .drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
    filter: grayscale(1) brightness(20%);
    transition: transform 0.3s;
  }
  #navigation .drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: var(--navBG);
    opacity: 0;
    border-radius: 0 0 1.5rem 1.5rem;
    visibility: hidden;
    position: absolute;
    top: 100%;
    z-index: -100;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    transform-origin: top;
  }
  #navigation .drop-li {
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #navigation .drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #navigation .drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #navigation .drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #navigation .drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #navigation .drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #navigation .drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #navigation .drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #navigation .drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #navigation .drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #navigation .li-link.drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: var(--textDark);
    display: block;
    border-radius: 0px;
  }
  #navigation .li-link.drop-link:hover {
    color: var(--textLight);
    background-color: black;
  }
  #navigation .li-link.drop-link:before {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #navigation .ul-wrapper {
    background-color: var(--darkNavBG);
  }
  body.dark-mode #navigation .drop-ul {
    background-color: var(--darkNavBG);
  }
  body.dark-mode #navigation .li-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #navigation .drop-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #navigation .active {
    color: var(--darkModeAccent);
  }
}

/********** DESKTOP NAVIGATION ***********/
/*****************************************/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  body.scroll #navigation {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0;
  }
  #navigation {
    width: 94%;
    max-width: 90rem;
    height: 10rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem) 0;
    background-color: var(--navBG);
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    box-shadow: rgb(17, 17, 17) 0px 12px 26px 0px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #navigation .container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #navigation .toggle {
    display: none;
  }
  #navigation .logo {
    width: 19%;
    max-width: 21.875rem;
    height: auto;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 100;
  }
  #navigation .logo img {
    width: auto;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
    filter: invert(15%) sepia(49%) saturate(1269%) hue-rotate(117deg) brightness(89%) contrast(97%);
  }
  #navigation .ul-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    /* absolutely positioned to be dead center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #navigation .ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(0rem, 1.25vw, 3rem);
  }
  #navigation .li {
    list-style: none;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    /* prevent flexbox from squishing it */
    flex: none;
    font-weight: 800;
  }
  #navigation .li-link {
    font-size: var(--topperFontSize);
    line-height: 1.5em;
    text-decoration: none;
    padding: 0.6rem;
    color: #000;
    display: block;
    position: relative;
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  #navigation .li-link:hover {
    color: #6a6a6a;
  }
  #navigation .li-link.active {
    color: var(--navLinkActive);
  }
  #navigation .li-link.active:hover {
    color: #999999;
  }
}
/* Controls the "get started" nav button appearance at 1350px */
@media only screen and (min-width: 84.375rem) {
  #navigation .button-solid {
    font-size: 1.25rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    border-radius: 1.875rem;
    background-color: var(--accentColor);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
    cursor: pointer;
  }
  #navigation .button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: var(--primaryDark);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #navigation .button-solid:hover {
    color: #FFF;
  }
  #navigation .button-solid:hover:before {
    width: 100%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #navigation .social {
    display: flex;
  }
}
/* Dark Mode */
@media only screen and (min-width: 64rem) {
  body.dark-mode #navigation:before {
    background-color: var(--darkNavBG);
  }
  body.dark-mode #navigation {
    background-color: var(--darkNavBG);
    box-shadow: rgba(132, 139, 146) 0px 10px 26px 0px;
  }
  body.dark-mode #navigation .logo {
    /* makes it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #navigation .drop-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #navigation .ul-wrapper {
    background-color: var(--darkNavBG);
  }
  body.dark-mode #navigation .drop-ul {
    background-color: var(--darkNavBG);
  }
  body.dark-mode #navigation .li-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #navigation .drop-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #navigation .active {
    color: var(--darkModeAccent);
  }


}

/************** BANNER *******************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #banner {
        /* 175px - 260px top */
        padding: clamp(10.9375rem, 20vw, 16.25rem) 1rem clamp(6.25rem, 14vw, 12vw);
        /* clips svg wave from causing overflow issues */
        overflow: hidden;
        position: relative;
        z-index: 1;
  }
  #banner .container {
        text-align: center;
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
  }
  #banner .int-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        padding: 1.25rem;
        color: var(--textLight);
        position: relative;
  }
  #banner .background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
  }
  #banner .background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: var(--primaryDark);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: 1;
  }
  #banner .wave {
        /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
        width: 48rem;
        height: auto;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        z-index: -1;
  }
  #banner .wave path {
    fill: #fff;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #banner .wave {
        width: 100%;
        left: 0;
        transform: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #banner .int-title{
    padding: clamp(2.75rem, 25vw ,3rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #banner .background:before {
    /* background color overlay */  
    background: var(--darkBanner);
  }
  body.dark-mode #banner .wave path {
    fill: var(--dark);
  }
}

/**************** CTA ********************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta .background {
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta .background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.75;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta .background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    /* positions the image inside the parent */
    object-position: 0% 30%;
  }
  #cta .container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta .content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    gap: 1rem;
  }
  #cta .title,
  #cta .text,
  #cta .topper {
    color: var(--bodyTextColorWhite);
  }
  #cta .text {
    opacity: 0.8;
    margin-bottom: 1rem;
  }
  #cta .text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta .button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #000;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta .button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #cta .button-solid:hover:before {
    width: 100%;
  }
  #cta .button-d {
    display: none;
  }
  #button-box {
    display: flex;
    flex-direction: row;
    /* centers content horizontally, set to flex-start to left align */
    justify-content: center;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta .button-solid-boxed, #cta .button-transparent-boxed {
    display: none;
  }
  #cta .button-d {
    display: block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cta .background:before {
    /* background color overlay */
    background: #030303;
    opacity: 0.85;
  }
}

/**************** FOOTER *****************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
    
  }
  #footer .container {
    width: 100%;
    /* reset on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2.5rem;
  }
  #footer .logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #footer .logo {
    width: 11.125rem;
    height: auto;
    display: block;
    margin-bottom: 1.5rem;
  }
  #footer .logo-img {
    width: 100%;
    height: auto;
    filter: invert(100%) sepia(0%) saturate(1269%) hue-rotate(117deg) brightness(100%) contrast(100%);
  }
  #footer .logo-img.dark {
    display: none;
  }
  #footer .text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    width: 78%;
    /* changes to 305px at desktop */
    max-width: 26.25rem;
    color: var(--textLight);
  }
  #footer .nav {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }
  #footer .nav-li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #footer .header {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--textLight);
    position: relative;
    display: block;
  }
  #footer .nav-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    color: var(--textLight);
    position: relative;
    display: inline-block;
    transition: color 0.3s;
  }
  #footer .nav-link:before {
    /* underline */
    content: "";
    width: 0%;
    height: 0.125rem;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #footer .nav-link:hover {
    color: var(--buttonLightHover);
  }
  #footer .nav-link:hover:before {
    width: 100%;
  }
  #footer .icon {
    width: 1.5rem;
    height: auto;
    margin-right: 0.75rem;
  }
  #footer .bottom {
    max-width: 80rem;
    margin: auto;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #484848;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #footer .copyright,
  #footer .copyright-link {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--textLight);
  }
  #footer .copyright-link {
    text-decoration: none;
    transition: color 0.3s;
  }
  #footer .copyright-link:hover {
    color: var(--buttonLightHover);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer .container {
    row-gap: 0;
    flex-direction: row;
    justify-content: space-between;
    row-gap: 2.5rem;
  }
  #footer .nav {
    width: auto;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #footer .container {
    max-width: 80rem;
    flex-wrap: nowrap;
    /* align everything to the right */
    justify-content: flex-end;
    column-gap: 5.25rem;
  }
  #footer .logo-group {
    width: 30%;
    max-width: 24.1875rem;
    /* pushes away from everything to the right */
    margin-right: auto;
  }
  #footer .text {
    width: 100%;
  }
}


/* DEBUGGING */