:root {
  --color-primary: rgb(0, 49, 98);
  --color-light-grey: rgb(237, 238, 239);
  --color-secondary:  rgb(198, 175, 144);
}

html {
  scroll-behavior: smooth;
}

.container-fluid {
  padding: 0;
}

.bat-header {
  margin-top: 10rem;
  & h1 {
    text-align: center;
    font-size: 3rem;
    padding: 0 10vmin;
  }

  & .description {
    padding: 0 10vmin;
    margin-top: 2rem;
    font-size: 1.2rem;
    line-height: 150%;
  }

  img {
    width: 100%;
    height: auto;
  }
}

.bat-contact-form {
  background-color: var(--color-primary);
  color: white;
  padding: 1rem;

  & h2,
  & a {
    color: white;
  }

  & h2 {
    font-size: 3rem;
    margin: 3rem;
  }

  & h2,
  p {
    text-align: center;
  }

  p {
    font-size: 1.3rem;
  }

  .gform_wrapper.gravity-theme {
    max-width: 80rem;
    margin: auto;

    & legend.gfield_label {
      display: none;
    }

    & input[type="text"],
    & input[type="email"],
    & input[type="tel"],
    & textarea {
      background-color: rgb(255, 255, 255, 0.2);
      border: 0;
      border-radius: 0;
      padding: 1.5rem 1rem;
      color: white;
    }

    & .name_first,
    & .name_last {
      display: flex;
      flex-flow: column;

      & input {
        order: 2;
      }

      & label {
        order: 1;
      }
    }

    & .gform-footer {
      justify-content: center;
    }

    & .gform_button.button,
    & .gform_button_select_files {
      background-color: white;
      color: var(--color-primary);
      border-radius: 10rem;
      text-transform: uppercase;
      background-image: none;
      padding: 0.8rem 2.5rem 0.7rem 2.5rem;
      letter-spacing: 0.2ch;
    }
  }
}
.bat-contact-form-skip {
  background-color: var(--color-primary);
  color: white;
  padding: 2rem;
  text-align: center;

  .button {
    background-color: white;
    color: var(--color-primary);
    border-radius: 10rem;
    text-transform: uppercase;
    background-image: none;
    padding: 0.8rem 2.5rem 0.7rem 2.5rem;
    letter-spacing: 0.2ch;
    display: inline-block;
    border: 0.1rem solid white;

    &:hover {
      color: white;
      background-color: var(--color-primary);
    }
  }
}

.bat-main-video {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 10vmin;

  & iframe {
    aspect-ratio: 1.7;
    width: auto;
    height: auto;
    max-height: 70vh;
  }
}

.bat-panes {
  display: grid;
  grid-template-columns: 5vw repeat(12, 1fr) 5vw;
  gap: 2.5vw;
  background-color: var(--color-light-grey);
  padding: 2.5vw 0;

  & .pane {
    grid-column-start: 2;
    grid-column-end: -2;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto;

    & > h2 {
      font-size: 2.5rem;
      line-height: 1.1em;
    }

    & > h2,
    & > .details {
      grid-column-start: 1;
      grid-column-end: 6;
      grid-row: 1 / 1;
      align-self: end;
    }

    & > .details {
      grid-row: 2 / 2;
      align-self: start;
      font-size: 1.2rem;
      line-height: 2em;

      & p {
        font-size: 1.2rem;
        line-height: 1.5em;
      }

      & li {
        line-height: 1.5em;
      }
    }

    & > .video-embed {
      grid-column-start: 6;
      grid-column-end: -1;
      grid-row: 1 / span 2;
      aspect-ratio: 1000;
      align-self: center;
    }

    &:nth-child(even) {
      & > h2,
      & > .details {
        grid-column-start: 7;
        grid-column-end: -1;
      }

      & > .video-embed {
        grid-column-start: 1;
        grid-column-end: 7;
      }
    }
  }
}

.bat-cta {
  background-color: var(--color-light-grey);
  text-align: center;
  padding: 10rem;

  & h2 {
    margin: 0;
    font-size: 3rem;
  }

  & .cta-button {
    color: white;
    background-color: var(--color-primary);
    border-radius: 10rem;
    text-transform: uppercase;
    background-image: none;
    padding: 0.8rem 2.5rem 0.7rem 2.5rem;
    letter-spacing: 0.2ch;
    display: inline-block;
    margin-top: 2rem;
  }
}

.bat-footer {
  display: grid;
  grid-template-columns: 5vw repeat(12, 1fr) 5vw;
  padding: 5rem 0;

  & .footer-images {
    display: contents;

    & > * {
      grid-row-end: span 3;

      &:nth-child(1),
      &:nth-child(3) {
        grid-column-start: 2;
        grid-column-end: span 2;
      }

      &:nth-child(2),
      &:nth-child(4) {
        grid-column-start: 4;
        grid-column-end: span 2;
      }

      &:nth-child(5) {
        grid-column: 6 / span 4;
        grid-row-end: auto;
        grid-row: 2 / 7;
      }
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  & .title {
    font-size: 3rem;
    grid-column: 10 / span 4;

    &.first {
      grid-row: 1 / 2;
    }
    
    &.second {
      grid-row: 2 / 3;
      justify-self: right;
    }
  }

  & .subtitle {
    grid-column: 10 / span 4;
    font-size: ;
    grid-row: 3 / 4;
    color: var(--color-secondary);
    text-transform: none;
    font-style: italic;
    font-size: 3.8rem;
  }

  & .description {
    grid-column: 10 / span 4;
  }

  & .cta-button {
    background-color: white;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 10rem;
    text-transform: uppercase;
    background-image: none;
    padding: 0.8rem 2.5rem 0.7rem 2.5rem;
    letter-spacing: 0.2ch;
    display: inline-block;
    align-self: center;
    justify-self: start;
    grid-column-start: 10;
    grid-column-end: span 4;
  }

  & .social-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.7rem;
    grid-column-start: 10;
    grid-column-end: span 4;


    & li {
      margin: 0;
      padding: 0;

      & a {
        background-color: var(--color-primary);
        color: white;
        border-radius: 10rem;
        display: inline-block;
        aspect-ratio: 1;
        width: 1.6em;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
      }
    }
  }
}

@media (max-width: 767px) {
  .bat-template {
    & h1, h2 {
      line-height: 1em;
    }
  }

  .bat-header {
    margin-top: 1rem;
  }

  .bat-panes {
    display: block;

    & .pane {
      display: flex;
      flex-flow: column wrap;

      & > h2,
      & > .details {
        padding: 1rem;
        line-height: 1.5em;
      }

      & > h2 {
        font-size: 2rem;
        padding-bottom: 0;
        order: 1;
      }

      & > .video-embed {
        align-self: normal;
      }

      & > .details {
        order: 3;
      }
    }
  }

  .bat-cta {
    padding: 5vw;
    
    & h2 {
      font-size: 2rem;
    }
  }

  .bat-footer {
    grid-template-columns: 5vw repeat(12, 1fr) 5vw;
    padding: 5rem 0;

    & .footer-images {
      display: contents;

      & > * {
        grid-row-end: span 1;

        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          grid-column-start: auto;
          grid-column-end: span 3;
        }

        &:nth-child(1) {
          grid-column-start: 2;
        }

        &:nth-child(5) {
          grid-column: 6 / span 4;
          grid-row-end: auto;
          grid-row: 2 / 7;
        }
      }

      & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    & .title {
      font-size: 2rem;
      grid-column: 2 / -2;

      &.first {
        grid-row: auto;
      }
      
      &.second {
        grid-row: auto;
        justify-self: center;
      }
    }

    & .subtitle {
      grid-column: 2 / -2;
      grid-row: auto;
      font-size: 1.8rem;
    }

    & .description {
      grid-column: 2 / -2;
      margin-bottom: 1rem;
    }

    & .cta-button {
      align-self: center;
      justify-self: center;
      grid-column-start: 2;
      grid-column-end: -2;
    }

    & .social-links {
      margin-top: 1rem;
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 0.7rem;
      grid-column: 2 / -2;
      justify-content: space-between;

      & li {
        margin: 0;
        padding: 0;

        & a {
          background-color: var(--color-primary);
          color: white;
          border-radius: 10rem;
          display: inline-block;
          aspect-ratio: 1;
          width: 1.6em;
          display: flex;
          flex-flow: row wrap;
          justify-content: center;
          align-items: center;
          font-size: 2rem;
        }
      }
    }
  }
}