p {
    font-size: 1.25rem;
    line-height: 1.5em
}

body,
html {
    overflow-x: hidden !important
}

canvas {
    height: auto;
    width: 90%;
    z-index: 999
}

.section-1 {
    background: #16161a;
    padding-left: 2rem;
    padding-top: 2.5rem
}

.section-1 .landing {
    overflow: hidden;
    height: 100vh;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 3%
}

.section-1 .landing .we_do {
    padding-top: 38.5vh
}

.section-1 .landing .we_r {
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 70%;
    transform: translate(-2.6vw, 0);
    margin-top: 47vh
}

.section-1 .landing .we_r h1 {
    font-size: 3rem;
    color: #fff;
    line-height: 3.5rem;
    font-weight: 1000
}

.section-1 .landing #valentines {
    display: none
}

@media only screen and (max-width:992px) {
    .section-1 {
        padding-top: 0
    }

    .section-1 .landing .we_r {
        margin-top: 65vh;
        height: 100%
    }

    .section-1 .landing .we_do {
        padding-top: 14.5vh
    }
}

@media only screen and (max-width:800px) {
    .section-1 {
        padding-top: 0
    }

    .section-1 .landing .we_r {
        margin-top: 65vh;
        height: 100%
    }

    .section-1 .landing .we_r h1 {
        font-size: 2.5rem;
        font-weight: 800
    }

    .section-1 .landing .we_do {
        padding-top: 14.5vh
    }
}

@keyframes floatupdown {
    0% {
        bottom: 20px
    }

    50% {
        bottom: 40px
    }

    100% {
        bottom: 20px
    }
}

.scroll_hero h3 {
    display: block;
    align-self: flex-end;
    position: relative
}

.scroll_hero h3 svg {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    animation: floatupdown 2s infinite ease-in-out
}

.scroll_hero h3 .hero {
    display: flex;
    height: 100%;
    align-items: center;
    color: #fff
}

.scroll_hero h3 .hero-content {
    position: absolute;
    top: -50px;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -95%);
    pointer-events: none
}

.scroll_hero h3 .mouse {
    margin: auto;
    width: 26px;
    height: 44px;
    position: relative;
    background: #fff linear-gradient(transparent 0, transparent 50%, #fff 50%, #fff 100%);
    background-size: 100% 200%;
    border-radius: 100px;
    animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite
}

.scroll_hero h3 .mouse:after,
.scroll_hero h3 .mouse:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto
}

.scroll_hero h3 .mouse:before {
    width: 23px;
    height: 41px;
    background-color: #fff;
    border-radius: 100px
}

.scroll_hero h3 .mouse:after {
    background-color: #1fa8a3;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    animation: trackBallSlide 5s linear infinite
}

.scroll_hero h3 .text {
    margin: 14px auto 0 auto;
    letter-spacing: 7px;
    font-size: .4em;
    color: #fff;
    animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite
}

@keyframes colorSlide {
    0% {
        background-position: 0 100%
    }

    20% {
        background-position: 0 0
    }

    21% {
        background-color: #1087df
    }

    29.99% {
        background-color: #fff;
        background-position: 0 0
    }

    30% {
        background-color: #1087df;
        background-position: 0 100%
    }

    50% {
        background-position: 0 0
    }

    51% {
        background-color: #1087df
    }

    59% {
        background-color: #fff;
        background-position: 0 0
    }

    60% {
        background-color: #1087df;
        background-position: 0 100%
    }

    80% {
        background-position: 0 0
    }

    81% {
        background-color: #1087df
    }

    100%,
    90% {
        background-color: #fff
    }
}

@keyframes colorText {
    21% {
        color: #4e5559
    }

    30% {
        color: #fff
    }

    51% {
        color: #4e5559
    }

    60% {
        color: #fff
    }

    81% {
        color: #4e5559
    }

    90% {
        color: #fff
    }
}

@keyframes trackBallSlide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(-10px)
    }

    6% {
        opacity: 1;
        transform: scale(.9) translateY(5px)
    }

    14% {
        opacity: 0;
        transform: scale(.4) translateY(20px)
    }

    15%,
    19% {
        opacity: 0;
        transform: scale(.4) translateY(-10px)
    }

    28%,
    29.99% {
        opacity: 1;
        transform: scale(1) translateY(-10px)
    }

    30% {
        opacity: 1;
        transform: scale(1) translateY(-10px)
    }

    36% {
        opacity: 1;
        transform: scale(.9) translateY(5px)
    }

    44% {
        opacity: 0;
        transform: scale(.4) translateY(20px)
    }

    45%,
    49% {
        opacity: 0;
        transform: scale(.4) translateY(-10px)
    }

    58%,
    59.99% {
        opacity: 1;
        transform: scale(1) translateY(-10px)
    }

    60% {
        opacity: 1;
        transform: scale(.9) translateY(-10px)
    }

    66% {
        opacity: 1;
        transform: scale(.9) translateY(5px)
    }

    74% {
        opacity: 0;
        transform: scale(.4) translateY(20px)
    }

    75%,
    79% {
        opacity: 0;
        transform: scale(.4) translateY(-10px)
    }

    100%,
    88% {
        opacity: 1;
        transform: scale(1) translateY(-10px)
    }
}

@keyframes nudgeMouse {
    0% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(8px)
    }

    30% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(8px)
    }

    60% {
        transform: translateY(0)
    }

    80% {
        transform: translateY(8px)
    }

    90% {
        transform: translateY(0)
    }
}

@keyframes nudgeText {
    0% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(2px)
    }

    30% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(2px)
    }

    60% {
        transform: translateY(0)
    }

    80% {
        transform: translateY(2px)
    }

    90% {
        transform: translateY(0)
    }
}

.section_2 {
    padding: 7.5% 2% 5% 2%;
    text-align: center;
    background-color: #16161a;
    color: #fff
}

.section_2 h2 {
    font-size: 4em;
    line-height: 1.2em
}

.section_2 h5 {
    padding-top: 3%;
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center
}

.section_2 .tech-scheme {
    position: relative;
    height: 400px;
    z-index: 1;
    margin: 5% -15px;
    opacity: 0;
    transition: opacity cubic-bezier(.215, .61, .355, 1) .6s .5s
}

@media (max-width:992px) {
    .section_2 .tech-scheme {
        opacity: 1;
        transform: scale(.7)
    }
}

.section_2 .tech-scheme__title {
    position: absolute;
    left: 50%;
    font-size: 1.2em;
    list-style-type: none;
    color: transparent;
    z-index: 100;
    transform: translate(-50%, 0);
    transition: color cubic-bezier(.215, .61, .355, 1) .6s 1.6s
}

@media (max-width:768px) {
    .section_2 .tech-scheme__title {
        color: #1087df
    }
}

.section_2 .tech-scheme__title.pos1 {
    top: -10px
}

.section_2 .tech-scheme__title.pos2 {
    top: 50%;
    transform: translate(-210px, -50%);
    color: #1fa8a3 !important
}

.section_2 .tech-scheme__title.pos3 {
    top: 50%;
    transform: translate(141px, -50%);
    color: #1087df !important
}

.section_2 .tech-scheme__title.pos4 {
    bottom: -10px
}

.section_2 .tech-scheme__cirlces-wrap {
    position: absolute;
    top: 25px;
    right: 0;
    bottom: 25px;
    left: 0
}

.section_2 .tech-scheme__cirlce--main {
    position: absolute;
    top: 0;
    left: 50%;
    width: 350px;
    height: 350px;
    background: url(arrowcircle.svg) 50% 50% no-repeat;
    background-size: auto 100%;
    transform-origin: center left;
    transform: rotate(-180deg) translate(-50%, 0);
    transition: transform cubic-bezier(.215, .61, .355, 1) .6s .6s, opacity cubic-bezier(.215, .61, .355, 1) .6s .6s;
    z-index: 1
}

@media (max-width:768px) {
    .section_2 .tech-scheme__cirlce--main {
        transform: rotate(0) translate(-50%, 0)
    }
}

.section_2 .tech-scheme__cirlce--small {
    position: absolute;
    top: 120px;
    background-color: #16161a;
    left: 50%;
    transform: translate(-50%, 0);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px #1fa8a3;
    padding: 7px
}

.section_2 .tech-scheme__cirlce--small:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box
}

.section_2 .tech-scheme__cirlce--small.pos2:before {
    border: 2px solid #1087df !important
}

.section_2 .tech-scheme__cirlce--small.pos1:before {
    border: 2px solid #1fa8a3
}

.section_2 .tech-scheme__cirlce--small.pos1,
.section_2 .tech-scheme__cirlce--small.pos2 {
    transition: margin-left cubic-bezier(.39, .66, .15, -.305) 1s
}

@media (max-width:768px) {
    .section_2 .tech-scheme__cirlce--small.pos1 {
        margin-left: -125px
    }
}

@media (max-width:768px) {
    .section_2 .tech-scheme__cirlce--small.pos2 {
        margin-left: 125px
    }
}

.section_2 .tech-scheme__cirlce--large {
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: .3 !important;
    left: 50%;
    transform: translate(-50%, 0);
    width: 350px;
    height: 350px;
    border-radius: 50%;
    opacity: 0;
    transition: margin-left cubic-bezier(.215, .61, .355, 1) .6s 1.1s, opacity cubic-bezier(.215, .61, .355, 1) .5s 1.1s
}

@media (max-width:768px) {
    .section_2 .tech-scheme__cirlce--large {
        opacity: 1
    }
}

@media (max-width:768px) {
    .section_2 .tech-scheme__cirlce--large.pos1 {
        margin-left: 175px
    }
}

@media (max-width:768px) {
    .section_2 .tech-scheme__cirlce--large.pos2 {
        margin-left: 275px
    }
}

@media (max-width:768px) {
    .section_2 .tech-scheme__cirlce--large.pos3 {
        margin-left: -175px
    }
}

@media (max-width:768px) {
    .section_2 .tech-scheme__cirlce--large.pos4 {
        margin-left: -275px
    }
}

.section_2 .tech-scheme__cirlce--large.pos2,
.section_2 .tech-scheme__cirlce--large.pos4 {
    transition-delay: 1.4s
}

.section_2 .tech-scheme.animated {
    opacity: 1
}

.section_2 .tech-scheme.animated .tech-scheme__title {
    color: #1087df
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--main {
    transform: rotate(0) translate(-50%, 0)
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--main:after,
.section_2 .tech-scheme.animated .tech-scheme__cirlce--main:before {
    opacity: 1
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--small.pos1 {
    margin-left: -175px
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--small.pos2 {
    margin-left: 175px
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--large {
    opacity: 1
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--large.pos1 {
    margin-left: 125px;
    background: #1087df
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--large.pos2 {
    margin-left: 275px
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--large.pos3 {
    margin-left: -125px;
    background: #1fa8a3
}

.section_2 .tech-scheme.animated .tech-scheme__cirlce--large.pos4 {
    margin-left: -275px
}

.section_3 {
    pointer-events: none;
    background-color: #16161a;
    color: #fff;
    padding: 7% 0;
    margin: 0 auto;
    text-align: center
}

.section_3 h3 {
    font-size: 4em;
    text-align: center;
    line-height: 1.2em
}

.section_3 .card {
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
    height: 250px;
    width: 250px;
    background-color: #242629;
    align-items: center;
    text-align: center;
    justify-content: center;
    display: flex;
    border-radius: 1em;
    box-shadow: -22px 22px 40px 0 rgba(0, 0, 0, .3)
}

.section_3 .card .card-body {
    align-content: center;
    flex: 0 0 auto
}

.section_5 {
    text-align: center;
    padding: 5% 1%;
    margin: auto
}

.section_5 img {
    width: 80%
}

.section_5 h3 {
    font-size: 4em;
    margin-bottom: 2%
}

.section_5 img {
    margin-top: 28% !important
}

.section_6 {
    padding-top: 5%;
    padding-bottom: 5%
}

.section_6 h2 {
    font-size: 4em;
    line-height: 1.25em
}

.section_6 p {
    text-align: center
}

.section_6 hr {
    height: 4px;
    margin: auto;
    width: 50px;
    background: linear-gradient(180deg, #1fa8a3 0, #1087df 100%);
    border-radius: 2px;
    margin-bottom: 3%;
    margin-top: 2%
}

@media only screen and (max-width:414px) {
    .section_1 {
        background-size: 80%;
        min-height: 60vh
    }

    .section_1 h1 {
        font-size: 2.25em
    }

    .section_1 h1 .animation {
        font-size: 1em
    }

    .section_5 {
        margin-top: 5%
    }
}

.h_84 {
    height: 84px
}

.h_75 {
    height: 75px
}