.contenedor_general {
    display: flex;
    flex-direction: column;
    background-color: rgb(150, 33, 33) !important;

}
/*************************Entrada******************************/
.carousel-inner img {  
    width: 100%;  
    height: 70vh;  /* Altura del 70% de la pantalla */
    max-height: 600px; /* Altura máxima en pantallas grandes */
    min-height: 200px; /* Altura mínima en pantallas pequeñas */
    object-fit: cover; /* Evita distorsión y recorta el exceso */
}

@media (max-width: 800px) {
    .carousel-inner img {
        height: 10vh; /* Reduce la altura en pantallas pequeñas */
        min-height: 250px;
    }
}


.clickable-div {
    color:rgba(55, 54, 54, 0.78);
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*text-align: center;*/
    font-size: 15px;
    font-weight: bold;
    padding:15px;
    border-radius: 1px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.clickable-div:hover {
    color: white;
    background-color:rgba(2, 37, 75, 0.31);
    transform: scale(1.05);
}
/*-------------------------segundo baner terminado----------------------------------*/
.segundo-header {
    background-image: url("<?php echo BASE_URL; ?>assets/img/fachada.png" ) !important;
    background-size: cover;
    background-position:center;
    animation: zoom 10s infinite;  
    background-attachment: fixed; /* Esto crea un efecto parallax */  
    text-align:center;
    color: #fff;
    box-shadow: 8px 8px 15px 0px rgba(0, 0, 0, 0.33); /* Sombra sutil */  
  }
  @keyframes zoom {  
  0% {  
  background-size: 100%;  
    }  
  50% {  
  background-size: 110%; /* Ajusta el valor para el nivel de zoom deseado */  
      }  
  100% {  
  background-size: 100%;  
  }  
}
.container-primario h1{
  font-size: 4vw;
  font-weight: 700;
  font-family: Poppins;
  

}
  .container-primario {
    background-color:rgba(5, 32, 82, 0.41);
    padding:22px;
    border:0px;
  
  }
 /* Media query para dispositivos móviles (por ejemplo, pantallas menores a 768px) */
@media (max-width: 768px) {
  .container-primario h1 {
    font-size: 2rem; /* Tamaño de fuente más pequeño para móviles */
  }
}
  
/*-------------------------------fin de segondo baner-----------------------------------------*/
/* Estilo para los miembros del equipo */  
.team-member {  
background: #0c3c60; /* Fondo blanco para los miembros */  
border-radius: 10px; /* Esquinas redondeadas */  
padding: 20px;  
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.33); /* Sombra sutil */  
transition: transform 0.3s; /* Transición suave */  
}  

.team-member:hover {  
transform: translateY(-5px); /* Efecto de movimiento al pasar el ratón */  
}  

.team-member .pic {  
flex-shrink: 0; /* Evita que la imagen se reduzca */  
}  

.team-member .pic img {  
border-radius: 50%; /* Hace la imagen circular */ 
border: 0.5rem solid rgba(133, 152, 181, 0.93);
width: 150px; /* Tamaño de la imagen */  
height: 150px; /* Tamaño de la imagen */  
}  

.member-info {  
margin-left: 25px; /* Espaciado entre la imagen y el texto */  
color: #e9e6e6;
}  

.member-info h4 {  
font-size: 20px; /* Tamaño del nombre */  
color:rgb(243, 243, 243); /* Color del nombre */  
margin: 0 0 5px;  
}  

.member-info span {  
display: block;  
color: #9999; /* Color del título del trabajo */  
margin-bottom: 10px; /* Espaciado debajo del título */  
}  

.member-info p {  
color: #9999; /* Color del texto de la descripción */  
font-size: 14px; /* Tamaño del texto de la descripción */  
}  

.social {  
margin-top: 10px; /* Espaciado superior para los enlaces sociales */  
}  

.social a {  
color:rgb(222, 220, 220); /* Color de los iconos sociales */  
margin-right: 10px; /* Espaciado entre iconos */  
font-size: 18px; /* Tamaño de los iconos */  
transition: color 0.3s; /* Transición suave para el color */  
}  

.social a:hover {  
color: #007BFF; /* Color de hover para los iconos */  
}

/* Estilo para el contenedor y el título de la sección */  
.section-title {  
  text-align: center;  
  margin-bottom: 40px;  
  }  
  
  .section-title h2 {  
  font-size: 36px;  
  color: #333; /* Color del título */  
  margin-bottom: 10px;  
  }  
  
  .section-title p {  
  color: #666; /* Color de la descripción */  
  font-size: 16px; 
  
  }  

/****************************************************/
/*****estas parte del código es para el diseño de la sección de servicios*****/
.faq-item {
border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 5px;
overflow: hidden;
}

.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
cursor: pointer;
background-color: #f9f9f9;
margin: 0;
}

.faq-question:hover {
background-color: #f1f1f1;
}

.faq-content {
padding: 0 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-content.active {
max-height: 200px; /* Ajusta este valor según el contenido */
padding: 10px;
background-color: #e3f2fd; /* Color azul claro */
}

.faq-toggle {
transition: transform 0.3s ease-out;
}

.faq-toggle.active {
transform: rotate(90deg);
}
/********************sexcion de nosotros ultima parte del código*****************/