@import url('https://fonts.googleapis.com/css2?family=Erica+One&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

:root {
  --color-pink: #d60075;
  --color-yellow: #ffbe00;
  --color-lime-yellow: #fdffeb;
  --color-indigo: #1d1f48;
  --color-dark-indigo: #08153b;
  --color-darkest-indigo: #0e0f2a;
  --color-dark-gray: #515151;
  --color-white: #ffffff;
  --color-light-grey: #707070;

  /* Font family variables */
  --font-heading: 'Erica One', sans-serif;
  --font-body: 'Sofia Sans', sans-serif;
}

* {
  font-family: var(--font-body);
  text-decoration: none;
  box-sizing: border-box;
}

button {
  outline: none;
  border: none;
  box-shadow: none;
  line-height: 1 !important;
}

button:focus {
  outline: none;
  box-shadow: none;
}

.font-heading {
  font-family: var(--font-heading);
}
.font-body {
  font-family: var(--font-body);
}

.section-spacing {
  padding-top: 70px;
  padding-bottom: 70px;
}

.section-title {
  font-family: var(--font-heading);
  color: var(--color-dark-indigo);
  font-size: 66px;
}

.section-subtitle {
  font-family: var(--font-body);
  color: var(--color-indigo);
  font-size: 49px;
}

.section-text {
  font-size: 28px;
}

.dark-button {
  background-color: var(--color-indigo);
  color: var(--color-white);
  font-size: 24px;
  padding: 15px 25px;
  border-radius: 40px;
  border: 2px solid var(--color-indigo);
  &:hover {
    background-color: transparent;
    color: var(--color-indigo);
    border: 2px solid var(--color-indigo);
  }
}

.yellow-button {
  background-color: var(--color-yellow);
  color: var(--color-dark-indigo);
  font-size: 24px;
  padding: 15px 25px;
  border-radius: 40px;
  border: 2px solid var(--color-yellow);
  &:hover {
    background-color: transparent;
    color: var(--color-yellow);
    border: 2px solid var(--color-yellow);
  }
}

.transparent-button {
  background-color: transparent;
  color: var(--color-dark-gray);
  border: 2px solid var(--color-dark-gray);
  font-size: 24px;
  padding: 15px 25px;
  border-radius: 40px;
  &:hover {
    background-color: var(--color-dark-gray);
    color: var(--color-white);
  }
}

.pink-button {
  background-color: var(--color-pink);
  color: var(--color-white);
  font-size: 24px;
  padding: 15px 25px;
  border-radius: 40px;
  border: 2px solid var(--color-pink);
  &:hover {
    background-color: transparent;
    color: var(--color-pink);
    border: 2px solid var(--color-pink);
  }
}

.navbar-toggler {
  border: none;
  outline: none;
  box-shadow: none;
  &:focus {
    border: none;
    outline: none;
    box-shadow: none;
  }
}

header {
  overflow-x: hidden;
  #header-logo {
    width: 250px;
    height: auto;
  }
  a {
    line-height: 1;
  }
  #coa-navigation {
    background-color: var(--color-yellow);
    color: var(--color-dark-indigo);
    border-radius: 25px;
    border: 2px solid var(--color-yellow);
    padding: 5px 25px;
  }
  .dropdown-menu {
    padding: 20px 20px 20px 0;
  }
}

.navigation-waves {
  position: absolute;
  bottom: -40px;
  left: 0;
}

footer {
  background-color: var(--color-dark-indigo);
  #newsletter-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: min(450px, 100%);
  }
  #newsletter-email-input {
    background-color: var(--color-dark-indigo);
    color: var(--color-white);
    border-color: var(--color-white);
    &::placeholder {
      color: var(--color-white);
    }
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }
  .social-media {
    color: var(--color-white);
    .social-icons {
      margin-bottom: 20px;
      img {
        width: 30px;
      }
    }
  }
}

@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1555px !important;
  }
}
@media only screen and (min-width: 1920px) {
  .container {
    max-width: 1800px !important;
  }
}

@media only screen and (max-width: 1681px) {
  .section-title {
    font-family: var(--font-heading);
    color: var(--color-dark-indigo);
    font-size: 46px;
  }

  .section-subtitle {
    font-family: var(--font-body);
    color: var(--color-indigo);
    font-size: 35px;
  }

  .section-text {
    font-size: 18px;
  }
  .dark-button,
  .yellow-button,
  .transparent-button,
  .pink-button {
    font-size: 18px;
    padding: 10px 25px;
  }
}

@media only screen and (max-width: 992px) {
  footer {
    text-align: center;
    .footer-logo {
      width: 100%;
      max-width: 300px;
      margin-bottom: 50px;
    }
  }
}

@media only screen and (max-width: 768px) {
  header {
    #header-logo {
      width: 175px;
    }
  }

  .section-title {
    font-size: 30px;
  }

  .section-subtitle {
    font-family: var(--font-body);
    color: var(--color-indigo);
    font-size: 22px;
  }

  .section-text {
    font-size: 18px;
  }

  .yellow-button,
  .dark-button,
  .transparent-button,
  .pink-button {
    font-size: 18px;
    padding: 7px 20px;
  }

  footer {
    text-align: center;
    .footer-logo {
      width: 100%;
      margin-bottom: 50px;
    }
  }
}
@media only screen and (max-width: 576px) {
  header {
    .dropdown-menu {
      padding: 10px 10px 10px 0;
    }
  }
}