@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
    @import url("https://fonts.googleapis.com/css2?family=Jura:wght@500;600;900&display=swap");

    /*  banner_cards */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        --color: rgba(30, 30, 30);
        --bgColor: rgba(245, 245, 245);
        min-height: 100vh;

        display: grid;
        align-content: center;
        gap: 2rem;
        /* padding: 2rem; */

        font-family: "Jura", sans-serif;
        color: var(--color);
        background: var(--bgColor);
    }

    ul.banner_cards {
        --col-gap: 2rem;
        --barH: 1rem;
        --roleH: 2rem;
        --flapH: 2rem;

        width: min(60rem, 100%);
        margin-inline: auto;

        display: flex;
        flex-wrap: wrap;

        gap: var(--col-gap);
        padding-inline: calc(var(--col-gap) / 2);

        justify-content: center;
        align-items: flex-start;
        list-style: none;
        margin-bottom:20px;
    }
    ul.banner_cards li {
        width: 20em;
        display: grid;
        grid-template:
        "role"
        "icon"
        "title"
        "descr"
        "descr_align_left";
        align-items: flex-start;
        gap: 1rem;
        padding-block-end: calc(var(--flapH) + 1rem);
        text-align: center;
        background: var(--accent-color);
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.6) var(--roleH),
            rgba(0, 0, 0, 0.4) calc(var(--roleH) + 0.5rem),
            rgba(0, 0, 0, 0) calc(var(--roleH) + 0.5rem + 5rem)
        );
        clip-path: polygon(
            calc(var(--col-gap) / -2 - 5px) 0,
            calc(100% + var(--col-gap) / 2 + 5px) 0,
            calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)),
            50% 100%,
            calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH))
        );
    }

    ul.banner_cards li::before {
        content: "";
        grid-area: role;
        height: var(--barH);
        width: calc(100% + var(--col-gap));
        margin-left: calc(var(--col-gap) / -2);
        margin-top: calc(var(--roleH) / 2 - var(--barH) / 2);
        background: grey;
        z-index: -1;
        background-image: linear-gradient(
            rgba(255, 255, 255, 0.4),
            rgba(255, 255, 255, 0.2) 30%,
            rgba(255, 255, 255, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            rgba(0, 0, 0, 0.2) 70%,
            rgba(0, 0, 0, 0.4)
        );
    }

    ul.banner_cards li::after {
        content: "";
        grid-area: role;
        background: var(--accent-color);
        background-image: linear-gradient(
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(0, 0, 0, 0.1) 60%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.4)
    );
        height: var(--roleH);
    }

    ul.banner_cards li .icon,
    ul.banner_cards li .title,
    ul.banner_cards li .descr,
    ul.banner_cards li .descr_align_left {
        padding-inline: 1rem;
        color: white;
        text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
    }

    ul.banner_cards li .icon {
        font-size: 3rem;
    }
    ul.banner_cards li .title {
        font-size: 1.25rem;
        font-weight: 700;
    }

    ul.banner_cards li .descr {
        font-size: 0.8rem;
    }
    ul.banner_cards li .descr_align_left {
        font-size: 0.9rem;
        text-align: left;
    }

    /* Circle Orders*/
    ul.circle_orders {
      width: min(60rem, 90%);
      margin: 20px 0px 20px 0px;
      margin-inline: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
      justify-content: center;
      gap: 2rem;
      list-style: none;
    }

    ul.circle_orders li {
      max-width: 13rem;
      justify-self: center;
      display: grid;
      grid-template:
        "icon"
        "line"
        "dot"
        "title"
        "descr" 1fr;
      justify-items: center;
      align-items: flex-start;
      text-align: center;
    }

    ul.circle_orders li .icon {
      grid-area: icon;
      width: 6rem;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      color: white;
      font-size: 1.6rem;
      border: 0.4rem solid var(--bgColor);
      border-radius: 50%;
      background: var(--accent-color);
      box-shadow: -0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.45),
        inset -0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.45);
    }

    ul.circle_orders li::before {
      content: "";
      grid-area: line;
      height: 2rem;
      border-right: 2px dotted currentColor;
    }

    ul.circle_orders li::after {
      content: "";
      grid-area: dot;
      width: 1rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent-color);
      justify-self: center;
      margin-bottom: 0.5rem;
    }

    ul.circle_orders li .title {
      grid-area: title;
      margin-block: 0.5rem;
      font-size: 1.3rem;
      font-weight: 600;
      text-align: center;
      text-transform: uppercase;
    }

    /* Slider Brands */
    .slider-area h2 {
      text-align: center;
      font-family: impact;
      font-size: 28px;
      letter-spacing: 2px;
      margin: 20px 0 10px 0;
    }
    .wrapper {
      display: flex;
      width: 980px;
      margin: 0 auto;
      overflow: hidden;
      padding: 20px 2.5rem 20px 2.5rem;
    }
    .item {
      animation: animate 25s alternate linear infinite;
    }
    .container:hover .item {
      animation-play-state: paused;
    }
    @keyframes animate {
      0% {
        transform: translate3d(0, 0, 0);
      }
        100% {
      transform: translate3d(-1100px, 0, 0);
      }
    }
    @media (max-width:767px) {
      .slider-area h2 {
        font-size: 30px;
      }
      .wrapper {
        width: 95%;
        border-radius: 0;
        padding: 0;
        padding: 20px 0 0 0;
      }
    }