body {
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  font-size: 16px; /* Tamaño de fuente base */
}

p.lead {
	font-size:1.25rem;
}

h2 small{
	font-size:2rem;
}

h4.font-weight-bold small{
	font-size:1.75rem;
}

h5.font-weight-bold small{
	font-size:1.5rem;
}

p.lead ul {
	font-size:0.75rem;
}

.container-fluid {
	max-width: 100%
}

.letter-spacing-2 {
  letter-spacing: 2px; 
}

.text-justify {
  text-align: justify;
}

.font-weight-bold {
  font-weight:bold;
}

.font-style-italic {
  font-style: italic;
}

.font-style-underline{
  text-decoration: underline;
  
}

/* Animacion fade in */
.fade-in {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

/* Navbar */

/* Separar los elementos del navbar */
 #navbar a{
 font-size:1rem;
 }

.navbar-nav .nav-link {
  margin-right: 10px;
  margin-left: 10px;
}

.navbar-nav .nav-link {
  font-size: 16px;
  font-weight:200;
  color: #333;
  text-transform: uppercase;
}

.dropdown-menu {
  padding: 0.5rem;
}

.dropdown-item {
  font-size: 17px;
}

/* Galeria Destacados */

.hover-effect {
  transition: transform 0.3s ease;
}

.hover-effect:hover {
  transform: scale(1.05);
}

.destacados {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
}

.slide {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: -0.5%;
}

.slidefijo {
  display: flex;
}

.banner2 {
  margin-top: 4%;
}

.banner5 {
  margin-top: 2%;
}

#left-column .image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#index .image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  
}

#index .image-container img {
  transition: transform 0.2s ease;
  
}

.overlap-container {
  position: relative;
  overflow: hidden;
  height: 100%;

}

.overlap-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/*Cards*/

#tarjetasDaniel.card {
    position: relative;
    width: 300px;
    height: 400px;
}

.card .card_landing {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 10px #000;
    background: linear-gradient(transparent 80%, #000), var(--i);
    background-position: center;
    background-size: cover;
    z-index: 100;
}

.card .card_landing h6 {
    position: absolute;
    bottom: 10px;
    left: 5px;
    font-size: 20px;
    color: #fff;
}

.card .card_infox {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px 5px;
  background: #fff;
  z-index: 90;
  box-shadow: 0 5px 10px #000;
  transition: .5s;
letter-spacing: 0px;
}

.card:hover .card_infox {
  top: 50%;

}

.card_infox .head {
  padding: 5px 0;
  border-bottom: solid 1px #bc8811;
}

.card_infox .head .title {
  font-size: 20px;
  font-weight: 700;
  color: #bc8811;
}

.card_infox .head .description {
  display: flex;
  gap: 5px;
}

.card_infox .head .description .item {
  display: flex;
  gap: 5px;
  align-items: center;
}

.card_infox .head .description .item i {
  color: #bc8811;
  font-size: 15px;
}

.card_infox .head .description .item p {
  font-size: 13px;
}

.card_infox .content {
  margin-top: 70%;
  margin-bottom: 15px;
}

.card_infox .content .list {
  padding: 10px 15px;
}

.card_infox .content .list li {
  font-size: 14px;
  margin-bottom: 5px;
}

.card_infox .action .btn {
  padding: 5px;
  color: #fff;
  width: 100%;
  text-decoration: none;
  text-align: center;
  background: #bc8811;
  display: block;
  margin-top: auto;
}

.card .card_info {
    position: absolute;
    width: 90%;
    height: 90%;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto;
    padding: 5px;
    background: #fff;
    z-index: 90;
    box-shadow: 0 5px 10px #000;
    transition: .5s;
letter-spacing: 0px;
}

.card:hover .card_info {
    left: 100%;
}

.card_info .head {
    padding: 5px 0;
    border-bottom: solid 1px #bc8811;
}

.card_info .head .title {
    font-size: 20px;
    font-weight: 700;
    color: #bc8811;
}

.card_info .head .description {
    display: flex;
    gap: 5px;
}

.card_info .head .description .item {
    display: flex;
    gap: 5px;
    align-items: center;
}

.card_info .head .description .item i {
    color: #bc8811;
    font-size: 15px;
}

.card_info .head .description .item p {
    font-size: 13px;
}

.card_info .content {
    margin-top: 15px;
}

.card_info .content .list {
    padding: 10px 15px;
}

.card_info .content .list li {
    font-size: 14px;
    margin-bottom: 5px;
}

.card_info .action .btn {
    padding: 5px;
    color: #fff;
    width: 100%;
    text-decoration: none;
    text-align: center;
    background: #bc8811;
    display: block;
    margin-top: 5px;
}

.container-card {
  width: 100%;
  display: flex;
  max-width: 1100px;
  margin: auto;
}

.title-cards {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
  color: #7a7a7a;
}

#tarjetasIso.card {
  width: 100%;
  margin: 20px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
  transition: all 400ms ease-out;
  cursor: default;
}

.card:hover {
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-3%);
}

.card img {
  width: 100%;
  height: 210px;
}

.card .contenido-card {
  padding: 15px;
  text-align: center;
}

.card .contenido-card h3 {
  margin-bottom: 15px;
  color: #7a7a7a;
}

.card .contenido-card p {
  line-height: 1.8;
  color: #6a6a6a;
  font-size: 14px;
  margin-bottom: 5px;
}

.card .contenido-card a {
  display: inline-block;
  padding: 10px;
  margin-top: 10px;
  text-decoration: none;
  color: #2fb4cc;
  border: 1px solid #2fb4cc;
  border-radius: 4px;
  transition: all 400ms ease;
  margin-bottom: 5px;
}

.card .contenido-card a:hover {
  background: #2fb4cc;
  color: #fff;
}
/*
.card-semilla {
  background-image: url('assets/img/seed.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.card-abeja {
  background-image: url('assets/img/abeja.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
*/

/* Estilos personalizados para el formulario */

.form-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-group textarea {
  resize: vertical;
  height: 100px;
}

.form-group button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.form-group button:hover {
  background-color: #45a049;
}

/*
Full screen Modal 
*/
.fullscreen-modal .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 1080px;
  margin: auto;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
  color: #7a7a7a;
}

@media (min-width: 768px) {
  .fullscreen-modal .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .fullscreen-modal .modal-dialog {
    width: 820px;
  }
}
@media (min-width: 1200px) {
  .fullscreen-modal .modal-dialog {
     width: 1170px;
  }
}

/* Estilos para las imágenes */

#logoS {
  width: 90px;
  height: 90px;
}

#logoA {
  width: 90px;
  height: 90px;
}

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 70px;
}

#ventana .image-container  {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
}

#ventana .image-container img  {

  width: 80%;
  border: 1px solid #ddd;
  border-radius: 200px;
}

/* Estilos personalizados para la página de capacitaciones y eventos */
.service-container {
  max-width: 800px;
  margin: 50px auto;
  
}

.service-container.lead{
	font-size:1.5rem;
}


.service-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.service-description {
  margin-bottom: 20px;
}

.service-image {
  width: 100%;
  margin-bottom: 20px;
}


/* Media Queries */

@media only screen and (min-width:320px) and (max-width:830px) {
  .container-card {
    flex-wrap: wrap;
  }

  .card {
    margin: 15px;
  }
  
  #ventana {
    display: none;
  } 

}

/* Estilo Logos Clientes */

.image-container .clientes-logos {
  max-height: auto;
  max-width: 100%
}

.img-fluid .logos {
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Estilo Logros */

.rectangle#logros-1 {
  background-color: rgba(66,13,255, 0.3);
  border-radius: 3px;
}

.square#logros-2{
background-color: rgba(100, 100, 100, 0.3);
border-radius: 3px;
}

.square#logros-3{
  background-color: rgba(255,133,31,0.3);
  border-radius: 3px;
}

.rectangle#logros-4 {
  background-color: rgba(115,255,194,0.3);
  border-radius: 3px;
}

.rectangle#logros-5{
  background-color: rgba(40, 212, 55, 0.3);
  border-radius: 3px;
}

.rectangle#logros-6{
  background-color: rgba(212,15,146,0.3);
  border-radius: 3px;
}

/* Footer */

#footer {
  opacity: 0.8;
}

#footer a.btn {
  color: rgba(0, 0, 0, 0.9);
  transition: color 0.2s ease;
}

#footer a.btn:hover {
  color: rgba(0, 0, 0, 0.6);
}

/* Media Queries */
@media (max-width: 820px){
  .col-md-6{
    width: auto;
  }
  #ventana{
  display: none;}
  .text-sm {
  font-size: 12px; /* Ajusta el tamaño de fuente según tus necesidades */
  line-height: 12px; /* Ajusta la altura de línea según tus necesidades */
}
}

