nav ul li.joinNow a {
    background-color: var(--buttonBackground);
    color: var(--buttonTextColor);
}

nav ul li.joinNow a:hover {
    background-color: var(--buttonHoverBackground);
    color: var(--buttonHoverTextColor);
}

.viewAll {
    background-color: var(--buttonBackground);
    color: var(--buttonTextColor);
}

.viewAll:hover {
    background-color: var(--buttonHoverBackground);
    color: var(--buttonHoverTextColor);
}

.welcome p {
    color: #B4FFB3;
}

.welcome a {
    color: var(--mainColor);
}

.welcome a:hover {
    color: #24ff30;
}

footer {
    border-top: 2px solid var(--mainColor);
}

.fLinks a {
    color: var(--mainColor);
}

.fLinks a:hover {
    color: #24ff30;
}

.copyrights a {
    color: #12b21f;
}

.copyrights a:hover {
    color: var(--linkHoverColor);
}

.copyrights {
    color: var(--linkHoverColor);
}

a.termsAndConditions {
    color: var(--linkHoverColor);
}

.joinTerms a {
    color: var(--linkHoverColor);
}

header {
    background-color: var(--bodyBackgroundColor);
}

.welcome {
    background-color: var(--bodyBackgroundColor);
}

.continueS {
    color: var(--lightText);
    background-color: var(--mainColor);
    border: 2px solid var(--mainColor);
}

.continueS:hover {
    background-color: var(--buttonHoverBackground);
    color: var(--buttonHoverTextColor);
}

.proceedCheckOut, .loginButton, .joinButton {
    background-color: var(--buttonBackground);
    color: var(--buttonTextColor);
}

.proceedCheckOut:hover, .loginButton:hover, .joinButton:hover {
    background-color: var(--buttonHoverBackground);
    color: var(--buttonHoverTextColor);
}

.contentInfo li a:hover {
    color: var(--buttonHoverBackground);
}

.pagination a {
    border-color: var(--mainColor);
    background-color: var(--mainColor);
    color: #111;
}

.pagination a:hover,
.pagination a.active {
    border-color: #1bbf22;
    background-color: #1bbf22; /* Brighter neon-green */
    color: #000000;            /* Dark text for contrast */
}

.alphabet-navigation a.linkable {
    border-color: var(--mainColor);
    color: #111;
}

.alphabet-navigation span.non-linkable {
    color: var(--lightText);
    opacity: 0.6;
}

.alphabet-navigation a.linkable, .alphabet-navigation span.non-linkable {
    color: var(--lightText);
}

.alphabet-navigation a.linkable:hover {
    color: #111;
    background-color: #24ff30;
}

/************ ************ ************ ************ */
/* sliders */

.splide__arrow {
    background: #111;
}

.library .splide__arrow {
    top: 40%;
    background: var(--lightText);
}

.library .splide__arrow svg {
    fill: var(--mainColor);
}

/* Wrapper section for the information */
.info-section {
    background-color: #000;
    color: var(--lightText);
    padding: 20px;
    font-family: Arial, sans-serif;
    text-align: center;
}

/* Individual blocks for content */
.info-block {
    margin-bottom: 40px;
}

/* Headings within the section */
.info-heading {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #adff2f;
}

/* Highlighted subheadings or important text */
.highlight {
    color: #05FF03;
    font-style: italic;
    font-size: 1.2em;
}

.sub-highlight {
    color: #ccffcc;
    font-size: 1.1em;
    font-weight: bold;
}

/* Social media and contact sections */
.social-media img {
    max-width: 128px;
    height: auto;
    margin: 10px auto;
}

.info-contact img {
    vertical-align: middle;
    margin-top: 10px;
}

/* Responsive images */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Promo images with specific sizes */
.promo-img {
    max-width: 450px;
}

/* Text styling */
.info-text {
    font-size: 1em;
    margin: 10px 0;
    line-height: 1.6;
}

.info-subtext {
    font-size: 1.1em;
    color: #aaffaa;
}

/* Links */
.link {
    color: var(--mainColor);
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

.label {
    font-weight: bold;
    color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .info-heading {
        font-size: 1.5rem;
    }

    .highlight,
    .sub-highlight {
        font-size: 1em;
    }

    .responsive-img {
        max-width: 90%;
    }

    .promo-img {
        max-width: 100%;
    }
}