@font-face {
  font-family: 'montserrat';
  src: url('../assets/fonts/montserrat/Montserrat-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'montserrat';
  src: url('../assets/fonts/montserrat/Montserrat-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'montserrat';
  src: url('../assets/fonts/montserrat/Montserrat-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'montserrat';
  src: url('../assets/fonts/montserrat/Montserrat-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'montserrat';
  src: url('../assets/fonts/montserrat/Montserrat-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

:root {
  --nav-color:#d6c6a2;
  --footer-color:#222B49;
  --navbar-height: 0px;
}


html, body {
  height: 100%;
  margin: 0;
}
body {
  font-family: "montserrat" , sans-serif;
  display: flex;
  flex-direction: column;
}
p{
  margin-bottom: 0 !important;
}
.content {
  flex: 1 0 auto;
}
footer {
  flex-shrink: 0;
  background-color: var(--footer-color);
  
}

.main-container{
  font-weight: lighter;
  position: relative;
  height: 100%;
  z-index: 10;
}

.main-title{
  position: relative;
  text-align: center;
  padding: 70px 0;
  color: white;
  z-index: 1000;
}

.main-title > h2{
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}

.main-title::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

.navbar{
    background-color: var(--nav-color);
    min-height: 90px;
}

.navbar-nav .nav-link {
  text-transform: uppercase;
  font-family: "montserrat", sans-serif;
  font-weight: 600;
  position: relative;
  color: #222b49; /* Color del texto del menú */
  font-size: 14px;
}

  /* Estilo para el pseudo-elemento que será la raya debajo */
.navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: white; /* Color de la línea */
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

/* Estilo hover para animar la raya */
.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link:focus::before {
  visibility: visible;
  width: 100%;
}
.nav-link.active::after{
  content: '';
  position: absolute ;
  width: 100%;
  height: 3px;
  bottom: 0 ;
  left: 0;
  background-color: white;
}

.accordion-button {
  background-color: #f7f7f7;
  color: white;
  border-radius: 0 !important;
}

.accordion-button.collapsed {
  background-color: #f7f7f7;
}

.accordion-body {
  background-color: #f7f7f7;
  color: #343a40;
  border-top: 1px solid #007bff;
}

.accordion-item {
  border: 0 !important;
  margin-bottom: 3px !important;
}


.gallery-container,
.wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 90px); /* Ocupa toda la altura de la pantalla */
  overflow: hidden;
}

.gallery-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  background-size: cover;
  background-position: center;
}

  /* Activo para la imagen visible */
.gallery-slide.active {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
}

.gallery-text{
  position: absolute;
  top: 30%;
  color: white;
  transform: translateY(-30%);
}

.gallery-text h2{
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  font-weight: 500;
}

.gallery-text a{
  font-weight: 500;
  text-transform: uppercase;
}

.bg-why-choose-us{
  position: absolute;
  background-image: url('../assets/images/why-choose-us.png');
  background-size: cover;
  background-position:center;
  width: 100%;
  height: 100%;
}

.bg-why-choose-us::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, black, transparent);
  pointer-events: none;
}

.why-choose-us-text{
  font-weight: 300;
  position: absolute;
  top: 30%;
  color: white;
  transform: translateY(-30%);
}

.why-choose-us-text > h2{
  text-transform: uppercase;
  font-weight: 600;
}

.why-choose-us-text > h6{
  font-weight: 600;
}

.why-choose-us-text > ul{
  list-style-position: inside;
}

.why-choose-us-text span {
  font-weight: 500;
}

.wwa{
  padding:6rem 0;
}

.bg-title-wwa::after{
  content: '';
  position: absolute;
  background-image: url('../assets/images/bg-who-we-are.png');
  background-size: cover;
  background-position:center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

.custom-img{
  border-radius: 100%;
  border: 1px solid #d6c6a2;
  padding: 12px;
}
/*our services*/

.bg-title-s::after{
  content: '';
  position: absolute;
  background-image: url('../assets/images/bg-our-services.png');
  background-size: cover;
  background-position:center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

.wrapper-services{
  padding: 3rem 0;
}

.row-service{
  position: relative;
  z-index: 1;
}

.row-service::before{
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 90%;
  height: 100%;
  background-color: var(--nav-color);
  opacity: 0.1;
  z-index: -1;
}

.service-content:nth-child(2) .row-service::before{
  left: 0;

}

.text-service ul{
  list-style: none;
}

.text-service ul li span {
  font-weight: 500;
}

.btn-read-more{
  border: 1px solid var(--nav-color);
  background-color: white;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn-read-more:hover{
  background-color: var(--nav-color);
  color: white;
  border: 1px solid var(--nav-color);
}

#modal-content{
  list-style: none;
}
#modal-content li {
  margin-bottom: 1rem;
}
#modal-content li span{
font-weight: 500;
}

.bg-title-git::after{
  content: '';
  position: absolute;
  background-image: url('../assets/images/get-in-touch.jpg');
  background-size: cover;
  background-position:center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

.git-container{
  padding: 6rem 0;
}

.accordion-list{
  list-style-position: inside;
}

.hmq-content{
  position: relative;
  padding: 3rem 0;
}

.hmq-content::before{
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--nav-color);
  opacity: 0.1;
  z-index: -1;
}

.hmq-content h5{
  color: var(--footer-color);
}
.contacts-footer > a{
  background-color: #ffffff;
    color: #282c34; 
    border-radius: 50%; 
    padding: 10px; 
    font-size: 1rem; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; 
}

footer a {
  color: white;
  text-decoration: none;
}

.hmq-content h5{
  color: #6c6c6c;
}

.hmq-content i{
  background-color: #ffffff;
    color: var(--footer-color);
    border: 1px solid #bbb;
    border-radius: 50%; 
    padding: 1.5rem; 
    font-size: 1rem; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; 
}
.hmq-content span{
  font-weight: 600;
}
.hmq-content a{
  text-decoration: none;
  color: black;
}
.copyright{
  background-color: #383838;
}

@media (min-width: 992px) {

  .border-left{
      border-left: 1px solid white;
  }

  
}

@media (max-width: 992px) {
  .row-service::before{
    content: none;
  }
  .navbar-nav .nav-link {
    display: inline-block;
    width: auto; /* Ajusta el ancho automáticamente al tamaño del texto */
    padding-left: 0;
    padding-right: 0;
  }
  .navbar-nav .nav-item {
    text-align: center; /* Alinea el texto en el centro */
    width: 100%; /* Asegura que los elementos ocupen el 100% del ancho disponible */
  }
}

@media (max-width: 768px) {
  
}