body, html{
    font-family: 'Montserrat';
}
.bg-custom-color-blue{
    background-color: #2B384D;
}
.text-color-blue{
    color: #2B384D;
}
.bg-custom-color-blue-opacity{
    background-color: #2b384d10;
}
.custom-container, .custom-container-cite{
    padding: 0% 10%;
}
.custom-container-cite{
    padding: 5% 15%;
}
.font-weight-light{
    font-weight: 300;
}
.font-weight-semibold{
    font-weight: 700;
}
.custom-button {
    background-color: rgba(0, 0, 0, 0.62); /* Color con opacidad */
    /* mix-blend-mode: multiply; */
    border: 2px solid #ffffff; /* Mantiene el borde blanco */
    color: #ffffff;
    font-weight: 500;
}

.custom-button:hover{
    background-color: #ffffff;
    color: #2B384D;
}

.custom-button:hover img{
    filter: brightness(0) invert(0) !important;
}

.card-services{
    background-color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.card-services:hover{
    background-color: #122944;
}
.card-services h4{
    font-weight: 400;
    letter-spacing: 0px;
}
/* Cambia el color de h3, h4 y a al hover */
.card-services:hover h3,
.card-services:hover h4 {
    color: #ffffff !important;
}

.card-services:hover p{
    padding: 5px 10px;
    background-color: #FFB632;
    color: #2E384B;
    border-radius: 5px;
    width: fit-content;
}

/* Cambia el color de la imagen al hover */
.card-services:hover .icon-img {
    filter: brightness(0) invert(1); /* Aplica un filtro para hacer la imagen blanca */
}
.show-more-articles{
    background-color: #2b384d40;
    border-radius: 5px;
    font-weight: 900;
    padding: 5px 10px;
    color: #2B384D;
    font-size: small;
    width: fit-content;
    margin-top: 15px;
}

.unique-service{
    width: auto;
    height: fit-content;
    background-color: #FFB632;
    color: #2B384D;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 5px;
}

.card-delivery-time{
    border: 1px solid #ffffff70;
    border-radius: 5px;
}

.card-delivery-time .hours{
    font-size: 25px;
    font-weight: 700;
}

.card-delivery-time .delivery-time{
    font-size: 10px;
}
.card-express-services{
    background-color: #ffffff;
    color: #2B384D;
}
.card-express-services h3{
    font-weight: 700;
}
.card-express-services p{
    font-size: 14px;
}
.card-express-services span{
    border: 1px solid #2B384D;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 11px;
}

.card-express-services:hover{
    background-color: #FFB632;
}

.card-express-services:hover span{
    background-color: #2B384D;
    color: #ffffff;
}
.certifieds-h2{
    color: #2B384D;
    font-size: 20px;
}

.btn-procedure{
    width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    color: #2B384D;
    border: 1px solid #2B384D;
    border-radius: 5px;
    font-weight: 600;
}
.btn-procedure i{
    font-size: 10px;
    color: #2B384D;
}
.btn-procedure:hover{
    background-color: #2B384D;
    color: #ffffff;
}
.btn-procedure:hover i{
    color: #FFB632;
}
.step-cards{
    color: #2B384D;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.step-cards h3{
    font-weight: 600;
}
.step-cards .step{
    width: 50px;
    height: 50px;
    background-color: #2B384D;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}
.card-online-cite{
    padding: 5% 0;
    width: 800px;
}
.card-online-cite h2{
    font-weight: 600;
    color: #ffffff;
}
.card-online-cite p{
    font-size: 20px;
}
.btn-schedule{
    background-color: #FFB632;
    color: #2B384D;
    width: 400px;
    font-weight: 600;
}
.bg-form-inputs{
    background-color: #2b384d10;
}
.btnsubmitfooter{
    background-color: #FFB632;
    color: #2B384D;
    font-weight: 700;
}
.button-modal{
    margin-right: 15px;
}
@media screen and (max-width: 580px){
    .custom-container{
        padding: 0 4%;
    }
    .pattern-card-delivery-time, .pattern-cards-express-services{
        margin-bottom: 5%;
    }
    .how-it-works{
        display: block !important;
    }
    .btn-procedure{
        font-size: 12px;
    }
    .card-online-cite{
        padding: 20% 4%;
        width: 100%;
    }
    .btn-schedule{
        width: 100%;
    }
    .custom-container-cite{
        padding: 0;
    }
}
h1 {
    font-family: 'Athelas';
    /* 10px es el mínimo, 3vw es el preferido (3% del ancho del viewport), 60px es el máximo */
    font-size: clamp(1.8rem, -0.875rem + 8.333vw, 5rem);
}
.txt-description-banner {
    /* Valor base para navegadores muy antiguos o si no coincide con ningún breakpoint */
    font-size: 1.2rem;
  }
  
  /* Para pantallas más pequeñas (hasta 768px) */
    @media (max-width: 768px) {
      .txt-description-banner {
        font-size: 1.2rem;
      }
    }
  
    /* Para pantallas medianas (de 769px a 1200px) */
    @media (min-width: 769px) and (max-width: 1200px) {
      .txt-description-banner {
        font-size: 1.6rem;
      }
    }
  
    /* Para pantallas grandes (a partir de 1201px) */
    @media (min-width: 1201px) {
      .txt-description-banner {
        font-size: 1.8rem;
      }
    }
.btn-active{
    background-color: #2B384D !important;
    color: #ffffff !important;
}
.btn-active i{
    color: #FFB632 !important;
}

@media (width < 1000px){
    .custom-button-white, .custom-button-dark{
        font-size: 18px !important;
        width: fit-content;
    }
    .custom-button-white span, .custom-button-dark span{
        display: flex !important;
        justify-content: space-between !important;
    }
}
.custom-button-white {
    position: relative;
    background-color: #fff;
    color: #2B384D;
    font-size: 23px;
    font-weight: 400;
    border-radius: 25px;
    border: none;
    overflow: hidden;
    transition: color 0.3s ease;
}
.custom-button-white::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #2B384D;
    border-radius: inherit;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: 0;
}
.custom-button-white:hover::before {
    transform: scale(1.5);
    opacity: 1;
}
  
.custom-button-white:hover {
    color: #fff;
}
  
  .custom-button-white .content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .custom-button-dark {
    position: relative;
    background-color: #2B384D;
    color: #fff;
    font-weight: 400;
    font-size: 23px;
    border-radius: 25px;
    border: none;
    overflow: hidden;
    transition: color 0.4s ease;
  }
  
  .custom-button-dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #fff;
    border-radius: inherit;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: 0;
  }
  
.custom-button-dark:hover::before {
  transform: scale(1.5); /* un poco más grande para cubrir bien */
  opacity: 1;
}

.custom-button-dark:hover {
  color: #2B384D;
}

/* Asegúrate de que el contenido esté encima del ::before */
.custom-button-dark > * {
  position: relative;
  z-index: 1;
}

@media (width < 579px){
    .parent-banner-buttons{
      display: block !important;
    }
  }
@keyframes slide-in {
    from {
      translate: -100vw 0;
      scale: 100% 1;
    }
  
    to {
      translate: 0 0;
      scale: 100% 1;
    }
}
.animation-procedures{
    animation-duration: 1s;
    animation-name: slide-in;
}