body {
    font-family: 'Ubuntu', sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

header {
    height: 3.75rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #DADADA;
    position: relative;
}

.logo {
    flex-shrink: 0;
    margin: 0rem -0.3rem -0.15rem -0.3rem; /* опускает лого до нужного уровня и двигает влево вправо */
}

.logo img {
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 2.375rem;
    background: white url('img/me.webp') 50% / cover no-repeat;
}

.vertical-line {
    width: 1px;
    height: 3.75rem;
    background-color: #DADADA;
}

nav {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Растягиваем на всю доступную ширину */
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.04375rem;
}

nav a:hover {
    color: #E11E42;
    transform: translateY(-2px); /* Поднимаем текст вверх при наведении */    
}

ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

li {
    display: flex;
    align-items: center;
    margin: 0 0.5rem 0 0.5rem;
    padding: 0;
}

a {
    text-decoration: none;
    color: #828282;
    margin: 0 0.9375rem;
}

.horizontal-line {
    border-top: 1px solid #DADADA;
    width: 100%;
    position: absolute;
    bottom: 0;
}

@media (min-width: 360px) and (max-width: 600px) {
    li {
        flex-grow: 1;
        font-size: 0.8rem;
        margin: 0;
    } 
}

@media (max-width: 361px) {
    li:last-child .vertical-line {
        display: none;
    }

    li {
        flex-grow: 1;
        font-size: 0.8rem;
        margin: 0;
    }

    a {
        flex-grow: 1;
    }

    .logo img {
        width: 2rem;
        height: 2rem;
        margin: -0.15rem -0.1rem -0.15rem -0.1rem;
    }

    header {
        height: 3rem;
    }

    .vertical-line {
        height: 3.1rem;
    }
}

  /* Стили для footer */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Значение может быть любым, главное, чтобы оно было больше, чем у других элементов */
    text-align: left;
    border-top: 1px solid #DADADA; /* Horizontal line */ 
    background-color: #fff;
}

.social-icons {
    display: flex;
}

.social-icons a {
    display: flex;
    margin: 1rem 1rem 1rem 1.3rem;  
    text-align: center;
    text-decoration: none;
    color: #828282;
    transition: color 0.3s; /* Плавное изменение цвета при наведении */
    align-items: center;
}

.social-icons a:hover {
    color: #E11E42; /* Изменение цвета текста при наведении */
    transform: translateY(-2px); /* Поднимаем текст вверх при наведении */
    cursor: pointer;
}

.social-icons span {
    display: block;
    margin-left: 0.5rem; /* Расстояние между иконкой и текстом */
    font-weight: 300;
    font-size: 0.875rem;
}

@media (min-width: 855px) and (max-width: 875px) {
    .social-icons img {
        width: 1.6rem;
        height: 1.6rem;
    }
}

@media (min-width: 778px) and (max-width: 854px) {
    .icon-label span {
        font-size: 0.75rem;       
    }
    .social-icons img {
        width: 1.6rem;
        height: 1.6rem;
    }
}

@media (max-width: 777px) {
    .icon-label span {
        display: none; /* Скрываем подписи */
    }
    .social-icons img {
        margin: -0.4rem -0.3rem -0.5rem -0.3rem;
    }
    .social-icons a {
        margin: 1rem 0.9rem 1rem 1.3rem;  
    }
    .social-contacts span {
        font-size: 1rem;
    }
}



/*_________________________________________________________________*/



.image img {
    width: 15rem;
    height: 15rem;
    border-radius: 10rem;
    z-index: 1;
}

.main-content {
    
    margin-top: -4rem;
    display: flex;
    flex-direction: row;
    align-items: center; /* Центрирование по горизонтали */
    justify-content: center;
    height: 100vh;
}

h1 {
    font-size: 5.5rem;
    font-weight: bold;
    color: #000000;
    margin: 0 0;
}

.main-heading-2 {
    font-size: 3.75rem;
    font-weight: bold;
    color: #828282;
    margin: -0.5rem 0 2rem 0;
}

.hello {
    font-size: 1.875rem;
    font-weight: 500;
    color: #828282;
    margin: 0 0 -0.2rem 0;
}

.colortext {
    color: #E11E42;
}

p {
    font-size: 1.125rem;
    line-height: 1.81rem;
    font-weight: 400;
    color: #3C3C3C;
    
}

.text-block p {
    max-width: 26rem;
}

.text-block-case p {
    max-width: 680px;
    margin-top: 4rem;
    margin-bottom: 3rem;   
}

.text-block-case {
    text-align: center;
    max-width: 680px; 
    margin-bottom: 2em;
}

.text-block a {
    font-weight: bold;
    color: #E11E42;
    margin: 0;
    text-decoration: none;
    position: relative;
}

.text-block-case a {
    font-weight: bold;
    color: #E11E42;
    margin: 0;
    text-decoration: none;
    position: relative;
}

.text-block a:hover {
    text-decoration: underline;
    transition: text-decoration 1s ease-in-out; /* Не работает */
}

.text-block-case a:hover {
    text-decoration: underline;
    transition: text-decoration 1s ease-in-out; /* Не работает */
}

.text-block {
    margin-left: 3rem;
}

@media (max-width: 1100px) {

    h1 {
        font-size: 4.5rem;
    }

    .main-heading-2 {
        font-size: 2.75rem;
        margin: 0 0 2rem 0;
    }

    .hello {
        font-size: 1.5rem;
    }
}

@media (max-width: 900px) {

    .main-content {
        flex-direction: column; /* Компоненты текста выстраиваются в колонку */
        margin-top: -5rem;
    }

    .text-block {
        margin-top: 2rem;
    }

    .image img {
        width: 12rem;
        height: 12rem;
    }

    .work-block {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}

@media (max-width: 700px) {

    h1 {
        font-size: 2.5rem;
    }

    .main-heading-2 {
        font-size: 1.75rem;
        margin: 0.2rem 0 2rem 0;
    }

    .hello {
        font-size: 1.1rem;
    }

    .text-block {
        margin: 2rem 1rem 0 2rem;
    }

    .image img {
        width: 11rem;
        height: 11rem;
        margin-top: -2rem;
    }
}

/*____________________________about me____________________________*/

.container-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
}
.work-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    max-width: 680px;
    margin-top: 4rem;
    margin-bottom: 3rem;
}

h3 {
    font-size: 3.75rem;
    font-weight: bold;
    color: #828282;
    
    margin: 6rem 0 2rem 0;
    line-height: 3.125rem;
}

h2 {
    font-size: 1.875rem;
    font-weight: bold;
    color: #3C3C3C;
}

.thanx {
    display: flex;
    font-size: 1.875rem;
    font-weight: 500;
    color: #3C3C3C;
    text-align: center;
    justify-content: center;
    margin-top: 5rem;
}

.like {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    margin-bottom: 5rem;
    min-width: 80px;
}

.custom-checkbox {
    position: relative;
    display: inline-block;
}

.custom-checkbox input {
    display: none;
}

.custom-checkbox label {
    position: absolute;
    top: 0;
    left: 0;
    width: 76px; /* Ширина изображения */
    height: 78px; /* Высота изображения */
    margin-left: -50px;
    background: url('../img/like.svg') no-repeat; /* Путь к вашей картинке */
    background-size: cover; /* Растягивает изображение на всю площадь label */
    cursor: pointer;
}

.custom-checkbox input:checked + label {
    background: url('../img/like-active.svg') no-repeat;
}

.work-block h2 {
    margin-top: 3rem;
}

h5 {
    font-size: 1rem;
    font-weight: 400;
    color: #828282;
    margin-top: -1rem;
}

.company {
    font-size: 1.5rem;
    font-weight: 400;
    color: #828282;
}

.devider {
    margin: 0 20px; /* Расстояние между разделителем и текстом */
    font-weight: 400;
    font-size: 1.6rem;
    color: #828282; /* Цвет разделителя */
}

.custom-list {
    list-style-type: none; /* Скрываем стандартные маркеры списка */
    padding-left: 30px; /* Добавляем отступ слева для кружков */
    flex-direction: column;
    margin-bottom: 1.25rem;
    margin-top: 1rem;
}
  
.custom-list li {
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.4rem;
    color: #3C3C3C;
    position: relative; /* Устанавливаем позицию для маркера */
    margin-bottom: 0.9rem; /* Расстояние между элементами списка */
    padding-left: 0.5rem;
}
  
.custom-list li::before {
    content: "●"; /* Устанавливаем маркер в виде кружка (●) */
    color: #bfd3df; /* Задаем цвет голубых кружков */
    font-size: 1.2em; /* Размер шрифта маркера */
    position: absolute; /* Позиционируем маркер абсолютно внутри li */
    left: -1.5rem; /* Сдвигаем маркер влево на отступ li */
    top: -0.05rem; /* Вертикальное позиционирование маркера */
}

.custom-block {
    text-align: center;
    margin: 0 0 12rem 0;
}
  
h6 {
    font-size: 1.25rem;
    color: #3C3C3C;
    margin-bottom: 2rem;
}

h7 {
    font-size: 1.25rem;
    color: #3C3C3C;
    margin-bottom: 2rem;

}
  
.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.button {
    width: 3.75rem;
    height: 3.75rem;
    background-color: #E11E42;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 1 0.5rem;
    cursor: pointer;
}

.button:hover {
    background-color: #403E3E;
}

@media (max-width: 700px) {

    h3 {
        font-size: 2.5rem;
        line-height: 2.4rem;
        margin: 4rem 0 0rem 0;
    }
    
    h2 {
        font-size: 1.575rem;  
    }

    .company {
        font-size: 1.1rem;
    }

    .devider {
        margin: 0 10px; /* Расстояние между разделителем и текстом */
        font-weight: 400;
        font-size: 1.2rem;
        color: #828282; /* Цвет разделителя */
    }

    h5 {
        margin-top: -0.8rem;
    }

    .container-inner {
        margin-top: 3.2rem;
    }
    .work-block {
        margin-top: 3rem;
    }

    p {
        margin-top: 0rem;
        margin-bottom: 0.4rem;
    }

    .edu {
        margin-bottom: 3rem;
    }
}

.contacts-block {
    align-self: center;
    margin-bottom: 3rem;
}

.social-block img {
    width: 2.5rem;
    height: 2.5rem;
}

.social-block a {
    display: flex;
    margin: 1rem 1rem 1rem 1.3rem;  
    text-align: center;
    text-decoration: none;
    
    color: #3C3C3C;
    transition: color 0.3s; /* Плавное изменение цвета при наведении */
    align-items: center; /* Выравнивание по центру вертикально */
}

.social-block a:hover {
    color: #E11E42; /* Изменение цвета текста при наведении */
    transform: translateY(-2px); /* Поднимаем текст вверх при наведении */
}

.social-block span {
    display: block;
    margin-left: 0.9rem; /* Расстояние между иконкой и текстом */
    font-weight: 400;
    font-size: 1.2rem;
}



/*____________________Portfolio________________*/



.container-portfolio {
    width: 100%;
    max-width: 1296px;
    margin-top: 5rem;
    margin-bottom: 9rem;
}

.preschool-block {
    display: flex;
    background: linear-gradient(25deg, #143E4F, #1D5268, #2F7995);
    min-height: 580px;
    border-radius: 10px;
    margin-bottom: 2.5rem;
}

.case-block {

    display: flex;
    background: linear-gradient(25deg, #143E4F, #1D5268, #2F7995);
    /* min-height: 580px; */
    max-height: 200px;
    max-width: 1100px;
    border-radius: 10px;
    /* margin-top: 5rem; */
    /* margin-bottom: 2.5rem; */
}

.case-block-2 {

    display: flex;
    background: linear-gradient(25deg, #143E4F, #1D5268, #2F7995);
    /* min-height: 580px; */
    /* max-height: 200px; */
    max-width: 1100px;
    border-radius: 10px;
    /* margin-bottom: 2.5rem; */
}

.translator-block {
    display: flex;
    background-color: #F4F9FC;
    min-height: 580px;
    border-radius: 10px;
    margin-bottom: 2.5rem;
}

.kids-block {
    display: flex;
    background-color: #EDF2FF;
    min-height: 580px;
    border-radius: 10px;
    margin-bottom: 2.5rem;
}

.coffee-block {
    display: flex;
    background-color: #BAD4E5;
    min-height: 580px;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    background-image: url("../img/img_coffee_black.svg"), url("../img/img_coffee_white.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}

.factory-block {
    display: flex;
    background-color: #EDF2FF;
    min-height: 580px;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    background-image: url("../img/img_bg_factory_x05.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.marketplace-block {
    display: flex;
    background-color: #09232E;
    min-height: 730px;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    background-image: url("../img/img_bg_marketplace_x15.webp");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 90%;
}

.picker-block {
    display: flex;
    background-color: #F2F2F2;
    min-height: 580px;
    border-radius: 10px;
    margin-bottom: 2.5rem;
}

.two-col-block {
    display: flex;
    flex-direction: row;
}

.clinic-block {
    background-color: #e6e6e7;
    min-height: 900px;
    width: 50%;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    margin-right: 1.25rem;
    background-image: url("../img/img_bg_clinic_x1.webp");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

.profil-block {
    background-color: #f1f1ef;
    min-height: 670px;
    width: 50%;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    margin-right: 1.25rem;
    background-image: url("../img/img_bg_profil_x1_2.webp");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
}

.print-block {
    background-color: #1B1B1B;
    min-height: 650px;
    width: 50%;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    margin-left: 1.25rem;
    background-image: url("../img/img_bg_print.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto;
}

.nano-block {
    background-color: #02001B;
    min-height: 900px;
    width: 50%;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    margin-left: 1.25rem;
    background-image: url("../img/img_bg_nano_x1.webp");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

.case-content {
    width: 40%;
}

.case-img {
    width: 60%;
    display: flex;
    align-items: center;
    background-image: url("../img/img_translator_bckg.svg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain; 
}

.case-img-kids {
    width: 60%;
    display: flex;
    align-items: center;
}

.irzar-case-img-1 {
    /* width: 60%; */
    display: flex;
    align-items: center;
}

.irzar-case-img-2 {
    /* width: 60%; */
    display: flex;
    align-items: center;
}

.case-img-coffee {
    position: relative;
    width: 60%;
    display: flex;
    align-items: center;
}

.case-img-factory {
    width: 60%;
    display: flex;
    align-items: center;
}

.case-img-picker {
    width: 60%;
    display: flex;
    align-items: center;
}

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

.case-img-kids img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.irzar-case-img-1 img {
    width: 100%;
    max-height: 700px;
    max-width: 100%;
    /* max-height: 100%; */
}

.irzar-case-img-2 img {
    width: 100%;
    max-height: 700px;
    max-width: 100%;
    /* max-height: 100%; */
}

.case-img-coffee img {
    width: 80%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.case-img-factory img {
    width: 90%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.case-img-picker img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.case-content {
    margin-left: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.marketplace-case-content {
    margin-left: 5rem;
    margin-right: 5rem;
    display: flex;
    flex-direction: column;
}

.clinic-content {
    margin-left: 5rem;
    margin-right: 5rem;
    display: flex;
    flex-direction: column;
}

.nano-content {
    margin-left: 5rem;
    margin-right: 5rem;
    display: flex;
    flex-direction: column;
}

.chips-container {
    display: flex;
    flex-direction: row;
    margin-top: 4rem;
}

.marketplace-chips-container {
    display: flex;
    flex-direction: row;
    margin-top: 4rem;
}

.chip {
    background-color: #DBE8F0;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
    margin-right: 0.9rem;
}

.chip-kids {
    background-color: #D9E0F3;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
    margin-right: 0.9rem;
}

.chip-factory {
    background-color: #9EADBC;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
    margin-right: 0.9rem;
}

.chip-coffee {
    background-color: #A2C4DA;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
    margin-right: 0.9rem;
}

.chip-picker {
    background-color: #E4E4E4;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
    margin-right: 0.9rem;
}

.chip-clinic {
    background-color: #F0F1F2;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
    margin-right: 0.9rem;
    margin-bottom: 3rem;
}

.chip-profil {
    background-color: #d8d8d5;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
    margin-right: 0.9rem;
    margin-bottom: 3rem;
}

.chip-marketplace {
    background-color: #9EADBC;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #3C3C3C;
    margin-right: 0.9rem;
}

.chip-nano {
    background-color: #1C1851;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #FFFFFF;
    margin-right: 0.9rem;
    margin-bottom: 3rem;
}

.chip-print {
    background-color: #302F36;
    border-radius: 1.4rem;
    height: 1.8125rem;
    padding: 0.5rem 1rem 0rem 1rem;
    font-size: 0.9375rem;
    color: #FFFFFF;
    margin-right: 0.9rem;
    margin-bottom: 3rem;
}

.translator-title {
    font-size: 3.25rem;
    font-weight: bold;
    line-height: 3.2rem;
    color: #1F2328;
    margin: 0 0 1rem 0; 
}

.picker-title {
    font-size: 3.25rem;
    font-weight: bold;
    line-height: 3.2rem;
    color: #1F2328;
    margin: 0 0 1rem 0; 
}

.clinic-title {
    font-size: 3.25rem;
    font-weight: bold;
    line-height: 3.2rem;
    color: #1F2328;
    margin: 0 0 1rem 0; 
}

.nano-title {
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 3.2rem;
    color: #ffffff;
    margin: 0 0 1rem 0; 
}

.marketplace-title {
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 3.2rem;
    color: #ffffff;
    margin: 2rem 0 1rem 0; 
}

.translator-text {
    max-width: 373px;
    font-size: 1.125rem;
    line-height: 1.94rem;
    color: #3C3C3C;
}

.picker-text {
    max-width: 434px;
    font-size: 1.125rem;
    line-height: 1.94rem;
    color: #3C3C3C;
}

.nano-text p {
    color: #ffffff;
    font-weight: 300;
}

.marketplace-text p {
    color: #ffffff;
    font-weight: 300;
    max-width: 970px;
}

.nano-text {
    max-width: 434px;
    font-size: 1.125rem;
    line-height: 1.94rem;
    color: #ffffff;
}

.marketplace-text {
    font-size: 1.125rem;
    line-height: 1.94rem;
    color: #ffffff;
}

.case-link {
    color: #349DF9;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    margin-left: 0;
}

.marketplace-case-link {
    color: #349DF9;
    font-size: 1.125rem;
    display: flex;
    margin-left: 0;
}

.case-link:hover {
    text-decoration: underline;
    transition: text-decoration 1s ease-in-out; /* Не работает */
}

.marketplace-case-link:hover {
    text-decoration: underline;
    transition: text-decoration 1s ease-in-out; /* Не работает */
}

.in-progress {
    color: #828282;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    margin-left: 0;
}

.case-links {
    margin-bottom: 5rem;
    display: flex;
}

.marketplace-case-links {
    margin-bottom: 5rem;
    display: flex;
}

.profil-case-links {
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.case-links-coffee {
    margin-bottom: 8rem;
    display: flex;
}

.clinic-case-links {
    margin-top: 1.5rem;
}

.case-link img {
    margin-left: 0.5rem;
    padding-right: 2.5rem;
    margin-top: 0.15rem;
}

.marketplace-case-link img {
    margin-left: 0.5rem;
    padding-right: 2.5rem;
    margin-top: 0.15rem;
}

@media (max-width: 1366px) {
    .preschool-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .case-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }
    .case-block-2 {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .translator-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .kids-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .coffee-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .factory-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .marketplace-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .picker-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    .two-col-block {
        margin-left: 3rem;
        margin-right: 3rem;
    }
} 

@media (max-width: 1280px) {
    .preschool-block {
        min-height: 480px;
    }

    /* .case-block {
        /* min-height: 480px; */
    /* } */ 
    
    .translator-block {
        min-height: 480px;
    }

    .kids-block {
        min-height: 480px;
    }

    .coffee-block {
        min-height: 480px;
    }

    .factory-block {
        min-height: 480px;
    }

    .marketplace-block {
        min-height: 730px;
    }

    .picker-block {
        min-height: 480px;
    }

    .clinic-block {
        min-height: 900px;
    }

    .profil-block {
        min-height: 670px;
    }

    .nano-block {
        min-height: 900px;
    }

    .print-block {
        min-height: 670px;
    }

    .case-links {
        margin-bottom: 4rem;
    }

    .marketplace-case-links {
        margin-bottom: 4rem;
    }

    .profil-case-links {
        margin-bottom: 4rem;
    }

    .case-links-coffee {
        margin-bottom: 6rem;
    }

    .case-link {
        font-size: 1rem;
    }

    .marketplace-case-link {
        font-size: 1rem;
    }

    .in-progress {
        font-size: 1rem;
    }

    .case-link img {
        padding-right: 1.5rem;
    }

    .marketplace-case-link img {
        padding-right: 1.5rem;
    }

    .case-content {
        width: 45%;
    }
    
    .case-img {
        width: 55%;
    }

    .case-img-kids {
        width: 55%;
    }

    .case-img-coffee {
        width: 55%;
    }

    .case-img-factory {
        width: 55%;
    }

    .case-img-picker {
        width: 55%;
    }

    .marketplace-title {
        margin-top: 2rem;
    }
}

@media (min-width: 981px) and (max-width: 1200px) {
    .picker-title {
        margin-top: 3rem;
    }
}

@media (min-width: 1100px) and (max-width: 1230px) {
    .marketplace-block {
        min-height: 790px;
    }
}

@media (max-width: 1100px) {
    .preschool-title {
        font-size: 2.9rem;
        line-height: 3rem;
    }

    .translator-title {
        font-size: 2.9rem;
        line-height: 3rem;
    }

    .picker-title {
        font-size: 2.9rem;
        line-height: 3rem;
    }

    .clinic-title {
        font-size: 2.9rem;
        line-height: 3rem;
    }

    .nano-title {
        font-size: 2.9rem;
        line-height: 3rem;
    }

    .marketplace-title {
        font-size: 2.9rem;
        line-height: 3rem;
    }

    .translator-text p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    .picker-text p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    .nano-text p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    .marketplace-text p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    .case-content {
        margin-left: 3rem;
    }

    .marketplace-case-content {
        margin-left: 3rem;
    }

    .clinic-content {
        margin-left: 3rem;
        margin-right: 3rem;
    }
}

@media (min-width: 981px) and (max-width: 1024px) {
    .case-content {
        width: 40%;
    }

    .case-img {
        width: 60%;
        margin-left: 1rem;
    }

    .case-img-kids {
        width: 60%;
        margin-left: 1rem;
    }

    .case-img-coffee {
        width: 60%;
        margin-left: 1rem;
    }

    .case-img-factory {
        width: 60%;
        margin-left: 1rem;
    }

    .case-img-picker {
        width: 60%;
        margin-left: 1rem;
    }
}

@media (max-width: 980px) {
    .preschool-block {
        flex-direction: column;
    }

    .case-block {
        flex-direction: column;
    }

    .translator-block {
        flex-direction: column;
    }

    .kids-block {
        flex-direction: column;
    }

    .coffee-block {
        flex-direction: column;
    }

    .factory-block {
        flex-direction: column;
    }

    .marketplace-block {
        flex-direction: column;
        min-height: 650px;
    }

    .picker-block {
        flex-direction: column;
    }

    .two-col-block {
        flex-direction: column;
    }
    .clinic-block {
        flex-direction: column;
    }

    .profil-block {
        flex-direction: column;
    }

    .preschool-text {
        max-width: none;
        margin-left: 5rem;
        margin-right: 5rem;
    }

    .translator-text {
        max-width: none;
        margin-left: 5rem;
        margin-right: 5rem;
    }

    .picker-text {
        max-width: none;
        margin-left: 5rem;
        margin-right: 5rem;
    }

    .nano-text {
        max-width: none;
        margin-left: 5rem;
        margin-right: 5rem;
    }

    .marketplace-text {
        max-width: none;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .preschool-title {
        font-size: 2.5rem;
    }

    .translator-title {
        font-size: 2.5rem;
    }

    .picker-title {
        font-size: 2.5rem;
    }

    .clinic-title {
        font-size: 2.5rem;
    }

    .nano-title {
        font-size: 2.5rem;
    }
    
    .marketplace-title {
        font-size: 2.5rem;
        margin-top: 0.4rem;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .case-content {
        width: 100%;
        align-items: center;
        margin-left: 0;
        text-align: center;   
    }

    .marketplace-case-content {
        width: 100%;
        align-items: left;
        margin-left: 0;
        text-align: left;   
    }

    .clinic-content {
        width: 100%;
        align-items: center;
        margin-left: 0;
        text-align: center;   
    }
    
    .case-img {
        width: 100%;
        justify-content: right;
        background-position: right bottom;
    }

    .case-img-kids {
        width: 100%;
        justify-content: center;
        background-position: right bottom;
    }

    .case-img-coffee {
        width: 100%;
        justify-content: center;
        background-position: right bottom;
    }

    .case-img-factory {
        width: 100%;
        justify-content: center;
        background-position: right bottom;
    }

    .case-img-picker {
        width: 100%;
        justify-content: center;
        background-position: right bottom;
    }

    .case-img img {
        width: 90%;
        margin-bottom: 2rem;
    }

    .case-img-kids img {
        width: 90%;
        margin-bottom: 2rem;
    }

    .case-img-coffee img {
        width: 60%;
        margin-bottom: 2rem;
    }

    .case-img-factory img {
        width: 90%;
        margin-bottom: 2rem;
    }

    .case-img-picker img {
        width: 70%;
        margin-bottom: 2rem;
    }

    .chips-container {
        margin-top: 3rem;
        margin-bottom: 2rem;
    }

    .marketplace-chips-container {
        margin-top: 3rem;
        margin-bottom: 2rem;
        margin-left: 1rem;
    }

    .chip {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    .chip-kids {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    .chip-factory {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    .chip-coffee {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    .chip-picker {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    .chip-clinic {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        margin-bottom: 0rem;
    }

    .chip-profil {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        margin-bottom: 0rem;
    }

    .chip-marketplace {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    .chip-nano {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        margin-bottom: 0rem;
    }

    .chip-print {
        border-radius: 1.4rem;
        height: 1.3125rem;
        padding: 0.4rem 0.9rem 0.1rem 0.9rem;
        font-size: 0.8rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        margin-bottom: 0rem;
    }

    .case-links {
        margin-top: 0.9rem;
        margin-bottom: 0.9rem;
    }

    .marketplace-case-links {
        margin-top: 0.9rem;
        margin-bottom: 0.9rem;
        margin-left: 1.5rem;
    }

    .profil-case-links {
        margin-top: 0.9rem;
        margin-bottom: 0.9rem;
        align-items: center;
        flex-direction: row;
    }

    .case-links-coffee {
        margin-top: 0.9rem;
        margin-bottom: 0.9rem;
    }

    .case-link {
        margin-left: 2rem;
    }

    .marketplace-case-link {
        margin-left: 0rem;
    }

    .case-link img {
        padding-right: 0;
    }

    .marketplace-case-link img {
        padding-right: 0;
    }

    .clinic-block {
        width: 100%;
        background-size: cover;
    }

    .profil-block {
        width: 100%;
        background-size: contain;
    }

    .nano-block {
        width: 100%;
        background-size: contain;
        margin-left: 0;
    }

    .print-block {
        width: 100%;
        background-size: contain;
        margin-left: 0;
    }

    .thanx {
        font-size: 1.375rem;
        margin: 3rem 2rem 0 2rem;
    }
}

@media (min-width: 681px) and (max-width: 980px) {
    .case-img {
        background-image: url("../img/img_translator_bckg_rev.svg");
    }
}

@media (max-width: 680px) {
    .translator-block {
        flex-direction: column-reverse;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .preschool-block {
        flex-direction: column-reverse;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .kids-block {
        flex-direction: column-reverse;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .coffee-block {
        flex-direction: column-reverse;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .factory-block {
        flex-direction: column-reverse;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .marketplace-block {
        margin-left: 1rem;
        margin-right: 1rem;
        min-height: 800px;
        background-size: 100%;
    }

    .picker-block {
        flex-direction: column-reverse;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .two-col-block {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .clinic-block {
        background-size: contain;
        min-height: 700px;
    }

    .profil-block {
        background-size: contain;
        min-height: 520px;
    }

    .nano-block {
        background-size: contain;
        min-height: 700px;
    }

    .print-block {
        background-size: contain;
        min-height: 520px;
    }

    .container-portfolio {
        margin-top: 4rem;
    }

    .preschool-title {
        font-size: 2.1rem;
        line-height: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .translator-title {
        font-size: 2.1rem;
        line-height: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .picker-title {
        font-size: 2.1rem;
        line-height: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .clinic-title {
        font-size: 2.1rem;
        line-height: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .nano-title {
        font-size: 2.1rem;
        line-height: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .marketplace-title {
        font-size: 2rem;
        line-height: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .translator-text {
        margin-left: 0.8rem;
        margin-right: 0.8rem;
    }

    .picker-text {
        margin-left: 0.8rem;
        margin-right: 0.8rem;
    }

    .case-links {
        display: flex;
        align-items: center;
        margin-left: 0;
        gap: 2rem;
    }

    .marketplace-case-links {
        align-items: left;
        margin-left: 1.5rem;
    }

    .profil-case-links {
        display: flex;

        align-items: center;
        margin-left: 0;
        gap: 2rem;
    }

    .case-links-coffee {
        display: flex;
        align-items: center;
        margin-left: 0;
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .case-link {
        margin-bottom: 1.3rem;
        margin-left: 0;
        margin-right: 0;
    }

    .marketplace-case-link {
        margin-bottom: 1.3rem;
        margin-left: 0;
        margin-right: 0;
    }

    .in-progress {
        margin-bottom: 1.3rem;
    }

    .chips-container {
        margin-top: 0rem;
        margin-bottom: 1.5rem;
    }

    .marketplace-chips-container {
        margin-top: 0rem;
        margin-bottom: 1.5rem;
    }

    .chip-profil {
        margin-top: 2rem;
    }

    .chip-marketplace {
        margin-top: 2rem;
    }

    .chip-print {
        margin-top: 2rem;
    }

    .chip-nano {
        margin-top: 2rem;
    }

    .chip-clinic {
        margin-top: 2rem;
    }

    .translator-text p {
        font-size: 1.025rem;
        line-height: 1.7rem;
    }

    .picker-text p {
        font-size: 1.025rem;
        line-height: 1.7rem;
    }

    .nano-text p {
        font-size: 1.025rem;
        line-height: 1.7rem;
    }

    .marketplace-text p {
        font-size: 1.025rem;
        line-height: 1.7rem;
    }

    .case-img {
        background-position: right top;
    }

    .case-img img {
        width: 98%;
        margin-left: 2rem;
        margin-top: 1rem;
    }

    .case-img-kids img {
        width: 100%;
        margin-left: 0;
        margin-top: 1rem;
    }

    .case-img-coffee img {
        width: 80%;
        margin-left: 0;
        margin-top: 1rem;
    }

    .case-img-factory img {
        width: 80%;
        margin-top: 1rem;
    }

    .case-img-picker img {
        width: 80%;
        margin-left: 0;
        margin-top: 1rem;
    }

    .like {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

@media (max-width: 560px) {
    .nano-block {
        min-height: 600px;
    }

    .print-block {
        min-height: 600px;
    }
}