/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
:root{
	--font: 'Crimson-Roman', serif;
	--font2: 'DMSans-Regular', sans-serif;
	--gri: #c6c7c8;
	--griInchis1: #4f4f50;
	--griInchis2: #5c6056;
	--griInchis3: #6a6c4e;
	--alb: #f2f2f7;
	--negru: #231f20;
	--negru-60: rgba(35, 31, 32, 0.6);
	--xs: 14px;
	--s: 16px;
	--m: 28px;
	--l: 40px;
	--xl: 48px;
	--xxl: 64px;
}
/*
@font-face {
    font-family: 'PoynterOldStyleDisplay-SemiBold';
    src: url("https://vladevainteriors.ro/public/fonts/PoynterOSDisp-Semibold.woff") format("truetype");
    font-weight: 600;
	font-style: normal;
}
*/
@font-face {
    font-family: 'DMSans-Regular';
    src: url("https://vladevainteriors.ro/public/fonts/DMSans-Regular.woff") format("woff");
    font-weight: 400;
	font-style: normal;
}
@font-face {
    font-family: 'Crimson-Roman';
    src: url("https://vladevainteriors.ro/public/fonts/Crimson-Roman.ttf.woff") format('woff'),
        url("https://vladevainteriors.ro/public/fonts/Crimson-Roman.ttf.svg#Crimson-Roman") format('svg'),
        url("https://vladevainteriors.ro/public/fonts/Crimson-Roman.ttf.eot"),
        url("https://vladevainteriors.ro/public/fonts/Crimson-Roman.ttf.eot?#iefix") format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
    font-family: 'Spectral-SemiBold';
    src: url("https://vladevainteriors.ro/public/fonts/Spectral-SemiBold.ttf.woff") format('woff'),
        url("https://vladevainteriors.ro/public/fonts/Spectral-SemiBold.ttf.svg#Spectral-SemiBold") format('svg'),
        url("https://vladevainteriors.ro/public/fonts/Spectral-SemiBold.ttf.eot"),
        url("https://vladevainteriors.ro/public/fonts/Spectral-SemiBold.ttf.eot?#iefix") format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	overflow-x: hidden;
	line-height: 1;
	background-color: var(--alb);
	letter-spacing: 0.01em;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*{
	box-sizing:border-box;
}
strong {
    font-weight: 800;
}
em{
    font-style: italic;
}
a{
	text-decoration: none;
}
body.no-scroll {
    overflow: hidden;
}
.editAdmin {
  position: absolute;
  z-index: 100;
  top: 5px;
  right: 5px;
  outline: 0;
  display: block;
  width: 15px;
  height: 15px;
}
.editAdmin img{
  width: 15px;
  height: 15px;
}
.cardMesaj{
	display: none;
}
.container {
    margin: 0 auto;
    max-width: 1320px;
    width: 90%;
    position: relative;
    box-sizing: border-box;
}
main{
    width:100%;
    overflow-x:hidden;
}
#preloader {
	display: none;
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
	background-color: var(--negru);
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: transform 1.5s linear;
	gap: 8px;
	overflow: hidden;
	flex-direction: row;
}
#preloader img{
    filter: invert(1);
	opacity: 0;
	transform: translateY(40px);
	animation: reveal-text 1s ease forwards;
}
.disappear-animation {
	animation: disappear-animation 0.9s linear forwards;
}
.proiecteMeniu{
    margin-top: 20px;
}
.imgUtils{
	object-fit: cover;
	object-position: center;
}
.star{
    height: 22px;
    width: 22px;
}
.navbar .butonMic{
	color: var(--alb);
}
.navbar .sageata{
	filter: invert(1);
}
.logoNavbarLink{
    filter: invert(1);
}
.butonMic,
.proiecteMeniu a.butonMic{
	font-family: var(--font2);
	color: var(--griInchis2);
	font-size: var(--xs);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.sageata{
	width: 12px;
	height: 10px;
}
.butonMic.cu-sageata::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 10px;
	background-image: url('../images/meniuSageata.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 8px;
}
.posRelative{
	position: relative;
}
.navbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logoNavbarLink{
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
	width: 170px;
	height: 36px;
}
.logoNavbarLink img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
    filter: blur(0.5px);
}
.hamburgerMenu {
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1002;
}
.hamburgerMenu span {
    background-color: var(--alb);
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}
.hamburgerMenu span:nth-child(1) {
    top: 0px;
    transform-origin: center;
}
.hamburgerMenu span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
    transform-origin: left center;
}
.hamburgerMenu span:nth-child(3) {
    bottom: 0px;
    transform-origin: center;
}
.hamburgerMenu.active span:nth-child(1) {
    top: 50%;
    margin-top: -1px; 
    transform: rotate(45deg);
}
.hamburgerMenu.active span:nth-child(2) {
    width: 0%;
    opacity: 0;
}
.hamburgerMenu.active span:nth-child(3) {
    top: 50%;
    bottom: auto;
    margin-top: -1px;
    transform: rotate(-45deg);
}
.meniuFullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--alb);
    z-index: 998;
    display: flex;
    flex-direction: column;
    padding-top: 200px;
    padding-bottom: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, padding-top 0.5s ease;
}
.meniuFullscreen.deschis {
    opacity: 1;
    visibility: visible;
}
.meniuFullscreen.mod-portofoliu {
    padding-top: 200px;
}
.continutMeniu.container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.coloanaMeniu {
    display: flex;
    flex-direction: column;
    gap: 30px;
    transition: gap 0.5s ease;
}
.meniuFullscreen.mod-portofoliu .coloanaMeniu {
    gap: 15px;
}
.coloanaMeniu a {
    font-size: var(--l);
    font-family: var(--font2);
    font-weight: 600;
    line-height: 1.5;
    color: var(--griInchis2);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
}
.menuItemWithDropdown {
    display: flex;
    flex-direction: column;
}
.menuItemWithDropdown a {
    font-size: var(--l);
    font-family: var(--font2);
    font-weight: 600;
    line-height: 1.5;
    color: var(--griInchis2);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
}
.proiecteMeniu {
    margin-top: 10px;
    margin-left: 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.proiecteMeniu:not(:empty) {
    max-height: 1000px;
    opacity: 1;
    margin-top: 10px;
}
.proiecteMeniu section {
    margin-bottom: 20px;
    animation: fadeIn 0.5s ease forwards;
}
.proiecteMeniuContainer {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 20px;
}
.proiecteMeniuSection {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.proiecteMeniuSection h3 {
    font-size: var(--xs);
    font-family: var(--font2);
    font-weight: 600;
    color: var(--griInchis2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.continutMeniu a:hover {
    color: var(--negru);
}
.footerMeniu {
    position: relative; 
    transform: none;
    left: auto;
    bottom: auto;
    flex-shrink: 0;
    text-align: center;
    padding-top: 20px;
    background-color: var(--alb);
}
nav{
	padding: 40px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 999;
	transition: right 0.3s ease, transform 0.3s ease, width 0.3s ease, height 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
    overflow-x: hidden;
    mix-blend-mode: difference;
}
.fullPage {
	padding-top: 200px;
}
.culoareDiferenta, .textStatic a{
	color: var(--griInchis2);
}
.headerHome{
	margin-bottom: 40px;
}
.headerContent {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
    color: var(--negru);
    max-width: 850px;
    margin: 0 auto;
	margin-bottom: 80px;
	position: relative;
}
.titleHeader{
	font-family: var(--font);
	font-size: var(--xl);
}
.textHeader{
	font-size: var(--s);
	font-family: var(--font2);
	line-height: 1.5;
    color: var(--negru);
    font-weight: 400;
}
.expandTrack {
    height: 250vh;
    width: 100%;
    position: relative;
}
.stickyElement {
    position: sticky;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;     
    overflow: hidden;
    z-index: 10;             
}
.imgHeader {
    will-change: width, height;
}
.imgHeader{
	display: block;
	margin: 0 auto;
}
.aboutUs{
	position: relative;
	text-align: center;
	max-width: 1000px;
	margin-bottom: 200px;
    padding-top: 150px;
}
.logoAboutUs{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 0;
}
.aboutUs::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.aboutUs a{
	position: relative;
	z-index: 2;
}
.textMic, .textStatic p{
	padding-bottom: 20px;
	font-size: var(--xs);
	color: var(--griInchis2);
	font-family: var(--font2);
	line-height: 1.5;
}
.textStatic p, .proiectDetailsText p{
	color: var(--negru);
}
.spanMic {
    position: relative;
    top: -4px;
    font-size: 0.6em;
	font-family: var(--font2);
}
.textMare, .textStatic h3{
	font-family: var(--font);
	padding-bottom: 20px;
	font-size: var(--l);
	color: var(--negru);
	line-height: 1.2;
}
.contact{
	position: relative;
	margin-bottom: 150px;
}
.paddingBottom{
	padding-bottom: 80px;
}
.contactContent{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
    text-align: center;
    row-gap: 50px;
}
.wrapEmail, .wrapTelefon, .wrapAdresa{
	display: flex;
    flex-direction: column;
    align-items: center;
	gap: 20px;
    position: relative;
	color: var(--griInchis2);
	font-size: var(--m);
	cursor: pointer;
}
.wrapEmail, .wrapTelefon{
    border-left: 1px solid var(--gri);
}
.wrapAdresa{
	border-left: 1px solid var(--gri);
    border-right: 1px solid var(--gri);
}
.emailContact, .wrapAdresa p:nth-child(3){
	color: var(--negru);
	font-size: var(--xs);
	font-family: var(--font2);
	text-decoration: underline;
}
.contactContent img{
	object-fit: cover;
	object-position: center;
}
.formular{
	display: flex;
	gap: 80px;
	margin-bottom: 200px;
}
.formularContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.formularContentTitle{
	margin-bottom: 30px;
	position: relative;
}
.imgContact{
    /* flex: 1; */
	aspect-ratio: 1 / 1;
    min-width: 0;
}
.formularContact{
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.formContact {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--gri);
	padding: 12px 5px;
    color: var(--negru-60);
    font-family: inherit;
	font-size: var(--xs);
	line-height: 1.5;
}
textarea.formContact{
	height: 150px;
	resize: none;
	box-sizing: border-box;
}
.legeWrap{
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font2);
	font-size: var(--xs);
	color: var(--negru);
	text-transform: none;
}
.linkLege, .textStatic a{
	text-decoration: underline;
	cursor: pointer;
}
#lege{
	background: transparent;
    border: 0.9px solid var(--gri); 
	width: 16px;
	height: 16px;
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
	position: relative;
}
#lege:checked{
	background: var(--negru);
	border-color: var(--negru);
}
#lege:checked::after{
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--alb);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.butonContact{
	text-transform: uppercase;
	border: none;
    background-color: transparent;
    cursor: pointer;
}
footer{
	margin-top: auto;
}
.footerTop{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 80px;
}
.footerHr{
	border-top: 1px solid var(--gri);
	margin-bottom: 80px;
}
.footerHr2{
	border-top: 1px solid var(--gri);
	margin-bottom: 40px;
}
.footerMiddle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
	align-items: flex-end;
}
.footerText, .clientCard{
	position: relative;
}
.clientCard .textHeader{
    max-height: 200px;
    overflow-y: auto;
}
.footerLogo{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 60px;
}
.logoFooterImg{
	width: 155px;
	height: 32px;
}
.footerReteleSociale{
	display: flex;
	align-items: center;
	gap: 12px;
}
.contactFooter{
	position: relative;
	display: flex;
	gap: 60px;
}
.wrapContact{
	font-family: var(--font2);
	font-size: var(--xs);
	color: var(--griInchis2);
	line-height: 1.5;
	font-weight: 600;
    text-align: right;
}
.wrapContact a{
    color: var(--negru);
	cursor: pointer;
	font-weight: 400;
	text-decoration: underline;
	/* display: inline-block; */
	/* max-width: 200px; */
}
.adresaContact{
    display: inline-block;
    max-width: 200px;
}
.footerBottom{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	color: var(--negru);
	font-family: var(--font2);
	font-size: var(--xs);
	font-weight: 400;
	margin-bottom: 60px;
}
.textLogoAsezare {
    display: flex;
    align-items: flex-end;
    gap: 8px;
	padding-top: 10px;
}
.links{
	position: relative;
	display: flex;
	gap: 24px;
}
.links a{
	color: var(--negru);
	text-decoration: underline;
}
.proiecte{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 65px;
}
.proiecte section{
	width: 100%;
}
.proiecte img{
	width: 100%;
    aspect-ratio: 16 / 9;
	margin-bottom: 20px;
}
.menuItemWithDropdown a.numeProiect{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-size: var(--s);
	font-family: var(--font2);
	font-weight: 600;
	color: var(--griInchis2);
	line-height: 1.5;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.statusProiect {
    font-size: 0.3em;
    font-family: var(--font2);
    /* font-style: italic; */
    font-weight: 400;
    white-space: nowrap;
    vertical-align: super;
    position: relative;
    top: -0.1em;
    margin-left: 0;
}
.statusProiect.status-finalizat{
	color: var(--griInchis2);
}
.statusProiect.status-in-lucru{
	color: var(--griInchis3);
}
.numeProiect .statusProiect{
	font-size: 0.5em;
	top: -0.15em;
}
.dimensiuneDiferita, .proiectDetailsText p{
    font-family: var(--font2);
	font-size: var(--s);
}
.locatieProiect{
	font-size: var(--xs);
	font-family: var(--font2);
	font-weight: 400;
	color: var(--negru);
	line-height: 1.5;
}
.proiectDetails .locatieProiect,
.proiectDetails h2 {
	font-size: var(--s);
}
.galerie {
    column-count: 2;
    column-gap: 20px;
    position: relative;
}
.imagineWrapGalerie {
    break-inside: avoid;
    margin-bottom: 20px;
    overflow: hidden;
}
.imagineWrapGalerie a {
    display: block;
    width: 100%;
}
.imagineWrapGalerie img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
}
.contentStatic{
	max-width: 1000px;
}
.totalWidth{
	width: 100%;
}
.headerProiect{
	margin-bottom: 120px;
}
.headerProiectVertical{
    max-height: 1000px;
    overflow: hidden;
}
.proiectDetails{
	max-width: 1000px;
	margin: 0 auto;
}
.proiectDetails article{
	line-height: 1.5;
	margin-bottom: 100px;
}
.proiectDetailsText div{
	margin-bottom: 80px;
}
.middleSubtitle{
	text-align: center;
	margin-bottom: 70px;
}
.containerUtil{
    margin-bottom: 100px;
}
.alteProiecte{
	display: flex;
    gap: 20px;
    overflow-x: auto;
}
.alteProiecte section img{
    width: 100%;
    aspect-ratio: 16 / 10;
    /* height: 550px; */
    display: block;
}
.alteProiecte::-webkit-scrollbar {
	display: none; 
}
.alteProiecte section{
    flex: 0 0 70%;
}
.alteProiecteLink{
	display: block;
	margin-bottom: 20px;
}
.logoWeblama {
    will-change: transform;
    filter: grayscale(100%);
    width: 100px;
    opacity: 0.7;
    transition: opacity .3s;
}
.butonProiecteContainer, .collaborators p{
	text-align: center;
}
.proiecteContainer{
	margin-bottom: 200px;
}
.proiecteHome {
    display: grid;
    /* grid-template-columns: repeat(12, 1fr); */
	grid-template-columns: repeat(14, 1fr);
    gap: 40px;
	margin-bottom: 80px;
}
.proiect-item {
    display: flex;
    flex-direction: column;
}
.img-wrap {
    display: block;
    width: 100%;
	height: 100%;
    overflow: hidden;
    margin-bottom: 15px;
	position: relative;
}
.imgUtilsHome {
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
}
.img-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--negru);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.img-wrap:hover img {
    transform: scale(1.15);
}
.img-wrap:hover::after {
    opacity: 0.6; 
}
.proiect-item:nth-child(7n + 1) {
    grid-column: span 10;
}
.proiect-item:nth-child(7n + 1) .img-wrap {
    aspect-ratio: 14 / 9;
}
.proiect-item:nth-child(7n + 2) {
    grid-column: span 4;
}
.proiect-item:nth-child(7n + 2) .img-wrap {
    aspect-ratio: 3 / 4;
}
.proiect-item:nth-child(7n + 3) {
    grid-column: span 7;
}
.proiect-item:nth-child(7n + 3) .img-wrap {
    aspect-ratio: 1 / 1;
}
.proiect-item:nth-child(7n + 4) {
    grid-column: span 7;
}
.proiect-item:nth-child(7n + 4) .img-wrap {
    aspect-ratio: 1 / 1;
}
.proiect-item:nth-child(7n + 5) {
    grid-column: span 6;
}
.proiect-item:nth-child(7n + 5) .img-wrap {
    aspect-ratio: 1 / 1;
}
.proiect-item:nth-child(7n + 6) {
    grid-column: span 4;
}
.proiect-item:nth-child(7n + 6) .img-wrap {
    aspect-ratio: 2 / 3;
}
.proiect-item:nth-child(7n + 7) {
    grid-column: span 4;
}
.proiect-item:nth-child(7n + 7) .img-wrap {
    aspect-ratio: 2 / 3;
}
.scrisCuAnimatie {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    width: 100%;
    font-family: var(--font);
	line-height: 1.2;
	font-size: var(--xxl);
    display: flex;
    justify-content: center;
}
.animContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    will-change: transform;
}
.lineWrapper {
    overflow: visible; 
	margin: 0;
    white-space: nowrap;
    width: 250%; 
    text-align: center;
    will-change: transform;
}
.moveLeft { color: var(--griInchis2); }
.moveRight { color: var(--negru); }
.lineWrapper {
    transition: transform 0.1s linear;
    will-change: transform;
}
.pasiContainer {
    position: relative;
    margin-bottom: 120px;
}
.pasiLista {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 80px;
    position: relative;
}
.pasiLista li:first-child { border-top: 1px solid var(--gri); }
.pasiLista li {
    border-bottom: 1px solid var(--gri);
    font-size: var(--xl);
    font-family: var(--font);
    line-height: 1.2;
    color: var(--gri);
    cursor: pointer;
    padding: 40px 0;
    position: relative;
    transition: color 0.3s ease;
}
.pasiLista li::before {
    content: "// ";
    margin-right: 5px;
    font-style: italic;
    font-size: 0.6em;
    position: relative;
    top: -11px;

    display: inline-block;
    opacity: 0;
    transform: translateX(-80px);
    transition: transform 1.5s ease, opacity 1.5s ease;
}
.pasiLista li.in-view::before {
    opacity: 1;
    transform: translateX(0);
}
.pasiLista li a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    position: relative;
    transition: opacity 0.3s;
}
.pasiLista li:hover a {
    color: var(--griInchis2);
}
.dynamicHoverImg {
    position: absolute;
    width: 500px;
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10;
    transform-origin: center left;
    will-change: opacity, transform;
    opacity: 0;
    transform: translateY(-50%) scale(0.6);
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.dynamicHoverImg.isVisible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.luxuryGallery {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}
.landscape {
    flex: 2; 
}
.landscape img {
    width: 100%;
    aspect-ratio: 3 / 2; 
    display: block;
}
.portrait {
    flex: 1; 
    margin-top: 60px; 
}
.portrait img {
    width: 100%;
    aspect-ratio: 2 / 3; 
    display: block;
}
.contactContent p{
	text-align: center;
	color: var(--negru);
	font-family: var(--font2);
	line-height: 1.4;
	font-size: var(--s);
	font-weight: 400;
}
.contactContent h2, .cardMesajContent p{
	text-align: center;
	color: var(--griInchis2);
	font-family: var(--font);
	line-height: 1.3;
	font-size: var(--xl);
	font-weight: 600;
}
.wrapRezultat {
    position: relative;
    border-right: 1px solid var(--gri);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contactContent .wrapRezultat:nth-child(3n+1) {
    border-left: 1px solid var(--gri);
}
.philosophy{
    justify-content: space-between;
	display: flex;
}
.philosophyContent, .philosophyText{
	flex: 1;
	position: relative;
}
.philosophyContent h2{
	padding-bottom: 40px;
}
.imgUtilsPhilosophy{
	width: 100%;
    height: 600px;
}
.philosophyText{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 30px;
}
.philosophyImg{
	width: 50%;
	height: 80%;
}
.philosophyText div{
	width: 50%;
	text-align: justify;
}
.founders{
	display: flex;
	flex-direction: column;
	gap: 60px;
}
.founders article{
	display: flex;
	gap: 60px;
	align-items: center;
}
.vlad, .malina{
    position: relative;
}
.foundersImgContainer, 
.vlad, .malina {
    flex: 1; 
    min-width: 0;
    width: 100%;
}
.foundersImgContainer img{
    width: 100%;
    aspect-ratio: 1 / 1;
	filter: grayscale(100%) contrast(100%);
}
.middleSubtitle2{
	text-align: left;
}
.founders .textHeader p, .collaborators p{
	margin-bottom: 20px;
}
.timelineContainer {
    position: relative;
}
.timelineContainer::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--griInchis2);
    z-index: 0;
}
.processStep {
    display: flex;
    align-items: flex-start;
    margin-bottom: 80px;
    position: relative;
    width: 100%;
}
.processStep::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background-color: var(--griInchis2);
    z-index: 1;
    border: 10px solid var(--alb); 
    top: 5px; 
    box-sizing: content-box;
}
.processStep:nth-child(odd) {
    flex-direction: row;
}
.processStep:nth-child(even) {
    flex-direction: row-reverse;
}
.stepImage, .stepContent {
    width: 50%;
    box-sizing: border-box;
}
.processStep:nth-child(odd) .stepContent {
    padding-left: 80px; 
    padding-right: 0;
}
.processStep:nth-child(odd) .stepImage {
    padding-right: 80px; 
}
.processStep:nth-child(even) .stepContent {
    padding-right: 80px; 
    padding-left: 0;
    text-align: left;
}
.processStep:nth-child(even) .stepImage {
    padding-left: 80px;
}
.stepImage img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
}
.stepTitle {
    padding-bottom: 30px;
    color: var(--griInchis2);
}
.stepContent ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.stepContent li{
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
} 
.stepContent li::before {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 5px;
    border-left: 1px solid var(--griInchis2);
    border-bottom: 1px solid var(--griInchis2);
    transform: rotate(-45deg);
    margin-right: 15px;
    margin-top: 6px;
}
.clientiContainer {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 30px; 
    width: 100%;
}
.clientCard{
    border: 1px solid var(--gri);
    padding: 40px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.review {
    display: flex;
    align-items: center;
    gap: 15px;
}
.authorImg {
    width: 50px;
    height: 50px;
    object-position: center;
    object-fit: cover;
}
.authorInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.authorName {
    font-size: var(--xs);
    margin-bottom: 3px;
}
.clientiSubtitle h2{
    padding-bottom: 60px;
}
.collaboratorsList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; 
    width: 100%;
}
.collaboratorCardContainer {
    border: 1px solid var(--gri);
    padding: 20px 40px;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    width: 300px;
}
.collaboratorCard img {
    filter: grayscale(100%) contrast(100%);
    margin: 0 auto;
    display: block;
    width: 100%;
    height: 100%;
}
.faqItem {
    position: relative;
    border-bottom: 1px solid var(--gri);
    overflow: hidden;
}
.faqItem:first-child {
    border-top: 1px solid var(--gri);
}
.faqHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    cursor: pointer;
    user-select: none;
    padding-right: 10px;
    gap: 10px;
}
.faqHeader:hover {
    opacity: 0.7;
}
.prefix {
    position: relative;
    top: -3px;
    font-size: 0.6em;
	font-family: var(--font2);
    font-weight: 600;
}
.faqIcon {
    position: relative;
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}
.faqIcon::before,
.faqIcon::after {
    content: '';
    position: absolute;
    background-color: #666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}
.faqIcon::before {
    width: 13px;
    height: 2px;
}
.faqIcon::after {
    width: 2px;
    height: 13px;
}
.faqItem.active .faqIcon {
    transform: rotate(45deg);
}
.faqItem.active .faqIcon::before,
.faqItem.active .faqIcon::after {
    background-color: #333;
}
.faqBody {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
}
.faqContent {
    padding-bottom: 30px;
    font-size: var(--xs);
    line-height: 1.5;
    font-family: var(--font2);
    font-weight: 400;
    color: var(--negru);
    padding-right: 20px;
}
/* Safari: evită bold sintetic inconsistent pe anumite glife (ex. „u”) — folosește DM Sans cu greutăți reale */
.questions .faqContent,
.questions .faqHeader h3.numeProiect {
	font-family: 'DM Sans', 'DMSans-Regular', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
}
.questions .faqHeader h3.numeProiect {
	font-weight: 500;
}
.questions .faqContent strong {
	font-weight: 700;
}
.questions .faqHeader .prefix {
	font-family: 'DM Sans', 'DMSans-Regular', sans-serif;
}
.faqItem.active .faqBody {
    opacity: 1;
}
.cardMesajOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, .6);
	z-index: 9999;
	overflow: hidden;
}
.cardMesaj{
    display: none;
    background-color: var(--alb);
	height: 560px;
    width: 560px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	z-index: 10000;
	justify-content: center;
}
.cardMesajContent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 32px;
    padding: 32px;
}
[data-animate] {
    opacity: 0;
    transition: all 0.9s ease;
    transform: translateY(0);
}

[data-animate].scroll-down {
    transform: translateY(40px);
}

[data-animate].scroll-up {
    transform: translateY(-40px);
}

[data-animate].in-view {
    opacity: 1;
    transform: translateY(0);
}
.showOnMobile{
    display: none;
}

/******** FIX CKEDITOR ********/
.static {
    position: relative;
}

.static * {
    max-width: 100%;
    line-height: 1.2;
    font-weight: 400;
    font-size: var(--s);
    font-family: var(--font2);
    font-style: normal;
    color: var(--negruText);
}

.static strong {
    font-weight: 800;
}

.static em {
    font-style: italic;
}

.static a,
.static a:hover {
    color: var(--rosuButon);
    text-decoration: underline;
}

.static img {
    max-width: 100%;
    height: auto;
}

.static ul {
    list-style: disc;
    padding-left: 20px;
}

.static ol {
    list-style: decimal;
    padding-left: 20px;
}

.static li {
    margin-bottom: 5px;
}

.static p {
    margin-bottom: 8px;
}

.static h1,
.static h2,
.static h3,
.static h4,
.static h5 {
    padding-top: 10px;
    margin-bottom: 10px;
}

.static h1 {
    font-size: var(--m4);
}

.static h2 {
    font-size: var(--m4);
}

.static h3 {
    font-size: var(--m3);
}

.static h4 {
    font-size: var(--m2);
}

.static h5 {
    font-size: var(--m);
}

/******** END FIX CKEDITOR ********/

@media (max-width: 1400px) {
    .imgHeader{
        width: 90%;
        height: auto;
    }
}
@media (max-width: 1100px) {
    .dynamicHoverImg {
        width: 300px;
        height: 300px;
    }
    .formular{
        gap: 40px;
    }
    .stepContent h2{
        font-size: var(--m);
    }
}
@media (max-width: 1000px) {
    .collaboratorsList{
        gap: 15px;
    }
    .scrisCuAnimatie{
        padding-top: 60px;
    }
    .containerUtil{
        margin-bottom: 80px;
    }
    .foundersImgContainer img{
        aspect-ratio: 2 / 3;
    }
}
@media (max-width: 900px) {
    .dynamicHoverImg {
        width: 250px;
        height: 250px;
    }
    .links{
        text-align: right;
        flex-direction: column;
    }
    .cardMesaj{
        height: 500px;
        width: 500px;
    }
}
@media (max-width: 800px) {
    .timelineContainer::before {
        left: 20px;
        transform: none;
        width: 2px;
    }
    .processStep {
        flex-direction: column-reverse;
        padding-left: 60px;
        align-items: flex-start;
    }
    .processStep:nth-child(odd), 
    .processStep:nth-child(even) {
        flex-direction: column-reverse;
    }
    .processStep::after {
        left: 20px;
        transform: translateX(-50%);
        border: 5px solid var(--alb);
        width: 14px;
        height: 14px;
    }
    .stepImage, 
    .stepContent {
        width: 100% !important;
        padding: 0 !important;
    }
    .stepContent {
        margin-bottom: 30px;
    }
    .contactFooter{
        flex-direction: column;
    }
    .footerLogo{
        gap:100px;
    }
    .formular{
        flex-direction: column;
        margin-bottom: 100px;
    }
    .founders article{
        flex-direction: column;
        gap: 30px;
    }
    .founders .textMic, .founders h2{
        text-align: center;
    }
    .foundersImgContainer img{
        aspect-ratio: 1 / 1;
    }
    .founders .textMic{
        padding-bottom: 0;
    }
    .founders article .middleSubtitle2 {
        display: contents;
    }
    .founders article .textMic { 
        order: 1; 
    }
    .founders article .textMare { 
        order: 2; 
    }
    .founders article .foundersImgContainer { 
        order: 3; 
    }
    .founders article .textHeader { 
        order: 4; 
    }
    .pasiLista li{
        font-size: var(--l);
        padding: 20px 0;
    }
}
@media (max-width: 700px) {
    :root{
        --xs: 14px;
        --s: 16px;
        --m: 24px;
        --l: 32px;
        --xl: 40px;
        --xxl: 48px;
    }
    .pasiContainer{
        margin-bottom: 60px;
    }
    .pasiLista {
        margin-bottom: 60px;
    }
    .pasiLista li {
        padding: 25px 0;
        font-size: var(--l);
        display: flex;
        gap: 15px;
        align-items: center;
    }
    .pasiLista li:first-child a {
        color: var(--griInchis2);
        font-weight: 500;
    }
    .pasiLista li::after {
        content: '→';
        font-family: sans-serif;
        font-size: 16px;
        color: var(--gri);
        opacity: 0.5;
        transition: transform 0.3s ease;
    }
    .pasiLista li:first-child::after {
        color: var(--griInchis2);
        opacity: 1;
    }
    .pasiLista li::before {
        font-size: 0.5em;
        margin-right: 2px;
        top: -6px;
    }
    .butonProiecteContainer {
        text-align: center;
    }
    .butonProiecteContainer .butonMic {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
    .clientiContainer{
        display: flex;
        overflow-x: auto;
    }
    .clientiSubtitle{
        text-align: center;
    }
    .clientiContainer::-webkit-scrollbar {
        display: none; 
    }
    .clientCard{
        padding: 20px;
        flex: 0 0 70%;
    }
    .proiecteContainer{
        margin-bottom: 150px;
    }
    .philosophy{
        flex-direction: column;
        gap: 30px;
    }
    .philosophyText{
        align-items: center;
    }
    .philosophyImg{
        aspect-ratio: 2 / 4;
        height: auto;
    }
    .scrisCuAnimatie{
        padding-top: 40px;
    }
    .containerUtil{
        margin-bottom: 60px;
    }
    .proiectDetails article, .proiectDetailsText div{
        margin-bottom: 60px;
    }
    .proiecteHome {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .proiect-item {
        grid-column: span 1 !important;
    }
    #proiect-item-4, #proiect-item-5, #proiect-item-6, #proiect-item-7 {
        display: none;
    }
    .img-wrap {
        aspect-ratio: 16/9 !important;
    }
    .img-wrap,
    .imgUtilsHome {
        height: auto;
    }
    .logoNavbarLink img{
        width: 135px;
    }
    .wrapEmail, .wrapTelefon, .wrapAdresa{
        gap: 12px;
    }
    .contactContent{
        gap: 60px;
        grid-template-columns: 1fr;
    }
    .wrapEmail, .wrapTelefon, .wrapAdresa, .wrapRezultat{
        border: none !important;
    }
    .contact{
        margin-bottom: 100px;
    }
    .cardMesaj{
        height: 440px;
        width: 440px;
    }
}
@media (max-width: 600px) {
    .galerie{
        column-gap: 10px;
    }
    .imagineWrapGalerie {
        margin-bottom: 10px;
    }
    .collaboratorsList {
        gap: 15px;
    }
    .questions .middleSubtitle2{
        text-align: center;
    }
    .portrait{
        display: none;
    }
    .headerContent{
        margin-bottom: 60px;
    }
    .landscape{
        flex: 1;
    }
    .landscape img{
        aspect-ratio: 1 / 1;
    }
    .fullPage {
        padding-top: 150px;
    }
    .coloanaMeniu{
        gap: 20px;
    }
    .navbar .butonMic{
        display: none;
    }
    .navbar{
        flex-direction: row-reverse;
        max-width: 100%;
        overflow: hidden;
    }
    .logoNavbarLink{
        position: static;
        left: auto;
        transform: none;
        max-width: 100%;
    }
    .meniuFullscreen{
        padding-top: 200px;
    }
    nav {
        padding: 20px 0;
    }
    .footerTop img{
        display: none;
    }
    .contactFooter{
        gap: 50px;
    }
    .footerMiddle, .footerBottom{
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 50px;
    }
    .wrapContact, .links{
        text-align: left;
    }
    .footerLogo{
        gap:30px;
    }
    .proiecte{
        gap: 40px;
    }
    .footerBottom {
        margin-bottom: 10px;
    }
    .showOnMobile{
        display: block;
    }
    .philosophyImg, .philosophyText div{
        width: 100%;
    }
}
@media (max-width: 500px) {
    :root{
        --xs: 14px;
        --s: 16px;
        --m: 20px;
        --l: 24px;
        --xl: 32px;
        --xxl: 40px;
    }
    .middleSubtitle{
        margin-bottom: 50px;
    }
    .expandTrack{
        height: auto;
    }
    .proiecteContainer{
        margin-bottom: 100px;
    }
    .pasiLista li{
        font-size: var(--l);
    }
    .headerProiect{
        margin-bottom: 60px;
    }
    .proiectDetails article, .proiectDetailsText div{
        margin-bottom: 40px;
    }
    .cardMesaj{
        height: 350px;
        width: 350px;
    }
    .container{
        width: 95%;
    }
}
@media (max-width: 400px) {
    .collaboratorCard{
        padding: 20px 15px;
    }
    .footerBottom{
        font-size: 12px;
    }
    .galerie {
        column-count: 1;
        column-gap: 0;
    }
    .cardMesaj{
        height: 300px;
        width: 300px;
    }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-text {
	0% {
		opacity: 0;
		transform: translateY(40px);
		clip-path: inset(0 0 100% 0);
	}
	70% {
		clip-path: inset(0 0 0 0);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		clip-path: inset(0 0 0 0);
	}
}
@keyframes disappear-animation {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}