@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Light.eot');
  src: url('../fonts/Gotham-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gotham-Light.woff2') format('woff2'),
    url('../fonts/Gotham-Light.woff') format('woff'),
    url('../fonts/Gotham-Light.ttf') format('truetype'),
    url('../fonts/Gotham-Light.svg#Gotham-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham Black';
  src: url('../fonts/Gotham-Black.eot');
  src: url('../fonts/Gotham-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gotham-Black.woff2') format('woff2'),
    url('../fonts/Gotham-Black.woff') format('woff'),
    url('../fonts/Gotham-Black.ttf') format('truetype'),
    url('../fonts/Gotham-Black.svg#Gotham-Black') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham Bold';
  src: url('../fonts/Gotham-Bold.eot');
  src: url('../fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Gotham-Bold.woff2') format('woff2'),
    url('../fonts/Gotham-Bold.woff') format('woff'),
    url('../fonts/Gotham-Bold.ttf') format('truetype'),
    url('../fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Gotham", sans-serif;
  background-color: #FBF7F3;
  color: #627d77;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Gotham Black", sans-serif;
}

strong {
  font-family: "Gotham Bold", sans-serif;
}

.gotham {
  font-family: "Gotham", sans-serif;
}

.primary {
  color: #00aedb;
}

.secondary {
  color: #ecc100;
}

.green {
  color: #69be28;
}

.grey {
  color: #696666;
}

.fs-22 {
  font-size: 22px;
}

hr.yellow {
  opacity: 1;
  border-color: #ecc100;
}

hr.green {
  opacity: 1;
  border-color: #69be28;
}

hr.white {
  opacity: 1;
  border-color: #ffffff;
}

.my-100 {
  margin: 100px 0 100px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mt-100 {
  margin-top: 100px;
}

.btn {
  border-radius: 0;
  font-family: "Gotham Bold", sans-serif;
}

.btn-primary {
  background: #00aedb;
  border-color: #00aedb;
}

.btn-outline-light {
  border-width: 2px;
}

.bg-celeste {background: #58b7ddd6;}

#hero {
  height: 100vh;
  background: #ecc100 url(../img/bg-genneia-reporte-05.svg) bottom right no-repeat;
  background-size: 100%;
}

#hero .bg-celeste {width: min-content;}
#hero .bg-celeste h1 {width: max-content;}
#hero .text-white {text-shadow: 3px 3px 1px rgba(60, 60, 60, 0.6);}
#banner {
  padding: 150px 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(76, 163, 66, 0.6)), url(../img/carusel/banner-01.jpg) center center no-repeat;
  background-size: cover;
}

#banner-02 {
  padding: 150px 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/carusel/banner-02.jpg) center center no-repeat;
  background-size: cover;
}

#banner-03 {
  padding: 150px 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/carusel/img-genneia-11.jpeg) center center no-repeat;
  background-size: cover;
}

#mapa {
  padding: 100px 0;
  background: #FBF7F3;
}

#gestion {
  padding: 150px 0 100px;
  background: #00aedb url(../img/bg-genneia-reporte-01.svg) left bottom no-repeat;
  background-size: 40%;
}

#esg .letter {
  width: 100%;
  height: 130px;
  background: white;
  border: 10px solid #69be28;
}

#esg .icon {
  top: 0;
  width: 130px;
  height: 130px;
  position: absolute;
  background: white;
  border: 10px solid #ecc100;
  transform: translate(0, -50%);
}

#esg .icon-bottom {
  bottom: 0;
  width: 130px;
  height: 130px;
  position: absolute;
  background: white;
  border: 10px solid #ecc100;
  transform: translate(0, 50%);
}

#objetivos {
  padding: 200px 0 100px;
  background: #FAF8F1 url(../img/bg-genneia-reporte-02.svg)left bottom no-repeat;
  background-size: 40%;
}

.slider div {
  background-position: center;
  background-size: cover;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 400px;
  /** HEIGHT : WIDTH x 100 **/
}

.slider div.one {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-00.jpg');
}

.slider div.two {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-01.jpg');
}

.slider div.three {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-02.jpg');
}

.slider div.four {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-03.jpeg');
}

.slider div.five {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-04.jpeg');
}

.slider div.six {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-05.jpeg');
}

.slider div.seven {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-06.jpg');
}

.slider div.eight {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-07.jpg');
}

.slider div.nine {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-08.jpg');
}

.slider div.ten {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/carusel/img-genneia-09.jpg');
}

.slider .box-slider {
  top: 5%;
  transform: translate(0, -50%);
  width: 100%;
  position: absolute;
}

.slider .box-slider p {
  width: 70%;
  line-height: 1.4;
}

.slider .box-slider strong {
  font-size: 28px;
  line-height: 1.2;
}

@media only screen and (max-width: 600px) {
  .h-100 {height: auto !important;}
  #hero {background-size: contain;}
  #objetivos {background: none;}
  .slider .box-slider p {
    width: 90%;
  }
}

.owl-theme .owl-nav {
  top: 50%;
  width: 100%;
  display: flex;
  margin-top: 0;
  position: absolute;
  justify-content: space-between;
}

.owl-theme .owl-nav [class*=owl-] {
  font-size: 40px !important;
  color: white !important;
}

.owl-theme .owl-dots {
  width: 100%;
  margin-top: -40px;
  position: absolute;
}


.service {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 220px;
	width: 100%;
	position: relative;
	transform-style: preserve-3d;
	perspective: 700px;
}

.flip-card-front {
  height: 100%;
  width: 100%;
	transition: 0.7s;
  background: #69be28;
	transform: rotateX(0deg);
	transform-style: preserve-3d;
}

.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transform: rotateX(-180deg);
	background-image: linear-gradient(45deg, rgb(36, 36, 36), rgb(71, 71, 71));
	transition: 0.7s;
}

.service:hover .flip-card-back {transform: rotateX(0deg);}
.service:hover .flip-card-front {transform: rotateX(180deg);}


.speech-bubble {
  background: white;
  display: inline-block;
  margin-bottom: 1em;
	position: relative;
	vertical-align: top;
}

.speech-bubble:after {
	border: 3em solid transparent;
	border-top-color: white;
	content: '';
	margin-left: -1em;
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
}

.speech-bubble img {
  top: -50px;
  right: 50px;
  width: 100px;
  position: absolute;
}

/* Keep the historical hero readable on narrow screens. */
@media (max-width: 575.98px) {
  #hero h1 { font-size: clamp(1.4rem, 6vw, 2rem); }
  #hero .d-flex { flex-wrap: wrap; gap: .75rem; }
  #hero .btn { margin-right: 0 !important; }
}