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, 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;
}
html { 
    scroll-behavior: smooth; 
}
body {
	line-height: 1;
}
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;
}
/* END CSS RESET */
*{
    padding: 0;
    margin: 0;
	box-sizing: border-box;
}
:root {
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --darkblack: #000;
    --black: rgb(62 68 72);
    --darkblue: #223d7a;
    --blue: #2e52a6;
    --lightblue: #5c7fb8;
    --white: #fff;
    --darkgrey: rgb(167 171 172);
    --grey: #ddd;
    --lightgrey: #f2f2f2;
    --gold: #ffd700;
    --red:#ed1c24;
    --gradientBlue: linear-gradient(135deg, #0056b3 0%, #003366 100%);
    --radius: 5px;
    --xs: 9px;
    --s: 11px;
    --m: 13px;
    --ml: 16px;
    --l: 20px;
    --xl: 25px;
	--mformobile:13px;
	--sformobile:11px;
}
:focus{
	outline: none;
}
input[type="checkbox"] {
  accent-color: var(--blue);
}

/* CLASE */
i{
    font-style: italic;  
}
b, .bold {
    font-weight: bold;
}
.bgwhite {
	background: var(--white);
}
.db{
    display: block;
}
.display-inline-flex{
    display: inline-flex;
}
.color-red{
    color: var(--red);
}
.color-white{
    color: var(--white);
}
.color-blue{
    color: var(--blue);
}
.color-black{
    color: var(--black);
}
.color-darkblack{
    color: var(--darkblack);
}
.color-darkblue{
    color: var(--darkblue);
}
.color-darkgrey{
    color: var(--darkgrey);
}
.color-grey{
    color: var(--grey);
}
.mb-4rem{
    margin-bottom: 4rem;
}
.mt10{
	margin-top: 10px;
}
.mt20{
	margin-top: 20px;
}
.mt30{
	margin-top: 30px;
}
.mt100{
	margin-top: 100px;
}
.mt0{
	margin-top: 0px;
}
.pb40{
	padding-bottom: 40px;
}
.pad-y-20{
    padding-top: 20px;
    padding-bottom: 20px;
}
.pad-x-20{
    padding-left: 20px;
    padding-right: 20px;
}
.pad-y-10{
    padding-top: 10px;
    padding-bottom: 10px;
}
.pad-x-10{
    padding-left: 10px;
    padding-right: 10px;
}
.pad-5{
    padding: 5px;
}
.position-relative{
	position: relative;
}
.position-absolute{
	position: absolute;
}
.grid{
    display: grid;
}
.grid-half{
    /* grid-template-columns: 1fr 1fr; */
    grid-template-columns: repeat(2, calc(50% - 12px))
}
.grid-3-cols{
    grid-template-columns: repeat(3, 1fr);
}
.gap-20px{
    gap: 20px;
}
.column-gap-10px{
    column-gap: 10px;
}
.text-align-center, .center{
    text-align: center;
}
.text-align-right{
    text-align: right;
}
.text-align-left{
    text-align: left;
}
.font-m{
    font-size: var(--m) !important;
}
.font-ml{
    font-size: var(--ml) !important;
}
.font-l{
    font-size: var(--l) !important;
}
.border-top-grey{
    border-top: 1px solid var(--grey);
}
.border-right-grey{
    border-right: solid var(--grey) 1px;
}
.border-left-grey{
    border-left: solid var(--grey) 1px;
}
.border-bottom-grey{
    border-bottom: solid var(--grey) 1px;
}
.border-all-blue{
    border: 1px solid var(--blue);
}
.border-all-darkgrey{
    border: 1px solid var(--darkgrey);
}
.border-radius-5{
    border-radius: 5px;
}
.width-fit-content{
    width: fit-content;
}
.pad-t-20{
    padding-top: 20px;
}
.box-grey{
    border: solid var(--grey) 1px;
}
.background-lightgrey{
    background-color: var(--lightgrey) !important;
}
.background-blue{
    background-color: var(--blue) !important;
}
.background-white{
    background-color: var(--white);
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mw-100{
    max-width: 100%;
}
.outlined {
    -webkit-filter: drop-shadow(2px 2px 0 white)
                    drop-shadow(-2px 2px 0 white)
                    drop-shadow(2px -2px 0 white)
                    drop-shadow(-2px -2px 0 white);

    filter: drop-shadow(2px 2px 0 white)
            drop-shadow(-2px 2px 0 white)
            drop-shadow(2px -2px 0 white)
            drop-shadow(-2px -2px 0 white);
}
/* END CLASE */
/* TABEL FANCY */
.fancyTable {
  border-collapse: collapse;
  width: 100%;
}
.fancyTable td, .fancyTable th {
  border: 1px solid var(--grey);
  padding: 8px;
}

.fancyTable tr:nth-child(even){
    background-color: var(--lightgrey);
}

.fancyTable tr:hover {
    background-color: var(--grey);
}

.fancyTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: var(--black);
  color: var(--white);
}
.fancy-holder{
    width: 70%;
    margin: 0 auto;
    min-width: 300px;
}
.fancy-holder .SumoSelect{
    width: 100%;
    margin-left: 0;
    margin-top: 0;
}
.width-full{
    width: 100%;
}
/* END TABEL FANCY */
/* BUTOANE */
.btn-link {
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    transition: background 0.3s;
}
.btn-link.background-blue{
    border: none;
}
.btn-link.border-all-blue:hover{
    background-color: var(--lightgrey);
}
input[type="submit"], button {
    padding: 5px 10px;
    font-size: var(--s);
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.2px;
	transition: all .3s ease;
}
.btn-link.background-blue:hover{
	background-color: var(--darkblue) !important;
}
/* BUTOANE END */
.menu-top a, #footer a{
    color: var(--white);
}

a{
    color: var(--gradientBlue);
	text-decoration: none;
	transition: all .3s ease;
    position: relative;
}
.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -3px;
    left: 0;
    background-color: var(--black);
    transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
}
.hover-underline-animation::after {
  transform-origin: bottom center;
}

.hover-underline-animation:hover::after {
  transform-origin: bottom center;
}
body{
	font-size: var(--s);
	font-family: 'Open Sans', sans-serif;
	position: relative;
	color:var(--darkblack);
	min-height: 100vh;
}
#main{
	padding-bottom: 50px;
    padding-top: 130px;
    min-height: calc(100vh - 300px);
}


.container{
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
}
.roscHolder{
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 10px;
}
select {
    display: block;
    font-size: var(--m);
    font-weight: 500;
    color: var(--black);
    line-height: 2;
    padding: 5px 12px;
    padding-right: 25px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--grey);
    border-radius: 3px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--white);
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23013c22%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat, repeat;
    background-position: right 10px top 50%, 0 0;
    background-size: 8px auto, 100%;
}
select::-ms-expand {
    display: none;
}
/* Hover style */
select:hover {
    border-color: var(--darkblack);
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300834a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
}
/* Focus style */
select:focus {
	border-color: var(--grey);
	box-shadow: 0 0 1px 1px var(--darkblack);
	box-shadow: 0 0 0 1px -moz-mac-focusring;
	outline: none;
}
header {
    background: white;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 9999;
    box-shadow: 0px -1px 6px 2px var(--darkblue);
    border-bottom: solid var(--darkblue) 2px;
    transition: top 0.3s;
}

.menu-holder{
    display: grid;
    grid-template-columns: 1fr 3fr;
}
.menu-left{
    position: relative;
}
.menu-top{
    background-color: var(--darkblue);
    height: 40px;
}    

.holder-top{
    text-align: right;
    font-size: 13px;
    height: 100%;   
}
.holder-top div {
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.holder-top a {
    height: 100%;
    display: inline-flex;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0 10px;
}
.meniu-links{
    display: flex;
    justify-content: space-around;
    padding: 26px 0 26px 10px;
    align-items: center;
}
.meniu-links a {
    font-size: var(--m);
    color: black;
    text-transform: uppercase;
    font-weight: bold;
}
.logo-holder {
    display: flex;
    align-items: center;
    height: 100%;
}
.logo-holder .logo{
}
.logo-holder .logo::after{
    content: "";
    z-index: 999;
    position: absolute;
    top: -20px;
    left: 50%;
    width: 50%;
    height: 20px;
    background-color: var(--white);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 100%);
    transform: translate(-50%, 0);
}
/* .logo-holder .logo::before{
    content: "";
    z-index: 99999999;
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 120%;
    height: 10px;
    background-color: var(--white);
    transform: translate(-50%, 0);
    border-bottom: solid var(--darkblue) 2px;
    border-left: solid var(--darkblue) 2px;
    border-right: solid var(--darkblue) 2px;
    box-shadow: -1px 2px 2px 0px var(--darkblue);
} */
.meniu {
	margin:0px;
	padding:0px;
}
.baraCautare {
	background-color: var(--blue);
    padding: 5px 0;
    width: 100%;	
    grid-area: 2 / 1 / 3 / 2;
    grid-column: 1 / 3;
    position: relative;
}
.baraCautare::after{
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: -100%;
    height: 100%;
    width: 100%;
    background-color: var(--blue);
}
.baraCautare::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background-color: var(--blue);
}
.baraCautare form {
    max-width: 50%;
    margin: auto;
}
.menu-bottom{
    display: grid;
    grid-template-columns:  5fr 1fr;
    column-gap: 10px;
    min-height: 80px;
    height: 100%;
}
.menu-right{
}
.cosContainer{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.imgContactContainer {
    width: 80px;
    height: 10px;
}
.imgContactContainer img {
    width: 100%;
    height: 100%;
}

.headerToolbar {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    font-size: 16px;
}
.logo img {
    height: 90px;
}
.meniu-sus {
    grid-area: meniuSus;
    grid-template-columns: 3fr 1fr 1fr;
    display: grid;
    margin-top: 4px;
    padding: 15px 10px;
    padding-right: 0px;
    color: var(--white);
    border-bottom-left-radius: 3px;
    column-gap: 20px;
}
.categorii-sus {
    grid-area: categoriiSus;
    display: grid;
    align-items: center;
    grid-template-columns: 1.5fr 1fr;
    column-gap: 5px;
    font-size: var(--m);
    border: 0px !important;
    position: relative;
}
#menu > li > ul:not(.options){
	position: absolute;
    top: 100% !important;
    left: 0px !important;
	display: none;
}
#menu ul:not(.options) li:last-child{
	border-bottom: 1px solid var(--grey);
	margin-bottom: -1px;
}
#menu ul:not(.options) {
    width: 100%;
    top: 0px !important;
    position: absolute !important;
    border-top: 0px !important;
    min-height: calc(100% + 1px);
    background-color: var(--white);
}
#menu .ui-menu-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    margin: auto 0;
}

.onlyForMobile {
	visibility: hidden;
}
.auto-sus {
    background-color: var(--darkblue);
    color: var(--white);
    padding: 7px 10px !important;
    border-radius: 3px;
	cursor: pointer;
	font-weight: 600 !important;
	transition: all .3s ease;
    border: 0px !important;
}
.auto-sus a {
	color: var(--white);
}
.auto-sus:hover {
    background-color: var(--blue);
}
.piese-sus .ui-menu-icon, .auto-sus .ui-menu-icon{
	display: none;
}
.piese-sus {
    padding: 7px 10px !important;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
    background: none !important;
    font-weight: 600 !important;
    color: #fff !important;
    background-color: var(--darkblue) !important;
    border: 0px !important;
	margin: unset !important;
}
.piese-sus:hover {
    background-color: var(--blue) !important;
}
.categorieOptiune {
    padding: 0px !important;
    border: 0px !important;
	position: relative;
	margin: unset !important;
}
.categorieOptiune a {
    color: var(--negru);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    padding: 10px;
    border-top: 1px solid var(--grey);
}
.categorieOptiune a:hover{
	background-color: var(--blue);
	color:var(--white);
}
.minicat {
    background-color: var(--white);
    -webkit-box-shadow: none;
    box-shadow: none;
    z-index: 10;
    width: 100% !important;
	min-width: unset !important;
    border: 1px solid var(--grey);
}
.meniu-jos{
	grid-area: meniuJos;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.cautareformular form{
	display: flex;
    align-items: baseline;
}
.telefoane {
    justify-content: center;
    align-content: center;
    display: grid;
	grid-template-columns: 2fr 8fr;
	column-gap: 10px;
	z-index: 2;
}
.mailuri{
	justify-content: center;
	align-content: center;
	display: grid;
	grid-template-columns: 2fr 8fr;
	border-right: 1px solid #85a295;
	column-gap: 10px;
	z-index: 2;
}
.iconTelefon {
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #ffffff85;
}
.numereTelefon a{
	transition: text-decoration .3s ease;
	color: var(--white);
    display: inline-block;
	font-size: var(--s);
	margin-bottom: 5px;
}
.numereTelefon a:last-of-type{
	margin-bottom: 0px;
}
.numereTelefon a:hover{
	text-decoration: underline;
}
.numereTelefon:last-of-type{
	margin-bottom: 0px;
  align-content: center;
}
input[type="text"].cautaCuvant {
    width: 80%;
    margin-left: 10%;
    height: 35px;
    border-radius: 3px;
    padding: 10px;
    padding-bottom: 6px;
    padding-left: 15px;
    position: relative;
	transition: box-shadow .3s ease;
    color: var(--black);
    /* transform: skew(20deg); */
}
input[type="text"].cautaCuvant:focus{
	outline: none;
    box-shadow: 0px 0px 0px 2px var(--blue);
}
.cautaButon {
    margin-left: -36px;
    z-index: 2;
    position: relative;
    height: 35px;
    background-color: transparent;
    border: none;
    color: var(--blue);
    padding-top: 5px;
    font-size: 16px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    transition: color .3s ease;
    /* transform: skew(20deg); */
}
.cautaButon:focus{
	outline: none;
}
.cautaButon:hover{
	color: var(--darkblue);
}
.cautaButon i {
    font-size: var(--l);
}

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


.meniu-jos-stanga a {
    color: var(--white);
    font-weight: bold;
    margin-right: 15px;
    transition: color .3s ease;
    text-transform: uppercase;
    font-size: var(--m);
	letter-spacing: -0.3px;
}

.galbenC{
	color:var(--blue);
}
.griC{
	color:var(--grey);
}
.rightMeniu{
	display: flex;
	justify-content: space-between;
	width: 60px;
	align-items: center;
}
.rightMeniu a {
    font-size: var(--l);
    margin-right: 0px;
}
.meniu-jos a:hover{
	color: var(--blue);
}
.contactContainer{
    display: flex;
    gap: 15px;
}
.contactStanga {
    width: 50%;
}
.contactIcon{
    font-size: 30px;
}
.contactNumere{
    font-size: 15px;
    display: flex;
    flex-direction: column;
    font-weight: 700;
}

.searchIcon{
    display: none;
    color:var(--darkblue);
	transition: color .3s ease;
    font-size: 30px;
}
a.cosIcon{
	color:var(--darkblue);
	transition: color .3s ease;
	position: relative;
    font-size: 25px;
}
a.cosIcon:hover, .searchIcon:hover{
	color:var(--blue);
}
a.cerereOferta {
    background-color: var(--darkblue);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: bold;
    transition: all .3s ease;
    display: inline-block;
}
a.cerereOferta:hover{
	color: var(--white);
	background-color: var(--blue);
}
.mesajSus {
    overflow: hidden;
    font-size: var(--xl);
    color: #ffffff;
    padding: 10px;
	height:45px;
    margin: 0 auto;
	position: relative;
}
.mesajSus p{
 	height: 100%;
	 margin: 0;
	 position: absolute;
	 right:0;
	 text-align: center;
	 padding-left: 10px;
	 padding-right: 10px;
	 white-space: nowrap;
	 min-width: 100%;
	-moz-transform: translateX(0%);
	-webkit-transform: translateX(0%);
	 transform: translateX(0%);
	 -moz-animation: slideText 40s linear infinite;
    -webkit-animation: slideText 40s linear infinite;
    animation: slideText 40s linear infinite;
}

.bgMesajSus {
    background-color: var(--blue);
    background: linear-gradient(90deg, var(--darkblue) 0%, var(--blue) 25%, var(--blue) 75%, var(--darkblue) 100%);
}
.gradientBg{
	background: linear-gradient(90deg, rgba(186,29,34,1) 15%, rgba(106,83,57,1) 45%, rgba(70,99,63,1) 70%, rgba(0,131,74,1) 100%);
}
#main > .swiper {
    width: 100%;
    height: 800px;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(80%);

}

.swiper-slide .content-holder{
    position: absolute;
    color: white;
    left: 10%;
    top: 40%;
    max-width: 50%;
    max-height: 70%;
    overflow: hidden;
    z-index: 9;
}
.swiper-sliderArtsFirst .swiper-pagination{
    bottom: 0;
}
.meetHolder{
    display: flex;
    justify-content: flex-end;
    align-items: center; 
}
.content-holder ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
    padding-left: 20px;
}
.content-holder ul li{
  list-style-type: circle;  
}
.banner-bottom-left,
.banner-bottom-right{
    position: absolute;
    left: 0;
    bottom: 0;
    background: white;
    height: 10%;
    width: 100%;
}
.banner-bottom-right{
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.banner-bottom-left{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 0%);
    transform: rotate(180deg);
}
.banner-bottom-left.first{
    z-index: 2;
    height: 8%;
}
.banner-bottom-left:not(.first){
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 48% 0%);
    background: var(--blue);
    z-index: 1;
}
.banner-bottom-right.first{
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 52% 100%);
    z-index: 2;
    height: 8%;
}
.banner-bottom-right:not(.first){
    background: var(--blue);
    z-index: 1;
}


.cauitaInComenzi form input[type="text"] {
    margin-bottom: 0px;
    width: 300px;
    margin-right: 20px;
}
.cauitaInComenzi {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--grey);
    margin-bottom: 20px;
    margin-top: 15px;
}
.cauitaInComenzi form .SumoSelect {
    margin-top: 0px;
    width: 300px;
	margin-bottom: 0px;
    margin-right: 20px;
}
.cauitaInComenzi form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.SumoSelect{
	margin-left: 0px;
	width: 100%;
}
.marcaholder .SumoSelect{
	margin-top: 0px;
}
.textSelectAuto{
	font-size: var(--l);
	margin-bottom: 10px;
	color:var(--white);
}
.sageataSelect i {
    color: var(--grey-deschis);
    font-size: var(--s);
    transform: rotate(90deg);
}
.ui-widget{
	font-size: var(--m) !important;
}
.tractorSVG {
    width: 35px;
}
.tractorSelect {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 7px;
    background-color: var(--blue);
    border-bottom-right-radius: 3px;
}
#banner{
	position: relative;
}
.imgSVG {
    filter: invert(1);
    width: 30px;
}
.bannerImg {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding-right: 7px;
    padding-bottom: 7px;
    padding-left: 22px;
    padding-top: 18px;
    background-color: var(--blue);
    border-top-left-radius: 50px;
	display: none;
}
.SumoSelect > .CaptionCont{
	border-radius: 5px;
}
.titlu {
    font-size: var(--l);
    padding-bottom: 10px;
    margin-top: 35px;
    margin-bottom: 10px;
    position: relative;
	display: block;
	padding-left: 10px;
}
.titlu h1 {
	display: inline;
}
.saltla {
	padding: 20px;
	padding-bottom: 0px;
	font-size: 2em;
	margin-top: 45px;
}
.mergilaContainer {
	padding: 20px;
	line-height: 2.5em;
}
.mergilaContainer a {
	display: inline-block;
	color: var(--blue);
	text-decoration: underline;
	font-size: 2em;
	margin-right: 20px;
}
.producatoriContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
  padding: 15px;
}
.producatoriContainer > div {
	background: #f5f5f5;
}
.producatorContainer {
	display: grid;
	padding: 15px;
	grid-template-areas:
			"prodTitle prodImagine"
			"prodText prodText"
			"prodProduse prodCatalog";
	grid-template-columns: 1fr  1fr;
}
a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}
.prodTitle {
    grid-area: prodTitle;
		font-size: 1.3em;
	  text-transform: uppercase;
	  font-weight: bold;

}
.prodImagine {
    grid-area: prodImagine;
		text-align: right;
}
.prodImagine img {
	max-width: 80px;
}
.prodText {
    grid-area: prodText;
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: 1.4em;
  	line-height: 1.5em;
}
.prodProduse {
    grid-area: prodProduse;
}
.prodCatalog {
    grid-area: prodCatalog;
		text-align: right;
}
.prodProduse a, .prodCatalog a {
	background-color: #e6e6e7;
	display: inline-block;
	padding: 11px;
	padding-left: 25px;
	padding-right: 25px;
	color: #2b4d5e;
	font-size: 1.1em;
}
/* .titluArticole {
    font-size: var(--xl);
    border-bottom: 2px solid var(--blue);
    padding-bottom: 10px;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgba(165,23,29,1) 15%, rgba(219,32,38,1) 75%);
} */
.titluBoxAlb {
    font-size: var(--l);
    font-weight: 600;
}
.titluMicRosu {
    font-size: var(--l);
    padding-bottom: 7px;
    margin-top: 50px;
    margin-bottom: 10px;
    font-weight: 600;
	margin-left: 10px;
}
.textSusArticole {
    margin-top: 20px;
    font-size: var(--m) !important;
}
.marginbottom20{
	margin-bottom: 20px;
}
.ctnProcesarePLata{
	font-size: 30px;
    margin-top: 100px;
    text-align: center;
    font-weight: 500;
}
.boxInformatie{
    padding: 20px 0;
    text-align: center;
    border: solid var(--lightgrey) 1px;  
}
.footerHolder {
    margin-top: 50px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 45px;
}
.articolegrid {
    display: grid;
    grid-template-columns: repeat(6, calc(17% - 13px));
    grid-gap: 10px;
}

.articol {
    border: 1px solid var(--grey);
    border-radius: 3px;
    position: relative;
    background-color: var(--white);
    transition: all .3s ease-out;
    display: grid;
    grid-template-columns: 1fr 3fr 160px;
    grid-template-areas:
        "imgArt titluArt pretArt"
        "imgArt titluArt pretArt"
        "imgArt prodArt stocArt"
        "imgArt critArt buyArt"
        "imgArt codArt buyArt";
    margin-bottom: 10px;
    padding: 10px 15px;
    column-gap: 10px;
}
.articolegrid .articol, .articoleslider .articol {
    padding: 10px;
    padding-bottom: 15px;
    padding-top: 5px;
    grid-template-columns: 1fr;
    grid-template-areas:
        "imgArt"
        "titluArt"
        "prodArt"
        "critArt"
        "codArt"
        "pretArt" 
        "buyArt";
    height: 100%;
    grid-template-rows: auto;
    gap: 5px;
}
.wrapArticolSlider{
	padding: 0px 5px;
	margin-top: 3px;
}
.bx-wrapper {
	margin-bottom: 40px;
}
.noPd{
	padding: 0px;
}
/* .articoleslider .articol {
	height: 380px;
} */
.gridCat{
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-gap: 10px;
    /* background: var(--blue); */
    padding: 10px;
    box-sizing: border-box;
    margin-top: 15px;
}
.articoleFirst .bx-wrapper, .wrapSliderCat .bx-wrapper{
	background: none;
	border: none;
	box-shadow: none;
}
.articoleFirst .bx-prev, .wrapSliderCat .bx-prev{
	left: -42px;
}
.articoleFirst .bx-next, .wrapSliderCat .bx-next{
	right: -42px;
}
.promoArticol {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: var(--red);
    color: var(--white);
    padding: 5px;
    border-radius: 0 0 3px 3px;
    font-weight: 700;
    z-index: 1;
    top: 0;
    right: 5px;
}

.promoArticolMare {
    background-color: var(--blue);
    color: var(--white);
    padding: 5px;
    position: absolute;
    -webkit-transform: rotate(45deg);
    right: -37px;
    width: 171px;
    overflow: hidden;
    top: 33px;
    text-align: center;
    font-size: 23px;
    font-weight: 700;
}
.articolAdaugaInCos {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.articolImg {
    grid-area: imgArt;
    min-width: 132px;
    width: 100%;
    display: flex;
    background-color: var(--white);
    justify-content: center;
    align-content: center;
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    align-items: center;
}
.articolegrid .articolImg {

}
.tabss > div {
    padding: 15px;
    padding-top: 0px;
}
.articolImg img {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
}

.articolegrid .articolImg img, 
.swiper-sliderArtsFirst .articolImg img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}
.articolTitle {
    grid-area: titluArt;
    font-size: var(--m);
    color: var(--black);
    width: 100%;
    margin: 2px auto;
    overflow: hidden;
    font-weight: bold;
}
.articolegrid .articolTitle {
    text-align: center;
}
.articolCrit {
    grid-area: critArt;
    display: block;
    margin: 0px;
    line-height: 1.1;
    width: 100%;
    overflow: hidden;
    height: 25px;
    margin-bottom: 2px;
}
.critInline{
	display: inline-block;
}
.articolProd {
    grid-area: prodArt;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20px;
    grid-gap: 5px;
    align-items: center;
    width: 100%;
    height: 20px;
    margin: 0 auto;
}
.articolProd img {
	display: block;
    max-width: 80px;
    max-height: 20px;
	width: auto;
	height: auto;
}
.label-promo {
    min-width: auto;
    color: #fff;
    white-space: nowrap;
    letter-spacing: -5px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    padding-right: 6px;
    height: 100%;
    z-index: 10;
    display: grid;
    place-items: center;
    font: 700 36px/42px Roboto Condensed;
    padding-bottom: 16px;
}
.label-promo:before {
    content: "-";
    position: absolute;
    left: -6px;
    right: auto;
    top: 5px;
    bottom: auto;
    font-size: 30px;
    font-weight: 300;
    background: none;
    width: max-content;
    height: max-content;
    padding: 0;
    line-height: 1;
    margin: 0;
    clip-path: none;
    color: #fff;
    z-index: 999;
    min-width: 12px;
}
.label-promo:after {
    content: "%";
    font-size: 15px;
    position: absolute;
    right: -6px;
    top: 8px;
    bottom: auto;
    left: auto;
    background: none;
    width: auto;
    height: auto;
    line-height: 1;
    margin: 0;
    clip-path: none;
    color: #fff;
    z-index: 999;
    font-weight: 300;
    min-width: 20px;
}
.pretFrumos.pretVechi > .pretFrumos1{
    font-size: var(--m) !important;
}
.pretFrumos.pretVechi > sup{
    font-size: var(--xs) !important;
}
.pretFrumos.pretVechi > .pretLei{
    font-size: var(--m) !important;
}
.pretFrumos span.pretLei {
    font-size: var(--m);
    margin-top: 6px;
}
.pretFrumos span.pretProcent {
    font-size: var(--s) !important;
    text-decoration: none !important;
}
.articolPretMare .pretFrumos sup{
    font-size: var(--l);
}
.articolPretMare .pretFrumos span.pretLei {
    font-size: var(--l);
    margin-top: 5px;
}
.pretFinalArticol .pretVechi {
    margin-bottom: 10px;
}
.pretFinalArticol .pretFrumos {
    justify-content: start;
}
.pretFinalArticol .pretFrumos1 {
    font-size: 30px !important;
}
.pretFinalArticol .pretFrumos2 {
    font-size: 23px !important;
}
.pretFinalArticol .pretLei {
    font-size: 25px !important;
}
.articolProducator {
    display: grid;
    justify-content: left;
    align-items: center;
    height: 100%;
}
.articolCod {
    grid-area: codArt;
    text-align: left;
    display: flex;
    align-items: flex-end;
    height: 26px;
}
.articolegrid .articolCod {
    margin-bottom: 5px;
}
.articolegrid .articolCumpara{
    width: 100%;
}
.articolegrid .qtyctrl{
    margin: 15px auto;
}
.articolegrid .cumparaarticole{
    margin: 0 auto;
}
.articolCod span {
    font-size: var(--m);
}
.articolStars {
   font-size: 23px;
}

.stocProgress {
	vertical-align: unset;
	-webkit-writing-mode: unset;
    -webkit-appearance: none;
    appearance: none;
    width: 90%;
    margin: 0 auto;
    height: 15px;
    display: block;
	border-radius: 15px;
    overflow: hidden;
	border: none;
}
.stocProgress::-webkit-progress-bar{
	  background-color: var(--grey);
}
.stocProgress::-moz-progress-bar{
	  background-color: var(--grey);
}
.articolegrid .stocWrap {
	margin-bottom: 10px;
}
.articolStoc{
    grid-area: stocArt;
    width: 100%;
    border-left: 1px solid var(--grey);
    margin-left: 20px;
    display: flex;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}
.articolegrid .articolStoc{
	border-left: 0px;
    margin-left: 0px;
}
.stocWrap {
    display: flex;
    justify-content: center;
}
.stocText {
	display: block;
	font-size: var(--xs);
	width: auto;
	padding-top: 1px;
}

.bb0{
    border-bottom: 0px;
    margin-bottom: -1px;
}
progress[value="100"].stocProgress::-webkit-progress-value{
	background-color: var(--blue);
}
progress[value="100"].stocProgress::-moz-progress-bar{
	background-color: var(--blue);
}
progress[value="80"].stocProgress::-webkit-progress-value{
	background-color: var(--blue);
}
progress[value="80"].stocProgress::-moz-progress-bar{
	background-color: var(--blue);
}
progress[value="50"].stocProgress::-webkit-progress-value{
	background-color: var(--darkblue);
}
progress[value="50"].stocProgress::-moz-progress-bar{
	background-color: var(--darkblue);
}
.articolPret {
    grid-area: pretArt;
    display: block;
    width: 100%;
    /* margin: 0px auto; */
    padding-bottom: 5px;
    /* margin-left: 20px; */
}
.articolInfo {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.pretArticol {
    font-size: 24px;
    color: #c70d1c;
    font-weight: 600;
}
.articolInfoLabel {
    font-size: var(--m);
    font-weight: 600;
}
.listaBeneficii{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.listaBeneficii a {
    color: var(--darkblack);
    display: block;
    width: 100%;
    border: solid var(--grey) 1px;
    text-align: center;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cumparaholderbuton {
    display: flex;
    flex-direction: row;
    width: 320px;
    align-items: baseline;
    margin-top: 25px;
    gap: 20px;
  }
  .qtyctrl {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 20px 0px 10px 0px;
    align-items: center;
  }
  .articolunic .qtyctrl {
    margin: 0px;
  }
  .qtyminus, .qtyplus {
    font-size: 13px;
    padding: 6px 9px;
    background: #ccc;
    color: var(--alb);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all .3s;
    justify-content: center;
  }
  .qtyminus:hover, .qtyplus:hover{
      background: var(--darkgrey);
  }
  .qtyminus {
    border-right: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .qtyminus, .qtyplus {
    padding: 9px;
  }
  .qtyinput {
    display: inline-flex;
  }
  .qtyinput input[type="text"] {
      border-radius:0;
      text-align: center;
      padding: 6px 6px 5px;
  }
  .qtyplus {
    border-left: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

.articolegrid .articolPret, .articoleslider .articolPret{
	border-left: 0px;
    margin-left: 0px;
}
.articolPret {
    margin-top: 20px;
}
.pretFinal span {
    font-size: var(--l);
    font-weight: bold;
    color: var(--darkblue);
}

.pretOferta {
    display: block;
    font-size: var(--s);
    padding-top: 3px;
    text-align: center;
    margin-bottom: 2px;
    font-weight: bold;
}
.textTaiat{
	text-decoration: line-through;
}
.textGri{
	color: var(--grey);
}
.ecotaxaPret{
	margin-top: 5px;
	font-weight: 600;
}
.articolPret .ecotaxaPret{
	text-align: center;
}
.textVerde{
	color: var(--blue);
}
.textRosu{
	color: red;
}
.cuTva {
	text-align: center;
}
.articolPret.redus .pretFrumos:last-child,
.articolPret.redus .pretFrumos:last-child span,
.pretFinalArticol.redus .pretFrumos:last-child,
.pretFinalArticol.redus .pretFrumos:last-child span{
    color: var(--red) !important;
}
.pretFrumos{
    display: flex;
    justify-content: center;
    font-size: var(--l);
    color: var(--darkblue);
    font-weight: bold;

}
.pretFrumos sup {
    font-size: var(--m);
    margin-right: 3px;
}
.pretVechi span, .pretVechi span.pretLei {
	text-decoration: line-through !important;
	color: var(--darkgrey);
}
.pretVechi sup {
	text-decoration: line-through !important;
	color: var(--darkgrey);
}
.pretFinal {
    display: block;
    text-align: center;
}
.pretFinalArticol {
    text-align: left;
} 
.articolegrid .pretOferta{
	padding-top: 0px;
}
.articolegrid .articolCumpara, .articoleslider .articolCumpara {
	border-left: 0px;
	margin-left: 0px;
}
.articolCumpara {
    grid-area: buyArt;
    /* display: flex;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column; */
}
.cumparaarticole {
    background-color: var(--white);
    color: var(--blue);
    padding: 10px;
    border-radius: 3px;
    font-weight: bold;
    font-size: var(--m);
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-left: 45px;
    width: 150px;
    background: linear-gradient(to right, var(--blue) 50%, var(--white) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position .3s ease-out;
    cursor: pointer;
    border: 1px solid var(--blue);
}
.cumparaarticole i {
	color: var(--white);
}
.articol:hover{
	box-shadow: 0 0 5px 0px var(--grey);
}
.articol .holderImagineAdd img{
    max-height: 70%;
}
.articol .cumparaarticole{
    width: 100%;
    margin: 0 auto;
}
.articoleholder .qtyctrl{
    margin: 15px auto; 
}
/* .cumparaarticole:hover, .articolDreaptaMare:hover .cumparaarticole{
    background-position: left bottom;
    color:var(--white);
} */
.cumparaarticole .holderImagineAdd {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    /* background-color: var(--blue); */
    background: var(--gradientBlue);
    height: 100%;
    width: 25%;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: var(--m);
}
.cumparaarticole.articolFav .holderImagineAdd{
    background-color: var(--white);
    border-right: solid var(--blue) 1px;
}
.articol .articolFav {
    position: absolute;
    left: 15px;
    top: 15px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 3px;
    cursor: pointer;
    background: var(--white);
    z-index: 1;
}
.verdefav i {
	font-weight: bold;
}
.articolFav {
    transition: .3s ease;
    cursor: pointer;
    /* width: 40px; */
    padding: 10px;
    border-radius: 50%;
}
.articolFav i{
    color: var(--red);
    font-size: var(--ml);
    transition: .3s ease;
}
.articolFav:hover i{
    font-weight: bold;
}
.qtyctrl {
    margin: unset;
    display: grid;
    grid-template-columns: 2fr 3fr 2fr;
    width: 150px;
    margin-bottom: 15px;
    padding-top: 2px;

}
.qtyminus {
    transition: all .3s ease;
    background-color: var(--blue);
    width: 100%;
    height: 100%;
    display: grid;
    color: var(--white);
    align-content: center;
    justify-content: center;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    font-size: var(--xs);
    cursor: pointer;
}
.qtyplus:hover{
	background-color: var(--blue);
}
.qtyinput{
	height: 100%;
}
.qtyplus {
	cursor: pointer;
    background-color: var(--blue);
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
    color: var(--white);
    justify-content: center;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    font-size: var(--xs);
    transition: all .3s ease;
}
.qtyminus:hover{
	background-color: var(--blue);
}
.gridCategorii {
    display: grid;
    grid-gap: 10px;
    place-content: center;
    grid-template-columns: repeat(8, calc(13% - 15px));
}
.categorie {
    background-color: var(--white);
    overflow: hidden;
    transition: all .3s ease;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}
.categorieImagine {
    height: 120px;
    border: 1px solid var(--grey);
    border-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.right .gridCategorii {
    grid-template-columns: repeat(6, calc(17% - 12px));
}
.titleCategorie {
    height: 50px;
    color: var(--black);
    background-color: var(--white);
    place-content: center;
    text-align: center;
    display: grid;
    font-size: var(--m);
    transition: all .3s ease;
    font-weight: 600;
    padding: 3px;
    border: 1px solid var(--grey);
}
.categorie:hover{
	box-shadow: 0 0 5px 0px var(--grey);
}
.categorie:hover .categorieImagine img{
	filter:grayscale(0);
	opacity: 1;
}
.categorie:hover .titleCategorie{
	border-color: var(--blue);
	background-color: var(--blue);
	color: var(--white);
}

#footer {
    min-height: 300px;
    background-image: -webkit-linear-gradient(left, rgba(50, 50, 50, 0.5) 0%, rgb(50, 50, 50) 30%), url('/public/images/roof.jpg');
    background-size: auto 200%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#footer .footer-middle {
    color: white;
    z-index: 2;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.footerelement{
    line-height: 1.5;
    color: var(--white);
}
.footerImgContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.footerelement a{
	color: var(--white);
}
.tFooter{
	font-size: var(--l);
    margin-bottom: 10px;
    color: var(--white);
}
.comunicare {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
}
.comunicare-holder{
    width: 50%;
    min-width: 640px;
    margin-right: 0;
    color: var(--white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 20px;
}
.comunicare-left{
    display: flex;
    column-gap: 10px;
    font-size: 15px;
}
.holder-socializari a::before {
    right: calc(100% - 1px);
    -webkit-clip-path: polygon(calc(100% - 2px) 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(calc(100% - 2px) 0, 100% 0, 100% 100%, 0 100%);
}
.holder-socializari a::after {
    left: calc(100% - 1px);
    -webkit-clip-path: polygon(0 0, 100% 0, 0 calc(100% + 2px), 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 calc(100% + 2px), 0 100%);
}
.holder-socializari a::before, .holder-socializari a::after {
    content: "";
    z-index: 0;
    position: absolute;
    top: 0;
    height: 100%;
    aspect-ratio: 2 / 5;
    transition: all ease-out .4s;
    background-color: var(--blue);
}
.holder-socializari a{
    background-color: var(--blue);
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.holder-socializari{
    font-size: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
.swiper-parteneri img{
    height: 100%;
    width: auto;
    max-width: 100%;
}
#parteneri{
	display: none;
}
#barafooter{
    color: var(--white);
    border-top: solid var(--white) 1px;
    padding: 15px 0;
}
#barafooter .container{
}
#barafooterright{
	text-align: right;
}
.comunicare-left .fa-comments {
    font-size: 40px;
}
.footerImgContainer img{
    height: 140px;
}
.articole{
    display: grid;
    grid-template-columns: 1fr 3fr;
}
.articole .bottom,
.noBorder .bottom {
    border: none;
}
.noBorder .categorieImagine {
    height: 400px;
}
#left .divAlb {
    background: var(--grey);;
    padding: 10px;
}
.filtreleft.left{
    margin-top: 10px;
}
.overlayMesaj {
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 99999999999;
    background-color: rgba(0, 0, 0, 0.44);
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
}
#mesaj .linkuri{
    grid-template-columns: repeat(2,1fr);
}
#mesaj {
    display: none;
    background-color: var(--white);
    width: 500px;
    border: 1px solid var(--grey);
    border-radius: 3px;
}
#mesajinner {
    min-height: 150px;
    display: grid;
    justify-content: center;
    align-content: center;
    font-size: var(--m);
    padding: 20px;
    position: relative;
}
#mesajClose{
    position: absolute;
    right: 12px;
    top: 8px;
    color: var(--darkblue);
    cursor: pointer;
    transition: all .3s ease;
}
#mesajClose:hover{
	color: var(--blue);
}
#mesajText{
	text-align: center;
	min-width: 300px;
}
#mesajText .linkuri{
    margin-top: 10px;
}
#editfrom {
    display: none;
    background-color: var(--white);
    min-width: 1000px;
    max-width: 90vw;
    border: 1px solid var(--grey);
    border-radius: 3px;
    max-height: 90vh;
    overflow-x: auto;
}
#editfrominner {
    min-height: 150px;
    display: grid;
    justify-content: center;
    align-content: center;
    padding: 20px;
    padding-top: 30px;
    position: relative;
}
#editfromClose{
    position: absolute;
    right: 12px;
    top: 8px;
	color: var(--darkblue);
	cursor: pointer;
	transition: all .3s ease;
}
#editfromClose:hover{
	color: var(--blue);
}
#editfrominner .titlu {
    margin-bottom: 20px;
    margin-top: 10px;
}
#editfrominner .subtitlu {
    margin-bottom: 30px;
}
#editfrominner input[type="text"], #editfrominner input[type="password"]{
	width: 100%;
	margin-bottom: 10px;
}
#editfrominner textarea {
    width: 100%;
    height: 150px;
	margin-bottom: 20px;
}
#editfrominner label{
	margin-left: 5px;
}
#editfrominner input[type="submit"] {
    border: none;
    color: var(--white);
    padding: 5px 10px;
    font-size: var(--s);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.2px;
}
input.error, textarea.error, select.error{
	border-color: var(--darkblue) !important;
}
input.error:focus, textarea.error:focus{
	border-color: var(--darkblue) !important;
    box-shadow: 0 0 1px 1px var(--darkblue) !important;
}
label.error{
	color: var(--blue);
}
.nav_link {
    display: block;
    margin-top: 20px;
    color: var(--blue);
    font-size: 15px;
    margin-bottom: -20px;
}
.navLink-holder{
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--m);
        
}
.navLink-holder .fa {
    color: var(--darkgrey);
    font-size: 13px;
    padding: 0 5px;
}
.nav_link a{
	color: var(--darkgrey);
    line-height: 1.4;
    font-size: var(--s);
    white-space: nowrap;
}
.nav_link a:last-child{
	color: var(--darkblack);
}

.nav_link .container {
    margin-bottom: 20px;
    border-radius: 3px;
    overflow: hidden;
}
.leftwhite{
	display: none;
}
.centru {
    /* display: grid;
    grid-template-areas:
        "artSus artSus"
        "artLeft artRight";
    grid-template-columns: 20% 80%; */
    margin-top: 45px;
}
.articoleTitluSus {
    grid-area: artSus;
    background-color: var(--white);
    /* border: 1px solid var(--grey); */
    border-bottom: 0px;
    padding: 10px;
    border-radius: 3px;
}
.left{
	grid-area: artLeft;
}
.right {
    grid-area: artRight;
}
.centru .right{
	/* margin-left: 10px;
	margin-right: 10px; */
        padding: 10px;
}
.paginareholder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    height: 40px;
}
.ordonare {
    display: flex;
    align-items: center;
	justify-content: flex-start;
}
.ordonare select:first-child {
	margin-right: 10px;
}
.paginare {
    display: flex;
    align-items: center;
	justify-content: flex-end;
    gap: 5px;
}
.paginare a {
    transition: .3s;
    color: var(--darkblack);
    border: 1px solid var(--grey);
    height: 30px;
    min-width: 30px;
    border-radius: 3px;
    justify-content: center;
    align-content: center;
    display: grid;
	text-align: center;
    padding: 5px;    
    font-size: var(--ml);
}
.paginare a.last, .paginare a.first{
	margin: 0px;
}
.paginare a:hover{
	border-color: var(--darkblack);
}
.paginare select{
    height: 30px;
    width: 60px !important;
    line-height: 1;
    text-align: center;
}
.right .articolegrid {
    grid-template-columns: repeat(4, calc(25% - 8px));
}
.articoleholder{
	margin-bottom: 20px;
}
.logoJos {
    margin-top: 20px;
}
.logoJos > .container {
    grid-template-rows: 50px;
    justify-content: space-between;
}
.euplatesc{
    display: grid;
}
.euplatesc img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 15px;
    background-color: var(--white);
    padding: 10px;
}
.logoalb{
    display: grid;
}
.logoalb img {
    max-width: 100%;
    max-height: 100%;
}
.istoricMasini{
	z-index: 1;
    position: relative;
	display: none;
}
.istorictitle {
    background-color: var(--grey-deschis);
    padding: 10px;
    margin-bottom: -2px;
    border-radius: 3px;
    border: 1px solid var(--grey);
    text-align: left;
    font-size: var(--m);
    font-weight: 600;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 0;
    position: relative;
}
.istorictitle i {
    font-size: var(--s);
    padding: 2px;
    color: var(--darkblue);
    border-radius: 15px;
    position: absolute;
    right: 15px;
}
.istorictitle:hover{
	color: var(--darkblue);
}
.flip{
	transform: rotate(-180deg);
}
.afisareHolder {
    display: grid;
    text-align: center;
    width: 80px;
    grid-template-columns: 1fr 1fr;
    background-color: var(--grey);
    border-radius: 3px;
    margin: 0 auto;
	overflow: hidden;
}
.afisareHolder a {
    padding: 7px;
    font-size: 16px;
    color: var(--white);
    background-size: 200% 100%;
    transition: all .3s ease-out;
}
.afisareLine {
	background: linear-gradient(to right, #ffffff00 50%, var(--blue) 50%);
	background-position: left bottom;
}
.afisareGrid {
	background: linear-gradient(to right, var(--blue) 50%, #ffffff00 50%);
	background-position: right bottom;
}
.afisareLine.active{
	background-position: right bottom;
}
.afisareGrid.active{
	background-position: left bottom;
}
#cereformular{
	background-color: var(--white);
	border: 1px solid var(--grey);
	padding: 15px;
	border-radius: 3px;
}
.formularfull {
    margin-bottom: 10px;
    background-color: var(--white);
    padding: 20px;
	position: relative;
}
.formularfull .steps {
	width: 30px;
    height: 30px;
    background-color: #404040;
    color: #e4f1f9;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: 700;
    font-size: 16px;
    margin-right: 10px;
    display: inline-block;
    margin-left: 15px;
}
.bigButtonsHolder {
	display: grid;
  grid-template-columns: 1fr 1fr;
}
.mesaj-eroare, .atentieCos {
	color:var(--red);
	text-align: right;
	padding: 5px;
    font-size: var(--s);
}

.bigButtons {
	border: solid 1px aliceblue;
	padding: 10px;
	font-size: 1.5em;
  color: #1763aa;
  text-align: center;
}


.formularfull #sig-canvas {
	border: solid 2px #bfbfbf;
}

.livrareHolder label {
	display: block;
}


/* .modificaInCos, .adaugaInCos, .modificaFactInCos, .adaugaFactInCos {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 0.8em;
    border-radius: 5px;
}
.adaugaFactInCos{
    font-size: 15px;
} */
.adaugaInCos{
    width: 100%;
    height: 30px;
    background: var(--blue);
    color: var(--white);
    text-align: center;
    font-size: 18px;
    padding-top: 4px;
}

.cosAdaugaModifica {
    background: var(--blue);
    color: var(--white);
    text-align: center;
    font-size: 14px;
    padding: 4px;
    border-radius: 16px;
}

.formularfull h1{
	font-size: var(--l);
}
.formularfull input[type="text"], .formularfull input[type="password"], .formularfull select, .formularfull .input{
	width: 100%;
	border-radius: 5px;
}
.formularfull #fileSemnatura {
	display: none;
}
.formularfull textarea {
    width: 100%;
    height: 150px;
}
.formularfull label{
	margin-left: 5px;
    font-size: var(--m);
}
.actiuneclass {
    padding-top: 10px;
}
.formularfull .actiuneclass{
	margin-bottom: 20px;
}
.formularfull .cereresuplimentar .jqEasyCounterMsg:first-of-type{
	display: none !important;
}
.explicatiiCalitate{
	margin-bottom: 10px;
}
label{
	margin-bottom: 5px;
	display: inline-block;
}
input[type="text"],  input[type="password"], .input{
    display: inline-block;
    font-size: var(--m);
    font-weight: 500;
    color: var(--black);
    line-height: 2;
    padding: 5px 12px;
    padding-right: 25px;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--grey);
    border-radius: 5px;
    background-color: var(--white);
}
input[type="text"]:focus,  input[type="password"]:focus {
    border-color: var(--darkblack);
    outline: none;
}
textarea{
	display: block;
	font-size: var(--s);
	font-weight: 500;
	color: var(--black);
	line-height: 1.3;
	padding: 5px 12px;
	padding-right: 25px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid var(--grey);
	border-radius: 0px;
	background-color: var(--white);
}
textarea:focus {
    /* border-color: var(--grey);
    box-shadow: 0 0 1px 1px var(--darkblack);
    box-shadow: 0 0 0 1px -moz-mac-focusring;
    outline: none; */
    border: solid var(--darkblack) 1px;
}
.stergeFiltre {
    text-align: center;
    margin-top: 10px;
}
.stergeFiltre a{
    background-color: var(--darkblue);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 15px;
    display: inline-block;
    transition: .3s ease;
}
.stergeFiltre a:hover{
	background-color: var(--blue);
}
.articolMareAfisareSus {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
	padding-top: 5px;
}
.articolMareAfisareSus .promoArticol{
    width: 70px;
    height: 70px;
}
.articolMareAfisareSus .label-promo{
    font: 700 44px / 54px Roboto Condensed;
}
.articolMareAfisareSus .label-promo::after{
    font-size: 20px;
    right: -4px;
}
.articolMareAfisareSus .label-promo::before{
    left: -4px;
    top: 3px;
    font-size: 45px;
}
.articolImagineMare {
    position: relative;
    display: grid;
}
.gridMultiImage{
    grid-template-columns: 1fr 3fr;
}
.gridSigleImage{
   grid-template-columns: 1fr;
}
.articolImagineMare img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}
.centruMareArticol .articolFav{
    border-radius: 3px;
}
.imaginesmallcontainer .articolImgMare {
    width: 90px;
    border: 1px solid var(--grey);
    border-radius: 3px;
    margin: 5px;
}
.imaginesmallcontainer .articolImgMare img {
    max-height: 90px;
    max-width: 90px;
}
.imaginesmallcontainer {
    display: flex;
    flex-direction: column
}
.articolDreaptaMare {
    border: 1px solid var(--grey-deschis);
    border-radius: 5px;
    padding: 15px 10px;
    width: 205px;
    position: relative;
		background-color: #007b3b05;
    box-shadow: -5px 5px 10px 0px var(--grey);
		margin-bottom: 10px;
}
.articolDreaptaMare .articolStars{
    top: 13px;
    right: 10px;
}
.articolCumparaMare {
    display: flex;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}
.articolPretMare {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 15px;
}
.articolPretMare .pretFinal span {
		font-size: var(--xl);
}
.articolPretMare .pretOferta{
	margin-bottom: 5px;
}
.articolStocMare {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.articolStocMare .stocProgress {
	width: 100%;
}
.articolStocMare .stocText {
    width: 100%;
    text-align: left;
}
.titluMic{
	  color: var(--darkblue);
	  font-size: var(--m);
	  font-weight: 600;
}
.titluProducator{
    color: var(--darkblue);
    font-size: 25px;
    font-weight: 600;
    font-size: 20px;
}
.articolProdMare {
    line-height: 1.5;
    margin-bottom: 15px;
}
.articolShareMare a {
    color: var(--negru);
    transition: .3s ease;
    display: inline-block;
    margin-left: 3px;
}
.articolShareMare a:hover{
	color: var(--darkblue);
}

.articolDiv {
    background-color: var(--white);
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
    margin: 45px 0px;
	margin-bottom: 30px;
	padding:15px;
    position: relative;
    overflow: hidden;
}
.articolDiv .titlu{
	margin-top: 5px;
	position: relative;
    padding: 0;
    font-size: var(--xl);
    font-weight: 600;
    padding-right: 80px;
}
.articolDiv .titlu .articoledit{
    right: 0;
    top: 0;
    left: unset;
    border-radius: 0px;
}
.articolImgMare {
    width: 100%;
    display: grid;
    background-color: var(--white);
    justify-content: stretch;
    align-content: center;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
}
.articolImgMare img {
    display: block;
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    align-self: center;
    justify-self: left;
}
.staticContainer {
    padding: 20px 25px;
    font-size: var(--m);
    color: var(--darkblack);
    line-height: 1.6;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    margin: 20px 0;
}
.staticContainer strong{
    font-weight: 700;
    color: var(--darkblue);
}
.container.bgwhite{
    padding: 5px;
}
.tabss{
	box-shadow: none !important;
	background-color: var(--white);
	border: 0px solid var(--grey);
}
.tabss .titluMic{
	margin-bottom: 5px;
}
#detaliiarticol > ul {
	background-color: var(--white);
    margin-bottom: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid var(--blue);
    font-size: 20px;
    margin-top: 17px;
}
.tabss > ul li.active {
    background: var(--white);
    border: 1px solid var(--blue);
    border-bottom: 1px solid var(--white);
}
.tabss > ul li a {
    text-decoration: none;
    color: var(--blue);
    font-weight: bold;
    font-size: var(--m);
}
.tabss > ul li {
    list-style: none;
    display: inline-block;
    padding: 6px;
    line-height: 12px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-left: 10px;
}
#desc, #crit, #echi {
    padding-bottom: 25px;
}
.crit p {
    font-size: 15px;
    margin-top: 10px;
}

.tabArticolTitlu {
    font-weight: 700;
    font-size: 23px;
}
.crit {
    font-size: 22px;
}
.crit table {
    width: 100%;
    font-size: var(--m);
}
.crit table td, #echi table td {
    padding: 11px;
    min-width: 100px;
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
}
#desc table td {
	  padding: 3px;
}
.crit tbody tr:hover, #echi tbody tr:hover{
	background-color: var(--grey);
}
#desc > *:not(.titluMic), .desc > *:not(.titluMic){
	line-height: normal;
}
#echi table{
	margin-bottom: 15px;
}
#parereaTa{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-shadow: 0px -1px 1px 0px var(--grey);
	margin-top:18px;
	padding-top:15px;
}
.parereleft{
	width: 48%;
}
.opinieRaspune{
	text-align: right;
}
.isReplyParere {
	margin-left: 20px;
}
#parereaTa label{
	margin-left: 5px;
}
#parereaTa input[type="text"]{
	width: 100%;
	margin-bottom: 10px;
}
#parereaTa textarea {
    width: 100%;
    height: 131px;
}
.parereright{
	width: 48%;
}
.parerejos {
    width: 100%;
    padding-bottom: 20px;
    padding-top: 10px;
}
#parereaTa input[type="submit"] {
    background-color: var(--blue);
    border: none;
    color: var(--white);
    padding: 5px 10px;
    font-size: var(--s);
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.2px;
}
#produsesimilare {
    margin-top: 27px;
}
#produsesimilare .titluBoxAlb{
    margin-bottom: 20px;
}
.tipholder{
	width: 100%;
	margin-bottom: 20px;
}
.tabelComenzi {
    font-size: var(--m);
}
.tipholder thead tr {
    background-color: var(--blue);
    color: var(--white);
}
.tipholder tbody tr:hover{
	background-color: var(--lightgrey);
}
.tipholder thead th{
	font-weight: bold;
}
.tipholder tbody td{
	cursor: pointer;
}
.tipholder td, .tipholder th {
	text-align: left;
    padding: 5px;
    border-bottom: 1px solid var(--grey);
    border-top: 1px solid var(--grey);
}
.fancybox-container{
	z-index: 999990;
}
.formularautentificare{
    background-color: var(--white);
    border: 1px solid var(--grey);
    border-radius: 3px;
	margin-top: 50px;
}
.divFormCentru {
    width: 70%;
    min-width: 300px;
    padding: 50px 0px;
	margin: 0 auto;
}
.formularcontnou .divFormCentru{
	padding: 40px 0px;
}
.divFormCentru input[type="text"], .divFormCentru input[type="password"]{
	width: 100%;
	margin-bottom: 10px;
}
.divFormCentru label {
    margin-left: 5px;
}
.divFormCentru input[type="submit"] {
    background-color: var(--blue);
    border: none;
    color: var(--white);
    padding: 5px 10px;
    font-size: var(--s);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.pd0{
	padding: 0px;
}
.criteriiMare {
    max-width: 300px;
}
.criteriiMare table{
	width: 100%;
}
.centruMareArticol .titluMic {
    margin-bottom: 5px;
}
.centruMareArticol .codArticol{
    color: var(--darkgrey);
    font-size: var(--m);
}
.centruMareArticol .cumparaarticole{
    width: 250px;
    padding: 12px 10px 12px 60px;
}
.centruMareArticol .cumparaarticole i{
    font-size: var(--xl)
}
.dungaAlba{
    background-color: var(--white);
    padding-top: 50px;
    padding-bottom: 100px;
}
.linkuri {
    width: 100%;
    border-top: 1px solid var(--grey);
    padding-top: 20px;
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: 124px 1fr 124px;
    font-size: var(--m);
}
.linkuri a, .boxNewAccount a {
    color: var(--black);
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: color .3s ease;
    font-size: var(--s);
}
.wrapCheckbox, .selectincos {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    font-size: 17px;
}
.wrapCheckbox label, .selectincos label{
	margin-bottom: 0px;
}
#adresanew label{
	margin-bottom:5px;
}
.estiautentificat {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    font-size: var(--m);
}
.formularfull .SumoSelect{
	margin-bottom: 10px;
}
.estiautentificat a {
    color: var(--darkblue);
    font-weight: 600;
    margin-right: 25px;
    letter-spacing: 0.2px;
    transition: color .3s ease;
}
.estiautentificat a:hover {
    color: var(--blue);
}
#cookies {
    position: fixed;
    bottom: 0px;
    z-index: 1000;
    font-size: var(--m);
    background-color: var(--blue);
    width: 100%;
    padding: 15px 10px;
    text-align: center;
    color: var(--white);
}
.cookieSus a{
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
    transition: all .3s ease;
}
.cookieSus a:hover{
	color: var(--white);
}
.wrapCookie {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.cookieImg {
    filter: invert(1);
    height: 50px;
}
#cookies a.agree {
    display: inline-block;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 6px 10px;
    border-radius: 5px;
    margin-left: 20px;
	cursor: pointer;
	transition: all .3s ease;
}
#cookies a.agree:hover{
	background-color: var(--blue);
	color: var(--blue);
}
.articoledit{
    position: absolute;
    left: 0px;
    top: 22px;
    z-index: 10;
    background-color: var(--blue);
    color: var(--white);
    padding: 3px 7px;
    display: flex;
    align-items: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
	font-size: var(--s);
}
.articoledit a{
	text-decoration: underline;
}
.admincontain {
    position: fixed;
    top: 40%;
    right: 0;
    height: 200px;
    background: var(--white);
    z-index: 150;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    border: 1px solid var(--grey);
}
.adminhook {
    float: left;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid var(--blue);
    height: 100%;
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    left: 0;
    position: relative;
    white-space: nowrap;
    background-color: var(--blue);
    writing-mode: vertical-lr;
    color: var(--white);
    padding: 0 4px;
}
.formularfull input[type="submit"], .formularfull button, .adaugaAdresa {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: var(--m);
}
.menuadmin {
    display: none;
    margin-left: 20px;
    padding: 5px;
    height: 100%;
    box-sizing: border-box;
	padding-left: 10px;
}
.adminOpt a {
    display: block;
    margin-top: 7px;
    padding: 6px 12px 5px;
    text-decoration: none;
    font-size: 13px;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    color: var(--white);
    background-color: var(--blue);
    border-radius: 15px;
	transition: all .3s ease;
}
.adminOpt a:hover{
	background-color: var(--darkblue);
}
.menuadmin input[type="text"] {
    max-width: 50px;
    border: 1px solid #adb5bd;
    text-align: center;
    padding: 4px;
    display: inline;
}
.menuadmin input[type="submit"] {
    padding: 4px 10px;
    font-size: 13px;
    color: var(--white);
    border: none;
    background: var(--negru);
    cursor: pointer;
	transition: all .3s ease;
}
.menuadmin input[type="submit"]:hover{
	background: var(--grey);
}
.divAlb {
    background-color: var(--white);
    border-radius: 3px;
}
.catholder{
	margin-top: -10px;
}
.subTitlu{
    font-size: var(--m);
    margin-top: 0px;
    border: none;
    margin-bottom: 20px;
    padding-bottom: 0px;
	color: var(--negru);
}
.meniucont{
    overflow: hidden;
    border-top: 1px solid var(--grey);
    border-left: 1px solid var(--grey);
    border-right: 1px solid var(--grey);
    background-color: var(--grey);
}
.meniucont a i{
	display: inline-block;
	width: 20px;
}
.meniucont a {
    display: block;
    color: var(--darkblack);
    font-weight: 600;
    font-size: var(--m);
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}
.meniucont a.activ  {
  background-color: white;
}

.headerToolbar a {
    color: var(--white);
}
.headerToolbar a:hover {
    color: var(--blue)
}

.dropdown {
    height: 100%;
}

.headerCategorii {
    display: flex;
    align-items: center;
    color: var(--blue);
    gap: 5px;
    height: 100%;
    background-color: var(--white);
    padding: 10px;
    font-weight: 600;
}

/* Meniu categorii */

.meniuVeziToate {
    padding: 25px;
    margin: auto;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 600;
    border-top: 1px solid var(--blue);
    width: 95%;
}

/* Dropdown Content (Hidden by Default) */
.menuDropdown {
  display: none;
  position: absolute;
  background-color: var(--white);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 0px 0px 20px 20px;
  box-shadow: 0px 3px 9px 0px var(--negru);
  /* visibility: hidden;
  transition: visibility 0, opacity 0.5s linear; */

}

/* Links inside the dropdown */
.menuDropdown a {
  color: var(--negru) !important;
  padding: 5px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.menuDropdown a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--blue);
  transition: transform 0.25s ease-out;
  transform-origin: bottom right;
}

.menuDropdown a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.menuDropdown .fa {
    color: var(--blue);
}

.meniuVeziToate a {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: unset;
    width: 221px;
    font-size: 20px;
}

/* .menuDropdown a:hover {background-color: #ddd;} */

.dropdown:hover .menuDropdown {
    background-color: var(--white);
  display: block;
  /* flex-wrap: wrap;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 8px;
    row-gap: 25px;
  padding: 11px;
    visibility: visible;
  transition: 0.3; */
}

.dropdown:hover .menuDropdown .menuDropdownGrid {

      display: grid;
  flex-wrap: wrap;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    /* grid-gap: 8px; */
    row-gap: 25px;
  padding: 11px;
    visibility: visible;
  transition: 0.3;

}

.menuDropdownGridTop {
    margin-bottom: 15px;
    margin-top: 15px;
    font-weight: 800;
}

.menuDropdownCat {
   width: 183px;
   font-size: 17px;
   text-wrap: nowrap;
   font-weight: 500;
}

.menuDropdownCatTop {
    font-weight: 800;
    font-size: 20px;
}

/* .dropdown:hover .headerCategorii {background-color: #3e8e41;} */

/* End meniu categorii */

.adaugaAdresa{
    background-color: var(--blue);
}
.adaugaAdresa:hover{
	opacity: 0.8;
}
.adaugaAdresa i {
	font-size: 12px;
}
#tipfacturare{
	margin-bottom: 10px;
}
.cui, .wrapReg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.cui input[type="text"]{
    margin-bottom: 0px !important;
    margin-left: 10px !important;
}
.wrapReg input[type="text"]{
	margin-bottom: 0px !important;
}
.wrapReg select{
	width: 100%;
}
.wrapReg .tva {
    margin-left: 10px;
    width: 100px;
}
.tva label {
    margin-left: 2px !important;
}
.wrapReg .reg{
	width: calc(100% - 110px);
}
.formular .adresarow:last-of-type{
    border-bottom: 0px;
}
.adresarow {
    line-height: 1.4;
    font-size: 16px;
}
.adresarow i{
	font-size: 12px;
}
a.editalbastru{
	color: var(--blue);
	font-weight: 600;
	cursor: pointer;
	transition: all .3s ease;
}
a.editalbastru:hover{
	color: var(--darkblue);
}
.wrapDetaliiComanda {
    display: flex;
    justify-content: center;
    margin: 20px 0px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.detaliiComanda {
    border: 1px solid var(--darkgrey);
    border-radius: 5px;
    padding: 15px;
    margin: 10px;
    width: 20%;
    min-width: 300px;
    line-height: 1.2;
    font-size: var(--m);
}
.susDetaliiComanda {
    min-height: 100px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    padding-top: 20px;
    border-bottom: 1px solid #dfdfdf;
}
.lineDetalii {
    width: 100%;
    height: 1px;
    background-color: var(--darkgrey);
    margin: 10px 0px;
}

.articolShareMare {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.shareLeft .titluMic{
	display: block;
	margin: 10px 0px;
}
.titluContulTau {
    background-color: var(--lightgrey);
    color: var(--darkblack);
    width: 100%;
    text-align: center;
    padding: 20px 0;
    font-size: var(--m);
    font-weight: 700;
    display: grid;
    grid-template-columns: 60px 1fr
}
.titluContulTau > .fa-user-circle {
    font-size: 36px;
}
.bottom{
    /* border-bottom: solid var(--grey) 1px; */
    /* border-right: solid var(--grey) 1px;
    border-left: solid var(--grey) 1px; */
}
.articolShareMare .aright a {
    background-color: var(--blue);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 10px;
}
.articolShareMare .aright a:hover{
    background-color: var(--darkblue);
}

.rezumatComanda {
    padding: 10px;
    font-size: 1.3em;
   
}
.rezumatComanda span {
    font-weight: bold;
}
.m{
	font-size: var(--m) !important;
}
.mb10{
	margin-bottom: 10px;
}
.mb20{
	margin-bottom: 20px;
}
.mb30{
	margin-bottom: 30px;
}
.contentBoxDel {
    position: relative;
    border-bottom: 1px solid var(--grey);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.qedit{
    color: var(--blue) !important;
    position: absolute;
    top: 5px;
    right: 5px;
	font-size: 12px;
}
.qedit:hover{
    color: var(--darkblue) !important;
}
.masiniClient {
  border-top: 1px solid var(--grey);
}

.consNotRevizie {
	display: none;

}
.consStorno {
	display: none;

}
.bold {
	font-weight: bold;
}
.editcere{
	font-size: var(--s);
	text-align: right;
}
.editcere a{
	margin-left: 5px;
}
.editcere a:not(.cerereOferta){
    background-color: var(--blue);
    color: var(--white);
    padding: 5px 10px;
    display: inline-block;
    border-radius: 15px;
	transition: all .3s ease;
}
.editcere a:not(.cerereOferta) i{
	font-size: 12px;
}
.editcere a:not(.cerereOferta):hover{
	background-color: var(--darkblue);
}

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


#editautotext input#tiptext{
	margin-bottom: 20px;
}

.istoricMasini li {
    background-color: var(--white);
    border: 1px solid var(--grey);
    padding: 10px;
    margin-bottom: -1px;
}
.istoricMasini li:last-child{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}
.imgIstoric {
    display: flex;
    justify-content: center;
    align-content: center;
	margin-bottom: 5px;
}
.imgIstoric img {
    max-height: 20px;
}
.textIstoric {
    text-align: center;
    color: var(--negru);
}
.artcos {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr;
    background-color: var(--white);
    border: 1px solid var(--grey);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
	margin-bottom: 5px;
}
.cosimg {
    padding: 5px;
    display: grid;
    justify-content: center;
    align-items: center;
}
.cosimg img {
    max-width: 90%;
    max-height: 140px;
	max-width: 140px;
    align-self: center;
    justify-self: center;
}
.cosMijloc {
    padding: 20px;
		position: relative;
}
.cosdenumire {
    font-size: var(--m);
    margin-bottom: 20px;
	color: var(--negru);
	font-weight: bold;
}
.cosProd {
    margin-bottom: 4px;
}
.cosProd img{
    max-width: 80px;
    max-height: 20px;
    align-self: center;
    justify-self: center;
	width: auto;
	height: auto;
}
.cosCod {
	position: absolute;
	left: 20px;
	bottom: 20px;
	font-weight: bold;
}
.cosCod span {
	text-transform: capitalize;
	font-size: var(--m);
}
.cosCe{
    display: block;
    text-align: center;
    margin-bottom: 5px;
}
.cosqty {
	padding: 20px;
	display: grid;
	justify-content: center;
	align-items: center;
}
.cosqty input{
    width: 80px;
    text-align: center;
    padding: 5px 12px;
}
.cosFinal {
    text-align: right;
    display: grid;
    justify-content: center;
    align-content: center;
}
.cospret {
    font-size: var(--m);
    width: 100%;
    margin-bottom: 10px;
}
.cosEcotaxa{
    font-size: var(--m);
    width: 100%;
    margin-bottom: 10px;
		color: var(--blue);
    font-weight: 500;
}
.costotal{
    font-size: var(--l);
    margin-bottom: 10px;
    width: 100%;
    font-weight: 600;
}
.cossterge {
    position: absolute;
    top: 10px;
    right: 10px;
}
.cossterge a{
	color: var(--darkblue);
}
.cosarticolholder .cossterge{
    bottom: 5px;
    right: 5px;
    top: unset;
}
.totaluri {
    background-color: var(--white);
    border: 1px solid var(--grey);
    border-radius: 3px;
    padding: 20px 10px;
    text-align: right;
    font-size: var(--m);
    margin-bottom: 10px;
}
.linieTotal{
    margin-bottom: 10px;
}
.totalMare{
	font-size: var(--l);
	font-weight: 600;
}
.selectincos label{
	margin-right: 10px;
}
#datenoidefacturare, #adresanoua, #curidicare, #scfacturare{
	display: none;
}

#datenoidefacturare {
    border-top: 1px solid var(--grey);
    padding-top: 10px;
}
#curidicare b{
	margin-left: 5px;
}
.ui-autocomplete {
    position: fixed;
    z-index: 100000;
    max-height: 480px;
    overflow-x: auto;
}
li.ui-menu-item:nth-child(2n) .searchsugest{
	background: none !important;
	background-color: var(--grey) !important;
}
.searchsugest {
    display: flex;
    height: 60px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--negru) !important;
}
.imaginesugest {
    width: 50px;
    display: flex;
    align-items: center;
    justify-items: center;
    margin-right: 5px;
}
.imaginesugest img{
	width: 45px;
	max-height: 100%;
}

.textsugest {
    display: grid;
    align-content: center;
    width: 100%;
}
.pretsugest{
	font-weight: bold;
	color: var(--blue);
}
.denumiresugest{
	transition: all .3s ease;
}
.searchsugest:hover .denumiresugest{
	color: var(--blue) !important;
}
.susCerereArticol {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grey);
}
#editfrom #cereformular{
    background-color: none;
    border: none;
    padding: 0px;
    border-radius: 0px;
}
.containerAdrese, .containerCont {
    background-color: var(--grey-deschis);
    padding: 20px;
    border-radius: 20px;
}
.containerAdreseTop {
    display: flex;
    justify-content: space-between;
}
.titluFormArticol{
	font-size: var(--m);
	margin-bottom: 20px;
}
#cossusqty {
    position: absolute;
    background-color: var(--blue);
    width: 20px;
    height: 16px;
    top: -5px;
    display: flex;
    border-radius: 4px;
    right: -10px;
    border: 1px solid var(--grey);
    font-size: var(--s);
    color: var(--white);
    align-items: center;
    justify-content: center;
    font-weight: 500;
}
.bx-wrapper .bx-prev{
	background-position: 0 0;
}
.bx-wrapper .bx-next{
	background-position: -43px 0;
}
.filtreleft{
	margin-bottom: 30px;
}
.titluStanga {
    font-size: var(--m);
    text-align: left;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--darkblue);
}
.titlusus {
    margin-bottom: 5px;
    font-size: var(--m);
    padding-bottom: 3px;
    text-align: center;
    border-bottom: 1px solid var(--blue);
}
.titlujos {
    text-align: center;
    font-size: var(--s);
}
.descriereCategorie {
    padding: 5px;
    color: var(--negru);
    text-align: center;
	border-left: 1px solid var(--grey);
	border-right: 1px solid var(--grey);
	height: 20px;
}
.desc{
	margin-bottom: 15px;
}
.selectCategorie{
	width: 100%;
}
.divAlbPaginare {
    border: 1px solid var(--grey);
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}
.divPaginareJos{
	padding-top:10px;
}
.opt label{
	margin-bottom: 0px;
    line-height: 1.2;
}
.bilaStoc {
    display: inline-block;
    height: 10px;
    width: 10px;
    background-color: var(--grey);
    border-radius: 50%;
    margin-right: 5px;
}
.stoc0{
	background-color: var(--grey);
}
.stoc1{
	background-color: var(--verde);
}
.stoc2{
	background-color: var(--blue);
}
.divInFocusBottom{
    background-color: var(--blue);
}

.divInFocus:focus-within{
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
    z-index: 999999;
}

.wrapSelectAuto {
    position: relative;
}
.wrapSelectAutoSus {
    width: 150px;
    text-align: center;
}



.qtyinput input {
    width: 100%;
    border: 1px solid var(--darkgrey);
    border-left: 0px;
    border-right: 0px;
    height: 100%;
    display: block;
    text-align: center;
    font-size: var(--m);
    padding: 0px;
}
.qtyinput input:focus{
	border-color: var(--darkgrey);
	box-shadow: none;
}
#banner a{
	transition: unset !important;
}
.veziMaiMult{
	display: none;
}
.butonVeziMaiMult {
    font-weight: 600;
    color: var(--darkblue);
		cursor: pointer;
}
.butonVeziMaiMult:hover{
    color: var(--blue);
}
/*filtre SumoSelect*/
.SumoSelect > .CaptionCont > label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
}
.SumoSelect > .CaptionCont > label > i {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=);
    background-position: center center;
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 5px auto;
    background-repeat: no-repeat;
    opacity: 0.8;
}
.placeholder > label {
    font-size: var(--m);
}
.SumoSelect input[type="text"]:focus{
	 box-shadow: none;
 }
 .filtruleft {
    margin: 5px 0;
 }
 .filtreleft .SumoSelect > .CaptionCont{
 	background: var(--darkblue);
 	border: 1px solid var(--darkblue);
 	border-top-right-radius: 0px;
 }
.filtreleft .SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont, .SumoSelect.open > .CaptionCont, .filtreleft .SumoSelect:focus > .optWrapper, .SumoSelect:hover > .optWrapper, .SumoSelect.open > .optWrapper{
	box-shadow: none;
}
.filtreleft .SumoSelect > .optWrapper{
	border: 1px solid var(--grey);
	border-bottom-left-radius: 0px;
}
.filtruleft .SumoSelect{
		margin-top: -1px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
}
.subgrupaholder .SumoSelect > .optWrapper, .grupaholder .SumoSelect > .optWrapper, .catholder .SumoSelect > .optWrapper, .marcaholder .SumoSelect > .optWrapper, .modeleholder .SumoSelect > .optWrapper, .tipuriholder .SumoSelect > .optWrapper{
	z-index: 10000;
}

/*CHAT*/
.chatbox {
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 99999;
}
.titlebox {
    cursor: pointer;
    font-size: 44px;
    color: #f36b31
}
.titlebox .fa-times-circle{
    color: #ff3f3f;
}
.contactNew{
  background: url(/public/images/contactNewPiese.png) no-repeat;
  display: inline-block;
  height: 70px;
  width: 211px;
  background-size: cover;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
}

.lastSyncUser {
    text-align: right;
    font-style: italic;
    font-weight: 600;
}
.syncCos{
    margin-right: 10px;
}

.holderCheckBoxTrimiteComanda{
    display: flex;
    align-items: center;
}

.holderCheckBoxTrimiteComanda label{
    margin-bottom: 0px;
}

.mmincontact {
  display: inline-block; background: url('/public/images/contact.png') no-repeat;
  background-size:contain;
  overflow: hidden; text-indent: -9999px;
  text-align: left;
  width: 50px;
  height: 49px;
}
.mminwhatsapp {
  display: inline-block; background: url('/public/images/iconWhats.png') no-repeat;
  background-size:contain;
  overflow: hidden; text-indent: -9999px;
  text-align: left;
  width: 50px;
  height: 49px;
 }
 .mminfacebook {
   display: inline-block; background: url('/public/images/iconFacebook.png') no-repeat;
   background-size:contain;
   overflow: hidden; text-indent: -9999px;
   text-align: left;
   width: 50px;
   height: 49px;
  }

.contentbox {
    display: none;
    float: left;
    padding-right: 5px;
    width: 100%;
    text-align: center;
}
.show {
    display: block;
}
.hide {
    display: none;
}
/*END CHAT*/
.opinieNume{
	color: var(--negru);
	margin-bottom: 3px;
}
.opinieImg{
	color: var(--darkblue);
	font-size:20px;
	display: inline-block;
	vertical-align: middle;
}
.opinieContainer{
	background: #fafcfb;
	padding: 15px;
	box-sizing: border-box;
	margin-bottom: 6px;
	border-radius: 5px;
	box-shadow: -3px 3px 4px 0px var(--grey);
}
.opinieText{
	display: inline;
	vertical-align: middle;
	color: var(--darkblue);
	font-size: var(--m);
	margin-left: 4px;
}
.btmChat{
	bottom: 115px;
}
.mobileMenuBars{
	display: none;
}
.mobileMenuTop {
    background: var(--gradientBlue);
    color: var(--white);
    font-size: var(--l);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.holderMenuMobile{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}
.mobileFilter{
    display: none;
    font-size: var(--m);
    border: 1px solid var(--darkgrey);
    border-radius: 3px;
    padding: 10px;
    font-weight: 600;
}
.newsletter-holder  .border-all-darkgrey {
    min-height: 170px;
}
.continutNewsletter{
	background-color:var(--white);
	border:1px solid var(--grey);
	padding: 15px 15px 15px 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	position: relative;
}
.textSusNewsletter{
	font-size: var(--l);
}
.textJosNewsletter{
	font-size: var(--m);
	margin-top: 10px;
}
.newsSVG{
	filter: invert(1);
	width: 25px;
}
.holderFormularNewsletter{
	display: flex;
  justify-content: flex-end;
}
.mailNewsLetter{
	margin: 0px 5px !important;
}
/* Animatii */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@-moz-keyframes slideText {
 	0%   { -moz-transform: translateX(100%); }
 	100% { -moz-transform: translateX(-50%); }
}
@-webkit-keyframes slideText {
 	0%   { -webkit-transform: translateX(100%); }
 	100% { -webkit-transform: translateX(-50%); }
}
@keyframes slideText {
	0%   {
  		-moz-transform: translateX(100%); /* Firefox bug fix */
  		-webkit-transform: translateX(100%); /* Firefox bug fix */
  		transform: translateX(100%);
  }
  	100% {
			-moz-transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
  	}
}
.producatorImagine{
	height: 120px;
	display: grid;
}
.producatorImagine img{
	display: block;
  align-self: center;
  justify-self: center;
  opacity: 0.8;
	max-width: 80%;
  max-height: 110px;
	width: auto;
	height: auto;
}
.fblink {
  background-color: #4858ae;
  color: #fff !important;
  padding: 5px 5px 4px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.fblink img, .googlelink img {
  height: 18px;
  margin-left: 5px;
}
.googlelink {
  background-color: #eee;
  color: #2a2a2a !important;
  padding: 5px 5px 4px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.butoaneSocialAuth{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	margin-bottom: 20px;
}
.linkuriComandaAuth{
	width:450px;
}
.ctnMesajLivrareGratuita{
	color: var(--darkblue);
	margin-top: 5px;
	font-weight: 600;
	font-size: 13px;
}
.texttransport:not(:empty) {
    text-align: center;
    list-style: none;
    padding: 15px;
    font-size: 18px;
    line-height: 20px;
    margin-top: 20px;
    margin-bottom: 21px;
    background-color: var(--blue);
    color: var(--white);
    text-decoration: none;
    transition: .3s;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #e2e2e2;
    -webkit-box-shadow: 0 0 5px 0 #d8d8d8;
    -moz-box-shadow: 0 0 5px 0 #d8d8d8;
    box-shadow: 0 0 5px 0 #d8d8d8;
	font-weight: 300;
}

.alertaFacturi {
	margin-bottom: 10px;
}
.alertaFacturiRestanteTitle {
	background: var(--white);
	text-align: center;
	padding: 10px;
	color: red;
	font-size: 1.4em;
}
.facturiRC {
	display: none;
}
.facturiRestanteContainer {
	background: var(--white);
	padding: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 5px;
}


.solduriCos {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 5px;
	background: var(--white);
	margin-bottom: 10px;
	padding: 10px;
}
.solduriCos > div {
	padding: 5px;
	font-size: 1.1em;
	font-weight: bold;
}
.headSold {
	background: #e8e7e7;
}

.texttransport a, .bigger{
	color:var(--alb) !important;
	font-weight: 600;
}
.anpcImgs{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 5px;
	margin-top: 10px;
}
.anpcImgs a{
	display: block;
	text-align: center;
}
.anpcImgs img{
	max-width:200px;
}
.textDescriereCategorieSus{
	margin-bottom: 10px;
	padding: 10px;
	font-size: var(--m) !important;
}

.textDescriereCategorieJos{
	margin-top: 10px;
	padding: 10px;
	font-size: var(--m) !important;
}

.titluMicut{
	font-size: var(--m);
}
.loading{
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: none;
  background: var(--white);
  opacity: 0.5;
}

.loader{
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 120px);
  border: 16px solid #f3f3f3;
  border-top: 16px solid var(--darkblue);
  border-radius: 50%;
  width: 240px;
  height: 240px;
  animation: spin 2s linear infinite;
}
#loaderMesaj{
  position: absolute;
  top: calc(50% - 90px);
  left: calc(50% - 120px);
  width: 240px;
  height: 240px;
	text-align: center;
	color: #000;
	font-size: 1.2em;
  font-weight: bold;
}
@keyframes spin{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* SOLICITARE CONT NOU */
.formSolicitareCont input{
    padding-right: 12px;
}
.formSolicitareCont input[type="number"] {
    display: inline-block;
    font-size: var(--s);
    font-weight: 500;
    color: var(--negru);
    line-height: 1.3;
    padding: 5px 12px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--grey);
    border-radius: 0px;
    background-color: var(--white);
    width: 100%;
    margin-bottom: 10px;
    border-radius: 0px;
    height: 28px;
}
.formSolicitareCont input::-webkit-outer-spin-button,
.formSolicitareCont input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.formSolicitareCont label.error{
    color: red;
}
.formSolicitareCont input.error,
.formSolicitareCont textarea.error,
.formSolicitareCont select.error {
    border-color: red !important;
}
.formSolicitareCont input.error:focus,
.formSolicitareCont textarea.error:focus {
    border-color: red !important;
    box-shadow: 0 0 1px 1px red !important;
}
#formularSolicitareCont label.error {
    color: red;
}
.containerNavigare {
    position: relative;
    width: 120px;
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 250px;
}

.containerButonNavigare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

#imgHarta {
    width: 75%;
    max-width: 600px;
}

#textNavigheaza {
    font-weight: 600;
}

.butoaneOpenNavigare {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    right: 0px;
}

#butonGoogle, #butonApple, #textButonGoogle, #textButonApple {
    display: none;
}
.butonOpenNavigare img {
    width: 50px;
}

.plateste_card {
    padding-bottom: 20px;
    text-align: center;
}
.plateste_card p {
    padding: 10px;
}

.meet{
    background-image: url('/public/images/roof-construct.png');
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #f7f7f7;
}
.meetHolder .formularfull{
    background-color: rgb(215 215 215);
}
.meetHolder form {
    width: 50%;
    max-width: 600px;
    padding: 50px;
}
.overflow-hidden { overflow: hidden; }
.quote{
    color: var(--blue);
    font-weight: 700;
}
.swiper-testimonials{
    padding: 0 30px;
}
#testimonials .swiper-button-prev {
    left: 0;
}
#testimonials .swiper-button-next {
    right: 0;
}
#testimonials {
    padding: 4rem 0;
}
.testimonial {
    font-size: var(--m);
    color: var(--darkgrey);
    line-height: 1.6
}
.testimonial-author{
    margin-top: 10px;
    color: var(--blue);
    font-size: var(--m);
}
#testimonials .swiper-slide{
    box-shadow: 0px 3px 8px var(--grey);
    margin-bottom: 10px;
    padding: 20px;
}
#testimonials .container{
    padding-bottom: 30px;
}
#testimonials .swiper-pagination{
    bottom: -30px;
}
.allservices{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.serviciiholder{
    border: solid rgb(235 235 235) 1px;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
}
.serviciibtn{
    padding: 20px 0;
}
.serviciiholder a {
    color: var(--blue);
    font-size: var(--m);
    font-weight: 700;
    text-transform: uppercase;
}
.serviciiholder .hover-underline-animation::after {
    background-color: var(--blue);
}
.serviciiimg {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 250px;  
    width: 100%;
}
.serviciiimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-title h1 {
    font-size: var(--xl);
    padding-bottom: 20px;
}
.section-title h2 {
    font-size: var(--xl);
    font-weight: 700;
    text-shadow: 1px 1px 2px var(--black);
    padding-bottom: 20px;
}
.section-title h3 {
    font-size: var(--ml);
    font-weight: 500;
    color: var(--darkgrey);
    width: 50%;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}
.section-title span {
    color: var(--blue);
}
.serviciitext {
    padding: 0 20px;
}
.serviciitext div:first-child {
    font-size: var(--ml);
    font-weight: 700;
    margin-bottom: 10px;
}
.serviciitext div:last-child {
    color: var(--darkgrey);
    font-size: var(--m);
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
    line-height: 1.5em; 
    max-height: calc(1.5em * 3);
    min-height: calc(1.5em * 3);
}
.padding-4rem-0{
    padding: 4rem 0;
}
.serviciiimg-bottom-left {
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 100%);
}
.serviciiimg-bottom-right{
    clip-path: polygon(0% 0%, 50% 50%, 50% 100%, 100% 100%);
}
.serviciiimg-bottom-left, .serviciiimg-bottom-right {
    position: absolute;
    left: 0;
    bottom: 0;
    background: white;
    height: 20%;
    width: 100%;
}
.holder-auth{
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* border: solid var(--grey) 1px; */
}
.auth-left{
    padding-top: 40px;
}
.auth-right, .register-right{
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}
.auth-right{
    background-image: url('/public/images/autentificare/slider_1.jpg');
}
.register-right{
    background-image: url('/public/images/autentificare/slider_2.jpg');
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0) 100%);
}

.about-content {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 30px;
}

.about-info {
    flex: 1;
}

.about-img {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.about-img img {
    width: 100%;
    height: auto;
    display: block;
}

.features {
    margin-top: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.feature-icon {
    flex: 0 0 50px;
    height: 50px;
    background-color: var(--darkblue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    font-size: 20px;
}
.feature-item h4{
    font-size: var(--ml);
    font-weight: 600;
    margin-bottom: 10px;
}
.feature-item > *{
    font-size: var(--m);
}
.cat-title{
    font-size: var(--xl);
    text-align: center;
}
.clasa-noua{
    padding: 5px 40px;
    background: var(--blue);
    color: white;
    font-size: var(--m);
    position: relative;
    border: none;
    min-width: 250px;
    text-align: center;
}
.clasa-noua::after{
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 20px;
    height: 100%;
    background: white;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: rotate(180deg);
}
.clasa-noua::before{
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 20px;
    height: 100%;
    background: white;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}


.holder-cat {
    width: 100%;
    height: 400px;
    perspective: 1000px;
}

.flip-card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    cursor: pointer;
    -moz-backface-visibility: hidden;
}

.holder-cat:hover .flip-card {
    transform: rotateY(180deg);
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.back {
    transform: rotateY(180deg);
    font-size: var(--ml);
    font-weight: bold;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.front img {
    height: 100%;
    object-fit: cover;
    min-width: 100%;
}
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 300px));
    justify-content: left;
    gap: 10px;
}
.group-img{
    height: 250px;
}
.group-img img {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
}
.holderBtnFiltrare{
    display: flex;
    justify-content: center;
    gap: 20px;
}
.holderBtnFiltrare input[type="radio"] {
    display: none;
}
.tabFiltrare {
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 12px 25px;
    font-size: var(--m);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    text-align: center;
}
.tabFiltrare.active {
    background-color: var(--blue);
    color: var(--white);
}
.tabFiltrare label{
    cursor: pointer;
    
    margin-bottom: 0px;
}
.sliderPrezArticole .wrapArticolSlider{
    width: 200px;
}
.sliderPrezArticole  {
    display: flex;
    flex-wrap: wrap;
}
.sliderPrezArticole .glightbox{
    width: 100%;
    min-height: 100%;
}
#garantie {
    font-size: var(--l);
    font-family: 600;
    padding: 20px 0;
}
.header-banner {
    border: solid var(--grey) 1px;
    color: var(--darkblack);
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    align-items: center;
    gap: 10px;  
}

.brand-section {
    display: flex;
    flex-direction: column;
}


.tagline {
    font-size: var(--m);
    opacity: 0.9;
    color: var(--darkblack);
}

.category-section {
    display: flex;
    align-items: center;
    background-color: rgba(255,255,255,0.15);
    padding: 10px 20px;
    border-radius: 30px;
}

.category-label {
    font-size: 12px;
    margin-right: 8px;
}

.category-name {
    font-size: 16px;
    font-weight: 600;
}
.gridGalerie {
    grid-template-columns: repeat(4, 1fr); 
}
.gridGalerie .wrapArticolSlider {
    overflow: hidden;
}
.blogs-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 32px 28px;
    padding: 10px 0 30px 0;
}
.holder-blog-img {
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3f6fa;
    border-bottom: 1px solid #e6eaf0;
}
.blog-image {
    height: 170px;
    object-fit: cover;
    width: 100%;
    margin: 0 auto;
    background: #fff;
}
.blog-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 16px 0 rgba(44,62,80,0.07);
    transition: box-shadow 0.25s, transform 0.18s;
    position: relative;
    border: 1px solid #e6eaf0;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.blog-date {
    background: #eaf0fa;
    color: var(--darkblue);
    padding: 0.35rem 1rem;
    font-size: 0.93rem;
    font-weight: 500;
    margin: 0 0 10px 0;
    border-radius: 0 0 12px 0;
    display: inline-block;
    letter-spacing: 0.01em;
}
.blog-content {
    padding: 18px 18px 14px 18px;
    flex: 1 1 auto;
}
.blog-title {
    font-size: 1.13rem;
    margin-bottom: 8px;
    color: var(--darkblue);
    font-weight: 600;
    line-height: 1.25;
    min-height: 2.2em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-description {
    font-size: 1rem;
    color: #6b7685;
    margin-bottom: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-read-more {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1rem;
    background: #eaf0fa;
    color: var(--darkblue);
    padding: 8px 0 7px 0;
    border-radius: 7px;
    font-weight: 500;
    margin-top: 10px;
    box-shadow: none;
    transition: background 0.18s, color 0.18s;
    border: 1px solid #e6eaf0;
    text-decoration: none;
}
.blog-read-more:hover {
    background: var(--darkblue);
    color: #fff;
    text-decoration: none;
}
.error-template h1 {
    font-weight: 800;
    font-size: 4rem;
    display: block;
    line-height: 1.2;
    letter-spacing: -3px;
    color: var(--darkblue);
}
.titleBlog{
	font-size: 30px;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-top: 55px;
  margin-bottom: 20px;
  font-weight: 300;
}
.blogcontinut{
	position: relative;
    padding-top: 7px;
}
.imgBlogctn{
	-webkit-box-shadow: 0px 0px 5px 0px rgba(158,158,158,0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(158,158,158,0.5);
  box-shadow: 0px 0px 5px 0px rgba(158,158,158,0.5);
	margin-top: 20px;
}
.imgBlogctn img{
	max-width: 100%;
    max-height: 500px;
    width: 100%;
    object-fit: scale-down;
    display: block;
}
.dreaptaBlog{
	padding: 20px;
}
.blogvizulizari{
	display: flex;
  align-items: center;
  color: var(--darkgrey);
  font-size: var(--m);
	font-weight: bold;
	padding-bottom: 10px;
}
.textBlog{
	color: var(--ctnantnext);
	font-size: var(--ml);
	font-weight: 400;
}
.blogedit{
  position: absolute;
  top:0px;
  right: 0px;
}
.blogedit a{
	background: var(--darkblack);
	color: var(--white);
	text-decoration: none;
	font-size:var(--m);
	padding: 4px;
	display: block;
}









/* cookie */
.cookie-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background-color: var(--lightgrey);
      color: var(--darkblack);
      box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
      z-index: 9999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      max-width: 100%;
      border-top: 4px solid var(--blue);
    }
    
    .cookie-content {
      display: flex;
      align-items: center;
      gap: 20px;
      flex: 1;
    }
    
    .cookie-icon {
      flex-shrink: 0;
      width: 60px;
      height: 60px;
      background-color: var(--blue);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    
    .cookie-text {
      text-align: left;
    }
    
    .cookie-text h3 {
      font-size: 18px;
      color: #333;
      margin-bottom: 8px;
      font-weight: 600;
    }
    
    .cookie-text p {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
      line-height: 1.4;
    }
    
    .cookie-benefits {
      margin-top: 10px;
    }
    
    .benefit-item {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 3px;
    }
    
    .check-icon {
      color: #4CAF50;
      font-weight: bold;
    }
    
    .cookie-buttons {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    
    .cookie-options {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      margin-top: 15px;
    }
    
    .option-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .toggle {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
    }
    
    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--darkgrey);
      transition: .4s;
      border-radius: 24px;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .slider {
      background-color: #4CAF50;
    }
    
    input:checked + .slider:before {
      transform: translateX(26px);
    }
    
    .disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    .cookie-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
    }
    
    .accept-all {
      background-color: var(--blue);
      color: white;
    }
    
    .reject-all {
      background-color: #e74c3c;
      color: white;
    }
    
    .reject-all:hover {
      background-color: #c0392b;
    }
    
    .privacy-link {
      color: var(--darkblue);
      text-decoration: none;
      font-weight: 500;
    }
    
    .privacy-link:hover {
      text-decoration: underline;
    }
    

.mobile-menu-active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}



.dreaptaBlog {
    background: #ffffff;
    padding: 30px;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    line-height: 1.7;
    font-family: Arial, Helvetica, sans-serif;
}

.dreaptaBlog p {
    margin-bottom: 15px;
    color: #4b5563;
    font-size: 15px;
    text-align: justify;
}

.dreaptaBlog h1 {
    color: #1f2937;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 25px;
    line-height: 1.3;
}

.dreaptaBlog h2 {
    color: #1f2937;
    font-size: 22px;
    font-weight: 600;
    margin: 25px 0 15px 0;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 8px;
}

.dreaptaBlog h3 {
    color: #374151;
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 10px 0;
}

.dreaptaBlog strong {
    color: #1f2937;
    font-weight: 600;
}

.dreaptaBlog ul, .dreaptaBlog ol {
    margin: 15px 0;
    padding-left: 25px;
}

.dreaptaBlog li {
    margin-bottom: 8px;
    color: #4b5563;
    font-size: 15px;
}

.dreaptaBlog blockquote {
    border-left: 4px solid #3b82f6;
    margin: 20px 0;
    padding: 15px 20px;
    background: #f8fafc;
    font-style: italic;
    color: #6b7280;
    border-radius: 0 4px 4px 0;
}

.dreaptaBlog a {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.3s ease;
}

.dreaptaBlog a:hover {
    color: #1e40af;
    text-decoration: underline;
}

/* Primul paragraf cu prima literă mare */
.dreaptaBlog p:first-of-type::first-letter {
    float: left;
    font-size: 3.2em;
    line-height: 0.8;
    margin: 0.1em 0.1em 0.1em 0;
    font-weight: bold;
    color: #1e3a8a;
}

/* Evidențiere pentru liste importante */
.dreaptaBlog li strong {
    color: #1e40af;
}

/* Spacing pentru titluri în funcție de context */
.dreaptaBlog h2 + p,
.dreaptaBlog h3 + p {
    margin-top: 0;
}

/* Evidențiere pentru sfaturi practice */
.dreaptaBlog p:contains("Sfat:"),
.dreaptaBlog p:contains("Atenție:"),
.dreaptaBlog p:contains("Important:") {
    background: #fef3c7;
    padding: 12px 15px;
    border-left: 4px solid #f59e0b;
    border-radius: 0 4px 4px 0;
    margin: 20px 0;
}

/* Responsive pentru mobile */
@media (max-width: 768px) {
    .dreaptaBlog {
        padding: 20px;
        margin: 15px 0;
    }
    
    .dreaptaBlog h1 {
        font-size: 24px;
    }
    
    .dreaptaBlog h2 {
        font-size: 20px;
    }
    
    .dreaptaBlog h3 {
        font-size: 16px;
    }
    
    .dreaptaBlog p,
    .dreaptaBlog li {
        font-size: 14px;
    }
    
    .dreaptaBlog p:first-of-type::first-letter {
        font-size: 2.8em;
    }
}

@media (max-width: 480px) {
    .dreaptaBlog {
        padding: 15px;
        margin: 10px 0;
    }
    
    .dreaptaBlog ul,
    .dreaptaBlog ol {
        padding-left: 20px;
    }
}



.staticContainer {
    padding: 20px 25px;
    font-size: var(--m);
    color: var(--darkblack);
    line-height: 1.6;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    margin: 20px 0;
}

.staticContainer h2 {
    font-size: 1.4rem;
    color: var(--darkblue);
    margin-bottom: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 8px;
}

.staticContainer h3 {
    font-size: 1.2rem;
    color: var(--darkblue);
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
}

.staticContainer p {
    font-size: var(--m);
    margin-bottom: 14px;
    color: var(--darkblack);
}

.staticContainer strong {
    color: var(--darkblue);
    font-weight: 700;
}

.staticContainer ul {
    margin: 14px 0;
    padding-left: 20px;
}

.staticContainer li {
    margin-bottom: 6px;
    font-size: var(--m);
    color: var(--darkblack);
    list-style-type: disc;
}

/* Stilizare pentru evidențierea timpului de livrare */
.staticContainer h3:nth-of-type(2) {
    color: #e74c3c;
    border-bottom-color: #e74c3c;
}

.staticContainer h3:nth-of-type(2) + p strong {
    background: #ffe6e6;
    padding: 3px 8px;
    border-radius: 4px;
    color: #c0392b;
}

/* Stilizare pentru secțiunea de acoperire națională */
.staticContainer h3:nth-of-type(3) {
    color: #8e44ad;
    border-bottom-color: #8e44ad;
}

.staticContainer h3:nth-of-type(3) + p strong {
    background: #f4e6ff;
    padding: 3px 8px;
    border-radius: 4px;
    color: #7d3c98;
}

/* Stilizare pentru secțiunea de informații importante */
.staticContainer h3:nth-of-type(4) {
    color: #f39c12;
    border-bottom-color: #f39c12;
}

.staticContainer h3:nth-of-type(4) + ul li {
    border-left-color: #f39c12;
    background: #fef9e7;
}

.staticContainer h3:nth-of-type(4) + ul li:hover {
    background: #fdf2ce;
}

.staticContainer h3:nth-of-type(4) + ul li:before {
    color: #f39c12;
    content: "ℹ";
}

/* Paragraf final cu call-to-action */
.staticContainer p:last-child {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 500;
    margin-top: 40px;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

/* Responsive design */
@media (max-width: 768px) {
    .staticContainer {
        padding: 20px 15px;
    }
    
    .staticContainer h2 {
        font-size: 2rem;
    }
    
    .staticContainer h3 {
        font-size: 1.5rem;
        margin-top: 30px;
    }
    
    .staticContainer p {
        font-size: 1rem;
    }
    
    .staticContainer li {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
}