main .section-2 {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 500px; /* Change height to min-height for dynamic content */
  }
  
  main .section-2 .top {
    min-height: 60vh;
    color: #000;
    display: flex;
    padding: 0 80px 0 30px;
  }
  
  main .section-2 .quemsomos {
    width: 100%; /* Take full width on smaller screens */
    padding: 0 5% 0 0; /* Adjust padding */
  }
  
  main .section-2 .quemsomos h1 {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center text */
    padding: 0 0 5% 0; /* Adjust padding */
  }
  
  main .section-2 .quemsomos span {
    font-size: 40px; /* Reduce font size */
    text-transform: uppercase;
  }
  
  main .section-2 .quemsomos h1 hr {
    height: 0.25rem;
    width: 6.25rem;
    border: none;
  }
  
  main .section-2 .quemsomos p {
    padding: 0 0% 3% 5%; /* Adjust padding */
    line-height: 1.8;
    font-size: 16px;
    color: #000;
    text-align: justify;
  }
  
  main .section-2 img {
    flex: 1;
    height: 250px; /* Reduce image height */
    width: 100%; /* Set image width to 100% for responsiveness */
    object-fit: cover;
  }
  
  /* Media Queries */
  /* Tablet and Desktop Views */
  @media (min-width: 768px) {
    main .section-2 {
      min-height: 600px; /* Increase min-height for larger screens */
    }
    
    main .section-2 .top {
      flex-direction: row;
    }
  
    main .section-2 .quemsomos {
      width: 60%;
    }
  
    main .section-2 .quemsomos h1 {
      align-items: flex-end;
      padding: 0 0% 7% 0;
    }
  
    main .section-2 img {
      height: 350px; /* Restore image height for larger screens */
    }
  }
  
  /* Smartphone View */
  @media (max-width: 767px) {
      main .section-2 .top{
          flex-direction: column;
          padding: 20px;
      }
    main .section-2 {
      margin-top: 25rem; /* Adjust margin-top for smaller screens */
      width: 100%;
    }
    main .section-2 .quemsomos{
        padding: 0;
    }
    main .section-2 .quemsomos h1 span {
      font-size: 30px; /* Reduce font size for smaller screens */
    }
  
    main .section-2 .quemsomos h1 hr {
      width: 4rem; /* Reduce width of hr for smaller screens */
    }
  
    main .section-2 .quemsomos p {
      padding: 0 0% 3% 3%; /* Adjust padding for smaller screens */
      font-size: 14px; /* Reduce font size for smaller screens */
    }
  }
  @media (max-width: 570px) {
    main .section-2{
        margin-top: 53rem;  
    }
      
  }
  @media (max-width: 435px) {
    main .section-2{
        margin-top: 40rem;  
    }
    main .section-2 .quemsomos p{
        padding: 0 2% 3% 2%;
    }  
  }
  .about-readmore{
    font-size: 16px;
    color: #edcd1f;
    font-weight: 400;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    
    margin-left: 4px;
    padding: 4px;
    transition: all .2s ease-out;
}