#page-hero {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      row-gap: 20px;
      position: relative;
      background: #ededee;
      color: #434343;
      padding: 10px;
      font-family: IsidoraSans-Bold;
      line-height: 6em;
      min-height: 400px;
      transition: all .5s ease;
}

@media (min-width: 1200px){
      #page-hero {
            padding: 20px 80px;
      }
}

@media (min-width: 992px){
      #page-hero {
            justify-content: space-between;
      }
}

.hero-text {
      position: relative;
      z-index: 2;
}

@media (max-width: 991px){
      .hero-text {
            font-size: 0.8em;
      }
}

.hero-text-normal {
      font-size: 7em;
}

.hero-text-small {
      font-size: 5em;
}

.hero-text-big {
      font-size: 8em;
}

.hero-caption {
      margin-top: 40px;
      line-height: 1em;
      font-family: IsidoraSans;
      font-size: 1.4em;
      width: 350px;
}

@media (min-width: 992px){
      .hero-caption {
            margin-top: 120px;
            font-size: 1em;
      }
}

.hero-figure {
      position: relative;
      z-index: 2;
      display: none;
      width: 560px;
      flex-wrap: wrap;
      gap: 20px;
      pointer-events: none;
}

@media (min-width:576px){
      .hero-figure {
            display: flex;
      }
}

@media (min-width: 992px){
      .hero-figure {
            transform: translateY(80px);
      }
}

.score-box {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      width: calc(50% - 20px);
      min-width: 250px;
      position: relative;
      border-top: 2px solid #fff;
      border-radius: 7px;
      background: rgba(255,255,255,.3);
      padding: 10px 50px;
      font-family: IsidoraSans;
      line-height: 1em;
}

.score-box::before,
.score-box::after {
      content: "";
      position: absolute;
      left:0;
      top:3px;
      height: 100%;
      width: 2px;
      background: linear-gradient(180deg, rgba(255,255,255,1) 30%, rgba(239,79,26,0) 100%);
}

.score-box::after {
      left: unset;
      right: 0;
}

.score-box-mobile {
      z-index: 2;
      animation: float 4s ease-in-out 2;
      box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
}

.score-box-desktop {
      box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
}


@media (min-width: 992px){
      .score-box-desktop {
            transform: translate(-50px, -80px);
      }
}

.score-box-device {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 20px;
      margin: 10px 0;
      color: #434343;
      transform: translateX(-30px);
      font-size: 1.2em;
}

.score-box-title {
      font-size: 1.5em;
      font-family: IsidoraSans-Bold;
      line-height: 1em;
}

.score-box-shapes {
      display: flex;
      justify-content: space-around;
}

.score-box-triangle {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 16px solid #ff3233;
}

.score-box-rectangle {
      width: 16px;
      height: 16px;
      background: #ffaa33;
}

.score-box-circle {
      width: 16px;
      height: 16px;
      background: #00cc66;
      border-radius: 100%;
}

.score-box-webvitals {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 10px 0;
      padding: 5px;
}

.score-box-webvital {
  color: #00cc66;
  font-family: IsidoraSans-SemiBold;
  position: relative;
  font-size: .8em;
  margin: 5px 0;
}

.score-box-webvital::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #00cc66;
  border-radius: 100%;
  left: -25px;
  top: -8px;
}

.score-box-webvital::after {
  content: "";
  width: 70px;
  height: 2px;
  background: #959595;
  position: absolute;
  top: -5px;
  left: 0;
}

.score-box-gtm {
  width: calc(100% - 20px);
  flex-direction: row;
  column-gap: 50px;
  align-items: center;
  padding: 50px;
}

@media (min-width: 992px){
      .score-box-gtm {
            transform: translate(30%, -80px);
      }
}

.score-box-grade {
      font-size: 5em;
      font-family: IsidoraSans-Bold;
      color: #1ccc74;
}

.score-box-gtm-title {
  font-family: IsidoraSans-SemiBold;
}

.score-box-gtm-title span {
  font-size: 2em;
  line-height: 1em;
  color: #1ccc74;
}

.hero-sphere {
      border-radius: 100%;
      background:  linear-gradient(0deg, rgba(202,209,221,1) 2%, rgba(206,216,221,1) 5%, rgba(218,226,226,1) 16%, rgba(226,232,229,1) 100%);
      filter: blur(5px);
      z-index: 0;
      pointer-events: none;
}

.hero-sphere-one {
      position: absolute;
      right: 0px;
      top: -75px;
      width: 270px;
      height: 270px;
      opacity: .8
}

.hero-sphere-two {
      position: absolute;
      right: 300px ;
      top: 150px;
      width: 130px;
      height: 130px;
      opacity: .4;
}

.hero-sphere-three {
      position: absolute;
      right: 500px;
      bottom: 0;
      width: 190px;
      height: 190px;
      opacity: .8;
}

.gauge-badge {
	text-align: center;
}

.gauge-outer {
    position: relative;
}

.gauge-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
	font-size: 3em;
	font-family: monospace;
}

.gauge-result-small {
	font-size: 2.6em;
	transform: translate(-50%, -60%);
}

.score-pass .gauge-result {
	color: #0cce6b;
}

.score-average .gauge-result {
	color: #ffa400;
}

.score-fail .gauge-result {
	color: #ff4e42;
}

.gauge {
	width: 120px;
      position: relative;
      left: 50%;
      transform: translateX(-50%) rotate(-90deg);
}

.gauge-inner {
	stroke-width: 8;
	transition: all ease 1s;
}

.score-pass .gauge-inner {
	fill: #e5f9ef;
}

.score-average .gauge-inner {
	fill: #fff5e4;
}

.score-fail .gauge-inner {
	fill: #ffeceb;
}

.gauge-border {
	fill: transparent;
	transition: stroke-dasharray ease 3s;
}

.score-pass .gauge-border {
	stroke: #0cce6b;
}

.score-average .gauge-border {
	stroke: #ffa400;
}

.score-fail .gauge-border {
	stroke: #ff4e42;
}

#web-vitals {
      padding: 40px;
      width: 100%;
      background: #fff;
}

#web-vitals-subtitle {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-direction: column-reverse;
      justify-content: center;
      color: #2c3539;
      text-transform: uppercase;
      font-size: 2.5em;
      text-align: center;
}

#web-vitals-subtitle .score-box-shapes {
      gap: 50px;
}

#web-vitals-list {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;
}

#web-vitals-list li {
      width: 100%;
      padding: 40px;
      font-family: IsidoraSans;
}

@media (min-width: 552px){
      #web-vitals-list li {
            width: 50%;
      }
}

@media (min-width: 992px){
      #web-vitals-list li {
            width: 33%;
      }
}

.web-vitals-list-element-title {
      display: flex;
      gap: 10px;
      align-items: center;
      font-family: IsidoraSans-SemiBold;
}

.web-vitals-list-element-title::before {
      content: "";
      width: 10px;
      height: 10px;
      background: #0c6;
      display: block;
      border-radius: 50%;
}

#web-vitals-list hr {
      color: #0c6;
      width: 80%;
      height: 3px;
      margin: 10px 0;
      background: #0c6;
      border: 0;
}

.web-vitals-list-element-desc {
      font-size: .85em;
}

#ai-machine-section {
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      position: relative;
      padding-top: 5%;
      background: url(../../images/ai-background.png) repeat;
      overflow:hidden;
}

@media (min-width: 768px){
      #ai-machine-section {
            flex-direction: row;
      }
}

#ai-machine-section-caption {
      display: flex;
      flex-direction: column;
      justify-content: center;
      row-gap: 30px;
      width: 100%;
      height: 100%;
      font-size: .8em;
      padding: 0 40px;
      margin: 20px 0;
}

@media (min-width: 768px){
      #ai-machine-section-caption {
            position: absolute;
            top: 0;
            left: 100px;
            width: 40%;
            margin: 0;
      }
}

@media (min-width: 992px){
      #ai-machine-section-caption {
            row-gap: 60px;
            font-size: 1em;
            padding: 0;
      }
}

#ai-machine-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 2.2;
      transform: translateX(10%);
}

@media (min-width: 768px){
      #ai-machine-wrapper {
            max-width: 70%;
      }
}

#ai-machine-in {
      position: absolute;
      top: 12px;
      right: 7%;
      width: 50%;
}

#ai-machine-out {
      position: absolute;
      top: 49%;
      right: 40.3%;
      width: 50%;
}

#ai-laptop {
      position:absolute;
      animation:aimachine_laptop 10s linear infinite;
      width:12%;
      top:-30%;
      right:-15%;
}

#ai-laptop-optimized {
      opacity: 0;
      position:absolute;
      animation:aimachine_laptop_optimized 10s linear infinite;
      animation-delay:10s;
      width:12%;
      top:40%;
      right:35%;
}

#ai-machine {
      position: absolute;
      top: 2.2%;
      right: -3%;
      transform: translateX(-50%);
      width: 40%;
      height: 100%;
      background: url(../../images/ai-machine.png) no-repeat;
      background-size: contain;
}

#ai-machine-part {
      position: absolute;
      left: 43%;
      width: 10.5%;
      top: 41.5%;
}

#ai-machine-lamp {
  position: absolute;
  top: -8%;
  right: 24%;
  transform: translateX(-50%);
  width: 16%;
  height: 100%;
  background: url(../../images/ai-machine-standby.png) no-repeat;
  background-size: contain;
  animation: ai-machine-lamp 10s linear infinite;
  animation-delay: 7.5s;
}

#ai-machine-display {
      position: absolute;
      top: 44%;
      right: 17.5%;
      transform: translateX(-50%);
      width: 14%;
      height: 100%;
      background: url(/wp-content/themes/swiftai-theme/images/ai-display.png) no-repeat;
      background-size: contain;
      animation: ai-machine-display 10s linear infinite;
      animation-delay: 7.5s;
}

#seo-section {
      display: flex;
      flex-direction: column-reverse;
      gap: 30px;
      flex-wrap: wrap;
      padding: 40px;
      background: #fff;
}

#seo-figure {
      position: relative;
      width: 100%;
      aspect-ratio: 1.5;
}

#seo-caption {
      display: flex;
      flex-direction: column;
      justify-content: center;
      row-gap: 20px;
      width: 100%;
}

@media (min-width: 768px){
      #seo-section {
            flex-direction: row;
            padding: 5% 0;
      }

      #seo-figure {
            width: 50%;
      }

      #seo-caption {
            width: 30%;
      }
}

#laptop-blank {
      position: absolute;
      width: 45%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

#laptop-blank-shadow {
  position: absolute;
  width: 45%;
  top: 52%;
  left: 51%;
  transform: translate(-50%, -50%);
  filter: blur(10px);
}

#website {
      position: absolute;
      width: 40%;
      bottom: 27%;
      left: 31%;
      animation: float-minimal 5s ease infinite;
}

#chart-wide {
      position: absolute;
      top: 57%;
      left: 33%;
      width: 10%;
      transform-origin: 0 100%;
      transform: scaleY(0.5);
}

.in-viewport #chart-wide{
      transform: scaleY(1);
      animation: growy 1.8s ease;
}

#chart {
      position: absolute;
      top: 53%;
      left: 62%;
      width: 10%;
      transform-origin: 0 100%;
      transform: scaleY(0.5);
}

.in-viewport #chart{
      transform: scaleY(1);
      animation: growy 2.3s ease;
}

#magnifier {
      position: absolute;
      top: 40%;
      left: 40%;
      width: 12%;
      animation: searching 10s ease infinite;
}

#jigsaw {
      display: flex;
      flex-direction: column;
      width: 100%;
      aspect-ratio: 3;
}

#jigsaw-left {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      aspect-ratio: 1;
      color: #fff;
      background: #f6330c;
      font-family: IsidoraSans;
      font-size: 2em;
}

#jigsaw-left p {
      padding: 0 20px;
      transform: translateY(-50%);
}

#jigsaw-right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      aspect-ratio: 1;
      background: #2c3539;
      color: #fff;
      font-family: IsidoraSans-Bold;
}

#jigsaw-right p {
      font-size: 8em;
}

#jigsaw-right a {
      position: absolute;
      bottom: 5%;
      right: 5%;
      display: flex;
      column-gap: 10px;
      align-items: center;
      color: #ededee;
      background: rgba(255,255,255,.2);
      padding: 10px 20px;
      border-radius: 50px;
      font-family: IsidoraSans-SemiBold;
      text-decoration: none;
      transition: all .4s ease;
}

#jigsaw-right a::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #ededee;
  display: inline-block;
}

#jigsaw-right a:hover {
      background: rgba(255,255,255,.25);
}

#jigsaw-piece {
      position: absolute;
      top: 0;
      left: 50%;
      width: 150px;
      transform: translate(-50%, -100%) rotate(90deg);
      color: #2c3539;
}

@media (min-width: 576px){
      #jigsaw {
            flex-direction: row;
      }

      #jigsaw-left {
            font-size: 1.5em;
            justify-content: flex-start;
            width: 50%;
      }

      #jigsaw-left p {
            width: 66%;
            transform: translateX(15%);
      }

      #jigsaw-right {
            width: 50%;
      }

      #jigsaw-piece {
            top: 50%;
            left: 0;
            width: 20%;
            transform: translate(-100%, -50%);
      }
}

@media (min-width: 992px){
      #jigsaw-left {
            font-size: 2.7em;
      }

      #jigsaw-right p {
            font-size: 10em;
      }
}

@media (min-width: 1280px){
      #jigsaw-right p {
            font-size: 15em;
      }
}

#pricing {
      background: #ebebf1;
      padding: 30px 0;
}

@media (min-width: 992px){
      #pricing {
            padding: 150px 0;
      }
}

#reviews {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      padding: 0 0 20px 0;
      background: #fff;
      overflow: hidden;
}

@media (min-width: 768px){
      #reviews {
            padding: 120px 0;
      }
}

#reviews-figure {
      display: flex;
      justify-content: center;
      width: 75%
}

#reviews-figure img {
      width: 600px;
}

@media (min-width: 768px){
      #reviews {
            flex-direction: row;
      }

      #reviews-figure {
            width: 40%
      }
}

@keyframes aimachine_laptop {
      0% {
            top: -30%;
            right: -15%;
      }
      100% {
            top: 36%;
            right: 35%;
      }
}

@keyframes aimachine_laptop_optimized {
      0% {
            opacity: 1;
            top: 39%;
            right: 35%;
      }
      100% {
            opacity: 1;
            top: 120%;
            right: 100%;
      }
}

@keyframes ai-machine-display {
      0%{
            background-image: url(../../images/ai-display-red.png);
      }
      14%{
            background-image: url(../../images/ai-display-red.png);
      }
      15%{
            background-image: url(../../images/ai-display-yellow.png);
      }
      29%{
            background-image: url(../../images/ai-display-yellow.png);
      }
      30%{
            background-image: url(../../images/ai-display-green.png);
      }
      54%{
            background-image: url(../../images/ai-display-green.png);
      }
      55%{
            background-image: url(../../images/ai-display.png);
      }
      100%{
            background-image: url(../../images/ai-display.png);
      }
}

@keyframes ai-machine-lamp {
      0%{
            background-image: url(../../images/ai-machine-red.png);
      }
      29%{
            background-image: url(../../images/ai-machine-red.png);
      }
      30%{
            background-image: url(../../images/ai-machine-green.png);
      }
      54%{
            background-image: url(../../images/ai-machine-green.png);
      }
      55%{
            background-image: url(../../images/ai-machine-standby.png);
      }
      100%{
            background-image: url(../../images/ai-machine-standby.png);
      }
}


@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 10px 15px 0px rgba(0,0,0,0.1);
		transform: translatey(-10px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
		transform: translatey(0px);
	}
}

@keyframes growy {
	0% {
		transform: scaleY(0.5);
	}
	100% {
		transform: scaleY(1);
	}
}

@keyframes searching {
      0% {
            top: 40%;
            left: 40%;
      }
      25% {
            top: 38%;
            left: 45%;
      }
      50% {
            top: 42%;
            left: 45%;
      }
      75% {
            top: 45%;
            left: 40%;
      }
      100% {
            top: 40%;
            left: 40%;
      }
}


@keyframes float-minimal {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-5px);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes motion-blur{
      from,
      60%,
      75%,
      90%,
      to {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }

      0% {
            filter: blur(10px);
            text-shadow: -20px 0px 10px #fff;
            transform: translate3d(-1200px, 0, 0);
      }

      60% {
            filter: blur(0px);
            text-shadow: 0px 0px 0px #fff;
            transform: translate3d(25px, 0, 0);
      }

      75% {
            transform: translate3d(-10px, 0, 0);
      }

      90% {
            transform: translate3d(5px, 0, 0);
      }

      to {
            transform: translate3d(0, 0, 0);
      }
}