:root {
    --primary: {{ env('DOMAIN_CLIENT_PRIMARY_COLOR') }};
    --secondary: {{ env('DOMAIN_CLIENT_SECONDARY_COLOR') }};
    /* --URL_BG: url("@php echo $url @endphp"); */
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}


body {
    font-family: "Roboto", sans-serif !important;
}

.swal2-popup {
    border-radius: 32px !important;
}

.border-link {
    border-bottom: 1px solid #E1E1E1;
    border-top: 1px solid #E1E1E1;
}

.w-80 {
    width: 80% !important;
}

.border-select {
    border-radius: 32px;
    border: 1px solid #E1E1E1;
    padding: 10px 0;
    display: flex;
    align-items: center;
    width: 100px;
}

.border-select-mobile {
    border-radius: 32px;
    border: 1px solid #E1E1E1;
    padding: 12px 0;
    display: flex;
    align-items: center;
    width: 100%;
}

.text-link-a {
    color: #2F81BF;
    text-decoration: underline;
    font-weight: 500;
}

.text-link-a:hover {
    text-decoration: underline !important;
    font-weight: 700 !important;
}

.text-link {
    color: #04646F!important;
}

.main-header{
    background-color: var(--primary) !important;
}

.aside_{
    width:100%; margin-top: -200px; height: 440px;
}

.welcome{
    margin-top: -100px;
}

.header {
    background-color:#FFFFFF; 
    z-index: 99;  
    padding: 16px 20px !important;
    height: 85px;
    border-radius: 48px; 
}

.header-mobile {
    background-color:#FFFFFF;  
    padding: 0 25px; 
    border-radius: 56px; 
    height: 64px;
}

.menu-mobile {
    display:none;
}

.section-one {
    background-image:url('/images/landing/background-section-one.png');
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    height: 664px;
}

.px-9 {
    padding-left:  9rem !important;
    padding-right: 9rem !important;
}

.px-7 {
    padding-left:  7rem !important;
    padding-right: 7rem !important;
}

.pt-2L {
    padding-top: 2rem!important;
    padding-bottom: 2rem!important;
}

.text-navbar {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    color: #1E1E1E!important;
}

.text-navbar:hover {
    color: var(--secondary) !important;
    font-weight: 700;
}

.button-contact {
    background: #145086;
    color:#0EE7D8;
    padding: 16px 24px 16px 24px;
    border-radius: 32px;
    border: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    width: 143px;
}

.button-contact:hover {
    background-color:#102741;
}

.section-title {
    margin-top:60px;
    margin-bottom:90px;
}

.container-title {
    display:flex;
    justify-content: center;
}

.container-title h1 {
    color: #3DFFDA;
    font-size: 48px;
    font-weight: 900;
    line-height: 56px;
    text-align: center;
    width: 817px;
}

.container-title p  {
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
    margin-top: 30px;
    width: 817px;
}

.container-card {
    display: flex;
    justify-content:center;
}

.card-change {
    width: 85%;
    padding: 40px;
    box-shadow: 0px 2px 56px 0px #00000029;
    border-radius: 24px;
    margin-top: -130px;
    background-color: #FFFFFF;
}

.label-input {
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: #828282;
    margin-bottom:20px;

}

.card-change span {
    font-size: 16px;
    font-weight: 600;
    line-height: 50px;
    text-align: left;
    color: #00ACB5;
}

.section-card-II {
    display: flex;
    margin-top:20px;
    flex-wrap: wrap; 
}

.section-card-II p {
    width: 65%; 
    font-size: 12px;
    font-weight: 400;
    line-height: 14.06px;
    text-align: left;
    color: #828282;
    order: 1;
}

.container-button-card {
    width: 35%;
    display: flex;
    justify-content:right;
    order: 2;
}

.only-desktop {
    display: block;
}

.only-mobile {
    display: none;
}

.card-conectando {
    width: 80%;
    display:flex;
    flex-wrap: wrap;
    margin-top: 120px;
    align-items: center;
}

.conectando-image {
    width: 50%;
}

.conectando-text {
    width: 50%;
}

.subtitle-landing {
    font-size: 40px;
    font-weight: 900;
    line-height: 46.88px;
    color: #00727C;
    margin-bottom:20px;
}

.p-normal {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom:20px;
}

.text-gris-1 {
    color:#1E1E1E;
} 

.text-white {
    color:#FFFFFF;
}

.card-elegirnos {
    width: 80%;
    display:flex;
    flex-wrap: wrap;
    margin-top:60px;
    align-items: center;
    gap: 8px;
}

.card-elegirnos h2 {
    width: 100%!important;
    margin-top:60px;
}

.card-experiencia {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 30%;
    height: 400px;
    border-radius:24px;
    background-image: url('/images/landing/background-experiencia-desktop.png');
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    align-items: end;
    padding:0px 24px 32px 24px;
}

.card-seguridad {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 30%;
    height: 400px;
    background-image: url('/images/landing/background-seguridad-desktop.png');
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    padding: 32px 24px 32px 24px;
    border-radius:24px;
}

.card-innovacion {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 38%;
    height: 400px;
    background-image: url('/images/landing/background-innovacion-desktop.png');
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    padding:0px 24px 32px 24px;
    border-radius:24px;
}

.card-gestion-fondos {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-image: url('/images/landing/background-gestion-fondos.png');
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    width: 65%;
    height: 400px;
    border-radius: 24px;
    padding: 32px 24px 32px 24px;
}

.card-gestion-presencia {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-image: url('/images/landing/background-presencia.png');
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    width: 34%;
    height:400px; 
    border-radius:24px;
    padding: 0px 24px 32px 24px;
}

.subtitle-h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.13px;
}

.text-congress-blue {
    color:#2F81BF;
}

.text-atoll {
    color:#00727C;
}

.p-elegirnos {
    font-size: 16px;
    font-weight: 400;
    line-height: 18.75px;
}

.linea-separation {
    display:none;
}

.conectando-image-2 {
    width: 50%;
    text-align:right;
}

.span-transacciones {
    padding: 8px 16px 8px 16px;
    border-radius: 8px;
    border: solid 1px #2F81BF;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
}

.accordion-button {
    font-size:16px;
    border-radius: 8px !important;
}

.accordion-item {
    border: none;
}

.accordion-header {
    border: solid 1px #E1E1E1;
    margin-bottom: 20px;
    border-radius: 8px;
}

.accordion-body {
    padding: 0 0 1.5rem 0 !important;
}

.accordion-button:not(.collapsed) {
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: #2F81BF;
    background-color: white;
}

.accordion-button:active {
    background-color:#FFFFFF;
    color:#2F81BF;
}

.card-section-compromiso {
    display:flex;
    background: linear-gradient(to right, #00ACB5, #0EE7D8, #3DFFDA);
    align-items:center; 
    padding: 96px 0px 96px 0px;
    border-radius: 24px;
    margin-top:60px;
    flex-wrap: wrap;
}

.section-title-compromiso {
    width: 50%;
    display:flex;
    justify-content:center;
}

.section-title-compromiso h2 {
    max-width: 400px;
}

.section-desc-compromiso {
    width: 50%;
}

.section-desc-compromiso p {
    font-size: 16px;
    line-height: 24px;
    padding-right: 120px;
}

.card-section-descubre {
    width: 60%;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 350px;
}

.image-descubre {
    width: 400px;
    margin: auto;
}

.card-section-descubre p {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    margin-bottom:40px;
    margin-top:40px;
}

.card-section-descubre span {
    font-weight: 600;
}

.footer-landing {
    background-color:#00727C;
}

.card-form {
    display: flex;
    width: 100%;
    border-radius: 24px;
    background-color:#FFFFFF;
    box-shadow: 0px 2px 56px 0px #00000029;
    align-items:center;
    margin-top: -300px;
}

.card-form-top0 {
    display: flex;
    width: 100%;
    border-radius: 24px;
    background-color:#FFFFFF;
    box-shadow: 0px 2px 56px 0px #00000029;
    align-items:center;
    margin-top: 0px;
}

.container-img-form {
    width: 34%;
}

.container-form-landing {
    width: 66%;
    padding: 56px 48px 56px 48px;
}

.container-form-landing h2 {
    margin-top:20px;
}

.form-control {
    border: 1px solid #E1E1E1;
    border-radius: 8px;
    font-size: 16px;
    padding-left: 10px;
    height: 48px;
}

.form-control::placeholder {
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    opacity: 1;
    color: #1E1E1E;
}
   
.form-control:focus {
    box-shadow: none;
    border-bottom-color: #E1E1E1;
    border: 1px solid #E1E1E1 !important;
}

.form-control-contact-us {
    border: none !important;
    border-bottom: 1px solid #E1E1E1 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    padding-left: 0 !important;
}

.form-control-contact-us:focus {
   border: none !important;
   border-bottom: 1px solid #E1E1E1 !important;
   border-radius: 0 !important;
   font-size: 16px !important;
   padding-left: 0 !important;
}

.text-gray-select {
    color: #1E1E1E;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    display: flex;
    justify-content: start;
    align-items: center;
}

.form-select {
    border-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 48px !important;
}

.form-select:focus, .form-select-full:focus {
    border-color: #E1E1E1 !important;
}

.form-select-full {
    border-radius: 8px !important;
    height: 48px !important;
}

.form-select-full span {
    opacity: 1 !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    color: #1E1E1E;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:hover{
    color: white !important;
    background-color: var(--secondary)!important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    color: #60666e94!important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    background-color:  #60666e94!important;
    color: white !important;
}

.container-form-landing button {
    width: 100%;
}

.only-mobile {
    display:none;
}

.img-form-landing {
    width: 100%;
}

.footer-row {
    margin-top: 80px;
}

.logo-footer {
    width: 221px;
}

.logo-poland {
    margin-top:20px;
    width: 241px;
}

.links-footer {
    display:flex;
    justify-content:right;
    gap:16px;
}

.links-footer-a, .follow {
    color:#FFFFFF;
    font-size:16px;
    line-height:16px;
    font-weight: 400;
    text-decoration:none!important;
}

.links-footer-a:hover {
    color:#FFFFFF;
    font-weight: 700;
}

.redes {
    justify-content: right;
    gap: 16px;
    margin-top: 20px;
    align-items: center;
}

.img-redes {
    width: 40px;
}

.order-col-1 {
    order:1;
}

.order-col-2 {
    order:2;
}

.background-services {
    background-image:url('/images/landing/background-2.png');
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
}

.flex-container {
    display: flex;
    flex-direction: column;
}

.input-group-append {
    min-width: 140px;
}

@media (max-width: 1024px){
    .aside_ {
        width:100%; margin-top: 0px;  height: 300px;
    }

    .welcome {
        margin-top: 0px;
    }

    .menu-desktop {
        display:none;
    }

    .menu-mobile {
        display: block;
    }

    .section-one {
        background-image:url('/images/landing/background-sectione-mobile.png');
    }

    .px-9 {
        padding-left: 1.5rem!important;
        padding-right: 1.5rem!important;
    }

    .pt-2L {
        padding-top: 1rem!important;
        padding-bottom: 1rem!important;
    }

    .container-title h1 {
        width: 100%;
        font-size: 32px;
        line-height: 40px;
    }

    .container-title p {
        width: 100%;
        font-size:16px;
        line-height:24px;
        margin-top: 15px;
    }

    .card-change {
        width: 100%;
        margin-top: -180px;
    }

    .section-card-II p {
        width: 100%;
        order: 2;
        margin-top:20px;
    }

    .container-button-card {
        width: 100%;
        justify-content:center;
        order: 1;
    }

    .only-desktop {
        display:none;
    }

    .only-mobile {
        display:block;
    }
    
    .input-group-append {
        margin-bottom: 20px!important;
        min-width: 130px;
    }

    .card-change span {
        line-height: 30px;
    } 
    
    #rateClear {
        line-height: 30px;
        padding: 0;
        top: 0;
        position: absolute;
        right: 5%;
    }

    .width-button-mobile {
        width: 100%!important;
    }

    .card-conectando {
        width: 100%;
        margin-top: 30px;
    }

    .conectando-image {
        width: 100%;
        text-align:center
    }

    .img-width {
        width: 100%!important;
        margin-bottom: 20px;
    }

    .conectando-text {
        width: 100%;
    }

    .card-elegirnos {
        width: 100%;
        margin-top:0px;
    }

    .card-experiencia {
        width: 100%;
        height: 240px;
    }

    .card-seguridad {
        width: 100%;
        height: 240px;
    }

    .card-innovacion {
        width: 100%;
    }

    .card-elegirnos h2 {
        text-align:center!important;
        margin-top:0px;
    } 

    .subtitle-landing {
        font-size:32px;
        line-height:37px;
    }

    .linea-separation {
        display:block;
        border: 1px solid #E1E1E1;
        margin: 30px 0px;
    }

    .card-gestion-fondos {
        width: 100%;
    }

    .card-gestion-presencia {
        width: 100%;
        height: 240px;
    }

    .conectando-image-2 {
        width: 100%;
        text-align:center;
    }

    .container-span {
        text-align:center;
    }

    .section-title-compromiso {
        width: 100%;
    }

    .section-desc-compromiso {
        width: 100%;
    }

    .section-desc-compromiso p {
        padding: 0px;
    }

    .card-section-compromiso {
        padding: 40px 24px 40px 24px;
        border-radius: 24px;
        gap:16px;
    }

    .card-section-descubre {
        width: 100%;
        margin-top: 40px;
        margin-bottom: 310px;
    }

    .card-section-descubre p {
       font-size:16px; 
       line-height:24px;    
    }

    .image-descubre {
        width: 330px;
    }

    .card-form {
        flex-wrap:wrap;
    }

    .card-form-top0 {
        flex-wrap:wrap;
    }

    .container-img-form {
        width: 100%;
    }

    .container-form-landing {
        width: 100%;
        padding: 40px 24px 40px 24px;
    }

    .img-form-landing {
        width: 100%;
    }

    .only-mobile {
        display:block;
    }

    .order-col-1 {
        order:2;
        text-align:center;
    }

    .order-col-2 {
        order:1;
    }

    .links-footer {
        flex-wrap:wrap;
        justify-content:center;
    }

    .redes {
       margin: auto;
    }

    .contact-mobile-footer {
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
        color: #2F81BF;

    }

    .background-services {
        background-image: none;
    }

    .flex-container {
        flex-direction: column;
    }
    
    .flex-container .links-footer {
        order: 2;
    }
    
    .flex-container .redes {
        order: 1;
    }

    .footer-row {
        margin-top: 50px;
    }

}

.grecaptcha-badge {
    bottom: 90px !important;
}