.gallery-one {
position: relative;
display: block;
background-color: var(--thm-black);
padding: 120px 0 120px;
overflow: hidden;
z-index: 1;
}
.gallery-one__bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.06;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: -1;
}
.gallery-one__shape-1 {
position: absolute;
top: -20px;
right: 0;
opacity: .15;
z-index: -1;
}
.gallery-one__shape-1 img {
width: auto;
}
.gallery-one .section-title__title {
color: var(--thm-white);
}
.gallery-one__bottom {
position: relative;
display: block;
}
.gallery-one__carousel {
position: relative;
display: block;
}
.gallery-one__single {
position: relative;
display: block;
}
.gallery-one__img-box {
position: relative;
display: block;
}
.gallery-one__img {
position: relative;
display: block;
overflow: hidden;
z-index: 1;
}
.gallery-one__img:before {
position: absolute;
top: 0;
left: 0;
width: 50%;
bottom: 0;
content: "";
background-color: rgba(var(--thm-base-rgb), .80);
width: 0%;
transform: translateY(100%);
transition: all 500ms ease;
z-index: 1;
}
.gallery-one__single:hover .gallery-one__img:before {
transform: translateY(0);
width: 50%;
}
.gallery-one__img::after {
position: absolute;
top: 0;
right: 0;
width: 50%;
bottom: 0;
content: "";
background-color: rgba(var(--thm-base-rgb), .80);
width: 0%;
transform: translateY(100%);
transition: all 500ms ease;
z-index: 1;
}
.gallery-one__single:hover .gallery-one__img:after {
transform: translateY(0);
width: 50%;
}
.gallery-one__img img {
width: 100%;
}
.gallery-one__date {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
right: 0;
max-width: 140px;
margin: 0 auto;
z-index: 2;
}
.gallery-one__date span {
background-color: var(--thm-white);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.075em;
color: var(--thm-base);
text-transform: uppercase;
padding: 10px 14px 9px;
line-height: 16px;
position: relative;
display: inline-block;
}
.gallery-one__date p {
font-size: 24px;
font-weight: 600;
line-height: 34px;
background-color: var(--thm-base);
font-family: var(--thm-font-two);
color: var(--thm-white);
padding: 9px 43px 7px;
margin-top: 8px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.gallery-one__single:hover .gallery-one__date p {
background-color: var(--thm-white);
color: var(--thm-black);
} .gallery-two {
position: relative;
display: block;
padding: 0 0 90px;
z-index: 1;
}
.gallery-two__top {
position: relative;
display: block;
padding-bottom: 43px;
margin-bottom: 60px;
border-bottom: 1px solid #e2e2e2;
}
.gallery-two__top .section-title {
margin-bottom: 0;
}
.gallery-two .container {
max-width: 1840px;
}
.gallery-two .row {
--bs-gutter-x: 110px;
}
.gallery-two__single {
position: relative;
display: block;
margin-bottom: 30px;
}
.gallery-two__single::before {
content: "";
position: absolute;
left: -55px;
top: -60px;
bottom: 0;
width: 1px;
background-color: #e2e2e2;
}
.gallery-two__single-1::before {
display: none;
}
.gallery-two__img-box {
position: relative;
display: block;
}
.gallery-two__img {
position: relative;
display: block;
overflow: hidden;
z-index: 1
}
.gallery-two__img::before {
background-color: var(--thm-white);
position: absolute;
height: 0;
width: 100%;
left: 0;
top: 0;
opacity: 0;
-moz-transition: all 400ms ease-out 0s;
-webkit-transition: all 400ms ease-out 0s;
-ms-transition: all 400ms ease-out 0s;
-o-transition: all 400ms ease-out 0s;
transition: all 400ms ease-out 0s;
content: "";
z-index: 1;
}
.gallery-two__single:hover .gallery-two__img::before {
height: 100%;
opacity: .05;
}
.gallery-two__img:after {
position: absolute;
content: "";
background-color: var(--thm-white);
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
opacity: 0;
z-index: 1;
-moz-transition: all 600ms ease-out 0s;
-webkit-transition: all 600ms ease-out 0s;
-ms-transition: all 600ms ease-out 0s;
-o-transition: all 600ms ease-out 0s;
transition: all 600ms ease-out 0s;
}
.gallery-two__single:hover .gallery-two__img:after {
height: 0;
opacity: .4;
}
.gallery-two__img img {
width: 100%;
transition: .5s ease;
transform: scale(1.05);
}
.gallery-two__single:hover .gallery-two__img img {
transform: scale(1);
}
.gallery-two__content-box {
position: absolute;
bottom: 0;
left: 0;
right: 100px;
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;
}
.gallery-two__single:hover .gallery-two__content-box {
transform: scaleY(1.0);
}
.gallery-two__content-shape-1 {
position: absolute;
top: 0;
left: 0;
bottom: 10px;
right: -7px;
background-color: var(--thm-base);
clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
}
.gallery-two__content-shape-2 {
position: absolute;
top: -50px;
left: 50%;
width: 160px;
height: 160px;
border-radius: 50%;
background-color: var(--thm-white);
transform: translateX(-50%);
}
.gallery-two__content-inner {
position: relative;
display: block;
}
.gallery-two__content {
position: relative;
display: block;
padding: 37px 25px 11px;
background-color: var(--thm-white);
clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
}
.gallery-two__sub-title {
font-family: var(--thm-font-two);
text-transform: uppercase;
color: var(--thm-base);
}
.gallery-two__title {
font-size: 24px;
font-weight: 500;
line-height: 34px;
letter-spacing: -0.04em;
text-transform: capitalize;
}
.gallery-two__title a {
color: var(--thm-black);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.gallery-two__title a:hover {
color: var(--thm-base);
}
.gallery-two__plus {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
.gallery-two__plus a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: var(--thm-base);
border-radius: 50%;
font-size: 13px;
color: var(--thm-white);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.gallery-two__plus a:hover {
color: var(--thm-white);
background-color: var(--thm-black);
}