/* para todos los titulos u subtitulos quiero usar una misma tipo de fuente */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bitter', serif;
}

.bitter {
    font-family: 'Bitter', serif !important;
}


/* CSS personalizado para los títulos con líneas */
.title-with-line {
    position: relative;
    display: inline-block;
}

.title-with-line::after {
    content: '';
    position: absolute;
    left: 100%; /* Colocar después del texto */
    top: 50%;
    transform: translateY(-50%);
    width: 100%; /* Largo ajustable para móviles */
    max-width: 3rem; /* Maximo para dispositivos móviles */
    height: 1px; /* El grosor de la línea */
    background-color: #333; /* El color de la línea */
    margin-left: 16px; /* Distancia entre el texto y la línea */
}

/* Media query para pantallas mayores a 640px (md en Tailwind CSS) */
@media (min-width: 640px) {
    .title-with-line::after {
        width: 200%; /* Largo para pantallas más grandes */
        max-width: none; /* Remueve el máximo para pantallas más grandes */
    }
}


/* Personalización del botón para que coincida con la maquetación */
.btn-verde {
    background-color: #2a9d8f;
    /* El color de fondo puede ser el que necesites */
    color: #ffffff;
    /* El color del texto en contraste con el botón */
    padding: 10px 20px;
    /* Ajusta el relleno según el diseño */
    border-radius: 0.375rem;
    /* 6px de border radius */
    font-weight: 700;
    /* Fuente en negrita */
    transition: background-color 0.3s;
    /* Transición suave de color de fondo */
}

.btn-verde:hover {
    background-color: #1b6f5c;
    /* Color más oscuro para el estado hover */
}

.btn-verde2{
    background-color: #8ebc2a;
    color: #084e1f;
}

.btn-verde2:hover {
    background-color: #a5db31;
}

.informacion-contacto,
.suscripcion {
    padding: 2rem;
    border: 1px solid #ffffff;
    /* Borde del color de fondo para que se note */
}

/* Estilos personalizados para el botón */
.button-with-line {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    width: 249px;
    padding-left: 40px;
    padding-right: 40px;
}

.button-with-line::after {
    content: '';
    height: 1px;
    background: #fff;
    flex-grow: 1;
    margin-left: 10px;
}

.button-with-line.light-green {
    background-color: #b2bfab;
    color: #00494e;
}

.button-with-line.light-green::after {
    background: #00494e;
}

.button-with-line.light-green:hover {
    background-color: #9baa96;
}

.button-with-line.green {
    background-color: #00494e;
    color: #fff;
}

.button-with-line.green::after {
    background: #fff;
}

.button-with-line.green:hover {
    background-color: #003033;
}

.button-with-line.blue {
    background-color: #12416f;
    color: #fff;
}

.button-with-line.blue::after {
    background: #fff;
}

.button-with-line.blue:hover {
    background-color: #0a2a4d;
}

.title-with-line-second-color {
    color: #fff;
}

.title-with-line-second-color::after {
    background: #fff;
}


.title-with-line-third-color {
    color: #b1c0ab;
}

.title-with-line-third-color::after {
    background: #70932a;
}

.bg1 {
    background-color: #ebf0ea;
}

.services img {
    width: 130px;
    background: #01484e;
    color: #fff;
    border-radius: 100%;
    padding: 10px;
}

.services span {
    font-family: 'Lato', serif;
    font-size: x-large;
}


.cita-casa-modelo {
    color: #4b6726ff;
}


.contact-bg {
    background-color: #01484eff;
    /* background-image: linear-gradient(to right, #01484eff 50%, #0d5541ff 50%); */
}

.mobile-menu-nav a {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #80c329ff;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.active {
    background-color: #80c329ff;
    color: #1f513dff;
}

#contact-form label {
    color: #fff;
}

#contact-form input[type="text"],
#contact-form select {
    background-color: transparent;
    color: #fff;
    border-color: #70932a;
}

#contact-form input[type="text"]:focus,
#contact-form select:focus {
    background-color: #70932a;
    color: #fff;
    border-color: #70932a;
}

#contact-form select {
    -webkit-appearance: none;
    /* Remueve la apariencia nativa en Safari */
    -moz-appearance: none;
    /* Remueve la apariencia nativa en Firefox */
    appearance: none;
    /* Remueve la apariencia nativa en los navegadores modernos */
    background-color: transparent;
    color: #fff;
    border-color: #70932a;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 8L10 13L15 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
}

#contact-form select:focus {
    background-color: #70932a;
    border-color: #70932a;
    color: #fff;
}

#contact-form button {
    background-color: #70932a;
    color: #333;
    border-radius: 50px;
}

#contact-form button:hover {
    background-color: #80c329ff;
    color: #333;
}