/*======= Page Title =======*/
.pricing-tab-btn {
&.nav {
background: $white;
padding: 10px;
li {
a {
border-radius: 0;
padding: 0 35px;
line-height: 60px;
color: #69a1bb;
font-weight: 700;
&.active {
color: $white;
background: $primary-color;
}
}
}
}
&.dark-style {
background-color: #002c5f;
}
}
.pricing-plan-item {
background-size: cover;
background-position: center;
position: relative;
z-index: 5;
padding: 55px 30px 60px;
text-align: center;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $white;
z-index: -1;
@include transition(0.3s);
}
& > * {
@include transition(0.3s);
}
.plan-name {
font-weight: 700;
color: $primary-color;
font-size: 14px;
display: block;
padding-bottom: 10px;
}
.price {
font-size: 16px;
span {
font-size: 40px;
font-weight: 600;
}
}
.plan-duration {
color: $text-color-2;
font-size: 14px;
position: relative;
margin-bottom: 33px;
&::before {
position: absolute;
content: "";
height: 2px;
width: 42px;
left: 50%;
bottom: -20px;
background: $text-color-3;
transform: translateX(-50%);
@include transition(0.3s);
opacity: 0.4;
}
}
p {
font-size: 14px;
color: $text-color-3;
@include transition(0.3s);
}
.plans-btn {
background-color: transparent;
border: 2px solid $border-color;
font-size: 14px;
margin-top: 35px;
width: 100%;
padding: 15px;
font-weight: 700;
color: $primary-color;
}
&.dark-style {
&::before {
background-color: #00152e;
}
.price,
.plan-duration,
.plan-name {
color: $white;
}
.plans-btn {
border-color: #1d3d63;
}
}
&:hover {
.plans-btn {
background-color: $primary-color;
border-color: $primary-color;
color: $white;
}
}
}