#header-menu-container{
colour: white;
}


.css-124nomk-view--inlineBlock-baseButton{
color: white !important;
}

.custom-homepage-tile-wrapper {
    display: grid; /* Makes this wrapper a grid container */
    grid-template-columns: repeat(4, 1fr); /* Creates 4 columns of equal width */
    gap: 20px; /* Adds 20px space between grid items (your custom cards) */
    /* You might want to add some top/bottom margin to this wrapper if it needs
       to separate itself from other content within #listings */
    margin-top: 20px; /* Example */
    margin-bottom: 20px; /* Example */
}

#topnavbar {
color: white !important;}

#header-menu-container a {
color: white !important;  

}




/* Styles for your individual custom tiles (they are now grid items of the wrapper) */
/* This class should already be on your tiles from the JS */
.custom-homepage-tile {
    background-color: white;
    text-align: center;
    /* text-color: inherit; <-- This is incorrect. Use 'color' for text. */
    font-family: inherit;

}

.custom-homepage-tile h3 {
    margin-top: 10;
    margin-bottom: 10;
    /* Or set specific values if you want space, e.g., margin-bottom: 10px; */
}
.custom-homepage-tile p {
    margin-top: 0;
    margin-bottom: 0;
}



/* --- NEW RULE TO MAKE LINKS BLACK --- */
.custom-homepage-tile a {
    color: black; /* Sets the default color of the link text to black */
    text-decoration: none; /* Optional: Removes the default underline from links */
}

/* Optional: To handle visited links (if you want them black too) */
.custom-homepage-tile a:visited {
    color: black;
}

/* Optional: To handle hover state (if you want them black on hover or a different color) */
.custom-homepage-tile a:hover {
    color: #333; /* Slightly darker black on hover, or you can keep it 'black' */
    text-decoration: underline; /* Add underline back on hover for feedback */
}

/* Ensure images inside your custom tiles are responsive */
.custom-homepage-tile img {
    max-width: 100%;
    height: auto; /* Prevent distortion */
    display: block; /* Remove extra space below images */
}


To make your tiles responsive for phones, you'll use CSS Media Queries. Media queries let you apply different CSS rules based on the characteristics of the device, like screen width.

Here's how you can modify your CSS to have your tiles adjust for smaller screens:

Making Tiles Responsive with Media Queries
The core idea is to change the grid-template-columns property of your .custom-homepage-tile-wrapper for different screen sizes. A common approach is to start with a desktop layout and then progressively reduce the number of columns as the screen size gets smaller.

CSS

.custom-homepage-tile-wrapper {
    display: grid;
    /* Default for larger screens: 4 columns */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Styles for your individual custom tiles (they are now grid items of the wrapper) */
.custom-homepage-tile {
    background-color: white;
    text-align: center;
    font-family: inherit;
}

/* Link styling */
.custom-homepage-tile a {
    color: black;
    text-decoration: none;
}

.custom-homepage-tile a:visited {
    color: black;
}

.custom-homepage-tile a:hover {
    color: #333;
    text-decoration: underline;
}

/* Image responsiveness */
.custom-homepage-tile img {
    max-width: 100%;
    height: auto;
    display: block;
}

---

/* Media Queries for Responsiveness */

/* Adjust for medium-sized screens (e.g., tablets in landscape, small desktops) */
@media (max-width: 1024px) {
    .custom-homepage-tile-wrapper {
        grid-template-columns: repeat(3, 1fr); /* Change to 3 columns */
        gap: 15px; /* Optionally reduce gap */
    }
}

/* Adjust for smaller tablets (portrait) and larger phones (landscape) */
@media (max-width: 768px) {
    .custom-homepage-tile-wrapper {
        grid-template-columns: repeat(2, 1fr); /* Change to 2 columns */
        gap: 15px;
    }
}

/* Adjust for most phones (portrait) */
@media (max-width: 480px) {
    .custom-homepage-tile-wrapper {
        grid-template-columns: repeat(1, 1fr); /* Change to 1 column */
        gap: 10px; /* Optionally reduce gap further */
    }
}



.hidden-element {
    display: none !important; /* !important ensures it overrides other styles */
    visibility: hidden !important; /* Good to include for older compatibility/edge cases */
    opacity: 0 !important; /* For smooth transitions if you had them */
    pointer-events: none !important; /* Prevents interaction even if visually hidden */
    height: 0 !important;
    overflow: hidden !important;
}

.search-categories-button + span { display: none;} 




.css-j0078w-card-CardLink.e1u8c2d0 {
background-color: white;
}

.css-be2ist-baseButton__content {  

background: rgb(89, 44, 130) !important;  
border-color: rgb(89, 44, 130) !important;  

}  

  

   

  

.css-1ptnyof-view--block-baseButton::before {border-color: rgb(89, 44, 130) !important;}  

  

   

  

a.css-1cps253-view-link {color: white !important;}  

  
body {background-color:#f0f0f0;}
   

  

#app-header {  

  

    /*background-color: #f1f1f1;*/  

  

    background: rgb(63,43,86);  

  

    background: linear-gradient(90deg, rgba(63,43,86,1) 0%, rgba(89,44,130,1) 100%);  

  

    padding: 0 !important;  

  

}  

  

   

  

.css-1k0d0uu-baseButton__content {  

  

    border-top-left-radius: 3px 3px !important;  

  

    border-top-right-radius: 3px 3px !important;  

  

    border-bottom-right-radius: 0px 0px !important;  

  

    border-bottom-left-radius: 0px 0px !important;  

  

    background-color: b !important;  

  

}  

  

   

  

.css-1h1s81r-view--inlineBlock-baseButton:hover > [class$="-baseButton__content"] {  

  

    background-color: #E2DEE5 !important;  

  

}  

  

   

  

.css-13fhe5b-topNavBarItem__container::after {  

  

    background: rgb(63, 43, 86) !important;  

  

}  

  

   

  

.feature-region {display:none !important ;}  

  

   

  

.css-1cps253-view-link a {color: white !important ;}  

  

   

  

.css-1cps253-view-link:-webkit-any(button) {  

  

    color: white !important ;  

  

}  

  

   

  

.css-1cps253-view-link:-webkit-any(button):hover {  

  

    color: #E2DEE5 !important ;  

  

}  

  

   

  

.css-1cps253-view-link:-webkit-any(button):focus {  

  

    outline-color: white !important ;  

  

}  

  

   

  

.header-branding div {  

  

    margin-bottom: 20px !important;  

  

}  

  

   

  

.css-1h1s81r-view--inlineBlock-baseButton {  

  

    color: rgb(63, 43, 86) !important;  

  

}  

  

   

  

/**Course cards**/  

  

   

  

.jqFlag { border-top: 75px solid rgb(89, 44, 130) !important;}  

  

   

  

.product-flag-free {  

  

    background-color: #592C82 !important;  

  

}  

  

   

  

.ProductIcon__LargeCircle--course {  

  

    background: #592C82;  

  

}  

  

   

  

.product-tile .product-footer, .product-dates, .product-price {  

  

    color: #592C82 !important;  

  

}  

  

   

  

.product-tile .product-footer .learn-more:before {  

  

    color: #592C82 !important;  

  

}  

  

   

  

.product-account-image-wrapper {display: none !important;}  

  

   

  

.product-tile:before {  

  

    border: 2px solid #592C82 !important;  

  

}  

  

   

  

.css-16bys8g-topNavBarDesktopLayout {background-color: white !important;}  

  

   

  

//#listings > div.row > div > span { display: none }
 // Hide default "There are no courses or programs to display." message  

  

   

  

.css-1mstt4z-view, page.locator('[data-testid="user-menu"]') { color: white !important ;}  

  

#cart {
colour: white
 !important;
background-colour: white !important;
} 


#listings > div.row > div > span { display: none } // Hide default "There are no courses or programs to display." message  
  

.css-oipmok-view {color: white !important;} 

.css-1efdoy6-view-link {color: white !important;}