.typical_solution {
    padding: 0 30px 40px;
}
.typical_solution_wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    min-height: 450px;
    padding: 40px;
    background-color: #FFFFFF;
    background-image: url(/img/typical_solution/typical_solution.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0px 4px 12px rgba(144, 144, 144, 0.08);
    border-radius: 14px;
}
@media(max-width: 1600px) {
    .typical_solution_wrapper {
        background-image: url(/img/typical_solution/typical_solution_desk.webp);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}
@media(max-width: 1024px) {
    .typical_solution_wrapper {
        background-image: url(/img/typical_solution/typical_solution_tablet.webp);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}
@media(max-width: 600px) {
    .typical_solution_wrapper {
        background-image: url(/img/typical_solution/typical_solution_mob.webp);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}
.typical_solution_wrapper_info {
    max-width: 670px;
    width: 100%;
}
.typical_solution_title {
    margin: 0 0 30px !important;
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    color: #005D28;
}
.typical_solution_examples_title,
.typical_solution_projects_title {
    color: #1D1D1D;
}
.typical_solution_text {
    max-width: 600px !important;
    width: 100%;
    margin: 0 0 30px !important;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #1D1D1D;
}
.typical_solution_btn {
    min-width: 280px;
}



@media(max-width: 1600px) {
    .typical_solution_text {
        font-size: 14px;
        line-height: 18px;
    }
}
@media(max-width: 1024px) {
    .typical_solution_title {
        font-size: 28px;
        line-height: 30px;
    }
    .typical_solution_wrapper {
        padding: 30px;
        align-items: start;
    }
}
@media(max-width: 767px) {
    .typical_solution {
        padding: 0 15px 30px;
    }
    .typical_solution_wrapper {
        padding: 20px;
    }
    .typical_solution_title {
        margin: 0 0 20px !important;
        font-size: 22px;
        line-height: 24px;
    }
    .typical_solution_btn {
        max-width: 450px;
        width: 100%;
    }
}




.typical_solution_examples {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, 1fr);
}
.typical_solution_examples_item {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    min-height: 277px;
    border-radius: 14px;
    overflow: hidden;
    padding: 10px;
}
.typical_solution_examples_item_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.typical_solution_examples_item_nav {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
}
.typical_solution_examples_item_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 30px;

    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #1D1D1D;
    transition: .3s;
}
.typical_solution_examples_item_decor {
    min-width: 60px;
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='60' width='60' height='60' rx='30' transform='rotate(90 60 0)' fill='white'/%3e%3cpath d='M30.891 37.1409L37.1436 30.8883C37.2574 30.7694 37.3467 30.6291 37.4062 30.4756C37.5313 30.1712 37.5313 29.8297 37.4062 29.5252C37.3467 29.3717 37.2574 29.2315 37.1436 29.1126L30.891 22.86C30.7744 22.7434 30.636 22.6509 30.4836 22.5878C30.3313 22.5247 30.168 22.4922 30.0031 22.4922C29.6701 22.4922 29.3507 22.6245 29.1152 22.86C28.8798 23.0954 28.7475 23.4148 28.7475 23.7478C28.7475 24.0808 28.8798 24.4002 29.1152 24.6357L33.242 28.7499H23.7505C23.4189 28.7499 23.1008 28.8817 22.8663 29.1162C22.6318 29.3507 22.5 29.6688 22.5 30.0004C22.5 30.3321 22.6318 30.6502 22.8663 30.8847C23.1008 31.1192 23.4189 31.2509 23.7505 31.2509H33.242L29.1152 35.3652C28.998 35.4814 28.905 35.6197 28.8415 35.7721C28.778 35.9245 28.7453 36.0879 28.7453 36.253C28.7453 36.4181 28.778 36.5816 28.8415 36.7339C28.905 36.8863 28.998 37.0246 29.1152 37.1409C29.2315 37.2581 29.3698 37.3511 29.5222 37.4146C29.6746 37.4781 29.838 37.5108 30.0031 37.5108C30.1682 37.5108 30.3317 37.4781 30.484 37.4146C30.6364 37.3511 30.7747 37.2581 30.891 37.1409Z' fill='%23005D28'/%3e%3c/svg%3e ");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: .3s;
}
.typical_solution_examples_item_nav:hover .typical_solution_examples_item_decor {
    transform: rotate(-45deg);
}
.typical_solution_examples_item_nav:hover .typical_solution_examples_item_btn {
    color: var(--green-1);
}

@media(max-width: 1024px) {
    .typical_solution_examples {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }
    .typical_solution_examples_item:last-child {
        grid-column: span 2;
    }
    .typical_solution_examples_item_btn {
        font-size: 14px;
        line-height: 14px;
    }
}
@media(max-width: 767px) {
    .typical_solution_examples {
        gap: 10px;
        grid-template-columns: repeat(1, 1fr);
    }
    .typical_solution_examples_item {
        min-height: 150px;
    }
    .typical_solution_examples_item_btn {
        height: 40px;
    }
    .typical_solution_examples_item_decor {
        min-width: 40px;
        width: 40px;
        height: 40px;
    }
    .typical_solution_examples_item {
        grid-column: span 2;
    }
}



.typical_solution_projects {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
}
.typical_solution_project {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 40px;
    background: #FFFFFF;
    border-radius: 14px;
}
.typical_solution_project_top {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
}
.typical_solution_project_logo {
    width: 85px;
    height: 85px;
}
.typical_solution_project_name {
    margin: 0 !important;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #1D1D1D;
}
.typical_solution_project_description {
    margin: 0 !important;
    border-top: 0.5px solid #BFBFBF;
    padding-top: 15px;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #676767;
}
.typical_solution_project_description span {
    color: #005D28;
}

@media(max-width: 1024px) {
    .typical_solution_projects {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media(max-width: 767px) {
    .typical_solution_projects {
        grid-template-columns: repeat(1, 1fr);
    }
    .typical_solution_project {
        gap: 20px;
    }
    .typical_solution_project_name {
        font-size: 16px;
        line-height: 1;
    }
    .typical_solution_project_logo {
        width: 40px;
        height: 40px;
    }
}