/** 
 * main.css
 * 
 * GLOBAL
 * BASIC PAGE
 * BOOTSTRAP FORMS
 * FORM BUILDER
 * PRO MAILER
 * HOME DEV
 * HOME FEATURES
 * MAIN CONTENT
 * FOOTER
 */

/**
 * ************************* GLOBAL ********************************
 */

/* Override Bootstrap's button styles using CSS variables */
.btn-primary {
	background-color: var(--site-dark-gold) !important;
	border-color: var(--site-dark-gold-rgb) !important;
	color: var(--bs-white) !important;
}

.btn-primary:hover {
	background-color: var(--site-deep-gold) !important;
	border-color: var(--site-deep-gold-rgb) !important;
}

.btn-primary:focus,
.btn-primary:active {
	background-color: var(--site-deepdark-gold) !important;
	border-color: var(--site-deepdark-gold-rgb) !important;
	box-shadow: 0 0 0 0.25rem rgba(90, 66, 31, 0.25) !important;
}

.align_center {
	text-align: center;
}

.align_left {
	text-align: left;
}

.align_right {
	text-align: right;
}

.rejt-jeles:before {
	content: attr(data-one) "@";
}

.rejt-jeles:after {
	content: attr(data-two) attr(data-four);
}

/**
 * ************************* BASIC PAGE ********************************
 */

.basic-page-logo {
	width: 100%;
	max-width: 300px;
	margin: auto;
	display: block;
}

body.basic-page {
	background-image: var(--home-background-image);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

body.basic-page #content h1,
body.basic-page #content h2 {
	color: var(--site-gold);
	font-family: var(--site-heading-family);
}

body.basic-page #content h1 {
	font-family: var(--site-heading-family);
	font-size: calc(2.2rem + 0.4vw);
	font-weight: 500;
	color: var(--site-gold);
	margin-bottom: 2rem;
	line-height: 1.2;
	text-align: center;
}

body.basic-page #content h2 {
	font-size: calc(1.8rem + 0.3vw);
	margin-top: 2.6rem;
	margin-bottom: 1rem;
}

body.basic-page #content h3 {
	font-family: var(--site-heading-family);
	font-size: calc(1.4rem + 0.3vw);
	font-weight: 500;
	color: var(--site-light-gold);
	margin-top: 1.4rem;
	margin-bottom: .7rem;
}

body.basic-page #content {
	background-color: rgba(var(--site-deep-blue-rgb), 0.8);
}

body.basic-page #content p {
	color: var(--site-beige);
}

/**
 * ************************* BOOTSTRAP FORMS ********************************
 */

.form-control {
	--bs-body-color: black;
}

.form-control::placeholder {
	opacity: 0.5;
}

/**
 * ************************ FROM BUILDER ******************************
 */

#FormBuilder_newsletter_signup #FormBuilderSubmitted+.alert.alert-success {
	max-width: calc(100% - ((100vw - 20px) * 80 / 300));
	margin: 14px auto !important;
}

#FormBuilder_newsletter_signup #wrap_Inputfield_email {
	margin-bottom: 0;
}

#FormBuilder_newsletter_signup #wrap_Inputfield_email p {
	width: 100%;
}

/**
 * ************************* PRO MAILER ********************************
 */

/* Scope styles to the form to avoid breaking other parts of the site */
#promailer-form {
	max-width: 100%;
	margin: 0 auto;
}

/* Label Styling */
#promailer-form label {
	color: var(--bs-white) !important;
	/* Enforce white text */
	font-size: 1.1rem;
	font-weight: 400;
	font-family: var(--bs-body-font-family);
	/* Sans-serif matches design */
}

/* Input Field Styling */
#promailer-form .custom-input {
	border-radius: 0.5rem;
	/* Slightly rounded corners per design */
	border: none;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	color: var(--bs-gray-600);
	/* Dark gray text for input value */
	background-color: var(--bs-white);
	width: 100%;
}

/* Specific widths for Desktop to match the image proportions */
@media (min-width: 992px) {
	#promailer-form .custom-input {
		width: 260px;
		/* Fixed width for email on desktop */
	}

	#promailer-form .captcha-input {
		width: 180px;
		/* Slightly narrower for captcha on desktop */
	}
}

/* Placeholder Text Styling */
#promailer-form .custom-input::placeholder {
	color: var(--bs-gray-400);
	/* Light gray placeholder */
	opacity: 1;
}

/* Button Styling */
#promailer-form .custom-btn {
	background-color: var(--site-dark-gold) !important;
	border: 1px solid var(--bs-white) !important;
	/* White ring border */
	color: var(--bs-white) !important;
	font-family: var(--bs-body-font-family);
	/* Sans-serif */
	font-weight: 400;
	box-shadow: none !important;
	/* Remove default Bootstrap shadow/glow */
	transition: all 0.3s ease;
}

/* Hover state for button */
#promailer-form .custom-btn:hover {
	background-color: var(--site-deep-gold) !important;
	border-color: var(--bs-gray-200) !important;
}

/* Success and Error Messages */
#promailer .success,
#promailer .error {
	padding: 1rem;
	margin: 1rem auto;
	border: 1px solid transparent;
	border-radius: 0.4rem;
	text-align: center;
	max-width: 500px;
}

#promailer .success {
	color: white;
	font-weight: 400;
	background-color: rgba(25, 135, 84, 0.48);
	border-color: rgba(25, 135, 84, 0.25);
}

#promailer .error {
	color: white;
	font-weight: 400;
	background-color: rgba(220, 53, 69, 0.45);
	border-color: rgba(220, 53, 69, 0.25);
}

/**
 * ************************* HOME DEV ********************************
 */

body {
	position: relative;
	letter-spacing: 0.05em;
	background-color: var(--bs-blue);
}

body.home,
body.promailer-subscribe {
	background-image: var(--home-background-image);
	background-size: cover;
	background-position: center;
}

body.home h2 {
	color: #d6a768;
}

/* New overlay element - 70% of viewport size and centered */
.home-overlay {
	position: fixed;
	top: 20%;
	left: 15%;
	width: 70%;
	height: 60%;
	background-color: #010e43;
	opacity: 0.7;
	/* Use a more reasonable blur value that works in all browsers */
	-webkit-filter: blur(500px);
	filter: blur(500px);
	border-radius: 800px;
	z-index: 0;
	/* Add a pseudo-element for additional blur effect */
	overflow: hidden;
}

/* Add an after pseudo-element to create additional blur */
.home-overlay::after {
	content: '';
	position: absolute;
	top: -50px;
	left: -50px;
	right: -50px;
	bottom: -50px;
	background: inherit;
	-webkit-filter: blur(200px);
	filter: blur(200px);
	z-index: -1;
}

/* Ensure content stays above overlay */
.position-relative {
	z-index: 1;
}

.home-logo-dev {
	/* for horizontal centering */
	margin: 1rem auto 0 auto;
	/* Default width for xs and sm */
	width: 250px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.home-logo-dev {
		width: 300px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.home-logo-dev {
		width: 350px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.home-logo-dev {
		width: 450px;
	}
}

#FormBuilder_newsletter_signup {
	/* for horizontal centering */
	margin: 1rem auto 0 auto;
	/* Default width for xs and sm */
	max-width: 600px;
}

/* Feature icons styling */
.feature-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	background-color: var(--site-gold);
	border-radius: 50%;
	margin: 0 auto 1rem;
	font-size: 2rem;
	color: var(--site-dark-blue);
}

/** Works in conjunction with all #20250914141857. FormBuilder override for letting the Newsletter Subscribe Form's input and button be in the same line. */
#FormBuilder_newsletter_signup #Inputfield_email,
#FormBuilder_newsletter_signup button.btn {
	width: auto !important;
}

/** Works in conjunction with all #20250914141857. FormBuilder override for acessible solution to visually hide the label while keeping it available to screen readers. This is considered a best practice for form design. */
#wrap_Inputfield_email label.InputfieldHeader {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/**
 * ************************* HOME FEATURES **************************
 */

#home-title+h2 {
	font-family: var(--site-heading-family);
	font-size: calc(1.275rem + 0.3vw);
	font-weight: 500;
	color: var(--site-gold);
	margin-bottom: 1rem;
	line-height: 1.2;
}

.FormBuilder-newsletter_signup+p {
	color: var(--site-gold);
	font-size: .875em;
}

#home-how-it-works>p {
	margin-bottom: 0.2rem;
}

#home-how-it-works>p>strong {
	font-weight: 700;
	color: var(--site-gold);
}

#home-features p {
	margin-bottom: 0;
}

#home-features p strong {
	font-family: var(--site-heading-family);
	color: var(--site-gold);
	font-size: calc(1.275rem + 0.3vw);
	font-weight: 500;
	margin-bottom: 0.5rem;
	line-height: 1.2;
}

/**
 * ************************* MAIN CONTENT **************************
 */

.align_left {
	/* for images placed in rich text editor */
	float: left;
	margin: 0 1em 0.5em 0;
	position: relative;
	top: 0.5em;
	max-width: 50%;
}

.align_right {
	/* for images placed in rich text editor */
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%;
}

.align_center {
	/* for images placed in rich text editor */
	display: block;
	margin: 1em auto;
	position: relative;
	top: 0.5em;
}

/**
 * ************************* FOOTER **************************
 */

.footer-link-color {
	--bs-nav-link-color: var(--site-mid-blue) !important;
	--bs-nav-link-hover-color: var(--site-mid-blue) !important;
}

.footer-link-color:hover {
	--bs-nav-link-color: var(--site-gold) !important;
	--bs-nav-link-hover-color: var(--site-gold) !important;
}

#footer {
	color: white;
	padding-top: 1rem;
	padding-bottom: 2rem;
	/* Semi-transparent gradient background */
	background: linear-gradient(to top,
			rgba(var(--site-deep-blue-rgb), 0.5) 0%,
			rgba(var(--site-dark-blue-rgb), 0.55) 100%);
	/* Text shadow for better readability */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	/* Add subtle border */
	border-top: 1px solid rgba(var(--site-gold-rgb), 0.2);
}

/**
 * ************************* PRO MAILER **************************
 */
/* Style placeholders in input fields */
#promailer-form input::placeholder {
	color: #ddd;
	/* Ensures the color is applied consistently */
	opacity: 1;
}

.megadnikell:after {
	content: attr(data-attr);
}