@import url("../css/slick.css")
@import url("../css/jquery-modal.css")
@import url("../css/fancybox.css")

html
    //line-height: 0 !important
    overflow: scrollz
    -webkit-overflow-scrolling: touch
    overflow-x: hidden

@import './components/fonts'
@import './components/variables'
@import './components/mixins'
@import './components/base'
@import './components/adittionals'
@import './components/header'
@import './components/separatorHeader'
@import './components/menuMobile'
@import './components/footer'
@import './components/floats'
@import './components/formFloat'
@import './modals/formMore'
@import './modals/shareModal'
@import './modals/login'
@import './home/banner'
@import './home/products'
@import './home/services'
@import './home/history'
@import './home/sustain'
@import './home/blog'
@import './home/contact'
@import './home/follow'
@import './services/banner'
@import './services/video'
@import './services/video2'
@import './services/video3'
@import './services/services'
@import './services/gallery'
//@import './services/services2'
@import './services/services3'
@import './services/fluids'
@import './about/banner'
@import './about/history'
@import './about/mission'
@import './about/values'
@import './terms/content'
@import './trainings/banner'
@import './trainings/plans'
@import './trainings/trainers'
@import './trainer/content'
@import './courses/content'
@import './courses/internal'
@import './sustain/banner'
@import './sustain/info'
@import './sustain/name'
@import './sustain/gallery'
@import './jobs/content'
@import './blog/content'
@import './blog/post'
@import './request/content'
@import './ethics/content'
@import './login/content'
@import './files/content'

@import './equipment/content'
@import './equipment/product'

@import './multi/video'
@import './multi/solutions'
@import './multi/provide'
@import './multi/certified'
//@import './equipment/categories'
//@import './equipment/listEquipment'

@import './equidad/clock'
@import './equidad/content'
@import './equidad/back'

@import 'home/modal'

.swal-button--confirm
    background-color: #FFCC00
    &:hover
        background-color: #FFCC00

.grecaptcha-badge
    visibility: inherit


p
    white-space: pre-wrap !important
    overflow-wrap: break-word !important

.button_more
    width: auto
    background: #FFCC00
    padding: 12px 1.5rem
    border-radius: 15px
    transition: .3s
    margin-top: 1rem
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.14) , 0px 1px 10px 0px rgba(0,0,0,0.12) , 0px 2px 4px -1px rgba(0,0,0,0.2)
    &:hover
        cursor: pointer

.text_repuestos
    div
        flex-direction: row
        display: flex
        @media (max-width: 900px)
            flex-direction: column
            width: 100%
        img
            width: 35%
            margin: 0 auto
            margin-top: -4%
            height: 300px
            object-fit: contain
            @media (max-width: 900px)
                width: 100%
                margin-top: 2%
                height: auto
                object-fit: none

.video_parts
    width: 100%
    margin: 0 auto
    margin-top: 2%
    height: 350px

.image_labs
    width: 100%
    margin: 4% 0px
    margin-top: 0%
    text-align: center
    h1
      color: #000
      margin-bottom: 2%
      @media (min-width: 1024px)
        font-size: 26px
      @media (min-width: 1440px)
        font-size: 28px
      @media (min-width: 1600px)
        font-size: 30px
    img
        width: 50%
        margin: 0 auto
        @media (max-width: 900px)
            width: 100%

.listItems_repuestos
    p
        width: 100%
    iframe
      border-radius: 10px
      @media (max-width: 900px)
        margin-top: 35px
        margin-bottom: 15px

.downTem_repuestos
    @media (min-width: 1100px)
      margin-left: 10%
    margin-top: 2%
    align-items: center
    gap: 0 .5rem
    background: $yellow
    padding: 1% 2%
    border-radius: 100px
    span
      color: $textColor
      font-weight: 700
    img,svg
      width: 30px
      circle
        fill: $textColor
    @media (min-width: 1280px)
      &:hover
        span
          text-decoration: underline

.banner_spare_parts
  picture
    height: 80vh !important
  h3
    //font-size: 25px !important
    width: 100% !important
  .backText
    height: 100vh !important
    padding-top: 60vh !important
  .button_more
    width: 200px !important
    background: $yellow !important
    padding: 12px 1.5rem !important
    border-radius: 15px !important
    transition: .3s !important
    margin-top: 1rem !important
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.14) , 0px 1px 10px 0px rgba(0,0,0,0.12) , 0px 2px 4px -1px rgba(0,0,0,0.2) !important
    color: $textColor !important
    text-align: center !important
    &:hover
        cursor: pointer !important

.loading-icon.loading-icon
    background: $white
    position: fixed
    top: 0px
    left: 0px
    z-index: 1000
    width: 100%
    height: 100vh
    text-align: center
    display: flex
    justify-content: center
    align-items: center
    img
        position: relative
        top: -20px
        width: 200px // Ajusta el tamaño según necesites
        animation: zoom 2s infinite // Aplica la animación

@keyframes zoom
    0%
        transform: scale(1) // Escala inicial
    50%
        transform: scale(1.05) // Escala a 1.05 en el medio de la animación
    100%
        transform: scale(1) // Vuelve a la escala inicial


.galleryIndustrias
  .content
    justify-content: center !important

body,h1,h2,h3,h4,h5,h6,span,strong,a,p
  font-family: $font-family !important