/* ALL VERSION */

h1,
h2,
h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

nav,
h3,
h4 {
  font-family: 'Roboto', sans-serif;
}

.text-copyright {
  color: #fff !important;
  font-size: 13px !important;
}

/* BUTTON */
.button-sosmed {
  border-radius: 50px;
  background-color: #ffd800;
  width: 50px;
  height: 50px;
}

.icon-sosmed-footer {
  display: inline-block !important;
  width: 50px !important;
  height: 50px !important;
  margin: 0 11px 0 0 !important;
  background-color: #ffd800 !important;
  border-radius: 50px !important;
  box-shadow: 2px 1px 0.1px 1px rgba(0, 0, 0, 0.1) !important;
}

.icon-sosmed-footer img {
  width: 28px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(37%, 35%) !important;
}

.footer {
  margin-bottom: -10rem;
  padding-bottom: 1rem;
  background-color: #000;
  color: #fff;
}

.footer h5 {
  font-size: 23px;
}

.identity p {
  font-size: 20px;
  color: #555555;
}

.footer .identity {
  width: 450px;
}

.footer .menu {
  width: 190px;
}

.footer .contact-us {
  width: 280px;
}

.footer .sosial-media {
  width: 220px;
}

.logo-footer {
  width: 77px !important;
  height: auto;
  margin: auto;
  padding-bottom: 50px;
}

.menu-footer a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding-top: 20px;
  font-size: 20px;
}

.contact-us-footer p {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 3px 0 0 0;
  font-size: 20px;
}

.text-copyright {
  font-family: 'Poppins', sans-serif;
  margin: auto;
  padding-top: 100px;
  font-size: 15px;
  color: #fff;
  font-style: italic;
}

/* ------------------------------------------------------------ */

/* TABLET VERSION */
@media (min-width: 768px) {
  .footer .identity {
    min-width: 300px;
  }
  .footer .row {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .footer .identity,
  .footer .menu,
  .footer .contact-us,
  .footer .sosial-media {
    width: 100%;
  }
}

/* ------------------------------------------------------------ */

/* DESKTOP VERSION */
@media (min-width: 1024px) {
  .footer .identity {
    width: 180px;
  }
}

@media (max-width: 1024px) {
  .footer .identity {
    width: 90%;
  }
}

@media (min-width: 1200px) {
  .footer .identity {
    width: 400px;
  }

  .footer .row {
    display: flex;
    justify-content: center;
    margin: auto;
    min-width: 1100px;
    height: auto;
  }
}