.home-banner {
   position: relative;
   min-height: 670px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.home-banner:after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   /*background: rgb(44 45 50 / 70%);*/
}

.BannerText h1 {
   font-size: 44px;
   color: #fff;
   font-weight: bold;
}

.BannerText p {
   color: #fff;
   font-size: 18px;
   font-weight: 300;
}

.ProductCode {
   display: flex;
   align-items: center;
   min-width: 460px;
   max-width: 460px;
   position: relative;
}

.ProductCode button {
   min-width: 146px;
   position: absolute;
   right: 0;
}

.AppBox {
   min-width: 460px;
   text-align: center;
   max-width: 460px;
   margin-top: 30px;
}

.AppBox h4 {
   color: #fff;
   margin-bottom: 20px;
}

.AppIcon {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 50px;
}

.InnerText {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
}

.InnerText h3 {
   color: var(--text-dark);
   font-weight: 600;
}

.MobileDeviceScan {
   border-radius: 10px;
   overflow: hidden;
   position: relative;
}

.MobileDeviceScan:after {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: rgb(42 43 48 / 15%);
   content: '';
   right: 0;
}

.VideoPopup {
   position: absolute;
   right: -30px;
   top: -30px;
}

.PlayBtn {
   display: flex;
   width: 70px;
   height: 70px;
   justify-content: center;
   align-items: center;
   border-radius: 100%;
   background: var(--bg-primary);
   font-size: 23px;
   color: var(--bg-white);
}

.MobileDevice {
   position: relative;
}

.MobileDevice video {
   width: 100%;
   height: 580px;
   object-fit: cover;
   /*border-radius: 0px 0px 30px 0px;*/
}

.Heading_Our h2 {
   font-size: 36px;
   font-weight: 600;
   padding-left: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.Heading_Our {
   position: relative;
}

.Heading_Our h2:before {
   content: '';
   position: absolute;
   left: 0;
   height: 28px;
   width: 4px;
   background: var(--bg-primary);
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.InnerLogos {
   height: 150px;
   width: 165px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border-radius: 10px;
   border: 1px solid #EEEEEE;
   margin: auto;
}

.HeadingsCommen h2 {
   font-size: 36px;
   font-weight: 600;
}

/* .setps {
    counter-reset: WorksCounter;
}
.setps h3 {
    position: relative;
    counter-increment: WorksCounter;
}
.setps h3:after {
    content: "0" counter(WorksCounter);
    position: absolute;
    right: -158px;
    top: 0;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-primary);
    border-radius: 100%;
    font-weight: bold;
    font-size: 46px;
    color: #fff;
}

.leftsetp h3:after {
    left: -158px;
} */
.Counters span {
   width: 100px;
   height: 100px;
   background: var(--bg-primary);
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 100%;
   font-weight: bold;
   font-size: 46px;
   color: #fff;
   position: relative;
   z-index: 9;
}

.Counters {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   z-index: 9;
}

.Counters:after {
   border-left: 2px dashed #555555;
   content: '';
   height: 99vh;
   left: 50%;
   position: absolute;
   right: 0;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   top: 172px;
}

.last-none::after {
   display: none;
}

.DiviseImg {
   position: relative;
}

.BackImgeRound {
   position: absolute;
   top: -180px;
   left: -180px;
}

/******Login******/

.LoginPage {
   height: 100vh;
}

.BGImg img {
   height: 100%;
   object-fit: cover;
}

.BGImg {
   position: absolute;
   height: 100%;
   left: 0;
   bottom: 0;
   object-fit: cover;
}

.LoginWithImg {
   position: relative;
}

.WebLogo {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   z-index: 1;
}

.LoginWithImg:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   background: rgb(0 0 0 / 70%);
   width: 100%;
   height: 100%;
}

.WebLogo img {
   width: 250px;
}

.LoginForm {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   padding: 90px;
   background: #f8f8f8;
}

.InnerFormDign {
   width: 100%;
   background: #fff;
   padding: 60px 75px;
   text-align: center;
   border-radius: 15px;
   box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
   position: relative;
   overflow: hidden;
}

.InnerFormDign p {
   font-size: 20px;
}

a.ForgotPass {
   color: var(--bg-primary);
   font-size: 14px;
   font-family: "Jost", sans-serif;
}

.BottomBorder {
   height: 19px;
   width: 100%;
   background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, var(--bg-secondary), var(--bg-primary));
   position: absolute;
   left: 0;
   bottom: 0;
}

.ForgotForm {
   background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(8deg, var(--bg-secondary), var(--bg-primary));
   background-origin: border-box;
   background-clip: content-box, border-box;
   border-radius: 0px 50px 50px 0px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.InnerForgotDign {
   max-width: 350px;
   text-align: center;
   margin: auto;
}

.ForgotLogo {
   position: absolute;
   top: 30px;
   left: 30px;
}

.CheckImg img {
   width: 130px;
   margin: auto;
   display: block;
}

.TextVerd h3 {
   font-size: 28px;
   font-weight: 400;
   font-family: "Jost", sans-serif;
   color: var(--bg-primary);
}

.SerialNo {
   margin: 15px 0px;
}

.SerialNo h3 {
   font-weight: 800;
   font-size: 24px;
   color: var(--bg-primary);
}

.MessagePromo p {
   font-size: 18px;
   font-family: "Jost", sans-serif;
}


.CloseBtn {
   position: absolute;
   right: -15px;
   width: 30px;
   height: 30px;
   border-radius: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   top: -15px;
   opacity: 1 !important;
   color: #fff;
   background: linear-gradient(90deg, rgba(203,103,255,1) 0%, rgba(29,205,254,1) 100%);
   z-index: 1;
   box-sizing: border-box;
}

.CloseBtn i {
   font-size: 16px;
   color: #fff;
}

.modal-content .modal-body {
   padding: 30px;
}

.modal-content {
   border-radius: 15px;
   margin: 0 10px;
}

.InstaFeedsGrid .eui-widget-title {
   display: none !important;
}

.bgcoverwithoverlay:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
   /*background: rgb(68 68 68 / 70%);*/
}

.bgcoverwithoverlay {
   position: relative;
   display: flex;
   align-items: center;
}

.f-44 {
   font-size: 44px !important;
}

.InnerListing input[type="radio"]+label {
   display: block;
   position: relative;
}

.PirceBar {
   background: #fff;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px #ccc;
   cursor: pointer;
}

.PriceRange h4 {
   font-size: 24px;
   font-weight: 600;
   margin: 0;
   color: var(--text-dark) !important;
}

.CustomPackageBar .PriceRange h4 {
   font-size: 20px;
}

.PlanName h4 {
   font-size: 16px;
   font-weight: 600;
   color: var(--text-dark) !important;
}

.PlanName {
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 10px;
}

.SaveBar {
   padding: 7px 10px;
   display: flex;
   background: rgb(203 103 255 / 20%);
   font-size: 12px;
   border-radius: 30px;
   justify-content: center;
   align-items: center;
   width: 95px;
   color: var(--text-dark) !important;
}

.CheckBox {
   display: flex;
   align-items: center;
   gap: 30px;
}

.RadioCheck {
   display: block;
   width: 28px;
   height: 28px;
   border-radius: 100%;
   border: 1px solid #ccc;
   position: relative;
}

.InnerListing input[type="radio"] {
   display: none;
}

.InnerListing input[type="radio"]:checked~label .PirceBar {
   background-color: var(--bg-primary);
   color: var(--text-white);
   cursor: pointer;
}

.InnerListing input[type="radio"]:checked~label .PirceBar .SaveBar {
   background-color: var(--bg-secondary);
}

.active .PirceBar .RadioCheck {
   background: var(--text-white);
   border: none !important;
}

.active .PirceBar .RadioCheck:after {
   content: "\f00c";
   font-family: 'FontAwesome';
   color: var(--bg-primary);
   display: flex;
   justify-content: center;
   align-items: center;
   bottom: 0;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
}

.PlanList {
   display: flex;
   justify-content: center;
   width: 100%;
   flex-direction: column;
   gap: 15px;
}

.PlanDetails {
   background: #fff;
   border-radius: 15px;
   text-align: center;
   padding: 60px;
   height: 100%;
   position: relative;
   box-shadow: 0 0 10px #ccc;
}

.CustomPackage-form {
   margin-top: 30px;
   text-align: left;
}

.PlanListDetails ul {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 15px;
}

.IconBlub {
   margin-bottom: 20px;
}

.TitleAndPrice h1 {
   margin: 20px 0px;
   font-weight: bold;
   font-size: 40px;
   color: var(--bg-primary);
}

.GetQuote {
   position: absolute;
   bottom: 60px;
   left: 0;
   right: 0;
}

.GetQuoteHeader {
   background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, var(--bg-secondary), var(--bg-primary));
}

#GetQuoteLabel {
   font-size: 24px;
   font-weight: 600;
   color: #fff;
}

.CloseBtnCus {
   width: 30px;
   height: 30px;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 100%;
   box-shadow: 0 0 10px #444;
   cursor: pointer;
}

.CloseBtnCus button {
   padding: 0 !important;
   margin: 0 !important;
   opacity: 1;
   font-size: 12px;
}

.BecomaForm {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 5px 10px #ccc;
   padding: 30px;
}

.HeadingBlock h2 {
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 10px !important;
}

.InnerFormBlocks {
   margin-top: 20px;
   background: #fff;
   border-radius: 10px;
   border: 1px solid #CED4DA;
   padding: 30px;
}

.stylenote {
   font-size: 14px;
   font-style: italic;
}

.customtoggle {
   height: 40px;
   width: 40px !important;
   padding: 0 !important;
   min-width: 40;
   min-height: 40px;
}

.offcanvas {
   background: #25262A;
   border: none;
   color: #fff;
}

.SideBarMenus li {
   background: #25262A;
   margin-bottom: 10px;
}

ul.SideBarMenus li a {
   padding: 13px 20px;
   color: #fff;
   display: block;
}

a.SideBarActive {
   background: #2F3036;
}

.BottomMenu li {
   background: #2F3036;
}

.BottomMenu li a {
   padding: 13px 20px;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.nav-link {
   border-radius: 10px !important;
   background: transparent;
}

.active .PlanName h4 {
   color: var(--text-white) !important;
}

.active .PriceRange h4 {
   color: var(--text-white) !important;
}

.active .SaveBar {
   color: var(--text-white) !important;
   background-color: var(--bg-secondary);
}

.active .PirceBar {
   background-color: #7837da;
}

/* reward popup  */

.rewardsInfo {
   text-align: center;
   padding: 0 30px;
   border-right: 1px solid #ccc;
}

.rewardsInfo h2 {
   font-size: 24px;
   color: #cb67ff;
}

.rewardsInfo h5 {
   font-size: 14px;
}

.rewardsInfo img {
   width: 70%;
   margin: 30px 0;
}

.rewardsFields h3 {
   margin: 0 0 20px;
}

.rewardsFields .form-group {
   margin-bottom: 20px;
}

.rewardsFields .ThemeBtn {
   width: 100%;
}

.rewardsFields {
   text-align: center;
   padding: 0 30px;
}

.rewards-meter {
   display: none;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 30px;
   text-align: center;
}

.show-rewardsMeter .rewards-meter {
   display: flex;
}

.show-rewardsMeter .rewardsFields {
   display: none;
}

/* reward popup end  */

/* reward meter  */

.rewardsTitle h3 {
   margin: 0 0 15px;
   color: var(--text-primary);
}

.rewardsBlock {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 180px;
	border-radius: 50%;
}

.rewardsBlock .box {
	position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   width: calc(100% - 28px);
   height: calc(100% - 28px);
   border-radius: 50%;
   background-color: #fff;
}

.rewardsBlock .box::before {
	position: absolute;
	content: '';
	width: calc(100% + 28px);
	height: calc(100% + 28px);
	border-radius: 50%;
	border: 20px solid #eee;
}

.rewardsBlock .box .number {
   margin: 0;
}

.rewardsBlock .box .number span {
	color: var(--text-dark);
}

.rewardsBlock .box .number .num {
	font-size: 35px;
	font-weight: bold;
}

.rewardsBlock .box .number .sub {
	font-size: 20px;
}

.rewardsBlock .box .title {
	font-size: 15px;
	color: var(--text-dark);
}

.rewardsBlock .dots {
	display: block;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: 2s transform, 2s opacity ease;
}

/* .dots::after {
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	top: 5px;
	left: 50%;
	border-radius: 50%;
	background-color: var(--bg-dark);
	transform: translateX(-50%);
} */

.rewardsBlock .svg {
	position: absolute;
	width: 100%;
	height: 100%;
	fill: none;
	transform: rotate(-90deg);
}

.rewardsBlock .circle {
	stroke: url(#gradientStyle);
	stroke-width: 20px;
	stroke-dasharray: 503;
	stroke-dashoffset: 503;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	transition: 2s stroke-dashoffset;
}

/* reward meter end */
.input-red-border {
   border-color: red;
}
.text-red {
   color: red;
}