#contacto {
    margin: 2rem auto;
}
#contacto > .main-title > h1, #contacto > .main-title > h1 > span{
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 52px;
    font-weight: 600;
    color: #00296b;
    text-align: center;
}
#contacto > .main-title > span {
    display: block;
    text-align: center;
    font-size: 15px;
    color: #00296b;
    font-weight: 600;
}
.contacto-info {
    margin-top: 36px;
    display: flex;
    gap: 16px;
}
.contacto-item {
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--color-secondary);
}
.contacto-item i {
    display: flex;
    min-height: 48px;
    min-width: 48px;
    background-color: var(--color-primary);
    color: #fff;
    margin-right: 16px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 8px;
}
.contacto-form {
    margin-top: 3rem;
    transition: border 1s ease-out;
    border: 1px solid transparent;
}
.contacto-form:has(.success-container){
    border: 1px solid #ececec;
}
.contacto-form form {
    display: flex;
    flex-direction: column;
}
.form-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 16px 0px 0px;
}
.form-item input, .form-item textarea {
    border: 1px solid #d1d5db;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 8px;
}
.form-item label {
    margin-bottom: 4px;
    color: var(--color-muted);
}
.form-item textarea {
    resize: none;
    min-height: 140px;
}
.form-item input:focus, .form-item textarea:focus {
    border: 1px solid #5f6369;
}
.contacto-form form > button {
    flex: 1;
    background-color: var(--color-primary);
    color: #fff;
    margin-top: 16px;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
}
.contacto-form form > button:hover {
    opacity: 0.9;
}

/*animation*/
.success-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.success-container h4 {
    margin-top: 24px;
    font-size: 20px;
    color: var(--color-primary);
    transition: opacity 1s ease-out;
    opacity: 1;
}
.success-container h4.hidden {
    opacity: 0;
}
.success-animation {
    position: relative;
}
.checkmark {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: block;
    stroke-width: 4px;
    stroke: var(--color-primary);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--color-primary);
    position: relative;
    top: 5px;
    right: 5px;
    margin: 0 auto;
}
.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 4;
    stroke-miterlimit: 10;
    stroke: var(--color-primary);
    fill: #fff;
}
.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}
.success-animation.animate .checkmark {
    animation:
            fill 0.4s ease-in-out 0.4s forwards,
            scale 0.3s ease-in-out 0.9s both;
}
.success-animation.animate .checkmark__circle {
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-animation.animate .checkmark__check {
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}
@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px var(--color-primary);
    }
}

#contact-form.was-validated input:invalid,
#contact-form.was-validated textarea:invalid {
    border: 1px solid red;
}

#contact-form input:valid,
#contact-form textarea:valid {
    border: 1px solid #d1d5db;
}

/* --- CSS RESPONSIVE --- */
@media (max-width: 768px) {
    .contacto-info {
        flex-direction: column;
    }
    #contacto {
        margin: 2rem auto;
    }
}