/* -------------------------------------------------------------
      RESET & BASE STYLES
      No third-party CSS libraries. Pure custom CSS.
   ------------------------------------------------------------- */
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }

   :root {
     /* Pastel Palette */
     --bg-cream: #FAF7F2;
     --bg-card: #FFFFFF;
     --bg-sage-light: #EEF3EF;
     --bg-rose-light: #F9EFEB;
     --bg-champagne: #F5EEE6;
     
     --accent-sage: #5E7E71;
     --accent-sage-dark: #466056;
     --accent-rose: #C28472;
     --accent-gold: #C09A6B;
     
     --text-main: #2C3539;
     --text-muted: #667073;
     --text-light: #8E999B;
     
     --border-subtle: #E8E1D9;
     --border-accent: #DDD3C7;
     
     --font-serif: 'Cormorant Garamond', Georgia, serif;
     --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
     --font-script: 'Alex Brush', cursive;

     --radius-sm: 8px;
     --radius-md: 14px;
     --radius-lg: 20px;
     --radius-full: 9999px;
   }

   html {
     scroll-behavior: smooth;
     font-size: 16px;
   }

   body {
     background-color: var(--bg-cream);
     color: var(--text-main);
     font-family: var(--font-sans);
     line-height: 1.65;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
   }

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

   a {
     color: inherit;
     text-decoration: none;
     transition: all 0.2s ease;
   }

   button, input, textarea, select {
     font-family: inherit;
     font-size: inherit;
     border: none;
     outline: none;
   }

   button {
     cursor: pointer;
   }

   /* -------------------------------------------------------------
      LAYOUT CONTAINERS
   ------------------------------------------------------------- */
   .container {
     width: 100%;
     max-width: 1080px;
     margin: 0 auto;
     padding: 0 24px;
   }

   .container-sm {
     max-width: 780px;
     margin: 0 auto;
     padding: 0 20px;
   }

   section {
     padding: 80px 0;
     position: relative;
     z-index: 2;
     background: #FAF7F2;
   }
   #hero + section{
        margin-top: 100vh;
   }
   footer,
        .parallax-section{
                position: relative;
                z-index: 2;
        }
   @media (max-width: 768px) {
     section {
       padding: 56px 0;
       
     }
   }

   /* -------------------------------------------------------------
      TYPOGRAPHY
   ------------------------------------------------------------- */
   .font-serif { font-family: var(--font-serif); }
   .font-script { font-family: var(--font-script); }

   .section-tag {
     display: inline-block;
     font-size: 0.82rem;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--accent-sage);
     font-weight: 600;
     margin-bottom: 12px;
   }

   .section-title {
     font-family: var(--font-serif);
     font-size: 2.6rem;
     font-weight: 500;
     color: var(--text-main);
     line-height: 1.2;
     margin-bottom: 16px;
   }

   .section-subtitle {
     color: var(--text-muted);
     font-size: 1.05rem;
     max-width: 600px;
     margin: 0 auto 40px auto;
   }

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

   .divider-ornament {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
     margin: 20px auto 36px auto;
     max-width: 260px;
   }

   .divider-line {
     flex: 1;
     height: 1px;
     background-color: var(--border-accent);
   }
   
    /* -------------------------------------------------------------
       PRELOADER SCREEN (BEFORE INTRO)
    ------------------------------------------------------------- */
    #appPreloader {
      position: fixed;
      inset: 0;
      z-index: 3000;
      background-color: #171E20;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      padding: 24px;
      transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.8s ease;
    }

    #appPreloader.loaded {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .preloader-monogram-box {
      position: relative;
      width: 104px;
      height: 104px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .preloader-spinner-ring {
      position: absolute;
      inset: 0;
      border: 2px solid rgba(212, 163, 115, 0.22);
      border-top-color: var(--accent-gold);
      border-right-color: var(--accent-gold);
      border-radius: 50%;
      animation: spinPreloader 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }

    @keyframes spinPreloader {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .preloader-monogram {
      font-family: var(--font-serif);
      font-size: 1.85rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: #FFFDF8;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .preloader-monogram span {
      font-family: var(--font-script);
      font-size: 1.25em;
      color: var(--accent-gold);
      margin: 0 2px;
    }

    .preloader-title {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #E2E8E9;
      font-weight: 500;
      margin-bottom: 4px;
      text-align: center;
    }

    .preloader-subtitle {
      font-family: var(--font-sans);
      font-size: 0.78rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent-gold);
      margin-bottom: 26px;
      text-align: center;
    }

    .preloader-bar-container {
      width: 220px;
      height: 3px;
      background: rgba(255, 255, 255, 0.14);
      border-radius: var(--radius-full);
      overflow: hidden;
      position: relative;
    }

    .preloader-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent-gold) 0%, #F8D9C7 100%);
      border-radius: var(--radius-full);
      transition: width 0.2s ease-out;
    }

    .preloader-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 220px;
      margin-top: 10px;
      font-family: var(--font-sans);
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #9EABAE;
    }


   /* -------------------------------------------------------------
      INTRO COVER OVERLAY (BUKA UNDANGAN)
   ------------------------------------------------------------- */
   html.intro-active,
   body.intro-active {
     overflow: hidden !important;
     height: 100vh !important;
     max-height: 100vh !important;
     position: fixed !important;
     width: 100% !important;
     touch-action: none !important;
     -webkit-overflow-scrolling: auto !important;
   }

   .intro-cover {
     position: fixed;
     inset: 0;
     z-index: 2000;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     text-align: center;
     background: radial-gradient(circle at 50% 35%, rgba(44, 53, 57, 0.4) 0%, rgba(20, 24, 25, 0.88) 100%),
                 url('img/cover.jpg') center/cover no-repeat;
     color: #FFFFFF;
     padding: 24px 20px;
     transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s ease;
   }

   .intro-cover.opened {
     transform: translateY(-100%);
     opacity: 0;
     pointer-events: none;
   }

   .intro-card {
     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-radius: var(--radius-lg);
     padding: 20px;
     max-width: 520px;
     width: 100%;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
     animation: fadeInCard 1s ease-out;
   }

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

   .intro-tag {
     font-size: 12px;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     color: #F7D7C4;
     font-weight: 500;
     margin-bottom: 5px;
     display: block;
   }

   .intro-names {
     font-family: var(--font-serif);
     font-size: 30px;
     font-weight: 400;
     line-height: 1.15;
     color: #FFFFFF;
     margin-bottom: 10px;
   }

   .intro-names span {
     font-family: var(--font-script);
     color: #F7D7C4;
     font-size: 1.2em;
     display: inline-block;
     margin: 0 6px;
   }
   

   .intro-guest-box {
     background: rgba(0, 0, 0, 0.28);
     border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: var(--radius-md);
     padding: 10px 20px;
     margin-bottom: 28px;
   }

   .intro-guest-label {
     font-size: 0.82rem;
     color: #E2E8E9;
     margin-bottom: 6px;
     letter-spacing: 0.05em;
   }

   .intro-guest-name {
     font-family: var(--font-serif);
     font-size: 1.65rem;
     font-weight: 600;
     color: #FFFFFF;
     line-height: 1.25;
   }

   .btn-open-invite {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(135deg, var(--accent-sage) 0%, var(--accent-sage-dark) 100%);
     color: #FFFFFF;
     padding: 15px 34px;
     border-radius: var(--radius-full);
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.05em;
     box-shadow: 0 8px 24px rgba(70, 96, 86, 0.4);
     transition: all 0.3s ease;
     animation: pulseButton 2.5s infinite;
   }

   .btn-open-invite:hover {
     transform: translateY(-2px) scale(1.02);
     box-shadow: 0 12px 28px rgba(70, 96, 86, 0.6);
     background: var(--accent-sage-dark);
   }

   @keyframes pulseButton {
     0%, 100% { box-shadow: 0 0 0 0 rgba(94, 126, 113, 0.6); }
     50% { box-shadow: 0 0 0 14px rgba(94, 126, 113, 0); }
   }

   /* -------------------------------------------------------------
      STICKY BOTTOM NAVIGATION BAR
   ------------------------------------------------------------- */
   .bottom-nav-bar {
     position: fixed;
     bottom: 16px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 990;
     width: calc(100% - 32px);
     max-width: 500px;
     background: rgba(255, 255, 255, 0.92);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-full);
     box-shadow: 0 12px 32px rgba(44, 53, 57, 0.12);
     padding: 6px 12px;
     display: flex;
     align-items: center;
     justify-content: space-around;
     transition: transform 0.3s ease, opacity 0.3s ease;
   }

   .bottom-nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 8px 10px;
     color: var(--text-muted);
     border-radius: var(--radius-md);
     transition: all 0.2s ease;
     min-width: 52px;
     text-decoration: none;
     gap: 3px;
   }

   .bottom-nav-item svg {
     width: 20px;
     height: 20px;
     stroke-width: 1.8;
     transition: transform 0.2s ease, color 0.2s ease;
   }

   .bottom-nav-item span {
     font-size: 0.7rem;
     font-weight: 500;
     letter-spacing: 0.02em;
     white-space: nowrap;
   }

   .bottom-nav-item:hover {
     color: var(--accent-sage-dark);
   }

   .bottom-nav-item.active {
     color: var(--accent-sage);
     font-weight: 700;
   }

   .bottom-nav-item.active svg {
     transform: translateY(-2px);
     stroke-width: 2.2;
   }

   @media (max-width: 480px) {
     .bottom-nav-bar {
       bottom: 12px;
       width: calc(100% - 20px);
       padding: 5px 6px;
     }
     .bottom-nav-item {
       padding: 6px 4px;
       min-width: 44px;
     }
     .bottom-nav-item span {
       font-size: 0.65rem;
     }
     .bottom-nav-item svg {
       width: 18px;
       height: 18px;
     }
   }

   /* Floating action buttons */
   .floating-audio-btn {
     position: fixed;
     top: 20px;
     right: 20px;
     width: 44px;
     height: 44px;
     border-radius: var(--radius-full);
     background-color: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(8px);
     border: 1px solid var(--border-accent);
     color: var(--accent-sage);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
     z-index: 950;
     transition: all 0.2s ease;
   }

   .floating-audio-btn:hover {
     background-color: var(--bg-sage-light);
     transform: scale(1.05);
   }

   .scroll-top-btn {
     position: fixed;
     bottom: 84px;
     right: 20px;
     width: 42px;
     height: 42px;
     border-radius: var(--radius-full);
     background-color: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(8px);
     border: 1px solid var(--border-subtle);
     color: var(--text-muted);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 900;
     transition: all 0.2s ease;
   }

   .scroll-top-btn:hover {
     color: var(--text-main);
     border-color: var(--accent-sage);
   }

   /* -------------------------------------------------------------
      HERO SECTION WITH KEN BURNS SLIDESHOW
   ------------------------------------------------------------- */
   #hero {
     min-height: 100vh;
     min-height: 100dvh;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     text-align: right;
     padding: 60px 7vw 70px 7vw;
     position: relative;
     overflow: hidden;
     color: #FFFFFF;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
   }

   .hero-slideshow {
     position: absolute !important;
     inset: 0;
     z-index: 0;
     overflow: hidden;
   }

   /* Vegas container and slides hardware acceleration */
   #heroSlideshow .vegas-container,
   #heroSlideshow .vegas-slide,
   #heroSlideshow .vegas-slide-inner {
     position: absolute !important;
     inset: 0 !important;
     width: 100% !important;
     height: 100% !important;
     transform-origin: center center;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     will-change: transform, opacity;
   }

   .hero-backdrop-overlay {
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(180deg, rgba(16, 22, 24, 0.45) 0%, rgba(16, 22, 24, 0.22) 40%, rgba(16, 22, 24, 0.62) 100%);
   }

   .hero-content {
     position: relative;
     z-index: 2;
     padding: 0;
     max-width: 640px;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     text-align: right;
     margin-left: auto;
   }

   .hero-simple-title {
     font-family: var(--font-serif);
     font-size: clamp(1.8rem, 4.2vw, 2.6rem);
     font-weight: 400;
     line-height: 1.25;
     color: #FFFFFF;
     margin-bottom: 12px;
     text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
     letter-spacing: 0.03em;
     text-align: right;
   }

   .hero-simple-names {
     font-family: var(--font-serif);
     font-size: clamp(2.8rem, 7vw, 5rem);
     font-weight: 600;
     display: block;
     margin-top: 6px;
     color: #FFFDF8;
     letter-spacing: 0.01em;
     line-height: 1.15;
     text-shadow: 0 3px 20px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
     text-align: right;
   }

   .hero-simple-amp {
     font-family: var(--font-script);
     font-weight: 400;
     color: #F8D9C7;
     font-size: 1.15em;
     margin: 0 8px;
     display: inline-block;
     vertical-align: middle;
   }

   /* Elegant Hero Date Typography */
   .hero-date-elegant {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     text-align: right;
     margin-top: 18px;
     padding-top: 18px;
     border-top: 1px solid rgba(248, 217, 199, 0.38);
     position: relative;
   }

   .hero-date-day-tag {
     font-family: var(--font-sans);
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.24em;
     text-transform: uppercase;
     color: #F8D9C7;
     margin-bottom: 6px;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
   }

   .hero-date-main {
     display: inline-flex;
     align-items: center;
     gap: 14px;
     margin: 4px 0 8px 0;
   }

   .hero-date-daynum {
     font-family: var(--font-serif);
     font-size: clamp(3rem, 6.5vw, 4.4rem);
     font-weight: 600;
     line-height: 0.92;
     color: #FFFDF8;
     text-shadow: 0 3px 18px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
     letter-spacing: -0.02em;
   }

   .hero-date-block {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
     line-height: 1.1;
     border-left: 2.5px solid var(--accent-gold);
     padding-left: 12px;
   }

   .hero-date-month {
     font-family: var(--font-serif);
     font-size: clamp(1.25rem, 2.8vw, 1.8rem);
     font-weight: 600;
     color: #FFFFFF;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
   }

   .hero-date-year {
     font-family: var(--font-sans);
     font-size: clamp(0.85rem, 1.6vw, 1.05rem);
     font-weight: 500;
     color: var(--accent-gold);
     letter-spacing: 0.22em;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
   }

   .hero-date-venue-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-family: var(--font-sans);
     font-size: 0.84rem;
     color: rgba(255, 255, 255, 0.92);
     letter-spacing: 0.05em;
     text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
     margin-top: 2px;
   }

   /* Mobile right-bottom positioning */
   @media (max-width: 768px) {
     #hero {
       align-items: flex-end;
       justify-content: flex-end;
       text-align: right;
       padding-top: 40px;
       padding-bottom: 95px;
       padding-left: 20px;
       padding-right: 20px;
     }

     .hero-content {
       align-items: flex-end;
       text-align: right;
       max-width: 100%;
     }

     .hero-simple-title {
       font-size: 1.45rem;
       margin-bottom: 8px;
     }

     .hero-simple-names {
       font-size: 30px;
     }

     .hero-date-elegant {
       margin-top: 12px;
       padding-top: 14px;
     }
   }

   .hero-venue {
     font-size: 0.98rem;
     color: var(--accent-sage-dark);
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     margin-bottom: 36px;
   }

   .btn-group {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
   }

   .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background-color: var(--accent-sage);
     color: #FFFFFF;
     padding: 14px 28px;
     border-radius: var(--radius-full);
     font-weight: 500;
     font-size: 0.95rem;
     letter-spacing: 0.03em;
     transition: all 0.25s ease;
   }

   .btn-primary:hover {
     background-color: var(--accent-sage-dark);
     transform: translateY(-1px);
   }

   .btn-secondary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background-color: var(--bg-card);
     color: var(--text-main);
     border: 1px solid var(--border-accent);
     padding: 14px 28px;
     border-radius: var(--radius-full);
     font-weight: 500;
     font-size: 0.95rem;
     letter-spacing: 0.03em;
     transition: all 0.25s ease;
   }

   .btn-secondary:hover {
     border-color: var(--accent-sage);
     background-color: var(--bg-sage-light);
   }

   .hero-scroll-down {
     margin-top: 48px;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     color: var(--text-light);
     font-size: 0.8rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     animation: bounce 2s infinite;
   }

   @keyframes bounce {
     0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
     40% { transform: translateY(-8px); }
     60% { transform: translateY(-4px); }
   }

   /* -------------------------------------------------------------
      PARALLAX SECTION
   ------------------------------------------------------------- */
   .parallax-section {
     position: relative;
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     color: #FFFFFF;
     text-align: center;
     padding: 150px 0;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .parallax-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(35, 42, 43, 0.58);
     z-index: 1;
   }

   .parallax-content {
     position: relative;
     z-index: 2;
     max-width: 760px;
     padding: 0 24px;
   }

   .parallax-quote {
     font-family: var(--font-serif);
     font-size: clamp(1.6rem, 3.8vw, 2.4rem);
     font-style: italic;
     line-height: 1.4;
     margin-bottom: 16px;
     font-weight: 400;
   }

   .parallax-author {
     font-size: 0.95rem;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     opacity: 0.9;
   }

   /* -------------------------------------------------------------
      BRIDE & GROOM SECTION
   ------------------------------------------------------------- */
   .couple-grid {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     gap: 32px;
     margin-top: 20px;
   }

   @media (max-width: 860px) {
     .couple-grid {
       grid-template-columns: 1fr;
       gap: 40px;
     }
   }

   .couple-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-lg);
     padding: 36px 28px;
     text-align: center;
     transition: all 0.25s ease;
   }

   .couple-card:hover {
     border-color: var(--border-accent);
     transform: translateY(-3px);
   }

   .couple-avatar-wrapper {
     width: 190px;
     height: 190px;
     margin: 0 auto 24px auto;
     border-radius: var(--radius-full);
     padding: 6px;
     border: 1px solid var(--border-accent);
     background-color: var(--bg-cream);
   }

   .couple-avatar {
     width: 100%;
     height: 100%;
     border-radius: var(--radius-full);
     object-fit: cover;
   }

   .couple-title-tag {
     font-size: 0.8rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--accent-rose);
     font-weight: 600;
     margin-bottom: 8px;
   }

   .couple-name {
     font-family: var(--font-serif);
     font-size: 2.1rem;
     font-weight: 600;
     color: var(--text-main);
     margin-bottom: 14px;
     line-height: 1.15;
   }

   .couple-parents {
     font-size: 0.95rem;
     color: var(--text-muted);
     line-height: 1.6;
   }

   .couple-parents strong {
     color: var(--text-main);
   }

   .couple-separator {
     text-align: center;
     font-family: var(--font-script);
     font-size: 4rem;
     color: var(--accent-rose);
     line-height: 1;
     padding: 10px;
   }

   .quran-quote-box {
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md);
     padding: 32px 28px;
     margin-bottom: 50px;
     text-align: center;
   }

   .quran-verse-arabic {
     font-family: var(--font-serif);
     font-size: 1.35rem;
     line-height: 2.1;
     color: var(--accent-sage-dark);
     margin-bottom: 16px;
     direction: rtl;
   }

   .quran-verse-trans {
     font-size: 0.95rem;
     font-style: italic;
     color: var(--text-muted);
     max-width: 680px;
     margin: 0 auto 10px auto;
   }

   .quran-verse-ref {
     font-size: 0.82rem;
     font-weight: 600;
     letter-spacing: 0.12em;
     color: var(--accent-sage);
     text-transform: uppercase;
   }

   /* -------------------------------------------------------------
      COUNTDOWN SECTION
   ------------------------------------------------------------- */
   #countdown {
     background-color: var(--bg-sage-light);
   }

   .countdown-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     max-width: 640px;
     margin: 0 auto 36px auto;
   }

   

   .countdown-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md);
     padding: 24px 12px;
     text-align: center;
   }

   .countdown-number {
     font-family: var(--font-serif);
     font-size: clamp(2.2rem, 5vw, 3.2rem);
     font-weight: 600;
     color: var(--accent-sage-dark);
     line-height: 1;
     margin-bottom: 6px;
   }

   .countdown-label {
     font-size: 0.82rem;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: var(--text-muted);
     font-weight: 500;
   }
        @media (max-width: 580px) {
     .countdown-grid {
       grid-template-columns: repeat(4, 1fr);
       gap: 5px;
     }
     .countdown-number{
        font-size: 30px;
     }
     .countdown-label{
        font-size: 12px;
     }
     .countdown-card{
        padding: 12px;
     }
   }
   /* -------------------------------------------------------------
      WEDDING DETAILS (AKAD & RESEPSI)
   ------------------------------------------------------------- */
   .events-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 28px;
   }

   @media (max-width: 768px) {
     .events-grid {
       grid-template-columns: 1fr;
       gap: 24px;
     }
   }

   .event-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-lg);
     padding: 40px 32px;
     text-align: center;
     position: relative;
     transition: all 0.25s ease;
   }

   .event-card:hover {
     border-color: var(--accent-sage);
     transform: translateY(-3px);
   }

   .event-icon-badge {
     width: 58px;
     height: 58px;
     border-radius: var(--radius-full);
     background-color: var(--bg-sage-light);
     color: var(--accent-sage);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
   }

   .event-title {
     font-family: var(--font-serif);
     font-size: 2.1rem;
     font-weight: 600;
     color: var(--text-main);
     margin-bottom: 12px;
   }

   .event-time-badge {
     display: inline-block;
     background-color: var(--bg-rose-light);
     color: var(--accent-rose);
     font-size: 0.95rem;
     font-weight: 600;
     padding: 6px 16px;
     border-radius: var(--radius-full);
     margin-bottom: 24px;
   }

   .event-meta-list {
     list-style: none;
     text-align: left;
     border-top: 1px solid var(--border-subtle);
     padding-top: 20px;
     margin-bottom: 24px;
     display: flex;
     flex-direction: column;
     gap: 14px;
   }

   .event-meta-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     font-size: 0.95rem;
     color: var(--text-muted);
   }

   .event-meta-item svg {
     flex-shrink: 0;
     color: var(--accent-sage);
     margin-top: 2px;
   }

   /* -------------------------------------------------------------
      VENUE & MAPS (NO QR)
   ------------------------------------------------------------- */
   #venue {
     background-color: var(--bg-cream);
   }

   .venue-box {
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-lg);
     padding: 40px;
     max-width: 900px;
     margin: 0 auto;
     box-shadow: 0 8px 24px rgba(44, 53, 57, 0.04);
   }

   @media (max-width: 600px) {
     .venue-box {
       padding: 24px 18px;
     }
   }

   .venue-info h3 {
     font-family: var(--font-serif);
     font-size: 2.2rem;
     color: var(--text-main);
     margin-bottom: 8px;
   }

   .venue-address {
     font-size: 1.05rem;
     color: var(--text-muted);
     line-height: 1.65;
     margin-bottom: 24px;
     padding-left: 14px;
     border-left: 3px solid var(--accent-sage);
   }

   .venue-actions {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     margin-bottom: 28px;
   }

   .map-embed-wrapper {
     border-radius: var(--radius-md);
     overflow: hidden;
     border: 1px solid var(--border-subtle);
     height: 380px;
     width: 100%;
     background: #eee;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
   }

   @media (max-width: 600px) {
     .map-embed-wrapper {
       height: 280px;
     }
   }

   .map-embed-wrapper iframe {
     width: 100%;
     height: 100%;
     border: 0;
   }

   /* -------------------------------------------------------------
      PHOTO GALLERY CAROUSEL & LIGHTBOX
   ------------------------------------------------------------- */
   .gallery-carousel-wrapper {
     position: relative;
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 44px;
   }

   .gallery-carousel-track-container {
     overflow: hidden;
     border-radius: var(--radius-lg);
     padding: 8px 0;
   }

   .gallery-carousel-track {
     display: flex;
     transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
     gap: 20px;
   }

   .gallery-slide {
     flex: 0 0 calc(33.333% - 13.33px);
     position: relative;
     border-radius: var(--radius-md);
     overflow: hidden;
     aspect-ratio: 4/4;
     cursor: pointer;
     border: 1px solid var(--border-subtle);
     background-color: var(--bg-card);
     user-select: none;
     box-shadow: 0 4px 14px rgba(44, 53, 57, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .gallery-slide:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(44, 53, 57, 0.12);
   }

   @media (max-width: 860px) {
     .gallery-slide {
       flex: 0 0 calc(50% - 10px);
     }
     .gallery-carousel-wrapper {
       padding: 0 36px;
     }
   }

   @media (max-width: 540px) {
     .gallery-slide {
       flex: 0 0 100%;
     }
     .gallery-carousel-wrapper {
       padding: 0 28px;
     }
   }

   .gallery-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
     display: block;
   }

   .gallery-slide:hover .gallery-img {
     transform: scale(1.06);
   }

   .gallery-overlay {
     position: absolute;
     inset: 0;
     background: rgba(44, 53, 57, 0.45);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #FFFFFF;
     opacity: 0;
     transition: opacity 0.3s ease;
   }

   .gallery-slide:hover .gallery-overlay {
     opacity: 1;
   }

   .carousel-nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     border-radius: var(--radius-full);
     background-color: #FFFFFF;
     border: 1px solid var(--border-accent);
     color: var(--accent-sage-dark);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 14px rgba(44, 53, 57, 0.12);
     cursor: pointer;
     z-index: 10;
     transition: all 0.25s ease;
   }

   .carousel-nav-btn:hover {
     background-color: var(--accent-sage);
     color: #FFFFFF;
     border-color: var(--accent-sage);
     transform: translateY(-50%) scale(1.08);
   }

   .carousel-nav-btn.prev {
     left: -4px;
   }

   .carousel-nav-btn.next {
     right: -4px;
   }

   .carousel-dots {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 26px;
   }

   .carousel-dot {
     width: 10px;
     height: 10px;
     border-radius: var(--radius-full);
     background-color: var(--border-accent);
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
     padding: 0;
   }

   .carousel-dot.active {
     width: 28px;
     background-color: var(--accent-sage);
   }

   /* Lightbox Modal */
   .lightbox-modal {
     position: fixed;
     inset: 0;
     background: rgba(18, 22, 24, 0.92);
     backdrop-filter: blur(8px);
     z-index: 1000;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 20px;
   }

   .lightbox-modal.active {
     display: flex;
   }

   .lightbox-content {
     max-width: 90vw;
     max-height: 85vh;
     position: relative;
   }

   .lightbox-image {
     max-width: 100%;
     max-height: 85vh;
     border-radius: var(--radius-sm);
     object-fit: contain;
   }

   .lightbox-close-btn, .lightbox-prev-btn, .lightbox-next-btn {
     background: rgba(255, 255, 255, 0.18);
     color: #FFFFFF;
     border: 1px solid rgba(255, 255, 255, 0.3);
     width: 44px;
     height: 44px;
     border-radius: var(--radius-full);
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     transition: background 0.2s ease;
   }

   .lightbox-close-btn:hover, .lightbox-prev-btn:hover, .lightbox-next-btn:hover {
     background: rgba(255, 255, 255, 0.35);
   }

   .lightbox-close-btn {
     top: -54px;
     right: 0;
   }

   .lightbox-prev-btn {
     left: -60px;
     top: 50%;
     transform: translateY(-50%);
   }

   .lightbox-next-btn {
     right: -60px;
     top: 50%;
     transform: translateY(-50%);
   }

   @media (max-width: 768px) {
     .lightbox-prev-btn { left: 10px; }
     .lightbox-next-btn { right: 10px; }
     .lightbox-close-btn { top: 16px; right: 16px; }
   }

   /* -------------------------------------------------------------
      GIFT & MONEY TRANSFER (2-COLUMN & LIGHTBOX)
   ------------------------------------------------------------- */
   #gift {
     background-color: var(--bg-rose-light);
   }

   .gift-column-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 28px;
     max-width: 860px;
     margin: 0 auto;
   }

   @media (max-width: 768px) {
     .gift-column-grid {
       grid-template-columns: 1fr;
       gap: 20px;
     }
   }

   .gift-person-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-lg);
     padding: 36px 28px;
     text-align: center;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
   }

   .gift-person-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
   }

   .gift-person-avatar {
     width: 100px;
     height: 100px;
     border-radius: var(--radius-full);
     object-fit: cover;
     margin-bottom: 16px;
     border: 3px solid var(--bg-cream);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }

   .gift-role-badge {
     font-size: 0.78rem;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     font-weight: 700;
     padding: 4px 14px;
     border-radius: var(--radius-full);
     margin-bottom: 10px;
   }

   .gift-role-badge.groom {
     background-color: var(--bg-sage-light);
     color: var(--accent-sage-dark);
   }

   .gift-role-badge.bride {
     background-color: var(--bg-rose-light);
     color: var(--accent-rose);
   }

   .gift-person-name {
     font-family: var(--font-serif);
     font-size: 1.6rem;
     font-weight: 600;
     color: var(--text-main);
     margin-bottom: 8px;
   }

   .gift-person-desc {
     font-size: 0.9rem;
     color: var(--text-muted);
     margin-bottom: 22px;
     max-width: 320px;
   }

   .btn-open-gift-modal {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background-color: var(--accent-sage);
     color: #FFFFFF;
     padding: 12px 26px;
     border-radius: var(--radius-full);
     font-size: 0.92rem;
     font-weight: 600;
     transition: all 0.2s ease;
     margin-top: auto;
   }

   .btn-open-gift-modal:hover {
     background-color: var(--accent-sage-dark);
     transform: scale(1.02);
   }

   .btn-open-gift-modal.bride-btn {
     background-color: var(--accent-rose);
   }

   .btn-open-gift-modal.bride-btn:hover {
     background-color: #B16F5E;
   }

   /* GIFT LIGHTBOX MODAL */
   .gift-modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(20, 26, 27, 0.78);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     z-index: 1050;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 20px;
     overflow-y: auto;
   }

   .gift-modal-overlay.active {
     display: flex;
   }

   .gift-modal-box {
     background: #FFFFFF;
     border-radius: var(--radius-lg);
     max-width: 580px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     padding: 32px 24px;
     position: relative;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
     animation: modalSlideUp 0.3s ease-out;
   }

   @keyframes modalSlideUp {
     from { opacity: 0; transform: translateY(30px) scale(0.97); }
     to { opacity: 1; transform: translateY(0) scale(1); }
   }

   .gift-modal-close {
     position: absolute;
     top: 18px;
     right: 18px;
     background: var(--bg-cream);
     border: 1px solid var(--border-subtle);
     width: 36px;
     height: 36px;
     border-radius: var(--radius-full);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-muted);
     transition: all 0.2s ease;
     cursor: pointer;
   }

   .gift-modal-close:hover {
     background: #E5E0DA;
     color: var(--text-main);
   }

   /* Lightbox tab switcher */
   .gift-modal-switcher {
     display: flex;
     background: var(--bg-cream);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-full);
     padding: 4px;
     margin: 16px 0 24px 0;
     gap: 4px;
   }

   .gift-tab-btn {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 10px 16px;
     border-radius: var(--radius-full);
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--text-muted);
     background: transparent;
     transition: all 0.2s ease;
     cursor: pointer;
   }

   .gift-tab-btn.active {
     background: #FFFFFF;
     color: var(--accent-sage-dark);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }

   .gift-tab-content {
     display: none;
   }

   .gift-tab-content.active {
     display: block;
   }

   .gift-content-section {
     background: var(--bg-cream);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md);
     padding: 20px;
     margin-bottom: 18px;
     text-align: center;
   }

   .gift-section-label {
     font-size: 0.78rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--accent-sage);
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
   }

   .bank-acc-num {
     font-family: var(--font-sans);
     font-size: 1.45rem;
     font-weight: 700;
     color: var(--text-main);
     letter-spacing: 0.06em;
     margin-bottom: 6px;
   }

   .bank-acc-name {
     font-size: 0.92rem;
     color: var(--text-muted);
     margin-bottom: 14px;
   }

   .btn-copy {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: #FFFFFF;
     border: 1px solid var(--border-accent);
     color: var(--text-main);
     padding: 9px 18px;
     border-radius: var(--radius-full);
     font-size: 0.85rem;
     font-weight: 500;
     transition: all 0.2s ease;
   }

   .btn-copy:hover, .btn-copy.copied {
     background-color: var(--accent-sage);
     border-color: var(--accent-sage);
     color: #FFFFFF;
   }

   .paypal-link-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #FFFFFF;
     border: 1px solid var(--border-accent);
     border-radius: var(--radius-sm);
     padding: 12px 16px;
     margin-top: 8px;
     text-align: left;
   }

   .paypal-info {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #003087;
     font-weight: 700;
     font-size: 0.95rem;
   }

   .btn-paypal {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: #0070BA;
     color: #FFFFFF;
     padding: 8px 16px;
     border-radius: var(--radius-full);
     font-size: 0.82rem;
     font-weight: 600;
     transition: background 0.2s ease;
   }

   .btn-paypal:hover {
     background: #003087;
     color: #FFFFFF;
   }

   /* Wishlist product cards in modal */
   .gift-products-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-top: 10px;
   }

   .product-gift-card {
     display: flex;
     align-items: center;
     background: #FFFFFF;
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-sm);
     padding: 12px;
     gap: 14px;
     text-align: left;
     transition: border-color 0.2s ease;
   }

   .product-gift-card:hover {
     border-color: var(--accent-sage);
   }

   .product-thumb {
     width: 54px;
     height: 54px;
     border-radius: var(--radius-sm);
     object-fit: cover;
     flex-shrink: 0;
     background: var(--bg-cream);
   }

   .product-details {
     flex: 1;
     min-width: 0;
   }

   .product-title {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--text-main);
     margin-bottom: 2px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

   .product-store {
     font-size: 0.78rem;
     color: var(--text-muted);
   }

   .btn-marketplace {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background-color: var(--bg-cream);
     border: 1px solid var(--border-accent);
     color: var(--text-main);
     padding: 7px 12px;
     border-radius: var(--radius-full);
     font-size: 0.78rem;
     font-weight: 600;
     white-space: nowrap;
     transition: all 0.2s ease;
     flex-shrink: 0;
   }

   .btn-marketplace:hover {
     background-color: var(--accent-sage);
     color: #FFFFFF;
     border-color: var(--accent-sage);
   }

   .physical-gift-card {
     max-width: 860px;
     margin: 28px auto 0 auto;
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-lg);
     padding: 32px 28px;
     text-align: center;
   }

   .physical-gift-card h4 {
     font-family: var(--font-serif);
     font-size: 1.6rem;
     margin-bottom: 10px;
     color: var(--text-main);
   }

   /* -------------------------------------------------------------
      SEE YOU THERE & WISHES GUESTBOOK
   ------------------------------------------------------------- */
   #wishes {
     background-color: var(--bg-cream);
   }

   .guestbook-wrapper {
     max-width: 720px;
     margin: 0 auto;
   }

   .wishes-form-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-lg);
     padding: 32px 28px;
     margin-bottom: 36px;
   }

   .form-group {
     margin-bottom: 20px;
     text-align: left;
   }

   .form-label {
     display: block;
     font-size: 0.88rem;
     font-weight: 600;
     color: var(--text-main);
     margin-bottom: 8px;
   }

   .form-input, .form-textarea, .form-select {
     width: 100%;
     padding: 12px 16px;
     border: 1px solid var(--border-accent);
     border-radius: var(--radius-sm);
     background-color: var(--bg-cream);
     color: var(--text-main);
     font-size: 0.95rem;
     transition: border-color 0.2s ease;
   }

   .form-input:focus, .form-textarea:focus, .form-select:focus {
     border-color: var(--accent-sage);
     background-color: #FFFFFF;
   }

   .form-textarea {
     resize: vertical;
     min-height: 100px;
   }

   .wishes-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
     max-height: 480px;
     overflow-y: auto;
     padding-right: 6px;
   }

   /* custom scrollbar */
   .wishes-list::-webkit-scrollbar {
     width: 6px;
   }
   .wishes-list::-webkit-scrollbar-thumb {
     background: var(--border-accent);
     border-radius: var(--radius-full);
   }

   .wish-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md);
     padding: 20px;
     text-align: left;
   }

   .wish-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 8px;
   }

   .wish-name {
     font-weight: 600;
     font-size: 1rem;
     color: var(--text-main);
   }

   .wish-status {
     font-size: 0.76rem;
     padding: 3px 10px;
     border-radius: var(--radius-full);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }

   .status-hadir {
     background-color: var(--bg-sage-light);
     color: var(--accent-sage-dark);
   }

   .status-tidak {
     background-color: var(--bg-rose-light);
     color: var(--accent-rose);
   }

   .status-ragu {
     background-color: var(--bg-champagne);
     color: var(--accent-gold);
   }

   .wish-message {
     font-size: 0.95rem;
     color: var(--text-muted);
     line-height: 1.5;
   }

   .wish-time {
     font-size: 0.78rem;
     color: var(--text-light);
     margin-top: 8px;
   }

   /* -------------------------------------------------------------
      FOOTER
   ------------------------------------------------------------- */
   footer {
     background-color: #242B2C;
     color: #E2E8E9;
     text-align: center;
     padding: 60px 20px 150px 20px;
   }

   .footer-names {
     font-family: var(--font-serif);
     font-size: 2.4rem;
     font-weight: 400;
     color: #FAF7F2;
     margin-bottom: 12px;
   }

   .footer-desc {
     font-size: 0.95rem;
     color: #A0ACAE;
     max-width: 520px;
     margin: 0 auto 28px auto;
     line-height: 1.6;
   }

   .footer-copyright {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 24px;
     font-size: 0.82rem;
     color: #7B888A;
     letter-spacing: 0.05em;
   }

   /* Toast notification */
   .toast-notice {
     position: fixed;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%) translateY(100px);
     background: rgba(36, 43, 44, 0.94);
     color: #FFFFFF;
     padding: 12px 24px;
     border-radius: var(--radius-full);
     font-size: 0.9rem;
     display: flex;
     align-items: center;
     gap: 10px;
     z-index: 1100;
     opacity: 0;
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
   }

   .toast-notice.show {
     transform: translateX(-50%) translateY(0);
     opacity: 1;
   }
   .hero-date-daynum{
        position: relative;
        top: -10px;
   }
@media (max-width: 768px) {
        .venue-info h3,
        .couple-name,
        .hero-simple-amp,
        .intro-names span,
        .section-title {
                font-size: 30px;
        }
        .venue-actions{
                flex-direction: column;
        }
        .venue-actions > *{
                display: flex;
                justify-content: center;
                align-items: center;
        }
        .product-gift-card{
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                text-align: center;
        }
        .parallax-author{
                font-size: 12px;
        }
        .product-title{
                white-space: normal;
        }
        .gift-modal-box{
                padding: 24px 15px;
        }
        .gift-modal-close{
                top: 5px;
                right: 5px;
        }
        .paypal-info span,
        .carousel-dots{
                display: none !important;
        }
        .intro-cover {
        background: radial-gradient(circle at 50% 35%, rgba(44, 53, 57, 0.4) 0%, rgba(20, 24, 25, 0.88) 100%),
                    url('img/cover-mobile.jpg') center/cover no-repeat;
      }
}