:root {
    --color-main: #edeeee;
    --color-custom-main: #fefefc;
    --color-primary: #fefefc;
    --color-secondary: #cfada6;
  }
  
  .form-control,
  .form-select {
    border: 1px solid var(--color-dark);
    box-shadow: none;
  }
  
  .couple-section .orn-2 {
    bottom: 20%;
  }
  
  .couple-section .orn-4 {
    position: absolute;
    bottom: 0;
    /* Original: right: 0; transform: translate(35%, 0); */
    /* 35% of 180px (initial width) = 63px. So, effective right is -63px. */
    right: -63px;
    width: 180px;
    /* The scaleX(-1) part of the transform is removed. */
    /* If a horizontal flip is required, consider using a pre-flipped image asset for .orn-4. */
  }
  
  @media (min-width: 768px) {
    .couple-section .orn-4 {
      width: 340px;
       /* 35% of 340px = 119px. Update right to -119px. */
      right: -119px;
    }
  }
  
  @media (min-width: 992px) {
    .couple-section .orn-4 {
      width: 360px;
      /* 35% of 360px = 126px. Update right to -126px. */
      right: -126px;
    }
  }
  
  .couple-section .orn-5 {
    position: absolute;
    top: 0;
    left: 0;
    /* Original: left: 0; transform: translate(-30%, 0); */
    /* 30% of 260px (initial width) = 78px. So, effective left is -78px. */
    left: -78px;
    width: 260px;
  }
  
  @media (min-width: 768px) {
    .couple-section .orn-5 {
      width: 320px;
      /* 30% of 320px = 96px. Update left to -96px. */
      left: -96px;
    }
  }
  
  @media (min-width: 992px) {
    .couple-section .orn-5 {
      width: 340px;
      /* Original: transform: translate(-20%, 0); */
      /* 20% of 340px = 68px. Update left to -68px. */
      left: -68px;
    }
  }
  
  .couple-section .orn-6 {
    position: absolute;
    bottom: 0;
    left: 0;
    /* Original: transform: translate(-40%, 0); */
    /* -40% of 240px = -96px */
    left: -96px;
    width: 240px;
    z-index: 6;
  }
  
  @media (min-width: 768px) {
    .couple-section .orn-6 {
      width: 360px;
      /* Original: transform: translate(-35%, 0); */
      /* -35% of 360px = -126px */
      left: -126px;
    }
  }
  
  @media (min-width: 992px) {
    .couple-section .orn-6 {
      width: 420px;
      /* Inherits -35% translation logic from 768px breakpoint */
      /* -35% of 420px = -147px */
      left: -147px;
    }
  }
  
  .couple-section .orn-7 {
    position: absolute;
    top: 0;
    right: 0;
    /* Original: transform: translate(40%, 0) scale(-1); */
    /* 40% of 240px = 96px. New right is 0 - 96px = -96px */
    right: -96px;
    width: 240px;
    /* scale(-1) effect removed. Use a pre-flipped image if flip is needed. */
  }
  
  @media (min-width: 768px) {
    .couple-section .orn-7 {
      width: 360px;
    }
  }
  /* For .couple-section .orn-7 at 768px, original translate(40%,0) -> 40% of 360px = 144px. New right: -144px */
  
  @media (min-width: 992px) {
    .couple-section .orn-7 {
      width: 420px;
    }
  }
  /* For .couple-section .orn-7 at 992px, original translate(40%,0) -> 40% of 420px = 168px. New right: -168px */
  /* Note: The 'right' values in media queries for .orn-7 should be explicitly set if they need to follow the 40% logic with new widths. */
  /* Assuming the base 'right: -96px' and 'width: 240px' are the defaults, and media queries only change width. */
  
  @media (max-width: 991px) {
    .couple-section .couple-wrapper {
      padding-bottom: 3rem;
    }
  }
  
  .couple-section .couple .couple-description::before {
    color: #edeeee;
  }
  
  .couple-section .couple .couple-description::after {
    z-index: 8;
  }
  
  .couple-section .couple .couple-description * {
    z-index: 10;
  }
  
  .story-section {
    background-color: var(--color-main);
  }
  
  .story-section .story .orn-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    /* Original: transform: translate(-30%, 35%) rotate(-20deg) scaleY(-1); */
    /* -30% of 240px = -72px */
    left: -72px;
    /* translateY(35%) (35% of element height) removed. Vertical position might change. */
    /* rotate(-20deg) scaleY(-1) effects removed. Use pre-transformed asset if needed. */
    width: 240px;
  }
  
  @media (min-width: 768px) {
    .story-section .story .orn-1 {
      width: 360px;
    }
  }
  
  @media (min-width: 992px) {
    .story-section .story .orn-1 {
      width: 380px;
      /* Original: transform: translate(-30%, 15%) rotate(-20deg) scaleY(-1); */
      /* -30% of 380px = -114px */
      left: -114px;
      /* translateY(15%) (15% of element height) removed. Vertical position might change. */
      /* rotate(-20deg) scaleY(-1) effects removed. */
    }
  }
  
  @media (max-width: 767px) {
    .venue-section .orn-1 {
      /* Original: transform: translate(-50%, 20%) scaleX(-1) rotate(-45deg); */
      /* Assuming base left: 50% for centering, translateX(-50%) is common. */
      /* This complex transform is hard to replicate without knowing initial position and element dimensions. */
      /* Effects scaleX(-1) rotate(-45deg) and precise translate removed. Element will likely be mispositioned/styled. */
    }
  }
  
  .venue-section .orn-2 {
    position: absolute;
    top: 20%;
    right: 0;
    /* Original: transform: translate(35%, 0) scale(-1); */
    /* 35% of 280px = 98px. New right is 0 - 98px = -98px */
    right: -98px;
    width: 280px;
    /* scale(-1) effect removed. Use a pre-flipped image if flip is needed. */
  }
  /* Recalculate 'right' in media queries if it should follow 35% of new width */
  
  @media (min-width: 768px) {
    .venue-section .orn-2 {
      width: 360px;
    }
  }
  
  /* For .venue-section .orn-2 at 768px, 35% of 360px = 126px. New right: -126px */
  @media (min-width: 992px) {
    .venue-section .orn-2 {
      top: 25%;
      width: 420px;
      /* For .venue-section .orn-2 at 992px, 35% of 420px = 147px. New right: -147px */
    }
  }
  
  .venue-section .orn-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    /* Original: transform: translate(-40%, 0) rotate(-20deg) scaleY(-1); */
    /* -40% of 240px = -96px */
    left: -96px;
    /* rotate(-20deg) scaleY(-1) effects removed. Use pre-transformed asset if needed. */
    width: 240px;
  }
  
  @media (min-width: 768px) {
    .venue-section .orn-3 {
      width: 280px;
    }
  }
  /* For .venue-section .orn-3 at 768px, -40% of 280px = -112px. New left: -112px */
  
  @media (min-width: 992px) {
    .venue-section .orn-3 {
      width: 420px;
      /* For .venue-section .orn-3 at 992px, -40% of 420px = -168px. New left: -168px */
    }
  }
  
  .rsvp-section .rsvp-wrapper {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .rsvp-section .rsvp-wrapper .orn-1 {
    position: absolute;
    top: 0;
    left: 0;
    /* Original: transform: translate(-40%, -10%) scaleY(-1); */
    /* -40% of 200px = -80px */
    left: -80px;
    /* translateY(-10%) (-10% of element height) removed. Vertical position might change. */
    /* scaleY(-1) effect removed. Use pre-transformed asset if needed. */
    width: 200px;
  }
  
  @media (min-width: 768px) {
    .rsvp-section .rsvp-wrapper .orn-1 {
      width: 280px;
    }
  }
  
  @media (min-width: 992px) {
    .rsvp-section .rsvp-wrapper .orn-1 {
      width: 320px;
    }
  }
  
  .rsvp-section .rsvp-wrapper .orn-2 {
    position: absolute;
    top: 50%;
    right: 0;
    /* Original: transform: translate(30%, -50%) scaleX(-1); */
    /* 30% of 160px = 48px. New right is 0 - 48px = -48px */
    right: -48px;
    /* translateY(-50%) (-50% of element height, often for vertical centering) removed. Vertical position will change significantly. */
    /* scaleX(-1) effect removed. Use pre-transformed asset if needed. */
    width: 160px;
  }
  
  @media (min-width: 768px) {
    .rsvp-section .rsvp-wrapper .orn-2 {
      width: 200px;
    }
  }
  
  @media (min-width: 992px) {
    .rsvp-section .rsvp-wrapper .orn-2 {
      width: 240px;
    }
  }
  
  .wishes-section .card-form {
    overflow: hidden;
  }
  
  .wishes-section .card-form .orn-2 {
    position: absolute;
    top: 0;
    right: 0;
    /* Original: transform: translate(40%, -10%) scale(-1); */
    /* 40% of 200px = 80px. New right is 0 - 80px = -80px */
    right: -80px;
    /* translateY(-10%) (-10% of element height) removed. Vertical position might change. */
    /* scale(-1) effect removed. Use pre-transformed asset if needed. */
    width: 200px;
  }
  
  @media (min-width: 768px) {
    .wishes-section .card-form .orn-2 {
      width: 280px;
    }
  }
  
  @media (min-width: 992px) {
    .wishes-section .card-form .orn-2 {
      width: 320px;
    }
  }
  
  .egift-section .orn-2 {
    position: absolute;
    top: 0;
    left: 0;
    /* Original: transform: translate(-35%, 0) scaleY(-1); */
    /* -35% of 280px = -98px */
    left: -98px;
    /* scaleY(-1) effect removed. Use pre-transformed asset if needed. */
    width: 280px;
  }
  
  @media (min-width: 768px) {
    .egift-section .orn-2 {
      width: 420px;
    }
  }
  /* For .egift-section .orn-2 at 768px, -35% of 420px = -147px. New left: -147px */
  
  @media (min-width: 992px) {
    .egift-section .orn-2 {
      width: 460px;
      /* For .egift-section .orn-2 at 992px, -35% of 460px = -161px. New left: -161px */
    }
  }
  
  .egift-section .gift-wrap {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  .apology-section .orn-1 {
    position: absolute;
    top: 0;
    left: 0;
    /* Original: transform: translate(-40%, 0); */
    /* -40% of 200px = -80px */
    left: -80px;
    width: 200px;
  }
  
  @media (min-width: 768px) {
    .apology-section .orn-1 {
      width: 280px;
      /* Inherits -40% translation logic. -40% of 280px = -112px. New left: -112px */
    }
  }
  
  @media (min-width: 992px) {
    .apology-section .orn-1 {
      width: 320px;
      /* Original: transform: translate(-20%, 0); */
      /* -20% of 320px = -64px */
      left: -64px;
    }
  }
  
  .apology-section .orn-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    /* Original: transform: translate(35%, 0) scaleX(-1); */
    /* 35% of 240px = 84px. New right is 0 - 84px = -84px */
    right: -84px;
    /* scaleX(-1) effect removed. Use pre-transformed asset if needed. */
    width: 240px;
  }
  
  @media (min-width: 768px) {
    .apology-section .orn-2 {
      width: 360px;
    }
  }
  /* For .apology-section .orn-2 at 768px, 35% of 360px = 126px. New right: -126px */
  
  @media (min-width: 992px) {
    .apology-section .orn-2 {
      width: 420px;
      /* For .apology-section .orn-2 at 992px, 35% of 420px = 147px. New right: -147px */
    }
  }
  
  .stream-section .orn-1 {
    position: absolute;
    top: 0;
    right: 0;
    /* Original: transform: translate(40%, 0) scaleX(-1); */
    /* 40% of 200px = 80px. New right is 0 - 80px = -80px */
    right: -80px;
    /* scaleX(-1) effect removed. Use pre-transformed asset if needed. */
    width: 200px;
  }
  
  @media (min-width: 768px) {
    .stream-section .orn-1 {
      width: 280px;
      /* Original: transform: translate(20%, 0) scaleX(-1); */
      /* 20% of 280px = 56px. New right is 0 - 56px = -56px */
      right: -56px;
      /* scaleX(-1) effect removed. */
    }
  }
  
  @media (min-width: 992px) {
    .stream-section .orn-1 {
      width: 320px;
      /* Inherits 20% translation logic from 768px. 20% of 320px = 64px. New right: -64px */
    }
  }
  
  .stream-section .orn-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    /* Original: transform: translate(-35%, 0); */
    /* -35% of 260px = -91px */
    left: -91px;
    width: 260px;
  }
  
  @media (min-width: 768px) {
    .stream-section .orn-2 {
      width: 360px;
      /* Inherits -35% translation. -35% of 360px = -126px. New left: -126px */
    }
  }
  
  @media (min-width: 992px) {
    .stream-section .orn-2 {
      width: 420px;
      /* Inherits -35% translation. -35% of 420px = -147px. New left: -147px */
    }
  }
  
  .thank-section .orn-2 {
    position: absolute;
    top: 0;
    right: 0;
    /* Original: transform: translate(45%, 0) scaleX(-1); */
    /* 45% of 140px = 63px. New right is 0 - 63px = -63px */
    right: -63px;
    /* scaleX(-1) effect removed. Use pre-transformed asset if needed. */
    width: 140px;
  }
  
  @media (min-width: 768px) {
    .thank-section .orn-2 {
      width: 180px;
    }
  }
  /* For .thank-section .orn-2 at 768px, 45% of 180px = 81px. New right: -81px */
  
  @media (min-width: 992px) {
    .thank-section .orn-2 {
      width: 220px;
      /* For .thank-section .orn-2 at 992px, 45% of 220px = 99px. New right: -99px */
    }
  }
  
  .thank-section .thank {
    overflow: hidden;
  }
  
  img[alt=rose-3] {
    transform-origin: 2% 8%;
  }
  
  img[alt=rose-4] {
    transform-origin: 5% 98%;
  }
  
  /*# sourceMappingURL=styles.custom.css.map */