@charset "utf-8";
/* CSS Document */
:root {
	--anchor: #ccc;
	--anchorH: #fff;
	--sectionVPadding: 80px;
	--primaryColor: #0e8492; /*#447684; */
	--primaryHover: rgba(33,84,112,1);
	--secondaryColor: grey;
	--secondaryHover: #333;

  	--hlogo-minHeight: 40px; /*60*/
	--hlogo-maxHeight: 60px; /* 100 */
	--header-minPadding: 10px;
	--header-maxPadding: 10px;
	--header-minHeight: calc(var(--hlogo-minHeight) + (var(--header-minPadding) * 2));
	--header-maxHeight: calc(var(--hlogo-maxHeight) + (var(--header-maxPadding) * 2));

	--blue: #0345BF;
	--dkBlue: #0066cc;
	--Green: #007700;
	--dkGreen: #005100;
}


/* top bar */
	#sp-top-bar .sp-module  {margin:0 auto !important;}
	.sp-contact-info li {margin:0 auto !important; display:block;}
	#sp-top-bar .fab, #sp-top-bar .fas, #sp-top-bar .far, #sp-top-bar a {
		font-size: 14px;
		color: var(--secondaryColor);
		margin-top: 2px;
		padding: 7px 0;
	}
	#sp-top-bar ul.sp-contact-info li span.fas,
	#sp-top-bar ul.sp-contact-info li span.far {
		color:var(--secondaryColor); margin-left:0;}
	#sp-top-bar ul.sp-contact-info li span.fas:hover {color:var(--secondaryHover);}
	#sp-top-bar ul.sp-contact-info li a {font-family: 'Lato', sans-serif; font-weight:500; text-transform: uppercase; text-decoration:none;}

/* header */
	#sp-header {
		
		background-color: white;
		border-bottom: 2px solid rgba(0,0,0,.3);
		box-shadow: 0 0 15px rgba(0,0,0,.5);
	}
	.logo-image {
	  height: 100px !important;
	  display: block !important;
	  margin: auto;
	}
	#sp-header .title {font-family: 'Lato', sans-serif;font-size: 72px;}
	#preheader {padding: 60px 0; border-top:1px solid grey;}
	#preheader .info {font-family: 'Lato'; font-size:16px; text-transform:none; text-align:center; font-weight:400; color:grey; margin-top:5px;}
	#preheader .info .larger {display:block; font-size: 26px; text-transform:uppercase;}
	
/* title */
	#my-title {
		position:relative;
		padding:120px 15px;
		text-align:center;
		color:white;
		overflow: hidden;
		text-shadow: 3px 3px 15px rgba(0,0,0,.5);
		background-color: rgba(102,153,102,.3);}

	.video-background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1; /* Ensures video stays behind the content */
	}

	.video-background video {
		width: 100%;
		height: 100%;
		object-fit: cover; /* This ensures that the video covers the area, similar to background-size: cover for background images. */
	}

	.social-icons li a span {
		color: var(--secondaryColor) !important;
		font-size: 1.4em;
	}
	.social-icons li a span:hover, #sp-top-bar a:hover {
		color: var(--secondaryHover);
	}

	/* header animation */
		#sp-header, #sp-header .logo, #sp-header .logo-image, .sp-megamenu-parent > li > a {transition:all .75s ease-out;}
	  /*container */
		#sp-header, #sp-header .logo {height: var( --header-maxHeight );}
		#sp-header.header-sticky, #sp-header.header-sticky .logo {height: var( --header-minHeight );} 
		#offcanvas-toggler {transition:all .75s ease-out;}
	  /* logo */
		#sp-header .logo-image {height: var(--hlogo-maxHeight) !important; padding-left:5px;}
		.logo-image-phone {height: var(--hlogo-maxHeight) !important;}
		#sp-header.header-sticky .logo-image-phone {height: var(--hlogo-minHeight) !important;}
		#sp-header.header-sticky .logo-image {height: var(--hlogo-minHeight) !important;}
	  /* offcanvas toggler */
		.header-sticky  #offcanvas-toggler {height: var(--header-minHeight); line-height: var(--header-minHeight);}
	  /* menu items */
		.sp-megamenu-parent > li > a {line-height: var(--header-maxHeight);}
		.header-sticky .sp-megamenu-parent > li > a {line-height:var(--header-minHeight);}
		#sp-header.header-sticky.hide {
			top: -100px;
		}	  
	  
/* menu */
	#sp-header .sp-megamenu-parent > li > a, #sp-header .sp-megamenu-parent > li > span, .offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span, .offcanvas-menu .offcanvas-inner a {
 
		font-size: 1.2em;
		font-weight: 400;
		color: var(--secondaryColor);
		text-decoration:none;
		opacity:1 !important;
	}
	#sp-header .sp-megamenu-parent > li > a, .offcanvas-menu a {font-family: 'Lato', sans-serif;font-weight:400; font-size: 1.2em !important;}
	#sp-header .sp-megamenu-parent > li > a:hover,
	#sp-header .sp-megamenu-parent > li > span:hover,
	.offcanvas-menu .offcanvas-inner ul.menu > li a:hover,
	.offcanvas-menu .offcanvas-inner ul.menu > li span:hover {
		color: var(--secondaryHover);
	}
	#sp-header .sp-megamenu-parent > li.active > a,
	.offcanvas-menu .offcanvas-inner ul.menu > li.active a,
	.offcanvas-menu .offcanvas-inner ul.menu > li.active a:hover {
		color: var(--secondaryHover) !important;
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
		text-decoration-color: #099 !important;
		cursor:default;
	}
/* off canvas */
	.sp-contact-info li[class^="sp-contact-"] {
		font-size: 1.2em;
		color: var(--secondaryHover) !important;
		font-weight: 400;
		margin-left:10px;
	}
	.offcanvas-menu .fas, .offcanvas-menu .far {color: var(--secondaryColor) !important;}
	.offcanvas-menu .fas:hover, .offcanvas-menu .far:hover {color: var(--secondaryHover) !important;}
	.offcanvas-menu .offcanvas-inner a:hover {color: var(--secondaryHover) !important;}
	.offcanvas-menu .offcanvas-inner ul.menu > li a {
		padding: 15px 0;
	}

	.offcanvas-menu .social-icons li a span:hover {
		color: var(--secondaryHover) !important;}
	.offcanvas-menu a img {height:60px !important; width:auto;}
	.offcanvas-menu .social-icons li a span {font-size: 2em;}
	

/* content */
	#sp-main-body {padding:0 !important;}
	#sp-main-body .container {max-width:100%; padding:0 !important;}
	#sp-user1, #sp-user2, #sp-contact {padding: var(--sectionVPadding) 0 !important;}
	#sp-notification {padding:20px 0 !important; background-color:rgba(33,84,112,1);;}
	#sp-notification p {margin-bottom:0; color:#ddd; text-align:justify; font-size:.7em;}
	#sp-footer {background-color:rgba(33,84,112,1);}
  /* social */
	  .article-social-share .social-share-icon ul li a {
		  background-color: var(--primaryColor);
		  color: white;
		  border:2px solid black;
	  }
	  .article-social-share .social-share-icon ul li a:hover {
		  background-color: white;
		  color: var(--primaryColor);
		  border:2px solid var(--primaryColor);
	  }
  /* home contact */	

h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif;
	text-decoration: none;
	font-weight:300 !important;	
}

h1 {
	margin: 0 auto 40px !important;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.1em;
	text-align: center;
	padding-bottom: 0;
	color: #FFF;
	text-shadow: 0 0 15px rgba(0,0,0,.2)
}
h1 span.larger {
	display: block;
	line-height:1.4em;
	font-weight: 300;
	font-size: 42px;
	color: white;
	text-transform:uppercase;	
}
h2 {font-size:2.4em; text-align:center; font-weight:300 !important; text-transform:uppercase; margin-bottom:60px;}
h3 {font-size:2.0em;}
h4 {font-size:1.8em;}
h5 {font-size:1.6em;}
h6 {font-size:1.4em;}
p {font-size:16px; font-weight:300; text-align:justify;}
p.lead {
	font-size: 140%;
	font-weight: 500;
	color: #333;
}
strong {font-weight:600;}
a {color: var(--primaryColor); text-decoration:underline; font-weight:600;}
a:hover {color: var(--secondaryHover); text-decoration:underline;}

#sp-main-body section {padding:80px 15px;}

/*section#about {background-color:rgba(0,255,255,.2);}*/
section#about {background-color:rgba(243,199,207,.6);}
section#about {background:rgba(243,199,207,.5) url(../../../images/Harmonic-Health-and-Beauty-Rose-Petals-transparent.png) no-repeat; background-position:bottom 3% right 3%; background-size: 35%;}
section#about img {margin:auto;}
section#services {background-color:rgba(33,84,112,1); color:white;} 
section#services h3, section#services strong {color:rgba(153,255,255,1);}
section#services h3{text-decoration:underline; }
section#services p.lead {color:white; font-size:140% !important; font-weight:500 !important;}
section#services p.lead {color:#eee;}
section#services li {text-align:justify;}
section#services i {font-size:6em; float:right; padding:0 0 10px 20px;}
section#services .card {color:var(--secondaryColor); text-align:center;}
section#services .card h5 {text-transform:uppercase; font-weight:500 !important;}
section#services .card-text {font-weight:400 !important;}
section#services .small {font-weight:400 !important; text-align:center;}
section#message {background-color:rgba(0,255,255,.2);}
section#message .well {
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	background-color:white;
	padding:15px 10px;
	border:1px solid rgba(0,0,0,.3);
	box-shadow:0 0 10px rgba(0,0,0,.5);}

section#message .testimonial {padding:30px 40px !important; color:#777 !important;  text-align: center !important; font-style:italic;}
section#message .testimonial .small {font-size:12px; font-weight: bold; margin-top:10px !important;}
section#message img{display:block; margin-right:-10px;}
section#message p.lead {font-size:3em;}
section#message .separator {font-size:normal; text-align: center; color:#aaa;}

section#message p {font-size:1.1em; padding: 0; margin:0 !important; font-weight:400; text-align: center !important;}
section#contact {background-color:#0e8492; color:white;}
section#contact p {color:white;}
section#contact [class^="col-"] {display:block; text-align:center;}
section#contact .logo {display:block; margin:auto; width:30%;}
section#contact .title {padding:10px 0; text-transform:uppercase; font-size:130%; margin-bottom:20px;}
section#contact a.btn {display:block; margin:0 auto; text-align:center; width:80%;}
section#contact .btn-warning {background-color: white; color:rgba(33,84,112,1); border: 1px solid rgba(33,84,112,1); font-weight:600;}
#map {text-align:center;}
.map.row {height: 300px; filter: grayscale(1); transition:all .7s ease;}
.map.row:hover {filter: grayscale(0);}

/* Contact section */
	#sp-contact {
	  background: url("../../../images/Glenard-Roos-Water-Drop-BG.jpg") center bottom no-repeat, linear-gradient( #000000 0%, #004d87 50% );
		background-size: auto, auto;
	  background-size: 100% auto;
	  color: white !important;
	  text-align: center;
	}
	
	#sp-contact h2, #sp-contact p {
		color: white;
		text-shadow: 3px 3px 3px rgba(0,0,0,.7);
	}
	#sp-contact .btn {
		width: 90%;
		text-shadow: none !important;
		box-shadow: 3px 3px 3px rgba(0,0,0,.7);
	}
/* Bottom Section */
	#sp-bottom .sp-module {
		margin-bottom: 40px;
	}
	#sp-bottom .sp-module .sp-module-title {
		font-family: "Arial Narrow", sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
		font-weight: 700;
		font-size: 2em;
		margin: 0 0 30px;
		color: #fff;
		border-bottom:3px solid #fff;
	}
	#sp-bottom .menu > li a, #sp-bottom p, #sp-bottom2 li {
		display: block;
		font-size: 1.3em !important;
		padding: 0;
		color: #eee;
	}
	#sp-bottom .menu > li a {color: var(--secondaryColor);}
	#sp-bottom .menu > li a:hover {color: var(--secondaryHover);}
	#sp-bottom .menu > li.active a {
		color: white;
		text-decoration: underline var(--secondaryColor);
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
		cursor:default;}
	#sp-bottom .sp-module ul.menu > li{
		display: block;
		margin-bottom: 4px;
		width: 33%;
		text-align: left;
	}

	#logo-bottom .phone {font-weight:600;}
	#logo-bottom {display:block; text-align:center; margin:auto;}
	#logo-bottom img {max-width:80%; margin:0 auto 20px;}
	
	
/* Footer Section */
	#sp-footer .container-inner {padding: 15px 0; border-color: rgba(255, 255, 255, 0.3)}
	.sp-copyright, .sp-webdesign {
		display:block;
		font-family: "Arial Narrow", sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
		font-size:1.2em;
		text-align:center;}
	#sp-footer a {color: #0e8492 !important; text-decoration:none; font-weight:600;}
	#sp-footer a:hover {color: #fff !important;}

/* contact us page */
  /* address icons */
	.fa, .fab, .fad, .fal, .far, .fas, .icon-joomla, [class*=" icon-"], [class^="icon-"] {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		line-height: 1;
	}
	#address i.fa, #hours i.far, .media i.fas {
		font-size: 1.5rem !important;
		margin: 2px 7px 0 0 !important;
		vertical-align: top;
	}
	.media-body {
		-ms-flex: 1;
		flex: 1;
		display: inline-block;
	}
	#address h5 {
		font-family: "Arial Narrow", sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
		font-stretch: extra-condensed;
		text-transform: none;
		font-size: 1.5rem;
	}
  /* contact form */
	.contact-form {
	  background-color: rgba(0,0,0,.2);
	  padding: 20px 15px;
	  border: 1px solid rgba(0,0,0,.2);
	}
	#contact-form legend {
		text-transform: uppercase;
		font-weight: bold;
		font-size: 2em;
	}
	.form-horizontal .controls {
	  margin-left: 0;
	}	
	
/* classes */
	.red, .star {font-weight:bold; color:red;}
	.img-responsive {
		width: 100%;
		height: auto;
	}
	.extends {width:100%;}
	.lowercase {text-transform:lowercase;}
	.btn-primary {
		background-color: var(--primaryColor);
		padding: 8px 15px !important;
		text-decoration:none;
		font-weight:600;
		border: 1px solid #ddd;
		color: #ddd !important;
	}
	.btn-primary:hover {
		background-color: var(--primaryHover);
		text-decoration:none;
		border: 1px solid white;
		color: white !important;
	}


@media screen and (min-width: 576px) {
	:root {	--hlogo-maxHeight: 60px; /* 100 */}
	#sp-main-body .com-content-article__body section .container {max-width:570px;}
	section#about {background-position:bottom 3% right 3%; background-size: 20%;}
	h1 {line-height:2.2em;}
	#sp-contact .btn {width: 70%;}
	#logo-bottom img {max-width:70%;}
	.contact-form {padding: 20px 40px;}
}
@media screen and (min-width: 768px) {
	.sp-contact-info li {margin: 0 auto !important; display: inline-block;}
	#sp-top-bar ul.sp-contact-info li span.fas,
	#sp-top-bar ul.sp-contact-info li span.far {
		margin-left:10px;}
	#sp-main-body .com-content-article__body section .container {max-width:720px;}
	#sp-contact .btn {width: 90%;}
	.sp-copyright {text-align:left;}
	.sp-webdesign {text-align:right;}
	#sp-bottom .sp-module ul.menu > li{width: 50%;}
}
@media screen and (min-width: 992px) {
	#sp-main-body .com-content-article__body section .container {max-width:960px;}
	section#about {background-position:bottom 8% right 3%; background-size: 20%;}
	h1 {font-size: 32px;}
	h1 span.larger {font-size: 52px;}
	#sp-contact .btn {width: 70%;}
	#logo-bottom img {max-width:80%;}
}
@media screen and (min-width: 1200px) {
	#sp-main-body .com-content-article__body section .container {max-width:1140px;}
	h1 {font-size: 32px;}
	h1 span.larger {font-size: 72px;}
	#sp-contact .btn {width: 50%;}
	#logo-bottom img {max-width:70%;}
}

@media screen and (min-width: 1400px) {
	#sp-main-body .com-content-article__body section .container {max-width:1320px;}
	
}