body{font-family: "Poppins", Sans-serif;}
.project-name-div h3 {transform: translateY(100%);transition: transform 1s ease;will-change: transform;}
.project-underline {width: 0;height: 2px;background: black;transition: width 1s ease;}
.project-frame {transition: transform 0.3s ease, opacity 0.3s ease;will-change: transform, opacity;}
.project-name-div {transition: transform 0.3s ease, opacity 0.3s ease;will-change: transform, opacity;}
.section.is-padless { z-index: 850;padding: 0;overflow: visible;}
.project-wrap {width: 100%;max-width: 100%;}
.project-list {width: 100%;margin-top: 100vh;}
.project-item {width: 100%;max-width: 100%;margin-top: -100vh;position: relative;}
.project-link {z-index: 5;background-color: var(--black);justify-content: center;align-items: center;
    width: 100%;max-width: 100%; height: 100vh;display: flex!important; position: sticky;
    top: 0; padding-bottom: 50px;overflow: hidden;}
.project-frame {background-image: url("/images/background-image.svg");background-position: 50%;
    background-repeat: no-repeat;background-size: cover; width: 100%;
    max-width: 100%;height: 115%;position: absolute;inset: 0%;}
.project-frame-cover {
    z-index: 2;cursor: default;width: 100%;height: 100%;position: absolute; pointer-events: none;
  transition: opacity 0.3s ease; opacity: 0.85;}
.project-name-div {z-index: 12;text-align: center;cursor: pointer;position: relative;}
.w-inline-block {max-width: 100%;display: inline-block;}
.project-pad {height: 120vh;position: relative;}
h3.clash.is-8 {font-size: 60px;line-height: 60px;letter-spacing: 0px;font-weight: 500;text-align: center;
    color: #fff;justify-content: center;}
.project-item img {width: 100%;
  height: auto;transition: transform 1s ease;display: block;}
.project-title {position: absolute;bottom: 40px;left: 20px;overflow: hidden;}
.title-line {display: inline-block;transform: translateY(100%);transition: transform 0.6s ease;}
.project-item:hover img {transform: scale(1.05);}
.project-item:hover .title-line {transform: translateY(0%);}
.project-frame.bgimg-1 {background-image: url(/images/image-12.jpg);}
.project-frame.bgimg-2 {background-image: url(/images/image-9.jpg);}
.project-frame.bgimg-3 {background-image: url(/images/image-13.jpg);}
.project-frame.bgimg-4 {background-image: url(/images/image-14.jpg);}
.custom-loader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;
    background: rgb(246 245 254 / 98%) url(https://zenden.binaryicdirect.com/wp-content/uploads/2025/05/loaderer.gif) no-repeat center center;background-size: 200px auto;z-index: 9999;opacity: 0;visibility: hidden;transition: opacity 0.5s ease, visibility 0.5s ease; pointer-events: none;}
.custom-loader.show {opacity: 1;visibility: visible;pointer-events: all;}
.custom-loader.hide {opacity: 0;visibility: hidden;pointer-events: none;}
span.border {font-size: 24px;position: absolute;bottom: 38px;text-align: -webkit-center;left: 0;right: 0;
    font-size: 60px;line-height: 60px;letter-spacing: 0px;font-weight: 500;text-align: center;color: #fff;display: flex;justify-content: center;}
.container_video { width: 100%;padding: 0px;margin: 0px;display: flex;  flex-direction: column;   }
.main-image {width: 100%; height: 102vh;background-size: cover;    }
.custom-button, .skip-button {padding: 11px 20px;font-size: 14px;border: none;border-radius: 50px;
    margin: 10px;cursor: pointer;line-height: 14px;font-weight: 600;}
.custom-button,.skip-button {background-color: transparent;color: white;}
.scroll-bottom #myVideo{width: 100%;}
.arrow-skip, .arrow-btn {
    height: 0px;
}
video#mobileVideo {
    display: none;
}
.arrow-btn {position: sticky;right: 0;bottom: 0; z-index: 99;    top: 74%;text-align: right;     text-align: -webkit-right;}
.width-hand {position: relative;margin: 0px 0px 0px 0px;padding: 0;scroll-snap-align: start;scroll-snap-stop: always;align-items: center;justify-content: center;}
.arrow-skip {position: sticky;top: 25px;right: 20px;z-index: 99;text-align: right;z-index: 99;margin-right: 30px;}
.arrow-skip .skip-button {border-radius: 50px;border: 1px solid; width: 120px;height: 40px;}
.com-title {font-size: 60px;line-height: 60px;letter-spacing: 0px;font-weight: 500;text-align: center;color: #fff;display: flex;justify-content: center;
    align-items: center;}
.container_video .arrow-title {position: absolute;bottom: 50px;left: 0;right: 0;}
.container_video .custom-button img {width: 59px;}
.project-name-div h3 {transform: translateY(100%);transition: transform 1s ease;will-change: transform;}
.project-underline {width: 0;height: 2px;background: black;transition: width 1s ease;}
.project-frame {transition: transform 0.3s ease, opacity 0.3s ease;will-change: transform, opacity;}
.project-name-div {transition: transform 0.3s ease, opacity 0.3s ease;will-change: transform, opacity;}
.section.is-padless { z-index: 850;padding: 0;overflow: visible;}
.project-wrap {width: 100%;max-width: 100%;}
.project-list {width: 100%;margin-top: 100vh;}
.project-item {width: 100%;max-width: 100%;margin-top: -100vh;position: relative;}
.project-link {z-index: 5;background-color: var(--black);justify-content: center;align-items: end;
    width: 100%;max-width: 100%; height: 100vh;display: flex!important; position: sticky;
    top: 0; padding-bottom: 50px;overflow: hidden;}
.project-frame {background-image: url("/images/background-image.svg");background-position: 50%;
    background-repeat: no-repeat;background-size: cover; width: 100%;
    max-width: 100%;height: 115%;position: absolute;inset: 0%;}
.project-frame-cover {
    z-index: 2;cursor: default;width: 100%;height: 100%;position: absolute;}
.project-name-div {z-index: 12;text-align: center;cursor: pointer;position: relative;}
.w-inline-block {max-width: 100%;display: inline-block;}
.project-pad {height: 120vh;position: relative;}
.project-item img {width: 100%;
  height: auto;transition: transform 1s ease;display: block;}
.project-title {position: absolute;bottom: 40px;left: 20px;overflow: hidden;}
.title-line {display: inline-block;transform: translateY(100%);transition: transform 0.6s ease;}
.project-item:hover img {transform: scale(1.05);}
body {margin: 0;}
.container_video .video-title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.scroll-container .removeClassBtn {
    height: 100vh;
}
.scroll-bottom .sec{display:none;}
.container_video video#desktopVideo,.container_video video#mobileVideo {
    position: absolute;
    left: 0;
    top: 0%;
    transform: translate(0%);
    max-width: fit-content;
    object-fit: cover;
    width: 100%;
    margin: 0;
    z-index: -2;
  height: 100%;
}
.container_video button.custom-button {box-shadow: none;}
.scroll-container{position: relative;}
.arrow-skip, .arrow-btn {
    height: 0;
} 



.project-item:hover .title-line {transform: translateY(0%);}

@media only screen and (max-width: 767px) {
 video#desktopVideo {
    display: none;
}
video#mobileVideo {
    display: block;
}

.project-frame.bgimg-1 {background-image: url(/images/image-mobile-12.jpg);}
.project-frame.bgimg-2 {background-image: url(/images/image-mobile-9.jpg);}
.project-frame.bgimg-3 {background-image: url(/images/image-mobile-13.jpg);}
.project-frame.bgimg-4 {background-image: url(/images/image-mobile-14.jpg);}

.container_video .caption span.border {font-size: 0.1px;}
.custom-loader {background-size: 80px auto;}
div#image-item5 {display: none;}
img.main-image.mobile-view {width: 100%;height: 100vh;background-size: cover;}
video#mobileVideo {width: 100%;}
.desktop-view {display: none!important;}
.mobile-view { display: block!important;}
.com-title,.video-title {font-size: 50px;line-height: 50px;}
.arrow-title {position: absolute;bottom: 96px;left: 0;right: 0;}
.arrow-skip {top: 40px; margin-right: 0;}
.container_video .video-title {
    font-size: 40px;
    line-height: 40px;
}

}