html, body {
    height: 100%; /* REQUIRED for vh units to work correctly on some elements */
    margin: 0;
    padding: 0;
    color: black;
}

/* Update your CSS file */

.landing-banner {
    /* Set a guaranteed height for the top banner */
    height: 100vh; 
    position: relative;
    /* Ensure the background image covers the entire area */
    background-image: url('../img/Landing.jpg'); 
    background-size: cover;
    background-position: center;
    
    /* Add the overlay for legibility (optional, but recommended) */
    background-color: rgba(0, 0, 0, 0.4); 
    background-blend-mode: overlay;
}

/* Ensure the full-width-banner child div is used for layering if needed */
.full-width-banner {
    /* Make sure this spans the height of the parent landing-banner */
    height: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-title-img {
    /* For the image that says "3D Illustration Design" */
    max-width: 80%; 
    height: auto;
}

.custom-portrait {
    /* Make the portrait slightly smaller and perhaps circular/rounded */
    max-width: 90%; 
    height: auto;
    border-radius: 10px;
}

.client-logo-section {
    /* Existing code here */
    padding: 15px 0;
    
    /* ADD A LARGE BOTTOM MARGIN to push the following content down */
    margin-bottom: 50px; /* Adjust this value (e.g., 50px, 4rem) for the desired separation */
}

.client-logos {
    /* Ensures logos line up nicely */
    align-items: center; 
}

.client-logo {
    /* Current max-height: 40px; */
    max-height: 70px; /* Increase the logo height for a larger appearance */
    
    width: auto;
    opacity: 0.6; 
    /* ... other styles ... */
}

.client-logo:hover {
    opacity: 1.0; /* Full opacity on hover */
}
.client-trust-section {
    /* Current padding: 40px 0; */
    padding: 80px 0; /* Doubling the vertical padding for more space */
    /* or use rem for better scaling: */
    /* padding: 5rem 0; */ 
    
    /* ... other background/color styles ... */
}

/* Ensure the logos are centered within the full width */
.client-trust-section .client-logos {
    /* We use justify-content-center in the HTML class, but ensure logos scale well */
    align-items: center; 
}

.portfolio-section {
    /* Set a slightly different background for visual break, if desired */
    background-color: #ffffff; 
    padding-top: 80px;
    padding-bottom: 80px;
}

.instagram-grid-secondary {
    display: grid;
    /* This will maintain a 3-column layout within the 8-column space */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 0px; 
}

.portfolio-placeholder {
    /* Style for the empty area when no projects are listed */
    grid-column: 1 / -1; /* Make the placeholder span all columns */
    min-height: 200px; 
    border: 1px dashed #ffffff;
    border-radius: 8px;
}



/* --- Timeline Styling --- */
.timeline-full-section {
    background-color: #f8f9fa; /* Light background for contrast */
}

.timeline-year-block {
    /* Ensure the block takes full width */
    width: 100%;
    /* Set the specific background image for this year */
    background-image: url('../img/2021.jpg'); 
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    margin-bottom: 0px;
}

/* --- Specific Background Overrides --- */

#year-2021 {
    /* Replace with the path to the specific background image for 2021 */
    background-image: url('../img/2021.jpg'); 
}

#year-2023 {
    /* Replace with the path to the specific background image for 2023 */
    background-image: url('../img/2023.jpg');
}

#year-2024 {
    /* Replace with the path to the specific background image for 2024 */
    background-image: url('../img/2024.jpg');
}

#year-2025 {
    /* Replace with the path to the specific background image for 2025 */
    background-image: url('../img/2025.jpg');
}

.timeline-year-text {
    text-align: center;
    font-size: 3rem;
    padding: 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* --- Timeline Styling Correction --- */
.timeline-work-scroller {
    /* 1. ENABLE FLEXBOX */
    display: flex; 
    
    /* 2. PREVENT WRAPPING: Forces all content onto a single horizontal line */
    flex-wrap: nowrap; 
    white-space: nowrap; 
    
    /* 3. ENABLE SCROLLING: Allows the user to scroll horizontally */
    overflow-x: scroll;
    
    /* Improves scrolling performance on touch devices */
    -webkit-overflow-scrolling: touch; 
}
.timeline-preview {
    /* Prevents the image from shrinking below its defined width */
    flex: 0 0 auto; 
    
    /* Define a fixed size so the browser knows how far to scroll */
    width: 250px; 
    height: 180px;
    
    /* Add spacing between the preview images */
    margin-right: 15px; 
}

/* --- Commision Work Banner --- */
.commision-work-banner {
    /* Use the dark overlay background from your concept */
    background-image: url('../img/Comissionwork.jpg'); 
    
    /* 1. Stop the image from tiling/repeating */
    background-repeat: no-repeat; 
    
    /* 2. Ensure the image scales to cover the entire section */
    background-size: cover; 
    
    /* 3. Center the image within the container */
    background-position: center; 
    /* Ensure the section has enough height to display the image */
    min-height: 250px; /* Or use a larger value like 40vh */
    
    margin-top: 50px;
    
}


.custom-cta-main {
    /* --- Sizing and Shape --- */
    /* Must be 'inline-block' or 'block' to apply dimensions/padding */
    display: inline-block; 
    
    /* Control the size of the shape using padding */
    padding: 2.5rem 5rem; /* Large top/bottom and side padding */
    
    /* Optional: Set a minimum width if content is small */
    /* min-width: 300px; */ 

    /* Optional: Make it a rounded/pill shape */
    border-radius: 10px; 

    /* --- Appearance --- */
    background-color: #007bff; /* Example background color (Blue) */
    color: white; /* Text color */
    border: none; /* Remove any default border */
    
    /* --- Text/Content --- */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline from the anchor tag */
    font-size: 1.8rem; /* Make the text large */
    font-weight: bold;
    line-height: 1; /* Ensure text sits properly */

    /* --- Interactivity (Optional) --- */
    cursor: pointer; /* Change mouse pointer to indicate clickability */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.custom-cta-main:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.instagram-grid {
    display: grid;
    /* This will maintain a 3-column layout within the 8-column space */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 0px; 
}
/* ... Keep the responsive media query to switch to 2 columns on small screens ... */

/* 2. The Image Item: Ensure Square Aspect Ratio and Image Fit */
.grid-item {
    /* Create a square area for the image using the aspect-ratio property */
    aspect-ratio: 1 / 1; 
    overflow: hidden; /* Important to hide any image overflow */
    display: block; /* Ensure the link/div takes up the full grid cell */
}

/* 3. The Image Tag: Make the image fill the square area */
.grid-item img {
    width: 100%;
    height: 100%;
    /* This makes the image cover the container, cropping excess if needed */
    object-fit: cover; 
    /* Removes the default space below inline images */
    vertical-align: middle; 
}

/* 4. Basic Responsiveness (for smaller screens) */
@media (max-width: 600px) {
.instagram-grid{         /* On small screens, change to a 2-column layout */
    grid-template-columns: 1fr 1fr; 
}
}
/* --- General Section Spacing --- */

.portfolio-gallery,
.about-me,
.contact-section {
    /* General vertical padding for all main sections */
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Style for the full-width banner text (if you don't use an image) */
.full-width-banner h1 {
    /* Use position absolute/relative to center text over the background */
    position: relative;
    z-index: 2;
}

/* Target the image inside the card within the skills section */
.about-me-intro .card .card-img-top {
    /* 1. Force the image shape to be a perfect circle */
    border-radius: 50%;
    
    /* 2. Constrain the width for a clean circle (e.g., 80% of its container width) */
    width: 80%;
    
    /* 3. Center the block-level image horizontally */
    display: block; 
    margin: 10px auto; 
    
    /* 4. Ensure the image is a perfect square and fills the space */
    aspect-ratio: 1 / 1; 
    object-fit: cover; /* Prevents the image from stretching */
}
.custom-dark-bg {
    /* Assuming this class is used for the dark background sections (like the footer) */
    background-color: #343a40;
}

.end-of-page-cta {
    /* Set a guaranteed height for visibility */
    min-height: 70vh; 
    
    /* 1. REMOVE SOLID BACKGROUND COLOR if you have one here (like custom-dark-bg) */
    background-color: transparent; 
    
    /* 2. SET THE COMBINED BACKGROUND IMAGE */
    background-image: url('../img/endpage.jpg'); /* REPLACE with your image path */
    
    /* 3. SIZING & POSITIONING */
    background-size: cover;       /* Ensures image fills the section */
    background-position: center bottom; /* Position the image for best visibility */
    background-repeat: no-repeat;
    
    /* 4. DARKENING OVERLAY (Crucial for white text legibility) */
    /* Use position: relative to allow pseudo-element layering */
    position: relative; 
    z-index: 1; /* Puts the section into the stacking context */
}

/* 5. ADD A DARK PSEUDO-ELEMENT OVERLAY (Best practice for text contrast) */
.end-of-page-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark overlay color */
    background-color: rgba(0, 0, 0, 0.7); /* Adjust the 0.7 for desired darkness */
    z-index: 2; /* Layered just above the background image */
}

#contact .final-contact-text-block {
    text-align: left !important;
}

/* This rule is extremely high-specificity and should override Bootstrap or inherited centering */
.end-of-page-cta .container {
    text-align: left !important; /* Forces all text inside the container to align left */
}

/* Re-center the heading and social buttons manually */
.end-of-page-cta .text-center {
    /* Ensures the heading text remains centered */
    text-align: center !important; 
}

/* Ensure the paragraph remains centered as a block */
.final-contact-text-block {
    max-width: 600px;
    margin-left: auto !important; 
    margin-right: auto !important; 

    text-align: left !important;
}

.btn {
    background-color: rgb(255, 255, 255) !important;
    border-style:none !important;
}


.final-contact-content {
    /* Set the block's size and center it */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    
    /* Ensure layering is correct */
    position: relative; 
    z-index: 3; 

    /* Nudge the entire block 5% to the left from the true center */
    left: -1%; 
}

.final-contact-text-block {
    /* 1. Set a reasonable width for the paragraph block */
    max-width: 600px; 
    
    /* 2. Center the paragraph block itself (This works because of mx-auto in HTML) */
    margin-left: auto;
    margin-right: auto;
    
    /* 3. Force the text inside the block to the left */
    text-align: left !important; 

    /* REMOVE the conflicting position property */
    /* left: -5%; <--- DELETE THIS LINE */
}