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

Author: S. Ali Raza
Version: 1.2

Change Log:
28-06-26 At a Glance styles added
05-07-25 Animation
05-07-25 Header Random and Reviews slider CSS
09-06-24 Document recreate
10-16-24 Secondary Nav
*/

/* Header */
header .p-name { font-family: var(--font-secondary); font-size: calc(1.4rem + .5vw); font-weight: bold; line-height: 1; color: #666; }
header .p-title { font-family: var(--font-secondary); font-size: calc(1rem + .5vw); color: var(--bs-black); }
header h1 {	color: var(--bs-gray-600); }
header h2 {	color: var(--bs-gray-500); }
header h3 { color: var(--bs-gray-700); }
header .intro-img .img-thumbnail { max-width: 100%; }
header .bullets-check li,header .bullets-arrow li { margin-bottom: 0; }
header .bullets-check li:before { color: var(--bs-black); }

/* Image Slider Section / Bootstrap Carousel*/
.slider-thumb {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #888 #f1f1f1; }

/* Custom scrollbar styling with top padding */
.slider-thumb::-webkit-scrollbar { height: 6px; }
.slider-thumb::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.slider-thumb::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
.slider-thumb::-webkit-scrollbar-thumb:hover { background: #555; }
.slider-thumb img {
	max-width:50px;
	margin-right: .5rem;
	flex: 0 0 auto;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
	transition: border-color 0.3s; }

.slider-thumb img:hover { border-color: #0d6efd; }
.slider-thumb img.active { border-color: #0d6efd; }
.thumb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	z-index: 1;
	border: 1px solid #ddd;
	transition: all 0.3s; }

.thumb-arrow:hover { background: #f8f9fa; }
.thumb-arrow.left { left: 0; }
.thumb-arrow.right { right: 0; }
.thumb-arrow.disabled { opacity: 0.5; cursor: not-allowed; }
.slider-thumb img { cursor: pointer; opacity: .7; border: 1px solid #ddd; margin-right: 1rem; max-width: 70px;}
.slider-thumb img:hover { opacity: 1; }
.slider-thumb img:last-child { margin-right: 0; }
.slider-thumb img.active { opacity: 1; border: 1px solid var(--bs-link-color); }
.zoom-icon { position: absolute; bottom: 0; left: 25%; z-index: 15; width: 50%; padding-left: 0;  opacity: .5; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s;  }
.zoom-icon:hover { opacity: 1; }

/* Header Random Reviews */
#header_reviews h2 { font-size: 14px; font-weight: bold; color: var(--bs-black); }
#header_reviews .review-item p { font-family: Georgia, serif; font-style: italic; text-align: left;}

/* Reviews Slider */
#reviews_slider .carousel-item-next, #reviews_slider .carousel-item-prev, #reviews_slider .carousel-item.active { display: flex; margin-bottom: 1.5em; }
#reviews_slider .review { padding: 1rem; }
#reviews_slider h2 { font-size: var(--bs-body-font-size); font-weight: bold; color: var(--bs-black); }

.review-header .bi { color: var(--bs-gold); font-size: 1.4rem; vertical-align: 3px; }
.review-header a { border-bottom: 1px dashed; line-height: 1.3em; }
#reviews_slider .review p { font-size: 14px; }
#reviews_slider h2::after, #reviews_slider .review p::after {
    content: "*";
	color:#999;
	font-size:13px;
	vertical-align:top; }

.carousel-control-prev { left: -.5rem;; }
.carousel-control-next { right: -.5rem;; }
.carousel-control-next, .carousel-control-prev { color: var(--bs-link-color); font-size: 2rem; width: auto; }
.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover, .carousel-indicators li.active { color: var(--bs-link-hover-color); }
.carousel-indicators li, .carousel-indicators li:not(.active) { background-color: var(--bs-link-color);  }
.carousel-indicators li.active, .carousel-indicators li:hover:not(.active) { background-color: var(--bs-link-hover-color); }
.carousel-indicators { list-style: none; }

/* Guarantee */
.guarantee { max-width: 900px;}
.guarantee .guarantee_img { max-width: 100px; display: block; margin: 0 auto; }
.guarantee-title { font-family: var(--font-secondary); color: #171F3C; line-height: 1.5;}
.guarantee .seals { list-style: none; padding-left: 0; margin-bottom: 0; text-align: center;}
.guarantee .seals li { display: inline-block; margin:.5rem}
.guarantee .seals img { max-width: 60px; }

/* 	Packages */
.discount-expire { font-family: var(--font-secondary); }
#packages_container .card { border-radius: 0; }
#packages_container .card-header { background-color: var(--bs-border-color); border:0; border-radius: 0; text-align: center; font-size:1.1rem;}
#packages_container .card-header div { line-height: 1.2; margin-bottom: .5rem; font-size: 14px; }
#packages_container label { cursor: pointer; }
#packages_container label:hover { background-color: var(--bs-light); }
#packages_container input[type="radio"] { height: 1.2em; width: 1.2em; }
#packages_container .selected-option { background-color: var(--bs-lightyellow); }
#packages_container .selected-option:hover { background-color: transparent; }
.bottle-option { font-size: .85rem; position: relative; color: var(--bs-prmiary);}
.bottle-info { font-family: var(--font-secondary); color: var(--bs-dark-blue); font-size:1.18rem; display:block; font-weight: bold; line-height:1.2rem; }
sup { font-size: .7rem; }
.price { font-size:1.2rem; font-weight:bold; display:block; line-height: 1.2rem; }
.each { font-size: small; color: #aaa; font-weight: normal; }
.highlight-label { position: absolute; top: 0; transform: translate(-50%,-50%); left:50%; padding: 1px 10px; font-size: small; background-color: var(--bs-dark-blue); color: #fff; }
.strike-price { position: relative; font-weight:normal; color: #495057; font-size: 14px; }
.strike-price:before { 
	border-bottom: 1px solid var(--bs-red);
	position: absolute;
	content: "";
	width: 100%;
	transform: translate(-50%,-50%)!important;
	top: 50%;
	left: 50%; }

/* Video FAQ*/
.play-icon i { font-size: 5rem; color: var(--bs-red); opacity: .5; transition: 0.3s; }
.play-icon:hover i { opacity: 1; }

/* Everything at a Glance Section */
.ataglance-list .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    background-color: #fff;
    color: inherit;
    text-decoration: none;
    border-left: none;
    border-right: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer; }

.ataglance-list .list-group-item:hover {  background-color: #dbeafe; color: var(--bs-primary); }

.ataglance-list .list-group-item i { font-size: 1rem; flex-shrink: 0; margin-left: 1rem; }

/* Sub Sections */
.sub-section .col { padding: 0; }
.sub-section .col .sub-title { margin-bottom:0; }

/* Sezzle Styles */
.sezzle img { height: 18px; }
#sezzleModal .sezzle_logo { height: 50px; width: auto; }
#sezzleModal .close { margin-left: 97%; cursor: pointer; }
.installment { height: 110px; }
#sezzleModal h3 { font-size: 24px; }
#sezzleModal .just-select-sezzle { font-size: 23px;	font-weight: 700; color: #037269; margin-top: 40px; margin-bottom: 50px;}
#sezzleModal .terms { margin: 10px auto; font-size: 12px; line-height: 17px; }
#sezzleModal .sezzle_bullets { font-weight: 600; }
#sezzleModal .sezzle_bullets span { font-weight: normal; font-size: 14px; }

/* Animated Circle */
.progress-circle {
	width: 65px;
	height: 65px;
	border-radius: 50%;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 20px;
	background: conic-gradient(#e9ecef 100%, #e9ecef 0);
	transition: background 0.3s ease-in-out;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s, transform 0.5s;      }

.progress-circle::before {
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: white;
	border-radius: 50%; }

.progress-value { position: relative; font-size: 1.1rem; font-weight: bold; color: #198754; }

.progress-circle.visible { opacity: 1; transform: translateY(0); }

/* Reusable fade animation classes */
.fade-in, .fade-left, .fade-right, .fade-top, .fade-bottom { opacity: 0; transition: opacity 1s ease, transform 1s ease; will-change: opacity, transform;}
.fade-in { transform: none; }
.fade-left { transform: translateX(-50px); }
.fade-right { transform: translateX(50px); }
.fade-top { transform: translateY(-50px); }
.fade-bottom { transform: translateY(50px); }
.fade-visible { opacity: 1; transform: translate(0); }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* Misc */
.tooltip-primary .tooltip-inner { max-width: 500px !important; 	white-space: normal; }
.alert-coupon { z-index: 2000; } #order { scroll-margin-top: 50px; }

/* Adjust for touch devices Header Thumbnail slider arrow*/
@media (hover: none) {
	.thumb-arrow { top: calc(50% - 3px); }
}

/* Media Query */
@media (min-width: 576px) { /* For Smaller Device sm */
	#packages_container input[type="radio"] { height: 1.5em; width: 1.5em; }
	.guarantee .seals img { max-width: 70px; }
}

@media (min-width: 768px) { /* For Medium Device md */
    header .slider-container { margin-top: -11rem; }
	.review-header .bi { font-size: 1.7rem; }
	.guarantee .seals img { max-width: 80px; }
	.sub-section .col { padding: 2.5rem; } 
	.video-section .col { padding-left: 2.5rem; padding-right: 2.5rem; }
	.ataglance-list .list-group-item { font-size: 1.35rem; }
	.sub-section .col:nth-child(odd) { border-right: 1px solid #ddd; }
	.sub-section .col:nth-child(1), .sub-section .col:nth-child(2) { border-bottom: 1px solid #ddd; }
	.sub-section img { max-width: 150px; max-height: 150px; display: block; margin: 0 auto; }
	.progress-circle { width: 80px; height: 80px; }
	.progress-circle::before { width: 72px; height: 72px; }
	.progress-value { font-size: 1.5rem; }
	.me-md-n5, .mx-md-n5 { margin-right: -3rem !important; }
	.ms-md-n5, .mx-md-n5 { margin-left: -3rem !important; }
}

@media (min-width: 992px) { /* For Large Device lg */
    header .slider-container { margin-top: -7rem; }
	header .intro-img .img-thumbnail { max-width: 230px; }
	.slider-thumb img { max-width: 100px; }
	.review-header .bi { font-size: 1.8rem; }
	.slider-thumb img { max-width:60px; }
	#header_reviews h2 { font-size: 14.5px; }
	.me-lg-n2, .mx-lg-n2 { margin-right: -.5rem !important; }
	.ms-lg-n2, .mx-lg-n2 { margin-left: -.5rem !important; }
}

@media (min-width: 1200px) { /* For Extra Large Device xl */
    header .slider-container { margin-top: -9rem; }
	header .p-name { font-size:2rem; }
	header .p-title { font-size:1.6rem; }
	header .intro-img .img-thumbnail { max-width: 250px; }
	.review-header .bi { font-size: 2rem; vertical-align: 4px; }
	.slider-thumb img { max-width:70px; }
	#header_reviews h2 { font-size: 15px; }
	.ms-xl-n5, .mx-xl-n5 { margin-left: -3rem !important; }
}

@media (min-width: 1400px) { /* For Double Extra Large Device xxl */
	header .intro-img .img-thumbnail { max-width: 300px; }
}