/* ============================================================ AcharyaShivani.com — Styles Theme: Royal Temple meets Modern Consultancy (Light/Gold) ============================================================ */ /* ── Google Fonts are loaded in HTML ── */ /* ── 0. CSS Custom Properties ── */ :root { /* Colors */ --bg-primary: #FFF8E7; --bg-alt: #FDEBD3; --accent-gold: #C9971F; --accent-marigold: #F4B93A; --cta: #E8873E; --cta-hover: #d5762e; --text-heading: #5A3A1A; --text-body: #4A4038; --card-bg: #FFFDF7; --border-gold: #E6C878; --white: #FFFFFF; --shadow-soft: 0 4px 24px rgba(90, 58, 26, 0.08); --shadow-hover: 0 8px 32px rgba(201, 151, 31, 0.18); /* Typography */ --font-display: 'Cinzel Decorative', 'Cinzel', serif; --font-heading: 'Cinzel', serif; --font-body: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Poppins', sans-serif; --font-hindi: 'Noto Serif Devanagari', serif; /* Spacing */ --section-padding: 100px 0; --container-width: 1200px; --container-padding: 0 24px; --card-radius: 12px; --btn-radius: 8px; /* Transitions */ --transition-fast: 0.2s ease; --transition-med: 0.4s ease; --transition-slow: 0.6s ease; } /* ── 1. Reset & Base ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); color: var(--text-body); background-color: var(--bg-primary); line-height: 1.7; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-gold); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--cta); } ul { list-style: none; } .container { max-width: var(--container-width); margin: 0 auto; padding: var(--container-padding); } /* ── 2. Typography ── */ h1, h2, h3, h4 { color: var(--text-heading); line-height: 1.3; } h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: 0.06em; } h2 { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: 0.04em; } h3 { font-family: var(--font-heading); font-size: clamp(1.1rem, 2.5vw, 1.4rem); letter-spacing: 0.03em; } p { font-size: clamp(1rem, 1.8vw, 1.15rem); margin-bottom: 1em; } /* Hindi text styling */ [lang="hi"] body, .lang-hindi .hindi-text, [lang="hi"] h1, [lang="hi"] h2, [lang="hi"] h3, [lang="hi"] h4, [lang="hi"] p, [lang="hi"] a, [lang="hi"] span, [lang="hi"] label, [lang="hi"] button, [lang="hi"] option, [lang="hi"] div { font-family: var(--font-hindi), var(--font-body); } /* ── Section Title Ornament ── */ .section-title { text-align: center; margin-bottom: 60px; position: relative; } .section-title h2 { display: inline-block; padding-bottom: 18px; position: relative; } .section-title h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); } .section-title .ornament { display: block; margin: 12px auto 0; width: 40px; height: 40px; opacity: 0.7; } .section-subtitle { font-family: var(--font-body); font-size: 1.1rem; color: var(--text-body); margin-top: 12px; font-style: italic; } /* ── 3. Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--btn-radius); font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border: none; transition: all var(--transition-fast); text-decoration: none; } .btn-primary { background: linear-gradient(135deg, var(--cta), var(--accent-marigold)); color: var(--white); box-shadow: 0 4px 16px rgba(232, 135, 62, 0.3); } .btn-primary:hover { background: linear-gradient(135deg, var(--cta-hover), var(--accent-gold)); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(232, 135, 62, 0.4); } .btn-secondary { background: transparent; color: var(--accent-gold); border: 2px solid var(--accent-gold); } .btn-secondary:hover { background: var(--accent-gold); color: var(--white); transform: translateY(-2px); } .btn-outline-white { background: transparent; color: var(--text-heading); border: 2px solid var(--border-gold); } .btn-outline-white:hover { background: var(--accent-gold); color: var(--white); border-color: var(--accent-gold); transform: translateY(-2px); } /* ── 4. Navigation ── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #FFF0B3; /* Pleasant, soft light yellow */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 2px solid var(--text-heading); border-top: 4px solid var(--text-heading); transition: box-shadow var(--transition-fast); } .navbar.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .navbar .container { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav-logo { display: flex; align-items: center; text-decoration: none; } .nav-logo-img { height: 55px; width: auto; object-fit: contain; /* Removed mix-blend-mode so the logo appears exactly as it is */ } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; color: var(--text-heading); /* Dark brown for high contrast against yellow */ letter-spacing: 0.03em; text-transform: uppercase; position: relative; padding: 4px 0; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--text-heading); transition: width var(--transition-fast); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a.active { color: var(--text-heading); font-weight: 700; } /* Language Toggle */ .lang-toggle { display: flex; align-items: center; gap: 6px; background: rgba(201, 151, 31, 0.1); border: 1px solid var(--border-gold); border-radius: 20px; padding: 4px 6px; cursor: pointer; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; margin-left: 16px; } .lang-toggle span { padding: 4px 10px; border-radius: 14px; transition: all var(--transition-fast); color: var(--text-body); user-select: none; } .lang-toggle span.active { background: var(--text-heading); color: var(--white); } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--text-heading); transition: all var(--transition-fast); border-radius: 2px; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ── 5. Hero Section ── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding-top: 72px; background: var(--bg-primary); } /* Sunrise gradient background */ .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 90%, rgba(253, 235, 211, 0.9) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 50% 85%, rgba(244, 185, 58, 0.25) 0%, transparent 60%), radial-gradient(ellipse 40% 30% at 50% 95%, rgba(232, 135, 62, 0.2) 0%, transparent 50%); z-index: 0; } /* Sun rays (conic gradient) */ .hero-rays { position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 140%; height: 140%; background: conic-gradient( from 0deg at 50% 100%, transparent 0deg, rgba(201, 151, 31, 0.06) 5deg, transparent 10deg, transparent 15deg, rgba(201, 151, 31, 0.06) 20deg, transparent 25deg, transparent 30deg, rgba(201, 151, 31, 0.06) 35deg, transparent 40deg, transparent 45deg, rgba(201, 151, 31, 0.06) 50deg, transparent 55deg, transparent 60deg, rgba(201, 151, 31, 0.06) 65deg, transparent 70deg, transparent 75deg, rgba(201, 151, 31, 0.06) 80deg, transparent 85deg, transparent 90deg, rgba(201, 151, 31, 0.06) 95deg, transparent 100deg, transparent 105deg, rgba(201, 151, 31, 0.06) 110deg, transparent 115deg, transparent 120deg, rgba(201, 151, 31, 0.06) 125deg, transparent 130deg, transparent 135deg, rgba(201, 151, 31, 0.06) 140deg, transparent 145deg, transparent 150deg, rgba(201, 151, 31, 0.06) 155deg, transparent 160deg, transparent 165deg, rgba(201, 151, 31, 0.06) 170deg, transparent 175deg, transparent 180deg ); z-index: 0; opacity: 0.8; animation: rayPulse 8s ease-in-out infinite alternate; } @keyframes rayPulse { 0% { opacity: 0.5; } 100% { opacity: 0.9; } } /* Constellation dots */ .hero-stars { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-stars .star { position: absolute; width: 3px; height: 3px; background: var(--accent-gold); border-radius: 50%; opacity: 0.3; animation: twinkle 3s ease-in-out infinite alternate; } @keyframes twinkle { 0% { opacity: 0.15; transform: scale(1); } 100% { opacity: 0.5; transform: scale(1.4); } } /* Zodiac wheel behind hero text */ .hero-zodiac-wheel { position: absolute; width: min(520px, 85vw); height: min(520px, 85vw); top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.07; z-index: 0; animation: slowRotate 120s linear infinite; } @keyframes slowRotate { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Floating zodiac symbols around hero */ .hero-floating-symbols { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-floating-symbols .float-symbol { position: absolute; font-size: 1.8rem; color: var(--accent-gold); opacity: 0.12; animation: floatSymbol 12s ease-in-out infinite; } .hero-floating-symbols .float-symbol:nth-child(even) { animation-direction: reverse; } @keyframes floatSymbol { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-20px) rotate(5deg); } 50% { transform: translateY(-10px) rotate(-3deg); } 75% { transform: translateY(-25px) rotate(4deg); } } .hero-content { position: relative; z-index: 1; max-width: 820px; padding: 0 24px; } /* Hero emblem animation */ .hero-emblem { width: 80px; height: 80px; margin: 0 auto 24px; animation: emblemGlow 3s ease-in-out infinite alternate; } @keyframes emblemGlow { 0% { filter: drop-shadow(0 0 8px rgba(201, 151, 31, 0.2)); } 100% { filter: drop-shadow(0 0 20px rgba(201, 151, 31, 0.5)); } } .hero-content h1 { margin-bottom: 20px; text-shadow: 0 2px 8px rgba(255, 248, 231, 0.5); opacity: 0; animation: heroFadeUp 1s ease-out 0.3s forwards; } .hero-content .hero-subtitle { font-family: var(--font-body); font-size: clamp(1.05rem, 2.5vw, 1.35rem); color: var(--text-body); margin-bottom: 36px; font-style: italic; max-width: 600px; margin-left: auto; margin-right: auto; opacity: 0; animation: heroFadeUp 1s ease-out 0.6s forwards; } .hero-cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: heroFadeUp 1s ease-out 0.9s forwards; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Hero scroll indicator */ .hero-scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: heroFadeUp 1s ease-out 1.3s forwards; } .hero-scroll-indicator span { font-family: var(--font-ui); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-gold); opacity: 0.6; } .scroll-arrow { width: 24px; height: 24px; border-right: 2px solid var(--accent-gold); border-bottom: 2px solid var(--accent-gold); transform: rotate(45deg); opacity: 0.4; animation: scrollBounce 2s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.4; } 50% { transform: rotate(45deg) translateY(8px); opacity: 0.8; } } /* ── 6. About Section ── */ .about { padding: var(--section-padding); background: var(--bg-primary); position: relative; } .about-grid { display: grid; grid-template-columns: 320px 1fr; gap: 60px; align-items: center; } .about-portrait { position: relative; width: 280px; height: 280px; margin: 0 auto; } .about-portrait .portrait-frame { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--accent-gold); padding: 6px; background: var(--bg-primary); box-shadow: 0 0 0 6px rgba(201, 151, 31, 0.1), var(--shadow-soft); overflow: hidden; } .about-portrait .portrait-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Decorative gold ring animation */ .about-portrait::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed var(--border-gold); animation: slowRotateSimple 60s linear infinite; } @keyframes slowRotateSimple { to { transform: rotate(360deg); } } .about-text h2 { margin-bottom: 20px; } .about-text .about-desc { font-size: 1.1rem; margin-bottom: 28px; } .trust-badges { display: flex; gap: 24px; flex-wrap: wrap; } .trust-badge { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--card-bg); border: 1px solid var(--border-gold); border-radius: 30px; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; color: var(--text-heading); transition: all var(--transition-fast); } .trust-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .trust-badge svg { width: 20px; height: 20px; color: var(--accent-gold); } /* ── 6b. Stats Counter Section ── */ .stats-section { padding: 70px 0; background: linear-gradient(135deg, var(--bg-alt), var(--bg-primary)); position: relative; overflow: hidden; } .stats-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-gold), transparent); } .stats-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-gold), transparent); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; } .stat-item { padding: 24px 16px; position: relative; } .stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: linear-gradient(180deg, transparent, var(--border-gold), transparent); } .stat-icon { width: 52px; height: 52px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(201, 151, 31, 0.12), rgba(244, 185, 58, 0.12)); border-radius: 50%; } .stat-icon svg { width: 26px; height: 26px; stroke: var(--accent-gold); fill: none; stroke-width: 1.8; } .stat-number { font-family: var(--font-display); font-size: 2.4rem; color: var(--accent-gold); line-height: 1.1; margin-bottom: 6px; } .stat-label { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-body); font-weight: 500; letter-spacing: 0.02em; } /* ── 7. Services Section (Homepage Preview) ── */ .services { padding: var(--section-padding); background: var(--bg-alt); position: relative; } /* Corner flourish decoration */ .services::before, .services::after { content: ''; position: absolute; width: 120px; height: 120px; border: 1px solid var(--border-gold); opacity: 0.3; } .services::before { top: 30px; left: 30px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; } .services::after { bottom: 30px; right: 30px; border-left: none; border-top: none; border-radius: 0 0 8px 0; } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; } .service-card { background: var(--card-bg); border: 1px solid var(--border-gold); border-radius: var(--card-radius); padding: 36px 28px; text-align: center; transition: all var(--transition-med); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--card-radius); border: 2px solid transparent; transition: border-color var(--transition-med); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); } .service-card:hover::before { border-color: var(--accent-gold); } .service-icon { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(201, 151, 31, 0.1), rgba(244, 185, 58, 0.15)); border-radius: 8px; padding: 0; overflow: hidden; transition: all var(--transition-med); } .service-card:hover .service-icon { background: linear-gradient(135deg, rgba(201, 151, 31, 0.2), rgba(244, 185, 58, 0.25)); transform: scale(1.08); } .service-icon svg { width: 100%; height: 100%; stroke: var(--accent-gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .service-card h3 { margin-bottom: 12px; font-size: 1.1rem; } .service-card p { font-size: 0.95rem; color: var(--text-body); margin-bottom: 16px; } .service-card .enquire-link { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--cta); display: inline-flex; align-items: center; gap: 6px; transition: gap var(--transition-fast), color var(--transition-fast); } .service-card .enquire-link:hover { gap: 10px; color: var(--cta-hover); } .services-cta-wrap { text-align: center; margin-top: 48px; } /* ── 7b. Why Choose Us ── */ .why-choose { padding: var(--section-padding); background: var(--bg-primary); } .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } .why-card { text-align: center; padding: 40px 28px; border-radius: var(--card-radius); background: var(--card-bg); border: 1px solid transparent; transition: all var(--transition-med); position: relative; } .why-card:hover { border-color: var(--border-gold); transform: translateY(-4px); box-shadow: var(--shadow-soft); } .why-card-icon { width: 72px; height: 72px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(232, 135, 62, 0.08), rgba(244, 185, 58, 0.12)); border-radius: 16px; transition: all var(--transition-med); } .why-card:hover .why-card-icon { background: linear-gradient(135deg, rgba(232, 135, 62, 0.15), rgba(244, 185, 58, 0.2)); transform: scale(1.05); } .why-card-icon svg { width: 36px; height: 36px; stroke: var(--accent-gold); fill: none; stroke-width: 1.5; } .why-card h3 { margin-bottom: 10px; font-size: 1.15rem; } .why-card p { font-size: 0.95rem; color: var(--text-body); margin-bottom: 0; } /* ── 8. How It Works ── */ .how-it-works { padding: var(--section-padding); background: var(--bg-alt); } .steps-container { display: flex; justify-content: center; align-items: flex-start; gap: 0; max-width: 900px; margin: 0 auto; position: relative; } .step { flex: 1; text-align: center; position: relative; padding: 0 16px; } .step-number { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-gold), var(--accent-marigold)); color: var(--white); font-family: var(--font-display); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 4px 16px rgba(201, 151, 31, 0.3); position: relative; z-index: 2; } /* Connecting line between steps */ .step:not(:last-child)::after { content: ''; position: absolute; top: 32px; left: calc(50% + 40px); width: calc(100% - 80px); height: 2px; background: linear-gradient(90deg, var(--accent-gold), var(--border-gold)); z-index: 1; } .step h3 { font-size: 1rem; margin-bottom: 8px; } .step p { font-size: 0.9rem; color: var(--text-body); opacity: 0.8; } /* ── 9. Testimonials ── */ .testimonials { padding: var(--section-padding); background: var(--bg-primary); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .testimonial-card { background: var(--card-bg); border: 1px solid var(--border-gold); border-radius: var(--card-radius); padding: 32px 28px; position: relative; transition: transform var(--transition-med), box-shadow var(--transition-med); } .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } .testimonial-card .quote-mark { font-family: var(--font-display); font-size: 3rem; color: var(--accent-gold); opacity: 0.3; line-height: 1; margin-bottom: 8px; } .testimonial-card .quote-text { font-size: 1rem; font-style: italic; margin-bottom: 20px; line-height: 1.6; } .testimonial-card .stars { color: var(--accent-marigold); font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-author .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-gold), var(--accent-marigold)); display: flex; align-items: center; justify-content: center; color: var(--white); font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; } .testimonial-author .author-info { font-family: var(--font-ui); } .testimonial-author .author-name { font-weight: 600; font-size: 0.9rem; color: var(--text-heading); } .testimonial-author .author-loc { font-size: 0.8rem; color: var(--text-body); opacity: 0.7; } /* ── 10. Blog Preview ── */ .blog-preview { padding: var(--section-padding); background: var(--bg-alt); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 40px; } .blog-card { background: var(--card-bg); border: 1px solid var(--border-gold); border-radius: var(--card-radius); overflow: hidden; transition: all var(--transition-med); display: block; color: inherit; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); color: inherit; } .blog-card-image { height: 200px; background: linear-gradient(135deg, var(--bg-alt), var(--border-gold)); overflow: hidden; position: relative; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-med); } .blog-card:hover .blog-card-image img { transform: scale(1.05); } .blog-card-body { padding: 24px; } .blog-card-body .blog-tag { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cta); margin-bottom: 8px; } .blog-card-body h3 { font-size: 1.05rem; margin-bottom: 10px; } .blog-card-body p { font-size: 0.9rem; color: var(--text-body); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-body .read-more { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--accent-gold); display: inline-flex; align-items: center; gap: 6px; } .blog-card:hover .blog-card-body .read-more { gap: 10px; color: var(--cta); } .blog-cta-wrap { text-align: center; } /* ── 11. Zodiac Strip ── */ .zodiac-strip { padding: 50px 0; background: linear-gradient(180deg, var(--bg-alt), var(--bg-primary)); text-align: center; overflow: hidden; } .zodiac-symbols { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 3vw, 36px); flex-wrap: wrap; max-width: 900px; margin: 0 auto; padding: 0 24px; } .zodiac-symbol { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--accent-gold); opacity: 0.5; transition: all var(--transition-fast); position: relative; cursor: default; } .zodiac-symbol:hover { opacity: 1; transform: scale(1.2); } .zodiac-symbol .zodiac-name { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: 0.6rem; color: var(--text-body); opacity: 0; transition: opacity var(--transition-fast); white-space: nowrap; } .zodiac-symbol:hover .zodiac-name { opacity: 0.7; } /* ── 12. Contact Section ── */ .contact { padding: var(--section-padding); background: var(--bg-primary); position: relative; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .contact-info { display: flex; flex-direction: column; gap: 28px; } .contact-item { display: flex; align-items: flex-start; gap: 16px; } .contact-item .contact-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; background: linear-gradient(135deg, rgba(201, 151, 31, 0.1), rgba(244, 185, 58, 0.15)); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .contact-item:hover .contact-icon { background: linear-gradient(135deg, rgba(201, 151, 31, 0.2), rgba(244, 185, 58, 0.25)); } .contact-item .contact-icon svg { width: 22px; height: 22px; stroke: var(--accent-gold); fill: none; stroke-width: 1.8; } .contact-item h3 { font-size: 0.95rem; margin-bottom: 4px; } .contact-item p, .contact-item a { font-size: 0.95rem; color: var(--text-body); } .contact-item a:hover { color: var(--cta); } .social-links { display: flex; gap: 16px; margin-top: 8px; } .social-link { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .social-link:hover { background: var(--accent-gold); border-color: var(--accent-gold); } .social-link:hover svg { stroke: var(--white); } .social-link svg { width: 20px; height: 20px; stroke: var(--accent-gold); fill: none; stroke-width: 1.8; } /* Contact Form */ .contact-form { background: var(--card-bg); border: 1px solid var(--border-gold); border-radius: var(--card-radius); padding: 36px; } .contact-form h3 { margin-bottom: 24px; font-size: 1.2rem; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; color: var(--text-heading); margin-bottom: 6px; letter-spacing: 0.02em; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border-gold); border-radius: 8px; background: var(--bg-primary); font-family: var(--font-body); font-size: 1rem; color: var(--text-body); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(201, 151, 31, 0.15); } .form-group textarea { resize: vertical; min-height: 100px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-status { font-family: var(--font-ui); font-size: 0.85rem; margin-top: 12px; display: none; } .form-status.success { color: #2e7d32; display: block; } .form-status.error { color: #c62828; display: block; } /* ── 13. Footer ── */ .footer { background: var(--bg-primary); border-top: 1px solid var(--border-gold); padding: 60px 0 30px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 40px; } .footer-brand .footer-logo { display: inline-block; margin-bottom: 16px; text-decoration: none; } .footer-brand .footer-logo img { height: 48px; width: auto; object-fit: contain; mix-blend-mode: multiply; } .footer-socials { display: flex; gap: 12px; margin-top: 20px; } .footer-socials a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(201, 151, 31, 0.1); color: var(--accent-gold); transition: all var(--transition-fast); } .footer-socials a:hover { background: var(--accent-gold); color: var(--white); transform: translateY(-2px); } .footer-socials svg { width: 18px; height: 18px; fill: currentColor; } .footer-brand .footer-tagline { font-size: 0.95rem; color: var(--text-body); margin-bottom: 20px; max-width: 340px; } .footer h4 { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-heading); margin-bottom: 20px; } .footer-links a { display: block; font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-body); padding: 4px 0; transition: color var(--transition-fast), padding-left var(--transition-fast); } .footer-links a:hover { color: var(--accent-gold); padding-left: 6px; } .footer-contact-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-body); margin-bottom: 10px; } .footer-contact-item svg { width: 16px; height: 16px; stroke: var(--accent-gold); fill: none; stroke-width: 2; min-width: 16px; } .footer-bottom { border-top: 1px solid var(--border-gold); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-body); opacity: 0.7; } /* ── 14. Floating WhatsApp Button ── */ .whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: all var(--transition-fast); cursor: pointer; text-decoration: none; animation: whatsappPulse 2s ease-in-out 3; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5); } .whatsapp-float svg { width: 30px; height: 30px; fill: white; } @keyframes whatsappPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); } 50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0.15); } } .whatsapp-float .wa-tooltip { position: absolute; right: 72px; background: var(--white); color: var(--text-heading); font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500; padding: 8px 16px; border-radius: 8px; box-shadow: var(--shadow-soft); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); } .whatsapp-float:hover .wa-tooltip { opacity: 1; } /* ── 15. Scroll Animations ── */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } .animate-on-scroll.slide-left { transform: translateX(-30px); } .animate-on-scroll.slide-left.visible { transform: translateX(0); } .animate-on-scroll.slide-right { transform: translateX(30px); } .animate-on-scroll.slide-right.visible { transform: translateX(0); } /* Staggered animation for grids */ .stagger-children > * { opacity: 0; transform: translateY(20px); transition: opacity var(--transition-med), transform var(--transition-med); } .stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; } .stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; } .stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; } .stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; } .stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; } .stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; } .stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s; } .stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s; } .stagger-children.visible > *:nth-child(9) { transition-delay: 0.45s; } .stagger-children.visible > *:nth-child(10) { transition-delay: 0.5s; } .stagger-children.visible > * { opacity: 1; transform: translateY(0); } /* ── 16. Services Page Specific ── */ .page-hero { padding: 140px 0 80px; background: var(--bg-alt); text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(244, 185, 58, 0.15) 0%, transparent 70%); } .page-hero h1 { position: relative; z-index: 1; margin-bottom: 16px; } .page-hero .page-hero-subtitle { position: relative; z-index: 1; font-size: 1.15rem; font-style: italic; color: var(--text-body); max-width: 600px; margin: 0 auto; } .service-detail-card { background: var(--card-bg); border: 1px solid var(--border-gold); border-radius: var(--card-radius); padding: 40px 36px; display: grid; grid-template-columns: 160px 1fr; gap: 32px; align-items: start; transition: all var(--transition-med); position: relative; } .service-detail-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--accent-gold); } .service-detail-card .service-icon { width: 160px; height: 160px; margin: 0; padding: 0; } .service-detail-card .service-detail-body h3 { font-size: 1.25rem; margin-bottom: 12px; } .service-detail-card .service-detail-body p { font-size: 1rem; margin-bottom: 16px; line-height: 1.7; } .service-detail-card .service-detail-body .enquire-link { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--cta); display: inline-flex; align-items: center; gap: 6px; transition: gap var(--transition-fast), color var(--transition-fast); } .service-detail-card .service-detail-body .enquire-link:hover { gap: 10px; color: var(--cta-hover); } .services-detail-grid { display: flex; flex-direction: column; gap: 24px; max-width: 900px; margin: 0 auto; } /* ── 17. Responsive ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .animate-on-scroll { opacity: 1; transform: none; } .stagger-children > * { opacity: 1; transform: none; } .hero-content h1, .hero-content .hero-subtitle, .hero-cta-group, .hero-scroll-indicator { opacity: 1; animation: none; } } /* Tablet */ @media (max-width: 992px) { :root { --section-padding: 80px 0; } .about-grid { grid-template-columns: 1fr; text-align: center; } .about-text { text-align: center; } .trust-badges { justify-content: center; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-item:nth-child(2)::after { display: none; } .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .why-grid .why-card:nth-child(3) { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; } .testimonials-grid { grid-template-columns: repeat(2, 1fr); } .testimonials-grid .testimonial-card:nth-child(3) { grid-column: 1 / -1; max-width: 500px; margin: 0 auto; } .blog-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid .blog-card:nth-child(3) { grid-column: 1 / -1; max-width: 500px; margin: 0 auto; } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .service-detail-card { grid-template-columns: 1fr; text-align: center; } .service-detail-card .service-icon { margin: 0 auto; } } /* Mobile */ @media (max-width: 768px) { :root { --section-padding: 60px 0; } /* Nav mobile */ .nav-links { position: fixed; top: 72px; left: 0; right: 0; background: rgba(255, 248, 231, 0.98); backdrop-filter: blur(12px); flex-direction: column; padding: 24px; gap: 20px; border-bottom: 1px solid var(--border-gold); transform: translateY(-110%); transition: transform var(--transition-med); } .nav-links.open { transform: translateY(0); } .hamburger { display: flex; } .lang-toggle { margin-left: 0; order: -1; } /* Hero */ .hero { min-height: 90vh; } .hero-cta-group { flex-direction: column; align-items: center; } .hero-emblem { width: 60px; height: 60px; } .hero-scroll-indicator { display: none; } /* About */ .about-portrait { width: 220px; height: 220px; } /* Stats */ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .stat-item::after { display: none !important; } .stat-number { font-size: 1.8rem; } /* Services */ .services-grid { grid-template-columns: 1fr; } /* Why Choose */ .why-grid { grid-template-columns: 1fr; } .why-grid .why-card:nth-child(3) { max-width: none; } /* Steps */ .steps-container { flex-direction: column; gap: 32px; align-items: center; } .step:not(:last-child)::after { top: auto; bottom: -20px; left: 50%; transform: translateX(-50%) rotate(90deg); width: 30px; height: 2px; } /* Testimonials */ .testimonials-grid { grid-template-columns: 1fr; } .testimonials-grid .testimonial-card:nth-child(3) { grid-column: auto; max-width: none; } /* Blog */ .blog-grid { grid-template-columns: 1fr; } .blog-grid .blog-card:nth-child(3) { grid-column: auto; max-width: none; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 8px; text-align: center; } /* WhatsApp */ .whatsapp-float { bottom: 20px; right: 20px; width: 54px; height: 54px; } .whatsapp-float .wa-tooltip { display: none; } /* Form */ .form-row { grid-template-columns: 1fr; } .contact-form { padding: 24px; } /* Services page */ .page-hero { padding: 110px 0 50px; } } /* Small phones */ @media (max-width: 400px) { .hero-content h1 { font-size: 1.7rem; } .nav-logo span { font-size: 0.95rem; } } /* ── 18. Hero Background Image ── */ .hero-bg-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-bg-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0.3; filter: saturate(0.7); animation: heroImageReveal 2s ease-out forwards; } @keyframes heroImageReveal { from { opacity: 0; transform: scale(1.05); } to { opacity: 0.3; transform: scale(1); } } /* Gradient overlay on hero image for text readability */ .hero-bg-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 248, 231, 0.6) 0%, rgba(255, 248, 231, 0.3) 30%, rgba(253, 235, 211, 0.4) 60%, rgba(255, 248, 231, 0.85) 100% ); } }