/*!******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/modules/regular/Hero banner retail.module/module.css ***!
  \******************************************************************************************************************************************************/
.hero-banner-retail {
    position: relative;

    @-webkit-keyframes rotateBackground {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
}

    .hero-banner-retail__wrapper {
        grid-gap: 64px;
        gap: 64px;
        position: relative;
        z-index: 3;
    }

    @media (max-width: 992px) {

    .hero-banner-retail__wrapper {
            grid-gap: 48px;
            gap: 48px
    }
        }

    .hero-banner-retail__wrapper--text {
            position: relative;
            z-index: 2;
            margin: 0 auto;
        }

    .hero-banner-retail__wrapper--text h5 {
                font-size: var(--TypographyFontSizeParagraphregular);
                font-weight: 400;
                line-height: var(--TypographyLineHeight200);
            }

    .hero-banner-retail__wrapper--text h1 {
                font-weight: 600;
                color: #051C4F;
            }

    .hero-banner-retail__wrapper--text p {
                color: #2E3138;
                max-width: 805px;
                margin: 0 auto;
            }

    @media (min-width: 992px) {

    .hero-banner-retail__wrapper--text p {
                    font-size: 23px;
                    font-weight: 300;
                    line-height: 30px
            }
                }

    .hero-banner-retail__wrapper--text .cta {
                padding-top: 32px;
            }

    .hero-banner-retail__wrapper--tabs {
            grid-gap: 48px;
            gap: 48px;
        }

    @media (max-width: 1200px) {

    .hero-banner-retail__wrapper--tabs {
                grid-gap: 24px;
                gap: 24px
        }
            }

    @media (max-width: 992px) {

    .hero-banner-retail__wrapper--tabs {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column
        }
            }

    .hero-banner-retail__wrapper--tabs .tabs__boxes {
                grid-gap: 48px;
                gap: 48px;
                width: 470px;
            }

    @media (max-width: 1200px) {

    .hero-banner-retail__wrapper--tabs .tabs__boxes {
                    width: 360px;
                    grid-gap: 24px;
                    gap: 24px
            }
                }

    @media (max-width: 992px) {

    .hero-banner-retail__wrapper--tabs .tabs__boxes {
                    width: 100%;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: row;
                            flex-direction: row;
                    -ms-flex-wrap: wrap;
                        flex-wrap: wrap
            }
                }

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item {
                    border-radius: 23px;
                    background: linear-gradient(245.65deg, #FFFFFF 12.18%, #E3E4E8 82.5%);
                    -webkit-box-shadow: 0px 1119px 313px 0px rgba(0, 0, 0, 0.00), 0px 716px 287px 0px rgba(0, 0, 0, 0.01), 0px 403px 242px 0px rgba(0, 0, 0, 0.05), 0px 179px 179px 0px rgba(0, 0, 0, 0.09), 0px 45px 99px 0px rgba(0, 0, 0, 0.10);
                            box-shadow: 0px 1119px 313px 0px rgba(0, 0, 0, 0.00), 0px 716px 287px 0px rgba(0, 0, 0, 0.01), 0px 403px 242px 0px rgba(0, 0, 0, 0.05), 0px 179px 179px 0px rgba(0, 0, 0, 0.09), 0px 45px 99px 0px rgba(0, 0, 0, 0.10);
                    grid-gap: 8px;
                    gap: 8px;
                    background-color: #fff;
                    overflow: hidden;
                    position: relative;
                    padding: 2px;
                    z-index: 2;
                    -webkit-transition: all .3s;
                    transition: all .3s;
                    width: 100%;
                    cursor: pointer;
                }

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item.active .single-item__inner--text h4 {
                                color: #0B369C;
                            }

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item.active .single-item__inner--icon {
                            opacity: 1 !important;
                        }

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item:hover .single-item__inner--text h4 {
                                color: #0B369C;
                            }

    @media (max-width: 992px) {

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item {
                        width: calc(50% - 14px)
                }
                    }

    @media (max-width: 768px) {

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item {
                        width: 100%
                }
                    }

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item .single-item__inner {
                        border-radius: 23px;
                        background: linear-gradient(251.56deg, #E3E4E8 1.74%, #FFFFFF 85.31%);
                        width: 100%;
                        height: 100%;
                        padding: 36px 39px 36px 32px;
                        grid-gap: 60px;
                        gap: 60px;
                    }

    @media (max-width: 1200px) {

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item .single-item__inner {
                            padding: 24px
                    }
                        }

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item .single-item__inner .single-item__inner--text h4 {
                                -webkit-transition: all linear;
                                transition: all linear;
                                letter-spacing: -0.4px;
                                margin-bottom: 12px;
                            }

    @media (min-width: 992px) {

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item .single-item__inner .single-item__inner--text h4 {
                                    font-size: 30px
                            }

                                }

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item .single-item__inner .single-item__inner--text p {
                                margin-bottom: 0px;
                                color: #5D626F;
                                line-height: 22px;
                                letter-spacing: -0.4px;
                                max-width: 325px;
                            }

    .hero-banner-retail__wrapper--tabs .tabs__boxes .single-item .single-item__inner .single-item__inner--icon {
                            -webkit-transition: all .3s;
                            transition: all .3s;
                            opacity: 0;
                            margin-top: 9px;
                        }

    .hero-banner-retail__wrapper--tabs .tabs__img {
                width: calc(100% - 470px - 48px);
                position: relative;
                z-index: 4;
            }

    @media (max-width: 1200px) {

    .hero-banner-retail__wrapper--tabs .tabs__img {
                    width: calc(100% - 360px - 24px)
            }
                }

    @media (max-width: 992px) {

    .hero-banner-retail__wrapper--tabs .tabs__img {
                    width: 100%;
                    border-radius: 24px;
                    overflow: hidden
            }
                }

    .hero-banner-retail__wrapper--tabs .tabs__img .single-item {
                    display: none;
                    height: 100%;
                    border-radius: 24px;
                    overflow: hidden;            
                }

    .hero-banner-retail__wrapper--tabs .tabs__img .single-item.active {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                    }

    @media (max-width: 992px) {

    .hero-banner-retail__wrapper--tabs .tabs__img .single-item {
                        padding-top: 24px            
                }
                    }

    .hero-banner-retail .object {
        position: absolute;
        left: 0px;
        top: 10%;
        width: 100%;
        height: 60%;
        -webkit-animation: rotateBackground 20s infinite ease-in-out;
                animation: rotateBackground 20s infinite ease-in-out;
    }

    .hero-banner-retail .dot {
        width: 50%;
        height: 80%;
        -webkit-filter: blur(60px);
                filter: blur(60px);
        opacity: .15;
    }

    @media (max-width: 767px) {

    .hero-banner-retail .dot {
            width: 200px;
            height: 200px
    }
        }

    @supports (-webkit-backdrop-filter: blur(1px)) {

    .hero-banner-retail .dot {
            -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
            -webkit-backface-visibility: hidden;
                    backface-visibility: hidden
    }
        }

    .hero-banner-retail .dot.first {
            position: absolute;
            background-color: #B8EBE8;
            left: 0px;
            //animation: rotateFirst 15s infinite ease-in-out;
        }

    .hero-banner-retail .dot.second {
            position: absolute;
            background-color: #C0B9E8;
            right: 0px;
            //animation: secondDot 15s infinite ease-in-out;
        }

    @keyframes rotateBackground {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }