/* =========================================
   FONTY LOKALNE (SELF-HOSTED)
   ========================================= */

/* 1. PLAYFAIR DISPLAY (Nagłówki) */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('fonts/playfair-display-v40-latin_latin-ext-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500; /* Medium */
  src: url('fonts/playfair-display-v40-latin_latin-ext-500.woff2') format('woff2');
  font-display: swap;
}



/* 2. LATO (Tekst główny) */

/* 3. INTER (Cennik / Usługi) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
  font-display: swap;
}



@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600; /* SemiBold */
  src: url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
  font-display: swap;
}





      :root {
        --deep-green: #1a3b2e;
        --darker-green: #0f2419;
        --gold: #d4af37;
        --gold-light: #e8c65a;
        --powder-pink: #e8b4cb;
        --light-pink: #f5e6ed;
        --white: #ffffff;
        --text-dark: #1a3b2e;
        --text-light: #ffffff;
        --forest-green: #1a3b2e;
        --dark-green: #0f2419;
        --rose: #e8b4cb;
        --light-rose: #f5e6ed;
         --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
      }

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

      html,
      body {
        height: 100%;
        width: 100%;
      }

      body {
        font-family: var(--font-body); font-weight: 400; 
        color: var(--text-dark);
        line-height: 1.6;
        overflow-x: hidden;
      }
h1, h2, h3, .section-title { font-family: var(--font-head); font-weight: 700; }
      .app-wrapper {
        width: 100%;
        min-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
      }












/* CTA link */
.walentynki-cta{
  position: relative;
}

/* Złoty badge z glow + pulse */
.val-badge{
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;

  color: #2a1a00;
  background: linear-gradient(135deg, #ffef9a, #ffd24d, #ffb300);
  border: 1px solid rgba(255, 200, 0, 0.65);

  box-shadow:
    0 0 0 0 rgba(255, 200, 0, 0.0),
    0 8px 18px rgba(0,0,0,0.12);

  animation: valPulse 1.6s ease-in-out infinite;
  transform-origin: center;
}

/* Pulsowanie “premium”, nie krzykliwe */
@keyframes valPulse{
  0%, 100% { transform: translateY(-1px) scale(1); filter: saturate(1); }
  50%      { transform: translateY(-1px) scale(1.06); filter: saturate(1.15); }
}

/* Krótki blink co jakiś czas (włączany klasą z JS) */
.val-badge.val-blink{
  animation: valBlink 0.6s ease-in-out 2, valPulse 1.6s ease-in-out infinite;
}

@keyframes valBlink{
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}

/* Dodatkowy glow na hover (ładn*






















      h1,
      h2,
      h3,
      h4 {
        font-weight: 600;
      }
      /* Klasa początkowa dla obrazków - ukryta i lekko przesunięta */
      .reveal-img {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.6s ease-out,
          transform 0.6s ease-out;
        will-change: opacity, transform;
      }

      /* Klasa, którą doda JS gdy obrazek wejdzie w widok */
      .reveal-img.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* Zapobieganie skakaniu layoutu (Layout Shift) - ważne dla SEO */
      .gallery__card,
      .instagram-item {
        background-color: #f0f0f0; /* Kolor tła zanim załaduje się zdjęcie */
      }
      /* gallery */
      .gallery {
        --bg: var(--light-pink);
        --primary: #1a3b2e;
        --accent: #d4af37;
        background: var(--bg);
        padding: clamp(48px, 6vw, 80px) clamp(16px, 4vw, 40px);
        width: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c-2 8-8 14-16 16 8 2 14 8 16 16 2-8 8-14 16-16-8-2-14-8-16-16z' fill='%23eed4e0' fill-opacity='0.4'/%3E%3C/svg%3E");
        background-attachment: fixed;
      }

      .gallery * {
        box-sizing: border-box;
      }

      .gallery__inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        gap: clamp(24px, 4vw, 50px);
        justify-items: center;
      }

      .gallery__title {
        margin: 0;
        text-align: center;
        letter-spacing: 1px;
        color: var(--primary);
        font-family:var(--font-head);
        font-weight: 500;
        font-size: clamp(28px, 3.4vw, 42px);
        line-height: 1.15;
      }

      .gallery__grid {
        width: 100%;
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        align-items: stretch;
      }

      .gallery__card {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(26, 59, 46, 0.15);
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
        background: #000;
        /* responsywna “wysokość” bez sztywnych px */
        aspect-ratio: 4 / 5;
        min-height: 320px;
      }

      .gallery__card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(26, 59, 46, 0.25);
      }

      .gallery__img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        transform: scale(1.02);
      }

      .gallery__card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 55%,
          rgba(15, 36, 25, 0.75) 100%
        );
        pointer-events: none;
      }

      .gallery__overlay {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 18px;
        z-index: 1;
      }

      .gallery__itemTitle {
        margin: 0;
        color: #fff;
        font-family: var(--font-body);
        font-weight: 500;
        font-size: clamp(18px, 2vw, 20px);
        line-height: 1.15;
      }

      .gallery__itemDate {
        margin: 6px 0 0 0;
        color: var(--accent);
        font-family:
          var(--font-body);
        font-weight: 300;
        font-size: 13px;
      }

      .gallery__cta {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: var(--gold);
        color: #fff;
        padding: 16px 34px;
        border-radius: 999px;
        border: 0;
        text-decoration: none;
        font-family:
          var(--font-body);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 1px;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(26, 59, 46, 0.3);
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease,
          background 0.25s ease;
      }

      .gallery__cta:hover {
        background: #0f2419;
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(26, 59, 46, 0.4);
      }

      .gallery__ctaIcon {
        width: 20px;
        height: 20px;
        display: block;
        object-fit: contain;
        transition: transform 0.25s ease;
      }

      .gallery__cta:hover .gallery__ctaIcon {
        transform: translateX(4px);
      }
      .gallery a svg {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease;
      }
      /* drobna korekta na bardzo wąskich ekranach */
      
      /* Navigation */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 1rem 2rem;
        background: linear-gradient(
          to bottom,
          rgba(15, 36, 25, 0.9),
          transparent
        );
        transition: background 0.3s ease;
      }

      .nav.scrolled {
        background: rgba(15, 36, 25, 0.95);
        backdrop-filter: blur(10px);
      }

      .nav-container {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .nav-logo {
        font-family: var(--font-head);
        font-size: 1.5rem;
        color: var(--gold);
        text-decoration: none;
        letter-spacing: 2px;
      }

      .nav-links {
        display: flex;
        gap: 2rem;
        list-style: none;
      }

      .nav-links a {
        color: var(--white);
        text-decoration: none;
        font-size: 0.9rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: color 0.3s ease;
        position: relative;
      }

      .nav-links a::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--gold);
        transition: width 0.3s ease;
      }

      .nav-links a:hover {
        color: var(--gold);
      }

      .nav-links a:hover::after {
        width: 100%;
      }

      .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
      }

      .mobile-menu-btn span {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--gold);
        margin: 5px 0;
        transition: 0.3s;
      }

      .hero {
        min-height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
      }
      .hero img {
        max-width: 100%;
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          var(--darker-green) 0%,
          var(--deep-green) 50%,
          #1e4d3d 100%
        );
      }

      .hero-pattern {
        position: absolute;
        inset: 0;
        opacity: 0.1;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c-2 8-8 14-16 16 8 2 14 8 16 16 2-8 8-14 16-16-8-2-14-8-16-16z' fill='%23d4af37' fill-opacity='0.4'/%3E%3C/svg%3E");
      }

      .hero-content {
        position: relative;
        z-index: 10;
        padding: 4rem;
        animation: fadeInUp 1s ease;
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
.hero-logo img{
    width: 250px;
    height: 250px;
    display: block;
}
      .hero-logo {
        width: 250px;
        height: 250px;
        margin: 0 auto 2rem;

        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .hero-logo svg {
        width: 60px;
        height: 60px;
        fill: var(--gold);
      }

      .hero h1 {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        color: var(--gold);
        letter-spacing: 8px;
        margin-bottom: 1rem;
        text-transform: uppercase;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      }

      .hero-subtitle {
        font-size: clamp(1rem, 2vw, 1.3rem);
        color: var(--powder-pink);
        letter-spacing: 4px;
        margin-bottom: 3rem;
        font-weight: 300;
      }

      .hero-buttons {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        flex-wrap: wrap;
      }

      .btn {
        padding: 1rem 2.5rem;
        font-size: 0.9rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 50px;
        transition: all 0.3s ease;
        cursor: pointer;
        font-family: var(--font-body);
        font-weight: 500;
      }

      .btn-primary {
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--gold-light) 100%
        );
        color: var(--darker-green);
        border: none;
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
      }

      .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
      }

      .btn-outline {
        background: transparent;
        color: var(--gold);
        border: 2px solid var(--gold);
      }

      .btn-outline:hover {
        background: var(--gold);
        color: var(--darker-green);
      }

      /* Section Styles */
      .section {
        padding: 6rem 2rem;
      }

      .section-container {
        max-width: 1200px;
        margin: 0 auto;
      }

      .section-title {
        font-size: clamp(2rem, 4vw, 3rem);
        text-align: center;
        margin-bottom: 1rem;
        position: relative;
      }

      .section-title::after {
        content: "";
        display: block;
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), var(--gold-light));
        margin: 1rem auto 0;
      }

      .section-subtitle {
        text-align: center;
        color: #666;
        margin-bottom: 4rem;
        font-size: 1.1rem;
      }

      /* About Section */
      .about {
        background: var(--white);
      }

      .about-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }

      .about-image-container {
        position: relative;
      }

      .about-image-bg {
        position: absolute;
        top: 20px;
        left: 20px;
        right: -20px;
        bottom: -20px;
        background: var(--light-pink);
        border-radius: 20px;
      }

      .about-image {
        position: relative;
        width: 100%;
        aspect-ratio: 3/4;
        background: linear-gradient(
          135deg,
          var(--powder-pink) 0%,
          var(--light-pink) 100%
        );
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .about-image img {
         width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
      }

      .about-text h2 {
        color: var(--deep-green);
        margin-bottom: 1.5rem;
        font-size: 2.5rem;
      }

      .about-text h2::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background: var(--gold);
        margin-top: 1rem;
      }

      .about-text p {
        color: #555;
        margin-bottom: 1.5rem;
        font-size: 1.05rem;
      }

      .about-name {
        font-family: var(--font-body);
        color: var(--gold);
        font-size: 1.3rem;
        font-style: italic;
      }

      .about-features {
        display: flex;
        gap: 2rem;
        margin-top: 2rem;
      }

      .about-feature {
        text-align: center;
      }

      .about-feature-number {
        font-family: var(--font-body);
        font-size: 2.5rem;
        color: #7a5a00;
      }

      .about-feature-label {
        font-size: 0.85rem;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      /* Services Section */

      .services {
        padding: 80px 0;
        background: var(--forest-green);
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10c-5 15-20 25-35 30 15 5 30 15 35 30 5-15 20-25 35-30-15-5-30-15-35-30z' fill='%232d453c' fill-opacity='1'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%232d453c'/%3E%3Ccircle cx='80' cy='80' r='3' fill='%232d453c'/%3E%3C/svg%3E");
        background-attachment: fixed;
      }

      .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 16px;
      }

      .services__header {
        text-align: center;
        margin-bottom: 64px;
      }

      .services__title {
        margin: 0 0 16px;
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 40px;
        line-height: 1.1;
        color: #fff;
      }

      .section-divider {
        height: 2px;
        width: 100px;
        margin: 0 auto 24px;
        background: linear-gradient(
          90deg,
          transparent 0%,
          var(--gold) 50%,
          transparent 100%
        );
      }

      .services__lead {
        margin: 0 auto;
        max-width: 48rem;
        font-family:
          var(--font-body);
        font-size: 18px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.8);
      }

      .services__grid {
        display: grid;
        gap: 32px;
      }

      @media (min-width: 768px) {
        .container {
          padding: 0 24px;
        }
        .services__grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .services__title {
          font-size: 48px;
        }
      }

      @media (min-width: 1024px) {
        .container {
          padding: 0 32px;
        }
        .services__grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      .service-card {
        border-radius: 16px;
        padding: 32px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.95) 0%,
          rgba(245, 230, 237, 0.95) 100%
        );
      }

      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      }

      .service-card__head {
        text-align: center;
        margin-bottom: 24px;
      }

      .service-card__icon {
        width: 80px;
        height: 80px;
        border-radius: 999px;
        margin: 0 auto 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .service-card__icon img {
        max-width: 100%;
        height: auto;
        display: block;
      }

      .service-card__title {
        margin: 0;
        font-family: var(--font-head);
        font-weight: 600;
        font-size: 24px;
        color: var(--forest-green);
      }

      .service-card__list {
        margin: 0 0 24px;
        padding: 0;
        list-style: var(--font-body);
        color: rgb(75 85 99);
      }

      .service-card__list li {
        padding: 6px 0;
        list-style: none;
      }

      .service-card__price {
        text-align: center;
        font-family:
          var(--font-body);
        font-weight: 600;
        color: var(--gold);
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Transformations Section */
      .transformations {
        background: var(--light-pink);
        position: relative;
      }

      .transformations .section-title {
        color: var(--deep-green);
      }

      .transformations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 3rem;
      }

      .transformation-card {
        background: var(--white);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease;
      }

      .transformation-card:hover {
        transform: translateY(-10px);
      }

      .transformation-before-after {
        position: relative;
        width: 100%;
        height: 300px;
        background: var(--powder-pink);
        overflow: hidden;
      }

      .transformation-slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #1a3b2e 0%, #d4af37 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
      }

      .transformation-info {
        padding: 2rem;
        text-align: center;
      }

      .transformation-info h3 {
        color: var(--deep-green);
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
      }

      .transformation-info p {
        color: #666;
        font-size: 0.95rem;
      }

      /* FAQ Section */
      .faq {
        background: var(--white);
      }

      .faq-grid {
        max-width: 900px;
        margin: 0 auto;
      }

      .faq-item {
        margin-bottom: 1.5rem;
        border-radius: 12px;
        background: var(--white);
        border: 2px solid rgba(212, 175, 55, 0.2);
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .faq-item:hover {
        border-color: var(--gold);
        box-shadow: 0 5px 20px rgba(212, 175, 55, 0.15);
      }

      .faq-question {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 2rem;
        cursor: pointer;
        user-select: none;
        background: var(--white);
      }

      .faq-icon {
        width: 50px;
        height: 50px;
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--gold-light) 100%
        );
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.3s ease;
        font-size: 1.5rem;
        color: var(--deeper-green);
      }

      .faq-question:hover .faq-icon {
        transform: rotate(90deg);
      }

      .faq-text h3 {
        color: var(--deep-green);
        margin-bottom: 0.3rem;
        font-size: 1.2rem;
      }

      .faq-text p {
        color: #4b5563;
        font-size: 0.9rem;
      }

      .faq-answer {
        display: none;
        padding: 0 2rem 2rem 7rem;
        background: rgba(245, 230, 237, 0.5);
        color: #555;
        line-height: 1.8;
        border-top: 1px solid rgba(212, 175, 55, 0.1);
      }

      .faq-answer.show {
        display: block;
        animation: slideDown 0.3s ease;
      }

      @keyframes slideDown {
        from {
          opacity: 0;
          max-height: 0;
        }
        to {
          opacity: 1;
          max-height: 500px;
        }
      }

      /* Transformations Before-After */
      .transformation-slider {
        position: relative;
        background: linear-gradient(
          90deg,
          #1a3b2e 0%,
          #d4af37 50%,
          #1a3b2e 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-weight: bold;
      }

      .transformation-slider::before {
        content: "Przed";
        position: absolute;
        left: 1rem;
        font-size: 0.9rem;
        letter-spacing: 1px;
        opacity: 0.7;
      }

      .transformation-slider::after {
        content: "Po";
        position: absolute;
        right: 1rem;
        font-size: 0.9rem;
        letter-spacing: 1px;
        opacity: 0.7;
      }

      /* Newsletter Section */
      .newsletter {
        background: var(--light-pink);
        position: relative;
        overflow: hidden;
      }

      .newsletter-content {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        padding: 3rem;
        background: var(--white);
        border-radius: 30px;
        box-shadow: 0 15px 60px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 10;
      }

      .newsletter-title {
        color: var(--deep-green);
        font-size: 2.2rem;
        margin-bottom: 1rem;
      }

      .newsletter-subtitle {
        color: #666;
        font-size: 1.2rem;
        margin-bottom: 2.5rem;
      }

      .newsletter-form {
        display: flex;
        gap: 0.8rem;
        max-width: 600px;
        margin: 0 auto;
        flex-wrap: wrap;
      }

      .newsletter-input {
        flex: 1;
        min-width: 200px;
        padding: 1.2rem 1.5rem;
        border: 2px solid var(--gold);
        border-radius: 50px;
        font-family: var(--font-body);
        font-size: 1rem;
        outline: none;
        transition: all 0.3s ease;
      }

      .newsletter-input:focus {
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
      }

      .newsletter-btn {
        padding: 1.2rem 2.5rem;
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--gold-light) 100%
        );
        color: var(--darker-green);
        border: none;
        border-radius: 50px;
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-body);
        white-space: nowrap;
      }

      .newsletter-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
      }

      .newsletter-success {
        display: none;
        margin-top: 1rem;
        padding: 1rem 2rem;
        background: rgba(212, 175, 55, 0.1);
        border-left: 4px solid var(--gold);
        border-radius: 8px;
        color: var(--deep-green);
        text-align: left;
      }

      .newsletter-success.show {
        display: block;
        animation: fadeInUp 0.3s ease;
      }

      /* Blog Section */
      .blog {
        background: var(--white);
      }

      .blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2.5rem;
      }

      .blog-card {
        background: var(--white);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        border: 1px solid rgba(212, 175, 55, 0.1);
      }

      .blog-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        border-color: var(--gold);
      }

      .blog-image {
        width: 100%;
        height: 200px;
        background: linear-gradient(
          135deg,
          var(--deep-green) 0%,
          var(--powder-pink) 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .blog-image svg {
        width: 80px;
        height: 80px;
        opacity: 0.3;
      }

      .blog-content {
        padding: 2rem;
      }

      .blog-category {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: rgba(212, 175, 55, 0.15);
        color: var(--gold);
        border-radius: 50px;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 1rem;
        font-weight: 600;
      }

      .blog-card h3 {
        color: var(--deep-green);
        font-size: 1.4rem;
        margin-bottom: 1rem;
        line-height: 1.4;
      }

      .blog-card p {
        color: #666;
        margin-bottom: 1.5rem;
        line-height: 1.6;
      }

      .blog-read-more {
        display: inline-block;
        color: var(--gold);
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        letter-spacing: 1px;
      }

      .blog-read-more:hover {
        color: var(--deep-green);
        transform: translateX(5px);
      }

      /* Voucher Section */
      .voucher {
        background: linear-gradient(135deg, var(--deep-green) 0%, #0f2419 100%);
        position: relative;
        overflow: hidden;
      }

      .voucher-pattern {
        position: absolute;
        inset: 0;
        opacity: 0.05;
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10c-5 15-20 25-35 30 15 5 30 15 35 30 5-15 20-25 35-30-15-5-30-15-35-30z' fill='%23d4af37' fill-opacity='1'/%3E%3C/svg%3E");
        background-attachment: fixed;
      }

      .voucher-content {
        position: relative;
        z-index: 10;
        max-width: 1000px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
      }

      .voucher-text h2 {
        color: var(--gold);
        font-size: 2.5rem;
        margin-bottom: 1rem;
      }

      .voucher-text p {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.1rem;
        margin-bottom: 2rem;
        line-height: 1.8;
      }

      .voucher-card {
        background: var(--light-pink);
        border-radius: 15px;
        padding: 2.5rem;
        text-align: center;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
      }
      .voucher-card img {
        width: 100%;
        height: 170px;
        display: block;
        object-fit: cover;
        object-position: center;
        transform: scale(1.02);
        border-radius: 22px;
      }
      .voucher-card h3 {
        color: var(--deep-green);
        font-size: 2rem;
        margin-bottom: 0.5rem;
      }

      .voucher-card p {
        color: #666;
        margin-bottom: 2rem;
      }

      .voucher-btn {
        display: inline-block;
        padding: 1rem 2.5rem;
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--gold-light) 100%
        );
        color: var(--darker-green);
        text-decoration: none;
        border-radius: 50px;
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        font-family: var(--font-body);
        font-size: 0.9rem;
      }

      .voucher-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
      }

      /* Instagram Section */
      .instagram {
        background: var(--white);
      }

      .instagram-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.5rem;
      }

      .instagram-item {
        position: relative;
        overflow: hidden;
        border-radius: 15px;
        aspect-ratio: 1;
        background: linear-gradient(
          135deg,
          var(--powder-pink) 0%,
          var(--light-pink) 100%
        );
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }
      .instagram-item a {
        display: block;
        width: 100%;
        height: 100%;
      }
      .instagram-item img,
      .instagram-item video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: opacity 0.4s ease;
      }

      .instagram-item:hover {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      }

      .instagram-item::after {
        content: "♥";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3rem;
        opacity: 0;
        transition: opacity 0.3s ease;
        color: var(--gold);
      }

      .instagram-item:hover::after {
        opacity: 1;
      }

      .instagram-cta {
        text-align: center;
        margin-top: 3rem;
      }

      .instagram-btn {
        display: inline-block;
        padding: 1rem 2.5rem;
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--gold-light) 100%
        );
        color: var(--darker-green);
        text-decoration: none;
        border-radius: 50px;
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        font-family: var(--font-body);
      }

      .instagram-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
      }

      /* Sticky Contact Widget */
      .sticky-widget {
        position: fixed;
        bottom: 2rem;
        right: 6rem;
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        transform: scale(0);
        transition: all 0.3s ease;
      }

      .sticky-widget.visible {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
      }

      .sticky-widget-btn {
        width: 65px;
        height: 65px;
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--gold-light) 100%
        );
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        transition: all 0.3s ease;
        animation: pulse 2s infinite;
      }

      .sticky-widget-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6);
      }

      .sticky-widget-btn svg {
        width: 32px;
        height: 32px;
        fill: var(--deeper-green);
      }

      @keyframes pulse {
        0%,
        100% {
          box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        }
        50% {
          box-shadow: 0 8px 35px rgba(212, 175, 55, 0.6);
        }
      }

      .sticky-widget-menu {
        position: absolute;
        bottom: 80px;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.3s ease;
      }

      .sticky-widget.active .sticky-widget-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .widget-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: var(--white);
        padding: 0.8rem 1.2rem;
        border-radius: 50px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        text-decoration: none;
        color: var(--deep-green);
        font-weight: 600;
        font-size: 0.9rem;
      }

      .widget-item:hover {
        background: var(--light-pink);
        transform: translateX(-10px);
      }

      .widget-item svg {
        width: 20px;
        height: 20px;
        fill: var(--gold);
      }

      /* Pricing Section */
      /* Fonts (dla wyglądu 1:1) */

      /* Theme */

      /* ===== Klasy użyte w #pricing (zamiennik Tailwinda) ===== */
      .bg-white {
        background-color: #fff;
      }
      .py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
      }

      .max-w-7xl {
        max-width: 80rem;
      }
      .max-w-3xl {
        max-width: 48rem;
      }
      .mx-auto {
        margin-left: auto;
        margin-right: auto;
      }

      .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .p-8 {
        padding: 2rem;
      }
      .pb-4 {
        padding-bottom: 1rem;
      }

      .mb-16 {
        margin-bottom: 4rem;
      }
      .mb-8 {
        margin-bottom: 2rem;
      }
      .mb-6 {
        margin-bottom: 1.5rem;
      }
      .mb-4 {
        margin-bottom: 1rem;
      }

      .text-center {
        text-align: center;
      }
      .text-right {
        text-align: right;
      }

      .grid {
        display: grid;
      }
      .gap-8 {
        gap: 2rem;
      }

      .flex {
        display: flex;
      }
      .justify-between {
        justify-content: space-between;
      }
      .items-center {
        align-items: center;
      }

      .rounded-2xl {
        border-radius: 1rem;
      }

      .border-b {
        border-bottom-width: 1px;
        border-bottom-style: solid;
      }
      .border-gold {
        border-color: var(--gold);
      }

      .w-20 {
        width: 5rem;
      }

      .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem;
      }

      .font-playfair {
        font-family: var(--font-head);
      }
      .font-semibold {
        font-weight: 600;
      }
      .font-bold {
        font-weight: 700;
      }

      .text-gray-600 {
        color: #4b5563;
      }
      .text-gold {
        color: var(--gold);
      }
      .text-forest {
        color: var(--forest-green);
      }

      .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
      }
      .text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
      }
      .text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
      }

      /* Responsive (breakpointy jak w Tailwind) */
      @media (min-width: 640px) {
        .sm\:px-6 {
          padding-left: 1.5rem;
          padding-right: 1.5rem;
        }
      }
      @media (min-width: 768px) {
        .md\:text-5xl {
          font-size: 3rem;
          line-height: 1;
        }
        .md\:grid-cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (min-width: 1024px) {
        .lg\:px-8 {
          padding-left: 2rem;
          padding-right: 2rem;
        }
        .lg\:grid-cols-3 {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }

      /* ===== Klasy custom z oryginału ===== */
      .price-card {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.98) 0%,
          rgba(245, 230, 237, 0.98) 100%
        );
        border: 2px solid transparent;
        background-clip: padding-box;
      }
      .price-card:hover {
        border-color: var(--gold);
      }

      /* Reviews Section */
      .reviews {
        background: var(--deep-green);
        position: relative;
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10c-5 15-20 25-35 30 15 5 30 15 35 30 5-15 20-25 35-30-15-5-30-15-35-30z' fill='%232d453c' fill-opacity='1'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%232d453c'/%3E%3Ccircle cx='80' cy='80' r='3' fill='%232d453c'/%3E%3C/svg%3E");
        background-attachment: fixed;
      }

      .reviews .section-title {
        color: var(--white);
      }

      .reviews .section-subtitle {
        color: rgba(255, 255, 255, 0.7);
      }

      .reviews-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;
      }

      .review-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 2rem;
        transition: transform 0.3s ease;
      }

      .review-card:hover {
        transform: translateY(-5px);
      }

      .review-stars {
        display: flex;
        gap: 0.3rem;
        margin-bottom: 1rem;
      }

      .review-stars svg {
        width: 20px;
        height: 20px;
        fill: var(--gold);
      }

      .review-text {
        color: #555;
        font-style: italic;
        margin-bottom: 1.5rem;
        line-height: 1.8;
      }

      .review-author {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .review-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(
          135deg,
          var(--powder-pink),
          var(--light-pink)
        );
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-head);
        color: var(--deep-green);
        font-size: 1.2rem;
      }

      .review-author-name {
        font-weight: 600;
        color: var(--deep-green);
      }

      .review-author-title {
        font-size: 0.85rem;
        color: #4b5563;
      }

      /* Contact Section */
      .contact {
        background: var(--white);
      }

      .contact-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
      }

      .contact-info h3 {
        color: var(--deep-green);
        font-size: 1.8rem;
        margin-bottom: 2rem;
      }

      .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 2rem;
      }

      .contact-icon {
        width: 50px;
        height: 50px;
        background: var(--light-pink);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .contact-icon svg {
        width: 24px;
        height: 24px;
        fill: var(--deep-green);
      }

      .contact-item-content h4 {
        color: var(--deep-green);
        font-size: 1.1rem;
        margin-bottom: 0.3rem;
        font-family: var(--font-body);
        font-weight: 600;
      }

      .contact-item-content p {
        color: #666;
      }

      .contact-map {
        margin-top: 2rem;

        background: var(--light-pink);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .contact-map svg {
        width: 60px;
        height: 60px;
        fill: var(--deep-green);
        opacity: 0.3;
      }

      .contact-form {
        background: var(--light-pink);
        padding: 3rem;
        border-radius: 20px;
        margin-top: 50px;
      }

      .contact-form h3 {
        color: var(--deep-green);
        font-size: 1.8rem;
        margin-bottom: 2rem;
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
      }

      .form-group {
        margin-bottom: 0;
      }

      .form-group label {
        display: block;
        margin-bottom: 0.7rem;
        color: var(--deep-green);
        font-weight: 600;
        font-size: 0.95rem;
      }

      .form-group input,
      .form-group select,
      .form-group textarea {
        width: 100%;
        padding: 1rem 1.5rem;
        border: 2px solid transparent;
        border-radius: 12px;
        font-family: var(--font-body);
        font-size: 1rem;
        transition: all 0.3s ease;
        background: var(--white);
        color: var(--text-dark);
      }

      .form-group select {
        appearance: none;
        cursor: pointer;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
      }

      .form-group input:focus,
      .form-group select:focus,
      .form-group textarea:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
      }

      .form-group textarea {
        min-height: 120px;
        resize: vertical;
        grid-column: 1 / -1;
        margin-bottom: 1.5rem;
      }

      .form-checkbox {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
        grid-column: 1 / -1;
      }

      .form-checkbox input[type="checkbox"] {
        width: 24px;
        height: 24px;
        min-width: 24px;
        margin-top: 0.3rem;
        cursor: pointer;
        accent-color: var(--gold);
      }

      .checkbox-label {
        margin-bottom: 0 !important;
        font-weight: 400 !important;
        font-size: 0.95rem !important;
        color: #555;
      }

      .checkbox-label a {
        color: var(--gold);
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .checkbox-label a:hover {
        color: var(--deep-green);
        text-decoration: underline;
      }

      .form-submit {
        width: 100%;
        padding: 1.2rem;
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--gold-light) 100%
        );
        color: var(--darker-green);
        border: none;
        border-radius: 50px;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-body);
        grid-column: 1 / -1;
      }

      .form-submit:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
      }

      .form-success {
        display: none;
        text-align: center;
        padding: 2rem;
        background: var(--white);
        border-radius: 15px;
        margin-top: 1rem;
        grid-column: 1 / -1;
      }

      .form-success.show {
        display: block;
        animation: fadeInUp 0.5s ease;
      }

      .form-success svg {
        width: 60px;
        height: 60px;
        fill: var(--gold);
        margin-bottom: 1rem;
      }

      .form-success h4 {
        color: var(--deep-green);
        margin-bottom: 0.5rem;
      }

      .form-success p {
        color: #666;
      }

      /* Footer */
      .footer {
        background: var(--darker-green);
        color: var(--white);
        padding: 4rem 2rem 2rem;
      }

      .footer-content {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr;
        gap: 3rem;
      }
      .footer-menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
        row-gap: 0.75rem;
      }
      .footer-menu ul {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
      }
      .footer-brand h3 {
        font-size: 1.8rem;
        color: var(--gold);
        margin-bottom: 1rem;
        letter-spacing: 2px;
      }

      .footer-brand p {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 1.5rem;
        line-height: 1.8;
      }

      .footer-social {
        display: flex;
        gap: 1rem;
      }

      .footer-social a {
        width: 45px;
        height: 45px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
      }

      .footer-social a:hover {
        background: var(--gold);
      }

      .footer-social svg {
        width: 20px;
        height: 20px;
        fill: var(--white);
      }

      .footer-social a:hover svg {
        fill: var(--darker-green);
      }

      .footer-column h4 {
        color: var(--gold);
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
        font-family: var(--font-body);
        font-weight: 600;
        letter-spacing: 1px;
      }

      .footer-column ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .footer-column li {
        margin-bottom: 0;
      }

      .footer-column a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: color 0.3s ease;
        display: inline-flex;
        padding: 0.2rem 0;
      }

      .footer-column a:hover {
        color: var(--gold);
      }

      .footer-column p {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 0.5rem;
      }
      .footer-column a:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 3px;
        border-radius: 4px;
      }
      .footer-bottom {
        max-width: 1200px;
        margin: 3rem auto 0;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .footer-bottom p {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.9rem;
      }

      /* Scroll to top button */
      .scroll-top {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 50px;
        height: 50px;
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          var(--gold-light) 100%
        );
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
      }

      .scroll-top.visible {
        opacity: 1;
        visibility: visible;
      }

      .scroll-top:hover {
        transform: translateY(-5px);
      }

      .scroll-top svg {
        width: 24px;
        height: 24px;
        fill: var(--darker-green);
      }

      /* Mobile Styles */
      @media (max-width: 992px) {
        .nav-links {
          display: none;
        }

        .mobile-menu-btn {
          display: block;
        }

        .about-content {
          grid-template-columns: 1fr;
          gap: 3rem;
        }

        .about-image-container {
          max-width: 400px;
          margin: 0 auto;
        }

        .contact-content {
          display: block;
        }
        .footer-brand {
          grid-column: 1 / -1;
        }
        .footer-content {
          grid-template-columns: 1fr 1fr;
        }

        .voucher-content {
          grid-template-columns: 1fr;
        }
        
      }

      @media (max-width: 768px) {
        .section {
          padding: 4rem 1.5rem;
        }
.form-row{ grid-template-columns: unset}
        .hero-buttons {
          flex-direction: column;
          align-items: center;
        }

        .btn {
          width: 100%;
          max-width: 280px;
          text-align: center;
        }

        .about-features {
          justify-content: center;
        }

        .pricing-grid {
          grid-template-columns: 1fr;
        }

        .footer-content {
          grid-template-columns: 1fr;
          text-align: center;
        }

        .footer-social {
          justify-content: center;
        }

        .footer-bottom {
          flex-direction: column;
          text-align: center;
        }

        .newsletter-form {
          flex-direction: column;
        }

        .newsletter-input,
        .newsletter-btn {
          width: 100%;
        }

        .instagram-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      html {
        scroll-behavior: smooth;
      }
      @media (max-width: 480px) {
        .footer-menu {
          grid-template-columns: 1fr;
        }
      }
      @view-transition {
        navigation: auto;
      }
@media (max-width: 420px) {
        .gallery__grid {
          gap: 18px;
        }
        .gallery__overlay {
          left: 14px;
          right: 14px;
          bottom: 14px;
        }
        .voucher-card{
          height:unset !important; 
        }
            
      }