/*Inicio video de fondo del modal index.php*/

.video-bg-container {
  position: relative;
  overflow: hidden;
}

.video-bg-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
  opacity: 0.9; 
}

.video-bg-content {
  position: relative;
  z-index: 1;
}
/*Fin video de fondo del modal index.php*/




/**/
.video-bg-container-nuestraHistoria1 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    z-index: 0;
}

.content-overlay {
    position: relative;
    z-index: 1;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .content-overlay {
        padding: 2rem 1rem;
    }

    .my-title-1 {
        font-size: 1.8rem;
    }

    .content-overlay p {
        font-size: 0.95rem;
    }
}


/**/
		
		
		a {
			text-decoration: none;
		}
		
		
		.navbar, .footer1 {
            background-color: #d7c7ae;
        }
		
		.footer2{
			background-color: #9c8f7a;
		}
		
		.logo1{
			color: #71a240;
		}
        
        .my-link{
            font-family: Arial;
            font-weight: bold;
            font-size: 25px;
        }
		
		.my-link-logo{
            font-family: Arial;
            font-weight: bold;
            font-size: 25px;
        }
        
        .my-active{
            font-family: Arial;
            font-weight: bold;
            font-size: 25px;
            color: #71a240;
        }
        
        .my-link:hover{
            color: #71a240;
        }

        /* Estilo del contenedor */
        .icon-login {
            display: flex;
            align-items: center;
            gap: 10px; /* Espacio entre ícono y texto */
        }

        /* Estilo del enlace */
        .icon-login a {
            text-decoration: none;
            font-size: 25px;
            font-weight: bold;
            color: #121331;
            transition: color 0.3s;
        }

        /* Cambio de color al pasar el mouse */
        .icon-login a:hover {
            color: #08a88a;
        }

        /* Estilo del globo con la cantidad */
        .cart-bubble {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #08a88a;
            color: white;
            border-radius: 50%;
            padding: 5px 10px;
            font-size: 7px;
            font-weight: bold;
        }



		
	.my-bg-1 {
            width: 100%;
            height: 100%;
            background-image: url("images/cielo_atardecer.jpg");
            background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
            background-position: center; /* Centra la imagen */
    }
	
	.my-bg-2 {
            width: 100%;
            height: 600px;
			background-color: #08a88a;
            /*background-image: url("view/images/cielo_atardecer.jpg");*/
            /*background-size: cover;*/ /* Ajusta la imagen al tamaño del contenedor */
            /*background-position: center;*/ /* Centra la imagen */
    }
	
	.my-bg-1-NuestraHistoria{
            width: 100%;
            height: 100%;
            background-image: url("utilities/bosque.jpg");
            background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
            background-position: center; /* Centra la imagen */
	}
	
	.my-bg-2-NuestraHistoria{
            /*width: 100%;
            height: 100%;*/
            background-image: url("utilities/bandera_NacionGlu.png");
            background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
            background-position: center; /* Centra la imagen */
	}
	
	.my-bg-3-NuestraHistoria{
            /*width: 100%;
            height: 100%;*/
            background-image: url("utilities/bandera_EcoGlu.jpeg");
            background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
            background-position: center; /* Centra la imagen */
	}
	
	.my-bg-4-NuestraHistoria{
            width: 100%;
            height: 100%;
            background-image: url("utilities/bandera_NacionGlu_crema.jpg");
            background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
            background-position: center; /* Centra la imagen */
	}

	.bg_1{
            width: 100%;
            height: 100%;
            background-image: url("utilities/bg_4.png");
			/*background-color: #71a240;*/
            background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
            background-position: center; /* Centra la imagen */
	}
	
	
	
	.my-title-1{
		padding-top: 5%;
        font-family: Arial;
        font-weight: bold;
        font-size: 50px;
	}
	
	.my-title-2{
		padding-top: 3%;
        font-family: Arial;
        font-weight: bold;
        font-size: 40px;
	}
	
	.my-title-3{
		padding-top: 3%;
        font-family: Arial;
        font-weight: bold;
        font-size: 30px;
	}
	
	.my-title-4{
		padding-top: 3%;
	    font-family: Arial;
        font-weight: bold;
        font-size: 20px;
	}
	
	.my-title-5{
		padding-top: 10%;
	    font-family: Arial;
        font-weight: bold;
        font-size: 15px;
	}
	
	.my-bg-Eucalipto{
        width: 100%;
        height: 100%;
        background-image: url("images/fondo_eucalipto.jpg");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */		
	}
	
	.my-bg-Lavanda{
		width: 100%;
        height: 100%;
        background-image: url("images/fondo_lavanda.jpg");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */	
	}
	
	.my-bg-Menta{
		width: 100%;
        height: 100%;
        background-image: url("images/fondo_menta.jpg");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */	
	}
	
	.my-bg-Romero{
		width: 100%;
        height: 100%;
        background-image: url("images/fondo_romero.jpg");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */	
	}
	
	.my-bg-Sabila{
		width: 100%;
        height: 100%;
        background-image: url("images/fondo_sabila.jpg");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */	
	}
	
	.my-bg-Naranja{
		width: 100%;
        height: 100%;
        background-image: url("images/fondo_naranja.jpg");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */	
	}
	
	.my-bg-Curcuma{
		width: 100%;
        height: 100%;
        background-image: url("images/fondo_curcuma.webp");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */	
	}
	
	.my-bg-Limon{
		width: 100%;
        height: 100%;
        background-image: url("images/fondo_limon.jpg");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */	
	}

	.my-bg-carbon-activado-y-menta{
		width: 100%;
        height: 100%;
        background-image: url("images/fondo_coco.jpg");
        background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
        background-position: center; /* Centra la imagen */	
	}
	
	.my-bg-modal{
		border-radius: 2%;
		background-color: rgba(255, 255, 255, 0.8); /* Blanco con 80% de opacidad */
		margin: auto;
		position: relative;
		padding: 15px;
	}
	
	
	/* Media query para pantallas más pequeñas que 379px de ancho y 616px de alto */
	@media (max-width: 378px) and (max-height: 615px) {
		.my-title-1 {
			font-size: 25px !important; /* Forzar el cambio */
		}
	}
		
	.text-justify{
		text-align: justify;
	}
	
	.text-orange{
		color: orange;
	}
	
	.text-small{
		font-size: 10px;
	}
	
	.text-medium{
		font-size: 12px;
	}
	
	.text-large{
		font-size: 14px;
	}
	
	.my-text-success{
		color: #08a88a;
	
	}
	
	.my-bg-warning{
		border-color: #BB8964; 
		background-color: #BB8964;
	}
	
		/*Inicio zoom al pasar el mouse sobre la imagen*/
		.card-img-container {
			position: relative;
			overflow: hidden; /* Evita que la imagen se desborde */
			width: 100%; /* Asegura que el contenedor tome todo el ancho disponible */
			height: 100%; /* Asegura que el contenedor tome todo el alto disponible */
		}

		.card-img-top {
			transition: transform 0.3s ease; /* Transición suave */
			width: 100%; /* Mantén el ancho completo de la imagen */
			height: auto; /* Ajusta la altura automáticamente */
		}

		.card-img-container:hover .card-img-top {
			transform: scale(1.1); /* Aumenta el tamaño de la imagen */
		}
		/*Fin zoom al pasar el mouse sobre la imagen*/


		/*Inicio de background colores card*/
		.bg-eucalipto{
			background-color: #9bbc7e;
		}
		
		.bg-lavanda{
			background-color: #cc69e3;
		}
		
		.bg-menta{
			background-color: #a3e0c6;
		}
		
		.bg-romero{
			background-color: #328d99;
		}
		
		.bg-savila{
			background-color: #2f9a42;
		}
		
		.bg-curcuma-y_vainilla{
			background-color: #cd911e;
		}
		
		.bg-limon{
			background-color: #d7df00;
		}
		
		.bg-naranja{
			background-color: #ff8f46;
		}

		.bg-carbon-activado-y-menta {
			background-color: #953434;
		}
		
		/*Fin de background colores card*/
		
		.carousel-img {
		  height: 500px; /* Ajusta según necesidad */
		  object-fit: cover;
		}
		
		.myLink{
			text-decoration: none;
			color: white;
		}

		.myLink-tienda{
			text-decoration: none;
			color: black;
		}
		
		.myLink:hover{
			color: #08a88a;
			font-weight: bold;
		}
		
		.myIconFooter{
			font-size: 25px;
			text-decoration: none;
			color: white;
		}

		.myIconFooter:hover{
			color: #08a88a;
			font-weight: bold;
		}




		.scale-up-center {
			-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
					animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
		}


/* ----------------------------------------------
 * Generated by Animista on 2025-4-2 14:32:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-up-center {
	0% {
	  -webkit-transform: scale(0.5);
			  transform: scale(0.5);
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
  }
  @keyframes scale-up-center {
	0% {
	  -webkit-transform: scale(0.5);
			  transform: scale(0.5);
	}
	100% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	}
  }
  
  /*Incio contador*/
  .quantity-container {
	max-width: 200px;
  }
  .quantity-input {
	text-align: center;
  }
  /*Fin contador*/


  /*Inicio iframe PDF*/
  .iframe-responsive {
    width: 100%;
    aspect-ratio: 700 / 425; /* mantiene la proporción original */
    max-width: 100%;
  }

  .iframe-responsive iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  /*Fin iframe PDF*/

  /*Inicio botón wsp*/
  .btn-wsp{
	position: fixed;
	width: 55px;
	height: 55px;
	line-height: 55px;
	bottom: 30px;
	right: 30px;
	background: #0df053;
	color: #fff;
	border-radius:50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
	z-index:100; 
  }

  .btn-wsp:hover{
	color: #0df053;
	background: #fff;
  }
  /*Fin botón wsp*/