@charset "UTF-8";
*::before,
*::after,
* {
  clear: both;
  float: none;
  z-index: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0;
  box-sizing: border-box;
  width: auto;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  max-height: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  background: none;
  text-align: match-parent;
  text-decoration: none;
  text-transform: inherit;
  text-shadow: 0;
  overflow-wrap: normal;
  opacity: 1;
  visibility: visible;
  outline: 0;
  overflow: visible;
}
html > body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100vw;
  grid-template-areas: "gaWebsiteHeader" "gaWebpage" "gaWebsiteFooter";
  position: relative;
  min-height: 100vh;
  overflow: clip auto;
}
html > body > header {
  grid-area: gaWebsiteHeader;
  width: 100%;
}
html > body > footer {
  grid-area: gaWebsiteFooter;
}
html > body > main {
  grid-area: gaWebpage;
  overflow-x: clip;
}
html > body > main > section {
  margin: auto;
  max-width: inherit;
}
html script {
  display: none;
  visibility: hidden;
}
html picture {
  display: inline-block;
}
html picture > img {
  aspect-ratio: auto;
  border-radius: inherit;
}
html img {
  display: inline-block;
  width: inherit;
  max-width: 100%;
  overflow: auto;
  object-position: center;
}
html svg {
  display: block;
  width: inherit;
  max-width: 100%;
  height: inherit;
  max-height: inherit;
}
html video {
  display: block;
  max-width: 100%;
}
html label:has(> input[type="file"])::after {
  content: "Upload";
  display: inline-block;
  background: linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 700;
}
html label:has(> input[type="file"]) > input[type="file"] {
  display: none;
}
html button {
  display: inline-block;
  text-align: center;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  transition: background 250ms ease-in-out, transform 150ms ease;
}
html button:active {
  transform: scale(0.99);
}
html button:hover,
html button:focus {
  color: inherit;
  outline: 0;
}
html button > object[type="image/svg+xml"] {
  pointer-events: none;
}
html button > object[type="image/svg+xml"]:only-child {
  width: 100%;
  height: 100%;
}
html a {
  color: inherit;
  cursor: pointer;
}
html a:focus {
  color: inherit;
}
html a > object[type="image/svg+xml"] {
  pointer-events: none;
}
html a > object[type="image/svg+xml"]:only-child {
  width: 100%;
  height: 100%;
}
html strong,
html span,
html br {
  clear: none;
  text-transform: inherit;
  color: inherit;
}
html i {
  clear: none;
  text-transform: inherit;
  font-style: italic;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}
html b {
  clear: none;
  text-transform: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-weight: 700;
  font-stretch: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}
*:root {
  --unnamed-color-000000: #000000;
  --unnamed-color-ffffff: #FFFFFF;
  --unnamed-color-151717: #151717;
  scroll-behavior: smooth;
  font-family: "area-normal", sans-serif;
}
*.undisplay {
  display: none !important;
}
@media (pointer: coarse) {
  *.swiper-pagination.swiper-pagination-clickable {
    min-height: 50px;
  }
}
html > body {
  color: #FFFFFF;
  /* Hover effect */
}
html > body > header {
  place-self: start center;
  display: flex;
  flex-flow: row nowrap;
  place-content: stretch;
  place-items: center;
  gap: normal;
  position: fixed;
  z-index: 100;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 100vw;
  height: 145px;
  border: 1px solid #FFFFFF33;
  box-shadow: 0px 3px 6px #0000004F;
  backdrop-filter: blur(16px);
}
html > body > header > a {
  flex: 0 0 auto;
  display: inline-block;
}
html > body > header > a.logo {
  height: 100%;
  padding: 16.51px 13.09px 18.24px 11.38px;
}
html > body > header > a.logo > object,
html > body > header > a.logo > svg {
  max-width: 300px;
  width: 188px;
  height: 34px;
}
html > body > header > nav {
  grid-area: gaMainNav;
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
  place-content: space-between;
  place-items: center;
  gap: normal;
  height: 100%;
  width: auto;
  padding: 0 57px 0 47.22px;
}
html > body > header > nav > a {
  display: inline-block;
}
html > body main {
  background: #000000 0% 0% no-repeat padding-box;
}
html > body main > section[data-carousel-id="welcome"] {
  --swiper-theme-color: var(--unnamed-color-f8f8f8, #F8F8F8);
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  display: flex;
  flex-flow: column nowrap;
  place-content: space-around;
  place-items: normal;
  gap: normal;
  max-height: 1080px;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide {
  display: grid;
  grid-template: "... ......... ..." 1fr "... gaCaption ..." auto "... gaCaption ..." auto "... ......... ..." 1fr / 1fr minmax(auto, 950px) 1fr;
  place-content: center;
  height: fit-content !important;
  max-height: inherit;
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide {
    grid-template: "... ......... ..." 1fr "... gaCaption ..." auto "... gaCaption ..." auto "... ......... ..." 0.5fr / 1fr minmax(auto, 600px) 1fr;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide {
    grid-template: "... ......... ..." 1fr "... gaCaption ..." auto "... gaCaption ..." auto "... ......... ..." 0.5fr / 1fr minmax(auto, 950px) 1fr;
  }
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption {
  grid-area: gaCaption;
  display: flex;
  flex-flow: column nowrap;
  place-content: center;
  place-items: flex-start;
  gap: 50px;
  position: relative;
  z-index: 1;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption > span {
  max-width: 75%;
  text-align: start;
  text-transform: uppercase;
  color: var(--unnamed-color-f8f8f8, #F8F8F8);
  font: italic normal 400 normal 4.0625rem/1.2 "area-normal", sans-serif;
  letter-spacing: 0px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption > span {
    font-size: 2.875rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption > span {
    font-size: 2.875rem;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption > span {
    font-size: 3.5rem;
  }
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption > span > strong {
  font-style: normal;
  font-weight: 700;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption > a {
  display: inline-flex;
  flex-flow: column nowrap;
  place-content: center;
  place-items: center;
  gap: normal;
  border-radius: 9px;
  padding: 0.2em 0.75em;
  text-align: center;
  box-shadow: 0px 3px 6px #0000004F;
  border: 1px solid #FFFFFF33;
  backdrop-filter: blur(16px);
  transition: all 0.3s ease 0s;
}
@media (pointer: coarse) {
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption > a {
    min-height: 50px;
  }
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > div.caption > a:hover {
  color: var(--unnamed-color-000000, #000000);
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > picture {
  grid-area: 1/1/5/4;
  position: relative;
  z-index: 0;
  width: 100%;
  height: fit-content;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > picture > img {
  height: 100%;
  object-fit: contain;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui {
  display: flex;
  flex-flow: column nowrap;
  place-content: center;
  place-items: center;
  gap: 14px;
  position: absolute;
  z-index: 100000;
  top: auto;
  right: 14.58333333%;
  bottom: auto;
  left: auto;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui > menu.swiper-navigation {
  display: contents;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui > menu.swiper-navigation > li {
  position: static;
  width: 100%;
  height: 50px;
  transition: padding 0.3s ease 0s;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui > menu.swiper-navigation > li.swiper-button-prev {
  order: 1;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui > menu.swiper-navigation > li.swiper-button-prev:hover {
  padding-bottom: 14px;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui > menu.swiper-navigation > li.swiper-button-next {
  order: 3;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui > menu.swiper-navigation > li.swiper-button-next:hover {
  padding-top: 14px;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui > menu.swiper-navigation > li::after {
  rotate: 90deg;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-ui > *.swiper-pagination {
  order: 2;
}
html > body main > section[data-carousel-id="welcome"] div.swiper-pagination {
  place-self: center;
  display: flex;
  flex-flow: column nowrap;
  place-content: center;
  place-items: center;
  gap: normal;
  position: static;
  z-index: auto;
  width: fit-content;
  height: fit-content;
  text-align: center;
  text-transform: uppercase;
  color: var(--unnamed-color-f8f8f8, #F8F8F8);
  font: italic normal 400 normal 50px/67px "area-normal", sans-serif;
  letter-spacing: 0px;
  background: transparent;
}
html > body main > section[data-carousel-id="welcome"] div.swiper-pagination > *.swiper-pagination-current {
  text-align: inherit;
  text-transform: inherit;
  color: inherit;
  font: normal normal 700 normal 50px/67px "area-normal", sans-serif;
  line-height: 0.5;
}
html > body main > section[data-carousel-id="welcome"] div.swiper-pagination > *.swiper-pagination-total {
  line-height: normal;
}
html > body main > section[data-carousel-id="welcome"] div.swiper-pagination > *.swiper-pagination-divider {
  margin: 14px auto;
  width: 80px;
  height: 3px;
  background: var(--unnamed-color-f8f8f8, #F8F8F8) none 0% 0% no-repeat padding-box;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide {
  grid-template: "... ......... ..." 1fr "... gaCaption ..." auto "... gaCaption ..." auto "... ......... ..." 240px / 1fr minmax(auto, 950px) 1fr;
  max-height: 100vh;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-caption {
  display: flex;
  flex-flow: column nowrap;
  place-content: flex-start;
  place-items: flex-start;
  gap: 9.46px;
  grid-area: gaCaption;
  z-index: 1;
  max-width: 468px;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-caption > h3 {
  text-transform: uppercase;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-caption > p {
  text-transform: uppercase;
  font: normal normal 400 normal 2.3125rem/1.18918919 "bebas-kai", sans-serif;
  letter-spacing: -0.7px;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-caption > a {
  display: inline-flex;
  flex-flow: column nowrap;
  place-content: center;
  place-items: center;
  gap: normal;
  border-radius: 9px;
  padding: 0.2em 0.75em;
  text-align: center;
  box-shadow: 0px 3px 6px #0000004F;
  border: 1px solid #FFFFFF33;
  backdrop-filter: blur(16px);
  transition: all 0.3s ease 0s;
  text-transform: uppercase;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
@media (pointer: coarse) {
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-caption > a {
    min-height: 50px;
  }
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-caption > a:hover {
  color: var(--unnamed-color-000000, #000000);
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-media {
  grid-area: 1/1/5/4;
  z-index: 0;
  width: 100%;
  height: 100%;
}
html > body main > section.home-automation.service.presentation {
  padding: 131px 0 157px;
  text-align: center;
}
html > body main > section.home-automation.service.presentation > * {
  margin: auto;
  width: 922px;
  max-width: 48.02083333%;
}
html > body main > section.home-automation.service.presentation > h2 {
  text-transform: uppercase;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 4.99px;
}
html > body main > section.home-automation.service.presentation > h2 > strong {
  text-transform: inherit;
  display: block;
  font: normal normal 400 normal 2.3125rem/1.18918919 "bebas-kai", sans-serif;
  letter-spacing: -0.7px;
}
html > body main > section.home-automation.service.presentation > p {
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body main > section[data-carousel-id="company-highlights"] {
  --swiper-navigation-color: #FFFFFF;
  --swiper-navigation-size: 13px;
  --swiper-navigation-sides-offset: 10px;
  display: grid;
  grid-template: ". gaNavPrev gaHeading gaNavNext ." 1fr ". gaNavPrev gaParagraph gaNavNext ." 1fr ". gaNavPrev gaPagination gaNavNext ." 72px / 1fr 40px 890px 40px 1fr;
  place-content: stretch;
  gap: 16px 75px;
  height: 375px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
  html > body main > section[data-carousel-id="company-highlights"] {
    height: auto;
  }
}
html > body main > section[data-carousel-id="company-highlights"]:nth-of-type(3) > *.swiper-wrapper > *.swiper-slide {
  place-items: end end;
  text-align: end;
}
html > body main > section[data-carousel-id="company-highlights"]:nth-of-type(6) > *.swiper-wrapper > *.swiper-slide {
  place-items: end start;
  text-align: start;
}
html > body main > section[data-carousel-id="company-highlights"]:nth-of-type(6) > *.swiper-pagination {
  place-content: flex-start;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper {
  grid-area: 1 / 1 / 4 / 6;
  place-self: center;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide {
  display: grid;
  grid-template: ". gaNavPrev gaHeading    gaNavNext ." 1fr ". gaNavPrev gaParagraph  gaNavNext ." auto ". gaNavPrev gaPagination gaNavNext ." 72px / 1fr 40px 890px 40px 1fr;
  place-content: stretch;
  gap: 16px 75px;
  height: inherit;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide > * {
  position: relative;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide > picture {
  grid-area: 1 / 1 / 4 / 6;
  place-self: center;
  z-index: 0;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide > h3 {
  grid-area: gaHeading;
  z-index: 1;
  font: normal normal 400 normal 2.3125rem/1.18918919 "bebas-kai", sans-serif;
  letter-spacing: -0.7px;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide > p {
  grid-area: gaParagraph;
  z-index: 1;
  max-width: 473px;
  text-align: inherit;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body main > section[data-carousel-id="company-highlights"] .swiper-button-next,
html > body main > section[data-carousel-id="company-highlights"] .swiper-button-prev {
  width: 40px;
  height: 40px;
  /* background: #434343 0% 0% no-repeat padding-box; */
  box-shadow: 0px 3px 6px #0000004F;
  border: 1px solid #FFFFFF33;
  border-radius: 13px;
  opacity: 1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-button-prev {
  grid-area: gaNavPrev;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-button-next {
  grid-area: gaNavNext;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-pagination {
  grid-area: gaPagination;
  place-self: start end;
  display: inline-flex;
  flex-flow: row nowrap;
  place-content: flex-end;
  place-items: stretch;
  gap: normal;
  position: static;
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-pagination *.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border: 1px solid #FFFFFF33;
  border-radius: 2px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html > body main > section[data-carousel-id="company-highlights"] > *.swiper-pagination *.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #FFFFFF 0% 0% no-repeat padding-box;
}
html > body main > section.layout-split {
  display: flex;
  flex-flow: column nowrap;
  place-content: center;
  place-items: center;
  gap: 52px;
  padding: 200px;
  background: #151717 0% 0% no-repeat padding-box;
}
html > body main > section.layout-split > div.layout-split {
  display: grid;
  place-content: center;
  place-items: center;
  gap: 20px;
}
html > body main > section.layout-split > div.layout-split:nth-of-type(odd) {
  grid-template: "gaHeading   gaPic" "gaParagraph gaPic" / auto auto;
  column-gap: 36px;
  text-align: end;
}
html > body main > section.layout-split > div.layout-split:nth-of-type(odd) > h3 {
  justify-self: end;
  width: 360px;
}
html > body main > section.layout-split > div.layout-split:nth-of-type(odd) > p {
  justify-self: end;
  width: 369px;
}
html > body main > section.layout-split > div.layout-split:nth-of-type(even) {
  grid-template: "gaPic gaHeading" "gaPic gaParagraph" / auto auto;
  column-gap: 29px;
  text-align: start;
}
html > body main > section.layout-split > div.layout-split:nth-of-type(even) > h3 {
  justify-self: start;
  width: 342px;
}
html > body main > section.layout-split > div.layout-split:nth-of-type(even) > p {
  justify-self: start;
  width: 372px;
}
html > body main > section.layout-split > div.layout-split > picture {
  grid-area: gaPic;
  width: 513px;
  height: 251px;
}
html > body main > section.layout-split > div.layout-split > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
html > body main > section.layout-split > div.layout-split > h3 {
  place-self: end center;
  height: fit-content;
  text-align: inherit;
  text-transform: uppercase;
  color: inherit;
  font: normal normal 400 normal 2rem/1.1875 "bebas-kai", sans-serif;
  letter-spacing: -0.61px;
}
html > body main > section.layout-split > div.layout-split > h3 > strong {
  font-weight: 800;
}
html > body main > section.layout-split > div.layout-split > p {
  place-self: start center;
  text-align: inherit;
  color: inherit;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body main > section.layout-split > div.layout-split > p > strong {
  font-weight: 800;
}
html > body main > section.suppliers {
  display: grid;
  grid-template: "gaHeading" auto "gaCarousel" auto / 1120px;
  place-content: center;
  place-items: normal;
  gap: 30.9px;
  height: 532px;
  background-color: transparent;
  background-image: url("/assets/images/piero-smart-home-remote-control.1920x532.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 0.3s ease 0s;
}
html > body main > section.suppliers > h2 {
  grid-area: gaHeading;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  color: var(--unnamed-color-ffffff, #FFFFFF);
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 4.99px;
}
html > body main > section.suppliers > *.swiper-holder {
  border-radius: 9px;
  padding: 0.2em 0.75em;
  text-align: center;
  box-shadow: 0px 3px 6px #0000004F;
  border: 1px solid #FFFFFF33;
  backdrop-filter: blur(16px);
}
html > body main > section.suppliers > *.swiper-holder > *.swiper {
  --swiper-navigation-color: #FFFFFF;
  --swiper-navigation-size: 13px;
  --swiper-navigation-sides-offset: 30px;
  grid-area: gaCarousel;
  width: 100%;
  max-width: 912px;
}
html > body main > section.suppliers > *.swiper-holder > *.swiper > *.swiper-wrapper {
  place-items: center;
}
html > body main > section.suppliers > *.swiper-holder > *.swiper > *.swiper-wrapper > *.swiper-slide {
  display: flex;
  flex-flow: row nowrap;
  place-content: center;
  place-items: center;
  gap: normal;
}
html > body main > section.suppliers > *.swiper-holder > *.swiper > *.swiper-wrapper > *.swiper-slide > picture {
  max-width: 142px;
  max-height: 85px;
  width: 100%;
}
html > body main > section.suppliers > *.swiper-holder *.swiper-button-prev {
  --swiper-navigation-color: #FFFFFF;
  --swiper-navigation-size: 13px;
  --swiper-navigation-sides-offset: 30px;
  grid-area: gaNavPrev;
}
html > body main > section.suppliers > *.swiper-holder *.swiper-button-next {
  --swiper-navigation-color: #FFFFFF;
  --swiper-navigation-size: 13px;
  --swiper-navigation-sides-offset: 30px;
  grid-area: gaNavNext;
}
html > body main > section.home-automation.service.highlights {
  padding-top: 186px;
  display: grid;
  grid-template-rows: auto repeat(11, 65px);
  grid-template-columns: repeat(7, 120px);
  grid-template-areas: "gaHeading      gaHeading      gaHeading      gaHeading        gaHeading        gaHeading        gaHeading" "gaUniversality gaUniversality gaUniversality gaUniversality   gaApplication    gaApplication    gaApplication" "gaUniversality gaUniversality gaUniversality gaUniversality   gaApplication    gaApplication    gaApplication" "gaUniversality gaUniversality gaUniversality gaUniversality   gaApplication    gaApplication    gaApplication" "gaUniversality gaUniversality gaUniversality gaUniversality   gaApplication    gaApplication    gaApplication" "gaSetup        gaSetup        gaSetup        gaSetup          gaApplication    gaApplication    gaApplication" "gaSetup        gaSetup        gaSetup        gaSetup          gaSupport        gaSupport        gaSupport" "gaSetup        gaSetup        gaSetup        gaSetup          gaSupport        gaSupport        gaSupport" "gaSetup        gaSetup        gaSetup        gaSetup          gaSupport        gaSupport        gaSupport" "gaVoiceControl gaVoiceControl gaVoiceControl gaSustainability gaSustainability gaSustainability gaSustainability" "gaVoiceControl gaVoiceControl gaVoiceControl gaSustainability gaSustainability gaSustainability gaSustainability" "gaVoiceControl gaVoiceControl gaVoiceControl gaSustainability gaSustainability gaSustainability gaSustainability";
  place-content: center;
  place-items: stretch;
  gap: 20px 20px;
  margin: 186px auto 102px;
}
html > body main > section.home-automation.service.highlights > h2 {
  grid-area: gaHeading;
  text-align: center;
  color: inherit;
  font: normal normal 400 normal 2rem/1.1875 "bebas-kai", sans-serif;
  letter-spacing: -0.61px;
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights > h2 {
    text-align: center;
  }
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights {
    margin: 100px auto;
  }
}
html > body main > section.home-automation.service.highlights > p {
  grid-area: gaPar;
  text-align: start;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights > p {
    text-align: center;
    padding: 5%;
  }
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights {
    display: block;
  }
}
html > body main > section.home-automation.service.highlights > div {
  display: flex;
  flex-flow: row nowrap;
  place-content: space-between;
  place-items: flex-end;
  padding: 26px 30px 26px 38px;
  background-blend-mode: multiply;
  display: grid;
  grid-template: "gaHeading" "gaParagraph";
  grid-template-rows: auto auto;
  place-content: end;
  transition: all 1s ease 0s;
  background-size: cover !important;
}
@media only screen and (max-width: 600px) {
  html > body main > section.home-automation.service.highlights > div {
    flex-direction: column;
  }
}
html > body main > section.home-automation.service.highlights > div:hover > p {
  opacity: 1;
  max-height: 100%;
  max-height: 200px;
}
html > body main > section.home-automation.service.highlights > div.universality {
  grid-area: gaUniversality;
  background: linear-gradient(180deg, #FFFFFF00 0%, #808080 100%) 0% 0% / contain no-repeat scroll padding-box border-box, transparent url("/assets/images/digital-door-lock-keypad-entry.533x306.jpg") 0% 0% / contain no-repeat scroll padding-box border-box;
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights > div.universality {
    background-size: cover;
    height: 250px;
    width: 90%;
    margin: 40px auto;
  }
}
html > body main > section.home-automation.service.highlights > div.application {
  grid-area: gaApplication;
  background: linear-gradient(180deg, #FFFFFF00 0%, #000000 100%) 0% 0% / contain no-repeat scroll padding-box border-box, transparent url("/assets/images/woman-using-smartphone-app.385x392.jpg") 0% 0% / contain no-repeat scroll padding-box border-box;
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights > div.application {
    background-size: cover;
    height: 250px;
    width: 90%;
    margin: 40px auto;
  }
}
html > body main > section.home-automation.service.highlights > div.setup {
  grid-area: gaSetup;
  flex-flow: column nowrap;
  place-items: start;
  background: linear-gradient(0deg, #FFFFFF00 0%, #000000 100%) 0% 0% / contain no-repeat scroll padding-box border-box, transparent url("/assets/images/smart-lighting-app-control-phone.533x345.jpg") 0% 0% / contain no-repeat scroll padding-box border-box;
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights > div.setup {
    background-size: cover;
    height: 250px;
    width: 90%;
    margin: 40px auto;
  }
}
html > body main > section.home-automation.service.highlights > div.setup > a {
  place-self: end;
}
html > body main > section.home-automation.service.highlights > div.support {
  grid-area: gaSupport;
  background: linear-gradient(180deg, #FFFFFF00 0%, #000000 100%) 0% 0% / contain no-repeat scroll padding-box border-box, transparent url("/assets/images/customer-service-representative-headset.386x259.jpg") 0% 0% / contain no-repeat scroll padding-box border-box;
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights > div.support {
    background-size: cover;
    height: 250px;
    width: 90%;
    margin: 40px auto;
  }
}
html > body main > section.home-automation.service.highlights > div.voice-command {
  grid-area: gaVoiceControl;
  background: linear-gradient(180deg, #FFFFFF00 0%, #000000 100%) 0% 0% / contain no-repeat scroll padding-box border-box, transparent url("/assets/images/smart-home-automated-window-blinds.395x259.jpg") 0% 0% / contain no-repeat scroll padding-box border-box;
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights > div.voice-command {
    background-size: cover;
    height: 250px;
    width: 90%;
    margin: 40px auto;
  }
}
html > body main > section.home-automation.service.highlights > div.sustainability {
  grid-area: gaSustainability;
  background: linear-gradient(180deg, #FFFFFF00 0%, #000000 100%) 0% 0% / contain no-repeat scroll padding-box border-box, transparent url("/assets/images/globe-on-moss-environment.525x258.jpg") 0% 0% / contain no-repeat scroll padding-box border-box;
}
@media only screen and (max-width: 1426px) {
  html > body main > section.home-automation.service.highlights > div.sustainability {
    background-size: cover;
    height: 250px;
    width: 90%;
    margin: 40px auto;
  }
}
html > body main > section.home-automation.service.highlights > div > h3 {
  grid-area: gaHeading;
  text-align: start;
  color: white;
  font: normal normal 400 normal 2rem/1.1875 "bebas-kai", sans-serif;
  letter-spacing: -0.61px;
}
html > body main > section.home-automation.service.highlights > div > p {
  grid-area: gaParagraph;
  max-height: 0;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
  opacity: 0;
  transition: all 0.3s ease 0s;
}
html > body main > section.home-automation.service.highlights > div > a {
  place-self: flex-end;
  float: right;
  display: inline-block;
  border-radius: 0px 15px;
  padding: 1rem 2.25rem;
  text-align: center;
  text-transform: uppercase;
  color: white;
  font: normal normal 400 normal 1.438rem/1.34782609 "area-normal", sans-serif;
  letter-spacing: 0px;
  background: red 0% 0% no-repeat padding-box;
}
html > body main > section.home-automation.service.cta {
  margin: 102px;
}
html > body main > section.home-automation.service.cta > a {
  display: block;
  margin: auto;
  width: fit-content;
  padding: 21px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 6.49px;
  box-shadow: 0px 3px 6px #0000004F;
  border: 1px solid #FFFFFF33;
  border-radius: 9px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html > body main > section.customers-testimonials {
  background: #647780 url("../assets/images/piero-smart-home-remote-control.1920x532.jpg") center / cover no-repeat scroll padding-box border-box;
  background-blend-mode: normal;
}
html > body > footer {
  padding-top: 154px;
  color: var(--unnamed-color-ffffff, #FFFFFF);
  background: var(--unnamed-color-151717, #151717) none 0% 0% / contain no-repeat scroll padding-box border-box;
  background-blend-mode: normal;
}
html > body > footer > section#contato {
  display: grid;
  grid-template: "gaHeading    gaForm" auto "gaParagraph  gaForm" auto "gaTelephones gaForm" auto "gaEmails     gaForm" auto / auto 300px;
  place-content: center;
  place-items: end;
  gap: 21px 55px;
  color: inherit;
}
html > body > footer > section#contato > form {
  grid-area: gaForm;
  display: flex;
  flex-flow: column nowrap;
  place-content: space-between;
  place-items: stretch;
  gap: 21px;
  width: 100%;
  color: inherit;
}
html > body > footer > section#contato > form textarea,
html > body > footer > section#contato > form input {
  padding-left: 15px;
}
html > body > footer > section#contato > form input {
  flex: 1 1 auto;
  border-bottom: solid var(--unnamed-color-ffffff, #FFFFFF) 0.44600001px;
  text-align: start;
  color: inherit;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body > footer > section#contato > form input::placeholder {
  text-align: inherit;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
html > body > footer > section#contato > form textarea {
  border: solid var(--unnamed-color-ffffff, #FFFFFF) 0.44600001px;
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: start;
  color: inherit;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body > footer > section#contato > form textarea::placeholder {
  text-align: inherit;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
html > body > footer > section#contato > form button[type="submit"] {
  place-self: flex-start;
  display: inline-flex;
  flex-flow: column nowrap;
  place-content: center;
  place-items: center;
  gap: normal;
  border-radius: 9px;
  padding: 0.2em 0.75em;
  text-align: center;
  box-shadow: 0px 3px 6px #0000004F;
  border: 1px solid #FFFFFF33;
  backdrop-filter: blur(16px);
  transition: all 0.3s ease 0s;
}
@media (pointer: coarse) {
  html > body > footer > section#contato > form button[type="submit"] {
    min-height: 50px;
  }
}
html > body > footer > section#contato > form button[type="submit"]:hover {
  color: var(--unnamed-color-000000, #000000);
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
}
html > body > footer > section#contato > nav {
  display: flex;
  flex-flow: column nowrap;
  place-content: flex-end;
  place-items: flex-end;
  gap: normal;
  text-align: end;
  color: inherit;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body > footer > section#contato > nav.telephones {
  grid-area: gaTelephones;
}
html > body > footer > section#contato > nav.emails {
  grid-area: gaEmails;
}
html > body > footer > section#contato > nav > a {
  font: inherit;
}
html > body > footer > section#contato > h2 {
  grid-area: gaHeading;
  text-align: end;
  text-transform: uppercase;
  color: inherit;
  font: normal normal 400 normal 2.3125rem/1.18918919 "bebas-kai", sans-serif;
  letter-spacing: -0.7px;
}
html > body > footer > section#contato > p {
  grid-area: gaParagraph;
  text-align: end;
  color: inherit;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body > footer > address {
  width: 100%;
  margin: 42px auto 62px;
  text-align: center;
}
html > body > footer > address > span {
  display: block;
  margin: auto;
  text-align: inherit;
  color: inherit;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
html > body > footer > address > a.cta.street-address.directions {
  display: inline-flex;
  flex-flow: column nowrap;
  place-content: center;
  place-items: center;
  gap: normal;
  border-radius: 9px;
  padding: 0.2em 0.75em;
  text-align: center;
  box-shadow: 0px 3px 6px #0000004F;
  border: 1px solid #FFFFFF33;
  backdrop-filter: blur(16px);
  transition: all 0.3s ease 0s;
  display: inline-block;
  margin: 1em auto;
  padding: 2px 14.6px;
  font: normal normal 400 normal 1rem/1.5625 "poppins", sans-serif;
  letter-spacing: 0px;
}
@media (pointer: coarse) {
  html > body > footer > address > a.cta.street-address.directions {
    min-height: 50px;
  }
}
html > body > footer > address > a.cta.street-address.directions:hover {
  color: var(--unnamed-color-000000, #000000);
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
}
html > body > footer > nav.social-networks {
  display: flex;
  flex-flow: row nowrap;
  place-content: center;
  place-items: center;
  gap: 49px;
}
html > body > footer > a.horo.author {
  display: block;
  margin: 2rem auto;
  width: fit-content;
}
html > body section.home-automation > div.home-automation.highlight {
  background-color: #f0f0f0;
  overflow: hidden;
  /* Crucial for hiding overflowing content */
  position: relative;
  /* Needed for absolute positioning of children */
  display: flex;
  /* Using flexbox for initial heading alignment */
  align-items: flex-end;
  /* Aligns content to the end of the flex container */
  justify-content: flex-end;
  /* Aligns content to the end horizontally */
  flex-direction: column;
  /* Stacks items vertically */
}
html > body section.home-automation > div.home-automation.highlight h3 {
  margin: 0;
  /* Remove default margin */
  padding: 10px;
  /* Add some padding */
  text-align: right;
  /* Ensure heading is aligned to the right */
  width: 100%;
  /* Make heading take full width for right alignment */
  transition: transform 0.3s ease-out;
  /* Animation for heading movement */
  z-index: 2;
  /* Ensure heading is above paragraph initially */
}
html > body section.home-automation > div.home-automation.highlight p {
  bottom: 0;
  /* Align to the bottom initially */
  left: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  /* Initially hidden */
  pointer-events: none;
  /* Prevent interaction when hidden */
  z-index: 1;
  /* Ensure paragraph is below heading initially */
}
html > body section.home-automation > div.home-automation.highlight:hover h3 {
  /* Or, if you want it to move precisely above the paragraph: */
  /* transform: translateY(-30px); /* Adjust '30px' based on paragraph height */
}
html > body section.home-automation > div.home-automation.highlight:hover p {
  opacity: 1;
  /* Make it visible */
  pointer-events: auto;
  /* Allow interaction when visible */
}
@media only screen and (min-width: 320px) and (max-width: 1023px) {
  html > body > footer > section#contato {
    grid-template: "gaHeading    " auto "gaParagraph  " auto "gaTelephones " auto "gaEmails     " auto "gaForm" auto / 70%;
    /* place-content: center; */
    /* place-items: end; */
    /* gap: 21px 55px; */
  }
  html > body > footer > section#contato > nav.emails {
    font-size: 0.8rem;
  }
  html > body main > section.home-automation.service.cta {
    margin: 10%;
  }
  html > body main > section.home-automation.service.cta > a {
    line-height: 2;
  }
  html > body main > section.home-automation.service.highlights > div > p {
    font-size: 0.8rem;
  }
  html > body main > section.home-automation.service.highlights > div > h3 {
    font-size: 1.4rem;
  }
  html > body main > section.layout-split > div.layout-split:nth-of-type(odd),
  html > body main > section.layout-split > div.layout-split:nth-of-type(even) {
    grid-template: "gaHeading" "gaParagraph" "gaPic" / 80%;
    /* max-width: 80%; */
  }
  html > body main > section.layout-split {
    padding: 50px 16px;
  }
  html > body main > section.layout-split > div.layout-split > picture {
    width: auto;
    height: auto;
  }
  html > body main > section.layout-split > div.layout-split:nth-of-type(odd) > p,
  html > body main > section.layout-split > div.layout-split:nth-of-type(even) > p {
    font-size: 0.8rem;
    width: auto;
  }
  html > body main > section.home-automation.service.presentation > * {
    max-width: 80%;
  }
  html > body main > section.home-automation.service.presentation > p {
    line-height: 1.7;
  }
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-media video,
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-media picture > img,
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-media > picture {
    object-position: center;
    object-fit: cover;
    height: 100%;
  }
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide {
    grid-template: "... ......... ..." 100px "... gaCaption ..." auto "... gaCaption ..." auto "... ......... ..." 100px / 1fr 80% 1fr;
  }
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-caption > p {
    font-size: 1.8rem;
  }
  section.home-automation.service.presentation {
    padding: 34px 16px;
  }
  html > body main > section[data-carousel-id="welcome"] > div.swiper-wrapper > *.swiper-slide > *.slide-caption {
    max-width: none;
  }
  html > body main > section.home-automation.service.presentation {
    padding: 54px 16px;
  }
  html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide {
    grid-template: ". . gaHeading    . ." 1fr ". . gaParagraph  . ." auto ". . gaPagination . ." 72px ". . gaNavPrev . . " ". . gaNavNext . . " / 1fr 16px auto 16px 1fr;
    gap: 8px;
  }
  html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide > picture {
    height: 100%;
  }
  html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide > picture > img {
    height: 100%;
    object-fit: cover;
    offset-position: center;
  }
  html > body main > section[data-carousel-id="company-highlights"] {
    grid-template: ". . gaHeading    . ." 1fr ". . gaParagraph  . ." auto ". . gaPagination . ." 72px ". . gaNavs . . " auto / 1fr 16px auto 16px 1fr;
    gap: 8px;
  }
  html > body main > section.home-automation.service.highlights {
    padding-top: 0;
    margin-bottom: 0;
  }
  html > body main > section.suppliers {
    display: grid;
    grid-template: "gaHeading" auto "gaCarousel" auto / 80%;
    place-content: center;
    place-items: normal;
    gap: 30.9px;
    height: 532px;
    background: transparent url("/assets/images/piero-smart-home-remote-control.1920x532.jpg");
  }
}
html > body > header > nav {
  place-content: center;
  gap: 3em;
  padding: 0 208px 0 128px;
}
html > body > header {
  display: grid;
  grid-template: "gaLogo gaMainNav gaContact" auto / auto auto auto;
  place-content: center;
  text-align: inherit;
  color: inherit;
  font: normal normal 400 normal 1rem / 1.5625 "Poppins", sans-serif;
  letter-spacing: 0px;
}
html > body > header > nav > a {
  text-transform: uppercase;
}
html > body main > section[data-carousel-id="welcome"] > div.swiper-pagination {
  grid-area: gaPagination;
  place-self: start end;
  display: inline-flex;
  flex-flow: row nowrap;
  place-content: center;
  place-items: stretch;
  gap: normal;
  position: absolute;
  z-index: 10;
  place-self: center;
  width: 100%;
}
html > body main > section[data-carousel-id="welcome"] > *.swiper-pagination *.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border: 1px solid #FFFFFF33;
  border-radius: 2px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html > body main > section[data-carousel-id="welcome"] > *.swiper-pagination *.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #FFFFFF 0% 0% no-repeat padding-box;
}
html > body main > section[data-carousel-id="welcome"] video.slide-media {
  object-fit: cover;
  width: 100%;
}
@media only screen and (max-width: 629px) {
  html > body main > section[data-carousel-id="company-highlights"] > *.swiper-wrapper > *.swiper-slide {
    grid-template: ". . gaHeading    . ." 1fr ". . gaParagraph  . ." auto ". . gaPagination . ." 72px ". . gaNavPrev . . " ". . gaNavNext . . " / 1fr 50px auto 50px 1fr;
  }
}
*:has( > *#page-sticky-slope-right.sticky-slope) {
  position: relative;
}
*#page-sticky-slope-right.sticky-slope {
  display: flex;
  flex-flow: column nowrap;
  align-content: normal;
  justify-content: flex-end;
  place-items: normal legacy;
  gap: normal;
  position: absolute;
  z-index: auto;
  overflow: visible;
  width: fit-content;
  height: 100%;
  pointer-events: none;
  transition: all 0.3s ease-out 0s;
}
*#page-sticky-slope-right.sticky-slope.right {
  top: 0;
  right: 16px;
  bottom: 0;
  left: auto;
}
*#page-sticky-slope-right.sticky-slope.left {
  top: 0;
  right: auto;
  bottom: 0;
  left: 16px;
}
*#page-sticky-slope-right.sticky-slope > *.sticky-cart {
  position: sticky;
  z-index: 101;
  top: auto;
  right: auto;
  bottom: 1rem;
  left: auto;
  margin-top: 0;
  margin-bottom: 16px;
  overflow: visible;
  width: fit-content;
  height: fit-content;
  pointer-events: auto;
  transition: all 0.3s ease-out 0s;
}
*#page-sticky-cart-right > a {
  display: flex;
  flex-flow: row nowrap;
  place-content: center;
  place-items: center;
  gap: normal;
  aspect-ratio: 1/1;
  border-radius: 50%;
  padding: 10px;
  background: #25D366 none 0% 0% / contain no-repeat scroll padding-box border-box;
  box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
  *#page-sticky-cart-right > a {
    width: 50px;
    height: 50px;
    padding: 10px;
  }
}
@media only screen and (min-width: 480px) {
  *#page-sticky-cart-right > a {
    width: 64px;
    height: 64px;
    padding: 12px;
  }
}
*#page-sticky-cart-right > a > img,
*#page-sticky-cart-right > a > svg {
  width: 100%;
  height: auto;
  color: var(--secondary-color);
}
*#page-sticky-cart-right > a > img > path,
*#page-sticky-cart-right > a > svg > path {
  fill: var(--secondary-color);
}