@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-heading {
flex-wrap: wrap;
}
}
.tp-portfolio-heading .tp-section-subtitle {
transform: translateY(20px);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-heading .tp-section-subtitle {
transform: translateY(-15px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-heading .tp-blog-title img {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-inner-box {
padding-bottom: 50px;
}
}
.tp-portfolio-inner-item:hover .tp-portfolio-inner-thumb img {
transform: scale(1.1);
}
.tp-portfolio-inner-thumb {
overflow: hidden;
margin-bottom: 26px;
border-radius: 20px;
}
.tp-portfolio-inner-thumb img {
width: 100%;
transition: 0.9s;
border-radius: 20px;
}
.tp-portfolio-inner-content span {
font-size: 16px;
font-weight: 500;
display: inline-block;
color: rgba(255, 255, 255, 0.6);
}
.tp-portfolio-inner-title {
font-size: 34px;
font-weight: 600;
line-height: 1;
letter-spacing: -1.36px;
color: var(--tp-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-inner-title {
font-size: 30px;
}
}
.tp-portfolio-inner-title.fs-30 {
font-size: 30px;
}
.tp-portfolio-inner-tab-wrap {
padding-left: 22%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-inner-tab-wrap {
padding-left: 0;
}
}
.tp-portfolio-inner-tab-wrap nav .nav-tabs {
border-bottom: none;
}
.tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link {
font-size: 15px;
font-weight: 600;
padding: 6px 25px;
margin-right: 10px;
margin-bottom: 20px;
border-radius: 30px;
display: inline-block;
color: var(--tp-common-white);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link.active, .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link:hover {
color: #020202;
}
.tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link:hover {
background-color: var(--tp-common-white);
}
.tp-portfolio-metro-shape {
position: absolute;
bottom: 26%;
left: 40%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-metro-shape {
display: none;
}
}
.tp-portfolio-metro-shape span {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: rgba(224, 238, 238, 0.8);
}
.tp-portfolio-metro-shape span svg {
margin-right: 7px;
}
.tp-portfolio-metro-sub .tp-section-subtitle-clash {
color: #c5fcfc;
}
@media (max-width: 767px) {
.tp-portfolio-metro-social {
padding-bottom: 0;
}
}
.tp-portfolio-metro-social a {
font-size: 14px;
font-weight: 600;
color: #E0EEEE;
padding: 1px 18px;
margin-bottom: 10px;
border-radius: 30px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-portfolio-metro-social a:hover {
color: #020202;
background-color: #c5fcfc;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-metro-footer {
padding-top: 70px;
}
}
@media (max-width: 767px) {
.tp-portfolio-metro-footer {
padding-top: 0;
}
}
@media (max-width: 767px) {
.tp-portfolio-masonry-heading {
padding-bottom: 40px;
}
}
.tp-portfolio-masonry-big-text {
font-size: 305px;
font-weight: 800;
line-height: 0.8;
text-align: center;
letter-spacing: -11.5px;
text-transform: uppercase;
color: var(--tp-common-white);
}
@media only screen and (min-width: 1801px) and (max-width: 1850px) {
.tp-portfolio-masonry-big-text {
font-size: 300px;
letter-spacing: -10.5px;
}
}
@media only screen and (min-width: 1701px) and (max-width: 1800px) {
.tp-portfolio-masonry-big-text {
font-size: 285px;
letter-spacing: -10.5px;
}
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
.tp-portfolio-masonry-big-text {
font-size: 268px;
letter-spacing: -10.5px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-portfolio-masonry-big-text {
font-size: 235px;
letter-spacing: -10.5px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-portfolio-masonry-big-text {
font-size: 190px;
letter-spacing: -8.5px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-masonry-big-text {
font-size: 140px;
letter-spacing: -5.5px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-masonry-big-text {
font-size: 100px;
letter-spacing: 0;
}
}
@media (max-width: 767px) {
.tp-portfolio-masonry-big-text {
font-size: 50px;
letter-spacing: 0;
}
}
.tp-portfolio-masonry-wrap {
padding-bottom: 125px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-masonry-wrap {
padding-bottom: 60px;
}
}
.tp-portfolio-masonry-top-left {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-masonry-top-left {
display: none;
}
}
.tp-portfolio-masonry-top-left span {
font-size: 14px;
font-weight: 600;
line-height: 1;
display: inline-block;
letter-spacing: -0.14px;
text-transform: uppercase;
color: var(--tp-common-white);
}
.tp-portfolio-masonry-top-right p {
font-size: 26px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 30px;
letter-spacing: -0.52px;
color: var(--tp-common-white);
}
@media (max-width: 767px) {
.tp-portfolio-masonry-top-right p {
font-size: 17px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-masonry-top-right p br {
display: none;
}
}
.tp-portfolio-masonry-top-right span {
position: relative;
font-size: 14px;
font-weight: 700;
padding-left: 18px;
margin-bottom: 50px;
display: inline-block;
letter-spacing: -0.14px;
text-transform: uppercase;
color: var(--tp-common-white);
}
.tp-portfolio-masonry-top-right span::after {
position: absolute;
content: "";
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--tp-common-red-3);
}
.tp-portfolio-masonry-social a {
font-size: 15px;
font-weight: 600;
padding: 3px 13px;
margin-right: 10px;
border-radius: 30px;
display: inline-block;
color: var(--tp-common-white);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767px) {
.tp-portfolio-masonry-social a {
margin-bottom: 15px;
}
}
.tp-portfolio-masonry-social a:hover {
color: #020202;
background-color: var(--tp-common-white);
}
.tp-portfolio-masonry-grid-heading span {
position: relative;
font-size: 14px;
font-weight: 700;
padding-left: 18px;
display: inline-block;
letter-spacing: -0.14px;
text-transform: uppercase;
color: var(--tp-common-white);
}
.tp-portfolio-masonry-grid-heading span::after {
position: absolute;
content: "";
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--tp-common-white);
}
.tp-portfolio-masonry-grid-item:hover .tp-portfolio-masonry-grid-thumb img {
transform: scale(1.1);
}
.tp-portfolio-masonry-grid-thumb {
overflow: hidden;
border-radius: 14px;
}
.tp-portfolio-masonry-grid-thumb img {
width: 100%;
transition: 0.9s;
border-radius: 14px;
}
.tp-portfolio-masonry-grid-content {
padding: 20px 0 0;
}
.tp-portfolio-masonry-grid-title {
font-size: 26px;
font-weight: 600;
line-height: 1;
letter-spacing: -1.04px;
color: var(--tp-common-white);
}
.tp-portfolio-masonry-grid-categories span {
font-size: 14px;
font-weight: 600;
padding: 4px 26px;
position: relative;
border-radius: 30px;
margin-bottom: 10px;
display: inline-block;
color: var(--tp-common-white);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-portfolio-masonry-grid-categories span:not(:last-of-type) {
margin-right: 8px;
}
.tp-portfolio-masonry-grid-categories span::after {
content: "";
left: 10px;
top: 14px;
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
background-color: var(--tp-common-red-3);
}
.tp-portfolio-masonry-grid-bottom {
width: 340px;
overflow: hidden;
border-radius: 30px;
text-align: center;
margin: 0 auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-details-1-area {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-details-1-ptb {
padding-bottom: 80px;
}
}
.tp-portfolio-details-1-banner {
height: 760px;
overflow: hidden;
border-radius: 14px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-portfolio-details-1-banner {
height: 680px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-banner {
height: 600px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-details-1-banner {
height: 500px;
}
}
@media (max-width: 767px) {
.tp-portfolio-details-1-banner {
height: 250px;
}
}
.tp-portfolio-details-1-banner img {
width: 100%;
margin-top: -150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-banner img {
margin-top: -100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-details-1-banner img {
margin-top: -20px;
}
}
@media (max-width: 767px) {
.tp-portfolio-details-1-banner img {
margin-top: -50px;
}
}
.tp-portfolio-details-1-banner.hight {
height: 1040px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-portfolio-details-1-banner.hight {
height: 680px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-banner.hight {
height: 600px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-details-1-banner.hight {
height: 500px;
}
}
@media (max-width: 767px) {
.tp-portfolio-details-1-banner.hight {
height: 250px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-details-1-heading {
padding-bottom: 40px;
}
}
.tp-portfolio-details-1-sub {
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
display: inline-block;
letter-spacing: -0.32px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.tp-portfolio-details-1-title {
font-size: 80px;
font-weight: 600;
line-height: 1;
margin-bottom: 25px;
letter-spacing: -1.6px;
text-transform: uppercase;
color: var(--tp-common-white);
font-family: var(--tp-ff-clash-semibold);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-portfolio-details-1-title {
font-size: 72px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-details-1-title {
font-size: 60px;
}
}
@media (max-width: 767px) {
.tp-portfolio-details-1-title {
font-size: 52px;
}
}
.tp-portfolio-details-1-content {
padding-left: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-details-1-content {
padding-left: 0;
}
}
.tp-portfolio-details-1-content p {
font-size: 18px;
font-weight: 500;
line-height: 26px;
margin-bottom: 45px;
color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-details-1-content p br {
display: none;
}
}
.tp-portfolio-details-1-list ul li {
font-size: 16px;
font-weight: 600;
list-style: none;
margin-bottom: 16px;
padding-bottom: 16px;
letter-spacing: -0.32px;
text-transform: uppercase;
color: var(--tp-common-white);
}
.tp-portfolio-details-1-list ul li:not(:last-of-type) {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-portfolio-details-1-list ul li span {
width: 120px;
font-weight: 500;
display: inline-block;
color: rgba(249, 244, 232, 0.6);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-thumb-ptb {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-details-1-thumb-ptb {
padding-bottom: 80px;
}
}
.tp-portfolio-details-1-thumb-1, .tp-portfolio-details-1-thumb-2, .tp-portfolio-details-1-thumb-3, .tp-portfolio-details-1-thumb-4, .tp-portfolio-details-1-thumb-5 {
overflow: hidden;
border-radius: 14px;
}
.tp-portfolio-details-1-thumb-1 img, .tp-portfolio-details-1-thumb-2 img, .tp-portfolio-details-1-thumb-3 img, .tp-portfolio-details-1-thumb-4 img, .tp-portfolio-details-1-thumb-5 img {
width: 100%;
border-radius: 14px;
}
.tp-portfolio-details-1-thumb-1 {
height: 950px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-portfolio-details-1-thumb-1 {
height: 680px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-thumb-1 {
height: 600px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-details-1-thumb-1 {
height: 500px;
}
}
@media (max-width: 767px) {
.tp-portfolio-details-1-thumb-1 {
height: 250px;
}
}
.tp-portfolio-details-1-thumb-2, .tp-portfolio-details-1-thumb-3 {
height: 800px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-portfolio-details-1-thumb-2, .tp-portfolio-details-1-thumb-3 {
height: 580px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-thumb-2, .tp-portfolio-details-1-thumb-3 {
height: 470px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-details-1-thumb-2, .tp-portfolio-details-1-thumb-3 {
height: 450px;
}
}
@media (max-width: 767px) {
.tp-portfolio-details-1-thumb-2, .tp-portfolio-details-1-thumb-3 {
height: 250px;
}
}
.tp-portfolio-details-1-thumb-2 img, .tp-portfolio-details-1-thumb-3 img {
margin-top: -100px;
}
.tp-portfolio-details-1-thumb-4, .tp-portfolio-details-1-thumb-5 {
height: 680px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-portfolio-details-1-thumb-4, .tp-portfolio-details-1-thumb-5 {
height: 550px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-thumb-4, .tp-portfolio-details-1-thumb-5 {
height: 420px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-portfolio-details-1-thumb-4, .tp-portfolio-details-1-thumb-5 {
height: 450px;
}
}
@media (max-width: 767px) {
.tp-portfolio-details-1-thumb-4, .tp-portfolio-details-1-thumb-5 {
height: 250px;
}
}
.tp-portfolio-details-1-thumb-4 img, .tp-portfolio-details-1-thumb-5 img {
margin-top: -100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-thumb-4 img, .tp-portfolio-details-1-thumb-5 img {
margin-top: -60px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-details-1-about-ptb {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-portfolio-details-1-about-ptb {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-1-about-heading {
padding-bottom: 30px;
}
}
.tp-pd-1-about-title {
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
color: var(--tp-common-white);
font-family: var(--tp-ff-clash-medium);
}
.tp-pd-1-about-title svg {
margin-left: 5px;
}
.tp-pd-1-about-text {
font-size: 32px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 65px;
text-transform: uppercase;
color: var(--tp-common-white);
font-family: var(--tp-ff-clash-semibold);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-1-about-text {
font-size: 30px;
margin-bottom: 40px;
}
}
.tp-pd-1-about-text.color-cng {
color: #E0EEEE;
font-family: var(--tp-ff-inter);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-1-about-text.color-cng br {
display: none;
}
}
.tp-pd-1-about-list {
display: inline-block;
}
.tp-pd-1-about-list ul li {
position: relative;
font-size: 18px;
font-weight: 500;
list-style: none;
float: left;
width: 50%;
padding-left: 18px;
margin-bottom: 14px;
color: var(--tp-common-white);
}
@media (max-width: 767px) {
.tp-pd-1-about-list ul li {
width: 100%;
float: none;
}
}
.tp-pd-1-about-list ul li::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
top: 10px;
left: 0;
border-radius: 50%;
background-color: var(--tp-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-1-work-ptb {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-1-work-ptb {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-1-work-heading {
padding-bottom: 30px;
}
}
.tp-pd-1-work-title {
font-size: 140px;
font-weight: 700;
line-height: 0.8;
letter-spacing: -4.2px;
text-transform: uppercase;
color: var(--tp-common-white);
font-family: var(--tp-ff-clash-semibold);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-1-work-title {
font-size: 110px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-1-work-title {
font-size: 100px;
}
}
@media (max-width: 767px) {
.tp-pd-1-work-title {
font-size: 60px;
letter-spacing: 0;
}
}
.tp-pd-1-work-title.ff-clash {
color: #e0eeee;
text-transform: lowercase;
font-family: var(--tp-ff-dirtyline);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-1-work-content {
padding-left: 0;
}
}
.tp-pd-1-work-content p {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.4px;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 767px) {
.tp-pd-1-work-content p br {
display: none;
}
}
.tp-pd-1-work-item {
display: flex;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-pd-1-work-item-title {
width: 130px;
font-size: 50px;
font-weight: 500;
margin-right: 52px;
color: var(--tp-common-white);
font-family: var(--tp-ff-clash-semibold);
}
@media (max-width: 767px) {
.tp-pd-1-work-item-title {
font-size: 45px;
margin-right: 35px;
}
}
.tp-pd-1-work-item-title i {
font-style: normal;
}
.tp-pd-1-work-item-text span {
font-size: 20px;
font-weight: 400;
letter-spacing: -0.4px;
color: rgba(255, 255, 255, 0.6);
}
.tp-pd-1-np-ptb {
padding-bottom: 240px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-1-np-ptb {
padding-bottom: 170px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-1-np-ptb {
padding-bottom: 150px;
}
}
@media (max-width: 767px) {
.tp-pd-1-np-ptb {
padding-bottom: 120px;
}
}
.tp-pd-1-np-title {
font-size: 100px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
color: var(--tp-common-white);
font-family: var(--tp-ff-clash-semibold);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-1-np-title {
font-size: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-1-np-title {
font-size: 70px;
}
}
@media (max-width: 767px) {
.tp-pd-1-np-title {
font-size: 45px;
}
}
.tp-pd-1-np-box {
padding: 20px 0;
}
.tp-pd-1-np-box.hover-reveal-item .tp-award-reveal-img {
width: 520px;
height: 360px;
object-fit: cover;
mix-blend-mode: difference;
}
@media (max-width: 767px) {
.tp-pd-1-np-box.hover-reveal-item .tp-award-reveal-img {
height: 260px;
width: 220px;
background-position: center;
}
}
.tp-pd-1-np-content span {
font-size: 30px;
font-weight: 500;
display: block;
margin-bottom: 30px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.2);
font-family: var(--tp-ff-clash-semibold);
}
.tp-pd-1-np-content p {
font-size: 20px;
font-weight: 500;
line-height: 30px;
letter-spacing: -0.4px;
color: rgba(255, 255, 255, 0.2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-ptb {
padding-top: 150px;
}
}
@media (max-width: 767px) {
.tp-pd-2-ptb {
padding-bottom: 50px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-2-area {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-area {
padding-bottom: 80px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-2-top {
padding-bottom: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-top {
padding-bottom: 40px;
}
}
.tp-pd-2-title {
font-size: 140px;
font-weight: 700;
line-height: 1;
letter-spacing: -7px;
color: var(--tp-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-2-title {
font-size: 110px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-2-title {
font-size: 100px;
letter-spacing: 0;
}
}
@media (max-width: 767px) {
.tp-pd-2-title {
font-size: 60px;
letter-spacing: 0;
}
}
.tp-pd-2-categories span {
font-size: 14px;
font-weight: 600;
padding: 4px 24px;
position: relative;
border-radius: 30px;
margin-right: 10px;
display: inline-block;
color: var(--tp-common-white);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-pd-2-categories span::before {
position: absolute;
top: 15px;
left: 12px;
content: "";
height: 5px;
width: 5px;
border-radius: 50%;
background-color: var(--tp-common-red-3);
}
@media (max-width: 767px) {
.tp-pd-2-bottom {
flex-wrap: wrap;
}
}
.tp-pd-2-bottom .tp-pd-2-bottom-item:not(:last-of-type) {
margin-right: 20px;
}
@media (max-width: 767px) {
.tp-pd-2-bottom-item {
padding-bottom: 20px;
}
}
.tp-pd-2-bottom-item span {
font-size: 16px;
font-weight: 600;
line-height: 1;
margin-bottom: 10px;
display: inline-block;
color: rgba(255, 255, 255, 0.7);
}
.tp-pd-2-bottom-item h6 {
font-size: 20px;
font-weight: 600;
color: var(--tp-common-white);
}
.tp-pd-2-banner {
height: 950px;
overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-2-banner {
height: 680px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-2-banner {
height: 600px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-2-banner {
height: 500px;
}
}
@media (max-width: 767px) {
.tp-pd-2-banner {
height: 250px;
}
}
.tp-pd-2-banner img {
width: 100%;
margin-top: -150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-2-banner img {
margin-top: -100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-2-banner img {
margin-top: -20px;
}
}
@media (max-width: 767px) {
.tp-pd-2-banner img {
margin-top: -50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-overview-heading {
padding-bottom: 30px;
}
}
.tp-pd-2-overview-title {
font-size: 50px;
font-weight: 700;
line-height: 1;
letter-spacing: -1.5px;
color: var(--tp-common-white);
}
.tp-pd-2-overview-wrap p {
font-size: 16px;
font-weight: 500;
line-height: 26px;
margin-bottom: 24px;
color: rgba(255, 255, 255, 0.6);
}
.tp-pd-2-overview-wrap ul {
padding-top: 20px;
display: inline-block;
}
.tp-pd-2-overview-wrap ul li {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 20px;
margin-left: 16px;
color: var(--tp-common-white);
}
.tp-pd-2-overview-wrap ul li:not(:last-of-type) {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-2-slider-ptb {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-slider-ptb {
padding-bottom: 80px;
}
}
.tp-pd-2-slider-wrapper {
margin: 0 -200px;
}
@media (max-width: 767px) {
.tp-pd-2-slider-wrapper {
margin: 0;
}
}
.tp-pd-2-slider-wrapper .swiper-wrapper {
padding-bottom: 40px;
}
.tp-pd-2-slider-thumb {
overflow: hidden;
}
.tp-pd-2-slider-thumb:hover img {
transform: scale(1.2);
}
.tp-pd-2-slider-thumb img {
transition: 0.9s ease-in-out;
}
.tp-pd-2-dot .swiper-pagination-bullet {
width: 6px;
height: 6px;
opacity: 1;
transition: 0.3s;
border-radius: 50%;
display: inline-block;
background: rgba(255, 255, 255, 0.3);
}
.tp-pd-2-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 24px;
border-radius: 10px;
background-color: var(--tp-common-white);
}
@media (max-width: 767px) {
.tp-pd-2-step-heading {
padding-bottom: 40px;
}
}
.tp-pd-2-step-title {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -1.2px;
color: var(--tp-common-white);
}
@media (max-width: 767px) {
.tp-pd-2-step-title {
font-size: 35px;
letter-spacing: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-step-title br {
display: none;
}
}
.tp-pd-2-step-item-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
color: var(--tp-common-white);
}
.tp-pd-2-step-item span {
font-size: 15px;
font-weight: 500;
line-height: 24px;
display: inline-block;
color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-step-item span br {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-2-thumb-ptb {
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-thumb-ptb {
padding-bottom: 80px;
}
}
.tp-pd-2-thumb-item {
overflow: hidden;
height: 600px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-2-thumb-item {
height: 500px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-2-thumb-item {
height: 400px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-2-thumb-item {
height: 450px;
}
}
@media (max-width: 767px) {
.tp-pd-2-thumb-item {
height: 250px;
}
}
.tp-pd-2-thumb-item img {
margin-top: -100px;
width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-2-thumb-item img {
margin-top: -60px;
}
}
@media (max-width: 767px) {
.tp-pd-2-thumb-item img {
margin-top: -40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-2-np-ptb {
padding-bottom: 80px;
}
}
.tp-pd-2-np-content a {
width: 180px;
height: 180px;
font-size: 16px;
font-weight: 600;
margin: 0 -14px;
text-align: center;
line-height: 180px;
border-radius: 50%;
display: inline-block;
color: var(--tp-common-white);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-pd-2-np-content a:hover {
color: var(--tp-common-black);
background-color: var(--tp-common-white);
}
.tp-pd-2-np-content a svg {
margin: 0 4px;
}
.tp-pd-4-ptb {
padding-top: 220px;
padding-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-ptb {
padding-top: 150px;
}
}
.tp-pd-4-title {
font-size: 100px;
font-weight: 400;
line-height: 1;
color: #E0EEEE;
letter-spacing: -2px;
font-family: var(--tp-ff-dirtyline);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-4-title {
font-size: 80px;
letter-spacing: 0;
}
}
@media (max-width: 767px) {
.tp-pd-4-title {
font-size: 65px;
letter-spacing: 0;
}
}
.tp-pd-4-bottom-btn .tp-portfolio-details-btn {
color: #C5FCFC;
border-color: #C5FCFC;
}
.tp-pd-4-bottom-btn .tp-portfolio-details-btn:hover {
background-color: #C5FCFC;
color: var(--tp-common-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-banner-ptb {
padding-top: 80px;
}
}
.tp-pd-4-banner-thumb {
margin-bottom: -275px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-4-banner-thumb {
margin-bottom: -100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-banner-thumb {
margin-bottom: 0;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-4-heading {
margin-bottom: 60px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-heading {
margin-bottom: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-heading-bottom {
flex-wrap: wrap;
}
.tp-pd-4-heading-bottom .tp-pd-2-bottom-item {
margin-right: 20px;
padding-bottom: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-4-about-ptb {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-about-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}
.tp-pd-4-about-sub {
font-size: 20px;
font-weight: 400;
color: #E0EEEE;
letter-spacing: -0.4px;
font-family: var(--tp-ff-dirtyline);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-about-sub {
letter-spacing: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-color-ptb {
margin-bottom: 80px;
}
}
.tp-pd-4-color-shape {
position: absolute;
top: 18%;
left: 20%;
z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-pd-4-color-shape {
left: -3%;
top: 6%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-4-color-shape {
top: 10%;
left: -2%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-4-color-shape {
left: 3%;
top: 10%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-color-shape {
display: none;
}
}
.tp-pd-4-color-picker {
bottom: 0;
z-index: 2;
right: 38.5%;
position: absolute;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
.tp-pd-4-color-picker {
right: 33%;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-color-picker {
display: none;
}
}
.tp-pd-4-color-heading {
z-index: 1;
height: 100%;
position: relative;
padding: 300px 120px;
background: #85291A;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-pd-4-color-heading {
padding: 200px 60px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-4-color-heading {
padding: 130px 50px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-4-color-heading {
padding: 170px 60px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-4-color-heading {
padding: 100px;
}
}
@media (max-width: 767px) {
.tp-pd-4-color-heading {
padding: 60px 40px;
}
}
.tp-pd-4-color-heading p {
font-size: 16px;
font-weight: 500;
line-height: 26px;
letter-spacing: -0.16px;
color: var(--tp-common-white);
}
@media only screen and (min-width: 1801px) and (max-width: 1850px), only screen and (min-width: 1701px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-color-heading p br {
display: none;
}
}
.tp-pd-4-color-title {
font-size: 30px;
font-weight: 700;
color: #FFF669;
line-height: 1;
margin-bottom: 14px;
letter-spacing: -0.6px;
}
.tp-pd-4-color-content {
padding: 78px 0 56px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-4-color-content {
padding: 60px 22px 50px 0px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-4-color-content {
padding: 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-color-content {
padding: 40px;
}
}
.tp-pd-4-color-content span {
font-size: 30px;
font-weight: 700;
line-height: 1;
margin-bottom: 14px;
display: inline-block;
letter-spacing: -0.6px;
color: var(--tp-common-white);
}
.tp-pd-4-color-content p {
font-size: 16px;
font-weight: 500;
line-height: 26px;
letter-spacing: -0.16px;
color: var(--tp-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-color-content p br {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-thumb-ptb {
padding-bottom: 80px;
}
}
.tp-pd-4-thumb-wrap {
height: 950px;
border-radius: 20px;
background-color: #FFF669;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-4-thumb-wrap {
height: 750px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-4-thumb-wrap {
height: 650px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-4-thumb-wrap {
height: 500px;
}
}
@media (max-width: 767px) {
.tp-pd-4-thumb-wrap {
height: 300px;
}
}
.tp-pd-4-thumb-item {
margin-bottom: -100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-thumb-item {
margin-bottom: 0;
}
}
.tp-pd-4-thumb-box {
height: 800px;
border-radius: 20px;
overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-pd-4-thumb-box {
height: 520px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-4-thumb-box {
height: 420px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-4-thumb-box {
height: 450px;
}
}
@media (max-width: 767px) {
.tp-pd-4-thumb-box {
height: 250px;
}
}
.tp-pd-4-thumb-box img {
width: 100%;
margin-top: -40px;
object-fit: cover;
border-radius: 20px;
}
.tp-pd-4-slider-wrapper {
margin: 0 -220px;
}
@media (max-width: 767px) {
.tp-pd-4-slider-wrapper {
margin: 0;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-4-slider-heading {
margin-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-4-slider-heading {
margin-bottom: 80px;
}
}
.tp-pd-4-slider-thumb img {
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.0784313725);
}
.tp-pd-5-hero-black-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
background-color: #000;
transition: opacity 0.2s ease;
}
.tp-pd-5-hero-white-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
background-color: #fff;
transition: opacity 0.4s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-hero-ptb {
padding-top: 150px;
padding-bottom: 120px;
}
}
.tp-pd-5-hero-title {
font-size: 80px;
font-weight: 700;
line-height: 1;
margin-bottom: 24px;
letter-spacing: -4px;
color: var(--tp-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-pd-5-hero-title {
font-size: 75px;
}
}
@media (max-width: 767px) {
.tp-pd-5-hero-title {
font-size: 60px;
letter-spacing: 0;
}
}
.tp-pd-5-hero-heading p {
font-size: 16px;
font-weight: 500;
line-height: 26px;
margin-bottom: 50px;
color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
.tp-pd-5-hero-heading p br {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-hero-top {
padding-bottom: 40px;
}
}
.tp-pd-5-hero-info-ptb {
transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-hero-info-ptb {
padding-bottom: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-hero-info-item {
padding-bottom: 30px;
}
}
.tp-pd-5-hero-info-item-title {
font-size: 30px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.9px;
color: var(--tp-common-black);
}
.tp-pd-5-hero-info-item-title span {
font-size: 12px;
display: inline-block;
transform: translate(-9px, -13px);
}
.tp-pd-5-hero-info-item-content {
padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-hero-info-item-content {
padding-left: 0;
}
}
.tp-pd-5-hero-info-item-content p {
font-size: 18px;
font-weight: 500;
line-height: 26px;
color: rgba(0, 0, 0, 0.6);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-hero-info-item-content p br {
display: none;
}
}
.tp-pd-5-light-ptb {
padding-top: 120px;
padding-bottom: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-5-light-ptb {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-light-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-light-heading {
padding-bottom: 35px;
}
}
.tp-pd-5-light-title {
font-size: 50px;
font-weight: 700;
color: #0E0F11;
line-height: 1;
letter-spacing: -1.5px;
}
.tp-pd-5-light-slider-thumb img {
width: 100%;
border-radius: 30px;
border: 1px solid rgba(0, 0, 0, 0.0705882353);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-pd-5-mockup-ptb {
padding-top: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-mockup-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}
.tp-pd-5-mockup-title {
font-size: 50px;
font-weight: 700;
line-height: 1;
margin-bottom: 20px;
letter-spacing: -1.5px;
color: var(--tp-common-white);
}
.tp-pd-5-mockup-heading {
padding-bottom: 30px;
}
.tp-pd-5-mockup-heading p {
font-size: 18px;
font-weight: 500;
line-height: 26px;
color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-mockup-heading p br {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.tp-pd-5-slider-ptb {
padding-bottom: 80px;
}
}
.project-details-1-pt {
padding-top: 107px;
}
.project-details-1-left .project-details-1-thumb:last-child {
margin-bottom: 0;
}
.project-details-1-subtitle {
font-size: 18px;
font-weight: 500;
line-height: 1;
margin-bottom: 10px;
display: inline-block;
color: var(--tp-common-white);
}
.project-details-1-subtitle i {
font-style: normal;
}
.project-details-1-subtitle i::after {
content: "";
height: 1px;
width: 40px;
margin: 0px 10px;
display: inline-block;
transform: translateY(-4px);
background-color: rgba(255, 255, 255, 0.14);
}
.project-details-1-title {
font-size: 80px;
font-weight: 600;
line-height: 1;
margin-bottom: 24px;
letter-spacing: -3.2px;
color: var(--tp-common-white);
}
@media (max-width: 767px) {
.project-details-1-title {
font-size: 50px;
}
}
.project-details-1-title-box {
margin-bottom: 40px;
}
@media (max-width: 767px) {
.project-details-1-title-box {
margin-bottom: 0;
}
}
.project-details-1-title-box p {
font-size: 18px;
font-weight: 400;
line-height: 28px;
color: var(--tp-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
.project-details-1-title-box p br {
display: none;
}
}
.project-details-1-info {
margin-bottom: 32px;
}
.project-details-1-info span {
font-size: 20px;
font-weight: 600;
line-height: 1;
color: #FCF6F4;
margin-bottom: 10px;
display: inline-block;
}
.project-details-1-info h4 {
font-size: 17px;
font-weight: 600;
line-height: 1;
margin-bottom: 0;
letter-spacing: -0.4px;
color: rgba(252, 246, 244, 0.7);
}
@media (max-width: 767px) {
.project-details-1-info-wrap {
flex-wrap: wrap;
margin-bottom: 50px;
}
.project-details-1-info-wrap .project-details-1-info {
margin-right: 20px;
}
}
.project-details-1-navigation {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 33px 60px;
padding-top: 20px;
}
@media (max-width: 767px) {
.project-details-1-navigation {
padding: 33px 0px;
}
}
.project-details-1-navigation a i {
height: 44px;
width: 44px;
line-height: 44px;
border-radius: 50%;
text-align: center;
margin-top: 10px;
display: inline-block;
color: var(--tp-common-white);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.project-details-1-navigation a span {
font-size: 17px;
font-weight: 600;
line-height: 1;
color: var(--tp-common-white);
}
.project-details-1-navigation a span svg {
transform: translateY(5px);
}
.project-details-1-prev {
line-height: 0;
}
.project-details-1-prev i {
margin-right: 10px;
transition: 0.3s;
}
.project-details-1-prev:hover i {
color: var(--tp-common-black);
border-color: var(--tp-common-white);
background-color: var(--tp-common-white);
}
.project-details-1-next {
line-height: 0;
}
.project-details-1-next i {
margin-left: 10px;
transition: 0.3s;
}
.project-details-1-next:hover i {
color: var(--tp-common-black);
border-color: var(--tp-common-white);
background-color: var(--tp-common-white);
}
.project-details-video {
margin-bottom: 60px;   }
.project-details-video video {
height: 800px;
width: 100% !important;
object-fit: cover;
overflow: hidden;
}
@media (max-width: 767px) {
.project-details-video video {
height: 400px;
}
}
.project-details-video figcaption {
align-items: center;
display: grid;
grid-gap: 1rem;
grid-template-columns: 50px auto 115px;
padding: 0.5rem;
}
.project-details-video button {
border: 0;
display: inline;
color: white;
order: 1;
padding: 0.5rem;
transition: opacity 0.25s ease-out;
width: 100%;
font-size: 24px;
}
.project-details-video button:hover {
cursor: pointer;
opacity: 0.8;
}
.project-details-video label {
font-size: 20px;
text-align: center;
color: var(--tp-common-white);
transform: translateY(35px);
}
.project-details-video progress[value] {
position: relative;
appearance: none;
border: none;
display: inline;
height: 3px;
order: 1;
width: 100%;
background: rgba(255, 255, 255, 0.2);
}
.project-details-video progress[value]::-webkit-progress-bar {
background-color: whiteSmoke;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
}
.project-details-video progress[value]::-webkit-progress-value {
background-color: var(--tp-common-white);
position: relative;
transition: width 1s linear;
}
.project-details-video progress[value]::-moz-progress-bar {
background-color: var(--tp-common-white);
position: relative;
transition: width 1s linear;
}
.video-progress-btn-wrap {
position: absolute;
left: 40px;
right: 40px;
bottom: 80px;
}
.project-details-video-overlay {
position: relative;
z-index: 1;
}
.project-details-video-overlay::after {
position: absolute;
left: 0;
width: 100%;
height: 106%;
content: "";
z-index: -1;
bottom: 0;
background: linear-gradient(180deg, rgba(18, 18, 18, 0) 1.63%, #0e0f11 26.67%);
}  :root {
--numOfSlides: 5;
--slidingAT: 1.3s;
--controlSize: 60px;
}
.bf-portfolio-title {
font-family: var(--tp-ff-thundermed);
font-weight: 500;
font-size: 280px;
letter-spacing: -0.01em;
text-transform: uppercase;
line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.bf-portfolio-title {
font-size: 220px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.bf-portfolio-title {
font-size: 160px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.bf-portfolio-title {
font-size: 130px;
}
}
@media (max-width: 767px) {
.bf-portfolio-title {
font-size: 77px;
}
}
.bf-portfolio-item img {
border-radius: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-portfolio-wrapper .grid-item {
margin-bottom: 30px;
}
}
.bf-portfolio-content {
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
bottom: 50px;
left: 0;
padding: 0 70px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-portfolio-content {
padding: 0 20px;
}
}
.bf-portfolio-content span {
font-weight: 500;
font-size: 30px;
letter-spacing: -0.02em;
color: var(--tp-common-px-white);
}
@media (max-width: 767px) {
.bf-portfolio-content span {
font-size: 22px;
}
}
.bf-portfolio-post-thumbnail a {
display: block;
}
.bf-portfolio-post-thumbnail img {
border-radius: 20px !important;
}
.bf-portfolio-3-sectitle {
font-weight: 500;
font-size: 200px;
line-height: 80%;
letter-spacing: -0.06em;
text-transform: uppercase;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-portfolio-3-sectitle {
font-size: 150px;
}
}
@media (max-width: 767px) {
.bf-portfolio-3-sectitle {
font-size: 88px;
}
}
.bf-portfolio-3-title {
font-weight: 500;
font-size: 80px;
line-height: 1;
text-transform: uppercase;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-portfolio-3-title {
font-size: 60px;
}
}
.bf-portfolio-3-title-box p {
font-weight: 500;
font-size: 24px;
line-height: 125%;
letter-spacing: -0.02em;
color: var(--tp-common-px-black);
}
@media (max-width: 767px) {
.bf-portfolio-3-title-box p br {
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-portfolio-3-btn {
padding-top: 20px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-portfolio-3-content.pl-200 {
padding-left: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-portfolio-3-content {
margin-top: 30px;
}
}
.bf-portfolio-3-content span {
font-weight: 400;
font-size: 20px;
line-height: 150%;
letter-spacing: -0.02em;
color: var(--tp-common-px-black);
display: block;
}
.bf-portfolio-3-thumb img {
border-radius: 30px !important;
}
.bf-portfolio-4-title {
font-size: 50px;
font-weight: 500;
line-height: 60px;
letter-spacing: -1.5px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-portfolio-4-title {
font-size: 40px;
line-height: 50px;
}
}
.tp-portfolio-mix-slider {
height: 100%;
width: 100%;
}
.tp-portfolio-mix-slider-wrap.mix {
padding: 0px 0px 0px 0px;
height: 100vh;
}
.tp-portfolio-mix-slider-navigation {
position: absolute;
bottom: 0;
width: 100%;
}
.tp-portfolio-mix-slider-navigation .nav-icon {
font-size: 16px;
text-transform: uppercase;
display: flex;
gap: 20px;
color: var(--tp-common-px-white);
line-height: 1;
position: relative;
z-index: 2;
cursor: pointer;
}
.tp-portfolio-mix-slider-navigation .slider-nav {
display: flex;
height: 80px;
justify-content: space-between;
width: 100%;
align-items: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-portfolio-mix-slider-navigation .slider-nav {
height: 80px;
}
}
.tp-portfolio-mix-slider-navigation .slider-nav-box {
position: absolute;
bottom: 0;
width: 100%;
}
.tp-portfolio-mix-slider-navigation.navigation-white .nav-icon {
color: var(--tp-common-px-black);
}
.tp-portfolio-mix-slider-image .popup-image {
position: absolute;
bottom: 200px;
left: 72px;
right: auto;
}
@media (max-width: 767px) {
.tp-portfolio-mix-slider-image .popup-image {
display: none;
}
}
.tp-portfolio-mix-slider-image .popup-image i {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
color: var(--tp-common-px-white);
}
.tp-portfolio-mix-slider-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.tp-portfolio-mix-slider-content .tp-portfolio-mix-slide-text {
transform: translateX(200px);
transition: all 2s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.tp-portfolio-mix-slider-content .tp-portfolio-mix-slide-text {
transform: translateX(0px);
}
}
.tp-portfolio-mix-slider-content .tp-portfolio-mix-slide-heading {
transform: translateX(-200px);
transition: all 2s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.tp-portfolio-mix-slider-content .tp-portfolio-mix-slide-heading {
transform: translateX(0px);
}
}
.tp-portfolio-mix-slider .swiper-slide-active .tp-portfolio-mix-slide-text {
transform: translateX(0px);
}
.tp-portfolio-mix-slider .swiper-slide-active .tp-portfolio-mix-slide-heading {
transform: translateX(0px);
}
.tp-portfolio-mix-slide-heading {
font-size: clamp(5rem, 15vw, 13rem);
font-weight: 500;
line-height: 0.8;
color: var(--tp-common-px-white);
font-family: var(--tp-ff-thundermed);
letter-spacing: -4px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.tp-portfolio-mix-slide-heading {
letter-spacing: 0;
}
}
.tp-portfolio-mix-slide-text {
font-size: 16px;
font-weight: 500;
line-height: 1;
margin-bottom: 50px;
display: inline-block;
color: var(--tp-common-px-white);
text-transform: uppercase;
}
.tp-portfolio-mix-pagination {
position: absolute;
top: auto !important;
bottom: 0;
transform: none;
height: 50px;
left: 0 !important;
right: 0 !important;
display: inline-flex;
gap: 20px;
margin-inline: auto;
align-items: center;
justify-content: center;
z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-portfolio-mix-pagination {
gap: 10px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.tp-portfolio-mix-pagination {
display: none;
}
}
.tp-portfolio-mix-pagination .swiper-pagination-bullet {
width: 80px;
height: 5px;
display: inline-block;
margin: 0 5px;
overflow: hidden;
transition: 0.4s;
position: relative;
border-radius: 5px;
background: rgba(255, 255, 255, 0.3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-mix-pagination .swiper-pagination-bullet {
width: 50px;
}
}
.tp-portfolio-mix-pagination .swiper-pagination-bullet .swiper-pagination-bullet-active {
width: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-portfolio-mix-pagination .swiper-pagination-bullet .swiper-pagination-bullet-active {
width: 40px;
}
}
.tp-portfolio-mix-pagination .swiper-pagination-bullet::before {
content: "";
width: 80px;
height: 100%;
position: absolute;
transition: 0.6s;
z-index: 9;
left: 0;
border-radius: 5px;
background: rgba(255, 255, 255, 0.3);
}
.tp-portfolio-mix-pagination .swiper-pagination-bullet::after {
content: "";
width: 0;
height: 100%;
position: absolute;
transition: 0.6s;
z-index: 8;
left: 0;
background-color: white;
}
.tp-portfolio-mix-pagination .swiper-pagination-bullet-active::after {
opacity: 1;
width: 100%;
}
.tp-portfolio-parallax-slider-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.tp-portfolio-parallax-slider-wrapper .parallax-slider {
position: absolute;
top: 0;
left: 0;
width: 4200px;
height: 100%;
}
@media (max-width: 767px) {
.tp-portfolio-parallax-slider-wrapper .parallax-slider {
width: 2600px;
}
}
.tp-portfolio-parallax-slider-wrapper .parallax-slider-inner {
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
gap: 5px;
left: 0px;
right: 0;
}
.tp-portfolio-parallax-slider-wrapper .parallax-item {
position: relative;
width: 600px;
height: 100%;
overflow: hidden;
}
@media (max-width: 767px) {
.tp-portfolio-parallax-slider-wrapper .parallax-item {
width: 350px;
}
}
.tp-portfolio-parallax-slider-wrapper .parallax-item:hover .parallax-content {
bottom: 0;
opacity: 1;
visibility: visible;
}
.tp-portfolio-parallax-slider-wrapper .parallax-item:hover .parallax-img::after {
opacity: 1;
height: 100%;
visibility: visible;
}
.tp-portfolio-parallax-slider-wrapper .parallax-content {
position: absolute;
bottom: -100px;
left: 0;
z-index: 55;
overflow: hidden;
opacity: 0;
visibility: hidden;
margin: 40px 40px 30px 35px;
transition: 0.4s;
}
.tp-portfolio-parallax-slider-wrapper .parallax-content span {
font-size: 24px;
line-height: 1;
display: block;
font-size: 20px;
margin-bottom: 10px;
color: var(--tp-common-px-white);
text-transform: capitalize;
}
.tp-portfolio-parallax-slider-wrapper .parallax-content h4 {
font-size: 50px;
line-height: 1;
padding-bottom: 7px;
display: inline-block;
color: var(--tp-common-px-white);
}
.tp-portfolio-parallax-slider-wrapper .parallax-img {
position: absolute;
height: 100%;
width: 840px;
background-size: cover;
background-position: center;
margin-left: -100px;
}
.tp-portfolio-parallax-slider-wrapper .parallax-img::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
opacity: 0;
visibility: hidden;
transition: 0.4s;
background-color: rgba(0, 0, 0, 0.3);
}
.tp-portfolio-mix-slider-navigation .slider-nav {
position: inherit;
}
.tp-portfolio-parallax-slider-wrapper .parallax-slider-inner {
transform: translateY(0%);
}  .bf-service-dec {
font-size: 18px;
line-height: 167%;
letter-spacing: -0.02em;
color: var(--tp-common-px-white);
}
.bf-service-category {
padding-left: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-category {
padding-left: 0;
}
}
.bf-service-category span {
border-radius: 16px;
padding: 11px 18px;
font-weight: 600;
font-size: 13px;
line-height: 1;
margin-bottom: 6px;
font-style: normal;
display: inline-block;
letter-spacing: -0.02em;
color: var(--tp-common-px-white);
background: rgba(255, 255, 255, 0.08);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.bf-service-category span {
font-size: 12px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.bf-service-category span {
padding: 11px 14px;
}
}
.bf-service-num span {
display: flex;
font-weight: 600;
font-size: 16px;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-title-box {
padding-top: 0;
}
}
.bf-service-title h4 {
transition: 0.4s ease-in-out;
font-weight: 600;
font-size: 22px;
text-align: start;
margin-bottom: 0;
letter-spacing: -0.04em;
color: var(--tp-common-px-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-title h4 {
font-size: 16px;
}
}
.bf-service-thumb {
flex: 0 0 auto;
margin-right: 55px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.bf-service-thumb {
margin-right: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-thumb {
margin-right: 0;
margin-bottom: 15px;
}
}
.bf-service-thumb img {
border-radius: 16px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.bf-service-content {
padding-bottom: 20px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-content {
flex-wrap: wrap;
padding-bottom: 10px;
}
}
.bf-service-content p {
font-weight: 600;
font-size: 16px;
line-height: 1.5;
margin-bottom: 0;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.bf-service-content p br {
display: none;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.bf-service-content p {
font-size: 15px;
}
.bf-service-content p br {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.bf-service-content p {
font-size: 14px;
}
.bf-service-content p br {
display: none;
}
}
.bf-service-accordion-wrap .accordion-buttons {
width: 100%;
}
.bf-service-accordion-wrap .accordion-items {
border-top: 1px solid rgba(255, 255, 255, 0.16);
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.bf-service-accordion-wrap .accordion .accordion-items {
position: relative;
}
.bf-service-accordion-wrap .accordion .accordion-items:not(:last-child) {
border-bottom: 1px solid rgba(254, 255, 248, 0.08);
}
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
text-align: start;
font-weight: 600;
font-size: 30px;
line-height: 1;
padding: 24px 0;
letter-spacing: -0.03em;
color: var(--tp-common-px-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
font-size: 25px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
font-size: 22px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
font-size: 23px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons {
font-size: 22px;
}
}
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons:not(.collapsed) .accordion-icon::before {
transform: translate(-50%, -50%) rotate(90deg);
}
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons .accordion-icon {
position: absolute;
top: 15px;
right: 7px;
height: 46px;
width: 46px;
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.14);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons .accordion-icon {
height: 30px;
width: 30px;
}
}
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons .accordion-icon::before {
position: absolute;
content: "";
width: 2px;
height: 14px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--tp-common-px-white);
border-radius: 2px;
transition: 0.4s;
}
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons .accordion-icon::after {
position: absolute;
content: "";
width: 14px;
height: 2px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--tp-common-px-white);
border-radius: 2px;
}
.bf-service-accordion-wrap .accordion .accordion-items .accordion-header .accordion-buttons i {
margin-right: 80px;
display: inline-block;
transform: translateY(-3px);
}
.bf-service-accordion-wrap .accordion .accordion-items .accordion-body {
padding: 0;
padding-top: 20px;
padding-bottom: 60px;
}
.bf-service-accordion-wrap .accordion .accordion-items .accordion-body p {
font-size: 16px;
font-weight: 500;
letter-spacing: -0.4px;
color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-accordion-wrap .accordion .accordion-items .accordion-body p br {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-accordion-wrap .accordion .accordion-items .accordion-body {
padding-top: 0;
padding-bottom: 20px;
}
}
.bf-service-accordion-category span {
font-weight: 600;
font-size: 13px;
padding: 4px 16px;
border-radius: 32px;
display: inline-block;
text-transform: uppercase;
color: var(--tp-common-px-white);
background: rgba(255, 255, 255, 0.06);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-accordion-category span {
font-size: 12px;
padding: 4px 12px;
}
}
.bf-service-item-3 {
padding: 40px 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.bf-service-item-3:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.bf-service-item-3:hover .row [class*=col-] .bf-service-item-3-wrap {
transform: translateX(0);
}
.bf-service-item-3-wrap {
transition: 0.9s;
transform: translateX(-340px);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-item-3-wrap {
transform: translateX(0);
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-item-3-wrap {
flex-wrap: wrap;
}
}
.bf-service-item-3-thumb {
flex: 0 0 auto;
margin-right: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-item-3-thumb {
margin-right: 35px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-item-3-thumb {
width: 100%;
}
}
.bf-service-item-3-thumb img {
border-radius: 10px !important;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-item-3-thumb img {
width: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-item-3-text {
padding-top: 30px;
}
}
.bf-service-item-3-title {
margin: 0;
line-height: 1;
font-size: 50px;
font-weight: 500;
letter-spacing: -1px;
color: var(--tp-common-px-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.bf-service-item-3-title {
font-size: 44px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-item-3-title {
font-size: 40px;
}
}
.bf-service-item-3-tags {
flex: none;
justify-content: flex-start;
align-items: flex-start;
display: flex;
animation: marquee-horizontal 30s linear infinite;
}
.bf-service-item-3-tags span {
font-size: 14px;
font-weight: 500;
margin-right: 6px;
padding: 1px 15px;
border-radius: 20px;
white-space: nowrap;
display: inline-block;
text-transform: uppercase;
color: var(--tp-common-px-white);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.bf-service-item-3-slider {
position: relative;
}
.bf-service-item-3-slider::after {
position: absolute;
top: 0;
right: 0;
content: "";
height: 100%;
width: 160px;
display: inline-block;
background: linear-gradient(-90deg, #151515 0%, rgba(21, 21, 21, 0) 100%);
}
.bf-service-item-3-slider::before {
position: absolute;
top: 0;
left: 0;
content: "";
height: 100%;
width: 160px;
z-index: 1;
display: inline-block;
background: linear-gradient(90deg, #151515 0%, rgba(21, 21, 21, 0) 100%);
}
.bf-service-item-3-wrapper {
height: 100%;
text-align: end;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-item-3-btn {
margin-bottom: 30px;
}
}
.bf-service-item-3-btn a {
display: inline-block;
}
.bf-service-item-3-btn a span {
height: 60px;
width: 60px;
display: grid;
border-radius: 30px;
place-content: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
color: var(--tp-common-px-white);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.bf-service-item-3-btn a:hover span {
color: var(--tp-common-px-black);
background-color: var(--tp-common-px-white);
}
@media (max-width: 767px) {
.bf-service-heading {
margin-bottom: 20px;
}
}
.bf-service-3-rounded {
border-radius: 20px;
margin-left: 30px;
margin-right: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
.bf-service-3-rounded {
margin-left: 15px;
margin-right: 15px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-3-rounded {
margin-left: 0;
margin-right: 0;
border-radius: 0;
}
}
.bf-service-3-dec {
font-size: 18px;
line-height: 167%;
color: rgba(255, 255, 255, 0.65);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-3-dec br {
display: none;
}
}
.bf-service-hero-spacing {
padding-top: 225px;
padding-bottom: 170px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-hero-spacing {
padding-top: 180px;
padding-bottom: 140px;
}
}
.bf-service-hero-subtitle {
font-weight: 500;
font-size: 16px;
letter-spacing: -0.02em;
color: var(--tp-common-px-white);
}
.bf-service-hero-title {
font-weight: 500;
font-size: 80px;
line-height: 105%;
letter-spacing: -0.02em;
color: var(--tp-common-px-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.bf-service-hero-title {
font-size: 70px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.bf-service-hero-title {
font-size: 60px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-hero-title {
font-size: 50px;
}
}
.bf-service-hero-bottom-title {
font-weight: 500;
font-size: 280px;
letter-spacing: -0.03em;
color: rgba(255, 255, 255, 0.3);
position: absolute;
bottom: -75px;
right: 0;
line-height: 1;
margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-hero-bottom-title {
font-size: 150px;
bottom: -25px;
right: -100px;
}
}
@media (max-width: 767px) {
.bf-service-hero-bottom-title {
font-size: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-hero-gif {
padding-top: 30px;
}
}
.bf-service-step-subtitle span {
font-weight: 500;
font-size: 16px;
letter-spacing: -0.02em;
color: var(--tp-grey-px-1);
}
.bf-service-step-title {
font-weight: 500;
font-size: 50px;
line-height: 120%;
letter-spacing: -0.03em;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-step-title {
font-size: 40px;
}
}
.bf-service-step-item h4 {
font-weight: 500;
font-size: 24px;
letter-spacing: -0.02em;
}
.bf-service-step-item ul li {
list-style: none;
}
.bf-service-step-item ul li a {
font-weight: 400;
font-size: 16px;
color: var(--tp-common-px-black);
}
.bf-service-step-icon {
position: absolute;
top: 0;
right: 45px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
.bf-service-step-icon {
right: 0;
}
}