@import url("18d990efa33144988b4ef9b59156b296.css");
@import url("2c75ff936e5c44089820319246738e75.css");
.col,
.col-xl-5,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-lg-12,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-md-12,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-sm-6,
.col-sm-3,
.col-12,
.col-10,
.col-9,
.col-8,
.col-6,
.col-4,
.col-3,
.col-2 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

* {
    margin: 0;
    padding: 0
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 68px;
    color: #303030;
    margin: 0;
    text-align: left
}

main {
    display: block
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Work Sans", sans-serif;
    color: #303030;
    line-height: 1.4
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit
}

h1 {
    font-size: 32px
}

@media screen and (min-width:320px) {
    h1 {
        font-size: calc(32px+18 *((100vw - 320px) / 880))
    }
}

@media screen and (min-width:1200px) {
    h1 {
        font-size: 50px
    }
}

h2 {
    font-size: 30px
}

@media screen and (min-width:320px) {
    h2 {
        font-size: calc(30px+10 *((100vw - 320px) / 880))
    }
}

@media screen and (min-width:1200px) {
    h2 {
        font-size: 40px
    }
}

h3 {
    font-size: 18px
}

@media screen and (min-width:320px) {
    h3 {
        font-size: calc(18px+10 *((100vw - 320px) / 880))
    }
}

@media screen and (min-width:1200px) {
    h3 {
        font-size: 28px
    }
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 20px
}

hr {
    background: #303030;
    width: 50px;
    height: 5px;
    margin: 50px 0;
    padding: 0;
    border: 0;
    border-radius: 0
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: inherit;
    text-decoration: none;
    transition: .3s ease-out
}

ul {
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

p {
    margin: 0
}

abbr[title] {
    border-bottom: 0;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-size: 1rem
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none;
    max-width: 100%
}

button,
input,
optgroup,
select,
textarea {
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    padding: 0;
    border-style: none
}

:focus {
    outline: 0
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

.section-title-center {
    text-align: center
}

.section-title-center h2 {
    margin-top: -9px
}

@media screen and (min-width:768px) {
    .section-title-center h2 {
        margin-top: -11px
    }
}

.section-padding {
    padding-top: 50px!important;
    padding-bottom: 50px!important
}

@media screen and (min-width:992px) {
    .section-padding {
        padding-top: 70px!important;
        padding-bottom: 70px!important
    }
}

@media screen and (min-width:1200px) {
    .section-padding {
        padding-top: 100px!important;
        padding-bottom: 100px!important
    }
}

.scrollToTop {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #925afa;
    right: 15px;
    bottom: 20px;
    position: fixed;
    display: none;
    z-index: 999;
    border-radius: 50%
}

.scrollToTop:hover {
    color: #fff
}


/*!
 * Mmenu Light v3.0.3
 * mmenujs.com/mmenu-light
 *
 * Copyright (c) Fred Heusschen
 * www.frebsite.nl
 *
 * License: CC-BY-4.0
 * http://creativecommons.org/licenses/by/4.0/
 */

:root {
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px
}

body.mm-ocd-opened {
    overflow-y: hidden;
    overscroll-behavior: none
}

.mm-ocd {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 100%;
    left: 0;
    z-index: 9999;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(0, 0, 0, 0);
    transition-property: bottom, background-color;
    transition-duration: 0s, 0.3s;
    transition-timing-function: ease;
    transition-delay: .45s, 0.15s
}

.mm-ocd--open {
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    transition-delay: 0s
}

.mm-ocd__content {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 80%;
    width: var(--mm-ocd-width);
    min-width: 200px;
    min-width: var(--mm-ocd-min-width);
    max-width: 440px;
    max-width: var(--mm-ocd-max-width);
    background: #fff;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease
}

.mm-ocd--left .mm-ocd__content {
    left: 0;
    transform: translate3d(-100%, 0, 0)
}

.mm-ocd--right .mm-ocd__content {
    right: 0;
    transform: translate3d(100%, 0, 0)
}

.mm-ocd--open .mm-ocd__content {
    transform: translate3d(0, 0, 0)
}

.mm-ocd__backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: calc(100% - 80%);
    width: calc(100% - var(--mm-ocd-width));
    min-width: calc(100% - 440px);
    min-width: calc(100% - var(--mm-ocd-max-width));
    max-width: calc(100% - 200px);
    max-width: calc(100% - var(--mm-ocd-min-width));
    background: rgba(3, 2, 1, 0)
}

.mm-ocd--left .mm-ocd__backdrop {
    right: 0
}

.mm-ocd--right .mm-ocd__backdrop {
    left: 0
}

.mm-spn a,
.mm-spn span,
.mm-spn li,
.mm-spn ul,
.mm-spn {
    display: block;
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

:root {
    --mm-spn-item-height: 50px;
    --mm-spn-item-indent: 0;
    --mm-spn-line-height: 24px
}

.mm-spn {
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transform: translateX(0px)
}

.mm-spn ul {
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    left: 100%;
    bottom: 0;
    z-index: 2;
    width: 200%;
    padding-right: 100%;
    line-height: 24px;
    line-height: var(--mm-spn-line-height);
    overflow: visible;
    overflow-y: auto;
    background: inherit;
    transition: left .3s ease 0s;
    cursor: default
}

.mm-spn ul:after {
    content: "";
    display: block;
    height: 50px;
    height: var(--mm-spn-item-height)
}

.mm-spn>ul {
    left: 0
}

.mm-spn ul.mm-spn--open {
    left: 0
}

.mm-spn ul.mm-spn--parent {
    left: -100%;
    overflow-y: hidden
}

.mm-spn li {
    position: relative;
    background: inherit;
    cursor: pointer
}

.mm-spn li:before {
    content: "";
    display: block;
    position: absolute;
    top: 25px;
    top: calc(var(--mm-spn-item-height) / 2);
    right: 25px;
    right: calc(var(--mm-spn-item-height) / 2);
    z-index: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg) translate(0, -50%);
    opacity: .4
}

.mm-spn li:after {
    content: "";
    display: block;
    margin-left: 0;
    margin-left: var(--mm-spn-item-indent);
    border-top: 1px solid;
    opacity: .15
}

.mm-spn a,
.mm-spn span {
    position: relative;
    z-index: 1;
    padding: 13px 0;
    padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) var(--mm-spn-item-indent)
}

.mm-spn a {
    background: inherit;
    color: inherit;
    text-decoration: none
}

.mm-spn a:not(:last-child) {
    width: calc(100% - 50px);
    width: calc(100% - var(--mm-spn-item-height))
}

.mm-spn a:not(:last-child):after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-right: 1px solid;
    opacity: .15
}

.mm-spn span {
    background: transparent
}

.mm-spn.mm-spn--navbar {
    cursor: pointer
}

.mm-spn.mm-spn--navbar:before {
    content: "";
    display: block;
    position: absolute;
    top: 25px;
    top: calc(var(--mm-spn-item-height) / 2);
    left: 0;
    left: var(--mm-spn-item-indent);
    width: 10px;
    height: 10px;
    margin-top: 2px;
    border-top: 2px solid;
    border-left: 2px solid;
    transform: rotate(-45deg) translate(50%, -50%);
    opacity: .4
}

.mm-spn.mm-spn--navbar.mm-spn--main {
    cursor: default
}

.mm-spn.mm-spn--navbar.mm-spn--main:before {
    content: none;
    display: none
}

.mm-spn.mm-spn--navbar:after {
    content: attr(data-mm-spn-title);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    height: var(--mm-spn-item-height);
    padding: 0;
    padding: 0 calc(var(--mm-spn-item-indent) * 2);
    line-height: 50px;
    line-height: var(--mm-spn-item-height);
    opacity: .4;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.mm-spn.mm-spn--navbar.mm-spn--main:after {
    padding-left: 0;
    padding-left: var(--mm-spn-item-indent)
}

.mm-spn.mm-spn--navbar ul {
    top: 51px;
    top: calc(var(--mm-spn-item-height)+1px)
}

.mm-spn.mm-spn--navbar ul:before {
    content: "";
    display: block;
    position: fixed;
    top: inherit;
    z-index: 2;
    width: 100%;
    border-top: 1px solid currentColor;
    opacity: .15
}

.mm-spn.mm-spn--light {
    color: #444;
    background: #f3f3f3
}

.mm-spn.mm-spn--dark {
    color: #ddd;
    background: #333
}

.mm-spn.mm-spn--vertical {
    overflow-y: auto
}

.mm-spn.mm-spn--vertical ul {
    width: 100%;
    padding-right: 0;
    position: static
}

.mm-spn.mm-spn--vertical ul ul {
    display: none;
    padding-left: 0;
    padding-left: var(--mm-spn-item-indent)
}

.mm-spn.mm-spn--vertical ul ul:after {
    height: 25px;
    height: calc(var(--mm-spn-item-height) / 2)
}

.mm-spn.mm-spn--vertical ul.mm-spn--open {
    display: block
}

.mm-spn.mm-spn--vertical li.mm-spn--open:before {
    transform: rotate(135deg) translate(-50%, 0)
}

.mm-spn.mm-spn--vertical ul ul li:last-child:after {
    content: none;
    display: none
}

.mobile-menu {
    display: none
}

@media(max-width:991px) {
    .mobile-menu {
        display: block;
        padding: 8px;
        margin: 5px;
        position: absolute;
        top: -8px;
        right: 20px
    }
}

.mobile-menu::before,
.mobile-menu::after {
    width: 28px;
    content: "";
    display: block;
    background: #000;
    height: 2px
}

.mobile-menu span {
    background: #000;
    display: block;
    width: 28px;
    height: 2px;
    margin: 6px 0
}

.nice-select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    width: 260px;
    height: 50px;
    line-height: 50px;
    outline: 0;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left!important;
    transition: all .2s ease-in-out;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap
}

@media screen and (min-width:576px) {
    .nice-select {
        width: 270px;
        height: 50px
    }
}

.nice-select:hover {
    border-color: #dbdbdb
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: #f6f6f6
}

.nice-select:after {
    border-bottom: 2px solid #0089D0;
    border-right: 2px solid #0089D0;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform-origin: 66% 66%;
    transform: rotate(45deg);
    transition: all .15s ease-in-out
}

.nice-select.open:after {
    transform: rotate(-135deg)
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0)
}

.nice-select.disabled {
    border-color: #ededed;
    color: #f6f6f6;
    pointer-events: none
}

.nice-select.disabled:after {
    border-color: white
}

.nice-select.wide {
    width: 100%
}

.nice-select.wide .list {
    left: 0!important;
    right: 0!important
}

.nice-select.right {
    float: right
}

.nice-select.right .list {
    left: auto;
    right: 0
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px
}

.nice-select.small:after {
    height: 4px;
    width: 4px
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px
}

.nice-select .list {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: 50% 0;
    transform: scale(0.75) translateY(-21px);
    transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out;
    z-index: 9
}

.nice-select .list:hover .option:not(:hover) {
    background-color: transparent!important
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: 0;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    transition: all .2s
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: #f6f6f6
}

.nice-select .option.selected {
    font-weight: bold
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #f6f6f6;
    cursor: default
}

.no-csspointerevents .nice-select .list {
    display: none
}

.no-csspointerevents .nice-select.open .list {
    display: block
}

.color {
    color: #303030
}

.text-black {
    color: #000
}

.bg-black {
    background: #000
}

.text-white {
    color: #fff
}

.bg-white {
    background: #fff
}

.white {
    color: #fff!important
}

.black {
    color: #000!important
}

.d-none {
    display: none!important
}

.d-block {
    display: block
}

.d-flex {
    display: flex
}

@media(min-width:992px) {
    .d-lg-block {
        display: block!important
    }
}

@media(min-width:768px) {
    .d-md-flex {
        display: flex!important
    }
}

@media(min-width:992px) {
    .d-lg-flex {
        display: flex!important
    }
}

.devide-y div+div,
.devide-y li+li {
    border-top: 1px solid #14516C
}

.font-roboto {
    font-family: "Roboto", sans-serif
}

.font-work {
    font-family: "Work Sans", sans-serif
}

.font-popins {
    font-family: "Poppins", sans-serif
}

.font-300 {
    font-weight: 300
}

.font-light {
    font-weight: 400
}

.font-medium {
    font-weight: 500
}

.font-bold {
    font-weight: 700
}

.font-13 {
    font-size: 13px
}

.font-14 {
    font-size: 14px
}

.font-15 {
    font-size: 15px
}

.font-16 {
    font-size: 16px
}

.font-20 {
    font-size: 20px
}

.font-22 {
    font-size: 22px
}

.font-24 {
    font-size: 24px
}

.font-28 {
    font-size: 28px
}

.font-30 {
    font-size: 30px
}

.font-40 {
    font-size: 40px
}

.font-60 {
    font-size: 60px
}

@media(min-width:576px) {
    .font-sm-60 {
        font-size: 60px
    }
}

@media(min-width:768px) {
    .font-md-40 {
        font-size: 40px
    }
}

@media(min-width:768px) {
    .font-md-60 {
        font-size: 60px
    }
}

@media(min-width:992px) {
    .font-lg-40 {
        font-size: 40px
    }
}

@media(min-width:992px) {
    .font-lg-60 {
        font-size: 60px
    }
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-row {
    flex-direction: row
}

.flex-column {
    flex-direction: column!important
}

.align-items-center {
    align-items: center
}

.justify-content-center {
    justify-content: center
}

.line-height-25 {
    line-height: 25px
}

.line-height-30 {
    line-height: 30px
}

.mt-0 {
    margin-top: 0
}

.mt-5 {
    margin-top: 5px
}

.mt-10 {
    margin-top: 10px
}

.mt-15 {
    margin-top: 15px
}

.mt-20 {
    margin-top: 20px
}

.mt-25 {
    margin-top: 25px
}

.mt-30 {
    margin-top: 30px
}

.mt-35 {
    margin-top: 35px
}

.mt-40 {
    margin-top: 40px
}

.mt-50 {
    margin-top: 50px
}

.mt-60 {
    margin-top: 60px
}

.mt-80 {
    margin-top: 80px
}

.mt-100 {
    margin-top: 100px
}

.mt-150 {
    margin-top: 150px
}

.mb-5 {
    margin-bottom: 5px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-30 {
    margin-bottom: 30px
}

.ml-auto {
    margin-left: auto
}

.ml-10 {
    margin-left: 10px
}

.ml-30 {
    margin-left: 30px
}

@media(min-width:576px) {
    .mt-sm-0 {
        margin-top: 0
    }
}

@media(min-width:768px) {
    .mt-md-0 {
        margin-top: 0
    }
}

@media(min-width:768px) {
    .mt-md-30 {
        margin-top: 30px
    }
}

@media(min-width:1200px) {
    .mt-xl-40 {
        margin-top: 40px
    }
}

@media(min-width:768px) {
    .mt-md-60 {
        margin-top: 60px
    }
}

@media(min-width:992px) {
    .mt-lg-0 {
        margin-top: 0
    }
}

@media(min-width:768px) {
    .mt-md-130 {
        margin-top: 130px
    }
}

@media(min-width:768px) {
    .mt-md-150 {
        margin-top: 150px
    }
}

.overlay {
    overflow: hidden;
    position: relative;
    transition: .3s ease-out
}

.overlay-black::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: .3s ease-out;
    background: #303030!important;
    z-index: 999
}

.overlay-35::before {
    opacity: .35
}

.opacity-80 {
    opacity: 80%
}

.p-15 {
    padding: 15px!important
}

.pt-30 {
    padding-top: 30px!important
}

.pt-50 {
    padding-top: 50px!important
}

.pt-80 {
    padding-top: 80px!important
}

.pb-50 {
    padding-bottom: 50px!important
}

.pl-0 {
    padding-left: 0!important
}

.pl-30 {
    padding-left: 30px!important
}

.pl-100 {
    padding-left: 100px!important
}

.pr-0 {
    padding-right: 0!important
}

.px-12 {
    padding-left: 12px!important;
    padding-right: 12px!important
}

.px-15 {
    padding-left: 15px!important;
    padding-right: 15px!important
}

.px-20 {
    padding-left: 20px!important;
    padding-right: 20px!important
}

.px-30 {
    padding-left: 30px!important;
    padding-right: 30px!important
}

.px-40 {
    padding-left: 40px!important;
    padding-right: 40px!important
}

.px-50 {
    padding-left: 50px!important;
    padding-right: 50px!important
}

.py-30 {
    padding-top: 30px!important;
    padding-bottom: 30px!important
}

.py-40 {
    padding-top: 40px!important;
    padding-bottom: 40px!important
}

.py-50 {
    padding-top: 50px!important;
    padding-bottom: 50px!important
}

.py-70 {
    padding-top: 70px!important;
    padding-bottom: 70px!important
}

.py-100 {
    padding-top: 100px!important;
    padding-bottom: 100px!important
}

@media(min-width:992px) {
    .px-lg-40 {
        padding-left: 40px!important;
        padding-right: 40px!important
    }
}

@media(min-width:1200px) {
    .px-xl-60 {
        padding-left: 60px!important;
        padding-right: 60px!important
    }
}

@media(min-width:992px) {
    .py-lg-100 {
        padding-top: 100px!important;
        padding-bottom: 100px!important
    }
}

@media(min-width:1200px) {
    .py-xl-100 {
        padding-top: 100px!important;
        padding-bottom: 100px!important
    }
}

@media(min-width:768px) {
    .pl-md-0 {
        padding-left: 0!important
    }
}

@media(min-width:992px) {
    .pl-lg-0 {
        padding-left: 0!important
    }
}

@media(min-width:992px) {
    .pl-lg-30 {
        padding-left: 30px!important
    }
}

@media(min-width:992px) {
    .pl-lg-100 {
        padding-left: 100px!important
    }
}

@media(min-width:992px) {
    .pl-lg-50 {
        padding-left: 50px!important
    }
}

@media(min-width:1200px) {
    .pl-xl-100 {
        padding-left: 100px!important
    }
}

@media(min-width:768px) {
    .pl-md-30 {
        padding-left: 30px!important
    }
}

@media(min-width:768px) {
    .pl-md-80 {
        padding-left: 80px!important
    }
}

@media(min-width:992px) {
    .pl-lg-80 {
        padding-left: 80px!important
    }
}

@media(min-width:1200px) {
    .pl-xl-80 {
        padding-left: 80px!important
    }
}

@media(min-width:768px) {
    .pl-md-100 {
        padding-left: 100px!important
    }
}

@media(min-width:768px) {
    .p-md-40 {
        padding: 40px!important
    }
}

@media(min-width:768px) {
    .p-md-50 {
        padding: 50px!important
    }
}

@media(min-width:992px) {
    .p-lg-50 {
        padding: 50px!important
    }
}

@media(min-width:992px) {
    .pt-lg-80 {
        padding-top: 80px!important
    }
}

@media(min-width:768px) {
    .pt-md-0 {
        padding-top: 0!important
    }
}

@media(min-width:768px) {
    .pt-md-100 {
        padding-top: 100px!important
    }
}

@media(min-width:992px) {
    .pt-lg-70 {
        padding-top: 70px!important
    }
}

@media(min-width:1200px) {
    .pt-xl-100 {
        padding-top: 100px!important
    }
}

@media(min-width:768px) {
    .pb-md-100 {
        padding-bottom: 100px!important
    }
}

@media(min-width:992px) {
    .pb-lg-70 {
        padding-bottom: 70px!important
    }
}

@media(min-width:1200px) {
    .pb-xl-100 {
        padding-bottom: 100px!important
    }
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.top-0 {
    top: 0
}

.right-0 {
    right: 0
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.tl-center {
    top: 50%;
    left: 0;
    position: absolute;
    transform: translateY(-50%)
}

.shadow-sm {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.29)
}

.text-left {
    text-align: left
}

.text-center {
    text-align: right
}

.text-right {
    text-align: right
}

@media(min-width:768px) {
    .text-md-left {
        text-align: left
    }
}

@media(min-width:768px) {
    .text-md-right {
        text-align: right
    }
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.z-99 {
    z-index: 99
}

.btn {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-transform: capitalize;
    border: 0;
    border-radius: 50px;
    padding: 17px 35px;
    display: inline-block;
    overflow: hidden;
    text-align: center
}

.btn-blue {
    background: #925afa;
    color: #303030;
    border: 1px solid transparent
}

.btn-blue span {
    color: #fff
}

.btn-blue:hover {
    background-color: transparent;
    color: #925afa;
    border: 1px solid #925afa
}

.btn-blue:hover span {
    color: #925afa
}

.btn-blue-2 {
    background: #8d55fd;
    color: #fff;
    margin-bottom: -6px;
    border: 1px solid transparent
}

.btn-blue-2:hover {
    border: 1px solid #925afa;
    color: #925afa!important;
    background-color: transparent
}

.btn-blue-3 {
    background: #8d55fd;
    color: #fff;
    margin-bottom: -6px;
    border: 1px solid transparent
}

.btn-blue-3:hover {
    border: 1px solid #fff;
    color: #fff!important;
    background-color: transparent
}

.btn-theme {
    background: linear-gradient(to left, #905BF4 0, #FAC3C8 100%);
    position: relative;
    z-index: 1;
    margin-bottom: -6px;
    background-size: 200% auto;
    transition: .3s
}

.btn-theme:hover {
    background-position: right center
}

.btn-sent {
    background: #fff;
    color: #000;
    transition: .3s;
    cursor: pointer
}

.btn-sent:hover {
    background: #925afa;
    color: #fff
}

.btn-red {
    background: #ffe8e8;
    color: #FD256C
}

.btn-red:hover {
    background: #FD256C;
    color: #fff
}

.btn-skil {
    background: #f2ebff;
    color: #925afa
}

.btn-skil:hover {
    background: #925afa;
    color: #fff
}

.btn-white {
    background: #fff;
    color: #303030;
    color: #303030!important;
    border: 1px solid transparent
}

.btn-white:hover {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    color: #fff!important
}

.b-r-none {
    border-radius: 0
}

.btn-price {
    background: linear-gradient(to left, #9f7ffb 0, #e9b9fe 100%);
    background-size: 200% auto;
    transition: .3s
}

.btn-price:hover {
    background-position: right center
}

.btn-overlay {
    background: transparent;
    color: #303030;
    border: 1px solid #efe2e2
}

.btn-overlay:hover {
    background: #925afa;
    color: #fff;
    border-color: #925afa
}

.btn-overlay-2 {
    background: #fff;
    color: #303030;
    border: 1px solid #efe2e2
}

.btn-overlay-2:hover {
    background: #925afa;
    color: #fff;
    border-color: #925afa
}

input,
textarea {
    font-family: "Roboto", sans-serif;
    color: rgba(12, 13, 36, 0.7);
    background: transparent;
    text-transform: capitalize;
    padding: 10px 20px;
    margin: 10px 0;
    width: 100%;
    height: 100%;
    border: 1px solid #303030;
    border-radius: 0;
    transition: .3s ease-out;
    border: 1px solid #ECECEC
}

.form .form-wrapp .form-input {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #303030;
    background: #fff;
    text-transform: capitalize;
    padding: 20px 20px;
    margin: 10px 0;
    width: 100%;
    height: 100%;
    border: 0 solid #303030;
    border-radius: 50px;
    transition: .3s ease-out
}

.search-form {
    padding-bottom: 20px;
    position: relative
}

.search-form span {
    position: absolute;
    top: 25px;
    left: 15px
}

.search-form .form-input {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #303030;
    background: #fff;
    text-transform: capitalize;
    padding: 15px 15px;
    margin: 10px 0;
    width: 100%;
    height: 100%;
    border: 3px solid #925afa;
    border-radius: 0;
    transition: .3s ease-out;
    padding-left: 40px
}

.hamburger-menu {
    margin-top: 30px;
    padding: 20px
}

.hamburger-menu ul {
    margin: 0
}

.hamburger-menu li {
    display: block
}

.hamburger-menu li a {
    position: relative;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    background: transparent;
    text-transform: capitalize;
    padding: 15px 10px;
    display: block;
    z-index: 99
}

.hamburger-menu li a:hover {
    color: #fff;
    background: #14516C;
    text-decoration: none
}

.hamburger-icon {
    cursor: pointer
}

.extra-info {
    background: rgba(21, 33, 54, 0.8) none repeat scroll 0 0;
    height: 100%;
    padding: 30px 20px;
    position: fixed;
    left: 0;
    top: 0;
    transition: all .7s ease 0s;
    width: 340px;
    z-index: 9999;
    overflow-y: auto;
    transform: translateX(-100%)
}

.extra-info.active {
    transform: translateX(0);
    z-index: 99999
}

.close-icon {
    margin-top: -16px;
    text-align: right
}

.close-icon>button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #303030;
    cursor: pointer;
    font-size: 20px;
    padding: 0
}

.offcanvas-overly {
    position: fixed;
    background: #000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.offcanvas-overly.active {
    opacity: .5;
    visibility: visible
}

.menu {
    margin-top: 10px
}

.menu ul {
    margin: 0
}

.menu li {
    display: inline-block
}

.menu li a {
    position: relative;
    font: 18px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    font-weight: 300;
    color: #fff;
    background: transparent;
    text-transform: uppercase;
    padding-right: 0;
    padding-left: 35px;
    display: block;
    z-index: 99
}

.menu li a:hover {
    background: transparent;
    padding-right: 0;
    text-decoration: none
}

.menu li {
    position: relative
}

@media(max-width:991px) {
    .menu li {
        display: block
    }
}

@media(max-width:991px) {
    .menu li a {
        padding: 20px 30px;
        text-align: left
    }
}

@media(max-width:1199px) {
    .menu li a {
        padding-left: 20px
    }
}

@media screen and (min-width:992px) {
    .menu li ul {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        width: 200px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px 0;
        transition: .3s;
        top: 100px
    }
    .menu li ul li {
        display: block
    }
    .menu li ul li a {
        color: #000;
        text-align: left;
        padding: 10px 20px;
        font-weight: 500
    }
    .menu li ul li a:hover {
        color: #925afa;
        background-color: #efedf3
    }
}

.menu li:hover ul {
    visibility: visible;
    opacity: 1;
    top: 40px
}

.mm-spn a,
.mm-spn span {
    display: none
}

.mobile-menu span {
    background: #fff
}

.mobile-menu:after,
.mobile-menu:before {
    background: #fff
}

.blog-header .mobile-menu span,
.blog-single-header .mobile-menu span {
    background: #303030
}

.blog-header .mobile-menu:after,
.blog-header .mobile-menu:before,
.blog-single-header .mobile-menu:after,
.blog-single-header .mobile-menu:before {
    background: #303030
}

.menu-2 ul {
    margin: 0
}

.menu-2 li {
    display: inline-block
}

.menu-2 li a {
    position: relative;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    background: transparent;
    text-transform: uppercase;
    padding-right: 0;
    padding-left: 35px;
    display: block;
    z-index: 99
}

.menu-2 li a:hover {
    background: transparent;
    padding-right: 0;
    text-decoration: none
}

.menu-2 li {
    position: relative
}

@media(max-width:991px) {
    .menu-2 li {
        display: block
    }
}

@media(max-width:991px) {
    .menu-2 li a {
        padding: 20px 30px;
        text-align: left;
        color: #fff
    }
}

@media(max-width:1199px) {
    .menu-2 li a {
        padding-left: 20px
    }
}

@media screen and (min-width:992px) {
    .menu-2 li ul {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        width: 200px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px 0;
        transition: .3s;
        top: 100px
    }
    .menu-2 li ul li {
        display: block
    }
    .menu-2 li ul li a {
        color: #000
    }
}

.menu-2 li:hover ul {
    visibility: visible;
    opacity: 1;
    top: 40px
}

.sidebar .img-slide .owl-nav button {
    top: -30px;
    right: 0;
    position: absolute;
    width: 0;
    height: 0;
    font: inherit;
    font-size: 20px;
    background: transparent;
    color: #303030;
    line-height: 0!important;
    border-radius: 0!important;
    border: none!important;
    padding: 0!important;
    cursor: pointer;
    transition: .3s ease-out
}

.sidebar .img-slide .owl-nav button.owl-prev {
    right: 40px
}

.sidebar .img-slide .owl-nav button.owl-next {
    right: 10px
}

.sidebar .img-slide .owl-nav button:focus {
    outline: 0
}

.sidebar .img-slide .owl-nav button:hover {
    background: !important;
    color: !important;
    border: !important
}

.sidebar .img-slide .owl-nav {
    margin-right: 30px
}

.owl-dots {
    bottom: 0;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    position: relative;
    margin-bottom: -5px
}

.owl-dots button {
    position: relative;
    width: 80px;
    height: 5px;
    display: inline-block;
    background: #e2d5fd!important;
    border: 1px solid transparent!important;
    border-radius: none;
    margin-left: 0
}

.owl-dots button.active {
    width: 80px;
    height: 5px;
    background: #925afa!important;
    border: 1px solid transparent!important
}

.owl-dots button:focus {
    outline: 0
}

@media screen and (min-width:576px) {
    .owl-dots {
        bottom: 0;
        left: 50%;
        position: absolute;
        text-align: center;
        transform: translateX(-50%);
        position: relative
    }
    .owl-dots button {
        position: relative;
        width: 150px;
        height: 5px;
        display: inline-block;
        background: #e2d5fd!important;
        border: 1px solid transparent!important;
        border-radius: none;
        margin-left: 0
    }
    .owl-dots button.active {
        width: 150px;
        height: 5px;
        background: #925afa!important;
        border: 1px solid transparent!important
    }
    .owl-dots button:focus {
        outline: 0
    }
}

.portfolio-page.image-slide .owl-dots {
    bottom: 0;
    left: 50%;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    position: relative;
    margin-top: 20px
}

.portfolio-page.image-slide .owl-dots button {
    position: relative;
    width: 15px;
    height: 15px;
    display: inline-block;
    background: transparent!important;
    border: 4px solid #e8dff9!important;
    border-radius: 50%;
    margin-left: 15px
}

.portfolio-page.image-slide .owl-dots button.active {
    width: 15px;
    height: 15px;
    background: transparent!important;
    border: 4px solid #925afa!important
}

.portfolio-page.image-slide .owl-dots button:focus {
    outline: 0
}

.sidebar .img-slide .owl-dots {
    top: -40px;
    left: 20px;
    position: absolute;
    text-align: center;
    transform: translateX(-50%)
}

.sidebar .img-slide .owl-dots button {
    position: relative;
    width: 8px;
    height: 8px;
    display: inline-block;
    background: #e8dff9!important;
    border: 1px solid transparent!important;
    border-radius: 50%;
    margin-left: 5px
}

.sidebar .img-slide .owl-dots button.active {
    width: 8px;
    height: 8px;
    background: #e68c8c!important;
    border: 1px solid transparent!important
}

.sidebar .img-slide .owl-dots button:focus {
    outline: 0
}

.video-play-button {
    position: relative;
    z-index: 10;
    box-sizing: content-box;
    display: block;
    width: 80px;
    height: 80px;
    line-height: 95px;
    background: #fff;
    margin: auto;
    border-radius: 50%;
    text-align: center;
    left: 0;
    top: 0;
    transition: .3s ease-out
}

.video-play-button:before {
    content: "";
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: -2;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 195px;
    height: 195px;
    background: rgba(255, 255, 255, 0.44);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite
}

.video-play-button:after {
    content: "";
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 145px;
    height: 145px;
    background: rgba(255, 255, 255, 0.52);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
    transition: all 200ms;
    transition: all .55s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.video-play-button:hover {
    background: #0089D0
}

.video-play-button:hover:before {
    background: rgba(0, 137, 208, 0.44)
}

.video-play-button:hover:after {
    background: rgba(0, 137, 208, 0.52)
}

.video-play-button:hover .bi.bi-play-fill {
    color: #fff
}

.bi.bi-play-fill {
    color: #F99D1C;
    width: 30px;
    height: 30px
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0
    }
}

.social-link ul {
    margin-bottom: 10px
}

.social-link ul li {
    display: inline-block
}

.social-link ul li a {
    margin-right: 20px;
    color: #505359
}

.social-link ul li a:hover {
    color: #FD256C
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media(min-width:576px) {
    .container {
        max-width: 540px
    }
}

@media(min-width:768px) {
    .container {
        max-width: 720px
    }
}

@media(min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media(min-width:1200px) {
    .container {
        max-width: 1200px
    }
}

@media(min-width:1200px) {
    .container {
        max-width: 1200px
    }
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,
.no-gutters>.col-xl-5,
.no-gutters>.col-xl-8,
.no-gutters>.col-xl-7,
.no-gutters>.col-xl-6,
.no-gutters>.col-xl-4,
.no-gutters>.col-xl-3,
.no-gutters>.col-xl-2,
.no-gutters>.col-lg-12,
.no-gutters>.col-lg-9,
.no-gutters>.col-lg-8,
.no-gutters>.col-lg-7,
.no-gutters>.col-lg-6,
.no-gutters>.col-lg-5,
.no-gutters>.col-lg-4,
.no-gutters>.col-lg-3,
.no-gutters>.col-lg-2,
.no-gutters>.col-md-12,
.no-gutters>.col-md-9,
.no-gutters>.col-md-8,
.no-gutters>.col-md-7,
.no-gutters>.col-md-6,
.no-gutters>.col-md-5,
.no-gutters>.col-md-4,
.no-gutters>.col-md-3,
.no-gutters>.col-md-2,
.no-gutters>.col-sm-6,
.no-gutters>.col-sm-3,
.no-gutters>.col-12,
.no-gutters>.col-10,
.no-gutters>.col-9,
.no-gutters>.col-8,
.no-gutters>.col-6,
.no-gutters>.col-4,
.no-gutters>.col-3,
.no-gutters>.col-2,
.no-gutters>[class*=col-],
.no-gutters>[class*=cell],
.no-gutters>[class*=column] {
    padding-right: 0;
    padding-left: 0
}

.col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%
}

.col-3 {
    flex: 0 0 25%;
    max-width: 45%
}

.col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%
}

.col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%
}

@media(min-width:576px) {
    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
}

@media(min-width:576px) {
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media(min-width:768px) {
    .col-md-2 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }
}

@media(min-width:768px) {
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
}

@media(min-width:768px) {
    .col-md-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }
}

@media(min-width:768px) {
    .col-md-5 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }
}

@media(min-width:768px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media(min-width:768px) {
    .col-md-7 {
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }
}

@media(min-width:768px) {
    .col-md-8 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }
}

@media(min-width:768px) {
    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
}

@media(min-width:768px) {
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media(min-width:992px) {
    .col-lg-2 {
        flex: 0 0 35.6666666667%;
        /*max-width: 27.6666666667%*/
    }
}

@media(min-width:992px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
}

@media(min-width:992px) {
    .col-lg-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }
}

@media(min-width:992px) {
    .col-lg-5 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }
}

@media(min-width:992px) {
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media(min-width:992px) {
    .col-lg-7 {
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }
}

@media(min-width:992px) {
    .col-lg-8 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%
    }
}

@media(min-width:992px) {
    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
}

@media(min-width:992px) {
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media(min-width:1200px) {
    .col-xl-2 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%
    }
}

@media(min-width:1200px) {
    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
}

@media(min-width:1200px) {
    .col-xl-4 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%
    }
}

@media(min-width:1200px) {
    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
}

@media(min-width:1200px) {
    .col-xl-7 {
        flex: 0 0 58.3333333333%;
        max-width: 58.3333333333%
    }
}

@media(min-width:1200px) {
    .col-xl-8 {
        flex: 0 0 46.6666666667%;
        max-width: 46.6666666667%
    }
}

@media(min-width:1200px) {
    .col-xl-5 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%
    }
}

@media(min-width:1200px) {
    .offset-xl-2 {
        margin-left: 16.6666666667%
    }
}

.header-area {
    position: absolute;
    width: 100%;
    z-index: 999
}

.header-area .login-btn {
    margin-top: -5px
}

.header-area .login-btn a {
    display: inline-block;
    color: #fff
}

.header-area .header-logo {
    margin-top: -2px
}

.header-area-2 .card {
    align-self: center
}

.header-area-2 .card a {
    margin-left: 20px;
    color: #fff;
    position: relative
}

.header-area-2 .card span.card-noti {
    width: 20px;
    display: inline-block;
    height: 20px;
    border-radius: 50%;
    background-color: #925afa;
    position: absolute;
    top: -13px;
    left: 6px;
    text-align: center;
    line-height: 21px;
    font-size: 12px
}

.blog-header .card a {
    color: #000
}

.blog-single-header {
    position: relative;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px
}

.banner-area {
    position: relative;
    background-position: center;
    background-size: cover;
    height: 600px;
    overflow: hidden;
    z-index: 1
}

@media screen and (min-width:768px) {
    .banner-area {
        height: 100vh
    }
}

.banner-area::after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #3d3152;
    opacity: .56;
    z-index: -1
}

.banner-area .banner-content {
    height: auto;
    text-align: center
}

@media screen and (min-width:768px) {
    .banner-area .banner-content {
        height: 100vh;
        text-align: left
    }
}

.banner-area .banner-content h2 {
    line-height: 1.2!important
}

.banner-area .banner-content p {
    width: 100%
}

@media screen and (min-width:768px) {
    .banner-area .banner-content p {
        width: 65%
    }
}

.banner-area .video-icon {
    margin: 0 auto;
    margin-top: 30px
}

@media screen and (min-width:768px) {
    .banner-area .video-icon {
        margin-left: 0
    }
}

.banner-area .video-icon a {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left, #905BF4 0, #FAC3C8 100%)
}

.banner-area .video-icon a:hover {
    animation: banner-video-icon-anime 3s infinite linear
}

.banner-area .video-icon a img {
    width: 22px
}

.banner-area .banner-form {
    position: relative;
    height: 0;
    z-index: 99;
    margin-top: 30px
}

@media screen and (min-width:768px) {
    .banner-area .banner-form {
        height: 100vh
    }
}

.banner-area .banner-form .form-wrapp {
    position: relative
}

.banner-area .banner-form button {
    top: 14px;
    right: 5px;
    position: absolute;
    padding: 15px 20px;
    border-radius: 50%;
    cursor: pointer
}

.banner-area .banner-form button span {
    font-size: 8px;
    display: inline-block;
    transform: translateY(-2px)
}

.banner {
    position: relative
}

.banner .banner-shap {
    right: 5%;
    bottom: 50px;
    position: absolute;
    animation: skill-shap-animi 10s infinite linear;
    z-index: 99;
    display: none
}

@media screen and (min-width:576px) {
    .banner .banner-shap {
        display: block
    }
}

.banner-area-2 {
    height: 500px
}

@media screen and (min-width:768px) {
    .banner-area-2 {
        height: 100vh
    }
}

.banner-area-2 .banner-content {
    margin-top: 80px
}

@media screen and (min-width:576px) {
    .banner-area-2 .banner-content {
        margin-top: 50px
    }
}

@media screen and (min-width:768px) {
    .banner-area-2 .banner-content {
        margin-top: 0;
        padding-bottom: 0
    }
}

.banner-area-2::after {
    background-color: #8d55fd;
    opacity: 20%
}

.banner-area-2 .banner-video {
    height: auto
}

@media screen and (min-width:768px) {
    .banner-area-2 .banner-video {
        height: 100vh
    }
}

@media screen and (min-width:768px) {
    .banner-area-2 .video-icon {
        margin-left: auto
    }
}

.banner-area-2 .video-icon a {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #8d55fd!important;
    z-index: 1;
    margin-top: 30px
}

.banner-area-2 .video-icon a::after {
    top: -15px;
    left: -15px;
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background-color: #fff;
    opacity: .2;
    z-index: -1;
    border-radius: 50%
}

.banner-area-2 .video-icon a:hover::after {
    animation: video-icon 5s infinite linear
}

.banner-area-2 .video-icon a img {
    width: 20px
}

@keyframes video-icon {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(0.8)
    }
    50% {
        transform: scale(1)
    }
    75% {
        transform: scale(0.8)
    }
    100% {
        transform: scale(1)
    }
}

.page-banner::after {
    display: none
}

.page-banner .banner-content {
    margin-top: 150px
}

@media screen and (min-width:768px) {
    .page-banner .banner-content {
        margin-top: 0
    }
}

.page-banner-2 {
    background-position: left;
    height: 450px
}

@media screen and (min-width:1200px) {
    .page-banner-2 {
        height: 500px
    }
}

.page-banner-2::after {
    display: none
}

.page-banner-2 .banner-content {
    margin-top: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media screen and (min-width:992px) {
    .page-banner-2 .banner-content {
        margin-top: 15px
    }
}

@keyframes banner-video-icon-anime {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(0.8)
    }
    100% {
        transform: scale(1)
    }
}

.service-area .service-box {
    transition: .3s ease-out;
    border-radius: 10px
}

.service-area .service-box:hover {
    box-shadow: 0 10px 45px 0 rgba(0, 0, 0, 0.29)
}

.service-area .service-icon span {
    display: block;
    width: 70px;
    height: 70px;
    background: linear-gradient(to top left, #FAC3C8 0, #fc6f6f 100%);
    border-radius: 50%;
    margin: 0 auto;
    font-size: 25px;
    color: #fff;
    margin-bottom: 25px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.service-area .service-icon-2 span {
    background: linear-gradient(to top left, #0ddecc 0, #1cc5dc 100%)
}

.service-area .service-icon-3 span {
    background: linear-gradient(to left, #905BF4 0, #FAC3C8 100%)
}

.service-area .service-icon-shap {
    top: 0;
    left: 50%;
    position: absolute;
    width: 150px;
    transform: translateX(-50%);
    z-index: -1
}

.service-area .service-content h4 {
    font-family: "Roboto", sans-serif
}

.business-area {
    background-color: #ffeff8
}

@media screen and (min-width:992px) {
    .business-area .business-content {
        padding-right: 50px
    }
}

@media screen and (min-width:1200px) {
    .business-area .business-content {
        padding-right: 100px
    }
}

.business-area .business-content h2 {
    margin-top: -9px
}

@media screen and (min-width:768px) {
    .business-area .business-content h2 {
        margin-top: -12px
    }
}

.business-area .business-content h2 span {
    color: #925afa
}

.business-area .business-img {
    margin-left: auto;
    border-radius: 5px
}

.business-area .business-img img {
    display: block;
    width: 100%;
    border-radius: 5px
}

.skill-area {
    background-color: #f8f2ff;
    position: relative;
    overflow: hidden
}

.skill-area .skill-img {
    z-index: 1;
    width: 100%
}

@media screen and (min-width:992px) {
    .skill-area .skill-img {
        width: 94%;
        position: relative;
        top: 30px;
        left: 30px;
        margin-bottom: 30px
    }
}

.skill-area .skill-img::after {
    content: "";
    top: -30px;
    left: -30px;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #befff3 0, #8f5bfc 100%);
    z-index: -1;
    display: none
}

@media screen and (min-width:992px) {
    .skill-area .skill-img::after {
        display: block
    }
}

.skill-area .skill-img img {
    display: block;
    width: 100%
}

.skill-area .skill-content h2 {
    margin-top: 0
}

@media screen and (min-width:992px) {
    .skill-area .skill-content h2 {
        margin-top: -12px
    }
}

.skill-area .skill-bar p {
    font-weight: 600;
    font-style: italic
}

.skill-area .skill-bar .barfiller {
    height: 3px;
    background-color: rgba(252, 252, 252, 0.5)!important;
    border: none!important
}

.skill-area .skill-bar .barfiller:not(:last-child) {
    margin-bottom: 35px
}

.skill-area .skill-bar .fill {
    height: 3px!important;
    background-color: #fe6f73!important
}

.skill-area .skill-bar .barfiller .tip {
    background-color: transparent;
    color: #fe6f73;
    font-size: 18px
}

.skill-area .skill-bar .barfiller .tip::after {
    display: none
}

.skill-area .skill-shap {
    position: absolute;
    animation: skill-shap-animi 10s infinite linear
}

.skill-area .skill-shap-left {
    top: 30%;
    left: 3%;
    display: none
}

@media screen and (min-width:1200px) {
    .skill-area .skill-shap-left {
        display: block
    }
}

.skill-area .skill-shap-left-2 {
    bottom: 100px;
    left: 3%
}

.skill-area .skill-shap-right {
    right: 3%
}

.skill-area .skill-shap-right-2 {
    right: 3%;
    top: 100px
}

.skill-area-2 .skill-icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 10px;
    font-size: 28px;
    margin: 0 auto
}

@media screen and (min-width:992px) {
    .skill-area-2 .skill-icon {
        margin: unset
    }
}

.skill-area-2 .skill-icon-1 {
    background: linear-gradient(to left, #905BF4 0, #FAC3C8 100%)
}

.skill-area-2 .skill-icon-2 {
    background: linear-gradient(to top left, #FAC3C8 0, #fc6f6f 100%)
}

.skill-area-2 .skill-icon-3 {
    background: linear-gradient(to top left, #FAC3C8 0, #fc6f6f 100%)
}

.skill-area-2 .skill-icon-4 {
    background: linear-gradient(to top left, #0ddecc 0, #1cc5dc 100%)
}

.skill-area-2 .skill-box {
    text-align: center;
    position: relative;
    z-index: 9;
    transition: .3s;
    border-radius: 10px
}

@media screen and (min-width:992px) {
    .skill-area-2 .skill-box {
        text-align: left
    }
}

.skill-area-2 .skill-box:hover {
    box-shadow: 0 10px 45px 0 rgba(0, 0, 0, 0.29)
}

.skill-area-2 .skill-content h4 {
    font-family: "Roboto", sans-serif
}

@keyframes skill-shap-animi {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(180deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.creative-area .creative-img {
    position: relative;
    margin-top: 0;
    z-index: 999;
    margin-top: 0
}

@media screen and (min-width:1200px) {
    .creative-area .creative-img {
        margin-top: 0px;
    }
}

.aboutjs .crative-content::after {
    content: "";
    top: -15%;
    left: -25%;
    position: absolute;
    width: 130%;
    height: 130%;
    background: #eeeaeb;
    z-index: -3;
}

@media screen and (min-width:1200px) {
    .creative-area .creative-img::after {
        display: block
    }
}

.creative-area .creative-img img {
    width: 100%;
    display: block
}

.manager-area {
    overflow: hidden
}

.manager-area .manager-content span {
    color: #FD256C;
    margin-top: -7px;
    display: block
}

.manager-area .manager-content ul li {
    margin-bottom: 25px;
    opacity: 80%
}

.manager-area .manager-content ul li p {
    display: flex
}

.manager-area .manager-content ul li p span {
    transform: translateY(6px);
    display: inline-block;
    padding-right: 20px
}

.manager-area .manager-img {
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
    width: 100%;
    margin: 0 auto;
}

.manager-area .product-img {
    width: 40%;
}
.manager-area .manager-img img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.manager-area .app-img img {
    width: 50%;
    margin: 0 auto;
}
.manager-area .manager-img span {
    top: -25px;
    left: 20px;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FD256C
}

.manager-area .manager-img span:nth-child(2) {
    top: -25px;
    left: 40px;
    position: absolute;
    background-color: #8d55fd
}

.manager-area .manager-img span:nth-child(3) {
    top: -25px;
    left: 60px;
    position: absolute;
    background-color: #61e063
}

.manager-area-2 .manager-content span {
    color: #925afa;
    font-weight: 500
}

.manager-area-2 .manager-content ul li {
    opacity: 1
}

.manager-area-2 .manager-content ul li span {
    display: none
}

.pta-area {
    overflow: hidden;
    background: linear-gradient(to left, #905BF4 0, #FAC3C8 100%);
    padding: 40px 0
}

.pta-area .pta-check .pta-box {
    justify-content: space-between
}

.pta-area .pta-check .pta-box h3 {
    width: 100%;
    line-height: 32px;
    margin-top: -9px;
    margin-bottom: -5px;
    text-align: center
}

@media screen and (min-width:768px) {
    .pta-area .pta-check .pta-box h3 {
        text-align: left;
        width: 90%
    }
}

.pta-area .pta-check .pta-btn {
    text-align: center
}

.pta-area .pta-check .pta-btn a span {
    display: inline-block;
    transform: translate(10px, 1px)
}

@media screen and (min-width:768px) {
    .pta-area .pta-check .pta-btn {
        text-align: right
    }
}

.pta-area-2 {
    background: linear-gradient(to left, #8d59fc 0, #95adfa 100%)
}

.pta-area-3 {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1
}

.pta-area-3::after {
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .6;
    z-index: -1
}

.pta-area-3 .pta-box h3 {
    width: 100%!important;
    line-height: 36px!important;
    text-align: center!important;
    margin-top: -7px!important;
    margin-bottom: -7px!important
}

@media screen and (min-width:768px) {
    .pta-area-3 .pta-box h3 {
        line-height: 1.5!important;
        margin-top: -13px!important
    }
}

@media screen and (min-width:992px) {
    .pta-area-3 .pta-box h3 {
        width: 65%!important;
        line-height: 1.5!important;
        text-align: left!important
    }
}

.pta-area-3 .pta-box .pta-btn {
    align-self: center;
    text-align: center
}

.pta-area-3 .pta-box .pta-btn a {
    display: inline-block
}

.video-area {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 9;
    overflow: hidden
}

.video-area::after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #140c25;
    opacity: 52%;
    z-index: -1
}

.video-area .video-content {
    position: relative;
    z-index: 9;
    margin-bottom: -4px
}

.video-area .video-content h2 {
    margin-top: -9px
}

@media screen and (min-width:768px) {
    .video-area .video-content h2 {
        margin-top: -11px
    }
}

.video-area .video-content p {
    width: 100%
}

@media screen and (min-width:992px) {
    .video-area .video-content p {
        width: 85%
    }
}

.video-area .video-icon {
    height: auto
}

@media screen and (min-width:768px) {
    .video-area .video-icon {
        height: 100%
    }
}

.video-area .video-icon a {
    width: 50px;
    height: 50px;
    background-color: rgba(117, 76, 202, 0.7);
    border-radius: 50%
}

.video-area .video-icon a:hover {
    animation: video-icon-anime 3s infinite linear
}

@media screen and (min-width:768px) {
    .video-area .video-icon a {
        width: 70px;
        height: 70px
    }
}

@media screen and (min-width:1200px) {
    .video-area .video-icon a {
        width: 100px;
        height: 100px
    }
}

.video-area .video-icon a img {
    width: 20px
}

@media screen and (min-width:768px) {
    .video-area .video-icon a img {
        width: 25px
    }
}

.video-area-2::after {
    background-color: #140c25
}

.video-area-2 .video-shap {
    top: 53%;
    left: 5%;
    position: absolute;
    width: 200px;
    transform: translateY(-50%);
    z-index: 1
}

@keyframes video-icon-anime {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(0.8)
    }
    100% {
        transform: scale(1)
    }
}

.portfolio-area .portfolio-button button {
    border: 0;
    background-color: transparent;
    font-weight: 600;
    color: #282828;
    display: inline-block;
    font-size: 16px;
    margin-left: 20px;
    cursor: pointer;
    transition: .3s;
    position: relative
}

.portfolio-area .portfolio-button button::after {
    top: 50%;
    left: -13px;
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background-color: #925afa;
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: .3s
}

.portfolio-area .portfolio-button button:hover {
    color: #925afa
}

.portfolio-area .portfolio-button button:hover::after {
    opacity: 1
}

.portfolio-area .portfolio-button button.is-active {
    color: #925afa
}

.portfolio-area .portfolio-button button.is-active::after {
    opacity: 1
}

.portfolio-area .portfolio-img {
    position: relative;
    z-index: 1
}

.portfolio-area .portfolio-img::after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #925afa;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: .3s
}

.portfolio-area .portfolio-img a {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    color: #fff;
    font-size: 30px;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.portfolio-area .portfolio-img img {
    display: block;
    width: 100%
}

.portfolio-area .portfolio-img:hover::after {
    visibility: visible;
    opacity: .58
}

.portfolio-area .portfolio-img:hover a {
    visibility: visible;
    opacity: 1
}

.process-area {
    background-color: #8d55fd
}

.process-area .process-content h2 {
    margin-top: -8px
}

@media screen and (min-width:768px) {
    .process-area .process-content h2 {
        margin-top: -11px
    }
}

.process-area .process-item span {
    width: 100%;
    height: 100%;
    text-align: left;
    line-height: 60px;
    display: inline-block;
    font-size: 28px;
    font-weight: 400
}

.process-area .process-item-1 span {
    background-color: #ef87fe
}

.process-area .process-item-2 span {
    background-color: #00d7cf
}

.process-area .process-item-3 span {
    background-color: #f1b76e
}

.process-area .process-item-4 span {
    background-color: #58c5fe
}

.process-area .process-item p {
    text-align: left;
    margin-bottom: -8px;
    font-size: 22px;
}

.process-area .process-img {
    display: flex;
    justify-content: center
}

.testimonial-area {
    position: relative
}

.testimonial-area .section-title-center {
    position: relative;
    z-index: 1
}

.testimonial-area .section-title-center span {
    top: -40px;
    left: 50%;
    position: absolute;
    font-size: 90px;
    transform: translateX(-50%);
    z-index: -1;
    color: #f8f4ff
}

.testimonial-area .testimonial-img {
    position: relative;
    width: 100px;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover
}

.testimonial-area .testimonial-img img {
    border-radius: 50%
}

.testimonial-area .testimonial-content p {
    width: 100%;
    margin: 0 auto
}

@media screen and (min-width:768px) {
    .testimonial-area .testimonial-content p {
        width: 60%
    }
}

.testimonial-area .testimonial-devider {
    flex-direction: column;
    align-items: center
}

.testimonial-area .testimonial-devider span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ceb7ff;
    border-radius: 50%;
    margin-top: 30px;
    position: relative
}

.testimonial-area .testimonial-devider span::after {
    top: 0;
    left: 1px;
    position: absolute;
    content: "";
    width: 1px;
    height: 40px;
    background-color: #ceb7ff
}

.testimonial-area .testimonial-devider span:nth-child(2)::after {
    left: 2px
}

.testimonial-area .testimonial-devider span:nth-child(3)::after {
    display: none
}

.testimonial-area .testimonial-devider span:nth-child(1) {
    width: 3px;
    height: 3px
}

.testimonial-area .testimonial-devider span:nth-child(2) {
    width: 5px;
    height: 5px
}

.testimonial-area .testimonial-devider span:nth-child(3) {
    border: 2px solid #ceb7ff;
    background-color: #fff
}

.testimonial-area .testimonial-info p {
    margin-top: 5px
}

.testimonial-area .owl-carousel .owl-stage-outer {
    padding-bottom: 60px
}

.testimonial-area .testimonial-numder {
    position: absolute;
    font-size: 30px;
    color: #925afa;
    bottom: -62px
}

.testimonial-area .testimonial-numder-left {
    left: 50%;
    transform: translateX(-85px)
}

@media screen and (min-width:576px) {
    .testimonial-area .testimonial-numder-left {
        transform: translateX(-150px)
    }
}

.testimonial-area .testimonial-numder-center {
    left: 50%
}

.testimonial-area .testimonial-numder-right {
    left: 50%;
    transform: translateX(70px)
}

@media screen and (min-width:576px) {
    .testimonial-area .testimonial-numder-right {
        transform: translateX(150px)
    }
}

.testimonial-area .testiomnial-shap {
    position: absolute;
    transform: translateY(-50%)
}

.testimonial-area .testiomnial-shap-left {
    top: 50%;
    left: 0;
    display: none
}

@media screen and (min-width:992px) {
    .testimonial-area .testiomnial-shap-left {
        display: block
    }
}

.testimonial-area .testiomnial-shap-right {
    top: 50%;
    right: 0;
    display: none
}

@media screen and (min-width:992px) {
    .testimonial-area .testiomnial-shap-right {
        display: block
    }
}

.testimonial-area .testiomnial-shap-1 {
    left: 18%;
    bottom: 170px;
    animation: skill-shap-animi 10s infinite linear
}

.testimonial-area .testiomnial-shap-2 {
    right: 18%;
    top: 170px;
    animation: skill-shap-animi 10s infinite linear
}

.count-area {
    position: relative
}

.count-area .section-title-center h2 {
    width: 100%;
    margin: 0 auto;
    margin-top: -9px;
    margin-bottom: 15px
}

@media screen and (min-width:768px) {
    .count-area .section-title-center h2 {
        margin-top: -11px
    }
}

@media screen and (min-width:992px) {
    .count-area .section-title-center h2 {
        width: 50%
    }
}

.count-area .count-box {
    position: relative;
    box-shadow: 0 0 25px 0 rgba(206, 204, 204, 0.38);
    background-color: #fff;
    border-radius: 10px
}

.count-area .count-icon {
    top: -20px;
    left: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translateX(-50%);
    line-height: 50px;
    font-size: 22px
}

.count-area .count-icon span {
    font-size: 24px
}

.count-area .count-icon-1 {
    background-color: #f4efff;
    color: #925afa
}

.count-area .count-icon-2 {
    background-color: #fff3f7;
    color: #FD256C
}

.count-area .count-icon-3 {
    background-color: #fff3f7;
    color: #FD256C
}

.count-area .count-icon-4 {
    background-color: #f1fff6;
    color: #7afda9
}

.count-area .count-content {
    padding-top: 15px
}

.count-area .count-shap {
    bottom: 100px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: -1
}

.contact-area {
    background: linear-gradient(to left, #905BF4 0, #FAC3C8 100%);
    overflow: hidden
}

.contact-area .contact-form h2 {
    margin-top: -9px
}

@media screen and (min-width:768px) {
    .contact-area .contact-form h2 {
        margin-top: -11px
    }
}

.contact-area .contact-form .form-input:focus {
    border: 1px solid #925afa
}

.contact-area .contact-form .form-input::-webkit-input-placeholder {
    color: #fff
}

.contact-area .contact-news {
    background-color: #b27ce6;
    margin-left: 0
}

@media screen and (min-width:1200px) {
    .contact-area .contact-news {
        margin-left: 60px
    }
}

.contact-area .contact-news p {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px
}

.contact-area .contact-news a {
    margin-top: 30px;
    display: inline-block;
    color: #fff
}

.contact-area .contact-news a span {
    transform: translateY(1px);
    display: inline-block;
    padding-left: 3px
}

.about-page .about-content h2 {
    margin-top: -9px
}

@media screen and (min-width:768px) {
    .about-page .about-content h2 {
        margin-top: -11px
    }
}

.about-page .manager-content h2 {
    margin-top: -12px!important
}

.about-page .manager-img {
    top: 0;
    margin-bottom: 0
}

.about-page .manager-img::after {
    display: none
}

.about-big-img img {
    display: block
}

.service-page.service-area .section-title-center {
    width: 100%;
    margin: 0 auto
}

@media screen and (min-width:768px) {
    .service-page.service-area .section-title-center {
        width: 55%
    }
}

.service-page.manager-area .manager-content h2 {
    margin-top: -9px
}

@media screen and (min-width:768px) {
    .service-page.manager-area .manager-content h2 {
        margin-top: -11px
    }
}

.service-page.manager-area .manager-content ul li {
    opacity: 1
}

.service-page.manager-area .manager-content ul li span {
    color: #925afa
}

.service-page.manager-area .manager-btn {
    margin-bottom: -8px
}

.service-page.service-area-2 .section-title-center h4 {
    margin-top: -6px
}

.service-page.service-area-2 .service-wrapper {
    position: relative
}

.service-page.service-area-2 .service-icon span {
    width: 90px;
    height: 90px;
    background: transparent!important;
    color: #382c4d;
    border: 1px solid #ccc;
    line-height: 90px;
    font-size: 30px;
    font-weight: 500
}

.service-page.service-area-2 .service-content {
    margin-top: 30px
}

.service-page.service-area-2 .service-shap-left {
    top: 65px;
    left: 265px;
    position: absolute;
    display: none
}

@media screen and (min-width:1200px) {
    .service-page.service-area-2 .service-shap-left {
        display: block
    }
}

.service-page.service-area-2 .service-shap-right {
    top: 10px;
    right: 265px;
    position: absolute;
    display: none
}

@media screen and (min-width:1200px) {
    .service-page.service-area-2 .service-shap-right {
        display: block
    }
}

.service-page.video-area .video-icon a {
    background-color: rgba(240, 70, 70, 0.7)
}

.service-page-2.page-banner-2::after {
    display: block;
    opacity: .7;
    background-color: #1b132b
}

.service-page-2.service-area {
    background-color: #faf8ff
}

.service-page-2.service-area .service-icon span {
    width: 60px;
    height: 60px;
    margin-left: 0;
    text-align: center;
    border-radius: 10px;
    line-height: 60px;
    background: #eadfff;
    color: #925afa;
    margin-bottom: 16px
}

.service-page-2.service-area .service-icon-2 span {
    background: #ffdfea;
    color: #ff7ba8!important
}

.service-page-2.service-area .service-icon-3 span {
    background: #dffff3;
    color: #81d9b8!important
}

.service-page-2.service-area .service-icon-4 span {
    background: #fef3e2;
    color: #f8a96e!important
}

.service-page-2.service-area .service-btn {
    margin-bottom: -8px
}

.service-page-2.service-cloud {
    background-color: transparent
}

.service-page-2.service-cloud .service-box {
    background: linear-gradient(to top left, #ffedf6 0, #fff 60%);
    box-shadow: 0 0 19px 0 rgba(215, 215, 215, 0.35);
    padding: 40px 15px 40px 15px!important
}

@media screen and (min-width:1200px) {
    .service-page-2.service-cloud .service-box {
        padding: 40px 20px 40px 50px!important
    }
}

.service-page-2.service-cloud .service-box:hover {
    box-shadow: 0 10px 45px 0 rgba(0, 0, 0, 0.3)
}

.service-page-2.service-cloud .service-icon span {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 30px;
    color: #fff!important;
    background: #9990fc;
    border-radius: 70px;
}

.service-page-2.service-cloud .service-icon-2 span {
    background: #ff799f!important;
}

.service-page-2.service-cloud .service-icon-3 span {
    background: #7aefbd!important;
}

.service-page-2.service-cloud .service-icon-4 span {
    background: #f8a96e!important;
}
.service-page-2.service-cloud .service-icon-5 span {
    background: #7aefbd!important;
}
.service-page-2.service-cloud .service-icon-6 span {
    background: #f8a96e!important;
}

.service-page-2.service-cloud .service-content span {
    color: #925afa;
    margin-top: -6px;
    display: block
}

.service-page-2.pta-area-3 {
    background-position: center
}

.service-page-2.pta-area-3::after {
    background-color: #2b292a;
    opacity: 50%
}

.service-page-2.pta-area-3 .pta-box h3 {
    width: 100%!important
}

@media screen and (min-width:992px) {
    .service-page-2.pta-area-3 .pta-box h3 {
        width: 70%!important
    }
}

.cases-page .cases-box:not(:first-child) {
    margin-top: 60px
}

@media screen and (min-width:1200px) {
    .cases-page .cases-box:not(:first-child) {
        margin-top: 95px
    }
}

.cases-page .cases-box:last-child {
    margin-bottom: 0
}

@media screen and (min-width:1200px) {
    .cases-page .cases-box:last-child {
        margin-bottom: 40px
    }
}

.cases-page .cases-box-1 {
    background-color: #ffeff8
}

.cases-page .cases-box-2 {
    background-color: #effcff
}

.cases-page .cases-box-3 {
    background-color: #eff2ff
}

.cases-page .cases-box-4 {
    background-color: #faf6ff
}

.cases-page .cases-box-5 {
    background-color: #faf6ff
}

.cases-page .cases-box:hover .cases-img img {
    transform: scale(1.1)
}

.cases-page .cases-img {
    transform: scale(1);
    margin-left: 0;
    overflow: hidden
}

@media screen and (min-width:1200px) {
    .cases-page .cases-img {
        transform: scale(1.15);
        margin-left: 85px
    }
}

.cases-page .cases-img img {
    display: block;
    width: 100%;
    transition: .3s
}

@media screen and (min-width:1200px) {
    .cases-page .cases-img img {
        width: auto
    }
}

.cases-page .cases-content {
    padding: 15px
}

@media screen and (min-width:768px) {
    .cases-page .cases-content {
        padding: 40px
    }
}

@media screen and (min-width:992px) {
    .cases-page .cases-content {
        padding: 80px 40px 80px 0;
        margin-left: -5px
    }
}

.price-banner.banner-area {
    height: 400px;
    background: #8d55fd;
    background-position: top
}

.price-banner.banner-area::after {
    display: none
}

.price-banner.banner-area .banner-content {
    height: 400px;
    padding-top: 40px
}

@media screen and (min-width:992px) {
    .price-banner.banner-area .banner-content {
        padding-top: 65px
    }
}

.price-page.price-area .service-content h5 {
    margin-top: -4px
}

.price-page.price-area .price-box {
    box-shadow: 0 0 30px 0 rgba(181, 179, 185, 0.3)
}

.price-page.price-area .price-value {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccccc
}

.price-page.price-area .price-value>span {
    display: inline-block;
    font-size: 26px;
    font-weight: 500;
    margin-left: 50px;
    transform: translateY(-15px)
}

.price-page.price-area .price-value p {
    margin-top: -30px;
    font-size: 40px
}

.price-page.price-area .price-value p span {
    display: inline-block
}

.price-page.price-area .price-value p span:not(:first-child) {
    margin-left: 10px
}

.price-page.price-area .price-service-list li:not(:last-child) {
    padding-bottom: 15px
}

.price-page.price-area .price-control-btn {
    text-align: center
}

@media screen and (min-width:768px) {
    .price-page.price-area .price-control-btn {
        text-align: left
    }
}

.price-page.price-area .price-control-btn a {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #cccc;
    margin-top: 20px;
    color: #303030
}

.price-page.price-area .price-control-btn a.active {
    border: 0;
    border-bottom: 3px solid #925afa!important
}

.price-page.price-area-2 .price-box {
    border: 1px solid transparent;
    transition: .3s
}

.price-page.price-area-2 .price-box:hover {
    border: 1px solid #9c7dfb
}

.price-page.price-area-2 .price-icon {
    width: 70px;
    height: 70px;
    background-color: #9c7dfb;
    margin: 0 auto;
    border-radius: 50%;
    color: #fff;
    line-height: 70px;
    font-size: 24px
}

.price-page.price-area-2 .price-value p {
    font-size: 24px;
    margin-top: 0
}

.price-page.price-area-2 .price-contact h4 {
    color: #382c4d
}

.price-page.price-area-2 .price-contact a {
    color: #925afa;
    font-weight: 400;
    margin-left: 10px;
    font-weight: 500
}

.tabs.v1 .t-panel-container .t-panel {
    transition: all .2s ease-in-out;
    display: none
}

.tabs.v1 .t-panel-container .t-panel.active {
    display: block
}

.portfolio-single-page.banner-area {
    position: relative;
    background-position: center;
    height: auto
}

@media screen and (min-width:768px) {
    .portfolio-single-page.banner-area {
        height: 100vh
    }
}

.portfolio-single-page.banner-area::after {
    display: block;
    background: linear-gradient(to top, #7f77db 0, #d3888f 100%);
    opacity: .85
}

.portfolio-single-page.banner-area .banner-content {
    width: 100%;
    margin-top: 0;
    padding: 180px 0 200px
}

@media screen and (min-width:992px) {
    .portfolio-single-page.banner-area .banner-content {
        width: 80%;
        margin-top: 50px
    }
}

@media screen and (min-width:1200px) {
    .portfolio-single-page.banner-area .banner-content {
        width: 50%
    }
}

.portfolio-single-page.banner-area .banner-content span {
    background-color: #FD256C;
    width: 110px;
    padding: 0 10px;
    color: #fff;
    margin: 0 auto
}

@media screen and (min-width:768px) {
    .portfolio-single-page.banner-area .banner-content span {
        margin-left: 0
    }
}

.portfolio-single-page .portfolio-single-wrapper {
    position: relative;
    margin-top: -80px;
    background-color: #fff;
    z-index: 99
}

.portfolio-single-page .portfolio-single-content h2 {
    margin-top: -12px
}

.portfolio-single-page .portfolio-single-img img {
    display: block;
    width: 100%
}

.portfolio-single-page .portfolio-single-details .portfolio-img {
    position: relative
}

.portfolio-single-page .portfolio-single-details .portfolio-img img {
    display: block
}

.portfolio-single-page .portfolio-single-details .portfolio-img::after {
    top: -60px;
    left: -50px;
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #f5f4ff;
    z-index: -1;
    display: none
}

@media screen and (min-width:1200px) {
    .portfolio-single-page .portfolio-single-details .portfolio-img::after {
        display: block
    }
}

.portfolio-single-page .portfolio-single-details .portfolio-img-right::after {
    left: unset;
    right: -50px!important
}

.portfolio-single-page .portfolio-single-details .portfolio-content>span {
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: #FD256C;
    margin-bottom: 10px
}

.portfolio-single-page .portfolio-single-details .portfolio-content ul li:not(:last-child) {
    margin-bottom: 10px
}

.portfolio-single-page .portfolio-single-details .portfolio-content ul li span {
    padding-right: 15px;
    color: #925afa
}

.portfolio-single-page.pta-area-4 {
    background-color: #925afa
}

.portfolio-single-page.pta-area-4 .pta-socile {
    text-align: left;
    margin-bottom: 30px
}

@media screen and (min-width:768px) {
    .portfolio-single-page.pta-area-4 .pta-socile {
        text-align: right;
        margin-bottom: 0
    }
}

.portfolio-single-page.pta-area-4 .pta-socile a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-left: 10px;
    margin-top: 20px;
    color: #fff
}

.portfolio-single-page.pta-area-4 .pta-socile a:nth-child(1) {
    background-color: #435594
}

.portfolio-single-page.pta-area-4 .pta-socile a:nth-child(2) {
    background-color: #1f72b0
}

.portfolio-single-page.pta-area-4 .pta-socile a:nth-child(3) {
    background-color: #bd1223
}

.portfolio-single-page.pta-area-4 .pta-socile a:nth-child(4) {
    background-color: #349aed
}

.portfolio-page.image-slide .section-title-center h2 {
    width: 100%;
    margin: 0 auto
}

@media screen and (min-width:768px) {
    .portfolio-page.image-slide .section-title-center h2 {
        width: 60%
    }
}

.portfolio-page.image-slide .page-btn {
    justify-content: space-between;
    align-items: center
}

.portfolio-page.image-slide .page-btn .prev-btn {
    padding-top: 10px
}

.portfolio-page.image-slide .page-btn .prev-btn a {
    color: #000
}

.portfolio-page.image-slide .page-btn .prev-btn a span {
    color: #925afa
}

.portfolio-page.image-slide .page-btn .next-btn {
    padding-top: 10px
}

.portfolio-page.image-slide .page-btn .next-btn a {
    color: #000
}

.portfolio-page.image-slide .page-btn .next-btn a span {
    transform: translateY(2px);
    display: inline-block;
    color: #925afa
}

.blog-page.banner-area {
    height: 250px;
    background-color: #efedf3
}

@media screen and (min-width:768px) {
    .blog-page.banner-area {
        height: 400px
    }
}

.blog-page.banner-area::after {
    display: none
}

.blog-page.banner-area .banner-content {
    height: 250px;
    padding-top: 50px
}

@media screen and (min-width:768px) {
    .blog-page.banner-area .banner-content {
        height: 400px;
        padding-top: 60px
    }
}

.blog-page .blog-item {
    transition: .3s;
    padding: 20px;
    border-radius: 10px
}

.blog-page .blog-item:hover {
    box-shadow: 0 0 20px 10px #dadadacc
}

.blog-page .blog-item:hover .blog-img img {
    transform: scale(1.2) rotate(5deg)
}

.blog-page .blog-img {
    position: relative;
    overflow: hidden;
    transition: .3s;
    border-radius: 10px
}

.blog-page .blog-img img {
    width: 100%;
    transition: .3s
}

.blog-page .blog-img>span a {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #fd799e;
    color: #fff;
    padding: 3px 15px;
    font-size: 13px
}

.blog-page .blog-content {
    margin-top: 20px
}

@media screen and (min-width:1200px) {
    .blog-page .blog-content {
        margin-top: -8px
    }
}

.blog-page .blog-content a {
    color: #303030
}

.blog-page .blog-content a:hover {
    color: #925afa;
    text-decoration: underline
}

.blog-page .blog-content .autor-img {
    padding-top: 5px
}

.blog-page .blog-content .author-info {
    color: #858585
}

.blog-page .blog-content .book-mark {
    margin-left: auto;
    align-self: center
}

.blog-page .blog-content .book-mark a {
    color: #858585
}

.blog-single-page .single-big-img img {
    display: block
}

.blog-single-page .blog-single-post .sub {
    margin-top: -8px
}

.blog-single-page .blog-single-post>span {
    background-color: #fd799e;
    color: #fff;
    padding: 3px 10px
}

.blog-single-page .blog-single-post .author-info {
    align-items: flex-end;
    flex-wrap: wrap
}

.blog-single-page .blog-single-post .author-info .author-img img {
    transform: translateY(5px)
}

.blog-single-page .blog-single-post .author-text {
    margin-left: 10px;
    color: #858585
}

.blog-single-page .blog-single-post .author-text .name {
    font-size: 15px
}

.blog-single-page .blog-single-post .author-text .date {
    font-size: 14px
}

.blog-single-page .blog-single-post .post-tag {
    padding-left: 0;
    align-self: flex-end;
    color: #858585
}

@media screen and (min-width:768px) {
    .blog-single-page .blog-single-post .post-tag {
        padding-top: 0;
        padding-left: 30px
    }
}

.blog-single-page .blog-single-post .author-right {
    height: 100%
}

.blog-single-page .blog-single-post .social-link {
    align-self: flex-end
}

.blog-single-page .blog-single-post .social-link ul {
    margin-bottom: 0
}

@media screen and (min-width:992px) {
    .blog-single-page .blog-single-post .social-link {
        margin-left: auto;
        padding-top: 0;
        align-self: flex-end
    }
}

.blog-single-page .blog-single-post .social-link a {
    margin-bottom: 0;
    margin-right: 15px
}

.blog-single-page .blog-single-post .save-icon {
    align-self: flex-end
}

.blog-single-page .blog-single-post .save-icon a {
    color: #303030
}

.blog-single-page .blog-single-post .save-icon a:hover {
    color: #925afa
}

.blog-single-page .blog-img img {
    width: 100%
}

.blog-single-page .blog-single-post-pre {
    position: relative;
    height: auto;
    display: block;
    align-items: center
}

@media screen and (min-width:768px) {
    .blog-single-page .blog-single-post-pre {
        height: 322px;
        display: flex
    }
}

.blog-single-page .blog-single-post-pre .content {
    position: relative;
    width: 100%;
    z-index: 99;
    background-color: #fd799e;
    padding: 40px 30px
}

@media screen and (min-width:768px) {
    .blog-single-page .blog-single-post-pre .content {
        width: 80%
    }
}

@media screen and (min-width:768px) {
    .blog-single-page .blog-single-post-pre .content {
        width: 60%
    }
}

@media screen and (min-width:992px) {
    .blog-single-page .blog-single-post-pre .content {
        width: 65%
    }
}

@media screen and (min-width:1200px) {
    .blog-single-page .blog-single-post-pre .content {
        width: 60%
    }
}

.blog-single-page .blog-single-post-pre .img {
    position: relative
}

.blog-single-page .blog-single-post-pre .img img {
    width: 100%;
    display: block
}

@media screen and (min-width:768px) {
    .blog-single-page .blog-single-post-pre .img {
        top: 0;
        right: 0;
        position: absolute
    }
}

.blog-single-page .add-text {
    border-left: 3px solid #e68c8c;
    padding-left: 15px
}

.blog-single-page .post-control {
    flex-wrap: wrap
}

.blog-single-page .post-control .post-shier h4 {
    font-size: 13px
}

@media screen and (min-width:576px) {
    .blog-single-page .post-control .post-shier h4 {
        font-size: 18px
    }
}

.blog-single-page .post-control .social-link {
    margin-left: 10px;
    margin-top: -8px
}

@media screen and (min-width:768px) {
    .blog-single-page .post-control .social-link {
        margin-top: -5px
    }
}

@media screen and (min-width:992px) {
    .blog-single-page .post-control .social-link {
        margin-left: 40px;
        margin-top: -5px
    }
}

.blog-single-page .post-control .social-link ul li {
    display: inline-block
}

.blog-single-page .post-control .social-link ul li a {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    display: block;
    margin-right: 0
}

@media screen and (min-width:576px) {
    .blog-single-page .post-control .social-link ul li a {
        margin-right: 10px
    }
}

.blog-single-page .post-control .social-link ul li a:hover {
    background-color: #925afa;
    color: #fff
}

.blog-single-page .recent-post {
    width: 100%;
    border: 1px solid #cccc;
    padding: 20px;
    padding-left: 60px;
    position: relative
}

@media screen and (min-width:992px) {
    .blog-single-page .recent-post {
        width: 50%
    }
}

.blog-single-page .recent-post span {
    top: 30px;
    left: 30px;
    position: absolute
}

.blog-single-page .recent-post a {
    margin-top: 10px;
    display: inline-block;
    color: #303030
}

.blog-single-page .recent-post a:hover {
    color: #925afa;
    text-decoration: underline
}

.blog-single-page .comments .comment {
    padding: 15px;
    border: 1px solid #ccc
}

@media screen and (min-width:576px) {
    .blog-single-page .comments .comment {
        padding-left: 30px;
        padding-top: 15px
    }
}

.blog-single-page .comments .comment-child {
    margin-left: 30px
}

@media screen and (min-width:576px) {
    .blog-single-page .comments .comment-child {
        margin-left: 80px
    }
}

.blog-single-page .comments .comment-body .comment-avater {
    width: 20%
}

@media screen and (min-width:576px) {
    .blog-single-page .comments .comment-body .comment-avater {
        width: auto
    }
}

.blog-single-page .comments .comment-body .comment-content {
    width: 80%;
    padding: 10px 0 10px 25px
}

.blog-single-page .comments .comment-body .comment-content span {
    font-size: 14px
}

.blog-single-page .comments .comment-body .reply-btn a {
    display: inline-block;
    background-color: #eee;
    color: #000;
    padding: 5px 20px;
    border-radius: 10px
}

.blog-single-page .comments .comment-body .reply-btn a:hover {
    background-color: #fd799e;
    color: #fff
}

.blog-single-page .commetn-form .form-input:focus {
    border: 1px solid #925afa
}

.blog-single-page .commetn-form .btn {
    cursor: pointer;
    margin-bottom: 0
}

.contact-page .contact-content h2 {
    margin-top: -15px!important
}

.contact-page .contact-phone a {
    color: #925afa
}

.contact-page .contact-phone a span {
    transform: translateY(2px);
    display: inline-block
}

.contact-page .contact-form {
    box-shadow: 0 0 25px 0 rgba(206, 204, 204, 0.35);
    padding: 15px 15px
}

.contact-page .contact-form .form-input:focus {
    border: 1px solid #925afa
}

@media screen and (min-width:768px) {
    .contact-page .contact-form {
        padding: 50px 40px
    }
}

.contact-page button {
    cursor: pointer
}

.sidebar .search-form {
    margin-top: -10px
}

.sidebar .slide-item {
    position: relative
}

.sidebar .slide-item>a {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    color: #fff
}

.sidebar .slide-item>p {
    bottom: 20px;
    left: 50%;
    position: absolute;
    width: 90%;
    transform: translateX(-50%);
    text-align: center
}

.sidebar .cat-list ul li {
    margin-top: 5px
}

.sidebar .cat-list ul li a {
    color: #5e5e5e
}

.sidebar .cat-list ul li a:hover {
    margin-left: 10px;
    color: #925afa
}

.sidebar .img-slide-2 .slide-content {
    bottom: 20px;
    left: 20px;
    position: absolute;
    width: 100%
}

.sidebar .img-slide-2 .slide-content a {
    color: #fff;
    display: block
}

.sidebar .img-slide-2 .slide-content p {
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #fff;
    display: inline-block;
    margin-bottom: 10px
}

.sidebar .featured-img img {
    display: block;
    width: 100%
}

.sidebar .featured-content a {
    font-weight: 700;
    color: #000
}

.sidebar .featured-content a:hover {
    color: #925afa;
    text-decoration: underline
}

.sidebar .featured-content span {
    font-size: 13px;
    border-bottom: 1px solid #000
}

.sidebar .archive-post {
    width: 100%
}

@media screen and (min-width:992px) {
    .sidebar .archive-post {
        width: 80%
    }
}

@media screen and (min-width:1200px) {
    .sidebar .archive-post {
        width: 50%
    }
}

.sidebar .archive-post ul li a {
    padding: 10px 0;
    display: block;
    color: #000;
    border-bottom: 1px solid #ccc
}

.sidebar .archive-post ul li a:hover {
    margin-left: 10px;
    color: #925afa
}

.sidebar .social {
    width: 100%;
    border-bottom: 1px solid #ccc
}

@media screen and (min-width:992px) {
    .sidebar .social {
        width: 90%
    }
}

@media screen and (min-width:1200px) {
    .sidebar .social {
        width: 70%
    }
}

.sidebar .social .social-link {
    margin-top: 10px
}

.footer-area {
    background-color: #f2f2fd;
    background-repeat: no-repeat;
    background-size: cover
}

.footer-area .section-title-center h2 {
    margin-top: -8px
}

.footer-area .footer-socile-link a {
    display: inline-block;
    margin-right: 30px;
    color: #888
}

.footer-area .footer-socile-link a:hover {
    color: #FD256C
}

.footer-area .section-padding {
    padding: 50px 0!important
}

.footer-area .footer-logo p {
    color: #7b7b7b
}

.footer-area .footer-site-info {
    border-top: 1px solid #88870
}

.footer-menu ul {
    margin: 0
}

.footer-menu li {
    display: block
}

.footer-menu li a {
    position: relative;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #282828;
    background: transparent;
    text-transform: capitalize;
    padding: 5px 0;
    display: block;
    z-index: 99
}

.footer-menu li a:hover {
    color: #925afa;
    background: transparent;
    text-decoration: none
}

.footer-about h5 {
    font-family: "Roboto", sans-serif;
    font-weight: 500
}

.footer-subscribe {
    width: 100%;
    margin: 0 auto
}

@media screen and (min-width:768px) {
    .footer-subscribe {
        width: 48%
    }
}

.footer-subscribe form {
    position: relative
}

.footer-subscribe form input {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: black;
    background: #fff;
    text-transform: capitalize;
    padding: 17px 20px;
    margin: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 50px;
    transition: .3s ease-out
}

.footer-subscribe form button {
    border: 1px solid transparent;
    background: #925afa;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 30px;
    border-radius: 50px;
    cursor: pointer;
    top: 0;
    right: 0;
    position: absolute;
    transition: .3s ease-out
}

.footer-subscribe form button:hover {
    background: transparent;
    border-color: #925afa;
    color: #925afa
}

.footer-area-2 {
    background: #232323
}

.footer-area-2 .footer-subscribe {
    width: 100%;
    margin-left: 0
}

@media screen and (min-width:992px) {
    .footer-area-2 .footer-subscribe {
        width: 80%
    }
}

.footer-area-2 .footer-2-title a {
    color: #925afa
}

.footer-area-2 .footer-logo p {
    width: 74%
}

.footer-area-2 .footer-socile-link a {
    color: #fff
}

.footer-area-2 .footer-socile-link a:hover {
    color: #925afa
}

.footer-area-2 .footer-menu ul {
    margin: 0
}

.footer-area-2 .footer-menu li {
    display: block
}

.footer-area-2 .footer-menu li a {
    position: relative;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    background: transparent;
    text-transform: capitalize;
    padding: 5px 0;
    display: block;
    z-index: 99
}

.footer-area-2 .footer-menu li a:hover {
    color: #925afa;
    background: transparent;
    text-decoration: none
}

.footer-area-2 .footer-menu ul {
    margin-top: 25px
}

.footer-area-2 .footer-menu ul li a {
    opacity: 80%
}

.footer-area-2 .footer-2-news {
    width: 85%
}

.footer-area-2 .footer-about h5 a:hover {
    color: #925afa;
    text-decoration: underline
}

.footer-area-2 .footer-about span {
    margin-top: 7px;
    color: #925afa
}

.footer-area-3 {
    background-size: 100%;
    background-position: bottom;
    background-color: #faf7ff
}

.footer-area-3 .footer-logo h4 a {
    color: #FD256C;
    font-size: 16px
}

.footer-area-3 .footer-logo p {
    color: #39436f
}

.footer-area-3 .footer-menu ul {
    margin-top: 20px
}

.footer-area-3 .footer-menu ul li a {
    color: #39436f
}

.footer-area-3 .footer-menu ul li a:hover {
    color: #925afa
}

.footer-area-3 .footer-socile-link a {
    margin-right: 10px;
    width: 50px;
    height: 50px;
    background-color: #fefdff;
    color: #e2ddde;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    box-shadow: 0 20px 30px -10px #ceb8f7
}

.footer-area-3 .footer-socile-link a:hover {
    color: #fff;
    background-color: #925afa
}

.footer-area-3 .footer-adress {
    color: #39436f;
    width: 80%
}

.footer-area-3 .footer-adress h4 a {
    color: #ff799f
}

.footer-area-3 .footer-subscribe {
    width: 100%;
    margin-top: 30px
}

.footer-area-3 .footer-subscribe form input {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: black;
    background: #fff;
    text-transform: capitalize;
    padding: 15px 20px;
    margin: 0;
    width: 100%;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 5px;
    transition: .3s ease-out
}

.footer-area-3 .footer-subscribe form button {
    border: 0;
    background: transparent;
    color: #925afa;
    padding: 0;
    cursor: pointer;
    top: 15px;
    right: 10px;
    position: absolute;
    transition: .3s ease-out
}

.footer-area-3 .footer-subscribe form button:hover {
    background: transparent;
    border-color: #925afa;
    color: #925afa
}

.footer-area-3 .footer-site-info {
    border-top-style: dashed
}

/*视频占满div*/
.mfp-iframe video{
    width: 100%;
}
@media screen and (max-width:768px){
    .manager-area .app-img img{
        width: 80%;
    }
}