/* ---------------------------------------
------------- FOOTER STYLES -------------- */



/* ---- FOOTER ---- */

footer {
  margin-top: 50px;
  padding-top: 80px;
  padding-bottom: 40px;
  color: white;
  background-color: var(--primary-color);
  line-height: 10px;
}

footer div {
  width: 80vw;
  margin: 0 auto 40px;
}

footer img {
  position: relative;
  float: right;
  top: 2px;
}

.footer-header {
  text-decoration: underline white;
  font-weight: 700;
}



/* ---- MEDIA TABLET ---- */

@media only screen and (min-width: 768px) and (max-width: 999px) {
  footer section,
  .blue-content {
    width: 60vw;
    margin: 0px auto;
  }

  footer img {
    position: relative;
    float: right;
    top: 2px;
    margin-right: 20vw;
  }
}



/* ---- MEDIA DESKTOP SMALL < ---- */

@media screen and (min-device-width: 1200px) {
  footer section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10vw;
  }

  footer div {
    width: 100%;
    margin: 0 0 40px !important;
  }
  
  footer section {
    width: 80vw;
    margin: 0 auto;
  }
}



/* ---- MEDIA DESKTOP LARGE < ---- */

@media screen and (min-device-width: 1600px) {
  footer section {
    width: 70vw;
    gap: 10vw;
  }
}