/******************************************************************************/
/* Dark Mode — scoped under html.dark-mode only (no effect when off)         */
/******************************************************************************/

html.dark-mode {
  color-scheme: dark;
  --main-color: #3ab4be;
  --sub-color: #a8c0c4;
  --dm-bg: #0b1c1f;
  --dm-surface: #122a2e;
  --dm-surface-2: #1a353a;
  --dm-text: #e8f0f1;
  --dm-text-muted: #9db0b4;
  --dm-border: rgba(255, 255, 255, 0.1);
}

html.dark-mode,
html.dark-mode body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

html.dark-mode button,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  color: var(--dm-text);
}

/* ---------- Typography on light sections ---------- */
html.dark-mode .sec_head h2 {
  color: var(--dm-text);
}

html.dark-mode .sec_head p {
  color: var(--dm-text-muted);
}

/* ---------- Statistics ---------- */
html.dark-mode .section_statistics {
  background: var(--dm-bg);
  color: var(--dm-text);
}

html.dark-mode .item-statistic h2 span {
  color: #58c7d0;
}

html.dark-mode .item-statistic h2 small {
  color: #58c7d0 !important;
}

html.dark-mode .item-statistic p {
  color: var(--dm-text);
}

html.dark-mode .item-statistic:before {
  background: rgba(255, 255, 255, 0.15);
}

/* ---------- Header / menus ---------- */
html.dark-mode #header,
html.dark-mode body header#header.fixed-header {
  background: #1a4f55;
}

html.dark-mode .dropdown-menu {
  background: var(--dm-surface);
  border: 1px solid var(--dm-border);
}

html.dark-mode .dropdown-menu li a {
  color: var(--dm-text);
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
  color: #ffffff;
  background-color: #2f969e;
}

html.dark-mode .dm-toggle {
  background: #3a555a;
}

html.dark-mode #dmSwitch:checked + .dm-toggle {
  background: #31b7c1;
}

/* ---------- Features ---------- */
html.dark-mode .item-feat {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
}

html.dark-mode .txt-feat h4 {
  color: var(--dm-text);
}

html.dark-mode .txt-feat p {
  color: var(--dm-text-muted);
}

html.dark-mode .item-feat:hover .txt-feat h4,
html.dark-mode .item-feat:hover .txt-feat p {
  color: #fff;
}

html.dark-mode .section_features:has(.item-feat:hover) .sec_head h2 {
  color: var(--dm-text);
}

/* ---------- Partners ---------- */
html.dark-mode .section_partners {
  background: var(--dm-surface);
  color: var(--dm-text);
}

html.dark-mode .section_partners .sec_head h2 {
  color: var(--dm-text);
}

html.dark-mode .item-partner {
  background: #eef2f2;
  border-color: var(--dm-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

html.dark-mode .item-partner img {
  mix-blend-mode: multiply;
}

/* ---------- Buttons (white base) ---------- */
html.dark-mode .btn-site {
  background: var(--dm-surface-2);
  box-shadow: 0 0 20px rgba(38, 134, 141, 0.45);
}

html.dark-mode .btn-site:before {
  background: #2a454a;
}

html.dark-mode .btn-site span {
  color: #7ed4db;
}

html.dark-mode .form-msg .btn-site {
  background: #26868d;
}

html.dark-mode .form-msg .btn-site span {
  color: #fff;
}

html.dark-mode .form-msg .btn-site:hover span {
  color: #26868d;
}

/* ---------- About Us (parallax-about) ---------- */
html.dark-mode .parallax-about.parallax-section {
  background-color: var(--dm-bg);
}

html.dark-mode .parallax-about .txt-choose h3 {
  color: #ffffff;
}

html.dark-mode .parallax-about .txt-choose p,
html.dark-mode .parallax-about .text-about-us,
html.dark-mode .parallax-about .text-about-us p,
html.dark-mode .parallax-about .text-about-us li,
html.dark-mode .parallax-about .text-about-us span {
  color: #ffffff;
}

html.dark-mode .parallax-about .text-about-us a {
  color: #7ed4db;
}

html.dark-mode .parallax-about .txt-choose .btn-site {
  background: #2f969e;
}

html.dark-mode .parallax-about .txt-choose .btn-site span {
  color: #ffffff;
}

html.dark-mode .parallax-about .txt-choose .btn-site:hover span {
  color: #2f969e;
}

/* ---------- Vision / Quote / Strategic pillars ---------- */
html.dark-mode .vision-columns {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

html.dark-mode .vision-item:not(:last-child) {
  border-inline-end-color: var(--dm-border);
}

html.dark-mode .vision-heading {
  color: var(--dm-text);
}

html.dark-mode .vision-text {
  color: var(--dm-text-muted);
}

html.dark-mode .vision-item:hover .vision-heading,
html.dark-mode .vision-item:hover .vision-text {
  color: #fff;
}

html.dark-mode .quote-box {
  background: var(--dm-surface);
}

html.dark-mode .quote-text {
  color: var(--dm-text-muted);
}

html.dark-mode .quote-text a {
  color: #7ed4db;
  border-bottom-color: currentColor;
}

html.dark-mode .quote-name {
  color: var(--dm-text);
}

html.dark-mode .quote-role {
  color: var(--dm-text-muted);
}

html.dark-mode .sp-card-face-back {
  background: var(--dm-surface);
  color: #7ed4db;
  border-color: var(--dm-border);
}

html.dark-mode .sp-card-face-back h3 {
  border-bottom-color: rgba(38, 134, 141, 0.35);
}

html.dark-mode .sp-section-title {
  color: var(--dm-text);
}

/* ---------- About / Org structure ---------- */
html.dark-mode .department {
  background: var(--dm-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

html.dark-mode .role-item {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
}

html.dark-mode .role-item p,
html.dark-mode .section-title h6 {
  color: var(--dm-text);
}

html.dark-mode .role-item span,
html.dark-mode .section-title p {
  color: var(--dm-text-muted);
}

html.dark-mode .section-title {
  border-bottom-color: var(--dm-border);
}

html.dark-mode .sec-depart:not(:last-child) {
  border-bottom-color: var(--dm-border);
}

html.dark-mode .section-title h6,
html.dark-mode .branch-table .label {
  color: var(--dm-text);
}

html.dark-mode .branch-table .value {
  color: var(--dm-text-muted);
}

/* ---------- Partners page ---------- */
html.dark-mode .partner-box {
  /* Keep logo wells light so dark and coloured partner logos stay visible. */
  background: #eef2f2;
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark-mode .section_arae_page {
  background: var(--dm-bg);
}

html.dark-mode .arae_page_oth {
  background: var(--dm-surface);
}

html.dark-mode .hed-area h3 {
  color: var(--dm-text);
}

html.dark-mode .hed-area p {
  color: var(--dm-text-muted);
}

html.dark-mode .detail-section {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

html.dark-mode .thumb-partner figure {
  /* Partner artwork is designed for a light canvas. */
  background: #eef2f2;
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark-mode .detail-header-text {
  border-color: var(--dm-border);
}

html.dark-mode .detail-header-text h3 {
  color: var(--dm-text);
}

html.dark-mode .detail-header-text p {
  color: var(--dm-text-muted);
}

/* ---------- Contact ---------- */
html.dark-mode .item-branch {
  background: var(--dm-surface);
}

html.dark-mode .branch-region h6 {
  color: var(--dm-text);
}

html.dark-mode .dta-branch > div p {
  color: var(--dm-text-muted);
}

html.dark-mode .cont-msg {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
}

html.dark-mode .head-msg h4 {
  color: var(--dm-text);
}

html.dark-mode .head-msg p {
  color: var(--dm-text-muted);
}

html.dark-mode .form-msg .form-control {
  background: var(--dm-surface-2);
  color: var(--dm-text);
  border: 1px solid var(--dm-border);
}

html.dark-mode .form-msg .form-control::placeholder {
  color: rgba(232, 240, 241, 0.45);
}

/* ---------- Projects ---------- */
html.dark-mode .status-card {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

html.dark-mode .status-card p {
  color: var(--dm-text-muted);
}

html.dark-mode .status-card figure {
  color: var(--dm-text-muted);
}

html.dark-mode .search-box input,
html.dark-mode .sort-box,
html.dark-mode .sort-box select {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode .sort-box label {
  color: var(--dm-text-muted);
}

html.dark-mode .filter-btn {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode .filter-btn.active,
html.dark-mode .filter-btn:hover {
  background: #2f969e;
  color: #fff;
  border-color: #2f969e;
}

html.dark-mode .project-card {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

html.dark-mode .txt-proj h3,
html.dark-mode .txt-proj h4,
html.dark-mode .txt-proj a {
  color: var(--dm-text);
}

html.dark-mode .txt-proj p {
  color: var(--dm-text-muted);
}

html.dark-mode .proj-badges .badge.category,
html.dark-mode .proj-badges .badge.status {
  background: rgba(47, 150, 158, 0.2);
  color: #7ed4db;
}

html.dark-mode .proj-badges .badge.completed {
  color: var(--dm-text-muted);
}

html.dark-mode .section_dta_project .status,
html.dark-mode .item-dta-proj .content span {
  color: #7ed4db;
}

html.dark-mode .item-dta-proj .content p,
html.dark-mode .item-lang-covered p {
  color: var(--dm-text);
}

html.dark-mode .back-button,
html.dark-mode .aside-map {
  background: var(--dm-surface);
  color: var(--dm-text);
}

html.dark-mode .close-btn {
  color: var(--dm-text);
}

html.dark-mode .close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .branch-description {
  color: var(--dm-text-muted);
}

html.dark-mode .breadcrumbs {
  background-color: rgba(47, 150, 158, 0.15);
}

html.dark-mode .breadcrumbs ul li a,
html.dark-mode .breadcrumbs-1 span.breadcrumb-delimiter {
  color: var(--dm-text);
}

html.dark-mode .single-page blockquote {
  background: var(--dm-surface);
  color: var(--dm-text-muted);
}

html.dark-mode .single-page a {
  color: #7ed4db;
}

/* ---------- Blog / sidebar ---------- */
html.dark-mode .search-from-widget input {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
  box-shadow: none;
}

html.dark-mode .search-from-widget input::placeholder {
  color: var(--dm-text-muted);
}

html.dark-mode .search-from-widget button,
html.dark-mode .recent-posts-widget ul li .content .title a {
  color: var(--dm-text);
}

html.dark-mode .recent-posts-widget ul li .content .date,
html.dark-mode .links-list-widget ul li a,
html.dark-mode .post-card .excerpt {
  color: var(--dm-text-muted);
}

html.dark-mode .links-list-widget ul li a:hover,
html.dark-mode .post-card .title a {
  color: var(--dm-text);
}

html.dark-mode .post-card {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

html.dark-mode .pagination a {
  color: #7ed4db;
}

html.dark-mode .pagination a:hover {
  color: var(--dm-text);
  background: var(--dm-surface-2);
  box-shadow: none;
}

html.dark-mode .pagination span.current {
  background: #2f969e;
  color: #fff;
}

/* ---------- Search results page ---------- */
html.dark-mode .search-results-count {
  color: var(--dm-text-muted);
  border-bottom-color: var(--dm-border);
}

html.dark-mode .search-results-count strong {
  color: var(--dm-text);
}

html.dark-mode .sc-result-item {
  border-bottom-color: var(--dm-border);
}

html.dark-mode .sc-result-title a {
  color: #7ed4db;
}

html.dark-mode .sc-result-title a:hover {
  color: #a8e8ed;
}

html.dark-mode .sc-result-snippet {
  color: var(--dm-text-muted);
}

html.dark-mode .sc-result-snippet mark.sc-search-highlight,
html.dark-mode .sc-keywords-bar mark.sc-search-highlight {
  background: #fff176;
  color: #222;
}

html.dark-mode .sc-keywords-bar {
  color: var(--dm-text-muted);
}

html.dark-mode .sc-kw-sep {
  color: rgba(255, 255, 255, 0.25);
}

html.dark-mode .sc-result-meta {
  color: var(--dm-text-muted);
}

html.dark-mode .sc-result-meta .sc-post-type {
  background: var(--dm-surface-2);
  color: var(--dm-text-muted);
}

/* generic light cards / panels used across widgets */
html.dark-mode .site-content {
  background-color: var(--dm-bg);
}

html.dark-mode .single-post h1,
html.dark-mode .single-page h1,
html.dark-mode .single-page h2,
html.dark-mode .single-page h3,
html.dark-mode .single-page h4,
html.dark-mode .single-page h5,
html.dark-mode .single-page h6 {
  color: var(--dm-text);
}

html.dark-mode .site-content.single p,
html.dark-mode .single-post p,
html.dark-mode .single-page p {
  color: var(--dm-text-muted);
}

/* ---------- Search popup (inline styles in header widget) ---------- */
html.dark-mode .search-popup-content {
  background: var(--dm-surface);
}

html.dark-mode .search-popup-title {
  color: var(--dm-text);
}

html.dark-mode .search-popup-close {
  color: var(--dm-text-muted);
}

html.dark-mode .search-popup-input {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

@media (max-width: 768px) {
  html.dark-mode .search-popup-close {
    background: var(--dm-surface-2);
  }
}

/* ---------- Chat widget ---------- */
html.dark-mode .chat-widget {
  background: var(--dm-surface);
}

html.dark-mode .chat-avatar,
html.dark-mode .bot-icon {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
}

html.dark-mode .message-text {
  background: var(--dm-surface-2);
  color: var(--dm-text);
}

html.dark-mode .message-time {
  color: var(--dm-text-muted);
}

html.dark-mode .option-btn {
  background: var(--dm-surface);
}

html.dark-mode .chat-body {
  background: var(--dm-bg);
}

html.dark-mode .chat-input,
html.dark-mode .chat-footer {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

html.dark-mode .row-input-chat,
html.dark-mode .emoji-picker,
html.dark-mode .file-preview {
  background: var(--dm-surface-2);
  border-color: var(--dm-border);
}

html.dark-mode .message-input {
  background: transparent;
  color: var(--dm-text);
}

html.dark-mode .message-input::placeholder,
html.dark-mode .file-size,
html.dark-mode .chat-footer p {
  color: var(--dm-text-muted);
}

html.dark-mode .file-name {
  color: var(--dm-text);
}

html.dark-mode .emoji-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Soften very light backgrounds set by theme utilities */
html.dark-mode .bg-white,
html.dark-mode .bg-light {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text);
}

/* Project filters / gallery cards */
html.dark-mode .filter-tabs button,
html.dark-mode .projects-filter button,
html.dark-mode .nav-pills .nav-link {
  background: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html.dark-mode .filter-tabs button.active,
html.dark-mode .projects-filter button.active,
html.dark-mode .nav-pills .nav-link.active {
  background: #2f969e;
  color: #fff;
}

/* Cards with white backgrounds across pages */
html.dark-mode .card-area,
html.dark-mode .info-card,
html.dark-mode .service-box,
html.dark-mode .box-content,
html.dark-mode .content-box {
  background: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

/* Steps / stats project light panels */
html.dark-mode .section_steps .layout .item-step,
html.dark-mode .section_languages_covered,
html.dark-mode .lang-item,
html.dark-mode .stat-box {
  background: var(--dm-surface);
  color: var(--dm-text);
}

/* ---------- Service cards pagination ---------- */
html.dark-mode .service-cards-section .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.55) !important;
  opacity: 1;
}

html.dark-mode .service-cards-section .swiper-pagination-bullet-active {
  background: #ffffff !important;
  opacity: 1;
}

/* ---------- Elementor native widgets ---------- */
/* High specificity + !important to beat Elementor post/page CSS loaded inline */
html.dark-mode body .elementor .elementor-widget-text-editor > .elementor-widget-container,
html.dark-mode body .elementor .elementor-widget-text-editor .elementor-text-editor,
html.dark-mode body .elementor .elementor-element.khadmat.elementor-widget-text-editor > .elementor-widget-container,
html.dark-mode body .elementor .elementor-element.khadmat.elementor-widget-text-editor,
html.dark-mode body .elementor .elementor-widget-text-editor > :is(p, ul, ol, blockquote),
html.dark-mode body .elementor .elementor-element.khadmat > :is(p, ul, ol, blockquote),
html.dark-mode body .elementor .elementor-widget-text-editor > :is(p, ul, ol, blockquote) :is(li, span, strong, em, b, i, h1, h2, h3, h4, h5, h6),
html.dark-mode body .elementor .elementor-element.khadmat > :is(p, ul, ol, blockquote) :is(li, span, strong, em, b, i, h1, h2, h3, h4, h5, h6),
html.dark-mode body .elementor .elementor-widget-text-editor .elementor-widget-container :is(p, li, span, strong, em, b, i, h1, h2, h3, h4, h5, h6),
html.dark-mode body .elementor .elementor-element.khadmat .elementor-widget-container :is(p, li, span, strong, em, b, i) {
  color: #ffffff !important;
}

html.dark-mode body .elementor .elementor-widget-text-editor a,
html.dark-mode body .elementor .elementor-text-editor a,
html.dark-mode body .elementor .elementor-element.khadmat a {
  color: #7ed4db !important;
}

html.dark-mode body .elementor .elementor-widget-heading .elementor-heading-title {
  color: #ffffff !important;
}

html.dark-mode body .elementor .elementor-counter-title {
  color: #ffffff !important;
}

/* Keep white text on already-dark branded blocks */
html.dark-mode #header .main_menu > li > a,
html.dark-mode #header .meun_ed > ul > li > a,
html.dark-mode .section_presence .sec_head h2,
html.dark-mode .home_txt p,
html.dark-mode .menu-ft h5,
html.dark-mode .menu-ft ul li a,
html.dark-mode .list-contact li,
html.dark-mode .list-contact li a,
html.dark-mode .department-header h4,
html.dark-mode .sp-card-face-front,
html.dark-mode .service-cards .service-card,
html.dark-mode .chat-title h3,
html.dark-mode .chat-status {
  color: #fff;
}

/* Scrollbar (webkit) */
html.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: var(--dm-bg);
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: #2a4a50;
  border-radius: 8px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #3ab4be;
}