/*
Theme Name: Challenge Theme
Description: A custom child theme created by <a href="http://www.estlanddesign.com">Estland Design</a> in Harrisonburg.
Version: 1.0
Author: Estland
Author URI: https://estland.us
Template: enfold
*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--primary-text-color: #404041;
	--dark-teal: #107A78;
	--light-teal: #C4EFEF;
	--bright-green: #77BC5A;
	--light-blue: #edf7f8;
	--white: #fff;
	--font-normal: "Raleway";
	--font-attention: "Merriweather";
	--text-large: 1.25rem;
	--text-medium: 1rem;
	--text-small: .8125rem;
	--heading-large: 2.8125rem;
	--heading-medium: 2rem;
	--heading-small: 1.5rem; 
	--border-radius: 1rem;
	--padding-large: 3rem;
	--padding-normal: 1.5rem;
	--padding-small: 0.5rem;
	--section-separator-height: 100px; 
	--gap: 5px;
}

#top h1, #top h2 {
	font-size: var(--heading-large);
	font-family: var(--font-normal);
	font-weight: 800;
	text-transform: none;
}

#top h2 {
	color: var(--dark-teal);
}

#top h3 {
	font-family: var(--font-attention);
	font-size: var(--heading-small);
	font-style: italic;
	color: var(--bright-green);
}

p {
	color: var(--primary-text-color);
	font-family: var(--font-normal);
	font-size: var(--text-large);
	line-height: 1.4em;
	margin: var(--padding-normal) 0;
}

.html_header_top.html_header_sticky #main {
	padding-top: 0;
}

main {
	margin-bottom: 4rem;
}

header {
	position: fixed;
	padding: 1.5rem;
}

#top .header_bg {
	background-color: transparent;
}

.est-hero {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100vh;
	background-size: cover;
}

.est-hero .flex_column {
	padding: var(--padding-normal) 0;
}

.est-hero .flex_column::after {
	content: '';
	background-image: url(https://web-dev-challenge.stage4.estlandhosting.com/wp-content/uploads/2025/06/hero-swoop-2.svg);
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 70%;
	position: absolute;
	height: 100%;
	width: 100%;
	visibility: visible;
	top: 0;
	left: 100%;
}

.est-hero .flex_column::before {
	background-color: var(--dark-teal);
	content: '';
	height: 100%;
	opacity: 70%;
	position: absolute;
	right: 0;
	top: 0;
	width: 100vw;
	visibility: visible;
	z-index: -1;
}

.est-hero h1, .est-hero p {
	color: #fff
}

/* Services Section */
#top .est-services {
	padding-block: var(--section-separator-height);
}

/* Mission Section */
#top .est-mission {
	position: relative;
}

#top .est-mission::before {
	content: '';
	background-image: url(https://web-dev-challenge.stage4.estlandhosting.com/wp-content/uploads/2023/10/content-swoop.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	z-index: 10;
	top: calc(-1 * var(--section-separator-height));
	height: var(--section-separator-height);
	width: 100%;
}

/* Card */
#top .est-card {
	border-radius: var(--border-radius);
	color: var(--white);
	background-color: var(--dark-teal);
	overflow: hidden;
	padding: var(--padding-normal);
}

#top .est-card p {
	color: var(--white);
}

#top .est-card__title {
	padding: var(--padding-normal);
	background-color: var(--light-teal);
	text-align: center;
	border-bottom: var(--padding-small) solid var(--white);
	margin: calc(-1 * var(--padding-normal));
	margin-bottom: 0;
}

#top .est-card__image {
	margin: 0 calc(-1 * var(--padding-normal));
	max-width: none;
	border-bottom: var(--padding-small) solid var(--white);
}

#top .est-card__image img {
	border-radius: 0;
}

#top .est-card__title h3 {
	color: var(--dark-teal);
	margin: 0;
}

/* Buttons */
#top .avia-button {
	background-color: var(--bright-green);
	border-radius: var(--border-radius);
	text-transform: uppercase;
	font-family: var(--font-normal);
	font-weight: 700;
	padding: var(--padding-small) var(--padding-normal);
	border-bottom: 0;
}

#top .avia-button:hover {
	filter: brightness(1.1);
}

#av_section_2 {
	background-color: var(--light-blue);

}

/* Tabs Section */
#top .est-tabs {
	border: none;
}

#top .tab_titles {
	display: none;
}

#top .tab {
	background-color: var(--light-teal);
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	border: none;
	border-bottom: solid var(--light-blue) var(--gap);
	color: var(--dark-teal);
	font-size: 20px;
	font-weight: bold;
	padding: var(--padding-normal);
	position: relative;
	text-align: center;
	top: 0;
	transition: 300ms;
}

#top .tab::after {
	content: '';
	background-color: white;
	height: 2px;
	position: absolute;
	top: 75%;
	left: 20%;
	right: 100%;
	transition: 0.2s;
}

#top#top .tab:hover::after {
	right: 20%;
}

#top#top .tab.active_tab {
	background-color: var(--dark-teal);
	color: white;
	border-bottom: solid var(--gap) var(--dark-teal);
}

#top#top .tab.active_tab::after {
	content: '';
	background-color: white;
	height: 2px;
	position: absolute;
	top: 75%;
	left: 20%;
	right: 20%;
	transition: 0.2s;
}

#top#top .tab:not(.active_tab):hover {
	background-color: var(--bright-green);
	color: white;
}

#top .fullsize-tab:not(.active_tab) {
	border-radius: var(--border-radius);
}

#top .tab_content {
	background-color: var(--dark-teal);
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	border: none;
	padding-top: 0;
	padding: 0;
}

#top .active_tab_content {
	margin-bottom: var(--gap);
}

#top .tab_inner_content {
	background-color: var(--dark-teal);
	margin: 0;
}

#top .tab_inner_content .est-button {
	margin-bottom: var(--padding-normal);
}

#top .tab_inner_content h3 {
	color: var(--white);
	font-size: var(--heading-medium);
	margin-top: 0;
	padding-top: var(--padding-normal);
}

.tab_inner_content p {
	color: var(--white);
	font-size: var(--text-medium);
}

.tab_inner_content p:first-child {
	margin: 0;
}

.tab_inner_content img {
	border-bottom: solid var(--light-blue) var(--gap);
	border-top: solid var(--light-blue) var(--gap);
}

.tab_inner_content > *:not(*:first-child) {
	margin-inline: var(--padding-normal);
}

/*list pills*/
.est-list--pills ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: var(--gap);
}

.est-list--pills li {
	align-items: center;
	background-color: var(--light-blue);
	border-radius: var(--border-radius);
	display: flex;
	margin: 0;
	padding: var(--padding-small);
	transition: all 0.2s ease-in-out;
}

.est-list--pills li::before {
	content: '';
	height: 2em;
	width: 2em;
	background-color: currentColor;
	margin-right: var(--gap);
	mask-image: url(https://web-dev-challenge.stage4.estlandhosting.com/wp-content/uploads/2025/05/est-icon-check.svg);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}
/* 
.est-list--pills li:hover::before {
	background-color: var(--dark-teal);
} */

.est-list--pills li:hover {
	color: red;
}

@media screen and ( min-width: 768px ) {
	#top .tab_titles {
		display: grid;
		gap: var(--gap);
		grid-template-columns: repeat(4, 1fr);
	}

	.tabcontainer section:nth-child(2) .tab_inner_content,
	.tabcontainer section:nth-child(3) .tab_inner_content {
		margin: 0;
		padding-right: calc(50% + var(--gap) + var(--padding-large));
		padding-left: var(--padding-large);
	}

	.tabcontainer section:nth-child(4) .tab_inner_content,
	.tabcontainer section:nth-child(5) .tab_inner_content {
		margin: 0;
		padding-left: calc(50% + var(--gap) + var(--padding-large));
		padding-right: var(--padding-large);
	}

	.tabcontainer section:nth-child(2) .tab_inner_content img,
	.tabcontainer section:nth-child(3) .tab_inner_content img {
		position: absolute;
		width: calc(50% + calc(0.25 * var(--gap)));
		height: 100%;
		object-fit: cover;
		right: 0;
		border-left: solid var(--light-blue) var(--gap);
	} 

	.tabcontainer section:nth-child(4) .tab_inner_content img,
	.tabcontainer section:nth-child(5) .tab_inner_content img {
		position: absolute;
		width: calc(50% + calc(0.5 * var(--gap)));
		height: 100%;
		object-fit: cover;
		left: 0;
		border-right: solid var(--light-blue) var(--gap);
	} 

	#top .active_tab_content {
		margin-bottom: unset;
	}

	.tab_inner_content > *:not(*:first-child) {
		margin-inline: unset;
	}

	.tab_inner_content img {
		border-bottom: unset;
		border-top: unset;
	}

	#top .tab_inner_content h3 {
		padding-top: var(--padding-large);
	}

	#top .tab_inner_content .est-button {
		margin-bottom: var(--padding-large);
	}
}