/* ═══════════════════════════════════════════════════════════
   MEDITERAN COMPANY — PREMIUM FOOTER REDESIGN
   Color palette derived from brand logo:
   - Deep Navy:    #0C2D51  (background)
   - Dark Navy:    #0F3460  (secondary bg)
   - Brand Navy:   #1E3A5F  (logo body)
   - Brand Teal:   #4DBACD  (primary accent)
   - Light Cyan:   #7DD4E0  (highlight accent)
   - Text:         #C8D8E8  (body copy)
   ═══════════════════════════════════════════════════════════ */

/* ─── Base ────────────────────────────────────────────────── */
.ft-redesign {
  position: relative;
  background: #0C2D51;
  color: #C8D8E8;
  overflow: hidden;
  font-family: "Raleway", sans-serif;
}

/* ─── Animated glow line at top ──────────────────────────── */
.ft-glow-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #1E3A5F 15%,
    #4DBACD 35%,
    #7DD4E0 50%,
    #4DBACD 65%,
    #1E3A5F 85%,
    transparent 100%
  );
  animation: ftGlowPulse 6s ease-in-out infinite;
}

@keyframes ftGlowPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ─── Background FX layer ────────────────────────────────── */
.ft-bg-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ft-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.07;
}

.ft-orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #4DBACD, transparent 70%);
  top: -120px;
  right: -100px;
}

.ft-orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #1E3A5F, transparent 70%);
  bottom: -80px;
  left: -60px;
}

.ft-noise {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}

/* ─── Main content area ──────────────────────────────────── */
.ft-main {
  position: relative;
  z-index: 1;
  padding: 72px 0 48px;
}

/* ─── Grid: 4 columns ────────────────────────────────────── */
.ft-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 56px;
}

/* ─── Brand column ───────────────────────────────────────── */
.ft-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.ft-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0%, #f8fcfd 100%);
  border: 3px solid #ffffff;
  box-shadow:
    0 0 0 1px rgba(77, 186, 205, 0.2),
    0 0 0 8px rgba(77, 186, 205, 0.06),
    0 0 0 12px rgba(77, 186, 205, 0.12),
    0 0 30px rgba(77, 186, 205, 0.15),
    0 8px 40px rgba(0, 0, 0, 0.25),
    inset 0 2px 6px rgba(77, 186, 205, 0.08);
  position: relative;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-logo::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2px dashed rgba(77, 186, 205, 0.25);
  pointer-events: none;
  animation: ftSealSpin 40s linear infinite;
}

.ft-logo::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 30deg,
    rgba(77, 186, 205, 0.15) 30deg 60deg,
    transparent 60deg 90deg,
    rgba(77, 186, 205, 0.15) 90deg 120deg,
    transparent 120deg 150deg,
    rgba(77, 186, 205, 0.15) 150deg 180deg,
    transparent 180deg 210deg,
    rgba(77, 186, 205, 0.15) 210deg 240deg,
    transparent 240deg 270deg,
    rgba(77, 186, 205, 0.15) 270deg 300deg,
    transparent 300deg 330deg,
    rgba(77, 186, 205, 0.15) 330deg 360deg
  );
  opacity: 0.4;
  pointer-events: none;
  animation: ftSealSpinReverse 50s linear infinite;
  z-index: -1;
}

@keyframes ftSealSpin {
  to { transform: rotate(360deg); }
}

@keyframes ftSealSpinReverse {
  to { transform: rotate(-360deg); }
}

.ft-logo:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow:
    0 0 0 1px rgba(77, 186, 205, 0.4),
    0 0 0 8px rgba(77, 186, 205, 0.12),
    0 0 0 12px rgba(77, 186, 205, 0.2),
    0 0 40px rgba(77, 186, 205, 0.3),
    0 12px 50px rgba(0, 0, 0, 0.3),
    inset 0 2px 8px rgba(77, 186, 205, 0.12);
}

.ft-logo img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.ft-brand-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(200, 216, 232, 0.55);
  max-width: 260px;
  letter-spacing: 0.2px;
}

/* ─── Social links ───────────────────────────────────────── */
.ft-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.ft-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(77, 186, 205, 0.06);
  border: 1px solid rgba(77, 186, 205, 0.1);
  color: rgba(200, 216, 232, 0.6);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-social-link:hover {
  background: rgba(77, 186, 205, 0.12);
  border-color: rgba(77, 186, 205, 0.3);
  color: #7DD4E0;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(77, 186, 205, 0.15);
}

.ft-social-link svg {
  width: 18px;
  height: 18px;
}

/* ─── Column headings ────────────────────────────────────── */
.ft-heading {
  font-family: "Raleway", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  position: relative;
}

.ft-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #4DBACD, #7DD4E0);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-col:hover .ft-heading::after {
  width: 48px;
}

/* ─── Footer links ───────────────────────────────────────── */
.ft-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ft-links li a {
  font-family: "Raleway", sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(200, 216, 232, 0.6);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px 0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1.4;
}

.ft-links li a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: #4DBACD;
  margin-right: 0;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-links li a:hover {
  color: #fff;
  transform: translateX(6px);
}

.ft-links li a:hover::before {
  width: 14px;
  margin-right: 8px;
}

.ft-links li a.active {
  color: #4DBACD;
  font-weight: 600;
}

.ft-links li a.active::before {
  width: 14px;
  margin-right: 8px;
  background: #4DBACD;
}

/* ─── Contact items ──────────────────────────────────────── */
.ft-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ft-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(200, 216, 232, 0.6);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
}

.ft-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(77, 186, 205, 0.06);
  border: 1px solid rgba(77, 186, 205, 0.1);
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  color: rgba(200, 216, 232, 0.55);
}

.ft-contact-icon svg {
  width: 16px;
  height: 16px;
}

.ft-contact-item span:last-child {
  font-family: "Raleway", sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  transition: color 0.3s ease;
}

a.ft-contact-item:hover {
  transform: translateX(4px);
}

a.ft-contact-item:hover .ft-contact-icon {
  background: rgba(77, 186, 205, 0.15);
  border-color: rgba(77, 186, 205, 0.35);
  color: #7DD4E0;
  box-shadow: 0 4px 16px rgba(77, 186, 205, 0.12);
}

a.ft-contact-item:hover span:last-child {
  color: #fff;
}

/* ─── Bottom bar ─────────────────────────────────────────── */
.ft-bar {
  position: relative;
  z-index: 1;
  padding: 20px 0;
}

.ft-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #1E3A5F 15%,
    #4DBACD 35%,
    #7DD4E0 50%,
    #4DBACD 65%,
    #1E3A5F 85%,
    transparent 100%
  );
  animation: ftGlowPulse 6s ease-in-out infinite;
}

.ft-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ft-copy,
.ft-dev {
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(200, 216, 232, 0.35);
  margin: 0;
  letter-spacing: 0.3px;
}

.ft-dev a {
  color: #4DBACD;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.ft-dev a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #4DBACD;
  transition: width 0.3s ease;
}

.ft-dev a:hover {
  color: #7DD4E0;
}

.ft-dev a:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media only screen and (max-width: 1200px) {
  .ft-main {
    padding: 56px 0 40px;
  }

  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
  }

  .ft-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
  }

  .ft-logo {
    align-self: center;
  }

  .ft-brand-desc {
    text-align: center;
    max-width: 340px;
  }
}

@media screen and (max-width: 768px) {
  .ft-main {
    padding: 48px 0 36px;
  }

  .ft-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ft-logo {
    align-self: center;
  }

  .ft-col {
    align-items: center;
    text-align: center;
  }

  .ft-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .ft-col:hover .ft-heading::after {
    width: 48px;
  }

  .ft-links {
    align-items: center;
  }

  .ft-links li a:hover {
    transform: none;
  }

  .ft-links li a:hover::before {
    width: 0;
    margin-right: 0;
  }

  .ft-contact {
    align-items: center;
  }

  .ft-social {
    justify-content: center;
  }

  .ft-bar-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  .ft-main {
    padding: 40px 0 32px;
  }

  .ft-logo {
    width: 150px;
    height: 150px;
  }

  .ft-logo img {
    width: 95px;
    height: 95px;
  }

  .ft-brand-desc {
    font-size: 13px;
  }

  .ft-heading {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .ft-links li a {
    font-size: 13px;
  }

  .ft-contact-icon {
    width: 32px;
    height: 32px;
  }

  .ft-contact-item span:last-child {
    font-size: 13px;
  }

  .ft-social-link {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .ft-social-link svg {
    width: 16px;
    height: 16px;
  }

  .ft-copy,
  .ft-dev {
    font-size: 11px;
  }

  .ft-orb--1 {
    width: 300px;
    height: 300px;
  }

  .ft-orb--2 {
    width: 250px;
    height: 250px;
  }
}