/* General Body and Scroll Behavior */
body {
    font-family: 'Lato', sans-serif;
    scroll-behavior: smooth; /* Smooth scrolling for navigation */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* New rule: Set font-weight for all <p> tags to 300 */
p {
    font-weight: 300;
}
/* Ensure paragraphs and list items match Lato's light weight */
p, li { 
    font-weight: 300; 
}
.text-2xl {
    font-size: 1.25rem !important;
    line-height: 2rem !important;
}
.text-gray-700 {
    color: #1f2937!important;
    font-size: 17px;
}
.pl-4 {
    padding-left: 2rem !important;
}
.text-blue-700 {
    color: #1e40af !important;
    font-size: 17px;
}

/* Prevents body scrolling when modal is open */
body.modal-open-prevent-scroll {
    overflow: hidden;
    height: 100vh; /* Ensures full height on mobile */
}
/* Styles for h2, h3, h4, h5 (from case-confident.html) */
/* Style for all h2 elements */
h2 {
    /* Removed text-transform: uppercase; from here */
    font-size: 2.35rem; 
    font-weight: 700; 
}
/* Style for h3 elements (Overview, The Process, The Outcome) */
h3 { 
    font-size: 2.25rem !important;      /* Changed font size */
    text-transform: uppercase; /* Ensured uppercase */
    font-weight: 300 !important;       /* Changed font weight */
}
h4 { /* Ensure h4 are also styled consistently */
    font-weight: 600;
    font-size: 1.0rem !important; /* Set font-size to 1.0rem with !important */
}
/* Style for h5 elements (Case Study 2: and My Role) */
h5 {
    font-size: 0.875rem; /* text-sm */
    text-transform: uppercase; /* uppercase as per original h3 styling */
    font-weight: 600; /* font-semibold as per original h3 styling */
    letter-spacing: 0.05em; /* tracking-wider as per original h3 styling */
    color: #4b5563; /* gray-600 as per original h3 styling */
}
h6 {
    /* Removed text-transform: uppercase; from here */
    font-size: 2.35rem; 
	text-transform: uppercase;
    font-size: 2.35rem;
    font-weight: 400 !important;
}
.pt-24 {
    padding-top: 9rem !important; 
}
.skills-category-title, .certifications-category-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #1e40af !important;
    margin-bottom: 1rem;
}
/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Section Padding */
.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Specific override for About section bottom padding */
#about.section-padding {
    padding-bottom: 0;
    padding-top: 4rem; /* Keep consistent top padding for the section */
}

/* Case Study Card Styles */
.case-study-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer; /* Indicate clickability */
    display: block; /* Make the anchor tag behave like a block for styling */
    text-decoration: none; /* Remove underline from the entire card */
    color: inherit; /* Inherit text color from parent */
}
.case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Gallery Card Transitions and Hover Overlay (from index.html) */
.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.55rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    cursor: pointer;
    
    /* For smooth filtering movement - properties that change instantly vs. smoothly */
    transition: opacity 0.5s ease-in-out, 
                transform 0.5s ease-in-out, 
                max-height 0.5s ease-in-out 0.1s, /* Delay height collapse */
                margin 0.5s ease-in-out 0.1s, /* Delay margin collapse */
                padding 0.5s ease-in-out 0.1s, /* Delay padding collapse */
                border-width 0.5s ease-in-out 0.1s, /* Delay border collapse */
                box-shadow 0.5s ease-in-out 0.1s; /* Delay shadow collapse */
    
    box-sizing: border-box;
    will-change: transform, opacity, max-height, margin, padding, border-width, box-shadow; /* Optimize for animation */
    
    /* Fixed height for cards to ensure consistent layout. */
    height: 230px; 
}

/* Filtered items (from index.html) */
.gallery-card.filtered {
    opacity: 0;
    transform: scale(0.5); /* Subtle shrink as it disappears */
    pointer-events: none; /* Disable interaction */
    max-height: 0; /* Collapse height */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

.gallery-item-image-wrapper {
    position: relative; /* Changed to relative */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the area without distortion */
}

.gallery-item-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the area without distortion */
    transition: transform 0.3s ease-in-out;

}#galleryModalDescription {
    font-size: 17px !important;
}
#galleryModalDescription a {
	font-size: 0.99rem !important;
    font-weight: 500 !important;
}

.gallery-card:hover .gallery-item-image-wrapper img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(7, 7, 8, 0.7); /* Semi-transparent gray overlay */
    display: flex;
    flex-direction: column; /* Align title vertically */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 10; /* Ensure it's above the image */
    padding: 1rem; /* Padding for content inside overlay */
    box-sizing: border-box; /* Include padding in width/height */
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-title {
    color: white;
    font-size: 1.5rem; /* Adjust as needed */
    font-weight: 300; /* font-light */
    text-align: center;
}

/* Animation for custom bounce (from index.html) */
.animate-bounce-custom {
    animation: bounce 1s infinite;
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8,0,1,1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0,0,0.2,1);
    }
}

/* Role Tag Styles (from index.html and case-confident.html) */
.role-tag {
    background-color: #e0f2fe; /* Light blue */
    color: #0c4a6e; /* Darker blue */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Full rounded corners */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* medium */
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
}

/* Custom Modal Styles (from index.html) */
.modal {
    display: none; /* Hidden by default, will be set to flex on open */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide scrollbars, manage content scroll within */
    background-color:#fff; /* Darker overlay for full screen takeover */
    justify-content: center;
    align-items: center;
    opacity: 0; /* Start hidden for fade-in */
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Crucial: Cannot be clicked when not active */
}
.modal.is-active { /* New class for active state */
    opacity: 1; /* Fade in */
    pointer-events: auto; /* Can be clicked when active */
    display: flex; /* Ensure it's displayed */
}
#galleryModalTitle{
   font-weight: 300 !important;
}

.modal-content {
    background-color: white; /* White background for the content area */
    width: 90%; /* Reduced width for outer spacing */
    max-width: 1200px; /* Max width to prevent it from getting too wide on large screens */
    height: 90%; /* Reduced height for outer spacing */
    max-height: 800px; /* Max height to prevent it from getting too tall */
    padding: 0; /* No padding on the content wrapper itself */
    border: none; /* No border */
    border-radius: 0.75rem; /* Add some rounded corners to the modal content */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    transform: scale(1); /* No pop-in effect for full screen */
    transition: none; /* No transition on scale for full screen */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack header and body vertically */
    position: relative; /* For absolute positioning of close button */
    margin: auto; /* Center the modal content */
}

.modal-header {
    display: flex;
    justify-content: flex-end; /* Push close button to right */
    align-items: center;
    padding: 1.5rem 2.5rem; /* Increased padding from screenshot */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
    width: 100%;
    box-sizing: border-box;
}

.close-button {
    color: #9ca3af; /* Light gray color from screenshot */
    font-size: 2.5rem; /* Larger 'x' icon */
    font-weight: 200; /* Lighter weight for 'x' */
    cursor: pointer;
    line-height: 1; /* Adjust line height for better vertical centering */
}

.close-button:hover,
.close-button:focus {
    color: #4b5563; /* Slightly darker on hover */
    text-decoration: none;
}

/* Modal Body for image and text content */
.modal-body {
    display: flex;
    flex-grow: 1; /* Take up remaining vertical space */
    overflow: hidden; /* Hide scrollbars on this container */
    align-items: center; /* Vertically center content if there's extra space */
    min-height: 60vh; /* Ensure modal body has a minimum height for proportionality */
}

.modal-left-panel {
    flex: 2; /* Takes 2 parts of space */
    background-color: white; /* Ensure background is white */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide scrollbars if content overflows */
    padding: 0.5rem; /* Reduced padding to decrease spacing */
    height: 100%; /* Ensure left panel takes full height of modal-body */
    min-height: 400px; /* Ensure a minimum height for the image panel */
    max-height: 80vh; /* Prevent it from getting too tall */
    border-radius: 0.75rem; /* Added border-radius to match overall modal */
}

.modal-right-panel {
    flex: 1; /* Takes 1 part of space */
    padding: 1.5rem; /* Changed padding to 1.5rem as requested */
    background-color: white; /* Ensure background is white */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center text if short */
    align-items: flex-start; /* Align text to the left */
    max-height: 80vh; /* Limit height to prevent excessive stretching */
    overflow-y: auto; /* Allow scrolling for text content if it overflows */
}

@media (max-width: 1023px) { /* On medium screens and below */
    .modal-body {
        flex-direction: column; /* Stack image and text vertically */
        overflow-y: auto; /* Allow scrolling for content if needed */
    }
    .modal-left-panel, .modal-right-panel {
        flex: none; /* Remove flex sizing */
        width: 100%; /* Take full width */
        height: auto; /* Adjust height based on content */
    }
    .modal-left-panel {
        height: 60vh; /* Fixed height for image on smaller screens */
        max-height: none; /* Remove max-height on smaller screens */
    }
    .modal-right-panel {
        max-height: none; /* Remove max-height on smaller screens */
    }
}
@media (max-width: 767px) { /* On small screens */
     .modal-header {
        padding: 1rem 1.5rem; /* Smaller padding on mobile */
    }
    .modal-left-panel, .modal-right-panel {
        padding: 1.5rem; /* Smaller padding on mobile */
    }
}


/* Slideshow Specific Styles */
.slideshow-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.slideshow-wrapper {
    position: relative; /* CRITICAL: Added for absolute positioning of children */
    width: 100%;
    height: 100%;
}

.slideshow-wrapper img {
    position: absolute; /* Stack images */
    top: 0;
    left: 0; /* Start from left 0, and use transform for positioning */
    width: 100%; /* Fill the wrapper width */
    height: 100%;
    object-fit: contain; /* Contain to ensure image is fully visible */
    border-radius: 0.75rem; /* Added border-radius to images for consistency */
    
    /* Default state: off-screen right, and hidden */
    transform: translateX(100%); 
    opacity: 0; /* Hidden by default */
    z-index: 0; 
    
    /* Transition for transform and opacity */
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s ease-in-out;
}

/* Active slide styles (applied by JS) */
.slideshow-wrapper img.active {
    transform: translateX(0); /* Center the active slide */
    opacity: 1; /* Fully visible */
    z-index: 1; /* Changed from 2 to 1: New slide is now "under" the outgoing slide */
}

/* Outgoing slide styles (applied by JS) */
.slideshow-wrapper img.outgoing {
    transform: translateX(-100%); /* Slide out to the left */
    opacity: 1; /* Kept visible during slide out as requested */
    z-index: 2; /* Changed from 1 to 2: Outgoing slide is now "on top" */
}


/* Filter buttons: text color highlight only */
.filter-button {
    @apply px-4 py-2 rounded-full text-sm font-medium transition duration-300 ease-in-out;
    @apply text-gray-700; /* Default text color */
    background-color: transparent; /* Ensure no default background */
    border: none; /* Ensure no default border */
    cursor: pointer;
}

.filter-button:hover {
    color: #3b82f6; /* Blue text on hover */
}

.filter-button.active {
    color: #3b82f6; /* Blue text when active */
    background-color: transparent; /* No background color */
    box-shadow: none; /* No shadow for active state */
}

/* Navbar scroll effect */
#main-navbar {
    background-color: transparent; /* Initially transparent */
    box-shadow: none; /* No shadow initially */
    transition: background-color 1s ease-in-out, box-shadow 1s ease-in-out, padding 0.6s ease-in-out; /* Slower and softer transition, padding slower */
    padding-top: 2rem; /* Larger initial height */
    padding-bottom: 2rem; /* Larger initial height */
}

#main-navbar.navbar-scrolled {
    background-color: white; /* White background on scroll */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* More prominent shadow on scroll */
    padding-top: 1rem; /* Slightly reduced height on scroll */
    padding-bottom: 1rem; /* Slightly reduced height on scroll */
}

/* Colors for logo and links are dynamic, changing on scroll */
/* Initial state (transparent navbar) */
#main-navbar .navbar-logo-name {
    color: white;
    transition: color 0.8s ease-in-out;
    font-size: 1.875rem; /* text-3xl */
    line-height: 1.2; /* Adjust line height for better stacking with title */
}
#main-navbar .navbar-logo-title {
    color: white;
    transition: color 0.8s ease-in-out;
    font-size: 1.4rem; /* Larger font size as requested */
    font-weight: 300; /* font-light as requested */
    margin-top: -0.25rem; /* Pull closer to the name */
}
#main-navbar .md\:flex a {
    color: white;
    transition: color 0.8s ease-in-out;
    font-size: 1.125rem; /* text-lg */
    position: relative; /* For active indicator */
    padding-bottom: 0.25rem; /* Space for indicator */
}
#main-navbar #mobile-menu-button {
    color: white;
    transition: color 0.8s ease-in-out;
}

/* Scrolled state */
#main-navbar.navbar-scrolled .navbar-logo-name {
    color: #1e40af; /* Deep blue for name */
}
#main-navbar.navbar-scrolled .navbar-logo-title {
    color: #3b82f6; /* Lighter blue for title */
}
#main-navbar.navbar-scrolled .md\:flex a {
    color: #3b82f6; /* Lighter blue for navigation links */
}
/* Ensure mobile menu button changes color when scrolled on index.html */
#main-navbar.navbar-scrolled #mobile-menu-button {
    color: #1e40af !important; /* Deep blue for the icon when scrolled */
    transition: color 0.8s ease-in-out; /* Add transition for smoothness */
}
body.case-study-page #main-navbar #mobile-menu-button {
    color: #3b82f6; /* Lighter blue for mobile menu icon on case study page */
}

/* Active link indicator and hover effect */
.md\:flex a::after {
    content: '...';
    position: absolute;
    bottom: .5rem; 
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    font-size: 2rem; 
    line-height: 0;
    color: currentColor;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    text-align: center;
}

/* Show and expand on active or hover */
.md\:flex a.active::after,
.md\:flex a:hover::after {
    transform: translateX(-50%) scaleX(1.3); /* Slightly expand when active/hover */
    opacity: 1; /* Visible */
}

/* Specific section headings that override base h2 */
.section-heading {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* gray-900 */
    margin-bottom: 0.5rem; /* mb-2 */
    text-align: center;
}

.section-subheading {
    font-size: 1.125rem; /* text-lg */
    color: #4b5563; /* gray-700 */
    margin-bottom: 3rem; /* mb-12 */
    text-align: center;
}

/* Skills and Certifications section styles */
.skills-card, .certifications-card {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    margin-bottom: 1.5rem; /* Space between cards */
}
/* New style for individual certification items */
.certifications-item-card {
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.certifications-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.skills-category-title, .certifications-category-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #3b82f6; /* Tailwind blue-500, matching reference image */
    margin-bottom: 1rem;
}
.certifications-item-title {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* gray-900 */
    margin-bottom: 0.25rem; /* mb-1 */
}
.certifications-item-provider {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* gray-700 */
}

.skill-pill {
    background-color: #e0f2fe; /* Light blue */
    color: #0c4a6e; /* Darker blue */
    padding: 0.4rem 1rem;
    border-radius: 9999px; /* Full rounded corners */
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* Prevents wrapping within a pill */
}
.gap-2 {
    gap: 0.1rem!important;
}

/* Custom styles for Hero section text alignment and sizing */
.hero-content-wrapper {
    position: relative;
    z-index: 10;
    max-width: 4xl; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-top: 0rem;
    padding-bottom: 3rem; /* py-12 */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
    align-items: flex-start; /* Align all children to the start (left) */
}

/* Style for the h2 containing "Expertise Includes:" */
.hero-content-wrapper h2 {
    font-size: 1rem !important; /* Set font size to 1rem with !important */
    margin-bottom: 0.0rem; /* Set margin-bottom to 0.0rem as requested */
}

/* Style for the h1 containing the typed text */
.hero-typed-text-container {
    width: 100%; /* Default to 100% on smaller screens */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    min-height: 5rem; /* Keeps vertical space */
    display: block;
}

/* Responsive adjustments for desktop screens */
@media (min-width: 769px) { /* For desktop view and larger */
    .hero-typed-text-container {
        width: 48rem; /* Fixed width to prevent shifting, ensures space for longest string */
    }
    #typed-text {
        font-size: 5rem !important; /* Set desktop font size to 5rem */
    }
    .typed-cursor {
        font-size: 5rem !important; /* Set desktop cursor font size to 5rem */
    }
}

/* Responsive adjustments for smaller screens (mobile) */
@media (max-width: 768px) {
    .hero-typed-text-container {
        max-width: 100%; /* On small screens, allow it to take full width */
        min-height: auto; /* Allow height to adjust to content */
        height: auto; /* Allow height to adjust to content */
        display: block; /* Ensure it's a block element */
        white-space: normal; /* Allow text to wrap */
        word-break: break-word; /* Force long words to break */
    }
    #typed-text {
        font-size: 3rem !important; /* Adjusted font size for mobile */
        line-height: 1.2 !important; /* Ensure proper line spacing for wrapped text */
        display: inline-block !important; /* Keep it inline-block to stay with cursor */
        width: auto !important; /* Allow width to be determined by content */
        text-align: left; /* Ensure left alignment on mobile */
    }
    .typed-cursor {
        font-size: 3rem !important; /* Adjust cursor font size for mobile */
        line-height: 1.2 !important; /* Ensure proper line spacing for wrapped text */
        display: inline-block !important; /* Keep it inline-block to stay with text */
        width: auto !important; /* Allow width to be determined by content */
    }
    .hero-content-wrapper {
        padding-top: 5rem; /* Ensure enough top padding to push content down from fixed navbar */
    }
}

/* Hero section specific styles for parallax background */
#hero {
    background-image: url('https://www.jrichresume.com/assets/header-bg.jpg'); /* Placeholder background image */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* Added padding-top to ensure content is below fixed navbar for hero section */
    padding-top: 5rem; /* Adjust this value as needed based on your navbar's height */
}
.hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0 0 0 / 45%); /* Slightly darker overlay */
    z-index: 1; /* Below content, above background image */
}
/* Make hero background fixed */
#heroParallaxBg {
    background-attachment: fixed;
}

/* Typed.js Cursor Blinking Animation */
.typed-cursor {
    opacity: 1;
    animation: typedBlink 0.7s infinite; /* Blinking animation */
    /* Font size for desktop is handled in media query */
}
@keyframes typedBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Return to Top Button Styles */
#return-to-top {
    position: fixed;
    bottom: 2rem; 
    right: 2rem; 
    background-color: #3b82f6; /* Blue background */
    color: white;
    padding: 0.75rem 1rem; 
    border-radius: 9999px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); 
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Hidden from screen readers and interaction */
    z-index: 999; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; 
}

#return-to-top.show {
    opacity: 0.5; 
    visibility: visible;
}

/* Tailwind's bg-gray-100 utility class is overridden here (from index.html) */
.bg-gray-100 {
    background-color: #a8c7fa99 !important;
}

/* Styles specific to the navigation on case-confident.html when it's the main navbar */
/* These rules will ensure the navbar on case-confident.html starts as white and styled as if it's already scrolled */
body.case-study-page #main-navbar {
    padding-top: 1rem; /* Adjust padding to match index.html's scrolled state height */
    padding-bottom: 1rem; /* Adjust padding to match index.html's scrolled state height */
}

body.case-study-page #main-navbar .navbar-logo-name {
    color: #1e40af; /* Deep blue for name */
}
body.case-study-page #main-navbar .navbar-logo-title {
    color: #3b82f6; /* Lighter blue for title */
}
body.case-study-page #main-navbar .md\:flex a {
    color: #3b82f6; /* Lighter blue for navigation links */
}
body.case-study-page #main-navbar #mobile-menu-button {
    color: #3b82f6; /* Lighter blue for mobile menu icon */
}

/* Active link indicator and hover effect */
.md\:flex a::after {
    content: '...';
    position: absolute;
    bottom: .5rem; 
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    font-size: 2rem; 
    line-height: 0;
    color: currentColor;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
    text-align: center;
}

/* Show and expand on active or hover */
.md\:flex a.active::after,
.md\:flex a:hover::after {
    transform: translateX(-50%) scaleX(1.3); /* Slightly expand when active/hover */
    opacity: 1; /* Visible */
}

/* Specific section headings that override base h2 */
.section-heading {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* gray-900 */
    margin-bottom: 0.5rem; /* mb-2 */
    text-align: center;
}

.section-subheading {
    font-size: 1.125rem; /* text-lg */
    color: #4b5563; /* gray-700 */
    margin-bottom: 3rem; /* mb-12 */
    text-align: center;
}

/* Skills and Certifications section styles */
.skills-card, .certifications-card {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    margin-bottom: 1.5rem; /* Space between cards */
}
/* New style for individual certification items */
.certifications-item-card {
    background-color: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.certifications-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.skills-category-title, .certifications-category-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #3b82f6; /* Tailwind blue-500, matching reference image */
    margin-bottom: 1rem;
}
.certifications-item-title {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* gray-900 */
    margin-bottom: 0.25rem; /* mb-1 */
}
.certifications-item-provider {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* gray-700 */
}

.skill-pill {
    background-color: #e0f2fe; /* Light blue */
    color: #0c4a6e; /* Darker blue */
    padding: 0.4rem 1rem;
    border-radius: 9999px; /* Full rounded corners */
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* Prevents wrapping within a pill */
}
.gap-2 {
    gap: 0.1rem!important;
}