/* [ ICON ] ========================================================================== */
.logo {
  width: 100%;
  max-width: 11.75rem;
  height: auto;
}

.i {
  --size: var(--size-md);
  --padding: 0;
  --cell: 0;
  --row: 0;

  width: var(--size);
  padding: var(--padding);
  aspect-ratio: 1/1;
  box-sizing: content-box;

  display: inline-block;
  flex-shrink: 0;

  border-radius: 50%;
  line-height: 0;
  position: relative;
  z-index: 1;
}

.i::before {
  content: "";

  position: absolute;
  top: var(--padding);
  left: var(--padding);

  display: inline-block;

  width: var(--size);
  height: var(--size);

  background-image: url(../assets/sprite.svg);
  background-repeat: no-repeat;
  background-size: calc(var(--size) * 9);
  background-position: calc(var(--size) * var(--cell) * -1)
    calc(var(--size) * var(--row) * -1);
  background-origin: content-box;
  background-clip: content-box;
}

.i--sm {
  --size: var(--size-sm);
}

.i--md {
  --size: var(--size-md);
}

.i--lg {
  --size: var(--size-lg);
}

.i--padding {
  --padding: calc(var(--size) * 0.5);
}
.i-radar {
  --cell: 1;
}

.i-arrow-right {
  --cell: 2;
}

.i-arrow-bottom {
  --cell: 2;
  transform: rotate(90deg);
}

.i-arrow-left {
  --cell: 2;
  transform: rotate(180deg);
}

.i-arrow-top {
  --cell: 2;
  transform: rotate(270deg);
}

.i-bulls-eye {
  --cell: 3;
}

.i-laptop-code {
  --cell: 4;
}

.i-medal {
  --cell: 5;
}

.i-location {
  --cell: 6;
}

.i-car-off {
  --cell: 7;
}

.i-alert {
  --cell: 8;
}

.i-road-map {
  --cell: 0;
  --row: 1;
}

.i-sos {
  --cell: 1;
  --row: 1;
}

.i-gas-station {
  --cell: 2;
  --row: 1;
}

.i-quotation {
  --cell: 3;
  --row: 1;
}

.i-whatsapp {
  --cell: 4;
  --row: 1;
}

.i-facebook {
  --cell: 5;
  --row: 1;
}

.i-instagram {
  --cell: 6;
  --row: 1;
}

.i-youtube {
  --cell: 7;
  --row: 1;
}

.i-phone-route {
  --cell: 8;
  --row: 1;
}

.i-happy {
  --cell: 0;
  --row: 2;
}

.i-security {
  --cell: 1;
  --row: 2;
}

.i-protected-car {
  --cell: 2;
  --row: 2;
}

.i-mic {
  --cell: 3;
  --row: 2;
}

.i-cog-car {
  --cell: 4;
  --row: 2;
}

.i-info-car {
  --cell: 5;
  --row: 2;
}

.i-scroll-down {
  --cell: 6;
  --row: 2;
}

.i-favicon {
  --cell: 7;
  --row: 2;
}

.i-arrow-right-white {
  --cell: 8;
  --row: 2;
}

.i-arrow-bottom-white {
  --cell: 8;
  --row: 2;

  transform: rotate(90deg);
}

.i-hamburger {
  --cell: 0;
  --row: 3;
}

.i-optimization {
  --cell: 1;
  --row: 3;
}

.i-arrow-right-ternary {
  --cell: 2;
  --row: 3;
}

.i-arrow-left-ternary {
  --cell: 2;
  --row: 3;

  transform: rotate(180deg);
}

.i-connection {
  --cell: 3;
  --row: 3;
}

.i-connection {
  --cell: 3;
  --row: 3;
}
.i-statistics {
  --cell: 4;
  --row: 3;
}

.i-notification {
  --cell: 5;
  --row: 3;
}

.i-car-wrench {
  --cell: 6;
  --row: 3;
}

.i-control {
  --cell: 7;
  --row: 3;
}

.i-scheduled {
  --cell: 8;
  --row: 3;
}

.i-company-filled {
  --cell: 0;
  --row: 4;
}

.i-support {
  --cell: 1;
  --row: 4;
}

.i-user {
  --cell: 2;
  --row: 4;
}

#header-toggle {
  display: none;
}

#header-toggle:checked + .header {
  height: auto;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--header-height);

  overflow: hidden;
  background-color: white;

  padding: 0 var(--manual-page-margin);
  z-index: 999;
}

.header__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.header__header {
  width: 100%;
  height: var(--header-height);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  height: 65%;
}

.header__hamburger {
  height: 75%;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;

  border: none;
  cursor: pointer;
  outline: none;
  padding: none;
}

.header ul {
  width: 100%;
  order: 2;

  display: flex;
  flex-direction: column;
}

.header li {
  width: 100%;
  list-style: none;
  display: flex;
}

.header__a {
  width: 100%;
  height: 100%;
  text-decoration: none;

  display: flex;
  justify-content: center;
  align-items: center;
  color: black;

  font-weight: 400;
  font-size: var(--font-size-md);

  padding: var(--padding-sm) 0;
}

/* [ SECTION ] ========================================================================== */

article {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

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

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;

  padding: 0 var(--manual-page-margin);

  margin-bottom: 4rem;
}

.section--padding {
  padding: 4rem var(--manual-page-margin);
}

.section--full-width {
  padding-left: 0;
  padding-right: 0;
}

.section__header {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--padding-md);
}

.section__icon {
  --size: var(--size-lg);
  grid-area: icon;
}

.section__text {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--padding-sm);
}

.section__title--icon {
  width: 100%;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "icon subtitle" "icon title";
  align-items: center;
  justify-items: start;

  column-gap: var(--padding-md);
  row-gap: 0;
}

.section__title--icon .section__title,
.section__title--icon .section__subtitle {
  text-align: left;
}

.section__subtitle {
  font-size: var(--font-size-xs);
  color: var(--ternary);

  grid-area: subtitle;
}

.section__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-lg);
  color: var(--quaternary);
  text-align: center;

  grid-area: title;
}

.section__description {
  width: 100%;
  max-width: 900px;

  font-size: var(--font-size-md);
  color: var(--default);
  text-align: center;
}

.section__content {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;

  gap: 2rem;
}

.section__subcontent {
  width: 100%;
  padding: 0 var(--page-margin);
}

.section__image {
  width: 70%;
  align-self: center;
  justify-self: center;
}

.section--full-width .section__header,
.section--full-width .section__content {
  padding: 0 var(--manual-page-margin);
}

/* [ SLIDER ] ========================================================================== */
.infinite-slider {
  width: auto;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;

  animation: linear infinite 40s infinite-slider;
}

@keyframes infinite-slider {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-66.666%);
  }
}

.infinite-slider__collection {
  min-width: 100vw;
  width: auto;

  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  padding: 0 2rem;

  transition: none;
}
.slider {
  min-width: 100%;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 2rem;

  transition: transform 0.3s ease-in-out;
}

/* [ MODAL ] ========================================================================== */

.modal {
  display: none;

  width: 100%;
  height: 100vh;

  position: fixed;
  top: 0;
  left: 0;

  place-content: center;

  backdrop-filter: blur(2px);
  overflow: hidden;
  z-index: 1000;

  opacity: 0;
}

.modal.active {
  display: grid;
  animation: show 0.5s ease-in-out forwards;
}

@keyframes show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
/* [ CARD ] ========================================================================== */

.card {
  width: 100%;

  max-width: var(--max-width-item);
  flex-shrink: 1;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--padding-sm);

  transition: transform 0.3s ease-in-out;
  background-color: white;
}

.card--service {
  flex-shrink: 0;
  max-width: 13rem;

  gap: var(--padding-md);
  border: solid 1px var(--default-2);
  border-radius: var(--padding-lg);
  padding: var(--padding-lg);
}

.card__image {
  width: 100%;
  height: var(--size-lg);

  object-fit: contain;
}

.card__title {
  font-size: var(--font-size-md);
  color: var(--ternary);
}

.card__description {
  font-size: var(--font-size-sm);
  color: var(--default);
}

.card__title,
.card__description {
  text-align: center;
}

.card--service.active {
  transform: scale(1.05);
  box-shadow: 0px 0px 1rem 0.2rem var(--default-2);
}

.card--align-left {
  align-items: flex-start;
}

.card--align-left .card__image {
  object-position: left bottom;
}

.card--align-left .card__title,
.card--align-left .card__description {
  text-align: left;
}
/* [ BANNER ] ========================================================================== */

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

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--padding-lg);

  padding: var(--padding-lg);
  border-radius: var(--padding-sm);
  color: var(--senary);

  background-image: url("./../assets/banner-map.svg");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--quaternary);
}

.banner__text {
  flex: 1;
  text-align: center;
}

.banner__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-lg);
}

.banner__description {
  font-size: var(--font-size-md);
  font-weight: 500;
}

/* [ BLOCKQUOTE ] ========================================================================== */

.blockquote {
  width: 26rem;
  max-width: 100%;

  display: grid;
  grid-template-columns: var(--size-md) 1fr;
  grid-template-areas: "content content" "avatar footer";
  grid-auto-rows: auto;
  gap: 1rem;

  flex-shrink: 0;

  border: 1px solid var(--primary);
  padding: 1rem;
  border-radius: 0.5rem;
}

.blockquote__content {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm);
  grid-area: content;
}

.blockquote__icon {
  --width: var(--size-sm);
}

.blockquote__avatar {
  width: 100%;
  aspect-ratio: 1/1;
  grid-area: avatar;
}

.blockquote__footer {
  grid-area: footer;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.blockquote__name {
  font-size: var(--font-size-md);
  font-weight: bold;
  color: var(--quaternary);
}

/* [ BANNER ] ========================================================================== */
.feature {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--padding-sm);
  min-height: 4em;
}

.feature__icon {
  --size: var(--size-md);
}

.feature__title {
  font-size: var(--font-size-md);
  color: var(--quinary);

  display: flex;
  align-items: center;
  gap: var(--padding-sm);
}

.feature__description {
  font-size: var(--font-size-sm);
  color: var(--septenary);
}

/* [ BANNER ] ========================================================================== */
.medal {
  display: flex;
  flex-direction: column;
  gap: var(--padding-xs);
  align-items: center;
}

.medal__icon {
  --size: var(--size-sm);
  --padding: var(--padding-sm);
  background-color: var(--primary);
}

.medal__name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--quinary);
}

.layout {
  width: 100%;
  display: grid;
  justify-items: center;
  align-items: stretch;
  justify-items: stretch;

  gap: var(--padding-lg);
}

.layout--x2 {
  grid-template-columns: repeat(
    auto-fit,
    minmax(max(var(--max-width-item), 34%), 1fr)
  );
}

.layout--x3 {
  grid-template-columns: repeat(
    auto-fit,
    minmax(max(var(--max-width-item), 26%), 1fr)
  );
}

/* [ MOSAIC ] ========================================================================== */

.mosaic {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(150px, 21%), 1fr));
  grid-auto-rows: max(5rem, max-content);
  grid-auto-flow: dense;
  gap: var(--padding-md);
  align-items: stretch;
}

.mosaic__icon {
  --size: var(--size-sm);

  align-self: flex-start;
}

.mosaic__title {
  color: white;
  font-family: var(--font-family-title);
  text-align: left;
  align-self: flex-start;
}

.mosaic__description {
  color: white;
  font-weight: 400;
  text-align: left;
  align-self: flex-start;
}

.mosaic__item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--padding-md);

  color: white;
  font-weight: 700;
  text-align: left;
  padding: var(--padding-lg);
  border-radius: var(--padding-md);
  background-color: var(--ternary);
}
.mosaic__item--span-2-row {
  grid-row: span 2;
}

.mosaic__item--span-2-col {
  grid-column: span 2;
}

/* [ STEPS ] ========================================================================== */

.steps {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  row-gap: var(--padding-md);
  column-gap: 0;
}

.steps__icon,
.steps__arrow {
  --size: var(--size-md);
  --padding: var(--padding-sm);
}

.steps--white .card {
  background-color: transparent;
}

.steps--white .steps__icon {
  background-color: white;
}

.steps--white .steps__arrow {
  background-color: transparent;
}

.steps--white .card__title,
.steps--white .card__description {
  color: white;
}

/* [ BUTTON ] ========================================================================== */
.button {
  flex-shrink: 0;
  border: none;
  outline: none;
  cursor: pointer;

  display: inline-block;

  padding: var(--padding-sm) var(--padding-lg);

  font-weight: 400;
  font-size: var(--font-size-sm);
  color: white;

  border-radius: 4rem;
  background-color: var(--primary);

  text-decoration: none;
}

/* [ INPUT RADIO ] ========================================================================== */
.input-radio {
  position: relative;

  width: var(--size-sm);
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: none;
  outline: none;
  appearance: none;

  background-color: transparent;
}

.input-radio::after {
  position: relative;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  content: "";
  display: block;

  width: var(--size-xs);
  aspect-ratio: 1/1;

  border-radius: 50%;
  background-color: var(--default);
}

.input-radio:checked::after {
  background-color: var(--primary);
}

/* [ FOOTER ] ========================================================================== */
.footer {
  width: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 4rem var(--manual-page-margin);
  gap: 1rem;
  background-color: white;
}

.footer__container:first-child {
  width: 100%;
  justify-content: flex-end;
  max-width: 250px;
}

.footer__container:last-child {
  width: 100%;
  max-width: 250px;
  justify-content: flex-start;
}

.footer__logo {
  width: 100%;
  max-width: 11.75rem;
  height: auto;
}
.footer__logo img {
  width: 100%;
  height: auto;
}
.footer__nav {
  min-width: 250px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--padding-md);
}

.footer__main {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--padding-sm);
}

.footer__text {
  font-size: var(--font-size-xs);
  color: var(--default);

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--padding-sm);

  text-align: center;
}
.footer__item {
  list-style: none;
}

.footer__item a {
  color: var(--quinary);
  font-size: var(--font-size-sm);
  font-weight: 300;
  text-decoration: none;
}

.footer__icon {
  --size: var(--size-sm);
}

/* [ ICON ] ========================================================================== */
.bg-image {
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

  aspect-ratio: 560/315;
  object-fit: contain;

  background-color: black;
  border-radius: var(--padding-md);
}

.form {
  width: 100%;
  max-width: 800px;

  display: flex;
  flex-direction: column;
  align-self: center;
  gap: var(--padding-lg);

  padding: var(--padding-lg);
  background-color: #d3d3d3;
  border-radius: var(--padding-md);
}

.form__label {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--padding-sm);
  color: var(--quaternary);
}

.form__input {
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  color: var(--quinary);
  border: none;
  border-radius: var(--padding-xs);
  padding: var(--padding-sm);
  outline: none;
  background-color: var(--senary);
}

.image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--padding-sm);
}

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

  display: flex;
  align-items: center;
  justify-content: center;
}
@container (inline-size > 600px) {
  .banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--padding-lg);
  }

  .banner__text {
    text-align: left;
  }
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none;
  }

  .header__content {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    align-items: stretch;
  }

  .header__header {
    justify-content: center;

    width: auto;
    aspect-ratio: 1/1;
  }

  .header__hamburger {
    display: none;
  }

  .header ul {
    max-width: 20rem;
    order: 0;
    flex-direction: row;
  }

  .blockquote {
    grid-template-areas: "avatar content" "avatar footer";
  }

  .feature__header {
    display: flex;
    flex-direction: row;
    gap: var(--padding-sm);
  }

  .feature__icon {
    --size: var(--font-size-lg);
  }
  .steps {
    flex-direction: row;
    align-items: flex-start;
  }

  .steps__arrow {
    transform: rotate(0deg);
  }
}