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

@font-face {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NeueMetanaNext-SemiBold.ttf") format("woff"), url("../fonts/NeueMetanaNext-SemiBold.ttf") format("woff")
}

@font-face {
    font-family: 'Neue Metana Next Outline Free';
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NeueMetanaNextOutline-Black.ttf") format("woff"), url("../fonts/NeueMetanaNextOutline-Black.ttf") format("woff")
}

@font-face {
    font-family: 'Montserrat';
    src: url("https://beflex.ge/fonts/Montserrat-Light.ttf") format("woff"), url("https://beflex.ge/fonts/montserrat/Montserrat-Light.ttf") format("woff")
}

@font-face {
    font-family: BPG_LE;
    font-style: normal;
    src: url("https://beflex.ge/fonts/bpg_le_studio_02_caps.ttf") format("woff"), url("https://beflex.ge/fonts/bpg_le_studio_02_caps.ttf") format("woff")
}

@font-face {
    font-family: anbaninoto;
    src: url("https://beflex.ge/fonts/AnbaniNotoSans-Regular.ttf") format("woff");
}

.result_info {
    font-family: 'Neue Metana Next Free Personal';
    text-align: right;
    margin-top: 10px;
}

/*@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NeueMetanaNextOutline-Black.otf") format("otf"), url("../fonts/NeueMetanaNextOutline-Black.otf") format("otf")
}*/
body {
    margin: 0;
    background-color: #0F0F0F;
    background-image: url('../img/letters-bg.png');
}

[data-aos^=fade][data-aos^=fade].aos-animate {
    z-index: 10;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0F0F0F;
}

::-webkit-scrollbar-thumb {
    background: #484848;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.inner-header {
    padding-top: 40px;
}

.header .logo {
    display: flex;
    justify-content: center;
    height: 200px;
    position: relative;
    z-index: 1000;
}

.logo img {
    width: 270px;
}

.menu .navbar-list {
    display: flex;
    align-items: center;
}

.navbar .nav-link {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 30px;
    text-transform: uppercase;
    color: #484848;
    transition: all .3s;
}


.field:hover .nav-link {
    color: #fff;
}

.navbar .nav-link.active {
    color: #FFFFFF;
}

.container {
    max-width: 1586px;
    margin: auto;
    padding: 0 30px;
}

.inner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.main-project {
    max-width: 950px;
}

.single-project,
.set-single-project {
    max-width: 1100px;
}

.single-project img,
.set-single-project img {
    width: 100%;
}

.main-project img {
    width: 100%;
}

.main .about-us {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 11;
    padding-bottom: 50px;
}

.main .about-us .about-us-text {
    margin-right: 80px;
}

.main .about-us .about-us-text h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 150.9%;
    text-transform: capitalize;
    color: #FFFFFF;
}

.main .team {
    display: flex;
    align-items: center;
}

/* .view-all {
    border-radius: 48.5px;
}

.with-linear-gradient {
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    border-image: linear-gradient(45deg, rgba(148, 59, 225, 1), rgba(148, 59, 225, 0.09)) 1;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
} */
.gradient-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    /* padding: 30% 2em; */
    /* box-sizing: border-box; */
    color: #FFF;
    background: #000;
    background-clip: padding-box;
    /* !importanté */
    border: solid 2px transparent;
    /* !importanté */
    border-radius: 48.5px;
    padding: 18px 15px 35px 15px;
    text-align: center;
    margin-top: 40px;
}

.gradient-box:hover p {
    transform: scale(1.1);
}

.gradient-box:hover img {
    transform: scale(1.1);
}

.gradient-box img {
    transition: all .5s;
}

.gradient-box p {
    margin-top: 15px;
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 7px;
    line-height: 8px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    transition: all .5s;
}

.gradient-box p span {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}

.gradient-box:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -3px;
    /* !importanté */
    border-radius: inherit;
    /* !importanté */
    background: linear-gradient(to bottom, rgba(148, 59, 225, 1), rgba(148, 59, 225, 0.09));
}

.main::before {
    animation: grain 8s steps(10) infinite;
    content: '';
    /* height: 300%; */
    /* left: -50%; */
    opacity: 1;
    position: fixed;
    /* top: -100%;
    width: 300%; */
}

@keyframes grain {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -10%);
    }

    20% {
        transform: translate(-15%, 5%);
    }

    30% {
        transform: translate(7%, -25%);
    }

    40% {
        transform: translate(-5%, 25%);
    }

    50% {
        transform: translate(-15%, 10%);
    }

    60% {
        transform: translate(15%, 0%);
    }

    70% {
        transform: translate(0%, 15%);
    }

    80% {
        transform: translate(3%, 35%);
    }

    90% {
        transform: translate(-10%, 10%);
    }
}

a {
    text-decoration: none;
    outline: none;
}

a:hover,
a:focus {
    outline: none;
}

.header .logo {
    max-width: 100%;
}

.navbar-list {
    display: flex;
}

.menu {
    /* -webkit-touch-callout: none; */
    /* -webkit-user-select: none; */
    /* -moz-user-select: none;
    -ms-user-select: none; */
    --marquee-width: 99vw;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
    --item-font-size: 10vw;
    counter-reset: menu;
    margin-bottom: 120px;
}

/* .menu__item {
    cursor: default;
    position: relative;
    margin-bottom: 18px;
    transition: all .5s;
    background: transparent;
}

.menu__item:hover {
    background-color: #4A1E71;
}

.menu__item:hover .marquee__inner {
    animation-play-state: paused;
}

.menu__item-link::before {
    all: initial;
    left: 0;
}

*/

/* Make sure 3 items are visible in the viewport by setting suitable font size. */

/* .marquee {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--marquee-width);
    overflow: hidden;
    background: transparent;
    border: none;
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 20s linear infinite;
    animation-play-state: paused;
    opacity: 1;
    transition: opacity 0.1s;
}

.marquee .marquee__inner {
    animation-play-state: running;
    opacity: 1;
    transition-duration: 0.4s;
}

.marquee span {
    font-family: 'Neue Metana Next Outline Free';
    font-style: normal;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 35px;
    transition: all .5s;
}


.marquee span.bold {
    font-style: normal;
    font-family: 'Neue Metana Next Free Personal';
    font-weight: 600;
    font-size: 56px;
    line-height: 60px;
    text-align: center;
    color: #484848;
    transition: all .5s;
    padding-top: 20px;
    transition: all .5s;
}

.menu__item:hover .marquee span.bold {
    color: #fff;
}

.menu__item-link {
    visibility: hidden;
}

.menu__item-link,
.marquee span {
    white-space: nowrap;
    font-size: 56px;
    line-height: 85px;
    padding-top: 8px;
    text-transform: uppercase;
}


@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
} */

.Marquee {
    /* display: flex;
    flex-direction: column;
    align-items: center; */
}

.marque-box {
    position: relative;
    /* margin-top: 50px; */
}

.marque-box .menu__item-img {
    opacity: 0;
    top: -395px;
    max-width: 500px;
    filter: drop-shadow(0px 15px 18px rgba(0, 0, 0, 0.65));
    position: absolute;
    /* top: 0; */
    bottom: 0;
    margin: auto 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.marque-box:hover .menu__item-img {
    opacity: 1;
    z-index: 12;
}

.marquee_text,
.marquee_text-2,
.marquee_text-3,
.marquee_text-4 {
    font-family: 'Neue Metana Next Outline Free';
    font-style: normal;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    transition: all .5s;
    /* position: absolute;
    top: 53%; */
    height: 90px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* transform: translateY(-50%); */
    white-space: nowrap;
    font-size: 56px;
    line-height: 1.4;
    padding-top: 14px;
    text-transform: uppercase;
}

.marquee_text:hover,
.marquee_text-2:hover,
.marquee_text-3:hover,
.marquee_text-4:hover {
    background-color: #4A1E71;
}

.marquee_text:hover span.bold,
.marquee_text-2:hover span.bold,
.marquee_text-3:hover span.bold,
.marquee_text-4:hover span.bold {
    color: #fff;
}

.marquee_text span.bold,
.marquee_text-2 span.bold,
.marquee_text-3 span.bold,
.marquee_text-4 span.bold {
    font-style: normal;
    font-family: 'Neue Metana Next Free Personal';
    font-weight: 600;
    font-size: 56px;
    line-height: 60px;
    text-align: center;
    color: #484848;
    transition: all .5s;
    padding-top: 20px;
    transition: all .5s;
}

.projects-section {
    display: flex;
    align-items: center;
}

.project-desc-content {
    display: flex;
    align-items: center;
}

.single-project-section {
    display: flex;
    align-items: flex-start;
    margin-bottom: 90px;
    margin-top: 50px;
    position: relative;
    transition: all .5s;
}

.project-desc-side-title {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 15px;
    margin-left: 35px;
    transition: all .5s;
}

.project-desc-side-title:hover {
    margin-left: 0;
}

.project-desc-side-title img {
    margin-right: 7px;
    margin-top: -4px;
}

.project-desc-side-title h4 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    color: #FFFFFF;
}

.project-desc-side,
.project-desc-side2 {
    margin-left: 25px;
    max-width: 400px;
}

.project-desc {
    width: 396px;
}

.single-project-desc,
.project-desc {
    display: flex;
    flex-direction: column;
    background: #2C2C2C;
    border-radius: 8px;
    padding: 45px 60px 17px 60px;
    margin-left: 20px;
    margin-right: 40px;
}

.project-desc-side .single-project-desc,
.project-desc-side2 .single-project-desc {
    margin-left: 0;
    margin-right: 0;
}

.single-project-desc .project-desc-title,
.project-desc .project-desc-title {
    margin-bottom: 40px;
}

.single-project-desc .project-desc-title h3,
.project-desc .project-desc-title h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 33px;
    line-height: 134.9%;
    text-transform: uppercase;
    color: #FFFFFF;
    max-width: 270px;
}

.project-desc-categories .project-desc-categories-title {
    margin-bottom: 3px;
}

.project-desc-categories .project-desc-categories-title h4 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 17px;
    text-transform: uppercase;
    color: #766054;
}

.project-desc-categories .project-title h5 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-transform: capitalize;
    color: #828080;
    max-width: 230px;
}

.project-desc-categories {
    margin-bottom: 30px;
}

.project-details {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    border-left: 1px solid rgba(255, 255, 255, 0.24);
    border-top-left-radius: 30px;
    padding: 25px 20px;
    margin-top: 30px;
    transition: all .5s;
}

.project-details:hover .project-details-text,
.project-details:hover svg {
    margin-left: 10px;
}

.project-details svg {
    transition: all .5s;
}

.project-details .project-details-text {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 17px;
    text-transform: capitalize;
    color: #FFFFFF;
    margin-bottom: 10px;
    transition: all .7s;
}

.product-info-table {
    margin-top: 20px;
}

.product-info {
    margin-bottom: 40px;
}

.product-info .product-info-title {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 134.9%;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.product-info .product-info-desc {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
    text-transform: capitalize;
    color: #828080;
}

.categories {
    position: relative;
    display: flex;
    flex-direction: column;
}

.categories .categories-title h2 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 134.9%;
    text-transform: uppercase;
    color: #FFFFFF;
}

.categories .categories-title {
    position: relative;
}

.categories .categories-title h2::after {
    content: url('../img/svg/circle-shape.svg');
    position: absolute;
    right: -5%;
}

.categories .categories-lists .categories-list {
    margin-bottom: 20px;
    transition: all .5s;
    width: 250px;
}

.categories .categories-lists .categories-list .categories-link {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    line-height: 134.9%;
    text-transform: uppercase;
    color: #828282;
    transition: all 1s;
    cursor: default;
}

.categories .categories-lists .categories-list .categories-link:hover {
    /* font-size: 25px; */
    color: #FFFFFF;
}

.pagination {
    display: flex;
    margin-top: 10px !important;
}

.pagination li a {
    font-family: 'Neue Metana Next Outline Free';
    font-style: normal;
    font-weight: 900;
    font-size: 52.5462px;
    line-height: 56px;
    color: rgba(255, 255, 255, 0.7);
}

.pagination li a.active,
.pagination span {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 50px;
    line-height: 54px;
    color: #FFFFFF;
}


.pagination span {
    margin-right: 7px;
}


.other-projects {
    margin-top: 40px;
    margin-bottom: 90px;
}

.other-projects-top-menu {
    display: none;
    overflow-x: scroll;
    margin-bottom: 45px;
}

.other-projects-top-menu .projects-top-menu-link {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 178.9%;
    text-transform: uppercase;
    color: #828282;
    margin-right: 20px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
}

.other-projects-top-menu .projects-top-menu-link.active {
    color: #fff;
}

.other-projects-top-menu .projects-top-menu-link span {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 8px;
    line-height: 9px;
    letter-spacing: 1.16em;
    text-transform: uppercase;
    color: #FFFFFF;
    display: none;
}

.other-projects-top-menu .projects-top-menu-link.active span {
    display: block;
}

.other-projects-title {
    margin-bottom: 15px;
}

.other-projects-title h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 23px;
    line-height: 25px;
    text-transform: capitalize;
    color: #FFFFFF;
}

.other-projects-images {
    display: flex;
}

.other-projects .other-projects-img {
    margin-right: 15px;
    color: #000000b3;
}

.arrows {
    position: absolute;
    right: 16%;
    bottom: -15%;
    /* display: flex;
    justify-content: flex-end; */
}

.arrows svg {
    margin-right: 7px;
    transition: all .5s;
}

.arrows svg:hover {
    fill: #fff;
}

.arrows .prev-arrow {
    position: absolute;
    right: 25px;
    top: -15px;
}

.team-section {
    margin-bottom: 150px;
}

.team,
.team-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.team-section .team-left {
    max-width: 626px;
}

.team-section .team-left-side-title h2 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 150.9%;
    text-transform: capitalize;
    color: #FFFFFF;
    margin-bottom: 45px;
    margin-top: 20px;
    white-space: nowrap;
}

.team-section .team-left-side-desc p {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 238.5%;
    text-transform: capitalize;
    color: #828282;
    margin-bottom: 20px;
}

.team-section .team-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 110px;
}

.team-section .team-gallery .skill:nth-child(4),
.team-section .team-gallery .skill:nth-child(8) {
    margin-right: 0;
}

.team-section .team-gallery .skill {
    margin-right: 50px;
    margin-bottom: 170px;
}

.team-gallery .skill {
    margin-right: 0;
}

.skill svg {
    width: 175px;
    height: 175px;
}

.team-section .team-gallery:not(:last-child) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-member-position h5 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-top: 15px;
}

.team-member-name h4 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 150.9%;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
    max-width: 170px;
    margin: 15px auto;
    transition: all .5s;
}

.team-section .empty-team-text h3 {
    font-family: 'Neue Metana Next Outline Free';
    font-style: normal;
    font-weight: 900;
    font-size: 31px;
    line-height: 122.4%;
    text-align: center;
    text-transform: uppercase;
    color: #707070;
    max-width: 180px;
    margin-top: 15px;
}

.single-team-member-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 150px;
    margin-top: 100px;

}

.team-member-desc {
    display: flex;
    justify-content: center;
}

.single-team-member-desc {
    max-width: 650px;
    margin-left: 40px;
}

.single-team-member-desc-title {
    margin-top: 25px;
}

.single-team-member-desc-title h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 167.9%;
    text-transform: capitalize;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.single-team-member-desc-text p,
.single-team-member-desc-text a {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 265%;
    text-transform: capitalize;
    color: #828282;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
}
.single-team-member-desc-text a {
    color: #fff;
    transition: all .5s;
}
.single-team-member-desc-text a:hover {
    color: #943BE1;
}
.single-team-member-desc p span {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    line-height: 180%;
    text-transform: uppercase;
    color: #fff;
}

.single-team-member-desc p a {
    color: #943BE1;
    display: contents;
}


.other-team-members {
    display: flex;
    flex-wrap: wrap;
    max-width: 860px;
    margin: 80px auto;
}

.other-team-members-column {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.other-team-members .skill {
    margin-bottom: 140px;
    margin-right: 55px;
}

.other-team-members .team-gallery {
    margin-bottom: 40px;
}

.view-all-team-members {
    display: flex;
    justify-content: center;
    margin-top: 25px !important;
    border: 1px solid #7D7D86;
    border-radius: 30px;
    padding: 25px 0px;
    width: 375px;
    margin: auto;
    cursor: pointer;
}

.view-all-team-members:hover a {
    transform: translateY(-5px);
}

.view-all-team-members a {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 17px;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
    transition: all .5s;
    padding-top: 5px;
}


.team-img {
    /* position: relative;
    max-width: 135px;
    margin: auto; */
    display: flex;
    justify-content: center;
}

.team-img img {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    object-fit: cover;
}

.team-box:not(:first-child) {
    padding-left: 50px;
}

.team-desc {
    margin-top: 15px;
}

.team-desc p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    white-space: nowrap;
    transition: all .5s;
    padding-top: 10px;
}


















.promo-carousel {
    padding-bottom: 0;
    overflow: hidden;
}

.promo-carousel .item-wrap {
    transform: translateX(0px);
    width: 400%;
    position: relative;
    white-space: nowrap;
    display: flex;
}

.item {
    /* background: ; */
    text-align: center;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.item a {
    text-decoration: none;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Neue Metana Next Outline Free';
    font-style: normal;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 35px;
    transition: all .5s;
    height: 100%;
    padding: 10px 0;
    font-size: 56px;
    text-transform: uppercase;
}

.item.active {
    /* background: #1280b3; */
}

.item.active a {
    font-style: normal;
    font-family: 'Neue Metana Next Free Personal';
    font-weight: 600;
    font-size: 56px;
    line-height: 60px;
    text-align: center;
    color: #484848;
    transition: all .5s;
    padding-top: 12px;
    transition: all .5s;
}

/* services */
.services-box {
    display: flex;
    justify-content: center;
    max-width: 1100px;
    margin: auto;
}

.services-box-code {
    background: url('../img/svg/services-bg-1.svg');
    background-repeat: no-repeat;
    height: 840px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 410px;
}

.services-box-design {
    /* background: url('../img/svg/services-bg-2.svg'); */
    background-repeat: no-repeat;
    height: 840px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 500px;
    position: relative;
}

.bg-image {
    position: absolute;
    z-index: 1;
    max-width: 566px;
}

.bg-image svg {
    width: 100%;
    height: 771px;
}

.services-box-title,
.services-box-content {
    z-index: 2;
}

.services-box-title h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 150.9%;
    text-transform: capitalize;
    color: #FFFFFF;
    margin-bottom: 50px;
}

.services-box-content h4 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 45px;
    text-transform: uppercase;
    color: #656565;
    transition: all .3s;
    cursor: pointer;
    margin-bottom: 50px;
    cursor: default;
}

.services-box-content h4:hover {
    cursor: default;
}

.contact-box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 190px;
    margin-top: 100px;
}

/* prices */
.prices {
    background-image: url('../img/svg/prices-bg.svg');
    margin-top: -53px;
    min-height: 1327px;
    background-position: top;
    background-repeat: no-repeat;
}

.prices .section-title {
    padding-top: 60px;
}

.prices .section-bottom-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

.prices .section-bottom-title h1,
.prices .section-bottom-title span {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 43px;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
}

.prices .section-bottom-title span {
    text-transform: uppercase;
    color: #B25BFE;
    margin-top: 20px;
}

.prices .section-title h1 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    line-height: 150.9%;
    text-align: center;
    text-transform: capitalize;
    color: #FFFFFF;
    max-width: 1044px;
    margin: auto;
}

.price-boxes {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.price-boxes .box {
    /* background-color: #fff; */
    width: 487px;
    height: 653px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* border-radius: 53px; */
    background-image: url('../img/prices-bg.png');
    background-repeat: no-repeat;
}

.price-boxes .box .box-title {
    margin: 35px 35px 0 35px;
}

.price-boxes .box .box-title h2 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 38px;
    line-height: 41px;
    text-align: center;
    text-transform: uppercase;
    color: #0F0F0F;
}

.price-boxes .box .box-title.sm h2 {
    font-size: 24px;
    line-height: 150%;
    text-align: center;
    text-transform: capitalize;
}

.price-boxes .monthly-price {
    /* margin-top: 10px;
    margin-bottom: 12px; */
}

.price-boxes h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 23px;
    line-height: 162.9%;
    text-align: center;
    text-transform: capitalize;
    color: #0F0F0F;
    display: grid;
}

.price-boxes h3 span {
    font-size: 46px;
    color: #943BE1;
    line-height: 49px;
}

.price-boxes .dots {
    margin-top: 10px;
    margin-bottom: 20px;
    max-width: 100%;
}

.price-boxes .dots img {
    width: 100%;
}

.price-boxes .pages-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-boxes .pages-list li {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
    line-height: 27px;
    text-align: center;
    text-transform: uppercase;
    color: #656565;
    margin-bottom: 28px;
}

.price-boxes .pages-list li:last-child {
    margin-bottom: 25px;
}

.price-boxes .pages-list li:hover {
    transform: scale(1.05);
    transition: all .5s ease-in-out;
}

.price-boxes .pages-list li::after {
    content: url('../img/svg/+.svg');
    margin-left: 5px;
    transition: all .5s ease-in-out;
}


.price-boxes .pages-list.without-plus li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.price-boxes .pages-list.without-plus li::after {
    content: none;
}

.price-boxes .pages-list.without-plus .list-item {
    display: flex;
    align-items: center;
}

.price-boxes .pages-list.without-plus .list-item h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 19px;
    line-height: 21px;
    text-align: center;
    text-transform: capitalize;
    color: #B3B3B3;
}

.price-boxes .pages-list.without-plus .list-item h4 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 19px;
    line-height: 21px;
    text-align: center;
    text-transform: uppercase;
    color: #943BE1;
}

.price-boxes .pages-list.without-plus li span {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 17px;
    text-transform: uppercase;
    color: #48E0BC;
    margin-bottom: 8px;
}

.price-boxes .admin-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(225, 84, 194, 0.7);
    border-radius: 20px;
    padding: 11px 15px;
    max-width: max-content;
    margin: -3px auto 15px auto;
    transition: all .5s;
}

.price-boxes .admin-demo:hover {
    background-color: rgba(225, 84, 194, 0.7);
}

.price-boxes .admin-demo:hover span {
    color: #fff;
}

.price-boxes .admin-demo svg {
    margin-right: 5px;
    fill: #E154C2;
    transition: all .5s;
}

.price-boxes .admin-demo:hover svg {
    fill: #fff;
}

.price-boxes .admin-demo span {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
    line-height: 27px;
    text-align: center;
    text-transform: uppercase;
    color: #E154C2;
    margin-top: 7px;
    transition: all .5s;
}

.price-boxes .order-now-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #943BE1;
    border-radius: 20px;
    margin: 20px auto;
    width: 85%;
    border: none;
    padding: 20px;
    transition: all .5s;
    cursor: pointer;
}

.price-boxes .order-now-btn:hover {
    background: #B25BFE;
}

.price-boxes .order-now-btn img {
    margin-right: 10px;
}

.price-boxes .order-now-btn span {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-top: 5px;
}

/* contact */
.contact-form {
    width: 440px;
}

.contact-left-image {
    max-width: 650px;
}

.contact-left-title h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 180%;
    text-transform: capitalize;
    color: #FFFFFF;
}

.contact-form-title h3 {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 150.9%;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 35px;
}

.contact-form-title h3 span {
    font-family: 'Neue Metana Next Outline Free';
    font-weight: 900;
    font-size: 47.3333px;
}

.contact-left {
    margin-right: 50px;
}

.contact-left-image img {
    width: 100%;
}

.screen-header-right {
    display: flex;
}

#message {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 8px;
    resize: vertical;
    height: 210px;
    outline: none;
    border-radius: 0;
    background: #303030;
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 19px;
    line-height: 21px;
    color: #fff;
    resize: none;
}

#message::-webkit-scrollbar {
    width: 10px;
}

/* Track */
#message::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
#message::-webkit-scrollbar-thumb {
    background: #565656;
}

.send-btn button {
    padding: 25px 30px;
}

.send-link {
    display: inline-block;
    padding: 25px 30px;
    background: #562E79;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.43);
    position: absolute;
    left: 88%;
    top: 29%;
    transition: all .5s;
    outline: none;
    border: none;
}

.send-link p {
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-style: normal;
    font-weight: 700;
    font-size: 23px;
    line-height: 90.6%;
    text-transform: uppercase;
    transition: all .5s;
}

.send-link:hover {
    background-color: #fff;
}

.send-link:hover p {
    color: #562E79;
}

.screen-body {
    display: flex;
}

.screen-body-item {
    flex: 1;
}

.screen-body-item.left {
    display: flex;
    flex-direction: column;
}


.app-contact {
    margin-top: auto;
    font-size: 8px;
    color: #888;
}

.app-form-group {
    margin-bottom: 45px;
}

.app-form-group.message {
    margin-top: 40px;
    margin-bottom: 0;
    position: relative;
}

.app-form-group.buttons {
    margin-bottom: 0;
    text-align: right;
}

.app-form-control {
    width: 100%;
    padding: 10px 0 5px 0;
    background: none;
    border: none;
    border-bottom: 1px solid #565656;
    font-size: 14px;
    outline: none;
    transition: border-color .5s;
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 19px;
    line-height: 21px;
    color: #fff;
}

.app-form-control::placeholder,
.app-form .message label {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 19px;
    line-height: 21px;
    text-transform: uppercase;
    color: #656565;
}

.app-form-control:focus .app-form-control::placeholder {
    border-bottom-color: #ddd;
    color: #fff;
}

.app-form-control:focus::placeholder {
    visibility: hidden;
}

#message:focus label {
    color: #fff;
}










.has-tooltip.active+.tooltip,
.has-tooltip:hover+.tooltip,
.has-tooltip:focus+.tooltip,
.has-tooltip.hover+.tooltip {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1) rotate(0deg);
    /* pointer-events: inherit; */
}

.tooltip {
    display: block;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.75) rotate(5deg);
    transform-origin: bottom center;
    text-align: right;
    color: white;
    transition: 0.5s ease-in-out;
    opacity: 0;
    width: 100%;
    max-width: 100vw;
    /* pointer-events: none; */
    z-index: 5;
}

.text-on-top {
    font-family: anbaninoto;
}

.tooltip.projects {
    position: relative;
    width: 100%;
}

.tooltip.projects .text-on-top,
.tooltip.projects .text-on-hover {
    transition: opacity 1s ease-in-out;
}

.tooltip.projects .text-on-hover {
    position: absolute;
    top: 5px;
    left: 0;
    opacity: 0;
    font-family: BPG_LE;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    text-align: right;
    width: 100%;
}

@keyframes hoverme {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hoverme2 {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.field:hover .tooltip.projects .text-on-hover {
    animation: hoverme 3s infinite;
}

.field:hover .tooltip.projects .text-on-top {
    animation: hoverme2 3s infinite;
}

.field.active .tooltip.projects .text-on-hover {
    animation: hoverme 3s infinite;
}

.field.active .tooltip.projects .text-on-top {
    animation: hoverme2 3s infinite;
}

.tooltip:hover {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1) rotate(0deg);
}

.tooltip img {
    max-width: 100%;
}

.tooltip:after,
.tooltip-hover::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
}

.field {
    position: relative;
    padding-top: 20px;
    margin-right: 60px;
}

.field.contact {
    margin-right: 0;
}

.second-menu {
    display: none;
}

.horizontal-menu {
    padding: 20px 30px;
    background: #282828;
    width: 100%;
}


.vertical-align-middle {
    display: flex;
    vertical-align: middle;
    overflow-x: scroll;
}

.vertical-align-middle .nav-link {
    margin-top: 8px;
}

.vertical-align-middle .nav-link .nav-item {
    font-family: 'Neue Metana Next Free Personal';
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 30px;
    text-transform: uppercase;
    color: #484848;
    /* margin-top: 12px; */
    white-space: nowrap;
    transition: all .3s;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
}

.vertical-align-middle .nav-link .nav-item:hover {
    color: #fff;
}

.vertical-align-middle .nav-link .nav-item.active {
    color: #FFFFFF;
}

.vertical-align-middle .nav-link:not(:last-child) {
    margin-right: 20px;
}

.scroll::-webkit-scrollbar,
.vertical-align-middle::-webkit-scrollbar,
.other-projects-top-menu::-webkit-scrollbar {
    display: none;
}


/* swiper */



.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.25);
    transition: all .5s;
}

.swiper-slide img:hover,
.swiper-slide.swiper-slide-thumb-active img,
.main-project img {
    filter: none;
}

.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper2 {
    height: 80%;
    width: 100%;
}

.mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.mySwiper .swiper-slide {
    width: 18% !important;
    height: 100%;
}

.swiper-thumbs {
    margin-top: 25px !important;
    margin-bottom: 60px;
}

.other-projects-title {
    margin-top: 45px;
}

.swiper-button-next,
.swiper-button-prev {
    top: 95% !important;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    right: 0 !important;
    left: auto !important;
}

.swiper-button-next {
    right: 35px !important;
}

.swiper-button-prev {
    right: 60px !important;
    top: 92% !important
}

.swiper-button-prev:after {
    content: none !important;
}

.swiper-button-next:after {
    content: none !important;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 1 !important;
}

.swiper-button-next svg,
.swiper-button-prev svg {
    transition: all .5s;
}

.swiper-button-next svg:hover,
.swiper-button-prev svg:hover {
    fill: #fff;
    transition: all .5s;
}

/* circle animation */
.skill {
    width: 160px;
    height: 160px;
    position: relative;
    margin-right: 25px;
}

.outer {
    height: 160px;
    width: 160px;
    border-radius: 50%;
    border: none;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

.inner {
    height: 120px;
    width: 120px;
    border-radius: 50%;
    border: none;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

circle {
    fill: none;
}

.skill:hover circle {
    stroke: url(#GradientColor);
    stroke-width: 2px;
    border-radius: 17px;
    stroke-dasharray: 420;
    stroke-dashoffset: -420;
    animation: anim 2s linear forwards;
}

.skill:hover .team-desc p,
.skill:hover .team-member-name h4 {
    margin-top: 25px;
    color: #943BE1;
}

.skill svg {
    position: absolute;
    top: -6%;
    left: -6%;
}

@keyframes anim {
    0% {
        stroke-dashoffset: -420;
    }

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


.mini-gallery {
    display: none;
}

@media (max-width: 1586px) {

    .team-section .team-gallery .skill:nth-child(4),
    .team-section .team-gallery .skill:nth-child(8) {
        margin-right: 60px;
    }
}

@media (max-width: 1580px) {
    .skill.fourth {
        display: none;
    }

    .price-boxes {
        flex-wrap: wrap;
        column-gap: 40px;
        justify-content: center;
    }

    .price-boxes .box {
        margin-bottom: 40px;
    }

}

@media (max-width: 1279px) {
    .main .about-us .about-us-text h3 {
        font-size: 35px;
    }

    .main .about-us .about-us-text {
        margin-right: 29px;
    }

    .team-box.fourth {
        display: none;
    }

    .field {
        margin-right: 25px;
    }

    .projects-section {
        flex-direction: column;
    }

    .main-project {
        margin-bottom: 40px;
    }

    .swiper-slide {
        flex-direction: column;
    }

    .team .skill.third {
        display: none;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 98% !important;
    }

    .swiper-button-next {
        right: 242px !important;
    }

    .swiper-button-prev {
        right: 268px !important;
        top: 97% !important;
    }
}

@media (max-width: 1124px) {
    .inner-header {
        display: none;
    }

    .second-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 40px;
    }

    .second-menu .logo {
        margin-bottom: 30px;
    }

    .contact-box {
        margin-top: 40px;
    }

    .vertical-align-middle {
        justify-content: center;
    }

    .single-team-member-box {
        margin-top: 50px;
    }

    .team-section {
        margin-top: 50px;
    }

    .services-box {
        margin-top: 20px;
    }

    .projects-section {
        margin-top: 50px;
    }

    .swiper {
        margin-top: 50px;
    }

    .prices .section-title h1 {
        margin: 50px;
    }
}

@media (max-width: 991px) {
    .main .about-us .about-us-text h3 {
        display: none;
    }

    .contact-box {
        flex-direction: column;
        align-items: center;
    }

    .contact-left {
        margin-right: 0;
    }

    .contact-form {
        margin-top: 40px;
    }

    .team-left-side-desc {
        display: none;
    }

    .team-section {
        flex-direction: column;
    }

    .team-section .team-right {
        justify-content: flex-start;
    }

    .team-section .team-left-side-title h2 {
        font-size: 42px;
    }

    .team-section .team-gallery {
        margin: 0 auto 30px auto;
        align-items: center;
    }

    .team-section .team-gallery .skill:nth-child(4),
    .team-section .team-gallery .skill:nth-child(8) {
        margin-right: 0;
    }
}

.team-2 {
    display: none;
    overflow-x: scroll;
}

@media (max-width: 767px) {
    .price-boxes h3 span {
        font-size: 35px;
    }

    .prices .section-bottom-title {
        margin: 80px 50px;
    }

    .prices .section-title h1 {
        font-size: 28px;
    }

    .price-boxes .order-now-btn {
        margin: 0 auto;
        /* max-width: 100%; */
        width: 85%;
        min-width: auto;
    }

    .team {
        display: none !important;
    }

    .menu__item-link,
    .marquee span,
    .marquee span.bold {
        padding-top: 4px !important;
    }


    .team-2::-webkit-scrollbar {
        display: none;
    }

    .team-2 {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .main .about-us .about-us-text {
        margin-right: 0;
    }

    .team-2 {
        display: flex;
        align-items: center;
        height: 180px;
        max-width: 325px;
        margin-right: -30px;
    }

    .marquee_text,
    .marquee_text-2,
    .marquee_text-3,
    .marquee_text-4 {
        font-size: 40px;
        transform: translateY(5%);
        height: 67px;
        padding-top: 10px;
    }

    .marquee_text span.bold,
    .marquee_text-2 span.bold,
    .marquee_text-3 span.bold,
    .marquee_text-4 span.bold {
        padding-top: 10px;
        font-size: 40px;
    }

    .header .logo {
        height: 100px;
        margin-bottom: 0;
    }

    .main .about-us {
        padding-bottom: 0;
    }

    .gradient-box {
        margin-top: 0;
        padding: 10px 10px 22px 10px;
    }

    .gradient-box img {
        width: 50px;
    }

    .gradient-box p span {
        font-size: 10px;
    }

    .gradient-box p {
        font-size: 6px;
    }

    .contact-form {
        width: 100%;
    }

    .contact-form-title h3,
    .contact-form-title h3 span {
        font-size: 32px;
    }

    .contact-left-title h3 {
        font-size: 34px;
    }

    .send-link {
        left: 91%;
    }

    .contact-box {
        margin-bottom: 80px;
        margin-top: 40px;
    }

    .team-member-desc {
        flex-direction: column;
    }

    .single-team-member-desc-title h3 {
        text-align: center;
    }

    .single-team-member-desc {
        margin-left: 0;
    }

    .other-team-members {
        margin-top: 40px;
        /* justify-content: center; */
    }

    .single-team-member-box {
        margin-bottom: 50px;
    }

    .other-team-members .team-gallery {
        margin-bottom: 20px;
    }

    .single-team-member-desc-title {
        margin-top: 0;
    }

    .team .team-desc,
    .team-2 .team-desc {
        margin-top: 0;
    }

    .team .team-desc p,
    .team-2 .team-desc p {
        font-size: 7px;
        line-height: 0;
        padding-top: 0;
    }

    .team-gallery .team-desc p {
        font-size: 14px;
    }

    .team .skill,
    .team-2 .skill {
        width: 100px;
    }

    .team .skill svg,
    .team-2 .skill svg {
        width: 100px;
        height: 120px;
        top: 0%;
        left: -10%;
    }

    .team circle,
    .team-2 circle {
        cx: 60;
        cy: 60;
        r: 50;
    }

    .team .outer,
    .team-2 .outer {
        width: 100px;
        height: 100px;
        padding: 0;
    }

    .team .skill .team-img,
    .team-2 .skill .team-img {
        max-width: 100px;
    }

    .team .skill .team-img img,
    .team-2 .skill .team-img img {
        width: 75px;
        height: 75px;
    }

    .team .skill:hover .team-desc p,
    .team-2 .skill:hover .team-desc p {
        margin-top: 15px;
    }

    .team .skill,
    .team-2 .skill {
        margin-right: 10px;
    }

    .team-box:not(:first-child) {
        padding-left: 35px;
    }

    .main {
        padding-top: 35px;
    }

    .marquee span.bold,
    .menu__item-link,
    .marquee span {
        font-size: 33px;
    }

    .marquee span {
        margin: 0 15px;
    }

    .marque-box .menu__item-img {
        top: -250px !important;
        max-width: 300px !important;
    }

    .menu {
        margin-top: 0px;
    }

    .menu__item {
        margin-bottom: 0;
    }

    .vertical-align-middle {
        justify-content: flex-start;
    }

    .services-box {
        flex-direction: column;
        align-items: center;
    }

    .services-box-code,
    .services-box-design {
        width: 375px;
    }

    .services-box-design {
        background-size: contain;
        justify-content: flex-start;
    }

    .services-box-content h4,
    .services-box-title h3 {
        font-size: 36px;
    }

    .services-box-content h4,
    .services-box-title h3 {
        max-width: 200px;
        margin: 0 auto 40px auto;
    }

    .services-box-code {
        height: 730px;
    }

    .projects-section,
    .other-projects-title,
    .project-desc-side-title {
        display: none;
    }

    .other-projects-images {
        flex-direction: column;
        align-items: center;
    }

    .other-projects .other-projects-img {
        margin-right: 0;
        margin-bottom: 33px;
    }

    .other-projects-top-menu {
        display: flex;
        margin-top: 40px;
    }

    .other-projects {
        margin-top: 25px;
    }

    .single-project-section {
        flex-direction: column;
        transition: all .5s;
    }

    /* .project-desc-side,
    .project-desc-side2 {
        margin-left: 0;
        margin-right: 0;
        margin-top: 40px;
    } */
    .single-project,
    .set-single-project {
        order: 1;
        margin-top: 30px;
        /* position: absolute; */
        top: 18%;
        transition: all .5s;
    }

    .set-single-project {
        box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
        -webkit-box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
        -moz-box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
    }

    .project-desc-side,
    .project-desc-side2 {
        margin-top: 0;
        margin: auto;
        transition: all .5s;
    }

    .project-desc-side-2 {
        max-width: 400px;
        top: 12%;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
        -webkit-box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
        -moz-box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
    }

    .project-desc-side-2.mega-desc {
        top: 5%;
    }

    .single-project-desc,
    .project-desc {
        margin: 0;
    }

    .project-desc-side {
        max-width: 300px;
        transition: all .5s;
    }

    .single-project-desc {
        padding: 30px 40px 17px 40px;
    }

    .single-project-desc .project-desc-title h3 {
        font-size: 18px;
    }

    .project-desc-title {
        margin-bottom: 18px !important;
    }

    .project-desc-categories {
        margin-bottom: 15px;
    }

    .project-desc-categories .project-title h5 {
        font-size: 7.7px;
    }

    .project-desc-categories .project-desc-categories-title h4 {
        font-size: 8.8px;
    }

    .single-project {
        max-width: 300px;
        margin: auto;
        transition: all .5s;
    }

    .mySwiper2,
    .mySwiper .swiper-slide,
    .swiper {
        display: none !important;
    }

    .swiper-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .mySwiper .swiper-slide {
        margin-bottom: 30px;
    }

    .mySwiper .swiper-slide {
        width: 100% !important;
    }

    .single-project.spliyvi {
        max-width: 400px;
        /* margin-top: -165%; */
        position: absolute !important;
        top: 30%;
        left: 0;
        right: 0;
        margin: 0 auto;
        transition: all .5s;
        padding-bottom: 50px;
        box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
        -webkit-box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
        -moz-box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
    }

    .single-project.big-card {
        max-width: 400px;
        position: absolute !important;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 30%;
        padding-bottom: 50px;
        transition: all .5s;
        box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
        -webkit-box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
        -moz-box-shadow: -5px -82px 75px 0px rgba(0, 0, 0, 0.89);
    }

    /* .big-card {
        max-width: 300px;
        transition: all .5s;
    } */

    .mini-gallery {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mini-gallery .mini-gallery-img {
        margin-bottom: 30px;
        max-width: 100%;
    }

    .mini-gallery .mini-gallery-img img {
        filter: brightness(0.25);
        transition: all .5s;
    }

    .mini-gallery .mini-gallery-img img:hover,
    .mini-gallery .mini-gallery-img img.active {
        filter: none;
    }
}

@media (max-width: 575px) {
    .price-boxes .box .box-title h2 {
        font-size: 33px;
    }

    .price-boxes .box .box-title.sm h2 {
        font-size: 21px;
    }

    .prices .section-bottom-title h1,
    .prices .section-bottom-title span {
        font-size: 29px;
    }

    .prices .section-bottom-title {
        margin: 50px 50px 100px 50px;
    }

    .price-boxes .pages-list li {
        margin-bottom: 17px;
    }

    .price-boxes .monthly-price {
        margin: 0;
    }

    .price-boxes .pages-list li,
    .price-boxes .admin-demo span,
    .price-boxes .order-now-btn span {
        font-size: 20px;
    }

    .prices .section-title h1 {
        margin: 50px 30px 0px 30px;
        font-size: 24px;
    }

    .price-boxes {
        margin-top: 30px;
    }

    .price-boxes .box {
        border-radius: 53px;
    }

    .team-box .team-img img {
        width: 100%;
    }

    .send-link {
        left: 89%;
    }

    .other-team-members {
        flex-direction: column;
        justify-content: center;
    }

    .other-team-members .skill {
        margin-right: 0;
    }

    .view-all-team-members {
        width: 305px;
        padding: 20px 0;
    }

    .team-section .team-left-side-title h2 {
        font-size: 22px;
    }

    .team-section .team-right {
        justify-content: center;
    }

    .services-box-code,
    .services-box-design {
        width: 320px;
    }

    .logo img {
        width: 300px;
    }

    .team-section .team-gallery .skill {
        margin-right: 0;
        margin-bottom: 125px;
    }

    .team-section {
        flex-direction: column;
        align-items: center;
    }

    .team-section .team-gallery {
        flex-direction: column;
    }

    .menu__item-img {
        top: -131px;
        max-width: 250px;
        left: 82%;
        z-index: 10;
    }
}

@media (max-width: 520px) {
    .single-project {
        max-width: 250px;
    }

    .single-project.spliyvi {
        max-width: 400px;
    }
}

@media (max-width: 460px) {
    .send-link {
        left: 82%;
    }
}

@media (max-width: 420px) {
    .send-link {
        left: 82%;
    }
}

@media(max-width: 375px) {

    .marquee_text,
    .marquee_text-2,
    .marquee_text-3,
    .marquee_text-4 {
        top: 43%;
    }

    .marquee_text-2 {
        top: 50%;
    }

    .marquee_text-3 {
        top: 57%;
    }

    .marquee_text-4 {
        top: 64%;
    }
}

@media (min-width: 768px) {
    .promo-carousel .item-wrap {
        width: 200%;
    }
}


ul.list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.list li {
    display: inline-block;
    /* margin: 0 3px 9px; */
}

ul.list li a.draw-border {
    position: relative;
    display: block;
    width: 140px;
    height: 140px;
    overflow: hidden;
    color: #fff;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: 140px;
}

ul.list li a.draw-border .icon {
    position: relative;
    z-index: 2;
}

ul.list li a.draw-border .circle:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 140px;
    height: 140px;
    border-radius: 100%;
    background: #000;
}

ul.list li a.draw-border .circle span {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

ul.list li a.draw-border .circle span em {
    position: absolute;
    border-radius: 999px;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: transform 0.25s linear;
}

ul.list li a.draw-border .circle span:first-child {
    left: 0%;
}

ul.list li a.draw-border .circle span:first-child em {
    left: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transform-origin: 0% 50%;
}

ul.list li a.draw-border .circle span:last-child {
    left: 50%;
}

ul.list li a.draw-border .circle span:last-child em {
    left: -100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transform-origin: 100% 50%;
    transition-delay: .25s;
}

ul.list li a.draw-border:hover .circle span:first-child em {
    transform: rotate(-180deg);
    transition: transform 0.5s ease-out;
    transition-delay: .25s;
}

ul.list li a.draw-border:hover .circle span:last-child em {
    transform: rotate(-180deg);
    transition: transform .25s linear;
}







.circular-progress-bar {
    position: relative;
    margin: 0 auto;
}

.progress-percentage,
.progress-text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0px 60px;
}

.progress-percentage {
    font-size: 60px;
    transform: translate(-50%, -85%);
}

.progress-text {
    transform: translate(-50%, 0%);
    color: #585858;
    font-size: 21px;
}












.deck {
    position: relative;
    max-width: 500px;
    width: 100%;
    margin: 5em auto 3em;
}

.deck:before {
    content: "";
    position: absolute;
    width: 120%;
    height: 95%;
    top: -1.5em;
    left: 0em;
    border-radius: 8px;
}

.card {
    position: relative;
    z-index: 5;
    border-radius: 2px;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
    transition: .5s ease-in-out;
}

.card+.card {
    margin-top: 1em;
}

.card:hover {
    z-index: 7;
    transform: scale(1.05);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}

.card:nth-of-type(2) {
    margin-top: -6em;
}

.cardHeader {
    display: grid;
    grid-template-columns: 36px auto 100px;
    align-items: center;
    text-transform: uppercase;
}

.cardHeader .cardHeader_type {
    color: #FFD433;
    margin: 10px;
}

.cardHeader .cardHeader_account {
    color: #C6E1ED;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 1px;
}

.cardHeader .cardHeader_date {
    margin: 10px;
    color: #C6E1ED;
    font-size: 0.85em;
    font-weight: 600;
    text-align: right;
}

.cardBody {
    display: flex;
    margin: 0 10px 10px;
}

.cardBody .cardText {
    margin: 0 10px 0 0;
    white-space: pre-line;
    color: #c0c3d7;
    font-weight: 400;
    line-height: 1.5;
}

.cardBody .cardText .cardText_highlight {
    color: #ffe480;
}

.cardBody .cardStats {
    font-size: 0.9em;
    text-align: right;
}

.cardBody .cardStats .cardStats_stat {
    display: inline-block;
    white-space: nowrap;
}

.cardBody .cardStats .cardStats_stat+.cardStats_stat {
    margin-top: 5px;
}






/* clock loader */

.clock-loader {
    --clock-color: #4A1E71;
    --clock-width: 4rem;
    --clock-radius: calc(var(--clock-width) / 2);
    --clock-minute-length: calc(var(--clock-width) * 0.4);
    --clock-hour-length: calc(var(--clock-width) * 0.2);
    --clock-thickness: 0.2rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--clock-width);
    height: var(--clock-width);
    border: 3px solid var(--clock-color);
    border-radius: 50%;
}

.clock-loader::before,
.clock-loader::after {
    position: absolute;
    content: "";
    top: calc(var(--clock-radius) * 0.25);
    width: var(--clock-thickness);
    background: var(--clock-color);
    border-radius: 10px;
    transform-origin: center calc(100% - calc(var(--clock-thickness) / 2));
    animation: spin infinite linear;
}

.clock-loader::before {
    height: var(--clock-minute-length);
    animation-duration: 2s;
}

.clock-loader::after {
    top: calc(var(--clock-radius) * 0.25 + var(--clock-hour-length));
    height: var(--clock-hour-length);
    animation-duration: 15s;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}







.wrapper {
    height: 100vh;
    text-align: center;
}

.wrapper button {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.loader {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    transition: width 0s 1.4s ease;
}

.loader .loader__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.loader .loader__icon svg {
    transform-origin: 0 0;
}

.loader .loader__tile {
    position: absolute;
    left: 0;
    width: 0;
    height: 20%;
    background-color: #0f0f0f;
    transition: width 0.7s ease;
}

.loader .loader__tile:nth-child(0) {
    top: calc(-1 * 20%);
    transition-delay: -0.2s;
}

.loader .loader__tile:nth-child(1) {
    top: calc(0 * 20%);
    transition-delay: 0s;
}

.loader .loader__tile:nth-child(2) {
    top: calc(1 * 20%);
    transition-delay: 0.2s;
}

.loader .loader__tile:nth-child(3) {
    top: calc(2 * 20%);
    transition-delay: 0.4s;
}

.loader .loader__tile:nth-child(4) {
    top: calc(3 * 20%);
    transition-delay: 0.6s;
}

.loader .loader__tile:nth-child(5) {
    top: calc(4 * 20%);
    transition-delay: 0.8s;
}

.loader--active {
    width: 100%;
    transition-delay: 0s;
}

.loader--active .loader__icon {
    opacity: 1;
    transition: opacity 0.5s 1.4s ease;
}

.loader--active .loader__tile {
    width: 100%;
}

.loader--active .loader__tile:nth-child(0) {
    transition-delay: -0.2s;
}

.loader--active .loader__tile:nth-child(1) {
    transition-delay: 0s;
}

.loader--active .loader__tile:nth-child(2) {
    transition-delay: 0.2s;
}

.loader--active .loader__tile:nth-child(3) {
    transition-delay: 0.4s;
}

.loader--active .loader__tile:nth-child(4) {
    transition-delay: 0.6s;
}

.loader--active .loader__tile:nth-child(5) {
    transition-delay: 0.8s;
}

/*
.bubbly-button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
}
 .bubbly-button:focus {
    outline: 0;
}

.bubbly-button:before,
.bubbly-button:after {
    position: absolute;
    content: "";
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
}

.bubbly-button:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #4A1E71 20%, transparent 20%), radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%), radial-gradient(circle, #4A1E71 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), radial-gradient(circle, #4A1E71 20%, transparent 20%), radial-gradient(circle, #4A1E71 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #4A1E71 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}

.bubbly-button:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #4A1E71 20%, transparent 20%), radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #4A1E71 20%, transparent 20%), radial-gradient(circle, #4A1E71 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}

.bubbly-button:active {
    transform: scale(0.9);
    box-shadow: 0 2px 25px rgba(74, 30, 113, 0.3);
}

.bubbly-button.animate:before {
    display: block;
    animation: topBubbles ease-in-out 0.75s forwards;
}

.bubbly-button.animate:after {
    display: block;
    animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }

    100% {
        background-position: 0% 90%,
            20% 90%,
            45% 70%,
            60% 110%,
            75% 80%,
            95% 70%,
            110% 10%;
        background-size: 0% 0%,
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%;
    }
}

*/
#pointer-dot {
    border: 2.5px solid white;
    position: fixed;
    border-radius: 4px;
    z-index: 101;
    pointer-events: none;
    transition: border-color 0.5s;
}

#pointer-ring {
    padding: 15px;
    border: 2px solid #fff;
    position: fixed;
    border-radius: 100px;
    z-index: 102;
    pointer-events: none;
}