:root {
      --skydrone-blue: #5b94c1;
      --deep-navy: #1a2a3a;
      --gunmetal: #333333;   
    }

    @font-face {
    font-family: 'Microgramma';
    /* Make sure the path below matches where you put your file */
    src: url('fonts/Microgramma\ D\ Extended\ Medium.otf');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'Skydrone';
    /* Make sure the path below matches where you put your file */
    src: url('fonts/Conthrax-SemiBold.otf');
    font-weight: normal;
    font-style: normal;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgb(16, 76, 74);
    }

    .banner {
      display: flex;
      flex-direction:column;
      background-color: var(--deep-navy);
      color: white;
      width: 100vw;

    }

    .banner img {
      max-width: 350px;
      padding: 18px;
    }
    
    .container-2 {
      display: flex;
      
    }

    .heading {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
      align-items: center;
      justify-content: space-evenly;
      background-image: url("images/heading-image-4.jpg");
      background-size: cover;
    }

    .heading-2 {
      display: flex;
      flex-direction: column;
      background-color: var(--deep-navy);
      height: 20vh;
      width: 100vw;
      align-items: center;
      justify-content: space-evenly;
    }

    @keyframes logo-bump{
      0% {
        filter: drop-shadow(10px 10px 10px rgb(255, 255, 255, 0.4)) drop-shadow(-10px -10px 10px rgb(255, 255, 255, 0.4)) drop-shadow(0 0 15px rgb(255, 255, 255, 1));
      }
      50% {
        filter: drop-shadow(25px 25px 20px rgb(255, 255, 255, 0.6)) drop-shadow(-25px -25px 20px rgb(255, 255, 255, 0.6)) drop-shadow(0 0 15px rgb(255, 255, 255, 1));
        transform: scale(1.1)
      }
      100% {
        filter: drop-shadow(10px 10px 10px rgb(255, 255, 255, 0.4)) drop-shadow(-10px -10px 10px rgb(255, 255, 255, 0.4)) drop-shadow(0 0 15px rgb(255, 255, 255, 1));
      }
    }

    #logo-main {
      color: white;
      font-size: larger;
      width: 60%;         /* It will try to take up 60% of the screen width */
      max-width: 800px;   /* But it will NEVER go larger than 800px, even on 4K */
      height: auto;       /* Keeps the proportions correct */
      filter: drop-shadow(10px 10px 10px rgb(255, 255, 255, 0.4)) drop-shadow(-10px -10px 10px rgb(255, 255, 255, 0.4)) drop-shadow(0 0 15px rgb(255, 255, 255, 1));
      transition: transform 0.3s ease-in-out;
      }

    #logo-main:hover {
      animation: logo-bump normal 1.73s ease-in-out;
    }

    h2 {
      color: var(--skydrone-blue);
      font-size: 50px;
      text-shadow: 4px 4px 4px black;
    }

    .custom-jumbo-1 {
      color: var(--skydrone-blue);
      align-items: center;
      justify-content: space-evenly;
      text-align: center;
      background-color: var(--deep-navy);
      padding: 25px;
      border-radius: 12px;
      box-shadow: 4px 4px 16px black;
      border: double 8px var(--skydrone-blue);
    }

    .custom-jumbo-2 {
      align-items: center;
      justify-content: space-evenly;
      text-align: center;
      background-color: rebeccapurple;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 4px 4px 16px black;
      border: double 8px white;
      color: #1a2a3a;
    }

    .custom-jumbo-3 {
      align-items: center;
      justify-content: space-evenly;
      text-align: center;
      background-color: goldenrod;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 4px 4px 16px black;
      border: double 8px white;
      color: #1a2a3a;
    }

    .jumbotron h2 {
      color: white;
    }

    .button-container {
      display: flex;
      gap: 30px;
    }

    .custom-btn-1 {
      display: flex;
      background-color: var(--skydrone-blue);
      border: white 2px solid;
      transition: 0.5s ease-in-out;
    }

    .custom-btn-2 {
      display: inline-flex;
      background-color: var(--deep-navy);
      color: white;
      width: 19vw;
      height: 7vh;
      justify-content: center;
      align-items: center;
      border: white 2px solid;
      transition: 0.5s ease-in-out;
      margin: 18px;
    }

    .custom-btn-3 {
      background-color: var(--gunmetal);
      border: white 2px solid;
      transition: 0.5s ease-in;
    }

    .custom-btn-1:hover {
      background-color: var(--gunmetal);
      border: white 2px solid;
      transform: scale(1.1);
      box-shadow: 2px 2px 4px black;
      filter: brightness(1.2) contrast(1.2) saturate(1.6);
    }

    .custom-btn-2:hover {
      background-color: var(--deep-navy);
      border: white 2px solid;
      color: white;
      transform: scale(1.1);
      box-shadow: 2px 2px 4px black;
      filter: drop-shadow(10px 10px 10px var(--skydrone-blue)) drop-shadow(-10px -10px 10px var(--skydrone-blue)) drop-shadow(0 0 15px var(--skydrone-blue)) brightness(1.2) contrast(1.2) saturate(1.6);
    }

    .custom-btn-3:hover {
      background-color: var(--deep-navy);
      border: white 2px solid;
      transform: scale(1.1);
      box-shadow: 2px 2px 4px black;
      filter: brightness(1.2) contrast(1.2) saturate(1.6);
    }

  .container {
    display: flex;
    color: white;
    background-color: var(--deep-navy);
    font-size: larger;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin: 25px;
    margin-top: 50px;
    border-radius: 12px;
  }

  .form {
    display: flex;
    color: white;
    background-color: var(--deep-navy);
    font-size: larger;
    padding: 24px;
    margin-top: 12px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
  }

  .form-group label {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
  }

  /* This ensures the file input control drops to the next line */
.form-control-file {
  display: block;
  width: 100%;
  margin-top: 5px;
}

.text-muted p {
  display: flex;
  color: aquamarine;
}

.dropdown-menu h5 {
  font-weight: bold;
}

.navbar {
  width: 100vw;
  background-color: var(--skydrone-blue)
}

.dropdown-toggle {
  background-color: var(--skydrone-blue);
}

.content-area {
  display: flex;
  flex-direction: column;
  background-color: var(--deep-navy);
  color: white;
  width: 100vw;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  padding: 25px;
}

.content-area img{
  width: 500px;
  border-radius: 4px;
  box-shadow: 2px 2px 2px black;
}

#content-title {
  display: flex;
  flex-direction: row;
  text-shadow: 2px 2px 2px black;
}

.flight-container {
  display: flex;
  flex-direction: column;
  background-color: var(--deep-navy);
  color: white;
  width: 100vw;
  align-items: center;
  justify-content: leftS;
}

.carousel-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 0 20px;  
}

.carousel-row {
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.carousel-text-box {
  display: flex;     /* formatting hack to help center the text vertically */
  align-items: center; 
  justify-content: center;
}

#carouselTextIndicators {
  width: 100%;
  height: 100%; /* This stops the jumping! */
}

.carousel-text-box ul, .carousel-text-box p {
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 16px;
  padding-bottom: 16pt;
  margin: 0; /* Cleans up extra spacing */
  list-style: none;
}

#carouselTextIndicators .carousel-control-prev,
#carouselTextIndicators .carousel-control-next {
  width: 50px;
  background-color: #5b94c1;
}

/* About Page CSS */

.pilot-container {
  width: 98vw;
  padding: 25px;
  margin: 12px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

.pilot-name {
  display: flex;
  font-family: 'Skydrone','Microgramma', sans-serif;
  text-transform: uppercase; /* Microgramma looks best in all caps */
  letter-spacing: 2px;       /* Adds a little breathing room */
  padding: 24px;
}

.even .pilot-name {
  align-self: flex-end;
}

.odd .pilot-name {
  align-self: flex-start;
}

.pilot-content {
  display: flex;
  padding: 24px;
  align-items: center;
  justify-content: center;
}

.even .pilot-content {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.odd .pilot-content {
  flex-direction: row;
  align-self: flex-start;
}

.pilot-text {
  display: flex;
  flex-direction: column;
  padding: 24px;
  margin: 0 20px;
  max-width: 600px;
  background-color: var(--skydrone-blue);
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  border-radius: 6px;

}


.pilot-content img {
  display: flex;
  width: 450px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* Footer Panel CSS */

footer {
  display: flex;
  padding: 16px;
}

footer h6 {
  padding: 12px;
}

#logo-blue {
  color: var(--skydrone-blue);
}

#logo-black {
  color: black;
}