:root{
--white: #fff;
--soft-white: #EBEBEB;
--light-black: #1D1D1F;
--gray: #7F8183;
--bg-gray: #7F7F7F;
--light-gray: #F4F4F4;
--dark-gray: #1D1D1F;
--soft-blue: #CECFD5;
--blue: #3D4059;
--gray-blue: #5B5E77;
--red: #E41215;
}

@font-face {
    font-family: "Montserrat";
    src: url('https://catcar.ua/fonts/Montserrat-Regular.ttf') format("truetype");
}

@keyframes rotate {
	0%{ transform:rotate(0) }
	100%{ transform:rotate(360deg) }
}

@keyframes rotateReverse {
	0%{ transform:rotate(0) }
	100%{ transform:rotate(-360deg) }
}

@keyframes wave{
	0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
	100%,30%{-webkit-transform:scale(2);transform:scale(2);opacity:0}
}

@keyframes ring{
	0%,100%,13%,6%{-webkit-transform:rotate(0);-webkit-transform-origin:50% 50%;transform:rotate(0);transform-origin:50% 50%}
	1%,7%{-webkit-transform:rotate(-20deg);-webkit-transform-origin:50% 50%;transform:rotate(-20deg);transform-origin:50% 50%}
	10%,3%{-webkit-transform:rotate(10deg);-webkit-transform-origin:50% 50%;transform:rotate(10deg);transform-origin:50% 50%}
}

@keyframes jump{
	0%,100%,13%,6%{-webkit-transform:translate(0, 0);-webkit-transform-origin:center;transform:translate(0, 0);transform-origin:center}
	1%,7%{-webkit-transform:translate(0, -2px);-webkit-transform-origin:center;transform:translate(0, -2px);transform-origin:center}
	10%,3%{-webkit-transform:translate(0, 2px);-webkit-transform-origin:center;transform:translate(0, 2px);transform-origin:center}
}

@keyframes alertOpen { 
	0%{ transform: scale(1.1); }
	100%{ transform: scale(1); }
}

@keyframes alertTimeover {
	0%{ width: 100%; }
	100%{ width: 0; }
}

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

@keyframes loading {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
}

::selection{ color: #fff; background-color: var(--red); }
body, html { height: 100%; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; color: var(--black); font-family: Helvetica Neue, Helvetica, Inter, Roboto, Arial; overflow-x: hidden; background-color: var(--soft-white) }
body:before {content: ''; position: relative; display: block; width: 100%; height: 59px; background-color: #061e59;}
section { position: relative; width: 100%; }
h1,
h2 { position: relative; width: calc(100% - 40px); text-align: center; color: #1D1D1F; z-index: 1; }
h1 { font-size: 40px; line-height: 44px; font-weight: normal; margin: 30px auto; font-family: Helvetica Neue, Helvetica, Inter, Roboto, Arial; }
h2 { font-size: 30px; line-height: 34px; font-weight: 600; margin: 20px auto; padding: 0 20px; font-family: Montserrat, Inter, Arial; }
a { text-decoration: none; }
header,
footer .center,
section .center { position: relative; margin: 0 auto; width: 1380px; padding: 0 20px; z-index: 1; }

.area .info-wrap input.red-outline,
.dialog input.red-outline,
input.red-outline,
.red-outline { outline: 1px solid red; }

/* Breadcrumbs */
.breadcrumbs { position: relative; margin: 20px auto; width: 1380px; padding: 0 20px; height: 26px; display: flex; flex-wrap: nowrap; list-style: none; color: var(--black); position: relative; font-size: 13px; -webkit-overflow-scrolling: touch; overflow-x: auto; font-family: Montserrat, Inter, Arial; z-index: 1; }
.breadcrumbs li { display: inline; white-space: nowrap; color: var(--red); }
.breadcrumbs li a { color: var(--blue); }
.breadcrumbs li a:hover { color: var(--red); }
.breadcrumbs li+li:before { padding: 4px; color: var(--blue); content: ' / ';}

@media screen and (max-width: 1420px) {
footer .center,
section .center,
.breadcrumbs { width: calc(100% - 40px); }
}


.header-wrap { position: fixed; top: 0; width: 100%; height: auto; padding: 11px 0; background-color: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(30px);backdrop-filter: blur(30px); font-family: Montserrat, Inter, Arial; z-index: 3; }
header { position: relative; margin: 0 auto; width: 1380px; min-height: 38px; display: flex; color: var(--soft-white); gap: 10px; z-index: 3; justify-content: space-between; align-items: center; }
header .home-logo { position: relative; height: 32px; }
header .home-logo img { position: relative; height: 100%;}
header nav { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
header .item { position: relative; padding: 2px 5px; }
header a.item,
header .item .name { position: relative; display: flex; justify-items: center; align-items: center; gap: 8px; color: var(--soft-white); border-radius: 8px; font-family: Montserrat, Inter, Arial; font-size: 16px; font-weight: 500; padding: 9px 16px; }
header a.item.active,
header .item.active .name { font-weight: bold; background-color: var(--red); } 
header a.item.active:hover,
header .item.active:hover .name { color: white; }
header a.item:hover,
header .list:hover .name,
header .item:hover .name { color: var(--red); }
header .list .name:after {content: '\0041'; font-family: 'catcar'; margin-left: 5px; top: 4px; position: relative; font-size: 11px; float: right; display: inline-block; transition: transform .2s ease-out; }
header nav .list .name:after { margin-left: 0; top: 0; }
header .list.active .name:after { transform: rotate(180deg); }

header .list { position: relative; border-radius: 10px; display: block; cursor: pointer; user-select: none; justify-content: space-between; }
header .list i {position: relative; width: calc(100% - 10px); padding: 0 5px; margin-top: 10px; text-align: center; font-size: 13px; font-family: Helvetica Neue; font-weight: normal; font-style: normal; color: var(--blue); cursor: default;  user-select: none; }
header .list .list-wrap { display: none; }
header .list.active .list-wrap { position: absolute; display: flex; flex-direction: column; width: auto; min-width: 180px; max-width: 220px; max-height: 260px; overflow: hidden; overflow-y: auto; top: 100%; background-color: white; border-radius: 10px; box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, .3); z-index: 5; }
header .list.left.active .list-wrap { left: 0; }
header .list.right.active .list-wrap { right: 0; }
header .list .list-wrap .list-item { font-size: 14px; width: calc(100% - 32px); font-weight: normal; font-style: normal; padding: 12px 16px; color: var(--blue); }
header .list .list-wrap .list-item:hover { background-color: rgba(0,0,0,.08); }
header .list .list-wrap a { text-decoration: none; color: var(--blue); }

header .phone-button { position: relative; display: flex; gap: 5px; font-size: 15px; font-weight: 500; align-items: center; padding: 7px 18px; border-radius: 20px; border: 1px solid var(--soft-white); }
header .phone-button .list-wrap .list-item { text-align: center; }
header .phone-button:hover { border-color: var(--red); }
header .phone-button:before { content: '\004a'; position: relative; font-family: catcar; font-size: 15px; display: inline-block; float: left; }
header .phone-button:hover:before { -webkit-animation: 8s linear ring; animation: 8s linear ring; color: var(--red); }

header .language.button { position: relative; display: block; border-radius: 24px; background-color: rgba(1,15,62,.15); min-height: 22px; padding: 12px 16px; -webkit-backdrop-filter: blur(30px);backdrop-filter: blur(30px);}
header .language.button:before {content: ''; position: relative; left: 0; float: left; width: 20px; top: 0; height: 20px; margin-right: 8px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-image: url('https://catcar.ua/images/ico/planet.svg'); }
header .settings { position: relative; display: flex; gap: 30px; align-items: center; }
header .settings .list.active .list-wrap { width: auto; min-width: auto; }
header .button-menu { display: none; position: relative; width: 24px; aspect-ratio: 1; align-items: center; justify-content: center; cursor: pointer; }
header .button-menu:before{ content:'\0048'; position: relative; font-family: catcar; font-style: normal; font-size: 17px; font-weight: bold; } 

@media screen and (max-width: 1420px) {
header { width: calc(100% - 40px); }
}

@media screen and (max-width: 1350px) {
header { justify-content: flex-end; gap: 40px; }
header .home-logo { position: absolute; left: 30px; }
header .button-menu { display: flex; }
header nav { display: none; }
}

@media screen and (max-width: 700px) {
header { gap: 20px; }
}

@media screen and (max-width: 700px) {
header .settings { display: none; }
}

@media screen and (max-width: 450px) {
header .phone-button .name { display: none; }
header .list.phone-button:after {content: '\0041'; font-family: 'catcar'; margin-left: 5px; top: 0; position: relative; font-size: 11px; float: right; display: inline-block; transition: transform .2s ease-out; }
header .list.phone-button.active:after { transform: rotate(180deg); color: var(--red); }
}

/* pagination */
.pagination { margin: 20px auto; display: flex; gap: 7px; justify-content: center; }
.pagination .item { position: relative; padding: 14px; display: flex; min-width: 18px; justify-content: center; align-items: center; border-radius: 14px; font-size: 13px; background-color: white; color: black; cursor: pointer; user-select: none; flex-shrink: 0; }
.pagination .item.empty,
.pagination .item.empty:hover { background-color: transparent; padding: 14px 4px; color: #555; cursor: initial; }
.pagination .item:hover,
.pagination .item.active { background-color: var(--blue); color: white; }
.pagination .item.active { cursor: initial; }
.pagination .item.ico-arrow-right,
.pagination .item.ico-arrow-left { background-image: url('https://catcar.ua/images/ico/arrow-left-blue.svg'); background-size: 20px 20px; background-position: center center; background-repeat: no-repeat; }
.pagination .item.ico-arrow-right { rotate: 180deg; }
.pagination .item.ico-arrow-left:hover,
.pagination .item.ico-arrow-right:hover { background-image: url('https://catcar.ua/images/ico/arrow-left-white.svg'); }
.pagination .ico.arrow-right:after { content: '\0041'; position: relative; display: inline-block; font-style: normal; transform: rotate(270deg); left: 6px; top: 1px; font-size: 11px; font-family: catcar; }

@media screen and (max-width: 1420px) {
.pagination { padding: 0 20px; width: calc(100% - 40px); }
}


/* Article */
.article .center { width: 900px; padding: 20px; font-size: 14px; line-height: 20px; color: var(--blue); text-align: justify; }
.article a { color: var(--blue); text-decoration: underline; font-weight: bold; }
.article a:hover { color: var(--red); }
.article strong { position: relative; width: 100%; display: block; }
.article h2 { position: relative; color: var(--blue); text-align: left; padding: 0; margin: 30px 0 20px; width: 100%; }
.article ul {  }
.article li { font-size: 14px; line-height: 22px; color: var(--blue); }
.article picture { position: relative; display: inline-block; width: 100%; height: 500px; border-radius: 20px; overflow: hidden; background-color: #dee2e8; }
.article picture .photo { position: absolute; display: block; height: 100%; left: 50%; transform: translate(-50%, 0); }
.article .text { position: relative; display: inline-block; margin: 20px 0; width: 100%; float: left; font-size: 14px; line-height: 22px; color: var(--blue); text-align: justify; }
.article .first-block { width: calc(50% - 10px); }
.article .first-image { width: calc(50% - 10px); margin-left: 20px; float: right; height: 300px; }
.article .button { position: relative; display: inline-block; font-size: 14px; left: 0; font-weight: normal; margin: 20px 0; margin-right: 15%; align-items: center; padding: 10px 30px; border-radius: 8px; color: var(--red); border: 1px solid var(--red); cursor: pointer; }
.article .button.red,
.article .button:hover { background-color: var(--red); color: white; }
.article .button.red:hover { background-color: #c21215; border-color: #c21215; }
.article blockquote { margin: 20px 0; padding: 15px 10px; background-color: #dee2e8; border-radius: 4px; }
.article table { width: 100%; text-align: left; }
.article table tr:nth-child(2n) { background-color: #dee2e8; }
.article table th { padding: 10px; color: var(--blue); font-family: 'Montserrat', Inter, Arial; font-weight: bold; }
.article table td { padding: 10px; color: var(--blue); }
.article .breadcrumbs { width: calc(100% - 40px); margin: 20px 0; }
.article .breadcrumbs li { font-size: 13px; }
.article .breadcrumbs a { text-decoration: none; }

@media screen and (max-width: 950px) {
.article .center { width: calc(100% - 40px); }
.article picture { aspect-ratio: 1.8; height: auto; }
}

@media screen and (max-width: 680px) {
.article .first-block { width: 100%; }
.article .first-image { width: 100%; margin: 0; float: left; }
.article picture { border-radius: 10px; }
}

@media screen and (max-width: 450px) {
.article h2 { text-align: center; margin: 20px 0 10px; }
.article .first-image,
.article picture { width: calc(100% + 40px); left: -20px; border-radius: 0; }
.article .button { margin: 20px 0; }
}


/* Footer */
footer { position: relative; float: right; left: 0; bottom: 0; width: 100%; margin-top: 30px; background-color: var(--light-black); overflow: hidden; color: white; }
footer:before { content: ''; position: absolute; height: 100%; width: 100%; background-image: url('https://catcar.ua/images/background/footer2.jpg'); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; }
footer .center { margin: 75px auto; }
footer .home-logo.top { width: 126px; }
footer .home-logo.bottom { display: none; }
footer .home-logo.bottom img { width: 50%; }
footer .links-wrap { position: relative; display: grid; grid-template-columns: repeat(5, auto); gap: 20px; margin-bottom: 50px; }
footer .links-wrap .item-wrap { display: flex; flex-direction: column; gap: 8px; }
footer .links-wrap .item-wrap .ico { position: relative; display: inline-block; font-size: 20px; top: 2px; }
footer .links-wrap .name { position: relative; display: flex; gap: 10px; font-size: 18px; font-weight: bold; color: white; }
footer .links-wrap .item { font-size: 15px; color: var(--soft-blue); }
footer .links-wrap .messengers { position: relative; margin-top: 14px; font-size: 15px; display: flex; align-items: center; }
footer .links-wrap .messengers .ico { position: relative; display: inline-block; width: 24px; aspect-ratio: 1; margin-right: 8px; }
footer .bottom-wrap { display: flex; align-items: center; justify-content: space-between; font-family: 'Montserrat', Inter, Arial; font-size: 14px; color: #a4aacd; }
footer .bottom-wrap a { color: #a4aacd;}
footer .bottom-wrap a:hover { color: white; font-weight: bold; }

@media screen and (max-width: 1050px) {
footer:before { background-size: auto 100%; }
footer .home-logo.top { display: none; }
footer .home-logo.bottom { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 70px; padding-top: 20px; }
footer .links-wrap { padding: 0 40px; grid-template-columns: repeat(2, auto); }
}

@media screen and (max-width: 900px) {
footer .bottom-wrap { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 7px; }
}

@media screen and (max-width: 600px) {
footer .links-wrap { padding: 0 20px; }
}

@media screen and (max-width: 470px) {
footer .links-wrap { padding: 0 50px; grid-template-columns: 1fr; }	
}

@media screen and (max-width: 390px) {
footer .links-wrap { padding: 0 20px; }	
}

/* Alerts, Dialogs */
.dialog { position: absolute; width: 100%; height: 100%; top: 0; z-index: 10; }
.dialog:before { content: ''; position: fixed; width: 100%; height: 100%; background-color: rgba(0,39,74,.4); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.dialog .dialog-wrap { position: absolute; width: 400px; padding: 30px; display: flex; flex-direction: column; gap: 12px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 20px; background-color: rgba(255,255,255,.8); box-shadow: 0 20px 30px -8px rgba(0,15,43,.3); }
.dialog .ico-close { position: absolute; width: 20px; aspect-ratio: 1; right: 20px; top: 20px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-image: url('https://catcar.ua/images/ico/close.svg'); transition: transform .1s ease-out; cursor: pointer; z-index: 3; }
.dialog .ico-close:hover { transform: rotate(90deg); }
.dialog h2 { margin: 5px 0 4px; }
.dialog .result,
.dialog input { width: calc(100% - 40px); padding: 18px 20px; border: none; outline: none; border-radius: 6px; font-size: 16px; background-color: white; }
.dialog .result { background-color: #dee2e8; color: var(--blue); }
.dialog .result .name { position: relative; float: left; }
.dialog .result .price { position: relative; float: right; }
.dialog .item { position: relative; display: flex; width: calc(100% - 100px); flex-direction: column; padding: 10px 40px 10px 60px; border-radius: 6px; background-color: white; cursor: pointer; user-select: none; }
.dialog .item.active { z-index: 3; }
.dialog .item span { font-size: 13px; color: var(--gray-blue); }
.dialog .item b { font-size: 16px; font-weight: 600; color: var(--black) }
.dialog .item:after { content: '\0041'; position: absolute; font-family: catcar; font-size: 12px; right: 20px; top: 22px; color: var(--gray-blue); transition: transform .1s ease-out; }
.dialog .item.active:after { transform: rotate(180deg); }
.dialog .item:before { position: absolute; font-family: catcar; font-size: 20px; left: 20px; top: 15px; color: var(--gray-blue); }
.dialog .item.auto:before { content: '\0042'; }
.dialog .item.location:before { content: '\0047'; }
.dialog .item.date-start:before { content: '\004c'; }
.dialog .item.date-end:before { content: '\004d'; }
.dialog .item ul { display: none; }
.dialog .item.active ul { display: flex; position: absolute; margin: -4px 0 0 -54px; width: calc(100% - 20px); max-height: 300px; padding: 0; background-color: var(--white); white-space: nowrap; flex-direction: column; border: 5px solid var(--white); border-radius: 8px; box-shadow: 0 35px 60px -10px rgba(0,0,0,0.7); overflow: hidden; overflow-y: auto; z-index: 1; }
.dialog .item p { font-size: 14px; padding: 12px 20px; margin: 0; color: var(--blue); cursor: pointer; }
.dialog .item p:hover { background-color: var(--soft-blue); }
.dialog .main { position: relative; display: flex; align-items: center; justify-content: center; width: calc(100% - 100px); height: 32px; padding: 10px 50px; font-weight: bold; font-size: 16px; background-color: var(--red); color: white; border-radius: 10px; cursor: pointer; user-select: none; cursor: pointer; transition: .1s ease-out; }
.dialog .main:hover { top: -2px; box-shadow: 0px 6px 20px -11px rgba(80,0,0,.6); }
.dialog .text { position: relative; width: calc(100% - 40px); padding: 20px; text-align: center; font-size: 14px; color: var(--blue); }
.dialog .home-logo { position: relative; display: flex; justify-content: center; align-items: center; height: 32px; margin-top: 10px; }
.dialog .home-logo:before { content: ''; position: relative; height: 100%; width: 130px; background-image: url('https://catcar.ua/images/logo/logo-black.svg'); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; }

/* dark mode */
.dialog.dark .dialog-wrap { background-color: var(--blue); color: white; }
.dialog.dark .ico-close { background-image: url('https://catcar.ua/images/ico/close-white.svg'); }
.dialog.dark h2 { color: white; }
.dialog.dark input { background-color: #272a44; caret-color: white; color: white; }
.dialog.dark input::placeholder { color: var(--soft-blue); }
.dialog.dark .result { background-color: #383b52; color: white; }
.dialog.dark .item { background-color: #272a44; }
.dialog.dark .item span { color: var(--soft-blue); }
.dialog.dark .item b { color: var(--black) }
.dialog.dark .item:after,
.dialog.dark .item:before { color: var(--soft-blue); }
.dialog.dark .item.active ul { background-color: #272a44;}
.dialog.dark .item p { color: white; }
.dialog.dark .item p:hover { background-color: black; }
.dialog.dark .home-logo:before { background-image: url('https://catcar.ua/images/logo/logo.svg'); }
.dialog.dark .text { color: white; }

@media screen and (max-width: 480px) {
.dialog .dialog-wrap { width: calc(100% - 80px); padding: 30px; }
}

@media screen and (max-width: 430px) {
.dialog .dialog-wrap { width: calc(100% - 60px); padding: 20px; top: 10px; transform: translate(-50%, 0); }
}

/* Alert message */
.alert-container { position: fixed; top: 0; left: calc(50% - 140px); width: 280px; height: auto; overflow: hidden; z-index: 20; }
.alert-wrap { position: relative; display: flex; flex-direction: column; top: 0; left: 0; width: 350px; max-height: 100vh; overflow-y: auto; overflow-x: hidden; }
.alert-wrap .alert { position: relative; display: block; flex-shrink: 0; text-align: center; margin: 6px 20px; width: 200px; padding: 20px; color: white; font-size: 13px; background-color: rgba(0,0,0,.6); border-radius: 10px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 20px 30px -8px rgba(0,15,43,.3); overflow: hidden; user-select: none; -webkit-animation: 0.08s linear alertOpen; animation: 0.08s linear alertOpen; opacity: 1; }
.alert-wrap .alert.closed { opacity: 0; height: 0; padding: 0 20px; margin: 0 20px; transition: all .2s linear; }
.alert-wrap .alert:first-child { margin-top: 40px; }
.alert-wrap .alert:last-child { margin-bottom: 40px; }
.alert-wrap .alert .close { position: absolute; width: 16px; height: 16px; top: 5px; right: 5px; background-image: url('https://catcar.ua/images/ico/close-white.svg'); background-repeat: no-repeat; background-position: center center; background-size: 12px 12px; cursor: pointer; opacity: .5 }
.alert-wrap .alert .close:hover { opacity: 1; }
.alert-wrap .alert:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; border-radius: 2px; background-color: black; }
.alert-wrap .alert.timeover:before { -webkit-animation: 4s linear alertTimeover; animation: 4s linear alertTimeover; }

/* Loading */
.load-animation { position: fixed; left: 40px; bottom: 40px; width: 60px; height: 60px; border-radius: 15px; background-color: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);  box-shadow: 0 20px 30px -8px rgba(0,15,43,.3); z-index: 11; }
.load-animation:before { content: ''; position: absolute; width: 100%; height: 100%; background-image: url('https://catcar.ua/images/ico/load-ring.svg'); background-repeat: no-repeat; background-size: 24px 24px; background-position: center center; -webkit-animation: 1s linear infinite rotate; animation: 1s linear infinite rotate; }
.load-animation .task-wrap { display: none; }
.load-animation:hover .task-wrap { position: absolute; bottom: 5px; width: 150px; min-height: 50px; height: auto; left: 65px; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.load-animation .task-wrap .task { position: relative; max-width: calc(100% - 20px); border-radius: 3px; display: inline-block; padding: 5px 10px; font-size: 12px; background-color: rgba(0,0,0,.6); color: white; user-select: none; }

/* Global */
.global-button { position: fixed; right: 25px; width: 60px; height: 60px; border-radius: 30px; background-color: white; background-repeat: no-repeat; background-size: 24px 24px; background-position: center center; z-index: 3; cursor: pointer; box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, .3); transition: .4s ease-out; }
.global-button.up-button { bottom: 120px; background-image: url('https://catcar.ua/images/ico/arrow-up.svg'); }
.global-button.callback-button { bottom: 90px; background-image: url('https://catcar.ua/images/ico/phone.svg'); }
.global-button.callback-button:after { content: ''; position: absolute; width: 59px; height: 59px; border-radius: 30px; border:  1px solid #ccc; -webkit-animation: 5s ease-in-out infinite wave; animation: 5s ease-in-out infinite wave; }
.global-button.up-button.bottom { right: 10px; bottom: 10px; }
.global-button.callback-button.bottom { display: none; }


/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.active { position: absolute; display: inline; width: 100%; height: 100%; top: 0; z-index: 11; }
.mobile-menu.active:before { content: ''; position: fixed; width: 100%; height: 100%; background-color: rgba(0,39,74,.4); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.mobile-menu .menu-wrap { position: absolute; right: -300px; top: 0; width: 300px; height: calc(100% - 100px); padding: 50px 0; display: flex; flex-direction: column; background-color: #1d1d1f; transition: right .1s ease-out; }
.mobile-menu.active .menu-wrap { right: 0; } 

.mobile-menu .close { position: absolute; width: 24px; aspect-ratio: 1; right: 24px; top: 20px; background-repeat: no-repeat; background-position: center center; background-size: 16px 16px; background-image: url('https://catcar.ua/images/ico/close-white.svg'); opacity: .5; transition: transform .1s ease-out; cursor: pointer; }
.mobile-menu .close:hover { transform: rotate(90deg); opacity: 1; }

.mobile-menu nav { position: relative; display: flex; flex-direction: column; align-items: end; }
.mobile-menu .item { position: relative; }
.mobile-menu a.item,
.mobile-menu .item .name { position: relative; width: calc(100% - 60px); padding: 12px 30px; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 8px; color: var(--soft-white); font-family: Montserrat, Inter, Arial; font-size: 16px; font-weight: 500; background-color: #1d1d1f; }
.mobile-menu a.item.active,
.mobile-menu .item.active .name { font-weight: bold; color: var(--red); } 
.mobile-menu a.item:hover,
.mobile-menu .list:hover .name,
.mobile-menu .item:hover .name { color: var(--red); }
.mobile-menu .list .name:after {content: '\0041'; font-family: 'catcar'; margin-left: 5px; top: 4px; position: relative; font-size: 11px; float: right; display: inline-block; transition: transform .2s ease-out; }
.mobile-menu nav .list .name:after { margin-left: 0; top: 0; }
.mobile-menu .list.active .name:after { transform: rotate(180deg); }

.mobile-menu .list { position: relative; display: flex; align-items: flex-end; flex-direction: column; width: 100%; cursor: pointer; user-select: none; }
.mobile-menu .list i {position: relative; width: calc(100% - 10px); padding: 0 5px; margin-top: 10px; text-align: center; font-size: 13px; font-family: Helvetica Neue; font-weight: normal; font-style: normal; color: var(--gray-blue); cursor: default; user-select: none; }
.mobile-menu .list .list-wrap { display: none; }
.mobile-menu .list.active .list-wrap { position: relative; display: flex; flex-direction: column; width: 100%; background-color: #0d0d0d; }
.mobile-menu .list.left.active .list-wrap { left: 0; }
.mobile-menu .list.right.active .list-wrap { right: 0; }
.mobile-menu .list .list-wrap .list-item { position: relative; width: calc(100% - 60px); text-align: right; font-size: 15px; font-weight: normal; font-style: normal; padding: 12px 30px; color: white; }
.mobile-menu .list .list-wrap .list-item:hover { color: var(--red); }
.mobile-menu .list .list-wrap a { text-decoration: none; color: var(--blue); }

.mobile-menu .phone-button { position: relative; display: block; text-align: right; gap: 5px; width: calc(100% - 60px); font-size: 15px; padding: 16px 30px; color: white; font-family: Montserrat, Inter, Arial; background-color: #1d1d1f; }
.mobile-menu .phone-button .list-wrap .list-item { text-align: center; }
.mobile-menu .phone-button .name { position: relative; text-align: right; display: inline-block; }
.mobile-menu .phone-button:before { content: '\004a'; position: relative; font-family: catcar; font-size: 15px; display: inline-block; margin-right: 5px; top: 2px; }
.mobile-menu .phone-button:hover:before { -webkit-animation: 8s linear ring; animation: 8s linear ring; color: var(--red); }
.mobile-menu .phone-button.list.active .list-wrap { width: calc(100% + 60px); left: -30px; margin-top: 12px; }

.mobile-menu .language.button { position: relative; display: block; background-color: rgba(1,15,62,.15); min-height: 22px; padding: 12px 16px; -webkit-backdrop-filter: blur(30px);backdrop-filter: blur(30px);}
.mobile-menu .language.button:before {content: ''; position: relative; left: 0; float: left; width: 20px; top: 0; height: 20px; margin-right: 8px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-image: url('https://catcar.ua/images/ico/planet.svg'); }
.mobile-menu .settings { position: relative; display: flex; flex-direction: column; text-align: right; gap: 24px; width: calc(100% - 60px); font-size: 15px; padding: 10px 30px; color: white; font-family: Montserrat, Inter, Arial; background-color: #1d1d1f; }
.mobile-menu .settings .list.active .list-wrap { width: calc(100% + 60px); right: -30px; margin-top: 12px; }


@media screen and (max-width: 450px) {
.mobile-menu .menu-wrap { width: 75%; }
}



/* Cards  */
.cards { margin: 40px 0; }
.cards .center { position: relative; display: flex; justify-content: center; }
.cards .cards-wrap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 20px; }

.cards.horizontal { position: relative; margin: 0 auto; width: 1420px; height: 390px; overflow: hidden; }
.cards.horizontal .center { position: absolute; display: inline; left: 0; height: 120%; overflow-y: auto; }
.cards.horizontal .cards-wrap { position: relative; display: flex; }

.cards .card { position: relative; height: 320px; width: 290px; padding: 20px; border-radius: 20px; background-color: var(--white); box-shadow: 0px 2px 10px 0 rgba(112,113,138,.1); flex-shrink: 0; }
.cards .card .title { color: black; margin: 0; position: absolute; width: calc(100% - 40px); top: 20px; left: 20px; font-size: 24px; font-family: Inter, Arial; text-align: center; z-index: 1; text-shadow: 1px 1px 1px var(--white); }
.cards .card.with-discount .title { width: calc(100% - 100px); text-align: left; }
.cards .card .title span { font-weight: normal; }
.cards .card .title b { font-weight: 800; }
.cards .card .photo-wrap { position: relative; display: flex; width: calc(100% + 20px); height: 220px; left: -10px; top: 30px; vertical-align: middle; align-items: center; transition: all 0.2s ease-out; }
.cards .card:hover .photo-wrap { width: calc(100% + 40px); left: -20px; }
.cards .card .photo { position: absolute; width: 100% }
.cards .card .params { position: absolute; top: 240px; padding: 0; left: 20px; width: calc(100% - 40px); z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; justify-content: space-between; background-color: white; font-family: 'Montserrat', Inter, Arial; }
.cards .card .params li { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 0; font-size: 13px; line-height: 12px; color: var(--dark-gray); }
.cards .card .params li.class:before { content: '\004e' }
.cards .card .params li.seats:before { content: '\0049' }
.cards .card .params li.fuel:before { content: '\0046' }
.cards .card .params li:before { position: relative; display: inline-block; font-family: catcar; font-size: 16px; color: var(--dark-gray); }

.cards .card .bottom { position: absolute; left: 20px; width: calc(100% - 40px); bottom: 20px; display: flex; justify-content: space-between; }
.cards .card .bottom .pricing { position: relative; display: flex; gap: 3px; flex-direction: column; font-size: 13px; font-family: 'Montserrat', Inter, Arial; color: var(--dark-gray); }
.cards .card .bottom .pricing b { position: relative; margin-left: 5px; }
.cards .card .bottom .pricing b i { position: absolute; left: 0; top: -12px; font-size: 11px; font-style: normal; font-weight: normal; text-decoration: line-through; color: var(--red); }
.cards .card .booking-button { display: flex; font-size: 14px; font-weight: normal; align-items: center; padding: 9px; border-radius: 8px; color: var(--red); border: 1px solid var(--red); cursor: pointer; user-select: none; }
.cards .card .booking-button:hover { background-color: var(--red); color: white; }
.cards .card .discount { position: absolute; padding: 4px 8px; border-radius: 10px; right: 15px; background-color: var(--red); color: #ffe6ec; font-size: 15px; font-weight: 900; top: 15px; z-index: 2; }

.cards .plain-text { grid-column: 1 / -1; grid-column: 1 / -1; text-align: center; position: relative; margin: 40px 0; font-size: 15px; color: #191c40; }

/* arrows */
@media (orientation: landscape) {
.cards .arrow,
.cards.grid .arrow { display: none; }
.cards.horizontal .arrow { display: inline; }
.cards .arrow { position: absolute; top: 170px; width: 26px; aspect-ratio: 1; padding: 12px; border-radius: 12px; background-color: white; background-image: url('https://catcar.ua/images/ico/arrow-left.svg'); background-repeat: no-repeat; background-position: center center; background-size: 20px 20px; cursor: pointer; transition: .4s easy-out; z-index: 2; }
.cards .arrow:hover { background-size: 24px 24px; }
.cards .arrow.arrow-left { left: 5px; box-shadow: 0px 3px 12px -5px rgba(0,0,0,.3); }
.cards .arrow.arrow-right { right: 5px; transform: rotate(180deg); box-shadow: 0px -3px 12px -5px rgba(0,0,0,.3); }
}

@media screen and (max-width: 1400px) {
.cards .cards-wrap { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; max-width: 1100px; }
.cards.horizontal,
.cards.horizontal .center { width: 100%; max-width: none; padding: 0; }
.cards.horizontal .card { margin: 10px 0; }
.cards.horizontal .card:first-child { margin-left: 10px; }
.cards.horizontal .card:last-child { margin-right: 10px; }
}

@media screen and (max-width: 1050px) {
.cards .cards-wrap { grid-template-columns: repeat(2, 1fr); max-width: 780px; }
.cards.horizontal,
.cards.horizontal .center { width: 100%; max-width: none; }
}

@media screen and (max-width: 710px) {
.cards .cards-wrap { width: 100%; grid-template-columns: 1fr; }
.cards.horizontal,
.cards.horizontal .center { left: 0; width: 100%; max-width: none; }
}

@media screen and (max-width: 370px) {
.cards .card { width: calc(100% - 40px); padding: 20px; }
.cards .card .booking-button { padding: 9px 5px; }
.cards .card .bottom .pricing b { margin-left: 0; }
}

/* Cards filter */
.cards-filter { margin: 40px 0; text-align: center; }

.cards-filter .buttons { position: relative; display: inline-flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cards-filter .buttons .item input { display: none; }
.cards-filter .buttons .item label {position: relative; float: left; display: inline-block; background-color: white; color: var(--blue); font-size: 14px; box-shadow: 0px 2px 10px 0 rgba(112,113,138,.1); border-radius: 12px; padding: 14px 30px; user-select: none; }
.cards-filter .buttons a.item label{ cursor: pointer; }
.cards-filter .buttons .item.active label,
.cards-filter .buttons .item.active input,
.cards-filter .buttons .item input:checked + label,
.cards-filter .buttons .item label:hover { color: white; background-color: var(--blue); }

.cards-filter .marks { position: relative; padding: 0 100px; width: calc(100% - 200px); margin: 40px 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cards-filter .marks input { display: none; }
.cards-filter .marks label { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--blue); cursor: pointer; }
.cards-filter .marks label:before { content: ''; position: relative; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('https://catcar.ua/images/ico/checkbox-empty.svg'); }
.cards-filter .marks input:checked + label:before { background-image: url('https://catcar.ua/images/ico/checkbox.svg'); }

@media screen and (max-width: 1420px) {
.cards-filter .marks { padding: 0 20px; width: calc(100% - 40px); }
}

@media screen and (max-width: 1000px) {
.cards-filter .marks { gap: 15px 2px; padding: 0; width: 100%; }
}

@media screen and (max-width: 900px) {
.cards-filter .marks { grid-template-columns: repeat(4, 1fr); }
}

@media screen and (max-width: 650px) {
.cards-filter .marks { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 500px) {
.cards-filter .marks { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 360px) {
.cards-filter .marks { grid-template-columns: 1fr; gap: 10px; padding: 0 30px; width: calc(100% - 60px); }
}