@import url(excon.css);

/* LOADER */
@keyframes backgroundChange {
    0% { background:var(--color-gray-950)}
    30% { background:var(--color-gray-900)}
    60% { background:var(--color-gray-800)}
    100% { background:var(--color-gray-950) }
}



::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(31, 31, 31);
    border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-gray-100);
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-300);
}

/* HTML: <div class="loader"></div> */

@keyframes l3 {to{transform: rotate(1turn)}}

.page_loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-gray-900);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: backgroundChange 5500ms infinite;
    overflow: hidden !important;
    flex-direction: column;
    .container-animation{
        position: relative;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        .page_loader_animation{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 1240px;
            width: 100%;
            .loader {
                /* position: absolute; */
                top: 70%;
                left: 50%;
                /* transform: translateX(-50%); */
                width: 40px;
                padding: 8px;
                aspect-ratio: 1;
                border-radius: 50%;
                background: var(--color-gray-200);
                --_m:
                    conic-gradient(#0000 10%, #000),
                    linear-gradient(#000 0 0) content-box;
                -webkit-mask: var(--_m);
                mask: var(--_m);
                -webkit-mask-composite: source-out;
                mask-composite: subtract;
                animation: l3 1s infinite linear;
            }
        }
    }
}

#loader-content {
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
}

#percentage {
    font-size: 3em;
    font-weight: bold;
    margin-left: 40px;
    margin-bottom: 20px;
    color: var(--color-gray-200);
}


#progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10px;
    background: var(--color-gray-200);
    width: 0%;
    transition: width 0.1s linear;
}

main{
    color: var(--color-gray-200);
    background: #000;
}

.whatsapp_button img {
    width: 60px;
    cursor: pointer;
}

.whatsapp_button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

nav{
    position: fixed;
    display: flex;
    z-index: 1000;
    /* background: rgba(0, 0, 0, 0.926); */
    transition: background 0.5s;
    flex-direction: column;
    .navContainer{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .navLinks{
            justify-content: center;
            align-items: center;
            gap: 14px;
        }
    }
}

.home-hero-section{
    position: relative;
    height: 100vh;
    /* background: url('../images/background/statBG.jpg') no-repeat center center/cover; */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    .filterLeft{
        position: absolute;
        background: linear-gradient(253deg, rgba(0, 0, 0, 0.00) 56.8%, #000 90.35%);
        height: 100vh;
        width: 100%;
        z-index: 2;
    }
    .filterBottom{
        position: absolute;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 56.72%, #000 96.62%);
        height: 100vh;
        width: 100%;
        z-index: 2;
    }
    video{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }
    .header-text{
        position: absolute;
        display: flex;
        max-width: 781px;
        bottom:80px;
        flex-direction: column;
        gap: 17px;
        z-index: 3;
    }
}

.box{
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 8px;
}

.about-short{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    gap: 18px;
    align-self: stretch;
    flex-wrap: wrap;
    /* padding: 56px 64px; */
    h2, p{
        min-width: 300px;
        max-width: 650px;
        flex: 1 0 0;
    }
}

.services{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    align-self: stretch;
    position: relative;
    .cardServiceFrame{
        display: flex;
        align-items: center;
        gap: 19px;
        align-self: stretch;
        flex-direction: column;
        overflow: hidden;
        .cardService{
            position: relative;
            min-width: 264px;
            height: 398px;
            border-radius: 16px;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .textHover{
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background: linear-gradient(90deg, rgba(14, 14, 17, 0.87) 1.48%, rgba(115, 115, 115, 0.00) 34.87%);
                h4{
                    position: absolute;
                    top: 160px;
                    left: -163px;
                    padding: 16px;
                    height: 75px;
                    width: 398px;
                    text-align: center;
                    /* background: linear-gradient(90deg, #FFF 0%, #999 100%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent; */
                    transform: rotate(90deg);
                }
                
            }
        }
    }
    .swiper_custom_nav{
        position: absolute;
        z-index: 10;
        top: 37%;
        transform: translateY(-50%);
        width: 100%;
        left: 0;
        display: flex;
        justify-content: space-between;
    }
    .swiper_custom_nav svg{
        font-size: 50px;
        cursor: pointer !important;
        opacity: 0.44 !important;
        transition: all .3s ease-in-out !important;
    }
    .swiper_custom_nav svg:hover{
        opacity: 1 !important;
    }
    
    #swiper-1 .swiper-custom-pagination {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 2rem;
        bottom: 2rem;
        margin-left: auto;
        margin-right: auto;
        transform: translateX(0%)!important;
    }
    #swiper-1 .swiper-pagination-bullet {
        opacity: 1;
        background-color: #ffffff30;
        width: .75rem;
        height: .75rem;
        margin: 0 6px;
    }
    #swiper-1 .swiper-pagination-bullet-active {
        background-color: var(--color-gray-200);
    }
}


.experience{
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    /* background:  url('../images/background/statBG.jpg') no-repeat center center/cover; */
    /* background-attachment: fixed;  */
    /* Pastikan ini diterapkan */
    .gradient{
        position: absolute;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.89) 46%, rgba(24, 24, 27, 0.45) 100%);
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .statFrame{
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        /* gap: 100px; */
        flex: 1 0 0;
        flex-wrap: wrap;
        z-index: 2;
        .stat{
            display: flex;
            width: 185px;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
    }
}

.whyUs{
    display: flex;
    /* padding: 94px 64px; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 65px;
    align-self: stretch;
    background: url('../images/background/whyUsBGNew.png') no-repeat center center/cover;
    .whyUsFrameCard{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        gap: 22px;
        align-self: stretch;
        justify-content: center;
        img{
            width: 250px;
            border-radius: 20px;
        }
        .whyUsText{
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1 0 0;
            max-width: 450px;
        }
    }
}
.logo{
    display: flex;
    /* padding: 100px 65px; */
    flex-direction: column;
    align-items: center !important;
    gap: 40px;
    align-self: stretch;
    .slider{
        width: 100%;
        /* border: 1px solid red; */
        height: var(--height-slide);
        overflow: hidden;
        mask-image: linear-gradient(
            to right,
            transparent,
            #000 10% 90%,
            transparent
        );
        .list{
            position: relative;
            display: flex;
            width: 100%;
            min-width: calc(var(--width-slide) * var(--quantity-slide));
            .item{
                position: absolute;
                width: calc(var(--width-slide));
                height: var(--height-slide);
                left: 100%;
                animation: reversePlay 15s linear infinite;
                transition: filter  0.5s;
                animation-delay: calc((15s/var(--quantity-slide)) * (var(--position_slider) - 1)) !important;
                img{
                    width: 100%;
                }
            }
        }
    }
    .slider1{
        width: 100%;
        /* border: 1px solid red; */
        height: var(--height-slide);
        overflow: hidden;
        mask-image: linear-gradient(
            to right,
            transparent,
            #000 10% 90%,
            transparent
        );
        .list{
            position: relative;
            display: flex;
            width: 100%;
            min-width: calc(var(--width-slide) * var(--quantity-slide));
            .item{
                position: absolute;
                width: calc(var(--width-slide));
                height: var(--height-slide);
                left: 100%;
                animation: autoRun 15s linear infinite;
                transition: filter  0.5s;
                animation-delay: calc((15s/var(--quantity-slide)) * (var(--position_slider) - 1)) !important;
                img{
                    width: 70%;
                }
            }
        }
    }
}
.slider1:hover .item{
    animation-play-state: paused !important;
    filter: grayscale(1);
}
.slider[reverse="true"]:hover .item{
    animation-play-state: paused !important;
    filter: grayscale(1);
}

.slider1 .item:hover{
    filter: grayscale(0);
}
.slider[reverse="true"] .item:hover{
    filter: grayscale(0);
}

.beforeAfter{
    display: flex;
    /* padding: 100px 65px; */
    flex-direction: column;
    align-items: center;
    gap: 44px;
    align-self: stretch;
    video{
        width: 100%;
        height: 80vh;
        object-fit: cover;
    }
}

.instagramFeeds iframe{
    min-width: 290px !important;
    max-width: 1300px !important;
}

footer{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
    align-self: stretch;
    background: #000;
    .footerContent{
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 64px;
        align-self: stretch;
        flex-wrap: wrap;
        .firstContent{
            display: flex;
            min-width: 250px;
            flex-direction: column;
            align-items: flex-start;
            gap: 32px;
            flex: 1 0 0;
            .addressContactForm{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 24px;
                align-self: stretch;
            }
        }
        .secondContent{
            display: flex;
            min-width: 250px;
            align-items: flex-start;
            gap: 24px;
            flex: 1 0 0;
            .contentLink{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
                flex: 1 0 0;
            }
        }
    }
    .credit{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        align-self: stretch;
        hr{
            width: 100%;
            border: 1px solid #fff;
            background: var(--black-200, #D1D1D1);
        }
        .row{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            align-self: stretch;
        }

    }

}

.playButton{
    display: flex;
    padding: 7px 13px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(3.4000000953674316px);
}

@media(min-width: 768px) {
    .whyUs{
        .whyUsFrameCard{
            flex-direction: row;
            gap: 40px;
            img{
                max-width: 250px;
                border-radius: 20px;
            }
            .whyUsText{
                display: flex;
                flex-direction: column;
                gap: 12px;
                flex: 1 0 0;
                max-width: 450px;
            }
        }
    }
}
@media(max-width: 640px) {
    
}

@media(max-width: 425px) {
    .stat{
        width: 120px !important;
    }
    .swiper_custom_nav{
        display: none !important;
    }
    
}

@keyframes autoRun {
    from{
        left: 100%;
    }
    to{
        left: calc(var(--width-slide) * -1);
    }
}
@keyframes reversePlay {
    from{
        left: calc(var(--width-slide) * -1);
    }
    to{
        left: 100%;
    }
}