/* Shared site styles extracted from pages */

#services, 
    #packages,
    #testimonials,
    #contact {
      scroll-margin-top: 100px;
    }

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

.brand-logo img {
      max-width: 100%;
      height: auto;
      display: block;
    }

.brand-logo {
      width: 90px;
      height: 90px;
      flex-shrink: 0;
      border-radius: 50%;
      overflow: hidden;
      background: #ffd1c7;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.25s ease;
    }

.brand-text span:first-child {
      font-size: 1.1rem;
      font-weight: 500;
      letter-spacing: 0.04em;
    }

.brand-text span:last-child {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: #ffd1c7;
    }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }

.main-nav .active {
  text-decoration: underline;
  font-weight: 700;
}


.hamburger-menu span {
      width: 30px;
      height: 3px;
      background: #ffd1c7;
      border-radius: 10px;
      transition: all 0.3s linear;
      position: relative;
      transform-origin: 1px;
    }

.hamburger-menu {
      display: none;
      background: transparent;
      border: none;
      cursor: pointer;
      flex-direction: column;
      justify-content: space-around;
      width: 30px;
      height: 24px;
      padding: 0;
      z-index: 20;
    }

.small {
      font-size: 0.85rem;
      color: #ffe4db;
      opacity: 0.9;
    }
@media (max-width: 720px) {
  header.shrink {
    padding: 0px 24px;
    background: rgba(30, 50, 60, 0.5);
  }
}
@keyframes fadeInUp {
      to { opacity: 1; transform: translateY(0); }
    }

@media (max-width: 720px) {
  header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 24px;
    background: rgba(30, 50, 60, 0.5);
  }

  nav { display: none; }
  .hamburger-menu { display: flex; }

  .brand-logo {
    margin-left: -25px;
    margin-right: -15px;
    transform: scale(0.65);
  }

  header.nav-open nav {
    display: flex;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(30, 50, 60, 0.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }

  header.nav-open nav a {
    margin-left: 0;
    font-size: 1.5rem;
  }

  header.nav-open .hamburger-menu span:first-child { transform: rotate(45deg); }
  header.nav-open .hamburger-menu span:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
  }
  header.nav-open .hamburger-menu span:last-child { transform: rotate(-45deg); }

  main { margin-top: 120px; }
}

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

@media (min-width: 721px) {
      nav { display: flex; }
    }

body::after {
      content: "";
      position: fixed;
      inset: 0;
      background: linear-gradient(
        to bottom right,
        rgba(30, 50, 60, 0.60),
        rgba(250, 220, 200, 0.50)
      );
      z-index: -1;
    }

body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: url("https://images.unsplash.com/photo-1547623641-d2c56c03e2a7?auto=format&fit=crop&w=2048&q=80")
        center center / cover no-repeat;
      z-index: -2;
    }

body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
      line-height: 1.6;
      color: #fff;
      min-height: 100vh;
      overflow-x: hidden;
    }

footer a:hover { text-decoration: underline; }

footer a {
      color: #ffd1c7;
      text-decoration: none;
    }

footer {
      text-align: center;
      margin: 24px 0 10px;
      color: #ffe4db;
      font-size: 0.8rem;
      opacity: 0.9;
    }

h1, h2, h3 { font-weight: 400; }

header.shrink .brand-logo {
      transform: scale(0.65);
    }

header {
      position: fixed;
      top: 0;
      width: 100%;
      background: rgba(30, 50, 60, 0.3);
      backdrop-filter: blur(10px);
      padding: 10px 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 10;
      transition: padding 0.5s ease, background 0.5s ease, backdrop-filter 0.5s ease;
    }

html {
  background-color: rgba(30,50,60,.60); 
}

html {
      scroll-behavior: smooth;
    }

main {
      max-width: 1000px;
      margin: 120px auto 40px;
      padding: 0 16px 40px;
    }

nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0;
      height: 2px;
      background: #ffd1c7;
      transition: width 0.2s ease;
    }

nav a:hover::after {
      width: 100%;
    }

nav a {
      color: #fefefe;
      text-decoration: none;
      margin-left: 1.5rem;
      font-size: 0.95rem;
      font-weight: 300;
      position: relative;
    }

section:nth-of-type(2) { animation-delay: 0.1s; }

section:nth-of-type(3) { animation-delay: 0.2s; }

section:nth-of-type(4) { animation-delay: 0.3s; }

section {
      scroll-margin-top: 120px;
    }
    /* ===== Desktop shrink: make the whole bar feel smaller ===== */
@media (min-width: 721px) {
  header.shrink {
    padding: 0px 52px;                 /* shrink height, keep desktop side padding */
    background: rgba(30, 50, 60, 0.6);
  }

  header.shrink .brand-logo {
    transform: scale(0.75);            /* not as tiny as mobile */
  }

  header.shrink .brand-text span:first-child {
    font-size: 1.0rem;
  }

  header.shrink .brand-text span:last-child {
    font-size: 0.72rem;
  }

  header.shrink nav a {
    font-size: 0.88rem;                /* smaller links */
    margin-left: 1.1rem;               /* tighter spacing */
  }
}