/* ==========================================================================
   theme.css — Light / Night mode + glass surfaces
   Loaded after the page styles. Switched with <html data-theme="light|dark">
   (see theme.js). Glass surfaces use --pg-glass-alpha (78% opacity).
   To retune the glass: change --pg-glass-alpha below.
   ========================================================================== */

:root {
  --pg-glass-alpha: .78;                       /* glass opacity (78%) */
  --pg-glass-blur: blur(16px) saturate(160%);

  --pg-bg: #f8faff;
  --pg-text: #14213d;
  --pg-muted: #56627f;
  --pg-heading: #0623b1;
  --pg-accent: #0623b1;
  --pg-glass: rgba(255, 255, 255, var(--pg-glass-alpha));
  --pg-surface: rgba(255, 255, 255, var(--pg-glass-alpha));
  --pg-surface-2: rgba(238, 243, 255, var(--pg-glass-alpha));
  --pg-glass-border: rgba(6, 35, 177, .13);
  --pg-input: rgba(255, 255, 255, .7);
  --pg-input-border: rgba(6, 35, 177, .18);
  --pg-input-focus: #ffffff;
  --pg-shadow: 0 10px 30px rgba(4, 38, 100, .10);
  color-scheme: light;
}

html[data-theme="dark"] {
  --pg-bg: #070c1f;
  --pg-alt: rgba(9, 15, 36, .92);
  --pg-text: #e8ecff;
  --pg-muted: #a9b5dc;
  --pg-heading: #8fb0ff;
  --pg-accent: #7f9dff;
  --pg-glass: rgba(17, 26, 56, var(--pg-glass-alpha));
  --pg-surface: rgba(20, 30, 64, var(--pg-glass-alpha));
  --pg-surface-2: rgba(32, 46, 94, var(--pg-glass-alpha));
  --pg-glass-border: rgba(255, 255, 255, .14);
  --pg-input: rgba(255, 255, 255, .07);
  --pg-input-border: rgba(255, 255, 255, .22);
  --pg-input-focus: rgba(255, 255, 255, .12);
  --pg-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---------- page background + soft ambient light (what the glass blurs) ---------- */
html { background-color: var(--pg-bg); }
body { background-color: transparent !important; }
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 10% 6%, rgba(47, 107, 255, .11), transparent 62%),
    radial-gradient(45% 40% at 90% 18%, rgba(0, 200, 255, .09), transparent 62%),
    radial-gradient(55% 45% at 72% 96%, rgba(124, 84, 255, .07), transparent 62%);
}
html[data-theme="dark"]::before {
  background:
    radial-gradient(55% 45% at 10% 6%, rgba(47, 107, 255, .30), transparent 62%),
    radial-gradient(45% 40% at 90% 18%, rgba(0, 200, 255, .17), transparent 62%),
    radial-gradient(55% 45% at 72% 96%, rgba(124, 84, 255, .22), transparent 62%);
}
html.pg-theme-anim, html.pg-theme-anim *, html.pg-theme-anim *::before, html.pg-theme-anim *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important;
}

/* ==========================================================================
   GLASS (both themes): navigation, dropdowns, cards, popups
   ========================================================================== */
nav.navbar.bootsnav,
nav.navbar.bootsnav.no-background,
.sticky-wrapper.is-sticky nav.navbar.bootsnav,
nav.navbar.bootsnav .dropdown-menu,
.dropdown-menu.dropdown-menu-card,
.search-dropdown {
  background: var(--pg-glass) !important;
  -webkit-backdrop-filter: var(--pg-glass-blur);
  backdrop-filter: var(--pg-glass-blur);
  box-shadow: 0 1px 0 var(--pg-glass-border), var(--pg-shadow);
}

:is(.IBS-card, .ETCD-card, .ETCD-card1, .ETCD-project-card, .preproduct-container, .preclient-stories-card,
    .team-card, .About-card, .why-choose-card, .value-card, .policy-card, .blog-card, .job-card,
    .project-card, .case-study-card, .feature-item, .stat-item, .resources-tile, .dropdown-card-main,
    .dropdowns-item, .cookie-consent, .dialog-box, .privacy-notice-container, .notification-banner,
    .newsletter-form, .contact-form, .ETCD-header-content,
    .ETCD-header-content1, .services-content, .products-item) {
  background: var(--pg-surface) !important;
  -webkit-backdrop-filter: var(--pg-glass-blur);
  backdrop-filter: var(--pg-glass-blur);
  box-shadow: inset 0 0 0 1px var(--pg-glass-border), var(--pg-shadow);
}
/* filter / pagination / category buttons: glass only when not selected (the selected state keeps its brand colour) */
:is(.filter-btn, .page-link, .careers-category):not(.active):not(:hover) {
  background: var(--pg-surface) !important;
  -webkit-backdrop-filter: var(--pg-glass-blur);
  backdrop-filter: var(--pg-glass-blur);
}
/* keep the sliding product cards cheap: colour only, no blur on the 3D slider items */
.productitem { background: var(--pg-surface) !important; box-shadow: inset 0 0 0 1px var(--pg-glass-border), var(--pg-shadow); }

/* logos and product art are drawn for light backgrounds: keep their tiles light in both themes */
.certification-item, .partner-item, .productimage-box, .preproduct-image, .carousel-nav {
  background: rgba(255, 255, 255, .92) !important;
}

/* ==========================================================================
   NIGHT MODE
   ========================================================================== */
html[data-theme="dark"] body { color: var(--pg-text); }
html[data-theme="dark"] .loader { background: var(--pg-bg) !important; }
html[data-theme="dark"] body:not(.loaded) { background: var(--pg-bg) !important; }

/* page sections */
html[data-theme="dark"] :is(.IBS-section, .ETCD-what-we-do, .ETCD-what-we-do1, .ETCD-key-projects, .ETCD-description,
    .teamscontent-section, .content-section, .team-section, .servicescontent-section, .servicescontent2-section,
    .contact-section, .blog-section, .jobs-section, #jobs-container, .gallery-section, .education, .contact,
    .about-content, .about-section, .teamsslide, .breadcrumb, #footers-copyright, #footer-copyright) {
  background: var(--pg-alt) !important;
}
html[data-theme="dark"] :is(.ETCD-what-we-do2, .ETCD-sectors) { background: #0d1745 !important; }
html[data-theme="dark"] .custom-footer { background-color: #060b1d !important; }

/* light gradient containers */
html[data-theme="dark"] :is(.slider-container, .productslider-container, .resources-main, .projects-showcase,
    .products-section, .ETCD-header-content-section, .ETCD-header-content-section1) {
  background: linear-gradient(135deg, #0a1030 0%, #101a48 100%) !important;
}

/* small grey chips / rows */
html[data-theme="dark"] :is(.progress, .job-modal .job-meta, .job-meta span, .job-type, .job-card-header, .privacy-more, .notification-close,
    .search-header, .file-upload-preview, .comment, .about-tab, .filter-btn:hover, .page-link:hover) {
  background: var(--pg-surface-2) !important;
}


/* navigation */
html[data-theme="dark"] nav.navbar.bootsnav ul.nav > li > a,
html[data-theme="dark"] nav.navbar.bootsnav .navbar-nav > li > a { color: var(--pg-text) !important; }
html[data-theme="dark"] nav.navbar.bootsnav ul.nav > li > a:hover,
html[data-theme="dark"] nav.navbar.bootsnav ul.nav > li.active > a,
html[data-theme="dark"] nav.navbar.bootsnav ul.nav > li > a:focus { color: var(--pg-heading) !important; }
html[data-theme="dark"] .dropdown-menu-columns ul li a,
html[data-theme="dark"] .card-title { color: var(--pg-text) !important; }
html[data-theme="dark"] .dropdown-menu-columns ul li a:hover { color: var(--pg-heading) !important; }
html[data-theme="dark"] .card-description { color: var(--pg-muted) !important; }
html[data-theme="dark"] .navbar-toggle { background: var(--pg-surface-2) !important; border-color: var(--pg-glass-border) !important; }
html[data-theme="dark"] .navbar-toggle .fa { color: var(--pg-text) !important; }
html[data-theme="dark"] .navbar-collapse { background: transparent; }

/* forms */
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select, .form-control) {
  background-color: var(--pg-input) !important;
  color: var(--pg-text) !important;
  border-color: var(--pg-input-border) !important;
}
html[data-theme="dark"] ::placeholder { color: var(--pg-muted) !important; opacity: .75; }
html[data-theme="dark"] select option { background: #141d40; color: #e8ecff; }

/* tables / misc */
html[data-theme="dark"] :is(table, th, td) { border-color: var(--pg-glass-border) !important; }
html[data-theme="dark"] hr { border-color: var(--pg-glass-border); }
html[data-theme="dark"] .modal-content { background: var(--pg-glass) !important; color: var(--pg-text); }
html[data-theme="dark"] .close { color: var(--pg-text); text-shadow: none; }

/* default text (tag-level, zero specificity so class colours such as button text still win) */
:where(html[data-theme="dark"]) :is(p, li, span, td, th, label, small, dd, dt, blockquote) { color: var(--pg-text); }
:where(html[data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6) { color: var(--pg-heading); }
:where(html[data-theme="dark"]) a { color: var(--pg-heading); }

/* ---- generated from a scan of the site stylesheets: dark text colours -> readable night colours ---- */
html[data-theme="dark"] .IBS-hero h1 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .IBS-section h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .IBS-section strong { color: var(--pg-heading) !important; }
html[data-theme="dark"] .IBS-card h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .item h1 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-header-content1 h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-header-content1 p { color: var(--pg-text) !important; }
html[data-theme="dark"] .ETCD-header-content h1 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-subheader-left2 h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-subheader-left2 h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-subheader-left2 p { color: var(--pg-text) !important; }
html[data-theme="dark"] .ETCD-subheader-left h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-subheader-left h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-subheader-left strong { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-subheader-left p { color: var(--pg-text) !important; }
html[data-theme="dark"] .ETCD-card-content h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-card-content p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .ETCD-subheader-right h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-subheader-right p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .ETCD-bullet-points p { color: var(--pg-text) !important; }
html[data-theme="dark"] .ETCD-bullet-points1 h4 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-bullet-points1 p { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-project-content h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .ETCD-project-content p { color: var(--pg-text) !important; }
html[data-theme="dark"] .ETCD-button { color: var(--pg-heading) !important; }
:where(html[data-theme="dark"]) h1, :where(html[data-theme="dark"]) h2, :where(html[data-theme="dark"]) h3 { color: var(--pg-text); }
html[data-theme="dark"] .preproduct-image { color: var(--pg-muted) !important; }
html[data-theme="dark"] .preclient-stories-card p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .cookieaccept-btn { color: var(--pg-heading) !important; }
html[data-theme="dark"] .close-btn { color: var(--pg-muted) !important; }
html[data-theme="dark"] .close-btn:hover { color: var(--pg-text) !important; }
html[data-theme="dark"] .form-group label { color: var(--pg-text) !important; }
html[data-theme="dark"] .breadcrumb a { color: var(--pg-muted) !important; }
html[data-theme="dark"] .breadcrumb .separator { color: var(--pg-muted) !important; }
html[data-theme="dark"] .breadcrumb .current { color: var(--pg-heading) !important; }
html[data-theme="dark"] .teamscontent-left h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .teamscontent-left p { color: var(--pg-text) !important; }
html[data-theme="dark"] .fa-search { color: var(--pg-text) !important; }
html[data-theme="dark"] #cancel-search { color: var(--pg-heading) !important; }
html[data-theme="dark"] .team-header { color: var(--pg-text) !important; }
html[data-theme="dark"] .team-container h5 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .team-container h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .team-name { color: var(--pg-text) !important; }
html[data-theme="dark"] .About-card h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .About-container h4 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .About-container h5 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .products-section-header p { color: var(--pg-text) !important; }
html[data-theme="dark"] .services-content h1 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .services-content p { color: var(--pg-text) !important; }
html[data-theme="dark"] .servicescontent-box h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .servicescontent-box p { color: var(--pg-text) !important; }
html[data-theme="dark"] .read-more-button { color: var(--pg-heading) !important; }
html[data-theme="dark"] .servicescontent-container:hover .read-more-button { color: var(--pg-heading) !important; }
html[data-theme="dark"] .servicescontent-container:hover .read-more-button .arrow { color: var(--pg-heading) !important; }
html[data-theme="dark"] .icon-with-text span { color: var(--pg-text) !important; }
:where(html[data-theme="dark"]) a, :where(html[data-theme="dark"]) a:hover, :where(html[data-theme="dark"]) a:active, :where(html[data-theme="dark"]) a:focus { color: var(--pg-text); }
:where(html[data-theme="dark"]) h1, :where(html[data-theme="dark"]) h2, :where(html[data-theme="dark"]) h3, :where(html[data-theme="dark"]) h4, :where(html[data-theme="dark"]) h5, :where(html[data-theme="dark"]) h6 { color: var(--pg-text); }
:where(html[data-theme="dark"]) p { color: var(--pg-text); }
html[data-theme="dark"] .navbar-header a.navbar-brand, html[data-theme="dark"] .navbar-header a.navbar-brand:hover, html[data-theme="dark"] .navbar-header a.navbar-brand:focus { color: var(--pg-heading) !important; }
html[data-theme="dark"] nav.navbar.bootsnav ul.nav > li > a:hover, html[data-theme="dark"] nav.navbar.bootsnav ul.nav > li > a:focus, html[data-theme="dark"] nav.navbar.bootsnav ul.nav > li.active > a { color: var(--pg-heading) !important; }
html[data-theme="dark"] .sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a { color: var(--pg-text) !important; }
html[data-theme="dark"] .sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:hover, html[data-theme="dark"] .sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li > a:focus, html[data-theme="dark"] .sticky-wrapper.is-sticky nav.navbar.bootsnav ul.nav > li.active > a { color: var(--pg-heading) !important; }
html[data-theme="dark"] nav.navbar.bootsnav .navbar-toggle i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .card-content h4.card-title { color: var(--pg-heading) !important; }
html[data-theme="dark"] .card-content p.card-description { color: var(--pg-muted) !important; }
html[data-theme="dark"] .dropdown-menu-columns ul li a { color: var(--pg-muted) !important; }
html[data-theme="dark"] .dropdown-menu-columns ul li a:hover { color: var(--pg-heading) !important; }
html[data-theme="dark"] .header-text h2 span { color: var(--pg-heading) !important; }
html[data-theme="dark"] .single-about-txt h3 { color: var(--pg-text) !important; }
html[data-theme="dark"] .single-about-add-info h3 { color: var(--pg-muted) !important; }
html[data-theme="dark"] .timeline-horizontal-border i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .single-progress-txt h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .tooltip > .tooltip-inner { color: var(--pg-heading) !important; }
html[data-theme="dark"] .experience-time h3 { color: var(--pg-muted) !important; }
html[data-theme="dark"] .timeline-content span > i, html[data-theme="dark"] .experience-time span > i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .timeline-content h5 { color: var(--pg-muted) !important; }
html[data-theme="dark"] .profile-icon-name { color: var(--pg-muted) !important; }
html[data-theme="dark"] .contact-form .form-control { color: var(--pg-muted) !important; }
html[data-theme="dark"] nav.navbar.bootsnav ul.nav > li.dropdown span.megamenu-title { color: var(--pg-text) !important; }
html[data-theme="dark"] nav.navbar.bootsnav .dropdown-menu a { color: var(--pg-text) !important; }
html[data-theme="dark"] .play-pause-center i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .volume-icon { color: var(--pg-heading) !important; }
html[data-theme="dark"] .about-tab.active { color: var(--pg-heading) !important; }
html[data-theme="dark"] .about-section h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .why-choose-card i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .why-choose-card h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .value-card i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .value-card h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .policy-card h3.policy-title { color: var(--pg-heading) !important; }
html[data-theme="dark"] .policy-card h4 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .policy-card h5 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .policy-card p strong { color: var(--pg-heading) !important; }
html[data-theme="dark"] .contact-info h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .contact-item i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .contact-item h4 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .contact-item p, html[data-theme="dark"] .contact-item a { color: var(--pg-text) !important; }
html[data-theme="dark"] .contact-item a:hover { color: var(--pg-heading) !important; }
html[data-theme="dark"] .newsletter-form h4 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .social-link { color: var(--pg-heading) !important; }
html[data-theme="dark"] .social-link:hover { color: var(--pg-heading) !important; }
html[data-theme="dark"] .section-header h2 { color: #e6c98f !important; }
html[data-theme="dark"] .filter-btn { color: var(--pg-heading) !important; }
html[data-theme="dark"] .spinner-border { color: var(--pg-heading) !important; }
html[data-theme="dark"] .blog-detail-content { color: var(--pg-text) !important; }
html[data-theme="dark"] .careers-category { color: var(--pg-heading) !important; }
html[data-theme="dark"] .section-title { color: var(--pg-heading) !important; }
html[data-theme="dark"] .no-jobs h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .no-jobs p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .apply-btn:hover { color: var(--pg-heading) !important; }
html[data-theme="dark"] .job-card-header h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .job-meta { color: var(--pg-text) !important; }
html[data-theme="dark"] .job-description { color: var(--pg-text) !important; }
html[data-theme="dark"] .job-requirements h4 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .job-modal .meta-item h5 { color: var(--pg-text) !important; }
html[data-theme="dark"] .job-modal .meta-item p { color: var(--pg-text) !important; }
html[data-theme="dark"] .job-modal .section-title { color: var(--pg-heading) !important; }
html[data-theme="dark"] .job-modal ul { color: var(--pg-text) !important; }
html[data-theme="dark"] .job-modal ul li { color: var(--pg-text) !important; }
html[data-theme="dark"] .application-form label { color: var(--pg-text) !important; }
html[data-theme="dark"] .file-upload-text { color: var(--pg-muted) !important; }
html[data-theme="dark"] .file-upload-text i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .file-upload-preview .file-name { color: var(--pg-heading) !important; }
html[data-theme="dark"] .file-upload-preview .file-size { color: var(--pg-muted) !important; }
html[data-theme="dark"] .section-header p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .notification-close { color: var(--pg-heading) !important; }
html[data-theme="dark"] .notification-close:hover { color: var(--pg-heading) !important; }
html[data-theme="dark"] .notification-title { color: var(--pg-heading) !important; }
html[data-theme="dark"] .notification-description { color: var(--pg-muted) !important; }
html[data-theme="dark"] .privacy-notice-text { color: var(--pg-text) !important; }
html[data-theme="dark"] .privacy-more { color: var(--pg-text) !important; }
html[data-theme="dark"] .privacy-close:hover { color: var(--pg-muted) !important; }
html[data-theme="dark"] .case-study-card h3 { color: #e6c98f !important; }
html[data-theme="dark"] .case-study-card p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .challenge-list li { color: var(--pg-muted) !important; }
html[data-theme="dark"] .feature-item p { color: var(--pg-text) !important; }
html[data-theme="dark"] .stat-value { color: #e6c98f !important; }
html[data-theme="dark"] .stat-label { color: var(--pg-muted) !important; }
html[data-theme="dark"] .impact-summary { color: var(--pg-text) !important; }
html[data-theme="dark"] .image-card p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .productitem h1 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .projects-header h1 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .projects-header p { color: var(--pg-text) !important; }
html[data-theme="dark"] .project-title { color: var(--pg-heading) !important; }
html[data-theme="dark"] .project-description { color: var(--pg-text) !important; }
html[data-theme="dark"] .carousel-nav i { color: var(--pg-heading) !important; }
html[data-theme="dark"] .auto-scroll-indicator { color: var(--pg-muted) !important; }
html[data-theme="dark"] .resources-heading h1 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .resources-heading p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .resources-title h2 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .resources-title p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .resources-body p { color: var(--pg-muted) !important; }
html[data-theme="dark"] .cta-block h3, html[data-theme="dark"] .social-strip h3 { color: var(--pg-heading) !important; }
html[data-theme="dark"] .social-buttons a { color: var(--pg-heading) !important; }

/* ==========================================================================
   The night / light switch
   ========================================================================== */
.pg-theme-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9990;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--pg-glass-border);
  border-radius: 50%;
  color: var(--pg-heading);
  background: var(--pg-glass);
  -webkit-backdrop-filter: var(--pg-glass-blur);
  backdrop-filter: var(--pg-glass-blur);
  box-shadow: var(--pg-shadow);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.pg-theme-toggle:hover { transform: translateY(-2px) scale(1.06); }
.pg-theme-toggle:active { transform: scale(.94); }
.pg-theme-toggle svg { width: 22px; height: 22px; grid-area: 1 / 1; transition: transform .45s cubic-bezier(.2, 1.2, .3, 1), opacity .25s ease; }
.pg-theme-toggle .pg-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.pg-theme-toggle .pg-moon { opacity: 1; transform: none; }
html[data-theme="dark"] .pg-theme-toggle .pg-sun { opacity: 1; transform: none; color: #ffd166; }
html[data-theme="dark"] .pg-theme-toggle .pg-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
.pgm-open ~ .pg-theme-toggle, body:has(.pgm-open) .pg-theme-toggle { opacity: 0; pointer-events: none; }
@media print { .pg-theme-toggle { display: none; } }

/* Appearance menu (opens from the round button): Automatic / My device / Light / Night */
.pg-theme-menu {
  position: fixed; left: 18px; bottom: 78px; z-index: 9991; width: 236px; padding: 8px;
  color: var(--pg-text); background: var(--pg-alt, var(--pg-glass)); border: 1px solid var(--pg-glass-border); border-radius: 14px;
  -webkit-backdrop-filter: var(--pg-glass-blur); backdrop-filter: var(--pg-glass-blur); box-shadow: var(--pg-shadow);
  font-family: 'Poppins', sans-serif;
}
html:not([data-theme="dark"]) .pg-theme-menu { background: rgba(255, 255, 255, .96); }
.pg-theme-menu[hidden] { display: none; }
.pg-theme-head { padding: 6px 10px 8px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--pg-muted); }
.pg-theme-menu button { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 9px 10px; text-align: left; color: inherit; background: none; border: 0; border-radius: 10px; cursor: pointer; font: inherit; }
.pg-theme-menu button:hover, .pg-theme-menu button:focus-visible { background: color-mix(in srgb, var(--pg-accent) 12%, transparent); outline: none; }
.pg-tm-dot { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; border: 2px solid var(--pg-muted); border-radius: 50%; }
.pg-theme-menu button[aria-checked="true"] .pg-tm-dot { border-color: var(--pg-accent); background: radial-gradient(circle, var(--pg-accent) 0 45%, transparent 50%); }
.pg-tm-txt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pg-tm-txt small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--pg-muted); }
.pgm-open ~ .pg-theme-menu, body:has(.pgm-open) .pg-theme-menu { display: none; }
@media print { .pg-theme-menu { display: none; } }
@media (max-width: 480px) { .pg-theme-menu { left: 12px; bottom: 72px; width: min(236px, calc(100vw - 24px)); } }

/* Night logo: the white logo file has different proportions, so pin it to the light logo's size */
html[data-theme="dark"] .navbar-brand img { height: 44px !important; width: auto !important; max-width: none !important; }
html[data-theme="dark"] #main-content .navbar-brand img { height: 40px !important; }

/* Selected states and slider arrows in night mode (placed last so they win over the generated colours) */
html[data-theme="dark"] button.about-tab.active,
html[data-theme="dark"] .about-tabs .about-tab.active { background: var(--pg-accent) !important; color: #0a1030 !important; }
html[data-theme="dark"] :is(.filter-btn, .page-link, .careers-category).active { color: #ffffff !important; }
html[data-theme="dark"] #prev, html[data-theme="dark"] #next,
html[data-theme="dark"] .products-navigation-arrows button { color: var(--pg-heading) !important; }