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

.dxb-footer{

  position:relative;

  background:
  #0F172A;

  color:#fff;

  padding:
  100px 0 40px;

  overflow:hidden;

}

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

.dxb-footer::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  radial-gradient(
  circle at top right,
  rgba(255,255,255,0.06),
  transparent 35%
  );

}

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

.dxb-footer-grid{

  position:relative;

  z-index:2;

  display:grid;

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

  gap:40px;

  margin-bottom:60px;

}

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

.dxb-footer-brand{

  max-width:420px;

}

.dxb-footer-logo{

  font-size:54px;

  line-height:1;

  margin-bottom:20px;

  color:#fff;

}

.dxb-footer-brand p{

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

  margin-bottom:28px;

  font-size:15px;

}

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

.dxb-footer-socials{

  display:flex;

  align-items:center;

  gap:14px;

}

.dxb-footer-socials a{

  width:44px;

  height:44px;

  border-radius:50%;

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

  display:flex;

  align-items:center;

  justify-content:center;

  transition:
  var(--dxb-transition);

}

.dxb-footer-socials a:hover{

  background:
  var(--dxb-primary);

  transform:
  translateY(-4px);

}

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

.dxb-footer-col h3{

  color:#fff;

  font-size:22px;

  margin-bottom:24px;

}

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

.dxb-footer-links{

  display:flex;

  flex-direction:column;

  gap:14px;

}

.dxb-footer-links li a{

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

  transition:
  var(--dxb-transition);

}

.dxb-footer-links li a:hover{

  color:#fff;

  padding-left:6px;

}

/* =========================================================
LATEST POSTS
========================================================= */

.dxb-footer-posts{

  display:flex;

  flex-direction:column;

  gap:18px;

}

.dxb-footer-post{

  display:flex;

  gap:14px;

}

.dxb-footer-post img{

  width:90px;

  height:80px;

  border-radius:
  14px;

  object-fit:cover;

}

.dxb-footer-post h4{

  color:#fff;

  font-size:15px;

  line-height:1.4;

}

.dxb-footer-post span{

  font-size:12px;

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

}

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

.dxb-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;

}

/* =========================================================
COPYRIGHT
========================================================= */

.dxb-copyright{

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

  font-size:14px;

}

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

.dxb-footer-bottom-menu{

  display:flex;

  align-items:center;

  gap:22px;

}

.dxb-footer-bottom-menu a{

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

  font-size:14px;

}

.dxb-footer-bottom-menu a:hover{

  color:#fff;

}

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

@media(max-width:992px){

  .dxb-footer-grid{

    grid-template-columns:
    1fr 1fr;

  }

}

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

@media(max-width:768px){

  .dxb-footer{

    padding:
    70px 0 30px;

  }

  .dxb-footer-grid{

    grid-template-columns:
    1fr;

    gap:40px;

  }

  .dxb-footer-logo{

    font-size:42px;

  }

  .dxb-footer-bottom{

    flex-direction:column;

    align-items:flex-start;

  }

  .dxb-footer-bottom-menu{

    flex-wrap:wrap;

    gap:14px;

  }

}