/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

div[data-elementor-post-type="page"] {
	overflow-x: hidden;
}

@media only screen and (min-width: 1200px) {
  header .elementor-nav-menu--main ul li:last-child {
	margin-left: 75px;
  }
}

.marquee-text {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	height: 100px;
	padding-top: 12px;
}
.marquee-text span {
	padding-right: 75px;
	color: #1B1B1B !important;
	line-height: 1;
	font-family: 'Nohemi', sans-serif;
	font-size: 85px !important;
	font-weight: 300 !important;
	text-transform: uppercase;
	white-space: nowrap;
	will-change: transform;
	-moz-transform: translateX(0);
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-moz-animation: scroll-left 20s linear infinite;
	-webkit-animation: scroll-left 20s linear infinite;
	animation: scroll-left 20s linear infinite;
}

@-moz-keyframes scroll-left {
	0% {
		-moz-transform: translateX(100%);
	}
	100% {
		-moz-transform: translateX(-100%);
	}
}

@-webkit-keyframes scroll-left {
	0% {
		-webkit-transform: translateX(100%);
	}
	100% {
		-webkit-transform: translateX(-100%);
	}
}

@keyframes scroll-left {
	0% {
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	100% {
		-moz-transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

.logo-carousel img {
	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
}

.hover-bw img {
	transition: 300ms filter linear, 300ms -webkit-filter linear;
}
.hover-bw img:hover {
	filter: grayscale(1) brightness(1.1);
}

.box-with-corner-ribbon .elementor-widget-html {
	position: absolute;
	top: 10px;
	left: -20px;
}
.box-with-corner-ribbon .elementor-widget-html .elementor-widget-container .corner-ribbon {
	background-color: #FFFFFF;
	transform: rotate(-15deg);
	padding: 8px 20px 6px 20px;
	font-family: 'Nohemi', sans-serif;
	font-size: 22px;
}
@media only screen and (max-width: 1500px) {
  .box-with-corner-ribbon .elementor-widget-html .elementor-widget-container .corner-ribbon {
	font-size: 20px;
  }
}
@media only screen and (max-width: 1200px) {
  .box-with-corner-ribbon .elementor-widget-html .elementor-widget-container .corner-ribbon {
	font-size: 18px;
  }
}
@media only screen and (max-width: 1024px) {
  .box-with-corner-ribbon .elementor-widget-html .elementor-widget-container .corner-ribbon {
	font-size: 16px;
  }
}

.project-categories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
}
.project-category-bubble {
	font-family: 'Nohemi', sans-serif;
	font-size: 16px;
	color: #1B1B1B;
	border-radius: 100px;
	background-color: #FFFFFF;
	padding: 0.3em 0.9em;
	white-space: nowrap;
}
.project-category-bubble[data-category="ready-to-play"] {
	background-color: #E78FA3; /* pink */
}
.project-category-bubble[data-category="tailored"] {
	background-color: #F2744E; /* orange */
}
.project-category-bubble[data-category="idea-creation"] {
	background-color: #F4D932; /* yellow */
}

search.e-filter, button.e-filter-item {
	cursor: pointer;
}

.svg-wrapper-home-hero, .svg-wrapper-contact-hero {
	width: 350px;
	height: 300px;
	margin-bottom: -75px;
}
.svg-wrapper-footer {
	width: 200px;
	height: 175px;
}
@media only screen and (min-width: 768px) {
	.svg-wrapper-home-hero {
		width: 450px;
		height: 400px;
		margin-bottom: -75px;
	}
	.svg-wrapper-contact-hero {
		width: 300px;
		height: 250px;
		margin-bottom: -150px;
	}
	.svg-wrapper-footer {
		width: 350px;
		height: 300px;
	}
}
@media only screen and (min-width: 1025px) {
	.svg-wrapper-home-hero {
		width: 600px;
		height: 500px;
		margin-bottom: -75px;
	}
	.svg-wrapper-contact-hero {
		width: 500px;
		height: 450px;
		margin-bottom: -200px;
	}
	.svg-wrapper-footer {
		width: 500px;
		height: 450px;
	}
}
@media only screen and (min-width: 1521px) {
	.svg-wrapper-home-hero {
		width: 800px;
		height: 650px;
		margin-bottom: -100px;
	}
	.svg-wrapper-contact-hero {
		width: 650px;
		height: 525px;
		margin-bottom: -200px;
	}
	.svg-wrapper-footer {
		width: 650px;
		height: 525px;
	}
}
@media only screen and (min-width: 1920px) {
	.svg-wrapper-footer {
		width: 800px;
		height: 650px;
	}
}

.svg-wrapper-home-hero svg, .svg-wrapper-contact-hero svg, .svg-wrapper-footer svg {
	width: 100%;
	height: 100%;
}

.svg-wrapper-home-hero svg .pfs-svg-color, .svg-wrapper-contact-hero svg .pfs-svg-color, .svg-wrapper-footer svg .pfs-svg-color {
  animation: pfsColorFade 10s infinite;
}

@keyframes pfsColorFade {
  0% {
    fill: #F4D932; /* yellow */
  }
  25% {
    fill: #E78FA3; /* pink */
  }
  50% {
    fill: #A4CC38; /* green */
  }
  75% {
    fill: #F2744E; /* orange */
  }
  100% {
    fill: #F4D932; /* yellow */
  }
}

@media only screen and (min-width: 1025px) {
	.home-about h2::before {
		content: ' ';
		position: absolute;
		top: -140px;
		left: -150px;
		width: 225px;
		height: 225px;
		background-image: url('/wp-content/uploads/2024/02/pfs_icon_09.png');
		background-size: contain;
	}
}


.grid-with-alternating-bg-colors .e-loop-item:nth-child(4n+1 of .project) .service-item {
	background-color: var(--e-global-color-secondary) !important; /* orange */
}
.grid-with-alternating-bg-colors .e-loop-item:nth-child(4n+2 of .project) .service-item {
	background-color: var(--e-global-color-14ef391) !important; /* green */
}
.grid-with-alternating-bg-colors .e-loop-item:nth-child(4n+3 of .project) .service-item {
	background-color: var(--e-global-color-764183d) !important; /* pink */
}
.grid-with-alternating-bg-colors .e-loop-item:nth-child(4n+4 of .project) .service-item {
	background-color: var(--e-global-color-primary) !important; /* yellow */
}

.service-item .e-n-accordion {
	border-bottom: 1px solid #1b1b1b;
}