/* ========================================
   Theme Switcher System
   Supports Light & Dark Color Variations
   ======================================== */

/* ========================================
   Global Element Hiding
   ======================================== */

/* Completely hide breadcrumb list on all pages */
.te-breadcrumb-list {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.te-breadcrumb-list * {
    display: none !important;
    visibility: hidden !important;
}

:root {
    /* Light Theme (Default) - Brand-Aligned Color Palette */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-text-primary: #1a1a1a;
    --theme-text-secondary: #6c757d;
    --theme-accent: #fe7fdd;
    --theme-accent-hover: #ff99e8;
    --theme-card-bg: #ffffff;
    --theme-border: rgba(0, 0, 0, 0.1);
    --theme-shadow: rgba(254, 127, 221, 0.2);
    --theme-overlay: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] {
    /* Dark Theme */
    --theme-bg-primary: #0a0a0a;
    --theme-bg-secondary: #1a1a1a;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #cccccc;
    --theme-accent: #fe7fdd;
    --theme-accent-hover: #ff99e8;
    --theme-card-bg: rgba(255, 255, 255, 0.05);
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-shadow: rgba(0, 0, 0, 0.5);
    --theme-overlay: rgba(0, 0, 0, 0.8);
}

/* Theme Switcher Button */
.te-theme-switcher {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    margin-left: 0;
}

[dir="rtl"] .te-theme-switcher {
    margin-right: 0;
    margin-left: 15px;
}

.te-theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    position: relative;
    overflow: hidden;
}

.te-theme-toggle-btn:hover {
    background: var(--theme-accent);
    color: #ffffff;
    transform: scale(1.1);
    border-color: var(--theme-accent);
}

.te-theme-toggle-btn i {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Icon animations - Light is default, so sun is visible by default */
.te-theme-toggle-btn .fa-sun {
    position: absolute;
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="dark"] .te-theme-toggle-btn .fa-sun {
    opacity: 0;
    transform: rotate(-90deg);
}

[data-theme="dark"] .te-theme-toggle-btn .fa-moon {
    opacity: 1;
    transform: rotate(0deg);
}

.te-theme-toggle-btn .fa-moon {
    opacity: 0;
    transform: rotate(90deg);
}

/* Apply theme colors to body and main elements */
html,
body {
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-secondary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Override existing backgrounds - Light is default, so override for dark theme */
[data-theme="dark"] body,
[data-theme="dark"] .work-prgress-area,
[data-theme="dark"] .latest-service-area,
[data-theme="dark"] .about-feature-area,
[data-theme="dark"] .subscribe-area,
[data-theme="dark"] .page-breadcrumb-area {
    background-color: var(--theme-bg-primary) !important;
}

/* Dark Mode - About Feature Area (Preserve Original Dark Styling) */
[data-theme="dark"] .about-feature-area {
    background: linear-gradient(110deg, rgba(40, 40, 40, 0.29) -0.9%, rgba(77, 77, 77, 0.21) 101.13%) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .about-feature-area .about-us-card .te-list-item-wrapper .te-list-item .text {
    color: #ffffff !important;
}

/* Ensure light theme backgrounds are applied by default */
body,
.work-prgress-area,
.latest-service-area,
.about-feature-area,
.subscribe-area,
.page-breadcrumb-area {
    background-color: var(--theme-bg-primary) !important;
}

/* ========================================
   About Feature Area - Light Mode
   Background & Text Colors
   ======================================== */

/* Light Mode - About Feature Area Background (White) */
.about-feature-area {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Light Mode - About Feature Area Text (Black) */
.about-feature-area,
.about-feature-area .te-section-title .short-title,
.about-feature-area .te-section-title .title,
.about-feature-area .te-section-title p,
.about-feature-area .about-us-card,
.about-feature-area .about-us-card .te-section-title .short-title,
.about-feature-area .about-us-card .te-section-title .title,
.about-feature-area .about-us-card .te-section-title p {
    color: #000000 !important;
}

/* Light Mode - List Items Text (Black) - Specifically "Global Tech Leadership" and "Middle East vision Alignment" */
.about-feature-area .about-us-card .te-list-item-wrapper .te-list-item .text {
    color: #000000 !important;
}

/* ========================================
   Global typography (light-first)
   style.css hard-codes dark theme colors; these overrides enforce Light Mode.
   ======================================== */

h1, h2, h3, h4, h5, h6,
.title,
.te-section-title .title {
    color: var(--theme-text-primary) !important;
}

p,
label,
li,
small,
.desc,
.te-section-title p,
.te-post-meta,
.te-post-meta span,
.meta-text,
.meta-title {
    color: var(--theme-text-secondary) !important;
}

/* Header Theme Support */
.header-area {
    background-color: var(--theme-bg-secondary);
    border-bottom: 1px solid var(--theme-border);
}

/* ========================================
   Header Font Colors - Light & Dark Mode
   ======================================== */

/* Light Mode - Default Header Font Colors */
/* Main navigation links */
.te-main-menu ul li a {
    color: #000000 !important;
    transition: color 0.3s ease;
}

/* Light Mode - Header Font Hover */
.te-main-menu ul li a:hover {
    color: var(--theme-accent) !important;
}

/* Light Mode - Active menu item */
.te-main-menu ul li.te-active > a,
.te-main-menu ul li.active > a {
    color: var(--theme-accent) !important;
}

/* Light Mode - Dropdown arrow color on hover */
.te-main-menu ul li a:hover:after {
    color: var(--theme-accent) !important;
}

/* Light Mode - Active dropdown arrow */
.te-main-menu ul li.te-active > a:after,
.te-main-menu ul li.active > a:after {
    color: var(--theme-accent) !important;
}

/* Light Mode - Submenu links */
.te-main-menu ul li ul li a {
    color: var(--theme-text-secondary) !important;
}

/* Light Mode - Submenu links hover */
.te-main-menu ul li ul li a:hover {
    color: var(--theme-accent) !important;
}

/* ========================================
   Dark Mode - Header Font Colors
   ======================================== */

/* Dark Mode - Default Header Font Colors (White) */
[data-theme="dark"] .te-main-menu ul li a {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

/* Dark Mode - Header Font Hover */
[data-theme="dark"] .te-main-menu ul li a:hover {
    color: var(--theme-accent) !important;
}

/* Dark Mode - Active menu item */
[data-theme="dark"] .te-main-menu ul li.te-active > a,
[data-theme="dark"] .te-main-menu ul li.active > a {
    color: var(--theme-accent) !important;
}

/* Dark Mode - Dropdown arrow color on hover */
[data-theme="dark"] .te-main-menu ul li a:hover:after {
    color: var(--theme-accent) !important;
}

/* Dark Mode - Active dropdown arrow */
[data-theme="dark"] .te-main-menu ul li.te-active > a:after,
[data-theme="dark"] .te-main-menu ul li.active > a:after {
    color: var(--theme-accent) !important;
}

/* Dark Mode - Submenu links */
[data-theme="dark"] .te-main-menu ul li ul li a {
    color: var(--theme-text-secondary) !important;
}

/* Dark Mode - Submenu links hover */
[data-theme="dark"] .te-main-menu ul li ul li a:hover {
    color: var(--theme-accent) !important;
}

/* Dark Mode - Submenu active item */
[data-theme="dark"] .te-main-menu ul li ul li.te-active > a {
    color: #ffffff !important;
}

[data-theme="dark"] .te-main-menu ul li ul li.te-active > a:hover {
    color: var(--theme-accent) !important;
}

/* ========================================
   Sticky Header State - Light & Dark Mode
   ======================================== */

/* Light Mode - Sticky Header Font Colors */
.te-header-menu-area.te-sticky_menu .te-main-menu ul li a {
    color: #000000 !important;
}

.te-header-menu-area.te-sticky_menu .te-main-menu ul li a:hover {
    color: var(--theme-accent) !important;
}

.te-header-menu-area.te-sticky_menu .te-main-menu ul li.te-active > a,
.te-header-menu-area.te-sticky_menu .te-main-menu ul li.active > a {
    color: var(--theme-accent) !important;
}

.te-header-menu-area.te-sticky_menu .te-main-menu ul li a:hover:after {
    color: var(--theme-accent) !important;
}

/* Dark Mode - Sticky Header Font Colors */
[data-theme="dark"] .te-header-menu-area.te-sticky_menu .te-main-menu ul li a {
    color: #ffffff !important;
}

[data-theme="dark"] .te-header-menu-area.te-sticky_menu .te-main-menu ul li a:hover {
    color: var(--theme-accent) !important;
}

[data-theme="dark"] .te-header-menu-area.te-sticky_menu .te-main-menu ul li.te-active > a,
[data-theme="dark"] .te-header-menu-area.te-sticky_menu .te-main-menu ul li.active > a {
    color: var(--theme-accent) !important;
}

[data-theme="dark"] .te-header-menu-area.te-sticky_menu .te-main-menu ul li a:hover:after {
    color: var(--theme-accent) !important;
}

/* ========================================
   Banner Counter Card - Light Mode
   ======================================== */

/* Light Mode - Banner Counter "+10" Text Color (Black) */
.banner-area .counter-card .te-counter-wrapper,
.banner-area .counter-card .te-counter-wrapper .counter,
.banner-area .counter-card .te-counter-wrapper span {
    color: #000000 !important;
}

/* Header CTA / icon colors for light mode (avoid dark hard-codes from style.css) */
/* Make .te-header-btn and all children transparent in both modes */
.te-header-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    overflow: visible !important;
}

/* Make all direct and indirect children transparent */
.te-header-btn *,
.te-header-btn .te-theme-switcher,
.te-header-btn .te-theme-switcher *,
.te-header-btn .te-theme-toggle-btn,
.te-header-btn .te-cta-btn,
.te-header-btn .te-search-btn,
.te-header-btn .te-search-btn *,
.te-header-btn .te-icon,
.te-header-btn .te-icon * {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure theme toggle button is transparent */
.te-header-btn .te-theme-toggle-btn {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.te-header-btn .te-theme-toggle-btn:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* Icon colors for light mode */
.te-header-btn .te-icon {
    color: var(--theme-text-primary) !important;
}

.te-header-btn .te-icon:hover {
    color: var(--theme-accent) !important;
}

/* ========================================
   Header CTA - "Book a Demo" button only
   Keep container transparent, color only behind text
   ======================================== */

/* Light & Dark - base button styling */
.header-area .te-header-btn .te-cta-btn {
    background-color: #da4c9c !important;
    background: #da4c9c !important;
    color: #ffffff !important;
    padding: 10px 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    box-shadow: 0 6px 14px rgba(218, 76, 156, 0.35);
    position: relative;
    z-index: 1;
}

.header-area .te-header-btn .te-cta-btn i {
    color: inherit !important;
}

.header-area .te-header-btn .te-cta-btn:hover,
.header-area .te-header-btn .te-cta-btn:focus {
    background-color: #c04388 !important;
    background: #c04388 !important;
    box-shadow: 0 8px 18px rgba(218, 76, 156, 0.45);
    transform: translateY(-1px);
    outline: none;
}

/* Ensure dark mode keeps the same CTA color (only text contrast is important) */
[data-theme="dark"] .header-area .te-header-btn .te-cta-btn {
    background-color: #da4c9c !important;
    background: #da4c9c !important;
    color: #ffffff !important;
}

[data-theme="dark"] .header-area .te-header-btn .te-cta-btn:hover,
[data-theme="dark"] .header-area .te-header-btn .te-cta-btn:focus {
    background-color: #c04388 !important;
    background: #c04388 !important;
}

/* ========================================
   Mobile Menu Burger Icon - Light Mode
   ======================================== */

/* Light Mode - Burger Menu Icon Color (Black for visibility) */
.te-mobile-menu-bar a,
.te-mobile-menu-bar .te-mobile-menu-toggle-btn {
    color: #000000 !important;
}

.te-mobile-menu-bar a i,
.te-mobile-menu-bar .te-mobile-menu-toggle-btn i {
    color: #000000 !important;
}

/* ========================================
   Marquee Component - Light Mode
   ======================================== */

/* Light Mode - Marquee Title Text Color (Black) */
.te-marquee-area .single-te-marquee .te-marquee-title {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    -webkit-text-stroke-width: 0 !important;
}

/* Light Mode - Marquee Even Children (Override transparent fill) */
.te-marquee-area .te-marquee-wrapper.first-te-marquee .single-te-marquee:nth-child(even) .te-marquee-title {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    -webkit-text-stroke-width: 0 !important;
}

/* Light Mode - Second Marquee Wrapper */
.te-marquee-area .te-marquee-wrapper.second-te-marquee .single-te-marquee .te-marquee-title span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    -webkit-text-stroke-width: 0 !important;
}

/* ========================================
   First Marquee Wrapper - Spacing Adjustments
   ======================================== */

/* Reduce space above first marquee area to half */
.te-marquee-area:has(.first-te-marquee) {
    padding-top: 60px !important;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .te-marquee-area:has(.first-te-marquee) {
        padding-top: 40px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .te-marquee-area:has(.first-te-marquee) {
        padding-top: 50px !important;
    }
}

/* Add space after first marquee wrapper */
.te-marquee-wrapper.first-te-marquee {
    margin-bottom: 60px !important;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .te-marquee-wrapper.first-te-marquee {
        margin-bottom: 40px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .te-marquee-wrapper.first-te-marquee {
        margin-bottom: 50px !important;
    }
}

/* ========================================
   Second Marquee Wrapper - Spacing Adjustments
   ======================================== */

/* Reduce space above second marquee area to half */
.te-marquee-area:has(.second-te-marquee) {
    padding-top: 60px !important;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .te-marquee-area:has(.second-te-marquee) {
        padding-top: 40px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .te-marquee-area:has(.second-te-marquee) {
        padding-top: 50px !important;
    }
}

/* Add space after second marquee wrapper */
.te-marquee-wrapper.second-te-marquee {
    margin-bottom: 60px !important;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .te-marquee-wrapper.second-te-marquee {
        margin-bottom: 40px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .te-marquee-wrapper.second-te-marquee {
        margin-bottom: 50px !important;
    }
}

/* ========================================
   Sidebar (Offcanvas Menu) - Light Mode
   ======================================== */

/* Light Mode - Sidebar background + base text */
[data-theme="light"] .te-menu-sidebar-area {
    background-color: var(--theme-bg-primary) !important;
    color: #000000 !important;
}

/* Light Mode - Sidebar content text to black */
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-content,
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-single-widget,
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-single-widget .te-menu-sidebar-title,
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-single-widget .about-info,
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-single-widget .about-info p,
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-single-widget .te-header-contact-info span,
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-single-widget .te-header-contact-info span a {
    color: #000000 !important;
}

/* Light Mode - Sidebar social icons use accent color */
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-single-widget .te-social-profile a {
    color: var(--theme-accent) !important;
}

[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-single-widget .te-social-profile a:hover {
    color: var(--theme-accent-hover) !important;
}

/* Light Mode - Sidebar close button styled with accent */
[data-theme="light"] .te-menu-sidebar-area .te-menu-sidebar-close .te-menu-sidebar-close-btn {
    background-color: var(--theme-accent) !important;
    color: #14203A !important;
}

.te-header-btn .te-cta-btn {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--theme-text-primary) !important;
}

.te-header-btn .te-cta-btn:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--theme-accent) !important;
}

/* Cards and Sections */
.te-about-info-card,
.te-info-card,
.latest-service-card,
.portfolio-item,
.te-accordion-list-item {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ========================================
   Our Services Section - Light Mode
   Service Items Background (White)
   ======================================== */

/* Light Mode - Service Cards Background (White) */
.latest-service-area .latest-service-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.latest-service-area .te-info-card,
.feature-area .te-info-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-clip: padding-box !important;
}

/* ========================================
   World-Class Leadership Team Section
   Light Mode Styling
   ======================================== */

/* Light Mode - Leadership Team Text Color (Black) */
/* Targets the specific text content in the World-Class Leadership Team section */
.te-about-info-card .te-about-info-content .te-list-item-wrapper .te-list-item .text {
    color: #000000 !important;
}

/* Light Mode - Leadership Team Section Border (White/Invisible) */
/* Removes or makes border invisible by setting it to white */
.te-about-info-card {
    border-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* ========================================
   Our Portfolio Section - Light Mode
   Project Title Hover Background (White)
   ======================================== */

/* Light Mode - Portfolio Project Title Hover Background (White) */
/* Targets the content container that appears on hover, containing the project title */
.portfolio-item:hover .content-wrapper .content,
.portfolio-column-in-three .portfolio-item:hover .content-wrapper .content {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Text Colors */
h1, h2, h3, h4, h5, h6,
.title,
.te-section-title .title,
p,
.text {
    color: var(--theme-text-primary);
}

.te-section-title p,
.desc,
.text-secondary {
    color: var(--theme-text-secondary);
}

/* Links - Light Mode (Default): Black color */
/* Light Mode - All links default to black */
a {
    color: #000000 !important;
}

a:hover,
a:focus {
    color: var(--theme-accent) !important;
}

a:focus {
    color: var(--theme-accent) !important;
}

/* Dark Mode - Links use accent color */
[data-theme="dark"] a {
    color: var(--theme-accent) !important;
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: var(--theme-accent-hover) !important;
}

[data-theme="dark"] a:focus {
    color: var(--theme-accent) !important;
}

/* Buttons (keep original theme style, but ensure light colors are consistent) */
.te-theme-btn,
input.te-theme-btn {
    color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    background-color: transparent !important;
}

.te-theme-btn:hover,
input.te-theme-btn:hover {
    background-color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px var(--theme-shadow);
}

.submit-btn {
    background-color: var(--theme-accent) !important;
    color: #14203A !important;
}

.submit-btn:hover {
    background-color: var(--theme-accent-hover) !important;
    color: #14203A !important;
    box-shadow: 0 5px 15px var(--theme-shadow);
}

/* Footer */
.footer {
    background-color: var(--theme-bg-secondary);
    border-top: 1px solid var(--theme-border);
}

.footer p,
.footer h3 {
    color: var(--theme-text-primary);
}

/* Light Mode - Footer links black */
.footer a {
    color: #000000 !important;
}

/* ========================================
   Footer Address & Email - Light Mode
   ======================================== */

/* Light Mode - Footer Address Text (Black) - Match style.css selectors exactly */
.te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text {
    color: #000000 !important;
}

.te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text span {
    color: #000000 !important;
}

.te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text p {
    color: #000000 !important;
}

/* Light Mode - Footer Email Address Text (Black) - Match style.css selectors exactly */
.te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text a {
    color: #000000 !important;
}

.te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text a span {
    color: #000000 !important;
}

/* Additional coverage with .footer prefix for extra specificity */
.footer .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text {
    color: #000000 !important;
}

.footer .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text span {
    color: #000000 !important;
}

.footer .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text a {
    color: #000000 !important;
}

.footer .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text a span {
    color: #000000 !important;
}

/* Direct selectors for maximum coverage */
.footer .footer-contact .contact-text {
    color: #000000 !important;
}

.footer .footer-contact .contact-text span {
    color: #000000 !important;
}

.footer .footer-contact .contact-text a[href^="mailto:"] {
    color: #000000 !important;
}

.footer .footer-contact .contact-text a[href^="mailto:"] span {
    color: #000000 !important;
}

/* Dark Mode - Footer links use theme text color */
[data-theme="dark"] .footer a {
    color: var(--theme-text-primary) !important;
}

/* Dark Mode - Footer Address & Email (Preserve White) - Match style.css selectors */
[data-theme="dark"] .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text {
    color: #ffffff !important;
}

[data-theme="dark"] .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text span,
[data-theme="dark"] .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text p,
[data-theme="dark"] .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text a {
    color: #ffffff !important;
}

[data-theme="dark"] .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text a span {
    color: #ffffff !important;
}

/* Additional dark mode coverage with .footer prefix */
[data-theme="dark"] .footer .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text,
[data-theme="dark"] .footer .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text span,
[data-theme="dark"] .footer .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text a,
[data-theme="dark"] .footer .te-footer-widget .te-footer-widget-contact .footer-contact ul li .contact-text a span {
    color: #ffffff !important;
}

[data-theme="dark"] .footer .footer-contact .contact-text,
[data-theme="dark"] .footer .footer-contact .contact-text span,
[data-theme="dark"] .footer .footer-contact .contact-text a[href^="mailto:"],
[data-theme="dark"] .footer .footer-contact .contact-text a[href^="mailto:"] span {
    color: #ffffff !important;
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--theme-accent);
    outline: none;
}

/* Accordion */
.te-accordion-head {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
}

/* ========================================
   FAQ Accordion Section - Light Mode
   ======================================== */

/* Light Mode - FAQ Section Background (White) */
.faq-area .accordion-wrapper.style-2 {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Light Mode - FAQ Accordion Items Background (White) */
.faq-area .accordion-wrapper.style-2 .te-accordion-list-item {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Light Mode - FAQ Accordion Head Background (White) */
.faq-area .accordion-wrapper.style-2 .te-accordion-list-item .te-accordion-head {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Light Mode - FAQ Section Title Text (Black) */
.faq-area .accordion-wrapper.style-2 .te-section-title .short-title,
.faq-area .accordion-wrapper.style-2 .te-section-title .title {
    color: #000000 !important;
}

/* Light Mode - FAQ Accordion Title Text (Black) */
.faq-area .accordion-wrapper.style-2 .te-accordion-list-item .te-accordion-head .te-accordion-title {
    color: #000000 !important;
}

/* Light Mode - FAQ Accordion Body Text (Black) */
.faq-area .accordion-wrapper.style-2 .te-accordion-list-item .te-accordion-body,
.faq-area .accordion-wrapper.style-2 .te-accordion-list-item .te-accordion-body p {
    color: #000000 !important;
}

/* ========================================
   Dark mode overrides (only when toggled)
   ======================================== */

[data-theme="dark"] html,
[data-theme="dark"] body {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .title,
[data-theme="dark"] .te-section-title .title {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] small,
[data-theme="dark"] .desc,
[data-theme="dark"] .te-section-title p,
[data-theme="dark"] .te-post-meta,
[data-theme="dark"] .te-post-meta span {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .te-header-btn {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border: 1px solid transparent !important;
}

/* Make all direct and indirect children transparent in dark mode */
[data-theme="dark"] .te-header-btn *,
[data-theme="dark"] .te-header-btn .te-theme-switcher,
[data-theme="dark"] .te-header-btn .te-theme-switcher *,
[data-theme="dark"] .te-header-btn .te-theme-toggle-btn,
[data-theme="dark"] .te-header-btn .te-search-btn,
[data-theme="dark"] .te-header-btn .te-search-btn *,
[data-theme="dark"] .te-header-btn .te-icon,
[data-theme="dark"] .te-header-btn .te-icon * {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure theme toggle button is transparent in dark mode */
[data-theme="dark"] .te-header-btn .te-theme-toggle-btn {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

[data-theme="dark"] .te-header-btn .te-theme-toggle-btn:hover {
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="dark"] .te-header-btn .te-icon {
    color: #ffffff !important;
}

[data-theme="dark"] .te-header-btn .te-icon:hover {
    color: var(--theme-accent) !important;
}

[data-theme="dark"] .te-header-btn .te-cta-btn {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

[data-theme="dark"] .te-header-btn .te-cta-btn:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--theme-accent) !important;
}

/* Dark Mode - Burger Menu Icon Color (White for visibility on dark background) */
[data-theme="dark"] .te-mobile-menu-bar a,
[data-theme="dark"] .te-mobile-menu-bar .te-mobile-menu-toggle-btn {
    color: #ffffff !important;
}

[data-theme="dark"] .te-mobile-menu-bar a i,
[data-theme="dark"] .te-mobile-menu-bar .te-mobile-menu-toggle-btn i {
    color: #ffffff !important;
}

/* Dark Mode - Banner Counter "+10" Text Color (White) */
[data-theme="dark"] .banner-area .counter-card .te-counter-wrapper,
[data-theme="dark"] .banner-area .counter-card .te-counter-wrapper .counter,
[data-theme="dark"] .banner-area .counter-card .te-counter-wrapper span {
    color: #ffffff !important;
}

/* Dark Mode - Service Cards Background (Preserve Original Dark Styling) */
[data-theme="dark"] .latest-service-area .latest-service-card {
    background: linear-gradient(110deg, rgba(40, 40, 40, 0.29) -0.9%, rgba(77, 77, 77, 0.21) 101.13%) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .latest-service-area .te-info-card,
[data-theme="dark"] .feature-area .te-info-card {
    background: linear-gradient(to right, #060606, #060606), linear-gradient(to right, rgba(254, 127, 221, 0.4), #060606) !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
}

/* Dark Mode - Marquee Title Text Color (Preserve White) */
[data-theme="dark"] .te-marquee-area .single-te-marquee .te-marquee-title {
    color: #ffffff !important;
}

[data-theme="dark"] .te-marquee-area .te-marquee-wrapper.first-te-marquee .single-te-marquee:nth-child(even) .te-marquee-title {
    color: #ffffff !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke-width: 1px !important;
}

[data-theme="dark"] .te-marquee-area .te-marquee-wrapper.second-te-marquee .single-te-marquee .te-marquee-title span {
    color: #ffffff !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke-width: 1px !important;
}

/* Dark Mode - FAQ Accordion Section (Preserve Original Dark Styling) */
[data-theme="dark"] .faq-area .accordion-wrapper.style-2 {
    background-color: #121212 !important;
    background: #121212 !important;
}

[data-theme="dark"] .faq-area .accordion-wrapper.style-2 .te-accordion-list-item {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .faq-area .accordion-wrapper.style-2 .te-accordion-list-item .te-accordion-head {
    background-color: transparent !important;
    background: transparent !important;
}

[data-theme="dark"] .faq-area .accordion-wrapper.style-2 .te-section-title .short-title,
[data-theme="dark"] .faq-area .accordion-wrapper.style-2 .te-section-title .title {
    color: #ffffff !important;
}

[data-theme="dark"] .faq-area .accordion-wrapper.style-2 .te-accordion-list-item .te-accordion-head .te-accordion-title {
    color: #ffffff !important;
}

[data-theme="dark"] .faq-area .accordion-wrapper.style-2 .te-accordion-list-item .te-accordion-body,
[data-theme="dark"] .faq-area .accordion-wrapper.style-2 .te-accordion-list-item .te-accordion-body p {
    color: #ffffff !important;
}

/* Dark Mode - Leadership Team Section (Preserve Original Styling) */
[data-theme="dark"] .te-about-info-card .te-about-info-content .te-list-item-wrapper .te-list-item .text {
    color: #ffffff !important;
}

[data-theme="dark"] .te-about-info-card {
    border-color: var(--theme-border) !important;
    border: 1px solid var(--theme-border) !important;
}

/* Dark Mode - Portfolio Project Title Hover Background (Preserve Original Dark Styling) */
[data-theme="dark"] .portfolio-item:hover .content-wrapper .content,
[data-theme="dark"] .portfolio-column-in-three .portfolio-item:hover .content-wrapper .content {
    background-color: #121212d6 !important;
    background: #121212d6 !important;
}

/* ========================================
   Contact Us Page - Dark Mode
   Preserve Original Dark Styling
   ======================================== */

/* Dark Mode - Contact Form Area (Preserve Original Dark Styling) */
[data-theme="dark"] .contact-form-area {
    background-color: var(--theme-bg-primary) !important;
    background: var(--theme-bg-primary) !important;
}

/* Dark Mode - Contact Info Section (Preserve Original Dark Styling) */
[data-theme="dark"] .single-contact-info,
[data-theme="dark"] .single-contact-info .contact-info-inner {
    background-color: transparent !important;
    background: transparent !important;
}

/* Dark Mode - Contact Info Text Colors (White) */
[data-theme="dark"] .single-contact-info .contact-info-inner .title-wrapper,
[data-theme="dark"] .single-contact-info .contact-info-inner .title-wrapper .title,
[data-theme="dark"] .single-contact-info .contact-info-inner .content-wrapper,
[data-theme="dark"] .single-contact-info .contact-info-inner .content-wrapper p {
    color: #ffffff !important;
}

/* Dark Mode - Social Media Links (Accent Color) */
[data-theme="dark"] .single-contact-info .contact-info-inner .content-wrapper .social-link a,
[data-theme="dark"] .single-contact-info .contact-info-inner .content-wrapper .social-link a i {
    color: var(--theme-accent) !important;
}

[data-theme="dark"] .single-contact-info .contact-info-inner .content-wrapper .social-link a:hover,
[data-theme="dark"] .single-contact-info .contact-info-inner .content-wrapper .social-link a:hover i {
    color: var(--theme-accent-hover) !important;
}

/* Dark Mode - Comment Form Section (Preserve Original Dark Styling) */
[data-theme="dark"] .comment-respond {
    background-color: transparent !important;
    background: transparent !important;
}

/* Dark Mode - Comment Form Text Colors (White) */
[data-theme="dark"] .comment-respond .title,
[data-theme="dark"] .comment-respond h2.title,
[data-theme="dark"] .comment-respond .te-comment-form,
[data-theme="dark"] .comment-respond .te-comment-form label {
    color: #ffffff !important;
}

/* Dark Mode - Form Input Fields (Dark Background, White Text) */
[data-theme="dark"] .comment-respond .te-comment-form input[type="text"],
[data-theme="dark"] .comment-respond .te-comment-form input[type="email"],
[data-theme="dark"] .comment-respond .te-comment-form input[type="tel"],
[data-theme="dark"] .comment-respond .te-comment-form textarea,
[data-theme="dark"] .te-contacts-name input,
[data-theme="dark"] .te-contacts-email input,
[data-theme="dark"] .te-contacts-message textarea {
    background-color: var(--theme-card-bg) !important;
    background: var(--theme-card-bg) !important;
    color: #ffffff !important;
    border-color: var(--theme-border) !important;
}

/* Dark Mode - Form Input Placeholders (Light Gray) */
[data-theme="dark"] .comment-respond .te-comment-form input[type="text"]::placeholder,
[data-theme="dark"] .comment-respond .te-comment-form input[type="email"]::placeholder,
[data-theme="dark"] .comment-respond .te-comment-form input[type="tel"]::placeholder,
[data-theme="dark"] .comment-respond .te-comment-form textarea::placeholder,
[data-theme="dark"] .te-contacts-name input::placeholder,
[data-theme="dark"] .te-contacts-email input::placeholder,
[data-theme="dark"] .te-contacts-message textarea::placeholder {
    color: #cccccc !important;
    opacity: 1 !important;
}

/* Dark Mode - Form Input Focus States */
[data-theme="dark"] .comment-respond .te-comment-form input[type="text"]:focus,
[data-theme="dark"] .comment-respond .te-comment-form input[type="email"]:focus,
[data-theme="dark"] .comment-respond .te-comment-form input[type="tel"]:focus,
[data-theme="dark"] .comment-respond .te-comment-form textarea:focus,
[data-theme="dark"] .te-contacts-name input:focus,
[data-theme="dark"] .te-contacts-email input:focus,
[data-theme="dark"] .te-contacts-message textarea:focus {
    background-color: var(--theme-card-bg) !important;
    color: #ffffff !important;
    border-color: var(--theme-accent) !important;
    outline: none !important;
}

/* ========================================
   Contact Us Page - Light Mode
   Background & Text Colors
   ======================================== */

/* Light Mode - Contact Form Area Background (White) */
.contact-form-area {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Light Mode - Contact Info Section Background (White) */
.single-contact-info,
.single-contact-info .contact-info-inner {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Light Mode - Contact Info Text Colors (Black) */
.single-contact-info .contact-info-inner .title-wrapper,
.single-contact-info .contact-info-inner .title-wrapper .title,
.single-contact-info .contact-info-inner .content-wrapper,
.single-contact-info .contact-info-inner .content-wrapper p {
    color: #000000 !important;
}

/* ========================================
   About Image Spacing
   Decrease right margin of main about image container
   ======================================== */
/* The "gap" is usually from the wrapper/column layout; align the whole block to the right */
.about-us-area .te-about-image-card .te-main-img-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.about-us-area .te-about-image-card .te-main-img-wrapper .te-main-img-inner {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Light Mode - Social Media Links (Black) */
.single-contact-info .contact-info-inner .content-wrapper .social-link a,
.single-contact-info .contact-info-inner .content-wrapper .social-link a i {
    color: #000000 !important;
}

.single-contact-info .contact-info-inner .content-wrapper .social-link a:hover,
.single-contact-info .contact-info-inner .content-wrapper .social-link a:hover i {
    color: var(--theme-accent) !important;
}

/* Light Mode - Comment Form Section Background (White) */
.comment-respond {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Light Mode - Comment Form Text Colors (Black) */
.comment-respond .title,
.comment-respond h2.title,
.comment-respond .te-comment-form,
.comment-respond .te-comment-form label {
    color: #000000 !important;
}

/* Light Mode - Form Input Fields (White Background, Black Text) */
.comment-respond .te-comment-form input[type="text"],
.comment-respond .te-comment-form input[type="email"],
.comment-respond .te-comment-form input[type="tel"],
.comment-respond .te-comment-form textarea,
.te-contacts-name input,
.te-contacts-email input,
.te-contacts-message textarea {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Light Mode - Form Input Placeholders (Dark Gray for Visibility) */
.comment-respond .te-comment-form input[type="text"]::placeholder,
.comment-respond .te-comment-form input[type="email"]::placeholder,
.comment-respond .te-comment-form input[type="tel"]::placeholder,
.comment-respond .te-comment-form textarea::placeholder,
.te-contacts-name input::placeholder,
.te-contacts-email input::placeholder,
.te-contacts-message textarea::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

/* Light Mode - Contact cards & form borders pure black */
.single-contact-info,
.single-contact-info .contact-info-inner,
.comment-respond .te-comment-form input[type="text"],
.comment-respond .te-comment-form input[type="email"],
.comment-respond .te-comment-form input[type="tel"],
.comment-respond .te-comment-form textarea,
.te-contacts-name input,
.te-contacts-email input,
.te-contacts-message textarea {
    border-color: #000000 !important;
}

/* Light Mode - Form Input Focus States */
.comment-respond .te-comment-form input[type="text"]:focus,
.comment-respond .te-comment-form input[type="email"]:focus,
.comment-respond .te-comment-form input[type="tel"]:focus,
.comment-respond .te-comment-form textarea:focus,
.te-contacts-name input:focus,
.te-contacts-email input:focus,
.te-contacts-message textarea:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: var(--theme-accent) !important;
    outline: none !important;
}

/* Selection highlight */
::-moz-selection {
    background: var(--theme-accent);
    text-shadow: none;
    color: #fff;
}

::selection {
    background: var(--theme-accent);
    text-shadow: none;
    color: #fff;
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}