/*====================================================

        NOUR FC - PREMIUM ANIMATED BACKGROUND

====================================================*/

:root {
  --red: #cf0f2d;
  --blue: #005dff;
  --white: #ffffff;
  --bg: #f7f9fc;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);

  overflow-x: hidden;

  position: relative;
}

/**************************************************/

.animated-background {
  position: fixed;

  inset: 0;

  overflow: hidden;

  z-index: -100;

  background: linear-gradient(140deg, #fdfdfd, #edf3ff 40%, #ffffff);
}

/**************************************************/

.mesh {
  position: absolute;

  width: 180%;

  height: 180%;

  left: -40%;

  top: -40%;

  filter: blur(100px);

  opacity: 0.45;

  animation: meshMove 30s linear infinite;

  background:
    radial-gradient(circle at 20% 30%, rgba(207, 15, 45, 0.7), transparent 30%),
    radial-gradient(circle at 80% 25%, rgba(0, 93, 255, 0.65), transparent 32%),
    radial-gradient(
      circle at 40% 70%,
      rgba(207, 15, 45, 0.45),
      transparent 28%
    ),
    radial-gradient(circle at 80% 80%, rgba(0, 93, 255, 0.4), transparent 25%);
}

@keyframes meshMove {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }

  25% {
    transform: rotate(90deg) translate(-4%, 3%);
  }

  50% {
    transform: rotate(180deg) translate(5%, -5%);
  }

  75% {
    transform: rotate(270deg) translate(2%, 4%);
  }

  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}

/**************************************************/

.blob {
  position: absolute;

  filter: blur(45px);

  opacity: 0.55;

  mix-blend-mode: multiply;

  animation:
    blobMove 22s ease-in-out infinite,
    blobRotate 35s linear infinite;
}

.blob svg {
  width: 100%;

  height: 100%;

  display: block;
}

/**************************************************/

.red-one {
  width: 600px;

  height: 600px;

  left: -150px;

  top: -100px;
}

.red-two {
  width: 450px;

  height: 450px;

  right: 5%;

  top: 30%;

  animation-delay: 5s;
}

.blue-one {
  width: 700px;

  height: 700px;

  right: -180px;

  bottom: -120px;

  animation-delay: 2s;
}

.blue-two {
  width: 400px;

  height: 400px;

  left: 35%;

  bottom: -120px;

  animation-delay: 8s;
}

.white-one {
  width: 380px;

  height: 380px;

  left: 40%;

  top: 5%;

  opacity: 0.18;
}

/**************************************************/

@keyframes blobMove {
  0% {
    transform: translate(0, 0) scale(1);
  }

  20% {
    transform: translate(70px, -40px) scale(1.12);
  }

  40% {
    transform: translate(-60px, 60px) scale(0.95);
  }

  60% {
    transform: translate(90px, 40px) scale(1.05);
  }

  80% {
    transform: translate(-40px, -60px) scale(1.15);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes blobRotate {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

/**************************************************/

.wave {
  position: absolute;

  width: 220%;

  height: 420px;

  left: -60%;

  opacity: 0.15;

  filter: blur(10px);
}

.wave1 {
  bottom: 8%;

  animation: waveOne 18s linear infinite;
}

.wave2 {
  top: 15%;

  animation: waveTwo 22s linear infinite reverse;

  opacity: 0.08;
}

.wave svg {
  width: 100%;

  height: 100%;
}

@keyframes waveOne {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-25%);
  }
}

@keyframes waveTwo {
  0% {
    transform: translateX(-20%);
  }

  100% {
    transform: translateX(10%);
  }
}

/**************************************************/

.particles {
  position: absolute;

  inset: 0;

  overflow: hidden;
}

.particles span {
  position: absolute;

  display: block;

  width: 7px;

  height: 7px;

  background: white;

  border-radius: 50%;

  opacity: 0.25;

  animation: particle 15s linear infinite;
}

@keyframes particle {
  0% {
    transform: translateY(120vh) scale(0.4);

    opacity: 0;
  }

  20% {
    opacity: 0.4;
  }

  80% {
    opacity: 0.4;
  }

  100% {
    transform: translateY(-30vh) scale(1.3);

    opacity: 0;
  }
}

/**************************************************/

.header_area {
  background: rgba(255, 255, 255, 0.7);

  backdrop-filter: blur(18px);

  transition: 0.5s;
}

.navbar_fixed {
  background: rgba(255, 255, 255, 0.92) !important;

  backdrop-filter: blur(25px);
}

/**************************************************/

.home_banner_area {
  position: relative;

  overflow: hidden;
}

.home_banner_area::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(207, 15, 45, 0.22),
    transparent,
    rgba(0, 93, 255, 0.2)
  );

  mix-blend-mode: screen;

  pointer-events: none;
}

.home_banner_area::after {
  content: "";

  position: absolute;

  width: 150%;

  height: 150%;

  left: -20%;

  top: -20%;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.18),
    transparent 60%
  );

  animation: heroLight 12s linear infinite;

  pointer-events: none;
}

@keyframes heroLight {
  0% {
    transform: translate(-10%, 0);
  }

  50% {
    transform: translate(12%, 5%);
  }

  100% {
    transform: translate(-10%, 0);
  }
}

/**************************************************/

.single-product {
  background: rgba(255, 255, 255, 0.74);

  backdrop-filter: blur(18px);

  border-radius: 24px;

  overflow: hidden;

  transition: 0.45s;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.single-product:hover {
  transform: translateY(-15px) rotateX(4deg);

  box-shadow:
    0 35px 80px rgba(0, 93, 255, 0.22),
    0 20px 70px rgba(207, 15, 45, 0.22);
}
/*====================================================
    AMELIORATION DE LA LISIBILITE DES TEXTES
====================================================*/

/* Fond plus stable derrière les contenus */
.container {
  position: relative;
  z-index: 5;
}

/* Titres */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1b1b1b;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}

/* Paragraphes */
p {
  color: #555;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
}

/* Sections avec contenu */
.feature-area,
.feature_product_area,
.new_product_area,
.inspired_product_area {
  position: relative;
}

/* Cartes produits plus opaques */
.single-product,
.single-feature,
.new_product {
  background: rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(20px);
}

/* Titres produits */
.single-product h4,
.single-product a h4 {
  color: #222;
}

/* Prix */
.single-product span {
  color: #c90022;

  font-weight: 700;
}

/* Texte de description */
.main_title p {
  color: #555;
}

/* Menu navigation */
.header_area .nav-link,
.header_area .icons {
  color: #222 !important;

  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Banner accueil */
.home_banner_area h3,
.home_banner_area h4,
.home_banner_area p {
  color: white !important;

  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

/* Bouton */
.main_btn {
  color: white !important;

  font-weight: 600;
}

/* Protection mobile */
@media (max-width: 768px) {
  .single-product,
  .single-feature,
  .new_product {
    background: rgba(255, 255, 255, 0.94);
  }
}