.section1 {
    background-image: url('../img/pupp3.jpg');
    background-size: cover;
    background-position: center center;
    height: 200px; /* Ajusta esta altura según tus necesidades */
}

/* Para ocultar la imagen al hacer scroll */
.section1 {
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease-in-out;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color de fondo semitransparente */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.section1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* Necesario para el pseudo-elemento */
    overflow: hidden; /* Asegura que el pseudo-elemento no sobresalga */
}

.overlay1::before {
    content: ""; /* Necesario para mostrar el pseudo-elemento */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.45); /* Color de fondo con opacidad */
    z-index: 1; /* Asegura que el overlay esté detrás del texto */
}

.section1 p {
    position: relative; /* Asegura que el texto esté por encima del overlay */
    z-index: 2; /* Asegura que el texto esté en el frente */
    color: black; /* Color del texto */
    font-size: 2.5rem; /* Estilos para el párrafo */
    width: 80%;
    text-align: center;
    font-family: cartoon;
    font-weight: 600;
}

nav {
    position: fixed; /* Asegura que el nav esté fijo */
    width: 100%; /* Asegura que el nav ocupe todo el ancho */
    z-index: 10; /* Valor alto para que esté por encima de las secciones */
}

/* Estilo para que las secciones se vean bien */
.section {
    padding-top: 70px; /* Espacio para el nav fijo */
}

.carousel .indicators{
  position: relative;
}

@font-face {
  font-family: "cartoon";
  src: url("../fonts/Cartoon.ttf");
}
@font-face {
  font-family: "cartoon1";
  src: url("../fonts/Cartoon2.ttf");
}
@font-face {
  font-family: "chancur";
  src: url("../fonts/chancur.ttf");
}
@font-face {
  font-family: "cursh";
  src: url("../fonts/cursh.TTF");
}



.Btn {
display: flex;
align-items: center;
justify-content: flex-start;
width: 65px;
height: 65px;
border: none;
border-radius: 50%;
cursor: pointer;
position: fixed; /* Cambiar a fixed para que flote */
bottom: 20px; /* Espaciado desde la parte inferior */
right: 20px; /* Espaciado desde la derecha */
overflow: hidden;
transition-duration: 0.3s;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
background-color: #00d757;
}

.sign {
width: 100%;
transition-duration: 0.3s;
display: flex;
align-items: center;
justify-content: center;
}

.sign svg {
width: 25px;
}

.sign svg path {
fill: white;
}
.text {
position: absolute;
right: 0%;
width: 0%;
opacity: 0;
color: white;
font-size: 1.2em;
font-weight: 600;
transition-duration: 0.3s;
}

.Btn:hover {
width: 150px;
border-radius: 40px;
transition-duration: 0.3s;
}

.Btn:hover .sign {
width: 30%;
transition-duration: 0.3s;
padding-left: 10px;
}

.Btn:hover .text {
opacity: 1;
width: 70%;
transition-duration: 0.3s;
padding-right: 10px;
}
.Btn:active {
transform: translate(2px, 2px);
}
.card{
cursor: pointer;
}
.contact-section {
  display: flex;
  justify-content: space-between;
  padding: 40px;
}

.contact-form {
  flex: 3;
  margin-right: 20px; /* Espacio entre el formulario y el mapa */
}

.contact-map {
  flex: 2;
  height: 400px; /* Altura del mapa */
}
.carousel .carousel-item1{
width: 450px;
font-size: 1.25rem;
}
.card .card-image .card-title{
color: darkblue;
font-family: cartoon;
font-size: 2.5rem;
}
.card-content{
padding-top: 0;
}

.central-image {
width: 95%;
height: auto;
}
.thumbnail {
cursor: pointer;
transition: transform 0.3s ease;
width: 150px;
border: 1px solid gray;
border-radius: 15px;;
}
.thumbnail:hover {
transform: scale(1.1);
}

@media only screen and (max-width: 600px) {
.brand-logo {
font-size: 1.5rem;
}
}




.carousel1 {
width: 100%;
}

.carousel-item1 {
display: inline-block;
}

/* Para el contenedor de las tarjetas */
.elemcard {
width: 100%;
margin: 0 auto;
}

.grid-container {
/* Hace que la cuadrícula tenga un scroll vertical si hay más elementos */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.grid-item {
/* Cada item ocupa un 32% del ancho para simular la cuadrícula 3x3 */
width: 32%;
margin-bottom: 10px;
}
.imgMult1{
border-radius: 15px;
border: solid gray 2px;
}

/* Hacer que las tarjetas sean delgadas en móviles */
@media only screen and (max-width: 600px) {
.carousel-item1 {
  width: 80%; /* Las tarjetas ocupan el 80% del ancho para mostrar el fondo */
  margin-left: 10%; /* Centrarlas */
}
.carousel-item1{
width: 85% !important; /* Las tarjetas ocupan el 80% del ancho para mostrar el fondo */
  margin-left: 0% !important;
}

/* Ajuste de fuente y espaciado para que se vea mejor en móviles */
.card-content p {
  font-size: 12px; /* Reducir el tamaño del texto */
}

.card-title {
  font-size: 18px; /* Ajustar el título */
}

.card-action a {
  font-size: 12px; /* Reducir el tamaño del botón */
}

/* Imagen responsiva */
.card-image img {
  width: 100%;
  height: auto;
}
.brand-logo{
width: 80%;
}
h2{
font-size: 2.5rem !important;
}
h3{
font-size: 2.2rem !important;
}
.section1 p{
font-size: 1.5rem;
}
.section2{
height: 800px !important;
overflow: hidden !important;
}
.carousel2{
height: 250px !important;
}

.col.s61 {
  width: 100%;
}
.grid-item {
  width: 48%; /* Dos columnas en pantallas más pequeñas */
}
}