/*
Theme Name:     Divi Child
Author:         Byard's Online Marketing, LLC
Author URI:     http://byardsonlinemarketing.com
Template:       Divi
Version:        1.0
*/

/**

We use this document for global changes that effect the entire website - not for individual sections.
This document is for headers, footers, menus, and global items like headings, sections, rows, paragraphs, etc.
We manipulate the specific section style within Divi as much as possible.

Use BEM (Block | Element | Modifier) naming convention as often as possible for CSS selectors.

*/

/* * * * * * * * * * * * */
/*        ROOT           */
/* * * * * * * * * * * * */ 
:root {
	--heading-font: 'Sora', 'system-ui', sans-serif;
	--paragraph-font: 'Sora', 'system-ui', sans-serif;
	--global-primary: #000000;
	--global-body-background: white;
	--global-accent: #0B109F;
	--global-light-gray:#999999;
	--global-light: #faf1da;
	--global-menu-background: #f9f9f9;
	--global-backdrop-filter-glass: blur(7px);
	--body-font-size: 18px;
	--button-font-size: 20px;
	--mobile-header-height: 64px; /*This doesn't change the height, but it impacts auxilary elements.*/
	--global-top-banner-height: 36px;
	--h1-font-size: 53px;
	--mobile-h1-font-size: 40px;
	--h2-font-size: 35px;
	--mobile-h2-font-size: 30px;
	--h3-font-size: 25px;
	--mobile-h3-font-size: 22px;
	--h4-font-size: 18px;
	--border-radius: 10px;
	--border-radius-round: 30px;
	--section-gap: 2rem;
	--mobile-section-gap: 1rem;
	--row-gap: 1rem;
	--mobile-row-gap: .5rem;
	--transition-duration: 200ms;
}

/* * * * * * * * * * * * */
/*        GOBAL          */
/* * * * * * * * * * * * */
@font-face {
	font-family: 'Sora';
	src: url('./fonts/Sora-Light.woff2') format('woff2'),
		 url('./fonts/Sora-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap; /* This improves TTFB, but it could look bad if caching doesn't take over. */
}
@font-face {
	font-family: 'Sora';
	src: url('./fonts/Sora-Regular.woff2') format('woff2'),
		 url('./fonts/Sora-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('./fonts/Sora-Medium.woff2') format('woff2'),
		 url('./fonts/Sora-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('./fonts/Sora-SemiBold.woff2') format('woff2'),
		 url('./fonts/Sora-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('./fonts/Sora-Bold.woff2') format('woff2'),
		 url('./fonts/Sora-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* divi would randomly set a very large padding-top value - like 900px. This keeps it normal. */
#page-container {
    padding-top: 115px !important;
}
@media (max-width:980px) {
	/* divi would randomly set a very large padding-top value - like 900px. This keeps it normal. */
	#page-container {
		padding-top: 107px !important;
	}
}

body, 
#main-content {
	background-color: var(--global-body-background);
}
/* Images. */
img {
	border-radius: 10px;
}
/* We only want to override Divi's body CSS. So we can't be too specific here. */
html body {
	line-height: 1.4;
	letter-spacing: -.3px;
	font-weight: 300;
	font-family: var(--paragraph-font);
	font-size: var(--body-font-size);
	color: var(--global-primary);
}
/* SECTIONS */
.et_pb_section {
	padding-top:var(--section-gap);
	padding-bottom: var(--section-gap);
}
/* ROWS */
.et_pb_row {
	max-width: 100vw;
	width: 90%;
	padding-top: var(--row-gap);
	padding-bottom: var(--row-gap);
}
.et-boc  .et_pb_row.thin-column-layout {
	display: flex;
    justify-content: center;
}
/* COLUMNS */
/* Two columns we give a lot of padding. */
.et-boc .thin-column-layout .et_pb_column {
	max-width: 400px;
}
/* MODULES */
.et_pb_section .et_pb_row .et_pb_module {
	margin-bottom: 1rem;
}
/* Standard H1 Heading */
.et-boc h1,
h1 {
	font-size: var(--h1-font-size);
	line-height:1.3;
	font-family: var(--heading-font);
	color: var(--global-primary);
	font-weight: 400;
	text-transform: uppercase;
}
/* For the HOME HERO, the heading font-sizes are swapped for design purposes. */
.et-boc .home-hero__section h1 {
	font-size: var(--h4-font-size);
	line-height:1.3;
	font-weight: 900;
	font-family: var(--heading-font);
	color: var(--global-primary);
	text-transform: none;
	font-weight: 300;
}
/* Standard H2 Heading */
.et-boc h2,
h2 {
	font-size: var(--h2-font-size);
	line-height:1.3;
	font-family: var(--heading-font);
	color: var(--global-primary);
	text-transform: uppercase;
	font-weight: 300;
}
/* For the HOME HERO, the heading font-sizes are swapped for design purposes. */
.et-boc .home-hero__section h2 {
	font-size: var(--h1-font-size);
	line-height:1.3;
	font-family: var(--heading-font);
	color: var(--global-primary);
	font-weight: 400;
}
/* This is seen most throughout the page in large font underneath the smaller H2 - it generally supports the H2 copy. */
.et-boc h3,
h3 {
	font-size: var(--h3-font-size);
	line-height: 1.1;
	font-family: var(--heading-font);
	font-weight: 800;
}
/* This is most often seen in the hero under the H1. */
.et-boc h4,
h4 {
	font-size: var(--h4-font-size);
	font-family: var(--paragraph-font);
	letter-spacing: -.3px;
	line-height: 1.2;
	font-weight: 600;
}
a {
	color: var(--global-accent);
}

.heading--blue {
	color: var(--global-accent);
	white-space: nowrap;
}

/*.For guttenberg editor - had to override this rediculous style. */
p:not(.has-background):last-of-type {
	padding-bottom: 1rem;
}

/* * * * * * * * * * * * * * * * * * * */
/*           GLOBAL MODIFIERS          */
/*  .__--  denotes a global modifier   */
/* * * * * * * * * * * * * * * * * * * */
.__--bold {
	font-weight: bold;
}
.__--hide {
	display: none;
}
.__--center {
	text-align: center;
}
/* END GLOBAL MODIFIERS */
/* BUTTONS */
.button,
.et_pb_button,
#page-container .gform_button {
	color: white;
	background: var(--global-accent);
	border-radius: 50px;
	font-size: var(--button-font-size);
	font-family: var(--paragraph-font);
	line-height: 1.2;
	letter-spacing: -.3px;
	text-align: center;
	font-weight: 500;
	padding: 5px 30px;
	border: none;
	margin-top:1rem;
	margin-bottom:1rem;
}
.button-container .et_pb_button, 
#page-container .gform_button,
#page-container .button-container .et_pb_button:hover {
	margin-right: 1rem;
	padding: 10px 30px;
}
.entry-content .et_pb_button:hover {
	opacity: .75;
}
.button--white {
	color: var(--global-accent);
	background: white;
	white-space: nowrap;
}
.entry-content .et_pb_button.button--white:hover {
	color: var(--global-accent);
	background: white;
	cursor: pointer;
}
.entry-content .button:hover,
.entry-content .et_pb_button:hover {
	filter: brightness(1.1);
	background: var(--global-accent);
	padding:5px 30px;
	border: none;
}
.et_pb_button:hover, 
.et_pb_module .et_pb_button:hover {
	padding: 5px 30px;
	border: none;
	opacity: .75;
}
/* Hide the arrow on hover. this is Divi's default to show it. */
.et_pb_button:after, 
.et_pb_button:before {
	display: none;
}

@media (max-width:980px) {
	.button-container .et_pb_button {
		display: inline-block;
	}
}

/* * * * * * * */
/*    HERO    */
/* * * * * * * */
.hero {
	position: relative;
}

.hero h2 {
	font-size: 60px;
}

@media (max-width:980px) {
	/* The H2 is actually a lot smaller in the designs than the h3, but nonetheless, the h2 is still more important structurally in the copy. */
	.hero h2 {
		font-size: var(--mobile-h2-font-size);
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.et-boc .home-hero__section h2 {
		font-size: var(--mobile-h1-font-size);
	}
	/* We center the hero on mobile. */
	.et-boc .hero h1,
	.hero h2,
	.hero h4,
	.hero .et_pb_module {
		text-align: center;
	}
}

/* * * * * * * * */
/* DIVI BACKEND  */
/* * * * * * * * */

/* They flag things that are not actually wrong and it makes everything look very messy. */
.codemirror-lint-warning {
	display: none;
}
/* They flag things that are not actually wrong and it makes everything look very messy. Eg: they don't like "fr" for grids. */
.codemirror-lint-error {
    display: none;
}

/* * * * * * * * * * * */ 
/* GLOBAL DESKTOP ONLY */
/* * * * * * * * * * * */ 

@media (min-width:982px) {
    /* Must have "Equalize column heights" on for multiple columns */
    /* Place in the (green) row container */
    .__--center-align {
        align-items: center;
        display: flex;
    }
}

/* * * * * * * * */
/* GLOBAL MOBILE */
/* * * * * * * * */

@media (max-width:981px) {
    /* Place in the (green) row container */
	.__--reverse-row-mobile {
		display: flex;
		flex-direction: column-reverse;
	}
    .__--reverse-row-mobile .et_pb_column:nth-child(2) {
        margin-bottom: 3rem;
    }
	.__--hide-on-mobile {
		display: none;
	}
	.et-boc h1 {
		font-size: var(--mobile-h1-font-size);
		margin-top: 1.5rem;
	}
	.et-boc h2 {
		font-size: var(--mobile-h2-font-size);
		margin-top: 1.5rem;
	}
	.et-boc h3 {
		font-size: var(--mobile-h3-font-size);
	}
	/* SECTIONS */
	.et_pb_section {
		padding-top:var(--mobile-section-gap);
		padding-bottom: var(--mobile-section-gap);
	}
	/* ROWS */
	.et_pb_row {
		padding-top: var(--mobile-row-gap);
		padding-bottom: var(--mobile-row-gap);
	}
}

/* * * * * * * * * * * * */
/*        HEADER         */
/* * * * * * * * * * * * */
/* Adjust the position of the main header when the Top Banner is enabled */
body.with-top-banner #main-header {
    top: var(--global-top-banner-height) !important; /* Adjust this value to match the height of the Top Banner */
}

/* When Top Banner is disabled, keep the main header fixed to the top */
body:not(.with-top-banner) #main-header {
    top: 0 !important;
}
#main-header {
	backdrop-filter: var(--global-backdrop-filter-glass); /* Provides the "frosted-glass" look for the header. */
	background-color: #ffffff7e; /* Semi-transparency is required for backdrop filters. */
	box-shadow:none;
}
/* Top Banner Styling */
.top-banner {
	font-weight: 300;
	font-family: var(--paragraph-font);
    font-size: var(--body-font-size);
    color: var(--global-light); /* Default text color */
    z-index: 9999; /* Ensure it stays on top */
    width: 100%;
	position: fixed;
	top:0;
	max-height: var(--global-top-banner-height); /* Adjust this value to match the height of the Top Banner */
}
.et_fullwidth_nav #main-header .container {
	max-width: 1600px;
}
.et_fullwidth_nav #main-header .container {
	display: flex;
}
#main-header .logo {
	width: auto;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    margin-bottom: 0;
    max-height: 100%;
    display: inline-block;
    float: none;
    vertical-align: middle;
    -webkit-transform: translate3d(0, 0, 0);
}
#et-top-navigation {
	width: 100%;
	display: flex;
	justify-content: space-between;
	transition: none !important;
	margin-left: 160px !important;
	padding-left: 0 !important;
	align-items: center;
} 
.et_header_style_left .et-fixed-header #et-top-navigation,
.et_header_style_left #et-top-navigation {
	padding-top: 15px;
}
#et-top-navigation a {
	font-family: var(--heading-font);
	font-size: 15px;
	font-weight: 500;
}
#et-top-navigation .button {
	color: white;
	font-family: var(--heading-font);
	background-color: var(--global-accent);
	font-size: 15px;
	font-weight: 700;
	padding: 8px 16px;
	border: solid 2px var(--global-accent);
	margin-top: 0;
	margin-bottom: 0;
}
#et-top-navigation .button.button--outlined,
.button--outlined {
	background-color: #fff;
	color: var(--global-accent);
	outline: var(--global-accent) solid 1px;
}
.search-focused #top_search {
	border: 1px solid var(--global-light-gray);
	border-radius: var(--border-radius-round);
	padding: 7px 10px;
}
.header__cta-container {
	display: flex;
	align-items: center;
	z-index: 999;
	gap:8px;
}
#header-search-icon::before {
    content: "\55";
    font-size: 17px;
    font-family: 'Etmodules';
    cursor: pointer;
    display: block;
    margin-right: 5px;
}
.et_header_style_left #et-top-navigation {
	padding-top: 0;
	padding: 20px 0;
}
/* Divi adds padding to the bottom of the normal and fixed header in order to keep the element between the title and the sub-menu container. We use pseudo elements instead, much cleaner. */
.et_header_style_left #et-top-navigation nav>ul>li>a,
.et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a {
	padding-bottom: 0;
}
#et-top-navigation  .nav li ul {
	border-color: white;
}
.menu-item .sub-menu {
    border-radius: var(--border-radius);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: none;
}
/* Menu item on hover. */
#top-menu-nav>ul>li>a:hover {
	opacity: 1;
}
.mobile_menu_bar:before, 
.mobile_menu_bar:after, 
#top-menu li.current-menu-ancestor>a, 
#top-menu li.current-menu-item>a {
	color: var(--global-accent);
	font-weight: 700;
}
/* Hide the drop down arrows. */
#top-menu .menu-item-has-children>a:first-child:after {
	display: none;
}
#mobile-menu-icon:before {
	content:'';
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='19' viewBox='0 0 24 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='1.76562' x2='24' y2='1.76562' stroke='black' stroke-width='2'/%3E%3Cline y1='9.88281' x2='24' y2='9.88281' stroke='black' stroke-width='2'/%3E%3Cline y1='18' x2='24' y2='18' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    position: relative;
    z-index: 999999;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;
}

/* * * * * * * */
/* MENU SEARCH */
/* * * * * * * */

#top_search {
	display: flex;
}
.search-form .header-search-field {
	border: none;
	border-bottom: 0 solid #000;
	background: none;
	width: 5rem;
	transition-duration: 300ms;
	-webkit-transition-duration: 300ms;
	font-family: var(--heading-font);
}
input.header-search-field:focus {
	width: 20rem;
	border-bottom: none
}
/* When search is focused, we have it positioned absolute (above the menu text to avoid collision during transition effects). */
#et-top-navigation.search-focused #top_search {
	margin-left: calc(-20rem + -4rem); /* search bar width - 4rem to offset and provide enough space. */
}
/* Keep the search in position absolute always. */
#top_search {
	position: absolute;
	margin-left: calc(-5rem + -4rem); /* search bar width - 4rem to offset and provide enough space. */
	transition-duration: 300ms;
	-webkit-transition-duration: 300ms;
}
/* Hide the menu when search is focused. Controlled in jQuery. */
#et-top-navigation.search-focused #top-menu {
	pointer-events: none;
	opacity: 0;
	transition-duration: 300ms;
	-webkit-transition-duration: 300ms;
}
/* END MENU SEARCH */
.mobile-icon {
	display: none;
}
.desktop-icon {
	display: inline;
}
/* DESKTOPS */
@media (min-width:981px) {
	/* Normally, hover breaks when there is a gap between the menu link and the sub-menu container, so we fill it in with this block. */
	ul.sub-menu:before {
		content: '';
		background: transparent;
		height: calc(var(--mobile-header-height) / 2);
		width: 100%;
		position: absolute;
		z-index: 99999999;
		top: calc(var(--mobile-header-height) / -2);
	}
	.nav li ul {
		margin-top: calc(var(--mobile-header-height) / 2);
	}
	#mobile-menu-icon,
	#mobile-menu__container {
		display: none; 
	}
}
@media (max-width:1240px) {
	/* This helps with smaller laptop screens. */
	#top-menu li.menu-item-has-children {
		padding-right: 0;
	}
}
@media (max-width:1140px) {
	/* This helps with smaller laptop screens. */
	#top-menu .menu-item-has-children>a:first-child {
		padding-right: 10px;
	}
}
@media (max-width:1140px) {
	/* This helps with smaller laptop screens. */
	#top-menu .menu-item-has-children>a:first-child {
		padding-right: 10px;
	}
	/* This helps with smaller laptop screens. */
	.et_fullwidth_nav #main-header .container {
		padding-left:5px;
		padding-right:5px;
	}
	/* The jQuery wasn't working when this was display: none. But still must be hidden when not focused to save space on small laptops. */
	input.header-search-field {
		opacity: 0;
	}
	input.header-search-field:focus {
		opacity: 1;
	}
	#top_search {
		margin-left: -2rem;
	}
}
/* MOBILE */
@media (max-width:980px) {
	.container.et_menu_container {
		width: 95%;
	}
	#main-header #et-top-navigation {
		display: flex;
		margin-left: 50px;
	}
	.mobile-icon {
		display: inline;
	}
	.desktop-icon {
		display: none;
	}
	#top_search {
		display: none;
	}
	.et_header_style_left #et-top-navigation .mobile_menu_bar {
		padding-bottom: 0;
	}
	.et_header_style_left #et-top-navigation {
		margin-left: 45px !important;
		margin-right: 10px !important;
		padding: 15px 0; /* largely responsible for menu height. */
	}
	.header__cta-container {
		width: 100%;
		justify-content: flex-end;
		padding-left:1rem;
		padding-right: 1rem;
	}
	#mobile_menu {
		margin-top: 20px;
		border-top: none;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		width: 124%;
        left: -12%;
		box-shadow: none;
	}
	/* Mobile menu styling */
	.mobile-menu {
		list-style: none;
		padding: 20px;
		font-family: var(--heading-font);
	}
	/* All sub menu should have padding for clickability and UX */
	.mobile-menu li {
		padding: 10px 0;
	}

	/* only have the underline for parent items */
	.mobile-menu li.menu-item-has-children {
		border-bottom: 1px solid #d9c89f; /* Divider lines */
	}

	.mobile-menu a {
		text-decoration: none;
		font-size: 18px;
		color: var(--global-accent); /* Dark blue text */
		font-weight: bold;
		display: block;
		-webkit-user-select: none; 
		user-select: none;
	}

	#mobile_menu a {
		font-family: var(--heading-font);
	}
	.mobile_menu_bar:before {
		color: var(--global-primary);
	}
	/* Base styles for the mobile menu */
	#mobile-menu__container {
		opacity: 0; /* Initially hidden */
		visibility: hidden; /* Prevents it from being clickable */
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Transition for fade effect */
		position: fixed; /* Adjust position as needed */
		top: var(--mobile-header-height);
		overflow: scroll;
		left: 0;
		width: 100%;
		opacity: 0; /* Fully hidden */
		visibility: hidden; /* Hidden from the viewport */
		height: 100%;
		background-color: var(--global-ivory-cream); /* Light yellow to match the screenshot */
		z-index: 999; /* Ensure it's above other elements */
		padding-bottom: 100px; /* Space for the search bar */
	}
	body.with-top-banner .mobile-menu__title {
		padding-top: calc( var(--global-top-banner-height) + 2rem ); /* Adjust this value to match the height of the Top Banner */
	}
	.mobile-menu__title {
		font-size: var(--mobile-h3-font-size);
		padding-top: 2rem;
		padding-bottom: 1rem;
		padding-left: 20px;
		color: var(--global-accent); /* Dark blue text */
		border-bottom: 1px solid var(--global-accent);
	}
	.mobile-menu__menu-search-container {
		border-radius: 30px;
		padding-bottom: 4rem;
		background-color: var(--global-ivory-cream); /* Light yellow to match the screenshot */
	}
	/* I know we hate to use important, but there was no good way to add specificity. Also this should never change! */
	#main-header {
		position:fixed !important;
	}
	/* When menu is open */
	#mobile-menu__container.mobile-menu-open {
		opacity: 1; /* Fully visible */
		background: var(--global-menu-background);
		visibility: visible; /* Shows the menu */
	}
	
	/* Submenu styles */
	.sub-menu {
		display:none;
		list-style: none;
		padding-left: 40px;
		overflow: hidden;
		transition: max-height 0.3s ease-in-out;
	}

	.menu-item-has-children > a {
		text-transform: uppercase;
		display: inline; /*allows for only the words to be clickable*/
	}
	
	/* Chevron icons for menu items */
	.menu-item-has-children:before {
        content: '+';
        font-size: 18px;
        color: var(--global-accent);
        transition: transform 0.3s ease;
        position: absolute;
        right: 20px;
        padding: 0px 2rem;
        cursor: pointer;
	}
	
	/* Chevron icons for menu items */
	.menu-item-has-children.active:before {
		content: '⌄';
        font-size: 25px;
        margin-top: -5px;
        margin-right: -3px;
    }

	.menu-item-has-children.active > li:after {
		transform: rotate(-180deg); /* Flip arrow when submenu is open */
	}
	
	/* Donate and Get Help buttons */
	.menu-header-buttons {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	
	.menu-header-buttons a {
		display: inline-block;
		padding: 10px 20px;
		font-size: 16px;
		font-weight: bold;
		color: #ffffff;
		background-color: var(--global-accent); /* Dark blue buttons */
		border-radius: 5px;
		text-decoration: none;
	}
	
	.menu-header-buttons a:first-child {
		background-color: #d9534f; /* 'Get Help' button with a red tone */
	}

	/* Search bar */
	#mobile-menu__container input[type="search"] {
		width: 100%;
		padding: 10px;
		margin-top: 20px;
		font-size: 16px;
		border: 2px solid var(--global-accent);
		outline: none;
		font-family: var(--heading-font);
		font-weight: 600;
		border-radius: 30px;
		padding-left: 40px; /* Space for the icon */
		padding-right: 40px;
		background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='M13 13L18 18' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");
		background-position: 15px center; /* Positioning the icon */
		background-repeat: no-repeat; /* No repeat for the icon */
		background-size: 20px 20px; /* Adjust the size of the icon */
	}

	#mobile-menu__container input[type="search"]::placeholder {
		color: var(--global-accent); /* Placeholder color */
		text-align: center;
	}
}

/* * * * * * * * * * */
/*       TOGGLE      */
/* * * * * * * * * * */

/* Divi Toggle Module */
.et_pb_section .et_pb_row .et_pb_module.et_pb_toggle {
    border-top: 3px solid var(--global-primary);
    border-bottom: 3px solid var(--global-primary);
    border-left: none;
    border-right: none;
    background: none;
	margin-bottom: -3px;
}

.et_pb_module.et_pb_toggle .et_pb_toggle_title {
    font-weight: bold;
}

/* Plus icon. */
.et_pb_module.et_pb_toggle .et_pb_toggle_title:before {
    content: "+";
    color: var(--global-primary);
    font-weight: bold;
}

.et_pb_module.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before {
	content: "-";
} 

/* * * * * * * * * * */
/*  PROJECT CARDS    */
/* * * * * * * * * * */

/* The link container for the whole card. */
.project-card-link {
	position: relative;
}

/* Blurred title container */
.project-card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #0b109f37;
	backdrop-filter: var(--global-backdrop-filter-glass); /* Provides the "frosted-glass" look. */
	width: 100%;
	padding: 1rem;
	min-height: 7em;
}

/* Title */
.project-card .project-card-title {
	font-weight: 300;
	color: white;
	padding: 10px;
	
}

/* Image */
.project-card .project-card-image img {
	border-radius: 0;
	aspect-ratio: 5/7;
	object-fit: cover;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	padding: 20px;
}
.project-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: transform 0.3s ease-in-out;
}
.project-card:hover {
	transform: translateY(-5px);
}
.project-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}
.project-card-image img {
	width: 100%;
	height: auto;
	display: block;
}
.project-card-content {
	padding: 15px;
	text-align: center;
}
.project-card-title {
	font-size: 18px;
	margin: 0;
	font-weight: bold;
}

@media (min-width:981px) {
	/* The link container for the whole card. */
	.project-card {
		position: relative;
		overflow: hidden; /* Ensures content doesn't overflow */
	}

	/* Blurred title container */
	.project-card-content {
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: rgba(11, 16, 159, 0.3); /* Semi-transparent background */
		backdrop-filter: var(--global-backdrop-filter-glass); /* Frosted-glass effect */
		width: 100%;
		padding: 1rem;
		min-height: 7em;
		
		transform: translateY(100%); /* Initially hidden */
		opacity: 0;
		transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
	}

	/* Hover effect: pull up content */
	.project-card:hover .project-card-content {
		transform: translateY(0);
		opacity: 1;
	}

	/* Title */
	.project-card .project-card-title {
		font-weight: 300;
		color: white;
		padding: 10px;
	}

	/* Image */
	.project-card .project-card-image img {
		border-radius: 0;
		display: block; /* Prevents unwanted whitespace */
		width: 100%; /* Ensures the image fits */
		aspect-ratio: 7/5; /* We flip the aspect ratio around on mobile */
	}
}

/* * * * * * * * * * */
/*    Project Posts  */
/* * * * * * * * * * */

.project-template-default .et_pb_post_content {
	max-width: 800px;
	margin: auto;
}

.et_pb_section {
    scroll-margin-top: 120px; /* Adjust to match your fixed header height */
}

/* Mobile */
@media (max-width: 981px) {
	/* The title is too big on mobile. */
	.project-template-default h1 {
		font-size: 36px;
		padding-right: 1rem;
	}
	.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 100%;
	}
}

/* * * * * * * * * * */
/*  GRAVITY FORMS    */
/* * * * * * * * * * */

#page-container .gform_fields {
	row-gap: 5px;
}