/* style.css */

/* Global Styles */
:root {
    --primary-color: #0e5096; /* Deep Blue - Standard for News links/buttons */
    --secondary-color: #f0ad4e; /* Orange for accents/breaking */
    --text-color-dark: #333333;
    --text-color-light: #ffffff;
    --background-light: #f4f5f7;
    --font-serif: 'Georgia', serif;
    --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     --fifth-color: #d7455b;
}

body {
    background: var(--background-light);
    font-family: var(--font-sans);
    color: var(--text-color-dark);
}

/* --- Header & Navigation --- */

.top-header {
    background: #0d1b2a; /* Dark background */
    color: #c9d6ff; /* Light, subtle color for text */
    padding: 8px 0; /* Reduced padding for sleeker look */
    font-size: 13px;
    font-weight: 500;
}

.navbar {
    background: var(--text-color-light);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Stronger but subtle shadow */
}

.logo-text {
    font-size: 24px;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: -1px;
    text-transform: uppercase;
    transition: color 0.3s;
}

.logo-text:hover {
    color: #004085; /* Darker hover effect */
}

.nav-link {
    font-weight: 600;
    color: var(--text-color-dark) !important;
    margin: 0 10px;
    padding: 15px 0 !important; /* Larger click area */
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.nav-link:hover, .nav-item .active > .nav-link {
    color: var(--primary-color) !important;
    border-bottom: 3px solid var(--primary-color);
}

/* --- Hero Slider (Carousel) --- */

.carousel-item img {
    height: 520px;
    object-fit: cover;
    filter: brightness(0.85); /* Slightly darken image for better text contrast */
}

.carousel-caption {
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.2));
    bottom: 0;
    left: 0;
    right: 0;
    top: auto; /* Anchor to the bottom */
    padding: 30px 50px;
    text-align: left;
    transform: translateY(0);
    border-radius: 0;
}

.carousel-caption h2 {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
}

.carousel-caption .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
    padding: 8px 25px;
    transition: background-color 0.3s;
}

.carousel-caption .btn-primary:hover {
    background-color: #004085;
    border-color: #004085;
}

/* Carousel Controls - Making them more subtle/professional */
.carousel-control-prev, .carousel-control-next {
    width: 6%;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1;
}

/* --- Footer --- */

.main-footer {
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    padding: 30px 0;
    margin-top: 40px;
}

.footer-logo {
    font-size: 20px;
    color: var(--primary-color);
}

.footer-text {
    font-size: 14px;
}
/* style.css additions */

/* --- Centered Slider Container Style --- */
.slider-wrapper {
    max-width: 80%; /* Sets the maximum width to 80% */
    margin: 0 auto; /* Centers the container horizontally */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Soft, professional shadow */
    border-radius: 12px; /* Subtle rounded corners */
    overflow: hidden; /* Ensures image corners match wrapper corners */
    background: #ffffff;
}

/* Ensure the carousel respects the rounded corners */
#heroSlider {
    border-radius: 12px;
}
/* style.css additions for Birthdays page */

.birthday-card-design {
    border: 3px solid var(--secondary-color); /* Orange border for celebration */
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background: #fffafa; /* Light pinkish background */
}

.birthday-card-design:hover {
    transform: translateY(-8px); /* Lifts the card dramatically */
    box-shadow: 0 15px 30px rgba(255,165,0,0.3) !important; /* Festive orange shadow */
}

.birthday-img-container {
    width: 100%;
    height: 500px; /* fixed height for consistent cards */
    overflow: hidden;
    border-radius: 12px;
    position: relative;
}

.birthday-img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* This is the magic property */
    object-position: center;
    border-radius: 12px;
}

.birthday-badge-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}
/* style.css additions for Birthday Animations */

/* --- Birthday Header Animation Styles --- */

.birthday-header-wrapper {
    position: relative;
    overflow: hidden; /* Ensures animations stay within bounds */
    padding: 20px 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

/* REMOVE THIS ENTIRE BLOCK FROM style.css */
/* It is based on absolute positioning which breaks mobile view */
.celebration-left, .celebration-right {
    position: absolute; /* REMOVE THIS LINE */
    top: 50%;
    transform: translateY(-50%);
    width: 20%; 
    justify-content: flex-end; 
}

.celebration-left {
    left: 0;
    padding-left: 15px;
}

.celebration-right {
    right: 0;
    justify-content: flex-start;
    padding-right: 15px;
}
/* END OF BLOCK TO REMOVE */
/* Icon Animations */
.celebration-left i, .celebration-right i {
    font-size: 2.5rem;
    color: #ffc107; /* Gold/Yellow for sparkle */
    text-shadow: 0 0 8px rgba(255,193,7,0.8);
    animation: pulse 1.5s infinite alternate;
}

.animate-bounce-left {
    animation: bounceLeft 2s infinite ease-in-out;
}
.animate-bounce-right {
    animation: bounceRight 2s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}
@keyframes bounceLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-15px); }
}
@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}

/* Fireworks Effect (CSS only) */
.fireworks-container {
    position: relative;
    width: 60px; /* Size of the sparkle area */
    height: 60px;
    display: inline-block;
}

.firework {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff0;
    box-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #f00;
    animation: fireworkSparkle 1.5s infinite ease-out forwards;
}

.firework:nth-child(2) {
    animation-delay: 0.75s;
    background: #0f0;
    box-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #00f;
}

@keyframes fireworkSparkle {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 1;
        box-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #f00;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        box-shadow: 0 0 50px #ff0, 0 0 100px #ff0, 0 0 150px #f00;
    }
}


/* Balloons Effect (CSS only) */
.balloons-container {
    position: relative;
    width: 80px; /* Size of the balloon area */
    height: 80px;
    display: inline-block;
}

.balloon {
    position: absolute;
    bottom: 0;
    width: 25px;
    height: 35px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform-origin: bottom center;
    animation: floatBalloon 4s ease-in-out infinite alternate;
}

.balloon::before { /* Balloon 'knot' */
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: inherit;
    border-radius: 50%;
    z-index: 1;
}

.balloon::after { /* Balloon 'string' */
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 15px;
    background: rgba(0,0,0,0.4);
    z-index: 0;
}

.balloon-blue {
    background: #007bff;
    left: 5%;
    animation-delay: 0s;
}

.balloon-red {
    background: #dc3545;
    right: 5%;
    animation-delay: 2s;
}

@keyframes floatBalloon {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-30px) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: translateY(0) rotate(-5deg);
        opacity: 0.8;
    }
}
/* --- Text Letter Animation (HAPPY & BIRTHDAY) --- */

.animated-word-container {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: 2px;
}

.animated-letter {
    display: inline-block;
    /* Base Animation: Bounce and Fade In */
    animation: 
        letterPop 0.5s ease-out forwards,
        letterColorChange 4s infinite alternate; 
    opacity: 0; /* Start hidden */
}

/* --- Birthday Header Animation Styles (FIXED LAYOUT) --- */

.birthday-header-wrapper {
    position: relative;
    /* Ensure the wrapper can expand to hold the letters */
    min-width: 100%; 
    overflow: hidden; 
    padding: 20px 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
}

.celebration-left, .celebration-right {
    /* Set to relative positioning so they can float and expand */
    position: relative; 
    /* Use flex to align items horizontally */
    display: flex;
    /* Allow them to grow and consume space */
    flex-grow: 1; 
    /* Prevent the letters from wrapping onto multiple lines */
    flex-wrap: nowrap; 
    /* Align items vertically */
    align-items: center; 
}

.celebration-left {
    /* Align fireworks to the right of the letters */
    justify-content: flex-end; 
    padding-left: 15px;
}

.celebration-right {
    /* Align fireworks to the left of the letters */
    justify-content: flex-start; 
    padding-right: 15px;
}

/* Fix for the letters trying to wrap */
.animated-word-container {
    /* Allows the letters to stay on one line even if the container is tight */
    white-space: nowrap; 
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: 2px;
}

/* Ensure the letter animation remains as requested (BIG then small) */
@keyframes letterPop {
    0% { 
        transform: scale(0.1) translateY(0); 
        opacity: 0; 
        color: #ffc107; 
    }
    10% {
        transform: scale(3.0) translateY(-10px); /* VERY BIG START */
        opacity: 1;
        color: #dc3545; 
    }
    40% {
        transform: scale(0.9) translateY(0); 
        opacity: 1;
        color: var(--primary-color);
    }
    90% { 
        transform: scale(1) translateY(0); /* Final small size */
        opacity: 1;
        color: var(--primary-color);
    }
}
/* All other animation CSS for shot-trail and firework-explosion remains the same */
@keyframes letterColorChange {
    0% { color: #007bff; }
    50% { color: #dc3545; }
    100% { color: #ffc107; }
}

/* --- Fireworks Shot & Star Explosion Effect --- */

/* Base container for the whole effect */
.fireworks-shot-container {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

/* Confetti */
.confetti {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    background-color: #ffcc00;
    opacity: 0.8;
    animation: fall 2.5s linear forwards;
    z-index: 9999;
}

@keyframes fall {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(350deg);
        opacity: 0;
    }
}

/* Fireworks small burst */
.firework {
    position: fixed;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ff5733, transparent);
    border-radius: 50%;
    animation: explode 0.9s ease-out forwards;
    z-index: 9999;
}

@keyframes explode {
    0% { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(3.5); opacity: 0; }
}

/* Keyframe for the ascending shot trail */
@keyframes shotAscend {
    0% { height: 0; bottom: 0; }
    90% { height: 100%; bottom: 0; }
    100% { height: 0; bottom: 50%; } /* Disappears at the point of explosion */
}

/* Keyframe for the star explosion */
@keyframes explode {
    0% { opacity: 1; transform: scale(0.1); }
    100% { opacity: 0; transform: scale(2); }
}
/* --- Text Letter Animation (HAPPY & BIRTHDAY) --- */

.animated-word-container {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: 2px;
}

.animated-letter {
    display: inline-block;
    /* Base Animation: Start big, shrink small, color shift */
    animation: 
        letterPop 1.5s ease-out forwards, /* Increased duration for dramatic effect */
        letterColorChange 4s infinite alternate; 
    opacity: 0; 
}

@keyframes letterPop {
    0% { 
        transform: scale(0.1) translateY(0); 
        opacity: 0; 
        color: #ffc107; /* Starting color flash (the 'stars' visual) */
    }
    10% {
        transform: scale(3.0) translateY(-10px); /* VERY BIG START */
        opacity: 1;
        color: #dc3545; /* Quick color change */
    }
    40% {
        transform: scale(0.9) translateY(0); /* Bounce point */
        opacity: 1;
        color: var(--primary-color);
    }
    100% { 
        transform: scale(1) translateY(0); /* Final small size */
        opacity: 1;
        color: var(--primary-color);
    }
}

@keyframes letterColorChange {
    /* Keep the subtle color change for continuous effect */
    0% { color: #007bff; }
    50% { color: #dc3545; }
    100% { color: #ffc107; }
}


/* --- Fireworks Shot & Star Explosion Effect --- */

/* Base container for the whole effect */
.fireworks-shot-container {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

/* 1. Shot Trail (The 'shot' part) */
.shot-trail {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 0;
    background: linear-gradient(to top, #ffcc00, rgba(255,255,255,0));
    animation: shotAscend 1.5s ease-out 0s 1; 
    z-index: 2;
}

/* 2. Star Explosion (The 'little stars' part) - Enhanced for better display */
.firework-explosion {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0;
    
    /* Using multiple radial shadows to create the starburst effect */
    box-shadow: 
        15px 0 3px #ffcc00, -15px 0 3px #ff9900, 
        0 15px 3px #ff6600, 0 -15px 3px #ff3300,
        10px 10px 3px #ffcc00, -10px -10px 3px #ff9900,
        10px -10px 3px #ff6600, -10px 10px 3px #ff3300;
    
    animation: explode 0.5s ease-out 1.5s 1 forwards; /* Starts after 1.5s */
    z-index: 1; /* Ensures it sits below the text/shot */
}


/* Keyframe for the ascending shot trail */
@keyframes shotAscend {
    0% { height: 0; bottom: 0; }
    90% { height: 100%; bottom: 0; }
    100% { height: 0; bottom: 50%; }
}

/* Keyframe for the star explosion */
@keyframes explode {
    0% { 
        opacity: 1; 
        transform: scale(0.1) translateX(-50%); 
    }
    100% { 
        opacity: 0; 
        transform: scale(2) translateX(-50%); /* Scatter the stars */
    }
}
/* style.css additions for Logo Photo */

.navbar-logo {
    /* Define the size for the photo */
    width: 70px; 
    height: 70px;
    /* Ensure the photo is cropped nicely */
    object-fit: cover; 
    /* Make the photo circular */
    border-radius: 50%;
    /* Subtle border for separation */
    border: 2px solid var(--primary-color); 
}

/* Adjust the logo-text to align well next to the photo */
.logo-text {
    /* Keep existing styles: */
    font-size: 24px;
    font-weight: 900;
    color: var(--primary-color);
    letter-spacing: -1px;
    text-transform: uppercase;
    transition: color 0.3s;
    /* Add vertical centering if needed, though d-flex in HTML should handle it */
    line-height: 1; 
}

/* Ensure the navbar-brand container is aligned (we added d-flex align-items-center in HTML) */
.navbar-brand {
    padding: 0; /* Remove default padding that can cause alignment issues */
}
.photo-box {
    width: 250px;        /* तुम्हाला हवा तितका छोटा आकार द्या */
    height: 250px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.photo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* फोटो पूर्ण दिसेल, कट होणार नाही */
}