@import "../components/Headers/homeHeader.css";
@import "../components/stripe-newsletter.css";
@import "../components/box-service.css";
@import "../components/pre-footer.css";

#main section {
	position: relative;
	z-index: 1;
}

/* Services
---------------------------------------------------------------*/
	#services .title-container {
	    display: flex;
	}
	#services h2 {
	    display: inline-block;
	    margin-left: auto;
	}
	#services h2 span {
	    display: block;
	}	
	#services .relative-arrow {
	    justify-content: flex-end;
	    padding-right: 1.563vw; /*30*/
	}

	/* Big services
	------------------------------------------------*/
		#services .big-services-slider .slide-image {
		    height: 39.583vw; /*760*/
		}
		#services .big-services-slider .swiper-slide-container {
		    position: relative;
		}
		#services .big-services-slider .service-icon img {
		    width: 2.708vw; /*52*/
		    height: 3.073vw; /*59*/
		    margin: 1.563vw; /*30*/
		    position: relative;
		    z-index: 1;
		}
		#services .big-services-slider .service-icon:before {
		    content: '';
		    display: block;
		    width: 15.625vw; /*300*/
		    height: 15.625vw; /*300*/
		    background-color: var(--color-white);
		    z-index: 0;
		    position: absolute;
		    transform: rotate(49deg);
		    top: -140%;
		    left: -129%;
		}
		#services .big-services-slider .slide-text {
		    position: absolute;
		    top: 0;
		    left: 0;
		    padding-top: 6.25vw; /*120*/
		    padding-left: 5.729vw; /*110*/
		    z-index: 3;
		}
		#services .big-services-slider .slide-text .btn {
		    margin-top: 1.563vw; /*30*/
		}

	/* Small services
	------------------------------------------------*/
		#services .small-services-slider {
			width: 46.875vw; /*900*/
			margin-top: -25.521vw; /*490*/
			margin-left: auto;
		}
		#services .small-services-slider .swiper-container {
			padding-left: 1.042vw; /*20*/
		}	
		#services .small-services-slider .swiper-wrapper {
		    padding-top: 1.042vw; /*20*/
		    padding-bottom: 1.042vw; /*20*/
		}

		#services .button-container {
		    margin-top: -1.042vw;
		}


/* Choose Atheljo
---------------------------------------------------------------*/
	#choose-atheljo .stripe-container {
	    padding-bottom: 0.521vw; /*10*/
	}
	#choose-atheljo h2 span {
	    display: block;
	}	
	#choose-atheljo .stripe-img {
	    width: 50%;
	    height: 42.708vw; /*820*/
	}
	#choose-atheljo .stripe-text {
	    width: 50%;
	}




@media screen and (max-width: 1920px) {
	#services .big-services-slider .slide-text .btn {
	    margin-top: 30px;
	}
}

/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {

}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
	#services .big-services-slider .slide-text .btn {
	    margin-top: 25px;
	}

	#choose-atheljo .stripe-img {
	    width: 50%;
	    height: 46.944vw;
	}
	#choose-atheljo .stripe-text {
	    padding-right: 30px;
	}
}

/* Small Laptops - Ok until 1151px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	#services .big-services-slider .slide-text .btn {
	    margin-top: 20px;
	}
	#services .big-services-slider .slide-image {
	    height: 45.625vw;
	}

	#choose-atheljo .stripe-container-inner {
	    padding-left: 0;
	}
	#choose-atheljo .stripe-img {
	    height: 55.469vw;
	}
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {

}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
	#services h2 {
	    padding-right: 40px;
	}
	#services .big-services-slider .slide-image {
	    height: 46.661vw;
	    min-height: 400px;
	}
	#services .big-services-slider .slide-text {
	    padding-top: 50px;
	    padding-left: 50px;
	}
	#services .big-services-slider .service-icon img {
	    width: 30px;
	    height: 30px;
	}
	#services .big-services-slider .service-icon:before {
	    width: 150px;
	    height: 150px;
	    top: -172%;
	    left: -128%;
	}

	#services .small-services-slider {
	    width: 62.875vw;
	    margin-top: -33.521vw;
	}

	#choose-atheljo .stripe-text,
	#choose-atheljo .stripe-content {
	    padding-right: 0;
	}

	#newsletter .stripe-container {
	    padding-top: 0;
	}
}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	main#main {
	    overflow: hidden;
	}

	/* Big services
	------------------------------------------------*/
		#services h2 {
		    padding-right: 40px;
		}
		#services .stripe-container {
		    padding-right: 0;
		    padding-bottom: 40px;
		}
		#services .big-services-slider {
		    padding-top: 13px;
		}
		#services .relative-arrow {
		    margin-bottom: 11px;
		    padding-right: 10px;
		}	
		#services .button-container {
		    padding-top: 0;
		}

		#services .big-services-slider .slide-image {
		    height: 370px;
		    max-height: 370px;
		    min-height: unset;
		}
		#services .big-services-slider .swiper-slide {
		    width: 310px;
		    margin-right: 10px;
		    border-radius: 15px;
		}
		#services .big-services-slider .service-icon img {
		    width: 25px;
		    height: 27px;
		    margin: 8px 10px;
		}
		#services .big-services-slider .service-icon:before {
		    width: 120px;
		    height: 120px;
		    top: -164%;
		    left: -130%;
		}
		#services .big-services-slider .slide-text {
		    padding-top: 50px;
		    padding-left: 40px;
		}

		#services .big-services-slider .slide-text .btn {
		    margin-top: 15px;
		}

		.overlay-with-mask:before {
		    mask-image: url(/wp-content/uploads/2024/03/shape-card-azienda_atheljo.png);
		}

	/* Small servies
	------------------------------------------------*/
		#services .small-services-slider {
		    margin-top: 0;
		}	
		#services .small-services-slider .swiper-container {
			display: none;
		}
		#services .overlay-with-mask:before {
		    mask-size: 105% 107%;
		}


	/* Choose Atheljo
	------------------------------------------------*/
		#choose-atheljo .stripe-content > * {
		    width: 100%;
		}
		#choose-atheljo .stripe-content,
		#choose-atheljo .stripe-container-inner,
		#choose-atheljo .stripe-text {
		    padding-right: 0;
		    padding-left: 0;
		}
		#choose-atheljo .stripe-text {
		    padding-right: 20px;
		}
		#choose-atheljo .stripe-img {
		    height: 69.333vw;
		    max-height: 350px;
		    margin-bottom: 30px;
		}


	/* Newsletter
	------------------------------------------------*/
		#newsletter .stripe-container {
		    padding-top: 0;
		}
}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	#services h2 {
	    width: 275px;
	}
}