@font-face {
  font-family: 'OpenSans';
  src: url('fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2') format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-VariableFont_wdth,wght.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Icons from SVG */
.mdi {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: var(--icon-url) no-repeat center / contain;
  -webkit-mask: var(--icon-url) no-repeat center / contain;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.mdi-email { --icon-url: url("images/email.svg"); }
.mdi-phone { --icon-url: url("images/phone.svg"); }
.mdi-map-marker { --icon-url: url("images/map-marker.svg"); }
.mdi-check { --icon-url: url("images/check.svg"); }
.mdi-engine { --icon-url: url("images/engine.svg"); }
.mdi-car-brake-alert { --icon-url: url("images/car-brake-alert.svg"); }
.mdi-wheel-barrow { --icon-url: url("images/wheel-barrow.svg"); }
.mdi-air-conditioner { --icon-url: url("images/air-conditioner.svg"); }
.mdi-car-battery { --icon-url: url("images/car-battery.svg"); }
.mdi-oil { --icon-url: url("images/oil.svg"); }
.mdi-tools { --icon-url: url("images/tools.svg"); }
.mdi-clock { --icon-url: url("images/clock.svg"); }

:root{
  --color-primary: #d8b600;
  --color-primary-contrast: #ffffff; /*Use it for text on primary color backgrounds*/
  --color-secondary: #ffd700;
  --color-secondary-contrast: #ffffff; /*Use it for text on secondary color backgrounds*/
  
  --color-background: #131313;          /* #131313 for dark and #ecf0f1 for light */
  --color-text: #000000;                /* will be set by JS */
  --color-text-muted: #7D7D7D;
  --color-background-dark: #848484;     /* will be set by JS */
  --color-text-light: #ffffff;          /* will be set by JS */
  --color-background-light: #ffffff;    /* will be set by JS */
  --color-text-dark: #000000;           /* will be set by JS */

  --color-background-mix: #000; /* Use for colormix */
  --color-background-odd: color-mix(in srgb, var(--color-background), var(--color-primary) 10%); /* Mix of background and little of primary */
  
  --color-shadow: 2px 2px 20px 1px var(--color-background-primary);

  --border-radius: 15px;
  --border-color: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  
  --content-width: 1200px;
  --transition: 180ms ease;

  --scroll-margin: 70px;

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'OpenSans', 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Roboto', 'OpenSans', sans-serif;
}

body {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  background: var(--color-background);
  color: var(--color-text);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;

  gap: 2rem;
  width: 100%;
}

a{
  color: inherit;
}

button.btn-like-a{
  background: none;
  border: none;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

html {
  scroll-behavior: smooth;
}

[name],[id] {
  scroll-margin-top: var(--scroll-margin);
}

section{
  width: 100%;
}

ul.no-bullets{
  list-style: none;
}
strong{
  color: var(--color-primary);
}

@media (max-width: 1024px) {
  /* Small PC */

}

@media (max-width: 768px) {
  /* Tablet and large mobile */
  [name],[id] {
    scroll-margin-top: calc(var(--scroll-margin) * 2);
  }

}

@media (max-width: 480px) {
  /* Small Mobile */

  body{
    line-height: 1.25;
  }
}


section{
  background: var(--color-background-light);
  border-radius: 0;
  padding: 2rem 4rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  max-width: 100%;

  --section-p-size: 1rem;
  --section-h2-size: 2rem;
  --section-h3-size: 1.5rem;
  --section-i-size: 1.5rem;

  h2 {
    font-size: var(--section-h2-size);
    color: var(--color-primary);
    width: fit-content;
    &::after{
      content: '';
      display: block;
      width: clamp(25%, 100px, 100%);
      height: 2px;
      background: var(--color-primary);
      transition: all var(--transition);
    }
    &:hover::after{
      width: 100%;
    }
  }

  i {
    font-size: var(--section-i-size);
    color: var(--color-primary);
  }

  &:nth-child(odd){
    background: var(--color-background);
  }

  @media (max-width: 1024px) {
    /* Small PC */
  }
  @media (max-width: 768px) {
    /* Tablet and large mobile */
    &{
      padding: 1rem 2rem;
      gap: 1rem 2rem;
      border-radius: 0;

      h2::after{
        width: 100%;
      }

      &.first-padding{
        padding-top: 8rem;
      }
    }
    
  }
  @media (max-width: 480px) {
    /* Small Mobile */
    --section-p-size: 0.9rem;
    --section-h2-size: 1.5rem;
    --section-h3-size: 1.2rem;
    --section-i-size: 1.2rem;

    h2{
      font-size: var(--section-h2-size);
    }
    p{
      font-size: var(--section-p-size);
    }
  }
}


/* Menu */
section.menu{
  width: 100vw;
  min-height: var(--scroll-margin);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.5rem;
  padding: 0;
  background: var(--color-background-light);
  border-bottom: 1px solid var(--color-background-primary);

  & > a{
    text-decoration: none;
    
    h1 {
      font-family: 'Roboto', sans-serif;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      color: var(--color-primary);

      img.logo{
        max-height: var(--scroll-margin);
        width: auto;
        margin-right: 0.5rem;
      }
    }
  }

  span.subtitle{
    font-size: 1.2rem;
    color: var(--color-secondary);
  }

  nav{
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    align-items: center;
    
    a {
      position: relative;
      text-decoration: none;
      color: var(--color-primary);
      font-weight: 600;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 2px;
        background: var(--color-primary);
        transition: width var(--transition);
      }
      
      &:hover{
        &:after{
          width: 100%;
        }
      }

      &.lang{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        
        img.flag{
          height: fit-content;
        }
      }
    }

    #menu-cta{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 0.5rem;
      background: var(--color-primary);
      color: var(--color-primary-contrast);
      padding: 0.5rem 1rem;
      border: 2px solid transparent;
      border-radius: calc(var(--border-radius) / 2);
      transition: all var(--transition);

      &:hover{
        background: var(--color-primary-contrast);
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
      }

      &::after{
        display: none;
      }

      i{
        color: inherit;
      }
    }
  




  }

  @media (max-width: 1024px) {
    /* Small PC */

  }
  @media (max-width: 768px) {
  /* Tablet and large mobile */
    min-height: calc(var(--scroll-margin) * 2);
    height: auto;
    flex-flow: column nowrap;
    align-items: flex-start;
    padding: 0.5rem 1rem;
    

  }
  @media (max-width: 480px) {
    /* Small Mobile */

  }

}

/* Slider */
section.hero_slider {
  margin-top: -2rem ;
  padding: 0;
  width: 100%;
  max-width: 100%;

  .splide__slide__container {
    img {
      width: 100%;
      height: calc(100vh - 70px);
      object-fit: cover;
    }
  }

  .splide__slide__content {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--color-background) 50%, transparent);
    padding: 2rem;

    .title {
      font-size: 4rem;
    }
    p {
      font-size: 2rem;
    }
  }

  @media (max-width: 1024px) {
    /* Small PC */

  }
  @media (max-width: 768px) {
    /* Tablet and large mobile */

  }
  @media (max-width: 480px) {
    /* Small Mobile */

  }
}

section.logo_slider {
  width: 100%;

  /* Make the slide a flex column */
  .splide__slide {
    display: flex;
    flex-direction: column;
    height: auto; /* Allows it to adapt to the flex track height */
  }

  .splide__slide__container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    img {
      object-fit: cover;
    }
  }

  @media (max-width: 1024px) {
    /* Small PC */

  }
  @media (max-width: 768px) {
    /* Tablet and large mobile */
    
  }
  @media (max-width: 480px) {
    /* Small Mobile */

  }
}

section.hero_split {
  margin-top: -2rem;
  padding: 0;
  width: 100%;
  max-width: 100%;
  position: relative;

  & > picture {
    display: flex;
    width: 100%;
    height: calc(100vh - var(--scroll-margin));

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .section-content {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 1rem;
    background: var(--color-background);
    padding: 1rem;
    padding-left: 4rem;
    
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--color-background-light);
      mask: var(--icon-url) center / contain no-repeat;
      -webkit-mask: var(--icon-url) center / contain no-repeat;
      z-index: -1;
    }
    

    h2 {
      font-size: calc(var(--section-h2-size) * 1.5);
    }
    p {
      font-size: var(--section-p-size);
      display: flex;
      align-items: center;

      i {
        color: green;
      }
    }

    .cta{
      display: inline-block;
      background: var(--color-primary);
      color: var(--color-primary-contrast);
      padding: 0.5rem 1rem;
      border: 2px solid transparent;
      border-radius: calc(var(--border-radius) / 2);
      transition: all var(--transition);
      text-decoration: none;

      &:hover{
        background: var(--color-primary-contrast);
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
      }
    }
  }

  @media (max-width: 1024px) {
    /* Small PC */

  }
  @media (max-width: 768px) {
    /* Tablet and large mobile */

    display: flex;
    flex-direction: column nowrap;
    gap: 0;

    & > picture {
      width: 100%;
      height: 40vh;
      min-height: 250px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
      }
    }

    .section-content {
      position: relative;
      top: auto;
      left: auto;

      width: 100%;
      height: auto;
      padding: 1rem;

      h2{
        font-size: calc(var(--section-h2-size) * 1.5);
      }
    }
    
  }
  @media (max-width: 480px) {
    /* Small Mobile */

    .section-content{
      h2{
        font-size: calc(var(--section-h2-size) * 2);
      }
    }
  }
}

section.text{
  
  @media (max-width: 1024px) {
    /* Small PC */

  }
  @media (max-width: 768px) {
    /* Tablet and large mobile */
    
  }
  @media (max-width: 480px) {
    /* Small Mobile */

  }
}

section.text_split_2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;

  .full{
    grid-column: 1 / span 2;
    margin: 0 auto;
  }


  .left, .right {
    width: calc(var(--content-width) / 2);
    &.left{
      margin-left: auto;
    }
    &.right{
      margin-right: auto;
    }
  }

  iframe{
    width: 100%;
    height: 400px;
    border: none;
    border-radius: var(--border-radius);
  }

  i{
    font-size: var(--section-i-size);
    color: var(--color-primary);
  }

  ul li{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.5rem;
  }

  .contact-days{
    list-style: none;
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 0.75rem;
    
    li {
      display: contents;

      span {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }
    }

    i.muted{
      color: var(--color-text-muted);
    }
  }

  .step-by-step{
    list-style: none;
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;

    li {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 0.5rem;
      position: relative;
      background-color: var(--color-background);
      border-radius: var(--border-radius);
      padding: 1rem;
      border: 2px solid transparent;

      i {
        color: var(--color-primary);
      }

      &:hover{
        border-color: var(--color-primary);
      }

      &:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2rem;

        width: 2rem;
        height: 2rem;

        background-color: var(--color-primary);
        mask: url("images/chevron-double-right.svg") center / contain no-repeat;
        -webkit-mask: url("images/chevron-double-right.svg") center / contain no-repeat;

        transform: translateX(-50%) rotate(90deg);
        pointer-events: none;
      }
    }
  }

  @media (max-width: 1024px) {
    /* Small PC */

    &{
      grid-template-columns: 1fr;
    }

    .left, .right{
      width: 100%;
    }

    .full{
      grid-column: 1 / span 1;
    }

    .step-by-step{
      li{
        border-color: var(--color-primary);
      }
    }

    .contact-days, .contact-days + .right{
      width: fit-content;
      margin: 0 auto;
    }

  }
  @media (max-width: 768px) {
    /* Tablet and large mobile */

    .step-by-step{
      .section-content{
        flex-flow: column nowrap;
        gap: 3rem;

        li {
          width: 100%;
          flex-flow: row wrap;

          p{
            font-size: 1rem;
          }
          

          &:not(:last-child)::after{
            top: unset;
            right: 0;
            bottom: -4.5rem;
            height: 3rem;
            width: 100%;
            transform: translateY(-50%) rotate(90deg);
          }
        }
      }
    }
    
  }
  @media (max-width: 480px) {
    /* Small Mobile */

    ul {
      display: flex;
      flex-flow: column;
      gap: 0.25rem;

      &.contact-days{
        display: grid;
      }
      li {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 0 0.5rem;
        line-height: 1;
      }
    }
  }
}

.text_and_image {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr;
  gap: 1rem 3rem;

  picture, & > i {
    grid-row: 1 / span 2;
    text-align: center;
    img{
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 100%;
      object-fit: cover;
      border-radius: var(--border-radius);
      box-shadow: var(--color-shadow);
    }
    &.mdi{
      width: 100%;
      height: 100%;
      color: var(--color-primary);
    }
  }

  h2{
    align-self: center;
  }

  .section-content{
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;

    ul{
      list-style: none;

      i {
        color: var(--color-primary);
        margin-right: 0.5rem;
      }
    }
  }

  &.reverse{
    grid-template-columns: 3fr 1fr;
    picture{
      grid-column: 2 / span 1;
    }
  }

  @media (max-width: 1024px) {
    /* Small PC */

  }
  @media (max-width: 768px) {
    /* Tablet and large mobile */
    
  }
  @media (max-width: 480px) {
    /* Small Mobile */

  }
}

.boxes {
  display: flex;
  flex-flow: column nowrap;
  --section-content-padding: 2rem;

  .section-content{

    display: flex;
    flex-flow: row wrap;
    gap: 3rem;
    max-width: min(calc(100% - var(--section-content-padding)), var(--content-width));
    

    .box{
      flex: 0 1 calc(33.333% - var(--section-content-padding));
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: flex-start;
      background: var(--color-background);
      border-radius: var(--border-radius);
      border: 2px solid transparent;
      padding: 1rem;
      cursor: pointer;
      box-shadow: var(--color-shadow);

      &:hover{
        border-color: var(--color-primary);
      }

      i {
        font-size: calc(var(--section-i-size) * 2);
        color: var(--color-primary);
        margin-bottom: 0.5rem;
      }

      h3{
        font-size: var(--section-h3-size);
        color: var(--color-primary);
        text-align: center;
      }
    }
  }

  &.stats{
    background-color: var(--color-background);

    .section-content{
      justify-content: space-evenly;
      width: 100%;

      .box{
        flex: 1;
        align-items: start;
        background-color: var(--color-background-light);
        border: 2px solid var(--color-background-primary);
      }
  
      h3{
        font-size: var(--section-h2-size); /*Slightly bigger than h3*/
        font-weight: 800;
        color: var(--color-primary);
      }
  
      p{
        color: var(--color-text-muted);
      }
    }
    
  }

  &.text-animation{
    &:hover p{
      font-size: var(--section-p-size);
    }

    p {
      font-size: 0;
      text-align: center;
      transition: all var(--transition);
    }
  }


  @media (max-width: 1024px) {
    /* Small PC */

  }
  @media (max-width: 768px) {
    /* Tablet and large mobile */
    &{
      --section-content-padding: 1rem;
    }

    .section-content{
      flex-flow: column nowrap;

      .box{
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        cursor: initial;


        h3{
          width: calc(100% + 1rem);
          text-align: left;
        }

        p{
          font-size: var(--section-p-size);
        }
      }
    }

    &.stats{
      .section-content{
        flex-flow: row nowrap;
        gap: clamp(0.5rem, 0.7rem, 1rem);
      }

      .box{
        flex-flow: column nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        cursor: initial;
        max-width: 33%;


        h3{
          width: 100%;
          text-align: left;
          font-size: var(--section-h2-size);
        }

        p{
          font-size: var(--section-p-size);
        }
      }
    }
  }
  @media (max-width: 480px) {
    /* Small Mobile */

    &, &.stats{
      --section-content-padding: 1rem;
      
      .section-content{
        flex-flow: column nowrap;
        gap: 0.7rem;
  
        .box{
          flex-flow: row wrap;
          align-items: center;
          justify-content: flex-start;
          gap: 0.5rem;
          cursor: initial;
          max-width: 100%;
  
  
          h3{
            width: clamp(25%, 33%, 100%);
            text-align: left;
            min-width: fit-content;
          }
  
          p{
            width: calc(66% - 0.5rem);
            font-size: var(--section-p-size);
          }
          p:nth-child(3){
            width: 100%;
          }
        }
      }
    }

  }
}

footer{
  width: 100%;
  text-align: center;
  background: var(--color-background-dark);
  margin-top: auto;
  padding: 0.5rem;

  a, .btn-like-a {
    color: var(--color-text);
    text-decoration: underline;
    transition: all var(--transition);
    &:hover{
      color: var(--color-primary);
    }
  }
}