/*------------------------BREADCRUMB BLOCK----------------------------------------*/

.breadcrumb {
    grid-area: breadcrumb;
    grid-template-areas: "breadcrumb_list";
    display: grid;
}

.breadcrumb_list {
    grid-area: breadcrumb_list;
    padding-left: 24px;
}

.breadcrumb_link {
    color: grey;
    text-decoration: underline;
}

.breadcrumb_item {
    display: inline;
    list-style: none;
}

.breadcrumb_self {
    text-decoration: none;
}

.disable {
    pointer-events: none;
}

.wraper-container {
    grid-area: wraper-container;
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 14fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: ". services ." ". block_services_links .";
}

/*--------------------------SERVICES BLOCK START------------------------------------*/

.services {
    grid-area: services;
    display: grid;
    grid-gap: 2rem;
    justify-items: center;
    /* text-align: center; */
    grid-template: auto / 1fr;
    grid-template-areas: "services__preamble" "services__blocks";
}

.services__preamble {
    grid-area: services__preamble;
    display: grid;
    grid-gap: 1em;
    grid-template: auto / 1fr 14fr 1fr;
    grid-template-areas: ". services__preamble-logo ." ". services__preamble-title ." ". services__preamble-text .";
    /* grid-template-areas: ". services__preamble-logo ." ". services__preamble-title ." ". services__preamble-text ."; */
}

.services__preamble-logo {
    grid-area: services__preamble-logo;
    display: grid;
    justify-self: center;
    /* color: grey; */
}

.btn_callback_order {
    border-radius: 32px;
    background: #ff8800;
    border: 2px solid #fff;
    text-shadow: 3px 3px 3px #000;
    box-shadow: 3px 3px 3px #000;
    min-height: 48px;
    padding: 10px 16px 8px 16px;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.2px;
    font-style: italic;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    /* line-height: 100%; */
}

.btn_callback_order:hover {
    text-shadow: 3px 3px 3px lightgrey;
    color: black;
    background: #72d0a0;
    border: 2px solid white;
    text-decoration: none;
}

.services__preamble-title {
    grid-area: services__preamble-title;
    display: grid;
    justify-self: center;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}

.services__preamble-text {
    grid-area: services__preamble-text;
    display: grid;
    justify-self: center;
    text-align: center;
    font-size: 1em;
}

.services__blocks {
    grid-area: services__blocks;
    justify-items: center;
    max-width: 90vw;
    /* display: grid; */
    grid-gap: 4px;
}

.piece_category {
    display: grid;
    /* grid-gap: 16px; */
    /* grid-template: auto / 70vw; */
    justify-items: center;
    text-align: center;
    /* grid-template-areas: "piece_category_link""piece_category_text"; */
}

.piece_category_link {
    display: grid;
    grid-area: piece_category_link;
}

.piece_category_title {
    grid-area: piece_category_title;
    font-size: 24px;
    color: #66a1d9;
}

.piece_category_title:hover {
    color: #72d0a0;
}

.piece_category_text {
    grid-area: piece_category_text;
}

.piece_category_services {
    display: grid;
    grid-gap: 24px 4px;
    justify-items: center;
    text-align: center;
    grid-template: auto / repeat(auto-fill, minmax(290px, 80vw));
}

.piece_category_service {
    display: grid;
    border: 2px solid #66a1d9;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
    border-radius: 10px;
}

.piece_category_service:hover {
    /* border: 2px solid #72d0a0; */
    border: 2px solid #ff8800;
}

.service__blocks_block {
    display: grid;
    grid-gap: 10px;
    justify-items: center;
    align-self: center;
    text-align: center;
    grid-template-areas: "block-img" "block-text-title" "block-text-words";
}

.block-img {
    display: grid;
    align-content: center;
    grid-area: block-img;
}

.block-text-title {
    display: grid;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    grid-area: block-text-title;
}

.class-item-thumbnail:hover {
    /* color: #72d0a0; */
    color: #ff8800;
}

.class-item-thumbnail {
    color: #66a1d9;
}

.block-text-words {
    display: grid;
    padding: 0 2px 2px 4px;
    text-align: center;
    grid-area: block-text-words;
}

.img_service {
    width: 100%;
    margin: 4px;
    justify-self: center;
    grid-area: img_service;
    height: 150px;
}

.categories_call_back {
    margin: 24px;
}

.btn_callback {
    border-radius: 32px;
    background: #ff8800;
    border: 2px solid #fff;
    text-shadow: 3px 3px 3px #000;
    box-shadow: 3px 3px 3px #000;
    min-height: 68px;
    padding: 8px 10px 8px 10px;
    justify-content: center;
    letter-spacing: 0.2px;
    font-style: italic;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    line-height: 100%;
}

.btn_callback:hover {
    text-shadow: 3px 3px 3px lightgrey;
    color: black;
    background: #72d0a0;
    border: 2px solid white;
    text-decoration: none;
}

/*--------------------------SERVICES BLOCK END------------------------------------*/

.paginator_services {
    grid-area: paginator_services;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    justify-items: center;
}

.btn_pgn {
    background-color: #72d0a0;
    background-size: cover;
    border-radius: 4px;
    border: 2px solid #72d0a0;
    min-width: 40px;
    justify-content: center;
    letter-spacing: 0.2px;
    color: #fff;
    font-weight: bold;
    line-height: 100%;
}

.btn_pgn_self {
    background-size: cover;
    border-radius: 4px;
    border: 2px solid #72d0a0;
    min-width: 30px;
    justify-content: center;
    letter-spacing: 0.2px;
    color: black;
    font-weight: bold;
    line-height: 100%;
}

.block_services_links {
    grid-area: block_services_links;
    margin-top: 24px;
    line-height: 160%;
}

.service_text_link {
    color: #72d0a0;
}

.service_text_link:hover {
    color: #ff8800;
}

@media (max-width: 440px) {
    .categories_call_back {
        margin: 24px;
    }

    .btn_callback {
        border-radius: 32px;
        background: #ff8800;
        border: 2px solid #fff;
        text-shadow: 3px 3px 3px #000;
        box-shadow: 3px 3px 3px #000;
        min-height: 68px;
        padding: 4px 8px 4px 8px;
        justify-content: center;
        letter-spacing: 0.2px;
        font-style: italic;
        font-size: 22px;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        line-height: 100%;
    }

    .btn_callback:hover {
        text-shadow: 3px 3px 3px lightgrey;
        color: black;
        background: #72d0a0;
        border: 2px solid white;
        text-decoration: none;
    }
}