/* Light Theme Base */
.light-mode {
  --primary: #0F766E;
  --secondary: #E5E7EB;
  --glow: rgba(14, 165, 233, 0.5);
  background: #F9FAFB;
  color: #111827;
}

/* Scrollbar */
.light-mode ::-webkit-scrollbar-track {
  background: #E5E7EB;
}
.light-mode ::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #0F766E, #F59E0B);
}
.light-mode ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #F59E0B, #0F766E);
}

/* Header */
.light-mode header {
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.light-mode .navlogo {
  color: #0F766E;
}
.light-mode nav ul li a {
  color: #111827;
}
.light-mode nav ul li a:hover {
  color: #F59E0B;
  background-color: #E5E7EB;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.light-mode .toggle-btn {
  color: #111827;
}

/* Sidebar */
.light-mode .sidebar {
  background-color: #F3F4F6;
}
.light-mode .sidebar a {
  color: #111827;
}
.light-mode .sidebar a:hover {
  color: #F59E0B;
}
.light-mode .overlay {
  background: rgba(255,255,255,0.6);
}

/* Sub-navbar */
.light-mode .sub-navbar {
  background-color: #E5E7EB;
  color: #111827;
}
.light-mode .sub-navbar .sub-links li:hover {
  background-color: #D1D5DB;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.light-mode .sub-navbar .sub-links li a {
  color: #111827;
}
.light-mode .sub-navbar .sub-links li a:hover,
.light-mode .sub-navbar button:hover {
  color: #F59E0B;
}

/* Hero */
.light-mode .hero::after {
  background-blend-mode: lighten;
}
.light-mode .hero h1,
.light-mode .typing {
  color: #111827;
}
.light-mode .buttons button {
  background: #0F766E;
  color: white;
}
.light-mode .buttons button:hover {
  background: #F59E0B;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* Headings */
.light-mode .section-heading,
.light-mode .services-heading,
.light-mode .education-section h3 {
  color: #0F766E;
}

/* Stats Boxes */
.light-mode .stat-box {
  background: white;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.1);
}
.light-mode .stat-box h2 {
  color: #0F766E;
}
.light-mode .stat-box p {
  color: #374151;
}

/* Footer */
.light-mode footer {
  background: #F3F4F6;
  color: #374151;
}
.light-mode .social-icons a {
  color: #111827;
}
.light-mode .social-icons a:hover {
  color: #F59E0B;
}

/* Services */
.light-mode .service-card {
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.1);
}
.light-mode .service-card i,
.light-mode .service-card img {
  color: #0F766E;
}
.light-mode .service-card h3 {
  color: #111827;
}
.light-mode .service-card p {
  color: #374151;
}

/* Testimonials */
.light-mode .testimonial-box {
  background: #FFFFFF;
}
.light-mode .testimonial-box:hover {
  background: #E5E7EB;
}
.light-mode .name-user strong {
  color: #111827;
}
.light-mode .name-user span,
.light-mode .client-comment p {
  color: #4B5563;
}
.light-mode .reviews {
  color: #F59E0B;
}

/* Education */
.light-mode .education-item {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.1);
}
.light-mode .education-item:hover {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
}
.light-mode .education-item h4 {
  color: #0F766E;
}
.light-mode .education-item p,
.light-mode .edu-year {
  color: #374151;
}

/* Progress Circles */
.light-mode [role="progressbar"] {
  border: 2px solid rgba(14, 165, 233, 0.4);
  box-shadow: 0 0 15px rgba(14, 165, 233, 0.2);
}
.light-mode [role="progressbar"]::before {
  background: conic-gradient(#0F766E calc(var(--percentage) * 1%), #E5E7EB 0);
}
.light-mode [role="progressbar"]::after {
  color: #0F766E;
}
.light-mode .progress-title {
  color: #111827;
}

/* Certificates */
.light-mode .certificates-scroller h2 {
  color: #0F766E;
}
.light-mode .certificate {
  box-shadow: 0 0 10px #0F766E;
}
.light-mode .certificate:hover img {
  box-shadow: 0 0 20px #F59E0B;
}


/* skills */
.light-mode   .blog-card  .skill-card {
      background-color: white;
    }
/* Contact Section */
.light-mode .contact-heading h1 {
  color: #0F766E;
}
.light-mode .contact-heading h2 span {
  color: #0F766E;
}
.light-mode .contact-heading p {
  color: #374151;
}
 .light-mode    .contact_heading {
  color: black;
}
.light-mode .left-section p,
.light-mode .contact-line,
.light-mode .right-section h2 {
  color: #111827;
}
.light-mode .icon-circle {
  background: #E5E7EB;
  color: #0F766E;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
}
.light-mode .right-section {
  background: #FFFFFF;
}
.light-mode input,
.light-mode textarea {
  background: #F9FAFB;
  color: #111827;
  border-color: rgba(0,0,0,0.08);
}
.light-mode input::placeholder,
.light-mode textarea::placeholder {
  color: #6B7280;
}

/* Maintenance Modal */
.light-mode #maintenance-notification {
  background: rgba(255, 255, 255, 0.9);
  color: black;

}
.light-mode .modal {
  background: #FFFFFF;
  border: 1px solid rgba(14, 165, 233, 0.2);
    color: black;
}
.light-mode #close-notification {
  background: #0F766E;
}
.light-mode #close-notification:hover {
  background: #F59E0B;
}

/* Projects */
.light-mode .card {
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.1);
}
.light-mode .card:hover {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.3);
}
.light-mode .card-title {
  color: #0F766E;
}
.light-mode .card button {
  background-color: #0F766E;
  color: white;
}
.light-mode .card button:hover {
  background-color: #F59E0B;
}



@media (max-width: 768px) {
.light-mode  .hero h1 {
  
  color: white;
}



 .light-mode .typing {

  color: #D1D5DB;

} }



/* skills */
 .light-mode .skill-card{
  background-color: white;
 }
/* blog */
.light-mode .blog-section  {
  background: #f9f9f9;
  color: #111;
}

.light-mode .blog-heading h1 {
  color: #0f766e;
}

.light-mode .blog-card {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.light-mode .blog-card h2 {
  color: #0f766e;
}

.light-mode .blog-card p {
  color: #4b5563;
}

.light-mode .read-more {
  color: #0f766e;
}

.light-mode .read-more:hover {
  color: #0ea5e9;
}

.light-mode .modal-content {
  background: #f1f5f9;
  color: #111827;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.light-mode .close-modal {
  background: #ef4444;
  color: white;
}

.light-mode .blog-modal  {
  background: rgba(0, 0, 0, 0.5);
}