.webagency-li{
	order: 1;
}

.digitalmarketing-li{
	order: 2;
}

.comunicazionebranding-li{
	order: 3;
}

.branding-li {
	order: 4;
}

.consulenzait-li{
	order: 5;
}





.serviziextra-li{
	order: 0;
}













section.noleggiousato{
	padding: 10rem 2rem;

	@media screen and (max-width: 979px){
	}

	.inner{

		display: flex;
		width: 100%;
		overflow: hidden;
		padding: 0 20px 0 20px;

				@media screen and (max-width: 979px){
				padding: 0;
				max-width: 500px;
				margin: 0 auto;
    }


		.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 1279px;
		margin: 0 auto;
		gap: 8rem;
		padding: 0px 2rem;

		@media screen and (max-width: 979px){
      flex-direction: column;
				padding: 0;
				align-items: normal;
			gap: 8rem;
    }

		.left{
			flex: 1 1 50%;
			padding: 0;
			display: flex;
			gap: 30px;
			align-items: center;

			@media screen and (max-width: 979px){
				flex-direction: column;
				gap: 60px;
				order: -1;
			}


			& > picture{
				height: 100%;
				flex: 0 1 400px;
				
			display: none;

				@media screen and (max-width: 979px){
					flex: 1 1 auto;
					height: 200px;
					width: 100%;
					order: 1;
				}

				& img{
          height: 100%;
          object-fit: cover;
          object-position: 10% 100%;
          width: 100%;
				}
			}


.content{

	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
				text-align: center;


	@media screen and (max-width: 979px){
		flex: 1 1 auto;
		text-align: center;
	}


				& picture{
				height: 100%;
				flex: 0 1 200px;
				max-height: 150px;

				@media screen and (max-width: 979px){
					flex: 0 0 300px;
					max-height: 300px;

				}

								@media screen and (max-width: 500px){
					flex: 0 0 150px;
					max-height: 150px;

				}

				& img{
          height: 100%;
          object-fit: cover;
          object-position: 100% 70%;
          width: 100%;
				}
			}


		& h2{
			font-size: clamp(1.8rem, 3vw, 2.4rem);
			line-height: 1;
			letter-spacing: -1px;
			margin: 0;
			color: var(--secondary-color);
			text-wrap: balance;
			text-transform: uppercase;
		}

		& h3{
			font-size: 1.1rem;
			color: var(--primary-color);
			line-height: 1.2;
			font-weight: 700;
			margin: 0;
			text-wrap: balance;
			text-transform: uppercase;
		}

		& p{
			font-size: 0.9rem;
			margin: 0;
			text-wrap: balance;
		}

		& ul{
			margin: 10px 0 0;
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			justify-content: center;

			& li:last-of-type{
				display: none;
			}

			@media screen and (max-width: 979px){
				justify-content: center;
			}

			@media (max-width: 500px) {
				flex-direction: column;

				& li{

					& a{
						width: 100%;
						max-width: none;
					}
				}
			}

		}

	}


	}

	.right{
		flex: 0 1 40%;
		padding: 0;
		background-color: var(--secondary-color);
		color: #fff;
		padding: 30px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		text-align: center;

		@media (max-width: 979px) {
			flex: 1 1 100%;
			text-align: center;
		}

		& h2{
			font-size: clamp(1.8rem, 3vw, 2.4rem);
			line-height: 1;
			letter-spacing: -1px;
			margin: 0;
			text-wrap: balance;
			text-transform: uppercase;
		}

		& h3{
			font-size: 1.1rem;
			color: var(--primary-color);
			line-height: 1.2;
			margin: 0;
			text-transform: uppercase;
		}

		& p{
			font-size: 0.9rem;
			margin: 0;
		}

		& img{
			max-width: none;
			width: 150%;
			transform: translateX(-16%);

			@media screen and (max-width: 979px){
				max-width: 360px;
				width: 100%;
				transform: translateX(0%);
				margin: 0 auto;
			}

		}

		& a{
			margin: 0 auto;

			@media (max-width: 500px) {
			width: 100%;
			max-width: none;
			}
		}

	}

	}
	}
}