/* ========== Footer Base ========== */
.site-footer{
  background:#1a1a1a;
  color:#e5e5e5;
  padding:40px 20px 20px;
  margin-top:0;
}

/* 3-column layout on desktop */
.footer-container{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:48px;
  align-items:start;
  margin-bottom:32px;
}

/* ---------- LEFT: Brand + Address ---------- */
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.footer-logo{max-width:120px;height:auto;}
.footer-address{
  font-style:normal;
  color:#a9a5a5;
  font-size:.95rem;
  line-height:1.8;
}

/* ---------- MIDDLE: Navigation ---------- */
/* your wrapper div also has class "foot-nav" — keep it but we’ll scope carefully */
.footer-section.foot-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}

.footer-title1{
  font-size:1.1rem;
  font-weight:600;
  margin:0 0 6px;
  color:#fff;
  position: relative;
  right: 12%;
}
.footer-title{
  font-size:1.1rem;
  font-weight:600;
  margin:0 0 6px;
  color:#fff;
 
}


/* Ghost {{navigation}} renders a <ul>… */
.foot-nav nav{width:100%;}
.foot-nav .nav{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
}
.foot-nav .nav a{
  color:#a9a5a5;
  text-decoration:none;
  font-size:.95rem;
  transition:color .2s ease;
}
.foot-nav .nav a:hover{ color:#a446a5e3; }

/* ---------- RIGHT: Social Dock ---------- */
.footer-social{
  display:flex;
  flex-direction:column;
  align-items:flex-end;  /* right-align on desktop */
  text-align:right;
  gap:12px;
}

.social-dock-wrapper{
  display:flex;
  justify-content:flex-end; /* right on desktop */
}

.social-dock{
  height:auto;
  padding:0;
}

.social-dock-inner{
  display:flex;
  gap:16px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:12px 16px;
  height:64px;
  align-items:center;
}

/* Dock items (icons) */
.dock-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  color:#9ca3af;
  transition:all .3s cubic-bezier(.33,1,.68,1);
  cursor:pointer;
  text-decoration:none;
}
.dock-item:hover{ width:56px; color:#b86cb7; }

.dock-icon{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; transition:transform .3s cubic-bezier(.33,1,.68,1); }
.dock-item:hover .dock-icon{ transform:scale(1.1); }
.dock-icon svg{ width:24px; height:24px; }

.dock-label{
  position:absolute;
  top:-30px; left:50%;
  transform:translate(-50%,0);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font-size:.75rem;
  white-space:nowrap;
  opacity:0; visibility:hidden;
  transition:all .2s ease;
  pointer-events:none;
}
.dock-item:hover .dock-label{
  opacity:1; visibility:visible; transform:translate(-50%,-10px);
}

/* ---------- Bottom copyright ---------- */
.footer-bottom{
  max-width:1200px;
  margin:0 auto;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
}
.footer-bottom p{
  color:#87888b;
  font-size:1rem;     /* fixed from “1” */
  margin:0;
}

/* ========== Responsive ========== */
/* Responsive Design */
@media (max-width: 968px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-navigation {
    align-items: center;
  }

  .footer-social {
    align-items: center;
  }

  .social-dock-wrapper {
    justify-content: center;
  }

}


@media (max-width: 640px){
  .site-footer{ padding:32px 16px 18px; }
  .footer-container{ gap:28px; }

  .footer-logo{ max-width:110px; }
  .footer-address{ font-size:.92rem; }
  .footer-title1{
    font-size:1rem;
    font-weight:600;
    margin:0 0 6px;
    color:#fff;
    position: relative;
    right: 0%;
  }
  .social-dock-inner{
    gap:12px;
    padding:10px 12px;
    height:56px;
  }
  .dock-item{ width:36px; height:36px; }
  .dock-item:hover{ width:46px; }
  .dock-icon svg{ width:20px; height:20px; }
}