html {
    font-size: 10px;
     scroll-behavior: smooth;
}

body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
hr,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
}

* {
    box-sizing: border-box;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

img {
    border-style: none;
}

ol,
ul {
    list-style: none;
}

.smooth-wrapper {
  opacity: 0;
  transition: 1s ease-in-out;
}

.loader-v.active {
  opacity: 1;
}

.loader-v {
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background-color: var(--color-bg-primary);
  opacity: 0;
  transition: 1s ease-in-out;
}



.loader-v svg {
  overflow: visible;
  margin: calc(var(--space-unit) * 25);
  
  @media (max-width: 1000px) {
    padding: calc(var(--space-unit) * 10);
  }
}

.loader-v svg .loader-element {
  position: relative;
}

.loader-v svg .element-1 {
  animation: loaderElement1 3s infinite cubic-bezier(.24,.79,0,1), opacityElement 3s infinite cubic-bezier(0,.98,0,.98);
  animation-delay: .10s;
}

.loader-v svg .element-2 {
  animation: loaderElement2 3s infinite cubic-bezier(.24,.79,0,1), opacityElement 3s infinite cubic-bezier(0,.98,0,.98);
  animation-delay: .15s;
}

.loader-v svg .element-3 {
  animation: loaderElement3 3s infinite cubic-bezier(.24,.79,0,1), opacityElement 3s infinite cubic-bezier(0,.98,0,.98);
}

.loader-v svg .element-4 {
  animation: loaderElement4 3s infinite cubic-bezier(.24,.79,0,1), opacityElement 3s infinite cubic-bezier(0,.98,0,.98);
  animation-delay: .05s;
}

@keyframes opacityElement {
  0, 100% {
    opacity: 1;
  }
  
  50% {
    opacity: 0;
  }
}

@keyframes loaderElement1 {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(-150px, 150px);
  }
}

@keyframes loaderElement2 {
  0%, 100% {
    tranform: translate(0, 0);
  }
  
  50% {
    transform: translate(150px, -150px);
  }
}

@keyframes loaderElement3 {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(150px, -150px);
  }
}

@keyframes loaderElement4 {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(-150px, 150px);
  }
}

:root {

    --swiper-scrollbar-drag-bg-color: #FFBA41;
    --swiper-scrollbar-border-radius: 0;

    /* Spacing */
    --space-0: 0;
    --space-unit: 0.4rem;
    --space-1: 0.8rem;
    --space-2: 1.6rem;
    --space-3: 3.2rem;
    --space-btn-y: 0.822em;
    --space-btn-x: 1.5em;

    /* Typography */
    /* font-size */
    --font-size-xxs: 1rem;
    --font-size-xs: 1.2rem;
    --font-size-sm: 1.4rem;
    --font-size-base: 1.6rem;
    --font-size-lg: 1.8rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 2.6rem;
    --font-size-3xl: 2.8rem;
    --font-size-4xl: 3rem;
    --font-size-5xl: 3.4rem;
    --font-size-6xl: 3.6rem;
    --font-size-title: 4.8rem;

    /* font-weight */
    --font-weight-1: 100;
    --font-weight-2: 200;
    --font-weight-3: 300;
    --font-weight-4: 400;
    --font-weight-5: 500;
    --font-weight-6: 600;
    --font-weight-7: 700;
    --font-weight-8: 800;
    --font-weight-9: 900;

    /* line-heigh */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-lg: 1.6;

    /* letter-spacing */
    --letter-spacing-little: -0.02em;


    /* Colors */
    --color-primary: #FFBA41;
    --color-primary-hover: #FFCE55;

    /* bg */
    --color-bg-primary: #0E0E0E;
    --color-bg-secondary: #171717;

    /* text */
    --color-text-white: #FFFFFF;


    /* Border Radius */
    --border-radius-none: 0;
    --border-radius-sm: 10px;
    --border-radius-base: 30px;
    --border-radius-md: 35px;
    --border-radius-lg: 40px;
    --border-radius-xl: 90px;
    --border-radius-circle: 50%;


    /* Z-index */
    --z-index-1: 10;
    --z-index-2: 20;
    --z-index-3: 30;
    --z-index-4: 40;
    --z-index-5: 50;
    --z-index-6: 60;
    --z-index-7: 70;
    --z-index-8: 80;
    --z-index-9: 90;
    --z-index-max: 100;


    /* Swiper */
    --swiper-navigation-sides-offset: 0;
    --swiper-navigation-color: #0E0E0E;

    /* Bootstrap */
    --bs-gutter-x: 1.5rem;
    
    /* Tooltip */
    

}

 .modal.show .modal-dialog {
  transform: translate(0, 50%);
} 

.modal-dialog {
  background-color: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  padding: calc(var(--space-unit) * 7.5);
}

.modal-content {
  background-color: var(--color-bg-primary);
  border: none;
}

.close-modal {
  width: 10px;
  height: 10px;
  position: relative;
  background: none;
  outline: none;
  border: none;
}

.close-modal__span::before {
  position: absolute;
  inset: 0;
  width: 10px;
  height: 1px;
  background-color: var(--color-text-white);
}

.cross {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 8px;
    right: 8px;
    cursor: pointer; 
    z-index: var(--z-index-5);
}

.cross::before,
.cross::after {
    content: '';
    position: absolute;
    background-color: var(--color-text-white);
    border-radius: 1px;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
}

.cross::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.cross::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cross:hover::before,
.cross:hover::after {
    background-color: #f0f0f0;
    transform: translate(-50%, -50%) rotate(45deg) scale(1.1);
}

.cross:hover::after {
    transform: translate(-50%, -50%) rotate(-45deg) scale(1.1);
}

.form-modal {
  margin-top: calc(var(--space-unit) * 8);
}

body {
    background-color: var(--color-bg-primary);
    font-family: "Montserrat";
}

body.hid {
    overflow: hidden;
}

.container {
    @media (min-width: 1500px) {
        max-width: 1520px;
    }

    @media (max-width: 500px) {
        padding-right: calc(var(--bs-gutter-x) * .8);
        padding-left: calc(var(--bs-gutter-x) * .8);
    }
}

.success-banner {
  media@ (max-width: 600px) {
    width: 100%;
    font-size: var(--font-size-xs);
    padding: 15px 0;
  }
}

.container--wider {
    max-width: 1600px;
    margin: 0 auto;
}

.content--right {
    margin-left: calc(var(--space-1) * 22);

    @media (max-width: 1500px) {
        margin-left: 0;
    }
}

.left-side {
    width: 140px;
    position: absolute;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-6);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    text-transform: uppercase;

    @media (max-width: 1500px) {
        position: relative;
        font-size: var(--font-size-xxs);
    }
}

h2.h2-title {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-3);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-little);
    color: var(--color-text-white);

    @media (max-width: 768px) {
        font-size: var(--font-size-2xl);
    }
}

h3.h3-title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);


    @media (max-width: 768px) {
        font-size: var(--font-size-base)
    }
}


/* Header */
header {
    width: 100%;
    top: 0;
    left: 0;
    z-index: var(--z-index-5);
    position: sticky;

    @media (max-width: 1000px) {
        margin-top: 0;
    }
}

header .container {
    @media (max-width: 1000px) {
        background-color: var(--color-bg-secondary);
        border-radius: 0 0 calc(var(--border-radius-base) - 10px) calc(var(--border-radius-base) - 10px);
    }
}

.header__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--space-unit) * 2.5);

    @media (max-width: 1000px) {
        padding: var(--space-2) 0;
    }
}

.header__content {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-text-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
    padding: var(--space-2) calc(var(--space-unit) * 5);

    @media (max-width: 1000px) {
        font-size: var(--font-size-xxs);
        background-color: transparent;
    }
}

.header__content-left {
    width: max-content;
    align-self: stretch;
    gap: var(--space-3);

    @media (max-width: 1000px) {
        gap: calc(var(--space-unit) * 5);
        padding: 0;
    }
}


.header__content-left .logo {
    @media (max-width: 1000px) {
        width: 100px;
    }
}

.header__content-left .logo svg {
    width: max-content;

    @media (max-width: 1024px) {
        width: 100%;
    }
}

.btn-mobile__phone {
    display: none !important;

    @media (max-width: 450px) {
        display: flex !important;
    }
}

.btn-mobile__phone-num {
    display: none !important;

    @media (max-width: 1000px) {
        display: flex !important;
    }

    @media (max-width: 450px) {
        display: none !important;
    }
}

.header__content-right {
    justify-content: space-between;
    align-self: stretch;
    gap: calc(var(--space-unit) * 2.5);

    @media (min-width: 1000px) {
        width: 100%;
    }

    @media (max-width: 767px) {
        display: none;
    }

}

.header__nav {
    height: 100%;
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-6);
    text-transform: uppercase;
}

.header__nav ul {
    height: 100%;
    display: flex;
}


.header__nav.main ul{
    gap: calc(var(--space-1) * 2);

}

.header__nav.links ul{
    gap: calc(var(--space-1) * 2);


    @media (max-width: 1500px) {
        gap: var(--space-1);
    }

}

.header__nav ul li {
    height: 100%;
}

.header__link {
    width: max-content;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.header__link.tg:hover svg path {
    fill: #0088CC;
}

.header__link.whatsapp:hover svg path {
    fill: #5DCA4A;
}

.header__link.max:hover svg path {
    fill: url(#maxGradient);
}

.header__nav.main .header__link:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    bottom: 0;
    background-color: var(--color-primary);
    transform: scaleX(0);
    /* transform-origin: right; */
    transition: transform 0.4s cubic-bezier(.02, 1.02, .26, 1.29);
}

.header__nav.main .header__link:hover {
    color: var(--color-primary);
}

.header__nav.main .header__link:hover:after {
    transform: scaleX(1);
    transform-origin: left;
}

.header__nav.main .header__link.active:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    transform: scaleX(1);
    left: 0;
    bottom: 0;
    background-color: var(--color-primary);
}

.header__wrapper .header__content-right .header__nav:first-child {
    @media (max-width: 1400px) {
        display: none;
    }
}

.header__wrapper .header__content-right .header__nav.links {
    @media (max-width: 767px) {
        display: none;
    }
}

.header__wrapper .header__content-right .header__buttons {
    @media (max-width: 1000px) {
        display: none;
    }
}

.header-wrapper__mob {
    display: none;
}



.header-wrapper__mob.active {
    padding-top: calc(var(--space-unit) * 12.5);
    padding-bottom: calc(var(--space-unit) * 6.25);

    @media (max-width: 1400px) {
        display: flex;
        flex-direction: column;
        gap: calc(var(--space-unit) * 12.5);
    }
}

.header-wrapper__mob.active::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: var(--color-bg-primary);
    background: var(--color-bg-primary);
    z-index: calc(var(--z-index-1) - 20);
}

.header-wrapper__mob .header__nav:first-child ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--space-unit) * 7);
}

.header-wrapper__mob .header__nav.links ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.header-wrapper__mob .header__nav.links ul li {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
    border-radius: var(--border-radius-circle);
}

.header-wrapper__mob .header__nav .header__link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
}

.header-wrapper__mob .btn {
    font-size: var(--font-size-lg);
}

.header-mob__phone {
    font-size: var(--font-size-lg);
    color: var(--color-text-white);
    text-align: center;
    text-decoration: underline;
}

/* Burger menu */
.burger {
    display: none;
    width: 80px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);

    @media (max-width: 1400px) {
        display: flex;
    }

    @media (max-width: 500px) {
        max-width: 80px;
    }

}

.burger-menu {
    position: relative;
    width: 20px;
    height: 15px;
}

.burger-menu span {
    position: absolute;
    width: 20px;
    height: 1px;
    background-color: var(--color-primary);
    top: 50%;
}

.burger-menu:before {
    position: absolute;
    content: '';
    top: 0;
    width: 20px;
    height: 1px;
    background-color: var(--color-primary);
}

.burger-menu:after {
    position: absolute;
    content: '';
    bottom: 0;
    width: 20px;
    height: 1px;
    background-color: var(--color-primary);
}


/* Buttons */
.btn {
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    border-radius: var(--border-radius-base);
    padding: var(--space-btn-y) var(--space-btn-x);
}

.btn--primary {
    color: var(--color-bg-primary);
    background-color: var(--color-primary);
}

.btn--primary:hover {
    color: var(--color-bg-primary);
    background-color: var(--color-primary-hover);
}


.btn--secondary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-white);
    border: 2px solid color-mix(in srgb, var(--color-text-white) 20%, transparent);
}

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

.btn--base {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-unit) * 3);
    font-size: var(--font-size-sm);
    color: var(--color-text-white);
    background-color: var(--color-bg-secondary);
}

.btn--base:hover {
    color: var(--color-text-white);
    background-color: color-mix(in srgb, var(--color-text-white) 10%, transparent);
}

.header__buttons {
    display: flex;
    gap: calc(var(--space-1) * 2);
    
    @media (max-width: 1500px) {
        gap: var(--space-unit);
    }
}

.header__buttons button {
    min-width: max-content;
    font-size: var(--font-size-sm);
}

.header__buttons a {
  min-width: max-content;
  font-size: var(--font-size-sm);
}

/* Main */
/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: calc(var(--space-unit) * 20);
    padding-bottom: var(--space-unit);

    @media (max-width: 1200px) {
        margin-top: calc(var(--space-unit) * 10);
    }
}

.hero__background {
    position: absolute;
    inset: 0;
    background: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 15%, rgba(255, 186, 65, 1) 100%);
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg);
}

.hero__background img {
    user-select: none;
}

.hero__background .hero__main-bg {
    position: absolute;
    width: 100%;
    bottom: 0;
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg);
    z-index: var(--z-index-2);

    @media (max-width: 767px) {
        display: none;
    }
}

.hero__background .hero__main-bg.mob {
    display: none;
    height: 390px;

    @media (max-width: 767px) {
        display: block;
    }
}

.hero__vesna-bg{
    width: 100%;
    position: relative;
    z-index: var(--z-index-1);
}

.vesna-bg__container,
.vesna-bg__container.second{
    position: absolute;
    top: 16%;

    @media (min-width: 1400px) and (max-width: 1500px) {
        width: 50%;
    }

    @media (min-width: 1200px) and (max-width: 1400px) {
        width: 45%;
        top: 30%;
    }

    @media (max-width: 1200px) {
        display: none;
    }
}


.vesna-bg__container.second::after{
    content: "2.0";
    position: absolute;
    top: 15%;
    right: -5%;
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-3);
    color: var(--color-text-white);
    z-index: var(--z-index-1);

    @media (max-width: 1200px) {
        font-size: var(--font-size-lg);

    }
}



.hero .container {
    padding-bottom: calc(var(--bs-gutter-x) * .8);
}

.hero h1 {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-3);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-little);
    color: var(--color-text-white);
    margin-left: calc(var(--space-1) * 22);

    @media (max-width: 1500px) {
        margin-left: calc(var(--space-1) * 7);
    }

    @media (max-width: 1400px) {
        margin-left: 0;
    }

    @media (max-width: 1024px) {
        font-size: var(--font-size-2xl);
    }
}

.hero h1 br {
    @media (min-width: 1200px) and (max-width: 1400px) {
        display: none;
    }
}

.hero__top {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: var(--z-index-3);

    @media (max-width: 1200px) {
        flex-direction: column;
        gap: calc(var(--space-unit) * 5);
    }
}

.hero__content-right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 10);


}

.hero__benefits {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-3) * 2);

    @media (max-width: 1024px) {
        gap: 0;
        justify-content: space-between;

    }
}

.hero__benefit-item {
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 3);

    @media (max-width: 1024px) {
        display: grid;
        grid-template-rows: 1fr 1fr;
    }
}

.hero__benefit-item h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-little);
    color: var(--color-primary);
    text-transform: uppercase;

    @media (max-width: 1024px) {
        font-size: var(--font-size-xl);
    }
}

.hero__benefit-item p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    text-transform: capitalize;
    word-break: break-all;

    @media (max-width: 1024px) {
        font-size: var(--font-size-xxs);
    }
}

.hero__benefit-item p svg {

    @media (max-width: 1024px) {
        width: 14px;
        height: 14px;
    }
}

.hero__marketplaces {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-unit) * 6);

    @media (max-width: 768px) {
        gap: calc(var(--space-unit) * 3);
    }
}

.hero__marketplaces-images {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-unit) * 1.5);
}

.hero__marketplaces-images .marketplace {
    @media (max-width: 768px) {
        width: 26px;
        height: 26px;
    }
}

.hero__marketplaces-images .marketplace svg {
    @media (max-width: 768px) {
        width: 100%;
        height: 100%;
    }
}

.hero__marketplaces p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);

    @media (max-width: 768px) {
        font-size: var(--font-size-xxs);
    }
}

.hero__button button {
    font-size: var(--font-size-base);
}


.hero__button-desc.hero__button {
    @media (max-width: 768px) {
        display: none;
    }
}

.hero__button-mob.hero__button {
    display: none;

    @media (max-width: 768px) {
        display: block;
        position: relative;
        z-index: var(--z-index-2);
    }
}

.hero__button-mob {
    width: 100%;
}

.hero__button-mob.hero__button button {
    height: 60px;
    width: 100%;
    font-size: var(--font-size-base);
}

.hero__bottom {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-unit) * 10);
    margin-top: calc(var(--space-unit) * 42);
    z-index: var(--z-index-3);

    @media (max-width: 768px) {
        flex-direction: column;
        gap: calc(var(--space-unit) * 4);
    }
}


.hero__bottom-left {
    font-size: var(--font-size-xl);
    color: var(--color-text-white);
    background: rgba(255, 255, 255, 0.09);
    border-radius: var(--border-radius-md);
    backdrop-filter: blur(20px);
    padding: calc(var(--space-unit) * 7) var(--space-3);

    @media (max-width: 768px) {
        font-size: var(--font-size-base);
        padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 4.5);
    }
}

.hero__bottom-left p br {
    display: block;

    @media (max-width: 1200px) {
        display: none;
    }
}


.hero__bottom-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hero__bottom-right-item {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-unit);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-6);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    text-transform: uppercase;

    @media (max-width: 768px) {
        font-size: var(--font-size-xxs);
    }
}

/* audience */

.audience {
    position: relative;
    margin-top: calc(var(--space-unit) * 37.5);

    @media (max-width: 1200px) {
        margin-top: calc(var(--space-unit) * 10);
    }
}

.audience__content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.audience__content-right {
    display: flex;
    flex-direction: column;

    @media (max-width: 1200px) {
        width: 100%;
    }
}

.audience__content-right h2 {
    margin-bottom: calc(var(--space-unit) * 17);

    @media (max-width: 1200px) {
        margin-bottom: calc(var(--space-unit) * 8);
    }
}

.audience__items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 20);


    @media (max-width: 768px) {
        gap: calc(var(--space-unit) * 7.5);
    }
}

.audience__items-row {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 25);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding-bottom: calc(var(--space-unit) * 7);


    @media (min-width: 1200px) and (max-width: 1400px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        justify-content: space-between;
    }


    @media (max-width: 1200px) {
        flex-direction: column;
        gap: calc(var(--space-unit) * 7.5);
        border-bottom: 0;
        padding-bottom: 0;
    }


}

.audience__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-unit) * 10);


    @media (max-width: 1400px) {
        gap: 0;
        justify-content: space-between;
    }

    @media (max-width: 1200px) {
        flex-direction: row-reverse;
        gap: 0;
        justify-content: space-between;

        border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
        padding-bottom: calc(var(--space-unit) * 7.5);
    }
}

.audience__item svg {
    @media (max-width: 767px) {
        width: 80px;
    }
}

.audience__item-right {
    display: flex;
    flex-direction: column;
    width: 460px;
    gap: calc(var(--space-unit) * 5);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);

    /* @media (max-width: 1024px) {
      width: 300px;
    } */

    @media (max-width: 768px) {
        width: 216px;
    }


}

.audience__item-right .h3-title {
    font-weight: var(--font-weight-4);
}

.audience__content-right p {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-4);
    opacity: .5;

    /* @media (max-width: 1024px) {
      font-size: var(--font-size-xs);
    } */
}

/* Team perks */

.team-perks {
    position: relative;
    margin-top: calc(var(--space-unit) * 30);
    padding: calc(var(--space-unit) * 25) 0;

    @media (max-width: 768px) {
        padding: calc(var(--space-unit) * 12.5) 0;
    }
}

.team-perks__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-lg);
    z-index: 0;
}

.team-perks__content {
    position: relative;
    z-index: var(--z-index-1);
}

.team-perks__content-right {
    display: flex;
    flex-direction: column;
}

.team-perks__content-right .h2-title {
    margin-bottom: calc(var(--space-unit) * 25);

    @media (max-width: 768px) {
        margin-bottom: calc(var(--space-unit) * 10);
    }
}

.team-perks__items-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(var(--space-unit) * 12);
    row-gap: calc(var(--space-unit) * 20);

    @media (max-width: 1024px) {
        grid-template-columns: repeat(1, 1fr);
        row-gap: calc(var(--space-unit) * 10);
    }
}

.team-perks__item-image {
    position: relative;
    margin-bottom: var(--space-3);
}

.team-perks__item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    border-radius: var(--border-radius-xl);
}

.team-perks__item-image__month {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(0, 50%);
    z-index: var(--z-index-1);
    margin-left: calc(var(--space-unit) * 12.5);

    @media (max-width: 768px) {
        margin-left: 5%;
    }
}

.team-perks__item-image__month p {
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-6);
    line-height: var(--line-height-tight);
    color: var(--color-bg-primary);
    background-color: var(--color-text-white);
    border-radius: 0 var(--border-radius-sm) 0 var(--border-radius-sm);
    padding: var(--space-unit) calc(var(--space-unit) * 3);


}

.team-perks__item-row {
    width: 460px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: calc(var(--space-unit) * 9);
    align-items: start;

    @media (max-width: 768px) {
        width: 100%;
        grid-template-columns: 1.5fr 1fr;
        gap: var(--space-unit);
        row-gap: calc(var(--space-unit) * 2.5);
    }
}


.team-perks__item-left-top {
    grid-column: 1;
    grid-row: 1;

    @media (max-width: 1200px) {
        align-items: flex-end;
    }
}

.team-perks__item-left-top h3 {
    @media (max-width: 1200px) {
        text-align: end;
    }
}

.team-perks__item-left-bot {
    display: flex;
    justify-content: flex-end;
}

.team-perks__item-left-top {
    grid-column: 1;
    grid-row: 1;
}

.team-perks__items-right-top {
    grid-column: 2;
    grid-row: 1;
}

.team-perks__item-left > button {
    grid-column: 1;
    grid-row: 2;
}

.team-perks__item-right > p {
    grid-column: 2;
    grid-row: 2;
}

.team-perks__item-left-top,
.team-perks__items-right-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
}

.team-perks__items-right-top {
    @media (max-width: 768px) {
        grid-column: 1;
    }
}

.team-perks__item-left {
    @media (max-width: 768px) {
        grid-column: 2;
    }
}

.team-perks__item-rigth {
    @media (max-width: 768px) {
        grid-column: 1;
    }
}

.team-perks__item-left,
.team-perks__item-right {
    display: contents;
}


.team-perks__item-row .h3-title {
    color: var(--color-text-white);
}

.team-perks__item-left-top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 2);

    @media (max-width: 768px) {
        grid-column: 2;
    }
}

.team-perks__item-left .h3-title {
    width: 180px;
    font-weight: var(--font-weight-7);

    @media (max-width: 768px) {
        width: 100%;
    }
}

.team-perks__item-left p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    opacity: .5;

    @media (max-width: 768px) {
        font-weight: var(--font-size-xs);
    }
}

.team-perks__item-left button {
    width: 100%;
    font-size: var(--font-size-sm);

    @media (max-width: 768px) {
        display: none;
        width: 90px;
        grid-column: 2;
    }
}

.team-perks__item-left button.mob {
    display: none;
    font-size: var(--font-size-sm);

    @media (max-width: 768px) {
        display: block;
    }
}

.team-perks__item-right .h3-title {
    font-weight: var(--font-weight-4);

}

.team-perks__item-right p {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;

    @media (max-width: 768px) {
        grid-column: 1;
    }
}


/* Location Advantage */
.location-advantage {
    position: relative;
    margin-top: var(--space-unit);
    padding: calc(var(--space-unit) * 25) 0;
}

.location-advantage__background {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-lg);

    @media (max-width: 767px) {
        display: none;
    }
}

.location-advantage__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    user-select: none;
    border-radius: var(--border-radius-lg);
    z-index: -1;
}


.location-map__background.locations-first-gr {
    z-index: -1;
}

.location-map__background.locations-third-gr,
.location-map__background.locations-second-gr {
    z-index: -1;
}

.location-map__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.location-tooltip {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: right;
    z-index: var(--z-index-1);

    @media (max-width: 1200px) {
        display: none;
    }
}

.location-tooltip svg {
    width: auto;
    height: 100%;
    position: absolute;
    right: 0;
}

.location-tooltip.active {
    display: block;
}

.location-abs {
    position: absolute;
    width: 100%;
    height: 100%;
}

.location-city__name,
.location-road__name {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.location-city__name img:last-child {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: .4s ease-in-out;
}

.location-city__name.active img:first-child {
    opacity: 0;
}

.location-city__name.active img:last-child {
    opacity: 1;
}

.location-advantage .container {
    position: relative;
}

.location-advantage__content {
    position: relative;
}

.location-advantage__content-right {
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 12);

    @media (max-width: 767px) {
        width: 100%;
    }
}

.location-advantage__content-right-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 14);

    @media (max-width: 767px) {
        gap: calc(var(--space-unit) * 7.5);
    }
}

.location-advantage__map {
    z-index: var(--z-index-4);
    @media (max-width: 768px) {
        position: relative;
    }
}

.location-advantage__background-mob {
    display: none;

    @media (max-width: 767px) {
        display: block;
        border-radius: var(--border-radius-md);
    }
}

.location-advantage__background-mob img {
    width: 100%;
    height: 100%;
    user-select: none;
    border-radius: var(--border-radius-md);
}

.location-advantage__background-mob img:first-child {
  position: absolute;
}

.location__mob-png {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

}


.locations-row {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 2.5);
    z-index: var(--z-index-4);

    @media (max-width: 1200px) {
        width: 100%;
        gap: var(--space-unit);
        margin-bottom: calc(var(--space-unit) * 2);
        padding: 0 calc(var(--space-unit) * 2);
    }

    @media (max-width: 767px) {
        position: absolute;
        justify-content: space-between;
        bottom: 0;
    }
}

.location-item {
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space-unit) * 3);
    user-select: none;
    cursor: pointer;
    border-radius: var(--border-radius-base);
    background-color: color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 4);
    transition: .2s ease-in-out;

    @media (max-width: 1200px) {
        width: 100%;
        padding: 0;
    }

    @media (max-width: 1024px) {
        height: 115px;
    }

    @media (max-width: 767px) {
        height: 124px;
    }

    @media (max-width: 387px) {
        height: 100px;
    }
}

.location-item__icon {
    border-radius: calc(var(--border-radius-sm) * 2);
    background-color: color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding: calc(var(--space-unit) * 2);
    transition: .4s ease-in-out;

    @media (max-width: 362px) {
        width: 40px;
        height: 40px;
    }
}

.location-item svg {
    @media (max-width: 362px) {
        width: 100%;
        height: 100%;
    }
}

.location-item svg path {
    stroke: var(--color-primary);


}

.location-item p {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    text-align: center;
    transition: .4s ease-in-out;

    @media (max-width: 768px) {
        font-size: var(--font-size-xs);
    }
}


.location-item:hover {
    background-color: var(--color-text-white);
    opacity: .5;
}

.location-item:hover .location-item__icon {
    background-color: var(--color-primary);
}

.location-item:hover svg path {
    stroke: var(--color-bg-primary);
}

.location-item:hover p {
    color: var(--color-bg-primary);
}

.location-row__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.location-advantage .h3-title {
    font-weight: var(--font-weight-4);
    color: var(--color-text-white);
}

.location-advantage hr {
    height: 1px;
    background-color: var(--color-primary);
    opacity: 1;
}

.location-advantage h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);

    @media (max-width: 768px) {
        font-size: var(--font-size-xs);
    }
}

.location-advantage__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: var(--z-index-4);

    @media (max-width: 768px) {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--space-unit) * 2.5);
    }
}


/* REQUEST */
.request {
    position: relative;
    margin-top: var(--space-unit);
    padding: calc(var(--space-unit) * 25) 0;


    @media (max-width: 1200px) {
        padding-bottom: calc(var(--space-unit) * 4);
    }
}

.request__background {
    position: absolute;
    inset: 0;
    background: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 186, 65, 1) 100%);
    border-radius: var(--border-radius-lg);
    opacity: .2;
    z-index: -1;

    @media (max-width: 768px) {
        border-radius: var(--border-radius-md);
    }
}

.request__content {
    position: relative;
    z-index: var(--z-index-1);
}

.request-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: calc(var(--space-unit) * 22);

    @media (max-width: 1024px) {
        display: flex;
        flex-direction: column;
        gap: calc(var(--space-unit) * 7.5);
    }
}

.request-item .h2-title {
    margin-bottom: calc(var(--space-unit) * 18);

    @media (max-width: 1024px) {
        margin-bottom: calc(var(--space-unit) * 7.5);
    }
}

.request-item__desc {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;

    @media (max-width: 1024px) {
        font-size: var(--font-size-sm);
    }
}


.form-row {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.form-row.modal {
  justify-content: center;
  
  @media (max-width: 767px) {
    padding: calc(var(--space-unit) * 5);
  }
}

.form-group {
    width: 100%;
    position: relative;
}


.request-item form .h3-title {
    font-weight: var(--font-weight-6);
    color: var(--color-primary);
    margin-bottom: calc(var(--space-unit) * 9);
}

.request-form__inputs {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 10);
    margin-bottom: calc(var(--space-unit) * 12.5);
}

.request-form__inputs .request-form__inputs-row {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 10);

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

form {
    height: 100%;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    background: none;
}

input::placeholder {
    color: color-mix(in srgb, var(--color-text-white) 50%, transparent);
    visibility: hidden;
}

.form-group input {
    width: 100%;
    font-size: var(--font-size-base);
    color: color-mix(in srgb, var(--color-text-white) 30%, transparent);
    background: none;
    outline: none;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding-bottom: calc(var(--space-unit) * 3);
}

.form-group input:hover {
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 30%, transparent);
}

.form-group input:focus {
    color: color-mix(in srgb, var(--color-text-white) 100%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 100%, transparent);
}

.form-group .form-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    position: absolute;
    left: 0;
    transition: .2s ease all;
    pointer-events: none;
    user-select: none;
    margin-bottom: calc(var(--space-unit) * 3)
}

.form-group input:focus + .form-label,
.form-group input:not(:placeholder-shown) + .form-label {
    left: 0;
    top: calc(var(--space-unit) * -4);
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-text-white) 50%, transparent);
}

.form-group.secondary input:focus + .form-label,
.form-group.secondary input:not(:placeholder-shown) + .form-label {
    color: var(--color-text-white);
}

.form-group input:focus::placeholder {
    visibility: visible;
    user-select: none;
}

.form-submit {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);

    @media (max-width: 1200px) {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    @media (max-width: 768px) {
        flex-direction: column-reverse;
    }
}

.form-submit button {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    white-space: nowrap;

    @media (max-width: 768px) {
        width: 100%;
    }
}

.form-submit .form-group {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 2.5);
}

.form-submit .form-group input {
    width: max-content;
}

.form-submit .form-group .personal-label {
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    user-select: none;
    opacity: .3;
}

.form-submit .form-group .personal-label a {
    text-decoration: underline;
}

.checkmark {
    position: relative;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    background-color: color-mix(in srgb, var(--color-text-white) 0%, transparent);
    border: 1px solid white;
    border-radius: calc(var(--border-radius-sm) - 6px);
    transition: .2s ease-in-out;
}

.personal-data:checked ~ .checkmark {
    background-color: color-mix(in srgb, var(--color-text-white) 100%, transparent);
}

.checkmark:after {
    content: url(../images/check.svg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -45%) scale(0);
    transition: transform 0.4s cubic-bezier(0, -0.57, .27, .69);

}

.personal-data:checked ~ .checkmark:after {
    width: 100%;
    height: 100%;
    text-align: center;
    transform: translate(-50%, -50%) scale(1.3);
}


/* Region */

.region {
    position: relative;
    margin-top: calc(var(--space-unit) * 25);
}

.region__content {
    margin-top: calc(var(--space-unit) * 25);

    @media (max-width: 1024px) {
        margin-top: calc(var(--space-unit) * 8);
    }
}

.region .container--wider {
    overflow: hidden;

    @media (max-width: 767px) {
        padding: 0 calc(var(--space-unit) * 3);
    }

}

swiper-container {
    width: 100%;
}

.region-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space-unit) * 10);

    @media (max-width: 1024px) {
        display: flex;
        flex-direction: column;
        gap: calc(var(--space-unit) * 2.5);
    }
}

.region-item img {
    width: 600px;
    border-radius: var(--border-radius-lg);
    user-select: none;

    @media (max-width: 1024px) {
        width: 100%;
    }
}

.region-item__text {
    width: 390px;
    display: grid;
    grid-template-rows: auto auto auto;
    align-self: stretch;
    height: 100%;
    align-content: space-between;

    @media (max-width: 1200px) {
        width: 100%;
    }

    @media (max-width: 1024px) {
        width: 100%;
        gap: calc(var(--space-unit) * 2.5);
        padding: 0 calc(var(--space-unit) * 2.5);
    }
}

.region-item h3 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);

    @media (max-width: 1024px) {
        font-size: var(--font-size-xl);
    }
}

.region-item .region-item__text-desc {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;

    @media (max-width: 1024px) {
        font-size: var(--font-size-sm);
    }
}

.region-item .region-item__text-num {
    font-size: calc(var(--font-size-4xl) * 2);
    font-weight: var(--font-weight-4);
    line-height: calc(var(--line-height-tight) - .2);
    color: transparent;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 186, 65, 1) 100%);
    background-clip: text;

    @media (max-width: 1024px) {
        font-size: calc(var(--font-size-xl) * 2);
    }
}

swiper-container::part(scrollbar) {
    width: 100%;
    height: 2px;
    position: relative;
    left: 0;
    background: color-mix(in srgb, var(--color-text-white) 10%, transparent);
    margin-top: calc(var(--space-unit) * 9);
}


/* Kazan */

.kazan {
    position: relative;
    margin-top: calc(var(--space-unit) * 25);
}

.kazan .container--wider {
    overflow: hidden;

    @media (max-width: 767px) {
        padding: 0 calc(var(--space-unit) * .3);
    }

}

.kazan__content {
    overflow: hidden;
    position: relative;

    @media (max-width: 1024px) {
        margin-top: calc(var(--space-unit) * 10);
    }
}

.kazan__right {
    margin-bottom: var(--space-unit);
}

.kazan__right-row {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 7.5);

    @media (max-width: 1200px) {
        flex-direction: column;
        align-items: center;
    }
}

.kazan__right-row .kazan__right-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 25);

    @media (max-width: 1024px) {
        gap: 0;
    }
}

.kazan__right-item .mob {
    display: none;

    @media (max-width: 1024px) {
        display: block;
    }
}

.kazan__right-item .mob svg {
    width: 100%;
}

.kazan__right-item:last-child {

    @media (max-width: 1024px) {
        display: none;
    }
}

.kazan__right-row .kazan__right-item p {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;

    @media (max-width: 1024px) {
        font-size: var(--font-size-base);
    }
}

.swiper-item {
    width: 480px;
    display: grid;
    grid-template-rows: auto auto;
    align-self: stretch;
    height: 100%;
    align-content: space-between;

}


.swiper-item img {
    border-radius: var(--border-radius-xl);
    user-select: none;
    margin-bottom: var(--space-3);

    @media (max-width: 1024px) {
        width: 100%;
    }
}

.swiper-item__text {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    padding: 0 calc(var(--space-unit) * 12.5);

    @media (max-width: 1024px) {
        padding: 0 calc(var(--space-unit) * 2.5);
    }
}

.swiper-item .h3-title {
    font-weight: var(--font-weight-4);
    color: var(--color-text-white);
}

.swiper-item .swiper-item__desc {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);

    @media (max-width: 1024px) {
        font-size: var(--font-size-base);
    }
}

swiper-container,
swiper-container::part(container) {
    overflow: visible !important;
}

swiper-slide {
    overflow: visible !important;
}


.swiper__custom-buttons {
    position: absolute;
   
    @media (max-width: 1024px) {
        display: none;
    }
}

.swiper__custom-buttons.sw {
    display: flex;
    right: 0;
    bottom: 10%;
}

.swiper__custom-buttons.sw {
  @media (max-width: 1024px) {
    display: none;
  }
}

.custom-prev {
    left: 20px;
}

.custom-next {
    right: 20px;
}


.custom-prev,
.custom-next {
    height: 60px;
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-base);
    padding: 0 calc(var(--space-unit) * 14);
    transition: .4s ease-in-out;
}

.custom-prev:hover,
.custom-next:hover {
    background-color: var(--color-primary-hover);
}

.custom-prev.swiper-button-disabled,
.custom-next.swiper-button-disabled {
    color: #fff;
    background-color: var(--color-bg-secondary);
    border-radius: 50%;
    width: 60px;
    padding: 0;
}

.custom-prev.swiper-button-disabled:hover,
.custom-next.swiper-button-disabled:hover {

    background-color: color-mix(in srgb, var(--color-text-white) 10%, transparent);
}

.custom-prev,
.custom-next {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-prev {
    transform: rotate(180deg);
}

.custom-prev svg path,
.custom-next svg path {
    stroke: var(--color-bg-primary);
}

.custom-prev.swiper-button-disabled svg path,
.custom-next.swiper-button-disabled svg path {
    stroke: var(--color-text-white);
}


/* Park */

.park {
    position: relative;
    overflow: hidden;
    margin-top: calc(var(--space-unit) * 30);
    padding: calc(var(--space-unit) * 25) 0 calc(var(--space-unit) * 22.2) 0;

    @media (max-width: 767px) {
        padding: 0;
    }
}

.park__background {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.park__background-desc {
    height: 100%;

    @media (max-width: 767px) {
        display: none;
    }
}

.park__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    user-select: none;
}

.park__background-desc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.71) 40%, rgba(0, 0, 0, 0.2) 74%);

    @media (max-width: 767px) {
        display: none;
    }
}


.park__background-mob {
    height: 600px;
    width: 100%;
    display: none;
    border-radius: var(--border-radius-lg);

    @media (max-width: 767px) {
        position: absolute;
        display: block;
    }


    @media (min-width: 640px) {
        height: 100%;
    }
}

.park__background-mob::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle farthest-corner at 50% 50%, rgba(255, 255, 255, 0) 0.8%, rgba(0, 0, 0, .7) 67.8%, rgba(0, 0, 0, .8) 100%);
    border-radius: var(--border-radius-lg);
}

.park__background-mob img {
    width: 100%;
    border-radius: var(--border-radius-lg);
}


.park__content {
    position: relative;
    padding-top: calc(var(--space-unit) * 7.5);
}

.park__right {
    width: 520px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 6);

    @media (max-width: 1024px) {
        width: 520px;
    }

    @media (max-width: 767px) {
        width: 100%;
    }
}

.park__right-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 8);

    @media (max-width: 1024px) {
        gap: calc(var(--space-unit) * 22);
    }
}

.park-right-row__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 8);
}

.park-right-row__item:first-child {
    @media (max-width: 767px) {
        gap: calc(var(--space-unit) * 50);
    }
}

.park-right-row__top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 7.5);


}

.park__desc {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);

    @media (max-width: 1024px) {
        font-size: var(--font-size-sm);
    }
}

.park-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.park-row.non-circle {

    @media (max-width: 1024px) {
        flex-direction: column;
        gap: calc(var(--space-unit) * 5);
    }
}


.park-row.park-right-row__bottom {
    width: 100%;
}

.park-item {
    display: flex;
    flex-direction: column;
}

.park-item.circle-item {
    width: 140px;
    gap: calc(var(--space-unit) * 3);

    @media (max-width: 1024px) {
        width: 124px;
    }

    @media (max-width: 387px) {
        width: 90px;
    }
}

.park-item__top {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;

}

.park-item.circle-item .park-item__top {
    aspect-ratio: 1 / 1;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    backdrop-filter: blur(8px);


    @media (max-width: 1024px) {
        width: 124px;
        height: 124px;
    }

    @media (max-width: 387px) {
        width: 90px;
        height: 90px;
    }

}

.park-item__circle {
    width: 140px;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.park-item__top .park-item__circle.circular-progress::before {
    content: "";
    width: 100%;
    aspect-ratio: 1 / 1;
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;

}

.park-item__top .park-item__circle.circular-progress {
    background: conic-gradient(transparent 0deg, rgb(255 255 255 / 10%) 0deg);
    mask: radial-gradient(circle, transparent 60%, black 70%);
    backdrop-filter: blur(20px);
}

.circle-item .park-item__title {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.circle-item .park-item__title p {
    color: var(--color-primary);
}

.progress-value.park-item__title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    z-index: var(--z-index-1);
}

.park-item__title p {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    z-index: var(--z-index-1);

    @media (max-width: 1024px) {
        font-size: var(--font-size-4xl);
    }
}

.park-item__title p count-up {
    color: var(--color-primary);
}

.park-item__title p span {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    z-index: var(--z-index-1);

    @media (max-width: 1024px) {
        font-size: var(--font-size-sm);
    }
}

.circle-item .park-item__title p span {
    color: var(--color-primary);
}

.park-item__bottom p {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);

    @media (max-width: 1024px) {
        font-size: var(--font-size-xs);
    }
}

.park-item.circle-item .park-item__bottom p {
    text-align: center;
}

.park__right-row .h3-title {
    color: var(--color-text-white);
    font-weight: var(--font-weight-7);
}

.park-item.non-circle {
    width: 153px;
    gap: calc(var(--space-unit) * 3.5);

    @media (max-width: 1024px) {
        width: 100%;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }
}

.park-item.non-circle .park-item__top {
    gap: calc(var(--space-unit) * 3);

    @media (max-width: 1024px) {
        width: max-content;
    }
}

.park-item.non-circle .park-item__top svg {

    @media (max-width: 1024px) {
        display: none;
    }
}

.park-row.non-circle .park-item .park-item__bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-unit);
}

.park-row.non-circle .park-item .park-item__bottom svg {
    display: none;

    @media (max-width: 1024px) {
        display: block;
    }
}

.park-item__bottom-text {

    @media (max-width: 1024px) {
        width: 100px;
    }
}

.park-item__bottom span {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    opacity: .5;
}

.park-row.park-row__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: calc(var(--space-unit) * 4);

    @media (max-width: 767px) {
        grid-template-columns: 1fr;
    }
}

.park-item.park-item__bottom {
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-unit) * 2.5);
}

.park-item.park-item__bottom p {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);

    @media (max-width: 1024px) {
        font-size: var(--font-size-xs);
    }
}

.park__button {
    position: absolute;
    right: 0;
    bottom: 0;

    @media (max-width: 1024px) {
        position: relative;
        margin-top: calc(var(--space-unit) * 7.5);
    }
}


/* Infastructure */

.infastructure {
    position: relative;
    margin-top: calc(var(--space-unit) * 25);
}

.infastructure__right-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: calc(var(--space-unit) * 22.5);

    @media (min-width: 1000px) and (max-width: 1400px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 1200px) {
        gap: calc(var(--space-unit) * 24);
    }

    @media (max-width: 1024px) {
        display: block;
    }
}

.infastructure-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--space-unit) * 3);
}

.infastructure-title__icon {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--space-unit) * 2.5);
    background-color: var(--color-bg-secondary);
    border-radius: calc(var(--border-radius-sm) * 2);
    padding: calc(var(--space-unit) * 4);

    @media (max-width: 1024px) {
        display: flex;
    }
}

.infastructure-title__icon p {
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-6);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
}


.infastructure__map {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.infastructure__map::-webkit-scrollbar {
    height: 2px;
}

.infastructure__map::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
}




.infastructure-menu {
    @media (max-width: 1024px) {
        display: none;
        background-color: var(--color-bg-primary);
        z-index: var(--z-index-4);
        height: 100vh;
    }
}

.infastructure-menu.active {
    width: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
}

.infastructure-menu .infastructure-menu__top {
    display: none;
}

.infastructure-menu.active .infastructure-menu__top {

    @media (max-width: 1024px) {
        display: block;
        width: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        background-color: var(--color-bg-secondary);
        border-radius: 0 0 calc(var(--border-radius-sm) * 2) calc(var(--border-radius-sm) * 2);
        padding: calc(var(--space-unit) * 6) 0 calc(var(--space-unit) * 6);
        z-index: var(--z-index-1);

    }
}

.infastructure-menu__top .container {
    display: none;
    flex-direction: row;
    justify-content: space-between;

    @media (max-width: 1024px) {
        display: flex;
    }
}

.infastructure-menu__top p {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
}

.infastructure-right-item__row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 5);

    @media (max-width: 1024px) {
        padding-top: calc(var(--space-unit) * 28);
        padding-bottom: calc(var(--space-unit) * 12.5);
    }
}

.infastructure-right-item__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-unit) * 5);
    cursor: pointer;
    transition: .4s ease-in-out;
    border: 2px solid color-mix(in srgb, var(--color-primary) 0%, transparent);
    border-radius: calc(var(--border-radius-sm) * 2);
    padding: calc(var(--space-unit) * 2.5);

}

.infastructure-right-item__item:hover {
    opacity: .5;
}

.infastructure-right-item__item.active {
    border: 2px solid var(--color-primary);
    opacity: 1;
}

.infastructure-right-item__item-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-unit);
}

.infastructure-item-text__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);

    @media (max-width: 1024px) {
        font-size: var(--font-size-sm);
    }
}

.infastructure-item-text__desc {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    opacity: .4;

    @media (max-width: 1024px) {
        font-size: var(--font-size-xxs);
    }
}


/* Company Management */

.company-management {
    position: relative;
    margin-top: calc(var(--space-unit) * 32.5);
    padding-top: calc(var(--space-unit) * 100);

    @media (max-width: 1400px) {
        padding-top: 23%;
    }

    @media (max-width: 1200px) {
        margin-top: calc(var(--space-unit) * 10);
        padding-top: 30%;
    }

    @media (max-width: 850px) {
        padding-top: 35%;
    }

    @media (max-width: 700px) {
        padding-top: 50%;
    }

    @media (max-width: 500px) {
        padding-top: 80%;
    }

    @media (max-width: 430px) {
        padding-top: 104%;
    }
}

.company-management__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}


.company-management__bg img {
    width: 100%;
    border-radius: var(--border-radius-lg);
    user-select: none;
}


.company-management__bg .company-bg__desc {
    position: relative;
    display: block;
    max-height: 703px;

    @media (max-width: 1024px) {
        display: none;
    }
}

.company-bg__desc::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: linear-gradient(13deg, rgba(0, 0, 0, 0.71) 30%, rgba(0, 0, 0, 0.2) 75%);
    border-radius: var(--border-radius-lg);

    @media (max-width: 1024px) {
        display: none;
    }
}


.company-management__bg .company-bg__mob {
    position: relative;
    width: 100%;
    height: 500px;
    display: none;

    @media (max-width: 1024px) {
        display: block;
    }
}

.company-management__bg .company-bg__mob img {
    width: 100%;
    height: 100%;
}

.company-management__bg .company-bg__mob::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: linear-gradient(13deg, rgba(0, 0, 0, 0.71) 30%, rgba(0, 0, 0, 0.2) 75%);
    border-radius: var(--border-radius-lg)
}

.company-management__content .left-side {
    @media (max-width: 1200px) {
        width: max-content;
    }
}

.company-management__items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 20);
    margin-top: calc(var(--space-unit) * 38);

    @media (max-width: 1200px) {
        gap: calc(var(--space-unit) * 7.5);
    }

    @media (max-width: 1024px) {
        margin-top: calc(var(--space-unit) * 10);
    }
}

.company-management__items-row {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 25);

    @media (min-width: 1200px) and (max-width: 1400px) {
        gap: 0;
    }

    @media (min-width: 1024px) and (max-width: 1400px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 1024px) {
        flex-direction: column;
        gap: calc(var(--space-unit) * 7.5);
    }
}

.company-management__item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding-bottom: calc(var(--space-unit) * 7.5);
    column-gap: calc(var(--space-unit) * 10);

    @media (min-width: 1200px) and (max-width: 1400px) {
        gap: 0;
    }

    @media (max-width: 1200px) {
        flex-direction: row-reverse;
        column-gap: var(--space-unit);
    }
}

.company-management__item svg {
    width: 104px;
    height: 104px;

    @media (max-width: 1024px) {
        width: 80px;
        height: 80px;
    }
}

.company-management__item-text {
    width: 476px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 5);
    color: var(--color-text-white);

    @media (max-width: 1200px) {
        width: 100%;
    }
}

.copmany-management__item-text .h3-title {
    font-weight: var(--font-weight-4);
}

.company-management__item-text p {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-normal);
    opacity: .5;

    @media (max-width: 1024px) {
        font-size: var(--font-size-xs);
    }
}

.company-management__item-text p a {
  text-decoration: underline;
}

.copmany-management__buttons {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 2.5);
    margin-top: calc(var(--space-unit) * 7.5);

    @media (max-width: 1024px) {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Park Evolution */

.park-evolution {
    position: relative;
    margin-top: calc(var(--space-unit) * 25);
}

.park-evolution .container--wider {
    margin-top: calc(var(--space-unit) * 10);

    @media (max-width: 767px) {
        padding: 0 calc(var(--space-unit) * 3);
    }

}

.park-evolution__content {
    overflow: hidden;
    position: relative;
}

.park-evolution__right {
    position: relative;
}

.park-evolution__right .park-evolution__right-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 5.2);
}

.park-evolution__right .park-evolution__right-row p {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;
}


/* Requst Second */


.request--second {
    margin-top: calc(var(--space-unit) * 27.5);
}

.request--second .request__content-right .request-item .request-item__desc {
    font-size: var(--font-size-base);
}

.request-item__desc-second {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    margin-top: calc(var(--space-unit) * 5);
}


/* Founder */

.founder {
    position: relative;
    margin-top: calc(var(--space-unit) * 25);
}

.founder__content {
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding-bottom: calc(var(--space-unit) * 25);
}

.founder-right__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    @media (max-width: 1024px) {
        flex-direction: column;
    }
}

.founder-right__item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 12);

    @media (max-width: 1024px) {
        gap: calc(var(--space-unit) * 6);
    }
}

.founder-right__item.founder-text {
    width: 100px


    @media (max-width: 1024px) {
        width: 100%;
    }
}

.founder-img__mob {
    display: none;

    @media (max-width: 1024px) {
        display: block;
    }
}

.founder-img__desc {
    display: block;

    @media (max-width: 1024px) {
        display: none;
    }
}

.founder-img__mob img {
    width: 100%;
}

.founder-right__item.founder-img {
    position: relative;
    user-select: none;

    @media (max-width: 1024px) {
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%);

    }
}

.founder-right__item.founder-img::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, var(--color-bg-primary) 100%);
    user-select: none;
}

.founder-row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 7.5);
}

.founder-item__desc {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);

    @media (max-width: 1024px) {
        font-size: var(--font-size-sm);
    }
}

.founder-item__desc::before {
    content: "";
    width: 100px;
    height: 61px;
    position: absolute;
    left: 0;
    background-image: url(../images/founder-bg.svg);
    background-repeat: no-repeat;

    @media (max-width: 1500px) {
        position: relative;

        display: flex;
        margin-bottom: calc(var(--space-unit) * 6);
    }

    @media (max-width: 1024px) {
        width: 50px;
        height: 31px;
        background-size: cover;
    }
}

.founder-name {
    display: flex;
    flex-direction: column;
    gap: var(--space-unit);
}

.founder-name .h3-title {
    font-weight: var(--font-weight-7);
    color: var(--color-text-white);
}

.founder-name .founder-name__desc {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-primary);

    @media (max-width: 768px) {
        font-size: var(--font-size-xs);
    }
}


/* Cooperation */

.cooperation {
    position: relative;
    margin-top: calc(var(--space-unit) * 25);
}

.cooperation-right__row {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 7.5);
}

.cooperation__desc {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;
}

.cooperation-row {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 18);


    @media (min-width: 1200px) and (max-width: 1400px) {
        gap: calc(var(--space-unit) * 5);
    }

    @media (max-width: 1200px) {
        flex-direction: column;
        align-items: stretch;
    }
}

.cooperation-left__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    gap: calc(var(--space-unit) * 10);

    @media (max-width: 1024px) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.cooperation-left__row:has(> :nth-child(odd):last-child) > :last-child {
    grid-column: 2;
    justify-self: end;

    @media (max-width: 1024px) {
        grid-column: 1;

    }
}

.cooperation-left__item {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 5);

    @media (max-width: 1024px) {
        width: auto;
    }
}

.cooperation-left__item .cooperation-left-item__img {
    width: 40px;
}

.cooperation-left__item .cooperation-left-item__img img {
    user-select: none;
    width: 100%;
}

.cooperation-left-item__text {
    width: 271px;
    height: max-content;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 20%, transparent);
    padding-bottom: calc(var(--space-unit) * 5);

    @media (max-width: 767px) {
        width: 100%;
    }
}

.cooperation-left-item__text p {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
}

.cooperation-item {
    width: 430px;
    height: max-content;

    @media (max-width: 1024px) {
        width: 100%;
    }
}

swiper-container.hid {
    overflow: hidden !important;
}

swiper-slide.hid {
    border-radius: var(--border-radius-sm);
    overflow: hidden !important;
}

swiper-slide.hid img {
    width: 100%;
    user-select: none;
}

.cooperation-item {
    position: relative;
}

.cooperation-buttons {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-index-2);
}

.cooperation-buttons .swiper-cooperation {
    position: absolute;
    width: 40px;
    height: 40px;
    background: var(--color-text-white);
    padding: 0;
}

.cooperation-prev {
    left: -5%;
}

.cooperation-next {
    right: -5%;
}


.pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space-unit) * 2.5);
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: var(--border-radius-circle);
    background: var(--color-text-white);
    opacity: .1;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--color-text-white);
    opacity: 1;
}


/* Benefits */

.benefits {
    position: relative;
    padding-top: calc(var(--space-unit) * 25);
    padding-bottom: calc(var(--space-unit) * 30);

    @media (max-width: 768px) {
        padding-top: calc(var(--space-unit) * 12.5);
        padding-bottom: calc(var(--space-unit) * 6.25);
    }
}

.benefits__background {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-lg);
    background-color: var(--color-bg-secondary);
    z-index: -1;
}

.benefit__right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 22.5);
}

.h2-title .h2-primary-color {
    color: var(--color-primary);
}

.benefits__row {
    position: relative;
    column-count: 3;
    column-gap: 30px;

    /* display: grid;
    justify-content: space-between;
    grid-template-columns: 410px 440px 430px;
    grid-template-rows: auto;
    row-gap: calc(var(--space-unit) * 7.5); */

    @media (max-width: 1200px) {
        column-count: 2;
    }

    @media (max-width: 1024px) {
        display: flex;
        flex-direction: column;
    }
}

.benefits__item {
    position: relative;
    break-inside: avoid;
    /* width: 100%; */
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 8);
    border-radius: var(--border-radius-lg);
    background-color: var(--color-bg-primary);
    margin-bottom: calc(var(--space-unit) * 7.5);
    padding: calc(var(--space-unit) * 10) calc(var(--space-unit) * 5) calc(var(--space-unit) * 8) calc(var(--space-unit) * 10);
}

.benefits__item.non-tag .h3-title {
    width: 100%;
}

.benefits__item .h3-title {
    width: calc(100% - 120px);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-4);
    color: var(--color-text-white);

    @media (max-width: 768px) {
        font-size: var(--font-size-lg);
    }
}

.benefits__item .benefits__item-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;

    @media (max-width: 768px) {
        font-size: var(--font-size-xs);
    }
}

.benefits__item-tag {
    position: absolute;
    width: 110px;
    height: 110px;
    text-align: center;
    top: 0;
    right: 0;
    border-bottom-left-radius: var(--border-radius-lg);
    background-color: var(--color-bg-secondary);
    
    @media (max-width: 1500px) {
      width: 90px;
      height: 90px;
    }

    @media (max-width: 768px) {
        width: 80px;
        height: 80px;
    }
}

.benefits__item-tag img {
    user-select: none;

    @media (max-width: 768px) {
        width: 90%;
    }
}

.benefits__item-tag::before,
.benefits__item-tag::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
}

.benefits__item-tag::before {
    left: -30px;
    border-top-right-radius: var(--border-radius-lg);
    box-shadow: .5rem -.5rem 0 5px var(--color-bg-secondary);
}

.benefits__item-tag::after {
    right: 0;
    bottom: -30px;
    border-top-right-radius: var(--border-radius-lg);
    box-shadow: .5rem -.5rem 0 5px var(--color-bg-secondary);
}


/* Last News */

.last-news {
    position: relative;
    margin-top: calc(var(--space-unit) * 28.5);
}

.news__right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 20);

    @media (max-width: 1024px) {
        gap: calc(var(--space-unit) * 5);
    }
}

.last-news__row {
    display: grid;
    align-items: flex-end;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--space-unit) * 10);

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
    }
}

.last-news__item {
    position: relative;
    display: flex;
    justify-content: center;
}

.last-news__item a {
    position: relative;
}

.last-news__item-bg {
    z-index: -1;
}

.last-news__item-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(210deg, rgba(0, 0, 0, 0) 30%, var(--color-bg-primary) 70%);
}

.last-news__item-bg img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    user-select: none;
    
    @media (max-width: 768px) {
      height: 340px;
    }
}

.last-news__item-text {
    width: 100%;
    position: absolute;
    bottom: 0;
    margin-bottom: var(--space-3);
    padding-left: calc(var(--space-unit) * 3);

    @media (max-width: 1200px) {
        width: 100%;
    }
    
    @media (max-width: 400px) {
      margin-bottom: 0;
    }
}

.last-news__item-text .h3-title {
    font-weight: var(--font-weight-7);
    color: var(--color-text-white);

    @media (max-width: 1200px) {
        font-size: var(--font-size-base);
    }
}

.last-news__item-desc {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.last-news__item-desc p {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;
}

.last-news__item-desc img {
    user-select: none;
}

.last-news__btn {
    width: 100%;
}

.last-news__btn .btn--secondary {
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    justify-content: center;
}



/* FAQs */

.faqs {
    position: relative;
    margin-top: calc(var(--space-unit) * 25);
}

.faqs__row {
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--space-unit) * 12.5);

    @media (max-width: 768px) {
        margin-top: calc(var(--space-unit) * 7.5);
    }
}

.faq {
    position: relative;
    border-top: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
}

.faq:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
}

.faq__item .faq__inner::marker {
    display: none;
    content: "";
}

.faq__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transition: .4s ease-in-out;
    padding-top: calc(var(--space-unit) * 7);
    padding-bottom: calc(var(--space-unit) * 7);
}

.faq__inner .h3-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-6);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    transition: .4s cubic-bezier(.02, 1.02, .26, 1.29);

    @media (max-width: 768px) {
        font-size: var(--font-size-sm);
    }
}

.faq__detail:hover .faq__inner .h3-title {
    color: var(--color-primary);
}

.faq__detail[open] .faq__inner .h3-title {
    color: var(--color-primary);
}

.faq__inner .faq__inner-icon svg {
    transition: .4s cubic-bezier(.02, 1.02, .26, 1.29);
}

.faq__detail[open] .faq__inner .faq__inner-icon svg {
    transform: rotate(180deg);
}

.faq__text {
    overflow: hidden;
}

.faq__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: .4s cubic-bezier(.02, 1.02, .26, 1.29);
    padding-bottom: 0;
}

.faq__detail[open] + .faq__content {
    grid-template-rows: 1fr;
    padding-bottom: calc(var(--space-unit) * 7);
}

.faq__content .faq__text p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-little);
    color: var(--color-text-white);

    @media (max-width: 768px) {
        font-size: var(--font-size-sm);
    }
}


/* Foot Request */

.foot-request {
    position: relative;
    margin-top: calc(var(--space-unit) * 27.5);
}

.foot-request__row {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: var(--space-unit);

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
    }
}

.foot-request__right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 10);
}

.foot-request__right .request-item__desc {
    font-size: var(--font-size-base);

    @media (max-width: 1024px) {
        font-size: var(--font-size-sm);
    }
}

.foot-request__item {
    position: relative;
    padding-top: calc(var(--space-unit) * 25);
    padding-right: calc(var(--space-unit) * 22);
    padding-bottom: calc(var(--space-unit) * 27.5);
    padding-left: calc(var(--space-unit) * 9);

    @media (max-width: 1024px) {
        padding-top: calc(var(--space-unit) * 12.5);
        padding-right: 0;
        padding-bottom: calc(var(--space-unit) * 5);
        padding-left: 0;
    }
}

.foot-request__item:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: calc(var(--space-unit) * 25.5);

    @media (max-width: 1200px) {
        padding-right: calc(var(--space-unit) * 7);
        padding-left: calc(var(--space-unit) * 7);
    }

    @media (max-width: 1024px) {
        padding-right: 0;
        padding-left: 0;
    }
}


.foot-request form .form-row .request-form__inputs {
    margin-bottom: calc(var(--space-unit) * 10);
}

.foot-request__contacts {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 12);
}

.foot-request__contacts-group .h3-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-normal);
    color: var(--color-primary);
}

.foot-request__contacts img {
   position: absolute;
   top: 0%;
   right: 0%;
}

.foot-request__contacts-large {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);

    @media (max-width: 1024px) {
        font-size: calc(var(--font-size-xs) * 2);
    }
}

.foot-request__contacts-buttons {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 8);

    @media (max-width: 1024px) {
        gap: calc(var(--space-unit) * 3);
    }
    
    @media (max-width: 370px) {
      gap: 0;
    }
}

.foot-request__contacts-buttons button {
    font-size: var(--font-size-base);

    @media (max-width: 1024px) {
        font-size: var(--font-size-sm);
    }
}

.contacts-buttons__socials {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    gap: calc(var(--space-unit) * 2.5);


    @media (max-width: 1024px) {
        gap: calc(var(--space-unit) * 2)
    }
    
    @media (max-width: 370px) {
      gap: 0;
    }
}

.contacts-button__social {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-text-white) 20%, transparent);
    border-radius: 50%;
    transition: .4s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.contacts-button__social:hover {
    border: none;
}

.contacts-button__social.whatsapp:hover {
    background-color: #5DCA4A;
}

.contacts-button__social.vk:hover {
    background-color: #0077ff;
}

.contacts-button__social.youtube:hover {
    background-color: #c4302b;
}

.contacts-button__social.tg:hover {
    background-color: #0088CC
}


/* Footer */

.footer-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    padding-top: calc(var(--space-unit) * 10);
    padding-bottom: calc(var(--space-unit) * 20);

    @media (max-width: 1024px) {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--space-unit) * 3);

        padding-bottom: calc(var(--space-unit) * 7.5);
    }
}

.footer-group {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 7.5);

    @media (max-width: 1024px) {
        flex-wrap: wrap;
        gap: calc(var(--space-unit) * 3);
    }
}

.footer-wrapper .footer-p {
    opacity: .4;
}

.developed-by {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: calc(var(--space-unit) * 2.5);
}

.bud-online {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-7);
    opacity: .5;
}

.other-page__main {
    margin-top: calc(var(--space-unit) * 15);
}

.navigations-text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--space-unit) * 2);
    font-size: var(--font-size-xxs);
}

.navigations-text {
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    color: var(--color-text-white);
    opacity: .6;
}

.navigation-link {
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    color: var(--color-text-white);
    opacity: .6;
}

.navigation-link:hover {
    opacity: 1;
}

.page-section {
    margin-top: calc(var(--space-unit) * 5)
}

.page-row {
    margin-top: calc(var(--space-unit) * 10);
}

/* DOCUMENTS */

.documents-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(var(--space-unit) * 10);
    row-gap: calc(var(--space-unit) * 5);

    @media (max-width: 1000px) {
        grid-template-columns: 1fr;
    }
}

.document {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-unit) * 5);
    background-color: var(--color-bg-secondary);
    border-radius: calc(var(--border-radius-sm) * 2);
    padding: calc(var(--space-unit) * 5);
}

.document__text {
    width: 100%;
}

.document .h3-title {
    font-size: var(--font-size-base);
    color: var(--color-text-white);
}

.document .document__desc {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;
}


/* NEWS */

.news-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(var(--space-unit) * 10);
    row-gap: calc(var(--space-unit) * 15);

    @media (max-width: 1000px) {
        grid-template-columns: 1fr;
    }
}

.news-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 5);
}

.news-item img {
    width: 100%;
    max-height: 210px;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
}

.news-data {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-normal);
    color: var(--color-text-white);
    opacity: .5;
}

.news-item__text .news-data {
    grid-column: 2
}

.news-item__text {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: calc(var(--space-unit) * 7);
}

.news-item__text .h3-title {
    width: 100%;
    font-weight: var(--font-weight-7);
    color: var(--color-text-white);
}

.news__btn {
    width: 100%;
    margin-top: calc(var(--space-unit) * 15);
}

.news__btn .btn--secondary {
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-page__content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: calc(var(--space-unit) * 40);
    margin-top: calc(var(--space-unit) * 9);

    @media (max-width: 1400px) {
        display: flex;
        flex-direction: column;
    }
}

.news-page__content-left img.first_image {
    width: 100%;
    border-radius: var(--border-radius-lg);
    margin-bottom: calc(var(--space-unit) * 15);
}


.news-page__content-right .news-row {
    display: flex;
    flex-direction: column;
}

.news-page__content-right .news-item {
    max-width: 340px;
    gap: calc(var(--space-unit) * 3);
}

.news-item svg.news-item__ico {
    transition: 0.4s ease-in-out;
}

.news-item:hover svg.news-item__ico {
    transform: rotateZ(45deg);
}


.news-page__content-right .news-item:hover img{
    transform: scale(1.03);
}

.news-page__content-right .news-item__text {
    display: flex;
}

.news-page__content-right .news-item img {
    max-width: 340px;
    max-height: 150px;
    transition: 0.4s ease-in-out;
}

.news-page__content-right .page-row {
    margin-top: 0;
}

.news-page .news-data {
    margin-top: calc(var(--space-unit) * 3);
}


.news-content {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  color: var(--color-text-white);
}

.news-content p {
  margin: 0 0 1.5em;
}



.search__content {
    display: grid;
    grid-template-columns: 414px 1fr;
    gap: calc(var(--space-unit) * 7.5);

    @media (max-width: 1300px) {
        width: max-content;
        grid-template-columns: 1fr;
    }
    
    @media (max-width: 678px) {
      width: 100%;
    }
}


/* RESIDENTS */


.search__buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: var(--border-radius-base);
    border: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding: calc(var(--space-unit) * 2);

    @media (max-width: 500px) {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--space-unit) * 5);
    }
}

.search__buttons .btn.active {
  color: var(--color-bg-primary);
  background-color: var(--color-text-white);
}

.search {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-base);
    border: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding: calc(var(--space-unit) * 5);
}

.search form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--space-unit) * 4);
}

.search-input {
    width: 100%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-text-white);
    background: none;
    border: none;
    outline: none;
}

.residents-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--space-unit) * 10);

    @media (max-width: 1400px) {
        grid-template-columns: 1fr;
    }
}

.residents-item {
    display: grid;
    grid-template-columns: 186px 1fr;
    gap: var(--space-unit);

    @media (max-width: 767px) {
        grid-template-columns: 1fr;
    }
}

.residents-item__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-secondary);
    border-radius: calc(var(--border-radius-sm) * 2);
    padding: calc(var(--space-unit) * 6);
    height: 100%;
    @media (max-width: 767px) {
        display: none;
    }
}

.residents-item__logo-mob .residents-item__logo {
    display: none;
    width: 90px;
    height: 90px;
    border: 1px solid color-mix(in srgb, var(--color-text-white) 10%, transparent);
    padding: calc(var(--space-unit) * 2.5);

    @media (max-width: 767px) {
        display: flex;
    }
}

.residents-item__logo-mob .residents-item__logo img {
    width: 100%;
}

.residents-item__logo-mob {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.residents-item__text {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 5.5);
    color: var(--color-text-white);
    background-color: var(--color-bg-secondary);
    border-radius: calc(var(--border-radius-sm) * 2);
    padding: calc(var(--space-unit) * 6) calc(var(--space-unit) * 5) calc(var(--space-unit) * 6) calc(var(--space-unit) * 7.5);
    height: 100%;
    @media (max-width: 767px) {
        padding: calc(var(--space-unit) * 2.5) calc(var(--space-unit) * 5) calc(var(--space-unit) * 4) calc(var(--space-unit) * 2.5);
    }
}

.residents-item__title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    @media (max-width: 767px) {
        width: max-content;
        flex-direction: column;
        row-gap: calc(var(--space-unit) * 3);
    }
}

.residents-item__title .residents-item__status {
    width: max-content;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    color: var(--color-primary);
    background-color: var(--color-bg-primary);
    border-radius: var(--border-radius-sm);
    padding: var(--space-unit) calc(var(--space-unit) * 3);
    height: min-content;
}

.residents-item__title .residents-item__status.active{
    color: var(--color-bg-primary);
    background-color: var(--color-text-white);
}

.residents-item__title .residents-item__site {
    display: none;

    @media (max-width: 767px) {
        display: block;
    }
}

.residents-item__desc {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-normal);
    opacity: .5;
}

.residents-item__site {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-normal);
    opacity: .5;
}

.main-residents .infastructure .infastructure__right-row {
    justify-content: space-between;
}

.infastructure-residents {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-unit) * 10);

    @media (max-width: 768px) {
        margin-top: calc(var(--space-unit) * 3);
    }
}

.infastructure-residents__title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-4);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-little);
    color: var(--color-text-white);
    opacity: .3;

    @media (max-width: 768px) {
        font-size: var(--font-size-2xl);
    }
}

.infastructure-residents__row {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-unit);
}

.infastructure-residents__row button {
  text-align: start;
  padding: calc(var(--space-unit) * 3) var(--space-btn-x);
}


.residents-vesna,
.residents-vesna2 {
  display: none;
}

.residents-vesna.active,
.residents-vesna2.active {
  display: grid;
}

/* MAPS */

.locations-first-gr {
    opacity: 0;
}

.locations-second-gr {
    opacity: 0;
}

.locations-third-gr {
    opacity: 0;
}

.location-map {
    transition: .4s ease-in-out;
}

.location-map.active {
    opacity: 1;

}

.location-item.active {

    background-color: var(--color-text-white);
}

.location-item.active .location-item__icon {
    background-color: var(--color-primary);
}

.location-item.active svg path {
    stroke: var(--color-bg-primary);
}

.location-item.active p {
    color: var(--color-bg-primary);
}

.location-item.active:hover {
    opacity: 1;
}

.roads__city-names .city-name__bg.active {
    fill: var(--color-primary);
    transition: .4s ease-in-out;
}

.location-row__rel {
    position: relative;
    width: 100%;
    height: 201px;
}

.location-row__inner {
    position: absolute;
    transition: .4s ease-in-out;
    opacity: 0;
}

.location-row__inner.active {
    opacity: 1;
}

.main-building,
.occupied-place path,
.free-place__building path,
.free-place path,
.road,
.gas-line path,
.water-line path,
.sewer,
.fire-hydrants,
.substantions {
    opacity: .1;
    transition: .4s ease-in-out;
}

.main-building:hover,
.occupied-place path:hover,
.free-place__building path:hover,
.free-place path:hover,
.road:hover,
.gas-line path:hover,
.water-line path:hover,
.sewer:hover,
.fire-hydrants:hover,
.substantions:hover,
.main-building.active,
.occupied-place.active path,
.free-place__building.active path,
.free-place.active path,
.road.active,
.gas-line.active path,
.water-line.active path,
.sewer.active,
.fire-hydrants.active,
.substantions.active {
    opacity: 1;
}

.occupied-place path.hov_area:hover {
    stroke: #59ff00;
}

.free-place path.hov_area:hover,
.road:hover,
.main-building path.hov_area:hover,
.occupied-place.active path.hov_area,
.free-place.active path.hov_area,
.road.active,
.main-building.active path.hov_area {
    stroke: #59ff00;
}

.infastructure__map path:not(.hov_area) {
    pointer-events: none;
}
.infastructure__map .hov_area path {
    pointer-events: inherit;
}

.tooltip {
    --bs-tooltip-max-width: 170px;
    --bs-tooltip-font-size: 12px;
    --bs-tooltip-border-radius: 20px;
    --bs-tooltip-color: #0E0E0E;
    --bs-tooltip-bg: white;
}

#tip-1.tooltipcus {
    max-width: 170px;
    position: absolute;
    display: none;
    background-color: var(--color-text-white);
    border-radius: var(--border-radius-sm);
    pointer-events: none;
    padding: calc(var(--space-unit) * 2.5) calc(var(--space-unit) * 3.5);
    z-index: var(--z-index-6);

}

#tip-1 .titletext {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
    line-height: var(--line-height-tight);
    color: var(--color-bg-primary);
}

.br-hid {
    display: none;

    @media (max-width: 1200px) {
        display: block;
    }
}


.be-hid.rev {
    display: block;

    @media (max-width: 1400px) {
        display: none;
    }
}


/* CONTACTS */

.contacts h2 {
    margin-bottom: calc(var(--space-unit) * 4);
}

.contacts__button-row {
  width: max-content;
  display: flex;
  flex-direction: row;
  gap: calc(var(--space-unit) * 5);
  
  border-radius: var(--border-radius-base);
  border: 1px solid
  color-mix(in srgb, var(--color-text-white) 10%, transparent);
  padding: calc(var(--space-unit) * 2);
}

.contacts__button-row button.active {
  color: var(--color-bg-primary);
  background-color: var(--color-text-white);
}

.contacts-vesna,
.contacts-vesna2 {
  display: none;
}

.contacts-vesna.active,
.contacts-vesna2.active {
  display: grid;
}

.contacts-row {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--space-unit) * 10);
  
 @media (max-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}


 .contacts-row:has(> :nth-child(3):last-child) {
    @media (max-width: 1200px) {
      grid-template-rows: auto auto;
    }
  }
  
  .contacts-row:has(> :nth-child(3):last-child) > :nth-child(3) {
    @media (max-width: 1200px) {
      grid-column: 1 / -1;
    }
  }

.contacts-item {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius-lg);
  padding: calc(var(--space-unit) * 8) calc(var(--space-unit) * 10);
  
  @media (max-width: 1000px) {
    padding: calc(var(--space-unit) * 8) calc(var(--space-unit) * 6);
  }
}

.contacts-item.map {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--space-unit) * 7.5);
  
  @media (max-width: 1200px) {
    min-height: 350px;
  }
  
  @media (max-width: 1000px) {
    padding: calc(var(--space-unit) * 8) calc(var(--space-unit) * 6);
  }
}

.contacts-item.map img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
}

.contacts-btn {
  width: 100%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-5);
  line-height: var(--line-height-);
  color: var(--color-bg-primary);
  background-color: var(--color-text-white);
  padding: calc(var(--space-unit) * 2.8) 0 calc(var(--space-unit) * 3.5) 0;
  z-index: var(--z-index-1);
}

.contacts-btn:hover {
  color: var(--color-text-white);
  background-color: var(--color-bg-secondary);
}

.contacts-item__top {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-3);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-little);
  color: var(--color-primary);
  margin-bottom: calc(var(--space-unit) * 24.8);
}

.contacts-item__mid {
  margin-bottom: calc(var(--space-unit) * 8.5);
}

.contacts-item__mid,
.contacts-item__bot {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * .8);
}

.contacts-item__mid h3,
.contacts-item__bot h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-7);
  line-height: var(--line-height-normal);
  color: var(--color-text-white);
}

.contacts-item__mid p,
.contacts-item__bot p {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-normal);
  color: var(--color-text-white);
  opacity: .5;
}



.page-title {
  margin-bottom: calc(var(--space-unit) * 6);
}


/* 404 */
.not-found {
    position: relative;
    margin-top: var(--space-unit);
    padding: calc(var(--space-unit) * 25) 0;
}

.not-found .content--right {
  position: relative;
}

.not-found__content {
  position: relative;
  z-index: var(--z-index-1);
}

.not-found__content svg {
  position: absolute;
  right: 0;
  bottom: 0;
  
  @media (max-width: 768px) {
    width: 300px;
    bottom: 25%;
  }
}

.not-found__row {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--space-unit) * 10);
}

.not-found__row button {
  font-size: var(--font-size-base);
}

.not-found__item-desc {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-normal);
  color: var(--color-text-white);
  opacity: .5;
}