.footer *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ======================
   FOOTER MAIN
====================== */

.footer{
  background:#111;
  padding:70px 20px;
  font-family:Arial,sans-serif;
}

/* ======================
   CONTAINER
====================== */

.footer-container{
  max-width:1300px;
  margin:auto;

  display:grid;

  grid-template-columns:
  1fr
  1fr
  1fr;

  gap:35px;
}

/* ======================
   COMMON BOX
====================== */

.footer-box{
  background:#181818;
  padding:40px 30px;
  border-radius:6px;
  min-height:100%;
}

/* ======================
   ABOUT COLUMN
====================== */

.footer-about{
  background:#101010;
}

/* ======================
   QUICK LINKS COLUMN
====================== */

.footer-links{
  background:#151515;
}

/* ======================
   DATABASE COLUMN
====================== */

.footer-database{
  background:#1a1a1a;
}

/* ======================
   LOGO
====================== */

.footer-logo{
  width:180px;
  max-width:100%;
  display:block;
  margin-bottom:25px;
}

/* ======================
   TEXT
====================== */

.footer-box p{
  color:#cfcfcf;
  line-height:1.9;
  font-size:17px;
}

/* ======================
   TITLES
====================== */

.footer-box h3{

  color:#fff;

  font-size:28px;

  margin-bottom:28px;

  position:relative;

  padding-bottom:14px;
}

.footer-box h3::after{

  content:'';

  position:absolute;

  left:0;
  bottom:0;

  width:55px;
  height:3px;

  background:#c59d5f;
}

/* ======================
   LIST
====================== */

.footer-box ul{
  list-style:none;
}

/* ======================
   LIST ITEMS
====================== */

.footer-box ul li{
  margin-bottom:18px;
}

/* ======================
   LINKS
====================== */

.footer-box ul li a{

  color:#d5d5d5;

  text-decoration:none;

  line-height:1.8;

  font-size:17px;

  transition:0.3s ease;

  display:inline-block;
}

.footer-box ul li a:hover{
  color:#fff;
  transform:translateX(5px);
}

/* ======================
   TABLET
====================== */

@media(max-width:992px){

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

}

/* ======================
   MOBILE
====================== */

@media(max-width:768px){

  .footer{
    padding:45px 15px;
  }

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

  .footer-box{
    padding:30px 22px;
    text-align:center;
  }

  .footer-box h3::after{
    left:50%;
    transform:translateX(-50%);
  }

  .footer-logo{
    margin:0 auto 20px;
    width:150px;
  }

}