/* Services Archive

-------------------------------------------------------------- */

.home4 .tf-services-wrap.style5 .item .thumb-images img {
    height: 443px;
}
.tf-services-wrap.style3 .icon-cerax-chev-left:before {
    content: "\e91c " !important;
}
.tf-services-wrap.style3 .icon-cerax-chev-right:before {
    content: "\e92f" !important;
}

.wrap-services-post.column-1 .item,

.wrap-portfolios-post.column-1 .item,

.wrap-team-post.column-1 .item,

.case-study-container.column-1 .item {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

}



.wrap-services-post.column-2 .item,

.wrap-portfolios-post.column-2 .item,

.wrap-team-post.column-2 .item,

.case-study-container.column-2 .item {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 50%;

    flex: 0 0 50%;

    max-width: 50%;

}



.wrap-services-post.column-3 .item,

.wrap-portfolios-post.column-3 .item,

.wrap-team-post.column-3 .item,

.case-study-container.column-3 .item {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 33.33%;

    flex: 0 0 33.33%;

    max-width: 33.33%;

}



.wrap-services-post.column-4 .item,

.wrap-team-post.column-4 .item,

.wrap-portfolios-post.column-4 .item,

.case-study-container.column-4 .item {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 25%;

    flex: 0 0 25%;

    max-width: 25%;

}



.wrap-services-post.column-5 .item,

.wrap-team-post.column-5 .item,

.wrap-portfolios-post.column-5 .item,

.case-study-container.column-5 .item {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 20%;

    flex: 0 0 20%;

    max-width: 20%;

}



.wrap-services-post.column-6 .item,

.wrap-team-post.column-6 .item,

.case-study-container.column-6 .item {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 16.6666667%;

    flex: 0 0 16.6666667%;

    max-width: 16.6666667%;

}



.tf-services-wrap .owl-carousel .item,

.tf-portfolios-wrap .owl-carousel .item {

    -ms-flex: 0 0 100% !important;

    flex: 0 0 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

}



.wrap-team-post,

.case-study-container,

.wrap-services-post,

.tf-services-wrap .row,

.tf-portfolios-wrap .row {

    display: flex;

    flex-wrap: wrap;

    margin-right: 0px;

    margin-left: 0px;

}



.wrap-team-post .item,

.case-study-container .item,

.wrap-services-post .item {

    padding: 20px;

}



.team-filter,

.case-study-filter,

.services-filter {

    display: flex;

    gap: 20px;

    align-items: center;

    justify-content: center;

    list-style: none;

}



.team-filter li a,

.case-study-filter li a,

.services-filter li a {

    font-size: 20px;

}



.team-filter li.active a,

.team-filter li a:hover,

.case-study-filter li.active a,

.case-study-filter li a:hover,

.services-filter li a:hover,

.services-filter li.active a {

    color: var(--theme-primary-color);

}



li.active.border_eff a {

    background-size: 100% 100%;

    color: inherit;

}



/* style 1 */



.tf-services-wrap.style1 .services-post {

    border: 1px solid #FFFFFF1A;

    padding: 48px 48px 48px 48px;

    -webkit-transition: all 0.4s ease-in-out 0s;

    -moz-transition: all 0.4s ease-in-out 0s;

    -ms-transition: all 0.4s ease-in-out 0s;

    -o-transition: all 0.4s ease-in-out 0s;

    transition: all 0.4s ease-in-out 0s;

}



.tf-services-wrap.style1 .services-post:hover {

    backdrop-filter: blur(20px);

    background: #FFFFFF0D;

}



.tf-services-wrap.style1 .services-post:hover .icon {

    background: var(--theme-secondary-color);

    color: #fff;

    transform: rotateY(180deg);

}



.tf-services-wrap.style1 .services-post:hover .icon * {

    fill: #fff;

    -webkit-transition: all 0.2s ease-in-out 0s;

    -moz-transition: all 0.2s ease-in-out 0s;

    -ms-transition: all 0.2s ease-in-out 0s;

    -o-transition: all 0.2s ease-in-out 0s;

    transition: all 0.2s ease-in-out 0s;

}



.tf-services-wrap.style1 .services-post .icon {

    width: 132px;

    height: 132px;

    background: #FFFFFF4D;

    backdrop-filter: blur(20px);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    border-radius: 50%;

    margin-bottom: 50px;

    font-size: 50px;

    -webkit-transition: all 0.5s ease-in-out 0s;

    -moz-transition: all 0.5s ease-in-out 0s;

    -ms-transition: all 0.5s ease-in-out 0s;

    -o-transition: all 0.5s ease-in-out 0s;

    transition: all 0.5s ease-in-out 0s;

}



.tf-services-wrap.style1 .services-post .icon * {

    fill: #fff;



}



.tf-services-wrap.style1 .services-post .title a {

    font-weight: 400;

    font-size: 32px;

    line-height: 42px;

    color: #fff;

}



.tf-services-wrap.style1 .services-post .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #fff;

    opacity: 0.6;

    -webkit-transition: all 0.5s ease-in-out 0s;

    -moz-transition: all 0.5s ease-in-out 0s;

    -ms-transition: all 0.5s ease-in-out 0s;

    -o-transition: all 0.5s ease-in-out 0s;

    transition: all 0.5s ease-in-out 0s;

}



.tf-services-wrap.style1 .services-post:hover .description {

    opacity: 1;

}



.tf-services-wrap.style1 .services-post .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #fff;

}



.tf-services-wrap.style1 .services-post .tf-button i {

    margin-left: 7px;

}



.tf-services-wrap.style1 .services-post .title {

    margin-bottom: 28px;

}



.tf-services-wrap.style1 .services-post .tf-button span {

    position: relative;

}



.tf-services-wrap.style1 .services-post .tf-button span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0%;

    height: 1px;

    background-color: #fff;

    -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    z-index: 2;

}



.tf-services-wrap.style1 .services-post .tf-button:hover span::after {

    width: 100%;

}



.tf-services-wrap.style1 .services-post .tf-button i {

    display: inline-block;

    margin-left: 9px;

    font-size: 13px;

}



.tf-services-wrap.style1 .services-post .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}



/* style 2 */



.tf-services-wrap.style2 .services-post {

    background-color: #f5f1e8;

    padding: 48px 20px 48px 48px;

    -webkit-transition: all 0.4s ease-in-out 0s;

    -moz-transition: all 0.4s ease-in-out 0s;

    -ms-transition: all 0.4s ease-in-out 0s;

    -o-transition: all 0.4s ease-in-out 0s;

    transition: all 0.4s ease-in-out 0s;

}



.tf-services-wrap.style2 .wrap-services-post .item:nth-child(3n + 1) .services-post {

    background-color: #E8D9EC;

}



.tf-services-wrap.style2 .wrap-services-post .item:nth-child(3n + 2) .services-post {

    background-color: #EFEAE6;

}



.tf-services-wrap.style2 .wrap-services-post .item:nth-child(3n + 3) .services-post {

    background-color: #E5F2E9;

}



.tf-services-wrap.style2 .owl-stage-outer .owl-item:nth-child(3n + 1) .services-post {

    background-color: #E8D9EC;

}



.tf-services-wrap.style2 .owl-stage-outer .owl-item:nth-child(3n + 2) .services-post {

    background-color: #EFEAE6;

}



.tf-services-wrap.style2 .owl-stage-outer .owl-item:nth-child(3n + 3) .services-post {

    background-color: #E5F2E9;

}



.tf-services-wrap.style2 .services-post:hover .icon {

    background: var(--theme-primary-color);

    color: #fff;

    transform: rotateY(180deg);

}



.tf-services-wrap.style2 .services-post:hover .icon * {

    fill: #fff;

    -webkit-transition: all 0.2s ease-in-out 0s;

    -moz-transition: all 0.2s ease-in-out 0s;

    -ms-transition: all 0.2s ease-in-out 0s;

    -o-transition: all 0.2s ease-in-out 0s;

    transition: all 0.2s ease-in-out 0s;

}



.tf-services-wrap.style2 .services-post .icon {

    width: 132px;

    height: 132px;

    font-size: 64px;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    border-radius: 50%;

    margin-bottom: 51px;

    -webkit-transition: all 0.5s ease-in-out 0s;

    -moz-transition: all 0.5s ease-in-out 0s;

    -ms-transition: all 0.5s ease-in-out 0s;

    -o-transition: all 0.5s ease-in-out 0s;

    transition: all 0.5s ease-in-out 0s;

}



.tf-services-wrap.style2 .services-post .icon * {

    fill: #fff;



}



.tf-services-wrap.style2 .services-post .title a {

    font-weight: 400;

    font-size: 32px;

    line-height: 42px;

    color: #222222;

}



.tf-services-wrap.style2 .services-post .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #222222;

    border-bottom: 1px solid #fff;

    padding-bottom: 47px;

    margin-bottom: 48px;

    -webkit-transition: all 0.5s ease-in-out 0s;

    -moz-transition: all 0.5s ease-in-out 0s;

    -ms-transition: all 0.5s ease-in-out 0s;

    -o-transition: all 0.5s ease-in-out 0s;

    transition: all 0.5s ease-in-out 0s;

}



.tf-services-wrap.style2 .services-post:hover .description {

    opacity: 1;

}



.tf-services-wrap.style2 .services-post .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #222222;

}



.tf-services-wrap.style2 .services-post .tf-button i {

    margin-left: 7px;

}



.tf-services-wrap.style2 .services-post .title {

    margin-bottom: 28px;

}



.tf-services-wrap.style2 .services-post .tf-button span {

    position: relative;

}



.tf-services-wrap.style2 .services-post .tf-button span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0%;

    height: 1px;

    background-color: #222222;

    -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    z-index: 2;

}



.tf-services-wrap.style2 .services-post .tf-button:hover span::after {

    width: 100%;

}



.tf-services-wrap.style2 .services-post .tf-button i {

    display: inline-block;

    margin-left: 14px;

    font-size: 14px;

}



.tf-services-wrap.style2 .services-post .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}



/* style 3 */



.tf-services-wrap.style3 .services-post {

    padding: 48px 20px 48px 48px;

    -webkit-transition: all 0.4s ease-in-out 0s;

    -moz-transition: all 0.4s ease-in-out 0s;

    -ms-transition: all 0.4s ease-in-out 0s;

    -o-transition: all 0.4s ease-in-out 0s;

    transition: all 0.4s ease-in-out 0s;

}



.tf-services-wrap.style3 .wrap-services-post .item:nth-child(3n + 1) .services-post {

    background-color: #f5f1e8;

}



.tf-services-wrap.style3 .wrap-services-post .item:nth-child(3n + 2) .services-post {

    background-color: #e6f4ec;

}



.tf-services-wrap.style3 .wrap-services-post .item:nth-child(3n + 3) .services-post {

    background-color: #eaf3fc;

}



.tf-services-wrap.style3 .owl-stage-outer .owl-item:nth-child(3n + 1) .services-post {

    background-color: #f5f1e8;

}



.tf-services-wrap.style3 .owl-stage-outer .owl-item:nth-child(3n + 2) .services-post {

    background-color: #e6f4ec;

}



.tf-services-wrap.style3 .owl-stage-outer .owl-item:nth-child(3n + 3) .services-post {

    background-color: #eaf3fc;

}



.tf-services-wrap.style3 .wrap-services-post .item:nth-child(even) .services-post,

.tf-services-wrap.style3 .wrap-services-post .owl-stage .owl-item:nth-child(even) .services-post {

    margin-top: 108px;

}



.tf-services-wrap.style3 .services-post:hover .icon {

    transform: rotateY(180deg);

}



.tf-services-wrap.style3 .services-post .icon * {

    stroke: #222222;

}



.tf-services-wrap.style3 .services-post .icon {

    width: 180px;

    height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    margin-bottom: 103px;

    -webkit-transition: all 0.5s ease-in-out 0s;

    -moz-transition: all 0.5s ease-in-out 0s;

    -ms-transition: all 0.5s ease-in-out 0s;

    -o-transition: all 0.5s ease-in-out 0s;

    transition: all 0.5s ease-in-out 0s;

}



.tf-services-wrap.style3 .services-post .icon>* {

    width: 180px;

    height: 180px;

    color: #222222;

    font-size: 180px;

}



.tf-services-wrap.style3 .services-post .title a {

    font-weight: 400;

    font-size: 48px;

    line-height: 72px;

    color: #222222;

}



.tf-services-wrap.style3 .services-post .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #222222;

    margin-bottom: 101px;

    -webkit-transition: all 0.5s ease-in-out 0s;

    -moz-transition: all 0.5s ease-in-out 0s;

    -ms-transition: all 0.5s ease-in-out 0s;

    -o-transition: all 0.5s ease-in-out 0s;

    transition: all 0.5s ease-in-out 0s;

}



.tf-services-wrap.style3 .services-post:hover .description {

    opacity: 1;

}



.tf-services-wrap.style3 .services-post .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #222222;

}



.tf-services-wrap.style3 .services-post .tf-button i {

    margin-left: 7px;

}



.tf-services-wrap.style3 .services-post .title {

    margin-bottom: 32px;

}



.tf-services-wrap.style3 .services-post .tf-button span {

    position: relative;

}



.tf-services-wrap.style3 .services-post .tf-button span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0%;

    height: 1px;

    background-color: #222222;

    -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    z-index: 2;

}



.tf-services-wrap.style3 .services-post .tf-button:hover span::after {

    width: 100%;

}



.tf-services-wrap.style3 .services-post .tf-button i {

    display: inline-block;

    margin-left: 14px;

    font-size: 14px;

}



.tf-services-wrap.style3 .services-post .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}



.tf-services-wrap.style3 .owl-nav button {

    width: 80px;

    height: 80px;

    border: 1px solid #EDEDED !important;

    color: #000;

    border-radius: 50%;

    background: #fff;

    font-size: 22px !important;

    position: unset;

}



.tf-services-wrap.style3 .owl-nav button:hover {

    background: #222222 !important;

    color: #fff;

    border-color: #222222 !important;

}



.tf-services-wrap.style3 .owl-nav {

    display: flex;

    align-items: center;

    gap: 12px;

    position: absolute;

    top: -21%;

    right: 19.5%;

}



/* style 4 */



.tf-services-wrap.style4 .services-post:hover .icon {

    color: #222;

    transform: rotateY(180deg);

}



.tf-services-wrap.style4 .services-post .icon * {

    stroke: #222;

}



.tf-services-wrap.style4 .services-post .icon {

    width: 100px;

    height: 100px;

    font-size: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #222;

    margin-bottom: 33px;

    -webkit-transition: all 0.5s ease-in-out 0s;

    -moz-transition: all 0.5s ease-in-out 0s;

    -ms-transition: all 0.5s ease-in-out 0s;

    -o-transition: all 0.5s ease-in-out 0s;

    transition: all 0.5s ease-in-out 0s;

}



.tf-services-wrap.style4 .services-post .title a {

    font-weight: 500;

    font-size: 24px;

    line-height: 36px;

    color: #222;

}



.tf-services-wrap.style4 .services-post .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #666;

}



.tf-services-wrap.style4 .services-post .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #222;

}



.tf-services-wrap.style4 .services-post .tf-button i {

    margin-left: 7px;

}



.tf-services-wrap.style4 .services-post .title {

    margin-bottom: 23px;

}



.tf-services-wrap.style4 .services-post .tf-button span {

    position: relative;

}



.tf-services-wrap.style4 .services-post .tf-button span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0%;

    height: 1px;

    background-color: #222;

    -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    z-index: 2;

}



.tf-services-wrap.style4 .services-post .tf-button:hover span::after {

    width: 100%;

}



.tf-services-wrap.style4 .services-post .tf-button i {

    display: inline-block;

    margin-left: 12px;

    font-size: 14px;

    vertical-align: middle;

}



.tf-services-wrap.style4 .services-post .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}



/* Style5 */

.tf-services-wrap.style5 .item .thumb-images img {

    height: 489px;

    width: 100%;

    object-fit: cover;

    -webkit-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -khtml-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -moz-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -ms-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -o-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    transition: all 1s cubic-bezier(0.24, 0.74, 0.58,1); 

}



.tf-services-wrap.style5 .item .title {

    font-weight: 500;

    font-size: 24px;

    line-height: 36px;

    color: #fff;

    margin-bottom: 0px;

}



.tf-services-wrap.style5 .item .content {

    padding: 24px 24px 24px 24px;

    background: #FFFFFF4D;

    backdrop-filter: blur(20px);

    position: relative;

    display: flex;

    justify-content: space-between;

    position: absolute;

    left: 0;

    right: 0;

    margin: 0 auto;

    bottom: 0px;

    padding-right: 84px;

}



.tf-services-wrap.style5 .item .tf-button1  {

    width: 84px;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    color:#8EBD9D;

    font-size: 16px;

    position: absolute;

    right: 0;

    top: 0;

}



.tf-services-wrap.style5 .item .tf-button1:hover {

    background: var(--theme-primary-color);

    color: #fff;

}

.tf-services-wrap.style5 .item .tf-button i{
    display: inline-block;
    margin-left: 9px;
    font-size: 13px !important;

}
.tf-services-wrap.style5 .item .tf-button:hover i{
    -webkit-animation: toRightFromLeft 0.7s forwards;
    -moz-animation: toRightFromLeft 0.7s forwards;
    animation: toRightFromLeft 0.7s forwards;

}


.tf-services-wrap.style5 .item .service-item {

    position: relative;

    padding: 40px;
    border: 1px solid #EDEDED;

}



.tf-services-wrap.style5 .item .thumb-images {

    overflow: hidden;
    position: relative;
    margin-bottom: 40px;

}

.tf-services-wrap.style5 .item .description {
    color: #666666;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    display: inline-block;
}

.tf-services-wrap.style5 .item:hover .thumb-images img {

    transform: scale(1.07);

}



.tf-services-wrap .owl-prev {

    width: 48px;

    height: 48px;

    background: unset !important;

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    left: -89px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 18px !important;

}



.tf-services-wrap .owl-next {

    width: 48px;

    height: 48px;

    background: unset !important;

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    right: -87px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 18px !important;

}



@keyframes toRightFromLeft {

    49% {

        transform: translate(9px, -9px) scale(0.5);

    }



    50% {

        opacity: 0;

        transform: translate(-9px, 9px) scale(1);

    }



    51% {

        opacity: 1;

    }

}



.border_eff a {

    display: inline !important;

    width: 100%;

    background-repeat: no-repeat;

    background-position-y: 0px;

    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);

    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

    background-size: 0 100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



.border_eff a:hover {

    background-size: 100% 100%;

    color: inherit;

}



/* hover */



.hover-flash .featured-post a {

    overflow: hidden;

}



.hover-flash .featured-post a::before {

    position: absolute;

    top: 0;

    left: -85%;

    z-index: 2;

    display: block;

    content: "";

    width: 50%;

    height: 100%;

    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);

    -webkit-transform: skewX(-25deg);

    transform: skewX(-25deg);

}



.hover-flash:hover .featured-post a::before {

    -webkit-animation: flashshine 1.5s;

    animation: flashshine 1.5s;

}



@keyframes flashshine {

    100% {

        left: 125%;

    }

}



.scale-hover .featured-post img {

    -webkit-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -khtml-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -moz-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -ms-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -o-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

}



.scale-hover .featured-post a {

    overflow: hidden;

    display: block;

    position: relative;

}





.scale-hover:hover .featured-post img {

    transform: scale(1.07);

}





/* process bar */



.tf-process-bar .skill {

    margin-bottom: 20px;

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.tf-process-bar .skill-name {

    font-weight: bold;

    display: flex;

    justify-content: space-between;

    margin-bottom: 12px;

}



.tf-process-bar .progress-bar {

    width: 100%;

    height: 10px;

    background-color: #E3E3E3;

    border-radius: 0px;

    position: relative;

    overflow: hidden;

    border: none;

    box-shadow: none;

}



.tf-process-bar .progress-fill {

    height: 100%;

    background-color: var(--theme-primary-color);

    width: 0;

    transition: width 3.5s ease-in-out;

}



.tf-process-bar .skill-name {

    font-weight: 600;

    font-size: 16px;

    line-height: 24px;

    letter-spacing: 0%;

    color: #222;

}



/* circle bar */



.tf-cirle-bar .progress-container {

    position: relative;

    width: 235px;

    height: 235px;

    margin: auto;

    margin-bottom: 24px;

}



.tf-cirle-bar .progress-text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-weight: 400;

    font-size: 40px;

    line-height: 60px;

    color: #222222;

}



.tf-cirle-bar .tf-cirle-bar {

    text-align: center;

}



.tf-cirle-bar p {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    letter-spacing: 0%;

    color: #222222;

    text-align: center;

    margin: 0;

}



.text-slider span {

    font-style: italic;

    text-decoration: underline;

}



.text-slider.st2 span {

    font-style: unset;

    text-decoration: unset;

    font-weight: 500;

}



.btn-slide1 {

    backdrop-filter: blur(16px);

    -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;

}



.btn-slide1.st2 {

    backdrop-filter: unset;

}



.btn-slide1:hover {

    background: var(--theme-primary-color) !important;

    color: #fff;

}



.btn-slide1.st2:hover {

    color: #fff !important;

}



.wrap-pagination-slider7 {

    border-top: 1px solid #FFFFFF1A;

    border-bottom: 1px solid #FFFFFF1A;

    padding: 21px 0 !important;

    margin-bottom: 24px;

    padding-left: 24px !important;

    padding-right: 24px !important;

}



.wrap-pagination-slider7 .item-wrap2,

.wrap-pagination-slider7 .item-wrap1,

.wrap-pagination-slider7 .item-wrap3 {

    width: 85% !important;

    cursor: pointer;

    -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;

}



.wrap-pagination-slider7 .item-wrap2 {

    margin: 0 auto;

}



.wrap-pagination-slider7 .item-wrap1 {

    margin-right: auto;

}



.wrap-pagination-slider7 .item-wrap3 {

    margin-left: auto;

}



.wrap-pagination-slider7 #slider-5-slide-21-layer-7 {

    border-left: 1px solid #FFFFFF1A;

    border-right: 1px solid #FFFFFF1A;

}



#sliderhome5 .hesperiden.tparrows.tp-rightarrow:before,
#sliderhome6 .hesperiden.tparrows.tp-rightarrow:before {

    content: '\e924' !important;

    font-family: 'cerax2' !important;

}



#sliderhome5 .hesperiden.tparrows.tp-leftarrow:before,
#sliderhome6 .hesperiden.tparrows.tp-leftarrow:before {

    content: '\e925' !important;

    font-family: 'cerax2' !important;

}

#sliderhome6 .sr7-leftarrow {
    background: #C8A07C !important;
    color: #fff !important;
}

#sliderhome6 .sr7-rightarrow {
    background: #fff !important;
    color: #000 !important;
}

#sliderhome6 .sr7-rightarrow:hover {
    background: #C8A07C !important;
    color: #fff !important;
}

#sliderhome6 .sr7-leftarrow:hover {
   opacity: 0.7 !important;
}

#sliderhome6 .sr7-arrows {
    -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;
}

#sliderhome5 .hesperiden.tparrows,
#sliderhome6 .hesperiden.tparrows {

    -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;

}



#sliderhome5 .tp-bullet {

    width: 12px !important;

    height: 12px !important;

    background: #D9D9D9 !important;

    border-radius: 50% !important;

    position: relative;

    flex-shrink: 0;

    left: unset !important;

    top: unset !important;

    -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;

}



#sliderhome5 .tp-bullets {

    display: flex;

    align-items: center;

    gap: 16px;

}



#sliderhome5 .tp-bullet.selected {

    background: #FFFFFF4D !important;

    backdrop-filter: blur(20px) !important;

    width: 20px !important;

    height: 20px !important;

}



.circlehome5 .elementor-button {

    width: 150px;

    height: 150px;

    border: 1px solid #EDEDED;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

}



.circlehome5.st2 .elementor-button {

    width: 84px;

    height: 84px;

    backdrop-filter: blur(20px);

    background: #FFFFFF4D;

    border: none;

}



.circlehome5.st2 .elementor-button svg * {

    fill: #fff;

}



.circlehome5.st2 .elementor-button svg {

    width: 18px;

    height: 18px;

}



.circlehome5 .elementor-button:hover {

    border-color: var(--theme-primary-color) !important;

    background: var(--theme-primary-color) !important;

}



.circlehome5 .elementor-button:hover svg * {

    fill: #fff;

    -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;

}





.circlehome5 .elementor-button svg {

    width: 33px;

    height: 33px;

}



.text-italic-home5 .elementor-heading-title span {

    font-weight: 600;

    font-style: italic;

    color: var(--theme-secondary-color);

}
.text-italic-home5.line .elementor-heading-title span {

    display: inline !important;
    width: 100%;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: linear-gradient(transparent calc(100% - 2px), currentColor 2px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-size: 100% 100%;
}

.text-italic-home6 .elementor-heading-title span {

    font-weight: 600;

    font-style: italic;

    color: #034A44;

}

.text-italic-home7 .elementor-heading-title span {

    font-weight: 600;

    font-style: italic;

    color: #344FA0;

}

.text-italic-home8 .elementor-heading-title span {

    font-weight: 600;

    font-style: italic;

    color: #C8A07C;

}
.text-italic-home9 .elementor-heading-title span {

    font-weight: 600;

    font-style: italic;

    color: #B54845;

}


.wrap-contect-footer2 .inner input {

    background: #FFFFFF1A;

    backdrop-filter: blur(16px);

    font-weight: 500;

    font-size: 14px;

    line-height: 21px;

    color: #fff;

    border-radius: 999px;

    border: unset !important;

    margin: 0;

    padding: 14px 16px;

    height: unset;

}



.wrap-contect-footer2 .inner input::placeholder {

    font-weight: 500;

    font-size: 14px;

    line-height: 21px;

    color: #fff;

}



.wrap-contect-footer2 .inner {

    position: relative;

    margin-bottom: 23px;

}



.wrap-contect-footer2 .inner button {

    padding: unset;

    width: 50px;

    height: 50px;

    color: #fff;

    background: unset !important;

    position: absolute;

    top: 50%;

    right: 0;

    transform: translateY(-50%);

    font-size: 21px;

}



.wrap-contect-footer2 .inner button:hover {

    color: var(--theme-primary-color);

}



.wrap-contect-footer2 .wpcf7-list-item-label {

    font-weight: 400;

    font-size: 14px;

    line-height: 21px;

    color: #ffffff6b;

}



.wrap-contect-footer2 .wpcf7-list-item input {

    margin: 0;

    width: 20px;

    height: 20px;

    border: 1px solid #ffffff6b;

    background: transparent;

    accent-color: #202020 !important;

    background-color: #202020 !important;

    -webkit-appearance: none !important;

    outline: none;

    vertical-align: middle;

    margin-right: 7px;

}



.wrap-contect-footer2 .wpcf7-list-item input:checked {

    -webkit-appearance: checkbox !important;

}



.wrap-contect-footer2 .wpcf7-list-item {

    margin: 0;

}



.tes-home5 .item-testimonial {

    backdrop-filter: blur(20px);

    padding: 39px 20px 40px 41px !important;

}



.posthome5 .owl-stage-outer {

    margin-right: -100%;

}



.social-slider {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    -webkit-transition: all 0.3s ease-in-out !important;

    -moz-transition: all 0.3s ease-in-out !important;

    -ms-transition: all 0.3s ease-in-out !important;

    -o-transition: all 0.3s ease-in-out !important;

    transition: all 0.3s ease-in-out !important;

    font-size: 16px !important;

}



.social-slider:hover {

    background-color: var(--theme-primary-color) !important;

    color: #fff !important;

    border-color: var(--theme-primary-color);

}



.imagebox-home7 .tf-imagebox-type3.style2 p {

    color: #666666;

}



.imagebox-home7 .tf-imagebox-type3.style2 .tf-button {

    color: #222222;

}



.imagebox-home7 .tf-imagebox-type3.style2 .content {

    padding: 0px 0px 17px 41px;

    margin-top: -19px;

    background: #fff;

    backdrop-filter: unset;

}



.counterhome7.home5 {

    width: 226px;

    height: 226px;

    backdrop-filter: unset;

    border: 1px solid #EDEDED;

}

.counterhome7.home5 .counter-title::after {

    content: unset;

}



.counterhome7 {

    width: 270px;

    height: 270px;

    border-radius: 50%;

    background: #FFFFFF4D;

    backdrop-filter: blur(20px);

    border-radius: 50%;

    position: relative;

    display: flex;

    align-items: center !important;

    justify-content: center !important;

    z-index: 10;

}





.counterhome7 .elementor-widget-container {

    display: flex;

    align-items: center;

}



.counterhome7::after {

    content: '';

    width: 100%;

    height: 100%;

    border-radius: 50%;

    position: absolute;

    top: 0;

    right: -22%;

    border: 1px solid #FFFFFF4D;

    z-index: 1;

    clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%);

}



.counterhome7 .counter-title::after {

    content: '\e900';

    font-family: 'cerax';

    display: block;

    font-size: 30px;

    margin-top: 32px;

}



.teshome7 .tf-testimonial-carousel .owl-nav button {

    width: 80px !important;

    height: 80px !important;

    border: 1px solid #EDEDED !important;

    color: #000;

    border-radius: 50%;

    background: #fff;

    font-size: 28px !important;

    position: unset !important;

}



.teshome7 .tf-testimonial-carousel .owl-nav button:hover {

    border-color: var(--theme-primary-color) !important;

}



.teshome7 .tf-testimonial-carousel .owl-nav {

    display: flex;

    align-items: center;

    gap: 12px;

    position: absolute;

    right: 0;

    bottom: 9%;

}



.group-btn-home8 .elementor-button {

    backdrop-filter: blur(16px);

}



.custom-copyright a {

    font-weight: 700;

}



.custom-copyright a:hover {

    color: var(--theme-primary-color) !important;

}



.col-sticky {

    position: sticky !important;

    top: 0px !important;

    margin-bottom: auto !important;

}
@media only screen and (max-width: 1440px) {
#sliderhome2 #SR7_20_1 .custom.sr7-bullets {
    display: none !important;
}
#sliderhome2 #SR7_20_1-79-5,#sliderhome2 #SR7_20_1-79-0,
#sliderhome2 .sr7-leftarrow,
#sliderhome2 .sr7-rightarrow{
    display: none !important;
}

}
@media only screen and (max-width: 1300px) {

    .group-counter-home8 {

        padding-left: 60px !important;

    }



    .group-counter-home8 .tf-cirle-bar .progress-container,

    .group-counter-home8 .tf-cirle-bar .progress-container canvas {

        width: 150px !important;

        height: 150px !important;

    }

}



@media only screen and (max-width: 1200px) {

    .tf-services-wrap.style3 .services-post .icon {

        width: 80px;

        height: 80px;

        margin-bottom: 40px;

    }



    .tf-services-wrap.style3 .services-post .title a {

        font-size: 25px;

        line-height: 35px;

    }



    .tf-services-wrap.style3 .services-post .title {

        margin-bottom: 20px;

    }



    .tf-services-wrap.style3 .services-post .description {

        margin-bottom: 50px;

    }



    .tf-services-wrap.style3 .wrap-services-post .item:nth-child(even) .services-post,

    .tf-services-wrap.style3 .wrap-services-post .owl-stage .owl-item:nth-child(even) .services-post {

        margin-top: 50px;

    }



    .tf-portfolios-wrap.style4 .title {

        font-size: 40px;

        line-height: 50px;

    }



    .tf-services-wrap.style2 .services-post {

        padding: 20px;

    }



    .social-slider {

        font-size: 12px !important;

    }



    .tf-services-wrap.style3 .owl-nav {

        display: none;

    }



    .wrap-pagination-slider7 {

        padding: 10px 0 !important;

        margin-bottom: 10px;

        padding-left: 10px !important;

        padding-right: 10px !important;

    }



    .counterhome7 {

        width: 200px;

        height: 200px;

    }

}
@media only screen and (max-width: 1024px) {
    .wrap-services-post.column-3 .item, .wrap-team-post.column-3 .item, .case-study-container.column-3 .item {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}


@media only screen and (max-width: 991px) {
    .tf-portfolios-wrap.style4 .title {
        font-size: 30px !important;
        line-height: 45px !important;
    }



    .wrap-team-post.column-4 .item,

    .wrap-portfolios-post.column-4 .item,

    .case-study-container.column-4 .item,

    .wrap-services-post.column-4 .item {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 50%;

        flex: 0 0 50%;

        max-width: 50%;

    }



    .wrap-team-post.column-5 .item,

    .case-study-container.column-5 .item,

    .wrap-portfolios-post.column-5 .item,

    .wrap-services-post.column-5 .item {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 50%;

        flex: 0 0 50%;

        max-width: 50%;

    }



    .tf-services-wrap.style3 .wrap-services-post .item:nth-child(even) .services-post,

    .tf-services-wrap.style3 .wrap-services-post .owl-stage .owl-item:nth-child(even) .services-post {

        margin-top: 0px;

    }



    .tf-portfolios-wrap.style3 .wrap-thumbnail .thumbnail-image img,

    .tf-portfolios-wrap.style3 .wrap-thumbnail {

        height: 600px;

    }



    .tf-portfolios-wrap.style4 .title {

        font-size: 30px;

        line-height: 40px;

    }



    .tf-portfolios-wrap.style4 .featured-post img {

        height: 350px;

    }



    .tf-portfolios-wrap.style4 .case-study-container .item {

        padding-top: 30px !important;

        padding-bottom: 30px !important;

    }



    .counterhome7 {

        width: 200px;

        height: 200px;

    }



    .wrap-pagination-slider7.rev_break_columns {

        display: none !important;

    }



    .group-counter-home8 {

        padding-left: 15px !important;

    }
    .wrap-team-post.tablet-column-1 .item,
    .wrap-portfolios-post.column-1 .item,
    .case-study-container.tablet-column-1 .item,
    .wrap-services-post.tablet-column-1 .item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;

    }

    .wrap-team-post.tablet-column-2 .item,
    .wrap-portfolios-post.column-2 .item,
    .case-study-container.tablet-column-2 .item,
    .wrap-services-post.tablet-column-2 .item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }



    .wrap-team-post.tablet-column-3 .item,
    .wrap-portfolios-post.column-3 .item,
    .case-study-container.tablet-column-3 .item,
    .wrap-services-post.tablet-column-3 .item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }



}



@media only screen and (max-width: 767px) {
    .wrap-step-list .card-step-list .inner-left,
    .wrap-step-list .card-step-list .thumbnail-select,
    .wrap-step-list .card-step-list .thumbnail-select img {
        width: 100% !important;
    }
    .contacthome1.st2.home7 .wpcf7-form {
        padding: 40px 20px 39px 20px !important;
    }
    .tf-portfolios-wrap.style3 .wrap-thumbnail {
        height: 550px !important;
    }
    .contacthome1.home7 .wpcf7-form button {
        padding: 15px 72px !important;
    }
    #SR7_20_1 .persephone.sr7-arrows {
        display: none;
    }
    .tf-services-wrap.style5 .item .tf-button1 {
        width: 60px;
    }
    .tf-services-wrap.style5 .item .content {
        padding: 15px 15px 15px 24px;
        padding-right: 77px;
    }
    .tf-portfolios-wrap.style1 .custom-pagination-wrapper {
        margin-top: 0px;
    }
    .tf-portfolios-wrap.style4 .content {
        gap: 20px;
        align-items: start !important;
    }
    .tf-portfolios-wrap .owl-dot {
        width: 15px !important;
        height: 1px;
        margin: 0 1px !important;
    }
    .tf-services-wrap.style5 .item .service-item {
        padding: 40px 20px;

    }

    .tf-services-wrap.style1 .services-post {
        padding: 40px 20px 40px 20px;
    }
    .contacthome1 .wpcf7-form {
        padding: 40px 20px 39px 20px;
    }

    .wrap-pagination-slider7 {

        display: none !important;

    }



    .wrap-team-post .item,

    .case-study-container .item,

    .wrap-portfolios-post .item,

    .wrap-services-post.column-2 .item,

    .wrap-services-post .item {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

        max-width: 100%;

        margin-top: 0 !important;

    }



    .owl-carousel .owl-nav,

    .group-navigation {

        display: none;

    }



    .case-study-container.column-3 .item,

    .wrap-team-post.column-3 .item,

    .wrap-services-post.column-3 .item {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

        max-width: 100%;

    }



    .case-study-container.column-4 .item,

    .wrap-team-post.column-4 .item,

    .wrap-services-post.column-4 .item {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

        max-width: 100%;

    }



    .case-study-container.column-5 .item,

    .wrap-team-post.column-5 .item,

    .wrap-services-post.column-5 .item {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

        max-width: 100%;

    }



    .tf-portfolios-wrap.style4 .content {

        gap: 20px;

        flex-direction: column;

        align-items: flex-start;

    }
    .tf-portfolios-wrap.style4 .content .inner-left, .tf-portfolios-wrap.style4 .content .inner-right {
        width: 100% !important;
    }
    .tf-portfolios-wrap.style4 .title {
        font-size: 40px;
        line-height: 50px;
    }



    .tf-portfolios-wrap.style4 .content .inner-left,

    .tf-portfolios-wrap.style4 .content .inner-right {

        width: 100%;

    }



    .contacthome1 h2 {

        font-size: 30px !important;

    }



    .imagebox-home7 .tf-imagebox-type3.style2 .content {

        padding: 0;

        padding-top: 20px;

    }



    .services-home7 .wrap-services-post .item {

        -ms-flex: 0 0 50%;

        flex: 0 0 50%;

        max-width: 50%;

    }



    .tf-services-wrap.style4 .services-post .title a {

        font-size: 18px;

        line-height: 30px;

    }



    .tf-services-wrap.style4 .services-post .title {

        margin-bottom: 10px;

    }

}
@media only screen and (max-width: 600px) {
    .services-home7 .wrap-services-post .item {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* Single Case study */

.single-case-study #themesflat-content {

    padding: 0;

    padding-bottom: 100px;

}



.single-case-study .content-top {

    background: #222;

    padding: 48px 48px 45px 48px;

    margin-top: -120px;

    margin-bottom: 102px;

    position: relative;

    z-index: 5;

}



.single-case-study .content-top h1 {

    font-family: 'Poppins';

    font-weight: 400;

    font-size: 48px;

    color: #fff;

    margin-bottom: 12px;

    line-height: 1.5em;

}



.single-case-study .content-top p {

    font-family: 'Poppins';

    font-weight: 400;

    font-size: 16px;

    line-height: 180%;

    color: #666;

    margin-bottom: 76px;

}



.single-case-study .content-top .category {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    text-transform: uppercase;

}



.metafield-content {

    display: flex;

    gap: 60px;

    margin-bottom: 56px;

    padding-bottom: 38px;

    border-bottom: 1px solid #EDEDED;

}



.metafield-content .share-content {

    width: 37%;

}
.metafield-content .meta-content {
    width: 62%;
}


.share-content h4 {

    font-family: 'Poppins';

    font-weight: 400;

    font-size: 32px;

    line-height: 100%;

    color: #222;

    margin-bottom: 40px;

    margin-top: 9px;

}



.share-content p {

    font-family: 'Poppins';

    font-weight: 400;

    font-size: 16px;

    line-height: 180%;

    color: #666;

    border-bottom: 1px solid #EDEDED;

    padding-bottom: 10px;

    margin-bottom: 10px !important;

    max-width: 220px;

}



.share-content .themesflat-socials {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}





.share-content .themesflat-socials li {

    background: transparent;

    margin: 0 !important;

}



.share-content .themesflat-socials li a {

    border: 1px solid #EDEDED;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;



}



.share-content .themesflat-socials li a:hover {

    background: var(--theme-primary-color);

    border-color: var(--theme-primary-color);

}



.metafield-content .meta-content ul {

    display: flex;

    flex-direction: column;

       gap: 17px;

}



.metafield-content .meta-content ul li {

    display: flex;

    align-items: center;

    gap: 16px;

}



.metafield-content .meta-content ul li strong {

    font-family: 'Poppins';

    font-weight: 600;

    font-size: 16px;

    line-height: 100%;

    color: #222;

    width: calc(30% - 8px);

}



.metafield-content .meta-content ul li span {

    font-family: 'Poppins';

    font-weight: 400;

    font-size: 16px;

    line-height: 180%;

    color: #666;

    width: calc(70% - 8px);

}





/* Single Service */

.service-single .feature-image {

    margin-bottom: 40px;

}



.service-single .service-title {

    color: #222222;

    font-family: 'Poppins';

    font-weight: 400;

    font-size: 32px;

    margin-bottom: 12px;

}



.service-single .meta-content {

    display: flex;

    align-items: center;

    gap: 28px;

    font-family: 'Poppins';

    font-weight: 400;

    font-size: 16px;

    color: #666;

}



.service-single .meta-content .category {

    display: flex;

    align-items: center;

}



.service-single .meta-content .category svg {

    margin-right: 8px;

}



/* related case-study */



.related-case-study {

    margin-top: 107px;

}



.related-service .title-related,

.related-case-study .title-related {

    font-weight: 400;

    font-size: 56px;

    color: #222;

    max-width: calc(100% - 200px);

    margin-bottom: 13px;

}



.related-service .description-related,

.related-case-study .description-related {

    font-weight: 400;

    font-size: 16px;

    color: #666;

    max-width: calc(100% - 200px);

}



.tf-related-post {

    margin-top: 53px;

}



.tf-related-post .featured-post {

    position: relative;

    margin-bottom: 34px;

}



.tf-related-post .featured-post img {

    height: 225px;

    object-fit: cover;

    width: 100%;

}



.tf-related-post .blog-post .title {

    font-weight: 400;

    font-size: 24px;

    line-height: 36px;

    margin-bottom: 33px;

}



.tf-related-post .blog-post .title a {

    display: inline !important;

    width: 100%;

    background-repeat: no-repeat;

    background-position-y: 0px;

    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);

    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

    background-size: 0 100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



.tf-related-post .blog-post .title a:hover {

    color: var(--theme-primary-color);

    background-size: 100% 100%;

}



.tf-related-post .blog-post .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #666666;

    margin-bottom: 30px;

}



.tf-related-post .blog-post .meta-date {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #222222;

    margin-bottom: 15px;

}



.tf-related-post .blog-post .meta-date i {

    color: #666666;
    font-size: 18px;
    margin-right: 4px;
    margin-top: -4px;
    display: inline-block;
    vertical-align: middle;

}



.tf-related-post .blog-post .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #222;

}



.tf-related-post .blog-post .tf-button:hover {

    color: var(--theme-primary-color);

}



.tf-related-post .blog-post .tf-button i {

    margin-left: 7px;

}



.tf-related-post .blog-post .tf-button span {

    position: relative;

    text-decoration: underline;

}



.tf-related-post .blog-post .tf-button i {

    display: inline-block;

    margin-left: 9px;

    font-size: 12px;
    
    vertical-align: middle;

}



.tf-related-post .blog-post .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}



.custom-pagination-wrapper {

    display: flex;

    align-items: center;

    color: #222;

    font-weight: 600;

    font-size: 18px;

    gap: 24px;

    margin-top: 56px;

}



.custom-pagination-wrapper:has(.disabled) {

    display: none;

}



.tf-related-post .owl-dots {

    text-align: center;

    display: flex;

    gap: 5px;

    align-items: center;

    justify-content: center;

}


.custom-pagination-wrapper .owl-dot,
.tf-related-post .owl-dot {

    background: rgba(34, 34, 34, 0.2) !important;

    width: 125px;

    height: 1px;

    margin: 0 2.5px;

    position: relative;

}



.custom-pagination-wrapper  .owl-dot::before,
.tf-related-post .owl-dot::before {

    height: 10px;

    width: 100%;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

    content: '';

    background-color: transparent;

}



.custom-pagination-wrapper .owl-dot.active,
.tf-related-post .owl-dot.active {

    background: rgba(34, 34, 34, 1) !important;

}



.tf-related-post .owl-nav button {

    position: absolute;

    top: -160px;

    right: 0;

    width: 80px;

    height: 80px;

    background: #fff !important;

    color: #222 !important;

    border: 1px solid #EDEDED !important;

    border-radius: 50%;

}



.tf-related-post .owl-nav button.owl-prev {

    right: 100px;

}



.tf-related-post .owl-nav button:hover {

    background-color: #222 !important;

    color: #fff !important;

    border-color: #222 !important;

}



.related-service {

    padding-top: 102px;

    padding-bottom: 102px;

    background: #222;

}





.related-service .tf-related-post .custom-pagination-wrapper,

.related-service .tf-related-post .blog-post .tf-button,

.related-service .tf-related-post .blog-post .title a,

.related-service .title-related {

    color: #fff;

}



.related-service .tf-related-post .blog-post .meta-date {

    color: #666;

}



.related-service .tf-related-post .owl-dot {

    background: rgba(255, 255, 255, 0.2) !important;

}



.related-service .tf-related-post .owl-dot.active {

    background: rgba(255, 255, 255, 1) !important;

}



.tf-related-post .owl-carousel .owl-stage-outer {

    overflow: visible;

}



.related-case-study,

.related-service {

    overflow: hidden;

}



.related-service .tf-related-post .owl-nav button {

    background: transparent !important;

    color: #fff !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-radius: 50%;

}



.related-service .tf-related-post .owl-nav button.disabled {

    cursor: not-allowed;

}



.related-service .tf-related-post .owl-nav button:hover {

    background-color: #fff !important;

    color: #222 !important;

    border-color: #fff !important;

}



/* team */

.item-team {

    position: relative;

}



.item-team .featured-post img {

    height: 500px;

    object-fit: cover;

    -webkit-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -khtml-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -moz-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -ms-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    -o-transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

    transition: all 1s cubic-bezier(0.24, 0.74, 0.58, 1);

}
.style2 .item-team .featured-post img {
    height: 225px;

}
.style2 .item-team a {
    color: #666666;
}


.item-team:hover .featured-post img {

    transform: scale(1.05);

}



.item-team .featured-post {

    position: relative;

    overflow: hidden;

    cursor: pointer;

}



.item-team h6 a,

.item-team h6 {

    font-weight: 400;

    font-size: 24px;

    color: #fff;

    margin: 0;

    margin-bottom: 2px;

}



.item-team a {

    font-weight: 400;

    font-size: 16px;

    color: #fff;

    margin: 0;

}

.item-team p{

    display: none;

}

.item-team .content {

    position: relative;

    backdrop-filter: blur(20px);

    background: rgba(255, 255, 255, 0.3);

    padding: 24px 24px 24px 24px;

    width: calc(100% - 16px);

    margin: 0 8px;

    position: absolute;

    left: 0;

    right: 0;

    bottom: 8px;

    z-index: 5;

    -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;



}



.item-team:hover .content {

    bottom: 30px;

}







.hover-flash-img .featured-post::before {

    position: absolute;

    top: 0px;

    left: -85%;

    z-index: 2;

    display: block;

    content: "";

    width: 50%;

    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);

}



.hover-flash-img:hover .featured-post::before {

    -webkit-animation: flashshine 1.5s;

    animation: flashshine 1.5s;

}



@keyframes flashshine {

    100% {

        left: 125%;

    }

}



.item-team {

    position: relative;

    overflow: hidden;

}



.item-team  .wrap-social {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 8px;

    position: absolute;

    left: -30px;

    top: 8px;

    padding: 0;

    margin: 0;

    visibility: hidden;

    opacity: 0;

    transition: 0.5s all;

}



.item-team:hover .wrap-social {

    visibility: visible;

    opacity: 1;

    left: 8px;

    top: 8px;

}



.item-team  .wrap-social li a {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background-color: #666;

    color: #fff;

}



.item-team  .wrap-social li a:hover {

    background: var(--theme-primary-color);

}



/* style2 */

.style2 .item-team .content {

    all: unset;

}



.style2 .item-team .content .title {

    font-weight: 500;

    font-size: 20px;

    color: #222;

    margin-top: 24px;

    margin-bottom: 12px;

}



.style2 .item-team .description {

    font-weight: 400;

    font-size: 16px;

    color: #666;

}



/* Team single */

.group-single-content {

    display: flex;



}



.group-single-content .feature-image {

    width: 40%;

}



.group-single-content .content-single {

    width: 60%;

    flex: 1;

    height: 90vh;

    overflow-y: scroll;

}



.group-single-content .team-title {

    font-weight: 400;

    font-size: 48px;

    line-height: 83px;

    color: #222;

}



.group-single-content .category {

    font-weight: 400;

    font-size: 16px;

    color: #666;

    display: flex;

    align-items: center;

    gap: 14px;

}



.social-group {

    margin-top: 40px;

}



.social-group h6 {

    font-weight: 400;

    font-size: 32px;

    margin-bottom: 24px;

}



.social-group .wrap-social {

    all: unset;

    display: flex;

    align-items: center;

    gap: 16px;

    list-style: none;

    padding: 0;

    margin: 0;

}



.social-group .wrap-social li a {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid #EDEDED;

    background-color: #fff;

    color: #222;

}



.social-group .wrap-social li a:hover {

    background: var(--theme-primary-color);

    border-color: var(--theme-primary-color);

    color: #fff;

}



.single-team .content-area {

    float: unset !important;

    width: unset !important;

    padding-right: unset !important;

}



.group-single-content {

    display: flex;

    gap: 40px 60px;

    background: #fff;

    width: 1100px;

    padding: 40px;

    position: fixed;

    top: 0;

    right: 0;

    z-index: 99999;

    transform: translateX(50%);

    -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;

    height: 100%;

    opacity: 0;

    visibility: hidden;

}



.group-single-content.active {

    transform: translateX(0%);

    -webkit-transition: all 0.8s ease-in-out;

    -moz-transition: all 0.8s ease-in-out;

    -ms-transition: all 0.8s ease-in-out;

    -o-transition: all 0.8s ease-in-out;

    transition: all 0.8s ease-in-out;

    opacity: 1;

    visibility: visible;

}



.group-single-content .btn-switch {

    width: 50px;

    height: 50px;

    background: var(--theme-secondary-color);

    color: #fff;

    position: absolute;

    left: -50px;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    cursor: pointer;

    -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;

}



.group-single-content .btn-switch:hover {

    background: #fff;

    color: #181818;

}



.group-single-content .content-single::-webkit-scrollbar {

    display: none;

}



.group-overlay-team .overlay-team {

    content: '';

    background: #24283E;

    opacity: 50%;

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    z-index: 9999;

    cursor: url(../img/close.svg), auto;

    opacity: 0;

    visibility: hidden;

    -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;

}



.icon-close-team {

    position: fixed;

    right: 30px;

    top: 30px;

    z-index: 99999999;

    color: #fff;

    background: #24283E;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    text-align: center;

    border-radius: 100%;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease-in-out;

}



.icon-close-team:hover {

    -webkit-transform: rotate(180deg);

}



.icon-close-team.active {

    opacity: 1;

    visibility: visible;

}



.group-overlay-team .overlay-team.active {

    opacity: 0.5;

    visibility: visible;

}

@media only screen and (max-width: 1480px) {
    .tf-services-wrap.style3 .services-post .title a {
        font-size: 30px;
        line-height: 40px;
    }
}

@media only screen and (max-width: 1200px) {

    .group-single-content {

        flex-direction: column;

        width: 80%;

        overflow: scroll;

    }



    .group-single-content .content-single {

        overflow: visible;

    }



    .group-single-content .feature-image,

    .group-single-content .content-single {

        width: 100%;

    }

}



@media only screen and (max-width: 767px) {

    .group-single-content {

        padding: 20px;

    }



}



/* portfolio */



.tf-portfolios-wrap.style1 .featured-post img {

    width: 100%;

    height: 455px;

    object-fit: cover;

}



.tf-portfolios-wrap.style1 .featured-post {

    margin-bottom: 0px;

}
.tf-portfolios-wrap.style1 .content {

    padding: 32px;

    background: #FBFBFB;
    
}
.tf-portfolios-wrap.style1 .custom-pagination-wrapper {

    justify-content: center;

    margin-top: 48px;
}


.tf-portfolios-wrap.style1 .title {

    font-weight: 400;

    font-size: 32px;

    line-height: 48px;

    margin-bottom: 9px;

}



.tf-portfolios-wrap.style1 .category-portfolio a {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #222222;

}



.tf-portfolios-wrap.style1 .category-portfolio a:hover {

    color: var(--theme-primary-color);

}



.tf-portfolios-wrap.style1 .category-portfolio i {

    margin-right: 5px;

    font-size: 18px;

    vertical-align: text-top;

}



/* style 2 */



.tf-portfolios-wrap.style2 .featured-post img {

    width: 100%;

    height: 330px;

    object-fit: cover;

}



.tf-portfolios-wrap.style2 .featured-post {

    margin-bottom: 41px;

    position: relative;

}



.tf-portfolios-wrap.style2 .title {

    font-weight: 500;

    font-size: 24px;

    line-height: 36px;

    margin-bottom: 9px;

    backdrop-filter: blur(20px);

    background: #0000001A;

    padding: 14px 24px;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    margin: 0;

    z-index: 10;

}



.tf-portfolios-wrap.style2 .title a {

    color: #fff;

}



.tf-portfolios-wrap.style2 .title a::before {

    display: none;

}



.tf-portfolios-wrap.style2 .category-portfolio a {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #222222;

}



.tf-portfolios-wrap.style2 .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    letter-spacing: 0%;

    color: #666;

}



.tf-portfolios-wrap.style2 .category-portfolio i {

    margin-right: 5px;

    font-size: 18px;

    vertical-align: text-top;

}



.tf-portfolios-wrap.style2 .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #222;

}



.tf-portfolios-wrap .tf-button:hover {

    background-color: transparent !important;

}



.tf-portfolios-wrap.style2 .tf-button i {

    margin-left: 7px;

}



.tf-portfolios-wrap.style2 .tf-button span {

    position: relative;

}



.tf-portfolios-wrap.style2 .tf-button span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 100%;

    height: 1px;

    background-color: #222;

    -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    z-index: 2;

}



.tf-portfolios-wrap.style2 .tf-button:hover span::after {

    width: 0%;

}



.tf-portfolios-wrap.style2 .tf-button i {

    display: inline-block;

    margin-left: 14px;

    font-size: 14px;

}



.tf-portfolios-wrap.style2 .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}



/* style 3 */



.tf-portfolios-wrap.style3 .title {

    margin-bottom: 26px;

    font-weight: 600;

    font-size: 32px;

    line-height: 48px;

}



.tf-portfolios-wrap.style3 .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #fff;

}



.tf-portfolios-wrap.style3 .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #fff;

}



.tf-portfolios-wrap.style3 .tf-button i {

    margin-left: 7px;

}



.tf-portfolios-wrap.style3 .tf-button span {

    position: relative;

}



.tf-portfolios-wrap.style3 .tf-button span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0%;

    height: 1px;

    background-color: #fff;

    -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    z-index: 2;

}



.tf-portfolios-wrap.style3 .tf-button:hover span::after {

    width: 100%;

}



.tf-portfolios-wrap.style3 .tf-button i {

    display: inline-block;

    margin-left: 11px;

    font-size: 13px;

    vertical-align: middle;

}



.tf-portfolios-wrap.style3 .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}

.tf-portfolios-wrap.style3 .item {
    position: relative;
}

.tf-portfolios-wrap.style3 .hover-item {
    content: '';
    width: 100%;
    height: 1000%;
    position: absolute;
    bottom: 0%;
    left: 0;
    z-index: 2;
}

.tf-portfolios-wrap.style3 .portfolios-post {
    position: relative;
    z-index: 10;
}

.tf-portfolios-wrap.style3 .content {

    padding: 32px;

    -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;

    background: #FFFFFF66;

    backdrop-filter: blur(30px);

}



.tf-portfolios-wrap.style3 .case-study-post:hover .content,

.tf-portfolios-wrap.style3 .item.active .case-study-post .content {

    background: #fff;

}



.tf-portfolios-wrap.style3 .case-study-post:hover .title a,

.tf-portfolios-wrap.style3 .case-study-post:hover .title,

.tf-portfolios-wrap.style3 .item.active .case-study-post .title a,

.tf-portfolios-wrap.style3 .item.active .case-study-post .title {

    color: #24283E;

}



.tf-portfolios-wrap.style3 .case-study-post:hover .category-case-study a,

.tf-portfolios-wrap.style3 .item.active .case-study-post .category-case-study a {

    color: var(--theme-secondary-color);

}



.tf-portfolios-wrap.style3 .title a {

    color: #fff;

}



.tf-portfolios-wrap.style3 .title {

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    display: -webkit-box;

    overflow: hidden;

    text-overflow: ellipsis;

    word-break: break-word;

    color: #fff;

    -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;

}



.tf-portfolios-wrap.style3 .category-case-study a {

    font-size: 12px;

    font-weight: 500;

    line-height: 20px;

    letter-spacing: 0.1em;

    color: #fff;

    text-transform: uppercase;

}



.tf-portfolios-wrap.style3 .category-case-study a:hover {

    color: var(--theme-secondary-color);

}



.tf-portfolios-wrap.style3 .wrap-thumbnail {

    position: relative;

    width: 100%;

    height: 964px;

}



.tf-portfolios-wrap.style3 .wrap-thumbnail .thumbnail-image {

    -webkit-transition: all 2s cubic-bezier(0.24, 0.74, 0.58, 1);

    -khtml-transition: all 2s cubic-bezier(0.24, 0.74, 0.58, 1);

    -moz-transition: all 2s cubic-bezier(0.24, 0.74, 0.58, 1);

    -ms-transition: all 2s cubic-bezier(0.24, 0.74, 0.58, 1);

    -o-transition: all 2s cubic-bezier(0.24, 0.74, 0.58, 1);

    transition: all 2s cubic-bezier(0.24, 0.74, 0.58, 1);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

}




.tf-portfolios-wrap.style3 .wrap-thumbnail .thumbnail-image a::after {

    content: '';

    background: #00000033;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}



.tf-portfolios-wrap.style3 .wrap-thumbnail .thumbnail-image.active {

    opacity: 1;

}



.tf-portfolios-wrap.style3 .wrap-thumbnail .thumbnail-image img {

    width: 100%;

    height: 964px;

    object-fit: cover;

}



.tf-portfolios-wrap.style3 .wrap-portfolios-post {

    position: absolute;

    bottom: 16px;

    width: calc(100% - 32px);

    left: 0;

    right: 0;

    margin: 0 auto;

}



.tf-portfolios-wrap.style3 .wrap-portfolios-post>* {

    padding: 0;

}



/* style 4 */



.tf-portfolios-wrap.style4 .wrap-portfolios-post .item {

    -ms-flex: 0 0 100% !important;

    flex: 0 0 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    padding-top: 64px !important;

    padding-bottom: 64px !important;

    -webkit-transition: all 0.4s ease-in-out 0s;

    -moz-transition: all 0.4s ease-in-out 0s;

    -ms-transition: all 0.4s ease-in-out 0s;

    -o-transition: all 0.4s ease-in-out 0s;

    transition: all 0.4s ease-in-out 0s;

}
.tf-portfolios-wrap.style4 .wrap-portfolios-post .item:last-child {
    padding-bottom: 0px !important;
}



.tf-portfolios-wrap.style4 .wrap-portfolios-post .item:not(:last-child) {

    border-bottom: 1px solid #EDEDED;

}



.tf-portfolios-wrap.style4 .wrap-portfolios-post .item.active {

    padding-bottom: 0 !important;

}



.tf-portfolios-wrap.style4 .wrap-portfolios-post .item.active .title {

    color: #C8A07C;

}



.tf-portfolios-wrap.style4 .title {

    font-weight: 400;

    font-size: 56px;

    line-height: 83px;

    cursor: pointer;

}



.tf-portfolios-wrap.style4 .title .count {

    font-weight: 400;

    font-size: 24px;

    line-height: 36px;

    vertical-align: text-top;

    margin-right: 18px;

}



.tf-portfolios-wrap.style4 .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #666;

    margin-bottom: 21px;

}



.tf-portfolios-wrap.style4 .content {

    display: flex;

    gap: 40px;

    align-items: center;

}



.tf-portfolios-wrap.style4 .content .inner-left,

.tf-portfolios-wrap.style4 .content .inner-right {

    width: 50%;

}



.tf-portfolios-wrap.style4 .featured-post img {

    height: 450px;

    width: 100%;

    object-fit: cover;

    object-position: top;

}



.tf-portfolios-wrap.style4 .featured-post {

    margin-top: 32px;

    display: none;

}



.tf-portfolios-wrap.style4 .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #222;

}



.tf-portfolios-wrap.style4 .tf-button i {

    margin-left: 7px;

}



.tf-portfolios-wrap.style4 .tf-button span {

    position: relative;

}



.tf-portfolios-wrap.style4 .tf-button span::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0%;

    height: 1px;

    background-color: #222;

    -webkit-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -khtml-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -moz-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -ms-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    -o-transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    transition: all 0.25s cubic-bezier(0, 0, 0.76, 1);

    z-index: 2;

}



.tf-portfolios-wrap.style4 .tf-button:hover span::after {

    width: 100%;

}



.tf-portfolios-wrap.style4 .tf-button i {

    display: inline-block;

    margin-left: 14px;

    font-size: 14px;

}



.tf-portfolios-wrap.style4 .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}



/* style 5 */



.tf-portfolios-wrap.style5 .featured-post {

    position: relative;

    margin-bottom: 34px;

}



.tf-portfolios-wrap.style5 .featured-post img {

    object-fit: cover;
    width: 100%;
    height: 225px;

}



.tf-portfolios-wrap.style5 .blog-post .title {

    font-weight: 400;

    font-size: 24px;

    line-height: 36px;

    margin-bottom: 33px;

}



.tf-portfolios-wrap.style5 .blog-post .title a {

    display: inline !important;

    width: 100%;

    background-repeat: no-repeat;

    background-position-y: 0px;

    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);

    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

    background-size: 0 100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



.tf-portfolios-wrap.style5 .blog-post .title a:hover {

    color: var(--theme-primary-color);

    background-size: 100% 100%;

}



.tf-portfolios-wrap.style5 .blog-post .description {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #666666;

    margin-bottom: 30px;

}



.tf-portfolios-wrap.style5 .blog-post .meta-date {

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #222222;

    margin-bottom: 15px;

}



.tf-portfolios-wrap.style5 .blog-post .meta-date i {

    color: #000000;

    font-size: 20px;

    margin-right: 5px;

    vertical-align: middle;

}



.tf-portfolios-wrap.style5 .blog-post .tf-button {

    font-weight: 600;

    font-size: 18px;

    line-height: 27px;

    color: #222;

}



.tf-portfolios-wrap.style5 .blog-post .tf-button:hover {

    color: var(--theme-primary-color);

}



.tf-portfolios-wrap.style5 .blog-post .tf-button i {

    margin-left: 7px;

}



.tf-portfolios-wrap.style5 .blog-post .tf-button span {

    position: relative;

    text-decoration: underline;

}



.tf-portfolios-wrap.style5 .blog-post .tf-button i {

    display: inline-block;

    margin-left: 9px;

    font-size: 13px;
    
    vertical-align: middle;
}



.tf-portfolios-wrap.style5 .blog-post .tf-button:hover i {

    -webkit-animation: toRightFromLeft 0.7s forwards;

    -moz-animation: toRightFromLeft 0.7s forwards;

    animation: toRightFromLeft 0.7s forwards;

}







.custom-pagination-wrapper {

    display: flex;

    align-items: center;

    color: #222;

    font-weight: 600;

    font-size: 18px;

    gap: 24px;

    margin-top: 56px;

}



.custom-pagination-wrapper:has(.disabled) {

    display: none;

}



.tf-portfolios-wrap.style5 .owl-dots {

    text-align: center;

    display: flex;

    gap: 5px;

    align-items: center;

    justify-content: left;

}



.tf-portfolios-wrap.style5 .owl-dot {

    background: rgba(34, 34, 34, 0.2) !important;

    width: 125px;

    height: 1px;

    margin: 0 2.5px;

    position: relative;

}



.tf-portfolios-wrap.style5 .owl-dot::before {

    height: 10px;

    width: 100%;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

    content: '';

    background-color: transparent;

}



.tf-portfolios-wrap.style5 .owl-dot.active {

    background: rgba(34, 34, 34, 1) !important;

}



.tf-portfolios-wrap.style5 .owl-nav button {

    position: absolute;

    top: -157px;

    right: 0;

    width: 80px;

    height: 80px;

    font-size: 22px;

    background: #fff !important;

    color: #222 !important;

    border: 1px solid #EDEDED !important;

    border-radius: 50%;

}



.tf-portfolios-wrap.style5 .owl-nav button.owl-prev {

    right: 100px;

}



.tf-portfolios-wrap.style5 .owl-nav button:hover {

    background-color: #222 !important;

    color: #fff !important;

    border-color: #222 !important;

}
.themesflat-portfolios-taxonomy.style2 .item-team .wrap-social li a {
    width: 30px;
    height: 30px;
    font-size: 10px;
}
.themesflat-portfolios-taxonomy.style2 .item-team .wrap-social {
    gap: 3px;

}
.about-us .tf-portfolios-wrap.style3 .description,
.about-us .tf-portfolios-wrap.style3 .tf-button span {
    display: none;
}
.about-us  .tf-portfolios-wrap.style3 .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    padding: 24px 100px 24px 24px;
}
/* .about-us  .tf-portfolios-wrap.style3 .content::before {
    content: '';
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
} */
.about-us .tf-portfolios-wrap.style3 .tf-button {
    color: var(--theme-secondary-color);
    background: #FFFFFF;
    height: 100%;
    line-height: 84px;
    display: block;
    width: 84px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}
.about-us .tf-portfolios-wrap.style3 .tf-button:hover {
    background: #fff !important;
}
.about-us .tf-portfolios-wrap.style3 .title {
    margin-bottom: 0px;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
}
.about-us .tf-portfolios-wrap.style3 .wrap-thumbnail {
    height: 640px;
    position: relative;
}
.about-us .tf-portfolios-wrap.style3 .wrap-thumbnail::before {
    content: '';
    height: 100%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    left: 33.6%;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}
.about-us .tf-portfolios-wrap.style3 .wrap-thumbnail::after {
    content: '';
    height: 100%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    right: 33.6%;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}
.about-us .tf-portfolios-wrap.style3 .wrap-thumbnail .thumbnail-image img {
    height: 100%;
}
.about-us .tf-portfolios-wrap.style3 .tf-button i {
    margin-left: 0px;
    font-size: 15px;
}
.case .tf-portfolios-wrap.style5 .owl-nav button.owl-prev {
    right: 475px;
}
.case .tf-portfolios-wrap.style5 .owl-nav button {
    right: 385px;
}
.case.buttlet .tf-portfolios-wrap.style5 .owl-nav button {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.case.buttlet .tf-portfolios-wrap.style5 .owl-nav button:hover {
    background-color: #FFFFFF !important;
    color: #000 !important;
    border-color: #FFFFFF !important;
}
.case.buttlet .custom-pagination-wrapper {
    color: #fff;
}
.case.buttlet .tf-portfolios-wrap.style5 .owl-dot.active {
    background: #fff !important;
}
.case.buttlet  .tf-portfolios-wrap.style5 .owl-dot {
    background: rgba(255, 255, 255, 0.2) !important;
}