/* Solusi Pack Inline Styles - Indonesian Homepage */

/* Style Block 1 */
.vid{
            min-width: 100%;
        }

        .cert-image{
            /* width: 100%; */
            height: 80vh;
            -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
        }

        .truncate-2-lines {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;  
            overflow: hidden;
        }

        .carousel-container {
            position: relative;
            width: 100%;
            height: 340px;
            overflow: hidden;
            cursor: grab;
        }

        .carousel-track {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .carousel-card {
            position: absolute;
            width: 280px;
            height: 400px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            /* display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; */
            transition: all 0.4s ease;
            cursor: pointer;
        }

        .carousel-nav {
            display: flex;
            justify-content: center;
            margin-top: -80px;
            z-index: 9999!important;
        }

        .carousel-button {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: red;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 24px;
            transition: transform 0.2s;
        }

        .carousel-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .carousel-button:hover:not(:disabled) {
            transform: scale(1.1);
        }

        span {
            font-family: 'Helvetica Neue'!important;
            font-size: 12.8px!important;
            color: #48494B!important;
        }

        /* In your CSS file */
        .drawer-hover {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .drawer-hover::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background-color: #034694;
            transform: skewX(-45deg);
            transition: all 0.4s ease;
            z-index: -1;
        }

        .drawer-hover:hover::before {
            left: 100%;
        }

/* Style Block 2 */
.flip-container {
        perspective: 1000px;
        }

        .flip-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.3s;
        transform-style: preserve-3d;
        }

        .flip-container:hover .flip-inner {
        transform: rotateY(180deg);
        }

        .flip-front,
        .flip-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: inherit;
        }

        .flip-back {
        transform: rotateY(180deg);
        }

        .zoom-container {
            overflow: hidden;
        }

        .zoom-image {
            width: auto;
            height: auto;
            /* min-width: 40vw;
            max-width: 100vw;
            min-height: 40vh; */
            min-width: 100vw;
            min-height: 100vh;
            transform: translate(-50%, -50%) scale(0.5);
            transform-origin: center center;
            transition: transform 0.1s ease-out;
            object-fit: cover;
            z-index: 10;
        }

        .underline-svg {
            bottom: 1px;
            position: absolute;
            left: -3px;
            width: 280px;
            pointer-events: none;
        }

        .animated-underline {
            stroke-dasharray: 1000;
            stroke-dashoffset: 500;
            transition: stroke-dashoffset 1.8s ease-in-out;
        }

        .animated-circle {
            transition: stroke-dashoffset 1.2s ease-in-out;
        }

        .parallax {
            background-image: url(/assets/images/2026/05/pradaya-product-with-3-models.png);
            height: 100%; 
            /* background-attachment: fixed;
            background-position: 50% 5%; */
            background-attachment: scroll !important;
            background-position: 50% 78% !important;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #f1f1f1;
        }

        @supports (-webkit-touch-callout: none) {
            .parallax {
                background-attachment: scroll !important;
                background-position: 50% 78% !important;
            }
        }

        @media  only screen and (max-width: 768px) {
            .parallax {
                background-image: url(/assets/images/2026/05/pradaya-product-with-3-models.png);
            }

            .flip-container:hover .flip-inner {
                transform: none;
            }

            .flip-container:active .flip-inner {
                transform: rotateY(180deg);
            }
        }

/* Style Block 3 */
.woot--close::before, .woot--close::after {
            display: none!important;
        }

        body {
            margin: 0 auto;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
                                                
            font-size: 14px;
            background-color: white;
            overflow-x: hidden;
        }

        p { 
            color: #48494B;
        }

        button:focus {
            outline:none;
        }

        button[aria-expanded="true"] {
            background-color: white; /* or whatever */
            color: #034694;
        }

        button[aria-expanded="false"] {
            background-color: white; /* or whatever */
            color: #48494B;
        }

        .clientImg {
            padding: 1rem;
            margin: 1rem;
            height: 115px;
            width: 160px;
            display: flex;
            justify-content: center;
        }

        .image-product-card {
            width: 195px;
            height: 300px;
        }

        .image-product-card img {
            padding-top: 3rem;
            height: auto;
        }

        .textColor {
            color: #48494B;
        }

        .marquee-container {
            display: flex;
            overflow: hidden;
            width: 100%;
        }

        .marquee-content {
            display: flex;
            animation: marquee 16s linear infinite;
            animation-play-state: running;
        }

        .marquee-container:active .marquee-content{
            animation-play-state: paused;
        }

        .clientImg {
            margin-right: 20px;
        }

        @keyframes  marquee {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        .testimonial-marquee-section {
            overflow: hidden;
        }

        .testimonial-marquee-track {
            display: flex;
            flex-wrap: nowrap;
            gap: 1.5rem;
            width: max-content;
            animation: testimonial-marquee-left 58s linear infinite;
            will-change: transform;
        }

        .testimonial-marquee-section:hover .testimonial-marquee-track {
            animation-play-state: paused;
        }

        .testimonial-marquee-track > div {
            flex: 0 0 clamp(280px, 30vw, 430px);
            min-height: 210px;
            padding-top: 3.75rem !important;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .testimonial-marquee-track > div > .absolute {
            top: 1.15rem !important;
            left: 2rem !important;
            width: 42px;
            height: 28px;
            display: flex;
            align-items: center;
            color: #034694;
            pointer-events: none;
        }

        .testimonial-marquee-track > div > .absolute svg {
            display: none;
        }

        .testimonial-marquee-track > div > .absolute::before {
            content: '"';
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 58px;
            font-weight: 900;
            line-height: .8;
        }

        .testimonial-quote-mark {
            position: absolute;
            top: 1.05rem;
            left: 2rem;
            color: #034694;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 58px;
            font-weight: 900;
            line-height: .8;
            pointer-events: none;
        }

        .testimonial-quote-mark::before {
            content: '"';
        }

        @keyframes testimonial-marquee-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        @keyframes  fade-in {
            0% {
                opacity: 0;
                transform: translateY(40px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fade-in 1s ease-out forwards;
        }

        /* .carousel-card:hover .category-title,
        .carousel-card:hover .category-count{
            color: #fff;
        } */

        /* .carousel-card:hover .category-title{
            font-size: 1.6rem;
            color: #fff;
        } */

        .carousel-container {
            height: 500px;
            overflow: hidden;
            position: relative;
        }
        
        .carousel-track {
            display: flex;
            transition: transform 0.3s ease-in-out;
        }
        
        .carousel-item {
            flex: 0 0 auto;
            margin-right: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease-in-out;
            transform: translateY(20%);
        }

        .carousel-item:hover{
            background-color: #034694;
        }

        .carousel-item:hover .category-title {
            color: white;
        }

        .carousel-item:hover .category-count {
            color: #ffffffe3;
        }
        
        .carousel-item.center {
            transform: translateY(0%);
        }

        .category-number {
            color: #6B7280;
            font-size: 2rem;
            font-weight: 300;
            margin-bottom: 0.5rem;
        }

        .category-title {
            font-size: 1.125rem;
            font-weight: 500;
            transition: .5s
        }

        .category-count {
            color: #034694;
            font-size: .9rem;
            font-weight: 500;
            transition: .5s
        }

        .share-btn i{
            color: #48494B;
            font-size: 14px;
        }

        @media  only screen and (max-width: 768px) {

            .testimonial-marquee-track {
                gap: 1rem;
                animation-duration: 46s;
            }

            .testimonial-marquee-track > div {
                flex-basis: min(82vw, 320px);
                min-height: 220px;
                padding-top: 3.5rem !important;
            }

            .testimonial-marquee-track > div > .absolute,
            .testimonial-quote-mark {
                top: 1rem !important;
                left: 1.5rem !important;
            }

            .clientImg {
                padding: .5rem;
                height: 66px;
                width: 88px;
            }

            .carousel-container {
                position: relative;
                width: 100%;
                overflow: hidden;
            }

            .carousel-track {
                display: flex;
                transition: transform 0.3s ease-in-out;
                width: max-content;
            }

            .carousel-item {
                min-width: 100vw;
                flex-shrink: 0;
                text-align: center;
                padding: 2rem;
                margin-right: 0;
            }

            .image-product-card {
                width: 180px;
            }

            .image-product-card img {
                padding-top: 1rem;
                height: auto;
            }

        }

        .nav-item {
            position: relative;
            height: 20px; /* Height for one line of text */
            overflow: hidden;
            cursor: pointer;
            text-decoration: none;
            color: #48494B;
            transition: color 1s ease;
        }

        .nav-item:hover {
            color: #034694;
        }

        .nav-content {
            position: relative;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .nav-item:hover .nav-content {
            transform: translateY(-40px); /* Move up by 2 line heights (24px * 2) */
        }

        .nav-text {
            display: block;
            line-height: 20px;
            height: 20px;
        }

        /* Alternative smoother easing */
        .nav-item.smooth .nav-content {
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }

/* Style Block 4 */
/* Hide the default SVG icon inside the button */
        #woot-widget-bubble-icon {
            display: none !important;
        }

        /* Replace the button background with your image */
        .woot-widget-bubble {
            /* background-image: url('https://stage.pradaya.co.id/images/logoChatbotWithText.png') !important; */
            background-image: url('https://stage.pradaya.co.id/uploads/2025-09/ed2a2196adf562d5d909bde31c9495e0.png') !important;
            background-size: cover !important;
            background-position-y: 1.5px !important;
            background-color: transparent !important;
            background-repeat: no-repeat !important;
            border: 0px solid !important;
            width: 110px !important;
            height: 110px !important;
            padding: 0 !important;
        }

        @media  only screen and (max-width: 768px) {
            .woot-widget-bubble {
                width: 60px !important;
                height: 60px !important;
            }
        }

        .drawer-transition {
            position: fixed;
            bottom: 0;         /* ⬇ Start from bottom */
            left: 0;
            width: 100%;
            height: 100%;
            background: #F1F5F9; /* Change color as needed */
            z-index: 999;
            /* Hidden by default: move down off-screen */
            transform: translateY(110%);
            opacity: 0;
            transition: transform .9s ease, opacity .9s ease;
            /* box-shadow: 0 7px 19px rgba(0 118 255 / 7%); Drop shadow from top edge */
            box-shadow: 0 -10px 30px rgba(0 118 255 / 20%);
            overflow: hidden;
        }

        .drawer-transition.active {
            transform: translateY(0); /* Slide in from bottom */
            opacity: 1;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Safari support */
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            color: white;
        }

        nav.glass-card {
            background: rgba(253, 118, 1, 0.96);
            border-color: rgba(220, 100, 0, 0.7);
        }

        nav a[href="/products"],
        nav a[href="/products/"],
        nav a[href="../home.html"] {
            background: #ffffff !important;
            border-color: #ffffff !important;
            color: #111827 !important;
        }

        /* ===== Pradaya Hero Slideshow ===== */
        .pradaya-slideshow {
            position: relative;
            width: min(99%, 1700px);
            margin: 1.5rem auto 0;
            border-radius: 16px;
            overflow: hidden;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
            aspect-ratio: 1672 / 941;
            max-height: none;
        }

        .pradaya-slideshow-track {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .pradaya-slide {
            position: absolute;
            inset: 0;
            margin: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 700ms ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pradaya-slide.is-active {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

        .pradaya-slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
        }

        .pradaya-slide-hotspot {
            position: absolute;
            top: 66.1%;
            width: 14.5%;
            height: 7%;
            z-index: 12;
            display: block;
            border-radius: 14px;
            overflow: hidden;
            text-indent: -9999px;
            cursor: pointer;
        }

        .pradaya-slide-hotspot:focus-visible {
            outline: 3px solid #FD7601;
            outline-offset: 4px;
            background: rgba(255, 255, 255, 0.08);
        }

        .pradaya-slide-hotspot-products {
            left: 3.7%;
        }

        .pradaya-slide-hotspot-contact {
            left: 19.5%;
        }

        /* Navigation buttons */
        .pradaya-slide-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.85);
            color: #034694;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
            transition: background 200ms ease, transform 200ms ease;
            z-index: 50;
            pointer-events: auto;
        }

        .pradaya-slide-btn:hover {
            background: #ffffff;
            transform: translateY(-50%) scale(1.06);
        }

        .pradaya-slide-prev { left: 18px; }
        .pradaya-slide-next { right: 18px; }

        .pradaya-slide-btn svg {
            pointer-events: none;
        }

        /* Dots */
        .pradaya-slide-dots {
            position: absolute;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 5;
            background: rgba(255, 255, 255, 0.55);
            padding: 6px 12px;
            border-radius: 999px;
            backdrop-filter: blur(6px);
        }

        .pradaya-slide-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: none;
            background: rgba(15, 23, 42, 0.35);
            cursor: pointer;
            padding: 0;
            transition: background 200ms ease, transform 200ms ease;
        }

        .pradaya-slide-dot.is-active {
            background: #EA2427;
            transform: scale(1.2);
        }

        .pradaya-slide-dot:hover { background: #034694; }

        /* Mobile responsive */
        @media (max-width: 768px) {
            #welcome,
            #welcome > div {
                overflow-x: hidden;
                width: 100%;
            }
            .pradaya-slideshow {
                width: 100%;
                margin: 4.5rem 0 1rem;
                border-radius: 0;
                aspect-ratio: 1672 / 941;
                max-height: none;
                background: transparent;
                box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
            }
            .pradaya-slide-btn {
                width: 36px;
                height: 36px;
                background: rgba(255, 255, 255, 0.92);
            }
            .pradaya-slide-btn svg {
                width: 18px;
                height: 18px;
            }
            .pradaya-slide-prev { left: 8px; }
            .pradaya-slide-next { right: 8px; }
            .pradaya-slide-dots {
                bottom: 8px;
                padding: 3px 9px;
                gap: 6px;
            }
            .pradaya-slide-dot {
                width: 6px;
                height: 6px;
            }
        }

        /* Small mobile (< 480px) */
        @media (max-width: 480px) {
            .pradaya-slideshow {
                margin-top: 4rem;
            }
            .pradaya-slide-btn {
                width: 32px;
                height: 32px;
            }
            .pradaya-slide-btn svg {
                width: 16px;
                height: 16px;
            }
            .pradaya-slide-prev { left: 6px; }
            .pradaya-slide-next { right: 6px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .pradaya-slide {
                transition: none;
            }
        }

        /* ===== Welcome Heading Scroll Scale ===== */
        #welcomeHeading {
            transform-origin: center center;
            will-change: transform;
            transition: transform 200ms ease-out;
        }

        /* ===== Navbar Menu Text Style ===== */
        nav.glass-card .nav-text {
            color: #ffffff !important;
            font-size: 17px !important;
        }
        @media (min-width: 1536px) {
            nav.glass-card .nav-text {
                font-size: 19px !important;
            }
        }
        nav.glass-card .nav-item:hover .nav-text {
            color: #ffffff !important;
        }