/* ========================================= */
/* MAP SECTION */
/* ========================================= */

.map-section {
  text-align: center;

  max-width: 1180px;

  margin: 110px auto;

  padding: 0 24px;

  position: relative;

  animation:
    fadeUp 0.9s ease;
}

/* subtle glow background */

.map-section::before {
  content: "";

  width: 520px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      rgba(227,6,19,0.06),
      transparent 70%
    );

  position: absolute;

  top: -180px;
  right: -180px;

  pointer-events: none;

  z-index: -1;
}

/* ========================================= */
/* TITLE */
/* ========================================= */

.map-section h2 {
  font-size: 32px;
  font-weight: 700;

  color: #10264a;

  margin-bottom: 24px;

  position: relative;

  display: inline-block;

  letter-spacing: -0.5px;

  animation:
    fadeUp 0.8s ease;
}

/* underline */

.map-section h2::after {
  content: "";

  width: 60px;
  height: 4px;

  background: #e30613;

  border-radius: 100px;

  position: absolute;

  left: 50%;
  bottom: -14px;

  transform: translateX(-50%);

  animation:
    lineGrow 1s ease;
}

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

.map-section p {
  color: #555;

  line-height: 1.8;

  margin-bottom: 18px;

  max-width: 850px;

  margin-left: auto;
  margin-right: auto;

  font-size: 17px;

  transition:
    color 0.3s ease,
    transform 0.3s ease;

  animation:
    fadeUp 1s ease;
}

.map-section p:hover {
  color: #222;

  transform:
    translateY(-2px);
}

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

.map-container {
  position: relative;

  width: 100%;

  padding-bottom: 56.25%;

  height: 0;

  margin-top: 55px;

  overflow: hidden;

  border-radius: 28px;

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

  backdrop-filter: blur(12px);

  box-shadow:
    0 18px 50px rgba(0,0,0,0.08);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;

  animation:
    fadeUp 1.2s ease;
}

/* hover lift */

.map-container:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0 28px 60px rgba(0,0,0,0.12);
}

/* overlay shine */

.map-container::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.18),
      transparent
    );

  transform: skewX(-20deg);

  transition:
    left 0.9s ease;

  z-index: 2;

  pointer-events: none;
}

.map-container:hover::before {
  left: 150%;
}

/* ========================================= */
/* IFRAME */
/* ========================================= */

.map-container iframe {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  border: 0;

  border-radius: 28px;

  transition:
    transform 0.6s ease;
}

/* subtle zoom */

.map-container:hover iframe {
  transform: scale(1.015);
}

/* ========================================= */
/* ANIMATIONS */
/* ========================================= */

@keyframes fadeUp {

  from {
    opacity: 0;

    transform:
      translateY(40px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

@keyframes lineGrow {

  from {
    width: 0;
  }

  to {
    width: 60px;
  }

}

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

@media (max-width: 992px) {

  .map-section {
    margin: 90px auto;
  }

  .map-container {
    border-radius: 22px;
  }

  .map-container iframe {
    border-radius: 22px;
  }

}

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

@media (max-width: 768px) {

  .map-section {
    margin: 70px auto;

    padding: 0 20px;
  }

  .map-section h2 {
    font-size: 28px;
  }

  .map-section p {
    font-size: 16px;

    line-height: 1.7;
  }

  .map-container {
    margin-top: 40px;

    border-radius: 18px;
  }

  .map-container iframe {
    border-radius: 18px;
  }

}

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

@media (max-width: 480px) {

  .map-section {
    margin: 60px auto;

    padding: 0 16px;
  }

  .map-section h2 {
    font-size: 24px;
  }

  .map-section p {
    font-size: 15px;
  }

  .map-container {
    margin-top: 34px;

    border-radius: 16px;
  }

  .map-container iframe {
    border-radius: 16px;
  }

}