.testimonial--card {
 &.one {
 padding: 60px 45px;
 gap: 120px;
 .icon--wrap {
 width: 72px;
 height: 57px;
}
 .user--info {
 .thumb--wrap {
 width: 90px;
 height: 90px;
}
}
}
 &.two {
 border: 1px solid var(--black);
 width: 100%;
 .thumb--wrap {
 width: 145px;
 height: 160px;
 margin-bottom: 60px;
}
.testimonial--card.two {
 padding: 20px 20px;
}
 .description {
 margin-bottom: 35px;
}
}
 &.three {
 padding: 45px 35px;
 width: 100%;
 border-radius: 15px;
 height: 100%;
 .content--wrap {
 height: 100%;
}
 .star--thumb {
 margin-bottom: 45px;
}
 .star--wrap {
 li {
 color: #FF9D00;
}
}
 .description {
 margin-bottom: 35px;
}
 .user--info {
 border: 1px solid var(--black-l-100);
 border-radius: 6px;
 padding: 9px;
}
 .thumb--wrap {
 width: 56px;
 height: 56px;
}
}
 &.four {
 padding: 45px 35px;
 width: 100%;
 border-radius: 5px;
 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 height: 100%;
 .star--thumb {
 margin-bottom: 45px;
}
 .description {
 margin-bottom: 150px;
}
 .thumb--wrap {
 width: 56px;
 height: 56px;
}
}
 &.five {
 padding: 45px 35px;
 width: 380px;
 background: var(--card-bg-four);
 border: 1px solid var(--white);
 box-shadow: 23px 27px 40px rgba(16, 23, 0, 0.08);
 border-radius: 25px;
 .star--thumb {
 margin-bottom: 45px;
}
 .description {
 margin-bottom: 76px;
}
 &.style--one {
 .review--wrap {
 .review--text {
 font-size: 90px;
 margin-bottom: 25px;
}
 .star--wrap {
 margin-bottom: 10px;
 gap: 3px;
}
}
 .user--info {
 .thumb--wrap {
 margin-left: -20px;
}
}
}
}
}
.portfolio--card {
	margin-bottom: 100px;
 .thumb--wrap {
 &.one {
 height: 620px;
}
 &.two {
 height: 892px;
}
 &.three {
 height: 620px;
}
 &.four {
 height: 620px;
}
 &.five {
 height: 620px;
}
 &.six {
 height: 892px;
}
 &.seven {
 height: 620px;
}
 &:hover {
 cursor: none;
}
}
.thumb--cover {
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.blocks-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
}
.blocks {
	overflow: hidden;
	background-color: #000;
	box-sizing: border-box;
}
.view--btn {
	width: 106px;
	height: 106px;
	background-color: var(--white);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform 0.15s linear;
	opacity: 0;
	visibility: hidden;
	z-index: 9;
}
.date--wrap {
	top: 30px;
	left: 30px;
	background-color: var(--white);
	border-radius: 4px;
	padding: 4px 16px;
	opacity: 0;
	transition: 0.3s linear;
	z-index: 9;
 .dot {
 width: 10px;
 height: 10px;
}
}
 &:hover {
 .view--btn {
 opacity: 1;
 visibility: visible;
}
 .date--wrap {
 opacity: 1;
}
}
}
.partner--card {
 &.one {
 .thumb--wrap {
 width: 100%;
 height: 256px;
 border-radius: 10px;
}
}
 &.two {
 .thumb--wrap {
 width: 282px;
 height: 190px;
 border-radius: 10px;
}
}
 &.three {
 width: 278px;
 height: 248px;
 border-radius: 4px;
 flex-shrink: 0;
 .line {
 &.one {
 border-top: 1px solid var(--black-l-100);
 top: 15px;
 left: 0;
 width: 100%;
}
 &.two {
 border-bottom: 1px solid var(--black-l-100);
 bottom: 15px;
 left: 0;
 width: 100%;
}
 &.three {
 border-left: 1px solid var(--black-l-100);
 top: 0px;
 left: 15px;
 height: 100%;
}
 &.four {
 border-left: 1px solid var(--black-l-100);
 top: 0px;
 right: 15px;
 height: 100%;
}
}
}
}
.featured--card {
 .thumb--wrap {
 width: 100%;
 height: 600px;
 border-radius: 10px;
 overflow: hidden;
 img {
 transition: 0.2s linear;
}
}
.tags--wrap {
	gap: 10px;
 .tags {
 border: 1px solid var(--black-l-100);
 border-radius: 4px;
 padding: 4px 15px;
 .dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: var(--black);
}
}
}
.view--btn {
	width: 106px;
	height: 106px;
	background-color: var(--white);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform 0.15s linear;
	opacity: 0;
	visibility: hidden;
}
.date--wrap {
	top: 30px;
	left: 30px;
	background-color: var(--white);
	border-radius: 4px;
	padding: 4px 16px;
	opacity: 0;
	transition: 0.3s linear;
 .dot {
 width: 10px;
 height: 10px;
}
}
 &:hover {
 .view--btn {
 opacity: 1;
 visibility: visible;
}
 .date--wrap {
 opacity: 1;
}
 .thumb--wrap {
 img {
 scale: 1.2;
}
}
}
}
.service--card {
 &.two {
 border-bottom: 1px dashed var(--black-l-200);
 padding: 26px 0;
 margin-bottom: 60px;
 .content--wrap {
 .number {
 font-size: 100px;
 font-weight: 400;
}
 .title {
 font-size: 97px;
 font-weight: 400;
 margin-bottom: 10px;
}
}
 .thumb--wrap {
 width: 100%;
 height: 318px;
 border-radius: 10px;
 img {
 transition: 0.3s linear;
}
 &:hover {
 img {
 scale: 1.1;
}
}
}
 .service-list--wrap {
 .service--list {
 padding: 26px 0;
 border-top: 1px dashed var(--black-l-200);
 &:last-child {
 padding-bottom: 0;
}
}
}
}
 &.three {
 border-bottom: 1px solid var(--black-l-200);
 padding: 45px 0;
 .content--wrap {
 .number {
 font-size: 100px;
 font-weight: 400;
}
 .title {
 font-size: 100px;
 font-weight: 400;
 margin-bottom: 50px;
}
}
 .thumb--wrap {
 width: 100%;
 height: 318px;
 border-radius: 10px;
}
 .service-list--wrap {
 margin-bottom: 35px;
 .service--list {
 padding: 10px 0;
}
}
}
 &.four {
 border-bottom: 1px solid var(--black-l-200);
 padding: 60px 70px 70px 70px;
 border-radius: 25px;
 background-color: #531dff;
 width: 100%;
 -webkit-mask-image: url('../../assets/images/common/mask4.png');
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-size: cover;
 mask-image: url('../../assets/images/common/mask4.png');
 mask-repeat: no-repeat;
 mask-size: cover;
 mask-position: center;
 .content--wrap {
 .title--wrap {
 margin-bottom: 35px;
}
 .title {
 font-size: 60px;
 font-weight: 600;
 margin-bottom: 25px;
}
}
 .thumb--wrap {
 width: 716px;
 height: 575px;
 top: 0;
 right: 0;
}
 .service-list--wrap {
 margin-bottom: 35px;
 gap: 12px;
 display: flex;
 flex-direction: column;
 .service--list {
 padding: 10px 0;
}
}
}
}
 // counter card .counter--card {
 &.one {
 min-height: 342px;
 padding-left: 18px;
 border-bottom: 1px dashed var(--black);
 &::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: 6px;
 border-bottom: 1px dashed var(--black);
 width: 100%;
}
 .title {
 font-size: 172px;
 font-weight: 400;
 line-height: 112px;
 margin-bottom: 50px;
}
}
 &.four {
 .number {
 font-size: 100px;
 margin-bottom: 15px;
}
 .title {
 margin-bottom: 15px;
}
}
 &.five {
 background-color: var(--card-bg-two);
 padding: 32px 58px 45px 58px;
 border-radius: 10px;
 border: 2px solid var(--white);
 .number {
 font-size: 90px;
}
 .title {
 margin-bottom: 25px;
}
 .description {
 line-height: 1.5
}
}
}
.blog--card {
 &.one {
 .thumb--wrap {
 width: 344px;
 height: 630px;
}
 .content--wrap {
 right: 0;
 bottom: 0;
 padding: 45px;
 padding-right: 0;
 width: 428px;
}
 .tags--wrap {
 gap: 10px;
 .tags {
 border: 1px solid var(--black-l-100);
 border-radius: 4px;
 padding: 4px 20px;
 &:hover {
 background-color: var(--black);
 color: var(--white);
 .dot {
 background-color: var(--white);
}
 p {
 color: var(--white);
}
}
}
 .dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: var(--black);
}
}
 .blog--btn {
 svg {
 transition: 0.3s linear;
 margin-left: 4px;
}
 &:hover {
 svg {
 rotate: 45deg;
}
}
}
}
 &.two {
 .content--wrap {
 padding: 25px 0;
}
 .blog--btn {
 svg {
 transition: 0.3s linear;
}
 &:hover {
 svg {
 path {
 stroke: var(--primary);
}
}
}
}
 .thumb--wrap {
 width: 100%;
 height: 375px;
 border-radius: 10px;
 .thumb {
 position: relative;
 overflow: hidden;
 img {
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
 object-fit: cover;
 -webkit-transition: 0.6s;
 transition: 0.6s;
}
 img:nth-child(1) {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1;
 -webkit-transition: 0.6s;
 transition: 0.6s;
 -webkit-transform: translateY(50%) scaleY(2);
 transform: translateY(50%) scaleY(2);
 opacity: 0;
 -webkit-filter: blur(10px);
 filter: blur(10px);
}
}
 .user--thumb {
 bottom: 10px;
 right: 0;
}
}
 .tags--wrap {
 gap: 10px;
 .tags {
 border: 1px solid var(--black-l-100);
 border-radius: 8px;
 padding: 4px 20px;
}
 .dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: var(--black);
}
}
 &:hover {
 .thumb img:nth-child(1) {
 -webkit-transform: translateY(0%) scaleY(1);
 transform: translateY(0%) scaleY(1);
 opacity: 1;
 -webkit-filter: blur(0);
 filter: blur(0);
}
 .thumb img:nth-child(2) {
 -webkit-transform: translateY(-50%) scaleY(2);
 transform: translateY(-50%) scaleY(2);
 opacity: 0;
 -webkit-filter: blur(10px);
 filter: blur(10px);
}
}
}
 &.four {
 padding: 30px;
 border-radius: 5px;
 .thumb--wrap {
 width: 100%;
 height: 280px;
}
 .blog--btn {
 padding: 12px 30px;
 padding-right: 82px;
 border: 1px solid var(--black);
 border-radius: 90px;
 transition: transform 0.3s linear;
 .text {
 transition: transform 0.3s linear;
}
 .icon--wrap {
 width: 52px;
 height: 52px;
 border: 1px solid var(--black);
 top: 0;
 right: 0;
 transition: transform 0.3s linear;
 i {
 font-size: 12px;
}
}
 .icon--wrap_two {
 width: 52px;
 height: 52px;
 border: 1px solid var(--black);
 top: 0;
 left: 0;
 transform: translateX(100%);
 opacity: 0;
 transition: transform 0.3s linear;
 i {
 font-size: 12px;
}
}
 &:hover {
 padding-right: 30px;
 padding-left: 82px;
 .icon--wrap {
 transform: translateX(-100%);
 opacity: 0;
}
 .icon--wrap_two {
 transform: translateX(0);
 opacity: 1;
}
}
}
}
 &.five {
 padding: 20px;
 border-radius: 10px;
 .video--btn {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 109px;
 height: 109px;
 background-color: var(--white-l-700);
 backdrop-filter: blur(6px);
 animation: animate-pulse 3s linear infinite;
 i {
 font-size: 30px;
 color: var(--black);
}
}
 .video--wrap {
 width: 100%;
 height: 398px;
 border-radius: 10px;
 margin-bottom: 20px;
}
 .content--wrap {
 padding: 25px;
}
 .thumb--wrap {
 width: 260px;
 height: 348px;
 border-radius: 10px;
 &.xxl {
 width: 100% !important;
 height: 398px;
 border-radius: 10px;
 margin-bottom: 20px;
 img {
 transition: 0.3s linear;
}
 &:hover {
 img {
 scale: 1.05;
}
}
}
}
 .blog--btn {
 i {
 font-size: 8px;
 color: var(--black);
}
 .text {
 color: var(--black);
}
 transition: 0.3s linear;
 &:hover {
 i {
 color: var(--tertiary) !important;
}
 .text {
 text-decoration: underline;
 color: var(--tertiary) !important;
}
}
}
 .tag--wrap {
 gap: 10px;
 margin-bottom: 25px;
 .tag {
 padding: 4px 20px;
 border-radius: 90px;
 border: 1px solid var(--black-l-200);
 &:hover {
 background-color: var(--black);
 color: var(--white) !important;
}
}
}
}
 &.six {
 a {
 padding: 12px;
 border-radius: 10px;
 background-color: #7070700f;
 backdrop-filter: blur(6px);
 border: 1px solid #460af559;
}
 .thumb--wrap {
 width: 100%;
 height: 180px;
 margin-bottom: 20px;
 border-radius: 8px;
 overflow: hidden;
}
 .btn-style--three {
 padding: 5px 5px 5px 30px;
 font-size: 16px !important;
 .btn--circle {
 width: 34px;
 height: 34px;
}
}
}
 &.masonry {
 .blog--thumb {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 12px;
 overflow: hidden;
}
 .blog-items__card-ribbon {
 width: 100%;
 display: inline-flex;
 gap: 8px;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 position: absolute;
 top: 0;
 padding: 20px;
 z-index: 1;
}
 .blog-items__content {
 position: absolute;
 bottom: 0;
 padding: 20px;
 width: 100%;
 background: linear-gradient(0deg, rgb(19, 15, 17) 0%, rgba(32, 32, 40, 0) 100%);
 overflow: hidden;
 border-radius: 12px;
}
 .blog-items__date {
 font-size: 14px;
 font-weight: 500;
 font-family: var(--body-font);
 color: var(--white-l-900);
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
 .blog-items__title {
 font-size: 24px;
 font-weight: 600;
 color: var(--white);
 margin-bottom: 34px;
 width: 100%;
 text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
 .blog-items__info {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-top: 14px;
 text-shadow: 2px 2px 4px var(--black);
}
 .blog-items__info-image {
 border-radius: 50%;
 height: 40px;
 width: 40px;
 object-fit: cover;
}
 .blog-items__info-title {
 color: var(--white);
 font-size: 16px;
 font-weight: 600;
 margin-bottom: 4px;
}
 .blog-items__info-desc {
 color: var(--white);
 font-size: 14px;
 font-style: italic;
}
}
}
.contact--card {
 &.two {
 padding: 60px 45px;
 border-radius: 10px;
 input {
 background-color: #F1F1F1;
}
 textarea {
 background-color: #F1F1F1;
}
}
 &.four {
 padding: 60px;
 border-radius: 10px;
 .btn--wrap {
 .btn {
 font-size: 26px;
 padding: 27px;
}
}
}
}
.work--card {
 &.one {
 .thumb--wrap {
 width: 100%;
 height: 600px;
 overflow: hidden;
 img {
 transition: 0.3s linear;
}
}
 .content--wrap {
 top: 50%;
 left: 50%;
 transform: translate(-50%, 50%);
 padding: 35px 35px 35px 35px;
 border-radius: 10px;
 width: 513px;
 opacity: 0;
 visibility: hidden;
 transition: 0.3s linear;
 z-index: 9;
 .work--btn {
 width: 46px;
 height: 46px;
}
}
 &:hover {
 .content--wrap {
 opacity: 1;
 visibility: visible;
 transform: translate(-50%, 25%);
}
}
}
 &.four {
 transition: 0.3s linear;
 .thumb--wrap {
 width: 100%;
 margin-bottom: 6px;
 border-radius: 5px;
 background-size: cover;
 background-repeat: no-repeat;
}
}
}
.solution--card {
	border-radius: 25px;
	padding: 35px;
	height: 100%;
 .number--wrap {
 margin-bottom: 76px;
}
.logo--wrap {
	margin-bottom: 70px;
 .logo {
 width: 70px;
 height: 70px;
}
}
.description {
	line-height: 1.5;
}
 &.one {
 background-color: #E4DAF5;
}
 &.two {
 background-color: #CFFFB3;
}
 &.three {
 background-color: #FFC9C9;
}
 &.four {
 background-color: #FDDCA6;
}
}
.step--card {
	background-color: var(--card-bg-three);
	border-radius: 25px;
	border: 1px solid var(--card-bg-three);
	box-shadow: inset 3px 3px 30px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(15px);
	padding: 35px;
 .content--wrap {
 margin-bottom: 25px;
 .number {
 width: 52px;
 height: 52px;
}
 .description {
 color: var(--white-l-600);
}
}
}
.price--card {
	border-radius: 25px;
 .thumb--wrap {
 width: 100%;
 height: 775px;
}
.tag {
	padding: 4px 20px;
	border-radius: 90px;
	margin-bottom: 15px;
}
.name {
	font-size: 50px;
}
.price {
	font-size: 90px;
}
.content--wrap {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--tertiary);
	padding: 120px 70px;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: 0.2s linear;
 .description {
 line-height: 1.5;
}
.bg--thumb {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.3;
}
}
 &.active {
 .content--wrap {
 opacity: 1;
 visibility: visible;
}
}
}
.footer--card {
	padding: 20px 10px;
	border-right: 1px dashed var(--white-l-100);
	height: 100%;
	position: relative;
 &::after {
 content: "";
 position: absolute;
 top: 0;
 right: 4px;
 height: 100%;
 border-right: 1px dashed var(--white-l-100);
}
}
.plan--card {
	padding: 36px 24px 24px 24px;
	border: 1px solid var(--black-l-100);
	height: 100%;
 h6 {
 color: var(--black);
}
p {
	color: var(--black);
}
i {
	color: var(--black);
}
.t-badge--wrap {
	margin-bottom: 20px;
}
.save--badge {
	padding: 8px 16px;
	border-radius: 30px;
	background-color: var(--background-bg);
}
.text--badge {
	background-color: var(--base);
	padding: 2px 8px;
	border-radius: 4px;
}
.btn--wrap {
	margin-bottom: 24px;
}
.heading {
	margin-bottom: 24px;
}
.title--wrap {
	margin-bottom: 32px;
}
.description {
	margin-bottom: 36px;
}
.feature-item--wrap {
	padding: 32px 0px;
 .include--text {
 line-height: 1.5;
 margin-bottom: 28px !important;
}
}
.icon--wrap {
	width: 38px;
	height: 28px;
	border-radius: 60px;
	background-color: var(--black);
 i {
 color: var(--white);
}
}
 &.bg--black {
 .icon--wrap {
 background-color: var(--white);
 i {
 color: var(--black);
}
}
}
.tags--wrap {
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	border: 1px solid hsl(var(--base-two)/.3);
	padding: 10px 20px;
	border-radius: 30px;
	background-color: hsl(var(--background-bg));
}
}
.plan--card .price-m {
	opacity: 0;
	transform: translateY(100%);
}
.plan--card .price-y {
	opacity: 1;
 transition: all .5s cubic-bezier(.25, 1.2, .5, 1);
}
.plan--card.monthly-active .price-m {
	opacity: 1;
 transition: all .5s cubic-bezier(.25, 1.2, .5, 1);
	transform: translateY(0%);
}
.plan--card.monthly-active .price-y {
	opacity: 0;
	transform: translateY(-100%);
}
.plan--card .save--badge {
	opacity: 1;
	transform: translateY(0%);
 transition: all .5s cubic-bezier(.25, 1.2, .5, 1);
}
.plan--card.monthly-active .save--badge {
	opacity: 0;
	transform: translateY(-100%);
 transition: all .5s cubic-bezier(.25, 1.2, .5, 1);
}
.plan--card .t-badge--wrap .title {
	top: 0;
	left: 0;
}
.plan--card .t-badge--wrap .save--badge {
	top: 0;
	right: 0;
}
.t-badge--wrap {
	height: 38px;
}
.team--card {
 .thumb--wrap {
 width: 100%;
 height: 610px;
 border-radius: 10px;
 margin-bottom: 20px;
 img {
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
 object-fit: cover;
 -webkit-transition: 0.6s;
 transition: 0.6s;
}
 img:nth-child(1) {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1;
 -webkit-transition: 0.6s;
 transition: 0.6s;
 -webkit-transform: translateY(50%) scaleY(2);
 transform: translateY(50%) scaleY(2);
 opacity: 0;
 -webkit-filter: blur(10px);
 filter: blur(10px);
}
 &:hover {
 img:nth-child(1) {
 -webkit-transform: translateY(0%) scaleY(1);
 transform: translateY(0%) scaleY(1);
 opacity: 1;
 -webkit-filter: blur(0);
 filter: blur(0);
}
 img:nth-child(2) {
 -webkit-transform: translateY(-50%) scaleY(2);
 transform: translateY(-50%) scaleY(2);
 opacity: 0;
 -webkit-filter: blur(10px);
 filter: blur(10px);
}
}
}
.content--wrap {
	padding: 30px;
	border-radius: 10px;
}
 &.two {
 position: relative;
 .content--wrap {
 position: absolute;
 left: 50%;
 bottom: 16px;
 width: 94%;
 z-index: 9;
 transform: translate(-50%, 0%);
 backdrop-filter: blur(16px);
 background-color: var(--white-l-200);
 border: 1px solid var(--white-l-100);
}
 .social--info {
 a {
 border: 1px solid var(--white-l-100);
 color: var(--white);
 &:hover {
 color: var(--primary);
 border: 1px solid var(--primary);
}
}
}
}
.social--info {
 a {
 padding: 4px 20px;
 border-radius: 90px;
 border: 1px solid var(--black-l-100);
 font-size: 15px;
}
}
}
.faq--card {
	padding: 45px;
	border: 1px solid var(--black-l-100);
	border-radius: 10px;
 .thumb--wrap {
 width: 160px;
 height: 160px;
 border-radius: 10px;
 margin-bottom: 35px;
}
.content--wrap {
	margin-bottom: 155px;
 h6 {
 margin-bottom: 25px;
}
p {
	line-height: 28px;
}
}
}
.chart--card {
	height: 240px;
	padding: 24px;
	border-radius: 10px;
 &.one {
 bottom: 45px;
 left: 45px;
 h6 {
 font-size: 12px;
}
 .bar {
 span {
 width: 20px;
 height: 0px;
 border-radius: 3px;
}
 p {
 font-size: 10px;
}
}
}
 &.two {
 top: 45px;
 left: 45px;
 .bar--wrap {
 height: 151px;
}
 .dash--wrap {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 .dash {
 border-bottom: 1px dashed var(--black-l-100);
}
}
 h6 {
 font-size: 12px;
}
 .tag {
 font-size: 12px;
 &::after {
 content: "";
 position: absolute;
 top: 50%;
 left: -6px;
 transform: translate(-50%, -50%);
 width: 8px;
 height: 6px;
}
 &.one {
 &::after {
 background-color: var(--tertiary);
}
}
 &.two {
 &::after {
 background-color: var(--secondary);
}
}
}
 .bar--two {
 span {
 width: 16px;
 height: 0px;
 border-radius: 3px;
}
 p {
 font-size: 10px;
}
}
}
}
.progress--card {
	width: 255px;
	height: 140px;
	padding: 24px;
	border-radius: 10px;
 .content--wrap {
 p {
 font-size: 12px;
 margin-bottom: 12px;
}
}
.circle {
	width: 36px !important;
	height: 36px !important;
}
.progress-bar--wrap {
 p {
 font-size: 12px;
}
}
.progress--bar {
	background-color: #E5E7E6;
	width: 100%;
	height: 8px;
	border-radius: 60px;
 .bar {
 width: 0;
 height: 8px;
 border-radius: 60px;
}
}
 &.one {
 bottom: 70px;
 right: 70px;
}
}
.work-card--wrap {
	transform: perspective(700px);
	transform-style: preserve-3d;
	width: 100%;
	height: 377px;
}
.contact-card--two {
	background: var(--white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	padding: 35px;
 .social--list {
 a {
 width: 46px;
 height: 46px;
 border-radius: 50%;
 border: 1px solid var(--black);
 &:hover {
 background: var(--primary);
 border: 1px solid var(--primary);
 i {
 color: var(--white);
}
}
}
}
p {
	line-height: 28px;
}
h6 {
	margin-bottom: 20px;
}
}
.comment--box {
	padding: 60px;
	border: 1px solid var(--black-l-100);
 input {
 background: #F8F7F3;
 border-radius: 10px;
 &:focus {
 background: #F8F7F3;
}
}
textarea {
	background: #F8F7F3;
	border-radius: 10px;
 &:focus {
 background: #F8F7F3;
}
}
.single-comment {
	padding: 27px 0px 0px 16px;
 &.nested {
 padding-left: 30px;
 margin-left: 50px;
 border-left: 1px dashed var(--black-l-300);
 &.two {
 padding-left: 30px;
 margin-left: 100px;
 border-left: 1px dashed var(--black-l-300);
}
}
.auth-info {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 20px;
	flex-wrap: wrap;
 .user-thumb--wrap {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 .user-thumb {
 width: 70px;
 height: 70px;
 border-radius: 50%;
 overflow: hidden;
}
}
i {
	font-size: 6px;
}
.time-status {
	color: var(--black-l-700);
	font-weight: 500;
}
}
.comment-text {
	margin-left: 32px;
	position: relative;
}
}
}
.base--card {
	padding: 20px;
	border-radius: 10px;
}
.card--holder {
 &.card--one {
 height: 300px;
}
 &.card--two {
 height: 450px;
}
 &.card--three {
 height: 550px;
}
}