/* ============================================================================ PUROHITAM — style.css ---------------------------------------------------------------------------- This single stylesheet is shared by all 9 HTML pages (linked as assets/css/style.css). It is organised top-to-bottom in the order things appear on the page. Use Ctrl+F / Cmd+F and search for a heading in the TABLE OF CONTENTS below to jump straight to what you want to edit. TABLE OF CONTENTS ------------------------------------------------------------------------ 1. Root color variables + base tags (search: ":root") 2. Preloader (full-page loading screen) (search: "PRELOADER") 3. Top strip (dark bar above the navbar) (search: "TOP STRIP") 4. Navbar + PRO badge + hamburger (search: "NAVBAR") 5. Global button system (shine/gradient) (search: "BUTTON SYSTEM") 6. Offcanvas side menu (mobile nav drawer) (search: "OFFCANVAS") 7. Hero section (search: "HERO") 8. Trust strip (icon row under hero) (search: "TRUST STRIP") 9. Section heading style (eyebrow + title) (search: "SECTION HEADING") 10. Puja cards + their slider (search: "PUJA CARDS") 11. Booking form section (dark CTA form) (search: "BOOKING FORM") 12. Testimonials slider (search: "TESTIMONIALS") 13. CTA banner (orange call-to-action strip) (search: "CTA BANNER") 14. Stats counter strip (search: "STATS") 15. Page banner (used on every inner page) (search: "PAGE BANNER") 16. Services listing page (search: "SERVICES GRID PAGE") 17. Service details page (search: "SERVICE DETAILS") 18. Footer (search: "FOOTER") 19. Back-to-top + WhatsApp floating buttons (search: "FLOATING BUTTONS") 20. About / Pandit Ji / How-it-Works / Blog / Contact page styles (search: "ADDITIONAL PAGE STYLES") 21. Pagination, form focus ring, misc polish (search: "PREMIUM PAGINATION") 22. Premium success/error popup (search: "PREMIUM STATUS POPUP") 23. Responsive helpers scattered throughout (search: "@media") COLOR PALETTE — change a value below and it updates EVERYWHERE that color is used on the site (all colors are referenced as var(--name)). ============================================================================ */ :root{ --cream:#FDF3E7; /* light warm background (used behind some sections) */ --cream-light:#FFF9F2; /* even lighter background (hero, testimonials, etc.) */ --orange:#E8720C; /* PRIMARY brand color — buttons, links, icons */ --orange-dark:#C85D06; /* darker orange — hover states, gradient end color */ --orange-light:#FCEADA; /* pale orange — icon circle backgrounds */ --text-dark:#2B2118; /* main body text color */ --text-muted:#6B5D52; /* secondary/lighter text (descriptions, labels) */ --gold:#F5A623; /* accent gold — stars, PRO badge, decorative touches */ --maroon:#7A1F1F; /* deep accent (rarely used directly) */ --font-heading:'Cormorant Garamond', serif; /* premium serif used for all headings/titles — body text stays on Poppins for readability, see the h1-h6 + heading-class rule below */ } *{ scroll-behavior:smooth; } /* clicking an in-page link (e.g. #booking) scrolls smoothly */ body{ font-family:'Poppins', sans-serif; /* body font — loaded from Google Fonts in */ color:var(--text-dark); background:#fff; /* NOTE: deliberately NOT setting overflow-x:hidden here. Any `overflow` value on (even overflow-x alone) breaks position:sticky for the navbar in several browsers, because it changes which element is treated as the page's scrolling container. Every section that has a decorative element poking outside its box (glows, watermarks, etc.) already clips it locally with its own overflow:hidden instead — see .hero-section, .page-banner, .site-footer, .testimonial-section-v2, .ptm-search-hero, .cta-banner, .top-strip. */ } .devanagari{ font-family:'Noto Sans Devanagari', sans-serif; } /* used for Hindi/Sanskrit lines */ a{ text-decoration:none; } /* ============================================================================ PREMIUM HEADING FONT ---------------------------------------------------------------------------- Every heading tag (h1-h6) plus the handful of heading-styled elements that aren't literal tags (the navbar brand name, puja/pandit/blog card names, testimonial names, etc.) switch to the elegant serif 'Cormorant Garamond' instead of Poppins — body text, buttons, labels, and paragraphs all stay on Poppins for clean readability. This one rule is what gives the whole site its more premium, editorial feel; change --font-heading in :root above to try a different pairing everywhere. ============================================================================ */ h1, h2, h3, h4, h5, h6, .navbar-purohitam .brand-name, .offcanvas-premium .brand-name, .footer-logo, .hero-heading, .section-title, .section-title-light, .ptm-search-title, .puja-card .puja-name, .pandit-card .name, .blog-card h5, .testi-mini-name, .testimonial-card .name, .mission-card h5, .stat-item .num, .price-tag, .booking-card h4, .contact-form-card h4, .hiw-step h5, .timeline-item h6, .process-step h6, .value-row h6{ font-family:var(--font-heading); font-weight:700; letter-spacing:.2px; } /* ===== Fluid containers ===== */ /* Bootstrap's .container caps out around 1140-1320px by default — these two rules widen it further on very large / ultra-wide monitors so the layout doesn't look cramped in the middle of a big screen. */ @media(min-width:1400px){ .container, .container-xl{ max-width:1280px; } } @media(min-width:1600px){ .container, .container-xl{ max-width:1360px; } } /* ============================================================================ PRELOADER — full-screen loading animation shown while the page's images, fonts, and CSS are still loading. Fades out via main.js (see the "hide" class toggle in main.js SECTION 1) once window "load" fires. Design: a rotating "diya" (oil lamp) motif — an outer ring rotates one way, an inner ring rotates the other way, with a flame icon breathing in the middle and the brand name fading in/out underneath. Feels on-theme for a puja-booking site instead of a generic spinner. ============================================================================ */ #preloader{ position:fixed; top:0; left:0; right:0; bottom:0; /* explicit offsets — more broadly supported than the inset shorthand alone */ width:100%; height:100%; z-index:9999; margin:0; padding:0; background:var(--cream-light); display:flex; align-items:center; justify-content:center; transition:opacity .5s ease, visibility .5s ease; } #preloader.hide{ opacity:0; visibility:hidden; } /* main.js adds this class on window load */ .ptm-loader{ display:flex; flex-direction:column; align-items:center; gap:18px; } .ptm-loader-rings{ position:relative; width:96px; height:96px; } /* outer ring — thin, rotates clockwise */ .ptm-loader-rings::before{ content:''; position:absolute; inset:0; border-radius:50%; border:3px solid var(--orange-light); border-top-color:var(--orange); border-right-color:var(--orange); animation:ptmSpinCW 1.4s linear infinite; } /* inner ring — thicker, rotates counter-clockwise, slightly smaller */ .ptm-loader-rings::after{ content:''; position:absolute; inset:14px; border-radius:50%; border:3px solid transparent; border-bottom-color:var(--gold); border-left-color:var(--gold); animation:ptmSpinCCW 1.8s linear infinite; } .ptm-loader-flame{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:1.6rem; animation:ptmFlameBreathe 1.6s ease-in-out infinite; } @keyframes ptmSpinCW{ to{ transform:rotate(360deg); } } @keyframes ptmSpinCCW{ to{ transform:rotate(-360deg); } } @keyframes ptmFlameBreathe{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.15); opacity:.75; } } .ptm-loader-text{ font-family:'Noto Sans Devanagari', sans-serif; color:var(--orange-dark); font-weight:600; font-size:.85rem; letter-spacing:2px; text-transform:uppercase; animation:ptmTextFade 1.6s ease-in-out infinite; } @keyframes ptmTextFade{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } } /* ============================================================================ TOP STRIP — the thin dark bar above the main navbar (hours, email, app download buttons, social icons). Has an animated diagonal "sheen" sweep for a premium touch (see .top-strip::before). ============================================================================ */ /* ===== Top strip (premium header) ===== */ .top-strip{ background:linear-gradient(90deg,#241710,#3a2214 45%,#241710); color:#e9d9c7; font-size:.82rem; padding:8px 0; position:relative; overflow:hidden; } .top-strip::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(232,114,12,.18),transparent); animation:stripSheen 6s linear infinite; } @keyframes stripSheen{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} } .top-strip .devanagari{ color:var(--gold); letter-spacing:.3px; position:relative; z-index:1; } /* Shlok is now visible on every screen size (including phones) — shrink it a touch on very small screens so it never wraps to two lines. */ /* This flex item needs min-width:0 — without it, a flex child containing nowrap text refuses to shrink below its own text's natural width (a classic flexbox gotcha), which was silently making the ENTIRE PAGE wider than the phone's screen and causing horizontal body scroll (and, as a side effect, made the fixed-position preloader look off-center, since it was centering against that oversized page instead of the visible screen). min-width:0 lets it actually shrink and hand off to overflow:hidden + text-overflow:ellipsis below instead. */ .ptm-shlok{ font-size:clamp(.68rem, 2.6vw, .85rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; min-width:0; flex-shrink:1; } .top-strip .divider{ width:1px; height:14px; background:rgba(255,255,255,.2); margin:0 14px; } .top-strip .mini-link{ color:#e9d9c7; font-size:.8rem; display:flex; align-items:center; gap:6px; position:relative; z-index:1; } .top-strip .mini-link i{ color:var(--gold); } .top-strip .btn-store{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:4px 12px; font-size:.72rem; line-height:1.1; transition:.25s; position:relative; z-index:1; } .top-strip .btn-store:hover{ background:var(--orange); border-color:var(--orange); transform:translateY(-2px); } .top-strip .social-icon{ color:#e9d9c7; font-size:.9rem; margin-left:10px; transition:.25s; width:28px;height:28px;border-radius:50%; background:rgba(255,255,255,.06); display:inline-flex; align-items:center; justify-content:center; position:relative; z-index:1; } .top-strip .social-icon:hover{ color:#fff; background:var(--orange); transform:translateY(-3px); } /* ============================================================================ NAVBAR — logo, PRO badge, desktop menu (hidden below 1400px on purpose — see the "d-none d-xxl-flex" classes in the HTML, this avoids the menu text wrapping/squeezing on 14"-16" laptop screens), and the hamburger button that opens the offcanvas side menu on everything narrower. ============================================================================ */ .navbar-purohitam{ padding:14px 0; box-shadow:0 2px 10px rgba(0,0,0,.05); transition:padding .3s ease, box-shadow .3s ease; position:relative; /* anchors the animated underline below */ } .navbar-purohitam.scrolled{ padding:8px 0; box-shadow:0 6px 20px rgba(0,0,0,.1); } /* Always-on animated accent line along the very bottom edge of the navbar — a slow shimmering gradient that never stops, giving the header a subtle "alive" premium feel even when nobody is interacting with it. */ .navbar-purohitam::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2.5px; background:linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--orange) 40%, var(--orange-dark) 50%, var(--orange) 60%, var(--gold) 80%, transparent 100%); background-size:200% 100%; animation:navAccentShimmer 4s linear infinite; } @keyframes navAccentShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } } .navbar-purohitam .logo-icon{ width:52px;height:52px; background:var(--orange-light); border:2px solid var(--orange); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--orange); font-size:1.3rem; animation:flamePulse 2.4s ease-in-out infinite; } @keyframes flamePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,114,12,.35);} 50%{ box-shadow:0 0 0 8px rgba(232,114,12,0);} } .navbar-purohitam .brand-name{ font-weight:800; font-size:clamp(1.2rem,1.5vw,1.6rem); color:var(--orange); line-height:1.1; white-space:nowrap; } .navbar-purohitam .brand-tag{ font-size:.7rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; white-space:nowrap; } /* Same flexbox fix as .ptm-shlok above: without min-width:0 here, this text block could refuse to shrink on very narrow phones and push the navbar wider than the screen. */ .navbar-brand{ min-width:0; overflow:hidden; } .navbar-brand > span{ min-width:0; overflow:hidden; } .pro-badge{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--gold),var(--orange)); color:#fff; font-size:.58rem; font-weight:800; letter-spacing:.5px; padding:2px 8px 2px 6px; border-radius:20px; display:inline-flex; align-items:center; gap:3px; box-shadow:0 3px 8px rgba(232,114,12,.4); animation:proPulse 2.4s ease-in-out infinite; } .pro-badge i{ font-size:.55rem; } .pro-badge::before{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent); transform:skewX(-20deg); animation:proShine 3s ease-in-out infinite; } @keyframes proShine{ 0%{ left:-60%; } 50%{ left:130%; } 100%{ left:130%; } } @keyframes proPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} } .navbar-purohitam .nav-link{ font-weight:500; color:var(--text-dark)!important; position:relative; white-space:nowrap; padding:6px 0!important; } .navbar-purohitam .navbar-nav{ gap:clamp(14px,1.6vw,26px); } .navbar-purohitam .nav-link::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--orange); transition:width .3s ease; } .navbar-purohitam .nav-link:hover::after, .navbar-purohitam .nav-link.active::after{ width:100%; } .navbar-purohitam .nav-link.active{ color:var(--orange)!important; font-weight:600; } .call-us-icon{ width:44px;height:44px; background:var(--orange-light); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--orange); flex-shrink:0; } /* ============================================================================ GLOBAL PREMIUM BUTTON SYSTEM — every primary button on the site (Book Puja, form Submit buttons, Call Now, View Details) shares this gradient + diagonal "shine sweep" hover effect for a consistent premium feel. Add the class .btn-premium to any new button to opt it in too. ============================================================================ */ /* ===== Global premium button system (shine-sweep + gradient) ===== */ .btn-book-puja, .btn-submit, .btn-call-now, .puja-card .btn-view, .btn-premium{ position:relative; overflow:hidden; isolation:isolate; } .btn-book-puja::before, .btn-submit::before, .btn-call-now::before, .puja-card .btn-view::before, .btn-premium::before{ content:''; position:absolute; top:0; left:-75%; width:50%; height:100%; z-index:-1; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-20deg); transition:left .55s ease; } .btn-book-puja:hover::before, .btn-submit:hover::before, .btn-call-now:hover::before, .puja-card .btn-view:hover::before, .btn-premium:hover::before{ left:135%; } .btn-book-puja{ background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:#fff; font-weight:600; padding:10px 22px; border-radius:8px; border:none; transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 6px 16px rgba(232,114,12,.35); white-space:nowrap; } .btn-book-puja:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 14px 26px rgba(232,114,12,.45); } .btn-book-puja:active{ transform:translateY(-1px); } .hamburger-btn{ width:44px;height:44px; border-radius:10px; border:1px solid var(--orange-light); background:var(--orange-light); display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:1.2rem; flex-shrink:0; transition:.25s; } .hamburger-btn:hover{ background:var(--orange); color:#fff; transform:rotate(90deg); } /* ===== Offcanvas side menu ===== The panel that slides in from the right on mobile/tablet (and on desktop widths below 1400px) when the hamburger button is tapped. */ .offcanvas-premium{ background:var(--cream-light); width:300px; } .offcanvas-premium .offcanvas-header{ border-bottom:1px solid var(--orange-light); /* Explicit (not just relying on Bootstrap defaults) so the close button is always pinned to the far right, never crowding the logo text. */ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:12px; padding:16px 18px; } .offcanvas-premium .offcanvas-header .brand-name{ font-size:1.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } /* Custom close (X) button for the mobile side menu — replaces Bootstrap's plain gray default with an on-brand circular button that spins and fills with the gradient on hover/tap. */ .ptm-offcanvas-close{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background:var(--orange-light); color:var(--orange); border:none; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:transform .35s ease, background .25s ease, color .25s ease; margin-left:auto; /* safety net: pins it right even if a parent flex rule is overridden elsewhere */ } .ptm-offcanvas-close:hover{ background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:#fff; transform:rotate(180deg); } .ptm-offcanvas-close:active{ transform:rotate(180deg) scale(.9); } .offcanvas-premium .nav-link{ color:var(--text-dark); font-weight:500; padding:12px 4px; border-bottom:1px solid rgba(0,0,0,.05); display:flex; align-items:center; gap:10px; transition:.2s; } .offcanvas-premium .nav-link:hover{ color:var(--orange); padding-left:10px; } .offcanvas-premium .nav-link i{ color:var(--orange); width:20px; } .offcanvas-premium .nav-link.active{ color:var(--orange); font-weight:700; } /* "Call Us Now" card in the mobile side menu — a full clickable tel: link styled as a small card, with a pulsing phone icon on the left and an arrow that slides on hover, instead of the old plain text line. */ .ptm-offcanvas-call{ display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#2b1c12,#3a2414); border-radius:14px; padding:14px 16px; text-decoration:none; box-shadow:0 10px 24px rgba(43,28,18,.25); transition:transform .25s ease, box-shadow .25s ease; } .ptm-offcanvas-call:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(43,28,18,.35); } .ptm-offcanvas-call-icon{ width:44px; height:44px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--gold),var(--orange)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.05rem; animation:ring 2s ease-in-out infinite; /* reuses the CTA banner's phone-ring keyframes */ } .ptm-offcanvas-call-label{ display:block; font-size:.7rem; color:#c9b39f; text-transform:uppercase; letter-spacing:.5px; } .ptm-offcanvas-call-number{ display:block; font-size:1rem; font-weight:700; color:#fff; } .ptm-offcanvas-call-arrow{ margin-left:auto; color:var(--gold); transition:transform .25s ease; } .ptm-offcanvas-call:hover .ptm-offcanvas-call-arrow{ transform:translateX(4px); } /* ===== Hero ===== The big intro section right under the navbar. Headline size uses clamp() so it scales smoothly between phone and desktop widths instead of jumping at breakpoints. */ .hero-section{ background:var(--cream-light); position:relative; overflow:hidden; } .hero-eyebrow{ color:var(--orange); font-weight:600; font-size:.95rem; } .hero-heading{ font-weight:800; font-size:clamp(1.9rem, 2.6vw + 1rem, 3rem); line-height:1.18; } .hero-heading .accent{ color:var(--orange); } .hero-sub{ color:var(--text-muted); font-size:clamp(.92rem,.6vw + .7rem,1.05rem); max-width:520px; } .feature-mini{ display:flex;align-items:center;gap:10px; } .feature-mini .icon-circle{ width:46px;height:46px; background:var(--orange-light); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--orange); font-size:1.15rem; flex-shrink:0; transition:.3s; } .feature-mini:hover .icon-circle{ background:var(--orange); color:#fff; transform:rotate(8deg) scale(1.08); } .feature-mini .title{ font-weight:600; font-size:.88rem; } .feature-mini .sub{ font-size:.78rem; color:var(--text-muted); } .hero-img-wrap{ position:relative; border-radius:0 0 0 120px; overflow:hidden; height:100%; min-height:420px; } .hero-img-wrap img{ width:100%;height:100%;object-fit:cover; } /* Hero slider — the Swiper fills the same rounded frame the old static image used to sit in; pagination dots sit near the bottom, offset left so they never collide with the floating "Trusted by" badge on the right. */ .heroSwiper, .heroSwiper .swiper-slide{ width:100%; height:100%; } .hero-swiper-pagination{ text-align:left!important; left:28px!important; right:auto!important; bottom:20px!important; width:auto!important; } .hero-swiper-pagination .swiper-pagination-bullet{ background:#fff; opacity:.6; width:8px; height:8px; } .hero-swiper-pagination .swiper-pagination-bullet-active{ opacity:1; background:var(--gold); width:24px; border-radius:5px; } .trust-badge{ position:absolute; top:20px; right:20px; background:var(--orange); color:#fff; width:130px;height:130px; border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; font-weight:700; font-size:.78rem; border:4px dashed rgba(255,255,255,.5); box-shadow:0 10px 25px rgba(0,0,0,.2); animation:floatBadge 3.5s ease-in-out infinite; } .trust-badge .big{ font-size:1.35rem; display:block; } @keyframes floatBadge{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} } /* hero stat pills (replaces the old search card inside the hero) */ .hero-stat-pills{ display:flex; flex-wrap:wrap; gap:12px; } .hero-stat-pills .pill{ background:#fff; border-radius:12px; padding:10px 18px; box-shadow:0 8px 22px rgba(0,0,0,.06); display:flex; align-items:center; gap:10px; } .hero-stat-pills .pill i{ color:var(--orange); } .hero-stat-pills .pill b{ display:block; font-size:1rem; } .hero-stat-pills .pill span{ font-size:.72rem; color:var(--text-muted); } /* ===== Trust strip ===== The row of 6 small icon+label items just under the hero ("Multiple Puja Options", "Secure Payments", etc). */ .trust-strip{ background:#fff; padding:26px 0; border-bottom:1px solid #f1e9dd; } .trust-item{ display:flex;align-items:center;gap:10px; } .trust-item .icon-circle{ width:48px;height:48px; background:var(--orange-light); border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--orange); font-size:1.2rem; flex-shrink:0; transition:.3s; } .trust-item:hover .icon-circle{ background:var(--orange); color:#fff; transform:scale(1.1); } .trust-item .label{ font-weight:600; font-size:.85rem; line-height:1.2; } /* ===== Section heading ===== The small orange "eyebrow" line + big bold title used above most sections ("Popular Pujas", "What Our Clients Say", etc). Reused on every page via .section-eyebrow / .section-title. */ .section-eyebrow{ text-align:center; color:var(--orange); font-weight:600; display:flex;align-items:center;justify-content:center;gap:14px; } .section-eyebrow .line{ height:1px;width:40px;background:var(--orange); } .section-title{ text-align:center; font-weight:800; font-size:clamp(1.6rem,1.4vw + 1rem,2.2rem); margin-bottom:36px; } /* ===== Puja cards / swiper ===== The card design used for every puja listing (home page slider, services grid, related-services slider). Image zooms slightly on hover; .btn-view is the "View Details" pill button. */ .puja-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); transition:transform .3s ease, box-shadow .3s ease; height:100%; } .puja-card:hover{ transform:translateY(-8px); box-shadow:0 18px 34px rgba(0,0,0,.14); } .puja-card .img-wrap{ position:relative; height:190px; overflow:hidden; } .puja-card .img-wrap img{ width:100%;height:100%;object-fit:cover; transition:transform .5s ease; } .puja-card:hover .img-wrap img{ transform:scale(1.08); } .puja-card .badge-popular{ position:absolute;top:10px;left:10px; background:#D62828; color:#fff; font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:5px; z-index:2; } .puja-card .fav-btn{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--orange); display:flex; align-items:center; justify-content:center; z-index:2; font-size:.9rem; transition:.2s; } .puja-card .fav-btn:hover{ background:var(--orange); color:#fff; } .puja-card .body{ padding:16px; } .puja-card .puja-name{ font-weight:700; font-size:1rem; margin-bottom:8px;} .puja-card .price{ color:var(--orange); font-weight:700; } .puja-card .rating{ color:var(--gold); font-size:.85rem; font-weight:600; } .puja-card .btn-view{ border:1.5px solid var(--orange); color:var(--orange); font-weight:600; font-size:.82rem; border-radius:24px; padding:6px 16px; transition:.25s; display:inline-block; margin-top:10px; } .puja-card .btn-view:hover{ background:var(--orange); color:#fff; transform:translateY(-2px); box-shadow:0 8px 16px rgba(232,114,12,.3); } .pujaSwiper{ padding:10px 6px 46px; } .swiper-button-next.custom-nav, .swiper-button-prev.custom-nav{ width:46px;height:46px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:#fff; box-shadow:0 8px 18px rgba(232,114,12,.3); transition:transform .25s ease, box-shadow .25s ease; } .swiper-button-next.custom-nav::after, .swiper-button-prev.custom-nav::after{ font-size:1rem; } .swiper-button-next.custom-nav:hover, .swiper-button-prev.custom-nav:hover{ transform:scale(1.1); box-shadow:0 12px 24px rgba(232,114,12,.4); } .pujaSwiper .swiper-pagination-bullet{ background:#e7dcca; opacity:1; transition:.25s; } .pujaSwiper .swiper-pagination-bullet-active{ background:var(--orange); width:22px; border-radius:5px; } /* ===== Booking form section ===== The dark "Fill The Form" section on the home page (#booking). .booking-card is the white form card; .booking-perks is the checklist on the left. */ .booking-section{ background:linear-gradient(135deg,#2b1c12,#3a2414 55%,#2b1c12); position:relative; overflow:hidden; color:#fff; } .booking-section::before{ content:''; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(232,114,12,.25),transparent 70%); top:-140px; right:-120px; } .booking-section::after{ content:''; position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(245,166,35,.18),transparent 70%); bottom:-120px; left:-100px; } .booking-section .badge-line{ color:var(--gold); font-weight:600; letter-spacing:1px; font-size:.8rem; text-transform:uppercase; } .booking-section h2{ font-weight:800; font-size:clamp(1.6rem,1.4vw + 1rem,2.3rem); } .booking-section p.lead-sub{ color:#d8c6b6; max-width:420px; } .booking-perks li{ display:flex; align-items:center; gap:12px; margin-bottom:16px; color:#e9d9c7; font-size:.92rem; } .booking-perks li i{ width:34px;height:34px; border-radius:50%; background:rgba(232,114,12,.2); color:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .booking-card{ background:#fff; color:var(--text-dark); border-radius:18px; padding:32px; box-shadow:0 30px 60px rgba(0,0,0,.35); position:relative; z-index:2; } .booking-card h4{ font-weight:800; } .booking-card .form-note{ font-size:.75rem; color:var(--text-muted); } /* ============================================================================ SHARED PREMIUM FORM SYSTEM ---------------------------------------------------------------------------- Used by every form on the site: the home page booking form, the Quick Booking modal, the service-details sidebar form, and the contact page form. Two pieces: .ptm-form-badge -> the small circular icon badge above a form's title .ptm-field -> wraps an /