html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  padding: 0;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%238debf1' fill-opacity='0.14' fill-rule='evenodd'/%3E%3C/svg%3E");
}

html {
  font-size: 62.5%;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 50%;
  }
}

body {
  line-height: 1.2;
  font-family: poppins, sans-serif;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.nav {
  height: 18rem;
  overflow-y: hidden;
}
.nav__top {
  height: 9.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__top .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__top .container .logo {
  display: inline-block;
  height: 8rem;
}
@media screen and (max-width: 330px) {
  .nav__top .container .logo {
    max-width: 10rem;
    height: auto;
  }
}
.nav__top--link {
  display: flex;
  gap: 5rem;
  justify-content: space-around;
}
.nav__top--link .info {
  display: flex;
}
@media screen and (max-width: 820px) {
  .nav__top--link .info {
    display: none;
  }
}
.nav__top--link .info-mobile {
  display: none;
}
@media screen and (max-width: 820px) {
  .nav__top--link .info-mobile {
    display: flex;
  }
}
@media screen and (max-width: 530px) {
  .nav__top--link .info-mobile {
    display: none;
  }
}
.nav__top--link .info-mobile .nav-icons {
  height: 4rem;
  width: 4em;
  fill: #22ACE2;
  margin-right: 2rem;
}
.nav__top--link .info-mobile .h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #EA098D;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.nav__top--link .info-mobile .para1-nav {
  font-size: 1.6rem;
  color: #AEAEAE;
}
.nav__top--link .info .nav-icons {
  height: 4rem;
  width: 4em;
  fill: #22ACE2;
  margin-right: 2rem;
}
.nav__top--link .info .h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #EA098D;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.nav__top--link .info .para1-nav {
  font-size: 1.6rem;
  color: #AEAEAE;
}
.nav__top--login {
  padding: 1.3rem 2.7rem;
  background-color: #EA098D;
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 4rem;
  cursor: pointer;
}
@media screen and (max-width: 820px) {
  .nav__top--login {
    padding: 1rem 1.5rem;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 330px) {
  .nav__top--login {
    padding: 1rem 1rem;
    font-size: 1.2rem;
  }
}
.nav__top--login:hover {
  background-color: #F4EC27;
  color: #22ACE2;
  transition: all 1s;
}
.nav__top--login a {
  color: #ffffff;
}
.nav__top--login a:hover {
  color: #22ACE2;
}
.nav__bottom {
  background-color: #EA098D;
  height: 8.5rem;
}
.nav__bottom .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 635px) {
  .nav__bottom .container {
    display: none;
  }
}
.nav__bottom-links {
  font-size: 2.8rem;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0rem 2rem;
  display: inline-block;
  height: 100%;
}
@media screen and (max-width: 800px) {
  .nav__bottom-links {
    font-size: 2.2rem;
    padding: 0rem 1.5rem;
  }
}
.nav__bottom-links:hover {
  background-color: #F4EC27;
  color: #22ACE2;
  transition: all 1s;
}
.nav__bottom-links span {
  display: flex;
  align-items: center;
  height: 100%;
}
.nav__mobile {
  display: none;
}
@media screen and (max-width: 635px) {
  .nav__mobile {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
.nav__mobile--icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: 0rem 5rem;
  z-index: 7;
}
.nav__mobile--icons .mobile-icons {
  height: 4rem;
  width: 4rem;
  fill: #ffffff;
}
.nav__mobile--icons .mobile-icons:hover {
  fill: #F4EC27;
  scale: 120%;
  transition: all 0.5s linear;
}
.nav__mobile--icons .mobile-icons:first-child {
  margin-right: auto;
  cursor: pointer;
}
.nav__mobile--links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: #EA098D;
}
.nav__mobile--links-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2rem;
  width: 100%;
  color: #22ACE2;
}
.nav__mobile--links-link span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2rem;
}
.nav__mobile--links-link span:hover {
  background-color: #ffffff;
  color: #EA098D;
  height: 100%;
  width: 100%;
  transition: all 0.7s linear;
}

.hero {
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-gap: 1.6rem;
  padding-top: 8.4rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 700px) {
  .hero .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
  }
}
.hero__text--heading {
  font-size: 6rem;
  font-weight: 900;
  color: #22ACE2;
}
@media screen and (max-width: 950px) {
  .hero__text--heading {
    font-size: 5rem;
  }
}
@media screen and (max-width: 700px) {
  .hero__text--heading {
    font-size: 4.2rem;
  }
}
.hero__text--heading span {
  display: block;
  height: 1.5rem;
  width: 16rem;
  background-color: #F4EC27;
  margin-top: 2rem;
}
.hero__text--para {
  margin-top: 4.8rem;
  font-size: 2.4rem;
  font-weight: 500;
}
.hero__text--btn {
  background-color: #EA098D;
  border: none;
  padding: 1rem 2.9rem;
  font-size: 2.8rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 8rem;
  cursor: pointer;
  margin-top: 6rem;
}
.hero__text--btn:hover {
  background-color: #F4EC27;
  color: #22ACE2;
  transition: all 1s;
}
.hero__text--btn a {
  color: #ffffff;
}
.hero__text--btn a:hover {
  color: #EA098D;
}
.hero__image--img {
  margin-top: -6rem;
  width: 100%;
}
@media screen and (max-width: 790px) {
  .hero__image--img {
    margin-top: 6rem;
  }
}
@media screen and (max-width: 700px) {
  .hero__image--img {
    margin-top: -6rem;
  }
}

.top-prod {
  background-color: #22ACE2;
  margin-top: 8rem;
  padding: 10rem 0rem;
}
.top-prod__h2 {
  color: #ffffff;
}
.top-prod__h2 span {
  background-color: #F4EC27;
}
.top-prod__products {
  list-style-type: none;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
  margin: 0.25rem;
}
.top-prod__products--product {
  align-self: center;
  justify-self: center;
}

.why {
  padding: 8rem 0rem;
}
.why .container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
@media screen and (max-width: 700px) {
  .why .container {
    grid-template-rows: 6rem, 1fr, 1fr;
  }
}
.why__h2 {
  text-align: center;
  color: rgba(10, 10, 10, 0.937254902);
  grid-column: 1/13;
}
@media screen and (max-width: 700px) {
  .why__h2 {
    grid-row: 1/2;
  }
}
.why__text {
  grid-column: 1/7;
  font-size: 2rem;
  font-weight: 500;
  text-align: justify;
}
@media screen and (max-width: 700px) {
  .why__text {
    grid-column: 1/13;
    grid-row: 3/4;
  }
}
.why__text::first-letter {
  font-size: 4.8rem;
  color: #EA098D;
  font-weight: 700;
}
.why__text span {
  display: block;
  height: 1.2rem;
  width: 16rem;
  background-color: #EA098D;
  margin-top: 5rem;
  margin-left: 2rem;
}
.why__image {
  grid-column: 8/13;
  margin-top: -2rem;
}
@media screen and (max-width: 700px) {
  .why__image {
    grid-column: 1/13;
    grid-row: 2/3;
  }
}
.why__image--img {
  width: 100%;
}

.cat {
  background-color: #22ACE2;
  padding: 8rem 0rem;
}
.cat__h2 {
  text-align: center;
  width: 60%;
  margin: 0 auto;
  color: #ffffff;
}
@media screen and (max-width: 950px) {
  .cat__h2 {
    font-size: 1.6rem;
    width: 95%;
    padding-left: 0;
  }
}
.cat__icons {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  justify-items: center;
}
@media screen and (max-width: 600px) {
  .cat__icons {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }
}
.cat__icons .cat-icons {
  fill: #F4EC27;
  height: 10rem;
  width: 10rem;
  margin: 2rem;
}
@media screen and (max-width: 600px) {
  .cat__icons .cat-icons {
    height: 7rem;
    width: 7rem;
  }
}
.cat__icons .cat-icons:hover {
  cursor: pointer;
  fill: #EA098D;
  scale: 120%;
  transition: all 1s;
}

.review {
  padding: 8rem 0rem;
}
.review .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.review__carousel {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.review__carousel--slider {
  display: flex;
  height: 100%;
  width: 500%;
  flex-shrink: 0;
  transition: all 2s;
}
.review__carousel--slider section {
  flex-basis: 20%;
  width: 20%;
  flex-shrink: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.review__h2 {
  color: #22ACE2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.review__image {
  width: 15.4rem;
  height: 15.4rem;
  border-radius: 50%;
  border: 0.5rem solid #EA098D;
  background-color: #ffffff;
}
.review__msg {
  margin-top: 3rem;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
  width: 80%;
}
@media screen and (max-width: 600px) {
  .review__msg {
    width: 100%;
  }
}
@media screen and (max-width: 500px) {
  .review__msg {
    text-align: justify;
  }
}
.review__name {
  font-size: 2.8rem;
  font-weight: 700;
  color: #EA098D;
  font-style: italic;
  text-align: center;
  margin-top: 3rem;
}
.review__name--title {
  font-size: 2.2rem;
  color: #AEAEAE;
  font-weight: 300;
  font-style: italic;
  text-align: center;
}
.review__control {
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
  width: 100%;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 700px) {
  .review__control {
    transform: translateY(-180%);
  }
}
.review__control--icon {
  fill: rgba(244, 237, 39, 0.3960784314);
  height: 7rem;
  width: 7rem;
  margin: 0 2rem;
  cursor: pointer;
}
.review__control--icon:hover {
  fill: rgba(234, 9, 140, 0.5215686275);
  scale: 105%;
  transition: all 0.9s;
}

.map {
  width: 100%;
  min-height: 56.6rem;
}

.footer {
  padding-top: 8rem;
  background-color: #2E2E2E;
  margin-bottom: 0;
}
.footer .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(33rem, 1fr));
  justify-items: center;
  align-items: center;
}
.footer .container > * {
  margin-bottom: 5rem;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__contact--logo {
  height: 10rem;
}
.footer__contact--para {
  font-size: 2.4rem;
  font-weight: 500;
  color: #ffffff;
  margin: 2.4rem 0;
}
.footer__contact--icons {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__contact--icons .list-item {
  margin: 0 1rem;
}
.footer__contact--icons .cat-icons {
  fill: #ffffff;
  height: 4.2rem;
  width: 4.2rem;
}
.footer__contact--icons .cat-icons:hover {
  fill: #EA098D;
  scale: 110%;
}
.footer__services--head {
  font-size: 4.4rem;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 2rem;
}
.footer__services--links {
  list-style-type: none;
  margin-right: 2rem;
}
.footer__services--links .link {
  color: #ffffff;
  font-weight: 100;
  font-size: 1.8rem;
  text-decoration: none;
  margin-bottom: 1rem;
  margin-left: 2rem;
}
.footer__services--links .link:hover {
  color: #EA098D;
  text-decoration: underline;
  transition: all 0.9s;
}
.footer__services--links .link:hover {
  color: #EA098D;
  scale: 110%;
  transition: all 0.7s;
}
.footer__product--head {
  font-size: 4.4rem;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 2rem;
}
.footer__product--links {
  list-style-type: none;
  margin-right: 2rem;
}
.footer__product--links .link {
  color: #ffffff;
  font-weight: 100;
  font-size: 1.8rem;
  text-decoration: none;
  margin-bottom: 1rem;
  margin-left: 2rem;
}
.footer__product--links .link:hover {
  color: #EA098D;
  text-decoration: underline;
  transition: all 0.9s;
}
.footer__msg {
  padding-bottom: 4rem;
}
.footer__msg--head {
  font-size: 4.4rem;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 2rem;
}
.footer__msg input {
  display: block;
  background-color: #AEAEAE;
  border: none;
  width: 70%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 0.7rem;
}
.footer__msg input:hover {
  transition: all 1s;
  background-color: rgba(234, 9, 140, 0.5215686275);
  width: 100%;
}
.footer__msg input:focus {
  transition: all 0.6s;
  border-bottom: 0.5rem solid #22ACE2;
  background-color: rgba(234, 9, 140, 0.5215686275);
  width: 100%;
  outline: none;
}
.footer__msg input[type=textarea] {
  height: 9rem;
  resize: none;
  padding: 1rem;
  width: 100%;
}
.footer__msg input[type=button] {
  height: 4.2rem;
  width: 10rem;
  border-radius: 5rem;
  font-size: 2.2rem;
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 2rem;
  text-transform: uppercase;
}
.footer__copy {
  width: 100%;
  background-color: rgba(10, 10, 10, 0.937254902);
  text-align: center;
  padding: 0 2rem;
}
.footer__copy .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__copy .copy-text {
  text-align: center;
  margin: 0;
  padding: 2rem;
  font-size: 3.2rem;
  font-weight: 300;
  color: #ffffff;
}

.body-products {
  max-width: 136.6rem;
  margin: 0rem auto;
  padding: 2rem;
}
.body-products .h2 {
  margin-top: 8rem;
  font-size: 3.2rem;
  font-weight: 700;
  text-transform: none;
}
.body-products .h2 span {
  height: 0.5rem;
}

.products {
  list-style-type: none;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(33rem, 1fr));
  gap: 1.4rem;
}
.products:last-child {
  margin-bottom: 12rem;
}
.products__product {
  align-self: center;
  justify-self: center;
}
.products__product--image {
  max-width: 33rem;
}
.products__product--image:hover {
  scale: 105%;
  transition: all 0.7s;
}
.products__product--heading {
  font-size: 2.8rem;
  font-weight: 700;
  color: #EA098D;
  text-transform: capitalize;
  margin: 1rem 0;
}
.products__product--btn {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: capitalize;
  padding: 0.8rem;
  border: none;
  background-color: #22ACE2;
  border-radius: 0.7rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.products__product--btn:hover {
  background-color: #F4EC27;
  color: #EA098D;
  transition: all 0.6s;
}

.body-services {
  max-width: 136.6rem;
  margin: 0rem auto;
  padding: 2rem;
}
.body-services .h2 {
  margin-top: 8rem;
  font-size: 3.2rem;
  font-weight: 700;
  text-transform: none;
}
.body-services .h2 span {
  height: 0.5rem;
}

.services {
  list-style-type: none;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(33rem, 1fr));
  gap: 1.4rem;
}
.services:last-child {
  margin-bottom: 12rem;
}
.services__service {
  align-self: center;
  justify-self: center;
}
.services__service--image {
  max-width: 33rem;
}
.services__service--image:hover {
  scale: 105%;
  transition: all 0.7s;
}
.services__service--heading {
  font-size: 2.8rem;
  font-weight: 700;
  color: #EA098D;
  text-transform: capitalize;
  margin: 1rem 0;
}
.services__service--btn {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: capitalize;
  padding: 0.8rem;
  border: none;
  background-color: #22ACE2;
  border-radius: 0.7rem;
  margin-bottom: 1rem;
  cursor: pointer;
}
.services__service--btn:hover {
  background-color: #F4EC27;
  color: #EA098D;
  transition: all 0.6s;
}

.container {
  max-width: 136.6rem;
  margin: 0 auto;
}
@media (max-width: 136.6rem) {
  .container {
    padding: 0 4rem;
    margin: 0 auto;
  }
}

.link {
  text-decoration: none;
  display: inline-block;
}

.product-heading, .service-heading {
  font-size: 2.8rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: capitalize;
  margin: 1rem 0;
}

.product-btn, .service-btn {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: capitalize;
  padding: 0.8rem;
  border: none;
  background-color: #EA098D;
  border-radius: 0.7rem;
  margin-bottom: 1rem;
}

.h2 {
  font-size: 4.5rem;
  font-weight: 700;
  text-transform: uppercase;
  padding-left: 3rem;
  margin-bottom: 5rem;
}
@media screen and (max-width: 700px) {
  .h2 {
    font-size: 4.2rem;
    padding-left: 0rem;
  }
}
.h2 span {
  display: block;
  height: 1.2rem;
  width: 16rem;
  background-color: #F4EC27;
  margin-top: 0.5rem;
}

.quotation {
  border-color: #EA098D;
  padding: 1.3rem 2.7rem;
  background-color: #EA098D;
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 4rem;
  cursor: pointer;
  position: fixed;
  bottom: 2rem;
  right: 3rem;
  z-index: 10000;
}

.quote-gen {
  background-color: rgba(24, 23, 23, 0.5058823529);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  z-index: 77;
}
.quote-gen__container {
  padding: 2rem;
  background-color: #22ACE2;
  border-radius: 1rem;
  max-width: 80rem;
}
@media screen and (max-width: 300px) {
  .quote-gen__container {
    width: 95% vw;
  }
}
.quote-gen__close {
  width: 6rem;
  height: 6rem;
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-gen__close--icon {
  fill: #F4EC27;
  height: 4rem;
  width: 4rem;
}
.quote-gen__close--icon:hover {
  fill: #EA098D;
  cursor: pointer;
  transition: all 0.7s linear;
}
.quote-gen__head {
  color: #ffffff;
  font-size: 4.8rem;
  font-weight: 700;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width: 380px) {
  .quote-gen__head {
    font-size: 3.2rem;
  }
}
.quote-gen__head span {
  display: block;
  display: inline-block;
  height: 1rem;
  width: 2.34rem;
  background-color: #F4EC27;
}
.quote-gen__input--dropdown {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-gen__input--dropdown .select {
  width: 30rem;
  height: 4rem;
  border-radius: 2rem;
  padding: 0.5rem;
  border: 0.2rem solid #EA098D;
  outline: none;
  font-size: 1.8rem;
}
.quote-gen__input--measurement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 590px) {
  .quote-gen__input--measurement {
    flex-direction: column;
  }
}
.quote-gen__input--measurement input {
  width: 30rem;
  height: 4rem;
  border-radius: 5rem;
  padding-left: 1rem;
  border: 0.2rem solid #EA098D;
  outline: none;
  font-size: 1.8rem;
}
.quote-gen__input-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
.quote-gen__input--btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-gen__input--btn .btn {
  background-color: #EA098D;
  border: none;
  padding: 1rem 2.9rem;
  font-size: 2.8rem;
  font-weight: 700;
  color: #ffffff;
  border-radius: 8rem;
  cursor: pointer;
  margin-bottom: 4rem;
}
.quote-gen__input--btn .btn:hover {
  background-color: #F4EC27;
  color: #22ACE2;
  transition: all 1s;
}
.quote-gen__total {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6rem;
  gap: 1rem;
}
@media screen and (max-width: 590px) {
  .quote-gen__total {
    flex-direction: column;
  }
}
.quote-gen__total span {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding: 1rem;
  border: 0.2rem solid #EA098D;
  border-radius: 1rem;
  color: rgba(10, 10, 10, 0.937254902);
}

.quote-gen__input--checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #ffffff;
}
@media screen and (max-width: 300px) {
  .quote-gen__input--checkbox {
    font-size: 1.6rem;
  }
}

/* Hide the browser's default checkbox */
.quote-gen__input--checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 2px solid #EA098D;
  border-radius: 0.7rem;
}

/* On mouse-over, add a grey background color */
.quote-gen__input--checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.quote-gen__input--checkbox input:checked ~ .checkmark {
  background-color: #F4EC27;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.quote-gen__input--checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.quote-gen__input--checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #EA098D;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*-------------------------product card  ---------------------*/
.card-product {
  background-color: rgba(24, 23, 23, 0.5058823529);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  z-index: 77;
}
.card-product__container {
  padding: 2rem;
  background-color: #F4EC27;
  border-radius: 1rem;
  max-width: 80rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 300px) {
  .card-product__container {
    width: 95% vw;
  }
}
.card-product__image {
  min-width: 60%;
}
.card-product__image--big {
  object-fit: contain;
}
.card-product__image--small {
  list-style-type: none;
  display: inline-block;
  height: 9rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.card-product__image--small .card-list-img {
  width: 12rem;
  height: 10rem;
  border-radius: 1rem;
}

.hide-checkbox {
  display: none;
}

.hide {
  display: none;
}

.product-image {
  max-width: 32rem;
}

.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
  background: #22ACE2;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

/*---------------------------------------login------------------------*/
#logInButton {
  color: white;
  border: none;
  outline: none;
  font-size: 24px;
  font-weight: 200;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  letter-spacing: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  text-transform: uppercase;
  background-color: #00a7ee;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
#logInButton .login-btn-text {
  z-index: 2;
  display: block;
  padding: 10px 20px;
  position: relative;
}
#logInButton .login-btn-text:hover {
  cursor: pointer;
}
#logInButton:after {
  top: -50%;
  z-index: 1;
  content: "";
  width: 150%;
  height: 200%;
  position: absolute;
  left: calc(-150% - 40px);
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-transform: skewX(-40deg);
  -moz-transform: skewX(-40deg);
  -ms-transform: skewX(-40deg);
  -o-transform: skewX(-40deg);
  transform: skewX(-40deg);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#logInButton:hover {
  cursor: default;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
#logInButton:hover:after {
  -webkit-transform: translateX(100%) skewX(-30deg);
  -moz-transform: translateX(100%) skewX(-30deg);
  -ms-transform: translateX(100%) skewX(-30deg);
  -o-transform: translateX(100%) skewX(-30deg);
  transform: translateX(100%) skewX(-30deg);
}
#logInButton.active {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
#logInButton.active .modal {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
#logInButton .log-in {
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: inherit;
  transform-origin: 95vw 1vw;
  background-image: linear-gradient(to top left, #00a7ee 10%, #55ccff 65%, white 200%);
  -webkit-transform: scale(0.000001, 0.00001);
  -moz-transform: scale(0.000001, 0.00001);
  -ms-transform: scale(0.000001, 0.00001);
  -o-transform: scale(0.000001, 0.00001);
  transform: scale(0.000001, 0.00001);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  border-radius: 50%;
  scale: 100%;
}

.log-in-close-button {
  top: 20px;
  right: 20px;
  position: absolute;
  -webkit-transition: opacity 0.2s ease-in;
  -moz-transition: opacity 0.2s ease-in;
  -ms-transition: opacity 0.2s ease-in;
  -o-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}
.log-in-close-button:hover {
  opacity: 0.5;
  cursor: pointer;
}

.form-title {
  margin-bottom: 15px;
}

.form-button {
  width: 100%;
  padding: 10px;
  color: #00a7ee;
  margin-top: 10px;
  max-width: 400px;
  text-align: center;
  border: solid 1px white;
  background-color: white;
  -webkit-transition: color 0.2s ease-in, background-color 0.2s ease-in;
  -moz-transition: color 0.2s ease-in, background-color 0.2s ease-in;
  -ms-transition: color 0.2s ease-in, background-color 0.2s ease-in;
  -o-transition: color 0.2s ease-in, background-color 0.2s ease-in;
  transition: color 0.2s ease-in, background-color 0.2s ease-in;
}
.form-button:hover {
  color: white;
  cursor: pointer;
  background-color: transparent;
}

.input-group {
  width: 100%;
  font-size: 16px;
  max-width: 400px;
  padding-top: 20px;
  position: relative;
  margin-bottom: 15px;
}
.input-group input {
  width: 100%;
  color: white;
  border: none;
  outline: none;
  padding: 5px 0;
  line-height: 1;
  font-size: 16px;
  border-bottom: solid 1px white;
  background-color: transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  -ms-transition: box-shadow 0.2s ease-in;
  -o-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}
.input-group input + label {
  left: 0;
  top: 20px;
  position: absolute;
  pointer-events: none;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.input-group input:focus {
  box-shadow: 0 1px 0 0 white;
}
.input-group input:focus + label, .input-group input.active + label {
  font-size: 12px;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
}

.user-container {
  display: block;
}

.user-header {
  padding: 2rem;
  background-color: #22ACE2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-header h3 {
  font-size: 2.8rem;
  color: #ffffff;
}
.user-header h3 span {
  background-color: #EA098D;
  padding: 0 1rem;
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 1rem;
}
.user-header .admin-links {
  margin-left: auto;
}
.user-header .admin-links a {
  margin-left: 1rem;
}
.user-header a {
  margin-left: auto;
  background-color: #EA098D;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.8rem;
  padding: 1rem;
  transition: all 0.5 linear;
  text-transform: capitalize;
  margin-bottom: 1rem;
}
.user-header a:hover {
  background-color: #ffffff;
  color: #EA098D;
  transition: all 0.9 linear;
}

.user-heading {
  padding: 1rem 3rem;
  color: rgba(10, 10, 10, 0.937254902);
  font-weight: 700;
  text-transform: capitalize;
  font-size: 2.4rem;
}
.user-heading span {
  color: #EA098D;
}

.content {
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 635px) {
  .content {
    flex-direction: column;
  }
}
.content .table-container {
  overflow-x: auto;
}
.content .works-table {
  border-collapse: collapse;
  margin: 0rem 2rem;
  font-size: 1.6rem;
  box-sizing: 0 0 0.2rem rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
  width: 70vw;
}
@media screen and (max-width: 635px) {
  .content .works-table {
    flex-direction: column;
  }
}
.content .works-table thead tr {
  background-color: #EA098D;
  color: #ffffff;
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
}
.content .works-table th,
.content .works-table td {
  padding: 1rem 1.5rem;
}
.content .works-table tbody {
  background-color: rgba(34, 172, 226, 0.2941176471);
  width: 100%;
}
.content .works-table tbody tr {
  width: 100%;
}
.content .works-table tbody tr:last-of-type {
  border-bottom: 0.2rem solid #EA098D;
}
.content .sales {
  background-color: #F4EC27;
  width: 25%;
}
@media screen and (max-width: 635px) {
  .content .sales {
    width: 70%;
    margin: 2rem;
  }
}
.content .sales__summery--heading {
  background-color: #EA098D;
  color: #ffffff;
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.6rem;
  padding: 1rem 1rem;
}
.content .sales__summery > div {
  font-size: 1.6rem;
  font-weight: 500;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
}
.content .sales__summery > div span {
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  border: 0.2rem solid inherit;
  border-radius: 1rem;
}
.content .sales__summery--exp {
  color: #EA098D;
}
.content .sales__materials--heading {
  background-color: #22ACE2;
  color: #ffffff;
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.6rem;
  padding: 1rem 1rem;
}
.content .sales__materials > div {
  font-size: 1.6rem;
  font-weight: 500;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
}
.content .sales__materials > div span {
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  border: 0.2rem solid inherit;
  border-radius: 1rem;
}
.content .sales__machines--heading {
  background-color: rgba(10, 10, 10, 0.937254902);
  color: #ffffff;
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.6rem;
  padding: 1rem 1rem;
}
.content .sales__machines > div {
  font-size: 1.6rem;
  font-weight: 500;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
}
.content .sales__machines > div span {
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  border: 0.2rem solid inherit;
  border-radius: 1rem;
}

/*# sourceMappingURL=style.css.map */