:root {
    --primary-color: #0c71c3;
    --secondary-color: #289595;
    --background-color: #f0f0f0;

    --font-family: "Zalando Sans", sans-serif;
    --font-family2: "Zalando Sans", sans-serif;

    --page-width: 1280px;
    --header-height: 100px;

}

html {
  scrollbar-gutter: stable;
}


body {
    background-color: #f9f9f9;
    font-family: var(--font-family);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.hidden {
    display: none;
}



.icon {
    cursor: pointer;
        content: "";
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top:-4px;
        border-right:1px solid hsl(from var(--primary-color) h s l / 0.2);
        background-color: hsl(from var(--primary-color) h s 40%);

        mask-image: var(--icon-url);
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;

        -webkit-mask-image: var(--icon-url);
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;

}



.page-width {
    margin: 0 auto;
    max-width: var(--page-width);
    padding: 0 1rem;
    @media (width < 1024px) {
        padding:0;
    }
}

.push {
    display:flex;
    justify-content: space-between;
}




.toothtop {
    background-color: hsl(from var(--primary-color) h s l 40%);
    width: 100%;
    height: 150px;
    clip-path: path("M 71.169348 81.605841 H 204.45469 c 0 0 1.3437 -14.212422 -11.64967 -18.134581 -9.9876 -3.01484 -38.37714 6.946593 -81.23322 13.649975 -4.76299 0.745007 -1.69385 -3.00036 -1.69385 -3.00036 l 19.88665 -3.580231 c 0 0 8.80538 -14.94421 -20.75618 -10.618022 -9.468678 1.385695 -37.912282 -9.655688 -37.839072 21.683219 z");

}


.pentagon {
    clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 70%,
    30% 100%,
    0% 65%
    );
    @media (width < 1024px) {
        clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 90%,
        30% 100%,
        0% 90%
        );
    }
}


.employees {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 4rem;

     @media (width < 768px) {
        grid-template-columns: unset;
        display: flex;
        flex-direction: column;
    }

    &>div {
        min-height: 150px;
        display: grid;
        padding: 1rem;
        background-color: white;
        gap: 1rem;
        grid-template-columns: 1fr 3fr;
        & img.square {
            aspect-ratio: 3 / 4;
            object-fit: cover;
            object-position: center;
            display: block;
        }
    }
    & .info-block {
        display: flex;
        flex-direction: column;
        & h2 {
            font-size: 1.5rem;
            line-height: 1.6rem;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        & p {
            font-family: var(--font-family2);
            font-size: 1rem;
            font-weight: 300;
            color: #4a5559;
        }
    }

}





.information-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 0 0 4rem 0;
    @media (width < 1024px) {
        grid-template-columns: unset;
        gap: 1rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: stretch;
        margin:1rem 0;
    }

    &.single-display {
        grid-template-columns: 1fr 3fr;
        & img.square {
            aspect-ratio: 1 / 1;
            object-fit: cover;
            object-position: center;
            display: block;
        }
    }
    & .img-block {
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        @media (width < 1024px) {
            flex:0 0 30%;
        }
        @media (width < 768px) {
            flex:0 0 100%;
            order:1;
            &:nth-child(3) {
                order: 3;
            }
            &.skip {
                order: 2;
            }
        }
    }
    & .info-block {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 2rem;
        /* border-top: 2px solid hsl(from var(--primary-color) h 40 50% / 0.2); */
        background: linear-gradient(
            -43deg,
            #ffffff 100%,
            #ffffff 100%
        );
        &:last-child:nth-child(odd) {
           flex: 0 0 100%;
        }
        &::after {
            content: "";
            display: block;
            position: absolute;
            bottom: -1rem;
            left: 50%;
            width: 10%;
            height: 3px;
            transform: translateX(-50%);
            background-color: hsl(from var(--primary-color) h 40 50% / 0.5);
            z-index: 0;
        }
        @media (width < 1024px) {
            flex:0 0 calc(70% - 1rem);
            &::after {
                display: none;
            }
        }
        @media (width < 768px) {
            flex:0 0 100%;
            order:1;
            &:nth-child(3) {
                order: 3;
            }
            &.skip {
                order: 1;
            }
            padding: 1rem;
        }

        & h2 {
            font-size: 1.8rem;
            line-height: 2.0rem;
            margin-bottom: 1rem;
        }
        & h2.x2 {
            font-size: 2.5rem;
            font-weight: 400;
            line-height: 2.6rem;
            color: hsl(from var(--primary-color) h s 30%);
            margin-bottom: 1rem;
        }
        & p {
            font-family: var(--font-family2);
            font-size: 1.1rem;
            font-weight: 300;
            margin-bottom: 1rem;
        }
        & p.lead {
            font-size: 1.6rem;
            line-height: 1.8rem;
            font-weight: 400;
            margin-bottom: 1rem;
        }
        @media (width < 768px) {
            & p.lead {
                font-size: 1.2rem;
                font-weight: 600;
                line-height: 1.5rem;
            }
        }

        & a {
            margin-top: auto !important;
        }

    }
}


.price {
position: relative;
}

.from {
    display: inline;
    font-size: 0.7rem;
    font-weight: 500;
    color: #fff;
    background-color:#FF5F15;
    padding: 0.2rem 0.3rem;
    border-radius: 5px;
}


.price-list-container {
    margin: 0 auto 4rem;
    & p.category-note {
        font-size: 1.2rem;
        line-height: 1.5rem;
        text-wrap: balance;
        font-weight: 300;
        color: hsl(from var(--primary-color) h s 20%);
        margin-bottom: 2rem;
    }
    & h3 {
        font-weight: 500;
    }
    &>div {
        position: relative;
        margin: 0 0 4rem 0;
        max-width: var(--page-width);
        anchor-name: price-list;
        padding: 0 1rem;
        &::after {
            content: "";
            position: absolute;
            position-anchor: price-list;
            bottom: -2rem;
            left: calc(0 - 1rem);
            display: block;
            width: 50%;
            height: 1px;
            background-color: hsl(from var(--primary-color) h s 30% / 0.1);
        }
        &>div {
            font-size: 1rem;
            font-weight: 300;
            color: hsl(from var(--primary-color) h s 20%);
            margin-bottom: 1rem;
        }
        & .item {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0;
            transition: background-color 0.2s ease-in-out;
            border-radius: 5px;
            padding: 0.15rem .5rem;
            margin:0.2rem -0.5rem;
            &:hover {
                background-color: hsl(from var(--primary-color) h s 55% / 0.1);
            }
            & div>span {
                display: block;
            }
            & .name {
                line-height: 1rem;
                font-weight: 300;
            }
            & .includes {
                color: hsl(from var(--primary-color) h s 10% / 0.5 );
                font-size: 0.9rem;
                font-weight: 300;
            }
            & .note{
                font-weight: 300;
            }
        }
        & li .item-includes {
            font-size: 0.9rem;
            color: hsl(from var(--primary-color) h s 40% / 0.7 );
        }
    }
}




@media (width < 768px) {
    .hidden-mobile {
        display: none;
    }
}



.list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    @media (width <= 600px) {
        grid-template-columns: unset;
        display: flex !important;
        flex-direction: column;
    }
}

.dentalweb-menu {
    background-color: white;
    padding: 2rem 1rem;
    & li.active a {
        font-weight: 500;
        color: var(--primary-color);
        background-color: hsl(from var(--primary-color) h s 95%);
    }
}
.dentalweb {
    padding: 2rem;
    background-color: white;
}

.dentalweb .category {
    & img {
        border-radius: 5px;
    }
    & div.title {
        margin-top: 1rem;
        height: 4rem;
        display: flex;
        align-items: end;
    }
    & div.title h3 {
        margin:  0 0 1rem 0;
    }
    & p {
        font-family: var(--font-family2);
        font-size: 1rem;
        font-weight: 300;
        color: #4a5559;
    }
}

















img.aspect1-1 {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

img.aspect4-3 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    display: block;
}

.columns {
    display: grid; /* use grid for column layout */
    @media (width <= 1200px) {
        display: grid !important;
        grid-template-columns: unset !important; /* auto-fit columns with a minimum width of 300px */
    }
}