/* ================= Default Light Theme ================= */
:root {
  --background-color: #ffffff;
  --text-color: #212529;        /* general text color */
  --primary-color: #007bff;
  --main-section-bg: #ebebeb;

  /* Buttons */
  --button-bg: #007bff;
  --button-text-color: #ffffff;

  /* Header buttons */
  --btn-primary-bg: #000000;    /* black */
  --btn-primary-hover: #d9a73a; /* yellow */

  /* Section backgrounds */
  --section-bg-odd: #f9f9f9;    /* Light grey for odd sections */
  --section-bg-even: #ffffff;   /* White for even sections */

  --section-title-color: #000;  /* headers color */
  --section-text-color: #555;   /* subheading/content color */

  --tab-active-bg: #ffffff;       /* background for active tab */
  --tab-active-text: #000000;     /* text color for active tab */
  --tab-bg: #ebebeb;              /* inactive tab background */
  --tab-text: #000000;            /* inactive tab text */
  --scrolling-card: #ffffff;
  --soultion-card: #faf7f5;
  --text-scroll: #000000;
  --toggler-border: #595c5f
}

/* Dark theme overrides */
[data-theme="dark"] {
  --background-color: #121212;
  --text-color: #aaa;           /* general text color */
  --primary-color: #0d6efd;
  --main-section-bg: #1f1d1c;
  /* Buttons */
  --button-bg: #0d6efd;
  --button-text-color: #ffffff;

  /* Header buttons */
  --btn-primary-bg: #d9a73a;    /* yellow */
  --btn-primary-hover: #ffffff; /* white */

  /* Section backgrounds */
  --section-bg-odd: #1e1e1e;    /* Dark grey for odd sections */
  --section-bg-even: #2a2a2a;   /* Slightly lighter dark grey for even sections */

  --section-title-color: #ffffff; /* headers white in dark mode */
  --section-text-color: #aaa;     /* subheading/content gray in dark mode */

  --tab-active-bg: #000000;
  --tab-active-text: #ffffff;
  --tab-bg: #1f1d1c;
  --tab-text:  #aaa;
  --scrolling-card: #191817;
  --soultion-card: #211e1d;
  --text-scroll: #ffffff;
  --toggler-border: #aaa;

}

/* Apply background color and text color based on the theme */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

/* Sections */
.section:nth-child(odd) {
  background-color: var(--section-bg-odd);
}

.section:nth-child(even) {
  background-color: var(--section-bg-even);
}

/* Headings in sections/cards */
.section-title,
.section-label,
h1, h2, h3, h4, h5, h6 {
  color: var(--section-title-color) !important;
  transition: color 0.3s ease;
}

/* Paragraphs or subtext */
.section-desc,
p,
li,
a,
.service-desc,
.service-card p {
  color: var(--section-text-color);
  transition: color 0.3s ease;
  font-size: 1.1rem;
}

/* Buttons */
button {
  background-color: var(--button-bg);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

button:hover {
  opacity: 0.9;
}

/* Dual-image swap (for big illustrations) */
.light-only {
  display: inline;
}

.dark-only {
  display: none;
}

[data-theme="dark"] .light-only {
  display: none;
}

[data-theme="dark"] .dark-only {
  display: inline;
}

/* Icon adjustment (for simple line icons) */
.skill-icon {
  transition: filter 0.3s ease;
}

html {
  overflow-x: hidden;
}

/* ========================== Light Theme ========================== */
[data-theme="light"] .btn-animate {
  background-color: var(--btn-primary-bg); 
  color: var(--button-text-color);       
}

[data-theme="light"] .btn-animate .theme-icon {
  filter: brightness(100%);
}

[data-theme="light"] .btn-animate:hover {
  background-color: var(--btn-primary-hover); 
  color: #000 !important;                     
}

[data-theme="light"] .btn-animate:hover .theme-icon {
  filter: brightness(0%); 
}

/* ========================== Dark Theme ========================== */
[data-theme="dark"] .btn-animate {
  background-color: var(--btn-primary-bg); 
  color: #000;                             
}

[data-theme="dark"] .btn-animate .theme-icon {
  filter: none; 
}

[data-theme="dark"] .btn-animate:hover {
  background-color: var(--btn-primary-hover); 
  color: #000 !important;                    
}

[data-theme="dark"] .btn-animate:hover .theme-icon {
  filter: none; 
}

/*Separator color for both themes */
:root {
  --benefit-divider: #ccc; 
}

[data-theme="dark"] {
  --benefit-divider: #666;
}


/* Hero Section Container */

[data-theme="light"] .hero-container-first, .hero-container-about  {
  background: #ffffff80;
  color: #ffffff; /* black text */
}

[data-theme="dark"] .hero-container-first, .hero-container-about {
  background: #191817;
  color: #fff; /* white text */
}

/* .hero-container-about{
margin-bottom: 40px; 
} */

/* .hero-container-about {
  padding-top: 60px;    
  padding-bottom: 60px; 
  margin-bottom: 40px;  
} */

.hero-container-about {
  padding: 50px 0px 40px 50px; 
  margin-bottom: 40px;
}

/* Responsive hero container */
@media (max-width: 768px) {
  .hero-container-about {
    padding: 30px 20px 30px 20px;
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .hero-container-about {
    padding: 20px 15px 20px 15px;
    margin-bottom: 20px;
  }
}

/* .hero-container-about {
  flex: 1 1 100%;
  max-width: 600px;
  margin-bottom: 30px;
  text-align: left;
} */

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color, #ffffff);
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

[data-theme="dark"] #preloader {
  background: var(--background-color, #121212);
}

#preloader::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 6px solid transparent;
  border-top-color: #ffc107;
  border-bottom-color: #ffc107;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Hide preloader when loaded */
#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* On first load hide the content preloader finishes */
body:not(.loaded) #header,
body:not(.loaded) #main-content,
body:not(.loaded) #footer {
  visibility: hidden;
  opacity: 0;
}

/* Show content after page loads */
body.loaded #header,
body.loaded #main-content,
body.loaded #footer {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}