@charset "UTF-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Raleway", sans-serif;
	color: #140404;
	background-color: #fff;
}



p {
	font-family: "Raleway", sans-serif;
	font-size: 21px;
	line-height: 1.4;
}


h1 {
	font-family: "Raleway", sans-serif;
	font-size: 50px;
	font-weight: 700;
}

h2 {
	font-family: "Raleway", sans-serif;
	font-size: 35px;
	font-weight: 500;
}

h3 {
  font-family: "Raleway", sans-serif;
  font-size: 25px;
  font-style: normal;
}

h4 {
  font-family: "Raleway", sans-serif;
  font-size: 25px;
  font-style: normal;
}


header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin-top: 2%;
    padding: 10px 20px;
    width: 100%;
	background-color: rgb(255,255,255,.75);
	height: 80px; 
}

.logo img {
    height: 50px;
	padding-left: 15%;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
	font-family: "Raleway", sans-serif;
	font-size: 20px;
	color: #616161;
	font-weight: normal;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #000;
	text-decoration: underline;
}

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        right: 0;
        height: 100vh;
        top: 0;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 0;
        overflow: hidden;
        transition: width 0.5s;
    }

    .nav-links li {
        margin: 20px 0;
    }

    .hamburger-menu {
        display: flex;
    }

    .nav-links.active {
        width: 50%;
    }
	
	
}






/* Sección de Parallax */
.parallax-section {
    background-image: url('../img/mental_balance_carrusel_01.jpg'); /* Ruta de la imagen */
    height: 100vh; /* Altura de toda la pantalla */
    background-attachment: fixed; /* Efecto parallax */
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Overlay para el texto */
.parallax-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 10;
}

.parallax-overlay h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.parallax-overlay h4 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Responsividad para pantallas más pequeñas */
@media (max-width: 768px) {
    .parallax-overlay h1 {
        font-size: 2rem;
    }

    .parallax-overlay p {
        font-size: 1rem;
    }
	
	.parallax-overlay h4 {
    	font-size: 1rem;
	}
	
	
}








/* ------------------------------------------------------- */
/* ------------------------------------------------------- */


/* Carrusel con parallax */
.carousel-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-attachment: fixed; /* Efecto parallax */
    background-size: cover;
    background-position: center;
}

.carousel-container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Asegura que las imágenes no se salgan del contenedor */
}

.carousel-slide {
    display: flex;
    position: relative;
    width: 300%; /* 3 imágenes = 300% */
    height: 100%;
    animation: slide 21s infinite ease-in-out; /* Animación continua */
}

.carousel-slide img {
    width: 100vw; /* Asegura que cada imagen cubra el 100% del ancho de la ventana */
    height: 100vh; /* Asegura que cada imagen cubra el 100% del alto de la ventana */
    object-fit: cover; /* Las imágenes se recortarán para llenar el espacio */
}

/* Animación del carrusel */
@keyframes slide {
    0% {
        transform: translateX(0); /* Primera imagen visible */
    }
    16.66% {
        transform: translateX(0); /* Pausa en la primera imagen */
    }
    33.33% {
        transform: translateX(-100vw); /* Segunda imagen visible */
    }
    49.99% {
        transform: translateX(-100vw); /* Pausa en la segunda imagen */
    }
    66.66% {
        transform: translateX(-200vw); /* Tercera imagen visible */
    }
    83.33% {
        transform: translateX(-200vw); /* Pausa en la tercera imagen */
    }
    100% {
        transform: translateX(0); /* Vuelve a la primera imagen */
    }
}

/* Texto fijo al frente del carrusel */
.carousel-text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 10;
}

.carousel-text h1 {
    font-size: 4rem;
    margin-bottom: 10px;
	color: #470005;
}

.carousel-text h2 {
    font-size: 2rem;
    margin-bottom: 10px;
	color:#ed635b;
	font-style: normal;
	background-color: rgba(255, 255, 255, 0.7); /* Fondo negro con 70% de opacidad */
	padding: 8px; /* Espacio interno entre el texto y el borde del fondo */
    display: inline-block; /* Asegura que el fondo cubra solo el texto */
    border-radius: 5px; /* Bordes redondeados opcionales */
}

.carousel-text p {
    font-size: 1.5rem;
    margin-bottom: 20px;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Sombra para el párrafo */
}

/* Responsividad para pantallas más pequeñas */
@media (max-width: 768px) {
    .carousel-text h1 {
        font-size: 2rem; /* Reducir el tamaño del título */
    }

    .carousel-text p {
        font-size: 1rem; /* Reducir el tamaño del párrafo */
    }
}

@media (max-width: 480px) {
    .carousel-text h1 {
        font-size: 1.5rem; /* Más pequeño en pantallas muy pequeñas */
    }

    .carousel-text p {
        font-size: 0.9rem;
    }
}







/* ------------------------------------------------------- */
/* ------------------------------------------------------- */


/* Estilos generales de la sección */
.scroll-section {
    background-image: url('../img/bg-scroll-index.png'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    height: 850px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.scroll-section h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
	color: #ed635b;
}

.scroll-section h2 {
    font-size: 2rem;
    margin-bottom: 10px;
	color:#EE7198;
	font-style: bold;
}








/* ------------------------------------------------------- */
/* ------------------------------------------------------- */


/* Estilos generales de la sección */
.hacemos-section {
    background-image: url('../img/bg-inicio-hacemos.png'); /* Imagen de fondo */
    background-size: cover;
    background-attachment: fixed; /* Efecto parallax */
	background-position: center;
    height: 950px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	text-align: justify;
}


.hacemos-section h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
	color: #ed635b;
}

.hacemos-section h2 {
    font-size: 2rem;
    margin-bottom: 10px;
	color:#EE7198;
	font-style: bold;
}


/* Responsive */
@media (max-width: 768px) {
	
	.hacemos-section {
	    height: 700px;
	}
		
	.scroll-section {
		padding-top: 5%;
	}
			
	.hacemos-section h1 {
		font-size: 30px;
		text-align: left;
}

	.hacemos-section h2 {
		font-size: 25px;
		text-align: left;
}

	.hacemos-section h3 {
		font-size: 20px;
		text-align: left;
}
	
	.hacemos-section h4 {
		font-size: 20px;
		text-align: left;
}

	.hacemos-section p {
		font-size: 15px;
		text-align: left;
}
}








/* Estilos para los tabs */
.tabs {
    margin-top: 20px;
	width: 100%;
    display: flex;
}

.tab-link {
	width: 50%; /* Ocupa el 50% de la pantalla para cada tab */
    padding: 50px;
    text-align: center;
    cursor: pointer;
    background-color: #ddd;
    color: #333;
    border: none;
    font-size: 2rem;
    transition: background-color 0.3s ease;
	font-family: "Raleway", sans-serif;
	display: inline-block;
}

.tab-link:hover {
	background-color: #f39c6b;
}

.tab-link.active {
	background-color: #e8635c; /* Color del tab activo */
    color: white;
}

/* Contenido de los tabs */
.tab-content {
    display: none;
    padding: 40px;
    width: 100%;
    text-align: left;
}

.tab-content p {
    text-align: justify;
}

.tab-content h3 {
    text-align: justify;
}

.tab-content.active {
    display: block;
}


/* Responsive */
@media (max-width: 768px) {
	.scroll-section {
		padding-top: 5%;
	}
	
	.tab-link {
		font-size: 1rem;
		padding: 30px;
		font-weight: bold;
}

}



/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Sección de beneficios */
.beneficios-section {
    background-image: url('../img/bg-circulovital-index.png'); /* Coloca aquí tu imagen de fondo */
    background-attachment: fixed; /* Efecto parallax */
    background-size: cover;
    background-position: center;
    height: 1100px;
    position: relative;
	justify-content: center;
	text-align: center;
	padding-top: 5%;
}

.beneficios-section h1 {
	color: #e8635c;
	font-weight: 800;
}

.beneficios-section h2 {
	font-weight: 800;
	text-align: center;
	color: #280202;
}


/* Cuadro de texto con botón */
.beneficios-box {
    background-color: #fbc583;
	margin: 0 5% 5%;
    padding: 10px;
    border-radius: 10px;
    color: white;
    text-align: center;
}

.beneficios-box-2 {
    background-color: #ed635b;
	margin: 5% 5%;
    padding: 30px;
    border-radius: 10px;
    color: white;
    text-align: center;
}


.p-guias {
	font-family: "Raleway", sans-serif;
	font-size: 15px;
}

.beneficios-box a {
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
	text-decoration: none;
}

.beneficios-box button:hover {
    background-color: #d74b3e;
    color: white;
}




/* Responsive */
@media (max-width: 768px) {
	.beneficios-section {
		padding-top: 25%;
		height: 230vh;
	}
}






/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Sección de banner */
.banner-section {
	background-image: url('../img/bg-descarga-ebook.png'); /* Coloca aquí tu imagen de fondo */
    background-size: cover;
    background-position: center;
    height: 230px;
}

.banner-section h2 {
	color: #ed635b;
}

.banner-section h4 {
	color: #470005;
}

.banner-section p {
	color: #ed635b;
}

.banner-box {
    background-color: #fbc583;
	margin: 3% 0;
    padding: 15px;
    border-radius: 10px;
    color: white;
    text-align: left;
	display: inline-block; /* Asegura que el fondo cubra solo el texto */

}

.banner-box a {
    color: #fff;
    border: none;
    padding: 15px 30px;
    cursor: pointer;
	text-decoration: none;
}







/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Sección de Servicios con fondo Parallax - Index - Mujeres  */
.services-section {
    background-image: url('../img/bg-beneficios-index.png'); /* Coloca aquí tu imagen de fondo */
    background-attachment: fixed; /* Efecto parallax */
    background-size: cover;
    background-position: center;
    height: 150vh;
    position: relative;
	justify-content: center;
	padding-top: 5%;
}

.services-section h1 {
	color: #e8635c;
	font-weight: 800;
}

.services-section h2 {
	font-weight: 800;
	font-size: 30px;
	text-align: left;
	color: #280202;
}

.services-section h4 {
	font-weight: 500;
	text-align: left;
	font-style: italic;
	color: #e8635c;
}

.services-section p {
	color: #280202;
}


/* Cuadro de texto con botón */
.services-box {
    background-color: #fbc583;
	margin: 5% 0% 5%;
    padding: 10px;
    border-radius: 10px;
    color: white;
    text-align: center;
	width: 50%;
}

.services-box-2 {
    background-color: #ed635b;
	margin: 1% 5% 5%;
    padding: 30px;
    border-radius: 10px;
    color: white;
    text-align: center;
}

.services-box p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.p-guias {
	font-family: "Raleway", sans-serif;
	font-size: 15px;
}

.services-box a {
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
	text-decoration: none;
}

.services-box button:hover {
    background-color: #d74b3e;
    color: white;
}




/* Responsive */
@media (max-width: 768px) {
	.services-section {
		padding-top: 25%;
		height: 160vh;
	}
	
	.services-box {
		width: 100%;
}
	
	.services-section h1 {
		font-size: 30px;
		text-align: left;
}

	.services-section h2 {
		font-size: 25px;
		text-align: left;
}

	.services-section h4 {
		font-size: 20px;
		text-align: left;
}

	.services-section p {
		font-size: 15px;
		text-align: left;
}

}





/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Sección de Servicios con fondo Parallax - Index - Familias  */
.servicesf-section {
    background-image: url('../img/bg-padres-index.png'); /* Coloca aquí tu imagen de fondo */
    background-attachment: fixed; /* Efecto parallax */
    background-size: cover;
    background-position: center;
    height: 165vh;
    position: relative;
	justify-content: center;
}

.servicesf-content {
	background-color: rgba(255,255,255,.40);
	padding: 5%;
	margin: 5% 0; 
	border-radius: 30px;
}

.servicesf-section h1 {
	color: #e8635c;
	font-weight: 800;
}

.servicesf-section h2 {
	font-weight: 800;
	text-align: left;
	color: #280202;
}

.servicesf-section h4 {
	font-weight: 500;
	text-align: left;
	font-style: italic;
	color: #e8635c;
}

.servicesf-content p {
	color: #280202;
}


/* Cuadro de texto con botón */
.servicesf-box {
    background-color: #fbc583;
	margin: 5% 0% 5%;
    padding: 10px;
    border-radius: 10px;
    color: white;
    text-align: center;
	width: 50%;
}

.servicesf-box-2 {
    background-color: #ed635b;
	margin: 1% 5% 5%;
    padding: 30px;
    border-radius: 10px;
    color: white;
    text-align: center;
}

.servicesf-box p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}


.servicesf-box a {
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
	text-decoration: none;
}

.servicesf-box button:hover {
    background-color: #d74b3e;
    color: white;
}




/* Responsive */
@media (max-width: 768px) {
	.servicesf-section {
		padding-top: 25%;
		height: 220vh;
	}
	.servicesf-section h1 {
		font-size: 30px;
		text-align: left;
}

	.servicesf-section h2 {
		font-size: 25px;
		text-align: left;
}

	.servicesf-section h4 {
		font-size: 20px;
		text-align: left;
}

	.servicesf-section p {
		font-size: 15px;
		text-align: left;
}
}





/* ------------------------------------------------------- */
/* ------------------------------------------------------- */


/* Estilos generales de la sección */
.contact-section {
    background-image: url('../img/mental_balance_02.png'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    height: 950px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.contact-section h1 {
    font-size: 3rem;
    margin-bottom: 10px;
	color: #ed635b;
}

.contact-section h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
	color:#EE7198;
	font-style: bold;
}


.contact-section p {
    font-size: 1rem;
	text-align: justify;
}


/* Responsive */
@media (max-width: 768px) {
	.contact-section {
		height: 1000px;
    }
	
	.contact-section h1 {
		font-size: 30px;
		text-align: left;
}

	.contact-section h2 {
		font-size: 25px;
		text-align: left;
}

	.contact-section h3 {
		font-size: 20px;
		text-align: left;
}
	
	.contact-section h4 {
		font-size: 20px;
		text-align: left;
}

	.contact-section p {
		font-size: 15px;
		text-align: left;
}
}






/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Sección de Filosofía */
.filosofia-section {
    background-image: url('../img/bg-filosofia-hacemos.png'); /* Coloca aquí tu imagen de fondo */
    background-attachment: fixed; /* Efecto parallax */
    background-size: cover;
    background-position: center;
    height: 900px;
    position: relative;
	justify-content: center;
	padding-top: 10%;
	text-align: justify;
}

.filosofia-section h1 {
	color: #e8635c;
	font-weight: 800;
	margin-bottom: 5%;
}

.filosofia-section h2 {
	font-weight: 800;
	text-align: left;
	color: #280202;
}


.filosofia-section p {
	color: #280202;
}

/* Responsive */
@media (max-width: 768px) {
	.filosofia-section {
		padding-top: 25%;
		height: 1000px;
	}
	
	.filosofia-section h1 {
		font-size: 30px;
		text-align: left;
}

	.filosofia-section h2 {
		font-size: 25px;
		text-align: left;
}

	.filosofia-section h3 {
		font-size: 20px;
		text-align: left;
}
	
	.filosofia-section h4 {
		font-size: 20px;
		text-align: left;
}

	.filosofia-section p {
		font-size: 18px;
		text-align: left;
}
}





/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Sección de Valores */
.valores-section {
	background-color: #CFB1B1;
    background-size: cover;
    background-position: center;
    height: 1280px;
    position: relative;
	justify-content: center;
	padding-top: 10%;
}

.valores-section h1 {
	color: #fff;
	font-weight: 800;
	margin-bottom: 5%;
}

.valores-section h2 {
	font-weight: 800;
	text-align: left;
	color: #fff;
}


.valores-section p {
	font-size: 19px;
	color: #fff;
	text-align: justify;
}

.valores-section img {
	margin: 5% 0%;
}


/* Cuadro de texto con botón */
.valores-box {
	margin: 5% 5% 5%;
    padding: 10px;
    border-radius: 10px;
    color: white;
    text-align: left;
}

.valores-box h3 {
    color: #fff;
    text-align: left;
}


/* Responsive */
@media (max-width: 768px) {
	.valores-section {
		padding-top: 25%;
		height: 1800px;
	}
	
	.valores-section h1 {
		font-size: 30px;
		text-align: left;
}

	.valores-section h2 {
		font-size: 25px;
		text-align: left;
}

	.valores-section h3 {
		font-size: 20px;
		text-align: left;
}
	
	.valores-section h4 {
		font-size: 20px;
		text-align: left;
}

	.valores-section p {
		font-size: 15px;
		text-align: left;
}
	
	
}




/* ------------------------------------------------------- */
/* ------------------------------------------------------- */


/* Sección de banner footer */
.banner-footer {
	background-color:#470005;
	color:#fff;
	padding: 2% 0;
}

/* Responsive */
@media (max-width: 768px) {
	
	.banner-footer h1 {
		font-size: 30px;
		text-align: left;
}

	.banner-footer h2 {
		font-size: 25px;
		text-align: left;
}

	.banner-footer h3 {
		font-size: 20px;
		text-align: left;
}
	
	.banner-footer h4 {
		font-size: 20px;
		text-align: left;
}

	.banner-footer p {
		font-size: 15px;
		text-align: left;
}
	
	
}







/* ------------------------------------------------------- */
/* ------------------------------------------------------- */


/* Sección servicios page */
.servicios-page-section {
    background-image: url('../img/bg-inicio-servicios.png'); /* Imagen de fondo */
    background-attachment: fixed; /* Efecto parallax */
	background-size: cover;
    background-position: center;
    height: 850px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.servicios-tab-section { 
    background-size: cover;
    background-position: center;
    height: 1228px;
    position: relative;
    z-index: 2;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	margin-top: -10%;
}

.servicios-tab-contentm { 
	background-image: url('../img/bg-circulo-servicios.png'); /* Imagen de fondo */
	background-attachment: fixed; /* Efecto parallax */
}

.servicios-tab-contentp { 
	background-image: url('../img/bg-circulo-padres.png'); /* Imagen de fondo */
	background-attachment: fixed; /* Efecto parallax */
}


.servicios-page-section h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
	color: #ed635b;
}

.servicios-page-section h2 {
    font-size: 2rem;
    margin-bottom: 10px;
	color:#EE7198;
	font-style: bold;
}


.servicios-tab-section h1 {
	color: #e8635c;
	font-weight: 800;
}

.servicios-tab-section h2 {
	font-weight: 800;
	text-align: left;
	color: #280202;
}

.servicios-tab-section h4 {
	font-weight: 500;
	text-align: left;
	font-style: italic;
	color: #e8635c;
}

.servicios-tab-section p {
	color: #280202;
}


/* Responsive */
@media (max-width: 768px) {
	.servicios-tab-section { 
		height: 2100px;
		background-color: #ed635b;
	}

	.servicios-page-section {
    	background-position: left;
    	height: 550px;
}
		
	.servicios-page-section h1 {
		font-size: 30px;
		text-align: left;
}

	.servicios-page-section h2 {
		font-size: 25px;
		text-align: left;
}

	.servicios-page-section h3 {
		font-size: 20px;
		text-align: left;
}
	
	.servicios-page-section h4 {
		font-size: 20px;
		text-align: left;
}

	.servicios-page-section p {
		font-size: 15px;
		text-align: left;
}

	.servicios-tab-section h1 {
		font-size: 30px;
		text-align: left;
}

	.servicios-tab-section h2 {
		font-size: 25px;
		text-align: left;
}

	.servicios-tab-section h3 {
		font-size: 20px;
		text-align: left;
}
	
	.servicios-tab-section h4 {
		font-size: 20px;
		text-align: left;
}

	.servicios-tab-section p {
		font-size: 18px;
		text-align: left;
}
}











/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Sección de Servicios con fondo Parallax */
.tool-section {
    background-image: url('../img/mental_balance_bg.png'); /* Coloca aquí tu imagen de fondo */
    background-attachment: fixed; /* Efecto parallax */
    background-size: cover;
    background-position: center;
    height: 300vh;
    position: relative;
    display: flex;
	justify-content: center;
	text-align: center;
	padding-top: 12%;
	padding-bottom: 15%;
}

.tool-margin {
    padding: 0 3%;
}

.tool-section h1 {
	color: #e8635c;
	font-weight: 800;
}

.tool-section h2 {
	font-weight: 800;
	text-align: center;
	color: #280202;
}


/* Cuadro de texto con botón */
.tool-box {
    background-color: #e8635c;
	margin: 6% 5% 5%;
    padding: 30px;
    border-radius: 10px;
    color: white;
    text-align: center;
}

.tool-boxc {
	margin: 3% 5% 5%;
    padding: 10px;
    text-align: center;
}

.tool-boxc img {
    border-radius: 10px;
}

.tool-box p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.p-guias {
	font-family: "Raleway", sans-serif;
	font-size: 15px;
}


/* Imagen rotada 45 grados */
.rotated-image {
    transform: rotate(270deg);
    transition: transform 0.5s ease; /* Para una transición suave si agregas efectos */
}


/* Responsive */
@media (max-width: 768px) {
	.tool-section {
		padding-top: 25%;
		height: 550vh;
	}
}



/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Estilos generales de la sección */
.action-section {
    background-image: url('../img/mental_balance_03.png'); /* Imagen de fondo */
	background-repeat: no-repeat;
	background-position: top;
    height: 800px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
	color: #280202;
}


/* Responsive */
@media (max-width: 768px) {
	.action-section {
		padding-top: 5%;
	}
	
}





/* ------------------------------------------------------- */
/* ------------------------------------------------------- */


/* Estilos del Footer */
footer {
    background-color: #E8635C;
    color: white;
    padding: 40px;
    width: 100%;
    box-sizing: border-box;
}

.footer-container {
    justify-content: space-between;
    align-items: flex-start;
    margin: 2% auto;
}

.footer-container a {
	color: #fff;
	text-decoration: none;
}

.footer-container a:hover {
	text-decoration: underline;
}


/* Responsive */
@media (max-width: 768px) {
	
    .footer-container {
		margin: 8% auto;
	}
	
}






/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

.contact-info h2, .contact-form h2 {
    margin-bottom: 20px;
}

.contact-info p {
    margin: 5px 0;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: 5px;
}

.contact-form input, .contact-form textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
}

.contact-form input[type="submit"] {
    background-color: #280202;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

.contact-form input[type="submit"]:hover {
    background-color: #280202;
}