/* Style for the hero image */
.hero-image {
    width: 100%; /* Make the image span the full width of the viewport */
    height: 250px; /* Maintain the aspect ratio */
    object-fit: cover; /* Ensures the image maintains a visually appealing crop */
    display: block; /* Remove any extra space below the image */
  }
  
  /* Optional: Remove padding or margins around the header */
  header {
    margin: 0;
    padding: 0;
  }  

/* Gradient Background for the Webpage */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: linear-gradient(135deg, #ff7eb3, #ff758c, #42a5f5, #7e57c2); /* Gradient colors */
    background-size: 300% 300%; /* Large size for smoother animation */
    animation: gradientAnimation 10s infinite; /* Add animation for a dynamic effect */
    color: #333; /* Default text color for readability */
  }
  
  /* Gradient Animation */
  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* Hero Section */
.hero {
    text-align: center;
    background: linear-gradient(135deg, #e2c6a7, #f6e1c3);
    padding: 0px 0; /* Increased padding for better spacing */
    color: #333; /* Neutral text color for readability */
    font-family: 'Arial', sans-serif;
    border-radius: 10px; /* Slightly rounded corners for a modern look */
  }
  
  /* Main Header (Name) */
  .hero h1 {
    margin: 0 0 1px; /* Add bottom margin for spacing */
    font-size: 3rem; /* Slightly larger font size */
    color: #1a237e; /* Deep blue color for the name */
    font-weight: bold;
  }
  
  /* Subheading */
  .hero h2 {
    margin: 0 0 5px; /* Space between the name and role */
    font-size: 1.4rem;
    font-weight: normal;
    color: #4a4a4a; /* Softer gray for subheadings */
  }
  
  /* Paragraph Text */
  .hero p {
    margin: 10px auto; /* Center align and add spacing */
    max-width: 800px; /* Limit width for readability */
    font-size: 1.1rem;
    line-height: 1.6; /* Increased line height for better readability */
    color: #4a4a4a; /* Match subheading color */
  }
  
  /* Navigation Dots */
  .hero .dots {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Space above the dots */
  }
  
  .hero .dots span {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
  }
  
  .hero .dots span.active {
    background-color: #1a237e; /* Highlight active dot with deep blue */
  }

  /* About Section Slides */
.about-slide {
    display: none; /* Hide all slides initially */
    text-align: center;
    background: linear-gradient(135deg, #e2c6a7, #f6e1c3);
    padding: 30px 10px;
    color: #333;
    font-family: 'Arial', sans-serif;
    border-radius: 10px;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform: translateX(100%);
  }
  
  .about-slide.active {
    display: block; /* Only show the active slide */
    transform: translateX(0);
    z-index: 1;
  }
  
  .about-slide.prev {
    transform: translateX(-100%); /* Move off-screen to the left */
    z-index: 1;
  }

  /* Dots */
  .dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  .dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .dots .dot.active {
    background-color: #1a237e; /* Highlight active dot */
  }

  /* Portfolio Section */
#portfolio {
    padding: 40px 20px;
    background-color: #FFF3E0; /* Maintain your current color scheme */
  }
  
  #portfolio h2 {
    margin: 10px 0 30px;
    font-size: 2rem;
    font-weight: bold;
    color: #1a237e;
    text-align: center;
  }
  
  /* Flex container to stretch cards */
  .projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
  }
  
  /* Individual cards */
  .project-card {
    flex: 1; /* Allow cards to grow and shrink equally */
    background: #FFF3E0;
    border: 1px solid #FFAB40;
    border-radius: 8px;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out content */
    max-width: 350px; /* Optional: Set a max width for uniformity */
  }
  
  /* Images inside cards */
  .project-card img {
    width: 100%;
    height: 250px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensure images are scaled properly */
    border-radius: 5px;
    margin-bottom: 15px;
  }
  
  /* Text content */
  .project-card h3 {
    font-size: 1.5rem;
    color: #1a237e;
    margin-bottom: 10px;
  }
  
  .project-card p {
    font-size: 1rem;
    color: #4a4a4a;
    margin-bottom: 20px;
    line-height: 1.5;
  }

  /* Show More Button */
#toggle-projects {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #1a237e;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  #toggle-projects:hover {
    background-color: #0d47a1;
  }
  
  /* Hidden projects */
  .hidden {
    display: none;
  }  
  
  /* Popup Overlay */
#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of all content */
  }
  
  /* Popup Message */
  #popup-message {
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  #popup-message h2 {
    font-size: 2rem;
    color: #1a237e; /* Deep blue for the header */
    margin-bottom: 10px;
  }
  
  #popup-message p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333; /* Neutral text color */
  }
  
/* General Section Styling */
section {
    padding: 40px 20px;
    margin: 5px auto;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent for contrast */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Section Headings */
  section h2 {
    text-align: center;
    color: #1a237e;
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
  
  /* Skills Section */
  .skills-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }
  
  .skill-badge {
    padding: 10px 15px;
    background: #1a237e;
    color: white;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Career Section */
#career {
    text-align: center; /* Center-align the text within the section */
    padding: 20px; /* Add some padding for spacing */
    background: linear-gradient(135deg, #e2c6a7, #f6e1c3);
  }
  
  #career h2 {
    margin: 10px 0 15px; /* Space between the heading and the items */
    font-size: 2rem;
    font-weight: bold;
    color: #1a237e;
  }
  
  /* Flexbox Container for Career Items */
  #career ul {
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: flex-start; /* Align items at the top */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    list-style-type: none; /* Remove default bullet points */
    padding: 0; /* Remove padding */
    margin: 0 auto; /* Center the list */
    max-width: 800px; /* Limit the maximum width for layout consistency */
    gap: 20px; /* Add space between items */
  }
  
  #career li {
    flex: 0 0 calc(50% - 20px); /* Ensure two items per row with space in-between */
    margin-bottom: 10px; /* Add spacing between rows */
    font-size: 1.2rem;
    text-align: left; /* Align text within items to the left */
    padding: 10px;
    background: #f5f5f5; /* Add a light background for contrast */
    border-radius: 8px; /* Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
  }  
  
  /* Carousel Wrapper */
  .carousel {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
  }
  
  /* Carousel Container */
  .carousel-container {
    overflow: hidden;
    width: 100%;
  }
  
  .certification-container {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth slide effect */
    gap: 20px;
  }
  
  /* Certification Cards */
.certification-card {
    flex: 0 0 250px; /* Fixed width for cards */
    background: #FFF3E0;
    border: 1px solid #FFAB40;
    border-radius: 8px;
    text-align: center;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: space-between; /* Ensure consistent spacing */
    height: 100%; /* Set consistent card height */
  }
  
  .certification-card img {
    max-width: 180%;
    height: 150px; /* Fix image height for uniformity */
    object-fit: contain; /* Ensure image scales nicely */
    margin-bottom: 10px; /* Consistent spacing */
  }
  
  .certification-card h3 {
    font-size: 1.2rem;
    color: #1a237e; /* Deep blue */
    min-height: 52px; /* Ensures consistent height for all headings */
    max-height: 52px; /* Prevents expansion beyond two lines */
    /* overflow: hidden; /* Hides overflow if the text is too long */
    margin-bottom: 10px; /* Spacing between heading and description */
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    line-clamp: 2; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
  
  .certification-card p {
    font-size: 1rem;
    color: #4a4a4a; /* Neutral gray for descriptions */
    min-height: 36px; /* Consistent height for descriptions */
    margin-bottom: 20px; /* Add spacing before button */
    text-align: center;
  }
  
  /* Education Section */
  .education-container {
    text-align: center;
  }
  
  .education-container h3 {
    color: #1a237e;
    font-size: 1.5rem;
  }
  
  .education-container p {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #4a4a4a;
  }
  
  .education-container a {
    text-decoration: none;
    font-size: 1rem;
    color: #1a237e;
    font-weight: bold;
  }
  
  .education-container a:hover {
    text-decoration: underline;
    color: #0d47a1;
  }
  
  /* Contact Section */
#contact {
    text-align: center; /* Center-align all content in the section */
    padding: 20px; /* Add padding for spacing */
    background-color: #f5f5f5; /* Optional: Add a light background for contrast */
    border-top: 2px solid #ddd; /* Optional: Add a top border for separation */
  }
  
  #contact h2 {
    margin: 10px 0 15px; /* Space between the heading and the contact details */
    font-size: 2rem;
    font-weight: bold;
    color: #1a237e; /* Deep blue color for the heading */
  }
  
  #contact p {
    margin: 10px 0; /* Add spacing between contact details */
    font-size: 1.2rem;
    color: #333; /* Neutral color for the text */
  }
  
  #contact a {
    text-decoration: none; /* Remove underline from links */
    color: #1a237e; /* Deep blue for links */
    font-weight: bold;
  }
  
  #contact a:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #0d47a1; /* Slightly darker blue for hover effect */
  }
  
  
  /* Learn More/Verify Certificate Button */
.learn-more-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1a237e; /* Deep blue */
    color: white;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: auto; /* Pushes the button to the bottom */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .learn-more-button:hover {
    background-color: #0d47a1; /* Darker blue on hover */
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  }
  
  /* Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #1a237e;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5rem;
    z-index: 2;
  }
  
  .carousel-btn.left {
    left: 10px;
  }
  
  .carousel-btn.right {
    right: 10px;
  }
  
  .carousel-btn:hover {
    background: #0d47a1;
  }

  /* Memory Game Section Styling */
#memory-game-section {
    text-align: center;
    padding: 40px 20px;
    background: #fff5f5; /* Light pink background */
    border-radius: 15px;
    margin: 40px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  }
  
  #memory-game-section h2 {
    font-size: 2rem;
    color: #1a237e;
    margin-bottom: 20px;
  }
  
  #memory-game-section p {
    font-size: 1.2rem;
    color: #4a4a4a;
  }
  
  #memory-game-section a {
    color: #ffab40; /* Bright orange link */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  #memory-game-section a:hover {
    color: #ff6f00; /* Darker orange on hover */
  }  

  /* Footer Styling */
.footer {
    text-align: center;
    padding: 20px;
    background-color: #1a237e; /* Deep blue background */
    color: white; /* White text color */
    font-size: 0.9rem;
    margin-top: 40px; /* Space between footer and content */
}

.footer a {
    color: #ffab40; /* Light orange links */
    text-decoration: none;
    font-weight: bold;
    margin: 0 10px;
}

.footer a:hover {
    color: #ffd740; /* Lighter orange on hover */
    text-decoration: underline; /* Underline on hover */
}