:root{
  --primary-color: #2c2e83;
  --secondary-color: #d10303 ;
}

a:hover{
  text-decoration: none;
}




.mobile-nav-toggle {
  font-size: 1.5rem;
  cursor: pointer;
}
.navbar-toggler-wrapper {
    display: flex;
    align-items: center;
}
.navbar-toggler {
    margin-right: 10px;
}

.service-junoox{
  position: fixed;
  top: 80px; /* Position en haut de la fenêtre avec un espace de 20px */
  right: 20px; /* Position à 20px de la droite de la fenêtre */
  z-index: 1000;

}
.rounded-card{
border-radius: 25px;
width: 18rem;
z-index: 1000;
max-height: 390px; /* Hauteur maximale de la carte */
background-color:#e1e1e2;
display: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
padding: 15px; /* Espacement intérieur */

}



#openCardIcon:hover{
  transform: rotate(180deg);
  transition: ease-in-out 3s;
}


.products{
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10;
}



.products .product{
  width: 40%;
  height: 100%;
  padding: 0rem;
  border-radius: 5px;
  &:hover{
      background-color: #fefdfd;
  }

}

.products .product .product_image{
  width: 100%;
  height: 80%;
  & a {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      & img{
          width: 55%;
          height: 55%;
          object-fit: contain;
      }
  }
}

.products .product .product_name{
  width: 100%;
  height: 20%;
  & a{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      & h4{
          font-size: 11px;
          font-weight: 700;
          color: var(--primary-color);
          padding-bottom: 1rem;
      }
  }
}

 .products .product_button{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  &:hover{
    text-decoration: none;
    color: white !important;
  }
}

@media (max-width: 700px){
  .modal-content {
      padding-right: 1rem;
  }

  .modal-content .content{
      width: 80%;
  }
}

/* my style*/


body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 10px;
    min-width: 200px;
    box-sizing: border-box;
}

.item img {
    max-width: 100%;
    height: auto;
    display: block;
}