@charset "utf-8";
/* CSS Styles for HFL Home page
 Auther: Syed Ali Raza
 Document Created: 11-29-22
 
 Change Log:
 11-29-22 Document Created

 */


/* ===========================
	Header
===========================*/

#home-page header {
	background-image: url("https://hfl.s3.amazonaws.com/images/webp/ingredients-bg.webp");
	background-size: cover;
	background-position: center;}	

#home-page header h2 {
	background-color: #fff;
    padding: 0;
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    color: #000;
    text-shadow: 1px 1px #fff;}

#home-page header h2 .reg { font-size: 50%; font-weight: 300; vertical-align: super; }
#home-page header b, #home-page header strong { font-weight: 600; color: #60a321; }
#home-page header img { border: 4px solid #fff; }

#home-page header .carousel-indicators h2 { cursor: pointer; opacity: .5; transition: opacity .6s ease; color:#000; width: auto; height: auto;	text-indent: 1px; background-clip: initial; }
#home-page header .carousel-indicators .active { opacity:1; }
#home-page header .carousel-indicators h2:nth-child(2) { margin: 0 10px; }


/* =====================
   Guarantee section
========================*/
.guarantee { max-width: 910px; }
.guarantee .guarantee_img { max-width: 250px; }
.guarantee-title { 	background-color: #171F3C;	color: #fff !important; padding: 20px; text-shadow: none !important;}
.guarantee-title span { border-bottom: 2px solid #F2B713; }
.guarantee-title b { color: #F2B713; }

/* =====================
   Health Category section
========================*/
.health-cat:hover { text-decoration: none; }
.health-cat:hover h4 { background-color: #60a321; color: #fff;}	
.health-cat .icon {
	background-color: #fff;
	width: 100px;
	border-radius: 50%;
	border: 2px solid #60a321;
	margin: 0 auto;
	position: relative;}	

.health-cat h4 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 26px;
    line-height: 1.4;
    background-color: #fff;
    color: #60a321;
    text-align: center;
    padding: 48px 10px 10px 10px;
    margin-top: -50px;
    border: 2px solid #60a321;
    border-radius: 8px;
    margin-bottom: 40px;}

/* =====================
   Why HFL Popular
========================*/	
#whyhfl_section { font-family: 'Roboto Condensed', sans-serif; text-align: center; }
#whyhfl_section img { max-height: 100px; }
#whyhfl_section .col-auto { max-width: 200px; border-right: 1px solid #EBE9EA; margin-top: 30px; }
#whyhfl_section .col-auto:last-child { border-right: none; }
#whyhfl_section h4 { font-size: 20px; line-height: 1.4; font-weight: 600; margin-top: 10px; }
#whyhfl_section .why-icons p { font-size: 16px; }

/* =====================
   Why Choose us
========================*/	
#whychooseus_section h3 { font-size: 22px; }
#whychooseus_section p { font-size: 16px; }
#whychooseus_section h3 img { max-width:50px; padding-right: 4px;}
#whychooseus_section .home-ingredient-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); }


/* =====================
   Misc
========================*/
.absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); }

.btn-success { background-color: #60a321; border-color: #5a991e; }
.btn-success:hover { background-color: #5a991e; border-color: #5a991e;}

.by-dsr img { max-width: 100px; }

@media (min-width: 768px) {
	.me-md-n5, .mx-md-n5 { margin-right: -3rem !important; }
	.ms-md-n5, .mx-md-n5 { margin-left: -3rem !important; }
}

@media (min-width: 992px) {
	.me-lg-n2, .mx-lg-n2 { margin-right: -.5rem !important; }
	.ms-lg-n2, .mx-lg-n2 { margin-left: -.5rem !important; }
	
}

@media (min-width: 1200px) {
	.me-xl-n5, .mx-xl-n5 {  margin-right: -3rem !important; }
	.ms-xl-n5, .mx-xl-n5 { margin-left: -3rem !important; }
}	

@media (max-width: 1199px) {

	.health-cat h4 { font-size: 22px; }
	#home-page header h1 { font-size: 40px; }
	#home-page header h2 { font-size: 30px; }
	.btn-success { font-size: 19px; }
}

@media (max-width: 991px) {
	#whychooseus_section .home-ingredient-img { position: inherit; top: inherit; left: inherit; transform: none; text-align: center; }
	.reivew_slide { border: none !important; margin-left: 0!important; margin-right: 0!important; }
	.review_title { font-size: 36px; }
	#home-page header h1 { font-size: 36px; }
	#home-page header h2 { font-size: 28px; }
	.btn-success, .btn-primary { font-size: 18px; }
}

@media (max-width: 767px) {
	#home-page header {	background-image: url("https://hfl.s3.amazonaws.com/images/webp/ingredients-bg-m.webp"); }
	.review_title { font-size: 30px; }
	.health-cat .icon { width:80px; }
	.health-cat h4 { font-size: 18px; margin-top:-40px;}
	#home-page header h1 { font-size: 32px; }
	#home-page header h2 { font-size: 26px; }
	.btn-success, .btn-primary { font-size: 17px; }
}

@media (max-width: 575px) {
	.health-cat-desktop { display: none; }
	#home-page header h1 { font-size: 28px; }
	.review_title { font-size: 26px; }
	#home-page header h2 { font-size: 24px; }
	#guarantee_section .title { line-height: 1.5em; }
	.btn-success, .btn-primary { font-size: 16px; }
	#whyhfl_section .col-auto { border-right: none; }
	#whyhfl_section h4 { font-size: 16px; }
    #health_cat_modal .modal-header .btn-close { position: absolute; top: 1rem; right: 1rem; }
}

@media (max-width: 360px) {
	#whyhfl_section h4 { font-size: 15px; }
	#whychooseus_section h3 { font-size: 20px; }
	#home-page header h2 { font-size: 23px; }
}

@media (max-width: 340px) {
	#whychooseus_section h3 { font-size: 19px; }
	#reviews .title { font-size:25px; }
}

@media (max-width: 320px) {
	#reviews .title { font-size:24px; }
	#whychooseus_section h3 { font-size: 18px; }
}