@font-face {
    font-family: 'Arame_Mono_Bold';
    src: url('/public/wp-content/plugins/custom-slider-carousel/assets/css/Arame_Mono_Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

.cpb-block.type1 {
    position: relative;
    padding: 20px 5%;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 55% 35%;
    gap: 15px; /* Adds space between elements */
    /*flex-direction: column; !* Ensures content stacks vertically *!*/
    min-width: 100%;

    @media (max-width: 1440px) {
        grid-template-columns: 55% auto;
        padding: 20px clamp(0.938rem, -0.9rem + 3.5vw, 2.25rem);
    }

    @media (max-width: 960px) {
        grid-template-columns: auto;
        min-width: unset;
    }

    > .text {
        display: flex;
        align-items: start;
        flex-direction: column;
        font-family: 'Roboto Mono', monospace;
        font-size: clamp(1.125rem, 1rem + 0.417vw, 1.25rem);
        font-weight: 400;
        line-height: clamp(1.462rem, 1.3rem + 0.542vw, 1.625rem);
        letter-spacing: -0.5px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

        h2 {
            padding: 0;
            margin: 0;
            font-family: 'Arame_Mono_Bold', monospace;
            font-size: clamp(1.375rem, 0.5rem + 2.917vw, 2.25rem) !important;
            font-weight: 500;
            line-height: clamp(1.512rem, 0.55rem + 3.208vw, 2.475rem);
            letter-spacing: -0.5px;
            text-align: left !important;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            text-transform: uppercase;

        }
    }

    .cpb-image {
        background: #151515;
        width: 382.68px;
        height: 484.42px;
        margin: auto;

        @media (max-width: 1100px) {
            width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem);
            height: clamp(23.75rem, 9.299rem + 23.308vw, 30.276rem);
        }

        img {
            position: relative;
            border-radius: 0;
            max-width: 382.68px !important;
            width: 382.68px !important;
            height: auto;

            @media (max-width: 1100px) {
                max-width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;
                width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;

            }
        }
    }
}


.cpb-block.type2 {
    position: relative;
    padding: 20px 5%;
    display: grid;
    grid-template-columns: 35% 55%;
    gap: 15px; /* Adds space between elements */
    min-width: 100%;

    @media (max-width: 1440px) {
        grid-template-columns: auto 55%;
        padding: 20px clamp(0.938rem, -0.9rem + 3.5vw, 2.25rem);
    }

    @media (max-width: 960px) {
        display: flex;
        flex-direction: column-reverse;
        min-width: unset;
    }

    > .text {
        display: flex;
        align-items: start;
        flex-direction: column;
        font-family: 'Roboto Mono', monospace;
        font-size: clamp(0.938rem, 0.875rem + 0.208vw, 1rem);
        line-height: clamp(1.219rem, 1.137rem + 0.271vw, 1.3rem);
        letter-spacing: -0.5px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;


        h2 {
            padding: 0;
            margin: 0;
            font-family: 'Arame_Mono_Bold', monospace;
            font-size: clamp(1.375rem, 0.5rem + 2.917vw, 2.25rem) !important;
            font-weight: 500;
            line-height: clamp(1.512rem, 0.55rem + 3.208vw, 2.475rem);
            letter-spacing: -0.5px;
            text-align: left !important;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            text-transform: uppercase;

        }

        > .cpb-copy-second {
            > h4 {
                padding: 0;
                margin: 0;
                font-family: 'Arame_Mono_Bold', monospace;
                font-size: clamp(1.125rem, 0.75rem + 1.25vw, 1.5rem);
                font-weight: 500;
                line-height: clamp(1.238rem, 0.825rem + 1.375vw, 1.65rem);
                letter-spacing: -0.5px;
                text-align: left;
                text-transform: uppercase;
            }
        }

        > .row {
            display: grid;
            grid-template-columns: auto auto;
            * {
                font-weight: 700;
            }

             > .cpb-icon-second {
                width: 52px!important;
                height: 52px!important;

                img {
                    border-radius: 0;
                    width: 52px!important;
                    height: 52px!important;
                    /*padding: 7.99px 8px 7.99px 8px;*/
                    object-fit: contain;
                }
            }
        }

        > .cpb-icon {
            width: 32px;
            height: 32px;
            > img {
                border-radius: 0;
                width: 32px;
                height: 32px;
            }
        }



    }

    .cpb-image {
        background: #151515;
        width: 382.68px;
        height: 484.42px;
        margin: auto;

        @media (max-width: 1100px) {
            width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem);
            height: clamp(23.75rem, 9.299rem + 23.308vw, 30.276rem);
        }

        img {
            position: relative;
            border-radius: 0;
            max-width: 382.68px !important;
            width: 382.68px !important;
            height: auto;

            @media (max-width: 1100px) {
                max-width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;
                width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;

            }
        }
    }
}

.cpb-block.type3 {
    position: relative;
    padding: 20px 5%;
    display: grid;
    gap: 15px; /* Adds space between elements */

    h3 {
        font-family: 'Roboto Mono', monospace;
        font-size: clamp(1.125rem, 1rem + 0.417vw, 1.25rem);
        font-weight: 700;
        line-height: clamp(1.484rem, 1.319rem + 0.55vw, 1.649rem);
        letter-spacing: -0.5px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin: auto;

    }

    > .flex {
        display: grid;
        grid-template-columns: 55% 35%;
        gap: 15px;
        min-width: 100%;

        @media (max-width: 1440px) {
            grid-template-columns: 55% auto;
            padding: 20px clamp(0.938rem, -0.9rem + 3.5vw, 2.25rem);
        }

        @media (max-width: 960px) {
            grid-template-columns: auto;
            min-width: unset;
        }

        > .text {
            display: flex;
            align-items: start;
            flex-direction: column;
            font-family: 'Roboto Mono', monospace;
            font-size: clamp(0.875rem, 0.75rem + 0.417vw, 1rem);
            line-height: clamp(1.137rem, 0.975rem + 0.542vw, 1.3rem);
            letter-spacing: -0.5px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            padding: 0 30px 0 0;


            h2 {
                padding: 0;
                margin: 0;
                font-family: 'Arame_Mono_Bold', monospace;
                font-size: clamp(1.375rem, 0.5rem + 2.917vw, 2.25rem) !important;
                font-weight: 500;
                line-height: clamp(1.512rem, 0.55rem + 3.208vw, 2.475rem);
                letter-spacing: -0.5px;
                text-align: left !important;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                text-transform: uppercase;

            }
        }

        .cpb-image {
            background: #151515;
            width: 382.68px;
            height: 484.42px;
            margin: auto;

            @media (max-width: 1100px) {
                width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem);
                height: clamp(23.75rem, 9.299rem + 23.308vw, 30.276rem);
            }

            img {
                position: relative;
                border-radius: 0;
                max-width: 382.68px !important;
                width: 382.68px !important;
                height: auto;

                @media (max-width: 1100px) {
                    max-width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;
                    width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;

                }
            }
        }
    }
}

.cpb-bullet-points {
    padding: 0;
    margin: 0;
}

.cpb-bullet-icon {
    border-radius: 0;
    width: 30px;
    height: 30px;

    img {
        border-radius: 0 !important;
        width: 20px !important;
        height: 20px !important;
        object-fit: contain;
    }
}

.bullet-text {
    font-weight: normal;
}

.bullet-text strong {
    font-weight: bold;
}

.cpb-project-phases {
    display: flex;;
    justify-content: space-between;
    align-items: end;
    padding-bottom: 100px;
    max-width: 100%;

    >.cpb-phase {
        width: 450px;
        height: 162px;
        max-width: 50%;
        padding: 24px;
        gap: 24px;
        border-radius: 9px;
        border: 1.5px solid #000000;
        display: flex;
        align-items: center;
        font-family: 'Roboto Mono', monospace;
        font-size: 14px;
        font-weight: 700;
        line-height: 18.46px;
        letter-spacing: -0.5px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        position: relative; /* Добавлено для позиционирования псевдоэлемента */

        svg {
            position: absolute;
            top: 20px;
            left: 20px;
        }

        @media (max-width: 1100px) {
            width: clamp(17.375rem, 9.696rem + 20.476vw, 28.125rem);
            height: clamp(13.5rem, 15.911rem + -6.429vw, 10.125rem);
        }
    }

    @media (max-width: 960px) {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .cpb-phase::after {
        content: '';
        position: absolute;
        width: 86px; /* Ширина SVG */
        height: 45px; /* Высота SVG */
        background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='86'%20height='45'%20viewBox='0%200%2086%2045'%20fill='none'%3E%3Cpath%20d='M43%2032.0574V0.848145'%20stroke='%23666666'%20stroke-width='1.5'/%3E%3Ccircle%20cx='43'%20cy='35.0574'%20r='6'%20fill='%23F3D36C'%20stroke='black'%20stroke-width='6'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        /* Настройте позиционирование по вашему усмотрению */
        bottom: -45px;
        left: 50%;
        transform: translateX(-50%);

        @media (max-width: 960px) {
            top: 50%;
            left: -65px;
            transform: translateY(-50%) rotate(90deg);
        }
    }

    .cpb-phase:last-of-type::before {
        height: 1px;
        width: 100%;
        content: '';
        position: absolute;
        border-bottom: 1px solid black;
        bottom: -38px;
        left: 0;
        transform: translateX(-50%);

        @media (max-width: 960px) {
            width: 1px;
            height: 100%;
            top: 0;
            left: -35px;
            background: black;
            transform: translateY(-50%);
            border-bottom: none;
        }
    }

    .cpb-phase:first-of-type::before {
        height: 1px;
        width: 100%;
        content: '';
        position: absolute;
        border-bottom: 1px solid black;
        bottom: -38px;
        left: 0;
        transform: translateX(50%);

        @media (max-width: 960px) {
            width: 1px;
            height: 100%;
            top: 0;
            left: -35px;
            background: black;
            transform: translateY(50%);
            border-bottom: none;
        }
    }
}


.cpb-block.type4 {
    padding: 5%;

    @media (max-width: 960px) {
        padding: 20px clamp(0.938rem, -0.9rem + 3.5vw, 2.25rem);
    }
}

.cpb-impact {
    ul {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
        max-width: 100%;

        @media (max-width: 1300px) {
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }
    }

    li {
        list-style: none;
        width: 298px;
        height: 146px;
        display: grid;
        justify-content: center;
        align-items: center;
        border: 1px solid #000000;
        font-family: 'Roboto Mono', monospace;
        font-size: 14px;
        font-weight: 700;
        line-height: 18.46px;
        letter-spacing: -0.5px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        border-radius: 9px;
        padding: 24px;

        svg {
            width: 32px;
            height: 32px;
            margin: auto;
        }

        @media (max-width: 480px) {
           width: 270px;
            padding: 10px;
        }

    }


    > h3 {
        font-family: 'Roboto Mono', monospace;
        font-size: clamp(1.125rem, 1rem + 0.417vw, 1.25rem);
        font-weight: 700;
        line-height: clamp(1.484rem, 1.319rem + 0.55vw, 1.649rem);
        letter-spacing: -0.5px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }
}

.cpb-block.type4 .flex{
    position: relative;
    padding: 20px 5%;
    display: grid;
    grid-template-columns: 35% 55%;
    gap: 15px; /* Adds space between elements */
    min-width: 100%;

    @media (max-width: 1440px) {
        grid-template-columns: auto 55%;
        padding: 20px clamp(0.938rem, -0.9rem + 3.5vw, 2.25rem);
    }

    @media (max-width: 960px) {
        display: flex;
        flex-direction: column-reverse;
        min-width: unset;
        padding: 0;
    }

    @media (max-width: 960px) {
        padding: 0;
    }

    > .text {
        display: flex;
        align-items: start;
        flex-direction: column;
        font-family: 'Roboto Mono', monospace;
        font-size: 16px;
        line-height: 20.8px;
        letter-spacing: -0.5px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;


        h2 {
            padding: 0;
            margin: 0;
            font-family: 'Arame_Mono_Bold', monospace;
            font-size: clamp(1.375rem, 0.5rem + 2.917vw, 2.25rem) !important;
            font-weight: 500;
            line-height: clamp(1.512rem, 0.55rem + 3.208vw, 2.475rem);
            letter-spacing: -0.5px;
            text-align: left !important;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            text-transform: uppercase;

        }

        > .cpb-challenges {
            >div > h4 {
                font-family: 'Roboto Mono', monospace;
                font-size: 20px;
                font-weight: 700;
                line-height: 26.38px;
                letter-spacing: -0.5px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
            }
        }

        > .cpb-icon {
            width: 32px;
            height: 32px;
            > img {
                border-radius: 0;
                width: 32px;
                height: 32px;
            }
        }



    }

    .cpb-image {
        background: #151515;
        width: 382.68px;
        height: 484.42px;
        margin: auto;

        @media (max-width: 1100px) {
            width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem);
            height: clamp(23.75rem, 9.299rem + 23.308vw, 30.276rem);
        }

        img {
            position: relative;
            border-radius: 0;
            max-width: 382.68px !important;
            width: 382.68px !important;
            height: auto;

            @media (max-width: 1100px) {
                max-width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;
                width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;

            }
        }
    }
}

.cpb-block.type5 {
    position: relative;
    padding: 20px 5% 50px;
    display: grid;
    grid-template-columns: 55% 35%;
    gap: 15px;
    min-width: 100%;

    @media (max-width: 1440px) {
        grid-template-columns: 55% auto;
        padding: 20px clamp(0.938rem, -0.9rem + 3.5vw, 2.25rem);
    }

    @media (max-width: 960px) {
        display: flex;
        flex-direction: column-reverse;
        min-width: unset;
    }

    > .text {
        display: flex;
        align-items: start;
        flex-direction: column;
        font-family: 'Roboto Mono', monospace;
        font-size: clamp(0.938rem, 0.875rem + 0.208vw, 1rem);
        line-height: clamp(1.219rem, 1.137rem + 0.271vw, 1.3rem);
        letter-spacing: -0.5px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;


        h2 {
            padding: 0;
            margin: 0;
            font-family: 'Arame_Mono_Bold', monospace;
            font-size: clamp(1.375rem, 0.5rem + 2.917vw, 2.25rem) !important;
            font-weight: 500;
            line-height: clamp(1.512rem, 0.55rem + 3.208vw, 2.475rem);
            letter-spacing: -0.5px;
            text-align: left !important;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            text-transform: uppercase;

        }

        h4 {
            padding: 0;
            margin: 0;
            font-family: 'Roboto Mono', monospace;
            font-size: clamp(1.125rem, 1rem + 0.417vw, 1.25rem);
            font-weight: 700;
            line-height: clamp(1.484rem, 1.319rem + 0.55vw, 1.649rem);
            letter-spacing: -0.5px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;

        }

        > .cpb-icon {
            width: 32px;
            height: 32px;
            > img {
                border-radius: 0;
                width: 32px;
                height: 32px;
            }
        }



    }

    .cpb-image {
        background: #151515;
        width: 382.68px;
        height: 484.42px;
        margin: auto;

        @media (max-width: 1100px) {
            width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem);
            height: clamp(23.75rem, 9.299rem + 23.308vw, 30.276rem);
        }

        img {
            position: relative;
            border-radius: 0;
            max-width: 382.68px !important;
            width: 382.68px !important;
            height: auto;

            @media (max-width: 1100px) {
                max-width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;
                width: clamp(18.75rem, 7.402rem + 18.304vw, 23.875rem) !important;

            }
        }
    }
}

.cpb-block img {
    max-width: 100%;
    height: auto;
}

.cpb-copy, .cpb-copy-second, .cpb-description {
    margin-top: 10px;
}

.cpb-icon, .cpb-icon-second {
    display: inline-block;
    margin-right: 10px;
}

/* Styles for images */
.cpb-image img,
.cpb-icon img,
.cpb-icon-second img,
.cpb-bullet-icon img {
    width: 105px;
    height: 105px;
    object-fit: cover;
    border-radius: 50%; /* Rounded images if needed */
}

/* Ensure correct display of icons and images */
.cpb-icon, .cpb-icon-second, .cpb-bullet-icon {
    display: inline-block;
    margin-right: 10px;
}

/* Additional Styles as Needed */
.cpb-bullet-points {
    list-style-type: none;
    padding: 0;
}

.cpb-bullet-points li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.cpb-bullet-points .cpb-bullet-icon {
    margin-right: 10px;
}

.cpb-project-phases, .cpb-challenges, .cpb-key_takeaways {
    margin-top: 20px;
}

.cpb-contact-section {
    margin-top: 20px;
}

.button {
    margin-top: 10px;
}



.hero-button {
    padding: 15px 30px;
    font-size: 1em;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;

    @media (max-width: 480px) {
        padding: 11px 17px;
    }
}

.button-modal-cta {
    background-color: #c6c6c6;
    color: #151515;
    border: 2px solid #151515;
    padding: 17px 32px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease; /* Добавляем плавный переход для transform */
    align-self: center;
    font-family: 'Arame_Mono_Bold', monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 17.6px;
    letter-spacing: -0.25px;
    position: relative;
    text-wrap: nowrap;

    &:focus {
        outline: none; /* Убираем обвод при фокусе */
    }

    &:active {
        border: 2px solid #151515; /* Оставляем ту же толщину бордера */
        outline: none; /* Убираем обвод при нажатии */
        transform: scale(1); /* Предотвращаем увеличение */
    }

    &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        right: -8px;
        width: 22px;
        height: 22px;
        background: #c6c6c6;
        clip-path: polygon(22px 0, 22px 22px, 0% 22px);

        @media (max-width: 860px) {
            background: #c6c6c6;
        }

        @media (max-width: 768px) {
            background: #c6c6c6;
        }
    }

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 15px;
        height: 15px;
        background: #151515;
        clip-path: polygon(15px 0, 15px 15px, 0% 15px);
    }

    @media (max-width: 768px) {
        font-size: 15px;
        font-weight: 700;
        line-height: 16.5px;
        padding: 17px 14px;
    }
}

.hero-button:hover {
    opacity: 0.9;
}