/*
---------------------------------------------
Footer Style
---------------------------------------------
*/

footer {
  padding: 2rem 1rem 1rem 1rem;
  background-color: var(--primary-color);
  color: var(--white-color);
  border-radius: 50px 50px 0 0;
  margin-top:50px;
}

footer .footer-col {
  border-left: none;
  border-bottom: 1px solid rgba(250, 250, 250, 0.3);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

footer h3 {
  font-size: 1.2rem;
  margin-bottom: 1 rem;
  color: var(--white-color);
}

footer p, footer li a {
  font-size: 0.9rem;
  color: var(--white-color);
}

footer .credentials {
  font-size: 0.75rem;
}

footer .footer-col p{
    text-align: left;
}

footer p {
  text-align: center;
  color: #fff;
  font-weight: 400;
  margin-bottom:0;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}

footer::before {
  position: absolute;
  left: 30px;
  transform: rotate(180deg);
  opacity: 1;
  bottom: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

footer .credentials p{
    font-size:12px;
}

footer ul {
    padding:0;
}

footer li a{
    color: var(--white-color);
}

footer li a:hover,
footer li a:focus{
    color: var(--secondary-color);
}

footer i {
    color:var(--white-color);
    font-size:40px;
    margin-right:10px;
}

footer i:hover{
    color:var(--secondary-color);
}

@media (min-width: 768px) {

  footer {
    padding: 2rem 1rem 0.5rem 1rem;
    margin-top: 150px;
  }

  footer .footer-col {
    border-bottom: none;
    border-left: 1px solid rgba(250, 250, 250, 0.3);
    padding-left: 1rem;
  }

  footer .footer-col:first-child {
    border-left: none;
  }

  footer .credentials {
    border-top: 1px solid rgba(250, 250, 250, 0.3);
    padding-top: 0.5rem;
    margin-top: 1.5rem;
  }
}