/* Custom styles here */
    /* You can define the color cycling animation using CSS keyframes */
    @keyframes colorCycle {
      0% {
        background-color: #322044;
      }

      25% {
        background-color: #98968C;
      }

      50% {
        background-color: #4C7D40;
      }

      75% {
        background-color: #FFFFFF;
      }

      100% {
        background-color: #322044;
      }
    }

    * {
      font-family: 'Bebas Neue', sans-serif;
    }

    .green-bg {
      background-color: #3f8d2a;
    }

    .green-text {
      color: #3f8d2a;
    }

    .purple-bg {
      background-color: #48265d;
      color: "#fff" !important
    }

    .purple-text {
      color: #48265d;
    }

    .gray-bg {
      background-color: #b8b8b8;
      color: "#fff" !important
    }

    .gray-bg p {
      color: #48265d;
      font-size: 20px
    }

    .green-bg p {
      color: #ffffff;
      font-size: 20px
    }

    .purple-bg ul li {
      color: #ffffff;
      font-size: 20px
    }

    .purple-bg h3 {
      color: #ccc !important;
    }

    .purple-bg h2 {
      color: #d73f6a !important;
    }

    .red-bg {
      background-color: #d73f6a;
    }

    .red-text {
      color: #d73f6a;
    }

    #navbarNav a {
      color: #fff;
      font-size: 30px
    }

    .navbar-brand {
      color: #000 !important;
      font-size: 40px
    }

    .bigwhere {
      font-size: 100px;
      text-align: center;
    }

    .bigwhen {
      font-size: 60px;
      text-align: center;
    }

    section h2 {
      font-size: 40px
    }

    .main section {
      padding-top: 80px !important;
      padding-bottom: 80px !important;
    }

    .no_ul li {
      list-style-type: none;
      margin-left: 0;
      padding-left: 0;
    }

    .no_ul {
      margin-left: 0;
      padding-left: 0;
    }

    .my-flex-row {
      display: flex;
      flex-direction: row;
      align-items: space-between;
    }

    .my-flex-row div {
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .my-flex-row div:nth-child(2) ul {
      /* Your styles for the second div go here */
      align-self: flex-end;
      justify-self: flex-end;
      text-align: right
    }

    .white-hr {
      border: none;
      /* Remove the default line */
      height: 1px;
      /* Set the height of the new line */
      background-color: white;
      /* Set the color of the new line */
    }

    .purple-hr {
      border: none;
      /* Remove the default line */
      height: 1px;
      /* Set the height of the new line */
      background-color: #48265d;
      /* Set the color of the new line */
    }

    .social_row {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
    }

    .social_row div {
      margin: 10px
    }

    @media (max-width: 768px) {
      .my-flex-row {
        display: flex;
        flex-direction: column;
        align-items: space-between;
      }
    }