/** ==========================

   *LINDSEY MONTOYA QUINCEAÑERA*

   Luxury Blush & Champagne Theme

========================== **/

:root{

--pink:#E2B0AC;

--light-pink:#F7C9C3;

--rose:#C99992;

--gold:#D6B77A;

--gold-light:#F7C9C3;

--white:#FFF8F3;

--dark:#774A43;

--shadow:0 15px 35px rgba(0,0,0,.15);

--radius:20px;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(180deg,#FFF8F3,#F7C9C3,#FFF8F3);

    color:var(--dark);

    overflow-x:hidden;
   width: 100%;

}

section{

    padding:100px 8%;

}

h1,h2,h3{

    font-family:'Cinzel',serif;

}

h1{

    font-size:4rem;

}

h2{

    font-size:2.5rem;

    color:var(--gold);

    margin-bottom:25px;

}

p{

    line-height:1.8;

    font-size:1.1rem;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

#loader{

    position:fixed;

    inset:0;

    background:linear-gradient(135deg,#F7C9C3,#fff);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:1s;

}

.loader-content{

    text-align:center;

}

.loader-content h1{

    font-family:'Great Vibes',cursive;

    color:var(--gold);

    font-size:4rem;

}

.loader-content p{

    margin-top:15px;

    letter-spacing:3px;

}

#welcome{

    height:100vh;

    background:url("assets/images/lindsey5.jpg") center/cover;

    position:relative;

}

#welcome::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.overlay{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

    padding:20px;

}

.overlay h2{

    color:white;

    font-size:2rem;

}

.overlay h1{

    font-family:'Great Vibes',cursive;

    font-size:6rem;

    margin:20px 0;

}

.overlay p{

    max-width:650px;

    font-size:1.2rem;

}

button,

.heroButton,

.mapButton{

    display:inline-block;

    margin-top:35px;

    padding:18px 45px;

    background:linear-gradient(45deg,

    var(--gold),

    var(--gold-light));

    color:white;

    border:none;

    border-radius:50px;

    cursor:pointer;

    font-weight:bold;

    font-size:1rem;

    transition:.4s;

    box-shadow:var(--shadow);

}

button:hover,

.heroButton:hover,

.mapButton:hover{

    transform:translateY(-4px) scale(1.05);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.heroButton{

animation:float 3s infinite;

}

.card{

background:rgba(255,255,255,.55);

backdrop-filter:blur(15px);

border-radius:25px;

padding:35px;

box-shadow:var(--shadow);

transition:.4s;

}

.card:hover{

transform:translateY(-10px);

}

section h2::after{

content:"";

display:block;

width:120px;

height:3px;

margin:15px auto;

background:linear-gradient(90deg,

transparent,

var(--gold),

transparent);

}

/** ==========================================

   NAVIGATION

========================================== **/

nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:18px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(15px);

    z-index:1000;

    transition:.4s;

    border-bottom:1px solid rgba(255,255,255,.25);

}

.logo{

    font-family:"Great Vibes",cursive;

    font-size:2rem;

    color:white;

    letter-spacing:2px;

}

nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

nav a{

    color:white;

    font-weight:600;

    transition:.3s;

    position:relative;

}

nav a:hover{

    color:var(--gold-light);

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--gold-light);

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/** ==========================================

   HERO

========================================== **/

#hero{

    min-height:100vh;

    background:url("assets/images/hero.jpg") center center/cover no-repeat;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

#hero::before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.hero-overlay{

position:relative;

z-index:2;

text-align:center;

color:white;

padding:20px;

}

.hero-overlay h1{

font-family:"Great Vibes",cursive;

font-size:6rem;

margin:25px 0;

animation:fadeUp 2s;

}

.hero-overlay h2{

color:white;

letter-spacing:5px;

}

.hero-overlay p{

font-size:1.3rem;

margin-bottom:30px;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/** ==========================================

   ABOUT

========================================== **/

#about{

text-align:center;

background:white;

}

#about h3{

font-size:2.5rem;

font-family:"Great Vibes",cursive;

margin:25px 0;

color:var(--gold);

}

#about h4{

margin-top:20px;

line-height:2;

font-weight:500;

}

#about p{

max-width:800px;

margin:auto;

}

/** ==========================================

   COUNTDOWN

========================================== **/

#countdown{

background:linear-gradient(

135deg,

#F7C9C3,

white);

text-align:center;

}

.countdown-container{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-top:60px;

}

.countdown-container div{

background:white;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.4s;

}

.countdown-container div:hover{

transform:translateY(-8px);

}

.countdown-container span{

display:block;

font-size:3.5rem;

font-weight:bold;

color:var(--gold);

}

.countdown-container p{

margin-top:10px;

font-size:1rem;

letter-spacing:2px;

text-transform:uppercase;

}

/** ==========================================

   TIMELINE

========================================== **/

.timeline{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

margin-top:60px;

}

.timeline .card{

text-align:center;

}

.timeline i{

font-size:3rem;

color:var(--gold);

margin-bottom:25px;

}

.timeline h3{

margin-bottom:15px;

}

/** ==========================================

   DECORATIONS

========================================== **/

#about::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:rgba(226,176,172,.15);

border-radius:50%;

left:-120px;

top:50px;

filter:blur(30px);

}

#schedule{

position:relative;

overflow:hidden;

}

#schedule::after{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(214,183,122,.08);

right:-180px;

bottom:-180px;

filter:blur(20px);

}

.card{

overflow:hidden;

position:relative;

}

.card::before{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:250%;

height:250%;

background:

linear-gradient(

45deg,

transparent,

rgba(255,255,255,.3),

transparent);

transform:rotate(25deg);

transition:.8s;

}

.card:hover::before{

top:100%;

left:100%;

}

::selection{

background:var(--gold);

color:white;

}

/** ==========================================================

   *PART 2.3 — GALLERY, MAP, RSVP, FOOTER & RESPONSIVE DESIGN*

========================================================== **/



/** ==========================================================

   PHOTO GALLERY

========================================================== **/

#gallery{

    background:linear-gradient(

        180deg,

        #FFF8F3,

        #F7C9C3

    );

    text-align:center;

    position:relative;

    overflow:hidden;

}








/** ==========================================================

   GALLERY DECORATIONS

========================================================== **/



#gallery::before{

    content:"🌸";

    position:absolute;

    left:40px;

    top:80px;

    font-size:3rem;

    opacity:.25;

    animation:

    float 5s infinite;

}



#gallery::after{

    content:"🌸";

    position:absolute;

    right:50px;

    bottom:100px;

    font-size:4rem;

    opacity:.2;

    animation:

    float 8s infinite;

}





/** ==========================================================

   *LOCATION / MAP*

========================================================== **/
#reception{
    text-align: center;
}

#reception h2,
#reception h3,
#reception p{
    text-align: center;
}

#reception .mapButton{
    display: inline-block;
    margin: 0 auto;
}

#location {
    background: white;
    text-align: center;
}

#location iframe {
    display: block;
    width: min(900px, 100%);
    max-width: 900px;
    height: 450px;
    margin: 40px auto 0;
    border: 0;
    border-radius: 25px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

#location .mapButton {
    display: block;
    width: fit-content;
    margin: 35px auto 0;
}



/** ==========================================================

   RSVP SECTION

========================================================== **/



#rsvp{

    background:
    linear-gradient(
        135deg,
        #F7C9C3,
        white
    );

    text-align:center;
    position:relative;
    overflow:hidden;

}


/* RSVP TITLE */

#rsvp h2{

    text-align:center;

    margin:0 0 10px 0;

    padding-top:20px;

    font-family:'Great Vibes', cursive;

    font-size:3.5rem;

    color:#8B5E5E;

    font-weight:400;

    position:relative;

    z-index:1;

}


/* RSVP FORM */

#rsvp iframe{

    margin-top:40px;

    border:none;

    border-radius:25px;

    background:white;

    box-shadow:var(--shadow);

    max-width:900px;

    width:100%;

    position:relative;

    z-index:1;

}


/* RSVP DECORATIONS */

#rsvp::before{

    content:"💖";

    position:absolute;

    left:40px;

    top:100px;

    font-size:3rem;

    opacity:.25;

    z-index:0;

}


#rsvp::after{

    content:"✨";

    position:absolute;

    right:60px;

    bottom:80px;

    font-size:4rem;

    opacity:.2;

    z-index:0;

}



/** ==========================================================

   FOOTER

========================================================== **/



footer{

    background:

    linear-gradient(

        135deg,

        #AA675A,

        #D6B77A

    );

    color:white;

    text-align:center;

    padding:80px 20px;

}





footer h2{

    color:white;

    font-family:

    "Great Vibes",

    cursive;

    font-size:3.5rem;

    margin-bottom:20px;

}





footer p{

    max-width:700px;

    margin:auto;

}





/** ==========================================================

   SCROLL REVEAL ANIMATION

========================================================== **/



.reveal{

    opacity:0;

    transform:

    translateY(60px);

    transition:

    1s ease;

}





.reveal.active{

    opacity:1;

    transform:

    translateY(0);

}





/** ==========================================================

   ELEGANT SECTION HEADINGS

========================================================== **/



section h2{

    position:relative;

    display:inline-block;

}





section h2::before{

    content:"✦";

    position:absolute;

    left:-40px;

    top:0;

    color:var(--gold);

}





section h2::after{

    content:"✦";

    position:absolute;

    right:-40px;

    top:0;

    color:var(--gold);

}





/** ==========================================================

   TABLET RESPONSIVE DESIGN

========================================================== **/



@media(max-width:991px){



.hero-overlay h1{

    font-size:4.5rem;

}



.countdown-container{

    grid-template-columns:

    repeat(2,1fr);

}



nav{

    padding:

    15px 5%;

}



nav ul{

    gap:20px;

}



}







/** ==========================================================

   MOBILE RESPONSIVE DESIGN

========================================================== **/



@media(max-width:768px){



section{

    padding:

    70px 25px;

}





.hero-overlay h1{

    font-size:3.5rem;

}





.overlay h1{

    font-size:4rem;

}





.countdown-container{

    grid-template-columns:

    1fr;

}










.timeline{

    grid-template-columns:

    1fr;

}





nav{

    flex-direction:

column;

    gap:15px;

}





nav ul{

    flex-wrap:wrap;

    justify-content:center;

}





.logo{

    font-size:2.2rem;

}





h2{

    font-size:2rem;

}



}





/** ==========================================================

   SMALL PHONE DESIGN

========================================================== **/



@media(max-width:480px){



.hero-overlay h1{

    font-size:2.8rem;

}





.overlay h1{

    font-size:3rem;

}





button,

.heroButton,

.mapButton{

    padding:

    15px 30px;

}








}





/** ==========================================================

   SOFT BLUSH BACKGROUND EFFECT

========================================================== **/



body{

background-image:

radial-gradient(

circle at 10% 20%,

rgba(255,192,203,.08),

transparent 30%

),



radial-gradient(

circle at 90% 70%,

rgba(214,183,122,.08),

transparent 30%

),



radial-gradient(

circle at 40% 90%,

rgba(226,176,172,.05),

transparent 25%

);

}

/** ==========================================

   ROSE PETALS

========================================== **/

.petal{

position:fixed;

top:-50px;

font-size:25px;

animation:fall linear infinite;

z-index:10;

pointer-events:none;

}



@keyframes fall{

0%{

transform:

translateY(-100px)

rotate(0deg);

opacity:1;

}

100%{

transform:

translateY(110vh)

rotate(360deg);

opacity:0;

}

}



/** ==========================================

   ROSE PETALS

========================================== **/

.petal{

position:fixed;

top:-50px;

font-size:25px;

animation:fall linear infinite;

z-index:10;

pointer-events:none;

}



@keyframes fall{

0%{

transform:

translateY(-100px)

rotate(0deg);

opacity:1;

}

100%{

transform:

translateY(110vh)

rotate(360deg);

opacity:0;

}

}

/** ==========================================

   SPARKLES

========================================== **/

.sparkle{

position:fixed;

width:8px;

height:8px;

background:var(--gold-light);

border-radius:50%;

box-shadow:

0 0 10px var(--gold),

0 0 20px var(--gold);

animation:sparkle 2s infinite;

pointer-events:none;

z-index:20;

}



@keyframes sparkle{

0%,100%{

opacity:0;

transform:scale(0);

}

50%{

opacity:1;

transform:scale(1);

}

}

/** ==========================================

   BUTTERFLIES

========================================== **/

.butterfly{

position:absolute;

font-size:35px;

animation:fly 12s infinite;

}



@keyframes fly{

0%{

transform:

translate(0,0)

rotate(0deg);

}

25%{

transform:

translate(80px,-100px)

rotate(20deg);

}

50%{

transform:

translate(180px,20px)

rotate(-20deg);

}

75%{

transform:

translate(60px,120px)

rotate(15deg);

}

100%{

transform:

translate(0,0)

rotate(0deg);

}

}

.card,

.countdown-container div{

border:

1px solid rgba(255,255,255,.5);

background:

linear-gradient(

135deg,

rgba(255,255,255,.75),

rgba(247,201,195,.5)

);

backdrop-filter:

blur(20px);

}

.music-control{

position:fixed;

bottom:30px;

right:30px;

width:60px;

height:60px;

border-radius:50%;

background:

linear-gradient(

45deg,

var(--gold),

#D6B77A

);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

box-shadow:var(--shadow);

cursor:pointer;

z-index:1000;

}



/** ==========================================

   DARK MODE

========================================== **/

.dark{

background:#332B29;

color:white;

}



.dark section{

background:#774A43;

}



.dark .card{

background:

rgba(255,255,255,.08);

color:white;

}



.dark h2{

color:#F7C9C3;

}



.confetti{

position:fixed;

top:-20px;

width:12px;

height:20px;

background:var(--gold);

animation:confettiFall 4s linear forwards;

z-index:9999;

}



@keyframes confettiFall{

to{

transform:

translateY(110vh)

rotate(720deg);

opacity:0;

}

}

.lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.85);

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

}



.lightbox img{

max-width:90%;

max-height:90%;

border-radius:20px;

box-shadow:

0 0 40px black;

}



.luxury-divider{

width:180px;

height:2px;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

margin:30px auto;

}

button:hover,

.heroButton:hover,

.mapButton:hover{

animation:glow 1.5s infinite;

}



@keyframes glow{

0%{

box-shadow:

0 0 5px var(--gold);

}

50%{

box-shadow:

0 0 25px var(--gold);

}

100%{

box-shadow:

0 0 5px var(--gold);

}

}

#welcome h1,

.hero-overlay h1{

text-shadow:

0 5px 20px rgba(0,0,0,.4);

}



#welcome p,

.hero-overlay p{

letter-spacing:2px;

}

/** ==========================================

   PART 4 PREMIUM SECTIONS

========================================== **/



#honor,

#video,

#gifts,

#guestbook{

text-align:center;

}





.honor-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:50px;

}





.video-container video{

width:90%;

max-width:900px;

border-radius:25px;

box-shadow:var(--shadow);

}





#gifts .card,

#guestbook .card{

max-width:700px;

margin:auto;

}





#darkMode{

background:none;

box-shadow:none;

font-size:1.5rem;

padding:5px;

}





#shareButton{

margin-top:20px;

}





@media(max-width:768px){

.video-container video{

width:100%;

}

}

.welcome-message {

    position: fixed;

    top: 15%;

    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

    text-align: center;

    width: 90%;

    max-width: 700px;

    color: #FFF8F3;

    opacity: 0;

    animation: welcomeFadeIn 2s ease forwards;

}

.welcome-message h2 {

    font-family: "Great Vibes", cursive;

    font-size: 3rem;

    margin-bottom: 10px;

}

.welcome-message p {

    font-family: "Poppins", sans-serif;

    font-size: 1.1rem;

}



@keyframes welcomeFadeIn {

    from {

        opacity: 0;

        transform: translate(-50%, 20px);

    }

    to {

        opacity: 1;

        transform: translate(-50%, 0);

    }

}


/* ==========================================================
   PHOTO CAROUSEL
   Unified desktop + mobile system
========================================================== */

.gallery {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 50px auto 0;
}

.gallery-carousel {
    position: relative;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-track {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 25px;
    background: rgba(119, 74, 67, 0.08);
}

.gallery-slide {
    display: none;
    width: 100%;
    height: 600px;
    align-items: center;
    justify-content: center;
    background: var(--ivory);
    border-radius: 25px;
    overflow: hidden;
}

.gallery-slide.active {
    display: flex;
    animation: galleryFade 0.6s ease;
}

.gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    border-radius: 25px;
    box-shadow: var(--shadow);
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    animation: none !important;
    transition: transform 0.3s ease;
}

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

/* ----------------------------------------------------------
   CAROUSEL ARROWS
---------------------------------------------------------- */

.gallery-btn {
    appearance: none;
    -webkit-appearance: none;

    position: absolute;
    top: 50%;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;

    padding: 0;
    margin: 0;

    border: 1px solid rgba(255, 248, 243, 0.7);
    border-radius: 50%;

    background: var(--dark-rose);
    color: white;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
    box-shadow: none;

    transform: translateY(-50%);

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.gallery-btn:hover {
    background: var(--dark-rose);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 0 15px rgba(214, 183, 122, 0.5);
}

.gallery-prev {
    left: 20px;
}

.gallery-next {
    right: 20px;
}

/* ----------------------------------------------------------
   PHOTO INDICATOR DOTS
---------------------------------------------------------- */

.gallery-dots {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    gap: 8px;
    margin-top: 20px;
}

.gallery-dot {
    appearance: none;
    -webkit-appearance: none;

    display: block;
    flex: 0 0 auto;

    width: 7px;
    height: 7px;
    min-width: 7px;
    min-height: 7px;

    padding: 0;
    margin: 0;

    border: none;
    outline: none;
    border-radius: 50%;

    background: var(--rose);
    box-shadow: none;

    cursor: pointer;
    line-height: 0;

    transition:
        width 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}

.gallery-dot:hover {
    transform: scale(1.15);
}

.gallery-dot.active {
    width: 22px;
    height: 7px;
    min-width: 22px;
    min-height: 7px;
    border-radius: 7px;
    background: var(--gold);
}

.gallery-dot:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ----------------------------------------------------------
   PHOTO FADE
---------------------------------------------------------- */

@keyframes galleryFade {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@media (max-width: 768px) {

    .gallery {
        width: 100%;
        max-width: 100%;
    }

    .gallery-carousel {
        width: 100%;
        max-width: 100%;
        margin: 32px auto 15px;
    }

    .gallery-track {
        border-radius: 18px;
    }

    .gallery-slide {
        height: min(72svh, 520px);
        min-height: 300px;
        border-radius: 18px;
    }

    .gallery-slide img {
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 5;
        object-fit: contain;
        border-radius: 18px;
    }

    .gallery-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 19px;
        background: rgba(119, 74, 67, 0.72);
    }

    .gallery-btn:hover {
        transform: translateY(-50%);
        box-shadow: none;
    }

    .gallery-prev {
        left: 8px;
    }

    .gallery-next {
        right: 8px;
    }

    .gallery-dots {
        gap: 7px;
        margin-top: 18px;
    }

    .gallery-dot {
        width: 6px;
        height: 6px;
        min-width: 6px;
        min-height: 6px;
    }

    .gallery-dot.active {
        width: 19px;
        height: 6px;
        min-width: 19px;
        min-height: 6px;
    }

    .gallery-dot:hover {
        transform: none;
    }
}

@media (max-width: 480px) {

    .gallery-slide {
        height: 68svh;
        min-height: 280px;
    }

    .gallery-slide img,
    .gallery-track {
        border-radius: 15px;
    }

    .gallery-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 16px;
    }

    .gallery-prev {
        left: 6px;
    }

    .gallery-next {
        right: 6px;
    }

    .gallery-dots {
        gap: 6px;
        margin-top: 16px;
    }

    .gallery-dot {
        width: 6px;
        height: 6px;
    }

    .gallery-dot.active {
        width: 18px;
        height: 6px;
        min-width: 18px;
        min-height: 6px;
    }
}

/* ==========================================================
   PHONE-FRIENDLY RESPONSIVE POLISH
   Added without changing the original desktop design
========================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

section,
header,
#welcome {
    scroll-margin-top: 80px;
}

/* Make embedded maps/forms behave inside narrow screens */
iframe,
video {
    max-width: 100%;
}


/* Avoid the decorative heading stars getting pushed off small screens */
@media (max-width: 768px) {

    :root {
        --mobile-side-padding: 18px;
    }

    body {
        overflow-x: hidden;
    }

    section {
        padding: 72px var(--mobile-side-padding);
    }

    p {
        font-size: 1rem;
        line-height: 1.7;
    }

    h2 {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    section h2::before {
        left: -24px;
    }

    section h2::after {
        right: -24px;
    }

    /* Fixed navigation becomes a compact, horizontally scrollable bar */
    nav {
        padding:
            calc(8px + env(safe-area-inset-top))
            14px
            8px;
        min-height: 62px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .logo {
        flex: 0 0 auto;
        font-size: 1.8rem;
    }

    nav ul {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 5px 2px 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    nav ul::-webkit-scrollbar {
        display: none;
    }

    nav a {
        white-space: nowrap;
        font-size: 0.82rem;
    }

    /* Keep the opening and hero content comfortably inside the screen */
    #welcome,
    #hero {
        min-height: 100svh;
        min-height: 100dvh;
    }

    .overlay,
    .hero-overlay {
        padding:
            90px 18px
            35px;
    }

    .overlay h2 {
        font-size: clamp(1.3rem, 5vw, 2rem);
    }

    .overlay h1,
    .hero-overlay h1 {
        font-size: clamp(3rem, 14vw, 4.5rem);
        line-height: 1.05;
        margin: 14px 0 20px;
    }

    .overlay p,
    .hero-overlay p {
        font-size: 1rem;
        max-width: 90vw;
    }

    /* Buttons stack cleanly and are easier to tap */
    button:not(.gallery-btn):not(.gallery-dot),
    .heroButton,
    .mapButton {
        min-height: 52px;
        padding: 14px 24px;
        margin-top: 18px;
        font-size: 0.95rem;
    }

    .hero-overlay .heroButton {
        display: block;
        width: min(100%, 320px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Countdown stays easy to read without becoming extremely tall */
    .countdown-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 35px;
    }

    .countdown-container div {
        padding: 22px 10px;
        border-radius: 18px;
    }

    .countdown-container span {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .countdown-container p {
        font-size: 0.72rem;
        letter-spacing: 1px;
    }

    /* Schedule cards use the full available width */
    .timeline,
    .honor-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 35px;
    }

    .card {
        padding: 26px 20px;
        border-radius: 20px;
    }

    .card:hover {
        transform: none;
    }




    /* Maps: shorter on phones, but still large enough to use */
    #location iframe {
        height: 300px !important;
        margin-top: 25px;
        border-radius: 18px;
    }

    /* Google Form */
    #rsvp iframe {
        height: 900px !important;
        margin-top: 25px;
        border-radius: 18px;
    }

    .music-control {
        width: 52px;
        height: 52px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        font-size: 21px;
    }

    .welcome-message {
        top: 18%;
        width: calc(100% - 32px);
    }

    .welcome-message h2 {
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.15;
    }

    .welcome-message p {
        font-size: 0.95rem;
    }

    /* Reduce visual effects that can feel heavy on phones */
    .petal {
        font-size: 18px;
    }

    .sparkle {
        width: 6px;
        height: 6px;
    }

    footer {
        padding: 65px 20px;
    }

    footer h2 {
        font-size: 3rem;
    }
}

/* Very small phones */
@media (max-width: 480px) {

    section {
        padding: 62px 14px;
    }

    nav {
        gap: 8px;
    }

    .logo {
        font-size: 1.6rem;
    }

    nav ul {
        gap: 14px;
    }

    nav a {
        font-size: 0.76rem;
    }

    .overlay,
    .hero-overlay {
        padding-left: 14px;
        padding-right: 14px;
    }

    .overlay h1,
    .hero-overlay h1 {
        font-size: clamp(2.7rem, 14vw, 3.5rem);
    }

    .countdown-container {
        gap: 9px;
    }

    .countdown-container div {
        padding: 18px 7px;
    }


    #location iframe {
        height: 270px !important;
    }

    #rsvp iframe {
        height: 850px !important;
    }
}

/* Respect devices that prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}