h1, h2, h3, h4, h5 {
    font-family: 'Roboto-Bold', 'Montserrat', sans-serif;
    font-weight: normal;
}

#driver,
#client {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 4rem 1.5rem;
}

#presentation,
#dashboard,
#products,
#pbx,
#automatic-dispatch,
#contact {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 4rem 1.5rem;
}

#driver,
#products,
#automatic-dispatch {
    flex-direction: row-reverse;
}

#presentation {
    padding: 5rem 1.5rem 11rem;
    .background {
        top: -20rem;
        height: calc(100% + 20rem);
        background-color: var(--primary);
    }

    .text {
        max-width: 50rem;
        box-shadow: none;
        background-color: transparent;
        border: none;
    }
    img {
        max-width: 50rem;
    }

    ul {
        list-style: none;
        margin: 2rem auto 0;
        li {
            strong {
                margin-left: 1rem;
            }
            line-height: 1.3;
            font-size: 2rem;
        }
    }
}

#your-app {
    padding: 4rem 0 0 0;
    > h1 {
        text-align: center;
        font-size: 4rem;
        margin-bottom: 0;
    }
    .subtitle {
        display: flex;
        gap: 0.75rem;

        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'Roboto-Regular';
        font-size: 2.5rem;

        margin-bottom: 2rem;
        .text-animation {
            max-height: 3.75rem;
            font-family: 'Roboto-Bold';
            color: var(--primary-shade);
            overflow: hidden;
            .inner {
                animation: scroll 5s infinite;
            }
            span {
                display: block;
                line-height: 1.5;
            }
        }
    }
    .old {
        position: relative;
        display: flex;
        gap: 1rem;
        justify-content: center;

        img {
            max-width: 35rem;
            width: calc(100vw - 48px);
            display: block;
            margin: 0 auto;
        }
        .text-1 {
            font-size: 3rem;
            margin: 0;
            text-align: center;
        }

        .text {
            max-width: 40rem;
            overflow: hidden;
            padding: 0;
            margin: auto 0;
            h2 {
                font-size: 2.5rem;
                margin-bottom: 0;
                /* background-color: var(--primary); */
                /* border-bottom: 1rem solid black; */
                padding: 2.5rem 2.5rem 1rem 2.5rem;
            }
            p {

                padding: 0 2.5rem 2.5rem 2.5rem;
            }
        }
    }
}

@keyframes scroll {
  0%  { transform: translateY(0); }
  8%  { transform: translateY(0); }

  26%  { transform: translateY(-24%); }
  41%  { transform: translateY(-24%); }

  60%  { transform: translateY(-49%); }
  75%  { transform: translateY(-49%); }

  93%  { transform: translateY(-75%); }
  100% { transform: translateY(-75%); }
}

#products {
    /* padding: 0 0 2rem 0; */
    /* .background { */
    /*     background: url(/assets/world-map-146505.svg); */
    /*     background-color: var(--secondary-tint); */
    /*     background-repeat: no-repeat; */
    /*     background-position: center 1rem; */
    /*     background-size: auto calc(100% - 2rem); */
    /* } */

    .text {
        max-width: 35rem;
    }
    img {
        max-width: 50rem;
    }
}

#dashboard {
    padding-top: 0;
    .text {
        max-width: 35rem;
        flex: 0 0 auto;
    }
    .extra {
        i {
            margin-right: 0.5rem;
        }
        h3 {
            margin: 0 0 1rem;
        }
        background: var(--primary);
        max-width: 40rem;
        margin: 2rem auto 0;
        padding: 2rem;
        border-radius: 1rem;
    }
}

#driver {
    .text {
        max-width: 35rem;
        position: relative;
        flex: 0 1 auto;
        background-color: white;
        background: url(/assets/travel-7146155.svg);
        background-size: 75%;
        background-position: right 7rem;
        background-repeat: no-repeat;
    }
        /* img { */
        /*     position: absolute; */
        /*     bottom: 0; */
        /*     width: 100%; */
        /*     height: 100%; */
        /* } */
}

#client {
    .text-container {
        max-width: 35rem;
        flex: 0 1 auto;
        img {
            width: 100%;
        }
    }
}

#pbx,
#automatic-dispatch {
    .text {
        max-width: 35rem;
        flex: 0 0 auto;
    }
}

.background {
    position: absolute;
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    transform: skewY(-5deg);
    z-index: -1;
}

.phone-overlay {
    position: absolute;
    /* width: calc(100% + 4.5rem); */
    /* top: -6rem; */
    width: 115%;
    top: -10%;
    pointer-events: none;
}

.dots {
    margin-top: 1.5rem !important;
}

.features {
    position: relative;
    padding: 3rem 0;
    .background {
        background-color: var(--primary);
    }
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;

    > :not(.background) {
        text-align: center;
        flex: none;
        width: 11rem;
        padding: 1rem;
        border-radius: 1rem;
        &:hover {
            background-color: var(--primary-tint);
        }

        > i {
            margin-bottom: 1rem;
            font-size: 4rem;
        }

        > .icon-group {
            position: relative;
            font-size: 2.5rem;
            line-height: 0;
        }
    }
}

.btn-demo,
.btn-find {
    border-radius: 2rem !important;
    max-width: 15rem !important;
}


@media (max-width: 1400px) {
    #products,
    #presentation {
        img {
            max-width: 35rem;
        }
    }
}
@media (max-width: 1024px) {
    #driver,
    #client,
    #dashboard,
    #automated-dispatch {
        .text-container {
            max-width: 40rem;
        }
        .text {
            max-width: 40rem;
        }
    }

    #driver,
    #dashboard,
    #client,
    #contact,
    #products,
    #pbx,
    #automatic-dispatch {
        flex-direction: column;
        align-items: center;
    }
    #statistics {
        flex-direction: column;
        > div {
            flex-direction: column;
            gap: 0 !important;
        }
        align-items: center;
    }
    #driver {
        gap: 7rem;
    }
    #your-app {
        padding: 2rem 0.5rem 0 0.5rem;
        .old {
            align-items: center;
            flex-direction: column;
        }
        h1 {
            font-size: 3rem;
        }
        .subtitle {
            /* flex-direction: column; */
            flex-wrap: wrap;
            gap: 0;
            font-size: 2rem;
            .text-animation {
                max-height: 3rem;
                margin-right: 0.5rem;
            }
        }
    }
    #products {
        padding: 4rem 1.5rem;
    }
    #contact {
        padding: 2rem 0.5rem;
    }
    #presentation {
        flex-direction: column-reverse;
        align-items: center;
        padding: 0 1.5rem 1rem;
        ul {
            display: none;
        }
        .image-container {
            img {
                max-width: 50rem;
                width: 100%;
                max-width: none;
            }
        }
    }
    #client {
        padding: 4rem 1.5rem;
        gap: 7rem;
        .text-container img {
            display: none;
        }
    }
    .text {
        padding: 2.5rem 1.5rem;
        margin: 0;
        max-width: 40rem;
    }
    .btn-find {
        margin: auto;
    }
    .btn-demo {
        margin: auto;
    }
}

@media (max-width: 650px) {
    body {
        overflow-x: hidden;
    }
    #your-app,
    #dashboard,
    #driver,
    #client,
    #products,
    #pbx,
    #automatic-dispatch,
    #contact {
        padding: 2rem 0.5rem;
        .text {
            h2 {
                padding: 2.5rem 1.5rem 1rem 1.5rem !important;
            }
            p {
                padding: 0 1.5rem 0 1.5rem !important;
            }
            p:last-child {
                padding-bottom: 2.5rem !important;
            }
        }
    }

    #products {
        padding: 2rem 0.5rem 0 0.5rem;
        img {
            max-width: 100%;
        }
    }
    #your-app {
        padding: 2rem 0.5rem 0 0.5rem;
        .old {
            flex-direction: column;
        }
        h1 {
            font-size: 2rem;
            padding: 1rem 0.5rem;
            margin-top: 0;
        }
        .subtitle {
            /* flex-direction: column; */
            flex-wrap: wrap;
            gap: 0;
            font-size: 1.5rem;
            .text-animation {
                max-height: 2.25rem;
                margin-right: 0.5rem;
            }
        }
    }

    #presentation {
        padding: 0 1.5rem 1rem;
        gap: 0;
        .image-container {
            padding-top: 2rem;
            padding-bottom: 2rem;
            background-color: var(--primary);
        }
        .text {
            margin-left: 0;
        }
        img {
            width: 100%;
        }
    }

    #driver {
        .text {
            background-position: right bottom;
        }
    }

    .text {
        padding: 0 0 1rem 0;
        h2 {
            font-size: 2rem !important;
        }
    }
}
/* For phone overlay */
@media (max-width: 540px) {
    #driver,
    #client {
        .images-container.mobile {
            max-width: 87%;
            .dots {
                margin: 1rem !important;
            }
        }
    }
}