/*  Main Stylesheet  */

@import url("fonts.css");

html, div {
	scroll-padding-top: 85px;
	/* Offsets all anchor jumps automatically to accommodate the page nav bar */
	scroll-behavior: smooth;
}

section {
	scroll-margin-top: 0;
	/* scroll-margin-top preferred for sections */
	scroll-behavior: smooth;
}

summary {
	scroll-margin-top: 40px;
	/* scroll-margin-top preferred for sections */
	scroll-behavior: smooth;
}

/* IMPORTANT:: Parallax PAUSE IS ON - see bottom of CSS file */


.row:after {
	content: "";
	display: table;
	clear: both;
}

.video-controls p.large,
.video-controls p.small {
	position: absolute;
	top: 85px;
	right: 35px;
	bottom: 150px;
	color: #d3d3d3 !Important;
	font-weight: 400;
	font-size: 1.1rem !Important;
	filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.8));
}

.video-controls p.small {
	right: 15px !Important;
}

.video-controls a.large:link,
.video-controls a.large:visited,
.video-controls a.large:hover,
.video-controls a.large:active {
	display: inline-block;
	text-decoration: none;
	color: #d3d3d3 !Important;
}


.video-controls a.small:link,
.video-controls a.small:visited,
.video-controls a.small:hover,
.video-controls a.small:active {
	display: inline-block;
	text-decoration: none;
	color: #d3d3d3 !Important;
}

.change-spacing {
    position: relative;
    left: 7px;
}

.pause-spacing {
    position: relative;
    left: 3px;
}

.fas.fa-pause,
.fa-solid.fa-angles-right {
	font-size: 1.2rem;
    position: relative;
    top: 1px;
}

@media only screen and (min-width: 501px) {
	.video-controls a.small,
	.video-controls p.small	{
		display: none;
	}

	.video-controls a.large,
	.video-controls p.large	{
		display: block;
	}
}

@media only screen and (max-width: 500.98px) {
	.video-controls a.small,
	.video-controls p.small	{
		display: block;
	}

	.video-controls a.large,
	.video-controls p.large	{
		display: none;
	}
}

html,
body {
	font-family: "montserrat-regular", sans-serif;
	text-rendering: optimizeLegibility;
	font-style: normal;
	font-size: 10px;
	font-kerning: normal;
	height: 100%;
	width: 100%;
}

body {
	background: white;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: none;
}

button,
input,
textarea,
.modal-select {
	font-family: inherit;
	/* Crucial because browsers use standard font by default regardless of global CSS settings */
}

hr {
	border: solid rgba(0, 0, 0, 0.1);
	border-width: 0.15rem 0 0;
	clear: both;
	margin: 2rem auto 1.5rem auto;
	height: 0;
	width: 90%;
}

p {
	color: #575757;
}

p.testimonials {
	color: #151515;
}

p:not(.introline, .addons-subtitle, .footnote, :is(.home-content-left, .home-content-right, #logobox, #logobox2, .pricing-table, .faq-search-wrapper, #footer, .testimonials,  .addons-renewals-section, .modal2-content) p) {
	font-family: "montserrat-light", sans-serif;
	font-size: 1.7rem;
	line-height: 1.6;
	color: #575757;
	margin-top: 0rem;
	margin-bottom: 1.5rem;
}

summary,
li {
	font-family: "montserrat-light", sans-serif;
	line-height: 1.6;
	color: #575757;
	margin-top: 0rem;
	margin-bottom: 1.5rem;
}

p.footnote {
	font-family: "montserrat-light", sans-serif;
	font-size: 1.7rem;
	line-height: 1.6;
	color: #575757;
	font-style: italic;
	text-align: center;
	margin-bottom: 6rem;
}

p.introline, p.addons-subtitle {
	font-family: "montserrat-light", sans-serif;
	margin-bottom: 4rem;
	font-size: 2rem;
	text-align: center;
	line-height: 1.65;
	margin-left: 0;
	margin-right: 0;
}

.row {
	display: block;
	width: 100%;
	max-width: 1170px;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
	margin-left: auto !important;
	/* Forces both left and right to auto */
	margin-right: auto !important;
	/* Forces both left and right to auto */
	float: none;
	/* Ensure no floats are breaking the centering */
}

/* Nav highlight */

#header-nav-wrap ul li.current a {
	color: #ffffff !important;
}

li.current a.smoothscroll {
	color: #ffffff !important;
	opacity: 1 !important;
}

/* END Nav highlight */

.h2-background {
	height: 75px;
	width: 100%;
	background-image: url('../images/arrows-large.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin: 2rem 0 1rem 0;
}

h2.header {
	font-size: 3.4rem;
	text-align: center;
	line-height: 1.324;
	color: #151515;
	position: relative;
	margin: auto;
	margin-bottom: 3rem;
	/* This is crucial here to get the spacing between the underlining and the next paragraph */
}

h2.left-header {
	text-align: left;
	font-size: 3.4rem;
	line-height: 1.324;
	color: #151515;
	position: relative;
	padding-bottom: 3rem;
	margin: auto;
}

h3 {
	font-size: 2.75rem;
	text-align: center;
	line-height: 1.324;
	color: #555555;
	margin-top: 5rem;
}

.home-content-left {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	width: auto;
	height: auto;
	padding-left: 45px;
	padding-bottom: 5rem;
}

.home-content-right {
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
	width: 51%;
	height: auto;
	padding-right: 45px;
	padding-bottom: 5rem;
}

.home-content-right p {
	font-family: "montserrat-extrabold", sans-serif;
	font-style: italic;
	line-height: 0.69;
	color: #EAE9E9;
	text-align: right;
	margin-bottom: 3rem;
	text-shadow: none;
	filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.4));
	/* Drop shadow does not cast shadows on adjacent lines of text */
}

.home-content-right h1, 
.home-content-right .alt-h1 {
	font-size: 1.8rem;
	line-height: 1.2;
	color: #cccccc;
	margin-top: 2rem;
	margin-right: 0;
	margin-left: 0;
	/* important */
	margin-bottom: 0;
	text-align: right;
	text-shadow: none;
	filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.4));
	/* Drop shadow does not cast shadows on adjacent lines of text */
}

/* Extra styling for title */

@media only screen and (min-width: 1195px) {

	.home-content .extra-wide {
		display: block;
	}

	.home-content .wide {
		display: none;
	}

	.home-content .narrow {
		display: none;
	}

	.Reet-adjust1 {
		position: relative;
		left: 2px;
		top: -2px;
		font-size: 8rem;
	}

	.h1-adjust1 {
		position: relative;
		font-size: 11rem;
		left: -5px;
	}

	.G-adjust {
		position: relative;
		left: 2px;
	}

	.Reet-adjust2 {
		position: relative;
		left: 10px;
		top: -1px;
		font-size: 9rem;
	}

	.h1-adjust2 {
		position: relative;
		font-size: 12rem;
		left: 0px;
	}

	.S-adjust {
		position: relative;
		left: 3px;
	}

	.rt-adjust {
		position: relative;
		left: -4px;
	}
}

@media only screen and (min-width: 1121px) and (max-width: 1194px) {

	.home-content .extra-wide {
		display: block;
	}

	.home-content .wide {
		display: none;
	}

	.home-content .narrow {
		display: none;
	}

	.Reet-adjust1 {
		position: relative;
		left: 2px;
		top: -2px;
		font-size: 7rem;
	}

	.h1-adjust1 {
		position: relative;
		font-size: 11rem;
		left: -5px;
	}

	.G-adjust {
		position: relative;
		left: 2px;
	}

	.Reet-adjust2 {
		position: relative;
		left: 10px;
		top: -1px;
		font-size: 8rem;
	}

	.h1-adjust2 {
		position: relative;
		font-size: 11rem;
		left: 0px;
	}

	.S-adjust {
		position: relative;
		left: 3px;
	}

	.rt-adjust {
		position: relative;
		left: -4px;
	}
}

@media only screen and (min-width: 821px) and (max-width: 1120px) {

	.home-content-right h1,
	.home-content-right	.alt-h1 {
		font-size: 1.7rem;
	}

	.home-content .wide {
		display: block;
	}

	.home-content .extra-wide {
		display: none;
	}

	.home-content .narrow {
		display: none;
	}

	.Reet-adjust1 {
		position: relative;
		left: -23px;
		top: 8px;
		font-size: 7.5rem;
	}

	.h1-adjust1 {
		position: relative;
		font-size: 11rem;
		left: -9px;
	}

	.G-adjust {
		position: relative;
		left: 2px;
	}

	.Reet-adjust2 {
		position: relative;
		left: -34px;
		top: 8px;
		font-size: 8.5rem;
	}

	.h1-adjust2 {
		position: relative;
		font-size: 12rem;
		left: -5px;
	}

	.S-adjust {
		position: relative;
		left: 3px;
	}

	.rt-adjust {
		position: relative;
		left: -4px;
	}

}

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

	.home-content-right h1, 
	.home-content-right .alt-h1 {
		font-size: 1.5rem;
		display: flex;
		text-align: center;
	}
	
	.home-content-right p  {
		text-align: center;
		margin-right: 0;
		margin-left: 0;
	}

	.home-content-right p {
		font-size: 2.65rem;
	}

	.home-content .extra-wide {
		display: none;
	}

	.home-content .wide {
		display: none;
	}

	.home-content .narrow {
		display: block;
	}

	.Reet-Gd-adjust {
		position: relative;
		right: 4px;
	}

	.Reet-adjust1 {
		position: relative;
		left: 14px;
		top: 8px;
		font-size: 7rem;
	}

	.h1-adjust1 {
		position: relative;
		font-size: 9.5rem;
		left: -4px;
	}

	.G-adjust {
		position: relative;
		left: 2px;
	}

	.Reet-adjust2 {
		position: relative;
		left: 10px;
		top: 8px;
		font-size: 8rem;
	}

	.h1-adjust2 {
		position: relative;
		font-size: 10.5rem;
		left: -5px;
	}

	.S-adjust {
		position: relative;
		left: 3px;
	}

	.rt-adjust {
		position: relative;
		left: -4px;
	}
}

/* Kerning and extra styles for logo */

.L-kerning {
	position: relative;
	left: 2px;
}

.AT-kerning {
	position: relative;
	left: 6px;
	font-size: smaller;
	bottom: 4px;
}

.IN-THE-kerning {
	position: relative;
	left: 5px;
}

@media only screen and (min-width: 661px) {
	.logo-box-small {
		display: none;
	}

	.logo-box-large {
		display: block;
	}
}

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

	.logo-box-small {
		display: block;
	}

	.logo-box-large {
		display: none;
	}

	.L-kerning-sm {
		position: relative;
		left: 1px;
	}

	.AT-kerning-sm {
		position: relative;
		left: 3px;
		font-size: smaller;
		bottom: 2px;
	}

	.IN-THE-kerning-sm {
		position: relative;
		left: 3px;
	}
}

/* +++++++++++++++++++++++++++++++++ */

b {
	font-weight: bold;
}

i {
	font-style: italic;
}

li {
	position: relative;
	display: list-item;
}

#openModalBtn,
input[type="submit"],
input[type="reset"],
input[type="button"],
button.button-primary {
	position: relative;
	display: inline-block;
	background-color: #62e640;
	font-weight: normal;
	font-size: 1.4rem;
	color: #ffffff;
	padding: 0 2rem;
	height: 4rem;
	line-height: calc(4rem - 0.1rem);
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	border-radius: .5rem;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border: 0;
	margin: 0;
}

#openModalBtnfooter,
input[type="submit"],
input[type="reset"],
input[type="button"],
button.button-primary,
button.button-secondary {
	position: relative;
	display: inline-block;
	background-color: #62e640;
	font-weight: normal;
	font-size: 1.4rem;
	color: #ffffff;
	padding: 0 2rem;
	height: 4rem;
	line-height: calc(4rem - 0.1rem);
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	border-radius: .5rem;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border: 0;
	margin: 0;
}

li.close-button input[type="submit"],
li.close-button input[type="reset"],
li.close-button input[type="button"],
li.close-button button {
	position: relative;
	display: inline-block;
	background-color: #cecece47;
	font-weight: normal;
	font-size: 1.4rem;
	color: #ffffff;
	padding: 0 2rem;
	height: 4rem;
	line-height: calc(4rem - 0.1rem);
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	border-radius: .5rem;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border: 0;
	margin: 0;
}

/* FAQ search button */
.FAQ-content button.search-go {
	background: #39b54a;
	height: 3.6rem;
	line-height: 0;
	width: fit-content;
}

/* footer button */
.footer-subscribe input[type="submit"].button-primary,
.footer-subscribe input[type="reset"].button-primary,
.footer-subscribe input[type="button"].button-primary,
.footer-subscribe button.button-primary {
	top: 8px;
}

.arrow {
	display: inline;
	/* the default for span */
	padding: 12px;
	background-image: url('https://www.ianlittlegas.co.uk/test/images/arrows-large.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 5%;
}

pre,
blockquote,
figure,
table,
p,
ul,
ol,
dl,
form {
	margin-bottom: 3rem;
}

/* .pricing-notes-section {
	display: none;
}

.pricing-notes-section.is-visible {
    display: block;
} */

/** --------------------------- INLINE IMAGES AND TEXT SECTIONS --------------------------------- */

.inline-section {
	display: flex;
	column-gap: 20px;
}

.image-inline {
	display: block;
    height: auto;
	width: 100%;
	max-width: 420px;
	flex: 1;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding-top: 7px;
	/* Image will start shifting down from where the padding ends */
	background-origin: content-box;
	background-position: top left;
	margin-bottom: 2.2rem;
}

.image-container  {
	width: 100%;
	max-width: 420px;
	flex: 1;
	margin-bottom: 2.2rem;
	margin-left: auto;
	margin-right: auto;
}

.text-inline {
	width: auto;
	flex: 1;
	margin-bottom: 2.2rem;
}

.text-inline p {
	line-height: 1.6;
	margin-bottom: 2.2rem;
}

.button-inline {
	position: relative;
	display: block;
	right: 0;
	margin-left: auto;
}

@media only screen and (max-width: 760px) {
	.inline-section {
		display: block;
	}

	section:not(#FAQ) .text-inline {
		text-align: center;
	}
}

/** START OF KEY SECTIONS */

/** --------------------------- ABOUT --------------------------------- */

#about {
	min-height: 0;
	/* tweaked by DAS */
	background: #ffffff;
	padding-top: 0;
	overflow: hidden;
}

#about .row {
	width: 94%;
	max-width: 1170px;
	margin: 50px auto;
	margin-bottom: 9rem;
}

#about p {
	margin-bottom: 1rem;
}

#about .pull-quote p {
	margin-bottom: 3rem;
}


/* ------------------------------------------------------------------- 
 * responsive:
 * about 
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1090px) {
	.h2 {
		padding: 0.5rem 1.1rem;
	}
}

@media only screen and (max-width: 550px) {
	.quote-source p {
		padding-top: 6rem;
	}
}

/** --------------------------- ESSENTIALS --------------------------------- */

#essentials {
	padding-top: 7.2rem;
	padding-bottom: 3rem;
	min-height: 0;
	/* tweaked by DAS */
	background: #ffffff;
	overflow: hidden;
}

#essentials .row {
	width: 94%;
	max-width: 1170px;
	margin: 50px auto;
	margin-bottom: 9rem;
}

#essentials .addendum,
#set-up .addendum {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * essentials 
 * ------------------------------------------------------------------- */

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

/** --------------------------- SET-UP --------------------------------- */

#set-up {
	padding-top: 7.2rem;
	padding-bottom: 6rem;
	min-height: 0;
	/* tweaked by DAS */
	background: white;
	overflow: hidden;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * set-up 
 * ------------------------------------------------------------------- */

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

/** --------------------------- ADVANCED --------------------------------- */

#advanced {
	padding-top: 7.2rem;
	padding-bottom: 6rem;
	min-height: 0;
	overflow: hidden;
}

#advanced .row {
	width: 84%;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * advanced 
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 960px) {
#advanced .row {
	width: 94%;
}
}

/** --------------------------- FAQs --------------------------------- */

#FAQ {
	padding-top: 7.2rem;
	padding-bottom: 6rem;
	min-height: 0;
	background: white;
	overflow: hidden;
}

.FAQ-content p,
.FAQ-content li {
	font-size: 1.6rem;
	line-height: 1.4;
	font-style: normal;
	color: #575757;
	left: 20px;
	padding-right: 20px;
}

.FAQ-content h3 {
	display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
	text-align: center;
}

.FAQ-content summary {
	font-size: 1.75rem;
	font-style: normal;
	line-height: 1.2;
	color: #535353;
	margin-top: 2rem;
	margin-bottom: 2rem;
	margin-right: 2rem;
	cursor: pointer;
	transition: all 150ms ease-in-out;
	padding: 0 16px;
}

.FAQ-content .accordion-item summary {
	font-weight: bold;
}

.FAQ-content blockquote:before,
.FAQ-content blockquote:after {
	content: none;
}

/* Modern way to hide the arrow of accordian summaries */
.FAQ-content summary {
	list-style: none;
}

/* For older versions of Chrome/Safari */
.FAQ-content summary::-webkit-details-marker {
	display: none;
}

.FAQ-content details.accordion-item {
	background-color: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.12);

	>div,
	>p {
		padding: 0 16px;
		margin-bottom: 1.5rem;
	}

	&:not(:last-child) {
		margin-bottom: 16px;
	}
}

.FAQ-content details[open] summary {
	margin-bottom: 2rem;
}

.faq-search-wrapper {
	width: fit-content;
	display: flex;
	flex-direction: row;
	/* Horizontal by default */
	flex-wrap: wrap;
	/* Allow wrapping */
	gap: 10px;
	margin-left: auto;
	margin-right: auto;
}

.faq-search-wrapper input {
	font-family: "montserrat-light", sans-serif;
}

.faq-search-wrapper .fit1 .fit2 .fit3 {
	display: flex;
	flex: 0 1 auto;
	/* Sizes strictly to content; shrinks if needed but won't stretch */
	white-space: nowrap;
}

.faq-search-wrapper p {
	font-family: "montserrat-light", sans-serif;
	font-size: 1.5rem;
	color: #575757;
	margin-top: 7px;
	margin-bottom: 0;
	text-align: right;
	padding-right: 0;
}

.faq-search-wrapper input {
	flex-grow: 1;
	width: 200px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 0;
}

.faqResultsList {
	margin-top: 15px;
	display: none;
	padding: 15px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.faq-results-wrapper {
	margin-bottom: 20px;
	width: 80%;
	margin: auto;
}

.faqResultsList p {
	font-size: 1.7rem;
	line-height: 1.5;
	color: #575757;
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-weight: bold;
}

.faqResultsList ul {
	margin-bottom: 0;
}

.faqResultsList li {
	font-size: 1.5rem;
	line-height: 1.4;
	margin-left: 16px;
	margin-bottom: 10px;
}

/* Accordian close button */

/* Prepare the accordion container for absolute child placement */
.accordion-item {
	position: relative; /* padding-right: 80px;  Creates blank space on the right side for the button */
}

/* Hide the close button completely when the accordion is collapsed */
.accordion-item:not([open]) .close-accordion {
	display: none;
}

/* Style and position the close button next to the summary line */
.accordion-item[open] .close-accordion {
	position: absolute;
	top: 25px;
	right: 12px;
	line-height: 0;
	background: #f9fafb;
	color: #585353;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 2rem;
	font-weight: normal;
	transition: background 0.2s ease, transform 0.1s ease;
	animation: fadeInIcon 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.container {
	margin-top: 4rem;
}

details.category-accordion h2 {
	margin: 0;
}

details.category-accordion[open] {
    margin: 2rem 0rem 6rem 0rem;
}

.category-accordion[open] .close-category-accordion {
	position: absolute;
	top: 15px;
	right: 12px;
	line-height: 0;
	background: #f9fafb;
	color: #585353;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 2rem;
	font-weight: normal;
	transition: background 0.2s ease, transform 0.1s ease;
	animation: fadeInIcon 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Essential for positioning of category-accordion close button */
details.category-accordion {
	position: relative !important;
	display: block;
	/* Ensure it's not inline */
}

button.close-category-accordion {
	position: absolute;
	top: 15px;
	right: 12px;
	z-index: 10;
}

/* Interaction states */
.accordion-item[open] .close-accordion:hover {
	background: #f9fafb;
	transform: scale(1.05);
	/* Slight growth on hover */
}

.accordion-item[open] .close-accordion:active {
	transform: scale(0.95);
	/* Slight shrink feedback on click */
}

/* Keyframe definition for the fluid fade-in and pop effect */
@keyframes fadeInIcon {
	from {
		opacity: 0;
		transform: scale(0.6) rotate(-45deg);
		/* Starts small, faint, and rotated */
	}

	to {
		opacity: 1;
		transform: scale(1) rotate(0deg);
		/* Settles smoothly into place */
	}
}

/* ------------------------------------------------------------------- 
 * responsive:
 * FAQs
 * ------------------------------------------------------------------- */

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


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

	/* Make text sit above search box & button */
	.faq-search-wrapper {
		justify-content: center;
		/* Centers the children inside the flexbox */
	}

	.faq-search-wrapper .fit1 {
		display: block;
		flex: 0 0 100%;
		/* Force 100% width to break line */
		order: -1;
		white-space: nowrap;
	}

	.faq-search-wrapper .fit1 p {
		text-align: center;
		width: auto;
		/* Ensure the paragraph only takes up as much space as the text */
	}

	.faq-search-wrapper .fit2 .fit3 {
		display: flex;
		flex: 0 1 auto;
		/* Sizes strictly to content; shrinks if needed but won't stretch */
		order: 0;
	}
}

/** --------------------------- PRICING --------------------------------- */

#pricing {
	padding-top: 7.2rem;
	padding-bottom: 0;
	min-height: 0;
	/* tweaked by DAS */
	background: #cecece;
	overflow: hidden;
}

#pricing .row {
	margin: 50px 50px 0 50px;
	width: auto;
}

#pricing .plan-top-part,
#pricing .plan-wrap .standard {
	position: relative;
}

#pricing .standard .popular-badge {
	position: absolute;
	background: #39b54a;
	color: #fff;
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	padding: 0.4rem 1.2rem;
	display: inline-block;
	border-radius: 20px;
	margin-bottom: 1rem;
	font-weight: bold;
	left: 50%;
	transform: translate(-50%, 1rem);
	z-index: 999;
}

#pricing .enhanced-fee-from:before {
	position: absolute;
	content: "from";
	/* Or content: ""; if it's just a decorative shape */
	font-size: 1.4rem;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	opacity: 0.8;
	top: -1.2rem;
	color: #ffffff;
	left: 50%;
	transform: translateX(-50%);
}

.pricing-plans {
	background: #ebebeb;
}

.pricing-table {
	text-align: center;
}

.pricing-table .plan-block {
	border-radius: 5px;
	padding: 4.8rem 2rem 5.4rem;
	margin: 2rem 1rem 4.8rem 1rem;
	background: #FFFFFF;
}

.pricing-table .plan-block:after {
	content: "";
	display: table;
	clear: both;
}

.pricing-table .plan-block .plan-block-title {
	font-family: "montserrat-regular", sans-serif;
	font-size: 2.4rem;
	margin-bottom: 3.6rem;
}

.pricing-table .plan-block .plan-block-price {
	font-family: "montserrat-medium", sans-serif;
	display: flex;
	justify-content: center;
	/* align-items: baseline; Keeps the pound sign aligned with the bottom of the numbers */
	position: relative;
	text-align: center;
	font-size: 7.8rem;
	color: #151515;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

.pricing-table .plan-block .plan-block-price sup {
	font-family: "montserrat-regular", sans-serif;
	position: absolute;
	font-size: 3rem;
	margin-top: 6px;
	/* Push it to the left of the centered number */
	transform: translateX(-390%);
	font-size: 0.5em;
}

.pricing-table .plan-block .plan-block-per {
	margin-top: -.6rem;
	margin-bottom: 0;
	font-family: "montserrat-medium", sans-serif;
	font-size: 1.7rem;
}

.pricing-table .plan-block .plan-block-features {
	list-style: none;
	margin: 0 2rem 0;
	font-size: 1.6rem;
	line-height: 2.4rem;
}

.pricing-table .plan-block .plan-block-features.more {
	margin: 0;
}

/* Hide the wrapper LI elements by default */
.pricing-table .plan-block .plan-block-features li.starter-more,
.pricing-table .plan-block .plan-block-features li.standard-more,
.pricing-table .plan-block .plan-block-features li.enhanced-more {
	display: none;
	opacity: 0;
}

/* Display the wrapper LI elements when active */
.pricing-table .plan-block .plan-block-features li.starter-more.is-visible,
.pricing-table .plan-block .plan-block-features li.standard-more.is-visible,
.pricing-table .plan-block .plan-block-features li.enhanced-more.is-visible {
	display: block;
	opacity: 1;
	animation: listSlideDown 0.3s ease-out forwards;
}

/* Smooth fade and entry transition */
@keyframes listSlideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pricing-table .plan-block .plan-block-features li {
	font-size: 1.6rem;
	padding: 1.2rem 0 1.2rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	left: 0;
	margin-bottom: 0;
}

.pricing-table .plan-block.enhanced .plan-block-features li {
	color: white;
}

.pricing-table .plan-block .plan-block-features li.close-button {
	position: relative;
	top: 20px;
	padding: 1.2rem 0;
	border-bottom: 0;
	border: 0;
	left: 0;
}

.pricing-table .plan-block .plan-block-features li.starter-more,
.pricing-table .plan-block .plan-block-features li.standard-more,
.pricing-table .plan-block .plan-block-features li.enhanced-more {
	padding: 0;
	border-bottom: 0;
	border: 0;
}

.pricing-table .plan-block .plan-block-features li.enhanced-trigger-item a.expand-enhanced {
	color: white;
}

.pricing-table .plan-block.standard {
	background: rgba(57, 181, 74, 0.4);
}

.pricing-table .plan-block.enhanced {
	background: #39b54a;
}

.pricing-table .plan-block.enhanced .plan-block-title,
.pricing-table .plan-block.enhanced .plan-block-price {
	color: #ffffff;
}

.pricing-table .plan-block.starter .button.button-normal {
	font-size: 1.2rem;
	padding: 0 3rem;
	background-color: #62e640;
	height: 5rem;
	line-height: calc(5rem - 0.1rem);
}

.pricing-table .plan-block .starter .button.button-normal:hover,
.pricing-table .plan-block .starter .button.button-normal:focus {
	color: #39b54a;
}

.pricing-table .plan-block.standard .button.button-normal {
	background: #ffffff;
	color: #151515;
	border-color: #ffffff;
}

.pricing-table .plan-block .standard .button.button-normal:hover,
.pricing-table .plan-block .standard .button.button-normal:focus {
	color: #39b54a;
}

.pricing-table .plan-block.enhanced .button.button-enhanced {
	background: #ffffff;
	color: #151515;
	border-color: #ffffff;
}

.pricing-table .plan-block .enhanced .button.button-enhanced:hover,
.pricing-table .plan-block .enhanced .button.button-enhanced:focus {
	color: #39b54a;
}

.pricing-table .plan-bottom-part {
	margin-top: 3rem;
}

/* --- Pricing Footnotes Component Styles --- */

/* Ensure the container doesn't shrink or grow when switching tabs 
section.pricing-footnotes-section {
    min-height: 1836px;
    height: 1836px;
} */

#footnotes h3 {
	color: rgba(255, 255, 255, 0.8);
	font-size: 2rem;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: .2rem;
	margin-bottom: 2.4rem;
	text-align: center;
}

.pricing-notes-section {
	padding-top: 4rem;
	padding-bottom: 6rem;
	background-color: transparent;
}

.pricing-footnotes {
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

.footnotes-title,
.terms-title {
	font-size: 1.6rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	margin-top: 5rem;
	margin-bottom: 2rem;
	color: #39b54a;
	text-align: center;
}

.footnote-group {
	margin-bottom: 2rem;
}

.footnote-group-last {
	margin-bottom: 0;
}

.footnote-heading {
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 0.8rem;
	color: #333333;	/* Tweaked from #EEEEEE for better light-background legibility */
}

.footnote-text {
	font-size: 1.4rem;
	line-height: 1.65;
	margin-bottom: 0.6rem;
	color: #555555;
}

.footnote-label {
	color: #333333;
}

/* --- Pricing Terms & Conditions Component Styles --- */

.pricing-terms {
	/* Ready for any master section wrapping styles */
}

#pricing .row.terms {
	width: 80%;
	margin: 50px auto 0 auto;
}

.terms-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.terms-item {
	font-size: 1.4rem;
	line-height: 1.65;
	margin-bottom: 1rem;
	color: #666666;
}

.terms-item-last {
	margin-bottom: 0;
}

.terms-highlight {
	color: #444444;
}

/* --- Optional Add-Ons Component Styles --- */

.addons-renewals-section {
	font-family: "montserrat-light", sans-serif;
	padding-top: 0rem;
	padding-bottom: 0;
	background-color: #cecece;
}

.addons-header {
	text-align: center;
	margin-bottom: 4.8rem;
}

.addons-title {
	font-size: 3rem;
	line-height: 1.3;
	color: #222222;
	margin-top: 5rem;
	margin-bottom: 1.2rem;
}

.addons-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 5.4rem;
}

.addon-card {
	flex: 1 1 300px;
	background: #ffffff;
	padding: 3rem;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border-top: 4px solid #39b54a;
	/* Matches your brand green */
}

.addon-card-title {
	font-size: 1.8rem;
	color: #222222;
	margin-bottom: 1rem;
}

.addon-card-price {
	font-size: 2.2rem;
	font-weight: bold;
	color: #39b54a;
	margin-bottom: 1.6rem;
}

.addon-price-label {
	font-size: 1.3rem;
	color: #888888;
	font-weight: normal;
}

.addon-card-text {
	font-size: 1.4rem;
	line-height: 1.6;
	color: #555555;
	margin-bottom: 0;
}

/* --- Maintenance Renewal Component Styles --- */

.renewal-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 4rem;
	margin-bottom: 0;
}

.renewal-card {
	flex: 1 1 300px;
	background: #ffffff;
	padding: 3rem;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border-top: 4px solid #39b54a;
	/* Matches your brand green */
}

.renewal-card-title {
	font-size: 1.8rem;
	color: #222222;
	margin-bottom: 1.6rem;
}

.renewal-meta-label {
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: #888888;
	margin-bottom: 0.4rem;
}

.renewal-card-price {
	font-size: 2.2rem;
	font-weight: bold;
	color: #222222;
	margin-bottom: 0.6rem;
}

/* Specific pricing bottom margin for un-split cards */
.renewal-card>.renewal-card-price {
	margin-bottom: 1.6rem;
}

.renewal-price-label {
	font-size: 1.3rem;
	color: #888888;
	font-weight: normal;
}

.renewal-card-text {
	font-size: 1.4rem;
	line-height: 1.6;
	color: #555555;
	margin-bottom: 0;
}

/* Split layout internal elements for Starter options */
.renewal-split-top {
	margin-bottom: 2rem;
}

.renewal-split-bottom {
	border-top: 1px dashed rgba(0, 0, 0, 0.1);
	padding-top: 1.6rem;
}

/* --- Renewal Policy Notice Box Component Styles --- */

.policy-box {
	background: #ffffff;
	padding: 3rem;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.policy-title {
	font-size: 2rem;
	color: #222222;
	margin-bottom: 1.6rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	margin-top: 2.5rem;
}

.policy-text {
	font-size: 1.45rem;
	line-height: 1.8;
	color: #555555;
	margin-bottom: 2rem;
}

.policy-alert {
	background: #fff9e6;
	border-left: 4px solid #f1c40f;
	padding: 2rem;
	margin-bottom: 2rem;
	border-radius: 0 4px 4px 0;
}

.policy-alert-text {
	font-size: 1.4rem;
	line-height: 1.7;
	color: #665100;
	margin-top: 0;
	margin-bottom: 0;
}

.policy-text-footer {
	font-size: 1.4rem;
	line-height: 1.7;
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 0;
	color: #555555;
}

.policy-text-highlight {
	color: #222222;
}

/* --- Pure CSS Interactive Tab Component Engine --- */

.pricing-tabs-container {
	margin-top: 0;
	padding-top: 0;
	width: 100%;
	background: #cecece !important;
}

.tab-content-wrapper {
	background: #f5f5f5;
	padding-bottom: 7.5rem;
	margin-bottom: 0rem;
}

/* Hide the raw HTML form controllers completely */
.tab-radio-input {
	display: none !important;
}

/* Tab Button Row Mechanics */
.tab-buttons-row {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 4rem;
	border-bottom: 0;
	padding-bottom: 3rem;
	background: #cecece;
}

/* Visual Tab Button Interactive Styles */
.tab-button-label {
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	color: #888888;
	padding: 1.2rem 2.4rem;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.25s ease-in-out;
	background: transparent;
	user-select: none;
}

/* Hover State */
.tab-button-label:hover {
	color: #222222;
	background: rgba(0, 0, 0, 0.02);
}

/* Base Panel Visibility Logic Rules */

.tab-panel {
	display: none;
	opacity: 0;
	transition: opacity 0.35s ease-in-out;
}

/* --- Active State Structural Binding Engines --- */

/* Ensure the engine overrides layout defaults when active */
#tab-addons:checked~.tab-content-wrapper .panel-addons {
	display: block !important;
	opacity: 1 !important;
}

#tab-terms:checked~.tab-content-wrapper .panel-terms {
	display: block !important;
	opacity: 1 !important;
}

/* Label visual switch highlights */
#tab-addons:checked~.tab-buttons-row .tab-button-label:nth-child(1) {
	color: #ffffff !important;
	background: #39b54a !important;
}

#tab-terms:checked~.tab-buttons-row .tab-button-label:nth-child(2) {
	color: #ffffff !important;
	background: #39b54a !important;
}

/* --- Mobile Responsive Optimizations --- */
@media screen and (max-width: 600px) {
	.tab-buttons-row {
		flex-direction: column;
		gap: 8px;
		border-bottom: none;
		padding-bottom: 0;
	}

	.tab-button-label {
		font-size: 1.4rem;
		text-align: center;
		padding: 1.4rem;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ------------------------------------------------------------------- 
 * responsive:
 * pricing 
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1235px) {
	.pricing-table .plan-block .plan-block-features li {
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 1125px) {
	.pricing-table .plan-block .plan-block-features {
		margin: 0 1rem 0;
	}
}

@media only screen and (max-width: 1080px) {
	#pricing .row {
		margin: 50px 25px 0 25px;
	}

	.pricing-table .plan-block .plan-block-features {
		margin: 0;
	}
}

@media only screen and (max-width: 996px) {
	.pricing-table .plan-wrap {
		width: 100% !important;
		float: none !important;
		clear: both !important;
	}

	.pricing-table .plan-top-part,
	.pricing-table .plan-bottom-part {
		float: left;
	}

	.pricing-table .plan-top-part {
		width: 41.66667%;
		margin-top: 1.2rem;
	}

	.pricing-table .plan-bottom-part {
		width: 58.33333%;
	}
}

@media only screen and (max-width: 815px) {
	.renewal-card-last {
		margin-bottom: 5rem;
	}
}

@media only screen and (max-width: 640px) {
	#pricing [class*="col"].pricing-table {
		max-width: 360px;
	}

	#pricing .plan-top-part,
	#pricing .plan-bottom-part {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		margin-left: 0;
		margin-right: 0;
	}
}

/** --------------------------- BLOCKQUOTES/TESIMONIALS --------------------------------- */

.pull-quote {
	position: relative;
	padding: 2.1rem 3rem 2.1rem 3rem;
}

#about .pull-quote {
	position: relative;
	padding: 7rem 3rem 3.5rem 3rem;
}

.quote-source p {
	position: relative;
	width: fit-content;
	height: fit-content;
	margin-left: auto;
	margin-right: 100px;
}

blockquote:before,
blockquote:after {
	height: 1em;
	position: absolute;
	font-size: 15rem;
	color: rgba(0, 0, 0, 0.3);
}

blockquote:before {
	content: "\201C";
	top: -3.9rem;
	left: 0;
}

#about blockquote:before {
	content: "\201C";
	top: 0;
	left: 0;
}

blockquote:after {
	content: '\201D';
	margin-top: -35px;
	right: 40px;
}

blockquote {
	margin: 0;
	font-style: italic;
	text-align: center;
}

.testimonials {
	width: 100%;
	height: auto;
	background-color: #005900;
	position: relative;
	display: table;
	overflow: hidden;
	padding-top: 9rem;
	padding-bottom: 6rem;
}

.testimonials .row {
	width: 60%;
	margin: auto;
}

.testimonials blockquote p {
	color: #fdfdfd;
	font-family: "montserrat-light", sans-serif;
	font-size: 1.7rem;
	line-height: 1.6;
	margin-top: 0rem;
	margin-bottom: 1.5rem;
}

.testimonials .testimonial-source {
	font-family: "montserrat-light", sans-serif;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #fdfdfd;
    margin-top: 0rem;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	text-align: center;
}

.testimonials p.quote-source {
	position: static;
	margin-left: auto;
	margin-right: auto;
	height: fit-content;
	width: 75%;
	color: #EAE9E9;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 6rem;
}

.quote-bubble {
	background-color: #cecece47;
	border: 1px solid #e5e7eb;
	border-radius: 5rem;
	margin-top: 3rem;
}


@media only screen and (max-width: 750px) {
	.testimonials .row {
		width: 100%;
		margin: auto;
	}

	.testimonials pull-quote {
		position: relative;
		padding: 2.1rem 6rem 2.1rem 6rem;
	}

}


/** --------------------------- ADVERT SECTIONS --------------------------------- */

.advert {
	width: 100%;
	height: auto;
	background-color: transparent;
	position: relative;
	display: table;
	overflow: hidden;
}

.advert h2 {
	width: 94%;
	font-family: "montserrat-medium", sans-serif;
	font-size: 6rem;
	color: white;
	line-height: 1;
	text-align: center;
	padding-top: 55px;
	padding-bottom: 55px;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

@media only screen and (max-width: 400px) {
	.advert h2 {
		width: 94%;
		font-family: "montserrat-medium", sans-serif;
		font-size: 5rem;
		color: white;
		line-height: 1;
		text-align: center;
		padding-top: 75px;
		padding-bottom: 75px;
		margin-bottom: 0;
		margin-left: auto;
		margin-right: auto;
	}
}

.advert sup {
	font-family: "montserrat-regular", sans-serif;
	font-size: 3rem;
	top: -3.6rem;
	margin-right: 3px;
}

/** END OF KEY SECTIONS */

a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
	outline-width: 0;
}

a {
	text-decoration: none;
	line-height: inherit;
}

a img {
	border: none;
}

a,
a:visited {
	color: #0087cc;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
	color: #39b54a;
}


ol {
	list-style: decimal;
}

ul {
	list-style: disc;
	padding-left: 0;
}

dt {
	margin: 0;
	color: #39b54a;
}

dd {
	margin: 0 0 0 2rem;
}


/* Floated image */

img.pull-right {
	margin: 1.5rem 0 0 3rem;
}

img.pull-left {
	margin: 1.5rem 3rem 0 0;
}

/* Tables */

table {
	border-width: 0;
	width: 100%;
	max-width: 100%;
}

th,
td {
	padding: 1.5rem 3rem;
	text-align: left;
	border-bottom: 1px solid #E8E8E8;
}

th {
	color: #151515;
}

td {
	line-height: 1.5;
}

th:first-child,
td:first-child {
	padding-left: 0;
}

th:last-child,
td:last-child {
	padding-right: 0;
}

.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Pre-loader */

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	z-index: 800;
	height: 100%;
	width: 100%;
}

.no-js #preloader,
.oldie #preloader {
	display: none;
}

fieldset {
	margin-bottom: 1.5rem;
}

/* Drop cap */

.drop-cap:first-letter {
	float: left;
	margin: 0;
	padding: 1.5rem .6rem 0 0;
	font-size: 8.4rem;
	line-height: 6rem;
	text-indent: 0;
	background: transparent;
	color: #151515;
}

.wide {
	max-width: 1300px;
}

.narrow {
	max-width: 800px;
}


/* ===================================================================
 *  header styles
 * ------------------------------------------------------------------- */

#header {
	width: 100%;
	height: 72px;
	background-color: #000000;
	position: fixed;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 501;
}

.navrow {
	width: 100%;
	margin: 0 auto;
}

.row .row {
	width: auto;
	max-width: none;
	margin-left: -20px;
	margin-right: -20px;
}

/* ------------------------------------------------------------------- 
 * header logo
 * ------------------------------------------------------------------- */

.header-logo-logobox {
	position: absolute;
	top: 0;
	width: 170px;
	height: 285px;
	margin-top: 0;
	left: 48px;
	right: auto;
	bottom: auto;
	background-color: black;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.header-logo-logobox p {
	color: #EAE9E9;
	padding: 18px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 0.9;
	text-shadow: none;
	margin-bottom: 0;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.header-logo-logobox .logo {
	display: block;
	background: none;
	height: 0;
	margin-bottom: 100px;
}

.header-logo-logobox .logo img {
	width: 100%;
}

.footer-logo-logobox {
	display: block;
	position: absolute;
	top: 0;
	max-width: 140px;
	height: 285px;
	margin-top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	background-color: black;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.footer-logo-logobox p {
	line-height: 0.8;
}



/* ------------------------------------------------------------------- 
 * logo text fit CSS - MAIN LOGO
 * ------------------------------------------------------------------- */

.text-fit {
	font-family: "montserrat-regular";
	font-size: 1rem;
	display: flex;
	container-type: inline-size;

	--captured-length: initial;
	--support-sentinel: var(--captured-length, 9999px);

	&>[aria-hidden] {
		visibility: hidden;
	}

	&> :not([aria-hidden]) {
		flex-grow: 1;
		container-type: inline-size;

		--captured-length: 100cqi;
		--available-space: var(--captured-length);

		&>* {
			--support-sentinel: inherit;
			--captured-length: 100cqi;
			--ratio: tan(atan2(var(--available-space),
						var(--available-space) - var(--captured-length)));
			--font-size: clamp(1em,
					1em * var(--ratio),
					var(--max-font-size, infinity * 1px) - var(--support-sentinel));
			inline-size: var(--available-space);

			&:not(.text-fit) {
				display: block;
				font-size: var(--font-size);

				@container (inline-size > 0) {
					white-space: nowrap;
				}
			}

			&.text-fit {
				--captured-length2: var(--font-size);
				font-variation-settings:
					'opsz'
					tan(atan2(var(--captured-length2), 1px));
			}
		}
	}
}

@property --captured-length {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

@property --captured-length2 {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

/* ------------------------------------------------------------------- 
 * menu trigger
 * ------------------------------------------------------------------- */

.header-menu-toggle {
	display: none;
	position: fixed;
	right: 32px;
	top: 15px;
	height: 42px;
	width: 42px;
	line-height: 42px;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: .2rem;
	color: rgba(255, 255, 255, 0.5);
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.header-menu-toggle:hover,
.header-menu-toggle:focus {
	color: #FFFFFF;
}

.header-menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin-top: -1px;
	position: absolute;
	left: 9px;
	top: 50%;
	right: auto;
	bottom: auto;
	background-color: white;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

.header-menu-toggle span::before,
.header-menu-toggle span::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: inherit;
	position: absolute;
	left: 0;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.header-menu-toggle span::before {
	top: -9px;
}

.header-menu-toggle span::after {
	bottom: -9px;
}

.header-menu-toggle.is-clicked span {
	background-color: rgba(255, 255, 255, 0);
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

.header-menu-toggle.is-clicked span::before,
.header-menu-toggle.is-clicked span::after {
	background-color: white;
}

.header-menu-toggle.is-clicked span::before {
	top: 0;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}

.header-menu-toggle.is-clicked span::after {
	bottom: 0;
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
}

/* ------------------------------------------------------------------- 
 * navigation 
 * ------------------------------------------------------------------- */

#header-nav-wrap {
	position: absolute;
	right: 25px;
	font-size: 1.4rem;
}

#header-nav-wrap .header-main-nav {
	display: inline-block;
	list-style: none;
	height: 72px;
	margin: 0 3rem 0 0;
}

#header-nav-wrap .header-main-nav li {
	display: inline-block;
	font-size: 1.4rem;
	padding-left: 0;
	margin-right: 0;
	line-height: 1.6;
	color: #575757;
	margin-left: 2rem;
}

#header-nav-wrap .header-main-nav li a {
	display: block;
	line-height: 72px;
}

#header-nav-wrap .header-main-nav p {
	display: block;
	line-height: 72px;
	color: #ffffff;
}

#header-nav-wrap .header-main-nav li a,
#header-nav-wrap .header-main-nav li a:visited {
	color: rgba(255, 255, 255, 0.45);
}

#header-nav-wrap .header-main-nav li a:hover,
#header-nav-wrap .header-main-nav li a:focus {
	color: #ffffff;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * header - ensure menu does not appear on narrow screens
 * ------------------------------------------------------------------- */

@media only screen and (min-width: 1201px) {

	/* DAS:: MUST adjust both values below too */
	#header {
		max-width: none;
	}
}

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

	/* DAS:: needs adjusting to prevent longer menu lists hiding under logo in narrow windows */
	#header {
		position: absolute;
	}

	#header-nav-wrap {
		display: none;
		height: auto;
		width: 100%;
		right: auto;
		left: 0;
		background-color: #000000;
		padding: 120px 40px 54px;
		box-sizing: border-box;
		/* Crucial to include the padding within the 100% width declaration */
	}

	#header-nav-wrap .header-main-nav {
		display: block;
		height: auto;
		margin: 0 0 4.2rem 0;
		border-top: 1px solid rgba(255, 255, 255, 0.03);
	}

	#header-nav-wrap .header-main-nav li {
		display: block;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
	}

	#header-nav-wrap .header-main-nav li a {
		padding: 18px 0;
		line-height: 18px;
	}

	#header-nav-wrap .cta {
		height: 42px;
		line-height: calc(42px - .6rem);
		padding: 0 30px;
		box-sizing: border-box;
	}

	.header-menu-toggle {
		display: block;
	}
}

/* -------------------------------------------------------------------
 * ....but make sure the menu is visible on larger screens
 * ------------------------------------------------------------------- */

@media only screen and (min-width: 1200px) {

	/* DAS:: see above; must be similarly adjusted */
	#header-nav-wrap {
		display: block !important;
	}
}

/* ===================================================================
 *  home
 * ------------------------------------------------------------------- */

#home {
	width: 100%;
	height: 600px;
	min-height: 600px;
	max-height: 600px;
	background-color: transparent;
	position: relative;
	display: table;
	overflow: hidden;
}

#home.row {
	width: 100%;
	max-width: 1170px;
	margin: 50px auto;
	min-height: 450px;
}

#home button.stroke,
#home .button.stroke,
#home input[type="submit"],
#home input[type="reset"],
#home input[type="button"] {
	font-family: "montserrat-light", sans-serif;
	color: #ffffff;
	display: inline-block;
	background: transparent !important;
	font-size: 1.4rem;
	padding: 1rem 2.2rem;
	margin: 2rem 2rem 0 0;
	min-width: 188px;
	height: 5rem;
	line-height: calc(5rem - 0.1rem);
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	border: 0.15rem solid #ffffff;
	border-radius: .5rem;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-shadow: none;
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6));
	/* Drop shadow does not cast shadows on adjacent lines of text */
}

/*
button.stroke,
.button.stroke span[class*="icon"] {
  margin-right: 5px;
  position: relative;
  top: 2px;
}
*/

#home button.stroke:hover,
#home .button.stroke:hover {
	color: #39b54a;
	background-color: white !important;
	color: #000000 !important;
}

#home button.stroke:focus,
#home .button.stroke:focus {
	color: #39b54a;
	background-color: white !important;
	color: #000000 !important;
}

#home button::-moz-focus-inner,
#home input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/*
HTML VIDEO AS BACKGROUND:
Code modified from Dudley Storey  
*/

.twp-video-background {
	background: #000;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.twp-video-foreground {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.twp-video-foreground video {
	position: absolute;
	top: 0;
	height: 100%;	/* Force full vertical screen height coverage */
	width: 100%;	/* Let the width scale proportionally without breaking the aspect ratio */
	object-fit: cover;	/* Keeps media filling the frame neatly without stretching distortion */
}

.twp-video-foreground {
	/* can be used to control fade-in of video but not fade out etc. See keyframes solution below */
	padding-bottom: 55%;
	/* Smaller values in % cause video to be positioned "higher" in div container */
	box-sizing: border-box;
	/* opacity: 0; /* Video initial state */
	/* transition: opacity 3s ease-in;  /* Transition settings */
}

.twp-video-layer {
	/* controls the video "overlay" -- here with overlay image removed */
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	/* Vertical linear gradient: top (0% opacity) to bottom (30% opacity) */
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);

	/* background-image: url('https://www.ianlittlegas.co.uk/test/images/arrows-large.png');
    background-size: 115%;
    background-position-x: -45px;
    background-position-y: +45px;
    opacity: 0.4; */
}


@keyframes loopFade {
	0% {
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	/* Fades in at the start */
	85% {
		opacity: 1;
	}

	/* Stays visible for most of the video */
	100% {
		opacity: 0;
	}

	/* Fades out before it restarts */
}

/* Ensure the video starts visible */
.video-loop-fade {
	opacity: 1;
	transition: opacity 1.5s ease-in-out;
	/* Adjust 0.8s for fade speed */
}

/* Class to trigger the fade out */
.video-loop-fade.is-fading {
	opacity: 0;
}

/*
END VIDEO CSS 
*/


.no-js #home {
	background: #151515;
}

.home-content {
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: bottom;
}


/* scroll down */

.home-scrolldown {
	position: absolute;
	bottom: 20px;
	right: 20px;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: right top;
	-ms-transform-origin: right top;
	transform-origin: right top;
	float: right;
}

.home-scrolldown i {
	padding-left: 9px;
}

.home-scrolldown a:hover,
.home-scrolldown a:focus {
	color: #44c455 !important;
}

html[data-useragent*='MSIE 10.0'] .home-scrolldown,
.oldie .home-scrolldown {
	display: none;
}

.scroll-icon {
	display: inline-block;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: .3rem;
	color: #FFFFFF !important;
	background: transparent;
	position: relative;
	top: 36px;
	right: 42px;
	-webkit-animation: animate-it 3s ease infinite;
	animation: animate-it 3s ease infinite;
}

.scroll-icon i {
	font-size: 2.4rem;
	position: relative;
	bottom: -6px;
}

/* vertical animation */

@-webkit-keyframes animate-it {

	0%,
	60%,
	80%,
	100% {
		-webkit-transform: translateX(0);
	}

	0%,
	60%,
	80%,
	100% {
		transform: translateX(0);
	}

	20% {
		-webkit-transform: translateX(-5px);
	}

	20% {
		transform: translateX(-5px);
	}

	40% {
		-webkit-transform: translateX(20px);
	}

	40% {
		transform: translateX(20px);
	}
}

@keyframes animate-it {

	0%,
	60%,
	80%,
	100% {
		-webkit-transform: translateX(0);
	}

	0%,
	60%,
	80%,
	100% {
		transform: translateX(0);
	}

	20% {
		-webkit-transform: translateX(-5px);
	}

	20% {
		transform: translateX(-5px);
	}

	40% {
		-webkit-transform: translateX(20px);
	}

	40% {
		transform: translateX(20px);
	}
}

/* ------------------------------------------------------------------- 
 * responsive:
 * home section 
 * ------------------------------------------------------------------- */


/* ---------control when title split occurs ------------------------- */
@media only screen and (min-width: 1121px) {

	.home-content-right .break1,
	.home-content-right .break2 {
		display: none;
		/* stops forcing new line */
	}
}

/* ---------control when button split occurs ------------------------- */
@media only screen and (min-width: 935px) {
	.button-break {
		display: none;
	}
}

/* ----------------------HOME CONTENT RIGHT----------------------- */
@media only screen and (max-width: 1040px) {
	.home-content-right {
		width: 440px;
	}
}

@media only screen and (max-width: 840px) {
	.home-content-right {
		width: 360px;
	}
}

@media only screen and (max-width: 725px) {
	.home-content-right {
		width: auto;
		margin-left: 2.5rem;
		margin-right: 2.5rem;
		padding-bottom: 4rem;
		padding-right: 0;
	}
}

@media only screen and (max-width: 550px) {
	#about .row {
		min-height: 830px;
	}

	#home .home-content-right h1, 
	.home-content-right .alt-h1 {
		margin-bottom: 0;
	}

	#home .home-content-right {
		margin-left: 2rem;
		margin-right: 2rem;
	}
}

/* ------------------- BUTTONS ------------------------ */

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

	#home button.stroke,
	#home .button.stroke,
	#home input[type="submit"],
	#home input[type="reset"],
	#home input[type="button"] {
		padding: 0.5rem 1.2rem;
	}
}

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

	#home button.stroke,
	#home .button.stroke,
	#home input[type="submit"],
	#home input[type="reset"],
	#home input[type="button"] {
		font-size: 1.4rem;
		min-width: 180px;
		margin: 10px 5px 0 0;
	}
}

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

	#home button.stroke,
	#home .button.stroke,
	#home input[type="submit"],
	#home input[type="reset"],
	#home input[type="button"] {
		padding: 0.05rem 2rem;
	}
}

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

	#home button.stroke,
	#home .button.stroke,
	#home input[type="submit"],
	#home input[type="reset"],
	#home input[type="button"] {
		display: none;
	}

	.header-logo-logobox {
		width: 120px;
		height: auto;
		left: 24px;
	}

	.header-logo-logobox .logo {
		margin-bottom: 65px;
	}
}


/* ===================================================================
 *  footer
 *
 * ------------------------------------------------------------------- */

#footer {
	font-family: "montserrat-light", sans-serif;
	padding-top: 3rem;
	padding-bottom: 4.2rem;
	background: black;
}

#footer p {
	color: white;
	font-size: 1.5rem;
	line-height: 2rem;
}

.footer-main .row {
	display: flex;
	position: relative;
	min-height: 300px;
	margin: auto;
}

.footer-main .row:after {
	content: "";
    display: block;
    position: absolute;
    width: calc(100% - 30px - 30px);
    bottom: 0;
    left: 30px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid white;
}

.footer-bottom .row {
	min-height: 100px;
	margin: auto;
}

#footer a {
	color: white;
}

#footer a:visited {
	color: #39b54a;
}

#footer .footer-info p {
	margin: 0;
	padding-top: 0;
}

#footer p.emailaddress {
	margin-top: 5px;
	margin-bottom: 0;
	padding: 0;
}

#footer a:hover,
footer a:focus {
	color: white;
}

#footer h4 {
	color: white;
	font-size: 1.5rem;
	padding-bottom: 0rem;
	margin-bottom: 0rem;
	position: relative;
}

#footer h4::before {
	content: none;
}

#footer ul {
	list-style: none;
	margin: 0;
	color: white;
}

#footer ul li {
	padding-left: 0;
}

#footer ul a,
#footer ul a:visited {
	color: white;
}

#footer .footer-main {
	display: flex;
	height: 350px;
	padding-top: 20px;
}

#footer .footer-info {
	flex: 1;
	position: relative;
	height: 300px;
	width: 160px;
	max-width: 160px;
}

#footer .footer-contact {
	flex: 1;
}

#footer .footer-contact i {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 3rem;
    margin-top: 8rem;
}

#footer .footer-contact .text-inline {
	margin-bottom: 0;
}

#footer .footer-info .logobox {
	display: block;
	top: 0;
	width: 170px;
	height: 265px;
	margin-top: 0;
	left: 48px;
	right: auto;
	bottom: auto;
	background-color: black;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.footer-info .logobox p {
	color: #EAE9E9;
	padding: 18px 36px 18px 0;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 0.9;
	text-shadow: none;
	margin-bottom: 0;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.footer-info .logo {
	display: block;
	background: none;
	height: 0;
	margin-bottom: 100px;
}

.footer-info .logo img {
	height: auto;
	width: 100%;
}

p.footer-privacy-link {
	margin-top: 3.5rem;
	font-size: 1.5rem !Important;
	color: #39b54a !Important;
}

/* ------------------------------------------------------------------- 
 * logo text fit CSS  - FOOTER LOGO
 * ------------------------------------------------------------------- */

.footer-info .text-fit {
	font-family: "montserrat-regular";
	font-size: 1rem;
	display: flex;
	container-type: inline-size;

	--captured-length: initial;
	--support-sentinel: var(--captured-length, 9999px);

	&>[aria-hidden] {
		visibility: hidden;
	}

	&> :not([aria-hidden]) {
		flex-grow: 1;
		container-type: inline-size;

		--captured-length: 100cqi;
		--available-space: var(--captured-length);

		&>* {
			--support-sentinel: inherit;
			--captured-length: 100cqi;
			--ratio: tan(atan2(var(--available-space),
						var(--available-space) - var(--captured-length)));
			--font-size: clamp(1em,
					1em * var(--ratio),
					var(--max-font-size, infinity * 1px) - var(--support-sentinel));
			inline-size: var(--available-space);

			&:not(.text-fit) {
				display: block;
				font-size: var(--font-size);

				@container (inline-size > 0) {
					white-space: nowrap;
				}
			}

			&.text-fit {
				--captured-length2: var(--font-size);
				font-variation-settings:
					'opsz'
					tan(atan2(var(--captured-length2), 1px));
			}
		}
	}
}

@property --captured-length {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

@property --captured-length2 {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

#footer .footer-contact {
	position: relative;
	top: 1px;
	border-top: 1px solid white;
	width: auto;
	text-align: right;
}

.footer-contact h4 {}

.footer-contact h4::before {
	content: none;
}

.footer-site-links .list-links {
	margin-bottom: 3rem;
	color: white;
}

.footer-subscribe {
	margin: 0.5rem 0 0 0;
	padding: 0;
	position: relative;
	width: fit-content;
	margin-right: 0;
	margin-left: auto;
}

/* Enquiry modal backdrop foundation layer */

.modal-overlay {
	display: none;
	/* Controlled via JS toggles */
	position: fixed;
	/* Fixes mobile devices cutoff */
	overflow-y: auto;
	padding: 20px 0;
	/* Add padding so modal doesn't touch screen edges */
	align-items: flex-start;
	/* Better for scrolling content than 'center' */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	/* Darkened workspace background */
	backdrop-filter: blur(4px);
	/* Modern frosted element glass styling */
	z-index: 99999;
	justify-content: center;
	-webkit-overflow-scrolling: touch;
	/* Ensures smooth scrolling on iOS */
}

/* Modal configuration box */

.modal-content {
	position: relative;
	background-color: #111111;
	color: #ffffff;
	top: 60px;
	border-radius: 16px;
	/* Smooth rounded tracking */
	border: 1px solid #2a2a2a;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: scale(0.9);
}

@media only screen and (min-width: 601px) {
	.modal-content {
		padding: 35px;
		/* Add padding so modal doesn't touch screen edges */
		max-width: 460px;
		width: 460px;
		min-width: 460px;
	}
}

@media only screen and (max-width: 600px) {
	.modal-overlay {
		position: fixed;
		/* Fixes mobile devices cutoff */
		padding: 0;
		/* Remove padding for mobile devices */
	}

	.modal-content {
		margin: 0;
		top: 30px;
		padding: 35px;
		width: 90%;
		min-width: 90%;
		max-width: 90% !Important;
		/* Use percentage for mobile responsiveness */
	}
}

.modal-content,
.modal-submit-btn {
	box-sizing: border-box !Important;
	/* Ensures padding doesn't add to width */
}

/* Operational state transitions */
.modal-overlay.is-active {
	display: flex;
}

.modal-overlay.is-active .modal-content {
	animation: modalEntrance 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Typography styles */
h3.modal-title {
	font-size: 1.6rem;
	margin: 0 0 6px 0;
	font-weight: bold;
	color: #fafafa;
	text-align: center;
}

p.modal-subtitle {
	margin: 0 0 25px 0;
	text-align: center;
	color: #cccccc !Important;
	font-size: 1.45rem !Important;
}

/* Functional input configurations */
.input-group {
	position: relative;
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	text-align: left;
}

.input-icon {
	position: absolute;
	left: 14px;
	color: #666;
	display: flex;
	top: 10px;
	pointer-events: none;
}

/* Styled internal fields */
.modal-content textarea,
.modal-content input[type="text"],
.modal-content input[type="name"],
.modal-content input[type="tel"],
.modal-content input[type="email"],
.modal-select {
	width: 100%;
	padding: 12px 12px 12px 42px !important;
	/* Offset spacing for the inline SVG icon */
	background: #1a1a1a !important;
	border: 1px solid #333 !important;
	color: #fff !important;
	border-radius: 8px !important;
	transition: all 0.25s ease;
	outline: none;
	box-sizing: border-box;
}

/* Select element appearance reset */
.modal-select {
	appearance: none;
	cursor: pointer;
}

/* Interactive focus glow borders */
.modal-content input:focus,
.modal-select:focus {
	border-color: #ffffff !important;
	background: #222222 !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

/* Submission Action Button customization styles */
.modal-submit-btn {
	width: 100%;
	max-width: 460px;
	background: #ffffff !important;
	color: #000000 !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: bold;
	font-size: 1.4rem;
	cursor: pointer;
	margin-top: 10px;
	height: 4rem;
	transition: background 0.2s ease, transform 0.1s ease;
}

.modal-submit-btn:hover {
	background: #e5e5e5 !important;
}

.modal-submit-btn:active {
	transform: scale(0.98);
}

.submit-message {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0;
	color: red;
}

/* Close header configuration button */
.modal-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	color: #666;
	font-size: 1.8rem;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
	transition: color 0.2s;
}

.modal-close-btn:hover {
	color: #fff;
}

@keyframes modalEntrance {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.footer-bottom {
	text-align: center;
	color: white;
}

.footer-bottom .copyright span {
	display: inline-block;
}

.footer-bottom .copyright span::after {
	content: "|";
	display: inline-block;
	padding: 0 1rem 0 1.2rem;
	color: rgba(255, 255, 255, 0.1);
}

.footer-bottom .copyright span:last-child::after {
	display: none;
}

/* ==========================================
   PURE CSS MODAL WINDOW FOR PRIVACY STATEMENT
   ========================================== */

/* Ensure specific buttons never adopt other button/submit styles */
#privacy-button-1,
#privacy-button-2 {
	display: inline-block;
	width: auto;
	/* Prevents them taking up 100% width like some submit buttons */
	cursor: pointer;
	background: none;
	/* Resets background if inheriting form button colours */
	border: none;
	/* Resets borders */
	padding: 0;
	/* Allows it to look like a text link */
	text-decoration: none;
	color: white;
	font-family: "montserrat-regular", sans-serif;
	text-rendering: optimizeLegibility;
	font-style: normal;
	font-kerning: normal;
}

#privacy-button-1 {
	font-size: 1.1rem ! Important;
}

.modal-overlay2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background: rgba(0, 0, 0, 0.6);
	/* Darkens background */
	backdrop-filter: blur(4px);
	/* Optional modern blur effect */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 999999;
	overflow-y: auto;
	/* Fixes mobile cutoff */
	-webkit-overflow-scrolling: touch;
	/* Ensures smooth scrolling on iOS */
}

/* Activates the modal when the JavaScript class is present */
#privacy-modal.is-active {
	opacity: 1;
	height: 100%;
	width: 100% bottom: 0px;
	pointer-events: auto;
	/* and potentially display: flex if it was display: none */
}

.modal-box {
	background: #ffffff;
	width: 90%;
	max-width: 650px;
	max-height: 80vh;
	border-radius: 8px;
	position: relative;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
}

.modal-content2 {
	padding: 30px;
	text-align: left;
	color: #333333;
	line-height: 1.6;
}

.scroll-wrapper {
	width: 104%;
	height: 400px;
	/* This limits the actual height of the scrollbar */
	overflow-y: auto;
	/* Adds clean scrollbar inside modal if text is long */
	overflow-x: hidden;
	border: 0;
}

.modal-content2 h2 {
	color: #111111 !Important;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 2.65rem;
	text-align: left;
}

.modal-content2 h3 {
	color: #111111 !Important;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 2.1rem;
	text-align: left;
}

.modal-content2 p,
.modal-content2 a,
.modal-content2 li {
	color: #111111 !Important;
	font-size: 1.45rem !Important;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 1.5rem;
}

.modal-content2 li {
	left: 10px;
}

.modal-content2 ul {
	margin-bottom: 1rem !Important;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Close Button Link styling */
.modal-close {
	position: absolute;
	top: 10px;
	right: 40px;
	font-size: 28px;
	color: #888888 !Important;
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s;
	z-index: 10;
}

.modal-close:hover {
	color: #000000;
}

/* ==========================================
   UK GDPR FORM CHECKBOX ACCENT
   ========================================== */

.form-privacy-group {
	margin: 20px 0;
}

.checkbox-container {
	display: flex;
	align-items: flex-start;
	position: relative;
	cursor: pointer;
	font-size: 14px;
	user-select: none;
}

/* Hide default browser checkbox to customize styling */
.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkbox-custom {
	height: 20px;
	width: 20px;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-right: 12px;
	flex-shrink: 0;
	margin-top: 2px;
}

.checkbox-container:hover input~.checkbox-custom {
	background-color: #ddd;
}

/* Checked status background colour */
.checkbox-container input:checked~.checkbox-custom {
	background-color: #26b170;
	/* Green check accent */
	border-color: #219961;
}

/* Draw custom visual checkmark icon */
.checkbox-custom:after {
	content: "";
	display: none;
	margin-left: 7px;
	margin-top: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.checkbox-container input:checked~.checkbox-custom:after {
	display: block;
}

.checkbox-text,
.checkbox-text p,
.checkbox-text p.checkbox-text {
	color: #cccccc;
	line-height: 1.1;
	font-size: 1.1rem !Important;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------- 
 * go to top
 * ------------------------------------------------------------------- */

#go-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 600;
	display: none;
}

#go-top a,
#go-top a:visited {
	text-decoration: none;
	border: 0 none;
	display: block;
	height: 60px;
	width: 60px;
	line-height: 60px;
	text-align: center;
	background: #39b54a;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	text-transform: uppercase;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#go-top a i,
#go-top a:visited i {
	font-size: 18px;
	line-height: inherit;
}

#go-top a:hover,
#go-top a:focus {
	color: #FFFFFF;
}

/* must include <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> in header */
/* see https://fontawesome.com/icons/classic/solid/arrow-up */
/* Core styling */
.fa-arrow-up {
	color: #FFFFFF; 	/* Changes the arrow color (Hex, RGB, or name) */
	font-size: 24px;	/* Changes the size of the arrow */
}

/* Optional: Add a hover effect */
.fa-arrow-up:hover {
	color: #FFFFFF;	/* Changes color when the user hovers over it */
	transform: translateY(-3px);	/* Makes the arrow bounce upward slightly */
	transition: all 0.2s ease;	/* Smooths out the hover effect animation */
}

/* ------------------------------------------------------------------- 
 * responsive:
 * footer 
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 1110px) {
	.row {
    padding-left: 30px;
    padding-right: 30px;
	}
}
	
@media only screen and (max-width: 820px) {
	.footer-bottom .copyright span::after {
		content: "\a";
		display: block;		/* forces new line when using \a above */
	}

	.button-inline {
		padding-top: 5px;
	}
	
	#footer .footer-contact i {
    display: none;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 0;
	}

	#footer .inline-section {
		flex-direction: column;
	}

	#footer .footer-contact {
		padding-top: 55px;
	}
}

@media only screen and (max-width: 500px) {
/* 1. Make the container fill the screen */
.inline-section.footer-subscribe {
        width: 100% !important; 
        display: block; /* Changing from flex to block helps stacking on mobile */
    }

/* 2. Ensure the text box fills that container */
 .text-inline-footer {
        width: 100%;
        text-align: right;
    }

/* 3. Ensure the H4 is definitely filling the width */
.text-inline-footer h4 {
        width: 100%;
        text-align: right;
    }
}

/* ------------------------------------------------------------------- 
 * pace.js LOADING INDICATOR styles - center simple
 * ------------------------------------------------------------------- */

.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	z-index: 2000;
	position: fixed;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	width: 150px;
	background: #dedede;
	overflow: hidden;
}

.pace .pace-progress {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	max-width: 150px;
	position: fixed;
	z-index: 2000;
	display: block;
	position: absolute;
	top: 0;
	right: 100%;
	height: 100%;
	width: 100%;
	background: black;
}

.pace.pace-inactive {
	display: none;
}

.oldie .pace {
	display: none;
}

/* ===================================================================
 *  GRIDS
 * ------------------------------------------------------------------- */

[class*="col-"],
.bgrid {
	float: left;
}

[class*="col-"]+[class*="col-"].end {
	float: right;
}

[class*="col-"] {
	padding: 0;	/* changed from 20px as not displaying properly */
}

.col-one {
	width: 8.33333%;
}

.col-two,
.col-1-6 {
	width: 16.66667%;
}

.col-three,
.col-1-4 {
	width: 25%;
}

.col-four,
.col-1-3 {
	width: 33.33333%;
}

.col-five {
	width: 41.66667%;
}

.col-six,
.col-1-2 {
	width: 50%;
}

.col-seven {
	width: 58.33333%;
}

.col-eight,
.col-2-3 {
	width: 66.66667%;
}

.col-nine,
.col-3-4 {
	width: 75%;
}

.col-ten,
.col-5-6 {
	width: 83.33333%;
}

.col-eleven {
	width: 91.66667%;
}

.col-twelve,
.col-full {
	width: 100%;
}

/* media only grid settings removed from here */

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

	.col-two,
	.col-1-6 {
		min-width: 20%;
	}

	.col-ten,
	.col-5-6 {
		width: 80%;
	}
}

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

	.col-two,
	.col-1-6 {
		min-width: 22.5%;
	}

	.col-ten,
	.col-5-6 {
		width: 77.5%;
	}
}

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

	.col-two,
	.col-1-6 {
		min-width: 25%;
	}

	.col-ten,
	.col-5-6 {
		width: 75%;
	}
}

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

	.col-two,
	.col-1-6 {
		min-width: 12%;
	}

	.col-ten,
	.col-5-6 {
		width: 78%;
	}
}

@media only screen and (max-width: 720px) {
	#about .row {
		display: flex;
		justify-content: center;
		/* Centers items horizontally */
		flex-wrap: wrap;
		/* Allows columns to wrap if they exceed 100% */
	}

	.col-two,
	.col-1-6 {
		width: fit-content;
		float: none;
	}

	.col-ten,
	.col-5-6 {
		width: 100%;
		text-align: center;
		margin-bottom: 3rem;
	}

	blockquote::after {
		right: 40px;
	}

	.quote-source p {
		position: relative;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		/* Optional: also centers the text inside the box */
	}

}

/* ------------------------------------------------------------------- 
 * block grids paddings
 * ------------------------------------------------------------------- */

.bgrid {
	padding: 0 20px 0 20px;
}

.bgrid feature center {
	text-align: center;
}

/* media only bgrid settings removed from here */


/* ===================================================================
 *  Modal2 (Cookies information)
 *
 * ------------------------------------------------------------------- */

.modal2 {
	display: none;
	/* Hidden by default */
	position: fixed;
	z-index: 9999;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* Black w/ opacity */
	justify-content: center;
	/* Centers horizontally */
	align-items: flex-end;
	/* Aligns the content to the bottom */
	pointer-events: none;
	/* Allows clicking behind the overlay if needed */
}

/* When the modal is active (you might need to toggle a class or change display to 'flex') */
.modal2[style*="display: block"] {
	display: flex !important;
}

.modal2-content {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	/* Allows wrapping if the screen is too narrow */
	align-items: center;
	/* Centers items vertically */
	gap: 5px 15px;
	background-color: #fefefe;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 750px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	pointer-events: auto;
	/* Re-enables clicks for the modal itself */
	margin-bottom: 50px;
	/* Sets the exact distance from the bottom */
	bottom: auto;
	/* Reset any previous bottom values */
}

.modal2-content .cookies-privacy-title {
	font-size: 2.25rem;
	color: #575757;
	margin-bottom: 1.75rem;
}

.modal2-content p {
	position: relative;
	font-family: "montserrat-light", sans-serif;
	font-size: 1.65rem;
	line-height: 1.4;
	color: #575757;
	bottom: 5px;
	margin-top: 0;
	margin-bottom: 1rem;
}

.modal2-content button.button-primary {
	background-color: #39b54a !Important;
}

.modal2-content button.button-secondary {
	background-color: #ff0000 !Important;
}

/* Modal2 Close button SPAN */
.closeBtn {
	position: relative;
	right: -15px;
	bottom: 7px;
}

/* Modal2 Close button DIV padding */
.closeBtnPadding {
	padding: 00px 00px 10px 00px;
}

/* BELOW MUST ALWAYS BE AT VERY END OF CSS FILE */

/* Quick Toggle: Kill Parallax for the Advert Section */
div.advert[data-parallax="scroll"] .parallax-mirror,
div.advert[data-parallax="scroll"] img.parallax-slider {
	transform: translate3d(0px, 0px, 0px) !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Fallback: Set a solid background layout if the script detaches the image completely */
div.advert {
	background-image: url('../images/technology-business-coffee-shop-online-8753928c16584b621c6c388fb1873272.jpg') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-attachment: scroll !important;
}