/*
Theme Name: Sanctions lawyers Theme
Description: Sanctions lawyers Theme v 0.0.1 Using Twitter Bootstrap 4.6
Author: Vladimir Khranovsky
Author URI: https://cyberstation.com.ua
Version: 0.0.2
Tags: Sanctionslawyers
Text Domain: 
License: Unlicense
License URI: http://unlicense.org
*/


.block_columns {
    width: 100%;
}

.block_columns .block_columns_items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.block_columns_item {
    padding: 20px;
    background-color: #ebf0fc;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}

.block_text_columns_item {
    position: relative;
    padding-left: 15px;
    color: #3c4355;
}

.block_text_columns_item:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 7px;
    height: 7px;
    background-color: #3c4355;
    border-radius: 50%;
}

.block_columns_item2 {
    width: calc(100% / 2 - (20px / 2));
}

.block_columns_item3 {
    width: calc(100% / 3 - (40px / 3));
}

.block_columns_item4 {
    width: calc(100% / 4 - (60px / 4));
}

.block_columns a {
    transition: 0.3s all linear;
}

.block_columns a:hover {
    opacity: 0.8;
    text-decoration: none;
}

.block_columns_title,
.block_columns_text {
    line-height: 150%;
    color: #3c4355;
    margin: 0;
    position: relative;
    z-index: 1;
}

.block_columns_title {
    font-weight: 500;
    font-size: 20px;
}

.block_columns_text {
    font-size: 16px;
    font-weight: 400;
}

.block_columns svg {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 90px;
    height: 90px;
    aspect-ratio: 1 / 1;
    z-index: 0;
}

.block_columns_item5 {
    width: calc(100% / 5 - (80px / 5));
}

.explanation {
    width: 100%;
    margin: 2rem 0;
}

.explanation,
.explanation_body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.explanation_head {
    display: flex;
    gap: 3px;
}

.explanation_head_item {
    background-color: #08001cbf;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 5px;
}

.explanation .explanation_head_item strong {
    color: white;
}

.explanation_head_item_title {
    max-width: 40%;
}

.explanation_head_item_desc {
    max-width: 60%;
}

.explanation_body_item {
    display: flex;
    gap: 3px;
    border-radius: 5px;

}

.explanation_body_item_left {
    width: 100%;
    max-width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #80808012;
    border-radius: 5px;
}

.explanation_body_item_right {
    width: 100%;
    max-width: 60%;
    padding: 10px;
    background-color: #80808012;
    border-radius: 5px;
}

.frame {
    margin: 2rem 0;
    background-color: #80808012;
    padding: 2rem 1rem;
    border-radius: 5px;
    position: relative;
}

.frame svg {
    position: absolute;
    right: 10px;
    top: 10px;
}

.frame_wrap {
    width: 100%;
    position: relative;
}

.popup {
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10;
    background: rgba(34, 34, 34, 0.7);
    padding: 15px;
}

.popup:target {
    display: flex;
}

.popup_body {
    background-color: white;
    padding: 20px;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 900px;
}

.popup_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: calc(20px + 4*((100vw - 320px) /(1920 - 320)));
    line-height: 28px;
}

.popup_body .mb-3 {
    margin-bottom: 0 !important;
}

.popup_body .mb-5 {
    margin-bottom: 1.5rem !important;
}

.popup_body textarea {
    resize: none;
    max-height: 250px;
}

.popup_close {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup_close svg {
    margin-bottom: 0;
}

.popup_close path {
    fill: #57D7FF;
}

.popup_close rect {
    stroke: #57D7FF;
}

@media screen and (max-width: 900px) {

    .block_columns_item,
    .block_text_columns_item {
        width: calc(100% / 3 - (40px / 3));
    }
}

@media screen and (max-width: 768px) {

    .block_columns_item,
    .block_text_columns_item {
        width: calc(100% / 2 - (20px / 2));
    }

    .block_columns svg {
        width: 45px;
        height: 45px;
    }
}

@media screen and (max-width: 500px) {

    .block_columns_item,
    .block_text_columns_item {
        width: 100%;
    }
}