@import "../components/Headers/noImgHeader.css";
@import "../components/stripe-banner-contact-us.css";
@import "../components/box-flip-card.css";
@import "../components/stripe-related-service.css";


.index-container {
	display: none;	
}

/* Intro stripe
---------------------------------------------------*/
	#intro-stripe .stripe-text {
	    width: 55%;
	}
	#intro-stripe .stripe-image {
	    width: 45%;
	    height: 29.167vw; /*560*/
	}

	#intro-stripe .index-container {
		margin-top: 1.563vw !important; /*30*/
	}
	#intro-stripe .index {
	    padding: 1.563vw; /*30*/
		margin: 0 !important;
		width: 85%;
	}
	.index-container {
	    position: relative;
	}
	.index-container svg {
	    position: absolute;
	    bottom: 0;
	    right: 1.563vw; /*30*/
	    height: 83%;
	    filter: invert(92%) sepia(10%) saturate(603%) hue-rotate(42deg) brightness(97%) contrast(93%);
	}
	#intro-stripe .index a {
	    color: var(--color-white) !important;
	    font-family: var(--text-font-bold);
	}
	#intro-stripe .index a:hover {
	    text-decoration: underline;
	    text-underline-offset: 0.208vw; /*4*/
	}

	#intro-stripe h1 {
	    margin-bottom: 0.781vw; /*15*/
	}

/* Description Stripe
----------------------------------------------------*/
	.numbered-boxes {
	    display: flex;
	    flex-flow: wrap;
	    gap: 1.563vw; /*30*/
	    padding-top: 2.083vw; /*40*/
	}
	.numbered-boxes .numbered-box {
	    width: calc(33.3% - 1.042vw); /*20*/
	    border: 1px solid #d5d5d5;
	    height: 8.021vw; /*154*/
	    align-items: center;
	    padding-left: 1.563vw; /*30*/
	    padding-right: 1.302vw; /*25*/
	}
	.numbered-boxes .number span {
		font-family: var(--text-font);
	    width: 1.823vw; /*35*/
	    height: 1.823vw; /*35*/
	    min-width: 29px;
	    min-height: 29px;
	    display: block;
	    background-color: var(--color-orange);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 100%;
	    margin-right: 1.563vw; /*30*/
	}
	.numbered-boxes .number {
	    display: flex;
	    justify-content: center;
	}
	.numbered-boxes .number-title {
	    font-family: var(--text-font-bold) !important;
	    line-height: 1.2 !important;
	}
		/* Half box width
		--------------------------------------------*/
			.half-box .numbered-box {
			    width: calc(50% - 0.7815vw);
			}


/* Steps Stripe
----------------------------------------------------*/
	#steps-stripe .steps {
	    gap: 1.042vw; /*20*/
	}
	#steps-stripe .step {
	    height: 6.25vw; /*120*/
	    width: calc(25% - 0.783vw); /*15*/
	    padding: 0 1.563vw; /*30*/
	    box-shadow: 0px 0px 0.781vw 0px rgb(0 0 0 / 5%); /*0 0 15 0*/
	}
	#steps-stripe .img-pictogram img {
	    width: 3.125vw; /*60*/
	    height: 3.125vw; /*60*/
	    margin-right: 1.042vw; /*20*/
	}
	#steps-stripe .number-title span {
	    display: block;
	}
	#steps-stripe .step-title,
	#steps-stripe .step-title * {
		line-height: 1 !important;
	}
	#steps-stripe .step-title span {
	    font-family: var(--text-font-bold) !important;
	}
	#steps-stripe .step-title span.bold {
		font-family: var(--text-font-bold-ita) !important;
	}


/* Relatex Services
----------------------------------------------------*/
	#related-services .relative-arrow {
		justify-content: flex-end;
	}


/* BG Svg
----------------------------------------------------*/
	main {
	    overflow: hidden;
	}
	main > *:not(header, #related-services) {
	    position: relative;
	    z-index: 2;
	}
	#related-services {
	    position: relative;
	    background-color: #edeee6;
	    z-index: 1;
	}
	#related-services svg {
	    position: absolute;
	    bottom: 48%;
	    left: 0;
	    width: 130vw;
	    fill: #edeee6;
	    min-width: 1800px;
	}

@media screen and (max-width: 1920px) {
	.index a:hover {
	    text-underline-offset: 4px; /*4*/
	}
}

/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {
	#intro-stripe .index {
	    padding: 25px;
	}

	.numbered-boxes .number span {
	    font-size: 15px;
	}

	#steps-stripe .img-pictogram img {
	    width: 40px;
	    height: 40px;
	    margin-right: 12px;
	}
	#steps-stripe .step {
	    padding: 0 18px;
	}	
}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
	#intro-stripe .index-container {
	    margin-top: 25px !important;
	}
	#intro-stripe .stripe-image {
	    height: 32.014vw;
	}

	.numbered-boxes .numbered-box {
	    height: 130px;
	}

	#steps-stripe .step {
	    height: 90px;
	}
	#steps-stripe .step-title.md-sz * {
	    font-size: 16px;
	}
}

/* Small Laptops - Ok until 1151px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	#intro-stripe .stripe-image {
	    height: 37.891vw;
	}

	.numbered-boxes .number span {
	    margin-right: 20px;
	}
	.numbered-boxes .numbered-box {
	    padding-left: 20px;
	    padding-right: 35px;
	}

	#steps-stripe .step-title.md-sz * {
	    font-size: 15px;
	}
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {
	#intro-stripe .stripe-image {
	    height: 37.826vw;
	}

	.numbered-boxes .numbered-box {
	    padding-right: 20px;
	}

	#steps-stripe .step {
	    width: calc(50% - 10px);
	}
	#steps-stripe .steps {
	    gap: 20px;
	}
}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
	#intro-stripe .stripe-container {
	    padding-top: 40px;
	}
	#intro-stripe .stripe-content > * {
	    /*width: 100%;*/
	    /*padding-left: 0;*/
	    /*padding-right: 0;*/
	}
	#intro-stripe .stripe-content .stripe-text {
	    /*order: 2;*/
	}
	#intro-stripe .stripe-content .stripe-image {
	    /*order: 1;*/
	    /*margin-bottom: 40px;*/
	}
	#intro-stripe .stripe-image {
	    height: 41vw;
	}
	#intro-stripe .index-container {
	    margin-top: 20px !important;
	}
	.index-container svg {
	    right: 2em;
	}

	.stripe-container .apply-pad-4 {
	    padding-left: 2em;
	    padding-right: 2em;
	}

	.numbered-boxes {
	    padding-top: 20px;
	    gap: 20px;
	}
	.numbered-boxes .numbered-box {
	    width: calc(50% - 10px);
	}
	.numbered-boxes .number span {
	    font-size: 14px;
	    min-width: 27px;
	    min-height: 27px;
	}
	.numbered-boxes .numbered-box {
	    padding-right: 30px;
	}
	/* Half box width
	--------------------------------------------*/
		.half-box .numbered-box {
		    width: calc(50% - 10px);
		}


	#steps-stripe .img-pictogram img {
	    margin-right: 15px;
	}
	#steps-stripe .step {
	    padding: 0 20px;
	}
	
}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {

	#intro-stripe .stripe-content > * {
	    width: 100%;
	    padding-left: 0;
	    padding-right: 0;
	}
	#intro-stripe .stripe-content .stripe-text {
	    order: 2;
	}
	#intro-stripe .stripe-content .stripe-image {
	    order: 1;
	    /*margin-bottom: 40px;*/
	}


	.stripe-container .apply-pad-4 {
	    padding-left: 0;
	    padding-right: 0;
	}
	#intro-stripe .stripe-container {
	    padding-top: 0;
	}
	#intro-stripe .stripe-content .stripe-image {
	    border-radius: unset;
	    overflow: unset;
	    height: 69.333vw;
	    min-height: 260px;
	    max-height: 350px;
	}
	#intro-stripe .stripe-content .stripe-image img {
	    width: 100vw;
	    margin-left: -20px;
	}
	#intro-stripe h1 {
	    margin-bottom: 10px;
	}
	#intro-stripe .index {
	    padding: 20px;
	}
	#intro-stripe .stripe-content .stripe-image {
	    margin-bottom: 40px;
	}

	#intro-stripe .index-container svg {
	    right: 10px;
	}
	#intro-stripe .index li {
	    margin-bottom: 8px;
	}
	#intro-stripe .index a {
	    font-size: 13px;
	}
	#intro-stripe .index li,
	#intro-stripe .index a {
    	line-height: 1.4;
	}

	.numbered-boxes .numbered-box {
	    width: 100% !important;
	    height: 110px;
	}
	.numbered-boxes,
	#steps-stripe .steps {
	    gap: 15px;
	}
	#steps-stripe .step {
	    width: 100%;
	}
	#steps-stripe .result-box .step-title span {
	    display: initial;
	}
	#steps-stripe .result-box .step-title {
	    padding: 40px 20px;
	}
	#steps-stripe .result-box .step-title,
	#steps-stripe .result-box .step-title * {
	    line-height: 1.4 !important;
	}

	#related-services svg {
	    position: absolute;
	    bottom: 61%;
	    left: 0;
	    width: 130vw;
	    fill: #edeee6;
	    min-width: 1800px;
	}

}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {

}