section.howitworks { position: relative; padding: 100px 0; }
section.howitworks:after { content: ''; position: absolute; background: url(image/back-pattern.png) no-repeat center center / cover; width: 100%; height: 100%; left: 0; top: 0; mix-blend-mode: multiply; opacity: 0.1; }
section.howitworks > .container { position: relative; z-index: 1; }
section.howitworks .title-content-wrapper .top-title { opacity: 0.7; }
section.howitworks .listing { margin: 50px 0 0 0; }
section.howitworks .listing .listing-inner { display: flex; flex-flow: row wrap; gap: 30px; }
section.howitworks .listing .listing-inner .list { width: calc((100% - 90px) / 4); }
section.howitworks .listing .listing-inner .list .list-inner { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 25px 25px 50px 25px; transition: 400ms; position: relative; height: 100%; }
section.howitworks .listing .listing-inner .list .list-inner .icon { overflow: hidden; width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; margin: 0 0 20px 0; transition: 400ms; position: relative; }
section.howitworks .listing .listing-inner .list .list-inner .icon img { max-width: 50px; max-height: 50px; transition: 400ms; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; }
section.howitworks .listing .listing-inner .list .list-inner .count { position: absolute; left: 25px; bottom: -20px; background-color: var(--secondarycolor); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50px; transition: 400ms; border: 1px solid rgba(255, 255, 255, 0.2); font-size: 20px; line-height: normal; font-weight: 600; }
section.howitworks .listing .listing-inner .list .list-inner:hover { background-color: var(--secondarycolor); }
section.howitworks .listing .listing-inner .list .list-inner:hover .icon img.normalicon { transform: translate(-50%, -50%)scale(0); }
section.howitworks .listing .listing-inner .list .list-inner:hover .icon { background-color: var(--whitecolor); }
section.howitworks .listing .listing-inner .list .list-inner:hover .count { background-color: var(--whitecolor); color: var(--secondarycolor); border-color: var(--secondarycolor); }
section.howitworks .listing .listing-inner .list .list-inner .icon img.hovericon { transform: scale(0) translate(-50%, -50%); }
section.howitworks .listing .listing-inner .list .list-inner:hover .icon img.hovericon { transform: scale(1) translate(-50%, -50%); }


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

@media screen and (max-width:1199px) {
	section.howitworks { padding: 40px 0 60px 0; }
	section.howitworks .listing { margin: 30px 0 0 0; }
	section.howitworks .listing .listing-inner .list { width: calc((100% - 30px) / 2); }	
}

@media screen and (max-width:767px) {
	section.howitworks .listing .listing-inner { flex-direction: column; }
	section.howitworks .listing .listing-inner .list { width: 100%; }
}









/*

.numberplate .numberplate-inner { border: 2px solid #636363; box-shadow: 2px 4px 20px 0px #0000001A; border-radius: 6px; display: flex; align-items: stretch; }
.numberplate .numberplate-inner .eu-logo { width: 55px; }
.numberplate .numberplate-inner .numberplate-main { width: calc(100% - 55px); padding: 10px; display: flex; align-items: center; justify-content: center; }
.numberplate .numberplate-inner .numberplate-main form .form-row .form-column.numberplate-two-logo { width: 20px; }
.numberplate .numberplate-inner .numberplate-main form .form-row .form-column.numberplate-two-logo .numberplate-two-logo-inner { display: flex; flex-direction: column; gap: 10px; }
.numberplate .numberplate-inner .numberplate-main form .form-row .form-column.numberplate-two-logo .numberplate-two-logo-inner .logo-single img { max-width: 20px; }
.numberplate .numberplate-inner .numberplate-main .numberplate-form form .form-row { display: flex; align-items: center; gap: 0; justify-content: space-between; }
.numberplate .numberplate-inner .numberplate-main .numberplate-form form .form-row input { margin: 0; text-transform: uppercase; font-size: 64px; line-height: normal; padding: 10px 10px; text-align: center; }
.numberplate .numberplate-inner .numberplate-main .numberplate-form form .form-row input::placeholder { color: #c1c1c1; opacity: 1; font-size: 64px; line-height: normal; }
.numberplate .numberplate-inner .eu-logo img { height: 100%; display: flex; align-items: center; justify-content: center; }
.numberplate .numberplate-inner .numberplate-main .numberplate-form { width: 100%; }



.numberplate .numberplate-inner .numberplate-main form .form-row .form-column.w1 { width: 5.95em }
.numberplate .numberplate-inner .numberplate-main form .form-row .form-column.w2 { width: 9.9em }
.numberplate .numberplate-inner .numberplate-main form .form-row .form-column.w3 { width: 13.6em }
.numberplate .numberplate-inner .numberplate-main form .form-row .form-column.w4 { width: 17.85em }*/