@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('bootstrap.css');
@import url('icons.css');

html, body {margin: 0;padding: 0;font-family: 'Roboto', sans-serif;color: #272e47;background: #f9f9f9;}

.container {max-width: 1000px;}
.header {background: #fff;padding: 1rem 0;box-shadow: 0 12px 16px -4px rgba(36, 57, 117, .08), 0 0 12px -4px rgba(36, 57, 117, .12);}
.header img {width: 150px;}
.main-banner {background: #fefdff;padding: 1.5rem;background-image: url(../img/city.svg);background-repeat: repeat-x;background-position: bottom;background-size: 725px;}
.main-banner-404 {background: #ccaf00;padding: 1.5rem;margin-top: -1px;}
.header .link-active {color: #000;opacity: 0.5;}
.header .link-change {color: #000;text-decoration: none;}
.header .link-language {background: #ecf3fc;padding: 0.35rem 0.75rem;border-radius: 0.5rem;}
.header .link-header {color: #272e47;text-decoration: none;margin-left: 1rem;}
.header .link-header:hover {color: #272e47;border-bottom: 2px solid #272e47;padding-bottom: 5px;}
.header .btn-download {background: #ffdb05;text-decoration: none;margin-left: 1rem;color: #000;padding: 0.75rem 1rem;border-radius: 0.5rem;font-weight: 500;}
.header .btn-download:hover {background: #ebc806;color: #000;}
.btn-menu {padding: 0;display: none;border: 0;}

.offcanvas {background: #fff;max-width: 270px;}
.offcanvas-body {padding-top: 0;}
.offcanvas-body .btn-download {margin-left: 0;margin-top: 0.5rem;text-align: center;}
.offcanvas-body .nav-link {color: #272e47;font-size: 1.1rem;}
.offcanvas-header h5 {margin-bottom: 0;}
.nav-item-hr {border-bottom: 1px solid #ecf3fc;}

.main-banner .logo {width: 100%;}
.main-banner .btn-download, .main-banner-404 .btn-download {background: #000;color: #fff;padding: 1rem 0;font-size: 1.1rem;border-radius: 0.5rem;border: 3px solid #000;font-weight: 500;margin-bottom: 1.2rem;}
.main-banner .btn-download:hover, .main-banner-404 .btn-download:hover {background: #fff;color: #000;}
.main-banner .btn-download i, .main-banner-404 .btn-download i {margin-right: 0.5rem;}
.main-banner .btn-telegram-app {color: #ffdb05;}

.advantages {background: #fff;padding: 1.5rem 0;box-shadow: 0 12px 16px -4px rgba(36, 57, 117, .08), 0 0 12px -4px rgba(36, 57, 117, .12);}
.advantages .item-1 .icon {background: #f4f5ff;width: auto;width: fit-content;margin: auto;padding: 1.5rem;border-radius: 1rem;color: #2360f2;}
.advantages .item-2 .icon {background: #e4ffee;width: auto;width: fit-content;margin: auto;padding: 1.5rem;border-radius: 1rem;color: #43945f;}
.advantages .item-3 .icon {background: #ffecee;width: auto;width: fit-content;margin: auto;padding: 1.5rem;border-radius: 1rem;color: #e55e6e;}
.advantages .item-1 h5 {color: #2360f2;}
.advantages .item-2 h5 {color: #43945f;}
.advantages .item-3 h5 {color: #e55e6e;}
.advantages p {color: #666666;}

.accordion-button {margin-top: 1.5rem;border: 0;padding: 1.5rem;border-radius: 1rem!important;background: #fff;box-shadow: 0 12px 16px -4px rgba(36, 57, 117, .08), 0 0 12px -4px rgba(36, 57, 117, .12);font-size: 1.2rem;font-weight: 500;}
.accordion-item {background: #f9f9f9;border: 0;box-shadow:none;}
.accordion-button:not(.collapsed) {background: #ffe03b;border: 0;box-shadow: 0 8px 40px rgba(255, 224, 59, .24), 0 2px 4px rgba(255, 224, 59, .12), inset 0 -1px 3px rgba(41, 34, 0, .04), inset 0 -2px 0 rgba(41, 34, 0, .01);color: #1f1f1f;}
.accordion-button:focus {border: 0;box-shadow: 0 12px 16px -4px rgba(36, 57, 117, .08), 0 0 12px -4px rgba(36, 57, 117, .12);font-size: 1.2rem;}
#featureImage { transition: opacity .25s ease; }
#featureImage.is-changing { opacity: .35; }
.features-container {margin-top: 2rem;margin-bottom: 2rem;}
.description-bottom {background: #fff;padding: 2rem 0;font-size: 0.9rem;}
.description-bottom h2 {margin-bottom: 1rem;}

.footer {background: #ecf3fc;padding: 60px;color: #272e47;}
.footer .link-footer {color: #272e47;text-decoration: none;margin-left: 1rem;border-bottom: 2px solid #ecf3fc;white-space: nowrap;}
.footer .link-footer:hover {color: #272e47;border-bottom: 2px solid #272e47;padding-bottom: 5px;}
.logo-footer {max-width: 120px;height: auto;}

.header-page {background-image: url(../img/city.svg);background-repeat: repeat-x;background-position: bottom;background-size: 300px;padding: 2rem 0;}
.logo-page {margin-right: 1.5rem;}
.tariffs {background: linear-gradient(0deg,#fff 0%, #f9f9f9 70%);padding: 3rem 0;}
.taxi-price-list {margin-bottom: 1rem;}
.taxi-price-list .icon {color: #1f1f1f;background: #ffdb05;width: 40px;text-align: center;padding: 0.5rem 0;margin-right: 0.75rem;border-radius: 0.5rem;}
.price-block p {font-style:italic;font-size: 0.9rem;color: #666666;margin-bottom: 0;}
.tariffs-list {background: #fff;padding: 1.5rem 0;box-shadow: 0 12px 16px -4px rgba(36, 57, 117, .08), 0 0 0px -4px rgba(36, 57, 117, .12);}
.tariffs-list p {margin-bottom: 0;}
.tariffs-now {margin: 0 1.5rem;margin-top: 1.5rem;}
.link {text-decoration: none;color: #e7c600;border-bottom: 1px dashed #e7c600;}
.link:hover {border: 0;}
.btn-telegram {background: #357ebd;color: #fff;padding: 1.5rem;border: 0;}
.btn-telegram:hover, .btn-telegram:focus {background: #2e6ea7!important;color: #fff!important;}
.btn-telegram i {margin-right: 5px;}
.btn-instagram {color: #fff;padding: 1.5rem;background: linear-gradient(45deg, rgba(239,0,20,1) 0%, rgba(190,0,164,1) 50%);border: 0;}
.btn-instagram:hover {background: linear-gradient(-45deg, rgba(239,0,20,1) 0%, rgba(190,0,164,1) 50%);color: #fff!important;}
.btn-instagram i {margin-right: 5px;}
.btn-tiktok {background: #ff3353fc;color: #fff;padding: 1.5rem;border: 0;}
.btn-tiktok:hover {background: #dd2e48fc!important;color: #fff!important;}
.btn-tiktok i {margin-right: 5px;}

.nav-tutorial {box-shadow: 0 12px 16px -4px rgba(36, 57, 117, .08), 0 0 12px -4px rgba(36, 57, 117, .12);background: #fff;padding: 1rem;color: #1f1f1f;font-size: 1.1rem;border-radius: 0.5rem;}
.nav-tutorial:hover {color: #1f1f1f;}
.nav-tutorial.active {background-color: #ffe03b!important;box-shadow: 0 8px 40px rgba(255, 224, 59, .24), 0 2px 4px rgba(255, 224, 59, .12), inset 0 -1px 3px rgba(41, 34, 0, .04), inset 0 -2px 0 rgba(41, 34, 0, .01);color: #1f1f1f!important;font-weight: 600;}
.tutorial-block .nav-item {margin: 1rem;}
.tutorial-block {background: #fff;padding-top: 1.5rem;box-shadow: 0 12px 16px -4px rgba(36, 57, 117, .08), 0 0 12px -4px rgba(36, 57, 117, .12);}
.start-block {background: #ccaf00;padding: 1.5rem;margin-top: -0.1rem;padding-top: 0;}
.start-block .btn-download {background: #000;color: #fff;padding: 1rem 0;font-size: 1.1rem;border-radius: 0.5rem;border: 3px solid #000;font-weight: 500;margin-bottom: 1.2rem;}
.start-block .btn-download:hover {background: #fff;color: #000;}
.start-block .btn-download i {margin-right: 0.5rem;}

@media (max-width: 991.98px){
.header {padding: 1rem 0.5rem;background: #fefdff;box-shadow: none;}
.btn-menu {display: block;}
.main-banner .logo {width: 80%;}
.main-banner {padding: 0.5rem;padding-bottom: 0;}
.advantages {padding: 0.5rem 0;}
.advantages .item-1, .advantages .item-2, .advantages .item-3 {margin-top: 1.5rem;}
.features-container {margin-top: 1rem;margin-bottom: 0rem;}
.logo-footer {display: none;}
.footer {padding: 1.5rem 0;}
.footer .links {text-align: center;}
.img-welcome {display: none;}
.description-bottom {padding: 1rem 0;}
.logo-page {margin-right: 0rem;}
.tariffs {padding: 1rem 0;}
.tariffs-list {padding: 1rem 0;}
.faq-container {margin: 1.5rem 0;}
.faq-container h3 {text-align: center;}
.tutorial-block .nav-item {margin: 0.5rem;}
.tutorial-block {padding-top: 1rem;}
.start-block {margin-top: 0rem;}
}