.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--background-color) 0%, #1E1E2F 100%);
    z-index: 1;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
  }
  
  .headline {
    font-family: var(--heading-font);
    font-size: 4rem;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #FFFF00);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s infinite alternate;
  }

  
  

/* CSS Variables for Easy Theming */
:root {
    --primary-color: #00FFFF; /* Cyan */
    --secondary-color: #FF00FF; /* Magenta */
    --background-color: #121212; /* Dark gray */
    --text-color: #fff; /* White */
    --font-family: 'Roboto', sans-serif;
    --heading-font: 'Exo', sans-serif;
  }
  
  /* Reset and Base Styles */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.6;
  }
  
  /* Hero Section */
  .hero {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  /*.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--background-color) 0%, #1E1E2F 100%);
    z-index: 1;
  }*/

  .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(135deg, var(--background-color) 0%, #1E1E2F 100%),
    url('background5.jpg');
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  z-index: 1;
}


.hero-content {
    text-align: center; /* Center align the content if needed */
}

.headline {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #FFFF00);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s infinite alternate;
}



/* Ensure these are in your existing stylesheet or style tag */
.logo {
    animation: gradientShift 5s infinite alternate;
}

/* Remove or comment out the background-clip text for .logo, as it doesn’t apply to SVGs */
.logo {
    /* background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #FFFF00);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* Use this instead for SVG */
}

/* Keep the headline gradient as is */
.headline {
    font-family: var(--heading-font);
    font-size: 4rem;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #FFFF00);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s infinite alternate;
}

/* Animation definition (already in your stylesheet) */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}


  .subheading {
    font-family: var(--font-family);
    font-size: 1.5rem;
    color: white;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
  }
  /* CTA Navigation Container */
.cta-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 20px; /* Adds spacing between buttons */
}

/* CTA Buttons */
.cta {
    color: #fff; /* White text for readability against the dark background */
    text-decoration: none;
    padding: 10px 20px;
    transition: border-bottom 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover Effect */
.cta:hover {
    border-bottom: 2px solid #00FFFF; /* Cyan underline matching your theme */
}


.header-button {


    color: rgba(255, 255, 255, 0.226);
    text-decoration: none;

    transition: border-bottom 0.3s ease; /* Smooth transition for hover effect */
    border: 2px solid transparent;
}

.header-button:hover {
    transform: translateY(-5px);

    color: var(--primary-color);
}




.greyed {
    color: rgba(255, 255, 255, 0.226);
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    border: 2px solid transparent;
/*    background: linear-gradient(var(--background-color), var(--background-color)) padding-box, 
                linear-gradient(45deg, var(--primary-color), var(--secondary-color)) border-box; */
    transition: transform 0.3s, border-color 0.3s, color 0.3s;
}

.greyed:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    color: var(--primary-color);
}



.greyed-headline {
    font-family: var(--heading-font);
    font-size: 4rem;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), #FFFF00);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s infinite alternate;
  }



  
  /* About Section */
  .about-section {
    padding: 4rem 2rem;
    background-color: var(--background-color);
  }
  
  .about-section h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-family: var(--heading-font);
    color: var(--primary-color);
  }
  /*
  .showreel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }
  */
  .showreel {
    text-align: center;

    display: none;
  padding-top: 1rem; 
  padding-bottom: 1rem;

/*    background: rgba(30, 30, 47, 0.5); Subtle dark overlay for contrast */
 /*    border-radius: 10px; */
    margin-bottom: 2rem;


  }
  
  .showreel h3 {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-color);
    transition: color 0.3s;
  }
  
  .showreel:hover h3 {
    color: var(--primary-color);
  }
  
  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }
  
  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .showreel p {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #ccc;
  }
  
  /* Animations */
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  
  @keyframes fadeIn {
    to { opacity: 1; }
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .headline {
      font-size: 2.5rem;
    }
    .subheading {
      font-size: 1.2rem;
    }
    .cta {
      padding: 0.8rem 1.5rem;
    }
    .greyed{

        padding: 0.8rem 1.5rem;
    }

    .about-section {
      padding: 2rem 1rem;
    }
    .showreel-grid {
      grid-template-columns: 1fr;
    }
  }


.headline {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    background: linear-gradient(90deg, #00FFFF, #FF00FF, #FFFF00);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s infinite alternate;
}

.subheading {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
}

/* CTA Navigation Container */
.cta-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 20px; /* Adds spacing between buttons */
}

/* CTA Buttons */
.cta {
    color: #fff; /* White text for readability against the dark background */
    text-decoration: none;
    padding: 10px 20px;
    transition: border-bottom 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover Effect */
.cta:hover {
    border-bottom: 2px solid #00FFFF; /* Cyan underline matching your theme */
}
  

.vector-flair {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    animation: pulse 3s infinite alternate;
}


.cta-section {
    padding: 4rem 2rem;

    background: 
    linear-gradient(135deg, var(--background-color) 0%, #1E1E2F 100%),
    url('background3.jpg');
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
    text-align: center;
    color: var(--text-color);
}

/* CTA Section */
@media (max-width: 768px) {
    .cta-section {
        padding: 2rem 1rem;
    }
    .cta-section h2 {
        font-size: 1.6rem; /* Updated to match Services and Showreels */
    }
    .cta-section p {
        font-size: 1rem;
    }
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    .cta {
        padding: 10px 20px;
    }
}

.cta-section p {
    font-family: var(--font-family);
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

/* Reusing the CTA style from your header but with slight enhancements for prominence */
.cta {
    color: var(--text-color);
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    border: 2px solid transparent;
/*    background: linear-gradient(var(--background-color), var(--background-color)) padding-box, 
                linear-gradient(45deg, var(--primary-color), var(--secondary-color)) border-box; */
    transition: transform 0.3s, border-color 0.3s, color 0.3s;
}

.cta:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Animation for fade-in (already defined in your stylesheet) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .cta-section {
        padding: 2rem 1rem;
    }
    .cta-section h2 {
        font-size: 2rem;
    }
    .cta-section p {
        font-size: 1rem;
    }
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    .cta {
        padding: 10px 20px;
    }
}


/* Animations */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

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

@keyframes pulse {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .headline {
        font-size: 2.5rem;
    }
    .subheading {
        font-size: 1.2rem;
    }
    .cta {
        padding: 0.8rem 1.5rem;
    }
}



.contactform-section {
    padding: 4rem 2rem;
    background-color: var(--background-color);
    min-height: calc(100vh - 8rem); /* Ensure vertical space, accounting for padding */
}

.contactform-section h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-family: var(--heading-font);
    color: var(--primary-color);
    animation: fadeIn 1s ease-out;
}


.showreels-section {
    padding: 4rem 2rem;
    background-color: var(--background-color);
    min-height: calc(100vh - 8rem); /* Ensure vertical space, accounting for padding */
}

.showreels-section h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-family: var(--heading-font);
    color: var(--primary-color);
    animation: fadeIn 1s ease-out;
}

.showreel-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.showreel-btn {
    font-family: var(--heading-font);
    font-size: 1.05rem;
    padding: 12px 24px;
    background: none; /* Remove any background */
    border: none; /* Remove border */
    color: var(--text-color); /* White text */
    cursor: pointer;
    position: relative; /* For positioning the underline */
    transition: color 0.3s ease; /* Smooth transition for hover */
}

.showreel-btn::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Position below the text */
    left: 0;
    width: 0; /* Start with no width for inactive buttons */
    height: 4px; /* Thick underline */
    background-color: var(--text-color); /* White underline */
    transition: width 0.3s ease; /* Smooth transition for underline width */
}

.showreel-btn.active::after,
.showreel-btn:hover::after {
    width: 100%; /* Full width for active or hovered buttons */
}

.showreel-btn.active {
    color: var(--text-color); /* Ensure active button stays white */
}

.showreel-btn:hover {
    color: var(--primary-color); /* Cyan on hover for subtle contrast */
}

/* Ensure focus states are accessible */
.showreel-btn:focus {
    outline: none; /* Remove default outline */
    color: var(--primary-color); /* Match hover state for accessibility */
}

/* Responsive Design */
@media (max-width: 768px) {
    .showreel-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    .showreel-btn {
        padding: 10px 20px;
    }
}

.showreel-content {
    text-align: center;
}


.showreel.active {
    display: block;
}

.showreel h3 {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-color);
    transition: color 0.3s;
}

.showreel:hover h3 {
    color: var(--primary-color);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.showreel p {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #ccc;
}

/* Animation for fade-in (already defined in your stylesheet) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



/* Responsive Design for Showreels */
@media (max-width: 768px) {
    .showreels-section {
        padding: 2rem 1rem;
        min-height: auto; /* Allow natural height on mobile */
    }

    .showreels-section h2 {
        font-size: 1.6rem; /* Match the mobile size of .services h2 */
        margin-bottom: 0.8rem; /* Slightly reduce margin for better spacing */
    }

    .showreel {
        padding: 1rem;
    }

    .showreel-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .showreel-btn {
        padding: 10px 20px;
    }
}


/* Services Section */
.services {
    padding: 4rem 2rem; /* Consistent padding with other sections */
    background-color: var(--background-color);
    text-align: center;
    min-height: auto; /* Allow natural height, adjustable on mobile */
    max-width: 1200px; /* Match portfolio max-width */
    margin: 0 auto; /* Center the content */
    width: 90%; /* Ensure it takes full width up to max-width */
}

.services h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-family: var(--heading-font);
    color: var(--primary-color);
    animation: fadeIn 1s ease-out;
}




/* Responsive Design for Services */
@media (max-width: 768px) {
    .services {
        padding: 2rem 1rem; /* Reduced padding on mobile */
    }

    .services h2 {
        font-size: 1.6rem; /* Smaller heading on mobile, matching other sections */
    }
}


.clients-banner {
    padding: 2rem 2rem;
    background-color: var(--background-color);
    text-align: center;
}

.clients-banner h2 {
    font-family: var(--heading-font);
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    animation: fadeIn 1s ease-out;
}

.clients-marquee {
    overflow: hidden;
    position: relative;
    height: 120px; /* Base height for logos on desktop, adjustable */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); /* Tighter fade edges for seamless loop */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none; /* Safari */
    touch-action: pan-x; /* Allow horizontal panning for drag scrolling, block vertical (Chromium-compatible) */
}

.marquee-content {
    display: flex;
    gap: 2rem; /* Space between logos */
    align-items: center;
    white-space: nowrap; /* Prevent wrapping */
    cursor: grab; /* Cursor for dragging */
    animation: scroll 60s linear infinite; /* Maintain slow, smooth scrolling */
    will-change: transform; /* Improve performance for animation */
    /* Removed transform-style: preserve-3d to test Chromium compatibility */
}

/* Automatically scale logos to fit 4-5 per screen */
.client-logo {
    height: 100px; /* Base height for desktop, scaled proportionally */
    width: auto; /* Maintain aspect ratio */
    max-width: 180px; /* Limit width to prevent oversized logos */
    object-fit: contain; /* Ensure logos scale proportionally without distortion */
    filter: grayscale(100%) brightness(150%); /* Futuristic, high-contrast look */
    transition: filter 0.3s ease; /* Smooth transition for hover */
    user-drag: none; /* Prevent user drag on images (Chromium/Safari) */
    -webkit-user-drag: none; /* Safari */
    user-select: none; /* Prevent text selection on images */
    -webkit-user-select: none; /* Safari */
    draggable: false; /* Reinforce no drag for images */
}

.client-logo:hover {
    filter: grayscale(0%) brightness(100%) drop-shadow(0 0 10px var(--primary-color)); /* Maintain neon glow on hover */
}

/* Adjust for mobile to show fewer logos (2-3) and smaller size */
@media (max-width: 768px) {
    .clients-banner {
        padding: 1.5rem 1rem;
    }
    .clients-banner h2 {
        font-size: 1.5rem;
    }
    .clients-marquee {
        height: 60px; /* Smaller height on mobile */
    }
    .client-logo {
        height: 50px; /* Smaller logos on mobile */
        max-width: 100px; /* Reduced max-width on mobile */
    }
    .marquee-content {
        gap: 1.5rem; /* Reduced gap on mobile */
    }
    .marquee-content {
        animation: scroll 40s linear infinite; /* Maintain slower scrolling on mobile */
    }
}

/* Animation for scrolling */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% * (var(--logo-count, 19) / var(--logo-count, 19)))); } /* Maintain for 19 logos */
}

/* Animation for fade-in (already defined in your stylesheet) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Drag scrolling styles */
.marquee-content.dragging {
    cursor: grabbing;
    animation-play-state: paused; /* Pause animation while dragging */
}

/* Ensure smooth scrolling behavior */
.marquee-content {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
}



/* Contact Form Container */
#contactForm {
    max-width: 600px; /* Match the centered, constrained width of other sections */
    margin: 0 auto; /* Center the form */
    padding: 2rem;
    background: rgba(30, 30, 47, 0.5); /* Subtle dark overlay, matching .showreel */
    border-radius: 10px; /* Rounded corners for a polished look */
    animation: fadeIn 1s ease-out; /* Fade-in animation */
}



#contactForm label {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #fff; /* White text */
    display: block; /* Ensure labels stack above inputs */
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

#contactForm label:hover {
    color: #00FFFF; /* Cyan on hover, matching the site’s accent */
}


#contactForm input,
#contactForm textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Comfortable padding */
    margin-bottom: 1rem; /* Space between fields */
    background-color: #1E1E2F; /* Dark background */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    color: #fff; /* White text */
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state with neon cyan glow */
#contactForm input:focus,
#contactForm textarea:focus {
    outline: none;
    border-color: #00FFFF; /* Cyan border */
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.5); /* Cyan glow */
}

/* Textarea specific adjustments */
#contactForm textarea {
    resize: vertical; /* Allow vertical resizing only */
    min-height: 150px; /* Ensure enough space for message */
}



#contactForm button {
    font-family: 'Orbitron', sans-serif; /* Futuristic font */
    font-size: 1.2rem;
    padding: 12px 24px;
    background: none; /* No background */
    border: 2px solid #00FFFF; /* Cyan border */
    border-radius: 50px; /* Rounded button */
    color: #fff; /* White text */
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#contactForm button:hover {
    transform: translateY(-5px); /* Lift on hover, matching .cta */
    color: #00FFFF; /* Cyan text */
    border-color: #FF00FF; /* Magenta border on hover for gradient vibe */
}


@media (max-width: 768px) {
    #contactForm {
        padding: 1rem; /* Reduced padding on mobile */
    }

    #contactForm label {
        font-size: 1rem; /* Smaller labels */
    }

    #contactForm input,
    #contactForm textarea {
        padding: 10px; /* Slightly smaller padding */
        font-size: 0.9rem; /* Smaller text */
    }

    #contactForm button {
        padding: 10px 20px; /* Smaller button */
        font-size: 1rem; /* Smaller text */
    }
}

/* Turnstile Widget */
.cf-turnstile {
    margin-bottom: 30px; /* Space above and below */
    margin-top: 0rem;

    justify-content: left; /* Center the widget */
}

/* Style the checkbox (if shown in Managed mode) */
.cf-turnstile input[type="checkbox"] {
    accent-color: #00FFFF; /* Cyan checkbox to match theme */
}



/* Responsive adjustment */
@media (max-width: 768px) {
    .cf-turnstile {
        margin: 0rem 1; /* Less space on mobile */
    }
}


.section-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #ccc; /* Light gray, matching other descriptions */
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeIn 1s ease-out;
}

@media (max-width: 768px) {
    .section-description {
        font-size: 1rem;
    }
}





/* Subpage Header */
.subpage-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between Back button and headline */
    padding: 1rem 2rem; /* Compact padding */
    background: linear-gradient(135deg, #121212 0%, #1E1E2F 100%); /* Match site background */
    position: sticky; /* Keep header fixed at the top */
    top: 0;
    z-index: 10; /* Ensure it stays above other content */
}

/* Back Button */
.back-btn {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #fff; /* White text */
    text-decoration: none;
    padding: 8px 16px;
    border: 2px solid #00FFFF; /* Cyan border */
    border-radius: 50px; /* Rounded button */
    transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.back-btn:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    color: #00FFFF; /* Cyan text */
    border-color: #FF00FF; /* Magenta border on hover */
}

/* Subpage Headline */
.subpage-headline {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem; /* Smaller than homepage headline */
    background: #00000029; /* Same gradient as homepage */
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s infinite alternate;
    text-align: center !important;
    flex-grow: 1; /* Allow headline to take up remaining space */
}



        /* Remove default link styles */
        a.no-link-style {
            text-decoration: none; /* Removes underline */
            color: inherit; /* Inherits color from parent or h1 */
            text-align: center !important;
            align-items: center;
        }




/* Responsive Design */
@media (max-width: 768px) {
    .subpage-header {
        padding: 0.5rem 1rem; /* Reduced padding on mobile */
    }

    .back-btn {
        font-size: 1rem;
        padding: 6px 12px;
    }

    .subpage-headline {
        font-size: 1.8rem; /* Smaller font on mobile */
    }
}




/* Showreels Page Section */
.showreel-page-section {
    padding: 4rem 4rem;
    background-color: var(--background-color);
    min-height: calc(100vh - 8rem); /* Ensure vertical space */
}

.showreel-page-section h2.showreel-page-title {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-family: var(--heading-font);
    color: var(--primary-color);
    animation: fadeIn 1s ease-out;
}

/* Individual Showreel Page Items */
.showreel-page-item {
    padding: 2rem;
    background: linear-gradient(135deg, rgba(30, 30, 47, 0.8), #1E1E2F); /* Subtle gradient overlay */
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 2rem; /* Space between sections */
    animation: fadeIn 1s ease-out;
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.showreel-page-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Showreel Page Title */
.showreel-page-title {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
    text-align: center;
    transition: color 0.3s ease;
}

.showreel-page-title:hover {
    color: #00FFFF; /* Cyan on hover */
}

/* Showreel Page Description */
.showreel-page-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #ccc;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Video Wrapper (reuse existing, but scoped to this page) */
.showreel-page-item .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 0rem;
}

.showreel-page-item .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .showreel-page-section {
        padding: 2rem 1rem;
        min-height: auto;
    }

    .showreel-page-item {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .showreel-page-title {
        font-size: 1.5rem;
    }

    .showreel-page-description {
        font-size: 1rem;
    }
}








/* Portfolio Section */
.portfolio {
    padding: 4rem 2rem;
    background-color: var(--background-color);
    max-width: 1200px; /* Consistent maximum width */
    margin: 0 auto; /* Center the content */
    width: 90%; /* Ensure it takes full width up to max-width */
}

.portfolio-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    font-family: 'Roboto', sans-serif;
    color: var(--primary-color);
    animation: fadeIn 1s ease-out;
}

/* Controls Container */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%; /* Ensure controls respect portfolio width */
}

/* Filter Buttons */
.filter-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-buttons button {
    padding: 0.5rem 1rem;
    background: none;
    border: 2px solid var(--primary-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    white-space: nowrap;
}

.filter-buttons button.active {
    background: var(--primary-color);
    color: var(--background-color);
}

/* Sort Buttons */
.sort-buttons {
    display: flex;
    align-items: center;
}

#sort-select {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    background: #2A2A44;
    border: 2px solid #FFFFFF;
    color: #fff;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23FFFFFF' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1em;
    width: 150px;
}

#sort-select:focus {

    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

#sort-select:hover {
    

    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);

    
    
}
/* Portfolio Section */
@media (max-width: 768px) {
    .portfolio {
        padding: 2rem 1rem;
    }

    .portfolio-title {
        font-size: 1.6rem; /* Updated to match Services and Showreels */
    }

    /* Rest of the existing styles remain unchanged */
}


/* Project Grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px; /* Match portfolio max-width */
    margin: 0 auto; /* Center the grid */
}

/* Project Item with Square Wrapper */
.project-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
    aspect-ratio: 1 / 1;
}

.project-item:hover {
    transform: scale(1.05);
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.project-item h4 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-color);
    padding: 1rem;
    margin: 0;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    margin: 10% auto;
    padding: 2rem;
    width: 80%;
    max-width: 800px;
    background: var(--background-color);
    border-radius: 10px;
    color: var(--text-color);
    max-width: 800px; /* Ensure modal content respects a max width */
}

.close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-color);
}

#modal-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

#modal-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 1rem; /* Space before inline video */
}

#modal-inline-video.optional-video {
    display: none; /* Hidden by default, shown only if data-inline-video exists */
}

#modal-inline-video.optional-video iframe {
    width: 100%;
    height: 200px; /* Smaller height for inline video */
    border: none;
}

#modal-video iframe {
    width: 100%;
    height: 400px;
    border: none;
}

#modal-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #ccc;
}

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

    .portfolio-title {
        font-size: 2rem;
    }

    .controls {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-buttons {
        justify-content: center;
        margin-bottom: 1rem;
    }

    .sort-buttons {
        width: 100%;
    }

    #sort-select {
        width: 100%;
        padding: 0.4rem 2.5rem 0.4rem 0.8rem;
    }

    .project-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .project-item h4 {
        font-size: 1rem;
    }

    .modal-content {
        width: 90%;
        padding: 1.5rem;
    }

    #modal-video iframe {
        height: 250px;
    }

    #modal-inline-video.optional-video iframe {
        height: 150px; /* Adjusted for mobile */
    }
}


.thanks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;

    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.thanks-item {
    padding: 10px;
    text-align: center;
    border: 1px solid #dddddd26;
    border-radius: 5px;
    transition: transform 0.2s;
}

.thanks-item:hover {
    transform: scale(1.05);
}

@media (max-width: 600px) {
    .thanks-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}