@font-face {
    font-family: 'Tanker';
    src: url('/assets/fonts/tanker.ttf') format('truetype');
  
}

@font-face {
    font-family: 'Futura';
    src: url('/assets/fonts/futura.ttf') format('truetype');
}
.futura {
   font-family: 'Futura';
}
.tanker {
    font-family: 'Tanker';
}

.text-blue{
    color: #003366;
}

.text-pink{
    color: #e0457b;
}

.bold{
    font-weight: bolder;
}

.fsize-1{
    font-size: 4rem;
}

.fsize-2{
    font-size: x-large;
}

.fsize-3{
    font-size: large;
}
.fsize-4{
    font-size: 1.3rem;
}
.fsize-5{
    font-size: 1.6rem;
}
.fsize-6{
    font-size: 1rem;
}
.fsize-7{
    font-size: 2rem;
}

.btn-blue{
     color: white;
     background-color: #003366;
     padding: 10px 15px 10px 15px;
}

.bg-blue {
    background-color: #003366;
}

.bg-pink {
    background-color: #e0457b;
}

.w-70{
    width: 70%;
}

.form-custom {
    background-color: #e4e5ec;
    padding: 0px 13px 13px 13px;
}

.form-custome2{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.mascotas{
    height: 480px;
}

.img-fluid-2{
    width: 300px;
    fill: blue;
}

.img-fluid-3{
    max-width: 140px;
    fill: blue;
}

.linea{
    border-bottom: 2px solid #003366;
    width: 80%;
}

.linea-2{
    border-left: 1.5px solid white;
    height: 100%;
}

.card-custom {
    max-width: 350px;
    overflow: hidden;
}

.bg-img {
  background: url('../img/Pleca_Azul.png') no-repeat center center;
  background-size: 100% auto; /* ancho al 100%, alto automático */
  background-position: top center; /* la alinea horizontalmente */
  min-height: 100vh;
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 30px;
}

.circulo-rojo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* la centra verticalmente */
    max-width: 120px; /* ajusta el tamaño si es necesario */
    height: auto;
    z-index: 10; /* para que esté encima del fondo pero detrás del texto si quieres */
}

.puntitos-der{
    position: absolute;
    right: 0;
    top: 500%;
    transform: translateY(-50%); /* la centra verticalmente */
    max-width: 120px; /* ajusta el tamaño si es necesario */
    height: auto;
    z-index: 10;
}

.circulo-azul {
    position: absolute;
    left: 0;
    top: 250%;
    transform: translateY(-50%); /* la centra verticalmente */
    max-width: 120px; /* ajusta el tamaño si es necesario */
    height: auto;
    z-index: 10; /* para que esté encima del fondo pero detrás del texto si quieres */
}

.ondas{
    position: absolute;
    right: 0;
    top: 5%;
    transform: translateY(-50%); /* la centra verticalmente */
    max-width: 120px; /* ajusta el tamaño si es necesario */
    height: auto;
    z-index: 10;
}

.btn-wpp {
    position: fixed;
    bottom: 20px; /* distancia desde abajo */
    right: 20px; /* distancia desde la derecha */
    z-index: 9999; /* para que esté encima de todo */
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.btn-wpp:hover {
    transform: scale(1.1); /* efecto al pasar el mouse */
}

.btn-wpp img {
    max-width: 60px; /* tamaño del botón */
    height: auto;
}

.mtop-110{
    margin-top: -110px;
}

.pleca-bottom {
    margin-top: -1px; /* Elimina espacio entre secciones */
    width: 100%;
    overflow: hidden; /* Evita que se muestren bordes irregulares */
}

/* Opcional: Ajustes para la imagen */
.pleca-bottom img {
    min-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Asegurar que el contenedor principal no corte contenido */
.bg-img {
    overflow: hidden;
}

.mb-1px{
    margin-bottom: -1px;
}

.vertical-divider {
    height: 40px;  /* Ajusta según altura de tus logos */
    width: 1px;
    background-color: #dee2e6; /* Color gris claro de Bootstrap */
    display: inline-block;
}

/* Ajustes para los logos */
.logo-main {
    max-height: 340px;
    width: auto;
}

.logo-partner {
    max-height: 440px;
    width: auto;
}

.img-footer-logo{
    width: 50%;
}

.sucursal1{
    width: 90;
    height: auto;
}
.seccion-fondo {
    background: url("{{ asset('assets/img/fondo_rosa.png') }}") no-repeat center center;
    background-size: cover; /* que se ajuste a toda la sección */
    padding: 50px 20px; /* le da aire interno */
}