/**
 * Style sheet for index web page.
 * 
 * @author - Tom Shewchuk
 * @since - Nov 13, 2025
 */

	@charset "UTF-8";
	@import url("/styles/common.css");

	/* Featured services */

	div.featured-services {
		position: relative;
		box-sizing: border-box;
		margin: 0 auto;
		width: 100%;
		max-width: 1200px;
		height: auto;
		box-shadow: 0px 0px 10px rgba(36, 88, 21, 0.5);
		overflow: hidden;
		background-image: url("/images/theater-curtains.png");
		background-size: 100% 100%;
	}

	div.featured-services-bg {
		position: relative;
		background-color: Black;
		background-size: 100% 100%;
		padding-top: clamp(35px, 10.0vw, 100px);
		padding-bottom: clamp(20px, 4vw, 40px);
		padding-left: clamp(25px, 10.0vw, 100px);
		padding-right: clamp(25px, 10.0vw, 100px);
		text-align: center;
		box-shadow: 0px 0px 10px rgba(36, 88, 21, 0.5);
		overflow: hidden;
		animation: lights-on 2s linear forwards;
		animation-play-state: paused;
		z-index: -1;
	}

	@keyframes lights-on {
		to {
			background-color: AntiqueWhite;
		}
	}

	p.featuring {
		opacity: 0;
		font-family: Brush Script MT, Brush Script Std, cursive;
		font-weight: bold;
		font-size: clamp(22px, 6.0vw, 60px);
		color: Purple;
		animation: fade-in 2s linear forwards;
		animation-play-state: paused;
	}

	@keyframes fade-in {
		to {
			opacity: 1;
		}
	}

	.services-list {
		display: inline-block;
		margin-top: -.75em;
		font-size: clamp(12px, 3.2vw, 32px);
		line-height: 1.0;
		font-family: Broadway, fantasy;
		font-weight: normal;
		font-style: italic;
		color: Purple;
		text-align: left;
		list-style-position: outside;
		text-indent: 0;
	}

	.services-list li {
		transform: translateX(-200%);
		animation: marquee 1s ease forwards;
		animation-play-state: paused;
	}

	.services-list li:nth-child(1) {
		animation-delay: 0s;
	}

	.services-list li:nth-child(2) {
		animation-delay: 2s;
	}

	.services-list li:nth-child(3) {
		animation-delay: 4s;
	}

	.services-list li:nth-child(4) {
		animation-delay: 6s;
	}

	@keyframes marquee {
		to {
			transform: translateX(0%);
		}
	}

	/* Small business */
 
	h2 {
		color: Cyan;
	}
 
	div.column.transaction {
		background-image: url("/images/small-business-transaction.jpg");
	}

	div.column:hover {
		color: White;

		h2 {
			color: White;
		}
	}

	div.column.transaction:hover {
		background: 
			linear-gradient(rgba(0, 0, 0, 0.6)),
			url("/images/small-business-transaction.jpg") center/cover no-repeat;
	}