.footer-logo{
    width: 100px;
    height: auto;
}

.footer-logo img{
    width: 100%;
}

/*
==========
Footer
==========
*/

.footer{
  background:var(--dark-color);
  padding:70px 8% 30px;
  margin-top:80px;
  border-top:1px solid var(--dark-color);
}

.footer-container{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));
  gap:40px;
}

.footer-column{
  display:flex;
  flex-direction:column;
}

.footer-column p{
    padding-top: 1em;
  color: var(--white-color);
  line-height:1.7;
}

.footer-column h3{
  margin-bottom:20px;
  color: var(--white-color);
}

.footer-column a{
  color: var(--white-color);
  text-decoration:none;
  margin-bottom:12px;
  transition:.3s;
}

.footer-column a:hover{
  color: var(--yellow-color);
  transform:translateX(5px);
}

.socials{
  display:flex;
  gap:2em;
}

.socials a{
  width:25px;
  height:25px;
  background: none;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  font-size:18px;
  transition:.3s;
}

.socials a .icon{
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.socials a .icon svg{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: var(--white-color);
}

.socials a:hover{
  transform:translateY(-5px);
}

.socials a:hover .icon svg{
    fill: var(--yellow-color);
}

.footer-bottom{
  margin-top:50px;
  padding-top:20px;
  border-top:1px solid var(--grey-color);
  text-align:center;
}

.footer-bottom p{
  color: var(--grey-color);
  font-size:14px;
}

/* 
==========
Responsive styles.
==========
*/

@media(max-width:768px){

  .footer{
    padding:60px 6% 30px;
  }

  .footer-container{
    gap:50px;
  }

}