@charset "UTF-8"; @font-face {
    font-family: "solution-vcard-icons";
    src: url("fonts/solution-vcard-icons.eot");
    src: url("fonts/solution-vcard-icons.eot?#iefix") format("embedded-opentype"), url("fonts/solution-vcard-icons.woff") format("woff"), url("fonts/solution-vcard-icons.ttf") format("truetype"), url("fonts/solution-vcard-icons.svg#solution-vcard-icons") format("svg");
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0px;
}

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

.top {
    background-color: #056c9c;
    height: 250px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.top-child {
    display: flex;
    background-color: #056c9c;
    height: 190px;
    min-width: 350px;
    max-width: 350px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.23);
    flex-direction: column;
    justify-content: flex-end;
}

.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.logo {
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.top-texts {
    text-align: center;
    color: #fbfafa;
    margin-top: 0px;
    margin-bottom: 8px;
}

.actions {
    display: flex;
}

.call,
.email {
    width: 50%;
    height: 45px;
    justify-content: center;
    display: flex;
    border-top: 1px solid #5096b7;
    align-items: center;
    color: #fbfafa;
    font-size: 10px;
    line-height: 1;
    font-weight: 400;
    font-family: "Maison Neue", sans-serif;
}

.call {
    border-right: 0.5px solid #5096b7;
}

.email {
    border-left: 0.5px solid #5096b7;
}

.bottom {
    background-color: #fff;
    height: calc(100vh - 200px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.bottom-child {
    display: flex;
    background-color: #fff;
    max-width: 302px;
    padding: 10px 24px 24px 24px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.23);
    flex-direction: column;
}

.bottom-title-text {
    font-family: "Maison Neue", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: #323032;
}

.bottom-row {
    display: flex;
    margin-bottom: 16px;
}

.icon-container {
    height: 34px;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    color: #b3b4bb;
}

.right {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eaeaea;
    flex-grow: 1;
}

.firt-text {
    line-height: 1.3;
    margin-bottom: 5px;
    color: #323032;
    font-weight: 400;
}

.social-container {
    margin-bottom: 32px;
    padding-left: 48px;
}

.second-text {
    display: block;
    color: #82848f;
    font-size: 13px;
}

.social-title {
    margin-top: 0px;
    margin-bottom: 8px;
    font-size: 16px;
    color: #82848f;
    font-family: "Maison Neue", sans-serif;
    line-height: 1;
}

.social-icons {
    display: flex;
}

.pi-instagram {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    color: #e1306c;
    font-size: 30px;
}

.pi-facebook {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    color: #3b5998;
    font-size: 30px;
}

.pi-whatsapp {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    color: #21c063;
    font-size: 30px;
}

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

button {
    background-color: #208bc0;
    border: none;
    /* Eliminar el borde predeterminado */
    border-radius: 2px;
    height: 56px;
    width: 100%;
    color: #fff;
    padding: 0 16px;
    /* Ajustar el padding para que no quede demasiado ajustado */
    font-size: 14px;
    /* Ajustar el tamaño de la fuente para mejorar la apariencia */
    cursor: pointer;
    /* Añadir un cursor pointer para mejorar la experiencia del usuario */
    transition: background-color 0.3s ease;
    /* Agregar un efecto de transición */
}

button:hover {
    background-color: #1b6a91;
    /* Un color más oscuro al pasar el mouse */
}

.pi-user-plus {
    margin-right: 8px;
}