@font-face {
    font-family: "SFRegular";
    src: url("/wp-content/themes/wptheme-main/css/font/SFPRODISPLAYREGULAR.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SFBold";
    src: url("/wp-content/themes/wptheme-main/css/font/SFPRODISPLAYBOLD.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

a {
    cursor: pointer;
    text-decoration: none
}

html {
    margin-top: 0 !important;
    background-color: #000
}

h1,
h2,
h3,
h4,
h5,
a,
li,
div,
input,
p,
span,
button {
    font-family: "SFRegular"
}

b {
    font-family: "SFBold"
}

div#wpadminbar {
    display: none
}

.container-big {
    max-width: 102.9375rem;
    padding-left: 10.1875rem;
    padding-right: 4.875rem;
    margin: 0 auto
}

.container {
    max-width: 99.6875rem;
    margin: 0 auto
}

.container-form {
    max-width: 115.25rem;
    margin: 0 auto
}

.logo img {
    width: 10.5rem
}

header {
    padding: 1.5625rem 0;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

header .btn_row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center
}

.hero__screen {
    background: url("/wp-content/uploads/2025/03/Group-1000003471-2-1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom
}

.burger {
    display: none
}

section.burger-menu {
    display: none
}

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

.btn {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
    border-radius: 2.88rem;
    padding: 1.25rem 2.5rem;
    background-color: #1c1d23;
    transition: .3s all ease
}

.btn:hover {
    background-color: #181818;
    transition: .3s all ease
}

.btn-white {
    background-color: #fff;
    color: #1c1d23
}

.btn-white:hover {
    background-color: #dd005d;
    color: #fff;
    transition: .3s all ease
}

.btn-pink {
    background-color: #dd005d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    position: relative;
    padding: 2rem 4rem;
    font-size: 1.5rem
}

.btn-pink:hover {
    background-color: #fff;
    color: #000;
    transition: .3s all ease
}

.btn-pink:hover img {
    filter: invert(1)
}

.btn-pink img {
    width: .8125rem;
    -o-object-fit: contain;
    object-fit: contain
}

.btn__container {
    position: relative
}

.btn__container::before {
    position: absolute;
    content: "";
    background-image: url(/wp-content/uploads/2025/03/Rectangle-40229.png);
    width: 16.25rem;
    height: 8.0625rem;
    bottom: -4rem;
    left: -2rem;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto
}

.btn__row {
    position: relative
}

.btn__row::before {
    position: absolute;
    content: "";
    background-image: url(/wp-content/uploads/2025/03/Rectangle-40229.png);
    width: 16.25rem;
    height: 8.0625rem;
    bottom: -4rem;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: cover;
    margin: auto
}

.back-white {
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    background: #fff
}

.menu__row {
    display: flex;
    gap: 1rem
}

.social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.social a {
    padding: 1.25rem;
    border-radius: 100%;
    background-color: #1c1d23;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero__screen {
    padding-top: 7.9375rem
}

.hero__screen ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    margin: 3.125rem 0 5.225rem 0
}

.hero__screen ul li {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 200%;
    letter-spacing: -0.01em;
    list-style-type: none;
    color: #8e8e8e
}

.hero__screen h3 {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #8e8e8e
}

.hero__screen h1 {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 40.625rem;
    color: #fff;
    font-weight: 700;
    font-size: 3.62rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    font-family: "SFBold";
    margin: 0
}

.hero__screen h1 span {
    opacity: 0;
    transform: translateY(1.875rem);
    display: inline-block
}

.hero__screen .cols .left__col {
    width: 43%
}

.hero__screen .cols .right__col {
    width: 57%
}

.cols {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start
}

.video-container {
    display: flex;
    justify-content: space-between;
    gap: .625rem
}

video {
    height: 42.375rem;
    width: 14.875rem;
    transition: width .3s ease;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: .75rem
}

.video-container:hover video {
    width: 14.875rem
}

.video-container video:hover {
    width: 27.875rem
}

.video-container video.active {
    width: 27.875rem
}

.margin-small {
    margin: 3.4375rem auto
}

.margin-big {
    padding: 5.625rem 0
}

@media screen and (max-width: 1600px) {
    html {
        font-size: 12px
    }
}

.advantages__list {
    display: flex;
    gap: 1.1875rem;
    flex-wrap: wrap;
    justify-content: space-between
}

.advantages__list .advantage {
    background: #1d1d1f;
    background: linear-gradient(135deg, #181818 0%, #000 48%, #151515 100%);
    border-radius: 1.5rem;
    padding: 2.8125rem;
    color: #fff;
    position: relative;
    overflow: hidden
}

.advantages__list .advantage:first-child {
    width: 39.375rem
}

.advantages__list .advantage:first-child p {
    max-width: 25.125rem
}

.advantages__list .advantage:first-child::before {
    content: "";
    background: url(/wp-content/uploads/2025/03/Group-1000003471.png);
    position: absolute;
    left: 18rem;
    top: -3rem;
    height: 28.375rem;
    width: 43.25rem;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0
}

.advantages__list .advantage:first-child::after {
    content: "";
    background: url(/wp-content/uploads/2025/09/group_1000003487.webp);
    position: absolute;
    right: -6.5rem;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 10.375rem;
    width: 22.8125rem;
    z-index: 0;
    background-size: cover
}

.advantages__list .advantage:nth-child(2) {
    width: 47.8125rem
}

.advantages__list .advantage:nth-child(2) p {
    max-width: 36.5rem
}

.advantages__list .advantage:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 100%;
    background: #dd005d;
    filter: blur(200px);
    width: 16.625rem;
    height: 16.625rem
}

.advantages__list .advantage:nth-child(2)::after {
    content: "";
    background: url(/wp-content/uploads/2025/09/group_1000003448.webp);
    position: absolute;
    right: -7.5rem;
    top: 0;
    bottom: -2rem;
    margin: auto;
    height: 27.3125rem;
    width: 27.3125rem;
    z-index: 0;
    background-size: contain
}

.advantages__list .advantage:nth-child(3) {
    flex-basis: 31%
}

.advantages__list .advantage:nth-child(3) p {
    max-width: 22.1875rem
}

.advantages__list .advantage:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 7rem;
    right: -8rem;
    border-radius: 100%;
    background: #dd005d;
    filter: blur(100px);
    width: 16.625rem;
    height: 16.625rem;
    z-index: 9
}

.advantages__list .advantage:nth-child(3)::after {
    content: "";
    background: url(/wp-content/uploads/2025/09/Group-1000003450.png);
    position: absolute;
    right: -10.5rem;
    top: 0;
    bottom: -15rem;
    margin: auto;
    height: 20.625rem;
    width: 31.5625rem;
    z-index: 0;
    
    background-size: contain;
}

.advantages__list .advantage:nth-child(4) {
    flex-basis: 18%
}

.advantages__list .advantage:nth-child(4) p {
    max-width: 15.75rem
}

.advantages__list .advantage:nth-child(4)::before {
    content: "";
    position: absolute;
    position: absolute;
    top: 10rem;
    right: -3rem;
    border-radius: 100%;
    background: #dd005d;
    filter: blur(100px);
    width: 14.25rem;
    height: 14.25rem
}

.advantages__list .advantage:nth-child(4)::after {
    content: "";
    background: url(/wp-content/uploads/2025/09/Group-1000003451-1.png);
    position: absolute;
    right: -5.5rem;
    top: 1rem;
    bottom: -9.5rem;
    margin: auto;
    height: 19.9375rem;
    width: 19.9375rem;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0
}

.advantages__list .advantage:nth-child(5) {
    flex-basis: 31%
}

.advantages__list .advantage:nth-child(5) p {
    max-width: 21.1875rem
}

.advantages__list .advantage:nth-child(5)::before {
    content: "";
    position: absolute;
    top: 5rem;
    right: -4rem;
    background: #dd005d;
    filter: blur(100px);
    width: 16.625rem;
    height: 16.625rem
}

.advantages__list .advantage:nth-child(5)::after {
    content: "";
    background: url(/wp-content/uploads/2025/03/Group-1000003452.png);
    position: absolute;
  right: -12.5rem;
    top: 9rem;
    bottom: 0;
    margin: auto;
    height: 27.3125rem;
    width: 30.3125rem;
    z-index: 0;
    background-size: contain;
}

.advantages__list h5 {
    font-weight: 700;
    font-family: "SFBold";
    font-size: 2.12rem;
    line-height: 140%;
    letter-spacing: -0.02em;
    margin: 0;
    z-index: 1;
    color: #fff
}

.advantages__list p {
    font-weight: 400;
    font-size: 1.38rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #787878;
    margin: 0;
    margin-top: .3125rem;
    z-index: 1
}

.advantage {
    height: 13.5rem
}

.scrolling-container {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    position: relative
}

.scrolling-content {
    display: flex;
    gap: 4.25rem;
    animation: scrollLoop 80s linear infinite;
    width: -moz-max-content;
    width: max-content
}

.scroll-container {
    transition: width 1s ease-in-out;
    will-change: width;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scrolling-item img {
    height: 5.8125rem;
    filter: invert(1);
    width: auto
}

span.border-text {
    border: unset
}

.border-text {
    position: relative;
    background: #fff;
    border-radius: 12.5rem;
    margin-left: 1px;
    z-index: 1
}

.border-text::before {
    content: "";
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    right: 0px;
    bottom: -0.5px;
    background: linear-gradient(15deg, #000, #fff);
    border-radius: 12.5rem;
    z-index: -1
}

.slider ul li {
    background: linear-gradient(356deg, #141414 0%, #282828 100%)
}

@keyframes scrollLoop {
    from {
        transform: translateX(0)
    }

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

.scrolling-container:hover .scrolling-content {
    animation-play-state: paused
}

.marquee {
    margin-top: 6.25rem
}

h5 {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #787878;
    margin: 0
}

h3 {
    font-weight: 700;
    font-family: "SFBold";
    font-size: 3.62rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin: 1rem 0
}

.text {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #787878;
    margin: 0
}

.about__cards {
    margin: 2.75rem 0;
    display: flex;
    align-items: center;
    gap: 1.5625rem
}

.about__cards .right__col,
.about__cards .center__col,
.about__cards .left__col {
    width: 100%
}

.about__cards .left__col .about__card {
    height: 32.625rem
}

.about__cards .left__col .about__card p {
    max-width: 23.5rem
}

.about__cards .right__col .about__card {
    height: 32.625rem
}

.about__cards .right__col .about__card p {
    max-width: 100%;
}

.about__cards .center__col {
    display: flex;
    flex-direction: column;
    gap: 1.5625rem
}

.about__cards .center__col .about__card {
    height: 15.3125rem
}

.about__cards .center__col .about__card p {
    max-width: 13.5rem
}

.about__cards .center__col .about__card:last-child {
    height: 18.375rem
}

.about__cards .center__col .about__card:last-child p {
    max-width: 12.5rem;
    z-index: 14;
    position: relative;
}

.about__cards .about__card {
    background: linear-gradient(139deg, #f7f8fd 0%, #e6e5ea 100%);
    border-radius: 1.12rem;
    padding: 2.5rem
}

.about__cards .about__card h5 {
    z-index: 9;
    position: relative;
    font-weight: 700;
    font-family: "SFBold";
    font-size: 2.12rem;
    line-height: 140%;
    letter-spacing: -0.02em;
    margin: 0;
    margin-bottom: .3125rem;
    color: #000
}

.about__cards .about__card p {
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #787878;
    margin: 0
}

.scrolldown-video {
    width: 100%
}

.scroll-container {
    width: 99.6875rem;
    max-width: 100vw;
    margin: 0 auto;
    transition: width .3s ease-out;
    will-change: width;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.letter {
    transition: color .5s ease-in-out;
    will-change: color;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.portfolio__section .colored-animate {
    margin: 28.8125rem 0 10.8125rem 0
}

.scroll-container {
    margin-top: 4.0625rem;
    margin-bottom: -30rem;
    -webkit-overflow-scrolling: touch;
}

.scroll-container video {
    height: 51.5625rem;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0
}

.video-item {
    position: relative
}

.video-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

.video-wrapper .video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s ease-in-out
}

.video-overlay {
    align-items: center;
    justify-content: space-between;
    width: -webkit-fill-available
}

.video-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2.5rem;
    color: #fff;
    opacity: 0;
    display: flex;
    transition: opacity .3s ease-in-out
}

.video-title {
    font-size: 1.5rem;
    margin-bottom: .625rem;
    font-weight: bold;
    font-weight: 700;
    font-family: "SFBold";
    font-size: 1.62rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    margin-top: 0
}

.video-description {
    font-weight: 400;
    font-size: 1.38rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #8e8e8e;
    margin-bottom: 0
}

.video-overlay img {
    width: 7.375rem;
    height: 7.375rem;
    cursor: pointer
}

.video-item:hover .video {
    transform: scale(1.05)
}

.video-item:hover .video-overlay {
    opacity: 1
}

.btn__row {
    display: flex;
    justify-content: center;
    margin-top: 2.8125rem
}

.about__cards .about__card {
    position: relative;
    cursor: pointer
}

.about__cards .left__col .about__card {
    overflow: hidden
}



.about__cards .left__col .about__card:first-child:hover::after {
    bottom: 0;
    transition: .3s all ease
}

.about__cards .left__col .about__card:first-child::after {
    content: "";
    position: absolute;
    background-image: url(https://mexman.film/wp-content/uploads/2025/04/Group-1000003489-1.png);
    bottom: -5rem;
    right: 0;
    width: 32.3125rem;
    height: 23.6875rem;
    background-size: contain;
    z-index: 0;
    transition: .3s all ease
}

.about__cards .center__col .about__card {
    overflow: hidden
}


.about__cards .center__col .about__card:first-child:hover::after {
    right: -7rem;
    transition: .3s all ease
}

.about__cards .center__col .about__card:first-child::after {
    content: "";
    position: absolute;
    background-image: url(https://mexman.film/wp-content/uploads/2025/04/afil_316_1.webp);
    bottom: -1rem;
    right: -12rem;
    width: 25.875rem;
    height: 16.6875rem;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    transition: .3s all ease;
}

.about__cards .center__col .about__card:last-child:hover::after {
    bottom: -5rem;
    transition: .3s all ease
}

.about__cards .center__col .about__card:last-child::after {
    content: "";
    position: absolute;
    background-image: url(https://mexman.film/wp-content/uploads/2025/04/Group-1000003487-2-1.png);
    bottom: -8rem;
    right: 0rem;
    width: 29.875rem;
    height: 25.625rem;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    transition: .3s all ease;
}

.about__cards .right__col .about__card {
    overflow: hidden
}

.about__cards .right__col .about__card:first-child:hover::after {
    bottom: 0;
    transition: .3s all ease
}

.about__cards .right__col .about__card:first-child::after {
    content: "";
    position: absolute;
    background-image: url(https://mexman.film/wp-content/uploads/2025/04/Group-1000003490-1.png);
    bottom: -5rem;
    right: 0;
    width: 32.875rem;
    height: 26.1875rem;
    background-size: contain;
    z-index: 0;
    transition: .3s all ease;
    background-repeat: no-repeat;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(80px)
    }

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

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out
}

.fade-in.visible {
    animation: fadeIn 1s ease-out forwards
}

.team__section {
    margin: 4rem 0 0 0
}

.slider {
    display: flex;
    justify-content: space-between;
    color: #fff
}

.slider h6 {
    font-weight: 700;
    font-family: "SFBold";
    font-size: 3.25rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    max-width: 40.625rem;
    margin: 0;
    margin-bottom: 3rem
}

.slider .border-text {
    border-radius: 12.5rem;
    padding: .94rem 2.5rem;
    background: #0f0f0f;
    background: linear-gradient(135deg, #181818 0%, #1b1b1b 48%, #151515 100%);
    font-weight: 700;
    font-family: "SFBold";
    font-size: 2.48rem;
    line-height: 120%;
    letter-spacing: -0.03em
}

.slider #name {
    margin: 0;
    margin-top: 2.25rem;
    margin-bottom: .5rem;
    font-weight: 700;
    font-family: "SFBold";
    font-size: 2rem;
    line-height: 120%;
    letter-spacing: -0.03em
}

.slider #role {
    font-weight: 400;
    font-size: 1.38rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #8e8e8e;
    margin: 0
}

.slider ul {
    width: 59.375rem
}

.slider ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 3.125rem
}

.slider ul li {
    border: 1px solid #d2d2d2;
    width: 20.125rem;
    list-style-type: none;
    background: linear-gradient(135deg, #181818 0%, #000 48%, #151515 100%), linear-gradient(356deg, #141414 0%, #282828 100%);
    border-radius: .75rem;
    padding: 2.125rem 2.4375rem 2.125rem 5.5375rem;
    text-align: left;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #8e8e8e;
    position: relative;
    border: 2px solid rgba(0, 0, 0, 0)
}

.slider ul {
    list-style: none;
    counter-reset: list-counter;
    padding: 0
}

.slider li {
    position: relative;
    overflow: hidden;
    counter-increment: list-counter
}

.slider li::after {
    content: counter(list-counter);
    position: absolute;
    left: .5rem;
    bottom: -0.5rem;
    font-weight: 700;
    font-family: "SFBold";
    font-size: 7.69rem;
    line-height: 80%;
    letter-spacing: -0.03em;
    color: #fff;
    opacity: .05;
    display: flex;
    align-items: center;
    justify-content: center
}

.team__section {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/wp-content/uploads/2025/03/Mask-group-3-1.png);
    z-index: 0;
    background-position: left;
    background-size: 120rem;
    position: relative
}

.team__section::after {
    content: "";
    background-image: url(/wp-content/uploads/2025/03/Group-1000003471-1.png);
    position: absolute;
    right: -2rem;
    bottom: -10rem;
    width: 68.6875rem;
    height: 76.125rem;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1
}

.team__section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .1);
    z-index: -1
}

.main-slide {
    display: flex;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transition: opacity .1s, transform .1s;
    position: relative
}

.main-slide.visible {
    opacity: 1;
    transform: translateY(0)
}

.team__section #main-photo {
    width: 49.4375rem;
    height: 62.375rem;
    height: auto;
    border-radius: 10px
}

.team__section .thumbnail {
    width: 6.875rem;
    height: 6.875rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0);
    cursor: pointer;
    transition: opacity .3s, transform .3s;
    filter: grayscale(1)
}

.team__section .right__col {
    position: relative
}

.thumbnail-container {
    position: absolute;
    display: flex;
    gap: 10px;
    right: 0;
    bottom: 2rem
}

.thumbnail.active {
    filter: grayscale(0);
    opacity: 1;
    border: 2px solid #dd005d
}

.form__body {
    padding: 2.125rem 7.5rem;
    background-color: #fff;
    border-radius: 2.25rem;
    background-image: url(/wp-content/uploads/2025/03/mask_group-1-scaled.webp);
    background-size: cover
}

.form__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.form__body .right__col {
    max-width: 27.8125rem
}

.form__body .left__col {
    max-width: 24.5rem
}

.form__body h6 {
    font-weight: 400;
    font-size: 1.38rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #787878;
    margin: 0
}

.form__body h3 {
    font-weight: 700;
    font-family: "SFBold";
    font-size: 3.25rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin: .75rem 0 1.375rem 0
}

.form__body p {
    font-weight: 400;
    font-size: 1.38rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #787878;
    margin: 0
}

form br {
    display: none
}

form p {
    margin: 0
}

form input {
    background: #f5f5f7;
    border-radius: 12.5rem;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #787878;
    padding: 2rem;
    border: unset;
    width: -webkit-fill-available;
    margin-bottom: .625rem
}

form .wpcf7-submit {
    background: #dd005d;
    color: #fff
}

.agree {
    text-align: center;
    max-width: 27.8125rem
}

.agree a {
    font-weight: 400;
    font-size: 1rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #787878
}

span.wpcf7-spinner {
    display: none
}

@media screen and (max-width: 1250px) {
    html {
        font-size: .625rem
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: .75rem
    }

    .container-big {
        flex-direction: column;
        gap: 3rem
    }

    .video-container video.active {
        width: -webkit-fill-available
    }

    .container {
        padding: 0 1.25rem
    }

    .container-big {
        padding: 1.25rem
    }

    .hero__screen .cols .left__col {
        width: 100%
    }

    .scroll-container {
        padding: 0
    }

    .advantages__list .advantage {
        width: 100% !important;
        flex-basis: 100% !important
    }

    .main-slide .right__col {
        display: flex;
        align-items: flex-end;
        height: 48.5625rem
    }

    section.contact__form {
        margin-top: 4rem
    }

    .form__body {
        display: flex;
        gap: 2rem;
        padding: 2rem
    }

    .form__body {
        height: 35rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom
    }

    .advantages__list .advantage p {
        max-width: 70% !important;
        font-size: 1.7rem
    }
}

.hero__screen .right__col::before {
    content: "";
    position: absolute;
    top: 0;
    left: -3rem;
    border-radius: 100%;
    background: #dd005d;
    filter: blur(200px);
    width: 50rem;
    height: 33.5rem;
    z-index: 0
}

.hero__screen .right__col {
    position: relative
}

.video-container video,
.video-container {
    z-index: 3 !important
}

@media screen and (max-width: 768px) {
    .video-container video {
        width: 71px !important;
        height: 12.9375rem
    }

    .form__body {
        flex-direction: column
    }

    .about__cards {
        flex-direction: column
    }

    .main-slide {
        flex-direction: column
    }

    .burger img {
        width: 3rem
    }

    .burger {
        display: block
    }

    .open-burger header {
        opacity: 0;
        transition: .3s all ease;
        visibility: hidden
    }

    .open-burger section.burger-menu {
        display: block
    }

    button.close-icon img {
        width: 3rem
    }

    button.close-icon {
        background: rgba(0, 0, 0, 0);
        width: 3rem;
        border: unset
    }

    section.burger-menu .container {
        display: flex;
        flex-direction: column;
        gap: 2rem
    }

    section.burger-menu .menu__row {
        flex-direction: column
    }

    section.burger-menu {
        width: 100%;
        height: 100vh;
        background: #000
    }

    section.burger-menu .social {
        order: 3;
        justify-content: center;
        align-items: center
    }

    section.burger-menu .menu__row {
        margin-top: 17rem;
        justify-content: center;
        align-items: center
    }

    button.close-icon {
        position: absolute;
        right: 1rem;
        top: 1.5rem
    }

    .advantage {
        padding: 1rem !important
    }

    .advantages__list .advantage p {
        font-size: 1.3rem
    }

    .advantages__list .advantage:first-child::after {
        height: 10.375rem;
        width: 14.8125rem
    }

    .advantages__list .advantage:nth-child(2)::after {
        height: 18.3125rem;
        width: 21.3125rem
    }

    .advantages__list .advantage:nth-child(3)::after {
        top: 5rem;
        bottom: 0;
        margin: auto;
        height: 7.625rem;
        width: 8.5625rem;
        z-index: 0;
        background-size: contain;
        background-repeat: no-repeat
    }

    .advantages__list .advantage:nth-child(4)::after {
        height: 17.9375rem;
        width: 11.9375rem
    }

    .advantages__list .advantage:nth-child(5)::after {
        right: -4rem;
        top: 7rem;
        bottom: 0;
        margin: auto;
        height: 14.3125rem;
        width: 14.3125rem;
        z-index: 0;
        background-size: contain;
        background-repeat: no-repeat
    }

    .scroll-container video {
        height: 23.5625rem;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Hide main image on mobile */
    .team__section #main-photo {
        display: none
    }
}

@media screen and (max-width: 1024px) {
    h3 {
        font-weight: 700;
        font-family: "SFBold";
        font-size: 2.62rem
    }

    .portfolio__section .colored-animate {
        margin: 28.8125rem 0 2.8125rem 0
    }

    .video-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem
    }

    .video-overlay {
        opacity: 1;
        padding: 1rem
    }

    .video-overlay img {
        width: 4.375rem;
        height: 4.375rem;
        cursor: pointer
    }

    .video-title {
        font-size: 1.3rem;
        margin-bottom: 0 !important;
        max-width: 80%
    }

    p.video-description {
        font-size: 1rem;
        max-width: 80%
    }

    .slider h6 {
        font-size: 2.5rem
    }

    .slider a.btn.btn-pink {
        display: none
    }

    .slider .border-text {
        font-size: 2rem;
        padding: 1rem 0;
        width: -webkit-fill-available;
        display: block;
        text-align: center
    }

    .team__section .thumbnail {
        width: 4.875rem;
        height: 4.875rem
    }

    .thumbnail-container {
        left: 0;
        margin: auto;
        right: 0;
        justify-content: center;
        bottom: 0
    }

    .main-slide .right__col {
        display: flex;
        align-items: flex-end;
        height: 28.5625rem
    }

    .slider li {
        width: -webkit-fill-available !important
    }

    .slider ul {
        flex-direction: column
    }

    .form__body .left__col {
        max-width: unset
    }

    .form__body h3 {
        font-size: 2rem
    }

    .form__body {
        height: 45rem;
        justify-content: flex-start;
        background-size: 170%;
        background-position-x: center
    }
}

.sticky {
    background: #000;
    transition: .3s all ease
}

header {
    transition: .3s all ease
}

.top__footer {
    margin: 6rem 0 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.top__footer .left__col {
    max-width: 46.875rem
}

.top__footer h5 {
    font-weight: 700;
    font-family: "SFBold";
    font-size: 3.62rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #fff 0%, #646464 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    margin: 0
}

.top__footer p {
    font-weight: 700;
    font-size: 2.62rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
    margin-top: 1rem
}

.top__footer .right__col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem
}

.top__footer .tel {
    font-weight: 700;
    font-size: 3.5rem;
    letter-spacing: -0.02em;
    text-align: right;
    color: #fff;
    font-family: "SFBold"
}

.top__footer .tel span {
    font-weight: 700;
    color: #575757;
    font-family: "SFBold"
}

.footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem
}

.footer__social .menu__row {
    display: flex;
    align-items: center
}

.footer__social .menu__row .btn-pink {
    padding: 1.25rem 2.5rem;
    font-size: 1.25rem
}

footer {
    position: relative
}

.footer__main {
    position: absolute;
    left: 0;
    top: 0
}

.footer__menus .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.footer__menus .container .left__col a {
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: #8e8e8e
}

.footer__menus .container .left__col a:hover {
    color: #fff
}

.footer__menus .container .right__col li {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.footer__menus .container .right__col span {
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    text-align: right;
    color: #8e8e8e
}

.footer__menus .container .right__col a {
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    text-align: right;
    color: #8e8e8e
}

.footer__menus .container .right__col a:hover {
    color: #fff
}

.footer__menus .container ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.footer__menus,
.top__footer {
    position: relative
}

.footer__menus .left__col,
.footer__menus .right__col,
.top__footer,
.footer__bottom a,
.footer__bottom p,
.footer__bottom {
    position: relative;
    z-index: 10
}

.footer__main {
    position: absolute;
    z-index: 1 !important
}

.footer__bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem
}

.footer__bottom p,
.footer__bottom a {
    font-weight: 400;
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: #8e8e8e
}

.footer__bottom {
    margin-bottom: 2rem
}

.footer__bottom a {
    text-decoration: underline
}

.footer__logo img {
    width: 188px
}

.footer__logos {
    display: flex;
    gap: .5rem
}

.copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem
}

img#main-photo {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 0
}

canvas {
    width: 100% !important
}

section.team__section .slider {
    padding-bottom: 8rem
}

@media screen and (max-width: 1024px) {
    .footer__main {
        display: none
    }

    img#main-photo {
        position: relative
    }

    .footer__bottom .container,
    .footer__menus,
    .top__footer {
        flex-direction: column
    }

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

    ul {
        width: -webkit-fill-available !important
    }

    .copyright {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 3rem
    }

    .top__footer .tel {
        font-size: 2rem
    }

    .top__footer .right__col {
        align-items: center;
        justify-content: center;
        margin: 2rem auto
    }

    .top__footer h5,
    .top__footer p {
        text-align: center
    }
}

.fade-element {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out
}

.fade-bottom {
    opacity: 1;
    transform: translateY(0)
}

.hover-line {
    display: inline;
    background-image: linear-gradient(to right, #fff, #fff);
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size .5s ease;
    padding-bottom: 2px
}

.hover-line:hover {
    background-size: 100% 2px
}

.container {
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none
}

body::-webkit-scrollbar {
    display: none
}

section.portfolio__section .container {
    overflow: hidden
}

.slider ul li {
    position: relative;
    border-radius: .75rem;
    margin-left: 1px;
    z-index: 1
}

img#main-photo {
    position: absolute;
    left: unset;
    top: unset;
    bottom: 0;
    margin: auto;
    z-index: 0;
    right: 0;
    height: 62.375rem
}

.team__section .container {
    position: relative
}

@media screen and (min-width: 1600px) {
    canvas {
        height: 1000px;
        margin-top: 7rem
    }
}

@media screen and (max-width: 1200px) {
    canvas {
        height: 500px !important
    }
}

@media screen and (max-width: 768px) {
    .team__section #main-photo {
        position: relative;
        height: 400px;
        -o-object-fit: contain;
        object-fit: contain;
        margin-bottom: 2rem
    }

    section.team__section {
        display: flex;
        flex-direction: column-reverse
    }

    .main-slide .right__col {
        height: 0
    }

    .team__section #main-photo {
        margin-bottom: -4rem
    }

    .team__section .container {
        overflow: visible
    }

    .thumbnail-container {
        bottom: -29rem
    }

    section.team__section .slider {
        padding-bottom: 0 !important
    }

    .team__section::after {
        content: "";
        right: 0;
        bottom: -10rem;
        width: 41rem;
        height: 42rem;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: -1;
        left: 0;
        margin: auto
    }

    html,
    body {
        overflow-x: hidden
    }

    .border-text::before {
        content: "";
        position: absolute;
        top: -0.5px;
        left: -0.5px;
        right: 0px;
        bottom: -0.5px;
        background: rgba(0, 0, 0, 0);
        border-radius: 12.5rem;
        z-index: -1
    }

    .slider .border-text {
        font-size: 1.5rem
    }

    .team__section #main-photo {
        width: 100% !important
    }

    .top__footer p {
        text-align: center !important;
        margin: 40px 0 !important;
        display: flex
    }
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    z-index: 1000;
    justify-content: center;
    align-items: center
}

.popup-content {
    position: relative;
    animation: fadeIn .3s ease-in-out;
    width: 99.6875rem
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px)
    }

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

.popup-content .form__body {
    background: url(/wp-content/uploads/2025/03/Rectangle.png);
    background-size: cover
}

.popup-content .form__body {
    position: relative
}

.popup-content .form__body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    background-image: url(/wp-content/uploads/2025/03/freepik__expand__39296-1-3.png);
    background-repeat: no-repeat;
    width: 30.8125rem;
    background-size: contain
}

@media screen and (max-width: 1100px) {
    .popup-content .form__body::after {
        content: "";
        background-repeat: no-repeat;
        width: 43.8125rem;
        background-size: cover;
        z-index: 0
    }
}

@media screen and (max-width: 810px) {
    .popup-content .form__body {
        flex-direction: column;
        height: -moz-fit-content;
        height: fit-content
    }

    .popup-content .form__body::after {
        left: unset
    }
}

@media screen and (max-width: 768px) {
    .popup-content .form__body::after {
        content: unset
    }
}

._lock {
    overflow: hidden
}

@media screen and (max-width: 768px) {
    .container.scroll-container {
        width: 100% !important
    }
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000
}

.pulse-bg {
    position: relative;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    background: radial-gradient(circle, #dd005d, #dd005d);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 1.5s infinite ease-in-out;
    filter: blur(8px)
}

.inner-circle {
    width: 12vw;
    height: 12vw;
    background: radial-gradient(circle, #dd005d, #dd005d);
    border-radius: 50%
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(1.2);
        opacity: .7
    }

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

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        visibility: hidden
    }
}

.video__back h1 {
    font-weight: 700;
    font-family: "SFBold";
    font-size: 3.62rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #fff 0%, #646464 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    margin: 2.75rem 0
}

.marquee-container {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden
}

.marquee-container .marquee {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: scroll-left 15s linear infinite;
    margin-top: 1rem
}

.marquee-container .marquee video {
    width: 29.0625rem;
    -o-object-fit: cover;
    object-fit: cover;
    margin-right: 1rem;
    height: 16.6875rem;
    margin-right: 1rem
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%)
    }

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

section.video__back {
    margin-top: 6rem
}

section.video__back {
    position: relative
}

.dark__video {
    position: absolute;
    z-index: -1;
    opacity: .2;
    left: 0;
    top: 0
}

.video__back .container {
    overflow: hidden
}

.project__form {
    position: relative;
    z-index: 0;
    overflow: hidden;
    margin-bottom: 6.875rem;
    padding: 3.4375rem 7.5rem 2.5rem 2.8125rem;
    border-radius: 1.5rem;
    margin-top: 6rem;
    background: linear-gradient(135deg, #181818 0%, #000 48%, #151515 100%);
    border: 2px solid rgba(0, 0, 0, 0)
}

.project__form .right__col,
.project__form .left__col {
    z-index: 1
}

.project__form::before {
    content: "";
    background-image: url(/wp-content/uploads/2025/03/Group-1000003467.png);
    position: absolute;
    right: 0;
    top: 0;
    width: 34.75rem;
    height: 27.625rem;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1
}

.project__form::after {
    content: "";
    background-image: url(/wp-content/uploads/2025/03/Vector-19.png);
    position: absolute;
    right: 0;
    top: 0;
    width: 58.75rem;
    height: 28.125rem;
    background-repeat: no-repeat;
    background-size: cover
}

.project__form h3,
.project__form h6,
.project__form p {
    color: #fff
}

.project__form form.wpcf7-form {
    display: flex;
    gap: 1rem
}

.project__form h6 {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #787878;
    margin: 0
}

.project__form h3 {
    font-weight: 600;
    font-size: 3.62rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #fff 0%, #646464 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    margin: 0;
    margin-top: .5rem
}

.project__form p {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #787878;
    margin-top: 1rem
}

.project__form input {
    background: #1d1d1f;
    border-radius: 1.5rem
}

.project__form .wpcf7-submit {
    background-color: #dd005d
}

.project__form form p {
    margin: 0
}

.wpcf7-submit {
    cursor: pointer
}

.filter__container {
    display: flex;
    gap: 2rem
}

.filter__container .video-item {
    margin-bottom: 20px
}

.filter__container .video-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between
}

.filter__container .video-item video {
    width: 100%;
    height: 31.6875rem
}

.filter__container .video-item:nth-child(even) {
    width: 42%
}

.filter__container .video-item:nth-child(odd) {
    width: 57%
}

.filter__container .video-item:nth-child(2),
.filter__container .video-item:nth-child(3),
.filter__container .video-item:nth-child(8) {
    width: 42%
}

.filter__container .video-item:nth-child(1),
.filter__container .video-item:nth-child(4),
.filter__container .video-item:nth-child(7) {
    width: 57%
}

.filter__container .video-item:nth-child(5),
.filter__container .video-item:nth-child(6) {
    width: 50%
}

.filter__container .filter__container {
    margin: 0 1rem 0 3.125rem
}

.filter__container .video-item {
    position: relative;
    display: inline-block;
    cursor: pointer
}

.filter__container .video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.filter__container .video-item:hover .video-overlay {
    opacity: 1
}

.filter__container .video-item h4 {
    font-weight: 600;
    font-size: 1.62rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #fff;
    position: absolute;
    left: 2rem;
    top: 2rem;
    margin: 0
}

.filter__container .video-overlay {
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.filter__container .video-overlay p {
    font-weight: 400;
    font-size: 1.38rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    max-width: 18.25rem;
    margin: 0
}

.filter__container h3 {
    font-weight: 600;
    font-size: 3.62rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #fff 0%, #646464 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.tabs {
    list-style: none;
    padding: 0
}

.tab-link {
    cursor: pointer;
    padding: 10px;
    background: #ddd;
    margin-bottom: 5px;
    transition: .3s
}

li.tab-link {
    border-radius: 12.5rem;
    padding: 1.25rem 3.12rem;
    width: 8rem;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #fff;
    text-align: center;
    color: #8e8e8e;
    background-color: #1d1d1f
}

.tab-link.active {
    background: #dd005d;
    color: #fff
}

.tab-content {
    display: none
}

.tab-content.active {
    display: block
}

.video__banner {
    margin-top: 5.75rem;
    margin-bottom: 5.375rem;
    position: relative
}

.video__banner video {
    width: calc(100% - 2rem);
    margin: 0 1rem;
    border-radius: 1.5rem;
    opacity: .4
}

.video__banner h3 {
    font-weight: 600;
    font-size: 3.62rem;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #fff;
    max-width: 39.1875rem
}

.video__banner p {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #cbcbcb;
    margin-top: 0;
    margin-bottom: 2rem
}

.video__banner .banner__content {
    position: absolute;
    left: 10rem;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media screen and (max-width: 1024px) {
    .project__form form.wpcf7-form {
        flex-direction: column
    }

    .project__form .right__col,
    .project__form .left__col {
        max-width: 50%
    }

    .project__form .right__col .agree,
    .project__form .left__col .agree {
        max-width: unset
    }

    .project__form::after {
        height: -webkit-fill-available;
        width: 90rem
    }
}

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

    .project__form .right__col,
    .project__form .left__col {
        max-width: 100%
    }

    .project__form {
        margin: 2rem 0;
        padding: 1rem
    }

    .project__form::before {
        bottom: -11rem;
        top: inherit;
        right: -12rem
    }

    .filter__container {
        margin: 0 1rem
    }

    .filter__container {
        flex-direction: column;
        gap: 1rem
    }

    ul.tabs {
        display: flex;
        flex-wrap: wrap
    }

    .filter__container .video-item video {
        height: 20rem;
        width: 100%
    }

    .filter__container .video-list {
        flex-direction: column;
        width: 100%
    }

    .filter__container .video-item {
        width: 100% !important
    }

    .fancybox__caption {
        display: none
    }

    section.video__banner {
        margin: 2rem 0
    }

    .video__banner .banner__content {
        left: 1rem
    }
}

.filter__container h3 {
    margin: 0;
    margin-bottom: 1rem !important;
    margin-left: 1rem
}

.filter__container {
    margin: 0 1rem 0 3.0625rem
}

.filter__container .left__col {
    position: relative
}

.left__col.data-sticky-container {
    display: block;
    min-width: 14.1875rem
}

@media screen and (max-width: 768px) {
    .filter__container {
        margin: 0 1rem
    }

    ul.tabs {
        justify-content: space-between
    }
}

.video-list .video-item:hover .video-overlay {
    background: linear-gradient(178deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%)
}

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

    html,
    body {
        font-size: 16px
    }

    .btn-desctop {
        display: none
    }

    header .btn_row,
    header .social {
        gap: 4px
    }

    header .btn-white {
        font-size: .75rem;
        padding: .75rem 1.25rem
    }

    header .logo img {
        width: 4.9375rem
    }

    .social a {
        padding: .6875rem
    }

    .social img {
        width: .8125rem;
        height: .8125rem
    }

    .hero__screen h3 {
        font-size: .875rem;
        font-weight: 400;
        font-family: "SFRegular";
        margin-top: 0
    }

    .hero__screen h1 {
        font-size: 1.625rem;
        line-height: 120%
    }

    .hero__screen ul {
        margin-top: .9375rem;
        margin-bottom: 1.6875rem
    }

    .hero__screen ul li {
        font-size: .875rem
    }

    a.btn.btn-pink {
        font-size: .875rem;
        padding: 1.475rem 1.5625rem;
        width: -webkit-fill-available;
        justify-content: center
    }



    .margin-small {
        margin: 2.375rem 0
    }

    .advantages__list .advantage {
        border-radius: .75rem;
        padding: 1.125rem 1.5rem
    }

    .advantages__list .advantage h5 {
        font-size: 1.125rem
    }

    .advantages__list .advantage p {
        font-size: .75rem;
        line-height: 140%
    }

    .advantages__list .advantage:first-child p {
        max-width: 10rem !important
    }

    .advantage {
        height: -moz-fit-content;
        height: fit-content
    }

    .advantages__list .advantage:first-child::after {
        height: 6.375rem;
        width: 14.8125rem
    }

    .advantages__list .advantage:nth-child(1) {
        order: 1
    }

    .advantages__list .advantage:nth-child(2) {
        order: 5
    }

    .advantages__list .advantage:nth-child(4) {
        order: 2
    }

    .advantages__list .advantage:nth-child(3) {
        order: 4
    }

    .advantages__list .advantage:nth-child(5) {
        order: 3
    }

    .advantages__list .advantage:nth-child(6) {
        order: 5
    }

    .advantages__list .advantage:nth-child(4) p {
        max-width: 9.6875rem
    }

    .advantages__list .advantage:nth-child(4)::after {
        height: 12.9375rem;
        width: 10.9375rem;
        right: -2rem;
        bottom: 0
    }

    .advantages__list .advantage:nth-child(5)::after {
             width: 14rem;
        height: 14rem;
        right: -5rem;
        top: 5rem;
    }

    .advantages__list .advantage:nth-child(3) p {
        z-index: 4
    }

    .advantage {
        position: relative;
        z-index: 9
    }

    .advantages__list .advantage:nth-child(3)::after {
        right: -2rem;
        bottom: 1rem;
        width: 10rem;
        height: 10rem;
        z-index: -1
    }

    .advantages__list .advantage:nth-child(2)::after {
        height: 12.3125rem;
        width: 12.3125rem;
        right: -4rem;
        bottom: -3rem
    }

    .scrolling-item img {
        height: 3.6875rem
    }

    .scrolling-content {
        gap: 2rem
    }

    .marquee {
        margin-top: 3.25rem
    }

    .about h5 {
        font-size: .875rem
    }

    .about h3 {
        font-size: 1.5rem;
        line-height: 120%
    }

    .about .text {
        font-size: .875rem;
        line-height: 140%
    }

    .margin-big {
        padding: 3.125rem 0
    }

    .about__cards {
        margin: 1.125rem 0
    }

    .about__cards .about__card {
        padding: 1.375rem 1.5rem !important
    }

    .about__cards .about__card h5 {
        font-size: 1.125rem
    }

    .about__cards .about__card p {
        font-size: .75rem
    }

    .about__cards .left__col .about__card {
        height: 17.875rem
    }

    .about__cards .left__col .about__card:first-child::after {
        width: 14rem;
        height: 16rem;
        bottom: -6rem;
    }



    .about__cards .left__col .about__card:first-child:hover::after {
        bottom: -5rem;
        transition: .3s all ease
    }

    .about__cards .center__col .about__card {
        height: 13.0625rem
    }

    .about__cards .center__col .about__card:first-child::before {
        width: 20rem;
        height: 20rem;
        background-repeat: no-repeat;
        background-position: bottom
    }

    .about__cards .center__col .about__card:first-child::after {
        height: 13rem;
        width: 14rem;
        right: -6rem;
        bottom: -4rem;
    }

    .about__cards .center__col .about__card:last-child p {
        max-width: 9.0625rem
    }

    .about__cards .center__col .about__card:last-child {
        height: 10rem
    }

    .about__cards .center__col .about__card:last-child::after {
        width: 10rem;
        height: 10rem;
        bottom: -2rem;
    }

    .about__cards .center__col .about__card:last-child:hover::after {
        bottom: -2rem;
        transition: .3s all ease
    }

    .about__cards .right__col .about__card {
        height: 18rem
    }

    .about__cards .right__col .about__card p {
        max-width: 100%;
    }

    .about__cards .right__col .about__card:first-child::after {
        width: 17rem;
        height: 15rem;
        bottom: -4rem;
        background-repeat: no-repeat;
        left: 0;
    }

    .about__cards .right__col .about__card:first-child:hover::after {
        bottom: -5rem
    }

    .container.scroll-container {
        width: 100% !important
    }

    .scroll-container video {
        height: 9rem;
        margin: 0 1rem;
        width: -webkit-fill-available;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    section.about.back-white {
        padding-bottom: 26rem
    }

    section.portfolio__section h3 {
        font-size: 1.5rem;
        margin-top: 8rem !important
    }

    .video-title {
        font-size: 12px
    }

    p.video-description {
        font-size: 10px;
        margin-top: .25rem
    }

    .video-overlay img {
        width: 3.3125rem;
        height: 3.3125rem
    }

    .slider h6 {
        font-size: 1.5rem;
        margin-bottom: 1.2rem
    }

    section.team__section {
        margin: 3rem 0
    }

    .slider .border-text {
        font-size: 1rem;
        padding: 1rem
    }

    .slider #name {
        font-size: 1.375rem;
        margin-top: 1rem
    }

    .slider #role {
        font-size: .875rem
    }

    .slider ul li {
        font-size: .875rem;
        padding: 1.1875rem 1.875rem 1.1875rem 3.375rem
    }

    .slider li::after {
        font-size: 5rem;
        left: .2rem
    }

    .team__section #main-photo {
        width: 18.75rem !important;
        margin-bottom: -4rem
    }

    .team__section::after {
        width: 30rem;
        height: 30rem;
        left: -4rem;
        bottom: -7rem
    }

    .team__section .thumbnail {
        width: 3.3125rem;
        height: 3.3125rem
    }

    .thumbnail-container {
        bottom: -23rem
    }

    .thumbnail-container {
        gap: .4375rem
    }

    .form__body h6 {
        font-size: .875rem
    }

    .form__body h3 {
        font-size: 1.5rem
    }

    .form__body p {
        font-size: .875rem
    }

    .form__body {
        margin: 0 1rem;
        padding: 2.25rem 1.5rem
    }

    form input {
        font-size: .75rem;
        padding: 1.25rem;
        width: calc(100% - 2.5rem)
    }

    form .wpcf7-submit {
        width: -webkit-fill-available
    }

    .form__body .agree p {
        font-size: .625rem
    }

    .form__body {
        background-image: url(/wp-content/uploads/2025/03/group_1000003488.webp);
        background-size: contain;
        background-size: 240%;
        background-position-y: 31.1875rem
    }

    .top__footer {
        margin-top: 3rem
    }

    .top__footer h5 {
        font-size: 1.375rem
    }

    .top__footer p {
        font-size: 1.25rem;
        margin: 1.5rem 0 !important
    }

    .top__footer .tel {
        font-size: 1.75rem
    }

    .footer__social .btn {
        font-size: .75rem !important;
        padding: .75rem 1.25rem !important;
        display: flex;
        gap: 4px
    }

    .top__footer .right__col {
        margin: 1.5rem 0;
        width: 100%
    }

    .footer__social .menu__row {
        gap: .25rem
    }

    .footer__social .social {
        gap: 4px
    }

    .footer__social {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column-reverse
    }

    .top__footer .right__col {
        align-items: flex-start
    }

    .footer__menus .container .left__col a,
    .footer__menus .container .right__col a {
        font-size: .875rem
    }

    .footer__menus .container ul {
        gap: .625rem
    }

    .footer__menus .container .right__col span {
        font-size: .875rem;
        color: #fff !important
    }

    #colophon>div.footer__menus>div>div.left__col>nav>ul>li:nth-child(1) {
        display: none
    }

    .top__footer {
        margin-bottom: 0
    }

    .footer__bottom .container {
        margin-top: 2.5rem
    }

    .footer__logo img {
        margin-bottom: 1rem;
        width: 14.875rem
    }

    .footer__bottom p,
    .footer__bottom a {
        font-size: 14px
    }

    .copyright {
        margin-bottom: 2rem
    }

    section.hero__screen {
        padding-top: 6rem
    }

    .video__back h1 {
        font-size: 1.5rem;
        margin: 1rem 0
    }

    .project__form {
        margin-top: 4rem;
        padding: 1.5rem
    }

    .project__form h3 {
        font-size: 1.5rem !important
    }

    .project__form h6 {
        font-size: .875rem
    }

    .project__form p {
        font-size: .875rem
    }

    .project__form::before {
        width: 20rem;
        height: 20rem;
        right: 0rem;
        bottom: -7rem
    }

    .project__form {
        padding-bottom: 13rem
    }

    .project__form::after {
        height: -webkit-fill-available;
        width: 60rem;
        height: 60rem;
        bottom: 0;
        top: unset;
        right: -1rem
    }

    section#projects {
        margin-top: 2rem
    }

    .filter__container h3 {
        font-size: 1.5rem;
        margin-left: 0
    }

    li.tab-link {
        font-size: .625rem;
        padding: 1rem
    }

    li.tab-link {
        width: 38%
    }

    .filter__container .video-item video {
        height: 10rem
    }

    .filter__container .video-item h4 {
        font-size: 14px;
        left: 1rem;
        top: 1rem
    }

    .filter__container .video-overlay p {
        display: none
    }

    section.video__banner {
        margin: 3rem 0;
        margin-bottom: 0
    }

    .banner__content {
        padding: 0 2rem
    }

    .video__banner h3 {
        font-size: 1.5rem
    }

    .video__banner p {
        font-size: .875rem
    }

    .video__banner video {
        height: 23.0625rem
    }

    .banner__content .btn {
        width: calc(100% - 5rem) !important
    }
}

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

    html,
    body {
        font-size: 16px
    }
}

@media screen and (min-width: 351px)and (max-width: 480px) {

    html,
    body {
        font-size: 20px
    }

    .thumbnail-container {
        margin-bottom: 6rem
    }

    .form__body {
        background-position-y: 33.1875rem
    }

    header .btn-white {
        font-size: .75rem;
        padding: .75rem 1rem
    }
}

:target {
    scroll-margin-top: 8rem
}

.popup-content .wpcf7-submit:hover {
    background: #dd005d
}

@media screen and (min-width: 1200px) {
    .social a img {
        width: 1.25rem
    }
}

.swal2-popup.swal2-modal {
    background: #000 !important;
    border: 1px solid gray !important;
    border-radius: 2rem !important
}

.swal2-success-circular-line-right,
.swal2-success-circular-line-left,
.swal2-success-fix {
    background: #000 !important
}

div#swal2-content {
    color: #fff !important
}

.swal2-loader {
    border-color: #dd005d rgba(0, 0, 0, 0) #dd005d rgba(0, 0, 0, 0) !important
}

.swal2-content {
    padding: 0 !important
}

@media screen and (max-width: 768px) {
    .about__cards .center__col .about__card:first-child:hover::after {
        right: -3rem;
        transition: .3s all ease;
    }

    .about__cards .right__col .about__card:first-child:hover::after {
        bottom: -3rem;
    }

    .swal2-popup.swal2-modal {
        border-radius: 1rem !important
    }
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
}

@media screen and (max-width: 1200px) and (min-width: 769px) {
    .about__cards .about__card h5 {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 768px) {
    .video-container video.active {
        width: 168px !important;
    }
}

.filter__container .right__col {
    width: 100%;
}

.filter__container .video-list {
    gap: 1rem;
}

@media screen and (max-width: 768px) {
    .filter__container .video-item {
        margin: 0;
    }
    .agree a {
        font-size: 0.8rem !important;
    }
    div#tab-4 .video-item,
    div#tab-5 .video-item {
        min-width: 100px !important;
    }

    div#tab-4 .video-item,
    div#tab-5 .video-item {
        width: 44% !important;
    }

    div#tab-5 .video-list {
        flex-direction: row;
    }
    section.video__back {
        margin: 0 !IMPORTANT;
    }
    .form__body {
        padding: 2rem 0.5rem;
    }
    .form__body .agree p {
        font-size: 0.625rem;
    }
    section#company {
        padding: 0 !important;
    }
    .project__form {
        padding: 2rem 0.5rem;
    }
    .country-selector-btn {
        padding: 1rem 0.4rem;
    }
}
section.video__back {
    z-index: 99999;
}
.country-phone-wrapper {
    margin-bottom: 1rem;
}

.project__form .country-dropdown.open {

    top: -5rem;
}

.project__form .country-phone-wrapper {
    background: #1d1d1f;
}

.project__form .country-selector-btn {
    border-right: 1px solid #333;
}

.project__form .country-selector-btn .code {
    color: #fff;
}

.project__form .country-selector-btn .arrow {
    color: #fff;
}

.project__form .country-dropdown {
    background: #1d1d1f;
    border: 1px solid #333;
}

.project__form .country-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.project__form .country-option .code,
.project__form .country-option .name {
    color: #fff;
}
.project__form input {
    background: #1d1d1f;
    border-radius: 3.5rem;
}
header#header {
    z-index: 999999999999;
}
div#popupOverlay {
    z-index: 99999999999999999999999999999;
}
input {
    outline: none;
}
button.country-selector-btn {
    background: transparent !important;
}
.swal2-container {
    z-index: 999999;
}
@media screen and (max-width: 768px) {
    .thumbnail-container {
        bottom: 0px;
        margin-bottom: -3rem;
    }
    .team__section::after {
        opacity: 0.7;
    }
    .slider ul {
        margin: 0;
    }
    .about__cards .left__col .about__card:first-child::after {
        width: 18rem;
        height: 19rem;
        bottom: -6rem;
    }
    .about__cards .center__col .about__card:first-child::after {
        height: 14rem;
        width: 17rem;
        right: -4rem;
        bottom: -4rem;
    }
    .about__cards .center__col .about__card:last-child::after {
        width: 14rem;
        height: 13rem;
        bottom: -2rem;
        right: -1rem;
    }

}
.filter__section {
    margin-top: 12rem;
}
section#company {
    margin-top: 2rem;
}

.fancybox__container {
    z-index: 999999999999999999 !important;
}

div#process {
    overflow: hidden;
}
section#team {
    margin-top: 12rem;
}
	@media screen and (max-width: 1024px) {
		div#tab-4 .video-item {
    width: 44% !important;
}
div#tab-4 .video-list {
    display: flex
;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}
		section#team {
    margin-top: 5rem;
}
	}
	@media screen and (max-width: 768px) {
		 .video-container video {
        width: 4.338rem !important;
    }
	 .video-container video.active {
        width: 8.4rem !important;
    }
}

/* iOS Safari specific optimizations */
@supports (-webkit-touch-callout: none) {
    .scroll-container {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .colored-animate .letter {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .scroll-container video {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}


@media screen and (min-width: 768px) {
    div#showreel {
    padding: 0;
}
}