@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:#1f1f1f; background:#f9f9f9;}
.container {max-width:1000px;}


.header {background:#ffdb05; padding:1rem 0;}
.header img {width:150px;}
.header .link-active {color:#000; opacity:.5;}
.header .link-change {color:#000; text-decoration:none;}
.header .link-language {background:#e7c600; padding:.35rem .75rem; border-radius:.5rem;}
.header .link-header {color:#000; text-decoration:none; margin-left:1rem;}
.header .link-header:hover {color:#000; border-bottom:2px solid #000; padding-bottom:5px;}
.header .btn-download {background:#000; text-decoration:none; margin-left:1rem; color:#fff; padding:.5rem 1rem; border-radius:.5rem; border:3px solid #000; font-weight:500;}
.header .btn-download:hover {background:#fff; color:#000;}
.btn-menu {padding:0; display:none; border:0; background:transparent;}

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


.main-banner {background:#ffdb05; padding:1.5rem; background-image:url(../img/city.svg); background-repeat:repeat-x; background-position:bottom; padding-top:0;}
.main-banner-404 {background:#ccaf00; padding:1.5rem; margin-top:-1px;}
.main-banner .logo {width:100%;}
.main-banner .btn-download,
.main-banner-404 .btn-download,
.demo-cta__wrap .btn-download {
  background:#000; color:#fff; padding:1rem 0; font-size:1.1rem; border-radius:.5rem; border:3px solid #000; font-weight:500; margin-bottom:1.2rem;
}
.main-banner .btn-download:hover,
.main-banner-404 .btn-download:hover,
.demo-cta__wrap .btn-download:hover {background:#fff; color:#000;}
.main-banner .btn-download i,
.main-banner-404 .btn-download i,
.demo-cta__wrap .btn-download i {margin-right:.5rem;}


.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:fit-content; margin:auto; padding:1.5rem; border-radius:1rem; color:#2360f2;}
.advantages .item-2 .icon {background:#e4ffee; width:fit-content; margin:auto; padding:1.5rem; border-radius:1rem; color:#43945f;}
.advantages .item-3 .icon {background:#ffecee; 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:#666;}


.accordion-item {background:#f9f9f9; border:0; box-shadow:none;}
.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-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;
}





.description-bottom {background:#fff; padding:2rem 0 1rem; font-size:.9rem;}
.description-bottom h2 {margin-bottom:1rem;}


.demo-cta {background:#ffdb05; padding:3rem 0; position:relative; overflow:hidden; color:#1f1f1f;}
.demo-cta::before {
  content:""; position:absolute; inset:-40% -10% auto -10%; height:140%;
  border-radius:50%; background:radial-gradient(closest-side,rgba(255,255,255,.15),transparent 70%);
  transform:rotate(-8deg); pointer-events:none;
}
.demo-cta__wrap {position:relative; z-index:2;}
.demo-cta__content {text-align:center; max-width:900px; margin:0 auto;}
.demo-cta__title {font-weight:800; margin:0 0 10px; color:#1f1f1f;}
.demo-cta__subtitle {margin:0 auto 24px; color:#1f1f1f; max-width:720px; line-height:1.55;}


.demo-cta__row {display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:nowrap;}
.demo-cta__row .btn-download {
  display:inline-flex; align-items:center; gap:.5rem; margin:0;
  background:#000; color:#fff; padding:1rem 1.25rem; border-radius:.5rem; border:3px solid #000; font-weight:500;
}
.demo-cta__row .btn-download:hover {background:#fff; color:#000;}


#Price {padding:2rem 0;}
.price-head {text-align:center; margin-bottom:28px;}
.price-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.plan {
  background:#fff; border:1px solid #eef0f4; border-radius:1rem; padding:2rem 1.1rem;
  box-shadow:0 6px 18px rgba(31,52,88,.06); display:flex; flex-direction:column; justify-content:space-between;
}
.plan__title {font-weight:800;}
.plan__tag {display:inline-block; font-size:.8rem; padding:4px 8px; border-radius:999px; background:#eff6ff; color:#1f73f1; margin-bottom:8px;}
.plan__price {font-size:2rem; font-weight:800; color:#ffc109; margin:6px 0 12px;}
.plan__list {list-style:none; padding:0; margin:12px 0 18px;}
.plan__list li {display:flex; gap:10px; align-items:flex-start; margin:8px 0;}
.plan__list i {color:#10b981; margin-top:3px;}
.plan .btn {
  display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700;
  background:#ffe03b; border:0; color:#1f1f1f; text-align:center; transition:box-shadow .12s ease, transform .12s ease;
}
.plan .btn:hover {
  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);
}
.plan .btn:active {transform:translateY(1px) scale(.99); background:#ffe03b;}


.extras {padding:1rem 0 2rem;}
.extras-head {text-align:center; margin-bottom:20px;}
.extras-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.extra {
  background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:16px;
  box-shadow:0 4px 14px rgba(31,52,88,.05);
}
.extra__title {font-weight:800; margin:0 0 6px; display:flex; align-items:center; gap:8px;}
.extra__desc {color:#6b7380; margin:0;}
.extra__price {margin-top:8px; font-weight:700; color:#111827;}


.footer {background:#ffdb05; padding:60px; color:#000;}
.footer .link-footer {color:#000; text-decoration:none; margin-left:1rem; border-bottom:2px solid #ffdb05; white-space:nowrap;}
.footer .link-footer:hover {color:#000; border-bottom:2px solid #000; 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:.5rem 0; margin-right:.75rem; border-radius:.5rem;}
.price-block p {font-style:italic; font-size:.9rem; color:#666; 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:.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:-.1rem; padding-top:0;}
.start-block .btn-download {background:#000; color:#fff; padding:1rem 0; font-size:1.1rem; border-radius:.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:.5rem;}


@media (max-width:991.98px){
  .header {padding:1rem .5rem;}
  .btn-menu {display:block;}
  .main-banner .logo {width:80%;}
  .main-banner {padding:.5rem; padding-bottom:1rem;}
  .advantages {padding:.5rem 0;}
  .advantages .item-1, .advantages .item-2, .advantages .item-3 {margin-top:1.5rem;}
  .features-container {margin:1rem 0 0;}
  .logo-footer {display:none;}
  .footer {padding:1.5rem 0;}
  .footer .links {text-align:center;}
  .img-welcome {display:none;}
  .description-bottom {padding:1rem 0 0;}
  .logo-page {margin-right:0;}
  .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:.5rem;}
  .tutorial-block {padding-top:1rem;}
  .start-block {margin-top:0;}
  .price-grid, .extras-grid {grid-template-columns:repeat(2,1fr);}
  .demo-cta__row {flex-wrap:wrap;}
  .features-container h1 {text-align: center;}
}

@media (max-width:575.98px){
  .price-grid, .extras-grid {grid-template-columns:1fr;}
  #Price {padding:1rem 0}
  .extras {padding:1rem 0;}
  .demo-cta {padding:44px 0;}
  .demo-cta__row {flex-direction:column; gap:.6rem;}
  .demo-cta__row .btn-download {width:100%; justify-content:center;}
}