
main{
  color:var(--bg-color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-title-page{
  width: 100%;
}

.container-introduccion-tools{
  padding: 1.81rem 2.5rem;
  justify-content: center;
  font-family: 'MrEavesXLModOT-Reg',sans-serif;
  font-size: 15px;
  max-width: 310PX;
  line-height: 18px; /* 120% */
}

.container-introduccion-tools .introduccion{
  position: relative;
}

.container-introduccion-tools .introduccion::before{
  content: "";
  position: absolute;
  top: -14px;
  left: -12px;
  width: 71px;
  height: 72px;
  background-image: url('../../images/servicios/grupo-pantera-icon-green.svg');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.2; /* Opacidad de la imagen */
}

.container-tool-text{
  margin: 0 3.5rem 3.5rem 3.5rem;
  transition: transform 0.5s;
  color: var(--bg-color-blue);
  cursor: pointer;
}

/* .container-tool-text:hover{
  transform: scale(1.10);
} */

.container-tool-text .hexagon-container>img{
  filter: brightness(50%);
}

.equipos-search-icon{
  display: none;
}
.container-tool-text .equipos-search-icon{
  display: block;
}

.container-equipos-search-icon{
  width: 100%;
  height: 100%;
}
.container-equipos-search-icon img.equipos-search-icon{
  width: 58px;
  opacity: 0.5;
}

.container-tool-text p{
  font-family: 'MrEavesXLModOT-Heavy',sans-serif;
  font-size: 1.25rem;
  text-align: center;
}

.images-tools:first-child{
  margin-top: 0;
}

.equipos-modal .equipos-modal-info-image{
  padding: 0;
  justify-content: center;
  max-width: 955px;
  max-height: 510px;
}
.equipos-modal .equipos-modal-info-image img{
  width: 310px;
  height: 194px;
  object-fit: cover;
  object-position: ce;
}

.hexagon-container-equipos{
  width: 278px;
  height: 321px;
}
.hexagon-container-equipos>img{
  object-fit: cover;
}
.container-tool-text p{
  margin-top: 13px;
}

.images-tools{
  margin-bottom: 63px;
}

@media (min-width: 700px){
  .equipos-modal-info-image{
    width: 75%;
    height: fit-content;
  }

  .equipos-modal .equipos-modal-info-image img{
    width: 100%;
    height: auto;
  }
}

@media (min-width: 992px) {

  .container-tool-text p{
    font-family: 'MrEavesXLModOT-Reg',sans-serif;
  }
  
  div.container-tool-text:hover P{
    font-family: 'MrEavesXLModOT-Heavy',sans-serif;
  }

  div.container-tool-text:hover{
    color: var(--bg-color-blue);
    transform: scale(1.10);
    cursor: pointer;
    font-family: 'MrEavesXLModOT-Heavy',sans-serif;
    font-size: 30px;
    line-height: 35px; /* 116.667% */
  }
  
  .container-tool-text:hover .hexagon-container>img{
    filter: brightness(50%);
  }

  .container-tool-text:hover .equipos-search-icon{
    display: block;
  }

  .container-tool-text{
    margin: 0 3.5rem 6.73rem 3.5rem;
    transition: transform 0.5s;

    color: var(--bg-color-white);
  }

  .container-tool-text .hexagon-container>img{
    filter: brightness(100%);
  }

  .container-tool-text .equipos-search-icon{
    display: none;
  }

  .container-introduccion-tools{
    position: relative;
    padding: 71px 0;
    max-width: 458PX;
  }

  .container-introduccion-tools .introduccion::before{
    top: -100%;
    left: -35px;
    width: 129px;
    height: 132px;
  }

  .container-introduccion-tools .introduccion{
    font-family: 'MrEavesXLModOT-Reg',sans-serif;
    font-size: 20px;
    max-width: 458PX;
  }

  .hexagon-container-equipos{
    width: 301.437px;
    height: 348.618px;
  }
  
  .hexagon-container-equipos>img{
    object-fit: cover;
    object-position: center;
  }

  .images-tools{
    margin-top: 88px;
  }

  .images-tools div p{
    font-size: 30px;
    max-width: 317px;
  }
  
  .container-tool-text:hover .images-tools div p {
    font-family: 'MrEavesXLModOT-Heavy',sans-serif;
  }

  .equipos-modal-info-image{
    width: 75%;
    height: fit-content;
  }

  .equipos-modal .equipos-modal-info-image img{
    width: 100%;
    height: auto;
  }
}


@media (min-width: 1536px) {
  main{
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .section-title-page{
      width: 100%;
  }
  .images-tools{
      max-width: 1366px;
  }
}


@media (min-width: 1890px){

  .equipos-modal-info-image{
    width: auto;
    height: auto;
  }
}