@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);


 .cardd {
	 display: grid;
	 place-items: center;
	 height: 100vh;
	 background: var(--color-background);
	 color: #fdfdfd;
	 font-family: 'Poppins', sans-serif;
	 -color-background: #02494d;
	 --color-card: #0e2127;
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
}


.cardd2 {
	display: grid;
	place-items: center;
	height: 100vh;
	background: var(--color-background);
	color: #fdfdfd;
	font-family: 'Poppins', sans-serif;
	-color-background: #02034d;
	--color-card: #0e1127;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.cardd3 {
	display: grid;
	place-items: center;
	height: 100vh;
	background: var(--color-background);
	color: #fdfdfd;
	font-family: 'Poppins', sans-serif;
	-color-background: #02494d;
	--color-card: #1c0e27;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.cardd4 {
	display: grid;
	place-items: center;
	height: 100vh;
	background: var(--color-background);
	color: #fdfdfd;
	font-family: 'Poppins', sans-serif;
	-color-background: #02494d;
	--color-card: #270e24;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.cardd5 {
	display: grid;
	place-items: center;
	height: 100vh;
	background: var(--color-background);
	color: #fdfdfd;
	font-family: 'Poppins', sans-serif;
	-color-background: #02494d;
	--color-card: #270e10;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


 .card {
	 display: flex;
	 align-items: center;
	 width: 75vw;
	 max-width: 650px;
	 padding: 50px;
	 background: var(--color-card);
	 border-radius: 25px;
}
 .card img {
	 max-width: 280px;
	 width: 35vw;
	 height: 300px;
	 object-fit: cover;
	 object-position: center;
	 margin-left: -100px;
	 margin-right: 40px;
	 border-radius: inherit;
	 box-shadow: 0 60px 40px rgba(0, 0, 0, 5);
	 transition: all 0.5s;
}
 .card h2 {
	 font-size: 30px;
	 font-weight: 400;
}
 .card h3 {
	 font-size: 22px;
	 font-weight: 400;
	 opacity: 0.75;
}
 .card p {
	 font-size: 14px;
	 font-weight: 200;
	 margin-top: 10px;
	 margin-bottom: 30px;
	 opacity: 0.5;
	 max-width: 360px;
}
 .card button {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 250px;
	 height: 50px;
	 border: 1px solid #fdfdfd;
	 border-radius: 40px;
	 background: transparent;
	 color: #fdfdfd;
	 font-size: 16px;
	 text-transform: uppercase;
	 font-weight: 600;
	 letter-spacing: 1px;
	 cursor: pointer;
	 transition: all 0.5s;
}
 .card button:hover {
	 background: #fdfdfd;
	 color: var(--color-card);
	 font-size: 22px;
}
 .card:hover img {
	 transform: scale(1.1);
}
/* MEDIA QUERY */
 @media (max-width: 600px) {
	 .card {
		 text-align: center;
		 flex-direction: column;
	}
	 .card img {
		 margin: -100px 0 30px 0;
		 width: 100%;
		 max-width: 1000px;
	}
	 .card button {
		 width: 100%;
	}
}
 @media (max-width: 400px) {
	 .card img {
		 height: 45vw;
		 width: 45vw;
		 border-radius: 50%;
	}
}
 


       
        .slider-container {
            position: relative;
            
           
            margin: auto;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

       
        .slide {
            display: none; 
            width: 100%;
        }

        .active {
            display: block;
        }

    
        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
        }

        .nav-button.left {
            left: 10px;
        }

        .nav-button.right {
            right: 10px;
        }
  
	


.slide-prev {
    transform: translateX(-100%); 
}

.slide-next {
    transform: translateX(100%); 
}

/* Estilos básicos */
.slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slide.active {
    display: block;
    opacity: 1;
}

/* Animaciones para la transición de deslizamiento */
.slide-prev {
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.slide-next {
    transform: translateX(100%);
    transition: transform 0.5s ease;
	
}

.card {
    transition: transform 0.5s ease;
}

.card:hover {
    transform: scale(1.05); /* Efecto al pasar el mouse */
}