/**
 * Modern UI enhancement layer — loaded after style.css, additive only.
 *
 * Deliberately re-styles EXISTING selectors (.features, .divider-heading,
 * .accordion-item, .contact-card, .btn-custom, etc.) instead of introducing
 * new markup/classes across every page. That means this one file lifts
 * index.php, terms-of-use.php, privacy-policy.php and refund-policy.php at
 * once (they all share header.php/footer.php), with zero risk to the
 * Bootstrap JS (accordion, navbar) or the contact form, since none of their
 * functional markup/attributes are touched — only paint.
 */

/* ---- Section eyebrow labels ("Our Offerings", "FAQ", "About Us") ---- */
.section h5 {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: .78rem !important;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(248, 143, 38, .12);
    color: #B85C0A !important;
}
.divider-subheading {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: .78rem !important;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff !important;
}

/* ---- Divider / section banners ("Our Offerings", "FAQ") — depth ---- */
.bg-primary.section-divider-padding {
    background: linear-gradient(135deg, #F88F26 0%, #EF634C 100%) !important;
    position: relative;
    overflow: hidden;
}
.bg-primary.section-divider-padding::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: #fff;
    opacity: .08;
    top: -140px;
    right: -80px;
    filter: blur(4px);
    pointer-events: none;
}
.divider-heading {
    font-weight: 800 !important;
    letter-spacing: -.5px;
}

/* ---- "Our Offerings" cards — elevated cards instead of bare text ---- */
.features {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(8, 17, 88, .08);
    border: 1px solid rgba(8, 17, 88, .06);
    transition: transform .3s ease, box-shadow .3s ease;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.features:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(239, 99, 76, .18);
}
/* Soft gradient panels instead of flat white — matching the split-hero
   card language (the reference the "make it look like this everywhere"
   request pointed at), each tinted to match its own icon badge's accent
   color rather than one repeated palette. */
.features:nth-of-type(6n+1) { background: linear-gradient(160deg, #F4F5FD 0%, #FFFFFF 100%); }
.features:nth-of-type(6n+2) { background: linear-gradient(160deg, #FFF3EE 0%, #FFFFFF 100%); }
.features:nth-of-type(6n+3) { background: linear-gradient(160deg, #FFF8E8 0%, #FFFFFF 100%); }
.features:nth-of-type(6n+4) { background: linear-gradient(160deg, #F5F0FE 0%, #FFFFFF 100%); }
.features:nth-of-type(6n+5) { background: linear-gradient(160deg, #EDFBF6 0%, #FFFFFF 100%); }
.features:nth-of-type(6n+6) { background: linear-gradient(160deg, #EEF8FE 0%, #FFFFFF 100%); }
.features h4 { font-weight: 700; margin: 0 0 10px; }
.features p { color: #5E6282; flex-grow: 1; margin-bottom: 18px; }
.features .btn-custom { align-self: center; }

/* Circular icon badge wrapping each offering's illustrated icon — these
   SVGs are pale multi-tone gradients meant for light backgrounds, so a
   white badge + soft glow reads correctly (a solid dark/brand-color fill
   behind them would clash). */
.mu-icon-badge {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 10px 26px rgba(8, 17, 88, .1);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.features:hover .mu-icon-badge { transform: scale(1.08) rotate(-3deg); }
.mu-icon-badge svg { width: 76px; height: 76px; }
.mu-icon-badge .icon { height: 46px; margin: 0; }

/* ---- Hero: eyebrow badge, CTA row, trust-stat chips, framed image ---- */
.mu-hero-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(248, 143, 38, .14);
    color: #B85C0A;
    margin-bottom: 16px;
}
.mu-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.mu-hero-stats { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.mu-hero-stat { display: flex; flex-direction: column; }
.mu-hero-stat strong { font-size: 1.3rem; color: #081158; font-weight: 800; }
.mu-hero-stat span { font-size: .78rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.mu-hero-img-wrap { position: relative; display: inline-block; }
.mu-hero-img-wrap::before {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(248, 143, 38, .3), transparent 70%);
    top: 12%;
    right: 5%;
    z-index: 0;
    filter: blur(16px);
    pointer-events: none;
}
.mu-hero-img-wrap img { position: relative; z-index: 1; filter: drop-shadow(0 20px 40px rgba(8, 17, 88, .18)); }

@media (max-width: 767px) {
    .mu-hero-stats { justify-content: center; text-align: center; gap: 24px; }
    .mu-hero-ctas { justify-content: center; }
}

/* ---- CTA links inside cards → pill button with motion ---- */
.btn-custom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: none;
    background: rgba(248, 143, 38, .1);
    color: #081158;
    padding: 8px 16px;
    border-radius: 999px;
    transition: background .2s, transform .2s, color .2s;
}
.btn-custom:hover { background: #081158; color: #fff; transform: translateX(2px); }
.btn-custom img { transition: transform .2s; }
.btn-custom:hover img { transform: translateX(3px); }

/* ---- FAQ accordion — card treatment ----
   6%-opacity shadow with no border at all read as flat/plain against the
   page's white background (confirmed via screenshot) — same
   too-subtle-to-see mistake fixed on the quick-contact cards. Given a
   visible border plus a stronger shadow so each row actually reads as
   its own card, matching the rest of the page's card language instead
   of standing out as the flattest section on it. */
.accordion-item {
    border: 1px solid rgba(8, 17, 88, .08) !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(8, 17, 88, .1);
    margin-bottom: 12px;
}
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) {
    background: rgba(248, 143, 38, .08) !important;
    color: #081158 !important;
}

/* ---- Contact section v2 — restructured from a single full-height coral
   sidebar (contact info + map crammed into one column) into: a horizontal
   quick-contact strip (matching the "Our Offerings" card language) above
   a cleaner form+map two-column layout. Old .contact-card/.mu-contact-row
   rules removed with the markup that used them. ---- */
/* Was white-on-white: shadow/border alone at 5-7% opacity don't read as a
   box against a page that's already pure white (same mistake fixed on
   the .in contact page). .mu-quick-contact-wrap gives the row a light
   gray band so the white cards have something to contrast against. */
.mu-quick-contact-wrap {
    background: #F7F6FA;
    border-radius: 24px;
    padding: 32px 24px;
}
.mu-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    padding: 28px 20px;
    height: 100%;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 28px rgba(8, 17, 88, .1);
    border: 1px solid rgba(8, 17, 88, .1);
    transition: transform .25s ease, box-shadow .25s ease;
}
.mu-quick-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(239, 99, 76, .22);
    border-color: rgba(239, 99, 76, .3);
    color: inherit;
}
.mu-quick-card-static { cursor: default; }
.mu-quick-card-static:hover { transform: none; box-shadow: 0 10px 28px rgba(8, 17, 88, .1); border-color: rgba(8, 17, 88, .1); }
@media (max-width: 576px) {
    .mu-quick-contact-wrap { padding: 20px 14px; border-radius: 18px; }
}
/* phone.svg/email.svg/location.svg were solid white-fill icons — first
   tried a near-white tint background (invisible: white-on-white), then a
   solid orange-coral gradient background (still hard to make out at a
   glance — reported as barely legible). Rather than keep tuning the
   badge color around a white icon, recolored the icons themselves to a
   solid coral fill (see assets/icons/{phone,email,location}.svg) and put
   them on a light peach circle — a solid #fff badge would've repeated
   the exact white-on-white mistake, since .mu-quick-card itself is
   white. */
.mu-quick-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FDECDF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.mu-quick-icon-badge img { width: 22px; height: 22px; }
.mu-quick-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #B85C0A;
    margin-bottom: 6px;
}
.mu-quick-value { display: block; font-weight: 600; color: #081158; line-height: 1.5; }

.mu-contact-grid { align-items: stretch; }
.mu-map-card, .mu-form-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(8, 17, 88, .1);
    height: 100%;
}
.mu-map-card { overflow: hidden; min-height: 480px; }
.mu-form-card { padding: 32px; }

/* ---- FAQ accordion — single column (was two independent parallel
   .col-md-6 groups; adjacent groups had unrelated question lengths, so
   rows visibly staggered out of alignment whenever one side wrapped to
   two lines and the other didn't). Single column removes the cross-column
   comparison entirely — every card's height is now independent. ---- */
.mu-faq-col .accordion { margin-bottom: 4px; }
.accordion-item {
    transition: transform .2s ease, box-shadow .2s ease;
}
.accordion-item:hover {
    transform: translateX(3px);
    box-shadow: 0 12px 28px rgba(239, 99, 76, .14);
}

/* ---- Send Message button — the base .btn-primary box-shadow (defined in
   style.css) is a light blue tint left over from a different button
   somewhere else in this file; visibly mismatched against an orange
   button. Warm-toned to match. ---- */
.btn-primary { box-shadow: 0 10px 20px rgba(239, 99, 76, .22) !important; }

/* ---- Buttons — consistent pill + lift, site-wide ---- */
.btn-primary, .btn-primary-faded, .btn-outline-primary {
    border-radius: 12px !important;
    transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover, .btn-primary-faded:hover, .btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(239, 99, 76, .3);
}
/* No --bs-primary token is defined anywhere in this codebase, so every
   unstyled Bootstrap default (focus rings, form-control focus glow) falls
   back to Bootstrap's blue #0d6efd unless explicitly neutralized here —
   same root cause as the .btn-outline-primary text color gap above. */
.btn:focus, .btn-primary:focus, .btn-outline-primary:focus, .form-control:focus {
    box-shadow: 0 0 0 4px rgba(239, 99, 76, .18) !important;
    border-color: #EF634C !important;
}

/* ---- Legal pages (terms/privacy/refund): gradient banner, matching the
   same pattern already proven on selinapublishers.in's store legal pages
   — this replaces an earlier, much lighter underline-only treatment that
   had fallen behind the rest of the site's visual bar. ---- */
.mu-page-banner {
    background: linear-gradient(135deg, #081158 0%, #2A1B6B 60%, #4C2A8F 100%);
    border-radius: 24px;
    padding: 48px 40px;
    margin: 24px 0 36px;
    position: relative;
    overflow: hidden;
}
.mu-page-banner::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #8B5CF6;
    opacity: .35;
    filter: blur(60px);
    top: -100px;
    right: -60px;
    pointer-events: none;
}
.mu-page-banner .mu-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    margin-bottom: 14px;
}
.mu-page-banner h2 {
    position: relative;
    z-index: 1;
    color: #fff !important;
    font-weight: 800;
    font-size: 2.1rem !important;
    margin: 0 !important;
    letter-spacing: -.5px;
}
.pointers { line-height: 1.8; color: #3d4359; }

@media (max-width: 576px) {
    .features { padding: 24px 20px; }
    .bg-primary.section-divider-padding::before { display: none; }
    .mu-page-banner { padding: 32px 24px; border-radius: 18px; }
    .mu-page-banner h2 { font-size: 1.5rem !important; }
}

/* Navbar sat flush against the very top of the viewport with zero
   breathing room — logo/nav links touched y=0. Also made sticky with a
   scroll-triggered shadow (.mu-navbar-scrolled, toggled in js.html/
   footer.php's inline script) — a static nav that scrolls away is one of
   the more dated-feeling defaults on an otherwise modern-looking page. */
.navbar-container {
    padding-top: 20px;
    padding-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-radius: 0 0 20px 20px;
    transition: box-shadow .25s ease, padding .25s ease;
}
.navbar-container.mu-navbar-scrolled {
    padding-top: 12px;
    padding-bottom: 8px;
    box-shadow: 0 8px 30px rgba(8, 17, 88, .1);
}

/* Nav links had color but no :hover/:focus rule anywhere, so they fell
   back to Bootstrap's near-invisible default (a slight opacity shift on
   the same navy) — hovering the menu looked inert. Ties into the same
   orange used for .active so the two states read as one system. */
.navbar-light .navbar-nav .nav-link {
    transition: color .2s ease;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: #F88F26;
}

/* Hero had no padding of its own — .hero-section is a bare Bootstrap
   .container/.section with no vertical rhythm, so it sat flush under the
   navbar and ran straight into the "Our Offerings" divider band below.
   The divider itself was also the one section still on its pre-redesign
   30px padding while every other section on the page uses 80px, making
   it read as a cramped seam rather than a deliberate accent band. */
.hero-section {
    padding: 8px 0 76px;
}
.section-divider-padding {
    padding: 56px 20px;
}

/* The actual source of the big gap above the hero copy: .home-main-section
   is a fixed height:680px flex row with align-items:center, so the text
   column (much shorter than the 680px box) was centered inside it —
   pushing it down by roughly half the leftover space no matter how the
   hero's own padding was tuned. Letting the row size to its content
   collapses that dead space. */
.home-main-section {
    height: auto;
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .hero-section { padding: 8px 0 48px; }
    .section-divider-padding { padding: 40px 16px; }
}

/* About Us ("Who We Are") had two stacked top paddings fighting each
   other — the outer .home-about-us carries Bootstrap's .pt-5 (80px) AND
   the inner wrapper carries .section-padding's own 80px top, so the
   heading sat 160px below the divider above it. The same inner wrapper's
   bottom padding is zeroed out via an inline style (originally so the FAQ
   banner's overlapping-desktop negative margin could pull it up flush),
   which left no breathing room at all after the last "About" paragraph.
   Collapse the double top gap to one 80px gap, and give the bottom back
   some room while still leaving the banner's -75px overlap mostly intact. */
#about-us.pt-5 {
    padding-top: 0 !important;
}
/* 48px wasn't actually enough here: the FAQ banner right after this
   section pulls itself up by -75px (.overlapping-desktop, a deliberate
   layered-banner effect), so the real net clearance was 48 - 75 = -27px
   — the banner's top edge sits *above* where this text ends, which is
   the cramped/colliding look reported via screenshot. Bumped well past
   75px so there's genuine visible air even after that pull. */
#about-us .section-padding {
    padding-bottom: 140px !important;
}

@media (max-width: 767px) {
    #about-us .section-padding { padding-bottom: 28px !important; }
}

/* Standalone eyebrow pill for light backgrounds (the one inside
   .mu-page-banner is a separate white-on-dark variant, scoped there). */
.mu-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(248, 143, 38, .14);
    color: #B85C0A;
}

/* About Us — was three bare bullet points in a <ul>; each point now reads
   as its own row with an icon accent instead of a wall of text. */
.mu-about-point {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}
.mu-about-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(8, 17, 88, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.mu-about-point h4 { color: #081158; font-weight: 700; margin-bottom: 6px; }
.mu-about-point p { color: #5E6282; margin: 0; }
.mu-about-img-wrap { position: relative; display: inline-block; }
.mu-about-img-wrap::before {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(248, 143, 38, .28), transparent 70%);
    top: 15%;
    left: 15%;
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
}
.mu-about-img-wrap img { position: relative; z-index: 1; filter: drop-shadow(0 20px 36px rgba(8, 17, 88, .18)); }

@media (max-width: 576px) {
    .mu-about-point { gap: 12px; margin-bottom: 20px; }
    .mu-about-icon { width: 40px; height: 40px; font-size: 1.15rem; }
}

/* ---- Footer — was a bare white strip with plain unstyled links and no
   hover state at all, the flattest, most neglected part of the page
   despite being the last thing every visitor sees. Given its own tinted,
   rounded-top band (kept light — not dark navy — since icon-logo is a
   dark-on-transparent mark that would vanish on a dark background) with
   real link hover motion, matching the interaction language already used
   everywhere else on the page (.btn-custom, .mu-quick-card, etc). ---- */
footer {
    background: linear-gradient(180deg, #FAF7F4 0%, #FFF9F3 100%);
    border-radius: 40px 40px 0 0;
    padding-top: 56px;
}
@media (max-width: 576px) {
    footer { padding-top: 36px; border-radius: 28px 28px 0 0; }
}
footer h5.text-primary {
    font-weight: 800 !important;
    letter-spacing: -.3px;
}
footer h6 {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #B85C0A;
}
footer li a {
    display: inline-block;
    transition: color .2s ease, transform .2s ease;
}
footer li a:hover {
    color: #EF634C;
    transform: translateX(3px);
}
.copyright.bg-primary {
    background: linear-gradient(135deg, #F88F26 0%, #EF634C 100%) !important;
}