/* ============================================================
   MEGAROYAL — CONTACT PAGE  |  TRUE ZERO-MARGIN FULLSCREEN
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rasa:wght@300;400;500;600&family=Poppins:wght@400;500;600&display=swap');

:root {
  --teal:         #0e759b;
  --teal-dark:    #0a5f80;
  --bg:           #e4e4e4;
  --card-radius:  20px;
  --font-display: "Rasa", Georgia, serif;
  --font-body:    "Poppins", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--bg);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-wrapper {
  width: 100%;
  padding: 0;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 14px 32px;
  background: transparent;
}

.navbar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
}

.nav-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a.active,
.nav-links a:hover { color: var(--teal); }

.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #555;
  flex-wrap: nowrap;
}
.nav-email,
.nav-phone,
.nav-hours { white-space: nowrap; }

.nav-lang {
  background: #e8e8e8;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
}
.nav-cta {
  background: var(--teal);
  color: #fff;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--teal-dark); }


/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #fff;
  aspect-ratio: 1414 / 1000;
}

.hero-image-wrap {
  position: absolute;
  inset: 0;
  background: #fff;
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.hero-slogan {
  position: absolute;
  top: 25%;
  right: 10%;
  z-index: 1;
  width: clamp(220px, 29%, 420px);
  text-align: right;
}
.hero-slogan h1 {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.5vw, 40px);
  font-weight: 400;
  color: #111;
  line-height: 1.3;
  margin: 0;
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-section {
  background: #fff;
  width: 100%;
  padding: 36px 40px 40px;
  margin-top: 16px;
  border-radius: 0;
}

.contact-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.contact-heading {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 400;
  color: #111;
  margin: 0;
  line-height: 1.05;
}
.header-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.header-logo img {
  height: 56px;
  width: auto;
  object-fit: contain;
}

.contact-body {
  display: grid;
  grid-template-columns: minmax(280px, 36%) 1fr;
  gap: 24px;
  align-items: start;
}

.contact-card {
  background: var(--teal);
  border-radius: var(--card-radius);
  padding: 26px 30px 32px;
}
.card-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 500;
  color: #000;
  margin: 0 0 20px;
}

address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.info-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.info-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.mail-icon .mail-svg {
  display: block;
  width: 26px;
  height: 20px;
  background-image: url(img/image.svg);
  background-size: 100% 100%;
}
.info-row p {
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 14px);
  color: #000;
  line-height: 1.6;
  margin: 0;
}
.info-row p a {
  color: inherit;
  text-decoration: none;
}
.info-row p a:hover { text-decoration: underline; }

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
.partner-cell {
  background: #f5f5f5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px;
  height: 100px;
  min-height: 0;
  transition: box-shadow 0.2s;
}
.partner-cell:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.partner-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.LINKK {
  width: 100%;
  max-width: 140px;
  height: 44px;
  background-image: url(img/images-1-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .nav-email,
  .nav-phone,
  .nav-hours { display: none; }

  .contact-body {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .contact-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .navbar {
    padding: 10px 16px;
  }
  .navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    flex-wrap: nowrap;
  }
  .nav-logo img {
    height: 34px;
  }
  .nav-links {
    display: none;
  }
  .nav-actions {
    display: none;
  }

  .hero {
    aspect-ratio: 4 / 3;
    min-height: 220px;
  }
  .hero-image-wrap img {
    object-fit: cover;
    object-position: center center;
  }

  .contact-section {
    padding: 20px 14px 32px;
    margin-top: 10px;
  }

  .contact-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }
  .contact-heading {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.1;
  }
  .header-logo {
    align-items: flex-start;
  }
  .header-logo img {
    height: 40px;
  }

  .contact-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-card {
    padding: 20px 18px 24px;
    border-radius: 14px;
  }
  .card-title {
    font-size: clamp(16px, 4.5vw, 20px);
    margin-bottom: 16px;
  }
  address {
    gap: 14px;
  }
  .info-row {
    gap: 10px;
    align-items: flex-start;
  }
  .info-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .info-row p {
    font-size: 12px;
    line-height: 1.55;
  }

  .partner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .partner-cell {
    height: 76px;
    padding: 6px;
    border-radius: 8px;
  }
}

@media (max-width: 380px) {
  .contact-section {
    padding: 16px 12px 28px;
  }
  .contact-heading {
    font-size: 24px;
  }
  .partner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .partner-cell {
    height: 64px;
  }
  .contact-card {
    padding: 16px 14px 20px;
  }
  .info-row p {
    font-size: 11px;
  }
}


/* ============================================================
   3D & ANIMATION LAYER
   ============================================================ */

/* ── Keyframes ── */
@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-110%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroZoomIn {
  from {
    opacity: 0;
    transform: perspective(1400px) scale(1.07) rotateX(3deg);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) scale(1) rotateX(0deg);
  }
}

@keyframes logoFloat {
  0%,  100% { transform: translateY(0px);   }
  50%        { transform: translateY(-6px);  }
}

@keyframes shimmerSweep {
  0%   { left: -80%; opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

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


/* ── Navbar: 3D glassmorphism ── */
.navbar {
  /* Frosted glass */
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* Multi-layer depth shadow */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -1px 0 rgba(0, 0, 0, 0.06) inset,
    0 8px 32px rgba(0, 0, 0, 0.10),
    0 2px 6px  rgba(0, 0, 0, 0.07);
  /* Glowing bottom rule */
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  /* Entrance slide */
  animation: navSlideDown 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Glow line at bottom of navbar */
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(14, 117, 155, 0.50) 30%,
    rgba(255, 255, 255, 0.60) 50%,
    rgba(14, 117, 155, 0.50) 70%,
    transparent 100%
  );
  animation: glowPulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* Nav links: 3D push-back on hover */
.nav-links li {
  perspective: 320px;
  perspective-origin: center bottom;
}
.nav-links a {
  display: inline-block;
  transition:
    transform  0.28s cubic-bezier(0.16, 1, 0.3, 1),
    color      0.2s,
    text-shadow 0.2s;
}
.nav-links a:hover {
  transform: rotateX(-14deg) translateZ(10px) scale(1.06);
  text-shadow:
    0 5px 16px rgba(14, 117, 155, 0.50),
    0 1px  4px rgba(0, 0, 0, 0.12);
  color: var(--teal) !important;
}
.nav-links a.active {
  transform: rotateX(-7deg) translateZ(5px);
  text-shadow: 0 3px 10px rgba(14, 117, 155, 0.35);
}

/* Nav logo: 3D tilt on hover */
.nav-logo {
  perspective: 500px;
  perspective-origin: 30% 50%;
}
.nav-logo img {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    filter    0.35s;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
  will-change: transform;
}
.nav-logo:hover img {
  transform: rotateY(16deg) rotateX(-4deg) scale(1.08);
  filter: drop-shadow(0 8px 22px rgba(14, 117, 155, 0.40));
}

/* Nav contact info: subtle depth on hover */
.nav-email, .nav-phone, .nav-hours {
  display: inline-block;
  transition: transform 0.22s, color 0.2s;
}
.nav-email:hover, .nav-phone:hover, .nav-hours:hover {
  transform: translateZ(6px) scale(1.04);
  color: var(--teal);
}


/* ── Hero image: load animation + JS-ready ── */
.hero-image-wrap img {
  will-change: transform;
  animation: heroZoomIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  transform-origin: center center;
}

/* When JS takes over, override the animation end-state cleanly */
.hero-image-wrap img.js-tilt {
  animation: none;
}


/* ── Scroll-reveal fade-in ── */
.fade-in {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity   0.80s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.80s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers */
.fade-in[data-delay="1"] { transition-delay: 0.08s; }
.fade-in[data-delay="2"] { transition-delay: 0.16s; }
.fade-in[data-delay="3"] { transition-delay: 0.24s; }
.fade-in[data-delay="4"] { transition-delay: 0.32s; }
.fade-in[data-delay="5"] { transition-delay: 0.40s; }
.fade-in[data-delay="6"] { transition-delay: 0.48s; }
.fade-in[data-delay="7"] { transition-delay: 0.56s; }
.fade-in[data-delay="8"] { transition-delay: 0.64s; }


/* ── Header logo: floating bob ── */
.header-logo img {
  animation: logoFloat 3.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(14, 117, 155, 0.20));
  transition: filter 0.3s;
  will-change: transform;
}
.header-logo img:hover {
  filter: drop-shadow(0 10px 30px rgba(14, 117, 155, 0.45));
}


/* ── Contact heading: subtle hover 3D ── */
.contact-heading {
  display: inline-block;
  transition:
    transform   0.32s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 0.32s;
}
.contact-heading:hover {
  transform: perspective(300px) rotateX(-3deg) translateZ(6px);
  text-shadow: 0 6px 20px rgba(14, 117, 155, 0.18);
}


/* ── Contact card: 3D depth + gradient + glass highlight ── */
.contact-card {
  position: relative;
  overflow: hidden;
  /* Richer gradient instead of flat teal */
  background: linear-gradient(
    142deg,
    #14a4d4 0%,
    var(--teal) 45%,
    #064e68 100%
  ) !important;
  /* Multi-layer shadow for 3D depth */
  box-shadow:
    0 2px  0 rgba(255, 255, 255, 0.20) inset,
    0 -2px 0 rgba(0,   0,   0,   0.20) inset,
    8px 16px 40px rgba(14, 117, 155, 0.30),
    0   4px 10px rgba(0,   0,   0,   0.10);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.12s linear, box-shadow 0.12s linear;
}

/* Glass highlight overlay */
.card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.00) 55%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s;
}
.contact-card:hover .card-shine {
  opacity: 0.65;
}

/* Make card content sit above the shine overlay */
.contact-card > *:not(.card-shine) {
  position: relative;
  z-index: 2;
}


/* ── Partner cells: 3D card tilt + shimmer ── */
.partner-cell {
  position: relative;
  overflow: hidden;
  /* Subtle gradient for depth */
  background: linear-gradient(145deg, #ffffff 0%, #f2f2f2 100%) !important;
  /* Base shadow layering */
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.90) inset,
    0 4px 14px rgba(0, 0, 0, 0.07),
    0 1px  3px rgba(0, 0, 0, 0.05);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.12s linear, box-shadow 0.12s linear,
              background 0.3s;
}
.partner-cell:hover {
  background: linear-gradient(145deg, #ffffff 0%, #e0f4fa 100%) !important;
}

/* Shimmer sweep highlight */
.cell-shine {
  position: absolute;
  top: 0;
  left: -85%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0)    100%
  );
  transform: skewX(-16deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}
.partner-cell:hover .cell-shine {
  opacity: 1;
  animation: shimmerSweep 0.65s ease forwards;
}

/* Images: depth filter on hover */
.partner-cell img {
  transition: filter 0.28s, transform 0.12s linear;
  will-change: transform;
}
.partner-cell:hover img {
  filter: drop-shadow(0 4px 10px rgba(14, 117, 155, 0.20));
}


/* ── Reduced-motion: kill all extras ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in               { opacity: 1; transform: none; }
  .header-logo img       { animation: none; }
  .navbar::after         { animation: none; }
  .hero-image-wrap img   { animation: none; }
}