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

.footer{
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #081120,
      #0F172A
    );

  color: white;

  padding:
    90px 20px 30px;
}

/* GLOW */

.footer-glow{
  position: absolute;

  border-radius: 50%;

  filter: blur(90px);

  animation:
    footerGlow 8s ease-in-out infinite;
}

.footer-glow-1{
  width: 280px;
  height: 280px;

  background:
    rgba(255,0,80,0.12);

  top: -120px;
  left: -120px;
}

.footer-glow-2{
  width: 260px;
  height: 260px;

  background:
    rgba(0,110,255,0.10);

  bottom: -100px;
  right: -100px;
}

/* GRID */

.footer-grid{
  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 45px;

  margin-bottom: 60px;
}

/* LOGO */

.footer-logo{
  width: 90px;

  border-radius: 24px;

  margin-bottom: 20px;

  box-shadow:
    0 12px 30px rgba(255,255,255,0.08);
}

/* HEADINGS */

.footer-box h2{
  font-size: 34px;

  margin-bottom: 20px;
}

.footer-box h3{
  font-size: 24px;

  margin-bottom: 24px;

  position: relative;
}

.footer-box h3::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-10px;

  width:60px;
  height:3px;

  border-radius:100px;

  background:
    linear-gradient(
      90deg,
      #ff004c,
      #006eff
    );
}

/* TEXT */

.footer-about p{
  color:
    rgba(255,255,255,0.72);

  line-height: 1.9;

  margin-bottom: 30px;
}

/* LIST */

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

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

.footer-box ul li a{
  color:
    rgba(255,255,255,0.75);

  text-decoration:none;

  transition:
    all .35s ease;
}

.footer-box ul li a:hover{
  color:white;

  padding-left:8px;
}

/* CONTACT */

.footer-contact{
  display:flex;
  flex-direction:column;

  gap:18px;
}

.footer-contact p,
.footer-contact a{
  color:
    rgba(255,255,255,0.75);

  text-decoration:none;

  line-height:1.8;

  transition:
    all .35s ease;
}

.footer-contact a:hover{
  color:white;

  transform:
    translateX(6px);
}

/* SOCIAL */

.footer-social{
  display:flex;

  gap:16px;
}

.footer-social a{
  width:52px;
  height:52px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

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

  color:white;

  text-decoration:none;

  font-size:24px;

  transition:
    all .45s ease;
}

.footer-social a:hover{
  transform:
    translateY(-8px)
    scale(1.08);

  background:
    linear-gradient(
      135deg,
      #ff004c,
      #006eff
    );
}

/* BOTTOM */

.footer-bottom{
  position: relative;
  z-index: 2;

  padding-top: 30px;

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

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

  gap:20px;

  flex-wrap:wrap;
}

.footer-bottom p{
  color:
    rgba(255,255,255,0.65);

  font-size:14px;
}

/* ANIMATION */

@keyframes footerGlow{

  0%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(20px);
  }

  100%{
    transform:translateY(0);
  }

}

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

@media(max-width:1100px){

  .footer-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}

@media(max-width:768px){

  .footer{
    padding:
      70px 18px 25px;
  }

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

    gap:40px;
  }

  .footer-box h2{
    font-size:28px;
  }

  .footer-bottom{
    flex-direction:column;

    text-align:center;
  }

}

@media(max-width:480px){

  .footer-social a{
    width:46px;
    height:46px;

    font-size:20px;
  }

}