.counter-one {
position: relative;
display: block;
overflow: hidden;
z-index: 1;
}
.counter-one__shape-3 {
position: absolute;
bottom: -30px;
right: 0;
border-bottom: 75px solid var(--thm-base);
border-right: 93px solid var(--thm-base);
border-top: 75px solid transparent;
border-left: 93px solid transparent;
z-index: 2;
}
.counter-one__shape-4 {
position: absolute;
right: -30px;
bottom: -80px;
opacity: .20;
z-index: 2;
}
.counter-one__shape-4 img {
width: auto;
}
.counter-one .container {
max-width: 1530px;
}
.counter-one__inner {
position: relative;
display: block;
background-color: #f8f7f3;
padding: 75px 165px 75px;
}
.counter-one__shape-2 {
position: absolute;
top: 0;
left: 0;
border-top: 60px solid var(--thm-base);
border-left: 75px solid var(--thm-base);
border-bottom: 60px solid transparent;
border-right: 75px solid transparent;
}
.counter-one__inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: -10000px;
bottom: 0;
background-color: #f8f7f3;
z-index: -1;
}
.counter-one__count-list {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
z-index: 3;
}
.counter-one__count-list li {
position: relative;
display: block;
}
.counter-one__single {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 155px;
height: 155px;
background-color: var(--thm-white);
border-radius: 50%;
flex-direction: column;
}
.counter-one__count-list li:nth-child(2) {
margin-top: 56px;
}
.counter-one__count-list li:nth-child(4) {
margin-top: 56px;
}
.counter-one__single::before {
content: "";
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border: 4px dashed var(--thm-black);
border-radius: 50%;
animation-name: border-round;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.counter-one__single:hover::before {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@keyframes border-round {
0% {
transform: rotate(0deg);
opacity: 1;
}
50% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-360deg);
opacity: 1;
}
}
.counter-one__count-list li:nth-child(2) .counter-one__single::before {
border: 4px dashed var(--thm-base);
}
.counter-one__count-list li:nth-child(4) .counter-one__single::before {
border: 4px dashed var(--thm-base);
}
.counter-one__count {
position: relative;
display: block;
}
.counter-one__count h3 {
font-size: 45px;
font-weight: 600;
line-height: 55px;
}
.counter-one__count-list li p {
font-weight: 500;
letter-spacing: 0.050em;
color: var(--thm-base);
margin-top: 1px;
}
.counter-one__shape-1 {
position: absolute;
left: -135px;
top: 50%;
transform: translateY(-50%);
}
.counter-one__shape-1 img {
width: auto;
} .counter-two {
position: relative;
display: block;
overflow: hidden;
z-index: 1;
}
.counter-two .container {
max-width: 1200px;
}
.counter-two__inner {
position: relative;
display: block;
border-radius: 15px;
padding: 48px 0 19px;
z-index: 1;
}
.counter-two__inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .35;
background: rgb(255, 54, 57);
background: linear-gradient(90deg, rgba(255, 54, 57, 0) 0%, rgba(255, 54, 57, 1) 50%, rgba(255, 54, 57, 0) 100%);
z-index: 3;
}
.counter-two__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 15px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 2;
}
.counter-two__bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .90;
border-radius: 15px;
background-color: var(--thm-black);
z-index: -1;
}
.counter-two__shape-2 {
position: absolute;
top: 0;
left: 0;
right: -10000px;
bottom: 0;
background-color: var(--thm-base);
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
z-index: -1;
}
.counter-two__shape-3 {
position: absolute;
top: -40px;
right: -190px;
opacity: .10;
z-index: 1;
}
.counter-two__shape-3 img {
width: auto;
}
.counter-two__count-list {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
z-index: 3;
}
.counter-two__count-list li {
position: relative;
text-align: center;
flex: 0 0 25%;
max-width: 25%;
width: 100%;
margin-bottom: 21px;
}
.counter-two__count-list li::before {
content: "";
position: absolute;
top: -2px;
right: 0;
bottom: 40px;
width: 3px;
border-radius: 1px;
background-color: var(--thm-base);
}
.counter-two__count-list li:last-child::before {
display: none;
}
.counter-two__count {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
min-height: 121px;
}
.counter-two__shape-1 {
position: absolute;
top: 50%;
left: 50%;
opacity: .10;
transform: translateX(-50%) translateY(-50%);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.counter-two__count-list li:hover .counter-two__shape-1 {
opacity: 1;
}
.counter-two__shape-1 img {
width: auto;
}
.counter-two__count h3 {
font-size: 45px;
font-weight: 700;
line-height: 55px;
color: var(--thm-white);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.counter-two__count-list li:hover .counter-two__count h3 {
color: var(--thm-base);
}
.counter-two__count-list li p {
font-size: 24px;
font-weight: 600;
line-height: 34px;
font-family: var(--thm-font-two);
color: var(--thm-white);
margin-top: 17px;
} .counter-three {
position: relative;
display: block;
padding: 100px 0 70px;
background-color: var(--thm-black);
z-index: 1;
}
.counter-three__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;
}
.counter-three__inner {
position: relative;
display: block;
}
.counter-three__count-list {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.counter-three__count-list li {
position: relative;
flex: 0 0 25%;
max-width: 25%;
width: 100%;
}
.counter-three__content-box {
position: relative;
display: flex;
align-items: center;
padding-top: 30px;
padding-bottom: 37px;
margin-bottom: 30px;
padding-left: 45px;
padding-right: 20px;
z-index: 1;
}
.counter-three__content-box::before {
content: "";
position: absolute;
left: 0px;
right: 0px;
bottom: 0;
top: 0;
background-color: rgba(var(--thm-white-rgb), 0.05);
transform: scaleX(0.7) rotateX(20deg);
opacity: 0;
transition: all 0.4s linear;
z-index: -1;
}
.counter-three__count-list li:hover .counter-three__content-box::before {
transform: scaleX(1.0) rotateX(0deg);
transition: all 0.4s linear;
opacity: 1;
}
.counter-three__count-box {
position: relative;
display: flex;
align-items: center;
z-index: 1;
}
.counter-three__shape-1 {
position: absolute;
top: -24px;
left: -30px;
z-index: -1;
}
.counter-three__shape-1 img {
width: auto;
max-width: none;
}
.counter-three__count-box h3 {
font-size: 45px;
font-weight: 700;
line-height: 45px;
color: var(--thm-white);
text-transform: uppercase;
}
.counter-three__count-text {
font-size: 45px;
font-weight: 700;
line-height: 45px;
color: var(--thm-white);
text-transform: uppercase;
}
.counter-three__plus {
font-size: 38px;
font-weight: 700;
line-height: 45px;
color: var(--thm-white);
text-transform: uppercase;
position: relative;
left: 4px;
top: -3px;
}
.counter-three__text {
margin-left: 43px;
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: var(--thm-white);
position: relative;
display: block;
}
.counter-three__text::before {
content: "";
position: absolute;
top: 11px;
left: -18px;
bottom: 7px;
width: 2px;
background-color: rgba(var(--thm-white-rgb), .15);
} .counter-four {
position: relative;
display: block;
padding: 0 0 120px;
overflow: hidden;
z-index: 1;
}
.counter-four__shape-1 {
position: absolute;
bottom: -50px;
left: 0;
opacity: 0.01;
z-index: -1;
}
.counter-four__shape-1 img {
width: auto;
}
.counter-four__shape-2 {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.counter-four__shape-2 img {
width: auto;
}
.counter-four .container {
max-width: 1200px;
}
.counter-four__left {
position: relative;
display: block;
}
.counter-four__left .section-title {
margin-bottom: 43px;
}
.counter-four__form {
position: relative;
display: block;
margin-right: 127px;
background-color: var(--thm-base);
padding: 47px 45px 55px;
}
.counter-four__form-title {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: var(--thm-white);
padding-left: 55px;
margin-bottom: 26px;
}
.counter-four__form-box {
position: relative;
display: block;
}
.counter-four__form-box .row {
--bs-gutter-x: 20px;
}
.counter-four__input-box {
position: relative;
display: block;
margin-bottom: 15px;
}
.counter-four__input-box input[type="text"],
.counter-four__input-box input[type="email"] {
height: 60px;
width: 100%;
background-color: transparent;
padding-left: 20px;
padding-right: 20px;
outline: none;
font-size: 16px;
color: #f0e8e8;
display: block;
font-weight: 400;
}
.counter-four__input-box textarea {
font-size: 16px;
color: #f0e8e8;
height: 130px;
width: 100%;
background-color: transparent;
padding: 15px 20px 20px;
outline: none;
margin-bottom: 0px;
font-weight: 400;
}
.counter-four__input-box.text-message-box {
height: 130px;
margin-bottom: 20px;
}
.counter-four__btn {
padding: 16px 30px 16px;
background-color: var(--thm-white);
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--thm-black);
width: 100%;
text-align: center;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.counter-four__btn:hover {
background-color: var(--thm-black);
color: var(--thm-white);
}
.counter-four__right {
position: relative;
display: block;
margin-left: -30px;
}
.counter-four__count-list {
position: relative;
display: block;
}
.counter-four__count-list li {
position: relative;
display: block;
}
.counter-four__count-list li+li {
margin-top: 60px;
}
.counter-four__single {
position: relative;
display: flex;
align-items: center;
}
.counter-four__count-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 200px;
width: 100%;
height: 200px;
border: 1px solid #dddddd;
border-radius: 50%;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.counter-four__count-list li:hover .counter-four__count-box {
border: 1px solid var(--thm-base);
}
.counter-four__count-box h3 {
font-size: 45px;
font-weight: 500;
line-height: 45px;
}
.counter-four__count-box span {
font-size: 45px;
font-weight: 500;
line-height: 45px;
color: var(--thm-black);
font-family: var(--thm-font-two);
}
.counter-four__content {
position: relative;
display: block;
margin-left: 45px;
}
.counter-four__title {
font-size: 24px;
font-weight: 500;
line-height: 34px;
}
.counter-four__text {
font-size: 18px;
line-height: 30px;
margin-top: 13px;
}
.margin-left-106 {
margin-left: 100px;
}