.loyalty-hero-section {
    color: var(--clr-white);
    overflow: hidden;
    position: relative;
    min-height: 600px;
}

/* New rules to make the picture element behave like a background */
.loyalty-hero-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Sit behind the content */
}

.loyalty-hero-picture .loyalty-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.loyalty-hero-content {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: var(--space-5);
    z-index: 2;
    /* Sit on top of the image */
}

.loyalty-hero-button {
    display: inline-block;
    background-color: var(--clr-primary);
    color: var(--clr-white);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-weight: var(--fw-light);
    letter-spacing: 2px;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-speed);
}

.loyalty-hero-button:hover {
    background-color: var(--clr-secondary);
    color: var(--clr-white);
}

.loyalty-ticker-ribbon {
    border-top: 1px solid var(--clr-primary);
}


/* Responsive Styles */
@media (max-width: 992px) {
    .loyalty-hero-section {
        min-height: 600px;
        /* A smaller height for mobile */
    }
}

/*
==========================================================================
## Loyalty How It Works Section
==========================================================================
*/
.loyalty-how-it-works-section {
    background-color: var(--clr-white);
}

.how-it-works-intro {
    padding: var(--space-6) 0;
    text-align: center;
}

.ways-to-earn-outro {
    text-align: center;
    margin-top: var(--space-6);
}

.how-it-works-main-title {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--clr-gray-700);
    margin: 0 0 var(--space-3);
}

.how-it-works-main-subtitle {
    font-family: var(--font-headings);
    font-size: 1rem;
    color: var(--clr-text);
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.7;
}

.how-it-works-grid-wrapper {
    background-color: var(--clr-primary);
    color: var(--clr-white);
    padding: var(--space-6);
}

.how-it-works-item {
    display: flex;
    flex-direction: column;
    height: 100%; /* For consistent slide height */
}

.how-it-works-icon {
    height: auto;
    width: 100%;
    margin-bottom: var(--space-5);
    min-height: 100px;
    padding: var(--space-5);
}

.how-it-works-icon img {
    width: 100%;
    height: auto;
}

.how-it-works-title {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: 1.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--clr-white);
    margin: 0 0 var(--space-3);
}

.how-it-works-desc {
    font-family: var(--font-headings);
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
    flex-grow: 1;
    /* Pushes the link to the bottom if present */
}

.how-it-works-desc p:last-child {
    margin-bottom: 0;
}

.how-it-works-link {
    display: inline-block;
    margin-top: var(--space-3);
    color: var(--clr-white);
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.how-it-works-link:hover {
    color: var(--clr-secondary);
}

/* --- Mobile Slider Styles (Default) --- */
#loyalty-how-it-works-slider .splide__pagination {
    position: static;
    margin-top: var(--space-5);
}

#loyalty-how-it-works-slider .splide__pagination__page {
    background: rgba(255, 255, 255, 0.4);
    width: 10px;
    height: 10px;
    opacity: 1;
    border: none;
    transition: all var(--transition-speed);
}

#loyalty-how-it-works-slider .splide__pagination__page.is-active {
    background: var(--clr-white);
    transform: scale(1.3);
}

/* --- Desktop Grid Styles (Override) --- */
@media (min-width: 993px) {
    #loyalty-how-it-works-slider .splide__track {
        overflow: visible;
    }

    #loyalty-how-it-works-slider.is-initialized .splide__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
        text-align: left;
    }
    
    #loyalty-how-it-works-slider .splide__pagination {
        display: none;
    }
}


/* Responsive Styles */
@media (max-width: 992px) {
    .how-it-works-item {
        text-align: left;
    }

    .how-it-works-icon img {
        margin: 0 auto;
        display: block;
    }
}

/*
==========================================================================
## Loyalty Ways to Earn Section
==========================================================================
*/
.loyalty-ways-to-earn-section {
    padding: var(--space-6) 0;
    background-color: var(--clr-white);
}

.ways-to-earn-intro {
    text-align: center;
    margin-bottom: var(--space-6);
}

.ways-to-earn-main-title {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--clr-gray-700);
    margin: 0 0 var(--space-3);
}

.ways-to-earn-main-subtitle {
    font-family: var(--font-headings);
    font-size: 1rem;
    color: var(--clr-text);
    max-width: 1000px;
    margin: 0 auto;
    line-height: 1.7;
}

.ways-to-earn-item {
    display: flex;
    align-items: center;
    background-color: var(--clr-bg);
}

.ways-to-earn-item:last-child {
    margin-bottom: 0;
}

/* Modifier to reverse the order for the second item */
.ways-to-earn-item--reverse {
    flex-direction: row-reverse;
}

.ways-to-earn-image {
    flex: 1 1 50%;
    line-height: 0;
}

.ways-to-earn-image img {
    width: 100%;
    height: auto;
    display: block;
}

.ways-to-earn-content {
    flex: 1 1 50%;
    padding: var(--space-5) var(--space-6);
}

.ways-to-earn-eyebrow {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    color: var(--clr-gray-500);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 var(--space-2);
}

.ways-to-earn-title {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--clr-gray-700);
    margin: 0 0 var(--space-4);
}

.ways-to-earn-desc,
.ways-to-earn-features {
    font-family: var(--font-headings);
    font-size: 1rem;
    color: var(--clr-text);
    line-height: 1.7;
}

.ways-to-earn-desc p:last-of-type {
    margin-bottom: var(--space-4);
}

.ways-to-earn-features ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 var(--space-5);
}

.ways-to-earn-features li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: var(--space-2);
}

.ways-to-earn-features li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--clr-primary);
    font-weight: var(--fw-bold);
}

.ways-to-earn-button {
    display: inline-block;
    background-color: var(--clr-primary);
    color: var(--clr-white);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-weight: var(--fw-light);
    letter-spacing: 2px;
    border-radius: 0;
    transition: all var(--transition-speed);
}

.ways-to-earn-button:hover {
    background-color: var(--clr-secondary);
}

/* Responsive Styles */
@media (max-width: 992px) {

    .ways-to-earn-item,
    .ways-to-earn-item--reverse {
        flex-direction: column;
        gap: 0;
    }
	.ways-to-earn-intro{
		padding:var(--space-4);
	}

    .ways-to-earn-content {
        padding: var(--space-5);
		text-align:center;
    }
	.how-it-works-main-title{
		font-size:1.6rem;	
	}
	.how-it-works-main-subtitle, .ways-to-earn-main-subtitle, .ways-to-earn-features, .ways-to-earn-desc{
		font-size:0.9rem;
	}
	
	.how-it-works-icon{
		height:auto;
		width:80%;
		margin: 0 auto;
	}
	.how-it-works-grid-wrapper {
		padding:0;
	}
	
	.how-it-works-grid-wrapper .container{
		padding-right:0;
		padding-bottom:20px;
	}
	
	.loyalty-ways-to-earn-section .container{
		padding:0;
	}
	
	.loyalty-hero-content{
		display:flex;
		justify-content:center;
		width:100%;
	}
}
.ways-to-earn-button.pink-button {
    background-color: var(--clr-secondary); /* Pink background */

}

.ways-to-earn-button.pink-button:hover {
    background-color: var(--clr-primary); 
	color:var(--clr-white)
}

.loyalty-ways-to-earn-section .container{
	padding:0;
}