/* ===============================
   FOOTER BASE
================================ */

#tftus-footer {
  background:#363636;
  color:#ccc;
  font-size:14px;
}

#tftus-footer a {
  color:#ccc;
  text-decoration:none;
  transition:0.3s;
}

#tftus-footer a:hover {
  color:#1e90ff;
}

/* ===============================
   TOP SOCIAL BAR
================================ */

.upper-footer {
  padding:40px 0;
  text-align:center;
  border-bottom:1px solid #fff;
}

.upper-footer h3 {
  color:#fff;
  font-size:20px;
  margin-bottom:18px;
  font-weight:500;
}

/* Social Container */
.upper-footer .social-media {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-bottom: 2rem;
}

/* Katen social UL reset */
.upper-footer .social-media ul {
  display:flex;
  gap:14px;
  padding:0;
  margin:0;
  list-style:none;
}

/* All Social Links */
.upper-footer .social-media a {
  width:50px;
  height:50px;
  background:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  color:#fff;
}

/* Hover */
.upper-footer .social-media a:hover {
  background:#1e90ff;
  color:#fff;
  transform:translateY(-2px);
}

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

.main-footer {
  padding:60px 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:40px;
  text-align:left;
  border-top: 1px solid #fff;
}

/* Logo */
.logo-footer img {
  max-width:200px;
}

/* Titles */
.footer-links h5 {
  color:#fff;
  font-size:25px;
  font-weight:600;
  margin-bottom:15px;
  border-bottom: 1px solid #fff;
  padding-bottom:1rem;
}

/* Menus */
.footer-links ul {
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li {
  margin-bottom:10px;
}

.footer-links a {
  color:#bbb;
}

.footer-links a:hover {
  color:#1e90ff;
  padding-left:4px;
}

/* Big Column */
.footer-links.big {
  grid-column:span 1;
}

/* ===============================
   BOTTOM BAR
================================ */

.bottom-footer {
  border-top:1px solid #fff;
  padding:18px 0;
  font-size:13px;
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
}

.bottom-footer a {
  color:#fff;
}

.bottom-footer a:hover {
  color:#fff;
}

/* ===== FOOTER SOCIAL MENU ===== */

.footer-social-menu {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:14px;
}

.footer-social-menu li a {
  width:42px;
  height:42px;
  background:#1a1a1a;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
  text-indent:-9999px; /* hide text */
  position:relative;
}

/* FontAwesome icons using menu title */

.footer-social-menu li a:before {
  font-family:"Font Awesome 6 Brands";
  content:"\f09a"; /* default */
  position:absolute;
  text-indent:0;
}

/* Platform mapping */

.footer-social-menu li a[href*="facebook"]:before { content:"\f09a"; }
.footer-social-menu li a[href*="instagram"]:before { content:"\f16d"; }
.footer-social-menu li a[href*="linkedin"]:before { content:"\f08c"; }
.footer-social-menu li a[href*="x.com"]:before,
.footer-social-menu li a[href*="twitter"]:before { content:"\e61b"; }

.footer-social-menu li a:hover {
  background:#1e90ff;
}


/* ===============================
   RESPONSIVE
================================ */

@media (max-width:768px) {

  .main-footer {
    text-align:left;
  }

  .logo-footer img {
    margin:auto;
  }

  .bottom-footer {
    text-align:left;
    flex-direction:column;
    gap:8px;
  }

}