/*
Theme Name: Rudransh Metals Ultra Luxury
Description: 3D Brass Elements, Magnetic Glow, and Dharmik Aura.
*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');
:root {
--bg-white: #ffffff;
--top-bar-bg: #110a03; /* Deep Temple Bronze/Black */
--logo-gold: #c69c38;
/* Asli Brass/Pital ka 3D Gradient */
--brass-gradient: linear-gradient(135deg, #fceabb 0%, #f8b500 40%, #c69c38 80%, #8a6a23 100%);
--text-dark: #1a1a1a;
--dharmik-font: 'Cinzel', serif;
--body-font: 'Poppins', sans-serif;
--logo-gold-light: #c69c38;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--body-font);
color: var(--text-dark);
background-color: var(--bg-white);
line-height: 1.6;
}
.container { width: 100%; max-width: 1366px; margin: 0 auto; padding: 0 20px; }
/* ==========================================================================
1. The Temple Inscription Top Bar
========================================================================== */
.header-top {
background-color: var(--top-bar-bg);
border-bottom: 2px solid #3b2c1d;
padding: 10px 0;
position: relative;
overflow: hidden;
}
/* Background me halka sa shine chalta rahega */
.header-top::before {
content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,215,0,0.05), transparent);
animation: slowShine 6s infinite;
}
@keyframes slowShine { 100% { left: 200%; } }
.top-inner { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.top-left p {
margin: 0; font-family: var(--dharmik-font); color: #fceabb;
font-size: 0.95rem; font-weight: 600; letter-spacing: 1.5px;
text-shadow: 0 0 10px rgba(252, 234, 187, 0.3); /* Soft Gold text shadow */
}
.top-right.social-links { display: flex; gap: 20px; }
.social-icon {
color: #c69c38; transition: all 0.3s ease; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.social-icon:hover { color: #fceabb; transform: translateY(-3px) scale(1.15); filter: drop-shadow(0 0 8px #f8b500); }
.social-icon svg { width: 18px; height: 18px; fill: currentColor; }
/* ==========================================================================
2. Transparent to Glassmorphism Main Header
========================================================================== */
.site-header {
background-color: transparent; /* Pura transparent kar diya */
padding: 0px 0;
position: absolute; /* Hero section ke upar tairta hua */
width: 100%;
top: auto;
z-index: 1000;
transition: all 0.4s ease;
box-shadow: none; /* Starting me koi shadow nahi */
}
/* Jab user scroll karega tab ye class JS se add hogi */
.site-header.scrolled {
position: fixed;
top: 0;
padding: 10px 0;
background-color: var(--bg-glass); /* Scroll hone par Glass look */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid var(--logo-gold);
}
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo .custom-logo-link img { max-height: 90px; transition: all 0.4s ease; width:auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.site-header.scrolled .logo .custom-logo-link img { max-height: 65px; filter: none; }
.custom-logo-link { display: flex;}
/* ==========================================================================
3. Navigation Menu & Icons Colors (Transparent to Glass)
========================================================================== */
.main-nav ul { list-style: none; display: flex; gap: 0px; margin: 0; padding: 0; }
/* Starting Default Colors (White Text for Dark Background) */
.main-nav ul li a,
.search-icon-btn,
.header-call-btn {
color: var(--bg-white); /* White color taaki dark image par saaf dikhe */
transition: all 0.3s ease;
}
.main-nav ul li a {
text-decoration: none; font-family: var(--dharmik-font, 'Cinzel', serif); font-size: 0.8rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px; position: relative; padding: 10px 15px; border-radius: 4px; z-index: 1;
}
/* Call icon circle initial style */
.icon-circle {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.5);
display: flex; justify-content: center; align-items: center;
color: var(--bg-white); transition: all 0.3s ease;
}
/* ------------------------------------------------------------------
SCROLLED COLORS (Jab glass header aaye toh text wapas Dark ho jaye)
------------------------------------------------------------------ */
.site-header.scrolled .main-nav ul li a,
.site-header.scrolled .search-icon-btn,
.site-header.scrolled .header-call-btn {
color: var(--text-dark); /* Glass ke upar dark text */
}
.site-header.scrolled .icon-circle {
background: var(--bg-white);
border: 2px solid var(--logo-gold);
color: var(--logo-gold);
box-shadow: inset 0 0 5px rgba(198, 156, 56, 0.2);
}
/* Hover Effects */
.main-nav ul li a:hover,
.site-header.scrolled .main-nav ul li a:hover,
.search-icon-btn:hover,
.header-call-btn:hover {
color: var(--logo-gold);
text-shadow: 0 0 1px var(--logo-gold);
}
.header-call-btn:hover .icon-circle {
background: var(--brass-gradient); color: #111;
border-color: transparent; box-shadow: 0 5px 15px rgba(198, 156, 56, 0.4);
}
/* Diya Aura Background Element */
.main-nav ul li a::before {
content: ''; position: absolute; top: 50%; left: 50%; width: 0%; height: 0%;
background: radial-gradient(circle, rgba(248, 181, 0, 0.15) 0%, transparent 70%);
transform: translate(-50%, -50%); border-radius: 50%;
transition: all 0.4s ease; z-index: -1;
}
.main-nav ul li a:hover::before { width: 120%; height: 120%; }
/* ==========================================================================
4. The 3D Brass Elements & Magnetic Button
========================================================================== */
.header-actions { display: flex; align-items: center; gap: 30px; }
/* Search Icon */
.search-icon-btn { background: none; border: none; cursor: pointer; color: var(--text-dark); transition: all 0.3s ease; }
.search-icon-btn:hover { color: var(--logo-gold); transform: scale(1.1); }
/* Call Us with 3D Ring */
.header-call-btn { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bg-white); font-weight: 600; }
.icon-circle {
width: 38px; height: 38px; border-radius: 50%;
background: var(--bg-white);
border: 2px solid var(--logo-gold);
display: flex; justify-content: center; align-items: center; color: var(--logo-gold);
transition: all 0.3s ease;
box-shadow: inset 0 0 5px rgba(198, 156, 56, 0.2);
}
.header-call-btn:hover .icon-circle {
background: var(--brass-gradient); color: #111;
border-color: transparent; box-shadow: 0 5px 15px rgba(198, 156, 56, 0.4);
}
/* The Magnetic 3D Brass Button */
.header-quote-btn {
position: relative;
padding: 12px 30px;
background: var(--brass-gradient); /* Asli Pital ka look */
color: #1a1105; /* Dark brown text for contrast */
font-weight: 700;
font-family: var(--body-font);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
border-radius: 5px;
overflow: hidden;
/* 3D Emboss Shadow */
box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.2), 0 5px 15px rgba(198, 156, 56, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Ye ::before pseudo-element JS ke sath milkar cursor ko follow karega */
.header-quote-btn::before {
content: '';
position: absolute;
top: var(--y, 50%);
left: var(--x, 50%);
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 60%);
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.header-quote-btn:hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), inset 0 -2px 0 rgba(0,0,0,0.3), 0 8px 20px rgba(198, 156, 56, 0.5); }
.header-quote-btn:hover::before { opacity: 1; /* Hover par magnetic glow dikhega */ }
.header-quote-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,0.4); }
/* ==========================================================================
5. Basic Mobile Fixes & Hamburger Styling
========================================================================== */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; }
.menu-toggle .bar { display: block; width: 25px; height: 2px; margin: 6px auto; background-color: var(--bg-white); transition: 0.3s; }
/* Jab header scroll ho jaye toh Hamburger dark ho jaye */
.site-header.scrolled .menu-toggle .bar { background-color: var(--text-dark); }
@media screen and (max-width: 991px) {
.menu-toggle {
display: block;
position: relative;
z-index: 1005; /* Menu se upar rahega taaki close kar sakein */
}
.header-top {
display:none;
}
.header-actions {
display:none;
}
/* Prevent body scroll when mobile menu is open */
body.no-scroll {
overflow: hidden;
}
.site-header.scrolled .menu-toggle .bar {
background-color: #ffffff;
}
/* Hamburger ko (X) Cross me badalne ka animation */
.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); background-color: var(--text-dark); }
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: var(--text-dark); }
.header-quote-btn, .header-call-btn { display: none; }
.header-actions { gap: 15px; margin-right: 15px; }
/* Mobile Menu Box */
.main-nav {
position: fixed; top: 0; right: -100%; width: 300px; height: 100vh;
background-color: var(--bg-white); display: flex; flex-direction: column;
justify-content: center; transition: 0.4s ease-in-out; z-index: 1000;
box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}
.main-nav.toggled { right: 0; }
.main-nav ul { flex-direction: column; align-items: center; gap: 30px; }
/* SAFED BACKGROUND PE DARK TEXT FIX */
.main-nav ul li a {
color: var(--text-dark) !important; /* Force dark text on mobile */
font-size: 1.2rem;
}
.main-nav ul li a:hover {
color: var(--logo-gold) !important;
}
}
@media screen and (max-width: 991px) {
.menu-toggle { display: block; }
.header-quote-btn, .header-call-btn { display: none; }
.header-actions { gap: 15px; margin-right: 15px; }
.main-nav { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background-color: var(--bg-white); display: flex; flex-direction: column; justify-content: center; transition: 0.4s; z-index: 1000; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }
.main-nav.toggled { right: 0; }
.main-nav ul { flex-direction: column; align-items: center; gap: 30px; }
}
/* ==========================================================================
HERO SLIDER SECTION (Updated for Transparent Header)
========================================================================== */
.hero-slider-section {
position: relative;
width: 100%;
height: 100vh; /* Ab ye pura screen cover karega top bar ke baad */
min-height: 700px;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-content-wrapper {
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
padding-top: 60px; /* Header text ke upar overlap na kare isliye push kiya */
}
/* The Background Slides */
.hero-slide {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.5s ease-in-out, transform 6s linear; /* Smooth Fade & Slow Zoom */
transform: scale(1);
z-index: 1;
}
.hero-slide.active {
opacity: 1;
transform: scale(1.05); /* Slide aate hi halke se zoom hogi (Cinematic effect) */
}
/* Dark Gradient Overlay for Readability */
.hero-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(90deg, rgba(17, 10, 3, 0.9) 0%, rgba(17, 10, 3, 0.6) 50%, rgba(17, 10, 3, 0.4) 100%);
z-index: 2;
}
/* --------------------------------------
Left Side Text Content
-------------------------------------- */
.hero-text-box {
flex: 1;
max-width: 650px;
color: var(--bg-white);
}
.hero-subtitle {
display: inline-block;
color: var(--logo-gold-light);
font-family: var(--body-font);
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.9rem;
margin-bottom: 15px;
border-bottom: 1px solid var(--logo-gold);
padding-bottom: 5px;
}
.hero-text-box h1 {
color: var(--bg-white);
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 20px;
text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.hero-text-box h1 .gold-text { color: var(--logo-gold); }
.hero-text-box p {
font-size: 1.1rem;
color: #e0e0e0;
margin-bottom: 40px;
line-height: 1.8;
}
/* Hero Buttons */
.hero-buttons { display: flex; gap: 20px; }
.btn-primary-brass {
background: var(--brass-gradient);
color: #111;
padding: 12px 30px;
font-family: var(--body-font);
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 5px 15px rgba(198, 156, 56, 0.3);
}
.btn-primary-brass:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(198, 156, 56, 0.5); }
.btn-secondary-glass {
background: rgba(255,255,255,0.1);
color: var(--bg-white);
padding: 12px 30px;
font-family: var(--body-font);
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.btn-secondary-glass:hover { background: var(--bg-white); color: var(--text-dark); }
/* --------------------------------------
Right Side Form Box (Glassmorphism)
-------------------------------------- */
.hero-form-box {
width: 400px;
background: rgba(255, 255, 255, 0.08); /* Transparent Glass */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.3); /* Top shine */
border-left: 1px solid rgba(255, 255, 255, 0.3); /* Left shine */
border-radius: 12px;
padding: 35px 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
transform: translateY(0);
animation: floatForm 6s ease-in-out infinite; /* Form halke se hawa me tairta lagega */
}
@keyframes floatForm {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.form-header { text-align: center; margin-bottom: 25px; }
.form-header h3 { color: var(--logo-gold-light); font-size: 1.6rem; margin-bottom: 5px; }
.form-header p { color: #ccc; font-size: 0.9rem; margin: 0; }
.form-group { margin-bottom: 15px; }
.hero-inquiry-form input, .hero-inquiry-form select {
width: 100%;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid transparent;
border-radius: 4px;
font-family: var(--body-font);
font-size: 0.95rem;
color: var(--text-dark);
transition: all 0.3s ease;
}
.hero-inquiry-form input:focus, .hero-inquiry-form select:focus {
outline: none;
border-color: var(--logo-gold);
box-shadow: 0 0 10px rgba(198, 156, 56, 0.3);
}
.btn-submit-gold {
width: 100%;
background: var(--brass-gradient);
color: #111;
border: none;
padding: 14px;
font-family: var(--body-font);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
.btn-submit-gold:hover {
box-shadow: 0 5px 15px rgba(198, 156, 56, 0.5);
}
/* --------------------------------------
Responsive Design for Hero Area
-------------------------------------- */
@media screen and (max-width: 1024px) {
.hero-text-box h1 { font-size: 2.8rem; }
.hero-form-box { width: 350px; }
}
@media screen and (max-width: 991px) {
.hero-slider-section { height: auto; padding: 100px 0; }
.hero-content-wrapper { flex-direction: column; text-align: center; }
.hero-subtitle { margin: 0 auto 15px; }
.hero-buttons { justify-content: center; }
.hero-form-box { width: 100%; max-width: 450px; margin-top: 40px; animation: none; }
}
@media screen and (max-width: 576px) {
.hero-text-box h1 { font-size: 2.2rem; }
.hero-buttons { flex-direction: column; }
}
/* ==========================================================================
DYNAMIC CATEGORY SLIDER + LIGHT DIVINE AARTI SPARKS
========================================================================== */
.category-slider-wrap {
background-color: #fdfcf8; /* Ekdum shuddh Cream/Ivory Background */
background: radial-gradient(circle at top center, #ffffff 0%, #fcfaf3 60%, #f4ebd6 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
/* 1. Canvas Styling */
#divineSparks {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
/* 2. Piche Ek Bada Soft Golden Aura (Light BG ke hisab se) */
.center-divine-glow {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 80vw; height: 80vw;
background: radial-gradient(circle, rgba(198, 156, 56, 0.08) 0%, transparent 60%);
z-index: 0;
pointer-events: none;
animation: pulseAura 6s infinite alternate ease-in-out;
}
@keyframes pulseAura {
from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}
/* --- CARDS KI CSS (Image par dark fade rahega taaki Gold text pop ho) --- */
.rm-category-card {
display: block;
position: relative;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: all 0.4s ease;
height: 400px;
border: 1px solid rgba(198, 156, 56, 0.2);
}
.rm-category-card:hover {
transform: translateY(-12px);
}
.cat-img-box { width: 100%; height: 100%; position: relative; overflow: hidden; }
.cat-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; opacity: 0.9; }
.rm-category-card:hover .cat-img-box img { transform: scale(1.1); opacity: 1; }
.cat-overlay {
position: absolute; bottom: 0; left: 0; width: 100%; height: 70%;
background: linear-gradient(to top, rgba(17, 10, 3, 0.95) 0%, rgba(17, 10, 3, 0.4) 50%, transparent 100%);
transition: all 0.4s ease;
}
.cat-content { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 2; text-align: left; }
.cat-content h3 { color: var(--logo-gold); font-size: 1.2rem; font-family: var(--dharmik-font); margin-bottom: 5px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); transition: all 0.3s ease; }
.rm-category-card:hover .cat-content h3 { color: #fff; transform: translateY(-5px); }
.cat-btn { display: inline-block; color: var(--bg-white); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; position: relative; opacity:0.9;}
.cat-btn::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0%; height: 2px; background: var(--logo-gold); transition: width 0.3s ease; }
.rm-category-card:hover .cat-btn { color: var(--logo-gold); opacity:1;}
.rm-category-card:hover .cat-btn::after { width: 100%; }
.swiper-pagination-bullet-active { background: var(--logo-gold) !important; box-shadow: 0 0 8px var(--logo-gold); }
/* ==========================================================================
1. THE ROYAL HERITAGE SECTION (Light & Pavitra Theme)
========================================================================== */
.royal-heritage-section {
background-color: #fdfcf8; /* Shuddh Off-white/Cream background */
/* Halka golden rangoli/dotted texture */
background-image: url('data:image/svg+xml;utf8,');
padding: 100px 0;
overflow: hidden;
}
.heritage-wrapper {
display: flex; flex-wrap: wrap; align-items: center; gap: 60px;
}
/* --- LEFT COLUMN: IMAGE ARCH --- */
.heritage-image-col {
flex: 1 1 45%; position: relative; padding: 20px;
}
.image-frame-arch {
position: relative; width: 100%; max-width: 450px; margin: 0 auto;
/* Perfect Mandir Gumbad Shape */
border-radius: 250px 250px 15px 15px; overflow: hidden;
background: #ffffff; /* Safed marble jaisa base */
border: 2px solid rgba(198, 156, 56, 0.4); /* Gold border */
padding: 15px;
box-shadow: 0 25px 50px rgba(198, 156, 56, 0.15); /* Golden soft shadow */
}
.image-frame-arch::before {
content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
border: 1px dashed rgba(198, 156, 56, 0.6);
border-radius: 240px 240px 10px 10px;
z-index: 1; pointer-events: none;
}
.heritage-img {
width: 100%; height: 600px; object-fit: cover;
border-radius: 235px 235px 8px 8px;
transition: transform 0.8s ease;
}
.image-frame-arch:hover .heritage-img { transform: scale(1.05); }
/* Niche se cream color ka fade aayega dark ki jagah */
.image-overlay-glow {
position: absolute; bottom: 0; left: 0; width: 100%; height: 40%;
background: linear-gradient(to top, rgba(253, 252, 248, 1), transparent);
z-index: 2; pointer-events: none;
}
/* Floating Gold Badge (Matches Logo Color) */
.experience-badge {
position: absolute; bottom: 50px; right: 0px;
background: linear-gradient(135deg, #fceabb, #c69c38, #8a6a23); /* Aapka Gold Color */
padding: 6px; border-radius: 50%;
box-shadow: 0 15px 30px rgba(198, 156, 56, 0.4);
z-index: 3; animation: floatBadge 4s ease-in-out infinite alternate;
}
.badge-inner {
background: #ffffff; /* Ander se clean white */
width: 130px; height: 130px; border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
border: 1px dashed rgba(198, 156, 56, 0.8); text-align: center;
}
.badge-inner .years {
color: var(--logo-gold, #c69c38); font-size: 2.2rem; font-weight: 800;
font-family: var(--dharmik-font); line-height: 1; margin-bottom: 5px;
}
.badge-inner .text {
color: #555; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2; font-weight: 600;
}
@keyframes floatBadge {
0% { transform: translateY(0px) rotate(-5deg); }
100% { transform: translateY(-20px) rotate(5deg); }
}
/* --- RIGHT COLUMN: THE STORY --- */
.heritage-text-col { flex: 1 1 45%; }
.sec-subtitle {
display: flex; align-items: center; gap: 15px;
color: var(--logo-gold, #c69c38); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; margin-bottom: 20px;
}
.sec-subtitle .line { width: 40px; height: 2px; background: var(--logo-gold, #c69c38); }
.heritage-heading {
color: #3e270e; /* Dark wood/brown color for light background */
font-size: 3rem; font-family: var(--dharmik-font); line-height: 1.2; margin-bottom: 25px;
}
.heritage-heading .gold-text {
background: linear-gradient(to right, #b38728, #c69c38, #b38728);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.heritage-para {
color: #555; /* Clean dark gray padhne ke liye */
font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px;
}
/* Key Highlights (White boxes with gold border) */
.heritage-features { display: flex; flex-direction: column; gap: 15px; margin: 30px 0; }
.feat-item {
display: flex; align-items: center; gap: 15px;
background: #ffffff;
padding: 15px 20px; border-radius: 8px;
border-left: 4px solid var(--logo-gold, #c69c38);
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
transition: all 0.3s ease;
}
.feat-item:hover {
background: #fdfaf3;
box-shadow: 0 8px 20px rgba(198, 156, 56, 0.15);
transform: translateX(10px);
}
.feat-icon { font-size: 22px; }
.feat-text { color: #3e270e; font-size: 1.05rem; font-weight: 600; }
.mt-4 { margin-top: 2rem; }
/* Responsive */
@media (max-width: 991px) {
.heritage-image-col, .heritage-text-col { flex: 1 1 100%; }
.image-frame-arch { max-width: 350px; }
.heritage-img { height: 450px; }
.heritage-heading { font-size: 2.2rem; }
}
/* ==========================================================================
THE ROYAL GOLD BUTTON (Discover Our Craft)
========================================================================== */
.btn-rajwadi {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px; /* Text aur Arrow ke beech ka gap */
padding: 16px 45px;
/* Premium Brass/Gold Gradient */
background: linear-gradient(135deg, #fceabb 0%, #f8b500 50%, #c69c38 100%);
color: #3e270e !important; /* Dark brown text taaki gold par saaf dikhe */
font-size: 1.1rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
/* Gol kinare (Pill shape) */
border-radius: 50px;
position: relative;
overflow: hidden;
z-index: 1;
/* 3D Embossed Shadow */
box-shadow: 0 10px 25px rgba(198, 156, 56, 0.3),
inset 0 3px 6px rgba(255, 255, 255, 0.6), /* Upar se white shine */
inset 0 -3px 6px rgba(138, 106, 35, 0.5); /* Niche se dark shadow */
/* Bouncy Hover Effect */
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* 1. Shimmer/Shine Effect (Roshni ki kiran) */
.btn-rajwadi::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-25deg);
z-index: -1;
transition: all 0.7s ease;
}
/* 2. Hover Actions */
.btn-rajwadi:hover {
transform: translateY(-6px); /* Button hawa me uthega */
box-shadow: 0 15px 35px rgba(198, 156, 56, 0.5),
inset 0 3px 6px rgba(255, 255, 255, 0.8),
inset 0 -3px 6px rgba(138, 106, 35, 0.5);
color: #111 !important; /* Text ekdum dark ho jayega */
}
/* Hover par shine daudegi */
.btn-rajwadi:hover::before {
left: 200%;
}
/* 3. Arrow Animation */
.btn-rajwadi .arrow {
font-size: 1.3rem;
transition: transform 0.3s ease;
}
.btn-rajwadi:hover .arrow {
transform: translateX(8px); /* Arrow aage ki taraf slide hoga */
}
/* ==========================================================================
2. PREMIUM DHARMIK JHAROKHA GRID (Products)
========================================================================== */
.dharmik-collection-section {
background-color: #fdfaf3;
background-image: radial-gradient(#e5d9c5 1px, transparent 1px);
background-size: 25px 25px;
padding: 40px 0 80px 0;
}
.om-symbol-top { font-size: 45px; color: #c69c38; margin-bottom: 5px; display: block; text-shadow: 0 5px 15px rgba(198, 156, 56, 0.4); animation: slowBreathe 4s infinite alternate; }
.dharmik-heading { color: #c69c38; font-size: 2.8rem; font-family: var(--dharmik-font); font-weight: 700; letter-spacing: 1px; }
.dharmik-divider { width: 120px; height: 3px; margin: 15px auto; background: linear-gradient(90deg, transparent, #c69c38, transparent); }
.dharmik-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px; padding: 20px;
}
.mandir-card {
position: relative;
border-radius: 150px 150px 15px 15px;
padding: 50px 15px 25px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
border: 1px solid rgba(198, 156, 56, 0.4);
overflow: hidden; cursor: pointer;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card-inner-border {
position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
border: 1px dashed rgba(255, 215, 0, 0.3); border-radius: 142px 142px 8px 8px;
pointer-events: none; z-index: 0; transition: all 0.4s ease;
}
.mandir-card:hover .card-inner-border { border: 1px solid rgba(255, 215, 0, 0.8); box-shadow: inset 0 0 20px rgba(198, 156, 56, 0.2); }
/* Deep Heritage Color Gradients */
.theme-crimson { background: linear-gradient(135deg, #4a0e17, #2d050c); }
.theme-peacock { background: linear-gradient(135deg, #09363d, #03171a); }
.theme-saffron { background: linear-gradient(135deg, #5e2105, #300d00); }
.theme-emerald { background: linear-gradient(135deg, #0c3823, #041c10); }
.theme-bronze { background: linear-gradient(135deg, #38200b, #1c0e02); }
.theme-indigo { background: linear-gradient(135deg, #121433, #060717); }
.theme-purple { background: linear-gradient(135deg, #2e0c2e, #140314); }
.theme-mustard { background: linear-gradient(135deg, #4a3500, #241900); }
.theme-slate { background: linear-gradient(135deg, #2b3036, #111317); }
.theme-rosewood{ background: linear-gradient(135deg, #4a0b27, #240311); }
/* Elements Setup */
.hanging-bell { position: absolute; top: -5px; left: 50%; margin-left: -15px; font-size: 30px; transform-origin: top center; filter: drop-shadow(0 5px 8px rgba(0,0,0,0.6)); z-index: 2; transition: transform 0.2s; }
.pushp-vrishti { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; }
.phool { position: absolute; top: -30px; font-size: 20px; opacity: 0; }
.phool:nth-child(1) { left: 20%; }
.phool:nth-child(2) { left: 50%; font-size: 25px; }
.phool:nth-child(3) { left: 80%; }
.card-icon { font-size: 50px; position: relative; z-index: 2; margin-top: 10px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)); transition: transform 0.4s ease; }
.mandir-card h3 {
background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
font-size: 1.15rem; font-family: var(--dharmik-font); font-weight: 700; margin-top: 15px; margin-bottom: 5px; position: relative; z-index: 2; text-transform: uppercase; letter-spacing: 1px;
}
.card-desc {
color: #cccccc; font-size: 0.85rem; line-height: 1.4; position: relative; z-index: 2; padding: 0 5px; opacity: 0.9;
}
.diya-glow { font-size: 25px; margin-top: 10px; position: relative; z-index: 2; filter: drop-shadow(0 0 5px rgba(255,165,0,0.4)); }
/* The Animations */
.mandir-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px rgba(198, 156, 56, 0.3); border-color: #fceabb; }
.mandir-card:hover .card-icon { transform: scale(1.15) translateY(-5px); }
.mandir-card:hover .hanging-bell { animation: ringBell 1.2s ease-in-out infinite; }
.mandir-card:hover .phool:nth-child(1) { animation: fallPhool 1.5s linear infinite; }
.mandir-card:hover .phool:nth-child(2) { animation: fallPhool 1.2s linear infinite 0.3s; }
.mandir-card:hover .phool:nth-child(3) { animation: fallPhool 1.8s linear infinite 0.1s; }
.mandir-card:hover .diya-glow { animation: diyaFlicker 0.6s infinite alternate; }
.btn-primary-brass:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(198, 156, 56, 0.4); }
@keyframes ringBell { 0% { transform: rotate(0deg); } 20% { transform: rotate(25deg); } 40% { transform: rotate(-25deg); } 60% { transform: rotate(15deg); } 80% { transform: rotate(-15deg); } 100% { transform: rotate(0deg); } }
@keyframes fallPhool { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(220px) rotate(360deg); opacity: 0; } }
@keyframes diyaFlicker { 0% { filter: drop-shadow(0 0 5px #ff9800) drop-shadow(0 -5px 10px #f44336); } 100% { filter: drop-shadow(0 0 20px #ffc107) drop-shadow(0 -10px 25px #ff9800); transform: scale(1.1); } }
@keyframes slowBreathe { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.1); opacity: 1; } }
/* ==========================================================================
FEATURED PRODUCTS SLIDER (Shahi Product Card)
========================================================================== */
.premium-products-wrap {
background-color: #0d0805;
background-image: radial-gradient(circle at center, #170f0a 0%, #0d0805 100%);
padding: 80px 0;
position: relative;
border-top: 2px solid rgba(198, 156, 56, 0.3);
border-bottom: 2px solid rgba(198, 156, 56, 0.3);
}
/* 1. Shahi Product Card */
.shahi-product-card {
background: #ffffff;
border-radius: 12px;
padding: 15px;
border: 1px solid rgba(198, 156, 56, 0.2);
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
text-align: center;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.shahi-product-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(198, 156, 56, 0.15);
border-color: rgba(198, 156, 56, 0.6);
}
/* 2. Image Area */
.product-img-box {
display: block;
width: 100%;
aspect-ratio: 4 / 5; /* Lamba portrait size best lagta hai murtiyo ke liye */
border-radius: 8px;
overflow: hidden;
position: relative;
background: #f9f9f9;
}
.product-img-box img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.shahi-product-card:hover .product-img-box img {
transform: scale(1.08); /* Hover par image zoom */
}
/* Hover Image Overlay */
.img-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(13, 8, 5, 0.5); /* Halka dark glass */
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: all 0.4s ease;
}
.view-text {
color: #fff; font-size: 0.9rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 1px; border: 1px solid #fff; padding: 8px 15px; border-radius: 20px;
transform: translateY(20px); transition: all 0.4s ease;
}
.shahi-product-card:hover .img-overlay { opacity: 1; }
.shahi-product-card:hover .view-text { transform: translateY(0); }
/* 3. Product Info Area */
.product-info { padding: 20px 5px 10px; }
.product-title { margin: 0 0 10px 0; }
.product-title a {
color: #3e270e; font-size: 1.1rem; font-family: var(--body-font);
font-weight: 600; text-decoration: none; transition: color 0.3s ease;
/* Lamba naam ho toh usko 1 line me truncate kar dega */
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-title a:hover { color: var(--logo-gold, #c69c38); }
/* WooCommerce Price Style */
.product-price {
color: #c69c38; font-size: 1.15rem; font-weight: 700; margin-bottom: 15px;
}
.product-price del { color: #aaa; font-weight: 400; font-size: 0.9rem; margin-right: 8px; }
.product-price ins { text-decoration: none; }
/* 4. Mini Gold Button */
.btn-mini-gold {
display: inline-block; padding: 8px 20px; width: 100%;
background: #fff; color: #c69c38;
border: 1px solid #c69c38; border-radius: 25px;
font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
text-decoration: none; transition: all 0.3s ease;
}
.btn-mini-gold:hover {
background: linear-gradient(135deg, #fceabb, #c69c38);
color: #111; border-color: transparent;
box-shadow: 0 5px 15px rgba(198, 156, 56, 0.4);
}
/* Slider Navigations (Customized) */
.prod-nav { color: #c69c38 !important; transform: scale(0.7); }
.prod-pag .swiper-pagination-bullet-active { background: #c69c38 !important; }
/* ==========================================================================
B2B DOUBLE ACTION BUTTONS (Details + Bulk Order)
========================================================================== */
.b2b-action-btns {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
/* 1. View Details Button (Outline) */
.btn-outline-gold {
flex: 1; /* Thoda chota rahega */
padding: 8px 5px;
text-align: center;
border: 1px solid var(--logo-gold, #c69c38);
color: var(--logo-gold, #c69c38) !important;
background: transparent;
border-radius: 5px;
font-size: 0.8rem;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-outline-gold:hover {
background: #fdfaf3;
transform: translateY(-2px);
}
/* 2. Bulk Order Button (Solid VIP) */
.btn-solid-gold {
flex: 1.5; /* Ye bada aur highlight hoga */
padding: 8px 10px;
text-align: center;
background: linear-gradient(135deg, #c69c38, #8a6a23);
color: #fff !important;
border-radius: 5px;
font-size: 0.85rem;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
box-shadow: 0 4px 10px rgba(198, 156, 56, 0.3);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.btn-solid-gold:hover {
background: #111; /* B2B luxury dark hover */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}
/* ==========================================================================
WHY CHOOSE US (Royal Trust Cards)
========================================================================== */
.royal-trust-section {
background-color: #0d0805; /* Deep Royal Black/Brown */
background-image: radial-gradient(circle at center, #170f0a 0%, #0d0805 100%);
padding: 80px 0;
position: relative;
border-top: 2px solid rgba(198, 156, 56, 0.3);
border-bottom: 2px solid rgba(198, 156, 56, 0.3);
}
.text-white { color: #ffffff !important; }
/* The Grid */
.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
/* The Trust Card */
.trust-card {
background: linear-gradient(145deg, #16100b, #0d0805);
border: 1px solid rgba(198, 156, 56, 0.2);
padding: 30px 25px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
/* Golden Glow on Hover */
.trust-card::before {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
background: linear-gradient(90deg, transparent, #c69c38, transparent);
opacity: 0; transition: opacity 0.4s ease;
}
.trust-card:hover {
transform: translateY(-10px);
border-color: rgba(198, 156, 56, 0.6);
box-shadow: 0 15px 40px rgba(198, 156, 56, 0.15);
}
.trust-card:hover::before { opacity: 1; }
.trust-icon {
font-size: 45px; margin-bottom: 15px;
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
transition: transform 0.4s ease;
}
.trust-card:hover .trust-icon { transform: scale(1.15); }
.trust-title {
color: #fceabb; /* Soft gold text */
font-family: var(--body-font); font-size: 1.2rem; font-weight: 700; margin-bottom: 10px;
letter-spacing: 0.5px;
}
.trust-desc {
color: #a3a3a3; font-size: 0.95rem; line-height: 1.6; margin: 0;
}
/* ==========================================================================
VIP FAQS (Shanka Samadhan - Premium Accordion)
========================================================================== */
.vip-faq-section {
background-color: #fdfaf3; /* Pavitra cream background */
background-image: url('data:image/svg+xml;utf8,');
padding: 80px 0;
}
.vip-faq-wrap {
max-width: 850px;
margin: 0 auto;
}
.vip-faq-item {
background: #ffffff;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.04);
border: 1px solid rgba(198, 156, 56, 0.15);
overflow: hidden;
transition: all 0.4s ease;
}
.vip-faq-item:hover {
box-shadow: 0 10px 30px rgba(198, 156, 56, 0.12);
transform: translateY(-2px);
}
.vip-faq-item.active {
border-color: #c69c38;
box-shadow: 0 15px 35px rgba(198, 156, 56, 0.2);
}
/* Question Button Area */
.vip-faq-question {
width: 100%; background: transparent; border: none;
padding: 20px 25px;
display: flex; justify-content: space-between; align-items: center;
cursor: pointer; text-align: left;
transition: all 0.3s ease;
}
/* Left side (Badge + Text) */
.q-left {
display: flex; align-items: center; gap: 15px;
}
.q-badge {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; min-width: 40px;
background: linear-gradient(135deg, #fceabb, #c69c38);
color: #3e270e; font-size: 1.2rem; font-weight: 800; font-family: var(--body-font);
border-radius: 50%;
box-shadow: 0 4px 10px rgba(198, 156, 56, 0.4);
}
.q-text {
color: #3e270e; font-size: 1.15rem; font-weight: 700; font-family: var(--body-font);
line-height: 1.4;
transition: color 0.3s ease;
}
.vip-faq-question:hover .q-text, .vip-faq-item.active .q-text {
color: #c69c38;
}
/* Toggle Icon (+ / -) */
.q-toggle-icon {
font-size: 1.8rem; font-weight: 300; color: #a3a3a3;
transition: transform 0.4s ease, color 0.4s ease;
min-width: 30px; text-align: right;
}
.vip-faq-item.active .q-toggle-icon {
transform: rotate(45deg); /* Cross (x) ban jayega */
color: #d32f2f; /* Khulne par lal rang */
}
/* The Answer Panel */
.vip-faq-answer {
max-height: 0; overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: #faf7f0;
}
.ans-inner {
padding: 0 25px 25px 70px; /* Padding taaki text 'Q' badge ke neeche se shuru ho */
border-left: 3px solid #c69c38; /* Left me golden patti */
margin-left: 45px;
margin-bottom: 25px;
}
.ans-inner p {
color: #555; font-size: 1.05rem; line-height: 1.7; margin: 0;
}
/* ==========================================================================
SHAHI FOOTER (Premium Dark Theme)
========================================================================== */
.shahi-footer {
background-color: #0d0805; /* Deep Royal Dark */
border-top: 3px solid #c69c38;
color: #e0e0e0;
padding-top: 90px; /* Thoda extra space ghanti ke liye */
position: relative;
overflow: hidden;
}
/* 🌟 Canvas Settings */
#pushpVrishtiCanvas {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 0;
pointer-events: none; /* Text aur button click hone chahiye */
}
.shahi-footer .container { position: relative; z-index: 10; }
/* 🌟 Swinging Temple Bell */
.hanging-mandir-bell {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
transform-origin: top center;
animation: bellSwing 4s ease-in-out infinite;
}
.bell-thread {
width: 2px;
height: 30px;
background: linear-gradient(to bottom, #8a6a23, #c69c38);
}
.bell-icon {
font-size: 2.5rem;
line-height: 1;
margin-top: -5px;
filter: drop-shadow(0 5px 15px rgba(198, 156, 56, 0.6));
}
@keyframes bellSwing {
0% { transform: translateX(-50%) rotate(8deg); }
50% { transform: translateX(-50%) rotate(-8deg); }
100% { transform: translateX(-50%) rotate(8deg); }
}
/* 🌟 Flickering Diya (Jyot) Animation */
.jyot-anim {
display: inline-block;
filter: drop-shadow(0 0 8px rgba(255, 153, 0, 0.8));
animation: diyaFlicker 1.5s infinite alternate;
}
@keyframes diyaFlicker {
0% { opacity: 0.8; filter: drop-shadow(0 0 5px rgba(255, 153, 0, 0.5)); transform: scale(0.95); }
100% { opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 153, 0, 1)); transform: scale(1.05); }
}
/* 🌟 Grid & Widgets */
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 50px;
}
.footer-logo-title {
color: #fceabb; font-family: var(--dharmik-font); font-size: 2.2rem; margin-bottom: 10px;
}
.footer-widget-title {
color: #fff; font-family: var(--body-font); font-size: 1.3rem; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.footer-divider {
width: 50px; height: 3px; background: linear-gradient(90deg, #c69c38, transparent); margin-bottom: 20px; border-radius: 2px;
}
.footer-about-desc { color: #a3a3a3; line-height: 1.8; font-size: 1.05rem; }
/* 🌟 Custom Links */
.footer-nav-list { list-style: none; padding: 0; margin: 0; }
.footer-nav-list li { margin-bottom: 12px; }
.footer-nav-list li a {
color: #a3a3a3; text-decoration: none; font-size: 1.05rem; transition: all 0.3s; display: inline-block;
}
.footer-nav-list li a:hover { color: #c69c38; transform: translateX(10px); }
.footer-nav-list li a::before { content: '🕉️ '; opacity: 0; transition: opacity 0.3s; position: absolute; left: -25px; font-size: 0.9rem; }
.footer-nav-list li a:hover::before { opacity: 1; }
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; color: #a3a3a3; font-size: 1.05rem; line-height: 1.5; }
/* Bottom Bar */
.footer-bottom { background: #050302; padding: 20px 0; border-top: 1px solid rgba(198, 156, 56, 0.1); position: relative; z-index: 10;}
.bottom-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.footer-bottom p { margin: 0; color: #888; font-size: 0.95rem; }
.dev-credit { color: #c69c38 !important; }
/* Reveal Up */
.reveal-up { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal-up.active { opacity: 1; transform: translateY(0); }
/* ==========================================================================
ABOUT US PAGE - FULL VIP STYLING
========================================================================== */
/* --- 1. ABOUT HERO BANNER & WELCOME BOX --- */
.about-hero-banner {
position: relative;
/* Mathura ke mandir ya murtio ki dark image lagao yahan */
background-image: url('https://images.unsplash.com/photo-1590050752117-238cb0fb12b1?auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed; /* VIP Parallax Scroll Effect */
padding: 160px 20px 100px 20px;
text-align: center;
border-bottom: 3px solid var(--logo-gold);
}
.about-hero-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, rgba(10, 6, 4, 0.92), rgba(10, 6, 4, 0.75));
}
.about-hero-content {
position: relative;
z-index: 2;
}
.about-hero-content .shahi-heading {
color: #ffffff;
font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive shahi font */
margin: 10px 0;
text-shadow: 0 5px 15px rgba(0,0,0,0.9);
}
.about-hero-content .hero-subtitle {
color: #fceabb;
font-size: clamp(1.1rem, 2vw, 1.4rem);
letter-spacing: 2px;
font-weight: 600;
text-transform: uppercase;
}
/* Glassmorphism Welcome Box */
.welcome-box {
background: rgba(10, 6, 4, 0.5);
border: 1px solid rgba(198, 156, 56, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 40px;
border-radius: 15px;
max-width: 950px;
margin: 40px auto 0;
box-shadow: 0 15px 40px rgba(0,0,0,0.6);
text-align: justify;
}
.welcome-box p {
color: #e0e0e0;
font-size: 1.15rem;
line-height: 1.8;
margin-bottom: 15px;
}
.welcome-box p:last-child { margin-bottom: 0; }
/* --- 2. EXPERTISE SECTION (Dark Wood Theme) --- */
.dark-expertise-section {
border-top: 1px solid rgba(198, 156, 56, 0.2);
border-bottom: 1px solid rgba(198, 156, 56, 0.2);
}
.expertise-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin-top: 40px;
}
.exp-card {
background: linear-gradient(145deg, #1a130d, #0d0805);
border: 1px solid rgba(198, 156, 56, 0.15);
padding: 30px 20px;
border-radius: 12px;
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.exp-card:hover {
transform: translateY(-8px);
border-color: var(--logo-gold);
box-shadow: 0 10px 25px rgba(198, 156, 56, 0.15);
background: linear-gradient(145deg, #221811, #0d0805);
}
.exp-icon {
font-size: 2.8rem;
margin-bottom: 15px;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.exp-card h4 {
color: #fceabb;
font-size: 1.15rem;
margin: 0;
font-weight: 600;
line-height: 1.4;
font-family: var(--body-font);
}
/* --- 3. VISION & MISSION CARDS (Light Theme) --- */
.mv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
max-width: 950px;
margin: 0 auto;
}
.mv-card {
padding: 40px 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border: 1px solid #e5d9c5;
}
.mv-card::before {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
background: var(--brass-gradient);
opacity: 0; transition: opacity 0.4s ease;
}
.mv-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(198, 156, 56, 0.15);
border-color: var(--logo-gold);
}
.mv-card:hover::before { opacity: 1; }
.mv-icon {
font-size: 3.5rem;
margin-bottom: 20px;
filter: drop-shadow(0 5px 10px rgba(198,156,56,0.25));
}
.mv-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 15px;
letter-spacing: 0.5px;
font-family: var(--dharmik-font);
}
.mv-desc {
font-size: 1.1rem;
line-height: 1.7;
margin: 0;
}
/* --- 4. CITY TAGS & QUALITY SECTION --- */
.city-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.city-tag {
background: transparent;
color: var(--logo-gold);
border: 1px solid var(--logo-gold);
padding: 8px 20px;
border-radius: 30px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
cursor: default;
}
.city-tag:hover {
background: var(--logo-gold);
color: #0a0604;
box-shadow: 0 5px 15px rgba(198, 156, 56, 0.3);
transform: translateY(-2px);
}
/* --- 5. CTA CONTACT PILLS (Bottom Section) --- */
.about-cta-section {
position: relative;
overflow: hidden;
}
.about-cta-section::before {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
.cta-contact-pills {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.cta-pill {
background: rgba(255,255,255,0.4);
color: #3e270e;
padding: 12px 25px;
border-radius: 8px;
font-weight: 700;
font-size: 1.05rem;
border: 1px solid rgba(62, 39, 14, 0.2);
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.cta-pill:hover {
background: #ffffff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.btn-solid-dark {
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.btn-solid-dark:hover {
background: #1a1a1a !important;
transform: translateY(-3px);
box-shadow: 0 15px 25px rgba(0,0,0,0.3) !important;
color: #fff !important;
}
/* --- 6. MOBILE RESPONSIVENESS FIXES --- */
@media screen and (max-width: 991px) {
.reach-section .row {
flex-direction: column;
}
.col-reach, .col-quality {
width: 100%;
}
}
@media screen and (max-width: 768px) {
.welcome-box { padding: 25px; text-align: center; }
.welcome-box p { font-size: 1rem; text-align: center; }
.expertise-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mv-grid { grid-template-columns: 1fr; }
.cta-contact-pills { flex-direction: column; align-items: center; }
.cta-pill { width: 100%; max-width: 300px; text-align: center; }
}
/* ==========================================================================
UTILITY & SPACING FIXES (Crucial for Layout Alignment)
========================================================================== */
/* Main Section Spacing */
.section-padding {
padding: 90px 0;
}
/* Text Alignments */
.text-center {
text-align: center !important;
}
/* Dharmik Divider Centering Fix */
.text-center .dharmik-divider {
margin-left: auto;
margin-right: auto;
}
/* Margin Bottom Utilities (mb) */
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 3.5rem !important; }
/* Margin Top Utilities (mt) */
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3.5rem !important; }
/* ==========================================================================
ABOUT PAGE SPECIFIC FIXES (From Screenshot Analysis)
========================================================================== */
/* Fix for overlapping Hero Content */
.about-hero-content {
padding-top: 30px;
}
/* Fix for Who We Are Text Alignment */
.heritage-text-col .heritage-heading {
margin-bottom: 20px;
}
/* Ensure Expertise and Trust Grids have breathing room */
.dark-expertise-section .expertise-grid {
margin-bottom: 60px;
}
/* Ensure Row class works properly if missing */
.row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
/* Fix for CTA Section Padding */
.about-cta-section {
padding: 80px 20px;
}
/* Responsive Padding Fixes */
@media screen and (max-width: 768px) {
.section-padding {
padding: 60px 0;
}
.mb-5 {
margin-bottom: 2.5rem !important;
}
.mt-5 {
margin-top: 2.5rem !important;
}
}
/* ==========================================================================
4. PREMIUM ASYMMETRIC OVERVIEW SECTION (Welcome + Vision + Mission)
========================================================================== */
.premium-overview-section {
background-color: #0c0805; /* Ekdum deep rich brass/black color */
position: relative;
overflow: hidden;
border-top: 1px solid rgba(198, 156, 56, 0.2);
border-bottom: 1px solid rgba(198, 156, 56, 0.2);
}
/* Background Royal Pattern (Mandir Jali + Spotlight Glow) */
.overview-bg-pattern {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background-image:
/* 1. Golden Dotted Mesh (Jali Effect) */
radial-gradient(rgba(198, 156, 56, 0.4) 1.5px, transparent 1.5px),
/* 2. Left Side Soft Gold Glow */
radial-gradient(circle at 15% 50%, rgba(198, 156, 56, 0.12) 0%, transparent 60%),
/* 3. Right Bottom Soft Gold Glow */
radial-gradient(circle at 85% 80%, rgba(198, 156, 56, 0.08) 0%, transparent 50%);
background-size: 35px 35px, 100% 100%, 100% 100%; /* Pehla size dots ke liye hai */
pointer-events: none;
z-index: 1;
}
/* The Left-Right Grid Layout */
.overview-grid {
display: grid;
grid-template-columns: 1.2fr 1fr; /* Left side thoda bada rahega */
gap: 60px;
align-items: center;
}
/* --- LEFT: Welcome Content --- */
.overview-left-welcome {
padding-right: 20px;
}
.welcome-text-content p {
color: #e0e0e0;
font-size: 1.15rem;
line-height: 1.8;
margin-bottom: 20px;
font-family: var(--body-font);
text-align: justify;
}
.welcome-text-content p:last-child { margin-bottom: 0; }
/* --- RIGHT: Vision & Mission Stack --- */
.overview-right-vimi {
display: flex;
flex-direction: column;
gap: 30px; /* Dono cards ke beech ka gap */
}
/* Glassmorphism Vimi Cards */
.vimi-glass-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(198, 156, 56, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 15px;
padding: 35px 30px;
display: flex;
gap: 25px;
align-items: flex-start;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
/* Card Hover Shine */
.vimi-glass-card::after {
content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
transform: skewX(-25deg); transition: all 0.6s ease;
}
.vimi-glass-card:hover {
transform: translateX(-10px); /* Hover pe left side slide hoga */
border-color: rgba(198, 156, 56, 0.6);
background: rgba(198, 156, 56, 0.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}
.vimi-glass-card:hover::after { left: 200%; }
/* Icon & Text Styling */
.vimi-icon-wrap {
background: linear-gradient(135deg, #1a130d, #0d0805);
border: 1px solid rgba(198, 156, 56, 0.4);
min-width: 70px; height: 70px;
border-radius: 50%;
display: flex; justify-content: center; align-items: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: transform 0.4s ease;
}
.vimi-glass-card:hover .vimi-icon-wrap { transform: scale(1.1) rotate(10deg); }
.vimi-icon { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.vimi-text-wrap { flex: 1; }
.vimi-title {
color: #fceabb;
font-size: 1.5rem;
font-family: var(--dharmik-font);
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 1px;
}
.vimi-desc {
color: #a3a3a3;
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
}
/* --- MOBILE RESPONSIVENESS --- */
@media screen and (max-width: 991px) {
.overview-grid {
grid-template-columns: 1fr; /* Mobile me ek ke neeche ek aayega */
gap: 50px;
}
.overview-left-welcome {
padding-right: 0;
text-align: center;
}
.overview-left-welcome .dharmik-divider {
margin-left: auto; margin-right: auto;
}
.welcome-text-content p {
text-align: center;
}
}
@media screen and (max-width: 576px) {
.vimi-glass-card {
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 20px;
}
}
/* ==========================================================================
GLOBAL INQUIRY POPUP MODAL
========================================================================== */
.rm-modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(10, 6, 4, 0.85); /* Dark transparent background */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
/* Jab active class aayegi tab popup dikhega */
.rm-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.rm-modal-box {
background: #ffffff;
padding: 40px 35px;
border-radius: 15px;
width: 90%;
max-width: 450px;
position: relative;
transform: translateY(-50px) scale(0.9);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
border: 3px solid #c69c38; /* Gold border */
}
.rm-modal-overlay.active .rm-modal-box {
transform: translateY(0) scale(1);
}
.rm-modal-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 35px;
background: none;
border: none;
color: #888;
cursor: pointer;
line-height: 1;
transition: color 0.3s ease, transform 0.3s ease;
}
.rm-modal-close:hover {
color: #d32f2f; /* Red on hover */
transform: rotate(90deg); /* Style ke liye ghumega */
}
/* Inputs on focus */
#popup-quote-form input:focus, #popup-quote-form select:focus, #popup-quote-form textarea:focus {
outline: none;
border-color: #c69c38 !important;
box-shadow: 0 0 10px rgba(198, 156, 56, 0.2);
}
/* ==========================================================================
CONTACT US PAGE SPECIFIC STYLES
========================================================================== */
/* Main Grid Layout */
.contact-page-grid {
display: grid;
grid-template-columns: 1fr 1.2fr; /* Form thoda bada rahega */
gap: 50px;
align-items: flex-start;
}
/* --- Left: Contact Detail Cards --- */
.contact-detail-cards {
display: flex;
flex-direction: column;
gap: 20px;
}
.c-card {
background: #ffffff;
border: 1px solid rgba(198, 156, 56, 0.2);
border-left: 4px solid #c69c38;
padding: 20px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.03);
transition: all 0.3s ease;
}
.c-card:hover {
transform: translateX(10px);
box-shadow: 0 10px 25px rgba(198, 156, 56, 0.15);
}
.c-icon {
font-size: 2rem;
min-width: 50px;
height: 50px;
background: linear-gradient(135deg, #fdfaf3, #f4ebd6);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px dashed #c69c38;
}
.c-text h4 {
color: #3e270e;
font-size: 1.1rem;
margin: 0 0 5px 0;
font-family: var(--body-font);
}
.c-text p {
color: #555;
margin: 0;
font-size: 0.95rem;
font-weight: 500;
}
/* --- Right: The Dark Premium Form --- */
.premium-form-box {
background: linear-gradient(145deg, #1a130d, #0d0805);
border: 1px solid rgba(198, 156, 56, 0.3);
padding: 40px;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
.premium-form-box::before {
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px;
background: var(--brass-gradient);
}
.premium-form-box .form-row {
display: flex; gap: 20px;
}
.premium-form-box .half { flex: 1; }
.premium-form-box .form-group {
margin-bottom: 20px;
}
.premium-form-box label {
display: block;
color: #fceabb;
font-size: 0.9rem;
margin-bottom: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.premium-form-box input, .premium-form-box select, .premium-form-box textarea {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(198, 156, 56, 0.3);
color: #fff;
padding: 12px 15px;
border-radius: 6px;
font-family: var(--body-font);
font-size: 1rem;
transition: all 0.3s ease;
}
/* Select Box Text Color fix */
.premium-form-box select option {
background: #0d0805;
color: #fff;
}
.premium-form-box input:focus, .premium-form-box select:focus, .premium-form-box textarea:focus {
outline: none;
border-color: #c69c38;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 15px rgba(198, 156, 56, 0.2);
}
/* Map Section */
.contact-map-wrap {
filter: grayscale(20%) contrast(110%);
border-top: 3px solid #c69c38;
}
/* Mobile Responsiveness */
@media screen and (max-width: 991px) {
.contact-page-grid { grid-template-columns: 1fr; }
.premium-form-box .form-row { flex-direction: column; gap: 0; }
}
@media screen and (max-width: 576px) {
.premium-form-box { padding: 25px 20px; }
}
/* ==========================================================================
OUR PRODUCTS / SHOP PAGE STYLES
========================================================================== */
/* 1. Category Filter Bar */
.shop-filter-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
}
.filter-btn {
background: #ffffff;
color: #3e270e;
border: 1px solid rgba(198, 156, 56, 0.3);
padding: 10px 25px;
border-radius: 30px;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.filter-btn:hover {
border-color: #c69c38;
transform: translateY(-2px);
}
.filter-btn.active {
background: linear-gradient(135deg, #fceabb, #c69c38);
color: #111;
border-color: transparent;
box-shadow: 0 5px 15px rgba(198, 156, 56, 0.4);
}
/* 2. Shop Grid */
.shop-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 30px;
}
.shop-item {
transition: opacity 0.3s ease;
}
/* 3. Custom Pagination */
.shop-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.shop-pagination .page-numbers {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: #fff;
color: #3e270e;
border: 1px solid rgba(198, 156, 56, 0.3);
border-radius: 5px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.shop-pagination .page-numbers:hover {
background: #fdfaf3;
border-color: #c69c38;
color: #c69c38;
}
.shop-pagination .page-numbers.current {
background: #c69c38;
color: #fff;
border-color: #c69c38;
box-shadow: 0 4px 10px rgba(198, 156, 56, 0.3);
}
.shop-pagination .prev, .shop-pagination .next {
width: auto;
padding: 0 15px;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 1px;
}
/* ==========================================================================
ADVANCED SHOP LAYOUT (Sidebar + Grid)
========================================================================== */
.shop-page-wrapper {
display: flex;
gap: 40px;
align-items: flex-start;
}
/* --- 1. THE SIDEBAR FILTER --- */
.shop-sidebar {
width: 300px;
flex-shrink: 0;
background: #ffffff;
border: 1px solid rgba(198, 156, 56, 0.3);
border-top: 4px solid #c69c38;
border-radius: 8px;
padding: 25px;
position: sticky;
top: 100px; /* Sticky scroll effect */
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.filter-main-title {
color: #3e270e;
font-size: 1.3rem;
font-family: var(--dharmik-font);
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px dashed rgba(198, 156, 56, 0.4);
}
.filter-group {
margin-bottom: 25px;
}
.filter-heading {
color: #111;
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Custom Radio Buttons */
.filter-options { display: flex; flex-direction: column; gap: 10px; }
.custom-radio {
display: flex;
align-items: center;
position: relative;
padding-left: 28px;
cursor: pointer;
font-size: 0.95rem;
color: #555;
font-weight: 500;
user-select: none;
transition: color 0.3s ease;
}
.custom-radio:hover { color: #c69c38; }
.custom-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-mark {
position: absolute;
top: 2px;
left: 0;
height: 18px;
width: 18px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 50%;
transition: all 0.3s ease;
}
.custom-radio:hover input ~ .radio-mark { background-color: #fdfaf3; border-color: #c69c38; }
.custom-radio input:checked ~ .radio-mark {
background-color: #c69c38;
border-color: #c69c38;
}
.custom-radio input:checked ~ .radio-mark:after {
content: ""; position: absolute; display: block;
top: 4px; left: 4px; width: 8px; height: 8px;
border-radius: 50%; background: white;
}
.custom-radio input:checked ~ span:not(.radio-mark) {
color: #111; font-weight: 700;
}
.count { color: #aaa; font-size: 0.8rem; margin-left: 5px; }
.clear-filter-btn {
display: block; text-align: center; margin-top: 15px;
color: #888; text-decoration: underline; font-size: 0.9rem;
}
.clear-filter-btn:hover { color: #d32f2f; }
/* --- 2. THE PRODUCT GRID --- */
.shop-main-content {
flex: 1;
}
.shop-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
}
/* Custom Pagination */
.shop-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-pagination .page-numbers {
display: inline-flex; justify-content: center; align-items: center;
width: 40px; height: 40px; background: #fff; color: #3e270e;
border: 1px solid rgba(198, 156, 56, 0.3); border-radius: 5px;
font-weight: 600; text-decoration: none; transition: all 0.3s ease;
}
.shop-pagination .page-numbers:hover { background: #fdfaf3; border-color: #c69c38; color: #c69c38; }
.shop-pagination .page-numbers.current {
background: #c69c38; color: #fff; border-color: #c69c38; box-shadow: 0 4px 10px rgba(198, 156, 56, 0.3);
}
/* Mobile Adjustments */
@media screen and (max-width: 991px) {
.shop-page-wrapper { flex-direction: column; }
.shop-sidebar { width: 100%; position: relative; top: 0; margin-bottom: 20px; }
}
/* ==========================================================================
ADVANCED FILTER STYLES (Price, Sort, Count)
========================================================================== */
/* Top Bar Product Count */
.shop-top-bar {
background: #fff;
border: 1px solid rgba(198, 156, 56, 0.2);
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.product-count {
margin: 0;
color: #555;
font-size: 1.05rem;
}
.product-count strong {
color: #3e270e;
}
/* Sort By Dropdown */
.rm-sort-select {
width: 100%;
padding: 10px 15px;
border: 1px solid rgba(198, 156, 56, 0.4);
border-radius: 5px;
background-color: #fff;
color: #3e270e;
font-family: var(--body-font);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.rm-sort-select:focus {
outline: none;
border-color: #c69c38;
box-shadow: 0 0 10px rgba(198, 156, 56, 0.2);
}
/* Price Range Inputs */
.price-input-flex {
display: flex;
align-items: center;
gap: 10px;
}
.price-input-flex input {
width: 100%;
padding: 10px;
border: 1px solid rgba(198, 156, 56, 0.4);
border-radius: 5px;
font-family: var(--body-font);
font-size: 0.95rem;
color: #333;
transition: all 0.3s ease;
}
.price-input-flex input:focus {
outline: none;
border-color: #c69c38;
box-shadow: 0 0 10px rgba(198, 156, 56, 0.2);
}
.price-input-flex span {
color: #888;
font-weight: bold;
}
/* ==========================================================================
ULTRA-CLEAN SINGLE PRODUCT STYLES
========================================================================== */
/* Breadcrumbs */
.rm-pro-breadcrumbs {
padding: 130px 0 20px 0; /* Header margin fix */
background: #fdfaf3;
font-size: 0.9rem;
color: #888;
}
.rm-pro-breadcrumbs a { color: #555; text-decoration: none; }
.rm-pro-breadcrumbs a:hover { color: #c69c38; }
.rm-pro-breadcrumbs span { margin: 0 8px; color: #ccc; }
.rm-pro-breadcrumbs .rm-current { color: #111; font-weight: 500; }
/* Main Section */
.rm-pro-main-section {
background: #fdfaf3;
padding: 60px 0;
}
.rm-pro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
/* Gallery Area */
.rm-pro-gallery { width: 100%; }
.rm-pro-main-img {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
border: 1px solid #eaeaea;
text-align: center;
}
.rm-pro-main-img img {
width: 100%;
max-height: 500px;
object-fit: contain;
transition: opacity 0.3s ease;
}
.rm-pro-thumbs {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 5px;
}
.rm-thumb-item {
width: 80px; height: 80px; flex-shrink: 0;
border: 1px solid #eaeaea; background: #fff; border-radius: 6px;
cursor: pointer; padding: 5px; transition: all 0.2s;
}
.rm-thumb-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.rm-thumb-item.active { border-color: #c69c38; box-shadow: 0 0 0 1px #c69c38; }
/* Product Details Area */
.rm-pro-title {
font-size: 2.4rem;
color: #111;
font-weight: 600;
margin: 0 0 15px 0;
line-height: 1.2;
}
.rm-pro-price-row {
display: flex; align-items: center; gap: 15px;
margin-bottom: 25px; padding-bottom: 25px;
border-bottom: 1px solid #eaeaea;
}
.rm-pro-price { font-size: 2rem; color: #c69c38; font-weight: 700; }
.rm-pro-unit { font-size: 1rem; color: #888; font-weight: 400; }
.rm-pro-badge {
background: rgba(198, 156, 56, 0.1); color: #c69c38;
padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
}
.rm-pro-short-desc {
font-size: 1.05rem; color: #555; line-height: 1.7; margin-bottom: 30px;
}
/* Specs Layout */
.rm-pro-specs {
background: #fff; border: 1px solid #eaeaea;
border-radius: 8px; padding: 20px; margin-bottom: 30px;
}
.spec-line {
display: flex; justify-content: space-between;
padding: 8px 0; border-bottom: 1px solid #f5f5f5;
font-size: 0.95rem;
}
.spec-line:last-child { border-bottom: none; padding-bottom: 0; }
.spec-line .lbl { color: #888; width: 40%; }
.spec-line .val { color: #111; font-weight: 500; width: 60%; text-align: right; }
.spec-line a { color: #c69c38; text-decoration: none; }
/* Buttons */
.rm-pro-actions { display: flex; gap: 15px; margin-bottom: 25px; }
.rm-btn {
flex: 1; padding: 15px 20px; text-align: center;
border-radius: 6px; font-size: 1rem; font-weight: 600;
cursor: pointer; transition: all 0.3s; text-decoration: none;
border: none; display: block;
}
.rm-btn-wa { background: #25D366; color: #fff !important; }
.rm-btn-wa:hover { background: #1ebd5a; }
.rm-btn-quote { background: #111; color: #fff; border: 1px solid #111; }
.rm-btn-quote:hover { background: #c69c38; border-color: #c69c38; }
/* Features */
.rm-pro-features { display: flex; gap: 20px; flex-wrap: wrap; }
.rm-pro-features span { font-size: 0.9rem; color: #666; display: flex; align-items: center; gap: 5px; }
.rm-pro-features .icon { color: #c69c38; font-weight: bold; font-style: normal; }
/* ==========================================================================
TABS SECTION (Description, Video, Brochure)
========================================================================== */
.rm-pro-tabs-section { padding: 60px 0; background: #fff; border-top: 1px solid #eaeaea; }
.rm-tabs-header {
display: flex; justify-content: center; gap: 30px;
border-bottom: 1px solid #eaeaea; margin-bottom: 40px;
}
.rm-tab-btn {
background: none; border: none; padding: 0 0 15px 0;
font-size: 1.1rem; font-weight: 600; color: #888;
cursor: pointer; position: relative; transition: color 0.3s;
}
.rm-tab-btn:hover { color: #111; }
.rm-tab-btn.active { color: #c69c38; }
.rm-tab-btn.active::after {
content: ''; position: absolute; bottom: -1px; left: 0;
width: 100%; height: 2px; background: #c69c38;
}
.rm-tab-pane { display: none; animation: fadeIn 0.4s ease; max-width: 900px; margin: 0 auto; }
.rm-tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Tab Content Styling */
.rm-content-format h2, .rm-content-format h3 { color: #111; margin-bottom: 15px; }
.rm-content-format p { color: #555; line-height: 1.8; margin-bottom: 15px; }
.rm-content-format ul { padding-left: 20px; color: #555; line-height: 1.8; }
.rm-video-wrapper iframe, .rm-video-wrapper video {
width: 100%; aspect-ratio: 16/9; border-radius: 8px; border: 1px solid #eaeaea;
}
.rm-brochure-wrapper { text-align: center; padding: 40px; background: #fdfaf3; border-radius: 8px; border: 1px dashed #c69c38; }
/* Mobile View */
@media screen and (max-width: 991px) {
.rm-pro-grid { grid-template-columns: 1fr; gap: 30px; }
.rm-pro-actions { flex-direction: column; }
.rm-tabs-header { gap: 15px; overflow-x: auto; white-space: nowrap; justify-content: flex-start; }
}
/* ==========================================================================
CATEGORIES PAGE STYLES (VIP GRID)
========================================================================== */
.rm-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px;
}
.rm-cat-card {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
border: 1px solid rgba(198, 156, 56, 0.3);
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: all 0.4s ease;
background: #fff;
}
.rm-cat-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* Ekdum square image block */
overflow: hidden;
}
.rm-cat-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
/* Dark gradient overlay for text readability */
.rm-cat-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, transparent 40%, rgba(10, 6, 4, 0.9) 100%);
transition: all 0.4s ease;
}
.rm-cat-content {
position: absolute;
bottom: 0; left: 0; width: 100%;
padding: 25px;
z-index: 2;
text-align: center;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.rm-cat-content h3 {
color: #fceabb;
font-family: var(--dharmik-font);
font-size: 1.2rem;
margin: 0 0 5px 0;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.rm-cat-count {
display: inline-block;
color: #fff;
font-size: 0.9rem;
font-weight: 500;
background: rgba(198, 156, 56, 0.8);
padding: 3px 12px;
border-radius: 15px;
margin-bottom: 10px;
}
.rm-cat-btn {
color: #c69c38;
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0;
transition: opacity 0.4s ease;
}
/* Hover Effects */
.rm-cat-card:hover {
transform: translateY(-5px);
border-color: #c69c38;
box-shadow: 0 15px 40px rgba(198, 156, 56, 0.2);
}
.rm-cat-card:hover .rm-cat-img-wrap img {
transform: scale(1.1); /* Hover par image zoom hogi */
}
.rm-cat-card:hover .rm-cat-overlay {
background: linear-gradient(to bottom, transparent 20%, rgba(10, 6, 4, 0.95) 100%);
}
.rm-cat-card:hover .rm-cat-content {
transform: translateY(0); /* Text upar aayega */
}
.rm-cat-card:hover .rm-cat-btn {
opacity: 1; /* Button dikhne lagega */
}
/* Mobile Setup */
@media screen and (max-width: 576px) {
.rm-category-grid { grid-template-columns: 1fr; }
.rm-cat-content { transform: translateY(0); }
.rm-cat-btn { opacity: 1; }
}
/* ==========================================================================
CATEGORY (TAXONOMY) PAGE VIP STYLES
========================================================================== */
/* Intro & Top Bar */
.rm-cat-intro { max-width: 800px; margin: 0 auto; color: #555; font-size: 1.15rem; line-height: 1.8; }
.rm-cat-top-bar {
background: #fff; border: 1px solid rgba(198, 156, 56, 0.2);
padding: 15px 20px; border-radius: 8px; margin-bottom: 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.02); color: #555;
}
.rm-cat-top-bar strong { color: #c69c38; font-size: 1.1rem; }
.rm-no-products { grid-column: 1 / -1; text-align: center; padding: 50px; background: #fff; border: 1px dashed #c69c38; border-radius: 8px; }
.rm-no-products h3 { color: #3e270e; margin-bottom: 10px; }
/* --- SEO & FAQ Premium Split Layout --- */
.rm-seo-faq-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 40px;
align-items: flex-start;
}
/* Left: SEO Cards */
.rm-seo-card {
background: #fff;
border-radius: 12px;
padding: 35px;
margin-bottom: 30px;
border: 1px solid rgba(198, 156, 56, 0.15);
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
transition: transform 0.3s ease;
}
.rm-seo-card:hover { transform: translateY(-3px); border-color: rgba(198, 156, 56, 0.4); }
.seo-heading { color: #3e270e; font-size: 2rem; font-family: var(--dharmik-font); margin-bottom: 20px; border-bottom: 2px solid #fdfaf3; padding-bottom: 10px; }
.seo-body { color: #555; line-height: 1.8; font-size: 1.05rem; }
.seo-body p { margin-bottom: 15px; }
.seo-body ul { padding-left: 20px; margin-bottom: 15px; list-style-type: none; }
.seo-body ul li { position: relative; margin-bottom: 10px; }
.seo-body ul li::before { content: '✨'; position: absolute; left: -25px; top: 0px; font-size: 0.9rem; }
/* Right: FAQ Sidebar */
.rm-faq-sidebar { position: sticky; top: 100px; }
.rm-faq-card {
background: #fdfaf3;
border-radius: 12px;
border: 1px solid #c69c38;
overflow: hidden;
box-shadow: 0 10px 30px rgba(198, 156, 56, 0.08);
}
.faq-card-header {
background: linear-gradient(135deg, #1a130d, #0d0805);
padding: 20px; text-align: center; color: #fceabb;
border-bottom: 3px solid #c69c38; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.faq-card-header h3 { margin: 0; font-family: var(--body-font); font-size: 1.3rem; letter-spacing: 0.5px; }
.faq-icon { font-size: 1.5rem; }
.rm-faq-accordion { padding: 20px; }
.rm-faq-item { margin-bottom: 15px; border-bottom: 1px solid rgba(198, 156, 56, 0.2); padding-bottom: 10px; }
.rm-faq-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.rm-faq-question {
width: 100%; background: none; border: none; text-align: left;
display: flex; justify-content: space-between; align-items: center;
color: #3e270e; font-weight: 700; font-size: 1.05rem; padding: 10px 0; cursor: pointer;
}
.rm-faq-question:hover { color: #c69c38; }
.q-toggle { font-size: 1.5rem; color: #c69c38; font-weight: normal; transition: transform 0.3s; }
.rm-faq-item.active .q-toggle { transform: rotate(180deg); }
.rm-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.rm-faq-answer .ans-inner { padding: 5px 0 15px 0; color: #666; line-height: 1.7; font-size: 0.95rem; }
/* Bottom Royal CTA */
.rm-bottom-cta {
background: linear-gradient(135deg, #1a130d, #0a0604);
border-top: 3px solid #c69c38; padding: 80px 0;
}
.rm-bottom-cta h2 { color: #fceabb; font-family: var(--dharmik-font); font-size: 2.5rem; margin-bottom: 15px; }
.cta-desc { color: #ccc; font-size: 1.15rem; max-width: 700px; margin: 0 auto 30px; line-height: 1.8; }
.cta-buttons-wrap { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.rm-btn-gold {
background: #c69c38; color: #111; padding: 15px 35px; border-radius: 5px; border: none;
font-weight: 700; font-size: 1.1rem; text-decoration: none; cursor: pointer; text-transform: uppercase;
transition: all 0.3s; box-shadow: 0 5px 15px rgba(198, 156, 56, 0.3);
}
.rm-btn-gold:hover { background: #fceabb; transform: translateY(-3px); }
.rm-btn-whatsapp {
background: #25D366; color: #fff; padding: 15px 35px; border-radius: 5px; text-decoration: none;
font-weight: 700; font-size: 1.1rem; text-transform: uppercase; transition: all 0.3s;
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}
.rm-btn-whatsapp:hover { background: #1ebd5a; transform: translateY(-3px); }
/* Mobile Adjustments */
@media screen and (max-width: 991px) {
.rm-seo-faq-grid { grid-template-columns: 1fr; gap: 30px; }
.rm-faq-sidebar { position: relative; top: 0; }
}
.cta-desc-rudransh_product_cat p span {
color:#fff !important;
}
/* ==========================================================================
PREMIUM LEGAL / POLICY DOCUMENT STYLES
========================================================================== */
/* The Floating Paper Box */
.rm-vip-document-box {
max-width: 950px;
margin: -40px auto 0; /* Header ke upar thoda overlap karega VIP look ke liye */
background: #ffffff;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
position: relative;
z-index: 10;
overflow: hidden;
}
/* Top Accent Line */
.doc-gold-line {
width: 100%;
height: 6px;
background: linear-gradient(to right, #1a130d, #c69c38, #fceabb, #c69c38, #1a130d);
}
.rm-document-body {
padding: 60px 70px;
color: #444;
font-size: 1.1rem;
line-height: 1.85;
}
/* Premium Typography for Headings */
.rm-document-body h2 {
color: #3e270e;
font-family: var(--dharmik-font);
font-size: 1.8rem;
margin: 45px 0 20px;
padding: 12px 20px;
background: linear-gradient(to right, rgba(198, 156, 56, 0.1) 0%, transparent 100%);
border-left: 5px solid #c69c38;
border-radius: 0 8px 8px 0;
}
.rm-document-body h2:first-child { margin-top: 0; }
.rm-document-body h3 {
color: #111;
font-size: 1.3rem;
margin: 30px 0 15px;
font-weight: 700;
}
/* Text and Links */
.rm-document-body p {
margin-bottom: 20px;
text-align: justify;
}
.rm-document-body a {
color: #c69c38;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}
.rm-document-body a:hover {
color: #3e270e;
border-bottom-color: #3e270e;
}
/* Custom Styled Lists for Policies */
.rm-document-body ul,
.rm-document-body ol {
margin: 0 0 25px 20px;
padding: 0;
list-style: none;
}
.rm-document-body ul li {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
}
/* Gold Dash Bullet points */
.rm-document-body ul li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 12px;
height: 3px;
background: #c69c38;
border-radius: 2px;
}
.rm-document-body strong {
color: #111;
}
/* Footer Stamp */
.doc-footer-stamp {
text-align: center;
padding: 20px;
background: #fdfaf3;
color: #888;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
border-top: 1px dashed rgba(198, 156, 56, 0.3);
}
.doc-footer-stamp .icon { font-size: 1.2rem; margin-right: 5px; }
/* Mobile View Adjustments */
@media screen and (max-width: 768px) {
.rm-document-body {
padding: 30px 25px;
font-size: 1.05rem;
}
.rm-vip-document-box {
margin: -20px 15px 0;
}
.rm-document-body h2 {
font-size: 1.5rem;
padding: 10px 15px;
}
}
/* ==========================================================================
BLOG / JOURNAL PAGE STYLES
========================================================================== */
.rm-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 40px;
}
/* The Blog Card */
.rm-blog-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.04);
border: 1px solid rgba(198, 156, 56, 0.1);
transition: all 0.4s ease;
display: flex;
flex-direction: column;
}
.rm-blog-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(198, 156, 56, 0.15);
border-color: rgba(198, 156, 56, 0.4);
}
/* Image Wrap & Date Badge */
.blog-img-wrap {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.blog-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.rm-blog-card:hover .blog-img-wrap img {
transform: scale(1.08);
}
.blog-date-badge {
position: absolute;
top: 15px;
left: 15px;
background: linear-gradient(135deg, #1a130d, #c69c38);
color: #fff;
padding: 8px 12px;
border-radius: 6px;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.blog-date-badge .day { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.blog-date-badge .month { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
/* Content Area */
.blog-content {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.blog-meta { margin-bottom: 10px; font-size: 0.85rem; color: #888; }
.blog-meta a { color: #c69c38; text-decoration: none; font-weight: 600; }
.blog-meta a:hover { text-decoration: underline; }
.blog-title {
font-size: 1.4rem;
font-family: var(--dharmik-font);
line-height: 1.4;
margin: 0 0 12px 0;
}
.blog-title a { color: #3e270e; text-decoration: none; transition: color 0.3s; }
.blog-title a:hover { color: #c69c38; }
.blog-excerpt {
color: #666;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.blog-read-more {
display: inline-block;
color: #1a130d;
font-weight: 700;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
text-decoration: none;
transition: color 0.3s;
align-self: flex-start;
}
.blog-read-more .arrow { display: inline-block; transition: transform 0.3s; margin-left: 5px; color: #c69c38; }
.blog-read-more:hover { color: #c69c38; }
.rm-blog-card:hover .blog-read-more .arrow { transform: translateX(5px); }
/* Pagination Styling */
.rm-blog-pagination .nav-links { display: flex; justify-content: center; gap: 10px; }
.rm-blog-pagination .page-numbers {
display: flex; justify-content: center; align-items: center;
width: 40px; height: 40px;
background: #fff; color: #1a130d;
border: 1px solid rgba(198, 156, 56, 0.3);
border-radius: 5px; text-decoration: none; font-weight: 600; transition: all 0.3s;
}
.rm-blog-pagination .page-numbers.current,
.rm-blog-pagination .page-numbers:hover {
background: #c69c38; color: #fff; border-color: #c69c38; box-shadow: 0 4px 10px rgba(198, 156, 56, 0.3);
}
.rm-blog-pagination .next, .rm-blog-pagination .prev { width: auto; padding: 0 15px; }
/* Mobile Fixes */
@media screen and (max-width: 576px) {
.rm-blog-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
GLOBAL ANIMATIONS (Jo cards ko show karenge)
========================================================================== */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
animation: fadeInUp 0.8s ease forwards 0.2s;
opacity: 0;
}
/* ==========================================================================
ULTRA-PREMIUM SINGLE ARTICLE STYLES 🔥
========================================================================== */
/* 1. Fullscreen Parallax Hero */
.rm-epic-hero {
height: 100vh; /* Pura screen cover karega */
min-height: 600px;
background-size: cover;
background-position: center;
background-attachment: fixed; /* Parallax Magic */
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.rm-epic-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, rgba(10, 6, 4, 0.4) 0%, rgba(10, 6, 4, 0.9) 100%);
}
.rm-epic-content { position: relative; z-index: 10; max-width: 900px; }
.epic-badge a { color: #c69c38; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; text-decoration: none; font-size: 0.95rem; }
.epic-badge a:hover { color: #fceabb; }
.epic-title { color: #fff; font-family: var(--dharmik-font); font-size: 4.5rem; line-height: 1.1; margin: 20px 0; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.epic-meta { color: #ccc; font-size: 1.1rem; }
.meta-dot { display: inline-block; width: 6px; height: 6px; background: #c69c38; border-radius: 50%; margin: 0 15px; position: relative; top: -3px; }
/* Scroll Indicator */
.epic-scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10; text-align: center; color: rgba(255,255,255,0.6); font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; }
.epic-scroll-indicator .mouse { width: 24px; height: 36px; border: 2px solid rgba(255,255,255,0.6); border-radius: 12px; margin: 0 auto 10px; position: relative; }
.epic-scroll-indicator .mouse::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 6px; background: #c69c38; border-radius: 2px; animation: scrollMouse 1.5s infinite; }
@keyframes scrollMouse { 0% { top: 6px; opacity: 1; } 100% { top: 18px; opacity: 0; } }
/* 2. Reading Progress Bar */
.reading-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: transparent; z-index: 9999; }
.reading-progress-bar { height: 4px; background: #c69c38; width: 0%; border-radius: 0 2px 2px 0; }
/* 3. Epic Grid Layout (Sidebar + Content) */
.rm-epic-article-section { padding: 80px 0 100px; }
.epic-grid { display: grid; grid-template-columns: 80px 1fr; gap: 60px; max-width: 1000px; margin: 0 auto; }
/* Sticky Social Bar */
.sticky-share-box { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.share-head { writing-mode: vertical-rl; transform: rotate(180deg); color: #888; text-transform: uppercase; letter-spacing: 3px; font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; }
.share-line { width: 1px; height: 50px; background: rgba(198, 156, 56, 0.4); margin-bottom: 10px; }
.share-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(198, 156, 56, 0.3); display: flex; justify-content: center; align-items: center; color: #555; text-decoration: none; font-weight: bold; font-family: sans-serif; transition: all 0.3s; }
.share-icon:hover { background: #c69c38; color: #fff; border-color: #c69c38; transform: translateX(5px); }
/* The Premium Content Typography */
.the-content-formatted { color: #222; font-size: 1.25rem; line-height: 1.9; font-family: 'Georgia', serif; } /* Classic readable font */
/* 🌟 Drop-Cap Magic (Pehle paragraph ka pehla akshar bada hoga) */
.the-content-formatted > p:first-of-type::first-letter {
font-size: 4.5rem;
font-family: var(--dharmik-font);
color: #c69c38;
float: left;
line-height: 1;
padding-right: 15px;
padding-top: 5px;
}
.the-content-formatted p { margin-bottom: 30px; }
/* Custom Headings inside Content */
.the-content-formatted h2 {
font-family: var(--dharmik-font); font-size: 2.2rem; color: #1a130d;
margin: 50px 0 25px; display: inline-block; position: relative;
}
.the-content-formatted h2::after {
content: ''; position: absolute; bottom: -5px; left: 0; width: 50px; height: 3px; background: #c69c38;
}
.the-content-formatted ul { list-style: none; padding-left: 0; margin-bottom: 30px; }
.the-content-formatted ul li { position: relative; padding-left: 30px; margin-bottom: 15px; }
.the-content-formatted ul li::before { content: '✦'; position: absolute; left: 0; top: 0; color: #c69c38; font-size: 1.2rem; }
/* Image inside content */
.the-content-formatted img { max-width: 100%; height: auto; border-radius: 8px; margin: 30px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
/* Tags */
.epic-tags a { display: inline-block; background: transparent; border: 1px solid #c69c38; color: #c69c38; padding: 5px 15px; border-radius: 30px; text-decoration: none; font-size: 0.9rem; margin: 0 5px 5px 0; transition: 0.3s; }
.epic-tags a:hover { background: #c69c38; color: #fff; }
/* 4. Epic Post Navigation (Next/Prev) */
.epic-post-nav { background: #1a130d; padding: 40px 0; border-top: 2px solid #c69c38; }
.nav-links-box { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 0 auto; }
.nav-label { color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; }
.nav-title { color: #fceabb; font-family: var(--dharmik-font); font-size: 1.4rem; transition: color 0.3s; }
.epic-post-nav a { text-decoration: none; display: block; }
.epic-post-nav a:hover .nav-title { color: #fff; }
/* Mobile View Adjustments */
@media screen and (max-width: 991px) {
.epic-grid { grid-template-columns: 1fr; }
.epic-sidebar { display: none; }
.epic-title { font-size: 2.8rem; }
.rm-epic-hero { height: 80vh; }
}