@layer utilities {
    .animate-fade-in-up {
      animation: fade-in-up 0.8s ease-out forwards;
    }
    .animate-slide-in-right {
      animation: slide-in-right 1s ease-out forwards;
    }
    .animate-float {
      animation: float 6s ease-in-out infinite;
    }
    .animate-float-delay-1 {
      animation: float 6s ease-in-out infinite 1s;
    }
    .animate-float-delay-2 {
      animation: float 6s ease-in-out infinite 2s;
    }
    @keyframes fade-in-up {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes slide-in-right {
      from {
        opacity: 0;
        transform: translateX(100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    @keyframes float {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }
    @keyframes section-reveal {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @keyframes slide-in-left {
      from {
        opacity: 0;
        transform: translateX(-100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    @keyframes rotate-me {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes animation1 {
      0% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-10px) scale(1.05); }
      100% { transform: translateY(0) scale(1); }
    }
    @keyframes pro-float-bob-y {
      0% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-15px) scale(1.02) rotate(2deg);
      }
      100% {
        transform: translateY(0) scale(1);
      }
    }
  }
  :root {
    --primary-green: #34D399;
    --dark-green: #065F46;
    --light-bg: #F9FAFB;
    --dark-text: #1F2937;
    --primary-color: #1dc91d; /* Adjust this if a specific primary-color is preferred over primary-green */
    --thm-base-rgb: 29, 201, 29; /* Example RGB for a green base color */
    --thm-primary: #1dc91d; /* Example primary color, similar to primary-color */
  }
  body {
    font-family: 'Poppins', sans-serif; /* Keep Poppins as the primary font */
  }
  .nav-link {
    @apply relative text-white hover:text-[var(--dark-green)] transition-colors duration-300;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-green);
    transition: width 0.3s ease-in-out;
}
.nav-link:hover::after {
    width: 100%;
}
  .animate-section-reveal {
    animation: section-reveal 0.8s ease-out forwards;
  }
  .animate-slide-in-left {
    animation: slide-in-left 1s ease-out forwards;
  }
  .hero-bg {
    background-color: rgba(0, 50, 0, 0.8); /* لون غامق + شفافية */
    background-image: url('https://cnat.sa/assets/images/backgrounds/main-slider-v1-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  
    /* المزج */
    background-blend-mode: multiply; /* أو overlay */
  }
  .blob {
    filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
  }


  @keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-10px);
    }
    100% {
      transform: translatey(0px);
    }
  }
  .blob-image {
    animation: float 6s ease-in-out infinite;
  }


  :root {
    --primary-color: #13ec5b;
  }
  body {
    font-family: 'Space Grotesk', sans-serif;
  }
  .bg-soft-gradient-green {
    background-image: linear-gradient(to bottom right, #e0f2e9, #c8e6c9, #a5d6a7);
  }
  .leaf-pattern {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M50 0 C0 50 50 100 50 100 S100 50 50 0 Z" fill="rgba(17, 131, 60, 0.05)"/></svg>');
    background-repeat: repeat;
    background-size: 50px;
    opacity: 0.5;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-rise {
    animation: rise 0.5s ease-out forwards;
  }
  .service-card {
    opacity: 0;
  }

  @keyframes card-entrance {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .card-animation {
    animation: card-entrance 0.5s ease-out forwards;
  }

  :root {
    --primary-color: #4CAF50;}
  .blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob-animation 8s ease-in-out infinite both;
  }
  @keyframes blob-animation {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  }
  .project-card:hover .project-image {
    transform: scale(1.1);
  }

  :root {
    --primary-color: #1dc91d;
  }
  .form-input {
    transition: all 0.3s ease-in-out;
  }
  .form-input:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: var(--primary-color);
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .fade-in-on-scroll {
    animation: fadeIn 1.5s ease-out forwards;
  }

.main-slider-one .image-layer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(var(--thm-base-rgb), 0.7), rgba(var(--thm-base-rgb), 0.4)); /* Adjusted for subtle blur/gradient */
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center center;
    background-blend-mode: overlay; /* Changed blend mode for a softer effect */
    background-size: cover;
    z-index: 1;
}

.main-slider-one .shape1 {
    position: absolute;
    top: 25%; /* Adjusted */
    left: 5%; /* Adjusted */
    opacity: 0.3; /* Adjusted */
    z-index: 2;
    animation: rotate-me 20s linear infinite; /* Apply rotate-me animation */
}

.main-slider-one .shape2 {
    position: absolute;
    left: 60%; /* Adjusted */
    bottom: 15%; /* Adjusted */
    opacity: 0.25; /* Adjusted */
    z-index: 2;
    animation: rotate-me 25s linear infinite reverse; /* Apply rotate-me animation in reverse */
}

.main-slider-one .shape3 {
    position: absolute;
    top: 30%; /* Adjusted */
    right: 10%; /* Adjusted */
    opacity: 0.35; /* Adjusted */
    z-index: 2;
    animation: float-bob-y 10s ease-in-out infinite; /* Apply float-bob-y animation */
}

.main-slider-one .shape4 {
    position: absolute;
    top: 5%; /* Adjusted for hero section */
    left: 5%; /* Adjusted for hero section */
    opacity: 0.5; /* Adjusted */
    z-index: 5; /* Ensure it's above other elements but not covering text */
    animation: float-bob-y 10s ease-in-out infinite 0s; /* Apply float-bob-y animation */
}

.main-slider-one .shape5 {
    position: absolute;
    top: 40%; /* Adjusted */
    left: 70%; /* Adjusted */
    opacity: 0.3; /* Adjusted */
    z-index: 2;
    animation: animation1 7s ease-in-out infinite; /* Apply animation1 */
}

.main-slider-one .shape6 {
    position: absolute;
    left: 10%; /* Adjusted */
    bottom: 10%; /* Adjusted */
    opacity: 0.3; /* Adjusted */
    z-index: 2;
    animation: animation1 9s ease-in-out infinite 2s; /* Apply animation1 with delay */
}

.main-slider-one__img {
    position: absolute;
    top: -35px;
    right: -75px;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    overflow: hidden;
    border-top-right-radius: 0;
    opacity: 0;
    transform: translateX(40%);
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    z-index: 2;
}

.main-slider-one__img img {
    width: auto;
}

.main-slider-one .swiper-slide-active .main-slider-one__img {
    opacity: 1;
    transform: translateX(0);
    -webkit-transition-delay: 2500ms;
    -moz-transition-delay: 2500ms;
    -ms-transition-delay: 2500ms;
    -o-transition-delay: 2500ms;
    transition-delay: 2500ms;
}

.text-base{

  color:white;
}