Viewing File: /home/maglabs/etascom/wp-content/themes/agenzio/assets/scss/elements.scss
//elementor-custom
.pxl-main-footer {
@media (max-width: 767px) {
width: 50% !important;
}
@media (max-width: 480px) {
width: 100% !important;
}
}
.pxl-main-pricing {
@media (max-width: 767px) {
width: 50%;
}
@media (max-width: 676px) {
width: 100%;
}
}
.pxl-main-post {
@media (max-width: 767px) {
width: 50% !important;
}
@media (max-width: 575px) {
width: 100% !important;
}
}
.pxl-main-tab {
@media (max-width: 767px) {
width: 40%;
}
@media (max-width: 575px) {
width: 100%;
}
}
.pxl-main-tab2 {
@media (max-width: 767px) {
width: 60%;
}
@media (max-width: 575px) {
width: 100%;
}
}
.pxl-main-home05 {
@media (max-width: 767px) {
width: 50%;
}
@media (max-width: 400px) {
width: 100%;
}
}
.pxl-border-layout1 {
@include border-radius(10px);
}
.pxl-clip-layout1 {
filter: drop-shadow(0px 30px 80px rgba(0,0,0,0.21));
}
.pxl-banner-absolute {
left: 33px;
@media (max-width: 1700px) {
left: -100px;
width: 39% !important;
max-width: 39% !important;
}
}
.pxl-page-title-h4 {
position: relative !important;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.5);
top: 0;
left: 50%;
transform: translate(-50%,0);
z-index: 2;
display: none;
@media (max-width: 767px) {
display: block;
}
}
}
.pxl-contact-newsletter {
position: relative;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: $gradient_color_to;
clip-path: polygon(1.3% 0%, 96% 0%, 99.3% 100%, 3.6% 100%);
top: 0;
left: 50%;
transform: translate(-50%,0);
z-index: -1;
@media (max-width: 880px) {
clip-path: unset;
}
}
&:after {
content: '';
position: absolute;
width: 25px;
height: 103%;
left: -3px;
top: 0;
background-color: $primary_color;
clip-path: polygon(0% 0%, 100% 36%, 100% 97%, 0% 100%);
transform: rotate(12deg);
z-index: -2;
@media (max-width: 880px) {
display: none;
}
}
}
.pxl-text-slide-left {
transform: rotate(-90deg);
@media (max-width: 1800px) {
display: none;
}
}
.pxl-footer-main {
position: relative;
&:before {
content: '';
width: 100%;
height: 2px;
background-color: #f3f3f3;
top: 0;
left: 50%;
position: absolute;
transform: translate(-50%,0);
}
}
.pxl-item-relative {
position: relative !important;
}
.pxl-footer-main2 {
position: relative;
&:before {
content: '';
width: 100%;
height: 1px;
background-color: #e1e1e1;
top: 0;
left: 50%;
position: absolute;
transform: translate(-50%,0);
}
}
.pxl-main-sticky {
.pxl-menu-primary {
box-shadow: none;
}
}
.testimonials-setion1 {
padding: 121px 0 30px 300px;
@media (max-width: 1800px) {
padding: 121px 0 30px 100px;
}
@media (max-width: 1366px) {
padding: 121px 0 30px 0px;
}
@media (max-width: 767px) {
padding: 121px 0 80px 0px;
}
}
.pxl-portfolio-padding {
padding: 137px 0 140px 315px;
@media (max-width: 1700px) {
padding: 137px 0px 140px 200px;
}
@media (max-width: 1366px) {
padding: 137px 0px 140px 100px;
}
@media (max-width: 1280px) {
padding: 137px 15px 140px 15px;
}
@media (max-width: 1024px) {
padding: 70px 15px 80px 15px;
}
}
.pxl-section-post1 {
padding: 41px 0 141px 325px;
@media (max-width: 1700px) {
padding: 41px 0 141px 200px;
}
@media (max-width: 1366px) {
padding: 41px 15px 141px 15px;
}
@media (max-width: 1024px) {
padding: 41px 15px 70px 15px;
}
}
.pxl-header-one {
position: relative !important;
&:after {
content: '';
position: absolute;
top: 12px;
left: 50%;
width: 96.6%;
height: 100%;
background-color: #eeeeee;
z-index: -2;
@include border-radius(4px);
transform: translate(-50%,0);
}
}
.pxl-menu-home5 {
position: relative;
&:before {
content: '';
position: absolute;
width: 100%;
height: 130%;
background-color: #0E0E0E;
top: 0;
left: 0;
z-index: -1;
}
}
.pxl-menu-left5 {
position: relative !important;
&:before {
content: '';
position: absolute;
width: 98.8%;
height: 100%;
background-color: #fff;
top: 0;
left: -173px;
z-index: -1;
clip-path: polygon(15% 0%, 100% 0%, 98.2% 100%, 15% 100%);
}
}
.pxl-home02-layout1 {
position: relative !important;
&:before {
content: '';
position: absolute;
width: 200%;
height: 100%;
background-color: #e7e7e7;
top: 0;
right: 0;
z-index: -1;
clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 0% 100%);
@media (max-width: 1024px) {
clip-path: unset;
}
}
}
.pxl-home02-layout2 {
position: relative !important;
&:before {
content: '';
position: absolute;
width: 200%;
height: 92%;
background-color: #1e1e1e;
bottom: 0;
left: -50px;
z-index: -2;
@media (max-width: 1024px) {
height: 100%;
}
}
}
.pxl-video-counter {
position: relative !important;
&:before {
content: '';
position: absolute;
top: 53%;
left: 0;
width: 51.5%;
height: 62%;
background-color: #fafafa;
z-index: -1;
transform: translate(0,-53%);
clip-path: polygon(15% 0%, 100% 0%, 96% 100%, 15% 100%);
@media (max-width: 1199px) {
display: none;
}
}
&:after {
content: '';
position: absolute;
top: 53%;
left: 0;
width: 300%;
height: 62%;
background-color: #f2f3f5;
z-index: -2;
transform: translate(0,-53%);
clip-path: polygon(15% 0%, 100% 0%, 96% 100%, 15% 100%);
@media (max-width: 1199px) {
width: 100%;
height: 100%;
clip-path: unset;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}
.pxl-header-home02-layout1 {
position: relative !important;
&:before {
content: '';
position: absolute;
width: 100%;
height: 135%;
bottom: 0;
left: 0;
z-index: -1;
background-color: $primary_color;
border-radius: 47px 47px 0 0;
}
&:after {
content: '';
position: absolute;
width: 99.4%;
height: 135%;
bottom: 0;
left: 50%;
z-index: -1;
background-color: #1d1b1b;
border-radius: 47px 47px 0 0;
transform: translate(-50%,0);
}
}
.pxl-header-home02-layout2 {
position: relative !important;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background-color: #fff;
clip-path: polygon(1% 0%, 100% 0%, 98% 100%, 0% 100%);
border-radius: 18px 5px 32px 5px;
@include transition(all 0.3s);
}
}
.pxl-content-contact1 {
position: absolute !important;
bottom: -147px;
@media (max-width: 1200px) {
position: relative !important;
bottom: unset;
}
}
.pxl-content-contact2 {
position: absolute !important;
bottom: -92px;
@media (max-width: 1200px) {
position: relative !important;
bottom: unset;
}
}
.pxl-home04-menu1 {
position: relative !important;
&:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 300%;
height: 122%;
background-color: #fff;
border-radius: 0px 0px 50px 0;
}
}
.pxl-home04-menu2 {
position: relative !important;
&:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #161616;
border-radius: 24px 24px 0px 0px;
z-index: -1;
}
}
.pxl-home04-menu3 {
position: relative !important;
&:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 150%;
height: 100%;
background-color: $primary_color;
border-radius: 0px 0px 48px 0px;
z-index: -1;
}
}
.pxl-landing-section1 {
position: relative !important;
&:before {
content: '';
background-image: url(../img/left1.png);
width: 240px;
height: 100%;
z-index: 1;
position: absolute;
top: 0;
left: 0;
background-position: 50%;
background-repeat: no-repeat;
@media (max-width: 991px) {
width: 150px;
}
@media (max-width: 880px) {
display: none;
}
}
&:after {
content: '';
background-image: url(../img/right1.png);
width: 240px;
height: 100%;
z-index: 1;
position: absolute;
top: 0;
right: 0;
background-position: 50%;
background-repeat: no-repeat;
@media (max-width: 991px) {
width: 150px;
}
@media (max-width: 880px) {
display: none;
}
}
}
//pxl-meta
.pxl-meta {
&.pxl-meta1 {
position: relative;
overflow: hidden;
.pxl-item-button {
position: absolute;
top: 52.9%;
left: 78.4%;
transform: translate(-50%, -50%);
@include transition(all 0.1s ease-out);
@media (max-width: 575px) {
display: none;
}
a {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 600;
color: #fff;
@include transition(all 0.3s);
position: relative;
background-color: $primary_color;
@media (max-width: 767px) {
width: 150px;
height: 150px;
font-size: 15px;
}
}
.pxl-link-absolute {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
.pxl-item-inner {
.pxl-item-title {
font-family: Outfit;
font-size: 80px;
font-style: normal;
font-weight: 500;
letter-spacing: -3.2px;
color: $link_color;
line-height: 1.1;
margin-bottom: 42px;
z-index: 1;
position: relative;
@media (max-width: 1024px) {
font-size: 70px;
}
@media (max-width: 880px) {
font-size: 60px;
}
@media (max-width: 767px) {
font-size: 45px;
}
}
.pxl-item-desc {
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
color: #666;
z-index: 1;
position: relative;
}
}
}
}
//pxl-contact-form
.pxl-contact-form1 {
p {
margin: 0;
}
span {
margin: 0 !important;
}
br {
display: none;
}
.contact1 {
background-color: #F6F6F6;
padding: 44px 40px 40px 40px;
@media (max-width: 1199px) {
padding: 44px 20px 40px 20px;
}
.pxl-item-title {
font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.48px;
line-height: 1.2;
color: $link_color;
position: relative;
margin-bottom: 27px;
padding-top: 13px;
@media (max-width: 991px) {
font-size: 22px;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 1px;
background-color: $primary_color;
}
}
input {
height: 50px;
}
textarea {
height: 140px;
padding-top: 13px !important;
padding: 0 35px;
}
input, textarea {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
color: #B0B0B0;
background-color: #fff;
padding: 0;
border: 1px solid #DEDEDE;
border-radius: 0;
padding: 0 35px;
&:focus {
border-color: $primary_color;
color: $link_color;
background-color: #fff !important;
}
}
.pxl-select-higthlight {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
color: #B0B0B0;
background-color: #fff;
padding: 0;
border: 1px solid #DEDEDE;
border-radius: 0;
height: 50px;
padding: 0 35px;
&.active {
border-color: $primary_color;
color: $link_color;
background-color: #fff !important;
}
}
.form {
position: relative;
margin-bottom: 10px;
svg {
position: absolute;
top: 17px;
left: 18px;
fill: $link_color;
z-index: 1;
path {
fill: $link_color;
}
}
}
.pxl-item-message {
margin-bottom: 0;
svg {
position: absolute;
top: 18px;
left: 18px;
fill: $link_color;
transform: none;
path {
fill: $link_color;
}
}
}
.contact-submit {
margin-top: 7px;
.btn-contact7 {
line-height: 48px;
border: 1px solid $link_color;
background-color: #fff;
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
color: $link_color;
padding: 0 29px;
.pxl-icon {
background-color: $primary_color;
margin-left: 0;
margin-right: 10px;
}
&:hover, &:active, &:focus {
padding: 0 44px;
.pxl-icon {
margin-right: 0;
}
}
}
}
}
.contact2 {
.pxl-item-title {
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
color: rgba(#fff, 0.7);
@media (max-width: 1280px) {
font-size: 16px;
}
@media (max-width: 1199px) {
width: 100%;
display: block;
}
}
input {
height: 53px;
}
textarea {
height: 183px;
padding-top: 10px !important;
}
input, textarea {
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
color: #878787;
background-color: unset;
padding: 0;
border: none;
border-bottom: 1px solid rgba(#fff, 0.2);
border-radius: 0;
padding: 0 28px;
padding-bottom: 3px;
position: relative;
z-index: 1;
&:focus {
border-color: #fff;
color: #fff;
background-color: unset !important;
}
}
.pxl-select-higthlight {
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
color: #878787;
background-color: unset;
padding: 0;
border: none;
border-bottom: 1px solid rgba(#fff, 0.2);
border-radius: 0;
padding: 0 28px;
padding-bottom: 3px;
height: 53px;
position: relative;
z-index: 1;
&.active {
border-color: #fff;
color: #fff;
background-color: unset !important;
}
&:before {
width: unset;
height: unset;
right: 0;
font-size: 9px;
top: 45%;
}
}
.form {
position: relative;
margin-bottom: 16px;
svg {
position: absolute;
top: 17px;
left: 15px;
fill: #fff;
z-index: 1;
path {
fill: #fff;
}
}
}
.pxl-item-message {
margin-bottom: 0;
svg {
position: absolute;
top: 17px;
left: 0px;
fill: #fff;
transform: none;
path {
fill: #fff;
}
}
}
.contact-submit {
margin-top: 27px;
p {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
@media (max-width: 1199px) {
display: block;
}
}
.btn-contact7 {
line-height: 60px;
background-color: $primary_color;
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
color: #fff;
padding: 0 31px;
&:hover, &:active, &:focus {
padding: 0 45px 0 46px;
}
@media (max-width: 1199px) {
margin-top: 20px;
}
}
}
}
.contact3 {
display: flex;
align-items: center;
box-shadow: 0px 30px 60px 0px rgba(#000, 0.16);
@media (max-width: 767px) {
display: block;
box-shadow: none;
}
.row {
margin: 0;
width: 76.5%;
@media (max-width: 767px) {
width: 100%;
}
}
.col-lg-6 {
padding: 0;
}
.contact-submit {
width: 23.5%;
@media (max-width: 767px) {
width: 100%;
}
.btn {
background-color: $primary_color;
}
}
.pxl-item {
position: relative;
@media (max-width: 767px) {
margin-bottom: 25px;
}
.wpcf7-not-valid-tip {
position: absolute;
bottom: -28px;
left: 0;
@media (max-width: 767px) {
bottom: -21px;
}
}
.pxl-icon {
position: absolute;
top: 50%;
left: 24px;
transform: translate(0,-50%);
z-index: 1;
i {
color: $link_color;
}
svg {
path {
fill: $link_color;
}
}
}
&.pxl-email {
border-right: 1px solid #ECECEC;
}
input {
@include border-radius(0);
color: #AAA;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
background-color: #fff;
border: none;
padding: 0 42px;
&:focus, &:active {
background-color: #fff !important;
color: $link_color;
}
}
}
}
}
//pxl-banner
.pxl-banner {
&.pxl-banner1 {
.pxl-box-inner {
&.style1 {
min-height: 620px;
position: relative;
.pxl-item--imgprimary {
width: 120%;
height: 100%;
z-index: -3;
position: absolute;
top: 0;
left: 0;
-webkit-animation: an-smoke-1 6s ease-in-out infinite;
-moz-animation: an-smoke-1 6s ease-in-out infinite;
-o-animation: an-smoke-1 6s ease-in-out infinite;
animation: an-smoke-1 6s ease-in-out infinite;
opacity: 0;
img {
width: 100%;
height: 100%;
@media (max-width: 575px) {
width: auto;
max-width: unset;
}
}
}
.ag-smoke__delay-1 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.ag-smoke__delay-2 {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
}
&.style2 {
min-height: 641px;
position: relative;
.pxl-item--imgprimary {
width: 120%;
height: 100%;
z-index: -3;
position: absolute;
top: 0;
right: 0;
-webkit-animation: an-smoke-2 6s ease-in-out infinite;
-moz-animation: an-smoke-2 6s ease-in-out infinite;
-o-animation: an-smoke-2 6s ease-in-out infinite;
animation: an-smoke-2 6s ease-in-out infinite;
opacity: 0;
img {
width: 100%;
height: 100%;
@media (max-width: 575px) {
width: auto;
max-width: unset;
}
}
}
.ag-smoke__delay-1 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.ag-smoke__delay-2 {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
}
&.style3 {
min-height: 589px;
position: relative;
.pxl-item--imgprimary {
width: 100%;
height: 120%;
z-index: -3;
position: absolute;
top: -20%;
left: 0;
-webkit-animation: an-smoke-3 5s ease-in-out infinite;
-moz-animation: an-smoke-3 5s ease-in-out infinite;
-o-animation: an-smoke-3 5s ease-in-out infinite;
animation: an-smoke-3 5s ease-in-out infinite;
opacity: 0;
img {
width: 100%;
height: 100%;
@media (max-width: 1366px) {
width: auto;
max-width: unset;
}
}
}
.ag-smoke__delay-1 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.ag-smoke__delay-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
}
&.style4 {
min-height: 856px;
position: relative;
overflow: hidden;
.pxl-item--imgprimary {
width: 100%;
height: 100%;
z-index: -3;
position: absolute;
top: 0;
left: 0;
-webkit-animation: an-smoke-4 5s ease-in-out infinite;
-moz-animation: an-smoke-4 5s ease-in-out infinite;
-o-animation: an-smoke-4 5s ease-in-out infinite;
animation: an-smoke-4 5s ease-in-out infinite;
opacity: 0;
img {
width: 100%;
height: 100%;
@media (max-width: 1366px) {
width: auto;
max-width: unset;
}
}
}
.ag-smoke__delay-1 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.ag-smoke__delay-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
}
&.style5 {
min-height: 856px;
position: relative;
overflow: hidden;
.pxl-item--imgprimary {
width: 100%;
height: 100%;
z-index: -3;
position: absolute;
top: 0;
left: 0;
-webkit-animation: an-smoke-4 5s ease-in-out infinite;
-moz-animation: an-smoke-4 5s ease-in-out infinite;
-o-animation: an-smoke-4 5s ease-in-out infinite;
animation: an-smoke-4 5s ease-in-out infinite;
opacity: 0;
background-color: $primary_color;
img {
width: 100%;
height: 100%;
mix-blend-mode: multiply;
@media (max-width: 1366px) {
width: auto;
max-width: unset;
}
}
}
.ag-smoke__delay-1 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.ag-smoke__delay-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
}
}
}
}
.pxl-image-wg {
@include transition(all 10ms linear 0ms);
}
//pxl-team-single
.pxl-team-single {
&.pxl-team-single1 {
.pxl-meta-inner {
.col-6 {
@media (max-width: 767px) {
flex: 0 0 100%;
max-width: 100%;
}
}
.pxl-item--imgprimary {
overflow: hidden;
@include border-radius(8px);
@media (max-width: 767px) {
margin-bottom: 30px;
}
}
.pxl-inner-layout2 {
padding-left: 33px;
margin-top: -2px;
@media (max-width: 1199px) {
padding-left: 0;
}
}
.pxl-inner-heading {
.pxl-sub-title {
font-size: 20px;
color: $primary_color;
font-family: 'Inter', sans-serif;
line-height: 1;
margin-bottom: 16px;
@media (max-width: 480px) {
font-size: 18px;
margin-bottom: 13px;
}
}
.pxl-item-heading {
font-size: 40px;
color: $link_color;
font-weight: bold;
margin-bottom: 17px;
@media (max-width: 880px) {
font-size: 35px;
margin-bottom: 13px;
}
@media (max-width: 480px) {
font-size: 30px;
}
}
.pxl-item-desc {
font-size: 17px;
color: #494949;
padding-right: 5px;
line-height: 1.75;
}
}
.pxl-list-inner {
padding-top: 25px;
@media (max-width: 880px) {
padding-top: 20px;
}
.pxl-item {
display: flex;
align-items: center;
margin-bottom: 17px;
&:last-child {
margin-bottom: 0;
}
.pxl-list-sub {
font-size: 17px;
color: $link_color;
font-weight: 500;
width: 21%;
@media (max-width: 991px) {
width: 25%;
}
@media (max-width: 480px) {
width: 35%;
}
}
.pxl-list-title {
font-size: 17px;
font-weight: 400;
color: #494949;
}
}
}
.pxl-item-social {
margin-top: 29px;
@media (max-width: 880px) {
margin-top: 20px;
}
.pxl-title-social {
font-size: 20px;
color: $link_color;
font-weight: bold;
margin-bottom: 16px;
}
.pxl-icon-list {
display: flex;
align-items: center;
a {
width: 42px;
min-width: 42px;
height: 42px;
border: 1px solid #494949;
@include border-radius(50%);
color: #494949;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0px);
@include transition(all 0.3s);
&:last-child {
margin-right: 0;
}
&:hover {
color: $primary_color;
border-color: $primary_color;
transform: translateY(-3px);
}
}
}
}
}
}
}
//pxl-text-animation//
.pxl-text-animation1 {
.pxl-item-inner {
.content-inner {
background-image: linear-gradient(to right, $gradient_color_to, $gradient_color_from, $gradient_color_to, $gradient_color_from);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pxl-item-text {
font-size: 48px;
font-weight: bold;
display: inline-block;
line-height: 1.3;
@extend .ft-heading;
span {
position: relative;
z-index: 1;
i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.pxl-svg-line {
position: absolute;
top: 50%;
left: -23px;
right: 0;
@include transform(translate(0, -50%));
width: 110%;
margin-top: -2px;
height: auto;
fill: none;
stroke-dashoffset: 0;
stroke-dasharray: 3000;
@media (max-width: 767px) {
display: none;
}
}
}
}
}
}
//end//
//pxl-client-carousel//
.pxl-client-carousel1 {
&.style-default {
.pxl-swiper-wrapper {
align-items: center;
}
.pxl-item--inner {
position: relative;
&:hover {
.pxl-item--image {
img {
filter: brightness(0) saturate(0%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0) brightness(0%) contrast(0%);
}
}
}
.pxl-item--image {
cursor: pointer;
text-align: center;
@include transition(all 0.3s);
img {
@include transition(all 0.3s);
}
}
}
}
&.style2 {
.pxl-swiper-wrapper {
align-items: center;
}
.pxl-item--inner {
position: relative;
&:hover {
.pxl-item--image {
img {
filter: none;
}
}
}
.pxl-item--image {
cursor: pointer;
text-align: center;
@include transition(all 0.3s);
img {
@include transition(all 0.3s);
filter: brightness(0) saturate(0%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0) brightness(0%) contrast(0%);
}
}
}
}
&.style3 {
.pxl-swiper-wrapper {
align-items: center;
}
.pxl-swiper-slide {
padding: 0;
}
.pxl-swiper-container {
margin: 0;
border: 1px solid #d9d9d9;
border-left: none;
border-right: none;
}
.pxl-item--inner {
position: relative;
&:before {
content: '';
position: absolute;
width: 1px;
height: 115%;
top: 50%;
right: 0;
background-color: #d9d9d9;
transform: translate(0,-50%);
}
.pxl-item--image {
text-align: center;
align-content: center;
padding: 68px 0;
cursor: pointer;
@media (max-width: 880px) {
padding: 50px 0;
}
@media (max-width: 575px) {
padding: 40px 20px;
}
}
}
}
&.style4 {
.pxl-swiper-wrapper {
align-items: end;
}
.pxl-item--inner {
position: relative;
.pxl-item--image {
cursor: pointer;
text-align: center;
@include transition(all 0.3s);
img {
@include transition(all 0.3s);
}
}
}
}
}
//pxl-text-editor//
.pxl-text-editor {
.pxl-text-style1 {
cite {
font-style: inherit;
color: #005ef9;
}
}
}
//pxl-video-single//
.pxl-video-single {
&.pxl-video-single1 {
.pxl-meta-inner {
.pxl-item-layout1 {
padding: 0 120px 0 100px;
position: relative;
@media (max-width: 1199px) {
padding: 0 50px;
}
@media (max-width: 480px) {
padding: 0 30px;
}
@media (max-width: 360px) {
padding: 0;
}
&:before {
content: '';
position: absolute;
top: 90px;
right: 30px;
mask-image: url(../img/mark-img1.png);
-webkit-mask-image: url(../img/mark-img1.png);
-ms-mask-image: url(../images/mark-img1.png);
-o-mask-image: url(../images/mark-img1.png);
-webkit-mask-repeat: no-repeat;
-ms-mask-repeat: no-repeat;
-o-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-ms-mask-position: center center;
-o-mask-position: center center;
overflow: hidden;
@include transition(all 0.3s);
mask-size: contain;
width: 95px;
height: 110px;
animation: pxl_video_ani_1 10s ease infinite;
background-size: 400% 400%;
background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
z-index: 1;
@media (max-width: 480px) {
display: none;
}
}
}
.pxl-item--imgprimary {
mask-image: url(../img/mark-img1.png);
-webkit-mask-image: url(../img/mark-img1.png);
-ms-mask-image: url(../images/mark-img1.png);
-o-mask-image: url(../images/mark-img1.png);
-webkit-mask-repeat: no-repeat;
-ms-mask-repeat: no-repeat;
-o-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-ms-mask-position: center center;
-o-mask-position: center center;
overflow: hidden;
width: 100%;
height: 100%;
@include transition(all 0.3s);
mask-size: contain;
position: relative;
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 85%;
height: 85%;
background-image: url(../img/shape-video1.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
}
}
.pxl-item-content {
@include border-radius(30px);
overflow: hidden;
background-color: #fff;
box-shadow: 0px 0px 5px 5px rgba(225,225,225,0.2);
margin-top: -170px;
position: relative;
z-index: 2;
@media (max-width: 1200px) {
margin-top: -130px;
}
@media (max-width: 1024px) {
margin-top: 30px;
}
.row {
align-items: center;
}
.pxl-progressbar {
padding-left: 35px;
width: 75%;
padding-top: 43px;
padding-bottom: 40px;
@media (max-width: 1199px) {
padding: 30px 0 25px 20px;
width: 70%;
}
@media (max-width: 575px) {
width: 100%;
}
@media (max-width: 480px) {
padding: 20px 15px;
}
.pxl--item + .pxl--item {
margin-top: 15px;
}
.pxl--item {
.col-6 {
@media (max-width: 575px) {
max-width: 60%;
flex: 60%;
}
@media (max-width: 480px) {
max-width: 100%;
flex: 100%;
}
}
.col-4 {
@media (max-width: 480px) {
max-width: 100%;
flex: 100%;
}
}
.row {
align-items: center;
}
.pxl--meta {
@media (max-width: 480px) {
margin-bottom: 10px;
}
.pxl--title {
color: #1c1c1c;
font-size: 15px;
font-weight: bold;
@extend .ft-heading;
margin-bottom: 0;
@media (max-width: 1200px) {
font-size: 13px;
}
}
}
.pxl-progressbar--wrap {
height: 10px;
background-color: #f4f4f4;
@include border-radius(10px);
.pxl--progressbar {
@include border-radius(10px);
height: 10px;
background: linear-gradient(90deg, #002aff 0%, #07ebff 80%);
position: relative;
}
}
}
}
.pxl-item-video {
position: relative;
@include transition(all 0.3s);
position: absolute;
top: 50%;
right: 0;
max-width: 214px;
transform: translateY(-50%);
height: 100%;
@media (max-width: 1199px) {
max-width: 200px;
}
@media (max-width: 575px) {
position: relative;
top: unset;
right: unset;
transform: unset;
max-width: unset;
display: flex;
justify-content: center;
padding-bottom: 20px;
}
img {
@media (max-width: 575px) {
@include border-radius(30px);
}
}
.pxl-image-video {
position: relative;
overflow: hidden;
height: 100%;
.pxl-space {
position: absolute;
right: 40px;
bottom: 75px;
width: 15px;
height: 15px;
color: #ff5337;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
i {
animation: pxl_spin 10s linear infinite;
}
}
}
.pxl-btn-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 40px;
color: #fff;
z-index: 2;
}
}
}
}
}
}
//pxl-list-meta//
.pxl-list-meta {
&.pxl-list-meta1 {
.pxl-item {
display: block;
border-bottom: 1px solid #DEDEDE;
padding-bottom: 20px;
margin-bottom: 20px;
&:last-child {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.pxl-item-title {
white-space: nowrap;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
color: $link_color;
}
.pxl-item-desc {
word-wrap: break-word;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
color: $secondary_color;
}
}
}
&.pxl-list-meta2 {
.pxl-meta-inner {
.pxl-item {
display: flex;
align-items: center;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.pxl-item-icon {
width: 30px;
min-width: 30px;
height: 30px;
border: 1px solid #DEDEDE;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
svg {
path {
fill: $link_color;
}
}
}
.pxl-item-desc {
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 500;
color: $link_color;
}
}
}
}
&.pxl-list-meta3 {
.pxl-item {
position: relative;
border: 1px solid #DEDEDE;
border-bottom: 0 !important;
padding: 15px 23px;
display: flex;
align-items: center;
justify-content: space-between;
&:last-child {
border-bottom: 1px solid #DEDEDE !important;
}
&:hover {
.pxl-item-arrow {
opacity: 1;
}
}
.pxl-item-content {
display: flex;
align-items: center;
.pxl-item--icon {
padding-top: 3px;
i {
font-size: 20px;
color: $primary_color;
}
svg {
height: 20px;
width: auto;
path {
fill: $primary_color;
}
}
}
.pxl-item--text {
font-family: Outfit;
font-size: 18px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
color: $link_color;
@media (max-width: 1199px) {
font-size: 16px;
}
@media (max-width: 480px) {
font-size: 15px;
}
}
}
.pxl-item-arrow {
color: $link_color;
opacity: 0.3;
font-size: 14px;
@include transition(all 0.3s);
}
}
}
&.pxl-list-meta4 {
border: 1px solid #DEDEDE;
padding: 39px 38px 17px 39px;
@media (max-width: 1199px) {
padding: 39px 20px 17px 20px;
}
.pxl-heading {
font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.48px;
line-height: 1.2;
color: $link_color;
position: relative;
margin-bottom: 27px;
padding-top: 13px;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 1px;
background-color: $primary_color;
}
@media (max-width: 991px) {
font-size: 22px;
}
}
.pxl-item-list {
.pxl-item {
display: flex;
align-items: center;
justify-content: space-between;
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
color: $link_color;
border-top: 1px solid #DEDEDE;
padding: 15px 0;
position: relative;
&:after {
content: '';
width: 0;
height: 1px;
left: 0;
bottom: 0;
position: absolute;
background-color: $primary_color;
opacity: 0;
@include transition(all 0.3s);
}
&:last-child {
&:after {
display: none;
}
}
.pxl-item--icon {
i {
font-size: 15px;
color: $primary_color;
}
svg {
height: 15px;
width: auto;
path {
fill: $primary_color;
}
}
}
.pxl-item-arrow {
color: $link_color;
opacity: 0.3;
@include transition(all 0.3s);
}
&:hover {
&:after {
width: 100%;
opacity: 1;
}
.pxl-item-arrow {
opacity: 1;
}
}
.pxl-item-content {
display: flex;
align-items: center;
}
}
}
}
}
//pxl-list-down//
.pxl-list-down {
&.pxl-list-down1 {
border: 1px solid #f4f5f5;
@include border-radius(30px);
padding: 35px 22px 30px 22px;
@media (max-width: 991px) {
padding: 35px 15px 30px 15px
}
.pxl--item {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 57px;
background-color: #f4f8fe;
@include border-radius(50px);
padding: 8px 10px;
margin-bottom: 30px;
@include transition(all 0.3s);
&:last-child {
margin-bottom: 0;
}
&:hover {
.pxl-item-link {
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
}
.pxl-item--icon {
width: 33px;
min-width: 33px;
height: 40px;
font-size: 18px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
@include border-radius(50px);
background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
}
.pxl-item--content {
line-height: 1;
.pxl-item--text {
color: #080808;
font-family: 'Rubik', sans-serif;
font-size: 18px;
font-weight: 500;
margin-bottom: 0;
@media (max-width: 1024px) {
font-size: 16px;
}
@media (max-width: 991px) {
font-size: 14px;
}
}
.pxl-item--sub {
color: #666666;
font-family: 'Rubik', sans-serif;
font-size: 14px;
}
}
.pxl-item-link {
width: 35px;
height: 35px;
font-size: 17px;
color: #fff;
@include border-radius(50%);
min-width: 35px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
@include transition(all 0.3s);
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
z-index: -1;
opacity: 1;
@include border-radius(50%);
@include transition(all 0.3s);
background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform-origin: center;
z-index: -1;
@include border-radius(50%);
@include transition(all 0.3s);
background: linear-gradient(90deg, #0031ff 0%, #8be6fc 100%);
}
}
}
}
}
//pxl-call//
.pxl-call {
&.pxl-call1 {
.pxl-box-inner {
text-align: center;
.pxl-item--image {
position: relative;
@include border-radius(30px);
overflow: hidden;
z-index: 1;
&:before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 1) 0px -100px 100px 0px inset;
}
.pxl-item-title {
font-weight: bold;
font-size: 20px;
color: #fff;
@extend .ft-heading;
position: absolute;
bottom: 20px;
left: 50%;
line-height: 1.5;
transform: translateX(-50%);
width: 70%;
@media (max-width: 991px) {
font-size: 16px;
}
}
}
.pxl-item-content {
background-color: #f4f8fe;
position: relative;
@include border-radius(0px 0px 30px 30px);
padding: 58px 30px 35px 30px;
margin-top: -6px;
@media (max-width: 991px) {
padding: 50px 20px 35px 20px;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8%;
@include border-radius(0px 0px 30px 30px);
background-color: #fff;
}
.pxl-item-phone {
font-weight: bold;
font-size: 20px;
@extend .ft-heading;
color: #080808;
line-height: 1.3;
margin-bottom: 10px;
}
.pxl-item-map {
color: #666666;
font-size: 14px;
font-family: 'Rubik', sans-serif;
margin-bottom: 13px;
}
.pxl-item-link {
.pxl-btn-tel {
display: inline-block;
line-height: 47px;
padding: 0 38px;
@include border-radius(50px);
font-size: 15px;
color: #fff;
font-weight: bold;
font-family: 'Rubik', sans-serif;
background-size: 290% 400%;
background-image: linear-gradient(to right, #0031ff, #8be6fc, #0031ff, #8be6fc);
&:hover {
background-position: 100% 0;
@include transition(all 0.4s ease-in-out);
}
}
}
}
}
}
}
//pxl-pagination//
.pxl-pagination1 {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
@media (max-width: 480px) {
justify-content: center;
}
.pxl--item {
display: flex;
align-items: center;
@include transition(all 0.3s);
@media (max-width: 480px) {
margin: 15px;
}
&:hover {
.pxl-icon-link {
color: #fff;
&:before {
opacity: 0;
transform: scale(0);
}
&:after {
opacity: 1;
transform: scale(1);
}
}
.pxl-title-inner {
a {
text-decoration: underline;
}
}
}
.pxl-item-icon {
&.pxl-mr-20 {
@media (max-width: 480px) {
margin-right: 10px;
}
}
&.pxl-ml-20 {
@media (max-width: 480px) {
margin-right: 10px;
}
}
}
.pxl-icon-link {
width: 60px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
@include border-radius(20px);
font-size: 20px;
color: #382c4d;
position: relative;
@include transition(all 0.3s);
@media (max-width: 767px) {
width: 50px;
height: 55px;
font-size: 18px;
@include border-radius(15px);
}
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
@include border-radius(20px);
background-color: #e7e7e7;
transform-origin: center;
z-index: -1;
opacity: 1;
transform: scale(1);
@include transition(all 0.3s);
}
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: center;
@include border-radius(20px);
background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
z-index: -1;
opacity: 0;
transform: scale(0);
@include transition(all 0.3s);
}
}
.pxl-title-inner {
a {
font-weight: bold;
font-size: 22px;
color: #050606;
@extend .ft-heading;
@include transition(all 0.3s);
@media (max-width: 767px) {
font-size: 18px;
}
}
}
}
}
// Logo Marquee
.pxl-logo-marquee1 {
position: relative;
overflow: hidden;
direction: ltr;
.pxl-item--marquee {
justify-content: center;
display: flex;
flex-wrap: wrap;
opacity: 0;
}
.pxl-logo-hidden {
flex-wrap: nowrap;
opacity: 0;
visibility: hidden;
white-space: nowrap;
}
.pxl-logo-hidden-wrap {
overflow: hidden;
}
.pxl-logo-active {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
direction: ltr;
.pxl-item--marquee {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
}
.pxl-item--text {
font-size: 60px;
@extend .ft-theme-default;
font-weight: 700;
overflow: hidden;
color: #000;
width: 100%;
position: relative;
}
.pxl-item--logo {
display: inline-flex;
justify-content: center;
width: 100%;
margin: 10px 0;
a {
padding: 0 30px;
box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 0.2);
@include border-radius(15px);
line-height: 117px;
background-color: #fff;
}
}
.pxl-item--inner {
flex-wrap: nowrap;
display: flex;
width: 100%;
}
@media #{$min-xl} {
.col-xl-pxl5 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media #{$mm-lg} {
.col-xl-pxl5 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
}
.pxl-banner-video {
&.pxl-banner-video1 {
.pxl-box-inner {
position: relative;
margin-bottom: 40px;
.pxl-video {
height: 170px;
width: 160px;
min-width: 160px;
z-index: 1;
position: absolute;
bottom: -38px;
left: 65%;
transform: translateX(-50%);
.pxl-btn-video {
mask-image: url(../img/mark-img1.png);
-webkit-mask-image: url(../img/mark-img1.png);
-ms-mask-image: url(../images/mark-img1.png);
-o-mask-image: url(../images/mark-img1.png);
-webkit-mask-repeat: no-repeat;
-ms-mask-repeat: no-repeat;
-o-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-ms-mask-position: center center;
-o-mask-position: center center;
overflow: hidden;
width: 100%;
height: 100%;
@include transition(all 200ms linear 0ms);
mask-size: contain;
position: relative;
display: grid;
align-items: center;
justify-content: center;
background: #fff;
text-align: center;
align-content: center;
font-family: 'Great Vibes', cursive;
&:hover {
.pxl-icon-video {
transform: translateY(-5px);
i {
background-position: 100% 0;
@include transition(all 0.4s ease-in-out);
}
}
}
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
height: 85%;
background-image: url(../img/shape-video2.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
}
.pxl-icon-video {
font-size: 18px;
line-height: 1;
margin-bottom: 3px;
transform: translateY(0px);
@include transition(all 200ms linear 0ms);
i {
background-size: 300% 100%;
background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
background-clip: border-box;
background-clip: border-box;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.pxl-item-text-video {
position: relative;
width: 96px;
height: 20px;
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-image: url(../img/text-video.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
}
}
}
}
}
}
}
// Case Text Carousel
.pxl-text-marquee1 {
&.style1 {
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
position: relative;
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(90deg, rgba(#000, 0.3) 20%, rgba(#000, 1) 100%);
}
.pxl-item--logo {
width: 65px;
min-width: 65px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pxl-item--text {
color: transparent;
padding: 0 20px;
font-size: 180px;
font-weight: 900;
word-spacing: -30px;
line-height: 1;
@extend .ft-theme-default;
position: relative;
&.text-outline {
color: transparent !important;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: $primary_color;
width: 80px;
height: 100%;
}
}
.pxl-item--inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
white-space: nowrap;
}
}
&.style2 {
display: flex;
align-items: center;
overflow: hidden;
width: 100%;
position: relative;
.pxl-item--logo {
width: 65px;
min-width: 65px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pxl-item--text {
color: transparent;
margin: 0 10px;
font-size: 100px;
line-height: 1;
@extend .ft-theme-default;
position: relative;
&.text-outline {
color: transparent !important;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: #DBDBDB;
width: 450%;
height: 100%;
clip-path: polygon(0 0, 22% 0, 100% 100%, 75% 100%);
}
}
.pxl-item--inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
white-space: nowrap;
}
}
}
//pxl-banner-box
.pxl-banner-box {
&.pxl-banner-box1 {
.pxl-meta-inner {
position: relative;
@media (max-width: 767px) {
display: flex;
align-items: center;
}
@media (max-width: 480px) {
display: block;
}
.pxl-item-title {
font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.96px;
color: $primary_color;
position: absolute;
top: 0px;
right: 12.9%;
max-width: 20%;
text-align: center;
line-height: 1;
@media (max-width: 1024px) {
right: 20px;
}
@media (max-width: 880px) {
display: none;
}
}
.pxl-item--imgprimary {
margin-right: 370px;
z-index: 2;
position: relative;
@media (max-width: 1280px) {
margin-right: 270px;
}
@media (max-width: 1024px) {
margin-right: 170px;
}
@media (max-width: 880px) {
margin-right: 100px;
}
@media (max-width: 767px) {
margin-right: 15px;
}
@media (max-width: 480px) {
margin-right: 0;
margin-bottom: 15px;
}
.pxl-item-svg {
position: absolute;
top: 44%;
right: -18%;
transform: translate(0,-50%);
.pxl-image-wg {
width: 106px;
height: 106px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: $primary_color;
@media (max-width: 1024px) {
display: none;
}
}
svg {
path {
fill: #fff;
}
}
}
.pxl-img1 {
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
}
}
.pxl-item--imgsecondary {
position: relative;
margin-top: -202px;
margin-left: 260px;
@media (max-width: 1024px) {
margin-top: -102px;
margin-left: 160px;
}
@media (max-width: 880px) {
margin-left: 100px;
}
@media (max-width: 767px) {
margin-left: 15px;
margin-top: 0;
}
@media (max-width: 480px) {
margin-left: 0;
margin-top: 15px;
}
.pxl-item-svg2 {
position: absolute;
top: -21.5%;
left: 23%;
@media (max-width: 1024px) {
display: none;
}
}
.pxl-item-svg3 {
position: absolute;
bottom: 17%;
left: -52%;
@media (max-width: 1024px) {
display: none;
}
}
.pxl-img2 {
z-index: 1;
position: relative;
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
}
}
}
}
}
//pxl-mailchimp-from
.pxl-mailchimp-from1 {
.style-default {
input {
@include border-radius(0);
background-color: unset;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
border: none;
color: #999;
border-bottom: 1px solid #DEDEDE;
padding: 0 25px 7px 24px;
z-index: 1;
position: relative;
&:focus {
color: $link_color;
background-color: unset !important;
border-color: $primary_color;
}
}
.pxl-mailchimp {
position: relative;
.mailchimp-submit {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
height: 100%;
}
svg {
height: 18px;
position: absolute;
top: 16px;
left: 0px;
width: auto;
}
}
.pxl-mailchimp-btn {
background-color: unset;
padding: 0;
font-size: 20px;
color: $link_color;
padding-bottom: 7px;
}
}
}
//pxl-contact-custom
.pxl-contact-custom {
.pxl-section-effect-images {
.pxl-item--image {
z-index: -1;
@media (max-width: 1800px) {
display: none;
}
}
}
}
//pxl-icon-custom
.pxl-icon-home01 {
@media (max-width: 1366px) {
position: relative !important;
top: 0 !important;
left: 0 !important;
}
}
//pxl-title-portfolio
.pxl-title-portfolio {
.pxl-heading {
.pxl-item--title {
@media (max-width: 1200px) {
color: #000 !important;
}
}
}
}
//pxl-title-page01
.pxl-title-page01 {
.pxl-text-editor {
a {
@media (max-width: 991px) {
color: #000 !important;
}
}
}
}
.pxl-text-custom1 {
&.style1 {
.pxl-text-inner {
display: inline-block;
background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
background-clip: border-box;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pxl-item-title {
font-size: 36px;
font-weight: bold;
font-family: 'Inter', sans-serif;
line-height: 1.1;
}
}
&.style2 {
.pxl-text-inner {
display: inline-block;
background: linear-gradient(100deg, $gradient_color_from 0.51%, $gradient_color_to 100%);
background-clip: border-box;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pxl-item-title {
font-size: 36px;
font-weight: bold;
font-family: 'Inter', sans-serif;
line-height: 1.1;
}
}
}
//pxl-swiper-arrow-wrap
//style-4
.pxl-swiper-arrow-wrap {
&.style-4 {
.pxl-swiper-arrow {
width: 45px;
height: 45px;
margin: 8px;
border: 3px solid #ffffff;
@include border-radius(50%);
background-color: unset;
box-shadow: 0px 0px 5px 5px rgba(210, 210, 210, 0.10);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 25px;
@include transition(all 0.3s);
&:hover {
background-color: #fff;
color: $link_color;
box-shadow: 0px 0px 10px 10px rgba(13, 125, 252, 0.10);
}
}
}
}
//pxl-test-carousel
.pxl-test-carousel1 {
.pxl-swiper-container {
padding: 0 5px;
}
.pxl-swiper-arrow-wrap {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
justify-content: space-between;
transition: all .3s;
width: 108%;
z-index: 1;
@media (max-width: 1250px) {
position: relative;
top: unset;
left: unset;
transform: unset;
width: unset;
justify-content: center;
margin-top: 20px;
}
.pxl-swiper-arrow {
@media (max-width: 1250px) {
margin: 10px;
}
}
.pxl-swiper-arrow-prev {
position: absolute;
left: 0;
@media (max-width: 1250px) {
position: relative;
}
}
.pxl-swiper-arrow-next {
position: absolute;
right: 0;
@media (max-width: 1250px) {
position: relative;
}
}
}
.pxl-item--inner {
@include transition(all 0.3s);
&:hover {
.pxl-item--image {
.pxl-item-icon {
i {
background: linear-gradient(100deg, #ff762a 0.51%, #ffc712 100%);
background-clip: border-box;
background-clip: border-box;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.pxl-item-content {
&:before {
opacity: 0;
transform: scaleX(0);
}
&:after {
opacity: 1;
transform: scaleX(1);
}
.pxl-item--desc {
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.pxl-item--holder {
.pxl-item--title {
color: #fff;
}
.pxl-sub-title {
color: #fff;
}
}
}
}
.pxl-item--image {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px 0 43px;
margin-bottom: -45px;
@include transition(all 0.3s);
@media (max-width: 1024px) {
padding: 0px 20px 0px 20px;
}
img {
@include border-radius(50%);
}
.pxl-item-icon {
font-size: 60px;
@include transition(all 0.3s);
line-height: 1;
i {
display: inline-block;
background: linear-gradient(100deg, #d5d5d9 0.51%, #d5d5d9 100%);
background-clip: border-box;
background-clip: border-box;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transform: rotate(180deg);
@include transition(all 0.3s);
}
}
}
.pxl-item-content {
padding: 50px 30px 20px 40px;
position: relative;
@include border-radius(30px);
margin: 10px 0;
@include transition(all 0.3s);
@media (max-width: 1024px) {
padding: 50px 20px 20px 20px;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
box-shadow: 0px 0px 5px 5px rgba(210, 210, 210, 0.2);
@include border-radius(30px);
opacity: 1;
transform-origin: center;
z-index: -1;
@include transition(all 0.3s);
transform: scaleX(1);
}
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
background: linear-gradient(100deg, #fb009f 0.51%, #6900fd 100%);
width: 100%;
height: 100%;
@include border-radius(30px);
opacity: 0;
z-index: -1;
transform-origin: center;
@include transition(all 0.3s);
transform: scaleX(0);
}
.pxl-item--desc {
color: #0e0d0f;
font-size: 16px;
font-family: 'Inter', sans-serif;
border-bottom: 1px solid #e1e0e0;
padding-bottom: 17px;
margin-bottom: 12px;
@include transition(all 0.3s);
}
.pxl-item--holder {
display: flex;
align-items: center;
justify-content: space-between;
@include transition(all 0.3s);
.pxl-item--title {
color: #0e0d0f;
font-size: 16px;
font-weight: bold;
font-family: 'Poppins', sans-serif;
margin-bottom: 0;
@include transition(all 0.3s);
}
.pxl-sub-title {
color: #a5a4a4;
font-size: 15px;
font-family: 'Barlow', sans-serif;
font-weight: 400;
line-height: 1.2;
@include transition(all 0.3s);
}
.pxl-item--star {
display: flex;
align-items: center;
font-size: 15px;
}
}
}
}
}
.pxl-test-carousel2 {
.pxl-carousel-inner {
margin: 0 -15px;
}
.pxl-swiper-arrow-wrap {
width: 45%;
float: right;
justify-content: unset;
margin-top: 0;
position: absolute;
bottom: 130px;
right: 0;
z-index: 1;
padding-left: 55px;
@media (max-width: 1024px) {
padding-left: 35px;
bottom: 30px;
}
@media (max-width: 880px) {
position: relative;
width: 100%;
padding-left: 0;
bottom: 0;
}
.pxl-swiper-arrow {
margin-right: 20px;
font-size: 20px;
color: #57acfa;
&:last-child {
margin-right: 0;
}
&:hover {
color: #fff;
}
@media (max-width: 1880px) {
&:hover {
color: #57acfa;
}
}
}
}
.pxl-item--inner {
display: flex;
flex-wrap: wrap;
padding-top: 40px;
padding-bottom: 255px;
@media (max-width: 1024px) {
padding-bottom: 100px;
}
@media (max-width: 880px) {
padding-bottom: 30px;
padding-top: 0;
}
.pxl-block--left {
width: 55%;
position: relative;
margin-top: -40px;
margin-bottom: -255px;
@media #{$max-sm} {
width: 100%;
height: 320px;
}
@media (max-width: 880px) {
display: none;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 5px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-image: url(../img/bg-light1.png);
@include transition(all 0.3s);
z-index: 1;
@media (max-width: 1280px) {
left: 0;
}
}
.pxl-shape-bg {
mask-image: url(../img/shape-test2.png);
-webkit-mask-image: url(../img/shape-test2.png);
-ms-mask-image: url(../images/shape-test2.png);
-o-mask-image: url(../images/shape-test2.png);
-webkit-mask-repeat: no-repeat;
-ms-mask-repeat: no-repeat;
-o-mask-repeat: no-repeat;
width: 100%;
height: 100%;
-webkit-mask-position: top left;
-ms-mask-position: top left;
-o-mask-position: top left;
overflow: hidden;
@include transition(all 0.3s);
mask-size: contain;
position: relative;
}
.pxl-banner--image {
@extend .pxl-spill;
right: 10px;
width: auto;
@media #{$max-sm} {
right: 0;
}
}
+ .pxl-block--right {
width: 45%;
@media (max-width: 880px) {
width: 100%;
}
}
}
.pxl-block--right {
.pxl-right-inner {
padding-left: 55px;
@media (max-width: 1024px) {
padding-left: 30px;
}
@media (max-width: 880px) {
padding-left: 0;
}
}
.pxl-heading {
margin-bottom: 90px;
@media (max-width: 1200px) {
margin-bottom: 50px;
}
.pxl-widget--desc {
font-size: 20px;
font-weight: 500;
color: #000000;
position: relative;
font-family: 'Inter', sans-serif;
position: relative;
padding-left: 50px;
margin-bottom: 20px;
&:before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 20px;
height: 20px;
transform: rotate(45deg);
background: linear-gradient(50deg, rgba(99,222,247, 1) 30%, rgba(134,159,224, 1) 100%);
}
&:after {
content: '';
position: absolute;
left: 15px;
top: 5px;
width: 20px;
height: 20px;
transform: rotate(45deg);
background: linear-gradient(50deg, rgba(99,222,247, 0.6) 30%, rgba(134,159,224, 1) 100%);
}
}
.pxl-widget--title {
font-size: 60px;
font-weight: bold;
color: #000;
@extend .ft-heading;
line-height: 1;
margin-bottom: 0;
@media (max-width: 1200px) {
font-size: 50px;
}
@media (max-width: 1024px) {
font-size: 40px;
}
@media (max-width: 767px) {
font-size: 30px;
}
}
}
.pxl-item--image {
mask-image: url(../img/shape-bg1.png);
-webkit-mask-image: url(../img/shape-bg1.png);
-ms-mask-image: url(../images/shape-bg1.png);
-o-mask-image: url(../images/shape-bg1.png);
-webkit-mask-repeat: no-repeat;
-ms-mask-repeat: no-repeat;
-o-mask-repeat: no-repeat;
-webkit-mask-position: top left;
-ms-mask-position: top left;
-o-mask-position: top left;
overflow: hidden;
-webkit-transition: all 0.3s;
-khtml-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
mask-size: auto;
position: relative;
}
.pxl-item-content {
position: relative;
z-index: 1;
background-color: #fff;
@include border-radius(30px);
.pxl-item-icon {
position: absolute;
right: 0;
bottom: 0;
font-size: 200px;
line-height: 0.6;
z-index: -1;
i {
transform: rotate(180deg);
display: inline-block;
background-size: 300% 100%;
background-image: linear-gradient(to right, #f0ebfb, #e5f8ff, #f0ebfb, #e5f8ff);
background-clip: border-box;
background-clip: border-box;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 220ms linear 0ms;
-khtml-transition: all 220ms linear 0ms;
-moz-transition: all 220ms linear 0ms;
-ms-transition: all 220ms linear 0ms;
-o-transition: all 220ms linear 0ms;
transition: all 220ms linear 0ms;
}
}
}
.pxl-item--desc {
color: #000000;
font-size: 20px;
font-weight: 400;
margin-top: 25px;
margin-bottom: 23px;
max-width: 58%;
@media (max-width: 1280px) {
max-width: 100%;
}
}
.pxl-item--title {
margin-bottom: 0;
font-size: 24px;
font-weight: 700;
@extend .ft-heading;
color: $primary_color;
font-style: italic;
}
.pxl-sub-title {
font-size: 16px;
font-weight: bold;
@extend .ft-heading;
font-style: italic;
line-height: 1;
color: #7d7d7d;
}
}
}
}
//pxl-image-list
.pxl-image-list {
&.pxl--image-list1 {
&.style-default {
display: flex;
align-items: center;
.pxl--item {
display: flex;
align-items: center;
position: relative;
@include transition(all 0.3s);
.pxl-image {
@include border-radius(50%);
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
&:nth-child(1) {
margin-left: 0px;
}
&:nth-child(2) {
z-index: 2;
margin-left: -30px;
animation-delay: 300ms !important;
}
&:nth-child(3) {
margin-left: -30px;
z-index: 3;
animation-delay: 500ms !important;
}
}
}
&.style2 {
display: flex;
align-items: center;
.pxl--item {
display: flex;
align-items: center;
position: relative;
@include transition(all 0.3s);
.pxl-image {
@include border-radius(50%);
overflow: hidden;
border: 3px solid $link_color;
z-index: 1;
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
}
&:nth-child(1) {
margin-left: 0px;
}
&:nth-child(2) {
z-index: 2;
margin-left: -30px;
animation-delay: 300ms !important;
}
&:nth-child(3) {
margin-left: -30px;
z-index: 3;
animation-delay: 500ms !important;
}
}
}
}
}
//pxl-carousel-custom
.pxl-carousel-custom1 {
.pxl-carousel-inner {
position: relative;
.pxl-swiper-arrow-wrap {
margin: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
z-index: 1;
@media (max-width: 480px) {
position: unset;
transform: unset;
margin-top: 20px;
justify-content: flex-start;
}
.pxl-swiper-arrow {
width: 43px;
height: 43px;
border-radius: 50%;
background-color: #4a4a4a;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 3px;
&:hover {
background-color: $primary_color;
}
}
}
}
.pxl-item--inner {
display: flex;
align-items: center;
@media (max-width: 480px) {
display: block;
}
.pxl-item--image {
border-radius: 4px;
overflow: hidden;
@media (max-width: 480px) {
margin-bottom: 15px;
}
}
.pxl-item--title {
font-size: 19px;
color: #faece9;
font-weight: 400;
font-family: "Barlow Semi Condensed";
max-width: 75%;
line-height: 1.2;
@media (max-width: 480px) {
max-width: 100%;
}
}
}
}
.pxl-carousel-custom2 {
.pxl-item--image {
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
transform: scale(0.7);
width: 100px;
height: 100px;
margin: 0 auto;
border: 2px solid #ececec;
display: flex;
align-items: center;
justify-content: center;
@include border-radius(50%);
img {
width: auto !important;
}
}
.pxl-item--desc {
font-size: 23px;
color: $link_color;
font-weight: 400;
max-width: 85%;
margin: 0 auto;
margin-top: 24px;
@media (max-width: 480px) {
font-size: 18px;
margin-top: 15px;
max-width: 100%;
}
}
.pxl-item--title {
font-size: 24px;
color: $link_color;
font-weight: 700;
margin-bottom: 3px;
}
.swiper-slide-thumb-active {
.pxl-item--image {
transform: scale(1);
z-index: 1;
position: relative;
@include border-radius(50%);
@media (max-width: 767px) {
border: none;
box-shadow: unset;
}
@media #{$max-xs} {
transform: scale(1);
}
}
}
.pxl-item--inner {
text-align: center;
max-width: 990px;
margin: auto;
}
.pxl-swiper-thumbs {
max-width: 470px;
margin: 0 auto;
padding: 25px 0px;
z-index: 5;
position: relative;
@media (max-width: 575px) {
display: none;
}
}
.pxl-swiper-arrow.pxl-swiper-arrow-prev {
@media #{$max-lg} {
left: 0;
}
}
.pxl-swiper-arrow.pxl-swiper-arrow-next {
@media #{$max-lg} {
right: 0;
}
}
.pxl-swiper-dots {
margin-top: 60px;
}
}
//pxl-box-list
.pxl-box-list {
&.pxl-box-list1 {
display: flex;
align-items: center;
justify-content: space-between;
background-color: $primary_color;
padding: 55px 20px 62px 20px;
@include border-radius(50px);
position: relative;
overflow: hidden;
@media (max-width: 1024px) {
padding: 35px 15px 35px 15px;
}
@media (max-width: 676px) {
display: block;
text-align: center;
}
.pxl-item-shape {
position: absolute;
width: 150px;
top: -20%;
left: -10%;
height: 150px;
@include border-radius(50%);
background-size: 350% 100%;
background-image: linear-gradient(to right, $gradient_color_to, $gradient_color_from, $gradient_color_to, $gradient_color_from);
animation: movement 10s linear infinite;
@media (max-width: 880px) {
display:none;
}
}
.pxl-item-inner {
display: flex;
align-items: center;
padding: 0 23px;
z-index: 2;
@media (max-width: 1024px) {
padding: 0 15px;
}
@media (max-width: 991px) {
display: unset;
}
}
.pxl-image {
&.pxl-mr-28 {
@media (max-width: 991px) {
margin-right: 0;
}
}
margin-bottom: 20px;
img {
max-width: 65px;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(95deg) brightness(103%) contrast(102%);
@media (max-width: 1024px) {
max-width: 55px;
}
}
}
.pxl-item-title {
font-size: 24px;
font-weight: bold;
color: #fff;
margin-bottom: 10px;
@media (max-width: 1199px) {
font-size: 20px;
}
}
.pxl-item-desc {
font-size: 15px;
color: #d5cceb;
}
}
}
//pxl-text-video
.pxl-text-video {
&.pxl-text-video1 {
.pxl-meta-inner {
display: flex;
align-items: center;
.pxl-inner-video {
.pxl-btn-video {
width: 50px;
min-width: 50px;
height: 50px;
@include border-radius(50%);
background-color: #278eef;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #fff;
padding: 1px 0 0 4px;
@include transition(all 0.3s);
&:hover {
background-color: #6d34d2;
}
}
}
.pxl-item-title {
font-size: 15px;
font-weight: bold;
color: #278eef;
@extend .ft-heading;
}
}
}
}
//pxl-service-custom
.pxl-service-custom {
&.pxl-service-custom1 {
.pxl-box-inner {
@include transition(all 0.3s);
&:hover {
.pxl-item--imgprimary {
background-position: 100% 0;
@include transition(all 0.4s ease-in-out);
}
.pxl-img-title {
&:before {
background-position: 100% 0;
@include transition(all 0.4s ease-in-out);
}
}
}
.pxl-img-title {
display: flex;
position: relative;
padding-bottom: 23px;
@include transition(all 0.3s);
margin-bottom: 30px;
@media (max-width: 880px) {
margin-bottom: 20px;
}
&:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
left: 0;
bottom: 0;
background-size: 300% 100%;
background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
}
}
.pxl-item--imgprimary {
width: 53px;
min-width: 53px;
height: 53px;
display: flex;
@include transition(all 0.3s);
align-items: center;
justify-content: center;
@include border-radius(15px);
background-size: 300% 100%;
background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
img {
filter: invert(99%) sepia(2%) saturate(131%) hue-rotate(155deg) brightness(118%) contrast(100%);
}
}
.pxl-item-title {
font-size: 22px;
font-weight: bold;
line-height: 1.2;
@extend .ft-heading;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
@media (max-width: 880px) {
font-size: 20px;
}
a {
color: #212456;
&:hover {
color: $primary_color;
}
}
}
.pxl-item-desc {
font-size: 18px;
color: #474747;
line-height: 1.6;
@extend .ft-heading;
@media (max-width: 880px) {
font-size: 16px;
}
}
}
}
}
// Showcase Grid
.pxl-mega-menu .pxl-showcase-grid1 .pxl-grid-inner {
height: auto !important;
.pxl-grid-item {
position: static !important;
@media (max-width: 1199px) {
max-width: 100% !important;
flex: 100% !important;
}
}
.grid-sizer {
display: none;
}
}
.pxl-showcase-grid {
text-align: center;
.pxl-item--image {
position: relative;
overflow: hidden;
border-radius: 5px;
@include box-shadow(0 10px 20px rgba(#8997BA, 0.25));
margin-bottom: 25px;
&:before {
@extend .pxl-spill;
background-color: #1C2539;
@include transition(all 250ms linear 0ms);
opacity: 0;
}
}
.pxl-item--buttons {
position: absolute;
top: 50%;
left: 0;
right: 0;
@include transform(translate(0, -50%));
z-index: 99;
.btn {
color: #fff !important;
line-height: 44px;
padding: 0 30px;
font-size: 15px;
@include border-radius(30px);
margin: 5px 0px;
font-weight: bold;
@extend .ft-heading;
background-size: 300% 100%;
background-image: linear-gradient(to right, $gradient_color_from, $gradient_color_to, $gradient_color_from, $gradient_color_to);
&:hover {
color: #fff !important;
background-position: 100% 0;
@include transition(all 0.4s ease-in-out);
}
}
.pxl-item--button {
transform: translateY(-40px);
opacity: 0;
@include transition(all 250ms linear 0ms);
}
}
.pxl-item--title {
font-size: 18px;
font-weight: 700;
margin-bottom: 0;
color: #fff;
a {
font-size: inherit;
font-family: inherit;
font-weight: inherit;
}
}
.pxl-item--inner {
@media (max-width: 1200px) {
margin-bottom: 30px;
}
border-radius: 5px;
&.style-2 {
.pxl-item--image {
position: relative;
&:before {
display: none;
}
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(48,49,66,.5);
backdrop-filter: blur(15px);
}
}
}
&:hover {
.pxl-item--buttons .pxl-item--button {
transform: translateY(0px);
opacity: 1;
}
.pxl-item--image:before {
opacity: 0.67;
}
}
}
}
.pxl-logo-box {
&.style1 {
a {
background-color: #fff;
filter: drop-shadow(0px 30px 30px rgba(#000,0.04));
@include border-radius(4px);
display: block;
z-index: 5;
position: relative;
padding: 45px 45px 38px 45px;
overflow: hidden;
&:after {
content: '';
position: absolute;
height: 4px;
bottom: 0;
left: 0;
width: 100%;
background-color: $primary_color;
}
}
}
&.style2 {
a {
background-color: #323232;
position: relative;
overflow: hidden;
display: block;
padding: 39px 32px 22px 33px;
}
}
}
// Widget Search Icon
//--------------------------------------------------
.pxl-search-popup-button, .pxl-cart-sidebar-button {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
@include transition(color 0.3s ease, transform 0.3s ease);
cursor: pointer;
font-size: 30px;
position: relative;
svg {
fill: #fff;
path {
fill: #fff;
}
}
&:hover {
color: $primary_color;
svg {
fill: $primary_color;
path {
fill: $primary_color;
}
}
}
}
.pxl-cart-sidebar-button {
svg {
fill: #1b1d21;
height: 24px;
width: inherit;
}
}
.pxl-search-popup-button {
&.style-box {
width: 47px;
height: 47px;
background-color: #009688;
line-height: 47px;
color: #fff;
font-size: 20px;
}
}
//pxl-couner-banner
.pxl-couner-banner {
&.pxl-couner-banner1 {
.pxl-counter--inner {
position: relative;
.pxl-inner-image {
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
}
.pxl-counter--meta {
position: absolute;
bottom: 20px;
left: 20px;
background-color: #fff;
padding: 32px 15px 19px 20px;
max-width: 120px;
.pxl-counter--number {
font-family: Outfit;
font-size: 40px;
font-style: normal;
font-weight: 500;
letter-spacing: -1.6px;
color: $link_color;
display: flex;
align-items: center;
line-height: 1;
margin-bottom: 2px;
}
.pxl-counter--prefix, .pxl-counter--suffix {
color: $primary_color;
}
.pxl-counter--title {
font-family: Outfit;
font-size: 12px;
font-style: normal;
font-weight: 500;
text-transform: uppercase;
color: #666;
}
}
}
}
}
//pxl-title-box
.pxl-title-box {
&.pxl-title-box1 {
.pxl-image-wg {
filter: drop-shadow(0px 8px 21.5px rgba(#000,0.21));
}
.pxl-meta-inner {
display: inline-flex;
clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%);
width: 196px;
min-width: 196px;
height: 227px;
position: relative;
background-color: $gradient_color_from;
text-align: center;
.pxl-item-clip {
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
clip-path: polygon(50% 0, 50% 0, 100% 25%, 110% 70%, 50% 100%, 50% 100%, 0 75%, 0 25%);
background-color: #fff;
padding-top: 38px;
}
.pxl-item-conent {
padding: 0 10px 17px 10px;
margin-bottom: 5px;
border-bottom: 3px solid $gradient_color_from;
}
.pxl-sub-title {
font-size: 13px;
color: #ffffff;
font-weight: 500;
font-family: 'Inter', sans-serif;
line-height: 25px;
background-color: $primary_color;
@include border-radius(5px);
padding: 0 17px;
display: inline-block;
margin-bottom: 10px;
}
.pxl-item-title {
font-size: 22px;
color: $link_color;
font-weight: 700;
line-height: 1.05;
}
.pxl-conent-number {
display: inline-flex;
align-items: center;
font-size: 26px;
color: #151f35;
font-weight: 700;
}
}
}
}
//pxl-gallery
.pxl-gallery-layout {
&.pxl-gallery-1 {
.item--inner {
position: relative;
@include transition(all 0.5s);
margin-bottom: 30px;
&:hover {
a {
&:before {
opacity: 1;
}
&:after {
opacity: 1;
}
img {
opacity: 0.7;
transform: scale(1.05);
}
}
}
a {
width: 100%;
display: block;
height: 100%;
z-index: 1;
position: relative;
@include border-radius(5px);
overflow: hidden;
@include transition(all 0.5s);
background-color: $link_color;
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 2px;
background-color: #fff;
transform: translate(-50%,-50%);
opacity: 0;
@include transition(all 0.3s);
z-index: 1;
}
&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 30px;
background-color: #fff;
transform: translate(-50%,-50%);
opacity: 0;
@include transition(all 0.3s);
}
img {
@include transition(all 0.3s);
}
}
}
}
}
//pxl-process
.pxl-process {
.pxl-swiper-container {
margin: 0 -10px;
}
.pxl-swiper-slide {
padding: 0 10px;
}
&.pxl-process-layout1 {
.pxl-item--inner {
.pxl-item--image {
@include border-radius(4px);
overflow: hidden;
position: relative;
.pxl-item--number {
font-size: 44px;
color: #fff;
font-weight: 800;
line-height: 1;
position: absolute;
bottom: -11px;
left: 16px;
}
}
.pxl-item--holder {
.pxl-item--title {
margin-bottom: 11px;
margin-top: 23px;
font-size: 20px;
font-weight: 600;
}
.pxl-item--desc {
font-size: 15px;
color: #494949;
}
}
}
}
}
//pxl-meta-grid
.pxl-meta-grid1 {
.pxl-item--inner {
background-color: #F6F6F6;
@include border-radius(8px);
padding: 19px 20px 21px 30px;
.pxl-item--icon {
font-size: 40px;
color: $primary_color;
line-height: 1;
padding-left: 15px;
padding-top: 10px;
margin-bottom: 10px;
position: relative;
z-index: 1;
&:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 40px;
height: 40px;
background-color: #fff;
@include border-radius(50%);
transform: translate(0,-50%);
z-index: -1;
}
svg {
height: 40px;
path {
fill: $primary_color;
}
}
}
.pxl-item--holder {
.pxl-item--title {
margin-bottom: 9px;
font-size: 20px;
font-weight: 600;
}
.pxl-item--desc {
font-size: 15px;
font-weight: 400;
color: #494949;
}
}
}
}
.pxl-meta-grid2 {
.pxl-item--inner {
border-top: 1px solid #9F9F9F;
border-left: 1px solid #9F9F9F;
@include border-radius(12px);
margin-bottom: 30px;
padding: 15px 0 0 15px;
.pxl-item--holder {
background-color: #fff;
@include border-radius(12px);
padding: 42px 40px 40px 40px;
.pxl-item--title {
font-size: 24px;
font-weight: 600;
color: $link_color;
margin-bottom: 20px;
}
.pxl-item--desc {
color: #444;
font-size: 18px;
@media (max-width: 1280px) {
font-size: 16px;
}
}
}
}
}
//search form
.search-form {
.searchform-wrap {
position: relative;
.search-field {
padding-right: 60px;
}
.search-submit {
height: 54px;
width: 54px;
font-weight: 700;
background-color: var(--primary-color);
-webkit-transition: all 300ms linear 0ms;
-khtml-transition: all 300ms linear 0ms;
-moz-transition: all 300ms linear 0ms;
-ms-transition: all 300ms linear 0ms;
-o-transition: all 300ms linear 0ms;
transition: all 300ms linear 0ms;
top: 50%;
right: 0;
@include border-radius(0);
padding: 0;
position: absolute;
color: #fff;
z-index: 1;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
i {
line-height: 1;
background-color: unset;
color: #fff;
font-size: 14px;
width: 14px;
height: 14px;
svg {
path {
fill: #fff;
}
}
}
}
}
}
//pxl-image-single
.pxl-image-single {
&.style_img2 {
.pxl-item--inner {
.bg-image {
background-color: #d9d9d9;
mix-blend-mode: luminosity;
}
.pxl-item--image {
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
}
}
}
.pxl-item--inner {
overflow: hidden;
.bg-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -60px;
}
}
&.style_img3 {
position: relative;
&:after {
content: '';
width: 500px;
height: 500px;
position: absolute;
top: -29.5%;
right: -20.8%;
border-radius: 50%;
border: 1px solid $primary_color;
@media (max-width: 991px) {
display: none;
}
}
.pxl-item--inner {
position: relative;
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 40%, #fff 100%);
z-index: 1;
}
.bg-image {
background-color: #d9d9d9;
mix-blend-mode: luminosity;
}
.pxl-item--image {
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
}
}
}
}
//pxl-career-grid
.pxl-career-grid1 {
.pxl-item--inner {
border: 1px solid #DBDBDB;
@include border-radius(8px);
padding: 32px 20px 24px 28px;
position: relative;
overflow: hidden;
.pxl-link-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover {
.pxl-item--icon {
color: $primary_color
}
}
.pxl-item--icon {
font-size: 50px;
line-height: 1;
color: $link_color;
@include transition(all .3s);
}
.pxl-item--holder {
margin-top: 15px;
.pxl-item--title {
margin-bottom: 17px;
font-size: 22px;
font-weight: 600;
@include transition(all .3s);
position: relative;
z-index: 1;
}
.pxl-item--desc {
font-size: 16px;
color: #494949;
}
}
}
}
//pxl-apply-list
.pxl-apply-list1 {
.pxl-item {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #DBDBDB;
padding-top: 36px;
padding-bottom: 46px;
@media (max-width: 880px) {
display: block;
}
&:last-child {
border-bottom: 1px solid #DBDBDB;
}
.pxl-address-time {
display: flex;
align-items: end;
@media (max-width: 1024px) {
display: block;
}
}
.pxl-item-boder {
position: relative;
padding-right: 65px;
@media (max-width: 1199px) {
padding-right: 50px;
}
@media (max-width: 880px) {
padding-right: 0;
&:after {
display: none;
}
}
&:after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 2px;
height: 77px;
transform: translate(0,-50%);
background: radial-gradient(circle at 0%, #DBDBDB, #DBDBDB 0%, #fff 75%, #DBDBDB 1000%);
}
}
.pxl-address-time {
.pxl-title-address {
font-size: 24px;
font-weight: 600;
color: $link_color;
margin-bottom: 11px;
@media (max-width: 880px) {
font-size: 20px;
}
}
.pxl-sub-address {
font-size: 16px;
color: #494949;
padding-left: 4px;
@media (max-width: 880px) {
padding-left: 0;
}
i {
color: $link_color;
}
}
.pxl-item-time {
font-size: 16px;
color: #494949;
margin-left: 32px;
margin-bottom: 3px;
@media (max-width: 1024px) {
margin-left: 0;
margin-bottom: 0;
margin-top: 15px;
}
i {
color: $link_color;
}
}
}
.sub-style {
font-size: 16px;
color: #494949;
margin-top: 9px;
}
.title-style {
font-size: 20px;
color: $link_color;
}
.pxl-item-button {
@media (max-width: 880px) {
margin-top: 20px;
}
.btn {
background-color: unset;
border: 2px solid #494949;
border-radius: 6px;
color: #494949;
line-height: 52px;
i {
background-color: #494949;
color: #fff;
}
&:hover {
background-color: $primary_color;
border-color: $primary_color;
color: #fff;
i {
background-color: #fff;
color: $link_color;
}
}
}
}
}
}
//pxl-career-single
.pxl-career-single {
padding: 5px;
.pxl-item--image {
position: relative;
&:before {
content: '';
background: linear-gradient(rgba(#000, 1), rgba(#fff,0.01));
width: 100%;
height: 29.76%;
top: 0;
left: 0;
position: absolute;
}
img {
width: 100%;
}
}
}
//PXL Button Video
.pxl-button-video1 {
.pxl-item--inner {
display: flex;
align-items: center;
.pxl-btn-video {
width: 100px;
height: 100px;
background-color: $primary_color;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
@include border-radius(50%);
font-size: 16px;
color: #fff;
&:hover {
background-color: $link_color;
}
}
.pxl-item-title {
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
color: $link_color;
}
}
}
//end
.pxl-instagram-grid1 {
.pxl-item--inner {
@include transition(all 0.3s);
&:hover {
.pxl-item--image {
a {
i {
opacity: 1;
top: 50%;
}
img {
opacity: 0.6;
}
}
}
}
.pxl-item--image {
background-color: $link_color;
@include border-radius(10px);
overflow: hidden;
@include transition(all 0.3s);
a {
display: block;
position: relative;
i {
font-size: 30px;
color: #fff;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
@include transition(all 0.3s);
opacity: 0;
}
img {
@include transition(all 0.3s);
}
}
}
}
}
//pxl-image-grid
.pxl-image-grid1 {
.pxl-item--inner {
.pxl-item--image {
text-align: center;
}
}
}
//pxl-fancy-box
.pxl-fancy-box {
&.pxl-fancy-box1 {
.pxl-meta-inner {
position: relative;
text-align: center;
width: 569px;
min-width: 569px;
height: 569px;
@include border-radius(50%);
background-color: rgba(#ff5303, 0.788);
align-content: center;
@media (max-width: 1199px) {
width: 500px;
min-width: 500px;
height: 500px;
}
@media (max-width: 575px) {
width: unset;
min-width: unset;
height: unset;
background-color: unset;
}
.pxl-item-border {
position: absolute;
z-index: 0;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(#ff5303, 0.369);
@include border-radius(50%);
animation: pxl_pulse_radius 2000ms ease-out infinite;
-webkit-animation: pxl_pulse_radius 2000ms ease-out infinite;
z-index: -2;
border-radius: inherit;
@media (max-width: 575px) {
display: none;
}
}
.pxl-sub-title {
font-size: 24px;
color: #ffffff;
font-weight: 400;
font-family: "Inter";
position: relative;
display: inline-block;
line-height: 1.2;
padding-left: 25px;
@media (max-width: 1199px) {
font-size: 20px;
}
&:before {
content: '';
background-image: url(../img/img-icon-fancybox1.png);
width: 21px;
height: 21px;
z-index: 1;
position: absolute;
top: 50%;
left: 0;
background-repeat: no-repeat;
filter: brightness(0) saturate(100%) invert(99%) sepia(39%) saturate(2%) hue-rotate(200deg) brightness(110%) contrast(100%);
transform: translate(0,-50%);
}
}
.pxl-item-title {
font-size: 60px;
color: #ffffff;
font-weight: 700;
filter: drop-shadow(0px 3px 3.5px rgba(#000,0.35));
line-height: 1;
margin-top: 10px;
margin-bottom: 19px;
@media (max-width: 1199px) {
font-size: 50px;
}
@media (max-width: 480px) {
font-size: 40px;
}
}
.pxl-item-desc {
opacity: 0.851;
font-size: 19px;
color: #ffffff;
font-weight: 400;
font-family: "Inter";
max-width: 89%;
margin: 0 auto;
line-height: 1.77;
margin-bottom: 41px;
@media (max-width: 575px) {
margin-bottom: 30px;
}
@media (max-width: 480px) {
max-width: 100%;
}
}
.pxl-btn-link {
display: inline-flex;
a {
font-size: 16px;
color: #ffffff;
font-weight: 700;
@include border-radius(26px);
background-color: $link_color;
padding: 8px 10px 8px 27px;
display: inline-flex;
align-items: center;
&:hover {
span {
transform: rotate(0deg);
}
}
span {
filter: drop-shadow(0px 3px 3.5px rgba(#000,0.35));
background-color: #fff;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
border-radius: 50%;
color: #000;
transform: rotate(-44deg);
margin-left: 17px;
@include transition(all 0.3s);
}
}
}
}
}
&.pxl-fancy-box2 {
&.style1 {
.pxl-meta-inner {
background-color: #f6f6f6;
padding: 35px 40px 40px 40px;
@media (max-width: 880px) {
padding: 30px 20px 30px 20px;
}
.pxl-image-wg {
display: flex;
@media (max-width: 1200px) {
display: block;
}
}
.pxl-item--icon {
width: 60px;
min-width: 60px;
height: 60px;
margin-right: 4px;
padding-top: 8px;
@media (max-width: 1200px) {
margin-bottom: 15px;
margin-right: 0;
padding-top: 0;
}
}
.pxl-item-content {
.pxl-item-title {
font-size: 24px;
color: #262626;
font-weight: 700;
line-height: 1.2;
margin-bottom: 16px;
}
.pxl-item-desc {
font-size: 16px;
color: #555555;
font-weight: 400;
font-family: "Inter";
}
}
}
}
&.style2 {
.pxl-meta-inner {
background-color: $primary_color;
padding: 35px 40px 40px 40px;
@media (max-width: 880px) {
padding: 30px 20px 30px 20px;
}
.pxl-image-wg {
display: flex;
@media (max-width: 1200px) {
display: block;
}
}
.pxl-item--icon {
width: 60px;
min-width: 60px;
height: 60px;
margin-right: 4px;
padding-top: 8px;
@media (max-width: 1200px) {
margin-bottom: 15px !important;
margin-right: 0 !important;
padding-top: 0 !important;
}
img {
filter: brightness(0) saturate(100%) invert(99%) sepia(39%) saturate(2%) hue-rotate(200deg) brightness(110%) contrast(100%);
}
}
.pxl-item-content {
.pxl-item-title {
font-size: 24px;
color: #fff;
font-weight: 700;
line-height: 1.2;
margin-bottom: 16px;
}
.pxl-item-desc {
font-size: 16px;
color: #fff;
font-weight: 400;
font-family: "Inter";
opacity: 0.851;
}
}
}
}
}
&.pxl-fancy-box3 {
.pxl-meta-inner {
margin-left: 33px;
border-radius: 8px;
filter: drop-shadow(-1.035px 3.864px 21.5px rgba(0,9,37,0.2));
transform: translateX(0px);
@include transition(all 0.3s);
padding: 31px 20px 27px 0;
position: relative;
background-color: #fff;
@media (max-width: 1024px) {
margin-left: 0;
padding: 25px 15px 25px 15px;
}
.pxl-shape-img {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
&:before {
content: '';
position: absolute;
top: -4px;
left: 140px;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../img/shape-img1.png);
background-position: 50%;
width: 100%;
height: 105%;
z-index: -1;
opacity: 0;
border-radius: 8px;
@include transition(all 0.3s);
}
}
.pxl-image-wg {
display: flex;
@include transition(all 0.3s);
@media (max-width: 1024px) {
display: block;
}
.pxl-item--icon {
width: 64px;
min-width: 64px;
height: 64px;
border-radius: 50%;
filter: drop-shadow(-3.914px 5.803px 0px $primary_color);
background-color: $gradient_color_to;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-left: -33px;
margin-right: 25px;
font-size: 30px;
@include transition(all 0.3s);
position: relative;
@media (max-width: 1024px) {
margin-left: 0;
margin-bottom: 15px;
}
.pxl-icon1 {
img {
filter: invert(100%) sepia(5%) saturate(0%) hue-rotate(319deg) brightness(104%) contrast(106%);
@include transition(all 0.3s);
opacity: 1;
}
}
.pxl-icon2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
img {
filter: invert(18%) sepia(18%) saturate(6381%) hue-rotate(207deg) brightness(93%) contrast(112%);
@include transition(all 0.3s);
opacity: 0;
}
}
}
.pxl-item-content {
.pxl-item-title {
font-size: 22px;
color: $gradient_color_to;
font-weight: 700;
line-height: 1.2;
margin-bottom: 12px;
@include transition(all 0.3s);
}
.pxl-item-desc {
font-size: 16px;
color: #666666;
font-weight: 400;
@include transition(all 0.3s);
}
}
}
&:hover {
transform: translateX(8px);
background-color: $gradient_color_to;
.pxl-shape-img {
&:before {
opacity: 1;
}
}
.pxl-image-wg {
.pxl-item--icon {
background-color: #fff;
color: $gradient_color_to;
.pxl-icon1 {
img {
opacity: 0;
}
}
.pxl-icon2 {
img {
opacity: 1;
}
}
}
.pxl-item-content {
.pxl-item-title {
color: #fff;
}
.pxl-item-desc {
color: #f2f2f2;
}
}
}
}
}
&.style2 {
.pxl-meta-inner {
&:hover {
transform: translateX(-8px);
}
}
}
}
}
//PXL Banner Video
.pxl-banner-video {
&.pxl-banner-video1 {
.pxl-meta-inner {
position: relative;
padding-bottom: 58px;
@media (max-width: 360px) {
padding-bottom: 15px;
}
.pxl-item-layout1 {
text-align: right;
padding-right: 40px;
@media (max-width: 1024px) {
padding-right: 0;
}
.pxl-item--img {
display: inline-block;
img {
@include border-radius(4px);
}
}
}
.pxl-transform-left {
@media (max-width: 767px) {
transform: none !important;
}
img {
@media (max-width: 767px) {
transform: none !important;
}
}
}
.pxl-item-layout2 {
position: absolute;
bottom: 0;
left: 63px;
perspective: 70px;
perspective-origin: 50% 50%;
@media (max-width: 1280px) {
left: 0;
}
@media (max-width: 360px) {
position: unset;
display: inline-block;
margin-top: 30px;
width: 100%;
}
.pxl-item--image {
img {
@media (max-width: 360px) {
width: 100%;
}
}
}
&:hover {
.pxl-inner-content {
transform: scaleX(1) scaleY(1) scaleZ(0.1) rotateX(8deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
}
}
.pxl-image-wg {
@media (max-width: 767px) {
transform: none !important;
-webkit-transform: none !important;
}
}
.pxl-inner-content {
position: relative;
@include border-radius(4px);
overflow: hidden;
border: 16px solid #fff;
@include transition(all 1s);
@media (max-width: 767px) {
filter: drop-shadow(0px 7px 13.5px rgba(0,0,0,0.05));
}
&:before {
content: '';
position: absolute;
background-color: rgba(#0c0e12, 0.420);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pxl-inner-video {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin-top: 7px;
z-index: 2;
width: 100%;
.pxl-button-video {
margin-bottom: 15px;
}
.pxl-btn-video {
width: 75px;
height: 75px;
@include border-radius(50%);
filter: drop-shadow(0px 1px 27px rgba(#2f54ee,0.46));
background-color: $primary_color;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
@include transition(0.5s cubic-bezier(.23,1,.32,1));
&:hover {
background-color: #fff;
color: $primary_color;
animation: jello 1s;
}
}
.pxl-item-title {
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
text-transform: uppercase;
color: #fefeff;
font-weight: 700;
}
}
}
}
}
}
&.pxl-banner-video2 {
.pxl-meta-inner {
display: flex;
@media (max-width: 767px) {
display: block;
}
.pxl-item-layout-img {
width: 50%;
@media (max-width: 767px) {
width: 100%;
}
}
.pxl-item-layout-video {
margin-left: -181px;
padding-top: 3px;
@media (max-width: 1280px) {
margin-left: -250px;
}
@media (max-width: 1199px) {
display: none;
}
@media (max-width: 1024px) {
margin-left: 0;
}
&.layout-left {
margin-left: 0px;
padding-top: 35px;
display: inline-block;
display: none;
@media (max-width: 1199px) {
display: inline-block;
}
@media (max-width: 767px) {
display: block;
}
img {
@media (max-width: 767px) {
width: 100%;
}
}
}
.pxl-image-wg {
@media (max-width: 1024px) {
transform: unset !important;
-webkit-transform: unset !important;
}
}
}
.pxl-inner-content {
position: relative;
@media (max-width: 676px) {
display: inline-block;
}
.pxl-item--image {
position: relative;
@include border-radius(10px);
@include transition(all 1s);
background-color: #000;
img {
@include border-radius(10px);
opacity: 0.7;
}
}
.pxl-inner-video {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin-top: 7px;
z-index: 2;
width: 100%;
.pxl-button-video {
margin-bottom: 15px;
}
.pxl-btn-video {
width: 64px;
height: 64px;
@include border-radius(50%);
background-color: #fff;
color: #4f4f4f;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
@include transition(0.5s cubic-bezier(.23,1,.32,1));
font-size: 13px;
line-height: 1;
&:hover {
background-color: #fff;
color: $primary_color;
animation: jello 1s;
}
}
.pxl-item-title {
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
text-transform: uppercase;
color: #fefeff;
font-weight: 700;
}
}
}
.pxl-item-content {
width: 50%;
padding-left: 51px;
@media (max-width: 1280px) {
padding-left: 30px;
}
@media (max-width: 767px) {
width: 100%;
padding-left: 0;
}
.pxl-item-heading {
padding-top: 20px;
margin-bottom: 26px;
padding-left: 2px;
@media (max-width: 767px) {
padding-left: 0;
padding-top: 50px;
}
.pxl-sub-title {
font-size: 19px;
text-transform: uppercase;
color: $primary_color;
font-weight: 700;
font-family: "Barlow Semi Condensed";
margin-bottom: 8px;
}
.pxl-item-title {
font-size: 60px;
letter-spacing: 0.5px;
color: #090909;
font-weight: 800;
font-family: "Barlow Semi Condensed";
line-height: 1.1;
max-width: 75%;
@media (max-width: 1280px) {
max-width: 100%;
}
@media (max-width: 1024px) {
font-size: 55px;
}
@media (max-width: 880px) {
font-size: 45px;
}
@media (max-width: 767px) {
font-size: 35px;
}
}
}
.pxl-item-desc {
font-size: 18px;
letter-spacing: 0.15px;
color: #626262;
font-weight: 400;
font-family: "Barlow Semi Condensed";
max-width: 73%;
@media (max-width: 991px) {
max-width: 100%;
}
}
.pxl-video-list {
display: flex;
padding-top: 37px;
@media (max-width: 1024px) {
display: block;
padding-top: 25px;
}
.pxl-list {
margin-left: 74px;
@media (max-width: 1199px) {
margin-left: 0;
width: 100%;
}
.pxl-item {
border-bottom: 1px solid #d7d7d7;
padding-bottom: 13px;
margin-bottom: 11px;
&:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.pxl-item--title-list {
font-size: 20px;
color: #222222;
font-weight: 700;
font-family: "Barlow Semi Condensed";
display: flex;
align-items: center;
.pxl-icon-list {
width: 15px;
min-width: 15px;
height: 15px;
display: flex;
background-color: $primary_color;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 50%;
font-size: 10px;
margin-right: 27px;
svg {
height: 8px;
width: auto;
path {
fill: #fff;
}
}
}
}
}
}
}
.pxl-item-bottom {
display: flex;
align-items: center;
margin-top: 52px;
margin-left: -3px;
@media (max-width: 991px) {
display: block;
margin-left: 0;
margin-top: 30px;
}
.pxl-item-btn {
margin-right: 29px;
@media (max-width: 991px) {
margin-right: 0;
margin-bottom: 20px;
}
.btn {
position: relative;
padding-right: 43px;
i {
margin: 0;
position: absolute;
top: 0;
right: 0;
}
&:hover {
i {
right: 10px;
}
}
span {
padding: 0 30px 0 20px;
}
}
}
.pxl-inner-phone {
font-size: 24px;
letter-spacing: 0px;
color: #090909;
font-weight: 700;
font-family: "Barlow Semi Condensed";
.pxl-icon-phone {
margin-left: 14px;
margin-right: 8px;
}
}
}
}
.pxl-item--img {
img {
border-radius: 10px;
border-left: 7px solid $primary_color;
}
}
}
}
}
.pxl-left-image {
overflow: hidden;
display: inline-block;
img {
object-fit: cover;
transform-origin: left;
}
}
.pxl-right-image {
overflow: hidden;
display: inline-block;
img {
object-fit: cover;
transform-origin: right;
}
}
.pxl-dow-image {
overflow: hidden;
display: inline-block;
img {
object-fit: cover;
transform-origin: top;
}
}
.pxl-up-image {
overflow: hidden;
display: inline-block;
img {
object-fit: cover;
transform-origin: bottom;
}
}
.pxl-transform-left, .pxl-transform-right {
perspective: 700px;
transform-style: preserve-3d;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
.pxl-clip-left {
@include transition(all 500ms linear 0ms);
img {
@include transition(all 500ms linear 0ms);
}
}
//pxl-cart-sidebar-button
.pxl-cart-sidebar-button {
&.style1 {
font-size: 23px;
color: #1b1d21;
position: relative;
.pxl_cart_counter {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: $primary_color;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-family: "Urbanist";
font-size: 12px;
position: absolute;
bottom: -11px;
left: -10px;
padding-top: 2px;
padding-left: 1px;
}
}
&.style2 {
font-size: 17px;
color: #fff;
position: relative;
.pxl_cart_counter {
width: 18px;
height: 18px;
border-radius: 50%;
background-color: $link_color;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-family: "Urbanist";
font-size: 12px;
position: absolute;
bottom: 0px;
right: -5px;
}
}
}
//PXL SLIDE
body:not(.elementor-editor-active) .pxl-element-slider {
opacity: 0;
}
.pxl-element-slider {
position: relative;
@include transition(all 250ms linear 0ms);
border-radius: inherit;
.pxl-swiper-slide {
opacity: 0 !important;
}
.swiper-slide-active {
@include transition(all 250ms linear 0ms);
opacity: 1 !important;
z-index: 1;
}
.pxl-slider-progressbar {
position: absolute;
left: 0;
top: 0;
background-color: $link_color;
height: 2px;
z-index: 100;
width: 0;
@include transition(all 100ms linear 0ms);
}
.pxl-slider--image {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
@include transition(all 300ms linear 0ms);
}
.pxl-slider--mainimage {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
@include transition(all 600ms linear 0ms);
overflow: hidden;
&.wow {
visibility: visible;
}
&.pxl-image--kenburns.animated {
animation-name: pxl_kenburns;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 40s;
transform: scale(1.2);
}
}
.pxl-slider--overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.pxl-slider--inner {
position: relative;
z-index: 1;
overflow: hidden;
@media #{$max-lg} {
height: auto !important;
}
}
.pxl-slider--mainimage, .pxl-slider--image, .pxl-slider--inner, .pxl-swiper-slide, .pxl-swiper-wrapper, .pxl-swiper-container, .pxl-carousel-inner {
border-radius: inherit;
}
&.style1 {
.pxl-slider--overlay {
@include border-radius(30px);
}
.pxl-swiper-dots {
&.style-1 {
&.pxl-swiper-pagination-fraction {
margin-top: 0;
font-size: 18px;
color: #fefefe;
font-weight: 700;
font-family: "Barlow Semi Condensed";
position: absolute;
bottom: 23px;
right: 95px;
&:before {
display: none;
}
@media (max-width: 767px) {
right: unset;
left: 50%;
transform: translate(-50%,0);
bottom: 35px;
}
span {
margin: 0px;
font-size: 18px;
font-weight: 700;
font-family: "Barlow Semi Condensed";
position: relative;
&:before {
content: '0';
position: relative;
top: 0;
left: 0;
}
}
}
}
}
.pxl-swiper-arrow-wrap {
margin-top: 0;
position: absolute;
bottom: 25px;
right: 13px;
z-index: 2;
@media (max-width: 767px) {
right: unset;
left: 50%;
transform: translate(-50%,0);
bottom: 40px;
width: 100%;
}
.pxl-swiper-arrow {
color: #fefefe;
font-size: 20px;
margin: 0 45px;
line-height: 1;
&.pxl-swiper-arrow-prev {
i {
transform: rotate(180deg);
}
}
}
}
.pxl-swiper-pagination {
margin-top: 0;
margin-top: 0;
position: absolute;
top: 50%;
left: 72px;
z-index: 999;
transform: translateY(-50%);
.pxl-swiper-dots {
margin-top: 0;
display: grid;
background: unset;
&.style-1 {
span {
width: 54px;
height: 54px;
@include border-radius(50%);
background-color: unset;
border: 1px solid #8d9b9d;
@include transition(all 0.3s);
margin: 10px 0px;
&:hover {
border-color: $primary_color;
&:before {
color: $primary_color;
}
}
&:before {
content: '01';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 14px;
color: #8d9b9d;
line-height: 1;
@include transition(all 0.3s);
}
&:nth-child(2) {
&:before {
content: '02';
}
}
&:nth-child(3) {
&:before {
content: '03';
}
}
&:nth-child(4) {
&:before {
content: '04';
}
}
&:nth-child(5) {
&:before {
content: '05';
}
}
&:nth-child(6) {
&:before {
content: '06';
}
}
&:nth-child(7) {
&:before {
content: '07';
}
}
&:nth-child(8) {
&:before {
content: '08';
}
}
&:nth-child(9) {
&:before {
content: '09';
}
}
&:nth-child(10) {
&:before {
content: '10';
}
}
}
.swiper-pagination-bullet-active {
border-color: $primary_color;
&:before {
color: $primary_color;
}
}
}
}
}
}
&.style2 {
.pxl-swiper-dots {
&.style-1 {
position: absolute;
top: 50%;
left: 74px;
transform: translate(0,-50%);
z-index: 2;
padding: 0;
@media (max-width: 1700px) {
display: none;
}
span {
display: block;
position: relative;
width: 100%;
margin: 10px;
padding: 10px 8px;
background-color: unset;
&:after {
content: '';
position: absolute;
width: 53px;
height: 3px;
background-color: #fff;
bottom: 0;
right: 0;
@include transition(all 0.3s);
}
&:before {
content: '01';
position: absolute;
top: 25%;
right: 0%;
transform: translate(0%,-25%);
font-size: 24px;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffffff;
font-weight: 700;
line-height: 1;
@include transition(all 0.3s);
opacity: 0;
}
&:nth-child(2) {
&:before {
content: '02';
}
}
&:nth-child(3) {
&:before {
content: '03';
}
}
&:nth-child(4) {
&:before {
content: '04';
}
}
&:nth-child(5) {
&:before {
content: '05';
}
}
&:nth-child(6) {
&:before {
content: '06';
}
}
&:nth-child(7) {
&:before {
content: '07';
}
}
&:nth-child(8) {
&:before {
content: '08';
}
}
&:nth-child(9) {
&:before {
content: '09';
}
}
&:nth-child(10) {
&:before {
content: '10';
}
}
}
.swiper-pagination-bullet-active {
background-color: unset !important;
padding: 22px 24px;
&:after {
width: 114px;
background-color: $primary_color;
}
&:before {
opacity: 1;
}
}
}
}
}
&.style-1 {
.pxl-swiper-arrow-wrap {
margin: 0;
.pxl-swiper-arrow {
margin: 0;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
color: $link_color;
background-color: #fff;
@include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
opacity: 0;
@media #{$max-lg} {
font-size: 14px;
width: 56px;
height: 56px;
line-height: 56px;
}
&:hover {
background-color: $link_color;
color: #fff;
@include box-shadow(none);
}
}
.pxl-swiper-arrow-prev {
left: 60px;
@media #{$max-lg} {
left: 30px;
}
}
.pxl-swiper-arrow-next {
right: 60px;
@media #{$max-lg} {
right: 30px;
}
}
}
&:hover .pxl-swiper-arrow-wrap {
.pxl-swiper-arrow {
opacity: 1;
}
}
}
}
//text-slide
.pxl-text-carousel1 {
position: relative;
&.style1 {
&:hover {
.pxl-item-button {
a {
opacity: 1;
}
}
}
.pxl-inner-content {
position: relative;
}
.pxl-item--text {
white-space: nowrap;
line-height: 1;
font-size: 280px;
color: $link_color;
font-weight: 500;
font-family: "Outfit", sans-serif;
}
.pxl--item {
padding: 0px 15px;
width: auto;
position: relative;
}
.pxl-text-fixed {
visibility: hidden;
opacity: 0;
display: flex;
flex-wrap: nowrap;
}
.pxl-text-slide {
margin: 0 -30px;
display: flex;
flex-wrap: nowrap;
position: absolute;
top: 0;
&.text-slide-to-left {
left: 50%;
}
&.text-slide-to-right {
right: 50%;
}
@media #{$max-lg} {
margin: 0 -15px;
}
}
.pxl-item-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
@include transition(all 0.1s);
@media (max-width: 575px) {
display: none;
}
a {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: $primary_color;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 600;
color: #fff;
@include transition(all 0.3s);
opacity: 0;
@media (max-width: 880px) {
width: 150px;
height: 150px;
}
}
}
}
&.style2 {
&:hover {
.pxl-item-button {
a {
opacity: 1;
}
}
}
.pxl-inner-content {
position: relative;
}
.pxl-item--text {
white-space: nowrap;
line-height: 1.2;
font-size: 160px;
font-weight: 500;
font-family: "Outfit", sans-serif;
color: transparent;
-webkit-text-stroke: 2px rgba(#fff,0.4);
white-space: nowrap;
}
.pxl--item {
padding: 0px 25px;
width: auto;
position: relative;
display: flex;
align-items: end;
&:nth-child(even) {
.pxl-item--text {
-webkit-text-stroke: unset;
color: #fff;
}
}
.pxl-item--icon {
position: relative;
@include transition(all 0.3s);
svg {
height: 145px;
width: auto;
fill: none;
path {
stroke: $primary_color;
}
}
}
}
.pxl-text-fixed {
visibility: hidden;
opacity: 0;
display: flex;
flex-wrap: nowrap;
}
.pxl-text-slide {
margin: 0 -30px;
display: flex;
flex-wrap: nowrap;
position: absolute;
top: 0;
&.text-slide-to-left {
left: 50%;
}
&.text-slide-to-right {
right: 50%;
}
@media #{$max-lg} {
margin: 0 -15px;
}
}
.pxl-item-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
@include transition(all 0.1s);
@media (max-width: 575px) {
display: none;
}
a {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: $primary_color;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 600;
color: #fff;
@include transition(all 0.3s);
opacity: 0;
@media (max-width: 880px) {
width: 150px;
height: 150px;
}
}
}
}
}
//image-slide
.pxl-image-marquee1 {
position: relative;
&.style1 {
.pxl-item--text {
white-space: nowrap;
line-height: 1;
font-size: 0;
color: #0d0d0d;
font-weight: 700;
font-family: "Barlow Semi Condensed";
}
.pxl--item {
padding: 0 15px;
width: auto;
position: relative;
.pxl-image {
border-radius: 5px;
overflow: hidden;
box-shadow: 4px 4px 16px rgba(0,0,0, 0.12);
}
}
.pxl-text-fixed {
visibility: hidden;
opacity: 0;
display: flex;
flex-wrap: nowrap;
width: max-content;
}
.pxl-text-slide {
margin: 0 -30px;
display: flex;
flex-wrap: nowrap;
position: absolute;
top: 0;
width: max-content;
height: 100%;
&.text-slide-to-left {
left: 90%;
}
&.text-slide-to-right {
right: 90%;
}
@media #{$max-lg} {
margin: 0 -15px;
}
}
}
}
//testimonial-slide
.pxl-pxl_testimonial_marquee1 {
position: relative;
overflow: hidden;
margin: 0 -15px;
height: 830px;
&.style1 {
.pxl--item {
padding: 28px 15px 28px 21px;
margin: 15px 0;
width: auto;
position: relative;
box-shadow: 0px 5px 30px rgba(#00071A, 0.08);
border-radius: 10px;
.pxl-item--text {
white-space: nowrap;
line-height: 1;
font-size: 18px;
color: #00071A;
font-weight: bold;
font-family: "Urbanist", Sans-serif;
margin-right: 4px;
}
.pxl-sub-title {
line-height: 1;
font-size: 18px;
color: #4D515F;
font-weight: 400;
font-family: "Urbanist", Sans-serif;
}
.pxl-item-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.pxl-item-desc {
font-size: 18px;
color: #00071A;
font-weight: 400;
font-family: "Urbanist", Sans-serif;
max-width: 99%;
line-height: 1.55;
margin-bottom: 38px;
}
.pxl-item-right {
display: flex;
align-items: center;
}
.pxl-item--star {
display: flex;
align-items: center;
font-size: 15px;
}
}
.pxl-text-fixed {
visibility: hidden;
opacity: 0;
}
.pxl-text-slide {
position: absolute;
top: 0;
padding: 0 15px;
height: inherit;
&.text-slide-to-top {
top: -50%;
}
&.text-slide-to-bottom {
bottom: 50%;
}
}
}
}
//Post-list
.hover {
img {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.pxl-blog-list {
&.layout1 {
.pxl-grid-item {
display: flex;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
&:hover {
.pxl-item--image {
.bg-image {
img {
-webkit-transform: translateX(55px);
transform: translateX(55px);
}
}
}
.pxl-item--meta {
.pxl-item--title {
a {
.char {
color: $primary_color;
@include transform(translateY(-10px));
}
}
}
}
}
.pxl-item--image {
margin-right: 21px;
padding-right: 3px;
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
@include border-radius(10px);
background-color: $primary_color;
}
.bg-image {
min-width: 85px;
min-height: 75px;
overflow: hidden;
display: block;
position: relative;
@include border-radius(10px);
img {
height: 100%;
position: absolute;
right: 0;
width: auto;
max-width: unset;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}
}
}
.pxl-item--meta {
.pxl-item--date {
font-size: 12px;
letter-spacing: 0px;
color: #fb5900;
font-weight: 400;
font-family: "Barlow Semi Condensed";
margin-bottom: 0;
}
.pxl-item--title {
font-size: 24px;
font-weight: 700;
font-family: "Barlow Semi Condensed";
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
margin-bottom: 0;
a {
color: #dddddd;
.char {
transition: transform 0.2s ease, color 0.2s ease;
transition-delay: calc(var(--char-index) * 0.02s);
}
}
}
}
}
}
}
//pxl-meta-carousel
.pxl-meta-carousel1 {
.pxl-item--inner {
@include transition(all 0.3s);
.pxl-item--meta {
display: flex;
align-items: center;
@media (max-width: 480px) {
display: block;
}
.pxl-item--title {
width: 31.1%;
margin-bottom: 0;
font-size: 18px;
color: $primary_color;
font-weight: 700;
padding: 40px 0;
border-right: 1px solid #dfdfdf;
position: relative;
@include transition(all 0.3s);
@media (max-width: 480px) {
width: 100%;
border-right: none;
border-bottom: 1px solid #dfdfdf;
padding: 30px 0;
margin-bottom: 20px;
}
.pxl-item-border {
position: absolute;
width: 6px;
height: 30px;
top: 50%;
right: -4px;
background-color: $primary_color;
transform: translate(0,-50%);
@include transition(all 0.3s);
@media (max-width: 480px) {
transform: unset;
right: unset;
top: unset;
left: 0;
bottom: -3px;
width: 30px;
height: 6px;
}
}
}
.pxl-item--desc {
width: 69.9%;
font-size: 15px;
color: #666666;
font-weight: 400;
position: relative;
padding-left: 28px;
@media (max-width: 480px) {
width: 100%;
padding-left: 0;
}
}
}
&:hover {
.pxl-item--meta {
.pxl-item--title {
.pxl-item-border {
background-color: $gradient_color_from;
}
}
}
}
}
}
.pxl-meta-carousel2 {
.pxl-swiper-container {
margin: 0 -50px;
@media (max-width: 1199px) {
margin: 0 -15px;
}
}
.pxl-swiper-slide {
padding: 0 50px;
@media (max-width: 1199px) {
padding: 0 15px;
}
}
.pxl-item--inner {
@include transition(all .3s);
&:hover {
.pxl-item-top {
.pxl-inner--image {
&:before {
opacity: 1;
transform: scaleY(1) translate(-50%,0);
@include transition(all .6s cubic-bezier(.62,.21,.45,1.52));
}
&:after {
opacity: 1;
@include transition(all .4s);
}
.pxl-item-bg {
opacity: 1;
}
}
.pxl-item-image {
box-shadow: 0px 0px 0px 0px #818181;
&:before {
opacity: 1;
height: 44%;
}
}
.pxl-post--readmore {
opacity: 1;
top: 58%;
}
}
.pxl-inner-icon {
.pxl-post--icon {
filter: drop-shadow(-1.042px 5.909px 3px rgba(164,108,62,0.3));
background-color: $link_color;
}
}
}
.pxl-item-top {
position: relative;
border-radius: 50%;
overflow: hidden;
.pxl-inner--image {
position: relative;
padding: 20px;
@include transition(all .3s);
&:before {
content: '';
position: absolute;
top: 0px;
left: 50%;
width: 102%;
height: 57%;
background-color: $primary_color;
z-index: -1;
opacity: 0;
transform-origin: top;
transform: scaleY(0) translate(-50%,0);
transform-style: preserve-3d;
@include transition(all .3s cubic-bezier(.62,.21,.45,1.52));
}
&:after {
content: '';
position: absolute;
width: 96%;
height: 96%;
top: 50%;
left: 50%;
background-color: #fff;
z-index: -1;
@include border-radius(50%);
transform: translate(-50%,-50%);
opacity: 0;
@include transition(all 0.6s);
}
.pxl-item-bg {
position: absolute;
bottom: -1px;
left: 50%;
width: 102%;
height: 43%;
background-color: #fff;
z-index: -1;
transform: translate(-50%,0);
opacity: 0;
@include transition(all .3s);
}
}
.pxl-post--readmore {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%,-58%);
opacity: 0;
transform-style: preserve-3d;
@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
.btn-readmore {
font-size: 15px;
line-height: 37px;
height: 37px;
color: $link_color;
font-weight: 700;
font-family: "Barlow Semi Condensed";
background-color: #fbf3ee;
padding: 0 20px;
@include border-radius(20px);
display: flex;
align-items: center;
&:hover {
color: $primary_color;
}
}
}
.pxl-item-image {
position: relative;
@include border-radius(50%);
overflow: hidden;
@include transition(all .3s);
box-shadow: 0px 12px 0px -5px #818181;
&:before {
content: '';
position: absolute;
width: 100%;
height: 0;
background-color: $primary_color;
clip-path: polygon(50% 0%, 100% 44%, 100% 100%, 0 100%, 0 44%);
bottom: 0;
left: 50%;
transform: translate(-50%,0);
opacity: 0;
transform-origin: top;
transform-style: preserve-3d;
@include transition(all .5s cubic-bezier(.62,.21,.45,1.52));
}
img {
@include border-radius(50%);
}
}
}
.pxl-inner-icon {
text-align: center;
.pxl-post--icon {
width: 85px;
height: 85px;
@include border-radius(50%);
filter: drop-shadow(-1.042px 5.909px 3px rgba(#a46c3e,0.3));
background-color: $primary_color;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 45px;
@include transition(all .4s);
}
}
.pxl-item--holder {
margin-top: -73px;
}
.pxl-inner-content {
text-align: center;
.pxl-item--title {
font-size: 32px;
font-weight: 700;
font-family: "Barlow Semi Condensed";
margin-top: 15px;
margin-bottom: 5px;
a {
color: #0d0d0d;
&:hover {
color: $primary_color;
}
}
}
.pxl-post--content {
font-size: 18px;
letter-spacing: 0px;
color: #626262;
font-weight: 400;
font-family: "Barlow Semi Condensed";
max-width: 90%;
display: inline-block;
@media (max-width: 575px) {
max-width: 100%;
}
}
}
}
}
// image before after
.pxl-image-before-after1 {
position: relative;
border-radius: 8px;
overflow: hidden;
filter: drop-shadow(0px 10px 10.5px rgba(0,0,0,0.07));
img {
width: 100%;
}
.before-after-text {
&.style-2 {
position: absolute;
display: flex;
width: 100%;
justify-content: space-between;
bottom: -30px;
left: 0;
.before-text, .after-text {
display: inline-block;
font-size: 14px;
color: $secondary_color;
font-family: "Inter";
font-weight: 700;
line-height: 24px;
}
}
&.df {
position: absolute;
display: flex;
top: 40px;
width: 100%;
justify-content: space-between;
padding: 0 40px;
.before-text, .after-text {
font-size: 18px;
display: inline-block;
color: $primary_color;
background-color: #fff;
border-radius: 5px;
padding: 6px 20px;
font-weight: 600;
line-height: 53px;
}
}
}
.twentytwenty-before-label, .twentytwenty-after-label {
&:before {
display: none;
}
}
}
.twentytwenty-handle {
height: 53px;
width: 53px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
border: none;
margin-left: -25px;
margin-top: -28px;
span {
&:before {
color: #232323;
}
}
.twentytwenty-left-arrow {
margin-left: 11px;
&:before {
content: '\f13f';
font-family: Caseicon;
font-size: 10px;
}
}
.twentytwenty-right-arrow {
margin-right: 0;
&:before {
content: "\f137";
font-family: Caseicon;
font-size: 10px;
}
}
}
//pxl-blog-single
.pxl-blog-single1 {
.pxl-meta-inner {
position: relative;
border-radius: 10px;
overflow: hidden;
@include transition(all 0.3s);
&:hover {
.pxl-item--img {
img {
@include transform(scale(1.1));
}
}
}
.pxl-item--img {
a {
display: block;
background-size: cover;
background-position: center center;
}
img {
@include transition(all 0.3s);
display: none;
}
}
.pxl-item-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(0deg, #011c3b 60%, rgba(1, 28, 59, 0.01) 100%);
padding: 50px 40px 16px 36px;
.pxl-content-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pxl-item-new {
font-size: 15px;
color: #000b18;
font-weight: 400;
background-color: $gradient_color_from;
display: inline-block;
border-radius: 5px;
padding: 2px 17px;
z-index: 1;
position: relative;
@media (max-width: 880px) {
font-size: 13px;
padding: 0px 10px;
}
}
.pxl-item-title {
margin-bottom: 22px;
margin-top: 8px;
z-index: 1;
position: relative;
@media (max-width: 880px) {
margin-bottom: 10px;
}
a {
font-size: 30px;
color: #ffffff;
font-weight: 700;
line-height: 1.2;
max-width: 90%;
display: block;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
&:hover {
text-decoration: underline;
}
}
}
.pxl-item-list {
display: flex;
align-items: center;
z-index: 1;
position: relative;
display: inline-flex;
.pxl-item-categori {
display: flex;
align-items: center;
font-size: 14px;
color: #ffffff;
font-weight: 500;
@media (max-width: 767px) {
font-size: 12px;
}
&:hover {
color: $primary_color;
}
.pxl-icon-categori {
width: 38px;
min-width: 38px;
height: 38px;
border-radius: 50%;
background-color: $primary_color;
position: relative;
@media (max-width: 767px) {
width: 30px;
min-width: 30px;
height: 30px;
}
&:before {
content: '';
background-repeat: no-repeat;
background-size: cover;
background-image: url(../img/img-author1.png);
background-position: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 22px;
height: 18px;
@media (max-width: 767px) {
width: 17px;
height: 11px;
}
}
}
}
.pxl-item-date {
display: flex;
align-items: center;
font-size: 14px;
color: #ffffff;
font-weight: 500;
border-left: 1px solid #fff;
margin-left: 22px;
padding-left: 23px;
@media (max-width: 767px) {
font-size: 12px;
margin-left: 15px;
padding-left: 15px;
}
i {
color: $gradient_color_from;
}
}
}
}
}
}
// Showcase Grid
.pxl-mega-menu .pxl-showcase1 .pxl-grid-inner {
height: auto !important;
.pxl-grid-item {
position: static !important;
@media (max-width: 1199px) {
max-width: 100% !important;
flex: 100% !important;
}
}
.grid-sizer {
display: none;
}
}
.pxl-showcase {
text-align: center;
.pxl-item--image {
position: relative;
width: 100%;
overflow: auto;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
overflow-y: hidden;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
height: 350px;
img {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
transform: translateY(0);
@include transition(all 0.3s);
}
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(48,49,66,0.01);
-webkit-backdrop-filter: blur(10px);
@include transition(all 0.3s);
backdrop-filter: blur(0px);
}
}
.pxl-image-bg {
overflow: hidden;
position: relative;
box-shadow: 0px 5px 18px 0px rgba(#fff, 0.07);
@media (max-width: 1200px) {
box-shadow: 0px 5px 18px 0px rgba(#000, 0.07);
}
.pxl-item--buttons {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
z-index: 99;
@include transition(all 0.3s);
.btn {
align-items: center;
justify-content: center;
padding: 0 30px;
font-size: 14px;
font-weight: 500;
height: 47px;
@include border-radius(0);
margin: 10px 0px;
color: #fff !important;
border-color: none;
background-color: $primary_color;
display: flex;
@include transition(all 0.3s);
font-family: 'Inter', sans-serif;
border: none;
&:before {
display: none;
}
&.style-lv2 {
background-color: $link_color;
}
&:hover {
background-color: #fff;
color: $link_color !important;
}
}
.pxl-item--button {
opacity: 0;
@include transition(all 250ms linear 0ms);
transform: translateY(30px);
}
}
}
.pxl-item--title {
font-size: 14px;
margin-bottom: 0;
color: #fff;
font-weight: 500;
margin-top: 20px;
font-family: 'Inter', sans-serif;
@media (max-width: 1200px) {
color: $link_color;
}
a {
font-size: inherit;
font-family: inherit;
font-weight: inherit;
}
}
.pxl-item--inner {
position: relative;
border-radius: 5px;
@media (max-width: 1200px) {
margin-bottom: 40px;
}
&.style-2 {
.pxl-item--image {
position: relative;
&:before {
display: none;
}
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(#000,0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
&:hover {
.pxl-item--image {
img {
top: 0;
transform: translateY(0);
}
}
}
}
&:hover {
.pxl-item--buttons .pxl-item--button {
transform: translateY(0px);
opacity: 1;
}
.pxl-item--image {
img {
opacity: 0.8;
}
&:after {
backdrop-filter: blur(2px);
}
}
}
}
}
.pxl-button-single1 {
.pxl-item-inner {
position: relative;
border: 2px solid #F1F1F1;
@include border-radius(100px);
@include transition(all .3s);
padding: 20px 10px 20px 20px;
&:hover {
border-color: $primary_color;
.pxl-item--icon {
background-color: $primary_color;
color: #fff;
svg {
fill: #fff;
path {
fill: #fff;
}
}
}
}
a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.pxl-meta-content {
display: flex;
align-items: center;
.pxl-item-title {
margin-bottom: 0;
font-size: 18px;
font-weight: 600;
color: #191917;
}
}
.pxl-item--icon {
background-color: #F1F1F1;
width: 66px;
height: 66px;
min-width: 66px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: #191917;
@include border-radius(50%);
@include transition(all .3s);
margin-right: 13px;
svg {
height: 36px;
fill: #191917;
@include transition(all .3s);
path {
fill: #191917;
@include transition(all .3s);
}
}
}
}
}
.pxl-service-list1 {
.pxl--item {
border-radius: 20px;
background-color: #eae8e4;
margin: 30px 0;
padding: 50px 40px 56px 85px;
@media (max-width: 1366px) {
padding: 50px 40px 56px 50px;
}
.pxl-item--icon {
font-size: 60px;
line-height: 1;
color: $link_color;
}
.pxl-inner-title {
margin-top: 6px;
margin-bottom: 5px;
.pxl-item-title {
font-size: 32px;
color: #0d0d0d;
font-weight: 700;
font-family: "Barlow Semi Condensed";
line-height: 1.2;
&:hover {
color: $primary_color;
}
}
}
.pxl-item--desc {
font-size: 19px;
color: #4f4f4f;
font-weight: 400;
font-family: "Barlow Semi Condensed";
margin-bottom: 13px;
}
.pxl-item--btn {
font-size: 18px;
text-transform: uppercase;
color: #0d0d0d;
font-weight: 700;
font-family: "Barlow Semi Condensed";
position: relative;
border-bottom: 1px solid $link_color;
padding-bottom: 5px;
margin-left: 2px;
@include transition(all .3s);
i {
font-size: 15px;
margin-left: 7px;
transform: rotate(-40deg);
@include transition(all .3s);
}
&:hover {
color: $primary_color;
border-color: $primary_color;
i {
transform: rotate(0deg);
}
}
}
}
}
.pxl-number-box1 {
.pxl-number-inner {
text-align: center;
padding: 0 30px;
.pxl-item-number {
width: 140px;
height: 140px;
border: 2px solid #ededed;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
@include border-radius(50%);
font-size: 41px;
color: #ffffff;
font-weight: 800;
font-family: "Barlow Semi Condensed";
&:before {
content: '';
position: absolute;
width: 63%;
height: 63%;
top: 50%;
left: 50%;
background-image: linear-gradient(86deg, $gradient_color_from 0%, $gradient_color_to 100%);
@include border-radius(50%);
z-index: -1;
transform: translate(-50%,-50%);
}
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
border-radius: inherit;
animation: pxl_pulse_radius 2000ms ease-out infinite;
-webkit-animation: pxl_pulse_radius 2000ms ease-out infinite;
z-index: -2;
border: 2px solid #ededed;
}
}
.pxl-item-content {
.pxl-item-title {
font-size: 25px;
letter-spacing: 0px;
color: $link_color;
font-weight: 800;
font-family: "Barlow Semi Condensed";
line-height: 1.2;
margin-top: 26px;
margin-bottom: 9px;
@media (max-width: 1280px) {
font-size: 22px;
}
}
.pxl-item-desc {
font-size: 18px;
letter-spacing: 0px;
color: #323232;
font-weight: 400;
font-family: "Barlow Semi Condensed";
line-height: 1.48;
}
}
}
}
//pxl-absolute
.pxl-absolute1 {
&.style1 {
.pxl-item {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
a {
background-image: linear-gradient(86deg, $gradient_color_from 0%, $gradient_color_to 100%);
clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 5% 100%);
font-size: 19px;
color: #ffffff;
font-weight: 500;
font-family: "Catamaran", sans-serif;
padding: 3px 44px;
border-radius: 5px 30px 0px 0px;
}
}
}
&.style2 {
.pxl-absolute-inner {
display: inline-flex;
align-items: center;
.pxl-item {
margin-right: 45px;
&:last-child {
margin-right: 0;
}
a {
font-size: 19px;
letter-spacing: 0.2px;
color: #ffffff;
font-weight: 700;
font-family: "Barlow Semi Condensed";
&:hover {
color: $primary_color;
}
}
}
}
}
}
.pxl-absolute-layout1 {
position: absolute;
left: -105px;
top: 34%;
transform: rotate(90deg) translate(0,-50%);
@media (max-width: 1400px) {
display: none;
}
}
.pxl-absolute-layout2 {
position: absolute;
right: -124px;
top: 35%;
transform: rotate(90deg) translate(0,-50%);
@media (max-width: 1400px) {
display: none;
}
}
//pxl-language//
.pxl-language {
border: 2px solid #484848;
@include border-radius(100px);
line-height: 46px;
padding: 0 14px;
transition: all 0.3s;
cursor: pointer;
.pxl-meta-inner {
position: relative;
transition: all 0.3s;
.pxl-language-on-off {
display: inline-flex;
align-items: center;
.pxl-language-title {
font-size: 16px;
font-weight: 600;
color: $gradient_color_from;
margin: 0 5px;
}
.pxl-item-title-on {
color: rgba(#fff, 0.5);
}
}
.pxl-language-list {
position: absolute;
top: 105%;
right: -14px;
min-width: 200px;
box-shadow: 0 3px 5px rgba(0, 0, 0, .4);
transition: all 0.3s ease-in-out;
text-align: left;
padding: 0;
z-index: 99;
visibility: hidden;
transform: translateY(30px);
opacity: 0;
.pxl-item {
.pxl-item--title {
.pxl-link {
font-size: 14px;
font-weight: 500;
color: $gradient_color_from;
padding: 10px 20px;
display: block;
transition: all 0.3s;
position: relative;
overflow: clip;
background-color: $gradient_color_from;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7);
border-bottom: 1px solid rgba(28, 28, 28, 0.9);
line-height: 1.6;
&:before, &:after {
position: absolute;
content: "";
width: 120%;
height: 530%;
top: 70px;
left: 0;
transform: translate(-25%, -75%);
transition: all 0.3s;
}
&:before {
border-radius: 40%;
box-shadow: 0 0 10px rgba(26, 26, 26, 0.5),
inset 0 0 5px rgba(26, 26, 26, 0.5);
background: rgba(26, 26, 26, 0.5);
animation: animate_sub_menu 7s linear infinite;
}
&:after {
border-radius: 45%;
background: rgba(20, 20, 20, 1);
box-shadow: 0 0 10px 5px $gradient_color_from, inset 0 0 5px $gradient_color_from;
animation: animate_sub_menu 5s linear infinite;
opacity: 0.8;
}
span {
transition: all 0.3s;
position: relative;
z-index: 1;
}
&:hover {
&:before, &:after {
top: 0;
}
}
}
}
&:last-child {
.pxl-item--title {
.pxl-link {
border-bottom: none;
}
}
}
}
}
&.left {
.pxl-language-list {
left: -14px;
}
}
&.right {
.pxl-language-list {
right: -14px;
}
}
}
&.active {
.pxl-meta-inner {
.pxl-language-on-off {
.pxl-item-title-off {
color: rgba(#fff, 0.5);
}
.pxl-item-title-on {
color: $gradient_color_from;
}
}
}
&:hover {
.pxl-meta-inner {
.pxl-language-list {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
}
}
}
}
//pxl-button-meta//
.pxl-button-meta1 {
.pxl-item-inner {
.pxl-item-title {
font-size: 16px;
font-weight: 600;
line-height: 48px;
border: 1px solid #dedede;
@include border-radius(100px);
display: inline-block;
padding: 0 28px;
&:hover {
color: $primary_color;
border-color: $primary_color;
}
}
}
}
//pxl-badge-meta
.pxl-badge-meta1 {
.pxl-item-inner {
background-color: $primary_color;
position: relative;
@include border-radius(50%);
width: 200px;
min-width: 200px;
height: 200px;
display: inline-flex;
align-items: center;
text-align: center;
justify-content: center;
&:before {
content: '';
border: dashed 2px #fff;
position: absolute;
width: 90%;
height: 90%;
@include border-radius(50%);
animation: pxl_spin_right 10s linear infinite;
}
.pxl-rotate {
position: relative;
width: 100%;
height: 100%;
animation: pxl_spin 10s linear infinite;
.text {
font-size: 22px;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
width: 92%;
height: 92%;
transform: translate(-50%,-50%);
text {
fill: #fff;
}
}
}
.pxl-title-center {
color: #fff;
font-size: 66px;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.pxl-meta-content {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%,-50%);
}
}
}
.pxl-badge-meta2 {
.pxl-item-inner {
background-color: #fff;
position: relative;
@include border-radius(50%);
width: 200px;
min-width: 200px;
height: 200px;
display: inline-flex;
align-items: center;
text-align: center;
justify-content: center;
border: 1px solid #DEDEDE;
&:before {
content: '';
border: dashed 2px $link_color;
position: absolute;
width: 90%;
height: 90%;
@include border-radius(50%);
animation: pxl_spin_right 10s linear infinite;
}
.pxl-rotate {
position: relative;
width: 100%;
height: 100%;
animation: pxl_spin 10s linear infinite;
.text {
font-size: 22px;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
width: 92%;
height: 92%;
transform: translate(-50%,-50%);
text {
fill: $primary_color
}
}
}
.pxl-title-center {
color: $link_color;
font-size: 66px;
font-weight: 600;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.pxl-meta-content {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%,-50%);
}
}
}
//pxl-text-scroll
.pxl-text-scroll1 {
.pxl-item-title {
font-size: 500px;
font-weight: 600;
font-family: "Outfit", sans-serif;
line-height: 1;
color: #2c2c2c;
letter-spacing: -1px;
}
}
.pxl-text-scroll2 {
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
.pxl-meta-inner {
display: flex;
flex-grow: 1;
overflow: hidden;
@media (max-width: 880px) {
display: block;
}
.pxl-item-left {
width: 42.7%;
@media (max-width: 1366px) {
width: 46%;
}
@media (max-width: 880px) {
width: 100%;
margin-bottom: 30px;
}
.pxl-item-heading {
margin-bottom: 266px;
@media (max-width: 880px) {
margin-bottom: 30px;
}
.pxl-sub-title {
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 500;
text-decoration: underline;
text-transform: uppercase;
color: $primary_color;
margin-bottom: 17px;
}
.pxl-item-title {
font-family: Outfit;
font-size: 80px;
font-style: normal;
font-weight: 500;
line-height: 1.1;
color: #fff;
letter-spacing: -3.2px;
max-width: 68%;
@media (max-width: 1200px) {
max-width: 100%;
}
@media (max-width: 1024px) {
font-size: 70px;
}
@media (max-width: 757px) {
font-size: 45px;
}
}
}
.pxl-load-title {
display: flex;
align-items: center;
padding-left: 8px;
.load {
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
display: flex;
z-index: 1;
.pxl-scroll-progress-circle {
position: absolute;
top: 0;
left: 0;
z-index: -1;
transform: rotate(90deg);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
path {
fill: none;
stroke: rgba(#fff, 0.5);
stroke-width: 4;
box-sizing: border-box;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
}
}
.pxl-title-load {
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
letter-spacing: -0.32px;
color: rgba(#fff, 0.5);
}
}
}
.pxl-item-right {
width: 57.3%;
position: relative;
margin-top: 7px;
@media (max-width: 1366px) {
width: 54%;
}
@media (max-width: 880px) {
width: 100%;
}
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 98%;
height: 100%;
background: linear-gradient(180deg, rgba(255,255,255,0) 36%, #232323 100%);
pointer-events: none;
z-index: 1;
}
.barContainer {
position: absolute;
top: 43%;
z-index: 5;
width: 4px;
height: 300px;
right: 14px;
border-radius: 10px;
background-color: rgba(#fff, 0.2);
transform: translate(0, -50%);
@media (max-width: 880px) {
right: 0;
}
.bar {
background-color: $primary_color;
width: 4px;
height: 8px;
border-radius: 10px;
position: absolute;
cursor: pointer;
transform-origin: 0 0;
top: 0;
left: 0;
}
}
}
.pxl-list {
position: relative;
overflow-y: auto;
max-height: 643px;
transition: all 0.3s ease;
scrollbar-width: auto;
padding-right: 90px;
scrollbar-width: none;
-ms-overflow-style: none;
@media (max-width: 1280px) {
padding-right: 30px;
}
@media (max-width: 1024px) {
max-height: 550px;
}
&::-webkit-scrollbar {
width: 4px;
height: 8px;
display: none;
}
&::-webkit-scrollbar-track {
background-color: rgba(#fff, 0.2);
border-radius: 10px;
height: 300px;
}
&::-webkit-scrollbar-thumb {
background: $primary_color;
border-radius: 10px;
width: 4px;
}
&::-webkit-scrollbar-button:vertical {
}
.pxl-item {
margin-bottom: 54px;
@media (max-width: 880px) {
margin-bottom: 35px;
}
&:last-child {
margin-bottom: 0 !important;
}
.pxl-item-desc {
font-family: Outfit;
font-size: 40px;
font-style: normal;
font-weight: 400;
color: #fff;
-webkit-text-stroke-color: #fff;
line-height: 1.22;
@media (max-width: 1024px) {
font-size: 35px;
}
@media (max-width: 880px) {
font-size: 30px;
}
}
}
}
}
}
.pxl-text-scroll3 {
.pxl-meta-inner {
text-align: center;
.pxl-item-title {
font-size: 200px;
letter-spacing: -8px;
font-family: Outfit;
font-style: normal;
font-weight: 500;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px $link_color;
position: relative;
line-height: 1;
&:after {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(#000,0) 0%, #fff 79%);
position: absolute;
left: 0;
top: 0;
}
}
}
}
.pxl-text-scroll4 {
.pxl-meta-inner {
.pxl-item-title {
font-family: Outfit;
font-size: 600px;
white-space: nowrap;
line-height: 1.3;
color: transparent;
-webkit-text-stroke: 2px #dedede;
font-weight: 700;
letter-spacing: -24px;
}
}
}
//end//
//pxl-client-grid
.pxl-client-grid1 {
.pxl-item--inner {
margin: 15px 0;
a {
height: 100px;
position: relative;
text-align: center;
background-color: #fff;
box-shadow: 0px 30px 120px 0px rgba(#000, 0.06);
border: 1px solid #EAEAEA;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
img {
height: min-content;
filter: none;
@include transition(all .3s);
}
&:hover {
img {
filter: invert(67%) sepia(1%) saturate(0%) hue-rotate(200deg) brightness(92%) contrast(88%);
}
}
}
}
}
//PXL Number
.pxl-number1 {
.pxl-item {
display: flex;
padding-bottom: 46px;
position: relative;
z-index: 1;
@include transition(all .3s);
&:before {
content: '';
position: absolute;
height: 75%;
width: 1px;
background-color: #DEDEDE;
bottom: -13px;
left: 30px;
z-index: -2;
@include transition(all .3s);
}
&:after {
content: '';
position: absolute;
height: 75%;
width: 1px;
background-color: $link_color;
bottom: -13px;
left: 30px;
z-index: -1;
opacity: 0;
transform: scaleY(0);
@include transition(all .3s);
transform-origin: top;
}
&:last-child {
padding-bottom: 0;
&:before {
display: none;
}
&:after {
display: none;
}
}
.pxl-item-number {
width: 60px;
height: 60px;
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
color: $link_color;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
min-width: 60px;
padding-top: 5px;
background-color: #fff;
position: relative;
z-index: 1;
overflow: hidden;
@include transition(all .3s);
.pxl-bg-number {
position: absolute;
width: 98%;
height: 98%;
top: 50%;
left: 50%;
background-color: #fff;
border-radius: 50%;
z-index: -1;
transform: translate(-50%,-50%);
}
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #DEDEDE;
border-radius: 50%;
top: 0;
left: 0;
z-index: -2;
@include transition(all .3s);
}
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: $link_color;
border-radius: 50%;
top: 0;
left: 0;
z-index: -2;
opacity: 0;
transform: scaleY(0);
@include transition(all .3s);
transform-origin: top;
}
&.pxl-mr-30 {
@media (max-width: 1024px) {
margin-right: 20px;
}
}
}
.pxl-item-title {
font-family: Outfit;
font-size: 20px;
font-style: normal;
font-weight: 500;
color: $link_color;
line-height: 1.2;
margin-bottom: 14px;
}
.pxl-item-desc {
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
color: #666;
@media (max-width: 1024px) {
font-size: 16px;
}
}
&.active {
&:after {
opacity: 1;
transform: scaleY(1);
transition-delay: 0.2s;
}
.pxl-item-number {
&:after {
opacity: 1;
transform: scaleY(1);
transition-delay: 0s;
}
}
}
}
}
.pxl-title-slide1 {
.pxl-inner-slide {
text-align: center;
overflow: hidden;
position: relative;
.pxl-item--inner {
display: flex;
align-items: center;
justify-content: center;
@include transition(all 0.3s);
cursor: pointer;
.pxl-item--title {
font-family: Outfit;
font-size: 80px;
font-style: normal;
font-weight: 500;
@include transition(all 0.3s);
color: $link_color;
position: relative;
cursor: pointer;
letter-spacing: -3.2px;
line-height: 1.23;
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
@media (max-width: 1024px) {
font-size: 70px;
}
@media (max-width: 880px) {
font-size: 50px;
}
@media (max-width: 575px) {
font-size: 35px;
}
}
.pxl-bg-slider {
transform: scale(1);
@include transition(all 0.3s);
}
&.active {
background-color: $primary_color;
padding: 21px 0px;
@media (max-width: 575px) {
padding: 15px 0px;
}
.pxl-item--title {
color: #fff;
a {
display: block;
}
}
}
}
}
}
//Button Video
.pxl-button-custom {
&.pxl-button-custom1 {
&.style-default {
.pxl-btn {
min-width: 200px;
width: 200px;
height: 200px;
@include border-radius(50%);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
color: $link_color;
border: 1px solid $primary_color;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
@media (max-width: 1200px) {
min-width: 200px;
width: 200px;
height: 200px;
line-height: 200px;
}
span {
max-width: 50%;
line-height: 1.3;
}
}
}
}
}
//pxl-list-box
.pxl-list-box1 {
.pxl-item--content {
list-style: none;
margin: 0;
}
.list--item {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #DEDEDE;
padding: 56px 0 55px 0;
@include transition(all 300ms linear 0ms);
&.pxl-hover-transition {
@include transition(all 0.4s ease-in-out);
}
.pxl-content {
position: relative;
display: block;
&.pxl-hover-transition {
@include transition(all 0.4s ease-in-out);
}
}
&:hover {
border-color: $link_color;
.pxl-sub--title {
color: $primary_color;
text-decoration: underline;
}
.pxl-item--title {
.no-hover {
opacity: 0;
}
.hover {
opacity: 1;
z-index: 6;
}
&:before {
opacity: 0;
}
}
}
}
.pxl-sub--title {
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 500;
text-transform: uppercase;
color: #666;
margin-bottom: 11px;
@include transition(all 300ms linear 0ms);
}
.pxl-item--title {
margin-bottom: 0;
font-family: 'Outfit', sans-serif;
font-size: 80px;
font-style: normal;
font-weight: 500;
letter-spacing: -3.2px;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1.4px #9a9a9a;
@include transition(all 300ms linear 0ms);
position: relative;
@media (max-width: 1024px) {
font-size: 60px;
}
@media (max-width: 767px) {
font-size: 40px;
}
.no-hover {
opacity: 1;
@include transition(all 300ms linear 0ms);
}
.hover {
color: $link_color;
-webkit-text-stroke: $link_color;
@include transition(all 300ms linear 0ms);
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
&:before {
content: '';
position: absolute;
height: 100%;
width: 103%;
top: 0;
left: 0;
background: linear-gradient(100deg,rgba(#9a9a9a, 0) 0%,#fff 100%);
opacity: 1;
@include transition(all 500ms linear 0ms);
}
}
.pxl-item--image {
position: absolute;
top: 0;
pointer-events: none;
transition: opacity 0.3s;
opacity: 0;
z-index: 0;
@media #{$min-md} {
left: 0;
transform: translate(calc(var(--pxl-mouse-x) - 50%), calc(var(--pxl-mouse-y) - 50%));
}
@media #{$max-sm} {
right: 0;
transform: translate(0, calc(var(--pxl-mouse-y) - 50%));
}
@media (max-width: 575px) {
display: none;
}
}
.image--item {
transition: z-index 0.11s 0.17s;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
&.active {
z-index: 4;
.image--inner {
animation: pxlInnerIn 0.55s ease-in-out both;
}
img {
animation: pxlImgIn 0.55s ease-in-out both;
}
}
&.deactive {
.image--inner {
animation: pxlInnerOut 0.55s ease-in-out both;
}
img {
animation: pxlImgOut 0.55s ease-in-out both;
}
}
}
.image--inner {
transform: translateX(-100%);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
background-color: #d9d9d9;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: translateX(100%) scale(1.4);
mix-blend-mode: luminosity;
}
}
.pxl-item--inner {
position: relative;
&:hover {
.list--item {
&:before {
z-index: 5;
}
a {
z-index: 5;
}
}
.pxl-item--image {
opacity: 1;
z-index: 3;
}
}
}
}
//PXL Author
.pxl-author1 {
.pxl-meta-inner {
display: flex;
align-items: center;
.pxl-item--imgprimary {
@include border-radius(50%);
overflow: hidden;
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
}
.pxl-item-title {
font-family: Outfit;
font-size: 24px;
font-style: normal;
font-weight: 500;
color: $link_color;
line-height: 1.2;
margin-bottom: 10px;
}
.pxl-sub-title {
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
color: $primary_color;
line-height: 1.2;
}
}
}
//PXL History Carousel
.pxl-history-carousel {
&.pxl-history-carousel1 {
.pxl-swiper-container {
margin: 0;
@media (max-width: 991px) {
margin: 0 -15px;
}
}
.pxl-item--inner {
.pxl-item-top {
padding-right: 151px;
@media (max-width: 1280px) {
padding-right: 100px;
}
@media (max-width: 1200px) {
padding-right: 30px;
}
@media (max-width: 991px) {
padding-right: 0;
}
.pxl-item--image {
background-color: #d9d9d9;
img {
mix-blend-mode: luminosity;
}
}
}
.pxl-item--holder {
display: flex;
align-items: center;
padding-top: 38px;
@include transition(all 300ms linear 0ms);
.pxl-item--title {
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
text-transform: capitalize;
color: $primary_color;
line-height: 1.2;
margin-bottom: 15px;
}
.pxl-item--year {
font-family: Outfit;
font-size: 48px;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px $link_color;
@include transition(all 300ms linear 0ms);
position: relative;
.no-hover {
opacity: 1;
@include transition(all 300ms linear 0ms);
}
.hover {
color: $link_color;
position: absolute;
left: 0;
top: 0;
opacity: 0;
@include transition(all 300ms linear 0ms);
}
}
.pxl-item--number {
width: 50px;
min-width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 700;
text-transform: capitalize;
color: $link_color;
@include transition(all 300ms linear 0ms);
}
}
.pxl-item--desc {
border-top: 1px solid #DCDCDC;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
color: #666;
margin-top: 40px;
padding: 30px 100px 0 0;
position: relative;
@include transition(all 300ms linear 0ms);
@media (max-width: 1280px) {
padding-right: 70px;
}
@media (max-width: 991px) {
padding-right: 0;
font-size: 16px;
}
&:before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: $link_color;
transform-origin: left;
transform: scaleX(0);
@include transition(all 300ms linear 0ms);
}
}
&:hover {
.pxl-item--holder {
.pxl-item--year {
.no-hover {
opacity: 0;
}
.hover {
opacity: 1;
}
}
.pxl-item--number {
color: $primary_color;
}
}
.pxl-item--desc {
&:before {
transform: scaleX(1);
}
}
}
}
.pxl-swiper-slide {
padding: 0;
@include transition(all 0.3s);
@media (max-width: 991px) {
padding: 0 15px;
}
}
}
}
.pxl-image-author1 {
.pxl-meta-inner {
@include transition(all 0.3s);
&:hover {
.pxl-item--imgprimary {
opacity: 1;
}
}
.pxl-item--imgprimary {
border-radius: 50%;
overflow: hidden;
display: inline-block;
opacity: 0.6;
@include transition(all 0.3s);
}
}
}
//pxl-awardes
.pxl-awardes1 {
.pxl-item-inner {
&.style1 {
border-bottom: 1px solid #DEDEDE;
position: relative;
padding: 31px 0 31px 30px;
overflow: hidden;
@include transition(all 0.3s);
@media (max-width: 991px) {
padding: 30px 0;
}
&:hover {
border-color: $primary_color;
.pxl-content-hover {
top: 0;
opacity: 1;
}
}
.pxl-item-content {
display: flex;
align-items: center;
justify-content: space-between;
@media (max-width: 991px) {
display: block;
text-align: center;
}
.pxl-content-title {
font-family: Outfit;
font-size: 48px;
font-style: normal;
font-weight: 500;
letter-spacing: -1.92px;
color: $link_color;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
@media (max-width: 1280px) {
font-size: 40px;
}
@media (max-width: 1024px) {
font-size: 30px;
}
@media (max-width: 991px) {
margin-bottom: 20px;
}
}
.pxl-item-btn {
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 500;
text-transform: uppercase;
color: #666;
display: inline-flex;
align-items: center;
svg {
path {
fill: rgba(#232323, 0.2);
}
}
}
}
.pxl-content-hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
display: flex;
align-items: center;
justify-content: space-between;
top: 100%;
left: 0;
background-color: $primary_color;
padding: 0 30px 0 30px;
@include transition(all 0.3s);
@media (max-width: 991px) {
display: block;
text-align: center;
align-content: center;
}
.pxl-item-title {
font-family: Outfit;
font-size: 48px;
font-style: normal;
font-weight: 500;
line-height: 1.2;
letter-spacing: -1.92px;
color: #fff;
text-decoration: underline transparent;
@include transition(all 0.3s);
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
@media (max-width: 1280px) {
font-size: 40px;
}
@media (max-width: 1024px) {
font-size: 30px;
}
@media (max-width: 991px) {
margin-bottom: 20px;
}
&:hover {
text-decoration: underline #fff;
}
}
.pxl-title-hover {
width: 50.3%;
padding-right: 30px;
position: relative;
@media (max-width: 1200px) {
width: 45%;
}
@media (max-width: 991px) {
width: 100%;
padding: 0;
}
&:after {
content: '';
position: absolute;
width: 1px;
height: 40px;
top: 50%;
right: -1px;
transform: translate(0,-50%);
background-color: rgba(#fff, 0.2);
@media (max-width: 991px) {
display: none;
}
}
}
.pxl-list {
display: inline-flex;
align-items: center;
width: 49.7%;
padding-left: 59px;
@media (max-width: 1200px) {
width: 55%;
padding-left: 38px;
}
@media (max-width: 991px) {
width: 100%;
padding: 0;
justify-content: center;
flex-wrap: wrap;
}
.pxl--item {
position: relative;
padding-right: 25px;
margin-right: 16px;
@media (max-width: 575px) {
padding-right: 0;
}
&:after {
content: '';
position: absolute;
width: 10px;
height: 2px;
top: 50%;
right: 0;
transform: translate(0,-50%);
background-color: rgba(#fff, 0.20);
@media (max-width: 575px) {
display: none;
}
}
&:last-child {
padding-right: 0;
margin-right: 0;
&:after {
display: none;
}
}
.pxl-item-link {
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 500;
text-transform: uppercase;
color: #fff;
text-decoration: underline transparent;
@include transition(all 0.3s);
@media (max-width: 1200px) {
font-size: 14px;
}
&:hover {
text-decoration: underline #fff;
}
}
}
}
}
}
}
}
.pxl-portfolio-click1 {
.pxl-swiper-container {
margin: 0;
}
.pxl-swiper-wrapper {
display: flex;
min-height: 600px;
height: 60vh;
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
width: 100%;
min-width: 100%;
transform: translate3d(0px, 0px, 0px) !important;
@media (max-width: 1199px) {
min-height: 540px;
}
@media (max-width: 991px) {
min-height: 490px;
}
@media (max-width: 767px) {
display: grid;
min-height: 1500px;
}
}
.pxl-swiper-single {
padding: 0;
flex: 1.12;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
@include transition(all .35s ease);
cursor: pointer;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
overflow: hidden;
width: 100% !important;
@media (max-width: 1199px) {
flex: 1.20;
}
@media (max-width: 767px) {
flex: 100%;
}
&.swiper-slide-active {
flex: 4.42;
cursor: default;
@media (max-width: 1199px) {
flex: 4.5;
}
@media (max-width: 767px) {
flex: 100%;
}
.pxl-item--holder {
background: linear-gradient(180deg, rgba(228, 79, 57, 0.00) 48%, $primary_color 100%);
.pxl-item--number {
color: #fff;
-webkit-text-stroke: unset;
}
.pxl-content {
opacity: 1;
@media (max-width: 991px) {
width: 100%;
}
}
.pxl-item--title {
a {
display: block;
opacity: 2;
}
}
}
}
}
.pxl-item--inner {
position: relative;
width: 100%;
height: 100%;
background-color: unset;
}
.pxl-item--image {
position: absolute;
width: 100%;
height: 100%;
@include transition(all .35s ease);
transform: scaleX(1);
transform-origin: right;
position: relative;
overflow: hidden;
img {
height: 100%;
position: absolute;
right: 0;
width: 100%;
min-width: min-content;
@include transition(all .35s ease);
@media (max-width: 767px) {
height: unset;
max-width: unset;
width: unset !important;
}
}
a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
.pxl-item--holder {
width: inherit;
position: absolute;
right: 0;
bottom: 0;
height: 100%;
margin: 0;
color: #fff;
z-index: 2;
padding-bottom: 49px;
padding-left: 48px;
@include transition(all .35s ease);
align-content: end;
background: unset;
@media (max-width: 1280px) {
padding-left: 15px;
}
@media (max-width: 767px) {
padding-bottom: 15px;
}
a {
display: flex;
align-items: baseline;
}
.pxl-item--number {
font-family: Outfit;
font-size: 120px;
font-style: normal;
font-weight: 500;
letter-spacing: -4.8px;
color: transparent;
-webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.3);
white-space: nowrap;
position: absolute;
bottom: 42px;
right: -23px;
transform: rotate(-90deg);
line-height: 1;
@include transition(all 0.3s);
@media (max-width: 1280px) {
font-size: 80px;
right: -15px;
}
@media (max-width: 991px) {
right: 0;
bottom: -20px;
transform: unset;
}
@media (max-width: 480px) {
margin: 0;
bottom: unset;
top: 0;
right: 15px;
}
}
.pxl-content {
opacity: 0;
@include transition(all .35s ease);
width: 750px;
@media (max-width: 767px) {
width: 100%;
}
}
.pxl-item--title {
font-family: Outfit;
font-size: 40px;
font-style: normal;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@include transition(all .35s ease);
line-height: 1.1;
margin-bottom: 18px;
position: relative;
@media (max-width: 1199px) {
font-size: 35px;
}
@media (max-width: 1024px) {
line-height: 1.1;
}
a {
color: #fff;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
@include transition(all .35s ease);
}
}
.pxl-post--content {
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
color: #fff;
@include transition(all .35s ease);
max-width: 52%;
@media (max-width: 991px) {
max-width: 85%;
font-size: 16px;
}
}
}
}
.pxl-icon-title1 {
display: flex;
align-items: center;
.pxl-item-title {
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 500;
color: $link_color;
margin-right: 16px;
}
.pxl-list-icon {
display: inline-flex;
align-items: center;
a {
color: #C0C0C0;
font-size: 14px;
margin-right: 15px;
&:last-child {
margin-right: 0;
}
&:hover {
color: $link_color;
}
}
}
}
.pxl-absolute-meta1 {
position: absolute;
top: 50%;
right: -44px;
transform: rotate(-90deg) translate(0,-50%);
@media (max-width: 1280px) {
right: -70px;
}
}
.pxl-about-layout1 {
padding: 110px 350px 120px 0px;
@media (max-width: 1800px) {
padding: 110px 250px 120px 0px;
}
@media (max-width: 1700px) {
padding: 110px 100px 120px 0px;
}
@media (max-width: 1500px) {
padding: 110px 15px 120px 0px;
}
}
//pxl--services-list
.pxl--services-list1 {
display: flex;
align-items: center;
padding-bottom: 35px;
position: relative;
@media (max-width: 1280px) {
justify-content: center;
}
@media (max-width: 676px) {
display: block;
}
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-bottom: 1px solid #DEDEDE;
z-index: -1;
}
.pxl--item {
position: relative;
margin-right: 74px;
padding-left: 4px;
display: flex;
align-items: center;
@include transition(all 0.3s);
@media (max-width: 676px) {
display: block;
text-align: center;
padding: 0 0 20px 0;
margin: 0 !important;
}
&:last-child {
margin-right: 0 !important;
}
&:after {
content: '/';
position: relative;
font-family: Outfit;
font-size: 80px;
font-style: normal;
font-weight: 500;
letter-spacing: -3.2px;
color: #DEDEDE;
line-height: 1;
margin-left: 75px;
}
@media (max-width: 767px) {
&:after {
display: none;
}
}
.pxl-item-title {
font-family: Outfit;
font-size: 80px;
font-style: normal;
font-weight: 500;
letter-spacing: -3.2px;
line-height: 1.2;
position: relative;
@media (max-width: 1280px) {
font-size: 60px;
}
@media (max-width: 991px) {
font-size: 50px;
}
@media (max-width: 767px) {
font-size: 43px;
}
a {
color: $link_color;
z-index: 1;
position: relative;
}
.pxl-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(0,-50%);
opacity: 0;
@include transition(all 0.1s);
transform: translate(-50%, -50%);
transform-origin: left;
width: max-content;
z-index: -1;
@media (max-width: 767px) {
display: none;
}
}
&:hover {
a {
-webkit-text-stroke: 1.2px $link_color;
color: transparent;
}
.pxl-image {
opacity: 1;
}
}
}
}
&.style2 {
.pxl--item {
&:last-child {
&:after {
display: none;
}
}
}
}
}
//pxl-portfolio-modern
.pxl-portfolio-modern1 {
margin: 0 -22px;
@media #{$max-lg} {
margin: 0 -15px;
}
> div {
padding: 0 22px;
@media #{$max-lg} {
padding: 0 15px;
}
}
.pxl-portfolio--featuredRight {
display: none;
@media (max-width: 767px) {
display: block;
margin-bottom: 30px
}
a {
position: relative !important;
}
}
.pxl-portfolio--images {
width: 66%;
position: absolute;
height: 100%;
top: 0;
right: 0;
@media (max-width: 767px) {
display: none;
}
.pxl-images--inner {
height: 100%;
position: relative;
}
}
.pxl-portfolio--content {
display: flex;
width: 100%;
.pxl-portfolio--items {
width: 60%;
padding-right: 15px;
z-index: 5;
@media (max-width: 767px) {
width: 100%;
padding-right: 0;
}
}
}
.pxl-portfolio--item {
margin-bottom: 86px;
&:last-child {
margin-bottom: 0;
}
&:active {
.pxl-portfolio-min--inner {
.pxl-portfolio--title {
color: #fff;
-webkit-text-stroke: unset;
}
}
}
&.active {
.pxl-portfolio-min--inner {
.pxl-portfolio--title {
color: #fff;
-webkit-text-stroke: unset;
}
}
}
}
.pxl-content--inner {
cursor: pointer;
position: relative;
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.pxl-portfolio-min--inner {
display: flex;
align-items: end;
@media (max-width: 880px) {
display: inline-block;
}
.pxl-portfolio--title {
font-family: Outfit;
font-size: 80px;
font-style: normal;
font-weight: 500;
letter-spacing: -3.2px;
@include transition(all 0.35s ease);
line-height: 1.01;
-webkit-text-stroke: 1px #fff;
color: transparent;
@media (max-width: 1280px) {
font-size: 70px;
}
@media (max-width: 1200px) {
font-size: 60px;
}
@media (max-width: 880px) {
font-size: 50px;
}
@media (max-width: 767px) {
font-size: 45px;
}
}
}
.pxl-portfolio--featured {
height: 100%;
position: relative;
z-index: 1;
transform: scaleX(1);
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:not(.pxl-portfolio--first) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&.non-active {
z-index: 2;
}
&.active {
z-index: 3;
-webkit-animation-name: pxlSkewInDivider;
animation-name:pxlSkewInDivider;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:.4s;
animation-duration:.4s;
-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);
animation-timing-function:cubic-bezier(.4,0,.2,1);
will-change:transform;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
}
.pxl-portfolio--meta {
flex-grow: 1;
font-size: 14px;
font-weight: 500;
color: #444;
overflow: hidden;
.pxl-meta--inner {
flex-wrap: nowrap;
white-space: nowrap;
}
}
.pxl-portfolio--holder {
padding-right: 40px;
position: relative;
margin-bottom: 3px;
}
}
//Scroll
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: inherit;
}
}
// RTL Support
body.rtl {
.pxl-text-marquee1 {
direction: ltr;
}
.pxl-meta.pxl-meta1.style2 .pxl-meta-inner .pxl-item .pxl-item--icon.pxl-mr-9 {
margin-right: 0px;
margin-left: 18px;
}
.pxl-contact-form1 .contact5 .pxl-item-costing .f5 {
padding-left: 0px;
padding-right: 97px;
@media (max-width: 1024px) {
padding-right: 40px;
}
.pxl-item-price {
direction: rtl;
}
}
}
Back to Directory
File Manager