/*
 Theme Name:   Phlox Child
 Theme URI:    https://phlox.pro/
 Description: Child theme for Phlox
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     phlox
 Version:      1.0.0
 Text Domain:  phlox-child
*/

/* Add your custom CSS below */

/* Marquee outer safety */
/* Marquee wrapper */
.gsap-marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Marquee track */
.gsap-marquee {
  display: flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
}

/* Each heading */
.gsap-marquee > * {
  flex: 0 0 auto; /* 🔥 stops shrinking */
  white-space: nowrap;
}

/* 🌙 DARK MODE Toggle Button */
@media (max-width: 575px) {
  .slider {
    width: 50px !important;
    height: 20px !important;
  }
  .slider::before {
    width: 16px !important;
    height: 16px !important;
  }
  .theme-switch {
    right: -5px !important;
  }
}

/* 🌙 DARK MODE GLOBAL COLORS */
body.dark-mode {
  --e-global-color-primary: #0070c0;
  --e-global-color-secondary: #7a8cff;
  --e-global-color-text: #45556c;
  --e-global-color-accent: #ed1c24;
  --e-global-color-b1f8b6c: #ffffff;
  --e-global-color-a1e41cd: #080808;

  background-color: #121212;
}

/* Only main layout backgrounds */
body.dark-mode .site,
body.dark-mode .site-content,
body.dark-mode .elementor,
body.dark-mode .elementor-section {
  /* background-color: #121212 !important; */
}

/* Inner containers transparent ठेव */
body.dark-mode .elementor-container,
body.dark-mode .elementor-column,
body.dark-mode .elementor-widget-wrap {
  background-color: transparent !important;
}

/* Cards / boxes */
body.dark-mode .elementor-widget-container {
  /* background-color: #1e1e1e !important; */
}

/*Card Dark Mode */
body.dark-mode .card {
  background-color: #e2dfdf47 !important;
  border: 2px solid #c7d6df !important;
}
body.dark-mode .card:hover {
  background-color: #0070c012 !important;
  border: 2px solid #8ab7d3 !important;
}

/* Project sectionDark Mode */
body.dark-mode .projects {
  background-color: #f1f5f9 !important;
}
/* feature sectionDark Mode */
body.dark-mode .feature {
  background-color: #ffffff !important;
}
/* feature sectionDark Mode */
body.dark-mode .counter {
  background-color: #f1f5f9 !important;
}

body.dark-mode .elementor-view-stacked .elementor-icon {
  fill: #ffffff;
}