.section-promotion-banner.blue-background {
    background-color: #F2FBFD;
}

.section-promotion-banner .small-title-with-icon {
    font-weight: 400;
    font-size: 22px;
    color: #00B5D3;
}

.section-promotion-banner .site-btn {
    padding: 0px 32px;
}

.section-promotion-banner-line-spacing {
    width: 100%;
    height: 1px;
}

.section-promotion-banner.framed .promotion-banner-image {
    border-radius: 5px;
    width: 570px;
    max-height: 322px;
    max-width: 570px;
    /* margin-right: 23px; */
    object-fit: cover;
}

.promotion-banner-image-wrapper:has(.promotion-banner-image-with-gradient) {
    max-width: 100%;
}

.section-promotion-banner.framed .promotion-banner-image-with-gradient {
    background: var(--bg-promotion-image), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 322px;
    width: 570px;
}

@media (min-width: 768px) {
    .section-promotion-banner.framed .promotion-banner-image-wrap {
        margin-right: 23px;
    }
}

.section-promotion-banner.framed .image-side-wrapper {
    display: flex;
    justify-content: flex-end;
}

.section-promotion-banner.framed .content-side-wrapper {
    margin-left: 23px;
    justify-content: center;
}

@media (max-width: 768px) {
    .section-promotion-banner.framed .content-side-wrapper {
        margin-left: 0px;
    }
    .section-promotion-banner.framed .promotion-banner-image{
        margin-right: 0px;
    }
}

.section-promotion-banner.split-layout .promotion-banner-image-wrapper {
    display: flex;
}

.section-promotion-banner.full-background-image .title-container.small-title-with-icon,
.section-promotion-banner.framed .title-container.small-title-with-icon {
    font-family: Demo;
    font-weight: 400;
    font-size: 22px;
}


.section-promotion-banner.framed .title-container.big-title h2,
.section-promotion-banner.Image-split-layout .title-container.big-title h2 {
    font-family: Demo;
    font-weight: 400;
    font-size: 50px;
}

.section-promotion-banner.Image-split-layout .small-title {
    order: 1;
}

.section-promotion-banner.Image-split-layout .image-title-image {
    height: 130px;
}

.section-promotion-banner.Image-split-layout .small-title h2 {
    font-family: Demo;
    font-weight: 400;
    font-size: 26px;
}

.section-promotion-banner.full-background-image .small-title h2 {
    font-family: Demo;
    font-weight: 400;
    font-size: 55px;
}

.section-promotion-banner.full-background-image .big-title h2 {
    font-family: Demo;
    font-weight: 400;
    font-size: 55px;
}

.section-promotion-banner.full-background-image .content-container.content-text p,
.section-promotion-banner.Image-split-layout .content-container.content-text p {
    font-family: Inter;
    font-weight: 400;
    font-size: 22px;
}

.section-spacing {
    margin-top: 80px;
}

.section-promotion-banner .icl-small-icon {
    width: 25px;
    height: 28px;
}

.section-promotion-banner.full-background-image {
    padding-top: 6.5rem;
    padding-bottom: 4.5rem;
    background: var(--banner-bg-image), linear-gradient(241deg, rgba(16, 14, 13, 0.00) 5.41%, rgba(16, 14, 13, 0.80) 100.52%);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.section-promotion-banner.framed {
    padding-top: 70px;
    padding-bottom: 70px;
}

.section-promotion-banner .small-title div {
    font-weight: 400;
    font-size: 26px;
    color: #002846;
    font-family: 'Demo';
}

.section-promotion-banner .big-title {
    font-family: Demo;
    font-weight: 400;
    font-size: 50px;
    color: #002C45;
}

.section-promotion-banner .content-text,
.section-promotion-banner .content-text p {
    font-family: Inter;
    font-weight: 400;
    font-size: 22px;
    color: #002846;
    max-width: 600px;
}

.section-promotion-banner .content-text p {
    margin-bottom: 32px;
}

.section-promotion-banner.Image-split-layout .content-text {
    margin-top: 24px !important;
}

.section-promotion-banner.Image-split-layout .content-text p {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .section-promotion-banner .content-text p {
        margin-bottom: 24px;
    }
    .section-promotion-banner.full-background-image .content-text p {
        margin-bottom: 8px;
    }

    .section-promotion-banner.Image-split-layout .promotion-banner-image {
        max-width: calc(100% - 66px);
    }

    .section-promotion-banner.Image-split-layout .button-container {
        padding: 0 8px;
    }

    .section-promotion-banner.Image-split-layout .title-container.big-title {
        margin-top: 0 !important;
    }

    .section-promotion-banner.Image-split-layout .content-text {
        margin-top: 16px !important;
    }

    .section-promotion-banner.Image-split-layout .content-text p {
        margin-bottom: 0;
    }

    .section-promotion-banner .small-title div {
        font-size: 22px;
    }
    .section-promotion-banner.full-background-image .title-container.small-title-with-icon,
    .section-promotion-banner.framed .title-container.small-title-with-icon,
    .section-promotion-banner.Image-split-layout .title-container.small-title-with-icon {
        font-size: 18px;
    }
}

.section-promotion-banner.full-background-image .content-text,
.section-promotion-banner.full-background-image .content-text p,
.section-promotion-banner.full-background-image .big-title h2,
.section-promotion-banner.full-background-image .small-title div,
.section-promotion-banner.full-background-image .small-title-with-icon {
    color: #fff;
}

.section-promotion-banner.Image-split-layout {
    padding: 0 !important;
}

.section-promotion-banner.Image-split-layout .content-side-wrapper {
    padding: 2.5rem 0;
}

body:not(.rtl) .section-promotion-banner .percentage-box {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 30px;
    bottom: 30px;
}

body.rtl .section-promotion-banner .percentage-box {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 30px;
    bottom: 30px;
}

.section-promotion-banner .percent-wrapper:before {
    content: '';
    width: 40px;
    height: 40px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../icons/arrow-up.svg);
}

.section-promotion-banner .percent-wrapper {
    display: flex;
    align-items: center;
    column-gap: 3.61px;
    color: #FFF;
    font-family: DemoNumber;
    font-size: 72px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    margin-left: -5px;
}

.section-promotion-banner .percentage-box-text {
    align-self: stretch;
    color: #FFF;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-promotion-banner .play-icon {
    width: 60px;
    height: 60px;
}

@media (max-width: 768px) {
    .section-promotion-banner .play-icon {
        width: 42px;
        height: 42px;
    }
}

@media (min-width: 992px) {

    .section-promotion-banner.Image-split-layout .promotion-banner-image-wrapper,
    .section-promotion-banner.Image-split-layout .container-fluid {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body:not(.rtl) .section-promotion-banner.Image-split-layout .content-side-wrapper-container {
        padding-left: 60px;
    }

    body.rtl .section-promotion-banner.Image-split-layout .content-side-wrapper-container {
        padding-right: 60px;
    }
}

@media (max-width: 991px) {

    .section-promotion-banner.framed {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .section-promotion-banner .percentage-box-text {
        font-family: Inter;
        font-weight: 500;
        font-size: 14px;
    }

    .section-promotion-banner .percent-wrapper {
        font-family: DemoNumber;
        font-weight: 300;
        font-size: 44px;
    }

    .section-promotion-banner.full-background-image {
        min-height: 520px;
        background: var(--banner-bg-image), linear-gradient(241deg, rgba(16, 14, 13, 0.00) 5.41%, rgba(16, 14, 13, 0.80) 100.52%);;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .section-promotion-banner.full-background-image .title-container.small-title-with-icon {
        font-family: Demo;
        font-weight: 400;
        font-size: 18px;
    }

    .section-promotion-banner.full-background-image .small-title div {
        font-family: Demo;
        font-weight: 500;
        font-size: 28px;
    }

    .section-promotion-banner.Image-split-layout .image-title-image {
        height: 83px;
    }

    .section-promotion-banner.full-background-image .big-title h2 {
        font-family: Demo;
        font-weight: 400;
        font-size: 26px;
    }

    .section-spacing {
        padding-top: 26px;
        margin-top: 30px;
    }

    .section-promotion-banner.framed .promotion-banner-image{
        max-width: 100%;
        max-height: 200px;
    }

    .section-promotion-banner.full-background-image .content-container.content-text p,
    .section-promotion-banner.Image-split-layout .content-container.content-text p {
        font-family: Inter;
        font-weight: 400;
        font-size: 16px;
    }

    .section-promotion-banner.framed .content-container.content-text p {
        font-family: Inter;
        font-weight: 400;
        font-size: 18px;
    }

    .section-promotion-banner.framed .title-container.big-title h2,
    .section-promotion-banner.Image-split-layout .title-container.big-title h2{
        font-family: Demo;
        font-weight: 400;
        font-size: 28px;
    }

    .section-promotion-banner.Image-split-layout .content-side-wrapper {
        padding: 0 8px;
    }

    .section-promotion-banner.Image-split-layout {
        padding-bottom: 30px !important;
    }

    .section-promotion-banner.Image-split-layout .small-title h2 {
        font-size: 22px;
    }

    .section-promotion-banner .icl-small-icon {
        width: 22px;
        height: 24px;
    }

    .section-promotion-banner.full-background-image {
        padding-top: 6.5rem;
        padding-bottom: 2rem;
        padding-left: 8px;
        padding-right: 8px;
    }

    .section-promotion-banner.full-background-image .big-title {
        display: none;
    }

    .section-promotion-banner.Image-split-layout .promotion-banner-image-wrap {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;
    }

    body:not(.rtl) .section-promotion-banner.Image-split-layout .image-side-wrapper {
        padding-right: 0;
    }

    body.rtl .section-promotion-banner.Image-split-layout .image-side-wrapper {
        padding-left: 0;
    }
}

.blue-figure-top {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="207" height="83" viewBox="0 0 207 83" fill="none"><path d="M188.218 -84.3063C190.724 -83.907 193.106 -82.9415 195.183 -81.4831C197.26 -80.0248 198.978 -78.1121 200.205 -75.8903C219.352 -42.6227 236.61 -12.7601 254.376 17.9827L254.575 18.327C264.937 36.2587 275.476 54.495 286.666 73.8859C287.578 75.1191 288.038 76.6285 287.969 78.1607C287.635 80.582 285.364 82.1767 282.126 82.2017C281.558 82.2017 278.501 82.2027 273.564 82.2043L273.37 82.2044C237.838 82.216 107.27 82.2584 103.229 82.1926C101.487 82.1546 99.7576 81.8851 98.0868 81.3911C95.9097 80.7818 93.8752 79.7464 92.1012 78.3447C90.3272 76.943 88.8492 75.203 87.7527 73.2256C69.0161 40.6902 52.1341 11.4712 34.7931 -18.5423L34.7912 -18.5455C24.2355 -36.815 13.5097 -55.379 2.09196 -75.1646C1.4048 -76.263 0.815439 -77.4196 0.330664 -78.6212C0.112864 -79.1187 0.000246048 -79.6559 -0.000116348 -80.199C-0.000478745 -80.7422 0.111406 -81.2795 0.328527 -81.7774C0.545649 -82.2752 0.863316 -82.7228 1.26159 -83.092C1.65985 -83.4612 2.13012 -83.7441 2.64288 -83.9229C3.85056 -84.3785 5.12569 -84.6296 6.41589 -84.666C11.9995 -84.886 182.649 -84.7599 188.218 -84.3063Z" fill="%2300B5D3"/><path d="M302.933 -67.3205C305.439 -66.9212 307.821 -65.9557 309.898 -64.4974C311.975 -63.0391 313.693 -61.1263 314.92 -58.9045C328.619 -35.1031 337.265 -19.9964 345.421 -5.7467L345.425 -5.74131L345.428 -5.7355C355.36 11.6167 364.566 27.7011 381.285 56.6717C382.197 57.9048 382.656 59.4142 382.587 60.9465C382.253 63.3677 379.982 64.9624 376.744 64.9875C375.952 64.9875 373.467 64.9894 369.869 64.9922L369.513 64.9925C351.899 65.0064 309.089 65.0401 305.291 64.9783C303.549 64.9403 301.82 64.6708 300.149 64.1768C297.972 63.5676 295.937 62.5321 294.163 61.1304C292.389 59.7287 290.911 57.9887 289.815 56.0113C275.806 31.6864 267.175 16.6019 258.92 2.17404L258.892 2.12455L258.886 2.11548L258.885 2.11362C249.39 -14.4811 240.383 -30.2239 224.25 -58.1788C223.563 -59.2772 222.974 -60.4338 222.489 -61.6354C222.271 -62.1329 222.159 -62.6701 222.158 -63.2133C222.158 -63.7564 222.27 -64.2938 222.487 -64.7916C222.704 -65.2895 223.022 -65.737 223.42 -66.1062C223.818 -66.4755 224.289 -66.7583 224.801 -66.9371C226.009 -67.3927 227.284 -67.6438 228.574 -67.6802C234.158 -67.9002 297.364 -67.7741 302.933 -67.3205Z" fill="%2300B5D3"/></svg>');
    background-repeat: no-repeat;
    background-size: cover; 
    position: absolute;
    top: 0;
    right: 0;
    width: 207px;
    height: 83px;
}

body.rtl {
    @media (min-width: 768px) {
        .section-promotion-banner.framed .promotion-banner-image-wrap {
            margin-left: 23px;
            margin-right: 0;
        }
    }

    .section-promotion-banner.framed .content-side-wrapper {
        margin-right: 23px;
    }
    
    @media (max-width: 768px) {
        .section-promotion-banner.framed .content-side-wrapper {
            margin-right: 0px;
            margin-left: 0;
        }
        .section-promotion-banner.framed .promotion-banner-image{
            margin-left: 0px;
            margin-right: 0;
        }
    }
    
    .section-promotion-banner .percent-wrapper {
        margin-right: -5px;
        margin-left: 0;
    }

    .blue-figure-top {
        left: 0;
        right: auto;
        transform: rotateY(180deg);
    }

    .section-promotion-banner .icl-small-icon {
        transform: rotateY(180deg);
    }

    .section-promotion-banner.framed .promotion-banner-image-with-gradient {
        background: var(--bg-promotion-image), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    }

    .section-promotion-banner.full-background-image {
        background: var(--banner-bg-image), linear-gradient(421deg, rgba(16, 14, 13, 0.00) 5.41%, rgba(16, 14, 13, 0.80) 100.52%);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}