/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header{
    background-color: rgba(0, 0, 0, 0);
}
/* Text and Photo Section */
p{
    text-align: justify;
}
.text-photo-section {
    display: flex
    ;
        align-items: flex-start;
        justify-content: space-evenly;
       /* gap: 101px;*/
        padding: 5%;
        flex-direction: row-reverse;
        background-color: rgba(114, 20, 20, 0.45);
}

.text-content {
    flex: 1; /* Text takes up 1 part of the available space */
    max-width: 50%; /* Limits the width of the text section */
    columns: 2;
}

.photo-content {
    flex: 1; /* Image takes up 1 part of the available space */
    max-width: 29%; /* Limits the width of the image section */
}

.photo-content img {
    
    width: 100%; /* Ensures the image takes up the full width of its container */
    height: auto; /* Maintains the aspect ratio */
    border-radius: 3px; /* Optional: Rounds the corners of the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds a shadow effect */
}
.mas {
    margin: 0% 10% 0% 7%;
}
.socials{ display: flex
    ;
        align-items: flex-start;
        justify-content: space-evenly;
       /* gap: 101px;*/
        padding: 5%;}
h3{
    margin-top: 2%;;
    text-align: left;
}
.otro{
    padding-right: 40%;
}

/*redes sociales*/

/* Redes Sociales */
.socials {
    text-align: center;
    margin-top: 20px;
}

.social-icons {
    display: flex
;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    margin-right: 36%;
}

.social-icons a {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

.social-icons a:hover {
    transform: scale(1.1); /* Efecto de zoom al pasar el mouse */
}

.social-icons img {
    width: 60px; /* Tamaño de los iconos */
    height: auto;
    border-radius: 0; /* Iconos redondos */
    
}




@media (max-width: 768px) {
    .text-photo-section {
      flex-direction: column;
      align-items: center;
      padding: 5%;
      gap: 20px;
    }
  
    .text-content, .photo-content {
      max-width: 90%;
    }
  
    .text-content {
      columns: 1;
    }
  
    .photo-content img {
      width: 100%;
    }
  
    .socials {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 5%;
    }
  
    .mas, .otro {
      padding: 0;
      margin: 10px 0;
    }
  
    .social-icons {
      flex-wrap: wrap;
      justify-content: center;
      margin-right: 0;
      gap: 10px;
    }
  
    
  
    h2, h3, p {
      text-align: justify;
    }
    
  }