p.detail-pretitle {
    font-weight: 800;
    font-size: 3.5rem;
    margin-bottom: 0;
}

h1.color-primary {
    font-weight: 800;
    font-size: 3.5rem;
    color: var(--third-color);
}

section.about {
    border-radius: 8px !important;
}

section.about h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

section.about p {
    color: var(--medium-gray);
}

section.about img.icon {
    width: 15px;
    height: 15px;
    margin-right: 0.5rem;
}

img.color-primary {
    filter: invert(55%) sepia(95%) saturate(2158%) hue-rotate(336deg) brightness(96%) contrast(94%);
}

form#contact-form {
    display: grid;
    grid-template-areas:
        "Nombre Nombre"
        "Email Telefono"
        "Mensaje Mensaje"
        "Acepto Acepto"
        "Enviar Enviar"
        "Politica Politica"
        "Token Token";
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1rem;
}

.form-outline.mb-4:has(#name) {
    grid-area: Nombre;
}

.form-outline.mb-4:has(#email) {
    grid-area: Email;
}

.form-outline.mb-4:has(#phone) {
    grid-area: Telefono;
}

.form-outline:has(#message) {
    grid-area: Mensaje;
}

.form-check.my-3 {
    grid-area: Acepto;
    color: var(--medium-gray);
}

.form-check.my-3 a{
    text-decoration: underline !important;
}

button#send-contact-btn {
    margin-right: auto;
    grid-area: Enviar;
    background-color: var(--third-color) !important;
}

p.italic.legal-info {
    grid-area: Politica;
}

div#map {
    height: 500px;
    margin-bottom: 2rem;
}

.business {
    transition: 0.3s all ease-in-out;
    background: var(--card-bg);
    border: 2px solid var(--primary-color);
    border-radius: var(--bs-border-radius);
    padding: 1.5rem 1.5rem 1rem;
    height: 100%;
}

.business img {
    border-radius: 3px;
    height: 60px;
    width: 60px;
    object-fit: contain;
}

.business .header h3, .business .header p {
    margin-bottom: 0px;
}

.business .header h3 {
    font-size: 1.37rem;
    font-weight: 800;
}

.business .header p {
    font-size: 0.87rem;
    font-weight: 500;
    color: #666666;
}

.business .content p {
    font-size: 0.94rem;
}

/* Flechas de navegación en color negro */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: black;
    border-radius: 50%; /* Opcional: hace que las flechas tengan un borde redondeado */
    width: 40px; /* Ajusta el tamaño según prefieras */
    height: 40px;
}

/* Indicadores (bullets) en negro */
.carousel-indicators [data-bs-target] {
    background-color: var(--primary-color);
    width: 12px; /* Ajusta el tamaño según prefieras */
    height: 12px;
    border-radius: 50%;
}

/* Opcional: Indicadores activos en un color diferente */
.carousel-indicators .active {
    background-color: var(--third-color); /* Puedes cambiar el color del indicador activo si lo deseas */
}

.carousel-indicators {
    bottom: -30px;
}

.headSwiper .image {
    max-height: max(400px, 40vh);
    min-height: 400px !important;
    width: 100% !important;
    object-fit: cover;
    cursor: zoom-in;
}

.col-auto.logo img.img-business {
    width: 200px;
    height: 200px;
    object-fit: contain;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 15px;
    padding: 0.5rem;
}

@media screen and (max-width: 640px) {
    form#contact-form {
        display: flex;
        flex-direction: column;
    }
}