.viaoda-libre-regular {
  font-family: "Viaoda Libre", serif;
  font-weight: 400;
  font-style: normal;
}

.gwendolyn-bold {
  font-family: "Gwendolyn", cursive;
  font-weight: 700;
  font-style: normal;
}

.cormorant {
  font-family: "Cormorant", serif;
}

html,
body {
  background: linear-gradient(0deg, #FAFBFD 98%, #7BC5FF 100%);
}

.star-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.star-overlay img {
  position: absolute;
}

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

:root {
  --page-padding: clamp(1rem, 4vw, 5rem);
  --section-spacing: clamp(4rem, 10vh, 12rem);
  --content-max: 85rem;
  --text-max: 65rem;
}

@keyframes text-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* HERO -----------------------------------------*/
.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  /* mobile-safe viewport */
  margin: 0;
  padding: clamp(2rem, 6vw, 6rem) var(--page-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  transform: translateY(20px);
  opacity: 1;
  animation: fadeIn 1.2s ease forwards;
}

.hero h1 {
  font-family: "Gwendolyn", cursive;
  font-weight: 700;
  font-size: clamp(4rem, 15vw, 13.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #D91023;
  line-height: 0.9;
  margin: 0;
}

h1 span {
  color: #901825;
  font-family: Cormorant;
  font-size: clamp(1.75rem, 4vw, 4.625rem);
  font-weight: 400;
  margin-top: 1rem;
}

/* The holidays bring good times with family, tradition, fun, and most of all, food. */
.intro-wrapper {
  display: flex;
  flex-direction: column;
  max-width: var(--content-max);
  margin: clamp(3rem, 8vh, 6rem) auto 0;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 0 var(--page-padding);
}

.sentence-1 p {
  color: #D04E50;
  font-family: Cormorant;
  font-size: clamp(2rem, 5vw, 4.625rem);
  line-height: 1.2;
  margin: 0;
}

.paragraph-1 {
  max-width: 97ch;
  margin-left: 0;
  display: flex;
  justify-content: center;
  height: 100%;
  align-self: center;
}

.paragraph-1 p {
  color: #1B0905;
  font-family: Cormorant;
  font-size: 1.8125rem;
  font-style: normal;
  font-weight: 400;
}

.center-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: var(--content-max);
  margin: clamp(4rem, 10vh, 8rem) auto;
  padding: 0 var(--page-padding);
}

.sentence-2 {
  color: #1B0905;
  font-family: Cormorant;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.625rem);
  line-height: 1.2;
  margin: 0;
}

.word-change {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
  font-size: clamp(2rem, 5vw, 4.625rem);
  padding-top: clamp(2rem, 6vh, 6rem);
  padding-bottom: clamp(2rem, 6vh, 6rem);
  padding-inline: var(--page-padding);
}

.word-change p {
  text-align: center;
  align-self: center;
  color: #7BC5FF;
  font-family: Cormorant;
  line-height: 1.15;
  /* 👈 don’t clamp to 1 */
}

/*UKRAINE------------------------------------*/



.heading-wrapper {
  display: flex;
  padding-top: clamp(4rem, 7vh, 10rem);
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.heading-wrapper img {
  height: auto;
  justify-content: center;
  align-items: center;
  padding-top: 30vh;
  width: clamp(3rem, 8vw, 6rem);
  height: auto;
  padding: 0;
}

.heading-wrapper h4 {
  color: #D04E50;
  font-family: "Viaoda Libre", serif;
  font-size: clamp(3.5rem, 14vw, 14.1875rem);
  font-weight: 400;
  line-height: 0.95;
  margin: 0;

}

.heading-wrapper p {
  color: #BFB4DC;
  font-family: Cormorant;
  font-size: clamp(1.5rem, 5vw, 4.625rem);
  font-weight: 500;
  line-height: 1.1;
  max-width: var(--content-max);
  margin: 0;
}

.image-group {
  position: relative;
  padding-bottom: 50%;
  align-items: center;
}

.image-container-1,
.image-container-2,
.image-container-3,
.image-container-4 {
  position: absolute;
  position: absolute;
  transition: transform 0.8s ease;
}

.image-container-1:hover,
.image-container-2:hover,
.image-container-3:hover,
.image-container-4:hover {
  transform: scale(1.15);
  cursor: none;
}

.image-container-1 {
  max-width: 25%;
  /* eggs */
  height: auto;
  top: 10%;
  left: 0%;
}

.image-container-2 {
  max-width: 45%;
  /* dress */
  height: auto;
  top: 20%;
  left: 30%;
}

.image-container-3 {
  max-width: 20%;
  /* lights */
  left: 70%;
}

.image-container-4 {
  max-width: 20%;
  /* textiles */
  height: auto;
  top: 55%;
  left: 60%;
}

/*KUTIA SECTION 1*/
.kutia-wrapper-1 {
  display: flex;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--content-max);
  margin: clamp(6rem, 12vh, 10rem) auto;
  padding: 0 var(--page-padding);
  flex: 1;
}

.kutia-bowl {
  width: clamp(18rem, 40vw, 34rem);
  height: auto;
  flex-shrink: 0;
}

.kutia-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--text-max);
}

.kutia-intro h5 {
  color: #7BC5FF;
  font-family: Gwendolyn;
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 400;
  line-height: 0.9;
  margin: 0;
}

.kutia-intro p:first-of-type {
  color: #C5AFFF;
  font-family: Cormorant;
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  line-height: 1.3;
  margin: 0;

}

.kutia-intro p:last-child {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  line-height: clamp(1.4, 1.5, 1.65);
  margin: 0;
}

/*KUTIA SECTION 2*/
.bottom-wrapper {
  max-width: var(--content-max);
  margin: clamp(6rem, 18vh, 14rem) auto 0;
  padding: 0 var(--page-padding);
  display: flex;
  justify-content: center;
}

.row-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 8vw, 8rem);
  width: 100%;
}

.list-wrapper {
  color: #D04E50;
  font-family: Cormorant;
  font-size: clamp(1.75rem, 4vw, 3.125rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: right;
  flex: 1;
}

.row-wrapper img {
  width: clamp(12rem, 30vw, 22rem);
  height: auto;
  flex-shrink: 0;
}

.closing-section-k {
  max-width: var(--content-max);
  margin: clamp(4rem, 12vh, 8rem) auto 0;
  padding: 0 var(--page-padding);
}

.link-and-paragraph {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 4vw, 2.5rem);
  width: 100%;
}

.link-and-paragraph a {
  display: inline-block;
  margin: 0;

}

.link-and-paragraph a img {
  display: block;
  width: 170vh;
  max-width: 15rem;
}

.link-and-paragraph p {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.8125rem);
  line-height: clamp(1.4, 1.5, 1.65);
  margin: 0;
  max-width: var(--text-max);
}

.greeting-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.greeting {
  color: #901825;
  font-family: Cormorant;
  font-size: clamp(1.75rem, 4vw, 3.125rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.03em;

  display: flex;
  justify-content: center;

}

a img {
  transition: transform 0.8s ease;
}

a:hover img {
  transform: scale(1.15);
}


.translation {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 600;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.5rem;
  text-align: center;
  position: absolute;

  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.greeting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.greeting-c:hover .translation {
  opacity: 1;
  max-height: 50px;
}

/*SOUTH AFRICA------------------------------------*/
.sa-image-group {
  position: relative;
  padding-bottom: 50%;
  align-items: center;
}

.sa-image-container-1,
.sa-image-container-2,
.sa-image-container-3,
.sa-image-container-4 {
  position: absolute;
  position: absolute;
  transition: transform 0.8s ease;
}

.sa-image-container-1:hover,
.sa-image-container-2:hover,
.sa-image-container-3:hover,
.sa-image-container-4:hover {
  transform: scale(1.15);
  cursor: none;
}

.sa-image-container-1 {
  max-width: 30%;
  /* textiles */
  height: auto;
  top: 4%;
  left: 0%;
}

.sa-image-container-2 {
  max-width: 20%;
  /* ornaments */
  height: auto;
  top: 68%;
  left: 5%;
}

.sa-image-container-3 {
  max-width: 50%;
  /* lights */
  height: auto;
  top: 15%;
  left: 45%;
}

.sa-image-container-4 {
  max-width: 23%;
  /* instru */
  height: auto;
  top: 35%;
  left: 35%;
}

.malva-wrapper-1 {
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(2rem, 6vw, 6rem);

  max-width: var(--content-max);
  margin: clamp(6rem, 12vh, 10rem) auto;
  padding: 0 var(--page-padding);
  flex: 1;
}

/* SOUTH AFRICA LARGE IMAGE */
.malva-image {
  width: clamp(18rem, 40vw, 34rem);
  height: auto;
  flex-shrink: 0;
  padding: 0;
}

.malva-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* SOUTH AFRICA INTRO TEXT */
.malva-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--text-max);
}

.malva-intro h5 {
  color: #7BC5FF;
  font-family: Gwendolyn;
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 400;
  line-height: 0.9;
  margin: 0;
}

.malva-intro p:first-of-type {
  color: #C5AFFF;
  font-family: Cormorant;
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  line-height: 1.3;
  margin: 0;
}

.malva-intro p:last-of-type {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  line-height: clamp(1.4, 1.5, 1.65);
  margin: 0;
}

/* BANNER-------------------------- */

.dessert-detail {
  width: 100vw;
  height: auto;
  display: block;
}

.dessert-detail img {
  width: 20%;
  margin-top: -10vh;
  margin-left: 30vw;
}


.closing-section {
  display: flex;
  justify-content: center;
  margin-top: clamp(4rem, 10vh, 8rem);
  padding: 0 var(--page-padding);
}

.link-and-paragraph {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  line-height: clamp(1.4, 1.5, 1.65);
}

.link-icon {
  width: clamp(20px, 3vw, 40px);
  height: auto;
  display: block;
}

.link-and-paragraph p {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);

  font-style: normal;
  font-weight: 400;
  justify-content: center;
  margin-bottom: clamp(4rem, 10vh, 8rem);
}


.greeting p {
  justify-content: center;
  align-items: center;

}

.link-greeting-row-p a img {
  transition: transform 0.8s ease;
}

.link-greeting-row-p a:hover img {
  transform: scale(1.15);
}

.translation {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 600;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.greeting-c {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.greeting-c:hover .translation {
  opacity: 1;
  max-height: 50px;
}

/*PHILIPINES------------------------------------*/
.asia-wrapper {
  margin-top: 9vh;
}

.ph-image-group {
  position: relative;
  height: 20vh;
  padding-bottom: 40%;
  align-items: center;
}

.ph-image-container-1,
.ph-image-container-2,
.ph-image-container-3,
.ph-image-container-4 {
  position: absolute;
  position: absolute;
  transition: transform 0.8s ease;
  /* applies to hover smoothly */
}

.ph-image-container-1:hover,
.ph-image-container-2:hover,
.ph-image-container-3:hover,
.ph-image-container-4:hover {
  transform: scale(1.15);
  cursor: none;
}

.ph-image-container-1 {
  max-width: 30%;
  /* star-lights */
  height: auto;
  top: 0%;
  left: 0%;
}

.ph-image-container-2 {
  max-width: 26%;
  /* parols */
  height: auto;
  top: 20%;
  left: 20%;
}

.ph-image-container-3 {
  max-width: 20%;
  /* textiles */
  height: auto;
  top: -15%;
  left: 70%;
}

.ph-image-container-4 {
  max-width: none;
  /* cathedral */
  width: 45%;
  height: auto;
  top: 50%;
  left: 50%;
}

/*BIBINGKA SECTION 1*/
.p-wrapper-1 {
  display: flex;
  gap: clamp(2rem, 6vw, 6rem);
  margin: clamp(6rem, 12vh, 10rem) auto;
  flex: 1;
  padding: 0 var(--page-padding);
}

.bibingka-intro {
  position: relative;
  flex: 1;
}

.bibingka-intro h5 {
  color: #7BC5FF;
  font-family: Gwendolyn, sans-serif;
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 400;
  line-height: 1;
  margin: 0;
}

.bibingka-intro p:first-of-type {
  color: #C5AFFF;
  font-family: Cormorant, serif;
  font-size: clamp(1rem, 2vw, 2.5rem);
  line-height: clamp(1.5rem, 3vw, 3.5rem);
}

.bibingka-intro p:last-child {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.4, 1.5, 1.65);
  max-width: 100%;
}

.bibingka-large {
  display: block;
  max-width: none;
  width: 100%;
  width: min(1200px, 100vw);

}

/*PH SECTION 2*/
.closing-section-p {
  margin: 0 auto;
  position: relative;
  top: 0rem;
  padding: 0 var(--page-padding);

}

.image-paragraph-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  margin: clamp(6rem, 18vh, 14rem) auto 0;
}

.image-paragraph-row img {
  max-width: 35vw;
  position: relative;
  width: clamp(12rem, 30vw, 22rem);
  height: auto;
  flex-shrink: 0;
}

.image-paragraph-row p {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.4, 1.5, 1.65);
  flex: 1;
  margin: 0;
}



/*AUSTRALIA------------------------------------*/
.aus-image-1 {
  top: 5%;
  max-width: 18%;
}

.aus-image-2 {
  max-width: 35%;
  height: auto;
  top: 38%;
  left: 10%;
}

.aus-image-3 {
  left: 80%;
}

.aus-image-4 {
  max-width: 30%;
  left: 55%;
  top: 35%;
}

/*PAVLOVA SECTION 1*/
.au-wrapper-1 {
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(2rem, 6vw, 6rem);

  max-width: var(--content-max);
  margin: clamp(6rem, 12vh, 10rem) auto;
  padding: 0 var(--page-padding);

  flex: 1;
}

.au-image {
  width: clamp(18rem, 40vw, 34rem);
  height: auto;
  flex-shrink: 0;
  padding: 0;
}

.au-image img {
  display: block;
  width: 100%;
  height: auto;
}

.au-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, 1vw, 1rem);
  max-width: var(--text-max);
}

.au-intro h5 {
  color: #7BC5FF;
  text-align: center;
  font-family: Gwendolyn;
  font-size: clamp(4rem, 14vw, 12rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  margin-block-start: 0;
}

.au-intro p:first-of-type {
  color: #C5AFFF;
  font-family: Cormorant, serif;
  font-size: clamp(1rem, 2vw, 2.5rem);
  line-height: clamp(1.5rem, 3vw, 3.5rem);
  margin: 0;
}

.au-intro p:last-child {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  line-height: clamp(1.4, 1.5, 1.65);
  margin: 0;
}


/*SECTION 2*/
.closing-section-a {
  margin: 0 auto;
  position: relative;
  top: 0rem;
}

.image-paragraph-row img {
  height: auto;
  width: 35vw;
  max-width: 35vw;
  position: relative;
}

.image-paragraph-row {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.4, 1.5, 1.65);
}


/*--CANADA--------------------------*/
.ca-image-1 {
  top: -1%;
  max-width: 20%;
}

.ca-image-2 {
  max-width: 30%;
  height: auto;
  top: 28%;
  left: 10%;
}

.ca-image-3 {
  left: 50%;
  max-width: 50%;
  top: 15%;
}

.ca-image-4 {
  max-width: 20%;
  left: 55%;
  top: 47%;
}

/*--SECTION 1--*/
.ca-wrapper-1 {
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(2rem, 6vw, 6rem);

  max-width: var(--content-max);
  margin: clamp(6rem, 12vh, 10rem) auto;
  padding: 0 var(--page-padding);

  flex: 1;
}

.ca-image {
  width: clamp(18rem, 40vw, 34rem);
  height: auto;
  flex-shrink: 0;
  display: block;
  padding: 0;
}

.ca-image img {
  display: block;
  width: 100%;
  height: auto;
}

.ca-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1rem);
  max-width: var(--text-max);
  margin: 0;
}

.ca-intro h5 {
  color: #7BC5FF;
  font-family: Gwendolyn;
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 400;
  line-height: 0.9;
  margin: 0;
}

.ca-intro h5 span {
  display: inline-block;
  transform: translate(-20%, -25%);
}

.ca-intro p:first-of-type {
  color: #C5AFFF;
  font-family: Cormorant;
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  line-height: 1.3;
  margin: 0;
  padding-top: 0;
}

.ca-intro p:last-child {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  line-height: clamp(1.4, 1.5, 1.65);
  margin: 0;
}


/*SECTION 2*/
.closing-section-c {
  width: 95%;
  margin: 0 auto;
}

.image-paragraph-row p {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.4, 1.5, 1.65);
}

.greeting-c {
  margin: 0;
  color: #901825;
  font-family: Cormorant;
  font-size: 3.125rem;
  font-style: italic;
  font-weight: 600;
  line-height: 2.5rem;
  letter-spacing: 0.03125rem;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(4rem, 10vh, 8rem);
}

.greeting-c a img {
  transition: transform 0.8s ease;
}

.greeting-c a:hover img {
  transform: scale(1.15);
}

/*--PERU-----------------------*/
.pe-image-1 {
  top: 3%;
  max-width: 23%;
}

.pe-image-2 {
  max-width: 25%;
  height: auto;
  top: 50%;
  left: 10%;
}

.pe-image-3 {
  left: 60%;
  max-width: 50%;
  top: 15%;
}

.pe-image-4 {
  max-width: 25%;
  left: 45%;
  top: 40%;
}

/*SECTION 1*/
.pe-wrapper-1 {
  display: flex;
  flex-direction: row;
  /* default left-to-right unless you want row-reverse */
  gap: clamp(2rem, 3vw, 5rem);

  max-width: var(--content-max);
  margin: clamp(6rem, 12vh, 10rem) auto;
  padding: 0 var(--page-padding);

  align-items: flex-start;
  flex: 1;
}

.pe-image {
  width: clamp(18rem, 40vw, 34rem);
  height: auto;
  flex-shrink: 0;
  display: block;
  padding: 0;
}

.pe-image img {
  display: block;
  width: 100%;
  height: auto;
}

.pe-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--text-max);
}

.pe-intro h5 {
  color: #7BC5FF;
  font-family: Gwendolyn;
  font-weight: 400;
  line-height: 1;
  /* tight line spacing */
  font-size: clamp(4rem, 12vw, 12rem);
  /* responsive sizing */
  margin: 0;

  white-space: nowrap;
  /* keeps "Turron de" on one line */
  overflow: hidden;
  /* optional safety for extra-long screens */
  text-overflow: ellipsis;
  /* optional, avoids overflow */
}

.pe-intro h5 span {
  display: block;
  /* forces the second line */
  line-height: 1;
}

.pe-intro p:first-of-type {
  color: #C5AFFF;
  font-family: Cormorant;
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  line-height: 1.3;
  padding-top: 0;
  padding-bottom: 1rem;
}

.pe-intro p:last-child {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  line-height: clamp(1.4, 1.5, 1.65);
  margin: 0;
}

/*SECTION 2*/
.closing-section-pe {
  max-width: var(--content-max);
  margin: clamp(6rem, 16vh, 12rem) auto;
  padding: 0 var(--page-padding);
}

.paragraph-image {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}

.paragraph-image img {
  width: clamp(18rem, 45vw, 36rem);
  height: auto;
  flex-shrink: 0;

}

.paragraph-image p {
  color: #1B0905;
  font-family: Cormorant;
  font-size: clamp(1.125rem, 2.5vw, 1.8125rem);
  line-height: clamp(1.4, 1.5, 1.65);
  max-width: var(--text-max);
  margin: 0;
  text-align: left;
}

.link-greeting {
  display: flex;
  justify-content: center;
  margin-top: clamp(4rem, 10vh, 8rem);
}

/*CLOSING*/


.closing-wrapper {
  display: flex;
  justify-content: center;
  max-width: 82.0625rem;
  margin: 0 auto;
  padding: 0;
  max-width: var(--content-max);
  margin: clamp(6rem, 12vh, 10rem) auto;
  padding: 0 var(--page-padding);
}

.closing-text {
  color: #1B0905;
  font-family: Cormorant;
  font-style: normal;
  font-weight: 400;
  text-align: left;
  max-width: 60rem;

  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: clamp(3rem, 6vw, 8rem);
}

.paragraph-1c {
  margin: 0;
}

.paragraph-1c span {
  color: #C5AFFF;
  font-style: italic;
}

.paragraph-2 {
  text-align: right;
  padding-left: 17%;
}

.paragraph-4 {
  padding-left: 17%;
}

.paragraph-4 span {
  color: #901825;
  font-style: italic;
}


.dessert-details img {
  width: 50%;
}
/*LINK TO HERO*/
.back-to-hero {
  text-align: center; /* center the button horizontally */
  margin: 2rem 0;     /* spacing above and below */
}

.back-to-hero a {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: #C5AFFF;
  font-family: "Cormorant", serif;
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 2.5rem);
  line-height: clamp(1.5rem, 3vw, 3.5rem);

  margin: 0;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color 0.3s ease;
  align-items:  center;
}

.back-to-hero a:hover {
  transition: transform 0.8s ease;
  transform: scale(1.15);
}


/*LINK GALLERY*/
.link-gallery {
  margin: 0 auto;
}

.link-gallery p {
  color: #7BC5FF;
  text-align: center;
  font-family: Cormorant;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.columns-wrapper {
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  padding-top: 5vh;
}

.link-left-column,
.link-right-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.footer h1 {
  font-family: "Gwendolyn", cursive;
  font-weight: 700;
  font-size: clamp(4rem, 15vw, 13.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #D91023;
  line-height: 0.9;
  margin: 0;
  padding-bottom: 10vh;
}

section,
.hero,
.intro-wrapper,
.center-wrapper,
.heading-wrapper,
.kutia-wrapper-1,
.pe-wrapper-1,
.au-wrapper-1,
.ca-wrapper-1 {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

section,
.intro-wrapper,
.center-wrapper,
.closing-section-k,
.closing-section-p,
.closing-section-a,
.closing-section-c,
.closing-section-pe {
  margin-top: var(--section-spacing);
  margin-bottom: var(--section-spacing);
}

.kutia-banner,
.pe-banner img,
.pe-banner,
.ca-banner,
.au-banner,
.bibingka-banner {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-top: clamp(4rem, 12vh, 8rem);
  margin-left: calc(50% - 50vw);
  height: auto;
}

.banner-image-row {
  width: 100vw;
  max-width: 100vw;
  padding-left: 0;
  padding-right: 0;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(4rem, 12vh, 8rem);
  height: auto;
  display: block;
  overflow: hidden;
}

.banner-image-row img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Tablet & down */
@media (max-width: 768px) {

  .paragraph-1 p {
    font-size: 1.4rem;
  }

  .kutia-wrapper-1 {
    flex-direction: column;
    align-items: center;
    /* optional */
  }

  .kutia-bowl {
    width: 100%;
    max-width: 28rem;
    /* optional control */
  }

  .kutia-intro {
    max-width: 100%;
    text-align: center;
    /* optional */
  }

  .link-and-paragraph {
    justify-content: center;
    flex-direction: column;
  }

  .link-and-paragraph p {
    color: #1B0905;
    font-family: Cormorant;
    font-size: clamp(1.125rem, 2.5vw, 1.625rem);
    line-height: clamp(1.4, 1.5, 1.65);
  }

  .malva-wrapper-1 {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .malva-img {
    width: 100%;
    max-width: 28rem;
  }

  .malva-image {
    margin-left: 0;
  }

  .p-wrapper-1 {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bibingka-large {
    width: 100%;
    max-width: 28rem;
  }

  .au-wrapper-1 {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .au-image img {
    width: 100%;
    max-width: 28rem;
  }

  .ca-wrapper-1 {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }

  .ca-image img {
    width: 100%;
    max-width: 28rem;
  }

  .ca-intro h5 span {
    transform: none;
  }

  .pe-wrapper-1 {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }

  .paragraph-2,
  .paragraph-4 {
    padding-left: 0;
    text-align: left;
  }

  .columns-wrapper {
    gap: 0rem;
  }

  .link-gallery img {
    width: 80%;
    margin: 0 auto;
  }

  .image-paragraph-row {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin-right: 0;
  }

  .image-paragraph-row img {
    width: 50%;
    max-width: 28rem;
  }

  .paragraph-image {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin-right: 0;
  }

}

@media (max-width: 600px) {
  .columns-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .link-left-column,
  .link-right-column {
    align-items: center;
  }

  .word-change {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .word-change p {
    line-height: 1.25;
  }

  .paragraph-1 {
    justify-content: left;
  }

  .list-wrapper {
    font-size: clamp(1.25rem, 5vw, 2rem);
    text-align: left;
    padding: 0 1rem;
  }

  .row-wrapper {
    flex-direction: column-reverse;
    align-items: center;
    padding: 0;
  }

  .greeting img {
    width: 10rem;
  }

  .translation {
    position: static;
    opacity: 1;
    max-height: none;
    transform: none;

    margin-top: 0.25rem;
    width: 100vw;
    text-align: center;
    left: 0;
    transform: none;
  }
}

@media (max-width: 500px) {
  .pe-intro h5 {
    font-size: clamp(3rem, 10vw, 10rem);
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .word-change {
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .word-change p {
    line-height: 1.2;
  }

  .paragraph-1 {
    justify-content: left;
  }

}

/* Mobile */
@media (max-width: 480px) {
  .paragraph-1 p {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .list-wrapper {
    font-size: clamp(1rem, 6vw, 1.5rem);
    /* extra small screens */
  }
  .link-gallery img {
    width: 90%;            /* shrink images slightly */
    max-width: 250px;      /* optional: prevent overly large images */
    margin-left: auto;     /* center images */
    margin-right: auto;
  }

}