@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Moon+Dance&display=swap');

.button,
.file-input-button {
  padding: 10px 20px;
  font-family: Comfortaa, serif;
  background-color: #ccc;
  cursor: pointer
}

.form-group label,
.parr {
  font-family: Comfortaa, serif;
}
.h3{
  font-family: Comfortaa, serif !important;
  font-size: 2.8rem;
  line-height: 1;
}
.col,
.mi-container {
  box-sizing: border-box
}

.mi-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center
}

.mi-container .row {
  width: 100%
}

.form-group {
  position: relative;
  margin-bottom: .5rem
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: transparent;
  outline: 0;
  transition: border-color .3s;
  font-family: Comfortaa, serif
}

.form-group textarea {
  resize: vertical;
  min-height: 50px
}

.form-group label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #888;
  pointer-events: none;
  transition: .3s
}

.form-group input:focus+label,
.form-group input:not(:placeholder-shown)+label,
.form-group textarea:focus+label,
.form-group textarea:not(:placeholder-shown)+label {
  top: 0;
  font-size: 12px;
  color: #171717;
  background-color: #fff;
  padding: 0 5px
}

.form-group input[type=checkbox],
.form-group input[type=radio] {
  width: auto;
  margin-right: .5rem;
  transform: translateY(2px);
  cursor: pointer
}

.form-group input[type=checkbox]+label,
.form-group input[type=radio]+label {
  position: static;
  transform: none;
  pointer-events: auto;
  font-size: 16px;
  color: #171717;
  background-color: transparent;
  padding: 0;
  cursor: pointer
}

.dark-mode .form-group input[type=checkbox]:checked+label,
.dark-mode .form-group input[type=checkbox]:focus+label,
.dark-mode .form-group input[type=radio]:checked+label,
.dark-mode .form-group input[type=radio]:focus+label,
.form-group input[type=checkbox]:checked+label,
.form-group input[type=checkbox]:focus+label,
.form-group input[type=radio]:checked+label,
.form-group input[type=radio]:focus+label {
  color: #007bff
}

.dark-mode .form-group input,
.dark-mode .form-group textarea {
  border-color: #555;
  color: #fff;
  background-color: #171717
}

.dark-mode .file-input-name,
.dark-mode .form-group input[type=checkbox]+label,
.dark-mode .form-group input[type=radio]+label,
.dark-mode .form-group label {
  color: #bbb
}

.dark-mode .form-group input:focus+label,
.dark-mode .form-group input:not(:placeholder-shown)+label,
.dark-mode .form-group textarea:focus+label,
.dark-mode .form-group textarea:not(:placeholder-shown)+label {
  color: #fff;
  background-color: #171717
}

.form-group input[type=file] {
  display: none
}

.file-input-container {
  position: relative;
  display: inline-block;
  width: 100%;
  cursor: pointer
}

.file-input-button {
  display: inline-block;
  font-size: 16px;
  color: #333;
  border: none;
  border-radius: 4px;
  transition: background-color .3s
}

.file-input-button:hover {
  color: #fff;
  background-color: #0056b3
}

.file-input-name {
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
  font-family: Comfortaa, serif;
  color: #888
}

.dark-mode .button,
.dark-mode .file-input-button {
  background-color: #555;
  color: #fff
}

.dark-mode .button:hover,
.dark-mode .file-input-button:hover {
  background-color: #444
}

.button {
  display: inline-block;
  font-size: 16px;
  color: #333;
  border: none;
  border-radius: 4px;
  transition: background-color .3s, transform .2s;
  text-align: center;
  text-decoration: none
}

.button:hover {
  color: #fff;
  background-color: #0056b3;
  transform: translateY(-1px)
}

.button:active {
  transform: translateY(0)
}

.dark-mode .h3,
.dark-mode .parr {
  color: #fff
}

.mt-0 {
  margin-top: 0
}

.mt-1 {
  margin-top: .25rem
}

.mt-2 {
  margin-top: .5rem
}

.mt-3 {
  margin-top: 1rem
}

.mt-4 {
  margin-top: 1.5rem
}

.mt-5 {
  margin-top: 2rem
}

.mt-6 {
  margin-top: 3rem
}

.mt-7 {
  margin-top: 4rem
}

.mt-8 {
  margin-top: 5rem
}

.mb-0 {
  margin-bottom: 0
}

.mb-1 {
  margin-bottom: .25rem
}

.mb-2 {
  margin-bottom: .5rem
}

.mb-3 {
  margin-bottom: 1rem
}

.mb-4 {
  margin-bottom: 1.5rem
}

.mb-5 {
  margin-bottom: 2rem
}

.mb-6 {
  margin-bottom: 3rem
}

.mb-7 {
  margin-bottom: 4rem
}

.mb-8 {
  margin-bottom: 5rem
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: -.25rem;
  gap: .5rem
}

.col {
  padding: .5rem;
  margin-bottom: 0
}

.col-1 {
  flex: 0 0 calc(8.333% - 0.5rem)
}

.col-2 {
  flex: 0 0 calc(16.666% - 0.5rem)
}

.col-3 {
  flex: 0 0 calc(25% - 0.5rem)
}

.col-4 {
  flex: 0 0 calc(33.333% - 0.5rem)
}

.col-5 {
  flex: 0 0 calc(41.666% - 0.5rem)
}

.col-6 {
  flex: 0 0 calc(50% - 0.5rem)
}

.col-7 {
  flex: 0 0 calc(58.333% - 0.5rem)
}

.col-8 {
  flex: 0 0 calc(66.666% - 0.5rem)
}

.col-9 {
  flex: 0 0 calc(75% - 0.5rem)
}

.col-10 {
  flex: 0 0 calc(83.333% - 0.5rem)
}

.col-11 {
  flex: 0 0 calc(91.666% - 0.5rem)
}

.col-12 {
  flex: 0 0 calc(100% - 0.5rem)
}

@media (max-width:767px) {

  .col-1,
  .col-10,
  .col-11,
  .col-12,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9 {
    flex: 0 0 100%;
    margin-bottom: .5rem
  }

  .row {
    gap: 0
  }
}

@media (min-width:768px) and (max-width:991px) {
  .col-md-1 {
    flex: 0 0 calc(8.333% - 0.5rem)
  }

  .col-md-2 {
    flex: 0 0 calc(16.666% - 0.5rem)
  }

  .col-md-3 {
    flex: 0 0 calc(25% - 0.5rem)
  }

  .col-md-4 {
    flex: 0 0 calc(33.333% - 0.5rem)
  }

  .col-md-5 {
    flex: 0 0 calc(41.666% - 0.5rem)
  }

  .col-md-6 {
    flex: 0 0 calc(50% - 0.5rem)
  }

  .col-md-7 {
    flex: 0 0 calc(58.333% - 0.5rem)
  }

  .col-md-8 {
    flex: 0 0 calc(66.666% - 0.5rem)
  }

  .col-md-9 {
    flex: 0 0 calc(75% - 0.5rem)
  }

  .col-md-10 {
    flex: 0 0 calc(83.333% - 0.5rem)
  }

  .col-md-11 {
    flex: 0 0 calc(91.666% - 0.5rem)
  }

  .col-md-12 {
    flex: 0 0 calc(100% - 0.5rem)
  }
}

@media (min-width:992px) {
  .col-lg-1 {
    flex: 0 0 calc(8.333% - 0.5rem)
  }

  .col-lg-2 {
    flex: 0 0 calc(16.666% - 0.5rem)
  }

  .col-lg-3 {
    flex: 0 0 calc(25% - 0.5rem)
  }

  .col-lg-4 {
    flex: 0 0 calc(33.333% - 0.5rem)
  }

  .col-lg-5 {
    flex: 0 0 calc(41.666% - 0.5rem)
  }

  .col-lg-6 {
    flex: 0 0 calc(50% - 0.5rem)
  }

  .col-lg-7 {
    flex: 0 0 calc(58.333% - 0.5rem)
  }

  .col-lg-8 {
    flex: 0 0 calc(66.666% - 0.5rem)
  }

  .col-lg-9 {
    flex: 0 0 calc(75% - 0.5rem)
  }

  .col-lg-10 {
    flex: 0 0 calc(83.333% - 0.5rem)
  }

  .col-lg-11 {
    flex: 0 0 calc(91.666% - 0.5rem)
  }

  .col-lg-12 {
    flex: 0 0 calc(100% - 0.5rem)
  }
}
.contenedor-onda {
  position: relative;
  width: 100%;
  height: 42vh;
  overflow: hidden;
}
.contenedor-onda img {
  width: 100%;
  display: block;
  object-fit: cover; 
}    

@media (max-width: 575.98px) {
  .contenedor-onda {
    height: 12vh;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .contenedor-onda {
    height: 15vh;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .contenedor-onda {
    height: 15vh;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .contenedor-onda {
    height: 40vh; 
  }
}
@media (min-width: 1200px) {
  .contenedor-onda {
    height: 45vh; 
  }
}