/* ========== Головний екран ========== */
.deltruck-logo-white {
    display: block !important;
}

.deltruck-logo-black {
    display: none !important;
}

.header__phone a {
    color: #fff !important;
}

.header__phone span {
    color: rgba(255,255,255,.7) !important;
}

.header__link {
    color: #fff !important;
    background-color: #B2B2B2 !important;
}

.hero {
    /*background-image: url('../../Images/ThirdVersion/landing/content/hero.jpg');*/
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 50px;
}
    .hero > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 60px 60px;
    }

    .hero > .container-tv-div {
        padding-top: var(--width208);
        position: relative;
        z-index: 1;
    }

    .hero p {
        margin-top: var(--width26);
    }

    .hero .double-p {
        margin-top: var(--width120);
    }

    .hero h1 {
        line-height: 1.1;
    }

    .hero input {
        background-color: #B2B2B2;
        border: 2px solid white;
        width: var(--width560);
        color: white;
        font-weight: 300;
        margin-top: var(--width22);
        height: var(--width77);
    }

    .hero button,
    .how-we-work a {
        border: 2px solid white;
        width: var(--width560);
        margin-top: var(--width22);
        height: var(--width77);
    }

.fast-phone::placeholder {
    color: white;
}

/* ========== Лише за останній місяць ========== */

.last-month {
    border-radius: 0 0 60px 60px;
    background-color: white;
    position: relative;
    z-index: 2;
}

.last-month .stats-grid {
    margin-top: var(--width61);
    display: flex;
    justify-content: space-between;
    text-align: center;
}

    .last-month .stats-grid .value {
        font-size: var(--width80);
        font-weight: 900;
        color: #B52327;
        text-align: center;
    }

    .last-month .stats-grid .description {
        font-size: var(--width37);
        font-weight: 900;
        text-align: center;
    }

/* ========== Чому обирають DelTruck ========== */

.why-choose {
    /*background-image: url('../../Images/ThirdVersion/landing/content/why-choose.jpg');*/
    margin-top: -90px;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    z-index: 1;
}

    .why-choose > div {
        position: relative;
        z-index: 2;
    }

    .why-choose > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 60px 60px;
    }

    .why-choose h2 {
        margin-top: var(--width80);
    }

.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--width50) var(--width135);
}

.why-item {
    display: flex;
    align-items: center;
    height: var(--width135); 
    background: #fff;
    border-radius: 0 999px 999px 0;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    padding-left: var(--width100)
}

    .why-item:nth-child(2n) {
        border-radius: 999px 0 0 999px;
    }

    .why-item img {
        width: var(--width58);
        height: var(--width58);
        margin-right: var(--width35);
        object-fit: contain;
    }

.why-description {
    padding-left: var(--width100);
    margin-top: var(--width60);
}

    .why-description > p {
        font-size: var(--width23);
    }

        .why-description > p:nth-child(2n) {
            margin-top: var(--width20);
        }

/* ========== Як ми працюємо ========== */
.how-we-work > div {
    width: 100%;
    padding-left: var(--width100);
    padding-top: var(--width100);
    padding-bottom: var(--width100);
}

    .how-we-work > div > div {
        width: 50%;
    }

.how-we-work > ._flex {
    display: flex;
    align-items: stretch;
}

.how-we-work-content {
    display: flex;
    flex-direction: column;
}

    .how-we-work-content a {
        margin-top: auto;
        text-transform: uppercase;
    }

.how-we-work h3 > span {
    color: #B52327;
}

.how-we-work p {
    padding-top: var(--width20);
    padding-bottom: var(--width20);
}

.how-we-work-table {
    margin-top: var(--width61);
}

    .how-we-work-table > div {
        margin-bottom: var(--width32);
    }

    .how-we-work-table > ._flex > div:nth-child(1n) {
        width: 80%;
    }

    .how-we-work-table > ._flex > div:nth-child(2n) {
        width: 20%;
    }

.step-1 img {
    margin-left: 12px;
}

.step-2 img {
    margin-left: 6px;
}

.step-2 h3 {
    padding-top: 8px;
}

.step-3 h3 {
    padding-top: 20px;
}

/* ========== Нам довіряють ========== */
.trust-logos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--width45);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: #B52327 #f0f0f0;
    padding-top: var(--width77);
    padding-bottom: var(--width77);
}

    .trust-logos::-webkit-scrollbar {
        height: 5px;
    }

    .trust-logos::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 10px;
    }

    .trust-logos::-webkit-scrollbar-thumb {
        background: #B52327;
        border-radius: 10px;
    }

    .trust-logos img {
        flex: 0 0 auto;
        width: auto;
        max-height: var(--width135);
        object-fit: contain;
    }

.trust-line {
    width: var(--width236);
    height: 5px;
    margin: 45px 0 0 65px;
    background: #B52327;
    border-radius: 10px;
}

.trust .slick-arrow {
    display: none !important;
}

.trust .slick-dots li{
    width: 4% !important;
}

/* ========== Автопарк ========== */
.autopark {
    background-color: #B52327;
}

.container-tv.autopark button.slick-arrow {
    background-color: white;
    display: none !important;
}

    .autopark > .container-tv-div {
        background-color: white;
        border-radius: 0 0 60px 60px;
    }

    .autopark h2 {
        margin-bottom: var(--width61);
    }

    .autopark p:not(:first-of-type) {
        margin-top: var(--width20);
    }

.autopark-cars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--width24);
}

    .autopark-cars:first-of-type {
        margin-top: var(--width61);
        margin-bottom: var(--width35);
    }

        .autopark-cars:first-of-type > div {
            text-align: center;
        }

    .autopark-cars h3 {
        margin-bottom: var(--width20);
        line-height: 1.1;
    }

    .autopark-cars img {
        width: 100%;
        max-width: var(--width342);
        height: auto;
        object-fit: contain;
    }

.autopark-cars-tonn {
    display: grid;
    grid-template-columns: 1fr 2fr 4fr 1fr;
    gap: var(--width12);
    align-items: center;
    margin-top: var(--width48);
}

    .autopark-cars-tonn > div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--width54);
        border-radius: var(--width27);
        background: #B52327;
        color: #fff;
        font-weight: 900;
    }

        .autopark-cars-tonn > div:last-child {
            background: transparent;
            color: #d9d9d9;
            justify-content: flex-start;
            font-size: var(--width80);
            margin-top: -20px;
        }

.slick-slide img {
    width: 85%;
    margin: var(--width32) auto;
    max-height: var(--width135);
}

.slick-slide h3 {
    width: fit-content;
    margin: var(--width37) auto;
}

.slick-dots {
    margin-bottom: var(--width32);
    margin-top: var(--width32);
}

    .slick-dots li {
        width: 20%;
        margin: 0 2%;
        padding-top: 20px;
    }

    .slick-dots li button {
        background-color: #D9D9D9;
        width: 100%;
        height: 10px;
    }

        .slick-dots li.slick-active button {
            background-color: #B52327;
        }

/* ========== Адаптація ========== */


@media (max-width: 1048px) {
    .why-choose {
        margin-top: 0px;
    }

        .why-choose .container-tv-div {
            padding-top: 0px;
            padding-bottom: var(--width30);
        }

        .why-choose h2 {
            margin-top: var(--width30);
        }
}



@media (max-width: 800px) {

    .mobile-send-phone-block {
        margin-top: var(--width32);
        margin-bottom: var(--width48);
    }

        .mobile-send-phone-block > p {
            font-size: var(--width20);
            color: #787878;
            margin-bottom: var(--width12);
        }

        .mobile-send-phone-block > div > input {
            width: 100%;
            border: 2px solid #D9D9D9;
        }

            .mobile-send-phone-block > div > input::placeholder {
                color: #D9D9D9;
            }

        .mobile-send-phone-block > button {
            width: 100%;
            margin-top: var(--width12);
            border: 1px solid white;
        }

    .background-image-general {
        aspect-ratio: unset;
        height: auto;
        min-height: var(--width350);
    }

    .last-month h2 {
        background-color: #B52327;
        color: white;
        border-radius: 0 0 60px 60px;
        padding: var(--width65);
        text-align: center;
    }

    .last-month .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--width28) var(--width20);
        justify-content: center;
        margin-bottom: var(--width40);
    }

        .last-month .stats-grid .value {
            font-size: var(--width65);
        }

    .why-choose {
        padding-bottom: var(--width30);
        margin-top: -60px;
    }

        .why-choose .container-tv-div {
            padding-top: 60px;
        }

        .why-choose h2 {
            margin-top: var(--width65);
        }

    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: var(--width18);
    }

    .why-item {
        min-height: var(--width47);
        padding: var(--width35) var(--width52);
        border-radius: 0 40px 40px 0;
        font-size: var(--width18);
        height: var(--width8);
        width: 94%;
    }

        .why-item:nth-child(2n) {
            border-radius: 0 40px 40px 0;
        }

        .why-item img {
            width: var(--width44);
            height: var(--width44);
            margin-right: var(--width20);
        }

    .why-description {
        padding-left: 0;
    }

    .how-we-work .header__btn {
        width: 100%;
    }

    .how-we-work > div {
        flex-direction: column-reverse;
        padding: var(--width52);
    }

        .how-we-work > div > div {
            width: 100%;
        }

    .how-we-work-table > ._flex > div:nth-child(2n) {
        text-align: right;
    }

    .how-we-work-picture > img {
        width: 100%;
        border-radius: 60px;
    }

    .how-we-work-content {
        padding-top: var(--width32);
        padding-bottom: var(--width32);
    }

    .step > div {
        width: 100%;
    }

    .step-1 img {
        width: 35%;
    }

    .step-2 img {
        width: 45%;
    }

    .step-3 img {
        width: 60%;
    }

    .step-3 h3 {
        padding-top: 15px;
    }

    .item-autopark {
        order: 1;
    }

    .item-price {
        order: 2;
    }

    .item-speed {
        order: 3;
    }

    .item-routes {
        order: 4;
    }

    .trust {
        padding: var(--width45) 0 var(--width35);
    }

        .trust h2 {
            font-size: var(--width30);
            margin-bottom: var(--width30);
        }

    .trust-logos {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--width35);
        padding-bottom: 10px;
    }

        .trust-logos img {
            flex: 0 0 auto;
        }

    .trust-line {
        width: var(--width180);
        margin: var(--width35) auto 0;
    }

    .autopark-cars-tonn {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "five ten"
            "twenty twenty"
            "ton ton";
        gap: var(--width8);
        margin-top: var(--width24);
    }

        .autopark-cars-tonn > div:nth-child(1) {
            grid-area: five;
        }

        .autopark-cars-tonn > div:nth-child(2) {
            grid-area: ten;
        }

        .autopark-cars-tonn > div:nth-child(3) {
            grid-area: twenty;
        }

        .autopark-cars-tonn > div:nth-child(4) {
            grid-area: ton;
        }

        .autopark-cars-tonn > div {
            border-radius: 999px;
            font-size: var(--width28);
        }

            .autopark-cars-tonn > div:last-child {
                justify-content: center;
                margin-top: 8px;
                background: transparent;
                color: #e5e5e5;
                font-size: var(--width77);
                line-height: 1;
            }
}