.txt-project-top-content-1 {
gap: 20px;
}
.txt-project-top-content-1 .txt-section-title-1 {
max-width: 670px;
}
.txt-project-content-1 {
margin: 0 auto;
margin-top: 50px;
max-width: 1920px;
}
.txt-project-content-1 .txt-slider-arrow {
top: 50%;
color: #fff;
z-index: 2;
font-size: 40px;
position: absolute;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.txt-project-content-1 .txt-slider-arrow:before {
top: 0;
width: 40px;
content: "";
height: 40px;
position: absolute;
border-radius: 100%;
border: 2px solid #fff;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.txt-project-content-1 .txt-slider-arrow:hover {
color: #5D56EF;
}
.txt-project-content-1 .txt-slider-arrow:hover:before {
border: 2px solid #F950BA;
}
.txt-project-content-1 .txt-pro-button-prev {
left: 20%;
}
.txt-project-content-1 .txt-pro-button-prev:before {
left: -13px;
}
.txt-project-content-1 .txt-pro-button-next {
right: 20%;
}
.txt-project-content-1 .txt-pro-button-next:before {
right: -13px;
}
.txt-project-item-1 {
margin: 0 auto;
max-width: 780px;
}
.txt-project-item-1 .link_arrow {
left: 0;
right: 0;
top: 20%;
opacity: 0;
visibility: hidden;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.txt-project-item-1 .link_arrow a {
width: 148px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 148px;
margin: 0 auto;
font-size: 40px;
overflow: hidden;
border-radius: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 3px solid #5D56EF;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.txt-project-item-1 .link_arrow a i {
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.txt-project-item-1 .link_arrow a:before {
top: 0;
left: 0;
right: 0;
width: 100%;
content: "";
height: 100%;
background: #fff;
border-radius: 100%;
position: absolute;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.txt-project-item-1 .link_arrow a:hover {
border: 3px solid transparent;
}
.txt-project-item-1 .link_arrow a:hover i {
-webkit-transform: rotate(0);
transform: rotate(0);
}
.txt-project-item-1 .link_arrow a:hover:before {
-webkit-transform: scale(1);
transform: scale(1);
}
.txt-project-item-1 .project-category {
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
display: inline-table;
background-color: #fff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.txt-project-item-1 .project-category a {
font-size: 22px;
padding: 13px 33px;
display: inline-block;
font-family: var(--txt-heading-1);
}
.txt-project-item-1 .project-text {
margin-top: 20px;
}
.txt-project-item-1 .project-text h3 {
font-size: 34px;
font-weight: 700;
color: var(--txt-title-color-1);
}
.txt-project-item-1 .project-text h3 a {
width: 100%;
display: inline !important;
background-position-y: -2px;
background-repeat: no-repeat;
background-size: 0 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background-image: linear-gradient(transparent calc(100% - 2px), currentColor 1px);
-webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.txt-project-item-1 .project-text h3 a:hover {
color: inherit;
letter-spacing: 2px;
background-size: 100% 100%;
}
.txt-project-slider-1 {
padding-bottom: 100px;
}
.txt-project-slider-1 .swiper-slide .txt-project-item-1 {
-webkit-transition: all 700ms ease;
transition: all 700ms ease;
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
.txt-project-slider-1 .swiper-slide .txt-project-item-1 .project-img img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.txt-project-slider-1 .swiper-slide-active .txt-project-item-1 {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.txt-project-slider-1 .swiper-slide-active .txt-project-item-1 .project-img img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
.txt-project-slider-1 .swiper-slide-active .txt-project-item-1 .link_arrow {
top: 30%;
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
@media (max-width: 1199px) {
.txt-project-content-1 .txt-slider-arrow {
position: static;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.txt-project-content-1 .txt-slider-arrow {
color: #5D56EF;
margin: 0px 8px;
}
.txt-project-content-1 .txt-slider-arrow:before {
border: 2px solid #F950BA;
}
.txt-project-slider-1 {
padding-bottom: 50px;
}
}
@media (max-width: 680px) {
.txt-project-item-1 .link_arrow a {
width: 80px;
height: 80px;
font-size: 30px;
}
}
@media (max-width: 480px) {
.txt-project-item-1 .project-text h3 {
font-size: 24px;
}
.txt-project-item-1 .link_arrow a {
width: 50px;
height: 50px;
font-size: 18px;
}
}