:root {
  --thm-base: linear-gradient(135deg, #70f28b 0%, #4ecdc4 50%, #45b7d1 100%);

}

.preloader .icon {
  background-image: url(../../../images/colors/color-2/icons/preloader.png);
}

.main-header .other-links .link-box .link .icon {
  background-image: url(../../images/colors/color-2/icons/chat-icon.png);
}

.why-us-section .left-col .image-box::before {
  background-image: url(../../images/colors/color-2/icons/shape-1.png);
}

.banner-carousel .slide-item .left-top-line {
  background-image: url(../../images/colors/color-2/main-slider/left-curve-line.png);
}
.trusted-section .col-header .header-inner::before {
  background-image: url(../../images/colors/color-2/icons/curve-down-left.png);
}
.banner-carousel .slide-item .left-top-line {
  background-image: url(../../images/colors/color-2/main-slider/left-curve-line.png);
}

.banner-carousel .slide-item .right-bottom-curve {
  background-image: url(../../images/colors/color-2/main-slider/right-curved-bg.png);
}

.banner-carousel .slide-item .shape-1 {
  background-image: url(../../images/colors/color-2/main-slider/b-2-shape-1.png);
}

.banner-carousel .slide-item .shape-3 {
  background-image: url(../../images/colors/color-2/main-slider/b-2-shape-3.png);
}

.banner-carousel .slide-item .shape-4 {
  background-image: url(../../images/colors/color-2/main-slider/b-2-shape-4.png);
}

.page-banner .shape-1 {
  background-image: url(../../images/colors/color-2/background/b-shape-1.png);
}
.header-style-four .other-links .link-box .link .icon {
  background-image: url(../../images/colors/color-2/icons/chat-icon-dark.png);
}

/* Main Background Container */
.dynamic-background {
  position: relative;
  background: var(--thm-base);
  overflow: hidden;
}

/* Dark Overlay for Better Readability */
.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 6;
  pointer-events: none;
}

/* Floating Particles */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: float-particle linear infinite;
}

.particle:nth-child(1) {
  width: 4px; height: 4px;
  left: 10%; top: 100%;
  animation-duration: 15s;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  width: 6px; height: 6px;
  left: 20%; top: 100%;
  animation-duration: 18s;
  animation-delay: 2s;
}

.particle:nth-child(3) {
  width: 3px; height: 3px;
  left: 30%; top: 100%;
  animation-duration: 12s;
  animation-delay: 4s;
}

.particle:nth-child(4) {
  width: 5px; height: 5px;
  left: 50%; top: 100%;
  animation-duration: 20s;
  animation-delay: 1s;
}

.particle:nth-child(5) {
  width: 2px; height: 2px;
  left: 70%; top: 100%;
  animation-duration: 16s;
  animation-delay: 3s;
}

.particle:nth-child(6) {
  width: 4px; height: 4px;
  left: 80%; top: 100%;
  animation-duration: 14s;
  animation-delay: 5s;
}

.particle:nth-child(7) {
  width: 7px; height: 7px;
  left: 90%; top: 100%;
  animation-duration: 22s;
  animation-delay: 6s;
}

/* Textured Overlay */
.texture-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 1px, transparent 1px),
    radial-gradient(circle at 40% 40%, rgba(255,255,255,0.05) 2px, transparent 2px),
    linear-gradient(45deg, transparent 49%, rgba(255,255,255,0.02) 50%, transparent 51%);
  background-size: 25px 25px, 35px 35px, 50px 50px, 20px 20px;
  animation: texture-shift 30s ease-in-out infinite;
  z-index: 3;
}

/* Moving Geometric Shapes */
.geo-shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  animation: geo-float 8s ease-in-out infinite;
}

.geo-shape:nth-child(1) {
  width: 60px; height: 60px;
  top: 20%; left: 15%;
  border-radius: 50%;
  animation-delay: 0s;
  animation-duration: 12s;
}

.geo-shape:nth-child(2) {
  width: 40px; height: 40px;
  top: 60%; right: 20%;
  transform: rotate(45deg);
  animation-delay: 2s;
  animation-duration: 15s;
}

.geo-shape:nth-child(3) {
  width: 80px; height: 80px;
  bottom: 30%; left: 10%;
  border-radius: 20px;
  animation-delay: 4s;
  animation-duration: 10s;
}

.geo-shape:nth-child(4) {
  width: 50px; height: 50px;
  top: 40%; right: 10%;
  border-radius: 50%;
  animation-delay: 1s;
  animation-duration: 14s;
}

/* Gradient Orbs */
.gradient-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  animation: orb-pulse 6s ease-in-out infinite;
}

.gradient-orb:nth-child(1) {
  width: 200px; height: 200px;
  top: 10%; left: 5%;
  animation-delay: 0s;
}

.gradient-orb:nth-child(2) {
  width: 150px; height: 150px;
  bottom: 20%; right: 15%;
  animation-delay: 3s;
}

/* Animations */
@keyframes float-particle {
  0% { 
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { 
    transform: translateY(-100vh) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes texture-shift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, 5px); }
  50% { transform: translate(-5px, 10px); }
  75% { transform: translate(-10px, -5px); }
}

@keyframes geo-float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  33% { 
    transform: translateY(-30px) rotate(120deg) scale(1.1);
    opacity: 0.6;
  }
  66% { 
    transform: translateY(15px) rotate(240deg) scale(0.9);
    opacity: 1;
  }
}

@keyframes orb-pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: scale(1.2);
    opacity: 0.3;
  }
}