/* Begin critical CSS */
/*
 Copyright Watman & Worth Web Ltd 2018-2023
 Use without modification granted to all our customers.
 Do Not Redistribute
*/
/* 
    Created on : 30 Nov 2023, 10:11:16
    Author     : William Worth <william@watmanworth.co.uk>
*/


 /** Begin CSS Section: defaults */

 /* Begin CSS Part: Base */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   BASE
========================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	width: 100%;
	min-height: 100%;

	font-size: 16px;
	scroll-behavior: smooth;

	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	width: 100%;
	min-height: 100%;

	margin: 0;

	background: var(--rotary-page-bg);
	color: var(--rotary-text);

	font-family: var(--rotary-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;

	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.standard {
	background: var(--rotary-page-bg);
}

img,
picture,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

iframe {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.22em;
}

a:hover {
	text-decoration-color: currentColor;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
figure,
blockquote {
	margin-top: 0;
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 800;
}

button,
input,
select,
textarea {
	font: inherit;
}

::selection {
	background: rgba(11, 74, 143, 0.18);
	color: var(--rotary-blue-dark);
}

/* Full-card overlay links */
.inflate,
.wrap.inflate {
	position: absolute;
	inset: 0;
	z-index: 20;

	display: block;

	color: transparent;
	text-indent: -9999px;
	overflow: hidden;
}

/* Helpful hide class from EOS/admin output */
.hidden,
.site-hide {
	display: none !important;
}

/* Empty components should not leave ghosts */
.empty {
	display: none !important;
}
 /* Begin CSS Part: Layout */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   LAYOUT
========================================== */

:root {
  --rotary-container-narrow: 1140px;
	--rotary-container: 1342px;
	--rotary-container-wide: 1540px;

	--rotary-gutter: clamp(1rem, 4vw, 2rem);

	--rotary-section-sm: clamp(2rem, 5vw, 4rem);
	--rotary-section-md: clamp(3rem, 7vw, 6rem);
	--rotary-section-lg: clamp(4rem, 9vw, 8rem);

	--rotary-radius-sm: 14px;
	--rotary-radius-md: 22px;
	--rotary-radius-lg: 34px;
	--rotary-radius-xl: 46px;

	--rotary-header-height: 122px;
	--rotary-mobile-header-height: 78px;

	--rotary-transition: 220ms ease;
}

/* Main page shell */
.main-content-wrapper {
	position: relative;
	z-index: 1;

	width: 100%;
	background: var(--rotary-page-bg);
}

.main-content {
	width: 100%;
}

/* Reusable page sections */
.ww-page-section {
	position: relative;

	width: 100%;
	padding: var(--rotary-section-md) var(--rotary-gutter);
}

.ww-page-section > * {
	position: relative;
	z-index: 2;
}

.ww-page-section.padding-bottom-clip {padding-bottom:0px !important;}

/* Contained content inside custom sections */
.intro-section,
.service-blocks,
.spot-light-section,
.about-strip,
.service-icons-container {
	width: 100%;
}

/* Common direct content width */
.section-head > *,
.scroller-container,
.about-strip,
.icon-grid {
	width: min(100%, var(--rotary-container));
	margin-left: auto;
	margin-right: auto;
}

/* Split sections */
.split-sect {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.split-sect > .i {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	width: 100%;
}

.split-sect .image-cell,
.split-sect .text-cell {
	position: relative;
	min-width: 0;
}

.split-sect .text-cell {
	display: flex;
	align-items: center;

	padding: clamp(2rem, 5vw, 5rem);
}

.split-sect .text-cell > * {
	width: min(100%, 620px);
}

.split-sect .left-cell {
	justify-content: flex-end;
}

.split-sect .right-cell {
	justify-content: flex-start;
}

/* Map/content split */
.about-strip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

/* Responsive baseline */
@media (max-width: 980px) {
	:root {
		--rotary-header-height: 88px;
	}

	.split-sect > .i,
	.about-strip {
		grid-template-columns: 1fr;
	}

	.split-sect .text-cell {
		padding: clamp(2rem, 8vw, 4rem) var(--rotary-gutter);
	}

	.split-sect .text-cell > * {
		width: min(100%, var(--rotary-container));
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 640px) {
	.ww-page-section {
		padding: clamp(2rem, 8vw, 3rem) var(--rotary-gutter);
	}
}

 /* Begin CSS Part: Desktop Defaults */

 /* Begin CSS Part: Tablet Defaults */

 /* Begin CSS Part: Mobile Defaults */

 /** Begin CSS Section: core */

 /* Begin CSS Part: DISABILITY */

 /* Begin CSS Part: Fonts */

 /* Begin CSS Part: Buttons */

 /* Begin CSS Part: Colours */

 /* Begin CSS Part: Menus */

 /* Begin CSS Part: Responsive Menu */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   RESPONSIVE MENU
========================================== */

.responsive-menu-wrapper {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10001;

	display: none;

	width: 100%;

	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(18px);

	border-bottom: 1px solid rgba(11, 74, 143, 0.12);
	box-shadow: 0 10px 32px rgba(7, 52, 98, 0.08);
}

/* ==========================================
   TOP MOBILE BAR
========================================== */

.responsive-menu {
	position: relative;
	z-index: 10006;

	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;

	min-height: var(--rotary-mobile-header-height);
	padding: 0.65rem var(--rotary-gutter);

	background: rgba(255, 255, 255, 0.97);
}

/* Logo */
.responsive-logo-container {
	min-width: 0;
}

.responsive-logo {
	position: relative;
	width: min(100%, 410px);
}

.responsive-logo img {
	display: block;

	width: min(100%, 380px) !important;
	height: auto !important;
	max-height: 60px;

	object-fit: contain;
	object-position: left center;
}

/* Action buttons */
.responsive-actions-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
}

.responsive-trigger {
	position: relative;

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

	width: 50px;
	height: 50px;
	margin: 0 !important;
	padding: 0 !important;

	background:
		linear-gradient(135deg, var(--rotary-blue), var(--rotary-blue-dark));

	border: 1px solid rgba(255,255,255,0.45);
	border-radius: 999px;

	box-shadow: 0 10px 24px rgba(7, 52, 98, 0.20);

	cursor: pointer;

	transition:
		transform 220ms ease,
		box-shadow 220ms ease,
		background 220ms ease;
}

.responsive-trigger:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(7, 52, 98, 0.27);
}

/* Basket button */
.responsive-actions-container .responsive-trigger:last-child {
	background:
		linear-gradient(135deg, var(--rotary-gold), var(--rotary-gold-dark));
}

.responsive-trigger img {
	display: block;

	width: 24px !important;
	height: 24px !important;

	object-fit: contain;
	object-position: center;

	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.22));
}

/* ==========================================
   DRAWER
========================================== */

.responsive-slave {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10005;

	display: block !important;

	width: min(88vw, 440px);
	height: 100dvh;
	min-height: 100vh;

	padding:
		clamp(6.5rem, 18vw, 7.5rem)
		clamp(1rem, 4vw, 1.35rem)
		clamp(1.2rem, 4vw, 1.5rem);

	background:
		radial-gradient(circle at 18% 10%, rgba(247, 183, 49, 0.24), transparent 28%),
		linear-gradient(160deg, var(--rotary-blue-deep), var(--rotary-blue-dark));

	box-shadow: -24px 0 70px rgba(4, 31, 61, 0.34);

	overflow-y: auto;
	overscroll-behavior: contain;

	transform: translateX(106%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		transform 340ms cubic-bezier(.22,.85,.28,1),
		opacity 240ms ease,
		visibility 0s linear 340ms;
}

/* Open state added by the trigger */
.responsive-slave.open {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
		transform 340ms cubic-bezier(.22,.85,.28,1),
		opacity 240ms ease,
		visibility 0s linear 0s;
}

/* Decorative drawer edge */
.responsive-slave::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	width: 7px;
	height: 100%;

	background:
		linear-gradient(
			180deg,
			var(--rotary-gold),
			var(--rotary-burgundy),
			var(--rotary-blue)
		);
}

/* Important: no decorative text on the drawer */
.responsive-slave::after {
	content: none !important;
	display: none !important;
}

/* ==========================================
   DRAWER MENU PANEL
========================================== */

.responsive-slave-menu {
	position: relative;
	z-index: 2;

	display: block !important;

	width: 100% !important;
	margin: 0 !important;
	padding: 0.6rem !important;

	background: rgba(255, 255, 255, 0.96);

	border: 1px solid rgba(255,255,255,0.48);
	border-radius: 30px;

	box-shadow:
		0 18px 44px rgba(0,0,0,0.20),
		inset 0 1px 0 rgba(255,255,255,0.35);

	overflow: hidden;
}

/* Kill any old menu system behaviour inside the drawer */
.responsive-slave .responsive-slave-menu ul,
.responsive-slave .responsive-slave-menu .menubar,
.responsive-slave .responsive-slave-menu .horizontal {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 0.35rem !important;

	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

.responsive-slave .responsive-slave-menu li {
	display: block !important;

	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

/* ==========================================
   DRAWER MENU LINKS
========================================== */

.responsive-slave .responsive-slave-menu a,
.responsive-slave .responsive-slave-menu a.menu_item {
	position: relative;

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

	width: 100% !important;
	min-height: 58px;
	margin: 0 !important;
	padding: 1rem 1.05rem 1rem 1.15rem !important;

	background: transparent !important;
	color: var(--rotary-blue-dark) !important;

	border: 0 !important;
	border-radius: 20px !important;
	box-shadow: none !important;

	font-family: var(--rotary-font-body);
	font-size: clamp(1.05rem, 4vw, 1.18rem) !important;
	font-weight: 850 !important;
	line-height: 1.12 !important;
	text-align: left !important;
	text-decoration: none !important;
	letter-spacing: -0.01em;

	text-indent: 0 !important;
	overflow: visible !important;

	transition:
		background-color 220ms ease,
		color 220ms ease,
		padding-left 220ms ease,
		transform 220ms ease;
}

.responsive-slave .responsive-slave-menu .link-text {
	display: block !important;

	color: inherit !important;

	line-height: inherit !important;
	text-align: left !important;
}

/* Arrow */
.responsive-slave .responsive-slave-menu a::after,
.responsive-slave .responsive-slave-menu a.menu_item::after {
	content: "";

	flex: 0 0 auto;

	width: 10px;
	height: 10px;
	margin-left: 1rem;

	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;

	opacity: 0.54;

	transform: rotate(45deg);

	transition:
		opacity 220ms ease,
		transform 220ms ease;
}

/* Hover and active */
.responsive-slave .responsive-slave-menu a:hover,
.responsive-slave .responsive-slave-menu a.menu_item:hover,
.responsive-slave .responsive-slave-menu li.active > a,
.responsive-slave .responsive-slave-menu li.active > a.menu_item {
	background: var(--rotary-blue-soft) !important;
	color: var(--rotary-blue) !important;

	padding-left: 1.35rem !important;
}

.responsive-slave .responsive-slave-menu a:hover::after,
.responsive-slave .responsive-slave-menu li.active > a::after {
	opacity: 1;
	transform: translateX(3px) rotate(45deg);
}

/* Focus state */
.responsive-slave .responsive-slave-menu a:focus-visible,
.responsive-trigger:focus-visible {
	outline: 3px solid var(--rotary-focus);
	outline-offset: 3px;
}



/* ==========================================
   ACTIVATION
========================================== */

@media (max-width: 980px) {
	.responsive-menu-wrapper {
		display: block;
	}

	.header-wrapper {
		display: none;
	}
}

@media (min-width: 981px) {
	.responsive-menu-wrapper {
		display: none !important;
	}

	.responsive-slave {
		display: none !important;
	}
}

/* ==========================================
   SMALL SCREENS
========================================== */

@media (max-width: 480px) {
	.responsive-menu {
		gap: 0.75rem;
	}

	.responsive-logo img {
		max-height: 52px;
	}

	.responsive-trigger {
		width: 44px;
		height: 44px;
	}

	.responsive-trigger img {
		width: 22px !important;
		height: 22px !important;
	}

	.responsive-slave {
		width: min(94vw, 440px);

		padding:
			clamp(6rem, 19vw, 7rem)
			1rem
			1.25rem;
	}

	.responsive-slave-menu {
		border-radius: 26px;
		padding: 0.5rem !important;
	}

	.responsive-slave .responsive-slave-menu a,
	.responsive-slave .responsive-slave-menu a.menu_item {
		min-height: 54px;
		border-radius: 18px !important;
	}
}
 /* Begin CSS Part: Editor Overrides */

 /* Begin CSS Part: Specials */

 /* Begin CSS Part: Effects */

 /* Begin CSS Part: Site Design */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   CRITICAL HEADER
========================================== */

.header-wrapper {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10000;

	width: 100%;

	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(18px);

	border-bottom: 1px solid rgba(11, 74, 143, 0.12);
	box-shadow: 0 10px 32px rgba(7, 52, 98, 0.08);
}

.header-inner {
	display: grid;
	grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;

	width: min(100%, var(--rotary-container-wide));
	min-height: var(--rotary-header-height);

	margin: 0 auto;
	padding: 0 var(--rotary-gutter);
}

.header-logo {
	width: min(100%, 520px);
}

.header-logo a,
.logo-main-link {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.logo-main {
	display: block;

	width: min(100%, 500px);
	height: auto;
	max-height: 76px;

	object-fit: contain;
	object-position: left center;
}

.header-navigation {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 0.85rem;

	min-width: 0;
}

.header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.85rem;
}

.social-block p {
	margin: 0;
}

.social-block a {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	background: var(--rotary-blue-soft);
	border: 1px solid rgba(11, 74, 143, 0.14);
	border-radius: 999px;

	transition:
		transform var(--rotary-transition),
		background-color var(--rotary-transition);
}

.social-block a:hover {
	transform: translateY(-2px);
	background: var(--rotary-gold-soft);
}

.social-block img {
	width: 22px !important;
	height: 22px !important;
	object-fit: contain;
}

/* Header menu */
.header-menu {
	width: 100%;
}

.main-menu ul,
.responsive-slave-menu ul,
.footer-wrapper ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;

	margin: 0;
	padding: 0;

	list-style: none;
}

.main-menu li,
.responsive-slave-menu li,
.footer-wrapper li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-menu a,
.responsive-slave-menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.65rem 0.78rem;

	color: var(--rotary-blue-dark);

	border-radius: 999px;

	font-size: 0.94rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;

	transition:
		background-color var(--rotary-transition),
		color var(--rotary-transition);
}

.main-menu a:hover,
.main-menu .active a,
.responsive-slave-menu a:hover,
.responsive-slave-menu .active a {
	background: var(--rotary-blue-soft);
	color: var(--rotary-blue);
}

@media (max-width: 980px) {
	.header-wrapper {
		display: none;
	}
}
 /* Begin CSS Part: User Design */

 /* Begin CSS Part: Site Components */

 /* Begin CSS Part: Results */

 /* Begin CSS Part: Pages */

 /** Begin CSS Section: modules */

 /* Begin CSS Part: 404 */

 /* Begin CSS Part: Admin */

 /* Begin CSS Part: Auth */

 /* Begin CSS Part: Auto Pdf */

 /* Begin CSS Part: Basket */

 /* Begin CSS Part: Calendar */

 /* Begin CSS Part: Categories */

 /* Begin CSS Part: Checkout */

 /* Begin CSS Part: Collation */

 /* Begin CSS Part: Collation Admin */

 /* Begin CSS Part: Cookies */

#cookie-compliance {
    z-index: 1000000000;
    position: fixed;
    bottom: 0px;
    background-color: #333 !important;
    border-top: 2px solid #fff !important;
    width: 100%;
    left: 0px;
    text-align: left !important;
}

.layout-component.cookie-selection * {
    text-align: left !important;
}

#cookie-compliance .mod_cookies {
    padding: 24px !important;
}

#cookie-compliance * {
    color:#fff !important;
}

#cookie-compliance {
    overflow:hidden;
}

.layout-component.cookie-selection .checkbox input {
    display:inline-block;
    width:auto;
}
.layout-component.cookie-selection .checkbox span {
    display: inline-block;
    width: auto;
    font-weight: bold;
    vertical-align: top;
    line-height: 16px;
    font-size: 16px;
}

.cookie-selection .description {
    font-size:14px;
}

.layout-component.cookie-selection p, .layout-component.cookie-selection p a {
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 12px !important;
}

.layout-component.cookie-selection p {
    display: inline-block;
}

#cookie-compliance div.compliance-ok{
    display: inline-block;
    background-color: green;
    color: #fff;
    padding: 2px 12px;
    font-size: 12px;
    border-radius: 2px;
    cursor:pointer;
}


.cookie-selection > .cookie-selection {
    border-top: 1px solid #fff;
    padding: 12px;
}

.layout-component.cookie-selection .button {
    border: 1px solid #fff !important;
    background-color: transparent !important;
    font-size: 14px;
    padding: 8px 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

#cookie-compliance div.saved-mask {
    position: absolute;
    height: 100%;
    width:100%;
    background-color: #333 !important;
    border-top: 2px solid #fff !important;
    text-align: center;
    font-size:20px;
    padding:24px;
    color:#fff;
}

 /* Begin CSS Part: Crm */

 /* Begin CSS Part: Currency Converter */

 /* Begin CSS Part: Discount */

 /* Begin CSS Part: Email Template */

 /* Begin CSS Part: Form */

 /* Begin CSS Part: Google Analytics */

 /* Begin CSS Part: Home */

 /* Begin CSS Part: Memorial */

 /* Begin CSS Part: Multi User */

 /* Begin CSS Part: News Letter */

 /* Begin CSS Part: Order Manager */

 /* Begin CSS Part: Orders */

 /* Begin CSS Part: Payment Gateway */

 /* Begin CSS Part: Qanda */

 /* Begin CSS Part: Redirect */

 /* Begin CSS Part: Review */

 /* Begin CSS Part: Scroller */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   HERO BANNERS
========================================== */

/*
	Generic hero banner base.

	Use this as the shared banner foundation:
	- .hero-banner.scroller-banner
	- .hero-banner.inline-image-banner
	- .hero-banner.background-image-banner
*/

.hero-banner {
	position: relative;
	isolation: isolate;

	width: 100%;
	min-height: clamp(620px, 82vh, 920px);

	background: var(--rotary-blue-deep);
	color: var(--rotary-white);

	overflow: hidden;
}

/* Keep the first inner wrapper behaving */
.hero-banner > .i {
	position: relative;

	width: 100%;
	min-height: inherit;
	height: 100%;
}

/* Generic content layer */
.hero-banner .nested-banner-content {
	position: relative;
	z-index: 5;

	width: 100%;
	min-height: inherit;
}

.hero-banner .nested-banner-content > .i {
	display: flex;
	align-items: center;

	width: min(100%, var(--rotary-container-wide));
	min-height: inherit;

	margin: 0 auto;
	padding:
		clamp(7rem, 13vw, 12rem)
		var(--rotary-gutter)
		clamp(5rem, 9vw, 8rem);
}

.hero-banner .nested-banner-content .content {
	position: relative;
	z-index: 6;

	width: min(100%, 980px);
}

/* Hero heading */
.hero-banner h1 {
	max-width: 11ch;
	margin: 0 0 clamp(1.4rem, 3vw, 2rem);

	color: var(--rotary-white);

	font-family: var(--rotary-font-heading);
	font-size: clamp(3.4rem, 8.8vw, 8.8rem);
	font-weight: 950;
	line-height: 0.86;
	letter-spacing: -0.078em;

	text-wrap: balance;

	text-shadow:
		0 14px 38px rgba(0, 0, 0, 0.38),
		0 3px 10px rgba(0, 0, 0, 0.24);
}

/* Gold underline */
.hero-banner h1::after {
	content: "";
	display: block;

	width: clamp(104px, 15vw, 190px);
	height: 7px;
	margin-top: clamp(1.1rem, 2.5vw, 1.75rem);

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			rgba(247, 183, 49, 0.22)
		);

	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(247, 183, 49, 0.32);
}

/* Button row */
.hero-banner .action-buttons {
	margin-top: clamp(1.4rem, 3vw, 2.35rem);
}

.hero-banner .action-buttons p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	align-items: center;
	justify-content: flex-start;

	margin: 0;
}

.hero-banner .button {
	min-height: 56px;
	padding: 1rem 1.5rem;

	font-size: 1rem;
}

/* Hero secondary glass button */
.hero-banner .button.webcam {
	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.18),
			rgba(255,255,255,0.08)
		);

	color: var(--rotary-white) !important;

	border: 1px solid rgba(255,255,255,0.38);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(14px);
}

.hero-banner .button.webcam:hover {
	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.28),
			rgba(255,255,255,0.12)
		);

	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

/* ==========================================
   HOME HERO: SCROLLER BANNER
========================================== */

.hero-banner.scroller-banner {
	min-height: clamp(640px, 86vh, 940px);
}

/* Scroller component shell */
.hero-banner.scroller-banner .banner-scroller {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;

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

	background: var(--rotary-blue-deep);

	overflow: hidden !important;
}

/* Scroller container */
.hero-banner.scroller-banner .slide-container {
	position: relative !important;

	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;

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

	overflow: hidden !important;
}

/*
	Fade scrollers behave best when slides are stacked.
	This prevents the second slide's negative top positioning from dragging
	the content layer out of view.
*/
.hero-banner.scroller-banner .slide {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;

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

	background: var(--rotary-blue-deep);

	overflow: hidden !important;
}

/* Slide inner wrapper */
.hero-banner.scroller-banner .slide > div {
	position: relative !important;

	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;

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

/* Background image component */
.hero-banner.scroller-banner .background-image {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;

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

	overflow: hidden !important;
}

/* Actual image div */
.hero-banner.scroller-banner .banner-background-image {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;

	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	transform: scale(1.01);

	filter:
		saturate(1.04)
		contrast(1.04);

	transition:
		transform 5200ms ease,
		filter 5200ms ease;
}

/* Gentle movement on active slide */
.hero-banner.scroller-banner .slide[style*="z-index: 1"] .banner-background-image {
	transform: scale(1.06);
}

/* Dark cinematic overlay, now inside each slide */
.hero-banner.scroller-banner .slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;

	background:
		linear-gradient(
			90deg,
			rgba(4, 31, 61, 0.92) 0%,
			rgba(4, 31, 61, 0.78) 32%,
			rgba(7, 52, 98, 0.48) 62%,
			rgba(4, 31, 61, 0.20) 100%
		);

	pointer-events: none;
}

/* Gloss layer, also inside each slide */
.hero-banner.scroller-banner .slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;

	background:
		radial-gradient(
			circle at 18% 28%,
			rgba(247, 183, 49, 0.22),
			transparent 28%
		),
		radial-gradient(
			circle at 78% 12%,
			rgba(255, 255, 255, 0.14),
			transparent 30%
		),
		linear-gradient(
			135deg,
			rgba(255,255,255,0.12) 0%,
			transparent 34%,
			rgba(255,255,255,0.05) 66%,
			transparent 100%
		);

	mix-blend-mode: screen;
	opacity: 0.9;

	pointer-events: none;
}

/* Content layer inside each slide */
.hero-banner.scroller-banner .slide .nested-banner-content {
	position: absolute !important;
	inset: 0 !important;
	z-index: 10;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
	min-height: inherit !important;

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

	pointer-events: none;
}

/* Inner content wrapper */
.hero-banner.scroller-banner .slide .nested-banner-content > .i {
	display: flex !important;
	align-items: center !important;

	width: min(100%, var(--rotary-container-wide)) !important;
	height: 100% !important;
	min-height: inherit !important;

	margin: 0 auto !important;
	padding:
		clamp(7rem, 13vw, 12rem)
		var(--rotary-gutter)
		clamp(5rem, 9vw, 8rem) !important;
}

/* Actual text component */
.hero-banner.scroller-banner .slide .content {
	position: relative !important;
	z-index: 11;

	display: block !important;

	width: min(100%, 980px) !important;
	max-width: 980px !important;

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

	pointer-events: auto;
}

/* Soft glow behind content */
.hero-banner.scroller-banner .slide .content::before {
	content: "";
	position: absolute;
	left: -12%;
	top: 50%;
	z-index: -1;

	width: min(760px, 80vw);
	height: min(540px, 62vw);

	background:
		radial-gradient(
			ellipse,
			rgba(4, 31, 61, 0.62),
			rgba(4, 31, 61, 0.28) 44%,
			transparent 74%
		);

	transform: translateY(-50%);

	pointer-events: none;
}

/* Decorative lower glint */
.hero-banner.scroller-banner .slide .nested-banner-content::after {
	content: "";
	position: absolute;
	left: var(--rotary-gutter);
	bottom: clamp(1.5rem, 4vw, 3rem);
	z-index: 12;

	width: min(460px, 48vw);
	height: 1px;

	background:
		linear-gradient(
			90deg,
			rgba(255,255,255,0.48),
			rgba(247,183,49,0.38),
			transparent
		);

	pointer-events: none;
}

/* ==========================================
   SCROLLER PAGER
========================================== */

.hero-banner.scroller-banner .scroller-pager {
	position: absolute !important;
	left: var(--rotary-gutter) !important;
	bottom: clamp(2.2rem, 5vw, 4rem) !important;
	z-index: 40 !important;

	display: block !important;

	width: auto !important;
	height: auto !important;

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

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

.hero-banner.scroller-banner .sp-links {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;

	width: auto !important;
	margin: 0 !important;
	padding: 0.45rem !important;

	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 999px;

	box-shadow: 0 12px 32px rgba(0,0,0,0.18);

	backdrop-filter: blur(12px);
}

.hero-banner.scroller-banner .sp-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;

	background: rgba(255,255,255,0.18);
	color: rgba(255,255,255,0.82);

	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;

	font-size: 0.84rem;
	font-weight: 900;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color 220ms ease,
		color 220ms ease,
		transform 220ms ease,
		border-color 220ms ease;
}

.hero-banner.scroller-banner .sp-link:hover,
.hero-banner.scroller-banner .sp-link.active {
	background: var(--rotary-gold);
	color: var(--rotary-blue-deep);

	border-color: rgba(255,255,255,0.34);

	transform: translateY(-1px);
}

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

@media (max-width: 980px) {
	.hero-banner,
	.hero-banner.scroller-banner {
		min-height: clamp(600px, 78vh, 820px);
	}

	.hero-banner .nested-banner-content > .i,
	.hero-banner.scroller-banner .slide .nested-banner-content > .i {
		align-items: flex-end !important;

		padding:
			clamp(6rem, 16vw, 8rem)
			var(--rotary-gutter)
			clamp(4.5rem, 12vw, 6rem) !important;
	}

	.hero-banner h1 {
		font-size: clamp(3rem, 12vw, 6.2rem);
		line-height: 0.9;
	}

	.hero-banner.scroller-banner .slide::before {
		background:
			linear-gradient(
				180deg,
				rgba(4, 31, 61, 0.34) 0%,
				rgba(4, 31, 61, 0.72) 48%,
				rgba(4, 31, 61, 0.94) 100%
			);
	}

	.hero-banner.scroller-banner .banner-background-image {
		background-position: center top;
	}

	.hero-banner.scroller-banner .scroller-pager {
		left: var(--rotary-gutter) !important;
		bottom: clamp(1.5rem, 6vw, 2.3rem) !important;
	}
}

@media (max-width: 640px) {
	.hero-banner,
	.hero-banner.scroller-banner {
		min-height: clamp(560px, 80vh, 760px);
	}

	.hero-banner .nested-banner-content > .i,
	.hero-banner.scroller-banner .slide .nested-banner-content > .i {
		padding:
			clamp(5.5rem, 18vw, 7rem)
			var(--rotary-gutter)
			clamp(4.25rem, 14vw, 5.5rem) !important;
	}

	.hero-banner h1 {
		max-width: 10.5ch;

		font-size: clamp(2.8rem, 15vw, 4.8rem);
		line-height: 0.9;
	}

	.hero-banner h1::after {
		width: 112px;
		height: 5px;
	}

	.hero-banner .action-buttons p {
		flex-direction: column;
		align-items: stretch;

		width: min(100%, 320px);
	}

	.hero-banner .button {
		width: 100%;
		min-height: 52px;
	}

	.hero-banner.scroller-banner .sp-link {
		width: 30px !important;
		height: 30px !important;

		font-size: 0.78rem;
	}
}

@media (max-width: 420px) {
	.hero-banner .nested-banner-content > .i,
	.hero-banner.scroller-banner .slide .nested-banner-content > .i {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.hero-banner h1 {
		font-size: clamp(2.55rem, 16vw, 4.1rem);
	}

	.hero-banner.scroller-banner .scroller-pager {
		left: 1rem !important;
	}
}
 /* Begin CSS Part: Search */

 /* Begin CSS Part: Search Results */

 /* Begin CSS Part: Seo */

 /* Begin CSS Part: Shipping */

 /* Begin CSS Part: Snippets */

 /* Begin CSS Part: Social Media */

 /* Begin CSS Part: Sub Layout */

 /* Begin CSS Part: System Manager */

 /* Begin CSS Part: User */

 /* Begin CSS Part: Warning */