*{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
                'Open Sans', 'Helvetica Neue', sans-serif;
            }

            body{
                height: 150vh;
            }

            section{                
              position: relative;
                width: 100%;
                height: 50vh;
                background: url(img/slider10.png);
                background-size: cover;
                background-position: center center;
                background-attachment: fixed;
                display: flex;
                display: inline-flex;
                background-blend-mode: multiply;
                                   
            }
            
  .text100{
    color: #8B9A46;
  }

/* From Uiverse.io by Shoh2008 */ 

 .cards-container01{
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* Tarjeta */
    .card01 {
      width: 190px;
      height: 120px;
      transition: all 0.5s;
      box-shadow: 15px 15px 30px rgba(15, 14, 14, 0.432),
                  -15px -15px 30px rgba(60, 60, 60, 0.082);
      text-align: center;
      overflow: hidden;
      background: white;
    }

    .card01:hover {
      height: 260px;
      background: linear-gradient(360deg, #edededc5 60%, rgba(33, 33, 33, 0) 70%);
    }

    .card01 .header {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #000000;
      margin-bottom: 16px;
    }

    .card01 .header .img-box {
      width: 50px;
    }

    .card01 .header .title {
      font-size: 1em;
      letter-spacing: 0.1em;
      font-weight: 900;
      text-transform: uppercase;
      padding: 4px 0 14px 0;
      transition: all 0.5s;
      color: #fff;
    }

    .card01:hover .header {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
    }

    .card01:hover .header .title {
      padding: 0;
    }

    .card01 .content {
      display: block;
      text-align: left;
      font-size: 20px;
      color: #541212;
      margin: 0 18px;
      font-weight: 700;
    }

    .card01 .content p {
      transition: all 0.5s;
      font-size: 0.8em;
      margin-bottom: 8px;
    }

    .card01 .content a {
      color: #8B9A46;
      cursor: pointer;
      transition: all 0.5s;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .card01 .content .btn-link:hover {
      border-bottom: 1px solid #29282517;
    }

/* From Uiverse.io by codebykay101 */ 





            /*CARD*/
            /* Contenedor en grid responsive */
    .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
      padding: 25px;
      max-width: 1100px;
      margin: auto;
    }

    /* Flip card */
         /*CARD*/

            .efecto {
              transition-property: transform;
              transition-duration: 500ms;
              --webkit-box-shadow: 5px 5px 15px 5px #5c837477; 
            }

            .efecto:hover{
              transform: scale(1.2);
              opacity: 75%;
            }

            .bg{
              background-color: #fff;
            }


           .teluno {
               color: #541212;
              font-size: 20px;
              font-weight: 900;
            }

            .icontel{
              color: #541212;
              font-size: 25px;
              font-weight: 900;
              transition-property: transform;
            transition-duration: 300ms;
            }

          .icontel:hover{
              transform: scale(1.2);
              color: #8B9A46;
            }

             .bg02{
              color: #541212;
              font-size: 25px;
              font-weight: 900;
            }

            .parrafo01{
            color: #000000;
            font-size: 35px;
            background-color: #E9E3DF;
            text-align: center;
            font-weight: 900;
        }

        .parrafo05{
           color: #040D12;
            font-size: 16px;
            text-align: justify;
            font-weight: 400;
        }
      
        .servicios01{
          color: #541212;
          font-size: 12px;
          font-weight: 900;
        }
        .titul05{
          color: #E9E3DF;
          font-size: 25px;
          font-weight: 700;
        }

        .carousel01{
            color: #183D3D;
            font-size: 25px;
            font-weight: 800;
        }
           .menu01{
            color: #541212;
            font-size: 20px;
            font-weight: 900;
           }

            .titulos{
              color: #541212;
              font-size: 1.5rem;
              font-weight: 900;
           }

          .titulos01{
              color: #541212;
              font-size: 15px;
              font-weight: 900;
              text-align: center;
          }

          .titulos02{
            color: #0F0E0E;
            font-size: 14px;
            text-align: justify;
            font-weight: 600;
            padding: 10px;
          }

          .titulos22{
            color: #000000;
            font-size: 35px;
            text-align: justify;
            font-weight: 900;
            padding: 10px;
          }

       .titulos03{
            color: #000000;
            font-weight: 800;
            font-size: 25px;
       }

          .titulo03{
            color: #000000;
            text-align: left;
            font-size: 15px;
            font-weight: 600;
          }

          .titulo04{
            color: #8B9A46;
            font-size: 14px;
            font-weight: 800;
          }

             .titulo08{
            color: #8B9A46;
            font-weight:700;
            font-size: 20px;
          }

          

          .icono01{
            color: #fff;
            font-weight: 900;
          }

          .icono02{
            color: #000000;
            font-size: 100px;
            margin:0 4px;
            padding:0 100px 100px;
            transition-property: transform;
            transition-duration: 300ms;
          }

          .icono02:hover{
              transform: scale(1.2);
              color: #8B9A46;
            }
      
            .logo{
                width: 100px;
                height: 90px;
                
            }

            .servicios{
                  border-radius: 50%;
            }

            .formulario{
                background: url(img/img1.jpg);
                background-size: cover;
                }
             .fondo-blanco{
                 background: rgba(255, 255, 255, .5);
                }
            .btnWhats{
                bottom: 20px;
                right: 20px;
                width: 70px;
                }

                .footer02{
                    color: #fff;
                    font-size: 30px;
                }

                .footer01{
                  color: #fff;
                  font-weight: 700;
                }

                footer{
                  background: #541212;

                }


              @media screen and (max-width:480px) {
                
               .icono02{
            color: #000000;
            font-size: 100px;
            margin:0 4px;
            padding:30px 20px 20px 90px;
            transition-property: transform;
            transition-duration: 300ms;
          }

             .titulos22{
            color: #000000;
            font-size: 28px;
            text-align: justify;
            font-weight: 900;
            padding: 10px;
          }
  }