/* Scroll to Top */
#scrollTopBtn {
    position: fixed;
    bottom: 2.5rem;
    left: 2.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: rgba(253, 253, 251, 0.8);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hide by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#scrollTopBtn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTopBtn:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

#progress-ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.1s linear;
}



/* header */

        /* sticky appear */
        @keyframes fadeInDown {
            from {
                transform: translateY(-10px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .fade-in-down {
            animation: fadeInDown 900ms cubic-bezier(0.2, 1, 0.22, 1);
        }

        /* dropdowns (shown on group hover) */
        .ha-dropdown {
            display: none;
        }

        .group:hover>.ha-dropdown,
        .group:hover>a+.ha-dropdown,
        .group:hover>button+.ha-dropdown {
            display: block;
        }

        /* mini-cart count position fix for absolute badge */
        .count-badge {
            top: -12px;
            left: 35px;
        }

        #mobile-menu ul li:hover>ul.dropdown {
            transform: perspective(600px) rotateX(0deg);
            opacity: 1;
            visibility: visible;
        }

        #mobile-menu ul li ul.dropdown {
            position: absolute;
            top: 100%;
            left: -50%;
            z-index: 999;
            padding: 10px 0;
            background: #fff;
            border-bottom: 2px solid #19b2fe;
            box-shadow: 0 0 8px 1px rgba(0, 0, 0, .1);
            transform-origin: top;
            transform: perspective(600px) rotateX(-90deg);
            opacity: 0;
            visibility: hidden;
            transition: all .4s ease;
        }

        #mobile-menu ul li ul.dropdown ul>li>a {
            position: relative;
            color: black;
            overflow: hidden;
            transition: color 0.4s ease;
        }

        #mobile-menu ul li ul.dropdown ul>li>a::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background-color: var(--green);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
            z-index: -1;
        }

        #mobile-menu ul li ul.dropdown ul>li>a:hover {
            color: white;
        }

        #mobile-menu ul li ul.dropdown ul>li>a:hover::before {
            transform: scaleX(1);
        }

        /* Transition to X shape */
        #mobileMenuBtn.open>.cross-bar:nth-of-type(2) {
            transform: rotate(43deg) translateY(13px);
            background-color: red;
            width: 29.5px;
            height: 4px;
        }

        #mobileMenuBtn.open>.cross-bar:nth-of-type(3) {
            opacity: 0;
        }

        #mobileMenuBtn.open>.cross-bar:nth-of-type(4) {
            transform: rotate(-45deg) translateY(-14px);
            width: 28.5px;
            height: 4px;
            background-color: red;
        }
/* header end */


/* swiper styles */

        .service-curtain .swiper-wrapper {
            transition-timing-function: linear !important;
        }

        .service-curtain .swiper-slide {
            padding: 1rem;
            background-color: #FDFDFB;
            border-radius: 0.75rem;
            border: 1px solid rgba(26, 26, 26, 0.1);
            transition: all 0.3s ease;
        }

        .service-curtain .swiper-pagination-bullet, .blog-swiper .swiper-pagination-bullet {
            background-color: orangered;
            position:relative;
            width: 10px;
            height: 10px;
            opacity: 0.5;
            transition: all 0.3s ease;
        }

        .service-curtain .swiper-pagination-bullet-active, .blog-swiper .swiper-pagination-bullet-active {
            opacity: 1;
            width: 30px;
            border-radius: 5px;
        }


        .testimonial-prev,
        .testimonial-next {
            width: 36px;
            height: 36px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
        }

        .testimonial-prev::after,
        .testimonial-next::after {
            font-size: 16px;
            color: #333;
        }

        .testimonial-prev:hover,
        .testimonial-next:hover {
            background: #f7f7f7;
        }


        .services-menu-swiper .swiper-wrapper {
            /* display:flex;
            justify-content: center; */
        }

        .services-menu-swiper .swiper-slide {
            text-align: center;
        }

        .services-menu-container .swiper-button:not(.swiper-button-disabled) {
            animation: glowPulse 2s infinite ease-in-out !important;

            &>svg {
                color: rgba(255, 106, 0, 0.9) !important
            }

            /* border: 2px solid red !important; */

        }

        @keyframes glowPulse {
            0% {
                box-shadow: 0 0 2px 0px rgba(255, 106, 0, 0.8),
                    0 0 4px 0px rgba(255, 106, 0, 0.6),
                    0 0 8px 0px rgba(255, 106, 0, 0.4);
            }

            50% {
                box-shadow: 0 0 12px 0px rgba(255, 106, 0, 0.9),
                    0 0 14px 0px rgba(255, 106, 0, 0.7),
                    0 0 18px 0px rgba(255, 106, 0, 0.5);
            }

            100% {
                box-shadow: 0 0 2px 0px rgba(255, 106, 0, 0.8),
                    0 0 4px 0px rgba(255, 106, 0, 0.6),
                    0 0 8px 0px rgba(255, 106, 0, 0.4);
            }
        }

        .services-swiper .swiper-pagination>.swiper-pagination-bullet {
            background-color: orangered;
            width: 16px !important;
            height: 16px !important;
        }

        .services-swiper .swiper-pagination>.swiper-pagination-bullet-active {
            width: 45px !important;
            border-radius: 30px !important;
        }



        .services-swiper .swiper-slide {
            height: auto !important;
            /* display: flex; */
        }

        /* swiper ends */


        /* top FAQ */

        .accordion-content {
            transition: grid-template-rows .25s ease, padding .25s ease;
            display: grid;
            grid-template-rows: 0fr;
        }

        .accordion-content.open {
            grid-template-rows: 1fr;
            padding: 1rem
        }

        .accordion-inner {
            overflow: hidden;
        }

        /* Pretty circle badge gradient for symbols */
        .badge {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
        }


        /* WATI CSS */
        
        .wa-chat-box-brand {
            border-style:none !important;
        }
        
        .wa-widget-send-button{
            background-image: url("../images/certifykaro-wati.svg") !important;
            background-position: center !important;
            background-color: transparent !important;
            z-index:90 !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
            border-style:none !important;
            box-shadow: none !important;
        }

        .wa-chat-box{
            z-index:90 !important;
        }

        .wa-widget-send-button>svg{
            display:none !important;
        }
        
        /* webinar button */
@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.8);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(251, 146, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(251, 146, 60, 0);
  }
}

.pulse-border {
  position: relative;
  animation: pulseRing 2s ease-out infinite;
}