@charset "utf-8";
/* CSS Document */
body, td, th {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: bold;
	-webkit-text-size-adjust: 100%;
}
html {
	margin: 0px;
	height: 100%;
	width: 100%;
}
body {
	margin: 0px;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* IE10 Consumer Preview */
	/* Old Color blue 00A3EF */
	/* Old Color orange#F2AB26 */
	Color: #666666;
	background-image: -ms-linear-gradient(top, #FFFFFF 0%, #666666 100%);
	/* Mozilla Firefox */
	background-image: -moz-linear-gradient(top, #FFFFFF 0%, #666666 100%);
	/* Opera */
	background-image: -o-linear-gradient(top, #FFFFFF 0%, #666666 100%);
	/* Webkit (Safari/Chrome 10) */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #666666));
	/* Webkit (Chrome 11+) */
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #666666 100%);
	/* W3C Markup, IE10 Release Preview */
	background-image: linear-gradient(to bottom, #FFFFFF 0%, #666666 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#666666');
}
/* Page Title Styling */
.pageTitle {
	font-family: 'Arial', sans-serif; /* Use a clean, readable font */
	font-size: 2.5rem; /* Adjust size for prominence */
	font-weight: bold; /* Emphasize the title */
	color: #333; /* Neutral color for readability */
	text-align: center; /* Center align the title */
	align-content: center;
	margin: 20px 0; /* Space around the title */
	padding: 10px; /* Optional padding for spacing */
	border-bottom: 2px solid #ddd; /* Add a subtle underline */
	text-transform: capitalize; /* Capitalize each word */
	letter-spacing: 0.5px; /* Slight spacing for clarity */
	background-color: #f9f9f9; /* Optional background for contrast */
	border-radius: 8px; /* Slightly rounded corners */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.page-container {
	flex: 1; /* Makes sure the content area expands */
	width: 100%;
	/*overflow-x: auto;*/
	/*padding-bottom: 75px;*/
	margin: 0 auto;
}
.phone-input-wrapper {
	position: relative;
	display: inline-block;
	width: 125px;
	margin-bottom: 10px; /* Space between inputs */
}
/* Style for each phone input */
.phone-input-wrapper input {
	position: relative;
	background: #FFFFFF;
	z-index: 2;
	width: 100%;
	padding: 5px;
	font-size: 16px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
/* The mask that shows the placeholder */
.phone-input-wrapper .phone-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 5px;
	font-size: 16px;
	color: #C4C4C4;
	z-index: 2;
	pointer-events: none; /* Allow clicks to reach the input */
}
/*---------------------------------------
|			TOOLTIP CSS     			|
---------------------------------------*/
/* Container for the info icon and tooltip */
.info-container {
	position: relative;
	display: inline-block;
	padding: 5px; /* Increase the hover area */
	z-index: 1000;
}
/* Info Icon */
.info-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 15px;
	height: 15px;
	font-size: 11px;
	font-weight: bold;
	color: #fff;
	background-color: #0057B4;
	border: 2px solid #04163A;
	border-radius: 50%;
	cursor: pointer;
	user-select: none;
	touch-action: manipulation;
}
/* Tooltip */
.tooltip {
	position: absolute;
	display: block; /* Ensure block layout */
	white-space: normal; /* Allow wrapping */
	visibility: hidden;
	background-color: #333;
	color: #fff;
	padding: 10px 14px;
	border-radius: 5px;
	font-size: 14px;
	text-align: center;
	font-weight: normal;
	width: 400px; /* Default fixed width */
	max-width: 800px; /* Maximum width if content is larger */
	opacity: 0;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	z-index: 10;
	/* Default position: left of the icon */
	right: 125%;
	top: 50%;
	transform: translateY(-50%);
}
/* Close Button inside Tooltip */
.tooltip .tooltip-close {
	position: absolute;
	top: 2px;
	right: 4px;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	z-index: 11; /* Ensure it's above the tooltip text */
}
/* Tooltip Arrow (using ::after pseudo-element) */
.tooltip::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}
/* Arrow when tooltip is positioned on the left */
.tooltip[data-position="left"] {
	right: 125%;
	top: 50%;
	transform: translateY(-50%);
}
.tooltip[data-position="left"]::after {
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #333;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
}
/* Arrow when tooltip is positioned on the right */
.tooltip[data-position="right"] {
	left: 125%;
	top: 50%;
	transform: translateY(-50%);
}
.tooltip[data-position="right"]::after {
	border-width: 10px 10px 10px 0;
	border-color: transparent #333 transparent transparent;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
}
/* Arrow when tooltip is positioned on top */
.tooltip[data-position="top"] {
	/* Position will be set in JS as a pixel value */
	left: 50%;
	transform: translateX(-50%);
}
.tooltip[data-position="top"]::after {
	border-width: 10px 10px 0 10px;
	border-color: #333 transparent transparent transparent;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}
/* Arrow when tooltip is positioned on bottom */
.tooltip[data-position="bottom"] {
	/* Position will be set in JS as a pixel value */
	left: 50%;
	transform: translateX(-50%);
}
.tooltip[data-position="bottom"]::after {
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #333 transparent;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.info-container:hover .tooltip {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto;
}
/*---------------------------------------
|			FORM VALIDATION 			|
---------------------------------------*/
/* Container to hold the field and its error cloud */
.form-field {
	position: relative;
	margin-bottom: 1.5em; /* Optional spacing between fields */
}
.error-cloud {
	position: absolute;
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 12px;
	z-index: 1000;
	pointer-events: none;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	/* Allow text wrapping and constrain width */
	max-width: min(50ch, 90vw);
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
/* The pseudo-elements for the triangle pointer remain the same */
.error-cloud::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}
.error-cloud.top::after {
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 10px 10px 0 10px;
	border-color: #f8d7da transparent transparent transparent;
}
.error-cloud.bottom::after {
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #f8d7da transparent;
}
.error-cloud.left::after {
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #f8d7da;
}
.error-cloud.right::after {
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	border-width: 10px 10px 10px 0;
	border-color: transparent #f8d7da transparent transparent;
}
.requiredStar {
	font-size: 12px;
	color: #B73638;
}
/* Styling for invalid fields */
input.invalid, select.invalid, textarea.invalid {
	border: 1px solid #dc3545;
	background-color: #f8d7da;
}
.styled-submit {
    background-color: #007BFF; /* Primary blue color */
    color: #fff; /* White text */
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    outline: none;
}

.styled-submit:hover {
    background-color: #0056b3; /* Darker blue on hover */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); /* Slight lift effect */
}

.styled-submit:active {
    background-color: #003f7f; /* Even darker blue when clicked */
    transform: translateY(1px); /* Subtle press effect */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.styled-submit:disabled {
    background-color: #cccccc; /* Light gray for disabled state */
    color: #666666;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
/*---------------------------------------
|			 	FOOTER CSS 	   			|
---------------------------------------*/
.footer {
	background: linear-gradient(135deg, #848484, #A0A0A0);
	color: #fff;
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	margin-top: 50px; /* For spacing above the footer */
}
.footer h2 {
	margin: 0;
	font-size: 1.5em;
}
.footer p {
	font-size: 1em;
	margin: 5px 0;
}
.footer a {
	color: #fff;
	text-decoration: none;
	transition: color 0.3s ease;
}
.footer a:hover {
	color: #ffcc00; /* Highlight on hover */
}
/*--------------------------------------------------//
//			LIGHTBOX EFFECT FOR IMAGES				//
//--------------------------------------------------*/
/* Full-screen overlay – hidden on page load */
#lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	display: none; /* Hidden by default */
	justify-content: center;
	align-items: center;
	z-index: 10000;
}
/* Container wrapping the image and close button */
#lightbox-container {
	position: relative;
	/* Constrain the container to 90% of the viewport */
	max-width: 90vw;
	max-height: 90vh;
	/* Let the container size itself to the image */
	display: inline-block;
}
/* The image scales down while maintaining its aspect ratio */
#lightbox-image {
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain; /* Ensures the image fits without distortion */
	border-radius: 4px;
}
/* Close button positioned relative to the image container */
#lightbox-close {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%, -50%);
	background: #fff;
	color: #333;
	font-size: 24px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/****************************************/
/*           Breaking Points 			*/
/****************************************/
@media screen and (max-width: 944px) {
	.page-container {
		width: 100%;
		margin: 0;
	}
}
/* Responsive: On mobile devices, limit tooltip width */
@media screen and (max-width: 768px) {
	.tooltip {
		width: 400px; /* Use 400px if possible */
		max-width: 70vw; /* ...otherwise, up to 70% of viewport width */
	}
	.pageTitle {
		font-size: 2rem; /* Slightly smaller font for smaller screens */
		padding: 8px; /* Adjust padding */
	}
	.phone-input-wrapper {
		width: 95%;
	}
	.footer {
		flex-direction: row;
		justify-content: space-around;
		text-align: left;
	}
}