:root{
	--alb: #ffffff;
	--albNav: #f5f5f5;
	--negruText: #222222;
	--negruLinii: rgba(34, 34, 34, 0.15);
	--negruOpac: rgba(34, 34, 34, 0.66);
	--albOpac: rgba(255, 255, 255, 0.8);
	--griDeschisLinii: #F5F5F526;
	--griInchisLinii: #22222226;
	--albastruButon: #003399;
	--rosuButon: #cc0000;
	--verdeButon: #4CAF50;
	--rosuSVG:brightness(0) saturate(100%) invert(16%) sepia(37%) saturate(7283%) hue-rotate(356deg) brightness(95%) contrast(130%);
	--xs: 12px;
	--s: 14px;
	--m: 16px;
	--m2: 18px;
	--m3: 20px;
	--m4: 24px;
	--l: 28px;
	--l2: 32px;
	--xl: 48px;
	--xxl: 56px;
	--xxxl: 64px;
}



@font-face {
	font-family: 'PretendardVariable';
	src: url('../fonts/PretendardVariable.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap
}



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;
	font-family: "PretendardVariable", sans-serif;
	width: 100%;
}

html,body{
	width:100%;
	overflow-x:hidden;
}


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;
}
*{
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}
strong {
    font-weight: 800;
}
em{
    font-style: italic;
}
a{
	text-decoration: none;
}

html,*{
	font-family: "PretendardVariable", sans-serif;
}
iframe{
	max-width: 100%;
}

/******** FIX CKEDITOR ********/
.static{
	position: relative;
}
.static *{
	max-width: 100%;
	line-height: 1.2;
	font-weight: 400;
	font-size: var(--m);
	font-family: "PretendardVariable", sans-serif;
	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 ********/

#preloader {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: black;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: transform 1.5s linear;
	font-size: var(--l);
	color: var(--albNav);
	gap: 8px;
	overflow: hidden;
	flex-direction: row;
}

#preloader img {
	width: 36px;
	height: 36px;
}

#preloader img,
#preloader span {
	opacity: 0;
	transform: translateY(40px);
	animation: reveal-text 1s ease forwards;
}

.disappear-animation {
	animation: disappear-animation 0.5s linear forwards;
}


.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{
	height: 50%;
    width: 35%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 35000;
	border-radius: 32px;
	background-color: var(--alb);
}
.cardMesaj{
	display: none;
}
.cardMesajContent{
	flex-direction: column;
    display: flex;
	justify-content: center;
	position: relative;
	text-align: center;
	gap: 32px;
	border-left: 1px solid var(--griInchisLinii);
    border-right: 1px solid var(--griInchisLinii);
	margin: 0 auto;
    width: 90%;
    height: 100%;
}

.titluCardMesaj{
	font-size: var(--xl);
	line-height: 1.3;
	font-weight: 600;
}

.cardMesajNU .titluCardMesaj{
	color: var(--rosuButon);
}
.cardMesajDA .titluCardMesaj{
	color: var(--albastruButon);
}

.textCardMesaj{
	font-size: var(--m2);
	line-height: 1.5;
	color: var(--negruText);
	font-weight: 400;
}

.xCardMesaj{
	cursor: pointer;
	margin: 0 auto;
}
.textX{
	padding: 0px 30px;
	margin-bottom: 0px;
	font-size: var(--m2);
}


.showCardMesaj {
	overflow: hidden !important;
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
}
.showCardMesaj::before {
	content: "";
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 29999;
	background-color: var(--negruOpac);
}

.wrapSelectServiciu > div{
	width: 100%;
	padding:16px;
	border-bottom: 1px solid var(--negruLinii);
	border-top: 1px solid var(--negruLinii);
	font-size: var(--m);
	border-left: none;
	border-right: none;
}

.wrapSelectServiciu input{
	font-size: var(--m);
}

.wrapSelectServiciu ul li{
	background-color: var(--griDeschisLinii);
}
.backgroundPrimaPagina{
	position: relative;
	height: 100vh; 
	top: 0;
	overflow: hidden;
}

.backgroundPrimaPagina video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	z-index: -1;
	object-fit: cover;
}

.backgroundPrimaPagina::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(34, 34, 34, 0.15); 
	z-index: 0;
}
.container {
	margin: 0 auto;
	max-width: 1400px;
	width: 90%;
	height: 100%;
	position: relative;
	padding: 0px 50px;
	border-left: 1px solid var(--griInchisLinii);
	border-right: 1px solid var(--griInchisLinii);
}
.container.liniiDeschis {
	border-left: 1px solid var(--griDeschisLinii);
	border-right: 1px solid var(--griDeschisLinii);
}
.container.faraLinii {
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}
.home{
	height: 100%;
}

.linieDeschisJos{
	border-bottom: 1px solid var(--griDeschisLinii);
}
.linieInchisJos{
	border-bottom: 1px solid var(--griInchisLinii);
}

.linieDeschisSus{
	border-top: 1px solid var(--griDeschisLinii);
}
.linieInchisSus{
	border-top: 1px solid var(--griInchisLinii);
}

.linieDeschisMijloc{
	position: relative;
	z-index: 1;
}
.linieDeschisMijloc::after{
	content: "";
	width: 1px;
	height: 100%;
	background-color: var(--griDeschisLinii);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
}
.linieInchisMijloc{
	position: relative;
	z-index: 1;
}
.linieInchisMijloc::after{
	content: "";
	width: 1px;
	height: 100%;
	background-color: var(--griInchisLinii);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
}

header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	max-height: 80px;
	z-index: 1000;
	background: transparent;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
header .container.faraLinii {
	position: relative;
	z-index: 10001;
}

header.scrolled, #bgNegru {
	background-color: var(--negruOpac);	
}

nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 2;
	height: 100%;
}


/* Style Butoane Nav */
.dropdownServicii,
.dropdownPortofoliu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: var(--albOpac);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.dropdownServicii.active,
.dropdownPortofoliu.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdownServiciiContent,
.dropdownPortofoliuContent {
	display: flex;
	padding: 32px 0;
	gap: 64px;
}

.flexStangaMeniu {
	flex: 1;
}

.flexDreaptaMeniu {
	flex: 1;
}


.categorieServicii {
	display: flex;
	gap: 15px;
	justify-content: space-between;
	align-items: flex-start;
}

.categoriePortofoliu {
	display: flex;
	gap: 15px;
	justify-content: space-between;
	align-items: flex-start;
}

.categorieItem {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.categorieItem h3 {
	font-size: var(--m);
	color: var(--rosuButon);
	font-weight: 600;
	text-transform: uppercase;
	display: flex;
	gap: 24px;
}
.categorieItem h3 a, .categorieItem h3 a:hover {
	text-decoration: none;
	color: var(--rosuButon);
}

.subcategorii {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.subcategorii a {
	font-size: var(--m);
	color: var(--negruText);
	font-weight: 400;
	cursor: pointer;
	padding: 4px 0;
	transition: color 0.2s ease;
}

.textMeniu {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.textMeniu h1 {
	font-size: var(--l2);
	color: var(--albastruButon);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

.textMeniu p {
	font-size: var(--m2);
	color: var(--negruText);
	line-height: 1.5;
}

.nav-links {
	display: flex;
	gap: 1px;
	color: var(--alb);
	font-size: var(--m);
	line-height: 1.5;
	text-decoration: none;
	align-items: center;
}

.nav-links a, .nav-links > div {
	position: relative;
	justify-content: center;
	height: 100%;
	min-height: 80px;
	text-decoration: none;
	color: inherit;
	flex: 1;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 10px;
	cursor: pointer;
}

.nav-links a img, .nav-links > div img {
	transition: transform 0.2s ease, filter 0.2s ease;
}


.serviciiNav.active img,
.portofoliuNav.active img {
	filter: brightness(0) saturate(100%);
	transform: rotate(180deg);
}


.nav-links a.clasaButon.rosu {
	background-color: var(--rosuButon);
	color: var(--albNav);
	padding: 4px 16px 4px 4px;
	border-radius: 100px;
	display: flex;
	align-items: center;
	gap: 8px;
	height: auto;
	min-height: auto;
	flex: none;
	min-width: auto;
}


/* stiluri pentru link-urile cu dropdown cand sunt active */
.serviciiNav,
.portofoliuNav {
	transition: background-color 0.2s ease, color 0.2s ease;
	display: flex;
	gap: 8px;
}

.serviciiNav.active,
.portofoliuNav.active {
	background-color: var(--albNav);
	color: var(--negruText);
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 80px;
	position: relative;
	z-index: 1000;
}

/*=====================================*/

.sectiunePagina{
	padding:96px 0;
}

.sectiunePrimaPagina {
	padding: 96px 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sectiuneDespreNoi{
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	padding-bottom: 50px;
}





.homeContent{
	position:relative;
	width: 560px ;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 90vh;
	gap: 32px;
	z-index: 2;
}

.textPrimaPagina{
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
	max-width: 800px;
}

.titluBrand{
	font-size: var(--l);
	color: var(--alb);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}

.titluBrand img{
	width: 36px;
	height: 36px;
}

.titluHeaderFooter{
	font-size: var(--xl);
	color: var(--albNav);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.2;
}


.paragrafHeaderFooter{
	font-size: var(--m2);
	color: var(--albNav);
	line-height: 1.5;
	font-weight: 300;
}

.paragrafPagina{
	font-size: var(--m2);
	color: var(--negruText);
	line-height: 1.5;
	font-weight: 300;
	/* width: 60%; */
}

.tc{
	text-align: center;
}

.centrareText{
	text-align: center;
}

.footerLogo {
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--l);
	font-weight: bold;
	color: var(--alb);
}


.clasaButon {	
	color: var(--albNav);
	padding: 4px 16px 4px 4px;
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}

button.clasaButon {
	font-size: var(--m);
    border: none;
    cursor: pointer;
}

.albastru{
	background-color: var(--albastruButon);
}

.rosu{
	background-color: var(--rosuButon);
}

.verde{
	background-color: var(--verdeButon);
}

.clasaButon::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 36px;
	height: 36px;
	background-color: var(--albNav);
	border-radius: 100px;
	transition: width 0.2s ease;
	z-index: 1;
}

.clasaButon:hover::before {
	width: calc(100% - 8px);
}

.clasaButon .wrapIconita,
.clasaButon .textButonRosu,
.clasaButon .textButonAlbastru,
.clasaButon .textButonVerde {
	position: relative;
	z-index: 2;
}

.wrapIconita {
	width: 36px;
	height: 36px;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

.textButonRosu, .textButonAlbastru, .textButonVerde {
	color: var(--albNav);
	transition: color 0.1s ease;
}

.clasaButon:hover .textButonAlbastru {
	color: var(--albastruButon);
}

.clasaButon:hover .textButonRosu {
	color: var(--rosuButon);
}

.clasaButon:hover .textButonVerde {
	color: var(--verdeButon);
}

.wrapIconita {
	width: 36px;
	height: 36px;
	background-color: var(--albNav);
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.wrapIconita img {
	width: 18px;
	height: 18px;
	transition: all 0.2s ease;
}
.wrapIconita.iconitaBig img {
	width: 30px;
	height: 30px;
}




.wrapDespreNoi{
	display: flex;
	gap:80px;
}

.wrapImagine{
	flex:1;
	display: flex;
	position: relative;
	overflow: hidden;
	height: 600px;
}

.wrapImagine img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.2s ease;
}
.cardDespreNoi{
	position: relative;
}

.textSectiunePagina{
	flex:1;
	display: flex;
	flex-direction: column;
	gap: 32px;
	position: relative;
	max-width: 768px;
}


.titluPagina{
	font-size:var(--m);
	color:var(--rosuButon);
	font-weight:600;
	line-height:1.5;
	text-transform: uppercase;
}

.subtitluPagina{
	font-size:var(--xl);
	color:var(--albastruButon);
	font-weight:600;
	line-height:1.2;
	text-transform: uppercase;
	word-break: break-word;
}


.statisticiDespreNoi{
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	gap:32px;
}

.numarDespreNoi {
	font-size: var(--m4);
	color: var(--rosuButon);
	font-weight: 500;
	line-height: 1.3;
	margin-top: 15px;
	margin-bottom: 15px;
}

.textStatistici{
	font-size:var(--m);
	color:var(--negruText);
	font-weight:400;
	line-height:1.4;
}

.butonAflaMaiMulte{
	background-color:var(--rosuButon);
	color:var(--alb);
	padding:8px 16px;
	border-radius:100px;
}

.wrapCertificare{
	display: flex;
	gap:24px;
	align-items: center;
	flex-wrap: wrap;
}

.certificari img{
	width:64px;
	height:64px;
}

.sectiuneServicii{
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex:1;
	position: relative;
}

.wrapServicii{
	display: flex;
	gap:100px;
}

.cardServicii{
	border-bottom: 1px solid var(--negruLinii);
	border-top: 1px solid var(--negruLinii);
	padding:32px 0;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.cardServicii:not(:first-child) {
	border-top: none;
}



.cardServicii.active .wrapTitluServiciu>.titluServiciu{
	color: var(--rosuButon);
}
.paginaServicii .cardServicii.active .wrapTitluServiciu>.titluServiciu{
	padding-top: 0;
}

.cardServicii.active .linkServiciu, .cardServicii.active .paragrafServicii{
	max-height: 500px;
}
.paginaServicii .cardServicii.active .linkServiciu{
	padding-bottom: 0;
}

.cardServicii.active .titluServiciu img {
	filter: var(--rosuSVG);
}


.cardServicii.active .wrapTitluServiciu > img {
	filter: var(--rosuSVG);
	transform: rotate(45deg);
}

.cardServicii.active .linkServiciu img {
	filter: var(--rosuSVG);
}

.cardServicii.active .paragrafServicii {

	padding: 16px 0;
}

.titluServiciu {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--m2);
	font-weight: 600;
	color: var(--negruText);
	transition: color 0.2s ease;
}

.wrapTitluServiciu {
	display: flex;
	justify-content: space-between;
	
}

.wrapParagrafServicii{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.paginaServicii .wrapParagrafServicii{
	gap: 16px;
}
.wrapTitluServiciu img {
	transition: transform 0.2s ease, filter 0.2s ease;
}

.linkServiciu, .paragrafServicii {
	max-height: 0;
	overflow: hidden;
	line-height: 1.2;
}

.linkServiciu{
	color: var(--rosuButon);
	display: flex;
	gap: 8px;
	align-items: center;
}
.linkServiciu img {
	display: flex;
}

.butonServicii{
	background-color:var(--rosuButon);
	color:var(--alb);
	padding:8px 16px;
	border-radius:100px;
}

.jc{
	justify-content: center;
}

.wrapButtoane {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.wrapPagina {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.headerPagina{
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content:center;
	align-items: center;
	max-width: 768px;
	position: relative;
}

.textPagina{
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	gap: 24px;
}

.backgroundFooter {
	position: relative;
	background-image: url(../images/backgroundFooter-grafit.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 100%;
}

.backgroundFooter::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}


.footerTop {
	flex: 1;
	padding: 150px 0;
}

.footerBottomBackground {
	background-color: var(--negruText);
}
.footerBottom {
	padding: 64px 0;
	flex: 1;
}
.linkWeblama{
	display: flex;
	align-items: center;
	gap: 8px;
}

.footerTopContent{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}

.wrapTopFooter{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	max-width: 768px;
	position: relative;
}


.footerContact{
	color:var(--albNav);
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
	max-width: 300px;
	position: relative;
}

.titluFooterContact{
	font-size: var(--m2);
	color: var(--albNav);
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.footerContactItem {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: var(--m);
	line-height: 1.2;
	margin-bottom: 15px;
	align-items: center;
	font-weight: 200;
}

.footerContactItem img{
	width: 16px;
	height: 16px;
	margin-top: 2px;
	flex-shrink: 0;
}

.footerSocialItem img{
	width: auto;
	height: 18px;
}

.footerColoane{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 48px;
	margin-bottom: 32px;
}

.coloaneJos{
	display: flex;
	color: var(--albNav);
	gap: 48px;
	flex: 2;
	justify-content: flex-end;
}

.coloana{
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 120px;
}
.coloana a{
	color: var(--albNav);
	text-decoration: none;
}
.coloana a:hover{
	color: var(--albNav);
	text-decoration: underline;
}

.titluFooterColoana{
	font-size: var(--m2);
	color: var(--albNav);
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.coloana ul{
	display: flex;
	flex-direction: column;
}

.coloana .footerContactItem{
	font-size: var(--m);
	line-height: 1.4;
	color: var(--albNav);
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.footerSocialRow{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.footerSocial{
	display: flex;
	gap: 12px;
}

.footerPartner{
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--albNav);
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.2s ease;
	flex-shrink: 0;
}

.footerPartner:hover{
	opacity: 1;
	color: var(--albNav);
	text-decoration: none;
}

.footerPartnerText{
	font-size: var(--s);
	font-weight: 300;
	white-space: nowrap;
}

.footerPartnerLogo{
	height: 32px;
	width: auto;
	display: block;
}

.footerInformatii {
	display: flex;
	justify-content: space-between;
	color: var(--albNav);
	padding: 30px 0;
	align-items: center;
	font-size: var(--s);
	font-weight: 300;
	flex-wrap: wrap;
	gap: 10px;
}

.informatii{
	display: flex;
	gap: 24px;
}

.informatii a{
	color: var(--albNav);
	text-decoration: underline;
	
}

.paddingTopSubMeniu{
	padding-top: 150px;
}

.backgroundAbout {
	position: relative;
	background-image: url(../images/backgroundDespreNoi-grafit-new.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
}

.backgroundAbout::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}
.backgroundAbout .container{
	min-height: 100vh;
	padding-bottom: 40px;
}


.aboutContent{
	display: flex;
	flex-direction: column;
	gap: 64px;	
	position: relative;
	z-index: 2;
	width: 100%;
}

.wrapStatisticiAbout {
	font-size: var(--m2);
	color: var(--albNav);
	line-height: 1.5;
	font-weight: 400;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	gap: 40px;
}
.card {
	border-left: 1px solid var(--albNav);
	padding-left: 32px;
	flex: 1;
	position: relative;
}

.numarStatisticiAbout{
	font-size: var(--xxxl);
	color: var(--albNav);
	font-weight: 600;
	line-height: 1.3;
}

.labelStatisticiAbout{
	font-size: var(--m3);
	color: var(--albNav);
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	min-height: 50px;
}



.backgroundServicii {
	position: relative;
	background-image: url(../images/backgroundServicii-grafit.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 60vh;
	top: 0;
}

.backgroundServicii::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.serviciiContent{
	display: flex;
	flex-direction: column;
	gap: 64px;
	position: relative;
	z-index: 2;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.textServicii,.textPortofoliu,.textGalerie{
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
	max-width: 768px;
}

.containerServicii,.containerPortofoliu,.containerGalerie{
	display: flex;
	flex-direction: column;
	gap: 64px;
	align-items: center;
}


.backgroundPortofoliu {
	position: relative;
	background-image: url(../images/backgroundPortofoliu-grafit.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 60vh;
	top: 0;
}

.backgroundPortofoliu::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}


.portofoliuContent{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	position: relative;
	z-index: 2;
}

.backgroundCariere {
	position: relative;
	background-image: url(../images/backgroundCariere-grafit.webp);
	background-size: cover;
	background-position: center 20%;
	background-repeat: no-repeat;
	top: 0;
}

.backgroundCariere::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.backgroundCariere .container{
	min-height: 60vh;
	padding-bottom: 40px;
}

.cariereContent{
	display: flex;
	flex-direction: column;
	gap: 64px;
	position: relative;
	z-index: 2;
}

.wrapCariere, .wrapSectiuneBeneficii{
	display: flex;
	gap: 100px;
}

.wrapTitluBeneficii{
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.contactContent, .wrapContactFormular{
	position: relative;
}

.wrapBeneficii{
	display: flex;
	flex-direction: column;
}

.cardBeneficii {
	border-bottom: 1px solid var(--negruLinii);
	border-top: 1px solid var(--negruLinii);
	position: relative;
}

.cardBeneficii:not(:first-child) {
	border-top: none;
}

.titluBeneficii{
	font-size: var(--m4);
	color: var(--rosuButon);
	font-weight: 600;
	line-height: 1.5;
	padding-bottom:16px;
	text-transform: uppercase;
	padding:16px 0 8px 0;
}

.paragrafBeneficii{
	font-size: var(--m);
	color: var(--negruText);
	font-weight: 400;
	line-height: 1.5;
	padding-bottom:16px;
}

.gridJoburi{
	display: grid;
	grid-template-columns: repeat(3, 2fr);
	gap: 32px;
}

.cardJob{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	border: 1px solid var(--negruLinii);
	padding: 32px;
}

.wrapLogo{
	display: flex;
	justify-content: center;
	align-items: center;
}

.titluJob{
	font-size: var(--m3);
	color: var(--rosuButon);
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	text-align: center;
}
.locatieSiTip{
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.locatieSiTip span{
	color: var(--albastruButon);
}
.logo a{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--l);
	font-weight: bold;
	color: var(--albNav);
}
.logoSus, .logoFooter{
	width: 60px;
	filter: contrast(0.5);
}
.paragrafJob{
	display: flex;
	font-size: var(--m);
	color: var(--negruText);
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

.backgroundContact {
	position: relative;
	background-image: url(../images/backgroundContact-grafit.webp);
	background-size: cover;
	background-position: center 70%;
	background-repeat: no-repeat;
	height:60vh;
	top: 0;

}

.backgroundContact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.wrapContact{
	display: flex;
	gap: 100px;
}
.ac{
	align-items: center;
}
.wrapContactFormular{
	flex:1;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.wrapContactHarta{
	flex:1;
}

.wrapContactHarta img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.titluContact{
	font-size: var(--xl);
	color: var(--albastruButon);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.linkLege{
	text-decoration: underline;
	line-height: 1.5;
	color:var(--negruOpac);
}


/* Stiluri pentru formularul de contact */
.formular-contact form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.formular-contact label {
	font-size: var(--m3);
	color: var(--negruText);
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
}

.formular-contact label:not(:first-child) {
	border-top: none;
}

.formContact {
	width: 100%;
	padding:16px;
	border-bottom: 1px solid var(--negruLinii);
	border-top: 1px solid var(--negruLinii);
	font-size: var(--m);
	border-left: none;
	border-right: none;
}



.legeWrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0;
}

.legeWrap input[type="checkbox"] {
	margin: 0;
}

.legeWrap label {
	border: none;
	padding: 0;
	margin: 0;
	font-size: var(--m);
	color: var(--negruText);
	font-weight: 400;
	text-transform: none;
}

/* ========================================
   CSS Pentru Galerie
   ======================================== */

.galerieServicii {
	width: 100%;
}

/* background-image: url(../images/backgroundFooter-grafit.webp); */
.optiune1 {
	background-image: url(../images/optiune1Servicii-grafit.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.optiune1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.optiune2 {
	background-image: url(../images/optiune2Servicii-grafit.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.optiune2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.optiune3 {
	background-image: url(../images/optiune3Servicii-grafit.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.optiune3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.optiune4 {
	background-image: url(../images/optiune4Servicii-grafit.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.optiune4::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.optiune5 {
	background-image: url(../images/optiune5Servicii-grafit.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.optiune5::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.optiune6 {
	background-image: url(../images/optiune6Servicii-grafit.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.optiune6::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}

.wrapOptiune {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	justify-content: flex-end;
	height: 100%;
}

.wrapIconitaVeziMaiMult {
	width: 12px;
	height: 12px;
}

.wrapVeziMaiMult {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--albNav);
	font-weight: bold;
}

.titluOptiune {
	display: flex;
	font-size: var(--l2);
	color: var(--albNav);
	font-weight: 600;
	line-height: 1.3;
}

.tabs {
	display: flex;

}

.tab {
	flex: 1;
	background: #f0f0f0;
	border: none;
	cursor: pointer;
	border: 1px solid var(--negruLinii);
	font-size: var(--m3);
	line-height: 1.4;
	text-transform: uppercase;
	font-weight: 600;
	padding: 24px 0;
}

.tab.active {
	background: #0056b3;
	color: white;
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 2fr);
	gap: 1px;
}

.grid a {
	position: relative;
	display: block;
	text-align: center;
	color: var(--albNav);
	font-weight: bold;
	aspect-ratio: 1;
}

.grid img {

	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ========================================
   ======================================== */


   .backgroundServiciu {
   	position: relative;
   	background-image: url(../images/backgroundServiciu-grafit.webp);
   	background-size: cover;
   	background-position: center;
   	background-repeat: no-repeat;
   	top: 0;

   }
   .backgroundServiciu .container{
	min-height: 60vh;
   }

   .backgroundServiciu::before {
   	content: "";
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100%;
   	background-color: var(--negruOpac);
   	z-index: 0;
   }

   .serviciuContent {
   	display: flex;
   	flex-direction: column;
   	gap: 32px;
   	position: relative;
   	z-index: 2;
   	height: 100%;
   }

   .wrapServiciu {
	display: flex;
	gap:100px;
   }
   .sectiuneProiect {
   	height: 100%;
	min-height: 60vh;
   	width: 100%;
   	display: flex;
   	align-items: flex-end;
   	padding-bottom: 100px;
   }
   .proiectContent{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	gap: 20px;
   }
   .proiectContent .textPrimaPagina{
	flex: 1;
	min-width: 0;
	max-width: 560px;
   }
   .proiectContent .wrapDetaliiProiect{
	flex-shrink: 0;
   }
	.wrapDetaliiProiect {
		display: grid;
		gap: 32px;
		color: var(--albNav);
		grid-template-columns: 1fr 1fr;
	}
   .detaliuProiect{
	display: flex;
	flex-direction: column;
	gap: 8px;
   }
   .titluDetaliuProiect{
	font-size: var(--m4);
	font-weight: 600;
	line-height: 1.4;
   }
   .paragrafDetaliuProiect{
	font-weight: 300;
	max-width: 300px;
   }

   /* Stiluri pentru etapele procesului */
   .etapeProces {
   	display: flex;
   	flex-direction: column;
   	gap: 16px;
   	position: relative;
   	flex: 1;

   }

   .etapaProces {
   	display: flex;
   	gap: 32px;
   }

   .iconiteEtapa {
   	display: flex;
   	flex-direction: column;
   	align-items: center;
   	gap: 16px;
   }

   .iconitaEtapa img {
   	width: 48px;
   	height: 48px;
   }

   .textEtapa {
   	flex: 1;
   	display: flex;
   	flex-direction: column;
   	gap: 16px;
	position: relative;
   }

   .titluEtapa {
   	font-size: var(--m4);
   	font-weight: 600;
   	color: var(--rosuButon);
   	text-transform: uppercase;
   	line-height: 1.4;
   }

   .paragrafEtapa {
   	font-size: var(--m);
   	color: var(--negruText);
   	line-height: 1.5;
   }

.galerie{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 15px;
	width: 100%;
}

.galerieItem{
	width: 100%;
	aspect-ratio: 1/1;
	margin: auto;
}
.galerieItem a{
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.15s ease-in-out;
}
.galerieItem:nth-child(2n){
	margin-left: 0;
	margin-right: auto;
}
.galerieItem:nth-child(2n+1){
	margin-right: 0;
	margin-left: auto;
}
.galerieItem a:hover{
	transform: scale(0.95);
	transition: transform 0.15s ease-in-out;
}

.galerieItem img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.alteServicii{
	display:flex;
}
.galerieAlteServiciiItem {
	background-image: url(../images/optiune2Servicii-grafit.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	flex: 1;
	min-height: 400px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	max-width: 400px;
	border-right: 1px solid var(--alb);
}

.galerieAlteServiciiItem::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--negruOpac);
	z-index: 0;
}
.mobileMenu {
	display: block;
	position: fixed;
	width: 100svw;
	height: 100svh;
	background-color: var(--albOpac);
	z-index: 800;
	top: 0;
	left: 0;
	display: flex;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.mobileMenu.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.stop-scrolling {
	height: 100%;
	overflow: hidden;
}

#toggle, .nuApare{
	display: none;
}

#toggle:checked+.hamburger .top-bun {
	transform: rotate(-45deg);
	margin-top: 7px;
}

#toggle:checked+.hamburger .bottom-bun {
	opacity: 0;
	transform: rotate(45deg);
}

#toggle:checked+.hamburger .meat {
	transform: rotate(45deg);
	margin-top: -4px;
}

#toggle:checked+.hamburger+.nav {
	top: 0;
	transform: scale(1);
	z-index: 4;
}

.hamburger {
	width: 40px;
	z-index: 5;
}

.hamburger div {
	position: relative;
	width: 40px;
	height: 4px;
	border-radius: 0px;
	background-color: var(--albOpac);
	margin-top: 10px;
	transition: all 0.2s ease-in-out;
}
.linksMobile {
	display: block;
	font-size: var(--l);
	color: var(--negruText);
	padding-top: 140px;
}
.linksMobile a {
	color: var(--negruText);
	text-decoration: none;
	display: block;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.linksMobile a:hover {
	color: var(--negruText);
	text-decoration: underline;
}
.linksMobile a.clasaButon{
	font-size: var(--m);
	display: inline-flex;
	padding-bottom: 4px;
	margin-bottom: 0px;
}

.wrapStatistici{
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	gap: 32px;
	/* display: flex;
	gap: 32px;
	flex-wrap: wrap; */
}
.wrapPaginaStatica{
	padding-top: 200px;
	padding-bottom: 100px;
	max-width: 100%;
}
.wrapPaginaCategorie{
	padding-top: 100px;
	max-width: 100%;
	padding-bottom: 100px;
}
.galeriePoze{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.divImgGalerie {
	width: 150px;
	height: auto;
	max-width: 45%;
	aspect-ratio: 1 / 1;
}
.divImgGalerie a{
	display: block;
	width: 100%;
	height: 100%;
}
.divImgGalerie img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media (max-width: 1300px) {
	.cardMesaj{
		height: 40%;
        width: 45%;
	}
}
@media (max-width: 1100px) {
	.logo a span{
		display: none;
	}
}
@media (max-width: 900px) {
	:root{
		--xs: 12px;
		--s: 14px;
		--m: 16px;
		--m2: 18px;
		--m3: 20px;
		--m4: 22px;
		--l: 28px;
		--l2: 28px;
		--xl: 40px;
		--xxl: 48px;
		--xxxl: 56px;
	}
	.dropdownServicii,
	.dropdownPortofoliu{
		background-color: var(--albNav);
	}
	.logo a span {
		display: inline;
	}
	.hamburger{
		display: block;
	}
	.nav-links{
		display: none;
	}
	.container{
		padding: 0 20px;
	}
	.footerColoane{
		flex-direction: column;
	}
	.footerSocialRow{
		flex-wrap: wrap;
	}
	.footerPartner{
		width: 100%;
		justify-content: center;
		margin-top: 8px;
	}
	.cardJob{
		padding: 10px;
	}
	.wrapDespreNoi, .wrapServicii, .wrapSectiuneBeneficii,
	.wrapCariere, .wrapContact, .wrapServiciu{
		gap: 20px;
	}
	.nuApare{
		display: block;
	}
	.categorieItem h3{
		font-size: var(--m4);
	}
	.flexStangaMeniu{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		height: calc(100svh - 140px);
	}
	.categorieServicii, .categoriePortofoliu{
		flex-direction: column;
		gap: 30px;
	}
	.subcategorii{
		display:none;
	}
	.dropdownServiciiContent, .dropdownPortofoliuContent{
		padding: 0;
		padding-top: 60px;
	}
	.textX{
		padding: 0px 20px;
	}
}
@media (max-width: 800px) {
	.linieInchisMijloc::after, .linieDeschisMijloc::after{
		display: none;
	}
	.wrapDespreNoi{
		flex-direction: column-reverse;
		gap: 50px;
	}
	.wrapServicii, .wrapSectiuneBeneficii, .wrapCariere, .wrapContact, .wrapServiciu, .proiectContent{
		flex-direction: column;
		gap: 50px;
	}
	.proiectContent .textPrimaPagina{
		max-width: none;
	}
	.wrapImagine{
		flex: unset;
		height: 400px;
		width: 100%;
	}
	.grid{
		grid-template-columns: 1fr 1fr;
	}
	.tabs, .alteServicii{
		flex-direction: column;
	}
	.tab{
		padding: 16px 0;
	}
	.gridJoburi{
		grid-template-columns: 1fr;
	}
	.coloaneJos{
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}
@media (max-width: 700px) {
	.cardMesaj{
		width: 60%;
	}
}
@media (max-width: 600px) {
	.grid {
		grid-template-columns: 1fr;
	}
	.sectiuneProiect{
		padding-bottom: 20px;
	}
}
@media (max-width: 500px) {
	.statisticiDespreNoi, .galerie{
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.galerieItem{
		height: auto;
		width: 100%;
		max-width: 400px;
	}
	.galerieItem:nth-child(2n+1), .galerieItem:nth-child(2n){
		margin: 0 auto;
	}
	.numarDespreNoi{
		margin: 5px 0px;
	}
	.wrapImagine,
	.galerieAlteServiciiItem {
		height: 300px;
	}
}
@media (max-width: 450px) {
	:root {
		--xs: 10px;
		--s: 12px;
		--m: 14px;
		--m2: 16px;
		--m3: 18px;
		--m4: 20px;
		--l: 24px;
		--l2: 24px;
		--xl: 36px;
		--xxl: 40px;
		--xxxl: 48px;
	}
}
@media (max-width: 400px) {
	.footerContactItem{
		gap: 3px;
	}
	.container{
		padding: 0 10px;
		width: 95%;
	}
	.cardServicii{
		padding: 16px 0;
	}
	.cardServicii.active .linkServiciu{
		padding-bottom: 10px;
	}
	.cardServicii.active .wrapTitluServiciu>.titluServiciu{
		padding-top: 10px;
	}
	.textSectiunePagina, .sectiuneServicii{
		gap: 16px;
	}
	.sectiunePagina{
		padding: 50px 0;
	}
	.footerColoane, .coloaneJos{
		gap: 20px
	}
	.footerInformatii{
		padding: 20px 0;
	}
	.galerieItem{
		height: auto;
		width: 100%;
	}

	.wrapDetaliiProiect{
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.proiectContent{
		gap: 20px;
	}
	.sectiuneProiect{
		padding-top: 80px;
	}
	.textPrimaPagina{
		gap: 16px;
	}
	.textX{
		padding: 0px 5px;
	}
}
@media (max-width: 350px) {
	:root {
		--xs: 10px;
		--s: 12px;
		--m: 14px;
		--m2: 14px;
		--m3: 16px;
		--m4: 18px;
		--l: 20px;
		--l2: 20px;
		--xl: 30px;
		--xxl: 36px;
		--xxxl: 40px;
	}

	.footerContactItem {
		gap: 3px;
	}

	.container {
		padding: 0 10px;
		width: 95%;
	}
	#preloader img {
		width: 30px;
		height: 30px;
	}
}

@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% {
		/* opacity: 1; */
		transform: translateY(0);
	}
	100% {
		/* opacity: 0; */
		transform: translateY(-100%);
	}
}