/******************************************
/* BASE STYLES
/*******************************************/

html {
     scroll-behavior: smooth;
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #1e2d59;
    --primaryLight: #a4adbf;
    --secondary: #A0E3F2;
    --secondaryLight: #a4adbf;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.nd-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

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

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


/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.nd-open {
    overflow: hidden;
  }
  #nd-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #nd-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #nd-navigation.nd-active:before {
    height: 150vh;
    opacity: 1;
  }
  #nd-navigation.nd-active .nd-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #nd-navigation.nd-active .nd-li {
    opacity: 1;
    transform: translateY(0);
  }
  #nd-navigation .nd-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #nd-navigation .nd-logo {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #nd-navigation .nd-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;
  }
  #nd-navigation .nd-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #nd-navigation .nd-active .nd-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #nd-navigation .nd-active .nd-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #nd-navigation .nd-active .nd-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #nd-navigation .nd-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #nd-navigation .nd-line {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #nd-navigation .nd-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;
  }
  #nd-navigation .nd-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;
  }
  #nd-navigation .nd-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #nd-navigation .nd-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #nd-navigation .nd-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.25rem;
    overflow: auto;
  }
  #nd-navigation .nd-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #nd-navigation .nd-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #nd-navigation .nd-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #nd-navigation .nd-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #nd-navigation .nd-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #nd-navigation .nd-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #nd-navigation .nd-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #nd-navigation .nd-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #nd-navigation .nd-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #nd-navigation .nd-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #nd-navigation .nd-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #nd-navigation .nd-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #nd-navigation .nd-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #nd-navigation .nd-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #nd-navigation .nd-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #nd-navigation .nd-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #nd-navigation .nd-li-link.nd-active:before {
    display: block;
  }
  #nd-navigation .nd-button-solid {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #nd-navigation .nd-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #nd-navigation .nd-dropdown {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #nd-navigation .nd-dropdown.nd-active .nd-drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #nd-navigation .nd-dropdown.nd-active .nd-drop-link {
    opacity: 1;
  }
  #nd-navigation .nd-dropdown .nd-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #nd-navigation .nd-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #nd-navigation .nd-drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--primary);
    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;
  }
  #nd-navigation .nd-drop-li {
    list-style: none;
  }
  #nd-navigation .nd-li-link.nd-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #nd-navigation .nd-dropdown {
    position: relative;
  }
  #nd-navigation .nd-dropdown:hover,
  #nd-navigation .nd-dropdown:focus-within {
    cursor: pointer;
  }
  #nd-navigation .nd-dropdown:hover .nd-drop-ul,
  #nd-navigation .nd-dropdown:focus-within .nd-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #nd-navigation .nd-dropdown:hover .nd-drop-li,
  #nd-navigation .nd-dropdown:focus-within .nd-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #nd-navigation .nd-drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #nd-navigation .nd-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    opacity: 0;
    border-bottom: 5px solid var(--primary);
    visibility: hidden;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the nd-drop-li so they don't have weird scattered animations */
    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;
  }
  #nd-navigation .nd-drop-li {
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    color: var(--bodyTextColor);
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #nd-navigation .nd-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #nd-navigation .nd-li-link.nd-drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #nd-navigation .nd-li-link.nd-drop-link:hover,
  #nd-navigation .nd-li-link.nd-drop-link:focus {
    background-color: #f7f7f7;
    outline: none;
  }
  #nd-navigation .nd-li-link.nd-drop-link:before {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #nd-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #nd-navigation .nd-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #nd-navigation .nd-toggle {
    display: none;
  }
  #nd-navigation .nd-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 4.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #nd-navigation .nd-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;
  }
  #nd-navigation .nd-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #nd-navigation .nd-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #nd-navigation .nd-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #nd-navigation .nd-li-link:hover:before {
    width: 100%;
  }
  #nd-navigation .nd-li-link.nd-active:before {
    width: 100%;
  }
  #nd-navigation .nd-li-link:before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  #nd-navigation .nd-button-solid {
    font-size: 1rem;
    /* font-weight: 700; */
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #nd-navigation .nd-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    /* background: #000; */
    background: black;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #nd-navigation .nd-button-solid:hover:before {
    width: 100%;
  }
}
                                
                            
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero {
        /* Centers button */
        text-align: center;
        /* 144px - 300px - leaving extra space for the navigation */
        padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
        /* 130px - 200px */
        padding-bottom: clamp(8.125rem, 12.5vw, 25em);
        position: relative;
        z-index: 1;
    }
    #hero .nd-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
    }
    #hero .nd-background:before {
        /* Overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.6;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
        /* prevents the cursor from interacting with it */
        pointer-events: none;
    }
    #hero .nd-background video {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #hero .nd-container {
        width: 100%;
        max-width: 67.5rem;
        margin: auto;
    }
    #hero .nd-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        /* font-weight: 700; */
        font-weight: normal;
        line-height: 1.2em;
        text-align: center;
        max-width: 51.8125rem;
        /* 16px - 24px */
        margin: 0 auto clamp(1rem, 4vw, 1.5rem);
        color: #fff;
        position: relative;
    }
    #hero .nd-title:after {
        /* Divider Line */
        content: "";
        width: 6.25rem;
        height: 0.5rem;
        /* 16px - 24px */
        margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
        background: var(--primary);
        opacity: 1;
        position: relative;
        display: block;
    }
    #hero .nd-text {
        /* 16px - 25px */
        font-size: clamp(1rem, 1.95vw, 1.5625rem);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        /* 464px - 800px */
        max-width: clamp(29rem, 60vw, 50rem);
        margin: 0 auto;
        /* 40px - 48px */
        margin-bottom: clamp(2.5rem, 4vw, 3rem);
        color: #fff;
    }
    #hero .nd-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        /* font-weight: 700; */
        margin: auto;
        color: #fff;
        padding: 0 1.5rem;
        /* background-color: var(--primary); */
        background-color: transparent;
        border: #fff solid 0.25rem;
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
    }
    #hero .nd-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #hero .nd-button-solid:hover:before {
        width: 100%;
    }
}

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services2,
  #services3,
  #services4,
  #services1, 
  #services5 {
      padding: var(--sectionPadding);
      background-color: #f7f7f7;
  }
  #services2 .nd-container,
  #services3 .nd-container,
  #services4 .nd-container,
  #services1 .nd-container, 
  #services5 .nd-container{
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services2 .nd-content,
  #services3 .nd-content,
  #services4 .nd-content,
  #services1 .nd-content, 
  #services5 .nd-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 33.875rem;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #services2 .nd-text,
  #services3 .nd-text,
  #services4 .nd-text,
  #services1 .nd-text, 
  #services5 .nd-text {
      margin-bottom: 1rem;
  }
  #services2 .nd-text:last-of-type,
  #services3 .nd-text:last-of-type,
  #services4 .nd-text:last-of-type,
  #services1 .nd-text:last-of-type, 
  #services5 .nd-text:last-of-type {
      margin-bottom: 2rem;
  }
  #services2 .nd-button-solid,
  #services3 .nd-button-solid,
  #services4 .nd-button-solid,
  #services1 .nd-button-solid, 
  #services5 .nd-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: #fff;
      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;
  }
  #services2 .nd-button-solid:before,
  #services3 .nd-button-solid:before,
  #services4 .nd-button-solid:before,
  #services1 .nd-button-solid:before, 
  #services5 .nd-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #services2 .nd-button-solid:hover:before,
  #services3 .nd-button-solid:hover:before,
  #services4 .nd-button-solid:hover:before,
  #services1 .nd-button-solid:hover:before, 
  #services5 .nd-button-solid:hover:before {
      width: 100%;
  }
  #services2 .nd-picture,
  #services3 .nd-picture,
  #services4 .nd-picture,
  #services1 .nd-picture, 
  #services5 .nd-picture {
      width: 95%;
      max-width: 34.375rem;
      margin: 0;
      position: relative;
      display: block;
      /* width divided by height */
      aspect-ratio: 0.93134328;
      border-radius: 1rem;
      z-index: 1;
  }

  #services2 .nd-picture img,
  #services3 .nd-picture img,
  #services4 .nd-picture img,
  #services1 .nd-picture img, 
  #services5 .nd-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      border-radius: 1rem;
  }

   /* ADDED TO FIT WHOLE IMAGE FOR NOW  */
  /* #services1 .nd-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: contain;
      border-radius: 1rem;
  } */

}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services2 .nd-container,
  #services3 .nd-container,
  #services4 .nd-container,
  #services1 .nd-container, 
  #services5 .nd-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: flex-start;
      /* 60px - 128px */
      gap: clamp(3.75rem, 9.5vw, 8rem);
  }
  #services2 .nd-picture,
  #services3 .nd-picture,
  #services4 .nd-picture,
  #services1 .nd-picture, 
  #services5 .nd-picture {
      /* 328px - 502px */
      width: clamp(20.5rem, 37.5vw, 31.375rem);
      /* 440px - 520px */
      height: clamp(27.5rem, 40vw, 32.5rem);
      /* 16px - 20px */
      margin: 0 0 0 clamp(1rem, 5vw, 1.25rem);
      flex: none;
  }
  #services2 .nd-content,
  #services3 .nd-content,
  #services4 .nd-content,
  #services1 .nd-content, 
  #services5 .nd-content{
      width: 45%;
      margin: 0;
  }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services3, 
  #services1, 
  #services5 {
      background-color: white;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services3 .nd-container,
  #services1 .nd-container, 
  #services5 .nd-container {
      justify-content: flex-end;
  }
  #services3 .nd-picture ,
  #services1 .nd-picture , 
  #services5 .nd-picture {
      /* 16px - 20px */
      margin-right: clamp(1rem, 5vw, 1.25rem);
      /* forces it to the left */
      order: 2;
  }
}

/*-- -------------------------- -->
<---       Applications         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #applications-section {
      padding: var(--sectionPadding);
      background-color: #f7f7f7;
  }
  #applications-section .nd-container {
      width: 100%;
      /* changes to 1280px at large desktop */
      max-width: 59rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #applications-section .nd-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #applications-section .nd-topper {
      color: var(--primary);
  }
  #applications-section .nd-title {
      margin: 0;
  }
  #applications-section .nd-gallery {
      width: 100%;
      /* changes to 100% at tablet */
      max-width: 31.25rem;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #applications-section .nd-image {
      /* 260px - 360px */
      min-height: clamp(16.25rem, 60vw, 20rem);
      border-radius: 1rem;
      /* clips the image corners */
      overflow: hidden;
      display: block;
      grid-column: span 12;
      grid-row: span 1;
      position: relative;
  }
  #applications-section .nd-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it act like a background image */
      object-fit: cover;
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
  #applications-section .nd-gallery {
      max-width: 100%;
      grid-template-rows: 1fr;
  }
  #applications-section .nd-image {
      grid-column: span 4;
  }
  #applications-section .nd-image:nth-of-type(4),
  #applications-section .nd-image:nth-of-type(5) {
      grid-column: span 6;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #applications-section .nd-container {
      max-width: 80rem;
  }
  #applications-section .nd-gallery {
      grid-template-columns: repeat(5, 1fr);
  }
  #applications-section .nd-image {
      grid-column: span 1;
  }
  #applications-section .nd-image:nth-of-type(4),
  #applications-section .nd-image:nth-of-type(5) {
      grid-column: span 1;
  }
}

#applications-section .nd-image-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: rgba(30, 45, 89, 0.6);
  color: white;
  padding: 0.5rem;
  font-size: 1rem;
}


/*-- -------------------------- -->
<---          Sensors           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sensors-section {
      padding: var(--sectionPadding);
  }
  #sensors-section .nd-container {
      width: 100%;
      /* changes to 1280px at large desktop */
      max-width: 59rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #sensors-section .nd-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #sensors-section .nd-topper {
      color: var(--primary)
  }
  #sensors-section .nd-title {
      margin: 0;
  }
  #sensors-section .nd-gallery {
      width: 100%;
      /* changes to 100% at tablet */
      max-width: 31.25rem;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #sensors-section .nd-image {
      /* 260px - 360px */
      min-height: clamp(16.25rem, 60vw, 20rem);
      border-radius: 1rem;
      /* clips the image corners */
      overflow: hidden;
      display: block;
      grid-column: span 12;
      grid-row: span 1;
      position: relative;
  }
  #sensors-section .nd-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it act like a background image */
      object-fit: cover;
  }
}
/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
  #sensors-section .nd-gallery {
      max-width: 100%;
      grid-template-rows: 1fr;
  }
  #sensors-section .nd-image {
      grid-column: span 6;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #sensors-section .nd-container {
      max-width: 80rem;
  }
  #sensors-section .nd-gallery {
      grid-template-columns: repeat(4, 1fr);
  }
  #sensors-section .nd-image {
      grid-column: span 1;
  }
}

#sensors-section .nd-image-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: rgba(30, 45, 89, 0.6);
  color: white;
  padding: 0.5rem;
  font-size: 1rem;
}
               
/*-- -------------------------- -->
<---           Blog             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-section {
      padding: var(--sectionPadding);
      background-color: #f2f2f2;
  }
  #blog-section .nd-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #blog-section .nd-content {
      /* set text align to left if content needs to be left aligned */
      /* text-align: center; */
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      /* align-items: center; */
      align-items: flex-start;
  }

  #blog-section .nd-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 1.6vw, 1.25rem);
  }
  #blog-section .nd-item {
      list-style: none;
      width: 100%;
      max-width: 31.25rem;
      border-radius: 0.5rem;
      position: relative;
      z-index: 1;
      transition:
          box-shadow 0.3s,
          transform 0.3s;
      background-color: #fff;
  }
  #blog-section .nd-item:hover {
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      transform: translateY(-0.4375rem);
  }
  #blog-section .nd-item:hover .nd-picture img {
      /* opacity: 0.3; */
      transform: scale(1.1);
  }
  #blog-section .nd-item:hover .nd-h3 {
      color: var(--primaryLight);
  }
  #blog-section .nd-item:before {
      /* border, done in pseudo so it can sit under the picture */
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 0.5rem;
      border: 1px solid #e8e8e8;
      /* prevents border from affecting height and width */
      box-sizing: border-box;
      background: transparent;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #blog-section .nd-link {
      text-decoration: none;
      /* 16px - 24px */
      padding-bottom: clamp(1rem, 2.2vw, 1.5rem);
      display: block;
  }
  #blog-section .nd-picture {
      width: 100%;
      height: 15rem;
      /* 16px - 24px */
      margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
      border-radius: 0.5rem 0.5rem 0 0;
      background-color: var(--primaryLight);
      /* clips the img tag corners */
      overflow: hidden;
      display: block;
      position: relative;
      z-index: 10;
  }
  #blog-section .nd-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition:
          transform 0.6s,
          opacity 0.3s;
  }
  #blog-section .nd-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 3vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: 700;
      color: var(--headerColor);
      margin: 0 0 0.75rem 0;
      /* 16px - 24px */
      padding: 0 clamp(1rem, 2vw, 1.5rem);
      transition: color 0.3s;
  }
  #blog-section .nd-item-text {
      /* 14px - 16px  */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      color: var(--bodyTextColor);
      margin: 0;
      /* 16px - 24px */
      padding: 0 clamp(1rem, 2.2vw, 1.5rem);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #blog-section .nd-card-group {
      flex-direction: row;
      flex-wrap: wrap;
  }
  #blog-section .nd-item {
      /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We don't use grid because if you have an odd number of cards, they don't stay centered, they align with their grid lines. This way its more FLEX-ible*/
      width: clamp(31.85%, 30.5vw, 32.28%);
  }
}

/*-- -------------------------- -->
<---          Events            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #events-section {
      padding: var(--sectionPadding);
      /* background-color: #fffbef; */
      position: relative;
      z-index: 1;
  }
  #events-section .nd-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 49rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #events-section .nd-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #events-section .nd-title {
      /* max width of 18 characters, incldues spaces between words */
      max-width: 20ch;
  }
  
  #events-section .nd-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1.25rem;
  }
  #events-section .nd-item {
      text-align: left;
      list-style: none;
      border-radius: 1rem;
      overflow: hidden;
      background-color: #f7f7f7;
      border: 1px solid #e8e8e8;
      grid-column: span 12;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      z-index: 1;
      transition:
          box-shadow 0.3s,
          transform 0.3s;
  }
  #events-section .nd-item:hover {
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #events-section .nd-item:hover .nd-picture img {
      /* opacity: 0.3; */
      transform: scale(1.1);
  }
  #events-section .nd-picture {
      width: 100%;
      height: 15rem;
      /* background-color: var(--primaryLight); */
      border-bottom: 4px solid var(--primary);
      overflow: hidden;
      display: block;
      /* prevents flexbox from squishing it */
      flex: none;
      position: relative;
      z-index: 1;
  }
  #events-section .nd-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition:
          transform 0.6s,
          opacity 0.3s;
  }
  #events-section .nd-flex {
      height: 100%;
      padding: 1.5rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      z-index: 2;
  }
  #events-section .nd-date {
      font-size: 1rem;
      line-height: 1.2em;
      /* font-weight: 700; */
      text-align: inherit;
      margin: 0;
      padding: 0.5rem 1rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      background-color: var(--primary);
      border-radius: 0.5rem 0.5rem 0 0;
      color: #fff;
      display: inline-block;
      position: absolute;
      left: 1.5rem;
      bottom: 100%;
      z-index: 2;
  }
  #events-section .nd-h3 {
      font-size: 1.25rem;
      text-align: inherit;
      line-height: 1.2em;
      font-weight: 700;
      color: var(--headerColor);
      margin: 0 0 0.75rem 0;
      transition: color 0.3s;
  }
  #events-section .nd-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: inherit;
      margin: 0 0 1.25rem;
      color: var(--bodyTextColor);
  }
  #events-section .nd-link {
      font-size: 1rem;
      line-height: 1.2em;
      font-weight: 700;
      text-decoration: none;
      margin-top: auto;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #events-section .nd-link:hover .nd-arrow {
      transform: translateX(0.25rem);
  }
  #events-section .nd-arrow {
      width: 1.25rem;
      height: auto;
      transition: transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #events-section .nd-container {
      max-width: 80rem;
  }
  #events-section .nd-content {
      text-align: left;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
  }
  #events-section .nd-title {
      margin: 0;
  }
  #events-section .nd-item {
      grid-column: span 4;
  }
}                           
 
/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer {
      padding: var(--sectionPadding);
      background-color: #1a1a1a;
      /* Navigation Links */
  }
  #footer .nd-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 .nd-logo-group {
      /* takes up all the space, lets the other ul's wrap below it */
      width: 100%;
      position: relative;
  }
  #footer .nd-logo {
      width: 11.125rem;
      height: auto;
      display: block;
      margin-bottom: 1.5rem;
  }
  #footer .nd-logo-img {
      width: 100%;
      height: auto;
  }
  #footer .nd-logo-img.dark {
      display: none;
  }
  #footer .nd-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(--bodyTextColorWhite);
  }
  #footer .nd-nav {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      gap: 0.75rem;
  }
  #footer .nd-nav-li {
      list-style: none;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
  }
  #footer .nd-header {
      font-size: 1rem;
      line-height: 1.2em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 0.75rem;
      color: var(--bodyTextColorWhite);
      position: relative;
      display: block;
  }
  #footer .nd-nav-link {
      font-size: 1rem;
      text-decoration: none;
      line-height: 1.5em;
      color: var(--bodyTextColorWhite);
      position: relative;
      display: inline-block;
      transition: color 0.3s;
  }
  #footer .nd-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 .nd-nav-link:hover {
      color: var(--primary);
  } */
  #footer .nd-nav-link:hover:before {
      width: 100%;
  }
  #footer .nd-icon {
      width: 1.5rem;
      height: auto;
      margin-right: 0.75rem;
  }
  #footer .nd-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 .nd-copyright,
  #footer .nd-copyright-link {
      font-size: 1rem;
      line-height: 1.5em;
      color: var(--bodyTextColorWhite);
  }
  #footer .nd-copyright-link {
      text-decoration: none;
      transition: color 0.3s;
  }
  #footer .nd-copyright-link:hover {
      color: var(--primary);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer .nd-container {
      row-gap: 0;
      flex-direction: row;
      justify-content: space-between;
      row-gap: 2.5rem;
  }
  #footer .nd-nav {
      width: auto;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #footer .nd-container {
      max-width: 80rem;
      flex-wrap: nowrap;
      /* align everything to the right */
      justify-content: flex-end;
      column-gap: 5.25rem;
  }
  #footer .nd-logo-group {
      width: 30%;
      max-width: 24.1875rem;
      /* pushes away from everything to the right */
      margin-right: auto;
  }
  #footer .nd-text {
      width: 100%;
  }
}       

/******************************************
/* ADDITIONAL STYLES
/*******************************************/