.collapsible {
		background-color: #ffe5e5;
		color: white;
		cursor: pointer;
		padding: 18px;
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
		font-size: 15px;
		border-radius: 10px;
	}

	.active, .collapsible:hover {
		background-color: #e1dadb;  
		transform: translateY(-3px);  
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
	}

	.content-collapse {
		padding: 0 18px;
		max-height: 0;  
		overflow: hidden;
		transition: max-height 0.3s ease-out;  
		background-color: #f1f1f1;
		border-radius: 0 0 10px 10px; 
	}
	body {
			font-family: "MontserratBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
			margin: 0;
		}
		.header {
			padding: 2% 0;
			height: 50px;
			width: 100%;
			display: flex;
			align-items: center;
		}
		.header .div1 img {
			width: 200px;
			margin-left:10%;
		}
		.header .div2 {
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.header .div2 .link {
			color: black;
			font-weight: 600;
			font-size: 23px;
			position: relative;
			text-decoration: none;
		}
		.header .div3 {
			display: none !important;
		}
		@media only screen and (max-width: 1400px) {
		  .header .div2 .link {
			font-size: 19px !important;
		  }
		}
		@media only screen and (max-width: 1150px) {
		  .header .div2 .link {
			font-size: 14px !important;
		  }
		}
		@media only screen and (max-width: 950px) {
		  .header .div2 {
			display:none !important;
		  }
		  .header .div3 {
			  display: block !important;
		  }
		  .header {
			  min-height: 80px !important;
			  
			  justify-content: center !important;
		  }
		  .contenido-logros {
			  flex-direction: column !important;
		  }
		  .tercer-contenido { 
			flex-direction: column !important;
		  }
		  .primer-contenido-abajo .segundo-contenido {
			margin: 0;
		  }
		  .tercer-contenido {
			width:auto !important;
		  }
		  .formulario {
			  margin: 2% 0;
			  width: auto !important;
		  }
		  .politica {
			  font-size:14px !important;
		  }
		  .contenedor-necesita {
			  max-height: none !important;
			  flex-direction: column-reverse !important;
			  align-items: center !important;
		  }
		  .flex  {
			flex-direction: column;
		  }
		}
		.header .div2 .link:hover {
			cursor: pointer;
			color: #e20613;
		}
		.header .div2 .gap {
			margin: 0 2%;
		}
.banner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background-image: url("../images/socio-wall.jpg");
	background-size: cover;
	height: 400px;
}
		
		.banner .pompa-banner {
            margin-left: 2%;
            padding: 20px;
            background: white;
        }

        .typewriter {
            display: inline-block;
            font-weight: 600;
            color: #e20613;
            border-right: 2px solid #e20613;
            padding-right: 5px;
            animation: blink 0.7s step-end infinite; /* Blinking cursor */
        }

        @keyframes blink {
            50% {
                border-color: transparent;
            }
        }
		.contenido-logros {
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: center;
			
		}
		.primer-contenido {
			padding: 2%;
			background-color: #18223e;
			margin-top:2% ;
		}
		.primer-contenido .contenido-logros .logro {
			margin: 2%;
			height: 150px;
			background-size: cover;
			background-position: center;
		}

		.logro {
			border-radius:22px;
            width: auto;
            height: 150px;
            opacity: 0; 
            transform: translateX(-50px); 
            animation: slide-in 1s forwards; 
        }

        .logro:nth-child(1) {
            animation-delay: 0.2s; 
        }

        .logro:nth-child(2) {
            animation-delay: 0.4s; 
        }

        .logro:nth-child(3) {
            animation-delay: 0.6s; 
        }

        @keyframes slide-in {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
		
		.segundo-contenido {
			padding: 2% 2%;
			margin: 2% 4% 4% 4%;
			background-color: #f2f2f2;
			border-radius: 22px;
		}
		.primer-contenido-abajo {
			padding: 2%;
			background-color: #192745;
			margin-bottom: 2%;
		}
		.primer-contenido-abajo .segundo-contenido {
			padding: 2% 2% !important;
			margin: 1% 1% 1% 1% !important;
			background-color: rgba(242, 242, 242, 1) !important;  
			border-radius: 22px;
		}
		.contenedor-necesita {
			padding: 3%;
			border-radius:22px;
			background-color: red;
			display:flex;
			margin: 0 4%;
		}
		.necesitar {
			height:fit-content;
			background-color: white;
			padding: 2%;
			border-radius: 12px;
		}
		.necesitar p {
			color: #e20613;
		}
		.cartelera {
			margin-left: 2%;
			width:100%;
			text-align:center;
		}
		.mensajes {
			display: flex;
			justify-content: center;
			width: 100%;
			background-color:white;
			border-radius:22px;
			margin: 2%;
		}
		.socio-button {
			background-color: #e20613;  
			color: white;
			padding: 12px 24px;
			border: none;
			border-radius: 22px;  
			font-size: 18px;
			font-weight: bold;
			text-transform: uppercase;
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}
		.socio-button-mocked {
			background-color: #e20613;  
			color: white;
			padding: 12px 24px;
			border: none;
			border-radius: 22px;  
			font-size: 18px;
			font-weight: bold;
			text-transform: uppercase;
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}

		.socio-button:hover {
			background-color: #b0050f;  
			transform: translateY(-3px);  
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
		}

		.socio-container {
			text-align: center;  
			margin-top: 20px;
		}
		.tercer-contenido {
			width:100%;
			display:flex;
		}
		.tercer-contenido .division {
			padding: 2%;
			width: inherit;
			align-items: center;
			margin: 1% 2%;
			border-radius: 22px;
			background-color: #f2f2f2;
		}
		
		.tercer-contenido .division .subdivision {
			display:flex;
			align-items: flex-end;
			margin: 0 2%;
			border-radius: 22px;
			background-color: #f2f2f2;
		}
		
		.tercer-contenido .division .subdivision .icono {
			width: 70px;
			height: 70px;
		}
		.tercer-contenido .division .subdivision .plus {
			width: 30px;
			height: 30px;
		}
		.tercer-contenido .division hr {
			height:2px; 
			background-color:red;  
			border-style: none;
		}
		.tercer-contenido p {
			color: gray;
			margin: 0;
			font-size: 14px;
			text-align: justify;
		}
		.tercer-contenido .division .subdivision p {
			color: #2b2a2a;
			margin: 0;
			font-size: 22px;
			text-align: justify;
		}
.cuarto-contenido {
	display: flex;
	text-align: center;
	background-image: url(../images/ColaboraConNosotros.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	align-items: center;
	flex-direction: column;
}
		.formulario {
		border-radius:22px;
		padding: 2%;
		width: 40%;
		background-color:#f2f2f2;
	}
	.formulario .contenido-2 .llamada-gratis {
		border: solid red 2px;
		margin: 2% 20%;
	}
	.cuarto-contenido .formulario p {
		color: #2b2a2a;
		font-size: 22px;
	}
	.cuarto-contenido .formulario .llamada-gratis p {
		color: #2b2a2a;
		font-size: 22px;
		margin:1% 1%;
	}
	.footer {
		width:100%;
		margin: 4% 0 0 0;
		padding:15px 0;
		color:white;
		text-align:center;
		background-color: #e72d40;
	}
	.footer p{
		font-size: 20px;	
	}
	.form-control {
		display: block;
		width: 95%;
		height: 34px;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.42857143;
		color: #555;
		background-color: #fff;
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	}
	/* MENU STYLES */
		.div3{
		  position: fixed;
		  top: 0;
		  left: 0;
		  z-index: 1;
		}

		.div3 .toggler {
		  position: absolute;
		  top: 0;
		  left: 0;
		  z-index: 2;
		  cursor: pointer;
		  width: 50px;
		  height: 50px;
		  opacity: 0;
		}

		.div3 .hamburger {
		  position: absolute;
		  top: 0;
		  left: 0;
		  z-index: 1;
		  width: 60px;
		  height: 60px;
		  padding: 1rem;
		  background: var(--primary-color);
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}

		/* Hamburger Line */
		.div3 .hamburger > div {
		  position: relative;
		  flex: none;
		  width: 100%;
		  height: 2px;
		  background: #e20613;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  transition: all 0.4s ease;
		}

		/* Hamburger Lines - Top & Bottom */
		.div3 .hamburger > div::before,
		.div3 .hamburger > div::after {
		  content: '';
		  position: absolute;
		  z-index: 1;
		  top: -10px;
		  width: 100%;
		  height: 2px;
		  background: inherit;
		}

		/* Moves Line Down */
		.div3 .hamburger > div::after {
		  top: 10px;
		}

		/* Toggler Animation */
		.div3 .toggler:checked + .hamburger > div {
		  transform: rotate(135deg);
		}

		/* Turns Lines Into X */
		.div3 .toggler:checked + .hamburger > div:before,
		.div3 .toggler:checked + .hamburger > div:after {
		  top: 0;
		  transform: rotate(90deg);
		}

		/* Rotate On Hover When Checked */
		.div3 .toggler:checked:hover + .hamburger > div {
		  transform: rotate(225deg);
		}

		/* Show Menu */
		.div3.toggler:checked ~ .menu {
		  visibility: visible;
		  width:100%;
		  height: 100%;
		}

		.div3 .toggler:checked ~ .menu > div {
		  transform: scale(1);
		  transition-duration: var(--menu-speed);
		  background-color: #000000d1 !important;
		  
		}

		.div3 .toggler:checked ~ .menu > div > div {
		  opacity: 1;
		  transition:  opacity 0.4s ease 0.4s;
		}

		.div3 .menu {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 0;
		  height: 0;
		  overflow: hidden;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}

		.div3 .menu > div {
		  background: var(--overlay-color);
		  width: 200vw;
		  height: 200vw;
		  display: flex;
		  flex: none;
		  align-items: center;
		  justify-content: center;
		  transform: scale(0);
		  transition: all 0.4s ease;
		}

		.div3 .menu > div > div {
		  text-align: center;
		  max-width: 90vw;
		  max-height: 100vh;
		  opacity: 0;
		  transition: opacity 0.4s ease;
		}

		.div3 .menu > div > div > ul > li {
		  list-style: none;
		  color: #e20613;
		  font-size: 1.5rem;
		  padding: 1rem;
		}

		.div3 .menu > div > div > ul > li > a {
		  color: inherit;
		  text-decoration: none;
		  transition: color 0.4s ease;
		}
		
		.div3 .toggler:checked ~ .menu {
		  width: 100vw; 
		  height: 100vh;
		  visibility: visible;
		}