@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Pacifico&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
.navbar {
  background-color: #00334E; }
  .navbar div button {
    background-color: #F6f5f5;
    color: #ee6f57; }
  .navbar img {
    width: 85px;
    box-sizing: border-box; }
  .navbar li a {
    color: #F6f5f5;
    font-size: 1.2rem; }
  .navbar li a:hover {
    color: #ee6f57; }

#footer {
  background-color: #00334E;
  color: #F6f5f5; }

.fa-brands {
  font-size: 1.4rem; }

.fa-facebook {
  color: #1877f2; }

.fa-whatsapp {
  color: #25d366; }

.fa-instagram {
  color: #e1306c; }

body {
  font-family: "Montserrat", sans-serif; }

header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00334E;
  flex-direction: column;
  text-align: center; }
  header div h1 {
    font-family: "Pacifico", sans-serif;
    font-size: 2.5rem;
    color: #ee6f57; }
  header div button {
    width: 40%;
    border: none;
    color: #145374;
    padding: 2%;
    text-align: center;
    text-decoration: none;
    align-items: center;
    font-size: 16px;
    margin: 5%;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 8px;
    font-size: 1.4rem; }
  header div p {
    font-size: 1.4rem;
    color: #F6f5f5; }

@media only screen and (min-width: 770px) {
  header {
    flex-direction: row; }
    header div p {
      font-size: 1.4rem; }
    header div button:hover {
      background-color: #ee6f57;
      color: #F6f5f5; }
    header div h1 {
      font-size: 3.5rem; } }

main .sec1 h2 {
  background-color: #145374;
  padding: 3%;
  text-align: center;
  color: #ee6f57;
  font-family: "Pacifico", sans-serif; }

main .sec1 section {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /* Linea para responsive */
  grid-auto-rows: max-content;
  background-color: #145374;
  padding: 3%; }
  main .sec1 section figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    main .sec1 section figure img {
      border-top-left-radius: 25%;
      border-bottom-right-radius: 25%;
      width: 230px; }
    main .sec1 section figure figcaption {
      color: #F6f5f5;
      text-align: center;
      font-size: 1.4rem; }
    main .sec1 section figure button {
      width: 40%;
      border: none;
      color: #145374;
      padding: 2%;
      text-align: center;
      text-decoration: none;
      align-items: center;
      margin: 5%;
      cursor: pointer;
      border-radius: 8px;
      font-size: 1.2rem; }
      main .sec1 section figure button:hover {
        background-color: #ee6f57;
        color: #F6f5f5;
        transition-duration: 0.6s; }

main .sec2 h2 {
  background-color: #F6f5f5;
  padding: 3%;
  text-align: center;
  color: #ee6f57;
  font-family: "Pacifico", sans-serif;
  font-size: 2.5rem; }

main .sec2 section {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /* Linea para responsive */
  grid-auto-rows: max-content;
  background-color: #F6f5f5;
  padding: 3%; }
  main .sec2 section figure {
    display: flex;
    align-items: center;
    flex-direction: column; }
    main .sec2 section figure img {
      border-top-left-radius: 25%;
      border-bottom-right-radius: 25%;
      width: 230px; }
    main .sec2 section figure figcaption {
      color: #145374;
      text-align: center;
      font-size: 1.4rem; }

.encabezado {
  font-size: 1.4rem;
  background-color: #145374;
  padding: 1%;
  text-align: center;
  color: #ee6f57;
  font-family: "Pacifico", sans-serif; }

#servicios div div div h1 {
  font-family: "Pacifico", sans-serif;
  color: #ee6f57; }

.encabezado {
  font-size: 1.4rem;
  background-color: #145374;
  padding: 1%;
  text-align: center;
  color: #ee6f57;
  font-family: "Pacifico", sans-serif; }

main div .muestrario {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  /* Linea para responsive */
  grid-auto-rows: max-content;
  background-color: #F6f5f5;
  padding: 1%;
  align-self: center; }
  main div .muestrario .card {
    width: 15rem; }
  main div .muestrario .card-img-top {
    height: 50px;
    align-items: center;
    justify-content: center; }

.encabezado {
  font-size: 1.4rem;
  background-color: #145374;
  padding: 1%;
  text-align: center;
  color: #ee6f57;
  font-family: "Pacifico", sans-serif; }

.infoPers {
  display: inline;
  margin: 3% 10%;
  width: 80%;
  text-align: center;
  border: none; }

fieldset h2 {
  font-family: "Pacifico", sans-serif;
  color: #ee6f57; }

#contactForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  #contactForm div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  #contactForm .btn {
    width: 30%;
    border: 1px;
    background-color: #00334E;
    color: #F6f5f5;
    padding: 2%;
    text-align: center;
    text-decoration: none;
    align-items: center;
    margin: 3%;
    cursor: pointer;
    border-radius: 8px;
    font-size: 1.2rem; }
    #contactForm .btn:hover {
      background-color: #ee6f57;
      transition-duration: 0.2s; }

.location {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .location h2 {
    font-family: "Pacifico", sans-serif;
    color: #ee6f57; }
  .location iframe {
    width: 600px;
    height: 450px; }

@media only screen and (max-width: 770px) {
  .location iframe {
    width: 400px;
    height: 250px; } }

@media only screen and (max-width: 370px) {
  .location iframe {
    width: 300px;
    height: 150px; } }

.encabezado {
  font-size: 1.4rem;
  background-color: #145374;
  padding: 1%;
  text-align: center;
  color: #ee6f57;
  font-family: "Pacifico", sans-serif; }

#faq section div h6, #faq section div strong {
  color: #ee6f57;
  font-size: 1.2rem; }