[data-bs-theme="light"] {
--dark-bg: #f8f9fa;
--darker-bg: #e9ecef;
--card-bg: #ffffff;
}

[data-bs-theme="light"] body {
background-color: var(--dark-bg);
color: #212529;
}

[data-bs-theme="light"] .navbar {
background-color: var(--darker-bg) !important;
border-bottom: 1px solid #dee2e6;
}

[data-bs-theme="light"] .hero-section {
background: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
}

[data-bs-theme="light"] .card {
background-color: var(--card-bg);
}

[data-bs-theme="light"] footer {
background-color: var(--darker-bg);
border-top: 1px solid #dee2e6;
}
 :root {
   --primary-color: #0d6efd;
   --secondary-color: #6c757d;
   --dark-bg: #121212;
   --darker-bg: #0a0a0a;
   --card-bg: #1e1e1e;
 }

 body {
   background-color: var(--dark-bg);
   color: #f8f9fa;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }

 .navbar {
   background-color: var(--darker-bg) !important;
   border-bottom: 1px solid #333;
 }

 .hero-section {
   background: linear-gradient(
     135deg,
     var(--darker-bg) 0%,
     var(--dark-bg) 100%
   );
   padding: 5rem 0;
 }

 .profile-img {
   width: 350px;
   height: 350px;
   object-fit: cover;
   border: 5px solid var(--primary-color);
   box-shadow: 0 0 20px rgba(13, 110, 253, 0.3);
 }

 .section-title {
   position: relative;
   display: inline-block;
   margin-bottom: 2rem;
 }

 .section-title::after {
   content: "";
   position: absolute;
   bottom: -10px;
   left: 0;
   width: 50px;
   height: 3px;
   background-color: var(--primary-color);
 }

 .card {
   background-color: var(--card-bg);
   border: none;
   transition: transform 0.3s, box-shadow 0.3s;
   margin-bottom: 20px;
 }

 .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }

 .certification-logo {
   height: 80px;
   object-fit: contain;
   margin-bottom: 15px;
 }

 .social-icon {
   font-size: 1.5rem;
   margin: 0 10px;
   transition: transform 0.3s;
 }

 .social-icon:hover {
   transform: scale(1.2);
 }

 .theme-toggle {
   cursor: pointer;
   font-size: 1.2rem;
 }

 footer {
   background-color: var(--darker-bg);
   padding: 2rem 0;
   border-top: 1px solid #333;
 }

 .skill-badge {
   margin: 0.2rem;
 }

 .project-tech {
   font-size: 0.8rem;
   color: var(--primary-color);
 }

 /* Animation for hero section */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .hero-content {
   animation: fadeIn 1s ease-out;
 }