.elementor-kit-3{--e-global-color-primary:#1368DE;--e-global-color-secondary:#54595F;--e-global-color-text:#2F4B73;--e-global-color-accent:#F39200;--e-global-color-791d741:#4286E5;--e-global-color-661a6cc:#FFFFFF;--e-global-color-f4e79c6:#F5F7F8;--e-global-color-1169c6f:#EF4444;--e-global-color-50d43f2:#69B651;--e-global-color-b8486e6:#F39200;--e-global-color-d2e47cc:#784C99;--e-global-color-416fa1c:#F4D84B;--e-global-typography-primary-font-family:"tt-commons-pro";--e-global-typography-primary-font-weight:900;--e-global-typography-secondary-font-family:"tt-commons-pro";--e-global-typography-secondary-font-weight:300;--e-global-typography-text-font-family:"tt-commons-pro";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"tt-commons-pro";--e-global-typography-accent-font-weight:600;}.elementor-kit-3 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1344px;}.e-con{--container-max-width:1344px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */.grecaptcha-badge { 
    visibility: hidden;
}

body{
    overflow-x: hidden;
}

html{
    font-size: 62.5%; 
    scroll-behavior: smooth;
}




/*------------------------------------*
  #EVENT-COLOUR-PALETTE
*------------------------------------*/

/* Edit these values to change each Event Type colour site-wide. */
body {
    --event-default-color: #1368DE;
    --event-holiday-camp-color: var( --e-global-color-1169c6f );
    --event-after-school-club-color: #69B651;
    --event-home-education-color: #69B651;
    --event-cricket-development-color: var(--e-global-color-primary, #1368DE);
}




/*------------------------------------*
  #TYPOGRAPHY
*------------------------------------*/

.small-text p {
	font-size: 1.4rem !important;
    line-height: 1.8 !important;
}

p, 
td,
li,
ol,
.elementor-field-label,
.e-n-menu-title-text,
.tabbed-content .e-n-tab-title-text{
    font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
    line-height: 1.7 !important;
}
p {
    padding-top: 1rem;
}
li{
    font-size: 1.6rem !important;
}
.h6-h1 h1, h6 {
	font-size: 1.4rem !important;
	line-height: 2.4rem !important;
	text-transform: uppercase;
	letter-spacing: 1.6px;
}
h5 {
	font-size: 1.8rem !important;
	line-height: 2.8rem !important;
}
h4 {
	font-size: 2rem !important;
	line-height: 3.2rem !important;
}
h3,
.e-loop-nothing-found-message__text{
	font-size: 2.8rem !important;
	line-height: 3.8rem !important;
}
.h2-h1 h1, h2 {
    font-size: clamp(2.2rem, 2.8vw, 4.6rem) !important;
    line-height: 1.2 !important;
}
.large h2{
    font-size: clamp(2.8rem, 5.4vw, 5.4rem) !important;
	line-height: 1.3 !important;
}
.hero h2{
    font-size: clamp(2.8rem, 5.4vw, 5.4rem) !important;
	line-height: 1.3 !important;
}

h1{
    font-size: clamp(2.8rem, 5.4vw, 5.4rem) !important;
    line-height: 1.2 !important;
}

.uber h1,
.uber h2{
    font-size: 6rem !important;
	line-height:6rem !important;
}
  
@media only screen and (min-width: 768px) {
    .hero h2{
	    font-size: 6rem !important;
    	line-height: 1.6 !important;
    }
    .uber h1,
    .uber h2{
        font-size: 7vw !important;
	    line-height: 8vw !important;
    }
    .uber h1,
    .uber h2{
        font-size: 7rem !important;
    	line-height: 7rem !important;
    }
}

@media only screen and (min-width: 1024px) {
    
    h5 {
    	font-size: 2.2rem !important;
    	line-height: 3.4rem !important;
    }
    h4 {
    	font-size: 2.8rem !important;
    	line-height: 3.8rem !important;
    }
    h3,
    .e-loop-nothing-found-message__text{
    	font-size: 3.2rem !important;
    	line-height: 4.2rem !important;
    }
    .hero h2{
	    font-size: 7rem !important;
    	line-height: 1.3 !important;
    }
    .uber h1,
    .uber h2{
	    font-size: 14rem !important;
    	line-height: 13rem !important;
    }

}

/*------------------------------------*
  #LIST-STYLING
*------------------------------------*/

.text li,
.elementor-widget-text-editor li{
    margin-top: 15px;
}
.text ul,
.elementor-widget-text-editor ul{
    list-style-type: none; 
    padding-left: 0;
}
.text ul li,
.elementor-widget-text-editor ul li{
    position: relative;
    padding-left: 20px;
}
.text ul li::before,
.elementor-widget-text-editor ul li::before{
    content: "•";
    color: var( --e-global-color-accent );
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}
.text ol,
.elementor-widget-text-editor ol{
    list-style-type: none; /* Remove default numbering */
    padding-left: 0; /* Remove any padding */
}
.text ol li,
.elementor-widget-text-editor ol li{
    position: relative;
    padding-left: 35px; /* Add space for custom numbers */
}
.text ol li::before,
.elementor-widget-text-editor ol li::before{
    content: counter(list-item); /* Show number followed by a dot */
    color: white; /* Change to your desired color */
    font-size: 20px; /* Adjust the size of the numbers */
    position: absolute;
    left: 0;
    top: 0;
    background: var( --e-global-color-accent );
    border-radius: 100%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.text ol,
.elementor-widget-text-editor ol{
    counter-reset: list-item; /* Start numbering from 1 */
}
.text ol li,
.elementor-widget-text-editor ol li{
    counter-increment: list-item; /* Increment counter for each list item */
}

/*
** Changing the text link colour
*/
.text a,
.small-text a,
.elementor-widget-text-editor a{
    color: var( --e-global-color-accent );
}




/*------------------------------------*
  #SPACING
*------------------------------------*/

:root {
    --padding-sm: 15px;
    --padding-md: 15px;
    --padding-lg: 30px;
    
    --margin-sm: 15px;       
    --margin-md: 15px;   
}

@media only screen and (min-width: 768px) {
    :root {
        --padding-sm: 30px;
        --padding-md: 30px;
        --padding-lg: 60px;

        --margin-sm: 30px;   
        --margin-md: 30px;  
    }
}

@media only screen and (min-width: 1024px) {
    :root {
        --padding-md: 4.1666666667vw;
        --padding-lg: 8.3333333334vw;
        
        --margin-md: 4.1666666667vw;
    }
}

/**
 * small padding
 */
.padding-sm {
    padding: var(--padding-sm);
}
.padding-lr-sm {
    padding-left: var(--padding-sm);
    padding-right: var(--padding-sm);
}
.padding-l-sm {
    padding-left: var(--padding-sm);
}
.padding-r-sm {
    padding-right: var(--padding-sm);
}
.padding-tb-sm {
    padding-top: var(--padding-sm);
    padding-bottom: var(--padding-sm);
}
.padding-t-sm {
    padding-top: var(--padding-sm);
}
.padding-b-sm {
    padding-bottom: var(--padding-sm);
}

/**
 * medium padding
 */
.padding-md {
    padding: var(--padding-md);
}
.padding-lr-md {
    padding-left: var(--padding-md);
    padding-right: var(--padding-md);
}
.padding-l-md {
    padding-left: var(--padding-md);
}
.padding-r-md {
    padding-right: var(--padding-md);
}
.padding-tb-md {
    padding-top: var(--padding-md);
    padding-bottom: var(--padding-md);
}
.padding-t-md {
    padding-top: var(--padding-md);
}
.padding-b-md {
    padding-bottom: var(--padding-md);
}

/**
 * large padding
 */
.padding-lg {
    padding: var(--padding-lg);
}
.padding-lr-lg {
    padding-left: var(--padding-lg);
    padding-right: var(--padding-lg);
}
.padding-l-lg {
    padding-left: var(--padding-lg);
}
.padding-r-lg {
    padding-right: var(--padding-lg);
}
.padding-tb-lg {
    padding-top: var(--padding-lg);
    padding-bottom: var(--padding-lg);
}
.padding-t-lg {
    padding-top: var(--padding-lg);
}
.padding-b-lg {
    padding-bottom: var(--padding-lg);
}

/**
 * small margin
 */
.margin-sm {
    margin: var(--margin-sm);
}


/**
 * medium margin
 */
.margin-md {
    margin: var(--margin-md);
}

/*
** Full height section
*/
.full-height {
    min-height: 100vh;
}

/*
** Full height section
*/
.half-height {
    min-height: 60vh;
}


/*------------------------------------*
  #BACKGROUND-IMAGE
*------------------------------------*/
/*
.background-image{
    position: relative;
}

.img-col:has(.background-image) { 
    min-height: 50vh;
}
*/

.img-col{
    overflow: hidden;
    min-height: auto;
    flex: 1;
}
    
/**
 * Sizing the image (to maintain it's ratio)
 */
.background-image:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.background-image,
.background-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.background-image img {
    object-fit: cover;
}




/*------------------------------------*
  #BTN-PRIMARY
*------------------------------------*/

.btn-primary {
    margin-top: 30px;
}

.btn-primary .elementor-button{
    background: transparent !important;
    padding: 20px 30px !important;
    border-radius: 6px;
}

.btn-secondary .elementor-button{
    background: transparent !important;
    border: 1px solid var( --e-global-color-accent );
}

/*
** Handling the overflow for the arrow icon
*/
.elementor-button .elementor-button-icon{
    position: relative;
    overflow: hidden;
}

/*
** Adding a transition effect to the arrow icon (SVG)
*/
.elementor-button .elementor-button-icon,
.elementor-button .elementor-button-icon svg {
    transition: all .6s cubic-bezier(.4, 0, .2, 1);
}

.elementor-button-text{
    z-index: 1;
}

/*
** Adding an arrow icon and transitioning it on hover
*/

.elementor-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 0;
    background: #4DD0F5;
    border-radius: 6px;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.25, 1.5, 0.5, 1.5);
}

.btn-primary:hover .elementor-button::after{
    background: var( --e-global-color-accent ) !important;
    transform: scale(0.95);
}




/*------------------------------------*
  #TEXT-IMAGE-SECTION
*------------------------------------*/

/*
** Padding for the section
*/
.text-image-container {
    padding: var(--padding-md);
    align-items: stretch;
}

.text-image .img-col {
    flex: 1;
}

/*
** Rounding the image corners
*/
.text-image .img-col,
.text-image .img-col img{
    border-radius: 24px;
}

.text-image.border-top .text-image-container{
    border-radius: var(--padding-sm) var(--padding-sm) 0 0;
}


@media only screen and (min-width: 1024px) {
    .text-image-container.border-top{
        border-radius: 48px 48px 0 0;
    }
}

@media only screen and (max-width: 767px) {
    .text-image .text-image-container{
        flex-direction: column;
    }
    .text-image .img-col {
        aspect-ratio: 1 / 0.9;
    }
}




/*------------------------------------*
  #TEXT-AND-IMAGE-GALLERY-SECTION
*------------------------------------*/

/*
** Setting the image height
*/
.img-col .swiper,
.img-col .swiper-slide,
.img-col .swiper-slide-inner,
.img-col .elementor-widget-image-carousel,
.img-col .swiper-container {
    height: 100%;
}

/*
** Sizing the image to fit the space
*/
.img-col .swiper {
    border-radius: 24px;
    overflow: hidden;
}
.img-col img{
    object-fit: cover;
    height: 100% !important;
    width: 100% !important;
    border-radius: 24px;
}

/*
** Positioning the arrows
*/
.elementor-swiper-button-prev,
.elementor-swiper-button-next {
    position: absolute !important;
    right: 16px !important;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(5px);    z-index: 99;
    width: 72px;
    height: 72px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    transition: all .6s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    border-radius: 6px;
}
.elementor-swiper-button-prev{
    left: 16px !important;
    top: 50% !important;
}

/*
** Adding the new arrow svgs
*/
.elementor-swiper-button-next:hover svg path{
    transition: all .3s cubic-bezier(.4,0,.2,1);
}

/*
** Adding the arrow background hover state
*/
.elementor-swiper-button-next:hover,
.elementor-swiper-button-prev:hover {
    background: var( --e-global-color-accent ) !important;
}

/*
** Hover state for the arrow
*/
.elementor-swiper-button-prev:hover svg path,
.elementor-swiper-button-next:hover svg path {
    fill: #fff
}
.elementor-swiper-button-next:hover:after{
    transform: translateY(4px) translateX(96px);
}

/*
** Responsive tweaks for flex wrapping
*/
@media only screen and (min-width: 768px) {
    .text-image-gallery{
        flex-wrap: wrap;
    }
}






/*------------------------------------*
  #TITLE-SECTION & TITLE-CONTAINER
*------------------------------------*/

/*
** Padding and centering the section
*/
.title-section {
    padding: var(--padding-md) var(--padding-lg) 0;
    align-items: center;
    gap: 8px;
}

.title-section .title-container{
    width: auto;
}

/*
** Sizing the icon
*/
.title-section .elementor-icon,
.title-section .elementor-icon svg{
    width: 24px !important;    
}

@media only screen and (min-width: 768px) {
    /*
    ** Padding and cenrting the section
    */
    .title-section {
        align-items: baseline;
    }
    /*
    ** Sizing the icon
    */
    .title-section .elementor-icon,
    .title-section .elementor-icon svg {
        width: 64px !important;    
    }
}




/*------------------------------------*
  #FAQ-SECTION
*------------------------------------*/

/*
** Padding and cenrting the section
*/
.faq-section .title-container{
    align-items: center;
    gap: 8px;
}

/*
** Sizing the icon
*/
.faq-section .title-container .elementor-icon,
.faq-section .title-container .elementor-icon svg {
    width: 24px !important;    
}

/*
** Sizing the icon
*/
@media only screen and (min-width: 768px) {
    .faq-section .title-container .elementor-icon,
    .faq-section .title-container .elementor-icon svg {
        width: 64px !important;    
    }
}




/*------------------------------------*
  #EVENTS
*------------------------------------*/

/*------------------------------------*
  #EVENT-BANNER
*------------------------------------*/
/*
** Sizing the banner
*/
.event-banner{
    height: auto;
    min-height: 80vh;
}

/*
** Setting the banner to be fixed
*/
.event-banner{
    justify-content: flex-end;
    padding: var(--padding-lg) var(--padding-md);
    padding-top: calc(var(--padding-lg) + 102px) !important;
    padding-bottom: var(--padding-md);
}

.event-banner .sub-title{
    max-width: 1024px !important;
}    

/*
** Styling holiday camp week no.
*/
.event-banner .summer-week{
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 4px 16px 6px 16px;
}

/*
** Styling the title text after @
*/
.event-banner .title-end{
    font-weight: 300 !important;
    font-size: clamp(2.8rem, 5.4vw, 5.4rem) !important;
    line-height: 1.2 !important;
}

.event-banner .event-details-container{
    display: flex;
    gap: 16px;
    margin-top: 24px;
    width: auto;
}

.event-banner .event-details-container .camp-dates,
.event-banner .event-details-container .daily-timings,
.event-banner .event-details-container .location {
    width: auto;
}

.event-banner .event-details-container .event-details-container-col {
    background: white;
    width: auto;
    padding: 20px 24px;
    border-radius: 8px;
    gap: 8px;
}

.event-banner .event-details-container .e-child{
    display: flex;
}

@media only screen and (min-width: 768px) {
    .event-banner .title-end{
	    font-size: 6rem !important;
    	line-height: 1.6 !important;
    }
}

@media only screen and (min-width: 1440px) {
    /*
    ** Sizing the banner title length
    */
    .event-banner .title{
        max-width: 80% !important;
    }
    /*
    ** Banner title font-size
    */
    .event-banner .title-end{
	    font-size: 7rem !important;
    	line-height: 1.3 !important;
    }
}

@media only screen and (max-width: 1023px) {

    .event-banner .event-details-container{
        flex-wrap: nowrap;
        width: 100vw;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        margin-left: calc(0px - var(--padding-lg)); 
        margin-right: var(--padding-lg);
        padding-left: var(--padding-lg); 
        padding-right: var(--padding-lg);
    }
    
    .event-banner .event-details-container::-webkit-scrollbar {
        display: none;
    }
    
    .event-banner .event-details-container .event-details-container-col {
        flex: 0 0 auto;
        min-width: auto;
    }
}



/* Event type colours — aliases use the current Elementor kit palette. */
body.event-product {
    --event-color: var(--event-default-color);
    background-color: var(--event-color) !important;
}

body.event-after-school-club {
    --event-color: var(--event-after-school-club-color);
}

body.event-holiday-camp {
    --event-color: var(--event-holiday-camp-color);
}

body.event-home-education {
    --event-color: var(--event-home-education-color);
}

body.event-cricket-development {
    --event-color: var(--event-cricket-development-color);
}

body.event-product .faq-section::before,
body.event-product .tbae-booking-section-header {
    background: var(--event-color) !important;
}

body.event-product :is(.title-section h2, .title h5) {
    color: var(--event-color) !important;
}

body.event-product :is(
    .event-details-section,
    .event-details-container-col,
    .title-section,
    .elementor-swiper-button-prev,
    .elementor-swiper-button-next
) svg path {
    fill: var(--event-color) !important;
}

body.event-product .event-details-container-col p {
    color: var(--e-global-color-text, #2F4B73) !important;
}

/* Map the event colour onto the booking module's internal colour tokens. */
body.event-product .tbae-booking {
    --tbae-blue: var(--event-color);
    --tbae-blue-dark: color-mix(in srgb, var(--event-color), #000 22%);
}

body.event-product .event-banner {
    background-color: var(--event-color) !important;
}
body.event-product .event-banner h1,
body.event-product .event-banner h5 {
    color: white !important;
}
body.event-product .text-image-container {
    border-radius: var(--padding-sm) var(--padding-sm) 0 0;
}




/*------------------------------------*
  #EVENT-DETAILS-SECTION
*------------------------------------*/

.event-details-section-container{
    padding: var(--padding-md);
    gap: var(--padding-sm);
}

.event-details-section .text-col{
    gap: var(--padding-sm);
}

.event-details-section .col-container{
    gap: var(--padding-sm);
}

/*
** Styling the boxes
*/
.event-details-section .age-restrictions,
.event-details-section .requirements{
    padding: var(--padding-md);
    background: #E8EEF6;
    border-radius: 24px;
}

/*
** Styling the pricing table
*/
.event-details-section .table-col-container {
    padding: var(--padding-md);
    background: #E8EEF6;
    border-radius: 24px;
    height: 100%;
}

.event-details-section .table-container .header-row,
.event-details-section .table-container .price-row{
    border-bottom: 1px solid rgba(0,0,0,0.3);
    justify-content: space-between;
}
.event-details-section .table-container .header-row{
    margin-top: 24px;
}

.event-details-section .table-container .price-row{
    flex: 1;
    align-items: center;
    padding: 16px 0;
}

.event-details-section .table-container .header-days,
.event-details-section .table-container .text-days{
    width: 30%
}

@media only screen and (min-width: 768px) {
    
    .event-details-section .table-container{
        height: 100%;
        justify-content: space-between;
    }
}




/*------------------------------------*
  #WHAT-TO-BRING-TEMPLATE
*------------------------------------*/

/*
** Styling the What to Bring Template
*/
.what-to-bring-template .elementor-template,
.what-to-bring-template .elementor-template > div,
.what-to-bring-template .text-container{
    height: 100% !important;
}
.what-to-bring-template .what-to-bring{
    padding: var(--padding-md);
    background: #fff !important;
    border-radius: 24px;
    transition: background ease-in-out 0.2s;
}

.event-info .what-to-bring-template .what-to-bring{
    background: #E8EEF6 !important;
    padding: var(--padding-sm);
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px;
}

.event-info .what-to-bring-template .what-to-bring .elementor-widget-icon{
    align-self: center !important;
}

.what-to-bring:hover{
    background: rgba(255, 255, 255, 0.6) !important;
}

.event-info .what-to-bring:hover {
    background: rgba(232, 238, 246, 0.6) !important;
}




/*------------------------------------*
  #TICKET-OPTIONS-SECTION
*------------------------------------*/


/*
** Adding the section background
*/
.event-info::before{
    content: "";
    background: #fff;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 48px 48px 0 0;
}

/*
** Image column height
*/
.event-info .img-col{
    height: 50vh;
}

/*
** Styling the gallery arrows
*/
.event-info .elementor-swiper-button-prev:hover svg path, 
.event-info .elementor-swiper-button-next:hover svg path {
    fill: #fff;
}

/*
** Making the form scroll
*/
.event-info .event-details-col{
    overflow-y: scroll;
    overflow: visible;
}

/*
** Style the Add to basket button
*/
.event-info .e-atc-qty-button-holder .single_add_to_cart_button{
    width: 100%;
    margin: 0 !important;
    height: 60px;
    text-transform: uppercase;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 1.5px;
    transition: width 0s !important;
}

@media only screen and (min-width: 1024px) {
    
    /*
    ** Adding spacing between elements inside event-info
    */
    .event-info{
        gap: var(--padding-sm);
    }
    
    /*
    ** Image column height
    */
    .event-info .img-col{
        height: 100vh;
    }
}
    
    

    
/*------------------------------------*
  #CONTACT-FORM-SECTION
*------------------------------------*/
    
.contact-form .elementor-form-fields-wrapper {
    gap: 16px;
}

.contact-form .elementor-field-group{
    padding: 0 !important;
    margin: 0 !important;
}

/*------------------------------------*
  #SITE-FOOTER
*------------------------------------*/
.main-footer {
    --footer-text-color: #FFFFFF;
    --footer-social-color: var(--e-global-color-accent, #F39200);
    color: var(--footer-text-color);
}

.main-footer :is(h1, h2, h3, h4, h5, h6, p, li, .elementor-heading-title, .elementor-icon-list-text),
.main-footer a:not(.elementor-social-icon) {
    color: var(--footer-text-color) !important;
}

.main-footer :is(.elementor-icon-list-icon, .elementor-social-icon) svg,
.main-footer :is(.elementor-icon-list-icon, .elementor-social-icon) svg path {
    fill: var(--footer-text-color) !important;
}

.main-footer .elementor-social-icon {
    background-color: var(--footer-social-color) !important;
    color: var(--footer-text-color) !important;
}

.main-footer a:not(.elementor-social-icon):hover {
    color: var(--footer-text-color) !important;
    opacity: .8;
}


/*------------------------------------*
  #HOMEPAGE-PAGE-LINK-OVERLAYS
*------------------------------------*/
.page-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .8;
    pointer-events: none;
    background-color: var(--event-default-color, #1368DE);
}

.page-link.holiday-camps::after {
    background-color: var(--event-holiday-camp-color, #EF4444);
}

.page-link.after-school::after {
    background-color: var(--event-after-school-club-color, #1368DE);
}

.page-link.home-ed::after {
    background-color: var(--event-home-education-color, #69B651);
}

.page-link:not(.holiday-camps, .after-school, .home-ed, .video-courses)::after {
    background-color: var(--e-global-color-416fa1c, #F4D84B);
}

.page-link.video-courses::after {
    background-color: var(--e-global-color-d2e47cc, #784C99);
}

.page-link .title {
    position: relative;
    z-index: 1;
}

/* #HOMEPAGE-PAGE-LINK-OVERLAY-OVERRIDES */
body .page-link::after {
    background: var(--event-default-color, #1368DE) !important;
}
body .page-link.holiday-camps::after {
    background: var(--event-holiday-camp-color, #EF4444) !important;
}
body .page-link.after-school::after {
    background: var(--event-after-school-club-color, #1368DE) !important;
}
body .page-link.home-ed::after {
    background: var(--event-home-education-color, #69B651) !important;
}
body .page-link:not(.holiday-camps, .after-school, .home-ed, .video-courses)::after {
    background: var(--e-global-color-416fa1c, #F4D84B) !important;
}
body .page-link.video-courses::after {
    background: var(--e-global-color-d2e47cc, #784C99) !important;
}/* End custom CSS */