.container {
  box-shadow: -7px 9px 23px -2px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: -7px 9px 23px -2px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: -7px 9px 23px -2px rgba(0, 0, 0, 0.16);
  --bs-gutter-x: 0 !important;
}
.banner {
  background-image: url("./images/foto-landing-A-03.png");
  padding: 239px 0px 232px 50px;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}
.banner .col {
  width: 50%;
}
.banner h2 {
  font-size: 56px;
  color: white;
  font-weight: lighter;
  line-height: 0.8;
}
.banner h1 {
  font-size: 57px;
  color: white;
  font-weight: 700;
}
.banner h3 {
  font-size: 43px;
}
.main {
  padding: 50px 324px;
  background-color: #f2f2f2;
  text-align: center;
}
.main h1 {
  font-weight: 700;
  padding-bottom: 40px;
}
.main p {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 2rem;
}
.main .spacer {
  padding-bottom: 1rem;
}
.main .col-form-label {
  text-align: end;
  color: #4569b2;
}
.main .form-control:focus {
  border-color: #b3cc8e;
  box-shadow: 0px 0px 15px 3px rgba(123, 171, 53, 0.75);
  -webkit-box-shadow: 0px 0px 15px 3px rgba(123, 171, 53, 0.75);
  -moz-box-shadow: 0px 0px 15px 3px rgba(123, 171, 53, 0.75);
}
.main .form-control {
  border: 2px solid #b9d097;
  border-radius: 0;
}
.main .col-sm-10 {
  width: -webkit-fill-available;
}
.main .btn-primary {
  --bs-btn-bg: #7bab35;
  --bs-btn-border-color: #7bab35;
}
.main .btn:hover {
  background-color: #609911;
  border-color: #609911;
}
.main .btn:focus-visible {
  background-color: #7bab35;
  border-color: #7bab35;
  box-shadow: 0px 0px 15px 3px rgba(123, 171, 53, 0.75);
  -webkit-box-shadow: 0px 0px 15px 3px rgba(123, 171, 53, 0.75);
  -moz-box-shadow: 0px 0px 15px 3px rgba(123, 171, 53, 0.75);
}
.footer {
  padding: 50px 50px 25px 50px;
  background-color: white;
}
.footer img {
  margin: auto;
  display: block;
}
.footer .row {
  display: inline-flex;
  margin: 30px 33em 30px 33em;
}
.footer .row:nth-child(3) {
  display: unset;
  margin: auto;
  text-align: center;
}

/* css media queries */

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .banner {
    padding: 175px 0px 165px 50px;
  }
  .banner h2 {
    font-size: 40px;
  }
  .banner h1 {
    font-size: 40px;
  }
  .banner h3 {
    font-size: 30px;
  }
  .main {
    padding: 50px 153px;
  }
  .footer .row {
    margin: 30px 21em 30px 23em;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer .row {
    margin: 30px 14em 30px 15em;
  }
  .banner {
    padding: 132px 0px 116px 30px;
  }
  .banner h2 {
    font-size: 30px;
  }
  .banner h1 {
    font-size: 30px;
  }
  .banner h3 {
    font-size: 23px;
  }
  .main {
    padding: 50px 100px;
  }
  .main h1 {
    font-size: 28px;
  }
  .main p {
    font-size: 27px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media screen and (max-width: 475px) {
  .footer .row {
    margin: 10px 0 15px 85px;
  }
  .main {
    padding: 45px;
  }
  .main h1 {
    font-size: 19px;
  }
  .main p {
    font-size: 17px;
  }
  .main .col-form-label {
    text-align: center;
  }
  .banner {
    padding: 74px 20px 80px 20px;
  }
  .banner h2 {
    font-size: 18px;
  }
  .banner h1 {
    font-size: 18px;
  }
  .banner h3 {
    font-size: 14px;
  }
}

@media screen and (max-width: 375px) {
  .banner {
    padding: 65px 20px 54px 20px;
  }
  .banner h2 {
    font-size: 15px;
  }
  .banner h1 {
    font-size: 15px;
  }
  .banner h3 {
    font-size: 12px;
  }
  .main h1 {
    font-size: 16px;
  }
  .main p {
    font-size: 15px;
  }
  .main .col-form-label {
    font-size: 15px;
  }
  .footer .row {
    margin: 10px 0 15px 60px;
  }
}

@media screen and (max-width: 320px) {
  .banner {
    padding: 54px 20px 43px 20px;
  }
  .banner h2 {
    font-size: 13px;
  }
  .banner h1 {
    font-size: 13px;
  }
  .banner h3 {
    font-size: 11px;
  }
  .main {
    padding: 15px;
  }
  .footer .row {
    margin: 10px 0 15px 35px;
  }
}
/* macbook air */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .footer .row {
    margin: 30px 27em 30px 28em;
  }
  .banner {
    padding: 205px 0px 202px 50px;
  }
  .banner h2 {
    font-size: 48px;
  }
  .banner h1 {
    font-size: 48px;
  }
  .banner h3 {
    font-size: 36px;
  }
  .main {
    padding: 50px 243px;
  }
}