.why-you-should {
position: relative;
display: block;
background-color: var(--thm-black);
counter-reset: count;
padding: 120px 0 90px;
z-index: 1;
}
.why-you-should__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.06;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: -1;
}
.why-you-should__shape-1 {
position: absolute;
top: 165px;
left: 0;
opacity: .60;
z-index: -1;
}
.why-you-should__shape-1 img {
width: auto;
}
.why-you-should__shape-2 {
position: absolute;
bottom: 78px;
right: 0;
opacity: .40;
z-index: -1;
}
.why-you-should__shape-2 img {
width: auto;
}
.why-you-should .container {
max-width: 1200px;
}
.why-you-should .section-title__title {
color: var(--thm-white);
}
.why-you-should__single {
position: relative;
display: block;
text-align: center;
padding: 15px 20px 97px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 5px 50px 0px rgba(4, 23, 26, 0.1);
border-radius: 195px;
margin-bottom: 30px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
z-index: 1;
}
.why-you-should__single:hover {
transform: translateY(30px);
}
.why-you-should__single::after {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: 0;
border-radius: 195px;
background-color: var(--thm-black);
background-position: center bottom;
transition-delay: .1s;
transition-timing-function: ease-in-out;
transition-duration: .5s;
transition-property: all;
transform-origin: bottom;
transform-style: preserve-3d;
transform: scaleY(0);
z-index: -1;
}
.why-you-should__single:hover::after {
transform: scaleY(1.0);
}
.why-you-should__single::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -10px;
border-radius: 195px;
background-color: var(--thm-base);
transform: scaleY(0.0);
transform-origin: center;
transform-style: preserve-3d;
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
transform-origin: right center;
z-index: -1;
}
.why-you-should__single:hover::before {
transform: scaleY(1.0);
transform-origin: bottom center;
transition-delay: 500ms;
}
.why-you-should__icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
background-color: rgba(var(--thm-base-rgb), .12);
border-radius: 50%;
margin: 0 auto;
z-index: 1;
}
.why-you-should__icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: rgb(255, 54, 57);
background: linear-gradient(0deg, rgba(255, 54, 57, 1) 0%, rgba(255, 255, 255, 0) 62%);
background-position: center bottom;
transition-delay: .1s;
transition-timing-function: ease-in-out;
transition-duration: .5s;
transition-property: all;
transform-origin: bottom;
transform-style: preserve-3d;
transform: scaleY(0);
z-index: -1;
}
.why-you-should__single:hover .why-you-should__icon::before {
transform: scaleY(1.0);
}
.why-you-should__icon span {
position: relative;
display: inline-block;
font-size: 65px;
color: var(--thm-base);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.why-you-should__single:hover .why-you-should__icon span {
color: var(--thm-white);
}
.why-you-should__title {
font-size: 24px;
font-weight: 600;
line-height: 34px;
margin-top: 32px;
margin-bottom: 8px;
}
.why-you-should__title a {
color: var(--thm-black);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.why-you-should__single:hover .why-you-should__title a {
color: var(--thm-white);
}
.why-you-should__text {
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.why-you-should__single:hover .why-you-should__text {
color: #adafae;
}
.why-you-should__count {
position: relative;
display: block;
}
.why-you-should__count:before {
position: absolute;
top: 17px;
left: 50%;
font-size: 45px;
line-height: 45px;
font-weight: 700;
text-transform: uppercase;
counter-increment: count;
content: "0"counter(count);
transition: all 200ms linear;
transition-delay: 0.1s;
color: rgba(var(--thm-black-rgb), .15);
font-family: var(--thm-font-two);
transform: translateX(-50%);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.why-you-should__single:hover .why-you-should__count:before {
color: rgba(var(--thm-white-rgb), .15);
}