/* General Styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
   font-family: 'Poppins', sans-serif;
   line-height: 1.6;
   color: #ffffff; /* White text for dark theme */
   background-color: black; /* Dark background */
 }
 
 h1, h2, h3 {
   font-family: 'Open Sans', sans-serif;
   font-weight: 700;
   color: #ffffff; /* White text for headings */
 }
 
 a {
   text-decoration: none;
   color: #00ff88; /* Neon green for links */
   transition: color 0.3s;
 }
 
 a:hover {
   color: #00cc66; /* Darker green on hover */
 }
 
 /* Buttons */
 .btn-primary {
   background-color: #007BFF; /* Blue accent */
   color: white;
   padding: 10px 20px;
   border-radius: 5px;
   transition: background-color 0.3s;
 }
 
 .btn-primary:hover {
   background-color: #0056b3; /* Darker blue on hover */
 }
 
 .btn-secondary {
   background-color: #28a745; /* Green accent */
   color: white;
   padding: 8px 16px;
   border-radius: 5px;
   transition: background-color 0.3s;
 }
 
 .btn-secondary:hover {
   background-color: #218838; /* Darker green on hover */
 }
 
 /* Header Section */
 header {
   background-color: #333; /* Dark gray header */
   color: white;
   padding: 10px 20px;
 }
 
 header nav ul {
   list-style: none;
   display: flex;
   justify-content: center;
   gap: 20px;
 }
 
 header nav ul li a {
   color: white;
   font-weight: 500;
 }
 
 /* Hero Section */
 .hero {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 50px 20px;
   background-color: #1a1a1a; /* Dark background */
 }
 
 .hero-content h1 {
   font-size: 2.5rem;
   margin-bottom: 10px;
 }
 
 .hero-content p {
   font-size: 1.2rem;
   margin-bottom: 20px;
   color: #ffffff; /* White text */
 }
 
 .hero-image img {
   border-radius: 50%;
   width: 200px;
   height: 200px;
   object-fit: cover;
   box-sizing: border-box;

   
 }
 
 /* About Section */
 .about {
   padding: 50px 20px;
   text-align: center;
   background-color: #262626; /* Slightly lighter dark gray */
 }
 
 .about h2 {
   font-size: 2rem;
   margin-bottom: 20px;
   color: #ffffff; /* White text */
 }
 
 .about p {
   color: #b3b3b3; /* Light gray text */
   font-size: 1.1rem;
   line-height: 1.8;
   max-width: 800px;
   margin: 0 auto 30px;
 }
 
 .about-info-container {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 20px;
   flex-wrap: wrap;
 }
 
 .about-info {
   background-color: #333; /* Dark gray for cards */
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   text-align: center;
   width: 200px;
   transition: transform 0.3s, box-shadow 0.3s;
 }
 
 .about-info:hover {
   transform: translateY(-10px); /* Lift the card on hover */
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
 }
 
 .about-info p.info-title {
   font-size: 1rem;
   color: #b3b3b3; /* Light gray text */
   margin-bottom: 5px;
 }
 
 .about-info p.info-description {
   font-size: 1.2rem;
   color: #ffffff; /* White text */
   font-weight: 600;
 }
 
 /* Email Link Styling */
 .email-link {
   color: #007BFF; /* Blue color for the email link */
   text-decoration: none;
   transition: color 0.3s;
   font-size: 14px;

 }
 
 .email-link:hover {
   color: #0056b3; /* Darker blue on hover */
   text-decoration: underline;
 }
 
 /* Skills Section */
 .skills {
   padding: 50px 20px;
   text-align: center;
   background-color: #262626; /* Slightly lighter dark gray */
 }
 
 .skills-container {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 20px;
   flex-wrap: wrap;
 }
 
 .skill {
   background-color: #333; /* Dark gray for cards */
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   text-align: center;
   width: 300px;
   transition: transform 0.3s, box-shadow 0.3s;
 }
 
 .skill:hover {
   transform: translateY(-10px); /* Lift the card on hover */
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
 }
 
 .skill img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 10px;
   margin-bottom: 15px;
 }
 
 .skill h3 {
   font-size: 1.5rem;
   margin-bottom: 10px;
   color: #ffffff; /* White text */
 }
 
 .skill p {
   color: #b3b3b3; /* Light gray text */
   font-size: 1rem;
   line-height: 1.6;
 }
 
 /* Projects Section */
 .projects {
   padding: 50px 20px;
   text-align: center;
   background-color: #262626; /* Slightly lighter dark gray */
 }
 
 .projects-container {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 20px;
   flex-wrap: wrap;
 }
 
 .project {
   background-color: #333; /* Dark gray for cards */
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   text-align: center;
   width: 300px;
 }
 
 .project h3 {
   font-size: 1.2rem;
   margin-bottom: 15px;
   color: #ffffff; /* White text */
 }
 
 /* Ongoing Button */
 .ongoing-button {
   background-color: #007BFF; /* Blue accent */
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   font-size: 1rem;
   cursor: pointer;
   transition: background-color 0.3s;
   position: relative;
   overflow: hidden;
 }
 
 .ongoing-button::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 300%;
   height: 300%;
   background: rgba(255, 255, 255, 0.3);
   transform: translate(-50%, -50%) rotate(45deg);
   animation: ripple 1.5s infinite;
 }
 
 @keyframes ripple {
   0% {
     transform: translate(-50%, -50%) scale(0);
     opacity: 1;
   }
   100% {
     transform: translate(-50%, -50%) scale(1);
     opacity: 0;
   }
 }
 
 .ongoing-button:hover {
   background-color: #0056b3; /* Darker blue on hover */
 }
 
 /* Contact Section */
 .contact {
   padding: 50px 20px;
   background-color: #262626; /* Slightly lighter dark gray */
   text-align: center;
 }
 
 .contact-container {
   display: flex;
   justify-content: center;
   gap: 40px;
   margin-top: 20px;
 }
 
 .contact-info {
   text-align: left;
 }
 
 .contact-form {
   text-align: left;
 }
 
 .contact-form input,
 .contact-form textarea {
   width: 100%;
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid #555; /* Darker border */
   border-radius: 5px;
   background-color: #333; /* Dark gray input background */
   color: #ffffff; /* White text */
 }
 
 .contact-form input::placeholder,
 .contact-form textarea::placeholder {
   color: #b3b3b3; /* Light gray placeholder text */
 }
 
 .social-links {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 20px;
 }
 
 .social-links a {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.2rem;
   color: #007BFF; /* Blue accent */
   text-decoration: none;
   transition: color 0.3s;
 }
 
 .social-links a:hover {
   color: #0056b3; /* Darker blue on hover */
 }
 
 /* Certifications Section */
 .certifications {
   padding: 50px 20px;
   text-align: center;
   background-color: #262626; /* Slightly lighter dark gray */
 }
 
 .certifications-container {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 20px;
   flex-wrap: wrap;
 }
 
 .certification {
   background-color: #333; /* Dark gray for cards */
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   text-align: center;
   width: 300px;
   transition: transform 0.3s, box-shadow 0.3s;
 }
 
 .certification:hover {
   transform: translateY(-10px); /* Lift the card on hover */
   box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
 }
 
 .certification img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 10px;
   margin-bottom: 15px;
 }
 
 .certification h3 {
   font-size: 1.5rem;
   margin-bottom: 10px;
   color: #ffffff; /* White text */
 }
 
 .certification p {
   color: #b3b3b3; /* Light gray text */
   font-size: 1rem;
   line-height: 1.6;
 }
 
 .certification a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 1rem;
   color: white;
   background-color: #007BFF; /* Blue accent */
   padding: 10px 15px;
   border-radius: 5px;
   text-decoration: none;
   transition: background-color 0.3s;
 }
 
 .certification a:hover {
   background-color: #0056b3; /* Darker blue on hover */
 }
 
 /* Footer Section */
 footer {
   background-color: #333; /* Dark gray footer */
   color: white;
   text-align: center;
   padding: 20px;
 }