/* August 15 Indian Independence Day Theme */

/* Apply to the home page specifically */
body {
    background-color: #0b1120 !important;
    /* Dark gradient overlay to keep text readable + the flag image */
    background-image: linear-gradient(135deg, rgba(11, 17, 32, 0.6) 0%, rgba(11, 17, 32, 0.8) 100%), url('flag-bg.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
}

/* Make the brand heading look like the Indian Flag */
.brand-heading {
    background: linear-gradient(90deg, #FF9933 0%, #FFFFFF 50%, #138808 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flagWave 3s ease-in-out infinite;
}

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

/* Subtitle update */
.subtitle {
    color: #FF9933 !important;
    text-shadow: 0 0 5px rgba(255, 153, 51, 0.3);
}

/* Button theming */
.hero .btn-primary {
    background: linear-gradient(135deg, #FF9933, #138808) !important;
    border-color: #138808 !important;
    color: white !important;
}
.hero .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(19, 136, 8, 0.4) !important;
}

/* Header border theming */
.site-header {
    border-bottom: 2px solid #FF9933 !important;
}

.welcome-word {
    background: rgba(255, 153, 51, 0.15) !important;
    color: #FF9933 !important;
    border: 1px solid rgba(255, 153, 51, 0.5);
}

/* Decorate the top loader */
.transparent-top-loader {
    background: linear-gradient(90deg, #FF9933, #FFFFFF, #138808) !important;
}