styles.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Apply Montserrat font to all headings */
section h1, section h2, section h3, section h4, section h5, section h6 {
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat font */
}
/* Apply consistent padding and center alignment to all section headings */
section h1 {
    color: #070606;
    font-size: 2rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    text-align: center; /* Center-align headings */
}

section h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #a5c3e2; /* Accent color */
    margin: 10px auto 0; /* Center-align underline */
    border-radius: 2px;
}

/* Ensure consistent padding for all sections */
section {
    background-color: #ffffff;
    padding: 50px; /* Uniform padding */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: auto;
    max-width: auto;
    transition: background-color 0.3s, box-shadow 0.3s;

}

section:hover {
    background-color: #e0f7fa;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

section p,
section li {
    color: #040404;
    line-height: 1.6;
    transition: transform 0.3s ease, color 0.3s;
}

section:hover p,
section:hover li {
    transform: scale(1.02);
    color: #333;
}


/* Navbar Styles */
.navbar {
    box-shadow: 0 2px 4px rgba(241, 241, 239, 0.1);
    z-index: 1000;
    transition: background-color 0.3s, color 0.3s, padding 0.3s; /* Added padding transition */
    background-color: rgba(200, 150, 150, 0.8); /* Updated background color */
    color: #ffffff; /* Default text color */
    padding: 2px 10px; /* Reduced padding */
    height: 60px; /* Reduced height */
    line-height: 40px; /* Center text vertically */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Center content vertically */
    width: 100%; /* Full width of the viewport */
    position: fixed; /* Fixed position to stay at the top */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    box-sizing: border-box; /* Include padding and border in the element’s total width and height */
}

/* Container inside the navbar */
.navbar-container {
    max-width: 1000px; /* Maximum width for content */
    margin: 0 auto; /* Center horizontally within the viewport */
    width: 100%; /* Full width within the maximum constraint */
}

/* Minimized Navbar Styles */
.navbar.minimized {
    padding: 3px 8px; /* Further reduced padding */
    background-color: rgba(255, 255, 255, 0.2); /* Transparent background */
    transition: padding 0.3s, background-color 0.3s; /* Smooth transition */
}

/* Navbar when scrolled */
.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    color: #333; /* Text color when scrolled */
}

/* Navbar Brand Styling */
.navbar-brand {
    position: relative; /* For positioning the emoji */
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center align items vertically */
    padding: 5px 10px; /* Reduced padding */
    text-decoration: none; /* Ensure no underline */
    color: whitesmoke; /* Inherit color from navbar */
    transition: color 0.3s, opacity 0.3s; /* Smooth transition for color and opacity */
}

/* Minimized Navbar Brand Styles */
.navbar.minimized .navbar-brand {
    font-size: 0.9rem; /* Smaller font size */
}

/* Navbar Brand when scrolled */
.navbar-brand.scrolled {
    color: #f3d4d4; /* Color when scrolled */
    opacity: 1; /* Slightly faded effect when scrolled */
}

/* Brand Name Styling */
.brand-name {
    color: whitesmoke; 
    font-weight: bold;
    font-size: 1rem; /* Reduced font size */
    opacity: 1;
    transition: opacity 0.4s; /* Smooth transition for opacity */
}

/* DNA Emoji Styling */
.dna-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem; /* Reduced font size */
    color: #ffffff;
    transition: opacity 0.5s; /* Smooth transition for opacity */
    opacity: 0; /* Initially hidden */
    z-index: 1; /* Ensure it’s above the text */
}

.navbar-brand:hover .brand-name {
    opacity: 0; /* Hide the text completely on hover */
}

.navbar-brand:hover .dna-emoji {
    opacity: 1; /* Show the DNA emoji */
}

/* Navbar Link Styles */
.navbar-nav .nav-link {
    position: relative; /* For positioning the underline effect */
    padding: 8px 12px; /* Reduced padding */
    color: inherit; /* Inherit color from navbar */
    text-decoration: none; /* Remove default underline */
    font-size: 0.9rem; /* Smaller font size */
    transition: color 0.3s, opacity 0.3s; /* Smooth transition for text color and opacity */
}

/* Minimized Navbar Link Styles */
.navbar.minimized .nav-link {
    font-size: 0.8rem; /* Further reduced font size */
    color: #f6e5e5; /* Text color when minimized */
}

/* Navbar Link Hover and Focus Styles */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #4dd5e7; /* Color on hover and focus */
}

/* Custom Underline Effect */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px; /* Adjusted for reduced size */
    width: 100%;
    height: 1px; /* Adjusted for reduced size */
    background-color: #4ed3a7; /* Underline color */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Navbar Link when scrolled */
.navbar-nav .nav-link.scrolled-text {
    color: #4dd5e7; /* Color when scrolled */
}

/* Initial state for elements to reveal */
.reveal {
    opacity: 0;
    transform: translateY(50px); /* Start position */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state for revealed elements */
.reveal.visible {
    opacity: 1;
    transform: translateY(0); /* Final position */
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Main Content */
main.container {
    padding: 0 15px;
    animation: fadeIn 1s ease-in-out; /* Apply fade-in animation */
}

#profile-card {
    display: grid;
    place-items: center;
    margin-top: 30px;
    animation: fadeIn 1.5s ease-in-out; /* Apply fade-in animation */
}

.card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 900px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    animation: fadeIn 2s ease-in-out; /* Apply fade-in animation */
}

.card-header {
    position: relative;
}

.profile-picture-container {
    width: 100%;
    overflow: hidden;
}

.profile-picture {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.profile-picture-container:hover .profile-picture {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.card-body {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    animation: fadeIn 2.5s ease-in-out; /* Apply fade-in animation */
}

.card-body h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.card-body p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

@media (max-width: 768px) {
    .card-body h1 {
        font-size: 20px;
    }
    
    .card-body p {
        font-size: 14px;
    }

    .content {
        padding: 15px;
    }

    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 0.9rem;
    }
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.logo a {
    color: #fff;
    font-size: 24px;
    text-decoration: none;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0 10px;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #00bcd4;
}

/* Hamburger Menu Styles */
.menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #333;
        position: absolute;
        top: 60px;
        left: 0;
        z-index: 1000;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .menu-toggle {
        display: block;
    }
}


/* Footer Container */
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Make footer full device width */
    padding: 1rem 0; /* Adjust padding for top and bottom */
    background-color: #000000; /* Background color for footer */
    color: #ebe4e4; /* Default text color for footer */
}

/* Social Links Container */
.social-links {
    display: flex;
    gap: 15px; /* Space between icons */
    margin-bottom: 0.5rem; /* Space below the icons */
}

/* Style for social icons */
.social-icon {
    color: #fbf3f3; /* Default color for icons */
    font-size: 1.2rem; /* Adjust icon size as needed */
    transition: color 0.3s; /* Smooth transition for hover effect */
}

.social-icon:hover {
    color: #4493d8; /* Default icon color on hover */
}

/* Specific color for each social icon */
.social-icon.linkedin {
    color: #d4dee8; /* LinkedIn default color */
}

.social-icon.linkedin:hover {
    color: #0a66c2; /* LinkedIn hover color */
}

.social-icon.github {
    color: #ffffff; /* GitHub default color */
}

.social-icon.github:hover {
    color: #e0e0e0; /* Slightly darker shade of white for hover effect */
}

.social-icon.google-scholar {
    color: #ea4335; /* Google Scholar default color */
}

.social-icon.google-scholar:hover {
    color: #a8645e; /* Google Scholar hover color */
}

/* Copyright Text */
.copyright p {
    color: #fff; /* Sets the text color to white */
    font-size: 0.875rem; /* Adjust font size as needed */
    margin: 0; /* Remove default margin */
}



/* Modal Background Overlay */
#easter-egg-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: 1000; /* Make sure it's on top */
    overflow: auto;
    transition: opacity 0.3s ease;
}

/* Modal Content */
#easter-egg-content {
    position: relative;
    margin: 15% auto; /* Center the modal */
    padding: 2rem;
    width: 80%;
    max-width: 500px;
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: scaleIn 0.3s ease-out;
}

/* Modal Header */
#easter-egg-content h2 {
    margin-top: 0;
    font-size: 1.5rem;
    color: #444;
}

/* Close Button */
#easter-egg-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
}

#easter-egg-content .close:hover {
    color: #e74c3c; /* Color on hover */
}

/* Animation for Modal */
@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Optional: Adding Fade Effect */
#easter-egg-modal.fade {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#easter-egg-modal.fade.in {
    opacity: 1;
}

/* Hidden Class */
.hidden {
    display: none; /* Hide elements with this class */
}



/*Experience Section */
#experience {
    padding: 30px 20px;
    background: linear-gradient(135deg, #f0f4f8, #f9f9f9);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid #00796b; /* Accent border */
}

#experience:hover {
    background-color: #e0f7fa;
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.content {
    position: relative;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

.content:hover {
    border-color: #00796b; /* Accent border on hover */
}

h1 {
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.heading-colored {
    color: #101111; /* Retained original color */
    margin-top: 20px;
}

p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

ul {
    list-style-type: disc;
    padding-left: 25px;
    margin-bottom: 15px;
}

ul li {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .content {
        padding: 15px;
    }

    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 0.9rem;
    }
}





#experience {
    padding: 30px 15px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s ease, box-shadow 0.3s ease;
}

#experience:hover {
    background-color: #e0f7fa;
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.content {
    position: relative;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
}

h1 {
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.heading-colored {
    color: #101111;
    margin-top: 20px;
}

p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

ul {
    list-style-type: disc;
    padding-left: 20px;
}

ul li {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .content {
        padding: 15px;
    }

    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 0.9rem;
    }
}

/* Education Section */
.education-section {
    margin-top: 100px;
    background-color: #f8f9fa; /* Light background for contrast */
    padding: 50px 0;
    animation: fadeIn 3s ease-in-out; /* Fade-in animation */
}

.education-section .section-title {
    font-size: 2.5rem;
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.education-section .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #007bff; /* Accent color */
    margin: 10px auto 0;
    border-radius: 2px;
}

.education-item {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 20px; /* Space between logo and text */
    animation: fadeIn 3.5s ease-in-out; /* Fade-in animation for education item */
}

.education-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.education-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: #007bff; /* Accent color */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.education-logo {
    width: 80px; /* Adjust as needed */
    height: auto;
}

.degree-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
}

.institution {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 5px;
}

.location {
    font-size: 1rem;
    color: #777;
}

/* Responsive Design */
@media (max-width: 768px) {
    .education-section .section-title {
        font-size: 2rem;
    }
    
    .education-item {
        padding: 15px;
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: flex-start;
        gap: 15px; /* Adjust spacing for smaller screens */
    }
    
    .education-logo {
        width: 60px; /* Adjust as needed for smaller screens */
    }
    
    .degree-title {
        font-size: 1.25rem;
    }
    
    .institution {
        font-size: 1rem;
    }
    
    .location {
        font-size: 0.9rem;
    }
}




/* General Skills Section Styles */
#skills {
    margin-top:100px;
    padding: 30px;
    background-color: #f7f9fc; /* Very light grey background for better contrast */
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    position: relative;
    overflow: hidden; /* Ensure contents don't overflow */
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

/* Banner Styles */
.banners-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

/* General Banner Styles */
.banner {
    width: 200px;
    height: 300px;
    background-color: #f2f4f7; /* Light grey color */
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 100%, 
        50% 80%, 
        0% 100%
    );
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Added shadow and color transitions */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Initial shadow */
}

.banner:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Shadow on hover */
    background-color: #e6e9ef; /* Slightly darker grey on hover */
}

.banner-1 { background-color: #fce8e8; } /* Light pink */
.banner-2 { background-color: #fcf8e8; } /* Light yellow */
.banner-3 { background-color: #e8fce8; } /* Light green */
.banner-4 { background-color: #e8e8fc; } /* Light blue */
.banner-5 { background-color: #fce8f9; } /* Light lavender */

.banner-text {
    position: absolute;
    bottom: 50%; /* Positioning text in the vertical center */
    left: 50%;   /* Center horizontally */
    transform: translate(-50%, 50%); /* Offset for accurate centering */
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent background for gloss effect */
    color: #333; /* Darker text color for better readability */
    padding: 10px 15px; /* Padding around the text */
    text-align: center;
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    max-width: 90%; /* Ensure text doesn't overflow */
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards; /* Fade in animation */
}

/* Skills Overlay Styles */
.skills-overlay {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.all-skills {
    display: none;
    width: 108%;
    padding: 20px;
    box-sizing: border-box;
}

/* Skill Item Styles */
.skill-item {
    display: flex;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center;
    margin: 10px; /* Consistent margin for spacing */
    width: 150px; /* Fixed width for consistency */
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #ccc; /* Border for better visibility */
    border-radius: 10px; /* Rounded corners */
    padding: 10px;
    overflow: hidden; /* Hide overflow text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for skill items */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Added transitions */
    position: relative;
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards; /* Fade in animation */
}

.skill-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
    background-color: #f9f9f9; /* Slightly lighter background on hover */
}

.skill-item:hover .skill-icon {
    animation: iconBounce 0.6s ease; /* Bounce effect for icon */
}

.skill-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    transition: transform 0.3s ease; /* Animation for icon */
    transform: rotate(0deg); /* Initial rotation */
}

.skill-item:hover .skill-icon {
    transform: scale(1.1) rotate(15deg); /* Slightly enlarge and rotate icon on hover */
}

.skill-item p {
    margin: 0;
    font-size: 14px;
    color: #444;
    font-weight: bold;
    text-align: center;
    overflow-wrap: break-word; /* Ensure long words wrap within the box */
}

/* Biomedical Skills Banner Specific Styles */
.biomedical-skills {
    width: 250px;
    height: 350px;
    background-color: #e3f2fd; /* Light blue background for distinction */
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 100%, 
        50% 85%, 
        0% 100%
    );
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added shadow transition */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Initial shadow */
}

.biomedical-skills:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Shadow on hover */
}

.biomedical-skills .skill-item {
    width: 200px;
    height: auto; /* Auto height to accommodate longer text */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #ddd; /* Border for better visibility */
    border-radius: 10px; /* Rounded corners */
    padding: 10px;
    margin-bottom: 10px;
    overflow-wrap: break-word; /* Ensure long words wrap within the box */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for skill items */
}

.biomedical-skills .skill-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    transition: transform 0.3s ease; /* Animation for icon */
}

.biomedical-skills .skill-item:hover .skill-icon {
    transform: scale(1.1) rotate(-15deg); /* Slightly enlarge and rotate icon on hover */
}

.biomedical-skills .skill-item p {
    margin: 0;
    font-size: 14px;
    color: #444;
    font-weight: bold;
    text-align: center;
    overflow-wrap: break-word; /* Ensure long words wrap within the box */
}

/* Machine Learning Skills Section Styles */
.machine-learning-skills .skill-item {
    width: 150px; /* Fixed width for consistency */
    height: auto; /* Auto height to accommodate longer text */
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #ccc; /* Border for better visibility */
    border-radius: 10px; /* Rounded corners */
    padding: 10px;
    text-align: center;
    overflow-wrap: break-word; /* Ensure long words wrap within the box */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for skill items */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added transition for shadow and scale */
}

.machine-learning-skills .skill-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Hover Effects for Banners and Skills */
[data-skill="1"]:hover ~ .skills-overlay [data-skill="1"],
[data-skill="2"]:hover ~ .skills-overlay [data-skill="2"],
[data-skill="3"]:hover ~ .skills-overlay [data-skill="3"],
[data-skill="4"]:hover ~ .skills-overlay [data-skill="4"],
[data-skill="5"]:hover ~ .skills-overlay [data-skill="5"] {
    display: flex; /* Show skills when hovering over the respective banner */
}

[data-skill]:not(:hover) ~ .skills-overlay [data-skill] {
    display: none; /* Hide skills when not hovering */
}

/* Keyframes for Animation Effects */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes iconBounce {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.2) rotate(15deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}


/* Strengths Section */
.strengths {
    margin-top: auto; /* Adjust this value if necessary */
    padding: auto;
    background-color: #f9f9f9;
    animation: fadeIn 1s ease-in-out; /* Add fade-in animation for the entire section */
}

.strengths h1 {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 2rem;
    color: #333;
}

.strengths-container ul {
    list-style-type: none;
    padding: auto;
    margin: 10px;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    justify-content: center;
}

.strengths-container li {
    position: relative;
    margin: 10px;
    cursor: pointer;
    flex: 0 0 45%; /* Set each item to take 45% of the width */
    max-width: 45%; /* Ensures that only two items fit per row */
}

/* Strength Item Styles */
.strength-item {
    position: relative;
    width: 100%; /* Set to 100% to fill li element */
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    border-radius: 2px;
    color: rgb(18, 15, 15);
    font-size: 1.2rem;
    text-align: center;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.strength-item span {
    position: relative;
    z-index: 1;
}

.strength-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(246, 242, 242, 0.6);
    transition: opacity 0.3s ease;
    opacity: 0;
}

.strength-item:hover .strength-overlay {
    opacity: 1;
}

.strength-item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(17, 2, 2, 0.15);
}

/* Background Colors for Strength Items */
.strength-item:nth-child(1) {
    background-color: #ffb3a2; /* Lighter Coral */
}

.strength-item:nth-child(2) {
    background-color: #ba68c8; /* Lighter Deep Purple */
}

.strength-item:nth-child(3) {
    background-color: #fff59d; /* Lighter Yellow */
}

.strength-item:nth-child(4) {
    background-color: #a5d6a7; /* Lighter Green */
}

.strength-item:nth-child(5) {
    background-color: #90caf9; /* Lighter Blue */
}

.strength-item:nth-child(6) {
    background-color: #ff8a65; /* Lighter Deep Orange */
}

.strength-item:nth-child(7) {
    background-color: #80cbc4; /* Lighter Teal */
}

.strength-item:nth-child(8) {
    background-color: #9fa8da; /* Lighter Indigo */
}

.strength-item:nth-child(9) {
    background-color: #f48fb1; /* Lighter Pink */
}
/* Publications Section */
.publications {
    padding: 30px 15px;
    animation: fadeIn 1s ease-in-out; /* Add fade-in animation for the entire section */
}

.publications .publication-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.publications .publication-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.publications .publication-card img {
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}

.publications .publication-card .card-body {
    padding: 15px;
}

.publications .publication-card .card-body h2 {
    font-size: 1.5rem;
    color: #000; /* Consistent black color */
    text-transform: uppercase; /* All caps */
}

.publications .publication-card .card-body p {
    font-size: 1rem;
    color: #666;
}


/* Main content area takes up remaining space */
.main-content {
    flex: 1;
}

/* Contact Page Container */
.contact-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Center vertically */
    padding: 2rem;
    background-color: #8fe3de; /* Soft background color */
    box-shadow: inset 0 0 10px rgba(246, 181, 181, 0.1);
    animation: fadeIn 1s ease-in-out; /* Add fade-in animation for the entire section */
}

/* Contact Container */
.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #ffffff; /* Default background color */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: contactContainerBgChange 15s linear infinite; /* Background color animation */
    margin: 2rem auto; /* Center horizontally and add vertical margin */
}

/* Contact Container Hover Effect */
.contact-container:hover {
    transform: scale(1.05); /* Zoom effect on hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Enhanced shadow effect on hover */
}

/* Contact Text */
.contact-text0 {
    font-size: 2.5rem; /* Increased font size */
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem; /* Reduced margin-bottom */
}

.contact-text {
    font-size: 1.2rem; /* Reduced font size */
    font-weight: 700;
    color: #444;
    margin-bottom: 0.5rem; /* Reduced margin-bottom */
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem; /* Reduced bottom margin */
}

/* Social Icons */
.social-icon {
    font-size: 3rem;
    color: #0c0b0b;
    transition: transform 0.3s ease, color 0.3s ease;
}

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

.social-icon.linkedin {
    color: #a9b1eb;
}

.social-icon.linkedin:hover {
    color: #0a66c2;
}

.social-icon.github {
    color: #e3cdcd;
}

.social-icon.github:hover {
    color: #3a3636;
}

.social-icon.google-scholar {
    color: #f5865d;
}

.social-icon.google-scholar:hover {
    color: #ea4335;
}

/* Contact Info */
.contact-info {
    margin-bottom: 0.5rem; /* Reduced bottom margin */
}

.contact-info p {
    font-size: 1.2rem;
    margin: 0.5rem 0;
    color: #555;
}

.contact-info a {
    color: #0a66c2;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #ff6f61;
}

/* Copyright Text */
.copyright p {
    font-size: 0.9rem;
    margin: 0;
    color: #777;
}

/* Easter Egg Link */
.footer-link {
    color: #0a66c2;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ff6f61;
}

/* Responsive Design */
@media (max-width: 768px) {
    .unified-contact-section {
        padding: 1rem;
    }

    .scrolling-words-container {
        font-size: 1.5rem;
        margin: 0.5rem 0; /* Adjusted margin for smaller screens */
    }

    .contact-container {
        padding: 1rem;
        margin: 1rem auto; /* Adjusted margin for smaller screens */
    }

    .contact-text0 {
        font-size: 1.5rem; /* Adjusted font size for smaller screens */
    }

    .contact-text {
        font-size: 1rem; /* Adjusted font size for smaller screens */
    }

    .social-icon {
        font-size: 2rem;
    }
}