:root{
  --dark:#111111;
  --dark-soft:#1a1a1a;
  --text-light:rgba(255,255,255,0.75);
  --text-muted:rgba(255,255,255,0.5);
  --border:rgba(255,255,255,0.08);
}

/* ----------- FOOTER ----------- */

.footer{
  width:100%;
  background:var(--dark);
  color:white;

  padding:70px 80px;

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:60px;

  border-top:1px solid var(--border);
}

/* columns */
.footer div{
  max-width:340px;
}

/* titles */
.footer h4{
  font-size:16px;
  font-weight:700;
  margin-bottom:18px;
  letter-spacing:0.5px;
}

/* text */
.footer p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-light);
}

/* links */
.footer a{
  font-size:14px;
  color:var(--text-light);
  text-decoration:none;
  display:block;
  margin-bottom:10px;
  transition:all .25s ease;
  position:relative;
}

/* underline animation */
.footer a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0%;
  height:1px;
  background:white;
  transition:width .3s ease;
  opacity:0.6;
}

.footer a:hover{
  color:white;
  transform:translateX(3px);
}

.footer a:hover::after{
  width:100%;
}

/* ----------- FOOTER BOTTOM ----------- */

.footer-bottom{
  width:100%;
  background:var(--dark-soft);
  border-top:1px solid var(--border);
}

.footer-bottom-inner{
  max-width:1200px;
  margin:0 auto;

  padding:18px 80px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  font-size:13px;
  color:var(--text-muted);
}

.footer-version{
  opacity:0.6;
  font-weight:500;
  letter-spacing:0.5px;
}

/* ----------- RESPONSIVE ----------- */

/* laptop */
@media (max-width:1100px){
  .footer{
    grid-template-columns:1fr 1fr;
    padding:60px 50px;
    gap:50px;
  }

  .footer-bottom-inner{
    padding:18px 50px;
  }
}

/* tablet */
@media (max-width:768px){
  .footer{
    grid-template-columns:1fr;
    text-align:center;
    padding:50px 30px;
    gap:40px;
  }

  .footer div{
    max-width:100%;
  }

  .footer h4{
    margin-bottom:14px;
  }

  .footer a{
    margin-bottom:8px;
  }

  .footer a:hover{
    transform:none;
  }

  .footer-bottom-inner{
    flex-direction:column;
    text-align:center;
    padding:16px 30px;
  }
}

/* mobile */
@media (max-width:480px){
  .footer{
    padding:45px 20px;
    gap:32px;
  }

  .footer p{
    font-size:14px;
  }

  .footer a{
    font-size:13.5px;
  }

  .footer-bottom-inner{
    font-size:12.5px;
    padding:14px 20px;
  }
}