/* ====================================================================
   INDEPENDENCE DAY THEME (Frontend) — Rich India
   Completely isolated. Toggle via INDEPENDENCE_DAY_THEME_ENABLED in .env
   Safe to delete anytime — remove this file, the @if block in
   css.blade.php, and (if present) the @if block + JS file wired in
   js.blade.php. Nothing else is affected.
   ==================================================================== */

/* ====================================================================
   CONFETTI CELEBRATION — a one-time tricolor confetti burst on page
   load (injected by independence-day-theme.js). Plays once per browser
   session, then removes itself.
   ==================================================================== */
.iday-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

/* ====================================================================
   TOP HEADER STRIP — a small, static, dismissible "desi" Independence
   Day banner above the main navigation (injected by
   independence-day-theme.js). A smooth flag gradient (saffron → white
   → green), with navy text so it stays readable across every part of
   the gradient, including the white midpoint.
   ==================================================================== */
.iday-top-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: linear-gradient(180deg, #FF9933 0%, #FFFFFF 50%, #138808 100%);
    color: #000080;
    padding: 10px 40px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: center;
    z-index: 9999;
}

.iday-top-bar__chakra {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #000080;
    background: repeating-conic-gradient(currentColor 0deg 7.5deg, transparent 7.5deg 15deg);
    box-shadow: 0 0 0 1.3px currentColor inset;
    position: relative;
}

.iday-top-bar__chakra::after {
    content: '';
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: currentColor;
}

.iday-top-bar__close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    opacity: 0.75;
    background: rgba(0,0,128,0.12);
    color: #000080;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.iday-top-bar__close:hover {
    opacity: 1;
    background: rgba(0,0,128,0.22);
}

@media only screen and (max-width: 767px) {
    .iday-top-bar {
        font-size: 12px;
        padding: 8px 34px;
        gap: 6px;
    }

    .iday-top-bar__chakra {
        width: 13px;
        height: 13px;
    }
}

/* ====================================================================
   BUTTONS — flat tricolor "flag" treatment across all site buttons.
   ==================================================================== */

.thm-btn,
.default-btn,
.banner-btn,
.about-btn,
.job-search-btn,
.job-view-all-btn,
.btn-view-job,
.btn-apply-filter,
.richind-btn {
    position: relative;
    background: linear-gradient(180deg, #FF9933 0%, #FFFFFF 50%, #138808 100%) !important;
    color: #333 !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 14px rgba(255,153,51,0.18), 0 4px 14px rgba(19,136,8,0.14), inset 0 1px 0 rgba(255,255,255,0.6) !important;
    text-shadow: none !important;
    transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1), transform 0.3s cubic-bezier(.4,0,.2,1), border-color 0.3s ease, color 0.2s ease, background 0.3s ease !important;
}

/* Neutralise the site's default black ripple-fill (::before) so it
   doesn't fight with the tricolor look on hover */
.thm-btn::before,
.default-btn::before,
.banner-btn::before,
.about-btn::before,
.job-search-btn::before,
.job-view-all-btn::before,
.btn-view-job::before,
.btn-apply-filter::before,
.richind-btn::before {
    content: none !important;
}

/* Soft static gloss highlight across the top half — no animation */
.thm-btn::after,
.default-btn::after,
.banner-btn::after,
.about-btn::after,
.job-search-btn::after,
.job-view-all-btn::after,
.btn-view-job::after,
.btn-apply-filter::after,
.richind-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}

.thm-btn i,
.default-btn i,
.job-search-btn i,
.job-view-all-btn i,
.btn-view-job i {
    color: #333 !important;
    position: relative;
    z-index: 1;
}

/* ====================================================================
   LOGO — recoloured to the flag's tricolor using a CSS mask, so the
   original logo.png file itself is never touched. Fixed-size boxes so
   the logo can never collapse/disappear while the image loads, and the
   whole effect is gated behind @supports so browsers without mask
   support simply keep showing the normal logo instead of a blank space.
   Header logo (main-menu__logo / logo-box) stays the plain original —
   only the footer logo gets the tricolor treatment.
   ==================================================================== */
.site-footer__logo a {
    position: relative;
    display: inline-block;
    width: 167px;
    height: 55px;
}

@supports (mask-image: url(x.png)) or (-webkit-mask-image: url(x.png)) {
    .site-footer__logo img {
        opacity: 0 !important;
    }

    .site-footer__logo a::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, #FF9933 0%, #FF9933 33%, #FFFFFF 33%, #FFFFFF 67%, #138808 67%, #138808 100%);
        -webkit-mask-image: url('../images/logo.png');
        mask-image: url('../images/logo.png');
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        pointer-events: none;
        /* navy outline (all 8 directions) plus a soft ambient shadow so the
           flag's white band stays clearly visible on the white header /
           footer background instead of disappearing into it */
        filter:
            drop-shadow(1px 0 0 rgba(0,0,128,0.65))
            drop-shadow(-1px 0 0 rgba(0,0,128,0.65))
            drop-shadow(0 1px 0 rgba(0,0,128,0.65))
            drop-shadow(0 -1px 0 rgba(0,0,128,0.65))
            drop-shadow(1px 1px 0 rgba(0,0,128,0.65))
            drop-shadow(-1px 1px 0 rgba(0,0,128,0.65))
            drop-shadow(1px -1px 0 rgba(0,0,128,0.65))
            drop-shadow(-1px -1px 0 rgba(0,0,128,0.65))
            drop-shadow(0 3px 6px rgba(0,0,0,0.22));
    }
}

/* ====================================================================
   HOMEPAGE ACCENTS — simple, static tricolor touches (top → bottom,
   same order as the flag: saffron / white / green). No animation.
   ==================================================================== */

/* thin flag strip under the hero slider */
.main-slider {
    position: relative;
}

.main-slider::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(180deg, #FF9933 0%, #FF9933 33%, #FFFFFF 33%, #FFFFFF 67%, #138808 67%, #138808 100%);
    z-index: 2;
}

/* floating tricolor Indian flags drifting in the hero slider (injected
   by independence-day-theme.js), each on its own gentle drift + rotate
   loop so they don't move in sync */
.iday-hero-flag {
    position: absolute;
    width: 50px;
    height: auto;
    z-index: 2;
    opacity: 0.85;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12));
}

.iday-hero-flag-1 {
    top: 6%;
    left: 6%;
    animation: idayFlagDrift1 9s ease-in-out infinite;
}

.iday-hero-flag-2 {
    top: 14%;
    left: 46%;
    width: 38px;
    animation: idayFlagDrift2 11s ease-in-out infinite;
}

.iday-hero-flag-3 {
    top: 8%;
    right: 8%;
    width: 42px;
    animation: idayFlagDrift3 8s ease-in-out infinite;
}

.iday-hero-flag-4 {
    top: 30%;
    left: 20%;
    width: 32px;
    opacity: 0.6;
    animation: idayFlagDrift4 13s ease-in-out infinite;
}

@keyframes idayFlagDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(-6deg); }
    50% { transform: translate(14px, 10px) rotate(4deg); }
}

@keyframes idayFlagDrift2 {
    0%, 100% { transform: translate(0, 0) rotate(5deg); }
    50% { transform: translate(-12px, 14px) rotate(-5deg); }
}

@keyframes idayFlagDrift3 {
    0%, 100% { transform: translate(0, 0) rotate(-4deg); }
    50% { transform: translate(-16px, 8px) rotate(6deg); }
}

@keyframes idayFlagDrift4 {
    0%, 100% { transform: translate(0, 0) rotate(8deg); }
    50% { transform: translate(10px, -10px) rotate(-6deg); }
}

@media only screen and (max-width: 992px) {
    .iday-hero-flag-2,
    .iday-hero-flag-4 {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .iday-hero-flag-3 {
        display: none;
    }

    .iday-hero-flag-1 {
        top: 2px;
        left: 10px;
        width: 36px;
        opacity: 0.9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iday-hero-flag {
        animation: none !important;
    }
}

/* thin flag strip on top of the footer */
.site-footer::before,
footer::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(180deg, #FF9933 0%, #FF9933 33%, #FFFFFF 33%, #FFFFFF 67%, #138808 67%, #138808 100%);
}

/* section title accent dot + tagline colour */
.section-title__tagline-shape {
    background-color: #FF9933 !important;
}

.section-title__tagline,
.section-title-two__tagline {
    color: #138808 !important;
}

/* section title highlight word — flag-colour gradient text (the base
   site already renders this span as gradient text via
   background-clip:text, so only the gradient colours need overriding;
   navy stands in for the flag's white band to stay readable on a
   white page). Must use background-image (longhand), NOT the
   background shorthand — the shorthand silently resets background-clip
   back to border-box, which turns the clipped gradient TEXT into a
   solid gradient BLOCK. */
.section-title__title span {
    background-image: linear-gradient(90deg, #FF9933 0%, #138808 50%, #000080 100%) !important;
}

/* mini flag strip on top of every course / plan card */
.courses-one__single::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, #FF9933 0%, #FF9933 33%, #FFFFFF 33%, #FFFFFF 67%, #138808 67%, #138808 100%);
    z-index: 3;
}

/* ====================================================================
   INNER-PAGE ACCENTS — the "page-header" banner + breadcrumb sit at the
   top of every other page (About, Contact, Plan, Course, Blog, Jobs,
   Checkout, Sign in, policy pages, etc.), so this brings the same
   tricolor language to the rest of the site, not just the homepage.
   ==================================================================== */

/* mini flag strip along the bottom of the page-header banner */
.page-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(180deg, #FF9933 0%, #FF9933 33%, #FFFFFF 33%, #FFFFFF 67%, #138808 67%, #138808 100%);
    z-index: 2;
}

/* breadcrumb accent colours */
.thm-breadcrumb li a,
.thm-breadcrumb li span {
    color: #138808 !important;
}

.thm-breadcrumb li:hover a {
    color: #000080 !important;
}

/* ====================================================================
   SITE-WIDE CELEBRATION TOUCHES — small persistent details that carry
   the flag's colours across every page, all the time, without adding
   any extra clutter.
   ==================================================================== */

/* flag-coloured scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FF9933 0%, #FFFFFF 50%, #138808 100%);
    border-radius: 6px;
    border: 1px solid rgba(0,0,128,0.15);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e8862b 0%, #f3f3f3 50%, #0f6f06 100%);
}

html {
    scrollbar-color: #FF9933 #f1f1f1;
    scrollbar-width: thin;
}

/* flag-coloured text selection */
::selection {
    background: #FF9933;
    color: #000080;
}

::-moz-selection {
    background: #FF9933;
    color: #000080;
}

/* soft tricolor glow behind the stats / counter section */
.counter-one {
    position: relative;
}

.counter-one::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,153,51,0.14) 0%, rgba(255,255,255,0.03) 50%, rgba(19,136,8,0.14) 100%);
}

/* thin flag strip along the top of the mobile menu drawer */
.mobile-nav__content {
    position: relative;
}

.mobile-nav__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(180deg, #FF9933 0%, #FF9933 33%, #FFFFFF 33%, #FFFFFF 67%, #138808 67%, #138808 100%);
    z-index: 5;
}

/* footer social icons recoloured to the flag (green base, saffron hover fill) */
.site-footer__social-box-inner a {
    background-color: #138808 !important;
}

.site-footer__social-box-inner a::before {
    background-color: #FF9933 !important;
}