/* MASTER SITE CSS - START */
/* global variable declarartions for use in setting spacing */
:root {
    /* Global spacing variables - see below for media queries */ 
--sc-margin: 8vw;
	--sc-margin-dbl: calc(2 * var(--sc-margin));
	--sc-margin-half: calc(0.5 * var(--sc-margin));
	--sc-margin-neg: calc(-1 * var(--sc-margin));
	--sc-margin-half-neg: calc(-1 * var(--sc-margin-half));

--sc-gutter: 24px;
	--sc-gutter-dbl: calc(2 * var(--sc-gutter));
	--sc-gutter-half: calc(0.5 * var(--sc-gutter));
	--sc-gutter-neg: calc(-1 * var(--sc-gutter));
	--sc-gutter-dbl-neg: calc(-1 * var(--sc-gutter-dbl));
	--sc-gutter-half-neg: calc(-1 * var(--sc-gutter-half));

--sc-padding: 16px;
	--sc-padding-big: calc(4 * var(--sc-padding)); /* NOTE – Currently changing to the --sc-margin value on tablet and mobile, which is the equavelent of padding-dbl */
	--sc-padding-dbl: calc(2 * var(--sc-padding));
	--sc-padding-half: calc(0.5 * var(--sc-padding));
	--sc-padding-neg: calc(-1 * var(--sc-padding));
	--sc-padding-dbl-neg: calc(-1 * var(--sc-padding-dbl));
	--sc-padding-half-neg: calc(-1 * var(--sc-padding-half));

/*--sc-full-width: calc(100vw - var(--sc-margin));*/
	--sc-content-width: 1140px;

--sc-padding-btn: 16px; 
--sc-padding-btn-vert: 8px; 
  
		/* global colours */
    --sc-primary: #211E57;
    --sc-secondary: #8D804E;
		--sc-accent: #c0392b;
    --sc-text: #111322;
		--sc-primary-light: #20498B /* Might be better as lighter blue, check */;
		--sc-neutral-light: #F5F3ED;
		--sc-neutral-dark: #B0C6DA;
		--sc-blue-light: #E2EBF4;
		
		--sc-btn-bg: transparent;
    --sc-btn-bg-hover: var(--sc-accent);
		--sc-btn-border-color: var(--sc-accent);
		
		/* Menu Colours */
		--sc-menu-h1-color: #6f8fb9;
		--sc-menu-h1-color-focus: var(--sc-primary);
    --sc-menu-h2-color: var(--sc-primary);
		--sc-menu-h2-color-focus: var(--sc-menu-h1-color);
    --sc-menu-accent: var(--sc-accent);
		--sc-menu-border-color: var(--sc-neutral-dark);
   
		/* design varables */
    --sc-radius-btn: 40px;
    --sc-radius-box: 4px;
    --sc-border-width: 1px;
    --sc-border-accent: 4px;
		--sc-border-width-btn: 1px;
		--sc-icon-size: 20px;
		--sc-icon-nav-dot: 10px;
		--sc-icon-nav-arrow: 24px;
   
		
		/* global font size variables – viewport 900-1440 */
		--sc-h1-clamp: clamp(2.5rem, -0.8333rem + 5.9259vw, 4.5rem); /* 40-72px */
		--sc-h2-clamp: clamp(2rem, 0.75rem + 2.2222vw, 2.75rem); /* 32-44px */
		--sc-h3-clamp: clamp(1.625rem, 1.2083rem + 0.7407vw, 1.875rem); /* 26-30px */
		--sc-h4-clamp: clamp(1.25rem, 0.9375rem + 0.5556vw, 1.4375rem); /* 20-23px */
		--sc-h5-clamp: clamp(1.125rem, 0.8125rem + 0.5556vw, 1.3125rem); /* 18-21px */
		--sc-h6-clamp: var(--sc-body-clamp); /* 16-18px */
		--sc-body-clamp: clamp(1rem, 0.7917rem + 0.3704vw, 1.125rem); /* 16-18px */
		--sc-body-sm-clamp: clamp(0.875rem, 0.6667rem + 0.3704vw, 1rem); /* 14-16px */
		--sc-body-sm-clamp: clamp(0.875rem, 0.7708rem + 0.1852vw, 0.9375rem); /* 14-15px */
		--sc-accordion-clamp: var(--sc-h4-clamp);/*clamp(1.5rem, 1.0833rem + 0.7407vw, 1.75rem);  to look like small h3 24-28px */
/*		--sc-intro-clamp: ; */
		
		--sc-menu-h1-clamp: clamp(1.875rem, 0.8333rem + 1.8519vw, 2.5rem); /* 30-40px */
		--sc-menu-h2-clamp: clamp(1rem, 0.7917rem + 0.3704vw, 1.125rem);  /* same as body */

		
/* line height for body copy */  	
		--sc-body-lh: 1.6;
}
		
 /*  Media Query – Tablet  */
@media screen and (max-width: 1024px) {
	:root {
		--sc-margin: 32px;
		--sc-gutter: 16px; /* prev 32px */
		--sc-padding: 12px; /* prev 16px */
			--sc-padding-big: var(--sc-margin);
	}
}

/*  Media Query – Mobile  */
@media screen and (max-width: 767px) {
	:root {
		--sc-margin: 24px; /* should be 24px, but breaks layout on mobile. prev 16*/
		--sc-gutter: 24px; /* prev 14px */
		--sc-padding: 12px; /* prev 8px */
	}
}

/* ----------------------------------------------------------
   TEXT SETTINGS
   ---------------------------------------------------------- */
/* adjust heading spacing (H2 – 5)  - only within text editor, accordion, and sc widgets */
.elementor-widget-text-editor .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-elementskit-accordion .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-n-accordion .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-image-content-v2 .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-content .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-strategus-slider-v3 .elementor-widget-container :is(h2, h3, h4, h5) {
  margin-top: 1em; /* scales with text size */
  margin-bottom: var(--sc-padding);
}
/* removes top margin from heading when it directly follows the lead-in text label */
.sc-content .sc-leadin-text + :is(h2, h3, h4, h5) {
  margin-top: 0;
}
/* adjust H6 spacing - only within text editor, accordion, slider and sc widgets */
.elementor-widget-text-editor .elementor-widget-container h6,
.elementor-widget-elementskit-accordion .elementor-widget-container h6,
.elementor-widget-n-accordion .elementor-widget-container h6,
.elementor-widget-image-content-v2 .elementor-widget-container h6,
.elementor-widget-content .elementor-widget-container h6,
.elementor-widget-strategus-slider-v3 .elementor-widget-container h6 {
  margin-bottom: var(--sc-padding-half);
}
/* paragraph spacing - only within text editor, accordion, and sc widgets */
.elementor-widget-text-editor .elementor-widget-container p,
.elementor-widget-elementskit-accordion .elementor-widget-container p,
.elementor-widget-n-accordion .elementor-widget-container p,
.elementor-widget-image-content-v2 .elementor-widget-container p,
.elementor-widget-content .elementor-widget-container p, 
.elementor-widget-strategus-slider-v3 .elementor-widget-container p {
  margin-block-start: 0;
  margin-block-end: var(--sc-padding); 
}

/* Remove top margin from first element and bottom margin from last element, within a text box */
.elementor-widget-container :is(p, h2, h3, h4, h5, h6, blockquote, ul, ol):first-child {
  margin-top: 0;
}
.elementor-widget-container :is(p, h2, h3, h4, h5, h6, blockquote, ul, ol):last-child {
  margin-bottom: 0;
}

/* left bullet indent */
ul, ol {
  padding-left: 20px;
}
/* space below every bullet, at every level, including bullets
   that contain a nested list */
li {
  padding-left: 6px;
  padding-bottom: var(--sc-padding-half);
}
/* space between a parent bullet's own text and its first nested bullet */
li > ul,
li > ol {
  padding-top: var(--sc-padding-half);
}
/* the last item in a nested list is redundant: the parent bullet's
   own padding-bottom already closes off the whole group */
li:has(> ul) > ul > li:last-child,
li:has(> ul) > ol > li:last-child,
li:has(> ol) > ul > li:last-child,
li:has(> ol) > ol > li:last-child {
  padding-bottom: 0;
}
/* the very last item of the outermost list gets double spacing,
   whether the list is single-level or has nested groups */
:not(li) > ul > li:last-child,
:not(li) > ol > li:last-child {
  padding-bottom: var(--sc-padding);
}
/* Fix Elementskit accordion bullet alignment */
 * .elementskit-card-body ul,
.elementskit-card-body ol {
  padding-left: 20px !important;
  margin: 0 !important;
}
.elementskit-card-body li {
  padding-left: 6px !important;
  padding-bottom: var(--sc-padding-half) !important;
}
.elementskit-card-body li > ul,
.elementskit-card-body li > ol {
  padding-top: var(--sc-padding-half) !important;
}
.elementskit-card-body li:has(> ul) > ul > li:last-child,
.elementskit-card-body li:has(> ul) > ol > li:last-child,
.elementskit-card-body li:has(> ol) > ul > li:last-child,
.elementskit-card-body li:has(> ol) > ol > li:last-child {
  padding-bottom: 0 !important;
}
.elementskit-card-body :not(li) > ul > li:last-child,
.elementskit-card-body :not(li) > ol > li:last-child {
  padding-bottom: var(--sc-padding) !important;
}

		/* Set paragraph spacing for notices – site wide */
.notice_content p {
		margin-bottom: 10px;
		margin-top: 0px  !important;
}

/* blockquote style */
blockquote,
.sports-intro {
    font-family: "ivypresto-text", "Times New Roman", serif;
    font-weight: 300;
    font-size: var(--sc-h4-clamp);
    color: var(--sc-primary);
    line-height: 1.5;
    margin-inline: 0;
    margin-bottom: var(--sc-padding);
}

.elementskit-card-body blockquote,
.elementskit-card-body blockquote p {
  font-family: "ivypresto-text", "Times New Roman", serif !important;
  font-weight: 300 !important;
  font-size: var(--sc-h4-clamp) !important;
  color: var(--sc-primary) !important;
  line-height: 1.5 !important;
}

/* intro text style */
.intro-text,
.intro-text p {
    font-family: "ivypresto-text", "Times New Roman", serif;
    font-weight: 300;
    font-size: var(--sc-h3-clamp);
    color: var(--sc-primary);
    line-height: 1.5;
    text-align: center;
    margin: 0px;
}

.intro-text p:not(:last-child) {
    margin-bottom: var(--sc-padding);
}


/* h6 btn style */
h6 a {
    background-color: var(--sc-btn-bg);
    padding: var(--sc-padding-btn-vert) var(--sc-padding-btn);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
		border-style: solid;
		border-width: var(--sc-border-width-btn);
		border-color:	var(--sc-btn-border-color);
    border-radius: var(--sc-radius-btn);
    font-family: "acumin-pro-semi-condensed", Sans-serif;
		text-align: center;

    font-size: var(--sc-body-sm-clamp);
		font-weight: 400;
 		text-transform: uppercase;
		color: var(--sc-accent);
    vertical-align: sub;
    display: inline-block;
}

h6 a:hover {
    background-color: var(--sc-btn-bg-hover);
		color: #fff !important;
}

/* styling for sports registration message when its not open */
.sports-registration-message {
    font-family: "acumin-pro", sans-serif;
    font-weight: 500;
    color: var(--sc-text);
}
		
/* button classes */
/* Reverse button: white fill, accent text.    Applies to #sc-btn-reverse, and to h6 links and Elementor buttons inside .dark-bg */
#sc-btn-reverse,
#sc-btn-reverse .elementor-button,
.dark-bg h6 a,
.dark-bg .elementor-button {
    border-style: solid;
    border-width: var(--sc-border-width-btn);
    border-color: #fff;
    border-radius: var(--sc-radius-btn);
    background-color: #fff;
    color: var(--sc-accent);
    text-decoration: none;
}

#sc-btn-reverse:hover,
#sc-btn-reverse .elementor-button:hover,
.dark-bg h6 a:hover,
.dark-bg .elementor-button:hover {
    border-color: var(--sc-accent);
    background-color: var(--sc-accent);
    color: #fff;
}

/* ----------------------------------------------------------
   LINKED CARD CONTAINER
   Add class to a container with HTML tag set to 'a' – 'sc-card-link'
   Text is primary colour, turns white on hover with accent background
   ---------------------------------------------------------- */

a.sc-card-link {
    transition: background-color 0.2s ease;
}

/* Default text colour */
a.sc-card-link :is(h2, h3, h4, h5, h6, p, span, .elementor-heading-title) {
    color: var(--sc-primary) !important;
    transition: color 0.2s ease;
}

/* Hover and keyboard focus */
a.sc-card-link:is(:hover, :focus-visible) {
    background-color: var(--sc-accent) !important;
}

a.sc-card-link:is(:hover, :focus-visible) :is(h2, h3, h4, h5, h6, p, span, .elementor-heading-title) {
    color: #fff !important;
}

a.sc-card-link:is(:hover, :focus-visible) .elementor-divider-separator {
    border-color: #fff !important;
}

/* table styling */
table {
    border-collapse: collapse;
}
th, td {
    padding: var(--sc-padding-half) !important;
    background-color: transparent !important;
		color: var(--sc-primary);
   /* border: var(--sc-border-width) solid var(--sc-border-color) ;*/
}
tr:hover td {
    background-color: transparent !important;
}
/* a class to add to a column to remove horizontal borders. */
.sc-table-column-spacer {
  border-top: none;
  border-bottom: none;
  /*border-left: 1px solid var(--sc-border-color);*/
  /*border-right: 1px solid var(--sc-border-color);*/
}

/* ----------------------------------------------------------
   ADD dot DIVIDER BETWEEN HORIZONTAL SIBLING LINKS – Nav Block SC widget
   Add class to widget – 'nav-dividers'
   ---------------------------------------------------------- */

.nav-dividers .navblock-item:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--sc-accent);
}

/* ==========================================================
   CLASSS FOR FIRST LEVEL CONTAINERS
	 Applys page margins with padding to containers with this class
   MUST NOT be added to inner containers
   ========================================================== */

.page-margin-0-top-btm {
  /*max-width: var(--sc-content-width); */
  margin-inline: auto;
  padding-inline: var(--sc-margin);
	padding-bottom: 0px;
	padding-top: 0px;
/*	box-sizing: border-box; */
}
.page-margin-0-top {
  /* max-width: var(--sc-content-width); */
  margin-inline: auto;
  padding-inline: var(--sc-margin);
	padding-bottom: var(--sc-margin-half);
	padding-top: 0px;
}
.page-margin {
  /*max-width: var(--sc-content-width); */
  margin-inline: auto;
  padding-inline: var(--sc-margin);
	padding-bottom: var(--sc-margin-half);
	padding-top: var(--sc-margin-half);
/*	box-sizing: border-box; */
}
 /*  Media Query page margins – Tablet & mobile */
@media (max-width: 1024px) {
  .page-margin-0-top {
    padding-bottom: var(--sc-margin);
  }
	.page-margin {
	padding-top: var(--sc-margin);
  padding-bottom: var(--sc-margin);
  }
}

/* ==========================================================
   CLASS STYLES FOR DARK CONTAINERS
   to change text and button colour
   ========================================================== */

.dark-bg {
    color: #fff;
}
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6,
.dark-bg p,
.dark-bg li,
.dark-bg span,
.dark-bg blockquote,
.dark-bg blockquote p {
    color: inherit;
}

/* This forces Elementor to apply white to blockquotes */
.dark-bg .elementor-widget-text-editor blockquote,
.dark-bg .elementor-widget-text-editor blockquote p {
    color: #fff;
}

/* Buttons inside dark containers are declared with the button classes */

/* Link colour inside dark containers */
.dark-bg a {
    color: var(--sc-secondary);
}

/* White on hover */
.dark-bg a:hover {
    color: var(--sc-accent);
}

/* ==========================================================
   NEWSLETTER ADVERTISING  
   styling for containers with advertising category added
   ========================================================== */
.sc-full-article .e-loop-item.news-category-advertising > .e-con {
    background-color: var(--sc-neutral-light);
    border-radius: var(--sc-radius-box);
    padding: var(--sc-padding);
		margin-bottom: var(--sc-gutter);
}

.sc-full-article .e-loop-item.news-category-advertising .elementor-widget-divider {
    display: none;
}

/* This stops svg images changing size when they have a link applied*/
.elementor-widget-image a img[src$=".svg"] {
    width: 100%;
}


/* remove the browser default clear cross from search inputs */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }


/* MASTER SITE CSS - END */

/* EVENT ORGANSIER / CALENDAR OVERRIDES */
		/* Removes indent from event info meta data */
ul.eo-event-meta{
		margin-left: -20px;
}
/* Removes bullets from event details */
ul.eo-event-meta {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.eo-event-meta li {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.eo-event-meta li:before,
ul.eo-event-meta li:after {
    content: none !important;
}
/* removes horizontal rule from event details */
.eventorganiser-event-meta hr {
    display: none !important;
}

/* Event Organiser - calendar view - uncategorised event colour */
.fc-event {
    background-color: var(--sc-primary) !important;
    border-color: var(--sc-primary) !important;
}
.fc-event .fc-title,
.fc-event .fc-time {
    color: #fff !important;
}

/* Event Organiser – Stop venu from being a link on event detail page */
a[href*="/events/venues/"] {
    pointer-events: none !important;
    text-decoration: none;
    color: inherit;
}

/* Stops category from being a link on event detail page */
.eventorganiser-event-meta a[rel="tag"] {
    pointer-events: none !important;
    text-decoration: none;
    color: inherit;
}

/* ==========================================================
   GRAVITY FORMS CUSTOM STYLES
   ========================================================== */

/* Form input and select styles */
select,
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
.uneditable-input {
    display: inline-block;
/*    height: 4.5em !important;*/
    border: 1px solid var(--sc-neutral-dark);
/*    padding: var(--sc-padding-half);*/
    font-size: 15px !important;
    line-height: normal;
    color: var(--sc-text);
    background-color: #ffffff;
    border-radius: var(--sc-radius-box);
}

/* Focus styles for form fields */
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
    border: 1px solid var(--sc-secondary) !important;
}


/* Form field labels */
body .gform_wrapper .top_label .gfield_label,
body .gform_wrapper .left_label .gfield_label,
body .gform_wrapper .right_label .gfield_label {
    color: var(--sc-text);
    font-size: var(--sc-body-clamp);
/*    text-transform: uppercase;*/
		font-weight: 500;
}

/* Form field labels in focus */
body .gform_wrapper .gform_body .gform_fields .gfield:focus-within .gfield_label {
    color: var(--sc-primary);
}

/* Row Spacing */
.gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: var(--sc-gutter) !important;
}

/* style the horizontal rule */
hr {
  border: none;
  border-top: var(--sc-border-width) solid var(--sc-neutral-dark);
  margin-top: var(--sc-padding);
  padding-bottom: var(--sc-padding);
}


/* ==========================================================
   IMAGE ASPECT RATIO CLASSES
   ========================================================== */

.sc-aspect-ratio-3-1 {
  aspect-ratio: 3 / 1;
  width: 100%;
  overflow: hidden;
}
.sc-aspect-ratio-3-1 img {
  aspect-ratio: 3 / 1;
  width: 100%;
  overflow: hidden;
}

.sc-aspect-ratio-3-2 {
  aspect-ratio: 3 / 2;
  width: 100%;
  overflow: hidden;
}

.sc-aspect-ratio-3-2 img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.sc-aspect-ratio-2-3 {
  aspect-ratio: 2 / 3;
  width: 100%;
  overflow: hidden;
}

.sc-aspect-ratio-2-3 img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.sc-aspect-ratio-3-4 {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
}

.sc-aspect-ratio-3-4 img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* make the nav block thumb a ratio box */
.sc-navblock-3-2 .navblock-thumb {
  position: relative;
  height: 0;
  padding-top: 66.67%; /* adjust to your desired ratio */
  overflow: hidden;
}

.sc-navblock-3-2 .navblock-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* make a slide a container, so I can adjust height based on width */
.sc-slide-3-2 .swiper-slide-inner {
  position: relative;
  height: 0;
  padding-top: 66.67%;
  overflow: hidden;
}

.sc-slide-3-2 .swiper-slide-inner > * {
  position: absolute;
  inset: 0;
  height: auto;
}
/* END aspect ratio */


/* ----------------------------------------------------------
   CHANGE 'MEDIUM' SIZED IMAGES IN POSTS TO BE 150PX WIDE ON MOBILE
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-widget-theme-post-content img.size-medium.alignleft {
    width: 150px;
    height: auto;
    margin: 0 1rem 0.5rem 0;
  }
}

/* ----------------------------------------------------------
   STYLE THE BUILT IN WORDPRESS GALLERY & FREE ELEMENTOR GALLERY
   ---------------------------------------------------------- */

.gallery {
  --cols: 3;
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-gutter-half);
  align-items: flex-start;
  margin: 0 0 var(--sc-gutter);
}

.gallery.gallery-columns-1 { --cols: 1; }
.gallery.gallery-columns-2 { --cols: 2; }
.gallery.gallery-columns-4 { --cols: 4; }
.gallery.gallery-columns-5 { --cols: 5; }
.gallery.gallery-columns-6 { --cols: 6; }

/* Absorbs spare space so the last row doesn't stretch */
.gallery::after {
  content: "";
  flex: 1000000 1 0;
}

/* One row or less: remove the spacer so items grow to fill the full width */
.gallery.is-single-row::after {
  display: none;
}

.gallery .gallery-item {
  --r: 1.5; /* width / height */
  --h: calc(((100cqw - (var(--cols) - 1) * var(--sc-gutter-half)) / var(--cols)) * 2 / 3);
  flex: var(--r) 1 calc(var(--h) * var(--r));
  margin: 0;
  overflow: hidden;
  border-radius: var(--sc-radius-box);
  isolation: isolate;
}

/* Fallback ratio for portrait images */
.gallery .gallery-item:has(.gallery-icon.portrait) {
  --r: 0.6667;
}

/* Galleries containing only portrait images: fill each column */
.gallery:not(:has(.gallery-icon.landscape)) .gallery-item {
  --h: calc(((100cqw - (var(--cols) - 1) * var(--sc-gutter-half)) / var(--cols) - 0.5px) / var(--r));
}

.gallery .gallery-item .gallery-icon,
.gallery .gallery-item .gallery-icon a {
  display: block;
  width: 100%;
}

.gallery .gallery-item .gallery-icon img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r);
  object-fit: cover;
  object-position: center top;
  border: 0;
  border-radius: var(--sc-radius-box);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery .gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(0.85);
}

.gallery .gallery-caption {
  display: none; /* Remove this rule to show captions again */
}
/* Remove the bottom margin when the gallery ends its container */
.gallery:last-child {
  margin-bottom: 0;
}

/* Tablet: never more than 3 columns.
   Percentages replace container query units so the gallery
   cannot collapse inside Elementor's flex wrappers. */
@media (max-width: 1024px) {
  .gallery {
    container-type: normal;
  }

  .gallery[class*="gallery-columns"] { --cols: 3; }
  .gallery.gallery-columns-1 { --cols: 1; }
  .gallery.gallery-columns-2 { --cols: 2; }

  .gallery .gallery-item {
    --h: calc(((100% - (var(--cols) - 1) * var(--sc-gutter-half)) / var(--cols)) * 2 / 3);
  }

  /* Galleries containing only portrait images: fill each column */
  .gallery:not(:has(.gallery-icon.landscape)) .gallery-item {
    --h: calc(((100% - (var(--cols) - 1) * var(--sc-gutter-half)) / var(--cols) - 0.5px) / var(--r));
  }
}

/* Mobile: never more than 2 columns */
@media (max-width: 767px) {
  .gallery[class*="gallery-columns"] { --cols: 2; }
  .gallery.gallery-columns-1 { --cols: 1; }
}

/* End gallery */

/* ----------------------------------------------------------
   colour nav dots in loop carousel 
   ---------------------------------------------------------- */
/* Default (no class) */
:root {
  --dot-inactive: var(--sc-primary);
  --dot-active: var(--sc-accent);
  --dot-hover: var(--sc-neutral-dark);
}

/* Inside the dark-bg class */
.dark-bg {
  --dot-inactive: var(--sc-neutral-dark);
  --dot-active: var(--sc-accent);
  --dot-hover: var(--sc-secondary);
}

/* Not active */
.elementor-widget .swiper-pagination .swiper-pagination-bullet {
  background: var(--dot-inactive);
  opacity: 1;
  transition: background-color 0.2s ease;
}

/* Roll over */
.elementor-widget .swiper-pagination .swiper-pagination-bullet:hover {
  background: var(--dot-hover);
}

/* Active */
.elementor-widget .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--dot-active);
  opacity: 1;
}

/* ----------------------------------------------------------
   Hide sticky mobile page quicklinks when mobile menu is open 
   ---------------------------------------------------------- */

body:has(.mega-menu-toggle.mega-menu-open) .dialog-widget:has(.sc-sticky-pg-quicklinks) {
	visibility: hidden;
}

/* ----------------------------------------------------------
   Animated Hamburger icon - Add text label under the icon 
   ---------------------------------------------------------- */

/* Stack the icon and label, fill the tile, and nudge them down */
.hamburger-label a.uc_animated_hamburger_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  gap: 0px;
  padding-top: 5px;
}

/* Pass the tile height down to the anchor */
.hamburger-label .uc_animated_hamburger_icon_holder {
  height: 100%;
}

.hamburger-label .elementor-widget-container {
  height: 100%;
}

/* Closed state label */
.hamburger-label a.uc_animated_hamburger_icon::after {
  content: "Menu";
  font-size: var(--sc-body-sm-clamp);
		text-transform: uppercase;
  line-height: 1;
  font-weight: 500;
  color: var(--sc-neutral-light);
}

/* Open state label */
.hamburger-label a.uc_animated_hamburger_icon.is-active::after {
  content: "Close";
}

/* ==========================================================
   START: KAIPARA POPUP desktop MEGA MENU
   ========================================================== */

.popup-mega-menu {
    /* Layout */
    --kaipara-level-1-width: 480px;
    --kaipara-level-2-left: 500px;
    --kaipara-level-2-width: 370px;

    /* Menu Colours & font sizes are defined inside root */

    overflow: visible !important;
}


/* ==========================================================
   WRAPPER RESET
   ========================================================== */

.popup-mega-menu #mega-menu-wrap-max_mega_menu_9,
.popup-mega-menu #mega-menu-wrap-max_mega_menu_9 #mega-menu-max_mega_menu_9 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.popup-mega-menu #mega-menu-wrap-max_mega_menu_9 {
    position: relative !important;
    overflow: visible !important;
}


/* Hide Max Mega Menu mobile controls in the popup */

.popup-mega-menu .mega-menu-toggle,
.popup-mega-menu .mega-close {
    display: none !important;
}


/* ==========================================================
   MAIN MENU
   ========================================================== */

.popup-mega-menu #mega-menu-max_mega_menu_9 {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: var(--kaipara-level-1-width) !important;
    min-height: 660px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
}


/* ==========================================================
   LEVEL 1
   ========================================================== */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item {
    /*
     * Static positioning means the absolutely positioned
     * Level 2 panel is positioned against the main menu.
     */
    position: static !important;

    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;

    margin: 0 0 39px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
}

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item:last-child {
    margin-bottom: 0 !important;
}


/* Level 1 links */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item
> a.mega-menu-link {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 0 13px !important;

    font-family: "ivypresto-text", "Times New Roman", serif !important;
    font-size: var(--sc-menu-h1-clamp) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: var(--sc-menu-h1-color) !important;
    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;

    transition: color 220ms ease !important;
}


/* Level 1 active state */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item:hover
> a.mega-menu-link,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item.is-active
> a.mega-menu-link,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item:focus-within
> a.mega-menu-link {
    color: var(--sc-menu-h1-color-focus) !important;
}


/* Hide Max Mega Menu indicators on Level 1 */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item
> a.mega-menu-link
> .mega-indicator {
    display: none !important;
}


/* ==========================================================
   LEVEL 1 RED UNDERLINE
   ========================================================== */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item::before {
    display: none !important;
    content: none !important;
}

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item::after {
    content: "" !important;

    display: block !important;

    width: 100% !important;
    height: 2px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--sc-menu-accent) !important;
    border: 0 !important;

    opacity: 0 !important;

    transform: scaleX(0) !important;
    transform-origin: left center !important;

    transition:
        transform 350ms ease,
        opacity 200ms ease !important;

    pointer-events: none !important;
}

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item.is-active::after,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item:focus-within::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}


/* ==========================================================
   LEVEL 2 PANEL
   ========================================================== */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item
> ul.mega-sub-menu {
    position: absolute !important;

    top: 0 !important;
    left: var(--kaipara-level-2-left) !important;
    z-index: 19 !important;

    /*
     * Keep the panel rendered and control it through opacity and
     * visibility. This avoids display:none/display:block flashes.
     */
    display: block !important;

    width: var(--kaipara-level-2-width) !important;
    min-width: var(--kaipara-level-2-width) !important;
    max-width: var(--kaipara-level-2-width) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateX(15px) !important;

    transition:
        opacity 220ms ease,
        transform 260ms ease,
        visibility 0s linear 260ms !important;
}


/*
 * Only the custom is-active class may display Level 2.
 */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item.is-active
> ul.mega-sub-menu {
    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateX(0) !important;

    transition:
        opacity 220ms ease,
        transform 260ms ease,
        visibility 0s linear 0s !important;
}


/*
 * Neutralise Max Mega Menu's native state. The plugin may still
 * add mega-toggle-on, but it cannot display a panel unless the
 * custom is-active class is present.
 */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item.mega-toggle-on:not(.is-active)
> ul.mega-sub-menu {
    display: block !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateX(15px) !important;
}


/* Prevent plugin aria state from changing inactive link styling */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item:not(.is-active)
> a.mega-menu-link[aria-expanded="true"] {
    color: var(--sc-menu-h2-color-focus) !important;
}


/* ==========================================================
   LEVEL 2 ITEMS
   ========================================================== */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item
> ul.mega-sub-menu
> li.mega-menu-item {
    position: relative !important;

    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border-top: 1px solid var(--sc-menu-border-color) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li.mega-menu-item
> ul.mega-sub-menu
> li.mega-menu-item:last-child {
    border-bottom: 1px solid var(--sc-menu-border-color) !important;
}


/* Remove Max Mega Menu clearfix pseudo-elements */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.mega-menu-item::before,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.mega-menu-item::after {
    display: none !important;
    content: none !important;
}


/* Level 2 links */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li
> a.mega-menu-link {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 13px 45px 13px 4px !important;

    font-family: "acumin-pro", Helvetica, sans-serif !important;
    font-size: var(--sc-menu-h2-clamp) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    color: var(--sc-menu-h2-color) !important;
    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;

    transition: color 200ms ease !important;
}

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li:hover
> a.mega-menu-link,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.is-open
> a.mega-menu-link {
    color: var(--sc-menu-h2-color-focus) !important;
    background: transparent !important;
}


/* ==========================================================
   LEVEL 2 PLUS/MINUS
   ========================================================== */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.mega-menu-item-has-children
> a.mega-menu-link
> .mega-indicator {
    position: absolute !important;

    top: 50% !important;
    right: 9px !important;

    display: block !important;

    width: 20px !important;
    height: 20px !important;

    margin: -10px 0 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    background: transparent !important;
    border: 0 !important;

    transform: none !important;

    /*
     * Clicking the indicator targets the surrounding anchor.
     */
    pointer-events: none !important;
}


/* Horizontal line */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.mega-menu-item-has-children
> a.mega-menu-link
> .mega-indicator::before {
    content: "" !important;

    position: absolute !important;

    top: 9px !important;
    left: 1px !important;

    display: block !important;

    width: 18px !important;
    height: 2px !important;

    background: var(--sc-menu-h2-color) !important;

    transition: background-color 200ms ease !important;
}


/* Vertical line */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.mega-menu-item-has-children
> a.mega-menu-link
> .mega-indicator::after {
    content: "" !important;

    position: absolute !important;

    top: 1px !important;
    left: 9px !important;

    display: block !important;

    width: 2px !important;
    height: 18px !important;

    background: var(--sc-menu-h2-color) !important;

    opacity: 1 !important;

    transition:
        opacity 200ms ease,
        transform 220ms ease,
        background-color 200ms ease !important;
}


/* Open state becomes a minus */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.mega-menu-item-has-children.is-open
> a.mega-menu-link
> .mega-indicator::after {
    opacity: 0 !important;
    transform: rotate(90deg) !important;
}

/* Icon colour matches text colour on hover and open (active) */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li:hover
> a.mega-menu-link
> .mega-indicator::before,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li:hover
> a.mega-menu-link
> .mega-indicator::after,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.mega-menu-item-has-children.is-open
> a.mega-menu-link
> .mega-indicator::before,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.mega-menu-item-has-children.is-open
> a.mega-menu-link
> .mega-indicator::after {
    background: var(--sc-menu-h2-color-focus) !important;
}

/* ==========================================================
   LEVEL 3
   ========================================================== */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li
> ul.mega-sub-menu {
    position: static !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: none !important;

    transition:
        max-height 350ms ease,
        opacity 220ms ease,
        visibility 0s linear 350ms !important;
}


/* Open Level 3 */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li.is-open
> ul.mega-sub-menu {
    max-height: 500px !important;

    padding: 3px 0 12px !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        max-height 350ms ease,
        opacity 220ms ease,
        visibility 0s linear 0s !important;
}


/* Level 3 items */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li
> ul.mega-sub-menu
> li.mega-menu-item {
    position: static !important;

    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
}

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li
> ul.mega-sub-menu
> li.mega-menu-item:last-child {
    border-bottom: 0 !important;
}


/* Level 3 links */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li
> ul.mega-sub-menu
> li
> a.mega-menu-link {
    display: block !important;

    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 8px 38px 8px 4px !important;

    font-family: "acumin-pro", Helvetica, sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
		font-size: var(--sc-menu-h2-clamp) !important;
    color: var(--sc-menu-h2-color) !important;
    background: transparent !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
}

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li
> ul.mega-sub-menu
> li
> a.mega-menu-link:hover,
.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li
> ul.mega-sub-menu
> li
> a.mega-menu-link:focus {
    color: var(--sc-menu-h2-color-focus) !important;
}


/* Hide indicators inside Level 3 */

.popup-mega-menu
#mega-menu-max_mega_menu_9
> li
> ul.mega-sub-menu
> li
> ul.mega-sub-menu
.mega-indicator {
    display: none !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

    .popup-mega-menu {
        --kaipara-level-1-width: 420px;
        --kaipara-level-2-left: 450px;
        --kaipara-level-2-width: 360px;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item
    > a.mega-menu-link {
        font-size: 36px !important;
    }
}

/* I dont think this is doing anything code below seems to work
 * .popup-mega-menu .nav-menu-footer, .popup-mega-menu .nav-hide-mobile {
		display:none;
} */

/* Hide mobile footer on tablet and desktop */
@media (min-width: 768px) {
	.nav-menu-footer,
	.popup-mega-menu
	#mega-menu-max_mega_menu_9
	> li.mega-menu-item.nav-footer-bar {
		display: none !important;
	}
}

@media (max-width: 900px) {
		
    .popup-mega-menu #mega-menu-max_mega_menu_9 {
        display: block !important;

        width: 100% !important;
        min-height: 0 !important;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item {
        position: relative !important;

        display: block !important;

        margin-bottom: 20px !important;
    }

    /* Level 1 link: flex row so a single-line heading and the
       indicator centre against each other cleanly */
    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item
    > a.mega-menu-link {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding: 0 45px 13px 0 !important;

        font-size: 31px !important;
        white-space: normal !important;
    }

    /* Red underline switched off at this width only */
    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item::after {
        display: none !important;
        content: none !important;
    }

    /* Hover no longer opens a panel below this width, only .is-active does.
       Same selector chain and specificity as the base rule, placed later
       in the cascade so it wins. */
    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item:hover
    > ul.mega-sub-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: none !important;
    }

    /* Suppress the plugin's own hover-driven accordion state so it
       can't fight with the click-driven is-active class */
    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item.mega-toggle-on:not(.is-active)
    > ul.mega-sub-menu {
        max-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item
    > ul.mega-sub-menu {
        position: static !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0  !important;

        overflow: hidden !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: none !important;

        transition:
            max-height 350ms ease,
            opacity 220ms ease,
            visibility 0s linear 350ms !important;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item.is-active
    > ul.mega-sub-menu {
        max-height: 1000px !important;

        margin-top: 12px !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transition:
            max-height 350ms ease,
            opacity 220ms ease,
            visibility 0s linear 0s !important;
    }

    /* Level 1 indicator, plus/minus, centred against the single-line heading */
    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item
    > a.mega-menu-link
    > .mega-indicator {
        display: block !important;

        position: absolute !important;
        top: 50% !important;
        right: 9px !important;

        width: 20px !important;
        height: 20px !important;

        margin: -10px 0 0 !important;
        padding: 0 !important;

        font-size: 0 !important;
        line-height: 0 !important;

        background: transparent !important;
        border: 0 !important;

        pointer-events: none !important;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item
    > a.mega-menu-link
    > .mega-indicator::before,
    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item
    > a.mega-menu-link
    > .mega-indicator::after {
        content: "" !important;

        position: absolute !important;

        display: block !important;

        background: var(--sc-menu-h1-color) !important;

        transition:
            opacity 200ms ease,
            transform 220ms ease,
            background-color 200ms ease !important;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item
    > a.mega-menu-link
    > .mega-indicator::before {
        top: 9px !important;
        left: 1px !important;

        width: 18px !important;
        height: 2px !important;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item
    > a.mega-menu-link
    > .mega-indicator::after {
        top: 1px !important;
        left: 9px !important;

        width: 2px !important;
        height: 18px !important;

        opacity: 1 !important;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item.is-active
    > a.mega-menu-link
    > .mega-indicator::after {
        opacity: 0 !important;
        transform: rotate(90deg) !important;
    }

    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item.is-active
    > a.mega-menu-link
    > .mega-indicator::before,
    .popup-mega-menu
    #mega-menu-max_mega_menu_9
    > li.mega-menu-item.is-active
    > a.mega-menu-link
    > .mega-indicator::after {
        background: var(--sc-menu-h1-color-focus) !important;
    }
}

/* ==========================================================
   END: KAIPARA POPUP MEGA MENU
   ========================================================== */