.worken-section {
  background-image: linear-gradient(to bottom left, #1f1f1f, #000000);
  padding: 1rem;
  padding-bottom: 0;
}
ol.workn {
  --column-gap: 1rem;
  --row-gap: 2rem;
  --rocket-aspect: calc(134.13 / 196.24); /* svg viewbox */
  --rocket-width: 3rem;
  --rocket-height: calc(var(--rocket-width) / var(--rocket-aspect));
  --flame-outer-color: #f16e39;
  --flame-inner-color: #fed103;
  --number-circle-size: 2.5rem;
  --number-circle-border-size: 0.25rem;
  --number-line-height: 0.125rem;
  --number-line-length: calc(var(--rocket-width) / 2 + var(--column-gap) / 2);
  --number-line-dot-size: 0.25rem;
  padding-bottom: 5rem;
  list-style: none;
  display: grid;
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
  grid-template-columns: var(--rocket-width) 1fr;
  counter-reset: liCount;
  font-family: system-ui, sans-serif;
  color: white;
  overflow: hidden;
  width: min(45rem, 100%);
  margin-inline: auto; margin-bottom: 0px;
}
@media (min-width: 30rem) {
  wrapper {
    padding: 2rem;
  }
  ol.workn {
    --column-gap: 2rem;
    --rocket-width: 5rem;
    grid-template-columns: 1fr var(--rocket-width) 1fr;
  }
  ol.workn .rocket {
    grid-column: 2 !important;
  }
  ol.workn > li {
    grid-column: 1/-1 !important;
    width: calc(50% - var(--rocket-width) / 2 - var(--column-gap));
  }
  ol.workn > li:nth-of-type(odd) {
    justify-self: end;
  }
  ol.workn > li:nth-of-type(even) {
    text-align: right;
  }
  ol.workn > li:nth-of-type(even):after {
    left: unset;
    right: calc(var(--circle-pos-x) * -1);
    --dot_pos_multiplier: -1;
  }
  ol.workn > li:nth-of-type(even)::before {
    right: unset;
    left: calc(100% + var(--column-gap) / 2);
  }
}
ol.workn::after {
  content: "";
  grid-row: 1;
  grid-column: 1/-1;
}
ol.workn .rocket {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  isolation: isolate;
}
ol.workn .rocket svg {
  width: var(--rocket-width);
  height: var(--rocket-height);
}
ol.workn .rocket::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 200vh;
  top: calc(100% - var(--rocket-height) * 0.2);
  left: 25%;
  z-index: -1;
  background-image: radial-gradient(
      ellipse at center top,
      var(--flame-inner-color) 20%,
      transparent 50%
    ),
    linear-gradient(
      to right,
      transparent 20%,
      var(--flame-outer-color) 40%,
      var(--flame-inner-color) 50%,
      var(--flame-outer-color) 60%,
      transparent 80%
    ),
    radial-gradient(
      ellipse at center top,
      var(--flame-outer-color) 35%,
      transparent 65%
    );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% calc(var(--rocket-height) * 0.4), 100%,
    100% calc(var(--rocket-height) * 0.4);
}
ol.workn > li {
  counter-increment: liCount;
  grid-column: -2;
  position: relative;
}
ol.workn > li::after {
  content: counter(liCount, decimal-leading-zero);
  width: var(--number-circle-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  position: absolute;
  --circle-pos-x: calc(
    var(--number-circle-size) / 2 + var(--column-gap) + var(--rocket-width) / 2
  );
  left: calc(var(--circle-pos-x) * -1);
  top: calc(50% - var(--number-circle-size) / 2);
  background-color: var(--accent-color);
  font-weight: 600;
  --dot-size: calc(
    var(--number-circle-size) / -2 + var(--number-line-dot-size)
  );
  box-shadow: inset 0 0 0 var(--number-circle-border-size) currentcolor,
    inset -0.125rem 0.125rem 0.25rem var(--number-circle-border-size) rgb(0 0 0 /
          0.25),
    -0.125rem 0.125rem 0.25rem rgb(0 0 0 / 0.5),
    calc(var(--number-line-length) * var(--dot_pos_multiplier, 1)) 0 0
      var(--dot-size) currentcolor;
}

ol.workn > li::before {
  position: absolute;
  content: "";
  width: var(--number-line-length);
  height: var(--number-line-height);
  background-color: currentcolor;
  right: calc(100% + var(--column-gap) / 2);
  top: calc(50% - var(--number-line-height) / 2);
}



.fixedoffer {
	position: fixed;
	width: 200px;
	height: 30px;
	margin: 0;
	padding: 0;
	top: 18%;
	right: -135px;
	z-index: 999;
	border-radius: 10px 0 0 10px;
	overflow: hidden;
	background: #fff;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.fixedoffer .phonenumber {
	display: block;
	font-size: 14px;
	line-height: 16px;
	text-align: left;
	font-weight: 600;
	letter-spacing: .6px;
	text-decoration: none;
	color: #fff;
	margin: 0;
	padding: 0;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
 .phonenumber  i.fa-phone-volume{-webkit-animation: flipInY 1.25s infinite;
    -moz-animation: flipInY 1.25s infinite;
    -ms-animation: flipInY 1.25s infinite;
    animation: flipInY 1.25s infinite;
}
.fixedoffer .phonenumber span{
	width: 65px;
	height: 35px;
	float: left;
	background: #3e7fb9;
	font-size: 18px;
	margin: 0 15px 0 0;
	text-align: center;
	line-height: 30px;
	color: #fff;
}
.fixedoffer .phonenumber p{
	margin: 0;
	padding: 7px;
	color: #3e7fb9;
}
.phn{
  
    color: #3e7fb9;
  	font-size: 14px;
	line-height: 16px;
	text-align: left;
	font-weight: 600;
	letter-spacing: .6px;
	text-decoration: none;
}
.fixedoffer .phonenumber span i {
	color: #fff;
	-webkit-animation: flipInY 1.25s infinite;
	-moz-animation: flipInY 1.25s infinite;
	-ms-animation: flipInY 1.25s infinite;
	animation: flipInY 1.25s infinite;
}
/*******/
.fixedcall1 {
	position: fixed;
	width: 180px;
	height: 45px;
	margin: 0;
	padding: 0;
	top: 28%;
	right: -135px;
	z-index: 999;
	border-radius: 10px 0 0 10px;
	overflow: hidden;
	background: #fff;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.fixedcall1 .phonenumber {
	display: block;
	font-size: 14px;
	line-height: 16px;
	text-align: left;
	font-weight: 600;
	letter-spacing: .6px;
	text-decoration: none;
	color: #fff;
	margin: 0;
	padding: 0;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.fixedcall1 .phonenumber span{
	width: 45px;
	height: 45px;
	float: left;
	background: #3e7fb9;
	font-size: 25px;
	margin: 0 15px 0 0;
	text-align: center;
	line-height: 45px;
	color: #fff;
}
.fixedcall1 .phonenumber p{
	margin: 0;
	padding: 7px;
	color: #3e7fb9;
}
.phn{
  
    color: #3e7fb9;
  	font-size: 14px;
	line-height: 16px;
	text-align: left;
	font-weight: 600;
	letter-spacing: .6px;
	text-decoration: none;
}
.fixedcall1 .phonenumber span i {
	color: #fff;
	-webkit-animation: flipInY 1.25s infinite;
	-moz-animation: flipInY 1.25s infinite;
	-ms-animation: flipInY 1.25s infinite;
	animation: flipInY 1.25s infinite;
}

.fixedcall {
	position: fixed;
	width: 180px;
	height: 45px;
	margin: 0;
	padding: 0;
	top: 48%;
	right: -135px;
	z-index: 999;
	border-radius: 10px 0 0 10px;
	overflow: hidden;
	background: #fff;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.fixedcall a {
	display: block;
	font-size: 14px;
	line-height: 16px;
	text-align: left;
	font-weight: 600;
	letter-spacing: .6px;
	text-decoration: none;
	color: #fff;
	margin: 0;
	padding: 0;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.fixedcall a span{
	width: 45px;
	height: 45px;
	float: left;
	background: #3e7fb9;
	font-size: 25px;
	margin: 0 15px 0 0;
	text-align: center;
	line-height: 45px;
	color: #fff;
}
.fixedcall a p{
	margin: 0;
	padding: 7px;
	color: #3e7fb9;
}
.fixedcall a svg {
	color: #fff;
	-webkit-animation: tada 1.25s infinite;
	-moz-animation: tada 1.25s infinite;
	-ms-animation: tada 1.25s infinite;
	animation: tada 1.25s infinite;
}
.fixedwhatapp {
	position: fixed;
	width: 180px;
	height: 45px;
	margin: 0;
	padding: 0;
	top: 60%;
	right: -135px;
	z-index: 999999;
	border-radius: 10px 0 0 10px;
	overflow: hidden;
	background: #fff;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.fixedwhatapp a {
	display: block;
	font-size: 14px;
	line-height: 16px;
	text-align: left;
	font-weight: 600;
	letter-spacing: .6px;
	text-decoration: none;
	color: #fff;
	margin: 0;
	padding: 0;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.fixedwhatapp a span{
	width: 45px;
	height: 45px;
	float: left;
	background: green;
	font-size: 25px;
	margin: 0 15px 0 0;
	text-align: center;
	line-height: 45px;
	color: #fff;
}
.fixedwhatapp a p{
	margin: 0;
	padding: 7px;
	color: green;
}
.fixedwhatapp a svg {
	color: #fff;
	-webkit-animation: flipInY 1.25s infinite;
	-moz-animation: flipInY 1.25s infinite;
	-ms-animation: flipInY 1.25s infinite;
	animation: flipInY 1.25s infinite;
}
.fixedwhatapp:hover {
	right: 0;
}
@-webkit-keyframes tada {
 0% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
 10%, 20% {
 -webkit-transform: scale(0.9) rotate(-3deg);
 transform: scale(0.9) rotate(-3deg);
}
 30%, 50%, 70%, 90% {
 -webkit-transform: scale(1.1) rotate(3deg);
 transform: scale(1.1) rotate(3deg);
}
 40%, 60%, 80% {
 -webkit-transform: scale(1.1) rotate(-3deg);
 transform: scale(1.1) rotate(-3deg);
}
 100% {
 -webkit-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
}
 @keyframes tada {
 0% {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
 10%, 20% {
 -webkit-transform: scale(0.9) rotate(-3deg);
 -ms-transform: scale(0.9) rotate(-3deg);
 transform: scale(0.9) rotate(-3deg);
}
 30%, 50%, 70%, 90% {
 -webkit-transform: scale(1.1) rotate(3deg);
 -ms-transform: scale(1.1) rotate(3deg);
 transform: scale(1.1) rotate(3deg);
}
 40%, 60%, 80% {
 -webkit-transform: scale(1.1) rotate(-3deg);
 -ms-transform: scale(1.1) rotate(-3deg);
 transform: scale(1.1) rotate(-3deg);
}
 100% {
 -webkit-transform: scale(1) rotate(0);
 -ms-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
}
.tada {
	-webkit-animation-name: tada;
	animation-name: tada;
}
.fixedcall:hover {
	right: 0;
}
.fixedcall1:hover {
	right: 0;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}