/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/



/* Import Font Awesome Icons for Client Testimonials quote marks */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

/*==========================================================================================   
                    1. TYPOGRAPHY      
===========================================================================================*/

/*================== FONT FAMILY ==========================================================*/

/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.irunmybusiness.com/wp-content/uploads/2024/03/playfair-display-v36-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('https://www.irunmybusiness.com/wp-content/uploads/2024/03/playfair-display-v36-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('https://www.irunmybusiness.com/wp-content/uploads/2024/03/playfair-display-v36-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('https://www.irunmybusiness.com/wp-content/uploads/2024/03/playfair-display-v36-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  src: url('https://www.irunmybusiness.com/wp-content/uploads/2024/03/playfair-display-v37-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  src: url('https://www.irunmybusiness.com/wp-content/uploads/2024/03/playfair-display-v36-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/*================== FONT SIZE ==========================================================*/

:root {
	/* This has to match what is in the Customizer > Typography. Pull in font families using font manager. Set headline-font as 'All headings'. Set body-font as HTML */
	--logo-font: 'Playfair Display', serif;
	--logo-tagline-font: 'Playfair Display', serif;
	--headline-font: 'Playfair Display', serif;
	--nav-font: 'Playfair Display', serif;
	--body-font: 'Playfair Display', serif;
	--button-font: 'Playfair Display', serif;
	--fs-pagination: clamp(0.95rem, 0.929rem + 0.057vw, 1rem);
	--fs-pagination-tilde: clamp(2.2rem, 1.629rem + 1.524vw, 3rem);
	--fs-logo: clamp(2.75rem, -0.038rem + 4.154vw, 7.75rem);
	--fs-logo-svg: clamp(3.25rem, -0.038rem + 4.154vw, 8.25rem);
	--fs-logo-tagline: clamp(1rem, 0.769rem + 0.615vw, 1.5rem);
	--fs-nav: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
	--fs-brand: clamp(1.375rem, 1.3rem + 0.375vw, 1.75rem);
    --fs-body: clamp(1.3rem, 0.974rem + 0.1299999999999999vw, 1.5rem);
	--fs-button: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
	--fs-category-button: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);
    --fs-headline-404: clamp(10rem, 3.333rem + 17.778vw, 30rem);
	--fs-headline-xxxl: clamp(7rem, 3.45rem + 12.75vw, 15.75rem);
	--fs-headline-xxl: clamp(4rem, 3.45rem + 2.75vw, 6.75rem);
    --fs-headline-xl: clamp(2.875rem, 2.375rem + 2.5vw, 5.375rem);
	--fs-headline-h1: clamp(2.5rem, 1.786rem + 1.905vw, 3.5rem);
	--fs-headline-h2: clamp(2.2rem, 1.629rem + 1.524vw, 3rem);
    --fs-headline-h3: clamp(1.85rem, 1.6700000000000002rem + 0.8999999999999999vw, 2.75rem);
    --fs-headline-h4: clamp(1.625rem, 1.5rem + 0.625vw, 2.25rem);
    --fs-headline-h5: clamp(1.375rem, 1.3rem + 0.375vw, 1.75rem);
    --fs-headline-h6: clamp(1.25rem, 1.22rem + 0.1499999999999999vw, 1.4rem);
    --fs-headline-s: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
    --fs-headline-pre: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
    --fs-headline-body-xxl: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
    --fs-headline-body-xl: clamp(1.13rem, 1.0159999999999998rem + 0.5700000000000001vw, 1.7rem);
    --fs-headline-body-l: clamp(1.11rem, 1.052rem + 0.2899999999999998vw, 1.4rem);
    --fs-headline-body-s: clamp(0.95rem, 0.9339999999999999rem + 0.08000000000000007vw, 1.03rem);
    --fs-headline-body-xs: clamp(0.89rem, 0.888rem + 0.010000000000000009vw, 0.9rem);
	--text-s: clamp(0.89rem, calc(0.87rem + 0.08vw), 0.94rem);
	--text-xs: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);
}


/*================== FONT SETTING STYLES ==========================================================*/

/* Default paragraph font settings */
p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.01rem;
	margin-bottom: 1.5rem;
	color: var(--text-color);
	transition: var(--default-transition);
}


/* Default Headings weight, margin, font-family */
h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	/*margin-bottom:0.5em;*/
	font-family: var(--headline-font);
	transition: var(--default-transition);
}

/* Heading font-size and line-height */

h1 {
	font-size: var(--fs-headline-h1);
	line-height: 1.05;
	color: var(--h1-color);
}

h2 {
	font-size: var(--fs-headline-h2);
	line-height: 1.1;
	color: var(--h2-color);
}

h3 {
	font-size: var(--fs-headline-h3);
	line-height: 1.15;
	color: var(--h3-color);
}

h4 {
	font-size: var(--fs-headline-h4);
	line-height: 1.1;
	color: var(--h4-color);
}

h5 {
	font-size: var(--fs-headline-h5);
	line-height: 1.25;
	color: var(--h5-color);
}

h6 {
	font-size: var(--fs-headline-h6);
	line-height: 1.4;
	color: var(--h6-color);
}


/*==========================================================================================   
                    2. COLOR VARIABLES FOR LIGHT AND DARK MODE      
===========================================================================================*/



/*   --------   Light Mode  --------   */

:root[data-theme="light"] {
	

	/* Color Variables */
	
	--body-bg-color: #f0f0f0;
	/*--body-bg-color: #c0c0c0;*/
	
	
	--logo-color: #545454;
	--logo-bg-color: #545454;
	/*--logo-tagline-color: #545454;*/
	--logo-tagline-color: #f2f2f2;
	
    --primary-color: #303030; /* Normal state */
	--primary-alt-color: var(--brand-color); /* Hover state */
	
    --brand-color: #015da0;
	--brand-alt-color: #f2395a;
	
	--button-text-primary-color: #ffffff; /* Button variables */
	--button-text-alt-color: #ffffff;
	--button-bg-primary-color: var(--brand-color);
	--button-bg-alt-color: var(--brand-alt-color);
	
	--category-button-text-primary-color: var(--brand-color); /* Buttons for Blog Post Categories/Tags/Terms */
	--category-button-text-alt-color: var(--body-bg-color);
	--category-button-bg-primary-color: var(--brand-alt-color);
	--category-button-bg-alt-color: var(--brand-color);
	
	--social-button-text-primary-color: var(--body-bg-color); /* Social Button variables */
	--social-button-text-alt-color: var(--body-bg-color);
	--social-button-bg-primary-color: var(--logo-color);
	--social-button-bg-alt-color: #323232;
	
	--h1-color: #606060;
	--h2-color: #606060;
	--h3-color: #606060;
	--h4-color: #505050;
	--h5-color: #505050;
	--h6-color: #404040;
	--text-color: #303030; /* Text colour */
	--text-light-color: #808080; /* Text light color */
   
	--contrast-1-color: #ffffff; /* Colors get darker down the line */
	--contrast-2-color: #d0d0d0;
	--contrast-3-color: rgb(240, 240, 240, 0.3); /* contast-4-color with 0.3 opacity */
	--contrast-4-color: #f9f9f9;
	--contrast-5-color: #fefdfa;
	--contrast-6-color: #ffffff;
	
	/* Box Shadow */
	--box-shadow: -2px 2px 70px -25px rgba(0,0,0,0.3);
	
	
	/* Toggle Switch */
	--switch-bg: #f0f0f0;
	--switch-circle-bg: #f5f5f5;
	--switch-circle-pos: 0.35rem;
	
	/*--icon-sun: #ffae42;*/
	--icon-sun: #f5761a;
	--icon-moon: #d0d0d0;
	
}


/*   --------   Dark Mode  --------   */

:root[data-theme="dark"] {
	
	/* Color Variables */
	
	--body-bg-color: #303030;
	/*--body-bg-color: #545454;*/
	
	--logo-color: #c0c0c0;
	--logo-bg-color: #f0f0f0;
	--logo-tagline-color: #f2f2f2;
	
    --primary-color: #c0c0c0; /* Normal state */
	--primary-alt-color: var(--brand-color); /* Hover state */
	
	--brand-color: #015da0;
	--brand-alt-color: #f2395a;
	
	--button-text-primary-color: #ffffff; /* Button variables */
	--button-text-alt-color: #ffffff;
	--button-bg-primary-color: var(--brand-color);
	--button-bg-alt-color: var(--brand-alt-color);
	
	--category-button-text-primary-color: var(--brand-color); /* Buttons for Blog Post Categories/Tags/Terms */
	--category-button-text-alt-color: var(--body-bg-color);
	--category-button-bg-primary-color: var(--background-alt-color);
	--category-button-bg-alt-color: var(--brand-color);
	
	--social-button-text-primary-color: var(--body-bg-color); /* Social Button variables */
	--social-button-text-alt-color: var(--body-bg-color);
	--social-button-bg-primary-color: var(--logo-color);
	--social-button-bg-alt-color: #e0e0e0;
	
	--h1-color: #b0b0b0;
	--h2-color: #b0b0b0;
	--h3-color: #b0b0b0;
	--h4-color: #c0c0c0;
	--h5-color: #d0d0d0;
	--h6-color: #d0d0d0;
	--text-color: #f0f0f0; /* Text colour */
	--text-light-color: #d0d0d0; /* Text light color */
   
	--contrast-1-color: #909090; /* Colors get darker down the line */
    --contrast-2-color: #606060;
    --contrast-3-color: #303030;
    --contrast-4-color: #28282b;
	--contrast-5-color: #242427;
	--contrast-6-color: #000000;
	
	
	/* Box Shadow */
	--box-shadow: -2px 2px 70px -25px rgba(255,255,255,0.3);
	
	
	/* Toggle Switch */
	--switch-bg: #383838;
	--switch-circle-bg: #303030;
	--switch-circle-pos: 3.1rem;
	
	--icon-sun: #606060;
	--icon-moon: #c0c0c0;
	
}


/*==========================================================================================   
                    3. OTHER VARIABLES      
===========================================================================================*/

:root {
	
	/* Border Radius Variables */

	--radius-xs: .125rem;
    --radius-s: .25rem;
    --radius-m: .5rem;
    --radius-l: 1rem;
    --radius-xl: 1.5rem;
    --radius-xxl: 2rem;
    --radius-50: 50%;
    --radius-circle: 50%;
	
	
	
	/* Transition */
	--default-transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out, fill .3s ease-in-out, transform .3s ease-in-out, all .3s ease-in-out, fill .3s ease-in-out;
		
}

/*==========================================================================================   
                    4. GENERAL GP THEME TWEAKS      
===========================================================================================*/


/* GeneratePress Global Variables */

:root {
		
	--contrast: red; /*Body Text, Body Link Hover, Site Title, Navigation Text Normal, Archive Content Title, Forms Text, Forms Text Focus */
    --contrast-2: red; /* Tagline, Archive Content Title Hover, Entry Meta Text */
    --contrast-3: red; /* Forms Border Focus, */
    --base: red; /* Sub-menu Background, Forms Border,  */
    --base-2: red; /* Body Background, */
    --base-3: red; /* Header Background, Navigation Background, Content Background, Sidebar Widgets Background, Footer Widgets Background, Footer Bar Background  */
    --accent: red; /* Body Link Normal, Navigation Text Hover, Navigation Text Current  */
}



/* General Style for Anchor links */
a {
	color: var(--primary-color);
	text-decoration: none;
}

a:hover {
	color: var(--brand-alt-color);
}


/* Customising Block Quotes*/

/* Style the container and set up some inheritance. */
blockquote {
	max-width: 900px;
	margin: 0 auto 5em auto;
	border-left: 0px; /* Get rid of the default left border */
	text-align: center; /* Center the content of the blockquote container */
	border-block: 3px solid var(--logo-color); /* border-block is for top and bottom borders while border-inline is for left and right borders. */
	transition: var(--default-transition);
	z-index: -1; /* Scroll the block quotes behind sticky reasons container */
}

.override-blockquote-default {
	z-index: 0;
	margin: 0;
	border-block: none; 
}


/* Style the text inside the blockquote container except the person's name. */
blockquote p {
	font-style: normal; /* Removes the default italics style from the text. */
	font-size: var(--fs-headline-h1);
	font-weight: 600;
	color: var(--text-color);
	transition: var(--default-transition);
}

/* Style the person's name. */
blockquote cite {
	font-style: normal; /* Removes the default italics style from the person's name. */
	font-size: 1rem;
	color: var(--text-color);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	transition: var(--default-transition);
}

/*==========================================================================================   
                    5. BODY      
===========================================================================================*/


/* Body background color (outside wrapper) */
body {
	background-color: var(--body-bg-color);
	font-family: var(--body-font);
	transition: var(--default-transition);
	/*overflow-x: hidden;*/ /* For Responsive Mobile Menu */
}


/*==========================================================================================   
                    5. UTILITY CLASSES      
===========================================================================================*/


/* =============Transition Class for container background color transistions=========== */

.transition {
	transition: var(--default-transition);
}



/*=================Looks like classes=============== */

.looks-h1 {
	font-size: var(--fs-headline-h1);
	line-height: 1.05;
	color: var(--h1-color);
}

.looks-h2 {
	font-size: var(--fs-headline-h2);
	line-height: 1.1;
	color: var(--h2-color);
}

.looks-h3 {
	font-size: var(--fs-headline-h3);
	line-height: 1.15;
	color: var(--h3-color);
}

.looks-h4 {
	font-size: var(--fs-headline-h4);
	line-height: 1.1;
	color: var(--h4-color);
}

.looks-h5 {
	font-size: var(--fs-headline-h5);
	line-height: 1.25;
	color: var(--h5-color)
}

.looks-h6 {
	font-size: var(--fs-headline-h6);
	line-height: 1.4;
	color: var(--h6-color)
}

.looks-logo {
	font-family: var(--body-font);
	font-size: var(--fs-logo);
	text-align: center;
	color: var(--logo-color);
	/*letter-spacing: 0.05em;*/
	transition: var(--default-transition);
}

.looks-logo-large {
	font-family: var(--body-font);
	font-size: var(--fs-headline-xxxl);
	text-align: center;
	color: var(--logo-color);
	/*letter-spacing: 0.05em;*/
	transition: var(--default-transition);
}

.looks-logo-small {
	font-family: var(--body-font);
	font-size: var(--fs-headline-h2);
	text-align: center;
	line-height: 1.7em;
	color: var(--logo-color);
	letter-spacing: 0.01em;
	transition: var(--default-transition);
}

/*=================Button classes=============== */

/* Author Name button or link */

.author-name {
	font-family: var(--body-font);
	font-size: var(--fs-category-button);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: var(--category-button-text-primary-color);
	transition: var(--default-transition);
}

.author-name:hover {
	color: var(--contrast-2-color);
}


/* Buy me coffee button */

.coffee {
	font-family: var(--button-font);
	font-size: var(--fs-button);
	font-weight: 500;
	column-gap: 1rem;
	background-color: var(--button-bg-primary-color);
	color: var(--button-text-primary-color);
	transition: var(--default-transition);
	cursor: pointer;
	padding: 1rem 1.5rem 1rem 1.5rem;
	border-radius: var(--radius-xxl);
	margin-top: 1rem;
}

.coffee:hover {
	background-color: var(--button-bg-alt-color);
	color: var(--button-text-primary-color);
}

.coffee svg {
	/*color: var(--brand-color);*/
	font-size: 2rem;
}


/* General Buttons */

.button-large, .button-medium, .button-small {
	font-family: var(--button-font);
	font-size: var(--fs-button);
	font-weight: 900;
	letter-spacing: 0.15em;
	background-color: var(--button-bg-primary-color);
	color: var(--button-text-primary-color);
	transition: var(--default-transition);
	cursor: pointer;
}

.button-large:hover, .button-medium:hover, .button-small:hover {
	background-color: var(--button-bg-alt-color);
	color: var(--button-text-primary-color);
}

.button-large {
	padding: 1rem 3rem 1rem 3rem;
}

.button-medium {
	padding: 1rem 2.5rem 1rem 2.5rem;
}

.button-small {
	padding: 1rem 2rem 1rem 2rem;
}



/* Category Button Class */

.category-button {
	font-family: var(--body-font);
	font-size: var(--fs-category-button);
	font-weight: 600;
	border-radius: var(--radius-xs);
	text-transform: uppercase;
	padding: 0.25rem 1rem 0.25rem 1rem;
	letter-spacing: 0.1rem;
	background-color: var(--button-bg-alt-color);
	color: var(--button-text-primary-color);
	transition: var(--default-transition);
}

.category-button:hover {
	background-color: var(--button-bg-primary-color);
	color: var(--button-text-alt-color);
}


/*==========================================================================================   
                    6. HEADER      
===========================================================================================*/

.site-header {
	/*position: sticky;
	top: 0px;*/
	background-color: var(--body-bg-color);
	transition: var(--default-transition);
	/*z-index:1;*/
}


/* Logo */

.main-title {
	margin-top: 25px;
}

.main-title a {
	font-family: var(--logo-font);
	font-size: var(--fs-logo);
	/*padding: 0em 0.7em 0.15em 0.7em;*/
	text-align: center;
	color: var(--logo-color);
	/*color: var(--text-light-color);*/
	letter-spacing: 0.05em;
	/*background-color: var(--logo-bg-color);*/
	transition: var(--default-transition);
}

/* Site Description */
.site-description {
	font-family: var(--logo-tagline-font);
	font-size: var(--fs-logo-tagline);
	margin-top: 25px;
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.19em;
	color: var(--logo-tagline-color);
	background-color: var(--brand-color);
	transition: var(--default-transition);
}


p.site-description {
	animation: animateTextUp 0.75s;
}



/* Toggle button for switching light and dark mode */

#theme-switcher {
	/*background-color: var(--switch-bg);*/
	border-radius: 50px;
	/*border: 0.15em solid var(--logo-color);*/
	display: flex;
	align-items: center;
	gap: 1.33rem;
	cursor: pointer;
	padding: 0.68rem;
	position: relative;
	transition: var(--default-transition);
}

#theme-switcher::before {
	content: '';
	position: absolute;
	width: 2.22rem;
	height: 2.22rem;
	/*background-color: var(--switch-circle-bg);*/
	border-radius: 50px;
	z-index: 0;
	left: 0;
	transform: translateX(var(--switch-circle-pos));
	transition: var(--default-transition);
}

#theme-switcher svg {
	z-index: 1;
	transition: var(--default-transition);
}

#icon-sun {
	fill: var(--icon-sun);
	transition: var(--default-transition);
}

#icon-moon {
	fill:var(--icon-moon);
	transition: var(--default-transition);
}


/* Main Navigation */
.main-navigation {
	margin-top: 30px;
	margin-bottom: 70px;
	font-family: var(--nav-font);
}

.main-navigation a {
	font-size: var(--fs-nav);
}


/*==========================================================================================   
                    7. HYBRID SCROLL PAGE --- REMOVE BEFORE DEPLOYNG WEBSITE    
===========================================================================================*/
/* Hybrid Scroll Wrapper */
/*.hybrid-scroll-inner-container {
	width: 100%;
	height: 100%;
}*/


/* For Vertical Scroll Section Containers */
.vertical-scroll-section {
	height: 100vh;
}

.vertical-scroll-section-inner-container {
	padding: 5rem;
}

/* For Horizontal Scroll Section Containers */
.sticky-parent-horizontal-scroll-section {
	height: 500vh;
	/*border: 1px solid blue;*/
}

.sticky-horizontal-scroll-section {
	overflow: hidden;
	position: sticky;
	top:0;
	height: 100vh;
	/*border: 1px solid red;*/
}

.scroll-section {
	/*position: absolute;
	top: 0;
	height: 100%;*/
	width: 400vw; /* same number as 500vh ??? */
	will-change: transform;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	padding: 0 10vw;
}

.scroll-section img {
	width: 800px;
	height: auto; /*80% of vh*/
	object-fit: cover; /* Image will fill the dimensions width and height above but also keep the aspect ratio */
	object-position: center;
}

/*==========================================================================================   
                    5. HOME PAGE MAIN - HYBRID SCROLLING     
===========================================================================================*/

/*==================== Simple Text Animation ==========================*/

.text-animation-up {
	animation: animateTextUp 0.75s;
}


@keyframes animateTextUp {
	from {
		opacity: 0;
		transform: translateY(-16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*------------------ HIDE - SHOW SERVICES Containers (Hobby, Boost & Super Boost) --------------- */

.hide-services-containers-from-left {
	position: relative;
	transform: translateX(-150px);
	opacity: 0;
	/*transition: all 2s ease;*/
	transition: var(--default-transition);
}

.hide-services-containers-from-right {
	position: relative;
	transform: translateX(150px);
	opacity: 0;
	/*transition: all 2s ease;*/
	transition: var(--default-transition);
}

.hide-services-containers-from-bottom {
	position: relative;
	transform: translateY(150px);
	opacity: 0;
	/*transition: all 2s ease;*/
	transition: var(--default-transition);
}

.hide-services-containers-from-left.show-services-containers,
.hide-services-containers-from-right.show-services-containers,
.hide-services-containers-from-bottom.show-services-containers {
	transform: translate(0px);
	opacity: 1;
}




/* Left Home Wrapper */
.left-home-wrapper {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	min-height: 100vh;
	top: 0;
	left: 0;
	bottom: 0;
	padding: 50px 10px;
	display: inline-block;
	float: left;
	/*display: flex;*/
	/*display: none;*/
	/*flex-direction: column;
	justify-content: flex-start;
	align-items: center;*/
	background-color: var(--contrast-4-color);
	transition: var(--default-transition);
	z-index: 1; /* Keeps left wrapper above the sticky reason containers */
}


/* Author Profile Card */

.author-profile-card-home {
	max-width: 290px;
}

.author-profile-card-home img {
	width: 250px;
	height: auto;
}

.author-profile-description-home {
	padding: 0 1em;
}


/* Desktop Social Icons */ 
.desktop-social-icons {
	margin-top: 3em;
	display: flex;
	gap: 0.5em;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	/*position: sticky;
	bottom: 0;*/
}

.desktop-social-icon {
	height: 45px;
	width: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	/*background-color: var(--brand-color);*/
	background-color: var(--social-button-bg-primary-color);
	/*border-radius: var(--radius-m);*/
	/*border: 3px solid var(--text-light-color);*/
	transition: var(--default-transition);
}

.desktop-social-icon:hover {
	background-color: var(--social-button-bg-alt-color);
}

.desktop-social-icon svg {
	height: 1.3em;
	width: 1.3em;
	/*color: var(--brand-color);*/
	color: var(--social-button-text-primary-color);
	transition: var(--default-transition);
}

/* Right Home Wrapper */
.right-home-wrapper {
	min-height: 100vh;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 25px;
	display: inline-block;
	float: right;
	/*display: none;*/
	/*justify-content: center;
	align-items: center;*/
	background: var(--brand-color);
	/*border-left: 2em solid var(--brand-color);*/
	transition: var(--default-transition);
	z-index: 1;
}


/* Content Title Card */
.content-title-home {
	max-width: 290px;
}

.content-title-home h2 {
	font-family: var(--logo-font);
	font-size: 3.3rem;
	font-weight: 700;
	/*padding: 0em 0.7em 0.15em 0.7em;*/
	text-align: center;
	color: #ffffff;
	/*color: var(--text-light-color);*/
	/*letter-spacing: 0.05em;*/
	/*background-color: var(--logo-bg-color);*/
	transition: var(--default-transition);
}


/* Say Hello Form */

.desktop-say-hello {
	width: 260px;
	/*height: 550px;*/
	/*position: fixed;
	top: 0;
	right: 0;
	bottom: 0;*/
	background: var(--brand-color);
	/*border: 13px solid var(--brand-color);*/
	/*border: 15px solid var(--text-light-color);*/
	transition: var(--default-transition);
}

.desktop-say-hello label {
	color: #ffffff;
	font-family: var(--body-font);
	transition: var(--default-transition);
}

.desktop-say-hello input[type=text],
.desktop-say-hello input[type=email]{
	font-family: inherit;
	font-size: inherit;
	color: #393939;
	border-radius: 0px;
	transition: var(--default-transition);
}

/*.desktop-say-hello input[type=text]:focus,
.desktop-say-hello input[type=email]:focus {
  border: 3px solid var(--brand-color);
  transition: var(--default-transition);
}*/

.desktop-say-hello textarea {
	color: #393939!important;
	font-family: var(--body-font)!important;
	border-radius: 0px!important;
	/*letter-spacing: 0.13em!important;*/
	/*line-height: 1.7em!important;*/
	/*resize: none!important;*/
	transition: var(--default-transition)!important;
}

.desktop-say-hello .ff-btn-submit {
	margin-top: 25px;
	font-family: var(--logo-font);
	font-size: 2.3rem!important;
	font-weight:600!important;
	letter-spacing: 0.03em!important;
	background-color: var(--brand-alt-color)!important;
	border-radius: 0px!important;
	color: #ffffff!important;
	border: 3px solid #ffffff!important;
	transition: var(--default-transition)!important;
}

.desktop-say-hello .ff-btn-submit:hover {
	background-color: var(--brand-color)!important;
	border-radius: 0px!important;
	color: #ffffff!important;
	border: 3px solid #ffffff!important;
	transition: var(--default-transition)!important;
}



/* MAIN INNER CONTAINER */
.main-inner-container {
	max-width: 70vw;
	margin: 0 auto;
}


/* Custom color for MARK html higlighter */
mark {
	padding: 0.15em 0.3em;
	background-color: var(--brand-alt-color)!important;
	color: #ffffff!important;
	/*border: 5px solid var(--brand-color)!important;*/
	font-weight: 600!important;
}


/* Main Info Container Home */
.main-container-outer-info-container {
	background-image: radial-gradient(var(--brand-color) 0.001px, transparent 3px); /*background-pattern*/
	background-size: 250px 250px; /*background-pattern*/
	border: 3px solid var(--brand-color);
	transition: var(--default-transition);
}

.main-container-inner-info-container {
	background-image: radial-gradient(var(--brand-alt-color) 0.001px, transparent 3px); /*background-pattern*/
	background-size: 200px 200px; /*background-pattern*/
	transition: var(--default-transition);
}


/* CSS Star for Numbers */

/* Star with brand color */
.star-brand {
	height: 0;
	width: 0;
	border-bottom: 20px solid var(--brand-color);
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	position: relative;
	z-index: -1;
}

.star-brand:before {
	position: absolute;
	content: '';
	height: 0;
	width: 0;
	border-top: 20px solid var(--brand-color);
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	top: 7px;
	left: -13px;
	z-index: -1;
}


/* Star with brand alt color */
.star-brand-alt {
	height: 0;
	width: 0;
	border-bottom: 20px solid var(--brand-alt-color);
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	position: relative;
	z-index: -1;
}

.star-brand-alt:before {
	position: absolute;
	content: '';
	height: 0;
	width: 0;
	border-top: 20px solid var(--brand-alt-color);
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	top: 7px;
	left: -13px;
	z-index: -1;
}





/* Sticky Containers */
.sticky-reason-1,
.sticky-reason-2,
.sticky-reason-3,
.sticky-reason-4,
.sticky-reason-5 {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	min-height: 100px;
	display: flex;
	justify-content: center;
	align-items:center;
	/*border: 1px dotted var(--brand-color);*/
	background-color: var(--body-bg-color);
	/*background-color: var(--brand-alt-color);*/
	/*color: #FF5353;*/
	font-size: var(--fs-headline-h3);
	font-weight: 700;
	/*letter-spacing: 0.15em;*/
	transition: var(--default-transition);
	/*z-index:1;*/
}

.sticky-reason-final {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	min-height: 100px;
	background-color: var(--body-bg-color);
	/*background-color: var(--brand-alt-color);*/
	color: var(--logo-color);
	font-size: var(--fs-headline-h3);
	font-weight: 700;
	/*letter-spacing: 0.15em;*/
	transition: var(--default-transition);
	border: 3px solid var(--brand-alt-color);
	/*z-index:1;*/
}


.sticky-reason-1 h2,
.sticky-reason-2 h2,
.sticky-reason-3 h2,
.sticky-reason-4 h2,
.sticky-reason-5 h2 {/*color: #ffffff;*/}

.sticky-reason-1 {top: 0px;}
.sticky-horizontal-scroll-section-home-reason-1 {top: 100px;}
.sticky-reason-2 {top: 70px;}
.sticky-horizontal-scroll-section-home-reason-2 {top: 170px;}
.sticky-reason-3 {top: 140px;}
.sticky-horizontal-scroll-section-home-reason-3 {top: 240px;}
.sticky-reason-4 {top: 210px;}
.sticky-horizontal-scroll-section-home-reason-4 {top: 310px;}
.sticky-reason-5 {top: 280px;}
.sticky-horizontal-scroll-section-home-reason-5 {top: 380px;}
.sticky-reason-final {top: 350px;}


/* For Horizontal Scroll Section Containers */
.sticky-parent-horizontal-scroll-section-home {
	height: 400vh;
	/*border: 1px solid blue;*/
}

/* Container used in JavaScript */
.sticky-horizontal-scroll-section-home {
	overflow: hidden;
	position: sticky;
	/*top:50px;*/
	height: 100vh;
	/*border: 1px solid red;*/
}

/* Container used in JavaScript */
.scroll-section-home {
	/*position: absolute;
	top: 0;
	height: 100%;*/
	width: 300vw; /* smaller number than 400vh ??? */
	will-change: transform;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	padding: 0 10vw;
}

/* Scroll Section Content Wrapper */
.scroll-section-home-content-wrapper {
	width: 55vw;
	height: 80vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--contrast-4-color);
	/*border: 3px solid var(--brand-alt-color);*/
	background-image: radial-gradient(var(--brand-color) 0.001px, transparent 3px); /*background-pattern*/
	background-size: 300px 300px; /*background-pattern*/
	transition: var(--default-transition);
}

/* Scroll Section Content */
.scroll-section-home-content {
	width: 50vw;
	height: 65vh;
	/*background-color: var(--contrast-4-color);*/
	/*border: 3px solid var(--brand-color);*/
	background-image: radial-gradient(var(--brand-alt-color) 0.001px, transparent 3px); /*background-pattern*/
	background-size: 300px 300px; /*background-pattern*/
	transition: var(--default-transition);
}


/* Scroll Section Content Wrapper for the 4rth and 5th content */
.scroll-section-home-content-wrapper-4-5 {
	/*width: 50vw;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;*/
	background-color: var(--contrast-4-color);
	background-image: radial-gradient(var(--brand-color) 0.001px, transparent 3px); /*background-pattern*/
	background-size: 300px 300px; /*background-pattern*/
	transition: var(--default-transition);
}


/* Customising size for the 4rth and the 5th content */
.scroll-section-home-content-4 {
	width: 50vw;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	/*background-color: var(--contrast-4-color);*/
	/*border: 1px solid green;*/
	/*border: 3px solid var(--brand-color);*/
	background-image: radial-gradient(var(--brand-alt-color) 0.001px, transparent 3px); /*background-pattern*/
	background-size: 200px 200px; /*background-pattern*/
	transition: var(--default-transition);
}

.scroll-section-home-content-5 {
	width: 50vw;
	height: 35vh;
	/*background-color: var(--contrast-4-color);*/
	/*border: 1px solid green;*/
	/*border: 3px solid var(--brand-color);*/
	background-image: radial-gradient(var(--brand-alt-color) 0.001px, transparent 3px); /*background-pattern*/
	background-size: 200px 200px; /*background-pattern*/
	transition: var(--default-transition);
}

.scroll-section-home img {
	width: 800px;
	height: auto; /*80% of vh*/
	object-fit: cover; /* Image will fill the dimensions width and height above but also keep the aspect ratio */
	object-position: center;
}



/* Client Testimonial Containers*/

.clients-say-container {
  position: relative;
  box-shadow: 8px 10px 5px #0003;
  background-color: var(--contrast-4-color);
  outline: 1px solid var(--contrast-2-color);
  outline-offset: -3em;
  /*border-radius: var(--radius-m);*/
  padding: 5em;
  color: var(--text-color);
  transition: var(--default-transition);
  /*transition: all 2s ease;*/
}

/*
.clients-say-container svg {
	fill: var(--text-color);
}
*/


/* FontAwesome Quotes for client testimonials */
.clients-say-container::before {
	content: '\f10d';
	position: absolute;
	font-family: FontAwesome;
	font-size: 1.7rem;
	width: 130px;
	height: 60px;
	top: 1.1em;
	left:1em;
	/*background-color:red;*/
	background-color:var(--contrast-4-color);
	/*transition: all 2s ease;*/
	transition: var(--default-transition);
}

.clients-say-container::after {
	content: '\f10e';
	position: absolute;
	font-family: FontAwesome;
	font-size: 1.7rem;
	width: 130px;
	height: 60px;
	bottom: 0.6em;
	right:1em;
	/*background-color:red;*/
	background-color:var(--contrast-4-color);
	/*transition: all 2s ease;*/
	transition: var(--default-transition);
}


.clients-say-client-text {
	font-style: italic;
	font-size: var(--fs-headline-body-l);
}

.clients-say-client-name {
	font-size: var(--text-s);
}





/* Block: Accordion: Self-closing for FAQ */

/*.accordion_wrapper_content,
.accordion_wrapper_content p {
	color: var(--text-color);
	transition: var(--default-transition);
}*/

.accordion_header {
	cursor: pointer;
	background-color: var(--contrast-4-color);
	transition: var(--default-transition);
}

.accordion_content {
  margin-left: 50px;
  margin-right: 15px;
  overflow: hidden;
  height: 0;
  /*background-color: var(--contrast-4-color);*/
  /*color: #ffffff;*/
  /*transition: all .5s ease;*/
  transition: var(--default-transition);
  font-size: 14px;
}


.accordion_active {
  padding-bottom: 10px;
}

.accordion-plus-icon {
  font-weight: 600;
}



/* ============= Hide Page Mobile Containers =========== */
.mobile-container {
	display: none;
}



/*==========================================================================================   
5. HOME PAGE LAPTOP AND IPAD LANDSCAPE - HYBRID SCROLLING FOR LAPTOP DEVICES AND IPAD LANDSCAPE    
===========================================================================================*/

@media screen and (max-width:1300px) {
	/* Content Title Card */
.content-title-home {
	max-width: 260px;
	border: 1px solid red;
}


/* Left Home Wrapper */
.left-home-wrapper {
	padding: 20px 10px;
}	
	

/* Author Profile Card */

.author-profile-card-home {
	max-width: 250px;
}

.author-profile-card-home img {
	width: 230px;
	height: auto;
}

.author-profile-description-home {
	padding: 0 0.5em;
}
	
	
	/* Desktop Social Icons */ 
.desktop-social-icons {
	margin-top: 1.5em;
	gap: 0.5em;
}

.desktop-social-icon {
	height: 40px;
	width: 40px;
}

/* Say Hello Form */

.desktop-say-hello {
	width: 210px;
	/*height: 550px;*/
	/*position: fixed;
	top: 0;
	right: 0;
	bottom: 0;*/
	background: var(--brand-color);
	/*border: 13px solid var(--brand-color);*/
	/*border: 15px solid var(--text-light-color);*/
	transition: var(--default-transition);
}	
	
	
}



/*==========================================================================================   
                    5. HOME PAGE IPAD PORTRAIT - HYBRID SCROLLING FOR IPAD PORTRAIT MODE     
===========================================================================================*/

@media screen and (max-width:1025px) {
	/* Content Title Card */
.left-home-wrapper
	{
		display: none;
	}
	.right-home-wrapper {
		display: none;
	}
	/* MAIN INNER CONTAINER */
   .main-inner-container {
	   max-width: 95vw;
   }
	
	/* Container used in JavaScript */
.scroll-section-home {
	width: 350vw; /* smaller number than 400vh ??? */
	will-change: transform;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	padding: 0 10vw;
}
	
	/* Scroll Section Content Wrapper */
.scroll-section-home-content-wrapper {
	width: 60vw;
	height:80vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--contrast-4-color);
	border: 3px solid var(--brand-alt-color);
	transition: var(--default-transition);
}

/* Scroll Section Content */
.scroll-section-home-content {
	width: 55vw;
	height: 75vh;
	/*background-color: var(--contrast-4-color);*/
	border: 3px solid var(--brand-color);
	transition: var(--default-transition);
}
	

/* Scroll Section Content Wrapper for SECTION 4 AND SECTION 5 */
.scroll-section-home-content-wrapper-ipad {
	width: 60vw;
	height:70vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--contrast-4-color);
	border: 3px solid var(--brand-alt-color);
	transition: var(--default-transition);
}


/* Customising size for the 4rth and the 5th content */
.scroll-section-home-content-4 {
	width: 55vw;
	height: 65vh;
	/*background-color: var(--contrast-4-color);*/
	/*border: 1px solid green;*/
	border: 3px solid var(--brand-color);
	transition: var(--default-transition);
}

.scroll-section-home-content-5 {
	width: 55vw;
	height: 55vh;
	/*background-color: var(--contrast-4-color);*/
	/*border: 1px solid green;*/
	border: 3px solid var(--brand-color);
	transition: var(--default-transition);
}


}


/*==========================================================================================   
                    5. HOME PAGE MOBILE - SIMPLE SCROLLING FOR MOBILE DEVICES     
===========================================================================================*/

/* SHOW Mobile Containers and HIDE Desktop Containers */

@media screen and (max-width:800px) {
	.mobile-container {
	display: block;
    }
	.desktop-container {
		display: none;
	}
}


/* Sticky Containers For Mobile */
.sticky-reason-1-mobile,
.sticky-reason-2-mobile,
.sticky-reason-3-mobile,
.sticky-reason-4-mobile,
.sticky-reason-5-mobile {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	min-height: 70px;
	display: flex;
	justify-content: center;
	align-items:center;
	/*border: 1px dotted var(--brand-color);*/
	background-color: var(--body-bg-color);
	/*background-color: var(--brand-alt-color);*/
	/*color: #FF5353;*/
	font-size: var(--fs-headline-h3);
	font-weight: 700;
	/*letter-spacing: 0.15em;*/
	transition: var(--default-transition);
	/*z-index:1;*/
}


.sticky-reason-final-mobile {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	min-height: 70px;
	background-color: var(--body-bg-color);
	/*background-color: var(--brand-alt-color);*/
	color: var(--logo-color);
	font-size: var(--fs-headline-h4);
	font-weight: 700;
	/*letter-spacing: 0.15em;*/
	transition: var(--default-transition);
	/*z-index:1;*/
}


.sticky-reason-1-mobile {top: 0px;}
.sticky-reason-2-mobile {top: 70px;}
.sticky-reason-3-mobile {top: 140px;}
.sticky-reason-4-mobile {top: 210px;}
.sticky-reason-5-mobile {top: 280px;}
.sticky-reason-final-mobile {top: 350px;}



/*==========================================================================================   
                    6. FOOTER     
===========================================================================================*/


.copyright-bar {
	color: var(--text-color);
	transition: var(--default-transition);
}