/* BASE */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: "Nanum Gothic Coding", monospace;
  font-size: 14px;
}

/* COMPONENTS */
button,
input[type=button],
input[type=submit],
input[type=reset] {
  border: none;
  cursor: pointer;
  font-family: "Nanum Gothic Coding", monospace;
  font-size: 1.1rem;
  margin: 0px 20px;
  margin: 10px;
  padding: 16px 32px;
  text-decoration: none;
}

@media (width > 768px) {
  .button__section, .button__section--dark, .button__section--light {
    font-size: 1.2rem;
  }
}
@media (width > 1024px) {
  .button__section, .button__section--dark, .button__section--light {
    font-size: 1.3rem;
  }
}

.button__section--light {
  background-color: rgb(255, 255, 255);
  color: #2dc1d7;
}
.button__section--light:hover {
  background-color: #2dc1d7;
  color: #ffffff;
}

.button__section--dark {
  background-color: rgb(255, 255, 255);
  color: #2dc1d7;
  width: auto;
}
.button__section--dark:hover {
  background-color: #faf048;
  color: #2dc1d7;
}

.card--responsive {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  text-align: justify;
}
.card--responsive a {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 5px;
}
.card--responsive a img {
  width: 20%;
}

.card--responsive--head {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  text-align: justify;
  max-width: 1023px;
}
.card--responsive--head a {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 5px;
}
.card--responsive--head a img {
  width: 20%;
}

.card--responsive--footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  text-align: justify;
  max-width: 700px;
}
.card--responsive--footer a {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 5px;
}
.card--responsive--footer a img {
  width: 7%;
}

.card__presentation--responsive {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  text-align: justify;
  max-width: 1023px;
  background-color: rgba(51, 51, 51, 0.0235294118);
}
.card__presentation--responsive a {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 5px;
}
.card__presentation--responsive a img {
  width: 40%;
}
.card__presentation--responsive:hover {
  background-color: rgba(51, 51, 51, 0.062745098);
}
.card__presentation--responsive img {
  clip-path: polygon(70% 0%, 100% 70%, 70% 100%, 0% 70%);
  opacity: 0.5;
}
.card__presentation--responsive img:hover {
  clip-path: circle(50%);
  opacity: 1;
}

.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  /* Also define standard property for compatibility */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 200px; /* change this to change the size*/
}

.linkedin {
  background: #0A66C2;
  -webkit-background-clip: text;
  /* Also define standard property for compatibility */
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.facebook {
  background: #3b5998;
  -webkit-background-clip: text;
  /* Also define standard property for compatibility */
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

input[type=text],
input[type=email],
input[type=password] {
  background-color: #F2F2F2;
  border: none;
  color: #2dc1d7;
  font-family: "Nanum Gothic Coding", monospace;
  font-size: 1.1rem;
  margin: 5px 20px;
  padding: 16px 32px;
  text-decoration: none;
}

input:hover {
  background-color: #faf048;
  color: #2dc1d7;
}

.radio_check {
  margin: 5px 20px;
}

iframe {
  width: 100%;
  height: 100vh;
}

.iframe_hero {
  margin-right: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

.image--blur {
  /* The image used */
  background-image: linear-gradient(to bottom, rgba(45, 192, 215, 0.3568627451), rgba(51, 51, 51, 0.3647058824)), url("../assets/img/contact_Water_leak.webp");
  /* Add the blur effect */
  filter: blur(0px);
  -webkit-filter: blur(0px);
  /* Full height */
  height: 100%;
  /* Opacity */
  opacity: 0.7;
  /* Parallax */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  grid-row: 1;
  grid-column: 1;
}
@media (width > 768px) {
  .image--blur {
    background-attachment: fixed;
  }
}
textarea {
  background-color: #F2F2F2;
  border: none;
  color: #2dc1d7;
  font-family: "Nanum Gothic Coding", monospace;
  font-size: 1.1rem;
  margin: 5px 20px;
  padding: 16px 32px;
  text-decoration: none;
}

textarea:hover {
  background-color: #faf048;
  color: #2dc1d7;
}

.highlight {
  display: inline;
  padding: 0.25em 0;
  background: #2dc1d7;
  color: #ffffff;
  box-shadow: 0.5em 0 0 #2dc1d7, -0.5em 0 0 #2dc1d7;
}

mark {
  -webkit-animation: 1.5s highlight 1.5s 1 normal forwards;
  animation: 1.5s highlight 1.5s 1 normal forwards;
  background-color: none;
  background: linear-gradient(90deg, #2dc1d7 50%, #F2F2F2 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
}

@-webkit-keyframes highlight {
  to {
    background-position: 0 0;
  }
}
@keyframes highlight {
  to {
    background-position: 0 0;
  }
}
.badges {
  background-color: #faf048;
  color: #333;
  padding: 0.25em 10px;
  text-align: center;
  border-radius: 8px;
}

/* LAYOUT */
.flex, .flex__button--responsive, .flex__article--responsive, .flex__article--responsive--right {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 20px;
}

.flex__article--responsive, .flex__article--responsive--right {
  flex-wrap: wrap-reverse;
}
.flex__article--responsive > *, .flex__article--responsive--right > * {
  flex-basis: 480px;
  flex-grow: 1;
  flex-shrink: 1;
}
@media (width > 768px) {
  .flex__article--responsive, .flex__article--responsive--right {
    gap: 0 2rem;
  }
}
@media (width > 1024px) {
  .flex__article--responsive, .flex__article--responsive--right {
    gap: 0 5rem;
  }
}
@media (width > 1600px) {
  .flex__article--responsive, .flex__article--responsive--right {
    gap: 0 20rem;
  }
}

@media (width > 768px) {
  .flex__article--responsive--right {
    justify-content: flex-end;
  }
  .flex__article--responsive--right > * {
    flex-basis: 320px;
    flex-grow: 0.7;
    flex-shrink: auto;
  }
}

.flex__button--responsive {
  flex-wrap: wrap;
}

.flex--buttons {
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
  justify-content: center;
}
@media (width > 768px) {
  .flex--buttons {
    flex-flow: row wrap;
  }
}

header {
  background-color: rgb(255, 255, 255);
}

.nav-link {
  color: #2dc1d7;
}

.nav-link:hover {
  background-color: #faf048;
  color: #2dc1d7 !important;
}

/* ---------------------------------------------------- */
.section--light {
  background-color: #F2F2F2;
}
.section--light h1 {
  color: #2dc1d7;
  font-size: 2.04rem;
  font-weight: 700;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.section--light h2 {
  color: #2dc1d7;
  font-size: 1.87rem;
  font-weight: 600;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.section--light h3 {
  text-transform: uppercase;
  color: #2dc1d7;
  font-size: 1.7rem;
  font-weight: 500;
  margin-bottom: 3%;
  text-align: center;
}
.section--light h4 {
  color: #2dc1d7;
  font-size: 1.615rem;
  font-weight: 300;
  margin-bottom: 2%;
  text-align: center;
  text-transform: uppercase;
}
.section--light p,
.section--light li,
.section--light label {
  color: #000000;
  font-size: 1.36rem;
  font-weight: 300;
  margin-bottom: 3%;
}
.section--light b,
.section--light strong {
  color: #000000;
  font-size: 1.36rem;
  font-weight: 600;
  margin-bottom: 1%;
}
@media (width > 768px) {
  .section--light h1 {
    font-size: 2.55rem;
  }
  .section--light h2 {
    font-size: 2.448rem;
  }
  .section--light h3 {
    font-size: 2.074rem;
  }
  .section--light h4 {
    font-size: 1.802rem;
  }
  .section--light p,
  .section--light li,
  .section--light label {
    font-size: 1.7rem;
  }
  .section--light b,
  .section--light strong {
    font-size: 1.7rem;
  }
}
@media (width > 1024px) {
  .section--light h1 {
    font-size: 3.74rem;
  }
}

.section--light--green {
  background-color: #faf048;
}
.section--light--green h1 {
  color: #2dc1d7;
  font-size: 2.04rem;
  font-weight: 700;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.section--light--green h2 {
  color: #2dc1d7;
  font-size: 1.87rem;
  font-weight: 600;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.section--light--green h3 {
  text-transform: uppercase;
  color: #2dc1d7;
  font-size: 1.7rem;
  font-weight: 500;
  margin-bottom: 3%;
  text-align: center;
}
.section--light--green h4 {
  color: #2dc1d7;
  font-size: 1.615rem;
  font-weight: 300;
  margin-bottom: 2%;
  text-align: center;
  text-transform: uppercase;
}
.section--light--green p,
.section--light--green li,
.section--light--green label {
  color: #333;
  font-size: 1.36rem;
  font-weight: 300;
  margin-bottom: 3%;
}
.section--light--green b,
.section--light--green strong {
  color: #333;
  font-size: 1.36rem;
  font-weight: 600;
  margin-bottom: 1%;
}
@media (width > 768px) {
  .section--light--green h1 {
    font-size: 2.55rem;
  }
  .section--light--green h2 {
    font-size: 2.448rem;
  }
  .section--light--green h3 {
    font-size: 2.074rem;
  }
  .section--light--green h4 {
    font-size: 1.802rem;
  }
  .section--light--green p,
  .section--light--green li,
  .section--light--green label {
    font-size: 1.7rem;
  }
  .section--light--green b,
  .section--light--green strong {
    font-size: 1.7rem;
  }
}
@media (width > 1024px) {
  .section--light--green h1 {
    font-size: 3.74rem;
  }
}

.section--dark, .footer--dark {
  background-color: #333333;
}
.section--dark h1, .footer--dark h1 {
  color: #2dc1d7;
  font-size: 1.56rem;
  font-weight: 700;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.section--dark h2, .footer--dark h2 {
  color: #2dc1d7;
  font-size: 1.43rem;
  font-weight: 600;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.section--dark h3, .footer--dark h3 {
  text-transform: uppercase;
  color: #2dc1d7;
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 3%;
  text-align: center;
}
.section--dark h4, .footer--dark h4 {
  color: #2dc1d7;
  font-size: 1.235rem;
  font-weight: 300;
  margin-bottom: 2%;
  text-align: center;
  text-transform: uppercase;
}
.section--dark p, .footer--dark p,
.section--dark li,
.footer--dark li,
.section--dark label,
.footer--dark label {
  color: #ffffff;
  font-size: 1.04rem;
  font-weight: 300;
  margin-bottom: 3%;
}
.section--dark b, .footer--dark b,
.section--dark strong,
.footer--dark strong {
  color: #ffffff;
  font-size: 1.04rem;
  font-weight: 600;
  margin-bottom: 1%;
}
@media (width > 768px) {
  .section--dark h1, .footer--dark h1 {
    font-size: 1.95rem;
  }
  .section--dark h2, .footer--dark h2 {
    font-size: 1.872rem;
  }
  .section--dark h3, .footer--dark h3 {
    font-size: 1.586rem;
  }
  .section--dark h4, .footer--dark h4 {
    font-size: 1.378rem;
  }
  .section--dark p, .footer--dark p,
  .section--dark li,
  .footer--dark li,
  .section--dark label,
  .footer--dark label {
    font-size: 1.3rem;
  }
  .section--dark b, .footer--dark b,
  .section--dark strong,
  .footer--dark strong {
    font-size: 1.3rem;
  }
}
@media (width > 1024px) {
  .section--dark h1, .footer--dark h1 {
    font-size: 2.86rem;
  }
}

/* ---------------------------------------------------- */
.footer--dark h4 {
  font-size: 20rem;
  margin-bottom: 10%;
}
.footer--dark p,
.footer--dark li {
  font-size: 10rem;
  margin-bottom: 10%;
}

/* ---------------------------------------------------- */
.hero--light, .contact__section__hero, .waiting__list__section__hero, .index__section__hero, .features__section__hero {
  background-color: #2dc1d7;
}
.hero--light h1, .contact__section__hero h1, .waiting__list__section__hero h1, .index__section__hero h1, .features__section__hero h1 {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.hero--light h2, .contact__section__hero h2, .waiting__list__section__hero h2, .index__section__hero h2, .features__section__hero h2 {
  color: #ffffff;
  font-size: 1.65rem;
  font-weight: 600;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.hero--light h3, .contact__section__hero h3, .waiting__list__section__hero h3, .index__section__hero h3, .features__section__hero h3 {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 3%;
  text-align: center;
}
.hero--light h4, .contact__section__hero h4, .waiting__list__section__hero h4, .index__section__hero h4, .features__section__hero h4 {
  color: #ffffff;
  font-size: 1.425rem;
  font-weight: 300;
  margin-bottom: 2%;
  text-align: center;
  text-transform: uppercase;
}
.hero--light p, .contact__section__hero p, .waiting__list__section__hero p, .index__section__hero p, .features__section__hero p,
.hero--light li,
.contact__section__hero li,
.waiting__list__section__hero li,
.index__section__hero li,
.features__section__hero li,
.hero--light label,
.contact__section__hero label,
.waiting__list__section__hero label,
.index__section__hero label,
.features__section__hero label {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 3%;
}
.hero--light b, .contact__section__hero b, .waiting__list__section__hero b, .index__section__hero b, .features__section__hero b,
.hero--light strong,
.contact__section__hero strong,
.waiting__list__section__hero strong,
.index__section__hero strong,
.features__section__hero strong {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1%;
}
@media (width > 768px) {
  .hero--light h1, .contact__section__hero h1, .waiting__list__section__hero h1, .index__section__hero h1, .features__section__hero h1 {
    font-size: 2.25rem;
  }
  .hero--light h2, .contact__section__hero h2, .waiting__list__section__hero h2, .index__section__hero h2, .features__section__hero h2 {
    font-size: 2.16rem;
  }
  .hero--light h3, .contact__section__hero h3, .waiting__list__section__hero h3, .index__section__hero h3, .features__section__hero h3 {
    font-size: 1.83rem;
  }
  .hero--light h4, .contact__section__hero h4, .waiting__list__section__hero h4, .index__section__hero h4, .features__section__hero h4 {
    font-size: 1.59rem;
  }
  .hero--light p, .contact__section__hero p, .waiting__list__section__hero p, .index__section__hero p, .features__section__hero p,
  .hero--light li,
  .contact__section__hero li,
  .waiting__list__section__hero li,
  .index__section__hero li,
  .features__section__hero li,
  .hero--light label,
  .contact__section__hero label,
  .waiting__list__section__hero label,
  .index__section__hero label,
  .features__section__hero label {
    font-size: 1.5rem;
  }
  .hero--light b, .contact__section__hero b, .waiting__list__section__hero b, .index__section__hero b, .features__section__hero b,
  .hero--light strong,
  .contact__section__hero strong,
  .waiting__list__section__hero strong,
  .index__section__hero strong,
  .features__section__hero strong {
    font-size: 1.5rem;
  }
}
@media (width > 1024px) {
  .hero--light h1, .contact__section__hero h1, .waiting__list__section__hero h1, .index__section__hero h1, .features__section__hero h1 {
    font-size: 3.3rem;
  }
}
.hero--light p, .contact__section__hero p, .waiting__list__section__hero p, .index__section__hero p, .features__section__hero p,
.hero--light li,
.contact__section__hero li,
.waiting__list__section__hero li,
.index__section__hero li,
.features__section__hero li {
  font-size: 1.5rem;
  font-weight: 400;
}

.hero--dark {
  background-color: #333333;
}
.hero--dark h1 {
  color: #2dc1d7;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.hero--dark h2 {
  color: #2dc1d7;
  font-size: 1.65rem;
  font-weight: 600;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.hero--dark h3 {
  text-transform: uppercase;
  color: #2dc1d7;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 3%;
  text-align: center;
}
.hero--dark h4 {
  color: #2dc1d7;
  font-size: 1.425rem;
  font-weight: 300;
  margin-bottom: 2%;
  text-align: center;
  text-transform: uppercase;
}
.hero--dark p,
.hero--dark li,
.hero--dark label {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 3%;
}
.hero--dark b,
.hero--dark strong {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1%;
}
@media (width > 768px) {
  .hero--dark h1 {
    font-size: 2.25rem;
  }
  .hero--dark h2 {
    font-size: 2.16rem;
  }
  .hero--dark h3 {
    font-size: 1.83rem;
  }
  .hero--dark h4 {
    font-size: 1.59rem;
  }
  .hero--dark p,
  .hero--dark li,
  .hero--dark label {
    font-size: 1.5rem;
  }
  .hero--dark b,
  .hero--dark strong {
    font-size: 1.5rem;
  }
}
@media (width > 1024px) {
  .hero--dark h1 {
    font-size: 3.3rem;
  }
}
.hero--dark p,
.hero--dark li {
  font-size: 1.65rem;
  font-weight: 400;
}

.hero--light--green, .about__section__hero {
  background-color: #2dc1d7;
}
.hero--light--green h1, .about__section__hero h1 {
  color: #faf048;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.hero--light--green h2, .about__section__hero h2 {
  color: #faf048;
  font-size: 1.65rem;
  font-weight: 600;
  margin-bottom: 5%;
  text-align: center;
  text-transform: uppercase;
}
.hero--light--green h3, .about__section__hero h3 {
  text-transform: uppercase;
  color: #faf048;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 3%;
  text-align: center;
}
.hero--light--green h4, .about__section__hero h4 {
  color: #faf048;
  font-size: 1.425rem;
  font-weight: 300;
  margin-bottom: 2%;
  text-align: center;
  text-transform: uppercase;
}
.hero--light--green p, .about__section__hero p,
.hero--light--green li,
.about__section__hero li,
.hero--light--green label,
.about__section__hero label {
  color: #faf048;
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 3%;
}
.hero--light--green b, .about__section__hero b,
.hero--light--green strong,
.about__section__hero strong {
  color: #faf048;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1%;
}
@media (width > 768px) {
  .hero--light--green h1, .about__section__hero h1 {
    font-size: 2.25rem;
  }
  .hero--light--green h2, .about__section__hero h2 {
    font-size: 2.16rem;
  }
  .hero--light--green h3, .about__section__hero h3 {
    font-size: 1.83rem;
  }
  .hero--light--green h4, .about__section__hero h4 {
    font-size: 1.59rem;
  }
  .hero--light--green p, .about__section__hero p,
  .hero--light--green li,
  .about__section__hero li,
  .hero--light--green label,
  .about__section__hero label {
    font-size: 1.5rem;
  }
  .hero--light--green b, .about__section__hero b,
  .hero--light--green strong,
  .about__section__hero strong {
    font-size: 1.5rem;
  }
}
@media (width > 1024px) {
  .hero--light--green h1, .about__section__hero h1 {
    font-size: 3.3rem;
  }
}
.hero--light--green p, .about__section__hero p,
.hero--light--green li,
.about__section__hero li {
  font-size: 1.5rem;
  font-weight: 400;
}

/* ---------------------------------------------------- */
.section--center {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*--------------------------------------------------  */
.grid--responsive {
  /* Responsive gid without media queries */
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 20px;
  /* Responsive gid with mediaqueries -> More exact */
}
.grid--responsive--mq {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
  padding: 20px;
}
@media (width > 768px) {
  .grid--responsive--mq .grid--responsive_MQ {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
  }
}
@media (width > 1024px) {
  .grid--responsive--mq .grid--responsive_MQ {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px;
  }
}

/*--------------------------------------------------  */
/* GRID CODE MAIN PAGE */
.page--grid {
  display: grid;
  grid-template-areas: "header" "nav" "main" "footer";
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto auto;
}
@media (width > 768px) {
  .page--grid {
    grid-template-areas: "header header header" "nav nav nav" "main main main" "footer footer footer";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto 10fr auto;
  }
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

aside {
  grid-area: aside;
  display: none;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

/*--------------------------------------------------  */
.grid__footer, .grid__footer--responsive {
  display: grid;
  gap: 1rem;
  grid-template-areas: "info" "address" "rights";
  grid-template-columns: auto;
  padding: 5px;
}
.grid__footer .info, .grid__footer--responsive .info {
  grid-area: info;
}
.grid__footer .support, .grid__footer--responsive .support {
  grid-area: support;
  display: none;
}
.grid__footer .address, .grid__footer--responsive .address {
  grid-area: address;
  display: none;
}
.grid__footer .rights, .grid__footer--responsive .rights {
  grid-area: rights;
  text-align: center;
}

@media (width > 768px) {
  .grid__footer--responsive {
    grid-template-areas: "info support" "info address" "rights rights";
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto auto;
  }
  .grid__footer--responsive .support {
    display: block;
  }
  .grid__footer--responsive .address {
    display: block;
  }
}
@media (width > 1024px) {
  .grid__footer--responsive {
    grid-template-areas: "info support address" "info support address" "rights rights rights";
    grid-template-columns: 50% 24% 24%;
    grid-template-rows: auto auto auto;
  }
}

/*--------------------------------------------------  */
.grid__contact, .grid__contact--responsive {
  display: grid;
  grid-template-areas: "contact_form" "map" "address";
  grid-template-columns: auto;
  margin-top: 50px;
  padding: 0px;
}
.grid__contact .contact_form, .grid__contact--responsive .contact_form {
  grid-area: contact_form;
  align-items: center;
  display: grid;
}
.grid__contact .map, .grid__contact--responsive .map {
  grid-area: map;
}
.grid__contact .address, .grid__contact--responsive .address {
  grid-area: address;
  display: none;
  justify-self: center;
  padding: 20px;
}

@media (width > 768px) {
  .grid__contact--responsive .address {
    display: block;
  }
}
@media (width > 1024px) {
  .grid__contact--responsive {
    grid-template-areas: "contact_form map" "contact_form map " "contact_form address";
    grid-template-columns: 50% 50%; /* <- porque no funciona con 50% */
    grid-template-rows: auto auto auto;
  }
}

/*--------------------------------------------------  */
.grid--responsive--radio {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  padding: 20px;
  padding: 0px 0px;
  justify-items: center;
}

fieldset {
  border-width: 0;
  display: flex;
  flex-direction: column;
  font-family: "Nanum Gothic Coding", monospace;
  font-size: 1.1rem;
}
fieldset input[type=email] {
  text-align: left;
}
fieldset input[type=password] {
  text-align: center;
}
fieldset input[type=button],
fieldset input[type=submit],
fieldset input[type=reset] {
  color: #2dc1d7;
}

.form_contact {
  padding: 50px 10px;
  grid-row: 1;
  grid-column: 1;
}

/* VIEWS */
.about__section__hero {
  overflow: auto;
  position: relative;
  height: 100vh;
  background-image: url("../assets/img/Image_about_us_team_work_water.webp");
  opacity: 1;
  color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  text-shadow: 3px 3px 8px #535151;
}
@media (width > 768px) {
  .about__section__hero {
    background-attachment: fixed;
  }
}
@media (width > 768px) {
  .about__section__hero {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    text-shadow: none;
  }
}
@media (width > 768px) and (width > 768px) {
  .about__section__hero {
    background-attachment: fixed;
  }
}
@media (width > 1024px) {
  .about__section__hero {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (width > 1024px) and (width > 768px) {
  .about__section__hero {
    background-attachment: fixed;
  }
}
.features__section__hero {
  overflow: auto;
  position: relative;
  height: 100vh;
  background-image: url("../assets/img/pattern_Water_leak.webp");
  opacity: 1;
  color: #ffffff;
  background-position: left;
  background-repeat: repeat;
  background-size: contain;
}
@media (width > 768px) {
  .features__section__hero {
    background-attachment: fixed;
  }
}
@media (width > 768px) {
  .feature__section--cut {
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 10% 70%);
  }
}
@media (width > 1024px) {
  .feature__section--cut {
    clip-path: polygon(25% 0%, 101% 0%, 100% 100%, 25% 100%, 20% 70%);
  }
}
.feature__section--bg {
  background-image: url(../assets/img/Road_map.webp);
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (width > 768px) {
  .feature__section--bg {
    background-attachment: fixed;
  }
}
.index__section__hero {
  overflow: auto;
  position: relative;
  height: 100vh;
  background-image: url(none);
  opacity: 1;
  color: #ffffff;
  background-position: left;
  background-repeat: repeat;
  background-size: 50%;
}
@media (width > 768px) {
  .index__section__hero {
    background-attachment: fixed;
  }
}
@media (width > 768px) {
  .index__section__hero {
    background-position: left;
    background-repeat: repeat;
    background-size: 30%;
  }
}
@media (width > 768px) and (width > 768px) {
  .index__section__hero {
    background-attachment: fixed;
  }
}
@media (width > 1024px) {
  .index__section__hero {
    background-position: left;
    background-repeat: repeat;
    background-size: 20%;
  }
}
@media (width > 1024px) and (width > 768px) {
  .index__section__hero {
    background-attachment: fixed;
  }
}
.waiting__list__section__hero {
  overflow: auto;
  position: relative;
  height: 100vh;
  background-image: url("../assets/img/Be_the_First_to_Experience_Our_AI-Based_Leak_detection.webp");
  opacity: 1;
  color: #ffffff;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (width > 768px) {
  .waiting__list__section__hero {
    background-attachment: fixed;
  }
}
body {
  background-color: #2dc1d7;
}

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