@import url('https://fonts.cdnfonts.com/css/gilroy-bold');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Poppins&display=swap');

.block-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.block-banner.block-section {
    padding-top: 44.7px;
    padding-bottom: 44.7px;
}

.block-banner .book-a-call-cta {
    display: inline-flex;
    padding: 21.912px 29.738px 22.695px 29.738px;
    justify-content: center;
    align-items: center;
    gap: 7.826px;
    border-radius: 56.346px;
    background: #2A3959;
    width: fit-content;
    color: #FFF;
    font-family: Inter;
    font-size: 14.086px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    /* 22.538px */
    text-transform: uppercase;
}

.block-banner .block-container {
    max-width: 1162px;
}

.block-banner .main-text {
    max-width: 368.889px;
    width: 100%;
}

.block-banner .main-text h2 {
    color: #303030;
    font-family: Open Sans;
	font-size: 38px;
    font-style: normal;
	font-weight: 700;
    line-height: 133.2%;
    /* 45.826px */
    text-transform: capitalize;
    margin-bottom: 18.44px;
}

.block-banner .main-text p {
    color: #4E4E4E;
    font-feature-settings: 'ss02' on;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    max-width: 361.972px;
    width: 100%;
    /* 25.6px */
}

.block-banner .banner-wrap {
    display: flex;
    justify-content: space-between;
    padding: 73.008px 0px 73.778px 80px;
    align-items: center;
    border-radius: 18.444px;
    background: #F6F8FB;
}

.block-banner .images-wrap {
    display: flex;
    flex-direction: column;
    gap: 31.51px;
}

.block-banner .image-row.first {
    display: flex;
    gap: 24.59px;
}

.block-banner .image-row.second {
    display: flex;
    gap: 33.82px;
    justify-content: flex-end;
}

.block-banner .image-row.first img:first-child {
    border-radius: 5.38px 39.194px;
}

.block-banner .image-row.first img {
    border-radius: 26.13px 0px 0px 26.13px;
}

.block-banner .image-row.second img:first-child {
    border-radius: 26.13px;
}

.block-banner .image-row.second img {
    border-radius: 5.38px 0px 0px 39.194px;
}

.block-banner .image-row img {
    /* box-shadow: 0px 61.481px 29.204px 3.074px rgba(0, 0, 0, 0.05); */
	box-shadow: 0 61.48px 29.2px 3.07px #0000000D;
}

.block-banner .image-row.first img:first-child,
.block-banner .image-row.second img:last-child {
	box-shadow: 0 30px 80px 0 #2F415833;
}

.slide-up-element {
    transition: .5s all;
    opacity: 0;
    top: 50%;
    position: relative;
}

.slide-up-element.show {
    opacity: 1;
    top: 0px;
}

/* hide btn */ 
.book-a-call-cta.hide-version {
	display: none !important;
}

@media (max-width: 568px) {
    .block-banner.block-section {
        padding: 40px 20px;
    }

    .block-banner .book-a-call-cta {
        display: block;
        margin: auto;
        margin-bottom: 20px;
    }

    .block-banner .banner-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px 0px 18px 20px;
        align-items: center;
        border-radius: 18.444px;
        background: #F6F8FB;
    }

    .block-banner .image-row.first img:not(:first-child),
    .block-banner .image-row.second img:first-child {
        display: none;
    }

    .block-banner .images-wrap {
        width: 100%;
    }

    .block-banner .image-row {
        width: 100%;
    }

    .block-banner .image-row>img {
        height: auto;
        width: 100%;
    }

    .block-banner .main-text h2 {
        font-size: 32px;
        line-height: 1.5;
        text-align: center;
    }

    .block-banner .main-text p {
        text-align: center;
    }
}

@media (min-width: 568px) and (max-width: 1200px) {
    .block-banner.block-section {
        padding: 40px 20px;
    }

    .block-banner .banner-wrap {
        display: flex;
        padding: 18px 0px 18px 20px;
        gap: 40px;
    }

    .block-banner .image-row.first img:not(:first-child),
    .block-banner .image-row.second img:first-child {
        display: none;
    }

    .block-banner .images-wrap {
        width: 100%;
    }

    .block-banner .image-row {
        width: 100%;
    }

    .block-banner .image-row>img {
        height: auto;
        width: 100%;
    }
}

@media (min-width: 1441px) {
    .block-banner .block-container {
        max-width: 1200px;
    }
}