.form-container {
        position: relative;
        width: 65%;
        min-width: 300px;
        /* max-width: 1000px; */
        max-width: 100%;
        padding: 10px 0;
        overflow: hidden;

        padding: 10px 20px !important;
        /* margin-top: 50px; */
        margin-top: clamp(10px, 2vh + 10px, 50px);

        backdrop-filter: blur(2px) saturate(200%);

        border-radius: 10px;
        border: 1px solid #fafafa;
        /* border: 1px solid #07d6ff; */
        text-decoration: none;
        box-shadow:
            0 10px 15px rgba(2, 215, 187, 0.3),
            inset 0 5px 5px rgba(2, 131, 191, 0.2);
        height: 610px;

        background: linear-gradient(90deg, rgba(213, 249, 255, 0.1), rgba(120, 191, 248, 0.1));

    }

    #contactForm {
        font-weight: bold;
        /* color: #35497c; */
        color: #000048;
        color: #0652cc;
        /* #35497c;#35497c */
    }

    label {
        display: block;
        margin-top: 15px;
        font-family: 'Rajdhani';
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    input,
    textarea {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 5px;
        /* border-color: gray !important; */
        border: 1px solid #ccc;
        color: #35497c;
    }

    /* Estilo del placeholder (texto tenue) */
    input::placeholder {
        color: #bbbbbb;
        /* gris tenue */
        opacity: 1;
        /* asegura que sea visible igual en todos los navegadores */
    }

    /* Estilo del placeholder (texto tenue) */
    textarea::placeholder {
        color: #b9b8b8;
        /* gris tenue */
        opacity: 1;
        /* asegura que sea visible igual en todos los navegadores */
    }

    /* Cuando el input tiene foco */
    input:focus {
        border-color: #007bff;
        /* cambia el color del borde al enfocar */
        outline: none;
    }

    textarea:focus {
        border-color: #007bff;
        /* cambia el color del borde al enfocar */
        outline: none;
    }

    button {
        margin-top: 20px;
        padding: 10px 15px;
    }

    .message {
        margin-top: 20px;
        font-weight: bold;
        color: #0652cc;
    }

    .message.success {
        color: green;
    }

    .message.error {
        color: red;
    }

    .grecaptcha-badge {
        /* margin-right: 35px; */
        /* position: fixed !important; */
        /* bottom: 10px !important; */
        /* right: 12px !important; */
        /* top: auto !important; */
        /* height: 60px !important;
        width: 70px !important; */
        transform: scale(0.85);
        /* position: 0px !important;
        right: -20px !important;
        bottom: 20px !important; */
    }

    .inicio {
        /* opacity: 0; */
    }

    @media (max-width: 1200px) {
        .grecaptcha-badge {
            transform: scale(0.6);
            right: -50px !important;
        }
    }

    @media (max-width: 900px) {
        .grecaptcha-badge {
            height: 60px !important;
            width: 70px !important;
            right: 8px !important;
            bottom: 20px !important;
            transform: scale(0.9);
        }

        .inicio {
            display: none;
        }
    }

    @media (max-width: 750px) {
        .grecaptcha-badge {
            height: 60px !important;
            width: 70px !important;
            right: 8px !important;
            bottom: 20px !important;
            transform: scale(0.8);
        }
    }

    @media (max-width: 580px) {
        .grecaptcha-badge {
            height: 60px !important;
            width: 70px !important;
            right: 0px !important;
            bottom: 10px !important;
            transform: scale(0.4);
        }
    }

    .button-form {
        object-fit: cover;
        width: 45%;
        height: 100%;
        padding: 10px;
        border-radius: 13px;

        background: linear-gradient(to bottom right, transparent,
                rgba(53, 73, 124, 0.8),
                rgba(0, 0, 72, 0.9));

        /* box-shadow: 0 5px 22px 0 rgba(251, 251, 252, 0.8) !important; */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(90px);
        border: 1px solid rgba(255, 255, 255, 0.78);
        /* display: flex; */
        justify-content: center;
        align-items: center;
        font-weight: bold;
        color: #fff;
        font-size: 21px;


        box-shadow:
            0 10px 15px rgba(112, 191, 255, 0.5),
            inset 0 5px 5px rgba(81, 249, 255, 0.9);
        /* border-color: #000048; */
        /* backdrop-filter: blur(15px) saturate(150%); */

        /* border-radius: 10px; */
        /* border: 1px solid #07d6ff; */
        text-decoration: none;
        background: linear-gradient(90deg, #1a243d, #35497c, #1a243d);

        /* linear-gradient(90deg, #30a2bf 0%, #2f5a76 100%)!important */
        box-shadow:
            0 7px 10px rgba(112, 191, 255, 0.9),
            inset 0 13px 23px rgba(81, 249, 255, 0.7);
        box-shadow:
            0 5px 13px rgba(81, 69, 255, 0.9),
            inset 0 8px 15px rgba(41, 116, 255, 0.7);

    }


    .message {
        margin-top: 20px;
        font-weight: bold;
    }

    .success {
        color: rgb(11, 160, 160);
        font-weight: normal !important;
        font-family: 'Calibri';
        font-size: 18px;
        font-weight: 700;
        font-style: normal;
        font-display: swap;
             border: 1.5px solid #69ffa7 !important;
             background: linear-gradient(90deg, #ffffff, #eafff1, #dbffeb);
   
    }

    .error {
        color: rgb(247, 33, 33);
        font-weight: normal !important;
        font-family: 'Calibri';
        font-size: calc(0.5vw + 0.5rem);
        font-weight: 700;
        font-style: normal;
        font-display: swap;
         border: 1.5px solid #ff6969 !important;
          background: linear-gradient(90deg, #ffffff, #ffeaea, #ffdbdb);
    }

    .message-container {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .status-message {
        margin-top: 10px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
        overflow: hidden;
        border-radius: 10px;
        padding: 5px;
        display: inline-block !important;
    }

    .spinner {
        border: 4px solid #ccc;
        border-top: 4px solid #333;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
        color: #0652cc !important;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .hidden {
        display: none;
    }