@import "tailwindcss";

/* Opt into class strategy for dark mode in v4 */
@custom-variant dark (&:where(.dark, .dark *));



 .text-indigo-600 {
    color: oklch(0.38 0.02 70.04);
  }

  /*.text-gray-900{
    color: #b2852d;
  }*/


 :root, :host{
      --color-indigo-500: oklch(0.26 0.01 0);
    --color-indigo-600: oklch(0.25 0.01 0);
 }

 .skills-container {
  /* Basic styling for the container */
 margin: auto;
}

.skill-bar {
  /* Styling for individual skill sections */
  margin-bottom: 15px; /* Space between skill bars */
}

.skill-info span {
  /* Styling for the skill name text */
   margin: auto;
}

/* === Progress Bar Wrapper === */
.progress-bar-wrapper {
  background-color: #e5e7eb; /* Tailwind gray-200 */
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* === Progress Bar === */
.progress-bar-wrapper {
  background-color: #ddd; /* Background for the progress track */
  height: 6px; /* Height of the progress bar */
  border-radius: 5px;
  overflow: hidden; /* Ensures the inner bar doesn't overflow rounded corners */
}

.progress-bar {
  background-color: #4CAF50; /* Color of the progress bar */
  height: 100%;
  width: 0; /* Starts at 0 for animation */
  transition: width 2s ease-in-out; /* Smooth animation for width change */
  border-radius: 5px;
}

.dark .progress-bar { background-color: #3acecc; }



/* Specific classes for different skill levels/colors */
.html-progress {
  background-color: #83786e;
}

/*#html-progressbar1{
    background-color: #e86d43
}

#html-progressbar2{
    background-color: #4299d3;

}*/

/* Additional CSS for animation (e.g., using @keyframes) */
.skills-container:hover .html-progress {
  width: 90%; /* Animate on hover or on page load with JavaScript */
}

.bg-indigo-600 {
    background-color: #554c43;
}
.dark .bg-indigo-600 {
    background-color: #3acecc;
    color: #111827;
}

.app-logos{
    width: 35%;
}

.outer-box{
    margin-top: -3%;
}

/* Hides the big play button overlay in Chrome/Safari */
.no-overlay::-webkit-media-controls {
  display: none !important;
}

.no-overlay::-webkit-media-controls-enclosure {
  display: none !important;
}

/* Firefox-specific */
.no-overlay::-moz-media-controls {
  display: none !important;
}

/* Legacy logo classes - kept for backwards compatibility */
.adjust-logo{
    width: 66%;
    padding: 10px;
}

.adjust-logo-2{
    width: 76%;
    padding: 10px;
}

.dark\:\!text-white {
    &:where(.dark, .dark *) {
        color: #50cccb !important;
    }
}

.appbox1{
  position: relative;
       margin-top: 3%;
}

/* Tech Logo Carousel Animation */
.tech-logo {
  transform-origin: center;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, filter 0.5s ease-in-out;
  filter: drop-shadow(0 0 0 transparent);
}

.tech-logo[style*="opacity: 1"] {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.15));
}

#tech-name {
  transition: opacity 0.3s ease-in-out;
}

.icon-service {
  color: #83786e;
}
.dark .icon-service {
  color: #3acecc;
}