*/
/* ─── SITE‑WIDE GRIDLINES INSIDE TEAM CARDS ───────────────────────────── */
.team-card {
position: relative; /* establish a positioning context */
overflow: hidden; /* clip the overlay to the rounded corners */
}
.team-card::before {
content: "";
position: absolute;
inset: 0; /* cover the entire card */
z-index: 0; /* behind all card content */
pointer-events: none; /* let clicks pass through */
/* exact same grid background as body::before */
background-image: linear-gradient(to right, var(--stripe) 1px, transparent 1px);
background-size: 40px 100%;
opacity: 1; /* full visibility—tweak to 0.8 if you prefer slightly softer lines */
border-radius: inherit; /* lines follow the card’s rounding */
}
/* ensure all real card content sits above the grid */
.team-card > * {
position: relative;
z-index: 1;
}
/* ——— SaynCrotech Service‑Modal Styles ——— */
.sc-hidden { display: none !important; }
.sc-modal {
position: fixed; inset: 0;
display: grid; place-items: center;
z-index: 10000;
}
.sc-backdrop {
position: absolute; inset: 0;
backdrop-filter: blur(6px);
background: rgba(0,0,0,0.4);
z-index: 1;
}
.sc-content {
position: relative;
background: #fff;
width: 90%; max-width: 700px;
max-height: 85vh; overflow-y: auto;
border-radius: 1rem; padding: 2rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
z-index: 2;
}
.sc-close {
position: absolute; top: 0.5rem; right: 1rem;
background: none; border: none;
font-size: 2rem; cursor: pointer; line-height: 1;
}
.sc-body h2 { margin-top: 0; font-size: 1.75rem; }
.sc-body h3 { margin-top: 1.25rem; font-size: 1.25rem; }
.sc-body p,
.sc-body ul,
.sc-body ol {
margin: 0.75rem 0; line-height: 1.6;
}
.sc-body ul { padding-left: 1.25rem; }
/* prevent background scroll when modal open */
body.sc-open { overflow: hidden !important; }
/* ─── Service Modal Typography & Layout ─── */
#service-modal .modal-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
max-height: 80vh;
overflow-y: auto;
padding: 2.5rem;
}
/* Modal Title */
#service-modal-title {
font-family: 'Playfair Display', serif;
font-size: 2.25rem;
font-weight: 700;
margin: 0;
color: var(--accent);
text-align: center;
position: relative;
}
#service-modal-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--accent);
margin: 0.5rem auto 0;
border-radius: 2px;
}
/* Intro paragraph */
#service-modal-desc {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: var(--text-dark);
margin-bottom: 1rem;
}
/* Section headings inside the description (if you embed
) */
#service-modal .modal-content h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.25rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: var(--text-dark);
border-left: 4px solid var(--accent);
padding-left: 0.75rem;
}
/* Lists */
#service-modal .modal-content ul {
list-style: disc inside;
margin-left: 1rem;
color: var(--text-dark);
}
#service-modal .modal-content ul li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
/* Paragraph blocks */
#service-modal .modal-content p {
margin: 0.75rem 0;
}
/* Scrollbar styling */
#service-modal .modal-content::-webkit-scrollbar {
width: 8px;
}
#service-modal .modal-content::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 4px;
}
#service-modal .modal-content::-webkit-scrollbar-track {
background: rgba(0,0,0,0.05);
border-radius: 4px;
}
/* Dark mode overrides */
.dark-mode #service-modal-title {
color: var(--accent);
}
.dark-mode #service-modal .modal-content {
background: var(--card-bg);
color: var(--text-dark);
}
.dark-mode #service-modal .modal-content::-webkit-scrollbar-thumb {
background: var(--text-dark);
}
/* ─── Improved Paragraph & Bullet Formatting ─── */
#service-modal-desc {
/* Honor explicit line breaks in your JS strings */
white-space: pre-wrap;
/* Justify text for that polished look */
text-align: justify;
/* Comfortable line-height */
line-height: 1.75;
/* Add space below each “paragraph” (i.e., after each double‑newline) */
margin-bottom: 1rem;
}
/* If you decide to split your desc into
elements instead of a single block: */
#service-modal-desc p {
margin: 0 0 1rem;
text-indent: 1.2em; /* optional first‑line indent */
}
/* Make any bullet character (•) start its own line */
#service-modal-desc {
/* Treat the bullet as a block-level marker */
text-transform: none;
}
#service-modal-desc::before {
/* nothing */
}
/* Alternatively, if you wrap bullets in
inside a , use: */
#service-modal-desc ul {
padding-left: 1.5rem;
margin: 1rem 0;
list-style: disc;
}
#service-modal-desc ul li {
margin-bottom: 0.75rem;
}
/* Dark‑mode tweak (optional) */
.dark-mode #service-modal-desc {
color: var(--text-dark);
}
/* ────────────────────────────────────────────────────────────────
FORCE HERO TO GROW & RESTORE PAGE SCROLL ON MOBILE
──────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
/* 1) Let your hero expand instead of locking at 100vh */
.hero {
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
}
}
@media (max-width: 576px) {
/* 2) Same for super‑small phones */
.hero {
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
}
}
/* ────────────────────────────────────────────────────────────────
MAKE OFF‑CANVAS NAV *TRULY* IGNORE TOUCHES WHEN CLOSED
──────────────────────────────────────────────────────────────── */
.navbar nav {
pointer-events: none !important;
}
.navbar nav.open {
pointer-events: auto !important;
}
/* ────────────────────────────────────────────────────────────────
IMPROVED MOBILE LAYOUT FOR “Meet Our Team” & ALL SECTIONS
Paste at the very end of style.css
──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* 1) Give the team section some breathing room */
.team-section {
padding: 2rem 1rem !important;
}
/* 2) Stack cards in a single column */
.team-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
/* 3) Center and cap each card’s width */
.team-card {
max-width: 100%;
margin: 0 auto !important;
}
/* 4) Make the image a bit less tall (so it doesn’t dominate) */
.team-image {
padding-top: 75% !important; /* 4:3 aspect ratio vs. 1:1 */
}
/* 5) Tweak text sizes for readability */
.team-info h3 {
font-size: 1.25rem !important;
}
.team-info p {
font-size: 0.9rem !important;
}
.team-info a {
font-size: 0.9rem !important;
padding: 0.5rem 1rem !important;
}
}
/* Also ensure all sections below About Us show up smoothly */
@media (max-width: 768px) {
section {
padding: 3rem 1rem !important;
}
}
@media (max-width: 768px) {
.team-card {
/* Center & size */
width: 100% !important;
max-width: 340px !important;
margin: 0 auto 2rem !important;
/* Premium border gradient */
border: 2px solid transparent !important;
border-radius: 1.5rem !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
background-image:
linear-gradient(#fff, #fff),
linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02)) !important;
/* Inner glow */
box-shadow:
inset 0 0 12px rgba(0,0,0,0.06),
0 12px 30px rgba(0,0,0,0.1) !important;
transition: transform .3s ease, box-shadow .3s ease !important;
}
.team-card:active {
transform: translateY(2px) scale(0.98) !important;
}
.team-image {
/* Make image taller and overlay a soft gradient */
padding-top: 65% !important; /* ~3:2 aspect */
position: relative !important;
overflow: hidden !important;
}
.team-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.15)) !important;
pointer-events: none;
}
.team-image img {
/* Slight parallax on hover */
transition: transform .6s ease !important;
}
.team-card:hover .team-image img {
transform: scale(1.08) !important;
}
.team-info {
padding: 1.75rem 1.25rem !important;
text-align: center !important;
}
.team-info h3 {
font-size: 1.35rem !important;
margin-bottom: 0.25rem !important;
letter-spacing: 0.5px !important;
}
.team-info p {
font-size: 0.9rem !important;
font-style: normal !important;
opacity: 0.8 !important;
margin-bottom: 1rem !important;
}
.team-info a {
font-size: 0.85rem !important;
padding: 0.5rem 1.25rem !important;
border-radius: 50px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
}
@media (max-width: 768px) {
/* 1) Disable the press‑down transform—cards stay still on tap */
.team-card:active {
transform: none !important;
box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
}
/* 2) Force a true square for all team photos */
.team-image {
padding-top: 100% !important; /* square aspect */
}
.team-image img {
position: absolute !important;
top: 0; left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transform: none !important; /* kill any hover/parallax on click */
}
}
/* ── Mobile tune: square photos + no card “press” transform ── */
@media (max-width: 768px) {
.team-image {
padding-top: 100% !important; /* force square */
}
.team-image img {
position: absolute !important;
top: 0; left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transform: none !important;
}
.team-card:active {
transform: none !important;
box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
}
}
/* ─── FINAL OVERRIDE: TEAM CARDS IN DARK MODE ─── */
html.dark-mode .team-card {
/* solid dark background */
background-color: #0d0d0d !important;
/* kill gridlines leak */
background-image: none !important;
/* crisp white glow */
box-shadow: 0 12px 30px rgba(255,255,255,0.1) !important;
/* light border for contrast */
border: 1px solid rgba(255,255,255,0.2) !important;
}
/* remove any pseudo-element leaking through */
html.dark-mode .team-card::before {
display: none !important;
}
/* make the name & role text white */
html.dark-mode .team-card .team-info h3,
html.dark-mode .team-card .team-info p {
color: #ffffff !important;
}
/* invert the “View Portfolio” button */
html.dark-mode .team-card .team-info a {
background-color: #ffffff !important;
color: #0d0d0d !important;
border-color: transparent !important;
}
/* re‑apply inside the mobile media query in case it’s later overridden */
@media (max-width: 768px) {
html.dark-mode .team-card {
background-color: #0d0d0d !important;
background-image: none !important;
}
html.dark-mode .team-card .team-info h3,
html.dark-mode .team-card .team-info p {
color: #ffffff !important;
}
html.dark-mode .team-card .team-info a {
background-color: #ffffff !important;
color: #0d0d0d !important;
}
}
/* ─── Hide All Scrollbars ─── */
html, body {
/* Firefox */
scrollbar-width: none;
/* IE10+ */
-ms-overflow-style: none;
}
/* Chrome, Safari, Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* ==== NAVBAR OVERRIDES ==== */
.navbar nav {
display: flex !important;
gap: 2rem !important;
margin: 0 auto !important;
pointer-events: auto !important;
z-index: 999 !important;
}
.navbar nav a {
position: relative !important;
pointer-events: auto !important;
}
.navbar nav a::after {
content: "" !important;
position: absolute !important;
bottom: -4px !important;
left: 0 !important;
height: 2px !important;
width: 0 !important;
background: var(--accent) !important;
transition: width .3s !important;
}
.navbar nav a:hover::after,
.navbar nav a.active::after {
width: 100% !important;
}
/* ─── MOBILE NAV: SHRINK LINKS TO TEXT ─── */
@media (max-width: 768px) {
/* Make the nav items stack but only as wide as their content */
.navbar nav {
flex-direction: column !important;
align-items: flex-start !important;
}
.navbar nav a {
/* Prevent flex from stretching them */
flex: 0 0 auto !important;
/* Shrink to text width */
display: inline-block !important;
width: auto !important;
/* Keep your padding for tap targets */
padding: .75rem 1rem !important;
/* Ensure underline anchors to the text box */
position: relative !important;
align-self: flex-start !important;
}
.navbar nav a::after {
/* Reset any lingering widths */
content: "" !important;
position: absolute !important;
bottom: -4px !important;
left: 0 !important;
right: auto !important;
height: 2px !important;
width: 0 !important;
background: var(--accent) !important;
transition: width .3s !important;
}
.navbar nav a:hover::after,
.navbar nav a.active::after {
/* Now 100% refers only to the inline‑block width (i.e. the text) */
width: 100% !important;
}
}
/* ==== PREMIUM SOCIAL‑BAR ICON‑ONLY STYLE ==== */
.social-bar {
position: fixed;
top: 50%;
left: 1rem;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 10;
}
/* Hide the text and make each link a circle */
.social-bar a {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background: rgba(255,255,255,0.8);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-decoration: none;
/* hide the text label */
text-indent: -9999px;
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}
/* Show only the icon */
.social-bar a i {
text-indent: 0;
font-size: 1.25rem;
color: var(--text-dark);
transition: color 0.3s ease;
}
/* Hover effect: lift + accent background + invert icon */
.social-bar a:hover {
transform: translateY(-4px);
background: var(--accent);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.social-bar a:hover i {
color: var(--bg);
}
/* Dark‑mode tweaks */
.dark-mode .social-bar a {
background: rgba(255,255,255,0.1);
box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}
.dark-mode .social-bar a i {
color: var(--text-dark);
}
.dark-mode .social-bar a:hover {
background: var(--accent);
box-shadow: 0 8px 20px rgba(255,255,255,0.2);
}
.dark-mode .social-bar a:hover i {
color: var(--bg);
}
/* — Projects Grid: left‑aligned flex container — */
.projects-grid {
display: flex;
justify-content: flex-start;
gap: 2rem;
flex-wrap: wrap;
margin-top: 2rem;
}
/* Remove auto‑centering on each card */
.projects-grid .project-card {
margin: 0;
}
/* Fix card height and make back‑face scrollable */
.projects-grid .flip-card {
height: 380px; /* match your front‑side height */
}
.projects-grid .flip-card-back {
max-height: 100%;
overflow-y: auto;
padding: 2rem; /* keep your existing padding */
}
/* — Case Studies grid matches Projects — */
.case-study .projects-grid {
display: flex;
justify-content: flex-start;
gap: 2rem;
flex-wrap: wrap;
margin-top: 2rem;
}
/* — Static Case card styling — */
.case-card {
/* reuse the Project/project-card styles */
background: #fff;
border-radius: .5rem;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
width: 280px;
min-height: 380px; /* match flip-card min-height :contentReference[oaicite:0]{index=0} */
margin: 0; /* remove auto-centering :contentReference[oaicite:1]{index=1} */
cursor: pointer;
}
/* Hover lift effect */
.case-card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border-color: var(--accent);
}
/* Inner content padding & typography */
.case-card .flip-card-front {
padding: 2rem; /* match Project front padding :contentReference[oaicite:2]{index=2} */
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.case-card .flip-card-front h3 {
margin-bottom: .75rem;
font-size: 1.25rem;
font-weight: 600;
}
.case-card .flip-card-front p {
font-size: .95rem;
opacity: .8;
}
/* Applies to both the front/back of flip‑cards and the static project cards */
.projects-grid .project-card,
.projects-grid .case-card,
.flip-card-front,
.flip-card-back {
background-color: var(--card-bg) !important;
border: 1px solid var(--card-border);
border-radius: 12px;
box-shadow: 0 2px 8px var(--card-shadow);
overflow: hidden;
}
@media (max-width: 768px) {
/* Switch grid to flex so we can center fixed‑width cards */
.projects-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem; /* keep a little spacing */
}
/* Force cards to their desktop width and center them */
.projects-grid .project-card,
.projects-grid .case-card {
flex: 0 0 300px; /* match your desktop card width */
margin: 0 auto;
}
}
/* -------- LIGHT MODE (Default) -------- */
.social-bar a i {
color: #222; /* Dark icons for light background */
transition: transform 0.3s ease, color 0.3s ease;
}
.social-bar a:hover i,
.social-bar a:active i {
color: #000; /* Even darker on hover */
transform: scale(1.15);
}
.social-bar a {
background-color: #f2f2f2;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.social-bar a:hover,
.social-bar a:active {
background-color: #e5e5e5;
transform: translateY(-2px);
}
/* -------- DARK MODE FIX ONLY -------- */
.dark-mode .social-bar a i {
color: #fff; /* White icons for dark mode */
}
.dark-mode .social-bar a:hover i,
.dark-mode .social-bar a:active i {
color: #fff !important; /* Always visible on hover */
transform: scale(1.15);
}
.dark-mode .social-bar a {
background-color: #1a1a1a;
}
.dark-mode .social-bar a:hover,
.dark-mode .social-bar a:active {
background-color: #2a2a2a;
transform: translateY(-2px);
}
.social-bar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1000; /* Make sure it's above content but below modal */
pointer-events: auto; /* Allow clicks */
}
.social-bar a {
pointer-events: auto; /* Make sure each link is clickable */
}
.custom-cursor {
pointer-events: none; /* Important! Don't block interactions */
z-index: 9999; /* High enough to show, but not interfere */
}
@media (max-width: 576px) {
/* 1) Reposition the bar so it sits nicely at the left edge vertically centered */
.social-bar {
top: 50%;
left: 0.5rem; /* a little closer to the edge */
transform: translateY(-50%);
pointer-events: auto; /* re-enable taps */
}
/* Base styles (as before) */
.social-bar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
z-index: 1000;
}
.social-bar a {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
color: #000;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: all 0.2s;
}
.dark-mode .social-bar a {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
/* ==== MOBILE OVERRIDES ==== */
@media (max-width: 600px) {
.social-bar {
/* move it slightly in from the very edge so it never clips */
left: 0.5rem;
}
.social-bar a {
/* smaller tap targets on tighter screens */
width: 2.5rem;
height: 2.5rem;
}
}
}
/* Hide link text, show only the icon */
.social-bar a {
/* collapse the font so only the remains */
font-size: 0;
/* ensure no wrapping or overflow */
white-space: nowrap;
overflow: hidden;
}
.social-bar a i {
/* restore an icon‐friendly font size */
font-size: 1.25rem;
/* center the icon vertically/horizontally */
line-height: 1;
}
/* Center testimonial on mobile */
@media (max-width: 600px) {
.testimonials-grid {
/* switch to flex so we can center */
display: flex;
justify-content: center;
align-items: center;
/* ensure only one card per “row” */
flex-wrap: nowrap;
}
.testimonial-card {
/* shrink to content width, then center via auto margins */
max-width: 90%;
margin: 0 auto;
}
}
/* ─── PROJECT‑CARD LOGO ─── */
.project-logo {
display: block;
max-width: 120px; /* adjust size as you like */
width: 100%;
height: auto;
margin: 8px auto 0; /* small gap above */
transition: filter 0.3s ease;
}
/* Dark‑mode: invert only the dark parts of your logo */
.dark-mode .project-logo {
filter: brightness(0) invert(1);
}
/* Push the project‑card logo in the OUR PROJECTS section down */
.projects .flip-card-front .project-logo {
margin-top: 70px; /* increase this value to move it further down, or decrease for less space */
}
/* 1) Remove the stray quotation pseudo‑element in Testimonials */
.testimonials blockquote::before {
content: none !important;
}
/* 2) Enlarge & style the client avatar for a premium look */
.testimonials .avatar img {
width: 120px; /* bump up size */
height: 120px;
object-fit: cover;
border-radius: 50%; /* perfect circle */
border: 4px solid #fff; /* white frame */
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 3) Subtle hover “lift” on the avatar */
.testimonials .avatar img:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
/* Avatar wrapper with clean single border */
.testimonials .avatar {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #000; /* black in light mode */
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
background-color: transparent; /* ← No white bg that causes ring */
}
/* Dark mode override */
html.dark-mode .testimonials .avatar {
border-color: #fff;
box-shadow: 0 6px 24px rgba(255, 255, 255, 0.1);
}
/* Image inside avatar: fill, no border or background */
.testimonials .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border: none; /* ← Important: remove any img borders */
border-radius: 50%; /* perfect circle crop */
background: transparent; /* ← Kill any white bg */
display: block;
}
/* close button inside mobile nav */
.nav-close {
position: absolute;
top: 1rem; /* match your header padding */
right: 1rem; /* align with marker area */
font-size: 2rem;
line-height: 1;
background: none;
border: none;
cursor: pointer;
z-index: 1000; /* above the nav panel */
color: inherit; /* same color as your nav text */
display: none; /* hide by default on desktop */
}
/* show it only when mobile menu is open */
.navbar nav.open ~ .nav-close {
display: block;
}
/* 3) Globally force native momentum scrolling & unlock any hidden overflow */
html, body {
height: auto !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important; /* iOS momentum */
overscroll-behavior-y: auto !important; /* allow bounce */
}
/* =========================
About-expanded — premium styles (light + dark)
Append this block to the END of style.css
========================= */
.about-expanded {
max-width: 1080px;
margin: 28px auto 72px;
padding: 28px 22px;
box-sizing: border-box;
}
.about-expanded-inner { display:flex; justify-content:center; width:100%; }
.about-left { width:100%; max-width:920px; text-align:center; display:flex; flex-direction:column; gap:18px; }
.about-heading { font-family: 'Playfair Display', serif; font-size:36px; margin:0; color:var(--accent); letter-spacing:-0.6px; line-height:1.05; font-weight:700; }
.brand-highlight { font-weight:800; }
.about-lead { margin:0 auto; color:var(--muted); line-height:1.65; font-size:16px; max-width:820px; }
/* Premium features grid */
.premium-features {
display:grid;
grid-template-columns: 1fr;
gap:14px;
margin-top:6px;
}
/* Reuse .feature but increase specificity to override older rules */
.about-expanded .feature {
display:flex;
gap:16px;
align-items:center;
border-radius:14px;
padding:18px 22px;
background: #ffffff;
border: 1px solid rgba(11,17,32,0.05);
box-shadow: 0 18px 42px rgba(11,17,32,0.06);
transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease, border-color 240ms ease, transform 240ms ease;
}
/* icon plate */
.about-expanded .feature .f-ico {
width:64px;
height:64px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:18px;
color:var(--accent);
background:#ffffff;
border:1px solid rgba(11,17,32,0.04);
flex-shrink:0;
box-shadow: 0 10px 26px rgba(11,17,32,0.05);
}
/* text body */
.about-expanded .feature h4 { margin:0 0 6px 0; font-size:18px; color:var(--accent); font-weight:800; text-align:left; }
.about-expanded .feature p { margin:0; color:var(--muted); font-size:14px; text-align:left; }
/* company story */
.company-story { margin-top:8px; color:var(--muted); font-size:15px; line-height:1.7; max-width:820px; margin-left:auto; margin-right:auto; }
/* mission/vision row */
.mv-row {
display:grid;
grid-template-columns: 1fr 1fr;
gap:14px;
margin-top:18px;
align-items:stretch;
}
.mv-card {
background: linear-gradient(180deg,#ffffff,#fbfbfb);
border-radius:12px;
padding:16px 18px;
box-shadow: 0 12px 30px rgba(11,17,32,0.04);
border: 1px solid rgba(11,17,32,0.04);
text-align:left;
}
.mv-card h5 { margin:0 0 8px 0; font-size:14px; color:var(--accent); font-weight:800; }
.mv-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
/* responsive */
@media (max-width:900px) {
.about-heading { font-size:28px; }
.about-expanded .feature { padding:14px 16px; box-shadow: 0 10px 28px rgba(11,17,32,0.06); border-radius:12px; }
.about-expanded .feature .f-ico { width:52px; height:52px; }
.mv-row { grid-template-columns: 1fr; }
}
/* =========================
Dark mode overrides
(covers html.dark-mode, body.dark-theme and data-theme='dark')
========================= */
html.dark-mode .about-expanded .feature,
body.dark-theme .about-expanded .feature,
body[data-theme='dark'] .about-expanded .feature,
.dark .about-expanded .feature {
background: linear-gradient(180deg, #070708 0%, #0c0c0c 100%) !important;
border: 1px solid rgba(255,255,255,0.04) !important;
box-shadow: 0 14px 38px rgba(0,0,0,0.6) !important;
color: #eaeaea !important;
}
html.dark-mode .about-expanded .feature .f-ico,
body.dark-theme .about-expanded .feature .f-ico,
body[data-theme='dark'] .about-expanded .feature .f-ico,
.dark .about-expanded .feature .f-ico {
background: linear-gradient(180deg,#0f0f10,#080808) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.03) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
html.dark-mode .about-expanded .feature h4,
body.dark-theme .about-expanded .feature h4,
body[data-theme='dark'] .about-expanded .feature h4,
.dark .about-expanded .feature h4 {
color: #ffffff !important;
}
html.dark-mode .about-expanded .feature p,
body.dark-theme .about-expanded .feature p,
body[data-theme='dark'] .about-expanded .feature p,
.dark .about-expanded .feature p {
color: #cfcfcf !important;
}
/* about lead + heading */
html.dark-mode .about-expanded .about-lead,
body.dark-theme .about-expanded .about-lead,
body[data-theme='dark'] .about-expanded .about-lead,
.dark .about-expanded .about-lead {
color: #e6e6e6 !important;
}
html.dark-mode .about-expanded .about-heading,
body.dark-theme .about-expanded .about-heading,
body[data-theme='dark'] .about-expanded .about-heading,
.dark .about-expanded .about-heading {
color: #ffffff !important;
}
/* mission/vision cards in dark mode */
html.dark-mode .about-expanded .mv-card,
body.dark-theme .about-expanded .mv-card,
body[data-theme='dark'] .about-expanded .mv-card,
.dark .about-expanded .mv-card {
background: linear-gradient(180deg,#0a0a0a,#060606) !important;
border: 1px solid rgba(255,255,255,0.03) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
}
html.dark-mode .about-expanded .mv-card h5,
html.dark-mode .about-expanded .mv-card p { color: #f1f1f1 !important; }
/* CTA buttons - preserve your existing button styles but force good contrast */
html.dark-mode .about-expanded .btn-primary { background: #000 !important; color: #fff !important; border:1px solid rgba(255,255,255,0.04) !important; box-shadow:0 10px 30px rgba(0,0,0,0.6) !important; }
html.dark-mode .about-expanded .btn-ghost { color:#fff !important; border:1px solid rgba(255,255,255,0.06) !important; background:transparent !important; }
/* Service modal: scrollable content and consistent spacing (append to style.css) */
#service-modal .modal-content {
max-width: 920px;
width: calc(100% - 48px);
max-height: 82vh;
overflow: auto;
padding: 36px 44px;
border-radius: 10px;
box-shadow: 0 22px 60px rgba(10,12,14,0.45);
background: var(--card-bg, #fff);
color: inherit;
}
/* Modal title styling */
#service-modal h2#service-modal-title {
font-family: 'Playfair Display', serif;
font-size: 40px;
font-weight: 700;
margin: 0 0 12px;
text-align: center;
letter-spacing: 0.4px;
}
/* Modal content spacing */
#service-modal .modal-content p { margin-bottom: 1rem; line-height: 1.68; }
#service-modal .modal-content h4 { margin-top: 1rem; margin-bottom: .6rem; font-weight:600; }
#service-modal .modal-content ul { margin-left: 1.05rem; margin-bottom: 1rem; }
/* Make sure close control remains visible on tall content (scrollbar on right) */
#service-modal.open { display: block; }
/* small device adjustments */
@media (max-width: 700px) {
#service-modal .modal-content { padding: 20px; width: calc(100% - 32px); max-height: 86vh; }
#service-modal h2#service-modal-title { font-size: 22px; }
}
/* === Service Modal Content Styling === */
#service-modal-desc {
font-family: 'Inter', 'Segoe UI', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: #333;
margin-top: 1rem;
}
#service-modal-desc h4 {
font-size: 1.2rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: #111;
border-bottom: 2px solid #eee;
display: inline-block;
padding-bottom: 2px;
}
#service-modal-desc p {
margin: 0.5rem 0 1rem;
color: #444;
}
#service-modal-desc ul {
margin: 0.5rem 0 1.2rem 1.2rem;
padding-left: 1rem;
list-style: disc;
}
#service-modal-desc li {
margin: 0.4rem 0;
color: #555;
}
/* Center the OUR PROJECTS and CASE STUDIES cards */
.projects .projects-grid,
.case-study .projects-grid {
display: flex;
justify-content: center; /* centers cards horizontally */
align-items: center; /* vertically center if extra height */
flex-wrap: wrap; /* responsive wrapping */
gap: 2rem; /* spacing between cards */
margin-top: 2rem;
text-align: center;
}
.projects .project-card,
.case-study .project-card {
max-width: 320px; /* consistent card size */
flex: 1 1 280px; /* responsive sizing */
}
.highlight-text {
font-size: 1.2rem;
font-weight: 600;
color: #111;
text-align: center;
line-height: 1.8;
max-width: 800px;
margin: 1rem auto;
}
.highlight-text em{
color: #000;
font-style: normal;
font-weight: 1000;
font-size: larger;
}
/* Elegant Mission & Vision Section */
.mission-vision {
margin: 4rem auto;
padding: 2rem 1rem;
max-width: 1000px;
}
.mv-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 3rem;
text-align: center;
}
.mv-block {
flex: 1 1 400px;
}
.mv-block h3 {
font-family: 'Playfair Display', serif; /* Elegant, premium font */
font-size: 2rem;
font-weight: 700;
color: var(--accent-color, #111);
margin-bottom: 1rem;
position: relative;
}
.mv-block h3::after {
content: "";
display: block;
width: 50px;
height: 3px;
background: var(--accent-color, #000000);
margin: 0.5rem auto;
border-radius: 2px;
}
.mv-block p {
font-family: 'Inter', sans-serif; /* Clean body font */
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-color, #444);
max-width: 500px;
margin: 0 auto;
}
/* Dark Mode */
body.dark .mv-block h3 {
color: #fff;
}
body.dark .mv-block h3::after {
background: #0dcaf0; /* premium teal accent */
}
body.dark .mv-block p {
color: #ddd;
}
/* Why Choose section */
.why-content h2,
.why-content p,
.highlight-text {
color: var(--text-color) !important;
}
/* Mission & Vision section */
.mv-block h3 {
color: var(--heading-color) !important;
}
.mv-block p {
color: var(--text-color) !important;
}
.highlight-text em {
color: var(--accent-color) !important;
font-weight: 700;
font-style: normal;
}
/* ===== Make Mission & Vision underline white in dark mode =====
Paste this at the end of style.css
*/
:where(html.dark, body.dark, .dark-mode, .theme-dark) .mv-card h5,
:where(html.dark, body.dark, .dark-mode, .theme-dark) .mv-content .mv-block h3 {
color: #fff !important; /* ensure heading text is visible if needed */
}
/* Force underline color to white for common underline methods */
:where(html.dark, body.dark, .dark-mode, .theme-dark) .mv-card h5,
:where(html.dark, body.dark, .dark-mode, .theme-dark) .mv-content .mv-block h3 {
border-bottom-color: #fff !important; /* if underline is border-bottom */
text-decoration-color: #fff !important; /* if using text-decoration */
}
/* If underline is implemented with a pseudo-element (::after), override it */
:where(html.dark, body.dark, .dark-mode, .theme-dark) .mv-card h5::after,
:where(html.dark, body.dark, .dark-mode, .theme-dark) .mv-content .mv-block h3::after {
background-color: #fff !important;
color: #fff !important;
box-shadow: none !important;
}
/* ===== Uniform Tech Card Size (use Android card size for all) =====
Paste at the end of style.css
*/
.tech-section .tech-grid {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
align-items: stretch; /* ensure equal heights in row */
}
/* Set the canonical card size here (adjust 160px if you want larger/smaller) */
.tech-section .tech-card {
box-sizing: border-box;
width: 160px; /* card width (match Android card size) */
height: 160px; /* card height (match Android card size) */
min-width: 140px;
min-height: 140px;
padding: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
border-radius: 10px;
/* keep any existing background/border/shadow by not overriding them here */
}
/* Make icons and images consistent inside the cards */
.tech-section .tech-card i,
.tech-section .tech-card img {
width: 48px;
height: 48px;
font-size: 48px; /* for font-awesome icons */
object-fit: contain; /* for svg/png images */
display: block;
margin: 0 auto;
}
/* Tweak label style so they wrap nicely inside fixed card */
.tech-section .tech-card p {
margin: 0;
font-size: 0.95rem;
line-height: 1.15;
word-break: break-word;
}
/* Responsive reductions so cards fit smaller screens */
@media (max-width: 900px) {
.tech-section .tech-card {
width: 140px;
height: 140px;
}
.tech-section .tech-card i,
.tech-section .tech-card img {
width: 44px;
height: 44px;
font-size: 44px;
}
}
@media (max-width: 480px) {
.tech-section .tech-card {
width: 120px;
height: 120px;
padding: 10px;
}
.tech-section .tech-card i,
.tech-section .tech-card img {
width: 36px;
height: 36px;
font-size: 36px;
}
.tech-section .tech-grid {
gap: 12px;
}
}
/* Center the testimonial card(s) */
.testimonials .testimonials-grid {
display: flex !important;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically within the grid row if needed */
gap: 20px; /* keep spacing if more cards are added */
padding: 12px 0;
}
/* keep single-card layout tidy on very small screens */
@media (max-width: 480px) {
.testimonials .testimonials-grid {
padding: 8px;
}
}
.testimonials .testimonial-card {
max-width: 720px;
width: 40%;
}
/* Premium slogan styling — Playfair Display for a classic, high-end look */
.slogan-wrapper { text-align: center; margin: 18px 0 36px; }
.slogan {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.6px;
line-height: 1.1;
color: #0b1220;
margin: 0;
opacity: 0.95;
}
/* responsive scaling */
@media (max-width: 900px) { .slogan { font-size: 1.4rem; } }
@media (max-width: 480px) { .slogan { font-size: 1.15rem; } }
/* dark mode override (keeps look consistent with theme) */
:where(html.dark, body.dark, .dark-mode, .theme-dark) .slogan {
color: #ffffff !important;
opacity: 0.98;
}
/* ===== Premium Slogan Rotator (luxury look) ===== */
.slogan-area{
--gold:#D4AF37; /* elegant gold */
--ink:#0b1220; /* rich dark ink */
--soft:#6b7280; /* soft gray */
--fade:0.9;
display:flex; /* full width flex */
justify-content:center; /* center horizontally */
align-items:flex-end; /* baseline alignment for text */
gap:.6rem;
position:relative;
margin:26px auto 70px;
padding:8px 14px 16px;
border-radius:14px;
text-align:center;
max-width:100%; /* allow centering across full width */
width:100%;
}
.slogan-prefix{
font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-weight:600;
font-size:1rem;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--soft);
opacity:.9;
}
.slogan-quote{
font-family:'Playfair Display', serif;
font-weight:700;
font-size:2.2rem;
letter-spacing:.5px;
line-height:1.15;
color:var(--ink);
position:relative;
display:inline-block;
white-space:nowrap;
max-width:100%;
}
/* elegant underline bar */
.slogan-underline{
position:absolute;
left:50%;
bottom:-4px;
transform:translateX(-50%);
width:min(520px, 72%);
height:2px;
background:linear-gradient(90deg, var(--gold), #b28d2d, var(--gold));
border-radius:2px;
opacity:.9;
}
/* classy gold sheen sweep */
.slogan-quote::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.0) 40%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.0) 60%, transparent 100%);
transform:translateX(-120%);
pointer-events:none;
animation:sheen 6s ease-in-out infinite;
mix-blend-mode:soft-light;
}
@keyframes sheen{
0%, 70% { transform:translateX(-120%); }
85% { transform:translateX(0%); }
100% { transform:translateX(120%); }
}
/* fade/slide for text changes (managed by JS by toggling .swap) */
.slogan-quote{ transition:opacity .6s ease, transform .6s ease; }
.slogan-quote.swap{ opacity:0; transform:translateY(8px); }
/* hover to pause hint (subtle) */
.slogan-area:hover .slogan-underline{ filter:brightness(1.05); }
/* Dark mode */
:where(html.dark, body.dark, .dark-mode, .theme-dark) .slogan-area{
--ink:#ffffff;
--soft:#cbd5e1;
--fade:1;
}
:where(html.dark, body.dark, .dark-mode, .theme-dark) .slogan-underline{
background:linear-gradient(90deg, #fff, #dcdcdc, #fff);
}
/* Responsive */
@media (max-width: 900px){
.slogan-quote{ font-size:1.8rem; }
}
@media (max-width: 520px){
.slogan-area{ gap:.5rem; margin-bottom:52px; }
.slogan-prefix{ display:none; } /* keep it clean on phones */
.slogan-quote{ font-size:1.5rem; white-space:normal; }
.slogan-underline{ width:82%; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
.slogan-quote::after{ animation:none; }
.slogan-quote{ transition:none; }
}
/* Inline Logo with Company Name */
.footer-logo-inline {
height: 28px;
width: auto;
margin-right: 8px;
vertical-align: middle;
}
/* Footer Lists with icons */
.footer-links ul li,
.footer-policies ul li,
.footer-social ul li {
list-style: none;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
/* Icon style: black/white only */
.footer-links i,
.footer-policies i,
.footer-social i {
color: #000000; /* black in light mode */
font-size: 1rem;
min-width: 18px;
text-align: center;
}
/* Dark mode: white icons */
:where(html.dark, body.dark, .dark-mode, .theme-dark)
.footer-links i,
:where(html.dark, body.dark, .dark-mode, .theme-dark)
.footer-policies i,
:where(html.dark, body.dark, .dark-mode, .theme-dark)
.footer-social i {
color: #ffffff;
}
/* Footer icons (Quick Links, Legal, Connect) always white */
.footer-links i,
.footer-policies i,
.footer-social i {
color: #ffffff !important; /* force white icons */
font-size: 1rem;
min-width: 18px;
text-align: center;
}
.footer-links a:hover,
.footer-policies a:hover,
.footer-social a:hover {
opacity: 0.7;
}
/* Inline logo (default black for light mode) */
.footer-logo-inline {
height: 28px;
width: auto;
margin-right: 8px;
vertical-align: middle;
filter: brightness(0); /* ensure black in light mode */
}
/* Dark mode → invert to white */
:where(html.dark, body.dark, .dark-mode, .theme-dark)
.footer-logo-inline {
filter: brightness(0) invert(1); /* turns it white */
}
/* Inline SAYNCROTECH logo force to white */
.footer-logo-inline {
height: 28px;
width: auto;
margin-left: 8px;
vertical-align: middle;
filter: brightness(0) invert(1) grayscale(1) contrast(1000%);
}
/* Footer icons (always white) */
.footer-links i,
.footer-policies i,
.footer-social i {
color: #ffffff !important;
font-size: 1rem;
min-width: 18px;
text-align: center;
}
/* Hero Section Text Styling */
.hero h1,
.hero h2,
.hero p {
line-height: 1.4; /* spacing between lines */
margin-bottom: 14px; /* spacing between blocks */
word-spacing: 4px; /* spacing between words */
letter-spacing: 0.5px; /* subtle spacing between letters */
}
/* Optional: adjust sizes for premium look */
.hero h1 {
font-size: 3rem;
font-weight: 700;
}
.hero h2 {
font-size: 2rem;
font-weight: 500;
}
.hero p {
font-size: 1.2rem;
opacity: 0.9;
}
/* ===========================
SAYNCROTECH — Why We Stand Out
Monochrome premium style (glass + inner glow)
=========================== */
:root{
--sayn-why-bg: rgba(255,255,255,0.02);
--sayn-card-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
--sayn-border: rgba(255,255,255,0.06);
--sayn-contrast: #e6e7e8;
--sayn-muted: #9ea6ab;
--sayn-inner-shadow: rgba(0,0,0,0.6);
--sayn-radius: 18px;
}
.sayn-why-stand {
padding: 64px 20px;
background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
color: var(--sayn-contrast);
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.sayn-container {
max-width: 1180px;
margin: 0 auto;
}
/* Top heading */
.sayn-why-top { text-align: center; margin-bottom: 28px; }
.sayn-badge {
display:inline-block;
font-weight:600;
color: var(--sayn-muted);
border: 1px solid rgba(255,255,255,0.03);
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.01);
letter-spacing: 0.6px;
font-size: 0.92rem;
}
.sayn-section-title {
margin: 12px 0 6px;
font-family: "Playfair Display", serif;
font-size: 2.1rem;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--sayn-contrast);
}
.sayn-lead {
color: var(--sayn-muted);
max-width: 820px;
margin: 8px auto 0;
font-size: 1rem;
}
/* Grid */
.sayn-why-grid {
margin-top: 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: start;
}
/* Card base */
.sayn-card {
position: relative;
border-radius: var(--sayn-radius);
padding: 28px 28px 32px;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: var(--sayn-card-bg);
border: 1px solid var(--sayn-border);
box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
transition: transform 280ms cubic-bezier(.2,.9,.2,1), box-shadow 280ms;
overflow: hidden;
}
/* subtle glossy highlight */
.sayn-card:before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 45%, rgba(0,0,0,0.15) 100%);
mix-blend-mode: overlay;
}
/* Hover lift */
.sayn-card:hover{
transform: translateY(-8px);
box-shadow: 0 18px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
}
/* Titles and separators */
.sayn-card-title{
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 14px;
color: var(--sayn-contrast);
display: inline-block; /* ensures proper width */
margin: 0 auto; /* center horizontally */
text-align: center; /* center text inside */
}
.sayn-sep{
height:1px;
width:100%;
background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
margin: 10px 0 18px;
border-radius: 2px;
}
/* Left card: deeper, darker */
.sayn-card--left {
background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.48));
color: var(--sayn-contrast);
border: 1px solid rgba(255,255,255,0.03);
}
/* Right card: framed with subtle inner frame */
.sayn-card--right {
background: linear-gradient(180deg, rgba(0,0,0,0.46), rgba(0,0,0,0.36));
border: 1px solid rgba(255,255,255,0.045);
box-shadow: 0 10px 40px rgba(0,0,0,0.55), inset 0 0 28px rgba(255,255,255,0.01);
}
/* Right pill header */
.sayn-right-header {
display:flex;
justify-content: flex-end;
margin-bottom: 6px;
}
.sayn-pill {
font-weight: 700;
color: var(--sayn-contrast);
padding: 8px 16px;
border-radius: 12px;
background: rgba(255,255,255,0.01);
border: 1px solid rgba(255,255,255,0.02);
font-size: 0.95rem;
display: inline-block; /* ensures proper width */
margin: 0 auto; /* center horizontally */
text-align: center; /* center text inside */
}
/* Lists */
.sayn-list { list-style:none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sayn-list li{
display:flex;
gap:14px;
align-items:flex-start;
color: var(--sayn-contrast);
font-size: 0.98rem;
line-height: 1.5;
}
/* Negative icons (left) */
.sayn-list--neg li i {
font-size:18px;
color: rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.02);
padding:8px;
border-radius:999px;
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
box-shadow: inset 0 -2px 6px rgba(0,0,0,0.6);
}
/* Positive icons (right) */
.sayn-list--pos li i {
font-size:18px;
color: #ffffff;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.035);
padding:8px;
border-radius:999px;
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* Text container in li */
.sayn-list li span { display:block; color: var(--sayn-contrast); }
/* visually-hidden helper (if you don't already have one) */
.visually-hidden {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
/* Responsive */
@media (max-width: 980px) {
.sayn-why-grid { grid-template-columns: 1fr; }
.sayn-card { min-height: auto; padding: 22px; }
.sayn-section-title { font-size: 1.6rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.sayn-card, .sayn-card:hover { transition: none; transform: none; }
}
/* ===== Light-mode overrides for SAYN — make cards premium white (do NOT affect dark mode) ===== */
html:not(.dark-mode) .sayn-card,
html:not(.dark-mode) .sayn-why-stand .sayn-card {
background: #ffffff !important;
color: #0b1220 !important;
border: 1px solid rgba(12,17,25,0.06) !important;
box-shadow: 0 12px 30px rgba(12,17,25,0.08) !important;
}
/* Make left/right specific cards subtle variants but still white */
html:not(.dark-mode) .sayn-card.sayn-card--left {
background: linear-gradient(180deg,#ffffff,#fbfbfb) !important;
}
html:not(.dark-mode) .sayn-card.sayn-card--right {
background: linear-gradient(180deg,#ffffff,#f8f9fb) !important;
border-color: rgba(12,17,25,0.045) !important;
box-shadow: 0 14px 36px rgba(12,17,25,0.07) !important;
}
/* Remove dark glossy overlay used in dark mode, replace with light sheen */
html:not(.dark-mode) .sayn-card:before {
background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0.0) 100%) !important;
mix-blend-mode: normal !important;
}
/* separators / lines */
html:not(.dark-mode) .sayn-sep {
background: linear-gradient(90deg, rgba(12,17,25,0.04), rgba(12,17,25,0.02)) !important;
}
/* Titles and list text */
html:not(.dark-mode) .sayn-card-title,
html:not(.dark-mode) .sayn-why-stand .sayn-card h3,
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li,
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li {
color: #0b1220 !important;
}
/* Icons: keep check/cross visible + slightly muted background */
html:not(.dark-mode) .sayn-list--neg li i,
html:not(.dark-mode) .sayn-list--pos li i {
background: rgba(12,17,25,0.06);
color: #fff;
border-radius: 50%;
padding: 8px;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(12,17,25,0.06);
}
/* Negative icon color (cross) */
html:not(.dark-mode) .sayn-list--neg li i { color: #ef4444 !important; background: rgba(12,17,25,0.04) !important; }
/* Positive icon color (check) */
html:not(.dark-mode) .sayn-list--pos li i { color: #059669 !important; background: rgba(12,17,25,0.04) !important; }
/* pill / badge */
html:not(.dark-mode) .sayn-pill,
html:not(.dark-mode) .sayn-badge {
color: #0b1220 !important;
background: rgba(12,17,25,0.03) !important;
}
/* keep hover lift but ensure shadow remains soft on light bg */
@media (hover: hover) {
html:not(.dark-mode) .sayn-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 60px rgba(12,17,25,0.09) !important;
}
}
/* ===== Fix: make SAYN "Why We Stand Out" text full-black and reduce overlay wash (light mode only) ===== */
html:not(.dark-mode) .sayn-why-stand,
html:not(.dark-mode) .sayn-why-stand .sayn-card {
/* Ensure base contrast for container and cards */
color: #0b1220 !important;
}
/* Title and headings inside the cards */
html:not(.dark-mode) .sayn-why-stand .sayn-card-title,
html:not(.dark-mode) .sayn-why-stand .sayn-card h3,
html:not(.dark-mode) .sayn-why-stand .sayn-card .sayn-section-title {
color: #0b1220 !important;
opacity: 1 !important;
}
/* List text — ensure full contrast and normal weight for readability */
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li,
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li,
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li * ,
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li * {
color: #0b1220 !important;
opacity: 1 !important;
font-weight: 600; /* optional: makes copy more visible — remove if too bold */
line-height: 1.5;
}
/* If list text is inside a or direct text node — strongly enforce color */
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li > span,
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li > span {
color: #0b1220 !important;
opacity: 1 !important;
}
/* Reduce the white sheen/overlay that washed-out the text */
html:not(.dark-mode) .sayn-why-stand .sayn-card::before {
/* make overlay extremely subtle or remove it */
background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 100%) !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
/* Keep pill/badge readable */
html:not(.dark-mode) .sayn-pill,
html:not(.dark-mode) .sayn-badge {
color: #0b1220 !important;
opacity: 1 !important;
}
/* Make sure links inside cards are visible and not washed out */
html:not(.dark-mode) .sayn-why-stand .sayn-card a {
color: #0b1220 !important;
opacity: 1 !important;
text-decoration: underline;
}
/* Icon circles: keep colored backgrounds, but ensure the icon glyph is white */
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li i {
background: #ffecec !important; /* very light red bg */
color: #ef4444 !important; /* red glyph for cross (if you want glyph colored) */
/* If you prefer white glyphs in colored circle, set color: #fff above instead */
}
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li i {
background: #ecf9f1 !important; /* very light green bg */
color: #059669 !important;
}
/* Stronger contrast on small screens too */
@media (max-width: 820px) {
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li,
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li {
font-weight: 600;
color: #0b1220 !important;
}
}
/* ===== Make SAYN "Why We Stand Out" heading + lead copy black in light mode only ===== */
html:not(.dark-mode) .sayn-why-stand .sayn-section-title,
html:not(.dark-mode) .sayn-why-stand #sayn-why-title,
html:not(.dark-mode) .sayn-why-stand .sayn-lead {
color: #0b1220 !important; /* strong near-black — change to #000000 if you prefer pure black */
opacity: 1 !important;
font-weight: 600; /* optional: stronger weight for readability */
text-shadow: none !important;
}
/* ===== Premium glass cards (light mode only) for "Why We Stand Out" =====
Paste at the end of style.css. Adjust --glass-alpha / --glass-blur if needed.
*/
html:not(.dark-mode) .sayn-why-stand {
/* tuning tokens for glass look */
--glass-alpha: 0.60; /* 0.4 = more see-through, 0.75 = more solid */
--glass-blur: 8px; /* backdrop blur strength */
--glass-sat: 115%; /* saturation for richness */
--glass-border: rgba(255,255,255,0.55);
--glass-inset: rgba(12,17,25,0.03);
--glass-shadow: 0 18px 46px rgba(12,17,25,0.07);
}
/* Card base: translucent + blur so underlying gridlines show through */
html:not(.dark-mode) .sayn-why-stand .sayn-card {
position: relative;
background: rgba(255,255,255,var(--glass-alpha)) !important;
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border: 1px solid var(--glass-border) !important;
box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset) !important;
border-radius: 16px !important;
padding: 26px !important;
transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
overflow: hidden;
}
/* Remove heavy white sheen-overlay (so gridlines remain visible) */
html:not(.dark-mode) .sayn-why-stand .sayn-card::before,
html:not(.dark-mode) .sayn-why-stand .sayn-card:after {
display: none !important;
}
/* Title and copy remain high-contrast black */
html:not(.dark-mode) .sayn-why-stand .sayn-card-title,
html:not(.dark-mode) .sayn-why-stand .sayn-card h3,
html:not(.dark-mode) .sayn-why-stand .sayn-lead,
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li,
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li {
color: #0b1220 !important; /* clear near-black for readability */
opacity: 1 !important;
text-shadow: none !important;
}
/* Subtle hover lift while keeping glass look */
@media (hover: hover) {
html:not(.dark-mode) .sayn-why-stand .sayn-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 70px rgba(12,17,25,0.10), inset 0 1px 0 var(--glass-inset) !important;
}
}
/* Keep icon circles readable but airy on glass */
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li i,
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li i {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 8px 20px rgba(12,17,25,0.06);
background: rgba(12,17,25,0.04) !important; /* subtle circular backing */
font-size: 0.95rem;
}
/* Positive / Negative glyph color */
html:not(.dark-mode) .sayn-list--neg li i { color: #ef4444 !important; background: rgba(239,68,68,0.09) !important; }
html:not(.dark-mode) .sayn-list--pos li i { color: #059669 !important; background: rgba(5,150,105,0.09) !important; }
/* Ensure pill / badge looks soft on glass */
html:not(.dark-mode) .sayn-pill,
html:not(.dark-mode) .sayn-badge {
background: rgba(255,255,255,0.65) !important;
color: #0b1220 !important;
box-shadow: 0 6px 18px rgba(12,17,25,0.04);
}
/* Responsive tweaks — preserve padding & readability on small screens */
@media (max-width: 820px) {
html:not(.dark-mode) .sayn-why-stand .sayn-card {
padding: 18px !important;
border-radius: 12px !important;
}
html:not(.dark-mode) .sayn-why-stand .sayn-list--neg li,
html:not(.dark-mode) .sayn-why-stand .sayn-list--pos li {
font-weight: 600;
color: #0b1220 !important;
}
}
/* ===== Premium glowing outline for "With SAYNCROTECH" card ===== */
.sayn-card.sayn-card--right {
position: relative;
border-radius: 12px !important;
border: 2px solid;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Light mode — black border + black glow */
html:not(.dark-mode) .sayn-card.sayn-card--right {
border-color: #000000 !important;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.35); /* subtle black glow */
}
/* Dark mode — white border + white glow */
html.dark-mode .sayn-card.sayn-card--right {
border-color: #ffffff !important;
box-shadow: 0 0 14px rgba(255, 255, 255, 0.35); /* subtle white glow */
}
/* Hover/focus — stronger glow (same in both modes) */
.sayn-card.sayn-card--right:hover,
.sayn-card.sayn-card--right:focus,
.sayn-card.sayn-card--right:focus-within {
border-color: #ff3b3b !important;
box-shadow: 0 0 22px rgba(255, 59, 59, 0.55); /* premium red glow */
}
/* ===== FAQ Base Styles ===== */
.faq-section {
display: flex;
gap: 50px;
align-items: flex-start;
padding: 60px 40px;
background: transparent;
}
.faq-left {
flex: 1;
max-width: 400px;
}
.faq-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 14px;
}
.faq-heading {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 14px;
}
.faq-subtitle {
font-size: 1rem;
opacity: 0.85;
margin-bottom: 22px;
}
.faq-contact {
background: linear-gradient(to bottom, #000000, #ffffff);
color: #000000;
padding: 12px 28px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
transition: all 0.3s;
}
.faq-contact:hover {
background: linear-gradient(to bottom, #333, #ffffff);
transform: translateY(-2px);
}
.faq-right {
flex: 1.5;
}
.faq-card,
.sayn-faq-item {
margin-bottom: 12px;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
/* Question button */
.faq-q,
.sayn-faq-q {
width: 100%;
background: none;
border: none;
font-size: 1rem;
padding: 16px;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
position: relative;
z-index: 3; /* keep above pseudo elements */
}
.faq-q .icon,
.sayn-faq-q .icon {
font-weight: bold;
font-size: 20px;
transition: transform 0.3s;
}
/* Answer panel */
.faq-a,
.sayn-faq-a {
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 20px;
transition: max-height 360ms cubic-bezier(.2,.9,.2,1), padding 280ms ease, opacity 280ms ease;
}
.faq-a p,
.sayn-faq-a p {
margin: 12px 0 16px;
line-height: 1.5;
font-size: 0.95rem;
}
.faq-a.show,
.sayn-faq-item.active .sayn-faq-a {
opacity: 1;
padding: 14px 20px 18px;
}
/* ===== Light Mode (force black) ===== */
html:not(.dark-mode) .faq-section,
html:not(.dark-mode) .faq-section *,
html:not(.dark-mode) .sayn-faq,
html:not(.dark-mode) .sayn-faq * {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
text-shadow: none !important;
filter: none !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
}
/* ===== Dark Mode (force white) ===== */
html.dark-mode .faq-section,
html.dark-mode .faq-section *,
html.dark-mode .sayn-faq,
html.dark-mode .sayn-faq * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none !important;
filter: none !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
}
/* ===== Contact Us Button: Always White Text ===== */
html:not(.dark-mode) .faq-contact,
html.dark-mode .faq-contact {
color: #ffffff !important;
}
/* ===== Compact Premium Pricing (Black & White) ===== */
/* Replace previous pricing CSS with this block */
/* Section layout */
.pricing-section {
position: relative;
padding: 40px 16px 56px;
overflow: visible;
z-index: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.pricing-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
/* refined subtle grid + vignette */
background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 36px),
repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 36px),
radial-gradient(1000px 300px at 50% 8%, rgba(0,0,0,0.14), transparent 28%);
mix-blend-mode: overlay;
opacity: 0.78;
}
/* Container */
.pricing-inner {
position: relative;
z-index: 2;
max-width: 1100px;
margin: 0 auto;
padding: 0 12px;
}
/* Header */
.pricing-top { text-align: center; margin-bottom: 18px; }
.pricing-pill {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.03);
color: rgba(255,255,255,0.85);
font-weight: 600;
font-size: 12px;
border: 1px solid rgba(255,255,255,0.04);
margin-bottom: 10px;
}
.pricing-title {
font-family: "Playfair Display", serif;
font-size: 36px;
margin: 6px 0 8px;
letter-spacing: -0.02em;
color: #ffffff;
font-weight: 700;
}
.pricing-sub {
color: rgba(255,255,255,0.62);
max-width: 760px;
margin: 0 auto;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
/* Grid */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: start;
}
/* Card wrapper */
.pricing-card { border-radius: 14px; overflow: visible; position: relative; }
/* Inner glass panel (compact sizing) */
.pricing-card .card-inner {
position: relative;
border-radius: 12px;
padding: 20px;
min-height: 460px; /* reduced height */
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
backdrop-filter: blur(8px) saturate(1.02);
-webkit-backdrop-filter: blur(8px) saturate(1.02);
border: 1px solid rgba(255,255,255,0.05);
box-shadow: none !important;
color: rgba(255,255,255,0.94);
z-index: 2;
}
/* Plan label */
.plan-pill {
display: inline-block;
font-weight: 700;
margin-bottom: 12px;
background: rgba(0,0,0,0.38);
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
border: 1px solid rgba(255,255,255,0.03);
font-family: "Poppins", sans-serif;
}
/* Price styling — refined, premium */
.price-row { margin-bottom: 10px; }
.price-amount {
font-family: "Playfair Display", serif;
font-weight: 700;
display: flex;
align-items: baseline;
gap: 8px;
}
.price-amount .currency { font-size: 14px; opacity: 0.92; }
.price-amount .amount {
font-size: 40px; /* reduced */
line-height: 1;
}
.price-amount .period {
font-size: 13px;
color: rgba(255,255,255,0.55);
margin-left: 6px;
}
.price-subtitle {
color: rgba(255,255,255,0.6);
margin-top: 6px;
font-weight: 500;
font-family: "Poppins", sans-serif;
}
/* Separator */
.card-sep {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
margin: 12px 0 14px;
}
/* Features list — tighter */
.pricing-features {
list-style: none;
padding: 0;
margin: 0;
gap: 10px;
display: flex;
flex-direction: column;
}
.pricing-features li {
display: flex;
gap: 10px;
align-items: flex-start;
color: rgba(255,255,255,0.92);
font-weight: 500;
line-height: 1.4;
font-family: "Poppins", sans-serif;
font-size: 14px;
}
.pricing-features li i {
margin-top: 2px;
font-size: 14px;
line-height: 1;
opacity: 0.9;
color: rgba(255,255,255,0.55); /* subtle monochrome check */
flex: 0 0 20px;
}
/* Hide the old :before FontAwesome fallback to prevent duplicate icons */
.pricing-features li:before { display: none; }
/* CTA buttons — monochrome */
.card-cta { margin-top: 18px; display: flex; justify-content: center; }
.btn {
display: inline-block;
padding: 10px 22px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
text-align: center;
min-width: 160px;
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
font-family: "Poppins", sans-serif;
}
.btn-outline {
background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.28));
color: #fff;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
.btn-outline:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
/* btn-primary exists but will not be used for Innovators now; keep for compatibility */
.btn-primary {
background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
color: #0b0b0b;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 16px 36px rgba(2,2,2,0.34);
}
/* Featured (middle) card — elevated but monochrome */
.pricing-card--featured .card-inner {
transform: translateY(-8px);
border: 1px solid rgba(255,255,255,0.09);
box-shadow: none !important;
}
/* Compact mobile behavior */
@media (max-width: 980px) {
.pricing-grid { grid-template-columns: 1fr; gap: 14px; }
.pricing-title { font-size: 28px; }
.pricing-card .card-inner { min-height: auto; padding: 18px; }
.price-amount .amount { font-size: 34px; }
.pricing-inner { padding: 0 10px; }
}
/* Light mode overrides — text becomes black and glass becomes white-ish */
@media (prefers-color-scheme: light) {
.pricing-title,
.pricing-pill,
.pricing-sub { color: #0b0b0b; }
.pricing-section::before {
background-image:
repeating-linear-gradient(90deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 36px),
repeating-linear-gradient(180deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 36px),
radial-gradient(1000px 300px at 50% 8%, rgba(255,255,255,0.9), transparent 28%);
mix-blend-mode: normal;
opacity: 0.55;
}
.pricing-card .card-inner {
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
border: 1px solid rgba(12,12,12,0.06);
box-shadow: none !important;
color: #0b0b0b;
}
.pricing-features li i { color: rgba(0,0,0,0.45); }
.card-sep { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent); }
.btn-outline {
background: linear-gradient(180deg, rgba(12,12,12,0.92), rgba(12,12,12,0.78));
color: #fff;
border: 1px solid rgba(255,255,255,0.02);
}
.pricing-card--featured .card-inner {
border: 1px solid rgba(12,12,12,0.08);
box-shadow: none !important;
transform: translateY(-6px);
}
}
/* If you use body.light / body.dark toggles */
body.light .pricing-card .card-inner {
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
color: #0b0b0b;
}
body.light .pricing-features li i { color: rgba(0,0,0,0.45); }
body.dark .pricing-card .card-inner {
background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
color: rgba(255,255,255,0.94);
}
/* Accessibility / small tweaks */
.pricing-card .card-inner a { outline-offset: 3px; }
.pricing-features li svg, .pricing-features li i { opacity: 0.9; }
/* -------------------------------------------
Forced color overrides (explicitly ensure pricing text black in light and white in dark)
- Supports prefers-color-scheme + html.dark-mode + body.light patterns
------------------------------------------- */
/* Light-mode explicit override (works if your site toggles html.dark-mode or uses body.light) */
html:not(.dark-mode) .pricing-section,
body.light .pricing-section,
html:not(.dark-mode) .pricing-section * ,
body.light .pricing-section * {
color: #0b0b0b !important;
-webkit-text-fill-color: #0b0b0b !important;
text-shadow: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
/* Also ensure card inner text / price is dark in light-mode */
html:not(.dark-mode) .pricing-card .card-inner,
body.light .pricing-card .card-inner {
color: #0b0b0b !important;
}
/* Buttons - ensure featured primary is readable in light-mode */
html:not(.dark-mode) .btn-primary,
body.light .btn-primary {
background: linear-gradient(180deg, #0b0b0b, #111111) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,0.02) !important;
box-shadow: 0 12px 30px rgba(2,2,2,0.06) !important;
}
/* Dark-mode explicit override (if your site toggles html.dark-mode) */
html.dark-mode .pricing-section,
html.dark-mode .pricing-section * ,
body.dark .pricing-section,
body.dark .pricing-section * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
/* Ensure featured card in dark-mode uses original white-ish glass */
html.dark-mode .pricing-card .card-inner,
body.dark .pricing-card .card-inner {
color: rgba(255,255,255,0.94) !important;
background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008)) !important;
}
/* Keep icon colors coherent */
html:not(.dark-mode) .pricing-features li i { color: rgba(0,0,0,0.45) !important; }
html.dark-mode .pricing-features li i { color: rgba(255,255,255,0.55) !important; }
/* Optional: reduce big empty heights on small screens */
.pricing-card .card-inner { min-height: min(460px, 62vh); }
/* ---------- Quick Booking CTA ---------- */
.quick-booking {
padding: 28px 0;
text-align: center;
}
.quick-booking-inner {
display:flex;
align-items:center;
justify-content:center;
gap:18px;
/* 🚫 Removed background & border completely */
background: transparent;
border: none;
box-shadow: none;
padding:0;
}
.quick-booking .qb-left h3 {
margin:0 0 6px 0;
font-family: 'Playfair Display', serif;
font-size:1.4rem;
}
.quick-booking .qb-sub {
margin:0;
color:var(--muted);
font-size:.95rem;
}
.qb-actions {
display:flex;
gap:12px;
align-items:center;
}
/* Glass effect ONLY for the button */
.qb-actions .glass-btn {
padding: 10px 22px;
border-radius: 12px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255,255,255,0.2);
font-weight: 600;
cursor:pointer;
transition: all 0.3s ease;
}
.qb-actions .glass-btn:hover {
background: rgba(255,255,255,0.2);
}
/* =========================
HERO — Mobile-friendly override
Add this at the end of style.css
========================= */
.hero {
/* avoid navbar overlap, keep vertical centering */
position: relative;
min-height: calc(100vh - 80px); /* leaves room for fixed navbar */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 1rem 2rem;
overflow: visible; /* allow marquee and heading to breathe */
}
/* ensure marquee stays background and doesn't hide text */
.marquee {
position: absolute;
top: 50%;
left: 0;
width: 100vw;
overflow: hidden;
transform: translateY(-50%);
z-index: 0; /* behind heading */
}
/* make the faint marquee less intrusive on small screens */
.marquee-track span {
opacity: 0.06;
font-size: 30vw; /* big but very faint */
padding-right: 120vw; /* smoother spacing on narrow screens */
}
/* Strong, responsive hero heading that matches laptop look on phones */
.hero h1 {
z-index: 5; /* sits above marquee */
font-family: 'Playfair Display', 'Bebas Neue', Poppins, sans-serif;
font-weight: 800;
margin: 0 auto;
line-height: 1.25;
max-width: 1100px;
width: min(92%, 1100px);
white-space: normal;
word-wrap: break-word;
/* scale between sensible limits so mobile is close to laptop size */
font-size: clamp(36px, 3.5vw + 1rem, 56px);
letter-spacing: 0.2px;
opacity: 1 !important; /* override earlier fade-in */
animation: none !important; /* disable hiding animation on mobile */
padding: 0 0.25rem;
}
/* finer tuning for tablets / small phones */
@media (max-width: 992px) {
.hero { min-height: calc(100vh - 72px); padding-top: 72px; }
.hero h1 { font-size: clamp(34px, 4.5vw + 2px, 56px); line-height: 1.1; }
.marquee-track span { font-size: 35vw; padding-right: 140vw; }
}
@media (max-width: 576px) {
.hero { min-height: calc(100vh - 64px); padding-top: 64px; }
.hero h1 {
/* phone-specific: keep heading large & readable, wrap like desktop */
font-size: clamp(32px, 6.5vw + 2px, 50px);
line-height: 1.12;
padding: 0 0.5rem;
}
.marquee-track span { font-size: 40vw; padding-right: 150vw; opacity: 0.05; }
}
/* If you want the old fade-in animation on large screens only, re-enable it there */
@media (min-width: 1200px) {
.hero h1 { animation: fadeInUp 1.3s ease-out .6s forwards; opacity: 1; }
}
/* ===== FAQ — Mobile friendly overrides ===== */
/* Place at end of style.css */
.faq-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.25rem;
align-items: start;
padding: 3rem 1.25rem;
}
/* Make left column (intro) visually separate and fixed width on wide screens */
.faq-left {
padding: 1.25rem;
min-width: 280px;
}
/* FAQ right: cards stack and take remaining width */
.faq-right {
display: grid;
gap: 1rem;
}
/* Individual FAQ card */
.faq-card {
background: var(--card-bg, #fff);
border-radius: 10px;
box-shadow: 0 6px 18px rgba(12, 24, 40, 0.06);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.04);
}
/* Question button (full-width tappable target) */
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.05rem 1.25rem;
font-size: 1.03rem;
font-weight: 600;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
gap: 0.75rem;
}
.faq-q:focus {
outline: 3px solid rgba(34,144,255,0.18);
outline-offset: 3px;
border-radius: 8px;
}
/* plus/minus icon aligned right */
.faq-q .icon {
flex: 0 0 30px;
text-align: right;
font-weight: 700;
font-size: 1.15rem;
}
/* Answer area: collapsed by default, smooth transition */
.faq-a {
padding: 0 1.25rem;
max-height: 0;
overflow: hidden;
transition: max-height .36s cubic-bezier(.2,.9,.2,1), padding .26s ease;
background: transparent;
}
.faq-a.show {
padding: .9rem 1.25rem 1.25rem;
}
/* body text inside answer */
.faq-a p {
margin: 0;
line-height: 1.6;
font-size: .96rem;
color: var(--muted, #4b5563);
}
/* Contact CTA on left becomes prominent on mobile */
.faq-contact {
margin-top: 1rem;
padding: .9rem 1.1rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
width: max-content;
}
/* Responsive layout: stack on small screens */
@media (max-width: 900px) {
.faq-section {
grid-template-columns: 1fr;
gap: 1.25rem;
padding: 2rem 1rem;
}
.faq-left {
order: 2; /* place intro AFTER cards for quicker access to questions */
padding: .75rem;
}
.faq-right {
order: 1;
}
/* make questions easier to tap and read */
.faq-q { padding: 1rem 1rem; font-size: 1.05rem; }
.faq-q .icon { font-size: 1.25rem; }
.faq-card { border-radius: 12px; }
.faq-contact { width: 100%; text-align: center; }
}
/* Very small phones: slightly larger text & spacing */
@media (max-width: 420px) {
.faq-q { font-size: 1.08rem; padding: 1.05rem 1rem; }
.faq-a p { font-size: 1rem; }
}
/* ===== FAQ — force intro ABOVE questions on small screens =====
Place this at the end of style.css to override previous rules */
@media (max-width: 900px) {
.faq-section {
grid-template-columns: 1fr;
gap: 1.25rem;
padding: 2rem 1rem;
}
/* Intro (left column) should come first on mobile */
.faq-left {
order: 1; /* <-- changed: intro ABOVE questions */
padding: 1rem;
background: var(--card-bg, #fff);
border-radius: 12px;
box-shadow: 0 6px 18px rgba(12, 24, 40, 0.04);
}
/* Questions (right column) follow */
.faq-right {
order: 2;
display: grid;
gap: 1rem;
}
/* Spacing & typographic tweaks so the intro looks "perfect" above the list */
.faq-left .faq-badge { display: inline-block; margin-bottom: .5rem; }
.faq-left .faq-heading { margin: 0 0 .5rem; font-size: 1.35rem; line-height: 1.1; }
.faq-left .faq-subtitle { margin: 0 0 1rem; color: var(--muted, #55606a); }
.faq-contact { width: 100%; padding: .9rem 1rem; font-weight: 700; }
/* Make each question card comfortable to tap */
.faq-card { border-radius: 12px; overflow: hidden; }
.faq-q { padding: 1rem; font-size: 1.05rem; }
.faq-a { padding: 0 1rem; }
/* Small phones: slightly larger text for readability */
@media (max-width: 420px) {
.faq-left .faq-heading { font-size: 1.25rem; }
.faq-contact { padding: .95rem; }
.faq-q { font-size: 1.08rem; }
}
}
/* FAQ answers: allow natural growth after expansion */
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.faq-a.show {
overflow: hidden; /* while animating */
}
.faq-a.expanded {
max-height: none; /* natural height, no cut off */
overflow: visible; /* allow long text */
}
/* === Testimonials — make mobile look exactly like desktop === */
@media (max-width: 900px) {
/* Grid wrapper should not be narrow on mobile */
#testimonials .testimonials-grid {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important; /* single column */
justify-items: center; /* center the card */
align-items: start;
gap: 1.25rem;
padding: 0 1rem; /* side breathing room */
}
/* Card should keep the desktop width/shape, just capped to viewport */
#testimonials .testimonial-card {
box-sizing: border-box;
width: min(680px, 100%) !important; /* desktop-like width, no skinny column */
margin: 0 auto;
text-align: center;
padding: 24px 22px;
border: 1px solid var(--border-color, rgba(0,0,0,.08));
border-radius: 14px;
box-shadow: 0 2px 24px rgba(0,0,0,.06);
}
/* Avatar same feel as desktop */
#testimonials .testimonial-card .avatar {
width: 104px;
height: 104px;
margin: 0 auto 12px;
border-radius: 50%;
overflow: hidden;
}
#testimonials .testimonial-card .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Text sizing/measure to match desktop layout */
#testimonials blockquote {
max-width: 56ch; /* comfortable line length like desktop */
margin: 0 auto 12px;
font-size: 1rem;
line-height: 1.6;
font-style: italic;
}
#testimonials .client-name {
margin: 0;
font-weight: 700;
font-size: .95rem;
}
}
/* === Quick Booking Section (Book a 10-min Call) === */
.quick-booking {
padding: 3rem 1rem;
text-align: center;
}
.quick-booking-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
max-width: 900px;
margin: 0 auto;
}
/* Left content */
.quick-booking .qb-left {
text-align: left;
}
.quick-booking .qb-left h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.quick-booking .qb-left .qb-sub {
font-size: 1rem;
color: var(--muted, #555);
}
/* Right button */
.quick-booking .qb-actions {
flex-shrink: 0;
}
.quick-booking .qb-actions .btn {
padding: 0.85rem 1.5rem;
border-radius: 40px;
font-weight: 600;
font-size: 1rem;
}
/* === Mobile adjustments === */
@media (max-width: 768px) {
.quick-booking-inner {
flex-direction: column; /* stack vertically */
text-align: center;
gap: 1rem;
}
.quick-booking .qb-left {
text-align: center; /* center align text */
}
.quick-booking .qb-left h3 {
font-size: 1.35rem;
}
.quick-booking .qb-left .qb-sub {
font-size: 0.95rem;
line-height: 1.5;
max-width: 90%;
margin: 0 auto;
}
.quick-booking .qb-actions .btn {
width: auto; /* keep same as desktop (not full width) */
margin: 0 auto;
}
}
/* === Premium Slogan Rotator — Mobile Friendly === */
@media (max-width: 768px) {
.slogan-area {
display: block;
text-align: center;
font-size: 1.35rem; /* smaller, fits mobile screens */
line-height: 1.4;
white-space: normal; /* allow wrapping instead of overflow */
margin: 0 auto;
max-width: 90%; /* prevents text touching screen edges */
}
.slogan-area .slogan-prefix {
display: block; /* move prefix above quote */
margin-bottom: 0.25rem;
font-weight: 600;
}
.slogan-area .slogan-quote {
display: inline-block;
font-weight: 700;
position: relative;
padding-bottom: 0.35rem; /* space for underline */
}
.slogan-area .slogan-underline {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* keep underline centered */
width: 100%;
height: 3px;
background: #d4af37; /* golden */
border-radius: 2px;
}
}
@media (max-width: 768px) {
.slogan-area .slogan-underline {
bottom: 10px; /* lift underline slightly so it’s visible */
}
}
/* === Pricing cards: add subtle outline in LIGHT MODE only ===
Adds the same kind of visible outline each card has in dark mode,
without changing background, shadows or spacing.
*/
:root:not(.dark-mode) .pricing-card {
border: 3px solid rgba(0,0,0,0.08) !important;
border-radius: 12px !important; /* match card rounding */
}
/* -------------------- Remove stubborn dark strip (LIGHT MODE) --------------------
Aggressive overrides that hide backgrounds, gradients, pseudo-elements and
filters that could be causing the black bar above the pricing title.
Only applies when NOT in dark mode.
------------------------------------------------------------------------------- */
:root:not(.dark-mode) .pricing-section,
:root:not(.dark-mode) .pricing-inner,
:root:not(.dark-mode) .pricing-top,
:root:not(.dark-mode) .pricing-grid,
:root:not(.dark-mode) .pricing-top * {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
-webkit-transform: none !important;
transform: none !important;
}
/* Hide any pseudo-elements that might be rendering the bar */
:root:not(.dark-mode) .pricing-section::before,
:root:not(.dark-mode) .pricing-section::after,
:root:not(.dark-mode) .pricing-inner::before,
:root:not(.dark-mode) .pricing-inner::after,
:root:not(.dark-mode) .pricing-top::before,
:root:not(.dark-mode) .pricing-top::after,
:root:not(.dark-mode) .pricing-top .pricing-pill::before,
:root:not(.dark-mode) .pricing-top .pricing-pill::after,
:root:not(.dark-mode) .pricing-title::before,
:root:not(.dark-mode) .pricing-title::after {
display: none !important;
content: none !important;
height: 0 !important;
width: 0 !important;
visibility: hidden !important;
}
/* Ensure the pricing title sits above anything else */
:root:not(.dark-mode) .pricing-top {
position: relative !important;
z-index: 50 !important;
}
:root:not(.dark-mode) .pricing-title {
position: relative !important;
z-index: 60 !important;
color: var(--text-dark, #111827) !important;
}
/* Catch inline styles that use gradients or backgrounds inside the pricing section */
:root:not(.dark-mode) .pricing-section [style*="background"],
:root:not(.dark-mode) .pricing-section [style*="linear-gradient"],
:root:not(.dark-mode) .pricing-section [style*="background-image"] {
background: transparent !important;
background-image: none !important;
}
/* Safety net: if any element is absolutely positioned above the title, make it non-visible */
:root:not(.dark-mode) .pricing-section > *[style*="position: absolute"],
:root:not(.dark-mode) .pricing-section > [style*="position:absolute"] {
opacity: 0 !important;
pointer-events: none !important;
}
#service-modal .close {
position: absolute;
top: 12px;
right: 12px;
font-size: 28px;
cursor: pointer;
z-index: 9999; /* always on top */
padding: 12px; /* large tap target */
pointer-events: auto;
}
/* Make "Contact Us" match pricing amount size */
.price-amount.contact-us {
font-size: 2rem; /* same size as other price amounts */
font-weight: 700; /* bold to match */
line-height: 1.2;
}