/* css/styles.css */

/* Colores base */
:root {
    --color-primario: #65a8a0;
    --color-secundario: #C33447;
    --color-terciario: #EBB466;
    --color-blanco: #ffffff;
    --color-negro: #000000;
}

h1 {
    color: var(--color-primario);
}

/* Navbar */
.navbar-light .navbar-nav .nav-link {
    color: var(--color-secundario);
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--color-terciario);
    font-weight: bold;
}

.navbar-light .navbar-toggler {
    border-color: var(--color-secundario);
}

.navbar-light .navbar-brand img {
    max-height: 50px;
}

/* Franja superior */
.bg-danger {
    background-color: var(--color-secundario) !important;
}

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

.footer p {
    color: var(--color-primario);
}
/* Sección Inicial */
.hero-section {
    background-image: url(https://aridosrumi.com/img/fondo-banner.jpg); /* Cambia 'fondo.jpg' por tu imagen de fondo */
    background-size: cover;
    background-position: center;
    height: 60vh;
    color: var(--color-blanco);
}

.hero-title {
    font-size: 3rem;
    background-color: var(--color-secundario); /* Fondo semi-transparente para el texto */
    padding: 10px 20px;
    display: inline-block;
    color:white;
}
.sub-title {
    font-size: 2rem;
    background-color: var(--color-negro); /* Fondo semi-transparente para el texto */
    padding: 10px 20px;
    display: inline-flex;
    color:white;
}

.hero-buttons .btn {
    padding: 10px 20px;
    font-size: 1.2rem;
}

.hero-buttons .btn-primary {
    background-color: var(--color-secundario); /* Color de botón de Contacto */
    border-color: var(--color-secundario);
}

.hero-buttons .btn-success {
    background-color: #25d366; /* Color de botón de WhatsApp */
    border-color: #25d366;;
}
/* Sección de Cobertura */
.coverage-section {
    background-color: var(--color-secundario);
}

.coverage-section .fa-star {
    color: var(--color-terciario); /* Color del icono */
}

.coverage-section h2 {
    font-size: 2rem;
}

.coverage-section p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}
/* Sección de Productos */
.products-section {
    background-color: var(--color-blanco);
}

.products-title {
    font-size: 3rem;
    color: var(--color-secundario);
}

.products-title .highlight {
    color: var(--color-terciario);
}

.products-subtitle {
    font-size: 2rem;
    color: var(--color-primario);
}

.btn-secondary {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
    color: var(--color-blanco);
    padding: 10px 20px;
    font-size: 1.2rem;
}

.products-section h5 {
    color: var(--color-secundario);
}

.products-section img {
    border: 2px solid var(--color-primario);
}
/* Sección de Círculos Pequeños */
.small-circles-section .small-circle {
    width: 80px;
    height: 80px;
    border: 2px solid var(--color-blanco);
}

.small-circles-section h6 {
    font-size: 1rem;
    color: var(--color-blanco);
}

@media (min-width: 768px) {
    .small-circles-section .col-md-2 {
        width: 20%; /* Asegura que 5 columnas ocupen todo el ancho en pantallas grandes */
    }
}
.small-circles-section {
    background-color: var(--color-primario);
}
/* Sección de Cotización */
.quote-section {
    background-color: var(--color-secundario);
}

.quote-section h2 {
    font-size: 2rem;
    color: var(--color-blanco);
}

.form-label {
    color: var(--color-blanco);
}

.form-control {
    background-color: var(--color-blanco);
    color: var(--color-secundario);
    border: 1px solid var(--color-secundario);
}

.form-control::placeholder {
    color: var(--color-secundario);
}

.btn-primary {
    background-color: var(--color-terciario);
    border-color: var(--color-terciario);
}
/* Estilos del Footer */
.footer {
    background-color: var(--color-oscuro, #343a40); /* Ajustar color según necesidad */
    color: var(--color-blanco);
}

.footer a {
    color: var(--color-blanco);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .fa-star {
    color: var(--color-terciario); /* Color del icono */
    font-size: 1.5rem;
}
footer img {
    width: 70%;
}
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}