@charset "UTF-8";
/********* IMPORTING ************/
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;800&display=swap");
/**** Animations *****/
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**** VARIABLE DEFINITION *****/
/*********** TYPOGRAPHY ***************/
/********* TYPOGRAPHY SIZES *************/
.small {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  color: #ffffff; }

.medium {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  color: #fff2f2; }

.large {
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  color: #ffffff; }

body {
  font-family: "Outfit", sans-serif;
  background-color: #2e075d; }

header {
  background-color: #2e075d;
  font-family: "Outfit", sans-serif;
  position: sticky;
  top: 0;
  transition: transform 0.3s ease-in-out;
  opacity: 1; }

/******Efect on the header*******/
.header.hidden {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease; }

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

/********************************/
.container-fluid {
  max-width: 100%;
  background-color: #2e075d; }

.nav-link-custom {
  color: #ffffff;
  font-size: 24px;
  margin: 20px;
  transition: color 0.5s; }

.navbar-nav .nav-item {
  margin: 0 100px; }

.nav-item.nav-link {
  text-decoration: none; }

.nav-link-custom:hover {
  color: #97db29; }

.navbar-logo {
  display: flex;
  align-items: center;
  margin: 0 auto; }

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 1616px; }

/*************** container que disapear *****************/
.background-image {
  background-image: url("images/white-noise.jpg");
  background-size: cover;
  background-position: bottom center;
  position: relative;
  max-width: 100%; }

@media screen and (max-width: 768px) {
  .background-image {
    max-width: 100%;
    /* Ajusta el valor para dispositivos más pequeños */ } }
/*************** background About***********************/
.background-image-about {
  background-image: url("images/group.avif");
  position: relative;
  margin-top: -50px;
  margin-bottom: -50px; }

.bg-body-tertiary {
  --bs-bg-opacity: 0; }

/**************** background Contact********************/
.background-image-contact {
  background-image: url("images/Best.jpg");
  background-size: cover;
  background-position: bottom center;
  padding-top: 10%;
  position: relative;
  max-width: 100%; }

.overlay-container {
  background-color: rgba(66, 31, 129, 0.5);
  margin-top: 779px;
  max-width: 1675px;
  animation: fadeIn 5s; }

.row-contact {
  display: flex;
  align-items: center;
  justify-content: center; }

/*********************** Product page ***********************************/
.product-carousel {
  background-color: #421f81; }

/************************************************************************/
.ribbon-section {
  margin-top: 50px; }
  .ribbon-section .row {
    display: flex;
    /* Mostrar las columnas en una fila flexible */
    flex-wrap: wrap;
    /* Envolver las columnas si no caben en una sola fila */
    justify-content: center;
    /* Centrar las columnas horizontalmente */
    align-items: stretch;
    margin-bottom: 47px; }
    .ribbon-section .row .ribbon-image {
      flex: 1;
      /* Cambio: permite que las columnas ocupen el espacio disponible */
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #885dcf;
      margin: 10px;
      max-width: 300px;
      /* Ajusta el ancho máximo según tus necesidades */ }
      .ribbon-section .row .ribbon-image img {
        max-width: 266px;
        max-height: 266px;
        object-fit: contain; }

/*************** Contact Section *****************/
.contact-section {
  background-color: #421f81;
  /* Cambiar el color de fondo */
  color: #ffffff;
  /* Cambiar el color del texto */ }
  .contact-section .contact-description {
    border-right: 2px solid #b784fc;
    /* Agregar un borde lateral de color */
    padding-right: 20px;
    /* Agregar espacio en el lado derecho */ }
  .contact-section .contact-form {
    background-color: rgba(151, 219, 41, 0.5);
    /* Cambiar el color de fondo del formulario */
    padding: 54px;
    /* Añadir espacio interno */
    border-radius: 22px;
    /* Agregar bordes redondeados */
    margin-bottom: 100px; }
  .contact-section .form-label {
    color: #fff2f2;
    /* Cambiar el color de las etiquetas del formulario */ }
  .contact-section .form-control {
    background-color: #2e075d;
    /* Cambiar el color de fondo de los campos de entrada */
    color: #ffffff;
    /* Cambiar el color del texto en los campos de entrada */
    border-color: #b784fc;
    /* Cambiar el color del borde de los campos de entrada */ }
  .contact-section .btn-primary {
    background-color: #b784fc;
    /* Cambiar el color de fondo del botón */
    border-color: #b784fc;
    /* Cambiar el color del borde del botón */ }
    .contact-section .btn-primary:hover {
      background-color: #9a52fb;
      /* Oscurecer el color del botón al pasar el cursor */
      border-color: #9a52fb;
      /* Oscurecer el color del borde del botón al pasar el cursor */ }

/*********************Contact Page*************************/
form {
  padding: 60px 68px;
  box-shadow: 0 0 20px #6004c3;
  border-radius: 60px;
  text-align: center;
  width: 340px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.input {
  display: flex;
  flex-direction: column;
  text-align: left; }

label {
  color: #fff; }

/*********************Footer*************************/
/*********Palabras en el top del footer******************/
.custom-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 88px;
  /* Espacio entre elementos */ }

.custom-footer-links a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  margin-top: 30px; }

.custom-footer-links a:hover {
  color: #ffcc00;
  /* Cambia a tu color deseado en hover */ }

/*********Social Icons******************/
.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
  /* Espacio entre íconos */
  margin-top: 31px; }

.social-icon {
  max-width: 40px;
  height: auto;
  margin: 5px;
  width: 30px; }

.custom-footer {
  text-align: center;
  color: white;
  font-family: "Outfit", sans-serif; }

footer {
  background-color: #b784fc; }

/***************Cookies*********************/
.cookie-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000; }

.cookie-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }

/*--------------Product Styling --------------------*/
.background-white {
  background-color: white; }

.background-image-product {
  background-image: url("images/productback.jpg");
  background-size: cover;
  background-position: bottom center;
  padding-top: 50%;
  position: relative;
  max-width: 100%; }

.product-column {
  margin: 0%;
  background-color: #bda2e0;
  width: 100%; }

.carousel-item h2 {
  margin-top: 40px;
  margin-bottom: 50px; }
.carousel-item p {
  padding: 9%; }
.carousel-item img {
  border-radius: 6%;
  margin-right: 15px;
  max-height: 250px; }

.section-header {
  margin-top: 40px;
  font-size: 3em;
  color: #333;
  text-align: center; }

.btn-primary {
  color: white;
  background-color: #56CCF2;
  border: none;
  border-radius: .3em;
  font-weight: bold; }

.btn-primary:hover {
  background-color: #2D9CDB; }

.shop-item {
  margin: 30px; }

.shop-item-title {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
  color: #333;
  margin-bottom: 15px; }

.shop-item-image {
  max-height: 250px; }

.shop-item-details {
  display: flex;
  align-items: center;
  padding: 5px; }

.shop-item-price {
  flex-grow: 1;
  color: #333; }

.shop-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }

.cart-header {
  font-weight: bold;
  font-size: 1.25em;
  color: #333; }

.cart-column {
  display: flex;
  align-items: center;
  border-bottom: 1px solid black;
  margin-right: 1.5em;
  padding-bottom: 10px;
  margin-top: 10px; }

.cart-row {
  display: flex; }

.cart-item {
  width: 45%; }

.cart-price {
  width: 20%;
  font-size: 1.2em;
  color: #333; }

.cart-quantity {
  width: 35%; }

.cart-item-title {
  color: #333;
  margin-left: .5em;
  font-size: 1.2em; }

.cart-item-image {
  width: 75px;
  height: auto;
  border-radius: 10px; }

.btn-danger {
  color: white;
  background-color: #EB5757;
  border: none;
  border-radius: .3em;
  font-weight: bold; }

.btn-danger:hover {
  background-color: #CC4C4C; }

.cart-quantity-input {
  height: 34px;
  width: 50px;
  border-radius: 5px;
  border: 1px solid #56CCF2;
  background-color: #eee;
  color: #333;
  padding: 0;
  text-align: center;
  font-size: 1.2em;
  margin-right: 25px; }

.cart-row:last-child {
  border-bottom: 1px solid black; }

.cart-row:last-child .cart-column {
  border: none; }

.cart-total {
  text-align: end;
  margin-top: 10px;
  margin-right: 10px; }

.cart-total-title {
  font-weight: bold;
  font-size: 1.5em;
  color: black;
  margin-right: 20px; }

.cart-total-price {
  color: #333;
  font-size: 1.1em; }

.btn-purchase {
  display: block;
  margin: 40px auto 80px auto;
  font-size: 1.75em; }

/***************Pop Up page*********************/
.confirmation-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #2e075d; }

.overlay-container-popup {
  background-color: rgba(66, 31, 129, 0.5);
  color: white;
  padding: 56px;
  border-radius: 57px;
  text-align: center; }

.large {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  color: #ffffff; }

p {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  color: #ffffff; }

/*# sourceMappingURL=styles.css.map */