body {
     	background: #0a0a0a;
     	color: #fff;
     	font-family: Onest, sans-serif;
     	margin: 0;
     	padding: 0;
     }

     .container {
     	max-width: 900px;
     	margin: 50px auto;
     	padding: 20px;
     	text-align: center;
     }

     h1 {
     	font-size: 2.5rem;
     	font-weight: bold;
     	margin-bottom: 20px;
     }

     p {
     	font-size: 1rem;
     	line-height: 1.6;
     	color: #ccc;
     	margin-top: 1rem;

     }

     .section {
     	margin-top: 40px;
     	padding: 20px;
     	background: rgba(255, 255, 255, 0.1);
     	border-radius: 8px;
     	color: white;
     }

     .payment-box {
     	margin: 8rem 0 10rem 0;
     }

     div.payment-box.section {
     	padding: 1rem 0.75rem;
     }

     .highlight {
     	color: #f4c542;
     	font-weight: bold;
     }

     .highlight-dark {
     	color: #ccc;
     }

     .hero-wrapper:has(.hero-image) {
     	min-height: 500px;
     }

     /* Call to Action */
     .cta-section {
     	text-align: center;
     	background: #292724;
     	margin-top: 5rem;
     	color: #f4c542;
     	padding: 2rem;
     }

     .box {
     	background: rgba(255, 255, 255, 0.1);
     	border-radius: 10px;
     	padding: 20px;
     	width: 300px;
     	text-align: center;
     }

     .box img {
     	width: 50px;
     	margin-bottom: 15px;
     }


     ul {
     	list-style: none;
     	padding: 0;
     }

     ul li {
     	margin: 10px 0;
     	font-size: 1rem;
     }


     .hero-wrapper {
     	display: flex;
     	position: static;
     	flex-direction: column;
     	gap: 2rem;
     	padding-top: 60px;

     }

     .content {
     	display: flex;
     	flex-wrap: wrap;
     	justify-content: center;
     	gap: 20px;
     	padding: 10rem;
     }

     .h2-yellow {
     	color: #f4c542;
     }






     .container-left {
     	max-width: 70%;
     	width: 100%;
     	margin: 0 auto;
     	padding: 0 1rem;
     	text-align: left;
     	color: black !important;
     }

     b {
     	font-weight: bold;
     	color: white;
     }

     a {
     	color: #007bff;
     	text-decoration: none;
     }

     /*    a:hover {
     	color: #08519e;
     }*/

     a.navbar__link {
     	color: #ccced3;
     }

     a.navbar__link:hover {
     	color: #ccced3;
     }

     /* Titles and subtitles */
     .section__title {
     	font-size: 3.5rem;
     	font-weight: bold;
     	color: white;
     	margin: 4rem 0;
     	line-height: 1;
     }

     .section__subtitle {
     	font-size: 2.25rem;
     	margin: 4rem 0 2rem;
     	color: #fdb72b;
     }

     .section__description p {
     	font-size: 1.25rem;
     	margin-bottom: 1rem;
     	text-align: left;
     	color: white;
     }

     /* List styles */
     ul {
     	list-style-type: disc;
     	margin: 2rem 0;
     	color: white;
     	font-size: 1.25rem;
     }


     ul.ul-none {
     	list-style-type: none;
     }

     p.text-secondary,
     p.text-title {
     	color: white;
     	font-size: 1.25rem;
     	margin-bottom: 1rem;
     }


     .list {
     	list-style-type: disc;
     	margin: 1.5rem 0;
     }

     ::marker {
     	color: #d1d5db;
     }


     li.list-item {
     	margin: 2rem;
     }

     .quote {
     	color: white;
     	text-align: center;
     }


     @media (max-width: 768px) {
     	.section__title {
     		font-size: 2.25rem;

     	}

     	.section__description p,
     	p.text-secondary,
     	p.text-title {
     		font-size: 1rem;
     	}

     	h1 {
     		font-size: 2.2rem;
     	}

     	p {
     		font-size: 1rem;
     	}

     }

     section-number--yellow {
     	--main-color: var(--primary-color);
     }


     .section-number {
     	width: 50px;
     	height: 50px;
     	border: 2px dashed #ffcc00;
     	display: inline-flex;
     	align-items: center;
     	justify-content: center;
     	font-size: 24px;
     	font-weight: bold;
     	margin-right: 10px;
     }




     .container {
     	max-width: 1100px;
     	margin: 50px auto;
     	padding: 20px;
     	text-align: center;
     }



     .feature-block {
     	background: #1a1a1a;
     	padding: 30px;
     	margin: 20px 0;
     	border-radius: 10px;
     	box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
     	text-align: center;
     }

     .feature-block.dark {
     	background: #222;
     	color: white;
     }

     .icon {
     	font-size: 2.5rem;
     	margin-bottom: 15px;
     	color: #f4c542;
     	display: inline-flex;
     	height: auto;

     	border: none;
     	box-shadow: none;
     	background: none;
     }

     .icon {
     	color: #f4c542 !important;
     	fill: #f4c542 !important;
     	stroke: #f4c542 !important;
     	width: 50px !important;
     	height: auto !important;

     }

     .stats-section {
     	background: #111;
     	padding: 40px;
     	border-radius: 10px;
     	text-align: center;
     }

     .stats-grid {
     	display: flex;
     	justify-content: center;
     	flex-wrap: wrap;
     	gap: 20px;
     	margin-top: 20px;
     }

     .stat-card {
     	background: #222;
     	padding: 20px;
     	border-radius: 10px;
     	text-align: center;
     	width: 250px;
     	box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
     }

     .stat-card h3 {
     	font-size: 2rem;
     	color: #f4c542;
     }


     /* page self checkout  */
     .checkout-section {
     	max-width: 1200px;
     	margin: auto;
     	padding: 120px 20px;
     }

     .checkout-section h2 {
     	font-size: 2rem;
     	color: white;
     	font-weight: bold;
     	margin: 8rem 0 1rem 0;
     	text-transform: uppercase;
     	text-align: center;
     }

     /* Grid Layout */
     .feature-grid {
     	display: grid;
     	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     	gap: 20px;
     	margin-top: 20px;
     }

     /* Feature Cards */
     .feature-card {
     	background: #111;
     	padding: 20px;
     	border-radius: 10px;
     	border: 2px solid #FFD700;
     	text-align: left;
     	transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
     }

     .feature-card:hover {
     	transform: translateY(-5px);
     	background: #222;
     }

     .feature-card h3 {
     	font-size: 1.2rem;
     	color: #f4c542;
     	font-weight: bold;
     	margin-bottom: 10px;
     	display: flex;
     	align-items: center;
     }

     .feature-card h3 img {
     	width: 20px;
     	margin-right: 10px;
     }

     .feature-card p {
     	font-size: 1rem;
     	color: #ddd;
     }

     /* CTA Section */
     .cta-section-yellow {
     	margin-top: 40px;
     	padding: 30px;
     	background: linear-gradient(90deg, #f4c542, #FFA500);
     	border-radius: 10px;
     	text-align: center;
     	color: #000;
     	font-size: 1.5rem;
     	font-weight: bold;
     	transition: transform 0.3s ease-in-out;
     }

     .cta-section:hover {
     	transform: scale(1.05);
     }

     .cta-button {
     	margin-top: 20px;
     	padding: 15px 30px;
     	font-size: 1.2rem;
     	font-weight: bold;
     	background: #000;
     	color: #f4c542;
     	border: 2px solid #f4c542;
     	border-radius: 8px;
     	cursor: pointer;
     	transition: all 0.3s ease-in-out;
     	text-transform: uppercase;
     	display: inline-flex;

     }

     .cta-button:hover {
     	background: #f4c542;
     	color: #000;
     }

     .blocks-container {
     	display: flex;
     	flex-wrap: wrap;
     	justify-content: center;
     	gap: 20px;
     	padding: 40px 10px;
     }

     .feature-grid-column {
     	display: flex;
     	flex-wrap: wrap;
     	justify-content: center;
     	gap: 20px;
     	padding: 20px;
     	margin-top: 2rem;
     }


     .feature-grid-column .feature-card {
     	width: 45%;
     	min-width: 250px;
     	background: rgba(255, 255, 255, 0.1);
     	padding: 20px;
     	border-radius: 8px;
     	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     }

     .feature-card-long {
     	background: #292724;
     	padding: 15px;
     	border-left: 5px solid #f4c542;
     	margin: 2rem 0;
     	border-radius: 5px;
     }



     /* Responsive */
     @media (max-width: 768px) {
     	.feature-grid {
     		grid-template-columns: 1fr;
     	}
     }

     /* Section Styling */
     .retail-section {
     	max-width: 1200px;
     	margin: auto;
     	padding: 100px 20px;
     	text-align: center;
     	position: relative;
     }

     .retail-section h2 {
     	font-size: 2.5rem;
     	color: #ffcc00;
     	font-weight: bold;
     	margin-bottom: 50px;
     	text-transform: uppercase;
     	letter-spacing: 2px;
     	position: relative;
     	display: inline-block;
     }

     /* Floating Background Elements */
     .floating-bg {
     	position: absolute;
     	width: 200px;
     	height: 200px;
     	background: rgba(255, 204, 0, 0.3);
     	filter: blur(100px);
     	z-index: -1;
     	animation: floatAnimation 6s infinite alternate ease-in-out;
     }

     .floating-bg.one {
     	top: -50px;
     	left: -50px;
     }

     .floating-bg.two {
     	bottom: -50px;
     	right: -50px;
     }

     @keyframes floatAnimation {
     	from {
     		transform: translateY(-10px);
     	}

     	to {
     		transform: translateY(10px);
     	}
     }

     /* Grid Layout */
     .retail-grid {
     	display: flex;
     	justify-content: center;
     	gap: 30px;
     	flex-wrap: wrap;
     }

     /* Card Styling */
     .retail-card {
     	background: linear-gradient(135deg, #111, #222);
     	padding: 25px;
     	border-radius: 15px;
     	border: 2px solid rgba(255, 204, 0, 0.8);
     	width: 45%;
     	min-width: 320px;
     	text-align: left;
     	box-shadow: 0px 0px 15px rgba(255, 204, 0, 0.3);
     	position: relative;
     	transition: all 0.3s ease-in-out;
     }

     .retail-card:hover {
     	transform: scale(1.05);
     	box-shadow: 0px 0px 25px rgba(255, 204, 0, 0.6);
     	background: linear-gradient(135deg, #222, #333);
     }

     .retail-card h3 {
     	font-size: 1.5rem;
     	color: #ffcc00;
     	font-weight: bold;
     	margin-bottom: 10px;
     	display: flex;
     	align-items: center;
     }

     .retail-card h3::before {
     	content: "⚡";
     	margin-right: 10px;
     }

     .retail-card p {
     	font-size: 1rem;
     	color: #ddd;
     	line-height: 1.5;
     }

     /* Responsive */
     @media (max-width: 768px) {
     	.retail-grid {
     		flex-direction: column;
     		align-items: center;
     	}

     	.retail-card {
     		width: 100%;
     	}
     }


     @media (max-width: 768px) {
     	.container {
     		padding: 10px;
     	}

     	.hero-section h1 {
     		font-size: 2.2rem;
     	}

     	h2 {
     		font-size: 1.8rem;
     	}

     	.stats-grid {
     		flex-direction: column;
     		align-items: center;
     	}
     }



     @media (max-width: 768px) {
     	h1 {
     		font-size: 1.8rem;
     	}

     	.content {
     		grid-template-columns: 1fr;
     		padding: 1rem;
     	}
     }

     /*self-scheckout*/

     /* Section Styling */
     .checkout-section {
     	max-width: 1200px;
     	margin: auto;
     	padding: 120px 20px;
     }

     .checkout-section h2 {
     	font-size: 2rem;
     	color: white;
     	font-weight: bold;
     	margin-bottom: 20px;
     	text-transform: uppercase;
     	text-align: center;
     }

     /* Grid Layout */
     .feature-grid {
     	display: grid;
     	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     	gap: 20px;
     	margin-top: 20px;
     }

     /* Feature Cards */
     .feature-card {
     	background: #111;
     	padding: 20px;
     	border-radius: 10px;
     	border: 2px solid #FFD700;
     	text-align: left;
     	transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
     }

     .feature-card:hover {
     	transform: translateY(-5px);
     	background: #222;
     }

     .feature-card h3 {
     	font-size: 1.2rem;
     	color: #f4c542;
     	font-weight: bold;
     	margin-bottom: 10px;
     	display: flex;
     	align-items: center;
     }

     .feature-card h3 img {
     	width: 20px;
     	margin-right: 10px;
     }

     .feature-card p {
     	font-size: 1rem;
     	color: #ddd;
     }

     /* CTA Section */
     .cta-section {
     	margin-top: 40px;
     	padding: 30px;
     	background: linear-gradient(90deg, #f4c542, #FFA500);
     	border-radius: 10px;
     	text-align: center;
     	color: #000;
     	font-size: 1.5rem;
     	font-weight: bold;
     	transition: transform 0.3s ease-in-out;
     }

     .cta-section:hover {
     	transform: scale(1.05);
     }

     .cta-button {
     	margin-top: 20px;
     	padding: 15px 30px;
     	font-size: 1.2rem;
     	font-weight: bold;
     	background: #000;
     	color: #f4c542;
     	border: 2px solid #f4c542;
     	border-radius: 8px;
     	cursor: pointer;
     	transition: all 0.3s ease-in-out;
     	text-transform: uppercase;
     	display: inline-flex;

     }

     .cta-button:hover {
     	background: #f4c542;
     	color: #000;
     }

     .blocks-container {
     	display: flex;
     	flex-wrap: wrap;
     	justify-content: center;
     	gap: 20px;
     	padding: 40px 10px;
     }

     .feature-grid-four {
     	display: flex;
     	flex-wrap: wrap;
     	justify-content: center;
     	gap: 20px;
     	padding: 20px;
     	margin-top: 2rem;
     }


     .feature-grid-four .feature-card {
     	width: 45%;
     	min-width: 250px;
     	background: rgba(255, 255, 255, 0.1);
     	padding: 20px;
     	border-radius: 8px;
     	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     }

     .feature-card-long {
     	background: #292724;
     	padding: 15px;
     	border-left: 5px solid #f4c542;
     	margin: 2rem 0;
     	border-radius: 5px;
     }



     /* Responsive */
     @media (max-width: 768px) {
     	.feature-grid {
     		grid-template-columns: 1fr;
     	}
     }




     h4 {
     	color: #f4c542;
     	border-bottom: 2px solid #f4c542;
     	padding-top: 3rem;
     	padding-bottom: 0.75rem;
     	font-size: 1.25rem;
     }

     a {
     	color: #f4c542;
     }

     p,
     b {
     	color: #fff;
     	line-height: 1.6;
     }

     .section {
     	margin-bottom: 20px;
     	padding: 10px;

     }




     /*prvacy policy*/

     td {
     	font-size: 12px;
     	color: white;
     }

     b {
     	color: white;
     }

     strong {
     	color: white;
     }

     li {
     	color: white;
     }



     ul {
     	color: white;
     }

     .contentBox {
     	color: white;
     	font-size: 1rem;
     	font-style: normal;
     	font-weight: 400;
     	line-height: 150%;
     	letter-spacing: -0.02rem;
     	margin-top: 0.5rem;
     	margin-bottom: 0.5rem;
     	color: white;
     }

     .caseTitle {
     	margin-top: 1.5rem;
     	margin-bottom: 1.5rem;
     	color: #f4c542;
     	border-bottom: 2px solid #f4c542;
     	padding-bottom: 0.75rem;
     }



     mark,
     .contentBox>li>a,
     .contentBox>a {
     	color: #f4c542;
     	text-decoration: underline;
     }

     .moreBtn {
     	align-self: center;
     	margin-top: 2rem;
     	margin-bottom: 2rem;
     	padding: 1rem 1.5rem;
     }

     th,
     td {
     	border: 1px solid white;
     	padding: 8px;
     }


     .hero {
     	background-blend-mode: darken;
     	background-repeat: no-repeat;
     	background-size: cover;
     	margin-bottom: 2rem;
     	padding: 8rem;
     }


     .contentBox>ul {
     	list-style-position: inside;
     	list-style-type: disc;
     }

     .contentImage {
     	max-width: 650px;
     	min-width: 500px;
     	align-self: center;
     }

     .contentBox>ul>li {
     	margin-left: 1.5rem;
     }

     @media only screen and (max-width: 480px) {
     	.title--xlarge {
     		font-size: 3rem;
     	}

     	.hero {
     		padding: 3rem;
     	}
     }

     @media only screen and (max-width: 376px) {
     	.title--xlarge {
     		font-size: 2rem;
     	}

     	.hero {
     		padding: 2rem;
     	}
     }