@import url('variables.css');

        html, body {
            background:#fdf5ff;
        }
 /* =========================
   GLOBAL FIXES
========================= */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
  width: 100%;
  max-width: 100vw;
  font-family: 'Quicksand', sans-serif;
}

/* =========================
   PAGE INTRO SECTION
========================= */
.page-intro {
  text-align: center;
  max-width: 900px;
  margin: 5rem auto 4rem;
  padding: 0 1.5rem;
}

.page-intro h1 {
  font-family: 'Cormorant', serif;
  font-size: 2.8rem;
  color: #4F324A;
  margin-bottom: 1rem;
}

.page-intro p {
  color: #444;
  line-height: 1.7;
  font-size: 1.15rem;
}

/* =========================
   FULL-WIDTH ARTICLE SECTIONS
========================= */
article.section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 5rem clamp(1rem, 10vw, 10rem);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  overflow-x: hidden;
}

/* Gradient backgrounds for each section */
/* ===== SECTION COLOR BANDS ===== */
#echo-3d4d {
  background-color: #fdf5ff;
  color: #4F324A;
}

/* unused dark color */
#echo-2dbaba {
  background-color: #72486a;
  color: #fdf5ff;
}

/* possible backup color: #a688a0 #9b8aa0 */
#geslacht, #echo-2d {
  background-color: #694F62;
  color: #ffffff;
}

/* ===== TEXT CONTRAST IMPROVEMENTS ===== */
#echo-2d h2,
#echo-2d h3,
#geslacht h2,
#geslacht h3 {
  color: #ffffff;
}

#echo-2d p,
#geslacht p {
  color: rgba(255, 255, 255, 0.9);
}

#echo-2d .extra,
#geslacht .extra {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  color: #fff;
}

/* ===== BUTTONS ===== */
#echo-2d a.btn,
#geslacht a.btn {
  background-color: #fdf5ff;
  color: #72486a !important;
  border: none;
}

#echo-2d a.btn:hover,
#geslacht a.btn:hover {
  background-color: #4F324A;
  color: #ffffff !important;
}

#echo-2d a.btn.secondary,
#geslacht a.btn.secondary {
  background: transparent;
  border: 2px solid #fdf5ff;
  color: #ffffff !important;
}

#echo-2d a.btn.secondary:hover,
#geslacht a.btn.secondary:hover {
  background-color: #fdf5ff;
  color: #72486a !important;
}


/* Left column (image) */
article.section > div:first-child {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

article.section img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* Right column (text) */
article.section > div:last-child {
  flex: 1 1 55%;
}

article.section h2 {
  font-family: 'Cormorant', serif;
  color: #4F324A;
  font-size: 2rem;
  margin-top: 0;
}

article.section h3 {
  font-family: 'Quicksand', sans-serif;
  color: #72486a;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

article.section p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Small tip box */
article.section .extra {
  background: rgba(249, 243, 249, 0.7);
  border-left: 4px solid #72486a;
  padding: 1rem;
  border-radius: 6px;
  color: #4F324A;
  font-weight: 500;
}

/* =========================
   CTA BUTTONS
========================= */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.cta-row .btn {
  background: #72486a;
  color: #fff;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: 25px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-row .btn:hover {
  background: #4F324A;
  transform: translateY(-2px);
}

.cta-row .btn.secondary {
  background: transparent;
  color: #72486a;
  border: 2px solid #72486a;
}

.cta-row .btn.secondary:hover {
  background: #72486a;
  color: #fff;
}

/* =========================
   RESPONSIVE BEHAVIOR
========================= */
@media (max-width: 900px) {
  article.section {
    flex-direction: column;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 2rem;
  }

  article.section > div:first-child,
  article.section > div:last-child {
    flex: 1 1 100%;
  }

  article.section img {
    max-width: 90%;
    border-radius: 10px;
  }

  .cta-row {
    justify-content: center;
  }
}

/* =========================
   ALTERNATING LAYOUT
========================= */
article.section:nth-of-type(even) {
  flex-direction: row-reverse;
}

@media (max-width: 900px) {
  article.section:nth-of-type(even) {
    flex-direction: column;
  }
}


/* ========================
    PRICE TAG STYLES
======================== */
.price-tag-light {
          display: inline-block;
          background-color: #f5edf7;
          color: #72486a;
          font-weight: 500;
          border-radius: 8px;
          padding: 0.4rem 0.8rem;
          font-size: 1.05rem;
          margin-top: 0.5rem;
          box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .price-tag-light .old-price {
          text-decoration: line-through;
          opacity: 0.7;
          margin-right: 0.3rem;
        }
        .price-tag-light .arrow {
          margin: 0 0.3rem;
          opacity: 0.6;
          color: #60345e !important;

        }
        .price-tag-light strong {
          color: #60345e;
          font-weight: 600;
        }

        .price-tag-dark {
                  display: inline-block;
                  background-color: var(--primary-color);
                  color: #f5edf7;
                  font-weight: 500;
                  border-radius: 8px;
                  padding: 0.4rem 0.8rem;
                  font-size: 1.05rem;
                  margin-top: 0.5rem;
                  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                }
                .price-tag-dark .old-price {
                  text-decoration: line-through;
                  opacity: 0.7;
                  margin-right: 0.3rem;
                }
                .price-tag-dark .arrow {
                  margin: 0 0.3rem;
                  opacity: 0.6;
                  color: var(--background-color-primary) !important;
                }
                .price-tag-dark strong {
                  color: var(--background-color-primary);
                  font-weight: 600;
                }