.footer{
    background:#f8f9fa;
    color:#6c757d;
    padding:80px 60px;
  }
  
  .footer-container{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr 1fr;
    gap:60px;
  }
  
  .footer-logo{
    color:#212529;
    font-size:22px;
    margin-bottom:15px;
  }
  
  .copyright{
    font-size:14px;
    margin-bottom:20px;
  }
  
  .footer-column{
    display:flex;
    flex-direction:column;
  }
  
  .footer-column h5{
    color:#212529;
    margin-bottom:15px;
  }
  
  .footer-column a{
    color:#6c757d;
    text-decoration:none;
    margin-bottom:10px;
    font-size:14px;
  }
  
  .footer-column a:hover{
    color:#ff385c;
  }
  
  .footer-social a{
    margin-right:15px;
    font-size:20px;
    color:#6c757d;
  }
  
  .footer-social a:hover{
    color:#212529;
  }

  /* dark theme */
  /* ========================= */
/* DARK THEME - FOOTER */
/* ========================= */

.theme-dark .footer {
  background-color: #1c1c1c;
  border-top: 1px solid #2a2a2a;
  color: #e0e0e0;
}

.theme-dark .footer-logo {
  color: #ffffff;
}

.theme-dark .copyright {
  color: #b0b0b0;
}

.theme-dark .footer-column a {
  color: #b0b0b0;
  text-decoration: none;
}

.theme-dark .footer-column a:hover {
  color: #ffffff;
}

.theme-dark .footer-column h5 {
  color: #ffffff;
  margin-bottom: 10px;
}

.theme-dark .footer-social a {
  color: #b0b0b0;
  font-size: 18px;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.theme-dark .footer-social a:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.theme-dark .footer,
.theme-dark .footer a,
.theme-dark .footer h5 {
    transition: all 0.3s ease;
}

.theme-dark .footer-container {
  border-top: 1px solid #2a2a2a;
  padding-top: 20px;
}

@media (max-width: 576px) {

  .footer {
    padding: 50px 20px;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr; 
    gap: 30px;
  }

  .footer-brand {
    grid-column: 1 / -1; 
    text-align: center;
  }

  .footer-logo {
    margin-bottom: 10px;
  }

  .copyright {
    margin-bottom: 10px;
  }

  .footer-social {
    display: flex;
    justify-content: center;
    gap: 15px;
  }

  .footer-column {
    align-items: flex-start;
  }

  .footer-column h5 {
    font-size: 16px;
  }

  .footer-column a {
    font-size: 13px;
  }

}