/* The Palm Association — shared corporate design system. Used by every page (index, About-Us, IT-Services, Events-Services, Real-Estate, Farming-Investment-Support, Charity, Contact-Us, Customer-Support). Accent theming: pages opt into a division accent by adding data-accent="green" (Farming) or data-accent="rose" (Charity) to . All other pages use the default blue accent. Photo-hero pages (Events, Real-Estate, Farming) additionally add the page-hero--photo class to their

, which fixes the eyebrow/floating-note/heading accent to yellow regardless of division accent (matches the original per-page implementation). */ :root { --navy: #0a1530; --navy-2: #10224a; --navy-3: #16305f; --blue: #277cd9; --blue-2: #67b3ff; --green: #3cc472; --yellow: #fbc700; --rose: #f97352; --white: #ffffff; --text: #132642; --muted: #617792; --glass-border: rgba(255, 255, 255, 0.76); --shadow: 0 25px 80px rgba(10, 21, 48, 0.14); --shadow-strong: 0 35px 110px rgba(10, 21, 48, 0.2); --radius: 30px; --radius-lg: 40px; --accent: var(--blue); --accent-2: var(--navy-3); --accent-rgb: 39, 124, 217; --accent-hover: var(--blue); --footer-link-hover: var(--blue-2); } body[data-accent="green"] { --accent: var(--green); --accent-2: #1f8d4c; --accent-rgb: 60, 196, 114; --accent-hover: var(--green); --footer-link-hover: var(--green); } body[data-accent="rose"] { --accent: var(--rose); --accent-2: #d85c3f; --accent-rgb: 249, 115, 82; --accent-hover: var(--rose); --footer-link-hover: var(--rose); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", sans-serif; color: var(--text); background: radial-gradient(circle at 8% 10%, rgba(39, 124, 217, 0.18), transparent 24%), radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.96), transparent 26%), radial-gradient(circle at 82% 76%, rgba(39, 124, 217, 0.12), transparent 28%), radial-gradient(circle at 18% 82%, rgba(60, 196, 114, 0.08), transparent 24%), linear-gradient(135deg, #f6fbff 0%, #eaf5ff 35%, #ffffff 100%); overflow-x: hidden; cursor: default; } body[data-accent="green"] { background: radial-gradient(circle at 8% 10%, rgba(39, 124, 217, 0.18), transparent 24%), radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.96), transparent 26%), radial-gradient(circle at 82% 76%, rgba(39, 124, 217, 0.12), transparent 28%), radial-gradient(circle at 18% 82%, rgba(60, 196, 114, 0.09), transparent 24%), linear-gradient(135deg, #f7fcf8 0%, #eefaf2 35%, #ffffff 100%); } body[data-accent="rose"] { background: radial-gradient(circle at 8% 10%, rgba(39, 124, 217, 0.16), transparent 24%), radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.96), transparent 26%), radial-gradient(circle at 82% 76%, rgba(249, 115, 82, 0.08), transparent 28%), radial-gradient(circle at 18% 82%, rgba(60, 196, 114, 0.08), transparent 24%), linear-gradient(135deg, #fffaf8 0%, #f7fbff 35%, #ffffff 100%); } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(10, 21, 48, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 21, 48, 0.028) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 82%); z-index: -1; } a { text-decoration: none; } /* ---------- Top strip, navbar, brand ---------- */ .top-strip { background: rgba(10, 21, 48, 0.95); color: rgba(255, 255, 255, 0.8); font-size: 13px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .top-strip a { color: rgba(255, 255, 255, 0.92); } .top-strip i { color: var(--blue-2); margin-right: 6px; } .navbar { background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.76); box-shadow: 0 18px 50px rgba(10, 21, 48, 0.08); } .navbar-brand { color: var(--navy) !important; font-weight: 900; letter-spacing: -0.4px; display: flex; align-items: center; gap: 12px; } .brand-mark { width: 50px; height: 50px; border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(255,255,255,0.34)), linear-gradient(135deg, var(--blue), var(--navy)); border: 1px solid rgba(255,255,255,0.84); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 20px 45px rgba(39,124,217,0.2); overflow: hidden; flex-shrink: 0; } .brand-mark img { width: 84%; height: 84%; object-fit: contain; } .navbar-brand small { display: block; color: rgba(10, 21, 48, 0.58); font-size: 11px; font-weight: 700; margin-top: 2px; } .nav-link { color: rgba(10, 21, 48, 0.75) !important; font-weight: 800; font-size: 14px; margin-left: 10px; } .nav-link:hover, .nav-link.active { color: var(--accent-hover) !important; } .navbar-toggler { border: 1px solid rgba(10, 21, 48, 0.14); box-shadow: none !important; border-radius: 14px; background: rgba(255,255,255,0.68); } /* ---------- Buttons ---------- */ .btn-palm { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: 1px solid rgba(255,255,255,0.48); border-radius: 999px; padding: 13px 24px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 18px 46px rgba(var(--accent-rgb), 0.28); transition: 0.25s ease; white-space: nowrap; } .btn-palm:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), 0 24px 58px rgba(var(--accent-rgb), 0.36); } .btn-outline-palm { color: var(--navy); background: rgba(255,255,255,0.48); border: 1px solid rgba(255,255,255,0.82); border-radius: 999px; padding: 13px 24px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 9px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: 0.25s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 30px rgba(10,21,48,0.06); white-space: nowrap; } .btn-outline-palm:hover { background: rgba(255,255,255,0.62); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.24); transform: translateY(-2px); } /* ---------- Liquid glass card base ---------- */ .liquid-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24)), linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(251,199,0,0.04)); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -1px 0 rgba(255,255,255,0.28), 0 30px 90px rgba(10,21,48,0.14); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); } .liquid-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.26) 18%, rgba(255,255,255,0.02) 40%), radial-gradient(circle at top left, rgba(255,255,255,0.98), transparent 26%), radial-gradient(circle at bottom right, rgba(var(--accent-rgb), 0.12), transparent 30%); pointer-events: none; } .liquid-card > * { position: relative; z-index: 2; } /* ---------- Homepage hero (index.html only) ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 165px 0 100px; overflow: hidden; background: radial-gradient(circle at 18% 18%, rgba(39,124,217,0.15), transparent 28%), radial-gradient(circle at 82% 12%, rgba(255,255,255,0.96), transparent 24%), linear-gradient(135deg, #eef8ff 0%, #ffffff 46%, #e4f1ff 100%); } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,21,48,0.04), rgba(255,255,255,0.28)); pointer-events: none; } .floating-orb { position: absolute; border-radius: 999px; background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(39,124,217,0.16)); border: 1px solid rgba(255,255,255,0.78); box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 30px 70px rgba(39,124,217,0.14); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); z-index: 1; } .orb-1 { width: 100px; height: 100px; top: 180px; right: 8%; } .orb-2 { width: 62px; height: 62px; bottom: 40px; left: 2%; } .hero .container, .page-hero .container, .section .container { position: relative; z-index: 2; } .hero-copy { padding-right: 24px; } .hero h1 { font-family: "Cormorant Garamond", serif; font-size: clamp(42px, 6vw, 78px); line-height: 0.95; letter-spacing: -1.5px; margin-bottom: 24px; font-weight: 700; text-transform: uppercase; color: var(--navy); max-width: 760px; } .hero h1 span { color: var(--blue); } .hero p { font-size: 18px; line-height: 1.9; color: rgba(10,21,48,0.7); max-width: 760px; margin-bottom: 34px; } .hero-visual { position: relative; } .hero-photo-card { border-radius: 34px; padding: 18px; min-height: 620px; position: relative; overflow: visible; } .hero-photo-frame { border-radius: 28px; overflow: hidden; min-height: 440px; background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(255,255,255,0.22)), linear-gradient(135deg, rgba(39,124,217,0.08), rgba(251,199,0,0.04)); border: 1px solid rgba(255,255,255,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 24px 70px rgba(10,21,48,0.14); position: relative; } .hero-photo-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0.01) 40%), radial-gradient(circle at top left, rgba(255,255,255,0.55), transparent 24%); pointer-events: none; z-index: 2; } .hero-photo-frame img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; display: block; } .hero-panel { border-radius: 26px; padding: 22px 24px; margin-top: 18px; } .hero-stat { border-bottom: 1px solid rgba(10,21,48,0.08); padding: 18px 0; } .hero-stat:last-child { border-bottom: 0; } .hero-stat strong { color: var(--navy); font-family: "Cormorant Garamond", serif; font-size: 32px; font-weight: 700; display: block; line-height: 1; letter-spacing: -0.4px; margin-bottom: 6px; } .hero-stat span { color: rgba(10,21,48,0.62); font-size: 14px; line-height: 1.65; } .floating-stat { position: absolute; z-index: 5; min-width: 180px; max-width: 240px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.28)), linear-gradient(135deg, rgba(39,124,217,0.10), rgba(251,199,0,0.05)); border: 1px solid rgba(255,255,255,0.86); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 26px 60px rgba(10,21,48,0.16); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); animation: floatCard 5.5s ease-in-out infinite; } .floating-stat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 22%, rgba(255,255,255,0) 46%); pointer-events: none; } .floating-stat > * { position: relative; z-index: 1; } .floating-stat .label { display: block; font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; } .floating-stat .value { display: block; font-family: "Cormorant Garamond", serif; font-size: 28px; line-height: 1; color: var(--navy); font-weight: 700; margin-bottom: 6px; } .floating-stat p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(10,21,48,0.64); } .stat-a { top: 26px; right: -18px; animation-delay: 0s; } @keyframes floatCard { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } .brand-card { border-radius: var(--radius); padding: 30px; height: 100%; transition: 0.25s ease; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.055)); border: 1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 30px 90px rgba(0,0,0,0.22); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); position: relative; overflow: hidden; } .brand-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(39,124,217,0.2), transparent 35%), radial-gradient(circle at bottom right, rgba(255,255,255,0.08), transparent 28%); pointer-events: none; } .brand-card > * { position: relative; z-index: 2; } .brand-card:hover { transform: translateY(-8px); border-color: rgba(103,179,255,0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 42px 120px rgba(0,0,0,0.34); } .brand-card h3 { color: #fff; font-family: "Cormorant Garamond", serif; font-weight: 700; margin-bottom: 10px; font-size: 34px; letter-spacing: -0.5px; } .brand-card p { color: rgba(255,255,255,0.72); margin-bottom: 0; line-height: 1.78; } .presence-list { padding: 0; margin: 0; list-style: none; } .presence-list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(10,21,48,0.08); color: rgba(10,21,48,0.64); line-height: 1.7; } .presence-list li:last-child { border-bottom: 0; } .presence-list i { color: var(--green); margin-top: 5px; } .visual-panel { min-height: 540px; border-radius: 40px; padding: 28px; display: flex; align-items: end; background: linear-gradient(135deg, rgba(10,21,48,0.58), rgba(39,124,217,0.22)), url("../images/smartmockups-k8vqni8z-1824x1401.png") center/cover no-repeat; color: #fff; overflow: hidden; } .visual-panel-inner { width: 100%; border-radius: 28px; padding: 28px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } .visual-panel-inner h3 { font-family: "Cormorant Garamond", serif; font-size: 38px; font-weight: 700; margin-bottom: 10px; } .visual-panel-inner p { color: rgba(255,255,255,0.76); margin: 0; line-height: 1.75; } .cta { border-radius: 40px; color: var(--navy); } .cta h2 { font-family: "Cormorant Garamond", serif; font-size: clamp(40px, 5vw, 68px); line-height: 0.98; font-weight: 700; letter-spacing: -1.4px; margin-bottom: 16px; text-transform: uppercase; color: var(--navy); } .cta p { color: rgba(10,21,48,0.64); font-size: 17px; line-height: 1.85; margin-bottom: 0; } /* ---------- Inner-page hero (.page-hero, used by all 8 non-home pages) ---------- */ .page-hero { position: relative; padding: 165px 0 95px; overflow: hidden; background: radial-gradient(circle at 14% 16%, rgba(var(--accent-rgb), 0.14), transparent 24%), radial-gradient(circle at 84% 14%, rgba(255,255,255,0.94), transparent 22%), linear-gradient(135deg, #eef8ff 0%, #ffffff 46%, #e4f1ff 100%); color: inherit; } body[data-accent="rose"] .page-hero { background: radial-gradient(circle at 12% 18%, rgba(var(--accent-rgb), 0.12), transparent 26%), radial-gradient(circle at 84% 14%, rgba(255,255,255,0.96), transparent 24%), linear-gradient(135deg, #fff6f1 0%, #ffffff 45%, #fff9f3 100%); } .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,21,48,0.04), rgba(255,255,255,0.28)); pointer-events: none; } .page-hero h1 { font-family: "Cormorant Garamond", serif; font-size: clamp(44px, 6vw, 84px); line-height: 0.95; letter-spacing: -1.4px; margin-bottom: 22px; font-weight: 700; text-transform: uppercase; color: var(--navy); max-width: 760px; } .page-hero h1 span { color: var(--accent); } .page-hero p { font-size: 18px; line-height: 1.9; color: rgba(10,21,48,0.7); max-width: 760px; margin-bottom: 34px; } .hero-rotator { font-family: "Cormorant Garamond", serif; font-size: clamp(24px, 3vw, 40px); line-height: 1.1; color: var(--navy); margin-bottom: 20px; min-height: 52px; } .hero-rotator strong { color: var(--accent); } /* Photo-overlay hero variant: Events, Real-Estate, Farming. Add class="page-hero page-hero--photo" and an inline background-image on the element (each page uses a different photo). */ .page-hero--photo { padding: 165px 0 100px; background: linear-gradient(rgba(10,21,48,0.56), rgba(10,21,48,0.46)); background-size: cover; background-position: center; color: #fff; } .page-hero--photo::before { background: radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb), 0.18), transparent 28%), radial-gradient(circle at 82% 12%, rgba(255,255,255,0.08), transparent 22%); } .page-hero--photo h1 { color: #fff; } .page-hero--photo h1 span { color: var(--yellow); } .page-hero--photo p { color: rgba(255,255,255,0.84); } .page-hero--photo .hero-rotator { color: rgba(255,255,255,0.94); } .page-hero--photo .hero-rotator strong { color: var(--yellow); } .page-hero--photo .eyebrow { border: 1px solid rgba(255,255,255,0.36); background: rgba(255,255,255,0.12); color: var(--yellow); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 14px 36px rgba(0,0,0,0.08); } .page-hero--photo .floating-note { position: static; display: inline-block; margin-top: 18px; background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)); border: 1px solid rgba(255,255,255,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 26px 60px rgba(0,0,0,0.12); } .page-hero--photo .floating-note .label, .page-hero--photo .floating-note .value { color: var(--yellow); } .page-hero--photo .floating-note .value { color: #fff; } .page-hero--photo .floating-note p { color: rgba(255,255,255,0.78); } .hero-signature { margin-top: 22px; } .hero-signature img { width: 140px; max-width: 100%; object-fit: contain; filter: brightness(1.15); } .eyebrow { display: inline-flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,0.86); background: rgba(255,255,255,0.52); color: var(--accent); border-radius: 999px; padding: 9px 16px; font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 24px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 14px 36px rgba(10,21,48,0.07); } .hero-visual-card, .hero-image-card { border-radius: 34px; padding: 18px; position: relative; } .hero-visual-frame, .hero-image-frame { border-radius: 28px; overflow: hidden; min-height: 500px; background: linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,255,255,0.28)), linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(251,199,0,0.04)); border: 1px solid rgba(255,255,255,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 24px 70px rgba(10,21,48,0.14); } .hero-visual-frame img { width: 100%; height: 500px; object-fit: contain; display: block; background: rgba(255,255,255,0.45); } .hero-image-frame img { width: 100%; height: 520px; object-fit: cover; display: block; } /* Customer-Support's IT-style contain hero image */ .support-hero-frame.hero-image-frame { display: flex; align-items: center; justify-content: center; padding: 34px; } .support-hero-frame.hero-image-frame img { width: auto; max-width: 100%; height: auto; max-height: 420px; object-fit: contain; } .floating-note { position: absolute; top: 26px; right: -12px; z-index: 4; min-width: 210px; max-width: 250px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.28)), linear-gradient(135deg, rgba(var(--accent-rgb), 0.10), rgba(251,199,0,0.05)); border: 1px solid rgba(255,255,255,0.86); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 26px 60px rgba(10,21,48,0.16); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .floating-note .label { display: block; font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .floating-note .value { display: block; font-family: "Cormorant Garamond", serif; font-size: 28px; line-height: 1; color: var(--navy); font-weight: 700; margin-bottom: 6px; } .floating-note p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(10,21,48,0.64); } /* ---------- Section system ---------- */ .section { position: relative; padding: 105px 0; } .section-soft { background: radial-gradient(circle at 12% 18%, rgba(var(--accent-rgb), 0.09), transparent 26%), linear-gradient(135deg, rgba(255,255,255,0.36), rgba(234,246,255,0.54)); } .section-navy { color: #fff; background: radial-gradient(circle at 18% 20%, rgba(39,124,217,0.24), transparent 28%), radial-gradient(circle at 86% 18%, rgba(255,255,255,0.08), transparent 24%), linear-gradient(135deg, var(--navy), var(--navy-2)); overflow: hidden; } .section-navy::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 90%); pointer-events: none; } .section-title { max-width: 860px; margin-bottom: 52px; } .section-title.center { margin-left: auto; margin-right: auto; text-align: center; } .section-title.mb-0 { margin-bottom: 0; } .section-label { color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: 5px; font-size: 12px; margin-bottom: 16px; } .section-navy .section-label { color: var(--yellow); } .section-title h2 { font-family: "Cormorant Garamond", serif; font-size: clamp(36px, 5vw, 68px); line-height: 0.98; letter-spacing: -1.3px; color: var(--navy); font-weight: 700; margin-bottom: 18px; text-transform: uppercase; } .section-navy .section-title h2 { color: #fff; } .section-title p { color: rgba(10,21,48,0.64); font-size: 17px; line-height: 1.85; margin: 0; } .section-navy .section-title p { color: rgba(255,255,255,0.76); } /* ---------- Card family (shared shape across every division page) ---------- */ .about-card, .presence-box, .contact-card, .cta, .overview-card, .feature-card, .branch-card, .newsletter-card, .cta-card, .gallery-card, .service-card, .detail-card, .booking-card, .process-card, .support-card, .content-card, .timeline-card, .unit-card, .contact-form-card, .contact-info-card, .map-info-card { border-radius: var(--radius); padding: 34px; height: 100%; } .about-card h3, .presence-box h3, .contact-card h3, .overview-card h3, .feature-card h3, .branch-card h3, .newsletter-card h3, .cta-card h3, .gallery-card h3, .service-card h3, .detail-card h3, .booking-card h3, .process-card h3, .support-card h3, .content-card h3, .timeline-card h3, .unit-card h3, .contact-form-card h3, .contact-info-card h3, .map-info-card h3 { color: var(--navy); font-family: "Cormorant Garamond", serif; font-size: 32px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.5px; } .about-card p, .contact-card p, .overview-card p, .feature-card p, .branch-card p, .newsletter-card p, .cta-card p, .gallery-card p, .service-card p, .detail-card p, .booking-card p, .process-card p, .support-card p, .content-card p, .timeline-card p, .unit-card p, .contact-form-card p, .contact-info-card p, .map-info-card p { color: rgba(10,21,48,0.64); line-height: 1.82; margin-bottom: 0; } .branch-card h4, .contact-card h4, .newsletter-card h4 { color: var(--navy); font-size: 18px; font-weight: 800; margin-bottom: 10px; } .branch-card a, .contact-card a { color: var(--accent); word-break: break-word; } .service-card, .support-card { overflow: hidden; transition: 0.25s ease; } .service-card:hover, .support-card:hover, .unit-card:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 40px 120px rgba(10,21,48,0.24); } .unit-card { transition: 0.25s ease; } .service-card a, .unit-card a { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--accent); font-weight: 900; } .cta-card h3 { font-size: clamp(34px, 4vw, 56px); line-height: 0.98; text-transform: uppercase; } .service-image { height: 220px; overflow: hidden; position: relative; background: rgba(255,255,255,0.55); } .service-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* IT-Services uses contain (product/illustration renders) */ .service-image.contain img { object-fit: contain; padding: 18px; } .service-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(251,199,0,0.12); border: 1px solid rgba(251,199,0,0.24); color: #b68900; font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); } .icon-box { width: 64px; height: 64px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(255,255,255,0.24)), linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.04)); border: 1px solid rgba(255,255,255,0.84); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 25px; margin-bottom: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 18px 40px rgba(var(--accent-rgb), 0.1); } .fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; } .fact-box { border-radius: 24px; padding: 22px; background: linear-gradient(145deg, rgba(255,255,255,0.64), rgba(255,255,255,0.22)); border: 1px solid rgba(255,255,255,0.78); box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 18px 45px rgba(10,21,48,0.08); } .fact-box strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 34px; line-height: 1; color: var(--navy); margin-bottom: 8px; } .fact-box span { color: rgba(10,21,48,0.62); font-size: 14px; line-height: 1.6; } .highlight-card { border-radius: 32px; padding: 30px; height: 100%; transition: 0.25s ease; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.055)); border: 1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 30px 90px rgba(0,0,0,0.22); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); position: relative; overflow: hidden; } .highlight-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(39,124,217,0.2), transparent 35%), radial-gradient(circle at bottom right, rgba(255,255,255,0.08), transparent 28%); pointer-events: none; } .highlight-card > * { position: relative; z-index: 2; } .highlight-card h3 { color: #fff; font-family: "Cormorant Garamond", serif; font-weight: 700; margin-bottom: 10px; font-size: 34px; letter-spacing: -0.5px; } .highlight-card p { color: rgba(255,255,255,0.76); margin-bottom: 0; line-height: 1.78; } /* ---------- Gallery / impact media grids (Events, Charity) ---------- */ .gallery-item, .impact-item { position: relative; overflow: hidden; border-radius: 26px; height: 260px; background: rgba(255,255,255,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 18px 45px rgba(10,21,48,0.08); cursor: pointer; } .impact-item { border-radius: 28px; height: 360px; cursor: default; } .gallery-item img, .impact-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .gallery-item:hover img, .impact-item:hover img { transform: scale(1.06); } .gallery-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,21,48,0.58), rgba(10,21,48,0.06)); display: flex; align-items: end; padding: 18px; } .gallery-item .overlay span { color: #fff; font-weight: 800; letter-spacing: 1px; font-size: 13px; text-transform: uppercase; } .impact-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,21,48,0.7), rgba(10,21,48,0.08)); display: flex; align-items: end; padding: 22px; } .impact-overlay h4 { margin: 0 0 6px; color: #fff; font-family: "Cormorant Garamond", serif; font-size: 32px; font-weight: 700; } .impact-overlay p { margin: 0; color: rgba(255,255,255,0.82); line-height: 1.7; font-size: 14px; } /* ---------- Farming process steps ---------- */ .feature-media { border-radius: 32px; overflow: hidden; min-height: 520px; background: rgba(255,255,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 18px 45px rgba(10,21,48,0.08); } .feature-media img { width: 100%; height: 520px; object-fit: cover; display: block; } .process-step { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid rgba(10,21,48,0.08); } .process-step:last-child { border-bottom: 0; padding-bottom: 0; } .process-badge { width: 68px; height: 68px; flex: 0 0 68px; border-radius: 24px; display: flex; align-items: center; justify-content: center; position: relative; background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(255,255,255,0.24)), linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.04)); border: 1px solid rgba(255,255,255,0.84); box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 18px 40px rgba(var(--accent-rgb), 0.12); color: var(--accent); font-size: 26px; } .process-badge .step-number { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow), #dba800); color: #102033; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(251,199,0,0.3); } .process-copy h4 { margin: 0 0 8px; color: var(--navy); font-size: 22px; font-weight: 800; letter-spacing: -0.3px; } .process-copy p { margin: 0; } .process-copy a { color: var(--accent); font-weight: 900; } /* ---------- Real-Estate FAQ accordion ---------- */ .accordion-item { border: 0; margin-bottom: 14px; border-radius: 20px !important; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(255,255,255,0.24)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 14px 30px rgba(10,21,48,0.06); } .accordion-button { font-weight: 800; color: var(--navy); background: transparent; box-shadow: none !important; padding: 20px 22px; } .accordion-button:not(.collapsed) { color: var(--accent); background: rgba(255,255,255,0.62); } .accordion-body { color: rgba(10,21,48,0.66); line-height: 1.8; padding: 0 22px 22px; } /* ---------- About-Us timeline ---------- */ .timeline-list { list-style: none; padding: 0; margin: 0; } .timeline-list li { position: relative; padding: 0 0 24px 28px; color: rgba(10,21,48,0.66); line-height: 1.75; border-left: 1px solid rgba(var(--accent-rgb), 0.18); margin-left: 8px; } .timeline-list li:last-child { padding-bottom: 0; } .timeline-list li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 2px solid rgba(255,255,255,0.95); box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.2); position: absolute; left: -8px; top: 5px; } .timeline-year { display: block; color: var(--accent); font-weight: 900; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; margin-bottom: 8px; } /* ---------- Contact-Us specific blocks ---------- */ .contact-hero-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; max-width: 640px; } .mini-info { border-radius: 22px; padding: 18px; background: linear-gradient(145deg, rgba(255,255,255,0.62), rgba(255,255,255,0.22)); border: 1px solid rgba(255,255,255,0.78); box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 18px 45px rgba(10,21,48,0.08); } .mini-info strong { display: block; color: var(--navy); font-size: 15px; margin-bottom: 6px; } .mini-info span, .mini-info a { color: rgba(10,21,48,0.66); font-size: 14px; line-height: 1.6; word-break: break-word; } .contact-channel { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(10,21,48,0.08); } .contact-channel:last-child { border-bottom: 0; padding-bottom: 0; } .contact-channel h4 { margin: 0 0 6px; font-size: 21px; color: var(--navy); font-weight: 800; letter-spacing: -0.3px; } .contact-channel p, .contact-channel a { color: rgba(10,21,48,0.66); line-height: 1.8; margin: 0; word-break: break-word; } .map-shell { position: relative; min-height: 560px; border-radius: 36px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 30px 90px rgba(10,21,48,0.14); } .map-shell iframe { width: 100%; height: 560px; border: 0; display: block; filter: saturate(1.05) contrast(1.02); } .map-info-wrap { position: absolute; left: 28px; bottom: 28px; max-width: 380px; } .map-info-card { background: linear-gradient(145deg, rgba(10,21,48,0.82), rgba(16,34,74,0.68)), linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 60px rgba(0,0,0,0.22); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .map-info-card h3, .map-info-card p, .map-info-card a { color: #fff; } .map-info-card p { color: rgba(255,255,255,0.82); } .map-info-card a { color: rgba(255,255,255,0.92); } /* ---------- Customer-Support specific blocks ---------- */ .support-option { border-radius: 30px; overflow: hidden; transition: 0.25s ease; height: 100%; } .support-option:hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 40px 120px rgba(10,21,48,0.2); } .support-body { padding: 30px; } .support-option h3 { color: var(--navy); font-family: "Cormorant Garamond", serif; font-size: 30px; font-weight: 700; line-height: 1.05; margin-bottom: 12px; letter-spacing: -0.4px; } .support-option p { color: rgba(10,21,48,0.66); line-height: 1.8; margin-bottom: 0; font-size: 15px; } .support-option a.inline-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--accent); font-weight: 900; } .calendly-wrap { border-radius: 34px; overflow: hidden; min-height: 690px; } .calendly-inline-widget { min-width: 320px; height: 690px; } /* ---------- Forms (newsletter / inquiry / booking / contact) ---------- */ .newsletter-form .form-control, .newsletter-form .form-select, .inquiry-form .form-control, .inquiry-form .form-select, .booking-form .form-control, .booking-form .form-select, .contact-form .form-control, .contact-form .form-select { min-height: 54px; border-radius: 16px; border: 1px solid rgba(10,21,48,0.08); background: rgba(255,255,255,0.72); box-shadow: none; padding: 12px 18px; } .inquiry-form textarea.form-control, .booking-form textarea.form-control, .contact-form textarea.form-control { min-height: 140px; resize: vertical; } .newsletter-form .form-control:focus, .newsletter-form .form-select:focus, .inquiry-form .form-control:focus, .inquiry-form .form-select:focus, .booking-form .form-control:focus, .booking-form .form-select:focus, .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: rgba(var(--accent-rgb), 0.4); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.08); } .newsletter-form .form-check-label, .inquiry-form .form-check-label, .booking-form .form-check-label, .contact-form .form-check-label { color: rgba(10,21,48,0.58); font-size: 14px; line-height: 1.7; } .form-note { color: rgba(10,21,48,0.58); font-size: 14px; line-height: 1.7; } .form-status { margin-top: 12px; font-size: 14px; color: rgba(10,21,48,0.62); min-height: 20px; } /* ---------- Footer ---------- */ .footer { background: radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.18), transparent 26%), linear-gradient(135deg, #04111f, var(--navy)); color: rgba(255,255,255,0.66); padding: 78px 0 30px; border-top: 1px solid rgba(255,255,255,0.12); } .footer h4 { color: #fff; font-family: "Cormorant Garamond", serif; font-weight: 700; margin-bottom: 18px; font-size: 27px; } .footer a { color: rgba(255,255,255,0.68); display: block; margin-bottom: 10px; } .footer a:hover { color: var(--footer-link-hover); } .footer-brand { color: #fff; font-family: "Cormorant Garamond", serif; font-size: 38px; font-weight: 700; margin-bottom: 12px; line-height: 1; } .footer p { line-height: 1.8; } .footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; } /* ---------- WhatsApp float ---------- */ .whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 999; width: 60px; height: 60px; border-radius: 22px; background: linear-gradient(135deg, #25d366, #0cae4e); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 0 18px 45px rgba(37,211,102,0.38); transition: 0.25s ease; } .whatsapp-float:hover { transform: translateY(-4px) scale(1.04); color: #fff; } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .hero { min-height: auto; padding: 140px 0 76px; } .hero-copy { padding-right: 0; } .hero-photo-card { min-height: auto; } .hero-photo-frame, .hero-photo-frame img { min-height: 320px; } .floating-stat { min-width: 150px; max-width: 180px; padding: 14px 14px; } .floating-stat .value { font-size: 24px; } .stat-a { top: 18px; right: 14px; } .visual-panel { min-height: 420px; } .cta { padding: 36px; } .page-hero, .page-hero--photo { padding: 140px 0 76px; } .hero-visual-frame, .hero-image-frame { min-height: 360px; } .hero-visual-frame img { height: 360px; } .hero-image-frame img { height: 360px; } .support-hero-frame.hero-image-frame img { max-height: 320px; } .feature-media, .feature-media img { min-height: 360px; height: 360px; } .floating-note { top: 18px; right: 14px; } .cta-card { padding: 36px; } .map-info-wrap { position: static; max-width: 100%; padding: 20px; } .map-shell { min-height: auto; } .map-shell iframe { height: 420px; } } @media (max-width: 767px) { .fact-grid { grid-template-columns: 1fr; } .process-step { flex-direction: column; } .contact-hero-info { grid-template-columns: 1fr; } } @media (max-width: 575px) { .top-strip { display: none; } .navbar { padding: 12px 0; } .navbar-brand { font-size: 15px; } .navbar-brand small { font-size: 10px; } .brand-mark { width: 40px; height: 40px; border-radius: 15px; } .hero { padding-top: 118px; } .hero h1 { font-size: 42px; } .hero p { font-size: 16px; } .page-hero, .page-hero--photo { padding-top: 118px; } .page-hero h1 { font-size: 42px; } .page-hero p { font-size: 16px; } .hero-rotator { min-height: 40px; font-size: 24px; } .section { padding: 76px 0; } .about-card, .presence-box, .contact-card, .cta, .service-body, .overview-card, .feature-card, .branch-card, .newsletter-card, .cta-card, .gallery-card, .service-card, .detail-card, .booking-card, .process-card, .support-card, .content-card, .timeline-card, .unit-card, .contact-form-card, .contact-info-card, .map-info-card { padding: 28px; } .floating-stat, .floating-note { display: none; } .btn-palm, .btn-outline-palm { width: 100%; } .whatsapp-float { width: 56px; height: 56px; border-radius: 20px; } }