.banner-a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: max(32px, calc(2.22vw * var(--scale)));
    padding: max(36px, calc(2.5vw * var(--scale)));
}

.banner-a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: 0.9;
}

.banner-b::before {
    background-color: white;
}

.banner-b {
    justify-content: center;
}

.banner-b .banner-item-text p {
    color: black;
    opacity: 0.9;
}

.banner-icon-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: max(18px, calc(1.25vw * var(--scale)));
}

.banner-item-text {
    display: flex;
    flex-direction: column;
    max-width: max(660px, calc(45.83vw * var(--scale)));
}

.banner-b .banner-icon-item {
    max-width: max(440px, calc(30.56vw * var(--scale)));
}

.banner-icon-outer {
    width: max(68px, calc(4.72vw * var(--scale)));
    min-width: max(68px, calc(4.72vw * var(--scale)));
    aspect-ratio: 1/1;
    background-color: var(--text-color);
    color: var(--background-color);
    border-radius: 100%;
}

.banner-icon-inner {
    aspect-ratio: 1/1;
    width: 60%;
}

.banner-item-text p {
    color: white;
    line-height: 130%;
}

.banner-item-text small {
    color: white;
}

p.bigger-paragraph {
    font-size: max(24px, calc(1.67vw * var(--scale)));
    color: var(--text-color);
    font-weight: 800;
}

.banner-item-text.with-border{
    gap: max(4px, calc(0.28vw * var(--scale)));
    border-left: 1px solid white;
    padding-left: max(32px, calc(2.22vw * var(--scale)));
}

.banner-icon-item.with-border {
    border-right: 1px solid white;
    padding-right:max(32px, calc(2.22vw * var(--scale)));
}

.banner-icon-item .arrow-button {
    white-space: nowrap;
}

.banner-b-heading {
    margin-bottom: max(24px, calc(1.67vw * var(--scale)));
}

.banner-a-padding {
    padding-left: max(26px, 1.8vw);
    padding-right: max(26px, 1.8vw);
}

.banner-icon-item .hero-button-wrapper {
    margin-bottom: 0px !important;
}

@media screen and (max-width: 1080px) {
    .banner-a {
        flex-direction: column;
        align-items: flex-start;
    }  

    .banner-item-text.with-border {
        padding-left: 18px;
    }

    .banner-icon-item.with-border {
        padding-right: 0px;
        border-right: none;
    }

    .banner-b {
        align-items: center;
    }

    .banner-b .banner-icon-item {
        flex-direction: column;
        text-align: center;
    }

    .banner-b-heading {
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 767px) { 
    .banner-a-padding {
        padding-left: 18px;
        padding-right: 18px;
    }
}