/* how-work  */
.how-work { padding: 100px 0; background-color: #f5f5f5a6; }
.how-work .how-work-wrapper { text-align: center; }
.how-work .how-work-step-wrapper { margin: 33px 0; display: flex; gap: 20px; }
.how-work .how-work-step-item { position: relative; height: 480px; border-radius: 10px; overflow: hidden; }
.how-work .how-work-step-details { position: absolute; bottom: 0; color: var(--color-white); text-align: left; padding: 10px; display: flex; align-items: center; flex-direction: column; gap: 15px; }
.how-work .how-work-step-img { border-radius: 10px; height: 100%; width: 100%; object-fit: cover; }
.how-work .how-work-step-item::before { content: ''; width: 100%; height: 200px; position: absolute; left: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000a6 100%); border-radius: 10px; }
.how-work .how-work-step-title { color: var(--color-white); }
.how-work .how-work-step-count { background-color: var(--color-red); width: 60px; height: 60px; display: block; border-radius: 50%; align-content: center; justify-items: center; font-size: 32px; line-height: 1; font-weight: 800; text-align: center; }
.how-work .how-work-step-desc { height: 0; transition: all 0.5s; overflow: hidden; transform: translateY(100px); transition-delay: 1s; }
.how-work .how-work-step-item.hover .how-work-step-desc { transform: translateY(0); height: auto; transition: all 0.5s; transition-delay: 0s; }
.how-work .how-work-step-item.hover { width: calc(100% - 440px); }
.how-work .how-work-step-item { width: 200px; transition: all 0.5s; }
.how-work .how-work-step-item.hover .how-work-step-title { font-size: 32px; text-align: left; }
.how-work .how-work-step-title { font-size: 22px; text-align: center; }
.how-work .how-work-step-item.hover .how-work-step-details { padding: 50px; align-items: flex-start; }
.how-work .how-work-step-item.hover::before { height: 100%;     background: #00000080;}

@media (max-width:1280px) {
	.how-work .how-work-step-item.hover .how-work-step-title { font-size: 28px; }
	.how-work .how-work-step-title { font-size: 20px; }
	.how-work .how-work-step-item.hover .how-work-step-details { padding: 30px; }
}

@media (max-width:992px) {
	.how-work { padding: 50px 0; }
	.how-work .how-work-step-wrapper { flex-direction: column; }
	.how-work .how-work-step-item.hover, .how-work .how-work-step-item { width: 100%; }
	.how-work .how-work-step-details { padding: 20px; align-items: flex-start; }
	.how-work .how-work-step-item.hover .how-work-step-details { padding: 20px; }
	.how-work .how-work-step-desc { transform: translateY(0); height: auto; transition: all 0.5s; transition-delay: 0s; }
	.how-work .how-work-step-item.hover .how-work-step-title { font-size: 24px; }
	.how-work .how-work-step-title { font-size: 24px; text-align: left; }
	.how-work .how-work-step-item::before{height: 100%;}
	.how-work .how-work-step-item.hover::before{background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000a6 100%);}
}

@media (max-width:575px) {
	.how-work .how-work-step-count { width: 50px; height: 50px; font-size: 26px; }
	.how-work .how-work-step-item.hover .how-work-step-title { font-size: 20px; }
	.how-work .how-work-step-title { font-size: 20px; }
	.how-work .how-work-step-details { padding: 10px; }
	.how-work .how-work-step-item.hover .how-work-step-details { padding: 10px; }
	.how-work .how-work-step-item { height: 400px; }
}
/* how-work  */