/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Floating Birthday Gallery Styles */
.floating-birthday-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.birthday-float-image {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
    border: 3px solid #FFD700;
    animation: floatY 3s ease-in-out infinite alternate;
    pointer-events: auto;
}

.birthday-float-image::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.birthday-float-image:hover::before {
    opacity: 1;
    animation: rotateRing 2s linear infinite;
}

.birthday-float-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.birthday-float-image:hover {
    transform: scale(1.15) translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.birthday-float-image:hover img {
    transform: scale(1.05);
}

.birthday-float-image.expanded {
    z-index: 15;
    width: 140px;
    height: 140px;
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.5);
    transform: scale(1.05);
    animation: expandedFloat 4s ease-in-out infinite alternate;
    border: 4px solid #FFD700;
}

.birthday-float-image.expanded::before {
    opacity: 1;
    animation: rotateRing 3s linear infinite;
}

.birthday-float-image:nth-child(1) { animation-delay: 0s; }
.birthday-float-image:nth-child(2) { animation-delay: 0.5s; }
.birthday-float-image:nth-child(3) { animation-delay: 1s; }
.birthday-float-image:nth-child(4) { animation-delay: 1.5s; }
.birthday-float-image:nth-child(5) { animation-delay: 2s; }
.birthday-float-image:nth-child(6) { animation-delay: 2.5s; }

@keyframes floatY {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes expandedFloat {
    0% { transform: scale(1.05) translateY(0) rotate(-1deg); }
    100% { transform: scale(1.05) translateY(-20px) rotate(1deg); }
}

/* Birthday Image Overlay */
.birthday-image-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(26, 26, 46, 0.9) 50%, rgba(0,0,0,0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.birthday-image-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.birthday-image-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.birthday-image-expanded {
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    border-radius: 2rem;
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3), 0 0 0 3px #FFD700;
    padding: 2rem;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    animation: modalZoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.birthday-image-expanded::before {
    content: '🎉';
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 2rem;
    animation: bounce 1s ease-in-out infinite alternate;
}

.birthday-image-expanded img {
    max-width: 400px;
    max-height: 65vh;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.birthday-image-expanded img:hover {
    transform: scale(1.02);
}

.birthday-image-expanded audio {
    width: 100%;
    max-width: 350px;
    margin-top: 1rem;
    border-radius: 25px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    padding: 5px;
}

@keyframes modalZoomIn {
    0% {
        transform: scale(0.3) rotate(-10deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes bounce {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-10px) scale(1.1); }
}

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

/* Responsive for birthday gallery */
@media (max-width: 768px) {
    .birthday-float-image {
        width: 110px;
        height: 110px;
    }
    .birthday-float-image.expanded {
        width: 110px;
        height: 110px;
    }
    .birthday-image-expanded {
        padding: 1.5rem;
        margin: 1rem;
    }
    .birthday-image-expanded img {
        max-width: 280px;
        max-height: 50vh;
    }
    .birthday-image-expanded audio {
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .birthday-float-image {
        width: 90px;
        height: 90px;
    }
    .birthday-float-image.expanded {
        width: 90px;
        height: 90px;
    }
    .birthday-image-expanded {
        padding: 1rem;
        margin: 0.5rem;
    }
    .birthday-image-expanded img {
        max-width: 240px;
        max-height: 45vh;
    }
}

/* Simple Full-Screen Modal */
.fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #1a1a2e 75%, #0a0a0a 100%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.fullscreen-modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Floating background elements */
.fullscreen-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(184, 134, 11, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(184, 134, 11, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 30% 70%, rgba(184, 134, 11, 0.06) 0%, transparent 40%);
    animation: floatBg 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes floatBg {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(10px, -10px) scale(1.02); }
    50% { transform: translate(-5px, 5px) scale(0.98); }
    75% { transform: translate(-10px, -5px) scale(1.01); }
}

.fullscreen-gallery-content {
    width: 90%;
    height: 90%;
    position: relative;
    z-index: 10;
}

/* Enhanced modal controls visibility */
.fullscreen-modal .gallery-controls {
    position: absolute;
   
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    z-index: 20;
}

.fullscreen-modal .gallery-btn {
    background: linear-gradient(135deg, #B8860B 0%, #CD853F 100%);
    color: #FFF8DC;
    border: 3px solid #FFD700;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-size: 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(184, 134, 11, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 21;
}

.fullscreen-modal .gallery-btn:hover {
    transform: translateY(-8px) scale(1.15);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.8);
    border-color: #FFFF00;
    text-shadow: 0 0 10px #FFD700;
}

.fullscreen-modal .gallery-btn:active {
    transform: translateY(-5px) scale(1.1);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: #FFD700;
    cursor: pointer;
    z-index: 10000;
    background: rgba(184, 134, 11, 0.8);
    width: 60px;
    height: 60px;
    border: 2px solid #FFD700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.modal-close-btn:hover {
    background: rgba(255, 0, 0, 0.9);
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.6);
}

body {
    font-family: 'Crimson Text', serif;
    background: linear-gradient(135deg, #F5F5DC 0%, #F0F8FF 15%, #E0FFFF 30%, #F5FFFA 45%, #FFFDD0 60%, #2E8B57 85%, #3CB371 100%);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Vintage Paper Texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, transparent 20%, rgba(255,248,220,0.3) 21%, rgba(255,248,220,0.3) 34%, transparent 35%, transparent),
        linear-gradient(0deg, transparent 24%, rgba(255,248,220,0.05) 25%, rgba(255,248,220,0.05) 26%, transparent 27%, transparent 74%, rgba(255,248,220,0.05) 75%, rgba(255,248,220,0.05) 76%, transparent 77%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* Typography */
.elegant-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 600;
    color: #2E8B57;
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(46, 139, 87, 0.2);
    position: relative;
}

.elegant-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3CB371, #2E8B57, transparent);
    border-radius: 2px;
}

/* Birthday Modal */
.modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(139, 69, 19, 0.9);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: linear-gradient(135deg, #FFF8DC 0%, #F5DEB3 100%);
    border: 5px solid #8B4513;
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(139, 69, 19, 0.3);
    max-width: 600px;
    margin: 2rem;
}

.modal-content::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, #CD853F, #D2691E, #CD853F);
    border-radius: 25px;
    z-index: -1;
}

.birthday-animation {
    position: relative;
    overflow: hidden;
}

.birthday-text h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 3.5rem;
    color: #B8860B;
    margin-bottom: 1rem;
    animation: bounceIn 2s ease-out;
}

.birthday-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #CD853F;
    margin-bottom: 1.5rem;
    animation: fadeInUp 2s ease-out 0.5s both;
}

.birthday-wish {
    font-size: 1.2rem;
    color: #8B7355;
    line-height: 1.8;
    margin-bottom: 2rem;
    animation: fadeInUp 2s ease-out 1s both;
}

.vintage-btn {
    background: linear-gradient(135deg, #2E8B57 0%, #3CB371 100%);
    color: #F5F5DC;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(46, 139, 87, 0.3);
}

.vintage-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(46, 139, 87, 0.4);
    background: linear-gradient(135deg, #3CB371 0%, #2E8B57 100%);
}

/* Confetti Animation */
.confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.confetti::before,
.confetti::after {
    content: '🎉 🎂 🌟 💖 🎈';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    font-size: 1.5rem;
    animation: confettiFall 3s linear infinite;
}

.confetti::after {
    animation-delay: -1.5s;
    content: '✨ 🌺 💕 🦋 🌈';
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100px);
        opacity: 1;
    }
    100% {
        transform: translateY(400px);
        opacity: 0;
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

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

/* Navigation */
.vintage-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(245, 245, 220, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid #3CB371;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(46, 139, 87, 0.2);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: #2E8B57;
    margin: 0;
}

.subtitle {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    color: #3CB371;
    font-style: italic;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #2E8B57;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #3CB371;
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu a:hover {
    color: #3CB371;
}

/* Sections */
section {
    padding: 120px 2rem 80px;
    position: relative;
    z-index: 2;
}

.vintage-frame {
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(245, 245, 220, 0.9);
    border: 5px solid #3CB371;
    border-radius: 30px;
    padding: 3rem;
    position: relative;
    box-shadow: 0 20px 40px rgba(46, 139, 87, 0.2);
}

.vintage-frame::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(45deg, #3CB371, #2E8B57, #20B2AA, #66CDAA);
    border-radius: 35px;
    z-index: -1;
}

/* Home Section */
.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.intro-text {
    padding-right: 2rem;
}

.quote-box {
    background: linear-gradient(135deg, #F0F8FF 0%, #E0FFFF 100%);
    border-left: 5px solid #2E8B57;
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 15px;
    box-shadow: inset 0 2px 10px rgba(46, 139, 87, 0.1);
}

.main-quote {
    font-family: 'Dancing Script', cursive;
    font-size: 1.8rem;
    color: #2E8B57;
    font-style: italic;
    text-align: center;
    margin: 0;
}

.description {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #2F4F4F;
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* Image Gallery */
.image-gallery {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.main-image-container {
    text-align: center;
}

.vintage-photo-frame {
    position: relative;
    display: inline-block;
    background: #FFF8DC;
    padding: 15px;
    border: 3px solid #B8860B;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(184, 134, 11, 0.2);
    transition: all 0.3s ease;
}

.vintage-photo-frame:hover {
    box-shadow: 0 15px 40px rgba(184, 134, 11, 0.3);
}

.vintage-photo-frame img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

.main-photo {
    width: 300px;
    height: 400px;
    object-fit: cover;
}

.vintage-photo-frame.small img {
    width: 150px;
    height: 200px;
    object-fit: cover;
}

.vintage-photo-frame.medium img {
    width: 250px;
    height: 300px;
    object-fit: cover;
}

.vintage-photo-frame.large img {
    width: 350px;
    height: 450px;
    object-fit: cover;
}

.photo-overlay {
    position: absolute;
    bottom: 20px;
    left: 15px;
    right: 15px;
    background: rgba(139, 69, 19, 0.9);
    color: #FFF8DC;
    padding: 10px;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.vintage-photo-frame:hover .photo-overlay {
    opacity: 1;
    transform: translateY(0);
}

.photo-quote {
    font-family: 'Dancing Script', cursive;
    font-size: 1.1rem;
    text-align: center;
    margin: 0;
}

.side-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gallery-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Quotes Section */
.quotes-section {
    grid-column: 1 / -1;
    margin-top: 3rem;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

.quote-card {
    background: linear-gradient(135deg, #F5DEB3 0%, #DEB887 100%);
    padding: 1.5rem;
    border-radius: 15px;
    border: 2px solid #D2691E;
    flex: 1;
    text-align: center;
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.1);
    transition: transform 0.3s ease;
}

.quote-card:hover {
    transform: translateY(-5px);
}

.quote-card p {
    font-family: 'Dancing Script', cursive;
    font-size: 1.3rem;
    color: #8B4513;
    margin: 0;
}

/* Journey Section */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-subtitle {
    font-family: 'Crimson Text', serif;
    font-size: 1.3rem;
    color: #A0522D;
    font-style: italic;
    margin-top: 1rem;
}

.timeline {
    position: relative;
    margin: 4rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #D2691E, #8B4513, #D2691E);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 4rem;
}

.timeline-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-left: 50%;
    padding-left: 3rem;
}

.timeline-content.reverse {
    margin-left: 0;
    margin-right: 50%;
    padding-left: 0;
    padding-right: 3rem;
    flex-direction: row-reverse;
}

.timeline-text {
    flex: 1;
    background: rgba(245, 222, 179, 0.8);
    padding: 2rem;
    border-radius: 15px;
    border: 2px solid #D2691E;
}

.timeline-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #8B4513;
    margin-bottom: 1rem;
}

.timeline-text p {
    font-size: 1.1rem;
    color: #654321;
    line-height: 1.6;
}

/* Timeline Dots */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    background: #D2691E;
    border: 4px solid #FFF8DC;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Blessings Section */
.blessings-section {
    margin-top: 4rem;
    text-align: center;
}

.blessings-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #8B4513;
    margin-bottom: 2rem;
}

.blessing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.blessing-card {
    background: linear-gradient(135deg, #F5DEB3 0%, #DEB887 100%);
    padding: 2rem;
    border-radius: 20px;
    border: 3px solid #D2691E;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 25px rgba(139, 69, 19, 0.1);
}

.blessing-card:hover {
    transform: translateY(-10px);
}

.blessing-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #8B4513;
    margin-bottom: 1rem;
}

.blessing-card p {
    font-size: 1.1rem;
    color: #654321;
    line-height: 1.6;
}

/* Beauty Section */
.beauty-gallery {
    margin-top: 3rem;
}

.nature-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.comparison-item {
    text-align: center;
    position: relative;
}

.nature-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 10px;
}

.nature-element {
    position: absolute;
    opacity: 0;
    transition: all 0.5s ease;
}

.comparison-item:hover .nature-element {
    opacity: 1;
}

.nature-element.flower {
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="8" fill="%23FFD700"/><circle cx="35" cy="35" r="12" fill="%23FF69B4"/><circle cx="65" cy="35" r="12" fill="%23FF69B4"/><circle cx="35" cy="65" r="12" fill="%23FF69B4"/><circle cx="65" cy="65" r="12" fill="%23FF69B4"/><circle cx="50" cy="20" r="12" fill="%23FF69B4"/><circle cx="50" cy="80" r="12" fill="%23FF69B4"/><circle cx="20" cy="50" r="12" fill="%23FF69B4"/><circle cx="80" cy="50" r="12" fill="%23FF69B4"/></svg>') no-repeat center;
    animation: float 3s ease-in-out infinite;
}

.nature-element.butterfly {
    top: 50%;
    left: 10px;
    width: 30px;
    height: 30px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 30 Q40 20 30 25 Q35 35 45 40 L50 45 L55 40 Q65 35 70 25 Q60 20 50 30 M50 45 Q40 55 30 60 Q35 70 45 65 L50 60 L55 65 Q65 70 70 60 Q60 55 50 45" fill="%23FF1493"/><circle cx="50" cy="37.5" r="2" fill="%23000"/></svg>') no-repeat center;
    animation: butterfly 4s ease-in-out infinite;
}

.nature-element.leaves {
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M30 70 Q50 30 70 70 Q50 50 30 70" fill="%23228B22"/><path d="M25 65 Q45 25 65 65 Q45 45 25 65" fill="%2332CD32"/><path d="M35 75 Q55 35 75 75 Q55 55 35 75" fill="%2390EE90"/></svg>') no-repeat center;
    animation: sway 2s ease-in-out infinite;
}

.nature-element.sparkle {
    top: 30%;
    right: 30%;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L55 40 L85 45 L55 50 L50 80 L45 50 L15 45 L45 40 Z" fill="%23FFD700"/></svg>') no-repeat center;
    animation: sparkle 1.5s ease-in-out infinite;
}

.nature-element.sun-rays {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="15" fill="%23FFD700"/><path d="M50 5 L52 25 L48 25 Z M95 50 L75 52 L75 48 Z M50 95 L48 75 L52 75 Z M5 50 L25 48 L25 52 Z M79.3 20.7 L64.6 35.4 L61.8 32.6 Z M79.3 79.3 L64.6 64.6 L67.4 67.4 Z M20.7 79.3 L35.4 64.6 L32.6 61.8 Z M20.7 20.7 L35.4 35.4 L38.2 38.2 Z" fill="%23FFA500"/></svg>') no-repeat center;
    animation: rotate 8s linear infinite;
}

.nature-element.birds {
    top: 15%;
    right: 15%;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20 40 Q30 30 40 40 Q30 35 20 40 M25 45 Q35 35 45 45 Q35 40 25 45 M60 35 Q70 25 80 35 Q70 30 60 35 M65 40 Q75 30 85 40 Q75 35 65 40" fill="%23000"/></svg>') no-repeat center;
    animation: fly 6s ease-in-out infinite;
}

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

@keyframes butterfly {
    0%, 100% { transform: translateX(0px) translateY(0px); }
    25% { transform: translateX(10px) translateY(-5px); }
    50% { transform: translateX(20px) translateY(0px); }
    75% { transform: translateX(10px) translateY(5px); }
}

@keyframes sway {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes rotate {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

@keyframes fly {
    0%, 100% { transform: translateX(0px) translateY(0px); }
    25% { transform: translateX(-10px) translateY(-8px); }
    50% { transform: translateX(-20px) translateY(-5px); }
    75% { transform: translateX(-10px) translateY(-2px); }
}

.beauty-description {
    font-family: 'Dancing Script', cursive;
    font-size: 1.4rem;
    color: #8B4513;
    margin-top: 1rem;
    font-style: italic;
}

.beauty-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.beauty-quote-card {
    background: linear-gradient(135deg, #F5DEB3 0%, #DEB887 100%);
    padding: 2rem;
    border-radius: 20px;
    border: 3px solid #D2691E;
    text-align: center;
    box-shadow: 0 10px 25px rgba(139, 69, 19, 0.15);
    transition: transform 0.3s ease;
}

.beauty-quote-card:hover {
    transform: translateY(-5px);
}

.beauty-quote-card p {
    font-family: 'Crimson Text', serif;
    font-size: 1.3rem;
    color: #654321;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

/* Floating Hearts */
.floating-hearts {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.heart {
    position: absolute;
    color: #FF69B4;
    font-size: 20px;
    animation: floatUp 6s linear infinite;
    opacity: 0.7;
}

.heart::before {
    content: '💖';
}

.heart:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    font-size: 16px;
}

.heart:nth-child(2) {
    left: 30%;
    animation-delay: 2s;
    font-size: 24px;
}

.heart:nth-child(3) {
    left: 50%;
    animation-delay: 4s;
    font-size: 18px;
}

.heart:nth-child(4) {
    left: 70%;
    animation-delay: 1s;
    font-size: 22px;
}

.heart:nth-child(5) {
    left: 90%;
    animation-delay: 3s;
    font-size: 20px;
}

@keyframes floatUp {
    0% {
        bottom: -50px;
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        bottom: 100vh;
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .intro-text {
        padding-right: 0;
    }
    
    .gallery-row {
        flex-direction: column;
        align-items: center;
    }
    
    .quotes-section {
        flex-direction: column;
        gap: 1rem;
    }
    
    .timeline-content,
    .timeline-content.reverse {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        flex-direction: column;
        text-align: center;
    }
    
    .timeline::before {
        display: none;
    }
    
    .timeline-item::before {
        display: none;
    }
    
    .nature-comparison {
        grid-template-columns: 1fr;
    }
    
    .beauty-quotes {
        grid-template-columns: 1fr;
    }
    
    .nav-menu {
        gap: 1rem;
    }
    
    .nav-menu a {
        font-size: 1rem;
    }
    
    .elegant-title {
        font-size: 2.5rem;
    }
    
    .vintage-frame {
        padding: 2rem 1rem;
    }
}

/* Rotating 3D Gallery */
.rotating-gallery-section {
   
    text-align: center;
}

.gallery-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #B8860B;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 3px rgba(184, 134, 11, 0.2);
}

.rotating-gallery {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    perspective: 1000px;
}

.gallery-container {
    position: relative;
    width: 400px;
    height: 500px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gallery-item {
    position: absolute;
    width: 300px;
    height: 400px;
    left: 50px;
    top: 50px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(184, 134, 11, 0.3);
    transition: all 0.5s ease;
    backface-visibility: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.gallery-item.active {
    z-index: 10;
    transform: translateZ(0) scale(1.1);
    box-shadow: 0 25px 50px rgba(184, 134, 11, 0.4);
}

.item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(184, 134, 11, 0.9));
    color: #FFF8DC;
    padding: 20px;
    font-family: 'Dancing Script', cursive;
    font-size: 1.2rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

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

.gallery-controls {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.gallery-btn {
    background: linear-gradient(135deg, #B8860B 0%, #CD853F 100%);
    color: #FFF8DC;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(184, 134, 11, 0.3);
}

.gallery-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(184, 134, 11, 0.4);
}

/* Eyes (Universe) Section */
.eyes-section {
    background: linear-gradient(135deg, #F5F5DC 0%, #F0F8FF 30%, #2E8B57 70%, #20B2AA 100%);
    color: #2F4F4F;
    position: relative;
    overflow: hidden;
}

.eyes-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(46, 139, 87, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(95, 158, 160, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.eyes-section .vintage-frame {
    background: rgba(245, 245, 220, 0.9);
    border-color: #2E8B57;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(46, 139, 87, 0.3);
}

.eyes-section .elegant-title {
    color: #2E8B57;
    text-shadow: 2px 2px 8px rgba(46, 139, 87, 0.3);
    font-size: 4rem;
}

.lost-in-eyes-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    margin: 3rem 0;
}

.eyes-story {
    position: relative;
}

.vintage-scroll {
    background: linear-gradient(135deg, #FFFDD0 0%, #F0F8FF 100%);
    border: 3px solid #2E8B57;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: inset 0 0 20px rgba(46, 139, 87, 0.1);
    position: relative;
}

.vintage-scroll::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #3CB371, #20B2AA, #3CB371);
    border-radius: 25px;
    z-index: -1;
}

.vintage-scroll h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: #2E8B57;
    text-align: center;
    margin-bottom: 2rem;
}

.vintage-poem {
    margin: 2rem 0;
    text-align: center;
}

.poem-line {
    font-family: 'Dancing Script', cursive;
    font-size: 1.6rem;
    color: #2F4F4F;
    margin: 0.8rem 0;
    line-height: 1.8;
    font-style: italic;
    position: relative;
}

.poem-line:nth-child(odd) {
    transform: translateX(-10px);
}

.poem-line:nth-child(even) {
    transform: translateX(10px);
}

.handwritten-memory {
    margin-top: 2rem;
    text-align: center;
}

.vintage-note {
    max-width: 100%;
    height: auto;
    border: 2px solid #2E8B57;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(46, 139, 87, 0.2);
    transition: all 0.3s ease;
}

.vintage-note:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(46, 139, 87, 0.3);
}

.note-caption {
    margin-top: 1rem;
}

.note-caption p {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    color: #2F4F4F;
    font-style: italic;
}

.eyes-gallery-vintage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

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

.vintage-eye-frame {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    /* 3D Context */
    transform-style: preserve-3d;
    perspective: 1000px;
    cursor: pointer;
    background: transparent;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

/* Beautiful decorative rings */
.vintage-eye-frame::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.6); /* Gold */
    border-left-color: transparent;
    border-right-color: transparent;
    transition: all 0.8s ease;
    animation: rotateRing 15s linear infinite;
    z-index: -1;
}

.vintage-eye-frame::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed rgba(46, 139, 87, 0.4); /* Emerald */
    animation: rotateRingReverse 20s linear infinite;
    z-index: -1;
}

.vintage-eye-frame:hover {
    transform: translateY(-10px) scale(1.05);
    z-index: 10;
}

.vintage-eye-frame:hover::before {
    border-color: #D4AF37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.vintage-eye-frame.main-gaze {
    width: 420px;
    height: 280px;
    border-radius: 30px; /* Slight rounding for main rect image */
}
.vintage-eye-frame.main-gaze::before, 
.vintage-eye-frame.main-gaze::after {
    border-radius: 35px; /* Match main gaze shape */
}

.vintage-eye-frame.side-gaze {
    width: 180px;
    height: 180px;
    margin: 15px 15px 50px 15px; /* Added bottom margin for captions */
}

.vintage-eye-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform 0.5s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: block;
    /* Bevel effect */
    border: 4px solid rgba(255,255,255,0.8);
}

/* 3D Hover tilt effect for images */
.vintage-eye-frame:hover img {
    transform: translateZ(20px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.gaze-effect {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.vintage-eye-frame:hover .gaze-effect {
    opacity: 1;
}

/* 3D Modal Styles */
.eyes-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.eyes-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.eyes-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    animation: modalPopIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.eyes-3d-container {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.eyes-3d-container img {
    max-width: 80vw;
    max-height: 70vh;
    border-radius: 20px;
    border: 8px solid #FFF;
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.5); /* Gold Glow */
    transform: rotateX(0deg) rotateY(0deg);
}

/* Reflection/Shine on 3D view */
.eyes-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%);
    border-radius: 20px;
    mix-blend-mode: overlay;
}

.close-eyes-modal {
    position: absolute;
    top: -50px;
    right: 0;
    color: #FFF;
    font-size: 3rem;
    cursor: pointer;
    text-shadow: 0 0 10px #000;
    transition: transform 0.3s;
    z-index: 10001;
}

.close-eyes-modal:hover {
    transform: rotate(90deg) scale(1.2);
    color: #D4AF37;
}

.eyes-modal-caption {
    margin-top: 20px;
    color: #D4AF37;
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    transform: translateZ(50px); /* Lifts text off the screen */
    background: rgba(0,0,0,0.6);
    padding: 10px 30px;
    border-radius: 50px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

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

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

@keyframes modalPopIn {
    0% { transform: scale(0.5) rotateY(90deg); opacity: 0; }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.vintage-caption {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(245, 245, 220, 0.95), rgba(240, 248, 255, 0.95));
    color: #2E8B57;
    padding: 8px 18px;
    border-radius: 20px;
    font-family: 'Dancing Script', cursive;
    font-size: 1.1rem;
    font-weight: 500;
    border: 2px solid #2E8B57;
    box-shadow: 0 4px 12px rgba(46, 139, 87, 0.3);
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 10;
    backdrop-filter: blur(3px);
    pointer-events: none;
}

.vintage-eye-frame:hover .vintage-caption {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 6px 20px rgba(46, 139, 87, 0.4);
    background: linear-gradient(135deg, rgba(245, 245, 220, 1), rgba(240, 248, 255, 1));
}

.surrounding-beauty {
    display: flex;
    justify-content: space-around;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 2rem; /* Add padding for caption space */
}

.nature-reflection {
    margin: 4rem 0;
    text-align: center;
}

.reflection-image {
    position: relative;
    display: inline-block;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(46, 139, 87, 0.3);
}

.nature-mirror {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 20px;
}

.reflection-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(46, 139, 87, 0.9));
    color: #F5F5DC;
    padding: 2rem;
    text-align: center;
}

.reflection-text p {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    line-height: 1.6;
    margin: 0;
}

.vintage-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.vintage-quote-card {
    background: linear-gradient(135deg, #FFFDD0 0%, #F0F8FF 100%);
    border: 2px solid #3CB371;
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(46, 139, 87, 0.2);
    transition: all 0.3s ease;
}

.vintage-quote-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(46, 139, 87, 0.3);
}

.quote-ornament {
    font-size: 2rem;
    color: #2E8B57;
    margin: 0.5rem 0;
}

.vintage-quote-card p {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    color: #2F4F4F;
    line-height: 1.7;
    margin: 1rem 0;
    font-style: italic;
}

/* Journey Section Updates */
.journey-phase {
    margin-bottom: 4rem;
    padding: 3rem;
    border-radius: 20px;
    position: relative;
}

.childhood {
    background: linear-gradient(135deg, #FFE4E1, #FFEFD5);
    border: 3px solid #F0E68C;
}

.growth {
    background: linear-gradient(135deg, #DDA0DD, #E6E6FA);
    border: 3px solid #CD853F;
}

.present {
    background: linear-gradient(135deg, #FFD700, #FFF8DC);
    border: 3px solid #B8860B;
}

.phase-header {
    text-align: center;
    margin-bottom: 3rem;
}

.phase-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: #B8860B;
    margin-bottom: 1rem;
}

.phase-description {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    color: #8B7355;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.phase-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.journey-photo-frame {
    position: relative;
    background: #FFF8DC;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);
    transition: all 0.5s ease;
    overflow: hidden;
}

.journey-photo-frame:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 40px rgba(184, 134, 11, 0.3);
}

.journey-photo-frame.featured {
    grid-column: span 2;
    transform: scale(1.1);
}

.journey-photo-frame img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.photo-caption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background: rgba(184, 134, 11, 0.9);
    color: #FFF8DC;
    padding: 10px;
    border-radius: 8px;
    font-family: 'Dancing Script', cursive;
    font-size: 1rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.journey-photo-frame:hover .photo-caption {
    transform: translateY(0);
}

.phoenix-message {
    text-align: center;
    margin: 4rem 0;
    padding: 3rem;
    background: linear-gradient(135deg, #FFD700, #FFF8DC);
    border-radius: 20px;
    border: 3px solid #B8860B;
}

.phoenix-quote p {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #8B7355;
    line-height: 1.8;
    font-weight: 500;
    font-style: italic;
}

.phoenix-blessing {
    background: linear-gradient(135deg, #FFE4E1, #FFEFD5) !important;
    border-color: #DDA0DD !important;
}

/* Beauty Section Updates */
.saree-showcase {
    margin: 3rem 0;
}

.saree-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
}

.saree-frame {
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.5s ease;
}

.saree-frame.ethereal {
    background: linear-gradient(135deg, #E6E6FA, #F0E68C);
}

.saree-frame.serene {
    background: linear-gradient(135deg, #FFEFD5, #DDA0DD);
}

.saree-frame.radiant {
    background: linear-gradient(135deg, #FFD700, #FFE4E1);
}

.saree-frame.peaceful {
    background: linear-gradient(135deg, #F0E68C, #E6E6FA);
}

.saree-frame.divine {
    background: linear-gradient(135deg, #DDA0DD, #FFEFD5);
}

.saree-frame.graceful {
    background: linear-gradient(135deg, #FFE4E1, #F0E68C);
}

.saree-frame:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(184, 134, 11, 0.3);
}

.saree-description {
    margin-top: 2rem;
}

.saree-description h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #B8860B;
    margin-bottom: 1rem;
}

.saree-description p {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    color: #8B7355;
    line-height: 1.7;
}

.beauty-philosophy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 4rem 0;
}

.philosophy-card {
    background: linear-gradient(135deg, #FFF8DC, #FFEFD5);
    padding: 2rem;
    border-radius: 15px;
    border: 2px solid #CD853F;
    text-align: center;
    transition: all 0.3s ease;
}

.philosophy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(184, 134, 11, 0.2);
}

.philosophy-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #B8860B;
    margin-bottom: 1rem;
}

.philosophy-card p {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    color: #8B7355;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .intro-text {
        padding-right: 0;
    }
    
    .gallery-row {
        flex-direction: column;
        align-items: center;
    }
    
    .quotes-section {
        flex-direction: column;
        gap: 1rem;
    }
    
    .timeline-content,
    .timeline-content.reverse {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        flex-direction: column;
        text-align: center;
    }
    
    .timeline::before {
        display: none;
    }
    
    .timeline-item::before {
        display: none;
    }
    
    .nature-comparison {
        grid-template-columns: 1fr;
    }
    
    .beauty-quotes {
        grid-template-columns: 1fr;
    }
    
    .nav-menu {
        gap: 1rem;
    }
    
    .nav-menu a {
        font-size: 1rem;
    }
    
    .elegant-title {
        font-size: 2.5rem;
    }
    
    .vintage-frame {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .modal-content {
        padding: 2rem;
        margin: 1rem;
    }
    
    .birthday-text h1 {
        font-size: 2.5rem;
    }
    
    .birthday-text h2 {
        font-size: 2rem;
    }
    
    .birthday-wish {
        font-size: 1rem;
    }
    
    .elegant-title {
        font-size: 2rem;
    }
    
    .main-photo {
        width: 250px;
        height: 350px;
    }
    
    .vintage-photo-frame.small img {
        width: 120px;
        height: 160px;
    }
    
    .vintage-photo-frame.large img {
        width: 280px;
        height: 380px;
    }
}

/* Feature Video Styles */
.feature-video-container {
    margin: 3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.video-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    background: linear-gradient(45deg, #2c2c2c, #1a1a1a);
    padding: 1.5rem;
    max-width: 600px;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-frame:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.video-frame.elegant {
    border: 3px solid #2E8B57;
    box-shadow: 0 15px 40px rgba(46, 139, 87, 0.3);
}

.video-frame.mystical {
    border: 3px solid #4B0082;
    box-shadow: 0 15px 40px rgba(75, 0, 130, 0.3);
    background: linear-gradient(45deg, #1a1a2e, #16213e);
}

.video-frame.inspirational {
    border: 3px solid #FF6B6B;
    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.3);
    background: linear-gradient(45deg, #2d1b69, #11998e);
}

.video-frame.divine {
    border: 3px solid #FFD700;
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3);
    background: linear-gradient(45deg, #667eea, #764ba2);
}

.feature-video {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
    max-height: 400px;
    object-fit: fit;
}

.video-caption {
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.video-caption h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    color: #FFD700;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.video-caption p {
    font-style: italic;
    opacity: 0.9;
    line-height: 1.6;
    color: #f5f5f5;
}

/* Eyes Video Specific Styling */
.eyes-video .video-frame {
    background: radial-gradient(circle at center, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
}

.eyes-video .video-caption h4 {
    color: #9370DB;
    text-shadow: 0 0 15px rgba(147, 112, 219, 0.5);
}

/* Journey Video Specific Styling */
.journey-video .video-frame {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.journey-video .video-caption h4 {
    color: #FF6B6B;
    text-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
}

/* Elegance Video Specific Styling */
.elegance-video .video-frame {
    background: linear-gradient(45deg, #ffecd2 0%, #fcb69f 50%, #667eea 100%);
}

.elegance-video .video-caption h4 {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Video Responsiveness */
@media (max-width: 768px) {
    .feature-video-container {
        padding: 1rem;
        margin: 2rem 0;
    }
    
    .video-frame {
        padding: 1rem;
    }
    
    .video-caption h4 {
        font-size: 1.2rem;
    }
    
    .feature-video {
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .video-caption h4 {
        font-size: 1rem;
    }
    
    .video-caption p {
        font-size: 0.9rem;
    }
    
    .feature-video {
        max-height: 250px;
    }
}

/* Cinematic Slideshow Styles */
.cinematic-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #1a1a1a 100%);
    color: #f5f5f5;
    padding: 4rem 0;
    margin-top: 4rem;
}

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

.cinematic-section .elegant-title {
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Photo Spinner */
.photo-spinner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    align-items: center;
}

.spinner-wheel {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background: radial-gradient(circle, #2c2c2c 0%, #1a1a1a 70%, #000 100%);
    border-radius: 50%;
    border: 8px solid #FFD700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: visible;
}

.spinner-wheel::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FFD700, #FFA500, #FF8C00, #FFD700);
    animation: rotate 20s linear infinite;
    z-index: -1;
}

.spinner-wheel::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.spin-button {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FF8C00, #FFD700);
    background-size: 400% 400%;
    animation: gradientShift 3s ease-in-out infinite;
    border: 4px solid #fff;
    color: #1a1a1a;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6), inset 0 2px 10px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.spin-button::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2s linear infinite;
}

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

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

.spin-button:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.8), inset 0 2px 15px rgba(255, 255, 255, 0.4);
}

.spin-icon {
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
}

.spin-text {
    font-size: 0.8rem;
    font-weight: bold;
}

.wheel-photos {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #FFD700;
    overflow: hidden;
}

.wheel-photo {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    transition: transform 0.1s ease;
}

.wheel-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #FFD700;
    z-index: 5;
}

.spinning {
    animation: spin 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(var(--spin-angle)); }
}

.selected-photo-frame {
    background: linear-gradient(45deg, #2c2c2c, #1a1a1a);
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #FFD700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.selected-photo-frame img {
    width: 250px;
    height: 300px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 1rem;
}

.photo-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: #FFD700;
    margin-top: 1rem;
}

/* Music Selection */
.music-selection {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.music-selection h3 {
    text-align: center;
    color: #FFD700;
    margin-bottom: 1.5rem;
}

.music-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.music-platform {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 1rem;
}

.music-btn {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.music-btn.spotify {
    background: linear-gradient(45deg, #1DB954, #1ed760);
    color: white;
}

.music-btn.youtube {
    background: linear-gradient(45deg, #FF0000, #cc0000);
    color: white;
}

.music-btn.ai-music {
    background: linear-gradient(45deg, #9c27b0, #e91e63);
    color: white;
}

.music-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.music-player {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.music-player input {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
}

.search-btn {
    background: #FFD700;
    color: #1a1a1a;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.hidden {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}

.current-track {
    background: rgba(255, 215, 0, 0.1);
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.control-btn {
    background: #FFD700;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Cinematic Controls */
.cinematic-controls {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.cinematic-controls h3 {
    text-align: center;
    color: #FFD700;
    margin-bottom: 1.5rem;
}

.style-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.style-option {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.style-option:hover {
    border-color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
}

.style-option input[type="radio"] {
    margin-right: 0.5rem;
}

.ai-enhancement {
    margin-bottom: 2rem;
}

.ai-btn {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.ai-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.ai-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.ai-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.start-cinematic-btn {
    display: block;
    margin: 2rem auto 0;
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 1.5rem 3rem;
    border-radius: 15px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.4);
}

.start-cinematic-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 107, 107, 0.6);
}

.start-cinematic-btn:disabled {
    background: #666;
    cursor: not-allowed;
    box-shadow: none;
}

/* Cinematic Modal */
.cinematic-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 1000;
    display: none;
    visibility: hidden;
    opacity: 0;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cinematic-modal.show {
    display: flex;
    visibility: visible;
    opacity: 1;
}

.cinema-screen {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    overflow: hidden;
    border: 20px solid #8B4513;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8), 0 0 100px rgba(139, 69, 19, 0.5);
}

.cinema-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(45deg, transparent 49%, rgba(255,255,255,0.05) 50%, transparent 51%);
    background-size: 30px 30px, 30px 30px, 20px 20px;
    pointer-events: none;
    z-index: 1;
}

.film-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-conic-gradient(from 0deg, transparent, transparent 1deg, rgba(255,255,255,0.03) 1deg, rgba(255,255,255,0.03) 2deg),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
    animation: filmGrain 0.2s infinite linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes filmGrain {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.cinema-header {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    color: #FFD700;
}

.cinema-logo {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    margin-bottom: 0.5rem;
    letter-spacing: 3px;
}

.cinema-subtitle {
    font-size: 1.2rem;
    opacity: 0.8;
    font-style: italic;
}

.slideshow-container {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 80%;
    height: 70%;
    border: 3px solid #FFD700;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
}

.cinematic-slides {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.8s ease-in-out;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide.active {
    opacity: 1;
}

.slide-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    background: #000;
}

.video-slide-content {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.slide.shake-effect {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.slide.zoom-effect {
    animation: zoomIn 1s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(1.1); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.slide-content {
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    max-width: 80%;
    background: rgba(0, 0, 0, 0.6);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 3;
}

.slide-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.slide-description {
    font-size: 1.2rem;
    opacity: 0.9;
    font-style: italic;
}


.slide-control {
    background: rgba(255, 215, 0, 0.95);
    border: 3px solid #ff69b4;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    color: #8B4513;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
}

.slide-control:hover {
    background: #ff69b4;
    color: white;
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.6);
}

.slide-control.close {
    background: rgba(139, 69, 19, 0.9);
    color: #FFD700;
}

.slide-control.download {
    background: linear-gradient(135deg, #ff69b4, #da70d6);
    color: white;
    width: auto;
    padding: 0 1.5rem;
    border-radius: 30px;
    font-size: 1.2rem;
    min-width: 140px;
    height: 55px;
}

.slide-control.download:hover {
    background: #228B22;
}

.cinema-footer {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    width: 0%;
    transition: width 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .photo-spinner-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .spinner-wheel {
        width: 300px;
        height: 300px;
    }
    
    .selected-photo-frame img {
        width: 200px;
        height: 250px;
    }
    
    .music-options {
        grid-template-columns: 1fr;
    }
    
    .cinema-logo {
        font-size: 2rem;
    }
    
    .slide-title {
        font-size: 2rem;
    }
    
    .slideshow-container {
        top: 15%;
        left: 2%;
        width: 96%;
        height: 70%;
    }
    
    .slide-content {
        max-width: 90%;
        padding: 1.5rem;
    }
    
    .slide-title {
        font-size: 1.8rem;
    }
    
    .slide-description {
        font-size: 1rem;
    }
}

/* Family Modal Styles */
.family-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2c1810 0%, #1a0f08 50%, #0f0804 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.family-modal.show {
    opacity: 1;
    visibility: visible;
}

.family-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: linear-gradient(135deg, #026c7f 0%, #015266 100%);
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid #4aa3b5;
    box-shadow: 0 20px 60px rgba(88, 143, 232, 0.3),
                0 8px 25px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(44, 58, 96, 0.1);
    animation: modalSlideIn 0.5s ease-out;
}

@keyframes modalSlideIn {
    0% {
        transform: scale(0.7) translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.close-family-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    color: #D4AF37;
    cursor: pointer;
    z-index: 10001;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid #D4AF37;
}

.close-family-modal:hover {
    background: #D4AF37;
    color: #2c1810;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.family-modal-background {
    position: relative;
    padding: 60px 40px 40px;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        radial-gradient(circle at 20% 30%, rgba(74, 163, 181, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(102, 204, 221, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #026c7f 0%, #015266 100%);
}

.family-floating-hearts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.family-heart {
    position: absolute;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.6);
    animation: familyHeartFloat 8s ease-in-out infinite;
    pointer-events: none;
}

.family-heart:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.family-heart:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; }
.family-heart:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 2s; }
.family-heart:nth-child(4) { top: 70%; right: 10%; animation-delay: 3s; }
.family-heart:nth-child(5) { bottom: 10%; right: 25%; animation-delay: 4s; }
.family-heart:nth-child(6) { top: 50%; left: 5%; animation-delay: 5s; }
.family-heart:nth-child(7) { bottom: 60%; left: 80%; animation-delay: 6s; }

@keyframes familyHeartFloat {
    0%, 100% { 
        transform: translateY(0) scale(1) rotate(0deg); 
        opacity: 0.4;
    }
    50% { 
        transform: translateY(-20px) scale(1.2) rotate(5deg); 
        opacity: 0.8;
    }
}

.family-photo-showcase {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 800px;
    z-index: 2;
    position: relative;
}

.family-photo-frame-large {
    position: relative;
    width: 350px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    border: 4px solid #D4AF37;
    background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(212, 175, 55, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.family-photo-frame-large::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 20px;
    background: linear-gradient(45deg, #D4AF37, #B8860B, #D4AF37, #DAA520);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.family-photo-frame-large:hover::before {
    opacity: 1;
    animation: familyFrameGlow 2s linear infinite;
}

@keyframes familyFrameGlow {
    0%, 100% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

.family-photo-frame-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.family-photo-frame-large:hover img {
    transform: scale(1.05);
}

.family-photo-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 40%, rgba(212, 175, 55, 0.1) 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.family-photo-frame-large:hover .family-photo-glow {
    opacity: 1;
}

.family-member-info {
    flex: 1;
    padding: 20px;
    text-align: center;
}

.family-caption {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #D4AF37;
    margin-bottom: 20px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: familyTitleGlow 3s ease-in-out infinite alternate;
}

@keyframes familyTitleGlow {
    0% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(212, 175, 55, 0.3); }
    100% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.6); }
}

.family-description {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #f5f5f5;
    margin-bottom: 25px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.family-decorative-border {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.family-ornament {
    font-size: 1.8rem;
    color: #D4AF37;
    animation: familyOrnamentPulse 2s ease-in-out infinite alternate;
}

.family-ornament:nth-child(1) { animation-delay: 0s; }
.family-ornament:nth-child(2) { animation-delay: 0.5s; }
.family-ornament:nth-child(3) { animation-delay: 1s; }

@keyframes familyOrnamentPulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; }
}

.family-photo-clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.family-photo-clickable:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.family-photo-clickable:hover .photo-overlay {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), rgba(184, 134, 11, 0.9));
    transform: translateY(0);
}

/* Responsive Family Modal */
@media (max-width: 768px) {
    .family-modal-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .family-modal-background {
        padding: 40px 20px 20px;
        min-height: 500px;
    }
    
    .family-photo-showcase {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .family-photo-frame-large {
        width: 280px;
        height: 320px;
    }
    
    .family-caption {
        font-size: 2rem;
    }
    
    .family-description {
        font-size: 1rem;
    }
    
    .close-family-modal {
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }
}
/* Family Modal Styles */
.family-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #598a90 0%, #012a32 50%, #040d0f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.family-modal.show {
    opacity: 1;
    visibility: visible;
}

.family-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: linear-gradient(135deg, #026c7f 0%, #015266 100%);
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid #4aa3b5;
    box-shadow: 0 20px 60px rgba(74, 163, 181, 0.3),
                0 8px 25px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(102, 204, 221, 0.2);
    animation: modalSlideIn 0.5s ease-out;
}

@keyframes modalSlideIn {
    0% {
        transform: scale(0.7) translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.close-family-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    color: #D4AF37;
    cursor: pointer;
    z-index: 10001;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid #D4AF37;
}

.close-family-modal:hover {
    background: #D4AF37;
    color: #2c1810;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.family-modal-background {
    position: relative;
    padding: 60px 40px 40px;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        radial-gradient(circle at 20% 30%, rgba(74, 163, 181, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(102, 204, 221, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #004652 0%, #49c9e9 100%);
}

.family-floating-hearts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.family-heart {
    position: absolute;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.6);
    animation: familyHeartFloat 8s ease-in-out infinite;
    pointer-events: none;
}

.family-heart:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.family-heart:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; }
.family-heart:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 2s; }
.family-heart:nth-child(4) { top: 70%; right: 10%; animation-delay: 3s; }
.family-heart:nth-child(5) { bottom: 10%; right: 25%; animation-delay: 4s; }
.family-heart:nth-child(6) { top: 50%; left: 5%; animation-delay: 5s; }
.family-heart:nth-child(7) { bottom: 60%; left: 80%; animation-delay: 6s; }

@keyframes familyHeartFloat {
    0%, 100% { 
        transform: translateY(0) scale(1) rotate(0deg); 
        opacity: 0.4;
    }
    50% { 
        transform: translateY(-20px) scale(1.2) rotate(5deg); 
        opacity: 0.8;
    }
}

.family-photo-showcase {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 800px;
    z-index: 2;
    position: relative;
}

.family-photo-frame-large {
    position: relative;
    width: 350px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    border: 4px solid #D4AF37;
    background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(212, 175, 55, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.family-photo-frame-large::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 20px;
    background: linear-gradient(45deg, #D4AF37, #B8860B, #D4AF37, #DAA520);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.family-photo-frame-large:hover::before {
    opacity: 1;
    animation: familyFrameGlow 2s linear infinite;
}

@keyframes familyFrameGlow {
    0%, 100% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

.family-photo-frame-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.family-photo-frame-large:hover img {
    transform: scale(1.05);
}

.family-photo-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 40%, rgba(212, 175, 55, 0.1) 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.family-photo-frame-large:hover .family-photo-glow {
    opacity: 1;
}

.family-member-info {
    flex: 1;
    padding: 20px;
    text-align: center;
}

.family-caption {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #D4AF37;
    margin-bottom: 20px;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: familyTitleGlow 3s ease-in-out infinite alternate;
}

@keyframes familyTitleGlow {
    0% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(212, 175, 55, 0.3); }
    100% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.6); }
}

.family-description {
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #f5f5f5;
    margin-bottom: 25px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.family-decorative-border {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.family-ornament {
    font-size: 1.8rem;
    color: #D4AF37;
    animation: familyOrnamentPulse 2s ease-in-out infinite alternate;
}

.family-ornament:nth-child(1) { animation-delay: 0s; }
.family-ornament:nth-child(2) { animation-delay: 0.5s; }
.family-ornament:nth-child(3) { animation-delay: 1s; }

@keyframes familyOrnamentPulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; }
}

.family-photo-clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.family-photo-clickable:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.family-photo-clickable:hover .photo-overlay {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), rgba(184, 134, 11, 0.9));
    transform: translateY(0);
}

/* Responsive Family Modal */
@media (max-width: 768px) {
    .family-modal-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .family-modal-background {
        padding: 40px 20px 20px;
        min-height: 500px;
    }
    
    .family-photo-showcase {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .family-photo-frame-large {
        width: 280px;
        height: 320px;
    }
    
    .family-caption {
        font-size: 2rem;
    }
    
    .family-description {
        font-size: 1rem;
    }
    
    .close-family-modal {
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }
}

/* Lord Venkateshwar Corner Styles */
.lord-venkateshwar-corner {
    position: fixed;
    top: 80px;
    left: 15px;
    z-index: 1000;
    pointer-events: auto;
}

.lord-venkateshwar-image {
    position: relative;
    width: 120px;
    height: 150px;
    border-radius: 15px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff8e1 0%, #ffe082 100%);
    border: 3px solid #ff9800;
    box-shadow: 
        0 4px 15px rgba(255, 152, 0, 0.4),
        0 8px 25px rgba(255, 193, 7, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: lordFloat 4s ease-in-out infinite alternate;
}

.lord-venkateshwar-image::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 15px;
    background: linear-gradient(45deg, #ff9800, #ffc107, #ffeb3b, #ff9800);
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: lordAuraRotate 3s linear infinite;
}

.lord-venkateshwar-image:hover::before {
    opacity: 1;
}

.lord-venkateshwar-image:hover {
    transform: scale(1.15) translateY(-8px);
    box-shadow: 
        0 8px 25px rgba(255, 152, 0, 0.6),
        0 12px 30px rgba(255, 193, 7, 0.4);
}

.lord-venkateshwar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lord-venkateshwar-image:hover img {
    transform: scale(1.05);
}

.lord-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.9), rgba(255, 193, 7, 0.9));
    color: #fff;
    padding: 4px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.lord-venkateshwar-image:hover .lord-overlay {
    transform: translateY(0);
}

.divine-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 193, 7, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.lord-venkateshwar-image:hover .divine-glow {
    opacity: 1;
}

@keyframes lordFloat {
    0% { 
        transform: translateY(0) rotate(-1deg); 
        box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4), 0 0 20px rgba(255, 193, 7, 0.2);
    }
    100% { 
        transform: translateY(-12px) rotate(1deg); 
        box-shadow: 0 8px 25px rgba(255, 152, 0, 0.6), 0 0 30px rgba(255, 193, 7, 0.4);
    }
}

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

/* Enhanced Family Modal for Religious Content */
.family-modal .divine-theme .family-modal-background {
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 193, 7, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 152, 0, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, #026c7f 0%, #015266 100%);
}

.family-modal .divine-theme .family-heart {
    color: rgba(255, 193, 7, 0.7);
}

.family-modal .divine-theme .family-caption {
    color: #ffc107;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 193, 7, 0.5);
}

.family-modal .divine-theme .family-ornament {
    color: #ff9800;
}

/* Responsive Design for Lord Venkateshwar */
@media (max-width: 768px) {
    .lord-venkateshwar-corner {
        top: 10px;
        left: 8px;
    }
    
    .lord-venkateshwar-image {
        width: 90px;
        height: 115px;
    }
    
    .lord-overlay {
        font-size: 0.5rem;
        padding: 1px;
    }
}

/* Journey Photo Clickable Styles */
.journey-clickable {
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.journey-clickable:hover {
    transform: translateY(-15px) scale(1.08);
    box-shadow: 0 25px 50px rgba(178, 190, 181, 0.4);
}

.journey-clickable::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700, #D4AF37);
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.journey-clickable:hover::before {
    opacity: 1;
    animation: vintageGlow 2s ease-in-out infinite alternate;
}

@keyframes vintageGlow {
    0% { opacity: 1; filter: brightness(1); }
    100% { opacity: 0.7; filter: brightness(1.2); }
}

/* Journey Modal Styles */
.journey-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    backdrop-filter: blur(5px);
}

.journey-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.journey-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: journeyModalSlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.journey-photo-showcase {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: linear-gradient(
        135deg,
        rgba(255, 248, 220, 0.1) 0%,
        rgba(212, 175, 55, 0.1) 50%,
        rgba(255, 248, 220, 0.1) 100%
    );
    padding: 2rem;
    border-radius: 20px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.journey-vintage-frame {
    position: relative;
    padding: 15px;
    background: linear-gradient(135deg, #8B4513, #A0522D, #8B4513);
    border-radius: 15px;
    box-shadow: 
        0 0 0 3px #D4AF37,
        0 0 0 6px #8B4513,
        0 15px 30px rgba(0, 0, 0, 0.4),
        inset 0 2px 5px rgba(255, 255, 255, 0.1);
}

.journey-vintage-frame img {
    display: block;
    max-width: 500px;
    max-height: 500px;
    width: auto;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.journey-aged-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(139, 69, 19, 0.6);
    border-radius: 15px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.journey-photo-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
     border-radius: 17px;
    animation: journeyGlow 3s ease-in-out infinite alternate;
    pointer-events: none;
}

.journey-memory-info {
    max-width: 400px;
    text-align: center;
}

.journey-phase-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: #D4AF37;
    margin-bottom: 1rem;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(212, 175, 55, 0.3);
    line-height: 1.2;
}

.journey-memory-text {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    color: #FFF8DC;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-style: italic;
}

.journey-decorative-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.flourish-left, .flourish-right {
    color: #D4AF37;
    font-size: 1.5rem;
    opacity: 0.8;
}

.flourish-center {
    color: #FFD700;
    font-size: 2rem;
    animation: twinkle 2s ease-in-out infinite;
}

.close-journey-modal {
    position: absolute;
    top: -60px;
    right: 0;
    color: #D4AF37;
    font-size: 3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.close-journey-modal:hover {
    color: #FFD700;
    transform: rotate(90deg) scale(1.1);
    text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.7),
        0 0 15px rgba(255, 215, 0, 0.5);
}

/* Journey Modal Animations */
@keyframes journeyModalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes journeyGlow {
    0% { 
        opacity: 1; 
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }
    100% { 
        opacity: 0.6; 
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
    }
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.2);
    }
}

/* Phase Gallery Mobile Responsiveness */
@media (max-width: 768px) {
    .phase-gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .journey-photo-frame {
        padding: 8px;
        margin-bottom: 1rem;
    }
    
    .journey-photo-frame img {
        height: 200px;
    }
    
    .photo-caption {
        font-size: 0.9rem;
        padding: 8px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
    
    .journey-clickable:hover {
        transform: translateY(-8px) scale(1.03);
    }
}

@media (max-width: 480px) {
    .phase-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.8rem;
    }
    
    .journey-photo-frame {
        padding: 6px;
    }
    
    .journey-photo-frame img {
        height: 180px;
    }
    
    .photo-caption {
        font-size: 0.8rem;
        padding: 6px;
    }
    
    /* Journey Modal Mobile Styles */
    .journey-modal-content {
        max-width: 95%;
        padding: 1rem;
    }
    
    .journey-photo-showcase {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .journey-vintage-frame {
        padding: 10px;
    }
    
    .journey-vintage-frame img {
        max-width: 280px;
        max-height: 320px;
    }
    
    .journey-phase-title {
        font-size: 1.6rem;
    }
    
    .journey-memory-text {
        font-size: 1rem;
    }
    
    .close-journey-modal {
        top: -40px;
        right: 10px;
        font-size: 2.5rem;
    }
}

/* Journey Section General Mobile Styles */
@media (max-width: 768px) {
    .journey-phase {
        margin-bottom: 3rem;
    }
    
    .phase-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .phase-title {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    .phase-description {
        font-size: 1rem;
        line-height: 1.5;
        padding: 0 1rem;
    }
    
    .journey-message {
        margin: 3rem 0;
        padding: 2rem 1rem;
    }
    
    .blessings-section {
        padding: 0 1rem;
    }
    
    .blessing-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .blessing-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .phase-title {
        font-size: 1.5rem;
    }
    
    .phase-description {
        font-size: 0.9rem;
    }
    
    .journey-message {
        padding: 1.5rem 0.5rem;
    }
    
    .journey-quote p {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* Journey Photo Clickable Styles */
.journey-clickable {
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.journey-clickable:hover {
    transform: translateY(-15px) scale(1.08);
    box-shadow: 0 25px 50px rgba(184, 134, 11, 0.4);
}

.journey-clickable::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700, #D4AF37);
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.journey-clickable:hover::before {
    opacity: 1;
    animation: vintageGlow 2s ease-in-out infinite alternate;
}

@keyframes vintageGlow {
    0% { opacity: 1; filter: brightness(1); }
    100% { opacity: 0.7; filter: brightness(1.2); }
}

/* Journey Modal Styles */
.journey-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    z-index: 15000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    backdrop-filter: blur(5px);
}

.journey-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.journey-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: journeyModalSlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.journey-photo-showcase {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: linear-gradient(
        135deg,
        rgba(255, 248, 220, 0.1) 0%,
        rgba(212, 175, 55, 0.1) 50%,
        rgba(255, 248, 220, 0.1) 100%
    );
    padding: 2rem;
    border-radius: 20px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.journey-vintage-frame {
    position: relative;
    padding: 15px;
    background: linear-gradient(135deg, #8B4513, #A0522D, #8B4513);
    border-radius: 15px;
    box-shadow: 
        0 0 0 3px #D4AF37,
        0 0 0 6px #8B4513,
        0 15px 30px rgba(0, 0, 0, 0.4),
        inset 0 2px 5px rgba(255, 255, 255, 0.1);
}

.journey-vintage-frame img {
    display: block;
    max-width: 500px;
    max-height: 500px;
    width: auto;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.journey-aged-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(139, 69, 19, 0.6);
    border-radius: 15px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.journey-photo-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 17px;
    animation: journeyGlow 3s ease-in-out infinite alternate;
    pointer-events: none;
}

.journey-memory-info {
    max-width: 400px;
    text-align: center;
}

.journey-phase-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: #D4AF37;
    margin-bottom: 1rem;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(212, 175, 55, 0.3);
    line-height: 1.2;
}

.journey-memory-text {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    color: #FFF8DC;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-style: italic;
}

.journey-decorative-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.flourish-left, .flourish-right {
    color: #D4AF37;
    font-size: 1.5rem;
    opacity: 0.8;
}

.flourish-center {
    color: #FFD700;
    font-size: 2rem;
    animation: twinkle 2s ease-in-out infinite;
}

.close-journey-modal {
    position: absolute;
    top: -60px;
    right: 0;
    color: #D4AF37;
    font-size: 3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.close-journey-modal:hover {
    color: #FFD700;
    transform: rotate(90deg) scale(1.1);
    text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.7),
        0 0 15px rgba(255, 215, 0, 0.5);
}

/* Journey Modal Animations */
@keyframes journeyModalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes journeyGlow {
    0% { 
        opacity: 1; 
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }
    100% { 
        opacity: 0.6; 
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
    }
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.2);
    }
}

/* Phase Gallery Mobile Responsiveness */
@media (max-width: 768px) {
    .phase-gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .journey-photo-frame {
        padding: 8px;
        margin-bottom: 1rem;
    }
    
    .journey-photo-frame img {
        height: 200px;
    }
    
    .photo-caption {
        font-size: 0.9rem;
        padding: 8px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
    
    .journey-clickable:hover {
        transform: translateY(-8px) scale(1.03);
    }
}

@media (max-width: 480px) {
    .phase-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.8rem;
    }
    
    .journey-photo-frame {
        padding: 6px;
    }
    
    .journey-photo-frame img {
        height: 180px;
    }
    
    .photo-caption {
        font-size: 0.8rem;
        padding: 6px;
    }
    
    /* Journey Modal Mobile Styles */
    .journey-modal-content {
        max-width: 95%;
        padding: 1rem;
    }
    
    .journey-photo-showcase {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .journey-vintage-frame {
        padding: 10px;
    }
    
    .journey-vintage-frame img {
        max-width: 280px;
        max-height: 320px;
    }
    
    .journey-phase-title {
        font-size: 1.6rem;
    }
    
    .journey-memory-text {
        font-size: 1rem;
    }
    
    .close-journey-modal {
        top: -40px;
        right: 10px;
        font-size: 2.5rem;
    }
}

/* Journey Section General Mobile Styles */
@media (max-width: 768px) {
    .journey-phase {
        margin-bottom: 3rem;
    }
    
    .phase-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .phase-title {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    .phase-description {
        font-size: 1rem;
        line-height: 1.5;
        padding: 0 1rem;
    }
    
    .journey-message {
        margin: 3rem 0;
        padding: 2rem 1rem;
    }
    
    .blessings-section {
        padding: 0 1rem;
    }
    
    .blessing-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .blessing-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .phase-title {
        font-size: 1.5rem;
    }
    
    .phase-description {
        font-size: 0.9rem;
    }
    
    .journey-message {
        padding: 1.5rem 0.5rem;
    }
    
    .journey-quote p {
        font-size: 1rem;
        line-height: 1.5;
    }
}