.btn-banner {
  background-color: rgb(255,255,255);
  color: #00447f;
  border-radius: 20px;
  font-weight: 900;
  border-width: 0px;
  margin-right: 20px;
  font-size: large;
}

@media (min-width: 300px) and (max-width: 360px) {
  .btn-banner {
    font-size: inherit;
    width: 100%;
  }
}

.btn-banner2 {
  background-color: rgb(28,28,28);
  color: #ffffff;
  border-radius: 20px;
  font-weight: 900;
  margin-right: 20px;
  font-size: large;
  border-color: #ffffff;
}

@media (min-width: 300px) and (max-width:576px) {
  .btn-banner2 {
    font-size: inherit;
    width: 100%;
  }
}

.heading-1 {
  color: #ffffff;
  font-weight: bold;
}

@media (min-width: 300px) and (max-width: 800px) {
  .heading-1 {
    text-align: center;
    padding-top: 25px;
  }
}

.hover-card {
  cursor: pointer;
  /*height: 300px;*/
  /*width: 352px;*/
}

.texto-default {
  z-index: 2;
}

.texto-default2 {
  background-color: #00447f;
  height: 120px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.overlay-dark {
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay-hover {
  background-color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  z-index: 3;
  transition: opacity 0.3s ease;
  color: #00447f!important;
}

.hover-card:hover .texto-default {
  opacity: 0;
}

.hover-card:hover .overlay-hover {
  opacity: 1;
}

.heading-2 {
  text-align: left;
  font-size: x-large;
}

.paragraph1 {
  text-align: left;
  font-size: larger;
  color: #00447f;
  width: 75%;
}

@media (min-width: 300px) and (max-width: 576px) {
  .paragraph1 {
    text-align: center;
    font-size: initial;
    width: 100%;
  }
}

.paragraph-card {
  text-align: center;
  font-size: medium;
}

.heading-4 {
  font-size: 50px;
  font-weight: bolder;
  color: #00447f;
}

@media (min-width: 300px) and (max-width: 992px) {
  .heading-4 {
    font-size: 40px;
    text-align: center;
  }
}

.card {
  border-style: none;
  border-radius: 10px;
}

.col-capacidades1 {
  background-color: #1c1c1c;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.col-esg {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-image: url("../../assets/img/aerial-view-of-blue-lakes-and-green-forests-on-a-s-2023-11-27-04-49-54-utc.webp");
  background-size: cover;
  height: 400px;
}

@media (min-width: 300px) and (max-width: 991px) {
  .col-capacidades1 {
    background-color: #1c1c1c;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 20px;
  }
}

@media (min-width: 300px) and (max-width: 991px) {
  .col-esg {
    background-color: #212529;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 20px;
  }
}

.col-capacidades2 {
  background-color: #1c1c1c;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

.col-esg2 {
  background-color: #212529;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
}

@media (min-width: 300px) and (max-width: 991px) {
  .col-capacidades2 {
    background-color: #1c1c1c;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 20px;
  }
}

@media (min-width: 300px) and (max-width: 991px) {
  .col-esg2 {
    background-color: #212529;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 20px;
  }
}

.paragraph-soluciones {
  color: #ffffff;
  font-size: larger;
}

@media (min-width: 300px) and (max-width: 800px) {
  .paragraph-soluciones {
    font-size: larger;
    text-align: center;
  }
}

.heading-capacidades {
  font-size: 50px;
  font-weight: bolder;
}

@media (min-width: 300px) and (max-width: 576px) {
  .heading-capacidades {
    font-size: 40px;
    text-align: center;
  }
}

@media (min-width: 300px) and (max-width:360) {
  .list-capacidades {
    text-align: center;
  }
}

.list-capacidades {
  text-align: inherit;
}

@media (min-width: 300px) and (max-width: 576px) {
  .list-capacidades {
    text-align: center;
  }
}

.paragraph-industrias {
  color: #00447f;
  font-size: larger;
  width: 75%;
}

@media (min-width: 300px) and (max-width: 576px) {
  .paragraph-industrias {
    color: #00447f;
    font-size: larger;
    width: 100%;
    text-align: center;
  }
}

.heading-bemismx {
  color: #00447f;
  font-weight: bold;
  text-align: start;
}

@media (min-width: 300px) and (max-width: 991px) {
  .heading-bemismx {
    color: #00447f;
    font-weight: bold;
    text-align: center;
  }
}

.paragraph-footer {
  text-align: start;
  color: #00447f;
}

@media (min-width: 300px) and (max-width: 992px) {
  .paragraph-footer {
    text-align: center;
    color: #00447f;
  }
}

@media (min-width: 300px) and (max-width: 991px) {
  .heading-industrias {
    font-size: x-large!important;
    text-align: center;
  }
}

.heading-industrias {
  font-size: large;
}

.paragraph-bemismx {
  font-size: initial;
}

@media (min-width: 577px) and (max-width: 991px) {
  .paragraph-bemismx {
    font-size: x-large;
  }
}

@media (min-width: 300px) and (max-width: 576px) {
  .paragraph-bemismx {
    font-size: larger;
  }
}

.btn-banner:hover {
  background: #1c1c1c;
}

.btn-banner2:hover {
  background-color: #ffffff;
  color: #00447f;
}

.btn-idioma.active, btn-idioma:active {
  background-color: #b4b195;
  border-color: #b4b195;
  color: white;
}

.logo-banner {
  width: 45%;
  height: auto;
  padding: 15px;
}

.video-banner {
  /*height: 100vh;*/
  overflow: hidden;
  /*background-color: black;*/
  width: 100vw;
  margin: 0;
  padding: 0;
}

@media (min-width: 300px) and (max-width: 576px) {
  .div-botones {
    display: none!important;
  }
}

.div-botones {
  display: initial;
}

.contenido-banner {
  z-index: 3;
}

@media (min-width: 300px) and (max-width: 767px) {
  .contenido-banner {
    position: relative;
    z-index: 1;
    display: none!important;
  }
}

@media (min-width: 300px) and (max-width: 768px) {
  .col-certificaciones {
    width: 300px;
  }
}

.col-certificaciones {
  width: 200px;
}

.div-multiplay {
  background-color: rgba(33,37,41,0.71);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

@media (min-width: 300px) and (max-width: 768px) {
  .div-multiplay {
    background-color: rgba(33,37,41,0.71);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 20px;
  }
}