.container-title-obra-civl{
        padding-bottom: 40px;
        color: var(--Color-parrafo);
      }
      .container-title-obra-civl h2{
        padding-bottom: 25px;
        font-size: 26px;
        color: var(--AzulFuerte);
      }
        .flex-container-info-obras{
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 30px;
            flex-wrap: wrap;
            gap: 30px;
        }

        .obra-social{
            width: 48%;
            justify-content: center;
    /* align-items: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px ;
 
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    gap: 20px;
    border-radius: 20px;
            position: relative;
            overflow: hidden;
}
.obra-social h2{
  padding-top: 20px;
  color: var(--color-celeste);
  font-size: 25px;
  font-weight: 700;
  font-family: var(--font-Poppins);
  text-align: center;
  line-height: 1.2;
}
        
.obra-social::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:15px;              /* grosor del borde */
  background-color: var(--color-celeste); /* color del borde */
}



        .container-img-obra{
           width: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
        }
        .container-img-obra img{
            width: 100%;
            height: auto;
            object-fit: cover;overflow: hidden;
        }

        .flex-container-info-obras .text-obra-social{
            text-align: justify;
            color: var( --Color-parrafo);
            
        }

         .btn-social{
          width: 70%;
          margin: 20px 0px;
          
        }
        .btn-social .button-social{
          border-radius: 20px;
          background-color: #27CB16;
          transition: all ease .3s;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
        }

        .btn-social .button-social:hover{
          background-color: #1FA60F;
        }

        .btn-social .button-social i{
          font-size: 20px;
        }


        /**/
        .flex-container-acabados{
          display: flex;
          justify-content: space-between;
          gap: 10px;

          padding: 30px ;
 
           
        }

        .container-acabados{
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            gap: 20px;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
        }
        .container-acabados h2{
          padding-top: 50px;
          text-align: center;
          text-transform: capitalize;
          font-size: 30px;
          color: var(--color-celeste);
          font-family: var(--font-Poppins);
          font-weight: 700;
          line-height: 1.2;
        }

        .container-acabados::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height:15px;              /* grosor del borde */
          background-color: var(--color-celeste); /* color del borde */
        }
        .flex-container-texto{
          width: 48%;
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .flex-container-texto p{
          font-size: 16px;
          text-align: justify;
          color: var(--Color-parrafo);
        }

        .flex-container-img-acabados{
          width: 48%;
          display: flex;
    flex-direction: column;
    align-items: center;
        }

        

        .container-img-acabados{
          width: 100%;
        }
        .container-img-acabados img{
          width: 100%;
          height: auto;
          object-fit: cover;
          overflow: hidden;
        }


        /*-- elegirnos --*/
        .flex-container-elegirnos{
          display: flex;
          justify-content: center;
          gap: 30px;
          flex-wrap: wrap;
          padding-top:30px ;
        }

        .container-elegirnos{
          padding: 30px;
          width: 300px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          align-items: center;
          justify-content: center;
          text-align: center;
          background-color: var(--bg-color-opaco);
          border-radius: 20px;
          border: 2px solid var(--bg-color-opaco);
          transition: all ease .3s;
          
        }

        .container-elegirnos:hover{
          border: 2px solid var(--color-celeste);
        }

        .container-elegirnos h4{
          color: var(--text);
          font-size: 20px;
          font-weight: 700;
        }
        .container-elegirnos p{
          color: var(--text);
          font-size: 16px;
        }

        .container-elegirnos i{
          font-size: 45px;
          color: var(--color-celeste);
        }


        .container-eleginor-text h2{
          padding-bottom: 30px;
          text-align: center;
          color: var(--color-celeste);
          font-size: 30px;
        }




        
      .flex-container-trabajamos{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
      }

      .container-text-trabajamos h2{
        width: 100%;
        text-align: center;
      
      }

      .container-text-trabajamos p{
        padding: 20px 0px;
        text-align: center;
      }
    



       
        @media (max-width:900px ) {
          .flex-container-acabados{
            flex-direction: column;
            gap: 40px;
          }
          .flex-container-texto{
            width: 100%;
          }
          .flex-container-img-acabados{
            width: 100%;
          }
          
        }
        @media (max-width: 830px) {
          /*.obra-social h2{
            font-size: 30px;
         }*/
          
            .flex-container-info-obras{
                flex-direction: column;
                gap: 50px
                ;
            }
            .obra-social{
                width: 100%;
            }
        }

        /*@media (max-width: 600px) {
         /*.obra-social h2{
            font-size: 24px;
         }
        }*/

        /* @media (max-width: 500px) {
         .obra-social h2{
            font-size: 20px;
         }
        }*/
    
        @media (max-width: 600px) {
         .container-title-obra-civl h2{
          font-size: 24px;
          line-height: 1.2;
         }

         .container-acabados h2{
          font-size: 25px;
         }
        }

        @media (max-width: 500px) {
         .obra-social h2{
          font-size: 22px;
         }
         .flex-container-info-obras .text-obra-social{
          font-size: 14px;
         }
         .flex-container-texto p{
          font-size: 14px;
         }
         .container-acabados h2{
          font-size: 20px;
         }
        }