@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");
@import url("fontawesome-all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');


/*
	Aerial by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input,
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background: #fff;
	overflow: hidden;
}

body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}


body,
input,
select,
textarea {
	/*color: rgb(158, 92, 185);
	*/
	color: rgb(151, 69, 184);
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 15pt;
	font-weight: 300 !important;
	letter-spacing: -0.025em;
	line-height: 1.75em;
}



a {
	-moz-transition: border-color 0.2s ease-in-out;
	-webkit-transition: border-color 0.2s ease-in-out;
	-ms-transition: border-color 0.2s ease-in-out;
	transition: border-color 0.2s ease-in-out;
	border-bottom: dotted 1px;
	color: inherit;
	outline: 0;
	text-decoration: none;
}

a:hover {
	border-color: transparent;
}

/* Icon */

.icon {
	text-decoration: none;
	position: relative;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}

.icon>.label {
	display: none;
}

.icon.solid:before {
	font-weight: 900;
}

.icon.brands:before {
	font-family: 'Font Awesome 5 Brands';
}

/* Wrapper */

@-moz-keyframes wrapper {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes wrapper {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes wrapper {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes wrapper {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#wrapper {
	-moz-animation: wrapper 3s forwards;
	-webkit-animation: wrapper 3s forwards;
	-ms-animation: wrapper 3s forwards;
	animation: wrapper 3s forwards;
	height: 100%;
	left: 0;
	opacity: 0;
	position: relative;
	top: 0;
	width: 100%;
}

/* BG */

#bg {
	-moz-animation: bg 60s linear infinite;
	-webkit-animation: bg 60s linear infinite;
	-ms-animation: bg 60s linear infinite;
	animation: bg 60s linear infinite;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/* Set your background with this */

	background: white url("images/bgmaf4.jpg") bottom left;
	background-repeat: repeat-x;
	height: 100%;
	left: 0;
	opacity: 0.3;
	position: absolute;
	top: 0;
}

@-moz-keyframes bg {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-moz-transform: translate3d(-2250px, 0, 0);
		-webkit-transform: translate3d(-2250px, 0, 0);
		-ms-transform: translate3d(-2250px, 0, 0);
		transform: translate3d(-2250px, 0, 0);
	}
}

@-webkit-keyframes bg {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-moz-transform: translate3d(-2250px, 0, 0);
		-webkit-transform: translate3d(-2250px, 0, 0);
		-ms-transform: translate3d(-2250px, 0, 0);
		transform: translate3d(-2250px, 0, 0);
	}
}

@-ms-keyframes bg {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-moz-transform: translate3d(-2250px, 0, 0);
		-webkit-transform: translate3d(-2250px, 0, 0);
		-ms-transform: translate3d(-2250px, 0, 0);
		transform: translate3d(-2250px, 0, 0);
	}
}

@keyframes bg {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-moz-transform: translate3d(-2250px, 0, 0);
		-webkit-transform: translate3d(-2250px, 0, 0);
		-ms-transform: translate3d(-2250px, 0, 0);
		transform: translate3d(-2250px, 0, 0);
	}
}

#bg {
	background-size: 2250px auto;
	width: 6750px;
}

/* Overlay */

@-moz-keyframes overlay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes overlay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes overlay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes overlay {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#overlay {
	-moz-animation: overlay 1.5s 1.5s forwards;
	-webkit-animation: overlay 1.5s 1.5s forwards;
	-ms-animation: overlay 1.5s 1.5s forwards;
	animation: overlay 1.5s 1.5s forwards;
	background-attachment: fixed, fixed;
	background-image: url("images/overlay-pattern.png"), url("images/overlay.svg");
	background-position: top left, center center;
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
	height: 100%;
	left: 0;
	opacity: 0;
	position: relative;
	top: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.065);

}

/* Main */

#main {
	min-height: 100vh;
	position: relative;
	text-align: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


#main:before {
	content: '';
	display: inline-block;
	height: 100%;
	margin-right: 0;
	vertical-align: middle;
	width: 1px;
}

/* Header */

@-moz-keyframes header {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes header {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-ms-keyframes header {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes header {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-moz-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-ms-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0, 1em, 0);
		-webkit-transform: translate3d(0, 1em, 0);
		-ms-transform: translate3d(0, 1em, 0);
		transform: translate3d(0, 1em, 0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

#header {
	-moz-animation: header 1s 2.25s forwards;
	-webkit-animation: header 1s 2.25s forwards;
	-ms-animation: header 1s 2.25s forwards;
	animation: header 1s 2.25s forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	cursor: default;
	display: inline-block;
	opacity: 0;
	position: relative;
	text-align: center;
	top: -1em;
	vertical-align: middle;
	width: 90%;
}
/*
#header h1 {
	font-size: 4.35em;
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1em;
	font-family: 'Montserrat', sans-serif;
}
*/
#header h1 {
    font-size: 4.35em;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(90deg, #7b22a0, #81389e, #8a5aaa);
    background-size: 300% auto; /* smoother transition */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    line-height: 1.15; /* ensures no cutting */
    display: inline-block;
    white-space: nowrap;
    animation: gradientShift 8s ease infinite;
}

/* Smooth gradient movement */
@keyframes gradientShift {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}



#header p {
	font-size: 1.25em;
	margin: 0.75em 0 0.25em 0;
	opacity: 0.75;
	/*color: rgb(87, 12, 117);*/
	 color: #501b86;
}

#header nav {
	margin: 1.5em 0 0 0;
}

#header nav li {
	-moz-animation: nav-icons 0.5s ease-in-out forwards;
	-webkit-animation: nav-icons 0.5s ease-in-out forwards;
	-ms-animation: nav-icons 0.5s ease-in-out forwards;
	animation: nav-icons 0.5s ease-in-out forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	display: inline-block;
	 height: 5.1em;
  line-height: 5.6em;
	opacity: 0;
	position: relative;
	top: 0;
	    width: 5.1em;
}


#header nav li:nth-child(1) {
	-moz-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	animation-delay: 2.5s;
}

#header nav li:nth-child(2) {
	-moz-animation-delay: 2.75s;
	-webkit-animation-delay: 2.75s;
	-ms-animation-delay: 2.75s;
	animation-delay: 2.75s;
}

#header nav li:nth-child(3) {
	-moz-animation-delay: 3s;
	-webkit-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
}

#header nav li:nth-child(4) {
	-moz-animation-delay: 3.25s;
	-webkit-animation-delay: 3.25s;
	-ms-animation-delay: 3.25s;
	animation-delay: 3.25s;
}

#header nav li:nth-child(5) {
	-moz-animation-delay: 3.5s;
	-webkit-animation-delay: 3.5s;
	-ms-animation-delay: 3.5s;
	animation-delay: 3.5s;
}

#header nav li:nth-child(6) {
	-moz-animation-delay: 3.75s;
	-webkit-animation-delay: 3.75s;
	-ms-animation-delay: 3.75s;
	animation-delay: 3.75s;
}

#header nav li:nth-child(7) {
	-moz-animation-delay: 4s;
	-webkit-animation-delay: 4s;
	-ms-animation-delay: 4s;
	animation-delay: 4s;
}

#header nav li:nth-child(8) {
	-moz-animation-delay: 4.25s;
	-webkit-animation-delay: 4.25s;
	-ms-animation-delay: 4.25s;
	animation-delay: 4.25s;
}

#header nav li:nth-child(9) {
	-moz-animation-delay: 4.5s;
	-webkit-animation-delay: 4.5s;
	-ms-animation-delay: 4.5s;
	animation-delay: 4.5s;
}

#header nav li:nth-child(10) {
	-moz-animation-delay: 4.75s;
	-webkit-animation-delay: 4.75s;
	-ms-animation-delay: 4.75s;
	animation-delay: 4.75s;
}

#header nav a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	border: 0;
	display: inline-block;
}

#header nav a:before {
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	border-radius: 100%;
	border: solid 1px rgb(158, 92, 185);
	display: block;



	position: relative;
	text-align: center;
	top: 0;

}

#header nav a:before {
    font-size: 1.65em;  /* was 1.75em */
    height: 2.35em;     /* was 2.5em */
    width: 2.35em;      /* was 2.5em */
    line-height: 2.35em;
}

#header nav a:hover {
	font-size: 1.1em;
}

/*
#header nav a:hover:before {
	background-color: rgba(229, 201, 241, 0.591);
	color: rgb(158, 92, 185);
}
*/
#header nav a:hover:before {
	background-color: rgb(255, 255, 255);
	color: rgb(191, 112, 225);
}

#header nav a:active {
	font-size: 0.95em;
	background: none;
}

#header nav a:active:before {
	background-color: rgba(255, 255, 255, 0.35);
	color: rgb(158, 92, 185);
}

#header nav a span {
	display: none;
}

/* Footer */

#footer {


	bottom: 0;
	cursor: default;
	height: 6em;
	left: 0;
	line-height: 8em;
	position: absolute;
	text-align: center;
	width: 100%;
}

/* Wide */

@media screen and (max-width: 1680px) {

	/* Basic */

	body,
	input,
	select,
	textarea {
		font-size: 13pt;
	}

	/* BG */

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-1500px, 0, 0);
			-webkit-transform: translate3d(-1500px, 0, 0);
			-ms-transform: translate3d(-1500px, 0, 0);
			transform: translate3d(-1500px, 0, 0);
		}

	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-1500px, 0, 0);
			-webkit-transform: translate3d(-1500px, 0, 0);
			-ms-transform: translate3d(-1500px, 0, 0);
			transform: translate3d(-1500px, 0, 0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-1500px, 0, 0);
			-webkit-transform: translate3d(-1500px, 0, 0);
			-ms-transform: translate3d(-1500px, 0, 0);
			transform: translate3d(-1500px, 0, 0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-1500px, 0, 0);
			-webkit-transform: translate3d(-1500px, 0, 0);
			-ms-transform: translate3d(-1500px, 0, 0);
			transform: translate3d(-1500px, 0, 0);
		}
	}

	#bg {
		background-size: 1500px auto;
		width: 4500px;
	}
}

/* Normal */

@media screen and (max-width: 1280px) {

	/* Basic */

	body,
	input,
	select,
	textarea {
		font-size: 12pt;
	}

	/* BG */

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-750px, 0, 0);
			-webkit-transform: translate3d(-750px, 0, 0);
			-ms-transform: translate3d(-750px, 0, 0);
			transform: translate3d(-750px, 0, 0);
		}

	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-750px, 0, 0);
			-webkit-transform: translate3d(-750px, 0, 0);
			-ms-transform: translate3d(-750px, 0, 0);
			transform: translate3d(-750px, 0, 0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-750px, 0, 0);
			-webkit-transform: translate3d(-750px, 0, 0);
			-ms-transform: translate3d(-750px, 0, 0);
			transform: translate3d(-750px, 0, 0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-750px, 0, 0);
			-webkit-transform: translate3d(-750px, 0, 0);
			-ms-transform: translate3d(-750px, 0, 0);
			transform: translate3d(-750px, 0, 0);
		}
	}

	#bg {
		background-size: 750px auto;
		width: 2250px;
	}
}

/* Mobile */

@media screen and (max-width: 736px) {

	/* Basic */

	body {
		min-width: 320px;
	}

	body,
	input,
	select,
	textarea {
		font-size: 11pt;
	}

	/* BG */

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-300px, 0, 0);
			-webkit-transform: translate3d(-300px, 0, 0);
			-ms-transform: translate3d(-300px, 0, 0);
			transform: translate3d(-300px, 0, 0);
		}

	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-300px, 0, 0);
			-webkit-transform: translate3d(-300px, 0, 0);
			-ms-transform: translate3d(-300px, 0, 0);
			transform: translate3d(-300px, 0, 0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-300px, 0, 0);
			-webkit-transform: translate3d(-300px, 0, 0);
			-ms-transform: translate3d(-300px, 0, 0);
			transform: translate3d(-300px, 0, 0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-300px, 0, 0);
			-webkit-transform: translate3d(-300px, 0, 0);
			-ms-transform: translate3d(-300px, 0, 0);
			transform: translate3d(-300px, 0, 0);
		}
	}

	#bg {
		background-size: 300px auto;
		width: 900px;
	}

	/* Header */

	#header h1 {
		font-size: 2.5em;
	}

	#header p {
		font-size: 1em;
	}

	#header nav {
		font-size: 1em;
	}

	#header nav a:hover {
		font-size: 1em;
	}

	#header nav a:active {
		font-size: 1em;
	}
}

/* Mobile (Portrait) */

@media screen and (max-width: 480px) {

	/* BG */

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-412.5px, 0, 0);
			-webkit-transform: translate3d(-412.5px, 0, 0);
			-ms-transform: translate3d(-412.5px, 0, 0);
			transform: translate3d(-412.5px, 0, 0);
		}

	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-412.5px, 0, 0);
			-webkit-transform: translate3d(-412.5px, 0, 0);
			-ms-transform: translate3d(-412.5px, 0, 0);
			transform: translate3d(-412.5px, 0, 0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-412.5px, 0, 0);
			-webkit-transform: translate3d(-412.5px, 0, 0);
			-ms-transform: translate3d(-412.5px, 0, 0);
			transform: translate3d(-412.5px, 0, 0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-moz-transform: translate3d(-412.5px, 0, 0);
			-webkit-transform: translate3d(-412.5px, 0, 0);
			-ms-transform: translate3d(-412.5px, 0, 0);
			transform: translate3d(-412.5px, 0, 0);
		}
	}

	#bg {
		background-size: 412.5px auto;
		width: 1237.5px;
	}

	/* Header */

	#header nav {
		padding: 0 1em;
	}
}

/* === FINAL STABLE SCROLL FIX === */
html,
body {
	height: auto !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

/* Ensure wrapper only controls the hero section */
#wrapper {
	position: relative !important;
	height: 100vh !important;
	width: 100%;
}

/* Keep flowers & overlay fixed behind everything */
#overlay {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* prevent accidental interactions */
}


/* Always center the hero content */
#main {
	position: absolute !important;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 4rem 1rem;
	z-index: 10;
}

#main:before {
	display: none !important;
}

/* Allow smooth scrolling for new sections */
html {
	scroll-behavior: smooth;
}

/* Projects & timeline default styling */
#projects {
	padding: 5rem 10%;

	text-align: center;
	z-index: 20;
}


/* === HERO: flores discretas em faixa de rodapé === */
#bg {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 22vh;
    background: #fff url("images/bgmaf4.jpg") bottom center repeat-x !important;
    background-size: auto 22vh !important;
    opacity: 0.15 !important;
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    pointer-events: none;
    z-index: 0;

    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);

    /* === Ajuste fino para destacar lilás === */
    filter: saturate(1.35) hue-rotate(500deg) contrast(1.5) brightness(1.1);

    mix-blend-mode: lighten;
}



/* Conteúdo (hero) sempre acima */
#main {
	position: relative !important;
	z-index: 2;
}

/* Respeitar utilizadores que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
	#bg {
		animation: none !important;
	}
}

/* Ajustes responsivos: faixa um pouco mais baixa em mobile */
@media (max-width: 736px) {
	#bg {
		height: 18vh;
		background-size: auto 18vh !important;
	}
}
/* === Elegant Scroll Indicator === */

#footer {
  border: none !important;
  box-shadow: none !important;
}

/* Remove any default link styles */
.scroll-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 1.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease;
  border: none;
  outline: none;
}

/* Arrow styling */
.scroll-arrow {
  width: 18px;
  height: 18px;
  border-left: 2px solid rgb(128, 36, 164);
  border-bottom: 2px solid rgb(128, 36, 164);
  transform: rotate(-45deg);
  animation: bounce 1.2s infinite;
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Hover effect: color + smooth grow + subtle lift */
.scroll-indicator:hover .scroll-arrow {
  opacity: 1;
  border-color: #a25bd0;
  transform: rotate(-45deg) scale(1) translateY(2px);
}

#overlay {
    background: none !important;
    background-color: #fff; /* Ou um tom muito claro, ex: #faf7fc */
    opacity: 1 !important;
}

/* Entrance timing to match header style */
.scroll-indicator {
  opacity: 0;
  transform: translate3d(0, 1em, 0);          /* start slightly lower */
  animation: header 0.9s 3.25s forwards;       /* same keyframes as #header, later start */
}

/* Start the bounce only after it appears */
.scroll-arrow {
  animation: bounce 1.2s 3.9s infinite;        /* add delay so bounce begins post-reveal */
}

/* Accessibility: if user prefers reduced motion, show it immediately and disable bounce */
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .scroll-arrow {
    animation: none;
  }
}

/* Featured projects */
#projects {
  padding: 4rem 10%;
  background: #faf9f9;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.project-card {
  border: 1px solid rgba(158, 92, 185, .15);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(158, 92, 185, .25);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.project-card__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.project-card__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  border-bottom: none;
  color: #6f2f9c;
}

.project-card__title:hover { text-decoration: none; }

.project-card__desc {
  color: #555;
  line-height: 1.55;
  font-size: .98rem;
  margin-bottom: .75rem;
}

.project-card__foot {
  display: flex;
  gap: 1rem;
}

.project-card__link {
  font-size: .95rem;
  border-bottom: 1px dotted rgba(158,92,185,.6);
}
.project-card__link:hover { border-bottom-color: transparent; }

/* Origin badges (inline, not sections) */
.badge {
  display: inline-block;
  padding: .15rem .45rem;
  font-size: .72rem;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid currentColor;
  letter-spacing: .02em;
}

.badge-42  { color: #7c3aed; background: rgba(124,58,237,.08); }
.badge-uni { color: #1e40af; background: rgba(30,64,175,.08); }
.badge-work{ color: #047857; background: rgba(4,120,87,.08); }

/* Responsive grid */
@media (max-width: 980px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* Featured emphasis */
.project-card--featured {
  border-color: rgba(158, 92, 185, .35);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transform: translateY(-1px);
  background:
    linear-gradient(#fff, #fff) padding-box,
    radial-gradient(120% 120% at 0% 0%, rgba(158,92,185,.25), rgba(255,255,255,0)) border-box;
  border: 1px solid transparent; /* for gradient border trick */
}

.project-card--featured .project-card__title {
  color: #5a1d86;
}

.project-card--featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

/* Slight size & density bump without breaking the grid */
.project-card--featured .project-card__desc {
  font-size: 1rem;
}
.project-card--featured { padding: 1.15rem 1.25rem; }

/* Tiny “Featured” ribbon (non-intrusive) */
.project-card__head { position: relative; }
.ribbon {
  position: relative;
  margin-left: auto;                 /* sits at the right of the header row */
  padding: .18rem .45rem;
  font-size: .68rem;
  line-height: 1;
  border-radius: 999px;
  color: #6b21a8;
  background: rgba(107,33,168,.08);
  border: 1px solid rgba(107,33,168,.35);
  text-transform: uppercase;
  letter-spacing: .04em;
}


#highlighted .project-grid > .project-card:nth-child(-n+3) {
  border-color: rgba(158, 92, 185, .35);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transform: translateY(-1px);
  background:
    linear-gradient(#fff, #fff) padding-box,
    radial-gradient(120% 120% at 0% 0%, rgba(158,92,185,.25), rgba(255,255,255,0)) border-box;
  border: 1px solid transparent;
}
#highlighted .project-grid > .project-card:nth-child(-n+3) .project-card__title { color: #5a1d86; }
#highlighted .project-grid > .project-card:nth-child(-n+3):hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.badge-featured {
  color: #9b4edd;
  background: rgba(155, 78, 221, .08);
  border: 1px solid rgba(155, 78, 221, .25);
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
/* Subtitles */
/* Section titles (use for both Featured + Other) */
/* Main section titles (Featured Projects, etc.) */
.section-title {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 0;
   margin: 17rem 0 1rem; 
  color: rgb(158, 92, 185);
}



/* On medium screens, loosen the spacing slightly */
@media (max-width: 980px) {
  .section-title {
    line-height: 1.15; /* prevent overlap */
    font-size: 2rem;   /* slightly smaller text for balance */
  }
}

/* On small screens, make it more compact */
@media (max-width: 640px) {
  .section-title {
    line-height: 1.2;  /* a bit more breathing room */
    font-size: 1.75rem;
  }
}


/* Subtitle under main title */
.subtitle {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  color: #666;
  margin: -0.25rem 0 3rem;

}

/* Slightly smaller, softer style for ary section titles */
.section-title.secondary {
  margin-top: 3.5rem;
  font-size: 1.5rem;              /* Smaller than main */
  font-weight: 600;              /* Lighter weight */
  color:rgb(158, 92, 185); /* Softer, more discreet */
  margin-bottom: 3rem;
}

/* ===== Featured HERO (image band + title/subtitle + featured cards) ===== */
.featured-section1{
  /* tuning knobs */
  --hero-h: clamp(450px, 42vh, 720px);   /* height of the image band */
  --overlap: clamp(80px, 15vh, 200px);   /* how deep the cards overlap the image */
  --img-offset-y: -6%;                  /* nudge image up/down (negative = up) */

  position: relative;
  padding: 2.25rem 12% 0;               /* top padding for title/subtitle only */
                    
  text-align: center;
  box-sizing: border-box;

}

/* Full-bleed background image that starts exactly at the top of this block */
.featured-section1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--hero-h);
  background: url("images/flower2.jpeg") 10% center / cover no-repeat;
  z-index: 0;
  background-position: 50% 1%;

}


/* Soft overlay for readability (optional) */
.featured-section1::after{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--hero-h);
  background:linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.06) 70%, rgba(255,255,255,0) 80%, #fff 100%);
  z-index: 0;
  
}

/* Keep all content above the overlays */
.featured-section1 .section-title,
.featured-section1 .subtitle,
.featured-section1 .featured-grid,
.featured-section1 .project-card {
  position: relative;
  z-index: 1; /* Só estes ficam acima da imagem */
}


/* Make the heading + subtitle white on the hero */
.featured-section1 .section-title,
.featured-section1 .subtitle{
  color: #fff !important;
}

/* The 3 featured cards grid */
.featured-section1 .featured-grid{
  display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  justify-items: center;

  /* This places the grid right after the image band... */
  padding-top: calc(var(--hero-h) - var(--overlap));
  /* ...and pulls it back up so the cards overlap the image */
  margin-top: calc(-1 * var(--overlap));
    position:relative;
  top:0;
}

/* Slight lift for the featured cards so they feel in front of the image */
.featured-section1 .project-card {
  padding: 1.35rem 1.5rem;
  border-radius: 12px;
}

.featured-section1 .project-card__title { font-size: 1.25rem; }
.featured-section1 .project-card__desc  { font-size: 1.05rem; line-height: 1.6; }
/* ===== “Other Projects” stays simple on white ===== */
.featured-section{
  background: #fff;
  padding: 3.5rem 12% 4rem;
}

/* If your global #projects added a background, clear it now */
#projects{ background: transparent; padding-top: 0; }

/* Adjust the vertical position of ALL featured cards */
.featured-section1 .featured-grid {

  top: -165px; /* negative moves them UP, positive moves them DOWN */
}

/* === FEATURED PROJECTS ANIMATION === */

/* Keyframes for smooth fade-in + slide-up effect */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

.featured-section1 .section-title,
.featured-section1 .subtitle,
.featured-section1 .project-card {
  opacity: 0;
  transform: translateY(36px);
  will-change: transform, opacity;
}

.featured-section1 .section-title.in,
.featured-section1 .subtitle.in,
.featured-section1 .project-card.in {
  animation: fadeUp .8s ease forwards;
  animation-delay: var(--stagger, 0ms);
}


/* Pull up the "Other Projects" section slightly */
.featured-section {
  margin-top: -8rem; /* Move the section closer */
}

/* Make sure the secondary title doesn't add extra space */
.section-title.secondary {
  margin-top: 1.5rem; /* Tighten its spacing */
}

/* === OTHER PROJECTS ANIMATION === */
.featured-section .project-card {
  opacity: 0;
  transform: translateY(36px);
  will-change: transform, opacity;
}

/* When the cards become visible */
.featured-section .project-card.in {
  animation: fadeUp 0.8s ease forwards;
  animation-delay: var(--stagger, 0ms);
}

/* Base title styles */
.project-card__title {
  position: relative;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  color: #6f2f9c;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Underline effect */
.project-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: rgba(158, 92, 185, 0.7); /* soft lilac */
  border-radius: 2px;
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

/* On hover, a soft underline slides in */
.project-card__title:hover::after {
  width: 100%;
  opacity: 1;
}

/* Optional: slightly change text color on hover */
.project-card__title:hover {
  color: #5a1d86; /* a bit deeper for contrast */
}
/* let clicks go through the hero image overlays */
.featured-section1::before,
.featured-section1::after {
  pointer-events: none;
}


/* === TICKER: make the bottom project grid a one-line auto scroller === */
.featured-section { 
  overflow: hidden;                /* hide overflow edges */
  position: relative;	
}

.featured-section .project-grid {
  --gap: 1.25rem;
  --speed: 40s;                    /* scroll duration; bigger = slower */
  display: flex;                   /* single row */
  gap: var(--gap);
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;              /* size to content so translate works cleanly */
  animation: proj-ticker var(--speed) linear infinite;
  will-change: transform;
  padding-block: .5rem;
  /* soft fade at edges */
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* Cards inside ticker: set reasonable width so they read well in a row */
.featured-section .project-card {
  flex: 0 0 auto;
  min-width: clamp(260px, 28vw, 360px);
  max-width: 360px;
}

/* Pause when user hovers or focuses anything inside the section */
.featured-section:hover .project-grid,
.featured-section:focus-within .project-grid {
  animation-play-state: paused;
}

/* Stronger hover elevation looks nicer while moving */
.featured-section .project-card:hover {
  transform: translateY(-4px);

}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .featured-section .project-grid { animation: none; transform: none; }
}

/* Seamless loop: translate half the track (we’ll duplicate items via JS) */
@keyframes proj-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* assumes two identical sets in the track */
}

/* Let the flowers show behind the ticker */
.featured-section {
  background: transparent !important; /* was #fff */
  overflow-x: hidden;                  /* keep ticker edges clipped */
  overflow-y: visible;                 /* don't clip the flower band */
  padding-bottom: 10vh;                /* space so cards don’t sit on flowers */
}

/* Optional: soften the very bottom so text stays readable near flowers */
@media (min-width: 640px) {
  .featured-section::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 12vh;
    pointer-events: none;
    background: linear-gradient(to bottom,
                 rgba(255,255,255,0) 0%,
                 rgba(255,255,255,0.6) 60%,
                 rgba(255,255,255,0) 100%);
  }
}

/* Make the whole projects section transparent so flowers can show */
#projects { background: transparent; }

/* Ticker/Carousel section */
.featured-section {
  position: relative;
  background: transparent !important;
  overflow-x: hidden;     /* clip ticker edges */
  overflow-y: visible;    /* let flowers peek up */
  padding-bottom: 14vh;   /* space above the flower band */
  margin-top: 1.25rem;    /* tighter gap to the tagline */
  z-index: 2;
}

/* Soft fade over the very bottom so text stays readable near flowers */
@media (min-width: 640px) {
  .featured-section::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 12vh;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.6) 60%,
      rgba(255,255,255,0) 100%
    );
    z-index: 1;
  }
}

/* Reduce gap between the top featured section and tagline */
.featured-tagline {
  margin-top: -5rem;  /* Default is probably around 3-4rem — reduce it */
  margin-bottom: 2.2rem;  /* Keep some breathing space above carousel */
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: #5c1d91;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  letter-spacing: 0.5px;
  transform: translateY(12px);
  animation: taglineFadeUp 0.8s ease forwards;
    --accent: rgba(115, 62, 163, 0.35);
  --gap: 1.2rem;
}


.featured-tagline::before,
.featured-tagline::after {
  content: "";
  height: 2px;
  flex: 1 1 10%;
  max-width: 140px;
  border-radius: 2px;
  background:
    radial-gradient(12px 12px at 0% 50%, rgba(124,58,237,.35), transparent 60%),
    linear-gradient(90deg, rgba(124,58,237,.35), rgba(124,58,237,0));
  opacity: .7;
}

.featured-tagline span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 3.2vw, 1.55rem);
  letter-spacing: .02em;
  color: #5c2d8c;
}

.featured-tagline span:not(:last-child)::after {
  content: "•";
  margin: 0 .55rem 0 .75rem;
  color: rgba(91,33,182,.45);
  font-weight: 900;
}



/* Ensure the hero overlays don't block clicks */
.featured-section1::before,
.featured-section1::after { pointer-events: none; }

/* ONLY move the carousel / ticker (not the top featured section) */
#not-highlighted.featured-section {
  position: relative;
  background: transparent !important;
  overflow-x: hidden;
  overflow-y: visible;
  margin-top: -1.5rem;   /* Moves the carousel closer to the tagline */
  padding-bottom: 20vh;   /* Raises carousel slightly above flowers */
  z-index: 2;
}


/* Side accents */
.featured-tagline::before,
.featured-tagline::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%
  );
  max-width: 120px;
  opacity: 0.8;
}

/* Staggered word animation */
.featured-tagline span {
  display: inline-block;
  opacity: 0;
  transform: translateY(15px);
  animation: wordFadeUp 0.6s ease forwards;
}

/* Individual delays for staggered entrance */
.featured-tagline span:nth-child(1) { animation-delay: 0.2s; }
.featured-tagline span:nth-child(2) { animation-delay: 0.4s; }
.featured-tagline span:nth-child(3) { animation-delay: 0.6s; }
.featured-tagline span:nth-child(4) { animation-delay: 0.8s; }

/* Smooth appearance for the container */
@keyframes taglineFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered fade + lift for each word */
@keyframes wordFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.featured-tagline { 
  opacity: 0; 
  transform: translateY(12px);
}

.featured-tagline.in {
  animation: taglineFadeUp 0.8s ease forwards;
}

.featured-tagline.in span {
  animation: wordFadeUp 0.6s ease forwards;
}

.featured-tagline span:nth-child(1) { animation-delay: 0.2s; }
.featured-tagline span:nth-child(2) { animation-delay: 0.35s; }
.featured-tagline span:nth-child(3) { animation-delay: 0.5s; }
.featured-tagline span:nth-child(4) { animation-delay: 0.65s; }
.featured-tagline span:nth-child(5) { animation-delay: 0.8s; }
.featured-tagline span:nth-child(6) { animation-delay: 0.95s; }
.featured-tagline span:nth-child(7) { animation-delay: 1.1s; }

/* === Ensure spacing between "Featured Projects" title and cards === */

/* Fine-tune the gap per viewport */
@media (min-width: 2000px) {
  .featured-section1 .section-title {
    margin-bottom: 3rem !important;  /* extra breathing space on big screens */
  }
}

@media (min-width: 1440px) and (max-height: 900px) {
  .featured-section1 .section-title {
    margin-bottom: calc(var(--title-gap) + 0.75rem) !important;
  }
}