/* ================================================================ AMERICA'S WRITEGIC SOLUTIONS — PRODUCTION STYLESHEET Design tokens sourced from brand logo (navy #03203E / red #C41E30) ================================================================ */ :root { /* Brand colors — fixed, do not change with theme */ --red: #C41E30; --red-light: #E02035; --red-dark: #8B1220; --red-glow: rgba(196,30,48,0.55); --red-dim: rgba(196,30,48,0.12); --navy: #03203E; --navy-mid: #062848; --navy-deep: #020f1e; --navy-glow: rgba(3,32,62,0.7); --gold: #FBBF24; --success: #4ade80; --ease: cubic-bezier(0.16,1,0.3,1); --ease-bounce:cubic-bezier(0.34,1.56,0.64,1); --font-display:'Fraunces', Georgia, serif; --font-body: 'Plus Jakarta Sans', sans-serif; --header-h: 118px; /* Theme tokens — dark mode (default) */ --bg: #03203E; --bg-rgb: 3,32,62; --bg-mid: #062848; --bg-mid-rgb: 6,40,72; --bg-deep: #020f1e; --bg-deep-rgb: 2,15,30; --white: #ffffff; --off-white: #f0f4f8; --muted: rgba(255,255,255,0.55); --muted-dim: rgba(255,255,255,0.35); --glass-bg: rgba(255,255,255,0.06); --glass-bg-2: rgba(255,255,255,0.1); --glass-border: rgba(255,255,255,0.12); --card-shadow: 0 24px 60px rgba(0,0,0,0.35); --ink-rgb: 255,255,255; --input-bg: rgba(255,255,255,0.05); --input-placeholder: rgba(255,255,255,0.25); --danger-text: #ff8f9c; } /* ================================================================ LIGHT THEME — toggled via [data-theme="light"] on ================================================================ */ [data-theme="light"] { --bg: #f4f6fa; --bg-rgb: 244,246,250; --bg-mid: #e8edf5; --bg-mid-rgb: 232,237,245; --bg-deep: #dde4ef; --bg-deep-rgb: 221,228,239; --white: #0b1f35; --off-white: #33506f; --muted: rgba(11,31,53,0.62); --muted-dim: rgba(11,31,53,0.42); --glass-bg: rgba(11,31,53,0.045); --glass-bg-2: rgba(11,31,53,0.075); --glass-border: rgba(11,31,53,0.12); --card-shadow: 0 24px 60px rgba(20,35,60,0.12); --ink-rgb: 11,31,53; --input-bg: rgba(11,31,53,0.035); --input-placeholder: rgba(11,31,53,0.32); --danger-text: #c41730; } /* ================================================================ RESET ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } body { font-family: var(--font-body); background: var(--bg); color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; transition: background-color .4s var(--ease), color .4s var(--ease); } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } ul { list-style: none; } button { font-family: inherit; } svg { display: block; } ::-webkit-scrollbar { width: 6px; height:6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 10px; } ::selection { background: var(--red); color: white; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; } .wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; } /* ================================================================ PRELOADER ================================================================ */ #preloader { position: fixed; inset: 0; z-index: 100000; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(196,30,48,0.12) 0%, transparent 60%), var(--bg-deep); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; transition: opacity .6s var(--ease), visibility .6s var(--ease); } #preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } .loader-mark { position: relative; width: 92px; height: 92px; display:flex; align-items:center; justify-content:center; } .loader-mark svg { width: 60px; height: 60px; } .loader-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(196,30,48,0.15); border-top-color: var(--red); animation: loader-spin 0.9s linear infinite; } .loader-ring.r2 { inset: -14px; border-top-color: transparent; border-right-color: var(--red-light); animation-duration: 1.4s; animation-direction: reverse; opacity: .6; } @keyframes loader-spin { to { transform: rotate(360deg); } } .loader-word { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); } .loader-word em { color: var(--red); font-style: normal; } .loader-bar { width: 180px; height: 3px; border-radius: 4px; background: rgba(var(--ink-rgb),0.08); overflow: hidden; } .loader-bar span { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, var(--red), var(--red-light)); border-radius: 4px; animation: loader-slide 1.1s ease-in-out infinite; } @keyframes loader-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } body.no-scroll { overflow: hidden; height: 100vh; } /* ================================================================ AMBIENT CANVAS + CURSOR GLOW ================================================================ */ #ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; } .cursor-glow { position: fixed; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(196,30,48,0.15) 0%, transparent 70%); pointer-events: none; z-index: 1; transform: translate(-50%,-50%); transition: opacity 0.3s; will-change: transform; } @media (hover: none) { .cursor-glow { display: none; } } /* ================================================================ SITE CHROME — topbar, nav, mobile menu and footer stay permanently dark (brand navy) regardless of theme; only content sections re-theme. This also keeps the white logo mark legible at all times. ================================================================ */ .topbar, .nav-wrap, .mob-menu, footer { --bg-rgb: 3,32,62; --bg-mid-rgb: 6,40,72; --bg-deep-rgb: 2,15,30; --white: #ffffff; --off-white: #f0f4f8; --muted: rgba(255,255,255,0.55); --muted-dim: rgba(255,255,255,0.35); --glass-bg: rgba(255,255,255,0.06); --glass-bg-2: rgba(255,255,255,0.1); --glass-border: rgba(255,255,255,0.12); --ink-rgb: 255,255,255; color: var(--white); } /* ================================================================ TOP BAR ================================================================ */ .topbar { position: relative; z-index: 100; background: rgba(var(--bg-rgb),0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); padding: 10px 0; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .topbar-links { display: flex; gap: 24px; flex-wrap: wrap; } .topbar-links a { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; transition: color 0.3s; } .topbar-links a i { color: var(--red); } .topbar-links a:hover { color: var(--white); } .topbar-social { display: flex; gap: 8px; } .topbar-social a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); transition: all 0.3s; backdrop-filter: blur(10px); } .topbar-social a:hover { background: var(--red); border-color: var(--red); color: white; transform: translateY(-2px) rotate(8deg); } /* ================================================================ NAV — unique layered header ================================================================ */ .nav-wrap { position: sticky; top: 0; z-index: 999; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(var(--bg-rgb),0.75); border-bottom: 1px solid var(--glass-border); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .nav-wrap.scrolled { background: rgba(var(--bg-rgb),0.96); box-shadow: 0 8px 40px rgba(0,0,0,0.45); } .nav-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: 0; transition: opacity .4s; } .nav-wrap.scrolled::after { opacity: .6; } nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; } .logo-block { display: flex; align-items: center; gap: 12px; } .logo-block img { height: 46px; width: auto; transition: transform .5s var(--ease); } .logo-block:hover img { transform: rotate(-4deg) scale(1.05); } .logo-text { display: flex; flex-direction: column; line-height: 1.15; } .logo-main { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--white); letter-spacing: -.3px; } .logo-main em { color: var(--red); font-style: normal; } .logo-sub { font-size: 9px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; } .nav-right { display: flex; align-items: center; gap: 4px; } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-links a { font-size: 14px; font-weight: 600; color: var(--muted); padding: 10px 16px; border-radius: 100px; transition: all 0.3s; position: relative; } .nav-links a::before { content:''; position:absolute; left:16px; right:16px; bottom:6px; height:2px; border-radius:2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav-links a:hover { color: var(--white); } .nav-links a:hover::before { transform: scaleX(1); } .nav-links a.active { color: var(--white); } .nav-links a.active::before { transform: scaleX(1); } .nav-links .has-dropdown { display: flex; align-items: center; gap: 6px; cursor: pointer; } .nav-links .has-dropdown i { font-size: 10px; transition: transform .3s; } .nav-dropdown-wrap { position: relative; } .nav-dropdown-wrap:hover .has-dropdown i { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 260px; background: rgba(var(--bg-mid-rgb),0.97); backdrop-filter: blur(24px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: all .3s var(--ease); z-index: 50; } .nav-dropdown-wrap:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--off-white); } .nav-dropdown a::before { display: none; } .nav-dropdown a i { width: 30px; height: 30px; border-radius: 8px; background: var(--red-dim); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .nav-dropdown a:hover { background: rgba(196,30,48,0.12); color: var(--white); padding-left: 18px; } .btn-nav { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: white !important; padding: 11px 26px !important; border-radius: 100px !important; box-shadow: 0 4px 20px var(--red-glow); transition: all 0.3s !important; font-weight: 700 !important; margin-left: 8px; } .btn-nav::before { display: none !important; } .btn-nav:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--red-glow) !important; background: linear-gradient(135deg, var(--red-light), var(--red)) !important; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; z-index: 10000; position: relative; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.3s var(--ease); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .mob-menu { position: fixed; inset: 0; z-index: 9999; background: rgba(var(--bg-deep-rgb),0.98); backdrop-filter: blur(30px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; opacity: 0; visibility: hidden; transform: translateY(-16px); transition: all .45s var(--ease); padding: 40px 24px; overflow-y: auto; } .mob-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .mob-menu a { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--white); transition: color 0.3s; text-align: center; } .mob-menu a:hover, .mob-menu a.active { color: var(--red); } .mob-menu .mob-sub { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: -8px; } .mob-menu .mob-sub a { font-size: 15px; font-weight: 600; font-family: var(--font-body); color: var(--muted); } .mob-close { position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--white); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .3s; } .mob-close:hover { background: var(--red); border-color: var(--red); transform: rotate(90deg); } /* ================================================================ THEME TOGGLE ================================================================ */ .theme-toggle { position: relative; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 6px; transition: all 0.3s var(--ease); overflow: hidden; } .theme-toggle:hover { background: rgba(196,30,48,0.12); border-color: rgba(196,30,48,0.35); transform: translateY(-2px) rotate(-8deg); } .theme-toggle i { position: absolute; font-size: 16px; transition: transform .45s var(--ease-bounce), opacity .3s; } .theme-toggle .fa-sun { opacity: 0; transform: rotate(90deg) scale(.4); color: var(--gold); } .theme-toggle .fa-moon { opacity: 1; transform: rotate(0) scale(1); } [data-theme="light"] .theme-toggle .fa-sun { opacity: 1; transform: rotate(0) scale(1); } [data-theme="light"] .theme-toggle .fa-moon { opacity: 0; transform: rotate(-90deg) scale(.4); } /* ================================================================ BUTTONS ================================================================ */ .btn-primary-3d { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; border-radius: 100px; font-weight: 700; font-size: 15px; cursor: pointer; background: linear-gradient(135deg, var(--red-light), var(--red), var(--red-dark)); background-size: 200% auto; color: white; border: none; outline: none; box-shadow: 0 8px 32px var(--red-glow), 0 2px 0 rgba(255,255,255,0.1) inset; transition: all 0.35s var(--ease); transform-style: preserve-3d; } .btn-primary-3d:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 48px var(--red-glow); background-position: right center; } .btn-primary-3d:active { transform: translateY(0) scale(.98); } .btn-glass { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border-radius: 100px; font-weight: 700; font-size: 15px; cursor: pointer; background: var(--glass-bg); backdrop-filter: blur(12px); color: var(--white); border: 1px solid var(--glass-border); outline: none; box-shadow: 0 4px 20px rgba(0,0,0,0.25); transition: all 0.35s var(--ease); } .btn-glass:hover { background: rgba(var(--ink-rgb),0.12); border-color: rgba(var(--ink-rgb),0.25); transform: translateY(-2px); } .btn-block { width: 100%; justify-content: center; } /* ================================================================ SCROLL PROGRESS — floating 3D indicator ================================================================ */ #scrollProgress { position: fixed; right: 26px; bottom: 26px; z-index: 9000; width: 60px; height: 60px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85); transition: opacity .4s var(--ease), transform .4s var(--ease); } #scrollProgress.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } #scrollProgress .sp-inner { position: relative; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(145deg, rgba(var(--bg-mid-rgb),0.9), rgba(var(--bg-rgb),0.98)); border: 1px solid var(--glass-border); box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 2px 0 rgba(var(--ink-rgb),0.08) inset, 0 -6px 14px rgba(0,0,0,0.3) inset; display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease-bounce), box-shadow .35s; } #scrollProgress:hover .sp-inner { transform: translateY(-4px) scale(1.06); box-shadow: 0 22px 46px rgba(196,30,48,0.35), 0 2px 0 rgba(var(--ink-rgb),0.1) inset; } #scrollProgress svg { position: absolute; inset: 0; transform: rotate(-90deg); } #scrollProgress circle { fill: none; stroke-width: 4; } #scrollProgress .sp-track { stroke: rgba(var(--ink-rgb),0.1); } #scrollProgress .sp-bar { stroke: var(--red); stroke-linecap: round; transition: stroke-dashoffset .1s linear; filter: drop-shadow(0 0 6px var(--red-glow)); } #scrollProgress .sp-label { position: relative; z-index: 2; font-family: var(--font-display); font-size: 12px; font-weight: 800; color: var(--white); } #scrollProgress .sp-icon { position: relative; z-index: 2; font-size: 14px; color: var(--white); display: none; } #scrollProgress.at-top .sp-label { display: none; } #scrollProgress.at-top .sp-icon { display: block; } /* ================================================================ SECTION COMMON ================================================================ */ .section { padding: 120px 0; position: relative; z-index: 2; } .section-alt { background: rgba(var(--bg-mid-rgb),0.35); } .section-sm { padding: 90px 0; } .tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 16px; } .tag::before { content: ''; width: 20px; height: 2px; background: var(--red); border-radius: 2px; } .tag.center { justify-content: center; } .section-h { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(32px,4vw,52px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.12; margin-bottom: 18px; } .section-h em { color: var(--red); font-style: italic; font-weight: 600; } .section-p { font-size: 16px; color: var(--muted); line-height: 1.85; max-width: 560px; } .center-header { text-align: center; margin-bottom: 72px; } .center-header .section-p { margin: 0 auto; } [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); } [data-reveal].in { opacity: 1; transform: translateY(0); } [data-reveal="left"] { transform: translateX(-40px); } [data-reveal="left"].in { transform: translateX(0); } [data-reveal="right"] { transform: translateX(40px); } [data-reveal="right"].in { transform: translateX(0); } [data-reveal="scale"] { transform: scale(.9); } [data-reveal="scale"].in { transform: scale(1); } /* ================================================================ HOME HERO ================================================================ */ .hero, .page-hero { /* Photo-backed sections always keep dark-glass styling for legibility, regardless of site theme */ --white: #ffffff; --off-white: #f0f4f8; --muted: rgba(255,255,255,0.55); --muted-dim: rgba(255,255,255,0.35); --glass-bg: rgba(255,255,255,0.06); --glass-bg-2: rgba(255,255,255,0.1); --glass-border: rgba(255,255,255,0.12); --ink-rgb: 255,255,255; color: var(--white); } .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 130px 0 80px; } /* Hero background image slider (Swiper) — sits behind the tint/gradient overlay */ .hero-slider { position: absolute; inset: 0; z-index: 0; } .hero-slider .swiper-wrapper { height: 100%; } .hero-slider .swiper-slide { position: relative; height: 100%; overflow: hidden; } .hero-slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.08); transition: transform 8s linear; } .hero-slider .swiper-slide-active img { transform: scale(1); } .hero-slider .swiper-pagination { bottom: 28px !important; left: 50% !important; width: auto !important; right: auto !important; display: flex; gap: 8px; } .hero-slider .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255,255,255,0.4); opacity: 1; transition: all .3s; } .hero-slider .swiper-pagination-bullet-active { background: var(--red); width: 24px; border-radius: 100px; } .hero-bg { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(196,30,48,0.22) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 20% 70%, rgba(3,32,62,0.75) 0%, transparent 70%), linear-gradient(135deg, rgba(2,15,30,0.86) 0%, rgba(3,32,62,0.78) 50%, rgba(6,24,48,0.86) 100%); } .hero-grid-lines { position: absolute; inset: 0; z-index: 1; opacity: .04; background-image: linear-gradient(var(--glass-border) 1px, transparent 1px), linear-gradient(90deg, var(--glass-border) 1px, transparent 1px); background-size: 60px 60px; } .hero-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: drift 12s ease-in-out infinite; } .orb-1 { width: 500px; height: 500px; background: rgba(196,30,48,0.18); right: -100px; top: -100px; } .orb-2 { width: 350px; height: 350px; background: rgba(6,40,72,0.8); left: -50px; bottom: 50px; animation-delay: -4s; } .orb-3 { width: 280px; height: 280px; background: rgba(196,30,48,0.1); right: 30%; bottom: -80px; animation-delay: -8s; } @keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.05); } 66% { transform: translate(-15px,25px) scale(.97); } } .hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; width: 100%; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); background: var(--red-dim); border: 1px solid rgba(196,30,48,0.3); padding: 7px 16px; border-radius: 100px; margin-bottom: 28px; } .hero-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } } .hero-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(38px,5.5vw,74px); font-weight: 700; line-height: 1.08; letter-spacing: -1px; margin-bottom: 26px; } .hero-title .line { display: block; overflow: hidden; } .hero-title .line span { display: block; animation: slideUp .9s var(--ease) both; } .hero-title .line:nth-child(2) span { animation-delay: .12s; } .hero-title .line:nth-child(3) span { animation-delay: .24s; } @keyframes slideUp { from { transform: translateY(105%); } to { transform: translateY(0); } } .hero-title em { color: var(--red); font-style: italic; font-weight: 600; } .rotate-word { color: var(--red); font-style: italic; font-weight: 600; display: inline-block; transition: opacity .4s var(--ease), transform .4s var(--ease); } .rotate-word.is-swapping { opacity: 0; transform: translateY(14px); } @media (prefers-reduced-motion: reduce) { .rotate-word { transition: none; } } .hero-desc { font-size: 17px; color: var(--muted); line-height: 1.85; margin-bottom: 40px; max-width: 520px; animation: fadeIn 1s .4s both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeIn 1s .55s both; } .scroll-hint { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-top: 50px; animation: fadeIn 1s .8s both; } .scroll-line { width: 40px; height: 1px; background: var(--muted); } .scroll-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: scrollBounce 1.8s infinite; } @keyframes scrollBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .hero-visual { position: relative; animation: fadeIn 1s .2s both; } @keyframes float-main { 0%,100% { transform: translateY(0) rotateX(2deg) rotateY(-3deg); } 50% { transform: translateY(-12px) rotateX(-1deg) rotateY(2deg); } } @keyframes float-b1 { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-14px) rotate(-1deg); } } @keyframes float-b2 { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(1deg); } } /* Hero quick-quote card */ .hero-quote-card { position: relative; background: linear-gradient(165deg, #eef2fb, #dbe4f5); border-radius: 28px; padding: 34px 32px; color: var(--navy); box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 2px 0 rgba(255,255,255,0.6) inset; } .hero-quote-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; text-align: center; color: var(--navy); margin-bottom: 18px; } .hero-quote-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-align: center; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: white; font-weight: 700; font-size: 14px; padding: 15px; border-radius: 12px; margin-bottom: 22px; box-shadow: 0 10px 28px var(--red-glow); transition: all .3s var(--ease); } .hero-quote-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px var(--red-glow); } .hero-quote-card .field { margin-bottom: 14px; } .hero-quote-card .field input, .hero-quote-card .field textarea { background: var(--navy); color: white; border: 1px solid rgba(3,32,62,0.2); } .hero-quote-card .field input::placeholder, .hero-quote-card .field textarea::placeholder { color: rgba(255,255,255,0.4); } .hero-quote-card .field textarea { min-height: 90px; } .hero-quote-services { margin-bottom: 16px; } .hero-quote-services > .hqs-label { font-weight: 700; color: var(--navy); font-size: 13.5px; margin-bottom: 10px; } .hero-quote-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; } .hero-quote-checks label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--navy); cursor: pointer; font-weight: 500; } .hero-quote-checks input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; flex-shrink: 0; } .hero-quote-card .form-msg.success { color: #1a7a43; background: rgba(26,122,67,0.08); border-color: rgba(26,122,67,0.25); } .hero-quote-card .form-msg.error { color: var(--red-dark); background: rgba(196,30,48,0.08); border-color: rgba(196,30,48,0.25); } .hero-quote-card .field-err { color: var(--red-dark); } /* ================================================================ PAGE HERO (inner pages) ================================================================ */ .page-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + 78px) 0 90px; background: linear-gradient(135deg, #020f1e 0%, #03203E 55%, #061830 100%); } .page-hero-bg-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } .page-hero-bg-img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(196,30,48,0.22) 0%, transparent 55%), radial-gradient(ellipse 50% 50% at 10% 90%, rgba(6,40,72,0.85) 0%, transparent 65%), linear-gradient(135deg, rgba(2,15,30,0.88) 0%, rgba(3,32,62,0.82) 55%, rgba(6,24,48,0.88) 100%); } .page-hero .hero-grid-lines, .page-hero .hero-orbs { position: absolute; inset: 0; z-index: 1; } .page-hero-inner { position: relative; z-index: 2; text-align: center; } .breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 22px; animation: fadeIn .8s both; } .breadcrumb a { color: var(--muted); transition: color .3s; } .breadcrumb a:hover { color: var(--red); } .breadcrumb i { font-size: 9px; color: var(--red); } .breadcrumb .current { color: var(--red); } .page-hero h1 { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(34px,5vw,58px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 18px; } .page-hero h1 span.line { display: inline-block; overflow: hidden; max-width: 100%; } .page-hero h1 span.line span { display: inline-block; animation: slideUp .9s var(--ease) both; } .page-hero h1 em { color: var(--red); font-style: italic; font-weight: 600; } .page-hero p { font-size: 16px; color: var(--muted); max-width: 620px; margin: 0 auto; line-height: 1.85; animation: fadeIn 1s .3s both; } /* ================================================================ MARQUEE STRIP ================================================================ */ .marquee-strip { position: relative; overflow: hidden; background: linear-gradient(100deg, var(--red-dark), var(--red) 55%, var(--red-dark)); padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); } .marquee-strip.dark { background: rgba(2,15,30,0.96); border-color: rgba(255,255,255,0.12); --off-white: #f0f4f8; --glass-border: rgba(255,255,255,0.12); } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 32s linear infinite; } .marquee-strip:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; flex-shrink: 0; } .marquee-item { display: flex; align-items: center; gap: 12px; padding: 0 34px; font-family: var(--font-display); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; color: white; } .marquee-strip.dark .marquee-item { color: var(--off-white); } .marquee-item i { color: rgba(255,255,255,0.75); font-size: 13px; } .marquee-strip.dark .marquee-item i { color: var(--red); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ================================================================ ABOUT ================================================================ */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-img-wrap { position: relative; } .about-img-3d { width: 100%; height: 500px; object-fit: cover; border-radius: 24px; box-shadow: var(--card-shadow); transition: transform 0.6s var(--ease); } .about-img-3d:hover { transform: perspective(1000px) rotateY(-5deg) rotateX(3deg) scale(1.02); } .about-stat-card { position: absolute; bottom: -28px; right: -28px; background: linear-gradient(135deg, var(--red), var(--red-dark)); padding: 24px 28px; border-radius: 20px; box-shadow: 0 20px 60px var(--red-glow); text-align: center; animation: float-main 6s ease-in-out infinite; color: #fff; } .about-stat-big { font-family: var(--font-display); font-size: 50px; font-weight: 800; color: white; line-height: 1; } .about-stat-txt { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; } .about-exp-card { position: absolute; top: -24px; left: -24px; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 18px 22px; display: flex; align-items: center; gap: 14px; animation: float-b2 7s ease-in-out infinite; } .about-exp-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--red); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; color: #fff; } .about-exp-num { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1; } .about-exp-label { font-size: 11px; color: var(--muted); font-weight: 600; } .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0 40px; } .feat-item { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 18px; display: flex; align-items: flex-start; gap: 14px; transition: all 0.4s var(--ease); cursor: default; } .feat-item:hover { background: rgba(196,30,48,0.08); border-color: rgba(196,30,48,0.3); transform: translateY(-4px); } .feat-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--red-dim); border: 1px solid rgba(196,30,48,0.25); display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 16px; flex-shrink: 0; } .feat-ttl { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .feat-dsc { font-size: 12px; color: var(--muted); line-height: 1.5; } /* Team */ .team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .team-card { position: relative; border-radius: 22px; overflow: hidden; background: rgba(var(--bg-mid-rgb),0.5); border: 1px solid var(--glass-border); transition: all .45s var(--ease); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .team-card:hover { transform: translateY(-8px); box-shadow: 0 24px 55px rgba(196,30,48,0.2); border-color: rgba(196,30,48,0.35); } .team-img { width: 100%; height: 260px; object-fit: cover; } .team-info { padding: 22px; text-align: center; } .team-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-bottom: 4px; } .team-role { font-size: 12px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; } .team-soc { display: flex; justify-content: center; gap: 8px; } .team-soc a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); transition: all .3s; } .team-soc a:hover { background: var(--red); border-color: var(--red); color: white; } /* Values grid */ .values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .value-card { text-align: center; padding: 36px 24px; border-radius: 22px; background: var(--glass-bg); border: 1px solid var(--glass-border); transition: all .4s var(--ease); } .value-card:hover { transform: translateY(-6px); background: rgba(196,30,48,0.06); border-color: rgba(196,30,48,0.3); } .value-ico { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 20px; background: linear-gradient(135deg, var(--red), var(--red-dark)); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 10px 28px var(--red-glow); color: #fff; } .value-ttl { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-bottom: 10px; } .value-dsc { font-size: 13.5px; color: var(--muted); line-height: 1.7; } /* Timeline (about page) */ .timeline { position: relative; max-width: 800px; margin: 0 auto; } .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--red), rgba(196,30,48,0.15)); transform: translateX(-50%); } .tl-item { position: relative; width: 50%; padding: 0 50px 60px; } .tl-item:nth-child(odd) { left: 0; text-align: right; } .tl-item:nth-child(even) { left: 50%; text-align: left; } .tl-dot { position: absolute; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(196,30,48,0.15); } .tl-item:nth-child(odd) .tl-dot { right: -9px; } .tl-item:nth-child(even) .tl-dot { left: -9px; } .tl-year { font-family: var(--font-display); color: var(--red); font-size: 22px; font-weight: 800; margin-bottom: 6px; } .tl-ttl { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .tl-dsc { font-size: 13.5px; color: var(--muted); line-height: 1.7; } /* ================================================================ SERVICES GRID — 3D TILT CARDS ================================================================ */ .services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .svc-card { position: relative; padding: 36px 30px; border-radius: 24px; overflow: hidden; cursor: pointer; background: rgba(var(--bg-mid-rgb),0.5); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); transition: all 0.4s var(--ease); transform-style: preserve-3d; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .svc-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(196,30,48,0.12), transparent, rgba(var(--bg-mid-rgb),0.2)); opacity: 0; transition: opacity 0.4s; } .svc-card:hover { border-color: rgba(196,30,48,0.4); box-shadow: 0 24px 60px rgba(196,30,48,0.2), 0 0 0 1px rgba(196,30,48,0.15); transform: translateY(-8px); } .svc-card:hover::before { opacity: 1; } .svc-glow { position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(196,30,48,0.1); filter: blur(40px); pointer-events: none; transition: all 0.5s var(--ease); opacity: 0; } .svc-card:hover .svc-glow { opacity: 1; top: -40px; right: -40px; } .svc-num-bg { position: absolute; right: 20px; top: 14px; font-family: var(--font-display); font-size: 90px; font-weight: 800; color: rgba(var(--ink-rgb),0.03); line-height: 1; user-select: none; pointer-events: none; } .svc-icon-wrap { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 24px; background: linear-gradient(135deg, var(--red), var(--red-dark)); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 8px 24px var(--red-glow); transition: all 0.4s var(--ease); color: #fff; } .svc-card:hover .svc-icon-wrap { transform: scale(1.1) rotate(-5deg); box-shadow: 0 16px 40px var(--red-glow); } .svc-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-bottom: 12px; letter-spacing: -.3px; } .svc-desc { font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 24px; } .svc-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: 1.5px; transition: gap 0.3s; } .svc-card:hover .svc-link { gap: 14px; } .svc-link i { font-size: 11px; } /* ================================================================ SERVICE DETAIL PAGE ================================================================ */ .svc-detail-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: start; } .svc-detail-img { width: 100%; height: 420px; object-fit: cover; border-radius: 24px; box-shadow: var(--card-shadow); margin-bottom: 36px; } .svc-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 40px; } .check-item { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; } .check-item i { width: 24px; height: 24px; border-radius: 50%; background: var(--red-dim); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .svc-sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 20px; } .sidebar-card { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 22px; padding: 30px; } .sidebar-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-bottom: 18px; } .sidebar-list a { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--glass-border); transition: all .3s; } .sidebar-list a:last-child { border-bottom: none; } .sidebar-list a i:first-child { width: 32px; height: 32px; border-radius: 8px; background: var(--red-dim); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .sidebar-list a:hover { color: var(--white); padding-left: 6px; } .sidebar-list a.active { color: var(--red); } .sidebar-cta { background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 22px; padding: 32px 26px; text-align: center; box-shadow: 0 20px 50px var(--red-glow); color: #fff; } .sidebar-cta i { font-size: 30px; margin-bottom: 14px; } .sidebar-cta h4 { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin-bottom: 8px; } .sidebar-cta p { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 20px; line-height: 1.6; } /* ================================================================ COUNTERS ================================================================ */ .counters-section { position: relative; padding: 100px 0; overflow: hidden; background: linear-gradient(135deg, rgba(196,30,48,0.12) 0%, rgba(var(--bg-rgb),0.5) 100%); border-top: 1px solid rgba(196,30,48,0.15); border-bottom: 1px solid rgba(196,30,48,0.15); } .counters-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(196,30,48,0.08), transparent); } .counters-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; } .counter-box { text-align: center; padding: 50px 30px; position: relative; border-right: 1px solid var(--glass-border); transition: background 0.4s; } .counter-box:last-child { border-right: none; } .counter-box:hover { background: rgba(196,30,48,0.06); } .counter-icon { font-size: 28px; color: var(--red); margin-bottom: 16px; } .counter-num-wrap { font-family: var(--font-display); font-size: clamp(46px,5vw,68px); font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 10px; } .counter-num-wrap span { color: var(--red); } .counter-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; } /* ================================================================ WHY CHOOSE US ================================================================ */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .why-items { display: flex; flex-direction: column; gap: 20px; margin-top: 36px; } .why-item { display: flex; gap: 20px; padding: 24px; border-radius: 20px; background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); transition: all 0.4s var(--ease); position: relative; overflow: hidden; } .why-item::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); border-radius: 0 2px 2px 0; opacity: 0; transition: opacity 0.3s; } .why-item:hover { background: rgba(196,30,48,0.07); border-color: rgba(196,30,48,0.25); transform: translateX(6px); } .why-item:hover::after { opacity: 1; } .why-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--red); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; box-shadow: 0 6px 20px var(--red-glow); transition: transform 0.4s var(--ease); color: #fff; } .why-item:hover .why-ico { transform: scale(1.1) rotate(-8deg); } .why-ttl { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .why-dsc { font-size: 14px; color: var(--muted); line-height: 1.7; } .why-visual { position: relative; } .why-img-main { width: 100%; height: 540px; object-fit: cover; border-radius: 24px; box-shadow: var(--card-shadow); } .why-badge { position: absolute; top: -20px; right: -20px; background: linear-gradient(135deg, var(--red), var(--red-dark)); border-radius: 20px; padding: 24px 20px; text-align: center; box-shadow: 0 16px 48px var(--red-glow); animation: float-b1 6s ease-in-out infinite; color: #fff; } .why-badge strong { font-family: var(--font-display); font-size: 46px; font-weight: 800; display: block; line-height: 1; } .why-badge span { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 2px; text-transform: uppercase; } .why-rating { position: absolute; bottom: 30px; left: -28px; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 16px 20px; animation: float-b2 8s ease-in-out infinite; } .stars-row { color: var(--gold); font-size: 16px; margin-bottom: 6px; } .rating-txt { font-size: 13px; font-weight: 700; } .rating-sub { font-size: 11px; color: var(--muted); } /* ================================================================ PROCESS (TIMELINE STEPS) ================================================================ */ .process-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; margin-top: 56px; } .process-img-wrap { position: relative; } .process-img { width: 100%; height: 480px; object-fit: cover; border-radius: 24px; box-shadow: var(--card-shadow); transition: transform 0.6s var(--ease); } .process-img-wrap:hover .process-img { transform: scale(1.02); } .process-steps-list { display: flex; flex-direction: column; gap: 18px; } .process-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; margin-top: 72px; } .process-row::before { content: ''; position: absolute; top: 34px; left: calc(12.5%); right: calc(12.5%); height: 2px; background: linear-gradient(90deg, var(--red), rgba(196,30,48,0.3), var(--red)); z-index: 0; } .process-row-mini { margin-top: 0; } .process-step { text-align: center; padding: 0 20px; position: relative; z-index: 1; } .step-circle { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 24px; background: linear-gradient(135deg, var(--red), var(--red-dark)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 24px; font-weight: 800; box-shadow: 0 8px 30px var(--red-glow), 0 0 0 8px rgba(196,30,48,0.12); transition: all 0.4s var(--ease); color: #fff; } .process-step:hover .step-circle { transform: scale(1.15); box-shadow: 0 16px 50px var(--red-glow), 0 0 0 12px rgba(196,30,48,0.15); } .step-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; } .step-desc { font-size: 13px; color: var(--muted); line-height: 1.7; } /* ================================================================ TESTIMONIALS ================================================================ */ .testi-stage { padding: 40px 0 0; touch-action: pan-y; } .testi-stage .swiper-slide { height: auto; display: flex; } .testi-card { width: 100%; padding: 36px; border-radius: 24px; background: rgba(var(--bg-mid-rgb),0.6); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); position: relative; overflow: hidden; transition: all 0.4s var(--ease); box-shadow: 0 8px 32px rgba(0,0,0,0.3); display: flex; flex-direction: column; } .testi-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(196,30,48,0.15); border-color: rgba(196,30,48,0.3); } .testi-quote-mark { font-size: 100px; font-family: Georgia, serif; color: var(--red); opacity: .1; position: absolute; top: -10px; left: 24px; line-height: 1; pointer-events: none; } .testi-stars { color: var(--gold); font-size: 15px; margin-bottom: 18px; } .testi-text { font-size: 15px; color: var(--muted); line-height: 1.85; margin-bottom: 28px; font-style: italic; flex: 1; } .testi-author { display: flex; align-items: center; gap: 14px; } .testi-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--red); object-fit: cover; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--red), var(--red-dark)); font-weight: 800; font-size: 18px; flex-shrink: 0; color: #fff; } .testi-name { font-weight: 700; font-size: 15px; } .testi-role { font-size: 12px; color: var(--muted); } .testi-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 44px; } .t-arrow { width: 50px; height: 50px; border-radius: 50%; background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); color: var(--white); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; outline: none; flex-shrink: 0; } .t-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; transform: scale(1.1); } .t-arrow.swiper-button-disabled { opacity: .35; cursor: default; } .t-arrow.swiper-button-disabled:hover { background: var(--glass-bg); border-color: var(--glass-border); transform: none; } .testi-pagination { position: static !important; display: flex; align-items: center; gap: 8px; width: auto !important; } .testi-pagination .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 100px; background: var(--glass-border); opacity: 1; margin: 0 !important; transition: all 0.3s; } .testi-pagination .swiper-pagination-bullet-active { background: var(--red); width: 24px; } /* ================================================================ FAQ ================================================================ */ .faq-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: stretch; } .faq-img-col { position: sticky; top: calc(var(--header-h) + 24px); display: flex; } .faq-img { width: 100%; height: 100%; min-height: 560px; max-height: 720px; object-fit: cover; border-radius: 24px; box-shadow: var(--card-shadow); } .faq-glass-card { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; margin-bottom: 14px; transition: all 0.4s var(--ease); } .faq-glass-card:hover { border-color: rgba(196,30,48,0.25); } .faq-glass-card.open { border-color: rgba(196,30,48,0.4); background: rgba(196,30,48,0.06); } .faq-header { padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; gap: 14px; user-select: none; transition: color 0.3s; } .faq-glass-card.open .faq-header { color: var(--red); } .faq-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.4s var(--ease); flex-shrink: 0; } .faq-glass-card.open .faq-icon { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(45deg); } .faq-body-wrap { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); } .faq-glass-card.open .faq-body-wrap { max-height: 400px; } .faq-body { padding: 0 24px 22px; font-size: 14px; color: var(--muted); line-height: 1.8; } .faq-cat-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin: 44px 0 18px; } .faq-cat-title:first-child { margin-top: 0; } /* ================================================================ CTA / CONTACT ================================================================ */ .cta-section { position: relative; overflow: hidden; padding: 130px 0; background: linear-gradient(135deg, rgba(196,30,48,0.15), rgba(var(--bg-rgb),0.8)); } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(196,30,48,0.12), transparent); } .cta-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; position: relative; z-index: 2; } .cta-info-item { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .cta-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--red-dim); border: 1px solid rgba(196,30,48,0.25); display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 20px; flex-shrink: 0; transition: all 0.3s; } .cta-info-item:hover .cta-ico { background: var(--red); color: white; transform: scale(1.08) rotate(-6deg); } .cta-ilab { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; } .cta-ival { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; } .cta-ival-sub { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 2px; } .cta-ival a:hover { color: var(--red); } .cta-hours { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--glass-border); } .cta-hours-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); padding: 7px 0; } .cta-hours-row span:last-child { color: var(--white); font-weight: 600; } .form-glass { background: rgba(var(--bg-mid-rgb),0.5); backdrop-filter: blur(30px); border: 1px solid var(--glass-border); border-radius: 28px; padding: 44px; box-shadow: var(--card-shadow); } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; position: relative; } .field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); } .field input, .field textarea, .field select { padding: 14px 18px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--white); font-family: var(--font-body); font-size: 14px; outline: none; transition: all 0.3s; -webkit-appearance: none; } .field input::placeholder, .field textarea::placeholder { color: var(--input-placeholder); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--red); background: rgba(196,30,48,0.05); box-shadow: 0 0 0 3px rgba(196,30,48,0.12); } .field.error input, .field.error textarea, .field.error select { border-color: var(--red-light); box-shadow: 0 0 0 3px rgba(196,30,48,0.18); } .field-err { font-size: 11.5px; color: var(--danger-text); display: none; margin-top: -2px; } .field.error .field-err { display: block; } .field select option { background: var(--bg); color: var(--white); } .field textarea { resize: vertical; min-height: 120px; } .field.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .btn-send { width: 100%; padding: 17px; border-radius: 14px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: white; font-size: 16px; font-weight: 700; font-family: var(--font-body); box-shadow: 0 8px 30px var(--red-glow); transition: all 0.35s var(--ease); display: flex; align-items: center; justify-content: center; gap: 10px; } .btn-send:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 16px 48px var(--red-glow); } .btn-send:disabled { opacity: .7; cursor: not-allowed; } .btn-send .spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: white; animation: loader-spin .7s linear infinite; } .btn-send.loading .spin { display: inline-block; } .btn-send.loading .btn-send-txt { display: none; } .form-msg { display: none; text-align: center; padding: 30px; font-weight: 700; font-size: 16px; border-radius: 16px; margin-top: 6px; } .form-msg.show { display: block; } .form-msg.success { color: var(--success); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25); } .form-msg.error { color: var(--danger-text); background: rgba(196,30,48,0.08); border: 1px solid rgba(196,30,48,0.25); } .form-msg i { font-size: 40px; display: block; margin-bottom: 14px; } .map-wrap { border-radius: 24px; overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid var(--glass-border); filter: grayscale(.3) contrast(1.1); } .map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; } /* ================================================================ NEWSLETTER ================================================================ */ .newsletter { padding: 70px 0; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--red-dark), var(--red)); } .newsletter::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; position: relative; z-index: 1; } .newsletter-txt h3 { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: #fff; } .newsletter-txt p { color: rgba(255,255,255,0.8); margin-top: 6px; } .newsletter-form { display: flex; max-width: 460px; flex: 1; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.2); } .newsletter-form input { flex: 1; padding: 15px 20px; border: none; background: white; font-family: var(--font-body); font-size: 14px; outline: none; color: #111; } .newsletter-form button { padding: 15px 24px; background: var(--bg); color: var(--white); border: none; font-weight: 700; cursor: pointer; font-family: var(--font-body); font-size: 14px; white-space: nowrap; transition: filter 0.3s; } .newsletter-form button:hover { filter: brightness(0.88); } /* ================================================================ FOOTER ================================================================ */ footer { background: rgba(var(--bg-deep-rgb),1); border-top: 1px solid rgba(196,30,48,0.2); padding: 80px 0 0; position: relative; z-index: 2; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 50px; padding-bottom: 60px; } .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .footer-logo img { height: 42px; } .footer-logo span { font-family: var(--font-display); font-size: 21px; font-weight: 800; } .footer-brand p { font-size: 14px; color: var(--muted); line-height: 1.85; margin: 18px 0 24px; max-width: 300px; } .footer-soc { display: flex; gap: 10px; } .footer-soc a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); transition: all 0.3s; } .footer-soc a:hover { background: var(--red); border-color: var(--red); color: white; transform: translateY(-2px); } .footer-col h4 { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--red); margin-bottom: 22px; letter-spacing: .5px; } .footer-links a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 12px; transition: all 0.3s; } .footer-links a i { font-size: 10px; color: var(--red); transition: transform 0.3s; } .footer-links a:hover { color: var(--white); padding-left: 4px; } .footer-links a:hover i { transform: translateX(3px); } .footer-nl input { width: 100%; padding: 13px 16px; border-radius: 10px 10px 0 0; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--white); font-family: var(--font-body); font-size: 13px; outline: none; } .footer-nl input::placeholder { color: var(--input-placeholder); } .footer-nl button { width: 100%; padding: 13px; border-radius: 0 0 10px 10px; border: none; background: var(--red); color: white; font-weight: 700; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.3s; } .footer-nl button:hover { background: var(--red-dark); } .footer-bottom { border-top: 1px solid rgba(196,30,48,0.2); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 13px; color: var(--muted); } .footer-bottom-links { display: flex; gap: 18px; } .footer-bottom-links a { font-size: 12px; color: var(--muted); transition: color .3s; } .footer-bottom-links a:hover { color: var(--red); } /* ================================================================ 404 PAGE ================================================================ */ .error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 160px 24px 80px; position: relative; overflow: hidden; } .error-code { font-family: var(--font-display); font-size: clamp(90px,18vw,220px); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--red-light), var(--red-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .error-page h2 { font-family: var(--font-display); font-size: clamp(22px,3vw,32px); font-weight: 800; margin: 10px 0 14px; } .error-page p { color: var(--muted); margin-bottom: 34px; max-width: 460px; margin-left: auto; margin-right: auto; } /* ================================================================ UTILITIES ================================================================ */ .mt-0 { margin-top: 0 !important; } .text-center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1180px) { .services-grid { grid-template-columns: repeat(2,1fr); } .team-grid, .values-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; gap: 50px; } .hero-quote-card { max-width: 460px; margin: 0 auto; } .about-grid, .why-grid, .faq-layout, .cta-grid, .svc-detail-grid, .process-layout { grid-template-columns: 1fr; gap: 50px; } .faq-img-col { position: static; display: block; } .faq-img { height: auto; min-height: 0; max-height: none; } .process-img { height: 320px; } .svc-sidebar { position: static; } .counters-grid { grid-template-columns: repeat(2,1fr); } .process-row { grid-template-columns: repeat(2,1fr); gap: 40px; } .process-row::before { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .nav-links { display: none; } .hamburger { display: flex; } .topbar-links a:nth-child(2), .topbar-links a:nth-child(4) { display: none; } } @media (max-width: 860px) { .timeline::before { left: 20px; } .tl-item, .tl-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 44px 54px; } .tl-item:nth-child(odd) .tl-dot, .tl-item:nth-child(even) .tl-dot { left: 11px; right: auto; } } @media (max-width: 768px) { :root { --header-h: 78px; } .topbar { display: none; } .hero { min-height: auto; padding: 110px 0 60px; } .hero-title { font-size: 36px; } .page-hero { padding: 108px 0 64px; } .services-grid, .team-grid, .values-grid { grid-template-columns: 1fr; } .counters-grid { grid-template-columns: 1fr 1fr; } .process-row { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } .newsletter-inner { flex-direction: column; text-align: center; } .newsletter-form { max-width: 100%; } .form-row-2 { grid-template-columns: 1fr; } .section { padding: 80px 0; } .section-sm { padding: 60px 0; } .form-glass { padding: 28px 20px; } .hero-quote-card { padding: 26px 22px; border-radius: 22px; } .about-stat-card, .about-exp-card { display: none; } .faq-img-col { display: none; } .faq-layout { grid-template-columns: 1fr; } .svc-checklist { grid-template-columns: 1fr; } #scrollProgress { right: 16px; bottom: 16px; width: 52px; height: 52px; } .logo-main { font-size: 16px; } .logo-sub { display: none; } .logo-block img { height: 38px; } } @media (max-width: 560px) { .wrap, .wrap-narrow { padding: 0 18px; } .hero-title { font-size: 30px; letter-spacing: -1px; } .hero-desc { font-size: 15px; } .section-h { letter-spacing: -.5px; } .btn-primary-3d, .btn-glass { padding: 13px 22px; font-size: 13.5px; } .counters-grid { grid-template-columns: 1fr; } .counter-box { border-right: none; border-bottom: 1px solid var(--glass-border); } .counter-box:last-child { border-bottom: none; } .process-row { grid-template-columns: 1fr; gap: 34px; } .marquee-item { font-size: 14px; padding: 0 20px; } .form-glass { padding: 22px 16px; border-radius: 20px; } .hero-quote-card { padding: 22px 18px; } .hero-quote-checks { gap: 8px 14px; } .about-img-3d, .why-img-main, .process-img { height: 260px; } .svc-detail-img { height: 260px; } } @media (max-width: 380px) { .wrap, .wrap-narrow { padding: 0 14px; } .logo-block { gap: 8px; } .logo-block img { height: 32px; } .logo-main { font-size: 13px; letter-spacing: -.2px; } .hero-title { font-size: 26px; } .page-hero h1 { font-size: clamp(24px, 7.5vw, 40px); } .section-h { font-size: 26px; } .btn-primary-3d, .btn-glass { width: 100%; justify-content: center; } .hero-actions { flex-direction: column; } .hero-actions a { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { *, [data-reveal] { animation: none !important; transition-duration: .01ms !important; } }