@charset "utf-8";
/* CSS Document */
:root {
	--anchor: #ccc;
	--anchorH: #fff;
	--sectionVPadding: 60px;
	--primaryColor: #ffc107;
	--primaryHover: white;
	--secondaryColor: #3366cc;
	--secondaryHover: #6699cc;

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

	--blue: #0345BF;
	--dkBlue: #000055;
	--Green: #007700;
	--dkGreen: #005100;
}
html {
  scroll-behavior: smooth !important;
}
.home-custom-bg .article-full-image {display:none;}
/* top bar */
	#sp-top-bar .sp-module {margin: 0 0 0 0;}
	#sp-top-bar {background-color:#000000; padding: 6px 0;}
	#sp-top-bar .fab, #sp-top-bar .fas, #sp-top-bar .far, #sp-top-bar a {
		font-size: 20px;
		color: var(--primaryColor);
	}
	#sp-top-bar a:hover {color:white; fill:white;} 
	#sp-top-bar ul.sp-contact-info li span.fas,
	#sp-top-bar ul.sp-contact-info li span.far {
		color:var(--anchor); margin-left:10px;}
	#sp-top-bar ul.sp-contact-info li span.fas:hover {color:var(--anchorH);}
	#sp-top-bar ul.sp-contact-info li a {font-family: "Arial Narrow", sans-serif, "Helvetica Neue", "Lucida Grande", Arial;}
/* header */
	#sp-header {
		background-color: var(--dkBlue); /* transparent; */
		border-bottom: 2px solid transparent;
		box-shadow: 0 0 15px transparent;
		height:auto;
		padding:var(--header-maxPadding);
		position:relative;
		margin-bottom:0;	
	}

	/*#sp-header .container {background-color:rgba(0,0,0,.5);}*/
	.home-custom-bg #sp-header {background-color: var(--dkBlue); margin-bottom:0;}
	.home-custom-bg #sp-header.header-sticky {margin-top:0;}
	.social-icons li a span {
		color: gold;
		font-size: 1.4em;
	}
	.social-icons .icon {
		fill: var(--primaryColor);
		font-size: 1.4em;
		width:20px;
		transition: all .5s ease;}
	ul.social-icons > li:not(:last-child) {
		margin-right: 10px;
	}
	.social-icons li a span:hover, #sp-top-bar a:hover, .social-icons .icon:hover {
		color: while !important;
		fill: white !important;
		scale: 1.4 1.4;
	}

	/* 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 );}*/
		.home-custom-bg #sp-header.header-sticky, #sp-header.header-sticky {
			background-color: rgba(0,0,0,1);
			box-shadow: 0 0 15px rgba(0,0,0,.7);
			border-color:rgba(255,0,0,.5);
			height:auto;
			padding: var(--header-minPadding);
		}
		#sp-header.header-sticky .logo {height:var(--hlogo-minHeight);} /* var( --header-minHeight ) */
		#offcanvas-toggler {transition:all .75s ease-out;}
	  /* logo */
		#sp-header .logo-image {
			height: var(--hlogo-maxHeight) !important;
			width:auto;}
		.logo-image-phone {height: var(--hlogo-maxHeight) !important;}
		#sp-header.header-sticky #sp-logo.my-auto {margin:0 !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(--hlogo-minHeight); line-height: var(--hlogo-minHeight);}

/* menu */
	#sp-header .row {--bs-gutter-x: 0rem;}
	#sp-header.header-sticky.hide {top: -120px; padding:0;}
	.burger-icon {width:15px;}
	.burger-icon > span {background-color: #FFF !important;}
	body.ltr #offcanvas-toggler.offcanvas-toggler-right {
	  float:right;
	  margin-left: 10px;
	}
	/* li */
	#sp-header .sp-megamenu-parent > li {margin:30px 4px 0; transition: all .75s ease;} /* line-height: var(--header-maxHeight); */
	#sp-header .sp-megamenu-parent > li:first-child {margin-left:0;}
	#sp-header.header-sticky .sp-megamenu-parent > li {margin: 0 4px 0;}
	#sp-header.header-sticky .sp-megamenu-parent > li:first-child {margin-left:0;}
	
	/* a */
	#sp-header .sp-megamenu-parent > li > a {background-color:transparent; line-height:17px; padding:8px 10px; text-shadow:2px 2px 5px black;}
	#sp-header.header-sticky .sp-megamenu-parent > li > a {background-color:black;}
	.header-sticky .sp-megamenu-parent > li > a {line-height:var(--header-minHeight);}
	
	#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 {
		/*font-family: eurostile !important;	*/
		font-family: "Arial Narrow", Arial, Helvetica, sans-serif;	
		text-transform:uppercase;
		font-size: 16px;
		font-weight: normal;
		color: #FFF;
		background-color: rgba(0,0,0,.5);
	}
	#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(--primaryColor) !important;
		text-decoration: underline var(--primaryColor);
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
	}
	#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(--primaryColor) !important;
		text-decoration: underline red;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
		cursor:default;}
		
	/* scrollSpy */
	#sp-bottom .menu a.hideHeader {display:none !important;}
	.sp-megamenu-parent li a.active,
	.sp-megamenu-parent li:hover a.active,
	#sp-bottom .menu li a.active,
	#sp-bottom .menu li:hover a.active {
		background: var(--primaryColor) !important;
		color:black !important;
		text-shadow:none !important;
		text-decoration:none !important;
		cursor:default;
	}
	/* dropdown menu */
	.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {background-color: #000; background: #000; border:1px solid rgba(255,255,255,.5);}
	.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a {
		font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
		color:white;
		line-height:22px;}
	.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a:hover,
	.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li.active a,
	.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li.active a:hover {
		
		color: var(--primaryColor);}
	.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li a:hover {
		text-decoration: underline var(--primaryColor);
		text-decoration-thickness: 1px;
		text-underline-offset: 6px;		
	}
	.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner li.active a {
		text-decoration: underline red;
		text-decoration-thickness: 1px;
		text-underline-offset: 6px;}



/* off canvas */
	.offcanvas-menu {
		background: black;
		border-left:gold 2px solid;}
		.offcanvas-menu .offcanvas-inner {border-top: 1px solid #999; padding: 10px 25px;}
/*	.sp-contact-info li[class^="sp-contact-"] {
		font-size: 1.5em;
		color: #fff;
		font-weight: normal;
		margin-left:10px;
	}*/
	.offcanvas-menu .offcanvas-inner a,
	.offcanvas-menu .offcanvas-inner ul.menu > li a {
		font-family: eurostile !important;
		font-size:18px;
		font-weight:normal;
		color:white;
		text-decoration:none;
		padding: 7px 0 !important;
	}
	.offcanvas-menu .offcanvas-inner a:hover,
	.offcanvas-menu .offcanvas-inner ul.menu > li a:hover {
		color: var(--primaryColor) !important;
	}
	/* icons */
	.offcanvas-menu .social-icons li a span,
	.offcanvas-menu li .fas,
	.offcanvas-menu li .far {
		color: white !important;
		font-size: 18px;
		opacity: .7;
		margin-right:7px;}
	.offcanvas-menu .social-icons li a span:hover,
	.offcanvas-menu li:hover .fas,
	.offcanvas-menu li:hover .far {
		color: var(--primaryColor) !important; opacity:1;}
	.offcanvas-menu a img {height:65px !important; width:auto;}
	.offcanvas-menu .spacer,
	.offcanvas-menu .social-icon-envelope,
	.offcanvas-menu .social-icon-phone {
		display:none;}
	.sp-contact-info li.sp-contact-phone,
	.sp-contact-info li.sp-contact-email {
	    display: inline-block;
    }
	
/* slideshow */
	section#sp-slider {
		background: url(../../../images/slideshow/Digital-Buddha-Slideshow-BG.png) top center repeat;
		background-size: 100% auto;}
/* content */
	body {
		/*background: #000 url(../../../images/mat-tile.png) top center repeat-y; background-size: 100% auto;*/
		background: #eee url(../../../images/textureBG.png) repeat; color:#333;
		position:relative !important;}
	body.home-custom-bg {
	  /*background: 
		url(../../../images/Digital-Buddha-Web-Design_Calgary-Background.jpg) top center no-repeat,
		url(../../../images/floor-tile.png) bottom center repeat-y;
	  background-size: 100% auto, 100% auto;
	  background-color: #000;&*/
	  }
	
	/*#sp-main-body {position:relative; padding:200px 0 60px;}
	body.home-custom-bg #sp-main-body {padding:30px 0 60px;}*/
	
	#sp-main-body, #sp-main-body section, #sp-services, #sp-about, #sp-user1, #sp-user2, #sp-contact, #sp-bottom {padding: var(--sectionVPadding) 0 !important;}
	#sp-main-body h2, #sp-services h2, #sp-about h2, #sp-user1 h2, #sp-user2 h2, #sp-contact h2 {
		font-style:italic;
		text-transform:uppercase;
		text-align:center;
		text-decoration:underline orange;
		text-decoration-thickness:3px;
		text-underline-offset:5px;
		text-shadow: 3px 3px 3px rgba(0,0,0,.7);
	}
	#sp-main-body h2, #sp-services h2, #sp-about h2 {text-shadow: 3px 3px 3px rgba(255,255,255,.7);}
	#sp-portfolio {background: #000 url(../../../images/Digital-Buddha/Digital-Buddha-Stars-BG.jpg) top left repeat; padding: 50px 0 0; margin-bottom:-80px;}
	#sp-testimonials {background: #000 url(../../../images/Digital-Buddha/Digital-Buddha-Stars-BG.jpg) top left repeat; padding: 0 0 50px;}
	#sp-portfolio h2, #sp-portfolio h3, #sp-testimonials h2, #sp-testimonials h3 {color:white !important; text-align:center;}
	#sp-portfolio h3 {padding-top:20px;}
	#sp-portfolio p {color:#ccc !important;; font-weight:normal;}
	#sp-notification {padding:20px 0 !important; background-color:black;}
	#sp-notification p {margin-bottom:0; color:#aaa; text-align:justify; font-size:.8em;}
  /* 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 content */
  #intro.row [class^="col"] {padding:0 25px;}
  #intro .lead.d-block {font-size:1.3em;}
  #intro .d-block {padding-bottom:20px; font-size:1.1em;}
  #intro .d-block:last-child {padding-bottom:0px;}
	.well h1, .well h2, .well h3, .well h4, .well h5, .well h6, .well p, .well ul, .well ol, .well .small, .blog p { padding:5px 10px;}
	.well li {margin-left:18px;} 
	h1, h2, h3, h4, h5, h6 {
		font-family: 'Nunito Sans', sans-serif;
		text-decoration: none;
		font-weight:600;
		
		margin-bottom:15px;
		color: #333;
		text-align:center;	
	}
	
	h1 {
		margin: 0 auto 40px !important;
		font-size: 1.2em;
		font-weight: 600;
		line-height: 2.8em;
		
		padding-bottom: 0;
		color: #333;
	}
	h1 span.larger {
		display: block;
		font-size: 2.3em;
		font-weight: bold;
		color: black;
		text-shadow:2px 2px 2px orange;	
	}
	
	#sp-main-body h2 {color:black;}
	h2 {font-size:2.4em;}
	h3 {font-size:2.0em;}
	h4 {font-size:1.8em;}
	h5 {font-size:1.6em;}
	h6 {font-size:1.4em;}
	p, .p {font-size:1.2em; color: #333; text-align:justify;}
	p.lead, span.lead {
		font-size: 115%;
		font-weight: bold;	
	}
	a {color: var(--primaryColor); text-decoration:underline; font-weight:600;}
	a:hover {color: black; text-decoration:underline;}
	.caption {margin-top:7px; text-align:center; color:#888; font-style:italic;}
	div.small {color:white;}
	#title p span {
		display: block;
		margin-bottom: 15px;
	}
	/* cards */
	.card {
		display:flex;
		flex-direction:column;
		height:100%;
		border: 1px solid rgba(0,0,0,.5);
		box-shadow: 0 5px 10px rgba(0,0,0,.2);
	}
	.card-body {
		flex:1;
		display:flex;
		flex-direction:column;
		justify-content:space-between;}
	.card-title {
		font-family:"Arial Narrow", Helvetica, sans-serif;
		background-color:rgba(3,69,191,.9);
		padding:5px;
		color:white;
		text-align:center;
		font-size: 1.4em;
		font-weight: bold;
		
	}
	.card-text {
	  margin-bottom: 15px; /* Allows card text to expand naturally */
	}
	.card-body .btn { align-self: flex-start; text-align:center; margin:0 auto;}
	#auto .img-block {float:none;}
	#about h2 {text-align:center; margin-top:20px;}
	#about img {display:block; margin: 0 auto; text-align:center;}

/* Module - Services*/
	#sp-services {
		background: rgba(0,0,255,.1) url(../../../images/Digital-Buddha/Digital-Buddha-Services-BG.jpg) repeat-y;
		background-size:100% auto;	
		background-position: center top;
	}
	#sp-services div[class^="col"] {margin-bottom: 20px;}
	#sp-services .titleHover {position:relative; margin-bottom: 25px !important;}
	#sp-services img.img-responsive {
		border: 1px solid rgba(0,0,0,.3) !important;
		transition:all .75s ease;
		filter: grayscale(0%);
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
	}
	#sp-services .titleHover:hover img.img-responsive {
		transform: scale(1.1);
		filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);}
	#sp-services .titleHover div.title {
		font-family:"Arial Narrow", Helvetica, sans-serif;
		position: absolute;
		opacity: 1;
		bottom: 10px;
		background-color: rgba(3,69,191,.9);
		padding: 5px 10px;
		text-align: center;
		z-index: 100;
		left: 50%;
		transform: translateX(-50%);
		transition: all .5s ease-out;
		color: white;
	}
	#sp-services .titleHover:hover div.title {
		box-shadow:3px 3px 3px rgba(0,0,0,.5);
		bottom: 110px;
	}
	#sp-services .titleHover div.title .large {
		font-size: 1.6em;
		font-weight: bold;
		margin-bottom: -10px !important;
		line-height: 1.7rem;
	}
	
	#sp-services .titleHover div.title .sub-title {
		font-size: .9rem;
		margin-top: -10px !important;
		line-height: 1rem;
	}
	#sp-services .titleHover div.title {
		text-align: center;
		color: white;
	}
	#sp-services .titleHover div.description {background-color:black; color:white; padding:10px 15px; font-size:13px; text-align:justify;}
	#sp-services .titleHover div.title,
	#sp-services .titleHover div.description {
		border: 2px solid rgba(255,255,255,.8) !important; width:85%;
	}
	#sp-services .titleHover div.description, #sp-services .titleHover div.btn {
		position: absolute;
		opacity: 0;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		transition: all .5s ease-out;
	}
	#sp-services .titleHover:hover div.description, #sp-services .titleHover:hover div.btn {
		opacity: 1; box-shadow:3px 3px 3px rgba(0,0,0,.5);
	}
	#sp-services .titleHover:hover div.btn {opacity: 0;}

/* portfolio */
	#graphic-design-portfolio .row.justify-content-center {padding: 0 10px;}
	#graphic-design-portfolio a img {transform: scale(1); transition:all .50s ease; border:1px solid rgba(255,255,255,.4);}
	#graphic-design-portfolio a:hover img {transform: scale(1.1); border-color:orange;}
	#graphic-design-portfolio a .caption, #graphic-design-portfolio a {text-decoration:none !important; transition:all .5s ease;}
	#graphic-design-portfolio a:hover .caption, #graphic-design-portfolio a:hover {text-decoration:underline orange !important;}
	
/* Contact section */
	#sp-contact {
		position: relative;
		background: linear-gradient( #000000 0%, #004d87 95% );
		overflow: hidden; /* Ensures pseudo-element stays within the section */
		padding:100px 0 80px !important;
		color: white !important;
		text-align: center;
		margin-top:-220px;
	}
	
	#sp-contact::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('../../../images/Digital-Buddha_Code-Example.png') no-repeat top/cover; /* Replace with your image path */
		opacity: 0.2; /* Adjust the opacity as needed */
		pointer-events: none; /* Ensures the image does not interfere with content interactions */
		z-index: 1; /* Places the pseudo-element behind the content */
	}
	#sp-contact > * {
		position: relative;
		z-index: 2; /* Ensures the content is above the gradient and image */
		opacity: 1; /* Content stays fully opaque */
	}	
	#sp-contact h2 {}
	#sp-contact h2, #sp-contact p {
		color: white;
		text-shadow: 3px 3px 3px rgba(0,0,0,.7);
		text-align:center;
	}
	#sp-contact p {padding-bottom:0; margin-bottom:5px;;}
	#sp-contact h3 {color:white; text-align:center; margin-top:15px; text-decoration:underline;}
	#sp-contact a {transition:all .5s ease;}
	#sp-contact a:hover {color:white;}
	#sp-contact .social-share-section .icon {box-shadow: 3px 3px 3px rgba(0,0,0,.7); font-size:1.8em; width:25px; margin:8px 5px 0; }
	#sp-contact .social-share-section .spacer,#sp-contact .social-share-section .social-icon-envelope, #sp-contact .social-share-section .social-icon-phone {display:none;}
	#sp-contact form {margin:auto; width:100%;}
	#sp-contact .btn {
		width: 90%;
		text-shadow: none !important;
		box-shadow: 3px 3px 3px rgba(0,0,0,.7);
	}
	#sp-contact ul.hours {padding-left:0;}
/* Bottom Section */
	#sp-bottom {
		background: black; /*var(--primaryColor);*/
		padding:25px 0 0 !important;}
	#sp-bottom .sp-module:first-child {
		margin-bottom: 5px;
	}
	#sp-bottom .sp-module:last-child {
		margin-bottom: 0;
	}
	#sp-bottom [class^="col"] {padding: 15px 30px;}
	#sp-bottom [class^="col"]:first-child, #sp-bottom [class^="col"]:last-child,  {padding: 0 30px;}
	#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 {
		/*font-family: eurostile !important;*/
		font-family: "arial-narrow", Arial, Helvetica, sans-serif;
		font-size: 12px !important;
		display: block;
		text-transform:uppercase;
		padding: 0;
		color: #000;
		text-align:center;
	}
	#sp-bottom .menu > li a {color: white; text-decoration:none; padding:5px 10px;}
	#sp-bottom .menu > li a:hover {
		color: var(--primaryColor);
		text-decoration:underline black;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;}
	#sp-bottom .menu > li.active a {
		color: var(--primaryColor);
		text-decoration: underline red;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
		cursor:default;}
	#sp-bottom .sp-module ul.menu > li{
		display: block;
		margin-bottom: 4px;
		width: auto;
		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 {background-color:black;}
	#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;}
/* Right Section */
	#sp-right .sp-module {background-color:black; padding: 15px 25px;}
	#sp-right .sp-module .sp-module-title {font-size:2em; margin:0; padding-bottom:5px;}
	#sp-right .sp-module .sp-module-content {margin-top:10px;}
	#sp-right .sp-module ul {padding-left:20px;}
	#sp-right .sp-module ul > li {display:inline-block; border-bottom: none;}
	#sp-right .sp-module ul > li a:before {content: "○"; display:inline-block; padding-right:5px; margin-left:-20px;}
	#sp-right .sp-module ul > li > a {
		text-decoration: underline transparent;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
		color:#bbb;
		transition: all .75s ease;
		line-height:24px;}
	#sp-right .sp-module ul > li > a:hover {color:var(--primaryColor);}
	#sp-right .sp-module ul > li > a.active {color:var(--primaryColor); text-decoration:underline red;}
/* Blog */
	.article-info > span {font-size: 0.6rem;} /* info text */
	.article-list .article {
		background-color: black;
		padding: 10px 8px;	
	}
	.article-list .article .col-12.well {padding: 0 8px; text-align:justify;}
	.article-list .article .article-intro-image {
		background-color:black;
		margin:0 auto;
		width:100%;
		border:none;}
	.article-list .article h1 span.larger {
		font-size:1.6em;
	}
	.article-list .article h1 {line-height:1.6em;}
	.article-list .article .article-header h2 a {
		display:block;
		padding-top:10px;
		color: var(--primaryColor);
		text-align:center;}
	.article-list .article .article-header h2 a:hover {color:white;}
	.article-introtext .well p {font-size: 14px;}
	.article-list .article .readmore a {color:var(--primaryColor);}
	.article-list .article .readmore a:hover {color:white;}
	
	/*.page-header h1 {display:none;}*/
	.page-header h1 {display:block; background-color:rgba(0,0,0,.5); margin:auto; text-align:center; font-size:3.0em; line-height:1.2em;}
	.page-header h2, .article-info {background-color:rgb(0,0,0,.5); padding:5px 10px}
	
	.blog .list-group-item {
		background: black;
		border: 1px solid #f5f5f5;
	}
	.blog .list-group-item a:hover {color:white;}
	.article-blog h2 {margin-bottom:20px;}
	p[class^="float"] {display:block; width:100%; padding:10px; margin:0 auto 10px;}
	p[class^="float"] img {width:100%;}
	.item span, p[class^="float"] span, .article-blog .caption {position:relative; display:block; background: rgba(255,0,0,.5); text-align:center; font-size:12px; margin-top:10px; padding:3px;}
	img.float-start, img.float-end {float:none; display:block; margin:10px auto; text-align:center; width:100%;}
	.ratio iframe {padding-bottom: 25px;}
	.blog .article-list [class^="col"] { margin:0 auto 30px auto;}
	.blog .article-list .article-introtext [class^="col"] { margin:0;}
	.blog .article-list .article {height: 100% !important; margin-bottom:5px;}
	.blog img {max-width:none; width:100%; display:block; margin:auto; text-align:center;}
	.item {
	  height: auto;
	  width: auto;
	  background: rgba(0,0,0,.6);
	  padding: 15px;
	}
	.item img {width:100%;}
	.item .lead {text-align:center; margin-top:10px;}
	.pagination .active span, .pagination .active span:hover {background-color:red; border-color:red; color:white; font-weight:bold; cursor:default;}
	.pagination-counter.text-muted {background:black; padding: 5px 15px; color:white !important; font-weight:600; border:1px solid #f5f5f5;}
	
/* Social Share */
	#my-social-share .row {--bs-gutter-x: 1rem;}
	#my-social-share a {text-decoration:none; color:white;}
	#my-social-share a div {transition:all .75s ease; opacity:.9; border:2px solid transparent;}
	#my-social-share a:hover div {transform: scale(1.1); opacity:1; border-color:white;}
	#my-social-share #twitter, #my-social-share #youtube, #my-social-share #facebook {
		display:block; width:100%; background-color:white; padding:8px 10px; text-align:center; font-weight:500; margin:5px auto;}
	#my-social-share i {padding-right:5px;}
	#my-social-share #twitter {background-color:#00c3f3; }
	#my-social-share #youtube {background-color:red;}
	#my-social-share #facebook {background-color:#2d5f9a;}
/* Testimonials */
	#testimonials p {color:#bbb;}
	#testimonials span.lead {font-size:120%; color:#FFF; margin-bottom:10px; text-decoration:underline;}
	#testimonials  .card {background-color:rgba(0,0,0,.5); border:1px solid red;}
	#testimonials .btn {padding: 0 6px;}
	
/* contact us page */
  /* address icons */
  	.well-dark {background-color:rgba(0,0,0,.6); padding:25px 5px;}
	.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.3rem;
	}
	#address h5 a:hover {color:black;}
	.hours li {list-style:none;}
  /* contact form */
	.contact-form {
	  background-color: rgba(0,0,0,.8);
	  padding: 20px 15px;
	  border: 1px solid rgba(255,0,0,.7);
	  color:white;
	}
	.com-contact__form h2 {text-transform:uppercase; text-decoration:underline; text-align:center; color:white;}
	.com-contact__info h5 {text-shadow:none;}
	.contact-form .form-label {color:var(--primaryColor);}
	#contact-form legend:first-of-type {display: block;}
	#contact-form legend {
		text-transform:uppercase;
		font-weight: bold;
		text-shadow:3px 3px 3px rgba(255,0,0,.5);
		text-decoration: underline;
		font-weight:500;
		font-size: 2em;
		margin-bottom:-5px;
		display:none !important;
	}
	.form-text {color:#999;}
	#contact-social .spacer,
	#contact-social .social-icon-envelope,
	#contact-social .social-icon-phone {
		display:none;
	}
		 
	.form-horizontal .controls {
	  margin-left: 0;
	}
	/* turn on checkboxes */
	#jform_com_fields_which_services .form-check-inline {display:block !important;}
	/* map */
	#map {
		width:auto;
		height:500px;
		filter: grayscale(100%);
		transition: all .75s ease;
		border:2px solid rgba(0,0,0,.6);
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		-ms-border-radius:10px;
		-o-border-radius:10px;}
	#map:hover {filter: grayscale(10%);}
	.webmaster-contact {font-size:9px; }
	.webmaster-contact:hover {}
	
/* Terms */
	#legal h2 {text-decoration:underline;}
	#legal h3, #legal p, #legal ul {margin-left:5px;}
	
/* classes */
	.red, .star {font-weight:bold; color:red;}
	.img-responsive, .expand {
		width: 100%;
		height: auto;
	}
	.hideFooter, .hidden, #sp-menu .hideHeader {display: none !important;}
	.btn-primary {
		background-color: var(--primaryColor);
		text-decoration:none;
		font-weight:600;
		border: 1px solid #000;
		color: #000 !important;
		transition: all .75s ease;
	}
	.btn-primary:hover {
		background-color: black;
		text-decoration:none;
		border: 1px solid var(--primaryColor);
		color: var(--primaryColor) !important;
	}
/* slideshow animation */
.carousel.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity .5s ease-in-out;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.carousel.carousel-fade .carousel-item.active {
  opacity: 1;
  position: relative;
  z-index: 2;
}

.carousel.carousel-fade .carousel-inner {
  position: relative;
  overflow: hidden;
}
	.active .benefits {}
	.benefits {
		scale:.6;
		display: block;
		position: absolute;
		top: 1%;
		left: -5%;
	}
	.benefits .heading {font-size:2.8em; margin-bottom:5px; color:white; font-family:"Arial Black", Gadget, sans-serif; font-style:italic; text-shadow:3px 3px 5px black;}
	.benefits div[class^="benefit"] {font-size:2em; margin-bottom:5px; color:yellow; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-style:italic; text-shadow:3px 3px 5px black;}

  /* Initial styles for the benefits */
  .carousel-item .benefits div {
    position: relative;
    opacity: 0;
    transform: translateX(-100%);
  }

  /* Slide-in animation */
  @keyframes slideIn {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Fade-out animation */
  @keyframes fadeOut {
    to {
      opacity: 0;
    }
  }

  /* Animate benefits when the slide is active */
  .carousel-item.active .benefits .heading {
    animation: slideIn 0.5s forwards;
    animation-delay: 0.2s;
  }

  .carousel-item.active .benefits .benefit1 {
    animation: slideIn 0.5s forwards;
    animation-delay: 0.4s;
  }

  .carousel-item.active .benefits .benefit2 {
    animation: slideIn 0.5s forwards;
    animation-delay: 0.6s;
  }

  .carousel-item.active .benefits .benefit3 {
    animation: slideIn 0.5s forwards;
    animation-delay: 0.8s;
  }

  .carousel-item.active .benefits .benefit4 {
    animation: slideIn 0.5s forwards;
    animation-delay: 1.0s;
  }

  .carousel-item.active .benefits .benefit5 {
    animation: slideIn 0.5s forwards;
    animation-delay: 1.2s;
  }

  /* Trigger fade-out before the slide transition */
  .carousel-item.active.fade-out .benefits div {
    animation: fadeOut 0.75s forwards;
    animation-delay: 0;
  }
  
/* Testimonials */
	.sp-module.mod-testimonials {
		margin: 100px 0 30px;
	}
	.sp-module.mod-testimonials p {
		margin:10px auto -10px;
	}

	@keyframes slide {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%); /* Adjust to half the width of the duplicated content */
		}
	}
	
	.c-testimonials {
		position:relative;
		padding:60px 0;
		display: block; /* Enables flex properties */
		white-space: nowrap;
	}
	.c-testimonials:before,
	.c-testimonials:after {
		position:absolute;
		top:0;
		overflow:hidden;
		width:250px;
		height:100%;
		content:"";
		z-index:2;
		opacity:0;
		}
	.c-testimonials:before {
		left:0;
		background:linear-gradient(to left, rgba(0,0,0,0), black);
	}
	.c-testimonials:after {
		right:0;
		background:linear-gradient(to right, rgba(0,0,0,0), black);
	}
	.c-testimonials:hover .c-testimonials-slide {
		animation-play-state:paused;
	}
	.c-testimonials-slide {
		position:relative;
		display:inline-block;
		align-items:center;
		animation: 35s slide infinite linear;
		height:auto;
		background-color: rgba(0,0,255,.1);
	}
	
	.c-testimonials-slide .testimonial {
		position:relative;
		display: inline-block; /* Allows the elements to sit next to each other */
		vertical-align: middle; /* Ensures top alignment of inline-blocks */
		width: 330px; /* You can change this width as needed for a better layout */
		margin: 0 60px; /* Horizontal margin for spacing */
		white-space:normal;
		transition: all .5s ease-out;
		transform: scale(1);
		height:auto;
		background: rgba(128,0,128,.3);
		padding: 20px 10px;  
		z-index:1;
	}
	.c-testimonials-slide .testimonial:hover {
	  transform: scale(1.35);
	  z-index:20;}
	
	.c-testimonials-slide .testimonial p {
	  border-radious:10px;
	  background-color:rgba(0,0,0,.7);
	  font-size:1em;
	  line-height:1.4em;
	  text-align:justify;
	  padding:10px 15px;
	  margin:10px;
	  color:white;
	  
	}
	.c-testimonials-slide .testimonial p.signature {text-align:right; font-style:italic; padding:0; background:transparent; font-weight:bold !important;}
	.c-testimonials-slide .testimonial p .small {
	  font-size:.7em;
	  line-height:.9em;
	  margin-top:5px;
	  }
	  hr {color:white; opacity:.2}
	.rating {color:white; font-size:1.7em; text-align:center; font-weight:bold;}
	.rating .star {color:yellow;}

/* mailing List honepot */
	#mailingList {
		display:none;
		visibility: hidden;}
	#contactForm .form-check {
		display: inline-block;
		margin-right: 15px; /* Adjust spacing as needed */
	}

@media screen and (min-width: 400px) {
	.c-testimonials-slide .testimonial {width: 400px;}	
}

@media screen and (min-width: 576px) {
:root {
  	--hlogo-minHeight: 50px; /*60*/
	--hlogo-maxHeight: 80px; /* 100 */
}
	#sp-header .row {
	  --bs-gutter-x: 1.875rem;
	}
	.burger-icon {width:25px;}
	h2, h3, h4, h5, h6 {text-align:left;}
	h1 {line-height:2.3em;}
	h1 span.larger {font-size:2.7em;}
	#sp-contact .btn {width: 70%;}
	#logo-bottom img {max-width:70%;}
	.contact-form {padding: 20px 40px;}
	#sp-services .titleHover:hover div.title {bottom: 100px;}
	#affiliates .btn.btn-primary.btn-sm.text-center {width: 90%;}
	#myTabContent .container {padding: 10px 20px;  border:1px solid rgba(255,255,255,.3);}
	#myTab .nav-item {font-size: 20px;}
	.c-testimonials-slide .testimonial {width: 550px;}
	#sp-bottom .menu > li a, #sp-bottom p, #sp-bottom2 li {
	  font-size: 18px !important;
	  font-weight:500;
	  margin-bottom:8px;}
	.blog img {width:70%;}
	#legal h3, #legal p, #legal ul {margin-left: 20px;}
}
@media screen and (min-width: 768px) {
	.sp-column.d-flex.justify-content-md-start.justify-content-center {
	  justify-content: center !important;
	}
	#sp-header .container {background-color:transparent;}
	.home-custom-bg #sp-header {margin-top:0;}
	#sp-services div[class^="col"] {margin-bottom: 0;}
	
	#sp-services .titleHover:hover div.title {bottom: 115px;}
	img.float-start {width:auto; margin:10px 20px 10px 0;}
	img.float-end {width:auto; margin:10px 0 10px 20px; }
	.item .lead {text-align:left; margin-top:0;}
	#sp-contact .btn {width: 90%;}
	.sp-copyright {text-align:left;}
	.sp-webdesign {text-align:right;}
	#affiliates .btn.btn-primary.btn-sm.text-center {width: 70%;}
	#myTabContent .container {padding: 10px 30px;}
	#myTab .nav-item {font-size: 28px;}
	.c-testimonials::before, .c-testimonials::after {opacity:1;}
	.blog img {width:50%;}
	p[class^="float"] {display:inline-block; width:40%; margin-bottom:0;}
	#legal h3, #legal p, #legal ul {margin-left: 40px;}
}
@media screen and (min-width: 992px) {
	.home-custom-bg #sp-header {background-color: transparent; margin-bottom:-102px;}
	#about h2 {text-align:left; margin-top:0;}
	#about .img-block {float:left; margin: 0 30px 15px 0;}
	.benefits {
		top: 17%;
		left: 0%;
		scale:.65;
	}
	.sp-column.d-flex.justify-content-md-start.justify-content-center {
	  justify-content: start !important;
	}
	#sp-contact form {margin:auto; width:70%;}
	#sp-contact .btn {width: 70%;}
	#logo-bottom img {max-width:80%;}
	.blog img {width:100%;}
	p[class^="float"] {width:50%;}
	.well-dark {padding: 25px 20px;}
	#sp-bottom [class^="col"] {padding: 0 30px;}
}
@media screen and (min-width: 1200px) {
	#sp-header .sp-megamenu-parent > li {margin: 5px 10px 0;}
	.benefits {
		top: 20%;
		left: 3%;
		scale:.8;
	}
	#sp-services .titleHover:hover div.title {bottom: 110px;}
	#sp-services .titleHover div.title .sub-title {font-size: 1rem;}
	#sp-services .titleHover div.description {font-size:15px;}
	#sp-contact .btn {width: 50%;}
	#logo-bottom img {max-width:70%;}
	p[class^="float"] {width:40%;}
}
@media screen and (min-width: 1400px) {
	.benefits {
		top: 25%;
		left: 10%;
		scale:1;
	}	
}