/* Custom styles */
:root {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Arial Rounded MT';
    src: url('./fonts/arial-rounded-mt-regular.woff') format('woff'), 
         url('./fonts/arial-rounded-mt-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/OpenSans-Regular.woff') format('woff'), 
         url('./fonts/OpenSans-Regular.woff2') format('woff2'),
         url('./fonts/OpenSans-Bols.woff') format('woff'),
         url('./fonts/OpenSans-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    padding-top: 56px;
    background-color: rgba(26, 20, 16, 1);
    color: white;
    font-family: "Arial Rounded MT", "Open Sans", "Arial";
}

section {
    scroll-margin-top: 56px;
}

.bg-dark {
    background-color: rgba(26, 20, 16, 1);
}

.navbar {
    /* backdrop-filter: blur(10px);
    background-color: rgba(33, 37, 41, 0.9) !important;
    */
    backdrop-filter: blur(10px);
    background-color: rgba(26, 20, 16, 1) !important;
}

.btn.btn-primary.btn-lg {
    background-color: rgba(26, 20, 16, 1); /* Cambia el color de fondo */
    border-color: rgba(255, 138, 0, 1); /* Cambia el color del borde */
    color: white; /* Cambia el color del texto */
    font-size: 1.2rem;
  }
  
  .btn.btn-primary.btn-lg:hover {
    background-color: rgba(255, 138, 0, 1); /* Cambia el color de fondo al pasar el ratón */
    border-color: rgba(255, 138, 0, 1); /* Cambia el color del borde al pasar el ratón */
  }

.card {
    transition: transform 0.3s ease;
    background-color: rgba(26, 20, 16, 1);
    color: white; /* Optional: adjust text color for better contrast */
}

.card:hover {
    transform: translateY(-5px);
}

.custom-orange {
    color: rgba(255, 138, 0, 1); 
}

#contact {
    background-color: rgba(26, 20, 16, 1);
}

/* Icon styles */
.bi {
    line-height: 1;
}

/* Form styles */
#contactForm {
    background-color: rgba(26, 20, 16, 1); /* Cambia el color de fondo del formulario */
    padding: 20px; /* Añade un poco de padding para mejor apariencia */
    border-radius: 8px; /* Añade bordes redondeados */
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--bs-primary);
}

/* Form styles */
#contactForm .form-control {
    background-color: rgba(26, 20, 16, 1); /* Cambia el color de fondo de las cajas de texto */
    color: white; /* Cambia el color del texto para que sea legible */
    border: 1px solid rgba(255, 138, 0, 1); /* Añade un borde sutil para mejor visibilidad */
}

#contactForm .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5); /* Cambia el color del placeholder para que sea visible */
}

#contactForm .form-control:focus {
    background-color: rgba(26, 20, 16, 1); /* Mantén el color de fondo al enfocar */
    border-color: var(--bs-primary); /* Cambia el color del borde al enfocar */
    box-shadow: none; /* Elimina la sombra predeterminada de Bootstrap */
    color: white; /* Asegura que el texto sea blanco al enfocar */
}

#contactForm .form-control:focus {
    border-color: rgba(0, 163, 188, 1); /* Cambia el color del borde al enfocar */
}

#contactForm .btn-primary {
    background-color: rgba(26, 20, 16, 1); /* Cambia el color de fondo del botón */
    border-color: rgba(255, 138, 0, 1); /* Cambia el color del borde del botón */
    color: white; /* Cambia el color del texto del botón */
    font-size: 1.2rem;
}

#contactForm .btn-primary:hover {
    background-color: rgba(255, 138, 0, 1); /* Cambia el color de fondo al pasar el mouse */
}

/* Cookie consent custom styles */
#cc-main {
    border-radius: 8px;
}

/* Estilos para el botón del aviso de cookies */
#c-p-bn {
    background-color: rgba(26, 20, 16, 1) !important; /* Cambia el color de fondo del botón */
    color: white !important; /* Cambia el color del texto del botón */
}

#c-p-bn:hover {
    background-color: rgba(255, 138, 0, 1) !important; /* Cambia el color de fondo al pasar el mouse */
}

#c-p-bn:focus {
    background-color: rgba(26, 20, 16, 1) !important; /* Cambia el color de fondo al enfocar */
}

#s-all-bn {
    background-color: rgba(26, 20, 16, 1) !important; /* Cambia el color de fondo del botón */
    color: white !important; /* Cambia el color del texto del botón */
}

#s-all-bn:hover {
    background-color: rgba(255, 138, 0, 1) !important; /* Cambia el color de fondo al pasar el mouse */
}

#s-all-bn:focus {
    background-color: rgba(26, 20, 16, 1) !important; /* Cambia el color de fondo al enfocar */
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2.5rem;
    }
    
    .display-5 {
        font-size: 2rem;
    }
}