/* Add focus states */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 3px solid var(--focus-outline-color); /* Use variable for consistency */
  outline-offset: 3px;
}

/* Screen reader text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

* {
    box-sizing: border-box;
}

:root {
    /* Core Palette */
    --primary-color: #fa4141;
    --primary-darker: #c22a2a;
    --primary-lighter: #ff5b5b;
    --focus-outline-color: var(--primary-color);

    /* Light Theme Colors */
    --clr-bg-light: #f9f9f9;
    --clr-text-main-light: #000000;
    --clr-text-muted-light: #1d1d1d;
    --clr-text-soft-light: #333333;
    --clr-text-on-primary-light: #ffffff; /* Text on primary-color backgrounds */
    --clr-card-bg-light: #ffffff;
    --clr-navbar-bg-light: var(--primary-color);
    --clr-footer-bg-light: var(--primary-darker);
    --clr-contact-form-bg-light: #ffffffcc;
    --clr-input-bg-light: #ffffff;
    --clr-input-border-light: var(--primary-color);
    --clr-input-text-light: #000000;
    --clr-input-placeholder-light: #202020;
    --clr-input-focus-shadow-light: rgba(250, 65, 65, 0.2);
    --clr-services-section-bg-light: #f9f9f9;
    --clr-project-info-bg-light: rgba(255, 255, 255, 0.8);
    --clr-faq-item-border-light: #9e9e9e; /* Made border more visible */
    --clr-modal-bg-light: #ffffff;
    --clr-modal-text-light: #333;
    --clr-dropdown-bg-light: rgba(250, 65, 65, 0.98);
    --clr-dropdown-text-light: rgba(255, 255, 255, 0.9);    
    --clr-contact-section-bg-light: var(--clr-bg-light);
    --clr-contact-header-text-light: var(--clr-text-main-light); /* Dark text for light contact bg */
    --clr-expand-btn-bg-light: rgba(255, 255, 255, 0.9);
    --clr-expand-btn-icon-fill-light: var(--primary-color);
    --clr-contact-form-shadow-light: 0 15px 35px rgba(0, 0, 0, 0.08);
    --clr-expand-btn-hover-bg-light: var(--primary-color);
    --clr-expand-btn-hover-icon-fill-light: #ffffff;
    --clr-theme-slider-bg-light: #ff5656;
    --clr-theme-slider-knob-light: var(--primary-color);
    --clr-theme-slider-checked-bg-light: var(--primary-color-lighter);
    --clr-section-devider-light: #8b8b8b;
    /* Lightbox specific */
    --clr-lightbox-arrow-icon-hover-light: var(--primary-color);
    --clr-lightbox-close-icon-hover-light: var(--primary-color);
    --clr-video-progress-bg-light: #cccccc;
    --clr-video-progress-value-light: var(--primary-color);

    /* Dark Theme Colors */
    --clr-bg-dark: #121212;
    --clr-text-main-dark: #e0e0e0;
    --clr-text-muted-dark: #a0a0a0;
    --clr-text-soft-dark: #888888;
    --clr-text-on-primary-dark: #e0e0e0; /* Text on primary-color backgrounds in dark mode */
    --clr-card-bg-dark: #141414;
    --clr-navbar-bg-dark: var(--primary-color);
    --clr-footer-bg-dark: var(--primary-darker);
    --clr-contact-form-bg-dark: #141414;
    --clr-input-bg-dark: #141414;
    --clr-input-border-dark: var(--primary-lighter);
    --clr-input-text-dark: #e0e0e0;
    --clr-input-placeholder-dark: #777;
    --clr-input-focus-shadow-dark: rgba(255, 91, 91, 0.3);
    --clr-services-section-bg-dark: #1a1a1a;
    --clr-project-info-bg-dark: rgba(30, 30, 30, 0.85);
    --clr-faq-item-border-dark: #333;
    --clr-modal-bg-dark: #282828;
    --clr-modal-text-dark: #c7c7c7;
    --clr-dropdown-bg-dark: rgba(40, 40, 40, 0.98);
    --clr-dropdown-text-dark: rgba(220, 220, 220, 0.9);
    --clr-contact-section-bg-dark: var(--clr-bg-dark); /* New: Solid deep, dark slate/charcoal */
    --clr-contact-header-text-dark: var(--clr-text-main-dark); /* Light text for dark contact bg */
    --clr-expand-btn-bg-dark: rgba(50, 50, 50, 0.9);
    --clr-expand-btn-icon-fill-dark: var(--primary-lighter);
    --clr-contact-form-shadow-dark: 0 15px 35px rgba(0, 0, 0, 0.2);
    --clr-expand-btn-hover-bg-dark: var(--primary-lighter);
    --clr-expand-btn-hover-icon-fill-dark: #121212;
    --clr-theme-slider-bg-dark: #1f1f1f;
    --clr-theme-slider-knob-dark: #303030;
    --clr-theme-slider-checked-bg-dark: #181818;
    /* Blog specific */
    --blockquote-bg-light: #f8f9fa;
    --blockquote-bg-dark: #1e1e1e; /* Slightly lighter than card background in dark mode */
    /* Lightbox specific */
    --clr-lightbox-arrow-icon-hover-dark: var(--primary-lighter);
    --clr-lightbox-close-icon-hover-dark: var(--primary-lighter);
    --clr-video-progress-bg-dark: #444444;
    --clr-video-progress-value-dark: var(--primary-lighter);
    --clr-section-devider-dark: #333;

    /* Back to Top Button - Dark Theme */
    --clr-back-to-top-bg-dark: var(--primary-lighter);
    --clr-back-to-top-text-dark: #121212; /* Dark text for contrast on lighter primary */
    --clr-back-to-top-hover-bg-dark: var(--primary-color);
    --clr-back-to-top-hover-text-dark: var(--clr-text-main-dark); /* Light text on primary */
    
    /* Icon colors for theme toggle */
    --clr-icon-sun-light: #f39c12; /* Sun color in light mode (active) */
    --clr-icon-moon-light: #465A7A; /* Moon color in light mode (inactive, if made visible) */

    --clr-icon-sun-dark: #7f8c8d; /* Sun color in dark mode (inactive, if made visible) */
    --clr-icon-moon-dark: #f1c40f; /* Moon color in dark mode (active) */

    /* Back to Top Button - Light Theme */
    --clr-back-to-top-bg-light: var(--primary-color);
    --clr-back-to-top-text-light: var(--clr-text-on-primary-light);
    --clr-back-to-top-hover-bg-light: var(--primary-darker);
    --clr-back-to-top-hover-text-light: var(--clr-text-on-primary-light);


    /* Semantic Variables (default to light theme) */
    --bg-color: var(--clr-bg-light);
    --text-color: var(--clr-text-main-light);
    --text-muted-color: var(--clr-text-muted-light);
    --text-soft-color: var(--clr-text-soft-light);
    --text-on-primary-color: var(--clr-text-on-primary-light);
    --card-bg-color: var(--clr-card-bg-light);
    --navbar-bg-color: var(--clr-navbar-bg-light);
    --footer-bg-color: var(--clr-footer-bg-light);
    --contact-form-bg: var(--clr-contact-form-bg-light);
    --input-bg-color: var(--clr-input-bg-light);
    --input-border-color: var(--clr-input-border-light);
    --input-text-color: var(--clr-input-text-light);
    --input-placeholder-color: var(--clr-input-placeholder-light);
    --input-focus-shadow: var(--clr-input-focus-shadow-light);
    --services-section-bg-color: var(--clr-services-section-bg-light);
    --project-info-bg-color: var(--clr-project-info-bg-light);
    --faq-item-border-color: var(--clr-faq-item-border-light);
    --modal-content-bg: var(--clr-modal-bg-light);
    --modal-text-color: var(--clr-modal-text-light);
    --dropdown-bg-color: var(--clr-dropdown-bg-light);
    --dropdown-text-color: var(--clr-dropdown-text-light);
    --contact-section-overall-bg: var(--clr-contact-section-bg-light); /* New semantic var for section bg */
    --contact-section-header-text-color: var(--clr-contact-header-text-light); /* New semantic var for header text */
    --expand-btn-bg: var(--clr-expand-btn-bg-light);
    --expand-btn-icon-fill: var(--clr-expand-btn-icon-fill-light);
    --contact-form-main-shadow: var(--clr-contact-form-shadow-light);
    --expand-btn-hover-bg: var(--clr-expand-btn-hover-bg-light);
    --expand-btn-hover-icon-fill: var(--clr-expand-btn-hover-icon-fill-light);
    --theme-slider-bg: var(--clr-theme-slider-bg-light);
    --theme-slider-knob-bg: var(--clr-theme-slider-knob-light);
    --theme-slider-checked-bg: var(--clr-theme-slider-checked-bg-light);
    --blockquote-bg-color: var(--blockquote-bg-light);
    --lightbox-arrow-icon-hover-color: var(--clr-lightbox-arrow-icon-hover-light);
    --lightbox-close-icon-hover-color: var(--clr-lightbox-close-icon-hover-light);
    --video-progress-bg-color: var(--clr-video-progress-bg-light);
    --video-progress-value-color: var(--clr-video-progress-value-light);
    --section-devider-color: var(--clr-section-devider-light);
    --back-to-top-bg-color: var(--clr-back-to-top-bg-light);
    --back-to-top-text-color: var(--clr-back-to-top-text-light);
    --back-to-top-hover-bg-color: var(--clr-back-to-top-hover-bg-light);
    --back-to-top-hover-text-color: var(--clr-back-to-top-hover-text-light);
    /* Semantic icon colors for toggle */
    --icon-sun-color: var(--clr-icon-sun-light);
    --icon-moon-color: var(--clr-icon-moon-light); /* Default to inactive color */
}

html {
    scroll-behavior: smooth; /* More common for in-page navigation */
    overflow-y: scroll; /* Keeps scrollbar visible to prevent layout shifts */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    text-shadow: none;
    line-height: 1.6; /* Improved base line height for readability */
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
    --bg-color: var(--clr-bg-dark);
    --text-color: var(--clr-text-main-dark);
    --text-muted-color: var(--clr-text-muted-dark);
    --text-soft-color: var(--clr-text-soft-dark);
    --text-on-primary-color: var(--clr-text-on-primary-dark);
    --card-bg-color: var(--clr-card-bg-dark);
    --navbar-bg-color: var(--clr-navbar-bg-dark);
    --footer-bg-color: var(--clr-footer-bg-dark);
    --contact-form-bg: var(--clr-contact-form-bg-dark);
    --input-bg-color: var(--clr-input-bg-dark);
    --input-border-color: var(--clr-input-border-dark);
    --input-text-color: var(--clr-input-text-dark);
    --input-placeholder-color: var(--clr-input-placeholder-dark);
    --input-focus-shadow: var(--clr-input-focus-shadow-dark);
    --services-section-bg-color: var(--clr-services-section-bg-dark);
    --project-info-bg-color: var(--clr-project-info-bg-dark);
    --faq-item-border-color: var(--clr-faq-item-border-dark);
    --modal-content-bg: var(--clr-modal-bg-dark);
    --modal-text-color: var(--clr-modal-text-dark);
    --dropdown-bg-color: var(--clr-dropdown-bg-dark);
    --dropdown-text-color: var(--clr-dropdown-text-dark);
    --contact-section-overall-bg: var(--clr-contact-section-bg-dark); /* New semantic var for section bg */
    --contact-section-header-text-color: var(--clr-contact-header-text-dark); /* New semantic var for header text */
    --expand-btn-bg: var(--clr-expand-btn-bg-dark);
    --expand-btn-icon-fill: var(--clr-expand-btn-icon-fill-dark);
    --contact-form-main-shadow: var(--clr-contact-form-shadow-dark);
    --expand-btn-hover-bg: var(--clr-expand-btn-hover-bg-dark);
    --expand-btn-hover-icon-fill: var(--clr-expand-btn-hover-icon-fill-dark);
    --theme-slider-bg: var(--clr-theme-slider-bg-dark);
    --theme-slider-knob-bg: var(--clr-theme-slider-knob-dark);
    --theme-slider-checked-bg: var(--clr-theme-slider-checked-bg-dark);
    --blockquote-bg-color: var(--blockquote-bg-dark);
    --lightbox-arrow-icon-hover-color: var(--clr-lightbox-arrow-icon-hover-dark);
    --lightbox-close-icon-hover-color: var(--clr-lightbox-close-icon-hover-dark);
    --video-progress-bg-color: var(--clr-video-progress-bg-dark);
    --video-progress-value-color: var(--clr-video-progress-value-dark);
    --section-devider-color: var(--clr-section-devider-dark);
    --back-to-top-bg-color: var(--clr-back-to-top-bg-dark);
    --back-to-top-text-color: var(--clr-back-to-top-text-dark);
    --back-to-top-hover-bg-color: var(--clr-back-to-top-hover-bg-dark);
    --back-to-top-hover-text-color: var(--clr-back-to-top-hover-text-dark);
    /* Update semantic icon colors for dark mode */
    --icon-sun-color: var(--clr-icon-sun-dark); /* Sun becomes inactive color in dark */
    --icon-moon-color: var(--clr-icon-moon-dark); /* Moon becomes active color in dark */
}

.navbar {
    position: sticky;
    width: 100%;
    background: var(--navbar-bg-color);
    color: var(--text-on-primary-color);
    transition: top 0.3s;
    z-index: 1000;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar-controls {
    display: flex;
    align-items: center;
    gap: 20px; /* Adjust as needed for spacing between nav items and toggle */
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* Remove vertical padding, keep horizontal */
}

.logo img {
    width: 75px;
    height: auto;
    margin: 0;
    padding-top: 2px;
}

.toggle {
    display: none;
    font-size: 1.5em;
    cursor: pointer;
    order: 2; /* Ensure hamburger is after theme toggle on mobile if both are in navbar-controls */
}

.nav-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-list li {
    margin: 0; /* Remove horizontal margins so items can touch */
    font-weight: bold; /* Text is already bold as per existing style */
    position: relative; /* Needed for the ::after pseudo-element positioning */
    /* Further reduced vertical padding for a skinnier navbar, kept horizontal padding */
    padding: 10px 20px; /* e.g., 10px top/bottom, 20px left/right. Adjust as needed. */
    transition: background-color 0.3s ease;
}

.nav-list a {
    text-decoration: none;
    color: var(--text-on-primary-color);
    padding: 0; /* Remove padding from <a>, as <li> now handles it for the hover block */
                     /* Adjust as needed with li's vertical padding for desired block size */
    display: block; /* Make the link fill the li's padded area */
    position: relative; /* To ensure link text is above the ::after pseudo-element */
    z-index: 1;
    transition: color 0.3s ease;
}

/* New hover effect for the list item */
.nav-list li:hover {
    background-color: white; /* The list item's background turns white */
}

.nav-list li:hover a {
    color: var(--primary-color); /* Link text turns to the primary color */
}

/* The "dropping down" pseudo-element */
.nav-list li::after {
    content: '';
    position: absolute;
    top: 100%; /* Positioned right below the bottom of the li */
    left: 0;
    right: 0;
    height: 0; /* Starts with no height */
    background-color: white; /* Same color as the li's hover background */
    transition: height 0.2s ease-out; /* Smooth animation for the drop effect */
}

.nav-list li:hover::after {
    height: 5px; /* On hover, the pseudo-element gains height, creating the drop */
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%; /* Attach directly to bottom of navbar */
    background: var(--dropdown-bg-color);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    overflow: hidden;
    animation: dropdownSlide 0.3s ease-out;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

/* Remove the arrow */
.dropdown::before {
    content: none;
}

.dropdown-list {
    padding: 10px 0;
    width: 100vw;
}

.dropdown-list li {
    margin: 0;
}

.dropdown-list a {
    padding: 15px 30px;
    font-size: 1.1em;
    transition: all 0.3s ease;
    color: var(--dropdown-text-color);
}

.dropdown-list a:hover {
    background: rgba(255, 182, 193, 0.15);
    padding-left: 35px;
}

.dropdown-list a:hover::before {
    content: '•';
    position: absolute;
    left: 15px;
    color: var(--primary-lighter); /* Or a lighter shade of primary */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .dropdown {
        top: 100%;
        right: 0;
        border-bottom-left-radius: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .dropdown-list a {
        padding: 12px 25px;
    }
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.masthead {
    /* Ensure masthead is ready for new flexbox centering and text color */
    position: relative;
    height: 100vh; /* Changed from 100vh to 60vh */
    overflow: hidden;
    display: flex; 
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary-color); /* Default text color for masthead (usually white) */
}

/* Styles for project-specific mastheads remain, targeting the .project-masthead class */
.masthead.project-masthead { 
    height: 35vh; /* Increased height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; 
    overflow: hidden; 
}

.masthead.project-masthead .background-image {
    position: absolute; /* Take out of flex flow */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the .project-masthead parent */
    animation: none; /* Remove pan animation */
    background-position: center;
    background-size: cover;
    filter: brightness(0.75); /* Slightly reduced darkening */
}

.masthead.project-masthead .content { /* This .content is for project pages, not the main masthead */
    max-width: 100vw; /* Ensure content doesn't overflow */
    padding: 20px; /* Increased padding */
    position: relative; 
    z-index: 2; /* Above background image */
    
}

.masthead.project-masthead h1 {
    font-size: 2.8em; /* Larger */
    color: #fff; /* Ensure white */
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.masthead.project-masthead h3 {
    font-size: 1.5em; /* Subtitle, e.g., "Product Visualization" */
    color: #eee; /* Lighter gray */
    font-weight: 400;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.masthead.project-masthead .background-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Reduced overlay opacity */
}

/* --- Project Page Main Content Wrapper --- */
.project-page-content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* --- Project Overview Section --- */
.project-overview-section { /* Replaces .flex-container for overview */
    padding: 40px 0;
    border-bottom: 1px solid var(--section-devider-color);
    margin-bottom: 40px;
}

.project-overview-section h2 { /* "Project Overview" title */
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 40px;
    color: var(--text-color);
}

.project-overview-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Align items to the top */
}

.project-description-column {
    flex: 2; /* Takes more space */
}

.project-description-column h3 { /* "About This Project" */
    font-size: 1.6em;
    margin-bottom: 15px;
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
    display: inline-block;
}

.project-description-column p {
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--text-muted-color);
}

.project-details-column {
    flex: 1;
    background-color: var(--card-bg-color);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
body:not(.dark-mode) .project-details-column {
    border: 1px solid #e0e0e0;
}
body.dark-mode .project-details-column {
    border: 1px solid #2a2a2a;
}

.project-details-column h4 { /* "Details" or similar heading for this column */
    font-size: 1.4em;
    margin-bottom: 20px;
    color: var(--text-color);
}

.project-detail-item {
    margin-bottom: 15px;
}

.project-detail-item strong { /* For labels like "Category:", "Software:" */
    display: block;
    font-size: 0.9em;
    color: var(--text-soft-color);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-detail-item p { /* For the actual detail text */
    font-size: 1em;
    color: var(--text-muted-color);
    margin: 0;
}

.project-type-tag { /* Replaces .project-type span for better styling */
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--text-on-primary-color);
    padding: 6px 12px;
    border-radius: 20px; /* Pill shape */
    font-size: 0.9em;
    font-weight: 500;
}

/* --- Project Gallery Section --- */
.project-gallery-section { /* Replaces .portfolio for gallery */
    padding: 40px 0;
}

.project-gallery-section h2 { /* "Project Gallery" title */
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 40px;
    color: var(--text-color);
}

.project-gallery-grid { /* Replaces .grid-container for gallery */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive 2-column, then 1 */
    gap: 30px;
}
@media (min-width: 769px) { /* Ensure 2 columns on larger screens */
    .project-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.project-gallery-item { /* Replaces .square for gallery items */
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Softer radius */
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 16 / 10; /* More rectangular, adjust as needed */
    cursor: pointer; /* Indicate that the item is clickable */
}

.project-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.project-gallery-item img.gallery-image { /* Specific to images */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.project-gallery-item video.video-preview { /* Specific to videos */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain for videos */
    display: block;
    background-color: #000; /* Add a black background for letterboxing */
}

.project-gallery-item .overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%); /* Subtle gradient from bottom */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex; 
    opacity: 0; /* Hidden by default, shown on hover */
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}
.project-gallery-item:hover .overlay {
    opacity: 1;
}



/* Responsive adjustments for new project page layout */
@media (max-width: 768px) {
    .masthead.project-masthead {
        height: 30vh;
    }
    .masthead.project-masthead h1 {
        font-size: 2em;
    }
    .masthead.project-masthead h3 {
        font-size: 1.2em;
    }

    .project-overview-layout {
        flex-direction: column;
    }
    .project-details-column { 
        margin-top: 30px; /* Add space when it stacks */
    }
    /* .project-gallery-grid already handles single column on mobile via auto-fit */
}

.masthead .content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin-top: 30px;
    padding: 20px;
}

.masthead.project-masthead .content::before {
    display: none; /* This was already here, ensure it remains for project pages if they use this structure */
}

/* Old masthead typography - replaced by new specific classes */
.masthead h1 {
    margin-bottom: 0;
    margin-top: 0;
}

.masthead h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.masthead h3 {
    margin-top: 0;
    margin-bottom: 10px;
}
.masthead p {
    font-size: 1.2em;
}

/* Old button container - replaced by .masthead-cta-buttons */
.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 40px;
}

/* Masthead Redesign - New Styles */
.masthead-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind overlay and content */
    background-image: url('Assets/Images/Knife.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.masthead-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Apply a solid color for the top half, then a gradient for the bottom half */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 2; /* Above video, below content */
}

.masthead-content-new {
    position: relative; /* To sit above the overlay */
    z-index: 3;
    text-align: center;
    padding: 20px;
}

/* This container is specifically for the text content within the new masthead */
.masthead-content-new .masthead-text-content {
    max-width: 800px; /* Optimal text line length */
    margin-left: auto;
    margin-right: auto; /* Center the block */
}

.masthead-title {
    font-size: 3.0em; /* Prominent title, adjusted for consistency */
    font-weight: 700;
    margin-bottom: 0.25em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Subtle shadow for readability */
    animation: fadeInDown 1s ease-out;
}

.masthead-tagline {
    font-size: 1.8em;
    font-weight: 400;
    margin-bottom: 0.75em;
    color: var(--text-on-primary-color); /* Adjusted for theme variable */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 1s ease-out 0.3s;
    animation-fill-mode: backwards; /* Ensures element is not visible before animation starts */
}

.masthead-description {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 2em;
    max-width: 600px; /* Constrain width for better readability */
    margin-left: auto;
    margin-right: auto;
    color: var(--text-on-primary-color); /* Adjusted for theme variable */
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.6s;
    animation-fill-mode: backwards;
}

.masthead-cta-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
    animation: fadeInUp 1s ease-out 0.9s;
    animation-fill-mode: backwards;
}

/* --- Section Divider Bar --- */
.section-divider {
    border: 0;
    height: 1px;
    background-color: var(--section-devider-color); /* Uses existing themeable color */
    width: 60%;
    max-width: 800px; /* Cap width for very large screens */
    margin: 40px auto; /* 40px top and bottom margin, centered horizontally */
}

.section-divider-first {
    margin-top: 100px; /* Larger top margin for the first divider after masthead */
}

/* --- Common Section Title & Text Styles --- */
.portfolio h2,
#services h2,
.faq-section .section-header h2,
.contact-me .contact-header h2 {
    font-size: 2.5em; /* Standard desktop size */
}

.services-intro,
.faq-section .section-header .expand-instruction,
.contact-me .contact-header .contact-subtitle {
    font-size: 1.1em; /* Standard desktop size */
}

@media (max-width: 768px) {
    .portfolio h2,
    #services h2,
    .faq-section .section-header h2,
    .contact-me .contact-header h2 {
        font-size: 2.0em; /* Standard mobile size */
    }

    .services-intro,
    .faq-section .section-header .expand-instruction,
    .contact-me .contact-header .contact-subtitle {
        font-size: 1.0em; /* Standard mobile size */
    }
}
/* Keyframe animations for text reveal */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CTA Button Enhancements */
.cta-button {
    padding: 12px 28px; /* Slightly larger padding */
    /* background-color will be set by primary/secondary classes */
    /* color will be set by primary/secondary classes */
    text-decoration: none;
    border-radius: 8px;
    /* margin: 0 10px; */ /* Replaced by gap in flex container */
    transition: all 0.3s ease; /* Simplified transition */
    font-weight: 600;
    font-size: 1em;
    border: 2px solid transparent; /* Base for hover/focus states */
}

/* .cta-button:hover general styles removed, handled by specific classes below */

.cta-button-primary {
    background-color: var(--primary-color);
    color: var(--text-on-primary-color);
    border-color: var(--primary-color); /* Match background for solid look */
}

.cta-button-primary:hover, .cta-button-primary:focus {
    background-color: var(--primary-darker);
    border-color: var(--primary-darker);
    color: var(--text-on-primary-color); /* Ensure text color remains light */
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button-secondary {
    background-color: transparent;
    color: var(--text-on-primary-color); /* Text is light on dark masthead overlay */
    border: 2px solid var(--text-on-primary-color); /* White border on dark masthead overlay */
}

body.dark-mode .cta-button-secondary { /* Specific for dark mode if needed, or rely on --text-on-primary-color */
    color: var(--text-on-primary-color); /* Should be light text */
    border-color: var(--text-on-primary-color); /* Should be light border */
}

.cta-button-secondary:hover, .cta-button-secondary:focus {
    background-color: var(--text-light);
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); /* Light shadow */
}

/* Services Section Redesign */
#services { /* This selector targets the div with class="flex-container" and id="services" */
    padding: 60px 20px; /* Top/Bottom 60px, Left/Right 20px. This is already correct. */
    /* max-width and margin: 0 auto will be inherited from .flex-container */
}

#services section { /* This is the <section> tag inside div#services */
    max-width: 1200px; /* Constrain content width within the #services div */
    margin: 0 auto; /* Center the section content */
    text-align: center;
}

#services h2 {
    /* font-size is now handled by common section styles */
    color: var(--text-color); /* Darker text for better contrast */
    margin-bottom: 20px; /* Space below heading */
    padding: 0; /* Reset padding if any from general h2 styles */
}

.services-intro {
    /* font-size is now handled by common section styles */
    color: var(--text-soft-color); /* Softer color for intro text */
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto 50px auto; /* Center and provide bottom margin */
    line-height: 1.6;
}
.service-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 30px; /* Gap between cards */
}

.service-card {
    background-color: var(--card-bg-color); /* White background for cards */
    border-radius: 12px; /* Rounded corners */
    padding: 30px;
    text-align: left; /* Align text to the left within cards */
    box-shadow: var(--service-card-shadow, 0 5px 15px rgba(0, 0, 0, 0.08)); /* Softer, modern shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Align items vertically */
}

.service-card:hover {
    transform: translateY(-10px); /* Lift effect on hover */
    box-shadow: var(--service-card-hover-shadow, 0 12px 25px rgba(0, 0, 0, 0.12)); /* Enhanced shadow on hover */
}

/* Add a border to service cards ONLY in light mode */
body:not(.dark-mode) .service-card {
  border: 2px solid var(--primary-color); /* Uses light theme section divider color */
}

.service-icon {
    background-color: var(--primary-color); /* Use a light shade of the primary color */
    border-radius: 50%; /* Circular background for the icon */
    width: 70px; /* Fixed width for the icon container */
    height: 70px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px; /* Space below icon */
    align-self: flex-start; /* Align icon to the start of the card (left) */
}

.service-icon img { /* Target the img tag for SVGs */
    width: 32px;  /* Made smaller (was 32px for inline SVG) */
    height: 32px; /* Made smaller */
    /* Assuming original SVGs are dark, this filter makes them white */
    filter: brightness(0) invert(1);
}

.service-title {
    font-size: 1.6em; /* Title size */
    color: var(--text-color);
    margin-bottom: 15px;
    font-weight: 600; /* Bolder title */
}

.service-description {
    font-size: 1em;
    color: var(--text-muted-color); /* Muted color for description text */
    line-height: 1.7; /* Improved line spacing for readability */
    margin-bottom: 25px; /* Space below description */
    flex-grow: 1; /* Allows description to take available vertical space, pushing button down */
}

.service-cta {
    background-color: var(--primary-color); /* Explicitly set for service CTAs */
    color: var(--text-on-primary-color);    /* Explicitly set for service CTAs */
    /* Inherits .cta-button styles */
    padding: 12px 25px; /* Slightly larger padding for prominence */
    font-size: 1em;
    margin-top: auto; /* Pushes button to the bottom of the card (due to flex-grow on description) */
    align-self: flex-start; /* Aligns button to the left */
    text-align: center; /* Center text within button */
    display: inline-block; /* Behaves like a block for margin auto and text-align */
    width: auto; /* Let content define width, or set fixed if preferred */
    margin-left: 0; /* Override general .cta-button margin */
    margin-right: 0; /* Override general .cta-button margin */
}

.service-cta:hover {
    /* Override or extend .cta-button:hover if necessary */
    background-color: var(--primary-darker); /* Darker primary on hover for distinction */
    color: var(--text-on-primary-color);
    /* transform and box-shadow will be inherited from .cta-button:hover */
}

.flex-container {
    max-width: 85vw;
    margin: 0 auto;
    padding: 20px;
}

.flex-container {
    max-width: 90vw; /* Match portfolio grid width */
    margin: 0 auto;
    padding: 20px;
}

.carousel {
    max-width: 100%; /* Take full width of container */
    margin: 0 auto; /* Center the carousel */
    /* Keep existing other styles */
    position: relative;
    overflow: hidden;
    height: 80vh;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    z-index: 1;
    border-radius: 15px;
}



.carousel-inner {
    display: flex;
    transition: transform 1s ease;
    height: 100%;
}

.carousel-item {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.75);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.carousel-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.carousel-caption {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    z-index: 2;
    font-weight: bolder;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--primary-color);
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 2;
}

.carousel-control:hover {
    background-color: rgba(253, 84, 84, 0.8);
    color: var(--text-light);
    transition: background-color 0.5s ease;
    transition: color 0.5s ease;
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}

.portfolio {
    text-align: center;
    padding: 60px 20px; /* Standardized top/bottom padding to 60px */
} 

.portfolio h2 {
    margin-bottom: 50px; /* Adjusted for consistent spacing to content */
    padding: 0; /* Removed padding to rely on margin for spacing */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default to 3 columns */
    justify-content: center;
    gap: 25px;
    width: 100%;
    max-width: 90VW;
    margin: 0 auto;
}

.square {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    aspect-ratio: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}


.square .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2; /* Ensure overlay is above image */
}

.square:hover {
    transform: scale(1.03);
    z-index: 2;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.square:hover .overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Styles for new img.gallery-image tags */
.square img.gallery-image {
    position: absolute; /* Add this */
    top: 0;             /* Add this */
    left: 0;            /* Add this */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
    display: block; /* Removes extra space below the image */
    border-radius: 15px; /* Match parent's border-radius */
}

.expand-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden; /* Prevents white edge bleeding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle depth */
}

/* SVG Icon Container */
.expand-icon {
    width: 100%; /* Was 20px, changed to fill button */
    height: 100%;
    padding: 6px; /* Ensures arrows stay within bounds */
    transition: transform 0.3s ease;
}

/* Arrow Paths */
.expand-btn path {
    fill: var(--expand-btn-icon-fill);
    transition: fill 0.3s ease;
}

/* Hover States */
.expand-btn:hover {
    background: var(--expand-btn-hover-bg);
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.expand-btn:hover path {
    fill: var(--expand-btn-hover-icon-fill);
}

.expand-btn:hover .expand-icon {
    transform: rotate(90deg);
}

/* Focus States for Accessibility */
.expand-btn:focus {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/*
  Remove focus outline for mouse clicks on the expand button,
  while preserving it for keyboard navigation (which uses :focus-visible).
*/
.expand-btn:focus:not(:focus-visible) {
    outline: none;
}

.project-info {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    /* background-color: rgba(255, 255, 255, 0.5); Replaced by var */
    padding: 15px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    z-index: 3; /* Ensure info card stays on top */
    /* margin-top: 30px; */ /* Removed, padding is sufficient */
    padding: 20px;
    background: var(--project-info-bg-color);
    border-radius: 8px;
    backdrop-filter: blur(2px);
    
}

.square:hover .project-info {
    transform: translateY(0);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.project-description {
    padding: 5px;
    border-radius: 8px;
    margin: 25px 0;
}

.project-type {
    display: inline-block;
    padding: 3px 8px;
    background: var(--primary-color); /* Stays primary */
    color: var(--text-on-primary-color); /* Text on primary */
    border-radius: 4px;
    font-size: 1em;
    margin-bottom: 5px;
    font-weight: bold;
}

.project-title {
    margin: 5px 0;
    font-size: 1.5em;
    color: var(--text-color); /* Use themed text color */
    font-weight: bold;
}

.project-description {
    margin: 0;
    font-size: 1em; /* color will be inherited from .project-info or use --text-soft-color */
    opacity: 0.9;
    line-height: 1.4;
}

/* FAQ Section */
.faq-section {
    padding: 60px 80px; /* Standardized top/bottom padding to 60px, kept L/R padding */
    transition: all 0.3s ease;
    /* background-color: var(--faq-bg-color); /* Optional: if section needs own bg */
}

/* Header Container */
.section-header {
    position: relative;
    text-align: center;
    cursor: pointer; /* Keep cursor for FAQ toggle functionality */
    margin: 0 auto 50px; /* Adjusted for consistent spacing to content */
    max-width: 800px;
}

/* Header Content Wrapper */
.header-content {
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
}

/* Main Header Text */
.section-header h2 {
    /* font-size is now handled by common section styles */
    color: var(--text-color);
    margin: 0;
    transition: color 0.3s ease;
}

/* Expand Instruction Text */
.expand-instruction {
    /* font-size is now handled by common section styles */
    color: var(--text-soft-color);
    margin: 8px 0 0;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Toggle Arrow */
.section-toggle {
    position: absolute;
    right: -40px;
    top: 10%;
    transform: translateX(-180px) translateY(-50%); /* Combined and corrected */
    font-size: 1.1em;
    color: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Content Area */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 auto;
    max-width: 800px;
}

/* Expanded State */
.faq-section.expanded .faq-content {
    max-height: 2000px; /* Adjust based on content */
}

.faq-section.expanded .section-toggle {
    transform: translateX(-180px) translateY(-50%) rotate(180deg); /* Ensured consistent Y translation */
}

/* Decorative Elements */
.header-content::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary-color);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.faq-section.expanded .header-content::after {
    opacity: 1;
}

/* Hover Effects */
.section-header:hover h2 {
    color: var(--primary-color);
}

.section-header:hover .expand-instruction {
    color: var(--text-soft-color); /* Or a slightly darker var(--text-soft-color) */
}

.section-header:hover .section-toggle {
    color: var(--primary-darker);
    transform: translateY(-50%) scale(1.1);
}

/* FAQ Items */
.faq-item {
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid var(--faq-item-border-color);
}

.faq-question {
    cursor: pointer;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1em;
    color: var(--text-color); /* Changed from --text-muted-color to make it darker/more prominent */
}

.faq-toggle {
    font-size: 0.9em;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 0.3s ease-out;
}

.faq-answer p {
    margin: 0;
    padding: 15px 0;
    color: var(--text-soft-color);
    line-height: 1.6;
}

/* Active State */
.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Adjust based on content height */
    padding: 0 20px;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .faq-section {
        padding: 40px 15px; /* Keep padding adjustment */
    }
    /* .section-header h2 font-size handled by common rules */
    /* .expand-instruction font-size handled by common rules */

    .expand-instruction {
        font-size: 0.8em;
        margin-top: 5px;
    }

    .section-toggle {
        right: -35px;
        font-size: 1em;
    }

    .faq-item {
        padding: 15px;
        margin-bottom: 20px;
    }

    .header-content::after {
        width: 50px;
        height: 3px;
    }
}

/* Tablet Styles */
@media (max-width: 1024px) {
    .section-toggle {
        right: -30px;
    }
}

/* Thank You Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: var(--modal-content-bg);
    padding: 30px;
    border-radius: 15px;
    max-width: 500px;
    text-align: center;
    position: relative;
    margin: 15px;
}

.modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: var(--modal-text-color); /* Adjusted for better contrast on modal bg */
    transition: color 0.3s ease;
}

.modal .close:hover {
    color: var(--primary-darker);
}

.modal h2 {
    color: var(--primary-color); /* Or use a themed header color */
    margin-bottom: 15px;
    font-size: 2em;
}

.modal p {
    color: var(--modal-text-color);
    font-size: 1.1em;
    line-height: 1.6;
}

.contact-me {
    background-color: var(--contact-section-overall-bg); /* Use new solid background color */
    padding: 60px 20px; /* Standardized top/bottom padding to 60px */
    /* margin-top was 40px, removed */
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 50px; /* Adjusted for consistent spacing to content */
}

.contact-header h2 {
    /* font-size is now handled by common section styles */
    color: var(--contact-section-header-text-color); /* Use new variable for header text */
    margin-bottom: 15px;
    font-weight: 700;
}

.header-decoration {
    width: 60px;
    height: 4px;
    background: var(--contact-section-header-text-color); /* Use new variable for decoration */
    margin: 0 auto 20px;
    border-radius: 2px;
}

.contact-subtitle {
    color: var(--text-muted-color); /* Use new variable for subtitle */
    /* font-size is now handled by common section styles */
    max-width: 600px;
    margin: 0 auto;
}

.contact-form {
    background: var(--contact-form-bg);
    padding: 48px; /* Increased padding */
    border-radius: 24px; /* Softer, larger border radius */
    margin-bottom: 60px;
    box-shadow: var(--contact-form-main-shadow); /* Using themed shadow variable */
}

.form-row {
    display: flex;
    gap: 24px; /* Slightly reduced gap for better cohesion */
    margin-bottom: 20px; /* Slightly reduced margin */
}

.form-row > * {
    flex: 1; 
}

.input-group {
    position: relative;
}

.input-group label {
    display: block;
    margin-bottom: 10px; /* Increased space between label and input */
    color: var(--text-muted-color);
    font-weight: 600;
    font-size: 0.95em;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 14px 20px;
    border: 1.5px solid var(--input-border-color); /* Slightly thicker border */
    border-radius: 10px; /* Softer radius, consistent with button */
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--input-bg-color);
    color: var(--input-text-color);
}

.input-group input:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: var(--input-placeholder-color);
}

textarea {
    resize: vertical;
    min-height: 150px;
}

.send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: var(--primary-color); /* Button uses primary color */
    color: var(--text-on-primary-color); /* Text on primary color */
    border: none; 
    border-radius: 10px; /* Consistent with input fields */
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.5s ease;
    margin-top: 20px;
}

.send-btn:hover {
    background: var(--primary-darker); /* Darken on hover */
    color: var(--text-on-primary-color);
    transform: translateY(-3px); /* Slightly more lift */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); /* Enhanced shadow on hover */
}

.send-btn svg {
    width: 20px;
    height: 20px;
}

.footer {
    display: flex;
    flex-direction: column;
    background-color: var(--footer-bg-color);
    padding: 20px;
    font-size: 14px;
    color: var(--text-on-primary-color); /* Text on footer background */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.footer-quick-links,
.footer-socials {
    flex: 1;
    margin-left: 20px;
}

.footer h4 {
    margin-bottom: 10px;
}

.footer ul {
    list-style-type: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 5px;
}

.footer a {
    color: var(--text-on-primary-color); /* Links on footer background */
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer-copyright {
    text-align: center;
    margin-top: auto;
}

body.lightbox-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.lightbox-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.0);
    border: none;
    color: var(--text-on-primary-color); /* Lightbox arrows are typically white/light */
    font-size: 2em;
    padding: 4px 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    z-index: 10000;
}

.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.05); /* Subtle background on hover */
    color: var(--lightbox-arrow-icon-hover-color); /* Themed icon color on hover */
    transform: translateY(-50%) scale(1.1);
}

.prev-arrow {
    left: 20px;
}

.next-arrow {
    right: 20px;
}

.lightbox .close-btn:hover {
    color: var(--lightbox-close-icon-hover-color); /* Themed icon color on hover */
    transform: scale(1.1); /* Slight scale effect */
    transition: color 0.3s ease, transform 0.3s ease;
}

@media (max-width: 768px) {
    .lightbox-arrow {
        font-size: 2em;
        padding: 10px 15px;
    }
}

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.97);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Generic style for lightbox control buttons */
.lightbox-control-button {
    background: rgba(50, 50, 50, 0.7); /* Default background */
    border: none;
    color: #fff; /* Default text color */
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0 5px; /* Spacing between buttons */
    z-index: 10001; /* Ensure it's above content, same level as other controls */
}

.lightbox.active {
    display: flex !important;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;  /* Max size relative to viewport */
    max-height: 90vh;
    width: auto;      /* Allow it to shrink if content is smaller */
    height: auto;
    display: flex;    /* To contain and center the media container */
    justify-content: center;
    align-items: center;
}

.lightbox-media-container {
    /* This container will hold the actual image or video */
    /* It should try to fill lightbox-content but not exceed it */
    width: auto; /* Fit content */
    height: auto; /* Fit content */
    max-width: 100%; /* Don't exceed lightbox-content */
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* cursor will be set by JS: zoom-in for images, default for video */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    /* overflow: auto; /* Removed, can interfere with zoom */
}

.lightbox-media-container.zoomed {
    transform: scale(4);
    cursor: zoom-out;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform-origin 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* transform-origin is set by JS before adding 'zoomed' */
}

/* Style for actual <img> elements in the lightbox */
.lightbox-media-container img.lightbox-media {
    display: block;
    max-width: 100%;  /* Fill the media-container, constrained by object-fit */
    max-height: 100%; /* Fill the media-container, constrained by object-fit */
    object-fit: contain;
    border-radius: 15px;
}

/* For video elements */
.lightbox-video {
    display: block;
    max-width: 100%;  /* Fill the media-container, constrained by object-fit */
    max-height: 100%; /* Fill the media-container, constrained by object-fit */
    object-fit: contain;
    border-radius: 15px;
    cursor: default;
}

/* Loop Toggle Button Specific Styles */
#lightboxLoopToggle {
    position: absolute; /* Position relative to the lightbox */
    top: 20px;
    right: 65px; /* Adjust to be next to the close button */
    display: none; /* Hidden by default, shown by JS for videos */
}

#lightboxLoopToggle.active {
    background-color: var(--primary-color); /* Use theme's primary color for active state */
    color: var(--text-on-primary-color); /* Text color for on primary */
}

#lightboxLoopToggle:hover:not(.active) { /* Hover for non-active state */
    background: rgba(70, 70, 70, 0.9);
}

/* Attempt to style video progress bar (results vary by browser) */
.lightbox-video {
    /* Modern way to hint at accent color for some form controls */
    accent-color: var(--video-progress-value-color);
}

/* WebKit (Chrome, Safari, Edge, Opera) */
.lightbox-video::-webkit-media-controls-timeline {
    background-color: var(--video-progress-bg-color) !important; /* Track background */
    border-radius: 3px;
    height: 6px;
    margin-left: 10px; /* Example spacing */
    margin-right: 10px; /* Example spacing */
}

/* This targets the filled part of the progress bar in WebKit */
.lightbox-video::-webkit-media-controls-play-progress, /* Older WebKit */
.lightbox-video::-webkit-media-controls-timeline::-webkit-progress-value { /* Newer WebKit */
    background-color: var(--video-progress-value-color) !important;
    border-radius: 3px;
}

/* Firefox - More limited. accent-color is the primary method. */
.lightbox-video::-moz-range-track { /* If progress bar uses range input internally */
    background-color: var(--video-progress-bg-color);
}
.lightbox-video::-moz-range-progress { /* If progress bar uses range input internally */
    background-color: var(--video-progress-value-color);
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--text-on-primary-color); /* Close button on dark lightbox bg */
    font-size: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
}

.video-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    pointer-events: none;
}

/* Theme Toggle Switch */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    /* margin-left: 20px; /* Adjust as needed */
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px; /* Adjusted width */
    height: 28px; /* Adjusted height */
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-slider-bg);
    transition: background-color .4s;
    border-radius: 28px; /* Adjusted for height */
    display: flex; /* For aligning icons */
    align-items: center; /* For aligning icons */
}

.slider:before {
    content: none; /* Remove the old circular knob */
}

input:checked + .slider {
    background-color: var(--theme-slider-checked-bg);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--theme-slider-checked-bg);
}

/* Rounded sliders */
.slider.round {
    border-radius: 28px; /* Adjusted for height */
}

/* === Theme Switcher Icon Adjustments for IMG tags === */

.theme-switch-wrapper .slider.round .icon-sun,
.theme-switch-wrapper .slider.round .icon-moon { /* Targets <img class="icon-sun/moon"> */
  /* --- Size --- */
  width: 20px;  /* Matched old SVG icon size, adjust as needed */
  height: 20px; /* Matched old SVG icon size, adjust as needed */
  object-fit: contain; /* Ensures SVGs scale nicely if they aren't perfectly square */

  /* --- Positioning & Animation --- */
  position: absolute;
  top: 50%;
  /* transform will be set individually below for animation states */
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Matched old transition */
  pointer-events: none; /* So icons don't interfere with clicking the switch */
}

/* Light Mode (Default - Checkbox NOT checked) */
.theme-switch-wrapper input#theme-checkbox + .slider.round .icon-sun {
  opacity: 1;
  left: 4px; /* Matched old SVG icon position */
  transform: translateY(-50%) scale(1) rotate(0deg); /* Matched old SVG animation */
}

.theme-switch-wrapper input#theme-checkbox + .slider.round .icon-moon {
  opacity: 0;
  right: 4px; /* Matched old SVG icon position */
  transform: translateY(-50%) scale(0) rotate(-90deg); /* Matched old SVG animation */
}

/* Dark Mode (Checkbox IS checked) */
.theme-switch-wrapper input#theme-checkbox:checked + .slider.round .icon-sun {
  opacity: 0;
  left: 4px; /* Matched old SVG icon position */
  transform: translateY(-50%) scale(0) rotate(90deg); /* Matched old SVG animation */
}

.theme-switch-wrapper input#theme-checkbox:checked + .slider.round .icon-moon {
    opacity: 1;
  right: 4px; /* Matched old SVG icon position */
    transform: translateY(-50%) scale(1) rotate(0deg);
}

#backToTopBtn svg {
    fill: currentColor; /* SVG inherits color from button's text color */
}

/* --- Project Page Contact CTA Section --- */
.project-contact-cta-section {
    text-align: center;
    padding: 60px 0; /* Vertical padding */
    margin-top: 60px; /* Space from gallery */
    border-top: 1px solid var(--section-devider-color); /* Separator line */
}

.project-contact-cta-section h2 {
    font-size: 2.2em; /* Consistent with other section titles */
    color: var(--text-color);
    margin-bottom: 20px;
}

.project-contact-cta-section p {
    font-size: 1.1em;
    color: var(--text-soft-color);
    max-width: 600px;
    margin: 0 auto 30px auto; /* Center and provide bottom margin */
    line-height: 1.6;
}

.blog-listing-section {
    padding: 40px 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 90vw;
}

.blog-listing-section h2 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 40px;
    color: var(--text-color);
}

.blog-posts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.blog-post-preview {
    background-color: var(--card-bg-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid var(--faq-item-border-color); /* Using a similar border color */
}

.blog-post-preview h3 a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.2em;
    margin-bottom: 10px;
}

.blog-post-preview h3 a:hover {
    text-decoration: underline;
}

.blog-post-preview .post-meta { /* Ensure this matches the class in blog/index.html if used */
    font-size: 0.9em;
    color: var(--text-soft-color);
    margin-top: 5px;
    margin-bottom: 15px;
}

.blog-post-preview p {
    font-size: 1em;
    line-height: 1.6;
    color: var(--text-muted-color);
    margin-bottom: 20px;
}

.blog-posts-placeholder {
    text-align: center;
    font-size: 1.1em;
    color: var(--text-soft-color);
    padding: 20px;
    grid-column: 1 / -1; /* Span full width if it's the only item */
}

/* Blog Article Page (blog/my-first-article/index.html) */
.blog-post-container { /* Wrapper for the article content */
    max-width: 75vw; /* Increased width for desktop */
    margin: 40px auto;
    padding: 20px;
    background-color: var(--card-bg-color); 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

.blog-article-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--section-devider-color);
}

.blog-article-header h1 {
    font-size: 2.25em; 
    color: var(--text-color);
    margin-bottom: 10px;
}

.post-meta { /* Shared by preview and full article */
    font-size: 0.9em;
    color: var(--text-soft-color);
    margin-bottom: 20px;
}

.post-meta a {
    color: var(--primary-color);
    text-decoration: none;
}

.post-meta a:hover {
    text-decoration: underline;
}

.post-meta .categories a { /* For optional categories */
    margin-left: 5px;
}

.featured-image { 
    width: 100%;
    max-width: 960px; /* Match the new container width */
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.blog-article-content {
    font-size: 1.1em; 
    line-height: 1.7;
    color: var(--text-muted-color);
}

.blog-article-content h2 {
    font-size: 1.8em;
    color: var(--text-color);
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--section-devider-color);
}

.blog-article-content h3 {
    font-size: 1.5em;
    color: var(--text-color);
    margin-top: 30px;
    margin-bottom: 15px;
}

.blog-article-content p {
    margin-bottom: 20px;
}

.blog-article-content ul,
.blog-article-content ol {
    margin-bottom: 20px;
    padding-left: 30px;
}

.blog-article-content li {
    margin-bottom: 10px;
}

.blog-article-content blockquote {
    margin: 20px 0;
    padding: 15px 20px;
    background-color: var(--blockquote-bg-color); 
    border-left: 5px solid var(--primary-color);
    color: var(--text-soft-color);
    font-style: italic;
}

.blog-article-content blockquote p {
    margin-bottom: 0;
}

.blog-article-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.blog-article-content a:hover {
    text-decoration: underline;
}

.blog-article-content figure {
    margin: 30px 0;
    text-align: center;
}

.blog-article-content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.blog-article-content figcaption {
    font-size: 0.9em;
    color: var(--text-soft-color);
    margin-top: 10px;
    font-style: italic;
}

/* Desktop specific enhancements for blog articles */
@media (max-width: 769px) {
    /*
    .blog-article-header h1 { 
        font-size: 2em; /* Slightly larger title on desktop 
    }*/
    .blog-article-header h1 {
        font-size: 1.75em; /* Slightly larger title on desktop */
    }

    .blog-article-content {
        font-size: 1em; /* Slightly larger base font for article text on desktop */
                           
    }

    .blog-article-content h2 {
        font-size: 1.75em; /* Adjusted to scale with the new parent font-size */
    }

    .blog-article-content h3 {
        font-size: 1.45em; /* Adjusted to scale with the new parent font-size */
    }

    .blog-post-container { /* Wrapper for the article content */
    max-width: 95vw;
    }

}


/* Optional sections from blog article template */
.author-bio, .social-share, .comments-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--section-devider-color);
}

.author-bio h4, .social-share h4, .comments-section h4 {
    font-size: 1.3em;
    color: var(--text-color);
    margin-bottom: 15px;
}

/* Theme Toggle Switch */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    /* margin-left: 20px; /* Adjust as needed */
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px; /* Adjusted width */
    height: 28px; /* Adjusted height */
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-slider-bg);
    transition: background-color .4s;
    border-radius: 28px; /* Adjusted for height */
    display: flex; /* For aligning icons */
    align-items: center; /* For aligning icons */
}

.slider:before {
    content: none; /* Remove the old circular knob */
}

input:checked + .slider {
    background-color: var(--theme-slider-checked-bg);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--theme-slider-checked-bg);
}

/* Back to Top Button */
#backToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--back-to-top-bg-color);
    color: var(--back-to-top-text-color);
    border: none;
    border-radius: 50%; /* Circular button */
    width: 50px;
    height: 50px;
    padding: 0; /* Remove padding to rely on flex for centering */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999; /* Above footer, below modals/navbar if they were to overlap */
    opacity: 0;
    transform: translateY(30px); /* Start off-screen or faded out */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    pointer-events: none; /* Button is not interactive when hidden */
}

/*
  Remove focus outline for mouse clicks on the back-to-top button,
  while preserving it for keyboard navigation (which uses :focus-visible).
*/
#backToTopBtn:focus:not(:focus-visible) {
    outline: none;
}

#backToTopBtn.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Button is interactive when shown */
}

#backToTopBtn:hover {
    background-color: var(--back-to-top-hover-bg-color);
    color: var(--back-to-top-hover-text-color);
    transform: translateY(-3px); /* Subtle lift on hover */
}


@media (max-width: 1024px) { /* Tablet-like screens */
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (max-width: 768px) {
    .nav-list li {
        position: relative;
        padding: 5px 0;
    }
      
    .nav-list a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0; /* This creates an underline effect on hover */
        height: 2px;
        background: var(--text-light);
        transition: width 0.3s ease;
    }
      
    .nav-list a:hover::after {
        width: 100%;
    }
    
    .nav-list {
        display: none;
    }
    
    .toggle {
        display: block;
    }
    
    .dropdown.active {
        display: block;
    }
    
    .masthead .content {
        /* These styles were for the OLD .masthead .content structure.
           The new .masthead-content-new will have its own responsive rules.
        */
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90vw;
        width: 90%; 
        min-height: auto; 
        max-height: 50vh;
        margin-right: auto;
    }

    /* Responsive adjustments for the NEW masthead content */
    .masthead-title {
        font-size: 2.4em; /* Adjust title size for mobile for consistency */
    }
    .masthead-tagline {
        font-size: 1.4em; /* Tagline size adjusted for mobile */
    }
    .masthead-description {
        font-size: 1em;
        
        /* New mobile-specific adjustments */
        width: 90%; /* Allow some margin */
        min-height: auto; /* Reset min-height */
        font-size: 0.9em; /* Adjust description size for mobile for consistency */
    }

    .masthead-cta-buttons {
        flex-direction: column; /* Stack buttons on mobile */
        gap: 15px;
        align-items: center; /* Center stacked buttons */
    }

    .cta-button { /* Ensure buttons take appropriate width when stacked */
        width: 80%; /* Or a specific pixel value like 250px */
        max-width: 300px;
        text-align: center;
    }

    /* General h1, if needed, but masthead uses specific classes now */
    h1 {
        font-size: 2em;
    }

    .flex-container {
        flex-direction: column;
        padding: 5px;
        max-width: 100vw;
    }

    section {
        max-width: 100%;
    }

    .carousel {
        height: 80vh;
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .grid-container {
        grid-template-columns: 1fr;
    }
    .square {
        max-width: none; /* Full width on mobile */
    }

    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .contact-form {
        padding: 25px;
    }
    
    .contact-header h2 {
        font-size: 2em;
    }
    
    .input-group input,
    .input-group textarea {
        padding: 12px 16px;
    }

    /* Mobile Overlay Adjustments */
    .project-info {
        padding: 10px;
    }

    .project-title {
        font-size: 1.5em;
    }
}

/* Responsive adjustments for service cards */
@media (max-width: 768px) {
    /* #services h2 font-size handled by common rules */
    .services-intro { /* Keep other mobile specific styles for services-intro */
        font-size: 1em;
        margin-bottom: 30px;
    }
    .service-cards-container {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        gap: 20px;
    }
    .service-card {
        padding: 25px;
    }
    .service-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
    .service-icon svg {
        width: 28px;
        height: 28px;
    }
    .service-title {
        font-size: 1.4em;
    }
    .service-description {
        font-size: 0.95em;
    }
    .service-cta {
        width: 100%; /* Full width button on mobile */
        padding: 15px; /* Adjust padding for full width */
        align-self: center; /* Center button in card on mobile */
    }
}