.elementor-kit-13{--e-global-color-primary:#1368DE;--e-global-color-secondary:#54595F;--e-global-color-text:#2F4B73;--e-global-color-accent:#F39200;--e-global-color-66f8d6f:#4286E5;--e-global-color-410b12a:#FFFFFF;--e-global-color-9c8dc57:#F5F7F8;--e-global-color-0c83160:#EF4444;--e-global-color-005d0fa:#69B651;--e-global-color-e851543:#F39200;--e-global-color-4243c9f:#784C99;--e-global-color-296d430:#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-13 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){margin-block-end: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;
}




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

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

p, 
td,
li,
ol,
.event-details-col span,
.event-details-col input[type="number"],
.event-details-col input[type="text"],
.event-details-col .wapf-input,
.elementor-field-label,
.e-n-menu-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 {
	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 {
    	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: "\2022";
    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-container.border-top{
    border-radius: 24px 24px 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;
    }
}




.mpwem_ticket_type{
    border-radius: 24px 24px 0 0 !important;
}


/*
** Styling the table
*/
.card-header{
    background: var( --e-global-color-primary ) !important;
}

/*
** Resetting the padding
*/
.card-body{
    padding: 0 !important;
}



/*
** Styling the no. of days container
*/
.ticket-data{
    padding: var(--padding-sm) !important;
}
.ticket-data .ticket-info{
    flex: 1 !important;
}

.ticket-data .ticket-price{
    flex: 0 0 10% !important;
    min-width: 60px;
}

.ticket-data  .decQty,
.ticket-data .incQty{
    background: #4DD0F5 !important;
}

.ticket-data  .fas{
    color: #fff;
}



/*
** Styling the form
*/

.mep_attendee_info{
    background: #F3F8FF !important;
    box-shadow: 
    inset 0 6px 6px -6px rgba(0, 0, 0, 0.1),  
    inset 0 -6px 6px -6px rgba(0, 0, 0, 0.1);
    overflow-y: scroll;
}

.mep_form_item{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 12px;
    padding: var(--padding-sm) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 !important;
}


.mp_form_item{
    flex: 1 1 48%;
}

.mp_form_item:nth-of-type(4),
.mp_form_item:nth-of-type(5),
.mp_form_item:nth-of-type(6),
.mp_form_item:nth-of-type(12),
.mp_form_item:nth-of-type(13),
.mp_form_item:nth-of-type(14){
    flex: 0 0 100% !important;    
}


.category-holiday-camp .mp_form_item:nth-of-type(5),
.category-holiday-camp .mp_form_item:nth-of-type(6),
.category-holiday-camp .mp_form_item:nth-of-type(7),
.category-holiday-camp .mp_form_item:nth-of-type(12),
.category-holiday-camp .mp_form_item:nth-of-type(13),
.category-holiday-camp .mp_form_item:nth-of-type(14){
    flex: 0 0 100% !important;    
}


.category-home-education .mp_form_item{
    flex: 1 1 48% !important;
}

.category-home-education .mp_form_item:nth-of-type(5),
.category-home-education .mp_form_item:nth-of-type(10),
.category-home-education .mp_form_item:nth-of-type(11) {
    flex: 0 0 100% !important;  
}


/*
** Removing the dividers
*/
._divider{
    display: none !important;
}

/*
** Styling the Attendee info text title
*/
.mep_attendee_info .mep_form_item h6{
    font-family: var( --e-global-typography-text-font-family ), Sans-serif;
    font-weight: 600;
    letter-spacing: normal;
    font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
    line-height: 1.7 !important;
    color: transparent;
	display: flex;
	padding: 0 !important;
    position: relative;
    width: 100%;
    margin-bottom: 24px;
    z-index: 1;
    padding-left: 38px !important;

}

.mep_form_item h6::before{
    content: "Participant Information";
    position: absolute;
    top: 0;
    left: 38px;
    width: 100%;
    z-index: -1;
    color: var( --e-global-color-text );

}

/*
** Positioning the No. of days
*/
.mep_attendee_info .mep_form_item h6 .mpwem_ticket_name {
    order: 2;
    flex: 1;
    text-align: right;
    color: var( --e-global-color-text );
}

/*
** Positioning the attendee number
*/
.mpwem_ticket_count{
    position: absolute;
    left: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    order: 1;
    z-index: 1;
    width: 30px;
    height: 30px;
    background: var( --e-global-color-text );
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 100%;
    color: #fff;
}


/*
** Removing default padding from form rows
*/
.mep_attendee_info .mep_form_item .mp_form_item {
    padding: 0 !important;
}

/*
** Styling the rows
*/




/*
** Styling the labels
*/
.event-details-col .mp_form_item label span{
	font-size: 1.4rem !important;
	color: var( --e-global-color-text );
}

._fs_label{
    color: var( --e-global-color-text );
}

/*
** Styling the inputs
*/
/*
.event-details-col .mp_form_item input{
    width: 100% !important;
}*/
/*
.event-details-col .mp_form_item  h5{
    width: 100%;
    padding: 0;
    margin: 0;
}*/


/*
** Styling the fields
*/
.mp_form_item input[type=text],
.mp_form_item input[type=date],
.mp_form_item textarea,
.mp_form_item select.participant_school_year {
    font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 1.4rem !important;
    line-height: 2.4 !important;
    height: 50px !important;
    border: 1px solid var( --e-global-color-accent ) !important;
    line-height: auto !important;
    margin: 0;
    min-height: auto;
}
.mp_form_item  textarea{
    height: 100px !important;
}


/*
** Width for DOB and School Year
*/
.mep-user-info-sec label.participant_dob,
.mep-user-info-sec label.participant_school_year {
    width: 100%;
}

.mep-user-info-sec label:has(textarea) {
    flex: 100% !important;
}


/*
** Hiding the relevant labels
*/
/*
label:has(input.participant_first_name) > .mep_label_span,
label:has(input.participant_last_name) > .mep_label_span,
label:has(textarea.medical_info) > .mep_label_span,
label:has(input.contact_details) > .mep_label_span,
label:has(input.contact_details_2) > .mep_label_span,
.customCheckBoxArea:has(input[name="what_to_bring[]"]) > .mep_label_span,
.customCheckBoxArea:has(input[name="terms_conditions[]"]) > .mep_label_span,
.customCheckBoxArea:has(input[name="consent[]"]) > .mep_label_span{ 
    display: none;
}*/



/*-------  WHICH DAYS -------*/

.mep_checkbox_item {
    display: flex;
    flex-direction: column;
}

.mep_checkbox_item .day-label,
.mep_checkbox_item .date-label {
    text-align: center;
}

/*
** Which Days, stacked for mobile
*/
.groupCheckBox[data-processed="true"] {
    flex-wrap: wrap !important;
    width: 100%;
    gap: 8px;
}

.customCheckboxLabel span{
	font-size: 1.4rem !important;
}

/*
** Adding a warning message
*/
.day-limit-warning {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 8px;
    background-color: #fff;
    color: #d00;
    font-size: 0.9em;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.day-limit-warning.show {
    opacity: 1;
}

.groupCheckBox[data-processed="true"] {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* RED border when not enough selected */
.groupCheckBox[data-processed="true"].checkbox-warning {
    border-color: #d00;
    background-color: #fff5f5;
}

/* GREEN border when selection is valid */
.groupCheckBox[data-processed="true"].checkbox-success {
    border-color: #28a745;
    background-color: #f2fcf5;
}

/* Optional: Reset label position if it was set up for checkbox alignment */
.event-details-col .groupCheckBox[data-processed="true"] .customCheckboxLabel {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
}

/* Base button style */
.event-details-col .groupCheckBox[data-processed="true"] .customCheckbox {
    display: flex !important;
    flex: 1 !important;
    justify-content: center;
    padding: 10px 16px !important;
    border: 2px solid var(--color_theme, #ccc);
    border-radius: 8px;
    background-color: #f9f9f9;
    color: var( --e-global-color-text ) !important;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    user-select: none;
    position: relative;
}

/* Reset inherited pseudo-checkbox styling */
.event-details-col .groupCheckBox[data-processed="true"] .customCheckbox::before,
.event-details-col .groupCheckBox[data-processed="true"] .customCheckbox::after{
    content: none !important;
}

/* Hover effect */
.mpStyle .groupCheckBox[data-processed="true"] .customCheckboxLabel:hover .customCheckbox {
    background-color: #fff;
    border-color: var( --e-global-color-accent );
}

/* Checked state */
.mpStyle .groupCheckBox[data-processed="true"] .customCheckboxLabel input[type="checkbox"]:checked + .customCheckbox {
    background-color: var(--color_theme, #0073e6);
    color: #fff !important;
    border-color: var(--color_theme, #0073e6);
}

.customCheckboxLabel input:checked + .customCheckbox .day-label,
.customCheckboxLabel input:checked + .customCheckbox .date-label {
    color: #fff; /* your desired selected color */
}

/*
** Replacing the date icon
*/
div.mpStyle .formContro .date_type_without_year,
div.mpStyle .formControl.date_type,
div.mpStyle .formControl[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23666' d='M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: 16px center !important;
    background-size: 20px 20px !important;
    -webkit-appearance: none;
    appearance: none;
    padding-left: 50px !important;
}

/*
** Hide the consent labels
*/
.checkbox-what-to-bring ._fs_label,
.checkbox-terms ._fs_label,
.checkbox-consent ._fs_label{
    display: none !important;
}

/*
** Positiong the checkbox
*/
.mpStyle .customCheckbox::before{
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/*
** Register section
*/
.mpwem_form_submit_area{
    border-radius: 0 0 24px 24px !important;
    margin: 0 !important;
}

/*
** Remove the form field drop shadow on focus
*/
.mpStyle .formControl:focus {
    box-shadow: none !important;
}

.event-note{
    padding: var(--padding-sm);
}


@media only screen and (min-width: 1024px) {
    /*
    ** Puting the which days on one line
    */
    .groupCheckBox[data-processed="true"] {
        flex-wrap: nowrap !important;
    }    
}



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

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

/*
** 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
*/
.spacer{
    height: 700px;
}

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

/*
** 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: 1024px) {
    /*
    ** 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; /* Chrome, Safari, Edge */
    }
    
    .event-banner .event-details-container .event-details-container-col {
        flex: 0 0 auto;
        min-width: auto;
    }
}



/*
** Setting the section colours
*/

.single-mep_events .event-details-section {
    background: white !important;
}

.single-mep_events .event-details-section {
    padding: var(--padding-md);
    background: #E8EEF6 !important;
}
.single-mep_events .event-details-section .col-container{
    padding: 0;
}

.single-mep_events .event-details-section .age-restrictions{
    background: white !important;
}
.single-mep_events .event-details-section .table-col-container{
    background: var( --e-global-color-9c8dc57 ) !important;
}

.single-mep_events .event-info {
    background: #E8EEF6;
}

.event-details-container-col p {
    color: var( --e-global-color-text ) !important;
}

/* After School Clubs */
.category-after-school-club,
.category-after-school-club .faq-section::before,
.category-after-school-club .card-header{
    background: var( --e-global-color-005d0fa ) !important;
}

.category-after-school-club .title-section h2,
.category-after-school-club .title h5 {
    color: var( --e-global-color-005d0fa ) !important;
}
.category-after-school-club .event-details-section svg path,
.category-after-school-club .event-details-container-col svg path,
.category-after-school-club .title-section svg path,
.category-after-school-club .elementor-swiper-button-prev svg path, 
.category-after-school-club .elementor-swiper-button-next svg path {
    fill: var( --e-global-color-005d0fa ) !important;
}

/* Holiday Clubs */
.category-holiday-camp,
.category-holiday-camp .faq-section::before,
.category-holiday-camp .card-header {
    background: var( --e-global-color-0c83160 ) !important;
}

.category-holiday-camp .title-section h2,
.category-holiday-camp .title h5{
    color: var( --e-global-color-0c83160 ) !important;
}

.category-holiday-camp .event-details-container-col svg path,
.category-holiday-camp .title-section svg path,
.category-holiday-camp .elementor-swiper-button-prev svg path, 
.category-holiday-camp .elementor-swiper-button-next svg path{
    fill: var( --e-global-color-0c83160 );
}

/* Home Education */
.category-home-education,
.category-home-education .faq-section::before,
.category-home-education .card-header{
    background: var( --e-global-color-e851543 ) !important;
}

.category-home-education .title-section h2,
.category-home-education .title h5{
    color: var( --e-global-color-e851543 ) !important;
}

.category-home-education .event-details-container-col svg path,
.category-home-education .title-section svg path,
.category-home-education .elementor-swiper-button-prev svg path, 
.category-home-education .elementor-swiper-button-next svg path {
    fill: var( --e-global-color-e851543 ) !important;
}

.mep_cat-home-education .details-container{
    background: var( --e-global-color-e851543 ) !important;
}
.mep_cat-after-school-club .details-container {
    background: var( --e-global-color-005d0fa ) !important;
}
.mep_cat-holiday-camp .details-container {
    background: var( --e-global-color-0c83160 ) !important;
}
.mep_cat-video-course .details-container {
    background: var( --e-global-color-4243c9f ) !important;
}




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

.event-details-section{
    padding-bottom: var(--padding-md);
}

.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;
    }
}




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

/*
** Setting the transition style
*/
.event-info .wapf-swatch,
.wapf-field-container,
.wapf-field-container.limit-error,
.event-info .no-of-participants .wapf-field-input,
.event-info .no-of-participants .button,
.event-info .no-of-participants .button svg path{
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
** 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;
}/* End custom CSS */