body {
  font-family: 'Montserrat';
  text-align: center;
  position: relative;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

.subtitle {
  color: #87CEEB; /* Cambia este valor al color que desees para el texto */
}

p {
  color: #f5f5f5;
}

.feature-paragrahp p {
  text-indent: 30px;
  color: #f5f5f5;
}

#content p {
  color: #333333;
}

/* Headings */

.big-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
  display: none;
}

.little-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
}

.time-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
}

.precio-dollar {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
}

/* containers */

.container-fluid {
  padding: 7% 15%;
}

/* Sections */

.colored-section {
  background-color: #add8e6; /* Cambio de color a un tono azul claro de mar */
  color: #f5f5f5;
}

.white-section {
  background-color: #f5f5f5;
  color: #333333;
}


#Portafolio .jumbotron {
  background-image: url('hombre-negocios-maletin-cuero.jpg');
  background-size: cover;
  background-position: center;
  color: #f5f5f5;
  min-height: 100vh;
}

#trabajosrealizados .jumbotron {
  background-image: url('concepto-arquitectura-portatil-espacio-trabajo.jpg');
  background-size: cover;
  background-position: center;
  color: #f5f5f5;
  min-height: 100vh;
}

.modal-dialog {
  margin: 0;
  height: 100vh; /* Cambiamos 'height: 100%;' a 'height: 100vh;' para ocupar toda la altura de la pantalla */
    width: 100vw; /* Cambiamos 'width: 100%;' a 'width: 100vw;' para ocupar toda la anchura de la pantalla */
  max-width: none;
}

.modal-content {
  height: 100%;
  border: none;
}

.modal-body {
  overflow-y: auto;
}

.img-fluid {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

/* Title Section */

#title .container-fluid {
  text-align: left;
  margin-top: 2%;
  padding: 3% 15% 7%;
  color: #f5f5f5;
}

.des {
  font-size: 1.35rem; /* Tamaño de fuente */
  color: #FFFFFF; /* Texto blanco */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para mayor contraste */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
  padding: 10px; /* Espaciado alrededor del texto */
}

/* Tile Image */

.title-image {
  border-radius: 10%;
  width: 100%;
}

.arrows {
    position: absolute; /* Posiciona el contenedor de las flechas */
    bottom: 20px; /* Distancia desde el fondo de la pantalla */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Ajusta el desplazamiento para centrar */
}

button {
    padding: 10px 15px; /* Tamaño del botón */
    font-size: 20px; /* Tamaño de la fuente */
}

/* Navigation Bar */

#navbar .navbar {
  background-color: rgba(52, 73, 94, 0); /* Start as transparent */
  padding: 1% 14%; /* Ajusta el padding según sea necesario */
  transition: background-color 0.5s ease; /* Smooth transition */
  display: flex; /* Usar flexbox para centrar contenido */
  justify-content: center; /* Centrar horizontalmente */
}

#navbar .container-fluid {
  background-color: rgba(52, 73, 94, 0); /* Start as transparent */
  padding: 1% 14%;
}

#navbar .navbar-brand {
  font-family: "Ubuntu";
  font-size: 2rem; /* Aumentar tamaño para mejor legibilidad */
  font-weight: bold;
}

#navbar .nav-item {
  padding: 0% 20px;
}

#navbar .nav-link {
  font-size: 1.75rem; /* Aumentar tamaño para mejor legibilidad */
  font-family: "Montserrat-light";
  color: #f5f5f5;
}

#navbar .offcanvas-body .nav-link {
  background-color: #f5f5f5;
  align-items: center; /* Cambiar a center para centrar texto */
  font-size: 1.75rem; /* Aumentar tamaño para mejor legibilidad */
  color: #333333;
}

#navbar .offcanvas-body {
  background-color: #f5f5f5;
  line-height: 2;
  align-items: center;
  font-size: 2rem; /* Ajustar tamaño para mejor legibilidad */
  color: #333333;
}

#footeroffcanvas .container-fluid {
  background-color: #f5f5f5;  
  font-size: 1rem;
  color: #333333;
}

/* New styles for opaque navbar */
#navbar .navbar.opaque {
    background-color: rgba(52, 73, 94, 1); /* Fully opaque */
}

/* Destacados */

.feature-box {
  padding: 5%;
}

.icon-features {
  color: #add8e6; /* Cambio de color a un tono azul claro de mar */
  margin-bottom: 1rem;
}

.icon-features:hover {
  color: #64C9CF;
}

#features .offcanvas {
  height: 100vh;
  width: 100vw;
  align-items: center;
}

#features .offcanvas-body {
  height: 100vh;
  width: 100vw;
  background-color: #333333;
  font-size: 1.5rem;
  color: #f5f5f5;
}

#features .offcanvas-title {
  
  background-color: #333333;
  font-size: 2.5rem;
  color: #f5f5f5;
  
}

.btn-custom {
  background-color: #add8e6; /* Cambio de color a un tono azul claro de mar */
  color: #fff; /* Texto en blanco para contraste */
}


/* transitions */

.content1 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show1 {
  opacity: 1;
  transform: translateY(0);
}

.content2 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show2 {
  opacity: 1;
  transform: translateY(0);
}

.content3 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show3 {
  opacity: 1;
  transform: translateY(0);
}

.content4 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show4 {
  opacity: 1;
  transform: translateY(0);
}

.content5 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show5 {
  opacity: 1;
  transform: translateY(0);
}

.content6 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show6 {
  opacity: 1;
  transform: translateY(0);
}

.content7 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show7 {
  opacity: 1;
  transform: translateY(0);
}

.content8 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show8 {
  opacity: 1;
  transform: translateY(0);
}

.content9 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show9 {
  opacity: 1;
  transform: translateY(0);
}

.content10 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show10 {
  opacity: 1;
  transform: translateY(0);
}

.content11 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show11 {
  opacity: 1;
  transform: translateY(0);
}

.content12 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show12 {
  opacity: 1;
  transform: translateY(0);
}

.content13 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show13 {
  opacity: 1;
  transform: translateY(0);
}

.content14 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show14 {
  opacity: 1;
  transform: translateY(0);
}

.content15 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show15 {
  opacity: 1;
  transform: translateY(0);
}

.content16 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show16 {
  opacity: 1;
  transform: translateY(0);
}

.content17 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show17 {
  opacity: 1;
  transform: translateY(0);
}

.content18 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show18 {
  opacity: 1;
  transform: translateY(0);
}

.content19 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show19 {
  opacity: 1;
  transform: translateY(0);
}

.content20 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show20 {
  opacity: 1;
  transform: translateY(0);
}

.content21 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show21 {
  opacity: 1;
  transform: translateY(0);
}

.content22 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show22 {
  opacity: 1;
  transform: translateY(0);
}

.content23 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s, transform 0.5s;
}

.show23 {
  opacity: 1;
  transform: translateY(0);
}


.content24 {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity 0.7s, transform 0.7s;
}

.show24 {
  opacity: 1;
  transform: translateY(0);
}

.content25 {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity 0.7s, transform 0.7s;
}

.show25 {
  opacity: 1;
  transform: translateY(0);
}



/* publicity */

#publicity .container-fluid {
  background-color: #2a6496; /* Cambio de color de fondo a un tono oscuro suave */
  font-size: 1.7em;
}

#publicity .publicity-heading {
  font-size: 3rem;
  line-height: 1.5;
  color: #f0f0f0; /* Cambio del color de las letras a un blanco cálido para relajar la vista */
  margin-top: 1%;
  margin-bottom: 5%;
}

.boton-leer-mas {
            background-color: #FF5733; /* Color naranja */
            color: white; /* Color del texto */
            padding: 10px 20px; /* Espaciado interno */
            border: none; /* Sin borde */
            border-radius: 5px; /* Bordes redondeados */
            font-size: 16px; /* Tamaño de la fuente */
            cursor: pointer; /* Cambia el cursor al pasar por encima */
            text-decoration: none; /* Sin subrayado */
            transition: background-color 0.3s ease; /* Transición suave */
        }

        .boton-leer-mas:hover {
            background-color: #FF2D00; /* Color naranja más intenso al hover */
        }

/* SVG Wave Separation DIV */

#publicity .container-fluid, #pricing .container-fluid {
  flex-basis: 45%;
  height: 100%;
}

#publicity .container-fluid {
  background-color: #2a6496; /* Un azul más oscuro y profundo */
}

#pricing .container-fluid {
  background-color: #1a252f; /* Un gris azulado aún más oscuro */
}

svg {
  background-color: #2a6496; /* Cambiado para que coincida con el color de #pricing */
  width: 10%;
  height: 100%;
}

/* pricing */

#pricing .container-fluid {
  font-size: 1.7em;
  background-color: #1a252f;
}

#pricing .little-heading {
  color: #f5f5f5;
}

#pricing .pricing-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
  color: #f5f5f5;
  margin-top: 10%;
  margin-bottom: 10%;
}

#pricing .card-title {
  text-align: center;
  color: #333333;
}

#pricing .pricing-card-title {
  color: #333333;
}

#pricing .list-unstyled {
  color: #333333;
}

/* testimonial section */

.testimonial-container {
  display: flex; /* Utiliza Flexbox para alinear los elementos */
  align-items: center; /* Centra verticalmente la imagen y el texto */
  justify-content: center; /* Centra horizontalmente los elementos */
  padding: 20px; /* Espacio alrededor del contenedor */
  text-align: center; /* Centra el texto dentro del contenedor */
  padding-top: -30vh;
  padding-right: 40vh;
  padding-left: 40vh;
  /* display: flex;  Utiliza Flexbox para alinear los elementos */
  align-items: center; /* Centra verticalmente la imagen y el texto */
}

.slider__img {
  width: 150px; /* Ajusta el tamaño según sea necesario */
  height: 150px; /* Mantiene la proporción circular */
  margin-right: 15px; /* Espacio entre la imagen y el texto */
  border-radius: 50%; /* Hace que la imagen sea circular */
}

.carousel-item {
  height: auto; /* Permite que la altura se ajuste automáticamente */
}

.carousel-inner {
  height: auto; /* Asegura que el contenedor del carrusel tenga altura adecuada */
}

.text-intense-black {
  color: #000000; /* Negro intenso */
}

.tamaño {
  font-size: 1.5rem; /* Ajusta este valor según tus necesidades */
}

#testimonial .Testimonios {
  font-size: 4rem; /* Tamaño aumentado para el título en pantallas pequeñas */
  margin-top: 5%; /* Espacio superior para separar del contenido */
  margin-bottom: 5%; /* Espacio inferior para separar del contenido */
}



/* Preguntas Frecuentes*/

#faq .container-fluid {
  margin-top: -20%;
  font-size: 1.25em;
  color: #34495e;
}
#faq .container-fluid strong {
  font-size: 1.25em;
  color: #333333;
}

#faq .accordion-button {
  font-size: 1.25em;
}

/* CTA Section */

#solicitud .container-fluid {
  font-size: 1.7em;
  color: #34495e;
}

.cta-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
}

/* sing-up  */

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.top {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.middle {
  border-radius: 0;
  margin-bottom: -1px;
}

.bottom {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#sing-up .container-fluid {

  padding: 1% 15% 1%;
  text-align: center;
  padding: 3% 15% 7%;
  background-color: #34495e;
  background-image: url('cartel-fondo-madera-periodico-manana.jpg');
  background-size: cover;
  background-position: center;
  min-height: 75vh;

}

#sing-up .highlighted-title {
  color: #f5f5f5;
  background-color: red;
  padding: 10px;
  display: inline-block;
}

#blog .little-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.5rem;
  line-height: 1.5;
}

/* footer  */

#footer .container-fluid {
  color: #f5f5f5;
  background-color: #34495e;
  font-size: 1.2em;
  background-image: url('fondo-planeta-tierra (2).jpg');
  background-size: cover;
  background-position: center;
}

#footer p {

  color: #f5f5f5;

}

/* Copywrite  */

#Copyright .container-fluid {
  padding: 5% 7% 10% 15%;
  margin-top: 0%;
}

#Copyright .container-fluid {
  color: #f5f5f5;
  background-color: #34495e;
  font-size: 1.2em;
}

#Copyright p {

  color: #f5f5f5;

}

/* Paginas en Linea */

#Paginas_en_lineas .container-fluid {
  text-align: center;
  padding: 3% 15% 7%;
  background-color: #add8e6; /* Cambio de color a un tono azul claro de mar */
  background-size: cover;
  background-position: center;
  color: #f5f5f5;
  min-height: 50vh;
  color: #333333;
  font-size: 3.5rem;
  line-height: 1.5;
}

/* Trabajos */

#trabajos .modal-body p {
  color: #333333;
  font-size: 1.5rem;
  line-height: 2;
}

#trabajos .modal-body li {
  color: #333333;
  font-size: 1.5rem;
  line-height: 2;
}

/* success */
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.col-md-8 {
  text-align: center;
}

#publicity .img-fluid {
  border-radius: 40%;
}

#publicity .pubblicity-title {
  margin-top: 15%
}

#blog .img-fluid {
  border-radius: 40%;
}

.align-left {
  float: left;
  margin-right: 20px;
 }
 
 .align-right {
  float: right;
  margin-left: 20px;
 }
 
 .slide-in {
  opacity: 0;
  transition: all .5s;
 }
 
 .align-left.slide-in {
  transform: translateX(-30%) scale(0.95);
 }
 
 .align-right.slide-in {
  transform: translateX(30%) scale(0.95);
}
 
 .slide-in.active {
  opacity: 1;
  transform: translateX(0%) scale(1);
 }

#articulos .articulo p {
  color: #333333;
}

#post .articulo p {
  color: #333333;
}

@media (max-width: 1080px) {

  #title {
    
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    
  }

  .big-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.8rem;
    line-height: 1.5;
    display: none;
  }

  .time-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    line-height: 2;
  }

  #title .col-lg-6 {
    text-align: center;
  }

  .navbar-brand {
    text-align: center;
  }

  #navbar .d-none .d-md-block {
    display: none;
  }

  .navbar-nav {
    flex-direction: column;
    /* align-items: flex-start; */
  }

  .ms-auto {
    margin-left: auto;
    margin-right: 0;
  }

  .cta-heading {
    text-align: center;
  }

  .little-heading {
    text-align: center;
  }

  .title-image {
    margin-top: 8%;
  }

  #publicity .little-heading {
    text-align: center;
  }

  #footer .nav {
    text-align: center;
  }

   #footer p {
     font-size: medium;
   }
   
}

/* Media Queries para pantallas medianas y pequeñas */
@media (max-width: 1080px) {
  .testimonial-container {
    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    align-items: center; /* Centra horizontalmente los elementos en columna */
    padding: 10px; /* Reduce el padding en pantallas pequeñas */
    /* padding-top: -30vh; */

  }

  .slider__img {
    margin-bottom: 10px; /* Añade espacio debajo de la imagen en vista móvil */
    margin-right: 0; /* Elimina el margen derecho en vista móvil */
  }

  .tamaño-titulo {
    font-size: 1.5rem; /* Reduce el tamaño del título en pantallas pequeñas */
    margin-top: 5%; /* Ajusta el margen superior en pantallas pequeñas */
    margin-bottom: 3%; /* Ajusta el margen inferior en pantallas pequeñas */
  }

  #faq .container-fluid {
    margin-top: -50%;
    font-size: 1.25em;
    color: #34495e;
  }

}

@media (max-width: 1300px) {
  .testimonial-container {
    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    align-items: center; /* Centra horizontalmente los elementos en columna */
    padding: 10px; /* Reduce el padding en pantallas pequeñas */
    /* padding-top: -30vh; */
}
  #faq .container-fluid {
    margin-top: -40%;
    font-size: 1.25em;
    color: #34495e;
  }

}
@media (max-width: 800px) {
  .testimonial-container {
    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    align-items: center; /* Centra horizontalmente los elementos en columna */
    padding: 10px; /* Reduce el padding en pantallas pequeñas */
    /* padding-top: -30vh; */
}
  #faq .container-fluid {
    margin-top: -80%;
    font-size: 1.25em;
    color: #34495e;
  }

}
@media (max-width: 500px) {
  .testimonial-container {
    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    align-items: center; /* Centra horizontalmente los elementos en columna */
    padding: 10px; /* Reduce el padding en pantallas pequeñas */
    /* padding-top: -30vh; */
}
  #faq .container-fluid {
    margin-top: -70%;
    font-size: 1.25em;
    color: #34495e;
  }

}

@media (max-width: 300px) {
  .testimonial-container {
    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
    align-items: center; /* Centra horizontalmente los elementos en columna */
    padding: 10px; /* Reduce el padding en pantallas pequeñas */
    /* padding-top: -30vh; */
}
  #faq .container-fluid {
    margin-top: -130%;
    font-size: 1.25em;
    color: #34495e;
  }

}