/*
 * style.css — all base (non-media-query) CSS for the clean frontend
 * rebuild, consolidated from what used to be tokens.css + layout.css +
 * public/frontend/css/sections/*.css into a single file per the project's
 * folder-structure spec (just style.css + responsive.css). All @media
 * rules that used to live inline in those files now live in
 * responsive.css instead, in the same section order as below. Section
 * order matches the Home page's actual rendering order (see
 * resources/views/frontend/index.blade.php).
 */

/* ==================================================================
   TOKENS — design tokens, copied verbatim from the real TECTLK theme's
   own global kit (post-31866.css). Declared on :root, no wrapper class
   required.
================================================================== */
:root {
    --color-primary: #2B4DFF;
    --color-secondary: #0A165E;
    --color-text: #585B6F;
    --color-surface: #F5F6F7;
    --color-heading: #0A165E;
    --color-cta-gradient-end: #0349EF;
    --color-card-dark: #101C66;
    --color-border-light: #EAF1FF;
    --color-surface-alt: #F8FBFF;

    --font-primary: 'Space Grotesk', sans-serif;

    --text-base-size: 17px;
    --text-base-line: 27px;

    --h1-size: 80px; --h1-line: 90px; --h1-tracking: -1px;
    --h2-size: 42px; --h2-line: 50px; --h2-tracking: -1px;
    --h3-size: 30px; --h3-line: 38px; --h3-tracking: -1px;
    --h4-size: 24px; --h4-line: 32px; --h4-tracking: -0.5px;
    --h5-size: 20px; --h5-line: 28px; --h5-tracking: -0.5px;
    --h6-size: 18px; --h6-line: 26px; --h6-tracking: -0.5px;

    --container-max-width: 1310px;
}

body {
    color: var(--color-text);
    font-family: var(--font-primary), sans-serif;
    font-size: var(--text-base-size);
    line-height: var(--text-base-line);
}
h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-family: var(--font-primary), sans-serif; }
h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: 700; letter-spacing: var(--h1-tracking); }
h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: 700; letter-spacing: var(--h2-tracking); }
h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: 700; letter-spacing: var(--h3-tracking); }
h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: 700; letter-spacing: var(--h4-tracking); }
h5 { font-size: var(--h5-size); line-height: var(--h5-line); font-weight: 700; letter-spacing: var(--h5-tracking); }
h6 { font-size: var(--h6-size); line-height: var(--h6-line); font-weight: 700; letter-spacing: var(--h6-tracking); }

/* ==================================================================
   LAYOUT — header / topbar / nav / footer. Real values copied verbatim
   from post-16344.css (header template) / post-152.css (footer
   template).
================================================================== */
.sr-only, .elementor-screen-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { position: relative; z-index: 100; background: #fff; }
/* Real values from post-16344.css (header template, hash fb3e524 and
   children — the topbar's own generated CSS; there is no shared
   rs-contact-box/rs-divider widget stylesheet, every property below is
   per-instance-generated in that file). Real background is a blue
   gradient (202deg, primary -> cta-gradient-end), so all text/icons are
   white. */
.header-topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 120px 11px;
    font-size: 15px;
    background-image: linear-gradient(202deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
    color: #fff;
}
.header-topbar-contacts { display: flex; align-items: center; gap: 25px; padding-left: 10px; }
.header-topbar-meta { display: flex; align-items: center; justify-content: flex-end; gap: 25px; padding-right: 10px; flex: 1; }
.header-topbar-item { display: flex; align-items: center; gap: 11px; line-height: 25px; color: #fff; }
.header-topbar-item a { color: inherit; text-decoration: none; }
.header-topbar-item a:hover { color: #FFFFFFB8; }
.header-topbar-icon { display: inline-flex; color: #fff; }
.header-topbar-icon svg { width: 18px; height: 18px; }
.header-topbar-divider { width: 1px; height: 15px; border-radius: 50px; background-color: #FFFFFF38; }
/* Real per-instance override (hash b09aff4) makes the topbar's social
   icons fully transparent/borderless at a tight 14px box. The real 25px
   grid-column-gap value only activates under Elementor's own
   `.elementor-widget-social-icons` ancestor class (not present in this
   clean markup), so the gap is applied directly here instead. */
.header-topbar-meta .elementor-social-icons-wrapper { --icon-size: 14px; --icon-padding: 0px; display: flex; align-items: center; gap: 25px; }
.header-topbar-meta .elementor-social-icon { background-color: transparent; border-radius: 0; color: #fff; }
.header-topbar-meta .elementor-social-icon i { color: #fff; }
.header-topbar-meta .elementor-social-icon:hover i { color: #FFFFFFC7; }

.header-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 120px; background: #fff; }
.header-row.header-sticky-part { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05); }
.header-logo { padding-left: 10px; }
.header-logo-link { font-family: var(--font-primary), sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--color-secondary); text-decoration: none; }
.header-logo-accent { color: var(--color-primary); }
.header-nav { flex: 1; display: flex; align-items: center; justify-content: center; }
.header-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 15px; padding-right: 10px; }
.header-divider { width: 1px; height: 20px; background: currentColor; opacity: .15; }
.header-menu-toggle { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--color-secondary); line-height: 1; }

/* Real per-instance override (hash 73d3717, post-16344.css) for the header's
   own CTA button — a distinct gradient/padding/icon-size variant of the
   generic `.rs-button.style1` default (flat #2B4DFF, 19px/29px padding,
   3px radius) used elsewhere, scoped here so it doesn't affect those.
   Requires the real `.rs-button` wrapper div (see header-row.blade.php). */
.header-cta-wrap.rs-button .rs-btn {
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
    border-radius: 5px;
    padding: 13px 25px;
}
.header-cta-wrap.rs-button .rs-btn:hover { background-color: var(--color-cta-gradient-end); }
.header-cta-wrap.rs-button .rs-btn span { flex-direction: row-reverse; }
.header-cta-wrap.rs-button .rs-btn em { width: 17px; height: 17px; line-height: 17px; }
.header-cta-wrap.rs-button .rs-btn i { font-size: 17px; }

/* Header search — round icon toggle + dropdown panel with live
   suggestions (markup: header-row.blade.php, behavior: frontend/js/main.js).
   Buttons re-state their hover colors because the theme's global
   `button:hover` rule would otherwise repaint them. */
.header-search { position: relative; }
.header-search-toggle {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0; border: 1px solid #E5EAFF; border-radius: 50%;
    background: var(--color-surface); color: var(--color-secondary); cursor: pointer; transition: .3s;
}
.header-search-toggle:hover, .header-search-toggle:focus-visible, .header-search.is-open .header-search-toggle {
    background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF;
}
.header-search-toggle i { position: absolute; font-size: 20px; line-height: 1; transition: opacity .25s, transform .25s; }
.header-search-toggle .ri-close-line { opacity: 0; transform: rotate(-90deg) scale(.6); }
.header-search.is-open .header-search-toggle .ri-search-line { opacity: 0; transform: rotate(90deg) scale(.6); }
.header-search.is-open .header-search-toggle .ri-close-line { opacity: 1; transform: none; }

.header-search-panel {
    position: absolute; top: calc(100% + 22px); right: -60px; z-index: 1000;
    width: 400px; padding: 14px; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 14px;
    box-shadow: 0 24px 60px -12px rgba(10, 22, 94, .22);
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s;
}
.header-search-panel::before {
    content: ''; position: absolute; top: -7px; right: 76px; width: 12px; height: 12px;
    background: #FFFFFF; border-left: 1px solid #E5EAFF; border-top: 1px solid #E5EAFF; transform: rotate(45deg);
}
.header-search.is-open .header-search-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, visibility 0s; }

.header-search-form { position: relative; display: flex; align-items: center; margin: 0; }
.header-search-form .header-search-input {
    width: 100%; height: 52px; margin: 0; padding: 0 60px 0 18px;
    border: 1px solid #E5EAFF; border-radius: 10px; background: var(--color-surface);
    color: var(--color-secondary); font-family: var(--font-primary), sans-serif; font-size: 15px; outline: none; transition: .3s;
}
.header-search-form .header-search-input::placeholder { color: #8A8FA8; }
.header-search-form .header-search-input:focus { border-color: var(--color-primary); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(43, 77, 255, .1); }
.header-search-form .header-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.header-search-submit, .header-search-submit:hover, .header-search-submit:focus {
    position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; color: #FFFFFF;
    background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
}
.header-search-submit i { font-size: 18px; line-height: 1; }
.header-search.is-loading .header-search-submit i { animation: header-search-pulse .8s ease-in-out infinite alternate; }
@keyframes header-search-pulse { to { opacity: .35; } }

.header-search-results { max-height: 360px; margin-top: 10px; overflow-y: auto; }
.header-search-results[hidden] { display: none; }
.header-search-result {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px;
    color: var(--color-secondary); text-decoration: none; transition: background .2s;
}
.header-search-result:hover, .header-search-result.is-active { background: var(--color-surface); color: var(--color-secondary); }
.header-search-result-icon {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 8px; background: #EEF1FF; color: var(--color-primary); font-size: 17px; transition: .2s;
}
.header-search-result:hover .header-search-result-icon, .header-search-result.is-active .header-search-result-icon { background: var(--color-primary); color: #FFFFFF; }
.header-search-result-text { display: flex; flex-direction: column; min-width: 0; }
.header-search-result-title { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; }
.header-search-result-type { color: #8A8FA8; font-size: 12px; line-height: 16px; letter-spacing: .4px; text-transform: uppercase; }
.header-search-empty { padding: 14px 10px; color: var(--color-text); font-size: 14px; }
.header-search-all {
    position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 10px;
    border-top: 1px solid #EEF1FF; background: #FFFFFF; color: var(--color-primary); font-size: 14px; font-weight: 600; text-decoration: none;
}
.header-search-all:hover { color: var(--color-cta-gradient-end); }

.sidebar-offcanvas-menu-logo a { font-family: var(--font-primary), sans-serif; font-weight: 700; font-size: 1.5rem; color: #fff; text-decoration: none; }

/* Real per-instance panel chrome (post-16344.css) for `.rsmega_container`.
   Real rule also centers the panel via `left:50%` + `translateX(-50%)`
   (the vendor's own `mega-width-container` CSS un-positions the nav, so
   this is relative to the header row, not the individual menu item). */
.header-menu .rsmega_container {
    background-color: #F3F7FB;
    overflow: hidden;
    max-width: 1082px;
    padding: 30px;
    border-radius: 0 0 12px 12px;
    left: 50% !important;
    transform: scaleY(0) translateX(-50%) !important;
}
.header-menu .rs-mega-parent:hover .rsmega_container { transform: scaleY(1) translateX(-50%) !important; }

.dp-svcmenu { display: flex; align-items: flex-start; gap: 28px; }
.dp-svcmenu-promo { flex: 0 0 220px; }
.dp-svcmenu-promo h4,
.dp-svcmenu-promo-title { margin: 0 0 8px; font-family: var(--font-primary), sans-serif; font-size: 19px; font-weight: 700; color: #111; }
.dp-svcmenu-promo p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: #555; }
.dp-svcmenu-promo img { display: block; width: 100%; max-width: 170px; height: auto; }
.dp-svcmenu-col { flex: 1 1 0; min-width: 0; }
.dp-svcmenu-group { margin-bottom: 18px; }
.dp-svcmenu-group:last-child { margin-bottom: 0; }
.dp-svcmenu-heading { display: flex; align-items: center; gap: 8px; font-family: var(--font-primary), sans-serif; font-size: 15px; font-weight: 700; color: #111; text-decoration: none; margin-bottom: 6px; }
.dp-svcmenu-heading:hover { color: var(--color-primary); }
.dp-svcmenu-heading-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--color-primary); }
span.dp-svcmenu-heading-label { pointer-events: none; }
.dp-svcmenu-list { list-style: none; margin: 0; padding: 0; }
.dp-svcmenu-list li { margin: 0; }
.dp-svcmenu-list a { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 13px; color: #555; text-decoration: none; line-height: 1.4; }
.dp-svcmenu-list a:hover { color: var(--color-primary); }
/* Compact dropdown: header-footer/frontend.css pads every nested menu link
   (`.hfe-nav-menu ul ul li a { padding: 20px }`, `.hfe-nav-menu nav ul li
   a { padding: 10px 15px }`), out-ranking the 4px row padding above — each
   sub-link rendered 58px tall and the panel ~1250px. Matched/exceeded that
   depth so the intended tight rows apply. */
.header-menu .rsmega_container { padding: 24px 28px; }
.header-menu .dp-svcmenu { gap: 24px; }
.header-menu .dp-svcmenu .dp-svcmenu-group { margin-bottom: 14px; }
.header-menu .dp-svcmenu .dp-svcmenu-group:last-child { margin-bottom: 0; }
.header-menu .dp-svcmenu ul.dp-svcmenu-list li a { padding: 3px 0; line-height: 1.35; }
.header-menu .dp-svcmenu a.dp-svcmenu-heading,
.header-menu .dp-svcmenu span.dp-svcmenu-heading { padding: 0; line-height: 1.3; margin-bottom: 4px; }
.dp-svcmenu-check { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; color: var(--color-primary); }

.rsmega_container.dp-agencymenu--compact { max-width: 300px !important; padding: 14px 0 !important; }
.dp-agencymenu-list { list-style: none; margin: 0; padding: 0; }
.dp-agencymenu-list li { margin: 0; }
.dp-agencymenu-list a { display: block; padding: 9px 24px; font-size: 14px; color: #333; text-decoration: none; line-height: 1.4; }
.dp-agencymenu-list a:hover { color: var(--color-primary); background: #F3F7FB; }

/* ---------- footer (real post-152.css declarations cross-checked) ---------- */
.site-footer {
    background-color: var(--color-secondary);
    background-image: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-cta-gradient-end) 140%), url('/frontend/images/footer-texture.png');
    background-position: center, bottom center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    border-top: 1px solid #3672FF14;
}
.footer-columns { display: flex; flex-wrap: wrap; max-width: 1310px; margin: 0 auto; border-bottom: 1px solid #FFFFFF0D; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
.footer-col--brand { width: 25%; padding: 70px 0 60px; border-right: 1px solid #FFFFFF0D; box-sizing: border-box; }
.footer-col--company { width: 25%; padding: 75px 0 0 70px; box-sizing: border-box; }
.footer-col--links { width: 25%; padding: 75px 0 0; box-sizing: border-box; }
.footer-col--newsletter { width: 25%; padding: 75px 0 0; box-sizing: border-box; }
.footer-brand-logo { font-family: var(--font-primary), sans-serif; font-weight: 700; font-size: 1.5rem; color: #fff; text-decoration: none; }
.footer-tagline { color: #FFFFFFD1; margin: 20px 0 30px; }
.footer-col-heading { font-size: 22px; line-height: 32px; color: #FFFFFF; margin: 0 0 15px; font-weight: 700; font-family: var(--font-primary), sans-serif; }
.footer-nav .menu-item a.hfe-menu-item { color: #FFFFFF; font-size: 15px; line-height: 26px; padding: 8px 0; display: inline-block; }
.footer-nav .menu-item:hover a.hfe-menu-item { color: #28aae1; }
.footer-newsletter-form { width: 100%; max-width: 100%; box-sizing: border-box; }
/* User-directed: transparent field on the footer gradient; border raised
   from #FFFFFF0D so the field outline stays visible without the fill. */
.footer-newsletter-form input.wpcf7-form-control:not(.wpcf7-submit) { width: 100%; box-sizing: border-box; background-color: transparent; color: #FFFFFF !important; border: 1px solid #FFFFFF33; border-radius: 3px; padding: 14px 20px; margin-bottom: 15px; }
.footer-newsletter-form ::placeholder { color: #F0F0F0A1; }
.footer-newsletter-form input.wpcf7-form-control:not(.wpcf7-submit)::placeholder { color: #FFFFFFB3; opacity: 1; }
.footer-newsletter-form .wpcf7-submit { width: 100%; background-color: var(--color-primary); color: #FFFFFF; border: none; padding: 14px 20px; font-size: 15px; font-weight: 500; text-transform: uppercase; border-radius: 3px; cursor: pointer; }
.footer-newsletter-form .wpcf7-response-output { color: #FFFFFFD1; font-size: 13px; margin-top: 10px; }
.footer-social .social-title { color: #FFFFFF; font-size: 14px; margin: 0 0 10px; font-weight: 600; }
.footer-social.rs-social-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; flex-wrap: wrap; }
/* rs-social-icons.css (kept unmodified as vendor CSS) already renders this
   exactly as intended: a white 40x40 circle with a black icon glyph; on
   hover the circle turns blue (#2B4DFF) and the glyph white. */
.footer-social.rs-social-menu ul li a:hover i { color: #FFFFFF; }

.footer-bottom { padding: 10px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 1310px; margin: 0 auto; padding: 20px; gap: 15px; }
.hfe-copyright-wrapper { color: #FFFFFF; font-size: 15px; }
/* The real "." separator between legal links comes from the real,
   still-loaded separator-dots nav CSS, which positions an absolute dot
   expecting each <li> to reserve 20px of its own padding-right for it. */
.footer-legal-nav .hfe-nav-menu { list-style: none; margin: 0; padding: 0; }
.footer-legal-nav .hfe-nav-menu > li { margin: 0 20px 0 0; padding: 0 20px 0 0; }
.footer-legal-nav .hfe-nav-menu > li:last-child { margin: 0; padding: 0; }
.footer-legal-nav .menu-item a.hfe-menu-item { color: #FFFFFF; font-size: 14px; }
.footer-legal-nav .menu-item:hover a.hfe-menu-item { color: #28aae1; }

/* ---------- back-to-top button ----------
   Real position/behavior from default.css (`#scrollUp{...}`) — the real
   click-to-scroll-top and scroll-triggered fade in/out both already come
   from the theme's own main.js (kept as vendor JS, unmodified). */
#scrollUp {
    display: none;
    position: fixed;
    left: 40px;
    bottom: 20px;
    z-index: 10;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    cursor: pointer;
    text-align: center;
    line-height: 50px;
    transition: background .3s, opacity .3s;
}
#scrollUp i { color: #FFFFFF; font-size: 20px; vertical-align: middle; }
#scrollUp:hover { opacity: .85; }

/* ==================================================================
   HERO — values copied verbatim from the real theme's own generated CSS
   (post-14.css, hashes 5122498/3ca4653/18589e5/13c9aee/0aeb701/0918781/
   f08ed9f/467754f/c971e64).
================================================================== */
.hero-section {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    overflow: hidden;
    padding: 75px 20px;
    /* Real value (post-14.css, hash 5122498): a dark navy/red gradient wave
       image, not a light texture — this is why the real heading/subtext are
       white (#FFFFFF/#FFFFFFB5), not dark navy on an all-white background. */
    background-image: url('/techtlk/wp-content/uploads/2025/01/banner.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-shape { position: absolute; pointer-events: none; }
.hero-shape img { display: block; }
.hero-shape--bl { left: -45px; bottom: -148px; opacity: .2; }
.hero-shape--top { top: -59px; right: 114px; z-index: 1; }

.hero-content { display: flex; flex-direction: column; justify-content: center; flex: 1 1 460px; max-width: 620px; position: relative; z-index: 2; }
.hero-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.hero-title { font-size: 52px; line-height: 1.18; margin: 0; color: #fff; }
.hero-subtext { width: 100%; min-width: 260px; margin-top: 20px; }
.hero-subtext p { color: #FFFFFFB5; margin: 0; }

/* User-directed layout: real theme keeps the button and partner-logo strip
   side by side in a row (only stacking at <=1024px) — changed to a column
   here per explicit instruction so the slider always sits below the
   button, not next to it. */
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 30px; }
/* User-directed: reduced vertical padding (real/generic value is 19px) for a
   more compact button. */
.hero-cta .rs-btn { background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%); border-radius: 5px; padding: 12px 32px; color: #fff; display: inline-block; }
.hero-logo-strip { width: 100%; }
/* Real per-instance value (hash 1caef66, post-14.css): `.rs-grid-img{width:150px}`
   — no width was ever ported here, so the images rendered at their full
   natural/uploaded size (no constraint at all), which is why they looked
   oversized. */
.hero-logo-strip .rs-grid-img { width: 150px; height: auto; }
/* User-directed: partner logos shown in white on the dark hero / navy
   partner cards (the real logo files are dark and got lost on those
   backgrounds). brightness(0) flattens each logo to black, invert(1)
   turns it white — same logo shapes, no new image files. */
.hero-logo-strip .rs-grid-img,
.success-story-partner-card img { filter: brightness(0) invert(1); opacity: .9; transition: opacity .3s ease; }
.hero-logo-strip .rs-grid-img:hover,
.success-story-partner-card:hover img { opacity: 1; }
/* partner-4.png (TikTok) is a badge with its own opaque dark background —
   flattening it to white would give a solid white box. Its mark and
   wordmark are already white, so it is only desaturated instead. */
.hero-logo-strip .rs-grid-img[src$="partner-4.png"],
.success-story-partner-card img[src$="partner-4.png"] { filter: grayscale(1); }

.hero-media { position: relative; display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; flex: 1 1 460px; }
.hero-badge { position: absolute; top: 0; left: 50px; z-index: 3; }
.hero-image { width: 100%; max-width: 680px; height: auto; position: relative; z-index: 2; display: block; }

/* Real per-instance override (hash f08ed9f, post-14.css) for the "Explore
   More" rotating badge — a transparent glassmorphism circle (blurred
   radial-gradient + hairline border), not the widget's generic solid-blue
   default. Matches the now-dark hero background. */
.hero-badge .rs-button-rotating {
    background-color: transparent;
    background-image: radial-gradient(at center center, #7D7C8666 0%, #FFFFFF00 100%);
    backdrop-filter: blur(21px);
    border: 1px solid #FFFFFF14;
}
.hero-badge .rs-button-rotating .button-logo { background-color: transparent; border: 1px solid #FFFFFF14; }
.hero-badge .text-wrapper span { color: #fff; }

/* ==================================================================
   MARQUEE — real values from post-14.css (hash 9dd834c) plus the
   content-driven font/icon-size trim for DP's longer real service names.
================================================================== */
.marquee-section {
    display: flex;
    background: var(--color-primary);
    border-top: 1px solid #FFFFFF1C;
    border-bottom: 1px solid #FFFFFF1C;
    padding: 20px 0;
    overflow: hidden;
}
.marquee-section .gsap-marquee .marquee-wrapper .slider-item.image .marquee-item > p { font-size: 16px !important; font-weight: 600; text-transform: uppercase; color: #FFFFFF; margin: 0; }
.marquee-section .marquee-wrapper .marquee-item .image-wrapper img { width: 30px !important; height: 30px !important; }
.marquee-section .gsap-marquee .marquee-wrapper .slider-item .image-wrapper { margin: 0 20px; }

/* ==================================================================
   ABOUT / STATS — real values from post-14.css (hash b64d652 and
   children).
================================================================== */
.about-section {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 60px;
    padding: 90px 20px 0;
    margin-bottom: 380px;
}

.about-shape { position: absolute; right: 0; bottom: 0; z-index: 0; pointer-events: none; }
.about-shape img { width: 116px; height: auto; }

/* The photo keeps its size (~42% of the row); the column no longer reserves an empty strip
   beside it, so the text sits closer instead of leaving a wide gap in the middle. */
.about-media { position: relative; flex: 0 0 44%; max-width: 44%; }
.about-media-inner { width: 96%; }
/* Fixed to the original design image's ratio (518×544) so an admin-uploaded photo of any shape fills the same frame. */
.about-photo { width: 100%; height: auto; aspect-ratio: 518 / 544; object-fit: cover; border-radius: 30px; display: block; }
.about-counter-card {
    position: absolute;
    bottom: 35px;
    left: 0;
    width: 275px;
    max-width: 90%;
    background: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .06);
    padding: 15px;
    z-index: 2;
}
.about-counter-card .counter-top-area { text-align: left; }
.about-counter-card .count-text { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.about-counter-card .count-number { display: flex; align-items: baseline; }
.about-counter-card .rs-counter, .about-counter-card .prefix { color: var(--color-primary); font-size: 28px; font-weight: 700; }
.about-counter-card .title { display: block; color: var(--color-text); font-size: 13px; font-weight: 500; text-transform: uppercase; margin-bottom: 4px; }

.about-content { flex: 1 1 38%; min-width: 0; }
.about-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.about-content .about-desc p { color: var(--color-text); margin: 0 0 10px; }

.about-value-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 20px 0; margin-top: 15px; }
.about-value-col { display: flex; flex-direction: column; gap: 10px 0; width: 45%; }
.about-value-col .rs-iconbox-area .box-inner { display: flex; align-items: center; gap: 10px; text-align: left; }
.about-value-col .title { font-weight: 500; color: var(--color-secondary); margin: 0; }
.about-value-col .icon-area { color: var(--color-primary); font-size: 18px; }
.about-value-col .rs-divider { background: #2B4DFF1A; width: 100%; height: 1px; margin-top: 30px; }

.about-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 20px; }
.about-actions .rs-button .rs-btn { background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%); border-radius: 5px; padding: 20px; font-weight: 500; color: #fff; }
.about-actions .rs-iconbox-area .box-inner { display: flex; align-items: center; gap: 14px; }
.about-actions .icon-area { background: var(--color-primary); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex: none; }
/* iconbox.css (`.rs-iconbox-area .box-inner .icon-area { color: #0A165E }`)
   out-ranked the white above — the phone icon rendered navy on the blue
   circle. Matched depth. */
.about-actions .rs-iconbox-area .box-inner .icon-area { color: #FFFFFF; }
.about-actions .title { font-size: 14px; font-weight: 500; color: var(--color-text); margin: 0; }
.about-actions .desc { font-size: 18px; font-weight: 700; color: var(--color-secondary); margin: 0; }

/* ==================================================================
   VIDEO CTA — real values copied verbatim from post-26.css (the About
   page's own per-page stylesheet, since this widget instance's real
   hashes b2b74cd/54cc61e/5388596 live there, not in post-14.css).
================================================================== */
.video-cta-section {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 70px;
}
.video-cta-card {
    display: flex;
    min-height: 600px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 10px solid #FFFFFF;
    border-radius: 40px;
    margin: -300px auto 70px;
    max-width: 1310px;
    width: 100%;
    position: relative;
    z-index: 2;
    background-image: url('/frontend/images/about-video.jpg');
    background-size: cover;
    background-position: center;
}
.video-cta-badge .rs-button-rotating { background-color: transparent; background-image: radial-gradient(at center center, #7D7C8666 0%, #F2295B00 100%); backdrop-filter: blur(25px); padding: 6px; border: 1px solid #FFFFFF; }
.video-cta-badge .rs-button-rotating .button-logo { background-color: transparent; border: 1px solid #FFFFFF; }
.video-cta-badge .rs-button-rotating .button-logo svg { width: 22px; height: 22px; fill: #FFFFFF; }
.video-cta-badge .rs-button-rotating .text-wrapper span { font-size: 16px; font-weight: 400; text-transform: uppercase; color: #FFFFFF; }

/* ==================================================================
   SERVICES BENTO GRID — real values from post-14.css (hash 41f1349 and
   children). Column widths (intro ~40%, card columns ~28% each) aren't
   given as explicit real percentages in post-14.css; sized to match the
   real "1 large + 2x2" bento proportions the source visually shows.
================================================================== */
.services-bento-section {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 20px 80px;
}

.services-bento-shape { position: absolute; left: 0; bottom: 0; z-index: 0; pointer-events: none; }

/* User-directed: every card the same height. The intro/column wrappers are
   flattened with display:contents so all 5 cards (plus the heading) sit in
   ONE grid — filled column by column (heading, SEO | 2 cards | 2 cards) —
   and `1fr 1fr` rows make both rows as tall as the tallest card. Same
   40% / 28% / 28% column proportions as before. */
.services-bento-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 28fr) minmax(0, 28fr);
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    gap: 35px;
}

.services-bento-intro,
.services-bento-col { display: contents; }
.services-bento-heading { align-self: start; }
.services-bento-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }

/* real rs-service-grid.css already styles .rs-addon-services.style7 —
   only the card wrapper's real width:100% is needed here, plus the full
   grid-cell height so the equal row height actually reaches the card. */
.service-card { width: 100%; max-width: 100%; }
.service-card .rs-addon-services,
.service-card .rs-addon-services .services-inner { height: 100%; box-sizing: border-box; }

/* Real per-instance CSS (post-14.css) for these cards — card background
   always stays white, only the border and the icon-box swap to blue on
   hover. The icon itself sits in a real 65x65px, 10px-radius box
   (`.media_wrap`) with a light `#F5F6F7` background. */
.service-card .rs-addon-services .services-inner {
    background-color: #fff;
    border: 1px solid #E5EAFF;
    border-radius: 10px;
    box-shadow: 0 0 68px 9px rgba(0, 0, 0, .04);
    padding: 30px 25px 30px 35px;
    transition: border-color .3s ease;
}
.service-card .rs-addon-services .services-inner .media_wrap {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    background-color: #F5F6F7;
    margin-right: 30px;
    transition: background-color .3s ease;
    /* User-directed: icon centred with breathing room inside the box
       (was a 60px glyph filling the 65px box edge to edge). */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.service-card .rs-addon-services .services-inner .media_wrap .icon_style { display: flex; line-height: 0; }
.service-card .rs-addon-services .services-inner .media_wrap .icon_style svg { width: 34px; height: 34px; }
.service-card .rs-addon-services .services-inner .media_wrap .icon_style svg path { fill: var(--color-primary); transition: fill .3s ease; }

.service-card .rs-addon-services .services-inner:hover { border-color: var(--color-primary); }
.service-card .rs-addon-services .services-inner:hover .media_wrap { background-color: var(--color-primary); }
.service-card .rs-addon-services .services-inner:hover .media_wrap .icon_style svg path { fill: #fff; }

/* ==================================================================
   TEAM SLIDER — real padding from post-14.css (hash b00821e); the
   photo/info-panel proportions and slick-arrow positioning are the
   already-verified real values (measured directly against the live
   techtlk demo, not static-CSS-only reading).
================================================================== */
.team-slider-section {
    padding: 90px 20px;
}
.team-slider-inner { max-width: 1310px; margin: 0 auto; }

.team-slider-section .team-split { display: flex; flex-wrap: wrap; align-items: stretch; gap: 40px; }
.team-slider-section .team-photo-col { flex: 0 0 40%; max-width: 40%; min-width: 0; }
.team-slider-section .team-photo-col .slider-for { height: 100%; max-width: 100% !important; width: 100%; }

/* min-width:0 + overflow:hidden are required here: Slick's slide track
   carries a large explicit inline pixel width, and a flex item's default
   min-width:auto lets that content size override the flex-basis,
   ballooning this panel (and the whole row) far past the viewport. */
.team-slider-section .team-info-col { flex: 1 1 54%; min-width: 0; overflow: hidden; background: #F4F5FA; border-radius: 24px; padding: 40px; position: relative; }
.team-slider-section .team-slider-heading { margin-bottom: 32px; }
.team-slider-section .team-slider-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.team-slider-section .team-slider-heading p { color: var(--color-text); margin: 10px 0 0; }
.team-slider-section .team-info-col .rsaddon-slider-conf { display: none; }
.team-slider-section .team-info-col .rs-slide-nav { padding: 0 !important; background: transparent !important; }

/* Neutralize slick's own position:relative on .slider-nav so its
   absolutely-positioned prev/next arrows resolve against .team-info-col
   instead, letting them sit at the panel's top-right corner rather than
   pinned to the small thumbnail-track box itself. */
.team-slider-section .team-info-col .slider-nav.slick-slider { position: static; }
.team-slider-section .team-info-col .slick-prev,
.team-slider-section .team-info-col .slick-next { position: absolute !important; left: unset !important; top: unset !important; right: 40px !important; width: 44px; height: 44px; background: var(--color-primary) !important; border-radius: 50%; z-index: 2; }
.team-slider-section .team-info-col .slick-prev { top: 40px !important; }
.team-slider-section .team-info-col .slick-next { top: 92px !important; }

/* User-directed: name/designation bar background is white instead of the
   real theme's dark `rgba(3,51,51,.9)` overlay — since the real widget's
   `.team-name a{color:#fff}` never matches here (this markup's team-name
   has no real per-member profile link to wrap, unlike the source), the
   name already silently fell back to the global h3 dark-navy default;
   made that explicit and switched the title to a dark color too now that
   the bar is light. */
.team-slider-default .slider-for .team-inner-wrap .team-content { background: #fff; }
.team-slider-default .slider-for .team-inner-wrap .team-content .team-member-info .team-name { color: var(--color-heading); }
.team-slider-default .slider-for .team-inner-wrap .team-content .team-member-info .team-title { color: var(--color-text); }

/* User-directed: clicking "+" reveals the social icons just above the
   name/designation bar, not at the real theme's default top-right-of-photo
   position. The icons live inside the bar (team-slider.blade.php) and are
   anchored to its top edge, so a long name that makes the bar taller can't
   cover them; the name wraps beside a fixed-size "+" button. */
.team-slider-default .slider-for .team-inner-wrap .team-content .social-icons {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all 0.3s ease 0s;
    z-index: 3;
}
.team-slider-default .slider-for .team-inner-wrap.active .team-content .social-icons { opacity: 1; transform: scaleY(1); }
.team-slider-default .slider-for .team-inner-wrap .team-content .social-icons a { color: #fff; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: #0A165E; border-radius: 3px; }
.team-slider-default .slider-for .team-inner-wrap .team-content .social-icons a:hover { color: #2B4DFF; background: #fff; }
.team-slider-default .slider-for .team-inner-wrap .team-content { gap: 16px; }
.team-slider-default .slider-for .team-inner-wrap .team-content .team-member-info { flex: 1 1 auto; min-width: 0; }
.team-slider-default .slider-for .team-inner-wrap .team-content .team-member-info .team-name { overflow-wrap: anywhere; }
.team-slider-default .slider-for .team-inner-wrap .team-content .social-trigger-btn { flex: none; }

/* ==================================================================
   SUCCESS STORY — real values from post-14.css (hash 3a97aac and
   children).
================================================================== */
.success-story-section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-secondary);
    padding: 90px 20px 290px;
}
.success-story-inner { max-width: 1310px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 20px; }

.success-story-intro { position: relative; flex: 1 1 300px; max-width: 33%; z-index: 2; }
.success-story-intro .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.success-story-intro h2 { color: #FFFFFF; margin: 15px 0; }
.success-story-review { color: #FFFFFFB3; margin: 0; }
/* User-directed: bigger + animated (real `spine` keyframes from
   image-widget.css, reused directly rather than fighting that CSS's
   `.rs-image` ancestor requirement); `gsap-move-yes down-80 start-20` on
   the wrapper adds real scroll-linked vertical movement, same mechanism
   already used elsewhere in this port). */
.success-story-shape { margin-top: 20px; }
.success-story-shape img { width: 220px; height: auto; animation: spine 30s linear infinite; }

.success-story-partners { display: flex; flex-wrap: wrap; gap: 15px; flex: 1 1 320px; max-width: 33%; align-content: flex-start; z-index: 2; position: relative; }
/* User-directed: bigger partner cards. */
.success-story-partner-card { background-color: var(--color-card-dark); border: 1px solid #FFFFFF0F; border-radius: 10px; padding: 32px 28px; display: flex; align-items: center; justify-content: center; width: calc(50% - 8px); }
.success-story-partner-card img { max-width: 130px; width: 100%; height: auto; }

.success-story-stats {
    display: flex;
    flex-direction: column;
    width: 300px;
    max-width: 100%;
    background-color: var(--color-card-dark);
    border: 1px solid #FFFFFF0D;
    border-radius: 10px;
    padding: 35px 30px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.success-story-stat { width: 100%; text-align: center; padding-bottom: 20px; }
.success-story-stat + .success-story-stat { border-top: 1px solid #FFFFFF17; padding-top: 20px; }
.success-story-stat .count-number { display: flex; align-items: baseline; justify-content: center; }
.success-story-stat .rs-counter, .success-story-stat .prefix { color: #FFFFFF; font-size: 40px; font-weight: 700; }
.success-story-stat .title { display: block; color: #FFFFFF; font-size: 16px; font-weight: 500; margin-top: 8px; }

/* Real decorative shapes carried by the stats box, all absolute-
   positioned and bleeding outside its own narrow box (real LTR values
   from post-14.css). z-index:-1 keeps them painting behind the box's own
   in-flow counter text. */
.success-story-stat-shape { position: absolute; z-index: -1; pointer-events: none; }
.success-story-stat-shape--corner { right: 0; top: 0; }
.success-story-stat-shape--right { right: 40px; bottom: 279px; }

/* User-directed: moved out of the stats box (where it used to bleed off
   the box's own bottom-left, mostly clipped by that box's own
   `overflow:hidden`) to the whole section's bottom-left corner instead.
   bottom:240px (not 0) keeps this clear of the next section's white
   tech-logos-card, which overlaps success-story-section's bottom ~200px
   via a negative margin pull-up — position:0 would sit entirely
   underneath it and never be visible. */
.success-story-section-shape { position: absolute; left: 0; bottom: 240px; z-index: 1; pointer-events: none; }

/* ==================================================================
   TECHNOLOGY LOGOS — real values from post-14.css (hashes 423d6f4/
   2cbc46e): a white rounded card pulled up -200px to overlap the dark
   Success Story section above it.
================================================================== */
.tech-logos-section {
    display: flex;
    padding: 0 20px 90px;
}
.tech-logos-card {
    width: 100%;
    max-width: 1310px;
    margin: -200px auto 0;
    position: relative;
    z-index: 3;
    background: #FFFFFF;
    border: 1px solid #3672FF21;
    border-radius: 15px;
    box-shadow: 0 4px 30px rgba(14, 73, 206, .04);
    padding: 50px 60px;
}
.tech-logos-heading { text-align: center; margin-bottom: 30px; }
.tech-logos-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.tech-logos-heading h2 { margin: 10px 0 0; }

.tech-logos-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.tech-logos-item { width: 16.6667%; box-sizing: border-box; padding: 10px; text-align: center; }
.tech-logos-name { display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; color: var(--color-secondary); padding: 20px 10px; border: 1px solid #EAF1FF; border-radius: 10px; height: 100%; }
.tech-logos-name small { font-weight: 400; opacity: .6; margin-top: 4px; }

/* ==================================================================
   WHY CHOOSE US — real padding from post-14.css (hash 628ae6a); the
   forced-row layout and 50%/46% column proportions are the
   already-verified real values needed because the real theme's own base
   rule defaults e-con-inner to column (Elementor's own default), which
   the real rendered page overrides for this section.
================================================================== */
.why-choose-section {
    padding: 0 20px 90px;
}
/* align-items:flex-start (was center): the heading column and the cards
   column start on the same top line. */
.why-choose-inner { max-width: 1310px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; column-gap: 40px; }

.why-choose-content { flex: 1 1 50%; width: 50%; max-width: 50%; min-width: 0; }
.why-choose-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.why-choose-heading p { color: var(--color-text); margin: 15px 0 0; }
/* The real why_choose01.jpg is a wide/short landscape photo — at
   width:100%;height:auto it renders quite short, leaving this column
   noticeably shorter than the steps column beside it. Enlarged with a
   taller fixed aspect ratio + object-fit:cover so the column height
   closes that gap. */
.why-choose-image { width: 100%; height: 340px; object-fit: cover; border-radius: 10px; margin-top: 30px; display: block; }

.why-choose-steps { flex: 0 0 46%; width: 46%; max-width: 46%; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.why-choose-steps .rs-addon-services.style7 .services-inner { background: #FFFFFFF7; padding: 25px 25px 20px 30px; border-radius: 10px; border: 1px solid #E5EAFF; display: flex; align-items: flex-start; gap: 15px; transition: .3s; }
.why-choose-steps .rs-addon-services.style7 .services-inner:hover { border-color: var(--color-primary); }
.why-choose-steps .media_wrap { background: var(--color-surface); width: 65px; height: 65px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; transition: .3s; }
.why-choose-steps .media_wrap svg { width: 28px; height: 28px; }
/* Icon paths carry no fill of their own (rendered black) — brand blue,
   turning white on hover via the rule below. */
.why-choose-steps .media_wrap svg path { fill: var(--color-primary); transition: fill .3s ease; }
.why-choose-steps .services-inner:hover .media_wrap { background: var(--color-primary); }
.why-choose-steps .services-inner:hover .media_wrap svg path { fill: #FFFFFF; }
.why-choose-steps .services-title .title { font-size: 17px; line-height: 27px; color: var(--color-secondary); margin: 0 0 10px; }
.why-choose-steps .desc-text { font-size: 15px; color: var(--color-text); margin: 0; }

/* ==================================================================
   PORTFOLIO — real values from post-14.css (hash 1e75611 and children):
   subtle gray-to-white background gradient, real 120px side gutters on
   the slider row, real "More Projects" row padding/divider width.
================================================================== */
.portfolio-section {
    background-image: linear-gradient(180deg, var(--color-surface) 52%, #FFFFFF 0%);
    padding: 85px 5px 0;
}
.portfolio-inner { max-width: 1310px; margin: 0 auto; }

.portfolio-heading { text-align: center; }
.portfolio-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.portfolio-heading h2 { margin: 10px 0 0; }

/* Real per-instance padding (post-14.css) for the container holding both the
   slider and the "More Projects" row below it — 120px side gutters on
   desktop, collapsing to 0 below 1366px (the slider's own internal gutters
   still keep the cards inset). */
/* 3 cards per row on desktop: the full 1310px row (the 120px gutters were sized for 2 wide cards). */
.portfolio-slider-wrap { padding: 50px 0 0; }

/* Real DP portfolio images are full-page screenshots, not pre-cropped hero
   shots — cropping to a consistent card ratio here matches the theme's own
   presentational intent. */
.portfolio-item .portfolio-img { aspect-ratio: 16 / 11; }
.portfolio-item .portfolio-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.portfolio-item .portfolio-content { background-color: #FFFFFF; border: 1px solid #2B4DFF12; margin: -60px 0 0 30px; }
/* Home slider: the theme centres slides of different heights vertically (titles of 1–4 lines),
   which staggered the row — stretch every card to the row's height so images start on one
   line and the content boxes end together. */
.portfolio-section .rs-portfolio-slider .rs-addon-sliders .slick-list .slick-track { align-items: stretch; }
.portfolio-section .rs-portfolio-slider .slick-initialized .slick-slide { display: flex; flex-direction: column; height: auto; }
.portfolio-section .rs-portfolio-slider .portfolio-item { display: flex; flex-direction: column; flex: 1 1 auto; }
.portfolio-section .rs-portfolio-slider .portfolio-item .portfolio-img { flex: 0 0 auto; min-height: 0; overflow: hidden; }
.portfolio-section .rs-portfolio-slider .portfolio-item .portfolio-content { flex: 1 1 auto; }

/* Real value (post-14.css) — was missing entirely, so adjacent slides had
   no visual gap between them. */
.rs-portfolio-slider .grid-item { padding: 0 15px; }

/* Real per-instance position (hash a741fad, post-14.css): the arrow pair
   sits bottom-right of the slider, in the same visual row as "More
   Projects" + the divider — NOT floating over the slide images at the
   slider's own left/right edges (Slick's own default). */
.rs-portfolio-slider .slick-arrow.slick-prev,
.rs-portfolio-slider .slick-arrow.slick-next {
    top: unset;
    bottom: -90px;
    left: unset;
    /* Real post-14.css only sets this on .slick-next, leaving .slick-prev at
       the generic 3px default (near-square) — a visible mismatch against
       the reference image, where both arrows are matching full circles, so
       applied to both here. */
    border-radius: 50%;
}
.rs-portfolio-slider .slick-arrow.slick-prev { right: 66px; }
.rs-portfolio-slider .slick-arrow.slick-next { right: 20px; }
/* rsaddons.css's own hover rules (`:hover .slick-prev{left:-60px}` /
   `:hover .slick-next{right:-60px}`, matching specificity) would otherwise
   slide the arrows outward the moment the slider is hovered — pin both
   axes to the resting position so the pair stays put. */
.rs-portfolio-slider:hover .slick-arrow.slick-prev,
.rs-portfolio-slider:hover .slick-arrow.slick-next { left: unset; }
.rs-portfolio-slider:hover .slick-arrow.slick-prev { right: 66px; }
.rs-portfolio-slider:hover .slick-arrow.slick-next { right: 20px; }

.portfolio-actions { display: flex; flex-direction: row; align-items: center; padding-left: 10px; margin-top: 30px; }
.portfolio-actions .rs-divider { background-color: #2B4DFF14; width: 79%; height: 1px; }

/* ==================================================================
   TESTIMONIALS + INDUSTRY EXPERTISE — real values from post-14.css (hash
   4a0068b and children): shared transparent-to-navy gradient background,
   real left/right split for Industry Expertise (content 32%, cards 65%)
   with the theme's real rotating globe decoration.
================================================================== */
.testimonials-industry-section {
    background-image: linear-gradient(180deg, #0A165E00 28%, #0A165E 0%);
    padding: 85px 10px 150px;
}
.testimonials-industry-inner { max-width: 1310px; margin: 0 auto; }

/* ---------- Testimonials ---------- */
.testimonials-block { padding-bottom: 60px; }
/* The heading sits on the section's transparent (white) top band — the navy
   half of the gradient only starts lower — so it needs the dark heading
   color; white made it invisible. Eyebrow above the title, like the other
   section headings. */
.testimonials-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 30px; }
.testimonials-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.testimonials-heading h2 { color: var(--color-secondary); margin: 0; }
.testimonials-empty p { color: #FFFFFFB3; margin: 0; }

/* Equal card height: flex the track and let each slide stretch. The ID
   carries .rs-testimonial-slider.style2 itself (not an ancestor), and each
   .grid-item IS the .slick-slide, so the slide's height must be auto (not
   slick.css's height:100%) for align-items:stretch to take effect. */
#rsaddon-slick-slider-testimonial.slick-initialized .slick-track { display: flex !important; align-items: stretch; }
#rsaddon-slick-slider-testimonial .slick-slide { height: auto; }
.testimonials-block .rs-testimonial-slider.style2 .grid-item { padding-left: 15px; padding-right: 15px; margin: 0 0 30px; box-sizing: border-box; }
.testimonials-block .rs-testimonial-slider.style2 .testimonial-inner { background-color: #FFFFFF; display: flex; flex-direction: column; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 30px; border-radius: 10px; border: 1px solid #4970E154; position: relative; overflow: hidden; }
.testimonials-block .testimonial-inner .quote_icon { position: absolute; right: 30px; bottom: 20px; opacity: .1; }
.testimonials-block .testimonial-inner .quote_icon svg { width: 50px; height: auto; fill: var(--color-primary); }
.testimonials-block .testimonial-inner .vendor-img { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; margin: 0 0 20px; flex-shrink: 0; font-size: 20px; }
.testimonials-block .testimonial-inner .vendor-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.testimonials-block .testimonial-inner .vendor-img--initials { display: flex; align-items: center; justify-content: center; background: var(--color-secondary); color: #fff; font-weight: 700; }
.testimonials-block .testimonial-inner .testi-card-bottom { text-align: left; position: relative; z-index: 1; }
.testimonials-block .testimonial-inner .desc { font-size: 20px; line-height: 30px; font-style: italic; color: var(--color-text); margin: 0 0 16px; }
.testimonials-block .testimonial-inner .content-part .name { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--color-secondary); }
.testimonials-block .testimonial-inner .content-part .testi-designation { font-size: 14px; color: var(--color-text); }
/* User-directed: shorter cards (quotes stay complete). Quote on top, then
   the avatar beside the name/role in one bottom row instead of the avatar
   on its own line above the quote; 16px quote text. .testi-card-bottom is
   flattened with display:contents so its quote + name join the card grid. */
.testimonials-block .rs-testimonial-slider.style2 .testimonial-inner { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "desc desc" "img name"; column-gap: 14px; row-gap: 20px; align-items: start; padding: 28px 30px 26px; }
.testimonials-block .testimonial-inner .testi-card-bottom { display: contents; }
.testimonials-block .testimonial-inner .desc { grid-area: desc; font-size: 16px; line-height: 27px; margin: 0; position: relative; z-index: 1; }
.testimonials-block .testimonial-inner .vendor-img { grid-area: img; width: 52px; height: 52px; margin: 0; align-self: center; font-size: 16px; }
.testimonials-block .testimonial-inner .content-part { grid-area: name; align-self: center; position: relative; z-index: 1; }
.testimonials-block .testimonial-inner .content-part .name { font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.testimonials-block .testimonial-inner .quote_icon svg { width: 40px; }

/* ---------- Industry Expertise ---------- */
.industry-block { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.industry-content { width: 32%; flex-shrink: 0; }
.industry-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.industry-heading h2 { color: #FFFFFF; margin: 15px 0; }
.industry-heading p { color: #FFFFFFB3; margin: 0 0 20px; }

.industry-cards { width: 65%; margin-left: 10px; position: relative; flex-shrink: 0; }
.industry-cards-globe { position: absolute; top: 50%; right: -40px; transform: translateY(-50%); width: 340px; height: 340px; opacity: .35; pointer-events: none; }

.industry-cards .rs-service-list .services-inner { background-color: var(--color-card-dark); padding: 16px 20px; border-radius: 10px; border: 1px solid #FFFFFF0F; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; overflow: hidden; }
.industry-cards .rs-service-list .row > * { margin-bottom: 20px; }
.industry-cards .rs-service-list .services-inner .top-wrapper { display: flex; align-items: center; gap: 10px; min-width: 0; }
.industry-cards .rs-service-list .services-inner .title { color: #FFFFFF; font-size: 17px; margin: 0; }
.industry-cards .rs-service-list .services-inner .icon-wrap { flex-shrink: 0; color: #FFFFFF; }
.industry-cards .rs-service-list .services-inner .icon-wrap svg { width: 28px; height: 28px; }
/* White icons: rs-service-list.css paints every icon path brand blue
   (`.rs-service-list .services-inner .icon-wrap svg path`) — follow the
   icon's colour instead (white; brand blue on hover). */
.industry-cards .rs-service-list .services-inner .icon-wrap svg,
.industry-cards .rs-service-list .services-inner .icon-wrap svg path { fill: currentColor; }
.industry-cards .rs-service-list .services-inner .bottom-wrapper { display: flex; flex-shrink: 0; margin: 0; }
.industry-cards .rs-service-list .services-inner .btn-part { color: #FFFFFF; font-size: 20px; line-height: 1; }
.industry-cards .rs-service-list.animate-border .services-inner:after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: width .3s ease; }
.industry-cards .rs-service-list .services-inner:hover { background-color: #15216f; }
.industry-cards .rs-service-list .services-inner:hover .icon-wrap,
.industry-cards .rs-service-list .services-inner:hover .btn-part { color: var(--color-primary); }
.industry-cards .rs-service-list.animate-border .services-inner:hover:after { width: 100%; }

/* ==================================================================
   CTA BANNER — real values from post-14.css (hash 1dfc840 and children):
   full-width blue card, heading column left (48%), WhatsApp button +
   phone iconbox right (50%), real e-global-color-primary background.
================================================================== */
/* User-directed: pulled up to overlap the bottom of the navy
   testimonials/industry band above. */
.cta-banner-section { padding: 0 20px; position: relative; z-index: 2; margin-top: -90px; }
.cta-banner-inner {
    max-width: 1310px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background-color: var(--color-primary);
    border-radius: 15px;
    padding: 80px 30px;
}

/* Heading left, actions right on one row — the old 48% + 50% widths plus
   the 30px gap overflowed 100%, wrapping the actions under the heading. */
.cta-banner-heading { flex: 1 1 0; min-width: 0; }
.cta-banner-heading h2 { color: #FFFFFF; margin: 0; text-align: left; }

.cta-banner-actions { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 30px; }
.cta-banner-actions .rs-button .rs-btn { background-color: #FFFFFF; color: var(--color-primary); border-radius: 5px; padding: 18px 30px; font-weight: 500; }
.cta-banner-actions .rs-iconbox-area .box-inner { display: flex; align-items: center; gap: 14px; }
.cta-banner-actions .icon-area { background: #FFFFFF; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex: none; }
.cta-banner-actions .title { font-size: 14px; font-weight: 500; color: #FFFFFFB3; margin: 0; }
/* iconbox.css's `.rs-iconbox-area .box-inner .text-area .title{color:#121933}`
   out-ranks the rule above (dark text on the blue card) — matched depth. */
.cta-banner-actions .rs-iconbox-area .box-inner .text-area .title { color: #FFFFFFB3; }
.cta-banner-actions .icon-area svg { fill: currentColor; }
.cta-banner-actions .desc { font-size: 18px; font-weight: 700; color: #FFFFFF; margin: 0; }

/* ==================================================================
   BLOG — real values from post-14.css (hash 2614d58 and children). Real
   widget CSS (blog-slider.css) makes .blog-inner-wrap a row flex (image
   43% left, content 57% right) at desktop; that per-instance sizing plus
   equal card height needed to be added explicitly.
================================================================== */
.blog-section { padding: 85px 20px 100px; }
.blog-inner { max-width: 1310px; margin: 0 auto; }

.blog-heading { text-align: center; }
.blog-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.blog-heading h2 { margin: 10px 0 0; }

.blog-slider-wrap { margin-top: 30px; }

.blog-slider-wrap #prelements-slick-slider-blog.slick-initialized .slick-track { display: flex !important; align-items: stretch; }
.blog-slider-wrap #prelements-slick-slider-blog .slick-slide { height: auto; }
.blog-slider-wrap #prelements-slick-slider-blog .slick-slide > div,
.blog-slider-wrap .pre-blog-item { height: 100%; }
.blog-slider-wrap .pre-blog-item { padding: 0 15px; box-sizing: border-box; }
/* User-directed: image on top of each card, text below (was a 43% / 57%
   side-by-side row). 4-class selectors to out-rank blog-slider.css's own
   `.prelements-blog-slider .blog_style_style2 .pre-blog-item …` widths. */
.blog-slider-wrap .pre-blog-item .blog-inner-wrap { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; border-radius: 10px; overflow: hidden; background: #FFFFFF; box-shadow: 0 4px 30px rgba(14, 73, 206, .06); }
.blog-slider-wrap .blog_style_style2 .pre-blog-item .pre-image-wrap { flex-shrink: 0; width: 100%; }
.blog-slider-wrap .blog_style_style2 .pre-blog-item .pre-image-wrap .rs--thum { display: block; height: 280px; overflow: hidden; }
.blog-slider-wrap .pre-blog-item .pre-image-wrap .rs--thum img { height: 100%; width: 100%; object-fit: cover; transition: transform .6s ease; }
.blog-slider-wrap .pre-blog-item:hover .pre-image-wrap .rs--thum img { transform: scale(1.04); }
.blog-slider-wrap .blog_style_style2 .pre-blog-item .pre-blog-content { display: flex; flex-direction: column; justify-content: flex-start; flex: 1 1 auto; width: 100%; padding: 28px 30px 30px; }
.blog-slider-wrap .pre-blog-item .blog-btn-part { margin-top: auto; }
/* User-directed: description limited to 2 lines, ending in "…". */
.blog-slider-wrap .pre-blog-item .pre-content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-bottom: 22px; }

/* User-directed: "Discover More" left, divider line, slider arrows right —
   same row pattern as Portfolio's "More Projects" row. The arrows are moved
   here by Slick's appendArrows, out of the .prelements-addon-slider scope
   that styled them, so their look (rsaddons.css: 40px blue button,
   remixicon glyph; round like the Portfolio pair) is restated here. */
.blog-actions { display: flex; flex-direction: row; align-items: center; gap: 20px; margin-top: 40px; padding: 0 15px; }
.blog-actions .rs-divider { flex: 1 1 auto; height: 1px; background-color: #2B4DFF14; }
.blog-slider-nav { display: flex; gap: 6px; flex-shrink: 0; }
.blog-slider-nav:empty { display: none; }
.blog-slider-nav .slick-arrow {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    font-size: 0;
    color: #fff;
    background-color: var(--color-primary);
    cursor: pointer;
    transition: background-color .3s ease;
}
.blog-slider-nav .slick-arrow:hover,
.blog-slider-nav .slick-arrow:focus { background-color: var(--color-secondary); color: #fff; }
.blog-slider-nav .slick-arrow.slick-disabled { opacity: .5; cursor: default; }
.blog-slider-nav .slick-arrow:before { font-family: "remixicon"; font-size: 18px; line-height: 1; color: inherit; opacity: 1; }
.blog-slider-nav .slick-arrow.slick-prev:before { content: "\ea60"; }
.blog-slider-nav .slick-arrow.slick-next:before { content: "\ea6c"; }

/* ==================================================================
   CONTACT — real values from post-14.css (hash 1661fdf and children):
   real e-global-color-0cfc571 (#F5F6F7) background, real bordered form
   card (1px solid #3672FF30, 10px radius, 55/50px padding). No explicit
   per-instance width existed for the two columns (Elementor's own
   e-con-boxed default flex applied) — sized here to a balanced
   two-column split that matches the real visual proportions.
================================================================== */
.contact-section {
    background-color: var(--color-surface);
    padding: 90px 20px;
}
.contact-inner { max-width: 1310px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px; align-items: stretch; }

.contact-info-col { flex: 1 1 460px; max-width: 48%; }
.contact-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.contact-heading h2 { margin: 15px 0; }
.contact-heading p { color: var(--color-text); margin: 0 0 30px; }

.rs-contact-box { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.rs-contact-box .address-item { display: flex; align-items: center; gap: 16px; }
.rs-contact-box .address-icon { width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 20px rgba(14, 73, 206, .08); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex: none; }
.rs-contact-box .address-text .label { display: block; font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--color-text); margin-bottom: 2px; }
.rs-contact-box .address-text a,
.rs-contact-box .address-text { color: var(--color-secondary); font-weight: 600; }

/* Home/About "Free Consultation" list. rsaddons.css/default.css set
   `.rs-contact-box .address-item .address-icon{display:inline-block}` and
   `... .address-text span.label{display:inline-block}` — both out-rank the
   2-class rules above, which left the icon glyph stuck top-left of its
   circle. Matched depth here, scoped to this section only (Contact Us
   page's own detail cards share .rs-contact-box and keep their look).
   User-directed: label as a heading on top, the detail as text below. */
.contact-section .rs-contact-box .address-item .address-icon { display: flex; align-items: center; justify-content: center; }
.contact-section .rs-contact-box .address-item .address-icon svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.contact-section .rs-contact-box .address-item .address-text { color: var(--color-text); font-weight: 400; }
.contact-section .rs-contact-box .address-item .address-text span.label { display: block; font-size: 18px; line-height: 26px; font-weight: 600; text-transform: none; color: var(--color-secondary); margin-bottom: 4px; }
.contact-section .rs-contact-box .address-item .address-text a { color: var(--color-text); font-weight: 400; }
.contact-section .rs-contact-box .address-item .address-text a:hover { color: var(--color-primary); }

.contact-map { border-radius: 10px; overflow: hidden; }
.contact-map iframe { border: 0; width: 100%; height: 260px; display: block; }
/* User-directed: Free Consultation map inside the section, at 100% of the
   section's content width (below both columns, aligned with them). */
.contact-map.contact-map--full { width: 100%; max-width: 1310px; margin: 40px auto 0; border-radius: 10px; }
.contact-map.contact-map--full iframe { height: 420px; }

.contact-form-col {
    flex: 1 1 460px;
    max-width: 48%;
    background: #FFFFFF;
    border: 1px solid #3672FF30;
    border-radius: 10px;
    padding: 55px 50px;
}
.contact-form-col .wpcf7-form-control-wrap input,
.contact-form-col .wpcf7-form-control-wrap textarea {
    width: 100%;
    border: 1px solid var(--color-border-light);
    border-radius: 5px;
    padding: 14px 18px;
    margin-top: 10px;
    font-family: var(--font-primary), sans-serif;
    color: var(--color-secondary);
}
.contact-form-col .wpcf7-not-valid-tip { color: #E23A3A; font-size: 13px; }
.contact-form-col .form-btn-area { margin-top: 10px; }
.contact-form-col .wpcf7-submit { background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%); color: #fff; border: 0; border-radius: 5px; padding: 16px 34px; font-weight: 500; cursor: pointer; }
.contact-form-col .wpcf7-response-output { background: #E9F7EF; color: #1E7E34; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; }

/* ==================================================================
   ABOUT US PAGE — genuinely new sections only (Video CTA, Success
   Story, Marquee and Contact are reused verbatim from the sections
   above — see resources/views/frontend/about.blade.php). Real values
   from post-26.css, the About page's own per-page stylesheet.
================================================================== */

/* ---------- Hero (hashes 1f15230/683430a/8709e3e/da7f186/7b718ef) ---------- */
.about-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    padding: 110px 20px 110px 160px;
    background-image: url('/techtlk/wp-content/uploads/2025/01/page-banner.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.about-hero-shape { position: absolute; z-index: 0; pointer-events: none; }
.about-hero-shape--spin { left: 150px; bottom: -195px; }
.about-hero-shape--spin img { animation: spine 30s linear infinite; }
.about-hero-shape--static { right: 0; bottom: 0; }
.about-hero-title { position: relative; z-index: 1; color: #fff; font-size: 60px; line-height: 60px; margin: 0; }
.about-hero-breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 700; }
.about-hero-breadcrumb a { color: #fff; text-decoration: none; }
.about-hero-breadcrumb a:hover { color: var(--color-primary); }
.about-hero-breadcrumb .current { opacity: .8; }

/* ---------- About Company (hash 4b11310 and children) ---------- */
.about-company-section {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    padding: 120px 20px 0;
    margin-bottom: 420px;
}
.about-company-media { position: relative; flex: 1 1 420px; max-width: 42%; min-height: 520px; }
.about-company-photo--base { width: 100%; height: auto; border-radius: 30px; display: block; margin-left: 50px; }
.about-company-photo--framed { position: absolute; top: 35px; left: -20px; width: 62%; height: auto; border-radius: 15px; border: 7px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .12); z-index: 2; }
.about-company-counter-card {
    position: absolute;
    left: 0;
    bottom: 35px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .06);
    padding: 15px;
}
.about-company-counter-card .counter-top-area { text-align: left; }
.about-company-counter-card .count-text { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.about-company-counter-card .count-number { display: flex; align-items: baseline; }
.about-company-counter-card .rs-counter, .about-company-counter-card .prefix { color: var(--color-primary); font-size: 28px; font-weight: 700; }
.about-company-counter-card .count-text .title { display: block; color: var(--color-text); font-size: 13px; font-weight: 500; line-height: 1.4; margin: 0; }
.about-company-counter-card .rs-iconbox-area .box-inner { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--color-border-light); padding-left: 15px; }
.about-company-counter-card .icon-area { color: var(--color-primary); font-size: 20px; }
.about-company-counter-card .text-area .title { font-size: 14px; font-weight: 500; color: var(--color-secondary); margin: 0; white-space: nowrap; }
.about-company-badge { position: absolute; top: 15px; right: 15px; z-index: 2; width: 60px; height: 60px; border-radius: 23px; background-color: #D2DAFF; display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 30px; }

.about-company-content { flex: 1 1 420px; max-width: 45%; }
.about-company-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.about-company-heading h2 { margin: 15px 0; }
.about-company-desc p { color: var(--color-text); margin: 0 0 10px; }

.about-company-value-grid { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 0; margin-top: 15px; padding-bottom: 35px; }
.about-company-value-col { display: flex; flex-direction: column; gap: 10px 0; width: 50%; }
.about-company-value-col .rs-iconbox-area .box-inner { display: flex; align-items: center; gap: 10px; text-align: left; }
.about-company-value-col .title { font-weight: 500; color: var(--color-secondary); margin: 0; }
.about-company-value-col .icon-area { color: var(--color-primary); font-size: 18px; }
.about-company-value-grid .rs-divider { position: absolute; left: 0; bottom: 0; background: #2B4DFF1A; width: 100%; height: 1px; }

.about-company-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 20px; }
.about-company-actions .rs-button .rs-btn { background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%); border-radius: 5px; padding: 20px; font-weight: 500; color: #fff; }
.about-company-actions .rs-iconbox-area .box-inner { display: flex; align-items: center; gap: 14px; }
.about-company-actions .icon-area { background: var(--color-primary); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex: none; }
.about-company-actions .title { font-size: 14px; font-weight: 500; color: var(--color-text); margin: 0; }
.about-company-actions .desc { font-size: 18px; font-weight: 700; color: var(--color-secondary); margin: 0; }

/* ---------- Video CTA + Why Choose Us (hashes b2b74cd/54cc61e shared with
   Home's own Video CTA section — that section's own CSS above handles the
   video card itself; only the wrapping background + "Why Choose Us"
   content below are new here) ---------- */
.about-why-choose-wrap { background-color: var(--color-surface); padding-bottom: 90px; }
.about-why-choose-inner { max-width: 1310px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 40px; padding: 0 20px; }

.about-why-choose-content { flex: 1 1 380px; max-width: 42%; }
.about-why-choose-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.about-why-choose-heading h2 { margin: 15px 0 20px; }
.about-why-choose-heading p { color: var(--color-text); margin: 0; }
.about-why-choose-image { width: 100%; height: auto; border-radius: 10px; margin-top: 20px; display: block; }

.about-why-choose-cards { flex: 1 1 380px; max-width: 48%; display: flex; flex-direction: column; gap: 20px; }
.about-why-choose-cards .rs-addon-services.style7 .services-inner { background: #FFFFFFF7; padding: 25px 25px 20px 30px; border-radius: 10px; border: 1px solid #E5EAFF; display: flex; align-items: flex-start; gap: 15px; transition: .3s; }
.about-why-choose-cards .rs-addon-services.style7 .services-inner:hover { border-color: var(--color-primary); }
.about-why-choose-cards .media_wrap { background: var(--color-surface); width: 65px; height: 65px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; transition: .3s; }
.about-why-choose-cards .media_wrap svg, .about-why-choose-cards .media_wrap i { color: var(--color-primary); font-size: 28px; }
.about-why-choose-cards .services-inner:hover .media_wrap { background: var(--color-primary); }
.about-why-choose-cards .services-inner:hover .media_wrap i { color: #FFFFFF; }
.about-why-choose-cards .services-title .title { font-size: 17px; line-height: 27px; color: var(--color-secondary); margin: 0 0 10px; }
.about-why-choose-cards .desc-text { font-size: 15px; color: var(--color-text); margin: 0; }

/* ---------- Team Slider style9 (hashes 4d32088/cd97f45/ca310cf) — the
   widget's own team-slider-widget.css already fully styles
   .team-slider-style9 (card, hover reveal, etc.); only section chrome +
   the real per-instance card border/margin override are added here. ---------- */
.about-team-section { padding: 85px 5px 80px; }
.about-team-inner { max-width: 1330px; margin: 0 auto; }
.about-team-heading { text-align: center; margin-bottom: 20px; }
.about-team-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.about-team-heading h2 { margin: 10px 0 15px; }
.about-team-heading p { color: var(--color-text); margin: 0; }
.about-team-section .rs-addon-slider .team-item .team-inner-wrap { margin: 15px; border: 1px solid #3672FF30; }

/* ==================================================================
   BLOG PAGE (listing + single post) — real widget/theme classes
   (#rs-blog, .blog-item, .bs-sidebar, .single-content-full etc.) are
   already fully styled via the theme's own default.css/responsive.css
   (loaded globally by masterlayout.blade.php), same as the header/nav/
   footer chrome — no new CSS needed for those. Only the hero (same
   real page-banner.jpg + shape pattern as about-hero, values from
   post-17445.css / post-23980.css) and the section's own vertical
   spacing (no dedicated real rule found for #rs-blog itself) are new.
================================================================== */
.blog-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    padding: 110px 20px 110px 160px;
    background-image: url('/techtlk/wp-content/uploads/2025/01/page-banner.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.blog-hero-shape { position: absolute; z-index: 0; pointer-events: none; }
.blog-hero-shape--spin { left: 150px; bottom: -195px; }
.blog-hero-shape--spin img { animation: spine 30s linear infinite; }
.blog-hero-shape--static { right: 0; bottom: 0; }
.blog-hero-title { position: relative; z-index: 1; color: #fff; font-size: 60px; line-height: 60px; margin: 0; }
.blog-hero-meta { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; color: #FFFFFFB5; font-size: 15px; }
.blog-hero-meta i { margin-right: 6px; }
.blog-hero-breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 700; }
.blog-hero-breadcrumb a { color: #fff; text-decoration: none; }
.blog-hero-breadcrumb a:hover { color: var(--color-primary); }
.blog-hero-breadcrumb .current { opacity: .8; }

#rs-blog.blog-page { padding: 80px 0; }
.blog-empty-state { color: var(--color-text); }
.blog-single-img { margin-bottom: 30px; }
.blog-single-img img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* ==================================================================
   SERVICES FOR AGENCIES (7 real pages — see AppServiceProvider::
   AGENCY_SERVICE_SLUGS) — driven by each Service's own classified
   `sections`/`faqs` data (arbitrary length/shape per service), so
   this is real reusable component CSS, not per-instance hash values
   like Home/About. Card/button/banner components deliberately reuse
   already-built real classes (`.rs-addon-services.style7`/`.media_wrap`,
   `.rs-button.style1`, `.cta-banner-inner`) instead of duplicating them.
================================================================== */

/* ---------- Hero (same real page-banner.jpg + shape pattern as
   about-hero/blog-hero; the eyebrow pill has no literal real-theme
   widget behind it — a small consistent addition, not decoration,
   carrying over the old page's own archetype label) ---------- */
.service-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 110px 20px 110px 160px;
    background-image: url('/techtlk/wp-content/uploads/2025/01/page-banner.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.service-hero-shape { position: absolute; z-index: 0; pointer-events: none; }
.service-hero-shape--spin { left: 150px; bottom: -195px; }
.service-hero-shape--spin img { animation: spine 30s linear infinite; }
.service-hero-shape--static { right: 0; bottom: 0; }
.service-hero-eyebrow { position: relative; z-index: 1; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); color: #fff; padding: 6px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.service-hero-eyebrow svg { width: 15px; height: 15px; }
.service-hero-eyebrow i { font-size: 16px; line-height: 1; }
.service-hero-title { position: relative; z-index: 1; color: #fff; font-size: 52px; line-height: 60px; margin: 0; max-width: 780px; }
.service-hero-subtext { position: relative; z-index: 1; color: #FFFFFFB5; font-size: 17px; line-height: 27px; max-width: 620px; margin: 0; }
.service-hero-breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 700; }
.service-hero-breadcrumb a { color: #fff; text-decoration: none; }
.service-hero-breadcrumb a:hover { color: var(--color-primary); }
.service-hero-breadcrumb .current { opacity: .8; }

/* ---------- Content wrapper + alternating tinted blocks ---------- */
.agency-service-section { padding: 0 20px; }
.agency-service-inner { max-width: 980px; margin: 0 auto; }
.agency-block { padding: 56px 0; }
.agency-block--tinted { background: var(--color-surface); margin: 0 -60px; padding: 56px 60px; border-radius: 20px; }
.agency-block-heading { margin: 0 0 14px; }
.agency-block-intro { color: var(--color-text); line-height: 27px; margin: 0 0 12px; max-width: 760px; }
.agency-block-intro:last-of-type { margin-bottom: 0; }

/* ---------- Statement banner (full-bleed emphasis line) ---------- */
.agency-statement { background: var(--color-secondary); border-radius: 20px; padding: 60px 40px; text-align: center; margin: 40px 0; }
.agency-statement-text { color: #fff; font-size: 28px; line-height: 1.3; font-weight: 700; margin: 0; max-width: 720px; margin-left: auto; margin-right: auto; }
.agency-statement-sub { color: #FFFFFFB5; margin: 12px auto 0; max-width: 620px; }

/* ---------- Card grid (benefits/grid/related) — the real
   `.rs-addon-services.style7 .services-inner` rule in rs-service-grid.css
   only supplies flex/gap/transition (no background/padding/border —
   those are always a per-instance override in the real theme too, same
   root cause as the Why Choose Us cards above), so the card chrome is
   defined here, matching that same already-built treatment exactly. ---------- */
.agency-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
.agency-card-grid .rs-addon-services.style7 .services-inner { height: 100%; background: #FFFFFFF7; padding: 25px 25px 20px 30px; border-radius: 10px; border: 1px solid #E5EAFF; align-items: flex-start; transition: .3s; }
.agency-card-grid .rs-addon-services.style7 .services-inner:hover { border-color: var(--color-primary); }
.agency-card-grid .media_wrap { background: var(--color-surface); width: 65px; height: 65px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; transition: .3s; }
.agency-card-grid .media_wrap svg { width: 28px; height: 28px; }
.agency-card-grid .media_wrap i { font-size: 28px; line-height: 1; }
.agency-card-grid .media_wrap svg, .agency-card-grid .media_wrap i { color: var(--color-primary); }
.agency-card-grid .services-inner:hover .media_wrap { background: var(--color-primary); }
.agency-card-grid .services-inner:hover .media_wrap svg, .agency-card-grid .services-inner:hover .media_wrap i { color: #FFFFFF; }
.agency-card--link { text-decoration: none; display: block; }
.agency-card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--color-primary); font-weight: 600; font-size: 14px; }

/* ---------- Numbered process timeline (deliberately simpler than the
   real rswork-process widget, which is a sticky-scroll layout unsuited
   to arbitrary-length dynamic content) ---------- */
.agency-process { display: flex; flex-direction: column; gap: 32px; margin-top: 24px; }
.agency-process-step { display: flex; gap: 20px; }
.agency-process-marker { display: flex; flex-direction: column; align-items: center; flex: none; }
.agency-process-marker span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--color-primary); color: var(--color-primary); font-weight: 700; font-family: var(--font-primary), sans-serif; }
.agency-process-marker i { width: 1px; flex: 1; background: var(--color-border-light); margin-top: 8px; font-style: normal; }
.agency-process-body h3 { margin: 6px 0 8px; }
.agency-process-body p { color: var(--color-text); line-height: 27px; margin: 0 0 10px; }
.agency-process-body p:last-child { margin-bottom: 0; }
.agency-cta-inline { margin-top: 24px; }

/* ---------- Testimonials (static quote cards — content is the
   service's own copied-over quotes, not the Testimonial model, so no
   slider is needed for 1-4 items) ---------- */
.agency-testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
.agency-testimonial-card { background: #fff; border: 1px solid var(--color-border-light); border-radius: 15px; padding: 28px 30px; margin: 0; }
.agency-testimonial-card i { color: var(--color-primary); font-size: 24px; }
.agency-testimonial-card blockquote { margin: 12px 0 0; color: var(--color-text); line-height: 27px; }
.agency-testimonial-card figcaption { margin-top: 14px; font-weight: 700; color: var(--color-heading); }

/* ---------- Featured work (real Project model, migrated case studies) ---------- */
.agency-card-grid--work { grid-template-columns: repeat(3, 1fr); }
.agency-work-card { display: block; text-decoration: none; border: 1px solid var(--color-border-light); border-radius: 15px; overflow: hidden; transition: border-color .3s; }
.agency-work-card:hover { border-color: var(--color-primary); }
.agency-work-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); }
.agency-work-img img { width: 100%; height: 100%; object-fit: cover; }
.agency-work-body { padding: 20px; }
.agency-work-body h4 { margin: 0 0 6px; }
.agency-work-body p { color: var(--color-text); font-size: 14px; margin: 0; }

/* ---------- Stat cards (bare "20+"/"300+" items inside a grid section) ---------- */
.agency-stat-card { display: flex; align-items: center; gap: 14px; background: var(--color-surface); border-radius: 15px; padding: 24px 28px; }
.agency-stat-number { font-size: 32px; font-weight: 700; color: var(--color-primary); font-family: var(--font-primary), sans-serif; }
.agency-stat-label { color: var(--color-text); font-size: 15px; }

/* ---------- FAQ (real .rs-accordion-area classes from rs-accordion.css,
   toggled via the small jQuery handler in service-faq.blade.php) ---------- */
.agency-faq-section { padding: 40px 0 20px; }
.agency-faq-heading { margin: 0 0 24px; }
.agency-faq-accordion .accordion-header { margin: 0; }
.agency-faq-accordion .accordion-button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; border: none; text-align: left; cursor: pointer; }
/* rs-accordion.css absolutely positions the +/- icon at left:0 via
   `div.rs-accordion-area .accordion-header .elementor-accordion-icon`,
   which out-ranks the position:static below — the icon overlapped the
   question text. One more class of depth keeps it in the flex row. */
div.agency-faq-accordion.rs-accordion-area .accordion-header .elementor-accordion-icon { position: static; top: auto; left: auto; }
/* Centre the +/- glyph in its circle: rs-accordion.css shows the open
   state's icon with `display:block` (…:not(.collapsed)
   .elementor-accordion-icon-opened), which dropped the flex centring and
   left the "−" 6px left / 4px high. Keep it flex, and size the glyph box
   to the icon itself so both states sit dead centre. */
div.agency-faq-accordion.rs-accordion-area .accordion-button:not(.collapsed) .elementor-accordion-icon-opened { display: flex; }
.agency-faq-accordion .accordion-button .elementor-accordion-icon i { display: block; line-height: 1; }
.agency-faq-accordion .accordion-button .elementor-accordion-icon { position: static; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ddd; flex: none; font-size: 16px; }
.agency-faq-accordion .accordion-body { color: var(--color-text); line-height: 27px; }

/* ---------- Final CTA (reuses the real .cta-banner-inner/.cta-banner-
   heading/.cta-banner-actions component built for Home's CTA banner —
   no new CSS needed for those, only page-end spacing here) ---------- */
.agency-final-cta { margin: 60px 0 40px; }

/* ==================================================================
   CONTACT US PAGE — real content ported from the old pages/contact.
   blade.php. Hero follows the same real page-banner.jpg + shape
   pattern as about-hero/blog-hero/service-hero. The proposal form
   reuses the real .contact-form-col/.wpcf7-form-control-wrap styling
   already built for frontend.sections.contact (Home/About's
   Consultation section) — only additive rules for `select` (that
   section had none) and the checkbox group (genuinely new markup).
   The 4 detail cards reuse the real .rs-contact-box/.address-item
   classes from that same section, just in a grid instead of a stack.
================================================================== */

/* ---------- Hero ---------- */
.contact-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 110px 20px 110px 160px;
    background-image: url('/techtlk/wp-content/uploads/2025/01/page-banner.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.contact-hero-shape { position: absolute; z-index: 0; pointer-events: none; }
.contact-hero-shape--spin { left: 150px; bottom: -195px; }
.contact-hero-shape--spin img { animation: spine 30s linear infinite; }
.contact-hero-shape--static { right: 0; bottom: 0; }
.contact-hero-title { position: relative; z-index: 1; color: #fff; font-size: 60px; line-height: 60px; margin: 0; }
.contact-hero-subtext { position: relative; z-index: 1; color: #FFFFFFB5; font-size: 17px; line-height: 27px; max-width: 520px; margin: 0; }
.contact-hero-breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 700; }
.contact-hero-breadcrumb a { color: #fff; text-decoration: none; }
.contact-hero-breadcrumb a:hover { color: var(--color-primary); }
.contact-hero-breadcrumb .current { opacity: .8; }

/* ---------- Proposal (steps + detailed form) ---------- */
.contact-proposal-section { background-color: var(--color-surface); padding: 90px 20px; }
.contact-proposal-inner { max-width: 1310px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px; align-items: stretch; }

.contact-proposal-info { flex: 1 1 460px; max-width: 48%; }
.contact-proposal-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: flex; align-items: center; gap: 8px; }
.contact-proposal-heading h2 { margin: 15px 0; }
.contact-proposal-heading p { color: var(--color-text); margin: 0 0 30px; }

.contact-proposal-steps { display: flex; flex-direction: column; gap: 20px; }
.contact-proposal-steps .rs-addon-services.style7 .services-inner { background: #FFFFFF; padding: 25px 25px 20px 30px; border-radius: 10px; border: 1px solid #E5EAFF; align-items: flex-start; transition: .3s; }
.contact-proposal-steps .rs-addon-services.style7 .services-inner:hover { border-color: var(--color-primary); }
.contact-proposal-steps .media_wrap { background: var(--color-surface-alt); width: 60px; height: 60px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.contact-proposal-steps .media_wrap svg { width: 26px; height: 26px; color: var(--color-primary); }

.contact-proposal-form-col { flex: 1 1 460px; max-width: 48%; }
.contact-proposal-form-title { margin: 0 0 6px; }
.contact-proposal-form-sub { color: var(--color-text); margin: 0 0 25px; }

.contact-proposal-form-col .wpcf7-form-control-wrap select {
    width: 100%;
    border: 1px solid var(--color-border-light);
    border-radius: 5px;
    padding: 14px 18px;
    margin-top: 10px;
    font-family: var(--font-primary), sans-serif;
    color: var(--color-secondary);
    background: #fff;
}
.contact-proposal-services-label { font-weight: 600; color: var(--color-secondary); margin: 10px 0 8px; }
.contact-proposal-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.contact-proposal-services .wpcf7-list-item { display: block; }
.contact-proposal-services label { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 15px; color: var(--color-text); cursor: pointer; text-align: left; }
/* Left-align the checkboxes: CF7's styles.css indents every list item
   (`.wpcf7-list-item { margin-left: 1em }`), and the text-field rule
   `.contact-form-col .wpcf7-form-control-wrap input { width: 100% }` also
   stretched each checkbox to the full column width, so the box sat centred
   in a wide blank area with its label pushed right. */
.contact-proposal-services .wpcf7-list-item { margin: 0; }
.contact-form-col .contact-proposal-services input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin: 0; padding: 0; accent-color: var(--color-primary); }

/* ---------- Details (4 cards + hurry banner) ---------- */
.contact-details-section { padding: 80px 20px; }
.contact-details-inner { max-width: 1310px; margin: 0 auto; }
.contact-details-grid.rs-contact-box { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.contact-details-card { flex-direction: column; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid var(--color-border-light); border-radius: 15px; padding: 28px 24px; }
/* Same vendor `.rs-contact-box .address-item .address-icon{display:inline-block}`
   override as the Home/About contact list above — without it the glyph
   sits top-left of its circle instead of centered. */
.contact-details-grid.rs-contact-box .address-item .address-icon { display: flex; align-items: center; justify-content: center; }
.contact-details-grid.rs-contact-box .address-item .address-icon svg { display: block; width: 22px; height: 22px; }

.contact-hurry-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; background: var(--color-secondary); color: #fff; border-radius: 15px; padding: 20px 24px; text-align: center; font-weight: 500; }
.contact-hurry-banner i { color: var(--color-primary); font-size: 20px; }
.contact-hurry-banner a { color: var(--color-primary); font-weight: 700; text-decoration: none; }

/* ---------- Testimonials + award ---------- */
.contact-testimonials-section { padding: 20px 20px 80px; }
.contact-testimonials-inner { max-width: 1100px; margin: 0 auto; }
.contact-testimonials-heading { text-align: center; margin-bottom: 40px; }
.contact-testimonials-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.contact-testimonials-heading h2 { margin: 10px 0 0; }

.contact-testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.contact-testimonial-card { background: #fff; border: 1px solid var(--color-border-light); border-radius: 15px; padding: 30px; margin: 0; }
.contact-testimonial-card img { height: 45px; width: auto; object-fit: contain; margin-bottom: 20px; }
.contact-testimonial-card blockquote { margin: 0; color: var(--color-text); line-height: 27px; }

.contact-award { display: flex; justify-content: center; margin-top: 40px; }
.contact-award img { height: auto; max-height: 130px; width: auto; max-width: 100%; border-radius: 10px; border: 1px solid var(--color-border-light); }

/* ==================================================================
   CAREERS PAGE — real content ported from the old pages/careers.
   blade.php. Hero follows the same real page-banner.jpg + shape
   pattern as every other page hero. The application form reuses the
   real .contact-form-col/.wpcf7-form-control-wrap styling already
   built for Contact Us — only additive rules for the file input and
   position pills, which that page didn't need. The map reuses the
   real .contact-map iframe styling verbatim.
================================================================== */

/* ---------- Hero ---------- */
.careers-hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 110px 20px 110px 160px;
    background-image: url('/techtlk/wp-content/uploads/2025/01/page-banner.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.careers-hero-shape { position: absolute; z-index: 0; pointer-events: none; }
.careers-hero-shape--spin { left: 150px; bottom: -195px; }
.careers-hero-shape--spin img { animation: spine 30s linear infinite; }
.careers-hero-shape--static { right: 0; bottom: 0; }
.careers-hero-eyebrow { position: relative; z-index: 1; display: inline-flex; align-self: flex-start; background: rgba(255, 255, 255, .12); color: #fff; padding: 6px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.careers-hero-title { position: relative; z-index: 1; color: #fff; font-size: 52px; line-height: 60px; margin: 0; max-width: 780px; }
.careers-hero-breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 700; }
.careers-hero-breadcrumb a { color: #fff; text-decoration: none; }
.careers-hero-breadcrumb a:hover { color: var(--color-primary); }
.careers-hero-breadcrumb .current { opacity: .8; }

/* ---------- Application (positions + form) ---------- */
.careers-application-section { background-color: var(--color-surface); padding: 90px 20px; }
.careers-application-inner { max-width: 1310px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px; align-items: stretch; }

.careers-application-info { flex: 1 1 460px; max-width: 48%; }
/* Image filling the empty part of a text column beside a taller form
   (Careers application / Contact proposal): the column is a flex column
   stretched to the form's height, the image takes the remaining space. */
.careers-application-info, .contact-proposal-info { display: flex; flex-direction: column; }
.page-side-media { position: relative; flex: 1 1 auto; min-height: 260px; margin: 30px 0 0; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 50px rgba(10, 22, 94, .12); }
.page-side-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.careers-application-heading { margin: 0 0 30px; }

.careers-positions-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primary); margin: 0 0 12px; }
.careers-positions-list { display: flex; flex-wrap: wrap; gap: 10px; }
.careers-position-pill { display: inline-flex; align-items: center; border: 1px solid var(--color-border-light); border-radius: 30px; padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--color-secondary); background: #fff; }

.careers-form-col { flex: 1 1 460px; max-width: 48%; }
.careers-cv-label { font-weight: 600; color: var(--color-secondary); margin: 0 0 8px; }
.careers-cv-hint { display: block; font-size: 13px; color: var(--color-text); margin-top: 8px; }
.careers-form-col .wpcf7-form-control-wrap input[type="file"] { padding: 10px 14px; cursor: pointer; }

/* ---------- Office map ---------- */
.careers-map-section { padding: 80px 20px; }
.careers-map-inner { max-width: 1100px; margin: 0 auto; }
.careers-map-heading { text-align: center; margin-bottom: 30px; }
.careers-map-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.careers-map-heading h2 { margin: 10px 0 8px; }
.careers-map-heading p { color: var(--color-text); margin: 0; }
.careers-map iframe { height: 420px; }

/* ==================================================================
   SERVICES INDEX (/services) — real content ported from the old
   services/index.blade.php. The card grid reuses the real
   .rs-addon-services.style7/.media_wrap icon-card + .agency-card--link
   whole-card-clickable pattern verbatim (same markup as the "related
   services" cards on each service detail page) — only the section
   wrapper + a wider 3-column breakpoint for this long listing are new.
================================================================== */
.services-index-section { padding: 80px 20px; }
.services-index-inner { max-width: 1310px; margin: 0 auto; }
@media (min-width: 1200px) { .services-index-grid.agency-card-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==================================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions) — every $page->blocks
   entry rendered verbatim (frontend/sections/legal-content.blade.php).
   Theme patterns: light --color-surface band, white document card
   (same border/shadow language as the service cards), accent-line title,
   one divided section per h3 with a blue side bar, and a sticky
   numbered contents list on desktop.
================================================================== */
.legal-page-section { background-color: var(--color-surface); padding: 80px 20px 90px; }
.legal-page-inner { max-width: 960px; margin: 0 auto; }
.legal-page-inner--toc { max-width: 1310px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }

/* ---------- Contents list ---------- */
.legal-toc { position: sticky; top: 120px; max-height: calc(100vh - 150px); overflow-y: auto; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 15px; box-shadow: 0 0 68px 9px rgba(0, 0, 0, .04); padding: 22px 18px; }
.legal-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-toc-list a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--color-secondary); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.legal-toc-list a:hover { background: var(--color-surface); color: var(--color-primary); }
.legal-toc-num { flex: none; min-width: 26px; font-weight: 700; color: var(--color-primary); }

/* ---------- Document card ---------- */
.legal-doc { background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 15px; box-shadow: 0 0 68px 9px rgba(0, 0, 0, .04); padding: 60px 64px; }
.legal-doc p { color: var(--color-text); font-size: 17px; line-height: 30px; margin: 0 0 16px; overflow-wrap: anywhere; }
.legal-doc p:last-child { margin-bottom: 0; }

.legal-doc-intro { padding-bottom: 36px; }
.legal-doc-accent { display: block; line-height: 0; margin-bottom: 14px; }
.legal-doc-title { color: var(--color-secondary); margin: 0 0 22px; }

.legal-doc-section { padding: 34px 0 0; border-top: 1px solid #2B4DFF14; margin-top: 34px; scroll-margin-top: 140px; }
.legal-doc-intro + .legal-doc-section { margin-top: 0; }
.legal-doc-heading { position: relative; padding-left: 18px; margin: 0 0 16px; font-size: 24px; line-height: 32px; color: var(--color-secondary); }
.legal-doc-heading::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--color-primary); }
.legal-doc-section h2 { color: var(--color-secondary); margin: 24px 0 14px; }

/* ==================================================================
   PORTFOLIO PAGES (/portfolio listing + /portfolio/{slug} case study)
   — real content ported from the old portfolio/index + show Tailwind
   views. Listing cards are the exact real portfolio-slider card used on
   the Home page (frontend.components.portfolio-card, styled by the real
   `.rs-portfolio-style3.rs-portfolio-slider` widget CSS + the Home
   PORTFOLIO overrides above) — only the grid layout is new here. The
   case study uses the theme's real classic single-portfolio classes
   (default.css "21. Portfolio Details": .rs-porfolio-details — the
   theme's own spelling — .ps-informations, .project-desc,
   .ps-related-project), restyled to the brand gradient.
================================================================== */
/* ---------- Listing ---------- */
.portfolio-page-section { padding: 85px 20px 90px; }
.portfolio-page-inner { max-width: 1310px; margin: 0 auto; }
.portfolio-page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 30px; }
/* Equal-height cards per row: the overlapping content box grows to fill. */
.portfolio-page-grid .portfolio-item { display: flex; flex-direction: column; height: 100%; }
/* As a flex item, the image box's automatic min-height (its full-page
   screenshot's height) would override the Home crop's aspect-ratio. */
.portfolio-page-grid .portfolio-item .portfolio-img { flex: 0 0 auto; min-height: 0; overflow: hidden; }
.portfolio-page-grid .portfolio-item .portfolio-content { flex: 1 1 auto; }
.portfolio-page-grid .portfolio-item .content-details { display: flex; flex-direction: column; height: 100%; }
.portfolio-page-grid .portfolio-item .p-desc { color: var(--color-text); font-size: 15px; line-height: 26px; margin: 0 0 16px; }
.portfolio-page-grid .portfolio-item .p-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 600; font-size: 15px; }
.portfolio-page-grid .portfolio-item .p-link i { transition: transform .3s ease; }
.portfolio-page-grid .portfolio-item .p-link:hover i { transform: translateX(4px); }

.portfolio-page-empty { text-align: center; border: 1px dashed #2B4DFF33; border-radius: 15px; padding: 60px 20px; color: var(--color-text); }
.portfolio-page-empty i { font-size: 40px; color: var(--color-primary); }
.portfolio-page-empty p { margin: 12px 0 0; }

/* ---------- Case study ---------- */
.portfolio-detail-section { padding: 85px 20px 90px; }
.portfolio-detail-inner { max-width: 1310px; margin: 0 auto; display: flex; flex-direction: row; align-items: flex-start; gap: 50px; }
.portfolio-detail-main { flex: 1 1 auto; min-width: 0; }
.portfolio-detail-sidebar { flex: 0 0 380px; position: sticky; top: 120px; }

/* Full-page website screenshot in a fixed-height scrollable frame; narrow
   (mobile) screenshots keep their natural width instead of upscaling. */
.rs-porfolio-details .portfolio-detail-frame { height: 640px; overflow-y: auto; margin: 0 0 40px; border-radius: 15px; border: 1px solid #2B4DFF1F; background-color: var(--color-surface); box-shadow: 0 10px 40px rgba(14, 73, 206, .08); }
.rs-porfolio-details .portfolio-detail-frame img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.rs-porfolio-details .portfolio-detail-frame:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.rs-porfolio-details .project-desc .ps-title { color: var(--color-secondary); margin: 0 0 15px; }
.rs-porfolio-details .project-desc p { color: var(--color-text); }

.portfolio-detail-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 30px; }
.portfolio-detail-back { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 600; }
.portfolio-detail-back:hover { color: var(--color-secondary); }

.rs-porfolio-details .portfolio-detail-sidebar .ps-informations { margin: 0; border-radius: 15px; padding: 40px 35px; background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); }
.rs-porfolio-details .portfolio-detail-sidebar .ps-informations .info-title { font-size: 22px; line-height: 32px; color: #FFFFFF; margin: 0 0 20px; padding: 0; }
.rs-porfolio-details .portfolio-detail-sidebar .ps-informations ul li { color: #FFFFFFD9; font-size: 15px; line-height: 26px; }
.rs-porfolio-details .portfolio-detail-sidebar .ps-informations ul li + li { border-top-color: #FFFFFF26; padding-top: 14px; margin-top: 14px; }
.rs-porfolio-details .portfolio-detail-sidebar .ps-informations ul li span { width: 120px; color: #FFFFFF; }
.rs-porfolio-details .portfolio-detail-sidebar .ps-informations ul li a { color: #FFFFFF; text-decoration: underline; }

.rs-porfolio-details .portfolio-detail-related { max-width: 1310px; margin: 80px auto 0; }
.rs-porfolio-details .portfolio-detail-related .ps-related-title { font-size: 32px; line-height: 42px; font-weight: 700; color: var(--color-secondary); margin: 0 0 30px; }
.portfolio-page-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==================================================================
   SERVICE DETAIL PAGES (frontend/services/show.blade.php — every
   /services/{slug} page; first built for the Web Development group). Each
   classified section type gets an existing theme pattern: Home's
   overlapping white card, blue CTA banner (.cta-banner-inner, reused
   with its own responsive rules), "Our Services" icon card, navy
   testimonial band + Home testimonial card, portfolio cards, the real
   FAQ accordion. Bands alternate white / --color-surface.
================================================================== */
.service-hero-actions { position: relative; z-index: 1; margin-top: 10px; }

.svc-inner { max-width: 1310px; margin: 0 auto; }
.svc-band { padding: 75px 20px; }
.svc-band--surface { background-color: var(--color-surface); }
.svc-band.svc-band--continues { padding-top: 0; }

/* ---------- Section heading (accent line + h2 + intro) ---------- */
.svc-heading { max-width: 860px; margin-bottom: 38px; }
.svc-heading .svc-accent { display: block; line-height: 0; margin-bottom: 14px; }
.svc-heading h2 { margin: 0 0 18px; color: var(--color-secondary); }
.svc-heading p { color: var(--color-text); font-size: 17px; line-height: 29px; margin: 0 0 14px; }
.svc-heading p:last-child { margin-bottom: 0; }
.svc-heading--center { text-align: center; margin-left: auto; margin-right: auto; }
.svc-heading--center .svc-accent { display: inline-block; }
.svc-heading--light h2 { color: #FFFFFF; }
.svc-heading--light p { color: #FFFFFFB3; }
.svc-heading--prose { max-width: 980px; margin-bottom: 0; }

/* Split: copy left (sticky), content right. */
.svc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; }
.svc-split > .svc-heading { margin-bottom: 0; position: sticky; top: 120px; }
.svc-split > .svc-heading:only-child { position: static; }

/* ---------- Highlights: white card over the hero ---------- */
.svc-highlights { position: relative; z-index: 2; padding: 0 20px; margin-top: 50px; }
.svc-highlights-card { max-width: 1310px; margin: 0 auto; background: #FFFFFF; border-radius: 15px; box-shadow: 0 20px 60px rgba(10, 22, 94, .10); padding: 34px 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.svc-highlight { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 17px; line-height: 25px; color: var(--color-secondary); }
.svc-highlight + .svc-highlight { border-left: 1px solid #2B4DFF14; padding-left: 24px; }
.svc-highlight-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #2B4DFF12; color: var(--color-primary); font-size: 22px; }

/* ---------- Cards (Home "Our Services" look, outline heroicons) ---------- */
.svc-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.svc-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-card { display: block; height: 100%; text-decoration: none; }
.svc-card .services-inner { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 10px; box-shadow: 0 0 68px 9px rgba(0, 0, 0, .04); padding: 32px 30px; transition: border-color .3s ease, transform .3s ease; }
.svc-card:hover .services-inner { border-color: var(--color-primary); transform: translateY(-4px); }
.svc-card .media_wrap { flex: none; display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; border-radius: 10px; background: var(--color-surface); color: var(--color-primary); transition: background-color .3s ease, color .3s ease; }
.svc-card .media_wrap .icon_style { display: flex; line-height: 0; }
.svc-card .media_wrap svg { width: 30px; height: 30px; }
.svc-card .media_wrap i { font-size: 30px; line-height: 1; }
.svc-card:hover .media_wrap { background: var(--color-primary); color: #FFFFFF; }
.svc-card .content_part { display: flex; flex-direction: column; flex: 1 1 auto; }
.svc-card .services-title .title { font-size: 20px; line-height: 28px; color: var(--color-secondary); margin: 0 0 10px; }
.svc-card .desc-text { color: var(--color-text); font-size: 16px; line-height: 27px; }
/* Card text written with line breaks: paragraphs; a later one's "Label:" (e.g. "Best For:") in bold. */
.svc-card .desc-text--paras p { margin: 0; }
.svc-card .desc-text--paras p + p { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E8ECF6; }
.svc-card .desc-text--paras strong { color: var(--color-secondary); font-weight: 600; }
.svc-card-more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 600; }

/* Stat card ("20+") */
.svc-stat { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; box-sizing: border-box; padding: 40px 35px; border-radius: 15px; background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #FFFFFF; }
.svc-stat-number { font-size: 64px; line-height: 1; font-weight: 700; }
.svc-stat-label { font-size: 17px; line-height: 26px; color: #FFFFFFD9; }

.svc-inline-btn { margin-top: 40px; }
.svc-split > .svc-inline-btn { grid-column: 2; margin-top: 0; }

/* ---------- Process: numbered step cards ---------- */
.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.svc-step { position: relative; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 10px; padding: 34px 28px 30px; }
.svc-step-num { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--color-primary); color: #FFFFFF; font-weight: 700; font-size: 18px; margin-bottom: 20px; box-shadow: 0 0 0 8px #2B4DFF14; }
.svc-step h3 { font-size: 20px; line-height: 28px; color: var(--color-secondary); margin: 0 0 10px; }
.svc-step p { color: var(--color-text); font-size: 16px; line-height: 27px; margin: 0; }

/* ---------- Process-detailed: vertical timeline ---------- */
.svc-timeline { display: flex; flex-direction: column; }
.svc-timeline-step { position: relative; display: flex; gap: 24px; padding-bottom: 36px; }
.svc-timeline-step:not(:last-child)::before { content: ""; position: absolute; left: 26px; top: 54px; bottom: 0; width: 2px; background: #2B4DFF26; }
.svc-timeline-num { flex: none; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--color-primary); color: var(--color-primary); font-weight: 700; font-size: 18px; }
.svc-timeline-body h3 { font-size: 21px; line-height: 30px; color: var(--color-secondary); margin: 10px 0; }
.svc-timeline-body p { color: var(--color-text); font-size: 16px; line-height: 28px; margin: 0 0 10px; }
.svc-timeline-wrap .svc-inline-btn { margin-top: 10px; }

/* ---------- CTA banner (Home's blue card, reused) ---------- */
.svc-cta-section { padding: 0 20px; margin: 55px 0; }
.svc-cta-section--final { margin: 75px 0; }
.svc-cta.cta-banner-inner { padding: 60px; }
.svc-cta .cta-banner-heading h2 { margin: 0; }
.svc-cta .svc-cta-text { color: #FFFFFFD9; font-size: 17px; line-height: 28px; margin: 14px 0 0; }
/* Soft CTA (section Card style "Soft call-to-action"): a light card in the page's
   card language — white, #E5EAFF border, blue top stripe, icon tile — that follows
   the section above (no gap band) and differs from the blue banners. */
.svc-cta-section--soft { margin-top: -20px; }
.svc-cta.svc-cta--soft { position: relative; overflow: hidden; flex-wrap: nowrap; align-items: center; gap: 36px; padding: 48px 56px; background: #FFFFFF; border: 1px solid #E5EAFF; border-top: 4px solid var(--color-primary); border-radius: 15px; box-shadow: 0 20px 50px rgba(10, 22, 94, .08); background-image: radial-gradient(rgba(43, 77, 255, .10) 1px, transparent 1px); background-size: 22px 22px; background-position: right top; }
.svc-cta--soft::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 77, 255, .12) 0%, transparent 70%); pointer-events: none; }
.svc-cta-soft-icon { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 14px; background: var(--color-surface); color: var(--color-primary); font-size: 36px; }
.svc-cta-soft-icon i { font-size: 36px; line-height: 1; }
.svc-cta--soft .cta-banner-heading, .svc-cta--soft .cta-banner-actions { position: relative; z-index: 1; }
.svc-cta--soft .cta-banner-heading h2 { color: var(--color-secondary); font-size: 34px; line-height: 44px; }
.svc-cta--soft .svc-cta-text { color: var(--color-text); }
.svc-cta--soft .cta-banner-actions .rs-button .rs-btn { background: var(--color-primary); color: #FFFFFF; }
.svc-cta--soft .cta-banner-actions .rs-button .rs-btn:hover { background: var(--color-secondary); color: #FFFFFF; }

/* ---------- Mid-page planning band ---------- */
.svc-help { padding: 0 20px; margin: 55px 0; }
.svc-help-card { max-width: 1310px; margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 30px 40px; border-radius: 15px; background-color: var(--color-secondary); background-image: linear-gradient(90deg, var(--color-secondary) 0%, #15216f 100%); }
.svc-help-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #FFFFFF1A; color: #FFFFFF; font-size: 26px; }
.svc-help-text { flex: 1 1 280px; margin: 0; color: #FFFFFF; font-size: 22px; line-height: 32px; font-weight: 700; }

/* ---------- Statement: navy band ---------- */
.svc-statement { padding: 65px 20px; background-color: var(--color-secondary); text-align: center; }
.svc-statement-text { margin: 0 auto; max-width: 960px; color: #FFFFFF; font-size: 36px; line-height: 46px; font-weight: 700; }
.svc-statement-sub { margin: 16px auto 0; max-width: 820px; color: #FFFFFFB3; font-size: 17px; line-height: 28px; }

/* ---------- Testimonials: navy band + Home testimonial card ---------- */
.svc-testimonials { padding: 80px 20px; background-color: var(--color-secondary); }
.svc-testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.svc-testimonial { position: relative; margin: 0; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background: #FFFFFF; border-radius: 10px; border: 1px solid #4970E154; padding: 36px 34px 30px; overflow: hidden; }
.svc-testimonial-quote { position: absolute; right: 28px; top: 22px; font-size: 56px; line-height: 1; color: var(--color-primary); opacity: .12; }
.svc-testimonial blockquote { margin: 0 0 26px; padding: 0; border: 0; font-size: 18px; line-height: 30px; font-style: italic; color: var(--color-text); }
.svc-testimonial figcaption { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.svc-testimonial-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-secondary); color: #FFFFFF; font-weight: 700; }
.svc-testimonial figcaption strong { display: block; font-size: 16px; line-height: 24px; color: var(--color-secondary); }


/* ---------- Featured work (portfolio cards) ---------- */
.svc-work-grid { margin-top: 10px; }

/* ---------- FAQ (real accordion partial) ---------- */
.svc-faq .agency-faq-section { max-width: 1310px; margin: 0 auto; padding: 0; }
.svc-faq .agency-faq-heading { text-align: center; color: var(--color-secondary); margin-bottom: 40px; }
/* Two questions per row on desktop (one column below 1025px, responsive.css).
   align-items:start so opening one answer doesn't stretch its neighbour. */
.svc-faq .agency-faq-accordion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 30px; align-items: start; }
.svc-faq .agency-faq-accordion .accordion-item { margin: 0; }
/* FAQ beside a section (Page sections → "Show with the FAQ: left column"):
   copy left, title + one column of questions right. */
.svc-faq-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; }
.svc-faq-split .svc-faq-side { margin-bottom: 0; max-width: none; position: sticky; top: 120px; }
.svc-faq--split .agency-faq-heading { text-align: left; margin-bottom: 26px; font-size: 34px; line-height: 44px; }
.svc-faq--split .agency-faq-accordion { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.svc-faq--split .accordion-body p { margin: 0 0 12px; }
.svc-faq--split .accordion-body p:last-child { margin-bottom: 0; }
.svc-faq--split .accordion-body .faq-points { margin: 12px 0; padding: 0; }
.svc-faq--split .accordion-body .faq-points:last-child { margin-bottom: 0; }
.svc-faq--split .accordion-body .faq-points strong { font-weight: 700; }
/* Fixes found in visual review (scoped to these pages):
   - the real portfolio card's image sits at z-index:-1 (vendor
     portfolio-slider.css) and vanished behind the tinted band — give each
     card its own stacking context;
   - default.css styles every <blockquote> (gray box, 30/52px padding,
     decorative quote pseudo-element) — reset inside the testimonial card.
   (The FAQ +/- icon fix lives with the FAQ partial's own rules above.) */
.svc-work-grid .portfolio-item { position: relative; z-index: 0; }
/* default.css sets the blockquote background with !important. */
.svc-testimonial blockquote { background: none !important; padding: 0; }
.svc-testimonial blockquote::before, .svc-testimonial blockquote::after { display: none; }
.svc-highlight-icon svg { width: 24px; height: 24px; }
.svc-highlight-icon i { font-size: 24px; line-height: 1; }
.svc-help-icon svg { width: 28px; height: 28px; }
/* A section holding one long card spans the full width instead of one
   narrow column of three. */
.svc-card-grid--single { grid-template-columns: minmax(0, 1fr) !important; }
/* Statement band in brand blue so it stays distinct from the navy
   testimonial band it can directly follow. */
.svc-statement { background-color: var(--color-primary); background-image: linear-gradient(90deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%); }
/* Section CTA button placement variants (highlights row, centered
   sections, and on the navy/blue bands). */
.svc-inline-btn--center { display: flex; justify-content: center; }
.svc-highlights .svc-inline-btn--center { margin-top: 30px; }
.svc-inline-btn--light .rs-btn { background: #FFFFFF; color: var(--color-primary); }

/* ==================================================================
   SCROLL REVEAL (all pages) — class added by public/frontend/js/main.js
   only when JS runs and the visitor hasn't asked for reduced motion.
   Short fade + slide-up, eased, played once; --reveal-delay staggers
   siblings.
================================================================== */
.reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Home Testimonials: fixed card height (user-directed) ----------
   Every card is the same height; a quote longer than the card scrolls
   inside it (quote area only — avatar/name row stays pinned at the
   bottom), with a slim brand-coloured scrollbar. */
.testimonials-block .rs-testimonial-slider.style2 .testimonial-inner { height: 320px; }
.testimonials-block .testimonial-inner .desc { max-height: 100%; min-height: 0; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: #2B4DFF66 transparent; }
.testimonials-block .testimonial-inner .desc::-webkit-scrollbar { width: 5px; }
.testimonials-block .testimonial-inner .desc::-webkit-scrollbar-thumb { background: #2B4DFF66; border-radius: 5px; }
.testimonials-block .testimonial-inner .desc::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   ADMIN-MANAGED CONTENT HOOKS — styles that only apply when an admin
   uploads an optional asset (Site Settings logo, a partner's own
   full-color logo). With nothing uploaded none of these match, so the
   original design is untouched.
   ===================================================================== */
.header-logo-link .site-logo-img,
.sidebar-offcanvas-menu-logo .site-logo-img,
.footer-brand-logo .site-logo-img { display: inline-block; width: auto; max-width: 220px; max-height: 50px; vertical-align: middle; }
/* Partner with its own logo made for dark backgrounds (Content → Partners →
   "Logo for dark backgrounds"): show it as-is instead of the white filter.
   Selector depth matches the filter rules above (incl. the partner-4 rule). */
.hero-logo-strip .rs-grid-img.partner-logo--original,
.success-story-partner-card img.partner-logo--original { filter: none; opacity: 1; }

/* ==================================================================
   SERVICE PAGE IMAGES — the live site's (developerspoint.net) visuals on
   the shared service template: hero image, section images
   (Admin → Services → Page sections → Section image / Extra images /
   Card image), "Best-in-class designs" thumbnails, CTA person and
   megaphone, client photos on testimonial cards.
================================================================== */
/* Single hero image (Admin → Services → Hero image), in the slot the old
   six-mockup collage used: right side, vertically centred. */
.service-hero-section--media .service-hero-title { max-width: 640px; }
.service-hero-section--media .service-hero-subtext { max-width: 560px; }
.service-hero-media { position: absolute; z-index: 1; right: max(40px, calc((100vw - 1440px) / 2 + 80px)); top: 50%; transform: translateY(-50%); width: 540px; margin: 0; border-radius: 15px; overflow: hidden; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.service-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Section image beside the copy (alternating sides). */
.svc-media-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 60px; align-items: center; margin-bottom: 40px; }
.svc-media-row:last-child { margin-bottom: 0; }
.svc-media-row--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.svc-media-row--flip > .svc-media { order: -1; }
.svc-media-row > .svc-heading { margin-bottom: 0; max-width: none; }
.svc-media-row > .svc-media:only-child { grid-column: 1 / -1; }
.svc-media { margin: 0; }
.svc-media img { display: block; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto; border-radius: 15px; object-fit: contain; }
.svc-heading .svc-media { margin-top: 26px; }
/* "Under the text" placement: fills the space beneath the copy in a
   copy / cards split, same width as the copy column. */
.svc-media--below img { width: 100%; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 20px 50px rgba(10, 22, 94, .12); }
/* Image under the heading (Image placement "Under the heading"): medium, 16:10, before the text. */
.svc-heading .svc-media--heading { max-width: 520px; margin: 4px 0 24px; }
.svc-media--heading img { aspect-ratio: 16 / 10; }
/* Grouped cards, style "grid": two columns of the site's icon cards. */
.svc-group-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.svc-group-cards-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-group-cards-cell .svc-detail-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(10, 22, 94, .10); }
.svc-group-cards-cell .svc-detail-card { transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.svc-group-cards-cell .svc-detail-card .svc-checklist + .svc-group-note { margin-top: 4px; }
/* "Card images: under the text" — the card's image sits at the bottom, level across a row. */
.svc-detail-card--media-below { display: flex; flex-direction: column; }
.svc-detail-card--media-below > .svc-detail-media--below { display: block; height: auto; margin: auto 0 0; padding: 0; background: none; border-radius: 10px; }
.svc-detail-card--media-below > :nth-last-child(2) { margin-bottom: 24px; }
.svc-detail-media--below img { width: 100%; height: auto; max-width: none; max-height: none; border-radius: 10px; }
/* Card group "Image size: medium": card images under the text, centred and capped (illustrations / photos alike). */
.svc-group-cards--media-medium .svc-detail-media--below img { display: block; width: auto; max-width: 100%; max-height: 260px; margin: 0 auto; object-fit: contain; }
.svc-detail-badge { display: block; width: 78px; height: auto; margin: 0 0 18px; }
/* Image size "Medium" (Admin → Page sections): a 4:3 image that stays medium when the row stacks. */
.svc-media--medium img { width: 100%; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; }
/* "Empty space after the last card" placement: spans the grid cells the
   last row leaves empty (--fill-span-3 / --fill-span-2 set per section);
   the image is absolutely positioned so it takes the row's card height
   instead of stretching the row to its own. */
.svc-grid-media { position: relative; margin: 0; min-height: 260px; grid-column: span var(--fill-span-3, 3); border-radius: 15px; overflow: hidden; box-shadow: 0 20px 50px rgba(10, 22, 94, .12); }
.svc-grid-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Card / step / timeline images */
.svc-card--image .services-inner { gap: 18px; }
.svc-card-image { width: 100%; }
.svc-card-image img { display: block; max-width: 100%; max-height: 160px; height: auto; object-fit: contain; border-radius: 10px; }
/* Card images full width (section "Card images: full width"): same 16:10 frame on every card. */
.svc-card-slider--full-images .svc-card-image img { width: 100%; max-height: none; aspect-ratio: 16 / 10; object-fit: cover; }
.svc-step-image { display: block; max-width: 100%; max-height: 140px; height: auto; margin-bottom: 18px; object-fit: contain; }
.svc-timeline-image { display: block; max-width: 100%; max-height: 320px; height: auto; margin-top: 8px; border-radius: 10px; }

/* Extra images: logo / illustration tiles */
.svc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; margin-top: 40px; }
.svc-gallery-item { margin: 0; display: flex; align-items: center; justify-content: center; height: 120px; padding: 18px; box-sizing: border-box; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 10px; }
.svc-gallery-item img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

/* "Best-in-class designs" thumbnails (auto-scrolling strip) */
.svc-designs { overflow: hidden; margin: 0 0 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.svc-designs-track { display: flex; gap: 20px; width: max-content; animation: svc-designs-scroll 45s linear infinite; }
.svc-designs-track img { display: block; width: 300px; height: 180px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid #E5EAFF; }
@keyframes svc-designs-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* "Best-in-class designs": the "20+" box sits right under the thumbnail
   strip (right column) instead of a separate row under the copy; the copy
   spans both rows on the left. */
.svc-split--designs { row-gap: 24px; }
.svc-split--designs > .svc-heading { grid-row: span 2; }
.svc-split--designs > .svc-designs { margin-bottom: 0; }
.svc-split--designs > .svc-card-grid { grid-column: 2; }
/* Centered prose (Admin → Page sections → alignment: Centered). */
.svc-heading--prose.svc-heading--center { margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .svc-designs-track { animation: none; } }

/* Statement band image */
.svc-statement-media { margin: 30px auto 0; max-width: 560px; }
.svc-statement-media img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }

/* CTA banners: proposal person (left) and closing megaphone (right) */
.svc-cta-person { flex: 0 0 170px; align-self: flex-end; margin: -120px 0 -60px -20px; }
.svc-cta-person img, .svc-cta-megaphone img { display: block; width: 100%; height: auto; }
.svc-cta-megaphone { flex: 0 0 140px; align-self: flex-start; margin: -95px -20px -30px 0; }

/* Client photo on testimonial cards */
img.svc-testimonial-avatar { object-fit: cover; }

/* Legal pages: bullet lists ("ul" content blocks) */
.legal-list { margin: 0 0 18px; padding-left: 22px; }
.legal-list li { color: var(--color-text); font-size: 16px; line-height: 28px; margin-bottom: 8px; }
.legal-list li::marker { color: var(--color-primary); }
.legal-list strong { color: var(--color-secondary); font-weight: 600; }

/* About Company: value list — full section width, 4 per row, last row centred. */
.about-section { flex-wrap: wrap; }
.about-values { position: relative; z-index: 1; flex: 1 1 100%; max-width: 100%; margin-top: 55px; }
.about-values-heading { margin: 0 0 22px; font-size: 22px; font-weight: 700; line-height: 30px; color: var(--color-secondary); text-align: center; }
.about-values-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px; }
.about-value-item { flex: 0 0 calc((100% - 72px) / 4); box-sizing: border-box; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 10px; padding: 22px 20px; transition: border-color .3s ease, transform .3s ease; }
.about-value-item:hover { border-color: var(--color-primary); transform: translateY(-4px); }
.about-value-item .box-inner { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.about-value-item .icon-area { flex: none; padding-top: 3px; line-height: 0; }
.about-value-item .title { font-weight: 600; font-size: 17px; line-height: 25px; color: var(--color-secondary); margin: 0 0 6px; }
.about-value-item .desc { margin: 0; font-size: 15px; line-height: 24px; color: var(--color-text); }
.about-actions { align-items: center; }

/* About: Board of Directors (photo, name, role, phone, email) */
.about-directors-section { padding: 85px 20px 10px; }
.about-directors-inner { max-width: 1310px; margin: 0 auto; }
.about-directors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 35px; }
.about-director-card { display: flex; align-items: stretch; gap: 0; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 60px rgba(10, 22, 94, .07); }
.about-director-photo { flex: 0 0 42%; min-height: 280px; background: var(--color-surface); }
.about-director-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-director-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 30px 32px; }
.about-director-name { margin: 0; font-size: 24px; line-height: 32px; color: var(--color-secondary); }
.about-director-role { color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.about-director-contact { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.about-director-contact li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.about-director-contact svg { flex: none; width: 18px; height: 18px; color: var(--color-primary); }
.about-director-contact a { color: var(--color-text); text-decoration: none; word-break: break-word; }
.about-director-contact a:hover { color: var(--color-primary); }
.about-director-social { display: flex; gap: 10px; margin-top: 14px; }
.about-director-social .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); }
.about-director-social .social-icon:hover { background: var(--color-primary); color: #FFFFFF; }

/* ==================================================================
   HOME — content restored from developerspoint.net (Admin → Pages →
   Home Page): hero service links, services intro + detail cards, Why
   Choose pillar details, CTA person/rocket, clients strip, FAQ, contact
   channels.
================================================================== */
.hero-links { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-links a { display: inline-block; padding: 8px 16px; border-radius: 30px; border: 1px solid #FFFFFF40; background: #FFFFFF12; color: #FFFFFF; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .3s ease, border-color .3s ease; }
.hero-links a:hover { background: var(--color-primary); border-color: var(--color-primary); }

.services-bento-text { margin: 14px 0 0; color: var(--color-text); font-size: 16px; line-height: 27px; }
.services-details { position: relative; z-index: 1; max-width: 1310px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.services-detail-card { background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 10px; padding: 30px; box-shadow: 0 0 68px 9px rgba(0, 0, 0, .04); }
.services-detail-card h3 { margin: 0 0 10px; font-size: 21px; line-height: 29px; color: var(--color-secondary); }
.services-detail-card h4 { margin: 16px 0 8px; font-size: 16px; line-height: 24px; color: var(--color-secondary); }
.services-detail-card p { margin: 0; color: var(--color-text); font-size: 15px; line-height: 26px; }
.services-detail-card ul { margin: 0; padding-left: 20px; }
.services-detail-card li { color: var(--color-text); font-size: 15px; line-height: 26px; }
.services-detail-card li::marker { color: var(--color-primary); }
.services-detail-card .services-detail-outro { margin-top: 12px; }

.why-pillar--detailed .services-inner { position: relative; }
.why-pillar-subtitle { display: block; margin: -4px 0 8px; color: var(--color-primary); font-size: 14px; font-weight: 600; }
.why-pillar-list-heading { margin: 12px 0 6px; font-size: 15px; font-weight: 700; line-height: 22px; color: var(--color-secondary); }
.why-pillar-points { margin: 0; padding-left: 18px; }
.why-pillar-points li { color: var(--color-text); font-size: 14px; line-height: 23px; }
.why-pillar-points li::marker { color: var(--color-primary); }
.why-pillar-image { flex: none; align-self: center; width: 96px; height: 96px; object-fit: contain; }

.cta-banner-person { flex: 0 0 150px; align-self: flex-end; margin: -130px 0 -80px -10px; }
.cta-banner-rocket { flex: 0 0 110px; align-self: flex-start; margin: -110px -10px -20px 0; }
.cta-banner-person img, .cta-banner-rocket img { display: block; width: 100%; height: auto; }

.home-clients-section { padding: 70px 20px; }
.home-clients-inner { max-width: 1310px; margin: 0 auto; }
.home-clients-heading { text-align: center; margin-bottom: 35px; }
.home-clients-heading .eyebrow { font-weight: 600; text-transform: capitalize; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; }
.home-clients-heading h2 { margin: 10px 0 0; }
.home-clients-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home-clients-track { display: flex; gap: 24px; width: max-content; animation: svc-designs-scroll 40s linear infinite; }
.home-client { flex: none; display: flex; align-items: center; justify-content: center; width: 150px; height: 110px; padding: 14px; box-sizing: border-box; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 10px; }
.home-client img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .home-clients-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

.home-faq-section { padding: 80px 20px; background: var(--color-surface); }
.home-faq-inner { max-width: 1310px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 60px; align-items: start; }
.home-faq-heading .eyebrow { font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; }
.home-faq-heading h2 { margin: 10px 0 0; }
.home-faq-cta { margin-top: 30px; padding: 26px 28px; border-radius: 12px; background-color: var(--color-primary); }
.home-faq-cta p { margin: 0 0 16px; color: #FFFFFF; font-size: 19px; line-height: 28px; font-weight: 700; }
.home-faq-cta .rs-button.style1 .rs-btn { background-color: #FFFFFF; color: var(--color-primary); padding: 14px 26px; border-radius: 5px; }
.home-faq-list .agency-faq-section { margin: 0; }


/* Portfolio: project categories (developerspoint.net "Categories of Our Projects") */
.portfolio-categories-section { padding: 75px 20px 0; }
.portfolio-categories-heading { text-align: center; margin-bottom: 35px; }
.portfolio-categories-heading .eyebrow { font-weight: 600; color: var(--color-primary); }
.portfolio-categories-heading h2 { margin: 10px 0 0; }
.portfolio-categories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.portfolio-category { position: relative; margin: 0; overflow: hidden; border-radius: 15px; background: var(--color-secondary); }
.portfolio-category img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform .5s ease; }
.portfolio-category:hover img { transform: scale(1.05); }
.portfolio-category figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: 10px; background: #FFFFFFF2; color: var(--color-secondary); font-size: 18px; font-weight: 700; }

/* Service CTA with its own section image; standalone designs band */
.svc-cta-media { flex: 0 0 260px; margin: 0; }
.svc-cta-media img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 12px; }
.svc-designs-band { padding: 0 20px; margin: 10px 0 55px; }
.svc-designs-band .svc-designs { max-width: 1310px; margin: 0 auto; }
/* The live-site icons are white line art (made for a dark card), so they sit on a navy tile. */
.services-detail-icon { display: block; width: 60px; height: 60px; padding: 12px; box-sizing: border-box; object-fit: contain; margin-bottom: 16px; border-radius: 10px; background: var(--color-secondary); }

/* Offering Services: detail cards only (no duplicate short cards) */
.services-details-wrap { position: relative; z-index: 1; max-width: 1310px; margin: 0 auto; }
.services-details-intro .services-bento-heading { max-width: 860px; }
.services-detail-card { display: flex; flex-direction: column; }
.services-detail-more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.services-detail-more:hover { color: var(--color-secondary); }
/* Heading left, section image right (stacks below 1025px, responsive.css). */
.services-details-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 60px; align-items: center; }
.services-details-intro .services-bento-heading { max-width: none; }
.services-details-media { margin: 0; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 50px rgba(10, 22, 94, .12); }
.services-details-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Card hover: lift, brand border + top accent bar, deeper shadow, icon
   tile and title switch to the brand blue. */
.services-detail-card { position: relative; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.services-detail-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background-image: linear-gradient(90deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.services-detail-card h3, .services-detail-icon { transition: color .3s ease, background-color .3s ease, transform .35s ease; }
.services-detail-card:hover { transform: translateY(-8px); border-color: var(--color-primary); box-shadow: 0 24px 50px rgba(43, 77, 255, .14); }
.services-detail-card:hover::before { transform: scaleX(1); }
.services-detail-card:hover h3 { color: var(--color-primary); }
.services-detail-card:hover .services-detail-icon { background-color: var(--color-primary); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .services-detail-card, .services-detail-card::before, .services-detail-card h3, .services-detail-icon { transition: none; }
    .services-detail-card:hover, .services-detail-card:hover .services-detail-icon { transform: none; }
}

/* Why Choose: stacked cards for the theme's pin-on-scroll effect */
.why-choose-inner { align-items: flex-start; }
.why-choose-steps.gsap-fixed-yes > .rs-addon-services { position: relative; }
.why-choose-steps.gsap-fixed-yes > .rs-addon-services:nth-child(1) { z-index: 1; }
.why-choose-steps.gsap-fixed-yes > .rs-addon-services:nth-child(2) { z-index: 2; }
.why-choose-steps.gsap-fixed-yes > .rs-addon-services:nth-child(3) { z-index: 3; }
.why-choose-steps.gsap-fixed-yes > .rs-addon-services:nth-child(4) { z-index: 4; }
.why-choose-steps.gsap-fixed-yes .rs-addon-services.style7 .services-inner { background: #FFFFFF; box-shadow: 0 -12px 40px rgba(10, 22, 94, .08); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.why-choose-steps.gsap-fixed-yes .rs-addon-services.style7 .services-inner:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(10, 22, 94, .14); }

/* Technologies: logo above each name */
.tech-logos-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 12px; color: var(--color-primary); }
.tech-logos-icon img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.tech-logos-icon svg { width: 40px; height: 40px; }
.tech-logos-name { transition: border-color .3s ease, transform .3s ease; }
.tech-logos-item:hover .tech-logos-name { border-color: var(--color-primary); transform: translateY(-4px); }

/* Free Consultation: contact channels in the left list (heroicons, one line per number/name) */
.rs-contact-box .address-icon svg { width: 18px; height: 18px; }
.rs-contact-box .address-text .email a, .rs-contact-box .address-text .email .contact-line { display: block; }
.home-faq-image { display: block; width: 100%; max-height: 420px; object-fit: cover; margin-top: 30px; border-radius: 15px; }

/* Socials page (/socials): 4 profile cards per row (slider above 4) */
.socials-section { padding: 80px 20px; }
.socials-inner { max-width: 1310px; margin: 0 auto; }
.socials-heading { text-align: center; margin-bottom: 40px; }
.socials-heading h2 { margin: 0 0 10px; }
.socials-heading p { margin: 0; color: var(--color-text); }
.socials-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.socials-cards--slider .socials-grid { display: block; margin: 0 -12px; }
.socials-cards--slider .socials-grid:not(.slick-initialized) { display: grid; margin: 0; }
.socials-cards--slider .socials-grid:not(.slick-initialized) .socials-slide:nth-child(n+5) { display: none; }
.socials-cards--slider .slick-slide { padding: 10px 12px 14px; height: auto; }
.socials-cards--slider .slick-track { display: flex; }
.socials-cards--slider .slick-slide > div { height: 100%; }
.socials-slide { height: 100%; }
/* Standard card = the network's brand colour (--sc-brand); admin colours (Pages → Socials Page →
   Card colours) override it via --sc-bg / --sc-text / --sc-icon / --sc-hover. */
.socials-card { --sc-ic: var(--sc-icon, var(--sc-brand, var(--color-primary))); --sc-accent: var(--sc-hover, var(--sc-brand, var(--color-primary)));
    box-sizing: border-box; position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 22px 20px; text-align: left; background: var(--sc-bg, var(--sc-brand, var(--color-primary))); border: 1px solid transparent; border-radius: 16px; box-shadow: 0 10px 30px -18px rgba(10, 22, 94, .18); transition: background-color .35s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
/* Standard look: the card in its network's brand colour (white text / icon); on hover it turns white. */
.socials-card:hover { background: #FFFFFF; border-color: color-mix(in srgb, var(--sc-accent) 55%, #E5EAFF); transform: translateY(-4px); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--sc-accent) 50%, transparent); }
.socials-card-accent { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.socials-card:hover .socials-card-accent { transform: scaleX(1); }
.socials-card-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: var(--sc-icon, #FFFFFF); font-size: 30px; transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.socials-card:hover .socials-card-icon { background: var(--sc-accent); color: #FFFFFF; transform: rotate(-8deg) scale(1.05); }
.socials-card-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.socials-card-name { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--sc-text, #FFFFFF); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; transition: color .3s ease; }
.socials-card:hover .socials-card-name { color: var(--color-secondary); }
.socials-card-cta { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 30px; background: rgba(255, 255, 255, .2); color: var(--sc-text, #FFFFFF); font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.socials-card:hover .socials-card-cta, .socials-card-cta:hover { background: var(--sc-accent); color: #FFFFFF; }
.socials-card-cta:focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: 2px; }
.socials-nav { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.socials-nav .rs-divider { flex: 1 1 auto; height: 1px; background-color: #2B4DFF14; }
.socials-arrows { display: flex; gap: 6px; flex-shrink: 0; }
.socials-prev, .socials-next { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background-color: var(--color-primary); color: #FFFFFF; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .3s ease; }
.socials-prev:hover, .socials-next:hover, .socials-prev:focus, .socials-next:focus { background-color: var(--color-secondary); color: #FFFFFF; }
.socials-empty { text-align: center; color: var(--color-text); }
/* Outline heroicons in the contact list: the theme fills every .address-icon svg. */
.rs-contact-box .address-icon svg[stroke] { fill: none; stroke: currentColor; }

/* Footer: every link uses #28aae1 on hover (text links, their arrow, social
   circles and the Discover More button). */
.site-footer .footer-nav .menu-item:hover a.hfe-menu-item,
.site-footer .footer-nav .menu-item:hover a.hfe-menu-item i,
.site-footer .footer-legal-nav .menu-item:hover a.hfe-menu-item,
.site-footer a:hover { color: #28aae1; }
.site-footer .footer-social.rs-social-menu ul li a:hover { background: #28aae1; border-color: #28aae1; }
.site-footer .footer-social.rs-social-menu ul li a:hover i { color: #FFFFFF; }
.site-footer .footer-col--brand .rs-button .rs-btn:hover { background: #28aae1; border-color: #28aae1; color: #FFFFFF; }

/* Service "Carousel" layout (e.g. Web Design → Our Comprehensive … Services) */
.svc-carousel { position: relative; }
.svc-carousel-track { margin: 0; }
.svc-carousel-track:not(.slick-initialized) .svc-carousel-slide + .svc-carousel-slide { display: none; }
.svc-carousel-slide { outline: none; }
.svc-carousel-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 50px; align-items: center; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 15px; padding: 30px; box-shadow: 0 0 68px 9px rgba(0, 0, 0, .04); }
.svc-carousel-card--no-image { grid-template-columns: minmax(0, 1fr); }
.svc-carousel-media img { display: block; width: 100%; height: 100%; min-height: 320px; max-height: 460px; object-fit: cover; border-radius: 12px; }
.svc-carousel-body h3 { margin: 0 0 14px; font-size: 28px; line-height: 36px; color: var(--color-secondary); }
.svc-carousel-body h4 { margin: 20px 0 10px; font-size: 18px; line-height: 26px; color: var(--color-secondary); }
.svc-carousel-body p { margin: 0 0 12px; color: var(--color-text); font-size: 16px; line-height: 27px; }
.svc-carousel-points { list-style: none; margin: 0 0 12px; padding: 0; }
.svc-carousel-points li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; color: var(--color-text); font-size: 15px; line-height: 25px; }
.svc-carousel-points i { flex: none; color: var(--color-primary); font-size: 18px; line-height: 25px; }
.svc-carousel-ideal strong { color: var(--color-secondary); }
/* Nav = Home "Tech insights" (.blog-actions/.blog-slider-nav): divider line + round prev/next at its right end. */
.svc-carousel-nav { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.svc-carousel-nav .rs-divider { flex: 1 1 auto; height: 1px; background-color: #2B4DFF14; }
.svc-carousel-arrows { display: flex; gap: 6px; flex-shrink: 0; }
.svc-carousel-prev, .svc-carousel-next { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background-color: var(--color-primary); color: #FFFFFF; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .3s ease; }
.svc-carousel-prev:hover, .svc-carousel-next:hover, .svc-carousel-prev:focus, .svc-carousel-next:focus { background-color: var(--color-secondary); color: #FFFFFF; }
/* Dark section background (Admin → Page sections → Background: Dark) and
   the blue heading highlight. Consecutive dark bands read as one. */
.svc-hl { color: #08B1EC; }
.svc-band--dark { background-color: #000000; }
.svc-band--dark .svc-heading h2, .svc-band--dark .svc-compare-col-title { color: #FFFFFF; }
.svc-band--dark .svc-heading p { color: #FFFFFFD9; }
.svc-band--dark .svc-accent { display: none; }
.svc-band--dark .svc-heading { max-width: 1240px; margin-left: auto; margin-right: auto; text-align: center; }
.svc-band--dark:has(+ .svc-band--dark) { padding-bottom: 20px; }
.svc-band--dark + .svc-band--dark { padding-top: 20px; }

/* ---------- Pros & cons comparison (developerspoint.net layout) ---------- */
.svc-heading h2:has(.svc-hl), .svc-compare-title { font-size: 64px; line-height: 70px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.svc-band--dark + .svc-band--dark .svc-compare-title { font-size: 40px; line-height: 50px; text-transform: none; letter-spacing: 0; }
.svc-compare-heading { max-width: 1100px; margin-bottom: 50px; }
.svc-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.svc-compare-col { border: 1.5px solid; border-radius: 15px; padding: 26px 20px 20px; display: flex; flex-direction: column; gap: 20px; }
.svc-compare-col--pros { border-color: #7AB648; }
.svc-compare-col--cons { border-color: #E3262C; }
.svc-compare-col-title { margin: 0 0 6px; text-align: center; font-size: 36px; line-height: 44px; color: var(--color-secondary); }
.svc-compare-card { display: flex; align-items: center; gap: 18px; min-height: 190px; box-sizing: border-box; padding: 28px 30px 28px 38px; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 15px; transition: transform .3s ease, box-shadow .3s ease; }
.svc-compare-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(10, 22, 94, .12); }
/* Light comparison: each card tinted, thick accent stripe on the left. */
.svc-compare-card[class*="--"] { border-left-width: 14px; border-color: var(--tint); }
.svc-compare-card--blue { --tint: #08B1EC; }
.svc-compare-card--green { --tint: #7AB648; }
.svc-compare-card--purple { --tint: #7B1FD6; }
.svc-compare-card--pink { --tint: #E5197A; }
.svc-compare-card--orange { --tint: #FF5722; }
.svc-compare-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; border: 1px solid #E5EAFF; background: #FFFFFF; color: var(--color-secondary); font-size: 24px; }
.svc-compare-icon i { font-size: 26px; line-height: 1; }
.svc-compare-body h4 { margin: 0 0 6px; font-size: 22px; line-height: 30px; color: #111111; }
.svc-compare-body p { margin: 0; color: var(--color-text); font-size: 16px; line-height: 25px; }
/* Pros / cons "Card style: list" — each column is one theme card of check / close rows. */
.svc-compare-subtitle { margin: 0 0 12px; color: var(--color-heading); font-size: 32px; line-height: 42px; }
.svc-band--continues.svc-compare { padding-top: 0; }
.svc-band:not(.svc-compare):has(+ .svc-band--continues.svc-compare) { padding-bottom: 30px; }
.svc-band:not(.svc-compare):has(+ .svc-band--continues.svc-compare) .svc-heading { margin-bottom: 0; }
.svc-compare--list + .svc-compare--list { padding-top: 10px; }
.svc-compare--list .svc-compare-heading { margin-bottom: 40px; }
.svc-compare--list .svc-compare-grid { align-items: start; }
.svc-compare--list .svc-compare-col { gap: 0; padding: 30px 32px 14px; background: #FFFFFF; border: 1px solid #E5EAFF; border-top: 4px solid var(--compare-tone); border-radius: 15px; box-shadow: 0 6px 14px rgba(10, 22, 94, .05); }
.svc-compare--list .svc-compare-col--pros { --compare-tone: #20B26C; --compare-soft: #E7F7EF; }
.svc-compare--list .svc-compare-col--cons { --compare-tone: #E3262C; --compare-soft: #FDECEC; }
.svc-compare--list .svc-compare-col-title { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; text-align: left; font-size: 26px; line-height: 34px; color: var(--color-heading); }
.svc-compare-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--compare-soft); color: var(--compare-tone); font-size: 24px; }
.svc-compare--list .svc-compare-card { align-items: flex-start; gap: 16px; min-height: 0; padding: 20px 0; background: none; border: 0; border-top: 1px solid #EEF1FA; border-radius: 0; }
.svc-compare--list .svc-compare-card:hover { transform: none; box-shadow: none; }
.svc-compare--list .svc-compare-icon { width: 32px; height: 32px; margin-top: 2px; border: 0; background: var(--compare-soft); color: var(--compare-tone); }
.svc-compare--list .svc-compare-icon i { font-size: 18px; }
.svc-compare--list .svc-compare-body h4 { margin: 0 0 4px; font-size: 19px; line-height: 27px; color: var(--color-heading); }
.svc-compare--list .svc-compare-body p { font-size: 15px; line-height: 25px; }

/* Card slider (section Layout "Card slider"): equal-height feature cards,
   30px gutters (negative track margin), room above for the hover lift. */
.svc-card-slider { position: relative; }
.svc-card-slider-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.svc-card-slider-track.slick-initialized { display: block; margin: 0 -15px; }
.svc-card-slider-track .slick-list { padding: 8px 0 18px; }
/* The grid cards' wide 68px shadow would be cut off square by the slider's
   overflow:hidden — a tighter shadow that fits inside the gutters. */
.svc-card-slider .svc-card .services-inner { box-shadow: 0 6px 14px rgba(10, 22, 94, .05); }
.svc-card-slider-track .slick-track { display: flex; }
.svc-card-slider-track .slick-slide { height: auto; padding: 0 15px; outline: none; }
.svc-card-slider-track .slick-slide > div { height: 100%; }
.svc-card-slider-slide { height: 100%; }

/* Checklist (double-tick points) shared by grouped cards and detailed slider cards. */
.svc-checklist { list-style: none; margin: 0 0 16px; padding: 0; }
.svc-checklist li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; color: var(--color-text); font-size: 16px; line-height: 26px; }
.svc-checklist li:last-child { margin-bottom: 0; }
.svc-checklist i { flex: none; color: #08B1EC; font-size: 19px; line-height: 26px; }
/* "Points under the text": checklist right below a section's heading text. */
.svc-heading .svc-intro-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 22px 0 0; }
.svc-heading .svc-intro-points li { margin: 0; color: var(--color-heading); font-weight: 500; }
.svc-heading--center .svc-intro-points { display: inline-grid; text-align: left; }
.svc-group-note { margin: 0; color: var(--color-text); font-size: 16px; line-height: 26px; }
.svc-group-note strong { color: #111111; font-weight: 700; }

/* Grouped cards (section Layout "Grouped cards"): display heading (split with
   the intro, or centred), then the site's icon cards in a slider — or, with
   style "pricing", the theme's pricing-table cards. */
.svc-group-head { max-width: none; margin-bottom: 50px; }
.svc-group-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 60px; align-items: start; text-align: left; }
.svc-band--dark .svc-group-head--split { max-width: none; text-align: left; }
.svc-group-head--split h2 { margin: 0; }
.svc-group-head--split .svc-group-intro { padding-top: 10px; }
.svc-group-head.svc-heading--center .svc-group-intro { max-width: 980px; margin: 0 auto; }
.svc-card-slider--group .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-card-slider--group .svc-detail-card { padding: 32px 30px 34px; }
.svc-card-slider--group .svc-detail-card h3 { font-size: 22px; line-height: 30px; }

/* Pricing cards: techtlk-addons pricing-switcher style-1 markup, with the
   theme demo's own values (Pricing page): surface card, 1px blue-tint border,
   10px radius, centred; the highlighted card is white with a blue border;
   gradient button. No price row — the plans have no published prices. */
.svc-pricing-grid { display: grid; gap: 30px; align-items: stretch; }
.svc-pricing-grid--1 { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }
.svc-pricing-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
.svc-pricing-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; height: 100%; padding: 46px 30px 50px; background: #F5F6F7; border: 1px solid rgba(3, 78, 255, .14); border-radius: 10px; text-align: center; transition: border-color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10, 22, 94, .08); border-color: var(--color-primary); }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item.item-active { background: #FFFFFF; border-color: var(--color-primary); }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .title-wrapper { padding: 0; }
/* Side by side, titles get two lines' room so the dividers line up across cards. */
.svc-pricing-grid--2 .title-wrapper, .svc-pricing-grid--3 .title-wrapper { display: flex; flex-direction: column; justify-content: center; min-height: 90px; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .title-wrapper .title { margin: 0 0 10px; color: var(--color-secondary); font-size: 30px; line-height: 40px; font-weight: 700; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .title-wrapper .intro-txt { color: var(--color-text); font-size: 16px; line-height: 26px; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .pricing-feature { flex: 1 1 auto; width: 100%; margin: 20px 0 30px; padding: 22px 0 0; border-top: 1px solid rgba(3, 78, 255, .14); text-align: center; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .pricing-feature ul li { margin: 0 0 10px; padding: 0; color: var(--color-text); font-size: 17px; line-height: 27px; font-weight: 400; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .pricing-feature ul li:before { content: none; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .pricing-btn { padding: 0; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .pricing-btn a { width: auto; padding: 11px 30px; border: 0; border-radius: 5px; background: linear-gradient(180deg, #2B4DFF 0%, #0349EF 100%); color: #FFFFFF; font-size: 17px; line-height: 27px; font-weight: 500; text-decoration: none; transition: background .3s ease; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item.item-active .pricing-btn a { background: linear-gradient(180deg, #0349EF 0%, #2B4DFF 100%); }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .pricing-btn a:hover { background: var(--color-secondary); color: #FFFFFF; }
.svc-pricing.rs-pricing-switcher.style-1 .pricing-item .pricing-btn a svg path { fill: #FFFFFF; }

/* Card slider with detailed cards (items written as "Lead. What We Do: • … • …
   Why It Matters: …"): 2 per view, icon + title + lead + checklist + note. */
.svc-card-slider--detail .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-detail-card { box-sizing: border-box; height: 100%; padding: 34px 34px 36px; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 15px; box-shadow: 0 6px 14px rgba(10, 22, 94, .05); transition: border-color .3s ease; }
.svc-detail-card:hover { border-color: var(--color-primary); }
.svc-detail-icon { display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; margin-bottom: 22px; border-radius: 10px; background: var(--color-surface); color: var(--color-primary); transition: background-color .3s ease, color .3s ease; }
.svc-detail-icon i { font-size: 30px; line-height: 1; }
.svc-detail-card:hover .svc-detail-icon { background: var(--color-primary); color: #FFFFFF; }
/* A card with its own image (illustration) shows it in place of the icon box. */
.svc-detail-media { display: flex; align-items: center; justify-content: center; height: 210px; margin: 0 0 24px; padding: 18px; border-radius: 10px; background: var(--color-surface); box-sizing: border-box; overflow: hidden; }
.svc-detail-media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .4s ease; }
.svc-detail-card:hover .svc-detail-media img { transform: scale(1.04); }
.svc-detail-media--photo { padding: 0; }
.svc-detail-media--photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* Fixed-shape photo frames (fill-the-grid image, card photos, page side images, 16:9 images):
   when the frame's shape would cut away more than ~30% of the picture, main.js adds
   .media-fit-whole — the photo shows whole, over a soft blurred copy of itself. */
.media-fit-whole { position: relative; overflow: hidden; isolation: isolate; background-color: var(--color-surface); }
.media-fit-whole::before { content: ""; position: absolute; inset: -30px; z-index: 0; background: var(--fit-bg) center / cover no-repeat; filter: blur(22px) saturate(1.1); opacity: .5; }
figure.media-fit-whole > img { z-index: 1; object-fit: contain; }
.svc-detail-media--photo.media-fit-whole > img, .svc-media--below.media-fit-whole > img { position: relative; box-shadow: none; }
.svc-media--below.media-fit-whole { border-radius: 15px; box-shadow: 0 20px 50px rgba(10, 22, 94, .12); }

/* Heading-less text band (the lead-in paragraph under the hero / between sections): a lead, not small print. */
.svc-heading--prose p { color: var(--color-heading); font-size: 20px; line-height: 34px; }
.svc-detail-card .svc-checklist strong, .svc-detail-card > p strong { color: var(--color-secondary); font-weight: 600; }
/* Process steps with a small label ("Step 1", "Case Study 1"): label over the
   title, same hover as the service cards. */
.svc-step-label { display: block; margin: 0 0 6px; color: var(--color-primary); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* One row on desktop; when they wrap, the last row stays centred. */
.svc-steps--labelled { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 30px; }
.svc-steps--labelled .svc-step { flex: 1 1 0; min-width: 0; box-sizing: border-box; box-shadow: 0 6px 14px rgba(10, 22, 94, .05); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
/* Six or more steps: rows of three. */
@media (min-width: 1200px) { .svc-steps--labelled:has(> .svc-step:nth-child(6)) .svc-step { flex: 0 0 calc((100% - 60px) / 3); } }
.svc-steps--labelled .svc-step:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(10, 22, 94, .10); }
/* Card grid with 4 columns (section "Card columns: 4"). */
.svc-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.svc-card-grid--4 .svc-card .services-inner { padding: 28px 24px; }
/* "Card columns: 5" (short title-only cards, e.g. an industries row). */
.svc-card-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.svc-card-grid--5 .svc-card .services-inner { padding: 28px 22px; }
/* "Card style: chips" — icon + name pills (e.g. supported platforms). */
.svc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.svc-chip { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 12px 24px 12px 12px; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 999px; box-shadow: 0 6px 14px rgba(10, 22, 94, .05); color: var(--color-heading); font-size: 17px; font-weight: 500; line-height: 24px; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.svc-chip i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface); color: var(--color-primary); font-size: 22px; transition: background-color .3s ease, color .3s ease; }
.svc-chip:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10, 22, 94, .10); }
.svc-chip:hover i { background: var(--color-primary); color: #FFFFFF; }

/* Checklist slider (section Layout "Checklist slider"): one category per slide,
   its checks as surface cards in a grid; section text after the slider. */
.svc-checklist-slider { position: relative; }
.svc-checklist-track:not(.slick-initialized) .svc-checklist-slide + .svc-checklist-slide { margin-top: 30px; }
/* Room inside each slide so the panel's border/shadow isn't clipped by the slider. */
.svc-checklist-slide { outline: none; padding: 4px 2px 18px; box-sizing: border-box; }
.svc-checklist-panel { box-sizing: border-box; padding: 40px; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 15px; box-shadow: 0 6px 14px rgba(10, 22, 94, .05); }
.svc-checklist-title { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; color: var(--color-secondary); font-size: 28px; line-height: 36px; }
.svc-checklist-count { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: #FFFFFF; font-size: 16px; font-weight: 700; box-shadow: 0 0 0 6px #2B4DFF14; }
.svc-checklist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.svc-check-card { box-sizing: border-box; height: 100%; padding: 26px 24px; background: var(--color-surface); border: 1px solid transparent; border-radius: 10px; transition: border-color .3s ease, background-color .3s ease; }
.svc-check-card:hover { background: #FFFFFF; border-color: var(--color-primary); }
.svc-check-card h4 { margin: 0 0 14px; color: var(--color-secondary); font-size: 19px; line-height: 27px; }
.svc-check-card p { margin: 0 0 12px; color: var(--color-text); font-size: 16px; line-height: 26px; }
.svc-checklist-counter { flex: none; color: var(--color-secondary); font-weight: 600; font-size: 16px; }
.svc-checklist-outro { max-width: 980px; margin: 30px auto 0; text-align: center; color: var(--color-text); font-size: 17px; line-height: 29px; }

/* Group heading (section Layout "Group heading") + the sections it introduces:
   one continuous light band — the heading over a faint dot grid with a primary
   glow, a row of links to each category, then the categories on the same
   background, split by a hairline and numbered "01 / 06". */
.svc-band--grouped { background-color: var(--color-surface); scroll-margin-top: 110px; }
.svc-groupset-head { position: relative; overflow: hidden; padding-bottom: 50px; isolation: isolate; }
.svc-groupset-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(43, 77, 255, .16) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.svc-groupset-head::after { content: ""; position: absolute; z-index: -1; right: -160px; top: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 77, 255, .14) 0%, transparent 70%); pointer-events: none; }
.svc-group-head-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.svc-group-head-row--media { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.svc-group-head-copy { max-width: 820px; margin-bottom: 0; }
.svc-group-head-copy h2 { font-size: 46px; line-height: 56px; }
.svc-group-head-copy .svc-inline-btn { margin-top: 26px; }
.svc-group-head-media { margin: 0; display: flex; justify-content: center; }
.svc-group-head-media img { display: block; width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 24px 40px rgba(10, 22, 94, .16)); }
.svc-group-index { display: grid; grid-template-columns: repeat(var(--group-cols, 6), minmax(0, 1fr)); gap: 14px; margin-top: 46px; }
.svc-group-index-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #FFFFFF; border: 1px solid #E5EAFF; border-radius: 12px; color: var(--color-secondary); text-decoration: none; box-shadow: 0 6px 14px rgba(10, 22, 94, .04); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.svc-group-index-item:hover, .svc-group-index-item:focus-visible { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(10, 22, 94, .10); color: var(--color-secondary); }
.svc-group-index-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--color-surface); color: var(--color-primary); font-size: 20px; transition: background-color .3s ease, color .3s ease; }
.svc-group-index-item:hover .svc-group-index-icon { background: var(--color-primary); color: #FFFFFF; }
.svc-group-index-text { display: flex; flex-direction: column; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.svc-group-index-text small { color: var(--color-primary); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; }
/* Category sections: same background, hairline between, number over the title. */
.svc-band--grouped:not(.svc-groupset-head) { padding-top: 0; }
.svc-band--grouped:not(.svc-groupset-head) > .svc-inner { border-top: 1px solid #2B4DFF1F; padding-top: 60px; }
.svc-band--grouped:not(.svc-groupset-head):not(.svc-band--grouped-last) { padding-bottom: 60px; }
.svc-group-num { display: inline-flex; align-items: baseline; gap: 4px; margin-bottom: 12px; padding: 5px 12px; border-radius: 30px; background: #2B4DFF14; color: var(--color-primary); font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: .04em; }
.svc-group-num em { font-style: normal; color: #2B4DFF99; font-weight: 600; }

/* 1 detailed card per view (section "Cards per view: 1"): one wide card — icon and
   title on the left, text on the right, its points as small surface cards. */
.svc-card-slider--detail-1 .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: minmax(0, 1fr); }
.svc-card-slider--detail-1 .svc-detail-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-auto-flow: row dense; column-gap: 60px; align-content: start; padding: 44px 48px; }
.svc-card-slider--detail-1 .svc-detail-card > .svc-detail-icon,
.svc-card-slider--detail-1 .svc-detail-card > h3 { grid-column: 1; }
.svc-card-slider--detail-1 .svc-detail-card > :not(.svc-detail-icon):not(h3) { grid-column: 2; }
.svc-card-slider--detail-1 .svc-detail-card > h3 { font-size: 30px; line-height: 40px; }
/* Icon and title share the left column across all rows, so they never stretch a row. */
.svc-card-slider--detail-1 .svc-detail-card > .svc-detail-icon { grid-row: 1 / span 12; align-self: start; }
.svc-card-slider--detail-1 .svc-detail-card > h3 { grid-row: 1 / span 12; align-self: start; margin-top: 87px; }
/* Each slide keeps its own height (no equal-height stretch). */
.svc-card-slider--detail-1 .svc-card-slider-track .slick-track { align-items: flex-start; }
/* adaptiveHeight sizes the (border-box) list to the slide, so the room for the
   card's border and shadow goes on the slide itself, not on the list. */
.svc-card-slider--detail-1 .svc-card-slider-track .slick-list { padding: 0; }
.svc-card-slider--detail-1 .svc-card-slider-track .slick-slide { padding-top: 8px; padding-bottom: 18px; }
/* A wide card with its own illustration: text on the left, illustration on the right. */
.svc-card-slider--detail-1 .svc-detail-card:has(> .svc-detail-media) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.svc-card-slider--detail-1 .svc-detail-card:has(> .svc-detail-media) > :not(.svc-detail-media):not(.svc-detail-icon) { grid-column: 1; }
.svc-card-slider--detail-1 .svc-detail-card:has(> .svc-detail-media) > h3 { grid-row: auto; margin: 0 0 14px; }
.svc-card-slider--detail-1 .svc-detail-card > .svc-detail-media { grid-column: 2; grid-row: 1 / span 12; align-self: center; height: 300px; margin: 0; }
.svc-card-slider--detail-1 .svc-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 0; }
.svc-card-slider--detail-1 .svc-checklist li { margin: 0; padding: 18px 18px 20px; background: var(--color-surface); border-radius: 10px; transition: background-color .3s ease, box-shadow .3s ease; }
.svc-card-slider--detail-1 .svc-checklist li:hover { background: #FFFFFF; box-shadow: 0 10px 24px rgba(10, 22, 94, .08); }

/* Logo cards (section "Card images: logos"): image + name, centred, same-height
   logo area, 5 per view — a technology/platform logo carousel. */
.svc-card-slider--logos .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.svc-card-slider--logos .svc-card .services-inner { align-items: center; text-align: center; gap: 18px; padding: 28px 20px 26px; }
.svc-card-slider--logos .svc-card-image { display: flex; align-items: center; justify-content: center; height: 130px; }
.svc-card-slider--logos .svc-card-image img { width: auto; max-width: 100%; max-height: 130px; object-fit: contain; border-radius: 10px; transition: transform .4s ease; }
.svc-card-slider--logos .svc-card:hover .svc-card-image img { transform: scale(1.05); }
.svc-card-slider--logos .svc-card .content_part { align-items: center; }
.svc-card-slider--logos .svc-card .services-title .title { margin: 0; font-size: 18px; line-height: 26px; }

/* 3 detailed cards per view: slightly tighter card. */
.svc-card-slider--detail-3 .svc-card-slider-track:not(.slick-initialized) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-card-slider--detail-3 .svc-detail-card { padding: 28px 26px 30px; }
.svc-card-slider--detail-3 .svc-detail-card h3 { font-size: 21px; line-height: 29px; }
.svc-card-slider--detail-3 .svc-detail-media { height: 190px; }
.svc-detail-card h3 { margin: 0 0 12px; color: var(--color-secondary); font-size: 24px; line-height: 32px; }
.svc-detail-card > p { margin: 0 0 18px; color: var(--color-text); font-size: 16px; line-height: 26px; }
.svc-detail-card h4 { margin: 0 0 14px; color: var(--color-secondary); font-size: 19px; line-height: 27px; }
/* A second list in the same card ("…\nBy investing early on, you can: • …"). */
.svc-detail-card h4.svc-list-break { margin-top: 24px; }
/* Display heading beside a section image: a step smaller than the full-width one. */
.svc-media-row .svc-heading h2:has(.svc-hl) { font-size: 50px; line-height: 58px; }
.socials-card-icon i { font-size: 24px; line-height: 1; }
/* Inside the slider the card shadow would be clipped by .slick-list into a visible box. */
.socials-cards--slider .socials-card { box-shadow: none; }

/* Lightbox player */
.socials-video-modal { position: relative; width: min(960px, 92vw); margin: 0 auto; aspect-ratio: 16 / 9; background: #000000; border-radius: 10px; overflow: hidden; }
.socials-video-modal video, .socials-video-modal iframe { display: block; width: 100%; height: 100%; border: 0; }
.socials-video-modal--portrait { width: auto; height: min(86vh, 760px); max-width: 92vw; aspect-ratio: 9 / 16; }
.socials-video-popup .mfp-close { color: #FFFFFF; opacity: .9; font-size: 40px; width: 50px; height: 50px; line-height: 50px; }
/* Socials: call to action at the end of the page — dark brand panel, floating profile icons,
   the Home hero's service pills (.hero-links) and two buttons. */
.socials-cta-section { padding: 0 20px 100px; }
.socials-cta { position: relative; overflow: hidden; max-width: 1310px; margin: 0 auto; padding: 80px 60px; border-radius: 30px; text-align: center; color: #FFFFFF; background: radial-gradient(120% 140% at 0% 0%, var(--color-primary) 0%, transparent 55%), linear-gradient(135deg, var(--color-secondary) 0%, #050B33 100%); box-shadow: 0 40px 80px -40px rgba(10, 22, 94, .6); isolation: isolate; }
.socials-cta-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(10px); pointer-events: none; }
.socials-cta-orb--a { width: 380px; height: 380px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(43, 77, 255, .55) 0%, transparent 70%); }
.socials-cta-orb--b { width: 300px; height: 300px; left: 30%; bottom: -200px; background: radial-gradient(circle, rgba(40, 170, 225, .35) 0%, transparent 70%); }
.socials-cta-icons span { position: absolute; z-index: -1; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75); font-size: 24px; backdrop-filter: blur(4px); animation: socials-cta-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1s); }
.socials-cta-icons span:nth-child(1) { left: 6%; top: 16%; }
.socials-cta-icons span:nth-child(2) { left: 10%; bottom: 18%; }
.socials-cta-icons span:nth-child(3) { left: 2.5%; top: 52%; width: 44px; height: 44px; font-size: 20px; }
.socials-cta-icons span:nth-child(4) { right: 6%; top: 18%; }
.socials-cta-icons span:nth-child(5) { right: 10%; bottom: 16%; }
.socials-cta-icons span:nth-child(6) { right: 2.5%; top: 50%; width: 44px; height: 44px; font-size: 20px; }
@keyframes socials-cta-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-6deg); } }
.socials-cta-body { position: relative; max-width: 860px; margin: 0 auto; }
.socials-cta-eyebrow { display: inline-block; margin-bottom: 18px; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 30px; background: rgba(255, 255, 255, .08); font-size: 14px; font-weight: 600; letter-spacing: .3px; }
.socials-cta h2 { margin: 0 0 16px; color: #FFFFFF; font-size: 46px; line-height: 1.15; }
.socials-cta-body > p { max-width: 640px; margin: 0 auto; color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 28px; }
.socials-cta .socials-cta-services { justify-content: center; margin: 30px auto 0; }
.socials-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.socials-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 30px; border: 1px solid #FFFFFF; border-radius: 40px; background: #FFFFFF; color: var(--color-secondary); font-weight: 700; font-size: 16px; text-decoration: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.socials-cta-btn i { font-size: 18px; transition: transform .3s ease; }
.socials-cta-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; transform: translateY(-2px); }
.socials-cta-btn:hover i { transform: translateX(3px); }
.socials-cta-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #FFFFFF; }
.socials-cta-btn--ghost:hover { background: #25D366; border-color: #25D366; }
.socials-cta-btn--ghost:hover i { transform: none; }
/* ===== Socials: News Feed (video / image / text posts) ===== */
.newsfeed-section { padding: 10px 20px 90px; }
.newsfeed-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.newsfeed-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 14px; border-radius: 30px; background: color-mix(in srgb, var(--color-primary) 10%, #FFFFFF); color: var(--color-primary); font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.newsfeed-card { display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid #E5EAFF; border-top: 3px solid var(--pf-color, var(--color-primary)); border-radius: 18px; box-shadow: 0 14px 34px -24px rgba(10, 22, 94, .35); transition: transform .3s ease, box-shadow .3s ease; }
.newsfeed-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--pf-color, var(--color-primary)) 55%, transparent); }
.newsfeed-card:focus { outline: none; }
.newsfeed-media { display: block; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface); }
.newsfeed-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.newsfeed-card:hover .newsfeed-media img { transform: scale(1.04); }
/* Image cards: show the full image at its natural aspect ratio, not cropped to 16:9. */
.newsfeed-media:not(.newsfeed-video) { aspect-ratio: auto; }
.newsfeed-media:not(.newsfeed-video) > img { height: auto; }
.newsfeed-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.newsfeed-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.newsfeed-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 30px; background: color-mix(in srgb, var(--pf-color, var(--color-primary)) 12%, #FFFFFF); color: var(--pf-color, var(--color-primary)); font-size: 13px; font-weight: 700; }
.newsfeed-date { color: var(--color-text); font-size: 13px; white-space: nowrap; }
.newsfeed-source { margin: 0; color: var(--color-secondary); font-size: 14px; font-weight: 600; }
.newsfeed-title { margin: 0; color: var(--color-secondary); font-size: 19px; line-height: 27px; }
.newsfeed-text p { margin: 0; color: var(--color-text); font-size: 15px; line-height: 25px; overflow-wrap: anywhere; }
.newsfeed-text.is-clamped p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.newsfeed-more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--color-primary); font-size: 14px; font-weight: 700; cursor: pointer; }
.newsfeed-more:hover { text-decoration: underline; }
.newsfeed-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--pf-color, var(--color-primary)); font-size: 14px; font-weight: 700; text-decoration: none; }
.newsfeed-link:hover { text-decoration: underline; }
/* (!important: the theme sets "body a { outline: none !important }".) */
.newsfeed-nav-link:focus-visible, .newsfeed-follow:focus-visible, .newsfeed-more:focus-visible, .newsfeed-link:focus-visible, .newsfeed-platform .socials-prev:focus-visible, .newsfeed-platform .socials-next:focus-visible, .newsfeed-dots button:focus-visible { outline: 3px solid color-mix(in srgb, var(--pf-color, var(--color-primary)) 55%, #FFFFFF) !important; outline-offset: 2px; }
/* News Feed video cards: preview / thumbnail + play button; click → popup player (.socials-video-modal). */
.newsfeed-media { position: relative; border: 0; padding: 0; width: 100%; }
.newsfeed-shape--portrait { aspect-ratio: 4 / 5; }
.newsfeed-video { cursor: pointer; background: var(--color-secondary); }
.newsfeed-video img, .newsfeed-video video, .newsfeed-video iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.newsfeed-video iframe { pointer-events: none; transform: scale(1.35); }
.newsfeed-video > img:not(.newsfeed-yt-cover), .newsfeed-video > video { transition: transform .6s ease; }
.newsfeed-card:hover .newsfeed-video > img:not(.newsfeed-yt-cover), .newsfeed-card:hover .newsfeed-video > video { transform: scale(1.04); }
/* Shade at the bottom, and a transparent shield over the preview: the mouse never reaches the
   embedded player, so its own cursor / controls can't appear next to ours — one pointer, one click target. */
.newsfeed-video::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 100%); }
.newsfeed-video::after { content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; background: transparent; }
.newsfeed-video * { cursor: inherit; }
.newsfeed-yt-cover { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity .4s ease; }
.newsfeed-video.is-yt-live .newsfeed-yt-cover { opacity: 0; }
/* Facebook SDK player over the poster until it is ready. (Scoped: outranks the SDK's .fb_iframe_widget rules.) */
.newsfeed-video .newsfeed-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.newsfeed-video.is-fb-ready .newsfeed-fb { opacity: 1; }
.newsfeed-video .newsfeed-fb > span, .newsfeed-video .newsfeed-fb iframe { width: 100% !important; transform: none; }
.newsfeed-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #FFFFFF66; font-size: 56px; background: linear-gradient(150deg, var(--pf-color, var(--color-primary)) 0%, var(--color-secondary) 100%); }
.newsfeed-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--pf-color, var(--color-primary)); color: #FFFFFF; font-size: 28px; box-shadow: none; outline: 0; transition: transform .3s ease, background-color .3s ease; }
.newsfeed-play::before, .newsfeed-play::after { content: none; display: none; }
.newsfeed-video:hover .newsfeed-play { transform: translate(-50%, -50%) scale(1.08); background: var(--color-secondary); }
.newsfeed-video:focus-visible { outline: 3px solid var(--pf-color, var(--color-primary)) !important; outline-offset: -3px; }
/* News Feed: a Facebook Page's live timeline card (official Page Plugin). */
.newsfeed-live { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); font-size: 13px; font-weight: 600; }
.newsfeed-live span { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: newsfeed-live 2s infinite; }
@keyframes newsfeed-live { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.newsfeed-fbpage { min-height: 200px; overflow: hidden; border-radius: 12px; background: var(--color-surface); }
.newsfeed-fbpage .fb-page, .newsfeed-fbpage .fb-page > span, .newsfeed-fbpage iframe { width: 100% !important; max-width: 100%; }
.newsfeed-fbpage blockquote { margin: 0; padding: 20px; }
/* News Feed: platform bar + one panel (with its own carousel) per platform. */
.newsfeed-nav { display: flex; justify-content: center; max-width: 100%; margin: 0 0 6px; }
.newsfeed-nav-track { position: relative; display: flex; gap: 8px; max-width: 100%; margin: 0; padding: 6px; list-style: none; overflow-x: auto; scrollbar-width: none; border: 1px solid #E5EAFF; border-radius: 50px; background: #FFFFFF; box-shadow: 0 14px 34px -22px rgba(10, 22, 94, .35); }
.newsfeed-nav-track::-webkit-scrollbar { display: none; }
.newsfeed-nav-track li { flex: none; }
.newsfeed-nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 9px 16px; border-radius: 40px; color: var(--color-secondary); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.newsfeed-nav-link i { color: var(--pf-color, var(--color-primary)); font-size: 18px; transition: color .3s ease; }
.newsfeed-nav-link:hover { background: color-mix(in srgb, var(--pf-color, var(--color-primary)) 10%, #FFFFFF); }
.newsfeed-nav-link.is-active { background: var(--pf-color, var(--color-primary)); color: #FFFFFF; }
.newsfeed-nav-link.is-active i { color: #FFFFFF; }
.newsfeed-nav-count { min-width: 22px; padding: 0 7px; border-radius: 20px; background: var(--color-surface); color: var(--color-secondary); font-size: 12px; line-height: 21px; text-align: center; }
.newsfeed-nav-link.is-active .newsfeed-nav-count { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.newsfeed-platform { position: relative; margin-top: 36px; padding: 32px 32px 26px; border: 1px solid color-mix(in srgb, var(--pf-color, var(--color-primary)) 14%, #E5EAFF); border-radius: 26px; background: linear-gradient(180deg, color-mix(in srgb, var(--pf-color, var(--color-primary)) 6%, #FFFFFF) 0%, #FFFFFF 55%); scroll-margin-top: 120px; overflow: hidden; }
.newsfeed-platform:focus { outline: none; }
.newsfeed-platform::before { content: ""; position: absolute; top: -120px; right: -120px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pf-color, var(--color-primary)) 14%, transparent) 0%, transparent 70%); pointer-events: none; }
.newsfeed-platform-head { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.newsfeed-platform-badge { flex: none; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: var(--pf-color, var(--color-primary)); color: #FFFFFF; font-size: 28px; box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--pf-color, var(--color-primary)) 70%, transparent); }
.newsfeed-platform--instagram .newsfeed-platform-badge { background: linear-gradient(45deg, #F9CE34, #EE2A7B 50%, #6228D7); }
.newsfeed-platform--tiktok .newsfeed-platform-badge { box-shadow: -3px -3px 0 #25F4EE, 3px 3px 0 #FE2C55; }
.newsfeed-platform-title { flex: 1 1 auto; min-width: 0; }
.newsfeed-platform-title h3 { margin: 0; font-size: 26px; line-height: 32px; color: var(--color-secondary); }
.newsfeed-platform-title span { color: var(--color-text); font-size: 14px; }
.newsfeed-follow { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: 1px solid var(--pf-color, var(--color-primary)); border-radius: 40px; color: var(--pf-color, var(--color-primary)); font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.newsfeed-follow:hover { background: var(--pf-color, var(--color-primary)); color: #FFFFFF; }
/* Carousel: equal-height cards; before slick starts, a 3-column row. */
.newsfeed-carousel:not(.slick-initialized) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.newsfeed-carousel:not(.slick-initialized) .newsfeed-slide:nth-child(n+4) { display: none; }
.newsfeed-carousel.slick-initialized { margin: 0 -12px; }
.newsfeed-carousel .slick-list { padding: 4px 0 18px; }
.newsfeed-carousel .slick-track { display: flex; margin-left: 0; }
.newsfeed-carousel .slick-slide { height: auto; padding: 0 12px; }
.newsfeed-carousel .slick-slide > div, .newsfeed-slide { height: 100%; }
.newsfeed-slide .newsfeed-card { height: 100%; }
.newsfeed-slide .newsfeed-card:hover { transform: translateY(-4px); }
.newsfeed-carousel-nav { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.newsfeed-carousel-nav .rs-divider { flex: 1 1 auto; height: 1px; background-color: #2B4DFF14; }
.newsfeed-platform .socials-prev, .newsfeed-platform .socials-next { background-color: var(--pf-color, var(--color-primary)); }
.newsfeed-platform .socials-prev.slick-disabled, .newsfeed-platform .socials-next.slick-disabled { opacity: .35; cursor: default; }
.newsfeed-dots .slick-dots { position: static; display: flex !important; gap: 6px; margin: 0; padding: 0; list-style: none; }
.newsfeed-dots .slick-dots li { width: auto; height: auto; margin: 0; }
.newsfeed-dots .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--pf-color, var(--color-primary)) 30%, #FFFFFF); font-size: 0; cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.newsfeed-dots .slick-dots button::before { display: none; }
.newsfeed-dots .slick-dots .slick-active button { width: 22px; background: var(--pf-color, var(--color-primary)); }
@media (max-width: 991px) { .newsfeed-carousel:not(.slick-initialized) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .newsfeed-carousel:not(.slick-initialized) .newsfeed-slide:nth-child(n+3) { display: none; } }
@media (max-width: 575px) { .newsfeed-carousel:not(.slick-initialized) { grid-template-columns: minmax(0, 1fr); } .newsfeed-carousel:not(.slick-initialized) .newsfeed-slide:nth-child(n+2) { display: none; } }
/* News Feed: one embedded Facebook post per slide (official Embedded Post plugin). */
.newsfeed-fbpost { min-height: 200px; max-height: 620px; overflow: hidden auto; border-radius: 12px; background: var(--color-surface); scrollbar-width: thin; }
.newsfeed-fbpost .fb-post, .newsfeed-fbpost .fb-post > span, .newsfeed-fbpost iframe { max-width: 100% !important; }
.newsfeed-fbpost blockquote { margin: 0; padding: 20px; }
/* News Feed: a Facebook Page's live feed across the full section width — info panel + the timeline
   (Facebook's Page Plugin is at most 500 px wide, so it sits on the right at full size). */
.newsfeed-live-wide { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 40px; align-items: center; padding: 28px; border: 1px solid #E5EAFF; border-top: 3px solid var(--pf-color, var(--color-primary)); border-radius: 20px; background: #FFFFFF; box-shadow: 0 14px 34px -24px rgba(10, 22, 94, .35); }
.newsfeed-live-wide + .newsfeed-slider { margin-top: 28px; }
.newsfeed-live-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 10px 6px; }
.newsfeed-live-info h4 { margin: 0; color: var(--color-secondary); font-size: 32px; line-height: 1.2; }
.newsfeed-live-info p { margin: 0; max-width: 460px; color: var(--color-text); font-size: 16px; line-height: 27px; }
.newsfeed-live-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.newsfeed-live-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 40px; background: var(--pf-color, var(--color-primary)); color: #FFFFFF; font-weight: 700; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.newsfeed-live-btn:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 12px 24px -12px var(--pf-color, var(--color-primary)); }
.newsfeed-live-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--pf-color, var(--color-primary)) 55%, #FFFFFF) !important; outline-offset: 2px; }
.newsfeed-fbpage--wide { justify-self: end; width: 100%; max-width: 500px; min-height: 640px; }
@media (max-width: 991px) {
    .newsfeed-live-wide { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px; }
    .newsfeed-live-info h4 { font-size: 26px; }
    .newsfeed-fbpage--wide { justify-self: center; min-height: 560px; }
}
/* News Feed: subtle "loading more posts" state of a growing (Facebook) carousel. */
.newsfeed-loading { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--color-text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.newsfeed-loading[hidden] { display: none; }
.newsfeed-spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--pf-color, var(--color-primary)) 25%, transparent); border-top-color: var(--pf-color, var(--color-primary)); border-radius: 50%; animation: newsfeed-spin .8s linear infinite; }
@keyframes newsfeed-spin { to { transform: rotate(360deg); } }
.newsfeed-slider.is-loading .newsfeed-next { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .newsfeed-spinner { animation-duration: 2.4s; } }
/* News Feed: profile tabs (buttons in the platform bar) + the panel of a profile without posts. */
.newsfeed-nav-link { border: 0; background: transparent; cursor: pointer; }
.newsfeed-nav-link:not(.is-active):hover { background: color-mix(in srgb, var(--pf-color, var(--color-primary)) 10%, #FFFFFF); }
.newsfeed-platform[hidden] { display: none; }
.newsfeed-profile-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 28px; border: 1px dashed color-mix(in srgb, var(--pf-color, var(--color-primary)) 35%, #E5EAFF); border-radius: 18px; background: #FFFFFF; }
.newsfeed-profile-empty p { margin: 0; color: var(--color-text); font-size: 16px; }
@media (max-width: 640px) { .newsfeed-profile-empty { flex-direction: column; align-items: stretch; text-align: center; } .newsfeed-profile-empty .newsfeed-live-btn { justify-content: center; } }
/* News Feed buttons: the theme's global "button:hover { background: primary; color: #fff }" must not repaint them. */
.newsfeed-nav-link:not(.is-active):hover, .newsfeed-nav-link:not(.is-active):focus { background: color-mix(in srgb, var(--pf-color, var(--color-primary)) 10%, #FFFFFF); color: var(--color-secondary); }
.newsfeed-nav-link.is-active:hover, .newsfeed-nav-link.is-active:focus { background: var(--pf-color, var(--color-primary)); color: #FFFFFF; }
.newsfeed-more:hover, .newsfeed-more:focus { background: none; color: var(--color-primary); }

/* ==================================================================
   SEARCH PAGE (/search) — results of the header search field. Cards,
   hero and grid reuse .agency-card-grid / service-hero; only the search
   form row, type filters, group titles and empty state are new.
================================================================== */
.search-page-section { padding: 80px 20px; }
.search-page-inner { max-width: 1310px; margin: 0 auto; }
.search-page-form { position: relative; display: flex; align-items: center; max-width: 760px; margin: 0 auto 30px; }
.search-page-form-icon { position: absolute; left: 22px; color: #8A8FA8; font-size: 20px; pointer-events: none; }
.search-page-form input[type=search] {
    width: 100%; height: 64px; margin: 0; padding: 0 150px 0 56px;
    border: 1px solid #E5EAFF; border-radius: 12px; background: #FFFFFF; color: var(--color-secondary);
    font-family: var(--font-primary), sans-serif; font-size: 17px; outline: none;
    box-shadow: 0 14px 40px -18px rgba(10, 22, 94, .25); transition: .3s;
}
.search-page-form input[type=search]:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(43, 77, 255, .1); }
.search-page-form button, .search-page-form button:hover, .search-page-form button:focus {
    position: absolute; top: 8px; right: 8px; height: 48px; padding: 0 28px; border: 0; border-radius: 8px; cursor: pointer;
    color: #FFFFFF; font-family: var(--font-primary), sans-serif; font-size: 16px; font-weight: 600;
    background-image: linear-gradient(180deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
}
.search-page-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.search-page-filter {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #E5EAFF; border-radius: 50px;
    background: var(--color-surface); color: var(--color-secondary); font-size: 15px; font-weight: 600; text-decoration: none; transition: .3s;
}
.search-page-filter span { min-width: 24px; padding: 0 7px; border-radius: 50px; background: #FFFFFF; color: var(--color-primary); font-size: 13px; line-height: 22px; text-align: center; }
.search-page-filter:hover { border-color: var(--color-primary); background: var(--color-primary); color: #FFFFFF; }
.search-page-group { padding-top: 30px; scroll-margin-top: 120px; }
.search-page-group-title { margin: 0; font-size: var(--h3-size); line-height: var(--h3-line); }
@media (min-width: 1200px) { .search-page-grid.agency-card-grid { grid-template-columns: repeat(3, 1fr); } }
.search-page-type { display: inline-block; margin-bottom: 6px; color: var(--color-primary); font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.search-page-grid .media_wrap i { font-size: 26px; line-height: 1; }
.search-page-empty { max-width: 560px; margin: 20px auto 0; padding: 50px 30px; border: 1px dashed #D5DCFF; border-radius: 16px; background: var(--color-surface-alt); text-align: center; }
.search-page-empty > i { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin-bottom: 18px; border-radius: 50%; background: #EEF1FF; color: var(--color-primary); font-size: 32px; }
.search-page-empty h3 { margin: 0 0 8px; font-size: var(--h4-size); line-height: var(--h4-line); }
.search-page-empty p { margin: 0; }
.search-page-empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.search-page-empty-links a { padding: 8px 18px; border: 1px solid #E5EAFF; border-radius: 50px; background: #FFFFFF; color: var(--color-secondary); font-size: 15px; font-weight: 600; text-decoration: none; transition: .3s; }
.search-page-empty-links a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.search-page-grid .desc-text { color: var(--color-text); }
/* Popup player: a video file that can't be played → message + link to the original post. */
.socials-video-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; padding: 24px; text-align: center; color: #FFFFFF; }
.socials-video-fallback p { margin: 0; font-size: 18px; font-weight: 600; }
.socials-video-fallback a { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 40px; background: #1877F2; color: #FFFFFF; font-weight: 700; text-decoration: none; }
.socials-video-fallback a:hover { color: #FFFFFF; filter: brightness(1.1); }

/* ==================================================================
   CHAT WIDGET — floating live chat widget (bottom-right corner).
   All classes prefixed dp-chat- to avoid collisions.
================================================================== */
[x-cloak] { display: none !important; }

.dp-chat { position: fixed; bottom: 24px; right: 24px; z-index: 99999; font-family: var(--font-primary), sans-serif; }

/* Bubble button */
.dp-chat-bubble {
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border: none; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
    color: #FFFFFF; font-size: 28px; cursor: pointer;
    box-shadow: 0 4px 20px rgba(43, 77, 255, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.dp-chat-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(43, 77, 255, 0.45); }
.dp-chat-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; background: #EF4444; color: #FFFFFF;
    font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}

/* Bubble enter animation */
.dp-chat-bubble-enter { transition: opacity 0.2s, transform 0.2s; }
.dp-chat-bubble-enter-start { opacity: 0; transform: scale(0.5); }
.dp-chat-bubble-enter-end { opacity: 1; transform: scale(1); }

/* Panel */
.dp-chat-panel {
    position: fixed; bottom: 24px; right: 24px;
    width: 380px; max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    border-radius: 16px; background: #FFFFFF;
    box-shadow: 0 8px 40px rgba(10, 22, 94, 0.15), 0 0 0 1px rgba(43, 77, 255, 0.08);
    overflow: hidden;
}

/* Panel enter/leave */
.dp-chat-panel-enter { transition: opacity 0.25s ease, transform 0.25s ease; }
.dp-chat-panel-enter-start { opacity: 0; transform: translateY(16px) scale(0.96); }
.dp-chat-panel-enter-end { opacity: 1; transform: translateY(0) scale(1); }
.dp-chat-panel-leave { transition: opacity 0.2s ease, transform 0.2s ease; }
.dp-chat-panel-leave-start { opacity: 1; transform: translateY(0) scale(1); }
.dp-chat-panel-leave-end { opacity: 0; transform: translateY(16px) scale(0.96); }

/* Header */
.dp-chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; gap: 12px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
    color: #FFFFFF;
}
.dp-chat-header-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dp-chat-avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.2); font-size: 22px;
}
.dp-chat-header-title { font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-chat-header-status { font-size: 13px; opacity: 0.85; line-height: 1.3; }
.dp-chat-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.dp-chat-header-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: rgba(255, 255, 255, 0.15); color: #FFFFFF;
    font-size: 20px; cursor: pointer; transition: background 0.2s;
}
.dp-chat-header-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* Body */
.dp-chat-body { flex: 1; overflow-y: auto; min-height: 0; }

/* Pre-chat form */
.dp-chat-prechat { padding: 24px 20px; }
.dp-chat-welcome { margin-bottom: 20px; }
.dp-chat-welcome h4 { margin: 0 0 6px; font-size: 20px; line-height: 28px; color: var(--color-heading); }
.dp-chat-welcome p { margin: 0; font-size: 15px; line-height: 22px; color: var(--color-text); }
.dp-chat-form { display: flex; flex-direction: column; gap: 14px; }
.dp-chat-field label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--color-heading); }
.dp-chat-optional { font-weight: 400; color: var(--color-text); font-size: 12px; }
.dp-chat-required { color: #EF4444; }
.dp-chat-field input,
.dp-chat-field textarea {
    display: block; width: 100%; padding: 10px 14px;
    border: 1px solid var(--color-border-light); border-radius: 10px;
    background: #FFFFFF; color: var(--color-heading);
    font-family: var(--font-primary), sans-serif; font-size: 15px; line-height: 1.4;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.dp-chat-field input:focus,
.dp-chat-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(43, 77, 255, 0.1); }
.dp-chat-field textarea { resize: vertical; min-height: 70px; }
.dp-chat-send-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 20px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-cta-gradient-end) 100%);
    color: #FFFFFF; font-family: var(--font-primary), sans-serif;
    font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.dp-chat-send-btn:hover { opacity: 0.92; }
.dp-chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dp-chat-error { margin: 0; font-size: 13px; color: #EF4444; }

/* Conversation messages */
.dp-chat-conversation { display: flex; flex-direction: column; height: 100%; }
.dp-chat-messages { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 280px; max-height: 420px; }
.dp-chat-msg { display: flex; flex-direction: column; max-width: 82%; }
.dp-chat-msg-visitor { align-self: flex-end; align-items: flex-end; }
.dp-chat-msg-agent { align-self: flex-start; align-items: flex-start; }
.dp-chat-msg-system { align-self: center; align-items: center; max-width: 90%; }
.dp-chat-msg-bubble {
    padding: 10px 14px; border-radius: 14px;
    font-size: 15px; line-height: 1.45; word-break: break-word;
}
.dp-chat-msg-visitor .dp-chat-msg-bubble {
    background: var(--color-primary); color: #FFFFFF;
    border-bottom-right-radius: 4px;
}
.dp-chat-msg-agent .dp-chat-msg-bubble {
    background: var(--color-surface); color: var(--color-heading);
    border-bottom-left-radius: 4px;
}
.dp-chat-msg-system .dp-chat-msg-bubble {
    background: transparent; color: var(--color-text);
    font-size: 13px; font-style: italic; padding: 4px 8px;
}
.dp-chat-msg-pending .dp-chat-msg-bubble { opacity: 0.7; }
.dp-chat-msg-failed .dp-chat-msg-bubble { background: #FEE2E2; color: #991B1B; }
.dp-chat-msg-time { font-size: 11px; color: var(--color-text); opacity: 0.6; margin-top: 2px; padding: 0 4px; }

/* Typing indicator */
.dp-chat-typing { display: flex; gap: 4px; padding: 8px 14px; align-self: flex-start; }
.dp-chat-typing span {
    display: block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-primary); opacity: 0.4;
    animation: dp-chat-typing-dot 1.2s infinite;
}
.dp-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.dp-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dp-chat-typing-dot { 0%, 60%, 100% { opacity: 0.4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* Message input bar */
.dp-chat-input {
    flex: 1; padding: 10px 12px; border: 1px solid var(--color-border-light);
    border-radius: 10px; background: var(--color-surface);
    color: var(--color-heading); font-family: var(--font-primary), sans-serif;
    font-size: 15px; line-height: 1.4; resize: none; min-height: 42px; max-height: 120px;
    box-sizing: border-box;
}
.dp-chat-input:focus { outline: none; border-color: var(--color-primary); background: #FFFFFF; }
.dp-chat-input:disabled { opacity: 0.5; }
.dp-chat-input-send {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 42px; height: 42px; border: none; border-radius: 10px;
    background: var(--color-primary); color: #FFFFFF;
    font-size: 18px; cursor: pointer; transition: background 0.2s;
}
.dp-chat-input-send:hover { background: var(--color-cta-gradient-end); }
.dp-chat-input-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Resolved banner */
.dp-chat-resolved {
    padding: 16px; border-top: 1px solid var(--color-border-light);
    background: var(--color-surface-alt); text-align: center;
}
.dp-chat-resolved p { margin: 0 0 10px; font-size: 14px; color: var(--color-text); }
.dp-chat-feedback-prompt { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.dp-chat-feedback-prompt span { font-size: 14px; color: var(--color-text); }
.dp-chat-fb-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 1px solid var(--color-border-light);
    border-radius: 8px; background: #FFFFFF; font-size: 18px;
    cursor: pointer; transition: 0.2s;
}
.dp-chat-fb-yes:hover { border-color: #22C55E; color: #22C55E; background: #F0FDF4; }
.dp-chat-fb-no:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }
.dp-chat-new-btn {
    display: inline-block; padding: 8px 20px; border: 1px solid var(--color-primary);
    border-radius: 8px; background: #FFFFFF; color: var(--color-primary);
    font-family: var(--font-primary), sans-serif; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: 0.2s;
}
.dp-chat-new-btn:hover { background: var(--color-primary); color: #FFFFFF; }

/* Footer */
.dp-chat-footer {
    padding: 10px 16px; border-top: 1px solid var(--color-border-light);
    text-align: center; font-size: 12px; color: var(--color-text); opacity: 0.6;
}
.dp-chat-footer strong { font-weight: 600; }

/* Spinner */
.dp-chat-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF; border-radius: 50%;
    animation: dp-chat-spin 0.6s linear infinite;
}
@keyframes dp-chat-spin { to { transform: rotate(360deg); } }

/* Chat attachment UI */
.dp-chat-input-row { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.dp-chat-input-bar { display: block; padding: 12px 14px; border-top: 1px solid var(--color-border-light); background: #FFFFFF; }
.dp-chat-attach-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
    color: var(--color-text); font-size: 18px; transition: 0.2s;
}
.dp-chat-attach-btn:hover { color: var(--color-primary); background: var(--color-surface); }
.dp-chat-attach-active { color: var(--color-primary); }
.dp-chat-file-input { display: none; }
.dp-chat-attach-preview {
    display: flex; align-items: center; gap: 6px;
    margin-top: 6px; padding: 4px 10px; border-radius: 6px;
    background: var(--color-surface); font-size: 13px; color: var(--color-text);
}
.dp-chat-attach-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-chat-attach-remove {
    flex-shrink: 0; border: none; background: none; color: var(--color-text);
    font-size: 16px; cursor: pointer; padding: 0 2px; opacity: 0.6;
}
.dp-chat-attach-remove:hover { opacity: 1; color: #EF4444; }
.dp-chat-msg-attachments { margin-top: 6px; }
.dp-chat-msg-att {
    display: flex; align-items: center; gap: 4px; font-size: 13px;
    color: var(--color-primary); text-decoration: none; padding: 3px 0;
}
.dp-chat-msg-att:hover { text-decoration: underline; }
.dp-chat-msg-att i { font-size: 14px; }
.dp-chat-att-size { font-size: 11px; opacity: 0.6; }