@font-face {
    font-family: 'YourFontName';
    src: url('fonts/clash-display-variable.woff2') format('woff2'),
         url('fonts/clash-display-variable.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Helps with page speed / layout shift */
}
/***************************************************
line animation
 **************************************************/



.uline .head-lineb-1,
.uline2 .head-linea-1{
  stroke-dashoffset: 14548.8056640625px;
  stroke-dasharray: 14548.8056640625px;
  -webkit-transition: stroke-dashoffset 6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

.uline.active .head-lineb-1,
.uline2.active .head-linea-1{
  stroke-dashoffset: 0;
}
/* home */
/* hero section start */
.uzz-hero,
.uzz-projects{
	
    position: relative;
    overflow: hidden;
	

    
}
.uzz-hero  .kt-inside-inner-col,
.uzz-hero  .wp-block-kadence-column,
.uzz-hero  .kt-row-column-wrap{
    position: static !important;
}
.uline{
    position: absolute;
    bottom: -5%;
    right: -3.5%;
}
svg.uline2 {
    position: absolute;
    top: -6%;
    left: -4%;
}


.uzz-hero::before,
.uzz-hero::after,
.uzz-projects::before,
.uzz-projects::after{
      content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    filter: blur(100px);
    border-radius:100%;
	animation-name: floating;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.uzz-hero::before{
  
      background: 
    /* First "circle": green, transparent after 50% */
    radial-gradient(circle at 70% 30%, #4f2e55 0%, transparent 50%),
    /* Second "circle": blue, transparent after 50% */
    radial-gradient(circle at 30% 80%, #31223F 0%, transparent 50%),
    /* Third "circle": pink, transparent after 50% */
    radial-gradient(circle at 10% 20%, #E968FE 0%, transparent 50%),
    /* Base background color */
    #171717;
    bottom:-16%;
    left:-10%;
    
}
.uzz-hero::after{

      background: 
    /* First "circle": green, transparent after 50% */
    radial-gradient(circle at 70% 30%, #249AE9 0%, transparent 50%),
    /* Second "circle": blue, transparent after 50% */
    radial-gradient(circle at 30% 80%, #0e2b3f 0%, transparent 50%),
    /* Third "circle": pink, transparent after 50% */
    radial-gradient(circle at 10% 20%, #249AE9 0%, transparent 50%),
    /* Base background color */
    #171717;
    top:-16%;
    right:-10%;
    
}
@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 20px); }
    to   { transform: translate(0, -0px); }    
}

.uzz-projects::before{
  
      background: 
    /* First "circle": green, transparent after 50% */
    radial-gradient(circle at 70% 30%, #4f2e55 0%, transparent 50%),
    /* Second "circle": blue, transparent after 50% */
    radial-gradient(circle at 30% 80%, #31223F 0%, transparent 50%),
    /* Third "circle": pink, transparent after 50% */
    radial-gradient(circle at 10% 20%, #E968FE 0%, transparent 50%),
    /* Base background color */
    #171717;
	bottom:-16%;
    left:-10%;
    
    
}
.uzz-projects::after{
	background: 
    /* First "circle": green, transparent after 50% */
    radial-gradient(circle at 70% 30%, #E968FE 0%, transparent 50%),
    /* Second "circle": blue, transparent after 50% */
    radial-gradient(circle at 30% 80%, #31223F 0%, transparent 50%),
    /* Third "circle": pink, transparent after 50% */
    radial-gradient(circle at 10% 20%, #4f2e55 0%, transparent 50%),
    /* Base background color */
    #171717;
	top: 40%;
    right:-20%;
}


/* container tweak so inline-block spans behave well */
.text-stagger {
/*   display: inline-block; */
  line-height: 1.05;
  white-space: pre-wrap; /* preserve line breaks like <br> */
  will-change: transform;
}

/* each character span */
.text-stagger .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition:
    transform 600ms cubic-bezier(.2,.9,.3,1),
    opacity 420ms ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}

/* active state: characters animate into place */
.text-stagger.stagger-start .char {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* small tweak so long strings break nicely on mobile */
.text-stagger .char + .char {
  word-break: break-word;
}

/* respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .text-stagger .char {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}




/* hero section end */