/* Reset margins and paddings for html and body */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Body background with black color and image overlay */
body {
    font-family: Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: white; /* Text color */
    position: relative;
    background-color: black; /* Black background */
    overflow-x: hidden; /* Prevent horizontal overflow */
    display: flex;
    flex-direction: column;
}

    /* Overlay background image */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* Full width of the viewport */
        height: 100vh; /* Full height of the viewport */
        background: url('@backgroundImageUrl') no-repeat center center fixed; /* Prevent repeating */
        background-size: cover; /* Ensure it covers the viewport */
        opacity: 0.2; /* Adjust the opacity of the image */
        z-index: -1; /* Make sure the image is behind the content */
        transform: scaleX(-1); /* Flip the image on the vertical axis */
    }


.layout-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.page {
    flex: 1; /* This ensures the page content takes up all available space, pushing the footer to the bottom */
}

/* Header and logo styles */
.header {
    width: 100%;
    background: transparent;
    font-family: Georgia, "Times New Roman", Times, serif;
}

/* Navigation bar styles */
.navbar {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: flex-start; /* Align items to the left */
    background: transparent;
    padding: 0.625rem 1.25rem; /* Top-Bottom: 0.625rem (10px), Left-Right: 1.25rem (20px) */
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 4vw;
    font-family: Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.logo {
    max-width: 10%; /* Logo width as a percentage of the navbar */
    max-height: 50%; /* Adjust height relative to its container */
    height: auto;
    width: auto;
    margin-right: 1.25rem; /* 20px */
}

/* Navbar links styles */
.navbar a {
    color: #808080;
    text-decoration: none;
    font-size: 4vw;
    padding: 0.625rem 1.25rem; /* Top-Bottom: 0.625rem (10px), Left-Right: 1.25rem (20px) */
}

    .navbar a:hover {
        color: #7030A0;
        font-weight: bold;
    }

.footer {
    background-color: black;
    border-top: 0.25rem solid #92D050;
    /*    box-sizing: border-box;
    position: relative;*/
}

.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-height: 0.25rem;
    align-items: center;
    gap: 2rem;
    /*    text-align: center;*/
    /*    max-width: 100%;*/
}

.footer-link {
    /*    color: white;*/
    text-decoration: none;
    /*    font-size: 0.9rem;*/
}

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

.footer-icon {
    height: 1.25rem;
    width: auto;
    max-width: 100%;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 0.1rem;
        align-items: center;
        text-align: left;
    }

    .footer {
        padding: 1.5rem 1rem;
    }
}


/* Home page specific content */
/*.main-content-home {
    display: flex;
    flex-direction: column;*/ /* Arrange children vertically */
/*justify-content: start;*/ /* Vertically center */
/*align-items: center;*/ /* Horizontally center */
/*height: 100vh;*/ /* Make sure it takes full screen height */
/*padding: 20px;*/ /* Optional padding inside the content box */
/*color: white;*/ /* Text color */
/*position: relative;
    z-index: 1;*/ /* Ensure content is above background */
/*box-sizing: border-box;
}*/
/* Header animation */
.main-content-home .header-text {
    text-align: center; /* Centering the text */
    font-size: 10.5vw; /* Increased font size */
    opacity: 0;
    animation: showHeader 3s forwards;
    line-height: 1.3; /* Adjust line height for better spacing */
}

@keyframes showHeader {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.main-content-home .header-text span {
    display: inline-block;
}

.main-content-home .line-1 {
    color: white; /* White color for the first line */
}

.main-content-home .line-2 {
    color: #7030A0; /* Pink color for the second line */
}

/* Word animation */
.main-content-home .word {
    opacity: 0;
    animation: showWords 1s forwards;
    animation-delay: calc(0.5s * var(--wordIndex));
}

@keyframes showWords {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Subheading and main text container */
.main-content-home .subheading-main {
    /*    font-family: Georgia; Change for subheading and headng only*/
    display: flex;
    flex-direction: column; /* Stack subheading and main text vertically */
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeIn 3s forwards 3s; /* Start after header animation */
}

.main-content-home .subheading {
    font-size: 7vw; /* Font size for subheading */
    margin: 75px 0; /* Margin to separate it from the main text */
    text-align: center;
}

/* Main text fade effect after the header */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main content area for all pages */
.main-content {
    flex: 1; /* Pushes footer to the bottom if needed */
    width: 100%; /* Full width of the container */
    padding: 20px; /* Optional padding inside the content box */
    color: white; /* Text color */
    position: relative;
    z-index: 1; /* Ensure content is above background */
    box-sizing: border-box;
}

    /* Headings inside main-content */
    .main-content h2 {
        font-size: 48px;
        margin: 0 0 10px 0; /* Remove top margin and reduce bottom margin */
    }

    /* Paragraphs inside main-content */
    .main-content p {
        font-size: 16px;
        line-height: 1.6; /* Standard line spacing */
        margin: 0 0 10px 0; /* Remove side margins and add only bottom margin */
    }

    /* Links inside main-content */
    .main-content a {
        color: #007bff; /* Style for links */
        text-decoration: none;
    }

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

/* First Section: Image on the left, Text on the right */
.text-image-container {
    margin-left: 5%;
    position: relative;
    width: 90%;
    /*    max-height: 200px;*/
    /*    min-height: 50vh;**/
    display: flex; /* Flexbox will align elements in a row */
    flex-direction: row-reverse; /* This flips the image and text order */
    align-items: flex-start; /* Ensure text and image stay aligned */
    /*    background-color: antiquewhite;*/
    z-index: 1;
    padding-bottom: 4vw; /* Ensure bottom padding to prevent cutoff */
}

/* Image container styling */
.image-container {
    height: 80%;
    width: 80%; /* Image container will take up 80% of the space */
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    margin-top: 10%;
}

    /* Image styling */
    .image-container img {
        height: 600px; /* or whatever you want */
        width: 100%;
        height: auto;
        object-fit: cover;
        /*        filter: grayscale(100%) sepia(100%) saturate(500%) hue-rotate(240deg);*/
    }

/* New background container styling */
.background-container {
    width: 100%;
    /*    height: 100vh; */
    background-color: #808080;
    margin-left: -10%;
    position: relative;
}

/* Text container */
.text-container {
    width: 70%;
    height: 100%;
    padding: 2vw;
    color: white;
    position: relative;
    margin-left: 20%;
    z-index: 4;
}

/*.header-section {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 3vw;
    text-align: left;
    color: #7030A0;
    position: relative;
    display: inline-block;
}
    .header-section::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -0.5rem;
        width: 25%;
        height: 2px;
        background-color: #7030A0;
    }*/

/* Override header color in the second section */
/*.second-section .header-section {
    color: #92D050;
}*/
    /* Override sub-header underline in the second section */
    /*.second-section .header-section::after {
        background-color: #92D050;
    }*/

.header-section {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 3vw;
    text-align: left;
    color: #7030A0;
    position: relative;
    display: inline-block;
}

    .header-section::after {
        content: '';
        display: block;
        width: 25%;
        height: 2px;
        background-color: #7030A0;
        margin-top: 0.5rem;
    }
/* Override header color in the second secton */
.second-section .header-section {
    color: #92D050 
}

    /* Correctly scoped and visible underline */
    .second-section .header-section::after {
        background-color: #92D050;
        display: block;
    }



/*    .second-section .header-section::after {
        background-color: #92D050;
    }
*/

/*
.sub-header-section::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 10%;
    height: 2px;
    background-color: #7030A0;
}
*/


/* Main text styling */
.main-text {
    margin-top: 2rem;
    font-size: 1.5vw;
    line-height: 1.6;
}
/* Parent container for the image grid */
.image-grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 2rem;
}

/* Image grid styling */
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    width: 100%;
    gap: 1rem;
}

    /* Styling for images inside the grid */
    .image-grid img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

/* Responsive: adjust grid and container on small screens */
@media (max-width: 768px) {
    .image-grid-container {
        margin-left: 1.25rem;
        align-items: flex-start;
        height: auto; /* Let container grow */
        padding: 2rem 0; /* Optional: add breathing room */
    }

    .image-grid {
        grid-template-columns: 1fr; /* 1 column */
        grid-template-rows: none; /* Let rows flow naturally */
        max-width: 500px; /* Limit grid width for centered look */
    }
}

/* Service container styling */
.service-container {
    display: flex;
    align-items: center;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
    width: 100%; /* Let grid control the width */
    aspect-ratio: 4 / 3; /* Keeps a nice image ratio across screen sizes */
    position: relative;
    overflow: visible;
}

.service-header {
    font-size: 4vw;
    text-align: left;
    margin: 2rem;
    color: white;
    position: relative;
}

.highlight {
    color: #7030A0;
}

/* Image styling */
.service-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 100%;
    filter: grayscale(100%);
}

/* Position heading over the image */
.service-text .heading {
    position: absolute;
    font-family: Georgia, "Times New Roman", Times, serif;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Ensure precise centering */
    z-index: 2; /* Higher than the image */
    font-size: 2vw;
    font-weight: bold;
    color: var(--heading-color, white);
    text-align: center;
    background-color: rgba(128, 128, 128, 0.5); /* semi-transparent background */
    padding: 0.5vw 1vw;
    border-radius: 5px;
    margin-bottom: 1vw; /* Space between heading and paragraph */
    line-height: 1.1;
}

/* Paragraph styling - Initially hidden */
.service-text .paragraph {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Ensure precise centering */
    font-size: 1.5vw;
    line-height: 1.5;
    color: white;
    text-align: left; /* Change to left-align the text */
    background-color: black; /* Semi-transparent background for readability */
    padding: 1vw;
    border-radius: 5px;
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Ensure it's not interactable */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 3; /* Higher than heading */
    white-space: nowrap; /* Prevent text wrapping */
    min-width: fit-content; /* Allow expansion */
    max-width: 80vw; /* Prevent excessive growth */
}

@media (max-width: 768px) {
    .service-text .heading {
        font-size: 5vw;
    }

    .service-text .paragraph {
        font-size: 3.5vw;
        white-space: normal;
        max-width: 90vw;
    }
}
/* Add SVG as a bullet point to each paragraph */
.service-text .paragraph p {
    display: flex;
    align-items: center;
    margin: 5px 0; /* Adjust spacing between lines */
}

    .service-text .paragraph p::before {
        content: "";
        display: inline-block;
        width: 16px; /* Width of the bullet (adjust as needed) */
        height: 16px; /* Height of the bullet (adjust as needed) */
        background-image: url('media/bullet_cube_white.svg'); /* Path to your SVG */
        background-size: contain;
        margin-right: 10px; /* Space between bullet and text */
    }

/* Show paragraph on hover */
.service-container:hover .paragraph {
    opacity: 1;
    background-color: grey;
    visibility: visible;
}

/* Hover effect for border */
.service-container:hover {
    border-color: var(--border-color, #66FF66); /* Use the border color from the custom property */
}

/* Contact page wrapper */
.contact-container {
    margin-left: 3rem;
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 2rem;
}

/* Header styling */
.contact-header {
    font-size: 4vw;
    text-align: left;
    color: white;
    position: relative; /* Ensure the pseudo-element is positioned relative to this container */
}


.vcard-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 400px;
    max-width: 600px;
    margin: 1rem 0 0 0rem; /* Top and left margin only */
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    background-color: #f9f9f9;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    gap: 2rem;
}

@media (max-width: 768px) {
    .vcard-container {
        width: 275px;
        max-width: 600px;
        margin: 1rem 0 0 0rem; /* Top and left margin only */
        flex-direction: row;
        align-items: center;
        text-align: center;
    }

    .vcard-image {
        margin: 0 0 1rem 0;
    }

    .vcard-text {
        align-items: center;
    }
}

.vcard-image {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    margin-right: 3rem;
    object-fit: cover;
    border: 2px solid #ccc;
}

.vcard-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .vcard-text span {
        font-size: 1rem;
        color: black;
    }

        .vcard-text span strong {
            font-size: 1rem;
            color: #000;
        }

.vcard-linkedin {
    margin-top: 0.5rem;
    display: inline-block;
}

    .vcard-linkedin img {
        width: 5rem;
        height: 1.25rem;
        transition: transform 0.2s ease-in-out;
    }

        .vcard-linkedin img:hover {
            transform: scale(1.1);
        }

/* Form Grid Layout */
/*.form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 75rem;
    margin: 0 auto;
    margin-left: -3rem;
    padding-left: 3rem;
    padding-top: 3rem;
}*/

.form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 3rem 0rem 0rem;
}

/* Full-width for elements that span both columns */
.full-width {
    grid-column: 1 / -1;
}

/* Responsive layout: single column on screens ≤ 768px */
@media (max-width: 768px) {
    .form-container {
        grid-template-columns: 1fr;
        padding: 2rem 2rem 0rem 0rem;
    }

    .full-width {
        grid-column: 1; /* override full-width to match 1 column */
    }
}

.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

/* Full-width elements */
.full-width {
    grid-column: 1 / -1;
}

/* Floating labels */
.form-group label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    padding: 0 0.3rem;
    transition: all 0.2s ease-out;
    pointer-events: none;
    font-size: 1rem;
    color: #999;
    background: transparent;
}

/* Special rule for textarea labels */
.form-group textarea + label {
    top: 1rem;
    transform: none;
}

/* Input & Textarea styling */
.form-control {
    padding: 0.75rem 1rem;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

.custom-submit {
    width: 10rem;
    background-color: #FF0066;
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
}

.checkbox-label-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.privacy-checkbox {
    margin: 0;
}

/* restore normal flow for the privacy‑agreement label */
.privacy-agreement .checkbox-label-wrapper label {
    position: static; /* instead of absolute */
    top: auto;
    left: auto;
    transform: none;
    margin: 0; /* remove any inherited offset */
}

.thank-you {
    margin-top: 3rem; /* space above the thank‑you box */
    color: white; /* text color */
    border-radius: 0.5rem;
    text-align: start; /* center the heading and paragraph */
}


.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0.375rem rgba(0, 123, 255, 0.5);
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -1.5rem;
    left: 0.5rem;
    font-size: 0.9rem;
    color: white;
    background: transparent;
}

.comments-area {
    resize: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .comments-area:focus {
        border-color: #7030A0;
        box-shadow: 0 0 0.375rem rgba(0, 123, 255, 0.5);
    }