

/* Cambio de color al pasar el mouse en el menú */
.navbar-nav .nav-link:hover {
    color: #F9AC46;
  }
  
  /* Centrar el logo en la barra de navegación */
  .navbar-brand-centered {
    display: flex;
    justify-content: center;
    align-items: center;
  }

    
    .text{
      padding-left: 50px;
      padding-right: 50px;
    }
    
   
    
    
    .section img {
      max-width: 100%;
      border-radius: 50%; /* Hace que la imagen sea circular */
      width: 400px; /* Tamaño de la imagen */
      height: 400px; /* Tamaño de la imagen */
      object-fit: cover; /* Ajusta la imagen dentro del círculo */
      transition: transform 0.3s ease; /* Transición para el efecto hover */
    }
    
    .section img:hover {
      transform: scale(1.1); /* Escala la imagen al 110% al hacer hover */
    }
    
        .section {
          display: flex;
          /* Utilizamos flexbox para alinear elementos */
          align-items: center;
          /* Alinear verticalmente los elementos */
          margin-bottom: 20px;
          /* Margen inferior para separar secciones */
          background-color: #F9AC46; /* Color de fondo de la sección */
          color: #000000;
          font-family:Verdana, Geneva, Tahoma, sans-serif
      
        
        }
    
        .section img {
          float: right; /* Alinea la imagen a la derecha */
          max-width: 100%;
          /* Ajusta el tamaño máximo de la imagen */
          margin-right: 15px;
          /* Espacio entre la imagen y el texto */
        }
        h2{
          padding-top: 20px;
         }
        p {
          flex: 4;
          /* El texto ocupa el espacio restante */
          line-height: 2; /* Ajusta la altura de línea para agregar espacio al final */
          padding-left: 50px;
          padding-right: 50px;
        }
    
    
    
    
        .section2 img {
          max-width: 100%;
          border-radius: 50%; /* Hace que la imagen sea circular */
          width: 400px; /* Tamaño de la imagen */
          height: 400px; /* Tamaño de la imagen */
          object-fit: cover; /* Ajusta la imagen dentro del círculo */
          transition: transform 0.3s ease; /* Transición para el efecto hover */
        }
        
        .section2 img:hover {
          transform: scale(1.1); /* Escala la imagen al 110% al hacer hover */
        }
        
    
    
        .section2 {
          display: flex;
          /* Utilizamos flexbox para alinear elementos */
          align-items: center;
          /* Alinear verticalmente los elementos */
          margin-bottom: 20px;
          
          /* Margen inferior para separar secciones */
          background-color: #CCCCCC; /* Color de fondo de la sección */
          color: #000000;
          font-family:Verdana, Geneva, Tahoma, sans-serif
        
        }
    
        .section2 img {
          max-width: 100%;
          /* Ajusta el tamaño máximo de la imagen */
          margin-right: 15px;
          /* Espacio entre la imagen y el texto */
        }
    
        .text {
          flex: 1;
          /* El texto ocupa el espacio restante */
          line-height: 1.5; /* Ajusta la altura de línea para agregar espacio al final */
        }
    
    
    
    
        .section3 img {
          max-width: 100%;
          border-radius: 50%; /* Hace que la imagen sea circular */
          width: 350px; /* Tamaño de la imagen */
          height: 350px; /* Tamaño de la imagen */
          object-fit: cover; /* Ajusta la imagen dentro del círculo */
          transition: transform 0.3s ease; /* Transición para el efecto hover */
        }
        
        .section3 img:hover {
          transform: scale(1.1); /* Escala la imagen al 110% al hacer hover */
        }
        
        
        
        
            .section3 {
              display: flex;
              /* Utilizamos flexbox para alinear elementos */
              align-items: center;
              /* Alinear verticalmente los elementos */
              margin-bottom: 20px;
              
              /* Margen inferior para separar secciones */
              background-color: #F9AC46; /* Color de fondo de la sección */
              color: #000000;
              font-family:Verdana, Geneva, Tahoma, sans-serif
              
            
            }
        
            .section3 img {
            float: right; /* Alinea la imagen a la derecha */
              max-width: 100%;
              /* Ajusta el tamaño máximo de la imagen */
              margin-right: 15px;
              /* Espacio entre la imagen y el texto */
            }
        
            .text {
              flex: 1;
              /* El texto ocupa el espacio restante */
              line-height: 1.5; /* Ajusta la altura de línea para agregar espacio al final */
            }
    
  
            .section4 img {
              max-width: 100%;
              border-radius: 50%; /* Hace que la imagen sea circular */
              width: 400px; /* Tamaño de la imagen */
              height: 400px; /* Tamaño de la imagen */
              object-fit: cover; /* Ajusta la imagen dentro del círculo */
              transition: transform 0.3s ease; /* Transición para el efecto hover */
            }
            
            .section4 img:hover {
              transform: scale(1.1); /* Escala la imagen al 110% al hacer hover */
            }
            
        
        
            .section4 {
              display: flex;
              /* Utilizamos flexbox para alinear elementos */
              align-items: center;
              /* Alinear verticalmente los elementos */
              margin-bottom: 20px;
              
              /* Margen inferior para separar secciones */
              background-color: #CCCCCC; /* Color de fondo de la sección */
              color: #000000;
              font-family:Verdana, Geneva, Tahoma, sans-serif
            
            }
        
            .section4 img {
              max-width: 100%;
              /* Ajusta el tamaño máximo de la imagen */
              margin-right: 15px;
              /* Espacio entre la imagen y el texto */
            }
        
            .text {
              flex: 1;
              /* El texto ocupa el espacio restante */
              line-height: 1.5; /* Ajusta la altura de línea para agregar espacio al final */
            }
    

            .section5 img {
              max-width: 100%;
              border-radius: 50%; /* Hace que la imagen sea circular */
              width: 400px; /* Tamaño de la imagen */
              height: 400px; /* Tamaño de la imagen */
              object-fit: cover; /* Ajusta la imagen dentro del círculo */
              transition: transform 0.3s ease; /* Transición para el efecto hover */
            }
            
            .section5 img:hover {
              transform: scale(1.1); /* Escala la imagen al 110% al hacer hover */
            }
            
        
        
            .section5 {
              display: flex;
              /* Utilizamos flexbox para alinear elementos */
              align-items: center;
              /* Alinear verticalmente los elementos */
              margin-bottom: 20px;
              
              /* Margen inferior para separar secciones */
              background-color: #F9AC46; /* Color de fondo de la sección */
              color: #000000;
              font-family:Verdana, Geneva, Tahoma, sans-serif
            
            }
        
            .section5 img {
              max-width: 100%;
              /* Ajusta el tamaño máximo de la imagen */
              margin-right: 15px;
              /* Espacio entre la imagen y el texto */
            }
        
            .text {
              flex: 1;
              /* El texto ocupa el espacio restante */
              line-height: 1.5; /* Ajusta la altura de línea para agregar espacio al final */
            }

            .section6 img {
              max-width: 100%;
              border-radius: 50%; /* Hace que la imagen sea circular */
              width: 400px; /* Tamaño de la imagen */
              height: 400px; /* Tamaño de la imagen */
              object-fit: cover; /* Ajusta la imagen dentro del círculo */
              transition: transform 0.3s ease; /* Transición para el efecto hover */
            }
            
            .section6 img:hover {
              transform: scale(1.1); /* Escala la imagen al 110% al hacer hover */
            }
            
        
        
            .section6 {
              display: flex;
              /* Utilizamos flexbox para alinear elementos */
              align-items: center;
              /* Alinear verticalmente los elementos */
              margin-bottom: 20px;
              
              /* Margen inferior para separar secciones */
              background-color: #CCCCCC; /* Color de fondo de la sección */
              color: #000000;
              font-family:Verdana, Geneva, Tahoma, sans-serif
            
            }
        
            .section6 img {
              max-width: 100%;
              /* Ajusta el tamaño máximo de la imagen */
              margin-right: 15px;
              /* Espacio entre la imagen y el texto */
            }
        
            .text {
              flex: 1;
              /* El texto ocupa el espacio restante */
              line-height: 1.5; /* Ajusta la altura de línea para agregar espacio al final */
            }

            /* Estilos para el botón flotante de WhatsApp */
    .whatsapp {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000; /* Asegura que esté sobre otros elementos */
    }
    
    .whatsapp a {
      display: block;
      background-color: #137236; /* Color de fondo de WhatsApp */
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 2px 10px rgba(187, 9, 9, 0.2);
      text-align: center;
      transition: all 0.3s ease;
      line-height: 60px; /* Alinea verticalmente el icono */
    }
    
    .whatsapp a:hover {
      transform: scale(1.5); /* Efecto de escala al hacer hover */
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    }
    
    .whatsapp img {
      width: 40px; /* Tamaño del icono de WhatsApp */
      height: 40px;
    }
    
    
     
    /* Estilo para el fondo de la página */
    body {
      background-image: url('../img/wallpapers11-1-1.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      opacity: 0.9; /* Ajusta este valor para controlar la opacidad */
  }
  #mi-imagen {
    width: 100px; /* Establece el ancho de la imagen en 200 píxeles */
    height: 100px; /* Establece la altura de la imagen en 150 píxeles */
}
