:root {
    --clr-primary: #1D2543;
    --clr-accent: #1595F3;
    /* --clr-secundary: #ffffff; */
    --ff-primary: 'Poppins', sans-serif;
}


/* *,
*::before,
*::after {
    box-sizing: border-box;
} */

body {
    /* background-image: linear-gradient(to right, #1D2543, #0D111D, #1D2543); */
    background-color: #f6faff !important;
    font-family: var(--ff-primary);
}

/* Estilos css de nuevo formato de contacto */
input[type=submit] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    /* background-color: #09A7F6; */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.2vw;
}
.pageContact {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 3% 0;
}
.containerContact {
    display: flex;
    flex-direction: row;
    background-color: #002b40;
    width: 90%;
    height: auto;
    padding: 2rem 3rem;
    border-radius: 20px;
}
.ctitulo-agenda {
    font-weight: 700;
    font-size: 30px;
    line-height: 37px;
    /* text-align: left; */
    color: #fff;
    /* color: #091951; */
    white-space: break-spaces;
    margin-block-start: 2rem;
    margin-block-end: 2rem;
}
.subContainerFormulario {
    background: rgba(1, 64, 105, 0.4);
    box-shadow: inset 30.6667px -30.6667px 30.6667px rgba(165, 165, 165, 0.031),
        inset -30.6667px 30.6667px 30.6667px rgba(255, 255, 255, 0.031);
    backdrop-filter: blur(4.90667px);
    border-radius: 10px;
    padding: 1rem 1rem;
}
.rowIn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.containerINP li {
    /* display: flex;
    flex-direction: column; */
    width: 95%;
    margin: 1% 0;
}
.containerINP {
    width: 95%;
}
.containerINP li::before {
    content: "\2022";
    color: #63952c;
    font-weight: 900;
    display: inline-block;
    width: 1rem;
    margin-left: -1em;
}
.titleInputsForms {
    font-weight: 500;
    font-size: 20px !important;
    line-height: 24px;
    letter-spacing: 0.1em;
    color: #fff;
}
.subsInContact {
    font-weight: 500;
    color: #fff !important;
    font-size: 20px !important;
    background: none;
    text-align: left;
    border: none;
    border-radius: 0 !important;
    border-bottom: 2px solid #96e0d1;
    width: 100%;
    margin: 10px 0 !important;
    padding: 0;
    height: 30px !important;
}
.subsInContact::placeholder {
    font-weight: 500;
    font-size: 20px !important;
    line-height: 20px;
    color: #fff;
}
.alignbutton {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.sBtn {
    background-color: #0097c6;
    color: #fff;
    padding: 0.4vw 2vw;
    margin: 0;
    width: 234px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.3vw;
    text-align: center;
}
.containerImg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
.containerContact {
    flex-direction: column;
}
.ctitulo-agenda {
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}
/* .ctitulo-agenda {
    font-size: 1.5rem;
    text-align: center;
} */
.subContainerFormulario {
    margin: 5% 0;
}
.containerINP {
    padding-inline-start: 5px;
}
.containerINP > li,
.titleInputsForms {
    font-size: 1.55rem !important;
}
.containerINP li::before {
    font-size: 1.75rem;
}
.containerImg {
    display: none;
    width: 100%;
}
.containerImg > img {
    background-size: contain;
}
.sBtn {
    font-size: 1.375rem !important;
    font-weight: 500;
    padding: 1rem 0;
    width: 80%;
    line-height: 27px;
}
}

@media screen and (min-width: 769px) and (max-width: 950px) {
    .containerImg {
        margin-left: 2rem;
    }
    }

@media screen and (min-width: 769px) and (max-width: 1024px) {
.ctitulo-agenda {
    font-size: 1.75rem;
    text-align: center;
}
.sBtn {
    text-align: center;
    font-size: 1.375rem !important;
    font-weight: 500;
    padding: 1rem 0;
    width: 80%;
    line-height: 27px;
}
}

@media screen and (min-width: 1281px) {
.containerINP li::before {
    font-size: 1.5625vw;
}
.containerINP {
    padding-inline-start: 1vw;
}
.titleInputsForms {
    font-size: 1.5625vw !important;
    margin-left: 1vw;
}
.subsInContact::placeholder,
.subsInContact {
    font-size: 1.5625vw !important;
    padding: 3% 0;
}
}

@media screen and (min-width: 1500px) {
.ctitulo-agenda {
    font-size: 2.125vw;
    line-height: 2.625vw;
    margin-block-start: 1.825vw;
    margin-block-end: 1.825vw;
}
.containerImg > img {
    width: 80%;
    background-size: contain;
}
.sBtn {
    width: 18.2815vw;
    padding: 1vw 0vw;
    border-radius: 2.3vw;
}
}
/* Termina estilos de nueva sección de contactos */

.container-form {
    padding-top: 6%;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.imgIzq {
    margin: 10% 0 10% 10%;
    max-width: 45%;
    border-radius: 2rem 0 0 2rem;
}

.imgContact {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}

.container-form-data {
    width: 100%;
    margin: 10% 10% 10% 0;
    padding: 2%;
    background: #ffffff0d;
    backdrop-filter: blur(.5rem);
    border-radius: 0 2rem 2rem 0;
}

.datos {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    color: var(--clr-accent);
    font-family: var(--ff-primary);
    text-align: center;
    margin-bottom: 1%;
    font-size: 1.5rem;
}

.textos {
    /* color: var(--clr-secundary) !important; */
    font-family: var(--ff-primary);
    font-size: 1rem;
    padding: 5%;
    line-height: 1.5;
}

input,
.eventInfo {
    color: var(--clr-secundary);
    background-color: transparent;
    font-family: var(--ff-primary);
    text-align: left;
    width: 90%;
    padding: 2%;
    margin: 0 auto;
    border: transparent;
    box-sizing: border-box;
    border-radius: 0;
}

.invalid {
    background-color: white;
    color: red;
    width: 95%;
    padding: .5rem;
    border-radius: 1rem;
    display: none;
    justify-content: center;
    text-align: center;
    margin: 5% auto !important;
}

textarea {
    padding: 2%;
    margin: 0 auto;
    width: 90%;
    border: transparent;
    border-radius: .5rem;
    box-sizing: border-box;
    background-color: transparent;
    /*   color: white; */
    resize: none;
    display: inline-block;
    height: 4rem;
    font-family: var(--ff-primary);
    font-size: .8rem;
}

.register {
    width: 90%;
    background-color: var(--clr-accent);
    color: var(--clr-secundary);
    padding: .5rem 0;
    margin: 10% 0;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    margin-left: 50%;
    transform: translateX(-50%);
    font-family: var(--ff-primary);
    font-size: 1rem;
}

.linea {
    width: 90%;
    background-color: var(--clr-accent);
    height: .5vh;
    align-self: center;
}

#txtName:hover~.lineaName,
#txtName:focus~.lineaName,
#txtPhone:hover~.lineaPhone,
#txtPhone:focus~.lineaPhone,
#txtEmail:hover~.lineaEmail,
#txtEmail:focus~.lineaEmail,
#txtCompany:hover~.lineaCompany,
#txtCompany:focus~.lineaCompany,
#txtMessage:hover~.lineaMessage,
#txtMessage:focus~.lineaMessage {
    width: 100%;
    transition: 0.2s ease all;
}

.register:hover,
.register:focus {
    cursor: pointer;
    background-color: #121629;
    box-shadow: 2px 2px 10px 10px white;
}

@media (max-width: 60em) {
    .container-form {
        flex-direction: column !important;
        justify-content: center !important;
    }
    .imgIzq {
        max-width: 90%;
        margin: 15% 5% auto 6% !important;
        border-radius: 2rem;
    }
    .imgContact {
        border-radius: 2rem;
    }
    .container-form-data {
        max-width: 90%;
        margin: 5% auto !important;
        border-radius: 2rem;
    }
}

@media screen and (max-width: 960px) {
    .imgIzq {
        order: 2;
    }
    .container-form-data {
        order: 0;
        margin-top: 70px!important;
    }
}


/* clases para la pagina nueva de contact us */

.formContainer {
    padding: 6em 0 3em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.imgLeftCard {
    width: 40%;
    height: auto;
    text-align: center;
}

.imgLeftCard img {
    width: 90%;
    height: auto;
}

.formDisplay {
    width: 40%;
    height: auto;
    box-shadow: 4px 4px 5px 0px rgb(171 157 157 / 75%);
    -webkit-box-shadow: 4px 4px 5px 0px rgb(171 157 157 / 75%);
    -moz-box-shadow: 4px 4px 5px 0px rgba(171, 157, 157, 0.75);
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.formulario_registro {
    width: 80%;
    padding: 2em 0;
}

h2 {
    text-align: left;
    font-weight: 400;
    color: #01135d;
}

.textos {
    color: #01145e;
    padding: 5% 0;
}

input,
.eventInfo {
    width: 100%;
    /* padding: 5% 0 2%; */
    padding: 2% 0;
    font-size: 1rem;
}

.linea {
    width: 100%;
    background: #1B226F;
}

::placeholder {
    color: #1B226F;
}


/* .lineaPhone {
    height: 0.8vh;
} */

textarea {
    width: 100%;
    /* padding: 5% 0 2%; */
    padding: 2% 0;
    font-size: 1rem;
}

.register {
    margin: 6% auto;
    transform: none;
    width: 100%;
    max-width: 225px;
    color: #fff;
    background: #63952C;
}

@media only screen and (min-device-width: 600px) and (max-device-width: 900px) {
    .formContainer {
        display: flex;
        flex-direction: row;
        padding: 1em 0 3em;
        align-items: center;
        justify-content: center;
    }
    .imgLeftCard {
        width: 46%;
    }
    .formDisplay {
        width: 46%;
    }
    .imgLeftCard img {
        width: 90%;
    }
    input,
    .eventInfo,
    textarea {
        font-size: 14px;
    }
    #txtEmail {
        margin: 0;
        width: 100% !important;
        font-size: 14px !important;
    }
    .formulario_registro {
        width: 70%;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 599px) {
    .formContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1em 0 3em;
    }
    .imgLeftCard,
    .formDisplay {
        width: 90%;
    }
    .imgLeftCard img {
        width: 100%;
    }
    input,
    .eventInfo,
    textarea {
        font-size: 14px;
    }
    #txtEmail {
        margin: 0;
        width: 100% !important;
        font-size: 14px !important;
    }
}