﻿.section-info {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding-bottom: 20vh;
}

.section-info-title {
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw - 0.5rem, 1.75rem);
    line-height: 1;
    color: var(--color-dark-blue);
    margin-bottom: 30px;
}

.section-info-right .section-info-title {
    padding-left: 220px;
}

.phone   .section-info-right .section-info-title,
.tablet .section-info-right .section-info-title {
    padding-left: 0px;
}

.section-info-left {
    flex: 1;
    transform: translateX(25%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section-info-left .fixer {
    height: 0;
    margin: 0;
    padding: 0;
}
.section-info-content-left {
    background: var(--color-white);
    box-shadow: 0px 8px 22px -6px rgb(24 39 75 / 12%), 0px 14px 64px -4px rgb(24 39 75 / 12%);
    border-radius: 1px;
    padding: 60px 40px 20px;
}


.section-info-right {
    flex: 2;
}

.section-info-content-right {
    background: var(--color-dark-blue);
    box-shadow: 0px 6px 15px -5px rgba(24, 39, 75, 0.12), 0px 10px 45px -3px rgba(24, 39, 75, 0.12);
    padding: 100px 20ch 20px 220px;
}

.section-info-content-left-link, 
.section-info-content-right-link {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 10%;
}

/* responsive */

.phone .section-info,
.tablet .section-info {
    padding-bottom: 6vh;
    flex-flow: column;
}

.phone .section-info-left, 
.tablet .section-info-left {
    transform: unset;
    padding: 16px;
    width: 100%;
}

.phone .section-info-right,
.tablet .section-info-right {
    padding: 16px;
}

.phone .section-info-content-right,
.tablet .section-info-right {
    padding: 16px;
    flex-flow: column;
}