/* ================= Global styles - RESET, COLORS, TYPOGRAPHY, LAYOUT ================= */

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Lato", sans-serif;
}

:root {
  --primary: #597795;
  --primary-dark: #4a657f;
  --accent: #bdc9c2;
  --accent-strong: #8fafa3;
  --bg-main: #e6eeec;
  --bg-light: #f8faf9;
  --bg-beige: #ede3d9;
  --text-main: #2f3e46;
  --text-secondary: #7a8a8f;
  --white: #ffffff;
  --shadow: rgba(0, 0, 0, 0.05);
}
html {
  scroll-behavior: smooth;
}

/* ================= NAVBAR ================= */
.navbar {
  border-bottom: 4px solid #ffff;
  animation: fadeDown 1s ease forwards;
}
/* Hamburger Menu */
.hamburger {
  cursor: pointer;
  width: 24px;
  height: 24px;
  transition: all 0.25s;
  position: relative;
}

.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: #ffff;
  transform: rotate(0px);
  transition: all 0.5s;
}
.hamburger-middle {
  transform: translateY(7px);
}
.hamburger-bottom {
  transform: translateY(14px);
}
.open {
  transform: rotate(90deg);
  transform: translateY(0px);
}

.open .hamburger-top {
  transform: rotate(45deg) translateY(6px) translate(6px);
}
.open .hamburger-middle {
  display: none;
}
.open .hamburger-bottom {
  transform: rotate(-45deg) translateY(6px) translate(-6px);
}

/* Attach the fadeUp animation to the "mobile-menu-animation" class */
.mobile-menu-animation {
  animation: fadeUp 1s ease forwards;
}

/* ================= HERO ================= */
.hero-section {
  border-bottom: 3px solid #ffff;
  animation: fadeUp 1s ease forwards;
  height: 80vh;
  background:
    linear-gradient(#587797, rgba(40, 40, 40, 0.9)),
    url("https://images.unsplash.com/photo-1664643411326-6c589531be3c?q=80&w=2075&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
      center/cover;
}

.hero-text {
  animation: fadeUp 1s ease forwards;
}
.hero-btn {
  animation: fadeDown 1s ease forwards;
}

/* ================= TREATMENTS ================= */
.card {
  color: white;
  box-shadow: 0 5px 15px #587797;
  transition: 0.3s ease;
  background:
    linear-gradient(#587797, rgba(40, 40, 40, 0.9)),
    url("https://images.unsplash.com/photo-1664643411326-6c589531be3c?q=80&w=2075&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
      center/cover;
}
.card:hover {
  transform: translateY(-8px);
}

/* ================= LATEST POSTS ================= */
.instagram-feed-widget {
  box-shadow: 0 5px 15px #587797;
}

/* ================= CONTACT ================= */
.contact-content {
  color: white;
  background: linear-gradient(#587797, rgba(40, 40, 40, 0.9));
  box-shadow: 0 5px 15px #587797;
}

.contact-flex-btn {
  box-shadow: 3px 5px 10px #959595;
  transition: 0.3s ease;
}
.contact-flex-btn:hover {
  transform: translateY(-8px);
}

/* ================= BOOKINGS (CTA} ================= */
.cta-btn {
  box-shadow: 3px 5px 10px #959595;
  transition: 0.3s ease;
}
.cta-btn:hover {
  transform: translateY(-8px);
}

/* ================= FOOTER ================= */
.socials-btn {
  transition: 0.3s ease;
}
.socials-btn:hover {
  background-color: rgb(71, 71, 71);
}

/* ================= ANIMATIONS =================   */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}