.infolio-button {
position: relative;
display: inline-block;
padding: 12px 30px;
background-color: #212529;
color: #fff;
}
.infolio-button.button-animation::after {
content: "";
position: absolute;
right: 5px;
top: -8px;
width: 40px;
height: 40px;
border-radius: 40px;
background: rgba(0, 0, 0, 0.05);
transition: all 0.4s;
}
.infolio-button.button-animation:hover::after {
width: 100%;
right: 0;
}
.infolio-button.button-scale-effect {
display: flex !important;
align-items: center !important;
}
.infolio-button.button-scale-effect .text2 {
display: block;
padding-left: 10px;
position: relative;
z-index: 2;
}
.infolio-button.button-scale-effect::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #14cf93;
transform: scale(0);
transition: all 0.4s;
}
.infolio-button.button-scale-effect:hover::after {
transform: scale(1);
}
.infolio-button.animated-gradient-bg::before {
position: absolute;
content: "";
left: 0;
top: 0;
width: 150%;
height: 100%;
z-index: 1;
background: -webkit-gradient(linear, left top, right top, color-stop(10%, #0c3df4), color-stop(45%, #02b5ff), color-stop(#02b5ff), to(#0c3df4));
background: -webkit-linear-gradient(left, #0c3df4 10%, #02b5ff 45%, #02b5ff, #0c3df4);
background: -o-linear-gradient(left, #0c3df4 10%, #02b5ff 45%, #02b5ff, #0c3df4);
background: linear-gradient(to right, #0c3df4 10%, #02b5ff 45%, #02b5ff, #0c3df4);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.infolio-button.animated-gradient-bg:hover::before {
left: -50%;
}
.infolio-button .infolio-button-text {
position: relative;
z-index: 2;
}
.infolio-button .infolio-button-icon {
display: inline-block;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.infolio-button:hover .hover-animation-right-to-left {
animation: RL_smooth 1s ease-in-out infinite alternate both;
}
.infolio-button.animated-icon .infolio-button-content-wrapper .infolio-button-icon {
position: relative;
transition: all 0.3s ease;
}
.infolio-button.animated-icon .infolio-button-content-wrapper .infolio-button-icon:first-of-type {
opacity: 0;
transform: translateX(-10px);
}
.infolio-button.animated-icon .infolio-button-content-wrapper .infolio-button-icon:last-of-type {
opacity: 1;
transform: translateX(0);
}
.infolio-button.animated-icon:hover .infolio-button-content-wrapper {
padding-left: 10px;
}
.infolio-button.animated-icon:hover .infolio-button-content-wrapper .infolio-button-icon:first-of-type {
opacity: 1;
transform: translateX(0);
}
.infolio-button.animated-icon:hover .infolio-button-content-wrapper .infolio-button-icon:last-of-type {
opacity: 0;
transform: translateX(10px);
}
body.tcg-dark-mode .infolio-button.button-animation::after {
background: rgba(255, 255, 255, 0.05);
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-button.button-animation::after {
background: rgba(255, 255, 255, 0.05);
}
} .infolio-heading-text.d-rotate {
perspective: 1000px;
}
.infolio-heading-text.d-rotate .rotate-text {
display: block;
transform-style: preserve-3d;
transition: all 0.8s;
transform-origin: 50% 0%;
transform: translate3d(0px, 50px, -50px) rotateX(-45deg) scale(0.95);
opacity: 0;
transition-delay: 0.3s;
}
.infolio-heading-text.d-rotate.animated .rotate-text {
transform: translate3d(0px, 0px, 0px) rotateX(0deg) scale(1);
opacity: 1;
}
.infolio-heading-text .infolio-heading {
margin: 0;
position: relative;
}
.infolio-heading-text .infolio-heading > a, .infolio-heading-text .infolio-heading a:hover {
color: inherit;
}
.infolio-heading-text .infolio-heading .styled {
display: inline-block;
}
.infolio-heading-text .infolio-heading.bg-img {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
}
.infolio-heading-text .infolio-heading.infolio-text-no-wrap {
white-space: nowrap;
}
.infolio-heading-text .infolio-heading.inline-block {
display: inline-block;
}
.infolio-heading-text span {
display: inline-block;
}
@media screen and (max-width: 991px) {
.infolio-heading-text .infolio-heading.infolio-text-breakline br {
display: none;
}
.infolio-heading-text.block-icon a {
display: block !important;
}
} .infolio-marquee {
position: relative;
overflow-x: clip;
}
.infolio-marquee .curvtop {
background: #222;
position: absolute;
left: -100px;
right: -100px;
top: 0;
height: 5vw;
border-radius: 0 0 50% 50%/0 0 100% 100%;
z-index: 3;
}
.infolio-marquee .curvbotm {
background: #222;
position: absolute;
bottom: 0;
left: -100px;
right: -100px;
height: 5vw;
border-radius: 50% 50% 0 0/100% 100% 0 0;
z-index: 3;
}
.infolio-marquee .images:after {
content: "";
position: absolute;
top: -30px;
bottom: -30px;
left: -30px;
right: -30px;
pointer-events: none;
background: linear-gradient(to left, #1a1a1a, rgba(255, 255, 255, 0) 250px, rgba(255, 255, 255, 0) calc(100% - 250px), #1a1a1a);
}
.infolio-marquee .main-marq {
position: relative;
padding: 0;
}
.infolio-marquee .main-marq:after {
position: absolute;
top: -30px;
bottom: -30px;
left: -30px;
right: -30px;
pointer-events: none;
background: linear-gradient(to left, #181818, rgba(255, 255, 255, 0) 220px, rgba(255, 255, 255, 0) calc(100% - 220px), #181818);
}
.infolio-marquee .main-marq a {
display: inline-block;
}
.infolio-marquee .main-marq a,
.infolio-marquee .main-marq a:hover {
color: inherit;
}
.infolio-marquee .main-marq .slide-har {
display: flex;
}
.infolio-marquee .main-marq .box {
display: flex;
}
.infolio-marquee .main-marq .box .item {
padding: 0 30px;
}
.infolio-marquee .main-marq .box .item h4 {
white-space: nowrap;
line-height: 1.1;
margin: 0;
}
.infolio-marquee .main-marq .box .item h2 {
line-height: 1;
margin: 0;
}
.infolio-marquee .main-marq .box .item:nth-of-type(even) h4 {
color: transparent;
-webkit-text-stroke: 0.5px #1a1a1a;
}
.infolio-marquee .main-marq .box .item:nth-of-type(even) h4 a {
color: transparent;
-webkit-text-stroke: 0.5px #1a1a1a;
}
.infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(even) h4 {
color: #1a1a1a;
-webkit-text-stroke: 0;
}
.infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(even) h4 a {
color: #1a1a1a;
-webkit-text-stroke: 0;
}
.infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(odd) h4 {
color: transparent;
-webkit-text-stroke: 1px #1a1a1a;
}
.infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(odd) h4 a {
color: transparent;
-webkit-text-stroke: 1px #1a1a1a;
}
.infolio-marquee .slide-har {
position: relative;
}
.infolio-marquee .slide-har.st1 .box {
position: relative;
animation: slide-har 80s linear infinite;
}
.infolio-marquee .slide-har.st2 .box {
position: relative;
animation: slide-har-revers 80s linear infinite;
}
@keyframes slide-har {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes slide-har-revers {
100% {
transform: translateX(0%);
}
0% {
transform: translateX(-100%);
}
}
body.tcg-dark-mode .infolio-marquee .main-marq .box .item {
padding: 0 30px;
}
body.tcg-dark-mode .infolio-marquee .main-marq .box .item h4 {
white-space: nowrap;
line-height: 1.1;
margin: 0;
}
body.tcg-dark-mode .infolio-marquee .main-marq .box .item h2 {
line-height: 1;
margin: 0;
}
body.tcg-dark-mode .infolio-marquee .main-marq .box .item:nth-of-type(even) h4 {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
}
body.tcg-dark-mode .infolio-marquee .main-marq .box .item:nth-of-type(even) h4 a {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
}
body.tcg-dark-mode .infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(even) h4 {
color: #fff;
-webkit-text-stroke: 0;
}
body.tcg-dark-mode .infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(even) h4 a {
color: #fff;
-webkit-text-stroke: 0;
}
body.tcg-dark-mode .infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(odd) h4 {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
body.tcg-dark-mode .infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(odd) h4 a {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-marquee .main-marq .box .item {
padding: 0 30px;
}
body.tcg-auto-mode .infolio-marquee .main-marq .box .item h4 {
white-space: nowrap;
line-height: 1.1;
margin: 0;
}
body.tcg-auto-mode .infolio-marquee .main-marq .box .item h2 {
line-height: 1;
margin: 0;
}
body.tcg-auto-mode .infolio-marquee .main-marq .box .item:nth-of-type(even) h4 {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
}
body.tcg-auto-mode .infolio-marquee .main-marq .box .item:nth-of-type(even) h4 a {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
}
body.tcg-auto-mode .infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(even) h4 {
color: #fff;
-webkit-text-stroke: 0;
}
body.tcg-auto-mode .infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(even) h4 a {
color: #fff;
-webkit-text-stroke: 0;
}
body.tcg-auto-mode .infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(odd) h4 {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
body.tcg-auto-mode .infolio-marquee .main-marq .box:last-of-type .item:nth-of-type(odd) h4 a {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
} .infolio-height-100 {
height: 100%;
}
.infolio-height-400 {
height: 400px;
}
.infolio-relative {
position: relative;
}
.infolio-index-minus {
z-index: -1;
}
.infolio-max-content {
width: max-content;
}
.infolio-fixed-attachment {
inset: 0px;
width: 100%;
height: 100%;
}
.infolio-small-background-size::before {
background-size: 6px;
}
.infolio-medium-background-size::before {
background-size: 10px;
}
.infolio-writing-mode-rl {
writing-mode: vertical-rl;
}
.infolio-blur-8 {
backdrop-filter: blur(8px);
}
.infolio-blur-10 {
backdrop-filter: blur(10px);
}
@media screen and (max-width: 992px) {
.infolio-header-static {
position: static !important;
transform: none;
}
} .infolio-rotate-circle {
position: relative;
display: inline-block;
}
.infolio-rotate-circle a {
display: inline-block;
}
.infolio-rotate-circle a, .infolio-rotate-circle a:hover {
color: inherit;
}
.infolio-rotate-circle .rotate-circle {
color: #1a1a1a;
animation-name: rotateCircle;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.infolio-rotate-circle .rotate-circle text textPath {
fill: #1a1a1a;
}
.infolio-rotate-circle i {
color: #1a1a1a;
}
.infolio-rotate-circle svg path {
fill: #1a1a1a;
}
.infolio-rotate-circle .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.infolio-rotate-circle .shap-right-top {
position: absolute;
top: -2.1rem;
right: 65px;
transform: rotate(180deg);
}
.infolio-rotate-circle .shap-right-top svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-rotate-circle .shap-right-top svg path {
fill: #ffffff;
}
.infolio-rotate-circle .shap-left-bottom {
position: absolute;
bottom: -1px;
left: -2.1rem;
transform: rotate(180deg);
}
.infolio-rotate-circle .shap-left-bottom svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-rotate-circle .shap-left-bottom svg path {
fill: #ffffff;
}
@keyframes rotateCircle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body.tcg-dark-mode .infolio-rotate-circle .rotate-circle {
color: #ffffff;
}
body.tcg-dark-mode .infolio-rotate-circle .rotate-circle text textPath {
fill: #FFFFFF;
}
body.tcg-dark-mode .infolio-rotate-circle i {
color: #ffffff;
}
body.tcg-dark-mode .infolio-rotate-circle svg path {
fill: #ffffff;
}
body.tcg-dark-mode .infolio-rotate-circle .shap-right-top svg path {
fill: #1a1a1a;
}
body.tcg-dark-mode .infolio-rotate-circle .shap-left-bottom svg path {
fill: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-rotate-circle .rotate-circle {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-rotate-circle .rotate-circle text textPath {
fill: #FFFFFF;
}
body.tcg-auto-mode .infolio-rotate-circle i {
color: #ffffff;
}
body.tcg-auto-mode .infolio-rotate-circle svg path {
fill: #ffffff;
}
body.tcg-auto-mode .infolio-rotate-circle .shap-right-top svg path {
fill: #1a1a1a;
}
body.tcg-auto-mode .infolio-rotate-circle .shap-left-bottom svg path {
fill: #1a1a1a;
}
} .infolio-accordion .accordion .item {
margin-bottom: 15px;
}
.infolio-accordion .accordion .item:last-of-type {
margin-bottom: 0;
}
.infolio-accordion .accordion .title {
padding: 10px 0 10px 0;
cursor: pointer;
position: relative;
}
.infolio-accordion .accordion .title h6 {
margin: 0;
}
.infolio-accordion .accordion .title .ico {
left: auto;
right: 25px;
position: absolute;
top: 50%;
width: 15px;
height: 1px;
transform: translateY(-50%);
background: #999;
}
.infolio-accordion .accordion .title .ico:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 15px;
transform: translateY(-50%);
background: #999;
}
.infolio-accordion .accordion .title svg, .infolio-accordion .accordion .title i {
position: absolute;
bottom: 20px;
right: 15px;
}
.infolio-accordion .accordion .accordion-info {
display: none;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: 0;
}
.infolio-accordion .accordion .accordion-info p {
margin: 0;
}
.infolio-accordion .accordion .active {
display: block;
}
.infolio-accordion .accordion .active .title .ico:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 15px;
transform: translateY(-50%);
background: #999;
}
.infolio-accordion .accordion .active .title svg, .infolio-accordion .accordion .active .title i {
transform: rotate(45deg);
}
.infolio-accordion .accordion .active .accordion-info {
display: block;
} .infolio-services span, .infolio-services a {
display: inline-block;
}
.infolio-services .sec-head {
margin-bottom: 80px;
}
.infolio-services .sec-head .buttons {
margin-left: auto;
}
.infolio-services .sec-head .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.infolio-services .sec-head .swiper-arrow-control .swiper-button-prev, .infolio-services .sec-head .swiper-arrow-control .swiper-button-next {
position: static;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
color: inherit;
}
.infolio-services .sec-head .swiper-arrow-control .swiper-button-prev i, .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev svg, .infolio-services .sec-head .swiper-arrow-control .swiper-button-next i, .infolio-services .sec-head .swiper-arrow-control .swiper-button-next svg {
font-size: 14px;
fill: #1a1a1a;
color: #1a1a1a;
}
.infolio-services .sec-head .swiper-arrow-control .swiper-button-prev i path, .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev svg path, .infolio-services .sec-head .swiper-arrow-control .swiper-button-next i path, .infolio-services .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: #1a1a1a;
}
.infolio-services .sec-head .swiper-arrow-control .swiper-button-prev::after, .infolio-services .sec-head .swiper-arrow-control .swiper-button-next::after {
display: none;
}
.infolio-services .sec-head .swiper-button-next {
margin-left: 15px;
}
.infolio-services .sec-head .sub-title {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #14cf93;
margin: 0 0 25px;
}
.infolio-services .sec-head h2 {
color: #1a1a1a;
font-size: 50px;
font-weight: 500;
line-height: 1.3;
margin: 0 0 0.2rem;
}
.infolio-services .sec-head h2 .light {
font-weight: 200;
}
.infolio-services .sec-head .bord {
padding-top: 25px;
padding-right: 30px;
position: relative;
border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.infolio-services .sec-head .bord::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 40px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.infolio-services .item-box {
padding: 60px 40px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 15px;
}
.infolio-services .item-box .icon-img {
opacity: 0.5;
width: 70px;
margin-bottom: 40px;
}
.infolio-services .item-box h5 {
margin-bottom: 15px;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
color: #1a1a1a;
}
.infolio-services .item-box p {
line-height: 1.7;
font-size: 16px;
font-weight: 400;
color: #777;
margin: 0;
}
.infolio-services .item-box .rmore {
margin-top: 30px;
}
.infolio-services .item-box a {
display: inline-block;
text-decoration: none;
}
.infolio-services .item-box a, .infolio-services .item-box a:hover {
color: inherit;
}
.infolio-services .item-box .sub-title {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1a1a1a;
}
.infolio-services .item-box .icon-img-20 {
width: 20px;
margin-left: 5px;
}
.infolio-services .item-box .icon-box {
display: inline-block;
box-shadow: inset -2px -2px 2px rgba(65, 65, 65, 0.14), inset 2px 2px 5px rgba(7, 7, 7, 0.38);
border-radius: 15px;
width: 80px;
height: 80px;
padding: 15px;
}
.infolio-services .item-box .icon-box img {
opacity: 0.7;
}
.infolio-services .infolio-serv-swiper {
clip-path: inset(-100vw -100vw -100vw 0);
}
.infolio-services .swiper-container {
overflow: visible;
}
@media screen and (max-width: 768px) {
.infolio-services .sec-head .bord {
display: block !important;
}
.infolio-services .sec-head h2 {
font-size: 28px;
}
.infolio-services .sec-head .buttons {
margin-top: 15px;
}
}
body.tcg-dark-mode .infolio-services .sec-head h2 {
color: #fff;
}
body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev, body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next {
background-color: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev i, body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev svg, body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next i, body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next svg {
fill: white;
color: white;
}
body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev i path, body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev svg path, body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next i path, body.tcg-dark-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: white;
}
body.tcg-dark-mode .infolio-services .item-box {
border-color: rgba(255, 255, 255, 0.12);
}
body.tcg-dark-mode .infolio-services .item-box h5 {
color: #fff;
}
body.tcg-dark-mode .infolio-services .item-box p {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-services .item-box .sub-title {
color: #fff;
}
body.tcg-dark-mode .infolio-services .bord {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
body.tcg-dark-mode .infolio-services .bord::after {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-services .sec-head h2 {
color: #fff;
}
body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev, body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next {
background-color: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev i, body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev svg, body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next i, body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next svg {
fill: white;
color: white;
}
body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev i path, body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-prev svg path, body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next i path, body.tcg-auto-mode .infolio-services .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: white;
}
body.tcg-auto-mode .infolio-services .item-box {
border-color: rgba(255, 255, 255, 0.12);
}
body.tcg-auto-mode .infolio-services .item-box h5 {
color: #fff;
}
body.tcg-auto-mode .infolio-services .item-box p {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-services .item-box .sub-title {
color: #fff;
}
body.tcg-auto-mode .infolio-services .bord {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
body.tcg-auto-mode .infolio-services .bord::after {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
} .infolio-portfolio .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-portfolio span {
display: inline-block;
}
.infolio-portfolio .links-img:hover .img img {
filter: blur(4px);
}
.infolio-portfolio .links-img:hover .current img {
filter: none;
}
.infolio-portfolio .links-img .img {
position: relative;
height: 80vh;
border-radius: 30px;
overflow: hidden;
}
.infolio-portfolio .links-img .img .link-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.infolio-portfolio .links-img .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: all 0.4s;
}
.infolio-portfolio .links-img .cont {
margin-top: 30px;
text-align: center;
display: none;
}
.infolio-portfolio .links-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
pointer-events: none;
}
.infolio-portfolio .links-text li {
list-style-type: none;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
overflow: hidden;
}
.infolio-portfolio .links-text li .tag {
color: #fff;
display: inline-block;
transform: translateY(-50px);
}
.infolio-portfolio .links-text li h2 {
color: #fff;
margin: 0;
font-size: 75px;
transform: translateY(80px);
}
.infolio-portfolio .links-text li .tag,
.infolio-portfolio .links-text li h2 {
opacity: 0;
transition: all 0.5s;
}
.infolio-portfolio .links-text li.current .tag,
.infolio-portfolio .links-text li.current h2 {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: all 0.7s;
transition-delay: 0.2s;
}
body.tcg-dark-mode .infolio-portfolio .cont h2 {
color: #fff;
}
body.tcg-dark-mode .infolio-portfolio .cont .tag {
color: #fff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-portfolio .cont h2 {
color: #fff;
}
body.tcg-auto-mode .infolio-portfolio .cont .tag {
color: #fff;
}
}
@media screen and (max-width: 992px) {
.infolio-portfolio .links-text {
display: none;
}
.infolio-portfolio .links-img:hover .img img {
filter: none;
}
.infolio-portfolio .links-img .items {
margin-bottom: 50px;
}
.infolio-portfolio .links-img .items:last-of-type {
margin-bottom: 0;
}
.infolio-portfolio .links-img .items .cont {
display: block;
}
} .infolio-testimonials .sec-head {
margin-bottom: 80px;
}
.infolio-testimonials .sec-head .sub-title {
margin-bottom: 25px;
color: #14cf93;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
}
.infolio-testimonials .sec-head h2 {
color: #1a1a1a;
margin: 0 0 0.2rem;
}
.infolio-testimonials .sec-head h2 .light-title {
font-weight: 200;
}
.infolio-testimonials .sec-head .bord {
position: relative;
padding-right: 30px;
border-top: 1px solid rgba(0, 0, 0, 0.14);
padding-top: 25px;
}
.infolio-testimonials .sec-head .bord .buttons {
margin-left: auto;
}
.infolio-testimonials .sec-head .bord::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 40px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.infolio-testimonials .sec-head .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev, .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next {
position: static;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
color: inherit;
}
.infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev i, .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev svg, .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next i, .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next svg {
font-size: 14px;
fill: #1a1a1a;
color: #1a1a1a;
}
.infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev i path, .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev svg path, .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next i path, .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: #1a1a1a;
}
.infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev::after, .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next::after {
display: none;
}
.infolio-testimonials .sec-head .swiper-button-next {
margin-left: 15px;
}
.infolio-testimonials .infolio-testim-swiper {
position: relative;
}
.infolio-testimonials .swiper-slide {
padding-top: 50px;
padding-left: 50px;
}
.infolio-testimonials .swiper-container {
overflow: hidden;
}
.infolio-testimonials .item {
position: relative;
}
.infolio-testimonials .item .quote {
color: #777;
}
.infolio-testimonials .item .rate-stars {
position: absolute;
top: 0;
right: 0;
padding: 15px 60px 15px 30px;
border-radius: 0 0 0 30px;
}
.infolio-testimonials .item .rate-stars i {
color: #14cf93;
}
.infolio-testimonials .item .rate-stars .shap-left-top {
position: absolute;
top: -1px;
left: -2.05rem;
transform: rotate(90deg);
}
.infolio-testimonials .item .rate-stars .shap-left-top svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-testimonials .item .rate-stars .shap-right-bottom {
position: absolute;
bottom: -2.1rem;
right: -1px;
transform: rotate(90deg);
}
.infolio-testimonials .item .rate-stars .shap-right-bottom svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-testimonials .item .top-left-svg {
width: 60px;
height: 60px;
margin-bottom: 30px;
}
.infolio-testimonials .item .text {
position: relative;
}
.infolio-testimonials .item .text .qout-title {
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.infolio-testimonials .item .text .qout-svg {
position: absolute;
left: -40px;
top: -70px;
width: 160px;
}
.infolio-testimonials .item .text .qout-svg path {
fill: none;
stroke: #222;
}
.infolio-testimonials .item .text .top-right svg {
width: 80px;
height: 80px;
margin-bottom: 40px;
}
.infolio-testimonials .item .text .top-right svg path {
stroke: #222;
}
.infolio-testimonials .item .photo {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}
.infolio-testimonials .item .photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.infolio-testimonials .item .img-curv {
position: relative;
padding: 20px;
border-radius: 0 30px 0 0;
background: #1a1a1a;
}
.infolio-testimonials .item .img-curv .img {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}
.infolio-testimonials .item .img-curv .shap-left-top {
position: absolute;
top: -2.05rem;
left: -1px;
transform: rotate(270deg);
}
.infolio-testimonials .item .img-curv .shap-left-top svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-testimonials .item .img-curv .shap-right-bottom {
position: absolute;
bottom: 0;
right: -2.1rem;
transform: rotate(270deg);
}
.infolio-testimonials .item .img-curv .shap-right-bottom svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-testimonials .item .info {
border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.infolio-testimonials .item .info .ml-20 {
margin-left: 20px;
}
.infolio-testimonials .item .info .qout-svg path {
fill: none;
stroke: #1a1a1a;
}
.infolio-testimonials .item .info .ml-auto {
margin-left: auto;
}
.infolio-testimonials .item .info h5 {
color: #1a1a1a;
margin: 0 0 0.2rem;
}
.infolio-testimonials .item .info span {
display: inline-block;
}
.infolio-testimonials .item .info svg {
width: 80px;
height: 80px;
}
.infolio-testimonials .control-abslout {
position: absolute;
bottom: 60px;
right: 0;
}
.infolio-testimonials .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.infolio-testimonials .swiper-arrow-control .swiper-button-prev, .infolio-testimonials .swiper-arrow-control .swiper-button-next {
position: static;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
color: inherit;
}
.infolio-testimonials .swiper-arrow-control .swiper-button-prev i, .infolio-testimonials .swiper-arrow-control .swiper-button-prev svg, .infolio-testimonials .swiper-arrow-control .swiper-button-next i, .infolio-testimonials .swiper-arrow-control .swiper-button-next svg {
font-size: 14px;
fill: #1a1a1a;
color: #1a1a1a;
}
.infolio-testimonials .swiper-arrow-control .swiper-button-prev i path, .infolio-testimonials .swiper-arrow-control .swiper-button-prev svg path, .infolio-testimonials .swiper-arrow-control .swiper-button-next i path, .infolio-testimonials .swiper-arrow-control .swiper-button-next svg path {
fill: #1a1a1a;
}
.infolio-testimonials .swiper-arrow-control .swiper-button-prev::after, .infolio-testimonials .swiper-arrow-control .swiper-button-next::after {
display: none;
}
.infolio-testimonials .swiper-button-next {
margin-left: 15px;
}
@media screen and (max-width: 768px) {
.infolio-testimonials .control-abslout {
position: static;
padding-left: 30px;
margin-top: 15px;
}
.infolio-testimonials .item .text .qout-svg {
position: absolute;
left: -30px;
top: -90px;
width: 100px;
}
.infolio-testimonials .swiper-slide {
padding-top: 60px;
padding-left: 30px;
}
.infolio-testimonials .sec-head .buttons {
margin-top: 15px;
}
.infolio-testimonials .sec-head .d-flex {
display: block !important;
}
.infolio-testimonials .item .photo {
width: 60px;
height: 60px;
}
.infolio-testimonials .item .text .top-right svg {
margin-right: 15px;
}
.infolio-testimonials .item .top-left-svg {
margin-right: 15px;
margin-left: 15px;
}
}
body.tcg-dark-mode .infolio-testimonials .item .quote {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-testimonials .item .text .qout-svg path {
fill: none;
stroke: #fff;
}
body.tcg-dark-mode .infolio-testimonials .item .text .qout-title {
border-color: rgba(255, 255, 255, 0.1);
}
body.tcg-dark-mode .infolio-testimonials .item .text .top-right svg path {
stroke: #FFFFFF;
}
body.tcg-dark-mode .infolio-testimonials .item .info {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-dark-mode .infolio-testimonials .item .info .qout-svg path {
fill: none;
stroke: #fff;
}
body.tcg-dark-mode .infolio-testimonials .item .info h5 {
color: #fff;
}
body.tcg-dark-mode .infolio-testimonials .sec-head h2 {
color: #fff;
}
body.tcg-dark-mode .infolio-testimonials .sec-head .bord {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-dark-mode .infolio-testimonials .sec-head .bord:after {
border-color: rgba(255, 255, 255, 0.1);
}
body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev, body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next {
background: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev i, body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev svg, body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next i, body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next svg {
fill: #ffffff;
color: #ffffff;
}
body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev i path, body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev svg path, body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next i path, body.tcg-dark-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: #ffffff;
}
body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev, body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next {
background-color: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev i, body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev svg, body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next i, body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next svg {
fill: white;
color: white;
}
body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev i path, body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev svg path, body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next i path, body.tcg-dark-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next svg path {
fill: white;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-testimonials .item .quote {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-testimonials .item .text .qout-svg path {
fill: none;
stroke: #fff;
}
body.tcg-auto-mode .infolio-testimonials .item .text .qout-title {
border-color: rgba(255, 255, 255, 0.1);
}
body.tcg-auto-mode .infolio-testimonials .item .text .top-right svg path {
stroke: #FFFFFF;
}
body.tcg-auto-mode .infolio-testimonials .item .info {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-auto-mode .infolio-testimonials .item .info .qout-svg path {
fill: none;
stroke: #fff;
}
body.tcg-auto-mode .infolio-testimonials .item .info h5 {
color: #fff;
}
body.tcg-auto-mode .infolio-testimonials .sec-head h2 {
color: #fff;
}
body.tcg-auto-mode .infolio-testimonials .sec-head .bord {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-auto-mode .infolio-testimonials .sec-head .bord:after {
border-color: rgba(255, 255, 255, 0.1);
}
body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev, body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next {
background: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev i, body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev svg, body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next i, body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next svg {
fill: #ffffff;
color: #ffffff;
}
body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev i path, body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-prev svg path, body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next i path, body.tcg-auto-mode .infolio-testimonials .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: #ffffff;
}
body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev, body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next {
background-color: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev i, body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev svg, body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next i, body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next svg {
fill: white;
color: white;
}
body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev i path, body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-prev svg path, body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next i path, body.tcg-auto-mode .infolio-testimonials .swiper-arrow-control .swiper-button-next svg path {
fill: white;
}
} .infolio-team .item {
position: relative;
padding-right: 60px;
}
.infolio-team .item:hover .img .info {
bottom: 15px;
opacity: 1;
}
.infolio-team .item:hover .social {
right: 5px;
transform: rotate(8deg);
}
.infolio-team .item .img {
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 2;
}
.infolio-team .item .img img {
width: 100%;
height: auto;
}
.infolio-team .item .img .info {
position: absolute;
left: 15px;
right: 15px;
bottom: -15px;
padding: 15px;
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 10px;
opacity: 0;
transition: all 0.4s;
}
.infolio-team .item .img .info .name {
margin: 0;
}
.infolio-team .item .img .info span {
display: inline-block;
}
.infolio-team .item .social {
position: absolute;
top: 50px;
left: 50px;
right: 60px;
bottom: 40px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: #f5f7f9;
border-radius: 10px;
transition: all 0.4s;
}
.infolio-team .item .social .links {
position: absolute;
top: 15px;
right: 15px;
}
.infolio-team .item .social .links a {
color: #1a1a1a;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
margin-bottom: 5px;
transition: all 0.4s;
}
.infolio-team .item .social .links a:hover {
background: #14cf93;
border-color: #14cf93;
color: #111;
}
body.tcg-dark-mode .infolio-team .item .img .info {
background: rgba(0, 0, 0, 0.1);
}
body.tcg-dark-mode .infolio-team .item .img .info .position {
color: #fff;
}
body.tcg-dark-mode .infolio-team .item .img .info .name {
color: #fff;
}
body.tcg-dark-mode .infolio-team .item .social {
border: 1px solid rgba(255, 255, 255, 0.1);
background: #242424;
}
body.tcg-dark-mode .infolio-team .item .social .links a {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-team .item .img .info {
background: rgba(0, 0, 0, 0.1);
}
body.tcg-auto-mode .infolio-team .item .social {
border: 1px solid rgba(255, 255, 255, 0.1);
background: #242424;
}
body.tcg-auto-mode .infolio-team .item .social .links a {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
} .infolio-blog .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-blog .rest {
padding: 0 !important;
margin: 0 !important;
}
.infolio-blog .item {
border-radius: 10px;
overflow: hidden;
}
.infolio-blog .item .img {
position: relative;
}
.infolio-blog .item .img .categories.absolute {
position: absolute;
bottom: -2px;
left: 50%;
border-radius: 25px 25px 0 0;
padding: 8px 30px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
transform: translateX(-50%);
}
.infolio-blog .item .img .categories.absolute .shap-right-bottom {
position: absolute;
bottom: -2px;
right: -1rem;
transform: rotate(270deg);
}
.infolio-blog .item .img .categories.absolute .shap-right-bottom svg {
width: 1.1rem;
height: 1.1rem;
}
.infolio-blog .item .img .categories.absolute .shap-left-bottom {
position: absolute;
bottom: -2px;
left: -1rem;
transform: rotate(180deg);
}
.infolio-blog .item .img .categories.absolute .shap-left-bottom svg {
width: 1.1rem;
height: 1.1rem;
}
.infolio-blog .item .img img {
width: 100%;
height: auto;
}
.infolio-blog .item .cont {
padding: 80px 30px;
}
.infolio-blog .item .cont span {
display: inline-block;
}
.infolio-blog .item .cont .date {
color: #1a1a1a;
}
.infolio-blog .item .cont .date a, .infolio-blog .item .cont .date a:hover {
display: inline-block;
color: inherit;
}
.infolio-blog .item .cont .title {
color: #1a1a1a;
}
.infolio-blog .item .cont .title a, .infolio-blog .item .cont .title a:hover {
display: inline-block;
color: inherit;
}
.infolio-blog .item .cont .categories a {
color: #1a1a1a;
font-size: 13px;
padding: 8px 20px;
background: rgba(0, 0, 0, 0.05);
border-radius: 5px;
transition: all 0.4s;
}
.infolio-blog .item .cont .categories a:hover {
background: #14cf93;
}
.infolio-blog .item .cont .r-more {
color: #1a1a1a;
}
.infolio-blog .item .cont .r-more svg {
fill: #1a1a1a;
}
.infolio-blog .item:hover .side:after, .infolio-blog .item:hover .half-side:after {
opacity: 0.3;
}
.infolio-blog .item:hover .side .author, .infolio-blog .item:hover .half-side .author {
opacity: 1;
}
.infolio-blog .item .side:after, .infolio-blog .item .half-side:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: linear-gradient(180deg, #1a1a1a, transparent);
opacity: 0;
transition: all 0.4s;
}
.infolio-blog .item .side .img-post, .infolio-blog .item .half-side .img-post {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 10px;
}
.infolio-blog .item .side .author, .infolio-blog .item .half-side .author {
position: absolute;
top: 15px;
left: 15px;
z-index: 3;
opacity: 0;
transition: all 0.4s;
}
.infolio-blog .item .side .author-image, .infolio-blog .item .half-side .author-image {
overflow: hidden;
}
body.tcg-dark-mode .infolio-blog .item .cont .date {
color: #fff;
}
body.tcg-dark-mode .infolio-blog .item .cont .title {
color: #fff;
}
body.tcg-dark-mode .infolio-blog .item .cont .categories a {
color: #fff;
background: rgba(255, 255, 255, 0.05);
}
body.tcg-dark-mode .infolio-blog .item .cont .r-more {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-blog .item .cont .r-more svg {
fill: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-blog .item .cont .date {
color: #fff;
}
body.tcg-auto-mode .infolio-blog .item .cont .title {
color: #fff;
}
body.tcg-auto-mode .infolio-blog .item .cont .categories a {
color: #fff;
background: rgba(255, 255, 255, 0.05);
}
body.tcg-auto-mode .infolio-blog .item .cont .r-more {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-blog .item .cont .r-more svg {
fill: #FFFFFF;
}
} .infolio-icon {
line-height: 1;
} .infolio-portfolio-carsouel.clip-path {
clip-path: inset(-100vw -100vw -100vw 0);
}
.infolio-portfolio-carsouel .sec-head {
margin-bottom: 80px;
}
.infolio-portfolio-carsouel .sec-head .sub-title {
margin-bottom: 25px;
color: #14cf93;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
}
.infolio-portfolio-carsouel .sec-head h2 {
color: #1a1a1a;
margin: 0 0 0.2rem;
}
.infolio-portfolio-carsouel .sec-head h2 .light-title {
font-weight: 200;
}
.infolio-portfolio-carsouel .sec-head .bord {
position: relative;
padding-right: 30px;
border-top: 1px solid rgba(0, 0, 0, 0.14);
padding-top: 25px;
}
.infolio-portfolio-carsouel .sec-head .bord .buttons {
margin-left: auto;
}
.infolio-portfolio-carsouel .sec-head .bord::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 40px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.infolio-portfolio-carsouel .sec-head .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev, .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next {
position: static;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
color: inherit;
}
.infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev i, .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev svg, .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next i, .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next svg {
font-size: 14px;
fill: #1a1a1a;
color: #1a1a1a;
}
.infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev i path, .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev svg path, .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next i path, .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: #1a1a1a;
}
.infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev::after, .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next::after {
display: none;
}
.infolio-portfolio-carsouel .sec-head .swiper-button-next {
margin-left: 15px;
}
.infolio-portfolio-carsouel .different-width .swiper-slide {
width: 45%;
}
.infolio-portfolio-carsouel .different-width .swiper-slide:nth-child(2n) {
width: 30%;
}
.infolio-portfolio-carsouel .different-width .swiper-slide:nth-child(3n) {
width: 40%;
}
.infolio-portfolio-carsouel .swiper-container {
overflow: visible;
}
.infolio-portfolio-carsouel .button {
margin-left: auto;
}
.infolio-portfolio-carsouel .item .img img {
width: 100%;
height: auto;
}
.infolio-portfolio-carsouel .item .cont {
margin-top: 30px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.infolio-portfolio-carsouel .item .cont h5 {
color: #1a1a1a;
}
.infolio-portfolio-carsouel .item .cont p {
color: #777;
}
.infolio-portfolio-carsouel .infolio-work-swiper-center .item .img {
overflow: hidden;
}
@media screen and (max-width: 768px) {
.infolio-portfolio-carsouel .sec-head .bord .buttons {
margin-top: 15px;
}
.infolio-portfolio-carsouel .sec-head .bord.d-flex {
display: block !important;
}
}
body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head h2 {
color: #fff;
}
body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .bord {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .bord .buttons {
margin-left: auto;
}
body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .bord::after {
border-color: rgba(255, 255, 255, 0.1);
}
body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev, body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next {
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
}
body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev i, body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev svg, body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next i, body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next svg {
fill: white;
color: white;
}
body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev i path, body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev svg path, body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next i path, body.tcg-dark-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: white;
}
body.tcg-dark-mode .infolio-portfolio-carsouel .item .cont {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-dark-mode .infolio-portfolio-carsouel .item .cont h5 {
color: #ffffff;
}
body.tcg-dark-mode .infolio-portfolio-carsouel .item .cont p {
color: #c6c8c9;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head h2 {
color: #fff;
}
body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .bord {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .bord .buttons {
margin-left: auto;
}
body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .bord::after {
border-color: rgba(255, 255, 255, 0.1);
}
body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev, body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next {
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
}
body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev i, body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev svg, body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next i, body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next svg {
fill: white;
color: white;
}
body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev i path, body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-prev svg path, body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next i path, body.tcg-auto-mode .infolio-portfolio-carsouel .sec-head .swiper-arrow-control .swiper-button-next svg path {
fill: white;
}
body.tcg-auto-mode .infolio-portfolio-carsouel .item .cont {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-auto-mode .infolio-portfolio-carsouel .item .cont h5 {
color: #ffffff;
}
body.tcg-auto-mode .infolio-portfolio-carsouel .item .cont p {
color: #c6c8c9;
}
} .infolio-social-media.rest {
margin: 0;
padding: 0;
}
.infolio-social-media.rest li {
list-style-type: none;
}
.infolio-social-media.rest a {
display: inline-block;
}
.infolio-social-media.rest span {
display: inline-block;
}
.infolio-social-media.rest a, .infolio-social-media.rest a:hover {
color: inherit;
}
.infolio-social-media.rest .cursor-pointer {
cursor: pointer;
}
.infolio-social-media.rest .infolio-hover-this .infolio-hover-anim {
transition: transform 0.2s linear;
}
@media screen and (max-width: 992px) {
.infolio-social-media .icon_responsive svg, .infolio-social-media .icon_responsive i {
display: none;
}
} .infolio-play-button {
border-radius: 0 30px 0 0;
}
.infolio-play-button .shap-left-top {
position: absolute;
top: -2.05rem;
left: -1px;
transform: rotate(270deg);
line-height: 1;
}
.infolio-play-button .shap-left-top svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-play-button .shap-left-top svg path {
fill: #ffffff;
}
.infolio-play-button .shap-right-bottom {
position: absolute;
bottom: -1px;
right: -2.1rem;
transform: rotate(270deg);
line-height: 1;
}
.infolio-play-button .shap-right-bottom svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-play-button .shap-right-bottom svg path {
fill: #ffffff;
}
.infolio-play-button a {
display: inline-block;
}
.infolio-play-button .vid {
border-radius: 50%;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
body.tcg-dark-mode .infolio-play-button .shap-left-top svg path {
fill: #1d1d1d;
}
body.tcg-dark-mode .infolio-play-button .shap-right-bottom svg path {
fill: #1d1d1d;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-play-button .shap-left-top svg path {
fill: #1d1d1d;
}
body.tcg-auto-mode .infolio-play-button .shap-right-bottom svg path {
fill: #1d1d1d;
}
} .infolio-portfolio-tabs .rest {
padding: 0 !important;
margin: 0 !important;
}
.infolio-portfolio-tabs .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-portfolio-tabs .cluom {
display: flex;
align-items: center;
padding: 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.infolio-portfolio-tabs .cluom .info .categories {
color: #1a1a1a;
}
.infolio-portfolio-tabs .cluom .info .title {
color: #1a1a1a;
}
.infolio-portfolio-tabs .cluom:last-of-type {
border-bottom: 0;
}
.infolio-portfolio-tabs .cluom.current {
border-left-color: transparent;
}
.infolio-portfolio-tabs .cluom .more {
margin-left: auto;
font-size: 16px;
color: #1a1a1a;
}
.infolio-portfolio-tabs .cluom .more i, .infolio-portfolio-tabs .cluom .more svg {
margin-left: 15px;
}
.infolio-portfolio-tabs .cluom .more i {
color: #1a1a1a;
}
.infolio-portfolio-tabs .cluom .more svg {
color: #1a1a1a;
}
.infolio-portfolio-tabs .cluom .more a, .infolio-portfolio-tabs .cluom .more a:hover {
display: inline-block;
color: inherit;
}
.infolio-portfolio-tabs .glry-img {
width: 100%;
height: 100%;
position: relative;
}
.infolio-portfolio-tabs .glry-img .bg-img {
position: absolute;
top: 80px;
left: 80px;
right: 80px;
bottom: 80px;
transform: scale(1.1, 1.1);
opacity: 0;
transition: all 0.7s;
background-size: cover;
background-position: center center;
}
.infolio-portfolio-tabs .glry-img .bg-img.current {
transform: scale(1);
opacity: 1;
}
.infolio-portfolio-tabs.rotate-image-animate {
border: 0;
}
.infolio-portfolio-tabs.rotate-image-animate .cluom {
padding: 0 0 15px;
border-left: 0;
}
.infolio-portfolio-tabs.rotate-image-animate .glry-img {
width: 450px;
height: 450px;
position: relative;
transform: rotate(-10deg);
}
.infolio-portfolio-tabs.rotate-image-animate .glry-img .bg-img {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
transform: scale(1.05);
opacity: 0;
transition: all 0.7s;
background-size: cover;
background-position: center center;
border-radius: 15px;
}
.infolio-portfolio-tabs.rotate-image-animate .glry-img .bg-img:before {
top: -50px;
left: 50px;
transform: translateY(-100px);
}
.infolio-portfolio-tabs.rotate-image-animate .glry-img .bg-img:after {
bottom: -50px;
right: 50px;
transform: translateY(100px);
}
.infolio-portfolio-tabs.rotate-image-animate .glry-img .bg-img:after, .infolio-portfolio-tabs.rotate-image-animate .glry-img .bg-img:before {
content: "";
position: absolute;
width: 20px;
height: 100px;
background: #14cf93;
opacity: 0;
transition: all 0.4s;
transition-delay: 0.4s;
}
.infolio-portfolio-tabs.rotate-image-animate .glry-img .bg-img.current {
transform: scale(1);
opacity: 1;
}
.infolio-portfolio-tabs.rotate-image-animate .glry-img .bg-img.current:after, .infolio-portfolio-tabs.rotate-image-animate .glry-img .bg-img.current:before {
opacity: 1;
transform: translateY(0);
}
@media screen and (max-width: 992px) {
.infolio-portfolio-tabs .glry-img {
display: none;
}
.infolio-portfolio-tabs.rotate-image-animate .cluom svg, .infolio-portfolio-tabs.rotate-image-animate .cluom i {
display: none;
}
}
@media screen and (max-width: 768px) {
.infolio-portfolio-tabs .cluom {
padding: 40px 30px;
overflow: hidden;
}
.infolio-portfolio-tabs.rotate-image-animate .cluom {
padding: 30px 10px;
margin: 0;
}
}
body.tcg-dark-mode .infolio-portfolio-tabs .cluom {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
body.tcg-dark-mode .infolio-portfolio-tabs.rotate-image-animate .cluom {
border-left: 0;
}
body.tcg-dark-mode .infolio-portfolio-tabs .info .categories {
color: #ffffff;
}
body.tcg-dark-mode .infolio-portfolio-tabs .info .title {
color: #ffffff;
}
body.tcg-dark-mode .infolio-portfolio-tabs .more {
color: #ffffff;
}
body.tcg-dark-mode .infolio-portfolio-tabs .more i {
color: #ffffff;
}
body.tcg-dark-mode .infolio-portfolio-tabs .more svg {
fill: #ffffff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-portfolio-tabs .cluom {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
body.tcg-auto-mode .infolio-portfolio-tabs.rotate-image-animate .cluom {
border-left: 0;
}
body.tcg-auto-mode .infolio-portfolio-tabs .info .categories {
color: #ffffff;
}
body.tcg-auto-mode .infolio-portfolio-tabs .info .title {
color: #ffffff;
}
body.tcg-auto-mode .infolio-portfolio-tabs .more {
color: #ffffff;
}
body.tcg-auto-mode .infolio-portfolio-tabs .more i {
color: #ffffff;
}
body.tcg-auto-mode .infolio-portfolio-tabs .more svg {
fill: #ffffff;
}
} .infolio-img-scale {
position: relative;
}
.infolio-img-scale span {
display: inline-block;
}
.infolio-img-scale [data-overlay-dark]:before {
background: #1d1d1d;
}
.infolio-img-scale .image {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.infolio-img-scale .caption {
position: relative;
z-index: 7;
}
.infolio-img-scale .image > .img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.infolio-img-scale .image img {
width: 100%;
object-fit: cover;
object-position: center center;
}
.infolio-img-scale .vid {
width: 200px;
height: 200px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 5;
}
.infolio-img-scale .vid i {
color: #fff;
font-size: 50px;
}
.infolio-img-scale .vid svg {
fill: white;
width: 50px;
height: 50px;
} .infolio-about-image {
position: relative;
}
.infolio-about-image .info {
padding: 0 60px;
margin-top: -30px;
}
.infolio-about-image .info p {
color: #777;
white-space: nowrap;
}
.infolio-about-image .img {
overflow: hidden;
}
.infolio-about-image .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.infolio-about-image .mz-shap {
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
@media screen and (max-width: 768px) {
.infolio-about-image .info {
padding: 0 20px;
}
}
@media screen and (max-width: 768px) {
.infolio-about-image .mz-shap {
top: -65px;
}
}
body.tcg-dark-mode .infolio-about-image .info p {
color: #c6c8c9;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-about-image .info p {
color: #c6c8c9;
}
} .infolio-progress .sub-title {
color: #1a1a1a;
font-size: 13px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
.infolio-progress .skill-progress {
height: 5px;
background-color: rgba(0, 0, 0, 0.05);
position: relative;
}
.infolio-progress .skill-progress .progres {
position: absolute;
height: 100%;
width: 40%;
top: 0;
left: 0;
background: #1a1a1a;
transition: all 1.5s;
}
.infolio-progress .skill-progress .progres:after {
color: #1a1a1a;
content: attr(data-value);
position: absolute;
font-size: 12px;
font-weight: 600;
}
.infolio-progress .skill-progress .progres.value-above::after {
right: 10px;
top: -25px;
}
.infolio-progress .skill-progress .progres.value-after::after {
top: -5px;
right: -50px;
}
.infolio-progress .skill-progress .progres.value-hidden::after {
content: none !important;
}
body.tcg-dark-mode .infolio-progress .sub-title {
color: #ffffff;
}
body.tcg-dark-mode .infolio-progress .skill-progress {
background-color: rgba(255, 255, 255, 0.05);
}
body.tcg-dark-mode .infolio-progress .skill-progress .progres {
background: #fff;
}
body.tcg-dark-mode .infolio-progress .skill-progress .progres:after {
color: #fff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-progress .sub-title {
color: #ffffff;
}
body.tcg-auto-mode .infolio-progress .skill-progress {
background-color: rgba(255, 255, 255, 0.05);
}
body.tcg-auto-mode .infolio-progress .skill-progress .progres {
background: #fff;
}
body.tcg-auto-mode .infolio-progress .skill-progress .progres:after {
color: #fff;
}
} .infolio-images-carousel.clip-path {
clip-path: inset(-100vw -100vw -100vw 0);
}
.infolio-images-carousel .swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: visible;
list-style: none;
padding: 0;
z-index: 1;
}
.infolio-images-carousel .swiper-container.o-hidden {
overflow: hidden;
}
.infolio-images-carousel .change-opacity .icon-image {
opacity: 0.8;
}
.infolio-images-carousel .change-opacity .icon-image:hover {
opacity: 1;
}
.infolio-images-carousel .icon-image {
overflow: hidden;
}
.infolio-images-carousel .icon-image img {
width: 100%;
height: auto;
}
.infolio-images-carousel-center {
width: 130%;
margin-left: -15%;
}
.infolio-images-carousel-center .swiper-container {
overflow: visible;
}
.infolio-images-carousel-center .change-opacity .icon-image {
opacity: 0.8;
}
.infolio-images-carousel-center .change-opacity .icon-image:hover {
opacity: 1;
}
.infolio-images-carousel-center .icon-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
} .infolio-curve-title {
position: absolute;
background: #fff;
top: 50%;
right: -1px;
width: max-content;
padding: 10px 25px;
border-radius: 15px 15px 0 0;
transform: rotate(-90deg) scaleX(-1) translateX(50%) translateY(-100%);
transform-origin: top right;
}
.infolio-curve-title .sub-title {
margin: 0;
color: #1a1a1a;
}
.infolio-curve-title .shap-left-bottom {
position: absolute;
bottom: -1px;
left: -2.05rem;
transform: rotate(180deg);
}
.infolio-curve-title .shap-left-bottom svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-curve-title .shap-left-bottom svg path {
fill: #ffffff;
}
.infolio-curve-title .shap-right-bottom {
position: absolute;
bottom: -1px;
right: -2.05rem;
transform: rotate(270deg);
}
.infolio-curve-title .shap-right-bottom svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-curve-title .shap-right-bottom svg path {
fill: #ffffff;
}
body.tcg-dark-mode .infolio-curve-title {
background: #1a1a1a;
}
body.tcg-dark-mode .infolio-curve-title .sub-title {
color: #ffffff;
}
body.tcg-dark-mode .infolio-curve-title .shap-left-bottom svg path {
fill: #1a1a1a;
}
body.tcg-dark-mode .infolio-curve-title .shap-right-bottom svg path {
fill: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-curve-title {
background: #1a1a1a;
}
body.tcg-auto-mode .infolio-curve-title .sub-title {
color: #ffffff;
}
body.tcg-auto-mode .infolio-curve-title .shap-left-bottom svg path {
fill: #1a1a1a;
}
body.tcg-auto-mode .infolio-curve-title .shap-right-bottom svg path {
fill: #1a1a1a;
}
} .infolio-brand-item {
text-align: center;
position: relative;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.infolio-brand-item .img, .infolio-brand-item .text {
position: relative;
z-index: 2;
}
.infolio-brand-item .img img, .infolio-brand-item .text img {
width: 100px;
}
.infolio-brand-item .top-left, .infolio-brand-item .top-right, .infolio-brand-item .bottom-left, .infolio-brand-item .bottom-right {
position: absolute;
}
.infolio-brand-item .top-left svg rect, .infolio-brand-item .top-right svg rect, .infolio-brand-item .bottom-left svg rect, .infolio-brand-item .bottom-right svg rect {
fill: #1a1a1a;
}
.infolio-brand-item .top-left::after, .infolio-brand-item .top-right::after, .infolio-brand-item .bottom-left::after, .infolio-brand-item .bottom-right::after {
z-index: 1;
content: "";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: #ffffff;
}
.infolio-brand-item .top-left {
top: -0.8rem;
left: -0.8rem;
}
.infolio-brand-item .top-right {
top: -0.8rem;
right: -0.8rem;
}
.infolio-brand-item .bottom-left {
bottom: -0.8rem;
left: -0.8rem;
}
.infolio-brand-item .bottom-right {
bottom: -0.8rem;
right: -0.8rem;
}
.infolio-brand-item .text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.infolio-brand-item .text span {
display: inline-block;
}
.infolio-brand-item .text .numb {
margin-top: 0;
color: #1a1a1a;
line-height: 1.3;
margin-bottom: 0.2rem;
font-weight: 400;
font-size: 80px;
}
.infolio-brand-item .text .unit {
color: #1a1a1a;
font-size: 30px;
font-weight: 400;
}
.infolio-brand-item .text .sub-title {
color: #1a1a1a;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.3;
margin-bottom: 0.2rem;
}
.infolio-brand-item svg {
width: 1.6rem;
position: relative;
z-index: 3;
opacity: 0.4;
height: auto;
}
.infolio-brand-item::after {
content: "";
position: absolute;
top: 35px;
left: 35px;
right: 35px;
bottom: 35px;
background: linear-gradient(130deg, transparent, #14cf93);
opacity: 0;
transition: all 0.4s;
}
.infolio-brand-item:hover::after {
opacity: 1;
}
@media screen and (max-width: 768px) {
.infolio-brand-item .item .top-left:after, .infolio-brand-item .item .top-right:after, .infolio-brand-item .item .bottom-left:after, .infolio-brand-item .item .bottom-right:after {
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
}
.infolio-brand-item svg {
transform: scale(0.5);
}
}
body.tcg-dark-mode .infolio-brand-item {
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.tcg-dark-mode .infolio-brand-item .top-left svg rect, body.tcg-dark-mode .infolio-brand-item .top-right svg rect, body.tcg-dark-mode .infolio-brand-item .bottom-left svg rect, body.tcg-dark-mode .infolio-brand-item .bottom-right svg rect {
fill: #ffffff;
}
body.tcg-dark-mode .infolio-brand-item .top-left::after, body.tcg-dark-mode .infolio-brand-item .top-right::after, body.tcg-dark-mode .infolio-brand-item .bottom-left::after, body.tcg-dark-mode .infolio-brand-item .bottom-right::after {
z-index: 1;
content: "";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: #1a1a1a;
}
body.tcg-dark-mode .infolio-brand-item .text .numb {
color: #ffffff;
}
body.tcg-dark-mode .infolio-brand-item .text .unit {
color: #ffffff;
}
body.tcg-dark-mode .infolio-brand-item .text .sub-title {
color: #ffffff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-brand-item {
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.tcg-auto-mode .infolio-brand-item .top-left svg rect, body.tcg-auto-mode .infolio-brand-item .top-right svg rect, body.tcg-auto-mode .infolio-brand-item .bottom-left svg rect, body.tcg-auto-mode .infolio-brand-item .bottom-right svg rect {
fill: #ffffff;
}
body.tcg-auto-mode .infolio-brand-item .top-left::after, body.tcg-auto-mode .infolio-brand-item .top-right::after, body.tcg-auto-mode .infolio-brand-item .bottom-left::after, body.tcg-auto-mode .infolio-brand-item .bottom-right::after {
z-index: 1;
content: "";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: #1a1a1a;
}
body.tcg-auto-mode .infolio-brand-item .text .numb {
color: #ffffff;
}
body.tcg-auto-mode .infolio-brand-item .text .unit {
color: #ffffff;
}
body.tcg-auto-mode .infolio-brand-item .text .sub-title {
color: #ffffff;
}
} .infolio-resume .items {
padding-left: 50px;
position: relative;
}
.infolio-resume .items a, .infolio-resume .items span {
display: inline-block;
}
.infolio-resume .items:before {
content: "";
position: absolute;
left: -5px;
top: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
z-index: 2;
}
.infolio-resume .items .date {
font-size: 14px;
display: inline-block;
color: #777777;
padding: 7px 20px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 30px;
margin-bottom: 15px;
}
.infolio-resume .items .title {
font-size: 22px;
color: #1a1a1a;
}
.infolio-resume .items .sub-title {
color: #1a1a1a;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
.infolio-resume .items p {
color: #777777;
}
body.tcg-dark-mode .infolio-resume .items:before {
background: #444;
}
body.tcg-dark-mode .infolio-resume .items .date {
color: #ccc;
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.tcg-dark-mode .infolio-resume .items .title {
color: #ffffff;
}
body.tcg-dark-mode .infolio-resume .items .sub-title {
color: #ffffff;
}
body.tcg-dark-mode .infolio-resume .items p {
color: #c6c8c9;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-resume .items:before {
background: #444;
}
body.tcg-auto-mode .infolio-resume .items .date {
color: #ccc;
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.tcg-auto-mode .infolio-resume .items .title {
color: #ffffff;
}
body.tcg-auto-mode .infolio-resume .items .sub-title {
color: #ffffff;
}
body.tcg-auto-mode .infolio-resume .items p {
color: #c6c8c9;
}
} .infolio-services-card {
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.infolio-services-card .title {
color: #1a1a1a;
}
.infolio-services-card .description {
color: #777777;
}
.infolio-services-card a, .infolio-services-card a:hover {
color: inherit;
}
.infolio-services-card:hover .readmore-animate {
opacity: 1;
top: 0px;
right: 0px;
}
.infolio-services-card:hover .readmore-animate .arrow img {
transform: none;
opacity: 1;
}
.infolio-services-card:hover .read-more.to-in {
margin-left: 0;
}
.infolio-services-card:hover .animate h5, .infolio-services-card:hover .animate p {
transform: translateY(0px);
opacity: 1;
}
.infolio-services-card .animate h5, .infolio-services-card .animate p {
transform: translateY(50px);
transition: all 0.5s;
}
.infolio-services-card .animate p {
opacity: 0;
}
.infolio-services-card .o-hidden {
overflow: hidden;
}
.infolio-services-card .read-more {
color: #1a1a1a;
margin-top: 30px;
}
.infolio-services-card .read-more.to-in {
margin-left: -100px;
transition: all 0.4s;
}
.infolio-services-card .read-more .sub-title {
color: #1a1a1a;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
}
.infolio-services-card .read-more .icon-img {
margin-left: 5px;
width: 20px;
}
.infolio-services-card .avatar {
opacity: 0.5;
}
.infolio-services-card .readmore-animate {
position: absolute;
top: -20px;
right: -20px;
background: #ffffff;
padding: 10px;
border-radius: 0 0 0 30px;
transition: all 0.4s;
opacity: 0;
}
.infolio-services-card .readmore-animate:hover .arrow {
background: #14cf93;
}
.infolio-services-card .readmore-animate .arrow {
width: 70px;
height: 70px;
line-height: 70px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 50%;
text-align: center;
transition: all 0.4s;
}
.infolio-services-card .readmore-animate .arrow .read-more-image {
width: 20px;
}
.infolio-services-card .readmore-animate .arrow img {
opacity: 0;
transform: translateX(-20px) translateY(20px);
transition-delay: 0.8s;
transition: all 0.4s;
}
.infolio-services-card .readmore-animate .shap-left-top {
position: absolute;
top: 0;
left: -2.1rem;
transform: rotate(90deg);
line-height: 1;
}
.infolio-services-card .readmore-animate .shap-left-top svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-services-card .readmore-animate .shap-left-top svg path {
fill: #ffffff;
}
.infolio-services-card .readmore-animate .shap-right-bottom {
position: absolute;
bottom: -2.1rem;
right: 0;
transform: rotate(90deg);
line-height: 1;
}
.infolio-services-card .readmore-animate .shap-right-bottom svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-services-card .readmore-animate .shap-right-bottom svg path {
fill: #ffffff;
}
body.tcg-dark-mode .infolio-services-card {
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.tcg-dark-mode .infolio-services-card .title {
color: #ffffff;
}
body.tcg-dark-mode .infolio-services-card .description {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-services-card .read-more {
color: #ffffff;
}
body.tcg-dark-mode .infolio-services-card .read-more .sub-title {
color: #ffffff;
}
body.tcg-dark-mode .infolio-services-card .readmore-animate {
background: #1a1a1a;
}
body.tcg-dark-mode .infolio-services-card .readmore-animate .arrow {
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.tcg-dark-mode .infolio-services-card .readmore-animate .shap-left-top svg path {
fill: #1a1a1a;
}
body.tcg-dark-mode .infolio-services-card .readmore-animate .shap-right-bottom svg path {
fill: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-services-card {
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.1);
}
body.tcg-auto-mode .infolio-services-card .title {
color: #ffffff;
}
body.tcg-auto-mode .infolio-services-card .description {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-services-card .read-more {
color: #ffffff;
}
body.tcg-auto-mode .infolio-services-card .read-more .sub-title {
color: #ffffff;
}
body.tcg-auto-mode .infolio-services-card .readmore-animate {
background: #1a1a1a;
}
body.tcg-auto-mode .infolio-services-card .readmore-animate .arrow {
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.tcg-auto-mode .infolio-services-card .readmore-animate .shap-left-top svg path {
fill: #1a1a1a;
}
body.tcg-auto-mode .infolio-services-card .readmore-animate .shap-right-bottom svg path {
fill: #1a1a1a;
}
} .infolio-filtering .link {
cursor: pointer;
position: relative;
}
.infolio-filtering .link::after {
content: "";
position: absolute;
left: -2px;
right: 110%;
bottom: -2px;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
transition: all 0.4s;
}
.infolio-filtering .link.active::after {
right: -2px;
}
.infolio-portfolio-gallery {
position: relative;
}
.infolio-portfolio-gallery.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-portfolio-gallery.row.sm-marg {
margin-left: -5px !important;
margin-right: -5px !important;
}
.infolio-portfolio-gallery.row.sm-marg > * {
padding-left: 5px !important;
padding-right: 5px !important;
}
.infolio-portfolio-gallery.row.stand-marg {
margin-left: -20px !important;
margin-right: -20px !important;
}
.infolio-portfolio-gallery.row.stand-marg > * {
padding-left: 20px !important;
padding-right: 20px !important;
}
.infolio-portfolio-gallery .item a, .infolio-portfolio-gallery .item a:hover {
color: inherit;
}
.infolio-portfolio-gallery .item a, .infolio-portfolio-gallery .item span {
display: inline-block;
}
.infolio-portfolio-gallery .item .ml-auto {
margin-left: auto;
}
.infolio-portfolio-gallery .item:hover .img .cont {
opacity: 1;
transform: translateY(0);
}
.infolio-portfolio-gallery .item:hover .img .cont.under {
transform: none;
}
.infolio-portfolio-gallery .item .img {
position: relative;
overflow: hidden;
}
.infolio-portfolio-gallery .item .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.infolio-portfolio-gallery .item .img .cont {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
padding: 15px 30px;
background: #FFFFFF;
border-radius: 5px;
transform: translateY(20px);
opacity: 0;
transition: all 0.4s;
}
.infolio-portfolio-gallery .item .img .cont h5 {
font-size: 20px;
color: #1a1a1a;
}
.infolio-portfolio-gallery .item .img .cont p {
color: #777777;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}
.infolio-portfolio-gallery .item .img .cont.blur {
backdrop-filter: blur(30px);
}
.infolio-portfolio-gallery .item .img .cont.blur h5 {
color: #fff;
}
.infolio-portfolio-gallery .item .img .cont.blur p {
color: #dddddd;
}
.infolio-portfolio-gallery .item .img .cont .picon svg {
width: 16px;
height: 16px;
fill: white;
}
.infolio-portfolio-gallery .item .img .cont .picon i {
font-size: 16px;
color: #1a1a1a;
}
.infolio-portfolio-gallery .item .img .cont img {
width: 20px;
}
.infolio-portfolio-gallery .item .img .cont.d-flex {
padding: 25px 30px;
}
.infolio-portfolio-gallery .item .img .cont.under {
position: relative;
transform: none;
opacity: 1;
bottom: 0;
left: 0;
right: 0;
transition: none;
}
@media screen and (max-width: 992px) {
.infolio-portfolio-gallery.row.stand-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.infolio-portfolio-gallery.row.stand-marg > * {
padding-left: 15px !important;
padding-right: 15px !important;
}
.infolio-portfolio-gallery.row.sm-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.infolio-portfolio-gallery.row.sm-marg > * {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
body.tcg-dark-mode .infolio-filtering .link::after {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
body.tcg-dark-mode .infolio-portfolio-gallery .item .img .cont {
background: #1d1d1d;
}
body.tcg-dark-mode .infolio-portfolio-gallery .item .img .cont h5 {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-portfolio-gallery .item .img .cont p {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-portfolio-gallery .item .img .cont.blur h5 {
color: #fff;
}
body.tcg-dark-mode .infolio-portfolio-gallery .item .img .cont.blur p {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-portfolio-gallery .item .img .cont .picon i {
color: #ffffff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-filtering .link::after {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
body.tcg-auto-mode .infolio-portfolio-gallery .item .img .cont {
background: #1d1d1d;
}
body.tcg-auto-mode .infolio-portfolio-gallery .item .img .cont h5 {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-portfolio-gallery .item .img .cont p {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-portfolio-gallery .item .img .cont.blur h5 {
color: #fff;
}
body.tcg-auto-mode .infolio-portfolio-gallery .item .img .cont.blur p {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-portfolio-gallery .item .img .cont .picon i {
color: #ffffff;
}
} .infolio-slides {
position: relative;
}
.infolio-slides [data-overlay-dark]:before {
background: #1d1d1d;
}
.infolio-slides .valign {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.infolio-slides .swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.infolio-slides .parallax-slider {
position: relative;
}
.infolio-slides .parallax-slider .swiper-slide {
position: relative;
overflow: hidden;
width: 100%;
min-height: 100vh;
padding: 80px 0;
border-radius: 0 0 0 30px;
}
.infolio-slides .parallax-slider .swiper-slide .bg-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
.infolio-slides .parallax-slider .caption h2 {
margin: 0 0 30px 0;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 7px;
}
.infolio-slides .parallax-slider .caption h1 {
margin: 0;
font-size: 110px;
}
.infolio-slides .slider-control {
background-color: #FFFFFF;
position: absolute;
bottom: -2px;
right: 0;
border-radius: 40px 0 0 0;
padding: 20px 40px;
display: flex;
align-items: center;
z-index: 5;
color: #1a1a1a;
font-size: 14px;
font-weight: 400;
}
.infolio-slides .slider-control .sep {
margin: 0 30px;
}
.infolio-slides .slider-control .swiper-nav-ctrl {
position: static;
width: auto;
height: auto;
margin: 0;
color: inherit;
text-transform: uppercase;
}
.infolio-slides .slider-control .swiper-nav-ctrl:after {
display: none;
}
.infolio-slides .slider-control .shap-left-bottom {
position: absolute;
bottom: 0;
left: -2rem;
transform: rotate(180deg);
}
.infolio-slides .slider-control .shap-left-bottom svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-slides .slider-control .shap-left-bottom svg path {
fill: #FFFFFF;
}
.infolio-slides .slider-control .shap-right-top {
position: absolute;
top: -2.05rem;
right: 0;
transform: rotate(180deg);
}
.infolio-slides .slider-control .shap-right-top svg {
width: 2.1rem;
height: 2.1rem;
}
.infolio-slides .slider-control .shap-right-top svg path {
fill: #FFFFFF;
}
.infolio-slides .swiper-pagination {
color: #fff;
position: absolute;
left: 30px;
bottom: 20px !important;
width: auto;
font-size: 40px;
}
.infolio-slides .swiper-pagination .swiper-pagination-total {
position: relative;
padding-left: 25px;
margin-left: 15px;
}
.infolio-slides .swiper-pagination .swiper-pagination-total:before {
color: #fff;
content: "/";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
body.tcg-dark-mode .infolio-slides .slider-control {
background-color: #1a1a1a;
}
body.tcg-dark-mode .infolio-slides .slider-control .shap-left-bottom svg path {
fill: #1a1a1a;
}
body.tcg-dark-mode .infolio-slides .slider-control .shap-right-top svg path {
fill: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-slides .slider-control {
background-color: #1a1a1a;
}
body.tcg-auto-mode .infolio-slides .slider-control .shap-left-bottom svg path {
fill: #1a1a1a;
}
body.tcg-auto-mode .infolio-slides .slider-control .shap-right-top svg path {
fill: #1a1a1a;
}
} .infolio-mailchimp {
position: relative;
}
.infolio-mailchimp.button-inside button {
color: #000;
padding: 15px 0;
position: absolute;
top: 5px;
right: 30px;
background: transparent;
border: 0;
}
.infolio-mailchimp.button-inside button svg {
fill: #FFFFFF;
width: 16px;
height: 16px;
} .infolio-work-carsouel {
position: relative;
}
.infolio-work-carsouel .container {
padding-right: 12px;
padding-left: 12px;
}
.infolio-work-carsouel a, .infolio-work-carsouel span {
display: inline-block;
}
.infolio-work-carsouel a, .infolio-work-carsouel a:hover {
color: inherit;
}
.infolio-work-carsouel .sec-head {
margin-bottom: 80px;
}
.infolio-work-carsouel .sec-head .sub-title {
margin-bottom: 25px;
color: #14cf93;
}
.infolio-work-carsouel .sec-head h2 {
color: #1a1a1a;
margin: 0;
}
.infolio-work-carsouel .sec-head h2 .light-title {
font-weight: 200;
}
.infolio-work-carsouel .sec-head .buttons {
margin-left: auto;
}
.infolio-work-carsouel .sec-head .bord {
position: relative;
padding-right: 30px;
padding-top: 25px;
border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.infolio-work-carsouel .sec-head .bord:after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 40px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.infolio-work-carsouel .infolio-work-crus.out {
width: 120%;
margin-left: -10%;
}
.infolio-work-carsouel .infolio-work-crus .swiper-slide:hover .img img {
height: 100%;
width: 100%;
}
.infolio-work-carsouel .infolio-work-crus .swiper-slide:hover .img .cont span,
.infolio-work-carsouel .infolio-work-crus .swiper-slide:hover .img .cont h5 {
opacity: 1;
transform: translate(0);
}
.infolio-work-carsouel .infolio-work-crus .img {
position: relative;
}
.infolio-work-carsouel .infolio-work-crus .img .cont {
position: absolute;
bottom: 30px;
left: 30px;
}
.infolio-work-carsouel .infolio-work-crus .img .cont span,
.infolio-work-carsouel .infolio-work-crus .img .cont h5 {
background: #FFFFFF;
color: #1a1a1a;
font-weight: 500;
padding: 5px 15px;
transform: translateY(10px);
opacity: 0;
transition: all 0.4s;
}
.infolio-work-carsouel .infolio-work-crus .img .cont h5 {
transition-delay: 0.2s;
}
.infolio-work-carsouel .infolio-work-crus .img .plink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.infolio-work-carsouel .work-controls {
position: absolute;
bottom: 40px;
left: 0;
width: 100%;
}
.infolio-work-carsouel .work-controls .swiper-pagination {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 44;
}
.infolio-work-carsouel .work-controls .swiper-pagination span {
cursor: pointer;
}
.infolio-work-carsouel .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.infolio-work-carsouel .swiper-arrow-control .swiper-button-next {
margin-left: 15px;
}
.infolio-work-carsouel .swiper-arrow-control .swiper-button-prev, .infolio-work-carsouel .swiper-arrow-control .swiper-button-next {
position: static;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
color: inherit;
}
.infolio-work-carsouel .swiper-arrow-control .swiper-button-prev i, .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev svg, .infolio-work-carsouel .swiper-arrow-control .swiper-button-next i, .infolio-work-carsouel .swiper-arrow-control .swiper-button-next svg {
font-size: 14px;
fill: #1a1a1a;
color: #1a1a1a;
}
.infolio-work-carsouel .swiper-arrow-control .swiper-button-prev i path, .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev svg path, .infolio-work-carsouel .swiper-arrow-control .swiper-button-next i path, .infolio-work-carsouel .swiper-arrow-control .swiper-button-next svg path {
fill: #1a1a1a;
}
.infolio-work-carsouel .swiper-arrow-control .swiper-button-prev::after, .infolio-work-carsouel .swiper-arrow-control .swiper-button-next::after {
display: none;
}
@media screen and (max-width: 768px) {
.infolio-work-carsouel .sec-head .bord {
display: block !important;
}
.infolio-work-carsouel .sec-head .bord .buttons {
margin-top: 15px;
}
}
body.tcg-dark-mode .infolio-work-carsouel .sec-head h2 {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-work-carsouel .sec-head .bord {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-dark-mode .infolio-work-carsouel .sec-head .bord:after {
border-color: rgba(255, 255, 255, 0.1);
}
body.tcg-dark-mode .infolio-work-carsouel .infolio-work-crus .img .cont span,
body.tcg-dark-mode .infolio-work-carsouel .infolio-work-crus .img .cont h5 {
background: #1a1a1a;
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev, body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next {
background: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev i, body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev svg, body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next i, body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next svg {
fill: white;
color: white;
}
body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev i path, body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev svg path, body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next i path, body.tcg-dark-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next svg path {
fill: white;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-work-carsouel .sec-head h2 {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-work-carsouel .sec-head .bord {
border-color: rgba(255, 255, 255, 0.14);
}
body.tcg-auto-mode .infolio-work-carsouel .sec-head .bord:after {
border-color: rgba(255, 255, 255, 0.1);
}
body.tcg-auto-mode .infolio-work-carsouel .infolio-work-crus .img .cont span,
body.tcg-auto-mode .infolio-work-carsouel .infolio-work-crus .img .cont h5 {
background: #1a1a1a;
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev, body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next {
background: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev i, body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev svg, body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next i, body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next svg {
fill: white;
color: white;
}
body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev i path, body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-prev svg path, body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next i path, body.tcg-auto-mode .infolio-work-carsouel .swiper-arrow-control .swiper-button-next svg path {
fill: white;
}
} .infolio-toggle-tabs a {
display: inline-block;
}
.infolio-toggle-tabs .row.lg-marg {
margin-left: -40px !important;
margin-right: -40px !important;
}
.infolio-toggle-tabs .row.lg-marg > * {
padding-left: 40px !important;
padding-right: 40px !important;
}
.infolio-toggle-tabs .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-toggle-tabs .rest {
margin: 0;
padding: 0;
}
.infolio-toggle-tabs .rest li {
list-style-type: none;
}
.infolio-toggle-tabs .serv-tab-cont .tab-content {
display: none;
}
.infolio-toggle-tabs .serv-tab-cont .tab-content.current {
display: block;
}
.infolio-toggle-tabs .serv-tab-cont .item {
position: relative;
}
.infolio-toggle-tabs .serv-tab-cont .item .img {
width: 70%;
height: 540px;
}
.infolio-toggle-tabs .serv-tab-cont .item .cont {
background: #f5f7f9;
position: absolute;
bottom: -80px;
left: 20%;
right: 0;
padding: 80px 40px;
}
.infolio-toggle-tabs .serv-tab-cont .item .cont .text {
color: #777777;
}
.infolio-toggle-tabs .serv-tab-cont .item .cont .button {
color: #1a1a1a;
}
.infolio-toggle-tabs .serv-tab-cont .item .cont .button i,
.infolio-toggle-tabs .serv-tab-cont .item .cont .button svg {
color: #1a1a1a;
fill: #1a1a1a;
}
.infolio-toggle-tabs .serv-tab-link {
padding-top: 40px;
width: 100%;
}
.infolio-toggle-tabs .serv-tab-link .sec-head .heading {
color: #14CF93;
}
.infolio-toggle-tabs .serv-tab-link .sec-head .main-heading {
color: #1a1a1a;
}
.infolio-toggle-tabs .serv-tab-link .desc {
color: #777777;
}
.infolio-toggle-tabs .serv-tab-link .item-link {
cursor: pointer;
color: #1a1a1a;
}
.infolio-toggle-tabs .serv-tab-link .item-link span {
margin-right: 30px;
}
@media screen and (max-width: 768px) {
.infolio-toggle-tabs .serv-tab-cont .item .cont {
left: 15px;
}
.infolio-toggle-tabs .serv-tab-cont .item .img {
width: 90%;
}
}
@media screen and (max-width: 992px) {
.infolio-toggle-tabs .row.lg-marg {
margin-left: -12px !important;
margin-right: -12px !important;
}
.infolio-toggle-tabs .row.lg-marg > * {
padding-left: 12px !important;
padding-right: 12px !important;
}
.infolio-toggle-tabs .serv-tab-cont {
margin-bottom: 80px;
}
}
body.tcg-dark-mode .infolio-toggle-tabs .serv-tab-cont .item .cont {
background: #1d1d1d;
}
body.tcg-dark-mode .infolio-toggle-tabs .serv-tab-cont .item .cont .text {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-toggle-tabs .serv-tab-cont .item .cont .button {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-toggle-tabs .serv-tab-cont .item .cont .button i,
body.tcg-dark-mode .infolio-toggle-tabs .serv-tab-cont .item .cont .button svg {
color: #FFFFFF;
fill: #FFFFFF;
}
body.tcg-dark-mode .infolio-toggle-tabs .serv-tab-link .sec-head .main-heading {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-toggle-tabs .serv-tab-link .desc {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-toggle-tabs .serv-tab-link .item-link {
color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-toggle-tabs .serv-tab-cont .item .cont {
background: #1d1d1d;
}
body.tcg-auto-mode .infolio-toggle-tabs .serv-tab-cont .item .cont .text {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-toggle-tabs .serv-tab-cont .item .cont .button {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-toggle-tabs .serv-tab-cont .item .cont .button i,
body.tcg-auto-mode .infolio-toggle-tabs .serv-tab-cont .item .cont .button svg {
color: #FFFFFF;
fill: #FFFFFF;
}
body.tcg-auto-mode .infolio-toggle-tabs .serv-tab-link .sec-head .main-heading {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-toggle-tabs .serv-tab-link .desc {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-toggle-tabs .serv-tab-link .item-link {
color: #FFFFFF;
}
} .infolio-testimonials-rating span {
display: inline-block;
}
.infolio-testimonials-rating .ml-auto {
margin-left: auto;
}
.infolio-testimonials-rating .swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.infolio-testimonials-rating .infolio-testim-rate-swiper {
position: relative;
padding: 60px 80px 60px 0;
}
.infolio-testimonials-rating .infolio-testim-rate-swiper:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: -2px;
width: 100vw;
background: #FFFFFF;
}
.infolio-testimonials-rating .swiper-slide {
padding-top: 50px;
}
.infolio-testimonials-rating .item .cont {
margin-left: 100px;
}
.infolio-testimonials-rating .item .text {
position: relative;
}
.infolio-testimonials-rating .item .text .quote {
color: #1a1a1a;
}
.infolio-testimonials-rating .item .text .qout-svg {
position: absolute;
left: -40px;
top: -70px;
width: 160px;
}
.infolio-testimonials-rating .item .text .qout-svg path {
stroke: #1a1a1a;
}
.infolio-testimonials-rating .item .circle {
width: 300px;
height: 300px;
overflow: hidden;
border-radius: 50%;
}
.infolio-testimonials-rating .item .circle img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.infolio-testimonials-rating .item .rate {
color: #14cf93;
font-size: 14px;
}
.infolio-testimonials-rating .item .rate i,
.infolio-testimonials-rating .item .rate svg {
margin-right: 4px;
}
.infolio-testimonials-rating .item .rate i:last-of-type,
.infolio-testimonials-rating .item .rate svg:last-of-type {
margin-right: 0;
}
.infolio-testimonials-rating .item .info {
border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.infolio-testimonials-rating .item .info .name {
color: #1a1a1a;
}
.infolio-testimonials-rating .item .info .position {
color: #14CF93;
}
.infolio-testimonials-rating .swiper-arrow-control {
position: absolute;
top: 50%;
right: -15px;
display: block;
}
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev,
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-next {
position: static;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.01);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
color: inherit;
}
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev i,
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev svg,
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-next i,
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-next svg {
font-size: 14px;
fill: #FFFFFF;
color: #FFFFFF;
}
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev i path,
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev svg path,
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-next i path,
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-next svg path {
fill: #FFFFFF;
}
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev::after,
.infolio-testimonials-rating .swiper-arrow-control .swiper-button-next::after {
display: none;
}
.infolio-testimonials-rating .control-abslout {
position: absolute;
top: 50%;
right: -30px;
display: block;
}
.infolio-testimonials-rating .control-abslout .swiper-button-next {
margin: 15px 0 0;
}
.infolio-testimonials-rating .control-abslout .swiper-button-prev,
.infolio-testimonials-rating .control-abslout .swiper-button-next {
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
}
@media screen and (max-width: 992px) {
.infolio-testimonials-rating .item .circle {
display: none;
}
.infolio-testimonials-rating .item .text .qout-svg {
top: -100px;
width: 100px;
left: 0;
}
.infolio-testimonials-rating .control-abslout {
right: -15px;
}
}
body.tcg-dark-mode .infolio-testimonials-rating .infolio-testim-rate-swiper:after {
background: #1a1a1a;
}
body.tcg-dark-mode .infolio-testimonials-rating .item .text .quote {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-testimonials-rating .item .text .qout-svg path {
stroke: #FFFFFF;
}
body.tcg-dark-mode .infolio-testimonials-rating .item .info {
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
body.tcg-dark-mode .infolio-testimonials-rating .item .info .name {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev,
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next {
background: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev i,
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev svg,
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next i,
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next svg {
fill: #FFFFFF;
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev i path,
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev svg path,
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next i path,
body.tcg-dark-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next svg path {
fill: #FFFFFF;
}
body.tcg-dark-mode .infolio-testimonials-rating .control-abslout .swiper-button-prev,
body.tcg-dark-mode .infolio-testimonials-rating .control-abslout .swiper-button-next {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(7px);
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-testimonials-rating .infolio-testim-rate-swiper:after {
background: #1a1a1a;
}
body.tcg-auto-mode .infolio-testimonials-rating .item .text .quote {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-testimonials-rating .item .text .qout-svg path {
stroke: #FFFFFF;
}
body.tcg-auto-mode .infolio-testimonials-rating .item .info {
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
body.tcg-auto-mode .infolio-testimonials-rating .item .info .name {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev,
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next {
background: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.05);
}
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev i,
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev svg,
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next i,
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next svg {
fill: #FFFFFF;
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev i path,
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-prev svg path,
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next i path,
body.tcg-auto-mode .infolio-testimonials-rating .swiper-arrow-control .swiper-button-next svg path {
fill: #FFFFFF;
}
body.tcg-auto-mode .infolio-testimonials-rating .control-abslout .swiper-button-prev,
body.tcg-auto-mode .infolio-testimonials-rating .control-abslout .swiper-button-next {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(7px);
}
} .infolio-breadcrumbs .sep {
padding-right: 20px;
padding-left: 20px;
} .infolio-contact-form p {
margin: 0;
}
.infolio-contact-form p input:focus {
box-shadow: none;
}
.infolio-contact-form p textarea:focus {
box-shadow: none;
}
.infolio-contact-form .wpcf7-spinner {
position: absolute;
} .infolio-awards-items .item-title {
padding: 0 15px 25px;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.infolio-awards-items .item-title.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-awards-items .item-title > div {
padding: 0 !important;
}
.infolio-awards-items .item-title .sub-title {
color: #1a1a1a;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 0.2rem;
}
.infolio-awards-items .item-line {
color: #1a1a1a;
padding: 25px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
position: relative;
transition: all 0.4s;
z-index: 3;
}
.infolio-awards-items .item-line.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-awards-items .item-line a, .infolio-awards-items .item-line a:hover {
color: inherit;
}
.infolio-awards-items .item-line a, .infolio-awards-items .item-line span {
display: inline-block;
}
.infolio-awards-items .item-line > div {
padding: 0 !important;
}
.infolio-awards-items .item-line > div:last-of-type {
text-align: right;
}
.infolio-awards-items .item-line h6 {
color: #1a1a1a;
font-size: 20px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 0.2rem;
}
.infolio-awards-items .item-line .date {
font-size: 14px;
opacity: 0.7;
margin-left: 15px;
}
.infolio-awards-items .item-line:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #fff;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
z-index: -1;
}
.infolio-awards-items .item-line:hover:after {
height: 100%;
}
@media screen and (max-width: 768px) {
.infolio-awards-items .item-line > div:last-of-type {
text-align: left;
}
}
body.tcg-dark-mode .infolio-awards-items .item-title {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
body.tcg-dark-mode .infolio-awards-items .item-title .sub-title {
color: #fff;
}
body.tcg-dark-mode .infolio-awards-items .item-line {
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.tcg-dark-mode .infolio-awards-items .item-line h6 {
color: #fff;
}
body.tcg-dark-mode .infolio-awards-items .item-line:hover {
color: #0c0c0c;
}
body.tcg-dark-mode .infolio-awards-items .item-line:hover h6 {
color: #0c0c0c;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-awards-items .item-title {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
body.tcg-auto-mode .infolio-awards-items .item-title .sub-title {
color: #fff;
}
body.tcg-auto-mode .infolio-awards-items .item-line {
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.tcg-auto-mode .infolio-awards-items .item-line h6 {
color: #fff;
}
body.tcg-auto-mode .infolio-awards-items .item-line:hover {
color: #0c0c0c;
}
body.tcg-auto-mode .infolio-awards-items .item-line:hover h6 {
color: #0c0c0c;
}
} .infolio-asymmetric-portfolio .items {
margin-top: 120px;
}
.infolio-asymmetric-portfolio .items.plr-40 {
padding-left: 40px !important;
padding-right: 40px !important;
}
.infolio-asymmetric-portfolio .items .item .img img {
width: 100%;
}
.infolio-asymmetric-portfolio .items .item .cont {
margin-top: 30px;
}
.infolio-asymmetric-portfolio .items .item .cont .title {
color: #1a1a1a;
}
.infolio-asymmetric-portfolio .items .item .cont .date {
color: #1a1a1a;
}
.infolio-asymmetric-portfolio .items .item .cont span {
display: inline-block;
}
.infolio-asymmetric-portfolio .items .item .cont .margin-bottom-5 {
margin-bottom: 5px;
}
.infolio-asymmetric-portfolio .items .item .cont .ml-auto {
margin-left: auto;
}
@media screen and (max-width: 992px) {
.infolio-asymmetric-portfolio .items.plr-40 {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
body.tcg-dark-mode .infolio-asymmetric-portfolio .items .item .cont .title {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-asymmetric-portfolio .items .item .cont .date {
color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-asymmetric-portfolio .items .item .cont .title {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-asymmetric-portfolio .items .item .cont .date {
color: #FFFFFF;
}
} .infolio-creative-blog-list .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-creative-blog-list .item {
padding: 40px;
position: relative;
}
.infolio-creative-blog-list .item.change-background {
background: #eee;
}
.infolio-creative-blog-list .item a,
.infolio-creative-blog-list .item a:hover {
color: inherit;
}
.infolio-creative-blog-list .item a,
.infolio-creative-blog-list .item span {
display: inline-block;
}
.infolio-creative-blog-list .item .ml-auto {
margin-left: auto;
}
.infolio-creative-blog-list .item:hover .background {
opacity: 1;
background-position: center bottom;
}
.infolio-creative-blog-list .item .cont .title {
color: #1a1a1a;
}
.infolio-creative-blog-list .item .cont .categories a {
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 30px;
margin: 5px 5px 5px 0;
color: #1a1a1a;
}
.infolio-creative-blog-list .item .info .author {
margin-right: 20px;
}
.infolio-creative-blog-list .item .info .author .author-image {
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 50%;
}
.infolio-creative-blog-list .item .info .author .author-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.infolio-creative-blog-list .item .info .author .author-info .author-text {
color: #1a1a1a;
}
.infolio-creative-blog-list .item .info .author .author-info .author-name {
color: #1a1a1a;
}
.infolio-creative-blog-list .item .date {
color: #1a1a1a;
}
.infolio-creative-blog-list .item .background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
opacity: 0;
transition: opacity 0.4s, background-position 10s linear;
}
.infolio-creative-blog-list .item .background .more {
z-index: 7;
width: 100%;
}
.infolio-creative-blog-list .item .background .more a {
font-size: 14px;
padding: 14px 35px;
border-radius: 30px;
}
.infolio-creative-blog-list .item .background .more a span,
.infolio-creative-blog-list .item .background .more a i {
color: #000;
}
@media screen and (max-width: 992px) {
.infolio-creative-blog-list .justify-end {
justify-content: flex-start !important;
}
.infolio-creative-blog-list .item .ml-auto {
margin-left: 0;
margin-top: 30px;
}
}
body.tcg-dark-mode .infolio-creative-blog-list .item {
background: #1d1d1d;
}
body.tcg-dark-mode .infolio-creative-blog-list .item.change-background {
background: #1a1a1a;
}
body.tcg-dark-mode .infolio-creative-blog-list .item .cont .title {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-creative-blog-list .item .cont .categories a {
color: #ffffff;
}
body.tcg-dark-mode .infolio-creative-blog-list .item .info .author .author-info .author-text {
color: white;
}
body.tcg-dark-mode .infolio-creative-blog-list .item .info .author .author-info .author-name {
color: white;
}
body.tcg-dark-mode .infolio-creative-blog-list .item .date {
color: white;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-creative-blog-list .item {
background: #1a1a1a;
}
body.tcg-auto-mode .infolio-creative-blog-list .item.change-background {
background: #1d1d1d;
}
body.tcg-auto-mode .infolio-creative-blog-list .item .cont .title {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-creative-blog-list .item .cont .categories a {
color: #ffffff;
}
body.tcg-auto-mode .infolio-creative-blog-list .item .info .author .author-info .author-text {
color: white;
}
body.tcg-auto-mode .infolio-creative-blog-list .item .info .author .author-info .author-name {
color: white;
}
body.tcg-auto-mode .infolio-creative-blog-list .item .date {
color: white;
}
} .infolio-text-editor p {
padding: 0;
margin: 0;
word-spacing: 0;
} .infolio-post-categories .rest {
margin: 0;
padding: 0;
}
.infolio-post-categories .rest li {
display: flex;
list-style-type: none;
font-size: 15px;
padding: 10px 20px;
background: rgba(0, 0, 0, 0.02);
border-radius: 30px;
}
.infolio-post-categories .rest li .count {
color: #1a1a1a;
margin-left: auto;
}
.infolio-post-categories .rest li .category {
color: #1a1a1a;
}
.infolio-post-categories .rest li span {
display: inline-block;
}
body.tcg-dark-mode .infolio-post-categories .rest li {
background: rgba(255, 255, 255, 0.02);
}
body.tcg-dark-mode .infolio-post-categories .rest li .count {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-post-categories .rest li .category {
color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-post-categories .rest li {
background: rgba(255, 255, 255, 0.02);
}
body.tcg-auto-mode .infolio-post-categories .rest li .count {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-post-categories .rest li .category {
color: #FFFFFF;
}
} .infolio-post-tags a {
display: inline-block;
transition: all 0.4s;
background: rgba(0, 0, 0, 0.02);
color: #1a1a1a;
}
.infolio-post-tags a:hover {
background: #14CF93;
}
body.tcg-dark-mode .infolio-post-tags a {
display: inline-block;
transition: all 0.4s;
background: rgba(255, 255, 255, 0.02);
color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-post-tags a {
display: inline-block;
transition: all 0.4s;
background: rgba(255, 255, 255, 0.02);
color: #FFFFFF;
}
} .infolio-search-field {
position: relative;
}
.infolio-search-field input {
color: #1a1a1a;
padding: 15px;
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
width: 100%;
background: transparent;
}
.infolio-search-field input:focus {
border-color: #1a1a1a;
box-shadow: none;
}
.infolio-search-field .searchsubmit {
background-color: transparent;
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
margin: 0;
padding: 0;
border: 0;
}
.infolio-search-form {
position: relative;
}
.infolio-search-form .infolio-search-icon {
position: relative;
}
.infolio-search-form .infolio-search-icon .form-group {
width: 267.2px;
position: absolute;
right: 0;
bottom: -35px;
transform: translateY(100%);
padding: 15px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
opacity: 0;
visibility: hidden;
transition: all 0.4s;
}
.infolio-search-form .infolio-search-icon .form-group input {
padding: 10px 55px 10px 15px;
background: #fff;
border: 0;
border-radius: 5px;
}
.infolio-search-form .infolio-search-icon .form-group button {
position: absolute;
top: 15px;
right: 15px;
padding: 10px 15px;
background: #ccc;
border: 0;
border-radius: 5px;
}
.infolio-search-form .infolio-search-icon .search-icon {
position: relative;
padding: 25px 30px;
cursor: pointer;
color: #fff;
}
.infolio-search-form .infolio-search-icon .search-icon:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.infolio-search-form .infolio-search-icon .search-icon .close-search {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.15);
text-align: center;
padding: 25px 0;
font-size: 20px;
display: none;
}
.infolio-search-form .infolio-search-icon .search-icon .open-search {
transition: all 0.3s;
}
.infolio-search-form.open .form-group {
opacity: 1;
visibility: visible;
bottom: -1px;
}
.infolio-search-form.open .search-icon .open-search {
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
}
body.tcg-dark-mode .infolio-search-field input {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
}
body.tcg-dark-mode .infolio-search-field input:focus {
border-color: #fff;
}
body.tcg-dark-mode .infolio-search-form .infolio-search-icon .search-icon {
color: #fff;
}
body.tcg-dark-mode .infolio-search-form .infolio-search-icon .form-group {
backdrop-filter: blur(4px);
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-search-field input {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
}
body.tcg-auto-mode .infolio-search-field input:focus {
border-color: #fff;
}
body.tcg-auto-mode .infolio-search-form .infolio-search-icon .form-group {
backdrop-filter: blur(4px);
}
} .infolio-blog-classic .item .cont {
background: #fff;
width: 95%;
position: relative;
z-index: 3;
}
.infolio-blog-classic .item .cont a, .infolio-blog-classic .item .cont span {
display: inline-block;
}
.infolio-blog-classic .item .cont a, .infolio-blog-classic .item .cont a:hover {
color: inherit;
}
.infolio-blog-classic .item .cont .title {
color: #1a1a1a;
}
.infolio-blog-classic .item .cont .date-comment {
margin-bottom: 15px;
}
.infolio-blog-classic .item .cont .date-comment .post-date {
padding: 7px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 30px;
font-size: 12px;
color: #1d1d1d;
text-transform: uppercase;
margin-right: 15px;
}
.infolio-blog-classic .item .cont .date-comment .comment {
color: #1a1a1a;
}
.infolio-blog-classic .item .cont .date-comment .comment svg {
fill: #1a1a1a;
}
.infolio-blog-classic .item .cont .excerpt {
color: #777777;
margin: 0;
}
.infolio-blog-classic .item .cont .r-more {
color: #1a1a1a;
}
.infolio-blog-classic .item .cont .r-more svg {
fill: #1a1a1a;
}
body.tcg-dark-mode .infolio-blog-classic .item .cont {
background: #1a1a1a;
}
body.tcg-dark-mode .infolio-blog-classic .item .cont .title {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-blog-classic .item .cont .date-comment .post-date {
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ddd;
}
body.tcg-dark-mode .infolio-blog-classic .item .cont .date-comment .comment {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-blog-classic .item .cont .date-comment .comment svg {
fill: #ffffff;
}
body.tcg-dark-mode .infolio-blog-classic .item .cont .excerpt {
color: #c6c8c9;
margin: 0;
}
body.tcg-dark-mode .infolio-blog-classic .item .cont .r-more {
color: #fff;
}
body.tcg-dark-mode .infolio-blog-classic .item .cont .r-more svg {
fill: #fff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-blog-classic .item .cont {
background: #1a1a1a;
}
body.tcg-auto-mode .infolio-blog-classic .item .cont .title {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-blog-classic .item .cont .date-comment .post-date {
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ddd;
}
body.tcg-auto-mode .infolio-blog-classic .item .cont .date-comment .comment {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-blog-classic .item .cont .date-comment .comment svg {
fill: #ffffff;
}
body.tcg-auto-mode .infolio-blog-classic .item .cont .excerpt {
color: #c6c8c9;
margin: 0;
}
body.tcg-auto-mode .infolio-blog-classic .item .cont .r-more {
color: #fff;
}
body.tcg-auto-mode .infolio-blog-classic .item .cont .r-more svg {
fill: #fff;
}
} .infolio-latest-posts .item {
display: flex;
}
.infolio-latest-posts .item span, .infolio-latest-posts .item a {
display: inline-block;
}
.infolio-latest-posts .item a, .infolio-latest-posts .item a:hover {
color: inherit;
}
.infolio-latest-posts .item:hover .img a .post-date {
opacity: 1;
}
.infolio-latest-posts .item .img {
width: 90px;
height: 100px;
border-radius: 5px;
overflow: hidden;
}
.infolio-latest-posts .item .img a {
width: 100%;
height: 100%;
position: relative;
}
.infolio-latest-posts .item .img a .post-date {
color: #1a1a1a;
position: absolute;
top: 50%;
left: 50%;
font-size: 14px;
width: 50px;
height: 50px;
text-align: center;
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 3;
opacity: 0;
transition: all 0.4s;
}
.infolio-latest-posts .item .img a .post-date span {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
line-height: 1;
}
.infolio-latest-posts .item .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.infolio-latest-posts .item .cont {
padding-left: 25px;
}
.infolio-latest-posts .item .cont h6 {
color: #1a1a1a;
font-size: 17px;
}
.infolio-latest-posts .item .cont .categories {
color: #1a1a1a;
font-size: 12px;
padding: 5px 15px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.03);
margin-bottom: 10px;
}
body.tcg-dark-mode .infolio-latest-posts .item .img .post-date {
color: #ffffff;
}
body.tcg-dark-mode .infolio-latest-posts .cont h6 {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-latest-posts .cont .categories {
color: #FFFFFF;
background: rgba(255, 255, 255, 0.03);
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-post-tags a {
display: inline-block;
transition: all 0.4s;
background: rgba(255, 255, 255, 0.02);
color: #FFFFFF;
}
} .infolio-work-metro .row.xxlg-marg {
margin-left: -80px !important;
margin-right: -80px !important;
}
.infolio-work-metro .row.xxlg-marg > * {
padding-left: 80px !important;
padding-right: 80px !important;
}
.infolio-work-metro .item {
margin-top: 140px;
}
.infolio-work-metro .item .img {
height: 480px;
}
.infolio-work-metro .item .img.p-relative {
position: relative;
}
.infolio-work-metro .item .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.infolio-work-metro .item .cont a, .infolio-work-metro .item .cont span {
display: inline-block;
}
.infolio-work-metro .item .cont a, .infolio-work-metro .item .cont a:hover {
color: inherit;
}
.infolio-work-metro .item .cont .title {
color: #1a1a1a;
}
.infolio-work-metro .item .cont .category {
color: #777777;
}
.infolio-work-metro .item .plink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.infolio-div-tooltip-sub {
display: none;
position: absolute;
background-color: #fff;
padding: 10px 14px;
color: #1a1a1a;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 99999;
}
.infolio-div-tooltip-tit {
display: none;
position: absolute;
background-color: #1a1a1a;
padding: 0 15px;
height: 50px;
line-height: 50px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 99999;
}
@media screen and (max-width: 992px) {
.infolio-work-metro .row.xxlg-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.infolio-work-metro .row.xxlg-marg > * {
padding-left: 15px !important;
padding-right: 15px !important;
}
.infolio-work-metro .item {
margin-top: 80px;
}
}
body.tcg-dark-mode .infolio-work-metro .item .cont .title {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-work-metro .item .cont .category {
color: #c6c8c9;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-work-metro .item .cont .title {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-work-metro .item .cont .category {
color: #c6c8c9;
}
} .infolio-portfolio-sticky .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-portfolio-sticky a, .infolio-portfolio-sticky span {
display: inline-block;
}
.infolio-portfolio-sticky a, .infolio-portfolio-sticky a:hover {
color: inherit;
}
.infolio-portfolio-sticky .items {
margin-top: 80px;
}
.infolio-portfolio-sticky .items .cont {
padding: 0 40px;
background: rgba(0, 0, 0, 0.02);
border-radius: 10px;
height: 100%;
}
.infolio-portfolio-sticky .items .cont h6 {
color: #1a1a1a;
}
.infolio-portfolio-sticky .items .cont h5 {
color: #1a1a1a;
}
.infolio-portfolio-sticky .items .cont p {
color: #777777;
}
.infolio-portfolio-sticky .items .cont .tc-sticky-item {
padding: 40px 0;
}
.infolio-portfolio-sticky .items .cont .rmore {
margin-top: 30px;
color: #1a1a1a;
font-size: 16px;
}
.infolio-portfolio-sticky .items .cont .rmore .icon-img {
width: 20px;
margin-left: 5px;
}
.infolio-portfolio-sticky .items .img {
border-radius: 10px;
overflow: hidden;
}
body.tcg-dark-mode .infolio-portfolio-sticky .items .cont {
background: rgba(255, 255, 255, 0.02);
}
body.tcg-dark-mode .infolio-portfolio-sticky .items .cont h6 {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-portfolio-sticky .items .cont h5 {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-portfolio-sticky .items .cont p {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-portfolio-sticky .items .cont .rmore {
color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-portfolio-sticky .items .cont {
background: rgba(255, 255, 255, 0.02);
}
body.tcg-auto-mode .infolio-portfolio-sticky .items .cont h6 {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-portfolio-sticky .items .cont h5 {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-portfolio-sticky .items .cont p {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-portfolio-sticky .items .cont .rmore {
color: #FFFFFF;
}
} .infolio-portfolio-fixed .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}
.infolio-portfolio-fixed .row .rest {
margin: 0 !important;
padding: 0 !important;
}
.infolio-portfolio-fixed a, .infolio-portfolio-fixed span {
display: inline-block;
}
.infolio-portfolio-fixed .left {
position: relative;
height: 100vh;
overflow: hidden;
}
.infolio-portfolio-fixed .img {
background-size: cover;
background-position: center center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.4s linear;
opacity: 0;
}
.infolio-portfolio-fixed .img:first-of-type {
opacity: 1;
z-index: 1;
}
.infolio-portfolio-fixed .img:nth-of-type(2) {
z-index: 2;
}
.infolio-portfolio-fixed .img:nth-of-type(3) {
z-index: 3;
}
.infolio-portfolio-fixed .img:nth-of-type(4) {
z-index: 4;
}
.infolio-portfolio-fixed .img:nth-of-type(5) {
z-index: 5;
}
.infolio-portfolio-fixed .img:nth-of-type(6) {
z-index: 6;
}
.infolio-portfolio-fixed .img:nth-of-type(7) {
z-index: 7;
}
.infolio-portfolio-fixed .img:nth-of-type(8) {
z-index: 8;
}
.infolio-portfolio-fixed .img:nth-of-type(9) {
z-index: 9;
}
.infolio-portfolio-fixed .img:nth-of-type(10) {
z-index: 10;
}
.infolio-portfolio-fixed .img.current {
opacity: 1;
}
.infolio-portfolio-fixed .right {
padding: 250px 100px;
overflow: hidden;
}
.infolio-portfolio-fixed .cont {
margin-bottom: 300px;
opacity: 0.1;
transition: all 0.4s;
}
.infolio-portfolio-fixed .cont .category {
color: #14cf93;
}
.infolio-portfolio-fixed .cont h2 {
color: #1a1a1a;
}
.infolio-portfolio-fixed .cont p {
color: #777777;
}
.infolio-portfolio-fixed .cont:last-of-type {
margin-bottom: 0;
}
.infolio-portfolio-fixed .cont.active {
opacity: 1;
}
.infolio-portfolio-fixed .cont .img-hiden {
display: none;
}
.infolio-portfolio-fixed .cont .rmore {
position: relative;
z-index: 3;
color: #1a1a1a;
}
.infolio-portfolio-fixed .cont .rmore a, .infolio-portfolio-fixed .cont .rmore a:hover {
color: inherit;
}
.infolio-portfolio-fixed .cont .rmore svg {
fill: #1a1a1a;
}
.infolio-portfolio-fixed .cont .rmore:after {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.12);
border-right-color: transparent;
transition: all 0.4s;
z-index: -1;
}
.infolio-portfolio-fixed .cont .rmore:hover {
color: #1a1a1a;
}
.infolio-portfolio-fixed .cont .rmore:hover:after {
transform: translateY(-50%) rotate(360deg);
}
.infolio-portfolio-fixed .current.cont {
opacity: 1;
}
@media screen and (max-width: 992px) {
.infolio-portfolio-fixed .cont {
opacity: 1 !important;
margin-bottom: 80px;
padding: 0 15px;
}
.infolio-portfolio-fixed .left {
display: none;
}
.infolio-portfolio-fixed .cont .img-hiden {
display: block;
margin-bottom: 30px;
}
}
body.tcg-dark-mode .infolio-portfolio-fixed .cont h2 {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-portfolio-fixed .cont p {
color: #c6c8c9;
}
body.tcg-dark-mode .infolio-portfolio-fixed .cont .rmore {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-portfolio-fixed .cont .rmore svg {
fill: #FFFFFF;
}
body.tcg-dark-mode .infolio-portfolio-fixed .cont .rmore:after {
border-color: rgba(255, 255, 255, 0.12);
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-portfolio-fixed .cont h2 {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-portfolio-fixed .cont p {
color: #c6c8c9;
}
body.tcg-auto-mode .infolio-portfolio-fixed .cont .rmore {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-portfolio-fixed .cont .rmore svg {
fill: #FFFFFF;
}
body.tcg-auto-mode .infolio-portfolio-fixed .cont .rmore:after {
border-color: rgba(255, 255, 255, 0.12);
}
} .infolio-menu .default .navbar-nav {
position: relative;
}
.infolio-menu .default .navbar-nav a {
display: inline-block;
}
.infolio-menu .default .navbar-nav li {
list-style-type: none;
}
.infolio-menu .default .navbar-nav .dropdown-toggle:after {
margin-left: 5px;
vertical-align: 12px;
}
.infolio-menu .default .navbar-nav .icon-bar {
color: #fff;
}
.infolio-menu .default .navbar-nav .dropdown-menu {
padding: 20px 10px;
background: #fff;
border: 1px solid #ddd;
transition: all 0.4s;
border-radius: 5px;
min-width: 255px;
}
.infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item {
font-size: 14px;
color: #1a1a1a;
transition: all 0.4s;
padding: 10px 25px;
position: relative;
}
.infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item a {
color: #1a1a1a;
}
.infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item:after {
content: "";
width: 0px;
height: 1px;
background: #1a1a1a;
position: absolute;
left: 10px;
top: 20px;
transition: all 0.4s;
}
.infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item:hover {
padding-left: 30px;
background: transparent;
}
.infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item:hover:after {
width: 10px;
}
.infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item .icon-arrow {
position: absolute;
right: 15px;
color: #1a1a1a;
fill: #1a1a1a;
}
.infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item .dropdown-side {
position: absolute;
left: 248px;
top: -15px;
display: block;
opacity: 0;
visibility: hidden;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
width: 240px;
padding: 20px 0;
transform: translateY(20px);
transition: all 0.4s;
}
.infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item .dropdown-side.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.infolio-menu .default .navbar-nav li {
list-style-type: none;
}
.infolio-menu .default .navbar-nav .nav-link {
color: #1a1a1a;
}
.infolio-menu .default .navbar-nav .nav-link a,
.infolio-menu .default .navbar-nav .nav-link a:hover {
color: inherit;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text {
height: 30px;
line-height: 30px;
display: inline-block;
overflow: hidden;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .block {
display: block;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter {
display: inline-block;
transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(1) {
transition-delay: 0s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(2) {
transition-delay: 0.015s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(3) {
transition-delay: 0.03s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(4) {
transition-delay: 0.045s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(5) {
transition-delay: 0.06s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(6) {
transition-delay: 0.075s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(7) {
transition-delay: 0.09s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(8) {
transition-delay: 0.105s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(9) {
transition-delay: 0.12s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(10) {
transition-delay: 0.135s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(11) {
transition-delay: 0.15s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(12) {
transition-delay: 0.165s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(13) {
transition-delay: 0.18s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(14) {
transition-delay: 0.195s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(15) {
transition-delay: 0.21s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(16) {
transition-delay: 0.225s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(17) {
transition-delay: 0.24s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(18) {
transition-delay: 0.255s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(19) {
transition-delay: 0.27s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(20) {
transition-delay: 0.285s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text .letter:nth-child(21) {
transition-delay: 0.3s;
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text:hover .letter {
transform: translateY(-100%);
}
.infolio-menu .default .navbar-nav .nav-link .rolling-text.play .letter {
transform: translateY(-100%);
}
.infolio-menu .default .navbar-nav .sub-menu .dropdown-toggle:after {
display: none;
}
.infolio-menu .default .navbar-toggler {
font-size: 20px;
border-radius: 0;
padding: 0;
}
.infolio-menu .default .navbar-toggler .icon-bar i {
color: #fff;
}
.infolio-menu .menu-list {
height: 100vh;
padding-top: 140px;
overflow: auto;
}
.infolio-menu .menu-list .navigation li.menu-item-has-children > a:after {
display: none;
}
.infolio-menu .menu-list::-webkit-scrollbar {
width: 5px;
}
.infolio-menu .menu-list::-webkit-scrollbar-track {
background: #eee;
}
.infolio-menu .menu-list::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 5px;
}
.infolio-menu .menu-list > div {
position: relative;
z-index: 2;
}
.infolio-menu .menu-list > div .navigation > .menu-item {
color: #1a1a1a;
transition: all 0.5s;
display: block;
overflow: hidden;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.infolio-menu .menu-list > div .navigation > .menu-item a,
.infolio-menu .menu-list > div .navigation > .menu-item a:hover {
color: inherit;
}
.infolio-menu .menu-list > div .navigation > .menu-item .o-hidden {
overflow: hidden;
}
.infolio-menu .menu-list > div .navigation > .menu-item .cursor-pointer {
cursor: pointer;
}
.infolio-menu .menu-list > div .navigation > .menu-item.sub-menu-open a:before {
display: none;
}
.infolio-menu .menu-list > div .navigation > .menu-item i {
position: absolute;
width: 90px;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.02);
}
.infolio-menu .menu-list > div .navigation > .menu-item.menu-item-has-children a:before {
content: "";
width: 1px;
height: 16px;
position: absolute;
top: 45px;
right: 45px;
background: #1a1a1a;
}
.infolio-menu .menu-list > div .navigation > .menu-item.menu-item-has-children a:after {
content: "";
width: 16px;
height: 1px;
position: absolute;
top: 53px;
right: 37px;
background: #1a1a1a;
}
.infolio-menu .menu-list > div .navigation > .menu-item a {
width: 100%;
display: block;
transition: all 0.7s;
color: #1a1a1a;
}
.infolio-menu .menu-list > div .navigation > .menu-item a .nm {
opacity: 0.8;
font-size: 13px;
margin-right: 10px;
}
.infolio-menu .menu-list > div .navigation > .menu-item a:hover {
opacity: 1;
}
.infolio-menu .menu-list > div .navigation > .menu-item a.dopen i:before {
opacity: 0;
}
.infolio-menu .menu-list > div .navigation > .menu-item.hoverd a:after {
width: 0;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu {
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: transparent;
display: none !important;
box-shadow: none;
width: 100%;
height: 0px;
padding: 20px 0;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu li {
padding: 0;
margin: 0;
line-height: 1;
font-size: 22px;
font-weight: 400;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu li a {
padding: 12px 10px;
opacity: 0.6;
transition: all 0.4s;
line-height: 1;
font-size: 22px;
font-weight: 400;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu li a:after {
display: none;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu li a:hover {
opacity: 1;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu li.menu-item-has-children > .cursor-pointer > a {
position: relative;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu li.menu-item-has-children > .cursor-pointer > a:before {
display: block;
content: "";
width: 1px;
height: 16px;
position: absolute;
top: 50%;
right: 45px;
background: #1a1a1a;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu li.menu-item-has-children > .cursor-pointer > a:after {
display: block;
content: "";
width: 16px;
height: 1px;
position: absolute;
top: calc(50% + 8px);
right: 37px;
background: #1a1a1a;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu li.menu-item-has-children.sub-menu-open > .cursor-pointer > a:before {
display: none;
}
.infolio-menu .menu-list > div .navigation > .menu-item .sub-menu.sub-open {
display: block !important;
opacity: 1 !important;
height: 100% !important;
overflow: inherit !important;
position: relative;
}
@media screen and (max-width: 992px) {
.infolio-menu .default .navbar-nav {
position: absolute;
padding: 0;
margin: 0;
width: 100vw;
background: #1d1d1d;
z-index: 999;
}
}
body.tcg-dark-mode .infolio-menu .default .navbar-nav .dropdown-menu {
border: 1px solid #393939;
background-color: #1d1d1d;
}
body.tcg-dark-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item {
color: #fff;
}
body.tcg-dark-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item a {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item .icon-arrow {
color: #FFFFFF;
fill: #FFFFFF;
}
body.tcg-dark-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item::after {
background: #fff;
}
body.tcg-dark-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item .dropdown-side {
border-color: #393939;
background: #1d1d1d;
}
body.tcg-dark-mode .infolio-menu .menu-list::-webkit-scrollbar {
width: 5px;
}
body.tcg-dark-mode .infolio-menu .menu-list::-webkit-scrollbar-track {
background: #111;
}
body.tcg-dark-mode .infolio-menu .menu-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
}
body.tcg-dark-mode .infolio-menu .menu-list .navigation > .menu-item {
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: #fff;
}
body.tcg-dark-mode .infolio-menu .menu-list .navigation > .menu-item a {
color: #fff;
}
body.tcg-dark-mode .infolio-menu .menu-list .navigation > .menu-item.menu-item-has-children a:before {
background: #fff;
}
body.tcg-dark-mode .infolio-menu .menu-list .navigation > .menu-item.menu-item-has-children a:after {
background: #fff;
}
body.tcg-dark-mode .infolio-menu .menu-list .navigation > .menu-item i {
background: rgba(255, 255, 255, 0.02);
}
body.tcg-dark-mode .infolio-menu .menu-list .navigation > .menu-item.sub-menu-open {
background: rgba(255, 255, 255, 0.02);
}
body.tcg-dark-mode .infolio-menu .menu-list .navigation > .menu-item .sub-menu li.menu-item-has-children > .cursor-pointer > a:before {
background: #fff;
}
body.tcg-dark-mode .infolio-menu .menu-list .navigation > .menu-item .sub-menu li.menu-item-has-children > .cursor-pointer > a:after {
background: #fff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-menu .default .navbar-nav .dropdown-menu {
border: 1px solid #393939;
background-color: #1d1d1d;
}
body.tcg-auto-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item {
color: #fff;
}
body.tcg-auto-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item a {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item .icon-arrow {
color: #FFFFFF;
fill: #FFFFFF;
}
body.tcg-auto-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item::after {
background: #fff;
}
body.tcg-auto-mode .infolio-menu .default .navbar-nav .dropdown-menu .dropdown-item .dropdown-side {
border-color: #393939;
background: #1d1d1d;
}
body.tcg-auto-mode .infolio-menu .menu-list::-webkit-scrollbar {
width: 5px;
}
body.tcg-auto-mode .infolio-menu .menu-list::-webkit-scrollbar-track {
background: #111;
}
body.tcg-auto-mode .infolio-menu .menu-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
}
body.tcg-auto-mode .infolio-menu .menu-list .navigation > .menu-item {
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: #fff;
}
body.tcg-auto-mode .infolio-menu .menu-list .navigation > .menu-item a {
color: #fff;
}
body.tcg-auto-mode .infolio-menu .menu-list .navigation > .menu-item.menu-item-has-children a:before {
background: #fff;
}
body.tcg-auto-mode .infolio-menu .menu-list .navigation > .menu-item.menu-item-has-children a:after {
background: #fff;
}
body.tcg-auto-mode .infolio-menu .menu-list .navigation > .menu-item i {
background: rgba(255, 255, 255, 0.02);
}
body.tcg-auto-mode .infolio-menu .menu-list .navigation > .menu-item.sub-menu-open {
background: rgba(255, 255, 255, 0.02);
}
body.tcg-auto-mode .infolio-menu .menu-list .navigation > .menu-item .sub-menu li.menu-item-has-children > .cursor-pointer > a:before {
background: #fff;
}
body.tcg-auto-mode .infolio-menu .menu-list .navigation > .menu-item .sub-menu li.menu-item-has-children > .cursor-pointer > a:after {
background: #fff;
}
} .infolio-panel-slider {
width: 300vw;
min-height: 100vh;
display: flex;
flex-wrap: nowrap;
padding-left: 100px;
}
.infolio-panel-slider .text .text-bg {
position: absolute;
top: 80px;
left: 150px;
margin-bottom: 0.2rem;
margin-top: 0;
}
.infolio-panel-slider .panel {
display: flex;
height: 100%;
flex: 1;
justify-content: flex-end;
align-items: center;
margin-top: 30px;
}
.infolio-panel-slider .panel a {
display: inline-block;
text-decoration: none;
}
.infolio-panel-slider .panel .item {
position: relative;
width: calc(50vw - 80px);
}
.infolio-panel-slider .panel .item .img {
height: 480px;
min-height: 50vh;
}
.infolio-panel-slider .panel .item .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.infolio-panel-slider .panel .item .plink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 992px) {
.infolio-panel-slider {
width: 100%;
min-height: auto;
height: auto;
display: block;
padding: 70px 0 120px;
}
.infolio-panel-slider .panel {
display: block;
padding: 0 15px !important;
}
.infolio-panel-slider .panel .item {
width: 100%;
margin-top: 50px;
}
} .infolio-next-project {
position: relative;
}
.infolio-next-project .margin {
width: max-content;
}
.infolio-next-project .box {
padding: 200px 80px;
position: relative;
}
.infolio-next-project .box:after {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: #f5f7f9;
transition: all 0.4s;
}
.infolio-next-project .box .cont {
position: relative;
z-index: 3;
}
.infolio-next-project .box .cont svg {
fill: #1a1a1a;
}
.infolio-next-project .box .cont .title, .infolio-next-project .box .cont .sub-title {
color: #1a1a1a;
max-width: 100%;
}
.infolio-next-project .box:hover .cont svg {
fill: #fff;
}
.infolio-next-project .box:hover .cont .title, .infolio-next-project .box:hover .cont .sub-title {
color: #fff;
max-width: 100%;
}
.infolio-next-project .box:hover:after {
background: #1d1d1d;
opacity: 0.3;
}
@media screen and (max-width: 992px) {
.infolio-next-project .box .cont {
width: 236px;
}
}
@media screen and (max-width: 720px) {
.infolio-next-project .box .cont {
width: 186px;
}
}
body.tcg-dark-mode .infolio-next-project .box:after {
background: #1d1d1d;
}
body.tcg-dark-mode .infolio-next-project .box .cont svg {
fill: #fff;
}
body.tcg-dark-mode .infolio-next-project .box .cont .title, body.tcg-dark-mode .infolio-next-project .box .cont .sub-title {
color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-next-project .box:after {
background: #1d1d1d;
}
body.tcg-auto-mode .infolio-next-project .box .cont svg {
fill: #fff;
}
body.tcg-auto-mode .infolio-next-project .box .cont .title, body.tcg-auto-mode .infolio-next-project .box .cont .sub-title {
color: #fff;
}
} .infolio-showcase-carousel {
position: relative;
display: flex;
align-items: center;
min-height: 100vh;
}
.infolio-showcase-carousel a, .infolio-showcase-carousel span {
display: inline-block;
}
.infolio-showcase-carousel .swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.infolio-showcase-carousel .gallery-img [data-overlay-light]:before {
background: #fff;
}
.infolio-showcase-carousel .gallery-img [data-overlay-dark]:before {
background: #1d1d1d;
}
.infolio-showcase-carousel .gallery-img .bg-img {
height: 60vh;
border-radius: 15px;
overflow: hidden;
position: relative;
}
.infolio-showcase-carousel .gallery-img .bg-img a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.infolio-showcase-carousel .gallery-text {
position: absolute;
width: auto;
top: 70%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
margin: auto;
z-index: 9;
}
.infolio-showcase-carousel .gallery-text .swiper-container,
.infolio-showcase-carousel .gallery-text .swiper-slide {
height: 100px !important;
}
.infolio-showcase-carousel .gallery-text .swiper-slide {
display: flex;
align-items: center;
}
.infolio-showcase-carousel .gallery-text .text {
width: 100%;
text-align: center;
}
.infolio-showcase-carousel .gallery-text .text .title {
font-size: 50px;
font-weight: 500;
line-height: 1;
}
.infolio-showcase-carousel .gallery-text .text h6 {
margin-top: 15px;
overflow: hidden;
font-size: 16px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
}
.infolio-showcase-carousel .gallery-text .text h6 span {
transform: translateY(50px);
transition: all 0.8s;
}
.infolio-showcase-carousel .gallery-text .swiper-slide-active .text h6 span {
transform: translateY(0);
transition-delay: 0.5s;
}
.infolio-showcase-carousel .swiper-controls {
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
z-index: 9;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-prev,
.infolio-showcase-carousel .swiper-controls .swiper-button-next {
position: absolute;
display: flex;
align-items: center;
top: auto;
color: #1a1a1a;
z-index: 9;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-prev:after,
.infolio-showcase-carousel .swiper-controls .swiper-button-next:after {
display: none;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-prev span,
.infolio-showcase-carousel .swiper-controls .swiper-button-next span {
white-space: nowrap;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-prev {
left: 120px;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-prev i, .infolio-showcase-carousel .swiper-controls .swiper-button-prev svg {
margin-right: 25px;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-prev i {
color: #1a1a1a;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-prev svg {
fill: #1a1a1a;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-next {
right: 120px;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-next i, .infolio-showcase-carousel .swiper-controls .swiper-button-next svg {
margin-left: 25px;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-next i {
color: #1a1a1a;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-next svg {
fill: #1a1a1a;
}
.infolio-showcase-carousel .swiper-pagination {
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: auto;
}
.infolio-showcase-carousel .swiper-pagination-bullet {
background: transparent;
margin: 0 10px !important;
}
.infolio-showcase-carousel .swiper-pagination-bullet-active .path {
display: inline-block !important;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash linear 10s;
animation-iteration-count: unset;
}
.infolio-showcase-carousel .path {
display: none;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.infolio-showcase-half {
min-height: 100vh;
position: relative;
}
.infolio-showcase-half .gallery-img {
width: 75vw;
margin-left: 25vw;
}
.infolio-showcase-half .gallery-img .swiper-slide {
height: 100vh;
position: relative;
overflow: hidden;
}
.infolio-showcase-half .gallery-img .swiper-slide-active .bg-img {
transform: scale(1);
}
.infolio-showcase-half .gallery-img .bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1.2);
transition: all 0.6s linear;
}
.infolio-showcase-half .gallery-img .bg-img a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.infolio-showcase-half .gallery-text {
position: absolute;
width: auto;
top: 50%;
left: -15vw;
transform: translateY(-50%);
z-index: 9;
}
.infolio-showcase-half .gallery-text .text {
cursor: pointer;
}
.infolio-showcase-half .gallery-text .text h4 {
font-size: 70px;
font-weight: 600;
color: transparent;
-webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.5);
transition: all 0.6s;
}
.infolio-showcase-half .gallery-text .text h6 {
margin-bottom: 15px;
overflow: hidden;
font-size: 16px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
}
.infolio-showcase-half .gallery-text .text h6 span {
display: inline-block;
color: #fff;
transform: translateY(50px);
transition: all 0.8s;
}
.infolio-showcase-half .gallery-text .swiper-slide-active .text h4 {
color: #fff;
-webkit-text-stroke: 0.5px rgba(255, 255, 255, 0);
}
.infolio-showcase-half .gallery-text .swiper-slide-active .text h6 span {
transform: translateY(0);
transition-delay: 0.5s;
}
.infolio-showcase-half .swiper-controls {
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
z-index: 9;
}
.infolio-showcase-half .swiper-controls .swiper-button-prev,
.infolio-showcase-half .swiper-controls .swiper-button-next {
position: absolute;
display: flex;
align-items: center;
top: auto;
color: #fff;
z-index: 9;
}
.infolio-showcase-half .swiper-controls .swiper-button-prev:after,
.infolio-showcase-half .swiper-controls .swiper-button-next:after {
display: none;
}
.infolio-showcase-half .swiper-controls .swiper-button-prev span,
.infolio-showcase-half .swiper-controls .swiper-button-next span {
white-space: nowrap;
}
.infolio-showcase-half .swiper-controls .swiper-button-prev {
left: 120px;
}
.infolio-showcase-half .swiper-controls .swiper-button-prev i {
margin-right: 25px;
}
.infolio-showcase-half .swiper-controls .swiper-button-next {
right: 120px;
}
.infolio-showcase-half .swiper-controls .swiper-button-next i {
margin-left: 25px;
}
.infolio-showcase-half .swiper-pagination {
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: auto;
}
.infolio-showcase-half .swiper-pagination-bullet {
background: transparent;
margin: 0 10px !important;
}
.infolio-showcase-half .swiper-pagination-bullet-active .path {
display: inline-block !important;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash linear 10s;
animation-iteration-count: unset;
}
.infolio-showcase-half .path {
display: none;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@media screen and (max-width: 768px) {
.infolio-showcase-carousel .swiper-controls .swiper-button-next, .infolio-showcase-half .swiper-controls .swiper-button-next {
right: 50px;
}
.infolio-showcase-carousel .swiper-controls .swiper-button-prev, .infolio-showcase-half .swiper-controls .swiper-button-prev {
left: 50px;
}
.infolio-showcase-carousel .swiper-pagination, .infolio-showcase-half .swiper-pagination {
display: none;
}
.infolio-showcase-half .gallery-img {
width: 100%;
margin-left: 0;
}
.infolio-showcase-half .gallery-text {
width: 100%;
left: 0;
}
.infolio-showcase-half .gallery-text .text {
padding-left: 15px;
}
}
body.tcg-dark-mode .infolio-showcase-carousel .swiper-controls .swiper-button-prev,
body.tcg-dark-mode .infolio-showcase-carousel .swiper-controls .swiper-button-next {
color: #fff;
}
body.tcg-dark-mode .infolio-showcase-carousel .swiper-controls .swiper-button-prev i {
color: #fff;
}
body.tcg-dark-mode .infolio-showcase-carousel .swiper-controls .swiper-button-prev svg {
fill: #fff;
}
body.tcg-dark-mode .infolio-showcase-carousel .swiper-controls .swiper-button-next i {
color: #fff;
}
body.tcg-dark-mode .infolio-showcase-carousel .swiper-controls .swiper-button-next svg {
fill: #fff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-showcase-carousel .swiper-controls .swiper-button-prev,
body.tcg-auto-mode .infolio-showcase-carousel .swiper-controls .swiper-button-next {
color: #fff;
}
body.tcg-auto-mode .infolio-showcase-carousel .swiper-controls .swiper-button-prev i {
color: #fff;
}
body.tcg-auto-mode .infolio-showcase-carousel .swiper-controls .swiper-button-prev svg {
fill: #fff;
}
body.tcg-auto-mode .infolio-showcase-carousel .swiper-controls .swiper-button-next i {
color: #fff;
}
body.tcg-auto-mode .infolio-showcase-carousel .swiper-controls .swiper-button-next svg {
fill: #fff;
}
} .infolio-parallax-slider {
position: relative;
}
.infolio-parallax-slider a, .infolio-parallax-slider a:hover {
color: inherit;
}
.infolio-parallax-slider a, .infolio-parallax-slider span {
display: inline-block;
}
.infolio-parallax-slider .swiper-slide {
position: relative;
overflow: hidden;
width: 100%;
min-height: 100vh;
padding: 80px 0;
}
.infolio-parallax-slider .swiper-slide .bg-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
}
.infolio-parallax-slider .swiper-slide .video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.infolio-parallax-slider .swiper-slide .video-container video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.infolio-parallax-slider .swiper-slide-active {
transform: rotate(0);
z-index: 99;
}
.infolio-parallax-slider .swiper-slide-active .caption h1 {
font-size: 100px;
}
.infolio-parallax-slider .swiper-slide-active .caption .thin,
.infolio-parallax-slider .swiper-slide-active .caption .btn-curve,
.infolio-parallax-slider .swiper-slide-active .caption p {
opacity: 1;
transform: translateY(0);
}
.infolio-parallax-slider .caption .cal-act {
position: relative;
}
.infolio-parallax-slider .caption p {
color: #eee;
margin-top: 15px;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s;
transition-delay: 1s;
}
.infolio-parallax-slider .swiper-controls {
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
z-index: 9;
}
.infolio-parallax-slider .swiper-controls .swiper-button-prev,
.infolio-parallax-slider .swiper-controls .swiper-button-next {
position: absolute;
display: flex;
align-items: center;
top: auto;
color: #fff;
z-index: 9;
}
.infolio-parallax-slider .swiper-controls .swiper-button-prev:after,
.infolio-parallax-slider .swiper-controls .swiper-button-next:after {
display: none;
}
.infolio-parallax-slider .swiper-controls .swiper-button-prev span,
.infolio-parallax-slider .swiper-controls .swiper-button-next span {
white-space: nowrap;
}
.infolio-parallax-slider .swiper-controls .swiper-button-prev {
left: 120px;
}
.infolio-parallax-slider .swiper-controls .swiper-button-prev i {
margin-right: 25px;
}
.infolio-parallax-slider .swiper-controls .swiper-button-next {
right: 120px;
}
.infolio-parallax-slider .swiper-controls .swiper-button-next i {
margin-left: 25px;
}
.infolio-parallax-slider .swiper-pagination {
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: auto;
}
.infolio-parallax-slider .swiper-pagination-bullet {
background: transparent;
margin: 0 10px !important;
}
.infolio-parallax-slider .swiper-pagination-bullet-active .path {
display: inline-block !important;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash linear 10s;
animation-iteration-count: unset;
}
.infolio-parallax-slider .path {
display: none;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@media screen and (max-width: 768px) {
.infolio-parallax-slider .swiper-controls .swiper-button-next {
right: 50px;
}
.infolio-parallax-slider .swiper-controls .swiper-button-prev {
left: 50px;
}
.infolio-parallax-slider .swiper-pagination {
display: none;
}
} .infolio-interactive-center {
text-align: center;
}
.infolio-interactive-center a {
display: inline-block;
}
.infolio-interactive-center a,
.infolio-interactive-center a:hover {
color: inherit;
}
.infolio-interactive-center .item .hover-reveal {
position: fixed;
pointer-events: none;
z-index: 0;
top: 15vh !important;
left: 20vw !important;
width: 60vw;
height: 70vh;
min-width: 600px;
min-height: 450px;
}
.infolio-interactive-center .item a {
padding: 50px 0;
}
.infolio-interactive-center .item a:hover h4 {
color: #fff;
-webkit-text-stroke-color: transparent;
}
.infolio-interactive-center .item a:hover p {
color: #ddd;
}
.infolio-interactive-center .item a:hover .hover-reveal {
top: 15vh !important;
left: 20vw !important;
width: 60vw;
height: 70vh;
min-width: 600px;
min-height: 450px;
}
.infolio-interactive-center .item a:hover .hover-reveal .hover-reveal__inner,
.infolio-interactive-center .item a:hover .hover-reveal .hover-reveal__img {
width: 100%;
height: 100%;
position: relative;
}
.infolio-interactive-center .item a:hover .hover-reveal .hover-reveal__img {
background-size: cover;
background-position: 50% 50%;
background-position-x: 50%;
background-position-y: 50%;
}
.infolio-interactive-center .item .cont {
position: relative;
z-index: 3;
}
.infolio-interactive-center .item h4 {
font-size: 70px;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #1a1a1a;
transition: all 0.4s;
}
.infolio-interactive-center .item p {
color: #777777;
font-weight: 400;
margin-top: 15px;
}
@media screen and (max-width: 768px) {
.infolio-interactive-center .item .hover-reveal {
width: 90vw;
height: 90vh;
left: 5vw !important;
top: 5vh !important;
}
.infolio-interactive-center .item a {
padding: 20px 0;
}
}
body.tcg-dark-mode .infolio-interactive-center .item a:hover h4 {
color: #fff;
-webkit-text-stroke-color: transparent;
}
body.tcg-dark-mode .infolio-interactive-center .item h4 {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
body.tcg-dark-mode .infolio-interactive-center .item p {
color: #c6c8c9;
font-weight: 400;
margin-top: 15px;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-interactive-center .item a:hover h4 {
color: #fff;
-webkit-text-stroke-color: transparent;
}
body.tcg-auto-mode .infolio-interactive-center .item h4 {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
body.tcg-auto-mode .infolio-interactive-center .item p {
color: #c6c8c9;
font-weight: 400;
margin-top: 15px;
}
} .infolio-inter-links-center {
position: relative;
overflow: auto;
}
.infolio-inter-links-center.horizontal .links-text ul {
margin-left: -40px !important;
margin-right: -40px !important;
}
.infolio-inter-links-center.horizontal .links-text li {
display: inline-block;
padding: 40px;
}
.infolio-inter-links-center.horizontal .links-text li .sub-title {
margin-bottom: 10px;
}
.infolio-inter-links-center.horizontal .links-text li h2 {
font-weight: 700;
font-size: 30px;
}
.infolio-inter-links-center.horizontal .links-text li h2 a .tag {
display: block;
font-weight: 400;
}
.infolio-inter-links-center.horizontal .links-text li h2 .num {
font-size: 14px;
font-weight: 600;
opacity: 0.7;
margin-right: 15px;
}
.infolio-inter-links-center.vertical {
display: flex;
align-items: end;
}
.infolio-inter-links-center.vertical .links-text {
transform: rotate(180deg);
writing-mode: vertical-rl;
position: relative;
z-index: 66;
}
.infolio-inter-links-center.vertical .links-text li {
padding: 0 20px;
}
.infolio-inter-links-center .links-text a {
display: inline-block;
}
.infolio-inter-links-center .links-text a,
.infolio-inter-links-center .links-text a:hover {
color: inherit;
}
.infolio-inter-links-center .links-text li {
list-style-type: none;
padding: 40px 0;
position: relative;
z-index: 9;
}
.infolio-inter-links-center .links-text li:hover .num {
color: #ddd;
}
.infolio-inter-links-center .links-text li:hover .text {
color: #fff;
-webkit-text-stroke-color: transparent;
}
.infolio-inter-links-center .links-text li .text {
transition: all 0.4s;
color: transparent;
-webkit-text-stroke: 1px #1a1a1a;
}
.infolio-inter-links-center .links-text li h2 {
font-weight: 700;
}
.infolio-inter-links-center .links-text li h2 a .tag {
font-weight: 400;
opacity: 0.5;
}
.infolio-inter-links-center .links-text li h2 .num {
color: #1a1a1a;
display: block;
font-size: 14px;
font-weight: 600;
opacity: 0.7;
margin-right: 15px;
}
.infolio-inter-links-center .links-img {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
overflow: hidden;
}
.infolio-inter-links-center .links-img [data-overlay-dark]:before {
background-color: #1d1d1d;
}
.infolio-inter-links-center .links-img .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: scale(1.04, 1.04);
transition: all 0.5s;
}
.infolio-inter-links-center .links-img .img.current {
transform: scale(1);
opacity: 1;
}
.infolio-inter-links-center .links-img .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.infolio-inter-links-center .container-xxl {
max-width: 1500px;
}
@media screen and (max-width: 768px) {
.infolio-inter-links-center .links-text li,
.infolio-inter-links-center.vertical .links-text li {
padding: 20px 0;
}
}
@media screen and (max-width: 992px) {
.infolio-inter-links-center.vertical .links-text {
transform: none;
writing-mode: horizontal-tb;
}
}
body.tcg-dark-mode .infolio-inter-links-center .links-text li:hover .text {
color: #fff;
-webkit-text-stroke-color: transparent;
}
body.tcg-dark-mode .infolio-inter-links-center .links-text li .text {
transition: all 0.4s;
color: transparent;
-webkit-text-stroke: 1px #fff;
}
body.tcg-dark-mode .infolio-inter-links-center .links-text li h2 {
font-weight: 700;
}
body.tcg-dark-mode .infolio-inter-links-center .links-text li h2 a .tag {
font-weight: 400;
opacity: 0.5;
}
body.tcg-dark-mode .infolio-inter-links-center .links-text li h2 .num {
color: #fff;
display: block;
font-size: 14px;
font-weight: 600;
opacity: 0.7;
margin-right: 15px;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-inter-links-center .links-text li:hover .text {
color: #fff;
-webkit-text-stroke-color: transparent;
}
body.tcg-auto-mode .infolio-inter-links-center .links-text li .text {
transition: all 0.4s;
color: transparent;
-webkit-text-stroke: 1px #fff;
}
body.tcg-auto-mode .infolio-inter-links-center .links-text li h2 {
font-weight: 700;
}
body.tcg-auto-mode .infolio-inter-links-center .links-text li h2 a .tag {
font-weight: 400;
opacity: 0.5;
}
body.tcg-auto-mode .infolio-inter-links-center .links-text li h2 .num {
color: #fff;
display: block;
font-size: 14px;
font-weight: 600;
opacity: 0.7;
margin-right: 15px;
}
}  li.megamenu {
position: static !important;
}
li.megamenu:hover .infolio-mega-nav-item, .infolio-mega-nav-item:hover {
opacity: 1;
visibility: visible;
transform: translate(3%, 0);
pointer-events: auto; }
.infolio-mega-nav-item {
width: 96vw;
display: flex;
justify-content: center;
align-items: center;
right: 50%;
left: 50%;
margin-inline-start: -49vw;
border-radius: 5px;
position: absolute;
z-index: 11;
list-style: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
transition-property: transform, opacity, visibility;
border: 1px solid #dddddd;
overflow: hidden;
}
.infolio-mega-menu-wrap {
width: 100%;
max-width: none;
padding: 0;
background-color: #fff;
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.07);
margin-right: auto;
margin-left: auto;
}
body.tcg-dark-mode .infolio-mega-nav-item {
border-color: #393939;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-mega-nav-item {
border-color: #393939;
}
} .infolio-team-tabs a, .infolio-team-tabs span {
display: inline-block;
}
.infolio-team-tabs a, .infolio-team-tabs a:hover {
color: inherit;
}
.infolio-team-tabs .rest {
margin: 0 !important;
padding: 0 !important;
}
.infolio-team-tabs .cluom {
display: flex;
align-items: center;
padding: 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.infolio-team-tabs .cluom .info .name {
color: #1a1a1a;
}
.infolio-team-tabs .cluom .info .position {
color: #1a1a1a;
}
.infolio-team-tabs .cluom:last-of-type {
border-bottom: 0;
}
.infolio-team-tabs .cluom.current {
border-left-color: transparent;
}
.infolio-team-tabs .cluom .more {
margin-left: auto;
color: #1a1a1a;
}
.infolio-team-tabs .cluom .more svg {
fill: #1a1a1a;
}
.infolio-team-tabs .glry-img {
width: 100%;
height: 100%;
position: relative;
}
.infolio-team-tabs .glry-img .bg-img {
position: absolute;
top: 80px;
left: 80px;
right: 80px;
bottom: 80px;
transform: scale(0.9);
opacity: 0;
transition: all 0.7s;
background-size: cover;
background-position: center center;
}
.infolio-team-tabs .glry-img .bg-img.current {
transform: scale(1);
opacity: 1;
}
body.tcg-dark-mode .infolio-team-tabs .cluom {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
body.tcg-dark-mode .infolio-team-tabs .cluom .info .name {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-team-tabs .cluom .info .position {
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-team-tabs .cluom .more {
margin-left: auto;
color: #FFFFFF;
}
body.tcg-dark-mode .infolio-team-tabs .cluom .more svg {
fill: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-team-tabs .cluom {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
body.tcg-auto-mode .infolio-team-tabs .cluom .info .name {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-team-tabs .cluom .info .position {
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-team-tabs .cluom .more {
margin-left: auto;
color: #FFFFFF;
}
body.tcg-auto-mode .infolio-team-tabs .cluom .more svg {
fill: #FFFFFF;
}
} .infolio-demos .row.md-marg {
margin-left: -25px !important;
margin-right: -25px !important;
}
.infolio-demos .row.md-marg > * {
padding-left: 25px !important;
padding-right: 25px !important;
}
.infolio-demos .sec-head {
margin-bottom: 80px;
}
.infolio-demos .sec-head .sub-title {
margin-bottom: 25px !important;
color: #14cf93;
}
.infolio-demos .sec-head .bord {
position: relative;
padding-right: 30px;
display: flex;
align-items: center;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.infolio-demos .sec-head .bord:after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 40px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.infolio-demos .sec-head .buttons {
margin-left: auto;
}
.infolio-demos .item {
margin-top: 50px;
position: relative;
}
.infolio-demos .item .img {
border-radius: 5px;
overflow: hidden;
}
.infolio-demos .item h6 {
font-size: 18px;
}
.infolio-demos .item .new {
position: absolute;
top: 15px;
right: 0px;
font-size: 13px;
font-weight: 600;
padding: 3px 10px;
background: #ff2300;
}
.infolio-demos .filter span {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 30px;
margin: 0;
margin-right: 15px;
position: relative;
cursor: pointer;
opacity: 0.7;
}
.infolio-demos .filter span.active {
opacity: 1;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.infolio-demos .filter span:after {
display: none;
}
@media screen and (max-width: 992px) {
.infolio-demos .sec-head .main-title {
margin-bottom: 15px;
}
.infolio-demos .row.md-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.infolio-demos .row.md-marg > * {
padding-left: -15px !important;
padding-right: -15px !important;
}
}
@media screen and (max-width: 768px) {
.infolio-demos .sec-head .bord .buttons {
margin-top: 15px !important;
}
.infolio-demos .sec-head .bord {
display: block;
}
} .infolio-icon-list li {
position: relative;
list-style-type: none;
}
.infolio-icon-list a, .infolio-icon-list a:hover {
color: inherit;
}
.infolio-icon-list ul .line-hover-anim {
transition: all 0.4s;
}
.infolio-icon-list ul .line-hover-anim:after {
content: "";
width: 0;
height: 1px;
background: #1a1a1a;
position: absolute;
left: 0;
top: 10px;
transition: all 0.4s;
}
.infolio-icon-list ul .line-hover-anim:hover {
transition: all 0.4s;
padding-left: 20px;
}
.infolio-icon-list ul .line-hover-anim:hover:after {
width: 10px;
}
.infolio-icon-list ul .elementor-icon-list-item .icon-background {
display: flex;
align-items: center;
justify-content: center;
}
body.tcg-dark-mode .infolio-icon-list ul .line-hover-anim:after {
background: #ffffff;
}
@media (prefers-color-scheme: dark) {
body.tcg-auto-mode .infolio-icon-list ul .line-hover-anim:after {
background: #ffffff;
}
}