| Server IP : 104.26.5.103 / Your IP : 216.73.216.4 Web Server : nginx/1.27.1 System : Linux in-5 5.15.0-143-generic #153-Ubuntu SMP Fri Jun 13 19:10:45 UTC 2025 x86_64 User : arabianexpress ( 1872) PHP Version : 8.0.30 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,parse_ini_file,show_source MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /storage/v9321/leapdubai/public_html/wp-content/themes/printx/assets/scss/layout/ |
Upload File : |
@use '../utils' as *;
/*----------------------------------------*/
/* 21. project css start
/*----------------------------------------*/
.tp-project-3 {
&__shape-1 {
position: absolute;
left: -2%;
top: -16%;
z-index: -1;
animation: tptranslateX2 4s infinite alternate;
@media #{$xxl}{
top: -6%;
}
@media #{$xl}{
top: -6%;
}
}
&__top-text{
color: var(--tp-common-black);
font-size: 36px;
font-family: var(--tp-ff-heading);
font-weight: 400;
line-height: 50px;
@media #{$lg}{
font-size: 30px;
& br {
display: none;
}
}
@media #{$md}{
font-size: 28px;
& br {
display: none;
}
}
@media #{$xs}{
font-size: 21px;
line-height: 32px;
& br {
display: none;
}
}
& span {
font-weight: 600;
}
}
&__item {
position: relative;
text-align: center;
overflow: hidden;
& img {
width: 100%;
transition: .7s;
}
&:hover {
& img {
transform: scale(1.2);
}
& .tp-project-3__text-box {
opacity: 1;
visibility: visible;
transform: translateY(-50%) scale(1);
}
}
}
&__text-box {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%) scale(.5);
height:320px;
width: 320px;
background: rgba(115, 92, 252, 0.88);
border-radius: 50%;
opacity: 0;
transition: .4s;
@media #{$xxl}{
left: -14px;
}
@media #{$lg}{
left: -21px;
}
@media #{$md}{
left: -2px;
height:270px;
width: 270px;
}
}
&__content{
padding: 13px 20px;
display: inline-block;
background: rgba(255, 255, 255, 0.19);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 30px;
right: 30px;
& h6 {
color: var(--tp-common-white);
font-size: 20px;
font-weight: 500;
line-height: 1;
margin-bottom: 0;
}
}
&__text {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #5748FF;
padding: 5px 22px;
& span {
color: var(--tp-common-white);
font-size: 17px;
font-weight: 500;
}
}
&__active{
margin: 0 -150px;
}
}
.tp-project {
&__content {
padding-top: 25px;
& span {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
@media #{$xs}{
font-size: 13px;
}
}
}
&__title {
font-size: 26px;
font-weight: 500;
transition: .3s;
&:hover {
color: var(--tp-theme-2);
}
@media #{$xl}{
font-size: 22px;
}
@media #{$lg}{
font-size: 22px;
}
@media #{$md}{
font-size: 20px;
}
@media #{$xs}{
font-size: 19px;
}
}
&__thumb {
overflow: hidden;
& img {
width: 100%;
transition: .5s;
}
}
&__shape {
position: absolute;
top: 0;
right: 0;
transition: .5s;
opacity: 0;
visibility: hidden;
}
&__item {
&:hover {
& .tp-project__shape {
opacity: 1;
visibility: visible;
}
& .tp-project__thumb {
& img {
transform: scale(1.1);
}
}
}
}
}
.tp-project {
&__details {
&-arrow-box{
position: absolute;
right: -6.5%;
top: 49%;
transform: translateY(-50%);
@media #{$xxl}{
right: -5.5%;
}
@media #{$xl,$lg}{
right: 0.5%;
top: -12%;
}
@media #{$md}{
right: 0.5%;
top: -12%;
}
@media #{$xs}{
right: 0.5%;
top: -17%;
}
& .slider-next{
& button {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
border-radius: 50%;
background-color: var(--tp-common-purple-2);
@media #{$md,$xs}{
height: 40px;
width: 40px;
}
& svg {
margin-left: 2px;
}
}
}
}
&-title {
color: #000;
font-size: 32px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 20px;
@media #{$xl,$lg}{
font-size: 27px;
}
@media #{$md}{
font-size: 22px;
}
@media #{$xs}{
font-size: 20px;
}
}
&-content {
& p {
color: #5C727D;
font-size: 16px;
font-weight: 400;
line-height: 30.8px;
@media #{$xl,$lg}{
font-size: 15px;
& br {
display: none;
}
}
@media #{$md,$xs}{
font-size: 14px;
& br {
display: none;
}
}
}
}
&-list-box {
padding-bottom: 75px;
& span {
color: #000;
font-family: var(--tp-ff-heading);
font-size: 28px;
font-weight: 500;
display: inline-block;
padding-bottom: 20px;
@media #{$xl,$lg}{
font-size: 24px;
}
@media #{$md}{
font-size: 20px;
}
@media #{$xs}{
font-size: 18px;
}
}
& ul {
& li {
list-style: none;
color: #5C727D;
font-size: 16px;
font-weight: 400;
position: relative;
padding-left: 25px;
padding-bottom: 15px;
@media #{$xs}{
font-size: 14px;
}
& i {
color: var(--tp-common-purple-2);
position: absolute;
top: 3px;
left: 0;
font-size: 14px;
}
}
}
}
&-right-box {
margin-left: 50px;
background-color: var(--tp-grey-2);
padding:55px 45px;
@media #{$xl}{
margin-left: 0;
}
@media #{$lg}{
margin-left: 0;
padding:55px 20px;
}
@media #{$md}{
margin-left: 0;
padding:55px 60px;
margin-bottom: 80px;
}
@media #{$xs}{
margin-bottom: 80px;
margin-left: 0;
padding: 55px 28px;
}
& .tp-purple-btn{
border-radius: 0;
height: 50px;
line-height: 50px;
}
& ul {
margin-bottom: 40px;
& li {
&:not(:last-child){
margin-bottom: 40px;
}
}
}
& > span {
color: var(--tp-common-black-3);
margin-bottom: 55px;
display: inline-block;
}
}
&-title-sm {
color: #020626;
font-size: 26px;
font-weight: 500;
margin-bottom: 13px;
}
&-icon {
& span {
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background-color: var(--tp-common-white);
display: inline-block;
text-align: center;
margin-right: 25px;
}
}
&-text {
& h6 {
color:var(--tp-common-black-3);
font-size: 16px;
font-weight: 600;
}
& span {
color: #949392;
font-size: 14px;
font-weight: 400;
}
}
}
}
.tp-project-process-9 {
& li {
&:not(:last-child){
margin-bottom: 40px;
}
list-style: none;
& .tp-project__details-icon {
& span {
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background-color: var(--tp-common-white);
display: inline-block;
text-align: center;
}
}
}
}