/* SECOND CSS */

/* OTHER */

.twopix-agency {
    color: var(--color-accent)!important;
}

.twopix-agency:hover {
    color: var(--color-white)!important;
}

.text-component em {
    font-style: normal;
}

.grid:has(.event-item) {
    --gap-x: var(--space-sm);
    --gap-y: var(--space-sm);
}

/* BUTTONS */

:root {
    --btn-radius: 0;
}

.btn,
.btn:hover {
    transition: all 0.5s ease!important;
    font-weight: 500;
}

.btn-fx-2 {
    text-transform: inherit;
}

.btn-fx-2::before,
.btn-fx-2::after {
    display: none;
}

.btn-fx-2 em * {
    line-height: unset;
    letter-spacing: unset;
    color: inherit;
    padding: 0;
}

.btn--secondary {
    background-color: transparent;
    border-color: var(--color-contrast-high);
    color: var(--color-white);
}

.btn--secondary:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-black)!important;
}

.btn--accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.btn--accent:hover {
    background-color: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
    color: var(--color-white);
}

/* FOOTER */

.footer-v4 a {
    color: var(--color-contrast-high);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-v4 a:hover {
    color: var(--color-white);
    text-decoration: none;
}

.footer-contacts a {
    color: var(--color-accent);
}

@media (min-width: 64rem) {
    .footer-v4__nav-list {
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
    }
}

.footer-v4__nav-list h4::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 0;
    width: 30%;
    height: 2px;
    background-color: var(--color-accent);
}

@media (min-width: 64rem) {
    .footer-v4 .footer-v4__socials a svg {
        width: 1.5em;
        height: 1.5em;
    }
}

.f-header__item {
    border-bottom: none;
}

/* SLIDESHOW */

.slideshow__navigation {
    justify-content: end;
}

.scroll-line {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 3;
    padding-left: 40px;
    padding-right: 40px;
}

.line-track {
    width: 2px;
    height: 50px;
    background: hsla(0, 0%, 100%, .50);
    overflow: hidden;
    position: relative;
}

.line-progress {
    width: 100%;
    height: 25px;
    background: var(--color-accent);
    animation: slide 2s ease-in-out infinite;
}

/* Обновляем анимацию для вертикального движения */
@keyframes slide {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(30px);
    }
    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 768px) {
    .scroll-line {
        bottom: 10px;
        transform: translateX(-50%) scale(0.7);
        padding: 15px;
    }
}


/* ADVANTAGES */

@media (max-width: 1023px) {
    .countup-advantage:not(:last-of-type) {
        border-bottom: 2px solid var(--color-bg-darker);
    }
}

@media (min-width: 1024px) {
    .countup-advantage:not(:last-of-type) {
        border-right: 2px solid var(--color-bg-darker);
    }
}

.countup-advantage-content {
    width: fit-content;
}

.blog-item figure {
    flex-shrink: 0;
}

.blog-item .list--icons {
    text-align: start;
}

/* PROMO PARALLAX */

.parallax-container {
    position: relative;
    min-height: 500px;
    overflow: hidden;
}

.parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    overflow: hidden;
}

.parallax-image {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: translateY(0);
    will-change: transform;
}

.parallax-content {
    position: relative;
    z-index: 2;
}

/* Анимация параллакса */
@media (prefers-reduced-motion: no-preference) {
    .parallax-image {
        transition: transform 0.1s ease-out;
    }
}

/* CONTACTS */

.details-list__item a {
    color: var(--color-contrast-high);
    text-decoration: none;
}

.details-list__item a:hover {
    color: var(--color-white);
}

.details-list__item .icon-custom-size {
    width: 2em;
    height: 2em;
}

@media (max-width: 1023px) {
	.contact-map-custom{
		height: 300px;
	}
}

/* PROMO MAIN */

:root {
    --promo_main-height: 60vh;
}

@media (min-width: 48rem) {
    :root {
        --promo_main-height: 60vh;
    }
}
@media (min-width: 64rem) {
    :root {
        --promo_main-height: 60vh;
    }
}
@media (min-width: 80rem) {
    :root {
        --promo_main-height: 60vh;
    }
}

.promo_main {
    min-height: var(--promo_main-height);
    height: auto;
}

.promo_main-small {
    height: 50vh;
}

.promo_main .breadcrumbs__item-not-selected:hover {
    color: var(--color-white);
}

/* TESTIMONIALS */

:root {
    --masonry-col-auto-size: 400px;
}

.test-gallery__inner::after {
    background: linear-gradient(to top, 
        white 0%,
        white 20%,                    
        rgba(255,255,255,0.95) 25%,    
        rgba(255,255,255,0.7) 40%,    
        rgba(255,255,255,0.2) 55%,    
        transparent 70%             
    );
}

/* TABS */

.tab-features__control-custom {
    color: var(--color-primary);
}

.tab-features__control-custom::before {
    display: none;
}

.tab-features__control-custom[aria-selected=true]::after {
    background-color: var(--color-accent);
}
