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

.elegant-footer{

  position:relative;

  width:100%;

  overflow:hidden;

  padding:20px 20px 22px;

  background:
  linear-gradient(
    135deg,
    #eef9ff 0%,
    #ffffff 45%,
    #e3f6ff 100%
  );

  border-top:
  1px solid rgba(14,165,233,0.10);
}

/* soft glow */
.elegant-footer::before{

  content:"";

  position:absolute;

  top:-120px;
  right:-120px;

  width:320px;
  height:320px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(56,189,248,0.12),
    transparent 70%
  );

  pointer-events:none;
}

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

.footer-container{

  position:relative;

  max-width:1250px;

  margin:auto;

  display:grid;

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

  gap:45px;

  align-items:flex-start;

  padding-bottom:28px;
}

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

.footer-logo-box{

  width:118px;
  height:118px;

  border-radius:50%;

  background:
  linear-gradient(
    145deg,
    #ffffff,
    #eef9ff
  );

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

  overflow:hidden;

  margin-bottom:22px;

  border:
  4px solid rgba(14,165,233,0.08);

  box-shadow:
  0 15px 35px rgba(14,165,233,0.10),
  inset 0 2px 10px rgba(255,255,255,0.9);

  transition:0.4s ease;
}

.footer-logo-box:hover{

  transform:
  translateY(-4px)
  scale(1.03);
}

.footer-logo{

  width:78px;
  height:78px;

  object-fit:contain;
}

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

.footer-about p{

  max-width:360px;

  font-size:15px;

  line-height:1.9;

  color:#475569;

  margin-bottom:24px;
}

/* =========================================
   HEADINGS
========================================= */

.footer-links-area h3,
.footer-contact-area h3{

  position:relative;

  font-size:22px;

  font-weight:700;

  color:#0f172a;

  margin-bottom:24px;
}

/* small underline */
.footer-links-area h3::after,
.footer-contact-area h3::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-8px;

  width:42px;
  height:3px;

  border-radius:20px;

  background:
  linear-gradient(
    90deg,
    #38bdf8,
    #0ea5e9
  );
}

/* =========================================
   LISTS
========================================= */

.footer-links-area ul,
.footer-contact-area ul{

  list-style:none;
}

.footer-links-area ul li,
.footer-contact-area ul li{

  margin-bottom:16px;
}

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

.footer-links-area ul li a{

  position:relative;

  text-decoration:none;

  color:#475569;

  font-size:15px;

  transition:0.3s ease;
}

.footer-links-area ul li a::before{

  content:"";

  position:absolute;

  left:-12px;
  top:50%;

  width:0;
  height:2px;

  background:#0ea5e9;

  transition:0.3s ease;
}

.footer-links-area ul li a:hover{

  color:#0ea5e9;

  padding-left:8px;
}

.footer-links-area ul li a:hover::before{

  width:8px;
}

/* =========================================
   CONTACT
========================================= */

.footer-contact-area ul li{

  color:#475569;

  font-size:15px;

  line-height:1.8;
}

/* =========================================
   SOCIAL ICONS
========================================= */

.footer-social{

  display:flex;

  align-items:center;

  gap:14px;
}

.footer-social a{

  position:relative;

  width:44px;
  height:44px;

  border-radius:50%;

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

  text-decoration:none;

  background:
  linear-gradient(
    145deg,
    #ffffff,
    #f2fbff
  );

  color:#0ea5e9;

  font-size:17px;

  box-shadow:
  0 10px 22px rgba(14,165,233,0.10);

  transition:0.35s ease;

  overflow:hidden;
}

/* shine effect */
.footer-social a::before{

  content:"";

  position:absolute;

  top:0;
  left:-100%;

  width:100%;
  height:100%;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.7),
    transparent
  );

  transition:0.5s;
}

.footer-social a:hover{

  transform:
  translateY(-5px)
  scale(1.06);

  background:
  linear-gradient(
    135deg,
    #38bdf8,
    #0ea5e9
  );

  color:#ffffff;

  box-shadow:
  0 14px 28px rgba(14,165,233,0.25);
}

.footer-social a:hover::before{

  left:100%;
}

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

.footer-bottom{

  max-width:1250px;

  margin:auto;

  padding-top:22px;

  border-top:
  1px solid rgba(14,165,233,0.10);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  flex-wrap:wrap;
}

.footer-bottom p{

  font-size:14px;

  color:#64748b;
}

.footer-bottom span{

  color:#0284c7;

  font-weight:700;
}

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

@media (max-width:900px){

  .footer-container{

    grid-template-columns:
    1fr 1fr;

    gap:40px;
  }
}

@media (max-width:768px){

  .elegant-footer{

    padding:20px 18px 22px;
  }

  .footer-container{

    grid-template-columns:1fr;

    gap:35px;
  }

  .footer-logo-box{

    width:100px;
    height:100px;
  }

  .footer-logo{

    width:66px;
    height:66px;
  }

  .footer-about p{

    max-width:100%;
  }

  .footer-bottom{

    flex-direction:column;

    align-items:flex-start;
  }
}