@charset "utf-8";
/* CSS Document: HFL Landing Pages 

Author: S. Ali Raza
Version: 2.1

Change Log:
05-01-26: Update scroll to top position
10-17-23: Recreate and optimize styles for the new landing page
*/

/* General */

:root {
	--bs-red: #C00;
	--bs-green: #00b300;
	--bs-dark-blue: #004f70;
	--bs-gold: #fcba03;
	--bs-yellow: yellow;
	--bs-lightyellow: #ffc;
	--bs-lightgray: #f1f1f1;
	--bs-lightblue: #e6f2ff;
	--bs-lightgreen: #dff0d8;
	--bs-darkblue: #171F3C;
	--bs-pink: #ff54ff;
	--font-primary: 'Open Sans', sans-serif;
	--font-secondary: 'Roboto Condensed', sans-serif;
	--font-arial: 'Arial', Helvetica, sans-serif;
  }

body { -webkit-font-smoothing: auto; font-family: var(--font-primary); color: var(--bs-gray-800); --bs-body-font-size:1rem; --bs-body-line-height: 1.8; }

main { transition: 0.4s; }

.btn:focus { outline: none; box-shadow: none; }
a {
    text-decoration: none;
	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */ }
a.link { text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #8d8df3; }
a.link:hover { text-decoration: none; color: var(--bs-green); }
a.dotted, a.dotted:visited { color:inherit; text-decoration:none; border-bottom:1px dotted #20a2ff;}     
a.dotted:hover { text-decoration:none; border-bottom: none;}
a.link-headline, a.link-headline:visited  { text-decoration: none; color: inherit; }
a.link-headline:hover  { text-decoration: none; color: #0066CC}
b, strong { font-weight: 600; }
.asterisk { color: var(--bs-gray-500) !important; font-size: 55% !important; vertical-align: top; }

.overlay.dark { background-color: rgba(0, 0, 0, .60); }	
.overlay.light { background-color: rgba(255,255,255,.85); }
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

/* Typography */
p:last-of-type { margin-bottom: 0; }
.list li { margin-bottom: 1.2rem; }
.text-shadow { text-shadow: 1px 1px #fff; }
.text-shadow.dark { text-shadow: 1px 1px #000; }

/*Text Hightlight */
.text-highlight { background-color: #fff2a8; padding: 2px 5px; border-radius: 5px; }
.text-highlight.red { background-color: var(--bs-red); color: #fff; text-shadow:none;}
.text-highlight.green { background-color: var(--bs-green); color: #fff; text-shadow:none;}
.text-highlight.dark { background-color: var(--bs-gray-800); color: #fff; text-shadow:none;}
.text-highlight.gold { background-color: var(--bs-gold); color: #fff; text-shadow:none;}

/* Highlight Gradient */
.highlight-red {
	border-radius: 1em 0 1em 0;
	background-image: linear-gradient( -100deg, rgba(255, 20, 0, 0.2), rgba(255, 20, 0, 0.30) 95%, rgba(255, 20, 0, 0.1)	); }
.highlight-yellow {
	border-radius: 1em 0 1em 0;
	background-image: linear-gradient( -100deg, rgba(255, 224, 0, 0.2), rgba(255, 224, 0, 0.7) 95%, rgba(255, 224, 0, 0.1) ); }
.highlight-green {
	border-radius: 1em 0 1em 0;
	background-image: linear-gradient( -100deg, rgba(0, 255, 20, 0.2), rgba(0, 255, 20, 0.7) 95%, rgba(0, 255, 20, 0.1)); }
.highlight-blue {
	border-radius: 1em 0 1em 0;
	background-image: linear-gradient( -100deg, rgba(0, 20, 135, 0.2), rgba(0, 124, 255, 0.46) 95%, rgba(0, 20, 135, 0.1) ) }

/*Text Underline */
.text-underline { border-bottom: 2px solid var(--bs-red); padding-bottom: 1px; }
.text-underline.green { border-bottom: 2px solid var(--bs-green) !important; }
.text-underline.red { border-bottom: 2px solid var(--bs-red) !important;}
.text-underline.gold { border-bottom: 2px solid var(--bs-gold) !important;}

/* Background colors */
.bg-lightgray { background-color: var(--bs-lightgray) !important; }
.bg-lightyellow { background-color: var(--bs-lightyellow) !important; }
.bg-lightblue { background-color: var(--bs-lightblue)!important; }
.bg-red { background-color:var(--bs-red) !important; }
.bg-yellow { background-color: var(--bs-yellow) !important; }
.bg-lightgreen { background-color: var(--bs-lightgreen) !important; }
.bg-green { background-color: var(--bs-green) !important; }
.bg-darkblue { background-color: var(--bs-darkblue) !important; }

/*Text Colors*/
.text-red { color: var(--bs-red) !important; }
.text-green { color: var(--bs-green) !important; }
.text-light { color: var(--bs-gray-500) !important; }
.text-dark { color: var(--bs-gray-800) !important; }
.text-yellow { color: var(--bs-yellow) !important; }
.text-gold { color: var(--bs-gold) !important; }
.text-pink { color: var(--bs-pink) !important; }
.text-greenHFL { color: #60a321 !important; }

/* Container */
.container-1000 { max-width: 1000px;}
.container-900 { max-width: 900px;}
.container-800 { max-width: 800px;}
.container-700 { max-width: 700px;}
.container-600 { max-width: 600px;}

/* Star icons */
.star-icon { display: inline-block; }
.star-icon::before, .star-icon::after { font-family: 'bootstrap-icons'; color: gold; }
.star-icon::before { color: gold; }    

/* Filled Gold Stars */
.star-icon.star-icon-5::before { content: "\f586 \f586 \f586 \f586 \f586"; }
.star-icon.star-icon-45::before { content: "\f586 \f586 \f586 \f586 \f587"; }
.star-icon.star-icon-4::before { content: "\f586 \f586 \f586 \f586"; }
.star-icon.star-icon-3::before { content: "\f586 \f586 \f586"; }
.star-icon.star-icon-2::before { content: "\f586 \f586"; }
.star-icon.star-icon-1::before { content: "\f586"; }
/* Empty Gray Stars*/
.star-icon.star-icon-1::after { color: var(--bs-gray-400); content: "\f588 \f588 \f588 \f588"; }
.star-icon.star-icon-2::after { color: var(--bs-gray-400); content: "\f588 \f588 \f588"; }
.star-icon.star-icon-3::after { color: var(--bs-gray-400); content: "\f588 \f588"; }
.star-icon.star-icon-4::after { color: var(--bs-gray-400); content: "\f588"; }

/* Line Divider */
.line-divider { overflow: hidden; text-align: center; line-height: 1.3;}
.line-divider:before, .line-divider:after {
	background-color:#ccc;
	height: 2px;
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: 50%;}
.line-divider:before { right: 0.5em; margin-left: -50%; }
.line-divider:after { left: 0.5em; margin-right: -50%; }

/* Tooltip */
.tooltip-lightgreen { --bs-tooltip-bg: var(--bs-lightgreen); --bs-tooltip-color: #000; --bs-tooltip-opacity: 1; }
.tooltip-lightblue { --bs-tooltip-bg: var(--bs-lightblue); --bs-tooltip-color: #000; --bs-tooltip-opacity: 1; }
.tooltip-lightyellow { --bs-tooltip-bg: var(--bs-lightyellow); --bs-tooltip-color: #000; --bs-tooltip-opacity: 1; }
.tooltip-lightgray { --bs-tooltip-bg: var(--bs-lightgray); --bs-tooltip-color: #000; --bs-tooltip-opacity: 1; }
.tooltip-inner { max-width: 300px; }
.custom-tooltip { --bs-tooltip-bg: var(--bs-secondary); }


/* Accordion Core Styles */
.accordion .accordion-item .accordion-button b, .accordion .accordion-item .accordion-button span, .accordion-item .accordion-button em  { display: contents; }
.accordion .accordion-button { cursor: pointer; padding: 8px 12px 8px 16px; font-family: var(--font-secondary); font-size:1.2rem; }
.accordion .accordion-button:hover, .accordion .accordion-button:not(.collapsed) { background-color: var(--bs-accordion-active-bg); color: #000; border-radius: 0; }
.accordion .accordion-button::after { transition: transform 0.25s ease; }
.accordion .accordion-button:not(.collapsed)::after { transform: rotate(90deg); }
.accordion .accordion-button:hover:after { transform: rotate(90deg); }
.accordion .accordion-item { color: var(--bs-gray-800); }
/* accordion inner */
.accordion-item-inner .accordion-button i { padding-right: 1rem; }
.accordion-item-inner .accordion-button { font-family: var(--font-primary); font-size: 18px; font-weight: bold; }
.accordion-item .note { font-size: 15px; }
.accordion-item-inner .accordion-button:hover { background-color: var(--bs-accordion-active-bg); }
.accordion-item-inner .accordion-button:after {width: 1rem; height: 1rem; background-size: 1rem;}
.accordion-item-inner .accordion-item, .accordion-flush .accordion-item { margin-bottom:0; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; }
.accordion-item-inner .accordion-item:last-of-type, .accordion-flush .accordion-item:last-of-type { border-bottom: 0 !important;  }
.alert-light { --bs-alert-bg: var(--bs-gray-100); border: 1px solid #eee; color: #333; }

/* Bullets */
.bullets-check, .bullets-star, .bullets-cross, .bullets-arrow { padding-left:0; }
.bullets-check li, .bullets-star li, .bullets-cross li, .bullets-arrow li { list-style: none; margin-bottom: 1.2rem; }
.bullets-check li:before, .bullets-star li:before, .bullets-cross li:before, .bullets-star li:before, .bullets-arrow li:before  {
	display: inline-block;
	font-family: bootstrap-icons !important;
	font-style: normal;
	font-weight: normal !important;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: -.2rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 1.5em; /* same as padding-left set on li */ }
.bullets-check li:before { content: "\f26b"; color: var(--bs-green); }
.bullets-cross li:before { content: "\f623"; color: var(--bs-red); }
.bullets-star li:before { content: "\f586"; color: var(--bs-gold); }
.bullets-arrow li:before { content: "\f134"; }

/* Titles */
.title {
	font-family: var(--font-secondary);
    color: var(--bs-gray-700);
    font-size: calc(1.375rem + 1.5vw);
	line-height: 1.5;
    text-shadow: 1px 1px #fff;
	overflow: hidden;
    text-align: center;}

.sub-title {
	font-family: var(--font-secondary);
	color: var(--bs-gray-700);
	font-size: calc(1.3rem + .6vw);
	text-shadow: 1px 1px #fff;
	overflow: hidden;
    text-align: center; }

/* Down Arrow (Section Buttom arrow )*/
.arrow-down { width: 0; height: 0; border-style: solid;	border-width: 30px 30px 0 30px; margin: 0 auto; }
.arrow-down.small { border-width: 20px 20px 0 20px; }
.arrow-down.white { border-color: #ffffff transparent transparent transparent; }
.arrow-down.gray { border-color: #f1f1f1 transparent transparent transparent; }
.arrow-down.yellow { border-color: #ffc transparent transparent transparent; }
.arrow-down.lightyellow { border-color: #fff2a8 transparent transparent transparent; }
.arrow-down.red { border-color: #dc3545 transparent transparent transparent; }
.arrow-down.lightgreen { border-color: #dff0d8 transparent transparent transparent; }

.bounce { -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px);	}
}

/* Activating Animation */
.fade {	transition:opacity 0.15s linear !important; }
.collapsing { transition:height 0.35s ease !important; }
.custom-switch .custom-control-label::after {
	transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-transform 0.15s ease-in-out !important;
	transition:transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important;
	transition:transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-transform 0.15s ease-in-out !important;}
.custom-range::-webkit-slider-thumb { transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important; }
.custom-range::-moz-range-thumb { transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important; }
.custom-range::-ms-thumb { transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important; }
.custom-control-label::before,.custom-file-label,.custom-select { transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important; }
.badge { transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important; }
.progress-bar { transition:width 0.6s ease !important; }
.progress-bar-animated { -webkit-animation:progress-bar-stripes 1s linear infinite !important; animation:progress-bar-stripes 1s linear infinite !important; }
.modal.fade .modal-dialog {
	transition:-webkit-transform 0.3s ease-out !important;
	transition:transform 0.3s ease-out !important;
	transition:transform 0.3s ease-out,-webkit-transform 0.3s ease-out !important; }
.carousel-item {
	transition:-webkit-transform 0.6s ease-in-out !important;
	transition:transform 0.6s ease-in-out !important;
	transition:transform 0.6s ease-in-out,-webkit-transform 0.6s ease-in-out !important; }
.carousel-fade .carousel-item { transition-property: opacity !important; }
.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { transition: 0s 0.6s opacity !important; }
.carousel-control-prev,.carousel-control-next {	transition:opacity 0.15s ease !important; }
.carousel-indicators li { transition:opacity 0.6s ease !important; }
.form-control {	transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important; }
.btn { transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out !important; }

/* Scroll to top */
.scrolltop {
	transition: all .15s ease-in-out;
	position: fixed;
	bottom: 80px;
	right: 14px;
	visibility: hidden;
	background-color: #d0d0d07d;
	color: var(--bs-gray-700);
	padding: .5rem;
	border-radius: .25rem;
	line-height: 0;
	cursor: pointer;
	z-index: 9999; } 

/* Image Overlay Text */
.overlay-img {position: relative;max-width: 600px; margin: 0 auto;box-sizing: border-box; display: inline-block;}
.overlay-img img {vertical-align: middle;}
.overlay-img .caption {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 10px 0px;
	font-family: Arial;
	text-align: center;
	font-size: 16px;
	line-height: 1.4;
	font-weight: bold; }
.overlay-img .light {background: rgb(255, 255, 255);background: rgba(255, 255, 255, 0.6); color: #000000;}
.overlay-img .dark {background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.6);color: #f1f1f1;}
.image-notes { font-size: 13px; padding: 5px 0 20px 0 !important; color: #666; text-align: center; }


/* Misc */
.summary_accordion .accordion-item { margin-bottom: 10px; border-radius: 0 !important; border: 1px solid #ddd !important; }
.alert-light { --bs-alert-bg: var(--bs-gray-100); border: 1px solid #eee; color: #333; }
#exitpop .btn-close { background-color: #fff; }        

/* Media Query */
@media (min-width: 576px) { /* For Smaller Device sm */
}

@media (min-width: 768px) { /* For Medium Device md */
	.accordion .accordion-button { font-size:1.35rem; }
	.zoom { -webkit-transition: 0.6s ease; transition: 0.6s ease; position: relative; z-index: 888;}
	.zoom:hover { cursor: zoom-in;	z-index: 999;	transform: scale(1.7); }
}

@media (min-width: 992px) { /* For Large Device lg */
}

@media (min-width: 1200px) { /* For Extra Large Device xl */
	body { --bs-body-font-size:1.1rem; }
  	.title { font-size: 2.5rem; line-height: 1.35; }
  	.sub-title { font-size: 1.75rem; }
	.accordion-button { font-size: 1.5rem; }
}

@media (min-width: 1400px) { /* For Double Extra Large Device xxl */
}