/* HTML element to manage main scrolling and prevent jiggling */
html {
    overflow-y: scroll; /* Always reserve space for vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

/* General body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #F8F9FA; /* Very light background for cleanliness */
    margin: 0;
    /*padding: 20px 0;*/ /* Vertical padding */
    padding: 5px 0 20px 0; /* Adjusted padding-top to 12px (moved up by 8px) */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top, allowing content to flow */
    min-height: 100vh;
    box-sizing: border-box;
    color: #333; /* Default text color */
    overflow-y: scroll; /* Ensure scrollbar is present but we'll hide its appearance */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
    body::-webkit-scrollbar {
        display: none;
    }

/* Main container for the entire contact section, to center it */
.main-content-wrapper {
    /*width: 100%;*/
    max-width: 1200px; /* Max width for the whole content */
    padding: 75px 15px; /* Horizontal padding for responsiveness */
}

/* Custom styling for the main "Contact Us" title */
.contact-section-title {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    padding: 1rem;
    /*font-size: 2.8rem;*/ /* Large and prominent */
    /*font-weight: 700;*/ /* Bold */
    /*color: #212529;*/ /* Dark, strong color */
    /*text-align: center;
            margin-bottom: 40px;*/ /* Space below title */
    /*padding-top: 20px;*/
}

/* Styling for the overall contact container */
.contact-container {
    background-color: #ffffff;
    border-radius: 8px; /* More rounded corners for a softer look */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* More significant, soft shadow */
    padding: 30px;
    margin-bottom: 40px; /* Space below the container */
}

/* Wrapper for the two columns (left/right) inside contact-container */
.contact-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    gap: 30px; /* Space between columns */
    justify-content: center; /* Center columns when they wrap */
}

/* Styling for each column */
.contact-column {
    flex: 1; /* Allow columns to grow and shrink */
    min-width: 350px; /* Minimum width before wrapping */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .contact-column.left-column {
        background-color: #fcfdff; /* Slightly different background for left column */
        border-radius: 8px;
        padding: 25px;
        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */
    }

    .contact-column h3 {
        font-size: 1.8rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 25px;
        text-align: center;
        width: 100%; /* Center the h3 within its column */
    }

    .contact-column.left-column h1 {
        text-align: center;
        width: 100%;
        margin-bottom: 25px;
    }

/* Logo styling */
.logo-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px;
}

.logo-img {
    max-width: 300px; /* Ensure logo is responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for logo */
}

/* Contact information paragraphs */
.contact-column p {
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: #555;
}

    .contact-column p i {
        margin-right: 10px;
        font-size: 1.3rem;
        width: 25px; /* Fixed width for icons for alignment */
        text-align: center;
    }

/*EMAIL DISABLE*/
/*.email-contact-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: #AAAAAA;*/ /* Gray out the text */
/*opacity: 0.7;*/ /* Reduce opacity to indicate disabled state */
/*pointer-events: none;*/ /* Disable pointer events on the wrapper */
/*}

            .email-contact-wrapper i {
                margin-right: 10px;
                font-size: 1.3rem;
                width: 25px;*/ /* Fixed width for icons for alignment */
/*text-align: center;
            }

        .email-link-disabled {
            color: inherit;*/ /*Inherit color from parent (.email-contact-wrapper) */
/*text-decoration: none;
            cursor: default;*/ /*Change cursor to default */
/*}

            .email-link-disabled:hover {
                color: inherit;*/ /*Keep text color same on hover*/
/*text-decoration: none;*/ /*No underline on hover*/
/*}*/




/* Removed disabled styling for email-contact-wrapper to enable the link */
.email-contact-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #337ab7; /* A standard blue for links */
    /* Removed opacity: 0.7; */
    /* Removed pointer-events: none; */
}

    .email-contact-wrapper i {
        margin-right: 10px;
        font-size: 1.3rem;
        width: 25px; /* Fixed width for icons for alignment */
        text-align: center;
        color: #6c757d; /* Keep icon color distinct, or match link color */
    }

/* Enabled and styled the email link */
.email-link-disabled {
    color: inherit; /* Inherit color from parent (.email-contact-wrapper) */
    text-decoration: none; /* Start with no underline */
    cursor: pointer; /* Change cursor to pointer for clickable link */
    transition: text-decoration 0.3s ease; /* Smooth transition for hover underline */
}

    .email-link-disabled:hover {
        color: #555555; /* Slightly darker on hover */
        text-decoration: underline; /* Add underline on hover */
    }


/* Map container styling */
.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: 30px; /* Space above the map */
}

    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 8px;
    }

/* Form styling (overrides Bootstrap defaults for appearance) */
.form-floating > .form-control {
    height: calc(3.5rem + 2px); /* Adjust height for floating labels */
    padding: 1rem 0.75rem;
    border-radius: 8px; /* Rounded input fields */
    border: 1px solid #dee2e6;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    padding: 1.5rem 0.75rem 0.5rem 0.75rem; /* Adjusted padding to push "Choose..." down */
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-floating > label {
    padding: 1rem 0.75rem;
    color: #6c757d;
    top: 0.2rem; /* Adjusted to move labels up slightly */
}

textarea.form-control {
    min-height: 120px;
    padding: 1rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

#charCount {
    font-size: 0.85rem;
    color: #6c757d;
    text-align: right;
    margin-top: 5px;
}

#char-count {
    font-size: 0.85rem;
    color: #6c757d;
    text-align: right;
    margin-top: 5px;
}

/* Button Custom Styling (Overriding Bootstrap defaults) */
.btn {
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 6px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
    outline: none;
    border: none; /* Ensure no default Bootstrap border */
}

    .btn:active {
        transform: translateY(1px);
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    }

/* Submit Button (btn-primary) */
.btn-primary {
    background-color: #9BBFE0; /* Pale Cerulean */
    color: #333333; /* Dark gray for text */
}

    .btn-primary:hover {
        background-color: #7DA4C8; /* Slightly darker blue on hover */
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
        color: #333333; /* Keep text color same */
    }

/* Clear Button (btn-secondary) */
.btn-secondary {
    background-color: #D3D3D3; /* Cool Stone Gray */
    color: #555555; /* Medium gray for text */
}

    .btn-secondary:hover {
        background-color: #B0B0B0; /* Slightly darker gray on hover */
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
        color: #555555; /* Keep text color same */
    }

/* Styles for the group containing buttons and reCAPTCHA */
.buttons-recaptcha-group {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 15px; /* Space between items */
    align-items: center; /* Vertically align items */
    justify-content: flex-end; /* Align to the right */
    margin-top: 50px; /* Increased margin-top to move the group down further */
}

/* CRITICAL FIX FOR "PREFERRED CONTACT" VISIBILITY (Label floating behavior) */
.form-floating > .form-select:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label {
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    opacity: .65;
}

/* Scroll to Top Button Styling */
#scrollTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    bottom: 30px; /* 30px from the bottom */
    right: 30px; /* 30px from the right */
    z-index: 99; /* Ensure it's above other content */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #9BBFE0; /* Match submit button color */
    color: white; /* White text */
    cursor: pointer; /* Pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 50%; /* Circular shape */
    font-size: 1.5rem; /* Icon size */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow */
    transition: background-color 0.3s, opacity 0.3s; /* Smooth transition */
    opacity: 0.8; /* Slightly transparent */
    width: 60px; /* Fixed width for circular shape */
    height: 60px; /* Fixed height for circular shape */
    display: flex;
    justify-content: center;
    align-items: center;
}

    #scrollTopBtn:hover {
        background-color: #7DA4C8; /* Darker on hover */
        opacity: 1;
    }

/* Media query to hide scroll-top button on larger screens */
@media (min-width: 768px) {
    #scrollTopBtn {
        display: none !important; /* Hide on larger screens */
    }
}

/* Responsive adjustments for overall layout */
@media (min-width: 768px) {
    .contact-column {
        flex: 1; /* Distribute space equally */
    }

        .contact-column.left-column {
            max-width: 40%; /* Adjust width for left column on larger screens */
        }

        .contact-column.right-column {
            flex-grow: 1; /* Allow right column to take remaining space */
        }

    .contact-wrapper {
        flex-wrap: nowrap; /* Prevent wrapping on larger screens */
        justify-content: space-between;
    }
}



@media (max-width: 767.98px) {
    .contact-section-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .contact-wrapper {
        flex-direction: column; /* Stack columns vertically on small screens */
    }

    .contact-column {
        width: 100%; /* Full width for columns on small screens */
        min-width: unset; /* Remove min-width constraint */
    }

        .contact-column.left-column {
            max-width: 100%;
        }

    .contact-container {
        padding: 20px;
    }
    /* Adjust button group alignment for small screens */
    .buttons-recaptcha-group {
        justify-content: center; /* Center buttons and reCAPTCHA on small screens */
    }

    #scrollTopBtn {
        bottom: 20px;
        right: 20px;
        padding: 10px;
        font-size: 1.2rem;
        width: 50px;
        height: 50px;
        display: flex; /* Ensure it's flex on small screens to center icon */
    }
}



/*NAVIGATION*/

nav {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    background: #0A1128; /* A very dark, deep blue */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); /* Enhanced shadow for maximum depth and impact */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: nowrap;
    z-index: 1000;
}

/*Right Slide menu Hamburger*/
.nav-links {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}

    .nav-links a,
    .dropdown-btn {
        color: white;
        text-decoration: none;
        padding: 8px 12px;
        display: block;
        cursor: pointer;
        transition: background 0.3s;
        white-space: nowrap;
        font-size: 15px;
    }

        .nav-links a:hover,
        .dropdown-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
        }

@media screen and (max-width: 900px) {
    .nav-links a,
    .dropdown-btn {
        font-size: 14px;
        padding: 8px 10px;
    }

    nav {
        flex-wrap: nowrap;
    }
}

/*Drop-Down Menu*/
.dropdown {
    position: relative;
    display: inline-block;
}


/* Dropdown Menu Background */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    width: auto; /* Change to auto width */
    border-radius: 0 0 0 0;
    z-index: 1000;
    /* Updated Glassy Background with Transparent Linear Gradient */
    /* Glassy Background with Transparent Linear Gradient (Left to Right) */
    background: linear-gradient(to right, rgba(5, 13, 26, 2.95), /* #050D1A with 95% opacity (starts on the left) */
    rgba(16, 31, 62, 0.5) /* #101F3E with 10% opacity (ends on the right) */
    );
    backdrop-filter: blur(10px) saturate(150%); /* Increased blur and saturation for a more pronounced glassy effect */
    -webkit-backdrop-filter: blur(10px) saturate(150%); /* For Safari support */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border for a defined glass edge */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); /* Enhanced shadow for maximum depth and impact */
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 1.95),*/ /* Start: Black with 80% opacity */
    /*rgba(255, 255, 255, 0.1)*/ /* End: Light White with 10% opacity */
    /*);*/
    /*background: linear-gradient(to right, #050D1A, #101F3E); */ /* Extremely dark navy/blue to a slightly lighter, deep blue */
    /*background: linear-gradient(to right, rgba(5, 13, 26, 0.7),*/ /* Start: Your deepest blue with 70% opacity */
    /*rgba(16, 31, 62, 0.5)*/ /* End: Lighter deep blue with 50% opacity */
    /*);*/
    /*backdrop-filter: blur(10px) saturate(150%);*/ /* Increased blur and saturation for a more pronounced glassy effect */
    /*-webkit-backdrop-filter: blur(10px) saturate(150%);*/ /* For Safari support */
    /*border: 1px solid rgba(255, 255, 255, 0.1);*/ /* Subtle white border for a defined glass edge */
    /*box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);*/ /* Enhanced shadow for maximum depth and impact */
    /*background: linear-gradient(to right, #050D1A, #101F3E);*/ /* Extremely dark navy/blue to a slightly lighter, deep blue */
    /* #050D1A: A near-black, deepest possible blue. */
    /* #101F3E: A rich, very dark blue, still far from classic indigo. */
    /*box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); */ /* Enhanced shadow for maximum depth and impact */
    /*1background-color: rgba(25, 25, 35, 0.98);*/ /* Matches the primary nav bar color, less transparent */
    /*1backdrop-filter: blur(8px);*/ /* Increased blur */
    /*1box-shadow: 0 2px 10px rgba(0, 255, 255, 0.25);*/ /* Teal glow for dropdown */
}

    .dropdown-menu a {
        display: block;
        padding: 10px;
        color: white;
        text-decoration: none;
        white-space: nowrap;
    }

.dropdown.open .dropdown-menu {
    display: block;
}

/* Hamburger styles */
.hamburger {
    display: none; /* Hidden by default on larger screens */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    margin-left: auto; /* Move hamburger to the right */
}

    .hamburger .bar {
        height: 4px;
        width: 30px;
        /*background-color: white;*/
        margin: 1px 0;
        border-radius: 2px;
        background-color: #F8F9FA; /*Initial color of the bars*/
        transition: 0.4s; /* Smooth transition for the animation */
        /*background-color: #257aac;*/ /* Initial color of the bars */
    }

    .hamburger.active .top {
        transform: rotate(45deg) translate(5px, 5px);
        background-color: #e63946; /* Red color when active */
    }

    .hamburger.active .middle {
        opacity: 0;
    }

    .hamburger.active .bottom {
        transform: rotate(-45deg) translate(6px, -6px);
        background-color: #e63946; /* Red color when active */
    }

.close-btn {
    display: none; /* Initially hidden on all screens */
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    z-index: 1200; /* higher than everything */
}

    .close-btn.show {
        display: block; /* Show only when the mobile menu is active */
    }

    .close-btn:hover {
        color: #e63946; /* Red color when hovered */
    }

@media screen and (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    /*HERE IS THE DROPDOWN_MENU WHEN MINIMZE INTO SMALL DEVICES*/
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 48px;
        right: -100%; /* Hidden off-screen by default */
        /*background: linear-gradient(to right, #050D1A, #101F3E);*/ /* Extremely dark navy/blue to a slightly lighter, deep blue */
        /*background: rgba(0, 0, 0, 0.95);*/ /*black transparency*/
        /* ----- UPDATED BACKGROUND FOR TRANSPARENCY ----- */
        /* Option 1: Solid Dark Blue with Transparency */
        /* Glassy Background Effect */
        /*background-color: rgba(5, 13, 26, 0.7);*/ /* A slightly transparent version of your deepest blue */
        /* Glassy Background Effect with Linear Gradient */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1.95), /* Start: Black with 80% opacity */
        rgba(255, 255, 255, 0.1) /* End: Light White with 10% opacity */
        );
        /*backdrop-filter: blur(10px) saturate(180%);*/ /* Blur the content behind, and make it a bit more vibrant */
        /*-webkit-backdrop-filter: blur(10px) saturate(180%);*/ /* For Safari support */
        border: 0px solid rgba(255, 255, 255, 0.1); /* Subtle white border for a more defined glass edge */
        border-radius: 0px; /* Slightly rounded corners can enhance the glassy look */
        /*backdrop-filter: blur(10px) saturate(180%);*/ /* Blur the content behind, and make it a bit more vibrant */
        /*-webkit-backdrop-filter: blur(10px) saturate(180%);*/ /* For Safari support */
        /*border: 1px solid rgba(255, 255, 255, 0.1);*/ /* Subtle white border for a more defined glass edge */
        /*border-radius: 0px;*/ /* Slightly rounded corners can enhance the glassy look */
        /*background: rgba(0, 0, 0, 0.55);*/
        /*background-color: rgba(5, 13, 26, 0.9);*/
        /* A slightly transparent version of your deepest blue */
        /*backdrop-filter: blur(8px);*/ /* Optional: Adds a subtle blur effect to content behind it */
        /* Option 2: Gradient Dark Blue with Transparency (More advanced, but keeps the gradient feel) */
        /* If you want to keep the linear gradient effect with transparency: */
        /* background: linear-gradient(to right, rgba(5, 13, 26, 0.9), rgba(16, 31, 62, 0.9)); */
        /* backdrop-filter: blur(8px); /* Optional: Adds a subtle blur effect */
        /* background: rgba(0, 0, 0, 0.95); /* <-- REMOVE THIS LINE, as it's black transparency */
        /* background: linear-gradient(to right, #050D1A, #101F3E); /* <-- REMOVE THIS LINE, as it's fully opaque */
        width: 230px; /* Width of the slide-out menu */
        height: 75%;
        padding: 20px 15px 15px 15px;
        transition: right 0.3s ease-in-out;
        gap: 8px;
        overflow-y: auto; /* Enable scrolling for long menus */
        z-index: 1002; /* Ensure it's above the video */
    }


        .nav-links.active {
            right: 0;
        }

    .close-btn {
        display: block; /* Show the close button when the mobile menu is active */
    }

    .dropdown-menu {
        position: relative;
        background: #111;
        width: 100%;
        min-width: 100%;
        left: 0;
        top: auto;
    }

    .nav-links a, .dropdown-btn {
        width: 100%;
    }

    /* New rule for single line phone number on small screens */
    .single-line-phone {
        white-space: nowrap; /* Forces text to stay on a single line */
    }
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: none;
}

    #overlay.show {
        display: block;
    }

#btn-grey:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border: none;
    opacity: 0.7;
}

.form-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-box {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-box button {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


#fileListContainer {
    max-height: 85px;
    overflow-y: auto;
}


body.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}

input[type="file"]::file-selector-button {
    visibility: hidden;
}

#fileCountDisplay {
    font-weight: 600;
    margin-top: 8px;
    color: #333;
}


table.table-sm td {
    padding: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

#fileTable {
    border-collapse: collapse;
    width: 100%;
}

    #fileTable tr.bg-light {
        background-color: #f8f9fa;
    }

/* 🔹 Alternating row colors */
.file-item:nth-child(even) {
    background-color: #f8f9fa; /* light grey */
}

.file-item:nth-child(odd) {
    background-color: #ffffff; /* white */
}

/* 🔹 Thin separators */
.file-item {
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem;
    border-radius: 4px;
}

/* 🔹 Alternating row colors */
#fileListContainer .file-item:nth-child(even) {
    background-color: #f8f9fa;
}

#fileListContainer .file-item:nth-child(odd) {
    background-color: #ffffff;
}

/* 🔹 Thin separators and padding */
#fileListContainer .file-item {
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem;
    border-radius: 4px;
}

#fileListContainer {
    max-height: 200px;
    overflow-y: auto;
}


input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: #333;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s ease-in-out;
}

    input:focus,
    textarea:focus {
        border-color: #0078D4; /* Microsoft blue */
        outline: none;
    }


.stylish-select {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 50 L70 90 L105 50' stroke='%23333' stroke-width='15' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    transition: border-color 0.2s ease-in-out;
}

.stylish-select:focus {
    border-color: #0078D4;
    outline: none;
}


#contactForm {
    display: block;
    width: 100%;
    max-width: 600px; /* or whatever fits your layout */
    margin: 0 auto;
    box-sizing: border-box;
}

.buttons-recaptcha-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 24px;
}

#cf-turnstile {
    flex: 1 1 200px;
    min-width: 200px;
}

.buttons-recaptcha-group button {
    flex: 0 0 auto;
    padding: 8px 16px;
    min-width: 100px;
}

@media (max-width: 600px) {
    .buttons-recaptcha-group {
        flex-direction: column;
        align-items: stretch;
    }

        .buttons-recaptcha-group button,
        #cf-turnstile {
            width: 100%;
        }
}


#fileTableContainer {
    max-height: 200px; /* Adjust as needed */
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#fileTable tbody tr td {
    padding: 6px 10px;
}

#fileTableContainer.scrollable {
    max-height: 200px;
    overflow-y: auto;
}

input.filled {
    background-color: #e0f0ff; /* Light blue */
    transition: background-color 0.3s ease;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    max-width: 400px;
    text-align: center;
}

.close-btn {
    float: right;
    font-size: 20px;
    cursor: pointer;
}

@media (max-width: 576px) {
    .main-content-wrapper

{
    padding: 30px 15px;
}

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

.contact-column {
    width: 100%;
    min-width: unset;
    padding: 10px 0;
}

    .contact-column.left-column {
        padding: 15px;
    }

.form-control,
.form-select,
textarea {
    margin-bottom: 1rem;
}

.logo-wrapper {
    justify-content: center;
}

.logo-img {
    max-width: 100%;
}

}


#fileTableContainer thead th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 2;
}

.delete-btn:hover {
    background-color: #dc3545;
    color: #fff;
}

.red-cross-btn {
    /* Removes the button's background and border */
    background-color: transparent;
    border: none;
    padding: 0; /* Removes padding so it's just the icon */
    cursor: pointer; /* Keeps it clear it's a clickable button */
}

    .red-cross-btn i {
        /* Styles the Font Awesome icon inside the button */
        color: #dc3545; /* Bootstrap's "danger" red color */
        font-size: 1.2rem; /* Adjust size as needed */
    }

.action-cell {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-bottom: none !important; /* This is the new line */
}


/*Red Cross button in the end*/
/*<div class="d-flex justify-content-end" >
<button type="button" class="red-cross-btn" data-index="${index}" title="Remove file" >
<i class="fa fa-times" > </i >
</button >
</div >
</td >*/