/* ==========================================================================
   Lincoln Law Center - Custom CSS Override for LawSight/CaseThemes Theme
   Replaces gold/amber (#c9a84c) palette with blue gradient (#012670 → #00419e)
   Replaces dark backgrounds with white (#ffffff) or blue
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (edit these to rebrand quickly)
   -------------------------------------------------------------------------- */
:root {
  --llc-blue-dark: #012670;
  --llc-blue-light: #00419e;
  --llc-blue-gradient: linear-gradient(135deg, #012670, #00419e);
  --llc-blue-gradient-h: linear-gradient(90deg, #012670, #00419e);
  --llc-blue-gradient-v: linear-gradient(180deg, #012670, #00419e);
  --llc-white: #ffffff;
  --llc-off-white: #f0efef;
  --llc-text-dark: #1a1a2e;
  --llc-text-body: #2d2d3f;
  --llc-text-muted: #555566;
  --llc-border: #d0d0d8;
  --llc-shadow: rgba(1, 38, 112, 0.15);
  --llc-hover-glow: rgba(0, 65, 158, 0.25);
}


/* --------------------------------------------------------------------------
   2. General Body & Typography
   -------------------------------------------------------------------------- */
/* Text colors managed directly in Elementor page editor — no global override */
body {
  background-color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   3. Link Colors — gold hovers become blue
   -------------------------------------------------------------------------- */
/* Generic link colors managed in Elementor — only override specific theme areas below */

/* Breadcrumb links */
.ct-breadcrumb a,
.breadcrumbs a,
.trail-items a {
  color: var(--llc-white) !important;
}

.ct-breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--llc-off-white) !important;
}


/* --------------------------------------------------------------------------
   4. Header & Navigation Bar
   -------------------------------------------------------------------------- */
/* Header — keep original theme header background, don't force blue */
/* .ct-header-main — intentionally NOT overridden */

/* Top bar / info bar above main header */
.ct-header-top,
.ct-topbar,
.header-top-bar {
  background-color: var(--llc-blue-dark) !important;
  color: var(--llc-white) !important;
}

.ct-header-top a,
.ct-topbar a {
  color: var(--llc-off-white) !important;
}

/* Navigation links */
.ct-header-main .menu > li > a,
.ct-header .main-menu > li > a,
.ct-navigation a,
.primary-menu a,
.main-navigation a,
.header-style-2 .menu a {
  color: var(--llc-white) !important;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}

.ct-header-main .menu > li > a:hover,
.ct-header .main-menu > li > a:hover,
.ct-navigation a:hover,
.primary-menu a:hover,
.main-navigation a:hover,
.header-style-2 .menu a:hover,
.ct-header-main .menu > li.current-menu-item > a,
.ct-header-main .menu > li.current_page_item > a {
  color: var(--llc-off-white) !important;
  border-bottom-color: var(--llc-off-white) !important;
}

/* Dropdown / sub-menus */
.ct-header .sub-menu,
.ct-navigation .sub-menu,
.main-navigation .sub-menu {
  background-color: var(--llc-blue-dark) !important;
  border-top: 3px solid var(--llc-blue-light) !important;
}

.ct-header .sub-menu a,
.ct-navigation .sub-menu a {
  color: var(--llc-off-white) !important;
}

.ct-header .sub-menu a:hover,
.ct-navigation .sub-menu a:hover {
  background-color: var(--llc-blue-light) !important;
  color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   5. Hamburger Menu Button & Search Icon — gold to blue
   -------------------------------------------------------------------------- */
.ct-menu-toggle,
.ct-hamburger,
.hamburger-menu,
.menu-toggle,
.mobile-menu-toggle,
.ct-header .ct-menu-toggle,
.navbar-toggle {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border: none !important;
}

.ct-menu-toggle span,
.ct-hamburger span,
.hamburger-menu span {
  background-color: var(--llc-white) !important;
}

.ct-search-icon,
.ct-header-search,
.header-search-toggle,
.ct-header .search-icon,
.search-toggle-btn {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border: none !important;
}

.ct-search-icon:hover,
.ct-header-search:hover,
.ct-menu-toggle:hover {
  background: var(--llc-blue-dark) !important;
  box-shadow: 0 0 12px var(--llc-hover-glow) !important;
}

/* Mobile menu overlay */
.ct-mobile-menu,
.mobile-menu-wrapper,
.off-canvas-menu {
  background-color: var(--llc-blue-dark) !important;
}

.ct-mobile-menu a,
.mobile-menu-wrapper a {
  color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   6. Buttons — gold/amber to blue gradient
   -------------------------------------------------------------------------- */
.ct-button,
.btn,
.button,
.elementor-button,
.elementor-button-link,
input[type="submit"],
.wpcf7-submit,
.ct-btn,
.ct-btn-primary,
.wp-block-button__link,
.mc4wp-form input[type="submit"],
.revolution-slider .tp-button,
.rev-btn,
.tp-caption .btn {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border: none !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px var(--llc-shadow) !important;
}

.ct-button:hover,
.btn:hover,
.button:hover,
.elementor-button:hover,
.elementor-button-link:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover,
.ct-btn:hover,
.ct-btn-primary:hover,
.wp-block-button__link:hover,
.revolution-slider .tp-button:hover,
.rev-btn:hover {
  background: linear-gradient(135deg, #00419e, #012670) !important;
  color: var(--llc-white) !important;
  box-shadow: 0 5px 15px var(--llc-hover-glow) !important;
  transform: translateY(-1px) !important;
}

/* Ghost / outline button variant */
.ct-button-outline,
.btn-outline,
.elementor-button.elementor-button-outline {
  background: transparent !important;
  border: 2px solid var(--llc-blue-dark) !important;
  color: var(--llc-blue-dark) !important;
}

.ct-button-outline:hover,
.btn-outline:hover {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border-color: var(--llc-blue-dark) !important;
}


/* --------------------------------------------------------------------------
   7. Revolution Slider Overrides
   -------------------------------------------------------------------------- */
.revolution-slider .tp-caption a.btn,
.rev_slider .tp-caption a,
.rs-layer .ct-button,
.tp-bullets .tp-bullet,
.tp-tabs .tp-tab {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border: none !important;
}

.tp-bullets .tp-bullet.selected,
.tp-bullets .tp-bullet:hover {
  background-color: var(--llc-blue-light) !important;
}

/* Slider overlay / gradient — leave original theme overlay intact */
/* .rev_slider .tp-caption.tp-shape — intentionally NOT overridden */


/* --------------------------------------------------------------------------
   8. Practice Areas Section — card hover effects
   -------------------------------------------------------------------------- */
.ct-practice-area,
.practice-area-item,
.service-box,
.ct-service-box,
.elementor-widget-ct-practice-area {
  background-color: var(--llc-white) !important;
  border: 1px solid var(--llc-border) !important;
  transition: all 0.4s ease !important;
}

.ct-practice-area:hover,
.practice-area-item:hover,
.service-box:hover,
.ct-service-box:hover {
  border-color: var(--llc-blue-light) !important;
  box-shadow: 0 8px 25px var(--llc-shadow) !important;
  transform: translateY(-5px) !important;
}

/* Practice area icon / accent */
.ct-practice-area .ct-icon,
.ct-practice-area i,
.service-box .ct-icon,
.service-box i,
.ct-practice-area .practice-icon {
  color: var(--llc-blue-dark) !important;
}

/* Practice area accent line / border */
.ct-practice-area::before,
.ct-practice-area::after,
.service-box::before,
.service-box::after,
.ct-practice-area .ct-overlay,
.practice-area-item .overlay-bg {
  background: var(--llc-blue-gradient) !important;
}

.ct-practice-area:hover .ct-icon,
.ct-practice-area:hover i,
.service-box:hover .ct-icon,
.service-box:hover i {
  color: var(--llc-white) !important;
}

/* Practice area hover — keep theme default hover behavior */

/* Practice area "read more" link */
.ct-practice-area .read-more,
.service-box .read-more {
  color: var(--llc-blue-dark) !important;
}

.ct-practice-area:hover .read-more,
.service-box:hover .read-more {
  color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   9. Icon Boxes & Feature Boxes
   -------------------------------------------------------------------------- */
.ct-icon-box,
.icon-box,
.elementor-icon-box-icon,
.elementor-widget-icon-box .elementor-icon {
  color: var(--llc-blue-dark) !important;
  transition: all 0.3s ease !important;
}

.ct-icon-box .ct-icon-box-icon,
.ct-icon-box i,
.icon-box i,
.elementor-icon-box-icon i,
.elementor-icon {
  color: var(--llc-blue-dark) !important;
  border-color: var(--llc-blue-dark) !important;
}

.ct-icon-box:hover .ct-icon-box-icon,
.ct-icon-box:hover i,
.icon-box:hover i {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border-color: var(--llc-blue-light) !important;
}

/* Icon box accent lines */
.ct-icon-box::before,
.ct-icon-box .ct-line,
.icon-box .accent-line {
  background: var(--llc-blue-gradient) !important;
}


/* --------------------------------------------------------------------------
   10. Counter / Stats Section — REMOVED hardcoded colors
   Colors now controlled via Elementor widget Style tab for full editor control
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   11. Testimonial Section
   -------------------------------------------------------------------------- */
.ct-testimonial,
.testimonial-item,
.ct-testimonial-box,
.elementor-widget-ct-testimonial {
  background-color: var(--llc-white) !important;
  border: 1px solid var(--llc-border) !important;
  border-radius: 6px !important;
}

/* Testimonial quote icon */
.ct-testimonial .ct-quote-icon,
.ct-testimonial .quote-icon,
.ct-testimonial::before,
.testimonial-item .quote-mark,
.ct-testimonial i.fa-quote-left {
  color: var(--llc-blue-dark) !important;
  opacity: 0.2 !important;
}

/* Testimonial accent elements */
.ct-testimonial .ct-stars i,
.ct-testimonial .star-rating,
.testimonial-item .rating {
  color: var(--llc-blue-light) !important;
}

/* Testimonial border accent */
.ct-testimonial::after,
.ct-testimonial .accent-bar,
.testimonial-item::before {
  background: var(--llc-blue-gradient) !important;
}

/* Testimonial name */
.ct-testimonial .ct-client-name,
.testimonial-item .client-name {
  color: var(--llc-blue-dark) !important;
}

/* Testimonial designation */
.ct-testimonial .ct-client-designation,
.testimonial-item .client-designation {
  color: var(--llc-text-muted) !important;
}

/* Testimonial slider dots */
.ct-testimonial .owl-dots .owl-dot span,
.ct-testimonial .slick-dots li button,
.testimonial-carousel .owl-dot span {
  background-color: var(--llc-border) !important;
}

.ct-testimonial .owl-dots .owl-dot.active span,
.ct-testimonial .slick-dots li.slick-active button,
.testimonial-carousel .owl-dot.active span {
  background: var(--llc-blue-gradient) !important;
}

/* Testimonial navigation arrows */
.ct-testimonial .owl-nav button,
.ct-testimonial .slick-arrow,
.testimonial-carousel .owl-nav button {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border: none !important;
}


/* --------------------------------------------------------------------------
   12. CTA (Call to Action) Sections — blue gradient background + white text
   -------------------------------------------------------------------------- */
/* CTA sections — keep theme default backgrounds, only change accent colors */
/* Background overrides removed to preserve original LawSight design */


/* --------------------------------------------------------------------------
   13. Timeline / Process Section — dots and lines to blue
   -------------------------------------------------------------------------- */
.ct-timeline,
.timeline,
.ct-process,
.process-steps {
  color: var(--llc-text-body) !important;
}

/* Timeline line / connector */
.ct-timeline .ct-timeline-line,
.ct-timeline::before,
.ct-timeline::after,
.timeline .timeline-line,
.timeline::before,
.ct-process .process-line,
.process-steps .connector {
  background-color: var(--llc-blue-dark) !important;
  border-color: var(--llc-blue-dark) !important;
}

/* Timeline dots / circles */
.ct-timeline .ct-timeline-dot,
.ct-timeline .ct-dot,
.timeline .timeline-dot,
.timeline .dot,
.ct-process .process-dot,
.process-steps .step-dot,
.ct-timeline .ct-timeline-icon {
  background: var(--llc-blue-gradient) !important;
  border-color: var(--llc-blue-dark) !important;
  color: var(--llc-white) !important;
}

/* Timeline step numbers */
.ct-timeline .ct-timeline-number,
.ct-process .step-number,
.process-steps .number {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border: 3px solid var(--llc-off-white) !important;
  box-shadow: 0 0 0 3px var(--llc-blue-dark) !important;
}

/* Timeline content boxes */
.ct-timeline .ct-timeline-content,
.timeline .timeline-content,
.ct-process .process-content {
  border-left: 3px solid var(--llc-blue-dark) !important;
}

.ct-timeline .ct-timeline-content:hover,
.timeline .timeline-content:hover {
  box-shadow: 0 5px 15px var(--llc-shadow) !important;
}


/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer,
#footer,
.site-footer,
.ct-footer,
.ct-footer-main,
footer.ct-footer,
.footer-wrapper {
  background-color: var(--llc-blue-dark) !important;
  color: var(--llc-off-white) !important;
}

.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.ct-footer h1, .ct-footer h2, .ct-footer h3, .ct-footer h4,
.footer .widget-title,
.ct-footer .widget-title {
  color: var(--llc-white) !important;
}

.footer p, .footer li, .footer span,
#footer p, #footer li, #footer span,
.site-footer p, .site-footer li,
.ct-footer p, .ct-footer li {
  color: var(--llc-off-white) !important;
}

.footer a, #footer a, .site-footer a, .ct-footer a {
  color: var(--llc-off-white) !important;
  transition: color 0.3s ease !important;
}

.footer a:hover, #footer a:hover, .site-footer a:hover, .ct-footer a:hover {
  color: var(--llc-white) !important;
}

/* Footer bottom bar / copyright */
.ct-footer-bottom,
.footer-bottom,
.site-footer .footer-bottom,
.copyright-bar {
  background-color: #011b52 !important;
  color: var(--llc-off-white) !important;
  border-top: 1px solid rgba(240, 239, 239, 0.15) !important;
}

/* Footer social icons */
.ct-footer .social-icons a,
.footer .social-icons a,
.site-footer .social-links a {
  background: transparent !important;
  color: var(--llc-off-white) !important;
  border: 1px solid rgba(240, 239, 239, 0.3) !important;
  transition: all 0.3s ease !important;
}

.ct-footer .social-icons a:hover,
.footer .social-icons a:hover,
.site-footer .social-links a:hover {
  background: var(--llc-blue-light) !important;
  color: var(--llc-white) !important;
  border-color: var(--llc-blue-light) !important;
}

/* Footer widget list bullets / borders */
.ct-footer .widget ul li,
.footer .widget ul li {
  border-bottom-color: rgba(240, 239, 239, 0.1) !important;
}


/* --------------------------------------------------------------------------
   15. Page Title / Banner / Breadcrumb Section
   -------------------------------------------------------------------------- */
.ct-page-title,
.ct-breadcrumb-area,
.page-title-section,
.ct-titlebar,
.entry-header.page-header {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
}

.ct-page-title h1,
.ct-breadcrumb-area h1,
.page-title-section h1,
.ct-titlebar h1 {
  color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   16. Accent Lines, Borders, Separators — gold to blue
   -------------------------------------------------------------------------- */
.ct-separator,
.ct-divider,
.separator,
.elementor-divider-separator,
hr.styled {
  background: var(--llc-blue-gradient) !important;
  border-color: var(--llc-blue-dark) !important;
}

/* Section heading underlines */
.ct-section-title::after,
.section-title::after,
.ct-heading::after,
.elementor-widget-heading .elementor-heading-title::after {
  background: var(--llc-blue-gradient) !important;
}

/* Before/after decorative elements */
.ct-section-title::before,
.section-title::before {
  background-color: var(--llc-blue-light) !important;
}


/* --------------------------------------------------------------------------
   17. Sidebar & Widgets
   -------------------------------------------------------------------------- */
.widget .widget-title,
.sidebar .widget-title {
  border-bottom-color: var(--llc-blue-dark) !important;
}

.widget .widget-title::after,
.sidebar .widget-title::after {
  background: var(--llc-blue-gradient) !important;
}

.sidebar .widget ul li a:hover {
  color: var(--llc-blue-light) !important;
}


/* --------------------------------------------------------------------------
   18. Forms & Input Fields
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select,
.wpcf7-form-control {
  border: 1px solid var(--llc-border) !important;
  background-color: var(--llc-white) !important;
  color: var(--llc-text-body) !important;
  transition: border-color 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.wpcf7-form-control:focus {
  border-color: var(--llc-blue-light) !important;
  box-shadow: 0 0 5px var(--llc-hover-glow) !important;
  outline: none !important;
}


/* --------------------------------------------------------------------------
   19. Pagination
   -------------------------------------------------------------------------- */
.pagination a,
.page-numbers,
.nav-links a {
  color: var(--llc-blue-dark) !important;
  border-color: var(--llc-border) !important;
}

.pagination .current,
.page-numbers.current,
.nav-links .current {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border-color: var(--llc-blue-dark) !important;
}

.pagination a:hover,
.page-numbers:hover,
.nav-links a:hover {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   20. Scroll-to-Top Button
   -------------------------------------------------------------------------- */
.ct-back-to-top,
.back-to-top,
#back-to-top,
.scroll-top {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border: none !important;
}

.ct-back-to-top:hover,
.back-to-top:hover,
#back-to-top:hover {
  background: var(--llc-blue-dark) !important;
  box-shadow: 0 4px 12px var(--llc-shadow) !important;
}


/* --------------------------------------------------------------------------
   21. Elementor-Specific Overrides
   -------------------------------------------------------------------------- */

/* Elementor section overlays — only override gold-tinted ones, not all */
/* .elementor-background-overlay — intentionally NOT overridden globally */

/* Elementor icon list bullet color */
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
  color: var(--llc-blue-dark) !important;
  fill: var(--llc-blue-dark) !important;
}

/* Elementor progress bar */
.elementor-progress-bar {
  background: var(--llc-blue-gradient) !important;
}

/* Elementor tabs */
.elementor-tab-title.elementor-active,
.elementor-tab-title:hover {
  color: var(--llc-blue-dark) !important;
  border-bottom-color: var(--llc-blue-dark) !important;
}

/* Elementor accordion */
.elementor-accordion .elementor-tab-title.elementor-active,
.elementor-accordion .elementor-tab-title:hover {
  color: var(--llc-blue-dark) !important;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  color: var(--llc-blue-dark) !important;
}

/* Elementor toggle */
.elementor-toggle .elementor-tab-title.elementor-active {
  color: var(--llc-blue-dark) !important;
}

/* Elementor pricing table */
.elementor-price-table__header {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
}

.elementor-price-table__button {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   22. Team / Attorney Cards
   -------------------------------------------------------------------------- */
.ct-team,
.team-member,
.attorney-card {
  background-color: var(--llc-white) !important;
  transition: all 0.3s ease !important;
}

.ct-team:hover,
.team-member:hover,
.attorney-card:hover {
  box-shadow: 0 8px 25px var(--llc-shadow) !important;
}

.ct-team .ct-social a,
.team-member .social-links a,
.attorney-card .social-links a {
  background-color: var(--llc-blue-dark) !important;
  color: var(--llc-white) !important;
}

.ct-team .ct-social a:hover,
.team-member .social-links a:hover,
.attorney-card .social-links a:hover {
  background-color: var(--llc-blue-light) !important;
}


/* --------------------------------------------------------------------------
   23. Blog / Post Cards
   -------------------------------------------------------------------------- */
.ct-blog-item .ct-blog-category a,
.blog-post .category-tag,
.post-category a {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
}

.ct-blog-item .ct-blog-date,
.blog-post .post-date {
  color: var(--llc-blue-dark) !important;
}

.ct-blog-item .ct-read-more,
.blog-post .read-more {
  color: var(--llc-blue-dark) !important;
}

.ct-blog-item .ct-read-more:hover,
.blog-post .read-more:hover {
  color: var(--llc-blue-light) !important;
}


/* --------------------------------------------------------------------------
   24. Preloader / Loading Animation (if gold-themed)
   -------------------------------------------------------------------------- */
/* Preloader — keep theme default */


/* --------------------------------------------------------------------------
   25. Selection / Highlight Color
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--llc-blue-dark) !important;
  color: var(--llc-white) !important;
}

::-moz-selection {
  background-color: var(--llc-blue-dark) !important;
  color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   26. WooCommerce Overrides (if shop page exists)
   -------------------------------------------------------------------------- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
  border: none !important;
}

.woocommerce .button:hover,
.woocommerce a.button:hover {
  background: linear-gradient(135deg, #00419e, #012670) !important;
}

.woocommerce .price,
.woocommerce .amount {
  color: var(--llc-blue-dark) !important;
}

.woocommerce .onsale {
  background: var(--llc-blue-gradient) !important;
  color: var(--llc-white) !important;
}


/* --------------------------------------------------------------------------
   27. Dark Section Variants (sections with dark background)
   -------------------------------------------------------------------------- */
/* Dark sections — leave original theme dark backgrounds intact */
/* Only override if they were gold-specific, not general dark sections */


/* --------------------------------------------------------------------------
   28. Miscellaneous Gold-to-Blue Catch-All
   -------------------------------------------------------------------------- */

/* Any inline gold color applied by theme */
[style*="c9a84c"],
[style*="C9A84C"],
[style*="daa520"],
[style*="DAA520"],
[style*="b8860b"],
[style*="B8860B"] {
  color: var(--llc-blue-dark) !important;
}

/* Any gold background applied inline */
[style*="background-color: #c9a84c"],
[style*="background-color: #C9A84C"],
[style*="background: #c9a84c"],
[style*="background: #C9A84C"],
[style*="background-color:#c9a84c"],
[style*="background-color:#C9A84C"] {
  background: var(--llc-blue-gradient) !important;
}

/* Any gold border applied inline */
[style*="border-color: #c9a84c"],
[style*="border-color:#c9a84c"],
[style*="border-color: #C9A84C"] {
  border-color: var(--llc-blue-dark) !important;
}

/* ==========================================================================
   17. Here to Help gradient text — force blue
   ========================================================================== */
.pxl-heading .highlight-text-gradient .pxl-title--highlight {
  background-image: linear-gradient(90deg, #012670, #00419e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal !important;
}

/* ==========================================================================
   18. Video play button gradient
   ========================================================================== */
.pxl-btn-video.style2 {
  background-image: linear-gradient(to left, #012670, #00419e) !important;
}

/* ==========================================================================
   19. Process timeline dots
   ========================================================================== */
.pxl-process1::before {
  background-color: #e1e1e1 !important;
  box-shadow: 0 0 5px rgba(114, 114, 114, .42) inset !important;
}
.pxl-process1::after {
  background: linear-gradient(to left, #012670, #00419e) !important;
  box-shadow: 0 4px 10px rgba(182, 221, 192, .7) !important;
}

/* ==========================================================================
   20. Here to Help gradient text - override hardcoded gold #9b6f45
   ========================================================================== */
.pxl-heading h3.pxl-item--title .pxl-heading--text cite {
  background-image: linear-gradient(to right, #012670, #caf9d6, #00419e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 21. Video player - force visibility (WOW.js not triggering animated class) */
.elementor-element-68186c8 .pxl-video-player.wow {
  visibility: visible !important;
}

/* ==========================================================================
   22. Testimonial dots — gradient override (white→blue to blue→blue)
   ========================================================================== */
.pxl-swiper-dots.style-1 .pxl-swiper-pagination-bullet::before,
.pxl-swiper-dots.style-1 .pxl-swiper-pagination-bullet::after {
  background-image: linear-gradient(to left, #012670, #00419e) !important;
}

/* ==========================================================================
   23. Team hover overlay gradient (white→blue to blue→blue)
   ========================================================================== */
.pxl-team-layout2 .team-info {
  background-image: linear-gradient(to left, #012670, #00419e) !important;
}

/* ==========================================================================
   24. Contact form icons — force blue color
   ========================================================================== */
.pxl-link .pxl-icon i,
.pxl-link .pxl-icon svg {
  color: #00419e !important;
  fill: #00419e !important;
}

/* Contact icon gradient override */
.pxl-link .pxl-link--icon {
  color: #00419e !important;
}
.pxl-link .pxl-link--icon i {
  background-image: none !important;
  -webkit-text-fill-color: #00419e !important;
  color: #00419e !important;
}

/* ==========================================================================
   25. Heading section gradient lines (subtitle underlines)
   ========================================================================== */
.pxl-heading .pxl-heading--subheading::before,
.pxl-heading .pxl-heading--subheading::after {
  background-image: linear-gradient(to right, #012670, #00419e) !important;
  background-color: #00419e !important;
}

/* ==========================================================================
   26. Video player — force thumbnail and play button visible
   ========================================================================== */
.elementor-element-68186c8 .pxl-video-player {
  visibility: visible !important;
  opacity: 1 !important;
}
.elementor-element-68186c8 .pxl-video-player .pxl-item--image img {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}
.elementor-element-68186c8 .pxl-video-player .pxl-item--overlay {
  display: none !important;
}

/* ==========================================================================
   27. Testimonial vertical stripe — 3-color gradient
   ========================================================================== */
.pxl-testimonial-carousel .pxl-item--inner::before {
  background-image: linear-gradient(to bottom, #012670, #caf9d6, #00419e) !important;
}

/* ==========================================================================
   28. Footer link icons — force white
   ========================================================================== */
.pxl-footer .pxl-link .pxl-link--icon i,
.elementor-element-4556 .pxl-link .pxl-link--icon i {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background-image: none !important;
}


/* ==========================================================================
   29. About Us — Stat Counter Cards
   Blue gradient (#012670 → #00419e) for cards 1 & 3
   Black for cards 2 & 4
   Golden glow edges, #f0f4ff subtle light
   ========================================================================== */

/* Blue gradient cards (Cases Resolved, States Licensed) */
.elementor-element-d8d5dd4 > .elementor-widget-container,
.elementor-element-359386d > .elementor-widget-container {
  background: linear-gradient(135deg, #012670, #00419e) !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow:
    0 4px 24px rgba(1, 38, 112, 0.25),
    inset 0 1px 0 rgba(240, 244, 255, 0.15) !important;
}

/* Black cards (Happy Clients, Team Members) */
.elementor-element-5fb1454 > .elementor-widget-container,
.elementor-element-90904a1 > .elementor-widget-container {
  background: #0a0a0a !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(240, 244, 255, 0.08) !important;
}

/* Card padding */
.elementor-element-d8d5dd4 .pxl-counter,
.elementor-element-5fb1454 .pxl-counter,
.elementor-element-359386d .pxl-counter,
.elementor-element-90904a1 .pxl-counter {
  padding: 32px 24px !important;
}

/* Hover: intensify golden glow + lift */
.elementor-element-d8d5dd4 > .elementor-widget-container:hover,
.elementor-element-5fb1454 > .elementor-widget-container:hover,
.elementor-element-359386d > .elementor-widget-container:hover,
.elementor-element-90904a1 > .elementor-widget-container:hover {
  border: none !important;
  box-shadow:
    0 8px 32px rgba(1, 38, 112, 0.3),
    inset 0 1px 0 rgba(240, 244, 255, 0.2) !important;
  transform: translateY(-3px);
}

/* Smooth transitions */
.elementor-element-d8d5dd4 > .elementor-widget-container,
.elementor-element-5fb1454 > .elementor-widget-container,
.elementor-element-359386d > .elementor-widget-container,
.elementor-element-90904a1 > .elementor-widget-container {
  transition: all 0.3s ease;
}

/* Override Elementor inner counter backgrounds */
.elementor-element-d8d5dd4 .pxl-counter,
.elementor-element-359386d .pxl-counter {
  background: transparent !important;
  background-image: none !important;
}

.elementor-element-5fb1454 .pxl-counter,
.elementor-element-90904a1 .pxl-counter {
  background: transparent !important;
  background-image: none !important;
}

/* Remove white space under stat counter cards */
.elementor-element-fe6e2f7 {
  padding-bottom: 0px !important;
}
.elementor-element-4f49ec5 {
  padding-top: 20px !important;
}

/* Kill Elementor golden box-shadow on inner counter */
.elementor-element-d8d5dd4 .pxl-counter,
.elementor-element-5fb1454 .pxl-counter,
.elementor-element-359386d .pxl-counter,
.elementor-element-90904a1 .pxl-counter {
  box-shadow: none !important;
}

/* ==========================================================================
   30. Sticky Header — Fix logo column width on widescreen
   ========================================================================== */
@media (min-width: 1920px) {
  .elementor-4123 .elementor-element.elementor-element-7fa5c54 {
    width: 33.333% !important;
  }
}

/* ==========================================================================
   31. Blog — Gold underlines and glow → Blue gradient
   Widget title underlines, blog meta accent lines
   ========================================================================== */

/* Sidebar widget title underline (::before) — gold gradient → blue gradient */
.widget .widget-title::before,
.pxl-widget-title::before {
  background-color: #012670 !important;
  background-image: linear-gradient(to right, #012670, #00419e) !important;
  box-shadow: 0 4px 8px rgba(1, 38, 112, 0.3) !important;
}

/* Sidebar widget title underline (::after if exists) */
.widget .widget-title::after {
  background-color: #00419e !important;
  background-image: linear-gradient(to right, #012670, #00419e) !important;
  box-shadow: none !important;
}

/* Blog post meta accent line */
.pxl-blog-meta .pxl-blog-meta-inner {
  border-bottom-color: #e0e4ef !important;
}

/* Blog post meta accent line ::after (if theme adds colored accent) */
.pxl-blog-meta .pxl-blog-meta-inner::after {
  background-color: #012670 !important;
  background-image: linear-gradient(to right, #012670, #00419e) !important;
  box-shadow: none !important;
}

/* Any remaining gold accent lines site-wide */
.pxl-heading .pxl-heading--subheading::before,
.pxl-heading .pxl-heading--subheading::after,
.comment-reply-title::before,
.comments-title::before {
  background-color: #012670 !important;
  background-image: linear-gradient(to right, #012670, #00419e) !important;
  box-shadow: 0 4px 8px rgba(1, 38, 112, 0.3) !important;
}

/* ==========================================================================
   32. Blog fixes — post date underline, pagination, archives, comments
   ========================================================================== */

/* Post date gold gradient underline → blue gradient */
.pxl-blog-meta .pxl-blog-meta-inner::before {
  background-image: linear-gradient(to right, #012670, #00419e) !important;
  background-color: #012670 !important;
  box-shadow: none !important;
}

/* Hide archives widget from blog sidebar */
#archives-2,
.widget_archive {
  display: none !important;
}

/* Pagination — remove golden glow, use blue */
.page-numbers {
  box-shadow: none !important;
}
.page-numbers.current {
  background: linear-gradient(135deg, #012670, #00419e) !important;
  color: #fff !important;
  border-color: #012670 !important;
  box-shadow: none !important;
}
.page-numbers:not(.current):hover {
  color: #012670 !important;
  border-color: #012670 !important;
  box-shadow: none !important;
}

/* Remove login requirement for comments — allow anonymous comments */
.must-log-in {
  display: none !important;
}
.comment-respond .comment-form {
  display: flex !important;
  flex-wrap: wrap;
}

/* ==========================================================================
   33. Blog — Post title hover color, hide gallery & tag widgets
   ========================================================================== */

/* Post title hover → blue instead of white */
.pxl-item--archive .pxl-item--holder h2 a:hover,
.pxl-item--archive .pxl-item--title a:hover,
.pxl---post .pxl-item--holder h2 a:hover,
article .entry-title a:hover {
  color: #00419e !important;
}

/* Hide media gallery widget (images under archives) from blog sidebar */
#media_gallery-3,
.widget_media_gallery {
  display: none !important;
}

/* Hide tag cloud widget from blog sidebar */
#tag_cloud-4,
#tag_cloud-5 {
  display: none !important;
}

/* Hide nav menu widget from blog sidebar */
#nav_menu-3,
#nav_menu-4 {
  display: none !important;
}

/* Hide gallery and archives in single post sidebar too */
.single-post .widget_media_gallery,
.single-post .widget_archive,
.single-post .widget_tag_cloud,
.single-post .widget_nav_menu {
  display: none !important;
}

/* ==========================================================================
   34. Comment submit button — show icon, blue gradient
   ========================================================================== */

/* Show the arrow icon (override theme display:none + absolute positioning) */
.single-post .comment-form .form-submit .btn.btn-text-parallax .pxl--btn-icon,
.comment-form .form-submit .btn.btn-icon-box .pxl--btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50%;
  padding: 8px;
  margin-left: 10px;
  right: auto !important;
  top: auto !important;
}

.single-post .comment-form .form-submit .btn .pxl--btn-icon i,
.comment-form .form-submit .btn.btn-icon-box .pxl--btn-icon i {
  color: #fff !important;
  font-size: 13px;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  -webkit-text-fill-color: #fff !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
}

/* Blue gradient button instead of gold */
.comment-form .form-submit .btn.btn-text-parallax {
  background: linear-gradient(135deg, #012670, #00419e) !important;
  background-image: linear-gradient(135deg, #012670, #00419e) !important;
  box-shadow: 0 4px 12px rgba(1, 38, 112, 0.3) !important;
  padding-right: 22px !important;
  position: relative;
}

.comment-form .form-submit .btn.btn-text-parallax:hover {
  background: linear-gradient(135deg, #00419e, #012670) !important;
  box-shadow: 0 6px 16px rgba(1, 38, 112, 0.4) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   35. Single post — sidebar on right, fix content width
   ========================================================================== */

/* Force proper column widths so sidebar sits on right */
@media (min-width: 992px) {
  .single-post .pxl-content-post.col-lg-8 {
    flex: 0 0 66.667% !important;
    max-width: 66.667% !important;
  }
  .single-post .pxl-sidebar-post.col-lg-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

/* ==========================================================================
   27. Navigation menu — force UPPERCASE for all languages
   ========================================================================== */
.pxl-menu-primary li a .pxl-menu-item-text,
.ct-header .menu li a,
.ct-header-sticky .menu li a,
.llc-lang-current,
.llc-lang-submenu li a {
  text-transform: uppercase !important;
}

/* ==========================================================================

/* ==========================================================================
   33. Language switcher — keep on same row as nav items
   The pxl_menu widget has a fixed max-width that can't fit 5 items.
   Force the language item to stay inline with nowrap.
   ========================================================================== */
.pxl-menu-primary {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.pxl-menu-primary > li.llc-lang-dropdown {
  flex-shrink: 0;
  white-space: nowrap;
}
.pxl-menu-primary > li.llc-lang-dropdown > a {
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 13px;
}


/* ==========================================================================
   34. Override --primary-color on ALL VI/ZH pages to match EN (#ffffff)
   Root cause: theme sets --primary-color to gold (#d5aa6d) for non-front-page.
   EN homepage is front page → white. VI/ZH are not → gold.
   This affects underlines, link colors, accent elements site-wide.
   Fix: Override the CSS variable on all translated page body elements.
   ========================================================================== */
body.page-id-5568,
body.page-id-5569,
body.page-id-5570,
body.page-id-5571,
body.page-id-5572,
body.page-id-5573,
body.page-id-5574,
body.page-id-5575,
body.page-id-5576,
body.page-id-5577,
body.page-id-5578,
body.page-id-5579,
body.page-id-5580,
body.page-id-5581 {
  --primary-color: #ffffff !important;
  --primary-color-rgb: 255,255,255 !important;
}

/* ==========================================================================
   35. Override <cite> font — Poppins italic instead of Playfair Display
   ========================================================================== */
.pxl-heading--text cite,
.ct-heading--text cite,
h1 cite, h2 cite, h3 cite, h4 cite, h5 cite, h6 cite {
  font-family: 'Poppins', sans-serif !important;
  font-style: italic;
}

/* ==========================================================================

/* ==========================================================================
   36. About Us — Fix distorted photo (maintain aspect ratio)
   The pxl_banner_box widget stretches img with object-fit:fill to 550px height.
   Fix: use cover to crop instead of stretch, and auto height to preserve ratio.
   ========================================================================== */
.elementor-widget-pxl_banner_box .pxl-main--image img {
  object-fit: cover !important;
  object-position: center top !important;
  height: auto !important;
}


/* ==========================================================================
   37. Team Carousel — Display portrait photos with proper aspect ratio
   Widget now loads 530x710 portrait images (was 350x350 square crop).
   This CSS lets the portrait image display fully without head crop.
   ========================================================================== */

/* Make team image container portrait aspect ratio (3:4) */
.elementor-widget-pxl_team_carousel .pxl-team .pxl-item--image,
.elementor-widget-pxl_team_carousel .pxl-team-item .pxl-item--image,
.pxl-team-carousel2 .pxl-item--image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* Image fills container, top-aligned to keep face visible */
.elementor-widget-pxl_team_carousel .pxl-team img,
.elementor-widget-pxl_team_carousel .pxl-team-item img,
.pxl-team-carousel2 img,
.pxl-team .pxl-item--image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* Equalize card content area — name + position consistent height */
.elementor-widget-pxl_team_carousel .pxl-team .pxl-item--content,
.elementor-widget-pxl_team_carousel .pxl-team-item .pxl-item--content,
.pxl-team .pxl-item--info {
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Lock name to single line with ellipsis */
.elementor-widget-pxl_team_carousel .pxl-item--title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

/* Lock position to two lines max */
.elementor-widget-pxl_team_carousel .pxl-item--position {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}



/* ==========================================================================
   38. Team Photos — FREE-CROP MODE (calibrator-generated 2026-05-10 ICT)
   Image fits container width; transform repositions/zooms inside the 5:6 frame.
   Generated by team-calibrator.html — do not hand-edit; re-run calibrator.
   ========================================================================== */

/* Higher-specificity base rule to override the cover-fit rule defined earlier in this file (section 37). */
.elementor-widget-pxl_team_carousel .pxl-team img,
.elementor-widget-pxl_team_carousel .pxl-team-item img,
.elementor-widget-pxl_team_carousel .pxl-team .pxl-item--image img,
.pxl-team-carousel2 .pxl-item--image img,
.pxl-team-carousel2 img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
  object-position: 0 0 !important;
  transform-origin: center top !important;
}

.elementor-widget-pxl_team_carousel .pxl-team .pxl-item--image,
.elementor-widget-pxl_team_carousel .pxl-team-item .pxl-item--image,
.pxl-team-carousel2 .pxl-item--image {
  aspect-ratio: 5 / 6 !important;
  overflow: hidden !important;
  background-color: #2a2f36 !important;
  position: relative !important;
}

/* === Lorenda Stern (REFERENCE) === */
.elementor-widget-pxl_team_carousel img[src*="2026/04/lorenda-2-"] {
  transform: none !important;
}

/* === Silken Huang === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/silken-huang-firefly"] {
  transform: scale(1.12) translate(-3px, -19px) !important;
}

/* === RJ Trinidad === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/rj-trinidad-firefly"] {
  transform: scale(1.42) translate(3px, -47px) !important;
}

/* === Crystal Garcia === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/crystal-garcia-firefly"] {
  transform: scale(1.02) translate(2px, -37px) !important;
}

/* === Jacky Ha === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/jacky-ha-firefly"] {
  transform: scale(1.12) translate(6px, -7px) !important;
}

/* === Kate Lee === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/kate-lee-firefly"] {
  transform: scale(1.12) translate(0px, -9px) !important;
}

/* === Yen Tu === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/yen-tu-firefly"] {
  transform: scale(1.12) translate(9px, -28px) !important;
}

/* === Tyler Hoang === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/tyler-hoang-firefly"] {
  transform: scale(1.08) translate(-1px, -7px) !important;
}

/* === Tuan Pham === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/tuan-pham-firefly"] {
  transform: scale(1.06) translate(0px, -7px) !important;
}

/* === Anna Khong === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/anna-khong-firefly"] {
  transform: scale(1.08) translate(6px, -14px) !important;
}

/* === Minh Van === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/minh-van-firefly"] {
  transform: scale(1.10) translate(10px, -35px) !important;
}

/* === Iris Chan === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/iris-chan-firefly"] {
  transform: scale(1.26) translate(11px, -16px) !important;
}

/* === Owen Nguyen === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/12b-"] {
  transform: scale(1.12) translate(-4px, -39px) !important;
}

/* === Henry Luu === */
.elementor-widget-pxl_team_carousel img[src*="2026/05/13b-"] {
  transform: scale(1.02) translate(2px, -21px) !important;
}

/* ==========================================================================
   39. Logo size — main + sticky header → 120px (works on EN/VI/ZH)
   ========================================================================== */
.elementor-element-c86dd29 .pxl-logo img,
.elementor-element-5088ca2 .pxl-logo img,
.pxl-header-elementor-main .pxl-logo img,
.pxl-logo--dark img,
.pxl-logo--light img,
header .pxl-logo img {
  max-height: 120px !important;
}

/* Team carousel nav (revised 2026-05-11 11:45 ICT) */
/* Owen 2026-05-05 ICT: hide arrows+dots. Owen 2026-05-11 ICT: show arrows again, keep dots hidden. */
.pxl-team-carousel2 .pxl-swiper-dots,
.pxl-team-carousel2 .swiper-pagination {
    display: none !important;
}

/* Position arrows at viewport edges, white minimalist chevron */
.pxl-team-carousel2 {
    position: relative;
}
.pxl-team-carousel2 .pxl-carousel-inner {
    overflow: visible !important;
}
.pxl-team-carousel2 .pxl-swiper-arrow-wrap.style-1,
.pxl-team-carousel2 .pxl-swiper-arrow-wrap {
    position: absolute;
    top: 50%;
    left: -80px;
    right: -80px;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}
.pxl-team-carousel2 .pxl-swiper-arrow-wrap .pxl-swiper-arrow,
.pxl-team-carousel2 .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow {
    pointer-events: auto;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 56px;
    line-height: 1;
    margin: 0;
    padding: 6px 10px;
    opacity: 0.95;
    transition: opacity 200ms ease, transform 200ms ease;
    cursor: pointer;
}
.pxl-team-carousel2 .pxl-swiper-arrow-wrap .pxl-swiper-arrow:hover,
.pxl-team-carousel2 .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow:hover {
    color: #ffffff !important;
    border: 0 !important;
    opacity: 1;
    transform: scale(1.08);
}
.pxl-team-carousel2 .pxl-swiper-arrow-prev { margin-left: 0; }
.pxl-team-carousel2 .pxl-swiper-arrow-next { margin-right: 0; }
@media (max-width: 1199px) {
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap.style-1,
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap { left: -50px; right: -50px; }
}
@media (max-width: 991px) {
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap.style-1,
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap { left: -20px; right: -20px; }
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap .pxl-swiper-arrow,
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow { font-size: 40px; padding: 4px 6px; }
}
@media (max-width: 575px) {
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap.style-1,
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap { left: 0; right: 0; }
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap .pxl-swiper-arrow,
    .pxl-team-carousel2 .pxl-swiper-arrow-wrap.style-1 .pxl-swiper-arrow { font-size: 32px; padding: 2px 4px; }
}

/* ==========================================================================
   40. Slider Revolution placeholder (added 2026-05-15 ICT)
   Show hero banner image as CSS bg before sr7.js (552 KB async) initializes.
   Without this: user sees blank for 1-2s until RevSlider injects <img>.
   With this:    banner image renders as soon as CSS parses (preload already fetched).
   Applies global (EN, VI, ZH all share same banner via slider alias slider-2).
   ========================================================================== */
.elementor-widget-slider_revolution {
    background-image: url('/wp-content/uploads/2026/05/AdobeStock_283215351-scaled.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1B3A5C;
}
/* Once RevSlider's own canvas is ready it sits absolute on top — bg becomes irrelevant
   but stays as a safety net during slide transitions. */
/* ==========================================================================
   41. Team carousel: always color, no dark overlay (added 2026-05-19 ICT)
   Owen wants team photos to render in full color from page load with no dark
   slate background layer at any state. Removes default grayscale + dark bg
   plus hover transition. Scope: all .pxl-team-carousel2 widgets sitewide.
   ========================================================================== */
.elementor-widget-pxl_team_carousel .pxl-team .pxl-item--image,
.elementor-widget-pxl_team_carousel .pxl-team-item .pxl-item--image,
.pxl-team-carousel2 .pxl-item--image,
.elementor-widget-pxl_team_carousel .pxl-team .pxl-item:hover .pxl-item--image,
.pxl-team-carousel2 .pxl-item:hover .pxl-item--image {
    background-color: transparent !important;
}
.elementor-widget-pxl_team_carousel .pxl-team .pxl-item--image img,
.elementor-widget-pxl_team_carousel .pxl-team-item .pxl-item--image img,
.pxl-team-carousel2 .pxl-item--image img,
.elementor-widget-pxl_team_carousel .pxl-team .pxl-item:hover .pxl-item--image img,
.pxl-team-carousel2 .pxl-item:hover .pxl-item--image img {
    filter: none !important;
    opacity: 1 !important;
}

/* ==========================================================================
   42. Contact page address: preserve newline in iconbox link text (added 2026-05-19 ICT)
   English Line / Chinese Line / Vietnamese Line iconbox text fields contain a
   real newline between street and city — render on 2 lines instead of
   collapsing to one. Safe sitewide: text without newlines is unaffected.
   ========================================================================== */
.pxl-link .pxl-link--text {
    white-space: pre-line;
}

/* ==========================================================================
   43. Privacy policy page typography (added 2026-05-19 ICT)
   Scoped to .page-id-3. After conversion to Elementor, the pxl_heading section
   title (H3 28px) was visually smaller than the text-editor sub-heading H3
   (default 32px). Restore correct hierarchy: section title bigger + sub-heading
   smaller, with proper top margin between sub-sections.
   ========================================================================== */
.page-id-3 .pxl-heading--text { font-size: 32px !important; font-weight: 700 !important; }
.page-id-3 .elementor-widget-text-editor h2 { font-size: 24px !important; font-weight: 700 !important; margin-top: 1.4em !important; margin-bottom: 0.6em !important; }
.page-id-3 .elementor-widget-text-editor h3 { font-size: 20px !important; font-weight: 600 !important; margin-top: 1.3em !important; margin-bottom: 0.5em !important; }
.page-id-3 .elementor-widget-text-editor p { margin-bottom: 1em; line-height: 1.6; }
.page-id-3 .elementor-widget-text-editor ul,
.page-id-3 .elementor-widget-text-editor ol { margin: 0.6em 0 1em 1.4em; }