.gamified {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Gamified-Loyalty-cover.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.winning {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Winning-Loyalty-cover.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.strong {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Strong-Loyalty-cover.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.digital {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Digital-Loyalty-cover.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.smart {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Smart-Loyalty-cover.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.build {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Build-Loyalty-cover.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.mechanic {
    /* background-image: url(); */
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/mechanicloyalty.webp);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.Scanbar {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/san-barcode.webp);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.retailer {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/retailer-loyalty.webp);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.influencer {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/influencer.webp);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.digital1 {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Digital-Wallet-bg.webp);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.fool-proof {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/foolproof.webp);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}


.train-influencer{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Train-and-reward-bg.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}


.maximize-influencer{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/incentives-to-influencers-bg.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.dealer-engagement{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/dealer-engagement.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}

.carpenter-loyalty{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/carpenter-loyalty.png);
    height: 300px;
    background-size: 100%;
    border-radius: 16px;
    width: 94%;
}


.multi-trade-loyalty{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/multi-trade-loyalty.png);
    height: 300px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}


.bottom-right {
    height: 100%;
    align-items: flex-end;
    display: flex;
    justify-content: flex-end;
    padding: 0 12px 12px 0;
    color: #fff;
    margin: 0px;
    font-size: 12px;
    text-decoration: underline;
}

.maxi {
    padding: 0 0 3px 6px;
}

.webstories:hover {
    transform: scale(1.05);
}

@media (min-width:320px) and (max-width:920px) {

    .gamified {
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Gamified-Loyalty-cover.png);
        height: 400px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .winning {
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Winning-Loyalty-cover.png);
        height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .strong {
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Strong-Loyalty-cover.png);
        height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .digital {
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Digital-Loyalty-cover.png);
        height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .build {
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Build-Loyalty-cover.png);
        height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .smart {
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Smart-Loyalty-cover.png);
        height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .mechanic {
        /* background-image: url(); */
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/mechanicloyalty.webp);
        height: 400px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .Scanbar {
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/san-barcode.webp);
        height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .retailer {
        background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/retailer-loyalty.webp);
        height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
    }

    .influencer {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/influencer.webp);
   height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}

.digital1 {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Digital-Wallet-bg.webp);
    height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}

.fool-proof {
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/foolproof.webp);
    height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}

.train-influencer{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/Train-and-reward-bg.png);
    height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}


.maximize-influencer{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/incentives-to-influencers-bg.png);
    height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}

.dealer-engagement{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/dealer-engagement.png);
    height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}

.carpenter-loyalty{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/carpenter-loyalty.png);
    height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}


.multi-trade-loyalty{
    background-image: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(255 255 255 / 0%), rgb(41 41 41)), url(/web-story/images/multi-trade-loyalty.png);
    height: 520px;
        background-size: 100%;
        border-radius: 16px;
        width: 88%;
}


}



/* Pagitnation blogs */

li.page-item {
    margin: 0 6px;
    width: 36px;
}

.page-item.active .page-link1:active {
	z-index: 3;
	color: #0d6efd;
	background-color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	width: 65px;
	border-radius: 4px;
	border: 1px solid #0d6efd;
}

.page-link1 {
    position: relative !important;
    display: block !important;
    color: #0f0f0f !important;
    text-decoration: none !important;
    border: 1px solid #007fff !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !important;
    background: none !important;
    font-size: 14px;
    font-weight: 600;
    width: 38px;
    border-radius: 4px;
    padding: 4px 4px;
}

.page-link1:hover{
	color: #ffffff
}

li.page-item.current-page.active {
    background: #0d6efd;
    border-radius: 4px;
    border: none !important;
    padding: 0px 0;
    width: 40px;
}

.page-item:not(:first-child) .page-link1 {
	margin-left: 1px !important;
}

li.page-item.current-page:hover {
    background: #0862e7;
    border-radius: 4px;
    width: 40px;
	padding: 0px 0;
}

li.page-item.previous-page.disable:hover {
		background: #0862e7;
		border-radius: 4px;
		padding: 0px 0;
		width: 40px;
}

li.page-item.previous-page:hover {
	background: #0862e7;
	border-radius: 4px;
	width: 40px;
    padding: 0 0;
}
.style-type-here{
	display: flex;
    justify-content: center;
}

li.page-item.next-page:hover {
    background: #0862e7;
    border-radius: 4px;
    padding: 0px 0;
    width: 40px;
}
.style-pagination{
	display: flex;
    justify-content: center;
}

li.page-item.next-page.disable:hover {
	background: #0862e7;
	border-radius: 4px;
}

.pageblogin {
	padding: 36px 0 18px 0;
}


.list-item {
	padding: 10px 0;
}

.backgroundshadow {
	background-color: #111;
	
	border-radius: 6px;
	padding: 10px 12px 10px 12px !important;
	height: 100% !important;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.backgroundshadow1 {
	background-color: #111;
	
	border-radius: 6px;
	padding: 10px 12px 10px 12px !important;
	height: 100% !important;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.backgroundshadow1:hover {
	transform: scale(105%);
}

.buttom-item {
	margin-top: auto;
}

.list-item {
	display: flex;
	justify-content: center !important;
}

/* pagination blogs end */