/* ==================================== */
/* 🔑 VIDEO BACKGROUND FIXES START HERE */
/* ==================================== */

/* 1. Define the container for the video background */
#hero-section {
    /* **CRITICAL**: Sets the container's height (e.g., full viewport height) */
    height: 100vh;
    /* **CRITICAL**: Makes this section the reference point for the video's absolute position */
    position: relative; 
    /* Hide anything that might spill out */
    overflow: hidden; 
}

/* 2. Position and size the video */
#myVideo {
    /* **CHANGED**: Use absolute, not fixed, to position it relative to #hero-section */
    position: fixed; 
    
    /* Pin the video to the top-left of the #hero-section */
    top: 0;
    left: 0;
    
    /* **CHANGED**: Use width/height to fill the #hero-section container */
    width: 100%; 
    height: 100%;
    
    /* Ensure the video covers the space without distortion */
    object-fit: cover; 
    
    /* Keep it behind the content */
    z-index: -100; 
}
p {
  font-family: 'Antic Didone', serif; 
  font-optical-sizing: auto;
  font-style: normal;
  margin:5vw;
  font-size:1.3em;
}
html {
    scroll-behavior: smooth;
}
/* 3. Ensure content is visible on top of the video */
.hero-content {
    /* Keep the content above the video */
    position: relative; 
    z-index: 1; 
    
    /* Set the content container to the same height as the hero section to help with vertical centering */
    height: 100vh; 
    
    /* OPTIONAL: If you want to vertically center your .blocker elements: */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
}

/* ==================================== */
/* 🔑 VIDEO BACKGROUND FIXES END HERE   */
/* ==================================== */
/* Existing styles for grid-container remain the same */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 80%;
    margin: 0 auto;
}

/* 1. Define the parent wrapper for position context */
.portfolio-item {
    position: relative; 
    overflow: hidden; 
    transition: transform 0.3s ease-out; 
    cursor: pointer; 
}

/* 2. Style the image inside the wrapper */
.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease-out;
}

/* 3. Style the overlay (which is the link element) */
.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    opacity: 0; 
    transition: opacity 0.3s ease-out; 
    
    /* Centering the text/icon inside the overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; 
    
    /* Ensure the link text itself doesn't have the default blue/purple link color */
    color: inherit; 
    text-decoration: none;
}
.item-overlay .link-text {
    color: white; 
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1px;
    /* 🚀 The desired font will now apply */
    font-family: serif; 
    transition: transform 0.3s ease;
}
/* 4. **MISSING CLASS ADDED HERE** */

/* 5. HOVER EFFECT */
.portfolio-item:hover {
    transform: scale(1.05);
    z-index: 5; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

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

/* Optional extra flair for the text */
.portfolio-item:hover .link-text {
    transform: translateY(-5px);
    font-size:3em;
    font-family: 'Domine';
}
body {
    background-color: #0a0a0a;
    color: #ebebeb;
    /* Remove default margin to ensure video fills 100vh */
    margin: 0; 

    
    /* === ADD THIS STYLES TO FIX Z-INDEX ISSUE === */
    /* This creates a new stacking context for the document */
    position: relative; 
    z-index: 1; 
}
/* --- SUBTLE BOUNCE EFFECT (Adjusted) --- */

/* 1. DEFINE THE SUBTLE MOVEMENT */
@keyframes subtle-bounce {
    0%, 100% {
        transform: translateY(0); /* Resting position */
    }
    50% {
        /* Drastically reduced bounce height for subtlety (e.g., 5px or 8px) */
        transform: translateY(-5px); 
    }
}

/* 2. APPLY THE ANIMATION TO ALL LETTERS */
.bouncing-word-heading .letter,
.bouncing-word-greeting .letter {
    display: inline-block; 
    /* Use the new keyframe name */
    animation-name: subtle-bounce; 
    /* Slow down the animation duration for a smoother, gentler bounce */
    animation-duration: 2s; 
    /* Use a slower timing function for a more relaxed movement */
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); /* Custom slow ease */
    animation-iteration-count: infinite; 
}
/* --- CSS for Slide-In Reveal --- */
.spacing {
    margin-bottom:5em;
    margin-top:1em;
}
/* 1a. INITIAL HIDE STATE - ONLY FADE (Hello and Lochlan) */
#hello-reveal, 
#lochlan-reveal {
    opacity: 0; /* Makes element invisible */
    /* NO SLIDE: Start and end at X=0 */
    transform: translateX(0); 
    
    /* Defines the speed and smoothness of the transition */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
    /* Required for spans/text elements within an H3 to respect transform */
    display: inline-block; 
    margin-top:0;
    margin-bottom:0;
}

/* 1b. INITIAL HIDE STATE - SLIDE + FADE (Paragraphs) */
#body-text-reveal, /* Paragraph 1 */
#body-text-p2,    /* Paragraph 2 */
#body-text-p3 {   /* Paragraph 3 */
    opacity: 0; /* Makes element invisible */
    /* CRITICAL: Set initial position for slide-in from the left */
    transform: translateX(0px); 
    
    /* Defines the speed and smoothness of the transition */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
    /* Required for spans/text elements within an H3 to respect transform */
    display: inline-block; 
    margin-top:0;
    margin-bottom:0;
}

/* 1c. INITIAL HIDE STATE - FADE + SLIGHT UPWARD SLIDE (Portfolio Items for Scroll-Reveal) */
/* They must be hidden so the Intersection Observer can reveal them */
.portfolio-item {
    opacity: 0;
    transform: translateY(0px); /* Start slightly below */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* Slower transition for scroll reveal */
}/* --- CONTACT ICONS STYLING --- */
.contact-icons-container {
    display: flex;
    justify-content: center; /* Ensures the icons are centered */
    gap: 30px; /* Space between icons */
    margin-top: 20px;
    margin-bottom: 40px;
}
.contact-wrapper {
    max-width: 80%;
    margin: 0 auto;
    margin-top:100px;
    padding-bottom:50px;
}
.contact-icon img {
    /* Set icon size to 90x90px */
    width: 90px;
    height: 90px;
    
    border-radius: 50%; /* Make them circular */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-icon:hover img {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}
#contact-text-reveal,
.contact-icon {
    opacity: 0;
    /* Ensure no sliding, just a fade-in. */
    transform: translateX(0); 
    /* Use the slower transition for a dramatic final reveal */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    display: block; /* Forces the element onto its own line */
    text-decoration:none;
    align-content:center;
}
.services-content p {
    /* Set margin to 0 for top/right/bottom, and 30px for left 
       to align with the 30px margin on your .short-divider-left */
    margin: 10px 0 0 30px; 
}
/* 2. REVEALED STATE */
/* This class is added by JavaScript to trigger the animation */
.revealed {
    opacity: 1 !important; /* Make it visible */
    /* All elements move to the final position X=0 (for paragraphs) or Y=0 (for portfolio items) */
    transform: translateX(0) translateY(0) !important; 
}
/* 3. WAVE DELAYS (for LOCHLAN in H1) */
.bouncing-word-heading .letter:nth-child(1) { animation-delay: 0.0s; }
.bouncing-word-heading .letter:nth-child(2) { animation-delay: 0.1s; }
.bouncing-word-heading .letter:nth-child(3) { animation-delay: 0.2s; }
.bouncing-word-heading .letter:nth-child(4) { animation-delay: 0.3s; }
.bouncing-word-heading .letter:nth-child(5) { animation-delay: 0.4s; }
.bouncing-word-heading .letter:nth-child(6) { animation-delay: 0.5s; }
.bouncing-word-heading .letter:nth-child(7) { animation-delay: 0.6s; }

/* 4. WAVE DELAYS (for Lochlan in H3) */
.bouncing-word-greeting .letter:nth-child(1) { animation-delay: 0.0s; }
.bouncing-word-greeting .letter:nth-child(2) { animation-delay: 0.1s; }
.bouncing-word-greeting .letter:nth-child(3) { animation-delay: 0.2s; }
.bouncing-word-greeting .letter:nth-child(4) { animation-delay: 0.3s; }
.bouncing-word-greeting .letter:nth-child(5) { animation-delay: 0.4s; }
.bouncing-word-greeting .letter:nth-child(6) { animation-delay: 0.5s; }
.bouncing-word-greeting .letter:nth-child(7) { animation-delay: 0.6s; }
.blocker {
    margin: 4vw;
    padding: 35px;
    
    /* ADDED FOR TRANSLUCENCY AND EFFECT */
    background-color: rgba(41, 41, 41, 0.3); /* Semi-transparent background (using your color) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    backdrop-filter: blur(15px); /* BLURS WHATEVER IS BEHIND THE ELEMENT */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
}
/* --- 1. Class for the Past Works Heading --- */
.past-works-heading {
    /* Translates: style="margin-bottom:0; padding-bottom:0; font-size:4em;" */
    margin-bottom: 0 !important; /* Use !important if other heading classes are overriding */
    padding-bottom: 0 !important;
    font-size: 4em;
    margin-top:2em;
    text-align:center!important;
}
.text2 {
    margin-top:10px;
    margin-bottom:60px;
    text-align:center;
}
/* --- 2. Class for the Divider beneath Past Works --- */
.past-works-divider {
    /* Translates: style="width:25%; margin-bottom:1%; margin-top:5px; " */
    width: 25%!important;
    margin-bottom: 35px!important;
    margin-top: 5px!important;
    
    /* Ensure it remains centered, inheriting from #past-works-reveal */
    margin-left: auto;
    margin-right: auto;
}
.short-divider {
    /* --- Line Appearance --- */
    border: none; 
    border-top: 1px solid #ebebeb; 
    
    /* --- Line Sizing and Centering --- */
    width: 50%; 
    margin: 20px auto; 
}
.short-divider-left {
    border: none; 
    border-top: 1px solid #ebebeb; 
    width: 80%; 

    margin: 10px 0 20px 30px; 
}
.heading {
    font-size: 9em;
    margin-bottom:0;
 
}
/* Container for spacing */


/* 🆕 Hide the new Portfolio Intro Text container (If you are keeping this) */
#portfolio-intro-reveal {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; 
    
    /* Ensure text within aligns to the center */
    text-align: center;
}

/* 🔑 FIX: MOVE THIS BLOCK OUTSIDE OF THE MEDIA QUERY */
#past-works-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}

#past-works-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
a:link {
    /* Sets the text color to your site's default light color */
    color: #ebebeb; 
    text-decoration:none;

    
    /* Adds a smooth transition for hover/active effects */
    transition: color 0.3s ease;
}
a:visited {
    /* This ensures visited links also use the site's default color 
       and don't turn purple (browser default) */
    color: #ebebeb; 
}

/* 3. Define the hover state */
a:hover {
    /* You may want a slight change on hover, like white or a soft accent color */
    color: white; 
    /* You can add an underline back on hover for better usability */
    text-decoration: none; 
}
strong {
    text-decoration:underline;
}
.cta-button-container {
    /* 🔑 CRITICAL: Enforce horizontal centering */
    text-align: center !important; 
    
    /* Ensure the container is fully visible before applying styles for visual debugging */
    /* background-color: rgba(255, 0, 0, 0.1); /* Temporary debug */ 
    
    margin-top: 35px; 
    margin-bottom: 50px; 
    
    /* Hiding for JS Reveal */
    opacity: 0;
    transition: opacity 0.5s ease-out; 
}
/* Button Styling */
.cta-button {
    /* Layout and Display */
    display: inline-block; /* Allows padding and keeps it centered */
    padding: 25px 5%;
    margin-top:50px;
    /* Typography */
    align-content:left;
    font-size: 2em;
    font-weight: 600; /* Slightly bold text */
    text-decoration: none; /* Remove underline */
    letter-spacing: 0.5px;
    
    /* Appearance */
    color: #ffffff; /* White text */
    background-color: #0e1c2c4d; /* Primary blue color (adjust to your brand) */
    border: none;
    border-radius: 4px; /* Slightly rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle lift effect */
    
    /* Animation */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
}

/* Hover Effect (makes it feel interactive) */
.cta-button:hover {
    background-color: #0e1c2cd6; /* Darker blue on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow */
    transform: translateY(-2px); /* Subtle lift on hover */
}

/* Active/Click Effect */
.cta-button:active {
    background-color: #004085; /* Even darker blue when clicked */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0); /* "Press" the button down */
}
.heading2 {
    font-size:3.5em;
    padding-bottom:2em;
}
.services1 {
    font-size:3.5em;
    padding-bottom:1em;
 
}

.heading3 {
    font-size:4em;
    text-align:left!important;
    margin: 5vw;
    margin-bottom:0;
}
.heading3alt {
    font-size: 4em;
    text-align: left !important;

    margin: 0 0 0 30px; 
}

.underlined-word {
    /* 1. Makes the element only as wide as its content ("Lochlan") */
    display: inline-block; 
    
    /* 2. Create the line itself */
    border-bottom: 2px solid #ebebeb;
    margin-bottom:0;
    
    /* 4. Keep existing italic style */
    font-style: italic; 
}
.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}
.site-footer {
    margin-top:50px;
}
.site-footer a {
    color: #fff;
    text-decoration: none;
    font-family: var(--terminal-font, 'Courier New', monospace);
    font-size: 20px;
    opacity: 0.8;
    transition: opacity 0.2s;
    
}
/* --- HEADER STYLING --- */
header {
    padding: 20px 0; 
    font-size: 2em; 
    color: #ebebeb;
}
.source-serif {
    font-family: "Source Serif 4", serif;
    font-weight: 400;
    font-style: normal;
}
/* Services container layout */
.services-container {
    display: flex;
    justify-content: center;
    align-items: center; /* Changed from flex-start to center */
    padding: 8vw 20px;
    padding-top:2vw;
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
    
}
.heading4 {
        font-size: 5em;
        text-align:center!important;
        margin: bottom 0px!important;
        padding: bottom 0!important;;
    }
/* Left side: Service content */
.services-content {
    max-width: 600px;
    padding: 20px 30px; /* Reduced padding for tighter look */
    margin-right: 20px; /* Space between content and menu */
}

/* Service title */
.services-content h2 {
    font-size: 2.4rem;
    margin-bottom: 10px; /* Reduced gap */
    font-weight: normal;
}

/* Service description text */
.services-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 0; /* No extra gap on top */
}

/* Right side: Services menu */
.services-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 1.3rem;
    font-family: 'Georgia', serif;
    color: #eee;
}

/* Each service menu item */
.services-menu li {
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 8px 15px;
    border-radius: 6px;
}

/* Active service highlight */
.services-menu li.active,
.services-menu li:hover {
    background-color: rgba(6, 80, 115, 0.4);

    color: #fff;
}
/* --- HAMBURGER MENU STYLES (FINAL FIX) --- */
.hamburger-menu {
    position: fixed;
    top: 7vw; /* Distance from the top */
    right: 7vw; /* Distance from the right edge */
    z-index: 1001; 

    background: none;
    border: none;
    cursor: pointer;
    
    /* *** CRITICAL FIX: REMOVE PADDING TO ALLOW FLEX SPACING *** */
    padding: 0; 
    
    width: 60px; 
    /* *** SIZE INCREASE: Doubled Height (to maintain proportion) *** */
    height: 44px !important;
    
    display: flex !important;
    flex-direction: column !important;
    
    /* Use space-between for maximum vertical separation */
    justify-content: space-between !important; 
    
    /* Reset line height just in case */
    line-height: 0 !important; 
}

/* Ensure the bars are 2px high */
.hamburger-menu .bar {
    display: block !important; 
    width: 100%;
    height: 2px !important; 
    background-color: white; 
    transition: all 0.3s ease-in-out;
}

/* --- SIDE-DRAWER NAVIGATION STYLES --- */
.full-screen-nav {
    position: fixed;
    top: 0;
    width: 320px; 
    height: 100%;
    
    /* Initial state: Slide the menu OFF-SCREEN to the right */
    right: -320px; 
    
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 1000; 
    
    display: flex;
    justify-content: center;
    align-items: center;

    transition: right 0.5s ease-in-out;
}

/* Class added by JavaScript when the menu is open */
.full-screen-nav.is-open {
    right: 0; 
}

/* --- Overlay Styles (If you added the .overlay div) --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.overlay.is-active {
    visibility: visible;
    opacity: 1;
}




.footer-copy {
    font-size: 1em;
    opacity: 0.6;
    margin-top: 10px;
    margin-bottom:30px;
    text-align:center;
}
/* --- LINK STYLING --- */
.nav-links a {
    font-family: 'Antic Didone', serif; 
    color: #ebebeb;
    text-transform: uppercase; 
    text-decoration: none;
    padding: 0 15px; 
    font-size:3rem;
    
}

/* --- SEPARATOR STYLING --- */
.nav-links {
    list-style: none; /* <--- CRITICAL FIX: Removes the bullet points (dots) */
    padding: 0;
    margin: 0;
    
    /* Ensure other critical layout properties are still applied */
    display: flex;
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    height: 100%;
    justify-content: center; 
}

/* Ensure the list item padding is correct for spacing */
.nav-links li {
    padding: 15px 0; /* Add vertical padding for spacing */
}
.antic-didone-regular {
    font-family: "Antic Didone", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
.linebreak {
    display:none;
}

@media (max-width: 1000px) {
    .footer-copy {
        margin-top: 15px;
    }
    .hamburger-menu {
        /* Keep alignment based on 4vw content margin */
        right: 8vw; 
        top: 8vw; /* Closer to the top edge */
        
        /* Size down slightly from desktop size */
        width: 45px; 
        height: 33px !important; 
        
        /* Ensure spacing properties are correct */
        padding: 0; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    .hamburger-menu .bar {
        /* Line thickness reduced slightly */
        height: 3px !important; 
    }
    
    /* Full-Screen Nav (Mobile Coverage) */
    .full-screen-nav {
    position: fixed;
    top: 0;
    width: 320px; 
    height: 100%;
    
    /* Initial state: Slide the menu OFF-SCREEN to the right */
    right: -320px; 
    
    background-color: rgba(0, 0, 0, 0.8); 
    z-index: 1000; 
    
    display: flex;
    justify-content: center;
    align-items: center;

    transition: right 0.5s ease-in-out;
}

    .full-screen-nav.is-open {
        right: 0; /* Slides fully into view */
    }
    
    /* ========================================================= */
    /* 📝 NAVIGATION LINKS (Inside Open Menu) */
    /* ========================================================= */
    .nav-links {
        list-style: none; /* Removes the dots/bullets */
        /* Ensure list is centered and padded correctly */
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        justify-content: center;
    }
    
    .nav-links li {
        /* Add spacing between vertical links */
        padding: 10px 0; 
    }
    
    .nav-links a {
        font-family: 'Antic Didone', serif; 
        color: #ebebeb;
        text-transform: uppercase; 
        text-decoration: none;
        /* Increase font size for better readability and tap area in the open menu */
        font-size: 2em; 
        padding: 0 15px; }
    .heading3 span,
    .heading3 .letter {
        font-size: inherit;
    }
    .opener {
    display: flex;
    flex-direction: column; /* Optional: Stack children vertically */
    align-items: center;    /* Centers children horizontally (if column) or vertically (if row) */
    justify-content: center; /* Centers children on the main axis */
    height: 85vh;

}
#past-works-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}

#past-works-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
    .contact-icon img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .grid-container {
        grid-template-columns: 1fr; 
        max-width: 100%;
        gap: 25px;
        padding: 0;
    }

    .heading3 {
        font-size: 2em;
        text-align: left !important; /* Center service titles on mobile */
    }
.heading3alt {
    font-size:2em;
    text-align:center!important;
    margin: 5vw;
    margin-bottom:0;
}
    .linebreak {
        display: unset;
    }

    .heading2 {
        font-size: 2em;
        margin-bottom: 5px;
    }
    .heading4 {
        font-size: 2em;
        text-align:center!important;
        margin: bottom 0px!important;
        padding: bottom 0!important;;
    }
    .services-container {
        font-size: 2em;
        margin-bottom: 5px;
        padding-top:1vw;
    }

    .heading {
        font-size: 4em;
    }

    .pipe {
        display: none;
    }

    .spacing {
        margin-bottom: 2em;
        margin-top: 1em;
    }

    /* Services page specific adjustments */
    .services-container {
        flex-direction: column;
        align-items: center;
    }

    .services-content {
        margin-right: 0;
        text-align: center;
        width: 90%;
        font-size: 1.2em;
        margin-bottom: 20px; /* space between content and menu */
    }

    .services-menu {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .services-menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 0;
    }
    .cta-button-container {
    /* 🔑 CRITICAL: Enforce horizontal centering */
    text-align: center !important; 
    
    /* Ensure the container is fully visible before applying styles for visual debugging */
    /* background-color: rgba(255, 0, 0, 0.1); /* Temporary debug */ 
    
    margin-top: 35px; 
    margin-bottom: 50px; 
    
    /* Hiding for JS Reveal */
    opacity: 0;
    transition: opacity 0.5s ease-out; 
}
/* Button Styling */
.cta-button {
    /* Layout and Display */
    display: inline-block; /* Allows padding and keeps it centered */
    padding: 25px 5%;
    margin-top:50px;
    /* Typography */
    align-content:left;
    font-size: 2em;
    font-weight: 600; /* Slightly bold text */
    text-decoration: none; /* Remove underline */
    letter-spacing: 0.5px;
    
    /* Appearance */
    color: #ffffff; /* White text */
    background-color: #0e1c2c4d; /* Primary blue color (adjust to your brand) */
    border: none;
    border-radius: 4px; /* Slightly rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle lift effect */
    
    /* Animation */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
}
    .services-menu li {
        font-size: 1.1em;
        text-align: center;
        padding: 8px 15px;
    }

    .services-menu li.active {
        align-self: center;
    }

    /* Optional: adjust blocker margins for mobile */
    .blocker {
        margin: 2vw;
        padding: 25px;
    }
    .nav-links a {
    font-family: 'Antic Didone', serif; 
    color: #ebebeb;
    text-transform: uppercase; 
    text-decoration: none;
    padding: 0 15px; 
    font-size:2rem;
    
}
.portfolio-item:hover .link-text {
    transform: translateY(-5px);
    font-size:2em;
    text-decoration:none!important;
}
.past-works-divider {
    /* Translates: style="width:25%; margin-bottom:1%; margin-top:5px; " */
    width: 80%!important;
    margin-bottom: 25px!important;
    margin-top: 0px!important;
    
    /* Ensure it remains centered, inheriting from #past-works-reveal */
    margin-left: auto;
    margin-right: auto;
}
.past-works-heading {
    /* Translates: style="margin-bottom:0; padding-bottom:0; font-size:4em;" */
    margin-bottom: 0 !important; /* Use !important if other heading classes are overriding */
    padding-bottom: 0 !important;
    font-size: 3em;
    margin-top:1em;
    text-align:center!important;
}
.services-content .short-divider-left {
        /* *** FIX FOR MOBILE CENTERING *** */
        /* Forces the divider to center itself horizontally */
        margin: 10px auto 20px auto; 
        
        /* Set a reasonable width for a centered divider on mobile */
        width: 70%; /* e.g., 50% of the services-content container (which is 90% wide) */
    }
}