/* ==================================================
   RESET
================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}


/* ==================================================
   MAIN PAGE / BACKGROUND
================================================== */

body {

  margin: 0;

  min-height: 100vh;

  font-family:
    'Cormorant Garamond',
    serif;

  color: #073675;

  text-align: center;

  background-color: #f7f5ef;

  /* YOUR PROGRAM BACKGROUND IMAGE */

  background-image:
    url("Images/program background.png");

  background-position:
    top center;

  background-size:
    100% auto;

  background-repeat:
    no-repeat;

  background-attachment:
    scroll;

}


/* ==================================================
   MAIN PROGRAM CONTENT
================================================== */

.program-page {

  width: 64%;

  max-width: 760px;

  margin: 0 auto;

  padding:
    130px
    20px
    150px;

}


/* ==================================================
   PROGRAM HEADER
================================================== */

.program-header {

  width: 100%;

  margin:
    0 auto
    35px;

}


/* ==================================================
   PROGRAM TITLE
================================================== */

.program-header h1 {

  margin:
    0 auto
    22px;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    clamp(2.8rem, 6vw, 5rem);

  font-weight: 500;

  letter-spacing: 14px;

  line-height: 1;

  color: #073675;

}


/* ==================================================
   HEART DIVIDER
================================================== */

.heart-divider {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 72%;

  max-width: 500px;

  margin:
    0 auto
    35px;

}


.heart-divider span {

  flex: 1;

  height: 1px;

  background-color: #073675;

}


.heart {

  padding:
    0 22px;

  color: #073675;

  font-family:
    Georgia,
    serif;

  font-size: 1.9rem;

  line-height: 1;

}


/* ==================================================
   PROGRAM SECTIONS
================================================== */

.program-section {

  width: 100%;

  margin:
    0 auto
    30px;

}


/* ==================================================
   PART ONE / PART TWO HEADINGS
================================================== */

.program-section h2 {

  width: 72%;

  max-width: 420px;

  margin:
    0 auto
    18px;

  padding:
    7px
    15px;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    1.55rem;

  font-weight: 600;

  letter-spacing: 9px;

  line-height: 1.1;

  color: #073675;

  background:
    linear-gradient(
      90deg,
      rgba(219, 232, 239, 0.30),
      rgba(219, 232, 239, 0.82),
      rgba(219, 232, 239, 0.30)
    );

}


/* ==================================================
   PROGRAM ITEMS
================================================== */

.program-items {

  width: 100%;

  margin: 0 auto;

}


.program-items p {

  margin:
    4px
    auto;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    1.35rem;

  font-weight: 500;

  line-height: 1.25;

  color: #073675;

}


/* SPACE BETWEEN PROGRAM GROUPS */

.small-space {

  height: 16px;

}


/* PARTY TIME */

.party-time {

  font-style: italic;

}


/* ==================================================
   LEAF DIVIDER
================================================== */

.leaf-divider {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin:
    22px auto
    30px;

}


.leaf-divider img {

  display: block;

  width: 110px;

  max-width: 100%;

  height: auto;

  object-fit: contain;

}


/* ==================================================
   HEART BEFORE THANK YOU MESSAGE
================================================== */

.message-divider {

  margin:
    15px auto
    35px;

}


/* ==================================================
   THANK YOU SECTION
================================================== */

.thank-you-section {

  width: 100%;

  margin: 0 auto;

}


/* ==================================================
   TO OUR LOVED ONES
================================================== */

.thank-you-title {

  margin:
    0 auto
    25px;

  font-family:
    'Luxurious Script',
    cursive;

  font-size:
    clamp(3rem, 6vw, 4.7rem);

  font-weight: 400;

  line-height: 1;

  color: #073675;

}


/* ==================================================
   THANK YOU MESSAGE
================================================== */

.thank-you-message {

  width: 86%;

  max-width: 620px;

  margin:
    0 auto
    30px;

}


.thank-you-message p {

  margin:
    0 auto
    17px;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    1.25rem;

  font-weight: 500;

  font-style: italic;

  line-height: 1.45;

  color: #073675;

}


/* ==================================================
   WITH ALL OUR LOVE
================================================== */

.with-love {

  margin:
    30px auto
    8px;

  font-family:
    'Cormorant Garamond',
    serif;

  font-size:
    1.35rem;

  font-weight: 500;

  color: #073675;

}


/* ==================================================
   PHENYO & TSHEPO
================================================== */

.couple-names {

  margin:
    0 auto
    25px;

  font-family:
    'Luxurious Script',
    cursive;

  font-size:
    clamp(3rem, 6vw, 4.4rem);

  font-weight: 400;

  line-height: 1;

  color: #073675;

}


/* ==================================================
   FINAL HEART DIVIDER
================================================== */

.final-divider {

  width: 55%;

  max-width: 330px;

  margin:
    0 auto;

}
/* ==================================================
   MOBILE THANK YOU PAGE
   HIDDEN ON DESKTOP
================================================== */

.mobile-thank-you-page {
  display: none;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {


  /* ==================================================
     FIRST PAGE BACKGROUND - PROGRAM
  ================================================== */

  body {
    background-image: url("Images/program background.png");
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }


  /* ==================================================
     MAIN PROGRAM CONTENT
  ================================================== */

  .program-page {
    width: 68%;

    margin: 0 auto;

    padding:
      38px
      6px
      70px;
  }


  /* ==================================================
     HIDE ORIGINAL THANK YOU ON MOBILE
     It remains visible on desktop
  ================================================== */

  .program-page > .message-divider,
  .program-page > .thank-you-section {
    display: none;
  }


  /* ==================================================
     PROGRAM HEADER
  ================================================== */

  .program-header {
    margin-bottom: 10px;
  }


  /* ==================================================
     PROGRAM TITLE
  ================================================== */

  .program-header h1 {
    font-size: 1.75rem;

    letter-spacing: 6px;

    line-height: 1;

    margin:
      0 auto
      9px;

    font-weight: 500;
  }


  /* ==================================================
     HEART DIVIDERS
  ================================================== */

  .heart-divider {
    width: 78%;

    margin:
      0 auto
      12px;
  }


  .heart {
    padding:
      0 10px;

    font-size: 1.15rem;
  }


  /* ==================================================
     PROGRAM SECTIONS
  ================================================== */

  .program-section {
    margin:
      0 auto
      10px;
  }


  /* ==================================================
     PART ONE / PART TWO HEADINGS
  ================================================== */

  .program-section h2 {
    width: 88%;

    margin:
      0 auto
      9px;

    padding:
      4px
      6px;

    font-size: 0.82rem;

    letter-spacing: 4px;

    line-height: 1.1;

    font-weight: 600;
  }


  /* ==================================================
     PROGRAM ITEMS
  ================================================== */

  .program-items {
    width: 100%;

    margin: 0 auto;
  }


  .program-items p {
    position: relative;

    margin:
      3px
      auto;

    padding-left: 10px;

    font-size: 0.78rem;

    line-height: 1.18;

    font-weight: 500;
  }


  /* ==================================================
     SMALL DECORATIVE POINTER
  ================================================== */

  .program-items p::before {
    content: "◆";

    display: inline-block;

    margin-right: 5px;

    font-size: 0.34rem;

    vertical-align: middle;

    transform: translateY(-1px);
  }


  /* ==================================================
     SPACE BETWEEN SPEECH GROUPS
  ================================================== */

  .small-space {
    height: 5px;
  }


  /* ==================================================
     LEAF DIVIDERS
  ================================================== */

  .leaf-divider {
    margin:
      8px auto
      11px;
  }


  .leaf-divider img {
    width: 58px;
  }



  /* ==================================================
     SECOND MOBILE PAGE
     THANK YOU BACKGROUND
  ================================================== */

  .mobile-thank-you-page {
    display: block;

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    background-color: #f7f5ef;

    background-image:
      url("Images/program background.png");

    background-position:
      top center;

    background-size:
      100% auto;

    background-repeat:
      no-repeat;
  }


  /* ==================================================
     THANK YOU CONTENT POSITION
  ================================================== */

  .mobile-thank-you-content {
    width: 68%;

    margin: 0 auto;

    padding:
      85px
      6px
      100px;

    text-align: center;

    color: #073675;
  }


  /* ==================================================
     HEART ABOVE THANK YOU MESSAGE
  ================================================== */

  .mobile-message-divider {
    width: 72%;

    margin:
      0 auto
      16px;
  }


  /* ==================================================
     TO OUR LOVED ONES
  ================================================== */

  .mobile-thank-you-content .thank-you-title {
    margin:
      0 auto
      16px;

    font-size: 2.15rem;

    line-height: 1;

    font-weight: 400;
  }


  /* ==================================================
     THANK YOU MESSAGE CONTAINER
  ================================================== */

  .mobile-thank-you-content .thank-you-message {
    width: 94%;

    margin:
      0 auto
      16px;
  }


  /* ==================================================
     THANK YOU MESSAGE TEXT
  ================================================== */

  .mobile-thank-you-content .thank-you-message p {
    margin:
      0 auto
      11px;

    font-size: 0.76rem;

    line-height: 1.35;

    font-style: italic;

    font-weight: 500;
  }


  /* ==================================================
     WITH ALL OUR LOVE
  ================================================== */

  .mobile-thank-you-content .with-love {
    margin:
      20px auto
      5px;

    font-size: 0.86rem;
  }


  /* ==================================================
     PHENYO & TSHEPO
  ================================================== */

  .mobile-thank-you-content .couple-names {
    margin:
      0 auto
      15px;

    font-size: 2.15rem;

    line-height: 1;
  }


  /* ==================================================
     FINAL HEART DIVIDER
  ================================================== */

  .mobile-thank-you-content .final-divider {
    width: 65%;

    margin: 0 auto;
  }

}



/* ==================================================
   VERY SMALL MOBILE PHONES
================================================== */

@media (max-width: 380px) {


  /* ==================================================
     PROGRAM PAGE
  ================================================== */

  .program-page {
    width: 67%;

    padding:
      34px
      5px
      65px;
  }


  /* ==================================================
     PROGRAM TITLE
  ================================================== */

  .program-header h1 {
    font-size: 1.55rem;

    letter-spacing: 5px;
  }


  /* ==================================================
     PART ONE / PART TWO
  ================================================== */

  .program-section h2 {
    font-size: 0.76rem;

    letter-spacing: 3.5px;
  }


  /* ==================================================
     PROGRAM ITEMS
  ================================================== */

  .program-items p {
    font-size: 0.73rem;

    line-height: 1.18;

    padding-left: 7px;
  }


  /* SMALL DIAMOND POINTER */

  .program-items p::before {
    font-size: 0.3rem;

    margin-right: 4px;
  }



  /* ==================================================
     SECOND THANK YOU PAGE
  ================================================== */

  .mobile-thank-you-content {
    width: 67%;

    padding:
      75px
      5px
      90px;
  }


  /* ==================================================
     THANK YOU TITLE
  ================================================== */

  .mobile-thank-you-content .thank-you-title {
    font-size: 1.95rem;

    margin-bottom: 14px;
  }


  /* ==================================================
     THANK YOU MESSAGE
  ================================================== */

  .mobile-thank-you-content .thank-you-message p {
    font-size: 0.71rem;

    line-height: 1.3;

    margin-bottom: 9px;
  }


  /* ==================================================
     WITH LOVE
  ================================================== */

  .mobile-thank-you-content .with-love {
    font-size: 0.82rem;

    margin-top: 17px;
  }


  /* ==================================================
     COUPLE NAMES
  ================================================== */

  .mobile-thank-you-content .couple-names {
    font-size: 1.95rem;
  }

}