body,
html {
    max-width: 100vw
}

.about-container h2 span,
.mainSectionProjectsContainer h4 span {
    color: #14a800
}

.hand,
body {
    overflow-x: hidden
}

*,
body,
body.no-scroll {
    cursor: none !important
}

.contact-badge a,
.hiddenMenu ul li a,
.link,
.project-card {
    text-decoration: none
}

.contact-feature,
.speak-description,
.testimonials-text {
    font-feature-settings: 'ordn' on, 'salt' on
}

*,
.about-container,
.carousel-content,
.experience-tag,
.work-container,
::after,
::before,
body {
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0
}

@font-face {
    font-family: Alias;
    src: url('assets/fonts/fonts/Alias/Alias-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Alias;
    src: url('assets/fonts/fonts/Alias/Alias-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Regulator Nova';
    src: url('assets/fonts/fonts/Regulator Nova/regulator-nova-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: SERMO;
    src: url('assets/fonts/fonts/SERMO/SERMORegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'SERMO Italic';
    src: url('assets/fonts/fonts/SERMO/SERMO-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

body {
    font-family: Alias, sans-serif;
    line-height: 1.6;
    color: #333;
    width: 100vw
}

.mainSectionProjects {
    min-height: calc(100vh - 64px);
    background-color: #100e0e;
    display: flex;
    align-items: center;
    justify-content: center
}

.mainSectionProjectsContainer {
    padding: 180px 100px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.mainSectionProjectsContainer h1 {
    color: #f4f0ec;
    font-family: Alias, sans-serif;
    font-size: 100px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    line-height: 100%;
    margin: 0;
    letter-spacing: -2%
}

.mainSectionProjectsContainer h4,
.mainSectionProjectsContainer h6 {
    font-size: 42px;
    text-align: center;
    color: #f4f0ec
}

.mainSectionProjectsContainer h6 {
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 124%;
    letter-spacing: -2%;
    margin: 0
}

.mainSectionProjectsContainer h4,
.moreWorkTitle h1 {
    text-transform: uppercase;
    line-height: 124%;
    margin-top: 36px;
    font-family: Alias, sans-serif;
    font-weight: 400;
    letter-spacing: -2%
}

.mainSectionSingleProject {
    min-height: calc(100vh - 64px);
    background: linear-gradient(to bottom, #100e0e 30%, #47cd7c 70%)
}

.moreWorkTitle h1 {
    color: #100e0e;
    font-size: 80px;
    margin-bottom: 180px;
    padding: 0 100px
}

.slider {
    height: 2100vh;
    position: relative;
    background-color: #fff
}

.slider::after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 77
}

.slider .sticky {
    position: sticky;
    top: 5vh;
    height: 90vh;
    overflow: hidden
}

.slider .sticky::after {
    content: "";
    background-color: #fbffd1;
    height: 10px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.slider .sticky::before {
    content: "";
    background-color: #cfda5b;
    height: 10px;
    width: var(--before-width, 0%);
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0
}

.trackImg {
    transition: margin .6s linear
}

.track {
    display: flex;
    width: 700%;
    height: 100%;
    transition: transform 1s linear
}

@media screen and (max-width:850px) {
    .track {
        flex-direction: column;
        transform: translateY(100vh);
        transition: transform .6s linear
    }

    .slider .sticky {
        top: 0;
        height: 100vh
    }

    .slider {
        height: 1400vh
    }
}

.trackImg {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    flex-shrink: 0
}

.hamburgermenuMobile {
    position: absolute;
    right: 75px;
    top: 20px;
    z-index: 9;
    padding: 0;
    line-height: 0;
    transform: 0;
    display: none
}

#loader,
.hiddenMenu {
    position: fixed;
    transition: 1s
}

.hiddenMenu {
    background-color: #100e0e;
    width: 100%;
    right: -100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    padding: 40px 18px;
    height: calc(100vh - 85px);
    bottom: 0;
    z-index: 99
}

.colaborateButton,
.hiddenMenuContainer,
.speak-right img {
    width: 100%
}

.hiddenMenuContainer ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 50px;
    list-style-type: none
}

.colaborateButton button,
.mainSectionSingleTechs .singleTech {
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 124%;
    text-align: center;
    margin: 0
}

.hiddenMenu ul li a {
    color: #f4f0ec;
    font-family: Alias, sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 124%;
    letter-spacing: -2%
}

.colaborateButton button {
    display: block;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 16px;
    background-color: #cfda5b;
    border: none;
    font-size: 20px;
    letter-spacing: -2%;
    color: #100e0e;
    border-radius: 100px
}

.mainSectionSingleProjectContainer h1,
.marginImageCovertext h1,
.singleCard h2,
.singleCard h3 {
    line-height: 100%;
    font-family: Alias, sans-serif;
    letter-spacing: -2%;
    text-transform: uppercase
}

.hamburgermenuMobile svg path {
    transition: transform 1s
}

.hamburgermenuMobile svg path:first-child {
    transform-origin: 4px 8px
}

.hamburgermenuMobile svg path:last-child {
    transform-origin: 8px 17.5px
}

.activeHamburgerMenuMobile svg path:first-child {
    transform: rotate(45deg)
}

.activeHamburgerMenuMobile svg path:last-child {
    transform: rotate(-45deg)
}

.mainSectionSingleProjectblue {
    background: linear-gradient(to bottom, #100e0e 30%, #2d6fc5 70%)
}

.projectsAtProjects {
    padding: 0 100px
}

.mainSectionSingleProjectContainer {
    padding: 150px 100px 400px
}

.mainSectionSingleProjectContainer h1 {
    color: #f4f0ec;
    font-size: 80px;
    font-weight: 400
}

.mainSectionSingleTechs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: 8px;
    margin-top: 40px
}

.mainSectionSingleTechs .singleTech {
    font-size: 16px;
    letter-spacing: 0;
    display: inline-block;
    color: #fff;
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 100px;
    padding: 4px 16px 8px
}

.undermainSingleProject {
    padding: 0 100px 90px
}

.speak-with-me-section-single {
    margin-top: 90px
}

.mainImgSingle {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: -350px
}

.marginImageCovertext {
    width: calc(100% - 150px);
    background-color: rgba(212, 212, 212, .1);
    padding: 32px;
    position: absolute;
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    bottom: 75px;
    left: 75px;
    border-radius: 3px;
    border: 3px solid rgba(255, 255, 255, .1)
}

.marginImageCovertext h1 {
    color: #f4f0ec;
    font-size: 40px;
    font-weight: 400;
    width: 70%
}

.mainImgSingle img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.itemImg img,
.logo-placeholder img,
.mobile-availability,
.top-rated img {
    object-fit: contain
}

.cardRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 100px
}

.singleCard {
    width: 100%;
    background-color: #100e0e;
    padding: 24px;
    min-height: 185px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between
}

.singleCard h2,
.singleCard h3 {
    font-size: 18px;
    font-weight: 100;
    color: #cfda5b
}

.singleCard img {
    height: 30px
}

.singleCard h2 {
    font-size: 24px;
    color: #fff;
    line-height: 120%
}

.aboutTheProjectContent,
.firstImageAboutSingleGrid {
    padding: 90px 100px
}

.aboutTheProjectContent .aboutProjectMainRow {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.aboutTheProjectContent h1 {
    width: 80%
}

.aboutTheProjectContent h1,
.moreMyWork h1 {
    color: #100e0e;
    font-family: Alias, sans-serif;
    font-size: 80px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 100%;
    letter-spacing: -2%
}

.aboutTheProjectContent a,
.aboutTheProjectContent h4,
.goalsSingleProject .cardSingleProject ul li,
.singleCard h4 {
    line-height: 124%;
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-style: normal
}

.mainSectionSingleTechsAbout {
    width: 300px
}

.aboutTheProjectContent h4 {
    font-size: 42px;
    color: #2b2b2b;
    margin: 24px 0;
    letter-spacing: -2%
}

.aboutTheProjectContent a {
    background-color: #cfda5b;
    text-decoration: none;
    font-size: 20px;
    padding: 8px 32px 16px;
    display: inline-block;
    border-radius: 100px;
    letter-spacing: -2%;
    color: #2b2b2b
}

.link,
.nav-right,
.singleCard h4 {
    letter-spacing: 0
}

.firstImageAboutSingleGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px
}

.itemImg img {
    width: 100%
}

.colSingleImageItemBgSingle,
.firstImageAboutSingleGrid .itemImg,
.singleImageItemBgSingle {
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.firstImageAboutSingleGrid .lastItemImg,
.gridContactForm .fullWidthInput {
    grid-column: 1/-1
}

.mainSectionSingleTechsAbout .singleTech {
    background-color: #2b2b2b
}

.goalsSingleProject {
    padding-top: 156px;
    display: flex;
    gap: 10px;
    align-items: stretch
}

.goalsSingleProject .cardSingleProject {
    flex: 1;
    background-color: #100e0e;
    padding: 32px;
    border-radius: 32px
}

.goalsSingleProject .cardSingleProject .titleCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 12px 24px 10px;
    background-color: #f4f0ec;
    border-radius: 100px
}

.goalsSingleProject .cardSingleProject .lastTitleCard,
.moreMyWork {
    background-color: #cfda5b
}

.goalsSingleProject .cardSingleProject .titleCard h1 {
    font-family: SERMO, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: -2%;
    text-transform: uppercase;
    color: #100e0e
}

.goalsSingleProject .cardSingleProject .titleCard div {
    width: 40px;
    height: 40px;
    border: 12px solid #100e0e;
    background-color: transparent;
    border-radius: 50%
}

.link,
.nav-center {
    border-radius: 20px;
    position: relative
}

.goalsSingleProject .cardSingleProject ul {
    color: #f4f0ec;
    list-style-type: none;
    padding-left: 50px
}

.goalsSingleProject .cardSingleProject ul li {
    position: relative;
    font-size: 28px;
    margin-bottom: 10px;
    letter-spacing: -2%
}

.goalsSingleProject .cardSingleProject ul li::before {
    content: "";
    background-color: #f4f0ec;
    height: 10px;
    position: absolute;
    left: -25px;
    top: 15px;
    width: 10px;
    border-radius: 50%
}

.singleImageItemBgSingle {
    height: 700px;
    margin-top: 110px
}

.rowSingleImageItemBgSingle {
    display: flex;
    gap: 10px
}

.colSingleImageItemBgSingle {
    height: 400px;
    flex: 1
}

.singleImageItemBgSingle400 {
    height: 400px
}

.cardRowResult .singleCard {
    justify-content: start
}

.cardRowResult .singleCard h3 {
    margin-bottom: 32px;
    font-size: 42px
}

.singleCard h4 {
    font-size: 18px;
    color: #898989 !important;
    margin: 0
}

.moreMyWork {
    padding: 150px 100px 100px
}

#loader {
    inset: 0;
    background: #100e0e;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    z-index: 9999
}

.spinner {
    width: 500px;
    position: relative
}

.spinner img {
    width: 500px;
    position: relative;
    height: 150px
}

@media screen and (max-width:1025px) {

    .aboutTheProjectContent,
    .firstImageAboutSingleGrid,
    .undermainSingleProject {
        padding: 100px 60px
    }

    .aboutTheProjectContent h1,
    .mainSectionProjectsContainer h1,
    .mainSectionSingleProjectContainer h1,
    .moreMyWork h1,
    .moreWorkTitle h1 {
        font-size: 40px
    }

    .aboutTheProjectContent h4 {
        font-size: 32px
    }

    .singleCard h4 {
        font-size: 16px
    }

    .cardRow {
        grid-template-columns: repeat(2, 1fr)
    }

    .moreMyWork .project-card-container {
        flex-direction: column !important;
        gap: 100px;
        margin: 0
    }

    .moreMyWork .project-card-container .project-card {
        margin-top: 100px
    }

    .mainSectionSingleProjectContainer {
        padding: 150px 60px 200px !important
    }

    .mainImgSingle {
        margin-top: -250px
    }

    .moreMyWork {
        padding-left: 60px;
        padding-right: 60px
    }

    .firstImageAboutSingleGrid {
        grid-template-columns: 1fr
    }

    .goalsSingleProject,
    .rowSingleImageItemBgSingle {
        flex-direction: column
    }
}

@media screen and (max-width:770px) {

    .aboutTheProjectContent,
    .firstImageAboutSingleGrid,
    .undermainSingleProject {
        padding: 40px 20px
    }

    .goalsSingleProject {
        padding-top: 56px
    }

    .speak-with-me-section-single {
        margin-top: 40px
    }

    .moreMyWork {
        padding: 80px 20px 200px
    }

    .mainSectionSingleProjectContainer {
        padding: 100px 20px 200px !important
    }

    .cardRowResult .singleCard h4,
    .singleCard h3 {
        font-size: 14px
    }

    .cardRowResult .singleCard h3 {
        font-size: 24px
    }

    .singleCard h2 {
        font-size: 12px
    }

    .aboutTheProjectContent .aboutProjectMainRow {
        flex-direction: column;
        align-items: start
    }

    .mainSectionSingleTechs {
        margin-top: 20px
    }

    .goalsSingleProject .cardSingleProject ul {
        padding: 0
    }

    .goalsSingleProject .cardSingleProject ul li,
    .mainSectionProjectsContainer h6 {
        font-size: 18px;
        margin-bottom: 5px
    }

    .goalsSingleProject .cardSingleProject ul li::before {
        content: none
    }

    .goalsSingleProject .cardSingleProject {
        padding: 24px
    }

    .singleCard {
        padding: 24px 16px
    }

    .aboutTheProjectContent h1 {
        text-align: start !important
    }
}

.link,
.top-rated .child h1 {
    font-size: 18px;
    text-align: center
}

.spinner::after {
    content: "";
    background-color: #100e0e89;
    height: 100px;
    width: 600px;
    position: absolute;
    left: 0;
    bottom: -80px;
    animation: 4s infinite spin
}

@keyframes spin {
    to {
        transform: translateY(-220px)
    }
}

html {
    scroll-behavior: smooth;
    color: red
}

.header {
    width: 100%;
    background-color: #100e0e
}

.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative
}

.nav-center {
    display: flex;
    list-style: none;
    gap: 10px;
    margin-top: 20px;
    z-index: 99;
    transition: .3s;
    background-color: rgba(0, 0, 0, .36)
}

.nav-center li,
.relative {
    position: relative
}

.footer-cta:hover,
.footer-link:hover,
.nav-center li .activeLink {
    color: #cfda5b
}

.link {
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 16px;
    color: #fff;
    z-index: 999;
    display: inline-block;
    padding: 13px 20px 15px
}

.nav-center:hover:after {
    width: var(--after-width, 0);
    left: var(--after-left, 0)
}

.nav-right {
    width: 184px;
    height: 32px;
    display: flex;
    border-radius: 100px;
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 124%;
    color: #fff;
    align-items: center;
    justify-content: right;
    position: relative
}

.desktop-logo {
    display: block
}

.mobile-logo,
.mobileCarousel {
    display: none
}

.desktop-availability,
.flex {
    display: flex
}

.mobile-availability {
    display: none;
    width: 32px;
    height: 32px
}

.top-rated {
    width: 330px;
    height: 175px
}

.top-rated .child {
    position: absolute;
    top: 0;
    height: 175px;
    background-image: url(./assets/image\ copy_result.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: #fff;
    flex-direction: column;
    border-radius: 50%
}

.top-rated .child h1 {
    margin: 0;
    line-height: 20px;
    font-weight: 400
}

.expertise-tag:hover::before,
.top-rated .child1 {
    left: 0
}

.top-rated .child2 {
    right: 0
}

.banner-section {
    background-color: #100e0e;
    min-height: 100vh
}

.absoluteWrap {
    position: relative;
    height: 600px
}

.banner-container {
    display: flex;
    justify-content: space-between;
    align-items: end;
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 100px);
    background-color: #100e0e;
    margin-top: -1px !important
}

.banner-image,
.top-rated {
    position: absolute;
    opacity: 1
}

.banner-image {
    left: 50%;
    bottom: 30%;
    transform: translate(-50%, 50%)
}

.banner-image img {
    border-radius: 100px;
    opacity: 1;
    transform: rotate(0) scale(1);
    width: 486px;
    height: auto;
    max-height: 100vh
}

.about-container-stats,
.about-container-stats div {
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    border-radius: 50%
}

.banner-container p,
.banner-content h2 {
    color: #f4f0ec;
    padding: 0 100px;
    opacity: 0
}

.banner-content {
    width: 100%;
    opacity: 1
}

.banner-content h2 {
    font-family: Alias, sans-serif;
    font-weight: 400;
    font-size: 100px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    transform: translateY(50px);
    animation: 1.5s cubic-bezier(.25, .46, .45, .94) forwards bannerTitleReveal;
    text-shadow: none
}

.about-container .about-text,
.banner-container p {
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-style: normal
}

.about-container .about-text,
.about-container .upwork-text,
.banner-container p {
    transform: translateY(30px);
    text-align: center
}

.banner-container p {
    font-size: 28px;
    line-height: 124%;
    letter-spacing: 0;
    margin: 24px auto 0;
    max-width: 60%;
    animation: 1.8s cubic-bezier(.25, .46, .45, .94) forwards bannerDescriptionReveal
}

.top-rated {
    right: 5%;
    top: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row
}

@keyframes bannerTitleReveal {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(.9)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes bannerDescriptionReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px)
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px)
    }
}

@media (max-width:750px) {
    .nav-center {
        display: none
    }

    .hamburgermenuMobile {
        display: inline-block
    }
}

.about-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding: 180px 100px;
    opacity: 0;
    background-color: #100e0e;
    transform: translateY(50px);
    animation: 1.2s ease-out .3s forwards fadeInUp;
    position: relative
}

.showSection {
    animation: 1.5s ease-out forwards backgroundChange, 1.2s ease-out forwards fadeInUp
}

.hideSection {
    animation: 1.5s ease-out forwards backgroundRevert, 1.2s ease-out forwards fadeInUp
}

@keyframes backgroundRevert {
    from {
        background-color: #fff
    }

    to {
        background-color: '#100E0E'
    }
}

@keyframes backgroundChange {
    from {
        background-color: '#100E0E'
    }

    to {
        background-color: #fff
    }
}

.about-container .about-text {
    font-size: 42px;
    line-height: 124%;
    letter-spacing: 0;
    color: #2b2b2b;
    margin: 0 auto;
    opacity: 0;
    animation: 1s ease-out .6s forwards fadeInUp
}

.about-container .upwork-text,
.about-container h2 span {
    font-family: Alias, sans-serif;
    font-weight: 400;
    font-style: expanded;
    font-size: 42px;
    line-height: 124%;
    letter-spacing: 0;
    text-transform: uppercase
}

.about-container .upwork-text {
    color: #2b2b2b;
    padding: 60px 0;
    opacity: 0;
    animation: 1s ease-out .9s forwards fadeInUp
}

.about-container-stats {
    display: flex;
    position: relative;
    opacity: 0;
    transform: scale(.8);
    animation: 1.2s ease-out 1.2s forwards fadeInScale;
    background: #581b1b
}

.about-container-stats div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
    opacity: 0;
    z-index: 3;
    animation: 1s ease-out forwards slideInRotate;
    overflow: hidden
}

.about-container-stats div span,
.about-container-stats-item h2 {
    font-weight: 400;
    font-size: 200px;
    transform: scale(.5);
    animation: 2s ease-out forwards countUp;
    pointer-events: none;
    font-family: SERMO, sans-serif;
    line-height: 124%;
    color: #2b2b2b;
    font-style: normal;
    opacity: 0;
    z-index: 2
}

.about-container-stats div .circle {
    animation: 8s linear infinite infiniteRotate;
    transform-origin: center;
    z-index: 2;
    position: relative
}

.about-container-stats div .bg {
    z-index: 1;
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: .5s
}

.about-container-stats div:hover .bg {
    opacity: 1
}

.about-container-stats div:first-child .circle {
    animation: 50s linear infinite infiniteRotate
}

.about-container-stats div:last-child .circle {
    animation: 50s linear infinite reverse infiniteRotate
}

.about-container-stats div:first-child {
    position: absolute;
    left: -60px;
    animation-delay: 1.4s
}

.about-container-stats div:last-child {
    position: absolute;
    right: -60px;
    animation-delay: 1.6s
}

.about-container-stats div span {
    letter-spacing: -2%;
    position: absolute
}

.about-container-stats-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translate(-50%, -50%);
    z-index: 999
}

.about-container-stats-item h2 {
    letter-spacing: -2.4px;
    mix-blend-mode: normal;
    position: absolute
}

.about-container-stats-item p {
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 28px;
    line-height: 124%;
    letter-spacing: -2%;
    text-align: center;
    width: 354px;
    height: 100%;
    color: #2b2b2b !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20%
}

.about-container-stats:hover .about-container-stats-item h2,
.about-container-stats:hover .about-container-stats-item p {
    color: #fff !important
}

@media screen and (max-width:780px) {
    .about-container-stats-item h2 {
        font-size: 120px !important
    }

    .about-container-stats-item p {
        font-size: 28px
    }
}

.about-container-stats div:first-child h2 {
    animation-delay: 1.8s
}

.about-container-stats div:last-child h2 {
    animation-delay: 2s
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px)
    }

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

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes slideInRotate {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes countUp {
    0% {
        opacity: 0;
        transform: scale(.5) rotate(-10deg)
    }

    50% {
        opacity: .7;
        transform: scale(1.1) rotate(5deg)
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0)
    }
}

@keyframes infiniteRotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.about-container-stats div:hover {
    transform: scale(1.05);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1)
}

.about-container-stats div span:hover {
    transition: color .3s
}

@media (max-width:1024px) {
    .banner-content h2 {
        font-size: 70px
    }

    .bestDo {
        padding: 180px 60px !important
    }

    .hand {
        right: 60px !important
    }

    .desktop-logo {
        left: 60px !important
    }

    .top-rated {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, 0)
    }

    .about-container {
        padding: 60px
    }

    .about-container .about-text {
        font-size: 36px
    }

    .about-container .upwork-text {
        font-size: 36px;
        padding: 40px 0
    }

    .about-container-stats div img {
        width: 400px
    }

    .about-container-stats div span {
        font-size: 120px
    }

    .about-container-stats-item p {
        width: 100%;
        height: 100%;
        font-size: 16px !important
    }
}

@media (max-width:768px) {

    .header,
    .navbar {
        width: 100%
    }

    .header {
        box-sizing: border-box;
        z-index: 1000
    }

    .desktop-availability {
        display: none
    }

    .mobile-availability {
        display: block
    }

    .nav-right {
        width: auto;
        height: auto;
        padding: 6px;
        border-radius: 50%
    }

    .banner-container {
        height: 100vh;
        min-height: 500px;
        padding: 0 20px;
        box-sizing: border-box
    }

    .banner-image {
        bottom: 50%;
        transform: translate(-50%, 50%)
    }

    .banner-image img {
        width: 340px;
        height: auto;
        max-width: 90vw;
        max-height: 60vh
    }

    .desktop-logo {
        left: 20px !important
    }

    .bestDo {
        padding: 80px 20px !important
    }

    .hand {
        right: 20px !important
    }

    .banner-content {
        bottom: 20%;
        padding: 0 20px;
        box-sizing: border-box
    }

    .banner-content h2 {
        font-size: 48px;
        line-height: 90%;
        padding: 0
    }

    .banner-container p {
        font-size: 20px;
        line-height: 130%;
        max-width: 100%;
        padding: 0
    }

    .top-rated {
        flex-direction: column;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, 0)
    }

    .about-container {
        padding: 50px 30px
    }

    .absoluteWrap {
        height: 520px
    }

    .about-container .about-text {
        font-size: 28px;
        line-height: 135%;
        text-align: left
    }

    .about-container .upwork-text {
        font-size: 28px;
        padding: 30px 0;
        text-align: left
    }

    .about-container h2 span {
        font-size: 28px
    }

    .about-container-stats div {
        margin-top: 20px;
        transform: translateY(-20px)
    }

    .about-container-stats div img {
        width: 400px
    }

    .about-container-stats div:first-child {
        right: 50%;
        left: auto;
        transform: translateX(50%)
    }

    .about-container-stats div:last-child {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: 230px
    }

    .about-container-stats div span {
        font-size: 70px
    }
}

@media screen and (max-width:760px) {
    .about-container-stats div img {
        width: 300px
    }

    .about-container-stats-item p {
        font-size: 20px !important
    }
}

.project-image-2::after,
.project-image::after {
    height: 100%;
    mix-blend-mode: normal;
    pointer-events: none;
    z-index: 99;
    content: "";
    inset: 0
}

.work-container {
    display: flex;
    flex-direction: column;
    padding: 180px 100px
}

.project-card-container {
    display: flex;
    padding: 0 3px;
    flex-direction: row;
    position: relative;
    gap: 40px;
    margin-top: 180px
}

.projectsAtProjects .project-card-container {
    margin-top: 60px
}

.project-card-reverse {
    flex-direction: row-reverse;
    margin-top: 180px !important
}

.project-card {
    width: 100%;
    height: 650px;
    border-radius: 20px
}

.project-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    transform-origin: center center;
    transition: .8s cubic-bezier(.165, .84, .44, 1) 1s;
    will-change: background-size;
    width: 100%;
    height: 60%;
    margin-top: 32px;
    overflow: hidden;
    position: relative
}

.carousel-background,
.carousel-slide {
    will-change: transform;
    position: absolute
}

.project-image::after {
    width: 100%;
    position: absolute;
    transition: .5s;
    background: url(./assets/teachingHero.svg) center/contain no-repeat, rgba(0, 0, 0, .5);
    background-blend-mode: normal, multiply;
    background-size: 175px
}

.project-image-2::after {
    width: 100%;
    position: absolute;
    background: url(./assets/singleProjectlogo\ copy.svg) center/contain no-repeat, rgba(0, 0, 0, .5);
    background-blend-mode: normal, multiply;
    background-size: 175px
}

.project-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(./assets/7719fad8a77ea401355486dcd8096007f40f4232_result.avif);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: 1s
}

.project-image-2::before {
    background-image: url(./assets/67f4189831444ef6d8caf5762c3794f00f28ad9a_result.avif)
}

.project-card-1:hover .project-image::before {
    transform: scale(1.05);
    background-image: url(./assets/teachingHover.svg)
}

.project-card-1:hover .project-image::after,
.project-card-2:hover .project-image::after {
    opacity: 0
}

.project-card-2:hover .project-image::before {
    transform: scale(1.05);
    background-image: url(./assets/grynHover.svg)
}

.expertise-info-header,
.project-header {
    display: flex;
    flex-direction: row;
    gap: 8px
}

.project-year {
    font-family: SERMO, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 124%;
    color: #2b2b2b
}

.project-name {
    font-family: Alias, sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #2b2b2b;
    margin: 0
}

.project-tags {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-top: 1rem
}

.tag {
    padding: 8px 16px;
    background: #2b2B2B0D;
    border: 1px solid #2b2B2B1A;
    border-radius: 24px;
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #2b2b2b;
    transition: .3s
}

.expertise-info-header h3,
.expertise-info-header span,
.expertise-title {
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -2%;
    text-transform: uppercase
}

.expertise-tag,
.gallery-item {
    transition: .3s cubic-bezier(.4, 0, .2, 1)
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto
}

.gallery-item {
    aspect-ratio: 1.2;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .2)
}

.gallery-item:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, .4)
}

.expertise-section {
    background-color: #100e0e;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.expertise-container {
    padding: 180px 100px;
    text-align: start;
    width: 100%
}

.expertise-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 100px
}

.expertise-title {
    width: 100%;
    font-family: Alias, sans-serif;
    font-size: 80px;
    color: #f4f0ec;
    margin: 0;
    text-align: start
}

.expertise-description {
    font-family: 'Regulator Nova', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 28px;
    line-height: 124%;
    letter-spacing: 0;
    color: #f8f8f8;
    max-width: 70vw;
    margin: 0
}

.expertise-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 100px 60px;
    width: 100%
}

.expertise-info-item {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.expertise-info-header h3 {
    font-family: Alias, sans-serif;
    font-style: expanded;
    font-size: 42px;
    color: #f4f0ec
}

.expertise-info-header span {
    font-family: SERMO, sans-serif;
    font-style: normal;
    font-size: 20px;
    text-align: center;
    color: #cfda5b
}

.contactContainer,
.expertise-info-description,
.expertise-tag,
.hand p {
    font-family: 'Regulator Nova', sans-serif
}

.expertise-info-description {
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 124%;
    letter-spacing: 0;
    color: #f4f0ec
}

.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 20px
}

.expertise-tag {
    padding: 12px 24px;
    background-color: transparent;
    border: 1px solid #b8d432;
    border-radius: 32px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #b8d432;
    position: relative;
    overflow: hidden
}

.experience-tag,
.speak-title {
    letter-spacing: -.02em;
    text-transform: uppercase
}

.hand,
.hand p {
    transition: .5s
}

.expertise-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #b8d432;
    transition: left .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 1
}

.expertise-tag:hover {
    color: #100e0e;
    transform: translateY(-2px)
}

.gallery-image[data-image="1"],
.gallery-image[data-image="2"],
.gallery-image[data-image="3"] {
    transform: translateY(120vh) rotate(25deg) scale(.8)
}

.expertise-tag span {
    position: relative;
    z-index: 2
}

.choicesSelection,
.hand {
    align-items: center;
    display: flex
}

.hand {
    background-color: #cfda5b;
    height: 45px;
    width: 45px;
    border-radius: 22.5px;
    border: 1px solid #8181813e;
    overflow-y: hidden;
    padding: 10px;
    justify-content: space-between
}

.hand p {
    width: 0;
    white-space: nowrap;
    height: 100%;
    line-height: 124%;
    margin: 0;
    font-weight: 100 !important;
    font-size: 16px !important;
    color: #000;
    opacity: 0;
    visibility: hidden
}

.fixedContact {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    height: 100vh;
    transform: translateY(100vh);
    overflow: scroll;
    transition: .6s;
    max-height: 100vh
}

.activeContact {
    transform: translateY(0);
    animation: .5s .5s forwards blurImg
}

@keyframes blurImg {
    from {
        backdrop-filter: 0;
        background-color: transparent
    }

    to {
        backdrop-filter: blur(5px) opacity(1);
        background-color: #27272733
    }
}

body.no-scroll {
    overflow: hidden
}

.contactContainer {
    width: 90%;
    margin: 150px auto auto;
    min-height: 100vh;
    z-index: 99;
    padding: 100px 150px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    border-radius: 16px;
    column-gap: 100px;
    background-color: #f4f0ec
}

.contactContainerLeftCol {
    width: 100%;
    max-width: 1400px
}

.contactContainerLeftCol h1 {
    margin: 0 0 60px;
    font-size: 58px;
    font-family: Alias, sans-serif;
    font-weight: 400;
    color: #2b2b2b;
    text-transform: uppercase
}

.contactContainerLeftCol h4 {
    font-size: 28px;
    margin-top: 50px;
    font-family: 'Regulator Nova', sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 124%
}

.contactContainerLeftCol h4 span {
    color: #a1a1a1;
    font-weight: 300
}

.contactContainer button i {
    font-size: 40px
}

.contactContainer button {
    position: relative;
    background: 0 0;
    border: none;
    margin-top: 15px
}

.choicesSelection div,
.submitInputContactForm input {
    border: 1px solid rgba(43, 43, 43, .1);
    line-height: 124%;
    text-align: center;
    font-family: 'Regulator Nova', sans-serif;
    font-style: normal;
    font-weight: 500
}

.contactContainerButton {
    width: 40px
}

.contactContainer .fixedCloseBtn {
    position: fixed;
    z-index: 150;
    height: 50px
}

.hand svg {
    z-index: 2;
    width: 25px;
    color: #000;
    height: 25px;
    background-color: #cfda5b;
    position: relative;
    left: -1px;
    display: inline-block;
    transform-origin: bottom center;
    animation: 3s ease-in 1s infinite rotateHand
}

@keyframes rotateHand {

    0%,
    100%,
    30% {
        transform: rotate(0)
    }

    15%,
    5% {
        transform: rotate(15deg)
    }

    10% {
        transform: rotate(-10deg)
    }

    20% {
        transform: rotate(-5deg)
    }

    25% {
        transform: rotate(5deg)
    }
}

.choicesSelection {
    gap: 25px;
    margin-top: 24px;
    flex-wrap: wrap
}

.choicesSelection div {
    background-color: rgba(43, 43, 43, .05);
    border-radius: 20px;
    padding: 4px 16px 8px;
    transition: .3s;
    white-space: nowrap;
    font-size: 16px
}

.choicesSelection div:hover {
    background-color: #dcdcdc
}

.contactFormContainerChoicesGroup {
    margin-bottom: 75px
}

.gridContactForm input {
    display: block;
    width: 100%;
    height: 48px
}

.submitInputContactForm {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 50px
}

.submitInputContactForm input {
    display: block;
    background-color: #cfda5b;
    font-size: 20px;
    padding: 8px 32px 16px;
    width: 100%;
    border-radius: 100px
}

.gridContactForm input,
textarea {
    outline: transparent 1px;
    padding: 8px 16px 12px;
    resize: vertical;
    background-color: rgba(43, 43, 43, .05);
    border: 1px solid rgba(43, 43, 43, .1);
    font-family: 'Regulator Nova', sans-serif;
    font-style: normal;
    font-weight: 500;
    border-radius: 20px;
    transition: .3s;
    font-size: 16px;
    line-height: 124%
}

.gridContactForm input:focus,
textarea:focus {
    outline: rgba(43, 43, 43, 1) solid 1px
}

.gridContactForm {
    display: grid;
    margin-top: 30px;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px
}

.testimonials-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 180px 100px;
    gap: 64px
}

.testimonials-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    width: 100%;
    height: 100%
}

.testimonials-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    width: 100%
}

.carousel-logo,
.testimonials-logo {
    flex: none;
    order: 0;
    flex-grow: 0
}

.logo-placeholder {
    width: 201px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden
}

.logo-placeholder img {
    width: 100%;
    height: 100%
}

.testimonials-text {
    width: 1240px;
    height: 450px;
    font-family: 'Regulator Nova', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 42px;
    line-height: 124%;
    text-align: center;
    color: #2b2b2b;
    flex: none;
    order: 1;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 24px;
    transition: .5s;
    opacity: 1
}

.testimonials-text.changing {
    opacity: .3
}

.testimonials-text p {
    margin: 0;
    max-width: 1240px
}

.client-avatars {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 64px;
    width: 626px;
    height: 74px;
    flex: none;
    order: 2;
    flex-grow: 0
}

.avatar-item {
    width: 74px;
    height: 74px;
    flex: none;
    flex-grow: 0
}

.avatar-placeholder {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    opacity: .64;
    overflow: hidden;
    background: #f0f0f0;
    transition: .3s
}

.avatar-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.avatar-item.active .avatar-placeholder {
    opacity: 1;
    border: 3px solid #cfda5b;
    box-sizing: border-box;
    transform: scale(1.1);
    transition: .3s
}

.avatar-item .avatar-placeholder {
    transition: .3s
}

.avatar-item:hover .avatar-placeholder {
    opacity: .8;
    transform: scale(1.05)
}

@media (max-width:1280px) {
    .testimonials-section {
        width: 100%;
        margin: auto;
        max-width: 1240px;
        padding: 50px
    }

    .testimonials-text {
        width: 100%;
        font-size: 36px
    }
}

@media (max-width:1024px) {
    .work-container {
        padding: 50px 58px
    }

    .project-image::before {
        animation: 8s infinite changeBg
    }

    .project-card-container {
        margin-top: 120px;
        gap: 70px
    }

    .expertise-info-header h3,
    .project-name {
        font-size: 36px
    }

    .expertise-container {
        padding: 100px 58px
    }

    .expertise-title {
        font-size: 70px
    }

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

    .expertise-info {
        gap: 60px
    }

    .expertise-info-description,
    .expertise-info-header span {
        font-size: 18px
    }

    .testimonials-section {
        gap: 48px;
        height: auto;
        padding: 80px 60px
    }

    .contactContainerLeftCol h1 {
        font-size: 40px
    }

    .contactContainer {
        column-gap: 30px;
        padding: 50px
    }

    .testimonials-container,
    .testimonials-content {
        gap: 48px
    }

    .testimonials-text {
        font-size: 32px;
        height: auto
    }

    .client-avatars {
        gap: 48px;
        width: auto
    }

    .avatar-item,
    .avatar-placeholder {
        width: 60px;
        height: 60px
    }
}

@media screen and (max-width:520px) {
    .contactContainerLeftCol h1 {
        font-size: 30px
    }

    .mobileCarousel {
        display: block
    }

    .desktopCarousel {
        display: none
    }

    .contactContainer {
        column-gap: 30px;
        padding: 50px 20px
    }
}

.parteners-company {
    padding: 180px 0;
    overflow: hidden;
    position: relative;
    background-color: #fff
}

@media (max-width:768px) {
    .work-container {
        padding: 80px 30px
    }

    .moreWorkTitle h1 {
        padding: 0 20px;
        margin-bottom: 80px
    }

    .project-card-reverse {
        margin-top: 80px !important
    }

    .projectsAtProjects .project-card-container {
        margin-top: 0
    }

    .project-card-container {
        flex-direction: column;
        margin-top: 80px;
        gap: 70px
    }

    .project-card {
        height: 350px;
        width: 100%;
        margin: 10% auto
    }

    .project-overlay {
        padding: 24px
    }

    .expertise-info-header h3,
    .project-name {
        font-size: 32px
    }

    .project-arrow {
        bottom: 24px;
        right: 24px;
        width: 40px;
        height: 40px
    }

    .project-arrow img {
        width: 20px;
        height: 20px
    }

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

    .tag {
        font-size: 13px;
        padding: 6px 14px
    }

    .expertise-container {
        padding: 80px 20px
    }

    .expertise-content {
        gap: 32px;
        text-align: center;
        align-items: center
    }

    .expertise-title {
        font-size: 50px;
        text-align: start
    }

    .expertise-description {
        font-size: 20px;
        max-width: 100%;
        text-align: start
    }

    .expertise-info {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 40px;
        text-align: left
    }

    .expertise-info-description,
    .expertise-info-header span {
        font-size: 16px
    }

    .testimonials-section {
        gap: 40px;
        padding: 60px 30px;
        width: 100%;
        max-width: none
    }

    .gridContactForm {
        grid-template-columns: 1fr 1fr
    }

    .gridContactForm .fullWidthInput {
        grid-column: auto
    }

    .testimonials-container,
    .testimonials-content {
        gap: 40px
    }

    .testimonials-text {
        font-size: 22px;
        width: 100%;
        height: 300px
    }

    .logo-placeholder {
        width: 150px;
        height: 16px
    }

    .client-avatars {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        height: auto
    }

    .avatar-item,
    .avatar-placeholder {
        width: 50px;
        height: 50px
    }

    .parteners-company {
        padding: 80px 0
    }

    .parteners-company .parteners-item {
        width: 160px;
        height: 100px
    }
}

@media (max-width:480px) {
    .mobile-availability {
        width: 28px;
        height: 28px
    }

    .nav-right {
        padding: 6px;
        border-color: rgba(244, 240, 236, .3)
    }

    .banner-container {
        min-height: 450px;
        padding: 0 15px
    }

    .banner-image {
        position: absolute;
        top: 35%
    }

    .banner-image img {
        height: auto;
        object-fit: contain;
        max-width: 85vw;
        max-height: 60vh
    }

    .banner-content {
        position: absolute;
        bottom: -75px;
        width: 100vw;
        left: 0;
        height: 100%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px
    }

    .banner-content h2 {
        font-size: 36px;
        padding-top: 5px;
        position: absolute;
        top: 5%
    }

    .banner-container p {
        font-size: 18px;
        line-height: 135%;
        position: absolute;
        top: 65%;
        max-width: 90vw
    }

    .top-rated {
        right: 0;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 250px
    }

    .top-rated img {
        width: auto;
        height: 130px
    }

    .about-container,
    .expertise-container,
    .mainSectionProjectsContainer,
    .work-container {
        padding: 80px 20px
    }

    .projectsAtProjects {
        padding: 0 20px
    }

    .top-rated .child h1 {
        font-size: 12px
    }

    .top-rated .child {
        height: 130px;
        width: 130px
    }

    .mobile-logo {
        max-height: 36px;
        left: 20px !important;
        top: 30px !important
    }

    .hand {
        right: 20px !important;
        top: 20px !important
    }

    .about-container .about-text {
        font-size: 22px;
        line-height: 140%
    }

    .about-container .upwork-text {
        font-size: 24px;
        padding: 40px 0 60px
    }

    .about-container h2 span,
    .mainSectionProjectsContainer h4 {
        font-size: 24px
    }

    .project-card-container {
        margin-top: 60px;
        gap: 0
    }

    .project-card {
        height: 280px
    }

    .project-overlay {
        padding: 20px
    }

    .project-name {
        font-size: 25px
    }

    .tag {
        font-size: 12px;
        padding: 5px 12px
    }

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

    .expertise-content {
        gap: 28px
    }

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

    .expertise-description {
        font-size: 24px;
        line-height: 135%
    }

    .expertise-info {
        gap: 60px
    }

    .expertise-info-header h3 {
        font-size: 28px
    }

    .expertise-info-header span {
        font-size: 15px
    }

    .expertise-info-description {
        font-size: 18px
    }

    .about-container-stats div img {
        width: 250px
    }

    .testimonials-section {
        gap: 32px;
        padding: 80px 20px
    }

    .gridContactForm {
        grid-template-columns: 1fr;
        text-align: center
    }

    .choicesSelection {
        align-items: left;
        justify-content: left
    }

    .submitInputContactForm {
        justify-content: left
    }

    .testimonials-container,
    .testimonials-content {
        gap: 32px
    }

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

    .logo-placeholder {
        width: 120px;
        height: 30px
    }

    .client-avatars {
        gap: 24px
    }

    .avatar-item,
    .avatar-placeholder {
        width: 44px;
        height: 44px
    }

    .parteners-company {
        padding: 100px 0
    }

    .parteners-company .parteners-item {
        width: 140px;
        height: 90px
    }
}

.marquee-wrapper {
    overflow: hidden;
    white-space: nowrap
}

.marquee-content {
    display: inline-flex;
    animation: 25s linear infinite marquee;
    gap: 30px;
    width: 300vw;
    padding: 0 15px
}

.parteners-company .parteners-item {
    flex: 1;
    height: 120px;
    filter: grayscale(100%) contrast(120%) brightness(90%);
    border-radius: 16px;
    transition: .3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0
}

@media screen and (max-width:600px) {
    .marquee-content {
        width: 400vw
    }
}

@media screen and (max-width:450px) {
    .marquee-content {
        width: 600vw
    }
}

.parteners-company .parteners-item:hover {
    filter: grayscale(0%) contrast(100%) brightness(100%)
}

.parteners-company .parteners-item img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.marquee-content:hover {
    animation-play-state: paused
}

.speak-with-me-section {
    background: #cfda5b
}

.speak-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 180px 100px;
    gap: 140px;
    margin: 0 auto
}

.speak-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    gap: 140px
}

.speak-header,
.speak-left,
.speak-right {
    gap: 24px;
    display: flex
}

.speak-left {
    flex-direction: column;
    flex: 1;
    align-items: flex-start
}

.speak-header {
    flex-direction: row;
    align-items: center;
    width: 100%
}

.speak-avatar {
    width: 74px;
    height: 74px;
    /* background: url('assets/vuspeak_result.avif') top/cover, top/cover #000f27; */
    border-radius: 50%;
    flex: none
}

.speak-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    aspect-ratio: 2/3
}

.speak-title {
    font-family: Alias, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 42px;
    line-height: 100%;
    color: #2b2b2b;
    flex: 1
}

.speak-description {
    font-family: 'Regulator Nova', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 124%;
    color: #2b2b2b;
    width: 100%
}

.contact-badge a,
.contact-feature {
    font-family: 'Regulator Nova', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 124%
}

.speak-right {
    flex-direction: column;
    align-items: center;
    flex: 1
}

.contact-badge a {
    padding: 8px 42px 16px;
    border-radius: 100px;
    border: 1px solid rgba(43, 43, 43, .1);
    background: #2b2b2b;
    font-feature-settings: 'salt' on, 'ordn' on;
    color: #f4f0ec;
    transition: .3s
}

.contact-badge a:hover {
    background-color: rgba(43, 43, 43, .2)
}

.contact-features {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin-top: 30px
}

.contact-feature {
    color: #2b2b2b;
    width: 100%;
    margin: 0
}

.carousel-text-header h3,
.experience-tag {
    font-style: normal;
    font-feature-settings: 'salt' on
}

@media (max-width:1200px) {
    .speak-container {
        padding: 80px 60px;
        gap: 80px
    }

    .speak-content {
        gap: 80px
    }

    .speak-left {
        width: 100%;
        max-width: 500px
    }

    .speak-right {
        width: 100%;
        max-width: 400px
    }

    .speak-title {
        font-size: 36px
    }

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

@media (max-width:868px) {
    .speak-with-me-section {
        margin-bottom: 0
    }

    .speak-container {
        padding: 80px 20px;
        gap: 40px
    }

    .speak-content {
        flex-direction: column;
        gap: 60px 40px;
        align-items: flex-start
    }

    .speak-left,
    .speak-right {
        width: 100%
    }

    .speak-header {
        flex-direction: row;
        align-items: center;
        gap: 16px
    }

    .speak-avatar {
        width: 60px;
        height: 60px
    }

    .speak-title {
        font-size: 28px;
        text-align: left
    }

    .speak-description {
        font-size: 18px;
        line-height: 135%
    }

    .contact-badge {
        width: 100%;
        display: flex;
        justify-content: center
    }

    .contact-badge span {
        font-size: 18px
    }

    .contact-feature {
        font-size: 16px;
        line-height: 135%
    }
}

.experience-tag {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 32px 32px 22px;
    gap: 10px;
    background: rgba(207, 218, 91, .05);
    border: 1px solid rgba(207, 218, 91, .1);
    border-radius: 100px;
    font-family: Alias, sans-serif;
    font-weight: 400;
    font-size: 42px;
    line-height: 100%;
    color: #cfda5b;
    white-space: nowrap;
    z-index: -90
}

@media (max-width:1440px) {
    .experience-section {
        padding: 120px 40px;
        gap: 100px
    }

    .experience-title {
        font-size: 80px;
        z-index: 20
    }

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

    .experience-tag {
        font-size: 36px;
        padding: 28px 28px 20px;
        z-index: 1
    }
}

.gallery-section {
    width: 100%;
    padding: 180px 0 0;
    background-color: transparent
}

.gallery-title-container {
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 0 100px;
    height: 150px;
    position: sticky;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto
}

.gallery-title {
    font-family: Alias, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 80px;
    line-height: 100%;
    text-align: center;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #2b2b2b;
    margin: 0
}

.bestDo h1,
.carousel-text-header h3,
.singleTopic {
    font-family: Alias;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -.02em;
    text-transform: uppercase
}

.sticky-gallery-container {
    position: relative;
    width: 100%
}

.selectedChoiceContact {
    background-color: #000 !important;
    color: #fff
}

.sticky-gallery-content {
    position: sticky;
    top: 0;
    height: calc(80vh + 200px);
    display: flex;
    padding-top: 200px;
    padding-bottom: 200px;
    justify-content: center;
    align-items: center;
    z-index: 10
}

.gallery-image-stack {
    position: relative;
    width: 824px;
    height: 526px
}

.gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 824px;
    height: 526px;
    overflow: hidden;
    transition: 1.2s cubic-bezier(.16, 1, .3, 1);
    transform-origin: center center
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0
}

.gallery-image[data-image="1"] {
    opacity: 1;
    z-index: 5;
    transition-delay: 0s
}

.gallery-image[data-image="2"] {
    opacity: 1;
    z-index: 6;
    transition-delay: 0.1s
}

.gallery-image[data-image="3"] {
    opacity: 1;
    z-index: 7;
    transition-delay: 0.2s
}

.gallery-image[data-image="4"] {
    transform: translateY(120vh) rotate(-20deg) scale(.8);
    opacity: 1;
    z-index: 8;
    transition-delay: 0.3s
}

.gallery-image[data-image="5"],
.gallery-image[data-image="6"] {
    transform: translateY(120vh) rotate(25deg) scale(.8);
    opacity: 1;
    transition-delay: 0.4s
}

.gallery-image[data-image="5"] {
    z-index: 9
}

.gallery-image[data-image="6"] {
    z-index: 10
}

.gallery-image.active {
    transform: translate(0, 0) rotate(0) scale(1) !important;
    opacity: 1 !important;
    transition-delay: 0s !important
}

.gallery-image.inactive {
    z-index: 5 !important;
    opacity: 1 !important
}

.gallery-image[data-image="1"].inactive {
    transform: rotate(-.5deg) translate(-10px, -15px) !important
}

.gallery-image[data-image="2"].inactive {
    transform: rotate(1deg) translate(-15px, -25px) !important
}

.gallery-image[data-image="3"].inactive {
    transform: rotate(-.75deg) translate(-20px, -35px) !important
}

.gallery-image[data-image="4"].inactive {
    transform: rotate(.75deg) translate(-25px, -45px) !important
}

.gallery-image[data-image="5"].inactive {
    transform: rotate(-1deg) translate(-30px, -55px) !important
}

.gallery-spacer {
    height: 600vh
}

.carousel-section {
    position: relative;
    width: 100vw;
    height: 200vh;
    margin: 0;
    padding: 0
}

.carousel-container,
.carousel-slide {
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    top: 0
}

.carousel-container {
    position: sticky;
    margin: 0;
    padding: 0;
    overflow-x: hidden
}

.carousel-slide {
    left: 0;
    border-radius: 0
}

.carousel-slide:first-child {
    z-index: 2
}

.carousel-slide:last-child {
    z-index: 1;
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.25, .46, .45, .94)
}

.spacer {
    height: 180px
}

.carousel-background {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
    transition: transform 1s cubic-bezier(.25, .46, .45, .94);
    overflow: hidden
}

.carousel-content {
    position: relative;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 100px
}

.carousel-content-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    gap: 64px;
    width: 512px;
    height: 259px;
    flex: none;
    order: 0;
    flex-grow: 0
}

.carousel-logo img {
    width: 220px;
    background: url(image_result.avif);
    flex: none;
    order: 0;
    flex-grow: 0
}

.carousel-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0
}

.carousel-text-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin-bottom: 2rem
}

.carousel-text-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 8px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0
}

.carousel-text-header h3 {
    width: 512px;
    font-size: 80px;
    color: #f4f0ec;
    margin: 0;
    flex: none;
    order: 0;
    flex-grow: 1
}

@media screen and (max-width:768px) {
    .spinner::after {
        width: 350px
    }

    .marginImageCovertext {
        left: 20px;
        bottom: 20px;
        width: calc(100% - 40px);
        padding: 24px
    }

    .marginImageCovertext h1 {
        width: 100%;
        font-size: 18px
    }

    .mainImgSingle {
        margin-top: -200px;
        height: 350px
    }

    .cardRow {
        margin-top: 50px
    }

    .spinner,
    .spinner img {
        width: 250px
    }

    .carousel-text-header h3 {
        font-size: 42px
    }
}

.bestDo {
    min-height: 100vh;
    padding: 180px 100px;
    background-color: #100e0e
}

.bestDo h1 {
    font-size: 80px;
    text-align: center;
    margin-bottom: 140px;
    color: #f4f0ec
}

.bestTopicsRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap
}

.singleTopic {
    background-color: rgba(207, 218, 91, .05);
    border-radius: 100px;
    padding: 32px 32px 22px;
    font-size: 42px;
    border: 1px solid rgba(207, 218, 91, .1);
    text-align: center;
    color: #cfda5b
}

.carousel-text-item p,
.centered-text {
    font-family: 'Regulator Nova';
    font-style: normal;
    font-weight: 500;
    line-height: 124%;
    font-feature-settings: 'ordn' on, 'salt' on
}

.singleTopic:hover {
    transform: rotate(0)
}

.carousel-text-item p {
    width: 512px;
    height: 25px;
    font-size: 20px;
    color: #f4f0ec;
    opacity: .8;
    margin: 0;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0
}

@media (max-width:1200px) {

    .carousel-content-inner,
    .carousel-text-content,
    .carousel-text-item,
    .carousel-text-item p {
        height: auto;
        width: 400px
    }

    .carousel-content {
        padding: 0 50px
    }

    .carousel-content-inner {
        gap: 48px
    }

    .carousel-text-content {
        gap: 24px
    }

    .carousel-text-header {
        width: 400px
    }

    .carousel-text-header h3 {
        width: 400px;
        font-size: 36px
    }

    .spacer {
        height: 100px
    }
}

.centered-text-section,
.large-heading-section {
    flex-direction: column;
    box-sizing: border-box;
    display: flex
}

.centered-text-section {
    align-items: flex-start;
    padding: 0 100px;
    gap: 80px;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 312px;
    margin: 10vh auto 0;
    background: #000
}

.centered-text-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 10px;
    width: 100%;
    height: auto;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0 auto
}

.centered-text-content {
    width: 100%;
    height: auto;
    flex: none;
    order: 0;
    flex-grow: 0
}

.centered-text {
    width: 100%;
    font-size: 42px;
    color: #2b2b2b;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0
}

.second-text {
    margin-top: 32px
}

.large-heading-section {
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    text-align: center;
    margin-top: 50px
}

.large-heading,
.large-heading-description {
    text-align: start;
    height: auto;
    color: #2b2b2b;
    width: 100%
}

.large-heading-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 auto
}

.footer,
.footer-container {
    gap: 140px;
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex
}

.footer-tagline h2,
.large-heading {
    text-transform: uppercase;
    margin: 0;
    font-style: normal;
    letter-spacing: -.02em
}

.large-heading {
    font-family: Alias;
    font-weight: 400;
    font-size: 80px;
    line-height: 100%;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0
}

.large-heading-description {
    max-width: 70%;
    font-family: 'Regulator Nova';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 124%;
    font-feature-settings: 'ordn' on, 'salt' on;
    flex: none;
    order: 1;
    flex-grow: 0
}

@media (max-width:1024px) {
    .gallery-title-container {
        padding: 0 60px
    }

    .gallery-image-stack {
        width: 90%;
        height: 100%
    }

    .gallery-image {
        width: 100%;
        height: 100%
    }

    .gallery-image[data-image="1"] {
        transform: translateY(-120vh) rotate(25deg) scale(.8)
    }

    .gallery-image[data-image="2"] {
        transform: translateY(120vh) rotate(-25deg) scale(.8)
    }

    .gallery-image[data-image="3"] {
        transform: translateY(120vh) rotate(20deg) scale(.8)
    }

    .gallery-image[data-image="4"] {
        transform: translateY(120vh) rotate(-20deg) scale(.8)
    }

    .gallery-image[data-image="5"] {
        transform: translateY(120vh) rotate(15deg) scale(.8)
    }

    .centered-text-section {
        padding: 0 60px;
        margin-top: 8vh
    }

    .speak-container {
        align-items: center
    }

    .speak-content {
        flex-direction: column;
        align-items: center
    }

    .centered-text {
        font-size: 36px
    }

    .large-heading-section {
        margin-top: 200px
    }

    .large-heading {
        font-size: 80px
    }

    .large-heading-description {
        font-size: 24px
    }
}

@media (max-width:768px) {
    .experience-section {
        padding: 80px 20px;
        gap: 60px
    }

    .experience-container {
        flex-direction: column
    }

    .experience-title {
        font-size: 48px;
        z-index: 20
    }

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

    .carousel-slide,
    .experience-tags {
        height: 100vh
    }

    .sticky-gallery-content {
        top: 10vh;
        height: 70vh
    }

    .gallery-title-container {
        padding: 0 30px;
        height: 120px
    }

    .gallery-title {
        font-size: 50px
    }

    .gallery-image,
    .gallery-image-stack {
        width: 90vw;
        max-width: 450px;
        height: 60vw;
        max-height: 280px
    }

    .gallery-spacer {
        height: 600vh
    }

    .gallery-image[data-image="1"] {
        transform: translateY(120vh) rotate(25deg) scale(.8)
    }

    .gallery-image[data-image="2"] {
        transform: translateY(120vh) rotate(-25deg) scale(.8)
    }

    .gallery-image[data-image="3"] {
        transform: translateY(120vh) rotate(20deg) scale(.8)
    }

    .gallery-image[data-image="4"] {
        transform: translateY(120vh) rotate(-20deg) scale(.8)
    }

    .gallery-image[data-image="5"] {
        transform: translateY(120vh) rotate(15deg) scale(.8)
    }

    .carousel-section {
        height: 200vh
    }

    .singleTopic {
        font-size: 24px;
        padding: 24px 32px 14px
    }

    .carousel-container {
        margin: 0;
        height: 100vh
    }

    .carousel-content {
        padding: 0 20px
    }

    .carousel-content-inner {
        width: 100%;
        height: auto;
        gap: 32px;
        text-align: left;
        align-items: flex-start
    }

    .carousel-logo img {
        width: 120px;
        height: auto
    }

    .carousel-text-content {
        width: 100%;
        height: auto;
        gap: 24px
    }

    .carousel-text-item {
        width: 100%;
        height: auto;
        margin-bottom: 1.5rem
    }

    .carousel-text-header {
        width: 100%
    }

    .carousel-text-header h3 {
        width: 100%;
        font-size: 28px
    }

    .carousel-text-item p {
        width: 100%;
        height: auto;
        font-size: 16px;
        line-height: 140%
    }

    .carousel-background {
        background-attachment: scroll
    }

    .spacer {
        height: 80px
    }

    .centered-text-section {
        padding: 0 30px;
        margin-top: 6vh;
        gap: 40px
    }

    .bestDo h1 {
        font-size: 40px;
        margin-bottom: 60px
    }

    .centered-text {
        font-size: 28px;
        line-height: 135%;
        text-align: left
    }

    .second-text {
        margin-top: 24px
    }

    .large-heading-section {
        margin-top: 150px;
        text-align: center;
        align-items: center
    }

    .large-heading {
        font-size: 60px;
        text-align: center
    }

    .large-heading-description {
        font-size: 20px;
        line-height: 135%;
        text-align: center
    }
}

@media (max-width:480px) {
    .experience-title {
        font-size: 36px
    }

    .experience-description {
        font-size: 18px
    }

    .experience-tag {
        font-size: 24px;
        padding: 16px 20px 12px
    }

    .gallery-image,
    .gallery-image-stack {
        width: 85vw;
        max-width: 300px
    }

    .sticky-gallery-content {
        top: 10vh
    }

    .gallery-title-container {
        padding: 0 20px;
        height: 80px
    }

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

    .gallery-image-stack {
        height: 55vw;
        max-height: 180px
    }

    .gallery-spacer {
        height: 600vh
    }

    .gallery-image[data-image="1"] {
        transform: translateY(120vh) rotate(25deg) scale(.8)
    }

    .gallery-image[data-image="2"] {
        transform: translateY(120vh) rotate(-25deg) scale(.8)
    }

    .gallery-image[data-image="3"] {
        transform: translateY(120vh) rotate(20deg) scale(.8)
    }

    .gallery-image[data-image="4"] {
        transform: translateY(120vh) rotate(-20deg) scale(.8)
    }

    .gallery-image[data-image="5"] {
        transform: translateY(120vh) rotate(15deg) scale(.8)
    }

    .carousel-section {
        height: 100vh
    }

    .carousel-container {
        margin-top: 80px;
        height: 80vh
    }

    .carousel-slide {
        height: 80vh
    }

    .carousel-content-inner {
        gap: 24px
    }

    .carousel-logo img {
        width: 100px;
        height: auto
    }

    .carousel-text-header h3 {
        font-size: 24px
    }

    .carousel-text-item p {
        font-size: 15px
    }

    .carousel-text-item {
        margin-bottom: 1.2rem
    }

    .spacer {
        height: 60px
    }

    .centered-text-section {
        padding: 0 20px;
        margin-top: 5vh;
        gap: 30px
    }

    .centered-text {
        font-size: 22px;
        line-height: 140%
    }

    .second-text {
        margin-top: 20px
    }

    .large-heading-section {
        margin-top: 80px
    }

    .gallery-section {
        padding: 80px 0 0
    }

    .large-heading {
        font-size: 40px !important;
        line-height: 95%
    }

    .large-heading-description {
        font-size: 18px;
        line-height: 140%
    }
}

.footer-cta,
.footer-link {
    font-family: Alias;
    font-weight: 400;
    font-size: 42px;
    line-height: 100%;
    text-decoration: none;
    transition: .5s
}

.footer {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    background: #100e0e;
    padding: 80px 100px 40px
}

.footer-container {
    flex-direction: column;
    width: 100%;
    height: 100%
}

.footer-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    gap: 80px;
    height: auto;
    min-height: 184px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    box-sizing: border-box;
    overflow-x: hidden
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
    gap: 42px;
    width: 566px;
    flex: none;
    order: 0;
    flex-grow: 0
}

.footer-tagline h2 {
    width: 566px;
    font-family: Alias;
    font-weight: 400;
    font-size: 60px;
    line-height: 100%;
    color: #f8f8f8;
    flex: none;
    order: 0;
    flex-grow: 0
}

.footer-cta {
    font-style: normal;
    background: 0 0;
    display: inline-block;
    border: none;
    letter-spacing: -.02em;
    position: relative;
    color: #fff;
    margin: 42px 0 0
}

.footer-cta:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    height: 2px;
    width: 0;
    transition: .5s;
    background-color: #cfda5b
}

.test1 {
    background-color: red;
    color: #000
}

.footer-bottom p,
.footer-link {
    text-transform: uppercase;
    color: #f8f8f8
}

@media screen and (min-width:1024px) {
    .hand:hover {
        width: 130px
    }

    .hand:hover p {
        visibility: visible;
        opacity: 1;
        font-weight: bolder;
        width: 90px
    }

    .follower::after {
        content: '';
        position: fixed;
        width: 30px;
        height: 30px;
        background-color: #cfda5b;
        border-radius: 50%;
        mix-blend-mode: difference;
        pointer-events: none;
        transform: translate(var(--x, -50px), var(--y, 0));
        transition: transform 50ms linear;
        z-index: 999999
    }
}

.footer-cta:hover::after {
    left: 0;
    width: 100%
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.footer-bottom img {
    width: 100%;
    height: auto;
    min-height: 135px
}

.footer-bottom p {
    font-family: 'Regulator Nova';
    font-weight: 500;
    font-style: Medium;
    font-size: 28px;
    line-height: 124%;
    letter-spacing: 0;
    margin-top: 40px
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.footer-link {
    font-style: expanded;
    letter-spacing: -2%;
    padding: 16px 0
}

@media (max-width:1440px) {
    .centered-text-section {
        max-width: 100%;
        padding: 0 50px
    }

    .centered-text-container,
    .large-heading-container {
        width: 100%;
        max-width: 1240px
    }

    .centered-text-content,
    .footer-bottom,
    .footer-content,
    .footer-cta,
    .footer-tagline,
    .large-heading,
    .large-heading-description {
        width: 100%
    }

    .footer-cta,
    .footer-link {
        font-size: 36px
    }

    .footer {
        left: 0;
        position: relative;
        padding: 80px 60px 40px
    }

    .footer-container {
        gap: 120px
    }

    .footer-tagline h2 {
        width: 100%;
        font-size: 36px;
        height: auto
    }

    .footer-bottom {
        max-width: calc(100vw - 120px)
    }
}

@media (max-width:1024px) {
    .footer {
        padding: 60px 40px 30px;
        height: auto;
        width: 100vw;
        max-width: 100vw
    }

    .footer-bottom,
    .footer-content {
        width: 100%;
        max-width: calc(100vw - 80px)
    }

    .footer-content {
        flex-direction: column;
        gap: 60px;
        height: auto;
        align-items: center
    }

    .footer-left {
        margin: 0;
        height: auto
    }

    .footer-tagline {
        width: 100%
    }

    .footer-tagline h2 {
        font-size: 32px;
        text-align: center;
        width: 100%
    }

    .footer-cta {
        font-size: 32px;
        height: auto;
        padding-bottom: 12px;
        width: 100%
    }

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

    .footer-container {
        gap: 60px
    }
}

@media (max-width:768px) {
    .centered-text-section {
        height: auto;
        padding: 40px 20px
    }

    .large-heading-section {
        height: auto
    }

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

    .large-heading {
        text-align: left;
        font-size: 60px;
        height: auto
    }

    .large-heading-description {
        max-width: 100%;
        text-align: left;
        font-size: 24px;
        height: auto;
        width: 100%
    }

    .footer {
        padding: 40px 20px 20px;
        width: 100vw;
        max-width: 100vw
    }

    .footer-bottom,
    .footer-content {
        width: 100%;
        max-width: calc(100vw - 40px)
    }

    .footer-right,
    .footer-tagline {
        width: 100%
    }

    .footer-container,
    .footer-content {
        gap: 40px
    }

    .footer-left {
        gap: 30px;
        width: 100%
    }

    .footer-tagline h2 {
        font-size: 28px;
        width: 100%;
        line-height: 115%
    }

    .footer-cta {
        font-size: 20px;
        width: 100%;
        text-align: start
    }

    .footer-bottom p {
        font-size: 22px;
        margin-top: 0
    }

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

@media (max-width:480px) {
    .footer {
        padding: 60px 15px 15px;
        width: 100vw;
        max-width: 100vw
    }

    .contact-badge a {
        width: 100%;
        text-align: center
    }

    .footer-content {
        gap: 60px;
        width: 100%;
        max-width: calc(100vw - 30px)
    }

    .footer-left {
        gap: 24px;
        width: 100%
    }

    .footer-tagline {
        width: 100%
    }

    .footer-tagline h2 {
        font-size: 40px;
        line-height: 110%;
        text-align: start;
        width: 100%
    }

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

    .footer-container {
        gap: 20px
    }
}

@media (max-width:375px) {

    .about-container .about-text,
    .about-container .upwork-text,
    .banner-content h2 {
        font-size: 32px
    }

    .banner-container p {
        font-size: 16px
    }

    .centered-text,
    .testimonials-text {
        font-size: 20px
    }

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

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

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

    .footer {
        padding: 60px 20px 30px;
        gap: 35px;
        overflow: hidden
    }

    .footer-left {
        gap: 20px
    }
}

@media (max-width:320px) {
    .footer {
        padding: 20px 10px 10px;
        width: 100vw;
        max-width: 100vw;
        border-radius: 16px 16px 0 0
    }

    .footer-content {
        gap: 20px;
        width: 100%;
        max-width: calc(100vw - 20px)
    }

    .footer-left {
        gap: 16px;
        width: 100%
    }

    .footer-tagline h2 {
        font-size: 18px;
        line-height: 100%
    }
}

.sticky {
    position: sticky
}

.top-0 {
    top: 0
}

.h-screen {
    height: 100vh
}

.flex-col {
    flex-direction: column
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.bg-gradient-to-b {
    background: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-to))
}

.from-indigo-800 {
    --tw-gradient-from: #3730a3;
    --tw-gradient-to: transparent
}

.to-purple-800 {
    --tw-gradient-to: #6b21a8
}

.text-white {
    color: #fff
}

.bg-gradient-to-b.from-indigo-800.to-purple-800 {
    background: linear-gradient(to bottom, #3730a3, #6b21a8)
}