/*---INDEX-HERO---*/
/*---------------*/

.index-hero-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /*padding: 20px 0px;
  margin-top: 20px;*/
  margin-bottom: 40px;
}

.index-hero-container div{
  display:inline-block;
  background: rgb(245,245,246);
  padding: 20px;
  width: 20vw;
}

/* COOL UNDERLINE за h2 */
.accent-border-h2 {
	background-image: linear-gradient(to right, rgba(224, 155, 36, 1.0), rgba(224, 155, 36, 1.0));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 25px 2.5px;
    padding-bottom: 10px;
}

.hero-card {
    justify-items: center;
    align-items: center;
    text-align: center;
    border: #bab8b8;
    border-style: solid;
    border-width: 0px 0px 0px 1px;
}

.hero-card .icon{
    display: block;
    width:3rem;
	height:3rem; 
    stroke: black;
    stroke-width: 0.8; 
}

/* CASES */
/*----------------*/

.cases-container{
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 20px;
}

.cases-container p{
    text-align:center;
}

.cases-card{
    justify-content: center;
    align-items: center;
    border: #bab8b8;
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    width: 10vw;
    padding: 10px;
}

.CasesFirstBorderless{
    border-style: none;
}

.title {
    padding-left: 20px;
}

.cases-card .icon{
    display: block;
    width:2rem;
	height:2rem; 
    stroke: black;
    stroke-width: 0.8; 
}

/*---WORK---*/
/*---------------*/

.work-container{
    display: flex;
    justify-content: center;
}

.work-container div{
    background-image: url('../images/Index/WorkFlow-Landscape.webp'); 
	background-repeat: no-repeat;
	width: 100%;
	aspect-ratio: 1672/575;
	background-position: center bottom;
	background-size:cover;
}

/*--OFFER--*/
/*-----------*/

.offer-container{
    background-color: rgb(245,245,246);
    align-items: center;
    margin-bottom: 20px;
    min-height: 25vh;
    border-style: solid;
    border-color: rgb(224, 155, 36);
    border-width: 1px 0px 1px 0px;
    margin-bottom: 40px;
}

.offer-container .icon{
    display: inline-block;
    width: 4.5rem;
	height:4.5rem; 
    stroke: black;
    stroke-width: 0.5; 
}

.offer-container p{
    font-size: 1rem;
    padding: 0px 10px;
}

/*---CTA---*/
/*-------------*/

.cta {
    display: flex;
    align-items: center;
    justify-content:flex-start;
    background-color:  #f5f0dbfd;
    border-top: 3px solid #D9A441;
    border-bottom: 3px solid #D9A441;
    padding: 20px;
    /*margin-bottom: 30px;*/
}

.cta .cta-text{
    text-align: center;
    flex-grow: 1;
}

.cta h2{
    color: rgb(1, 59, 106);
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.cta p{
    font-size: 1.1rem;
    color: rgb(1, 59, 106);
    margin: 5px 0;
    font-weight: 600;
}

.cta .icon{
    display: block;
    width: 3rem;
    height: 3rem;
    stroke: rgb(1, 59, 106);
    stroke-width: 1; 
}

.cta-icon{
    display: flex;
    /*flex-grow: 1;*/
    width: 15%;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

/*----------------------------------------------------*/
/*--MOBILE--*/
/*---------------------------------------------------*/

@media (max-width: 767px) {
    .index-hero-container{
        flex-direction: column;
        padding: 0px 0px 20px 0px;
    }
    .index-hero-container div{
        display: block;
        width: auto;
        padding: 10px;
    }
    .hero-card {
    border-width: 1px 0px 0px 0px;
    }
    .work-container div{
        background-image: 
            url('../images/Index/WorkFlow-Portrait.webp'); 
            background-position: center center;
            aspect-ratio: 941/1500;
        
    }
    .cases-container{
        flex-direction: column;
        padding-top: 0px;
    }
    .cases-card{
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        border-style: none;
        
    }
    .cases-card p{
        text-align: start;
        padding-left: 10px;
    }
    .offer-container p{
        font-size: 0.8rem;
    }
}



/*--- WORK-VECTOR---*/
/*--------------------------------------*/

.work-container-relative{
		position: relative;
	}
	.work-container-line-absolute{
		position: absolute;
		background-color: rgb(224, 155, 36);
		height:2px;
		top:109px;
		left:20px;
		right:20px;
		z-index:-1;
	}
	.work-container-vector{
		display: flex;
		justify-content:space-between;
		align-items:start;
		padding:20px;
	}
	.work-card{
		display:flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		width: 15vw;
	}
	
	.work-card .icon{
		display: block;
		stroke: rgb(224,155,36);
		width: 50px;
		height: 50px; 
		margin-bottom: 20px;
	}
	.work-circle{
		display: flex;
		justify-content: center;
		align-items: center;
		/*border-style: solid;*/
		border-radius: 50%;
		/*border-color:rgb(224, 155, 36);*/
		width: 40px;
		height: 40px;
		background-color: rgb(224, 155, 36);
		z-index:2;		
	}
	.work-circle p{
		font-size:1rem;
		font-weight: 600;
	}
	.work-card p{
		text-align: center;
		margin: 0px;
	}
	.work-card h2{
		text-align: center;
		margin: 20px 0px;
	}


	.work-circle-start-end{
		align-self: flex-start;
		transform: translate(0px, 85px);
		/*border-style: solid;*/
		border-radius: 50%;
		/*border-color:rgb(224, 155, 36);*/
		width: 10px;
		height: 10px;
		background-color: rgb(224, 155, 36);
		z-index:2;
	}


	@media (max-width: 767px){
		.work-container-line-absolute{
			top:20px;
			bottom: 20px;
			left: 109px;
			width: 2px;
			height: auto;
			right: auto;
			z-index:-1;
		}
		.work-circle-start-end{
			align-self: flex-start;
			transform: translate(85px, 0px);
		}
		.work-container-vector{
			flex-direction: column;
			justify-content:flex-start;
			align-items:start;
			padding:20px;
			margin-bottom: 40px;
			gap: 40px;
		}
		.work-card{
			display:flex;
			flex-direction: row;
			gap:20px;
			justify-content: flex-start;
			align-items: center;
			width: 85vw;
		}
		.work-card .icon{
			
			/*width: 80px;
			height: 80px; */
			margin-bottom: 0px;
		}
		.work-text{
			width: 40vw;
		}
	}