/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Unbounded:wght@600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --first-color: hsl(265, 75%, 48%);
  --second-color: hsl(18, 88%, 58%);
  --title-color: hsl(220, 20%, 8%);
  --text-color: hsl(220, 8%, 35%);
  --white-color: #fff;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.40);

  --body-color: rgba(255, 255, 255, 0.25);
  --container-color: var(--glass-bg);

  --body-font: "Montserrat", sans-serif;
  --second-font: "Unbounded", sans-serif;

  --h1-font-size: 2rem;
  --h3-font-size: 1.15rem;
  --text-size: .95rem;
}

/*=============== GLOBAL ===============*/
body {
  margin: 0;
  background: var(--body-color);
  backdrop-filter: blur(6px);
  font-family: var(--body-font);
}

.contact-container {
  max-width: 900px;
  margin: 6rem auto 10rem;
  padding: 6rem 1.5rem;
}

/*=============== MAIN TITLE ===============*/
.contact-title {
  font-family: var(--second-font);
  font-size: var(--h1-font-size);
  color: var(--title-color);
  margin-bottom: 2.5rem;
  text-align: center;
}

/*=============== CONTACT CARD (GLASS EFFECT) ===============*/
.contact-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  padding: 1.7rem;
  margin-bottom: 2.5rem;
  border-radius: 1.1rem;
  border: 1px solid var(--glass-border);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
  transition: 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact-card:hover {
  transform: translateY(-6px);
  border-color: var(--first-color);
  box-shadow: 0 25px 50px rgba(0,0,0,0.16);
  backdrop-filter: blur(18px);
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--first-color), var(--second-color));
  opacity: 0;
  z-index: -1;
  transition: .35s ease;
}

.contact-card:hover::before {
  opacity: .18;
}

/*=============== TEXT STYLES ===============*/
.contact-heading {
  font-family: var(--second-font);
  font-size: var(--h3-font-size);
  color: var(--title-color);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .7rem;
}

.contact-heading i {
  color: var(--first-color);
  font-size: 1.4rem;
}

.contact-info {
  font-size: var(--text-size);
  color: var(--text-color);
  margin-bottom: 1.2rem;
}

.contact-detail {
  font-size: .95rem;
  color: var(--title-color);
  margin: .35rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.contact-detail i {
  color: var(--second-color);
  font-size: 1.2rem;
}

.contact-info-small {
  margin-top: 1rem;
  color: var(--text-color);
  font-size: .85rem;
}

/*=============== MAP WRAPPER ===============*/
.map-wrapper {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 1rem;
  margin-top: 1rem;

  display: flex;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.35);
}

.map-wrapper iframe {
  width: 80%;
  max-width: 600px;
  height: 350px;
  border: 0;
  border-radius: 1rem;
}

/*=============== RESPONSIVE ===============*/
@media (max-width: 650px) {
  .contact-heading,
  .contact-info,
  .contact-detail {
    text-align: center;
    justify-content: center;
  }

  .map-wrapper iframe {
    width: 100%;
    height: 320px;
  }
}

/* ===================== REPEATING SCROLL FADE ===================== */
.scroll-fade {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(10px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Delay options */
.delay-1  { transition-delay: .15s; }
.delay-2  { transition-delay: .30s; }
.delay-3  { transition-delay: .45s; }
.delay-4  { transition-delay: .60s; }
.delay-5  { transition-delay: .75s; }
.delay-6  { transition-delay: .90s; }
.delay-7  { transition-delay: 1.05s; }
.delay-8  { transition-delay: 1.20s; }
.delay-9  { transition-delay: 1.35s; }
.delay-10 { transition-delay: 1.50s; }


/* Mobile optimisation */
@media (max-width: 768px) {
  .scroll-fade {
    transform: translateY(25px);
    filter: blur(6px);
  }
}