/*
 Theme Name:   Holler Astra Child Theme
 Theme URI:    https://www.HollerDigital.com
 Description:  Theme settings, styling, and functionality for custom WordPress theme built by Holler Digital.
 Author:       Holler Digital
 Author URI:   https://www.HollerDigital.com
 Template:     astra
 Version:      2.0.10
 License:	   GPL-2.0+
 License URI:  http://www.gnu.org/licenses/gpl-2.0.txt
 Text Domain:  holler-astra 
*/

/*--------------------------------------------------------------
# INSTRUCTIONS:
# -------------
# This is the master stylesheet. This is where you control what
# other SASS files will be included in the final CSS file. 
#
# NOTE:
# The only exception are the files under /page/templates/
# which are standalone files that will be created as separeate
# CSS stylesheets and only loaded on the pages they pertain to.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Variables - Colors, Title Sizes, Fluid Spacing, Fluid
Section Paddings, Buttons;
--------------------------------------------------------------*/

/*--------------------------------------------------------------
* Mixin for applying Fuild Values to CSS properties like font-size or line-height
--------------------------------------------------------------*/

:root {
	--brand-1: var(--ast-global-color-0);
	--brand-2: var(--ast-global-color-1);
	--brand-3: var(--ast-global-color-2);
	--brand-4: var(--ast-global-color-4);
	--accent-1: var(--ast-global-color-5);
	--accent-2: var(--ast-global-color-6);
	--black: var(--ast-global-color-8);
	--white: var(--ast-global-color-7);
	--link-color: var(--accent-1);
	--link-hover-color: var(--accent-2);
	
	--font-heading-size-xxs: clamp(1.00rem, 0.99rem + 0.05vw, 1.03rem); /* Step 0: 20.00px → 22.00px */
	--font-heading-size-xs: clamp(1.13rem, 1.08rem + 0.22vw, 1.25rem); /* Step 1: 25.00px → 29.33px */
	--font-heading-size-sm: clamp(1.35rem, 1.24rem + 0.55vw, 1.67rem); /* Step 2: 31.25px → 39.09px */
	--font-heading-size-m: clamp(1.62rem, 1.41rem + 1.05vw, 2.22rem); /* Step 3: 39.06px → 52.11px */
	--font-heading-size-lg: clamp(1.94rem, 1.59rem + 1.77vw, 2.96rem); /* Step 4: 48.83px → 69.46px */
	--font-heading-size-xl: clamp(2.33rem, 1.77rem + 2.81vw, 3.95rem); /* Step 5: 44.79px → 61.04px */
	--font-heading-size-xxl: clamp(2.80rem, 1.94rem + 4.28vw, 5.26rem);

	--font-text-size-xs: clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem); /* Step 1: 19.20px → 22.50px */
	--font-text-size-sm: clamp(1.20rem, 1.13rem + 0.36vw, 1.41rem); /* Step 2: 23.04px → 28.13px */
	--font-text-size-mm: clamp(1.44rem, 1.33rem + 0.55vw, 1.76rem); /* Step 3: 27.65px → 35.16px */
	--font-text-size-lg: clamp(1.73rem, 1.56rem + 0.82vw, 2.20rem); /* Step 4: 33.18px → 43.95px */
	--font-text-size-xl: clamp(2.07rem, 1.84rem + 1.17vw, 2.75rem); /* Step 5: 39.81px → 54.93px */
	--font-text-size-xxl: clamp(2.49rem, 2.16rem + 1.64vw, 3.43rem);
	--title-size-d-lg: clamp(36px, calc( 36px  + (( 1vw - 4.85px) * 1.11498258 )), 52px);
	--title-size-d-sm: clamp(32px, calc( 32px  + (( 1vw - 4.85px) * 1.11498258 )), 48px);
	--title-size-1: clamp(36px, calc( 36px  + (( 1vw - 4.85px) * 0.27874564 )), 40px);
	--title-size-2: clamp(32px, calc( 32px  + (( 1vw - 4.85px) * 0.27874564 )), 36px);
	--title-size-3: clamp(28px, calc( 28px  + (( 1vw - 4.85px) * 0.27874564 )), 32px);
	--title-size-4: clamp(24px, calc( 24px  + (( 1vw - 4.85px) * 0.27874564 )), 28px);
	--title-size-5: clamp(20px, calc( 20px  + (( 1vw - 4.85px) * 0.27874564 )), 24px);
	--title-size-6: clamp(18px, calc( 18px  + (( 1vw - 4.85px) * 0.13937282 )), 20px);
	--body-1: clamp(16px, calc( 16px  + (( 1vw - 4.85px) * 0.13937282 )), 18px);
	--body-m: clamp(16px, calc( 16px  + (( 1vw - 4.85px) * 0.27874564 )), 20px);
	--body-l: clamp(18px, calc( 18px  + (( 1vw - 4.85px) * 0.41811847 )), 24px);
	--fl-spacing-xxl: clamp(40px, calc( 40px  + (( 1vw - 4.85px) * 3.34494774 )), 88px);
	--fl-spacing-xl: clamp(32px, calc( 32px  + (( 1vw - 4.85px) * 1.67247387 )), 56px);
	--fl-spacing-l: clamp(24px, calc( 24px  + (( 1vw - 4.85px) * 1.67247387 )), 48px);
	--fl-spacing-m: clamp(24px, calc( 24px  + (( 1vw - 4.85px) * 1.11498258 )), 40px);
	--fl-spacing-s: clamp(24px, calc( 24px  + (( 1vw - 4.85px) * 0.55749129 )), 32px);
	--fl-spacing-xs: clamp(16px, calc( 16px  + (( 1vw - 4.85px) * 0.55749129 )), 24px);
	--fl-spacing-xxs: clamp(8px, calc( 8px  + (( 1vw - 4.85px) * 0.55749129 )), 16px);
	--section-padding-xl: clamp(60px, calc( 60px  + (( 1vw - 4.85px) * 3.48432056 )), 110px);
	--section-padding-lg: clamp(50px, calc( 50px  + (( 1vw - 4.85px) * 2.43902439 )), 85px);
	--section-padding-md: clamp(40px, calc( 40px  + (( 1vw - 4.85px) * 1.39372822 )), 60px);
	--section-padding-sm: clamp(30px, calc( 30px  + (( 1vw - 4.85px) * 1.39372822 )), 50px);
	--button-text-size: clamp(16px, calc( 16px  + (( 1vw - 4.85px) * 0.13937282 )), 18px);
}

/*--------------------------------------------------------------
# Helpers
--------------------------------------------------------------*/

/*--------------------------------------------------------------
* Mixin for applying Fuild Values to CSS properties like font-size or line-height
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Media Query Responsive Breakpoint Variables
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Creates a media query with a min and max pixel range
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Creates a media query with a max pixel value
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Creates a media query with a min pixel value
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Typography Styles
--------------------------------------------------------------*/

.elementor-widget-heading {
	padding: 0;
	margin: 0;
	line-height: 1;
}

.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
	padding: 0;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.elementor-widget-heading h1.mt-0,
.elementor-widget-heading h2.mt-0,
.elementor-widget-heading h3.mt-0,
.elementor-widget-heading h4.mt-0,
.elementor-widget-heading h5.mt-0,
.elementor-widget-heading h6.mt-0 {
	margin-top: 0;
}

.elementor-widget-heading h1.mb-0,
.elementor-widget-heading h2.mb-0,
.elementor-widget-heading h3.mb-0,
.elementor-widget-heading h4.mb-0,
.elementor-widget-heading h5.mb-0,
.elementor-widget-heading h6.mb-0 {
	margin-bottom: 0;
}

.elementor-widget-heading h1.elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading h2.elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading h3.elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading h4.elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading h5.elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading h6.elementor-heading-title.elementor-size-xxl {
	font-size: var(--font-heading-size-xxl);
}

.elementor-widget-heading h1.elementor-heading-title.elementor-size-xl,
.elementor-widget-heading h2.elementor-heading-title.elementor-size-xl,
.elementor-widget-heading h3.elementor-heading-title.elementor-size-xl,
.elementor-widget-heading h4.elementor-heading-title.elementor-size-xl,
.elementor-widget-heading h5.elementor-heading-title.elementor-size-xl,
.elementor-widget-heading h6.elementor-heading-title.elementor-size-xl {
	font-size: var(--font-heading-size-xl);
}

.elementor-widget-heading h1.elementor-heading-title.elementor-size-large,
.elementor-widget-heading h2.elementor-heading-title.elementor-size-large,
.elementor-widget-heading h3.elementor-heading-title.elementor-size-large,
.elementor-widget-heading h4.elementor-heading-title.elementor-size-large,
.elementor-widget-heading h5.elementor-heading-title.elementor-size-large,
.elementor-widget-heading h6.elementor-heading-title.elementor-size-large {
	font-size: var(--font-heading-size-lg);
}

.elementor-widget-heading h1.elementor-heading-title.elementor-size-medium,
.elementor-widget-heading h2.elementor-heading-title.elementor-size-medium,
.elementor-widget-heading h3.elementor-heading-title.elementor-size-medium,
.elementor-widget-heading h4.elementor-heading-title.elementor-size-medium,
.elementor-widget-heading h5.elementor-heading-title.elementor-size-medium,
.elementor-widget-heading h6.elementor-heading-title.elementor-size-medium {
	font-size: var(--font-heading-size-m);
}

.elementor-widget-heading h1.elementor-heading-title.elementor-size-small,
.elementor-widget-heading h2.elementor-heading-title.elementor-size-small,
.elementor-widget-heading h3.elementor-heading-title.elementor-size-small,
.elementor-widget-heading h4.elementor-heading-title.elementor-size-small,
.elementor-widget-heading h5.elementor-heading-title.elementor-size-small,
.elementor-widget-heading h6.elementor-heading-title.elementor-size-small {
	font-size: var(--font-heading-size-sm);
}

.elementor-widget-heading h1.elementor-size-default {
	font-size: var(--font-heading-size-lg);
}

.elementor-widget-heading h2.elementor-size-default {
	font-size: var(--font-heading-size-m);
}

.elementor-widget-heading h3.elementor-size-default {
	font-size: var(--font-heading-size-sm);
}

.elementor-widget-heading h4.elementor-size-default {
	font-size: var(--font-heading-size-xs);
}

.elementor-widget-heading p.elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading div.elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading span.elementor-heading-title.elementor-size-xxl {
	font-size: var(--font-text-size-xxl);
}

.elementor-widget-heading p.elementor-heading-title.elementor-size-xl,
.elementor-widget-heading div.elementor-heading-title.elementor-size-xl,
.elementor-widget-heading span.elementor-heading-title.elementor-size-xl {
	font-size: var(--font-text-size-xl);
}

.elementor-widget-heading p.elementor-heading-title.elementor-size-large,
.elementor-widget-heading div.elementor-heading-title.elementor-size-large,
.elementor-widget-heading span.elementor-heading-title.elementor-size-large {
	font-size: var(--font-text-size-lg);
}

.elementor-widget-heading p.elementor-heading-title.elementor-size-medium,
.elementor-widget-heading div.elementor-heading-title.elementor-size-medium,
.elementor-widget-heading span.elementor-heading-title.elementor-size-medium {
	font-size: var(---font-text-size-mm);
}

.elementor-widget-heading p.elementor-heading-title.elementor-size-small,
.elementor-widget-heading div.elementor-heading-title.elementor-size-small,
.elementor-widget-heading span.elementor-heading-title.elementor-size-small {
	font-size: var(--font-text-size-sm);
}

.no-margin .elementor-heading-title {
	margin: 0px !important;
}

/* p,
.entry-content p {
	margin-top: 0.5px;
	margin-bottom: 0.5em;
} */

strong,
b {
	font-weight: 700;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/*--------------------------------------------------------------
 BASE BUTTON STYLES 
 --------------------------------------------------------------
 Used in other modules using the @extend rule to pull in styles
 and keep button styles consistent across all components.
--------------------------------------------------------------*/

.theme-button,
.ast-container .elementor-button.elementor-size-xs,
.ast-container .elementor-button.elementor-size-sm,
.ast-container .elementor-button.elementor-size-md,
.ast-container .elementor-button.elementor-size-lg,
.ast-container .elementor-button.elementor-size-xl {
	display: inline-block;
	line-height: 1;
	color: #fff;
	fill: #fff;
	text-align: center;
	font-weight: 700;
	border-radius: 8px;
	transition: all .3s;
	text-decoration: none;
}

.ast-container .elementor-button.elementor-size-xs {
	padding: 10px 20px 10px 20px;
	font-size: var(--font-heading-size-xxs);
	font-weight: 400;
	text-decoration: underline !important;
	color: var(--ast-global-color-0);
	fill: var(--ast-global-color-0);
	-webkit-text-decoration-color: var(--ast-global-color-0);
	text-decoration-color: var(--ast-global-color-0);
	background: none;
}

.ast-container .elementor-button.elementor-size-xs:hover {
	color: var(--ast-global-color-2);
	fill: var(--ast-global-color-2);
	background: none;
}

.ast-container .elementor-button.elementor-size-xs:active {
	color: var(--ast-global-color-2);
	fill: var(--ast-global-color-2);
	background: none;
}

.ast-container .elementor-button.elementor-size-sm {
	padding: 12px 24px 12px 24px;
	font-size: var(--font-heading-size-xxs);
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-5);
	background: var(--ast-global-color-0);
}

.ast-container .elementor-button.elementor-size-sm:hover {
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-2);
	background: var(--ast-global-color-2);
}

.ast-container .elementor-button.elementor-size-sm:active {
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-2);
	background: var(--ast-global-color-2);
}

.ast-container .elementor-button.elementor-size-md {
	padding: 20px 48px 20px 48px;
	font-size: var(--font-heading-size-xs);
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-5);
	background: var(--ast-global-color-0);
}

.ast-container .elementor-button.elementor-size-md:hover {
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-2);
	background: var(--ast-global-color-2);
}

.ast-container .elementor-button.elementor-size-md:active {
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-2);
	background: var(--ast-global-color-2);
}

.ast-container .elementor-button.elementor-size-lg {
	padding: 20px 48px 20px 48px;
	font-size: var(--font-heading-size-sm);
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-5);
	background: var(--ast-global-color-0);
}

.ast-container .elementor-button.elementor-size-lg:hover {
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-2);
	background: var(--ast-global-color-2);
}

.ast-container .elementor-button.elementor-size-lg:active {
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-2);
	background: var(--ast-global-color-2);
}

.ast-container .elementor-button.elementor-size-xl {
	padding: 20px 48px 20px 48px;
	font-size: var(--font-heading-size-m);
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-5);
	background: var(--ast-global-color-0);
}

.ast-container .elementor-button.elementor-size-xl:hover {
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-2);
	background: var(--ast-global-color-2);
}

.ast-container .elementor-button.elementor-size-xl:active {
	color: var(--ast-global-color-5);
	fill: var(--ast-global-color-2);
	background: var(--ast-global-color-2);
}

/*--------------------------------------------------------------
# Theme Elements
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Page Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Scope CSS - Applied accross entire site
--------------------------------------------------------------*/

html,
body {
	scroll-behavior: smooth;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-font-feature-settings: normal;
	font-feature-settings: normal;
	font-variation-settings: normal;
}
 
 

.instructor-highlight {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	width: 100%;
}
  .instructor-highlight-image {
	width: 15%
}

.instructor-highlight-title {
	padding: 6px 4px 4px 8px;
	font-size: 14px;
	font-weight: 700;
}