/* ============================================================
   Footer — Styles
   Design: Dark navy, Playfair headline, Poppins body
   ============================================================ */

/* ── Local design tokens ── */
.site-footer {
  background-color : var(--color-blue);
  position         : relative;
  overflow         : hidden;
  padding-top: clamp(50px, 4.167vw, 80px);
}

/* Decorative diamond watermark — mirrors brand logo */

@keyframes footer-watermark-before {
  0%   { transform: translateY(0px)   rotate(0deg);   opacity: 0.10; }
  50%  { transform: translateY(-18px) rotate(6deg);   opacity: 0.16; }
  100% { transform: translateY(0px)   rotate(0deg);   opacity: 0.10; }
}

@keyframes footer-watermark-after {
  0%   { transform: translateY(0px)   rotate(0deg);   opacity: 0.10; }
  50%  { transform: translateY(18px)  rotate(-6deg);  opacity: 0.16; }
  100% { transform: translateY(0px)   rotate(0deg);   opacity: 0.10; }
}

.site-footer::before {
  content          : '';
  position         : absolute;
  top              : 5%;
  left             :-9.115vw;
  width            : 18.229vw;
  aspect-ratio     : 1 / 1;
  background       : url('../images/vector.png') no-repeat center / 100%;
  pointer-events   : none;
  z-index          : 0;
  opacity          : 0.1;
  animation        : footer-watermark-before 8s ease-in-out infinite;
}

.site-footer::after {
  content          : '';
  position         : absolute;
  bottom           : 0%;
  right            :-9.115vw;
  width            : 18.229vw;
  aspect-ratio     : 1 / 1;
  background       : url('../images/vector.png') no-repeat center / 100%;
  pointer-events   : none;
  z-index          : 0;
  opacity          : 0.1;
  animation        : footer-watermark-after 8s ease-in-out 4s infinite;
}

/* All direct children sit above the watermark */
.site-footer > * {
  position : relative;
  z-index  : 1;
}


/* ============================================================
   1. Pre-footer CTA Band
   ============================================================ */


.footer-cta-headline {
  font-size    : clamp(25px, 2.604vw, 50px);
  font-weight  : 400;
  color        : var(--color-white);
  line-height  : 1.25;
  margin       : 0;
}

.footer-cta-headline span {
  font-weight : 700;
}




/* Divider line below CTA band */
.footer-cta-band{
  border-bottom :1px solid rgb(255 255 255 / 25%);
  padding-bottom: clamp(30px, 3vw, 45px);
  margin-bottom: clamp(30px, 3vw, 45px);
}


/* ============================================================
   2. Main Footer — Three-column grid
   ============================================================ */

   .footLogo {display: block; width: clamp(150px, 15.104vw, 290px); margin-bottom: clamp(15px, 1.042vw, 20px); height: auto;}
   .footLogo img {width: 100%; display: block; height: auto;}
/* ── Brand column ── */
.footer-brand-desc {
  font-size   : clamp(13px, 0.833vw, 16px);
  color       : var(--footer-text);
  line-height : 1.8;
  margin      : 0;
}

/* Social icon circles */
.footer-social-link {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background: var(--color-white);
  width           : 40px;
  height          : 40px;
  border          : 1px solid rgba(255, 255, 255, 0.35);
  border-radius   : 100rem;
  text-decoration : none;
  transition      : background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  color        : var(--color-blue);

}

.footer-social-link:hover {
  background   : rgba(255, 255, 255, 0.15);
  color: var(--color-white);
}


/* ── Column headings (Quick Links / Get In Touch) ── */
.footer-col-heading {
  font-size     : clamp(15px, 1.302vw, 25px);
  font-weight   : 700;
  color         : var(--color-white);
  margin-bottom : clamp(15px, 1.563vw, 30px);
}


/* ── Quick Links ── */
.footer-links li + li {
  margin-top : clamp(10px, 0.833vw, 16px);
}

.footer-links a {
  display         : inline-block;
  font-size       : clamp(13px, 0.833vw, 16px);
  color           : var(--color-white);
  transition      : all 0.3s ease;
}

.footer-links a:hover {
opacity: 0.5;  padding-left : 6px;
}


/* ── Contact List ── */
.footer-contact li {
  font-size   : clamp(13px, 0.833vw, 16px);
  color       : var(--color-white);
  line-height : 1.7;
}

.footer-contact-icon {
  color     : var(--footer-icon-color);
  font-size : clamp(15px, 0.938vw, 18px);
  margin-top: 2px;           /* optical alignment with first text line */
}

.footer-contact a {
  color           : var(--footer-text);
  text-decoration : none;
  transition      : color 0.22s ease;
}

.footer-contact a:hover {
  color : var(--footer-white);
}


/* ============================================================
   3. Footer Bottom Bar
   ============================================================ */
.footer-bottom {
  background : var(--footer-bg-bottom);
  border-top : 1px solid rgb(255 255 255 / 25%);
  padding    : clamp(15px, 1.302vw, 25px) 0;
  margin-top    : clamp(25px, 2.604vw, 50px) ;
  font-size: clamp(12px, 0.781vw, 15px);
  color: var(--color-white);
  text-align: center;
}