:root{
    --primary:#2f5762;
    --secondary:#7c9a7a;
    --accent:#f2e4c6;
    --background:#fcf7ef;
    --surface:#fffdf9;
    --border:#e7dece;
    --text:#4d4a45;
    --muted:#6f6a63;

    --shadow:0 20px 55px rgba(35,48,57,.12);
    --radius:30px;
    --motion-fast:.2s cubic-bezier(.22,1,.36,1);
    --motion-base:.35s cubic-bezier(.22,1,.36,1);
    --motion-slow:.8s cubic-bezier(.22,1,.36,1);
    --glass:rgba(255,255,255,.62);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at top left, rgba(242,228,198,.35), transparent 28%),
        radial-gradient(circle at bottom right, rgba(124,154,122,.14), transparent 24%),
        linear-gradient(135deg, #fdfaf4 0%, var(--background) 45%, #f5ebde 100%);
    color:var(--text);
    font-family:"Cairo",sans-serif;
    overflow-x:hidden;
    line-height:1.8;
    letter-spacing:.01em;
    position:relative;
}

::selection{
    background:rgba(47,87,98,.18);
    color:var(--primary);
}

a, button, input, textarea{
    transition:all var(--motion-base);
}

.page-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0;
    z-index:5000;
    background:linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
    box-shadow:0 0 18px rgba(47,87,98,.25);
}

.ambient{
    position:fixed;
    border-radius:50%;
    filter:blur(60px);
    opacity:.4;
    pointer-events:none;
    z-index:0;
    animation:ambientDrift 12s ease-in-out infinite alternate;
}

.ambient-one{
    width:320px;
    height:320px;
    background:rgba(242,228,198,.35);
    top:-80px;
    right:-80px;
}

.ambient-two{
    width:260px;
    height:260px;
    background:rgba(124,154,122,.2);
    bottom:120px;
    left:-70px;
    animation-duration:16s;
}

/* ========= Loader ========= */

#loader{
    position:fixed;
    inset:0;
    background:linear-gradient(145deg, #f9efe1 0%, #fdf8f0 55%, #f5e3c8 100%);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    transition:.8s;
}

.loader-logo{
    font-size:42px;
    font-family:"Aref Ruqaa",serif;
    color:var(--primary);
    animation:pulse 2s infinite;
    letter-spacing:.03em;
}

@keyframes pulse{
    0%,100%{ transform:scale(1); opacity:.95; }
    50%{ transform:scale(1.08); opacity:.7; }
}

@keyframes heroRise{
    from{ opacity:0; transform:translateY(24px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes shimmer{
    100%{ transform:translateX(100%); }
}

@keyframes floatSoft{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
}

@keyframes introPulse{
    0%{ transform:scale(.95); opacity:0; }
    60%{ transform:scale(1.02); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
}

/* ========= Hero ========= */

.hero{
    min-height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.45)),
        url("assets/first.jpeg");
    background-size:cover;
    background-position:center;
    padding:110px 24px 90px;
}

.heroContent{
    z-index:3;
    padding:48px 40px;
    max-width:780px;
    background:linear-gradient(135deg, rgba(255,252,247,.84), rgba(255,249,240,.7));
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.7);
    border-radius:44px;
    box-shadow:0 35px 100px rgba(47,87,98,.16);
    animation:heroRise 1.1s ease both;
}

.smallTitle{
    letter-spacing:.3em;
    font-size:15px;
    color:var(--secondary);
    margin-bottom:14px;
    text-transform:uppercase;
    font-weight:700;
}

.hero h1{
    font-family:"Aref Ruqaa",serif;
    font-size:clamp(3.2rem,8vw,5.6rem);
    font-weight:700;
    color:var(--primary);
    line-height:1.15;
    text-shadow:0 8px 20px rgba(0,0,0,.06);
}

.hero h1 span{

margin:0 15px;

color:var(--secondary);

}

.date{
    font-size:1.2rem;
    margin-top:24px;
    margin-bottom:32px;
    color:var(--muted);
    max-width:640px;
    margin-inline:auto;
}

/* ========= Buttons ========= */

button{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:white;
    border:none;
    padding:16px 34px;
    border-radius:999px;
    cursor:pointer;
    font-size:18px;
    font-family:"Cairo";
    transition:transform var(--motion-base), box-shadow var(--motion-base), filter var(--motion-base);
    box-shadow:0 16px 38px rgba(47,87,98,.22);
    position:relative;
    overflow:hidden;
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
}

button:hover{
    transform:translateY(-4px) scale(1.01);
    box-shadow:0 20px 42px rgba(47,87,98,.24);
}

button:active,
.secondaryBtn:active,
#calendarBtn:active,
#scrollTop:active,
#musicBtn:active{
    transform:scale(.97);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible{
    outline:2px solid rgba(47,87,98,.35);
    outline-offset:3px;
}

button:active{
    transform:scale(.96);
}

button::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    transform:translateX(-100%);
    animation:shimmer 2.4s ease-in-out infinite;
}

/* screen reader helper */
.visually-hidden,
.sr-only{
    position:absolute !important;
    height:1px; width:1px;
    overflow:hidden; clip:rect(1px, 1px, 1px, 1px);
    white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ========= Sections ========= */

section{
    padding:100px 7%;
    position:relative;
    isolation:isolate;
}

.section-card{
    margin:24px auto 28px;
    border-radius:38px;
    background:rgba(255,252,247,.72);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 24px 60px rgba(35,48,57,.08);
    backdrop-filter:blur(16px);
    position:relative;
    overflow:hidden;
}

.section-card::before,
.section-card::after{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    border:1px solid rgba(124,154,122,.16);
    border-radius:50%;
    pointer-events:none;
}

.section-card::before{
    top:-70px;
    right:-70px;
}

.section-card::after{
    bottom:-70px;
    left:-70px;
}

.intro-overlay{
    position:fixed;
    inset:0;
    background:linear-gradient(135deg, rgba(47,87,98,.96), rgba(124,154,122,.92));
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    opacity:1;
    transition:opacity .9s ease, visibility .9s ease;
    visibility:visible;
}

.intro-overlay.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.intro-card{
    text-align:center;
    color:white;
    padding:42px 54px;
    border-radius:34px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 30px 80px rgba(0,0,0,.18);
    animation:introPulse 1.6s ease both;
}

.intro-title{
    font-family:"Aref Ruqaa",serif;
    font-size:2.4rem;
    margin-bottom:8px;
}

.intro-subtitle{
    font-size:1rem;
    letter-spacing:.3em;
    text-transform:uppercase;
    opacity:.9;
}

section h2{
    font-family:"Aref Ruqaa";
    font-size:44px;
    text-align:center;
    margin-bottom:16px;
    color:var(--primary);
    position:relative;
    display:inline-block;
    width:100%;
    letter-spacing:.01em;
}

.sectionIntro{
    text-align:center;
    margin-bottom:42px;
}

.eyebrow{
    display:inline-block;
    margin-bottom:10px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(124,154,122,.12);
    color:var(--secondary);
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.storyCard{
    max-width:760px;
    margin:0 auto;
    padding:32px 34px;
    border-radius:32px;
    background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(244,235,220,.78));
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 24px 55px rgba(35,48,57,.08);
}

.storyCard p{
    font-size:1.08rem;
    color:var(--muted);
}

.person h3{
    margin-top:16px;
    font-size:1.45rem;
    color:var(--primary);
}

.person p{
    margin-top:8px;
    color:var(--muted);
    font-size:.98rem;
}

section h2::after{
    content:"";
    position:absolute;
    inset:auto 0 -10px 0;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, var(--secondary), transparent);
    opacity:.85;
}

/* ========= Cards ========= */

.card{

background:white;

padding:35px;

border-radius:var(--radius);

margin:20px auto;

max-width:650px;

box-shadow:var(--shadow);

border:1px solid var(--border);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cormorant+Garamond:wght@500;700&display=swap');

/* ========= Couple ========= */

#couple{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:28px;
    align-items:stretch;
}

.person{
    text-align:center;
    width:100%;
    padding:36px 28px;
    border-radius:36px;
    background:linear-gradient(145deg, #fffdf9, #f4ebdc);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 24px 55px rgba(35,48,57,.09);
    transition:transform .35s ease, box-shadow .35s ease;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:240px;
}

.person:hover{
    transform:translateY(-10px) scale(1.01);
    box-shadow:0 30px 70px rgba(35,48,57,.14);
}

.person-name{
    font-family:'Amiri', serif;
    font-size:clamp(2.2rem, 4vw, 3.2rem);
    line-height:1.2;
    color:var(--accent);
    margin-bottom:16px;
    letter-spacing:.06em;
}

.person-quote{
    font-family:'Cormorant Garamond', serif;
    font-size:1.05rem;
    line-height:1.8;
    color:#6e5b4a;
    margin:0;
    font-style:italic;
}

@media (max-width:700px){
    #couple{
        grid-template-columns:1fr;
    }
}

/* ========= Childhood ========= */

.photos{

display:flex;

justify-content:center;

gap:35px;

flex-wrap:wrap;

}

.photos img{

width:220px;

border-radius:50%;

border:8px solid white;

box-shadow:var(--shadow);

}

/* ========= Gallery ========= */

#gallery{
    position:relative;
    z-index:2;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
    align-items:stretch;
}

.gallery img{
    width:100%;
    min-height:280px;
    object-fit:cover;
    border-radius:28px;
    cursor:pointer;
    transition:transform .45s ease, box-shadow .45s ease, filter .45s ease;
    box-shadow:0 18px 45px rgba(35,48,57,.14);
    border:1px solid rgba(255,255,255,.72);
}

.gallery img:hover{
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 30px 70px rgba(35,48,57,.2);
    filter:saturate(1.08);
}

/* ========= RSVP ========= */

#rsvp{

text-align:center;

}

#rsvp input{

display:block;

width:100%;

max-width:500px;

margin:20px auto;

padding:18px;

border-radius:18px;

border:1px solid var(--border);

font-size:17px;

}

/* ========= Footer ========= */

footer{

padding:70px;

text-align:center;

font-size:18px;

background:white;

margin-top:100px;

}

/* ========= Music ========= */

#musicBtn,
#scrollTop{
    position:fixed;
    width:62px;
    height:62px;
    border-radius:50%;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    z-index:3000;
    box-shadow:0 18px 42px rgba(35,48,57,.18);
    border:1px solid rgba(255,255,255,.35);
}

#musicBtn{
    left:24px;
    bottom:24px;
}

#musicBtn{
    background:linear-gradient(135deg,var(--surface), #f7f6f3);
    color:var(--primary);
    border:1px solid rgba(47,87,98,.06);
    backdrop-filter: blur(6px);
}

#musicBtn .icon svg{
    width:26px;
    height:26px;
    display:block;
    transition:transform .28s ease, opacity .2s ease, filter .28s ease;
    color:var(--primary);
}

#musicBtn.loading{
    opacity:0.9;
    transform:scale(.98);
    filter:grayscale(.08) brightness(.95);
}

#musicBtn.loading:after{
    content:""; position:absolute; inset:12px; border-radius:50%; width:18px; height:18px; border:2px solid rgba(0,0,0,.12); border-top-color:rgba(0,0,0,.28); animation:spin .8s linear infinite; pointer-events:none;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

/* Animated equalizer bars for music button (tweaked for smoother UX) */
#musicBtn .bars{
    position:absolute;
    display:flex;
    align-items:flex-end;
    gap:6px;
    left:50%;
    transform:translateX(-50%);
    bottom:10px;
    height:22px;
    pointer-events:none;
}

#musicBtn .bars i{
    display:block;
    width:4px;
    background:currentColor;
    border-radius:3px;
    transform-origin:bottom center;
    height:6px;
    opacity:.95;
    transition:height .22s cubic-bezier(.2,.9,.3,1), opacity .18s ease;
}

#musicBtn.playing{
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 22px 64px rgba(47,87,98,.22), 0 0 28px rgba(126,155,135,.16);
}

#musicBtn.playing .bars i:nth-child(1){ animation:bar1 0.9s infinite cubic-bezier(.36,.07,.19,.97); }
#musicBtn.playing .bars i:nth-child(2){ animation:bar2 0.75s infinite cubic-bezier(.36,.07,.19,.97); }
#musicBtn.playing .bars i:nth-child(3){ animation:bar3 0.82s infinite cubic-bezier(.36,.07,.19,.97); }

@keyframes bar1{ 0%{ height:6px } 40%{ height:20px } 80%{ height:10px } 100%{ height:6px } }
@keyframes bar2{ 0%{ height:6px } 40%{ height:16px } 80%{ height:8px } 100%{ height:6px } }
@keyframes bar3{ 0%{ height:6px } 40%{ height:18px } 80%{ height:12px } 100%{ height:6px } }

/* Muting / Unmuting micro-animations */
#musicBtn.muting{
    animation:mutePulse .75s ease both;
}

@keyframes mutePulse{
    0%{ transform:scale(1.03) rotate(0deg); opacity:1; }
    50%{ transform:scale(.92) rotate(-6deg); opacity:.92; }
    100%{ transform:scale(.98) rotate(-2deg); opacity:.96; }
}

#musicBtn.unmuting{
    animation:unmuteGlow .6s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes unmuteGlow{
    0%{ transform:scale(.9); box-shadow:0 6px 18px rgba(47,87,98,.06); }
    60%{ transform:scale(1.06); box-shadow:0 26px 64px rgba(47,87,98,.18); }
    100%{ transform:scale(1.02); box-shadow:0 18px 54px rgba(47,87,98,.16); }
}

/* Muted visual state */
#musicBtn.muted{
    opacity:.92; filter:grayscale(.28) contrast(.9);
}

/* click bounce */
#musicBtn:active{ transform:translateY(-2px) scale(0.985); }

#musicBtn.playing{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:white;
    box-shadow:0 18px 54px rgba(47,87,98,.22), 0 0 28px rgba(126,155,135,.18);
    transform:translateY(-4px) scale(1.02);
}

#musicBtn.playing .icon svg{
    transform:scale(1.06) rotate(-6deg);
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.12));
}

@keyframes musicPulse{
    0%{ box-shadow:0 6px 24px rgba(126,155,135,.12); }
    50%{ box-shadow:0 18px 54px rgba(126,155,135,.18); }
    100%{ box-shadow:0 6px 24px rgba(126,155,135,.12); }
}

#musicBtn.playing::after{
    content:"";
    position:absolute; inset:-6px; border-radius:50%;
    pointer-events:none; opacity:.8; animation:musicPulse 2.4s ease-in-out infinite;
}

#scrollTop{
    right:24px;
    bottom:24px;
    display:none;
}

#musicBtn:hover,
#scrollTop:hover{
    transform:translateY(-3px) scale(1.02);
}

/* ========= Responsive ========= */

@media(max-width:768px){

.hero h1{

font-size:48px;

}

section{

padding:80px 25px;

}

section h2{

font-size:36px;

}

.person img{

width:180px;

height:180px;

}

.photos img{

width:170px;

}

}
/* Additional mobile refinements for compact header and buttons */
@media (max-width:480px){

    /* Reduce global button size */
    button{
        padding:10px 14px;
        font-size:14px;
        border-radius:14px;
        box-shadow:0 10px 28px rgba(47,87,98,.12);
    }

    /* Hero actions more compact */
    .heroContent{ padding:28px 18px; }
    .heroActions button, .heroActions .secondaryBtn{
        padding:10px 16px;
        font-size:15px;
    }

    /* Navbar compact */
    #navbar{ padding:8px 12px; }
    #navbar .logo{ font-size:16px; padding:6px 8px; }
    #navbar ul{ gap:8px; }
    #navbar ul li a{ font-size:13px; padding:6px 8px; }

    /* Music and scroll buttons smaller and less obtrusive */
    #musicBtn, #scrollTop{
        width:48px; height:48px; font-size:18px; bottom:16px;
        box-shadow:0 10px 30px rgba(35,48,57,.14);
    }

    /* Make equalizer bars slightly smaller */
    #musicBtn .bars{ right:8px; bottom:8px; gap:4px; height:18px; }
    #musicBtn .bars i{ width:3px; }

    /* Reduce hero padding and text slightly */
    .hero{ padding:80px 16px 60px; }
    .heroContent{ max-width:540px; }

}
/* ==========================================
   FLOATING FLOWERS
========================================== */

#leaves{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:1;
}

.leaf{
    position:absolute;
    width:26px;
    height:26px;
    opacity:.8;
    background:
        radial-gradient(circle at 30% 30%, #ffffff 0 12%, transparent 13%),
        radial-gradient(circle at 70% 30%, #ffffff 0 10%, transparent 11%),
        radial-gradient(circle at 50% 60%, #ffffff 0 14%, transparent 15%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 38%, transparent 39%);
    border-radius:50%;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));
    animation:flowerFall linear infinite;
    transform-origin:center;
}

.leaf::before,
.leaf::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    transform:rotate(45deg);
    opacity:.9;
}

.leaf::before{
    transform:rotate(0deg) scale(1.15);
}

.leaf::after{
    transform:rotate(90deg) scale(1.05);
}

@keyframes flowerFall{
    0%{
        transform:translateY(-140px) translateX(0) rotate(0deg) scale(.65);
        opacity:0;
    }
    10%{ opacity:.95; }
    100%{
        transform:translateY(120vh) translateX(160px) rotate(360deg) scale(1.05);
        opacity:.95;
    }
}

/* ==========================================
   GLASS CARDS
========================================== */

.card{

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

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

}

/* ==========================================
   SECTION REVEAL
========================================== */

.reveal,
.animate-on-scroll{
    opacity:0;
    transform:translateY(60px) scale(.985);
    transition:opacity var(--motion-slow), transform var(--motion-slow), filter var(--motion-slow);
    will-change:transform, opacity;
}

.reveal.active,
.animate-on-scroll.visible{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
}

/* ==========================================
   TIMELINE
========================================== */

#timeline{

position:relative;

}

.event{

max-width:520px;

margin:40px auto;

padding:30px;

background:white;

border-radius:20px;

box-shadow:var(--shadow);

transition:.4s;

cursor:pointer;

}

.event:hover{

transform:translateY(-8px);

background:var(--accent);

}

/* ==========================================
   COUNTDOWN
========================================== */

.timer{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.timer div{

width:110px;

height:110px;

background:white;

border-radius:24px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

box-shadow:var(--shadow);

}

.timer span{

font-size:42px;

font-weight:bold;

color:var(--primary);

}

/* ==========================================
   IMAGE GLOW
========================================== */

.person img,
.photos img,
.gallery img{

transition:
transform .4s,
box-shadow .4s;

}

.person img:hover,
.photos img:hover,
.gallery img:hover{

box-shadow:
0 20px 50px rgba(63,108,122,.25);

transform:
translateY(-8px)
scale(1.03);

}

/* ==========================================
   HERO PARALLAX
========================================== */

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.85), transparent 35%),
        radial-gradient(circle at 80% 30%, rgba(242,228,198,.4), transparent 32%),
        radial-gradient(circle at 50% 100%, rgba(47,87,98,.12), transparent 50%);
    animation:heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow{
    0%,100%{ opacity:.9; transform:scale(1); }
    50%{ opacity:.55; transform:scale(1.06); }
}

/* ==========================================
   WATERCOLOR BACKGROUND
========================================== */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        url("assets/watercolor.svg") center/cover no-repeat,
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.72), transparent 30%);
    opacity:.12;
    pointer-events:none;
    z-index:-1;
    filter:saturate(1.2);
}

/* ==========================================
   FLOATING
========================================== */

.person{

animation:floatPerson 6s ease-in-out infinite;

}

.person:nth-child(2){

animation-delay:2s;

}

@keyframes floatPerson{

50%{

transform:translateY(-10px);

}

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:white;

}

/* ==========================================
   ENHANCED DESIGN & MOTION
========================================== */

body{
    background:
        radial-gradient(circle at top left, rgba(214,194,124,.18), transparent 28%),
        linear-gradient(135deg, #fdfaf4 0%, var(--background) 55%, #f5efe5 100%);
    min-height:100vh;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        url("assets/watercolor.svg") center/cover no-repeat,
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 30%);
    opacity:.14;
    filter:saturate(1.2);
    pointer-events:none;
    z-index:0;
}

body > *:not(.page-progress):not(.ambient){
    position:relative;
    z-index:1;
}

#navbar{
    position:sticky;
    top:0;
    z-index:2000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 6%;
    background:rgba(255,250,244,.7);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(63,108,122,.12);
    transition:all .35s ease;
}

#navbar .logo{
    color:var(--primary);
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:.06em;
}

#navbar ul{
    display:flex;
    gap:12px;
    list-style:none;
    flex-wrap:wrap;
}

#navbar a{
    color:var(--text);
    text-decoration:none;
    padding:8px 12px;
    border-radius:999px;
    transition:all .3s ease;
    position:relative;
}

#navbar a:hover,
#navbar a.active-link{
    color:var(--primary);
    background:rgba(63,108,122,.08);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(63,108,122,.08);
}

.hero{
    min-height:100vh;
    padding:110px 6% 70px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.84), rgba(248,246,242,.3)),
        url("assets/background.svg");
    background-size:cover;
    background-position:center;
}

.hero::after{
    content:"";
    position:absolute;
    inset:auto -8% -20% auto;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(214,194,124,.26), transparent 70%);
    filter:blur(20px);
    animation:floatOrb 8s ease-in-out infinite;
    z-index:1;
}

.heroContent{
    position:relative;
    z-index:3;
    max-width:760px;
    margin:0 auto;
    padding:clamp(24px,4vw,42px);
    border:1px solid rgba(255,255,255,.7);
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(20px);
    box-shadow:0 35px 90px rgba(63,108,122,.15);
    border-radius:36px;
    animation:heroRise 1.2s ease both;
    overflow:hidden;
}

.hero-ornament{
    position:absolute;
    inset:auto -70px -70px auto;
    width:180px;
    height:180px;
    border:1px solid rgba(63,108,122,.12);
    border-radius:50%;
    opacity:.7;
    animation:spinSlow 16s linear infinite;
}

.heroBadge{
    display:inline-block;
    margin-bottom:14px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(63,108,122,.1);
    color:var(--primary);
    font-weight:700;
    letter-spacing:.08em;
}

.hero h1{
    font-size:clamp(3rem,7.5vw,5.4rem);
    line-height:1.1;
    text-shadow:0 10px 25px rgba(0,0,0,.06);
}

.smallTitle{
    text-transform:uppercase;
    font-size:1rem;
    letter-spacing:.3em;
}

.date{
    font-size:1.18rem;
    line-height:1.9;
    color:#63676a;
    margin:0 auto 1.8rem;
    max-width:620px;
}

.heroActions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
}

.secondaryBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 30px;
    border-radius:999px;
    text-decoration:none;
    color:var(--primary);
    background:transparent;
    border:2px solid rgba(63,108,122,.2);
    transition:all .3s ease;
    box-shadow:none;
}

.secondaryBtn:hover{
    background:rgba(63,108,122,.08);
    transform:translateY(-3px);
}

button{
    position:relative;
    overflow:hidden;
}

button::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform:translateX(-100%);
    animation:shimmer 2.6s ease-in-out infinite;
}

button:hover{
    transform:translateY(-4px) scale(1.01);
    letter-spacing:.01em;
}

section{
    padding:100px 6%;
    position:relative;
}

section h2{
    position:relative;
    display:inline-block;
    padding-bottom:8px;
}

section h2::after{
    content:"";
    position:absolute;
    inset:auto 0 -10px 0;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), transparent);
}

#story,
#countdown,
#couple,
#childhood,
#timeline,
#gallery,
#details,
#rsvp{
    margin:20px auto 28px;
    padding:64px 5%;
    background:rgba(255,255,255,.5);
    border:1px solid rgba(214,196,154,.22);
    border-radius:36px;
    box-shadow:0 20px 60px rgba(16,24,32,.06);
    backdrop-filter:blur(16px);
}

#couple,
#childhood,
#timeline,
#gallery{
    padding-top:72px;
}

.person,
.detailCard,
.timelineCard,
.timer div,
.photos img,
.gallery img{
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.person,
.detailCard,
.timelineCard{
    background:linear-gradient(145deg, #fffdf9, #f6f2e8);
    border:1px solid rgba(63,108,122,.12);
    box-shadow:0 18px 40px rgba(16,24,32,.06);
}

.person{
    padding:24px 20px;
    border-radius:28px;
}

.person:hover,
.detailCard:hover,
.timelineCard:hover{
    transform:translateY(-10px) scale(1.01);
    box-shadow:0 25px 55px rgba(63,108,122,.18);
}

.person img{
    border:8px solid rgba(255,255,255,.9);
}

.detailsGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
    margin-top:24px;
}

.detailCard{
    padding:24px 22px;
    border-radius:24px;
}

.detailCard .icon{
    font-size:1.6rem;
    margin-bottom:10px;
}

.timeline{
    position:relative;
    max-width:900px;
    margin:auto;
    padding:30px 0 0;
}

.timelineItem{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin:24px 0;
    position:relative;
}

.timelineItem::before{
    content:"";
    position:absolute;
    left:18px;
    top:54px;
    bottom:-24px;
    width:2px;
    background:linear-gradient(var(--secondary), transparent);
}

.timelineItem:last-child::before{
    display:none;
}

.timelineIcon{
    width:40px;
    height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow:0 16px 30px rgba(63,108,122,.2);
    flex-shrink:0;
}

.timelineCard{
    flex:1;
    padding:24px 26px;
    border-radius:24px;
}

.timer div{
    position:relative;
    overflow:hidden;
    min-width:112px;
}

.timer div::before{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:4px;
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.timer div:hover::before{
    transform:scaleX(1);
}

#rsvpForm input,
#rsvpForm textarea{
    background:rgba(255,255,255,.88);
    border:1px solid rgba(63,108,122,.18);
    transition:border-color .3s ease, box-shadow .3s ease;
}

#rsvpForm input:focus,
#rsvpForm textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(63,108,122,.12);
    outline:none;
}

.rsvpButtons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-top:24px;
}

#calendarBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 28px;
    border-radius:999px;
    text-decoration:none;
    color:var(--primary);
    background:rgba(63,108,122,.08);
    transition:transform var(--motion-base), background var(--motion-base), box-shadow var(--motion-base);
    transform:translateZ(0);
    backface-visibility:hidden;
}

#calendarBtn:hover{
    transform:translateY(-2px);
    background:rgba(63,108,122,.14);
}

#scrollTop,
#musicBtn{
    width:58px;
    height:58px;
    padding:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    line-height:1;
    box-shadow:0 18px 36px rgba(63,108,122,.25);
    border:1px solid rgba(255,255,255,.35);
    transform:translateZ(0);
    backface-visibility:hidden;
}

#scrollTop{
    display:none;
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:3100;
}

#musicBtn{
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:3100;
}

#scrollTop:hover,
#musicBtn:hover{
    transform:translateY(-3px) scale(1.02);
}

#scrollTop.showing,
#musicBtn.showing{
    animation:softBloom .6s ease both;
}

@keyframes softBloom{
    0%{ transform:scale(.92); opacity:.8; }
    100%{ transform:scale(1); opacity:1; }
}

.reveal,
.animate-on-scroll{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s ease;
}

.reveal.active,
.animate-on-scroll.visible{
    opacity:1;
    transform:translateY(0);
}

#loader{
    background:radial-gradient(circle at top, #fdf9f2, #f4ece0 60%, #ebdfcf);
}

.loader-logo{
    text-shadow:0 8px 18px rgba(0,0,0,.08);
}

#loveLetter .letterCard{
    border:1px solid rgba(63,108,122,.18);
    box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.signature-block{
    text-align:center;
    margin:34px auto 8px;
    padding:20px 24px 0;
}

.signature-label{
    font-size:.95rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--secondary);
    margin-bottom:6px;
}

.signature-names{
    font-family:'Great Vibes', cursive;
    font-size:clamp(2rem, 4vw, 2.8rem);
    color:var(--primary);
    font-weight:400;
    letter-spacing:.04em;
}

.closing-hero{
    padding:70px 6%;
}

.closing-card{
    max-width:780px;
    margin:0 auto;
    padding:44px 32px;
    text-align:center;
    border-radius:32px;
    background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(244,238,224,.75));
    border:1px solid rgba(63,108,122,.12);
    box-shadow:0 24px 60px rgba(16,24,32,.06);
}

.closing-card p:last-child{
    color:var(--muted);
    margin-top:10px;
}

footer{
    margin-top:60px;
    background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(244,237,225,.95));
    border-top:1px solid rgba(63,108,122,.12);
}

@keyframes heroRise{
    from{
        opacity:0;
        transform:translateY(20px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes ambientDrift{
    from{
        transform:translate3d(0,0,0) scale(1);
    }
    to{
        transform:translate3d(18px,-20px,0) scale(1.08);
    }
}

@keyframes floatOrb{
    0%,100%{
        transform:translateY(0) scale(1);
    }
    50%{
        transform:translateY(-18px) scale(1.04);
    }
}

@keyframes shimmer{
    100%{
        transform:translateX(100%);
    }
}

@keyframes spinSlow{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@media(max-width:768px){
    #navbar{
        padding:14px 20px;
    }

    #navbar ul{
        gap:8px;
    }

    .hero{
        padding:112px 20px 70px;
    }

    .heroContent{
        padding:24px;
    }

    .hero h1{
        font-size:2.8rem;
    }

    .timer{ gap:14px; }

    .timer div{ width:96px; height:96px; }

    #musicBtn,
    #scrollTop{
        width:52px;
        height:52px;
    }
}


.gallery{

display:grid;

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

gap:25px;

}

.gallery img{

width:100%;

height:300px;

object-fit:cover;

border-radius:22px;

cursor:pointer;

transition:.45s;

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

}

.gallery img:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 24px 45px rgba(0,0,0,.18);
    filter:saturate(1.08);
}

.gallery img:nth-child(odd){
    transform:translateY(8px);
}

.gallery img:nth-child(even){
    transform:translateY(-8px);
}

/*=========================
Lightbox
=========================*/

#lightbox{

position:fixed;

inset:0;

background:rgba(15,20,20,.94);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.45s;

z-index:99999;

backdrop-filter:blur(10px);

}

#lightbox.active{

opacity:1;

visibility:visible;

}

#lightbox img{

max-width:82%;

max-height:82%;

border-radius:20px;

box-shadow:0 25px 60px rgba(0,0,0,.35);

animation:zoomImage .45s;

}

@keyframes zoomImage{

from{

transform:scale(.7);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

#closeLightbox{

position:absolute;

top:25px;

right:40px;

font-size:50px;

color:white;

cursor:pointer;

}

#prevPhoto,
#nextPhoto{

position:absolute;

top:50%;

transform:translateY(-50%);

font-size:55px;

color:white;

cursor:pointer;

padding:20px;

user-select:none;

}

#prevPhoto{

left:25px;

}

#nextPhoto{

right:25px;

}

/*==========================
Envelope
==========================*/

#envelopeScreen{

position:fixed;

inset:0;

background:radial-gradient(circle at top, rgba(255,255,255,.75), transparent 35%), linear-gradient(135deg, #f9efe1 0%, #fdf8f1 48%, #f2dcc0 100%);

display:flex;

justify-content:center;

align-items:center;

z-index:4500;

transition:all 1.1s cubic-bezier(.22,1,.36,1);

padding:24px;

overflow:hidden;

}

#envelopeScreen.closing{

opacity:0;

transform:scale(1.04);

filter:blur(6px);

pointer-events:none;

}

.envelope-shell{

position:relative;

display:flex;

flex-direction:column;

align-items:center;

gap:20px;

animation:envelopeFloat 3.2s ease-in-out infinite;

}

.envelope-glow{

position:absolute;

inset:auto 50% 0 auto;

width:300px;

height:300px;

border-radius:50%;

background:radial-gradient(circle, rgba(242,228,198,.7), rgba(242,228,198,0));

filter:blur(30px);

transform:translateX(50%);

z-index:0;

}

.envelope{

position:relative;

width:360px;

max-width:92vw;

height:240px;

cursor:pointer;

transform-style:preserve-3d;

perspective:1200px;

transition:transform .35s ease, filter .35s ease;

z-index:1;

}

.envelope:hover{

transform:translateY(-6px) scale(1.01);

filter:drop-shadow(0 22px 45px rgba(47,87,98,.18));

}

.envelope:active{

transform:scale(.97);

}

.envelopeBack{

position:absolute;

bottom:0;

width:100%;

height:100%;

background:linear-gradient(145deg, #ffffff 0%, #fdf9f2 100%);

border:1px solid rgba(47,87,98,.12);

border-radius:16px;

box-shadow:0 24px 60px rgba(0,0,0,.12);

z-index:1;

}

.flap{

position:absolute;

top:0;

width:100%;

height:130px;

background:linear-gradient(135deg, var(--primary) 0%, #4f7179 100%);

clip-path:polygon(0 0,100% 0,50% 100%);

transform-origin:top center;

transition:transform 1.1s cubic-bezier(.22,1,.36,1);

z-index:3;

backface-visibility:hidden;

box-shadow:inset 0 -10px 18px rgba(0,0,0,.08);

}

.letter{

position:absolute;

left:22px;

right:22px;

bottom:22px;

height:175px;

background:linear-gradient(145deg, #fffefc 0%, #fdf7eb 100%);

border-radius:14px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

transition:transform 1.1s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;

box-shadow:0 14px 40px rgba(0,0,0,.08);

z-index:2;

}

.letterInner{

text-align:center;

padding:16px 22px;

}

.letterBadge{

display:inline-block;

padding:7px 14px;

border-radius:999px;

background:rgba(124,154,122,.14);

color:var(--secondary);

font-size:.8rem;

font-weight:700;

letter-spacing:.2em;

text-transform:uppercase;

margin-bottom:10px;

}

.letter h2{

font-family:"Aref Ruqaa";

color:var(--primary);

margin-bottom:8px;

font-size:1.75rem;

}

.letter p{

color:var(--muted);

font-size:1rem;

margin-bottom:10px;

}

.letterDots{

width:70px;

height:8px;

border-radius:999px;

background:linear-gradient(90deg, rgba(47,87,98,.2), rgba(124,154,122,.35), rgba(47,87,98,.2));

margin:0 auto;

}

.stamp{

position:absolute;

right:26px;

top:28px;

width:44px;

height:44px;

background:linear-gradient(145deg, var(--accent), #f8e8c4);

border:1px solid rgba(47,87,98,.12);

border-radius:50%;

box-shadow:0 8px 20px rgba(47,87,98,.16);

z-index:4;

}

.envelopeHint{

font-size:.95rem;

letter-spacing:.2em;

text-transform:uppercase;

color:var(--secondary);

font-weight:700;

text-align:center;

animation:hintPulse 1.7s ease-in-out infinite;

}

.envelope.open .flap{

transform:rotateX(180deg) translateY(-4px);

}

.envelope.open .letter{

transform:translateY(-150px) scale(1.02);

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

}

.envelope.open .stamp{

transform:translateY(-6px) rotate(8deg);

}

@keyframes envelopeFloat{

0%,100%{ transform:translateY(0); }

50%{ transform:translateY(-8px); }

}

@keyframes hintPulse{

0%,100%{ opacity:.8; transform:translateY(0); }

50%{ opacity:1; transform:translateY(-3px); }

}

/*==========================
Timeline
==========================*/

.timeline{

position:relative;

max-width:900px;

margin:auto;

padding:30px 0;

}

.timeline::before{

content:"";

position:absolute;

top:0;

bottom:0;

left:50%;

width:4px;

background:linear-gradient(
var(--primary),
var(--secondary)
);

transform:translateX(-50%);

border-radius:10px;

}

.timelineItem{

display:flex;

justify-content:space-between;

align-items:center;

margin:70px 0;

position:relative;

}

.timelineItem:nth-child(even){

flex-direction:row-reverse;

}

.timelineIcon{

width:80px;

height:80px;

border-radius:50%;

background:white;

display:flex;

justify-content:center;

align-items:center;

font-size:35px;

box-shadow:var(--shadow);

z-index:2;

transition:.4s;

}

.timelineCard{

width:40%;

background:white;

padding:25px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.45s;

}

.timelineCard:hover{

transform:translateY(-8px);

}

.timelineIcon:hover{

transform:scale(1.15) rotate(10deg);

background:var(--accent);

}

@media(max-width:900px){

.timeline::before{

right:auto;

left:40px;

}

.timelineItem{

flex-direction:row!important;

padding-left:90px;

}

.timelineCard{

width:100%;

}

.timelineIcon{

position:absolute;

left:0;

}

}
/*==============================
Details
==============================*/

.detailsGrid{

display:grid;

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

gap:30px;

margin-bottom:60px;

}

.detailCard{

background:white;

padding:35px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

transition:.45s;

}

.detailCard:hover{

transform:translateY(-10px);

}

.detailCard .icon{

font-size:42px;

margin-bottom:20px;

}

.detailCard h3{

margin-bottom:12px;

color:var(--primary);

}

.mapContainer{

overflow:hidden;

border-radius:30px;

box-shadow:var(--shadow);

margin:50px auto;

}

.mapContainer iframe{

width:100%;

height:450px;

border:none;

}

.mapButtons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}
/*==========================================
FLOWERS
==========================================*/

#flowers,
#sparkles,
#confettiContainer{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:2;
}

.flower{

    position:absolute;

    width:24px;

    height:24px;

   background:url("assets/flower.svg") center/contain no-repeat;

    opacity:.35;

    animation:flowerFall linear forwards;

}

@keyframes flowerFall{

0%{

transform:
translateY(-120px)
rotate(0deg)
scale(.6);

}

100%{

transform:
translateY(120vh)
rotate(720deg)
scale(1.2);

}

}

/*==========================================
SPARKLES
==========================================*/

.sparkle{

position:absolute;

width:8px;

height:8px;

border-radius:50%;

background:white;

box-shadow:
0 0 10px white,
0 0 20px #DCE8E8;

animation:sparkle 2.5s linear forwards;

}

@keyframes sparkle{

0%{

opacity:0;
transform:scale(.2);

}

50%{

opacity:1;

}

100%{

opacity:0;
transform:scale(2);

}

}

/*==========================================
CURSOR GLOW
==========================================*/

#cursorGlow{

position:fixed;

width:150px;

height:150px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,
rgba(220,232,232,.45),
transparent 70%);

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

z-index:1;

mix-blend-mode:screen;

}

/*==========================================
BUTTON RIPPLE
==========================================*/

button{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/*==========================================
PETAL BURST
==========================================*/

.petal{
    position:absolute;
    width:10px;
    height:16px;
    border-radius:100% 0 100% 0;
    background:linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    box-shadow:0 8px 16px rgba(0,0,0,.08);
    opacity:0;
    pointer-events:none;
    animation:petalBurst 2.2s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes petalBurst{
    0%{
        opacity:0;
        transform:translate(0,0) rotate(0deg) scale(.2);
    }
    15%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translate(var(--dx), var(--dy)) rotate(calc(var(--rotation) + 360deg)) scale(1.05);
    }
}

/*===============================
Progress Bar
===============================*/

#progressBar{

position:fixed;

top:0;

left:0;

height:5px;

width:0;

background:linear-gradient(
90deg,
#3F6C7A,
#7E9B87
);

z-index:999999;

}

/*===============================
Hero Background Animation
===============================*/

.hero{

transition:background-image 2s ease-in-out;

}

/*========================
RSVP
========================*/

#rsvp{
    text-align:center;
}

.rsvpText{
    margin-bottom:35px;
    font-size:18px;
    max-width:720px;
    margin-inline:auto;
}

#rsvpForm{
    max-width:660px;
    margin:0 auto;
    padding:24px;
    border-radius:24px;
    background:rgba(255,255,255,.72);
    box-shadow:0 18px 40px rgba(16,24,32,.06);
}

#rsvp textarea{

width:100%;

max-width:600px;

height:140px;

padding:18px;

margin:20px auto;

display:block;

border-radius:18px;

border:1px solid var(--border);

font-family:"Cairo";

resize:none;

}

.rsvpButtons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:30px;

}

#calendarBtn{

padding:18px 34px;

background:white;

border-radius:999px;

text-decoration:none;

color:var(--primary);

box-shadow:var(--shadow);

}
#loveLetter{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

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

opacity:0;

visibility:hidden;

transition:.5s;

z-index:99999;

}

#loveLetter.show{

opacity:1;

visibility:visible;

}

.letterCard{

background:white;

padding:45px;

border-radius:25px;

max-width:600px;

text-align:center;

position:relative;

box-shadow:var(--shadow);

}

#closeLetter{

position:absolute;

left:25px;

top:20px;

cursor:pointer;

font-size:22px;

}
/*=====================
Navigation
=====================*/

#navbar{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(248,246,242,.75);

backdrop-filter:blur(16px);

z-index:999;

transition:.4s;

}

#navbar ul{

display:flex;

gap:30px;

list-style:none;

}

#navbar a{

text-decoration:none;

color:var(--primary);

font-weight:700;

transition:.3s;

}

#navbar a:hover{

color:var(--secondary);

}

.logo{

font-family:"Aref Ruqaa";

font-size:28px;

color:var(--primary);

}

/*=====================
Scroll Top
=====================*/

#scrollTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border-radius:50%;

display:none;

z-index:9999;

}