@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap");

/* Animation */
@import url("animate.css");

:root {
  --primary-25:#f2fffa; 
  --primary-50: #ebfef6;
  --primary-100: #cffce7;
  --primary-200: #a3f7d3;
  --primary-300: #68edbd;
  --primary-400: #2cdba2;
  --primary-500: #08c18b;
  --primary-600: #009d72;
  --primary-700: #007e5e;
  --primary-800: #02634c;
  --primary-900: #035140;
  --primary-950: #002d24;

  /* Secondary Color */
  --secondary-25: #fffef8;
  --secondary-50: #fffbea;
  --secondary-100: #fff3c5;
  --secondary-200: #ffe587;
  --secondary-300: #ffd248;
  --secondary-400: #ffbd1e;
  --secondary-500: #fc9b04;
  --secondary-600: #d86f00;
  --secondary-700: #b94e04;
  --secondary-800: #963c0a;
  --secondary-900: #7b320c;
  --secondary-950: #471701;

  --font-roboto: "Roboto", sans-serif;
  --font-raleway: "Raleway", sans-serif;
  --font-nunito: "Nunito", sans-serif;
  --main-transition: 0.5s;
}

body {
  font-family: var(--font-raleway);
  font-weight: 500;
}
.custom-shadow{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.custom-shadow-2{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.custom-input {
  outline: none;
  border: 1px solid var(--primary-100);
  background-color: rgb(108, 188, 110, 0.8);
  opacity: 0.7;
  color: #fff;
  border-radius: 30px;
  padding: 10px;
}

/* Form */
.form-input-custom{
  border: 1px solid var(--primary-25);
  outline:none;
  background-color: rgba(0,0,0,0.03);
  border-radius: 10px;
  padding: 5px 10px;
  width: 100%;
}

.form-input-custom-2{
  border: none;
  background-color: rgba(0,0,0,0.03);
  outline:none;
  border-radius: 0;
  padding: 10px 12px;
  width: 100%;
  transition: 0.5s;
}

.form-input-custom::placeholder{
  font-size: 13px;
}

.form-input-custom:focus{
  border: 1px solid var(--primary-700);
}
.form-input-custom-2:focus{
  border: 1px solid var(--primary-500);
}


/* Tables */
table {
  width: 100%;
}
th,
td {
  font-size: 14px;
  white-space: nowrap; /* Empêche le texte de se plier à la ligne suivante */
  /* overflow: hidden; /* Cache le texte qui dépasse */
  /* text-overflow: ellipsis; Ajoute "..." si le texte dépasse la largeur */
}

/* Texts */
h1 {
  font-size: clamp(45px, 5vw, 75px);
}

footer{
  margin-top: 150px;
}

/* Font size */
.fs-7 {
  font-size: 13px;
}

.fs-large-1 {
  font-size: 80px;
}

/* Fonts Bold */
.ft-b-800 {
  font-weight: 800;
}

/* Lines */
.line-green {
  position: relative;
  bottom: 5px;
  display: inline-block;
  height: 2px;
  width: 25px;
  background-color: var(--primary-500);
}

.line-red {
  position: relative;
  bottom: 5px;
  display: inline-block;
  height: 2px;
  width: 25px;
  background-color: var(--secondary-400);
}

/* Icon */
.custom-i{
  position: relative;
  top: 4px;
}

/* Texts Styles */

/* Margin */
.my-6 {
  margin: 100px 0;
}

/* Texts colors */
.cl-primary {
  color: var(--primary-800);
}
.cl-primary-900{
  color: var(--primary-900);
}

.cl-secondary {
  color: var(--secondary-700);
}
.cl-secondary-two {
  color: var(--secondary-500);
}
.cl-secondary-light{
  color: var(--secondary-50);
}

/* Buttons */

.btn-custom-one {
  background-color: var(--primary-800);
  color: var(--secondary-50);
  padding: 5 10px;
  font-weight: 600;
  text-align: center;
}

.btn-custom-one:hover {
  background: none;
  border: 1px solid var(--primary-800);
  color: var(--primary-800);
}
.btn-custom-two {
  background-color: var(--primary-100);
  color: var(--primary-700);
  padding: 2px 7px;
  text-align: center;
}

.btn-custom-two:hover {
  background: none;
  border: 1px solid var(--primary-700);
  color: var(--primary-800);
}

.btn-custom-two-secondary{
  background-color: var(--secondary-50);
  color: var(--secondary-800);
  font-weight: 600;
  padding: 2px 8px;
  text-align: center;
}

.btn-custom-two-secondary:hover {
  background: none;
  border: 1.75px solid var(--secondary-50);
  color: var(--secondary-50);
}

/* Backgrounds */
.bg-800-overlay {
  background-color: var(--primary-800);
  opacity: 0.7;
}
.bg-600-overlay {
  background-color: var(--primary-600);
  opacity: 0.4;
}
.bg-green-light {
  background-color: var(--primary-50);
}
.bg-green-light-25{
  background-color: var(--primary-25);
}
.bg-green-200 {
  background-color: var(--primary-200);
}
.bg-green {
  background-color: var(--primary-500);
}
.bg-secondary-light-25{
  background-color: var(--secondary-25);
}
.bg-secondary-light {
  background-color: var(--secondary-50);
}
.bg-secondary {
  background-color: var(--secondary-500);
}
.bg-secondary-200 {
  background-color: var(--secondary-200);
}
.bg-green-700 {
  background-color: var(--primary-700);
}
.bg-green-900 {
  background-color: var(--primary-900);
}

.bg-green-linear {
  background: rgb(108, 188, 110);
  background: linear-gradient(
    180deg,
    rgba(108, 188, 110, 0.2) 35%,
    rgba(15, 36, 17, 0.8) 100%
  );
}

.bg-green-linear-white {
  background: rgb(108, 188, 110);
  background: linear-gradient(
    180deg,
    rgba(108, 188, 110, 0.1) 60%,
    rgba(243, 250, 243, 1) 100%
  );
}

.bg-red-linear {
  background: rgb(188, 108, 119);
  background: linear-gradient(
    180deg,
    rgba(188, 108, 112, 0.2) 35%,
    rgba(36, 15, 20, 0.8) 100%
  );
}

.b-center {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.shadow-custom {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/* Pagination */
.pagination-icon {
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 50%;
  background-color: var(--primary-400);
  color: #fff;
}

.pagination-integer {
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 50%;
  background-color: var(--primary-200);
  color: var(--primary-600);
}

.pagination-active {
  background-color: var(--primary-600);
  color: #fff;
}
.pagination-icon:hover,
.pagination-integer:hover {
  background-color: var(--primary-600);
  color: #fff;
}

/* Card */
.cart-little{
  height: 350px;
  overflow-y: auto;
}
/* Sweet alert */
.swal2-popup {
  border-radius: 20px;
}

.swal2-styled {
  border-radius: 30px;
  padding: 5px 30px;
}

@media (max-width: 991px) {
  .reverse {
    flex-direction: column-reverse;
  }
}