/*
 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
*/

/*   =============   TABLE OF CONTENTS   ================

0. Toggle Mode
1. Theme Tweaks
2. Utilities
3. Typography
4. Fluent Forms

========================================================   */


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



/*   =================== LOCAL GOOGLE FONT : INTER   =======================   */


/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('https://avanair.com/wp-content/uploads/2024/01/inter-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('https://avanair.com/wp-content/uploads/2024/01/inter-v13-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('https://avanair.com/wp-content/uploads/2024/01/inter-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('https://avanair.com/wp-content/uploads/2024/01/inter-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('https://avanair.com/wp-content/uploads/2024/01/inter-v13-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('https://avanair.com/wp-content/uploads/2024/01/inter-v13-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/*   ============   0. TOGGLE LIGHT AND DARK MODE   ==================   */


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

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

	/* Color Variables */
	
	--body-bg-color: #f8f8f8; /* body background colour */
	
	--logo-color: #505050; /* logo colour */ 
	--logo-tagline-color: #808080;
	
    --primary-color: #303030; /* Normal state */
    /*--primary-alt-color: #909090;*/ /* Hover state */
	--primary-alt-color: var(--text-light-color); /* Hover state */
	
    /*--brand-color: #fc4c02;*/ /* Brand Primary */
	/*--brand-color: #ff4500;*/
	--brand-color: #7463ce; /* Brand Primary Color */
    /*--brand-alt-color: #bab1e7;*/ /* Brand Secondary Color */
    --brand-alt-color: #7f11e0;
	
	
	--button-text-primary-color: var(--body-bg-color); /* Button variables */
	--button-text-alt-color:var(--body-bg-color);
	--button-bg-primary-color: #505050;
	--button-bg-alt-color: #b0b0b0;
	
	--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);
	
	--overlay-color: rgba(166, 166, 166, 0.7); /* Overlay page background color */
	
	--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: #a0a0a0; /* Text light color */
   
	--contrast-1-color: #ffffff; /* Colors get darker down the line */
	/*--contrast-2-color: #d0d0d0;*/
	--contrast-2-color: #a6a6a6;
	--contrast-3-color: rgb(240, 240, 240, 0.3); /* contast-4-color with 0.3 opacity */
    --contrast-4-color: #f0f0f0;
	
	/* 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;
	
}


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

:root[data-theme="dark"] {
	
	/* Color Variables */
	
	--body-bg-color: #303030; /* body background colour */
	
	--logo-color: #f0f0f0; /* logo colour */
	--logo-tagline-color: #c0c0c0;
	
    --primary-color: #c0c0c0; /* Normal state */
    /*--primary-alt-color: #909090;*/ /* Hover state */
	--primary-alt-color: var(--text-light-color); /* Hover state */
	
    /*--brand-color: #cf4344;*/ /* Brand Primary */
	/*--brand-color: #ff4500;*/
	--brand-color: #7463ce; /* Brand Primary Color */
    /*--brand-alt-color: #514590;*/ /* Brand Secondary Color */
	--brand-alt-color: #7f11e0;
	
	--button-text-primary-color: var(--body-bg-color); /* Button variables */
	--button-text-alt-color:var(--body-bg-color);
	--button-bg-primary-color: #c0c0c0;
	--button-bg-alt-color: #868686;
	
	
	--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);
	
	--overlay-color: rgba(128, 128, 128, 0.7); /* Overlay page background color */
	
	--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: #808080;
    --contrast-3-color: #303030;
    --contrast-4-color: #28282b;
	
	
	/* 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;
	
}


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



/*   ============   1. THEME TWEAKS   ==================   */


/* GeneratePress Global Variables */

:root {
	/*
    --contrast: #222222;
    --contrast-2: #575760;
    --contrast-3: #b2b2be;
    --base: #f0f0f0;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #1e73be;
	*/
	
	--contrast: red;
    --contrast-2: red;
    --contrast-3: red;
    --base: red;
    --base-2: red;
    --base-3: red;
    --accent: red;
}


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

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



/*==================== Author Style for Author Avatar eg: Blog Post. Used instead of Gravatar. Plugin name: One User Avatar| User Profile Picture ==========================*/

.avatar {
	display: block;
	width: 100px;
	height: auto;
	border-radius: 50px;
}

a {
	color: var(--primary-color);
}

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


/* Search Block */

.wp-block-search {
	border-radius: 4px;
	overflow: hidden;
	outline: 1px solid var(--contrast-4-color);
	box-shadow: 0px 0px 0px var(--contrast-1-color);
	transition: var(--default-transition);
}

.wp-block-search:focus-within {
	outline: 1px solid var(--contrast-4-color);
	box-shadow: 0px 4px 10px var(--contrast-4-color);
	
}

.wp-block-search input {
	border: none;
	padding: 0px 1em;
	border-radius: 4px;
	outline: none;
}

.wp-block-search button {
	background: var(--contrast-4-color);
	color: var(--contrast-1-color);
	padding: 10px 12px;
	border-left: 1px solid var(--contrast-4-color);
}

.wp-block-search button:hover {
	background: var(--contrast-4-color);
	color: var(--contrast-2-color);
}



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

#theme-switcher {
	background-color: var(--switch-bg);
	border-radius: 50px;
	border: 0.15em solid var(--brand-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);
}


/* Slim SEO Breadcrumbs */

.slim-seo-breadcrumbs-container {
	max-width: 90vw;
	color: var(--text-color);
	/*background-color: var(--contrast-4-color);*/
	margin: 0 auto 0 auto;
	padding-top: 3em;
	padding-bottom: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--default-transition);
}

.breadcrumbs {
	padding: 0.5em;
	border: 1px solid var(--contrast-2-color);
	border-radius: var(--radius-m);
	transition: var(--default-transition);
}

.breadcrumbs span.breadcrumbs__separator {
	color: var(--brand-color);
	transition: var(--default-transition);
}

.breadcrumb {
	font-family: var(--button-font);
	color: var(--logo-color);
	margin-right: 0.3em;
	margin-left: 0.3em;
	transition: var(--default-transition);
}

.breadcrumb--first {
	display: none; /*Shows the first element of the breadcrumbs navigation */
}



.breadcrumb--last {
	/*color: var(--logo-color);*/
	display: none;
}



/*   ============   2. 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. GP uses it by default */
	/*border: 1px solid red;*/
}



/*   ============   2. UTILITIES   ==================   */

/* Container background color transistions */

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

/* Sticky Utility Class */
.sticky-container {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 7.295em;
  z-index: 10;
}

@media screen and (max-width:600px){ 
	.sticky-container {
  top: 6.8em;
  }
}

/* Aspect Ratios */

.ar-16-9, .ar-9-16, .ar-4-3 {
	object-fit: cover;
}

.ar-16-9 {
	aspect-ratio: 16/9;
}

.ar-9-16 {
	aspect-ratio: 9/16;
}

.ar-4-3 {
	aspect-ratio: 4/3;
}

.ar-1-1 {
	aspect-ratio: 1/1;
}



/*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-hsmall {
	font-size: var(--fs-headline-s);
	line-height: 1.4;
	color: var(--h6-color);
}


/* 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 */

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


/* Button Class */

.button-large, .button-medium, .button-small {
	font-family: var(--button-font);
	font-size: var(--fs-button);
	font-weight: 500;
	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;
	border-radius: var(--radius-xxl);
	margin-top: 3rem;
}

.button-medium {
	padding: 1rem 2.5rem 1rem 2.5rem;
	border-radius: var(--radius-xxl);
}

.button-small {
	padding: 1rem 2rem 1rem 2rem;
	border-radius: var(--radius-xxl);
}



/* 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);
}





/*   ============   3. TYPOGRAPHY   ==================   */

: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: 'Gelasio', serif;*/
	--logo-font: 'Inter', sans-serif;
	/*--logo-font: 'Montserrat', sans-serif;*/
	--logo-tagline-font: 'Inter', sans-serif;
	--headline-font: 'Inter', sans-serif;
	--nav-font: 'Inter', sans-serif;
	/*--nav-font: 'Montserrat', sans-serif;*/
	/*--nav-font: 'Gelasio', serif;*/
    --body-font: 'Inter', sans-serif;
	--button-font: 'Inter', sans-serif;
	/*--fs-logo: clamp(3rem, 2.286rem + 1.905vw, 4rem);*/
	--fs-pagination: clamp(0.95rem, 0.929rem + 0.057vw, 1rem);
	--fs-pagination-tilde: clamp(2.2rem, 1.629rem + 1.524vw, 3rem);
	--fs-logo: clamp(1rem, -0.25rem + 3.333vw, 2.75rem);
	--fs-logo-tagline: clamp(1rem, 0.769rem + 0.615vw, 1.5rem);
	--fs-nav: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
	--fs-portfolio-svg: clamp(25.375rem, 1.3rem + 0.375vw, 1.75rem);
	--fs-brand: clamp(1.375rem, 1.3rem + 0.375vw, 1.75rem);
    --fs-body: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
	--fs-content-title: clamp(2rem, -1.393rem + 9.048vw, 6.75rem);
	--fs-social-icons: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
	--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-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-h1: clamp(2.5rem, 2.15rem + 1.7500000000000002vw, 4.25rem);*/
    /*--fs-headline-h2: clamp(2.175rem, 1.9349999999999998rem + 1.2000000000000002vw, 3.375rem);*/
	--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);
}


/* Default Body / p font settings */
p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.01rem;
	margin-bottom: 1.5rem;
	/*font-family: var(--body-font);*/
	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;
	text-wrap: balance; /* Keeps the text wrap balanced across multiple lines */
	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);
}



/*==========================================================================================   
                    5.1. MAUTIC FORMS      
===========================================================================================*/

.mautic-subscribe-form-wrapper {
	max-width: 530px;
	margin: 0 auto 0 auto;
}


label#mauticform_label_newsubscriberform_first_name {
	font-family: var(--body-font);
	font-size: var(--fs-body);
	font-weight: normal;
	color: var(--logo-color);
	transition: var(--default-transition);
}

input[type=text] {
	color: var(--text-color);
	border-radius: var(--radius-m);
	border: 1px solid var(--contrast-2-color);
	background-color: var(--contrast--4-color);
	transition: var(--default-transition);
}

input[type=text]:focus {
  outline: none;
}


label#mauticform_label_newsubscriberform_email {
	font-family: var(--body-font);
	font-size: var(--fs-body);
	font-weight: normal;
	color: var(--logo-color);
	transition: var(--default-transition);
}

input[type=email] {
	color: var(--text-color);
	border-radius: var(--radius-m);
	border: 1px solid var(--contrast-2-color);
	background-color: var(--contrast--4-color);
	transition: var(--default-transition);
}

input[type=email]:focus {
  outline: none;
}


button#mauticform_input_newsubscriberform_submit {
	font-family: var(--body-font);
	font-size: var(--fs-body);
	font-weight: 500;
	letter-spacing: 0.07em;
	padding: 0.7rem 1.7rem 0.7rem 1.7rem;
	margin-top: 1em;
	background-color: var(--contrast--4-color);
	border-radius: var(--radius-m);
	/*border-radius: var(--radius-xxl);*/
	/*background-color: var(--button-bg-primary-color);*/
	/*color: var(--button-text-primary-color);*/
	border: 1px solid var(--brand-color);
	color: var(--brand-color);
	transition: var(--default-transition);
	cursor: pointer;
}

button#mauticform_input_newsubscriberform_submit:hover {
	/*background-color: var(--button-bg-alt-color);*/
	color: var(--logo-color);
	border: 1px solid var(--logo-color);
}


.mauticform-row:last-child { /* removing margin-bottom from submit button */
	margin-bottom: 0px;
}




/*   ============   5. FLUENT FORMS   ==================   */


.fluentform .frm-fluent-form input:not([type="submit"]),
.fluentform .frm-fluent-form textarea {
	font-family: var(--body-font);
	color: var(--text-color);
	border-width: 1px;
	border-radius: 0px;
	border-color: var(--contrast-4-color);
	background-color: var(--body-bg-color);
	padding: 12px 16px;
	transition: var(--default-transition);
}

/* required asterisk color */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
	color: var(--primary-color);
	transition: var(--default-transition);
}

.fluentform .ff-el-group {
	margin-bottom: 15px;
}

.fluentform .frm-fluent-form input:not([type="submit"]):focus ,
.fluentform .frm-fluent-form textarea:focus {
	border-width: 1px;
	border-color: var(--contrast-1-color);
	background-color: var(--contrast-4-color);
	color: var(--text-color);
	transition: var(--default-transition);
}

.fluentform .ff_t_c { /* Need to find out what this is? */
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: red;
	padding-left: 5px;
	padding-bottom: 16px;
	transition: var(--default-transition);
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border: 1px solid var(--primary-color);
	transition: var(--default-transition);
}

.fluentform .ff-el-is-error .text-danger {
	font-family: var(--body-font);
	font-size: 14px;
	color: var(--contrast-1-color);
	transition: var(--default-transition);
}

.fluentform .ff-el-form-check-label .ff-el-form-check-input {
	top: -1px;
}

.fluentform .frm-fluent-form .ff-el-input--label label {
	font-family: var(--body-font);
	font-size: 0.9rem;
	color: var(--text-color);
	transition: var(--default-transition);
}

.fluentform .frm-fluent-form input::placeholder,
.fluentform .frm-fluent-form textarea::placeholder {
	font-family: var(--body-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--text-light-color);
	transition: var(--default-transition);
}


.fluentform .frm-fluent-form button[type='submit'] {
	font-family: var(--button-font);
	font-size: var(--fs-button);
	font-weight: 500;
	color: var(--button-text-primary-color)!important;
	background-color: var(--button-bg-primary-color)!important;
	border: none;
	padding: 10px 32px;
	height: auto;
	display: block;
	margin-right: auto;
	border-radius: var(--radius-xxl);
	transition: var(--default-transition);
}

.fluentform .frm-fluent-form button[type='submit']:hover {
	color: var(--button-text-alt-color)!important;
	background-color: var(--button-bg-alt-color)!important;
	transition: var(--default-transition);
}

#fluentform_4_success .ff-message-success {
	font-family: var(--body-font);
	border: 0px solid white;
	box-shadow: 0px 0px 0px 0px #ffffff;
	margin-top: 16px;
	font-size: 1rem;
	padding: 0px;
	transition: var(--default-transition);
}

.fluentform .ff-el-form-control {
	background: var(--contrast-1-color);
	transition: var(--default-transition);
}

/* ======================  START  ================   GP SITE HEADER   ========  START ======================== */

/* Sticky Header */
.site-header {
  background-color: var(--body-bg-color);
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 100;
  transition: var(--default-transition);
}


/* Site Header Grid Container (Inner Container) */

.site-header .grid-container {
	max-width: 99vw;
	/*border: 1px solid red;*/
}

.full-width-content .container.grid-container {
	max-width: 95vw;
	/*padding: 1rem 3rem 1rem 3rem;*/
	margin:0px auto 0px auto;
	/*border: 1px solid red!important;*/
}

/* Content Title */
.entry-title {
	color: var(--text-light-color);
	padding-left: 0.3em;
	font-size: var(--fs-content-title);
	position: relative;
	font-weight: 900;
	letter-spacing: 0.5rem;
	text-transform: uppercase;
	transition: var(--default-transition);
}

.entry-title::before {
	content: '';
	display: block;
	width: 0.09em;
	/*height: 0.09em;*/
	height: 1.1em;
	background-color: var(--brand-color);
	border-radius: var(--radius-m);
	position: absolute;
	top: 0;
	left: 0;
	transition: var(--default-transition);
}

@media screen and (max-width:500px) {
	.entry-title {
		padding-left: 0;
		/*letter-spacing: 0.1rem;*/
	}
	.entry-title::before {
		display: none;
	}
}

/* Navigation items */

.main-navigation .main-nav>ul a {
	font-family: var(--nav-font);
	font-size: var(--fs-nav);
	color: var(--primary-color);
	transition: var(--default-transition);
	/*letter-spacing: 0.15rem;*/
	position: relative;
}


.main-navigation .main-nav>ul a:hover {
	color: var(--primary-alt-color);
}



.main-navigation .main-nav>ul a::before {
	content: '';
	display: block;
	height: 0.5rem;
	background-color: var(--brand-color);
	border-radius: var(--radius-m);
	/*background-color: var(--logo-tagline-color);*/
	position: absolute;
	top: -0.1rem;
	left: 0;
	right: 0;
	transform: scale(0,1);
	transform-origin: left;
	transition: var(--default-transition);
}

.main-navigation .main-nav>ul a:hover::before {
	transform: scale(1,1);
}

/* Highlighting Active Navigation menu item with active class to show which page the user is currently at.*/
/* Javascipt loaded via Elements Hook */

.main-navigation .main-nav>ul a:is(:link, :active, :visited).active-nav-menu-item::before {
	content: '';
	display: block;
	height: 0.5rem;
	background-color: var(--brand-color);
	border-radius: var(--radius-m);
	/*background-color: var(--logo-tagline-color);*/
	position: absolute;
	top: -0.1rem;
	left: 0;
	right: 0;
	transform: scale(1,1);
	transform-origin: left;
	transition: var(--default-transition);
}


/* Avoid highlighting navigation menu items in mobile mode during hover or throught javascript active mode. Desktop navigation breaks into mobile at 1150px. Refer GP theme customizer. */
@media screen and (max-width:1150px) {
	.main-navigation .main-nav>ul a::before {
		display: none;
	}
	.main-navigation .main-nav>ul a:is(:link, :active, :visited).active-nav-menu-item::before {
		display: none;
	}
}



/* Start Your Project Button */

.start-your-project {
	font-family: var(--button-font);
	font-size: var(--fs-button);
	font-weight: normal;
	transform: uppercase;
	letter-spacing: 0.3em;
	column-gap: 1em;
	background-color: var(--button-bg-primary-color);
	color: var(--button-text-primary-color);
	transition: var(--default-transition);
	cursor: pointer;
	padding: 1rem 3rem 1rem 3rem;
	border-radius: var(--radius-xxl);
	margin-left: auto;
	margin-right: auto;
	/*margin-top: 1rem;*/
}

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

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


/* Start Your Project Large Button Custom Style to be used on different pages */
/*.start-your-project-large {
	letter-spacing: 0.35em;
}
*/

/* Responsive Start Your Project Button */
@media screen and (max-width:1600px){
	.main-navigation .main-nav>ul a {
		padding: 0 15px!important;
	}
	.start-your-project {
		letter-spacing: 0.25em; 
		column-gap:0.5em;
		padding: 1rem 2rem 1rem 2rem;
	}
}

@media screen and (max-width:1500px){
	.main-navigation .main-nav>ul a {
		padding: 0 10px!important;
	}
	.start-your-project {
		letter-spacing: 0.25em; 
		column-gap:0.5em;
		padding: 1rem 2rem 1rem 2rem;
	}
}

@media screen and (max-width:1400px){
	.main-navigation .main-nav>ul a {
		padding: 0 7px!important;
	}
	.start-your-project {
		letter-spacing: 0.25em; 
		column-gap:0.5em;
		padding: 1rem 2rem 1rem 2rem;
	}
}

@media screen and (max-width:1400px){
	.main-navigation .main-nav>ul a {
		padding: 0 7px!important;
	}
	.start-your-project {
		letter-spacing: 0.25em; 
		column-gap:0.5em;
		padding: 1rem 1rem 1rem 1rem;
	}
}

@media screen and (max-width:1300px){
	.main-navigation .main-nav>ul a {
		padding: 0 7px!important;
	}
	.start-your-project {
		letter-spacing: 0.25em; 
		column-gap:0.5em;
		padding: 1rem 1rem 1rem 1rem;
	}
}

@media screen and (max-width:1200px){
	.main-navigation .main-nav>ul a {
		padding: 0 7px!important;
	}
	.start-your-project {
		letter-spacing: 0.15em; 
		column-gap:0.2em;
		padding: 1rem 0.7rem 1rem 0.7rem;
	}
}

@media screen and (max-width:1150px){ /* After breaking into mobile navigation. */
	.main-navigation .main-nav>ul a { /* Padding for the navigation menu items in mobile view.*/
		padding: 20px 50px!important;
		/*padding-bottom: 20px!important;*/
	}
	.site-header .grid-container {
		max-width: 100vw;
	}
	div.inside-header.grid-container {
		padding: 30px 5px 30px 5px!important;
	}
	.start-your-project {
		letter-spacing: 0.25em; 
		column-gap:0.2em;
		padding: 1rem 1.3rem 1rem 1.3rem;
	}
}

@media screen and (max-width:600px){ 
	
	.start-your-project {
		letter-spacing: 0.13em; 
		padding: 1rem 1.3rem 1rem 1.3rem;
	}
	/*.gb-icon {
		display: none;
	}*/
}

@media screen and (max-width:500px){ 
	
	.start-your-project {
		letter-spacing: 0.05em; 
		padding: 1rem 1rem 1rem 1rem;
	}
	.gb-icon {
		display: none;
	}
}

@media screen and (max-width:450px){ 
	
	.start-your-project {
		letter-spacing: 0.05em; 
		padding: 1rem 1rem 1rem 1rem;
	}
	.gb-icon {
		display: none;
	}
}


/* My Logo */

.my-logo svg {
	fill: var(--brand-color);
	transition: var(--default-transition);
}

/* Social Buttons */

.social-buttons {
	font-size: var(--fs-social-icons);
	color: var(--text-color);
	padding: 0.7rem;
	border: 3px solid var(--contrast-2-color);
	border-radius: var(--radius-m);
	transition: var(--default-transition);
}

.social-buttons:hover {
	border: 3px solid var(--brand-color);
	color:var(--brand-color);
}

@media screen and (max-width:500px) {
	.social-buttons {
		display: none!important;
	}
}


/* Hamburger bars for the mobile menu */
.menu-toggle .icon-menu-bars {
	color: var(--text-color);
	transition: var(--default-transition);
}

/* Slideout navigation panel for mobile menu */
.main-navigation.slideout-navigation {
	background-color: var(--contrast-2-color);
	transition: var(--default-transition);
}

.main-navigation.slideout-navigation a {
	margin-top: 1rem;
}





/* ======================  END  ================   GP SITE HEADER   ========  END ======================== */




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

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


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


/*==================== PORTFOLIO PAGE (HOME PAGE) ==========================*/


/* Bars before paragraph container style */
.bar-paragraph-container::before {
	content: '';
	display: block;
	width: 0.5em;
	/*height: 0.09em;*/
	height: 17em;
	background-color: var(--brand-color);
	border-radius: var(--radius-m);
	position: absolute;
	top: 0;
	left: 0;
	transition: var(--default-transition);
}



/* Portfolio Page SVG */

.portfolio-svg-container {
	position: absolute;
	top: 9em;
	right: 15em;
	/*width: 100%;*/
	/*border: 1px solid red;*/
}
.portfolio-svg-container svg {
	fill: var(--text-color);
	/*width: 25em;*/
	width: var(--fs-portfolio-svg);
	/*height: 75em;*/
	aspect-ratio: 1:4;
	transition: var(--default-transition);
}

@media screen and (max-width:700px){
	.portfolio-svg-container svg {
		opacity: 0.3;
	}
	.bar-paragraph-container::before {
		display: none;
	}
}

@media screen and (max-width:500px){
	.portfolio-svg-container svg {
		opacity: 0.15;
	}
}


/*====== Portfolio / Illustrator / Graphic Design / Brandin Page CSS-Grid Portfolio Gallery for NEW / COOL / HOT DESIGN TRENDS ======*/

/* Wrapper or Master or Parent container for all the grid child items */
.portfolio-gallery-container-wrapper {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	grid-auto-rows: 100px 300px;
	grid-gap: 10px;
	text-align: center;
	grid-auto-flow:dense; /* fills any left-over holes in the grid by shrink wrapping */
}

/*Grid Item element holding image and text */
.portfolio-gallery-item {
	width: 100%;
	height: 100%;
	position: relative;
}

/*Targetting the image Div */
.portfolio-gallery-item .portfolio-gallery-image {
	width: 100%;
	height: 100%;
	/*width: 100%;
	height: 100%;*/
	/*aspect-ratio: 16 / 9;*/
	overflow: hidden;
}

/*Targetting the image */
.portfolio-gallery-item .portfolio-gallery-image img {
	width: 1920px;
	height: 1080px;
	/*aspect-ratio: 16 / 9;*/
	/*object-fit: cover;
	object-position: center center;*/
	cursor:pointer;
	transition: var(--default-transition);
}

/*Targetting the image hover */
.portfolio-gallery-item:hover .portfolio-gallery-image img {
	transform: scale(1.5);
}

/*Targetting the text Div */
.portfolio-gallery-item .portfolio-gallery-text {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: var(--text-color);
	font-size: var(--fs-headline-h5);
	pointer-events: none;
	z-index: 4;
	transition: var(--default-transition);
	backdrop-filter: blur(5px) saturate(1.8);
	-webkit-backdrop-filter: blur(5px) saturate(1.8);
}

/*Targetting the text hover */
.portfolio-gallery-item:hover .portfolio-gallery-text {
	opacity: 1;
	animation: move-down 0.3s linear;
	background-color: var(--overlay-color);
	padding: 1em;
	width: 100%;
	/*height: 50%;*/
}

/*Animation for text hover*/
@keyframes move-down{

    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}


/*Setting Width (span) to grid items */

/* The grid item with this class should span 1 column */
.w-1{
    grid-column: span 1;
}

/* The grid item with this class should span 2 columns */
.w-2{
    grid-column: span 2;
}

/* The grid item with this class should span 3 columns */
.w-3{
    grid-column: span 3;
}

/* The grid item with this class should span 4 columns */
.w-4{
    grid-column: span 4;
}

/* The grid item with this class should span 5 columns */
.w-5{
    grid-column: span 5;
}

/* The grid item with this class should span 6 columns */
.w-6{
    grid-column: span 6;
}


/*Setting height (span) to grid items */

/* The grid item with this class should span 1 row */
.h-1{
    grid-row: span 1;
}

/* The grid item with this class should span 2 rows */
.h-2{
    grid-row: span 2;
}

/* The grid item with this class should span 3 rows */
.h-3{
    grid-row: span 3;
}

/* The grid item with this class should span 4 rows */
.h-4{
    grid-row: span 4;
}

/* The grid item with this class should span 5 rows */
.h-5{
    grid-row: span 5;
}

/* The grid item with this class should span 6 rows */
.h-6{
    grid-row: span 6;
}



/*==================== PORTFOLIO PAGE (HOME PAGE) RESPONSIVE ==========================*/

@media screen and (max-width:500px){
    .portfolio-gallery-container-wrapper{
        grid-template-columns: repeat(1,1fr);
    }
    .w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
        grid-column:span 1;
    }
}

/*====================PORTFOLIO POST====================================================*/

.portfolio-post-template-inner-container img {
	border-radius: var(--radius-m);
	box-shadow: 8px 10px 5px #0003;
}

.portfolio-post-template-grid-container {
	max-width: 1800px;
	margin: 0 auto 0 auto;
	padding: 5em;
	border: 1px solid var(--contrast-2-color);
	border-radius: var(--radius-m);
	transition: var(--default-transition);	
}

/* Custom highlight for Headline H3 */
.portfolio-post-template-grid-container h3 {
	position: relative;
	display: inline-block;
	margin-bottom: 1em;
}

.portfolio-post-template-grid-container h3::after {
	content: '';
	display: block;
	height: 0.5rem;
	background-color: var(--brand-color);
	border-radius: var(--radius-m);
	/*background-color: var(--logo-tagline-color);*/
	position: absolute;
	top: 3.7rem;
	left: 0;
	right: 0;
	transform: scale(1,1);
	/*transform-origin: left;*/
	transition: var(--default-transition);
}

/*.portfolio-post-template-grid-container h3::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	background: linear-gradient(to bottom, #0000 70%, var(--brand-color) 30%);
	z-index: -1;
}*/


.portfolio-post-template-grid.grid2, .portfolio-post-template-grid.grid3, .portfolio-post-template-grid.grid4, .portfolio-post-template-grid.grid5 {
	margin-top:5em;
}


/* ===========Portfolio Variations Outer Container - container=========== */

/* Variations Container */
.variations-container {
	position: relative;
}

/* Image Container*/
.variations-container .image-container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	padding: 10px;
	cursor: pointer;
	transition: var(--default-transition);
}

/* Variation Images */
.variations-container .image-container .image {
	/*height: 250px;
	width: 350px;*/
	overflow: hidden;
	cursor: pointer;
}

/* Each Variation Image */
.variations-container .image-container .image img {
	/*height: 100%;
	width: 100%;*/
	height: 250px;
	width: 350px;
	object-fit: cover;
	transition: var(--default-transition);
}


/* Targetting each portfolio variations image hover state */
.variations-container .image-container .image:hover img {
	transform: scale(1.1);
}

/* Image Popup container */
.variations-container .popup-image {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.9);
	height: 100%;
	width: 100%;
	z-index: 100;
	display: none;
}

/* Showing the close buttton (X) for the image popup */
.variations-container .popup-image span {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 60px;
	font-weight: bolder;
	color: #fff;
	cursor: pointer;
	z-index: 100;
}

/* Targetting the pop up image */
.variations-container .popup-image img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 5px solid #fff;
	border-radius: var(--radius-m);
	/*width: 1280px;*/
	width: 50%;
	object-fit: cover;
}

/* Making pop up image responsive */
@media screen and (max-width:768px) {
	.variations-container .popup-image img {
		width: 95%;
	}
}



/* Grid Responsive */
@media screen and (max-width:1300px) {
	.portfolio-post-template-grid-container {
		padding: 2em;
	}
	.gb-grid-wrapper > .gb-grid-column-e7f20358 { /*Arranging the image container for mobile view*/
    width: 100%!important;
    }
	.gb-grid-wrapper > .gb-grid-column-cb78d662 { /*Arranging the text container for mobile view*/
    width: 100%!important;
    order: 1;
   }
	.gb-grid-wrapper > .gb-grid-column-72677c45 {
    width: 100%!important;
	}
	.gb-grid-wrapper > .gb-grid-column-04d6f169 {
    width: 100%!important;
	}
	.gb-grid-wrapper > .gb-grid-column-de33ef0a {
   width: 100%!important;
    order: 1;
	}
	.gb-grid-wrapper > .gb-grid-column-686cc625 {
    width: 100%!important;
	}
	.gb-grid-wrapper > .gb-grid-column-73307524 {
    width: 100%!important;
	}
	.gb-grid-wrapper > .gb-grid-column-7992a892 {
    width: 100%!important;
	}
	.gb-grid-wrapper > .gb-grid-column-bec0e1e4 {
    width: 100%!important;
    order: 1;
	}
	.gb-grid-wrapper > .gb-grid-column-7ca4b30a {
    width: 100%!important;
	}
}


/*==================== ILLUSTRATION PAGE  ==========================*/


/*====== Simple Portfolio Gallery for ILLUSTRATION, GRAPHIC DESIGN AND BRANDING PAGES ======*/

/* Setting the main container as Relative for text animation */
.gallery-item {
	width: 100%;
	height: 100%;
	position: relative;
}

/*Targetting the image Div */

.gallery-item .gallery-image {
	width: 100%;
	height: 100%;
	/*width: 100%;
	height: 100%;*/
	/*aspect-ratio: 16 / 9;*/
	overflow: hidden;
}

/*Targetting the image */

.gallery-item .gallery-image img {
	/*width: 1920px;*/
	/*height: 720px;*/
	/*aspect-ratio: 16 / 9;*/
	/*object-fit: cover;
	object-position: center center;*/
	cursor:pointer;
	transition: var(--default-transition);
}

/*Targetting the image hover */

.gallery-item:hover .gallery-image img {
	transform: scale(1.5);
}

/*Targetting the text Div */
.gallery-item .gallery-text {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: var(--text-color);
	font-size: var(--fs-headline-h5);
	pointer-events: none;
	z-index: 4;
	transition: var(--default-transition);
	backdrop-filter: blur(5px) saturate(1.8);
	-webkit-backdrop-filter: blur(5px) saturate(1.8);
}

/*Targetting the text hover */
.gallery-item:hover .gallery-text {
	opacity: 1;
	animation: move-down 0.3s linear;
	background-color: var(--overlay-color);
	padding: 1em;
	width: 100%;
	/*height: 50%;*/
}

/*Animation for text hover*/
@keyframes move-down{

    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}

/* Removing Text Decoration from Text */
.gallery-item .gallery-text a {
	text-decoration: none;
}


/*-------------- SERVICES Container & MY CLIENTS SAY Containers for ILLUSTRATION, GRAPHIC DESIGN AND BRANDING PAGES ----------------------------*/
.services-container {
  box-shadow: 8px 10px 5px #0003;
  background-color: var(--contrast-4-color);
  border-radius: var(--radius-m);
  padding: 3em;
  color: var(--text-color);
  transition: var(--default-transition);
}

.services-container svg {
	width: 150px;
	height: 100%;
	fill: var(--text-color);
}

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

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


/*------------------ HIDE - SHOW SERVICES & MY CLIENTS SAY Containers for ILLUSTRATION, GRAPHIC DESIGN AND BRANDING PAGES--------------- */

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

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

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

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

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



/*==================== ILLUSTRATION / GRAPHIC DESIGN / BRANDING PAGE RESPONSIVE ==========================*/

@media screen and (max-width:2300px){
	.gb-grid-column-e75d5ca9 {
		width: 100%!important;
	}
	.gb-grid-wrapper > .gb-grid-column-7d44d5d8 {
    width: 100%!important;
	margin-left: auto;
	margin-right: auto;
   }
	.gb-container-7d44d5d8 {
		margin-left: auto;
		margin-right: auto;
	}
}

/*
@media screen and (max-width:2100px){
    
}

@media screen and (max-width:1600px){
    
}
*/
@media screen and (max-width:1100px){
   
	/* Services Containers */
	.gb-grid-wrapper > .gb-grid-column-8f260b35 {
    width: 100%!important;
    }
	.gb-grid-wrapper > .gb-grid-column-418d65ab {
    width: 100%!important;
    }
	.gb-grid-wrapper > .gb-grid-column-9690ddf4 {
    width: 100%!important;
    }
	.gb-grid-wrapper > .gb-grid-column-a0cdb6c1 {
    width: 100%!important;
    }
	.gb-grid-wrapper > .gb-grid-column-2b54f080 {
    width: 100%!important;
    }
	.gb-grid-wrapper > .gb-grid-column-ff524784 {
    width: 100%!important;
   }
	
	/* My Clients Say Containers */
	.gb-grid-wrapper > .gb-grid-column-8923da34 {
    width: 100%!important;
   }
	.gb-grid-wrapper > .gb-grid-column-8075ac35 {
    width: 100%!important;
   }
	.gb-grid-wrapper > .gb-grid-column-76aac103 {
    width: 100%!important;
   }
	.gb-grid-wrapper > .gb-grid-column-61d68b39 {
    width: 100%!important;
   }
	.gb-grid-wrapper > .gb-grid-column-619664f6 {
    width: 100%!important;
  }
	.gb-grid-wrapper > .gb-grid-column-943d53df {
    width: 100%!important;
  }
}

@media screen and (max-width:600px){
    .hide-services-containers-from-left, /* Removing translation removes overflow in mobile view. */
	.hide-services-containers-from-right {
	transform: translateX(0px);
   }
}


/*===================== MY APPROACH PAGE =================================================*/

/* Project Process Flow Chart */

.startpagewrapper {
	/*max-width: 1300px;
	margin: 50px auto;*/
	margin-top: 5em;
	padding: 0 20px;
	position: relative;
}

.startpagewrapper .center-line {
	position: absolute;
	height: 100%;
	width: 4px;
	background-color: var(--contrast-2-color);
	left: 50%;
	top: 20px;
	transform: translateX(-50%);
	transition: var(--default-transition);
}

.startpagewrapper .row {
	display: flex;
	
} 

.startpagewrapper .row-1 {
	justify-content: flex-start;
} 

.startpagewrapper .row-2 {
	justify-content: flex-end;
} 

.startpagewrapper .row section {
	background-color: var(--contrast-4-color);
	/*border: 1px solid var(--contrast-2-color);*/
	border-radius: 5px;
	width: calc(50% - 40px);
	padding: 20px;
	position: relative;
	transition: var(--default-transition);
}

.startpagewrapper .row section::before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	background: var(--contrast-4-color);
	/*border: 1px solid var(--brand-color);*/
	/*border-top: 1px solid var(--contrast-2-color);
	border-right: 1px solid var(--contrast-2-color);*/
	top: 28px;
	/*z-index: -1;*/
	transform: rotate(45deg);
	transition: var(--default-transition);
}


.row-1 section::before {
	right: -7px;
}

.row-2 section::before {
	left: -7px;
}


.row section .fa-icon,
.center-line .scroll-icon {
	position: absolute;
	background-color: var(--contrast-2-color);
	/*background: var(--global-color-10);*/
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	/*color: #ff7979;*/
	color: var(--contrast-4-color);
	font-size: 17px;
	box-shadow: 0 0 0 4px var(--contrast-2-color), inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 4px rgba(0,0,0,0.05);
	transition: var(--default-transition);
}

.center-line .scroll-icon {
	bottom: 0px;
	left: 50%;
	font-size: 25px;
	transform: translateX(-50%);
}


.row-1 section .fa-icon {
	top: 13px;
	right: -60px;
}

.row-2 section .fa-icon {
	top: 13px;
	left: -60px;
}

.row section .details,
.row section .bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.row section .details .title {
	font-size: 1.8rem;
	font-weight: normal;
	font-family: var(--headline-font);
	color: var(--h2-color);
	/*color: var(--brand-color);*/
	letter-spacing: 0.03em;
	transition: var(--default-transition);
}

/* Custom highlight for Headline Title */
.row section .details .title {
	position: relative;
	display: inline-block;
	margin-bottom: 0.9em;
}

.row section .details .title::after {
	content: '';
	display: block;
	height: 0.5rem;
	background-color: var(--brand-color);
	border-radius: var(--radius-m);
	/*background-color: var(--logo-tagline-color);*/
	position: absolute;
	top: 3rem;
	left: 0;
	right: 0;
	transform: scale(1,1);
	/*transform-origin: left;*/
	transition: var(--default-transition);
}


.row section p {
	margin: 10px 0 0 0;
}


@media(max-width: 768px) {
	.startpagewrapper .center-line {
		left: 30px;
	}
	.startpagewrapper .row {
		margin: 30px 0 3px 60px;
	}
	.startpagewrapper .row section {
		width: 100%;
	}
	.row-1 section::before {
		left: -7px;
	}
	.row-1 section .fa-icon {
		left: -70px;
	}
	.row-2 section .fa-icon {
		left: -70px;
	}
}

@media(max-width: 440px) {
	.startpagewrapper .center-line,
	.row section::before,
	.row section .fa-icon {
		display: none;
	}
	.startpagewrapper .row {
		margin: 10px 0;
	}
}


/*-----------------FAQ General Style -----------------------------*/

/* Block: Loop Template: FAQs Accordion*/

.accordion_container {
  box-shadow: 8px 10px 5px #0003;
  max-width: 1000px;
  background-color: var(--contrast-4-color);
  border-radius: var(--radius-m);
  padding: 10px;
  margin: auto auto;
  color: var(--text-color);
  transition: var(--default-transition);
}

.accordion_container .content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion_item {
  border-radius: var(--radius-m);
}

.accordion_item:hover {
  opacity: 0.9;
}

.accordion_header {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

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

.active {
  padding-bottom: 10px;
}

.accordion_container span, .accordion_container .icon {
  font-weight: 600;
}

.accordion_container p {
  text-align: justify;
  /*display: flex;*/
  position: relative;
  padding: 1em;
}

.accordion_container p::before {
	content: '';
	display: block;
	width: 0.55em;
	/*height: 0.09em;*/
	height: auto;
	background-color: var(--brand-color);
	border-radius: var(--radius-m);
	position: absolute;
	top: 0;
	bottom:0;
	left: -1px;
	transition: var(--default-transition);
}



/*=====================MY PROFILE PAGE - ABOUT =========================================*/

.my-profile-image-container {
	position: relative;
	height: 900px;
	border-radius: var(--radius-m);
}

.my-profile-image-socials-container {
	max-width: 600px;
	padding: 3em;
	border: var(--radius-m);
	position: absolute;
	top: 0;
	bottom: 0;
	left:0;
	background-color: rgba(0,0,0,0.5);
}

.my-profile-image-text-container {
	max-width: 600px;
	padding: 3em;
	border: var(--radius-m);
	position: absolute;
	top: 0;
	bottom: 0;
	right:0;
	background-color: rgba(0,0,0,0.5);
}

.my-profile-image-text-container h2 {
	letter-spacing: 0.1em;
	line-height: 2em;
	color: #ffffff;
}


/*===================== MY PROFILE PAGE BLOG & BLOG PAGE  ===============================*/


/* Read More Link */
a.read-more {
	color: var(--brand-alt-color);
	transition: var(--default-transition);
}

a.read-more:hover {
	color: var(--logo-color);
}

/* Pagination Style */
.pagination-style {
	font-family: var(--body-font);
	font-size: var(--fs-pagination);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: var(--logo-color);
	transition: var(--default-transition);	
}


.pagination-style:hover {
	color: var(--category-button-text-primary-color);
}


.pagination-tilde-before::before {
	content: "|";
	margin-right: 0.6em;
	color: var(--brand-color);
	font-size: var(--fs-pagination-tilde);
	line-height: 0.5;
}

.pagination-tilde-after::after {
	content: "|";
	margin-left: 0.6em;
	color: var(--brand-color);
	font-size: var(--fs-pagination-tilde);
	line-height: 0.5;  
}





/*==================== BLOG POST ==========================*/


/*==================== Blog post Excerpt ==========================*/

.mellow-mage-says-svg {  /*Flying Dove SVG*/
	width: 2rem;
	height: auto;
	fill: var(--brand-color);
	transition: var(--default-transition);
}

.mellow-mage-says { /* Excerpt Container */
	background-color: var(--body-bg-color);
	padding: 32px;
	border-radius: var(--radius-m);
	border: 1px solid var(--contrast-2-color);
	transition: var(--default-transition);
}

.mellow-mage-says p { /* Excerpt Paragraph */
	text-align: center;
	font-family: var(--logo-font);
	font-weight: 600;
	font-size: var(--text-x);
	font-style: italic;
	transition: var(--default-transition);
}


/*====== Blog Post Portfolio Gallery ======*/

/* Setting the main container as Relative for text animation */
.gallery-item {
	width: 100%;
	height: 100%;
	position: relative;
}

/*Targetting the image Div */
.gallery-item .gallery-image.blogpost-portfolio {
	width: 100%;
	height: 100%;
	/*width: 100%;
	height: 100%;*/
	/*aspect-ratio: 16 / 9;*/
	overflow: hidden;
}

/*Targetting the image */
.gallery-item .gallery-image.blogpost-portfolio img {
	/*width: 1920px;*/
	height: 150px;
	/*aspect-ratio: 16 / 9;*/
	object-fit: cover;
	object-position: center center;
	cursor:pointer;
	transition: var(--default-transition);
}

/*Targetting the image hover */
.gallery-item .gallery-image.blogpost-portfolio img {
	transform: scale(1.5);
}

/*Targetting the text Div */
.gallery-item .gallery-text {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: var(--text-color);
	font-size: var(--fs-headline-h5);
	pointer-events: none;
	z-index: 4;
	transition: var(--default-transition);
	backdrop-filter: blur(5px) saturate(1.8);
	-webkit-backdrop-filter: blur(5px) saturate(1.8);
}

/*Targetting the text hover */
.gallery-item:hover .gallery-text {
	opacity: 1;
	animation: move-down 0.3s linear;
	background-color: var(--overlay-color);
	padding: 1em;
	width: 100%;
	/*height: 50%;*/
}

/*Animation for text hover*/
@keyframes move-down{

    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}

/* Removing Text Decoration from Text */
.gallery-item .gallery-text a {
	text-decoration: none;
}




/*==================== Global style for all the contents in a Blog post (includes images and block quotes within a post) ==========================*/

.blog-post-content-container: is(h2, h3, h4, h5, h6) {
	margin-top: 1.5rem;
}

.blog-post-content-container img {
	border: 2px solid var(--contrast-1-color);
	border-radius: var(--radius-m);
	box-shadow: 10px 10px 20px 0px #00000020;
	transition: var(--default-transition);
	
}

.blog-post-content-container figcaption {
	font-size: var(--text-xs);
	margin-top: 8px;
	text-align: center;
	font-style: italic;
}

.blog-post-content-container blockquote {
	background-color: var(--body-bg-color);
	padding: 32px;
	border-radius: var(--radius-m);
	border: 1px solid var(--contrast-2-color);
	transition: var(--default-transition);
}


/*==================== Blog Post Author Box ==========================*/

.blog-post-author-box {
	max-width: 65ch;
	margin:0 auto 0 auto;
	padding: 2.5em 2.5em 1.5em 2.5em;
	background-color: var(--body-bg-color);
	border-radius: var(--radius-m);
	transition: var(--default-transition);
}

/*==================== Blog Post Comments Section ==========================*/

.comments-area {
	max-width: 800px;
	margin: 0 auto 0 20vw;
}

.comments-title {
	font-size: var(--fs-headline-h5);
}

.comments-title::before {
	content: "|";
	margin-right: 0.3em;
	color: var(--brand-color);
	font-size: var(--fs-headline-h5); 
}

.comments-title::after {
	content: "|";
	margin-left: 0.3em;
	color: var(--brand-color);
	font-size: var(--fs-headline-h5); 
}

.comment-form textarea {
	font-family: inherit;
	resize: none; /* Prevents text area from resized */
	transition: var(--default-transition);
}

.comment-form input[type=text] {
	font-family: inherit;
	transition: var(--default-transition);
}

.comment-form .submit {
	font-family: var(--button-font);
	font-size: var(--fs-button);
	font-weight: 500;
	padding: 1rem 3rem 1rem 3rem;
	margin:0;
	border-radius: var(--radius-xxl);
	background-color: var(--button-bg-primary-color);
	color: var(--button-text-primary-color);
	transition: var(--default-transition);
	cursor: pointer;
}

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

/*==================== Blog Post Comments Section RESPONSIVE ==========================*/

@media screen and (max-width:2500px){
    .comments-area {
	margin: 0 auto 0 15vw;
    }
	.portfolio-svg-container {right: 11em;}
}

@media screen and (max-width:2100px){
    .comments-area {
	margin: 0 35vw 0 auto;
    }
	.portfolio-svg-container {right: 7em;}
}

@media screen and (max-width:1600px){
    .comments-area {
	margin: 0 30vw 0 auto;
    }
	.portfolio-svg-container {right: 1em;}
}

@media screen and (max-width:500px){
    .comments-area {
	margin: 0 auto 0 auto;
    }
	.portfolio-svg-container {right: 0;}
}


/*==================== CONTACT PAGE --- Contact Form ==========================*/

.contact-form-wrapper {
	max-width: 800px;
	margin: 0 auto 0 auto;
	padding: 3em;
	border: 1px solid var(--contrast-2-color);
	border-radius: var(--radius-m);
	transition: var(--default-transition);
}


/*====================START YOUR PROJECT PAGE=======================================*/

.start-your-project-title {
	color: var(--text-light-color);
	/*padding-left: 0.3em;*/
	font-size: var(--fs-content-title);
	/*position: relative;*/
	font-weight: 900;
	letter-spacing: 0.5rem;
	text-transform: uppercase;
	transition: var(--default-transition);
}


/*==================== FOOTER ==========================*/

/* Footer Container SVG */
.footer-container svg {
	width: 210px;
	height: auto;
}

/* Footer Links Container Headline H2 */
/* Custom highlight for Headline Title */

.footer-links-container h2 {
	position: relative;
	display: inline-block;
	margin-bottom: 1.5em;
}


.footer-links-container h2::after {
	content: '';
	display: block;
	height: 0.5rem;
	background-color: var(--brand-color);
	border-radius: var(--radius-m);
	/*background-color: var(--logo-tagline-color);*/
	position: absolute;
	top: 2.5rem;
	left: 0;
	right: 0;
	transform: scale(1,1);
	/*transform-origin: left;*/
	transition: var(--default-transition);
}

/* Footer Links Container SVG */
.footer-links-container svg {
	width: 100px;
	height: auto;
}

/* Footer Links Container links text */

.footer-links-container {
	color: var(--text-color);
	transition: var(--default-transition);
}

/* Copyright */

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









/*==================== Text Wrap Around Image ==========================*/


.text-wrap-around-image {
	max-width: 800px;
	margin: 0 auto 5rem auto;
	padding: 3rem;
	display: flow-root; /* Keeps the conatiner independent of the text and covers the whole image. */
	border: 1px solid var(--contrast-2-color);
	background-color: var(--contrast-4-color);
	transition: var(--default-transition);
}

.text-wrap-around-image h2 {
	margin-bottom: 3rem;
}

.text-wrap-around-image img {
	width: 300px;
	height: auto;
	margin-right: 20px;
	margin-bottom: 10px;
	display: block;
	float: left;
}



/*This is for the text-hover effect -----  CLASHES WITH FAQ ACCORDIAN STYLE---*/
/*
.wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.image {
	width: 500px;
	position: relative;
}

img {
	width: 100%;
	display: block;
	margin: auto;
}

.content {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background: rgba(135, 137, 192, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	transition: 0.6s;
}

.content:hover {
	opacity: 1;
}

.content h1 {
	font-size: 45px;
	color: #ffe100;
	margin-bottom: 15px;
}

.content p {
	font-size: 19px;
	color: #fff;
}

.content > * {
	transform:translateY(200px);
	transition: transform 0.6s;
}

.content:hover > * {
	transform:translateY(0px);
}



.image-container {
	position: absolute;
	top: 0;
	right:0;
	width: 35vw;
	height: auto;
	z-index: -1;
}
*/