.ingetrol-bg,
.perforacion-bg ,
.geotecnia-bg,
.medicion-bg,
.componentes-bg,
.hidrolavadores-bg,
.accesorios-bg,
.cestas-aereas-bg,
.gruas-bg  {
    /* background-image: url(../img/bg/ingetrol-bg.jpeg); */
    overflow: hidden;
    /* background-color: hsla(0, 0%, 0%, 0.15); */
    padding: 4rem 0;
}

.ingetrol-bg p,
.perforacion-bg p,
.geotecnia-bg p,
.medicion-bg p,
.componentes-bg p,
.hidrolavadores-bg p,
.accesorios-bg p,
.cestas-aereas-bg p,
.gruas-bg p {
    color: var(--color-two);
}

.text-columns p {
    padding-top: 2rem;
}

.ingetrol-bg::after,
.perforacion-bg::after,
.geotecnia-bg::after,
.medicion-bg::after,
.componentes-bg::after,
.hidrolavadores-bg::after,
.accesorios-bg::after,
.cestas-aereas-bg::after,
.gruas-bg::after {
    content: ' ';
    position: absolute;
    width: 100vw;
    height: 100%;
    right: -30%;
    top: 0;
    /* transform: skew(-20deg); */
    clip-path: polygon(55% 0, 100% 0, 100% 100%, 0% 100%);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .ingetrol-bg::before,
  .perforacion-bg::before,
  .geotecnia-bg::before,
  .medicion-bg::before,
  .componentes-bg::before,
  .hidrolavadores-bg::before,
  .accesorios-bg::before,
  .cestas-aereas-bg::before,
  .gruas-bg::before {
    content: ' ';
    position: absolute;
    width: 100vw;
    height: 100vh;
    right: -40%;
    background-color: antiquewhite;
    top: 0;
    transform: skew(-20deg);
    background-color: hsla(2, 65%, 34%, 15%);
    z-index: 1;
  }

  .ingetrol-bg::after {
    background-image: url(../img/bg/ingetrol-bg.jpeg);
  }

  .perforacion-bg::after {
    background-image: url(../assets/imagenes/exploracion-diamantina/explorer-140-sat.jpg);
  }

  .geotecnia-bg::after {
    background-image: url(../assets/imagenes/geotecnia/02_AQUA\ PLUS\ II.jpg);
  }

  .medicion-bg::after {
    background-image: url(../assets/imagenes/twin-gyro.webp);
  }

  .componentes-bg::after {
    background-image: url(../assets/imagenes/componentes.jpg);
  }

  .accesorios-bg::after {
    background-image: url(../assets/imagenes/perforacion/gh.png);
  }

  .hidrolavadores-bg::after {
    background-image: url(../assets/imagenes/equipos-hidrolavadores/1.png);
  }

  .cestas-aereas-bg::after {
    background-image: url(../assets/imagenes/equipos-cestas/1.png);
  }

  .gruas-bg::after {
    background-image: url(../assets/imagenes/equipos-perforadora/5.jpg);
  }

  .inertial-link {
    display: block;
    text-align: center;
    padding-bottom: 2rem;
  }

  .inertial-link img {
    max-width: 400px;
    width: 90%;
    vertical-align: middle;
  }

  .logo-big {
    position: relative;
    width: 100%;
    text-align: center;
    padding-bottom: 4rem;
  }

  .logo-big img {
    position: relative;
    width: 80%;
    max-width: 450px;
    vertical-align: bottom;
  }

  .centered-text-container p,
  .centered-text-container h2 {
    text-align: center;
    padding-bottom: 2rem;
    max-width: 800px;
    margin: 0 auto;
  }

  .iso-section {
    position: relative;
  }

  .iso-section img {
    position: relative;
    width: 100%;
    max-width: 350px;
    vertical-align: bottom;
    margin: 0 auto;
    display: block;
    z-index: 1;
  }

  .iso-section p {
    padding-bottom: 2rem;
  }

  .iso-ghost::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    background-image: url(../img/bg/1.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* opacity: 0.05;*/ 
    transform: translateX(0%) translateY(30%);
    filter: grayscale(100%);
    transition: all .3s cubic-bezier(.55,.05,.21,.71) .1s;
  }

  .iso-ghost::after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    background-color: var(--dark-color);
    opacity: 0.5;
    transform: translateX(0%) translateY(30%);
  }

.logo-ghost {
    position: relative;
    overflow: visible !important;
}

  .logo-ghost::after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 50%;
    right:0;
    top: 50%;
    background-image: url(../img/logo-ingetrol.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.03;
    transform: translateX(0%) translateY(-50%);
    filter: grayscale(100%);
  }

  .text-columns {
    flex-direction: column;
    gap: 2rem;
  }

  .btn {
    color: var(--color-two);
    opacity: 0.4;
  }

  .sale-process {
    flex-direction: column;
  }

  .sale-process .btn p {
    padding: 1rem;
    -webkit-appearance: button;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.5rem;
    border-bottom: 1px solid;
  }

  .show {
    color: var(--color-two);
    opacity: 1;
    transition: all .3s cubic-bezier(.55,.05,.21,.71) .1s;
  }

  .sale-process .btn.show p  {
    border-bottom: 3px solid;
  }

  .tab-container {
    position: relative;
    overflow: hidden;
  }

  .tab-container .contents {
    opacity: 0;
    visibility: hidden; 
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 2rem;
    transform: translateX(3rem);
  }

  .tab-container .contents.show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: all .3s cubic-bezier(.55,.05,.21,.71) .1s;
    position: relative;
    transform: translateX(0rem);
  }
 
  .contents .button-cage {
    margin-top: 2rem;
  }

  .pdf {
    position: relative;
    text-align: center;
  }

  .pdf-embedded {
    position: relative;
    width: 80%;
    aspect-ratio: 4 / 5;
  }

  .justify-center {
    justify-content:center ;
  }

  .no-padding {
    padding: 0 !important;
  }

  .section-sub-title {
    color: var(--dark-color);
    font-size: var(--h4-font-size);
    letter-spacing: var(--body-letterspacing);
    line-height: 1.2;
    margin: 0;
    padding-bottom: 1rem;
  }

  

  @media (min-width: 1024px) {
    .contact-section-form {
      padding-right: 4rem;
    }
    .ingetrol-bg,
    .perforacion-bg,
    .geotecnia-bg,
    .medicion-bg,
    .componentes-bg,
    .hidrolavadores-bg,
    .accesorios-bg,
    .cestas-aereas-bg,
    .gruas-bg {
        padding: 6rem 0;
    }
    .ingetrol-bg::before,
    .perforacion-bg::before,
    .geotecnia-bg::before,
    .medicion-bg::before,
    .componentes-bg::before,
    .hidrolavadores-bg::before,
    .accesorios-bg::before,
    .cestas-aereas-bg::before,
    .gruas-bg::before {
        width: calc(50% + 10rem);
        height: 100%;
        right: -10%;
        top: 0;
      }
    
      .ingetrol-bg::after,
      .perforacion-bg::after,
      .geotecnia-bg::after,
      .medicion-bg::after,
      .componentes-bg::after,
      .hidrolavadores-bg::after,
      .accesorios-bg::after,
      .cestas-aereas-bg::after,
      .gruas-bg::after {
        width: 50%;
        /* height: 100%; */
        right: -5%;
        background-size: cover;
        background-position: bottom;
        clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%);
      }
      .iso-section {
        align-items: center;
        flex-direction: row-reverse !important;
      }
      .iso-section > div {
        flex: 1 1 calc(50% - 4rem);
      }
      .iso-ghost::before,
      .iso-ghost::after {
        width: 50%;
        height: 800px;
        transform: translateY(15%) translateX(-4rem);
        border-radius:0 400px 400px 0 ;
      }
      .iso-ghost:hover::before {
        transition: all .3s cubic-bezier(.55,.05,.21,.71) .1s;
        filter: grayscale(0%);
      }
      .text-columns {
        flex-direction: row;
      }
      .logo-ghost::after {
        width: 50%;
        height: 50%;
      }
      .sale-process {
        flex-direction: row;
      }
      .sale-process .tab-buttons {
        flex: 0 0 31%;
        padding: 1rem;
      }
      .sale-process .tab-container {
        flex: 0 0 69%;
        padding: 1rem;
      }
  }
  @media (min-width: 1600px) {    
      .ingetrol-bg::after,
      .perforacion-bg::after,
      .geotecnia-bg::after,
      .medicion-bg::after,
      .componentes-bg::after,
      .hidrolavadores-bg::after,
      .accesorios-bg::after,
      .cestas-aereas-bg::after,
      .gruas-bg::after {
        clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 22% 100%);
      }
}