.bg-biege {
  background-color: #f9fafb;
}

.size-4 {
  width: 16px;
  height: 16px;
}
.size-5 {
  width: 20px;
  height: 20px;
}
.size-6 {
  width: 24px;
  height: 24px;
}

.shrink-none {
  flex-shrink: 0;
}

.section-intro-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rr-theme-primary);
}

.text-body-color {
  color: var(--rr-text-body);
}
.text-heading-primary {
  color: var(--rr-heading-primary);
}
.text-theme-primary {
  color: var(--rr-theme-primary);
}

.max-w-screen-sm {
  max-width: 700px;
}
.max-w-screen-md {
  max-width: 900px;
}
.text-balance {
  text-wrap: balance;
}

/* INDEX PAGE */

.dashboard {
  padding: 100px 0;
  gap: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dashboard h3 {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.dashboard p {
  font-size: 2rem;
}
.dashboard > div {
  width: 100%;
}
.dashboard .map {
  width: 500px;
  border: 4px solid black;
  border-radius: 8px;
}
.dashboard .info {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01), 0px 2px 4px rgba(3, 7, 18, 0.02),
    0px 4px 9px rgba(3, 7, 18, 0.02), 0px 6px 15px rgba(3, 7, 18, 0.03),
    0px 10px 24px rgba(3, 7, 18, 0.04);
}
.monitoring .wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.monitoring .info {
  width: 300px;
}
.monitoring .driving {
  left: 40px;
  top: -30px;
}
.monitoring .offline {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
}
.monitoring .stationary {
  right: -40px;
  bottom: -20px;
}

.map .view {
  left: 20px;
  top: -60px;
  width: 150px;
}
.map .place {
  right: 40px;
  top: 30%;
  width: 300px;
}

.monitoring .live {
  width: 300px;
  top: 50%;
  right: -30px;
}

@media screen and (max-width: 1000px) {
  .dashboard {
    flex-direction: column;
    padding: 60px 0;
  }
  .dashboard p {
    font-size: 1.8rem;
  }
  .dashboard.map {
    flex-direction: column-reverse;
  }
  .dashboard.monitoring {
    padding-block-end: 200px;
  }
}
@media screen and (max-width: 400px) {
  .dashboard .map {
    width: 100%;
  }
  .dashboard .info {
    width: 60%;
    right: 0;
  }
  .dashboard.map .view {
    width: 30%;
    left: 10px;
  }
}

.description {
  font-size: 2rem;
  max-width: 900px;
  color: var(--rr-text-body);
  margin: 0 auto 6rem;
  text-wrap: balance;
}

/* INTEGRATIONS START */

.integrations {
  text-align: center;
}

.integrations .integration-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.integrations .integrations__item {
  flex: 1 0 300px;
}
.integrations .integrations__item img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e3e3e3;
  object-fit: contain;
  padding: 4px;
  margin-block-end: 12px;
}

.integrations .integrations__item h4 {
  margin-block-end: 8px;
}

.integrations .integrations__item p {
  font-size: 1.6rem;
}
/* INTEGRATIONS END */

/* CAMERA START */

.camera {
  display: flex;
  align-items: center;
  gap: 32px;
}
.camera > div {
  flex: 1 0 auto;
}
.camera .camera__features {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  width: 50%;
}
.camera .camera__features > div {
  max-width: 270px;
}
.camera .camera__features .svgContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin: 0 auto 1.2rem;
}
.camera .camera__features .svgContainer h4 {
  margin-block-end: 0.8rem;
}
.camera .camera__images {
  width: 50%;
}
.camera .camera__images .back {
  position: relative;
  transform: translate(40%, 20%) !important;
  width: 300px;
}
.camera .camera__images .front {
  position: relative;
  transform: translate(-40%, -30%) !important;
  width: 350px;
}

@media screen and (max-width: 1400px) {
  .camera {
    flex-direction: column;
  }
  .camera .camera__features {
    width: 100%;
    justify-content: center;
  }
  .camera .camera__images {
    width: 100%;
  }
  .camera .camera__images .back,
  .camera .camera__images .front {
    transform: translate(0, 0);
  }
}
/* CAMERA END */

/* PRICING START */

.pricing__card {
  background: #fff;
  margin: 0 auto;
  max-width: 450px;
  padding: 24px 24px 0;
  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.02), 0px 5px 4px rgba(3, 7, 18, 0.03),
    0px 12px 9px rgba(3, 7, 18, 0.05), 0px 20px 15px rgba(3, 7, 18, 0.06),
    0px 32px 24px rgba(3, 7, 18, 0.08);
  border-radius: 12px;
}

.pricing__card h4 {
  font-size: 2rem;
}
.pricing__card svg {
  width: 20px;
  height: 20px;
  background: #3c65fa0c;
  border-radius: 50%;
  padding: 4px;
}
.pricing__card .pricing__features > div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 8px;
}
.pricing__card p {
  margin: 0;
}
.pricing__card .cta {
  margin: 0 -24px;
  padding: 24px;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}
.pricing__card .cta a {
  display: block;
  width: 100%;
  padding: 12px 0;
  background: var(--rr-theme-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
}

/* PRICING END */

/* CONTACT START */
.contact {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  height: 858px;
}
.contact .svgContainer {
  width: 20px;
  height: 20px;
  margin-block-end: 20px;
}
.contact .contact__info {
  position: sticky;
  top: 100px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 50%;
}
.contact .contact__info p {
  font-size: 2rem;
  font-weight: 600;
  color: var(--rr-heading-primary);
  margin-block-end: 8px;
}
.contact .contact__info span {
  display: inline-block;
  margin-block-end: 12px;
  font-size: 1.6rem;
}
.contact .contact__info a {
  display: block;
  font-weight: 600;
  color: var(--rr-theme-primary);
  font-size: 1.6rem;
}
.contact .contact__form {
  width: 50%;
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 40px 32px;
}

.contact .contact__form input[type="text"],
.contact .contact__form input[type="number"],
.contact .contact__form input[type="email"],
.contact .contact__form textarea {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 24px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #101828;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}
.contact .contact__form input[type="submit"] {
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  width: 100%;
  padding: 12px 18px;
  background-color: #1570ef;
  color: white;
  border: 1px solid #1570ef;
  border-radius: 8px;
  cursor: pointer;
}

@media screen and (max-width: 992px) {
  .contact {
    flex-direction: column;
    height: auto;
  }
  .contact .contact__info {
    width: 100%;
    position: static;
  }
  .contact .contact__form {
    width: 100%;
    padding: 20px 16px;
  }
}
/* CONTACT END */

/* STORE START */
.store {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
}
.store .store__item {
  width: 300px;
  background: #f9fafb;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 8px;
}
.store .store__item img {
  padding: 8px;
  width: 100%;
  height: 300px;
  object-fit: contain;
  border-radius: 8px;
}
.store .store__item:hover img:last-child {
  opacity: 1;
}
.store .store__item div {
  position: relative;
}
.store .store__item img:last-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  object-fit: contain;
  object-position: center;
}
.store .store__item p {
  margin: 12px 0;
  color: #101828;
}
.store .store__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  width: 100%;
  padding: 12px 0;
  background: var(--rr-theme-primary);
  color: #fff;
  font-weight: 600;
}
/* STORE END */

/* THANK YOU START */
.thankyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.thankyou p {
  margin-bottom: 8px;
}
.thankyou a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  width: max-content;
  padding: 12px 24px;
  background: var(--rr-theme-primary);
  color: #fff;
  font-weight: 600;
  font-size: 1.6rem;
}
/* THANK YOU END */