.heading-use-case {
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: 48px;
}
.heading-use-case .has-dot {
margin-bottom: 28px;
}
.heading-use-case .usecase-thumbnail {
width: 100%;
height: 100%;
border-radius: 24px;
overflow: hidden;
}
.use_case-post .entry-content {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 32px;
}
.heading-use-case .usecase-thumbnail img {
width: 100%;
height: 537px;
object-fit: cover;
display: block;
}
.heading-use-case .content {
position: absolute;
top: 50%;
left: 5%;
right: 5%;
transform: translateY(-50%);
background: rgba(20, 20, 30, 0.9);
padding: 30px;
max-width: 480px;
border-radius: 12px;
color: #fff;
}
.heading-use-case .list-cate {
margin-bottom: 10px;
font-family: Departure Mono;
font-weight: 400;
font-size: 10px;
line-height: 16px;
letter-spacing: 0px;
text-transform: uppercase;
}
.heading-use-case .list-cate a {
text-decoration: none;
transition: color 0.3s;
color: var(--theme-secondary-color);
}
.heading-use-case .post-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.3;
color: #fff;
}
.heading-use-case .usecase-excerpt {
font-size: 14px;
line-height: 1.6;
color: #ddd;
} .related-usecase-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
} .wrap-use_case-post .blog-article {
margin-bottom: 24px;
}
.box-icon-text {
padding: 16px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box-icon-text .icon {
margin-bottom: 32px;
display: flex;
justify-content: center;
transition: all 0.8s ease;
}
.box-icon-text .title {
margin-bottom: 6px;
text-align: center;
color: #f4f4f4;
font-size: 16px;
}
.box-icon-text .sub-title {
text-align: center;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.14px;
color: #f4f7f5a3;
}
.box-icon-text:hover .icon {
transform: rotateY(360deg);
}
.box-icon-text .icon {
position: relative;
width: 64px;
height: 64px;
background: #f4f7f503;
border: 1px solid #ffffff1a;
box-shadow: 0px 1px 1px 0px #ffffff2e inset;
box-shadow: 0px 0px 4px 0px #ffffff0f inset;
box-shadow: 0px 0px 8px 0px #ffffff14 inset;
box-shadow: 0px 0px 16px 0px #ffffff1f inset;
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
}
.corner {
position: absolute;
}
.corner::before {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3px;
height: 3px;
background: #fff;
box-shadow: 0px 1px 3px 0px #f4f7f514;
box-shadow: 2px 2px 8px 0px #f4f7f51f;
}
.corner::after {
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ffffff1a;
position: absolute;
z-index: -1;
width: 15px;
height: 15px;
}
.top-left {
top: 0;
left: 0;
border-right: none;
border-bottom: none;
}
.top-right {
top: 0;
right: 0;
border-left: none;
border-bottom: none;
}
.bottom-left {
bottom: 0;
left: 0;
border-right: none;
border-top: none;
}
.bottom-right {
bottom: 0;
right: 0;
border-left: none;
border-top: none;
}
@media (min-width: 1200px) {
.box-icon-text .sub-title {
padding: 0px 32px;
}
}
.grid-box_icon.tf-grid-layout {
display: grid;
column-gap: 15px;
row-gap: 30px;
}
.grid-box_icon.tf-grid-layout {
row-gap: 64px;
}
.grid-box_icon.tf-grid-layout.xl-col-1 {
grid-template-columns: 1fr;
}
.grid-box_icon.tf-grid-layout.xl-col-2 {
grid-template-columns: 1fr 1fr;
}
.grid-box_icon.tf-grid-layout.xl-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-box_icon.tf-grid-layout.xl-col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-box_icon.tf-grid-layout.xl-col-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-box_icon.tf-grid-layout.xl-col-6 {
grid-template-columns: repeat(6, 1fr);
}
.grid-box_icon.tf-grid-layout.xl-col-7 {
grid-template-columns: repeat(7, 1fr);
}
.grid-box_icon.tf-grid-layout {
row-gap: 52px;
}
.grid-box_icon.tf-grid-layout.xl-col-1 {
grid-template-columns: 1fr;
}
.grid-box_icon.tf-grid-layout.xl-col-2 {
grid-template-columns: 1fr 1fr;
}
.grid-box_icon.tf-grid-layout.xl-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-box_icon.tf-grid-layout.xl-col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-box_icon.tf-grid-layout.xl-col-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-box_icon.tf-grid-layout.xl-col-6 {
grid-template-columns: repeat(6, 1fr);
}
.grid-box_icon.tf-grid-layout.xl-col-7 {
grid-template-columns: repeat(7, 1fr);
}
@media (max-width: 992px) {
.grid-box_icon.tf-grid-layout {
column-gap: 30px;
}
.grid-box_icon.tf-grid-layout.lg-col-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid-box_icon.tf-grid-layout.lg-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-box_icon.tf-grid-layout.lg-col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-box_icon.tf-grid-layout.lg-col-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-box_icon.tf-grid-layout.lg-col-6 {
grid-template-columns: repeat(6, 1fr);
}
.grid-box_icon.tf-grid-layout.lg-col-7 {
grid-template-columns: repeat(7, 1fr);
}
}
@media (max-width: 768px) {
.grid-box_icon.tf-grid-layout.md-col-2 {
grid-template-columns: repeat(2, 1fr);
column-gap: 10px;
row-gap: 40px;
}
.grid-box_icon.tf-grid-layout.md-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-box_icon.tf-grid-layout.md-col-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-box_icon.tf-grid-layout.md-col-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-box_icon.tf-grid-layout.md-col-6 {
grid-template-columns: repeat(6, 1fr);
}
.grid-box_icon.tf-grid-layout.md-col-7 {
grid-template-columns: repeat(7, 1fr);
}
}
@media (max-width: 767px) {
.grid-box_icon.tf-grid-layout.lg-col-2 {
grid-template-columns: repeat(2, 1fr);
}
.box-icon-text {
padding: 0px;
}
}
@media (max-width: 576px) {
.grid-box_icon.tf-grid-layout.md-col-2 {
grid-template-columns: repeat(1, 1fr) !important;
}
}