/* //// © 2025 AleiniCom - All rights reserved. //// */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100svh;                    /* Ensures body takes full viewport height */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000;
    -webkit-text-stroke: .5px #fff;
    background: #181c20;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Video Background */
#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100vw;
    min-height: 100vh;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

/* Background Image */
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100vw;
    min-height: 100vh;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* Header */
.main-header {
    width: calc(100vw + 12px);             /* Always wider than viewport * Match the negative left/right offsets */
    background: rgba(0,0,0,0.30); 
    color: #000;
    -webkit-text-stroke: .5px #fff; 
    border: 1.5px solid #ccc;
    box-sizing: border-box;
    position: fixed;
    top: -2px;                             /* Pushes the top border just above the viewport */
    left: -6px;                            /* Pushes the left border just off-screen */
    right: -6px;                           /* Pushes the right border just off-screen */
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: center;               /* Center the title-block */
    padding: 1rem 1.5rem 0rem 1.25rem;     /* top right bottom left */
    width: 100%;
    position: relative;
}
.logo-link {
    left: 25px;                            /* Adjust this value to move logo left or right */
    position: absolute;                    /* Position logo on the left */
    display: flex;
    align-items: center;
    justify-content: flex-start;

}
.header-logo {
    height: 80px;
    width: auto;
    vertical-align: middle;
    padding-bottom: 0.1rem;
    margin-bottom: 15px;
    margin-left: 15px;
}
.title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 700px;
    margin: 0 auto;                         /* Center in available space */
    text-align: center;
    width: 100%;
    max-width: 600px;                       /* Optional: Set a max width for the title block */
}
.site-title {
    position: relative;
    left: -50px;                            /* Adjust this value as needed for perfect visual centering */  
    text-align: center;                            
    color: #ffd700;
    -webkit-text-stroke: 1px #000;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.site-subtitle {
    position: relative;
    left: -52px;                            /* Adjust this value as needed for perfect visual centering */
    text-align: center;
    color: #fff;                          /* or #fff for dark backgrounds */
    -webkit-text-stroke: 1.4px #000;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    max-width: 650px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 0rem 3rem;
}

.header-nav {
    position: absolute;
    right: 35px;                            /* Move the header nav further to the left. Adjust value as needed */
    display: flex;
    align-items: center;
}

.header-nav ul {
    list-style: none;   
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}
.header-nav a {
    color: #000;
    -webkit-text-stroke: 0.65px #ccc;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 900;
    transition: color 0.2s;
}
.header-nav a:hover {
    color: #ffd700;
    -webkit-text-stroke: 0.85px #000;
}

/* This Keeps The Mobile Menu Button Hidden On The Desktop */
.menu-btn {
    display: none;
}

/* LANGUAGE MENU DROPDOWN */
.lang-menu ul{
    position: absolute;
    margin-top: 42px;                           /* Adjust value to position up or down */
    right: 95px;                               /* Adjust value to position left or right */
    display: none;
    flex-direction: column;
    align-items: center;                        /* Center the list items within the menu */
    gap: 0.1rem;
    background: rgba(0,0,0,0.77);
    width: 145px;                               /* Adjust width as needed */
    height: 275px;                              /* Adjust height as needed */
    padding-top: 5px;                           /* Adjust padding as needed */
    border: 1.5px solid #ccc;
    border-radius: 7px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.55);
    font-weight: 500;
    -webkit-text-stroke: none;
    overflow: hidden;
} 
.lang-menu.open ul {
    display: flex;                              /* Show when .open is added */
    flex-direction: column;
}

/* Each language option in the dropdown */
.lang-menu ul li {
    list-style: none;
    padding: 0.2rem 0;
    width: 100%;
    margin-right: 16px;
}
.lang-menu ul li a {
    display: block;                             /* Make the link fill the li */
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    -webkit-text-stroke: 0.25px #000;
    transition: color 0.2s, background 0.2s;
    padding: 0.2rem 1.2rem 0.2rem 3.6rem;       /* Top | Right | Bottom | Left padding for centering */  /* Space for flag */
    width: 100%;
    box-sizing: border-box;
    text-align: left;                           /* Align text left within the menu */
}
.lang-menu ul li a:hover {
    color: #ffd700;
    -webkit-text-stroke: 0.25px #000;
    background-color: rgba(20, 20, 19, 0.7);  /* Darker background on hover */
    transition: background-color 0.1s;          /* Smooth transition for background color */ 
    width: 110%;                                /* Ensure the hover effect covers the entire width */
}   

/* Language Menu Toggle */
.lang-menu.open ul {
    display: flex;                              /* Show when .open is added */
    flex-direction: column;
}

/*///  LANGUAGE SWITCHER STYLES  ///*/
/* The language selector button at the top right */
.lang-option1 {
    position: fixed;
    top: 20px;
    right: 209px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 29px auto;
    align-items: center;
    width: 31px;
    z-index: 10000;
    background: transparent;
}
.lang-option2 {
    position: fixed;
    top: 12.5px;
    right: 112px;                           /* Adjust this value to move the language selector left or right */
    cursor: pointer;
    display: flex;                          /* Aligns flag and label horizontally */
    align-items: center;                    /* Should be 'center' for vertical alignment */
    line-height: 2;
    font-size: 1.1rem;
    font-weight: 600;
    width: 100px;                           /* Commented out: would restrict width */
    min-width: 90px;                        /* Minimum width */
    max-width: 800px;                       /* Maximum width */
    z-index: 10000;                         /* On top of most elements */
}

.lang-flag-icon {
    width: 29px;
    height: 20px;
    background-size: cover;
    background-position: center;
    box-shadow: -1px -1px 15px 4px rgba(255, 255, 255, 0.541);   /* Optional: subtle shadow for consistency */
}

.lang-label {
    margin-left: 12px;
    white-space: nowrap;
    text-align: left;
    min-width: 0;
}

/* Language Flags */
.lang-flag {
    background-repeat: no-repeat;
    background-position: 1.20rem center;             /* Adjust value to position left or right */
    padding-left: 3.5rem;                            /* Makes room for the flags */
}
.lang-us {
    background-image: url('assets/us.png');
    background-size: 26px 24px;
}
.lang-es {
    background-image: url('assets/es-mx.png');
    background-size: 24px 17px;
}
.lang-fr {
    background-image: url('assets/fr.png');
    background-size: 26px 24px;
}
.lang-de {
    background-image: url('assets/de.png');
    background-size: 26px 24px;
}
.lang-it {
    background-image: url('assets/it.png');
    background-size: 26px 24px;
}
.lang-br {
    background-image: url('assets/br.png');
    background-size: 26px 24px;
}
.lang-pl {
    background-image: url('assets/pl.png');
    background-size: 26px 24px;
}
.lang-ukr {
    background-image: url('assets/ukr.png');
    background-size: 26px 24px;
}

/* Main Content */
.main-content {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding-top: 100px;
    padding-bottom: 100px;
}
.comName {
    text-align: center;
    background: rgba(0,0,0,0.20);
    padding: 2rem 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.comName h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}
.comName p {
    font-size: 1.3rem;      
}

/* Close Button for ALL Popups */
.close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #ffd700;
    background: #444;
    border: 2px solid #ccc;
    border-radius: 50%;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.1s;
}
.close-btn img,
.close-btn svg {
    width: 23px;
    height: 23px;
}

/* Mission Popup */
.missionPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    margin-top: 20px;
    background: rgba(0,0,0,0.50);
    color: #fff;
    border-radius: 16px;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 2.5rem 2rem 2rem 2rem;
    max-width: 95vw;
    width: 620px;
    height: auto;                                  /* Allow height to adjust based on content */
    transition: transform 0.3s, opacity 0.3s;
}
.missionPopup.active {
    /* To move popup slightly higher increase the negative value of the Y translation */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.mission-text h1 {
    margin-left: -2px;                        /* Reduce space to the left of the title */
}
.mission-text {
    margin-top: 1.5rem;
}
.mission-text h1 {
    font-size: 1.95rem;
    margin-bottom: 1rem;
    color: #ffd700;
    -webkit-text-stroke: 1px #000;
    font-weight: 700;
}
.mission-text p {
    font-size: 1.22rem;
    margin-bottom: 1rem;
    line-height: 1.6;                         /* Adjust this value as needed (1.5–1.8 is typical) */
}

/* Products Popup */
.productsPopup {
    position: fixed;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    margin-top: 20px;
    background: rgba(0,0,0,0.50);
    color: #fff;
    border-radius: 16px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 2.5rem 2rem 2rem 2rem;
    max-width: 95vw;
    width: 420px;
    transition: transform 0.3s, opacity 0.3s;
}
.productsPopup.active {
    /* To move popup slightly higher increase the negative value of the Y translation */
    transform: translate(-50%, -70%) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.products-text {
  margin-top: 1.5rem;  
}
.products-text p {
    font-size: 1.22rem;
    line-height: 1.6; 
}
.products-text h1 {
    font-size: 1.95rem;
    margin-bottom: 1rem;
     margin-left: -2px;                        /* Reduce space to the left of the title */
    color: #ffd700;
    -webkit-text-stroke: 1px #000;
    font-weight: 700;
}

/* /////// Uniform Contact Form Popup Styles for All Languages /////// */
.contactPopup {
    width: 620px;
    max-width: 95vw;
    max-height: 73.15vh;
    overflow: auto;
    margin: 0 auto;
    box-sizing: border-box;
    position: fixed;
    top: 53.25%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    margin-top: 20px;
    background: rgba(0,0,0,0.50);
    color: #fff;
    border-radius: 16px ;
    border: 1px solid #ccc;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    padding: 2.5rem 2rem 2rem 2rem;
    transition: transform 0.3s, opacity 0.3s;
}

.contactPopup.active {
    /* To move popup slightly higher increase the negative value of the Y translation */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Reduce spacing between contactTitle and close button */
.contactPopup .close-btn {
    margin-bottom: -0.3em;                    /* Reduce space below the button */
}

.contactPopup .form-text h1[data-i18n="contactTitle"] {
    margin-top: -0.45em;                       /* Reduce space above the title */
    margin-bottom: 0.3em;                     /* Reduce space below the title */
    margin-left: -2px;                        /* Reduce space to the left of the title */
}

/* Optionally, reduce padding in the popup header/container */  
.contactPopup .form-text {
    padding-top: 0.5em;                       /* Reduce top padding */
}

/* Contact Form Styling */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;                             /* Adjust value for more or less spacing */
}

.form-text {
    margin-top: 1.5rem;
}

.form-text h1 {
    font-size: 1.95rem;
    margin-bottom: 1rem;
    color: #ffd700;
    -webkit-text-stroke: 1px #000;
    font-weight: 700;
}

.form-text p {
    font-size: 1.15rem;
    color: #fff;                            /* Light gray for better contrast */
    -webkit-text-stroke: 0.25px #ccc;       /* Optional: adds a subtle outline for better readability */
    font-weight: 500;
    margin-bottom: 1.25em;
    letter-spacing: 0.02em;
}

.contact-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.contact-form .form-group {
    margin-bottom: 1em;
    width: 100%;
}

.contact-form .form-group.button-group {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
}
.form-group {
    display: flex;
    align-items: flex-start;            /* Align items to the top */
    gap: 0.75rem;
    margin-bottom: 0.5em;               /* Adjust value for more or less spacing */
    justify-content: flex-start;        /* Add this for left alignment */
}

.form-group input {
    width: 100%;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1rem;
    background: #444;
    color: #fff;
}
input::placeholder,
textarea::placeholder {
    color: #ccc;                    /* Light gray, adjust as needed */
    opacity: 1;                       /* Fully visible */
    font-size: 1em;                   /* Match input font size */
}

/* When hovering over the entire contactPopup, highlight all input borders */
.contactPopup:hover .contact-form .form-group input:not(.error-input),
.contactPopup:hover .contact-form .form-group textarea:not(.error-input) {
    border-color: #ffd700;
}

.form-group textarea {
    width: 100%;
    padding: 0.5rem;
    height: 8rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1rem;
    background: #444;
    color: #fff;
    resize: vertical;                  /* Allows vertical resizing */
}

/* Adds Space Below The Form-group's Textarea And The News Fine-Print */
.form-group textarea {
    margin-bottom: 0.75em;             /* Adjust value as needed */
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 0.2rem;
}

.form-group .fine-print a:hover {
    color: #ffd700;
    -webkit-text-stroke: 0.25px #000;
    font-weight: 550;
}

/* Adds Space Below The News Fine-Print And The Privacy Fine-Print */
.form-group.news-group {
    margin-bottom: 1.5em;              /* Adjust value as needed for space between News & Privacy Fine-Print */
}
.form-group.news-group .fine-print {
    margin-left: 0.1rem;               /* Adjust spacing between checkbox and fine print */
    font-size: 15px;                   /* Adjusts the size of the fine print for both news & privacy */
    letter-spacing: 0.25px;            /* Adjust value as needed */
    color: #ccc;
    text-decoration: none;
}

.form-group.privacy-group .fine-print {
    margin-left: 0.2rem;               /* Adjust spacing between checkbox and fine print */
    font-size: 15px;                   /* Adjusts the size of the fine print for both news & privacy */
    letter-spacing: 0.25px;            /* Adjust value as needed */
    color: #ccc;
    text-decoration: none;
}
/* Links to Privacy Policy HTML */
.form-group.privacy-group .fine-print a {
    color: #1e90ff;                 /* Bright blue */
    text-decoration: none;
    font-size: 17.75px;               
    font-weight: 600;
    -webkit-text-stroke: 0.5px #000;
    vertical-align: baseline;         /* Ensures alignment with text baseline */
    line-height: inherit;             /* Inherit line height from parent */
    position: relative;
    top: 1.4px;                       /* Adjust this value up/down as needed - Positive values moves it lower. */
}

.form-group:last-of-type {
    margin-bottom: 0.5em;              /* Extra space before the submit button */
}

.checkbox-circle::before {
    content: "";
    position: absolute;
    top: 7; left: 0;
    width: 100%;
    height: 100%;
    border: 2.5px solid #1e90ff;     /* Change to desired circle color */
    border-radius: 16px / 10px;
    transform: rotate(-30deg);
    pointer-events: none;
    box-sizing: border-box;
    z-index: 2;                        /* Make sure the border is above the checkbox */
}
.checkbox-circle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    margin-top: 7px;                   /* Adjust this value to move the checkbox up or down */
    position: relative; 
    top: -2px;
    right: -1px;
    background: transparent;
    border: none;
    z-index: 1;                        /* Checkbox stays below the border */
}

/* Highlight the circle border for the privacy checkbox in red when there's an error */
.checkbox-circle.error-checkbox::before {
    border-color: #d32f2f !important; /* red */
}

/* Green border for checked newsletter checkbox */
.checkbox-circle.newsletter-checked::before {
    border-color: #03b320 !important; /* Same green as submit button */
}
/* Green border for checked privacy checkbox (when valid) */
.privacy-group .checkbox-circle.privacy-checked:not(.error-checkbox)::before {
    border-color: #03b320 !important; /* Same green as submit button */
}

.form-group.news-group .checkbox-circle {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 16px / 10px;
    width: 36px;
    height: 26px;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    overflow: visible;
}

.form-group.privacy-group .checkbox-circle {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 16px / 10px;
    width: 36px;
    height: 26px;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    overflow: visible;
}
.form-group.privacy-group .checkbox-circle::before {    /* This targets Privacy Group Checkbox Circle */
    content: "";
    position: absolute;
    top: 7; left: 36;
    width: 110%;
    height: 100%;
    border: 2.5px solid #1e90ff;     /* Change to desired circle color */
    border-radius: 16px / 10px;
    transform: rotate(-30deg);
    pointer-events: none;
    box-sizing: border-box;
    z-index: 2;                        /* Adjust this value to move the privacy checkbox left or right */
}

/* CAPTCHA */
.g-recaptcha {
    margin-left: 8px;
    margin-top: 0.5em;
    transform: scale(0.65);            /* Shrinks the widget from its original size */
    transform-origin: 0 0;             /* Ensures the widget stays anchored to the top-left, so it doesn’t shift position as it shrinks */ 
}

/* Contact Form Button */
.contact-form button[type="submit"] {
    min-width: 250px;
    max-width: 300px;                  /* Optional: Set a max width for the button */
    /*width: 80%;                      /* Adjust width as needed */
    width: 40%;
    margin: 0 auto;
    margin-left: 48%;
    margin-top: -3em;                     /* Add some space above the button */
    display: block;
    background: #ffd700;
    color: #222;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 0.7rem;
    font-size: 1.75em;
    -webkit-text-stroke: 0.5px #000;
    font-weight: 600;
    letter-spacing: 1.5px;                 /* Adjust value as needed */  
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.contact-form button[type="submit"]:hover {
    background: #03b320;                 /* Green */      
    color: #fff;
    border-color: #1e90ff;
    font-weight: 750;                      /* Lighter weight on hover */
    -webkit-text-stroke: 1.25px #000;    /* Reduce or set to 0 to remove bold effect */
    text-shadow: 0px 0.2px 0.2px #000;   /* Add a subtle shadow for depth */
}
.contact-form button[type="submit"].error-btn {
    background: #d32f2f !important;
    color: #ffd700 !important;
    font-weight: 700 !important;
    -webkit-text-stroke: 1px #000 !important;
    text-shadow: 1px 0.5px 0.5px #000 !important;
    letter-spacing: 2px !important;         /* Adjust value as needed */
    cursor: pointer;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.2s, color 0.2s, font-size 0.2s, font-weight 0.2s, -webkit-text-stroke 0.2s, text-shadow 0.2s, letter-spacing 0.2s;
}
.contact-form button[type="submit"].error-btn:hover {
    /* Change label appearance when button is red and hovered */
    background: #d32f2f !important;
    color: #ffd700 !important;            /* Example: gold text */
    font-size: 1.85em;
    font-weight: 700;
    -webkit-text-stroke: 1px #000;
    text-shadow: 1px 0.5px 0.5px #000;
    letter-spacing: 2px;
}

/* Error message styling for contact form - show above input */
.contact-form .error {
    display: block;
    color: #ccc;
    -webkit-text-stroke: 0.20px #d32f2f !important;
    font-weight: 500;
    background: #000;
    border: 1.5px solid #d32f2f;              
    font-weight: 500;
    border-radius: 4px;
    font-size: 0.95em;
    padding: 2px 8px;
    margin-bottom: 2px;
    margin-top: 0;
    position: absolute;
    left: 0;
    bottom: 100%;                           /* Position above the input */
    z-index: 2;
    box-shadow: 0 2px 8px rgba(211,47,47,0.08);
    max-width: 90%;
    white-space: normal;
}

/* Error bubble arrow (pointy triangle) - point downwards above the input */
.contact-form .error::after {
    content: "";
    position: absolute;
    left: 24px;                             /* Adjust to align under the bubble */
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #d32f2f;       /* Match bubble background */
    z-index: 2;
    pointer-events: none;
}

/* Contact Button Error States */
.contact-form button[type="submit"].error-btn,
.contact-form button[type="submit"].error-btn:hover {
    background: #d32f2f !important;
    color: #ffd700 !important;
}

/* Position Error Messages Below Each Input */
.contact-form .form-group {
    position: relative;
    margin-bottom: 1em;                     /* Adjust value for more or less spacing */
}

/* Hide error message if empty */
.contact-form .error:empty {
    display: none;
}

/* Override Chrome autofill background and text color */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #444 inset !important; /* match your input background */
    box-shadow: 0 0 0 1000px #444 inset !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    background-color: #444 !important;
}

/* Highlight input/textarea with error */
.contact-form .form-group input.error-input,
.contact-form .form-group textarea.error-input {
    border: 2px solid #d32f2f;
    box-shadow: 0 0 0 2px rgba(211,47,47,0.15);
}

/* Position privacy error above the privacy label and news label */
.contact-form #privacyError {
    position: absolute;
    left: 24px;                              /* Move error bubble further right */
    bottom: 170%;
    z-index: 10;
    color: #ccc;
    -webkit-text-stroke: 0.20px #d32f2f !important;
    font-weight: 500;
    background: #000;
    border: 1.5px solid #d32f2f;
    border-radius: 4px;
    font-size: 0.95em;
    padding: 2px 8px;
    max-width: 80%;                          /* Reduce width if needed */
    box-shadow: 0 2px 8px rgba(211,47,47,0.08);
    white-space: normal;
    display: block;
}

/* Arrow for privacy error bubble */
.contact-form #privacyError::after {
    content: "";
    position: absolute;
    left: 24px;                              /* Adjust to align under the bubble */
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #d32f2f;        /* Match bubble background */
    z-index: 11;
    pointer-events: none;
}

/* Hide privacy error triangle when error is hidden or empty */
.contact-form #privacyError:empty,
.contact-form #privacyError[style*="display: none"] {
    display: none;
}

.contact-form #privacyError:empty::after,
.contact-form #privacyError[style*="display: none"]::after {
    display: none;
}

/* Show a red arrow below the input when there's an error */
.contact-form .form-group input.error-input::after,
.contact-form .form-group textarea.error-input::after {
    content: "";
    position: absolute;
    right: 16px;                              /* Adjust as needed for your layout */
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #d32f2f;         /* Red color for the arrow */
    z-index: 10;
    pointer-events: none;
}

/* /////// This Code Block Styles the Submit Button Text and Allows It To Be Positioned Correctly on the Submit Button /////// */
body.lang-us .form-group.button-group button[type="submit"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* or center, or flex-end */
    align-items: center;
    padding: 0;
}
body.lang-us .form-group.button-group .submit-text {
    margin-top: 0.3em;                  /* Adjust value as needed to move "Submit" up or down on the submit button */
    display: block;
}

body.lang-es .form-group.button-group button[type="submit"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* or center, or flex-end */
    align-items: center;
    padding: 0;
}
body.lang-es .form-group.button-group .submit-text {
    margin-top: 0.3em;                  /* Adjust value as needed to move "Submit" up or down on the submit button */
    display: block;
}

body.lang-fr .form-group.button-group button[type="submit"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* or center, or flex-end */
    align-items: center;
    padding: 0;
    margin-top: 1px;
}
body.lang-fr .form-group.button-group .submit-text {
    margin-top: 0.3em;                  /* Adjust value as needed to move "Submit" up or down on the submit button */
    display: block;
}

body.lang-de .form-group.button-group button[type="submit"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* or center, or flex-end */
    align-items: center;
    padding: 0;
    margin-top: 1.5px;
}
body.lang-de .form-group.button-group .submit-text {
    margin-top: 0.3em;                  /* Adjust value as needed to move "Submit" up or down on the submit button */
    display: block;
}

body.lang-it .form-group.button-group button[type="submit"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* or center, or flex-end */
    align-items: center;
    padding: 0;
    margin-top: 1px;
}
body.lang-it .form-group.button-group .submit-text {
    margin-top: 0.3em;                  /* Adjust value as needed to move "Submit" up or down on the submit button */
    display: block;
}

body.lang-br .form-group.button-group button[type="submit"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* or center, or flex-end */
    align-items: center;
    padding: 0;
    margin-top: 1px;
}
body.lang-br .form-group.button-group .submit-text {
    margin-top: 0.3em;                  /* Adjust value as needed to move "Submit" up or down on the submit button */
    display: block;
}

body.lang-pl .form-group.button-group button[type="submit"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* or center, or flex-end */
    align-items: center;
    padding: 0;
    margin-top: 1px;
}
body.lang-pl .form-group.button-group .submit-text {
    margin-top: 0.3em;                  /* Adjust value as needed to move "Submit" up or down on the submit button */
    display: block;
}

body.lang-ukr .form-group.button-group button[type="submit"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* or center, or flex-end */
    align-items: center;
    padding: 0;
    margin-top: 1px;
}
body.lang-ukr .form-group.button-group .submit-text {
    margin-top: 0.3em;                  /* Adjust value as needed to move "Submit" up or down on the submit button */
    display: block;
}

/* /////// Language-Specific Adjustments for Newsletter Element Positioning /////// */
/* /////// Adjust these values as needed for each language to ensure proper alignment /////// */
/* US - English */
body.lang-us .form-group.news-group .fine-print {
    margin-top: -25px;                  /* Move the checkbox and circle up a bit */
}
body.lang-us .form-group.news-group .checkbox-circle {
    margin-top: -29.5px;                /* Move the checkbox and circle up a bit */
    margin-left: -1px;
    margin-bottom: 0;
}

/* ES - Spanish */
body.lang-es .form-group.news-group .fine-print {
    margin-top: -25px;                  /* Move the checkbox and circle up a bit */
}
body.lang-es .form-group.news-group .checkbox-circle {
    margin-top: -46px;                /* Move the checkbox and circle up a bit */
    margin-left: -1px;               /* Move the checkbox and circle up a bit */
}

/* FR - French */
body.lang-fr .form-group.news-group .fine-print {
    margin-top: -15px;                  /* Move the checkbox and circle up a bit */
    margin-left: -1px;                  /* Push the checkbox and circle further to the left */
    margin-bottom: 0.5em;              /* Adjust value as needed for space between News & Privacy Fine-Print */
}
body.lang-fr .form-group.news-group .checkbox-circle {
    margin-top: -39.5px;                /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* DE - German */
body.lang-de .form-group.news-group .fine-print {
    margin-top: -16px;                  /* Move the checkbox and circle up a bit */
    margin-left: -1px;                  /* Push the checkbox and circle further to the left */
    margin-bottom: 0.5em;              /* Adjust value as needed for space between News & Privacy Fine-Print */
}
body.lang-de .form-group.news-group .checkbox-circle {
    margin-top: -39.5px;                /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* IT - Italian */
body.lang-it .form-group.news-group .fine-print {
    margin-top: -12px;                  /* Move the checkbox and circle up a bit */
    margin-left: -1px;                  /* Push the checkbox and circle further to the left */
    margin-bottom: 0.5em;              /* Adjust value as needed for space between News & Privacy Fine-Print */
}
body.lang-it .form-group.news-group .checkbox-circle {
    margin-top: -39.5px;                /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* BR - Brazilian Portuguese */
body.lang-br .form-group.news-group .fine-print {
    margin-top: -12px;                  /* Move the checkbox and circle up a bit */
    margin-left: -1px;                  /* Push the checkbox and circle further to the left */
    margin-bottom: 0.5em;              /* Adjust value as needed for space between News & Privacy Fine-Print */
}
body.lang-br .form-group.news-group .checkbox-circle {
    margin-top: -39.5px;                /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* PL - Polish */
body.lang-pl .form-group.news-group .fine-print {
    margin-top: -12px;                  /* Move the checkbox and circle up a bit */
    margin-left: -1px;                  /* Push the checkbox and circle further to the left */
    margin-bottom: 0.5em;              /* Adjust value as needed for space between News & Privacy Fine-Print */
}
body.lang-pl .form-group.news-group .checkbox-circle {
    margin-top: -39.5px;                /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* UKR - Ukrainian */
body.lang-ukr .form-group.news-group .fine-print {
    margin-top: -12px;                  /* Move the checkbox and circle up a bit */
    margin-bottom: 0.5em;              /* Adjust value as needed for space between News & Privacy Fine-Print */
}
body.lang-ukr .form-group.news-group .checkbox-circle {
    margin-top: -39.5px;                /* Move the checkbox and circle up a bit */
    margin-left: auto;
}


/* /////// Language-Specific Adjustments for Privacy Element Positioning ///////  */
/* /////// Adjust these values as needed for each language to ensure proper alignment /////// */
/* US - English */
body.lang-us .form-group.privacy-group .fine-print {
    margin-top: -19px;                  /* Move the checkbox and circle up a bit */
    margin-left: 5px;                   /* Adjust value to move checkbox and circle left or right. + = right, - = left */
}
body.lang-us .form-group.privacy-group .checkbox-circle {
    margin-top: -44px;                  /* Move the checkbox and circle up a bit */
    margin-left: -1px;
}

/* ES - Spanish */
body.lang-es .form-group.privacy-group .fine-print {
    margin-top: -20px;                  /* Move the checkbox and circle up a bit */
}
body.lang-es .form-group.privacy-group .checkbox-circle {
    margin-top: -44px;                  /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* FR - French */
body.lang-fr .form-group.privacy-group .fine-print {
    margin-top: -14px;                  /* Move the checkbox and circle up a bit */
}
body.lang-fr .form-group.privacy-group .checkbox-circle {
    margin-top: -37px;                  /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* DE - German */
body.lang-de .form-group.privacy-group .fine-print {
    margin-top: -14px;                  /* Move the checkbox and circle up a bit */
}
body.lang-de .form-group.privacy-group .checkbox-circle {
    margin-top: -37px;                  /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* IT - Italian */
body.lang-it .form-group.privacy-group .fine-print {
    margin-top: -14px;                  /* Move the checkbox and circle up a bit */
}
body.lang-it .form-group.privacy-group .checkbox-circle {
    margin-top: -37px;                  /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* BR - Brazilian Portuguese */
body.lang-br .form-group.privacy-group .fine-print {
    margin-top: -14px;                  /* Move the checkbox and circle up a bit */
}
body.lang-br .form-group.privacy-group .checkbox-circle {
    margin-top: -37px;                  /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* PL - Polish */
body.lang-pl .form-group.privacy-group .fine-print {
    margin-top: -14px;                  /* Move the checkbox and circle up a bit */
}
body.lang-pl .form-group.privacy-group .checkbox-circle {
    margin-top: -37px;                  /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

/* UKR - Ukrainian */
body.lang-ukr .form-group.privacy-group .fine-print {
    margin-top: -14px;                  /* Move the checkbox and circle up a bit */
}
body.lang-ukr .form-group.privacy-group .checkbox-circle {
    margin-top: -37px;                  /* Move the checkbox and circle up a bit */
    margin-left: auto;
}

body.lang-us .contactPopup .contact-form button[type="submit"],
body.lang-es .contactPopup .contact-form button[type="submit"],
body.lang-fr .contactPopup .contact-form button[type="submit"],
body.lang-de .contactPopup .contact-form button[type="submit"],
body.lang-it .contactPopup .contact-form button[type="submit"],
body.lang-br .contactPopup .contact-form button[type="submit"],
body.lang-pl .contactPopup .contact-form button[type="submit"],
body.lang-ukr .contactPopup .contact-form button[type="submit"] {
    height: 3.5rem;                     /* Adjusts height of the Submit Button */
}

body.lang-fr .contactPopup .contact-form button[type="submit"],
body.lang-de .contactPopup .contact-form button[type="submit"],
body.lang-it .contactPopup .contact-form button[type="submit"],
body.lang-br .contactPopup .contact-form button[type="submit"],
body.lang-pl .contactPopup .contact-form button[type="submit"],
body.lang-ukr .contactPopup .contact-form button[type="submit"] {
    margin-top: -3em;                    /* Adjusts top margin of the Submit Button */
}



/* /////// Success Popup That Displays After Form Submission /////// */
.successPopup {
    display: none;
    position: fixed;
    top: 36%;
    left: 50%;
    z-index: 1002;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.50);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    padding: 2em 2.5em;
    min-width: 320px;
    max-width: 50vw;
    text-align: center;
    border: 2px solid #ccc; 
}
.successPopup.active {
    display: block;
}
.successPopup .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #444;
    border: 2px solid #ccc;
    border-radius: 50%;
    color: #ffd700;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    padding: 0;
    margin: 0;
    z-index: 1003;                      /* Ensure close button is above popup */
}
.successPopup .close-btn svg {
    width: 22px;
    height: 22px;
    color: #ffd700;                      /* Default color for the X */
    stroke: #ffd700;                     /* For SVG strokes */
    transition: color 0.15s, stroke 0.15s;
}
.successPopup .close-btn:hover {
    border-color: red;
    color: #ffd700;
}
.successPopup .close-btn:hover svg {
    color: #ffd700;                    /* Yellow on hover */
    stroke: #ffd700;
}
.successPopup .form-text h1 {
    margin-top: -0.5em;                  /* Reduce this value to move text up */
    margin-bottom: 0.5em;
    font-size: 1.6em;
    color: #ffd700;
    letter-spacing: 0.03em;
}
.successPopup .form-text p {
    font-size: 1.2em;
    margin-bottom: 0;
    color: #fff;
}

/* Yellow border when the popup is hovered, but NOT when the close-btn is hovered */
.contactPopup:hover .close-btn:not(:hover),
.missionPopup:hover .close-btn:not(:hover),
.productsPopup:hover .close-btn:not(:hover),
.successPopup:hover .close-btn:not(:hover) {
    /* color: #ccc !important;           /* Red color for the X when popup is hovered */
    border-color: #ffd700 !important;
} 
/* Red border when the close-btn itself is hovered */
.contactPopup .close-btn:hover,
.missionPopup .close-btn:hover,
.productsPopup .close-btn:hover,
.successPopup .close-btn:hover {
    /* color: #ccc !important;           /* Yellow color for the X when close button is hovered */   
    border-color: #d32f2f !important;
} 
/* When popup is hovered, X is red */
.contactPopup:hover .close-btn:not(:hover) svg,
.missionPopup:hover .close-btn:not(:hover) svg,
.productsPopup:hover .close-btn:not(:hover) svg,
.successPopup:hover .close-btn:not(:hover) svg {
    color: #ccc !important;
}

/* /////// Error Popup That Displays When There is an Error /////// */
.errorPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2001;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    background: rgba(0,0,0,0.85);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    padding: 2em 2.5em;
    min-width: 320px;
    max-width: 90vw;
    text-align: center;
    border: 2px solid #d32f2f;
    transition: opacity 0.95s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    visibility: hidden;
}

@keyframes shakePopup {
    0% { transform: translate(-50%, -50%) translateX(0); }
    15% { transform: translate(-50%, -50%) translateX(-12px); }
    30% { transform: translate(-50%, -50%) translateX(10px); }
    45% { transform: translate(-50%, -50%) translateX(-8px); }
    60% { transform: translate(-50%, -50%) translateX(6px); }
    75% { transform: translate(-50%, -50%) translateX(-4px); }
    100% { transform: translate(-50%, -50%) translateX(0); }
}

.errorPopup.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    visibility: visible;
    animation: 
    shakePopup 0.6s cubic-bezier(.36,.07,.19,.97) 1,
    shakePopup 0.6s cubic-bezier(.36,.07,.19,.97) 1 1s,
    shakePopup 0.6s cubic-bezier(.36,.07,.19,.97) 1 3s,
    shakePopup 0.6s cubic-bezier(.36,.07,.19,.97) 1 4s;
}

.errorPopup .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #333;
    border: 2px solid #d32f2f;
    border-radius: 50%;
    color: #ffd700;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    padding: 0;
    margin: 0;
}
.errorPopup .close-btn svg {
    width: 22px;
    height: 22px;
    color: #ffd700;
    stroke: #d32f2f;                    /* red stroke for visibility */
    transition: color 0.15s, stroke 0.15s;
}

.errorPopup .form-text h1 {
    margin-top: -0.5em;
    margin-bottom: 0.5em;
    font-size: 1.95em;
    color: #d32f2f;
    -webkit-text-stroke: 1px #000;      /* Optional: adds a subtle outline for better readability */
    font-weight: 800;
    letter-spacing: 0.03em;
}
.errorPopup .form-text p {
    font-size: 1.15em;
    margin-bottom: 0;
    color: #ffd700;
    -webkit-text-stroke: 0.15px #000;   /* Optional: adds a subtle outline for better readability */
    font-weight: 500;
}

@keyframes flashError {
    0%, 100% { color: #d32f2f; }
    50% { color: #ffd700; }
}
.errorPopup .form-text h1 {
    margin-top: -0.5em;
    margin-bottom: 0.5em;
    font-size: 1.95em;
    color: #d32f2f;
    -webkit-text-stroke: 1px #000;
    font-weight: 800;
    letter-spacing: 0.03em;
    animation: flashError 1.25s linear infinite;
}

/* Error Overlay - Dark semi-transparent background that covers the entire viewport */
/* This is used to block interaction with the page when an error popup is active */
.error-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.45);
    pointer-events: auto;
}
.error-overlay.active {
    display: block;
}

/* Social Links */
.social-links {
    position: fixed;
    bottom: 65px !important;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 24px;
    z-index: 101;
    padding: 0;
    margin: 0;
}
.social-links img.X {
   border: #ccc 1.25px solid;
   border-radius: 50%;
   width: 33px;
   height: 33px;
}
.social-links img.Insta {
   border: #1e90ff 2px solid;
   border-radius: 50%;
    width: 34px;
    height: 34px;
}
/* Correct selector to match <img class="YouT"> */
.social-links img.YouT {
    border: #ffd700 1.25px solid;
    border-radius: 28% 28% 28% 28%;
    width: 36px;
    height: 31px;
}
.social-links li {
    list-style: none;
}
.social-links a img {
    width: 32px;
    height: 32px;
    transition: transform 0.2s;
}
.social-links a img:hover {
    transform: scale(1.2) rotate(15deg);
}


/* Footer */
.footer-text {
    width: calc(100vw + 12px);          /* Always wider than viewport */
    text-align: center;
    padding: 0.8rem 0;
    background: rgba(0,0,0,0.30);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 1px;
    position: fixed;
    left: -6px;                         /* Push left edge off-screen */
    right: -6px;                        /* Push right edge off-screen */
    bottom: -2px;                       /* Push bottom edge off-screen */
    border: 1.5px solid #ccc;
    box-sizing: border-box;
}

/* --- Cookie Consent Popup --- */
.cookie-consent {
    display: flex;
    align-items: flex-start;
    opacity: 0;
    pointer-events: none;
    transform: translateY(40px);
    transition: opacity 3s cubic-bezier(.4,0,.2,1), transform 5s cubic-bezier(.4,0,.2,1);
    position: fixed;
    bottom: 32px;
    left: 100px;
    width: 400px;
    min-height: 150px;                  /* Adjust height as needed */
    background: rgba(0,0,0,0.87);
    color: #fff;
    font-size: 1.03em;
    -webkit-text-stroke: 0.25px #000;
    font-weight: 500;
    z-index: 3000;
    padding: 1.5em 1.2em 1.2em 1.2em;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    flex-direction: row;
    align-items: flex-start;
    gap: 1em;
    border: 2px solid #ffd700;
    padding-left: 1em;                  /* Reduce this value as needed */ 
}
.cookie-consent.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.cookie-icon {
    width: 48px;
    height: 48px;
    margin-left: 0.1em;                 /* This line to increases space on the left of the cookie icon */
    margin-right: 0.4em;
    margin-top: -0.5em;
    flex-shrink: 0;
}
.cookie-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1em;
}
.cookie-message {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-left: 0;                  /* Remove if present */
    margin-top: -0.5em;               /* Move text up a bit more if needed */
}
.cookie-buttons {
    display: flex;
    gap: 1em;                         /* or 1.5em for more space between buttons */
    margin-top: 0.5em;
    justify-content: flex-start;
    padding-left: 0;                  /* This line to removes any default padding */
}
.cookie-consent button {
    padding: 0.25em 1.25em;           /* Slightly larger buttons */
    font-size: 1em;                   /* Slightly larger text */
    border-radius: 6px;
    border: none;
    background: #999;
    color: #222;
    font-weight: 500;
    -webkit-text-stroke: 0 !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cookie-consent button:hover.cookie-button1 {
    background: #03b320;
}
.cookie-consent button:hover.cookie-button2 {
    background: #d32f2f;
    -webkit-text-stroke: #000 0.5px;
    color: #ffd700;
    /* color: #fff; */
}
/*Custom Overlay When Leaving Website */
/* This overlay is used to block interaction with the page when the custom confirmation box is active */
.custom-confirm-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.01);                 /* or your preferred overlay color */
    z-index: 3500;                                  /* Make sure this is above popups but below .lang-menu if needed */
    pointer-events: auto;                           /* <-- This makes it clickable */
}
.custom-confirm-overlay.active {
    display: block;
}

/* Custom Confirmation Box - When Leaving Website */
.custom-confirm-box {
    display: none;
    position: fixed;
    top: 155px; left: 50%;                           /* This Sets The Custom Confirmation Box To The Bottom Of The Header */
    transform: translate(-50%);
    background: rgba(68,68,68,0.97);
    color: #fff;
    -webkit-text-stroke: 0.20px #000;
    font-weight: 500;
    font-size: large;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    min-width: 260px !important;
    max-width: 480px !important;
    height: 305px;
    z-index: 4001;
    padding: 1.25em 2em 1.5em 2em;
    text-align: left;
    font-family: system-ui, sans-serif;
    border: 1.5px solid #ccc;
}

.custom-confirm-logo {
    width: 48px;
    height: 48px;
    display: block;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
}

.custom-confirm-content {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
}

.custom-confirm-title {
    font-size: 1.25em;
    margin: -0.3em 0 0.75em 0;                      /* Move title up closer to the logo */
    font-weight: 600;
    text-align: center !important;
}

.custom-confirm-message {
    font-size: 1em;
    margin-bottom: 1.5em;
    text-align: center !important;
}

.custom-confirm-buttons {
    display: flex;
    gap: 1.5em;
    justify-content: flex-end;
}

.custom-confirm-btn {
    padding: 0.35em 0.7em;
    font-size: 0.95em;
    border-radius: 4px;
    border: 1.1px solid #ccc;
    background: #999;
    color: #222;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.custom-confirm-btn:hover {
    background: #e0e0e0;
}

#customConfirmOk.custom-confirm-btn {
    background: #3085d6;                        /* Blue like browser default */
    color: #fff;
    -webkit-text-stroke: 0.15px #000;
    font-weight: 600;
    border: 2px solid #3085d6;
}
#customConfirmOk.custom-confirm-btn:hover {
    background: #256bb5;
    border-color: #256bb5;
}
body.lang-us .custom-confirm-buttons {
   margin-top: 12px;                              /* Adjust this value to move buttons up or down */
}
body.lang-us .custom-confirm-message {
    margin-top: 0.7em;                            /* Adjust this value to move message up or down */
}
body.lang-es .custom-confirm-box {
    height: 315px;
}

.mNav-links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2em 0 2em 0;
    align-items: center;
}
.mNav-links a.header-nav-link {
    color: #ffd700;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s;
}
.mNav-links a.header-nav-link:hover {
    color: #fff;
}

/* Header and Footer */
.main-header,
.footer-text {
    z-index: 100;
}

/* Centered loader popup overlay */
.form-loader-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3000;
  transform: translate(-50%, -50%);
  background: rgba(24, 28, 32, 0.92);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 2em 2.5em 1.5em 2.5em;
  min-width: 180px;
  text-align: center;
  border: 2px solid #ffd700;
  color: #ffd700;
}
.form-loader-popup .loader {
  display: block;
  margin: 0 auto 1em auto;
  width: 32px;
  height: 32px;
  border: 4px solid #ffd700;
  border-top: 4px solid #1e90ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
.form-loader-popup .loader-text {
  font-size: 1.2em;
  color: #ffd700;
  font-weight: 600;
  letter-spacing: 1px;
}
.loader-dots {
  display: inline-block;
}
.loader-dots span {
  opacity: 0.2;
  animation: blinkDot 1.2s infinite;
  font-weight: bold;
  font-size: 1.2em;
  color: #ffd700;
}
.loader-dots span:nth-child(1) {
  animation-delay: 0s;
}
.loader-dots span:nth-child(2) {
  animation-delay: 0.25s;
}
.loader-dots span:nth-child(3) {
  animation-delay: 0.5s;
}
@keyframes blinkDot {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}


@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-10px);}
    to { opacity: 1; transform: translateY(0);}
}


/* //// General Popup Styles //// */
/* Popups */
.missionPopup,
.productsPopup,
.contactPopup,
.successPopup,
.errorPopup,
.mNavPopup {
    z-index: 2000 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.missionPopup.active,
.productsPopup.active,
.contactPopup.active,
.successPopup.active,
.errorPopup.active,
.mNavPopup.active {
    opacity: 1;
    pointer-events: auto;
}

/* Overlay that blocks the page when a popup is active */
.popup-overlay,
#popupOverlay,
#error-overlay,
#mNavOverlay {
    z-index: 1999 !important;
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.01);
    pointer-events: auto;
}
.popup-overlay.active,
#popupOverlay.active,
#error-overlay.active,
#mNavOverlay.active {
    display: block;
}

/* Language menu always on top */
.lang-menu {
    z-index: 10000 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 10px;
    right: 10px;
}
body.popup-active .lang-menu,
body.popup-active .lang-menu * {
    pointer-events: auto !important;
}

/* Social links below overlay */
.social-links {
    z-index: 1900;
    position: fixed;
}

/* Force red border on ALL close buttons in popups, desktop and mobile */
.missionPopup .close-btn:hover,
.productsPopup .close-btn:hover,
.contactPopup .close-btn:hover,
.successPopup .close-btn:hover,
.mNavPopup .close-btn:hover,
.mNavCloseBtn:hover {
    border-color: #d32f2f !important;
}
.missionPopup .close-btn:hover svg,
.productsPopup .close-btn:hover svg,
.contactPopup .close-btn:hover svg,
.successPopup .close-btn:hover svg,
.mNavPopup .close-btn:hover svg,
.mNavCloseBtn:hover svg {
    stroke: #d32f2f !important;
}

/* Allow yellow on errorPopup close button hover */
.errorPopup .close-btn:hover {
    border-color: #ffd700 !important;   /* Yellow border on hover */
    color: #d32f2f !important;          /* change X color to red on hover */
}

.errorPopup .close-btn:hover svg,
.missionPopup:hover,
.productsPopup:hover,
.contactPopup:hover,
.successPopup:hover {
    color: #d32f2f !important;                     /* change X color to red on hover */
    border-color: #ffd700 !important;              /* Yellow border on hover */
}
.missionPopup:hover,
.productsPopup:hover,
.contactPopup:hover {
    color: #fff !important;                     /* keep text color white on hover */
}


/* Contact Form - Submit Button Styles */
body.lang-us .contactPopup .contact-form button[type="submit"]:hover:not(.error-btn),
body.lang-es .contactPopup .contact-form button[type="submit"]:hover:not(.error-btn),
body.lang-fr .contactPopup .contact-form button[type="submit"]:hover:not(.error-btn),
body.lang-de .contactPopup .contact-form button[type="submit"]:hover:not(.error-btn),
body.lang-it .contactPopup .contact-form button[type="submit"]:hover:not(.error-btn),
body.lang-br .contactPopup .contact-form button[type="submit"]:hover:not(.error-btn),
body.lang-pl .contactPopup .contact-form button[type="submit"]:hover:not(.error-btn),
body.lang-ukr .contactPopup .contact-form button[type="submit"]:hover:not(.error-btn) {
    background: #03b320 !important;
    color: #fff !important;
}

/* Contact Form - Adjustments for News and Privacy Checkboxes */
body.lang-us .contact-form .form-group.news-group,
body.lang-es .contact-form .form-group.news-group,
body.lang-us .contact-form .form-group.privacy-group,
body.lang-es .contact-form .form-group.privacy-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5em !important;
    margin-bottom: 0.5em;
    margin-top: 3px !important; /* Reset any previous margin-top */
}
/* Add extra space above the news-group to separate it from the comments field */
body.lang-us .contact-form .form-group.news-group,
body.lang-es .contact-form .form-group.news-group {
    margin-top: 0.9em;
    margin-bottom: 0.3em !important;                    /* Tighten space before privacy */
}
/* If you want a little more space between the two checkboxes, adjust margin-bottom here */
body.lang-us .contact-form .form-group.news-group,
body.lang-es .contact-form .form-group.news-group {
    margin-top: 0.7em !important;
    margin-bottom: 1.75em !important;                   /* Space before submit button */
}