* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  box-sizing: border-box;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* MOBILE */
@media screen and (max-width: 768px) {
	:root {
		--client-elements-displayed: 2 !important;
	}
	/*breadcrumb hide*/
	#breadcrumb {
		display: none !important; 
	}
  
	/*mobile hide*/
	.mobile-hide {
		display: none !important;
	}

	/* SLIDERS */
	.cd-hero-slider .slider-half-right,
	.cd-hero-slider .slider-half-left  {
		left: 50% !important;
		right: inherit !important;
	}
	.cd-hero-slider .cd-half-width {
		width: 100% !important;
	}
	.cd-hero-slider .cd-half-width {
		-webkit-transform: translate(-50%, -50%) !important;
		-moz-transform: translate(-50%, -50%) !important;
		-ms-transform: translate(-50%, -50%) !important;
		-o-transform: translate(-50%, -50%) !important;
		transform: translate(-50%, -50%) !important;
	}
  
	/* SERVICES */
	.row-services-content .column {
		flex: 1 1 100% !important;
	}
  
	/* CLIENTS */
	.client-content li i {
		font-size: 3rem !important;
	}
  
	/* PROJECT */ 
	.carousel-item {
		--width: clamp(300px, 60vw,  600px) !important;
		--height: clamp(400px, 80vw,  800px) !important;
	}
  
	/* SOFTWARE CONTENT */
	.row-software-content:after {
		display: none;
	}
  
	/* VIEWER CONTENT */
	.row-viewer-content {
		min-height: 300px !important;
	}
	.title-viewer-content {
		padding: 0px !important;
	}
	.title-viewer-content .heading-section {
		text-align: center;
	}

	/* VIEWER 1 CONTENT */
	.row-viewer-1-content {
		min-height: 300px !important;
	}
	.title-viewer-1-content {
		padding: 0px !important;
	}
	.title-viewer-1-content .heading-section {
		text-align: center;
	}
	.viewer-1-content {
		aspect-ratio: 4 / 4 !important;
	}
  
	/* PROJECT DETAIL CONTENT */
	.row-project-detail-content {
		min-height: 300px !important;
	}
	.title-project-detail-content {
		padding: 0px !important;
	}
	.title-project-detail-content .heading-section {
		text-align: center;
	}
	.project-detail-content {
		aspect-ratio: 4 / 4 !important;
	}
  
	/* MORE CONTENT */
	.row-more-content {
		min-height: 300px !important;
	}
  
	/* PRESENT FOOTER */ 
	#present-footer {
		height: 80vh !important;
	}
	.present-content {
		display: none;
	}
	.row-present-content {
		text-align:center;
		padding: 1rem !important;
		height: 500px;
	}
	.row-present-content .column {
		width: 100%;
	}
  
	/* FAQ */
	.row-faq-content {
		display: table !important;
	}
	.row-faq-content  .title-faq-content {
		margin: 2rem 0;
	    width: 100%;
		text-align: center;
	}
	
	/* CONTACT */
	.contact-content .category {
		margin: 0 auto;
		display: -webkit-inline-box;
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
	}
	.input-container-first {
		display: block !important;
	}
	.contact-content {
		display: block !important;
		overflow-x: auto;
	}
	.category .custom-radio-button-container,
	.category .custom-radio-button {
		width: 150px !important;
	}
	.input-container .custom-radio-button-center {
		margin: 0;
	}
	.input-form {
		margin: 10px 0;
	}
	
	#contact .title-contact-content, 
	#project .title-project-content,
	#testim .title-testim-content, 
	#showcase .title-showcase-content, 
	#services .title-services-content, 
	#software .title-software-content,
	#more .title-more-content {
		margin: 0 0 5vh 0 !important;
	}
	
	/* FORM FOOTER */
	#footer-form .footer-form-left  {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}
	#footer-form .footer-form-right {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		padding: 1.3rem 1rem !important;
		border-radius: 0 !important;
	}

	.footer-form-container {
		padding: 0rem !important;
	}
  
	.right-container {
		display: none;
	}
	.footer-form-right .subscribe-form .form-group {
		display: grid !important;
		grid-auto-rows: max-content;
		grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
	}
	.footer-form-right .subscribe-form .form-group .submit {
		width: 100% !important;
	}
	.footer-form-right .subscribe-form {
		padding: 1rem !important;
	}
	.footer-form-right .subscribe-form .form-control,
	.footer-form-right .subscribe-form .custom-select {
		max-width: 100% !important; 
	}
	
	@supports (position: sticky) {
		.is-sticky {
			top: calc(50vh - 150px) !important; 
		}
	}
}

/* -------------------------------- 
   Slider
-------------------------------- */
#slider {
	position: relative;
	z-index: 0;
}

.cd-hero {
	position: relative;
}

.cd-hero-slider {
	position: relative;
	height: calc(100vh - 65px);
	overflow: hidden;
}

.cd-hero-slider li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 0;
}

.cd-hero-slider li.selected {
	/* this is the visible slide */
	position: relative;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	z-index: 1;
	opacity: 1;
}

.cd-hero-slider li.move-left {
	/* slide hidden on the left */
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.cd-hero-slider li.is-moving,
.cd-hero-slider li.selected {
	/* the is-moving class is assigned to the slide which is moving outside the viewport */
	-webkit-transition: -webkit-all 5s;
	-moz-transition: -moz-all 5s;
	transition: all 5s;
}

/* -------------------------------- 
   Single slide style
-------------------------------- */
.cd-hero-slider li {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.cd-hero-slider li img {
	object-fit: cover;
}

.cd-hero-slider .cd-full-layer {
	position: absolute;
	width: 100%;
	top: 0px;
	height: 100%;
	background: linear-gradient(to bottom, #00000000 50%, var(--foregroud-color-1) 100%);
}

.cd-hero-slider .cd-full-layer-tile {
	position: absolute;
	width: 100%;
	top: 0px;
	height: 100%;
	z-index: -1;
	background: var(--foregroud-color-5);
}

.cd-hero-slider .cd-full-width {
	position: absolute;
	z-index: 1;
	top: 50%;
	width: 100%;
	/* Force Hardware Acceleration in WebKit */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.cd-hero-slider .cd-half-width {
	position: absolute;
	z-index: 1;
	top: 50%;
	width: 100%;
	/* Force Hardware Acceleration in WebKit */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate(0%, -50%);
	-moz-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	-o-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.cd-hero-slider .cd-full-width {
	left: 50%;
}

.cd-hero-slider .slider-half-left {
	left: 50%;
}

.cd-hero-slider .slider-half-right {
	right: 50%;
}

.cd-hero-slider h1,
.cd-hero-slider h2,
.cd-hero-slider p {
	text-shadow: 0 3px 10px rgba(0, 0, 0, 1);
	margin: 0 auto 14px;
	padding: 0 2rem;
	color: #ffffff;
	width: 100%;
	max-width: 700px;
	text-align: center;
	word-break: break-word;
}

.cd-hero-slider a {
	margin: 0 auto;
	width: fit-content;
	max-width: 600px;
}

.cd-hero-slider h1,
.cd-hero-slider h2 {
	font-size: var(--font-main-title);
	font-weight: 600;
	text-transform: uppercase;
}

.cd-hero-slider p {
	font-size: var(--font-second-title);
}

@media only screen and (min-width: 768px) {
	.cd-hero-slider .cd-half-width {
		width: 50%;
	}
}

/* -------------------------------- 
   Single slide tile animation
-------------------------------- */
.slider-tile-content {
	position: absolute;
	height: -webkit-fill-available;
}

.slide-left {
	left: 0px;
}

.slide-right {
	right: 0px;
}

.slider-tiles,
.slider-tiles-right,
.slider-tiles-left {
	position: relative;
	padding: 0px;
	width: max-content;
	max-height: 100%;
	max-width: 1000px;
	margin: 0 auto;
	transform: rotateX(-50deg) rotateY(0deg) rotateZ(35deg);
	-webkit-transform: rotateX(-50deg) rotateY(0deg) rotateZ(35deg);
	-moz-transform: rotateX(-50deg) rotateY(0deg) rotateZ(35deg);
	-ms-transform: rotateX(-50deg) rotateY(0deg) rotateZ(35deg);
	-o-transform: rotateX(-50deg) rotateY(0deg) rotateZ(35deg);
}

.slider-tiles .tile-layout,
.slider-tiles-right .tile-layout-right,
.slider-tiles-left .tile-layout-left {
	padding: 1rem;
	max-height: 100%;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	opacity: 0;
}

.slider-tiles .tile-layout {
	transform: translate(2000px, 0px);
}

.slider-tiles .tile-layout img,
.slider-tiles-right .tile-layout-right img,
.slider-tiles-left .tile-layout-left img {
	border-radius: 24px;
	box-shadow: var(--shadow-menu);
	animation: tile-shadow 2.5s ease-in-out infinite;
}

.slider-tiles-right .tile-layout-right {
	transform: translate(2000px, -200px);
}

.slider-tiles-left .tile-layout-left {
    transform: translate(-2000px, 350px);
}

/* Anti-flash AJAX/loadpage: le premier slide reste hors écran jusqu'à l'init JS. */
.cd-hero-slider.slider-booting .selected .tile-layout,
.cd-hero-slider.slider-booting .selected .tile-layout-right,
.cd-hero-slider.slider-booting .selected .tile-layout-left {
	transition: none;
	opacity: 0;
}

.cd-hero-slider.slider-booting .selected .tile-layout {
	transform: translate(2000px, 0px);
}

.cd-hero-slider.slider-booting .selected .tile-layout-right {
	transform: translate(2000px, -200px);
}

.cd-hero-slider.slider-booting .selected .tile-layout-left {
	transform: translate(-2000px, 350px);
}


@keyframes tile-shadow {
	0% {
		box-shadow: 20px 20px 30px #00000000;
	}
	50% {
		box-shadow: 20px 20px 30px var(--main-color);
	}
	100% {
		box-shadow: 20px 20px 30px #00000000;
	}
}

.selected .tile-layout-right:nth-child(1) {
	transition-delay: 0s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(500px, -200px);
}

.selected .tile-layout-left:nth-child(1) {
    transition-delay: 0s;
    transition-duration: 1s;
    opacity: 1;
    transform: translate(-400px, 350px);
}

.selected .tile-layout:nth-child(1) {
	transition-delay: 0s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(2) {
	transition-delay: 1s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(3) {
	transition-delay: 2s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(4) {
	transition-delay: 3s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(5) {
	transition-delay: 4s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(6) {
	transition-delay: 5s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(7) {
	transition-delay: 6s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(8) {
	transition-delay: 7s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(9) {
	transition-delay: 8s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(10) {
	transition-delay: 9s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(11) {
	transition-delay: 10s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

.selected .tile-layout:nth-child(12) {
	transition-delay: 11s;
	transition-duration: 1s;
	opacity: 1;
	transform: translate(0px, 0px);
}

/* Animation de sortie pour les tiles */
.cd-hero-slider li.is-moving .tile-layout {
	opacity: 0;
	transform: translate(-2000px, 0);
	/* ou +2000px selon la direction voulue */
	transition: opacity 1s ease, transform 1s ease;
}

/* Animation de sortie pour les tiles */
.cd-hero-slider li.is-moving .tile-layout-right,
.cd-hero-slider li.is-moving .tile-layout-left {
	opacity: 0;
	transition: opacity 1s ease;
}

/* -------------------------------- 
   Single slide animation
-------------------------------- */
@media only screen and (min-width: 768px) {
	.cd-hero-slider .move-left .cd-half-width {
		-webkit-transform: translateX(-40px);
		-moz-transform: translateX(-40px);
		-ms-transform: translateX(-40px);
		-o-transform: translateX(-40px);
		transform: translateX(-40px);
	}

	.cd-hero-slider .selected .cd-half-width {
		/* this is the visible slide */
		opacity: 1;
		-webkit-transform: translate(0%, -50%);
		-moz-transform: translate(0%, -50%);
		-ms-transform: translate(0%, -50%);
		-o-transform: translate(0%, -50%);
		transform: translate(0%, -50%);
	}

	.cd-hero-slider .is-moving .cd-half-width {
		/* this is the slide moving outside the viewport 
		   wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
		-webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
		-moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
		transition: opacity 0s 0.5s, transform 0s 0.5s;
	}

	.cd-hero-slider .cd-full-width h1,
	.cd-hero-slider .cd-full-width h2,
	.cd-hero-slider .cd-full-width p,
	.cd-hero-slider .cd-half-width h1,
	.cd-hero-slider .cd-half-width h2,
	.cd-hero-slider .cd-half-width p {
		opacity: 0;
		-webkit-transform: translateX(100px);
		-moz-transform: translateX(100px);
		-ms-transform: translateX(100px);
		-o-transform: translateX(100px);
		transform: translateX(100px);
	}

	.cd-hero-slider .move-left .cd-full-width h1,
	.cd-hero-slider .move-left .cd-full-width h2,
	.cd-hero-slider .move-left .cd-full-width p
	.cd-hero-slider .move-left .cd-half-width h1,
	.cd-hero-slider .move-left .cd-half-width h2,
	.cd-hero-slider .move-left .cd-half-width p {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		-moz-transform: translateX(-100px);
		-ms-transform: translateX(-100px);
		-o-transform: translateX(-100px);
		transform: translateX(-100px);
	}

	.cd-hero-slider .selected .cd-full-width h1,
	.cd-hero-slider .selected .cd-full-width h2,
	.cd-hero-slider .selected .cd-full-width p,
	.cd-hero-slider .selected .cd-half-width h1,
	.cd-hero-slider .selected .cd-half-width h2,
	.cd-hero-slider .selected .cd-half-width p {
		/* this is the visible slide */
		opacity: 1;
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}

	.cd-hero-slider li.is-moving .cd-full-width h1,
	.cd-hero-slider li.is-moving .cd-full-width h2,
	.cd-hero-slider li.is-moving .cd-full-width p {
		/* this is the slide moving outside the viewport 
		   wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
		-webkit-transition: opacity 0s 0.8s, -webkit-transform 0s 1s;
		-moz-transition: opacity 0s 0.8s, -moz-transform 0s 1s;
		transition: opacity 0s 0.8s, transform 0s 1s;
	}

	.cd-hero-slider li.selected h1,
	.cd-hero-slider li.selected h2 {
		-webkit-transition: opacity 1.2s 1s, -webkit-transform 1.2s 0.8s;
		-moz-transition: opacity 1.2s 1s, -moz-transform 1.2s 0.8s;
		transition: opacity 1.2s 1s, transform 1.2s 0.8s;
	}

	.cd-hero-slider li.selected p {
		-webkit-transition: opacity 0.8s 0.3s, -webkit-transform 1.2s 0.5s;
		-moz-transition: opacity 0.8s 0.3s, -moz-transform 1.2s 0.5s;
		transition: opacity 0.8s 0.3s, transform 1.2s 0.5s;
	}
	
	/* État par défaut hors champ */
	.cd-hero-slider .cd-half-width a,
	.cd-hero-slider .cd-full-width a {
		opacity: 0;
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	/* Quand le slide est actif → bouton visible */
	.cd-hero-slider li.selected .cd-half-width a,
	.cd-hero-slider li.selected .cd-full-width a {
		opacity: 1;
		transition-delay: 0.4s; /* un léger décalage après le texte */
	}

	/* Quand le slide sort (is-moving) → bouton disparaît en douceur */
	.cd-hero-slider li.is-moving .cd-half-width a,
	.cd-hero-slider li.is-moving .cd-full-width a {
		opacity: 0;
	}
}
/* -------------------------------- 

Slider navigation

-------------------------------- */
.cd-slider-nav {
	position: absolute;
	bottom:7%;
	width: 100%;
	z-index: 1;
	text-align: center;
	height: 12px;
}
.cd-slider-nav nav, .cd-slider-nav ul, .cd-slider-nav li, .cd-slider-nav a {
	height: 100%;
	border-radius: var(--border-radius);
}
.cd-slider-nav nav {
	display: inline-block;
	position: relative;
}

.cd-slider-nav li {
	display: inline-block;
	width: 10vw;
	max-width:80px;
	margin: 0 auto;
}
.cd-slider-nav li a {
	background-color: #ffffff15;
	-webkit-transition: -webkit-transform 0.2s, background-color 0.2s;
	-moz-transition: -moz-transform 0.2s, background-color 0.2s;
	transition: transform 0.2s, background-color 0.2s;
}
.cd-slider-nav li.selected a {
	background-color: var(--main-color);
	-webkit-transition: -webkit-transform 0.2s, background-color 0.2s;
	-moz-transition: -moz-transform 0.2s, background-color 0.2s;
	transition: transform 0.2s, background-color 0.2s;
}
/*.no-touch .cd-slider-nav li.selected a:hover {
	background-color: transparent;
}*/
.cd-slider-nav a {
	display: block;
	position: relative;
	line-height: 80px;
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	transition: background-color 0.2s;
}

/*.no-touch .cd-slider-nav a:hover {
	background-color: rgba(0, 1, 1, 0.5);
}*/

/* -------------------------------- 

Javascript disabled

-------------------------------- */
.no-js .cd-hero-slider li {
	display: none;
}
.no-js .cd-hero-slider li.selected {
	display: block;
}

.no-js .cd-slider-nav {
	display: none;
}

#first {height: 91vmin;padding: 0px;}

.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/* BREADCRUMB */
#breadcrumb {
    width: 100%;
    position: relative;
    max-width: var(--width-site);
    margin: 0 auto;
    display: flex;
    align-items: center;
    z-index: 0;
}
.breadcrumb {
	display: flex;
	overflow: hidden;
	margin: 2rem 0;
	text-align: center;
	height: 60px;
	border-radius: var(--border-radius);
    background: var(--black-1-grey);
	box-shadow: var(--shadow-menu);
	z-index: 1;
	font-size: var(--font-body);
}

.breadcrumb a {
	position: relative;
	display: flex;
	flex-grow: 1;
	text-decoration: none;
	margin: auto;
	height: 100%;
	color: #ffffff05;
	transition: all 0.3s ease-in-out;
}

.breadcrumb a:after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 60px;
	height: 60px;
	top: 0;
	right: -15px;
	transform: scale(0.707) rotate(45deg);
	box-shadow: 1px -1px #ffffff05;
	z-index: 1;
}

.breadcrumb a:hover {
	color: white;
	transition: all 0.3s ease-in-out;
}

.breadcrumb a:last-child:after {
	content: none;
}
.breadcrumb a i {
    font-size: 35px;
    top: 7px;
    position: relative;
}
.breadcrumb-inner {
	display: block;
    margin: auto;
    min-width: 10px;
    padding: 0 2rem;
    line-height: 47px;
    z-index: 1;
}

.breadcrumb-inner-home {
	display: block;
    margin: auto;
    min-width: 10px;
    padding: 0 2rem 0 1rem;
    line-height: 47px;
    z-index: 1;
}
.breadcrumb-title,
.breadcrumb-title-icon {
    position: relative;
    text-align: center;
	letter-spacing: 1.5px;
    font-size: var(--font-body);
}
.breadcrumb a.active{
	color: #ffffff;
}

.breadcrumb a.active:hover {
	color: var(--main-color);
}


/* CLIENTS */
#client{
    display: flex;
    max-width: var(--width-site);
    margin: 0 auto;
	position: relative;
	z-index: 0;
}
.client {
  color: #eee;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.client:before, .client:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.client:before {
  left: 0;
  background: linear-gradient(to right, var(--foregroud-color-1) 0%, transparent 100%);
}
.client:after {
  right: 0;
  background: linear-gradient(to left, var(--foregroud-color-1) 0%, transparent 100%);
}
.client-content {
  list-style: none;
  height: 150px;
  display: flex;
  animation: scrolling var(--client-animation-duration) linear infinite;
}
.client-content:hover {
  animation-play-state: paused;
} 
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--client-element-width) * var(--client-elements))); }
}
.client-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--client-element-width);
  max-height: 100%;
  white-space: nowrap;
  margin: 0 1rem;
}
.client-content li img {
  width: 100%;
  max-width: 230px;
  object-fit: contain;
  opacity: 0.2;
  transition: all 0.3s ease-in-out;
}
.client-content li img:hover {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

/* SERVICES */
#services {
    width: 100%;
    position: relative;
    max-width: var(--width-site);
    margin: 0 auto;
	padding: 5rem 0;
    display: flex;
    align-items: center;
	z-index: 0;
}
.row-services-content {
    max-width: var(--width-site);
    margin: auto;
    align-items: center;
	width: 100%;
	min-height: 300px;
}
.row-services {
    display: flex;
    flex-wrap: wrap;
}
.row-services-content .column {
	flex: 1 1 33.33%;
	display: flex;
}
.row-services-content .column-margin {
	padding: 1rem;
    margin: 1rem;
	width: 100%;
    border-radius: var(--border-radius-large);
	border: 1px solid transparent;
    background: #ffffff05;
	backdrop-filter: var(--blur);
    transition: all 0.3s ease-in-out;
}

.row-services-content .column-margin:hover,
.row-services-content .column-margin:active,
.row-services-content .column-margin:focus  {
    transition: all 0.3s ease-in-out;
    transform: translateY(-6px);
    background: linear-gradient(180deg, var(--main-color-transp-2), rgba(255, 255, 255, 0.045));
    border-color: var(--main-color-transp);
	box-shadow: 0 50px 100px -20px var(--main-color-transp-2), 0 30px 60px -30px var(--main-color-transp-1);
}

.services-content .heading-section {
    text-transform: uppercase;
	font-size: var(--font-second-title);
    text-align: left;
}

.services-content .service-desc {
	font-size: var(--font-body);
	margin: 0 0 1rem 0;
    white-space: normal;
}

.title-services-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
    margin-bottom: 2rem;
	word-break: break-word;
    display: grid;
}


.title-services-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1px;
    font-size: var(--font-second-title);
	font-weight: 100;
}

.services-content .subheading {
    text-align: left;
}

.services-content .subheading .tag {
	color: #ffffff;
    text-transform: none;
    letter-spacing: 1px;
    background: var(--main-color-transp);
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    padding: 5px 10px;
    font-size: var(--font-size-main);
    text-align: center;
    display: inline-block;
    margin-bottom: 10px;
	transition: all 0.2s ease-in-out;
}

.services-content .subheading .tag:hover {
    transform: translateY(-2px);
    background: var(--main-color);
	transition: all 0.2s ease-in-out;
}

.services-content .services-img {
    display: flex;
    width: 100%;
    position: relative;
	align-items: center;
}

.row-services-content .column-margin:hover .services-img img {
    transform: translateY(-4px);
    filter: drop-shadow(0 18px 36px rgba(239, 107, 67, 0.18));
}

.services-content .services-img img {
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.35));
    transition: transform .25s ease, filter .25s ease;
}

.services-content .services-img img {
    position: relative;
    object-fit: cover;
	width: 100px;
    height: 100px;
    display: block;
}

/* SOFTWARE */
#software {
    width: 100%;
    position: relative;
    max-width: var(--width-site);
    margin: 0 auto;
	padding: 5rem 0;
    display: flex;
    align-items: center;
	z-index: 0;
}
.row-software-content {
    max-width: var(--width-site);
    margin: auto;
    align-items: center;
	width: 100%;
	min-height: 300px;
	margin: 1rem;
}
.row-software-content:after {
    background: url('../images/wind.webp') center no-repeat;
	position: absolute;
    bottom: 100px;
    width: 100%;
    height: 114px;
    content: "";
	opacity: 0.5;
}
.row-software {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    min-height: 220px;
}
.row-software-content .column {
	flex: 6;
	display: flex;
}
.row-software-content .column-margin {
	padding: 1rem;
	width: 100%;
    transition: all 0.3s ease-in-out;
}

.row-software-content .column-margin:hover,
.row-software-content .column-margin:active,
.row-software-content .column-margin:focus  {
    transition: all 0.3s ease-in-out;
	transform:  translateY(-10px);
}

.row-software-content .column-margin:hover>.heading-section,
.row-software-content .column-margin:active>.heading-section,
.row-software-content .column-margin:focus>.heading-section {
    transition: all 0.3s ease-in-out;
	height: 60px;
	opacity: 1;
}

.row-software-content .column-margin:hover>.software-img img,
.row-software-content .column-margin:active>.software-img img,
.row-software-content .column-margin:focus>.software-img img   {
    transition: all 0.3s ease-in-out;
}

.software-content .heading-section {
    text-transform: uppercase;
	display: grid;
    text-align: center;
    height: 0px;
	font-size: var(--font-body);
	font-weight: 300;
    align-items: center;
	opacity: 0;
	transition: all 0.3s ease-in-out;
}

.title-software-content .heading-section {
    color: var(--main-color);
	font-size: var(--font-main-title);
    text-transform: uppercase;
    margin-bottom: 2rem;
	word-break: break-word;
    display: grid;
}

.title-software-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1px;
    font-size: var(--font-second-title);
	font-weight: 100;
}

.software-content .software-img {
    display: flex;
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto 1rem;
    align-items: center;
}

.software-content .software-img img {
    position: relative;
    object-fit: cover;
    display: block;
}

.software-content .software-img .blender {
    position: relative;
    object-fit: cover;
    display: block;
	background: url('../images/software/blender-h.webp') center no-repeat;
    width: 100%;
    height: 100%;
	transition: all 0.3s ease-in-out;
}

.row-software-content .column-margin:hover>.software-img .blender,
.row-software-content .column-margin:active>.software-img .blender,
.row-software-content .column-margin:focus>.software-img .blender {
	background: url('../images/software/blender-n.webp') center no-repeat;
	transition: all 0.3s ease-in-out;
}

.software-content .software-img .max {
    position: relative;
    object-fit: cover;
    display: block;
	background: url('../images/software/3ds-h.webp') center no-repeat;
    width: 100%;
    height: 100%;
	transition: all 0.3s ease-in-out;
}

.row-software-content .column-margin:hover>.software-img .max,
.row-software-content .column-margin:active>.software-img .max,
.row-software-content .column-margin:focus>.software-img .max {
	background: url('../images/software/3ds-n.webp') center no-repeat;
	transition: all 0.3s ease-in-out;
}

.software-content .software-img .unreal {
    position: relative;
    object-fit: cover;
    display: block;
	background: url('../images/software/unreal-h.webp') center no-repeat;
    width: 100%;
    height: 100%;
	transition: all 0.3s ease-in-out;
}

.row-software-content .column-margin:hover>.software-img .unreal,
.row-software-content .column-margin:active>.software-img .unreal,
.row-software-content .column-margin:focus>.software-img .unreal {
	background: url('../images/software/unreal-n.webp') center no-repeat;
	transition: all 0.3s ease-in-out;
}

.software-content .software-img .c4d {
    position: relative;
    object-fit: cover;
    display: block;
	background: url('../images/software/cinema4d-h.webp') center no-repeat;
    width: 100%;
    height: 100%;
	transition: all 0.3s ease-in-out;
}

.row-software-content .column-margin:hover>.software-img .c4d,
.row-software-content .column-margin:active>.software-img .c4d,
.row-software-content .column-margin:focus>.software-img .c4d {
	background: url('../images/software/cinema4d-n.webp') center no-repeat;
	transition: all 0.3s ease-in-out;
}

.software-content .software-img .maya {
    position: relative;
    object-fit: cover;
    display: block;
	background: url('../images/software/maya-h.webp') center no-repeat;
    width: 100%;
    height: 100%;
	transition: all 0.3s ease-in-out;
}

.row-software-content .column-margin:hover>.software-img .maya,
.row-software-content .column-margin:active>.software-img .maya,
.row-software-content .column-margin:focus>.software-img .maya {
	background: url('../images/software/maya-n.webp') center no-repeat;
	transition: all 0.3s ease-in-out;
}

.software-content .software-img .houdini {
    position: relative;
    object-fit: cover;
    display: block;
	background: url('../images/software/houdini-h.webp') center no-repeat;
    width: 100%;
    height: 100%;
	transition: all 0.3s ease-in-out;
}

.row-software-content .column-margin:hover>.software-img .houdini,
.row-software-content .column-margin:active>.software-img .houdini,
.row-software-content .column-margin:focus>.software-img .houdini {
	background: url('../images/software/houdini-n.webp') center no-repeat;
	transition: all 0.3s ease-in-out;
}

#testim .title-testim-content,
#services .title-services-content,
#software .title-software-content,
#more .title-more-content {
    margin: 0 10vw 5vh 10vw;
}

#contact .title-contact-content,
#project .title-project-content {
    margin: 0 10vw 5vh 10vw;
}

#calculator .title-calculator-content {
    margin: 0 10vw 5vh 10vw;
}

.title-process-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
    margin-bottom: 2rem;
	word-break: break-word;
    display: grid;
}

.title-process-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
    float: left;
}

/* JOB */
#job{
    width: 100%;
    position: relative;
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 5rem 1rem;
	z-index: 0;	
}
#job .title-job-content {
    margin: 0 10vw 5vh 10vw;
}


.title-job-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
    margin-bottom: 2rem;
	word-break: break-word;
    display: grid;
}

.title-job-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
    float: left;
}


.job-container {
    display: contents;
    flex-direction: row; /* Affichage en colonne par défaut */
}

.job .heading-section {
    text-transform: uppercase;
	display: grid;
    margin: 0 2rem;
	text-align: center;
}	

.sidebar-left {
    top: 0; /* Fixe la position au sommet */
    padding: 20px;
    overflow-y: auto; /* Permet le défilement si le contenu dépasse */
}

.sidebar-left .checkboxes {
    line-height: 30px;
}

.tab-job-content {
    flex-grow: 1;
    overflow-y: auto; /* Permet le défilement si le contenu dépasse */
}

.tile-job {
    border-radius: var(--border-radius);
    border: 2px solid #ffffff05;
    padding: 1rem;
    background: #ffffff05;
    margin-bottom: 20px;
}

.title-job {
    position: relative;
    display: inline-block;
    width: 100%;
}

.title-job h3 {
	font-size: 24px;
    text-transform: uppercase;
    padding: 1rem 0 1.5rem 0;
	color: var(--main-color);
}

.description-job {
    padding-bottom: 1rem;
	position: relative;
	overflow: hidden;
}

.description-job.expand {
    padding-bottom: 1rem;
}

.description-job p {
	font-size: var(--font-size-main);
	max-height: 80px;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
	position: relative;
	z-index: 2;
}

.description-job.expand p {
	max-height: 1000px; /* Set a maximum height that is larger than the content */
}

.description-job p::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80%; /* Adjust this to control the gradient coverage */
	background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 1));
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.5s ease-in-out;
}

.description-job.expand p::after {
	opacity: 0; /* Hide the gradient when expanded */
}

.sub-job {
    padding: 1rem;
    border-radius: var(--border-radius);
    background: #ffffff05;
}

.button-job {
	position: relative;
	padding: 1rem 1rem 0 1rem;
    width: -webkit-fill-available;
	display: flex; 
	justify-content: flex-end
}

label {
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 0px 0;
}

.sidebar-left span {
    margin-left: 6px;
    bottom: 3px;
    position: relative;
}

.no-jobs {
    width: -webkit-fill-available;
    text-align: center;
	min-height: 200px;
	align-items: center;
    border-radius: var(--border-radius);
    border: 2px solid #ffffff05;
    background: #ffffff05;
}

@media screen and (min-width: 768px) {
    .sidebar-left {
        width: 30%;
		position: sticky;
		float: left;
    }

    .tab-job-content {
        flex-grow: 1;
    }
}

@media screen and (max-width: 768px) {
    .sidebar-left {
        width: -webkit-fill-available;
		position: sticky;
		float: left;
		border-radius: var(--border-radius);
		background: #ffffff15;
		backdrop-filter: var(--blur);
    }
	
	.tab-job-content {
        margin-top: 170px; /* Réinitialise la marge en haut */
    }
	
	.checkboxes {
		display: flex;
		flex-direction: row; /* Affichage en colonne par défaut */
		overflow-y: auto;
	}
	
	.title-present-content .heading-section .subheading {
		width: 100% !important;
	}
}

/* PROJECT CAROUSEL */
#project {
    width: 100%;
    position: relative;
    margin: 0 auto;
	padding: 5rem 0;
	z-index: 0;
}

.title-project-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
    margin-bottom: 2rem;
	word-break: break-word;
    display: grid;
}

.title-project-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
    float: left;
}

#project .carousel {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

#project .carousel:before {
    bottom: 0;
    background: linear-gradient(to top, #000 0%, transparent 100%);
}

#project .carousel:after {
    top: 0;
    background: linear-gradient(to bottom, #000 0%, transparent 100%);
}

#project .carousel:before, #project .carousel:after {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 30vh;
    content: "";
    z-index: 10;
}


.carousel-item {
  --items: 10;
  --width: clamp(225px, 45vw,  450px);
  --height: clamp(325px, 65vw,  650px);
  --x: calc(var(--active) * 800%);
  --y: calc(var(--active) * 200%);
  --rot: calc(var(--active) * 120deg);
  --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
  overflow: hidden;
  position: absolute;
  z-index: var(--zIndex);
  width: var(--width);
  height: var(--height);
  margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
  border-radius: var(--border-radius);
  top: 50%;
  left: 50%;
  user-select: none;
  transform-origin: 0% 100%;
  box-shadow: var(--shadow-menu);
  background: black;
  pointer-events: all;
  transform:  translate(var(--x), var(--y)) rotate(var(--rot)) ;
  transition: transform .8s cubic-bezier(0, 0.02, 0, 1);
}

.carousel-box {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    opacity: var(--opacity);
    align-items: center;
	display: flex;
}

.carousel-box .carousel-link a { 
    background: var(--main-color);
    color: #ffffff;
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 2rem;
    border: 2px solid var(--main-color);
    transition: all 0.3s ease-in-out;
	box-shadow: var(--shadow);
  	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	backdrop-filter: var(--blur);
    display: inline-block;
    scale: 1;
}

.carousel-box .carousel-link a:hover {
  background: none !important;
  color: #ffffff;
  border: 2px solid #ffffff;
  scale: 1.025;
  transition: all 0.3s ease-in-out;
}

.carousel-box .carousel-link{
	position: absolute;
	text-align: center;
	width: 100%;
	opacity: 0;
	transition: all .8s cubic-bezier(0, 0.02, 0, 1);
}

.carousel-box:hover .carousel-link{
	opacity: 1;
	transition: all .8s cubic-bezier(0, 0.02, 0, 1);
}

.carousel-box .title {
    position: absolute;
    z-index: 1;
    color: #ffffff;
    bottom: 20px;
    left: 20px;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 3vw, 30px);
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.carousel-box .num {
    position: absolute;
    z-index: 1;
    color: #ffffff;
    top: 10px;
    left: 20px;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 10vw, 80px);
	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.carousel-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
	border-radius: var(--border-radius);
}

/* CONTACT */
#contact {
	width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 5rem 0;
    display: flex;
    align-items: center;
}
.wrapper-contact {
    width: -webkit-fill-available;
    background: url('../images/Slice%204.svg') center no-repeat;
    background-size: cover;
    position: relative;
    padding: 0 1rem;
}

.row-contact-content {
	backdrop-filter: var(--blur);
    background: var(--black-grey);
    box-shadow: var(--shadow-menu);
    border-radius: var(--border-radius-large);
    display: flex;
    align-items: center;
	width: 100%;
	text-align: center;
    margin: auto;
    max-width: var(--width-site);
    position: relative;
}
.title-contact-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
	display: grid;
	word-break: break-word;
    margin-bottom: 2rem;
}
.title-contact-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
	float: left;
}
.title-contact-content .btn {
    margin: 0;
    display: inline-block;
}

.contact-content {
	display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--width-site);
    margin: 0 auto;
    position: relative;
}
.contact-content .category {
	float: left;
    display: flex;
    position: relative;
    margin: 1rem 1rem 0 1rem;
    width: -webkit-fill-available;
}
.contact-content .category .space-content {
    display: flex;
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}
.input-container {
    padding: 1rem;
    float: left;
    border-radius: var(--border-radius);
    border: 2px solid #ffffff05;
    position: relative;
    margin: 0 1rem 1rem 1rem;
    width: -webkit-fill-available;
}

.input-container-first {
    display: flex;
    position: relative;
    width: -webkit-fill-available;
}

.content-input-button {
    position: relative;
    margin: 0 1rem 1rem 1rem;
    float: left;
    width: -webkit-fill-available;
}

.content-input-button .button-center {
    margin: 0 auto;
}

/* text input */
.input-form {
    width: 100%;
    position: relative;
    display: inline-block;
}

.input-form label {
    position: relative;
    float: left;
    width: 100%;
    text-align: left;
    margin-bottom: 1rem;
    color: #ffffff;
}

.input-form .text-input {
	-webkit-appearance: none;
	appearance: none; 
    width: 100%;
    float: left;
    position: relative;
	color: #ffffff;
    cursor: pointer;
    outline: none;
    border-radius: var(--border-radius);
	border: 2px solid #ffffff05;
    padding: 1rem;
    background: #ffffff05;
	transition: all 0.3s ease-in-out;
}

.input-form textarea {
	min-height: 200px;
}

.input-form .text-input:hover {
	border: 2px solid var(--main-color);
	background: var(--main-color-transp-1);
	color: #ffffff;
	transition: all 0.3s ease-in-out;
}

/* VIEWER CONTENT */
#viewer {
	width: 100%;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    z-index: 0;
    box-sizing: border-box;
}
.row-viewer-content {
	border-radius: var(--border-radius-large);
    display: flex;
    grid-template-columns: 1fr 1fr;
    align-items: center;
	width: 100%;
	min-height: 600px;
	text-align: center;
}
.title-viewer-content {
    width: 100%;
	max-width: var(--width-site);
    position: relative;
    margin: 0 auto;
	padding: 0 1rem;
	text-align: left;
	display: grid;
    grid-auto-rows: max-content;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.title-viewer-content .heading-section {
	color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
	word-break: break-word;
	display: grid;
}
.title-viewer-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
	font-weight: 100;
	float: left;
}

.title-viewer-content p {
    white-space: normal;
}
.section-content {
    align-content: center;
    display: grid;
	margin-bottom: 2rem;
}
.section-content p {
    font-size: var(--font-body);
	color: #ffffff;
}

.viewer-content {
	width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: -1;
    display: flex;
    border-radius: var(--border-radius-large);
}

.viewer-content canvas {
	position: relative;
    width: 100%;
    object-fit: contain;	
}

/* VIEWER 1 CONTENT */
#viewer-1 {
    width: 100%;
    position: relative;
    max-width: var(--width-site);
    margin: 0 auto;
	padding: 5rem 1rem;
    align-items: center;
    z-index: 0;
}
.row-viewer-1-content {
	background: var(--foregroud-color-1);
	backdrop-filter: var(--blur);
	box-shadow: var(--shadow-menu);
	border-radius: var(--border-radius-large);
    display: flex;
    grid-template-columns: 1fr 1fr;
    align-items: center;
	width: 100%;
	min-height: 600px;
	text-align: center;
}
.title-viewer-1-content {
    width: 100%;
	max-width: var(--width-site);
    position: relative;
    margin: 0 auto;
	padding: 0 1rem;
	text-align: left;
	display: grid;
    grid-auto-rows: max-content;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.title-viewer-1-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
	word-break: break-word;
	display: grid;
}
.title-viewer-1-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
	float: left;
}

.title-viewer-1-content p {
    white-space: normal;
}
.title-viewer-1-content .section-content {
    align-content: center;
    display: grid;
	margin-bottom: 2rem;
}
.title-viewer-1-content .section-content p {
    font-size: var(--font-body);
}

.viewer-1-content {
	width: 100%;
    height: 100%;
	aspect-ratio: 16 / 9;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: -1;
    display: flex;
    background: var(--main-color);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow-menu);
    border-radius: var(--border-radius-large);
}

.viewer-1-content img,
.viewer-1-content video {
	position: relative;
    width: 100%;
    object-fit: cover;
    box-shadow: var(--shadow-menu);
    border-radius: var(--border-radius-large);	
}

/* GRID TILE 3D ISOMETRIC */
#showcase {
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 5rem 0;
    z-index: 0;
    box-sizing: border-box;
}

.title-showcase-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
	word-break: break-word;
    display: grid;
}


.title-showcase-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1px;
    font-size: var(--font-second-title);
	font-weight: 100;
}

.showcase-content .subheading {
    text-align: left;
}

.grid-tile-container {
  position: sticky;
  top: 0;
  height: 80vh;
  perspective: 1400px;
  overflow: hidden;
  transform: translateZ(0);
}

.grid-tile {
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%) rotateX(58deg) rotateZ(-45deg);
}

.grid-rows {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
}

.grid-row {
	display: flex;
	gap: var(--gap);
	will-change: transform;
}

.grid-card {
	position: relative;
	isolation: isolate;
	width: var(--tile-size);
	height: calc(var(--tile-size) * 0.65);
	border-radius: 16px;
	overflow: hidden;
	background: #111;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.grid-card::after {
	content: "";
	position: absolute;
	top: -100%;
	left: -60%;
	width: 45%;
	height: 300%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
	transform: rotate(20deg);
	transition: left 0.65s ease;
}

.grid-card:hover::after {
	left: 130%;
}

.grid-card img,
.grid-card video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}


/* PROJECT DETAIL CONTENT */
#project-detail {
    width: 100%;
    position: relative;
    max-width: var(--width-site);
    margin: 0 auto;
	padding: 5rem 1rem;
    align-items: center;
    z-index: 0;
}
.row-project-detail-content {
	background: var(--foregroud-color-1);
	backdrop-filter: var(--blur);
	box-shadow: var(--shadow-menu);
	border-radius: var(--border-radius-large);
    display: flex;
    grid-template-columns: 1fr 1fr;
    align-items: center;
	width: 100%;
	min-height: 600px;
	text-align: center;
}
.title-project-detail-content {
    width: 100%;
	max-width: var(--width-site);
    position: relative;
    margin: 0 auto;
	padding: 0 1rem;
	text-align: left;
	display: grid;
    grid-auto-rows: max-content;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.title-project-detail-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
	word-break: break-word;
	display: grid;
}
.title-project-detail-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
	float: left;
}

.title-project-detail-content p {
    white-space: normal;
}
.title-project-detail-content .section-content {
    align-content: center;
    display: grid;
	margin-bottom: 2rem;
}
.title-project-detail-content .section-content p {
    font-size: var(--font-body);
}

.project-detail-content {
	width: 100%;
    height: 100%;
	aspect-ratio: 16 / 9;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: -1;
    display: flex;
    background: var(--main-color);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow-menu);
    border-radius: var(--border-radius-large);
}

.project-detail-content img,
.project-detail-content video {
	position: relative;
    width: 100%;
    object-fit: cover;
    box-shadow: var(--shadow-menu);
    border-radius: var(--border-radius-large);	
}

/* MORE CONTENT */
#more {
    width: 100%;
	height: 500vh;
    position: relative;
    margin: 0 auto;
	padding: 5rem 0;
}
.row-more-content {
	background: var(--foregroud-color-1);
	backdrop-filter: var(--blur);
	box-shadow: var(--shadow-menu);
	border-radius: var(--border-radius-large);
    display: flex;
    grid-template-columns: 1fr 1fr;
    align-items: center;
	width: 100%;
	min-height: 600px;
	text-align: center;
}
.row-more-content .title-more-content {
    width: 100%;
    float: left;
	text-align: center;
}
.title-more-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
	display: grid;
	word-break: break-word;
    margin-bottom: 2rem;
}
.title-more-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
	float: left;
}
.title-more-content .btn {
    margin: 0;
    display: inline-block;
}

.more-content {
	width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
	display: flex;
}

.more-content canvas {
	position: relative;
    width: 100%;
    object-fit: contain;	
}

/* PRESENT FOOTER */
#present-footer {
    width: 100%;
    position: relative;
    height: 60vh;
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 5rem 1rem;
    display: flex;
    align-items: center;
}
.row-present-content {
	backdrop-filter: var(--blur);
	box-shadow: var(--shadow-menu);
	background: linear-gradient(135deg, var(    --main-color-transp-2) 20%, var(--main-color-transp) 100%);
	border-radius: var(--border-radius-large);
	padding: 3rem;
    display: flex;
    grid-template-columns: 1fr 1fr;
    align-items: center;
	width: 100%;
	min-height: 300px;
}
.row-present-content .column {
	width: auto;
    float: right;
    right: 0px;
}
.title-present-content .heading-section {
    color: #ffffff;
    font-size: var(--font-main-title);
    text-transform: uppercase;
	display: grid;
    margin-bottom: 2rem;
}
.title-present-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
	font-weight: 100;
	float: left;
	width: 50%;
}
.title-present-content .go-pro-widget-btn {
    margin: 0;
    display: inline-flex;
}

.present-content {
	width: 100%;
    height: 100%;
    position: absolute;
}

.present-content .present-img {
    position: absolute;
    right: 0;
    bottom: 0;
	border-radius: var(--border-radius);
    transform: perspective(1000px) rotateX(8deg) rotateY(-30deg) rotate(6deg);
    box-shadow: var(--shadow-menu);
	max-width: 600px;
    display: block;
}

.present-content .present-img img {
    position: relative;
    width: 600px;
    height: 330px;
    object-fit: cover;
    display: block;
	border-radius: var(--border-radius);
}

/* FAQ ACORDEON */
.row-faq-content {
    content: "";
    clear: both;
    display: flex;
    grid-template-columns: 1fr 1fr;
    align-items: center;
	width: 100%;
}
.row-faq-content .column {
    min-width: 40%;
}
.title-faq-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
    margin-bottom: 2rem;
	word-break: break-word;
	display: grid;
	font-weight: 700;
}
.title-faq-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
	float: left;
	font-weight: 100;
}

#acordeon {
    width: 100%;
    position: relative;
    min-height: 60vh;
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 5rem 1rem;
    display: flex;
    align-items: center;
}

.acordeon-content li {
	border-bottom: #88888840 !important;
}

.acordeon-content,
.acordeon-content ul,
.acordeon-content li,
.acordeon-content div {
    padding: 0;
    list-style: none;
    font-weight: 400;
    text-decoration: none;
    font-size: 1rem;
    position: relative;
}

.acordeon-content div {
    line-height: 1.3
}

.acordeon-content {
    width: 100%
}

.acordeon-content>ul>li {
    display: block;
    cursor: pointer;
    float: left;
    width: 100%;
    color: #ffffff;
    position: relative;
	margin: 0 !important;
    transition: all 0.3s ease-in-out;
}

.acordeon-content>ul>li>div .bx-minus {
    display: none;
	transition: all 0.3s ease-in-out;
}

.acordeon-content>ul>li>div {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 1rem 0;
    word-wrap: break-word;
    font-weight: 300;
    border-radius: var(--border-radius-large);
	padding-right: 0px;
    transition: all 0.3s ease-in-out;
}

.acordeon-content>ul>li>div span {
    width: 100%;
}

.acordeon-content>ul>li>div i {
    color: #ffffff;
    float: right;
    right: 0;
    position: relative;
    font-size: 30px;
}

.acordeon-content>ul>li:hover {
    text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.acordeon-content>ul>li.active {
    border-bottom: none;
	transition: all 0.3s ease-in-out;
}

.acordeon-content>ul>li.active>div {
    color: #ffffff;
	padding: 1rem;
	background: var(--main-color);   
	transition: all 0.3s ease-in-out;
}

.acordeon-content>ul>li.active>div .bx-plus {
    display: none;
	transition: all 0.3s ease-in-out;
}

.acordeon-content>ul>li.active>div .bx-minus {
    display: block;
	transition: all 0.3s ease-in-out;
}

.acordeon-content span.cnt {
    position: absolute;
    top: 8px;
    right: 15px;
    padding: 0;
    margin: 0;
    background: none
}

.acordeon-content ul ul {
    display: none;
	margin: 0
}

.acordeon-content ul ul li {
    padding: 2rem;
    border-top: 0;
	margin: 0 !important;
}

.acordeon-content ul ul div {
    padding: 1rem;
    display: block;
    color: #3893D4;
    font-size: 1rem
}

.acordeon-content ul ul div:hover {
    color: #4382B2
}

.acordeon-content ul ul li.even,
.acordeon-content ul ul li.odd {
	word-break: break-word;
	padding: 1rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}

/* FAQ CATEGORIES FILTER */
.faq-filter {
	width: 100%;
	margin-bottom: 2rem;
}

.faq-filter .sidebar-buttons {
	width: 100%;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
}

/* IMPORTANT : override de ton display:block actuel */
#acordeon .acordeon-content > ul.faq-list > li {
	display: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* Classe utilisée par le JS pour afficher */
#acordeon .acordeon-content > ul.faq-list > li.opacityShow {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

/* Meilleur espacement quand les catégories sont au-dessus */
#acordeon .acordeon-content > ul.faq-list {
	width: 100%;
}

/* Responsive FAQ */
@media (max-width: 900px) {
	.row-faq-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	.row-faq-content .column {
		min-width: 100%;
		width: 100%;
	}

}

@media (max-width: 520px) {

	.title-faq-content .heading-section {
		font-size: 2rem;
	}

	.title-faq-content .heading-section .subheading {
		font-size: 1rem;
	}
}

/* FOOTER */
.footer-form-container{
    max-width: var(--width-site);
    padding: 0rem 1rem;
    margin: auto;
}
.footer-form-container .row {
	display: flex;
	flex-wrap: wrap;
	overflow: initial;
    box-shadow: var(--shadow-menu);
}
.footer-col ul{
	list-style: none;
}
.footer-form-right .subscribe-form .custom-select {
    max-width: 150px;
}
#newsletter-message {
    position: relative;
    float: left;
    display: contents;
}
#footer-form .footer-form-left {
    padding: 3rem 1.5rem;
    background: var(--main-color);
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    display: flex;
	border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
}
#footer-form .footer-form-right {
    background: #ffffff05;
	backdrop-filter: var(--blur);
    padding: 20px;
    display: grid;
    align-items: center;
    position: relative;
    width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
    box-sizing: border-box;
	border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
}
.footer-form-right .subscribe-form .form-group {
    position: relative;
    margin-bottom: 0;
    border-radius: 0;
    display: flex;
    box-sizing: border-box;
}
.footer-form-right .subscribe-form {
    border-radius: 40px;
    background: #fff;
    padding: 3px;
	width: 100%;
}
.footer-form-right .subscribe-form .form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8em;
    color: #495057;
    -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}
.footer-form-right .subscribe-form .form-group input {
    background: 0 0 !important;
    border: none !important;
    outline: 0 !important;
    font-size: 1rem;
    max-height: 56px;
    height: 56px;
    border-radius: 0;
}
.footer-form-right .subscribe-form .form-group .select-selected {
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
    height: 56px;
}
.footer-form-right .subscribe-form .form-group .select-items-inside div {
    height: 100%;
}
.footer-form-right .subscribe-form .form-group .submit {
    color: #ffffff !important;
    display: block;
    width: 150px;
    height: 56px;
	flex: 1;
    background: var(--main-color);
    border: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2rem;
    border: 2px solid var(--main-color);
    transition: all 0.3s ease-in-out;
	backdrop-filter: var(--blur);
	
}

.footer-form-right .subscribe-form .form-group .submit:disabled, 
.footer-form-right .subscribe-form .form-group .submit[disabled] {
    color: #ffffff15;
    border: 2px solid #00000005;
    background: #00000020;
    transition: all 0.3s ease-in-out;
}

.footer-form-right .subscribe-form .form-group .submit[disabled]:hover {
  background: var(--black-grey) !important;
  color: #ffffff !important;
  transition: all 0.3s ease-in-out;
}

.footer-form-right .subscribe-form .form-group .submit:hover {
  background: none !important;
  transition: all 0.3s ease-in-out;
}

#footer-form .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    font-size: var(--font-second-title);
    letter-spacing: 1.5px;
	float: left;
    font-weight: 100;
}
#footer-form .heading-section {
    color: #ffffff;
    font-size: var(--font-main-title);
    text-transform: uppercase;
	display: grid;
    font-weight: 700;
}
#footer-form {
	position: relative;
    width: 100%;    
	z-index: 1;
    float: left;
	padding: 0 0 5rem 0;
}

/* TESTIMONIAL */
.testim {
	width: 100%;
    position: relative;
    margin: 0 auto;
	padding: 0rem 0;
	z-index: 0;
}

.title-testim-content .heading-section {
    color: var(--main-color);
    font-size: var(--font-main-title);
    text-transform: uppercase;
	word-break: break-word;
    display: grid;
}

.title-testim-content .heading-section .subheading {
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1.5px;
    font-size: var(--font-second-title);
    float: left;
	font-weight: 100;
}

.testim .wrap {
    position: relative;
    width: 100%;
    max-width: var(--width-site);
    padding: 0 1rem;
    margin: 0 auto;
}

.testim .arrow {
    display: block;
    position: absolute;
    color: var(--main-color-transp);
    cursor: pointer;
    font-size: 2em;
    top: 50%;
    -webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
    -webkit-transition: all .3s ease-in-out;    
    -ms-transition: all .3s ease-in-out;    
    -moz-transition: all .3s ease-in-out;    
    -o-transition: all .3s ease-in-out;    
    transition: all .3s ease-in-out;
    padding: 5px;
    z-index: 22222222;
}

.testim .arrow:before {
		cursor: pointer;
}

.testim .arrow:hover {
    color: var(--main-color);
}
    

.testim .arrow.left {
    left: 10px;
}

.testim .arrow.right {
    right: 10px;
}

.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 20px;
    left: 0;
    display: block;
    z-index: 3333;
	height: 12px;
}

.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: var(--border-secondary);
    margin: 0 10px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;    
    -ms-transition: all .5s ease-in-out;    
    -moz-transition: all .5s ease-in-out;    
    -o-transition: all .5s ease-in-out;    
    transition: all .5s ease-in-out;
		position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
    background: var(--main-color);
    border-color: var(--main-color);
}

.testim .dots .dot.active {
    -webkit-animation: testim-scale .5s ease-in-out forwards;   
    -moz-animation: testim-scale .5s ease-in-out forwards;   
    -ms-animation: testim-scale .5s ease-in-out forwards;   
    -o-animation: testim-scale .5s ease-in-out forwards;   
    animation: testim-scale .5s ease-in-out forwards;   
}
    
.testim .cont {
    position: relative;
	overflow: hidden;
}

.testim .cont > div {
    text-align: center;
    position: absolute;
	width: 100%;
    top: 0;
    left: 0;
    padding: 0 0 70px 0;
    opacity: 0;
}

.testim .cont > div.inactive {
    opacity: 1;
}
    

.testim .cont > div.active {
    position: relative;
    opacity: 1;
}
    

.testim .cont div .img img {
    display: block;
    width: 150px;
    height: 150px;
    margin: auto;
    border-radius: 50%;
}

.testim .cont div h2 {
    color: var(--main-color);
    font-size: var(--font-second-title);
    margin: 3rem 0;
}

.testim .cont div p {
    font-size: var(--font-body);
    color: #ffffff;
    width: 80%;
    margin: auto;
	text-align: center;
}

.testim .cont div.active .img img {
    -webkit-animation: testim-show .5s ease-in-out forwards;            
    -moz-animation: testim-show .5s ease-in-out forwards;            
    -ms-animation: testim-show .5s ease-in-out forwards;            
    -o-animation: testim-show .5s ease-in-out forwards;            
    animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active h2 {
    -webkit-animation: testim-content-in .4s ease-in-out forwards;    
    -moz-animation: testim-content-in .4s ease-in-out forwards;    
    -ms-animation: testim-content-in .4s ease-in-out forwards;    
    -o-animation: testim-content-in .4s ease-in-out forwards;    
    animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
    -webkit-animation: testim-content-in .5s ease-in-out forwards;    
    -moz-animation: testim-content-in .5s ease-in-out forwards;    
    -ms-animation: testim-content-in .5s ease-in-out forwards;    
    -o-animation: testim-content-in .5s ease-in-out forwards;    
    animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
    -webkit-animation: testim-hide .5s ease-in-out forwards;            
    -moz-animation: testim-hide .5s ease-in-out forwards;            
    -ms-animation: testim-hide .5s ease-in-out forwards;            
    -o-animation: testim-hide .5s ease-in-out forwards;            
    animation: testim-hide .5s ease-in-out forwards;            
}

.testim .cont div.inactive h2 {
    -webkit-animation: testim-content-out .4s ease-in-out forwards;        
    -moz-animation: testim-content-out .4s ease-in-out forwards;        
    -ms-animation: testim-content-out .4s ease-in-out forwards;        
    -o-animation: testim-content-out .4s ease-in-out forwards;        
    animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
    -webkit-animation: testim-content-out .5s ease-in-out forwards;    
    -moz-animation: testim-content-out .5s ease-in-out forwards;    
    -ms-animation: testim-content-out .5s ease-in-out forwards;    
    -o-animation: testim-content-out .5s ease-in-out forwards;    
    animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-scale {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px #eeeeee20;
        box-shadow: 0px 0px 0px 0px #eeeeee20;
    }

    35% {
        -webkit-box-shadow: 0px 0px 10px 5px #eeeeee20;        
        box-shadow: 0px 0px 10px 5px #eeeeee20;        
    }

    70% {
        -webkit-box-shadow: 0px 0px 10px 5px var(--main-color);        
        box-shadow: 0px 0px 10px 5px var(--main-color);        
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 0px var(--main-color)        
        box-shadow: 0px 0px 0px 0px var(--main-color);        
    }
}

@-moz-keyframes testim-scale {
    0% {
        -moz-box-shadow: 0px 0px 0px 0px #eeeeee20;
        box-shadow: 0px 0px 0px 0px #eeeeee20;
    }

    35% {
        -moz-box-shadow: 0px 0px 10px 5px #eeeeee20;        
        box-shadow: 0px 0px 10px 5px #eeeeee20;        
    }

    70% {
        -moz-box-shadow: 0px 0px 10px 5px var(--main-color);        
        box-shadow: 0px 0px 10px 5px var(--main-color);        
    }

    100% {
        -moz-box-shadow: 0px 0px 0px 0px var(--main-color);        
        box-shadow: 0px 0px 0px 0px var(--main-color);        
    }
}

@-ms-keyframes testim-scale {
    0% {
        -ms-box-shadow: 0px 0px 0px 0px #eeeeee20;
        box-shadow: 0px 0px 0px 0px #eeeeee20;
    }

    35% {
        -ms-box-shadow: 0px 0px 10px 5px #eeeeee20;        
        box-shadow: 0px 0px 10px 5px #eeeeee20;        
    }

    70% {
        -ms-box-shadow: 0px 0px 10px 5px var(--main-color);        
        box-shadow: 0px 0px 10px 5px var(--main-color);        
    }

    100% {
        -ms-box-shadow: 0px 0px 0px 0px var(--main-color);        
        box-shadow: 0px 0px 0px 0px var(--main-color);        
    }
}

@-o-keyframes testim-scale {
    0% {
        -o-box-shadow: 0px 0px 0px 0px #eeeeee20;
        box-shadow: 0px 0px 0px 0px #eeeeee20;
    }

    35% {
        -o-box-shadow: 0px 0px 10px 5px #eeeeee20;        
        box-shadow: 0px 0px 10px 5px #eeeeee20;        
    }

    70% {
        -o-box-shadow: 0px 0px 10px 5px var(--main-color);        
        box-shadow: 0px 0px 10px 5px var(--main-color);        
    }

    100% {
        -o-box-shadow: 0px 0px 0px 0px var(--main-color);        
        box-shadow: 0px 0px 0px 0px var(--main-color);        
    }
}

@keyframes testim-scale {
    0% {
        box-shadow: 0px 0px 0px 0px #eeeeee20;
    }

    35% {
        box-shadow: 0px 0px 10px 5px #eeeeee20;        
    }

    70% {
        box-shadow: 0px 0px 10px 5px var(--main-color);        
    }

    100% {
        box-shadow: 0px 0px 0px 0px var(--main-color);        
    }
}

@-webkit-keyframes testim-content-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-moz-keyframes testim-content-in {
    from {
        opacity: 0;
        -moz-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -moz-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-ms-keyframes testim-content-in {
    from {
        opacity: 0;
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -ms-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-o-keyframes testim-content-in {
    from {
        opacity: 0;
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -o-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);        
    }
}

@-webkit-keyframes testim-content-out {
    from {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -webkit-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-moz-keyframes testim-content-out {
    from {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -moz-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-ms-keyframes testim-content-out {
    from {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -ms-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-o-keyframes testim-content-out {
    from {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
    }
}

@-webkit-keyframes testim-show {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
}

@-moz-keyframes testim-show {
    from {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
}

@-ms-keyframes testim-show {
    from {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
}

@-o-keyframes testim-show {
    from {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
}

@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        transform: scale(1);       
    }
}

@-webkit-keyframes testim-hide {
    from {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@-moz-keyframes testim-hide {
    from {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-ms-keyframes testim-hide {
    from {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
}

@-o-keyframes testim-hide {
    from {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        transform: scale(0);
    }
}

@media all and (max-width: 500px) {
	.testim .arrow {
		font-size: 1.5em;
	}
	
	.testim .cont div p {
		line-height: 25px;
	}


}

/*fade effect*/
.fade {
	opacity: 0;
	transform: translate(0, 10vh);
	transition: all 1s;
}


.fade.visible {
	opacity: 1;
	transform: translate(0, 0);
	transition: all 1s;
}

.fade.visible:nth-child(1) { transition-delay: 0s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }  /* delay = (n-1) / numquotes * duration */
.fade.visible:nth-child(2) { transition-delay: 0.3s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(3) { transition-delay: 0.6s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(4) { transition-delay: 0.9s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(5) { transition-delay: 1.2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(6) { transition-delay: 1.5s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(7) { transition-delay: 1.8s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(8) { transition-delay: 2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(9) { transition-delay: 2.3s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(10) { transition-delay: 2.6s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(11) { transition-delay: 2.9s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade.visible:nth-child(12) { transition-delay: 3.2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }

.fade-left {
	opacity: 0;
	transform: translate(-3vw, 0);
	transition: all 1s;
}


.fade-left.visible {
	opacity: 1;
	transform: translate(0, 0);
	transition: all 1s;
}

.fade-left.visible:nth-child(1) { transition-delay: 0s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }  /* delay = (n-1) / numquotes * duration */
.fade-left.visible:nth-child(2) { transition-delay: 0.3s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(3) { transition-delay: 0.6s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(4) { transition-delay: 0.9s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(5) { transition-delay: 1.2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(6) { transition-delay: 1.5s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(7) { transition-delay: 1.8s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(8) { transition-delay: 2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(9) { transition-delay: 2.3s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(10) { transition-delay: 2.6s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(11) { transition-delay: 2.9s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-left.visible:nth-child(12) { transition-delay: 3.2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }

.fade-right {
	opacity: 0;
	transform: translate(3vw, 0);
	transition: all 1s;
}

.fade-right.visible {
	opacity: 1;
	transform: translate(0, 0);
	transition: all 1s;
}

.fade-right.visible:nth-child(1) { transition-delay: 0s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }  /* delay = (n-1) / numquotes * duration */
.fade-right.visible:nth-child(2) { transition-delay: 0.3s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right-right.visible:nth-child(3) { transition-delay: 0.6s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(4) { transition-delay: 0.9s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(5) { transition-delay: 1.2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(6) { transition-delay: 1.5s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(7) { transition-delay: 1.8s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(8) { transition-delay: 2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(9) { transition-delay: 2.3s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(10) { transition-delay: 2.6s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(11) { transition-delay: 2.9s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }
.fade-right.visible:nth-child(12) { transition-delay: 3.2s; transition-duration: 1s; opacity: 1; transform: translate(0px, 0px); }

.fade-in {
    animation: fadeIn 1s ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*align text center*/
.align-center {
	text-align: center;
	position: relative;
}

/*custom cursor*/
.cursor {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	--size: 40px;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
	transition: transform .85s cubic-bezier(0, 0.02, 0, 1);
	display: none;
	pointer-events: none;
  
	@media (pointer: fine) {
		display: block;
	}
}

.cursor2 {
	--size: 2px;
	transition-duration: .7s;
}


@supports (position: sticky) {
	.is-sticky {
		position: sticky;
		top: calc(50vh - 300px); 
	}
}