.project-one {
position: relative;
display: block;
padding: 120px 0 0px;
z-index: 1;
}
.project-one__top {
position: relative;
display: block;
margin-bottom: 48px;
}
.project-one__top .container {
max-width: 1200px;
}
.project-one__top-left {
position: relative;
display: block;
}
.project-one__top-left .section-title {
margin-bottom: 0;
}
.project-one__top-right {
position: relative;
display: block;
}
.project-one__btn-box {
position: relative;
display: block;
}
.project-one__btn {
padding: 24px 35px 23px;
background-color: rgba(var(--thm-base-rgb), .40);
}
.project-one__btn::before {
background: var(--thm-base);
}
.project-one__btn::after {
background: var(--thm-black);
}
.project-one__bottom {
position: relative;
display: block;
}
.project-one__bottom .container {
max-width: 1530px;
}
.project-one__carousel {
position: relative;
display: block;
}
.project-one__single {
position: relative;
display: block;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
z-index: 1;
}
.project-one__single:hover {
transform: translateY(10px);
}
.project-one__img-box {
position: relative;
display: block;
}
.project-one__img {
position: relative;
display: block;
overflow: hidden;
border-radius: 20px;
}
.project-one__img img {
width: 100%;
border-radius: 20px;
}
.project-one__shape-1 {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: 90px;
background-color: var(--thm-base);
border-radius: 20px;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
transform-origin: right center;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
z-index: -1;
}
.project-one__single:hover .project-one__shape-1 {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
transform-origin: right center;
}
.project-one__content {
position: absolute;
right: 35px;
bottom: 34px;
text-align: center;
background-position: center bottom;
transition-delay: .1s;
transition-timing-function: ease-in-out;
transition-duration: .5s;
transition-property: all;
transform-origin: bottom;
transform-style: preserve-3d;
transform: scaleY(0);
z-index: 2;
}
.project-one__single:hover .project-one__content {
transform: scaleY(1.0);
}
.project-one__arrow {
position: relative;
display: block;
}
.project-one__arrow a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
font-size: 16px;
color: var(--thm-white);
background-color: var(--thm-base);
border-radius: 50%;
margin: 0 auto;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.project-one__arrow a:hover {
color: var(--thm-base);
background-color: var(--thm-white);
}
.project-one__title {
font-size: 24px;
font-weight: 500;
font-family: var(--thm-font);
line-height: 29px;
margin-top: 19px;
}
.project-one__title a {
color: var(--thm-white);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.project-one__title a:hover {
color: var(--thm-base);
}
.project-one__shape-2 {
position: absolute;
right: -300px;
top: 182px;
background-position: center bottom;
transition-delay: .1s;
transition-timing-function: ease-in-out;
transition-duration: .5s;
transition-property: all;
transform-origin: right;
transform-style: preserve-3d;
transform: scalex(0);
z-index: 1;
}
.project-one__single:hover .project-one__shape-2 {
transform: scalex(1.0);
}
.project-one__shape-2 img {
width: auto;
}
.project-one__carousel.owl-carousel .owl-stage-outer {
overflow: visible;
}