//banner section one
.banner__content{
    padding: 100px 0 210px;
    .sub{
        padding-left: 15px;
        @include breakpoint(max-xs){
            font-size: 20px;
        }
       &::before{
        position: absolute;
        bottom: 7px;
        left: 0;
        width: 15px;
        height: 2px;
        content: "";
        background: var(--base);
       }
    }
    .sub2{
        padding-left: 15px;
        @include breakpoint(max-xs){
            font-size: 20px;
        }
       &::before{
        position: absolute;
        bottom: 7px;
        left: 0;
        width: 15px;
        height: 2px;
        content: "";
        background: var(--base2);
       }
    }
    .d1{
        @include breakpoint(max-xxl){
            font-size: 58px;
            line-height: 130%;
        }
        @include breakpoint(max-md){
            font-size: 48px;
        }
        @include breakpoint(max-xs){
            font-size: 36px;
        }
    }
    .ball{
        position: absolute;
        top: 20px;
        left: -120px;
        z-index: -1;
        animation: cir360 17s linear infinite;
    }
    @include breakpoint(max-xxl){
        padding: 80px 0 180px;
    }
    @include breakpoint(max-lg){
        padding: 80px 0 20px;
    }
    @include breakpoint(max-md){
        padding: 60px 0 20px;
    }
}
.sub2{
    padding-left: 15px;
    @include breakpoint(max-xs){
        font-size: 20px;
    }
   &::before{
    position: absolute;
    bottom: 7px;
    left: 0;
    width: 15px;
    height: 2px;
    content: "";
    background: var(--base2);
   }
}
.btn__grp { 
    gap: 24px;
    @include breakpoint(max-sm){
        gap: 14px;
    }
    @include breakpoint(max-xs){
        gap: 14px;
        .cmn--btn{
            padding: 9px 14px 9px;
            font-size: 14px;
        }
    }
}
.banner__shapethumb{
    .thumb{
        max-width: 500px;
        padding-top: 100px;
        padding-left: 50px;
        @include breakpoint(max-xl){
            padding-left: 30px;
        }
        @include breakpoint(max-sm){
            width: 100%;
            padding-top: 50px;
            img{
                width: 100%;
            }
        }
    }
    .circle__thumb{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        animation: cir90 15s linear infinite;
        @include breakpoint(max-lg){
            width: 100%;
            img{
                width: 100%;
            }
        }
    }
}
//wallet 
.wallet{
    position: absolute;
    top: 40px;
    left: 50%;
    opacity: 0.45;
    @include breakpoint(max-lg){
        width: 40px;
        img{
            width: 100%;
        }
    }
    @include breakpoint(max-md){
        left: 60%;
    }
}
//hand wallet
.hand-wallet{
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.45;
    @include breakpoint(max-xl){
        display: none;
    }
}
//mobile wallet
.mobile-wallet{
    position: absolute;
    bottom: 30px;
    right: 30px;
    opacity: 0.45;
    @include breakpoint(max-xl){
        display: none;
    }
}
//banner section one

//banner section two
.banner__sectiontwo{
    background: url(../../assets/img/banner/banner2-bg.jpg) no-repeat center center;
    background-size: cover;
    .round__shape{
        position: absolute;
        bottom: 0;
        left: 0;
        @include breakpoint(max-xs){
            margin-bottom: -50px;
        }
    }
    .element1{
        position: absolute;
        top: 110px;
        left: 120px;
        width: 150px;
        animation: cir5 2s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
    .element2{
        position: absolute;
        top: 140px;
        left: 50%;
        width: 140px;
        animation: cir90 5s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
    .element3{
        position: absolute;
        top: 40px;
        right: 40px;
        width: 140px;
        animation: cir90 5s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
    .element4{
        position: absolute;
        bottom: 40px;
        left: 50%;
        width: 140px;
        animation: cir5 2s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
}
.banner__content2box{
    max-width: 670px;
    .d2{
        line-height: 130%;
    }
}
.pt__spacenone{
    @include breakpoint(max-md){
        padding-top: 30px;
    }
}
//banner section two

//banner breadcumn
.banner__breadcumn{
    background: url(../../assets/img/banner/beadcumnd-bg.jpg) no-repeat top center;
    background-size: cover;
    .element1{
        position: absolute;
        top: 63px;
        left: 98px;
        width: 133px;
        animation: cir5 2s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
    .element2{
        position: absolute;
        top: 120px;
        left: 35%;
        width: 93px;
        animation: cir90 5s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
    .element3{
        position: absolute;
        bottom: 20%;
        left: 50%;
        width: 100px;
        animation: cir90 5s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
    .element4{
        position: absolute;
        bottom: 40px;
        right: 80px;
        width: 140px;
        animation: cir5 2s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
    .element5{
        position: absolute;
        bottom: 7%;
        left: 25%;
        width: 80px;
        animation: cir90 5s linear infinite;
        @include breakpoint(max-md){
            display: none;
        }
        img{
            width: 100%;
        }
    }
}
.breadcumnd__wrapper{
    padding: 5px 0 30px;
    .breadcumnd__content{
        .d4{
           @include breakpoint(max-xl){
            font-size: 48px;
            margin-bottom: 5px;
           }
           @include breakpoint(max-md){
            font-size: 36px;
            margin-bottom: 5px;
           }
           @include breakpoint(max-xs){
            font-size: 34px;
            margin-bottom: 8px;
           }
        }
    }
    .featured__card{
        @include breakpoint(max-sm){
            max-width: 300px;
            margin-top: 30px;
        }
    }
}
//banner breadcumn

//banner gift thumb space 
.gift__thumbbanner{
    margin-bottom: -100px;
}
//banner gift thumb space 

