/* ==========================================================================
           1. ROOT & CUSTOM PROPERTIES
           ========================================================================== */
           :root {
            /* Brand Colors */
            --color-primary: #ff6b6b;     
            --color-secondary: #4ecdc4;    
            --color-accent: #ffe66d;   
            
            /* Background Colors */
            --color-background: #ffffff;
            --color-background-alt: #f8f9fa;
            --color-background-dark: #343a40;
            
            /* Text Colors */
            --color-text: #212529;
            --color-text-light: #6c757d;
            --color-text-lighter: #adb5bd;
            --color-text-white: #ffffff;
            
            /* Status Colors */
            --color-success: #2ecc71;
            --color-warning: #f1c40f;
            --color-error: #e74c3c;
            --color-info: #3498db;
            
            /* Gradient Colors */
            --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, #ff8e8e 100%);
            --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, #a8e6cf 100%);
            --gradient-dark: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
            
            /* Typography */
            --font-primary: 'Montserrat', sans-serif;
            --font-secondary: 'Dancing Script', cursive;
            --font-accent: 'Playfair Display', serif;
            
            /* Font Sizes */
            --text-xs: 0.75rem;    /* 12px */
            --text-sm: 0.875rem;   /* 14px */
            --text-base: 1rem;     /* 16px */
            --text-lg: 1.125rem;   /* 18px */
            --text-xl: 1.25rem;    /* 20px */
            --text-2xl: 1.5rem;    /* 24px */
            --text-3xl: 1.875rem;  /* 30px */
            --text-4xl: 2.25rem;   /* 36px */
            --text-5xl: 3rem;      /* 48px */
            --text-6xl: 3.75rem;   /* 60px */
            
            /* Spacing */
            --space-1: 0.25rem;    /* 4px */
            --space-2: 0.5rem;     /* 8px */
            --space-3: 0.75rem;    /* 12px */
            --space-4: 1rem;       /* 16px */
            --space-5: 1.25rem;    /* 20px */
            --space-6: 1.5rem;     /* 24px */
            --space-8: 2rem;       /* 32px */
            --space-10: 2.5rem;    /* 40px */
            --space-12: 3rem;      /* 48px */
            --space-16: 4rem;      /* 64px */
            --space-20: 5rem;      /* 80px */
            --space-24: 6rem;      /* 96px */
            
            /* Borders */
            --border-width: 1px;
            --border-width-2: 2px;
            --border-width-4: 4px;
            --border-radius-sm: 0.25rem;
            --border-radius: 0.5rem;
            --border-radius-lg: 1rem;
            --border-radius-xl: 1.5rem;
            --border-radius-2xl: 2rem;
            --border-radius-full: 9999px;
            
            /* Additional Radius Variables */
            --radius-lg: var(--border-radius-lg);
            --radius-full: var(--border-radius-full);
        
            /* Shadows */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            
            /* Transitions */
            --transition-all: all 0.3s ease;
            --transition-colors: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
            --transition-opacity: opacity 0.3s ease;
            --transition-transform: transform 0.3s ease;
            
            /* Z-index */
            --z-negative: -1;
            --z-0: 0;
            --z-10: 10;
            --z-20: 20;
            --z-30: 30;
            --z-40: 40;
            --z-50: 50;
            --z-modal: 100;
            --z-fixed: 200;
            --z-tooltip: 300;
            --z-max: 999;
        }
       /* Theme Variables with High Contrast Colors */
:root[data-theme="light"] {
    /* Background gradients */
    --section-bg-gradient: linear-gradient(135deg, #fff8f8 0%, #fff1f1 50%, #fff8f8 100%);
    --card-bg: #ffffff;
    
    /* Text colors with high contrast */
    --text-primary: #1a1a1a;         /* Darker text for better readability */
    --text-secondary: #4a4a4a;       /* Dark gray but not too light */
    --title-color: #e94444;          /* Slightly darker red for better contrast */
    --subtitle-color: #555555;       /* Darker subtitle for better visibility */
    
    /* Timeline and card elements */
    --timeline-line: #e94444;
    --timeline-dot: #e94444;
    --card-border: rgba(0, 0, 0, 0.1);
    --card-shadow: rgba(0, 0, 0, 0.1);
    
    /* Gallery elements */
    --overlay-bg: rgba(255, 255, 255, 0.98);  /* More opaque for better readability */
    --filter-btn-bg: #ffffff;
    --filter-btn-text: #1a1a1a;
    --filter-btn-border: #ffd5d5;
    --filter-btn-active: #e94444;
    --filter-btn-active-text: #ffffff;
}

:root[data-theme="dark"] {
    /* Background gradients */
    --section-bg-gradient: linear-gradient(135deg, #2a2a2a 0%, #333333 50%, #2a2a2a 100%);
    --card-bg: #3a3a3a;              /* Lighter background for better contrast */
    
    /* Text colors with high contrast */
    --text-primary: #ffffff;         /* Pure white for maximum contrast */
    --text-secondary: #e0e0e0;      /* Light gray but still very readable */
    --title-color: #ff8585;         /* Lighter red for dark theme */
    --subtitle-color: #cccccc;      /* Light gray for subtitles */
    
    /* Timeline and card elements */
    --timeline-line: #ff8585;
    --timeline-dot: #ff8585;
    --card-border: rgba(255, 255, 255, 0.15);
    --card-shadow: rgba(0, 0, 0, 0.3);
    
    /* Gallery elements */
    --overlay-bg: rgba(40, 40, 40, 0.98);  /* More opaque for better readability */
    --filter-btn-bg: #3a3a3a;
    --filter-btn-text: #ffffff;
    --filter-btn-border: #4a4a4a;
    --filter-btn-active: #ff8585;
    --filter-btn-active-text: #ffffff;
}

        /* ==========================================================================
           2. RESET & BASE STYLES
           ========================================================================== */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        html {
            font-size: 16px;
            scroll-behavior: smooth;
        }
        
        body {
            font-family: var(--font-primary);
            font-size: var(--text-base);
            line-height: 1.6;
            color: var(--color-text);
            background-color: var(--color-background);
            overflow-x:hidden;
        }
        body {
            margin: 0;
            padding: 0 !important; /* Force no padding */
            overflow-y: scroll !important; /* Force scrollbar always visible */
            width: 100vw;
            position: relative;
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        a {
            color: inherit;
            text-decoration: none;
            transition: var(--transition-colors);
        }
        
        button {
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            transition: var(--transition-all);
            -webkit-tap-highlight-color: transparent;
        }
        
        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-secondary);
            line-height: 1.2;
            margin-bottom: var(--space-4);
            font-weight: 700;
        }
        
        h1 { font-size: var(--text-6xl); }
        h2 { font-size: var(--text-5xl); }
        h3 { font-size: var(--text-4xl); }
        h4 { font-size: var(--text-3xl); }
        h5 { font-size: var(--text-2xl); }
        h6 { font-size: var(--text-xl); }



        /* ==========================================================================
   3. LAYOUT & CONTAINERS
   ========================================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.section {
    padding: 5rem 0;
    background: var(--section-bg);
    transition: all 0.3s ease;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    color: var(--title-color);
    font-size: 2.8rem;
    font-weight: 700;               /* Bolder font weight */
    letter-spacing: 0.5px;         /* Improved letter spacing */
    text-shadow: 2px 2px 4px var(--card-shadow);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-text-light);
    border-radius: var(--border-radius-full);
}

.section-subtitle {
    color: var(--subtitle-color);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}


.preloader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff6b6b, #ffd1d1);
    animation: gradientBG 3s ease infinite;
}

.preloader-content {
    position: relative;
    text-align: center;
    z-index: 1;
}

.heart-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: heartColor 4s ease-in-out infinite;
}
.heart-shape::before,
.heart-shape::after {
    content: '';
    position: absolute;
    top: 0;
    width: 52px;
    height: 80px;
    border-radius: 50px 50px 0 0;
    background: linear-gradient(135deg, #ff6b6b, #ff8585);

}
.heart-shape::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}


/* Glowing Effect */
.heart-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: heartGlow 1.2s ease-in-out infinite;
}

.heart-glow::before,
.heart-glow::after {
    content: '';
    position: absolute;
    left: -6rem;
    top: -3.5rem;
    width: 290%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 107, 107, 0.8), transparent 50%);
}

/* Particles Effect */
.heart-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* Heart Beat Animation */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(1);
    }
}

/* Heart Color Animation */
@keyframes heartColor {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        filter: hue-rotate(15deg) brightness(1.1);
    }
}

/* Heart Glow Animation */
@keyframes heartGlow {
    0% {
        opacity: 0.5;
        transform: scale(1.1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* Particle Animation */
@keyframes particleFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    animation: particleFly 1s ease-out infinite;
}
.heart-shape::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}
.heart-loader {
    position: relative;
    width: 100px;
    height: 90px;
    margin: 0 auto 2rem;
    animation: heartBeat 1.2s ease-in-out infinite;
}

.heart-loader::before,
.heart-loader::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50px;
    height: 80px;
    border-radius: 50px 50px 0 0;
}

.heart-loader::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
}


.loading-text {
    text-align: center;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}
.loading-text h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    animation: textGlow 1.5s ease-in-out infinite alternate;
}
.loading-text h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    animation: textGlow 1.5s ease-in-out infinite alternate;
}

.progress {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}


.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ffdcdc91;
    border-radius: 10px;
    width: 0%;
    animation: progressFill 3s ease-out forwards;
}

.progress-handle {
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.progress-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.progress-text {
    color: #ffffff;
    font-size: 1rem;
    margin-top: 0.5rem;
    display: block;
}

.floating-hearts {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
.floating-heart {
    position: absolute;
    opacity: 0.6;
    animation: floatingHeart 4s linear infinite;
}


/* Animations */
@keyframes heartPulse {
    0% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
    }
    100% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes textGlow {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff6b6b;
    }
    to {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff6b6b;
    }
}

@keyframes progressFill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes floatingHeart {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

/* Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-fixed);
    transition: var(--transition-all);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.header.scrolled {
    box-shadow: var(--shadow-md);
}

.nav {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-6);
}

.nav-logo {
    font-family: var(--font-secondary);
    font-size: var(--text-2xl);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nav-logo i {
    animation: pulse 2s infinite;
}

.nav-links {
    display: flex;
    gap: var(--space-8);
}

.nav-link {
    color: var(--color-text);
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: var(--transition-all);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link i {
    font-size: var(--text-lg);
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-background-alt);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.control-btn:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-2px);
}

.control-btn.active {
    background: var(--gradient-primary);
    color: white;
}

.menu-toggle {
    display: none;
}

/* Hero Section */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #343a4040;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: var(--z-negative);
}

.hero-background video,
.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-dark);
    z-index: var(--z-0);
}

.hero-content {
    position: relative;
    z-index: var(--z-10);
    color: var(--color-text-white);
    text-align: center;
    padding: var(--space-4);
    max-width: 800px;
}

.hero-title {
    font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
    margin-bottom: var(--space-6);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 0.5s;
}

.hero-subtitle {
    font-size: clamp(var(--text-lg), 4vw, var(--text-2xl));
    margin-bottom: var(--space-8);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 0.8s;
}

.love-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.stat-item {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--space-6);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition-transform);
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
}

.stat-desc {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    margin-top: var(--space-2);
    color: var(--color-text-white);
}

.scroll-hint {
    transform: translateX(-50%);
    color: var(--color-text-white);
    bottom: -60px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    opacity: 0;
    animation: fadeInUp 1s ease forwards 1s;
}

.scroll-hint i {
    font-size: var(--text-2xl);
    animation: bounce 2s infinite;
}

/* Timeline Section */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: var(--timeline-line);
    transform: translateX(-50%);
}

.timeline-item {
    margin-bottom: 3rem;
    position: relative;
    width: 50%;
    padding: 0 2rem;
}

.timeline-item:nth-child(odd) {
    margin-left: auto;
}


.timeline-item:nth-child(odd) .timeline-icon {
    left: -20px;
}

.timeline-item:nth-child(even) .timeline-icon {
    right: -20px;
}
.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}
.timeline-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    background: var(--timeline-dot);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    top: 0;
}
.timeline-content {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px var(--card-shadow);
}
.timeline-content,
.gallery-item {
    box-shadow: 
        0 10px 30px var(--card-shadow),
        0 0 0 1px var(--card-border);
}
.timeline-content::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.timeline-item:nth-child(odd) .timeline-content::before {
    right: -60px;
}

.timeline-item:nth-child(even) .timeline-content::before {
    left: -60px;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--card-shadow);
}


.timeline-date {
    color: var(--title-color);    /* Using title color for dates */
    font-weight: 500;
    font-size: 1rem;
}

.timeline-title {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 0.3px;
}

.timeline-text {
    color: var(--text-secondary);
    line-height: 1.8;              /* Increased line height for better readability */
    font-size: 1.05rem;           /* Slightly larger font size */
}
.timeline-media img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.timeline-media img:hover {
    transform: scale(1.02);
}

.timeline-image {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-top: var(--space-4);
}

.timeline-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: var(--transition-transform);
}

.timeline-image img:hover {
    transform: scale(1.1);
}
@media (prefers-contrast: high) {
    :root[data-theme="light"] {
        --text-primary: #000000;
        --text-secondary: #2a2a2a;
        --card-border: rgba(0, 0, 0, 0.2);
    }
    
    :root[data-theme="dark"] {
        --text-primary: #ffffff;
        --text-secondary: #f0f0f0;
        --card-border: rgba(255, 255, 255, 0.2);
    }
}

@media print {
    .timeline-content,
    .gallery-item {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
    
    .section-title,
    .timeline-title,
    .gallery-title {
        color: #000 !important;
    }
    
    .timeline-text,
    .section-subtitle {
        color: #333 !important;
    }
}
/* Gallery Section */
.gallery {
    background: var(--color-background-alt);
    position: relative;
    overflow: hidden;
}

.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}



.filter-btn {
    background: var(--filter-btn-bg);
    color: var(--filter-btn-text);
    padding: 0.8rem 1.8rem;
    border: 2px solid var(--filter-btn-border);
    border-radius: 25px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}



.filter-btn:hover,
.filter-btn.active {
    background: var(--filter-btn-active);
    color: var(--filter-btn-active-text);
    border-color: var(--filter-btn-active);
}


.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--card-shadow);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

.gallery-item {
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--card-border);
    overflow: hidden;
}

.gallery-item.aos-animate {
    opacity: 1;
    transform: translateY(0);
}

.gallery-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}



.gallery-overlay {
    background: var(--overlay-bg);
    padding: 1.5rem;
    backdrop-filter: blur(8px);    /* Increased blur for better text visibility */
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-title {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
}

.gallery-date {
    color: var(--text-secondary);
    font-weight: 500;
}


/* Responsive Design */
@media (max-width: 768px) {
    .timeline::before {
        left: 30px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 0;
    }

    .timeline-item:nth-child(odd) {
        margin-left: 0;
    }

    .timeline-icon {
        left: 10px !important;
    }

    .gallery-filters {
        flex-direction: column;
        align-items: stretch;
        padding: 0 1rem;
    }

    .filter-btn {
        justify-content: center;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }
}

/* Love Notes Section */
.notes {
    background: var(--gradient-primary);
    color: var(--color-text-white);
    position: relative;
    overflow: hidden;
}

.note-delete {
    background: none;
    border: none;
    color: #ff3b30;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.note-delete:hover {
    opacity: 1;
    background: rgba(255, 59, 48, 0.1);
    transform: scale(1.1);
}

.note.removing {
    animation: removeNote 0.3s ease forwards;
}

@keyframes removeNote {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}
/* Style for delete confirmation modal */
.swal2-delete-modal .delete-btn {
    background: #ff3b30 !important;
    color: white !important;
}

.swal2-delete-modal .delete-btn:hover {
    background: #ff2419 !important;
}

.notes::before {
    content: '❤';
    position: absolute;
    font-size: 40rem;
    opacity: 0.05;
    top: -10rem;
    right: -10rem;
    transform: rotate(-15deg);
}

.notes-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

.note {
    background: #2d2d2d;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}
.note.visible {
    opacity: 1;
    transform: translateY(0);
}

.note:hover {
    transform: translateY(-10px) rotate(0);
}

.note-content {
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}


/* Note Footer */
.note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.note-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-color-secondary);
}


.add-note-btn {
    bottom: var(--space-8);
    right: var(--space-8);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-all);
    z-index: var(--z-fixed);
}

.add-note-btn:hover {
    transform: scale(1.1) rotate(180deg);
}

/* Music Player Styles */
.music-player {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 350px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

/* Minimized State */
.music-player.minimized {
    width: 100px;
    height: 60px;
    background: var(--color-background-dark);
    border-radius: 30px;
    backdrop-filter: blur(8px);
}

.music-player.minimized .minimize-toggle {
    top:15px;
    transform: rotate(180deg);
}

.music-player.minimized .minimize-toggle:hover {
    transform: rotate(180deg) scale(1.1);
}

/* Quick Controls (Shown when minimized) */
.quick-controls {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.music-player.minimized .quick-controls {
    display: flex;
        padding: 10px;
        justify-content: flex-start;
}

.music-player.minimized .play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.minimized .quick-controls {
    opacity: 1;
    visibility: visible;
}

.quick-btn {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.quick-controls .play-btn {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    box-shadow: none;
}

.quick-btn:hover {
    transform: scale(1.1);
}

.music-player.minimized .play-btn:hover {
    background: var(--primary-color);
    color: white;
}

/* Hide other elements when minimized */
.music-player.minimized .player-wrapper,
.music-player.minimized .progress-container,
.music-player.minimized .volume-control,
.music-player.minimized .playlist-container {
    display: none;
}
/* Album Art in minimized state */
.music-player.minimized .album-art {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    opacity: 0.5;
}

/* Player Content */
.player-content {
    padding: 15px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .music-player {
        bottom: 10px;
        right: 10px;
        width: calc(100% - 20px);
        max-width: 300px;
    }
    .music-player.minimized .quick-controls {
        display: flex;
            padding: 5px;
            justify-content: flex-start;
    }

    .music-player.minimized {
        width: 95px;
        height: 50px;
        border-radius: 25px;
    }

    .minimize-toggle {
        top: -24px;
        right: 13px;
        width: 24px;
        height: 24px;
    }

    .music-player.minimized .minimize-toggle {
        top:10px;

    }
}

/* Additional Styles for Better Visibility */
.music-player.minimized .quick-controls .play-btn {
    background: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.music-player.minimized .minimize-toggle {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Main Player Wrapper */
.player-wrapper {
    padding: 20px;
    background: var(--f-spinner-color-1);
}


.minimized .player-wrapper {
    opacity: 0;
    visibility: hidden;
}

/* Album Art */
.album-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.album-art-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.album-art:hover img {
    transform: scale(1.08);
}

.album-art:hover {
    transform: scale(1.05);
}

/* Song Info */
.song-info {
    text-align: center;
    margin-bottom: 20px;
}

.song-title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.song-artist {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    opacity: 0.8;
}

/* Player Controls */
.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.player-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.play-btn {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

.play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(var(--primary-color-rgb), 0.4);
}

.player-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.player-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}


.player-btn:hover i {
    transform: scale(1.1);
}

.player-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-radius: 50px;
    width: 30px;
    height: 30px;
}

.play-btn {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    color: white;
}

.play-btn i {
    font-size: 20px;
    color:#fff;
}

/* Progress Bar */
.progress-container {
    position: relative;
    width: 200px;
    margin: 0 auto;
}

.progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translate(0, -50%) scale(0);
    transition: transform 0.2s ease;
}

.progress-bar:hover .progress-handle {
    transform: translate(0, -50%) scale(1);
}



.progress {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    position: relative;
    transition: width 0.1s linear;
}

.progress::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform 0.2s ease;
}

.progress-bar:hover .progress::after {
    transform: translateY(-50%) scale(1);
}

.time-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: var(--text-color-secondary);
    margin-top: 5px;
}

/* Volume Control */
.volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
}

.volume-icon {
    color: var(--color-text);
    cursor: pointer;
    transition: color 0.3s ease;
    width: 24px;
    text-align: center;
}

.volume-icon:hover {
    color: var(--color-primary);
}


.volume-slider {
    flex-grow: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.volume-slider:hover .volume-handle {
    transform: translate(0, -50%) scale(1);
}
.volume-bar {
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
    position: relative;
}


.volume-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translate(0, -50%) scale(0);
    transition: transform 0.2s ease;
}

.volume-bar::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform 0.2s ease;
}

.volume-slider:hover .volume-bar::after {
    transform: translateY(-50%) scale(1);
}

/* Minimize Toggle Button */
.minimize-toggle {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 28px;
    height: 28px;
    background: var(--primary-color);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1001; /* Increased z-index to always be on top */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.minimize-toggle:hover {
    transform: scale(1.1);
}

.minimize-toggle i {
    transition: transform 0.3s ease;
}

/* Playlist */
.playlist-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
}

.playlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.playlist-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

.playlist {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    max-height: 300px;
}
.playlist-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-left: 3px solid transparent;
}
.music-player.show-playlist .playlist-container {
    max-height: 300px;
}
.playlist-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.playlist-item.active {
    background: rgba(var(--primary-color-rgb), 0.2);
    border-left-color: var(--primary-color);
}
.playlist-item-info {
    flex-grow: 1;
}

.playlist-item-title {
    font-size: 0.9em;
    margin-bottom: 2px;
}

.playlist-item-artist {
    font-size: 0.8em;
    opacity: 0.7;
}

.playlist-item-duration {
    font-size: 0.8em;
    opacity: 0.7;
}


/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(20px); }
    to { transform: translateY(0); }
}

.music-player {
    animation: fadeIn 0.3s ease, slideIn 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .music-player {
        bottom: 20px;
        right: 20px;
        width: calc(100% - 40px);
        max-width: 350px;
    }

    .album-art-container {
        width: 150px;
        height: 150px;
    }
}

/* Custom Scrollbar */
.playlist::-webkit-scrollbar {
    width: 6px;
}

.playlist::-webkit-scrollbar-track {
    background: transparent;
}

.playlist::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.playlist::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .music-player {
        bottom: 20px;
        right: 20px;
        width: calc(100% - 40px);
        max-width: 320px;
    }

    .album-art {
        width: 200px;
        height: 200px;
    }
}

/* Playing Animation */
@keyframes playingAnimation {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(0.7); }
    100% { transform: scaleY(1); }
}

.playing .play-btn i {
    animation: playingAnimation 1s ease infinite;
}
/* Additional animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes heartbeat {
    0% { transform: scale(0.8) rotate(45deg); }
    5% { transform: scale(0.9) rotate(45deg); }
    10% { transform: scale(0.8) rotate(45deg); }
    15% { transform: scale(1) rotate(45deg); }
    50% { transform: scale(0.8) rotate(45deg); }
    100% { transform: scale(0.8) rotate(45deg); }
}

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

/* Progress Bar Styling */
.progress-bar {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
    transition: height 0.2s ease;
}

.progress-bar:hover,
.progress-bar.dragging {
    height: 6px;
}

.progress {
    position: absolute;
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
}

.progress-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translate(0, -50%) scale(0);
    transition: transform 0.2s ease;
}

.progress-bar:hover .progress-handle,
.progress-bar.dragging .progress-handle {
    transform: translate(0, -50%) scale(1);
}

/* Volume Control Styling */
.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-slider {
    position: relative;
    width: 80px;
    height: 4px;
    background: rgba(255, 35, 127, 0.253);
    border-radius: 2px;
    cursor: pointer;
    transition: height 0.2s ease;
}

.volume-slider:hover,
.volume-slider.dragging {
    height: 6px;
}

.volume-bar {
    position: absolute;
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
}

.volume-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translate(0, -50%) scale(0);
    transition: transform 0.2s ease;
}

.volume-slider:hover .volume-handle,
.volume-slider.dragging .volume-handle {
    transform: translate(0, -50%) scale(1);
}

/* Playlist Styling */
.playlist-container {
    position: absolute;
    right: 0;
    top: 100%;
    width: 300px;
    max-height: 0;
    background: var(--background-color);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.music-player.show-playlist .playlist-container {
    max-height: 300px;
}

.playlist {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    max-height: 300px;
}

.playlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.playlist-item:hover {
    background: var(--hover-color);
}

.playlist-item.active {
    background: var(--primary-color);
    color: #fff;
}

.playlist-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.playlist-item-title {
    font-weight: 500;
}

.playlist-item-artist {
    font-size: 0.85em;
    opacity: 0.7;
}

.playlist-item-duration {
    font-size: 0.85em;
    opacity: 0.7;
}

/* Dark theme styles */
[data-theme="dark"] {
    --color-background: #1a1a1a;
    --color-background-alt: #2d2d2d;
    --color-text: #ffffff;
    --color-text-light: #cccccc;
    --color-text-lighter: #999999;
}

[data-theme="dark"] .header {
    background: rgba(26, 26, 26, 0.95);
}

[data-theme="dark"] .music-player {
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 1200px) {
    :root {
        --text-6xl: 3rem;
        --text-5xl: 2.5rem;
        --space-20: 4rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--color-background);
        padding: var(--space-4);
        flex-direction: column;
        transform: translateY(-140%);
        transition: var(--transition-transform);
        z-index: var(--z-fixed);
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .menu-toggle {
        display: block;
    }

    .music-player {
        width: calc(100% - var(--space-6) * 2);
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    :root {
        --text-6xl: 2rem;
        --text-5xl: 1.8rem;
        --space-12: 2rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .notes-container {
        grid-template-columns: 1fr;
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease;
}

.modal-content {
    background: var(--background-color);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.modal.show .modal-content {
    transform: translateY(0);
}


.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.modal-close:hover {
    opacity: 1;
}
.modal-body {
    padding: 1rem;
}


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

/* Note Item Styling */
.note-item {
    position: relative;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.note-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.note-like {
    background: none;
    border: none;
    color: var(--text-color-secondary);
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.note-like:hover {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
}
.note-like.liked {
    color: #ff3b30;
}

.note-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.note-item:hover .note-actions {
    opacity: 1;
}

.delete-btn {
    padding: 0.5rem;
    background: rgba(255, 59, 48, 0.1);
    border: none;
    border-radius: 6px;
    color: #ff3b30;
    cursor: pointer;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    background: rgba(255, 59, 48, 0.2);
    transform: scale(1.05);
}

/* Delete Modal Styling */
#deleteModal .modal-content {
    max-width: 400px;
}

.delete-confirm-btn {
    background: #ff3b30;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.delete-confirm-btn:hover {
    background: #ff2419;
    transform: scale(1.02);
}

/* Animation for removing notes */
.note-item.removing {
    animation: removeNote 0.3s ease forwards;
}

@keyframes removeNote {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

.note-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-group {
    position: relative;
}

.note-textarea {
    width: 100%;
    min-height: 150px;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}
/* Ensure content is visible */
.main-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Basic animations */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Ensure elements are visible */
.music-player,
.gallery-grid,
.notes-container,
.timeline,
.typing-text,
.cursor {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Add smooth transitions for all animations */
* {
    transition: all 0.3s ease;
}
.note-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.character-count {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: 0.875rem;
    color: var(--text-color-secondary);
}
.character-count.limit-near {
    color: #ff3b30;
}
/* Sweet Alert Custom Styles */
.swal2-note-modal {
    font-family: var(--font-family);
}

.swal2-delete-modal .delete-btn {
    background: #ff3b30 !important;
}

.swal2-delete-modal .delete-btn:hover {
    background: #ff2419 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .notes-container {
        padding: 1rem;
    }

    .note {
        padding: 1rem;
    }

    .note-footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .note-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
.form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

/* Button Styles */
.submit-btn, .cancel-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.cancel-btn {
    background: var(--card-shadow);
    color: var(--color-background);
}
.submit-btn {
    background: var(--filter-btn-border);
    color: var(--color-primary);
}

.cancel-btn:hover {
    background: var(--background-color-darker);
}

.submit-btn:hover {
    background: var(--primary-color-dark);
    transform: translateY(-1px);
}
/* Animation */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 1rem;
    }

    .form-footer {
        flex-direction: column;
    }

    .submit-btn, .cancel-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Footer Styles */
.footer {
    position: relative;
    background: var(--color-background);
    padding: var(--space-12) 0;
    margin-top: var(--space-20);
    overflow: hidden;
}

.footer-wave {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 50px;
    background-size: cover;
}

.footer-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-heart {
    font-size: 2rem;
    margin-bottom: var(--space-4);
    animation: heartbeat 1.5s infinite;
}

.footer-text {
    margin-bottom: var(--space-6);
    line-height: 1.8;
}

.footer-text a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.love-timer {
    display: block;
    margin: var(--space-2) 0;
    font-style: italic;
    color: var(--color-text-light);
}

.copyright {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-lighter);
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-background-alt);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--gradient-primary);
    color: white;
    transform: translateY(-3px);
}