/* Start Banner */
    .banner{
        height:100vh;
        border-radius:0 0 2rem 2rem
    }
    .banner #qrcarouselbanner .container .details h6 {
        display: flex;
        height: 40px;
        padding: 4px 12px;
        align-items: center;
        gap: 8px;
        border-radius: 8px; 
        background: rgba(255, 255, 255, 0.10) !important;
    }
    .banner #qrcarouselbanner{
        height:100%;
        position:relative
    }
    .banner #qrcarouselbanner .carousel-inner{
        height:inherit
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item{
        height:inherit
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item{
        display:flex;
        height:inherit;
        border-radius:0 0 30px 30px
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item.purple{
        background:linear-gradient(to bottom,#4b38d8 0,#857efe 100%);
        background-position:140%,center;
        background-size:72% 170%,cover;
        background-repeat:no-repeat
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item.peach{
        background:radial-gradient(ellipse 50% 30% at center,#af425a,rgba(175,66,90,0)),linear-gradient(to bottom,#cd5b75 0,#d27c90 100%);
        background-position:140%,center;
        background-size:72% 170%,cover;
        background-repeat:no-repeat
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item.red{
        background:radial-gradient(ellipse 50% 30% at center,#af425a,rgba(95,20,20,0)),linear-gradient(to bottom,#892a2a 0,#9d4444 100%);
        background-position:140%,center;
        background-size:72% 170%,cover;
        background-repeat:no-repeat
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item.green{
        background:radial-gradient(ellipse 50% 30% at center,#1f6730,rgba(31,103,48,0)),linear-gradient(to bottom,#385b3f 0,#85a27c 100%);
        background-position:140%,center;
        background-size:72% 170%,cover;
        background-repeat:no-repeat
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details{
        display:flex;
        height:inherit;
        align-items:center;
        padding-bottom:5rem
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details{
        flex:0 0 60%;
        font-family:Gilroy,sans-serif!important
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h6{
        gap:5px;
        display:flex;
        line-height:1;
        font-size:14px;
        padding:5px 7px;
        font-weight:500;
        color:rgba(255,255,255,.6980392157);
        width:-moz-max-content;
        width:max-content;
        align-items:center;
        border-radius:15px;
        justify-content:flex-start;
        background-color:rgba(255,255,255,.4);
        border:solid 1px rgba(255,255,255,.7)
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h6 img{
        width:18px;
        height:18px;
        -o-object-fit:contain;
        object-fit:contain;
        -o-object-position:center;
        object-position:center
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4{
        color:#fff;
        font-size:54px;
        font-weight:600;
        line-height:1.1
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4 span{
        color:#fab475;
        display:inline-block
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4.smaller{
        width:85%
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details p{
        width:35rem;
        font-size:18px;
        font-weight:500;
        margin:0 0 2rem;
        color:rgba(255,255,255,.7)
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons{
        gap:10px;
        display:flex;
        align-items:center
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons a.btn.btn-orange{
        gap:10px;
        display:flex;
        color:#fff;
        font-size:18px;
        font-weight:600;
        width:-moz-max-content;
        width:max-content;
        align-items:center;
        border-radius:40px;
        justify-content:flex-end;
        padding:6px 7px 6px 30px;
        background:linear-gradient(to bottom,#ef8626 0,#e7a66b 100%)
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons a.btn.btn-orange span.qr{
        width:48px;
        height:48px;
        display:flex;
        border-radius:50%;
        align-items:center;
        justify-content:center;
        background-color:#fff
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons a.btn.btn-orange span.qr img{
        width:27px;
        height:25px;
        -o-object-fit:contain;
        object-fit:contain
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons a.btn.btn-hollow{
        gap:10px;
        height:62px;
        display:flex;
        color:#fff;
        font-size:18px;
        font-weight:600;
        padding:6px 25px;
        width:-moz-max-content;
        width:max-content;
        align-items:center;
        border-radius:40px;
        justify-content:center;
        background:0 0;
        border:solid 1px rgba(255,255,255,.3)
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .image{
        flex:0 0 40%
    }
    .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .image img{
        height:100%;
        width:100%;
        position:relative;
        -o-object-fit:contain;
        object-fit:contain;
        -o-object-position:center;
        object-position:center
    }

    .banner #qrcarouselbanner .carousel-banner-footer-container{
        left:0;
        right:0;
        width:100%;
        bottom:3rem;
        position:absolute;
        font-family:Gilroy,sans-serif!important
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer{
        gap:4rem;
        width:100%;
        margin:auto;
        display:flex;
        align-items:center;
        justify-content:flex-start
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left{
        gap:0;
        height:82px;
        display:flex;
        align-items:center;
        border-radius:40px;
        padding:0 18px 0 13px;
        border:solid 1px rgba(255,255,255,.5);
        background-color:rgba(255,255,255,.2)
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left .images{
        display:flex;
        align-items:center;
        justify-content:flex-start
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left .images img{
        width:58px;
        height:58px;
        -o-object-fit:cover;
        object-fit:cover;
        position:relative;
        border-radius:50%;
        -o-object-position:center;
        object-position:center;
        border:solid 4px rgba(255,255,255,.2)
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left .images img.back{
        z-index:5
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left .images img.front{
        z-index:6;
        left:-24px
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left p{
        margin:0;
        color:#fff;
        font-size:14px;
        font-weight:500;
        height:-moz-fit-content;
        height:fit-content
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .left p span{
        display:block
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .right{
        gap:4rem;
        display:flex;
    /*    align-items:center*/
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .right h5{
        gap:10px;
        margin:0;
        display:flex;
        font-size:18px;
        font-weight:500;
        align-items:center;
        color:rgba(255,255,255,.7);
        justify-content:flex-start
    }
    .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .right h5 img{
        width:28px;
        height:28px
    }

    .banner #qrcarouselbanner .carousel-control-next img,.landing-page .banner #qrcarouselbanner .carousel-control-prev img{
        width:54px;
        height:54px;
        border-radius:50%;
        background-color:rgba(255,255,255,.2);
        border:solid 1px rgba(255,255,255,.5)
    }


    @media (max-width:991px){
        .banner{
            height:auto
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .image img {
            width: 96%;
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details{
            align-items:center;
            flex-direction:column;
            padding-bottom: 0 !important;
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details{
            flex:1;
            text-align:center
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h6{
            margin:2rem auto 1rem
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4{
            font-size:40px;
            margin:0 auto 1rem
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details p{
            margin:0 auto 2rem;
            text-align: center !important;
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons{
            justify-content:center
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .image{
            flex:1
        }
        .banner #qrcarouselbanner .carousel-control-next,.landing-page .banner #qrcarouselbanner .carousel-control-prev{
            padding-top:15rem
        }
        .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer{
            gap:2rem;
            flex-direction:column
        }
        .banner #qrcarouselbanner .carousel-banner-footer-container .carousel-banner-footer .right{
            gap:1rem;
            flex-direction:column
        }

        .section-3-banner-img {
            height: auto !important;
            width: 80% !important;
        }

        .div-how-it-works-btn {
            text-align: center;
        }

        .section-3 h4 {
            font-size: 18px !important;
        }
        .section-3 .ulist {
            text-align: justify;
        }

        .section-3 ul li .li-header {
            font-size: 18px;
        }
        .section-3 ul li span {
            font-size: 18px; 
        }
        .section-3 .buttons {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .manage-content .title h2 {
            font-size: 30px;
        }
    }

    @media (max-width:767px){
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details{
            width:100%
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h6{
            font-size:12px
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details h4{
            font-size:32px
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details .buttons{
            flex-direction:column
        }
        .banner #qrcarouselbanner .carousel-inner .carousel-item .item .item-details .details p{
            width:100%;
            font-size:16px
        }
    }
/* End Banner */