/* Custom color application for index.html components */

/* Header and Navigation */
.header-top {
    background-color: var(--gris-calido);
}

.nav-bar {
    background-color: var(--gris-calido);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--verde-principal);
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--dorado);
}

/* Hero Section */
.hero-header {
    background: linear-gradient(rgba(110, 27, 67, 0.8), rgba(110, 27, 67, 0.8)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

/* Feature Section */
.feature .text-primary {
    color: var(--verde-principal) !important;
}

.feature h1.display-4 {
    color: var(--guinda-principal);
}

.feature-item {
    border-color: var(--gris-secundario);
}

.feature-item:hover {
    border-color: var(--guinda-principal);
}

/* About Section */
.about-img {
    border-color: var(--dorado);
}

/* Services Section */
.service-item {
    background-color: var(--gris-calido);
}

.service-item:hover {
    background-color: var(--guinda-principal);
}

.service-item:hover h4,
.service-item:hover p {
    color: white;
}

/* Testimonial Section */
.testimonial-carousel .owl-item.center .testimonial-item {
    background-color: var(--guinda-principal);
}

/* Blog Section */
.blog-item {
    border-color: var(--gris-secundario);
}

.blog-item:hover {
    border-color: var(--guinda-principal);
}

/* Footer */
.footer {
    background-color: var(--negro);
}

.footer h4 {
    border-left: 4px solid var(--verde-principal);
    padding-left: 10px;
}

.footer i.text-primary {
    color: var(--dorado) !important;
}

.footer a:not(.btn) {
    color: var(--gris-calido);
    display: block;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer a:not(.btn):hover {
    color: var(--verde-principal);
    padding-left: 5px;
}

/* Buttons */
.btn-primary {
    background-color: var(--guinda-principal);
    border-color: var(--guinda-principal);
}

.btn-primary:hover {
    background-color: var(--guinda-oscuro);
    border-color: var(--guinda-oscuro);
}

.btn-secondary {
    background-color: var(--gris-secundario);
    border-color: var(--gris-secundario);
}

.btn-outline-primary {
    color: var(--guinda-principal);
    border-color: var(--guinda-principal);
}

.btn-outline-primary:hover {
    background-color: var(--guinda-principal);
    border-color: var(--guinda-principal);
}

/* Text colors */
.text-primary {
    color: var(--guinda-principal) !important;
}

/* Back to top button */
.back-to-top {
    background-color: var(--guinda-principal);
}

/* Spinner */
.spinner-border.text-primary {
    color: var(--guinda-principal) !important;
}