/* CREATE SPACE BELOW FOOTER */

.below-footer {
  height: 10px;
  width: 100%;
}

/* ACTUAL FOOTER */

.footer-div {
  margin: 120px 16px 0px 16px;
  background-color: #ff1e69;
  height: 314px;
  width: calc(100% - 32px);

  border-radius: 12px;

  display: grid;
  grid-template-rows: 200px 120px;

  font-size: 16px;
  line-height: 1.8;
  font-weight: 200;
  color: white;

  transition: 0.3s;
}

.footer-div p{
  margin: 0px;
}

@media (max-width: 768px) {
  .below-footer {
    height: 0px;
  }
  
  .footer-div {
    grid-template-rows: 300px 160px;
    height: 460px;
    border-radius: 0px;
    width: 100%;
    margin: 120px 0px 0px 0px;

    font-size: 15px;
    line-height: 1.8;
  }
}

@media (max-width: 374px) {
  .footer-div {
    font-size: 13px;
    line-height: 2.2;
  }
}

/* EVERYTHING IN FOOTER TOP */

.footer-div-top {
  height: auto;
  width: auto;
  padding: 0px 70px;

  display: grid;
  grid-template-columns: 300px 300px;
  justify-content: space-between;

  transition: 0.3s;
}

@media (max-width: 768px) {
  .footer-div-top {
    padding: 0px 20px;
    grid-template-columns: 100%;
  }
}

.footer-navigation {
  height: 200px;
  padding-top: 30px;
}

.footer-links {
  height: 200px;
  padding-top: 30px;

  display: grid;
  grid-template-rows: 60px 60px;
  row-gap: 20px;

}

@media (max-width: 768px) {
  /*.footer-navigation {
    
  }*/
  
  .footer-links {
    display: grid;
    grid-template-columns: 10fr 4fr;
    grid-template-rows: auto;
    padding-top: 0px;
  }
}

.footer-contact {
  height: auto;
}

.footer-instagram {
  height: auto;
}

@media (max-width: 768px) {
  .footer-instagram {
    padding-left: 30px;
  }
}

.instagram-icon {
  width: 35px;
  transition: 0.3s;;
}
.instagram-icon:hover {
  cursor: pointer;
  opacity: 0.6;
}

/* LINKS */

.footer-div a,
.footer-div a:visited {
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

.footer-div a:hover {
  cursor: pointer;
  text-decoration: underline;
}

.footer-div a:active {
  opacity: 0.6;
}

/* EVERYTHING IN FOOTER BOTTOM */

.footer-div-bottom {

  display: grid;
  grid-template-columns: 300px 300px;
  justify-content: space-between;
  padding: 0px 70px 30px 70px;
}

@media (max-width: 768px) {
  .footer-div-bottom {
    display: grid;
    grid-template-columns: 300px;
    padding: 0px 20px 30px 20px;
  }
}

.footer-logo-container {
  display: flex;
  align-items: flex-end;
  height: 90px;
  line-height: 1;
}

.footer-logo {
  width: 213px;
  filter: invert(100%);
}

.footer-logo:hover {
  cursor: pointer;
}

.footer-copyright {
  margin-top: auto;
  line-height: 1;
}