/* ===== ES Electronics — brand theme ===== */ :root { --navy: #14225c; --navy-2: #1e2f7a; --red: #b22a2a; --red-2: #9a1f1f; --green: #2e9e4f; --ink: #1f2733; --muted: #5b6675; --line: #e4e8ef; --bg: #ffffff; --bg-alt: #f5f7fb; --radius: 12px; --shadow: 0 10px 30px rgba(20, 34, 92, 0.08); --wrap: 1180px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 106.25%; } body { margin: 0; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: clip; } html { overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { color: var(--navy); line-height: 1.2; margin: 0 0 0.5em; } .container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 30px; border-radius: 999px; line-height: 1.2; font-weight: 600; font-size: 0.98rem; cursor: pointer; border: 2px solid transparent; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; text-align: center; } .btn:hover { transform: translateY(-3px); } .btn:focus { outline: none; } .btn:focus-visible { outline: 3px solid rgba(20, 34, 92, 0.35); outline-offset: 3px; } .btn--primary { background: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(20, 34, 92, 0.22); } .btn--primary:hover { background: var(--navy-2); box-shadow: 0 14px 28px rgba(20, 34, 92, 0.3); } .btn--accent { background: linear-gradient(135deg, #c62828, #e53935); color: #fff; box-shadow: 0 8px 20px rgba(198, 40, 40, 0.28); } .btn--accent:hover { background: linear-gradient(135deg, #b71c1c, #c62828); box-shadow: 0 14px 28px rgba(198, 40, 40, 0.4); } .btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); } .btn--ghost:hover { background: var(--navy); color: #fff; box-shadow: 0 12px 26px rgba(20, 34, 92, 0.26); } /* ===== Continuous animation on filled buttons (not hover-only) ===== */ .btn--primary, .btn--accent { position: relative; overflow: hidden; } .btn--primary > *, .btn--accent > * { position: relative; z-index: 1; } /* Light shine sweeping across on its own */ .btn--primary::after, .btn--accent::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, 0.4), transparent ); transform: skewX(-18deg); animation: btn-shine 4.2s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes btn-shine { 0% { left: -120%; } 55%, 100% { left: 160%; } } /* Continuous nudge on trailing arrow icons in buttons */ .btn .fa-arrow-right { animation: btn-arrow-nudge 1.6s ease-in-out infinite; } @keyframes btn-arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } /* Filled buttons also gently "breathe" (subtle scale) */ .btn--primary, .btn--accent { animation: btn-breathe 3s ease-in-out infinite; } @keyframes btn-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .btn--primary:hover, .btn--accent:hover { transform: translateY(-3px) scale(1.03); } @media (prefers-reduced-motion: reduce) { .btn--primary::after, .btn--accent::after, .btn .fa-arrow-right, .btn--primary, .btn--accent { animation: none; } } /* ===== Icons ===== */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; } /* ================================================================= HEADER — premium corporate redesign (Poppins, scoped) ================================================================= */ /* Let the injected top bar + header act as direct children of so the sticky header can pin against the whole page (not just its wrapper box). */ #site-header { display: contents; } .topbar, .header { font-family: "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .header-wrap-max { max-width: 1320px; } /* ---- Top bar (40px) ---- */ .topbar { background: #0b1f4d; color: #e6ebf7; font-size: 0.875rem; } .topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; padding: 4px 28px; max-width: 1440px; margin: 0 auto; flex-wrap: wrap; } .topbar__contact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .topbar__contact a { display: inline-flex; align-items: center; gap: 9px; color: #e6ebf7; padding: 5px 10px; border-radius: 7px; transition: background 0.3s ease, color 0.3s ease; } .topbar__contact a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; } .tb-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; flex: 0 0 auto; } .tb-ico .icon { width: 14px; height: 14px; } .topbar__social { display: inline-flex; align-items: center; gap: 8px; } .topbar__follow { font-size: 0.85rem; font-weight: 600; color: #cdd6ea; margin-right: 4px; white-space: nowrap; } .topbar__social a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--red); color: #fff; transition: transform 0.3s ease; } .topbar__social a:hover { transform: translateY(-2px); } .topbar__social .icon { width: 16px; height: 16px; } /* ---- Main navigation ---- */ .header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 4px 16px rgba(11, 31, 77, 0.06); transition: box-shadow 0.3s ease; } .header.is-stuck { box-shadow: 0 8px 28px rgba(11, 31, 77, 0.12); border-bottom-color: transparent; } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 88px; padding: 8px 28px; max-width: 1440px; } /* Logo — reduced, left padding, aspect kept */ .brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand img { height: 56px; width: auto; transition: transform 0.3s ease; } .brand:hover img { transform: scale(1.05); } /* Nav centered between logo and CTA */ .nav { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 12px; } .nav > ul { display: flex; align-items: center; gap: 3px; list-style: none; margin: 0 auto; padding: 0; white-space: nowrap; } .nav > ul > li { position: relative; flex-shrink: 0; } .nav > ul > li > a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 15.5px; font-weight: 600; letter-spacing: 0.005em; color: #26324a; padding: 10px 13px; border-radius: 10px; position: relative; transition: color 0.3s ease, background 0.3s ease; } .nav > ul > li > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 3px; background: linear-gradient(90deg, var(--red), #ffd34d); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .nav > ul > li > a:hover::after, .nav > ul > li > a.is-active::after { transform: scaleX(1); } .nav > ul > li > a:hover { color: var(--navy); background: rgba(20, 34, 92, 0.05); } .nav > ul > li > a.is-active { color: var(--navy); } .caret { width: 16px; height: 16px; transition: transform 0.3s ease; } .has-drop:hover .caret, .has-drop.open .caret { transform: rotate(180deg); } /* ===== Home stats strip below hero ===== */ .stats--hero { padding: 4px 0; background: linear-gradient(180deg, #ffffff 0%, #f2f6fc 100%); border-top: 4px solid var(--red); border-bottom: 1px solid var(--line); } .stats--hero .stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 1040px; margin: 0 auto; } /* White cards with a red icon above each figure */ .stats--hero .stat-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 28px rgba(20, 34, 92, 0.06); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } /* Soft red accent glow that fades in on hover */ .stats--hero .stat-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 50% 0%, rgba(198, 40, 40, 0.06), transparent 65% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } /* Red-gold top accent line on every card */ .stats--hero .stat-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--red), transparent); z-index: 1; } .stats--hero .stat-card:hover { transform: translateY(-6px); border-color: rgba(198, 40, 40, 0.28); box-shadow: 0 22px 44px rgba(20, 34, 92, 0.13); } .stats--hero .stat-card:hover::after { opacity: 1; } /* Red icon badge above the number */ .stats--hero .stat-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 0 3px; border-radius: 11px; color: #fff; font-size: 1.1rem; background: linear-gradient(135deg, var(--red), #ff7a68); border: 0; box-shadow: 0 8px 18px rgba(198, 40, 40, 0.3); animation: stat-ico-pulse 3s ease-in-out infinite; transition: transform 0.3s ease; } @keyframes stat-ico-pulse { 0%, 100% { box-shadow: 0 8px 18px rgba(198, 40, 40, 0.28); } 50% { box-shadow: 0 8px 26px rgba(198, 40, 40, 0.5); } } .stats--hero .stat-card:nth-child(2) .stat-card__ico { animation-delay: 0.5s; } .stats--hero .stat-card:nth-child(3) .stat-card__ico { animation-delay: 1s; } .stats--hero .stat-card:nth-child(4) .stat-card__ico { animation-delay: 1.5s; } .stats--hero .stat-card:nth-child(5) .stat-card__ico { animation-delay: 2s; } @media (prefers-reduced-motion: reduce) { .stats--hero .stat-card__ico { animation: none; } } .stats--hero .stat-card__ico i { font-size: 1.15rem; } .stats--hero .stat-card:hover .stat-card__ico { transform: translateY(-2px) scale(1.06); } /* Keep icon, figure and label above the hover glow overlay */ .stats--hero .stat-card__ico, .stats--hero .stat-card__num, .stats--hero .stat-card__label { position: relative; z-index: 1; } .stat-card__num { display: inline-flex; align-items: flex-start; justify-content: center; gap: 3px; color: var(--navy); line-height: 1; margin-bottom: 2px; } .stats--hero .stat__num { font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .stats--hero .stat__plus { font-size: clamp(0.8rem, 1.1vw, 1rem); font-weight: 700; margin-top: 2px; } .stat-card__label { margin: 0; color: var(--muted); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } @media (max-width: 980px) { .stats--hero { padding: 20px 0; } .stats--hero .stat-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (max-width: 560px) { .stats--hero { padding: 18px 0; } .stats--hero .stat-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; } .stats--hero .stat-card { padding: 24px 14px 22px; } .stats--hero .stat-card__ico { width: 46px; height: 46px; margin-bottom: 12px; } .stats--hero .stat-card__ico i { font-size: 1.15rem; } } /* Products dropdown */ .dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(11, 31, 77, 0.16); padding: 8px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 60; } .has-drop:hover > .dropdown, .has-drop:focus-within > .dropdown, .has-drop.open > .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown li { position: relative; } .dropdown a { display: block; padding: 11px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: #33405c; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; } .dropdown a:hover { background: var(--bg-alt); color: var(--navy); } /* CTA — red gradient */ .nav__cta { position: relative; overflow: hidden; flex: 0 0 auto; white-space: nowrap; color: #fff; border: 0; padding: 13px 24px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; background: linear-gradient(135deg, #c62828, #e53935); box-shadow: 0 8px 20px rgba(198, 40, 40, 0.3); animation: cta-glow 2.4s ease-in-out infinite; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } /* Continuous pulsing glow */ @keyframes cta-glow { 0%, 100% { box-shadow: 0 8px 20px rgba(198, 40, 40, 0.3); } 50% { box-shadow: 0 10px 28px rgba(198, 40, 40, 0.6); } } /* Light shine sweeping across on its own */ .nav__cta::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, 0.4), transparent ); transform: skewX(-18deg); animation: cta-shine 3.6s ease-in-out infinite; pointer-events: none; } @keyframes cta-shine { 0% { left: -120%; } 55%, 100% { left: 160%; } } .nav__cta span, .nav__cta { position: relative; } .nav__cta:hover { transform: translateY(-3px) scale(1.03); background: linear-gradient(135deg, #b71c1c, #c62828); } @media (prefers-reduced-motion: reduce) { .nav__cta, .nav__cta::after { animation: none; } } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; border-radius: 8px; } .nav-toggle span { width: 26px; height: 3px; background: var(--navy); border-radius: 2px; transition: 0.3s; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile / Responsive header rules */ body.nav-lock { overflow: hidden; } @media (max-width: 980px) { .topbar__inner { padding: 6px 14px; } .brand img { height: 34px; } .nav-toggle { display: inline-flex; } /* Left-side drawer for mobile */ .nav { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 320px; background: #fff; border-right: 1px solid var(--line); box-shadow: 6px 0 28px rgba(11, 31, 77, 0.12); flex-direction: column; gap: 8px; padding: 20px 14px; z-index: 60; overflow: auto; } .nav.is-open { display: flex; } /* semi-opaque overlay when nav is open */ body.nav-lock::before { content: ""; position: fixed; inset: 0 0 0 320px; background: rgba(2, 8, 22, 0.48); z-index: 55; } .nav > ul { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; } .nav > ul > li > a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: 15px; border-radius: 8px; } .nav__cta { margin-top: 6px; align-self: stretch; width: calc(100% - 32px); } /* Dropdowns: flow within the menu on small screens; open via .open class */ .dropdown { display: none; position: static !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 0 8px !important; margin: 6px 0 0 0 !important; } .has-drop.open > .dropdown { display: block; } .has-drop > .dropdown a { padding: 10px 14px; border-radius: 8px; background: rgba(244,246,249,0.6); } } /* ===== Hero slider ===== */ .hero { position: relative; overflow: hidden; background: #eef2f8; } /* Match the actual banner artwork ratio so the baked-in headline / sub-text stay visible instead of being horizontally cropped. */ .slides { position: relative; aspect-ratio: 1024 / 434; background: #eef2f8; } /* Hero banners use their own artwork ratio (~1600 x 643 / 3264 x 1312) so they fill fully with no letterboxing. */ .hero--banner .slides { aspect-ratio: 1600 / 643; } .hero--banner .slide img { object-fit: cover; } .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; } .slide.is-active { opacity: 1; } .slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* Subtle bottom scrim — seats the nav dots, adds premium depth without darkening the banner's dark-on-light text. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient( to top, rgba(11, 21, 51, 0.28), rgba(11, 21, 51, 0) ); pointer-events: none; z-index: 2; } /* Slider arrows — hidden until the hero is hovered, then fade in. */ .slide-nav { position: absolute; top: 50%; transform: translateY(-50%) scale(0.9); z-index: 4; background: rgba(255, 255, 255, 0.92); color: var(--navy); border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(11, 31, 77, 0.22); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s ease, box-shadow 0.25s ease; } .hero:hover .slide-nav, .hero:focus-within .slide-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) scale(1); } .slide-nav:hover { background: #fff; box-shadow: 0 12px 28px rgba(11, 31, 77, 0.3); } .slide-nav--prev { left: 22px; } .slide-nav--next { right: 22px; } .slide-nav--prev:hover { transform: translateY(-50%) scale(1.06) translateX(-2px); } .slide-nav--next:hover { transform: translateY(-50%) scale(1.06) translateX(2px); } /* Nav dots — clean, subtle, visible on the light banner */ .slide-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 9px; z-index: 3; } .slide-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, 0.6); box-shadow: 0 1px 3px rgba(11, 31, 77, 0.35); transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease; } .slide-dots button:hover { background: rgba(255, 255, 255, 0.9); } .slide-dots button.is-active { width: 26px; border-radius: 5px; background: #fff; } /* Find and DELETE or COMMENT OUT this code block: */ @media (hover: none) { .slide-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) scale(1); } } @media (max-width: 1380px) { .header__inner { gap: 15px; padding: 6px 15px; } .nav { gap: 10px; } .nav > ul > li > a { font-size: 14.5px; /* Slightly smaller font so it fits */ padding: 8px 10px; /* Tighter padding between links */ } .nav__cta { padding: 10px 20px; font-size: 14px; } } /* ===== Intro ===== */ .intro { text-align: center; padding: 56px 0 40px; } .intro__eyebrow, .eyebrow { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin: 0 0 10px; } .intro__title { font-size: clamp(1.6rem, 3.5vw, 2.5rem); max-width: 900px; margin: 0 auto 0.5em; } .intro__lead { color: var(--muted); max-width: 720px; margin: 0 auto 28px; font-size: 1.08rem; } .intro__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ===== Stats ===== */ .stats { background: linear-gradient(120deg, #3d456e, #4c557f); color: #fff; padding: 44px 0; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stat { padding: 8px; } .stat__num { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; } .stat__plus { font-size: 1.8rem; font-weight: 800; color: #ffd34d; vertical-align: top; } .stat__label { margin: 6px 0 0; color: #cdd5f0; font-size: 0.95rem; } /* ===== Sections ===== */ .section { padding: 44px 0; } .section--alt { background: var(--bg-alt); } .section__head { text-align: center; max-width: 720px; margin: 0 auto 44px; } .section__head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); /* Two-tone heading: first half navy, second half red */ background: linear-gradient( 90deg, var(--navy) 0%, var(--navy) 50%, var(--red) 50%, var(--red) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .section__sub { color: var(--muted); margin: 0; } /* ===== Product cards ===== */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { transform: translateY(-6px); border-color: var(--navy); box-shadow: 0 18px 40px rgba(20, 34, 92, 0.14); } .card__icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; color: var(--navy); background: linear-gradient( 135deg, rgba(178, 42, 42, 0.12), rgba(20, 34, 92, 0.12) ); } .card__icon .icon { width: 26px; height: 26px; } .card h3 { font-size: 1.12rem; } .card p { color: var(--muted); margin: 0; font-size: 0.96rem; } /* ===== About ===== */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .about__media img { border-radius: var(--radius); box-shadow: var(--shadow); } .about__body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .ticks { list-style: none; padding: 0; margin: 18px 0 26px; } .ticks li { position: relative; padding-left: 30px; margin-bottom: 10px; } .ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; } /* ===== Contact ===== */ .section--contact { background: var(--bg-alt); } .contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; } .contact__info, .enquiry { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px rgba(20, 34, 92, 0.1); } .contact__info { padding: 26px 30px 28px; } .contact__info .eyebrow { margin-bottom: 8px; } .contact__info h2 { margin: 0 0 10px; } .contact__intro { margin: 0 0 16px; color: var(--muted); } .contact-line { padding: 12px 0; border-bottom: 1px solid var(--line); } .contact-line:last-child { border-bottom: 0; } .enquiry { padding: 28px; } .contact__list { list-style: none; padding: 0; margin: 22px 0 0; } .contact__list li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--muted); } .contact__ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto; color: var(--navy); background: rgba(20, 34, 92, 0.08); } .contact__ico .icon { width: 17px; height: 17px; } .contact__list a:hover { color: var(--navy); } .contact__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } .field { margin-bottom: 16px; } .field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--navy); } .field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: #fff; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--navy); border-color: var(--navy); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ===== Enquiry tabs ===== */ .tabs { display: flex; gap: 8px; margin-bottom: 16px; } .tab { flex: 1; padding: 13px; border: 1px solid var(--line); background: #fff; color: var(--muted); font: inherit; font-weight: 600; border-radius: 999px; cursor: pointer; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .tab.is-active { background: linear-gradient(135deg, var(--red), #ff7a68); color: #fff; border-color: transparent; box-shadow: 0 10px 22px rgba(198, 40, 40, 0.3); } .tab:hover:not(.is-active) { border-color: rgba(198, 40, 40, 0.4); color: var(--red); } .tab-panel { display: none; } .tab-panel.is-active { display: block; } /* ===== CTA band ===== */ .cta-band { background: linear-gradient(120deg, #8f1c1c 0%, var(--red) 50%, #e53935 100%); color: #fff; padding: 66px 0; } .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cta-band h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 2rem); } .cta-band p { margin: 0; color: #ffe0e0; } .cta-band .btn--accent { background: #fff; color: var(--red); } .cta-band .btn--accent:hover { background: #fff5f5; } /* ===== Footer (4-column) ===== */ .footer { position: relative; overflow: hidden; color: #cdd5f0; background: radial-gradient( circle at 88% 0%, rgba(198, 40, 40, 0.18), transparent 42% ), radial-gradient( circle at 2% 100%, rgba(255, 211, 77, 0.08), transparent 40% ), linear-gradient(180deg, #283458 0%, #18255c 100%); } /* Animated gold/red top accent */ .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 5s ease-in-out infinite; z-index: 2; } /* Faint dot texture across the whole footer */ .footer::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient( rgba(255, 255, 255, 0.05) 1.2px, transparent 1.3px ); background-size: 26px 26px; pointer-events: none; } .footer__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 44px; padding: 60px 20px 44px; } .footer__col h4 { position: relative; color: #fff; font-size: 1.02rem; font-weight: 600; margin: 0 0 24px; padding-bottom: 12px; letter-spacing: 0.01em; } .footer__col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d); } .footer__logo { height: 48px; width: auto; background: #fff; padding: 8px 14px; border-radius: 10px; margin-bottom: 18px; } .footer__about p { margin: 0 0 20px; max-width: 320px; font-size: 0.92rem; line-height: 1.7; } .footer__social { display: flex; gap: 10px; } .footer__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--red), #ff7a68); box-shadow: 0 8px 18px rgba(198, 40, 40, 0.3); transition: transform 0.25s ease; } .footer__social a:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(198, 40, 40, 0.45); } /* Continuous gentle bob on the social icons (staggered) */ .footer__social a i { animation: fs-bob 3s ease-in-out infinite; } .footer__social a:nth-child(2) i { animation-delay: 0.4s; } .footer__social a:nth-child(3) i { animation-delay: 0.8s; } @keyframes fs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .footer__social .icon { width: 17px; height: 17px; } /* Arrow marker before each quick link */ .footer__links a::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 8px; color: var(--red); font-size: 0.8rem; transition: color 0.2s ease, transform 0.2s ease; } .footer__links a:hover::before { color: #ffd34d; } .footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .footer__links a { display: inline-flex; align-items: center; color: #cdd5f0; font-size: 0.93rem; transition: color 0.2s ease, transform 0.2s ease; } .footer__links a:hover { color: #ffd34d; transform: translateX(4px); } .footer__contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; } .footer__contact-list li { display: flex; align-items: center; gap: 12px; font-size: 0.93rem; } .footer__contact-list a { color: #cdd5f0; transition: color 0.2s ease; } .footer__contact-list a:hover { color: #fff; } .footer__contact-list .icon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; color: #9fb0e6; } .footer__bar { position: relative; z-index: 1; border-top: 0; font-size: 0.85rem; } /* Glowing gradient divider above the copyright bar */ .footer__bar::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 211, 77, 0.55), transparent ); } .footer__bar .container { padding-top: 20px; padding-bottom: 20px; text-align: center; } .footer__copy { display: block; white-space: nowrap; } .footer__copy a { color: #ffd34d; font-weight: 600; } .footer__copy a:hover { text-decoration: underline; } @media (max-width: 760px) { .footer__copy { white-space: normal; } } /* Defensive stacking so the 4-col footer never overflows on small screens (full mobile/tablet polish is a later task). */ @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } /* ===== Page hero (inner pages) ===== */ .page-hero { background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: #fff; padding: 54px 0; text-align: center; } .page-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 10px; } .page-hero p { color: #cdd5f0; max-width: 700px; margin: 0 auto; font-size: 1.05rem; } .breadcrumb { color: #9fb0e6; font-size: 0.9rem; margin-bottom: 16px; } .breadcrumb a:hover { color: #fff; } .note { background: #fff6e6; border: 1px dashed #e3b04b; color: #7a5b12; border-radius: 10px; padding: 14px 18px; font-size: 0.92rem; } .prose { max-width: 820px; } .prose p { color: var(--muted); margin: 0 0 16px; } /* ===== Product detail rows ===== */ .prod { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); margin-bottom: 20px; } .prod__icon { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; color: var(--navy); background: linear-gradient( 135deg, rgba(178, 42, 42, 0.12), rgba(20, 34, 92, 0.12) ); } .prod__icon .icon { width: 30px; height: 30px; } .prod h3 { margin: 0 0 6px; } .prod p { margin: 0; color: var(--muted); } /* ===== Simple info grid (partners / awards placeholders) ===== */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 18px; text-align: center; color: var(--muted); box-shadow: var(--shadow); min-height: 120px; display: grid; place-items: center; } /* ===== Two-column value list ===== */ .vm { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .vm .card { text-align: left; } /* ===== Vision & Mission — bold filled gradient cards ===== */ #vision-mission .section__head h2 { position: relative; display: block; } #vision-mission .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } #vision-mission .vm { gap: 28px; } #vision-mission .card { position: relative; overflow: hidden; padding: 40px 34px; border: 0; border-radius: 24px; color: #fff; box-shadow: 0 24px 50px rgba(20, 34, 92, 0.22); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease; } /* Vision — softer navy gradient */ #vision-mission .card:nth-child(1) { background: radial-gradient( circle at 90% 12%, rgba(255, 255, 255, 0.14), transparent 45% ), linear-gradient(150deg, #3a4a86 0%, #24336e 100%); } /* Mission — softer red gradient */ #vision-mission .card:nth-child(2) { background: radial-gradient( circle at 90% 12%, rgba(255, 255, 255, 0.16), transparent 45% ), linear-gradient(150deg, #c0413f 0%, #d94a48 55%, #ea6a5f 100%); } #vision-mission .card:hover { transform: translateY(-10px); box-shadow: 0 34px 66px rgba(20, 34, 92, 0.32); } /* Glassy white icon badge with a gentle continuous float */ #vision-mission .card__icon { width: 62px; height: 62px; border-radius: 18px; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(4px); animation: vm-ico-float 3.2s ease-in-out infinite; } #vision-mission .card:nth-child(2) .card__icon { animation-delay: -1.6s; } @keyframes vm-ico-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-4deg); } } @media (prefers-reduced-motion: reduce) { #vision-mission .card__icon, #vision-mission .section__head h2::after { animation: none; } } #vision-mission .card h3 { color: #fff; font-size: 1.3rem; } #vision-mission .card p { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.86); } /* ===== Responsive ===== */ /* Tablet / narrow desktop — tighten header spacing before it collapses */ @media (max-width: 1200px) { .nav { gap: 14px; } .nav > ul { gap: 2px; } .nav > ul > li > a { font-size: 15px; padding: 9px 9px; } .nav > ul > li > a::after { left: 9px; right: 9px; } .brand img { height: 40px; } .nav__cta { padding: 12px 20px; } .header__inner { gap: 16px; } } /* Mobile — premium slide-in menu */ @media (max-width: 1024px) { .nav-toggle { display: flex; z-index: 70; } .nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 96px 22px 28px; gap: 8px; box-shadow: -12px 0 40px rgba(11, 31, 77, 0.18); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; z-index: 65; } .nav.is-open { transform: translateX(0); } .nav > ul { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; } .nav > ul > li { width: 100%; } .nav > ul > li > a { width: 100%; font-size: 16px; padding: 13px 14px; justify-content: space-between; border-radius: 10px; } .nav > ul > li > a::after { display: none; } .nav > ul > li > a:hover, .nav > ul > li > a.is-active { background: var(--bg-alt); } /* dropdown becomes an inline accordion */ .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 2px 0 4px 14px; min-width: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .has-drop.open > .dropdown { max-height: 420px; } .nav__cta { width: 100%; text-align: center; margin-top: 12px; } /* dim backdrop when menu open */ body.nav-lock { overflow: hidden; } body.nav-lock::after { content: ""; position: fixed; inset: 0; background: rgba(11, 31, 77, 0.45); z-index: 60; } /* The sticky header creates its own stacking context, so the slide-in menu (inside it) would otherwise sit BELOW the z-index:60 backdrop and become un-tappable. Lift the whole header above the backdrop while the menu is open so its links — and the close button — stay clickable. */ body.nav-lock .header { z-index: 65; } /* Keep the full banner visible on tablet/mobile too. */ .slides { aspect-ratio: 1024 / 434; } /* Mobile / tablet: arrows are ALWAYS visible (touch devices have no hover). */ .slide-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) scale(1); } .slide-nav--prev { left: 12px; } .slide-nav--next { right: 12px; } .cards { grid-template-columns: repeat(2, 1fr); } .about, .contact { grid-template-columns: 1fr; } .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .topbar__inner { justify-content: center; } .footer__nav { max-width: none; } .tiles { grid-template-columns: repeat(2, 1fr); } .vm { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } .footer__inner { flex-direction: column; align-items: flex-start; } } /* ================================================================= HOME PAGE — premium section redesign ================================================================= */ /* ---- About Us ---- */ .about { align-items: stretch; } .about__media { position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: linear-gradient(135deg, #eef2f9, #e2e8f4); border-radius: 18px; box-shadow: 0 24px 60px rgba(20, 34, 92, 0.16); } .about__body { min-width: 0; } .about__media img { width: 100%; height: 100%; max-height: 480px; object-fit: contain; border-radius: 10px; } .about__badge { position: absolute; right: -18px; bottom: -18px; display: flex; flex-direction: column; gap: 2px; max-width: 190px; padding: 16px 20px; color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-2)); border-radius: 16px; box-shadow: 0 16px 34px rgba(20, 34, 92, 0.3); } .about__badge-num { font-size: 1.9rem; font-weight: 800; line-height: 1; color: #ffd34d; } .about__badge-txt { font-size: 0.82rem; color: #dbe2f6; } .about__lead { color: var(--muted); margin: 0 0 22px; } .features { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; } .features li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); } .features__ico { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; color: var(--green); background: rgba(46, 158, 79, 0.14); } .features__ico .icon { width: 16px; height: 16px; } /* ---- Centered section CTA row ---- */ .section__cta { text-align: center; margin-top: 40px; } /* ---- Products & Solutions cards ---- */ .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .pcard:hover { transform: translateY(-8px); border-color: rgba(20, 34, 92, 0.25); box-shadow: 0 26px 54px rgba(20, 34, 92, 0.16); } .pcard__media { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 22px; background: linear-gradient(135deg, #f5f7fb, #e7edf6); border-bottom: 1px solid var(--line); } .pcard__media img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.4s ease; } .pcard:hover .pcard__media img { transform: scale(1.05); } .pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 24px 26px; } .pcard__body h3 { font-size: 1.1rem; margin: 0 0 10px; } .pcard__body p { color: var(--muted); font-size: 0.95rem; margin: 0 0 18px; } .link-more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--red); font-weight: 700; font-size: 0.92rem; } .link-more .icon { width: 16px; height: 16px; transition: transform 0.25s ease; } .link-more:hover { color: var(--red-2); } .link-more:hover .icon { transform: translateX(4px); } /* ---- Business Partners ---- */ .partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .partner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 22px 14px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.05); transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .partner:hover { transform: translateY(-5px); color: var(--navy); border-color: rgba(20, 34, 92, 0.22); box-shadow: 0 16px 34px rgba(20, 34, 92, 0.12); } .partner .icon { width: 34px; height: 34px; } .partner span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; } .partners__note { max-width: 760px; margin: 34px auto 0; text-align: center; color: var(--muted); } /* ---- Certifications ---- */ .cert-grid, .award-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cert-card, .award-card { text-align: center; padding: 32px 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } .cert-card:hover, .award-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(20, 34, 92, 0.14); } .cert-card__ico, .award-card__ico { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; } .cert-card__ico { color: var(--navy); background: linear-gradient( 135deg, rgba(178, 42, 42, 0.12), rgba(20, 34, 92, 0.12) ); } .award-card__ico { color: #b8860b; background: linear-gradient( 135deg, rgba(255, 211, 77, 0.25), rgba(178, 42, 42, 0.12) ); } .cert-card__ico .icon, .award-card__ico .icon { width: 30px; height: 30px; } .cert-card h3, .award-card h3 { font-size: 1.05rem; margin: 0 0 8px; } .cert-card p, .award-card p { margin: 0; color: var(--muted); font-size: 0.9rem; } /* ---- Contact CTA band ---- */ .cta-band__inner { flex-direction: column; align-items: center; text-align: center; gap: 6px; max-width: 760px; margin: 0 auto; } .cta-band__eyebrow { margin: 0; color: rgba(255, 255, 255, 0.82); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; } .cta-band__inner h2 { margin: 6px 0 4px; } .cta-band__sub { margin: 0 0 26px; max-width: 620px; color: #ffe3e3; font-size: 1.06rem; } .cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .btn--on-red { background: #fff; color: var(--red); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); animation: btn-onred-pulse 2.6s ease-in-out infinite; } @keyframes btn-onred-pulse { 0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); } 50% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26), 0 0 0 6px rgba(255, 255, 255, 0.12); } } .btn--on-red:hover { background: #fff5f5; transform: translateY(-2px) scale(1.03); } @media (prefers-reduced-motion: reduce) { .btn--on-red { animation: none; } } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); } .btn--outline-light:hover { background: #fff; color: var(--red); } /* ---- Home sections — responsive ---- */ @media (max-width: 1024px) { .pgrid { grid-template-columns: repeat(2, 1fr); } .partner-grid { grid-template-columns: repeat(3, 1fr); } .cert-grid, .award-grid { grid-template-columns: repeat(2, 1fr); } .about__badge { right: 12px; bottom: -14px; } } @media (max-width: 720px) { .cta-band__inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } .partner-grid { grid-template-columns: repeat(2, 1fr); } .cert-grid, .award-grid { grid-template-columns: 1fr; } .cta-band__actions { width: 100%; } .cta-band__actions .btn { flex: 1 1 auto; } } /* ---- Clients ---- */ .pill-tag { display: inline-block; margin-bottom: 14px; padding: 7px 20px; border-radius: 999px; background: rgba(178, 42, 42, 0.1); color: var(--red); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; } .clients__panel { padding: 44px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 20px 50px rgba(20, 34, 92, 0.08); } /* ===== Clients — attractive animated logo wall ===== */ #clients { position: relative; overflow: hidden; background: #fff; } /* Soft decorative colour glows + dot texture behind the grid */ #clients::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 10% 18%, rgba(198, 40, 40, 0.07), transparent 42% ), radial-gradient( circle at 90% 82%, rgba(20, 34, 92, 0.09), transparent 44% ), radial-gradient(rgba(20, 34, 92, 0.06) 1.2px, transparent 1.3px); background-size: 100% 100%, 100% 100%, 24px 24px; opacity: 0.5; animation: client-bg-drift 24s ease-in-out infinite; pointer-events: none; } @keyframes client-bg-drift { 0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; } 50% { background-position: 6% 4%, 94% 96%, 12px 12px; } } #clients .container { position: relative; z-index: 1; } /* Animated gradient underline under the heading */ /* Shimmering "Clients" pill */ #clients .pill-tag { position: relative; overflow: hidden; background: linear-gradient( 100deg, rgba(178, 42, 42, 0.12), rgba(255, 211, 77, 0.18), rgba(178, 42, 42, 0.12) ); background-size: 200% 100%; animation: client-pill-shimmer 5s ease-in-out infinite; } @keyframes client-pill-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } #clients .section__head h2 { position: relative; display: block; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.3; } #clients .clients__title .c-navy { color: var(--navy); } #clients .clients__title .c-red { color: var(--red); } #clients .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } @keyframes client-underline { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Respect reduced-motion: stop the ambient/looping client animations */ @media (prefers-reduced-motion: reduce) { #clients::before, #clients .pill-tag, #clients .section__head h2::after, .client-logo::before { animation: none; } } /* Client logo grid — animated white cards, 5 per row (last row centered) */ .client-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .client-logo { position: relative; flex: 0 0 calc((100% - 4 * 22px) / 5); display: flex; align-items: center; justify-content: center; height: 118px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.06); overflow: hidden; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease; } /* Light "shine" that sweeps across the card on hover */ .client-logo::after { content: ""; position: absolute; top: 0; left: -130%; width: 70%; height: 100%; background: linear-gradient( 115deg, transparent, rgba(255, 255, 255, 0.75), transparent ); transform: skewX(-18deg); transition: left 0.65s ease; pointer-events: none; } .client-logo:hover::after { left: 135%; } .client-logo { border-color: transparent; } .client-logo:hover { transform: translateY(-8px); box-shadow: 0 24px 46px rgba(20, 34, 92, 0.18), 0 0 0 1px rgba(255, 211, 77, 0.25); } /* Rotating gradient-border ring — always visible & spinning on every card */ @property --client-ring { syntax: ""; inherits: false; initial-value: 0deg; } .client-logo::before { content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 2px; background: conic-gradient( from var(--client-ring), var(--red), #ffd34d, var(--navy), var(--red) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.85; transition: opacity 0.4s ease; animation: client-ring-spin 4s linear infinite; pointer-events: none; } .client-logo:hover::before { opacity: 1; } /* Desync the rings so they don't all spin in lock-step */ .client-logo:nth-child(3n)::before { animation-duration: 5.2s; animation-delay: -1.4s; } .client-logo:nth-child(3n + 1)::before { animation-duration: 4.6s; animation-delay: -2.6s; } .client-logo:nth-child(4n)::before { animation-duration: 6s; animation-delay: -0.8s; } @keyframes client-ring-spin { to { --client-ring: 360deg; } } .client-logo img { max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease; } .client-logo:hover img { transform: scale(1.08); } /* Placeholder card for a client whose logo image isn't available yet */ .client-logo--text span { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--navy); text-align: center; } @media (max-width: 1024px) { /* 4 per row */ .client-logo { flex-basis: calc((100% - 3 * 22px) / 4); } } @media (max-width: 700px) { .clients__panel { padding: 26px; } /* 3 per row */ .client-grid { gap: 16px; } .client-logo { flex-basis: calc((100% - 2 * 16px) / 3); height: 100px; padding: 14px 16px; } } @media (max-width: 460px) { /* 2 per row */ .client-logo { flex-basis: calc((100% - 16px) / 2); height: 88px; } } /* ===== Scroll reveal animations (progressive enhancement) ===== layout.js adds the .reveal class only when IntersectionObserver exists and the visitor has not requested reduced motion, then toggles .is-visible as each element scrolls into view. If JS is off, content is shown normally. */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ================================================================= FONT AWESOME icon sizing (icons are now elements) ================================================================= */ .btn i { font-size: 0.9em; } .tb-ico { font-size: 12px; } .topbar__social a { font-size: 15px; } .footer__social a { font-size: 16px; } .footer__contact-list li i { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 0; flex: 0 0 auto; border-radius: 10px; font-size: 14px; color: #ffd34d; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); transition: background 0.25s ease, color 0.25s ease; } .footer__contact-list li:hover i { background: linear-gradient(135deg, var(--red), #ff7a68); color: #fff; } .caret { display: inline-block; width: auto; height: auto; font-size: 11px; transition: transform 0.3s ease; } .features__ico i { font-size: 14px; } .partner i { font-size: 30px; } .cert-card__ico i { font-size: 26px; } .link-more i { font-size: 0.85em; transition: transform 0.25s ease; } .link-more:hover i { transform: translateX(4px); } /* ================================================================= HOME — Trusted Clients marquee ================================================================= */ .marquee-section .section__head { margin-bottom: 30px; } .marquee { overflow: hidden; padding: 12px 0; -webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); } .marquee__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee-scroll 45s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee img { height: 52px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: 0.62; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .marquee img:hover { filter: none; opacity: 1; transform: scale(1.08); } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 24px; } } /* Client logos in a clean, seamless scrolling carousel — three rows. Reference style: plain grayscale logos, minimal cards, middle row scrolls the opposite way. Rows loop seamlessly (layout.js duplicates each track) and pause on hover. */ .client-marquee { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; /* Wider, gentler edge fade so logos glide out instead of looking chopped. */ -webkit-mask-image: linear-gradient( to right, transparent, #000 4%, #000 96%, transparent ); mask-image: linear-gradient( to right, transparent, #000 4%, #000 96%, transparent ); } .client-marquee .marquee__track { gap: 4px; } /* Slower scroll — longer loop duration = lower speed. Linear, no pause. Row 1 → left, Row 2 → right (reverse), Row 3 → left. */ .client-marquee .marquee__track:nth-child(1) { animation-duration: 30s; } .client-marquee .marquee__track:nth-child(2) { animation-duration: 30s; animation-direction: reverse; } .client-marquee .marquee__track:nth-child(3) { animation-duration: 30s; } .client-marquee .client-logo { flex: 0 0 auto; width: 158px; height: 156px; background: transparent; border-color: transparent; box-shadow: none; } /* Clean look: drop the rotating gradient ring and the shine sweep. */ .client-marquee .client-logo::before, .client-marquee .client-logo::after { display: none; } /* Full-colour logos on white, evenly spaced (matches the reference). Override the base .marquee img grayscale/opacity so they stay in colour. */ .client-marquee .client-logo img { max-height: 150px; max-width: 148px; filter: none; opacity: 1; transition: transform 0.35s ease; } .client-marquee .client-logo--text span { font-size: 1.4rem; } .client-marquee .client-logo:hover { transform: translateY(-4px); box-shadow: none; } .client-marquee .client-logo:hover img { transform: scale(1.08); } .client-marquee .client-logo--text span { color: var(--navy); } @media (max-width: 700px) { /* Tighter tiles so the strip reads as a compact, evenly-spaced row of logos instead of a few large logos floating with big gaps. */ .client-marquee { padding: 8px 0; gap: 2px; } .client-marquee .marquee__track { gap: 2px; } .client-marquee .client-logo { width: 128px; height: 78px; padding: 8px 10px; } .client-marquee .client-logo img { max-height: 46px; max-width: 108px; } .client-marquee .client-logo--text span { font-size: 1rem; } } @media (max-width: 430px) { .client-marquee .client-logo { width: 108px; height: 68px; } .client-marquee .client-logo img { max-height: 40px; max-width: 92px; } .client-marquee .client-logo--text span { font-size: 0.9rem; } } @media (prefers-reduced-motion: reduce) { /* No scrolling — cards wrap into a centered grid instead. */ .client-marquee .client-logo { width: calc((100% - 3 * 28px) / 4); } } /* ================================================================= HOME — Careers band ================================================================= */ .eyebrow--light { color: #ffd34d; } .careers-band { padding: 44px 48px; color: #fff; background: linear-gradient(120deg, var(--navy), var(--navy-2)); border-radius: 28px; box-shadow: 0 24px 54px rgba(20, 34, 92, 0.22); } .careers-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .careers-band__text h2 { color: #fff; margin: 6px 0 8px; } .careers-band__text p { margin: 0; max-width: 620px; color: #cdd5f0; } .btn--on-navy { background: #fff; color: var(--navy); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); } .btn--on-navy:hover { background: #eef2fb; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24); } /* ================================================================= HOME — Contact form ================================================================= */ .home-contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; } .home-contact__info h3 { font-size: 1.3rem; margin: 0 0 10px; } .home-contact__info > p { color: var(--muted); margin: 0 0 24px; } .home-contact__info ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .home-contact__info li { display: flex; align-items: center; gap: 14px; color: var(--ink); } .home-contact__info li i { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; font-size: 16px; color: var(--navy); background: rgba(20, 34, 92, 0.08); border-radius: 50%; } .home-contact__info a { color: inherit; } .home-contact__info a:hover { color: var(--navy); } .home-contact__form { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); } /* ================================================================= Floating CTA (large rounded, separated from footer) ================================================================= */ .cta { padding: 64px 0; } .cta__inner { position: relative; overflow: hidden; max-width: 100%; margin: 0 auto; padding: 44px 40px; text-align: center; color: #fff; background: radial-gradient( circle at 12% 18%, rgba(255, 255, 255, 0.14), transparent 40% ), radial-gradient(circle at 88% 92%, rgba(0, 0, 0, 0.22), transparent 46%), linear-gradient(125deg, #7a1414 0%, var(--red) 46%, #e5393a 100%); border-radius: 40px; box-shadow: 0 30px 70px rgba(178, 42, 42, 0.34); } /* Subtle dot texture */ .cta__inner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( rgba(255, 255, 255, 0.09) 1.4px, transparent 1.5px ); background-size: 22px 22px; opacity: 0.6; pointer-events: none; } /* Animated light sheen sweeping across */ .cta__inner::after { content: ""; position: absolute; top: -60%; left: -40%; width: 45%; height: 220%; background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, 0.16), transparent ); transform: rotate(8deg); animation: cta-sheen 6.5s ease-in-out infinite; pointer-events: none; } @keyframes cta-sheen { 0% { left: -45%; } 55%, 100% { left: 130%; } } /* Keep content above the decorative layers */ .cta__eyebrow, .cta__inner h2, .cta__sub, .cta__inner .btn { position: relative; z-index: 1; } .cta__eyebrow { display: inline-block; margin: 0 0 4px; padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; } .cta__inner h2 { color: #fff; margin: 12px 0 8px; font-size: clamp(1.6rem, 3.2vw, 2.3rem); } .cta__sub { margin: 0 auto 28px; max-width: 620px; color: #ffe3e3; font-size: 1.06rem; } @media (prefers-reduced-motion: reduce) { .cta__inner::after { animation: none; } } /* ---- Clients page — logo grid ---- */ .logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: center; } .logo-grid img { width: 100%; height: 66px; object-fit: contain; filter: grayscale(1); opacity: 0.72; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .logo-grid img:hover { filter: none; opacity: 1; transform: scale(1.06); } .breadcrumb i { margin: 0 4px; font-size: 0.75em; } /* ================================================================= ABOUT US PAGE ================================================================= */ .page-hero--about, .page-hero--partners, .page-hero--careers, .page-hero--certs, .page-hero--contact { padding: 84px 0; background: linear-gradient(120deg, rgba(11, 21, 51, 0.88), rgba(20, 34, 92, 0.8)), url("../assets/stock/power-lines.jpg") center / cover no-repeat; } .breadcrumb--hero { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #dfe6f7; font-size: 0.85rem; font-weight: 600; } .breadcrumb--hero a { color: #fff; } .breadcrumb--hero a:hover { color: #ffd34d; } .breadcrumb--hero i { font-size: 0.7em; opacity: 0.7; } /* ---- Who We Are + Videos (combined) ---- */ .whoweare__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 54px; align-items: center; } .whoweare__text h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); } .whoweare__text p { margin: 0 0 18px; color: var(--muted); font-size: 1.02rem; } .whoweare__text .btn { margin-top: 6px; } /* ===== Who We Are — refreshed design ===== */ /* Eyebrow with a leading accent dash */ .whoweare__text .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .whoweare__text .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--red), #ffd34d); } /* Gradient underline accent below the heading */ .whoweare__text h2 { position: relative; padding-bottom: 18px; margin-bottom: 6px; } .whoweare__text h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d); } /* Framed photo with decorative accent shapes behind */ .whoweare__videos { position: relative; min-width: 0; } .whoweare__text { min-width: 0; } .whoweare .video-card, .whoweare .video-gallery { max-width: 100%; } .whoweare__videos::before { content: ""; position: absolute; top: -18px; right: -18px; width: 130px; height: 130px; border-radius: 26px; background: linear-gradient(135deg, var(--red), #ffd34d); opacity: 0.16; z-index: 0; } .whoweare__videos::after { content: ""; position: absolute; bottom: -20px; left: -20px; width: 116px; height: 116px; background-image: radial-gradient( rgba(20, 34, 92, 0.26) 2px, transparent 2.4px ); background-size: 16px 16px; z-index: 0; } .whoweare__videos .video-gallery { position: relative; z-index: 1; } .whoweare .video-card--featured { border: 6px solid #fff; box-shadow: 0 30px 60px rgba(20, 34, 92, 0.2); } .video-gallery { display: grid; gap: 16px; } .video-gallery__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .video-card { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; border-radius: 20px; overflow: hidden; background: #0b1533; box-shadow: 0 16px 40px rgba(20, 34, 92, 0.16); aspect-ratio: 16 / 9; } .video-card--featured { aspect-ratio: 16 / 8.2; border-radius: 24px; } .video-card video, .video-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .video-card:hover video, .video-card:hover img { transform: scale(1.06); } .video-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(11, 21, 51, 0.45), rgba(11, 21, 51, 0.05) ); transition: background 0.3s ease; } .video-card:hover::after { background: linear-gradient( to top, rgba(11, 21, 51, 0.55), rgba(11, 21, 51, 0.12) ); } .video-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--red); background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); transition: transform 0.3s ease, background 0.3s ease; } .video-card--featured .video-card__play { width: 76px; height: 76px; } .video-card__play i { margin-left: 3px; font-size: 20px; } .video-card--featured .video-card__play i { font-size: 26px; } .video-card:hover .video-card__play { transform: translate(-50%, -50%) scale(1.1); background: #fff; } /* ---- Video lightbox ---- */ .video-modal { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 24px; background: rgba(6, 12, 30, 0.82); } .video-modal.is-open { display: grid; } .video-modal__inner { position: relative; width: min(960px, 100%); } .video-modal__inner video { display: block; width: 100%; max-height: 82vh; background: #000; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .video-modal__close { position: absolute; top: -18px; right: -18px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; color: var(--navy); background: #fff; font-size: 18px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } .video-modal__close:hover { transform: scale(1.08); background: #fff5f5; color: var(--red); } /* ---- Company statistics cards ---- */ .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat-card { text-align: center; padding: 34px 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } .stat-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(20, 34, 92, 0.14); } .stat-card__ico { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; border-radius: 16px; color: var(--navy); background: linear-gradient( 135deg, rgba(178, 42, 42, 0.12), rgba(20, 34, 92, 0.12) ); } .stat-card__ico i { font-size: 26px; } .stat-card__val { margin: 0; color: var(--navy); font-weight: 800; line-height: 1; font-size: clamp(1.9rem, 3vw, 2.6rem); } .stat-card__val .stat__plus { color: var(--red); font-size: 0.7em; vertical-align: top; } .stat-card__label { margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; } /* ---- Journey timeline (horizontal scroll) ---- */ .timeline { overflow-x: auto; padding: 8px 0 26px; cursor: grab; scrollbar-width: thin; scrollbar-color: rgba(20, 34, 92, 0.3) transparent; } .timeline.is-drag { cursor: grabbing; } .timeline::-webkit-scrollbar { height: 8px; } .timeline::-webkit-scrollbar-thumb { background: rgba(20, 34, 92, 0.25); border-radius: 999px; } .timeline::-webkit-scrollbar-track { background: transparent; } .timeline__track { position: relative; display: flex; gap: 28px; width: max-content; padding: 50px max(20px, calc((100vw - var(--wrap)) / 2 + 20px)) 12px; } .timeline__track::before { content: ""; position: absolute; top: 42px; left: 0; right: 0; height: 3px; background: linear-gradient( to right, transparent, var(--line) 4%, var(--line) 96%, transparent ); } .milestone { position: relative; flex: 0 0 280px; width: 280px; padding: 32px 24px 24px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .milestone:hover { transform: translateY(-6px); border-color: rgba(20, 34, 92, 0.25); box-shadow: 0 22px 46px rgba(20, 34, 92, 0.16); } .milestone__dot { position: absolute; top: -16px; left: 28px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(178, 42, 42, 0.25); } .milestone__year { display: inline-block; margin-bottom: 8px; color: var(--red); font-weight: 800; font-size: 1.2rem; } .milestone h3 { margin: 0 0 8px; font-size: 1.08rem; } .milestone p { margin: 0; color: var(--muted); font-size: 0.93rem; } /* Award icon (Font Awesome) */ .award-card__ico i { font-size: 26px; } /* ---- Awards & Honors — image gallery ---- */ .award-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .award-item { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.28s ease, box-shadow 0.28s ease; } .award-item:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(20, 34, 92, 0.16); } .award-item img { display: block; width: 100%; height: 300px; object-fit: contain; padding: 20px; background: #f5f7fb; transition: transform 0.4s ease; } .award-item:hover img { transform: scale(1.04); } .award-item figcaption { padding: 16px 18px 20px; text-align: center; font-weight: 600; color: var(--navy); font-size: 0.98rem; } @media (max-width: 760px) { .award-gallery { grid-template-columns: 1fr; } } /* ================================================================= CLIENTS PAGE ================================================================= */ .page-hero--clients { padding: 84px 0; background: linear-gradient(120deg, rgba(11, 21, 51, 0.9), rgba(20, 34, 92, 0.82)), url("../assets/stock/energy-panel.jpg") center / cover no-repeat; } .clients-heading { max-width: 820px; } .heading-divider { display: block; width: 66px; height: 3px; margin: 14px auto 18px; background: var(--red); border-radius: 999px; } /* ---- Category filter tabs ---- */ .client-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1000px; margin: 0 auto 52px; } .chip { padding: 11px 24px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--muted); box-shadow: 0 2px 8px rgba(20, 34, 92, 0.04); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .chip:hover { border-color: rgba(20, 34, 92, 0.35); color: var(--navy); transform: translateY(-2px); } .chip.is-active { color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-2)); border-color: transparent; box-shadow: 0 10px 24px rgba(20, 34, 92, 0.28); } /* ---- Client showcase ---- */ .client-groups { max-width: 1160px; margin: 0 auto; transition: opacity 0.18s ease, transform 0.18s ease; } .client-groups.is-switching { opacity: 0; transform: translateY(12px); } /* premium category header */ .cat-header { display: flex; align-items: center; gap: 18px; margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .cat-header__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; flex: 0 0 auto; border-radius: 16px; color: #fff; font-size: 24px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: 0 10px 24px rgba(20, 34, 92, 0.22); } .cat-header__text { flex: 1 1 auto; } .cat-header__title { margin: 0; color: var(--navy); font-size: 1.5rem; line-height: 1.15; } .cat-header__sub { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; } .cat-header__count { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 86px; padding: 10px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(20, 34, 92, 0.06); } .cat-header__count-num { color: var(--red); font-size: 1.6rem; font-weight: 800; line-height: 1; } .cat-header__count-label { margin-top: 3px; color: var(--muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* premium client cards */ .client-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .client-card { position: relative; display: flex; align-items: center; min-height: 68px; padding: 16px 22px 16px 26px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 16px rgba(20, 34, 92, 0.05); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .client-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: center; transition: transform 0.28s ease; } .client-card__name { color: var(--ink); font-size: 0.92rem; font-weight: 600; line-height: 1.35; } .client-card:hover { transform: translateY(-4px); border-color: rgba(20, 34, 92, 0.22); box-shadow: 0 18px 38px rgba(20, 34, 92, 0.13); } .client-card:hover::after { transform: scaleY(1); } @media (max-width: 640px) { .cat-header { flex-wrap: wrap; } .cat-header__count { order: 3; } } /* ================================================================= BUSINESS PARTNERS PAGE ================================================================= */ .partner-split { padding: 66px 0; } .partner-split__grid { display: grid; grid-template-columns: 1fr 0.95fr; gap: 52px; align-items: center; } .crumb { margin-bottom: 16px; color: var(--muted); font-size: 0.85rem; font-weight: 600; } .crumb a { color: var(--navy); } .crumb a:hover { color: var(--red); } .crumb i { margin: 0 6px; font-size: 0.7em; opacity: 0.6; } .partner-split__content h2 { margin: 0 0 16px; font-size: clamp(1.7rem, 2.8vw, 2.2rem); } .partner-split__lead { margin: 0 0 14px; max-width: 580px; color: var(--muted); font-size: 1.05rem; } .partner-benefits__label { margin: 26px 0 14px; color: var(--navy); font-weight: 700; font-size: 0.98rem; } .partner-benefits { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 28px; } .partner-benefits li { display: flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 600; font-size: 0.95rem; } .partner-benefits i { flex: 0 0 auto; color: var(--green); font-size: 13px; } .partner-split__highlights { display: grid; gap: 14px; margin-bottom: 24px; } .partner-highlight { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); } .partner-highlight strong { display: block; margin-bottom: 8px; color: var(--navy); } .partner-highlight p { margin: 0; color: var(--muted); line-height: 1.7; } /* ===== Together We Win — refreshed design ===== */ /* Eyebrow with a leading accent dash */ .partner-split__content .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .partner-split__content .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--red), #ffd34d); } /* Gradient underline below the heading */ .partner-split__content h2 { position: relative; padding-bottom: 16px; } .partner-split__content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d); } /* Highlight cards — left gradient accent + hover lift */ .partner-highlight { position: relative; overflow: hidden; padding-left: 24px; transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .partner-highlight::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--red), #ffd34d); transform: scaleY(0); transform-origin: top; transition: transform 0.35s ease; } .partner-highlight:hover::before { transform: scaleY(1); } .partner-highlight:hover { transform: translateY(-4px); border-color: rgba(198, 40, 40, 0.25); box-shadow: 0 20px 42px rgba(20, 34, 92, 0.13); } /* Benefit checks as circular badges */ .partner-benefits i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(34, 139, 58, 0.14); color: var(--green); font-size: 11px; } .partner-split__actions { display: flex; gap: 14px; flex-wrap: wrap; } .partner-split__media { position: relative; padding: 0 16px 16px 0; } /* Solid navy block offset behind the photo (peeks out bottom-right) */ .partner-split__media::before { content: ""; position: absolute; z-index: 0; inset: 26px -14px -14px 26px; border-radius: 22px; background: linear-gradient(140deg, #14225c 0%, #24336e 100%); } /* Thin gold accent line at the top-left corner */ .partner-split__media::after { content: ""; position: absolute; z-index: 2; top: -6px; left: -6px; width: 66px; height: 66px; border-top: 4px solid #ffd34d; border-left: 4px solid #ffd34d; border-top-left-radius: 20px; } /* Photo on top */ .partner-split__media img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 26px 54px rgba(20, 34, 92, 0.22); } /* ===== Wanted Business Partners — horizontal card ===== */ .partner-card { margin-top: 40px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(20, 34, 92, 0.12); } .partner-card__head { display: flex; align-items: center; gap: 22px; padding: 22px 30px; background: linear-gradient(120deg, #ffd34d 0%, #f6b301 100%); } .partner-card__logo { height: 56px; width: auto; flex: 0 0 auto; padding: 8px 12px; background: #fff; border-radius: 12px; box-shadow: 0 8px 18px rgba(20, 34, 92, 0.12); } .partner-card__badge { display: inline-block; font-size: 1.35rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; color: var(--navy); } .partner-card__tag { margin: 5px 0 0; color: #6a5410; font-weight: 600; font-size: 0.95rem; } .partner-card__body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; padding: 28px 30px 30px; } .partner-card__benefits h4, .partner-card__contact h4 { position: relative; margin: 0 0 16px; padding-bottom: 9px; color: var(--navy); font-size: 1.05rem; } .partner-card__benefits h4::after, .partner-card__contact h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d); } .partner-card__benefits ul, .partner-card__contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .partner-card__benefits li { position: relative; padding-left: 26px; color: var(--ink); line-height: 1.55; } .partner-card__benefits li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 3px; color: var(--green); font-size: 0.82rem; } .partner-card__contact li { display: flex; align-items: center; gap: 12px; color: var(--ink); } .partner-card__contact li i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: rgba(198, 40, 40, 0.1); color: var(--red); font-size: 14px; } .partner-card__contact a { color: var(--ink); word-break: break-word; transition: color 0.2s ease; } .partner-card__contact a:hover { color: var(--red); } @media (max-width: 720px) { .partner-card__head { flex-direction: column; text-align: center; } .partner-card__body { grid-template-columns: 1fr; gap: 24px; } } /* CTA with two buttons */ .cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ================================================================= CAREERS PAGE — job accordion + application form ================================================================= */ /* Animated gradient underline under the Careers heading */ #careers .section__head h2 { position: relative; display: block; } #careers .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } .job-list { max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; } .job { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(20, 34, 92, 0.06); transition: box-shadow 0.25s ease, border-color 0.25s ease; } .job:hover { transform: translateY(-3px); border-color: rgba(198, 40, 40, 0.28); box-shadow: 0 20px 44px rgba(20, 34, 92, 0.12); } .job.is-open { border-color: rgba(198, 40, 40, 0.35); box-shadow: 0 18px 44px rgba(20, 34, 92, 0.14); } /* Left gradient accent bar — always visible, gently animated colour */ .job::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--red), #ffd34d, var(--red)); background-size: 100% 220%; animation: job-accent 4s ease-in-out infinite; z-index: 1; } @keyframes job-accent { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } } @media (prefers-reduced-motion: reduce) { .job::before, #careers .section__head h2::after { animation: none; } } .job__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 22px 26px; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; } .job__summary { min-width: 0; } .job__title { display: block; margin-bottom: 12px; color: var(--navy); font-size: 1.2rem; font-weight: 700; line-height: 1.25; } .job__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; } .job__meta-item { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; } .job__meta-item i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(20, 34, 92, 0.07); color: var(--red); font-size: 12px; } .job__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 999px; color: #fff; background: var(--navy); font-weight: 600; font-size: 0.9rem; white-space: nowrap; transition: background 0.25s ease, box-shadow 0.25s ease; } .job__head:hover .job__cta { background: var(--navy-2); box-shadow: 0 10px 22px rgba(20, 34, 92, 0.22); } .job.is-open .job__cta { background: linear-gradient(135deg, #c62828, #e53935); } .job__cta i { font-size: 12px; transition: transform 0.3s ease; } .job.is-open .job__cta i { transform: rotate(180deg); } .job__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .job.is-open .job__panel { grid-template-rows: 1fr; } .job__panel-inner { overflow: hidden; } .job__body { padding: 26px; border-top: 1px solid var(--line); } .job__subhead { margin: 0 0 14px; color: var(--navy); font-size: 1.05rem; font-weight: 700; } .job__desc { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .job__desc li { position: relative; padding-left: 24px; color: var(--muted); font-size: 0.95rem; line-height: 1.55; } .job__desc li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: 0.6; } .job__divider { margin: 26px 0; border: 0; border-top: 1px solid var(--line); } /* ---- Job list: responsive ---- */ @media (max-width: 700px) { .job__head { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; } .job__cta { width: 100%; justify-content: center; } .job__body { padding: 20px; } } @media (max-width: 420px) { .job__title { font-size: 1.08rem; } .job__meta { flex-direction: column; gap: 8px; } } /* Application form */ .job-form .opt { color: var(--muted); font-weight: 400; font-size: 0.85em; } .job-form input[type="file"] { width: 100%; padding: 16px 18px; border: 1.5px dashed rgba(20, 34, 92, 0.28); border-radius: 12px; background: var(--bg-alt); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .job-form input[type="file"]:hover { border-color: var(--navy); background: #fff; } .job-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 16px; border: 0; border-radius: 999px; color: #fff; background: var(--navy); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .job-form input[type="file"]::file-selector-button:hover { background: var(--navy-2); } .job-form__check { display: flex; align-items: flex-start; gap: 11px; margin: 6px 0 22px; color: var(--muted); font-size: 0.92rem; cursor: pointer; } .job-form__check input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--navy); } .job-form__note { display: none; margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; background: #eefaf0; border: 1px solid #bfe6c8; color: #256b38; font-size: 0.9rem; } /* ---- Open Application (expandable callout) ---- */ .open-app { max-width: 1180px; margin: 30px auto 0; overflow: hidden; background: linear-gradient(135deg, #f6f8fc, #eef2f9); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 24px rgba(20, 34, 92, 0.05); transition: box-shadow 0.25s ease; } .open-app.is-open { box-shadow: 0 18px 44px rgba(20, 34, 92, 0.1); } .open-callout { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 28px 36px; } .open-callout__text h3 { margin: 0 0 5px; color: var(--navy); font-size: 1.2rem; } .open-callout__text p { margin: 0; color: var(--muted); font-size: 0.98rem; } .open-callout .btn { flex: 0 0 auto; } .open-app__toggle i { font-size: 12px; transition: transform 0.3s ease; } .open-app.is-open .open-app__toggle i { transform: rotate(180deg); } .open-app__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .open-app.is-open .open-app__panel { grid-template-rows: 1fr; } .open-app__panel-inner { overflow: hidden; } .open-app__body { padding: 26px 36px 34px; border-top: 1px solid var(--line); } @media (max-width: 700px) { .open-callout { flex-direction: column; align-items: flex-start; padding: 22px 20px; gap: 18px; } .open-callout .btn { width: 100%; justify-content: center; } .open-app__body { padding: 22px 20px 28px; } } .job-form__success { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 12px; background: #eefaf0; border: 1px solid #bfe6c8; color: #256b38; } .job-form__success i { flex: 0 0 auto; font-size: 26px; color: #2e9e4f; } .job-form__success strong { color: #1f7a37; } /* ================================================================= CERTIFICATIONS & AWARDS PAGE — certification logo wall ================================================================= */ .cert-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } /* Sub-headings used on the home "Certifications & Awards" preview */ .home-cert-sub { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; color: var(--navy); font-size: 1.2rem; font-weight: 700; margin: 46px 0 26px; } /* Decorative gradient lines flanking each sub-heading */ .home-cert-sub::before, .home-cert-sub::after { content: ""; height: 2px; width: 54px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--green)); } .home-cert-sub::after { background: linear-gradient(90deg, var(--green), transparent); } .home-cert-sub:first-of-type { margin-top: 0; } /* ===== Certifications & Awards — refreshed design ===== */ #certifications .eyebrow { color: var(--green); } #certifications .section__head h2 { position: relative; display: block; } #certifications .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--green), #9be7ac, var(--green)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } #certifications .cert-logo { position: relative; overflow: hidden; min-height: 250px; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(20, 34, 92, 0.06); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } #certifications .cert-logo:hover { transform: translateY(-8px); border-color: rgba(46, 158, 79, 0.32); box-shadow: 0 26px 50px rgba(20, 34, 92, 0.16); } /* Logo area fills the space above the caption (equal on every card) */ #certifications .cert-logo__img { flex: 1 1 auto; height: auto; margin: 0; padding: 24px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } #certifications .cert-logo__img img { width: auto; max-width: 100%; height: auto; max-height: 92px; transition: transform 0.35s ease; } #certifications .cert-logo:hover .cert-logo__img img { transform: scale(1.07); } /* Red gradient footer band with a fixed height (uniform across cards) */ #certifications .cert-logo figcaption { margin: 0; min-height: 64px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--green), #58c878); border-top: 0; color: #fff; } .cert-logo { flex: 0 0 calc(25% - 17px); margin: 0; display: flex; flex-direction: column; padding: 30px 24px 24px; text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(20, 34, 92, 0.05); transition: transform 0.25s ease, box-shadow 0.25s ease; } .cert-logo:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20, 34, 92, 0.12); } .cert-logo.is-hidden { display: none; } .cert-logo__img { height: 100px; margin-bottom: 18px; } .cert-logo__img img { display: block; width: 100%; height: 100%; object-fit: contain; } .cert-logo figcaption { margin-top: auto; color: var(--navy); font-weight: 600; font-size: 0.88rem; line-height: 1.4; } @media (max-width: 980px) { .cert-logo { flex-basis: calc(33.333% - 15px); } } @media (max-width: 640px) { .cert-logo { flex-basis: calc(50% - 11px); } } /* ---- Awards: clean card grid (image + always-visible title & subtitle) ---- */ .awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* Image is a separate section (the hero); all padding lives in the content. */ .award-card { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(20, 34, 92, 0.07); padding: 0; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .award-card:hover { transform: translateY(-6px); border-color: rgba(20, 34, 92, 0.18); box-shadow: 0 26px 56px rgba(20, 34, 92, 0.16); } .award-card.is-hidden { display: none; } /* Image — full-bleed hero, cover, consistent crop; only top corners rounded. */ .award-card__image { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .award-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; } .award-card:hover .award-card__image img { transform: scale(1.05); } /* Content — the only padded area */ .award-card__content { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; } .award-card__eyebrow { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green); font-weight: 700; } .award-card__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--navy); line-height: 1.35; transition: color 0.25s ease; } .award-card:hover .award-card__title { color: var(--green); } .award-card__subtitle { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .award-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 4px; } .award-card__year { font-weight: 600; font-size: 0.9rem; color: var(--navy); } .award-card__link { display: inline-flex; align-items: center; color: var(--green); font-weight: 600; font-size: 0.9rem; white-space: nowrap; transition: transform 0.25s ease; } .award-card:hover .award-card__link { transform: translateX(4px); } .awards-more { display: flex; justify-content: center; margin-top: 44px; } /* ===== Awards & Achievements — refreshed gold-themed cards ===== */ .awards-grid .award-card { position: relative; } .awards-grid .award-card__image { position: relative; } /* Gradient wash over the photo */ .awards-grid .award-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(11, 21, 51, 0.4)); opacity: 0.85; transition: opacity 0.35s ease; pointer-events: none; } .awards-grid .award-card:hover .award-card__image::after { opacity: 1; } /* Gold trophy badge on the photo (continuous pulse) */ .awards-grid .award-card__image::before { content: "\f091"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 14px; left: 14px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; animation: award-badge-pulse 3s ease-in-out infinite; background: linear-gradient(135deg, #f6c343, #e0940a); color: #fff; font-size: 1.05rem; box-shadow: 0 8px 18px rgba(224, 148, 10, 0.42); } @keyframes award-badge-pulse { 0%, 100% { box-shadow: 0 8px 18px rgba(224, 148, 10, 0.42); } 50% { box-shadow: 0 8px 26px rgba(224, 148, 10, 0.7); } } /* Respect reduced-motion for the always-on icon animations */ @media (prefers-reduced-motion: reduce) { .float-action, .float-action i, .footer__social a i, .contact-line__ico i, .awards-grid .award-card__image::before { animation: none; } } /* Gold gradient top accent that draws in on hover */ .awards-grid .award-card__content { position: relative; } .awards-grid .award-card__content::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f6c343, var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .awards-grid .award-card:hover .award-card__content::before { transform: scaleX(1); } /* Year as a gold pill in the footer */ .awards-grid .award-card__year { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(224, 148, 10, 0.12); color: #b8860b; } .awards-grid .award-card__year::before { content: "\f559"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.78rem; } @media (max-width: 900px) { .awards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .awards-grid { grid-template-columns: 1fr; } } /* ================================================================= AWARD DETAIL PAGE (award.html) ================================================================= */ .award-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } .award-intro__body h2 { margin: 0 0 14px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); } .award-intro__year { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 6px 16px; border-radius: 999px; background: var(--bg-alt); color: var(--navy); font-weight: 700; font-size: 0.9rem; } .award-intro__lead { margin: 0 0 26px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; } .award-intro__media img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 26px 60px rgba(20, 34, 92, 0.2); } /* Award gallery — uniform grid; every image is shown in full (no cropping) */ .award-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .award-photo { margin: 0; display: block; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-alt); box-shadow: 0 12px 32px rgba(20, 34, 92, 0.1); cursor: zoom-in; aspect-ratio: 4 / 3; transition: transform 0.28s ease, box-shadow 0.28s ease; } .award-photo:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(20, 34, 92, 0.18); } .award-photo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.5s ease; } .award-photo:hover img { transform: scale(1.03); } /* About this award — readable, left-aligned text column */ .award-title { margin: 4px 0 14px; font-size: clamp(1.7rem, 3vw, 2.3rem); } .award-lead { margin: 16px 0 18px; color: var(--navy); font-size: 1.18rem; font-weight: 600; line-height: 1.6; } .award-about { margin: 0; color: var(--ink); font-size: 1.06rem; line-height: 1.9; text-align: left; } /* ================================================================= AWARD DETAIL — premium image showcase (image left, details right) ================================================================= */ .award-hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); /* ~55 / 45 */ gap: 52px; align-items: center; } .award-hero__content h2 { margin: 8px 0 14px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.25; color: var(--navy); } .award-hero__gallery { position: relative; } .award-hero__gallery::before, .award-hero__gallery::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(14px); pointer-events: none; } .award-hero__gallery::before { top: -38px; right: -30px; width: 230px; height: 230px; background: radial-gradient(circle, rgba(20, 34, 92, 0.14), transparent 70%); } .award-hero__gallery::after { bottom: -34px; left: -34px; width: 210px; height: 210px; background: radial-gradient( circle, rgba(255, 211, 77, 0.22), transparent 70% ); } .award-figure { position: relative; z-index: 1; margin: 0; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 70px rgba(20, 34, 92, 0.18); cursor: zoom-in; transition: transform 0.4s ease, box-shadow 0.4s ease; } .award-figure:hover { transform: translateY(-5px); box-shadow: 0 42px 90px rgba(20, 34, 92, 0.24); } .award-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s ease, opacity 0.25s ease; } .award-figure:hover img { transform: scale(1.05); } .award-figure__badge { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; box-shadow: 0 10px 24px rgba(20, 34, 92, 0.32); pointer-events: none; } .award-figure__badge i { color: #ffd34d; } .award-figure__overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: linear-gradient( to top, rgba(11, 31, 77, 0.55), rgba(11, 31, 77, 0.12) ); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .award-figure:hover .award-figure__overlay { opacity: 1; } .award-figure__view { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--navy); font-weight: 700; font-size: 0.9rem; transform: translateY(10px); transition: transform 0.35s ease; } .award-figure:hover .award-figure__view { transform: translateY(0); } .award-thumbs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .award-thumb { width: 92px; height: 70px; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .award-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .award-thumb:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20, 34, 92, 0.16); } .award-thumb:hover img { transform: scale(1.06); } .award-thumb.is-active { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(20, 34, 92, 0.15); } @media (max-width: 992px) { .award-hero { grid-template-columns: 1fr; gap: 34px; } .award-hero__gallery { width: 100%; max-width: 640px; margin: 0 auto; } .award-hero__gallery::before, .award-hero__gallery::after { display: none; } } @media (max-width: 560px) { .award-figure { border-radius: 18px; } .award-figure__badge { top: 12px; left: 12px; padding: 7px 13px; font-size: 0.76rem; } .award-thumb { width: 74px; height: 56px; } } /* Related awards */ .related-awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .related-award { display: block; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } .related-award:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(20, 34, 92, 0.14); } .related-award__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; } .related-award__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .related-award:hover .related-award__img img { transform: scale(1.05); } .related-award__name { display: block; padding: 16px 18px; color: var(--navy); font-weight: 600; text-align: center; } /* Image lightbox */ .img-modal { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 30px; background: rgba(6, 12, 30, 0.9); } .img-modal.is-open { display: grid; } .img-modal img { display: block; max-width: min(1100px, 100%); max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } .img-modal__close { position: absolute; top: 26px; right: 26px; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; color: var(--navy); background: #fff; font-size: 19px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } .img-modal__close:hover { transform: scale(1.08); background: #fff5f5; color: var(--red); } @media (max-width: 900px) { .award-intro { grid-template-columns: 1fr; gap: 34px; } .related-awards { grid-template-columns: 1fr; } .award-photos--two { grid-template-columns: 1fr; } .award-photos--masonry { columns: 1; } } /* ================================================================= CONTACT PAGE — premium redesign ================================================================= */ .contact__intro { margin: 0 0 8px; color: var(--muted); } /* Left — contact detail lines (label + value + subtext) */ .contact-lines { display: grid; gap: 4px; margin: 18px 0 18px; } .contact-line { display: flex; align-items: flex-start; gap: 16px; } .contact-line__ico { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; font-size: 17px; background: linear-gradient(135deg, var(--red), #ff7a68); box-shadow: 0 10px 20px rgba(198, 40, 40, 0.26); transition: transform 0.25s ease, box-shadow 0.25s ease; } .contact-line:hover .contact-line__ico { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 26px rgba(198, 40, 40, 0.4); } /* Continuous gentle bob on contact icons (staggered) */ .contact-line__ico i { animation: fs-bob 3s ease-in-out infinite; } .contact-line:nth-child(2) .contact-line__ico i { animation-delay: 0.5s; } .contact-line:nth-child(3) .contact-line__ico i { animation-delay: 1s; } .contact-line:nth-child(4) .contact-line__ico i { animation-delay: 1.5s; } .contact-line__body { min-width: 0; } .contact-line__label { margin: 0 0 3px; color: var(--red); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .contact-line__value { margin: 0 0 3px; color: var(--ink); font-size: 1.06rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .contact-line__value a { color: inherit; } .contact-line__value a:hover { color: var(--navy); } .contact-line__sub { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; } /* Why Contact Us — highlighted promise card */ .contact-promise { margin-top: 4px; padding: 18px 22px; border-radius: 16px; background: rgba(178, 42, 42, 0.06); border: 1px solid rgba(178, 42, 42, 0.14); } .contact-promise h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--red); font-size: 1.05rem; } .contact-promise h3 i { color: var(--red); } .contact-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .contact-trust li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; font-size: 0.92rem; } .contact-trust li i { flex: 0 0 auto; color: var(--green); font-size: 13px; } /* Right — enquiry card */ .enquiry { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 36px rgba(20, 34, 92, 0.08); } .tabs { display: flex; gap: 8px; margin-bottom: 18px; } .tab { flex: 1; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .tab.is-active { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: 0 8px 20px rgba(20, 34, 92, 0.24); } .tab:hover:not(.is-active) { color: var(--navy); border-color: var(--navy); transform: translateY(-2px); } .contact__form { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* Icon fields */ .field--icon { margin-bottom: 20px; } .field--icon .field__control { position: relative; } .field--icon .field__control > i { position: absolute; left: 16px; top: 22px; transform: translateY(-50%); z-index: 1; color: var(--muted); font-size: 15px; pointer-events: none; transition: color 0.2s ease; } .field--textarea .field__control > i { top: 18px; transform: none; } .field--icon .field__control:focus-within > i { color: var(--navy); } .field--icon input, .field--icon select, .field--icon textarea { width: 100%; height: 46px; padding: 0 14px 0 44px; border: 1.5px solid var(--line); border-radius: 14px; background: #fafbfc; font: inherit; color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .field--icon textarea { height: auto; min-height: 110px; padding: 12px 14px 12px 44px; resize: vertical; } .field--icon input:hover, .field--icon select:hover, .field--icon textarea:hover { border-color: rgba(20, 34, 92, 0.35); } .field--icon input:focus, .field--icon select:focus, .field--icon textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(20, 34, 92, 0.12); } .field--icon input::placeholder, .field--icon textarea::placeholder { color: #9aa6b8; } /* Trust message + submit */ .form-trust { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; padding: 12px 16px; border-radius: 10px; background: #eef7f0; color: #2c6b3f; font-size: 0.88rem; } .form-trust i { flex: 0 0 auto; color: var(--green); } .enquiry__submit { width: 100%; height: 48px; gap: 8px; padding: 0 12px; border-radius: 12px; } .contact__footer-nav { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); } .contact__footer-nav p { margin: 0 0 16px; color: var(--muted); font-size: 0.96rem; } .contact__action-links { display: flex; flex-wrap: wrap; gap: 14px; } /* Map */ /* Contact page — heading accents */ .contact__info h2 { position: relative; padding-bottom: 14px; } .contact__info h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d); } body[data-page="contact"] .section__head h2 { position: relative; display: block; } body[data-page="contact"] .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } .map-card { overflow: hidden; border: 5px solid #fff; outline: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px rgba(20, 34, 92, 0.16); } .map-card iframe { display: block; width: 100%; height: 360px; border: 0; } /* Office addresses grid (text) above a single Google map */ .address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 34px; } .address-card { padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 28px rgba(20, 34, 92, 0.06); } .address-card__name { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; color: var(--navy); } .address-card__name i { color: var(--red); margin-right: 8px; } .address-card__text { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.65; } @media (max-width: 720px) { .address-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .contact-cards, .contact-trust { grid-template-columns: 1fr; } } /* ---- Floating phone and WhatsApp buttons ---- */ .floating-actions { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 14px; pointer-events: none; z-index: 120; } .float-action { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 14px 30px rgba(20, 34, 92, 0.2); animation: float-pulse 2.2s ease-in-out infinite; transition: transform 0.25s ease; } .float-action--right { animation-delay: 1.1s; } @keyframes float-pulse { 0% { box-shadow: 0 14px 30px rgba(20, 34, 92, 0.2), 0 0 0 0 rgba(198, 40, 40, 0.45); } 70% { box-shadow: 0 14px 30px rgba(20, 34, 92, 0.2), 0 0 0 14px rgba(198, 40, 40, 0); } 100% { box-shadow: 0 14px 30px rgba(20, 34, 92, 0.2), 0 0 0 0 rgba(198, 40, 40, 0); } } .float-action:hover { transform: translateY(-4px) scale(1.05); } .float-action i { animation: float-icon-bob 2.2s ease-in-out infinite; } @keyframes float-icon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* Round icon-only buttons — hide the text label */ .float-action span { display: none; } @media (max-width: 820px) { .floating-actions { right: 14px; bottom: 14px; } } .float-action i { font-size: 1.25rem; } @media (max-width: 820px) { .floating-actions { justify-content: space-between; padding: 0 14px; } .float-action span { display: none; } } /* ---- About page responsive (desktop/laptop focus) ---- */ @media (max-width: 900px) { .whoweare__grid { grid-template-columns: 1fr; gap: 34px; } .stat-cards { grid-template-columns: repeat(2, 1fr); } } /* ===== Mobile polish — prevent overflow & tidy spacing ===== */ @media (max-width: 640px) { /* Decorative accent shapes use negative offsets — hide on phones so they can't push horizontal overflow or clip content. */ .whoweare__videos::before, .whoweare__videos::after, .partner-split__media::before, .partner-split__media::after, .pdp-gallery::before, .pdp-gallery::after { display: none; } /* Keep long headings inside the screen */ .whoweare__text h2, .about__body h2, .partner-split__content h2, .section__head h2, .pdp-intro__info h2 { overflow-wrap: anywhere; word-break: break-word; } /* Frames add width on tiny screens — thin them out */ .whoweare .video-card--featured, .partner-split__media img { border-width: 4px; } .partner-split__media { padding: 0; } /* ---- Smaller section heights on mobile ---- */ .section { padding: 30px 0; } .page-hero { padding: 34px 0; } .page-hero--about, .page-hero--partners, .page-hero--careers, .page-hero--certs, .page-hero--contact, .page-hero--clients { padding: 44px 0; } .stats--hero { padding: 30px 0; } .cta { padding: 34px 0; } .partner-split, .whoweare { padding: 34px 0; } .section__head { margin-bottom: 26px; } .breadcrumb--hero { margin-bottom: 12px; } } /* ================================================================= PRODUCTS — catalogue listing + detail pages ================================================================= */ /* ---- Listing cards (products.html) ---- */ .prod-listing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .prod-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 28px rgba(20, 34, 92, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .prod-card:hover { transform: translateY(-8px); border-color: rgba(20, 34, 92, 0.2); box-shadow: 0 28px 55px rgba(20, 34, 92, 0.15); } .prod-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); } .prod-card__num { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.95rem; font-weight: 700; line-height: 1; box-shadow: 0 6px 16px rgba(20, 34, 92, 0.25); } .prod-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .prod-card:hover .prod-card__media img { transform: scale(1.08); } .prod-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px 24px 26px; } .prod-card__cat { color: var(--red); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .prod-card__name { color: var(--navy); font-size: 1.08rem; font-weight: 700; line-height: 1.3; } .prod-card__desc { color: var(--muted); font-size: 0.92rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .prod-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .prod-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--bg-alt); color: var(--navy); font-size: 0.76rem; font-weight: 600; } .prod-tag i { color: var(--green); font-size: 0.72rem; } .prod-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--red); font-weight: 700; font-size: 0.9rem; } .prod-card__more i { transition: transform 0.25s ease; } .prod-card:hover .prod-card__more i { transform: translateX(5px); } /* ===== Products section — refreshed design ===== */ /* Animated gradient underline under the heading */ #products .section__head h2 { position: relative; display: block; } #products .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } /* Gradient top-bar that draws in on hover */ .prod-card { position: relative; } .prod-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--red), #ffd34d); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); z-index: 3; } .prod-card:hover::before { transform: scaleX(1); } /* Subtle gradient wash over the product image */ .prod-card__media { position: relative; } .prod-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 52%, rgba(11, 31, 77, 0.32) ); opacity: 0.7; transition: opacity 0.4s ease; pointer-events: none; } .prod-card:hover .prod-card__media::after { opacity: 0.95; } /* Category as a pill badge */ .prod-card__cat { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(198, 40, 40, 0.1); } /* "Read More" reads as a soft pill on hover */ .prod-card__more { border-radius: 999px; padding: 8px 4px; transition: background 0.3s ease, padding 0.3s ease; } .prod-card:hover .prod-card__more { background: rgba(198, 40, 40, 0.08); padding: 8px 14px; } /* ===== Product cards — extra polish ===== */ /* Category as a floating pill on the image */ .prod-card__cat { position: absolute; top: 14px; left: 14px; z-index: 3; align-self: auto; padding: 6px 13px; background: linear-gradient(135deg, var(--red), #ff7a68); color: #fff; box-shadow: 0 8px 18px rgba(198, 40, 40, 0.32); } /* Soft gradient body */ .prod-card__body { background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%); } .prod-card__name { font-size: 1.15rem; } /* Read More — pill that fills red on hover */ .prod-card__more { align-self: flex-start; padding: 9px 16px; background: rgba(198, 40, 40, 0.08); transition: background 0.3s ease, color 0.3s ease; } .prod-card:hover .prod-card__more { background: linear-gradient(135deg, var(--red), #ff7a68); color: #fff; padding: 9px 16px; } .prod-card:hover .prod-card__more i { transform: translateX(4px); } .prod-card:hover { border-color: rgba(198, 40, 40, 0.28); } /* ---- Blog listing (Videos & Blogs) ---- */ .blog-listing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 28px rgba(20, 34, 92, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .blog-card:hover { transform: translateY(-8px); border-color: rgba(20, 34, 92, 0.2); box-shadow: 0 28px 55px rgba(20, 34, 92, 0.15); } .blog-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--bg-alt); color: var(--navy); font-size: 2.4rem; } .blog-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 24px 24px 26px; } .blog-card__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; } .blog-card__meta span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.8rem; font-weight: 600; } .blog-card__meta i { color: var(--red); font-size: 0.78rem; } .blog-card__title { color: var(--navy); font-size: 1.2rem; font-weight: 700; line-height: 1.3; } .blog-card__title a { color: inherit; } .blog-card__excerpt { color: var(--muted); font-size: 0.92rem; line-height: 1.6; } .blog-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--red); font-weight: 700; font-size: 0.9rem; } .blog-card__more i { transition: transform 0.25s ease; } .blog-card:hover .blog-card__more i { transform: translateX(5px); } .blog-card--soon { opacity: 0.72; } .blog-card--soon .blog-card__media { color: var(--muted); } .blog-card__badge { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--muted); font-weight: 700; font-size: 0.9rem; } @media (max-width: 980px) { .blog-listing { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .blog-listing { grid-template-columns: 1fr; } } /* ---- Blog / article detail page ---- */ .article-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--red); font-weight: 700; font-size: 0.92rem; } .article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px 0 0; color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 0.92rem; } .article-meta span { display: inline-flex; align-items: center; gap: 8px; } .article-body { max-width: 780px; margin: 0 auto; } .article-body h2 { font-size: 1.4rem; margin: 34px 0 14px; } .article-body h2:first-child { margin-top: 0; } .article-body p { margin: 0 0 18px; color: var(--muted); font-size: 1.02rem; line-height: 1.85; } .article-body p strong { color: var(--navy); } .article-body ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; } .article-body ul li { position: relative; padding-left: 24px; color: var(--muted); font-size: 1rem; line-height: 1.6; } .article-body ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: 0.6; } .article-tip { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 26px; padding: 14px 18px; border-radius: 12px; background: #fff7e6; color: #8a5a00; font-size: 0.92rem; line-height: 1.6; } .article-tip i { flex: 0 0 auto; color: #e8a400; margin-top: 2px; } /* ---- Detail: intro (gallery + info) ---- */ .pdp-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .pdp-gallery__main { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 20px 50px rgba(20, 34, 92, 0.12); } .pdp-gallery__main img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; transition: opacity 0.25s ease; } /* Award page: the main image opens a full-size lightbox on click. */ .pdp-gallery__main img[data-lightbox] { cursor: zoom-in; } .pdp-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .pdp-thumb { width: 88px; height: 66px; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color 0.25s ease, transform 0.25s ease; } .pdp-thumb img { width: 100%; height: 100%; object-fit: contain; } .pdp-thumb:hover { transform: translateY(-2px); } .pdp-thumb.is-active { border-color: var(--navy); } /* ===== Product intro — attractive gallery + info ===== */ #product-root .pdp-intro__info .eyebrow { display: inline-flex; align-items: center; gap: 10px; } #product-root .pdp-intro__info .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--red), #ffd34d); } #product-root .pdp-intro__info h2 { position: relative; padding-bottom: 16px; } #product-root .pdp-intro__info h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } /* Decorative accents behind the gallery image (animated) */ #product-root .pdp-gallery { position: relative; } #product-root .pdp-gallery::before { content: ""; position: absolute; z-index: 0; top: -14px; left: -14px; width: 120px; height: 120px; border-radius: 24px; background: linear-gradient(135deg, var(--red), #ffd34d); opacity: 0.16; animation: pdp-accent-float 5s ease-in-out infinite; } #product-root .pdp-gallery::after { content: ""; position: absolute; z-index: 0; bottom: 62px; right: -14px; width: 96px; height: 96px; background-image: radial-gradient( rgba(20, 34, 92, 0.2) 2px, transparent 2.3px ); background-size: 15px 15px; animation: pdp-accent-drift 9s ease-in-out infinite; } @keyframes pdp-accent-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4px, -8px) scale(1.06); } } @keyframes pdp-accent-drift { 0%, 100% { background-position: 0 0; } 50% { background-position: 12px 12px; } } @media (prefers-reduced-motion: reduce) { #product-root .pdp-gallery::before, #product-root .pdp-gallery::after, #product-root .pdp-intro__info h2::after { animation: none; } } #product-root .pdp-gallery__main { position: relative; z-index: 1; } #product-root .pdp-gallery__thumbs { position: relative; z-index: 1; } /* Active thumbnail — red gradient accent */ #product-root .pdp-thumb.is-active { border-color: var(--red); box-shadow: 0 6px 16px rgba(198, 40, 40, 0.22); } .pdp-intro__info h2 { margin: 6px 0 14px; font-size: 1.7rem; line-height: 1.25; color: var(--navy); } .pdp-intro__lead { margin: 0 0 20px; color: var(--muted); font-size: 1.02rem; line-height: 1.7; } .pdp-intro__panels-title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--navy); } .pdp-intro__panels { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; } .pdp-intro__panels li { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 0.96rem; font-weight: 500; } .pdp-intro__panels li i { color: var(--green); font-size: 0.82rem; } @media (max-width: 480px) { .pdp-intro__panels { grid-template-columns: 1fr; } } .pdp-intro__tags { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .pdp-intro__tags li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--navy); font-weight: 600; font-size: 0.85rem; } .pdp-intro__tags i { color: var(--green); } .pdp-intro__cta { display: flex; flex-wrap: wrap; gap: 14px; } /* ---- Detail: narrow text (overview / faq) ---- */ .pdp-narrow { max-width: 1280px; } .pdp-para { margin: 0 0 16px; color: var(--muted); font-size: 1.02rem; line-height: 1.8; } /* ---- Detail: how it works — benefits & features list ---- */ .pdp-benefits { margin: 8px 0 40px; } .pdp-benefits__title { margin: 0 0 16px; font-size: 1.2rem; font-weight: 700; color: var(--navy); } .pdp-benefits__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .pdp-benefits__list li { position: relative; padding-left: 34px; color: var(--muted); font-size: 1.02rem; line-height: 1.7; } .pdp-benefits__list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: rgba(46, 158, 79, 0.12); color: var(--green); font-size: 0.72rem; } /* ---- Detail: how it works steps ---- */ .pdp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .pdp-step { padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease; } .pdp-step:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20, 34, 92, 0.12); } .pdp-step__num { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; font-weight: 700; } .pdp-step h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--navy); } .pdp-step p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } /* ---- Detail: feature cards ---- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { padding: 30px 26px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 24px rgba(20, 34, 92, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .feature-card:hover { transform: translateY(-6px); border-color: rgba(20, 34, 92, 0.18); box-shadow: 0 22px 46px rgba(20, 34, 92, 0.13); } .feature-card__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 16px; font-size: 22px; color: var(--navy); background: linear-gradient( 135deg, rgba(20, 34, 92, 0.1), rgba(178, 42, 42, 0.1) ); transition: transform 0.3s ease; } .feature-card:hover .feature-card__ico { transform: scale(1.08) rotate(-3deg); } .feature-card h3 { margin: 0 0 10px; font-size: 1.12rem; color: var(--navy); } .feature-card p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.65; } /* ===== Why Choose Us — highlighted cards ===== */ #why-choose .section__head h2 { position: relative; display: block; } #why-choose .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } #why-choose .feature-grid { gap: 18px; } #why-choose .feature-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; column-gap: 15px; row-gap: 4px; align-content: center; text-align: left; padding: 20px 20px; border-radius: 16px; } /* Gradient top-bar that draws in on hover */ #why-choose .feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red), #ffd34d); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } #why-choose .feature-card:hover::before { transform: scaleX(1); } #why-choose .feature-card:hover { border-color: rgba(198, 40, 40, 0.25); } /* Compact red-gradient icon badge with white icon + gentle pulsing glow */ #why-choose .feature-card__ico { grid-row: 1 / span 2; align-self: start; width: 48px; height: 48px; margin-bottom: 0; border-radius: 13px; font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--red), #ff7a68); box-shadow: 0 10px 20px rgba(198, 40, 40, 0.26); animation: wc-ico-pulse 3s ease-in-out infinite; } @keyframes wc-ico-pulse { 0%, 100% { box-shadow: 0 10px 20px rgba(198, 40, 40, 0.26); } 50% { box-shadow: 0 12px 30px rgba(198, 40, 40, 0.5); } } /* Desync the pulse across cards */ #why-choose .feature-card:nth-child(2) .feature-card__ico { animation-delay: 0.5s; } #why-choose .feature-card:nth-child(3) .feature-card__ico { animation-delay: 1s; } #why-choose .feature-card:nth-child(4) .feature-card__ico { animation-delay: 1.5s; } #why-choose .feature-card:nth-child(5) .feature-card__ico { animation-delay: 2s; } #why-choose .feature-card:nth-child(6) .feature-card__ico { animation-delay: 2.5s; } /* On hover the icon animates in (kept lively, pulse continues) */ #why-choose .feature-card:hover .feature-card__ico { transform: scale(1.12) rotate(-6deg); } @media (prefers-reduced-motion: reduce) { #why-choose .feature-card__ico, #why-choose .section__head h2::after { animation: none; } } #why-choose .feature-card h3 { grid-column: 2; align-self: end; margin: 0 0 2px; font-size: 1rem; } #why-choose .feature-card p { grid-column: 2; align-self: start; font-size: 0.86rem; line-height: 1.5; } /* ---- Detail: specification cards ---- */ .spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .spec-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease; } .spec-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20, 34, 92, 0.12); } .spec-card__ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: var(--red); font-size: 19px; background: rgba(178, 42, 42, 0.08); } .spec-card__label { color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .spec-card__value { color: var(--navy); font-size: 1.15rem; font-weight: 700; } /* ---- Detail: specification list (clean, no icons) ---- */ /* Specifications section — dark background */ .pdp-specs { background: radial-gradient( circle at 85% 0%, rgba(255, 211, 77, 0.1), transparent 45% ), linear-gradient(160deg, #14225c 0%, #0b1533 100%); } .pdp-specs .section__head h2 { /* Light two-tone on the dark section: white + gold */ background: linear-gradient( 90deg, #ffffff 0%, #ffffff 50%, #ffd34d 50%, #ffd34d 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .pdp-specs .eyebrow { color: #ffd34d; } .spec-list { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.05); } .spec-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 24px; border-bottom: 1px solid var(--line); } .spec-row:last-child { border-bottom: 0; } .spec-row:nth-child(odd) { background: var(--bg-alt); } .spec-row__label { color: var(--muted); font-weight: 600; font-size: 0.95rem; } .spec-row__value { color: var(--navy); font-weight: 700; text-align: right; } /* ---- Detail: application chips (compact, replaces icon-card grid) ---- */ .app-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .app-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy); font-weight: 600; font-size: 0.92rem; box-shadow: 0 6px 16px rgba(20, 34, 92, 0.05); } .app-chip i { color: var(--red); font-size: 0.82rem; } /* ---- Detail: benefits text checklist (no icon cards) ---- */ .pdp-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 34px; } .pdp-checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); line-height: 1.6; } .pdp-checklist li i { flex: 0 0 auto; margin-top: 4px; color: var(--green); font-size: 1.05rem; } .pdp-checklist strong { color: var(--navy); font-weight: 700; } @media (max-width: 720px) { .pdp-checklist { grid-template-columns: 1fr; } } /* ===== Product detail page — attractive redesign + animation ===== */ /* Section heading — animated gradient underline */ #product-root .section__head h2 { position: relative; display: block; } #product-root .section__head h2::after { content: ""; display: block; width: 66px; height: 4px; margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } /* How It Works steps — red gradient number + top-bar on hover */ #product-root .pdp-step { position: relative; overflow: hidden; padding: 30px 26px 26px; border-radius: 18px; background: linear-gradient(170deg, #ffffff 0%, #f5f8fd 100%); } /* Top accent bar — short by default, widens across on hover */ #product-root .pdp-step::before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 4px; background: linear-gradient(90deg, var(--red), #ffd34d); transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } #product-root .pdp-step:hover::before { width: 100%; } #product-root .pdp-step:hover { transform: translateY(-8px); border-color: rgba(198, 40, 40, 0.28); box-shadow: 0 24px 46px rgba(20, 34, 92, 0.15); } /* Circular number badge with a continuous pulsing ring */ #product-root .pdp-step__num { width: 52px; height: 52px; border-radius: 50%; font-size: 1.05rem; background: linear-gradient(135deg, var(--red), #ff7a68); animation: pdp-num-pulse 3s ease-in-out infinite; } @keyframes pdp-num-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(198, 40, 40, 0.09); } 50% { box-shadow: 0 0 0 11px rgba(198, 40, 40, 0.03); } } #product-root .pdp-step:nth-child(2) .pdp-step__num { animation-delay: 0.6s; } #product-root .pdp-step:nth-child(3) .pdp-step__num { animation-delay: 1.2s; } #product-root .pdp-step:nth-child(4) .pdp-step__num { animation-delay: 1.8s; } @media (prefers-reduced-motion: reduce) { #product-root .pdp-step__num { animation: none; } } /* Spec rows — highlight on hover */ #product-root .spec-row { transition: background 0.25s ease, padding-left 0.25s ease; } #product-root .spec-row:hover { background: rgba(198, 40, 40, 0.06); padding-left: 30px; } /* Benefits checklist — circular green badges */ /* Benefits — card-style items */ #product-root .pdp-checklist { gap: 16px 20px; } #product-root .pdp-checklist li { align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } #product-root .pdp-checklist li:hover { transform: translateY(-4px); border-color: rgba(34, 139, 58, 0.35); box-shadow: 0 18px 38px rgba(20, 34, 92, 0.12); } #product-root .pdp-checklist li i { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 0; border-radius: 50%; background: linear-gradient(135deg, #1f8a37, #35c95a); color: #fff; font-size: 0.82rem; box-shadow: 0 8px 16px rgba(34, 139, 58, 0.28); } /* Application chips — lift + tint on hover */ #product-root .app-chip { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; } #product-root .app-chip:hover { transform: translateY(-3px); border-color: rgba(198, 40, 40, 0.35); background: rgba(198, 40, 40, 0.06); box-shadow: 0 12px 24px rgba(20, 34, 92, 0.1); } /* Why Choose Us cards — gradient top-bar + lift */ #product-root .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: vcard; } #product-root .value-card { counter-increment: vcard; position: relative; overflow: hidden; padding: 30px 30px 30px 34px; background: linear-gradient(168deg, #ffffff 0%, #f5f8fd 100%); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 26px rgba(20, 34, 92, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* Large faint watermark number (auto-generated) */ #product-root .value-card::before { content: counter(vcard, decimal-leading-zero); position: absolute; top: 8px; right: 20px; font-size: 3.6rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--red), #ffd34d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.22; transition: opacity 0.3s ease; pointer-events: none; } #product-root .value-card:hover::before { opacity: 0.38; } /* Left accent bar (always visible) */ #product-root .value-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--red), #ffd34d); } #product-root .value-card h3 { margin: 0 0 8px; color: var(--navy); font-size: 1.12rem; } #product-root .value-card p { margin: 0; color: var(--muted); line-height: 1.65; } #product-root .value-card:hover { transform: translateY(-8px); border-color: rgba(198, 40, 40, 0.28); box-shadow: 0 24px 46px rgba(20, 34, 92, 0.14); } @media (max-width: 860px) { #product-root .value-grid { grid-template-columns: 1fr; } } /* Intro tags — lift on hover */ #product-root .pdp-intro__tags li { transition: transform 0.25s ease, box-shadow 0.25s ease; } #product-root .pdp-intro__tags li:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 34, 92, 0.1); } @media (prefers-reduced-motion: reduce) { #product-root .section__head h2::after { animation: none; } } /* ---- Detail: measured-results comparison table ---- */ .pdp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.05); } .pdp-table { width: 100%; border-collapse: collapse; min-width: 460px; } .pdp-table th, .pdp-table td { padding: 14px 22px; text-align: left; border-bottom: 1px solid var(--line); } .pdp-table thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; } .pdp-table thead th:last-child { color: #ffd34d; } .pdp-table tbody th { color: var(--muted); font-weight: 600; } .pdp-table tbody td { color: var(--navy); font-weight: 700; } .pdp-table tbody td:last-child { color: var(--green); } .pdp-table tbody tr:nth-child(odd) th, .pdp-table tbody tr:nth-child(odd) td { background: var(--bg-alt); } .pdp-table tbody tr:last-child th, .pdp-table tbody tr:last-child td { border-bottom: 0; } /* ---- Detail: benefit cards ---- */ .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .benefit-card { display: flex; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease; } .benefit-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20, 34, 92, 0.12); } .benefit-card__ico { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--green); font-size: 19px; background: rgba(46, 158, 79, 0.1); } .benefit-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--navy); } .benefit-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } /* ---- Detail: application cards ---- */ .app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .app-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 18px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 18px rgba(20, 34, 92, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease; } .app-card:hover { transform: translateY(-5px); background: var(--navy); box-shadow: 0 20px 42px rgba(20, 34, 92, 0.2); } .app-card__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--navy); font-size: 20px; background: var(--bg-alt); transition: color 0.28s ease, background 0.28s ease; } .app-card > span:last-child { color: var(--navy); font-weight: 600; font-size: 0.92rem; transition: color 0.28s ease; } .app-card:hover .app-card__ico { color: #fff; background: rgba(255, 255, 255, 0.16); } .app-card:hover > span:last-child { color: #fff; } /* ---- Detail: why-choose cards ---- */ .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .why-card { display: flex; gap: 16px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(20, 34, 92, 0.05); transition: transform 0.28s ease, box-shadow 0.28s ease; } .why-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 34, 92, 0.12); } .why-card__ico { flex: 0 0 auto; color: var(--green); font-size: 24px; line-height: 1.2; } .why-card h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--navy); } .why-card p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.6; } /* ---- Detail: FAQ accordion ---- */ .faq { display: grid; gap: 14px; } .faq-item { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .faq-item.is-open { border-color: rgba(20, 34, 92, 0.25); box-shadow: 0 14px 32px rgba(20, 34, 92, 0.1); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 24px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--navy); text-align: left; } .faq-q i { flex: 0 0 auto; color: var(--red); transition: transform 0.3s ease; } .faq-item.is-open .faq-q i { transform: rotate(45deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a__inner { overflow: hidden; } .faq-a p { margin: 0; padding: 0 24px 22px; color: var(--muted); line-height: 1.7; } /* ===== Home FAQ — refreshed design ===== */ #faq .section__head h2 { position: relative; display: block; } #faq .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } #faq .faq-item { position: relative; } /* Left gradient accent bar, revealed when the item is open */ #faq .faq-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--red), #ffd34d); transform: scaleY(0); transform-origin: top; transition: transform 0.35s ease; z-index: 1; } #faq .faq-item.is-open::before { transform: scaleY(1); } #faq .faq-item.is-open { border-color: transparent; background: linear-gradient(180deg, #ffffff 0%, #fdf5f3 100%); box-shadow: 0 16px 38px rgba(20, 34, 92, 0.12); } #faq .faq-q { font-weight: 700; transition: color 0.25s ease; } #faq .faq-q:hover { color: var(--red); } /* Circular toggle badge */ #faq .faq-q i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(198, 40, 40, 0.1); color: var(--red); font-size: 0.82rem; } #faq .faq-item.is-open .faq-q i { background: linear-gradient(135deg, var(--red), #ff7a68); color: #fff; } /* ---- Testimonials carousel (home) ---- */ .tcarousel { display: flex; align-items: center; gap: 20px; } .tcarousel__viewport { flex: 1 1 auto; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .tcarousel__viewport::-webkit-scrollbar { display: none; } .tcarousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .tcarousel__track { display: flex; gap: 26px; padding: 14px 4px; } .tcarousel__track .tcard { flex: 0 0 calc((100% - 52px) / 3); scroll-snap-align: start; } .tcarousel__nav { flex: 0 0 auto; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 0.95rem; cursor: pointer; box-shadow: 0 8px 20px rgba(20, 34, 92, 0.08); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .tcarousel__nav:hover { background: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 34, 92, 0.2); } .tcarousel__nav:focus-visible { outline: 3px solid rgba(20, 34, 92, 0.35); outline-offset: 2px; } .tcarousel__dots { display: flex; justify-content: center; gap: 9px; margin-top: 26px; } .tcarousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(20, 34, 92, 0.2); cursor: pointer; transition: background 0.25s ease, width 0.25s ease; } .tcarousel__dot:hover { background: rgba(20, 34, 92, 0.4); } .tcarousel__dot.is-active { width: 26px; background: var(--navy); } .tcard { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px 26px 22px; background: radial-gradient( circle at 100% 0%, rgba(255, 211, 77, 0.14), transparent 42% ), linear-gradient(165deg, #ffffff 0%, #fdf4f2 100%); border: 1.5px solid transparent; border-radius: 20px; box-shadow: 0 16px 38px rgba(20, 34, 92, 0.1), 0 0 0 1px rgba(198, 40, 40, 0.06); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease; } /* Always-on gradient border ring — highlighted, brighter on hover */ .tcard::after { content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1.5px; background: linear-gradient(135deg, var(--red), #ffd34d, var(--red)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.55; transition: opacity 0.35s ease; pointer-events: none; } .tcard:hover { transform: translateY(-8px); box-shadow: 0 30px 58px rgba(20, 34, 92, 0.18), 0 0 0 1px rgba(198, 40, 40, 0.12); } .tcard:hover::after { opacity: 1; } /* Circular gradient quote badge (top-right) */ .tcard::before { content: "\f10d"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 18px; right: 18px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--red), #ff7a68); color: #fff; font-size: 0.88rem; box-shadow: 0 8px 18px rgba(198, 40, 40, 0.32); transition: transform 0.35s ease; pointer-events: none; } .tcard:hover::before { transform: scale(1.1) rotate(-6deg); } /* Animated gradient underline under the Testimonials heading */ #testimonials .section__head h2 { position: relative; display: block; } #testimonials .section__head h2::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--red), #ffd34d, var(--red)); background-size: 200% 100%; animation: client-underline 4.5s ease-in-out infinite; } .tcard__stars { display: inline-flex; gap: 4px; color: #f5a623; font-size: 0.98rem; } .tcard__quote { margin: 0; flex: 1 1 auto; color: var(--ink); font-size: 0.96rem; line-height: 1.55; } .tcard__author { display: flex; align-items: center; gap: 12px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line); } .tcard__avatar { display: inline-grid; place-items: center; width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; box-shadow: 0 8px 18px rgba(20, 34, 92, 0.22); letter-spacing: 0.02em; } /* Vary initials-avatar colours per testimonial */ .tcarousel__track .tcard:nth-child(5n + 1) .tcard__avatar { background: linear-gradient(135deg, var(--red), #ff7a68); } .tcarousel__track .tcard:nth-child(5n + 2) .tcard__avatar { background: linear-gradient(135deg, #14225c, #3a4a86); } .tcarousel__track .tcard:nth-child(5n + 3) .tcard__avatar { background: linear-gradient(135deg, #1f8a37, #35c95a); } .tcarousel__track .tcard:nth-child(5n + 4) .tcard__avatar { background: linear-gradient(135deg, #b8860b, #f6c343); } .tcarousel__track .tcard:nth-child(5n + 5) .tcard__avatar { background: linear-gradient(135deg, #6a1b9a, #9c4dcc); } /* Illustrated person photo filling the avatar circle */ .tcard__avatar--photo { padding: 0; overflow: hidden; border: 2px solid #fff; } .tcard__avatar--photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .tcard__avatar--image { padding: 7px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(20, 34, 92, 0.08); } .tcard__avatar--image img { display: block; width: 100%; height: 100%; object-fit: contain; } .tcard__meta { display: flex; flex-direction: column; } .tcard__name { color: var(--navy); font-weight: 700; font-size: 0.98rem; } .tcard__role { color: var(--muted); font-size: 0.84rem; } @media (max-width: 900px) { .tcarousel__track .tcard { flex-basis: calc((100% - 26px) / 2); } } @media (max-width: 600px) { .tcarousel { gap: 10px; } .tcarousel__track .tcard { flex-basis: 100%; } .tcarousel__nav { width: 42px; height: 42px; } } .home-faq__wrap { max-width: 1200px; } /* ---- Detail: related products ---- */ .related-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .related-product { display: flex; flex-direction: column; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(20, 34, 92, 0.06); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .related-product:hover { transform: translateY(-6px); border-color: rgba(20, 34, 92, 0.2); box-shadow: 0 22px 46px rgba(20, 34, 92, 0.14); } .related-product__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); } .related-product__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .related-product:hover .related-product__img img { transform: scale(1.06); } .related-product__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; } .related-product__name { color: var(--navy); font-weight: 700; font-size: 1.05rem; line-height: 1.35; } .related-product__more { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 700; font-size: 0.88rem; } .related-product__more i { transition: transform 0.25s ease; } .related-product:hover .related-product__more i { transform: translateX(5px); } /* ---- Products responsive ---- */ @media (max-width: 1024px) { .pdp-intro__grid { grid-template-columns: 1fr; gap: 34px; } .prod-listing, .feature-grid, .benefit-grid, .related-products { grid-template-columns: repeat(2, 1fr); } .spec-grid, .app-grid, .pdp-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .prod-listing, .feature-grid, .benefit-grid, .why-grid, .related-products, .pdp-steps { grid-template-columns: 1fr; } .spec-grid, .app-grid { grid-template-columns: repeat(2, 1fr); } .pdp-intro__cta { flex-direction: column; } .pdp-intro__cta .btn { width: 100%; } } /* ================================================================= MOBILE POLISH — final responsive pass across every page (appended last so it wins the cascade at small widths) ================================================================= */ /* Media & tables never overflow their container on any screen. */ img, video, table, iframe { max-width: 100%; } /* Long strings (e.g. the email in the top bar / footer) wrap instead of forcing a horizontal scroll. */ .topbar__contact a, .footer__contact-list a, .footer__contact-list li { word-break: break-word; overflow-wrap: anywhere; } /* ---- Tablet ---- */ @media (max-width: 900px) { .section { padding: 52px 0; } .section__head { margin-bottom: 34px; } /* Business-partners hero split had no breakpoint — stack it. */ .partner-split__grid { grid-template-columns: 1fr; gap: 34px; } } /* ---- Phones ---- */ @media (max-width: 640px) { .section { padding: 42px 0; } .section__head { margin-bottom: 28px; } .container { padding-left: 16px; padding-right: 16px; } /* Any remaining content-card grids collapse to a single column. */ .prod-listing, .pgrid, .feature-grid, .pdp-steps, .related-products, .cards { grid-template-columns: 1fr; } /* Centred section CTAs become full-width, easy-to-tap buttons. */ .section__cta .btn { width: 100%; max-width: 340px; } /* Page-hero (inner page) headings scale down so they never clip. */ .page-hero h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); } .page-hero p { font-size: 0.98rem; } } /* ---- Small phones ---- */ @media (max-width: 420px) { .container { padding-left: 14px; padding-right: 14px; } /* About-page video thumbnails: 2-up instead of a cramped 3-up row. */ .video-gallery__row { grid-template-columns: 1fr 1fr; } /* Partner icon tiles read better one-per-row at this width. */ .partner-grid { grid-template-columns: 1fr 1fr; } }