:root {
  /* Light mode colors (default) */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F1EEE9;
  --bg-tertiary: #f8f8f8;
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --border-color: #cccccc;
  --accent-color: #1c2e58;
  --nav-bg: transparent;
  --card-bg: #FFFFFF;
  --footer-bg: #FFFFFF;
  --section-bg: #F1EEE9;
  --overlay-bg: rgba(0, 0, 0, 0.3);
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* Transition for smooth theme switching */
  --transition-speed: 0.3s;
}

.dark-mode {
  /* Dark mode colors */
  --bg-primary: #121212;
  --bg-secondary: #1E1E1E;
  --bg-tertiary: #2D2D2D;
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-tertiary: #999999;
  --border-color: #444444;
  --accent-color: #1c2e58;
  --nav-bg: rgba(18, 18, 18, 0.9);
  --card-bg: #1E1E1E;
  --footer-bg: #1E1E1E;
  --section-bg: #1A1A1A;
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Apply transitions for smooth theme switching */
body, 
nav, 
section, 
footer, 
.title, 
.text, 
.service-card, 
.project-card, 
.clients-card,
a, 
p, 
h1, h2, h3, h4, h5, h6,
.navbar-nav .nav-link,
.dropdown-menu,
.dropdown-item {
  transition: 
    background-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
    border-color var(--transition-speed) ease;
}

/* Theme-specific styles */
.dark-mode .tc-navbar-style1 {
  background-color: transparent;
}

.dark-mode .tc-navbar-style1.scrolled {
  background-color: rgba(18, 18, 18, 0.7) !important;
}

.dark-mode .tc-experience-style1,
.dark-mode .tc-services-style1,
.dark-mode .tc-process-style1,
.dark-mode .tc-testimonials-style1,
.dark-mode .tc-chat-style1 {
  background-color: var(--section-bg);
}

.dark-mode .service-card,
.dark-mode .project-card,
.dark-mode .clients-card {
  background-color: var(--card-bg);
}

.dark-mode .accordion-item .accordion-button {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Make text white in dark mode */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6,
.dark-mode p,
.dark-mode a,
.dark-mode span,
.dark-mode small,
.dark-mode strong,
.dark-mode em,
.dark-mode li,
.dark-mode i,
.dark-mode .text {
  color: var(--text-primary) !important;
}

/* Ensure any utility/class using color-orange1 renders light text in dark mode */
.dark-mode [class*="color-orange1"] { color: var(--text-primary) !important; }

.dark-mode .text.color-666,
.dark-mode p.color-666,
.dark-mode .fsz-14.color-666 {
  color: var(--text-secondary) !important;
}

/* Adjust borders in dark mode */
.dark-mode .service-card,
.dark-mode .footer-links,
.dark-mode .tc-footer-style1 .foot {
  border-color: var(--border-color);
}

/* Adjust icon colors */
.dark-mode .icon,
.dark-mode .service-card .icon {
  color: var(--accent-color);
}

/* Special handling for marquee text in dark mode */
.dark-mode .marq-slider a {
  -webkit-text-stroke: 1px var(--text-primary);
  color: transparent;
}

.dark-mode .marq-slider a:hover {
  color: var(--text-primary);
}

/* Navbar style adjustments for dark mode */
.dark-mode .navbar-dark .navbar-nav .nav-link {
  color: var(--text-primary);
}

.dark-mode .navbar-dark .navbar-nav .nav-link:hover, 
.dark-mode .navbar-dark .navbar-nav .nav-link.active {
  color: var(--text-primary);
}

.dark-mode .dropdown-menu {
  background-color: var(--bg-secondary);
}

.dark-mode .dropdown-item {
  color: var(--text-primary);
}

.dark-mode .dropdown-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

@media (max-width: 991px) {
  .dark-mode .tc-navbar-style1 {
    background-color: rgba(30, 30, 30, 0.8);
  }
}

/* Enhanced Services section dark mode styling */
.dark-mode .tc-services-style1 {
  background-image: none !important;
  background-color: var(--section-bg) !important;
  position: relative;
}

/* Remove the gradient effect that was causing the mismatch */
.dark-mode .tc-services-style1::before {
    z-index: 1;
    pointer-events: none;
}

/* Create a new transition effect that matches the experience section */
.dark-mode .tc-services-style1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

/* Add specific styling for the marquee slider to match experience section */
.dark-mode .tc-services-style1 .marq-slider {
  background-color: var(--bg-secondary);
  margin-top: 0;
  padding-top: 40px;
  position: relative;
  z-index: 2;
}

.dark-mode .tc-services-style1 .content {
  position: relative;
  z-index: 5;
}
.service-card {
  background-color: none !important;
}
.home-style1 .service-card {
  background-color: transparent !important;
  border: none !important;
  z-index: 3;
  position: relative;
  position: relative;
  background: rgb(255 255 255 / 46%) !important;
  background-color: rgb(255 255 255 / 46%) !important;

  height: 200px;
  width: 200px;
  padding: 20px;
  border-radius: 30px;
}


.dark-mode .tc-services-style1 .service-card {
  background-color: transparent !important;
  border: none !important;
  z-index: 3;
  position: relative;
  position: relative;
  background: rgb(0 0 0 / 35%) !important;
  height: 200px;
  width: 200px;
  padding: 20px;
  border-radius: 30px;
}

/* More targeted styling using data-theme attribute */
.tc-services-style1[data-theme="dark"] {
  background-image: none !important;
  background-color: var(--section-bg) !important;
  position: relative;
  z-index: 1;
}

.tc-services-style1[data-theme="dark"]::after {
  display: none;
}

.tc-services-style1[data-theme="dark"] .marq-slider {
  background-color: var(--bg-secondary);
  margin-top: 0;
  padding-top: 40px;
}

.dark-mode .tc-services-style1 .title {
  color: var(--text-primary);
}

.dark-mode .tc-services-style1 .marq-slider .swiper-slide a {
  -webkit-text-stroke: 1px var(--text-primary);
  color: transparent;
}

.dark-mode .tc-services-style1 .marq-slider .swiper-slide a:hover {
  color: var(--text-primary);
}

.dark-mode .tc-services-style1 .service-card {
  background-color: transparent;
  border-color: var(--border-color);
}

.dark-mode .tc-services-style1 .service-card h5 {
  color: var(--text-primary);
}

.dark-mode .tc-services-style1 .service-card .icon {
  color: var(--accent-color);
}

.dark-mode .tc-projects-style1 .projects .projects-content .float-cursor {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

/* Update all section backgrounds to be consistent in dark mode */
.dark-mode .tc-experience-style1,
.dark-mode .tc-services-style1,
.dark-mode .tc-projects-style1,
.dark-mode .tc-process-style1,
.dark-mode .tc-testimonials-style1,
.dark-mode .tc-chat-style1 {
  background-color: var(--bg-secondary) !important;
}

/* Ensure proper background color for projects section */
.dark-mode .tc-projects-style1 {
  background-image: none !important;
  position: relative;
  z-index: 1;
}

/* Ensure proper background color for process/map section */
.dark-mode .tc-process-style1 {
  background-image: none !important;
  position: relative;
  z-index: 1;
}

/* Make sure testimonials section matches too */
.dark-mode .tc-testimonials-style1 {
  background-image: none !important;
  position: relative;
  z-index: 1;
}

/* Ensure dark mode targets with data-theme attribute for all sections */
[data-theme="dark"].tc-projects-style1,
[data-theme="dark"].tc-process-style1,
[data-theme="dark"].tc-testimonials-style1 {
  background-color: var(--bg-secondary) !important;
  background-image: none !important;
} 

.pressply img{
    height: 20px;
}