*,
*::after,
*::before {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {

   --navbarHeight: 80px;

   --white: #f3f4f5;
   --black: #030405;

   --gray-50: #F0F0F0;
   --gray-100: #E0E0E0;
   --gray-100-rgb: rgba(224, 224, 224, 0.85);
   --gray-200: #C2C2C2;
   --gray-300: #A3A3A3;
   --gray-400: #858585;
   --gray-500: #666666;
   --gray-600: #4D4D4D;
   --gray-700: #333333;
   --gray-800: #1A1A1A;
   --gray-900: #0A0A0A;

   --primary-50: #E7EAF3;
   --primary-100: #CFD5E6;
   --primary-200: #9FAACE;
   --primary-300: #6E80B5;
   --primary-400: #3E559D;
   --primary-500: #0E2B84;
   --primary-600: #0B2063;
   --primary-700: #071642;
   --primary-800: #040B21;
   --primary-900: #01040D;


   --main-blue: #0B2063;
   --second-blue: #247BA0;
   --main-white: #F3F4F5;
   --second-white: #FFFFFF;
   --main-black: #242424;
}

html {
   scroll-behavior: smooth;
   overflow-x: hidden;
}

body {
   width: 100%;
   max-width: 100vw;
   scroll-behavior: smooth;
   /* font-family: 'Kanit', sans-serif; */
   /* font-family: 'Montserrat', sans-serif; */
   font-family: 'Carme', sans-serif;
}

.hrefWrapper {
   text-decoration: none;
   color: inherit;
}


.icon.icon--reverse {
   filter: invert();
}

.footer {
   width: 100%;
   color: var(--black);
   background-color: var(--gray-200);

}

.footer__container {
   padding: 1rem 0;
   margin: 0 auto;
   height: 100%;
   width: 100%;
   max-width: 1100px;
   opacity: 0.7;
   display: flex;
   justify-content: space-around;
   /* outline: 1px solid red; */
}

.footer__column {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
   /* outline: 1px solid blue; */
}

.footer__column.footer__column--center {
   align-items: center;
}


.footer__row {
   display: flex;
   gap: 12px;
   align-items: center;
   /* outline: 1px solid purple; */
}

.footer__title {
   color: var(--black);
   font-size: 1rem;
   letter-spacing: 1px;
   border-bottom: 1px solid var(--gray-200);
}


.logoLink {
   cursor: pointer;
   width: 100%;
   height: 100%;
   text-align: center;
   /* outline: 1px solid red; */
}


.masterIcon {
   position: absolute;
   z-index: -1;
   width: 450px;
   height: 450px;
}

.masterIcon.masterIcon--bottom {
   bottom: -100px;
   left: -100px;
   filter: grayscale(100%);
   opacity: 0.7;
}



.horizontalSeparator {
   width: 100%;
   height: 4px;
   margin: 2.5rem auto;
   max-width: 700px;
   background-color: var(--gray-100);
   opacity: 0.8;
   border-radius: 4px;

}

.horizontalSeparator.horizontalSeparator--black {
   background-color: var(--gray-600);
}


.link {
   cursor: pointer;
   transition: all 0.25s ease;
}

.link:hover {
   transform: scale(1.05);
}


.infoList {
   text-decoration: none;
   list-style: none;
   text-align: center;
   flex: 1;
   padding: 1.5rem 0.5rem;
   margin: 2rem;
   border-radius: 12px;
   border: 2px solid var(--gray-600);
   /* outline: 1px solid red; */
}

.infoList__item {
   line-height: 150%;
}

.mainNavbar {
   width: 100%;
   height: var(--navbarHeight);
   font-size: 1rem;
   padding: 0 16px;
   display: flex;
   justify-content: space-between;
   background-color: var(--gray-100);
   position: sticky;
   top: 0;
   z-index: 10;
   transition: height 0.25s ease;
   /* outline: 1px solid red; */
}

.mainNavbar--reduced {
   height: 60px;
   font-size: 0.9rem;
   background-color: var(--gray-100-rgb);

}


.mainNavbar__logo {
   width: 20%;
   display: flex;
   justify-content: center;
   align-items: center;
   /* outline: 1px solid violet; */
}

.mainNavbar__logoImg {
   padding: 0;
   height: 100%;
   width: auto;
}

.mainNavbar__desktop {
   color: var(--primary-900);
   flex: 1;
   list-style: none;
   line-height: 100%;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   /* outline: 1px solid blue; */
}

.mainNavbar__mobile {
   display: none;

}

.mainNavbar__item {
   padding: 0 12px;
   cursor: pointer;
   height: 80%;
   display: flex;
   align-items: center;
   /* outline: 1px solid violet; */
}

.mainNavbar__item:hover {
   border-radius: 4px 4px 0 0;
   background: var(--primary-300);
}


.mainNavbar__item.mainNavbar__item--focus .mainNavbar__links {
   /* margin-left: 3rem; */
   padding: 0 1rem;
   border: 4px solid blue;
   border-radius: 4px;
}

.mainNavbar--reduced .mainNavbar__item.mainNavbar__item--focus {
   height: 100%;
   font-size: 1.1rem;
   border-width: 6px;

}

.mainNavbar__links {
   padding: 0 12px;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--primary-900);

   text-decoration: none;

   text-transform: capitalize;

}

.mainNavbar__links.mainNavbar__links--colorInverted {
   color: var(--gray-50);

}

.mainNavbar--reduced .mainNavbar__links {
   font-size: 0.9rem;
}


.mainNavbar__icon {

   margin-left: 8px;
}



/*============ Navbar dropdown  ============*/
.dropdown {

   /* padding: 20px 40px; */
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   /* font-size: 18px; */
   perspective: 1000px;
   z-index: 100;
}

.dropdown:hover .dropdown_menu li {
   display: block;
}

.dropdown_menu {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   perspective: 1000px;
   z-index: -1;
}

.dropdown_menu li {
   display: none;
   /* color: white; */
   background-color: var(--gray-100);
   /* padding: 10px 20px; */
   /* font-size: 16px; */
   opacity: 0;
}

.dropdown_menu li a {
   padding: 10px 20px;
}

.dropdown_menu li:hover {
   background-color: var(--primary-300);

}

.dropdown:hover .dropdown_menu--animated {
   display: block;
}

.dropdown_menu--animated {
   display: none;
}

.dropdown_menu--animated li {
   display: block;
   opacity: 1;
}

.dropdown_menu-6 {
   animation: growDown 300ms ease-in-out forwards;
   transform-origin: top center;
}

@keyframes growDown {
   0% {
      transform: scaleY(0);
   }

   80% {
      transform: scaleY(1.1);
   }

   100% {
      transform: scaleY(1);
   }
}





/*============ Navbar dropdown  ============*/

.mainHeader {
   position: relative;
   /* outline: 10px solid green; */
}

.mainHeader__img {

   height: 250px;
   background: url('../Imagenes/hidraulicHammerv2.jpg') no-repeat center bottom/cover;

   filter: brightness(0.5);

   /* background-attachment: fixed; */

}

.mainHeader__img.mainHeader__img--tabe {
   background-image: url('../Imagenes/logos/logo_tabe.webp');
   background-position: top right;
   background-size: cover;
}

.mainHeader__img.mainHeader__img--cmb {
   background-image: url('../Imagenes/logos/logo_cmb.webp');
   background-position: center right;
}

.mainHeader__img.mainHeader__img--osmaq {
   background-image: url('../Imagenes/logos/logo_osmaq.webp');
   background-position: center center;
}


.mainHeader__img.mainHeader__img--trasteel {
   background-image: url('../Imagenes/logos/logo_trasteel.webp');
   background-position: center center;
}

.mainHeader__img.mainHeader__img--zemmler {
   background-color: #000;
   background-image: url('../Imagenes/logos/logo_zemmler.webp');
   background-position: center center;
   background-size: auto;
}

.mainHeader__img.mainHeader__img--eurocomach {
   background-image: url('../Imagenes/logos/logo_eurocomach.webp');
   background-position: bottom center;
   background-size: auto;
}

.mainHeader__title {
   text-align: end;
   width: 80%;
   font-size: 80px;
   line-height: 100%;
   color: var(--primary-50);
   position: absolute;
   bottom: 80px;
   right: 22px;

}

.mainHeader__menu {
   background-color: var(--gray-100);
   color: var(--primary-900);
   font-weight: 600;
   text-transform: uppercase;
}

.innerMenu {}

.innerMenu__list {
   list-style: none;
   display: flex;
   gap: 32px;
   justify-content: center;

}

.innerMenu__item {
   padding: 0.75rem 0;
   position: relative;
   /* outline: 1px solid red; */
}

.innerMenu__link {
   cursor: pointer;
   color: inherit;
   box-sizing: content-box;
   padding: 0.75rem 3rem;
   text-decoration: none;
   /* outline: 1px solid purple; */
}

.innerMenu__link:visited {
   color: inherit;
}



.innerMenu__item--active.innerMenu__item::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   height: 5px;
   width: 100%;
   background-color: var(--primary-500);


}


.main {
   padding: 22px 0;
   width: 100%;
   min-height: 400px;
   background-color: var(--gray-400);
   /* background-color: purple; */
   /* outline: 1px solid purple; */
}

/* Contenedor invisible para posicionar todo en el centro cuando la pantalla es muy grande */
.main__container {
   margin: 0 auto;
   padding: 0 1rem;
   width: 100%;
   max-width: 1450px;
   min-height: 400px;
   /* outline: 1px solid red; */
}

.contentMenu {
   text-transform: capitalize;
   background-color: var(--gray-900);
   color: var(--gray-50);
   width: 100%;
   max-width: 800px;
   margin: 0 auto;
   margin-bottom: 36px;
   border-radius: 8px;
   /* outline: 1px solid red; */
}

.contentMenu__list {
   list-style: none;
   display: flex;
}

.contentMenu__item {
   cursor: pointer;
   padding: 1rem 0 1.25rem 0;
   flex: 1;
   text-align: center;
   position: relative;

   /* outline: 1px solid blue; */
}

.contentMenu__item.contentMenu__item--active::after {
   content: '';
   width: 80%;
   height: 4px;
   position: absolute;
   left: 10%;
   bottom: 20%;
   border-radius: 16px;
   background-color: var(--primary-500);
}

.content {
   width: 100%;
   padding: 36px 22px;
   background-color: var(--gray-800);
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   z-index: 1;
   /* outline: 1px solid red; */
}

.content__cards {
   width: 100%;
   padding: 36px 22px;
   display: grid;
   gap: 22px;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

   /* outline: 1px solid red; */
}

.content__download {
   position: absolute;
   bottom: 16px;
   right: 50%;
   transform: translateX(50%);
}

/* Aumentando la especificidad */
section.content.content--noActive {
   display: none;
}

.content.content--descriptive {
   display: block;
}

.content__fancyStyle {
   content: '';
   position: absolute;
   z-index: -1;
   width: 200%;
   height: 100px;
   transform-origin: top left;
   transform: rotate(20deg) translateY(-50%) translateX(-50px);
   background-color: var(--gray-600);

}

.content.content--light {
   background-color: var(--gray-50);
   min-height: 500px;
}

.content--light .content__fancyStyle {
   background-color: var(--primary-200);
}

.content__wrapper {
   padding: 1rem;
   display: flex;
   gap: 8px;
   justify-content: space-around;
   /* outline: 1px solid red; */
}

.content__wrapper.content__wrapper--grid {
   justify-content: normal;
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   align-content: center;
   justify-content: center;

}



@media (max-width: 1000px) {
   .content__wrapper.content__wrapper--cards {

      flex-direction: column !important;
      align-items: center;
      justify-content: center;
   }



}



.content__wrapper.content__wrapper--Yaligned {
   padding: 0;
   align-items: center;
}

.content__wrapper.content__wrapper--reverse {
   gap: 3rem;
   flex-direction: row-reverse;
}




.content__wrapper.content__wrapper--space {
   margin: 2.5rem 0;
}

.content__wrapper.content__wrapper--wrap {
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

.content__imgBox {
   height: 250px;
   /* outline: 1px solid blue; */
}



.content__imgBox.content__imgBox--fancy {
   overflow: hidden;
   border-radius: 22px 4px 22px 4px;

}

.content__img {
   height: 100%;
   width: auto;
}

.content__description {

   /* outline: 1px solid purple; */
}

.content__description.content__description--short {
   margin-bottom: 1.5rem;
   width: 60%;
   text-align: center;
   margin-right: auto;
   margin-left: auto;
}

.content__description.content__description--alone {
   width: 80%;

   margin: 1.5rem auto;
   padding: 1rem 2rem;

}

.content__info {
   padding: 1.5rem 2rem;
   width: 60%;
   text-transform: uppercase;
   font-weight: 600;
   /* outline: 1px solid red; */
}

.content__info.content__info--right {
   margin-left: auto;
   text-align: end;
   text-transform: none;
   font-weight: 500;
}

.content__info.content__info--white {
   color: var(--gray-50);
}

.content__info.content__info--body {
   text-transform: none;
   font-weight: normal;
   width: 100%;
   /* outline: 1px solid blue; */
}

.content__info.content__info--expanded {
   text-transform: none;
   text-align: center;
   width: 100%;
}

.content__info.content__info--small {
   text-transform: none;
   font-weight: 400;

}

.content__formater {
   padding: 1rem;
   width: 100%;
   /* outline: 2px dotted black; */
}

.content__formater.content__formater--scrollX {
   padding: 0;
}

.content__formater.content__formater--scrollX .content__title {
   padding: 0 12px;
}



.verticalRow {
   height: 200px;
   width: 1px;
   align-self: center;
   background-color: var(--gray-600);
}


.content__title {
   margin-bottom: 2rem;
   width: fit-content;
   text-transform: uppercase;
   font-weight: 600;
   letter-spacing: 2px;
   font-size: 1.4rem;
   position: relative;
   z-index: 0;
}

.content__title.content__title--center {
   margin-top: 16px;
   margin-bottom: 8px;
   width: 100%;
   text-align: center;
}

.content__title::after {
   content: '';
   position: absolute;
   z-index: -1;
   bottom: 5px;
   height: 10px;
   right: 0;
   left: 0;
   border-radius: 8px;
   background-color: var(--primary-200);
}

.content__container {
   padding: 0 1.5rem;
   padding-bottom: 1rem;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   overflow-x: hidden;
}

@media (max-width:800px) {
   .content__container {
      overflow-x: scroll;
   }
}

.content__container.content__container--wrap {
   overflow-x: unset;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px;
}

.contentCard {

   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.8rem;
   max-width: 250px;
   min-width: 250px;
   /* outline: 1px solid red; */
}

div.contentCard.contentCard--centered {
   margin: 0 auto;
}



.contentCard.contentCard--order .contentCard__title {
   order: 0;
}

.contentCard.contentCard--order .contentCard__description {
   order: 1;
}

.contentCard.contentCard--order .contentCard__imgBox {
   order: 2;
}

.contentCard:not(:first-child) {
   margin-left: 1rem;
}

.contentCard__title {
   font-size: 1.1rem;
   color: var(--primary-700);
   font-weight: bolder;
   text-align: center;
}

.contentCard__imgBox {
   width: 100%;
   height: 150px;
   display: flex;
   justify-content: center;
   align-items: center;
   /* outline: 1px solid violet; */
}

.contentCard__Img {

   width: auto;
   height: 100%;
}

.contentCard__Img.contentCard__Img--rounded {
   border-radius: 12px;
}

.contentCard__description {
   text-align: center;
   line-height: 100%;
}

.infoBox {
   flex: 1;
   /* outline: 1px solid green; */
}

.infoBox__title {
   letter-spacing: 1px;
   text-transform: uppercase;
   width: fit-content;
   margin-bottom: 1.5rem;
   position: relative;
   z-index: 0;

}

.infoBox__title.infoBox__title--small {
   text-transform: none;
   letter-spacing: 0;
   margin-top: -1rem;
   margin-bottom: 0;
   font-size: 16px;
}

.infoBox__title.infoBox__title--small::after {
   display: none;
}


.infoBox__title::after {
   content: '';
   position: absolute;
   z-index: -1;
   bottom: 5px;
   height: 10px;
   right: 0;
   left: 0;
   background-color: var(--primary-200);
}

.infoBox__description {
   white-space: pre-line;
}

.infoBox__list {
   white-space: normal;
   padding-left: 2rem;
}




.imgContainer {
   flex: 0.3;
   position: relative;
   z-index: 1;
   /* outline: 1px solid red; */
}

.imgContainer.imgContainer--big {
   flex: 1;
   /* outline: 1px solid red; */
}

.imgContainer.imgContainer--gray::after {
   background-color: var(--gray-600);
}

.imgContainer::after {
   content: '';
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   width: 200px;
   height: 200px;
   border-radius: 22px;
   transform: translateX(15%) rotate(45deg);
   background-color: var(--primary-600);

}

@media (max-width: 800px) {
   .imgContainer::after {

      width: 160px;
      height: 160px;
      transform: translateX(15%) rotate(45deg);
   }
}



.imgContainer__img {
   height: auto;
   width: 100%;

}

/* .card {
   border-radius: 4px;
   border: 2px solid var(--gray-400);
   background-color: var(--gray-50);
   padding: 1.25rem 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;

} */

.card.card--minimalist {
   flex: 1;
   border: none;
   background-color: transparent;
}

.card.card--small {
   width: 100%;
   max-width: 250px;
}



.card__imgBox {
   width: 100%;
   height: 180px;
   display: flex;
   justify-content: center;
   align-items: center;
   /* outline: 1px solid red; */
}

.card__img {
   max-width: 340px;
   height: 100%;
   width: auto;
}

.card--small .card__imgBox {
   height: 150px;
}

.card__title {
   text-align: center;
   line-height: 120%;
   color: var(--primary-800);
   font-weight: bold;
   text-transform: uppercase;
}

.button {

   cursor: pointer;
   text-decoration: none;
   color: inherit;
   display: flex;
   align-items: center;

   gap: 8px;
   padding: 8px 20px;
   border-radius: 4px;
   outline: none;
   border: 1px solid var(--primary-300);
   transition: box-shadow 0.25s ease;
   /* outline: 1px solid blue; */
}

.button.button--wide {
   width: 60%;
   padding: 16px;
   text-transform: uppercase;
   font-size: 1.2rem;
   font-weight: 600;
   justify-content: center;
   border: none;
   box-shadow: -5px -5px 5px rgba(92, 92, 92, 0.1),
      3px 3px 5px rgba(0, 0, 0, 0.4),
      inset -5px -5px 5px rgba(82, 82, 82, 0.2),
      inset 3px 3px 5px rgba(0, 0, 0, 0.4);
}

.button.button--hero {
   margin: 55px auto 0;
   width: 60%;
   justify-content: center;
   padding: 16px;
   text-transform: uppercase;
   font-size: 1.2rem;
   font-weight: 600;
   border: none;
   color: var(--gray-200);
   box-shadow: -2px -2px 5px rgba(92, 92, 92, 0.05),
      5px 5px 10px rgba(0, 0, 0, 0.5),
      inset -5px -5px 5px rgba(82, 82, 82, 0.2),
      inset 5px 5px 5px rgba(82, 82, 82, 0.2);

}

.button.button--hero:focus {
   box-shadow: -5px -5px 5px rgba(92, 92, 92, 0.1),
      3px 3px 5px rgba(0, 0, 0, 0.4),
      inset -5px -5px 5px rgba(82, 82, 82, 0.2),
      inset 3px 3px 5px rgba(0, 0, 0, 0.4);
}

.button.button--reduced {
   margin-top: 22px;
   margin-left: 22px;
   width: fit-content;
}

.button:hover {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 


/*

Mobile media queries
*/
@media (max-width:950px) {


   body {
      overflow-x: hidden;
   }

   .verticalRow {
      display: none;
   }

   .tuerca {
      position: absolute;
      bottom: 0;
      left: -15px;
      width: 80px;
      height: 80px;
      filter: invert();
      animation: rotation 5s infinite linear;
   }

   @keyframes rotation {
      from {
         transform: rotate(0deg);
      }

      to {
         transform: rotate(359deg);
      }
   }


   .mainNavbar {
      height: 50px;
      justify-content: space-between;
      font-size: .9rem;
      position: fixed;
   }



   .mainNavbar__desktop {
      display: none;
   }

   .mainNavbar__mobile {
      color: var(--black);
      padding: 4rem 16px;
      width: 100%;
      height: calc(100vh - 50px);
      text-transform: uppercase;
      font-size: .8rem;
      font-weight: bold;
      position: absolute;
      top: 50px;
      left: 0;
      transform: translate(120%, -120%);
      display: flex;
      gap: 16px;
      flex-direction: column;
      align-items: center;
      transition: transform 0.6s ease-in-out;

      background-color: var(--gray-100-rgb);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(7.9px);
      -webkit-backdrop-filter: blur(7.9px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      opacity: 0;
   }

   .mainNavbar__mobile.mainNavbar__mobile--active {
      opacity: 1;
      transform: translate(0%, 0%);
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      top: 50px;

   }

   .burger {
      cursor: pointer;
      z-index: 10;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      /* outline: 1px solid red; */
   }

   .mobile__list {
      margin-top: 16px;
      list-style: none;
      display: none;
      width: 100%;
      z-index: 5;
   }

   .mobile__list.mobile__list--active {
      display: block;
   }

   .mobile__item {
      cursor: pointer;
      padding: 1rem .5rem;
      width: 100%;
      font-weight: bold;
      list-style: none;
      position: relative;
      /* outline: 1px solid red; */
   }

   .mobile__item.mobile__item--wrapper {
      padding: 0;
   }

   .mainNavbar__icon {
      vertical-align: bottom;
      margin-left: 6px;
   }

   .mobile__item.mobile__item--inner {
      width: 100%;
   }

   .mobile__link {
      padding: 1rem;
      display: block;
      text-decoration: none;
      color: inherit;
      width: 100%;
      height: 100%;
      /* outline: 8px solid violet; */
   }

   .mobile__link.mobile__link--strong {
      border: 2px solid var(--primary-600);
      border-radius: 8px;
      text-align: center;
   }

   .mobile__checkbox {
      position: absolute;
      top: 0;
      height: 50px;
      width: 100%;
      /* opacity: 0; */
   }

   .mobile__checkbox:checked~.mobile__list {
      display: block;
   }




   .line {
      position: absolute;
      width: 20px;
   }

   .line-main::before,
   .line-main::after,
   .line-split::before,
   .line-split::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #000;
      transition: transform .5s ease-in-out;
   }

   .line-main::before {
      transform: translateY(-7px);
   }

   .line-main::after {
      transform: translateY(7px);
   }

   .line-split::after,
   .line-main::before {
      width: 100%;
      transition: transform .5s, opacity .5s;

   }

   .line-split::after {
      width: 50%;
      transform: translateX(10px);
   }

   .burger.burger--active .line-main::before {
      transform: rotate(45deg);
   }

   .burger.burger--active .line-main::after {
      transform: rotate(-45deg);
   }

   .burger.burger--active .line-split::before {
      transform: translateX(-10px);
      opacity: 0;
   }

   .burger.burger--active .line-split::after {
      transform: translateX(20px);
      opacity: 0;
   }

   .burger.burger--active .menu {
      transform: translate(0%, 0%);
      /* background-color: red; */
   }



   .footer__container {
      padding: 1.5rem;
      flex-direction: column;
      gap: 22px;
      align-items: center;
   }

   div.mainHeader__img {
      display: none;
      height: 60px;
      background-image: none;

   }

   .mainHeader {
      padding-top: 1rem;
      /* outline: 10px solid green; */
      background-color: var(--gray-700);
   }

   .mainHeader__title {
      padding-bottom: 1rem;
      text-align: center;
      text-transform: uppercase;
      width: 100%;
      font-size: 1.1rem;
      line-height: 100%;
      color: var(--primary-50);
      position: static;
      bottom: 25px;
      right: 0px;

   }

   .innerMenu__list {

      gap: 8px;
      justify-content: center;


   }

   .innerMenu__item {
      padding: 0;
      flex: 1;

      position: relative;
      /* outline: 1px solid red; */
   }

   .innerMenu__link {
      padding: .75rem 0;
      display: inline-block;
      font-size: .8rem;
      width: 100%;
      height: auto;
      text-align: center;

      /* outline: 1px solid purple; */
   }

   .main__container {
      padding: 0;
   }

   .contentMenu {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      padding: 0 8px;
      margin-bottom: 16px;
      border-radius: 8px;
      /* outline: 1px solid red; */
   }

   .contentMenu__list {
      align-items: center;
   }

   .contentMenu__item {
      cursor: pointer;
      padding: .5rem .2rem .8rem .2rem;
      /* padding: 0; */
      flex: 1;
      font-size: .8rem;
      /* text-align: center; */
      position: relative;

      /* outline: 1px solid blue; */
   }


   .content__wrapper.content__wrapper--space {
      margin: 0;
   }



   .infoBox__title {

      margin-bottom: .5rem;
      margin-right: 0;
      font-size: 1rem;
   }

   .infoBox__title.infoBox__title--small {


      margin-top: -.4rem;

      font-size: 14px;
   }

   .infoBox__title::after {
      display: none;
   }


   .imgContainer {
      flex: 0.5;
      max-width: 350px;
      max-height: 350px;
   }

   .content {
      padding: 36px 12px;
   }

   .content__info {
      padding: 0;
      width: 100%;
      font-size: .9rem;
      text-transform: uppercase;
      font-weight: 600;
   }

   .content__description {
      text-align: center;
      /* outline: 1px solid purple; */
   }

   .content__description.content__description--short {
      margin-bottom: 1.5rem;
      width: 100%;


   }

   .infoList {
      min-width: 300px;
      flex: 1;
      padding: 1.5rem 0.5rem;
      margin: 2rem;
      border-radius: 12px;
      border: 2px solid var(--gray-600);
      /* outline: 1px solid red; */
   }

   .imgContainer.imgContainer--big {
      flex: 1;
      min-width: 250px;
   }

}


@media (max-width: 650px) {

   .content__wrapper.content__wrapper--reverse,
   .content__wrapper {
      gap: 22px;
      flex-direction: column;
      align-items: center;
   }

   .imgContainer::after {
      display: none;

   }

   .content__description.content__description--alone {
      width: 100%;

      margin: 1.5rem auto;
      padding: 1rem 2rem;

   }



}



@media (max-width: 500px) {
   .content__wrapper {

      display: flex;
      flex-direction: column;
      /* outline: 1px solid red; */
   }

   .content__info {
      margin-bottom: 22px;
   }

   .content__wrapper.content__wrapper--reverse {
      gap: 0;
      flex-direction: column;
   }



   .content__img,
   .content__imgBox {

      height: 200px;

   }


   .content__description.content__description--alone {
      padding: 0;
   }
}

/* new styles */

.header {
   width: 100%;
   min-height: 200px;
}

@media(max-width:800px) {
   .header {
      padding-top: 50px;
   }
}

.header__img {
   height: 200px;
   width: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

@media(max-width:800px) {
   .header__img {
      background-size: contain;
   }
}

.header__img.header__img--gordini {
   background-image: url('../Imagenes/logos/logo_gordini.webp');
}

.header__img.header__img--cmb {
   background-image: url('../Imagenes/logos/logo_cmb.webp');
}

.header__img.header__img--eurocomach {
   background-image: url('../Imagenes/logos/eurocomach_banner.jpg');
}

.header__img.header__img--osmaq {
   background-image: url('../Imagenes/logos/logo_osmaq.webp');
}

.header__img.header__img--zemmler {
   background-image: url('../Imagenes/zemmler/zemmler_banner.png');
}

.header__img.header__img--mccloskey {
   background-image: url("../Imagenes/mccloskey/mccloskey_banner_desktop.jpeg");
   background-position: center right;
}

.header__img.header__img--bano {
   background-image: url("../Imagenes/bano/bano_banner.jpg");
}

.header__img.header__img--hammel {
   background-size: contain;
   background-image: url("../Imagenes/hammel/hammel_banner.png");
}

.header__img.header__img--trasteel {
   background-size: contain;
   background-image: url("../Imagenes/material_desgaste/trasteel/trasteel_banner.jpg");
}

.header__img.header__img--tabe {
   background-size: contain;
   background-image: url('../Imagenes/logos/logo_tabe.webp');
}

.header__img.header__img--eriez {
   background-size: contain;
   background-image: url("../Imagenes/eriez/eriez_banner.png");
}

.header__info {
   margin: 28px auto;
   padding: 22px 0;
   padding-left: 6px;
   width: 70%;
   display: flex;
   flex-direction: column;
   gap: 16px;
   border-left: 12px solid var(--second-blue);
   font-family: 'Kanit', sans-serif;
}

@media(max-width:800px) {
   .header__info {
      width: 90%;
   }
}

.section__header {
   height: 160px;
   width: 100%;
}

@media(max-width:800px) {
   .section__header {
      height: fit-content;
   }
}

.section__header.section__header--mccloskey {
   background: rgb(255, 240, 9);
   background: linear-gradient(153deg, rgba(255, 240, 9, 0.7) 16%, rgba(42, 125, 48, 0.7) 92%);
}

.section__header.section__header--eurocomach {
   background: rgb(230, 82, 41);
   background: linear-gradient(153deg, rgba(230, 82, 41, 1) 21%, rgba(243, 244, 245, 1) 91%);
}

.section__header.section__header--bano {
   background: rgb(226, 7, 19);
   background: linear-gradient(153deg, rgba(226, 7, 19, 1) 16%, rgba(249, 91, 0, 1) 53%);
}

.section__header.section__header--hammel {
   background: rgb(255, 237, 0);
   background: linear-gradient(153deg, rgba(255, 237, 0, 1) 23%, rgba(227, 6, 19, 1) 99%);
}

.section__header.section__header--zemmler {
   background: rgb(0, 122, 69);
   background: linear-gradient(153deg, rgba(0, 122, 69, 1) 31%, rgba(3, 4, 5, 0.75) 91%);
}

.section__header.section__header--cmb {
   background: rgb(200, 4, 27);
   background: linear-gradient(153deg, rgba(200, 4, 27, 1) 23%, rgba(3, 4, 5, 0.8) 80%);
}

.section__header.section__header--osmaq {
   background: rgb(194, 236, 1);
   background: linear-gradient(153deg, rgba(194, 236, 1, 1) 32%, rgba(243, 244, 245, 1) 80%);
}

.section__header.section__header--trasteel {
   background: rgb(245, 167, 0);
   background: linear-gradient(153deg, rgba(245, 167, 0, 1) 19%, rgba(243, 244, 245, 1) 91%);
}

.section__header.section__header--tabe {
   background: rgb(0, 55, 123);
   background: linear-gradient(153deg, rgba(0, 55, 123, 1) 19%, rgba(209, 112, 6, 1) 83%);
}

.section__header.section__header--gordini {
   background: rgb(255, 219, 35);
   background: linear-gradient(140deg, rgba(255, 219, 35, 1) 31%, rgba(36, 53, 63, 1) 80%);
}

.section__header.section__header--eriez {
   background: rgb(246, 137, 30);
   background: linear-gradient(153deg, rgba(246, 137, 30, 1) 16%, rgba(243, 244, 245, 1) 88%);
}

.section__title {
   position: relative;
   text-transform: uppercase;
   font-size: 68px;
   padding: 22px 56px;
   font-family: 'Montserrat', sans-serif;
}

@media(max-width: 800px) {
   .section__title {
      font-size: 36px;
   }
}

.section__body {
   max-width: 1100px;
   padding: 0 22px;
   margin: 0 auto;
}


.section__description {
   padding: 22px 0;
   width: 70%;
   font-weight: 600;
   text-align: center;
   text-transform: lowercase;
   margin: 0 auto;
   font-family: 'Kanit', sans-serif;
}

.section__description.section__description--content {
   display: flex;
   gap: 8px;
   justify-content: center;
   align-items: center;
}

.section__description.section__description--catalog {
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: start;
   margin: 0;
}

@media(max-width:800px) {
   .section__description.section__description--catalog {
      width: 100%;
      margin: unset;
      justify-content: center;
   }
}

.masterGroup {
   padding: 28px;
}

@media(max-width:800px) {
   .masterGroup {
      padding: 28px 12px;
   }
}

.groupContainer {
   padding: 22px 0;
}


.groupContainer.groupContainer--content {
   display: flex;
   gap: 36px;
   flex-direction: row;
}

.groupContainer.groupContainer--reverse {
   flex-direction: row-reverse;
}


@media(max-width: 800px) {

   .groupContainer.groupContainer--content,
   .groupContainer.groupContainer--reverse {
      display: flex;
      flex-direction: column;
   }
}

.groupContainer__title {
   font-size: 42px;
   padding-left: 6px;
   text-transform: uppercase;
   border-left: 12px solid var(--second-blue);
}

@media(max-width: 800px) {
   .groupContainer__title {
      font-size: 28px;
   }
}

.groupContainer__title.groupContainer__title--marginBottom {
   margin-bottom: 22px;
}


.groupContainer__info {
   flex: 1;
}

.groupContainer__info .groupContainer__description {
   padding: 0;
   padding-bottom: 8px;
}

.groupContainer__img {
   min-height: 160px;
   max-height: 220px;
   object-fit: contain;
   border-radius: 6px;
}

.groupContainer__description {
   padding: 16px 0;
}

.groupContainer__description.groupContainer__description--list {
   padding: 16px;
   text-transform: capitalize;
}

.groupContainer__description.groupContainer__description--strong {
   font-weight: 600;

}

.cardContainer {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 280px));
   align-items: start;
   gap: 22px;
}


.cardContainer.cardContainer--xpanded {
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (max-width: 800px) {

   .cardContainer,
   .cardContainer.cardContainer--xpanded {
      grid-template-columns: repeat(auto-fit, minmax(100px, 175px));
      justify-content: space-around;
      gap: 12px;
   }
}

.cardContainer.cardContainer--fixed {

   justify-content: space-around;

}

.card {
   padding: 12px 0;
   outline: 2px solid var(--main-blue);
   border-radius: 6px;
   max-width: 280px;
   background-color: transparent;
   display: flex;
   flex-direction: column;
   gap: 16px;

}



.card__img {
   width: 100%;
   height: auto;
}

.card__title {
   font-size: 18px;
   text-transform: uppercase;
   font-weight: 600;
}

@media (max-width:800px) {
   .card__title {
      padding: 0 8px;
   }
}

.card__description {
   width: 100%;
   font-size: 16px;
   padding: 0 16px;
   text-decoration: none;
   list-style: none;
   text-align: start;
}

.card__description.card__description--listed {
   padding-left: 22px;
   list-style-type: disc;
}

.card__btn {
   align-self: center;
}

.card__btn.card__btn--big {
   font-size: 32px;
   padding: 16px 32px;
   transition: 0.2s ease;
}

.card__btn.card__btn--big:hover {
   background-color: var(--second-blue);
   color: var(--main-black);
}

.button {
   background-color: transparent;
   padding: 10px 16px;
   font-size: 14px;
   border-radius: 6px;
   outline: 2px solid var(--second-blue);
}

.button.button--fit {
   margin-top: 22px;
   width: fit-content;
}


/* neew navbar  */

.masterLink {
   outline: 1px solid red;
}

.masterLink__links {
   display: none;
   background-color: green;
}

.masterLink:hover>.masterLink__links {
   display: block;
}

.contact_float {
   cursor: pointer;
   position: fixed;
   bottom: 56px;
   right: 32px;
   z-index: 2;
   display: flex;
   align-items: center;

}


.contact_float_info {
   position: absolute;
   font-size: 20px;
   border-radius: 4px;
   padding: 12px 24px;
   background-color: var(--main-blue);
   color: var(--main-white);
   height: auto;
   width: max-content;
   right: 68px;
   transition: all 0.15s ease-in-out;
}

.contact_float_link {
   color: inherit;
   text-decoration: none;
}

.contact_float_info::after {
   content: '';
   position: absolute;
   right: -16px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 3;
   border-width: 8px;
   border-style: solid;
   border-color: transparent transparent transparent var(--main-blue);
}

.contact_float_info.contact_float_info--off {
   opacity: 0;
   transform: scale(0.5) translateX(50px);
}

.contact_float img {
   width: 64px;
   height: 64px;
}

@media(max-width:850px) {
   .contact_float {
      bottom: 36px;
      right: 22px;
   }

   .contact_float_info {
      font-size: 16px;
      border-radius: 4px;
      padding: 10px 16px;
      right: 46px;

   }

   .contact_float img {
      width: 42px;
      height: 42px;
   }
}