.webfolio-button {
position: relative;
display: inline-block;
padding: 12px 30px;
background-color: #212529;
color: #fff;
}
.webfolio-button.button-animation::after {
content: "";
position: absolute;
right: 5px;
top: -8px;
width: 40px;
height: 40px;
border-radius: 40px;
background: rgba(255, 255, 255, 0.05);
transition: all 0.4s;
}
.webfolio-button.button-animation:hover::after {
width: 100%;
right: 0;
}
.webfolio-button.underline::after {
position: absolute;
content: "";
height: 1.7px;
bottom: 1.6px;
left: 0;
background: #fd5b38;
width: 100%;
}
.webfolio-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;
}
.webfolio-button.animated-gradient-bg:hover::before {
left: -50%;
}
.webfolio-button .webfolio-button-text {
position: relative;
z-index: 2;
}
.webfolio-button .webfolio-button-icon {
display: inline-block;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.webfolio-button:hover .hover-animation-right-to-left {
animation: RL_smooth 1s ease-in-out infinite alternate both;
}
.webfolio-button.animated-icon .webfolio-button-content-wrapper .webfolio-button-icon {
position: relative;
transition: all 0.3s ease;
}
.webfolio-button.animated-icon .webfolio-button-content-wrapper .webfolio-button-icon:first-of-type {
opacity: 0;
transform: translateX(-10px);
}
.webfolio-button.animated-icon .webfolio-button-content-wrapper .webfolio-button-icon:last-of-type {
opacity: 1;
transform: translateX(0);
}
.webfolio-button.animated-icon:hover .webfolio-button-content-wrapper {
padding-left: 10px;
}
.webfolio-button.animated-icon:hover .webfolio-button-content-wrapper .webfolio-button-icon:first-of-type {
opacity: 1;
transform: translateX(0);
}
.webfolio-button.animated-icon:hover .webfolio-button-content-wrapper .webfolio-button-icon:last-of-type {
opacity: 0;
transform: translateX(10px);
} .webfolio-search-field {
position: relative;
}
.webfolio-search-field input {
color: #FFFFFF;
padding: 15px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 5px;
width: 100%;
background: transparent;
}
.webfolio-search-field input:focus {
border-color: #FFFFFF;
box-shadow: none;
}
.webfolio-search-field .searchsubmit {
background-color: transparent;
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
margin: 0;
padding: 0;
border: 0;
} .webfolio-social-media {
margin: 0;
padding: 0;
}
.webfolio-social-media li {
list-style-type: none;
}
.webfolio-social-media a {
display: inline-block;
}
.webfolio-social-media span {
display: inline-block;
}
.webfolio-social-media a, .webfolio-social-media a:hover {
color: inherit;
}
.webfolio-social-media .cursor-pointer {
cursor: pointer;
}
@media screen and (max-width: 992px) {
.webfolio-social-media .icon_responsive svg, .webfolio-social-media .icon_responsive i {
display: none;
}
} .webfolio-max-content {
width: max-content;
}
.webfolio-drop-filter-5 {
backdrop-filter: blur(5px);
}
.webfolio-filter-2 {
filter: blur(2px);
}
.webfolio-blur-10 {
backdrop-filter: blur(10px);
}
.webfolio-bord-top-grd {
position: relative;
}
.webfolio-bord-top-grd::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right, transparent, #fff, transparent);
height: 1px;
width: 100%;
opacity: 0.3;
}
.webfolio-bord-bottom-grd {
position: relative;
}
.webfolio-bord-bottom-grd::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to right, transparent, #fff, transparent);
height: 1px;
width: 100%;
opacity: 0.3;
}
.webfolio-overlay-center:after {
content: "";
position: absolute;
top: -5px;
bottom: -5px;
left: 0;
width: 100%;
background: linear-gradient(to top, #0f0f0f, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 20%, #0f0f0f);
}
.webfolio-footer-after-effect::after {
content: "";
background: linear-gradient(to top, rgba(255, 255, 255, 0.01), transparent);
backdrop-filter: blur(100px);
position: absolute;
top: 0;
left: 40px;
bottom: 40px;
right: 40px;
}
.hover-this .hover-anim {
pointer-events: auto;
transition: transform 0.2s linear;
}
.webfolio-menu-logo {
position: relative;
}
.webfolio-menu-logo::after {
content: "";
position: absolute;
top: -30px;
bottom: -23px;
right: -30px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.webfolio-contact-button::after {
content: "";
position: absolute;
top: -30px;
bottom: -17px;
left: -30px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.webfolio-bord {
top: 10px;
left: 10px;
bottom: 10px;
opacity: 0.1;
width: 99%;
}
@media screen and (max-width: 992px) {
.webfolio-footer-after-effect::after {
display: none;
}
.webfolio-menu-logo::after {
display: none;
}
.webfolio-responsive-static {
position: static;
}
.webfolio-full-img {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.webfolio-bord {
width: 97%;
}
}
@media screen and (max-width: 767px) {
.webfolio-bord {
width: 94%;
}
} .webfolio-heading-text.d-rotate {
perspective: 1000px;
}
.webfolio-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;
}
.webfolio-heading-text.d-rotate.animated .rotate-text {
transform: translate3d(0px, 0px, 0px) rotateX(0deg) scale(1);
opacity: 1;
}
.webfolio-heading-text.heading-clip-text .webfolio-heading {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.webfolio-heading-text.dot .webfolio-heading::after {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #fd5b38;
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}
.webfolio-heading-text .webfolio-heading {
margin: 0;
position: relative;
}
.webfolio-heading-text .webfolio-heading > a, .webfolio-heading-text .webfolio-heading a:hover {
color: inherit;
}
.webfolio-heading-text .webfolio-heading .styled {
display: inline-block;
}
.webfolio-heading-text .webfolio-heading.bg-img {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
}
.webfolio-heading-text .webfolio-heading.webfolio-text-no-wrap {
white-space: nowrap;
}
.webfolio-heading-text .webfolio-heading.inline-block {
display: inline-block;
}
.webfolio-heading-text span {
display: inline-block;
}
@media screen and (max-width: 991px) {
.webfolio-heading-text .webfolio-heading.webfolio-text-breakline br {
display: none;
}
.webfolio-heading-text.block-icon a {
display: block !important;
}
} .webfolio-text-editor p {
padding: 0;
margin: 0;
word-spacing: 0;
} .webfolio-modern-slider a, .webfolio-modern-slider span {
display: inline-block;
}
.webfolio-modern-slider [data-overlay-dark]:before {
background: #0f0f0f;
}
.webfolio-modern-slider .gallery-img .bg-img {
height: 100vh;
overflow: hidden;
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.webfolio-modern-slider .gallery-img .bg-img a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.webfolio-modern-slider .gallery-text {
position: absolute;
width: 40vw;
top: 50%;
left: 10%;
transform: translateY(-50%);
z-index: 9;
}
.webfolio-modern-slider .gallery-text .swiper-container,
.webfolio-modern-slider .gallery-text .swiper-slide {
height: 450px !important;
}
.webfolio-modern-slider .gallery-text .swiper-slide {
display: flex;
align-items: center;
}
.webfolio-modern-slider .gallery-text .info {
width: 100%;
}
.webfolio-modern-slider .gallery-text .info h4 {
font-size: 50px;
font-weight: 500;
line-height: 1;
}
.webfolio-modern-slider .gallery-text .info .number {
margin: 0;
color: #fd5b38;
margin-bottom: 15px;
}
.webfolio-modern-slider .gallery-text .info .title {
color: #fff;
margin: 0;
}
.webfolio-modern-slider .gallery-text .info .butn-crev {
margin-top: 30px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.webfolio-modern-slider .gallery-text .info .butn-crev .circle {
width: 55px;
height: 55px;
line-height: 55px;
text-align: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-right: 15px;
}
.webfolio-modern-slider .gallery-text .info .butn-crev .circle svg {
fill: #FFF;
width: 16px;
height: 16px;
}
.webfolio-modern-slider .gallery-text .info .butn-crev .text {
color: #fff;
width: 100%;
}
.webfolio-modern-slider .gallery-text .info h6 {
margin-top: 15px;
overflow: hidden;
font-size: 16px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
}
.webfolio-modern-slider .gallery-text .info h6 span {
transform: translateY(50px);
transition: all 0.8s;
}
.webfolio-modern-slider .gallery-text .swiper-slide-active .info h6 span {
transform: translateY(0);
transition-delay: 0.5s;
}
.webfolio-modern-slider .swiper-controls {
position: absolute;
bottom: 0;
right: calc(18% - 10px);
z-index: 9;
}
.webfolio-modern-slider .swiper-controls .swiper-button-prev,
.webfolio-modern-slider .swiper-controls .swiper-button-next {
position: static;
color: #fff;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #0f0f0f;
margin: 0;
z-index: 9;
}
.webfolio-modern-slider .swiper-controls .swiper-button-prev:after,
.webfolio-modern-slider .swiper-controls .swiper-button-next:after {
display: none;
}
.webfolio-modern-slider .swiper-controls .swiper-button-prev span,
.webfolio-modern-slider .swiper-controls .swiper-button-next span {
white-space: nowrap;
}
.webfolio-modern-slider .swiper-controls .swiper-button-prev svg,
.webfolio-modern-slider .swiper-controls .swiper-button-next svg {
fill: #FFFFFF;
width: 16px;
height: 16px;
}
.webfolio-modern-slider .swiper-controls .swiper-button-next {
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.webfolio-modern-slider .path {
display: none;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@media screen and (max-width: 992px) {
.webfolio-modern-slider .swiper-controls {
right: 15px;
}
}
@media screen and (max-width: 768px) {
.webfolio-modern-slider .gallery-text {
width: 100%;
}
} .webfolio-view-more .butn {
display: inline-block;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.webfolio-view-more .icon {
display: inline-block;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
transition: all 0.4s;
}
.webfolio-view-more:hover .icon {
background: #fd5b38;
} .webfolio-portfolio-swiper span {
display: inline-block;
}
.webfolio-portfolio-swiper.after .sec-head {
margin-bottom: 80px;
}
.webfolio-portfolio-swiper.after .sec-head .head {
margin-bottom: 30px;
}
.webfolio-portfolio-swiper.after .sec-head .head h2 {
margin: 0;
}
.webfolio-portfolio-swiper.after .sec-head .head h2 span {
background: -webkit-linear-gradient(#fff, #222);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.webfolio-portfolio-swiper.after .sec-head .head h2.d-rotate {
perspective: 1000px;
}
.webfolio-portfolio-swiper.after .sec-head .head h2.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;
}
.webfolio-portfolio-swiper.after .sec-head .head h2.d-rotate.animated .rotate-text {
transform: translate3d(0px, 0px, 0px) rotateX(0deg) scale(1);
opacity: 1;
}
.webfolio-portfolio-swiper.after .sec-head .head .swiper-controls {
margin-left: auto;
}
.webfolio-portfolio-swiper.after .sec-head .head .swiper-controls .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.webfolio-portfolio-swiper.after .sec-head .head .swiper-controls .swiper-arrow-control .swiper-button-next, .webfolio-portfolio-swiper.after .sec-head .head .swiper-controls .swiper-arrow-control .swiper-button-prev {
position: static;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
color: inherit;
}
.webfolio-portfolio-swiper.after .sec-head .head .swiper-controls .swiper-arrow-control .swiper-button-next:after, .webfolio-portfolio-swiper.after .sec-head .head .swiper-controls .swiper-arrow-control .swiper-button-prev:after {
display: none;
}
.webfolio-portfolio-swiper.after .sec-head .head .swiper-controls .swiper-arrow-control .swiper-button-next svg, .webfolio-portfolio-swiper.after .sec-head .head .swiper-controls .swiper-arrow-control .swiper-button-prev svg {
fill: #fff;
width: 16px;
height: 16px;
}
.webfolio-portfolio-swiper.after .sec-head .head .swiper-controls .swiper-arrow-control .swiper-button-next {
margin-left: 15px;
}
.webfolio-portfolio-swiper.after .sec-head .sub-title {
margin: 0;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fd5b38;
}
.webfolio-portfolio-swiper.after .sec-head .sub-title span {
white-space: nowrap;
font-weight: 600;
}
.webfolio-portfolio-swiper.after .sec-head .sub-title .thin {
margin-left: 30px;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.webfolio-portfolio-swiper.before .sec-head {
margin-bottom: 80px;
}
.webfolio-portfolio-swiper.before .sec-head .sub-title {
display: inline-block;
margin-bottom: 5px;
}
.webfolio-portfolio-swiper.before .sec-head h3 {
margin: 0;
color: #fff;
}
.webfolio-portfolio-swiper.before .sec-head h3.d-rotate {
perspective: 1000px;
}
.webfolio-portfolio-swiper.before .sec-head h3.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;
}
.webfolio-portfolio-swiper.before .sec-head h3.d-rotate.animated .rotate-text {
transform: translate3d(0px, 0px, 0px) rotateX(0deg) scale(1);
opacity: 1;
}
.webfolio-portfolio-swiper.before .sec-head .swiper-controls {
margin-left: auto;
}
.webfolio-portfolio-swiper.before .sec-head .swiper-controls .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.webfolio-portfolio-swiper.before .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next, .webfolio-portfolio-swiper.before .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev {
position: static;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
color: inherit;
}
.webfolio-portfolio-swiper.before .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next:after, .webfolio-portfolio-swiper.before .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev:after {
display: none;
}
.webfolio-portfolio-swiper.before .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next svg, .webfolio-portfolio-swiper.before .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev svg {
fill: #fff;
width: 16px;
height: 16px;
}
.webfolio-portfolio-swiper.before .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next {
margin-left: 15px;
}
.webfolio-portfolio-swiper .work-swiper .swiper-slide {
width: 70vw !important;
}
.webfolio-portfolio-swiper .work-swiper .item .cont .title {
margin: 0;
white-space: nowrap;
font-weight: 800;
color: transparent;
-webkit-text-stroke: 1px #fff;
transition: all 0.4s;
}
.webfolio-portfolio-swiper .work-swiper .item .cont .sub-title {
margin: 0;
}
.webfolio-portfolio-swiper .work-swiper .item .cont .butn-crev {
margin-top: 30px;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.webfolio-portfolio-swiper .work-swiper .item .cont .butn-crev .circle {
display: inline-block;
color: #fff;
width: 55px;
height: 55px;
line-height: 55px;
text-align: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-right: 15px;
}
.webfolio-portfolio-swiper .work-swiper .item .cont .butn-crev .circle svg {
width: 16px;
height: 16px;
fill: #fff;
}
.webfolio-portfolio-swiper .work-swiper .item .img {
padding-left: 80px;
}
.webfolio-portfolio-swiper .work-swiper .item .img img {
width: 100%;
}
.webfolio-portfolio-swiper .work-swiper .swiper-slide-active .item .cont .title {
color: #fff;
-webkit-text-stroke: 1px transparent;
}
.webfolio-portfolio-swiper .work-swiper.out-right {
clip-path: inset(-100vw -100vw -100vw 0);
}
.webfolio-portfolio-swiper .work-swiper .swiper-container {
overflow: visible;
}
.webfolio-portfolio-swiper .work-swiper .swiper-pagination {
top: auto;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
}
.webfolio-portfolio-swiper .work-swiper .swiper-pagination .swiper-pagination-progressbar-fill {
background: #fff;
}
@media screen and (max-width: 992px) {
.webfolio-portfolio-swiper .sec-head .d-flex {
display: block !important;
}
.webfolio-portfolio-swiper .sec-head .swiper-controls {
margin-left: 0 !important;
margin-top: 15px;
}
.webfolio-portfolio-swiper.after .sec-head .sub-title span:first-of-type {
display: none;
}
.webfolio-portfolio-swiper.after .sec-head .sub-title .thin {
margin: 0;
}
.webfolio-portfolio-swiper .work-swiper .swiper-slide {
width: 100% !important;
}
}
@media screen and (max-width: 768px) {
.webfolio-portfolio-swiper .work-swiper .swiper-slide .item {
display: block !important;
}
.webfolio-portfolio-swiper .work-swiper .swiper-slide .item .img {
padding: 0;
margin-top: 40px;
}
} .webfolio-team .item.middle .bg-blur {
position: relative;
overflow: hidden;
}
.webfolio-team .item.middle .bg-blur .circle-blur {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 80%;
}
.webfolio-team .item.middle .bg-blur .circle-blur img {
width: 100%;
height: auto;
}
.webfolio-team .item.middle .img {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
position: relative;
overflow: hidden;
padding-top: 30px;
height: 300px;
backdrop-filter: blur(50px);
z-index: 2;
}
.webfolio-team .item.middle .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.webfolio-team .item.middle .img .social {
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: all 0.4s;
}
.webfolio-team .item.middle .img .social a {
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
font-size: 13px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
backdrop-filter: blur(10px);
margin: 0 2px;
}
.webfolio-team .item.middle .img .social a svg {
width: 14px;
height: 14px;
fill: #fff;
}
.webfolio-team .item.middle .img .social a:hover {
background: #fd5b38;
}
.webfolio-team .item.middle .cont {
padding-top: 30px;
}
.webfolio-team .item.middle .cont .info .position {
display: inline-block;
margin: 0;
margin-top: 10px;
color: #c6c8c9;
}
.webfolio-team .item.middle .cont .info .name {
color: #fff;
margin: 0;
}
.webfolio-team .item.middle:hover .img .social {
bottom: 30px;
opacity: 1;
}
.webfolio-team .item.behind {
position: relative;
padding-right: 60px;
}
.webfolio-team .item.behind:hover .img .info {
bottom: 15px;
opacity: 1;
}
.webfolio-team .item.behind:hover .social {
right: 5px;
transform: rotate(8deg);
}
.webfolio-team .item.behind .img {
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 2;
}
.webfolio-team .item.behind .img img {
width: 100%;
height: auto;
}
.webfolio-team .item.behind .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;
}
.webfolio-team .item.behind .img .info .name {
color: #fff;
margin: 0;
}
.webfolio-team .item.behind .img .info span {
display: inline-block;
}
.webfolio-team .item.behind .img .info .position {
color: #fff;
}
.webfolio-team .item.behind .social {
position: absolute;
top: 50px;
left: 50px;
right: 60px;
bottom: 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: #121212;
border-radius: 10px;
transition: all 0.4s;
}
.webfolio-team .item.behind .social .links {
position: absolute;
top: 15px;
right: 15px;
}
.webfolio-team .item.behind .social .links a {
color: #FFFFFF;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
margin-bottom: 5px;
transition: all 0.4s;
}
.webfolio-team .item.behind .social .links a svg {
width: 14px;
height: 14px;
fill: #fff;
}
.webfolio-team .item.behind .social .links a:hover {
background: #fd5b38;
border-color: #fd5b38;
color: #111;
}
.webfolio-team .item.behind .social .links a:hover svg {
fill: #111;
}
.webfolio-team .item.fixed {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
position: relative;
overflow: hidden;
}
.webfolio-team .item.fixed .social {
margin-top: 20px;
}
.webfolio-team .item.fixed .social a {
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
font-size: 13px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin: 0 2px;
}
.webfolio-team .item.fixed .social a svg {
width: 13px;
height: 13px;
fill: #fff;
}
.webfolio-team .item.fixed .cont {
padding-bottom: 30px;
padding-top: 30px;
text-align: center;
}
.webfolio-team .item.fixed .cont .info .position {
display: inline-block;
margin: 0;
margin-top: 10px;
color: #c6c8c9;
}
.webfolio-team .item.fixed .cont .info .name {
color: #fff;
margin: 0;
}
.webfolio-team .item.fixed .img {
position: relative;
height: 300px;
z-index: 2;
backdrop-filter: blur(50px);
}
.webfolio-team .item.fixed .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.webfolio-team .item.fixed .circle-blur {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 100%;
} .webfolio-testimonials .sec-head {
margin-bottom: 80px;
}
.webfolio-testimonials .sec-head .sub-title {
display: inline-block;
margin-bottom: 5px;
}
.webfolio-testimonials .sec-head h3 {
margin: 0;
color: #fff;
}
.webfolio-testimonials .sec-head .swiper-controls {
margin-left: auto;
}
.webfolio-testimonials .sec-head .swiper-controls .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.webfolio-testimonials .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next, .webfolio-testimonials .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev {
position: static;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
color: inherit;
}
.webfolio-testimonials .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next:after, .webfolio-testimonials .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev:after {
display: none;
}
.webfolio-testimonials .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next svg, .webfolio-testimonials .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev svg {
fill: #fff;
width: 16px;
height: 16px;
}
.webfolio-testimonials .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next {
margin-left: 15px;
}
.webfolio-testimonials .out-right {
clip-path: inset(-100vw -100vw -100vw 0);
}
.webfolio-testimonials .swiper-container {
overflow: visible;
}
.webfolio-testimonials .swiper-slide {
width: 500px;
}
.webfolio-testimonials .item {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
}
.webfolio-testimonials .item .cont {
padding: 40px;
}
.webfolio-testimonials .item .cont p {
font-size: 20px;
}
.webfolio-testimonials .item .info {
padding: 20px 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
}
.webfolio-testimonials .item .info .name {
color: #FFFFFF;
margin: 0;
}
.webfolio-testimonials .item .info .position {
display: inline-block;
margin-top: 5px;
}
.webfolio-testimonials .item .info .img {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
}
.webfolio-testimonials .item .info .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.webfolio-testimonials .item .info .text-container {
margin-left: 20px;
}
@media screen and (max-width: 992px) {
.webfolio-testimonials .sec-head .d-flex {
display: block !important;
}
.webfolio-testimonials .sec-head .swiper-controls {
margin-left: 0 !important;
margin-top: 15px;
}
} .webfolio-blog a, .webfolio-blog span {
display: inline-block;
}
.webfolio-blog a, .webfolio-blog a:hover {
color: inherit;
}
.webfolio-blog .item .img {
overflow: hidden;
height: 400px;
}
.webfolio-blog .item .img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.webfolio-blog .item .cont {
padding-top: 40px;
}
.webfolio-blog .item .cont .info {
margin-bottom: 15px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #c6c8c9;
}
.webfolio-blog .item .cont .info .date {
margin-left: 20px;
}
.webfolio-blog .item .cont .title {
margin: 0;
color: #fff;
}
.webfolio-blog .item .cont .butn-crev {
margin-top: 40px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.webfolio-blog .item .cont .butn-crev .circle {
width: 55px;
height: 55px;
line-height: 55px;
text-align: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-right: 15px;
}
.webfolio-blog .item .cont .butn-crev .circle svg {
fill: #fff;
width: 16px;
height: 16px;
}
.webfolio-blog.up .item {
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.webfolio-blog.up .item .info {
margin-bottom: 20px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #c6c8c9;
}
.webfolio-blog.up .item .info .date {
margin-left: 20px;
}
.webfolio-blog.up .item .img {
height: 280px;
} .webfolio-marquee {
position: relative;
}
.webfolio-marquee.overflow-x-clip {
overflow-x: clip;
}
.webfolio-marquee .main-marq {
position: relative;
padding: 0;
}
.webfolio-marquee .main-marq:after {
content: "";
position: absolute;
top: -30px;
bottom: -30px;
left: -30px;
right: -30px;
pointer-events: none;
background: linear-gradient(to left, #0f0f0f, rgba(255, 255, 255, 0) 280px, rgba(255, 255, 255, 0) calc(100% - 280px), #0f0f0f);
}
.webfolio-marquee .main-marq.shadow-off:after {
display: none;
}
.webfolio-marquee .main-marq a {
display: inline-block;
}
.webfolio-marquee .main-marq a, .webfolio-marquee .main-marq a:hover {
color: inherit;
}
.webfolio-marquee .main-marq .slide-har {
display: flex;
}
.webfolio-marquee .main-marq .box {
display: flex;
}
.webfolio-marquee .main-marq .box .item {
padding: 0 30px;
}
.webfolio-marquee .main-marq .box .item span {
display: inline-block;
}
.webfolio-marquee .main-marq .box .item h4 {
color: #fff;
white-space: nowrap;
margin: 0;
}
.webfolio-marquee .main-marq .box .item h2 {
margin: 0;
}
.webfolio-marquee .main-marq .box .item:nth-of-type(even) h4 {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
}
.webfolio-marquee .main-marq .box .item:nth-of-type(even) h4 a {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
}
.webfolio-marquee .main-marq .box:last-of-type .item:nth-of-type(even) h4 {
color: #fff;
-webkit-text-stroke: 0;
}
.webfolio-marquee .main-marq .box:last-of-type .item:nth-of-type(even) h4 a {
color: #fff;
-webkit-text-stroke: 0;
}
.webfolio-marquee .main-marq .box:last-of-type .item:nth-of-type(odd) h4 {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
.webfolio-marquee .main-marq .box:last-of-type .item:nth-of-type(odd) h4 a {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
.webfolio-marquee .slide-har {
position: relative;
}
.webfolio-marquee .slide-har.st1 .box {
position: relative;
animation: slide-har 80s linear infinite;
}
.webfolio-marquee .slide-har.st2 .box {
position: relative;
animation: slide-har-revers 80s linear infinite;
}
.webfolio-marquee .overlay-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes slide-har {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes slide-har-revers {
100% {
transform: translateX(0%);
}
0% {
transform: translateX(-100%);
}
} .webfolio-mailchimp {
position: relative;
}
.webfolio-mailchimp.button-inside button {
padding: 15px 0;
position: absolute;
top: 5px;
right: 0;
background: transparent;
border: 0;
}
.webfolio-mailchimp.button-inside button svg {
fill: #FFFFFF;
width: 16px;
height: 16px;
} .webfolio-services .sec-head {
margin-bottom: 80px;
}
.webfolio-services .sec-head .sub-title {
display: inline-block;
margin-bottom: 5px;
color: #fd5b38;
}
.webfolio-services .sec-head h3 {
margin: 0;
color: #fff;
}
.webfolio-services .sec-head h3 .light-title {
font-weight: 200;
}
.webfolio-services .sec-head .swiper-controls {
margin-left: auto;
}
.webfolio-services .sec-head .swiper-controls .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.webfolio-services .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next, .webfolio-services .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev {
position: static;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
color: inherit;
}
.webfolio-services .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next:after, .webfolio-services .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev:after {
display: none;
}
.webfolio-services .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next svg, .webfolio-services .sec-head .swiper-controls .swiper-arrow-control .swiper-button-prev svg {
fill: #fff;
width: 16px;
height: 16px;
}
.webfolio-services .sec-head .swiper-controls .swiper-arrow-control .swiper-button-next {
margin-left: 15px;
}
.webfolio-services .item-box {
padding: 60px 40px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 15px;
}
.webfolio-services .item-box .icon {
width: 80px;
margin-bottom: 40px;
opacity: 0.5;
}
.webfolio-services .item-box .icon img {
width: 100%;
height: auto;
}
.webfolio-services .item-box h5 {
color: #FFFFFF;
margin: 0;
margin-bottom: 15px;
}
.webfolio-services .item-box p {
color: #c6c8c9;
margin: 0;
}
.webfolio-services .item-box .rmore {
display: inline-block;
margin-top: 30px;
}
.webfolio-services .item-box .rmore .sub-title {
color: #fff;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.5;
font-weight: 400;
}
.webfolio-services .item-box .rmore .icon-img {
width: 20px;
margin-left: 5px;
}
.webfolio-services .swiper-container {
overflow: visible;
}
@media screen and (max-width: 992px) {
.webfolio-services .sec-head .d-flex {
display: block !important;
}
.webfolio-services .sec-head .swiper-controls {
margin-left: 0;
margin-top: 15px;
}
} .webfolio-work-fade .text {
padding-bottom: 90px;
}
.webfolio-work-fade .text p {
line-height: 1.8;
font-size: 16px;
font-weight: 400;
color: #c6c8c9;
margin: 0;
word-spacing: 0;
}
.webfolio-work-fade .item {
position: relative;
}
.webfolio-work-fade .item .img img {
border-radius: 15px;
width: 100%;
height: auto;
}
.webfolio-work-fade .item .cont {
position: absolute;
top: 80px;
left: 0;
}
.webfolio-work-fade .item .cont .title {
position: relative;
display: block;
width: max-content;
padding: 10px 30px;
margin: -1px 0;
color: #FFFFFF;
}
.webfolio-work-fade .item .cont .title:first-of-type {
border-radius: 0 20px 0 0;
}
.webfolio-work-fade .item .cont .title:first-of-type .shap-left-top svg {
position: absolute;
top: -1.4rem;
left: -1px;
transform: rotate(270deg);
width: 1.5rem;
height: 1.5rem;
}
.webfolio-work-fade .item .cont .title:first-of-type .shap-right-bottom svg {
position: absolute;
bottom: 0;
right: -1.4rem;
transform: rotate(270deg);
width: 1.5rem;
height: 1.5rem;
}
.webfolio-work-fade .item .cont .title:nth-of-type(2) {
border-radius: 0 20px 20px 0;
}
.webfolio-work-fade .item .cont .title:nth-of-type(2) .shap-left-bottom svg {
position: absolute;
bottom: -1.4rem;
left: -1px;
transform: rotate(0deg);
width: 1.5rem;
height: 1.5rem;
}
.webfolio-work-fade .swiper-pagination {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.webfolio-work-fade .swiper-pagination-bullet {
position: relative;
margin: 30px 0 !important;
display: block;
background: transparent;
}
.webfolio-work-fade .swiper-pagination-bullet:after {
content: "";
width: 7px;
height: 7px;
background: #fff;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
}
.webfolio-work-fade .swiper-pagination-bullet svg {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.webfolio-work-fade .swiper-pagination-bullet svg .path {
stroke-width: 0.5px;
display: none;
}
.webfolio-work-fade .swiper-pagination-bullet-active .path {
display: inline-block !important;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
-webkit-animation: dash linear 10s;
animation: dash linear 10s;
-webkit-animation-iteration-count: unset;
animation-iteration-count: unset;
}
@media screen and (max-width: 992px) {
.webfolio-work-fade .text {
padding-bottom: 50px;
}
.webfolio-work-fade .swiper-pagination {
top: 80%;
right: -20px;
}
}
@media screen and (max-width: 992px) {
.webfolio-work-fade .swiper-pagination {
top: 70%;
right: -20px;
}
}
@media screen and (max-width: 768px) {
.webfolio-work-fade .item .cont {
position: static;
margin-top: 15px;
opacity: 0;
}
.webfolio-work-fade .item .cont .title {
display: inline-block;
background: transparent;
font-size: 22px;
padding: 0 1px;
margin: 0;
border-radius: 0;
}
.webfolio-work-fade .item .cont .shap-left-top,
.webfolio-work-fade .item .cont .shap-left-bottom {
display: none;
}
.webfolio-work-fade .swiper-slide-active .item .cont {
opacity: 1;
}
} .webfolio-full-testimonials {
position: relative;
}
.webfolio-full-testimonials .qout-svg {
position: absolute;
left: 80px;
top: -70px;
width: 140px;
}
.webfolio-full-testimonials .control-abslout {
position: absolute;
bottom: 90px;
right: 80px;
}
.webfolio-full-testimonials .swiper-arrow-control {
display: flex;
padding-top: 25px;
}
.webfolio-full-testimonials .swiper-arrow-control .swiper-button-next {
margin-left: 15px;
}
.webfolio-full-testimonials .swiper-arrow-control .swiper-button-next, .webfolio-full-testimonials .swiper-arrow-control .swiper-button-prev {
position: static;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
color: inherit;
}
.webfolio-full-testimonials .swiper-arrow-control .swiper-button-next svg, .webfolio-full-testimonials .swiper-arrow-control .swiper-button-prev svg {
width: 16px;
height: 16px;
fill: #fff;
}
.webfolio-full-testimonials .swiper-arrow-control .swiper-button-next:after, .webfolio-full-testimonials .swiper-arrow-control .swiper-button-prev:after {
display: none;
}
.webfolio-full-testimonials .testim-swiper {
position: relative;
z-index: 1;
padding: 80px;
}
.webfolio-full-testimonials .testim-swiper.backdrop-filter {
backdrop-filter: blur(50px);
}
.webfolio-full-testimonials .testim-swiper.overflow-hidden {
overflow: hidden;
}
.webfolio-full-testimonials .testim-swiper .text {
position: relative;
}
.webfolio-full-testimonials .testim-swiper .member-info {
margin-left: 20px;
}
.webfolio-full-testimonials .testim-swiper .member-info .name {
color: #FFFFFF;
margin: 0;
}
.webfolio-full-testimonials .testim-swiper .member-info .position {
margin: 0;
color: #fd5b38;
}
.webfolio-full-testimonials .testim-swiper .photo {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}
.webfolio-full-testimonials .testim-swiper .photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.webfolio-full-testimonials .circle-blur {
position: absolute;
top: -50px;
left: 50px;
width: 180px;
transform: rotate(180deg);
z-index: 0;
}
@media screen and (max-width: 768px) {
.webfolio-full-testimonials .control-abslout {
bottom: 15px;
right: 15px;
}
} .webfolio-service-accordion {
display: flex;
}
.webfolio-service-accordion .item {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 40px 30px;
width: 350px;
height: 450px;
margin: 0 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.4s;
}
.webfolio-service-accordion .item .icon {
width: 60px;
}
.webfolio-service-accordion .item .icon img {
width: 100%;
height: auto;
}
.webfolio-service-accordion .item.active {
width: calc(100vw - 1050px);
}
.webfolio-service-accordion .item.active p {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition-delay: 0.4s;
opacity: 1;
transform: translate(0);
}
.webfolio-service-accordion .item h6 {
color: #FFFFFF;
font-size: 14px !important;
font-weight: 400;
padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 30px;
margin: 0;
}
.webfolio-service-accordion .item .text {
margin-bottom: 30px;
}
.webfolio-service-accordion .item p {
margin: 0;
font-size: 20px;
text-indent: 15%;
opacity: 0;
transition: opacity 0.1s ease-out, transform 0.4s ease-out, clip-path 0.6s cubic-bezier(0.25, 0.59, 0.29, 0.96);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transform: translateX(50px);
color: #c6c8c9;
}
.webfolio-service-accordion .item .number {
margin-left: auto;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
}
@media screen and (max-width: 992px) {
.webfolio-service-accordion {
display: block;
}
.webfolio-service-accordion .item {
width: 100%;
padding: 60px 40px;
margin: 5px 0;
}
.webfolio-service-accordion .item p {
opacity: 1;
clip-path: none !important;
text-indent: 0;
transform: none;
}
.webfolio-service-accordion .item.active {
width: 100% !important;
}
} .webfolio-accordion .item:first-of-type .title {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.webfolio-accordion .title {
padding: 25px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
position: relative;
}
.webfolio-accordion .title .ico {
position: absolute;
bottom: 30px;
right: 15px;
}
.webfolio-accordion .accordion-info {
display: none;
padding: 25px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.webfolio-accordion .active .title .ico {
transform: rotate(45deg);
}
.webfolio-accordion .active .accordion-info {
display: block;
} .webfolio-portfolio-tabs .lg-marg {
margin-left: -40px !important;
margin-right: -40px !important;
}
.webfolio-portfolio-tabs .lg-marg > * {
padding-left: 40px !important;
padding-right: 40px !important;
}
.webfolio-portfolio-tabs .full-width {
width: 100%;
}
.webfolio-portfolio-tabs .cluom {
position: relative;
}
.webfolio-portfolio-tabs .cluom .img {
position: absolute;
top: -25px;
right: 200px;
width: 200px;
height: 300px;
opacity: 0;
visibility: hidden;
transition: all 0.4s;
}
.webfolio-portfolio-tabs .cluom h4 {
white-space: nowrap;
margin: 0;
}
.webfolio-portfolio-tabs .cluom h4 a {
display: inline-block;
font-weight: 800;
color: transparent;
-webkit-text-stroke: 0.5px #fff;
transition: all 0.4s;
}
.webfolio-portfolio-tabs .cluom h4 .number {
margin-right: 10px;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
color: #fff;
}
.webfolio-portfolio-tabs .cluom h6 {
margin: 0;
margin-left: 20px;
white-space: nowrap;
color: #c6c8c9;
}
.webfolio-portfolio-tabs .cluom.current h4 a {
color: #fff;
-webkit-text-stroke: 0.5px transparent;
}
.webfolio-portfolio-tabs .glry-img {
position: relative;
z-index: 2;
}
.webfolio-portfolio-tabs .glry-img .circle-blur {
width: 400px;
position: absolute;
right: -100px;
bottom: -80px;
filter: blur(80px);
z-index: -1;
}
.webfolio-portfolio-tabs .glry-img .tab-img {
position: absolute;
top: 0;
left: 0;
transition: clip-path 0.8s cubic-bezier(0.25, 0.59, 0.29, 0.96);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.webfolio-portfolio-tabs .glry-img .tab-img.current {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
z-index: 3;
}
.webfolio-portfolio-tabs .glry-img .tab-img:first-of-type {
position: relative;
}
@media screen and (max-width: 992px) {
.webfolio-portfolio-tabs .lg-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.webfolio-portfolio-tabs .lg-marg > * {
padding-left: 15px !important;
padding-right: 15px !important;
}
.webfolio-portfolio-tabs .glry-img {
margin-bottom: 50px;
}
} .webfolio-portfolio-card .card-item {
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
background: #121212;
}
.webfolio-portfolio-card .card-item .cont {
height: 100%;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.webfolio-portfolio-card .card-item .cont .categories {
margin-bottom: 15px;
}
.webfolio-portfolio-card .card-item .cont .categories a {
display: inline-block;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 5px 15px;
margin: 2px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 30px;
color: #fff;
}
.webfolio-portfolio-card .card-item .cont .excerpt {
color: #c6c8c9;
}
.webfolio-portfolio-card .card-item .cont .title {
color: #FFFFFF;
}
.webfolio-portfolio-card .card-item .cont .rmore {
display: inline-block;
margin-top: 15px;
text-decoration: underline;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fd5b38;
line-height: 1.5;
font-weight: 400;
}
.webfolio-portfolio-card .card-item .cont .rmore svg {
width: 14px;
height: 14px;
fill: #fd5b38;
}
.webfolio-portfolio-card .card-item .img {
padding: 20px;
}
.webfolio-portfolio-card .card-item .img img {
border-radius: 10px;
} .webfolio-skills .skill {
margin-bottom: 15px;
color: #FFFFFF;
}
.webfolio-skills .skill-progress {
height: 25px;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}
.webfolio-skills .skill-progress .progres {
position: absolute;
width: 10%;
top: 5px;
bottom: 5px;
left: 5px;
background: rgba(255, 255, 255, 0.1);
transition: all 1.5s;
} .webfolio-rotate-circle {
position: relative;
display: inline-block;
}
.webfolio-rotate-circle a {
position: relative;
}
.webfolio-rotate-circle .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.webfolio-rotate-circle .icon svg {
fill: #fff;
}
.webfolio-rotate-circle .rotate-circle svg {
width: 210px;
fill: #fff;
}
.webfolio-rotate-circle .rotate-circle {
animation-name: rotateCircle;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotateCircle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .webfolio-services-item {
padding: 50px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.webfolio-services-item .row.md-marg {
margin-left: -25px !important;
margin-right: -25px !important;
}
.webfolio-services-item .row.md-marg > * {
padding-left: 25px !important;
padding-right: 25px !important;
}
.webfolio-services-item span, .webfolio-services-item a {
display: inline-block;
}
.webfolio-services-item:hover .img.read-more a {
opacity: 1;
visibility: visible;
}
.webfolio-services-item:hover .img.read-more:after {
transform: rotate(5deg);
}
.webfolio-services-item .num {
color: #fff;
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin-bottom: 15px;
font-size: 13px;
}
.webfolio-services-item .title {
font-size: 47px;
margin: 0;
color: #FFFFFF;
}
.webfolio-services-item .title span {
font-weight: 200;
}
.webfolio-services-item .sub-title {
margin: 0;
margin-bottom: 10px;
color: #fd5b38;
}
.webfolio-services-item .text p {
margin: 0;
line-height: 1.8;
font-size: 16px;
font-weight: 400;
color: #c6c8c9;
}
.webfolio-services-item .dot-list {
margin: 0;
padding: 0;
}
.webfolio-services-item .dot-list li {
position: relative;
padding-left: 15px;
list-style-type: none;
margin-bottom: 5px;
font-size: 20px;
font-weight: 400;
line-height: 1.5;
color: #c6c8c9;
}
.webfolio-services-item .dot-list li:last-child {
margin: 0;
}
.webfolio-services-item .dot-list li::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 0;
background: #fff;
}
.webfolio-services-item .img.read-more {
position: relative;
height: 140px;
border-radius: 100px;
overflow: visible;
}
.webfolio-services-item .img.read-more img {
border-radius: 100px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
position: relative;
}
.webfolio-services-item .img.read-more a {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
border-radius: 50%;
background: #fd5b38;
position: absolute;
top: 20px;
right: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.4s;
z-index: 1;
}
.webfolio-services-item .img.read-more a svg {
fill: #fff;
width: 16px;
height: 16px;
}
.webfolio-services-item .img.read-more:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100px;
border: 2px dashed rgba(255, 255, 255, 0.1);
transform-origin: 100% 50%;
transition: all 0.4s;
z-index: 0;
}
@media screen and (max-width: 992px) {
.webfolio-services-item .d-flex {
display: block !important;
}
.webfolio-services-item .row.md-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.webfolio-services-item .row.md-marg > * {
padding-left: 15px !important;
padding-right: 15px !important;
}
} .webfolio-contact-form p {
margin: 0;
}
.webfolio-contact-form p input:focus {
box-shadow: none;
}
.webfolio-contact-form p textarea:focus {
box-shadow: none;
}
.webfolio-contact-form .wpcf7-spinner {
position: absolute;
} .webfolio-post-categories .rest {
margin: 0;
padding: 0;
}
.webfolio-post-categories .rest li {
display: flex;
list-style-type: none;
font-size: 15px;
padding: 10px 20px;
border-radius: 30px;
}
.webfolio-post-categories .rest li .count {
color: #fff;
margin-left: auto;
}
.webfolio-post-categories .rest li .category {
color: #fff;
}
.webfolio-post-categories .rest li span {
display: inline-block;
}
.webfolio-post-categories .rest li:last-of-type {
margin-bottom: 0;
}
.webfolio-post-categories .rest li:hover {
background: rgba(255, 255, 255, 0.02);
} .webfolio-post-tags a {
display: inline-block;
transition: all 0.4s;
background: rgba(255, 255, 255, 0.02);
color: #fff;
}
.webfolio-post-tags a:hover {
background: #fd5b38;
} .webfolio-latest-posts .item {
display: flex;
}
.webfolio-latest-posts .item span, .webfolio-latest-posts .item a {
display: inline-block;
}
.webfolio-latest-posts .item a, .webfolio-latest-posts .item a:hover {
color: inherit;
}
.webfolio-latest-posts .item:hover .img a .post-date {
opacity: 1;
}
.webfolio-latest-posts .item .img {
width: 90px;
height: 100px;
border-radius: 5px;
overflow: hidden;
}
.webfolio-latest-posts .item .img a {
width: 100%;
height: 100%;
position: relative;
}
.webfolio-latest-posts .item .img a .post-date {
color: #FFFFFF;
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;
}
.webfolio-latest-posts .item .img a .post-date span {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
line-height: 1;
}
.webfolio-latest-posts .item .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.webfolio-latest-posts .item .cont {
padding-left: 25px;
}
.webfolio-latest-posts .item .cont h6 {
color: #fff;
font-size: 17px;
}
.webfolio-latest-posts .item .cont .categories {
color: #fff;
font-size: 12px;
padding: 5px 15px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.03);
margin-bottom: 10px;
} .webfolio-blog-classic a, .webfolio-blog-classic span {
display: inline-block;
}
.webfolio-blog-classic a, .webfolio-blog-classic a:hover {
color: inherit;
}
.webfolio-blog-classic .item .cont {
margin-top: 40px;
}
.webfolio-blog-classic .item .cont .date-comment {
margin-bottom: 15px;
}
.webfolio-blog-classic .item .cont .date-comment .post-date {
padding: 7px 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 30px;
font-size: 12px;
color: #ddd;
text-transform: uppercase;
margin-right: 15px;
}
.webfolio-blog-classic .item .cont .date-comment .comment {
color: #fff;
}
.webfolio-blog-classic .item .cont .date-comment .comment svg {
fill: #fff;
}
.webfolio-blog-classic .item .cont .title {
color: #fff;
}
.webfolio-blog-classic .item .cont .excerpt {
color: #c6c8c9;
margin: 0;
}
.webfolio-blog-classic .item .cont .r-more {
color: #fd5b38;
}
.webfolio-blog-classic .item .cont .r-more svg {
fill: #fd5b38;
} .webfolio-next-project {
position: relative;
}
.webfolio-next-project .margin {
width: max-content;
}
.webfolio-next-project .box {
padding: 200px 80px;
position: relative;
}
.webfolio-next-project .box:after {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: #121212;
transition: all 0.4s;
}
.webfolio-next-project .box .cont {
position: relative;
z-index: 3;
}
.webfolio-next-project .box .cont svg {
fill: #FFFFFF;
}
.webfolio-next-project .box .cont .sub-title {
color: #FFFFFF;
max-width: 100%;
}
.webfolio-next-project .box .cont .title {
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
}
.webfolio-next-project .box .cont .title:hover {
color: #FFF;
}
.webfolio-next-project .box:hover:after {
background: #121212;
opacity: 0.3;
}
@media screen and (max-width: 992px) {
.webfolio-next-project .box .cont {
width: 236px;
}
}
@media screen and (max-width: 720px) {
.webfolio-next-project .box .cont {
width: 186px;
}
} .webfolio-portfolio-gallery .webfolio-filtering .filter {
padding: 11px 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 30px;
display: inline-block;
}
.webfolio-portfolio-gallery .webfolio-filtering .filter span {
display: inline-block;
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 30px;
cursor: pointer;
position: relative;
opacity: 0.7;
}
.webfolio-portfolio-gallery .webfolio-filtering .filter span:after {
content: attr(data-count);
font-size: 12px;
position: absolute;
top: -10px;
right: -20px;
opacity: 0.7;
}
.webfolio-portfolio-gallery .sec-head .sub-title {
margin: 0;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fd5b38;
margin-bottom: 10px;
}
.webfolio-portfolio-gallery .sec-head .title {
color: #fff;
font-size: 40px;
margin: 0;
font-weight: 600;
line-height: 1.3;
}
.webfolio-portfolio-gallery .row.md-marg {
margin-left: -25px !important;
margin-right: -25px !important;
}
.webfolio-portfolio-gallery .row.md-marg > * {
padding-left: 25px !important;
padding-right: 25px !important;
}
.webfolio-portfolio-gallery .row.sm-marg {
margin-left: -5px !important;
margin-right: -5px !important;
}
.webfolio-portfolio-gallery .row.sm-marg > * {
padding-left: 5px !important;
padding-right: 5px !important;
}
.webfolio-portfolio-gallery.style1 .items-gallery div .item {
margin-bottom: 80px;
margin-top: 40px;
}
.webfolio-portfolio-gallery.style1 .items-gallery div:last-child .item {
margin-bottom: 0;
}
.webfolio-portfolio-gallery.style2 .container-xxl {
max-width: 1500px;
}
.webfolio-portfolio-gallery.style2 a {
display: inline-block;
}
.webfolio-portfolio-gallery.style2 a, .webfolio-portfolio-gallery.style2 a:hover {
color: inherit;
}
.webfolio-portfolio-gallery.style2 .category-wrapper {
margin-left: auto;
}
.webfolio-portfolio-gallery.style2 .item:hover .img .cont {
opacity: 1;
transform: translateY(0);
}
.webfolio-portfolio-gallery.style2 .item .img {
position: relative;
}
.webfolio-portfolio-gallery.style2 .item .img .cont {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
padding: 15px 30px;
background: #0f0f0f;
border-radius: 5px;
transform: translateY(20px);
opacity: 0;
transition: all 0.4s;
}
.webfolio-portfolio-gallery.style2 .item .img .cont img {
width: 20px;
}
.webfolio-portfolio-gallery.style2 .item .img .cont.inline {
padding: 25px 30px;
}
.webfolio-portfolio-gallery .items-gallery .item .img img {
width: 100%;
}
.webfolio-portfolio-gallery .items-gallery .item .cont .category {
margin: 0;
display: inline-block;
color: #c6c8c9;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.5;
}
.webfolio-portfolio-gallery .items-gallery .item .cont .title {
color: #FFFFFF;
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 0;
}
.webfolio-portfolio-gallery .items-gallery .item .cont .read-more {
margin-left: auto;
}
.webfolio-portfolio-gallery .items-gallery .item .cont .read-more svg {
fill: #fff;
width: 16px;
height: 16px;
}
@media screen and (max-width: 992px) {
.webfolio-portfolio-gallery .row.md-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.webfolio-portfolio-gallery .row.md-marg > * {
padding-left: 15px !important;
padding-right: 15px !important;
}
.webfolio-portfolio-gallery .row.sm-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.webfolio-portfolio-gallery .row.sm-marg > * {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
@media screen and (max-width: 992px) {
.webfolio-portfolio-gallery .webfolio-filtering {
display: block !important;
margin-top: 30px;
}
.webfolio-portfolio-gallery .webfolio-filtering .filter span {
margin: 14px 25px;
}
}
@media screen and (max-width: 768px) {
.webfolio-portfolio-gallery.style2 .item .img .cont.inline {
padding: 20px 15px;
}
} .webfolio-portfolio-creative {
display: flex;
}
.webfolio-portfolio-creative .item {
width: 350px;
height: 80vh;
min-height: 450px;
margin: 0 4px;
display: flex;
transition: all 0.4s;
}
.webfolio-portfolio-creative .item span, .webfolio-portfolio-creative .item a {
display: inline-block;
}
.webfolio-portfolio-creative .item .category {
color: #c6c8c9;
}
.webfolio-portfolio-creative .item .title {
color: #fff;
}
.webfolio-portfolio-creative .item .bg-img {
width: 100%;
height: 100%;
background-size: cover;
position: relative;
}
.webfolio-portfolio-creative .item .bg-img .cont {
background: #0f0f0f;
position: absolute;
left: 0;
bottom: 0;
padding: 20px 20px 20px 30px;
opacity: 0;
width: max-content;
visibility: hidden;
transition: all 0.4s;
}
.webfolio-portfolio-creative .item .bg-img .cont .arrow-wrapper {
margin-left: auto;
}
.webfolio-portfolio-creative .item .bg-img .cont .arrow-wrapper .arrow img {
width: 60px;
transform: rotate(225deg);
margin-left: 50px;
}
.webfolio-portfolio-creative .item .bg-img .cont h5,
.webfolio-portfolio-creative .item .bg-img .cont span {
transform: translateY(15px);
opacity: 0;
transition: all 0.4s;
transition-delay: 0;
}
.webfolio-portfolio-creative .item .bg-img .cont .arrow {
transform: translateX(30px);
transition: all 0.4s;
}
.webfolio-portfolio-creative .item.active {
width: calc(100vw - 420px);
}
.webfolio-portfolio-creative .item.active .bg-img .cont {
opacity: 1;
visibility: visible;
}
.webfolio-portfolio-creative .item.active .bg-img .cont h5,
.webfolio-portfolio-creative .item.active .bg-img .cont span {
transform: none;
opacity: 1;
}
.webfolio-portfolio-creative .item.active .bg-img .cont h5 {
transition-delay: 0.3s;
}
.webfolio-portfolio-creative .item.active .bg-img .cont span {
transition-delay: 0.6s;
}
.webfolio-portfolio-creative .item.active .bg-img .cont .arrow {
transform: none;
transition-delay: 0.4s;
}
@media screen and (max-width: 992px) {
.webfolio-portfolio-creative {
display: block;
}
.webfolio-portfolio-creative .item {
width: 100% !important;
height: 250px;
min-height: auto;
}
.webfolio-portfolio-creative .item.active {
height: calc(100vh - 750px);
}
}
@media screen and (max-width: 768px) {
.webfolio-portfolio-creative .item {
height: 350px;
min-height: auto;
background-position: center center;
}
.webfolio-portfolio-creative .item.active {
height: 350px;
}
} .webfolio-team-single .row.md-marg {
margin-left: -25px !important;
margin-right: -25px !important;
}
.webfolio-team-single .bord {
position: relative;
padding: 0 60px;
}
.webfolio-team-single .bord .img {
position: relative;
z-index: 2;
}
.webfolio-team-single .bord:before {
content: "";
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 0;
}
.webfolio-team-single .bord:after {
content: "";
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 0;
}
.webfolio-team-single .bord .img {
width: 100%;
height: auto;
}
.webfolio-team-single .bord .name {
font-size: 50px;
font-weight: 600;
line-height: 1.3;
margin: 0;
color: #FFFFFF;
}
.webfolio-team-single .bord .position {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fd5b38;
margin: 0;
margin-top: 10px;
}
.webfolio-team-single .bord .text {
margin-top: 15px;
}
.webfolio-team-single .bord .text p {
color: #c6c8c9;
line-height: 1.8;
font-size: 16px;
font-weight: 400;
margin: 0;
}
.webfolio-team-single .bord .info {
margin-top: 30px;
}
.webfolio-team-single .bord .info ul {
margin: 0;
padding: 0;
}
.webfolio-team-single .bord .info ul li {
color: #fff;
list-style-type: none;
margin-bottom: 25px;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
}
.webfolio-team-single .bord .info ul li span {
display: inline-block;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 15px;
}
.webfolio-team-single .bord .info ul li:last-child {
margin: 0;
}
@media screen and (max-width: 992px) {
.webfolio-team-single .row.md-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
.webfolio-team-single .bord {
padding: 0 40px 80px;
}
.webfolio-team-single .bord .img {
margin-bottom: 50px;
}
.webfolio-team-single .bord:after {
top: 30px;
left: 10px;
right: 10px;
bottom: 30px;
}
.webfolio-team-single .bord:before {
top: 20px;
left: 0;
right: 0;
bottom: 20px;
}
}
@media screen and (max-width: 768px) {
.webfolio-team-single .bord {
padding: 0 20px 80px;
}
} .webfolio-demos-gallery .gallery {
margin: 0;
}
.webfolio-demos-gallery .row.md-marg {
margin-left: -25px !important;
margin-right: -25px !important;
}
.webfolio-demos-gallery .item {
position: relative;
margin-bottom: 50px;
}
.webfolio-demos-gallery .item .img {
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.webfolio-demos-gallery .item .img img {
width: 100%;
height: auto;
}
.webfolio-demos-gallery .item .title {
margin: 0;
}
.webfolio-demos-gallery .item a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 992px) {
.webfolio-demos-gallery .row.md-marg {
margin-left: -15px !important;
margin-right: -15px !important;
}
}