/*
Theme Name: Tattoo Expert Child
Theme URI: http://example.com/tattoo-expert-child
Description: Custom child theme for Tattoo Expert.
Author: Your Name
Author URI: http://example.com
Template: tattoo-expert
Version: 1.0.0
*/

/* Custom CSS starts here */


p {
  color: #000 !important;
}

button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {
  background: #37B6FF;
}
.back-to-top:top::after {
  background: #37B6FF;
}

.site-content {
  padding: 0 0 0 !important;
}
.site-info p {
  color: #fff !important;
}
.nav-menu a {
  color: #000 !important;
}

.nav-menu ul li a:active, .nav-menu ul li a:hover {
  color: #37B6FF !important;
}
aside.widget-area a { color: #fff !important; }
.widget ul li a:focus, a:hover { color: #37B6FF !important; }

.tx-article-box p { font-size: 16px;}

@media (max-width: 768px) {
  .site-info p {
    color: #fff !important;
  }
  .custom-logo-link img {
    margin-top: 10px !important;
    margin-bottom: -10px !important;
  }
}

ul.wp-block-list {
  margin-left: 17px;
}

a {
  color: #37B6FF;
}

.back-to-top:hover::after {
  background: #37B6FF !important;
}

/* =========================================================
AIR OFFICES DESKS
ANIMATED AIRPORT HERO
Flight Path Edition
Blue #37B6FF
========================================================= */


/* =========================================================
ROOT HERO
========================================================= */

.aod-vh-hero {

  --aod-blue: #37B6FF;
  --aod-blue-light: #78D0FF;
  --aod-blue-soft: #9BDEFF;
  --aod-blue-dark: #087FC2;

  --aod-navy: #071222;
  --aod-navy-light: #0B1A2E;

  --aod-white: #FFFFFF;
  --aod-muted: #A7B7C8;

  position: relative;

  width: 100%;
  min-height: 100svh;

  overflow: hidden;

  isolation: isolate;

  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--aod-white);

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(55, 182, 255, 0.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(55, 182, 255, 0.08),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #050D19 0%,
      #081525 45%,
      #071222 100%
    );
}


/* =========================================================
BACKGROUND CONTAINER
========================================================= */

.aod-vh-hero__background {

  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;
}


/* =========================================================
ATMOSPHERIC GLOWS
========================================================= */

.aod-vh-hero__glow {

  position: absolute;

  border-radius: 50%;

  filter: blur(2px);

  pointer-events: none;
}


.aod-vh-hero__glow--one {

  width: 650px;
  height: 650px;

  top: -390px;
  right: -130px;

  background:
    radial-gradient(
      circle,
      rgba(55, 182, 255, 0.16),
      rgba(55, 182, 255, 0.04) 42%,
      transparent 70%
    );

  animation:
    aodGlowOne
    10s
    ease-in-out
    infinite;
}


.aod-vh-hero__glow--two {

  width: 600px;
  height: 600px;

  left: -300px;
  bottom: -340px;

  background:
    radial-gradient(
      circle,
      rgba(55, 182, 255, 0.14),
      transparent 70%
    );

  animation:
    aodGlowTwo
    12s
    ease-in-out
    infinite;
}


.aod-vh-hero__glow--three {

  width: 450px;
  height: 450px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  background:
    radial-gradient(
      circle,
      rgba(55, 182, 255, 0.08),
      transparent 68%
    );

  animation:
    aodCenterGlow
    8s
    ease-in-out
    infinite;
}


/* =========================================================
BACKGROUND GRID
========================================================= */

.aod-vh-hero__grid {

  position: absolute;

  inset: -10%;

  opacity: 0.23;

  background-image:

    linear-gradient(
      rgba(55, 182, 255, 0.055) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(55, 182, 255, 0.055) 1px,
      transparent 1px
    );

  background-size:
    80px 80px;

  transform:
    perspective(700px)
    rotateX(58deg)
    scale(1.4);

  transform-origin: center bottom;

  animation:
    aodGridMove
    18s
    linear
    infinite;
}


/* =========================================================
RADAR CIRCLES
========================================================= */

.aod-vh-hero__radar {

  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  border: 1px solid
    rgba(55, 182, 255, 0.10);

  transform:
    translate(-50%, -50%);

  pointer-events: none;
}


.aod-vh-hero__radar--one {

  width: 380px;
  height: 380px;

  animation:
    aodRadarPulse
    7s
    ease-in-out
    infinite;
}


.aod-vh-hero__radar--two {

  width: 650px;
  height: 650px;

  border-color:
    rgba(55, 182, 255, 0.07);

  animation:
    aodRadarPulse
    9s
    ease-in-out
    infinite;

  animation-delay: 1.2s;
}


.aod-vh-hero__radar--three {

  width: 950px;
  height: 950px;

  border-color:
    rgba(55, 182, 255, 0.045);

  animation:
    aodRadarPulse
    12s
    ease-in-out
    infinite;

  animation-delay: 2s;
}


/* =========================================================
FLIGHT ROUTES SVG
========================================================= */

.aod-vh-hero__routes {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  opacity: 0.75;
}


/* Main route */

.aod-vh-hero__route {

  fill: none;

  stroke-linecap: round;

  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;

  stroke-dasharray: 7 15;

  animation:
    aodRouteMove
    18s
    linear
    infinite;
}


/* Route one */

.aod-vh-hero__route--one {

  stroke:
    rgba(55, 182, 255, 0.26);

  stroke-width: 2;

  animation-duration: 18s;
}


/* Route two */

.aod-vh-hero__route--two {

  stroke:
    rgba(55, 182, 255, 0.15);

  stroke-width: 1.5;

  stroke-dasharray: 4 18;

  animation-duration: 23s;

  animation-direction: reverse;
}


/* Route three */

.aod-vh-hero__route--three {

  stroke:
    rgba(120, 208, 255, 0.13);

  stroke-width: 1;

  stroke-dasharray: 3 14;

  animation-duration: 28s;
}


/* =========================================================
MOVING FLIGHT DOTS
========================================================= */

.aod-vh-hero__flight-dot {

  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--aod-blue);

  box-shadow:

    0 0 0 4px
      rgba(55, 182, 255, 0.08),

    0 0 18px
      rgba(55, 182, 255, 0.85),

    0 0 45px
      rgba(55, 182, 255, 0.40);
}


/* Dot one */

.aod-vh-hero__flight-dot--one {

  left: 12%;
  top: 62%;

  animation:
    aodFlightDotOne
    9s
    linear
    infinite;
}


/* Dot two */

.aod-vh-hero__flight-dot--two {

  left: 82%;
  top: 28%;

  animation:
    aodFlightDotTwo
    12s
    linear
    infinite;
}


/* Dot three */

.aod-vh-hero__flight-dot--three {

  left: 67%;
  top: 78%;

  animation:
    aodFlightDotThree
    10s
    linear
    infinite;
}


/* =========================================================
AIRCRAFT
========================================================= */

.aod-vh-hero__plane {

  position: absolute;

  display: flex;

  align-items: center;
  justify-content: center;

  color:
    rgba(255, 255, 255, 0.72);

  filter:
    drop-shadow(
      0 0 10px
      rgba(55, 182, 255, 0.30)
    );
}


.aod-vh-hero__plane svg {

  width: 25px;
  height: 25px;
}


/* Plane one */

.aod-vh-hero__plane--one {

  left: 18%;
  top: 26%;

  transform: rotate(48deg);

  animation:
    aodPlaneOne
    14s
    ease-in-out
    infinite;
}


/* Plane two */

.aod-vh-hero__plane--two {

  right: 15%;
  bottom: 22%;

  opacity: 0.5;

  transform: rotate(-35deg);

  animation:
    aodPlaneTwo
    17s
    ease-in-out
    infinite;
}


/* =========================================================
BACKGROUND PARTICLES
========================================================= */

.aod-vh-hero__particle {

  position: absolute;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background:
    rgba(120, 208, 255, 0.75);

  box-shadow:
    0 0 12px
    rgba(55, 182, 255, 0.65);

  animation:
    aodParticle
    5s
    ease-in-out
    infinite;
}


.aod-vh-hero__particle--one {
  left: 13%;
  top: 19%;
  animation-delay: 0s;
}


.aod-vh-hero__particle--two {
  left: 30%;
  top: 74%;
  animation-delay: 1.2s;
}


.aod-vh-hero__particle--three {
  right: 18%;
  top: 18%;
  animation-delay: 2s;
}


.aod-vh-hero__particle--four {
  right: 29%;
  bottom: 19%;
  animation-delay: 2.8s;
}


.aod-vh-hero__particle--five {
  left: 7%;
  bottom: 30%;
  animation-delay: 1.7s;
}


.aod-vh-hero__particle--six {
  right: 8%;
  bottom: 40%;
  animation-delay: 3.2s;
}


/* =========================================================
MAIN CONTENT
========================================================= */

.aod-vh-hero__inner {

  position: relative;

  z-index: 5;

  width: min(1200px, 100%);

  min-height: 100svh;

  margin: 0 auto;

  padding:
    clamp(50px, 8vh, 100px)
    clamp(20px, 5vw, 70px);

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;
}


/* =========================================================
CONTENT
========================================================= */

.aod-vh-hero__content {

  width: 100%;

  max-width: 1050px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

/* =========================================================
MAIN TITLE
========================================================= */

.aod-vh-hero__title {

  margin: 0;

  max-width: 1050px;

  color:
    #FFFFFF;

  font-family:
    "Clear Sans",
    Arial,
    Roboto,
    sans-serif;

  font-size:
    clamp(52px, 5vw, 92px);

  font-weight:
    800;

  letter-spacing:
    -0.065em;

  line-height:
    0.98;

  text-wrap:
    balance;

  text-shadow:
    0 8px 35px
    rgba(0, 0, 0, 0.25);

  animation:
    aodTitleIn
    1s
    cubic-bezier(.16,1,.3,1)
    both;
}


/* Blue title line */

.aod-vh-hero__title span {

  position: relative;

  display: block;

  color:
    var(--aod-blue);

  text-shadow:

    0 0 30px
      rgba(55, 182, 255, 0.20),

    0 8px 35px
      rgba(0, 0, 0, 0.22);
}


/* Animated underline */

.aod-vh-hero__title span::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: -14px;

  width: min(260px, 45%);

  height: 3px;

  border-radius: 999px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--aod-blue),
      var(--aod-blue-light),
      var(--aod-blue),
      transparent
    );

  box-shadow:
    0 0 16px
    rgba(55, 182, 255, 0.65);

  animation:
    aodUnderline
    3s
    ease-in-out
    infinite;
}


/* =========================================================
DESCRIPTION
========================================================= */

.aod-vh-hero__description {

  max-width: 780px;

  margin:
    34px auto 0;

  color:
    var(--aod-muted) !important;

  font-family:
    "Clear Sans",
    Arial,
    Roboto,
    sans-serif;

  font-size:
    clamp(17px, 1.35vw, 21px);

  font-weight:
    400;

  line-height:
    1.65;

  letter-spacing:
    -0.01em;

  text-wrap:
    balance;

  animation:
    aodDescriptionIn
    1s
    0.15s
    cubic-bezier(.16,1,.3,1)
    both;
}


/* =========================================================
SEARCH WRAPPER
========================================================= */

.aod-vh-hero__search {

  width: 100%;

  max-width: 780px;

  margin:
    38px auto 0;

  animation:
    aodSearchIn
    1s
    0.3s
    cubic-bezier(.16,1,.3,1)
    both;
}


/* =========================================================
SEARCH FORM
========================================================= */

.aod-vh-hero__search-form {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  min-height: 78px;

  padding: 8px;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.055)
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  box-shadow:

    0 25px 70px
      rgba(0, 0, 0, 0.28),

    inset 0 1px 0
      rgba(255, 255, 255, 0.10),

    0 0 0 1px
      rgba(55, 182, 255, 0.035);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}


/* Animated blue edge */

.aod-vh-hero__search-form::before {

  content: "";

  position: absolute;

  inset: -1px;

  z-index: -1;

  border-radius: inherit;

  padding: 1px;

  background:
    linear-gradient(
      110deg,
      transparent 15%,
      rgba(55, 182, 255, 0.65),
      transparent 42%,
      transparent 70%,
      rgba(55, 182, 255, 0.25),
      transparent 90%
    );

  background-size:
    220% 100%;

  animation:
    aodSearchBorder
    5s
    linear
    infinite;

  opacity: 0.65;

  -webkit-mask:
    linear-gradient(#fff 0 0)
    content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:
    xor;

  mask-composite:
    exclude;

  pointer-events: none;
}


/* Focus */

.aod-vh-hero__search-form:focus-within {

  transform:
    translateY(-3px);

  border-color:
    rgba(55, 182, 255, 0.45);

  box-shadow:

    0 30px 80px
      rgba(0, 0, 0, 0.34),

    0 0 0 5px
      rgba(55, 182, 255, 0.08),

    0 0 45px
      rgba(55, 182, 255, 0.08),

    inset 0 1px 0
      rgba(255, 255, 255, 0.12);
}


/* =========================================================
SEARCH ICON
========================================================= */

.aod-vh-hero__search-icon {

  flex:
    0 0 58px;

  width: 58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--aod-blue);
}


.aod-vh-hero__search-icon svg {

  width: 24px;
  height: 24px;

  filter:
    drop-shadow(
      0 0 8px
      rgba(55, 182, 255, 0.45)
    );
}


/* =========================================================
SEARCH LABEL
========================================================= */

.aod-vh-hero__search-label {

  flex: 1;

  min-width: 0;

  display: block;
}


/* =========================================================
SEARCH INPUT
========================================================= */

.aod-vh-hero__search-input {

  width: 100%;

  padding:
    12px 8px;

  box-sizing: border-box;

  border: 0 !important;

  outline: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    #FFFFFF;

  font-family:
    "Clear Sans",
    Arial,
    sans-serif;

  font-size:
    17px;

  line-height:
    1.4;
}


.aod-vh-hero__search-input::placeholder {

  color:
    rgba(195, 211, 224, 0.68);

  opacity: 1;
}


/* =========================================================
SEARCH BUTTON
========================================================= */

.aod-vh-hero__search-button {

  flex:
    0 0 auto;

  min-height:
    60px;

  padding:
    0 27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border:
    0;

  border-radius:
    16px;

  background:
    linear-gradient(
      135deg,
      #37B6FF,
      #087FC2
    );

  color:
    #FFFFFF;

  font-family:
    "Clear Sans",
    Arial,
    sans-serif;

  font-size:
    16px;

  font-weight:
    700;

  cursor:
    pointer;

  box-shadow:
    0 10px 30px
    rgba(55, 182, 255, 0.30);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}


.aod-vh-hero__search-button svg {

  width: 19px;
  height: 19px;
}


/* Hover */

.aod-vh-hero__search-button:hover {

  transform:
    translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #68CAFF,
      #0784C9
    );

  box-shadow:
    0 15px 38px
    rgba(55, 182, 255, 0.42);
}


/* Focus */

.aod-vh-hero__search-button:focus-visible {

  outline:
    3px solid
    rgba(55, 182, 255, 0.35);

  outline-offset:
    3px;
}


/* =========================================================
SEARCH HINT
========================================================= */

.aod-vh-hero__hint {

  margin-top:
    15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    rgba(167, 183, 200, 0.60);

  font-family:
    "Clear Sans",
    Arial,
    sans-serif;

  font-size:
    11px;

  letter-spacing:
    0.04em;

  animation:
    aodHintIn
    1s
    0.45s
    ease-out
    both;
}


.aod-vh-hero__hint span:not(:first-child) {

  color:
    rgba(120, 208, 255, 0.75);
}


/* =========================================================
BOTTOM LINE
========================================================= */

.aod-vh-hero__bottom-line {

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 100%;

  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(55, 182, 255, 0.25),
      rgba(55, 182, 255, 0.65),
      rgba(55, 182, 255, 0.25),
      transparent
    );

  box-shadow:
    0 0 20px
    rgba(55, 182, 255, 0.25);
}


/* =========================================================
ACCESSIBILITY
========================================================= */

.aod-vh-hero .screen-reader-text {

  position:
    absolute !important;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip:
    rect(0, 0, 0, 0);

  white-space:
    nowrap;

  border:
    0;
}


/* =========================================================
ANIMATION
GLOW ONE
========================================================= */

@keyframes aodGlowOne {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(-35px, 25px, 0)
      scale(1.12);
  }
}


/* =========================================================
ANIMATION
GLOW TWO
========================================================= */

@keyframes aodGlowTwo {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(40px, -30px, 0)
      scale(1.15);
  }
}


/* =========================================================
ANIMATION
CENTER GLOW
========================================================= */

@keyframes aodCenterGlow {

  0%,
  100% {
    opacity: 0.65;
    transform:
      translate(-50%, -50%)
      scale(0.9);
  }

  50% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.15);
  }
}


/* =========================================================
ANIMATION
GRID
========================================================= */

@keyframes aodGridMove {

  0% {
    background-position:
      0 0,
      0 0;
  }

  100% {
    background-position:
      0 80px,
      80px 0;
  }
}


/* =========================================================
ANIMATION
RADAR
========================================================= */

@keyframes aodRadarPulse {

  0%,
  100% {
    opacity: 0.35;

    transform:
      translate(-50%, -50%)
      scale(0.96);
  }

  50% {
    opacity: 0.8;

    transform:
      translate(-50%, -50%)
      scale(1.03);
  }
}


/* =========================================================
ANIMATION
ROUTES
========================================================= */

@keyframes aodRouteMove {

  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -400;
  }
}


/* =========================================================
ANIMATION
FLIGHT DOT ONE
========================================================= */

@keyframes aodFlightDotOne {

  0% {
    transform:
      translate3d(0, 0, 0);

    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    transform:
      translate3d(300px, -180px, 0);
  }

  90% {
    opacity: 1;
  }

  100% {
    transform:
      translate3d(650px, -40px, 0);

    opacity: 0;
  }
}


/* =========================================================
ANIMATION
FLIGHT DOT TWO
========================================================= */

@keyframes aodFlightDotTwo {

  0% {
    transform:
      translate3d(0, 0, 0);

    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    transform:
      translate3d(-260px, 170px, 0);
  }

  90% {
    opacity: 1;
  }

  100% {
    transform:
      translate3d(-600px, 70px, 0);

    opacity: 0;
  }
}


/* =========================================================
ANIMATION
FLIGHT DOT THREE
========================================================= */

@keyframes aodFlightDotThree {

  0% {
    transform:
      translate3d(0, 0, 0);

    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    transform:
      translate3d(-220px, -210px, 0);
  }

  90% {
    opacity: 1;
  }

  100% {
    transform:
      translate3d(-500px, -280px, 0);

    opacity: 0;
  }
}


/* =========================================================
ANIMATION
AIRPLANE ONE
========================================================= */

@keyframes aodPlaneOne {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(48deg);

    opacity: 0.15;
  }

  15% {
    opacity: 0.75;
  }

  50% {
    transform:
      translate3d(180px, 100px, 0)
      rotate(48deg);

    opacity: 0.9;
  }

  85% {
    opacity: 0.35;
  }
}


/* =========================================================
ANIMATION
AIRPLANE TWO
========================================================= */

@keyframes aodPlaneTwo {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(-35deg);
  }

  50% {
    transform:
      translate3d(-160px, -90px, 0)
      rotate(-28deg);
  }
}


/* =========================================================
ANIMATION
PARTICLES
========================================================= */

@keyframes aodParticle {

  0%,
  100% {
    transform:
      translateY(0)
      scale(0.8);

    opacity:
      0.25;
  }

  50% {
    transform:
      translateY(-18px)
      scale(1.35);

    opacity:
      1;
  }
}


/* =========================================================
ANIMATION
TITLE
========================================================= */

@keyframes aodTitleIn {

  from {
    opacity: 0;

    transform:
      translateY(28px)
      scale(0.97);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
ANIMATION
DESCRIPTION
========================================================= */

@keyframes aodDescriptionIn {

  from {
    opacity: 0;

    transform:
      translateY(20px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
ANIMATION
SEARCH
========================================================= */

@keyframes aodSearchIn {

  from {
    opacity: 0;

    transform:
      translateY(22px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
ANIMATION
HINT
========================================================= */

@keyframes aodHintIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
ANIMATION
UNDERLINE
========================================================= */

@keyframes aodUnderline {

  0%,
  100% {
    opacity: 0.45;

    transform:
      translateX(-50%)
      scaleX(0.75);
  }

  50% {
    opacity: 1;

    transform:
      translateX(-50%)
      scaleX(1);
  }
}


/* =========================================================
ANIMATION
SEARCH BORDER
========================================================= */

@keyframes aodSearchBorder {

  0% {
    background-position:
      100% 0;
  }

  100% {
    background-position:
      -120% 0;
  }
}


/* =========================================================
ANIMATION
BLINK
========================================================= */

@keyframes aodBlink {

  0%,
  100% {
    opacity: 0.45;

    box-shadow:
      0 0 5px
      rgba(55, 182, 255, 0.4);
  }

  50% {
    opacity: 1;

    box-shadow:
      0 0 14px
      rgba(55, 182, 255, 1);
  }
}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

  .aod-vh-hero__title {

    font-size:
      clamp(48px, 8vw, 72px);
  }


  .aod-vh-hero__description {

    max-width:
      680px;

    font-size:
      18px;
  }


  .aod-vh-hero__search {

    max-width:
      700px;
  }


  .aod-vh-hero__radar--three {

    width:
      750px;

    height:
      750px;
  }


  .aod-vh-hero__route--three {

    opacity:
      0.55;
  }
}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 650px) {

  .aod-vh-hero {

    min-height:
      100svh;
  }


  .aod-vh-hero__inner {

    min-height:
      100svh;

    padding:
      55px 18px 50px;
  }

  /* Heading */

  .aod-vh-hero__title {

    font-size:
      clamp(43px, 12.5vw, 62px);

    line-height:
      0.98;

    letter-spacing:
      -0.065em;
  }


  .aod-vh-hero__title span::after {

    bottom:
      -9px;

    width:
      110px;

    height:
      3px;
  }


  /* Description */

  .aod-vh-hero__description {

    margin-top:
      27px;

    max-width:
      500px;

    font-size:
      15.5px;

    line-height:
      1.6;
  }


  /* Search */

  .aod-vh-hero__search {

    margin-top:
      28px;
  }


  .aod-vh-hero__search-form {

    min-height:
      auto;

    padding:
      6px;

    border-radius:
      17px;
  }


  .aod-vh-hero__search-icon {

    flex:
      0 0 40px;

    width:
      40px;
  }


  .aod-vh-hero__search-icon svg {

    width:
      20px;

    height:
      20px;
  }


  .aod-vh-hero__search-input {

    padding:
      9px 3px;

    font-size:
      13px;
  }


  .aod-vh-hero__search-button {

    min-height:
      50px;

    padding:
      0 16px;

    border-radius:
      12px;

    font-size:
      13px;

    gap:
      0;
  }


  .aod-vh-hero__search-button svg {

    display:
      none;
  }


  /* Hint */

  .aod-vh-hero__hint {

    margin-top:
      12px;

    font-size:
      9px;

    gap:
      6px;
  }


  /* Background */

  .aod-vh-hero__grid {

    background-size:
      55px 55px;

    opacity:
      0.18;

    transform:
      perspective(500px)
      rotateX(62deg)
      scale(1.7);
  }


  .aod-vh-hero__radar--one {

    width:
      260px;

    height:
      260px;
  }


  .aod-vh-hero__radar--two {

    width:
      470px;

    height:
      470px;
  }


  .aod-vh-hero__radar--three {

    width:
      700px;

    height:
      700px;
  }


  /* Routes */

  .aod-vh-hero__routes {

    opacity:
      0.55;
  }


  /* Planes */

  .aod-vh-hero__plane--one {

    left:
      8%;

    top:
      21%;
  }


  .aod-vh-hero__plane--two {

    right:
      8%;

    bottom:
      18%;
  }


  .aod-vh-hero__plane svg {

    width:
      18px;

    height:
      18px;
  }


  /* Hide some particles on small screens */

  .aod-vh-hero__particle--two,
  .aod-vh-hero__particle--five {

    display:
      none;
  }
}


/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .aod-vh-hero__inner {

    padding:
      45px 15px;
  }


  .aod-vh-hero__title {

    font-size:
      41px;
  }


  .aod-vh-hero__description {

    font-size:
      14.5px;
  }


  .aod-vh-hero__search-form {

    padding:
      5px;

    border-radius:
      15px;
  }


  .aod-vh-hero__search-icon {

    flex-basis:
      34px;

    width:
      34px;
  }


  .aod-vh-hero__search-input {

    font-size:
      12px;
  }


  .aod-vh-hero__search-button {

    min-height:
      47px;

    padding:
      0 13px;

    font-size:
      12px;
  }


  .aod-vh-hero__hint {

    font-size:
      8px;
  }
}


/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .aod-vh-hero *,
  .aod-vh-hero *::before,
  .aod-vh-hero *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;
  }
}