/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

* {
  margin-top: 0;
  font-family: "Roboto";
    letter-spacing: 0;
    font-weight: 400;
}


h1 {
    font-family: "Roboto";
    font-size: 2vw;
    margin: 0;
    padding: 0;
    font-weight: 400;
    line-height: 150%;
}

h1 p {
    margin-bottom: 0;
}
/* Used if background image has a lot of noise and text is not easy to read*/
.h1_box {
    background: rgba(0, 0, 0, 0.3);
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.3);
    line-height: 100%;
}

h3 {
    font-family: "Roboto";
    font-size: 1.2rem;
    line-height: 100% !important;
    margin: 0;
    padding: 0;
    color: #E94A26;
    font-weight: 400;
}
h3.bold-first-line::first-line {
    font-weight:bold;
}

br {
    margin: 0;
    padding: 0;
}

.li-special {
    margin-top: 2rem;
}

/* BUTTON COLOR E94A26 */

.red-button {
    margin-top: 1.5rem;
    background-color: #E94A26;
  border-color: #E94A26;
  border-radius: 24px;
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: 2rem;
  --bs-btn-font-size: 1rem;
}

.red-button:hover {
    background-color: #E0E0E0;
    border-color: #E0E0E0;
    color: black;
}

.red-button-border {
    background-color: #E0E0E0;
  border-color: #E94A26;
  border-radius: 24px;
  --bs-btn-padding-y: .25rem;
  --bs-btn-font-size: 1rem;
    --bs-btn-padding-x: 2rem;
    color: #E94A26;
}

.red-button-border:hover {
    background-color: #E94A26;
    color: white;
    border-color: #E94A26;
}

.grey-button-border {
    background-color: white;
  border-color: #E0E0E0;
  border-radius: 24px;
  --bs-btn-padding-y: .25rem;
  --bs-btn-font-size: 1rem;
    --bs-btn-padding-x: 2rem;
    color: black;
}
.grey-button-border:hover {
    border-color: #E94A26;
    background-color: #E94A26;
    color: white;
}

/*ACCORDION CUSTOM TO REMOVE COLOR WHEN CLICK

 */
.accordion-button:not(.collapsed) {
      background-color: transparent !important;
      color: inherit;
    }

/*button.accordion-button:focus{
      box-shadow: inherit;
}*/

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
img {
    object-fit: cover;
}
.image_with_text {
    display: inline-block;
    position: relative;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.3);
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
    object-fit: cover;
}

.ft-divider {
  padding-top: 1rem;
  border-width: 0;
}

.ft-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}

.ft-section {
  margin-left: 3rem;
  margin-right: 3rem;
}

.window-background {
  background-image: url("/static/images/landing.9806bd201712.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
    padding-left: 3rem;
}

.window-background h1, .window-background p {
    margin-top: 0;
    padding-top: 0;
}

.footer {
    background-color: #E94A26;
    color: white;
    height: 400px;
}

/* ABOUT US CONTAINER PICTURES*/
.in-line-pictures {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 1rem;
}

.in-line-pictures img {
    width: 30%;
    height: auto;
    object-fit: cover;
}
/* when aspect-ratio is not supported */
/*@supports not (aspect-ratio: 3/2) {
    .in-line-pictures img {
    width: 30%;
    height: auto;
    object-fit: cover;
    position: relative;
        padding-top: 66.67%;
        overflow: hidden;
    }
}*/

/* IMAGE CARPENTRY STYLE*/

.banner {
    background-image: url("/static/images/carpentry.2c41d3788c44.jpg");
    width: 100%;
    height: 30vh;
    background-size: cover;
    background-position: center;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 2vw;
    line-height: 100%;
  }

  .ft-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .ft-heading {
    margin-top: 7rem;
  }
}

@media (max-width: 768px) {
    .banner {
        height: 40vh; /* Reduce el alto del banner en pantallas pequeñas */
    }
    .ft-divider {
        padding-top: 0;
        border-width: 0;
    }
}
@media (max-width: 375px) {
    .banner {
        height: 40vh; /* Reduce el alto del banner en pantallas pequeñas */
    }
    .ft-divider {
        padding-top: 0;
        border-width: 0;
    }
}

.responsive-image {
    width: 100%;
}

/* CARDS BUTTONS */
.btn-circle {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    display: inline-block;
    border: 2px solid #000;
    color: #000;
    background-color: transparent;
}

.btn-circle:hover {
    background-color: #E94A26;
    color: white;
}

/* Centrado vertical del botón dentro del card */
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.card-text {
    color: black;
}

/* table style */

.table tbody tr {
    border-bottom: 1px solid #E0E0E0; /* Línea gris entre las filas */
}

.table td, .table th {
    border: none;
    padding: 10px;
    line-height: 1.8;
}
.modal-content {
    background-color: #E0E0E0;
    border: 3px solid #E0E0E0;
}

.modal-body #contactForm {
    background-color: #E0E0E0;
    border-radius: 10px;
    width: 100%;
    max-width: 26rem; /* 416px máximo en pantallas grandes */
    margin: auto;
}

a {
    color: #E94A26;
    text-decoration: none;
}
a:active {
    color: #E94A26;
}

.form-check-input:checked {
    background-color: #E94A26;
    border-color: #E94A26;
}
.form-check-input {
    border-color: #E94A26;
}
.btn-close {
    font-size: 1.5rem;
    color: #E94A26;
    transition: color 0.3s ease, transform 0.3s ease;
}

.btn-close:hover {
    transform: scale(1.1);
}

.col-md-5 img {
    width: 100%;         /* Hace que la imagen ocupe todo el ancho disponible */
    height: 100%;        /* Asegura que ocupe todo el alto disponible */
    object-fit: contain; /* Ajusta la imagen sin recortarla, mantiene la proporción */
}
label {
    padding-bottom: 3%;
}

.text-format {
    text-align: justify;
    line-height: 120%;
    font-weight: 400;
    letter-spacing: 0;

}

.form-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    margin: auto;
    gap: 10px;
}

.form-container input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.red-button:disabled {
    background-color: #E94A26;
    border-color: #E94A26;
}

.navLinkCustom:hover {
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    cursor: pointer;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

.carpentry {
    padding-top: 30vh
}


/* Para pantallas más grandes (tabletas y escritorios) */
@media (max-width: 768px) {
    .mx-auto {
        margin-right: 0 !important;
        margin-left: auto !important;
    }
    .carpentry {
        padding-top: 10vh
    }
    .responsive-image {
        display: none;
    }

}
@media (max-width: 576px) {
    .modal-body #contactForm {
        padding: 0 1rem;
    }
    h3 {
        font-size: 4vw;
    }
}

.navbar {
    padding-top: env(safe-area-inset-top, 10px); /* fallback de 10px si no soporta env */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
#liveToast {
  background-color: #E0E0E0 !important;
  color: #000000 !important;
}

.button-group {
    margin-top: 20px;
    text-align: center;
}