body {  font-family: 'DM Sans', sans-serif; font-size: 16px;}
a {color: #007A7A;transition: all .2s ease-in;}
.blue {color: #2F3047;}
.red {color: red;}


h2 {font-size: 28px; line-height: 40px; font-weight: 500; margin-bottom: 30px; }
h4 {font-size: 16px; line-height: 20px; font-weight: 600;}

p.small {font-size: 14px;}

.top-fonduri {position: absolute; z-index: 1200; top: 0px; right: calc((100vw - 1440px) / 2); padding: 27px 10px;transition: all .3s ease-in;}
.top-fonduri img {width: 40px; margin: 0 10px;}


.navbar-brand { padding: 20px 0; margin-left: calc((100vw - 1440px) / 2);}
.navbar-brand img {height: 40px;transition: all .3s ease-in;}
.navbar {background: #fff; padding: 0;}

#navbar {margin-right: 200px;}
#navbarul {transition: all .2s ease-in; -webkit-box-shadow: 0px 0px 20px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px -11px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px -11px rgba(0,0,0,0.75);}	

.colorChange {background: #0A1D61;}
.nav-item {
    padding: 0 15px;
    position: relative;
}
.navbar-nav .nav-link {
    font-weight: 600;
    white-space: nowrap;	
    padding: 6px 0 4px 0 !important;
    font-size: 16px;
	color: #333;
}
.navbar-nav .nav-link:hover {color: #333;}
.navbar-toggler-icon {color: #fff;}

.navScroll2 { padding-top: 0; padding-bottom: 0;}
.navScroll2 .navbar-brand img {height: 30px; margin-left: 20px;}
.navScroll2 .top-fonduri {padding: 3px 10px;}

.dropdown-toggle::after {display: none;}

.navbar .nav-link {border-bottom: 2px solid #fff;}
.navbar .show .nav-link {color: #000; border-bottom: 2px solid #00ABA8;}
.custom-toggler.navbar-toggler {
  border-color: #2F3047;
} 
.navbar-toggler { border-radius: none; border: none;}
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(47,48,71, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.dropdown-menu {
   display: block;border-radius: 0; border: none;
   opacity: 0; margin: 0;
   padding: 0;
   max-height: 0;
   overflow: hidden;
   transition: all .3s ease-in;
}
 .dropdown-menu.show {
   max-height: 1000px;
   opacity: 1;
   padding: 0.5rem 0;
}

.navbar .dropdown-menu .container {
    padding-left: 15px;
    padding-right: 15px;
}
.dropdown-menu ul {list-style-type: none; padding-left: 0px; font-size: 1rem;}
.dropdown-menu ul li{padding-bottom: 8px;  }
.dropdown-menu ul li a {color: #212529; padding: 5px 10px; }
.dropdown-menu ul li a:hover {text-decoration: none;color: #212529; background: #e9ecef;}
.dropdown-menu ul li a:before {
    font-family: 'FontAwesome';
    content: '\f00c';
	margin-right: 10px;
	color: #212529;
	font-size: 12px;}

.dropdown-item {
	white-space: normal;
	padding: 3px 0;
	font-weight: 500;
}
.dropdown-item:hover {background: none;color: #00ABA8;}

.vizual{ 
	position: relative;
    width: 100%;
    height: 600px;
    background-image: url('../images/vizual.jpg');
    background-size: cover;
	background-position: center;
}

.vizual h1 {color: #fff; font-size: 40px; line-height: 48px; font-weight: 700;}
.vizual p {color: #fff;font-weight: 400; font-size: 20px;line-height: 34px;}
.vizual ul {list-style: none; padding: 0;}
.vizual ul li {position: relative; padding-left: 30px; color: #fff; float: left; margin-right: 30px;}
.vizual ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; 
    height: 20px;
    background-image: url('../images/icon-check.svg');
    background-size: contain;
    background-repeat: no-repeat;
}



.vizualin {aspect-ratio: 7/2; overflow: hidden; position: relative; margin: 0 -15px;}
.vizualin > .original {
    position: absolute;
    top: -50%;
    width: 100%;
	filter: hue-rotate(-30deg);
    z-index: 1; /* Imaginea blurată */
}
.vizualin > .blurred-image {
    position: absolute;
    top: -50%;
    z-index: 2; /* Imaginea blurată */
	filter: blur(10px) hue-rotate(-30deg);
	mask-image: linear-gradient(to right, black 40%, transparent 60%);
    -webkit-mask-image: linear-gradient(to right, black 40%, transparent 60%);

    /* Afișează doar partea blurată din stânga */
}
/*
.vizualin .intro { bottom: 40px; width: auto; z-index:100; background: rgba(1,1,1,0.05);-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 30px;}
*/
.vizualin .intro { bottom: 40px; z-index:100; position: relative; padding: 30px 0; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); text-shadow: 0 0 0.1em rgba(0,0,0,0.2), 0 0 0.1em rgba(0,0,0,0.2);}
.vizualin .intro h1 {margin-top: 50%; padding-top: 0; padding-bottom: 0px; color: #ffffff; font-weight: 600; font-size: 60px; }
.vizualin .intro p {font-size: 28px;color: #ffffff;}

a.flags {
	padding: 4px 10px 4px 13px;
	border-radius: 40px;
	border: 1px solid rgba(112, 112, 112, 0.5);
	background: rgba(112, 112, 112, 0.1);
	color: rgba(112,112,112,1);
	font-size: 14px;
	display: inline-block; 
	margin-left: 10px;
}
a.flags:hover {text-decoration: none; color: rgba(112,112,112,1);background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(112, 112, 112, 0.5);}
a.flags_act {
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(112, 112, 112, 0.2);
}

a.flags > img, a.flags_act > img {height: 20px; width: 30px; margin-bottom: 1px; margin-right: 8px; border-radius: 3px;}

span.sbttl {
	padding: 6px 20px 6px 20px;
	border-radius: 40px;
	border: 1px solid rgba(0, 171, 168, 0.5);
	background: rgba(0, 171, 168, 0.2);
	color: #fff;
	font-size: 14px;
	display: inline-block; 
}
span.sbttl2 {
	padding: 4px 20px 4px 20px;
	border-radius: 40px;
	border: 1px solid rgba(0, 171, 168, 0.5);
	background: rgba(0, 171, 168, 0.1);
	color: rgba(0,122,122,1);
	font-size: 14px;
	display: inline-block; 
}

span.sbttl3 {
	padding: 2px 16px 0px 16px;
	border-radius: 40px;
	border: 1px solid rgba(255, 88, 4, 0.5);
	background: rgba(255, 88, 4, 0.1);
	color: rgba(255,88,4,1);
	font-size: 12px;
	font-weight: 500;
	display: inline-block; 
}

.mainbg {background: #F9FCFC;}
.greenbg {background: #003433; color: #ffffff;}

.greenbox {
    border: 1px solid #025958;
    border-radius: 20px;
    padding: 20px 20px 200px 20px;
    min-height: 500px;
    position: relative;
    width: 100%; height: 100%; 
    color: white;
	background: #012726;
	overflow: hidden;
}

.green1 {position: absolute; bottom:0; left: 0; aspect-ratio: 16/9; width: 100%;
	background-image: linear-gradient(to top, rgba(0, 39, 38, 0.5) 0%, rgba(0, 39, 38, 0.5) 60%, rgba(0, 39, 38, 1) 100%), url('../images/parts-inventory.jpg'); 
	background-size: 100% auto;
	z-index: 2;}
.green2 {position: absolute; bottom:0; left: 0; aspect-ratio: 16/9; width: 100%;
	background-image: linear-gradient(to top, rgba(0, 39, 38, 0.5) 0%, rgba(0, 39, 38, 0.5) 30%, rgba(0, 39, 38, 0.9) 60%, rgba(0, 39, 38, 1) 100%), url('../images/automate-task.jpg'); 
	background-size: 100% auto;;

	z-index: 2;}
.green3 {position: absolute; bottom:0; left: 0; aspect-ratio: 16/9; width: 100%;
	background-image: linear-gradient(to top, rgba(0, 39, 38, 0.5) 0%, rgba(0, 39, 38, 0.5) 60%, rgba(0, 39, 38, 1) 100%), url('../images/data-drive-platform.jpg'); 
	background-size: 100% auto;
	z-index: 2;}
.green4 {position: absolute; bottom:0; left: 0; aspect-ratio: 16/9; width: 100%;
	background-image: linear-gradient(to top, rgba(0, 39, 38, 0.5) 0%, rgba(0, 39, 38, 0.5) 60%, rgba(0, 39, 38, 1) 100%), url('../images/connected-systems.jpg'); 
	background-size: 100% auto;
	z-index: 2;}
.green5 {position: absolute; bottom:0; left: 0; aspect-ratio: 16/9; width: 100%;
	background-image: linear-gradient(to top, rgba(0, 39, 38, 0.5) 0%, rgba(0, 39, 38, 0.5) 60%, rgba(0, 39, 38, 1) 100%), url('../images/technology.jpg'); 
	background-size: 100% auto;
	z-index: 2;}

.greenbox .icon {width: 64px; height: 64px; border-radius: 32px; border: 1px solid #00ABA8; background: rgba(0, 171, 168, 0.2); padding: 18px; margin-bottom: 20px;}
.greenbox h4 {font-size: 16px; font-weight: 600; line-height: 24px;z-index: 3;}
.greenbox p {font-size: 14px; font-weight: 300;z-index: 3;}
.greenbox .text {position: absolute; top: 20px; left: 20px; width: calc( 100% - 40px ); z-index: 4;}


span.nr {font-size: 48px; line-height: 48px; font-weight: 700;}

h3.icon {font-size: 36px; line-height: 24px; font-weight: 600; padding-left: 70px; position: relative;}
h3.icon span {font-size: 18px; font-weight: 600;}
h3.icon img {position: absolute; top: 0; left: 0; }

/*INFINTE SLIDER AUTO*/
.slider{
    width: 100%;
    /*border: 1px solid red;*/
    height: var(--height);
    overflow-x: hidden;
    mask-image: linear-gradient(
            to right,
            transparent,
            #000 5% 95%,
            transparent
    );
}
.slider .list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}
.slider .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    line-height: 88px;
    animation: autoRun 20s linear infinite;
    animation-delay: calc( (20s / var(--quantity)) * (var(--position) - 1) );
	text-align: center;
}
.slider .list .item img{
    max-height: 60px;
    max-width: 140px;
	filter: grayscale(100%);
}

.slider .list .item:hover img{
	filter: grayscale(0%);
}

.formbox {background-image: linear-gradient(to bottom, rgba(246, 247, 248, 1) 0%, rgba(246, 247, 248, 1) 60%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%); padding-top: 100px; padding-bottom: 100px;}

.formboxin {background: #fff; border-radius: 16px; filter: drop-shadow(0px 0px 6px #cccccc); width: 100%;padding: 40px;}

@keyframes autoRun {
    from {
        left: 100%;
    }
    to{
        left: calc(var(--width)* -1);
    }
}
.slider:hover .item{
    animation-play-state: paused !important;
}

.footer {min-height: 80px; font-size: 14px; background: #014342; color: #ccc; font-weight: 300; padding-top: 30px; padding-bottom: 30px;}
.footer h3 {font-size: 24px; color: #fff; text-transform: none; font-weight: 600; font-size: 16px;}
.footer a {color: #ccc; text-decoration: none;}
.footer a:hover {color: #fff;}
.footer img {height: 30px;}
.footer .action {border-left: 2px solid #fff; margin-left: 2px;padding: 2px 0 2px 10px; font-size: 16px;}
.footer .action a {font-weight: 400;}


ul.quicklinks {list-style: none; margin: 0; padding: 0;}
ul.quicklinks li {margin-right: 30px;}
ul.social-buttons {margin: 0; padding: 0;}
ul.social-buttons li {display: inline-block; margin: 0 15px 0 0;}
ul.social-buttons li a {
    background-color: rgba(255,255,255,0.7);
    border-radius: 100%;
    color: #626CAE;
    display: block;
    font-size: 20px;
    height: 40px;
    line-height: 38px;
    outline: 0 none;
    transition: all 0.3s ease 0s;
    width: 40px;
	text-align: center;
}
ul.social-buttons li a:hover {background: rgba(255,255,255,1);
	color: #00ABA8;
}

ol li { padding: 5px 5px 5px 10px; margin-bottom: 5px; background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(253,253,255,1) 51%, rgba(255,255,255,0) 100%);color: #00b4d8; font-size: 20px;}
ol li::marker {font-weight: bold; color: #555; font-size: 13px;}

ul.hi {list-style: none; padding-left: 30px;}
ul.hi li:before {
  content: "\f058"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.4em; /* same as padding-left set on li */
  width: 1.4em; /* same as padding-left set on li */
  font-size: 20px;
  color: #00b4d8;
}

ul.hi2 {list-style: none; padding-left: 30px;}
ul.hi2 li:before {
  content: "\f105"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.4em; /* same as padding-left set on li */
  width: 1.4em; /* same as padding-left set on li */
  font-size: 20px;
  color: #00b4d8;
}


.btn {background: #007a7a; color: #fff; padding: 10px 20px; border-radius: 30px}
.btn:hover { background: #00b4d8; color: #fff;}
.btn-alb { background: #ffffff; color: #007a7a; font-weight: 600;}
.btn-alb-2 { background: #ffffff; color: #007a7a; font-weight: 600; border-radius: 30px; border: 1px solid rgba(0, 171, 168, 0.5); padding: 8px 24px; text-decoration: none;}
.btn-alb-2:hover {background: rgba(0, 171, 168, 0.1); color: #007a7a; text-decoration: none;}
.btn-contur-alb {background: none; border: 1px solid #fff; color: #fff; border-radius: 30px;  padding: 8px 24px; text-decoration: none; transition: all .2s ease-in;} 
.btn-contur-alb:hover {background: rgba(0, 0, 0, 0.1); color: #fff; text-decoration: none; } 
/*
.footer2 {min-height: 80px; font-size: 13px; background: #028090; color: #fff; font-weight: 300; padding-top: 30px; padding-bottom: 60px; margin-top: 1px;}
*/
.colas {display: none;}
.faindas {display: none;}



@media (min-width: 100px) and (max-width: 767px){
	#navbar {
		margin-right: 0px;
	}
	.navbar-nav {margin-top: 10px; padding: 0 15px;}
	.nav-item {padding: 0 0;}	
	
	.dropdown-item {
		white-space: normal;
		padding: .25rem 15px;
	 }

   
	.top-fonduri { right: 70px; padding: 10px 5px 5px 5px; background: #fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
	.top-fonduri img {width: 30px; margin: 0 5px;}

	.colas {
		width: 50px;
		height: 50px;
		text-align: center;
		background: rgba(0,117,96,0.8);
		font-weight: bold;
		color: white;
		text-decoration: none;
		position: fixed;
		bottom: 5px;
		left: 5px;
		display: block;
		border: 1px solid #fff;
	}	
	.faindas {
		width: 50px;
		height: 50px;
		text-align: center;
		background: rgba(0,117,96,0.8);
		font-weight: bold;
		color: white;
		text-decoration: none;
		position: fixed;
		bottom: 5px;
		right: 5px;
		display: block;
		border: 1px solid #fff;
		
	}	
	.colas > i ,.faindas > i {
		color: #fff;
		margin-top: 10px;
		font-size: 30px;
	}
	.imglist {display: block;  max-width:100%;  max-height: 100%;  width: auto;  height: auto;}

}	
@media (min-width: 768px) and (max-width: 991px){
	#navbar {margin-right: 0px;}

	.top-fonduri { right: 70px; padding: 10px 5px 5px 5px; background: #fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
	.top-fonduri img {width: 30px; margin: 0 5px;}
}
@media (min-width: 100px) and (max-width: 991px){

	.vizualin {background: #f5f5f5;}
	.vizualin .intro {position: relative; width: 100%; left: 0; bottom: 0; padding: 10px 15px;}
	.vizualin h1 {font-size: 1.6rem; padding-bottom: 5px;}

}
@media (min-width: 992px) and (max-width: 1199px){
	#navbar {margin-right: 0px;}
	
}
@media (min-width: 1199px){
	.container {max-width: 1440px;	}
}
@media (max-width: 1440px){
	.navbar {   padding-top: 10px; padding-bottom: 10px;}
	.navbar-brand {margin-left: 15px;}
	.navbar-brand { padding: 0px 0;}
	.navbar-brand img {height: 40px;}
}