/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@500;700&display=swap');

/* Reset and Basic Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body {
    font-family: 'Open Sans', Arial, sans-serif; /* Consistent font for the body */
    min-height: 100vh;
    margin: 0;
    background: #ffffff; /* Keep this subtle for the overall background */
    color: #333333; /* Dark grey color for better readability */
    line-height: 1.6; /* Spacing for readability */
}
.modal-open .modal {
    z-index: 999;
}
.container {
    max-width: 1200px; /* Set a max-width for larger screens */
    margin: 0 auto;
    padding: 0 15px; /* Add horizontal padding */
}
.container.form-container {
    margin-bottom: 50px;
}

.container.index {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; /* Add gap between columns */
}

.column {
    flex: 1; /* Flex grow */
    min-width: 300px; /* Minimum width for small devices */
    background-color: #ffffff; /* Neutral background for content */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Soften shadow */
    overflow: hidden;
    margin-bottom: 20px;
}

.box {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text */
}

.box-icon {
    font-size: 50px;
    margin-bottom: 10px;
}


.box-text {
    color: #162447; /* Secondary color for text */
    margin-bottom: 20px; /* Add space before button */
}

.custom-btn {
    background-color: #e76f51; /* Accent color for primary button */
    color: #fff;
    padding: 15px 30px;
    border-radius: 25px; /* Rounded corners */
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Transition for hover effect */

}
.custom-btn:hover {
    background-color: #e63946; /* Darker shade on hover */
}

/* Header Styles */
.header-bg {
    background: #f2f2f2;
    color: #dce6ec;
    padding: 1rem 0;
    position: relative; /* Added for absolute positioning of children */
}

.hamburger-container {
    position: absolute;
    top: 2rem;
    right: 1rem;
    transform: translateY(-50%);
    display: none; /* Hidden by default, shown in media query */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
}
.logo-a:active,
.logo-a:hover,
.logo-a:focus {
    text-decoration: none;
}

.logo-img {
    height: 50px;
    margin-right: 10px;
}

.logo-text .main-text {
    font-family: "Stardos Stencil", system-ui;
    font-weight: 700;
    font-family: "Orbitron", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    color: #2f4863;
    font-weight: 300;
    text-decoration: none;

}

.sub-title {
    text-align: center;
    width: 100%;
    font-weight: 300;
    margin-top: -7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.84rem;
    color: #5c6f81;
}

/* Adjust mobile icon size */
.mobile-menu-icon {
    font-size: 20px;
}
/* Navigation Styles */

nav li {
    padding: 0 15px;
}

nav a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #58a6ff; /* Highlight color for nav items */
}

.auth-buttons {
    display: block;
    flex-direction: column;
    align-items: center;
}
nav ul {
    padding-left: 0; /* Remove default padding */
}
nav ul li {
    list-style: none; /* Remove bullets */
}

.index-page nav {
    display: none;
}
/* Custom button styles */
.custom-login-btn, .custom-register-btn {
    border: none; /* Remove border */
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    transition: background-color 0.3s;
}

.custom-login-btn {
    background: #f8f9fa;
    color: #2f4863;
    border: 1px solid #2f4863;
}

.custom-login-btn:hover {
    background-color: #dce6ec;
    color: #192b3e;
    border: 1px solid #2f4863;
}

.custom-register-btn {
    background-color: #314760;
    color: #f8f9fa;
}

.custom-register-btn:hover {
    background-color: #20374c;
    color: #dce6ec;
}

.modal-auth h1 {
    font-family: 'Playfair Display', serif;
}
.modal-auth a {
    color: #314760;
}
.form-control {
    border: 1px solid #ced4da;
    border-radius: 6px;
    transition: border-color 0.3s ease; /* Smooth transition for focus */
}
.form-control:focus {
    border-color: #192d43; /* Highlight input on focus */
}
.floating-label-group {
    position: relative;
}
.form-container h2 {
    color: #1f3147;
    margin-bottom: 15px;
}
.form-control.form-input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    height: 50px;
}
.form-control.form-input.form-input-textarea {
    height: 150px;
}
.form-label.form-label-textarea {
    margin-top: -53px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #1f3147 !important;
    background-color: #ffffff !important;
}

.form-control.form-input:focus {
    outline: none;
    border-color: #1f3147;
    box-shadow: none;
    color: #1f3147;
}

.form-control.form-input:focus::placeholder {
    opacity: 0; /* Hide placeholder on focus */
}
.form-container input[type="file"] {
    padding: 0;
}
.form-container input[type="file"] {
    position: relative;
}

.form-container input[type="file"]::file-selector-button {
    width: 136px;
    color: transparent;
}

/* Faked label styles and icon */
.form-container input[type="file"]::before {
    position: absolute;
    pointer-events: none;
    top: 10px;
    left: 16px;
    height: 20px;
    width: 20px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
}

.form-container input[type="file"]::after {
    position: absolute;
    pointer-events: none;
    top: 8px;
    left: 40px;
    color: #1f3147;
    content: "Upload File";
}

/* ------- From Step 1 ------- */

/* file upload button */
.form-container input[type="file"]::file-selector-button {
    border-radius: 4px;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    margin-right: 10px;
    transition: background-color 200ms;
}

/* file upload button hover state */
.form-container input[type="file"]::file-selector-button:hover {
    background-color: #f3f4f6;
}

/* file upload button active state */
.form-container input[type="file"]::file-selector-button:active {
    background-color: #e5e7eb;
}

.form-label {
    font-family: 'Open Sans', Arial, sans-serif;
    position: absolute;
    left: 12px; /* Align with the input field */
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    background-color: #fff; /* Match the input field's background color */
    padding: 0 5px; /* Add some padding on the sides */
    margin-top: -1px; /* This ensures the label covers the border */
    pointer-events: none;
    opacity: 0; /* Hide label */
}

.form-control.form-input.error {
    border: 1px solid red;
}

.form-label.error {
    color: red;
}

.form-control.form-input.error::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
    opacity: 1; /* Firefox */
}

.form-control.form-input.error:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}

.form-control.form-input.error::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}


.form-control.form-input:focus + .form-label,
.form-control.form-input:not(:placeholder-shown) + .form-label {
    opacity: 1; /* Show label when input is focused or filled */
    transform: translateY(-170%); /* Move label to top */
    font-size: 12px; /* Smaller font size for the floating label */
    border-radius: 25px;
}

.form-control.form-input:focus + .form-label {
    opacity: 1; /* Show label when input is focused */
    transform: translateY(-170%); /* Move label to top */
    font-size: 12px; /* Smaller font size for the floating label */
    background-color: #fff; /* Ensure the background covers the border */
    padding: 0 5px; /* Maintain padding */
    z-index: 10; /* Ensure the label is above all */
    border-radius: 25px;
}

.wave-background {
    position: relative;
    background: #f2f2f2;
    overflow: hidden;
}

.wave-background::after {
    content: "";
    position: absolute;
    top: 76px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,128L30,122.7C60,117,120,107,180,106.7C240,107,300,117,360,149.3C420,181,480,235,540,240C600,245,660,203,720,197.3C780,192,840,224,900,234.7C960,245,1020,235,1080,208C1140,181,1200,139,1260,112C1320,85,1380,75,1410,69.3L1440,64L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    /* transform: rotate(-26deg);  Adjust the angle as needed */
    background-size: cover;
    background-repeat: no-repeat;
    transform-origin: bottom left;
}
.container.main-content {
    padding: 50px 10px;
    margin: 20px auto; /* Add top and bottom margin for spacing */
    max-width: 1200px; /* Consider increasing the max width */
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    z-index: 2;
    position: relative;
}

.info-column {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: space-between; /* Aligns children to have space between them */
    width: 48%;
}

.content-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    height: 100%;

}
.panel-img {
    max-width: 100%; /* Ensures image is responsive and fits its container */
    height: 150px; /* Keeps the aspect ratio of the image */
    display: block; /* Images are inline by default, which can affect centering */
    margin: 0 auto; /* Additional measure to center images horizontally */
}
.right-column .panel-img {
    height: 130px;
    margin-top: 10px;
    margin-bottom: 10px;

}
/* Push the button to the bottom */
.content-box button {
    margin-top: auto; /* This pushes the button to the bottom */
}




/* Typography */
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem; /* Larger titles */
    margin-bottom: 1rem;
}

p {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    margin: 0;
}
/* Button Styles */
.btn {
    padding: 0.5rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Not too bold, just enough weight */
    font-size: 1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.login-btn {
    background-color: #192d43; /* A blue that fits the theme */
}

.register-btn {
    background-color: #192d43; /* Same blue for consistency */
}


.btn-primary {
    background-color: #58a6ff; /* Primary button color */
    color: white;
}

.btn-primary:hover {
    background-color: #1c1e29; /* Darker on hover */
}

.btn-secondary {
    background-color: #fff; /* Secondary button with white background */
    color: #58a6ff;
    border: 1px solid #58a6ff; /* Border to match the primary color */
}

.btn-secondary:hover {
    background-color: #f2f7ff; /* Lighter on hover */
}

/* Footer Styles */
.footer {
    background: #1c1e29;
    color: white;
    padding: 1rem 0;
    width: 100%;
    bottom: 0;
}
.footer p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}
.footer-container {
    text-align: center;
}

/* Responsive Styles */
@media screen and (max-width: 576px) {
    form {
        padding: 0;
    }
    input,
    textarea,
    select {
        padding: 10px;
    }
    button {
        padding: 10px 15px;
    }
}
@media only screen and (max-width: 767px) {
    .container {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        margin-top: 10px;
    }

    nav ul {
        flex-direction: column;
        align-items: flex-start;
    }

    nav li {
        margin: 0;
        margin-bottom: 10px;
    }

}

@media screen and (min-width: 577px) and (max-width: 768px) {
    form {
        padding: 20px;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    form {
        padding: 25px;
    }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
    form {
        padding: 30px;
    }
}

/* Add more media queries as needed for different screen sizes and styles */

/* Media query for tablets */
@media (max-width: 768px) {
    .container.index {
        flex-direction: column;
    }

    .column {
        width: 100%; /* Full width on small screens */
    }

    .custom-btn {
        width: auto; /* Auto-width for buttons */
    }
}

/* Media query for mobiles */
@media (max-width: 480px) {
    .container.index {
        flex-direction: column; /* Stack columns on top of each other */
    }
}

.mobile-menu-icon {
    display: none;
    font-size: 2rem;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    nav,
    .auth-buttons {
        display: none; /* Hide the navigation menu by default on smaller screens */
        flex-direction: column;
        align-items: flex-start;
    }


    body.index-page nav.active,
    nav.active,
    .auth-buttons.active {
        display: flex; /* Show the navigation menu when active */
    }


    .mobile-menu-icon {
        display: block; /* Show the hamburger icon on smaller screens */
    }

    nav ul {
        flex-direction: column;
        align-items: flex-start;
    }

    nav li {
        margin: 0;
        margin-bottom: 10px;
    }

    .logo {
        margin-bottom: 0; /* Add some space between logo and menu on smaller screens */
        margin-top: 0; /* Add margin at the top of the logo */
    }

    .mt-5, .my-5 {
        margin-top: 1rem!important;
    }

}
@media (max-width: 576px) {
    .header-bg {
        padding: 10px 0;
    }

    .logo {
        font-size: 1.5rem; /* Smaller logo on mobile */
    }

    .sub-title {
        font-size: 0.8rem; /* Smaller sub-title on mobile */
    }

    .mobile-menu-icon {
        display: block; /* Show hamburger menu on mobile */
    }

    nav {
        display: none; /* Hide navigation on mobile by default */
    }

    body.index-page nav.active {
        display: flex; /* Show when active */
    }
}


/* Responsive Styles */
@media (max-width: 768px) {
    .mobile-menu-icon {
        display: block;
    }

    /* Active class styles */
    nav.active, .auth-buttons.active {
        display: flex;
        flex-direction: column;
    }

    /* Adjust button sizes */
    .custom-login-btn, .custom-register-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    header .container {
        flex-direction: column;
        align-items: flex-start;
    }
    .main-content {
        flex-direction: column;
    }

    .info-column {
        width: 100%;
        margin-bottom: 20px;
    }

    footer.footer {
        position: static; /* Footer should flow with content on small screens */
        /*margin-top: 3rem;*/
    }

    .index-page .info-column {
        width: 100%;
    }

    .container.main-content {
        padding: 0;
        margin: 0;
        border: 0
    }
}

@media (max-width: 480px) {
    .logo-text .main-text {
        font-size: 1.5rem;
    }

    .sub-title {
        font-size: 0.8rem;
    }
    footer p {
        font-size: 0.8rem;
    }
}

.custom-btn {
    background-color: #4f5bd5; /* Brand color */
    border: none;
    padding: 10px 20px;
    color: white;
    border-radius: 2px; /* Modern, subtle rounding */
    text-transform: uppercase; /* Stylistic choice for buttons */
    letter-spacing: 1px; /* Spacing for legibility */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */

}














.custom-btn:hover {
    background-color: #3a47ad; /* A darker shade for hover state */
}

.btn.lost-account-btn, .btn.protect-btn {
    background-color: #1f3147;
    border: 1px solid #1f3147;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Hover effect to enhance depth and interaction */
.btn.lost-account-btn:hover, .btn.lost-account-btn:active, .btn.lost-account-btn:focus,
.btn.protect-btn:hover, .btn.protect-btn:active, .protect-btn:focus {
    background-color: #2b2b2b !important;
    border: 1px solid #152334 !important;
    color: #ffffff !important;
    box-shadow: 0 !important;
}

/* Ensure footer is at the bottom of content or window */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.content {
    flex: 1;
}

/* Fancy, Modern Attractive Design for Columns */

@media (max-width: 767px) {
    .hamburger-container {
        display: block;
    }

    nav,
    .auth-buttons {
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    body.index-page nav.active,
    .auth-buttons.active {
        display: flex;
    }

    /* Adjust logo and subtitle sizes */
    .logo-text .main-text {
        font-size: 1.5rem;
        font-weight: 300;
    }

    .sub-title {
        font-size: 0.6rem;
        text-align: left;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 1px;
        margin-left: 2px;
    }
}

.custom-logout-btn {
    color: #314760;
}
.auth-buttons a {
    color: #314760;
}
.auth-buttons a:hover {
    color: #293c52;
}
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: 'Roboto', sans-serif;
    min-width: 300px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.styled-table thead tr {
    background-color: #58a6ff;
    color: white;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #58a6ff;
}

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #58a6ff;
}

.btn-danger {
    background-color: #e63946;
    color: white;
    border: none;
    padding: 2px 8px;
    font-size: 0.8rem;
    /* margin-top: 5px; */
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-danger:hover {
    background-color: #d63031;
}
@media screen and (max-width: 768px) {
    .styled-table {
        width: 100%;
        overflow-x: auto; /* Enable horizontal scrolling */
    }
}
.btn-google i {
    margin-right: 10px;
    vertical-align: middle;
    font-size: 20px; /* Adjust size if necessary */
}

.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
}


.or-separator {
    text-align: center;
    margin: 20px 0;
    position: relative;
    margin-bottom: 0;
}

.or-separator::before, .or-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #ced4da;
}

.or-separator::before {
    left: 0;
}

.or-separator::after {
    right: 0;
}
.google-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

}
@media (max-width: 767px) {
    /* ...existing styles... */

    .auth-buttons, nav ul {
        width: 100%; /* Full width for nav and buttons */
        padding: 0;
        margin: 10px 0; /* Add margin for spacing */
    }

    .auth-buttons button, nav a {
        display: block; /* Make nav links and buttons block elements */
        width: 100%; /* Full width */
        text-align: center; /* Center text */
        margin-bottom: 10px; /* Space between items */
    }

    .auth-buttons {
        order: 2; /* Ensure auth buttons are below the nav items */
    }

    nav ul {
        order: 1; /* Ensure nav items are above the auth buttons */
    }

    .header-container {
        flex-direction: column; /* Stack elements vertically */
    }

    .hamburger-container {
        /* Full width for the hamburger container */
        text-align: right; /* Align hamburger icon to the right */
        padding: 10px; /* Padding for touch area */
        color: #314760;
    }

    .mobile-menu-icon {
        font-size: 1.5rem; /* Adjust icon size */
        color: #314760;
    }

    .logo-container {
        width: 100%; /* Full width for the logo container */
        text-align: left; /* Center logo */
    }
}
@media (max-width: 767px) {
    /* ...existing styles... */

    .custom-login-btn, .custom-register-btn, .gsi-material-button  {
        width: 100%; /* Full width buttons in modals */
    }
}
header nav{
    display: none!important;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    display: flex;
    flex-direction: column;
}

.wrapper {
    flex-grow: 1; /* Allows wrapper to grow and fill available space */
    display: flex;
    flex-direction: column;
}

.footer {
    /* Footer styles */
    height: 80px; /* Adjust based on your footer's height */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    /* ...existing styles... */

    .wrapper {
        flex-grow: 1;
    }

    .footer {
        position: relative; /* Adjust footer position on smaller screens */
        display: flex;
        align-items: center; /* Align vertically */
        justify-content: center; /* Align horizontally */
        text-align: center; /* Center text for child elements */
        min-height: 100px;
    }
}

@media (max-width: 768px) {
    .modal-dialog {
        width: 90%; /* Adjust width for small screens */
        max-width: none;
    }
}

@media (max-width: 576px) {
    .modal-dialog {
        width: 96%; /* Full width on extra small screens */
    }
}
.modal-content {
    padding: 10px; /* Adjust padding inside the modal */
}

.modal-header, .modal-body, .modal-footer {
    padding: 10px; /* Consistent padding for all modal parts */
}

@media (max-width: 768px) {
    .modal-title {
        font-size: 1.5rem; /* Smaller font size for modal titles */
    }

    .modal-body {
        font-size: 0.9rem; /* Smaller font size for modal body */
    }
}
.modal-footer {
    justify-content: flex-start;
    border: none;
}
@media (max-width: 900px) {
    .custom-login-btn, .custom-register-btn, .gsi-material-button {
        width: 100%;
    }
}
.google-btn-wrapper {
    width: 100%;
}


.legal-page-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-top: 20px;
}

.legal-page-title {
    font-size: 2rem;
    color: #192d43;
    margin-bottom: 20px;
    text-align: center;
}

.legal-page-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.legal-page-content h2 {
    color: #192d43;
    margin-top: 20px;
    margin-bottom: 10px;
}

.legal-page-content ul,
.legal-page-content ol {
    margin-left: 20px;
}

.legal-page-content li {
    margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo-img {
        height: 40px;
    }
    .legal-page-container {
        padding: 15px;
        margin-top: 15px;
    }

    .legal-page-title {
        font-size: 1.5rem;
    }

    .legal-page-content {
        font-size: 0.9rem;
    }
}

.footer-links {
    margin-bottom: 10px;
    text-align: center;
}

.footer-link {
    color: #f2f7ff; /* Adjust the color to match your footer text color */
    text-decoration: none;
    padding: 0 10px;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.footer-link:hover {
    color: #58a6ff; /* Highlight color for hover state */
}

/* Add this CSS for responsive table */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: 'Roboto', sans-serif;
    min-width: 300px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    overflow-x: auto; /* Enable horizontal scrolling on smaller screens */
}

.styled-table thead tr {
    background-color: #58a6ff;
    color: white;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis for overflowed content */
}

/* Remove fixed width for columns to allow flexibility */
.styled-table th:first-child,
.styled-table td:first-child {
    min-width: auto;
}

/* Apply a media query for mobile screens */
@media screen and (max-width: 768px) {
    .styled-table {
        font-size: 0.8em; /* Reduce font size for better fit on small screens */
    }
}

/* Styles for the unordered list in the content box */
.info-column .box-list {
    list-style-type: none; /* Removes default list bullets */
    padding-left: 0; /* Removes default padding */
    margin-bottom: 20px; /* Space before the button */
    font-size: 1rem;
}

.info-column .box-list li {
    position: relative; /* Needed for absolute positioning of pseudo-elements */
    padding-left: 30px; /* Space for icons */
    margin-bottom: 10px; /* Space between list items */
    line-height: 1.5; /* Better readability for list items */
    text-align: left; /* Aligns text to the left */
}

/* Adding modern icons before each list item using pseudo-elements */
.info-column .box-list li::before {
    content: '✔'; /* The content of the pseudo-element, a checkmark in this case */
    position: absolute; /* Position absolutely within the li */
    left: 0; /* Align to the left */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust vertical alignment */
    color: #192d43; /* Icon color */
    font-weight: bold; /* Make the icon a bit bolder */
    font-size: 20px;
}

/* Reverting button styles to the original size */
.custom-btn {
    padding: 10px 20px; /* Adjust padding to your liking */
    font-size: 1rem; /* Adjust font-size to your liking */
    /* ... other styles ... */
}

/* Add animations and interactions */
/*
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.info-column {
    animation: fadeIn 1s ease-out;
}

*/


















.swiper-pagination {
    margin-bottom: 32px;
}

/* Testimonials Section */
.testimonials-section {
    background: #ffffff;
    padding: 50px 0;
    border-top: none; /* A colored top border for brand consistency */
    border-bottom: none; /* Same colored bottom border */
    position: relative;
    box-shadow: inset 0 -1px 2px rgba(0,0,0,0.1); /* Inner shadow for a subtle separator */
    padding-top: 30px;
    padding-bottom: 100px;

}
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0px;
    background-image: linear-gradient(to right, #192d43, #95a8b8);
    /*background-image: linear-gradient(to right, #4f5bd5, #d62976); *//* Full gradient border */
    /*background-image: linear-gradient(to right, #4f5bd5 50%, #d62976 50%);*/
}
.testimonials-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-image: linear-gradient(to right, #192d43, #95a8b8); /* Full gradient border */
    /*background-image: linear-gradient(to right, #4f5bd5 50%, #d62976 50%);*/
}

.testimonials-section .swiper-container {
    max-width: 100%;
    padding: 0 15px; /* Add padding to match the main content container if necessary */
}
.testimonials-section .swiper-slide {
    width: auto;
}

body, button, input, textarea {
    font-family: 'Roboto', sans-serif;
}

h1.box-title {
    font-family: 'Playfair Display', serif; /* More distinctive font for titles */
    margin-bottom: 1rem;
    font-size: 2.2rem;
    color: #192d43; /* Primary color for titles */
    opacity: 1;
}



/* Use media queries to handle different screen sizes */
@media (max-width: 768px) {
    .container.main-content {
        padding: 0; /* Smaller padding on smaller screens */
    }
    .testimonials-section {
        padding: 30px 10px; /* Less padding on smaller screens */
    }
}



.testimonials-wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px; /* Add some padding on the sides */
    overflow: hidden
}

.testimonials-slider {
    list-style: none;
    padding: 0;
    display: flex;
    overflow-x: auto;
    gap: 20px;
}

.testimonial-item {
    flex: 0 0 auto; /* Prevents flex items from growing or shrinking */
    margin: 0 10px; /* Ensures space between items */
    max-width: 270px; /* Adjust the width of each testimonial */
    text-align: center; /* Center the content */
    position: relative; /* Establish a positioning context for pseudo-elements */
    width: 100%;
    list-style: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   /* margin-bottom: 50px;*/
}

@media (max-width: 768px) {
    .testimonial-item {
        min-width: 280px; /* Minimum width for smaller screens */
        box-shadow: none;

    }
    .testimonial-text {
        box-shadow: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .testimonial-text p {
        color: #848484;
        font-size: 20px;
        box-shadow: none;
    }
    .testimonial-text:before, .testimonial-text:after {
        display: none;
    }
    .modal.testimonial-modal {
        margin: 0;
        height: 100%;
        width: 100%;
        padding: 0;
        max-width: 100%;
        max-height: 100%;
    }
    .testimonial-modal .modal-dialog {
        margin: 0;
        height: 100%;
        width: 100%;
        padding: 0;
    }
    .testimonial-modal .modal-content {
        background-color: #000;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        align-items: center;
        padding: 0;
    }
    .testimonial-modal .close-modal {
        top: -15px;
        right: 15px;
        font-size: 2.5rem;
        color: white;
        z-index: 99;
    }
    .testimonial-modal .video {
        height: 100%;
        max-width: 100%;
    }
    .testimonials-section {
        overflow: hidden;
    }
    .box-title.testimonials-title {
        transform: none;
    }
}
.swiper-container {
    visibility: hidden;
}

/* Adjusted styles for .story-link to include the white border properly */
.story-link {
    display: inline-block;
    width: 120px; /* Width including the border */
    height: 120px; /* Height including the border */
    border-radius: 50%;
    padding: 4px; /* Creates space for white border */
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    margin: 10px; /* Space between circles */
    box-sizing: border-box; /* Includes padding in width and height */
    cursor: pointer; /* Indicates the image is clickable */
}

/* Style for the white border */
.story-image-container {
    padding: 5px; /* Adjust padding to create white border effect */
    background: #fff; /* White background for border */
    border-radius: 50%; /* Ensure container is also circular */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.story-image-container img {
    max-width: 100%; /* Max-width to ensure it scales down if necessary */
    max-height: 100%; /* Max-height to ensure it scales down if necessary */
    border-radius: 50%; /* Circular border */
    object-fit: contain; /* Ensures the whole image fits within the frame */
    display: block;
}
.story-image-container:hover img {
    opacity: 0.8; /* Dim image slightly */
    transition: opacity 0.3s ease;
}

.story-image-container:hover::after {
    content: 'Peržiūrėti';
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%; /* Match the parent's border-radius */
    font-size: 0.9em;
    padding: 10px; /* Adjust padding as needed */
    transition: opacity 0.3s ease;
    opacity: 0; /* Hide initially */
    cursor: pointer; /* Change cursor to indicate clickable area */
}

.story-image-container:hover::after {
    opacity: 1; /* Show on hover */
}

.testimonial-item figcaption {
    /* ... existing styles ... */
    max-width: 100%; /* Take full width of its parent */
}
figcaption {
    display: block;
    margin: 0 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    color: #333;
    font-weight: 900;
}

/* Testimonial Text Styling */
.testimonial-text {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #555555;
    background: #ffffff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;

}

.testimonial-text:before,
.testimonial-text:after {
    font-family: 'Playfair Display', serif; /* This is an example of a stylish serif font for quotations */
    font-size: 3.5rem; /* Scaled down to be less dominating */
    /*color: #4f5bd5;*/
    color: #f87922; /* A color that should match your brand palette */
    color: #192d43;
    position: absolute;
}
.swiper-pagination-bullet-active {
    /* Set the color of the active bullet */
    background-color: #192d43; /* Replace with your desired color code */
    /* You can also change other properties like size, border, etc. */
}
.testimonial-text:before {
    content: '“';
    top: -10px; /* Adjusted */
    left: 5px; /* Adjusted */
}

.testimonial-text:after {
    content: '”';
    bottom: -45px; /* Adjusted */
    right: 5px; /* Adjusted */
}

.testimonial-text p {
    margin: 0; /* Resets margin for p element inside testimonial-text */
}

.testimonial-text p {
    position: relative;
    z-index: 1; /* Ensures text stays above the pseudo-elements */
}

/* Add a hover effect on the testimonial for interactivity */
.testimonial-item:hover .testimonial-text {

}

/* Navigation */
.testimonials-nav {
    text-align: center;
    margin-top: 20px;
}

.prev-btn, .next-btn {
    background-color: #007bff; /* Your primary action color */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px; /* Smooth round edges */
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 5px; /* Reduced space between buttons */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.prev-btn:hover, .next-btn:hover {
    background-color: #0056b3; /* A darker shade when hovered */
}


/* Modal Base Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content Box */
.modal-dialog {
    max-width: 600px; /* Adjust modal width */
    width: 90%; /* Responsive width */
    margin: 5% auto; /* Center the modal with some top margin */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Add some shadow for depth */
}

.modal-content {
    position: relative; /* For positioning the close button */
    background-color: #fff; /* White background */
    border: none; /* Remove border */
    border-radius: 8px; /* Rounded corners for the modal */
}

/* The Close Button */
.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none; /* Remove button border */
    font-size: 1.5rem;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    border-bottom: none; /* Remove the border */
    padding: 10px 20px; /* Adjust padding */
}

.modal-body {
    padding: 20px; /* Adjust padding */
}






.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


.testimonial-modal {
    /* Custom styles for testimonial modals */
    /* max-width: 90%;  Example: Limit the width of the modal */
    /* max-height: 80vh; Example: Limit the height and ensure it's within the viewport */
    overflow-y: auto; /* Allows scrolling within the modal if necessary */
}

/* When the modal is active, we'll use this class to show it */
.modal.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add more styles for hover effects, responsiveness, etc., as needed. */

@media (max-width: 576px) {
    .modal-dialog {
        margin: 10% auto;
    }
}

@media (max-width: 768px) {
    .container.main-content, .testimonials-section {
        padding: 0; /* Smaller padding on smaller screens */
    }
    .left-column, .right-column {
        padding: 50px 20px;
    }
    .left-column {
        padding-top: 60px;
    }



    .left-column {
        position: relative;
    }

    /* Create the pseudo-element for the wave */
    .left-column::after {
        content: "";
        display: block;
        width: 100%;
        height: 200px; /* Height of your SVG viewBox */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%23f2f2f2' d='M0,60 q 360,-80 720,0 q 360,80 720,0 v40 q -360,100 -720,0 q -360,-100 -720,0 v-40 Z'/%3E%3C/svg%3E");
        position: absolute;
        bottom: -200px; /* This positions the wave just below the left column */
        left: 0;
        z-index: 2; /* Ensure it's above the background but below the content */
        background-size: cover;
        background-repeat: no-repeat;
    }



    /* Adjust the position of the right column to make room for the wave */
    .right-column {
        position: relative;
        top: 50px; /* This should be the height of the wave */
        padding-bottom: 180px;
    }

    .right-column::after {
        content: "";
        display: block;
        width: 100%;
        height: 200px; /* Height of your SVG viewBox */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%23f2f2f2' d='M0,100 q 180,-40 360,0 q 180,40 360,0 q 180,-40 360,0 q 180,40 360,0 v50 q -180,20 -360,0 q -180,-20 -360,0 q -180,20 -360,0 q -180,-20 -360,0 Z' /%3E%3C/svg%3E");
        position: absolute;
        bottom: -10px; /* This positions the wave just below the left column */
        left: 0;
        z-index: 992; /* Ensure it's above the background but below the content */
        background-size: cover;
        background-repeat: no-repeat;
    }

    .testimonials-section {

    }



    .wave-background {
    }
    .wave-background::after {
        background-repeat: no-repeat;
        background-position: center bottom; /* This ensures that the wave is positioned at the bottom */
        height: 150px; /* Adjust the height of the wave here as needed */
    }

    .wave-background {
        background: #ffffff;
    }
    .wave-background::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f0f0f0' fill-opacity='1' d='M0,128L30,122.7C60,117,120,107,180,106.7C240,107,300,117,360,149.3C420,181,480,235,540,240C600,245,660,203,720,197.3C780,192,840,224,900,234.7C960,245,1020,235,1080,208C1140,181,1200,139,1260,112C1320,85,1380,75,1410,69.3L1440,64L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f2f2f2' fill-opacity='1' d='M0,128L30,122.7C60,117,120,107,180,106.7C240,107,300,117,360,149.3C420,181,480,235,540,240C600,245,660,203,720,197.3C780,192,840,224,900,234.7C960,245,1020,235,1080,208C1140,181,1200,139,1260,112C1320,85,1380,75,1410,69.3L1440,64L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z' transform='rotate(180 720 160)'%3E%3C/path%3E%3C/svg%3E");

        /* sitas geras bus virs testimonials
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%23f2f2f2' d='M0,100 C300,200 300,0 600,100 C900,200 900,0 1200,100 C1500,200 1500,0 1800,100 L1800,200 L0,200 Z'/%3E%3C/svg%3E");
        */

        width: 100%;
        height: 92px; /* Use viewport height to make the wave responsive */
        top: 0;
        z-index: 3;
    }
    h1.box-title {
        font-size: 2rem; /* Smaller font size on mobile */
        color: #192d43;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .btn.custom-btn {
        padding: 8px 15px; /* Slightly smaller buttons on mobile */

    }

    .testimonial-item {
        /* Adjust for mobile layout */
    }

    .testimonial-text {
        /* Adjust font size for mobile readability */
    }
    .testimonial-item {
        min-width: 100%; /* Take full width on small screens */
        max-width: none; /* Override any max-width */
    }

    .testimonial-text:before,
    .testimonial-text:after {
        font-size: 2rem; /* Smaller quotation marks on small screens */
    }
}

.separator {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #dbe8ff, #ffe5f5);
    background-image: linear-gradient(to right, #192d43, #95a8b8);
    /*background-image: linear-gradient(to right, #18293a, #dce6ec);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3) inset;*/
}

.instagram-username {
    font-size: 14px;
    text-decoration: none;
    color: grey;
    margin-top: 0;
    display: block;
}

@media only screen and (max-width: 640px) {
    .separator {
        position: initial;
    }
    .container.main-content {
        padding: 0; /* Reduced padding for smaller screens */
        margin: 0; /* Reduced margin for smaller screens */
    }

    .testimonials-section {
        padding: 25px 0; /* Reduced padding for smaller screens */
    }

    .testimonials-wrapper {
        padding: 0 10px; /* Reduced padding on the sides */
    }

    .testimonial-item {
        margin: 0; /* Reduced space between items */
        min-height: 300px; /* Reduced height for smaller screens */
        max-width: none;
        width: 100%;
    }

    .story-link {
        width: 150px; /* Reduced size for smaller screens */
        height: 150px; /* Reduced size for smaller screens */
    }

    .story-image-container {
        padding: 3px; /* Reduced padding for white border */
    }

    .testimonial-text {
        padding: 20px; /* Reduced padding for smaller screens */
        border-radius: 4px; /* Reduced border-radius */
        font-size: 0.9rem; /* Reduced font size for smaller screens */
    }

    .testimonial-text:before,
    .testimonial-text:after {
        font-size: 3rem; /* Reduced font size for quotes */
    }

    .testimonial-text:before {
        top: -5px; /* Adjust position for smaller screens */
        left: 3px; /* Adjust position for smaller screens */
    }

    .testimonial-text:after {
        bottom: -35px; /* Adjust position for smaller screens */
        right: 3px; /* Adjust position for smaller screens */
    }
    .testimonial-item figcaption {
        display: block;
        max-width: 100%; /* Allow the element to take full width */
        margin: 0; /* Remove auto margin if not needed */
        text-align: center; /* Center-align the text */
        white-space: nowrap; /* Prevent the text from wrapping */
        overflow: visible; /* Allow the overflow to be visible */
        text-overflow: ellipsis;
        padding: 0 10px; /* Add horizontal padding if needed */
        font-size: 20px;
    }

    .testimonial-item .testimonial-text {
        font-size: 0.9rem; /* Adjust font size for smaller screens */
        padding: 20px; /* Adjust padding as needed */
        margin-bottom: 25px;
        /* Other styles */
    }

    .testimonial-item {
        padding: 0; /* Add padding inside the item */
        box-sizing: border-box; /* Include padding in width calculation */
        padding-bottom: 15px;
    }
    .swiper-pagination {
        padding: 15px;
    }
    /* Other styles as needed */
}
.modal-backdrop {
    z-index: -1;
}







/*
  specify the scroll x (or y) with the width (or height) of the images
  In this case, the image dimension is :
  width: 1920px;
  height: 808px;
*/
/*
@keyframes bgScroll {
    0% {
        background-position : 0px 0px
    }
    100% {
        background-position : 0px -808px
    }
}

.scrollingBG {
    display:block;
    width:auto;
    height:100vh;
    background-image:url("https://kalasnikovas.lt/images/bg2.png");
    animation: bgScroll 20s linear infinite;
}*/

.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (for mobile) */
}

/* CSS for the video background */
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop video to cover the container */
}

/* CSS for the content over the video */
.video-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #ffffff;
    text-align: center;
    max-width: 90%;
    max-height: 80%; /* Adjusted height to fit the screen */
    overflow-y: auto; /* Add vertical scrollbar if content overflows */
}

/* Decrease text size for "Reikia pagalbos?" on mobile */

/* Custom CSS for the contact form */

.contact-form {
    width: 400px;
    max-width: 600px; /* Adjust the maximum width as needed */
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    margin-left: auto; /* Center the form horizontally on mobile */
    margin-right: auto;
}

.contact-form h1 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff; /* Label font color */
    text-align: left;
    font-weight: 300;

}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form button[type="button"] {
    background-color: #2f4863; /* Button background color */
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 0.3rem;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    width: 100%;
}

.contact-form button[type="button"]:hover {
    background-color: #0056b3; /* Button hover background color */
}

@media (max-width: 768px) {
    .video-container {
        padding-top: 150%;
    }
    .video-content p {
        display:none;
    }
    .contact-form {
        background: none;
        width: 400px;
        max-width: 90%; /* Adjust the maximum width as needed */
        margin-left: auto; /* Center the form horizontally on mobile */
        margin-right: auto;
    }
    .contact-form .form-group:last-child {
        margin-bottom: 10px; /* Adjust the margin as needed */
    }
    .video-content h1 {
        font-size: 27px; /* Adjust the font size for smaller screens */
    }

    /* Align labels to the left on mobile */
    .contact-form label {
        text-align: left;
        color: #fff;
        font-weight: 300;
    }

    /* Smaller input field heights on mobile */
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        width: 100%;
        padding: 8px; /* Adjust the padding to make the input fields smaller */
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px; /* Adjust the font size for smaller screens */
    }

    /* Decrease space between labels and input fields and button on mobile */
    .contact-form .form-group {
        margin-bottom: 10px; /* Adjust the margin as needed */
    }

    /* Decrease space between input fields and the button on mobile */
    .contact-form button[type="button"] {
        width: 100%; /* Make the button take the full width */
        margin-right: 0; /* Remove right margin */
    }
}

@media (min-width: 769px) {
    .video-container {
        padding-top: 40%; /* Adjust the aspect ratio for desktop */
    }

    /* CSS for the video content on desktop */
    .video-content {
        max-width: 60%; /* Adjust the width for desktop */
        max-height: 80%; /* Adjusted height to fit the screen (for desktop) */
    }
}

.box-title.testimonials-title {
    text-align: center;
    display: block;
    margin-top: 20px;
    margin-bottom: 30px;
}


/* Cookie Consent Popup Styles */
.cookie-consent {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #182a3d;
    color: #fff;
    text-align: center;
    padding: 10px;
    z-index: 9999;
}

.cookie-content {
    max-width: 600px;
    margin: 0 auto;
}

.cookie-consent p {
    margin: 0;
    margin-bottom: 10px;
}

.cookie-consent a {
    color: #fff;
    text-decoration: underline;
}

.cookie-consent button {
    background-color: #182a3d;
    color: #fff;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    border: 1px solid #f2f7ff
}

.cookie-consent button:hover {
    background-color: #051a2d;
    border: 1px solid #fff;
}

.cookie-consent .decline-cookies {
    background-color: #314760;
    color: #dce6ec;
    border: none;
}
.cookie-consent .decline-cookies:hover {
    background-color: #051A2DFF;
    border: none;
}



/* Animation */

/* Common styles for both PC and mobile */
/* List items flying in */
/* Common animations for list items and images */
/* Common animations for list items and images */
/* Common animations for list items and images */
.box-list li,
.jumping-image {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.start-animation .box-list li,
.start-animation .jumping-image {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Robot falling animation for the left column */
.falling-image {
    animation: fall 1s cubic-bezier(1, -0.15, 0.07, 1.55);
}

@keyframes fall {
    0% {
        transform: translateY(-150%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Robot jumping animation for the right column */
@keyframes jump {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-40px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

.start-animation .jumping-image {
    animation: jump 1s cubic-bezier(0.75, 0.84, 0.44, 1);
    animation-fill-mode: both; /* Keeps the final state after animation */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.start-animation .fade-in {
    opacity: 1;
    transform: translateX(0);
}

/* Box title animation */
.box-title {
    opacity: 0;
    transform: translateX(20px); /* Move elements off-screen initially (right to left) */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.start-animation .box-title {
    opacity: 1;
    transform: translateX(0); /* Move elements on-screen when the animation starts */
    transition: opacity 0.5s ease, transform 0.5s ease;
}


/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    /*
    .panel-img {
        width: 120px;
        height: auto;
    }
    .right-column .panel-img {
        height: 110px;
        width: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    */
    .modal-dialog.auth-modal-dialog {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .modal-content.modal-auth {
        height: 100%;
        border-radius: 0;
    }
    /* Mobile-specific list item animations */
    .left-column .box-list li.animate {
        opacity: 0; /* Set initial opacity to 0 */
        transform: translateX(-20px); /* Move items off-screen initially */
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Additional CSS for mobile list items in left column */
    .left-column .box-list li.animate.fade-in {
        opacity: 1; /* Change opacity when the fade-in class is added */
        transform: translateX(0); /* Move items on-screen when the fade-in class is added */
    }

    .left-column .box-list li.animate-on-scroll {
        transform: translateY(0);
        transition: transform 0.5s ease;
    }
}





.panel-img {
    position: relative;
    overflow: hidden;
}

.panel-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent, rgba(255, 255, 255, 0.5));
    opacity: 0;
    pointer-events: none;
    transition: left 2s ease, opacity 2s ease;
}

.panel-img:hover::before {
    left: 100%;
    opacity: 1;
}
.custom-btn.gradient-shine-once {
    background-image: linear-gradient(90deg, #1f3147, #1f3147, #fff);
    background-size: 200% 100%;
    animation: gradientShineOnce 1s linear 1 forwards, revertBackgroundColor 0s 2s forwards; /* Run the animation once and retain the final state, and then revert the background color */
}


@keyframes gradientShineOnce {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0; /* Change to 0 to move from left to right */
    }
}

@keyframes revertBackgroundColor {
    to {
        background-image: none; /* Remove the gradient background */
        background-color: #1f3147; /* Revert to the original background color */
    }
}

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

#overlay div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}




























:root {
    /* Primary color for the header and footer */
    --color-primary-dark: #1f3147;
    /* Secondary background color for card elements */
    --color-secondary: #f2f2f2;
    /* Main accent color for interactive elements */
    --color-accent: #1f3147;
    /* Base color for card backgrounds */
    --color-white: #ffffff;
    /* Primary text color */
    --color-text: #333333;
    /* Border color for card elements */
    --color-border: #efefef;
    /* Status colors */
    --status-new: #3498db;
    --status-in-progress: #f1c40f;
    --status-completed: #2ecc71;
    --status-failed: #e74c3c;
    /* Font stack */
    /*--font-main: 'Roboto', sans-serif;*/
    /* Font families from your website */
    --font-body: 'Roboto', sans-serif;
    --font-title: 'Playfair Display', serif;
    --font-button: 'Montserrat', sans-serif;
    --font-main: 'Roboto', sans-serif;
    /* Font sizing */
    --font-size-title: 1.5em;
    --font-size-large: 1.2em;
    --font-size-regular: 0.99em;
    --font-size-small: 0.92em;
    /* Spacing variables */
    --spacing-very-small: 0;
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --color-background-light: #f9f9f9; /* Lighter background for header */
    --color-icon-accent: #3498db; /* Icon accent color */
    --color-delete-icon: #e74c3c; /* Delete icon color */
    --color-status-indicator: #dddddd; /* Color for the status indicator background */
    --color-delete-icon-hover: #a94442; /* Darker shade for delete icon hover state */
    --font-size-very-small: 0.75em; /* New font size for smaller text */
    --color-text-light: #757575; /* Lighter text color for less important information */
    --padding-details-vertical: 20px;
    --padding-details-horizontal: 16px;
    /* Spacing between each detail item */
    --margin-detail-item: 10px;
}
.my-forms-title {
    display: none;
}
.my-forms-container {
    font-family: var(--font-body);
    background-color: var(--color-white);
    font-family: var(--font-main);
    margin: 0;
    padding: var(--spacing-medium) var(--spacing-large);
    max-width: 1200px;
    margin: 0 auto;
}

.my-forms-title {
    font-family: var(--font-title);
    text-align: center;
    color: var(--color-primary-dark);
    font-size: var(--font-size-title);
    margin-bottom: var(--spacing-large);
}

.form-card {
    max-width: 600px;
    width: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: var(--spacing-large);
    overflow: hidden;
    border: none;
}

.form-header {
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-medium);
    gap: var(--spacing-small);
}

.form-platform-icon i {
    color: var(--color-primary-dark);
    font-size: 1.5em; /* Increased size for better visibility */
}

.form-platform-icon span {
    font-weight: bold;
}

.platform-and-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.platform {

}
.platform-and-status .detail-icon {
    margin-right: 2px;
}
.platform-and-status .platform span {
    font-weight: bold;
    font-size: 20px;
}
.platform-and-status .status-indicator span {
    color: var(--color-text-light);
    font-weight: 400;
}

.form-history .status-and-date {
    display: none;
}

.form-date {
    font-size: var(--font-size-small);
    color: var(--color-primary-dark); /* Lighter color for the date */
    margin-top: 0; /* Smaller margin to bring date closer to status */
}

.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-regular);
    font-weight: bold;
}

/* Colored dot for status */
.status-indicator::before {
    content: '';
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: transparent;
    margin-right: 5px;
}

.status-indicator span {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-primary-dark);
}

.status-0.status-indicator::before { background-color: var(--status-new); }
.status-1.status-indicator::before { background-color: var(--status-in-progress); }
.status-2.status-indicator::before { background-color: var(--status-completed); }
.status-3.status-indicator::before { background-color: var(--status-failed); }

/* Delete button styling */
.delete-action {
    margin-left: auto;
    position: relative;
}

.delete-btn {
    color: var(--color-accent);
    font-size: 1.5em; /* Increased size for better visibility */
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: -27px;
    right: 0;
}

.delete-btn:hover {
    color: var(--color-delete-icon-hover);
}

.form-details {
    background-color: var(--color-background-light);
    padding-top: var(--padding-details-vertical);
    padding-left: var(--padding-details-horizontal);
    padding-right: var(--padding-details-horizontal);
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border: none;
}

.detail-item {
    margin-bottom: var(--margin-detail-item);
    font-size: var(--font-size-regular);
    line-height: 1.4;
    display: flex;
    align-items: center;
}

.form-details p {
    display: flex;
    align-items: center; /* Aligns the icon and text */
    margin: var(--spacing-small) 0; /* Gives space between each detail */
    color: var(--color-text); /* Primary text color for readability */
    font-size: var(--font-size-regular); /* Regular font size for body text */
}

.detail-icon {
    color: var(--color-accent);
    margin-right: var(--spacing-small);
    font-size: 1.2em;
}

.detail-text {
    font-size: var(--font-size-regular);
    color: var(--color-text); /* Ensures consistency in text color */
    line-height: 20px;
}

.detail-text.user-info {
    font-weight: bold; /* Only the name is bold */
}

.detail-text:not(.user-info) {
    font-weight: normal; /* Regular weight for other details */
}

.detail-text.description {
    /*  color: var(--color-text-light);*/
}

/* Reduces the strong emphasis on labels */
.form-details p strong {
    font-weight: normal; /* Normal weight for the text */
    color: var(--color-primary-dark); /* Slightly darker color for contrast */
    margin-right: var(--spacing-small); /* Space between label and value */
}

.fas {
    font-size: var(--font-size-regular); /* Ensures consistent icon size */
}

.form-history {
    background-color: var(--color-white); /* or var(--color-secondary) for a light grey background */
    padding: var(--spacing-medium);
    border-top: 1px solid var(--color-border);
    border: none;
}

.form-history-title {
    color: var(--color-primary-dark);
    font-size: 20px;
    padding-bottom: var(--spacing-small);
    font-weight: bold; /* Make the title stand out */
    white-space: nowrap;
}

.my-forms-history-item {
    padding: var(--spacing-medium) 0;
    display: flex;
    flex-direction: column;
}

.my-forms-history-item:not(:last-child) {
    /* Other styles */
    border-bottom: 1px solid var(--color-border); /* Only add border if not the last item */
}
.my-forms-history-item:last-child {
    padding-bottom: 0;
}

.my-forms-history-date {
    font-size: var(--font-size-small);
    color: var(--color-text-light); /* Light grey for less emphasis */
    margin-bottom: var(--spacing-very-small); /* Add some space between date and subject */
}

.my-forms-history-subject {
    font-size: var(--font-size-regular);
    color: var(--color-primary-dark); /* Slightly darker for importance */
    font-weight: normal;
}

.form-history .header-row {
    display: block;
    text-align: center;
    padding-bottom: var(--spacing-small);
}
.my-forms-history-section {
    display: flex; /* Enables flexbox */
    justify-content: space-between; /* Spreads out the child elements */
    align-items: flex-start; /* Aligns items to the top of the container */

}

.history-items {
    flex: 1; /* Assigns flex-grow value, allowing this column to grow */
    padding-right: 20px; /* Adds some spacing between the columns */
}

.history-img-container {
    /* flex-basis: 50%; *//* Assigns a base width of 50% to the image container */
    /*display: flex;*/
    justify-content: center; /* Centers the image in the container */
    align-items: center;
    margin: auto;
}

.history-img {
    max-width: 100%; /* Ensures the image is not bigger than its container */
    height: auto; /* Keeps the image aspect ratio */
    width: 120px;
    justify-content: end; /* Centers the image in the container */
    align-items: end;
}

@media (max-width: 768px) {
    .my-forms-container {
        padding: var(--spacing-medium);
    }

    .my-forms-title {
        font-size: var(--font-size-large);
    }

    .form-header {
        flex-direction: row;
        justify-content: space-between;
        padding-left: var(--padding-details-horizontal);
        padding-right: var(--padding-details-horizontal);

    }

    .form-platform-icon, .form-date, .status-indicator, .delete-action {
        flex: none; /* Do not grow or shrink */
    }

    .status-indicator {
        font-size: var(--font-size-regular);
        flex-direction: row; /* Ensure status and date are in a row */
        justify-content: start;
    }

    .form-date {
        font-size: var(--font-size-very-small); /* Use the very small font size */
    }

    .delete-btn {
        padding: var(--spacing-small); /* Smaller padding for easier touch */
        padding: 0;
        font-size: var(--font-size-large);
    }

    .form-platform-icon {
        font-size: var(--font-size-small);
    }

    .form-platform-icon i, .delete-btn i {
        font-size: var(--font-size-small);
    }

    .form-details {
        padding-top: var(--padding-details-vertical);
        padding-bottom: var(--padding-details-vertical); /* Same padding at the bottom for symmetry */
        padding-left: var(--padding-details-horizontal);
        padding-right: var(--padding-details-horizontal);
        border-radius: 29px;
    }

    .form-details p, .my-forms-history-date, .my-forms-history-subject {
        font-size: var(--font-size-regular);
    }

    .form-details i.detail-icon {
        font-size: var(--font-size-large);
    }

    /* Adjust the history title size for mobile */
    .form-history-title {
        font-size: 20px;
    }
    .form-details p {
        font-size: var(--font-size-small); /* Smaller font size for mobile readability */
    }

    .detail-item {
        margin-bottom: var(--margin-detail-item);
    }

    .detail-icon {
        font-size: 1em; /* Smaller icon size on mobile for proportion */
    }

    .detail-text {
        font-size: var(--font-size-very-small);
    }
    .form-history {
        padding-top: var(--padding-details-vertical);
        padding-bottom: var(--padding-details-vertical); /* Same padding at the bottom for symmetry */
        padding-left: var(--padding-details-horizontal);
        padding-right: var(--padding-details-horizontal);
    }

    .my-forms-history-date, .my-forms-history-subject {
        font-size: var(--font-size-small); /* Smaller font size for mobile readability */
    }
    .my-forms-history-item:first-child {
        padding-top: 0;
    }

}
@media (max-width: 370px) {
    .form-header {
        padding: var(--spacing-small);
    }

    .form-platform-icon i, .delete-btn {
        font-size: 1.2em; /* Slightly reduced size for very narrow screens */
    }

    .status-indicator {
        font-size: var(--font-size-small);
    }

    .form-date {
        font-size: var(--font-size-very-small); /* Smaller font for narrow screens */
    }

    .history-img {
        width: 100px;
    }
}

.menu-action {
    position: relative; /* This ensures the menu is positioned relative to the button */
    display: inline-block; /* Keeps the structure inline */
}

.menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px; /* Increase the padding to increase the clickable area */
    border-radius: 4px; /* Optional: rounds the corners of the clickable area */
    outline: none; /* Removes the outline */
}

.menu-btn i {
    font-size: 20px;
}

.menu-btn:focus {
    outline: none; /* Ensures no outline on focus */
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -146px; /* Adjust as needed */
    background-color: #f9f9f9;
    min-width: 160px; /* Minimum width of the dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-item {
    padding: 10px 15px; /* Adds padding inside the dropdown links */
    display: flex; /* Uses flexbox for alignment */
    align-items: center; /* Aligns the icon and text vertically */
}

.dropdown-item i {
    margin-right: 8px; /* Adds a little space between the icon and text */
}

.dropdown-menu .dropdown-item {
    padding: var(--spacing-small);
    display: block;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--color-secondary);
}

.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
    display: block; /* Show the dropdown */
}

@media (max-width: 768px) {
    .dropdown-menu {
        right: auto;
        left: -146px;
        top: 38px;
    }
}

.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.form-list {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.list-header {
    cursor: pointer;
    /* Add more styles as needed for the header */
}

.list-header .toggle-icon {
    float: right; /* Position the icon on the right */
    /* Add more styles as needed for the toggle icon */
}

.form-content {
    transition: all 0.3s ease; /* Smooth transition for the collapse/expand effect */
}

.list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.list-header .fullname {
    /* Ensure the title doesn't get squished or overflow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-header .form-date {
    margin-left: auto; /* Pushes the date to the right */
}

.list-header .toggle-icon {
    /* Add padding for clickable area and cursor pointer */
    padding: 0 10px;
    cursor: pointer;
}

.list-header .form-actions {
    /* If you want the actions to be part of the header inline */
    display: flex;
    align-items: center;
}

/* You may need to adjust checkbox alignment */
.checkbox {
    margin-right: 10px; /* Add some spacing */
}

.form-list .form-card {
    margin: 0;
}
.list-header h3 {
    font-size: 1rem;
}

.fullname, .form-date {
    margin-right: 10px;
}

.toggle-icon {
    margin-right: 20px;
}

/* Custom checkbox styles */
.custom-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.custom-checkbox .checkbox {
    opacity: 0;
    position: absolute;
}

.custom-checkbox .checkmark {
    display: block;
    width: 16px;
    height: 16px;
    background: #eee;
    position: relative;
}

.custom-checkbox .checkbox:checked + .checkmark {
    background-color: #2196F3;
}

.custom-checkbox .checkmark::after {
    content: '';
    position: absolute;
    display: none;
}

.custom-checkbox .checkbox:checked + .checkmark::after {
    display: block;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-list  h3, .form-list  .form-date {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 768px) {

    .form-date, .toggle-icon, .custom-checkbox {
        margin-top: 10px;
    }
}
.form-container h2 {
    font-size: 1.2rem;
}




.language-switcher {
    display: inline-block;
}
.language-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background-color: transparent;
    padding: 5px 10px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
    cursor: pointer;
    outline: none; /* Remove outline when focused */
}

/* Style the arrow */
.language-dropdown:after {
    content: '\25BC'; /* Unicode character for down arrow */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

/* Adjust size for mobile devices */
@media only screen and (max-width: 767px) {
    .language-dropdown {
        font-size: 12px;
        padding: 4px 8px;
    }
}






button:focus {
    outline: none;
}