:root {
    --main-color: rgba(224, 43, 32, 0.8);
    --second-color: rgb(251, 230, 229);
    --main-color-hover: rgba(224, 43, 32, 0.3);
    --main-text-color: rgba(224, 43, 32);
}

.bg-red-100 {
    background-color: var(--second-color) !important;
}

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

.position-absolute {
    position: absolute;
}

.border-flat {
    border-radius: 0;
}

.btn-red {
    color: white;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-red:hover {
    color: black;
    background-color: var(--main-color-hover);
    border-color: var(--main-color);
}

#responsive-logo {
    max-width: 25%;
    height: auto;
    width: auto; /* Ensures that the logo maintains its aspect ratio */
}

.lot-example-image {
    width: 10%;
}

@media (max-width: 1024px) {
    #responsive-logo {
        max-width: 50%; /* Adjust the size for smaller screens if needed */
    }

    .lot-example-image {
        width: 15%;
    }
}

@media (max-width: 768px) {
    #responsive-logo {
        max-width: 50%; /* Adjust the size for smaller screens if needed */
    }

    .lot-example-image {
        width: 25%;
    }
}

@media (max-width: 576px) {
    #responsive-logo {
        max-width: 75%; /* Further adjustment for very small screens */
    }

    .lot-example-image {
        width: 40%;
    }
}

#customer-layout h3 {
    color: var(--main-text-color);
    font-weight: 600;
}

#steps .number,
#steps .text {
    color: var(--main-text-color);
}

.product-name {
    font-weight: 700 !important;
    font-size: 24 !important;
    line-height: 1.5;
    color: #344767 !important;
    text-align: center;
}

.btn-search:disabled {
    border-radius: 15% 0% 0% 15%;
    background-color: var(--main-color);
    border-color: var(--main-color);
    opacity: 1;
}

#steps a {
    color: var(--main-color);
}

.header-info h2 {
    color: var(--main-text-color);
    font-weight: 600;
}