/* Правки поверх стилів Webflow. Оригінальний customlogisticgroup.webflow.css не чіпаємо. */

/* Морська сторінка: FCL і LCL поруч */
.geogr-grid.sea-fcl-lcl {
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
}
.sea-fcl-lcl .offer-wrp { justify-content: flex-start; }
#fcl, #lcl, #containers { scroll-margin-top: 6vw; }


@media screen and (max-width: 767px) {
  .geogr-grid.sea-fcl-lcl {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-row-gap: 4vw;
  }
}

/* Телефон: картки «переваги» і «як ми працюємо» */
@media screen and (max-width: 767px) {
  /* картка №5 стоїть у коді третьою (на комп'ютері вона справа на всю висоту) — на телефоні ставимо її в кінець */
  .how-grid > .adv-cad.extra { order: 1; }

  /* прибираємо порожнечу між заголовком картки й текстом */
  .adv-cad,
  .adv-cad.extra {
    height: auto;
    justify-content: flex-start;
    padding-top: 22vw;
  }
  /* у Webflow тут зсув через top/margin під стару висоту картки — скидаємо */
  .w-layout-grid > .adv-cad.extra > .card-how-text,
  .w-layout-grid > .adv-cad.extra > .card-adv-text {
    top: 0;
    margin-top: 2vw;
  }
}

/* Брокерська сторінка: фото митного терміналу в першому екрані */
.img-wrp.broker {
  background-image: url('../images/service_06.webp');
  background-position: 50% 70%;
}
/* Перемикач мови UA / EN у шапці */
.lang-switch {
  color: #347c7d;
  border: 1px solid #347c7d;
  border-radius: 999px;
  padding: .25vw .7vw;
  margin-right: 1vw;
  font-family: Bebasneuecyrillic, Arial, sans-serif;
  font-size: 1.1vw;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.lang-switch:hover { background-color: #347c7d; color: #fff; }
@media screen and (max-width: 991px) {
  .lang-switch { font-size: 2.4vw; padding: .5vw 1.6vw; margin-right: 2vw; }
}
@media screen and (max-width: 767px) {
  .lang-switch { font-size: 4vw; padding: 1vw 3vw; margin-right: 3vw; }
}

/* Іконки в бірюзових плашках карток: не вилазять за край, довгий заголовок переноситься замість зсуву іконки */
.card-adv-text h3 { min-width: 0; }
.card-adv-text .icon { flex-shrink: 0; }
/* відступ іконки від правого краю картки — на всіх сторінках */
.card-adv-text:has(.icon) { padding-right: 1vw; }
@media screen and (max-width: 767px) {
  .card-adv-text:has(.icon) { padding-right: 3vw; }
}

/* Морська сторінка: бірюзова смуга над «Перевагами» — з-за неї спускаються троси контейнера, як на головній */
.large-text-section.pad.sea-divider {
  background-color: #347c7d;
  background-image: none;
  padding-top: 8vw;
  padding-bottom: 8vw;
}
@media screen and (max-width: 767px) {
  .large-text-section.pad.sea-divider { padding-top: 16vw; padding-bottom: 16vw; }
}
.large-text-section.sea-divider .big.blue { color: #fff; }

/* Контейнер зупиняється трохи вище плашки «5.»: низ контейнера — на ~70% висоти картинки */
@media screen and (min-width: 768px) {
  .sea-divider + .section-how { padding-top: 8vw; }
  .section-how .image-7[data-clg-drop] { top: -9vw; }
}
@media screen and (max-width: 767px) {
  /* на телефоні контейнер не торкається заголовка «Переваги…» */
  .section-how .image-7[data-clg-drop] { top: calc(-12% - 5vw); }
}

/* Брокерська сторінка: стос документів з печатками виїжджає з правого нижнього кута в картку №5
   (js/clg.js, data-clg-drop="left-up"). Трохи виступає за верхній і правий край картки;
   поза секцією обрізається її overflow: hidden, як контейнер на головній. */
.broker-docs {
  position: absolute;
  top: -3.4vw;
  right: -3.2vw;
  width: calc(100% + 5.2vw);
  height: auto;
  z-index: 1;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  /* на телефоні картка №5 стоїть останньою: зверху документи, під ними плашка й текст */
  .broker-docs { top: -5vw; right: -3vw; width: calc(100% + 4vw); }
  .adv-cad.extra.broker-docs-card { padding-top: 90vw; }
  .w-layout-grid > .adv-cad.extra.broker-docs-card > .card-how-text { top: 68vw; }
}


/* ===== Бігучі рядки =====
   У Webflow рядок їхав 20 с на фіксовані 2228 px і зупинявся (без повтору), а прокрутка туди-назад
   скидала його. Тепер — нескінченний CSS-рух: дві однакові смуги їдуть ліворуч на власну ширину.
   Тривалість під довжину рядка ставить js/clg.js (--marquee-time). */
/* обрізаємо лише по ширині: тіні плашок угору й униз мають лишатися видимими */
.stroke-text, .stroke-text-avia, .stroke-text-avia-extra, .stroke-text-gd, .stroke-text-avto-extra {
  overflow: hidden;
}
@supports (overflow-x: clip) {
  .stroke-text, .stroke-text-avia, .stroke-text-avia-extra, .stroke-text-gd, .stroke-text-avto-extra {
    overflow-x: clip;
    overflow-y: visible;
  }
}
.stroke-wrap, .stroke-wrap-avia, .stroke-wrap-avia-extra, .stroke-wrap-gd, .stroke-wrap-avto, .stroke-wrap-avto-extra {
  width: max-content;
  flex-shrink: 0;
  animation: clg-marquee var(--marquee-time, 30s) linear infinite;
}
@keyframes clg-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .stroke-wrap, .stroke-wrap-avia, .stroke-wrap-avia-extra, .stroke-wrap-gd, .stroke-wrap-avto, .stroke-wrap-avto-extra {
    animation-play-state: paused;
  }
}

/* ===== Кнопки: білий відблиск по жовтому колу й інверсія тексту при наведенні ===== */
.btn-wrp, .btn-wrp-nav, .submit-button {
  background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%);
  background-size: 300% 100%;
  background-position: 120% 0;
  background-repeat: no-repeat;
}
/* стрілка у колі — акуратна лінійна SVG замість текстового символу */
.btn-wrp .arrow-icon, .btn-wrp-nav .arrow-icon {
  width: 1.75vw;
  height: 1.75vw;
  background: url("../images/icon-arrow.svg") center / contain no-repeat;
}
.btn-wrp-nav .arrow-icon { width: 1.3vw; height: 1.3vw; }
.btn-wrp .arrow-icon::before, .btn-wrp-nav .arrow-icon::before { content: none; }
.submit-button {
  background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%), url("../images/icon-arrow.svg");
  background-size: 300% 100%, 1.75vw 1.75vw;
  background-position: 120% 0, center;
  background-repeat: no-repeat, no-repeat;
}
@media screen and (max-width: 767px) {
  .btn-wrp .arrow-icon, .btn-wrp-nav .arrow-icon { width: 4.4vw; height: 4.4vw; }
  .submit-button { background-size: 300% 100%, 4.4vw 4.4vw; }
}
.text-btn, .text-btn-nav {
  position: relative;
  isolation: isolate;
  transition: color .4s ease;
}
.text-btn::before, .text-btn-nav::before {
  content: "";
  position: absolute;
  inset: -.35em -.7em;
  border-radius: 999px;
  background-color: #347c7d;
  clip-path: inset(0 0 0 100% round 999px);
  transition: clip-path .4s ease;
  z-index: -1;
}
.text-btn.white::before { background-color: #fff; }
.btn { cursor: pointer; }

@media (hover: hover) {
  .btn:hover .btn-wrp, .btn:hover .btn-wrp-nav { background-position: -20% 0; }
  .btn:hover .submit-button { background-position: -20% 0, center; }
  .btn:hover .text-btn, .btn:hover .text-btn-nav { color: #fff; }
  .btn:hover .text-btn.white { color: #347c7d; }
  .btn:hover .text-btn::before, .btn:hover .text-btn-nav::before { clip-path: inset(0 0 0 0 round 999px); }
}

/* ===== Форма заявки ===== */
/* стрілка як на інших жовтих кнопках */


/* поки йде відправка — по колу кнопки біжить бірюзове кільце */
.btn.is-sending { position: relative; pointer-events: none; }
.btn.is-sending::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5vw;
  height: 5vw;
  margin-top: -2.5vw;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #347c7d;
  border-right-color: #347c7d;
  box-sizing: border-box;
  animation: clg-spin .8s linear infinite;
}
@media screen and (max-width: 767px) {
  .btn.is-sending::after { width: 12vw; height: 12vw; margin-top: -6vw; }
}
@keyframes clg-spin { to { transform: rotate(360deg); } }

/* повідомлення після відправки — у стилі сайту замість стандартних Webflow */
.w-form-done {
  background-color: #347c7d;
  color: #fff;
  border-radius: 1.4vw;
  padding: 2vw;
  text-align: left;
  font-size: 1.3vw;
  line-height: 1.4;
}
.w-form-fail {
  background-color: #f3f7f7;
  color: #1d1d1d;
  border-radius: 1.4vw;
  border-left: 4px solid #fcc55e;
  margin-top: 1.2vw;
  padding: 1vw 1.4vw;
  font-size: 1vw;
  line-height: 1.4;
}
.w-form-fail a { color: #347c7d; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media screen and (max-width: 767px) {
  .w-form-done { border-radius: 3vw; padding: 5vw; font-size: 4vw; }
  .w-form-fail { border-radius: 3vw; margin-top: 3vw; padding: 3vw 4vw; font-size: 3.6vw; }
}

/* Кнопки: коло стискається до висоти плашки за текстом (масштаб рахує js/clg.js) */
.btn-wrp, .btn-wrp-nav, .submit-button {
  transition: transform .35s ease;
  transform-origin: center;
}
@media (hover: hover) {
  .btn:hover .btn-wrp, .btn:hover .btn-wrp-nav, .btn:hover .submit-button {
    transform: scale(var(--clg-circle, .65));
    transition: transform .35s ease, background-position .7s ease;
  }
}

/* ===== Правові сторінки ===== */
.legal-section { background-color: #e5e5e5; padding-top: 6vw; padding-bottom: 8vw; }
.legal {
  max-width: 58vw;
  background-color: #fff;
  border-radius: 1.4vw;
  padding: 3vw 3.5vw;
  box-shadow: 10px 10px 40px #0002;
}
.legal h1 { margin-bottom: .6vw; }
.legal-date { color: #6b6b6b; font-size: 1vw; margin-bottom: 1.5vw; }
.legal h2 { font-size: 1.8vw; margin-top: 2.2vw; margin-bottom: .8vw; color: #347c7d; }
.legal p, .legal li { font-size: 1.15vw; line-height: 1.5; }
.legal p + p { margin-top: .8vw; }
.legal ul { padding-left: 1.4vw; margin: .6vw 0 0; }
.legal li + li { margin-top: .4vw; }
.legal a { color: #347c7d; font-weight: 600; }
@media screen and (max-width: 767px) {
  .legal-section { padding-top: 10vw; padding-bottom: 16vw; }
  .legal { max-width: none; border-radius: 3vw; padding: 6vw 5vw; }
  .legal h1 { margin-bottom: 2vw; }
  .legal-date { font-size: 3.4vw; margin-bottom: 4vw; }
  .legal h2 { font-size: 6vw; margin-top: 7vw; margin-bottom: 2.5vw; }
  .legal p, .legal li { font-size: 3.9vw; }
  .legal p + p { margin-top: 2.5vw; }
  .legal ul { padding-left: 5vw; }
}

/* підвал: копірайт і правові посилання */
.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1vw 2vw;
  margin-top: 5vw;
  padding-top: 1.5vw;
  border-top: 1px solid #0000001f;
  color: #555;
  font-size: .95vw;
}
.footer-legal-links { display: flex; gap: 2vw; }
.footer-legal a { color: #347c7d; text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
@media screen and (max-width: 767px) {
  .footer-legal { flex-direction: column; align-items: flex-start; margin-top: 10vw; padding-top: 4vw; gap: 3vw; font-size: 3.4vw; }
  .footer-legal-links { flex-direction: column; gap: 2vw; }
}

/* згода під формою */
.form-consent { margin-top: 1vw; font-size: .9vw; line-height: 1.4; color: #6b6b6b; text-align: right; }
.form-consent a { color: #347c7d; }
@media screen and (max-width: 767px) { .form-consent { margin-top: 3vw; font-size: 3.2vw; text-align: left; } }

/* Посилання: замість стандартного синього Webflow (#0082f3) і яскраво-блакитного (#02aab3) — наш бірюзовий */
.w-nav-link.w--current,
.w-dropdown-link.w--current,
.dropdown-link.w--current,
.dropdown-link-footer.w--current,
.link-servise.w--current,
.text-link:hover,
.text-block-3:hover,
.text-number:hover,
.text-number-footer:hover,
.text-link-footer:hover,
.dropdown-toggle.w--open .text-link,
.dropdown-toggle.w--open .icon-2 {
  color: #347c7d;
}
.w-dropdown-link.w--current .drop-link,
.dropdown-link.w--current .drop-link { color: #347c7d; }
.w-input:focus, .w-select:focus { border-color: #347c7d; }

/* ===== Картки послуг («акордеон») =====
   Webflow розширював картку покроково й одночасно мав CSS-переходи «all .4s» і «opacity 4s» —
   вони сперечались, звідси ривки; текст з'являвся стрибком. Тепер усе робить CSS:
   картка плавно розширюється, фото гасне, текст проявляється, коли картка майже розкрилась. */
.card-wrap-2 {
  --card-r: 1.4vw;
  border-radius: var(--card-r);
  transition: width .6s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.card-wrap-2 .card,
.card-wrap-2 .card-front-wrap,
.card-wrap-2 .image-second,
.card-wrap-2 .back-card-2 { border-radius: var(--card-r); }
.card-wrap-2 .card { transition: opacity .35s ease .1s; }
.card-wrap-2 .back-card-2 {
  /* лише внутрішнє світіння; зовнішня тінь — на самій картці, щоб її ніщо не обрізало */
  box-shadow: inset -50px -50px 100px #fff;
  transition: opacity .2s ease;
  pointer-events: none;
}
/* рядок карток не обрізаємо: картки й так стискаються в його ширину, а тіні мають бути видні */
.cards-row-2 { overflow: visible; }

@media screen and (min-width: 992px) {
  /* текст одразу зверстаний під кінцеву ширину — не перескакує, поки картка росте */
  .card-wrap-2 .back-card-2 { width: 30vw; right: auto; }
}
@media screen and (min-width: 992px) and (hover: hover) {
  /* розкрита картка не стискається — рівно 30vw; решта п’ять ділять місце, що лишилось */
  .card-wrap-2:hover { width: 30vw; flex-shrink: 0; box-shadow: 20px 20px 50px #00000026; }
  .card-wrap-2:hover .card { opacity: 0; transition: opacity .3s ease; }
  .card-wrap-2:hover .back-card-2 { opacity: 1; pointer-events: auto; transition: opacity .35s ease .25s; }
}

/* планшет і телефон: картка відкривається дотиком, «Закрити» ховає (js/clg.js) */
@media screen and (max-width: 991px) {
  .card-wrap-2 { --card-r: 3vw; }
  .card-wrap-2.is-open .back-card-2 { opacity: 1; pointer-events: auto; transition: opacity .4s ease; }
  .card-wrap-2.is-open .card { opacity: 0; transition: opacity .3s ease; }
}

/* підвал: список «Послуги» розкривається в потоці й відсуває смугу з копірайтом, а не налазить на неї */
.dropdown-list-clg-footer.w--open { position: static; }
.footer-legal-links { flex-wrap: wrap; }
.footer-credit { color: #555 !important; }
.footer-credit:hover { color: #347c7d !important; }
/* стрілка «Послуги» в підвалі — поруч зі словом, а не посередині розгорнутого блоку */
.dropdown-toggle-copy { display: inline-flex; align-items: center; }
.dropdown-toggle-copy .w-icon-dropdown-toggle {
  position: relative;
  top: auto; bottom: auto; right: auto;
  margin: 0 0 0 .4em;
}
/* контраст посилань у підвалі на сірому тлі (WCAG AA ≥ 4.5:1) */
.footer-legal a { color: #245a5b; }
.footer-credit { color: #4a4a4a !important; }

/* ===== Шапка, що ховається при прокрутці вниз і з'являється при прокрутці вгору (js/clg.js) =====
   Шапка закріплена вгорі екрана; на її висоту (--clg-nav-h) зсуваємо вміст сторінки. */
.clg-nav-fixed .navbar.w-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
.clg-nav-fixed .all-elements { padding-top: var(--clg-nav-h, 0px); }
/* разом із тінню (вона розмита на ~50 px униз), щоб від шапки не лишалось сірої смуги */
.clg-nav-fixed .navbar.w-nav.is-hidden { transform: translateY(calc(-100% - 60px)); }
@media (prefers-reduced-motion: reduce) {
  .clg-nav-fixed .navbar.w-nav { transition: none; }
}

/* ===== Текстові сторінки: про компанію, контакти, новини (tools/pages.mjs) ===== */
.clg-page .legal { margin: 0 auto; }
.legal-lead { font-size: 1.35vw; line-height: 1.5; margin-bottom: 1.2vw; }
.clg-text h2:first-of-type { margin-top: 2.6vw; }
.clg-links { list-style: none; padding-left: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: .5vw 2vw; }
.clg-links li + li { margin-top: 0; }
.clg-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2vw; margin: 2vw 0 .5vw; }
.clg-fact { background: #347c7d; color: #fff; border-radius: 1vw; padding: 1.4vw 1.5vw; display: flex; flex-direction: column; gap: .4vw; }
.clg-fact strong { font-family: Bebasneuecyrillic, Arial, sans-serif; font-size: 2.8vw; line-height: 1; font-weight: 400; }
.clg-fact span { font-size: 1vw; line-height: 1.35; }
.clg-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; margin: 1.5vw 0; }
.clg-contact { background: #f2f2f2; border-radius: 1vw; padding: 1.3vw 1.5vw; display: flex; flex-direction: column; gap: .4vw; font-size: 1.15vw; }
.clg-contact > span:first-child { color: #6b6b6b; font-size: .95vw; }
.clg-contact a { color: #002f37; font-weight: 600; text-decoration: none; }
.clg-contact a:hover { color: #347c7d; }
.clg-contact-links { display: flex; gap: 1.5vw; }
.clg-map { border-radius: 1vw; overflow: hidden; aspect-ratio: 16 / 7; background: #e5e5e5; }
.clg-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.clg-more-link { margin-top: 1vw; }
.clg-more-link a, .clg-back a { color: #347c7d; font-weight: 600; text-decoration: none; }
.clg-more-link a:hover, .clg-back a:hover { text-decoration: underline; }

/* новини */
.clg-news-head { max-width: 58vw; margin-bottom: 2.5vw; }
.clg-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6vw; }
.clg-news-card {
  display: flex; flex-direction: column; gap: .7vw;
  background: #fff; border-radius: 1.4vw; padding: 1vw 1vw 1.6vw;
  color: #002f37; text-decoration: none;
  box-shadow: 10px 10px 40px #0002;
  transition: transform .3s ease, box-shadow .3s ease;
}
.clg-news-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .9vw; }
.clg-news-date { color: #6b6b6b; font-size: .95vw; padding: 0 .4vw; }
.clg-news-title { font-family: Bebasneuecyrillic, Arial, sans-serif; font-size: 1.9vw; line-height: 1.05; padding: 0 .4vw; }
.clg-news-text { font-size: 1vw; line-height: 1.45; padding: 0 .4vw; color: #3d3d3d; }
@media (hover: hover) {
  .clg-news-card:hover { transform: translateY(-.4vw); box-shadow: 14px 18px 50px #0003; }
  .clg-news-card:hover .clg-news-title { color: #347c7d; }
}
.clg-crumbs { font-size: .95vw; color: #6b6b6b; margin-bottom: 1vw; }
.clg-crumbs a { color: #6b6b6b; font-weight: 400; text-decoration: none; }
.clg-crumbs a:hover { color: #347c7d; }
.clg-article-img { width: 100%; height: auto; border-radius: 1vw; margin: .5vw 0 1.6vw; }
.clg-back { margin-top: 2vw; }
.clg-more-h { margin: 4vw 0 1.8vw; }

@media screen and (max-width: 767px) {
  .legal-lead { font-size: 4.4vw; margin-bottom: 4vw; }
  .clg-text h2:first-of-type { margin-top: 8vw; }
  .clg-links { grid-template-columns: 1fr; gap: 2vw; }
  .clg-facts { grid-template-columns: 1fr; gap: 3vw; margin: 6vw 0 2vw; }
  .clg-fact { border-radius: 3vw; padding: 5vw; gap: 1.5vw; }
  .clg-fact strong { font-size: 10vw; }
  .clg-fact span { font-size: 3.8vw; }
  .clg-contacts { grid-template-columns: 1fr; gap: 3vw; margin: 5vw 0; }
  .clg-contact { border-radius: 3vw; padding: 4.5vw 5vw; gap: 1.5vw; font-size: 4.2vw; }
  .clg-contact > span:first-child { font-size: 3.4vw; }
  .clg-contact-links { gap: 5vw; }
  .clg-map { border-radius: 3vw; aspect-ratio: 4 / 3; }
  .clg-more-link { margin-top: 4vw; }
  .clg-news-head { max-width: none; margin-bottom: 6vw; }
  .clg-news-grid { grid-template-columns: 1fr; gap: 5vw; }
  .clg-news-card { border-radius: 3vw; padding: 3vw 3vw 5vw; gap: 2.5vw; }
  .clg-news-card img { border-radius: 2.4vw; }
  .clg-news-date { font-size: 3.4vw; padding: 0 1vw; }
  .clg-news-title { font-size: 7vw; padding: 0 1vw; }
  .clg-news-text { font-size: 3.8vw; padding: 0 1vw; }
  .clg-crumbs { font-size: 3.4vw; margin-bottom: 3vw; }
  .clg-article-img { border-radius: 3vw; margin: 2vw 0 5vw; }
  .clg-back { margin-top: 7vw; }
  .clg-more-h { margin: 12vw 0 5vw; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .clg-news-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== LCL і LTL: свої фото в першому екрані й анімація в картці №5 (js/clg.js, data-clg-drop="left") =====
   Контейнер з коробками (LCL) і навантажувач з палетою (LTL) виїжджають справа наліво у верхню частину картки. */
.img-wrp.lcl { background-image: url('../images/lcl-hero.webp'); background-position: 35% 60%; }
.img-wrp.ltl { background-image: url('../images/ltl-hero.webp'); background-position: 30% 65%; }
@media screen and (max-width: 767px) {
  .img-wrp.lcl { background-image: url('../images/lcl-hero-p-800.webp'); }
  .img-wrp.ltl { background-image: url('../images/ltl-hero-p-800.webp'); }
}
.clg-drop-card { position: relative; }
.clg-drop-img {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
}
.clg-drop-img.lcl-container { top: 1.5vw; right: -2vw; width: calc(100% + 1vw); }
.clg-drop-img.ltl-forklift { top: 3.4vw; right: -1vw; width: 100%; }
@media screen and (max-width: 767px) {
  .adv-cad.extra.clg-drop-card { padding-top: 84vw; }
  .w-layout-grid > .adv-cad.extra.clg-drop-card > .card-how-text { top: 62vw; }
  .clg-drop-img.lcl-container { top: 4vw; right: -3vw; width: calc(100% + 3vw); }
  .clg-drop-img.ltl-forklift { top: 3vw; right: -2vw; width: calc(100% + 2vw); }
}

/* Ссылки внутри текста (без своего класса) — фирменный бирюзовый вместо синего браузерного */
section p a:not([class]), section li a:not([class]) {
  color: #347c7d;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .15em;
}
section p a:not([class]):hover, section li a:not([class]):hover { color: #245a5b; }