/* Bootstrap 3 style spacing utilities for padding and margin */
/* Supports: pl-, pr-, pt-, pb-, px-, py-, ml-, mr-, mt-, mb-, mx-, my- */
/* Sizes: 0, 5, 10, 15, 20, 30, 40, 50 (in px) */
/* Responsive: -xs, -sm, -md, -lg */

:root {
  --sp-0: 0px;
  --sp-5: 5px;
  --sp-10: 10px;
  --sp-15: 15px;
  --sp-20: 20px;
  --sp-30: 30px;
  --sp-40: 40px;
  --sp-50: 50px;
  --sp-60: 60px;
  --fs-1: 36px;
  --fs-2: 30px;
  --fs-3: 24px;
  --fs-4: 18px;
  --fs-5: 14px;
  --fs-6: 12px;
}

/* Helper mixin (for reference, not CSS):
@mixin spacing($prop, $dir, $size) {
    .#{$prop}#{$dir}-#{$size} { #{$prop}-#{$dir}: var(--sp-#{$size}) !important; }
}
*/
body.custom-home{
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 80% 32%, rgba(95, 95, 90, 0.35) 0%, transparent 28%),
    radial-gradient(circle at 22% 72%, rgba(0, 0, 0, 0.65) 0%, transparent 30%),
    radial-gradient(circle at 70% 92%, rgba(95, 95, 90, 0.28) 0%, transparent 35%),
    radial-gradient(circle at 45% 45%, rgba(70, 70, 68, 0.35) 0%, transparent 45%),
    linear-gradient(180deg, #141615 0%, #2b2d2b 42%, #151716 100%) !important;
  //background-attachment: fixed !important;
}
/* Carousel class */
.social-icons {
}
.social-icons .icon-social {
  max-width: 35px;
}
.logo_footer .img-responsive {
  max-width: 200px;
}
#section-contact .social{
  display: flex;
  text-align: center;
  place-content: space-evenly;
}
.social-icon{
  
}
.social-icon i{
  font-size: 25px;
}
.cursor-pointer {
  cursor: pointer !important;
}
.custom-carousel .carousel-indicators {
}
.custom-carousel .carousel-indicators li {
  background-color: #fff !important;
  border: 1px solid #000 !important;
  width: 18px;
  height: 18px;
  margin: 0 5px;
}
.custom-carousel .carousel-indicators li::marker {
  display: none !important;
  content: "";
}
.custom-carousel .carousel-indicators li.active {
  background-color: #0069b2 !important;
  border-color: #0069b2 !important;
}
.custom-carousel .carousel-control {
  opacity: 1;
  background-image: none !important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.custom-carousel .carousel-control svg {
}
.custom-carousel .carousel-control.left {
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  margin-left: -50px;
}
.custom-carousel .carousel-control.left:hover {
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}
.custom-carousel .carousel-control.right {
  background-image: -webkit-linear-gradient(
    right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  margin-right: -50px;
}
.custom-carousel .carousel-control.right:hover {
  background-image: -webkit-linear-gradient(
    right,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}
.custom-carousel#carousel-categorie img {
  object-fit: cover;
  max-width: 100px;
}
.custom-carousel#carousel-categorie p {
}
.custom-carousel#carousel-categorie:hover img {
}
.custom-carousel#carousel-categorie:hover p {
}
.custom-carousel#carousel-categorie .box-categoria {
  background-image: -webkit-linear-gradient(
    top,
    transparent 75%,
    transparent 100%
  );
  box-shadow: 0px 0px 10px 0px rgba(0 0 0 / 20%);
  border: 1px solid #808080;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.custom-carousel#carousel-categorie .box-categoria:hover {
  /*background-image: -webkit-linear-gradient(top, #0097db 75%, transparent 100%);*/
  background-color: #e3edf7 !important;
}
.support-block {
  background-image: -webkit-linear-gradient(
    left,
    #009fe3 30%,
    #000e1f 80%
  );
}
.support-block .support-grid {
}
.support-block .support-item {
}
.support-block .support-item .support-item-container {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.support-block .support-item .support-item:hover .support-icon {
}
.support-block .support-item .support-icon svg {
}
.support-block .support-item .support-content {
  line-height: normal;
}
.support-block .support-item .support-content .support-label {
}
.support-block .support-item .support-content .support-desc {
}
.support-block .support-item:hover {
}
.support-block .support-item:hover .support-item-container {
  background-image: -webkit-linear-gradient(
    left,
    #005b95 0%,
    #0075bc 13.5%,
    #1e9ad5 43.2%
  );
  color: #fff !important;
  border-color: #fff !important;
}
.support-block .support-item:hover .support-icon {
}
.support-block .support-item:hover .support-icon svg {
}
.support-block .support-item:hover .support-icon svg path {
  stroke: #fff !important;
}
.support-block .support-item:hover .support-content {
}
.support-block .support-item:hover .support-content .support-label {
}
.support-block .support-item:hover .support-content .support-desc {
}
.support-block.newsletter {
}
.support-block.newsletter > .row:before {
  display: none;
}
.support-block.newsletter h2 {
  line-height: normal;
}
.support-block.newsletter form {
}
.support-block.newsletter form .form-control::placeholder {
  color: #000;
}
.support-block.newsletter form .form-control {
  color: #000;
}
.support-block .errore {
  border: 2px solid #dc3545;
}
.support-block.newsletter form .btn {
  padding: 5px;
  right: 20px;
  top: 6px;
}
.support-block.newsletter form .btn svg {
  width: 15px;
}
.support-block.newsletter form .btn svg path {
}
.support-block.newsletter form .btn:hover {
}
.support-block.newsletter form .btn:hover svg {
}
.support-block.newsletter form .btn:hover svg path {
}
.support-block.newsletter form .accettazione-termini {
}
.support-block.newsletter form .accettazione-termini input {
  width: 0;
  height: 0;
  position: absolute;
}
.support-block.newsletter form .accettazione-termini label {
  width: 15px;
  height: 15px;
  border: 1px solid #fff;
}
.support-block.newsletter form .accettazione-termini input:checked + label {
  background-color: #0069b2;
}
.support-block.newsletter form .accettazione-termini p {
}
.support-block.newsletter form .msg {
}
.support-block.newsletter form .msg .close {
}
.support-block.newsletter form .msg.success {
}
.support-block.newsletter form .msg.failed {
}
.support-block.newsletter form .msg .container {
  line-height: normal;
}
.support-block.newsletter form .msg p {
  margin-bottom: 0;
  font-size: 1rem;
  color: #fff !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.flex-auto {
  flex: 1 1 auto !important;
}
.flex-fill {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.flex-column {
  display: flex !important;
  flex-direction: column !important;
}
.align-items-center {
  align-items: center !important;
}
.justify-content-center {
  justify-content: center !important;
}
.img-responsive {
  max-width: 100%;
  height: auto;
}
.border-1-gray {
  border: 2px solid #b1b1b1 !important;
  padding: 0.01px !important; /* To prevent collapsing with rounded corners */
}
.border-1-primary {
  border: 2px solid #0069b2 !important;
  padding: 0.01px !important; /* To prevent collapsing with rounded corners */
}
.border-1-dark {
  border: 2px solid #212529 !important;
  padding: 0.01px !important; /* To prevent collapsing with rounded corners */
}
.border-1-light {
  border: 2px solid #f8f9fa !important;
  padding: 0.01px !important; /* To prevent collapsing with rounded corners */
}
.border-1-white {
  border: 2px solid #fff !important;
  padding: 0.01px !important; /* To prevent collapsing with rounded corners */
}
.w-100 {
  width: 100% !important;
}
.w-auto {
  width: auto !important;
}
.max-w\[1000px\] {
  max-width: 1000px !important;
}
.h-100 {
  height: 100% !important;
}
.h-auto {
  height: auto !important;
}
.fw-100 {
  font-weight: 100 !important;
}
.fw-200 {
  font-weight: 200 !important;
}
.fw-300 {
  font-weight: 300 !important;
}
.fw-400 {
  font-weight: 400 !important;
}
.fw-500 {
  font-weight: 500 !important;
}
.fw-600 {
  font-weight: 600 !important;
}
.fw-700 {
  font-weight: 700 !important;
}
.fw-800 {
  font-weight: 800 !important;
}
.fw-900 {
  font-weight: 900 !important;
}

/* Font size utility classes (come Bootstrap 5) */
.fs-1 {
  font-size: 36px !important;
}
.fs-2 {
  font-size: 30px !important;
}
.fs-3 {
  font-size: 24px !important;
}
.fs-4 {
  font-size: 18px !important;
}
.fs-5 {
  font-size: 14px !important;
}
.fs-6 {
  font-size: 12px !important;
}

/* --- XS (default) --- */
.pl-0 {
  padding-left: var(--sp-0) !important;
}
.pl-5 {
  padding-left: var(--sp-5) !important;
}
.pl-10 {
  padding-left: var(--sp-10) !important;
}
.pl-15 {
  padding-left: var(--sp-15) !important;
}
.pl-20 {
  padding-left: var(--sp-20) !important;
}
.pl-30 {
  padding-left: var(--sp-30) !important;
}
.pl-40 {
  padding-left: var(--sp-40) !important;
}
.pl-50 {
  padding-left: var(--sp-50) !important;
}

.pr-0 {
  padding-right: var(--sp-0) !important;
}
.pr-5 {
  padding-right: var(--sp-5) !important;
}
.pr-10 {
  padding-right: var(--sp-10) !important;
}
.pr-15 {
  padding-right: var(--sp-15) !important;
}
.pr-20 {
  padding-right: var(--sp-20) !important;
}
.pr-30 {
  padding-right: var(--sp-30) !important;
}
.pr-40 {
  padding-right: var(--sp-40) !important;
}
.pr-50 {
  padding-right: var(--sp-50) !important;
}

.pt-0 {
  padding-top: var(--sp-0) !important;
}
.pt-5 {
  padding-top: var(--sp-5) !important;
}
.pt-10 {
  padding-top: var(--sp-10) !important;
}
.pt-15 {
  padding-top: var(--sp-15) !important;
}
.pt-20 {
  padding-top: var(--sp-20) !important;
}
.pt-30 {
  padding-top: var(--sp-30) !important;
}
.pt-40 {
  padding-top: var(--sp-40) !important;
}
.pt-50 {
  padding-top: var(--sp-50) !important;
}

.pb-0 {
  padding-bottom: var(--sp-0) !important;
}
.pb-5 {
  padding-bottom: var(--sp-5) !important;
}
.pb-10 {
  padding-bottom: var(--sp-10) !important;
}
.pb-15 {
  padding-bottom: var(--sp-15) !important;
}
.pb-20 {
  padding-bottom: var(--sp-20) !important;
}
.pb-30 {
  padding-bottom: var(--sp-30) !important;
}
.pb-40 {
  padding-bottom: var(--sp-40) !important;
}
.pb-50 {
  padding-bottom: var(--sp-50) !important;
}

.px-0 {
  padding-left: var(--sp-0) !important;
  padding-right: var(--sp-0) !important;
}
section#section-contact .px-5{
  padding-left: 3rem !important;
  padding-right: 3rem !important;
} 
.px-5 {
  padding-left: var(--sp-5) !important;
  padding-right: var(--sp-5) !important;
}
.px-10 {
  padding-left: var(--sp-10) !important;
  padding-right: var(--sp-10) !important;
}
.px-15 {
  padding-left: var(--sp-15) !important;
  padding-right: var(--sp-15) !important;
}
.px-20 {
  padding-left: var(--sp-20) !important;
  padding-right: var(--sp-20) !important;
}
.px-30 {
  padding-left: var(--sp-30) !important;
  padding-right: var(--sp-30) !important;
}
.px-40 {
  padding-left: var(--sp-40) !important;
  padding-right: var(--sp-40) !important;
}
.px-50 {
  padding-left: var(--sp-50) !important;
  padding-right: var(--sp-50) !important;
}

.py-0 {
  padding-top: var(--sp-0) !important;
  padding-bottom: var(--sp-0) !important;
}
.py-5:not(#section-contact) {
  padding-top: var(--sp-5) !important;
  padding-bottom: var(--sp-5) !important;
}
.py-10 {
  padding-top: var(--sp-10) !important;
  padding-bottom: var(--sp-10) !important;
}
.py-15 {
  padding-top: var(--sp-15) !important;
  padding-bottom: var(--sp-15) !important;
}
.py-20 {
  padding-top: var(--sp-20) !important;
  padding-bottom: var(--sp-20) !important;
}
.py-30 {
  padding-top: var(--sp-30) !important;
  padding-bottom: var(--sp-30) !important;
}
.py-40 {
  padding-top: var(--sp-40) !important;
  padding-bottom: var(--sp-40) !important;
}
.py-50 {
  padding-top: var(--sp-50) !important;
  padding-bottom: var(--sp-50) !important;
}

.ml-0 {
  margin-left: var(--sp-0) !important;
}
.ml-5 {
  margin-left: var(--sp-5) !important;
}
.ml-10 {
  margin-left: var(--sp-10) !important;
}
.ml-15 {
  margin-left: var(--sp-15) !important;
}
.ml-20 {
  margin-left: var(--sp-20) !important;
}
.ml-30 {
  margin-left: var(--sp-30) !important;
}
.ml-40 {
  margin-left: var(--sp-40) !important;
}
.ml-50 {
  margin-left: var(--sp-50) !important;
}

.mr-0 {
  margin-right: var(--sp-0) !important;
}
.mr-5 {
  margin-right: var(--sp-5) !important;
}
.mr-10 {
  margin-right: var(--sp-10) !important;
}
.mr-15 {
  margin-right: var(--sp-15) !important;
}
.mr-20 {
  margin-right: var(--sp-20) !important;
}
.mr-30 {
  margin-right: var(--sp-30) !important;
}
.mr-40 {
  margin-right: var(--sp-40) !important;
}
.mr-50 {
  margin-right: var(--sp-50) !important;
}

.mt-0 {
  margin-top: var(--sp-0) !important;
}
.mt-5 {
  margin-top: var(--sp-5) !important;
}
.mt-10 {
  margin-top: var(--sp-10) !important;
}
.mt-15 {
  margin-top: var(--sp-15) !important;
}
.mt-20 {
  margin-top: var(--sp-20) !important;
}
.mt-30 {
  margin-top: var(--sp-30) !important;
}
.mt-40 {
  margin-top: var(--sp-40) !important;
}
.mt-50 {
  margin-top: var(--sp-50) !important;
}
.mt-60 {
  margin-top: var(--sp-60) !important;
}

.mb-0 {
  margin-bottom: var(--sp-0) !important;
}
.mb-5 {
  margin-bottom: var(--sp-5) !important;
}
.mb-10 {
  margin-bottom: var(--sp-10) !important;
}
.mb-15 {
  margin-bottom: var(--sp-15) !important;
}
.mb-20 {
  margin-bottom: var(--sp-20) !important;
}
.mb-30 {
  margin-bottom: var(--sp-30) !important;
}
.mb-40 {
  margin-bottom: var(--sp-40) !important;
}
.mb-50 {
  margin-bottom: var(--sp-50) !important;
}

.mx-0 {
  margin-left: var(--sp-0) !important;
  margin-right: var(--sp-0) !important;
}
.mx-5 {
  margin-left: var(--sp-5) !important;
  margin-right: var(--sp-5) !important;
}
.mx-10 {
  margin-left: var(--sp-10) !important;
  margin-right: var(--sp-10) !important;
}
.mx-15 {
  margin-left: var(--sp-15) !important;
  margin-right: var(--sp-15) !important;
}
.mx-20 {
  margin-left: var(--sp-20) !important;
  margin-right: var(--sp-20) !important;
}
.mx-30 {
  margin-left: var(--sp-30) !important;
  margin-right: var(--sp-30) !important;
}
.mx-40 {
  margin-left: var(--sp-40) !important;
  margin-right: var(--sp-40) !important;
}
.mx-50 {
  margin-left: var(--sp-50) !important;
  margin-right: var(--sp-50) !important;
}

.my-0 {
  margin-top: var(--sp-0) !important;
  margin-bottom: var(--sp-0) !important;
}
.my-5 {
  margin-top: var(--sp-5) !important;
  margin-bottom: var(--sp-5) !important;
}
.my-10 {
  margin-top: var(--sp-10) !important;
  margin-bottom: var(--sp-10) !important;
}
.my-15 {
  margin-top: var(--sp-15) !important;
  margin-bottom: var(--sp-15) !important;
}
.my-20 {
  margin-top: var(--sp-20) !important;
  margin-bottom: var(--sp-20) !important;
}
.my-30 {
  margin-top: var(--sp-30) !important;
  margin-bottom: var(--sp-30) !important;
}
.my-40 {
  margin-top: var(--sp-40) !important;
  margin-bottom: var(--sp-40) !important;
}
.my-50 {
  margin-top: var(--sp-50) !important;
  margin-bottom: var(--sp-50) !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.m-auto {
  margin: auto !important;
}
.ml-auto {
  margin-left: auto !important;
}
.mr-auto {
  margin-right: auto !important;
}
/* --- Border Radius Utilities --- */
/* Classes: rounded, rounded-top, rounded-right, rounded-bottom, rounded-left, rounded-circle, rounded-0 */
/* Sizes: none (default), -sm, -md, -lg, -xl */

.rounded {
  border-radius: 4px !important;
}
.rounded-0 {
  border-radius: 0 !important;
}
.rounded-sm {
  border-radius: 2px !important;
}
.rounded-md {
  border-radius: 8px !important;
}
.rounded-lg {
  border-radius: 16px !important;
}
.rounded-xl {
  border-radius: 32px !important;
}
.rounded-pill {
  border-radius: 50rem !important;
}
.rounded-circle {
  border-radius: 50% !important;
}
.rounded-top {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}
.rounded-right {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.rounded-bottom {
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
.rounded-left {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
/* --- Position Utilities --- */
.position-static {
  position: static !important;
}
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.position-fixed {
  position: fixed !important;
}
.position-sticky {
  position: sticky !important;
}
.top-0 {
  top: 0 !important;
}
.right-0 {
  right: 0 !important;
}
.bottom-0 {
  bottom: 0 !important;
}
.left-0 {
  left: 0 !important;
}
.top-50 {
  top: 50% !important;
}
.right-50 {
  right: 50% !important;
}
.bottom-50 {
  bottom: 50% !important;
}
.left-50 {
  left: 50% !important;
}
.translate-middle {
  transform: translate(-50%, -50%) !important;
}
.translate-middle-x {
  transform: translateX(-50%) !important;
}
.translate-middle-y {
  transform: translateY(-50%) !important;
}

/* --- Text Color Utilities --- */
.text-white {
  color: #fff !important;
}
.text-black {
  color: #000 !important;
}
.text-dark {
  color: #212529 !important;
}
.text-light {
  color: #f8f9fa !important;
}
.text-primary {
  color: #0069b2 !important;
}
.text-secondary {
  color: #6c757d !important;
}
.text-success {
  color: #28a745 !important;
}
.text-danger {
  color: #dc3545 !important;
}
.text-warning {
  color: #ffc107 !important;
}
.text-info {
  color: #17a2b8 !important;
}
.text-muted {
  color: #6c757d !important;
}
.text-body {
  color: #212529 !important;
}
.text-reset {
  color: inherit !important;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-justify {
  text-align: justify !important;
}
.text-nowrap {
  white-space: nowrap !important;
}
.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.text-break {
  word-break: break-word !important;
}
.text-lowercase {
  text-transform: lowercase !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-capitalize {
  text-transform: capitalize !important;
}
.text-decoration-none {
  text-decoration: none !important;
}
.text-decoration-underline {
  text-decoration: underline !important;
}
.text-decoration-line-through {
  text-decoration: line-through !important;
}
/* --- Background Color Utilities --- */
.bg-white {
  background-color: #fff !important;
}
.bg-black {
  background-color: #000 !important;
}
.bg-dark {
  background-color: #212529 !important;
}
.bg-gradient-dark {
  background: linear-gradient(to right, #212529, transparent) !important;
}
.bg-gradient-dark-bottom {
  background: linear-gradient(to bottom, #212529, transparent) !important;
}
.bg-gradient-dark-50 {
  background: linear-gradient(to right, #212529 0%, transparent 50%) !important;
}
.bg-gradient-dark-50-bottom {
  background: linear-gradient(
    to bottom,
    #212529 0%,
    transparent 50%
  ) !important;
}
.bg-gradient-light {
  background: linear-gradient(to right, #ffffff, transparent) !important;
}
.bg-gradient-light-bottom {
  background: linear-gradient(to bottom, #ffffff, transparent) !important;
}
.bg-gradient-light-50 {
  background: linear-gradient(to right, #ffffff 0%, transparent 50%) !important;
}
.bg-gradient-light-50-bottom {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    transparent 50%
  ) !important;
}

.bg-light {
  background-color: #ffffff !important;
}
.bg-primary {
  background-color: #0069b2 !important;
}
.bg-secondary {
  background-color: #6c757d !important;
}
.bg-success {
  background-color: #28a745 !important;
}
.bg-success-gradient {
  background: linear-gradient(to right, #28a745, transparent) !important;
}
.bg-danger {
  background-color: #dc3545 !important;
}
.bg-danger-gradient {
  background: linear-gradient(to right, #dc3545, transparent) !important;
}
.bg-warning {
  background-color: #ffc107 !important;
}
.bg-warning-gradient {
  background: linear-gradient(to right, #ffc107, transparent) !important;
}
.bg-info {
  background-color: #17a2b8 !important;
}
.bg-info-gradient {
  background: linear-gradient(to right, #17a2b8, transparent) !important;
}
.bg-transparent {
  background-color: transparent !important;
}

/* --- Background Opacity Utilities --- */
.bg-opacity-100 {
  --bg-opacity: 1;
}
.bg-opacity-75 {
  --bg-opacity: 0.75;
}
.bg-opacity-50 {
  --bg-opacity: 0.5;
}
.bg-opacity-25 {
  --bg-opacity: 0.25;
}
.bg-opacity-10 {
  --bg-opacity: 0.1;
}
.bg-opacity-0 {
  --bg-opacity: 0;
}

.bg-white,
.bg-black,
.bg-dark,
.bg-light,
.bg-primary,
.bg-secondary,
.bg-success,
.bg-danger,
.bg-warning,
.bg-info {
  background-color: rgba(
    var(--bg-rgb, 255, 255, 255),
    var(--bg-opacity, 1)
  ) !important;
}

.bg-white {
  --bg-rgb: 255, 255, 255;
}
.bg-black {
  --bg-rgb: 0, 0, 0;
}
.bg-dark {
  --bg-rgb: 33, 37, 41;
}
.bg-light {
  --bg-rgb: 248, 249, 250;
}
.bg-primary {
  --bg-rgb: 0, 105, 178;
}
.bg-secondary {
  --bg-rgb: 108, 117, 125;
}
.bg-success {
  --bg-rgb: 40, 167, 69;
}
.bg-danger {
  --bg-rgb: 220, 53, 69;
}
.bg-warning {
  --bg-rgb: 255, 193, 7;
}
.bg-info {
  --bg-rgb: 23, 162, 184;
}
/* --- Gradient Utilities --- */
/* Horizontal gradients from color to transparent, with variable width stops */
/* Usage: .bg-gradient-right-100, .bg-gradient-right-50, .bg-gradient-left-100, .bg-gradient-left-50, etc. */

.bg-gradient-right-100 {
  background: linear-gradient(to right, currentColor 0%, transparent 100%);
}
.bg-gradient-right-75 {
  background: linear-gradient(to right, currentColor 0%, transparent 75%);
}
.bg-gradient-right-50 {
  background: linear-gradient(to right, currentColor 0%, transparent 50%);
}
.bg-gradient-right-25 {
  background: linear-gradient(to right, currentColor 0%, transparent 25%);
}

.bg-gradient-left-100 {
  background: linear-gradient(to left, currentColor 0%, transparent 100%);
}
.bg-gradient-left-75 {
  background: linear-gradient(to left, currentColor 0%, transparent 75%);
}
.bg-gradient-left-50 {
  background: linear-gradient(to left, currentColor 0%, transparent 50%);
}
.bg-gradient-left-25 {
  background: linear-gradient(to left, currentColor 0%, transparent 25%);
}

/* Example for top/bottom gradients */
.bg-gradient-top-100 {
  background: linear-gradient(to top, currentColor 0%, transparent 100%);
}
.bg-gradient-bottom-100 {
  background: linear-gradient(to bottom, currentColor 0%, transparent 100%);
}

.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
.d-flex {
  display: flex !important;
}
.d-inline {
  display: inline !important;
}
.d-inline-block {
  display: inline-block !important;
}
/* --- MOBILE XS (max-width: 767px) --- */
@media (max-width: 767px) {
  .custom-carousel {
    margin-left: -15px;
    margin-right: -15px;
  }
  .custom-carousel .carousel-control svg {
    height: 80px;
  }
  .support-block .support-item .support-icon svg {
    height: 30px;
  }
  .d-xs-none {
    display: none !important;
  }
  .d-xs-block {
    display: block !important;
  }
  .d-xs-flex {
    display: flex !important;
  }
  .d-xs-inline {
    display: inline !important;
  }
  .d-xs-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
  }
  .custom-carousel#carousel-categorie p {
  }
  .text-xs-left {
    text-align: left !important;
  }
  .text-xs-center {
    text-align: center !important;
  }
  .text-xs-right {
    text-align: right !important;
  }
  .text-xs-justify {
    text-align: justify !important;
  }
  .text-xs-nowrap {
    white-space: nowrap !important;
  }
  .text-xs-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-xs-break {
    word-break: break-word !important;
  }
  .text-xs-lowercase {
    text-transform: lowercase !important;
  }
  .text-xs-uppercase {
    text-transform: uppercase !important;
  }
  .text-xs-capitalize {
    text-transform: capitalize !important;
  }
  .text-xs-decoration-none {
    text-decoration: none !important;
  }
  .text-xs-decoration-underline {
    text-decoration: underline !important;
  }
  .text-xs-decoration-line-through {
    text-decoration: line-through !important;
  }
  .pl-xs-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-xs-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-xs-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-xs-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-xs-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-xs-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-xs-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-xs-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-xs-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-xs-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-xs-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-xs-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-xs-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-xs-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-xs-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-xs-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-xs-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-xs-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-xs-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-xs-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-xs-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-xs-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-xs-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-xs-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-xs-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-xs-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-xs-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-xs-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-xs-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-xs-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-xs-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-xs-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-xs-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-xs-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-xs-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-xs-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-xs-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-xs-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-xs-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-xs-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-xs-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-xs-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-xs-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-xs-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-xs-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-xs-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-xs-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-xs-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-xs-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-xs-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-xs-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-xs-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-xs-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-xs-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-xs-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-xs-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-xs-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-xs-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-xs-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-xs-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-xs-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-xs-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-xs-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-xs-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-xs-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-xs-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-xs-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-xs-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-xs-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-xs-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-xs-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-xs-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-xs-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-xs-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-xs-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-xs-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-xs-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-xs-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-xs-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-xs-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-xs-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-xs-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-xs-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-xs-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-xs-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-xs-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-xs-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-xs-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-xs-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-xs-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-xs-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-xs-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-xs-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-xs-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-xs-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-xs-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-xs-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-xs-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-xs-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-xs-auto {
    margin: auto !important;
  }
  .ml-xs-auto {
    margin-left: auto !important;
  }
  .mr-xs-auto {
    margin-right: auto !important;
  }
  .rounded-xs-0 {
    border-radius: 0 !important;
  }
  .rounded-xs-sm {
    border-radius: 2px !important;
  }
  .rounded-xs-md {
    border-radius: 8px !important;
  }
  .rounded-xs-lg {
    border-radius: 16px !important;
  }
  .rounded-xs-xl {
    border-radius: 32px !important;
  }
  .rounded-xs-pill {
    border-radius: 50rem !important;
  }
  .rounded-xs-circle {
    border-radius: 50% !important;
  }
  .rounded-xs-top {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
  }
  .rounded-xs-right {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
  .rounded-xs-bottom {
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .rounded-xs-left {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .fs-xs-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-xs-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-xs-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-xs-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-xs-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-xs-6 {
    font-size: var(--fs-6) !important;
  }
  .position-xs-static {
    position: static !important;
  }
  .position-xs-relative {
    position: relative !important;
  }
  .position-xs-absolute {
    position: absolute !important;
  }
  .position-xs-fixed {
    position: fixed !important;
  }
}

/* --- MOBILE SM (max-width: 575px) --- */
@media (max-width: 575px) {
  .text-2xs-left {
    text-align: left !important;
  }
  .text-2xs-center {
    text-align: center !important;
  }
  .text-2xs-right {
    text-align: right !important;
  }
  .text-2xs-justify {
    text-align: justify !important;
  }
  .text-2xs-nowrap {
    white-space: nowrap !important;
  }
  .text-2xs-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-2xs-break {
    word-break: break-word !important;
  }
  .text-2xs-lowercase {
    text-transform: lowercase !important;
  }
  .text-2xs-uppercase {
    text-transform: uppercase !important;
  }
  .text-2xs-capitalize {
    text-transform: capitalize !important;
  }
  .text-2xs-decoration-none {
    text-decoration: none !important;
  }
  .text-2xs-decoration-underline {
    text-decoration: underline !important;
  }
  .text-2xs-decoration-line-through {
    text-decoration: line-through !important;
  }
  .col-2xs-1 {
    flex: 0 0 auto;
    width: 8.333333% !important;
  }
  .col-2xs-2 {
    flex: 0 0 auto;
    width: 16.666667% !important;
  }
  .col-2xs-3 {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .col-2xs-4 {
    flex: 0 0 auto;
    width: 33.333333% !important;
  }
  .col-2xs-5 {
    flex: 0 0 auto;
    width: 41.666667% !important;
  }
  .col-2xs-6 {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .col-2xs-7 {
    flex: 0 0 auto;
    width: 58.333333% !important;
  }
  .col-2xs-8 {
    flex: 0 0 auto;
    width: 66.666667% !important;
  }
  .col-2xs-9 {
    flex: 0 0 auto;
    width: 75% !important;
  }
  .col-2xs-10 {
    flex: 0 0 auto;
    width: 83.333333% !important;
  }
  .col-2xs-11 {
    flex: 0 0 auto;
    width: 91.666667% !important;
  }
  .col-2xs-12 {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .col-2xs-auto {
    flex: 0 0 auto;
    width: auto !important;
  }
  .d-2xs-none {
    display: none !important;
  }
  .d-2xs-block {
    display: block !important;
  }
  .d-2xs-flex {
    display: flex !important;
  }
  .d-2xs-inline {
    display: inline !important;
  }
  .d-2xs-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
  }
  .custom-carousel#carousel-categorie p {
  }
  .pl-2xs-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-2xs-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-2xs-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-2xs-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-2xs-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-2xs-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-2xs-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-2xs-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-2xs-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-2xs-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-2xs-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-2xs-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-2xs-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-2xs-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-2xs-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-2xs-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-2xs-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-2xs-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-2xs-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-2xs-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-2xs-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-2xs-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-2xs-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-2xs-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-2xs-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-2xs-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-2xs-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-2xs-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-2xs-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-2xs-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-2xs-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-2xs-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-2xs-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-2xs-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-2xs-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-2xs-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-2xs-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-2xs-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-2xs-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-2xs-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-2xs-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-2xs-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-2xs-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-2xs-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-2xs-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-2xs-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-2xs-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-2xs-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-2xs-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-2xs-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-2xs-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-2xs-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-2xs-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-2xs-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-2xs-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-2xs-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-2xs-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-2xs-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-2xs-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-2xs-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-2xs-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-2xs-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-2xs-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-2xs-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-2xs-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-2xs-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-2xs-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-2xs-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-2xs-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-2xs-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-2xs-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-2xs-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-2xs-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-2xs-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-2xs-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-2xs-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-2xs-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-2xs-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-2xs-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-2xs-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-2xs-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-2xs-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-2xs-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-2xs-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-2xs-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-2xs-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-2xs-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-2xs-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-2xs-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-2xs-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-2xs-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-2xs-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-2xs-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-2xs-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-2xs-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-2xs-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-2xs-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-2xs-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-2xs-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-2xs-auto {
    margin: auto !important;
  }
  .ml-2xs-auto {
    margin-left: auto !important;
  }
  .mr-2xs-auto {
    margin-right: auto !important;
  }
  .rounded-2xs-0 {
    border-radius: 0 !important;
  }
  .rounded-2xs-sm {
    border-radius: 1px !important;
  }
  .rounded-2xs-md {
    border-radius: 4px !important;
  }
  .rounded-2xs-lg {
    border-radius: 8px !important;
  }
  .rounded-2xs-xl {
    border-radius: 16px !important;
  }
  .rounded-2xs-pill {
    border-radius: 50rem !important;
  }
  .rounded-2xs-circle {
    border-radius: 50% !important;
  }
  .rounded-2xs-top {
    border-top-left-radius: 2px !important;
    border-top-right-radius: 2px !important;
  }
  .rounded-2xs-right {
    border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
  }
  .rounded-2xs-bottom {
    border-bottom-right-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
  }
  .rounded-2xs-left {
    border-top-left-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
  }
  .fs-2xs-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-2xs-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-2xs-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-2xs-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-2xs-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-2xs-6 {
    font-size: var(--fs-6) !important;
  }
  .position-relative-2xs {
    position: relative !important;
  }
  .position-absolute-2xs {
    position: absolute !important;
  }
  .position-fixed-2xs {
    position: fixed !important;
  }
  .position-sticky-2xs {
    position: sticky !important;
  }
}

/* --- MOBILE XS2 (max-width: 479px) --- */
@media (max-width: 479px) {
  .text-3xs-left {
    text-align: left !important;
  }
  .text-3xs-center {
    text-align: center !important;
  }
  .text-3xs-right {
    text-align: right !important;
  }
  .text-3xs-justify {
    text-align: justify !important;
  }
  .text-3xs-nowrap {
    white-space: nowrap !important;
  }
  .text-3xs-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-3xs-break {
    word-break: break-word !important;
  }
  .text-3xs-lowercase {
    text-transform: lowercase !important;
  }
  .text-3xs-uppercase {
    text-transform: uppercase !important;
  }
  .text-3xs-capitalize {
    text-transform: capitalize !important;
  }
  .text-3xs-decoration-none {
    text-decoration: none !important;
  }
  .text-3xs-decoration-underline {
    text-decoration: underline !important;
  }
  .text-3xs-decoration-line-through {
    text-decoration: line-through !important;
  }
  .col-3xs-1 {
    flex: 0 0 auto;
    width: 8.333333% !important;
  }
  .col-3xs-2 {
    flex: 0 0 auto;
    width: 16.666667% !important;
  }
  .col-3xs-3 {
    flex: 0 0 auto;
    width: 25% !important;
  }
  .col-3xs-4 {
    flex: 0 0 auto;
    width: 33.333333% !important;
  }
  .col-3xs-5 {
    flex: 0 0 auto;
    width: 41.666667% !important;
  }
  .col-3xs-6 {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .col-3xs-7 {
    flex: 0 0 auto;
    width: 58.333333% !important;
  }
  .col-3xs-8 {
    flex: 0 0 auto;
    width: 66.666667% !important;
  }
  .col-3xs-9 {
    flex: 0 0 auto;
    width: 75% !important;
  }
  .col-3xs-10 {
    flex: 0 0 auto;
    width: 83.333333% !important;
  }
  .col-3xs-11 {
    flex: 0 0 auto;
    width: 91.666667% !important;
  }
  .col-3xs-12 {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .col-3xs-auto {
    flex: 0 0 auto;
    width: auto !important;
  }
  .d-3xs-none {
    display: none !important;
  }
  .d-3xs-block {
    display: block !important;
  }
  .d-3xs-flex {
    display: flex !important;
  }
  .d-3xs-inline {
    display: inline !important;
  }
  .d-3xs-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
    height: 60px;
  }
  .custom-carousel#carousel-categorie p {
    font-size: 1rem !important;
  }
  .pl-3xs-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-3xs-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-3xs-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-3xs-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-3xs-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-3xs-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-3xs-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-3xs-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-3xs-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-3xs-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-3xs-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-3xs-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-3xs-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-3xs-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-3xs-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-3xs-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-3xs-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-3xs-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-3xs-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-3xs-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-3xs-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-3xs-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-3xs-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-3xs-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-3xs-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-3xs-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-3xs-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-3xs-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-3xs-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-3xs-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-3xs-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-3xs-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-3xs-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-3xs-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-3xs-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-3xs-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-3xs-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-3xs-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-3xs-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-3xs-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-3xs-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-3xs-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-3xs-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-3xs-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-3xs-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-3xs-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-3xs-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-3xs-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-3xs-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-3xs-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-3xs-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-3xs-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-3xs-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-3xs-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-3xs-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-3xs-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-3xs-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-3xs-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-3xs-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-3xs-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-3xs-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-3xs-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-3xs-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-3xs-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-3xs-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-3xs-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-3xs-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-3xs-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-3xs-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-3xs-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-3xs-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-3xs-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-3xs-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-3xs-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-3xs-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-3xs-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-3xs-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-3xs-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-3xs-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-3xs-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-3xs-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-3xs-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-3xs-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-3xs-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-3xs-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-3xs-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-3xs-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-3xs-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-3xs-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-3xs-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-3xs-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-3xs-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-3xs-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-3xs-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-3xs-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-3xs-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-3xs-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-3xs-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-3xs-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-3xs-auto {
    margin: auto !important;
  }
  .ml-3xs-auto {
    margin-left: auto !important;
  }
  .mr-3xs-auto {
    margin-right: auto !important;
  }
  .rounded-3xs-0 {
    border-radius: 0 !important;
  }
  .rounded-3xs-sm {
    border-radius: 1.5px !important;
  }
  .rounded-3xs-md {
    border-radius: 6px !important;
  }
  .rounded-3xs-lg {
    border-radius: 12px !important;
  }
  .rounded-3xs-xl {
    border-radius: 24px !important;
  }
  .rounded-3xs-pill {
    border-radius: 50rem !important;
  }
  .rounded-3xs-circle {
    border-radius: 50% !important;
  }
  .rounded-3xs-top {
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
  }
  .rounded-3xs-right {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
  }
  .rounded-3xs-bottom {
    border-bottom-right-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
  }
  .rounded-3xs-left {
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
  }
  .fs-3xs-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-3xs-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-3xs-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-3xs-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-3xs-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-3xs-6 {
    font-size: var(--fs-6) !important;
  }
  .position-3xs-static {
    position: static !important;
  }
  .position-3xs-relative {
    position: relative !important;
  }
  .position-3xs-absolute {
    position: absolute !important;
  }
  .position-3xs-fixed {
    position: fixed !important;
  }
  .position-3xs-sticky {
    position: sticky !important;
  }
}

/* --- MOBILE XS3 (max-width: 319px) --- */
@media (max-width: 319px) {
  .text-4xs-left {
    text-align: left !important;
  }
  .text-4xs-center {
    text-align: center !important;
  }
  .text-4xs-right {
    text-align: right !important;
  }
  .text-4xs-justify {
    text-align: justify !important;
  }
  .text-4xs-nowrap {
    white-space: nowrap !important;
  }
  .text-4xs-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-4xs-break {
    word-break: break-word !important;
  }
  .text-4xs-lowercase {
    text-transform: lowercase !important;
  }
  .text-4xs-uppercase {
    text-transform: uppercase !important;
  }
  .text-4xs-capitalize {
    text-transform: capitalize !important;
  }
  .text-4xs-decoration-none {
    text-decoration: none !important;
  }
  .text-4xs-decoration-underline {
    text-decoration: underline !important;
  }
  .text-4xs-decoration-line-through {
    text-decoration: line-through !important;
  }
  .d-4xs-none {
    display: none !important;
  }
  .d-4xs-block {
    display: block !important;
  }
  .d-4xs-flex {
    display: flex !important;
  }
  .d-4xs-inline {
    display: inline !important;
  }
  .d-4xs-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
  }
  .custom-carousel#carousel-categorie p {
  }
  .pl-4xs-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-4xs-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-4xs-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-4xs-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-4xs-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-4xs-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-4xs-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-4xs-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-4xs-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-4xs-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-4xs-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-4xs-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-4xs-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-4xs-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-4xs-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-4xs-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-4xs-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-4xs-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-4xs-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-4xs-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-4xs-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-4xs-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-4xs-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-4xs-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-4xs-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-4xs-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-4xs-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-4xs-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-4xs-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-4xs-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-4xs-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-4xs-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-4xs-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-4xs-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-4xs-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-4xs-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-4xs-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-4xs-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-4xs-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-4xs-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-4xs-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-4xs-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-4xs-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-4xs-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-4xs-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-4xs-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-4xs-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-4xs-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-4xs-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-4xs-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-4xs-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-4xs-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-4xs-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-4xs-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-4xs-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-4xs-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-4xs-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-4xs-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-4xs-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-4xs-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-4xs-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-4xs-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-4xs-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-4xs-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-4xs-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-4xs-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-4xs-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-4xs-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-4xs-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-4xs-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-4xs-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-4xs-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-4xs-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-4xs-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-4xs-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-4xs-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-4xs-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-4xs-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-4xs-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-4xs-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-4xs-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-4xs-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-4xs-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-4xs-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-4xs-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-4xs-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-4xs-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-4xs-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-4xs-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-4xs-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-4xs-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-4xs-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-4xs-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-4xs-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-4xs-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-4xs-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-4xs-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-4xs-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-4xs-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-4xs-auto {
    margin: auto !important;
  }
  .ml-4xs-auto {
    margin-left: auto !important;
  }
  .mr-4xs-auto {
    margin-right: auto !important;
  }
  .rounded-4xs-0 {
    border-radius: 0 !important;
  }
  .rounded-4xs-sm {
    border-radius: 0.5px !important;
  }
  .rounded-4xs-md {
    border-radius: 2px !important;
  }
  .rounded-4xs-lg {
    border-radius: 4px !important;
  }
  .rounded-4xs-xl {
    border-radius: 8px !important;
  }
  .rounded-4xs-pill {
    border-radius: 50rem !important;
  }
  .rounded-4xs-circle {
    border-radius: 50% !important;
  }
  .rounded-4xs-top {
    border-top-left-radius: 1px !important;
    border-top-right-radius: 1px !important;
  }
  .rounded-4xs-right {
    border-top-right-radius: 1px !important;
    border-bottom-right-radius: 1px !important;
  }
  .rounded-4xs-bottom {
    border-bottom-right-radius: 1px !important;
    border-bottom-left-radius: 1px !important;
  }
  .rounded-4xs-left {
    border-top-left-radius: 1px !important;
    border-bottom-left-radius: 1px !important;
  }
  .fs-4xs-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-4xs-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-4xs-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-4xs-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-4xs-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-4xs-6 {
    font-size: var(--fs-6) !important;
  }
  .position-4xs-static {
    position: static !important;
  }
  .position-4xs-relative {
    position: relative !important;
  }
  .position-4xs-absolute {
    position: absolute !important;
  }
  .position-4xs-fixed {
    position: fixed !important;
  }
  .position-4xs-sticky {
    position: sticky !important;
  }
}
/* --- SM --- */
@media (min-width: 768px) {
  .custom-carousel .carousel-control svg {
    height: 40px;
  }
  .support-block .support-item .support-icon svg {
    height: 45px;
  }
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-justify {
    text-align: justify !important;
  }
  .text-sm-nowrap {
    white-space: nowrap !important;
  }
  .text-sm-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-sm-break {
    word-break: break-word !important;
  }
  .text-sm-lowercase {
    text-transform: lowercase !important;
  }
  .text-sm-uppercase {
    text-transform: uppercase !important;
  }
  .text-sm-capitalize {
    text-transform: capitalize !important;
  }
  .text-sm-decoration-none {
    text-decoration: none !important;
  }
  .text-sm-decoration-underline {
    text-decoration: underline !important;
  }
  .text-sm-decoration-line-through {
    text-decoration: line-through !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  #content .content-wrap,
  .slider_a_blocchi .container,
  .support-block.container,
  .support-block .container {
    width: 100% !important;
    max-width: 1400px !important;
  }
  .custom-carousel#carousel-categorie img {
    height: 100px;
  }
  .custom-carousel#carousel-categorie p {
  }
  .pl-sm-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-sm-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-sm-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-sm-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-sm-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-sm-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-sm-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-sm-50 {
    padding-left: var(--sp-50) !important;
  }
  .pr-sm-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-sm-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-sm-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-sm-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-sm-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-sm-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-sm-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-sm-50 {
    padding-right: var(--sp-50) !important;
  }
  .pt-sm-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-sm-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-sm-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-sm-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-sm-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-sm-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-sm-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-sm-50 {
    padding-top: var(--sp-50) !important;
  }
  .pb-sm-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-sm-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-sm-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-sm-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-sm-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-sm-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-sm-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-sm-50 {
    padding-bottom: var(--sp-50) !important;
  }
  .px-sm-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-sm-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-sm-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-sm-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-sm-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-sm-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-sm-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-sm-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }
  .py-sm-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-sm-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-sm-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-sm-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-sm-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-sm-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-sm-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-sm-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }
  .ml-sm-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-sm-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-sm-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-sm-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-sm-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-sm-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-sm-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-sm-50 {
    margin-left: var(--sp-50) !important;
  }
  .mr-sm-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-sm-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-sm-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-sm-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-sm-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-sm-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-sm-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-sm-50 {
    margin-right: var(--sp-50) !important;
  }
  .mt-sm-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-sm-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-sm-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-sm-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-sm-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-sm-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-sm-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-sm-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-sm-60 {
    margin-top: var(--sp-60) !important;
  }
  .mb-sm-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-sm-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-sm-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-sm-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-sm-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-sm-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-sm-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-sm-50 {
    margin-bottom: var(--sp-50) !important;
  }
  .mx-sm-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-sm-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-sm-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-sm-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-sm-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-sm-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-sm-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-sm-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }
  .my-sm-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-sm-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-sm-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-sm-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-sm-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-sm-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-sm-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-sm-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-sm-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .ml-sm-auto {
    margin-left: auto !important;
  }
  .mr-sm-auto {
    margin-right: auto !important;
  }
  .rounded-sm-0 {
    border-radius: 0 !important;
  }
  .rounded-sm-sm {
    border-radius: 2px !important;
  }
  .rounded-sm-md {
    border-radius: 8px !important;
  }
  .rounded-sm-lg {
    border-radius: 16px !important;
  }
  .rounded-sm-xl {
    border-radius: 32px !important;
  }
  .rounded-sm-pill {
    border-radius: 50rem !important;
  }
  .rounded-sm-circle {
    border-radius: 50% !important;
  }
  .rounded-sm-top {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
  }
  .rounded-sm-right {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
  .rounded-sm-bottom {
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .rounded-sm-left {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .fs-sm-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-sm-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-sm-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-sm-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-sm-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-sm-6 {
    font-size: var(--fs-6) !important;
  }
  .position-sm-static {
    position: static !important;
  }
  .position-sm-relative {
    position: relative !important;
  }
  .position-sm-absolute {
    position: absolute !important;
  }
  .position-sm-fixed {
    position: fixed !important;
  }
  .position-sm-sticky {
    position: sticky !important;
  }
}

/* --- MD --- */
@media (min-width: 992px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-center {
    text-align: center !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-justify {
    text-align: justify !important;
  }
  .text-md-nowrap {
    white-space: nowrap !important;
  }
  .text-md-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-md-break {
    word-break: break-word !important;
  }
  .text-md-lowercase {
    text-transform: lowercase !important;
  }
  .text-md-uppercase {
    text-transform: uppercase !important;
  }
  .text-md-capitalize {
    text-transform: capitalize !important;
  }
  .text-md-decoration-none {
    text-decoration: none !important;
  }
  .text-md-decoration-underline {
    text-decoration: underline !important;
  }
  .text-md-decoration-line-through {
    text-decoration: line-through !important;
  }
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
  }
  .custom-carousel#carousel-categorie p {
  }
  .pl-md-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-md-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-md-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-md-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-md-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-md-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-md-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-md-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-md-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-md-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-md-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-md-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-md-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-md-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-md-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-md-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-md-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-md-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-md-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-md-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-md-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-md-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-md-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-md-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-md-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-md-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-md-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-md-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-md-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-md-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-md-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-md-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-md-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-md-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-md-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-md-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-md-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-md-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-md-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-md-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-md-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-md-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-md-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-md-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-md-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-md-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-md-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-md-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-md-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-md-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-md-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-md-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-md-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-md-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-md-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-md-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-md-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-md-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-md-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-md-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-md-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-md-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-md-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-md-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-md-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-md-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-md-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-md-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-md-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-md-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-md-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-md-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-md-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-md-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-md-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-md-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-md-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-md-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-md-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-md-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-md-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-md-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-md-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-md-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-md-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-md-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-md-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-md-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-md-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-md-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-md-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-md-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-md-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-md-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-md-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-md-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-md-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-md-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .ml-md-auto {
    margin-left: auto !important;
  }
  .mr-md-auto {
    margin-right: auto !important;
  }
  .rounded-md-0 {
    border-radius: 0 !important;
  }
  .rounded-md-sm {
    border-radius: 2px !important;
  }
  .rounded-md-md {
    border-radius: 8px !important;
  }
  .rounded-md-lg {
    border-radius: 16px !important;
  }
  .rounded-md-xl {
    border-radius: 32px !important;
  }
  .rounded-md-pill {
    border-radius: 50rem !important;
  }
  .rounded-md-circle {
    border-radius: 50% !important;
  }
  .rounded-md-top {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
  }
  .rounded-md-right {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
  .rounded-md-bottom {
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .rounded-md-left {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .fs-md-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-md-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-md-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-md-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-md-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-md-6 {
    font-size: var(--fs-6) !important;
  }
  .position-md-static {
    position: static !important;
  }
  .position-md-relative {
    position: relative !important;
  }
  .position-md-absolute {
    position: absolute !important;
  }
  .position-md-fixed {
    position: fixed !important;
  }
  .position-md-sticky {
    position: sticky !important;
  }
}

/* --- LG --- */
@media (min-width: 1200px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-justify {
    text-align: justify !important;
  }
  .text-lg-nowrap {
    white-space: nowrap !important;
  }
  .text-lg-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-lg-break {
    word-break: break-word !important;
  }
  .text-lg-lowercase {
    text-transform: lowercase !important;
  }
  .text-lg-uppercase {
    text-transform: uppercase !important;
  }
  .text-lg-capitalize {
    text-transform: capitalize !important;
  }
  .text-lg-decoration-none {
    text-decoration: none !important;
  }
  .text-lg-decoration-underline {
    text-decoration: underline !important;
  }
  .text-lg-decoration-line-through {
    text-decoration: line-through !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
  }
  .custom-carousel#carousel-categorie p {
  }
  .pl-lg-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-lg-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-lg-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-lg-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-lg-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-lg-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-lg-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-lg-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-lg-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-lg-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-lg-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-lg-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-lg-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-lg-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-lg-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-lg-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-lg-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-lg-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-lg-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-lg-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-lg-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-lg-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-lg-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-lg-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-lg-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-lg-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-lg-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-lg-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-lg-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-lg-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-lg-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-lg-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-lg-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-lg-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-lg-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-lg-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-lg-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-lg-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-lg-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-lg-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-lg-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-lg-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-lg-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-lg-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-lg-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-lg-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-lg-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-lg-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-lg-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-lg-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-lg-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-lg-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-lg-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-lg-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-lg-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-lg-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-lg-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-lg-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-lg-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-lg-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-lg-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-lg-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-lg-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-lg-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-lg-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-lg-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-lg-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-lg-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-lg-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-lg-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-lg-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-lg-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-lg-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-lg-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-lg-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-lg-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-lg-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-lg-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-lg-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-lg-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-lg-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-lg-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-lg-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-lg-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-lg-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-lg-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-lg-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-lg-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-lg-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-lg-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-lg-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-lg-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-lg-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-lg-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-lg-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-lg-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-lg-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-lg-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .ml-lg-auto {
    margin-left: auto !important;
  }
  .mr-lg-auto {
    margin-right: auto !important;
  }
  .rounded-lg-0 {
    border-radius: 0 !important;
  }
  .rounded-lg-sm {
    border-radius: 2px !important;
  }
  .rounded-lg-md {
    border-radius: 8px !important;
  }
  .rounded-lg-lg {
    border-radius: 16px !important;
  }
  .rounded-lg-xl {
    border-radius: 32px !important;
  }
  .rounded-lg-pill {
    border-radius: 50rem !important;
  }
  .rounded-lg-circle {
    border-radius: 50% !important;
  }
  .rounded-lg-top {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
  }
  .rounded-lg-right {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
  .rounded-lg-bottom {
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .rounded-lg-left {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .fs-lg-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-lg-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-lg-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-lg-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-lg-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-lg-6 {
    font-size: var(--fs-6) !important;
  }
  .position-lg-static {
    position: static !important;
  }
  .position-lg-relative {
    position: relative !important;
  }
  .position-lg-absolute {
    position: absolute !important;
  }
  .position-lg-fixed {
    position: fixed !important;
  }
  .position-lg-sticky {
    position: sticky !important;
  }
}
/* --- XL --- */
@media (min-width: 1400px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-justify {
    text-align: justify !important;
  }
  .text-xl-nowrap {
    white-space: nowrap !important;
  }
  .text-xl-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-xl-break {
    word-break: break-word !important;
  }
  .text-xl-lowercase {
    text-transform: lowercase !important;
  }
  .text-xl-uppercase {
    text-transform: uppercase !important;
  }
  .text-xl-capitalize {
    text-transform: capitalize !important;
  }
  .text-xl-decoration-none {
    text-decoration: none !important;
  }
  .text-xl-decoration-underline {
    text-decoration: underline !important;
  }
  .text-xl-decoration-line-through {
    text-decoration: line-through !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
  }
  .custom-carousel#carousel-categorie p {
  }
  .pl-xl-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-xl-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-xl-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-xl-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-xl-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-xl-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-xl-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-xl-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-xl-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-xl-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-xl-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-xl-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-xl-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-xl-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-xl-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-xl-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-xl-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-xl-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-xl-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-xl-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-xl-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-xl-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-xl-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-xl-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-xl-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-xl-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-xl-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-xl-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-xl-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-xl-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-xl-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-xl-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-xl-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-xl-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-xl-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-xl-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-xl-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-xl-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-xl-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-xl-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-xl-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-xl-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-xl-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-xl-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-xl-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-xl-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-xl-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-xl-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-xl-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-xl-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-xl-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-xl-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-xl-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-xl-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-xl-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-xl-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-xl-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-xl-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-xl-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-xl-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-xl-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-xl-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-xl-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-xl-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-xl-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-xl-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-xl-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-xl-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-xl-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-xl-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-xl-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-xl-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-xl-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-xl-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-xl-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-xl-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-xl-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-xl-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-xl-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-xl-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-xl-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-xl-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-xl-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-xl-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-xl-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-xl-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-xl-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-xl-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-xl-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-xl-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-xl-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-xl-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-xl-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-xl-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-xl-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-xl-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-xl-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-xl-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .ml-xl-auto {
    margin-left: auto !important;
  }
  .mr-xl-auto {
    margin-right: auto !important;
  }
  .rounded-xl-0 {
    border-radius: 0 !important;
  }
  .rounded-xl-sm {
    border-radius: 2px !important;
  }
  .rounded-xl-md {
    border-radius: 8px !important;
  }
  .rounded-xl-lg {
    border-radius: 16px !important;
  }
  .rounded-xl-xl {
    border-radius: 32px !important;
  }
  .rounded-xl-pill {
    border-radius: 50rem !important;
  }
  .rounded-xl-circle {
    border-radius: 50% !important;
  }
  .rounded-xl-top {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
  }
  .rounded-xl-right {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
  .rounded-xl-bottom {
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .rounded-xl-left {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
  }
  .fs-xl-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-xl-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-xl-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-xl-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-xl-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-xl-6 {
    font-size: var(--fs-6) !important;
  }
  .position-xl-relative {
    position: relative !important;
  }
  .position-xl-absolute {
    position: absolute !important;
  }
  .position-xl-fixed {
    position: fixed !important;
  }
  .position-xl-sticky {
    position: sticky !important;
  }
}
/* --- 2XL --- */
@media (min-width: 1600px) {
  .text-2xl-left {
    text-align: left !important;
  }
  .text-2xl-center {
    text-align: center !important;
  }
  .text-2xl-right {
    text-align: right !important;
  }
  .text-2xl-justify {
    text-align: justify !important;
  }
  .text-2xl-nowrap {
    white-space: nowrap !important;
  }
  .text-2xl-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-2xl-break {
    word-break: break-word !important;
  }
  .text-2xl-lowercase {
    text-transform: lowercase !important;
  }
  .text-2xl-uppercase {
    text-transform: uppercase !important;
  }
  .text-2xl-capitalize {
    text-transform: capitalize !important;
  }
  .text-2xl-decoration-none {
    text-decoration: none !important;
  }
  .text-2xl-decoration-underline {
    text-decoration: underline !important;
  }
  .text-2xl-decoration-line-through {
    text-decoration: line-through !important;
  }
  .d-2xl-none {
    display: none !important;
  }
  .d-2xl-block {
    display: block !important;
  }
  .d-2xl-flex {
    display: flex !important;
  }
  .d-2xl-inline {
    display: inline !important;
  }
  .d-2xl-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
  }
  .custom-carousel#carousel-categorie p {
  }
  .pl-2xl-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-2xl-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-2xl-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-2xl-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-2xl-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-2xl-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-2xl-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-2xl-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-2xl-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-2xl-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-2xl-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-2xl-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-2xl-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-2xl-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-2xl-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-2xl-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-2xl-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-2xl-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-2xl-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-2xl-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-2xl-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-2xl-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-2xl-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-2xl-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-2xl-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-2xl-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-2xl-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-2xl-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-2xl-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-2xl-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-2xl-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-2xl-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-2xl-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-2xl-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-2xl-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-2xl-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-2xl-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-2xl-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-2xl-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-2xl-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-2xl-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-2xl-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-2xl-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-2xl-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-2xl-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-2xl-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-2xl-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-2xl-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-2xl-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-2xl-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-2xl-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-2xl-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-2xl-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-2xl-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-2xl-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-2xl-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-2xl-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-2xl-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-2xl-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-2xl-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-2xl-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-2xl-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-2xl-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-2xl-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-2xl-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-2xl-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-2xl-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-2xl-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-2xl-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-2xl-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-2xl-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-2xl-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-2xl-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-2xl-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-2xl-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-2xl-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-2xl-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-2xl-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-2xl-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-2xl-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-2xl-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-2xl-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-2xl-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-2xl-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-2xl-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-2xl-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-2xl-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-2xl-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-2xl-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-2xl-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-2xl-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-2xl-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-2xl-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-2xl-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-2xl-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-2xl-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-2xl-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-2xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-2xl-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-2xl-auto {
    margin: auto !important;
  }
  .ml-2xl-auto {
    margin-left: auto !important;
  }
  .mr-2xl-auto {
    margin-right: auto !important;
  }
  .rounded-2xl-0 {
    border-radius: 0 !important;
  }
  .rounded-2xl-sm {
    border-radius: 24px !important;
  }
  .rounded-2xl-md {
    border-radius: 64px !important;
  }
  .rounded-2xl-lg {
    border-radius: 96px !important;
  }
  .rounded-2xl-xl {
    border-radius: 128px !important;
  }
  .rounded-2xl-pill {
    border-radius: 50rem !important;
  }
  .rounded-2xl-circle {
    border-radius: 50% !important;
  }
  .rounded-2xl-top {
    border-top-left-radius: 48px !important;
    border-top-right-radius: 48px !important;
  }
  .rounded-2xl-right {
    border-top-right-radius: 48px !important;
    border-bottom-right-radius: 48px !important;
  }
  .rounded-2xl-bottom {
    border-bottom-right-radius: 48px !important;
    border-bottom-left-radius: 48px !important;
  }
  .rounded-2xl-left {
    border-top-left-radius: 48px !important;
    border-bottom-left-radius: 48px !important;
  }
  .fs-2xl-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-2xl-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-2xl-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-2xl-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-2xl-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-2xl-6 {
    font-size: var(--fs-6) !important;
  }
  .position-2xl-relative {
    position: relative !important;
  }
  .position-2xl-absolute {
    position: absolute !important;
  }
  .position-2xl-fixed {
    position: fixed !important;
  }
  .position-2xl-sticky {
    position: sticky !important;
  }
}

/* --- 3XL --- */
@media (min-width: 1920px) {
  .text-3xl-left {
    text-align: left !important;
  }
  .text-3xl-center {
    text-align: center !important;
  }
  .text-3xl-right {
    text-align: right !important;
  }
  .text-3xl-justify {
    text-align: justify !important;
  }
  .text-3xl-nowrap {
    white-space: nowrap !important;
  }
  .text-3xl-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .text-3xl-break {
    word-break: break-word !important;
  }
  .text-3xl-lowercase {
    text-transform: lowercase !important;
  }
  .text-3xl-uppercase {
    text-transform: uppercase !important;
  }
  .text-3xl-capitalize {
    text-transform: capitalize !important;
  }
  .text-3xl-decoration-none {
    text-decoration: none !important;
  }
  .text-3xl-decoration-underline {
    text-decoration: underline !important;
  }
  .text-3xl-decoration-line-through {
    text-decoration: line-through !important;
  }
  .d-3xl-none {
    display: none !important;
  }
  .d-3xl-block {
    display: block !important;
  }
  .d-3xl-flex {
    display: flex !important;
  }
  .d-3xl-inline {
    display: inline !important;
  }
  .d-3xl-inline-block {
    display: inline-block !important;
  }
  .custom-carousel#carousel-categorie img {
  }
  .custom-carousel#carousel-categorie p {
  }
  .pl-3xl-0 {
    padding-left: var(--sp-0) !important;
  }
  .pl-3xl-5 {
    padding-left: var(--sp-5) !important;
  }
  .pl-3xl-10 {
    padding-left: var(--sp-10) !important;
  }
  .pl-3xl-15 {
    padding-left: var(--sp-15) !important;
  }
  .pl-3xl-20 {
    padding-left: var(--sp-20) !important;
  }
  .pl-3xl-30 {
    padding-left: var(--sp-30) !important;
  }
  .pl-3xl-40 {
    padding-left: var(--sp-40) !important;
  }
  .pl-3xl-50 {
    padding-left: var(--sp-50) !important;
  }

  .pr-3xl-0 {
    padding-right: var(--sp-0) !important;
  }
  .pr-3xl-5 {
    padding-right: var(--sp-5) !important;
  }
  .pr-3xl-10 {
    padding-right: var(--sp-10) !important;
  }
  .pr-3xl-15 {
    padding-right: var(--sp-15) !important;
  }
  .pr-3xl-20 {
    padding-right: var(--sp-20) !important;
  }
  .pr-3xl-30 {
    padding-right: var(--sp-30) !important;
  }
  .pr-3xl-40 {
    padding-right: var(--sp-40) !important;
  }
  .pr-3xl-50 {
    padding-right: var(--sp-50) !important;
  }

  .pt-3xl-0 {
    padding-top: var(--sp-0) !important;
  }
  .pt-3xl-5 {
    padding-top: var(--sp-5) !important;
  }
  .pt-3xl-10 {
    padding-top: var(--sp-10) !important;
  }
  .pt-3xl-15 {
    padding-top: var(--sp-15) !important;
  }
  .pt-3xl-20 {
    padding-top: var(--sp-20) !important;
  }
  .pt-3xl-30 {
    padding-top: var(--sp-30) !important;
  }
  .pt-3xl-40 {
    padding-top: var(--sp-40) !important;
  }
  .pt-3xl-50 {
    padding-top: var(--sp-50) !important;
  }

  .pb-3xl-0 {
    padding-bottom: var(--sp-0) !important;
  }
  .pb-3xl-5 {
    padding-bottom: var(--sp-5) !important;
  }
  .pb-3xl-10 {
    padding-bottom: var(--sp-10) !important;
  }
  .pb-3xl-15 {
    padding-bottom: var(--sp-15) !important;
  }
  .pb-3xl-20 {
    padding-bottom: var(--sp-20) !important;
  }
  .pb-3xl-30 {
    padding-bottom: var(--sp-30) !important;
  }
  .pb-3xl-40 {
    padding-bottom: var(--sp-40) !important;
  }
  .pb-3xl-50 {
    padding-bottom: var(--sp-50) !important;
  }

  .px-3xl-0 {
    padding-left: var(--sp-0) !important;
    padding-right: var(--sp-0) !important;
  }
  .px-3xl-5 {
    padding-left: var(--sp-5) !important;
    padding-right: var(--sp-5) !important;
  }
  .px-3xl-10 {
    padding-left: var(--sp-10) !important;
    padding-right: var(--sp-10) !important;
  }
  .px-3xl-15 {
    padding-left: var(--sp-15) !important;
    padding-right: var(--sp-15) !important;
  }
  .px-3xl-20 {
    padding-left: var(--sp-20) !important;
    padding-right: var(--sp-20) !important;
  }
  .px-3xl-30 {
    padding-left: var(--sp-30) !important;
    padding-right: var(--sp-30) !important;
  }
  .px-3xl-40 {
    padding-left: var(--sp-40) !important;
    padding-right: var(--sp-40) !important;
  }
  .px-3xl-50 {
    padding-left: var(--sp-50) !important;
    padding-right: var(--sp-50) !important;
  }

  .py-3xl-0 {
    padding-top: var(--sp-0) !important;
    padding-bottom: var(--sp-0) !important;
  }
  .py-3xl-5 {
    padding-top: var(--sp-5) !important;
    padding-bottom: var(--sp-5) !important;
  }
  .py-3xl-10 {
    padding-top: var(--sp-10) !important;
    padding-bottom: var(--sp-10) !important;
  }
  .py-3xl-15 {
    padding-top: var(--sp-15) !important;
    padding-bottom: var(--sp-15) !important;
  }
  .py-3xl-20 {
    padding-top: var(--sp-20) !important;
    padding-bottom: var(--sp-20) !important;
  }
  .py-3xl-30 {
    padding-top: var(--sp-30) !important;
    padding-bottom: var(--sp-30) !important;
  }
  .py-3xl-40 {
    padding-top: var(--sp-40) !important;
    padding-bottom: var(--sp-40) !important;
  }
  .py-3xl-50 {
    padding-top: var(--sp-50) !important;
    padding-bottom: var(--sp-50) !important;
  }

  .ml-3xl-0 {
    margin-left: var(--sp-0) !important;
  }
  .ml-3xl-5 {
    margin-left: var(--sp-5) !important;
  }
  .ml-3xl-10 {
    margin-left: var(--sp-10) !important;
  }
  .ml-3xl-15 {
    margin-left: var(--sp-15) !important;
  }
  .ml-3xl-20 {
    margin-left: var(--sp-20) !important;
  }
  .ml-3xl-30 {
    margin-left: var(--sp-30) !important;
  }
  .ml-3xl-40 {
    margin-left: var(--sp-40) !important;
  }
  .ml-3xl-50 {
    margin-left: var(--sp-50) !important;
  }

  .mr-3xl-0 {
    margin-right: var(--sp-0) !important;
  }
  .mr-3xl-5 {
    margin-right: var(--sp-5) !important;
  }
  .mr-3xl-10 {
    margin-right: var(--sp-10) !important;
  }
  .mr-3xl-15 {
    margin-right: var(--sp-15) !important;
  }
  .mr-3xl-20 {
    margin-right: var(--sp-20) !important;
  }
  .mr-3xl-30 {
    margin-right: var(--sp-30) !important;
  }
  .mr-3xl-40 {
    margin-right: var(--sp-40) !important;
  }
  .mr-3xl-50 {
    margin-right: var(--sp-50) !important;
  }

  .mt-3xl-0 {
    margin-top: var(--sp-0) !important;
  }
  .mt-3xl-5 {
    margin-top: var(--sp-5) !important;
  }
  .mt-3xl-10 {
    margin-top: var(--sp-10) !important;
  }
  .mt-3xl-15 {
    margin-top: var(--sp-15) !important;
  }
  .mt-3xl-20 {
    margin-top: var(--sp-20) !important;
  }
  .mt-3xl-30 {
    margin-top: var(--sp-30) !important;
  }
  .mt-3xl-40 {
    margin-top: var(--sp-40) !important;
  }
  .mt-3xl-50 {
    margin-top: var(--sp-50) !important;
  }
  .mt-3xl-60 {
    margin-top: var(--sp-60) !important;
  }

  .mb-3xl-0 {
    margin-bottom: var(--sp-0) !important;
  }
  .mb-3xl-5 {
    margin-bottom: var(--sp-5) !important;
  }
  .mb-3xl-10 {
    margin-bottom: var(--sp-10) !important;
  }
  .mb-3xl-15 {
    margin-bottom: var(--sp-15) !important;
  }
  .mb-3xl-20 {
    margin-bottom: var(--sp-20) !important;
  }
  .mb-3xl-30 {
    margin-bottom: var(--sp-30) !important;
  }
  .mb-3xl-40 {
    margin-bottom: var(--sp-40) !important;
  }
  .mb-3xl-50 {
    margin-bottom: var(--sp-50) !important;
  }

  .mx-3xl-0 {
    margin-left: var(--sp-0) !important;
    margin-right: var(--sp-0) !important;
  }
  .mx-3xl-5 {
    margin-left: var(--sp-5) !important;
    margin-right: var(--sp-5) !important;
  }
  .mx-3xl-10 {
    margin-left: var(--sp-10) !important;
    margin-right: var(--sp-10) !important;
  }
  .mx-3xl-15 {
    margin-left: var(--sp-15) !important;
    margin-right: var(--sp-15) !important;
  }
  .mx-3xl-20 {
    margin-left: var(--sp-20) !important;
    margin-right: var(--sp-20) !important;
  }
  .mx-3xl-30 {
    margin-left: var(--sp-30) !important;
    margin-right: var(--sp-30) !important;
  }
  .mx-3xl-40 {
    margin-left: var(--sp-40) !important;
    margin-right: var(--sp-40) !important;
  }
  .mx-3xl-50 {
    margin-left: var(--sp-50) !important;
    margin-right: var(--sp-50) !important;
  }

  .my-3xl-0 {
    margin-top: var(--sp-0) !important;
    margin-bottom: var(--sp-0) !important;
  }
  .my-3xl-5 {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-5) !important;
  }
  .my-3xl-10 {
    margin-top: var(--sp-10) !important;
    margin-bottom: var(--sp-10) !important;
  }
  .my-3xl-15 {
    margin-top: var(--sp-15) !important;
    margin-bottom: var(--sp-15) !important;
  }
  .my-3xl-20 {
    margin-top: var(--sp-20) !important;
    margin-bottom: var(--sp-20) !important;
  }
  .my-3xl-30 {
    margin-top: var(--sp-30) !important;
    margin-bottom: var(--sp-30) !important;
  }
  .my-3xl-40 {
    margin-top: var(--sp-40) !important;
    margin-bottom: var(--sp-40) !important;
  }
  .my-3xl-50 {
    margin-top: var(--sp-50) !important;
    margin-bottom: var(--sp-50) !important;
  }
  .my-3xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-3xl-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .m-3xl-auto {
    margin: auto !important;
  }
  .ml-3xl-auto {
    margin-left: auto !important;
  }
  .mr-3xl-auto {
    margin-right: auto !important;
  }
  .rounded-3xl-sm {
    border-radius: 32px !important;
  }
  .rounded-3xl-md {
    border-radius: 96px !important;
  }
  .rounded-3xl-lg {
    border-radius: 128px !important;
  }
  .rounded-3xl-xl {
    border-radius: 192px !important;
  }
  .rounded-3xl-pill {
    border-radius: 50rem !important;
  }
  .rounded-3xl-circle {
    border-radius: 50% !important;
  }
  .rounded-3xl-top {
    border-top-left-radius: 64px !important;
    border-top-right-radius: 64px !important;
  }
  .rounded-3xl-right {
    border-top-right-radius: 64px !important;
    border-bottom-right-radius: 64px !important;
  }
  .rounded-3xl-bottom {
    border-bottom-right-radius: 64px !important;
    border-bottom-left-radius: 64px !important;
  }
  .rounded-3xl-left {
    border-top-left-radius: 64px !important;
    border-bottom-left-radius: 64px !important;
  }
  .position-3xl-relative {
    position: relative !important;
  }
  .position-3xl-absolute {
    position: absolute !important;
  }
  .position-3xl-fixed {
    position: fixed !important;
  }
  .position-3xl-sticky {
    position: sticky !important;
  }
  .position-3xl-static {
    position: static !important;
  }
  .fs-3xl-1 {
    font-size: var(--fs-1) !important;
  }
  .fs-3xl-2 {
    font-size: var(--fs-2) !important;
  }
  .fs-3xl-3 {
    font-size: var(--fs-3) !important;
  }
  .fs-3xl-4 {
    font-size: var(--fs-4) !important;
  }
  .fs-3xl-5 {
    font-size: var(--fs-5) !important;
  }
  .fs-3xl-6 {
    font-size: var(--fs-6) !important;
  }
}