/* Variables */
:root {
    --bs-body-color: #1d1d1b;
    --bs-danger-rgb: 230, 51, 18;
    --bs-red: #E63312;
    --bs-danger: var(--bs-red);
    --danger: var(--bs-red);
    --bs-primary-rgb: 46, 106, 176;
    --bs-primary: #2e6ab0;
    --bs-link-color-rgb: 13, 110, 253;
    --bg-grey: #F5F5F5;
    --bs-grey: #B7B7B7;
    --bs-secondary: #7E7E7E;
    --bs-secondary-rgb: 126, 126, 126;
    --bs-border-color: var(--bs-primary);
    --bs-border-radius: 0.56rem;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.alert {
    --bs-alert-padding-x: .5rem;
    --bs-alert-padding-y: .5rem;
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-red);
    --bs-btn-border-color: var(--bs-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-red);
    --bs-btn-hover-border-color: var(--bs-red);
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-red);
    --bs-btn-active-border-color: var(--bs-red);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-red);
    --bs-btn-disabled-border-color: var(--bs-red);
}

/* GENERAL */
body{
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
}

/* HEADERS */
h1{
    font-family: 'Unbounded';
    font-weight: bold;
    font-size: 30px;
    line-height: 25px;
    text-align: center;
    color: var(--bs-primary);

}
h2{
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 25px;
    line-height: 25px;
    text-align: center;
    color: var(--bs-body-color);
}
h3{
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 20px;
    line-height: 25px;
    color: var(--bs-grey);
}
h4, .h4{
    font-family: 'Unbounded';
    font-weight: bold;
    font-size: 15px;
    line-height: 25px;
    color: var(--bs-primary);
}
hr{
    color: var(--bs-red);
    border-top: 2px solid;
    opacity: 1;
}
.opensans{
    font-family: "Open Sans", sans-serif!important;
}
.unbounded{
    font-family: 'Unbounded'!important;
}
/* backgrounds */
.bg-grey{
    background-color: var(--bg-grey);
}

.shadow {
    box-shadow: 0.6rem 0.6rem 0.9rem 0px rgba(0, 0, 0, 0.35) !important;
}

/* recaptcha */
.grecaptcha-badge {
    display: none !important;
}
/**************************/
/* HEADER IMG */
/**************************/
#header-img {
  background-image: url('https://firamecatec.com/assets/header/header-logo-mecatec.svg'); /* Replace with your image path */
  background-size: cover; /* Adjust background size as needed */
  background-position: center center; /* Adjust background position as needed */
  /* Other styles for the header */
}

/*************************/
/*     INFO PART FIRA    */
/*************************/
/* visualizar legend en medio de fieldset */
legend {
   all: revert;
}
#fira {
    background: linear-gradient(to bottom, white 60%, var(--bg-grey) 60%, var(--bg-grey) 100%);
}
#fira p{
    color: var(--bs-grey);
}
/* < md */
@media only screen and (max-width : 767px) {
    #detalls .card .card-img-top{
        width: 175px;
    }
}
/* < sm */
@media only screen and (max-width : 575px) {
     #detalls .card .card-img-top{
        width: 100px;
    }
}

#fira .card-footer, #fira .card-footer h2{
    text-decoration: none;
}

/**************************/
/*        TROBAREM        */
/**************************/
#trobare .text-title{
    font-family: 'Unbounded';
    font-size: 12px;
    line-height: 25px;
}
#trobare .text-subtitle{
    font-family: 'Unbounded';
    font-size: 25px;
    line-height: 25px;
}
/*************************/
/*        RESERVA        */
/*************************/
#reserva {
    background: linear-gradient(to bottom, var(--bs-primary) 40%,  var(--bg-grey) 40%,  var(--bg-grey) 100%);
}
#reserva .gradient{
    background: linear-gradient( to right bottom,#ebebeb 0%, rgba(186, 186, 186, 0.75) 50%, #ebebeb 100%)!important;
}
#reserva form label:not([type='submit']) {
    color: var(--bs-primary);
    font-weight: bold;
}
#reserva form label.btn-outline-primary{
    font-family: 'Unbounded';
    font-weight: bold;
    /* font-size: 12px; */
    color: var(--bs-primary);
}
#reserva form .btn-check:checked+.btn{
    color: white;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
#reserva form .term-checkbox-container{
    /* font-size: 12px; */
}
#reserva form button[type='submit']{
    font-family: Unbounded;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}
#reserva .bg-gradient-finished {
    background: linear-gradient(100deg, #c8c8c6 0%, #ebebeb 39.9%, #c8c8c6 100%, #ebebeb 100%);
}

/**************************/
/*        CONTACTA        */
/**************************/
#contacta a{
    font-family: 'Unbounded';
    font-weight: bold;
    font-size: 15px;
    line-height: 25px;
    color: var(--bs-primary);
    text-decoration: none;
}
#contacta #horaris{
    font-family: 'Unbounded';
    color: var(--bs-primary);
}
#contacta img{
    mix-blend-mode: multiply;
}

/**************************/
/*         FOOTER         */
/**************************/
footer{
    background: linear-gradient(150deg, #C8C8C6 0%, #EBEBEB 40%, #C8C8C6 100%) !important;
}


/* QR */
.qr .form-control:focus {
    color: inherit;
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: none;
}
.qr .bg-success-subtle {
    background-color: #E7F7E1 !important;
    border-color: #6EAF4C;
}

.qr .text-success-emphasis {
    color: var(--bs-success-text-emphasis) !important;
}