@keyframes section-shifts-2 {
  0% {
    transform: translateY(0vh) translateX(0vh);
    rotate: 5deg;
  }

  25% {
    transform: translateY(1vh) translateX(0vh);
    rotate: 4deg;
  }

  50% {
    transform: translateY(-1vh) translateX(-1vh);
    rotate: 2.5deg;
  }

  75% {
    transform: translateY(-1vh) translateX(0vh);
    rotate: 4deg;
  }

  100% {
    transform: translateY(0vh) translateX(0vh);
    rotate: 5deg;
  }
}

@keyframes peoples-appearance-second {
  from {
    transform: translateY(30vh) rotate(5deg);

    opacity: 0;
  }

  to {
    transform: translateY(0vh) rotate(-5deg);

    opacity: 1;
  }
}

@keyframes peoples-appearance-second-blured {
  from {
    opacity: 0;
  }

  to {
    opacity: .5;
  }
}

@keyframes form-row-appearance {
  from {
    transform: translateY(20vh);
    opacity: 0;
  }

  to {
    transform: translateY(0vh);
    opacity: 1;
  }
}

@keyframes line-appearance {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

h1 {
    font-size: 55px;
    line-height: 55px;
    padding-left: 12.5vw;
    padding-top: calc(calc(46vh - 17vh) - 80px);
    height: 17vh;
    margin-bottom: 80px;

    transform: translateY(-20vh);
    opacity: 0;

    animation: 1s cubic-bezier(0, 0, 0, 0.97) .2s 1 forwards h1-appearance;
}

h1 span {
    display: inline-grid;
    transform: translateY(-20vh);
    opacity: 0;
    color: var(--green-color);
    animation: 1s cubic-bezier(0, 0, 0, 0.97) 0s 1 forwards h1-appearance;
}

.bg-elipse {
    height: 140vh;
}

.bg-elipse.n3 {
    left: -30vw;
    top: 50vh;
}

.bg-elipse.n2 {
    left: -13vw;
    top: -69vh;
}

.bg-elipse.n1 {
    left: 38vw;
    top: -16vw;
}

.search-service-content {
    min-height: 100vh;
    width: 100%;
}

.services-search-form {
    max-width: max(65vw, 900px);
    gap: 10px;
}

.hint {
    text-align: right;
    margin-right: 20px;
    text-transform: uppercase;
    color: var(--text-color-2);
    opacity: 1;
}

.top.hint {
    text-align: unset;
    padding-left: 12.5vw;
}

.form-row {
    display: grid;
    grid-template-columns: 12.5vw auto;
    transform: translateY(20vh);
    opacity: 0;
}

#r1 {
    animation: 1s cubic-bezier(0, 0, 0, 0.97) 0s 1 forwards form-row-appearance;
}

#r2 {
    animation: 1s cubic-bezier(0, 0, 0, 0.97) .1s 1 forwards form-row-appearance;
}

#r3 {
    animation: 1s cubic-bezier(0, 0, 0, 0.97) .2s 1 forwards form-row-appearance;
}

#r4 {
    animation: 1s cubic-bezier(0, 0, 0, 0.97) .3s 1 forwards form-row-appearance;
}

#r5 {
    margin-top: 40px;
    animation: 1s cubic-bezier(0, 0, 0, 0.97) .4s 1 forwards form-row-appearance;
}


.category-input {
    display: flex;
    gap: 20px;
}

.input-row {
    width: max-content;
}

.field-row {
    background: transparent;
    border: none;
    opacity: 1;
}

.category-input {
    padding: 15px;
    border-radius: 25px;
    border: var(--default-border);
    background: #48484875;
    width: calc(max(60vw, 900px) - 12.5vw - 35px);
}

.category-input aside {
    max-width: 35ch;
    font-size: 25px;
}

#categoryInput {
    font-size: 20px;
    height: max-content;
    padding: 10px;
}

.form-btn {
    padding: 10px;
    border-radius: 25px;
    border: var(--default-border);
    font-size: 20px;
    background: #48484875;
    color: var(--text-color);
    padding-inline: 3ch;
    cursor: pointer;
}

.form-btn:hover {
    background: var(--green-color);
    color: var(--black-color);
}

.input-row.filters {
    display: flex;
    gap: 10px;
}

.keys-input-row {
    display: flex;
    gap: 10px;
    padding: 0px;
    margin: 0px;
}

.keys-input {
    font-size: 20px!important;
    height: max-content!important;
    padding: 10px!important;
    border-radius: 25px!important;
}

.result {
    padding: 15px;
    border-radius: 25px;
    border: var(--default-border);
    background: #1e1e1e75;
    backdrop-filter: blur(90px);
    gap: 20px;
    display: flex;
    width: calc(max(60vw, 900px) - 12.5vw - 15px);
    max-width: calc(max(60vw, 900px) - 12.5vw - 15px);
    max-height: 20em;
}

.results-list {
    padding: 0px;
    margin: 0px;
    margin-bottom: 80px;
    gap: 10px;
    display: flex;
    flex-direction: column;

    transition: all .1s ease;
}

.bg-elipses-container {
    z-index: 0;
}

.h-line {
    position: absolute;
    top: 16vh;
    opacity: 0;
    z-index: -1;
    min-width: 100vw;
    min-height: 31vh;
    animation: 1s cubic-bezier(0, 0, 0, 0.97) 1s 1 forwards line-appearance;
}

.planet {
    display: flex;
    position: absolute;
    right: -10vw;
    height: 140vh;
    /*rotate: 7.5deg;*/
    top: 5vh;
    opacity: 0;

    animation: 3s cubic-bezier(0, 0, 0, 0.97) .25s forwards 1 peoples-appearance, 8s ease-out 3.5s infinite section-shifts-2;
}

#planetImgDesctopBlured {
    display: flex;
    opacity: 0;
    filter: blur(200px);
    animation: 3s cubic-bezier(0, 0, 0, 0.97) 2s forwards 1 peoples-appearance-second-blured;
}

.stroy {
    display: none;
}

.gruz {
    display: none;
    filter: blur(10px) grayscale(.5);
    opacity: 0;
}

.result-service-image-wrapper {
    max-width: 10vw;
    border-radius: 20px;
    border: var(--default-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: all .2s ease;
}

.result-service-image {
    width: 100%;
}

.result h3 {
    font-size: 25px;
    margin: 0px;
}

.result-main-data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.result-main-data a {
    font-size: 25px;
}

.result-controls-data {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: auto;
}

.result-controls-data label {
    margin-inline: 20px;
    height: -webkit-fill-available;
    padding: 15px;
    font-size: 25px;
    font-family: "Inter";
    background: #323232;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: var(--text-color);
    border: var(--default-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.result-controls-data button {
    background: var(--green-color);
    color: var(--black-color);
    border: var(--default-border);

    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1ch;
    font-size: 25px;
    border-color: var(--green-color);
    font-weight: 600;
    cursor: pointer;

    transition: all .2s ease;
}

.service-btn {
    transition: all .2s ease;
}

.service-btn:hover {
    background: var(--black-color);
    color: var(--green-color);
    transform: rotate(-3deg) scale(1.5);
}

.service-btn svg path  {
    fill: var(--black-color);
}

.service-btn:hover svg path  {
    fill: var(--green-color);
}

#categoriesList {
    overflow-y: hidden;

    transition: all .1s ease;
}

.form-background {
    display: none;
}

.form-btn.active {
    background-color: var(--green-color);
    color: var(--black-color);
}

.h-line-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.cat:hover {
    text-decoration: underline;
    cursor: pointer;
}

.field-row input {
    background: #48484875;
}

@media (aspect-ratio <= 1728 / 1117) {
    .planet {
        right: -280px;;
    }
}

@media (aspect-ratio < 1/1) {
    .bg-elipses-container {
        height: 0px;
    }

    .h-line-wrapper {
        display: none;
    }

    #planetImgDesctopBlured, #planetImgDesctop {
        display: none;
    }

    .gruz, #gruzImgDesctop {
        display: flex;
        filter: none;
        height: 72vh;
        bottom: 7vh;
    }

    .hint {
        animation: none;
        opacity: 1;
    }
}