/*
 * sections.css - header band and "Online Services" section.
 * Devotional palette: maroon, saffron, gold, cream. Motion is slow and subtle.
 */

/* =========================================================
   HEADER
   ========================================================= */

/* top info bar (desktop) */
.header-topbar { display: none; }
.rd-navbar-static .header-topbar {
    display: block;
    background: linear-gradient(90deg, #4a0710 0%, #8f0b21 50%, #4a0710 100%);
    color: #f8dc95;
    font: 500 13px/36px "Noto Sans Devanagari", Poppins, sans-serif;
    letter-spacing: .02em;
}
.header-topbar-inner {
    max-width: 1170px; margin: 0 auto; padding: 0 150px 0 5px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topbar-greeting { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-greeting .nk-icon { font-size: 18px; color: #f3d58a; }
.topbar-links { display: inline-flex; gap: 22px; white-space: nowrap; }
.topbar-links a { color: rgba(255, 255, 255, .9); transition: color .2s ease; }
.topbar-links a:hover { color: #f3d58a; }
.topbar-links .fa { color: #f3d58a; margin-right: 4px; }

/* language button sits inside the top bar on desktop */
.rd-navbar-static .lang-switch { top: 4px; right: 18px; padding: 2px 12px 2px 2px; font-size: 13px; box-shadow: none; border-color: rgba(243, 213, 138, .7); }
.rd-navbar-static .lang-switch-icon { width: 24px; height: 24px; font-size: 9px; }

/* logo band: warm cream with soft golden halos behind the two deity images */
.rd-navbar-static .rd-navbar-aside-outer {
    position: relative;
    background:
        radial-gradient(circle 130px at calc(50% - 432px) 62%, rgba(255, 190, 80, .55), rgba(255, 190, 80, 0) 72%),
        radial-gradient(circle 130px at calc(50% + 432px) 62%, rgba(255, 190, 80, .55), rgba(255, 190, 80, 0) 72%),
        radial-gradient(ellipse 520px 120px at 50% 58%, rgba(255, 228, 180, .55), rgba(255, 228, 180, 0) 70%),
        linear-gradient(180deg, #fffdf8 0%, #fff4e2 100%);
}
.rd-navbar-static .rd-navbar-aside-outer::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, rgba(217,164,65,0) 0%, #d9a441 18%, #f6dc96 50%, #d9a441 82%, rgba(217,164,65,0) 100%);
}
.rd-navbar-static .rd-navbar-aside { padding-top: 10px; padding-bottom: 14px; }
/* white background of the logo JPG melts into the band */
.rd-navbar .logo { mix-blend-mode: multiply; }
.rd-navbar-static .logo-link { display: inline-block; transition: transform .6s cubic-bezier(.2,.65,.3,1); }
.rd-navbar-static .logo-link:hover { transform: scale(1.015); }

/* mobile / tablet fixed bar */
.rd-navbar-fixed .rd-navbar-panel {
    background: linear-gradient(180deg, #fffdf8 0%, #fff1db 100%);
    border-bottom: 2px solid #d9a441;
}

/* =========================================================
   ONLINE SERVICES
   ========================================================= */
.services-section {
    position: relative;
    padding: 84px 0 92px;
    color: #3a2a1f;
    overflow: hidden;
    /* ivory marble with soft saffron light, like a temple courtyard */
    background:
        radial-gradient(ellipse 60% 55% at 78% 45%, rgba(255, 196, 102, .30), rgba(255, 196, 102, 0) 70%),
        radial-gradient(ellipse 45% 40% at 12% 18%, rgba(240, 150, 60, .14), rgba(240, 150, 60, 0) 70%),
        radial-gradient(ellipse 50% 40% at 30% 100%, rgba(217, 164, 65, .14), rgba(217, 164, 65, 0) 70%),
        linear-gradient(180deg, #fffcf5 0%, #fdf3e1 55%, #fbecd2 100%);
}
/* thin stripe in the five colours of the Jain flag (Panch Parmeshthi) */
.services-section::before, .services-section::after {
    content: ''; position: absolute; left: 0; right: 0; height: 6px; z-index: 1;
    background: linear-gradient(90deg, #d7191f 0 20%, #f4c20d 20% 40%, #ffffff 40% 60%, #2e9e47 60% 80%, #1d3f8f 80% 100%);
    box-shadow: 0 0 0 1px rgba(160, 110, 30, .18);
}
.services-section::before { top: 0; }
.services-section::after { bottom: 0; }
.services-section > .container { position: relative; z-index: 1; }

/* faint lotus mandalas turning very slowly */
.services-mandala {
    position: absolute; z-index: 0; pointer-events: none;
    background: url('../images/lotus-mandala.svg') center / contain no-repeat;
    animation: nkSpin 240s linear infinite;
}
.services-mandala-a { width: 560px; height: 560px; left: -200px; top: -180px; opacity: .16; }
.services-mandala-b { width: 720px; height: 720px; right: -170px; top: 50%; margin-top: -360px; opacity: .2; animation-direction: reverse; }
@keyframes nkSpin { to { transform: rotate(360deg); } }

.services-eyebrow {
    display: inline-block; margin: 0 0 6px; padding: 3px 14px; border-radius: 999px;
    border: 1px solid rgba(217, 164, 65, .6); background: rgba(255, 255, 255, .6); color: #9a6b1f;
    font: 500 14px/1.5 "Noto Sans Devanagari", Poppins, sans-serif; letter-spacing: .06em;
}
.lang-en .services-eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: .14em; }
.services-title { margin: 6px 0 0; color: #8f0b21; font: 600 clamp(28px, 3.4vw, 42px)/1.2 "Noto Sans Devanagari", Poppins, sans-serif; text-transform: none; letter-spacing: .01em; }
.services-row { margin-top: 18px; row-gap: 48px; }
.services-grid { row-gap: 26px; }

.service-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    padding: 30px 24px 24px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(180deg, #fffdf8 0%, #fff5e6 100%);
    border: 1px solid rgba(217, 164, 65, .45);
    box-shadow: 0 10px 28px rgba(120, 60, 0, .12);
    color: #3a2a1f !important; text-align: left;
    transition: transform .45s cubic-bezier(.2,.65,.3,1), box-shadow .45s ease;
}
.service-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, #f0a500, #e0701b, #c8102e);
}
.service-card:hover, .service-card:focus-visible { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(120, 60, 0, .2); }
.service-number {
    position: absolute; top: 12px; right: 18px;
    font: 700 46px/1 "Roboto Condensed", sans-serif; color: rgba(217, 164, 65, .28);
    transition: color .4s ease;
}
.service-card:hover .service-number { color: rgba(217, 164, 65, .55); }
.service-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%;
    font-size: 32px; color: #c8102e;
    background: radial-gradient(circle at 30% 30%, #ffffff, #fde3bd);
    box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .5), 0 6px 14px rgba(200, 16, 46, .12);
    transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.2,.65,.3,1);
}
.service-card:hover .service-icon { color: #fff; background: linear-gradient(135deg, #e0701b, #c8102e); transform: scale(1.06); }
.service-title { display: block; margin-bottom: 8px; color: #8f0b21; font: 600 20px/1.3 "Noto Sans Devanagari", Poppins, sans-serif; }
.service-text { display: block; flex: 1 1 auto; color: #5a4a3e; font-size: 14.5px; line-height: 1.7; }
.service-cta {
    align-self: flex-start; margin-top: 18px; padding: 8px 18px; border-radius: 999px;
    background: linear-gradient(135deg, #e0701b, #c8102e); color: #fff;
    font: 500 14px/1.3 "Noto Sans Devanagari", Poppins, sans-serif;
    box-shadow: 0 6px 14px rgba(200, 16, 46, .25);
}
.service-cta span { display: inline-block; margin-left: 4px; transition: transform .3s ease; }
.service-card:hover .service-cta span { transform: translateX(4px); }
.service-cta-soon { background: transparent; color: #9a6b1f; border: 1px dashed #d9a441; box-shadow: none; }

/* temple-arch picture frame */
.services-figure { position: relative; margin: 0; text-align: center; }
.services-figure::before {
    content: ''; position: absolute; left: 50%; top: 46%; width: 420px; height: 420px; transform: translate(-50%, -50%);
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 90, .45), rgba(255, 200, 90, 0) 68%);
    animation: nkHalo 7s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes nkHalo { from { opacity: .45; } to { opacity: .9; } }
.arch-frame {
    position: relative; max-width: 420px; margin: 0 auto; padding: 10px;
    border-radius: 220px 220px 20px 20px;
    background: linear-gradient(180deg, #fbe7ad 0%, #d9a441 45%, #a46a12 100%);
    box-shadow: 0 0 0 7px rgba(217, 164, 65, .16), 0 24px 50px rgba(120, 60, 0, .25);
}
.arch-frame img { display: block; width: 100%; height: 440px; object-fit: cover; border-radius: 210px 210px 12px 12px; }
.services-figure figcaption {
    position: relative; margin-top: 18px; color: #8f0b21;
    font: 500 18px/1.4 "Noto Sans Devanagari", Poppins, sans-serif; letter-spacing: .03em;
}
@media (max-width: 991px) {
    .services-section { padding: 60px 0 70px; }
    .arch-frame { max-width: 340px; }
    .arch-frame img { height: 360px; }
    .services-figure::before { width: 340px; height: 340px; }
    .services-mandala-a { width: 380px; height: 380px; }
    .services-mandala-b { width: 460px; height: 460px; margin-top: -230px; right: -220px; }
}
@media (prefers-reduced-motion: reduce) {
    .services-figure::before, .services-mandala { animation: none; }
}

/* phones: keep the menu button from covering the logo */
.rd-navbar-fixed .logo-link { display: inline-block; margin-left: 46px; }
@media (max-width: 479px) {
    .rd-navbar-fixed .lang-switch { padding: 3px; right: 50px; }
    .rd-navbar-fixed .lang-switch > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rd-navbar-fixed .logo { max-width: calc(100vw - 150px); height: auto; }
}

/* =========================================================
   FLOATING CONTACT BUTTONS (bottom right, above back-to-top)
   ========================================================= */
.float-contact { position: fixed; right: 15px; bottom: 80px; z-index: 1050; display: flex; flex-direction: column; gap: 12px; }
html.mobile .float-contact, html.tablet .float-contact { bottom: 18px; }
.float-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: 50%; color: #fff !important; font-size: 21px;
    background: linear-gradient(135deg, #e0701b, #c8102e);
    box-shadow: 0 0 0 3px rgba(243, 213, 138, .85), 0 8px 20px rgba(140, 20, 20, .35);
    transition: transform .3s ease, box-shadow .3s ease;
}
.float-btn-mail { background: linear-gradient(135deg, #b8860b, #8f0b21); font-size: 19px; }
.float-btn:hover, .float-btn:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 3px #f3d58a, 0 12px 26px rgba(140, 20, 20, .45); }
.float-btn-phone::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(224, 112, 27, .55);
    animation: nkRing 3.2s ease-out infinite; pointer-events: none;
}
@keyframes nkRing { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.float-label {
    position: absolute; right: 60px; top: 50%; transform: translate(8px, -50%); opacity: 0; pointer-events: none;
    white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: #fff; color: #8f0b21;
    font: 500 14px/1.3 Poppins, 'Noto Sans Devanagari', sans-serif; box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
    border: 1px solid rgba(217, 164, 65, .5); transition: opacity .3s ease, transform .3s ease;
}
.float-btn:hover .float-label, .float-btn:focus-visible .float-label { opacity: 1; transform: translate(0, -50%); }
@media (hover: none) { .float-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .float-btn-phone::after { animation: none; } }