.pricing-one {
position: relative;
display: block;
padding: 120px 0 90px;
background-color: var(--thm-black);
overflow: hidden;
z-index: 1;
}
.pricing-one__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;
}
.pricing-one__shape-1 {
position: absolute;
left: 0;
bottom: -250px;
z-index: -1;
;
}
.pricing-one__shape-1 img {
width: auto;
}
.pricing-one__shape-2 {
position: absolute;
top: 53px;
right: 0;
z-index: -1;
;
}
.pricing-one__shape-2 img {
width: auto;
}
.pricing-one__shape-3 {
position: absolute;
top: 42px;
right: 0;
z-index: -1;
}
.pricing-one__shape-3 img {
width: auto;
}
.pricing-one__shape-4 {
position: absolute;
bottom: -190px;
right: 0;
z-index: -1;
}
.pricing-one__shape-4 img {
width: auto;
}
.pricing-one .section-title__title {
color: var(--thm-white);
}
.pricing-one .container {
max-width: 1200px;
}
.pricing-one__single {
position: relative;
display: block;
margin-bottom: 30px;
}
.pricing-one__top {
position: relative;
display: block;
background-color: var(--thm-white);
clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 92%, 0 100%);
text-align: center;
padding: 33px 20px 55px;
}
.pricing-one__top:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: var(--thm-base);
content: "";
transform: perspective(200px) scaleX(0.1) rotateX(90deg) translateZ(-10px);
transform-origin: bottom center;
transition: transform 0.4s linear, transform 0.4s linear;
z-index: -1;
}
.pricing-one__single:hover .pricing-one__top:after {
transform: perspective(200px) scaleX(1.05) rotateX(0deg) translateZ(0);
transition: background-color 0.5s ease;
transition: all 0.5s ease;
}
.pricing-one__sub-title {
font-size: 14px;
line-height: 24px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--thm-black);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.pricing-one__single:hover .pricing-one__sub-title {
color: var(--thm-white);
}
.pricing-one__price {
font-size: 45px;
font-weight: 600;
line-height: 55px;
color: var(--thm-base);
position: relative;
display: inline-block;
border: 3px solid #f7f8f8;
padding: 4px 22px 5px;
margin-top: 13px;
margin-bottom: 22px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.pricing-one__single:hover .pricing-one__price {
color: var(--thm-white);
}
.pricing-one__price span {
font-size: 20px;
font-weight: 500;
line-height: 30px;
color: var(--thm-black);
letter-spacing: 0.2em;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.pricing-one__single:hover .pricing-one__price span {
color: var(--thm-white);
}
.pricing-one__product {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.pricing-one__product li {
position: relative;
display: block;
}
.pricing-one__product li+li {
margin-left: 12px;
}
.pricing-one__product li p {
font-size: 14px;
font-weight: 500;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0.1em;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.pricing-one__single:hover .pricing-one__product li p {
color: var(--thm-white);
}
.pricing-one__bottom {
position: relative;
display: block;
background-color: var(--thm-white);
text-align: center;
padding: 43px 40px 46px;
}
.pricing-one__points {
position: relative;
display: block;
}
.pricing-one__points li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.pricing-one__points li+li {
margin-top: 16px;
}
.pricing-one__points li .icon {
position: relative;
display: inline-block;
}
.pricing-one__points li .icon span {
position: relative;
display: inline-block;
font-size: 12px;
color: var(--thm-base);
font-weight: 900;
}
.pricing-one__points li .text {
position: relative;
display: block;
margin-left: 12px;
}
.pricing-one__btn-box {
position: relative;
display: block;
margin-top: 31px;
}
.pricing-one__btn {
background-color: rgba(var(--thm-base-rgb), .40);
}
.pricing-one__btn::before {
background: var(--thm-base);
}
.pricing-one__btn::after {
background: var(--thm-black);
} .pricing-two {
position: relative;
display: block;
background-color: var(--thm-black);
padding: 120px 0 90px;
z-index: 1;
}
.pricing-two__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;
}
.pricing-two .container {
max-width: 1200px;
}
.pricing-two__left {
position: relative;
display: block;
margin-right: 30px;
}
.pricing-two__single {
position: relative;
display: block;
background-color: var(--thm-white);
text-align: center;
padding: 45px 45px 45px;
border-radius: 15px;
margin-bottom: 30px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.pricing-two__single:hover {
transform: translateY(-10px);
}
.pricing-two__single::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 3px dashed var(--thm-black);
border-radius: 15px;
webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.pricing-two__single:hover::before {
border: 3px dashed var(--thm-base);
}
.pricing-two__price {
font-size: 45px;
font-weight: 600;
line-height: 55px;
color: var(--thm-base);
position: relative;
display: inline-block;
border: 3px dashed var(--thm-black);
padding: 16px 40px 10px;
border-radius: 15px;
}
.pricing-two__price>span {
font-size: 24px;
letter-spacing: 0.2em;
}
.pricing-two__product {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
color: var(--thm-black);
letter-spacing: 0.1em;
margin-top: 30px;
margin-bottom: 27px;
}
.pricing-two__product span {
position: relative;
margin-left: 12px;
margin-right: 12px;
}
.pricing-two__list {
position: relative;
display: block;
}
.pricing-two__list li+li {
margin-top: 16px;
}
.pricing-two__btn-box {
position: relative;
display: block;
margin-top: 33px;
}
.pricing-two__btn {
padding: 20px 37px 19px;
background-color: rgba(var(--thm-base-rgb), .40);
}
.pricing-two__btn:hover {
color: var(--thm-white);
}
.pricing-two__btn::before {
background: var(--thm-base);
}
.pricing-two__btn::after {
background: var(--thm-black);
}
.pricing-two__right {
position: relative;
display: block;
margin-left: -11px;
}
.pricing-two__right .section-title__title {
color: var(--thm-white);
}
.pricing-two__right .section-title {
margin-bottom: 21px;
}
.pricing-two__btn-box-two {
position: relative;
display: block;
margin-top: 34px;
}
.pricing-two__btn-two {
background-color: rgba(var(--thm-base-rgb), .40);
padding: 24px 26px 23px;
}
.pricing-two__btn-two:hover {
color: var(--thm-base);
}
.pricing-two__btn-two::before {
background: var(--thm-base);
}
.pricing-two__btn-two::after {
background: var(--thm-white);
}