@extends('webpages-templates-w028.frontend-public-default', [
    'menu' => 'contact',
  ]
)
@section('view-title', $data->headPageInfo->title)
@section('view-description', $data->headPageInfo->description)
@section('view-keywords', $data->headPageInfo->keywords)
@section('view-robots', $data->headPageInfo->robots)
@section('view-designer', $data->headPageInfo->designer)
@section('view-canonicalURL', $data->headPageInfo->canonicalURL)
@section('view-alternatesURL')
@foreach ($data->headPageInfo->alternatesURL as $langCode => $langURL)
<link rel="alternate" hreflang="{{ $langCode }}" href="{{ $langURL }}"/>
@endforeach
@endsection
@push('styles-head')
<!--<link rel="stylesheet" media="all" type="text/css" href="{{ $data->webpageIdentifier }}.css"/>-->
<!--<link rel="stylesheet" media="all" type="text/css" href="main.css"/>-->
@endpush
@push('scripts-head')
<!--<script type="text/javascript" src="{{ $data->webpageIdentifier }}.js" defer="defer"></script>-->
<script type="text/javascript" src="main.js" defer="defer"></script>
<script defer="defer">
  window.addEventListener(`load`, (event) => {
    const carouselId01 = `welcome`; //§ PREFER KEBAB-CASE
    const carouselWelcome00 = new Swiper(`*[data-carousel-id="${ carouselId01 }"]`, {
      autoHeight: true,
      
      slidesPerView: 1,                                           // `auto`
      spaceBetween: 0,                                            // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
      centeredSlides: true,                                       //
      direction: `vertical`,                                    // §[ `horizontal` | `vertical` ]§
      effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
      speed: 300,                                                 // number = Duration of transition between slides (in ms)
      fadeEffect: {
        crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
      },
      flipEffect: {},                                             //
      coverflowEffect: {},                                        //
      cubeEffect: {},                                             //
      creativeEffect: {},                                         //
      preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
      preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
      initialSlide: 0,                                            // number = Index number of initial slide.
      rewind: true,                                               // USE LOOP OR REWIND! NOT BOTH
      loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
      autoplay: {
        delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
        disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
        pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
        reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
        stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
        waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
        // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
      },
      freeMode: {
        enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
        sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
        momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
        minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
        momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
        momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
        momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
        momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
      },
      allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
      grabCursor: true,                                           // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
      navigation: {
        enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
        nextEl: `*[data-carousel-control-next-id="${ carouselId01 }"]`, // string = CSS selector
        prevEl: `*[data-carousel-control-prev-id="${ carouselId01 }"]`, // string = CSS selector
        // [...]
      },
      pagination: {
        enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
        el: `*[data-carousel-pagination-id="${ carouselId01 }"]`, // string = CSS selector or HTML element of the container with pagination.
        type: `fraction`,                                         // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
        clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
        clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
  //      renderBullet: function(index, className) {
  ////        return `<span class="${ className }">${ index + 1 }</span>`;
  //        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
  //      }
        renderFraction: function (currentClass, totalClass) {
          return `<span class="${ currentClass }"></span><div class="swiper-pagination-divider"></div><span class="${ totalClass }"></span>`;
        }
        // [...]
      },
      scrollbar: {
        enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
        el: `*[data-carousel-scrollbar-id="${ carouselId01 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
        hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
        draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
        snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
        dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
        scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
        lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
        dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
        horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
        verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
      },
//      on: {                                                       // Register event handlers
//        slideChange: someFunction,
//        reachEnd: someFunction,
//      },
//      breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//        320: { // when viewport width is >= 320px
//          slidesPerView: 2,
//          spaceBetween: 20,
//          allowTouchMove: true
//        },
//        480: { // when viewport width is >= 480px
//          slidesPerView: 3,
//          spaceBetween: 30,
//          allowTouchMove: true
//        },
//        768: { // when viewport width is >= 768px
//          slidesPerView: 4,
//          spaceBetween: 40,
//          allowTouchMove: true
//        },
//        1024: { // when viewport width is >= 1024px
//          slidesPerView: 4,
//          spaceBetween: 40,
//          allowTouchMove: false
//        },
//        1280: { // when viewport width is >= 1280px
//          slidesPerView: 4,
//          spaceBetween: 40,
//          allowTouchMove: false
//        },
//        1920: { // when viewport width is >= 1920px
//          slidesPerView: 4,
//          spaceBetween: 40,
//          allowTouchMove: false
//        }
//      }
    });
  });
</script>
<script defer="defer">
window.addEventListener(`load`, (event) => {
  const carouselId02 = `brake-hose-lines`; //§ PREFER KEBAB-CASE
  const carouselBrakeHoseLines = new Swiper(`*[data-carousel-id="${ carouselId02 }"]`, {
    slidesPerView: 1,                                           // `auto`
    spaceBetween: 0,                                            // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: true,                                      //
    direction: `vertical`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: true,                                               // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: false,                                          // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselId02 }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselId02 }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselId02 }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `fraction`,                                          // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselId02 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
hashNavigation: true,
//    on: {                                                       // Register event handlers
//      slideChange: someFunction,
//      reachEnd: someFunction,
//    },
//    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true
//      },
//      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true
//      },
//      1024: { // when viewport width is >= 1024px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      }
//    }
  });
});
</script>
<script defer="defer">
window.addEventListener(`load`, (event) => {
  const carouselId03 = `brake-hose-characteristics`; //§ PREFER KEBAB-CASE
  const carouselBrakeHoseCharacteristics = new Swiper(`*[data-carousel-id="${ carouselId03 }"]`, {
    slidesPerView: 1,                                           // `auto`
    spaceBetween: 0,                                            // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: true,                                      //
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: true,                                               // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: false,                                          // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselId03 }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselId03 }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselId03 }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `bullets`,                                          // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: true,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselId03 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
//    on: {                                                       // Register event handlers
//      slideChange: someFunction,
//      reachEnd: someFunction,
//    },
//    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true
//      },
//      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true
//      },
//      1024: { // when viewport width is >= 1024px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      }
//    }
  });
});
</script>
<script defer="defer">
window.addEventListener(`load`, (event) => {
  const carouselId04 = `company-presentation`; //§ PREFER KEBAB-CASE
  const carouselCompanyPresentation = new Swiper(`*[data-carousel-id="${ carouselId04 }"]`, {
    slidesPerView: 1,                                           // `auto`
    spaceBetween: 0,                                            // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: true,                                      //
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: true,                                               // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: false,                                          // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselId04 }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselId04 }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselId04 }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `bullets`,                                          // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: true,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselId04 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
//    on: {                                                       // Register event handlers
//      slideChange: someFunction,
//      reachEnd: someFunction,
//    },
//    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true
//      },
//      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true
//      },
//      1024: { // when viewport width is >= 1024px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      }
//    }
  });
});
</script>
@endpush
@section('webpage-structure')
<main>
<h1 style="display: none;">Sá Mourão</h1>
  <section class="swiper" data-carousel-id="welcome">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="caption">
          <span>{!! __('content.carousel-welcome-slide-01-text') !!}</span>
          <a class="" target="_self" rel="" href="#linha-premium">{!! __('content.carousel-welcome-slide-01-anchor-text') !!}</a>
        </div>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="sync" loading="eager" fetchpriority="high"
               width="1920" height="1080" sizes="100w"
               srcset="/sa-mourao/volatile/carousel-welcome/banner-a.1920x1080.jpg 1920w,
                       /sa-mourao/volatile/carousel-welcome/banner-a.3840x2160.jpg 3840w"
               src="/sa-mourao/volatile/carousel-welcome/banner-a.1920x1080.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <div class="caption">
          <span>{!! __('content.carousel-welcome-slide-02-text') !!}</span>
          <a>{!! __('content.carousel-welcome-slide-02-anchor-text') !!}</a>
        </div>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="sync" loading="eager" fetchpriority="high"
               width="1920" height="1080" sizes="100w"
               srcset="/sa-mourao/volatile/carousel-welcome/banner-b.1920x1080.jpg 1920w,
                       /sa-mourao/volatile/carousel-welcome/banner-b.3840x2160.jpg 3840w"
               src="/sa-mourao/volatile/carousel-welcome/banner-b.1920x1080.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <div class="caption">
          <span>{!! __('content.carousel-welcome-slide-03-text') !!}</span>
          <a>{!! __('content.carousel-welcome-slide-03-anchor-text') !!}</a>
        </div>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="sync" loading="eager" fetchpriority="high"
               width="1920" height="1080" sizes="100w"
               srcset="/sa-mourao/volatile/carousel-welcome/banner-c.1920x1080.jpg 1920w,
                       /sa-mourao/volatile/carousel-welcome/banner-c.3840x2160.jpg 3840w"
               src="/sa-mourao/volatile/carousel-welcome/banner-c.1920x1080.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <div class="caption">
          <span>{!! __('content.carousel-welcome-slide-04-text') !!}</span>
          <a>{!! __('content.carousel-welcome-slide-04-anchor-text') !!}</a>
        </div>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="sync" loading="eager" fetchpriority="high"
               width="1920" height="1080" sizes="100w"
               srcset="/sa-mourao/volatile/carousel-welcome/banner-d.1920x1080.jpg 1920w,
                       /sa-mourao/volatile/carousel-welcome/banner-d.3840x2160.jpg 3840w"
               src="/sa-mourao/volatile/carousel-welcome/banner-d.1920x1080.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <div class="caption">
          <span>{!! __('content.carousel-welcome-slide-05-text') !!}</span>
          <a>{!! __('content.carousel-welcome-slide-05-anchor-text') !!}</a>
        </div>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="sync" loading="eager" fetchpriority="high"
               width="1920" height="1080" sizes="100w"
               srcset="/sa-mourao/volatile/carousel-welcome/banner-e.1920x1080.jpg 1920w,
                       /sa-mourao/volatile/carousel-welcome/banner-e.3840x2160.jpg 3840w"
               src="/sa-mourao/volatile/carousel-welcome/banner-e.1920x1080.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <div class="caption">
          <span>{!! __('content.carousel-welcome-slide-06-text') !!}</span>
          <a class="" target="_self" rel="" href="#linhas-de-mangueiras-de-freio">{!! __('content.carousel-welcome-slide-06-anchor-text') !!}</a>
        </div>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="sync" loading="eager" fetchpriority="high"
               width="1920" height="1080" sizes="100w"
               srcset="/sa-mourao/volatile/carousel-welcome/banner-f.1920x1080.jpg 1920w,
                       /sa-mourao/volatile/carousel-welcome/banner-f.3840x2160.jpg 3840w"
               src="/sa-mourao/volatile/carousel-welcome/banner-f.1920x1080.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <div class="caption">
          <span>{!! __('content.carousel-welcome-slide-07-text') !!}</span>
          <a>{!! __('content.carousel-welcome-slide-07-anchor-text') !!}</a>
        </div>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="sync" loading="eager" fetchpriority="high"
               width="1920" height="1080" sizes="100w"
               srcset="/sa-mourao/volatile/carousel-welcome/banner-g.1920x1080.jpg 1920w,
                       /sa-mourao/volatile/carousel-welcome/banner-g.3840x2160.jpg 3840w"
               src="/sa-mourao/volatile/carousel-welcome/banner-g.1920x1080.jpg"/>
        </picture>
      </div>
    </div>
    <div class="swiper-ui">
      <menu class="swiper-navigation">
        <li class="swiper-button-prev" data-carousel-control-prev-id="welcome"></li>
        <li class="swiper-button-next" data-carousel-control-next-id="welcome"></li>
      </menu>
    <div class="swiper-pagination" data-carousel-pagination-id="welcome"></div>
    </div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="welcome"></div>-->
  </section>
  <section id="diferenciais-mangueiras-sa-mourao" class="brake-hose highlights">
    <h2 style="display: none;">{!! __('content.brake-hose-highlights-heading') !!}</h2>
    <div id="scrolling-highlights" class="scroll-within">
      <span class="brake-hose highlight">{!! __('content.brake-hose-highlight-rubber') !!}</span>
      <span class="brake-hose highlight">{!! __('content.brake-hose-highlight-resistance') !!}</span>
      <span class="brake-hose highlight">{!! __('content.brake-hose-highlight-safety') !!}</span>
      <span class="brake-hose highlight">{!! __('content.brake-hose-highlight-pressure') !!}</span>
    </div>
    <p>{!! __('content.brake-hose-highlights-paragraph') !!}</p>
  </section>
  <section id="maleabilidade-e-durabilidade" class="brake-hose malleability-and-durability">
    <h2>{!! __('content.malleability-and-durability-heading') !!}</h2>
    <video class="background" lang="zxx"
           preload="auto" crossorigin="anonymous"
           width="1920" height="750"
           poster="/sa-mourao/assets/videos/trucks-under-operation.1920x750.jpg"
           playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted">
      <source lang="zxx" type="video/mp4" src="/sa-mourao/assets/videos/trucks-under-operation.1920x750.mp4"/>
      §Your browser does not support this video.<br/>
      <br/>
      Download the
      <a download="§Desired Download File Name" type="video/mp4" target="_self" rel="§" href="§movie.mp4">MP4</a>
      video.
    </video>    
    <p>{!! __('content.malleability-and-durability-paragraph') !!}</p>
    <a class="scroll-whitin-webpage" target="_self" rel="" href="#certificado-iso-9001">{{ __('cta.our-certificates') }}</a>
  </section>
  <section id="importancia-das-mangueiras-de-freio" class="brake-hose importance">
    <h2>
      <span>{!! __('content.the-importance-of-brake-hoses-heading-part-01') !!}</span>
      <picture id="" class="overtuned-truck">
        <img id="overtuned-truck" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="1067" height="609" sizes=""
             srcset="/sa-mourao/assets/images/overtuned-truck.1067x609.png 1067w,
                     /sa-mourao/assets/images/overtuned-truck.2134x1218.png 2134w"
             src="/sa-mourao/assets/images/overtuned-truck.1067x609.png"/>
      </picture>      
      <span>{!! __('content.the-importance-of-brake-hoses-heading-part-02') !!}</span>
    </h2>
    <p>{!! __('content.the-importance-of-brake-hoses-paragraph') !!}</p>
  </section>
  <section id="revisao-de-mangueiras-de-freio" class="banner brake-hose maintenance">
    <span>{!! __('content.banner-brake-hose-revision') !!}</span>
    <a class="whatsapp" target="_self" rel="" href="#§">{{ __('cta.ensure-your-safety-here') }}!</a>
  </section>
  <section id="excelencia" class="banner brake-hose topmost-excellence">
    <span>{!! __('content.banner-excellence-line-01') !!}</span>
    <picture id="" class="">
      <img id="" class="" alt=""
           crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
           decoding="auto" loading="lazy" fetchpriority="auto"
           width="1710" height="136" sizes=""
           srcset="/sa-mourao/assets/images/brake-hose-body-and-fitting-horizontal.1710x136.png 1710w,
                   /sa-mourao/assets/images/brake-hose-body-and-fitting-horizontal.3420x272.png 3420w"
           src="/sa-mourao/assets/images/brake-hose-body-and-fitting-horizontal.1710x136.png"/>
    </picture>    
    <span>{!! __('content.banner-excellence-line-02') !!}</span>
  </section>
  <section id="tempo-de-instalacao" class="banner brake-hose installation">
    <span>{!! __('content.banner-installation') !!}</span>
  </section>
  <section id="vantagens-mangueiras-de-freio-sa-mourao" class="brake-hose sa-mourao advantages">
    <div class="layout-split">
      <h3>{!! __('content.brake-hose-advantage-easy-installation-heading') !!}</h3>
      <p>{!! __('content.brake-hose-advantage-easy-installation-paragraph') !!}</p>
      <div class="wrapper video mask">
      <video lang="§" width="1920" height="1080" preload="§" crossorigin="§" poster="/sa-mourao/assets/videos/instalacao-facil-mangueiras-de-freio-sa-mourao.658x370.jpg" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted">
        <source lang="§" type="video/mp4" src="/sa-mourao/assets/videos/instalacao-facil-mangueiras-de-freio-sa-mourao.1920x1080.mp4"/>
        §Your browser does not support this video.<br/>
        <br/>
        Download the
        <a download="§Desired Download File Name" type="video/mp4" target="_self" rel="§" href="/sa-mourao/assets/videos/instalacao-facil-mangueiras-de-freio-sa-mourao.1920x1080.mp4">MP4</a>
        video.
      </video>
      </div>
    </div>
    <div class="layout-split">
      <h3>{!! __('content.brake-hose-advantage-sealing-heading') !!}</h3>
      <p>{!! __('content.brake-hose-advantage-sealing-paragraph') !!}</p>
      <div class="wrapper video mask">
      <video lang="§" width="1920" height="1080" preload="§" crossorigin="§" poster="/sa-mourao/assets/videos/vedacao-mangueiras-de-freio-sa-mourao.658x371.jpg" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted">
        <source lang="§" type="video/mp4" src="/sa-mourao/assets/videos/vedacao-mangueiras-de-freio-sa-mourao.1920x1080.mp4"/>
        §Your browser does not support this video.<br/>
        <br/>
        Download the
        <a download="§Desired Download File Name" type="video/mp4" target="_self" rel="§" href="/sa-mourao/assets/videos/vedacao-mangueiras-de-freio-sa-mourao.1920x1080.mp4">MP4</a>
        video.
      </video>
      </div>
    </div>
    <div class="layout-row">
      <h3>{!! __('content.brake-hose-advantage-material-heading') !!}</h3>
      <p>{!! __('content.brake-hose-advantage-material-paragraph') !!}</p>
      <div id="" class="floating-hose-fittings">
        <picture id="" class="">
          <img id="hose-fitting-front" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="289" height="366" sizes=""
               srcset="/sa-mourao/assets/images/hose-fitting-front.289x366.png 289w,
                       /sa-mourao/assets/images/hose-fitting-front.578x732.png 578w"
               src="/sa-mourao/assets/images/hose-fitting-front.289x366.png"/>
        </picture>
        <picture id="" class="">
          <img id="hose-fitting-further" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="263" height="255" sizes=""
               srcset="/sa-mourao/assets/images/hose-fitting-further.263x255.png 263w,
                       /sa-mourao/assets/images/hose-fitting-further.525x510.png 525w"
               src="/sa-mourao/assets/images/hose-fitting-further.263x255.png"/>
        </picture>
        <picture id="" class="">
          <img id="hose-fitting-furthest" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="179" height="152" sizes=""
               srcset="/sa-mourao/assets/images/hose-fitting-furthest.179x152.png 179w,
                       /sa-mourao/assets/images/hose-fitting-furthest.358x303.png 358w"
               src="/sa-mourao/assets/images/hose-fitting-furthest.179x152.png"/>
        </picture>
      </div>
    </div>
    <a class="whatsapp" target="_self" rel="" href="#§">{{ __('cta.invest-in-quality-now') }}</a>
  </section>
  <section id="linhas-de-mangueiras-de-freio" class="swiper" data-carousel-id="brake-hose-lines">
    <h2 style="display: none;">{!! __('content.brake-hose-lines-heading') !!}</h2>
    <div class="swiper-wrapper">
      <div id="linha-premium" class="swiper-slide" data-hash="linha-premium">
        <h3>{!! __('content.carousel-brake-hose-lines-slide-01-heading') !!}</h3>
        <p>{!! __('content.carousel-brake-hose-lines-slide-01-paragraph') !!}</p>
        <a class="" target="_self" rel="" href="#§">{!! __('content.carousel-brake-hose-lines-slide-01-anchor-text') !!}</a>
        <picture id="" class="illustration">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="960" height="539" sizes=""
               srcset="/sa-mourao/assets/images/new-automated-machinery-at-production-factory-sce-20231127T052410Z.960x539.jpg 960w,
                       /sa-mourao/assets/images/new-automated-machinery-at-production-factory-sce-20231127T052410Z.1920x1078.jpg 1920w"
               src="/sa-mourao/assets/images/new-automated-machinery-at-production-factory-sce-20231127T052410Z.960x539.jpg"/>
        </picture>
        <picture id="" class="brake-hose">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="256" height="531" sizes=""
               srcset="/sa-mourao/assets/images/brake-hose-body-and-fitting-vertical-line-premium.256x531.png 256w,
                       /sa-mourao/assets/images/brake-hose-body-and-fitting-vertical-line-premium.512x1062.png 512w"
               src="/sa-mourao/assets/images/brake-hose-body-and-fitting-vertical-line-premium.256x531.png"/>
        </picture>
      </div>
      <div id="linha-reposicao" class="swiper-slide" data-hash="linha-reposicao">
        <h3>{!! __('content.carousel-brake-hose-lines-slide-02-heading') !!}</h3>
        <p>{!! __('content.carousel-brake-hose-lines-slide-02-paragraph') !!}</p>
        <a class="" target="_self" rel="" href="#§">{!! __('content.carousel-brake-hose-lines-slide-02-anchor-text') !!}</a>
        <picture id="" class="illustration">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="960" height="539" sizes=""
               srcset="/sa-mourao/assets/images/truck-break-maintenance.960x539.jpg 960w,
                       /sa-mourao/assets/images/truck-break-maintenance.1920x1078.jpg 1920w"
               src="/sa-mourao/assets/images/truck-break-maintenance.960x539.jpg"/>
        </picture>
        <picture id="" class="brake-hose">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="256" height="532" sizes=""
               srcset="/sa-mourao/assets/images/brake-hose-body-and-fitting-vertical-line-replacement.256x532.png 256w,
                       /sa-mourao/assets/images/brake-hose-body-and-fitting-vertical-line-replacement.512x1063.png 512w"
               src="/sa-mourao/assets/images/brake-hose-body-and-fitting-vertical-line-replacement.256x532.png"/>
        </picture>
      </div>
    </div>
<!--    <div class="swiper-button-prev" data-carousel-control-prev-id="brake-hose-lines"></div>-->
<!--    <div class="swiper-button-next" data-carousel-control-next-id="brake-hose-lines"></div>-->
<!--    <div class="swiper-pagination" data-carousel-pagination-id="brake-hose-lines"></div>-->
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="brake-hose-lines"></div>-->
  </section>
  <section id="mangueiras-de-freio-sa-mourao" class="swiper" data-carousel-id="brake-hose-characteristics">
    <h2 style="display: none;">Características do Produto</h2>
    <div class="swiper-wrapper">
      <div class="swiper-slide brake-hose">
        <h3>{!! __('content.carousel-brake-hose-characteristics-slide-01-heading') !!}</h3>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="900" height="214" sizes=""
               srcset="/sa-mourao/assets/images/brake-hose-arched.900x214.png 900w,
                       /sa-mourao/assets/images/brake-hose-arched.1800x428.png 1800w"
               src="/sa-mourao/assets/images/brake-hose-arched.900x214.png"/>
        </picture>
        <p>{!! __('content.carousel-brake-hose-characteristics-slide-01-paragraph') !!}</p>
      </div>
      <div class="swiper-slide brake-hose">
        <h3>{!! __('content.carousel-brake-hose-characteristics-slide-02-heading') !!}</h3>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="781" height="361" sizes=""
               srcset="/sa-mourao/assets/images/brake-hose-flexed.781x361.png 781w,
                       /sa-mourao/assets/images/brake-hose-flexed.1562x722.png 1562w"
               src="/sa-mourao/assets/images/brake-hose-flexed.781x361.png"/>
        </picture>
        <p>{!! __('content.carousel-brake-hose-characteristics-slide-02-paragraph') !!}</p>
      </div>
      <div class="swiper-slide brake-hose custom-lenghts">
        <h3>{!! __('content.carousel-brake-hose-characteristics-slide-03-heading') !!}</h3>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="767" height="50" sizes=""
               srcset="/sa-mourao/assets/images/brake-hose-straight.767x50.png 767w,
                       /sa-mourao/assets/images/brake-hose-straight.1534x100.png 1534w"
               src="/sa-mourao/assets/images/brake-hose-straight.767x50.png"/>
        </picture>
        <p>{!! __('content.carousel-brake-hose-characteristics-slide-03-paragraph') !!}</p>
      </div>
    </div>
<!--    <div class="swiper-button-prev" data-carousel-control-prev-id="brake-hose-characteristics"></div>-->
<!--    <div class="swiper-button-next" data-carousel-control-next-id="brake-hose-characteristics"></div>-->
    <div class="swiper-pagination" data-carousel-pagination-id="brake-hose-characteristics"></div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="brake-hose-characteristics"></div>-->
  </section>
  <section id="presilhas" class="brake-hose-clamps">
    <h2>{!! __('content.brake-hose-clamps-heading') !!}</h2>
    <p>{!! __('content.brake-hose-clamps-paragraph') !!}</p>
    <video lang="pt-BR" width="1920" height="1080" preload="§" crossorigin="§" poster="/sa-mourao/assets/videos/recomendacoes-para-instalacoes-de-flexiveis-sa-mourao.1199x674.jpg" playsinline="playsinline" controls="controls">
      <source lang="pt-BR" type="video/mp4" src="/sa-mourao/assets/videos/recomendacoes-para-instalacoes-de-flexiveis-sa-mourao.1920x1080.mp4"/>
      §Your browser does not support this video.<br/>
      <br/>
      Download the
      <a download="§Desired Download File Name" type="video/webm" target="_self" rel="§" href="§movie.webm">WEBM</a>
      or
      <a download="§Desired Download File Name" type="video/mp4" target="_self" rel="§" href="§movie.mp4">MP4</a>
      video.
    </video>
  </section>
  <section id="sobre-nos" class="swiper company" data-carousel-id="company-presentation">
    <h2 style="display: none;">Características do Produto</h2>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h3>{!! __('content.carousel-company-presentation-slide-01-heading') !!}</h3>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="§" height="§" sizes=""
               srcset="w,
                       w"
               src=""/>
        </picture>
        <p>{!! __('content.carousel-company-presentation-slide-01-paragraph') !!}</p>
      </div>
      <div class="swiper-slide">
        <h3>{!! __('content.carousel-company-presentation-slide-02-heading') !!}</h3>
        <picture></picture>
        <p>{!! __('content.carousel-company-presentation-slide-02-paragraph') !!}</p>
      </div>
      <div class="swiper-slide">
        <h3>{!! __('content.carousel-company-presentation-slide-03-heading') !!}</h3>
        <picture></picture>
        <p>{!! __('content.carousel-company-presentation-slide-03-paragraph') !!}</p>
      </div>
    </div>
<!--    <div class="swiper-button-prev" data-carousel-control-prev-id="company-presentation"></div>-->
<!--    <div class="swiper-button-next" data-carousel-control-next-id="company-presentation"></div>-->
    <div class="swiper-pagination" data-carousel-pagination-id="company-presentation"></div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="company-presentation"></div>-->
  </section>
  <section id="certificado-iso-9001" class="company certificates">
    <picture id="" class="badge">
      <img id="" class="" alt=""
           crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
           decoding="auto" loading="lazy" fetchpriority="auto"
           width="§" height="§" sizes=""
           srcset=""
           src="/sa-mourao/assets/images/iso-9001-certificado.svg"/>
    </picture>
    <p>{!! __('content.certificate-iso-9001-paragraph') !!}</p>
    <a class="" target="_self" rel="" href="#§">{{ __('cta.download-our-certificates') }}</a>
  </section>
  <section id="mangueiras-industriais" class="industrial-hoses">
    <h2>{!! __('content.industrial-hoses-heading') !!}</h2>
    <p>{!! __('content.industrial-hoses-paragraph') !!}</p>
    <a>{{ __('cta.get-in-touch') }}</a>
    <picture id="" class="">
      <img id="" class="" alt="Mangueiras Industriais Sá Mourão"
           crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
           decoding="auto" loading="lazy" fetchpriority="auto"
           width="658" height="370" sizes=""
           srcset="/sa-mourao/assets/images/industrial-hoses.658x370.jpg 658w,
                   /sa-mourao/assets/images/industrial-hoses.1316x740.jpg 1316w"
           src="/sa-mourao/assets/images/industrial-hoses.658x370.jpg"/>
    </picture>
  </section>
  <section id="catalogo" class="download catalog">
    <h2>{!! __('content.catalog-heading') !!}</h2>
    <p>{!! __('content.catalog-paragraph') !!}</p>
    <picture id="" class="catalog">
      <img id="" class="" alt=""
           crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
           decoding="auto" loading="lazy" fetchpriority="auto"
           width="403" height="500" sizes=""
           srcset="/sa-mourao/assets/images/catalog-book.403x500.png 403w,
                   /sa-mourao/assets/images/catalog-book.805x1000.png 805w"
           src="/sa-mourao/assets/images/catalog-book.403x500.png"/>
    </picture>
    <a class="download catalog" download="§Downloaded File Name (no extension!)§" target="_self" rel="" href="#§">{{ __('cta.download') }}</a>
  </section>
  <section id="contato" class="">
    <h2>{!! __('content.get-in-touch-heading') !!}</h2>
    <p>{!! __('content.get-in-touch-paragraph') !!}</p>
    <nav class="communication-channels">
      <a>Email: vendas@samourao.com.br</a>
      <a>Fone e Whatsapp: (54) 3771-6229</a>
    </nav>
    
    <!------------------------------------------------------------------------------------------------------------------------------------------------>
    
    <form id="" class="" name="contactRequest"
          accept-charset="UTF-8" method="POST" enctype="application/x-www-form-urlencoded"
          target="_self" rel="§" action="§[ The URL that processes the form submission. ]§">
      <input type="text" name="contactRequest[userVisitor][name]" value="" inputmode="text" spellcheck="false" autocomplete="off" list="" minlength="§<number>§" maxlength="§<number>§" pattern=".*" size="20" placeholder="Nome Completo" required="required"/>
      <select name="contactRequest[userVisitor][state]" class="" title="" data-raveled="state" required="required">
        <option value="" disabled="disabled" hidden="hidden" selected="selected">Estado</option>
        <option value="AC">Acre</option>
        <option value="AL">Alagoas</option>
        <option value="AP">Amapá</option>
        <option value="AM">Amazonas</option>
        <option value="BA">Bahia</option>
        <option value="CE">Ceará</option>
        <option value="DF">Distrito Federal</option>
        <option value="ES">Espírito Santo</option>
        <option value="GO">Goiás</option>
        <option value="MA">Maranhão</option>
        <option value="MT">Mato Grosso</option>
        <option value="MS">Mato Grosso do Sul</option>
        <option value="MG">Minas Gerais</option>
        <option value="PA">Pará</option>
        <option value="PB">Paraíba</option>
        <option value="PR">Paraná</option>
        <option value="PE">Pernambuco</option>
        <option value="PI">Piauí</option>
        <option value="RJ">Rio de Janeiro</option>
        <option value="RN">Rio Grande do Norte</option>
        <option value="RS">Rio Grande do Sul</option>
        <option value="RO">Rondônia</option>
        <option value="RR">Roraima</option>
        <option value="SC">Santa Catarina</option>
        <option value="SP">São Paulo</option>
        <option value="SE">Sergipe</option>
        <option value="TO">Tocantins</option>
      </select>
      <input type="tel" name="contactRequest[userVisitor][telephone]" value="" inputmode="numeric" spellcheck="false" autocomplete="tel" list="" minlength="§<number>§" maxlength="§<number>§" pattern=".*" size="20" placeholder="Telefone" required="required"/>
      <input type="email" name="contactRequest[userVisitor][email]" value="" inputmode="email" spellcheck="false" autocomplete="email" list="" size="20" minlength="6" maxlength="254" pattern="^\S+@\S+\.\S{2,}$" placeholder="Email" required="required"/>
      <label class="privacy-policy">
        <input type="checkbox" name="contactRequest[userVisitor][privacyPolicyConsentment]" value="" required="required"/>
        <span>Li e concordo com a Política de Privacidade</span>
      </label>
      <button type="submit" name="stdSubmission">Enviar</button>
    </form>    
    
    <!------------------------------------------------------------------------------------------------------------------------------------------------>
    
  </section>
  <address id="endereco" class="street-address directions">
    <span class="street-address">{{ $acquaintancesData["streetAddresses"]["main"]["completeString"] }}</span>
    <a class="cta street-address directions" target="_blank" rel="external" href="{{ $acquaintancesData["streetAddresses"]["main"]["googleMapsGetDirections"] }}">{{ __('cta.see-routes') }}</a>
  </address>
  <section id="politica-de-privacidade" class="privacy-policy">
    <span>{!! __('content.website-footer-privacy-policy-text') !!} <a class="privacy-policy download" target="_self" rel="" href="§#">{{ __('terms.privacy-policy') }}</a>.</span>
  </section>
</main>
@endsection