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

.footer{

  position:relative;

  padding:65px 0 0;

  background:
  linear-gradient(
  135deg,
  #02101f 0%,
  #04172d 50%,
  #020b16 100%
  );

  border-top:
  1px solid rgba(255,255,255,0.05);

  overflow:hidden;

}

/* =========================
GRID
========================= */

.footer-grid{

  display:grid;

  grid-template-columns:
  1.3fr 0.9fr 1fr 0.8fr;

  gap:40px;

  padding-bottom:45px;

  align-items:flex-start;

}

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

.footer-logo{

  display:inline-block;

  font-size:30px;

  font-weight:800;

  color:#fff;

  text-decoration:none;

  margin-bottom:18px;

  letter-spacing:-0.5px;

}

.footer-logo span{

  color:#00d9ff;

}

/* =========================
DESCRIPTION
========================= */

.footer-about p{

  max-width:320px;

  color:
  rgba(255,255,255,0.70);

  line-height:1.9;

  font-size:14px;

  margin-bottom:24px;

}

/* =========================
FEATURE TAGS
========================= */

.footer-tags{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

}

.footer-tags span{

  display:flex;

  align-items:center;

  gap:6px;

  padding:10px 14px;

  border-radius:12px;

  font-size:13px;

  color:#fff;

  background:
  rgba(255,255,255,0.04);

  border:
  1px solid rgba(255,255,255,0.07);

}

.footer-tags i{

  color:#00d9ff;

  font-size:14px;

}

/* =========================
TITLE
========================= */

.footer h4{

  position:relative;

  font-size:18px;

  color:#fff;

  margin-bottom:28px;

  white-space:nowrap;

}

.footer h4::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-10px;

  width:42px;
  height:3px;

  border-radius:20px;

  background:
  linear-gradient(
  90deg,
  #7b2dff,
  #00d9ff
  );

}

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

.footer-links,
.footer-contact{

  display:flex;

  flex-direction:column;

  gap:18px;

}

.footer-links a,
.footer-contact a{

  display:flex;

  align-items:center;

  gap:12px;

  padding-bottom:12px;

  text-decoration:none;

  font-size:15px;

  color:
  rgba(255,255,255,0.78);

  border-bottom:
  1px solid rgba(255,255,255,0.05);

  transition:0.3s ease;

}

.footer-links a:hover,
.footer-contact a:hover{

  color:#00d9ff;

  transform:translateX(4px);

}

.footer-links i,
.footer-contact i{

  font-size:17px;

  color:#00d9ff;

  flex-shrink:0;

}

/* =========================
SOCIALS
========================= */

.social-icons{

  display:flex;

  gap:12px;

  margin-top:4px;

}

.social-icons a{

  width:48px;
  height:48px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  text-decoration:none;

  color:#fff;

  font-size:20px;

  background:
  rgba(255,255,255,0.05);

  border:
  1px solid rgba(255,255,255,0.08);

  transition:0.35s ease;

}

.social-icons a:hover{

  transform:
  translateY(-5px);

  background:
  linear-gradient(
  135deg,
  #7b2dff,
  #00d9ff
  );

}

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

.footer-bottom{

  text-align:center;

  padding:24px 20px;

  border-top:
  1px solid rgba(255,255,255,0.06);

}

.footer-bottom p{

  color:
  rgba(255,255,255,0.60);

  font-size:14px;

}

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

@media (max-width:992px){

.footer-grid{

  grid-template-columns:
  repeat(2,1fr);

  gap:40px;

}

}

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

@media (max-width:768px){

.footer{

  padding-top:55px;

}

.footer-grid{

  grid-template-columns:1fr;

  gap:40px;

}

.footer-logo{

  font-size:28px;

}

.footer-about p{

  font-size:14px;

}

.footer h4{

  font-size:18px;

}

.footer-links a,
.footer-contact a{

  font-size:14px;

}

.social-icons a{

  width:44px;
  height:44px;

  font-size:18px;

}

.footer-tags span{

  font-size:12px;

}

}