/*
Theme Name: Flatsome Child
* Template: Flatsome
*/

/* Defaults */
:root {
  --font-sans: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

body {
    font-family: var(--font-sans) !important;
}

h1, h2, h3, h4, h5, h6, .heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a {
    font-family: var(--font-sans) !important;
}

.nav > li > a {
    font-family: var(--font-sans) !important;
}

#primary #main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main #content{
	position: relative;
	z-index: 1;
}

html{
	overflow-y: scroll;
}

.h1{
	font-size: 80px;
	color: #fff !important;
}

img{
	border-radius: 3px;
}

/* Media Queries */

/* Mobile (up to 549px) */
@media only screen and (max-width: 549px) {
	.single-case-thumbnail img{
		height: 200px !important;
	}

	h1{
		font-size: 40px !important;
	}

	.cases-page-additional-text{
		width: 100% !important;
	}
	
	.cases-page-header{
		display: block !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.single-case-content .case-section{
		flex-direction: column !important;
		gap: 2em !important;
	}
	
	.single-case-content .case-section .case-image{
		order: 2;
	}

	.contact-footer-text{
		font-size: 30px !important; 
	}

	.single-case-content{
		gap: 3em !important;
		margin: 3em 0 !important;
	}
}

/* Tablet (550px to 849px) */
@media only screen and (min-width: 550px) and (max-width: 849px) {
	.single-case-thumbnail img{
		height: 200px !important;
	}


	h1{
		font-size: 60px !important;
	}

	.cases-page-additional-text{
		width: 100% !important;
	}
	
	.cases-page-header{
		display: block !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.single-case-content .case-section{
		flex-direction: column !important;
		gap: 2em !important;
	}

	.single-case-content .case-section .case-image{
		order: 2;
	}

	.contact-footer-text{
		font-size: 30px !important; 
	}

	.single-case-content{
		gap: 3em !important;
		margin: 3em 0 !important;
	}
}

.contact-footer-text{
	font-size: 44px; 
}



/* Background */
	.sticky-add-to-cart--active, #wrapper, #main, #main.dark{
		  background-image: url(/wp-content/uploads/noise-background-sprite.webp);
    background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
	}

	#wrapper:before{
		content: url('/wp-content/uploads/2025/03/main-background-stripes.webp');
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
	}

	.main-menu-overlay{
		background-image: url('/wp-content/uploads/2025/04/Group-163-copy.webp');
		opacity: 1 !important;
		background-color: #000 !important;
	}

	.column-featured-project div.img > div:after{
		content: "";
		position: absolute;
		top: 120px;
		left: 50%;
		transform: translateX(-50%) scaleY(2);
		-webkit-transform: translateX(-50%) scaleY(2);
		width: 100%;
		height: 100px;
		background: rgba(107, 182, 166, 0.9);
		border-radius: 100%;
		-webkit-border-radius: 100%;
		filter: blur(100px);
		-webkit-filter: blur(100px);
		z-index: -1;
	}

	@-moz-document url-prefix() {
		.column-featured-project div.img > div:after{
			content: "";
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translateX(-50%) scaleY(2);
			-webkit-transform: translateX(-50%) scaleY(2);
			width: 100%;
			height: 100px;
			background: rgba(107, 182, 166, 0.4);
			border-radius: 100%;
			-webkit-border-radius: 100%;
			filter: blur(100px);
			-webkit-filter: blur(100px);
			z-index: -1;
		}
	}

	.section-about h4 span:after{
		content: "";
		position: absolute;
		top: -50%;
		left: -200px;
		transform: translateX(-200px), translateX(-50%);
		-webkit-transform: translateX(-200px), translateX(-50%);
		width: 320px;
		height: 320px;
		background: rgba(255, 233, 105, 0.45);
		border-radius: 100%;
		-webkit-border-radius: 100%;
		filter: blur(200px);
		-webkit-filter: blur(200px);
		z-index: -1;
	}

	@-moz-document url-prefix() {
			.section-about h4 span:after{
			content: "";
			position: absolute;
			top: -130px;
			left: -140px;
			transform: translateX(-140px), translateY(-130px);
			-webkit-transform: translateX(-140px), translateY(-130px);
			width: 500px;
			height: 500px;
			background: rgba(255, 233, 105, 0.10);
			border-radius: 100%;
			-webkit-border-radius: 100%;
			filter: blur(500px);
			-webkit-filter: blur(500px);
			z-index: -1;
		}
	}

	.section-services .col-inner:after{
		content: "";
		position: absolute;
			top: 80px;
		right: -150px;
		transform: translateX(-150px), translateY(80px);
		-webkit-transform: translateX(-150px), translateY(80px);
		width: 300px;
		height: 300px;
		background: rgba(176, 115, 177, 0.7);
		border-radius: 100%;
		-webkit-border-radius: 100%;
		filter: blur(230px);
		-webkit-filter: blur(230px);
		z-index: -1;
	}

	@-moz-document url-prefix() {
			.section-services .col-inner:after{
			content: "";
			position: absolute;
				top: 80px;
			right: -200px;
			transform: translateX(-200px), translateY(80px);
			-webkit-transform: translateX(-200px), translateY(80px);
			width: 400px;
			height: 500px;
			background: rgba(176, 115, 177, 0.20);
			border-radius: 100%;
			-webkit-border-radius: 100%;
			filter: blur(300px);
			-webkit-filter: blur(300px);
			z-index: -1;
		}
	}

/* Text */
	.hero-text{
		font-size: 59px !important;
	}

	.clearcode-text {
		font-size: 16px;
	}

/* Buttons */
	.clearcode-btn{
		text-transform: none !important;
		background-color: #141414 !important;
		border: 1px solid rgb(117, 117, 117, .39) !important;
		border-radius: 3px !important;
	}

	.clearcode-btn.contact-btn{
		  display: inline-flex;
  align-items: center;
  justify-content: center;
    cursor: pointer;
    font-size: .97em;
    font-weight: bolder;
    letter-spacing: .03em;
    line-height: 2.4em !important;
    margin-right: 1em;
    margin-top: 0;
    max-width: 100%;
    height: 2.5em;
    padding: 0 1.2em;
    position: relative;
    text-decoration: none;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    text-transform: uppercase;
    transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
		text-transform: none;
		background-color: #273834 !important;
		border: 1px solid #80d8c9 !important;
		color: #80d8c9 !important;
		border-radius: 3px;
		
	}

/* Headers */
	#top-bar{
		display: none;
	}

	.header-wrapper.stuck{
		background-color: rgb(20,20,20, .7);
		border-bottom: 1px solid #2f2f2f;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	#top-bar .flex-col{
		margin-right: unset;
		width: 100%;
	}

	#top-bar .flex-center, 	#top-bar .flex-right, 	#top-bar .flex-grow{
		display: none;
	} 

	#top-bar .flex-left .html_top_right_text{
		flex: 1;
	}

	#top-bar ul.nav-left{
		flex-flow: unset;
	}

	#top-bar ul.nav-left .custom.html_topbar_left{
		white-space: nowrap;
	}

	#top-bar .hide-for-medium.flex-left{
		display: block !important;
	}

/* Icons */
	.nav-icon.has-icon i:before{
		color: #fff;
	}

/* Home Headings */
	h3.home-heading{
    color: #fff;
    font-weight: 400;
    border-bottom: 1px solid #3E3E3E;
    padding-bottom: 1em;
    display: flex;
    align-items: center;
		margin-bottom: 4em;
	}

		.home-heading:before {
		content: "";
		margin-right: 10px;
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 8px;
		background-image: url(/wp-content/uploads/2025/03/Logo-mark.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}


/* Services accordion */
	.accordion.services-accordion{
		counter-reset: option-counter;
		padding-top: 1em;
	}

	.accordion.services-accordion .accordion-item{
		counter-increment: option-counter;
	}

	.accordion.services-accordion .accordion-title:before{
  	content: "(" counter(option-counter) ")";
		color: #C1C1C1;
		font-size: 44px;
	}

	.accordion.services-accordion .accordion-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 4em;
		padding-left: unset;
		padding-right: unset;
		border: unset;
		padding: 0 2em;
		transition: background-color 0.3s ease-in-out;
	}

	.accordion.services-accordion .accordion-title.active{
		background-color: rgb(217, 217, 217, 0.04);
		font-weight: 400;
	}

	.accordion.services-accordion .accordion-inner{
		padding: 1em 7.7em;
	}

	.accordion.services-accordion .accordion-title button{
		position: relative;
		order: 3;
		font-size: 44px;
		margin-left: auto;
		width: unset;
	}

	.accordion.services-accordion .accordion-item:nth-child(4n+1) button{
		color: #b175af;
	}

	.accordion.services-accordion .accordion-item:nth-child(4n+2) button{
		color: #fdea76;
	}

	.accordion.services-accordion .accordion-item:nth-child(4n+3) button{
		color: #f35e46;
	}

	.accordion.services-accordion .accordion-item:nth-child(4n+4) button{
		color: #6ab4a6;
	}

	h3.accordion_title{
		color: #fff;
		font-weight: 400;
		border-bottom: 1px solid #3E3E3E;
		padding-bottom: 1em;
		display: flex;
		align-items: center;
	}

	.accordion.services-accordion .accordion-title > span{
		color: #fff;
		font-size: 44px;
	}

.section-services .home-heading{
	margin-bottom: .5em;
}

/* Footer contact section */
	.footer-contact .icon-box.footer-top{
		justify-content: center;
	}

	.footer-contact .icon-box .icon-box-text{
		flex: unset;
		max-width: unset;
		margin: unset;
	}

	.footer-contact .icon-box .icon-box-text p{
		margin: unset;
	}

	.footer-contact .icon-box .icon-box-img{
		flex: unset;
		max-width: unset;
		margin: unset;
	}

	.footer-contact .wpcf7 input[type="text"], .footer-contact .wpcf7 input[type="email"], .footer-contact .wpcf7 textarea, .wpcf7 select{
		background-color: transparent;
		border: unset;
		border-bottom: 1px solid #3E3E3E;
		color: #777;
	}

select.wpcf7-form-control.wpcf7-select option {
  color: #444 !important;
}

#footer form.invalid .woocommerce-invalid input, #footer form.invalid input.wpcf7-not-valid {
    border-color: var(--fs-color-alert) !important;
    color: var(--fs-color-alert) !important;
}

#footer{
	padding: 0 15px;
}

.wpcf7-response-output{
	border: 0 !important;
	text-align: left;
	color: #c1c1c166;
	padding: 0 !important;
	margin: 0 !important;
}

	.footer-contact .wpcf7 input[type="submit"]{
		background-color: #1b1b1a;
		border-radius: 3px;
		border: 1px solid #5c5c5c;
		text-transform: unset;
		font-weight: 400;
	}

	.footer-contact .wpcf7 .footer-contact-form-count{
		text-align: right;
		color: rgb(193, 193, 193, .4)
	}

	.footer-contact .wpcf7 p{
		margin-bottom: 1em;
	}

/* Off-screen menu */ 
	.off-canvas-center .mfp-close{
		color: #fff !important;
		opacity: 1;
	}

	.off-canvas-center .mfp-container{
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.off-canvas-center .mfp-content{
		max-width: 1890px;
		border-bottom: 1px solid #3e3e3e;
	}

.footer-bg-image{
	padding: 0;
}

.fsm-nav-socials{
	display: flex;
	flex-direction: column;
}


/* Page transition styling */
/* Base style for the overlay */
#transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/wp-content/uploads/noise-background-sprite.webp);
    background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
	background-color: #000;
  z-index: 9999;
  transition: transform 0.5s ease;
	display: flex;
  align-items: center;
  justify-content: center;
}

/* === ENTRY ANIMATION === */
/* When the page loads, the body has the class "entry".
   The overlay is initially at transform: translateY(0) (covering the page). */
body.entry #transition-overlay {
  transform: translateY(0);
}

/* When we add the class "animate" in entry mode,
   the overlay slides upward off the page (to -100%) */
body.entry.animate #transition-overlay {
  transform: translateY(-100%);
}

/* === EXIT (LINK CLICK) ANIMATION === */
/* On a link click, we remove the entry class and add "exit".
   In exit mode the overlay starts off-screen at the bottom. */
body.exit #transition-overlay {
  transform: translateY(100%);
}

/* When "exit" mode has the animate class added,
   the overlay slides upward from the bottom to cover the page (to 0). */
body.exit.animate #transition-overlay {
  transform: translateY(0);
}















.single-case-thumbnail{
	display: flex;
	justify-content: center;
	    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.single-case-thumbnail img{
	display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

.single-cases #primary{
	position: relative;
	z-index: 1;
}

.single-cases article{
	margin-top: -100px;
	z-index: 1;
	width: 100%;
}

.single-case-content{
	display: flex;
	flex-direction: column;
	gap: 5em;
	margin: 5em 0;
}

.single-case-content .case-section{
	display: flex;
	align-items: center;
	gap: 5em;
	margin: 0 30px;
}

.case-section .case-image img{
	height: auto;
	max-height: 300px;
	width: auto;
	max-width: unset;
}


.single-case-client-name{
	color: #fff;
	margin-bottom: 0;
}

.single-case-title{
	margin-bottom: 0;
	line-height: 1;
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
}

.single-case-header{
	padding: 0 2em;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2em;
}

.single-case-header-left,
.single-case-header-right {
  min-width: 0;
}

.single-case-header-right{
	display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.single-case-header .case-tag {
    padding: 8px 12px;
    display: inline-block;
    border-radius: 3px;
    font-size: 14px;
}

.wpcf7-spinner, .wpcf7-not-valid-tip{
	display: none;
}

.case-slide .case-tag {
    padding: 8px 12px;
    display: inline-block;
    border-radius: 2px;
    font-size: 13px;
}

.cases-slider-home-tag-container{
	display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.case-slide .short-desc {
    margin: 1.5rem 0;
    color: #C1C1C1;
    font-size: 16px;
    font-weight: 400;
}

.case-slide h2 {
    margin: 0.5rem 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.case-slide img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.cases-slider .slick-track{
	gap: 2em;
	display: flex;
}

.post-type-archive-cases #primary > #main{
	padding: 30px;	
}

.cases-slider.slick-slider{
	margin: 0 30px;
}

.cases-slider.slick-slider .slick-prev{
	left: -30px;
}

.cases-slider.slick-slider .slick-next{
	right: -30px;
}