/* SERVICIOS INDEX */
/* SERVICIOS INDEX */
/* SERVICIOS INDEX */
.ftco-intro .services {
    padding: 30px;
    border: dashed 5px #F2761D;
    border-radius: 4px; 
    color: white;
  }
 


    @media (min-width: 992px) {
      .ftco-intro .services {
        margin-top: -50px; } }

        .services:hover, .services.active {
          background-image: url('/img/banner_huellas.png');
        }
.ftco-no-pt {
    padding-top: 0 !important; 

  }
    .ftco-section {
        padding: 7em 0;
        position: relative; }
      

        @media (max-width: 767.98px) {
          .ftco-section {
            padding: 6em 0; } }

            .services {
                display: block;
                width: 100%;
                position: relative;
          
                -webkit-box-shadow: 0px 8px 21px -10px rgba(0, 0, 0, 0.08);
                -moz-box-shadow: 0px 8px 21px -10px rgba(0, 0, 0, 0.08);
                box-shadow: 0px 8px 21px -10px rgba(0, 0, 0, 0.08);
                -moz-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                transition: all 0.3s ease; }


                .services .icon {
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  width: 100px;
                  height: 100px;
                  line-height: 1.3;
                  border-radius: 50%;
                  background: #f0f0f0;
                  margin: 0 auto;
                  margin-bottom: 20px;
                  margin-top: -50px;
                  border: solid 5px #F2761D;
                
                }
                  .services .icon span {
                    font-size: 40px;
                    color: #015351; }



                .services .media-body {
                  margin-top: 40px;
                  -moz-transition: all 0.3s ease;
                  -o-transition: all 0.3s ease;
                  -webkit-transition: all 0.3s ease;
                  -ms-transition: all 0.3s ease;
                  transition: all 0.3s ease; }
                  .services .media-body h3 {
                    font-weight: 700;
                    font-size: 20px;
                    color: white;
                    -moz-transition: all 0.3s ease;
                    -o-transition: all 0.3s ease;
                    -webkit-transition: all 0.3s ease;
                    -ms-transition: all 0.3s ease;
                    transition: all 0.3s ease; }
                  .services .media-body .btn-custom {
                    position: absolute;
                    bottom: -25px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background: #015351;
                    -webkit-box-shadow: 0px 10px 30px -4px rgba(0, 0, 0, 0.15);
                    -moz-box-shadow: 0px 10px 30px -4px rgba(0, 0, 0, 0.15);
                    box-shadow: 0px 10px 30px -4px rgba(0, 0, 0, 0.15); }
                    .services .media-body .btn-custom span {
                      color: #fff; }

                  
                  .services:hover .icon, .services.active .icon {
                    background: #fff; }
                  .services:hover .media-body, .services.active .media-body {
                    color: rgba(255, 255, 255, 0.9); }
                    .services:hover .media-body h3, .services.active .media-body h3 {
                      color: #fff; }
                  .services:hover .btn-custom, .services.active .btn-custom {
                    background: #fff;
                    right: -20px; }
                    .services:hover .btn-custom span, .services.active .btn-custom span {
                      color: #015351; }
                @media (max-width: 991.98px) {
                  .services {
                    margin-bottom: 128px;
                    ; }
                   .dogdaycare{
                    margin-bottom: -50px !important;
                    margin-top: -30px !important;
                   }
                   .dogboarding{
                    margin-top: -30px !important;
                    margin-bottom: -40px !important;
                   } 
                   .dogtrip{
                    margin-top: -55px !important;

                   } 
                   .titulo{
                    color: white !important;
                    font-family: 'Preahvihear', sans-serif;
                    margin-top: 15px !important;
                   }
                   .carta{
                    margin-bottom: 4%;
                   }

            
            }
              
              .services-2 {
                width: 100%;
                margin-bottom: 20px; }
                .services-2 .icon {
                  width: 70px;
                  height: 70px;
                  border-radius: 50%;
                  background: #015351;
                  -webkit-box-shadow: 0px 10px 30px -4px rgba(0, 0, 0, 0.15);
                  -moz-box-shadow: 0px 10px 30px -4px rgba(0, 0, 0, 0.15);
                  box-shadow: 0px 10px 30px -4px rgba(0, 0, 0, 0.15); }
                  .services-2 .icon span {
                    font-size: 40px;
                    color: #fff; }
                .services-2 .text {
                  width: calc(100% - 60px); }
                  .services-2 .text h4 {
                    font-size: 20px;
                    font-weight: 700; }    
                    
                    .container {
                      margin-top: 1px; /* Ajusta el valor según necesites */
                      z-index: 0;
                    }
/* FIN SERVICIOS INDEX */
/* FIN SERVICIOS INDEX */
/* FIN SERVICIOS INDEX */

/* .CARROUSEL INDEX */
/* CARROUSEL INDEX */
/* CARROUSEL INDEX */

.image-container {
  position: relative; /* Asegurarse de que el contenedor tenga posición relativa */
  overflow: hidden; /* Para recortar cualquier contenido que se salga del contenedor */

}
#container {
  transition: transform 0.3s ease; /* Añade una transición suave para la transformación */
}
#container:hover {
  transform: scale(1.1); /* Cuando el mouse está encima del contenedor, escala el tamaño al 110% */
}
.text-center-carousel {
  padding: 20px; /* Añade un poco de espacio para que el texto se destaque */
}

/* Estilo para pantallas grandes (600px o más) */
@media (min-width: 600px) {
.carrousel{
height: 80vh; /* Ajusta el valor según tus necesidades */
object-fit: cover; 
}
.text-center-carousel{
padding-bottom: 59px;
}
}

@media (min-width: 700px) { 
.text-center-carousel{
padding-bottom: 100px;
}
}
@media (min-width: 900px) { 
.text-center-carousel{
padding-bottom: 320px;

}
.carrousel{
height: 65vh; /* Ajusta el valor según tus necesidades */
object-fit: cover; 
}
}


.carousel-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  text-align: center;
  width: 80%;
}

.btn {
  font-size: 25px;
  padding: 10px 30px;
  border-radius: 30px;
  background: #F2761D;
}
@media (max-width: 800px) {
  .carousel-caption {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -60%);
    text-align: center;
    width: 80%;
  }
  .btn {
    font-size: 10px;
    padding: 6px 20px;
    border-radius: 30px;
    background: #F2761D;
    color: white;
  }
  .titulo {
    color: white;
    font-size: 2rem;
    z-index: 1;
}
}


.carousel-section {
  position: relative;
  height: auto;
  color: #fff;
  overflow: hidden;
  background-color: #333; /* Color de fondo del carrusel */
}
@media (min-width: 992px) {
  /* Aplicar estilos solo en pantallas mayores o iguales a 992px */
  .carousel-section {
    height: 80vh; /* Altura para pantallas grandes */
  }
  
}

.carousel-item img {


  
  transform: translateY(-50%);

}

#carouselExampleIndicators {
  position: relative;
  height: 100%;
}

.carousel-inner {
  height: 100%;
  
}

.carrousel{
 height: 90vh; 
 z-index: 0;
 
}
@media (max-width: 700.98px) {
  h1{
    font-size: medium;
  }
  .carrousel{
    height: 22vh; 
    z-index: 0;
   }


  }


  @media (max-width: 600.98px) {
    h1{
      font-size: inherit;
      
    }

    }
  .carousel-control-next, .carousel-control-prev{

    bottom: 40px;
  }






.carousel-caption h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.carousel-caption p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}


#content {
  background-color: #f8f8f8;
  padding: 50px 0;
}

  /* Aplicar estilos solo en pantallas mayores o iguales a 992px */
  .carousel-section {
    height: 100vh; /* Altura para pantallas grandes */
  }


        /* Estilo para pantallas grandes (600px o más) */

/* FIN CARROUSEL INDEX */
/* FIN CARROUSEL INDEX */
/* FIN CARROUSEL INDEX */



/* CHOOSE MY US INDEX */
/* CHOOSE MY US INDEX */
/* CHOOSE MY US INDEX */


.d-flex {
  display: flex!important;
}

.img, .blog-img, .user-img {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}




.services-2 .text {
width: calc(100% - 60px);

}
.pl-3, .px-3 {
padding-left: 1rem !important;
}




/* TESTIMONIOS INDEX */
/* TESTIMONIOS INDEX */
/* TESTIMONIOS INDEX */
.testimonial-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  }
  .testimonial-card {
    max-width: 300px; /* Establece el ancho máximo deseado */
    margin: 0 auto; /* Centra horizontalmente el contenido */
  }
  #testimonials {

    background-size: cover; /* Ajusta la imagen para cubrir todo el espacio */
    background-position: center; /* Centra la imagen horizontal y verticalmente */
    background-attachment: fixed; /* Fija la imagen de fondo */
    width: 85%;
    margin-top: 4%;
  
  }
  .carta{
    background-image: url('/img/banner_huellas.png');
  }

  .zoom:hover{
    transform: scale(1.1);

}