.comp-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 10;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
    display: flex;
    align-items: center;
}

.comp-bar.scrolled {
    background-color: var(--color-gray-2) !important;
    backdrop-filter: blur(6px);
}

.comp-bar>div>div>a {
    display: block;
    width: 130px;
}

.comp-bar>div>div>a>img {
    height: 40px;
    cursor: pointer;
}


/*--------------------
    Main Menu Style
----------------------*/
.comp-nav-menu-nav .comp-nav-menu {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: var(--font-titillium-web);
    font-size: 15px;
}

.comp-nav-menu-nav .comp-nav-menu>li>a {
    color: var(--color-heading);
    font-weight: 700;
}

.comp-nav-menu-nav .comp-nav-menu>li>a:hover {
    color: var(--color-primary) !important;
}

.comp-nav-menu-nav .comp-nav-menu>li a:hover {
    color: var(--color-primary);
}

.comp-nav-menu-nav .comp-nav-menu>li {
    position: relative;
    margin: 10px 4px;
}

.comp-nav-menu-nav .comp-nav-menu>li>a {
    padding: 4px 12px !important;
    color: var(--color-heading) !important;
    position: relative;
    display: inline-block;
    text-decoration: none !important;
}

.comp-nav-menu-nav .comp-nav-menu>li>a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    left: 0;
    background: var(--color-primary);
    width: 100%;
    height: 100%;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: -1;
}

.comp-nav-menu-nav .comp-nav-menu>li>a i {
    transition: var(--transition);
    font-size: 10px;
    margin-left: 3px;
}

.comp-nav-menu-nav .comp-nav-menu>li>a.active {
    color: var(--color-primary) !important;
}

.comp-nav-menu-nav .comp-nav-menu>li>a.active::after {
    opacity: 0.1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.comp-nav-menu-nav .comp-nav-menu>li:hover>a,
.comp-nav-menu-nav .comp-nav-menu>li.current>a {
    color: var(--color-primary) !important;
}

.comp-nav-menu-nav .comp-nav-menu>li:hover>a::after,
.comp-nav-menu-nav .comp-nav-menu>li.current>a::after {
    opacity: 0.1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.comp-nav-menu-nav .comp-nav-menu>li:hover>a i,
.comp-nav-menu-nav .comp-nav-menu>li.current>a i {
    transform: rotate(180deg);
}

.comp-nav-menu-nav .comp-nav-menu>li.has-dropdown {
    margin-right: 5px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 11px 0;
}

.comp-nav-menu-nav .comp-nav-menu>li.has-dropdown .submenu {
    padding: 10px;
    min-width: 230px;
    height: auto;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    text-align: left;
    transition: 0.5s;
    transform: scaleY(0);
    border-radius: 10px;
    background: var(--color-gray-2);
    display: inline-block;
    box-shadow: -3px 0px 20px 4px rgba(100, 95, 95, 0.08);
    transform-origin: 0 0;
    margin-top: 0;
}

.comp-nav-menu-nav .comp-nav-menu>li.has-dropdown .submenu li a {
    color: var(--color-heading);
}

.comp-nav-menu-nav .comp-nav-menu>li.has-dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    top: 100%;
    transform: scaleY(1);
    overflow: inherit;
}

.comp-nav-menu-nav .comp-nav-menu>li.menu-item-open>a {
    color: var(--color-primary) !important;
}

.comp-nav-menu-nav .comp-nav-menu>li.menu-item-open>a::after {
    opacity: 0.1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu {
    padding: 0;
    border: none !important;
    overflow: hidden;
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li {
    position: relative;
    display: block;
    cursor: pointer;
    margin-bottom: 0;
    margin-top: 0;
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li::after {
    position: absolute;
    content: "\f105";
    font-family: "Font Awesome 6 Pro";
    font-size: 14px;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    opacity: 0;
    transition: 0.2s;
    color: var(--color-primary);
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li a {
    display: block;
    position: relative;
    transition: var(--transition);
    padding: 3px;
    text-decoration: none !important;
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li a::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: var(--color-primary);
    width: 100%;
    height: 28px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: -1;
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li a:hover::before,
.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li a.active::before {
    opacity: 0.1;
    visibility: visible;
    transform: translateY(-50%);
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li>a.active {
    padding-left: 15px;
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li:hover>a {
    color: var(--color-primary);
    padding-left: 15px;
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li:hover::after {
    right: 15px;
    opacity: 1;
}

.comp-nav-menu-nav .comp-nav-menu .has-dropdown .submenu li.menu-item::after {
    display: none;
}


/*----------------------------
    Mobile Menu Styles
------------------------------*/
.comp-nav-menu_offcanvas {
    background-color: var(--color-gray-2);
    padding: 15px 20px;
}

@media only screen and (max-width: 479px) {
    .comp-nav-menu_offcanvas {
        padding: 10px;
    }
}

.comp-nav-menu_offcanvas .header-top {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.comp-nav-menu_offcanvas .header-top .logo a img {
    max-height: 45px;
}

.comp-nav-menu_offcanvas .header-top .close-menu .close-button {
    background: var(--color-secondary);
    border: 0 none;
    color: var(--color-white);
    width: 40px;
    height: 40px;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.comp-nav-menu_offcanvas .comp-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0;
}

.comp-nav-menu_offcanvas .comp-nav-menu li {
    display: block;
    margin: 0;
    padding: 8px 0;
}

.comp-nav-menu_offcanvas .comp-nav-menu li a {
    color: var(--color-body);
    position: relative;
    transition: var(--transition);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    font-family: var(--font-secondary);
    margin: 0;
    display: block;
    font-weight: 500;
    background: transparent;
    font-family: var(--font-titillium-web);
}

.comp-nav-menu_offcanvas .comp-nav-menu li a i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-size: 15px;
}

.comp-nav-menu_offcanvas .comp-nav-menu li a.open i::before {
    content: "\f106";
    font-weight: 400;
}

.comp-nav-menu_offcanvas .comp-nav-menu li+li {
    border-top: 1px solid var(--color-border);
}

.comp-nav-menu_offcanvas .comp-nav-menu .has-dropdown .submenu {
    padding: 0;
    max-width: 100%;
    list-style: none;
    padding-left: 16px;
    display: none;
}

.comp-nav-menu_offcanvas .comp-nav-menu .has-dropdown .submenu li a {
    font-size: 14px;
    color: var(--color-body);
    font-weight: 500;
}

.comp-nav-menu_offcanvas .comp-nav-menu .has-dropdown .submenu li a.open {
    color: var(--color-primary) !important;
}

.comp-nav-menu_offcanvas .comp-nav-menu .has-dropdown>a.open+.submenu {
    display: block;
    max-height: 500px;
}

.comp-nav-menu_offcanvas .comp-nav-menu .has-dropdown .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.comp-nav-menu_offcanvas.active {
    visibility: visible;
    opacity: 1;
}

.comp-nav-menu_offcanvas.active .inner {
    opacity: 1;
    left: 0;
    overflow-y: auto;
}

@media (max-width: 992px) {
    .comp-nav-menu-nav {
        display: none !important;
    }

    .comp-bar-menu_mobile {
        display: block !important;
    }
}
.comp-banner {
    background-image: url(/assets/layout/header-bg.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 120px;
    overflow: hidden;
    max-width: 100%;
}


.comp-banner .inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.comp-banner .inner span.sub-title {
    color: var(--color-heading);
    font-family: var(--font-nunito);
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-flex;
}

.comp-banner .inner .header-caption {
    color: var(--color-primary);
}

.comp-banner .inner span.title {
    color: var(--color-heading);
    font-family: var(--font-nunito);
    font-size: 68px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    margin-top: 30px;
}

.comp-banner .cd-headline {
    display: inline-block;
    white-space: nowrap;
}

.comp-banner .cd-headline .words {
    border-right: 2px solid #fff;
    padding-right: 4px;
    animation: blinkCursor 0.7s step-end infinite;
    white-space: nowrap;
    overflow: hidden;
}

.comp-banner .cd-headline .words>b {
    display: inline-block;
    width: 100%;
}

.comp-banner .disc {
    color: var(--color-gray);
    font-family: var(--font-nunito);
    font-size: 18px;
    margin-top: 22px;
    margin-bottom: 0;
}

@keyframes blinkCursor {
    50% {
        border-color: transparent;
    }
}

.comp-banner>div {
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.comp-banner>div>div>div>.banner-right-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.comp-banner>div>div>div>.banner-right-content>img {
    opacity: 1;
    transform: scale(1);
    max-height: 600px;
    max-width: 100%;
    object-fit: contain;
    margin-right: 70px;
    --animation-order: 1;
}

.comp-banner>div>div>div>.banner-right-content>h2 {
    user-select: none;
    text-transform: uppercase;
}

.comp-banner>div>div>div>.banner-right-content>h2.text-web {
    font-size: 70px;
    color: var(--color-primary);
    font-family: var(--font-nunito);
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    position: absolute;
    margin-bottom: 0;
    top: 22%;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    -webkit-animation: up-down 1s infinite alternate;
    animation: up-down 1s infinite alternate;
    opacity: 0.2;
    text-align: center;
}

.comp-banner>div>div>div>.banner-right-content>h2.text-dev {
    position: absolute;
    bottom: 190px;
    left: 0px;
    font-size: 48px;
    line-height: 1.2;
    -webkit-text-stroke: 1px #0094ff;
    color: transparent;
    font-family: var(--font-nunito);
    font-weight: 900;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    -webkit-animation: up-down-2 0.9s infinite alternate;
    animation: up-down-2 0.9s infinite alternate;
}

@-webkit-keyframes up-down {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes up-down {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@-webkit-keyframes up-down-2 {
    0% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes up-dow-2 {
    0% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (min-width: 600px) {
    .comp-banner>div>div>div>.banner-right-content>h2.text-web {
        font-size: 70px;
    }

    .comp-banner>div>div>div>.banner-right-content>h2.text-dev {
        font-size: 70px;
    }
}

@media (min-width: 500px) {
    .comp-banner>div>div>div>.banner-right-content>h2.text-web {
        font-size: 75px;
    }

    .comp-banner>div>div>div>.banner-right-content>h2.text-dev {
        font-size: 80px;
        bottom: 30px;
    }
}

@media (min-width: 300px) {
    .comp-banner>div>div>div>.banner-right-content>h2.text-web {
        font-size: 50px;
    }

    .comp-banner>div>div>div>.banner-right-content>h2.text-dev {
        font-size: 50px;
        bottom: 30px;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .comp-banner>div>div>div>.banner-right-content>img {
        margin-right: 0;
    }

    .comp-banner .inner span.title {
        font-size: 54px;
    }
}

@media (max-width: 575px) {
    .banner-one-main-wrapper .banner-right-content img {
        max-height: 415px;
    }
}

@media (max-width: 991px) {
    .comp-banner .inner {
        padding: 50px 0;
        text-align: center;
    }

    .comp-banner>div>div>div>.banner-right-content>img {
        margin: 0;
    }

    .comp-banner>div>div>div>.banner-right-content,
    .comp-banner>div>div>div:nth-child(2) {
        height: calc(100vh - 62px);
    }

    .comp-banner>div>div>div>.banner-right-content>h2.text-dev {
        text-align: center;
    }
}
.btn-reverse {
    background-color: var(--color-primary);
    font-family: var(--font-nunito);
    color: #fff;
    padding: 0 30px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease-in-out;
    border-radius: 500px;
    border: 0;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    text-transform: capitalize;
    cursor: pointer;
}

.btn-reverse:hover,
.btn-reverse:active,
.btn-reverse:focus {
    background-color: var(--color-primary-alt) !important;
}

.btn-reverse span {
    transition: all 0.4s ease-in-out;
}

.btn-reverse:hover span,
.btn-reverse:active span,
.btn-reverse:focus span {
    transform: translateX(100%);
}
.btn-round {
    background-color: transparent;
    color: #fff;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 16px;
    width: 42px;
    height: 42px;
    overflow: hidden;
    z-index: 0;
    transition: color 0.4s ease, border-color 0.4s ease;
}

.btn-round span {
    transition: all 0.6s ease-in-out;
}

.btn-round::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: var(--color-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: -1;
}

.btn-round:hover,
.btn-round:focus {
    color: var(--color-primary);
    border-color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-round:hover::after,
.btn-round:focus::after {
    width: 0;
    height: 0;
}
.comp-nav-contact_offcanvas .title {
    color: #fff;
    display: block;
    margin-bottom: 20px;
}

.comp-nav-contact_offcanvas .contact-area {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.comp-nav-contact_offcanvas .contact-area>i {
    height: 45px;
    width: 45px;
    background: transparent;
    display: flex;
    align-items: center;
    color: var(--color-heading);
    justify-content: center;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
}

.comp-nav-contact_offcanvas .contact-area>div {
    width: calc(100% - 60px);
}

.comp-nav-contact_offcanvas .contact-area>div>span {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-primary) !important;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 0;
    font-weight: 600;
}

.comp-nav-contact_offcanvas .contact-area>div>a {
    color: var(--color-heading);
}
/*===============================
  Scroll To Top
  ===============================*/
.scrollToTop {
    display: none;
    height: 55px;
    width: 55px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #0f0f0f;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    z-index: 999;
    transition: 0.5s ease all;
}

@media only screen and (max-width: 575px) {
    .scrollToTop {
        height: 40px;
        width: 40px;
    }
}

.scrollToTop.active-progress {
    display: block !important;
}

.scrollToTop:hover {
    transform: translateY(-15%);
}

.scrollToTop .arrowUp {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
}

.scrollToTop .arrowUp i {
    font-size: 19px;
}

.scrollToTop .water {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    background-color: var(--color-primary);
    transition: all 0.3s;
}

.scrollToTop .water svg use {
    margin-bottom: -1px;
    position: relative;
    bottom: -1px;
    fill: var(--color-primary) !important;
}

.scrollToTop .water_wave {
    width: 200%;
    position: absolute;
    bottom: 100%;
}

.scrollToTop .water_wave_back {
    right: 0;
    fill: var(--color-heading);
    animation: wave-back 1.4s infinite linear;
}

.scrollToTop .water_wave_front {
    left: 0;
    fill: rgba(122, 37, 158, 0.8784313725);
    margin-bottom: -1px;
    animation: wave-front 0.7s infinite linear;
}

@keyframes wave-front {
    100% {
        transform: translateX(-50%);
    }
}

@keyframes wave-back {
    100% {
        transform: translateX(50%);
    }
}
.year-of-expariance-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--color-gray-2);
    border-radius: 20px;
    padding: 36px 52px 51px 52px;
    height: 100%;
}

.year-of-expariance-wrapper.bg-blur-style-one::after,
.year-of-expariance-wrapper.bg-blur-style-two::after,
.year-of-expariance-wrapper.bg-blur-style-three::after {
    content: " ";
    position: absolute;
    right: -250px;
    bottom: -367px;
    min-width: 474px;
    min-height: 474px;
    border-radius: 100px;
    filter: blur(227px);
    z-index: -1;
}

.year-of-expariance-wrapper.bg-blur-style-one::after {
    background: var(--color-primary);
    content: " ";
    position: absolute;
    right: -250px;
    bottom: -367px;
    min-width: 474px;
    min-height: 474px;
    border-radius: 100px;
    filter: blur(227px);
    z-index: -1;
}

@media (min-width: 1400px) {
    .year-of-expariance-wrapper {
        padding: 36px 52px 51px 52px;
    }
}

@media only screen and (max-width: 767px) {
    .year-of-expariance-wrapper {
        padding: 30px 20px;
    }
}

.year-of-expariance-wrapper .year-expariance-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .year-of-expariance-wrapper .year-expariance-wrap {
        gap: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .year-of-expariance-wrapper .year-expariance-wrap {
        display: block;
    }
}

.year-of-expariance-wrapper .year-expariance-wrap .year-number {
    color: var(--color-primary);
    font-family: var(--font-nunito);
    font-size: 167px;
    line-height: 115%;
    font-weight: 700;
    margin-bottom: 0;
    flex-basis: 40%;
}

.year-of-expariance-wrapper .year-expariance-wrap .year-number sup {
    top: 10px !important;
}

@media (max-width: 1400px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-number {
        font-size: 90px;
        line-height: 90px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-number {
        font-size: 100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-number {
        font-size: 100px;
    }
}

@media only screen and (max-width: 767px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-number {
        font-size: 100px;
        line-height: 1;
    }
}

.year-of-expariance-wrapper .year-expariance-wrap .year-title {
    color: var(--color-heading);
    font-family: var(--font-nunito);
    font-size: 48.14px;
    font-weight: 700;
    line-height: 130%;
    text-transform: capitalize;
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-title {
        font-size: 37px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-title {
        font-size: 37px;
    }
}

@media only screen and (max-width: 767px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-title {
        font-size: 32px;
    }

    .year-of-expariance-wrapper .year-expariance-wrap .year-title br {
        display: none;
    }
}

@media only screen and (max-width: 575px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-title {
        font-size: 26px;
    }

    .year-of-expariance-wrapper .year-expariance-wrap .year-title br {
        display: none;
    }
}

@media (min-width: 1399px) {
    .year-of-expariance-wrapper .year-expariance-wrap .year-number sup {
        top: 40px !important;
    }
}

.year-of-expariance-wrapper .year-para {
    color: var(--color-heading);
    font-family: var(--font-nunito);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 12px;
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: opacity 0.5s ease;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#preloader.fade-out {
    opacity: 0;
}
.counter-card {
    padding: 25px 34px;
    border-radius: 20px;
    background: var(--color-gray-2);
    color: var(--color-gray);
    display: inline-block;
    user-select: none;
    overflow: hidden;
}

.counter-card .counter-title {
    color: var(--color-heading);
    text-align: center;
    font-family: var(--font-nunito);
    font-size: 48px;
    font-weight: 700;
    line-height: 60px;
    text-transform: capitalize;
    margin-bottom: 0;
}

.counter-card>span {
    font-size: 14px;
    line-height: 16px;
    display: block;
}

.tmponhover:hover::before {
    opacity: 0.5;
}

.tmponhover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(var(--color-primary), transparent, transparent);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.5s, top 0s, left 0s;
    border-radius: 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .counter-card .counter-title {
        font-size: 40px;
    }
}

.counter-card .counter-para {
    color: var(--color-gray);
    text-align: center;
    font-family: var(--font-nunito);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 4px;
}
/* Progress Area  */
.progress-charts {
    overflow: hidden;
}

.progress-charts+.progress-charts {
    margin-top: 15px;
}

.progress-charts h6.heading {
    margin-bottom: 15px;
    color: var(--color-heading);
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-nunito);
    letter-spacing: 1px;
}

.progress-charts h6.heading span.percent-label {
    color: var(--color-heading);
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.9;
    font-weight: 400;
    font-family: var(--font-nunito);
}

.progress-charts .progress {
    height: 13px;
    overflow: visible;
    font-size: 14px;
    border-radius: 10px;
    padding: 3px;
    background: var(--color-gray-2);
}

.progress-charts .progress .progress-bar {
    overflow: visible;
    position: relative;
    border-radius: 14px;
    background: var(--color-primary);
}

.progress-charts .progress .progress-bar span.percent-label {
    position: absolute;
    right: 0;
    top: -37px;
    font-weight: 400;
    color: var(--color-heading);
    font-size: 14px;
    text-transform: uppercase;
    opacity: 0.9;
    font-family: var(--font-nunito);
}
#comp-locale {
    width: 70px;
    font-size: 14px;
}

.locale-item {
    display: block;
    color: #fff;
    transition: ease-in-out 0.4s !important;
}

.locale-item strong {
    margin-right: 10px;
}

.locale-item strong::before {
    content: '[';
    margin-right: 5px;
}

.locale-item strong::after {
    content: ']';
    margin-left: 5px;
}

.locale-item.active,
.locale-item:focus strong,
.locale-item:hover strong {
    transition: ease-in-out 0.4s !important;
    color: var(--color-primary);
}

footer {
    background-color: #080808;
    color: #333333;
    border-top: 1px solid #181818;
}

footer>div.container {
    padding-top: 15px;
    padding-bottom: 15px;
}

footer>div.container p {
    margin: 0;
    font-size: 12px;
}

footer>div.container p a {
    color: #333333;
    text-decoration: none !important;
    transition: ease-in-out 0.4s;
}

footer>div.container p a:hover {
    text-decoration: none !important;
    color: var(--color-primary);
}

:root {
    --font-titillium-web: 'Titillium Web', 'Helvetica', sans-serif;
    --font-nunito: 'Nunito', 'Helvetica', sans-serif;
    --color-primary: #FF014F;
    --color-primary-alt: #ff014dd9;
    --color-primary-2nd: #FF494A;
    --color-primary-3rd: #FDC448;
    --color-primary-4th: #0071ff;
    --color-secondary: #060606;
    --color-white: #ffffff;
    --color-gray: #9F9F9F;
    --color-gray-2: #141414;
    --color-subtitle: #f9004d;
    --background-color-1: #0f0f0f;
    --background-color-2: #13131d;
    --background-color-3: #151521;
    --background-color-4: #242435;
    --background-color-5: #EDF5FF;
    --color-card: #1b1b1c;
    --gradient-box: linear-gradient(to right, #5237f9, #FF014F);
    --gradient-one: linear-gradient(to right bottom, #E42032, #1273EB);
    --gradient-two: linear-gradient(to right, #ED145B, #4A11EB);
    --gradient-three: linear-gradient(to right, #03041c, #0612b3);
    --text-gradient-one: linear-gradient(to right, #E42032, #4A11EB);
    --color-heading: #ffffff;
    --color-body: #9f9f9f;
    --color-dark: #1d1d1d;
    --color-text-1: #DEDEDE;
    --color-light-heading: #181c32;
    --color-light-body: #65676b;
    --color-border-white: #00000024;
    --color-midgray: #878787;
    --color-light: #E4E6EA;
    --color-lighter: #CED0D4;
    --color-lightest: #F0F2F5;
    --color-border: #ffffff14;
    --color-white: #ffffff;
    --color-white-75: rgba(255, 255, 255, 0.75);
    --color-success: #3EB75E;
    --color-danger: #FF0003;
    --color-warning: #FF8F3C;
    --color-info: #1BA2DB;
    --color-facebook: #3B5997;
    --color-twitter: #1BA1F2;
    --color-youtube: #ED4141;
    --color-linkedin: #0077B5;
    --color-pinterest: #E60022;
    --color-instagram: #C231A1;
    --color-vimeo: #00ADEF;
    --color-twitch: #6441A3;
    --color-discord: #7289da;
    --border-width: 2px;
    --radius: 4px;
    --transition: all 0.4s ease-in-out;
    --duration-announcement-bar: 250ms;
    --duration-medium: 300ms;
    --duration-long: 500ms;
    --duration-extra-long: 600ms;
    --duration-extra-longer: 750ms;
    --duration-extended: 3s;
    --animation-slide-in: slideIn var(--duration-extra-long) ease forwards;
    --animation-fade-in: fadeInUp var(--duration-extra-long) ease forwards;
    --animation-zoom-in: zoomIn var(--duration-extra-longer) ease forwards;
    --animation-zoom-out: zoomOut var(--duration-extra-longer) ease forwards;
}

html,
body {
    background-color: var(--background-color-1);
    color: #fff;
}

* {
    text-decoration: none !important;
    user-select: none;
    -moz-user-select: none;
}

.text-gray {
    color: var(--color-gray);
}

@media (prefers-reduced-motion: no-preference) {
    .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-fade-in {
        animation: var(--animation-fade-in);
        animation-delay: calc(var(--animation-order) * 75ms);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tmp-scroll-trigger:is(.tmp-zoom-in, .zoom_out, .tmp-fade-in, .slide_in) {
        opacity: 0.01;
    }
}


/* Animations */
@media (prefers-reduced-motion: no-preference) {

    .animate--ambient>img,
    .animate--ambient>svg {
        animation: animateAmbient 30s linear infinite;
    }

    @keyframes animateAmbient {
        0% {
            transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
        }

        100% {
            transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
        }
    }

    .tmp-scroll-trigger:is(.tmp-zoom-in, .zoom_out, .tmp-fade-in, .slide_in) {
        opacity: 0.01;
    }

    .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-zoom-in {
        animation: var(--animation-zoom-in);
        animation-delay: calc(var(--animation-order) * 75ms);
    }

    .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).zoom_out {
        animation: var(--animation-zoom-out);
        animation-delay: calc(var(--animation-order) * 75ms);
    }

    .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-fade-in {
        animation: var(--animation-fade-in);
        animation-delay: calc(var(--animation-order) * 75ms);
    }

    .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).slide_in {
        animation: var(--animation-slide-in);
        animation-delay: calc(var(--animation-order) * 75ms);
    }

    .tmp-scroll-trigger.tmp-scroll-trigger--design-mode.tmp-fade-in,
    .tmp-scroll-trigger.tmp-scroll-trigger--design-mode.slide_in,
    .tmp-scroll-trigger.tmp-scroll-trigger--design-mode .slider,
    .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-scroll-trigger--cancel {
        opacity: 1;
        animation: none;
        transition: none;
    }

    .tmp-scroll-trigger[animation-end] {
        opacity: 1;
        animation: none !important;
        transition: none;
    }

    /* .collection-tab__tab-content
      .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-zoom-in {
      animation-delay: calc(0.5s + var(--animation-order) * 75ms);
    } */
    .tmp-scroll-trigger.tmp-scroll-trigger--design-mode.slide_in {
        transform: translateY(0);
    }

    @keyframes slideIn {
        from {
            transform: translateY(1rem);
            opacity: 0.01;
        }

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

    @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale(1.05);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes zoomOut {
        from {
            opacity: 0;
            transform: scale(1);
        }

        to {
            opacity: 1;
            transform: scale(1.05);
        }
    }
}

@media screen and (max-width: 989px) {
    .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen) .slider--tablet {
        animation: var(--animation-slide-in);
    }
}

@media screen and (min-width: 990px) {
    .tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen) .slider--desktop {
        animation: var(--animation-slide-in);
    }
}

.tmp-scroll-trigger.tmp-scroll-trigger--design-mode.tmp-fade-in,
.tmp-scroll-trigger.tmp-scroll-trigger--design-mode.slide_in,
.tmp-scroll-trigger.tmp-scroll-trigger--design-mode .slider,
.tmp-scroll-trigger:not(.tmp-scroll-trigger--offscreen).tmp-scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
}

.tmp-scroll-trigger.tmp-scroll-trigger--design-mode.slide_in {
    transform: translateY(0);
}

@keyframes slideIn {
    from {
        transform: translateY(2rem);
        opacity: 0.01;
    }

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

@keyframes fadeIn {
    from {
        opacity: 0.01;
    }

    to {
        opacity: 1;
    }
}

.animation-order-0 {
    --animation-order: 0;
}

.animation-order-1 {
    --animation-order: 1;
}

.animation-order-2 {
    --animation-order: 2;
}

.animation-order-3 {
    --animation-order: 3;
}

.animation-order-4 {
    --animation-order: 4;
}

.animation-order-5 {
    --animation-order: 5;
}

.animation-order-6 {
    --animation-order: 6;
}

.animation-order-7 {
    --animation-order: 7;
}

.animation-order-8 {
    --animation-order: 8;
}

.animation-order-9 {
    --animation-order: 9;
}

.animation-order-10 {
    --animation-order: 10;
}

.animation-order-11 {
    --animation-order: 11;
}

.animation-order-12 {
    --animation-order: 12;
}

.animation-order-13 {
    --animation-order: 13;
}

.animation-order-14 {
    --animation-order: 14;
}

.animation-order-15 {
    --animation-order: 15;
}

.animation-order-16 {
    --animation-order: 16;
}

.animation-order-17 {
    --animation-order: 17;
}

.animation-order-18 {
    --animation-order: 18;
}

.animation-order-19 {
    --animation-order: 19;
}

.animation-order-20 {
    --animation-order: 20;
}

.animation-order-21 {
    --animation-order: 21;
}

.animation-order-22 {
    --animation-order: 22;
}

.animation-order-23 {
    --animation-order: 23;
}

.animation-order-24 {
    --animation-order: 24;
}

.animation-order-25 {
    --animation-order: 25;
}

.animation-order-26 {
    --animation-order: 26;
}

.animation-order-27 {
    --animation-order: 27;
}

.animation-order-28 {
    --animation-order: 28;
}

.animation-order-29 {
    --animation-order: 29;
}

.animation-order-30 {
    --animation-order: 30;
}

.animation-order-31 {
    --animation-order: 31;
}

.animation-order-32 {
    --animation-order: 32;
}

.animation-order-33 {
    --animation-order: 33;
}

.animation-order-34 {
    --animation-order: 34;
}

.animation-order-35 {
    --animation-order: 35;
}

.animation-order-36 {
    --animation-order: 36;
}

.animation-order-37 {
    --animation-order: 37;
}

.animation-order-38 {
    --animation-order: 38;
}

.animation-order-39 {
    --animation-order: 39;
}

.animation-order-40 {
    --animation-order: 40;
}

.animation-order-41 {
    --animation-order: 41;
}

.animation-order-42 {
    --animation-order: 42;
}

.animation-order-43 {
    --animation-order: 43;
}

.animation-order-44 {
    --animation-order: 44;
}

.animation-order-45 {
    --animation-order: 45;
}

.animation-order-46 {
    --animation-order: 46;
}

.animation-order-47 {
    --animation-order: 47;
}

.animation-order-48 {
    --animation-order: 48;
}

.animation-order-49 {
    --animation-order: 49;
}

.animation-order-50 {
    --animation-order: 50;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateIn-2 {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
    }
}


@-webkit-keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {

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

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInDown {

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

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {

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

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInLeft {

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

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {

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

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInRight {

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

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

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

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

    to {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {

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

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

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

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

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

@keyframes bounceInUp {

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

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

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

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

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

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}


/*===============================
Section Head
===============================*/
.section-head {
    text-align: center;
}

.section-head .section-sm {
    display: inline-flex;
    max-width: 80%;
}

@media only screen and (max-width: 575px) {
    .section-head .section-sm {
        max-width: 100%;
    }
}

@media (min-width: 1200px) {
    .section-head .section-sm {
        max-width: 50%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .section-head .section-sm {
        max-width: 70%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-head .section-sm {
        max-width: 90%;
    }
}

@media only screen and (max-width: 767px) {
    .section-head .section-sm {
        max-width: 80%;
    }
}

@media only screen and (max-width: 575px) {
    .section-head .section-sm {
        max-width: 100%;
    }
}

.section-head.pb-40 {
    padding-bottom: 40px;
}

.section-head.pb-0 {
    padding-bottom: 0;
}

.section-head.text-align-left {
    text-align: left;
}

.section-head.section-head-one-side {
    padding-bottom: 22px;
}

.section-head .section-sub-title {
    font-size: 16px;
    font-weight: var(--s-bold);
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 5px;
    font-family: var(--font-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.section-head .section-sub-title.color-white {
    color: var(--color-heading);
}

.section-head .section-sub-title img {
    margin-right: 8px;
}

.section-head .section-sub-title span.subtitle {
    font-family: var(--font-secondary);
}

.section-head .title {
    color: var(--color-heading);
    font-family: var(--font-primary);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-head .title {
        font-size: 42px;
    }
}

@media only screen and (max-width: 767px) {
    .section-head .title {
        font-size: 32px;
    }

    .section-head .title br {
        display: none;
    }
}

@media only screen and (max-width: 575px) {
    .section-head .title {
        font-size: 28px;
        line-height: 1.4;
    }

    .section-head .title br {
        display: none;
    }
}

@media only screen and (max-width: 479px) {
    .section-head .title {
        font-size: 22px;
    }
}

.section-head .title.color-white {
    color: var(--color-heading);
}

.section-head .description {
    margin-top: 10px;
    color: var(--color-gray);
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

@media only screen and (max-width: 767px) {
    .section-head .description br {
        display: none;
    }
}