/* 6 */
:root {
    --light-grey: #ECECEC;
    --grey: #c5c5c5;
    --dark-grey: #444444;
    --black: #171717;
    --lighter-black: #181817;
    --light-yellow: #FBE8AE;
    --yellow: #F6C90E;
    --dark-yellow: #7A6506;
    --light-red: #F4A6B0;
    --red: #DA0037;
    --dark-red: #6D001C;
    --light-blue: #C2A9FF;
    --blue: #6728FF;
    --dark-blue: #341580;
    --white: #ffffff;
    --content--width: min(1165px, 95%);
    --main--family: Epilogue;
    --font-xs: 14px;
    --font-s: 16px;
    --font-sm: 18px;
    --font-ms: 20px;
    --font-m: 22px;
    --font-l: 40px;
    --font-xl: 55px;
    --content--width: min(1165px, 90vw);
    --header-height: 80px;
    --breadcrubs-height: 48px;
    --scrollbar-width: 10px;
    --scrollbar--margin: 10px;
    --scrollbar-size: calc(var(--scrollbar-width) + var(--scrollbar--margin));
}

@media (max-width:1165px) {}

@media (max-width:991px) {
    :root {
        --content--width: calc(100vw - 90px);
        --font-s: 14px;
        --font-sm: 16px;
        --font-ms: 18px;
        --font-m: 20px;
        --font-l: 39px;
        --font-xl: 45px;
    }
}

@media (max-width:768px) {
    :root {
        --content--width: calc(100vw - 80px);
        --font-ms: 16px;
        --font-m: 18px;
        --font-l: 38px;
        --font-xl: 35px;
    }
}

@media (max-width:480px) {
    :root {
        --content--width: calc(100vw - 60px);
        --font-ms: 15px;
        --font-l: 36px;
        --font-xl: 30px;
        --header-height: 70px;

    }
}

@media (max-width:333px) {
    :root {
        --content--width: calc(100vw - 30px);
    }
}

.border-light-grey {
    border: var(--grey);
}

.purple-color {
    color: var(--blue);
}

.dark-purple-color {
    color: var(--dark-blue);
}

.yellow-color {
    color: var(--yellow);
}

.dark-yellow-color {
    color: var(--dark-yellow)
}

.red-color {
    color: var(--red);
}

.grey-color {
    color: grey;
}

.bg-black {
    background-color: var(--black);
    color: var(--white);
}

.bg-white {
    color: var(--black);
    background-color: var(--white);
}

.bg-yellow {
    color: var(--black);
    background-color: var(--yellow);

}
.bg-light-yellow{
    background: var(--light-yellow);
    color:var(--black);
}
.bg-light-grey {
    background-color: var(--light-grey);
    color: var(--black);
}

.bg-dark-grey {
    background-color: var(--dark-grey);
    color: var(--white);
}

.yellow-border-bottom {
    border-bottom: 1px solid var(--yellow);
}

.grey-border-bottom {
    border: 1px solid grey;
}

.width-100 {
    width: 100%;
}

.centered-text {
    width: 100%;
    text-align: center;
    padding: 0 0 40px;
}

.centered-box {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0 0px;
}

.absolute-left {
    left: 0;
}

.absolute-right {
    right: 0;
}

.absolute-top {
    top: 0;
}

.mobile-block,
.mobile-flex {
    display: none !important;
}
.hovered-light-yellow{
    cursor: pointer;
    transition: 0.3s ease;
}
.hovered-light-yellow:hover{
    background: var(--light-yellow);
    color: var(--black);
}
.hovered-light-grey{
    cursor: pointer;
    transition: 0.3s ease;
}
.hovered-light-grey:hover{
    background: var(--light-grey);
    color: var(--black);
}
@media (max-width:480px) {
    .mobile-block {
        display: block !important;
    }

    .mobile-flex {
        display: flex !important;
    }

    .mobile-hide {
        display: none !important;
    }
}

.flex-from-620 {
    display: flex !important;
}

.flex-til-620 {
    display: none !important;
}
.flex-from-991 {
    display: flex !important;
}
.flex-til-991 {
    display: none !important;
}
@media (max-width:620px) {
    .flex-from-991 {
        display: none !important;
    }
    .flex-til-991 {
        display: flex !important;
    }
    .flex-from-620 {
        display: none !important;
    }

    .flex-til-620 {
        display: flex !important;
    }
}
.flex-2 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    margin-top: 40px;
}

.flex-2 img {
    width: 100%;
}

.flex-2 .left,
.flex-2 .right {
    width: max(500px, calc(50% - 10px));

}

@media (max-width:768px) {
    .flex-2 {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-items: center;
    }

    .flex-2 .left,
    .flex-2 .right {
        width: (var(--content--width) / 2);
    }

}

/* end flex for 2 items */
/* grid for 3 items */
.flex-wrap-center {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, min(360px, 25%));
    gap: 20px;
    grid-row: max-content;
    justify-content: center;
}
@media (max-width:1165px) {
    .grid-4 {
        grid-template-columns: repeat(3, min(360px, 33%));
    }
}
@media (max-width:991px) {
    .grid-4 {
        grid-template-columns: repeat(2, min(360px, 50%));

    }
}
@media (max-width:768px) {
    .grid-4 {
        grid-template-columns: 1fr;
        justify-items: center;

    }
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    grid-row: max-content;
    justify-items: center;
}

.grid-3-span-line {
    grid-column: 1 / span 3;
}

.subgrid-3 {
    flex-direction: column;
    display: flex;
    gap: 25px;
}


@media (max-width:1165px) {

    .grid-3,
    .subgrid-3 {
        gap: 15px;
    }

    .subgrid-3 {
        gap: 15px;

    }
}

@media (max-width:991px) {
    .grid-3 {
        grid-template-columns: 1fr 1fr;

    }
    .grid-3 .card-item:nth-of-type(2) {
        grid-row: 1 / span 2;
        grid-column:2;

    }

    .grid-3-span-line {
        grid-column: 1 / span 2;
    }

    .subgrid-3 {
        grid-area: auto;

    }

    .subgrid-3:nth-child(3) {
        grid-column: 1 / span 2;
        display: grid;
        grid-template-rows: 1fr 1fr;
    }

    .subgrid-3:nth-child(3)>label:nth-child(3),
    .subgrid-3:nth-child(3)>div:nth-child(3) {
        grid-area: 1 / 2 / 3 / 2;
    }
}
@media (max-width:991px) {
    .grid-3 .card-item:nth-of-type(2) {
        grid-row:auto;
        grid-column:auto;

    }
    .grid-3-span-line {
        grid-column: auto;
    }
}
@media (max-width:768px) {
    .grid-3 {
        grid-template-columns: 1fr;
        justify-content: center;

    }
    .subgrid-3 {
        grid-area: auto;
    }

    .subgrid-3:nth-child(3) {
        grid-column: 1;

    }

    .subgrid-3:last-child>label:nth-child(3),
    .subgrid-3:last-child>div:nth-child(3) {
        grid-area: auto;
    }

    .grid-3:has(.subgrid-3.--content:not(.--open)) {
        gap: 0;
    }

}
.content-centered{
    display:flex;
    justify-content: center;
    align-items: center;
}
.flex-space-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.flex-gap-15{
    display:flex;
    align-items: center;
    gap:15px;
}