/* =========================================================
   JG IT Store - Home sections ane Service pages
   Theme colors: --theme (#00476F), --theme2 (#195482), --theme3 (#E1924B)
   ========================================================= */

.jg-section-light {
    background: #f5f8fb;
}

.jg-section-title {
    margin-bottom: 45px;
}

.jg-section-title .sub-title {
    color: var(--theme3);
}

.jg-section-title p {
    max-width: 640px;
    margin: 14px auto 0;
}

.jg-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--theme);
    transition: gap .3s ease, color .3s ease;
}

.jg-btn-link:hover {
    color: var(--theme3);
    gap: 12px;
}

/* ---------- Services cards ---------- */
.jg-service-card {
    position: relative;
    height: 100%;
    padding: 38px 30px 32px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0, 71, 111, .08);
    border-top: 4px solid transparent;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.jg-service-card:hover {
    transform: translateY(-8px);
    border-top-color: var(--theme3);
    box-shadow: 0 18px 45px rgba(0, 71, 111, .15);
}

.jg-service-card .icon {
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    transition: background .35s ease;
}

.jg-service-card:hover .icon {
    background: linear-gradient(135deg, var(--theme3), #d4772c);
}

.jg-service-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.jg-service-card h3 a {
    color: var(--header);
}

.jg-service-card h3 a:hover {
    color: var(--theme);
}

.jg-service-card p {
    margin-bottom: 20px;
}

/* ---------- Industries ---------- */
.jg-industry-card {
    height: 100%;
    padding: 28px 16px;
    text-align: center;
    background: #fff;
    border: 1px solid #e6eef4;
    border-radius: 14px;
    transition: all .3s ease;
}

.jg-industry-card i {
    font-size: 32px;
    color: var(--theme);
    margin-bottom: 14px;
    transition: color .3s ease;
}

.jg-industry-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

.jg-industry-card:hover {
    background: var(--theme);
    border-color: var(--theme);
    transform: translateY(-5px);
}

.jg-industry-card:hover i,
.jg-industry-card:hover h4 {
    color: #fff;
}

/* ---------- Testimonials ---------- */
.jg-testimonial-section {
    background: linear-gradient(135deg, var(--theme), var(--theme2));
}

.jg-testimonial-section .section-title h2,
.jg-testimonial-section .section-title p {
    color: #fff;
}

.jg-testimonial-card {
    height: 100%;
    padding: 34px 30px;
    background: #fff;
    border-radius: 16px;
    position: relative;
}

.jg-testimonial-card .quote {
    position: absolute;
    top: 26px;
    right: 28px;
    font-size: 40px;
    color: rgba(225, 146, 75, .25);
}

.jg-testimonial-card .stars {
    color: #f5b400;
    margin-bottom: 14px;
    font-size: 14px;
    letter-spacing: 2px;
}

.jg-testimonial-card p {
    min-height: 150px;
    margin-bottom: 24px;
}

.jg-testimonial-card .client {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jg-testimonial-card .avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: var(--theme3);
}

.jg-testimonial-card h5 {
    margin: 0;
    font-size: 17px;
}

.jg-testimonial-card span {
    font-size: 14px;
    color: var(--text);
}

.jg-swiper-dots {
    margin-top: 35px;
    text-align: center;
}

.jg-swiper-dots .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #fff;
    opacity: .5;
}

.jg-swiper-dots .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--theme3);
}

/* ---------- FAQ ---------- */
.jg-faq-contact {
    margin-top: 30px;
    padding: 28px;
    border-radius: 16px;
    background: #f5f8fb;
}

.jg-faq-contact h4 {
    margin-bottom: 14px;
}

.jg-faq-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--header);
    font-weight: 600;
}

.jg-faq-contact a i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--theme);
}

/* ---------- Clients ---------- */
/* .jg-client-logo {
    height: 110px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e6eef4;
    border-radius: 14px;
}

.jg-client-logo img {
    max-height: 70px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .75;
    transition: all .3s ease;
}

.jg-client-logo:hover img {
    filter: none;
    opacity: 1;
}

.jg-client-slider .swiper-wrapper {
    transition-timing-function: linear;
} */

.jg-client-logo { 
    height: 110px; 
    padding: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #fff; 
    border: 1px solid #e6eef4; 
    border-radius: 14px; 
} 

.jg-client-logo img { 
    max-height: 70px; 
    max-width: 100%; 
    object-fit: contain; 
    filter: none; 
    opacity: 1; 
    transition: none; 
} 

.jg-client-logo:hover img { 
    filter: none; 
    opacity: 1; 
} 

.jg-client-slider .swiper-wrapper { 
    transition-timing-function: linear; 
}

/* ---------- Blog card (Home, Blog page, Related posts) ---------- */
.jg-blog-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 71, 111, .07);
    transition: transform .35s ease, box-shadow .35s ease;
}

.jg-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 71, 111, .14);
}

.jg-blog-card .thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #eef3f7;
}

.jg-blog-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.jg-blog-card:hover .thumb img {
    transform: scale(1.06);
}

.jg-blog-card .thumb .cat {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 7px 14px;
    border-radius: 30px;
    background: var(--theme);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.jg-blog-card .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 26px;
}

.jg-blog-card .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    color: #7a7a7a;
    font-size: 13px;
}

.jg-blog-card .meta i {
    margin-right: 4px;
    color: var(--theme3);
}

.jg-blog-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.4;
}

.jg-blog-card h3 a {
    color: var(--header);
}

.jg-blog-card:hover h3 a {
    color: var(--theme);
}

.jg-blog-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.65;
}

.jg-blog-card .jg-btn-link {
    position: relative;
    z-index: 6;
    margin-top: auto;
}

.jg-view-all-btn {
    border: 0;
    background: var(--theme);
    color: #fff;
}

/* ---------- Service detail page ---------- */
.jg-service-banner {
    margin-bottom: 35px;
    border-radius: 18px;
    overflow: hidden;
    background: #f5f8fb;
}

.jg-service-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.jg-service-content h2 {
    font-size: 36px;
    margin-bottom: 18px;
}

.jg-service-content h3 {
    font-size: 26px;
    margin: 45px 0 20px;
}

.jg-service-content p {
    margin-bottom: 16px;
    line-height: 1.8;
}

.jg-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.jg-feature-item {
    display: flex;
    gap: 16px;
    padding: 22px;
    background: #f5f8fb;
    border-radius: 14px;
}

.jg-feature-item .num {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: var(--theme);
}

.jg-feature-item h4 {
    font-size: 18px;
    margin-bottom: 6px;
}

.jg-feature-item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

.jg-process {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}

.jg-process li {
    position: relative;
    padding: 0 0 26px 62px;
    counter-increment: step;
}

.jg-process li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: var(--theme3);
}

.jg-process li::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 46px;
    bottom: 4px;
    width: 2px;
    background: #e6eef4;
}

.jg-process li:last-child::after {
    display: none;
}

.jg-process h4 {
    font-size: 18px;
    margin-bottom: 4px;
    padding-top: 9px;
}

.jg-process p {
    margin: 0;
}

.jg-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

.jg-check-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.jg-check-list li i {
    margin-top: 5px;
    color: var(--theme3);
}

.jg-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.jg-tech-list li {
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    color: var(--theme);
    background: #eaf2f8;
}

.jg-sidebar-card {
    margin-bottom: 30px;
    padding: 30px;
    border-radius: 16px;
    background: #f5f8fb;
}

.jg-sidebar-card h4 {
    margin-bottom: 20px;
}

.jg-sidebar-services {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jg-sidebar-services li + li {
    margin-top: 10px;
}

.jg-sidebar-services a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 10px;
    background: #fff;
    color: var(--header);
    font-weight: 600;
    transition: all .3s ease;
}

.jg-sidebar-services a:hover,
.jg-sidebar-services a.active {
    color: #fff;
    background: var(--theme);
}

.jg-sidebar-cta {
    color: #fff;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
}

.jg-sidebar-cta h4,
.jg-sidebar-cta p,
.jg-sidebar-cta a {
    color: #fff;
}

.jg-sidebar-cta .contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 600;
}

.jg-sidebar-cta .theme-btn {
    margin-top: 10px;
    background: var(--theme3);
}

.jg-cta-box {
    margin-top: 50px;
    padding: 40px;
    border-radius: 18px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
}

.jg-cta-box h3 {
    margin: 0 0 12px;
    color: #fff;
}

.jg-cta-box p {
    color: rgba(255, 255, 255, .85);
}

.jg-cta-box .theme-btn {
    margin-top: 10px;
    background: var(--theme3);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .jg-service-content h2 {
        font-size: 30px;
    }

    .jg-sidebar {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .jg-feature-grid,
    .jg-check-list {
        grid-template-columns: 1fr;
    }

    .jg-service-content h2 {
        font-size: 26px;
    }

    .jg-service-content h3 {
        font-size: 22px;
        margin-top: 35px;
    }

    .jg-testimonial-card p {
        min-height: 0;
    }

    .jg-cta-box {
        padding: 30px 20px;
    }
}

/* =========================================================
   Products / Digital Products pages
   ========================================================= */

/* ---------- Sidebar category filter ---------- */
.jg-filter-card {
    padding: 24px 22px;
    border-radius: 4px;
    background: #f7f7f7;
}

.jg-filter-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--header);
    font-size: 20px;
    font-weight: 700;
}

.jg-filter-head i {
    font-size: 14px;
    transition: transform .3s ease;
}

.jg-filter-head.collapsed i {
    transform: rotate(180deg);
}

.jg-filter-list,
.jg-filter-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jg-filter-list {
    padding-top: 16px;
}

.jg-filter-list > li + li {
    margin-top: 12px;
}

.jg-filter-sublist {
    margin-top: 10px;
    padding-left: 30px;
}

.jg-filter-sublist[hidden] {
    display: none;
}

.jg-filter-sublist li + li {
    margin-top: 8px;
}

.jg-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.jg-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.jg-check .box {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid #dcdcdc;
    border-radius: 2px;
    background: #fff;
    transition: background .2s ease, border-color .2s ease;
}

.jg-check input:checked + .box {
    border-color: var(--theme);
    background: var(--theme);
}

.jg-check input:checked + .box::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.jg-check input:focus-visible + .box {
    outline: 2px solid var(--theme3);
    outline-offset: 2px;
}

.jg-check .text {
    color: #6b6b6b;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    text-transform: uppercase;
}

.jg-filter-sublist .jg-check .text {
    font-size: 14px;
}

.jg-check:hover .text,
.jg-check input:checked ~ .text {
    color: var(--theme);
}

.jg-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--theme3);
    font-size: 14px;
    font-weight: 600;
}

.jg-filter-empty {
    margin: 16px 0 0;
    font-size: 15px;
}

/* ---------- Product grid ---------- */
/* Product card - Trending, Digital Products, Shop page (badhe ek j design) */
.jg-product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 71, 111, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}

.jg-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 71, 111, .14);
}

/* Aakhi image dekhay (crop na thay) - recommended upload 800 x 800 px */
.jg-product-card .thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    padding: 18px;
    overflow: hidden;
    background: #f7f7f7;
}

.jg-product-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .5s ease;
}

.jg-product-card:hover .thumb img {
    transform: scale(1.05);
}

.jg-product-card .badge-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 9px 12px;
    border-radius: 30px;
    background: var(--theme);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.jg-product-card .body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
}

.jg-product-card .cat {
    margin-bottom: 10px;
    color: #7a7a7a;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.jg-product-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    margin-bottom: 18px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.jg-product-card h3 a {
    color: var(--header);
}

.jg-product-card:hover h3 a {
    color: var(--theme);
}

.jg-product-card .jg-price {
    margin-top: auto;
}

.jg-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    color: var(--theme);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.jg-price del {
    color: #999;
    font-size: 15px;
    font-weight: 500;
}

/* Swiper ma badha card ni height sarkhi */
.shop-slider-4 .swiper-slide,
.jg-digital-slider .swiper-slide {
    height: auto;
}

.shop-slider-4 {
    padding: 10px 6px 30px;
}

.jg-pagination {
    margin-top: 40px;
}

.jg-pagination .pagination {
    --bs-pagination-color: var(--theme);
    --bs-pagination-hover-color: var(--theme);
    --bs-pagination-active-bg: var(--theme);
    --bs-pagination-active-border-color: var(--theme);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(0, 71, 111, .2);
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.jg-store-empty {
    padding: 60px 20px;
    border-radius: 14px;
    text-align: center;
    background: #f5f8fb;
}

.jg-store-empty i {
    margin-bottom: 18px;
    color: var(--theme);
    font-size: 48px;
}

.jg-store-empty h3 {
    margin-bottom: 10px;
}

.jg-store-empty .theme-btn {
    margin-top: 10px;
    background: var(--theme3);
    color: #fff;
}

/* ---------- Digital product detail ---------- */
.jg-dp-image {
    max-width: 460px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 18px;
    background: #f5f8fb;
    box-shadow: 0 10px 35px rgba(0, 71, 111, .08);
}

.jg-dp-image img {
    display: block;
    width: 100%;
    height: auto;
}

.jg-dp-info .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.jg-dp-info .chips a {
    padding: 6px 14px;
    border-radius: 30px;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.jg-dp-info .chips a:hover {
    background: var(--theme);
    color: #fff;
}

.jg-dp-info h2 {
    margin-bottom: 18px;
    font-size: 36px;
    line-height: 1.25;
}

.jg-dp-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.jg-dp-price .now {
    color: var(--theme);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.jg-dp-price del {
    color: #999;
    font-size: 18px;
}

.jg-dp-price .save {
    padding: 5px 12px;
    border-radius: 30px;
    background: #e7f6ec;
    color: #1a7f37;
    font-size: 14px;
    font-weight: 600;
}

.jg-dp-info .short {
    margin-bottom: 28px;
    font-size: 17px;
    line-height: 1.7;
}

.jg-dp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jg-dp-actions .theme-btn {
    border: 0;
    background: var(--theme3);
    color: #fff;
}

.jg-dp-actions .theme-btn:disabled {
    opacity: .7;
    cursor: wait;
}

.jg-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 28px;
    border: 1px solid var(--theme);
    color: var(--theme);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    transition: background .3s ease, color .3s ease;
}

.jg-outline-btn:hover {
    background: var(--theme);
    color: #fff;
}

.jg-dp-description,
.jg-related {
    margin-top: 60px;
}

.jg-dp-description {
    padding: 36px;
    border-radius: 16px;
    background: #f5f8fb;
}

.jg-dp-description h3,
.jg-related h3 {
    margin-bottom: 20px;
}

.jg-rich-text p,
.jg-rich-text ul,
.jg-rich-text ol {
    margin-bottom: 14px;
}

.jg-rich-text ul,
.jg-rich-text ol {
    padding-left: 22px;
}

.jg-rich-text ul {
    list-style: disc;
}

.jg-rich-text ol {
    list-style: decimal;
}

.jg-rich-text img {
    max-width: 100%;
    height: auto;
}

.jg-rich-text table {
    width: 100%;
    margin-bottom: 14px;
    border-collapse: collapse;
}

.jg-rich-text td,
.jg-rich-text th {
    padding: 8px 12px;
    border: 1px solid #dde5ec;
}

@media (max-width: 991px) {
    .jg-dp-info h2 {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .jg-dp-info h2 {
        font-size: 26px;
    }

    .jg-dp-price .now {
        font-size: 28px;
    }

    .jg-dp-description {
        padding: 24px 18px;
    }

    .jg-rich-text {
        overflow-x: auto;
    }
}

/* =========================================================
   My Downloads + download page
   ========================================================= */
.jg-downloads {
    max-width: 960px;
    margin: 0 auto;
}

.jg-download-item {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 71, 111, .08);
}

.jg-download-item + .jg-download-item {
    margin-top: 18px;
}

.jg-download-item .thumb {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: #f5f8fb;
    color: var(--theme);
    font-size: 34px;
}

.jg-download-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jg-download-item .info {
    flex: 1;
    min-width: 0;
}

.jg-download-item h3 {
    margin-bottom: 8px;
    font-size: 20px;
}

.jg-download-item .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.jg-download-item .meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    word-break: break-all;
}

.jg-download-item .meta i {
    color: var(--theme3);
}

.jg-download-item .theme-btn,
.jg-download-card .theme-btn {
    background: var(--theme3);
    color: #fff;
    white-space: nowrap;
}

.jg-download-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 44px 36px;
    border-radius: 18px;
    text-align: center;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 71, 111, .12);
}

.jg-download-card .status-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f6ec;
    color: #1a7f37;
    font-size: 28px;
}

.jg-download-card .label {
    display: block;
    margin-bottom: 20px;
    color: #1a7f37;
    font-weight: 600;
}

.jg-download-card .product-image {
    width: 160px;
    height: 160px;
    margin: 0 auto 18px;
    object-fit: contain;
    border-radius: 12px;
    background: #f5f8fb;
}

.jg-download-card h2 {
    margin-bottom: 8px;
    font-size: 28px;
}

.jg-download-card .purchased {
    margin-bottom: 26px;
    font-size: 15px;
}

.jg-download-card .validity {
    margin: 22px 0 6px;
    font-size: 15px;
}

.jg-download-card .validity.expired {
    color: #c0392b;
}

.jg-download-card .note {
    margin: 0;
    font-size: 14px;
}

.jg-download-card .note a {
    color: var(--theme);
    font-weight: 600;
}

@media (max-width: 575px) {
    .jg-download-item {
        flex-wrap: wrap;
        gap: 14px;
        padding: 16px;
    }

    .jg-download-item .thumb {
        flex-basis: 70px;
        width: 70px;
        height: 70px;
    }

    .jg-download-item .info {
        flex: 1 1 calc(100% - 90px);
    }

    .jg-download-item .action,
    .jg-download-item .theme-btn {
        width: 100%;
        text-align: center;
    }

    .jg-download-card {
        padding: 32px 20px;
    }
}

/* ---------- Product detail - short description ---------- */
.jg-short-description {
    margin: 18px 0 22px;
    font-size: 16px;
    line-height: 1.7;
}

.jg-short-description > :last-child {
    margin-bottom: 0;
}

/* ---------- Product cards (Trending, Shop, Category) - fix size image + aakhu card clickable ---------- */
.shop-card-items,
.jg-product-card {
    position: relative;
}

.jg-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* Fix square box (recommended upload 800 x 800 px) - koi pan size ni image aakhi dekhay, kapay nahi */
.shop-card-items .thumb {
    aspect-ratio: 1 / 1;
    padding: 12px;
    background: #fff;
}

.shop-card-items .thumb > a {
    display: block;
    width: 100%;
    height: 100%;
}

.shop-card-items .thumb img,
.shop-card-items .thumb .font-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Theme ni front/back image swap - banne same image chhe etle fakt halko zoom */
.shop-card-items .thumb .back-image {
    display: none;
}

.shop-card-items:hover .thumb .font-image {
    opacity: 1;
    visibility: visible;
    transform: scale(1.04);
}

/* ---------- Product detail - main image fix square box ---------- */
.gt-shop-details-wrapper .gt-shop-details-image {
    aspect-ratio: 1 / 1;
    padding: 20px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.gt-shop-details-wrapper .gt-shop-details-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-thumb-item img {
    object-fit: contain !important;
}

.shop-card-items .shop-content h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Home - Digital Products auto slider ---------- */
.jg-digital-section .section-title-area {
    margin-bottom: 30px;
}

/* View More - Trending Products jevu j: background nahi, fakt hover ma effect */
.jg-digital-section .section-title-area .theme-btn {
    background-color: transparent;
    border: 1px solid rgb(128, 128, 128);
}

.jg-digital-section .section-title-area .theme-btn:hover {
    border: 1px solid var(--theme4);
    color: var(--white);
}

.jg-digital-slider {
    padding: 10px 6px 30px;
}

/* ---------- Footer logo (dark footer par white box ma) ---------- */
.jg-footer-logo {
    display: inline-block;
    margin-bottom: 22px;
    padding: 10px 16px;
    border-radius: 10px;
    background: #fff;
}

.jg-footer-logo img {
    display: block;
    width: auto;
    height: 56px;
}

/* =========================================================
   Home - Shop By Category
   ========================================================= */
.jg-category-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 22px;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    text-align: center;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 71, 111, .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.jg-category-card:hover {
    transform: translateY(-6px);
    border-color: var(--theme);
    box-shadow: 0 18px 40px rgba(0, 71, 111, .14);
}

/* Square image box (gol nahi) */
.jg-category-card .thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: #f1f6fa;
    transition: background .3s ease;
}

.jg-category-card:hover .thumb {
    background: #e2edf6;
}

.jg-category-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
}

.jg-category-card:hover .thumb img {
    transform: scale(1.08);
}

.jg-category-card .name {
    color: var(--header);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.jg-category-card:hover .name {
    color: var(--theme);
}


/* =========================================================
   Product detail page
   ========================================================= */
.jg-pd-gallery {
    position: sticky;
    top: 110px;
}

.jg-pd-main {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #eef0f3;
    border-radius: 20px;
    background: #f7f7f7;
}

.jg-pd-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jg-pd-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 9px 14px;
    border-radius: 30px;
    background: var(--theme);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.jg-pd-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.jg-pd-thumb {
    width: 82px;
    height: 82px;
    padding: 6px;
    border: 2px solid #eef0f3;
    border-radius: 12px;
    background: #f7f7f7;
    transition: border-color .2s ease;
}

.jg-pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jg-pd-thumb:hover,
.jg-pd-thumb.active {
    border-color: var(--theme);
}

.jg-pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.jg-pd-chips a {
    padding: 6px 14px;
    border-radius: 30px;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.jg-pd-chips a:hover {
    background: var(--theme);
    color: #fff;
}

.jg-pd-title {
    margin-bottom: 12px;
    font-size: 34px;
    line-height: 1.25;
}

.jg-pd-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--text);
    font-size: 14px;
}

.jg-pd-rating .stars,
.jg-rating-summary .stars,
.jg-review .stars {
    color: #f5a623;
}

.jg-pd-rating:hover {
    color: var(--theme);
}

.jg-pd-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.jg-pd-price .now {
    color: var(--theme);
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.jg-pd-price del {
    color: #999;
    font-size: 20px;
}

.jg-pd-price .save {
    padding: 5px 12px;
    border-radius: 30px;
    background: #e7f6ec;
    color: #1a7f37;
    font-size: 14px;
    font-weight: 600;
}

.jg-pd-tax {
    margin: 8px 0 14px;
    color: #8a8a8a;
    font-size: 13px;
}

.jg-pd-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 600;
}

.jg-pd-stock.in {
    color: #1a7f37;
}

.jg-pd-stock.out {
    color: #c0392b;
}

.jg-pd-short {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eef0f3;
    font-size: 16px;
    line-height: 1.7;
}

.jg-pd-short > :last-child {
    margin-bottom: 0;
}

.jg-pd-buy {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #eef0f3;
}

.jg-pd-sizes {
    margin-bottom: 20px;
}

.jg-pd-sizes .label {
    display: block;
    margin-bottom: 10px;
    color: var(--header);
    font-weight: 600;
}

.jg-pd-sizes .options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jg-size-option {
    min-width: 52px;
    padding: 9px 16px;
    border: 1.5px solid #dfe5eb;
    border-radius: 10px;
    background: #fff;
    color: var(--header);
    font-weight: 600;
    transition: all .2s ease;
}

.jg-size-option:hover,
.jg-size-option.active {
    border-color: var(--theme);
    background: var(--theme);
    color: #fff;
}

.jg-pd-actions {
    display: flex;
    gap: 14px;
}

.jg-qty {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1.5px solid #dfe5eb;
    border-radius: 12px;
    background: #fff;
}

.jg-qty-btn {
    width: 46px;
    height: 52px;
    border: 0;
    background: transparent;
    color: var(--theme);
}

.jg-qty-btn:disabled {
    color: #bbb;
}

.jg-qty input {
    width: 48px;
    height: 52px;
    border: 0;
    background: transparent;
    color: var(--header);
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

.jg-qty input::-webkit-outer-spin-button,
.jg-qty input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.jg-pd-cart-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 28px;
    border: 0;
    border-radius: 12px;
    background: var(--theme);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: background .3s ease;
}

.jg-pd-cart-btn:hover {
    background: var(--theme2);
}

.jg-pd-cart-btn:disabled {
    background: #a0a7ae;
    cursor: not-allowed;
}

.jg-pd-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.jg-pd-features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 10px;
    border-radius: 14px;
    text-align: center;
    background: #f5f8fb;
    color: var(--header);
    font-size: 14px;
    font-weight: 600;
}

.jg-pd-features .icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--theme);
    font-size: 18px;
    box-shadow: 0 6px 16px rgba(0, 71, 111, .1);
}

/* ---------- Tabs ---------- */
.jg-pd-tabs {
    margin-top: 70px;
    scroll-margin-top: 120px;
}

.jg-pd-tabs .nav {
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #eef0f3;
}

.jg-pd-tabs .nav-link {
    margin-bottom: -1px;
    padding: 12px 22px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
}

.jg-pd-tabs .nav-link.active,
.jg-pd-tabs .nav-link:hover {
    border-bottom-color: var(--theme);
    color: var(--theme);
}

.jg-pd-tabs .tab-content {
    padding: 30px;
    border-radius: 18px;
    background: #f9fafb;
}

.jg-rating-summary {
    padding: 26px;
    border-radius: 16px;
    text-align: center;
    background: #fff;
}

.jg-rating-summary .score {
    color: var(--header);
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
}

.jg-rating-summary .stars {
    margin: 10px 0 6px;
    font-size: 18px;
}

.jg-rating-summary p {
    margin-bottom: 18px;
    font-size: 14px;
}

.jg-rating-summary .bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.jg-rating-summary .bar-row + .bar-row {
    margin-top: 8px;
}

.jg-rating-summary .bar-row > span:first-child {
    width: 34px;
    text-align: left;
}

.jg-rating-summary .bar-row i {
    color: #f5a623;
}

.jg-rating-summary .bar {
    flex: 1;
    height: 8px;
    overflow: hidden;
    border-radius: 10px;
    background: #eef0f3;
}

.jg-rating-summary .bar span {
    display: block;
    height: 100%;
    border-radius: 10px;
    background: #f5a623;
}

.jg-review {
    display: flex;
    gap: 16px;
    padding: 20px;
    border-radius: 14px;
    background: #fff;
}

.jg-review + .jg-review {
    margin-top: 14px;
}

.jg-review .avatar {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.jg-review .body {
    flex: 1;
    min-width: 0;
}

.jg-review .head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.jg-review .head strong {
    color: var(--header);
}

.jg-review .date {
    display: block;
    margin: 2px 0 8px;
    color: #9a9a9a;
    font-size: 13px;
}

.jg-review p {
    margin: 0;
    font-size: 15px;
}

.jg-review-empty {
    padding: 20px;
    border-radius: 14px;
    background: #fff;
}

.jg-review-form,
.jg-review-login {
    margin-top: 24px;
    padding: 24px;
    border-radius: 14px;
    background: #fff;
}

.jg-review-form h4 {
    margin-bottom: 14px;
}

.jg-review-form input,
.jg-review-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #dfe5eb;
    border-radius: 10px;
    background: #fff;
    color: var(--header);
    outline: none;
}

.jg-review-form input:focus,
.jg-review-form textarea:focus {
    border-color: var(--theme);
}

.jg-star-input {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.jg-star-input span {
    margin-right: 8px;
    color: var(--header);
    font-weight: 600;
}

.jg-star-input button {
    padding: 2px;
    border: 0;
    background: transparent;
    color: #d5d9de;
    font-size: 20px;
}

.jg-star-input button.active,
.jg-star-input button:hover {
    color: #f5a623;
}

.jg-review-login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.jg-review-login i {
    color: var(--theme);
    font-size: 20px;
}

.jg-review-login a {
    color: var(--theme);
    font-weight: 700;
}

.jg-pd .jg-related {
    margin-top: 70px;
}

@media (max-width: 991px) {
    .jg-pd-gallery {
        position: static;
    }

    .jg-pd-title {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .jg-pd-main {
        padding: 18px;
    }

    .jg-pd-title {
        font-size: 24px;
    }

    .jg-pd-price .now {
        font-size: 30px;
    }

    .jg-pd-actions {
        flex-direction: column;
    }

    .jg-qty {
        justify-content: space-between;
    }

    .jg-pd-features {
        grid-template-columns: 1fr;
    }

    .jg-pd-features li {
        flex-direction: row;
        text-align: left;
    }

    .jg-pd-tabs .tab-content {
        padding: 18px;
    }

    .jg-pd-tabs .nav-link {
        padding: 10px 14px;
        font-size: 15px;
    }
}


/* =========================================================
   Blog listing + detail page
   ========================================================= */
.jg-blog-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #f5f8fb;
}

.jg-blog-result a {
    color: var(--theme3);
    font-weight: 600;
}

/* ---------- Sidebar ---------- */
.jg-blog-sidebar {
    position: sticky;
    top: 110px;
}

.jg-blog-widget {
    margin-bottom: 26px;
    padding: 26px;
    border-radius: 16px;
    background: #f5f8fb;
}

.jg-blog-widget h4 {
    position: relative;
    margin-bottom: 18px;
    padding-bottom: 12px;
    font-size: 20px;
}

.jg-blog-widget h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: var(--theme3);
}

.jg-blog-search {
    display: flex;
    overflow: hidden;
    border: 1.5px solid #dfe5eb;
    border-radius: 10px;
    background: #fff;
}

.jg-blog-search input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: var(--header) !important;
    outline: none;
}

.jg-blog-search input::placeholder {
    color: #8a8a8a;
    opacity: 1;
}

.jg-blog-search:focus-within {
    border-color: var(--theme);
}

.jg-blog-search button {
    width: 50px;
    border: 0;
    background: var(--theme);
    color: #fff;
}

.jg-blog-cats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-blog-cats li + li {
    margin-top: 8px;
}

.jg-blog-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff;
    color: var(--header);
    font-weight: 500;
    transition: all .25s ease;
}

.jg-blog-cats .count {
    min-width: 28px;
    padding: 3px 8px;
    border-radius: 20px;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.jg-blog-cats a:hover,
.jg-blog-cats a.active {
    background: var(--theme);
    color: #fff;
}

.jg-blog-cats a:hover .count,
.jg-blog-cats a.active .count {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.jg-recent-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-recent-posts li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jg-recent-posts li + li {
    margin-top: 16px;
}

.jg-recent-posts .thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 70px;
    overflow: hidden;
    border-radius: 10px;
}

.jg-recent-posts .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jg-recent-posts .date {
    display: block;
    margin-bottom: 4px;
    color: #8a8a8a;
    font-size: 12px;
}

.jg-recent-posts .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--header);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.jg-recent-posts .title:hover {
    color: var(--theme);
}

.jg-blog-cta {
    color: #fff;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
}

.jg-blog-cta h4,
.jg-blog-cta p {
    color: #fff;
}

.jg-blog-cta .theme-btn {
    background: var(--theme3);
    color: #fff;
}

/* ---------- Detail page ---------- */
.jg-blog-article .cover {
    overflow: hidden;
    border-radius: 20px;
    background: #eef3f7;
}

.jg-blog-article .cover img {
    display: block;
    width: 100%;
    height: auto;
}

.jg-blog-article .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin: 24px 0 14px;
    padding: 0;
    list-style: none;
    color: #7a7a7a;
    font-size: 14px;
}

.jg-blog-article .meta i {
    margin-right: 5px;
    color: var(--theme3);
}

.jg-blog-article .meta .cat {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.jg-blog-article .title {
    margin-bottom: 22px;
    font-size: 34px;
    line-height: 1.3;
}

.jg-blog-content {
    font-size: 17px;
    line-height: 1.8;
}

.jg-blog-content h2,
.jg-blog-content h3,
.jg-blog-content h4 {
    margin: 28px 0 12px;
}

.jg-blog-content img {
    margin: 10px 0;
    border-radius: 12px;
}

.jg-blog-content blockquote {
    margin: 20px 0;
    padding: 18px 22px;
    border-left: 4px solid var(--theme3);
    border-radius: 0 12px 12px 0;
    background: #f5f8fb;
}

.jg-blog-content a {
    color: var(--theme);
    text-decoration: underline;
}

.jg-blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #eef0f3;
}

.jg-blog-share span {
    margin-right: 6px;
    color: var(--header);
    font-weight: 600;
}

.jg-blog-share a,
.jg-blog-share button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #eaf2f8;
    color: var(--theme);
    transition: all .25s ease;
}

.jg-blog-share a:hover,
.jg-blog-share button:hover {
    background: var(--theme);
    color: #fff;
}

.jg-blog-share button.copied {
    background: #1a7f37;
    color: #fff;
}

@media (max-width: 991px) {
    .jg-blog-sidebar {
        position: static;
    }

    .jg-blog-article .title {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .jg-blog-article .title {
        font-size: 24px;
    }

    .jg-blog-content {
        font-size: 16px;
    }

    .jg-blog-widget {
        padding: 20px;
    }
}

/* =========================================================
   Footer
   ========================================================= */
.jg-footer {
    position: relative;
    margin-top: 40px;
}

.jg-footer-cta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 40px 48px;
    border-radius: 22px;
    background: linear-gradient(120deg, var(--theme) 0%, var(--theme2) 60%, #2a6fa5 100%);
    box-shadow: 0 20px 50px rgba(0, 71, 111, .3);
}

.jg-footer-cta::before,
.jg-footer-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.jg-footer-cta::before {
    width: 260px;
    height: 260px;
    top: -120px;
    right: 18%;
}

.jg-footer-cta::after {
    width: 180px;
    height: 180px;
    bottom: -90px;
    right: -40px;
}

.jg-footer-cta .text {
    position: relative;
    max-width: 620px;
}

.jg-footer-cta .eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--theme3);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.jg-footer-cta h3 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.35;
}

.jg-footer-cta .actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jg-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 12px;
    font-weight: 600;
    line-height: 1;
    transition: all .3s ease;
}

.jg-footer-btn.primary {
    background: var(--theme3);
    color: #fff;
}

.jg-footer-btn.primary:hover {
    background: #fff;
    color: var(--theme);
}

.jg-footer-btn.outline {
    border: 1.5px solid rgba(255, 255, 255, .6);
    color: #fff;
}

.jg-footer-btn.outline:hover {
    border-color: #fff;
    background: #fff;
    color: var(--theme);
}

.jg-footer-main {
    margin-top: -70px;
    padding: 140px 0 60px;
    background:
        radial-gradient(circle at 10% 20%, rgba(225, 146, 75, .08), transparent 35%),
        radial-gradient(circle at 90% 80%, rgba(42, 111, 165, .25), transparent 40%),
        linear-gradient(180deg, #05263b 0%, #031a29 100%);
    color: rgba(255, 255, 255, .72);
}

.jg-footer-main.no-cta {
    margin-top: 0;
    padding-top: 80px;
}

.jg-footer-about {
    margin-bottom: 24px;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.8;
}

.jg-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jg-footer-social a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    transition: all .3s ease;
}

.jg-footer-social a:hover {
    transform: translateY(-3px);
    border-color: var(--theme3);
    background: var(--theme3);
}

.jg-footer-title {
    position: relative;
    margin-bottom: 26px;
    padding-bottom: 14px;
    color: #fff;
    font-size: 20px;
}

.jg-footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: var(--theme3);
}

.jg-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-footer-links li + li {
    margin-top: 12px;
}

.jg-footer-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    transition: color .25s ease, padding .25s ease;
}

.jg-footer-links a::before {
    content: "\f105";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 12px;
    color: var(--theme3);
}

.jg-footer-links a:hover {
    padding-left: 6px;
    color: #fff;
}

.jg-footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.jg-footer-contact li + li {
    margin-top: 18px;
}

.jg-footer-contact .icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: var(--theme3);
}

.jg-footer-contact small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.jg-footer-contact a,
.jg-footer-contact span {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    word-break: break-word;
}

.jg-footer-contact a:hover {
    color: var(--theme3);
}

.jg-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #021420;
}

.jg-footer-bottom .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 20px 0;
}

.jg-footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
}

.jg-footer-bottom p a {
    color: #fff;
    font-weight: 600;
}

.jg-footer-bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-footer-bottom ul a {
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
}

.jg-footer-bottom ul a:hover {
    color: var(--theme3);
}

@media (max-width: 991px) {
    .jg-footer-cta {
        padding: 32px;
    }

    .jg-footer-cta h3 {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .jg-footer-cta {
        padding: 28px 22px;
        text-align: center;
        justify-content: center;
    }

    .jg-footer-cta .actions {
        width: 100%;
        justify-content: center;
    }

    .jg-footer-cta h3 {
        font-size: 21px;
    }

    .jg-footer-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .jg-footer-main {
        padding-top: 120px;
    }

    .jg-footer-bottom .inner {
        justify-content: center;
        text-align: center;
    }

    .jg-footer-bottom ul {
        justify-content: center;
    }
}


/* =========================================================
   Global design - badha frontend pages (footer jevo look)
   ========================================================= */

/* ---------- Page banner (breadcrumb) - badha andar na pages ---------- */
.breadcrumb-wrapper {
    background-image:
        radial-gradient(circle at 12% 30%, rgba(225, 146, 75, .18), transparent 32%),
        radial-gradient(circle at 88% 70%, rgba(42, 111, 165, .45), transparent 40%),
        linear-gradient(135deg, #05263b 0%, var(--theme) 55%, var(--theme2) 100%) !important;
    background-size: cover !important;
}

.breadcrumb-wrapper::before,
.breadcrumb-wrapper::after {
    content: "";
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
}

.breadcrumb-wrapper::before {
    width: 340px;
    height: 340px;
    top: -170px;
    right: 8%;
    border: 50px solid rgba(255, 255, 255, .05);
}

.breadcrumb-wrapper::after {
    width: 180px;
    height: 180px;
    bottom: -90px;
    left: 6%;
    background: rgba(255, 255, 255, .05);
}

.breadcrumb-wrapper .page-heading {
    padding: 175px 0 95px;
}

.breadcrumb-wrapper .page-heading h1 {
    color: #fff;
    font-size: 48px;
    line-height: 1.2;
}

.breadcrumb-wrapper .page-heading .breadcrumb-items {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 18px;
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 40px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
}

.breadcrumb-wrapper .page-heading .breadcrumb-items li,
.breadcrumb-wrapper .page-heading .breadcrumb-items li a {
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}

.breadcrumb-wrapper .page-heading .breadcrumb-items li:last-child {
    color: var(--theme3);
}

.breadcrumb-wrapper .page-heading .breadcrumb-items li a i {
    color: var(--theme3);
}

.breadcrumb-wrapper .page-heading .breadcrumb-items li a:hover {
    color: #fff;
}

/* ---------- Section heading ---------- */
.jg-section-title .sub-title,
.section-title .sub-title {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    background: rgba(225, 146, 75, .12);
    color: var(--theme3);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.jg-section-title h2 {
    margin-top: 12px;
}

/* ---------- Service cards ---------- */
.jg-service-card {
    border: 1px solid #eef0f3;
    border-top: 4px solid transparent;
}

.jg-service-card .icon {
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    font-size: 28px;
    box-shadow: 0 10px 24px rgba(0, 71, 111, .25);
}

.jg-service-card:hover .icon {
    background: linear-gradient(135deg, var(--theme3), #f0a868);
}

/* ---------- About page ---------- */
.jg-about-media {
    position: relative;
    padding: 0 0 30px 30px;
}

.jg-about-media::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70%;
    height: 70%;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--theme3), #f0a868);
    opacity: .9;
}

.jg-about-media img {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 71, 111, .18);
}

.jg-about-badge {
    position: absolute;
    right: 20px;
    bottom: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 71, 111, .18);
}

.jg-about-badge i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--theme);
    color: #fff;
}

.jg-about-badge strong {
    display: block;
    color: var(--header);
}

.jg-about-badge span {
    font-size: 13px;
}

.jg-about-text {
    margin-top: 18px;
}

.jg-about-text p {
    font-size: 16px;
    line-height: 1.8;
}

.jg-about-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
    margin: 22px 0 30px;
    padding: 0;
    list-style: none;
}

.jg-about-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--header);
    font-weight: 500;
}

.jg-about-list i {
    margin-top: 4px;
    color: var(--theme3);
}

.jg-about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.jg-about-actions .theme-btn {
    border-radius: 10px;
    background: var(--theme);
    color: #fff;
}

.jg-about-actions .jg-outline-btn {
    border-radius: 10px;
}

.jg-mv-card,
.jg-why-card {
    height: 100%;
    padding: 34px 30px;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 71, 111, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}

.jg-mv-card:hover,
.jg-why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 71, 111, .14);
}

.jg-mv-card .icon,
.jg-why-card .icon {
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    font-size: 24px;
}

.jg-why-card {
    text-align: center;
}

.jg-why-card .icon {
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

.jg-mv-card h3,
.jg-why-card h4 {
    margin-bottom: 10px;
}

.jg-mv-card p,
.jg-why-card p {
    margin: 0;
    line-height: 1.7;
}

/* ---------- Contact page ---------- */
.jg-contact-card {
    height: 100%;
    padding: 32px 26px;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    text-align: center;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 71, 111, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}

.jg-contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 71, 111, .14);
}

.jg-contact-card .icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(0, 71, 111, .25);
}

.jg-contact-card h4 {
    margin-bottom: 10px;
}

.jg-contact-card p {
    margin: 0 0 4px;
    word-break: break-word;
}

.jg-contact-card a {
    color: var(--text);
}

.jg-contact-card a:hover {
    color: var(--theme);
}

.jg-contact-wrap {
    overflow: hidden;
    border: 1px solid #eef0f3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(0, 71, 111, .1);
}

.jg-contact-map,
.jg-contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
}

.jg-contact-form {
    padding: 44px;
}

.jg-contact-form .sub-title {
    color: var(--theme3);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.jg-contact-form h3 {
    margin: 6px 0 24px;
    font-size: 30px;
}

.jg-contact-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--header);
    font-size: 14px;
    font-weight: 600;
}

.jg-contact-form input,
.jg-contact-form textarea,
.login-form-items .form-group input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #dfe5eb;
    border-radius: 10px;
    background: #f9fbfc;
    color: var(--header);
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}

.jg-contact-form input:focus,
.jg-contact-form textarea:focus,
.login-form-items .form-group input:focus {
    border-color: var(--theme);
    background: #fff;
}

.jg-contact-form .jg-pd-cart-btn {
    flex: none;
    padding: 14px 32px;
}

.jg-form-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}

.jg-form-alert.error {
    background: #fdecea;
    color: #b42318;
}

/* ---------- Login / Register / Password pages ---------- */
.login-form-items {
    padding: 44px 40px;
    border: 1px solid #eef0f3;
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(0, 71, 111, .1);
}

.login-form-items h2 {
    font-size: 28px;
}

.login-form-items .theme-btn {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: var(--theme);
    color: #fff;
    text-align: center;
}

.login-form-items .theme-btn::before,
.login-form-items .theme-btn::after {
    background-color: var(--theme2);
}

.login-form-items a {
    color: var(--theme);
}

/* ---------- Policy pages ---------- */
.jg-policy-card {
    padding: 44px;
    border: 1px solid #eef0f3;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(0, 71, 111, .07);
    font-size: 16px;
    line-height: 1.8;
}

.jg-policy-card p:empty {
    display: none;
}

.jg-policy-card h1,
.jg-policy-card h2,
.jg-policy-card h3,
.jg-policy-card h4,
.jg-policy-card strong {
    color: var(--header);
}

/* ---------- FAQ page ---------- */
.jg-faq-list .accordion-box .accordion {
    margin-bottom: 14px;
    padding: 0 22px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 71, 111, .05);
}

.jg-faq-list .accordion-box .accordion.active-block {
    border-color: rgba(0, 71, 111, .25);
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 991px) {
    .breadcrumb-wrapper .page-heading {
        padding: 150px 0 80px;
    }

    .breadcrumb-wrapper .page-heading h1 {
        font-size: 38px;
    }

    .jg-contact-form {
        padding: 34px 28px;
    }

    .jg-contact-map,
    .jg-contact-map iframe {
        min-height: 300px;
    }
}

@media (max-width: 767px) {
    .section-padding {
        padding: 70px 0;
    }

    .breadcrumb-wrapper .page-heading {
        padding: 130px 0 60px;
    }

    .breadcrumb-wrapper .page-heading h1 {
        font-size: 30px;
    }

    .breadcrumb-wrapper .page-heading .breadcrumb-items {
        padding: 7px 14px;
    }

    .breadcrumb-wrapper .page-heading .breadcrumb-items li,
    .breadcrumb-wrapper .page-heading .breadcrumb-items li a {
        font-size: 13px;
    }

    .section-title h2,
    .jg-section-title h2 {
        font-size: 30px;
    }

    .jg-section-title {
        margin-bottom: 32px;
    }

    /* Services card - mobile ma ochhi jagya */
    .jg-service-card {
        padding: 26px 22px;
    }

    .jg-service-card .icon {
        width: 58px;
        height: 58px;
        margin-bottom: 16px;
        font-size: 22px;
    }

    .jg-about-media {
        padding: 0 0 20px 20px;
    }

    .jg-about-badge {
        right: 10px;
        bottom: 36px;
        padding: 10px 14px;
    }

    .jg-about-list {
        grid-template-columns: 1fr;
    }

    .jg-policy-card {
        padding: 26px 20px;
        font-size: 15px;
    }

    .login-form-items {
        padding: 30px 22px;
    }

    .jg-contact-form h3 {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .section-padding {
        padding: 60px 0;
    }

    .section-title h2,
    .jg-section-title h2 {
        font-size: 26px;
    }

    .jg-contact-form {
        padding: 26px 18px;
    }

    .jg-faq-list .accordion-box .accordion {
        padding: 0 16px;
    }
}

/* Email / link theme na capitalize thi na badlay */
.jg-contact-card p,
.jg-contact-card a,
.jg-footer-contact a,
.jg-sidebar-cta .contact-line,
.jg-faq-contact a {
    text-transform: none;
}

/* Breadcrumb pill - mobile ma pan lakhan jetli j pahodai */
.breadcrumb-wrapper .page-heading .breadcrumb-items {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* FAQ page - darek prashna saras box ma */
.jg-faq-list .accordion-box .accordion .acc-btn {
    padding: 18px 34px 18px 0;
    border: 0;
    font-size: 17px;
    line-height: 1.5;
}

.jg-faq-list .accordion-box .accordion .acc-content .text {
    padding: 0 0 18px;
}

.jg-faq-list .accordion-box {
    border-top: 0;
}

.faq-content.jg-faq-list .accordion-box {
    max-width: none;
    margin-top: 30px;
    padding-top: 0;
}

.faq-content.jg-faq-list .accordion-box .block .acc-btn .icon {
    top: 50%;
    height: auto;
    margin-top: -9px;
}

/* =========================================================
   Text editor content (product / digital / blog description, policy)
   Admin game te font sathe content paste kare - website par theme no j font
   ========================================================= */
.jg-rich-text,
.jg-rich-text *:not(i):not([class*="fa-"]) {
    font-family: "Plus Jakarta Sans", sans-serif !important;
}

/* ---------- On scroll load (Shop / Digital / Blog listing) ---------- */
.jg-infinite-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
    min-height: 40px;
    color: var(--text);
    font-size: 14px;
    visibility: hidden;
}

.jg-infinite-sentinel.is-loading {
    visibility: visible;
}

.jg-infinite-sentinel .spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #e2edf6;
    border-top-color: var(--theme);
    border-radius: 50%;
    animation: jg-spin .8s linear infinite;
}

@keyframes jg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Home - featured category sliders (card ni height sarkhi + shadow mate jagya) */
.jg-featured-slider {
    padding: 10px 6px 30px;
}

.jg-featured-slider .swiper-slide {
    height: auto;
}

/* ---------- Home - mobile ma title ni baju ma nanu "View More" button ---------- */
@media (max-width: 767px) {
    .section-title-area {
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 12px;
        margin-bottom: 24px;
    }

    .section-title-area .section-title {
        min-width: 0;
    }

    .section-title-area .section-title .sub-title {
        padding: 4px 10px;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .section-title-area .section-title h2 {
        margin-top: 8px;
        font-size: 22px;
        line-height: 1.25;
    }

    .section-title-area .theme-btn {
        flex: 0 0 auto;
        padding: 9px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* Home - FAQ ma contact box ni niche image */
.jg-faq-image {
    margin-top: 24px;
    overflow: hidden;
    border-radius: 18px;
}

.jg-faq-image img {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .jg-faq-image img {
        max-height: 260px;
    }
}


/* =========================================================
   Lucky Spin (Spin & Win) popup
   ========================================================= */
body.jg-spin-open {
    overflow: hidden;
}

.jg-spin-trigger {
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 0;
    border-radius: 40px;
    background: linear-gradient(135deg, var(--theme3), #f0a868);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(225, 146, 75, .45);
    animation: jg-spin-pulse 2s ease-in-out infinite;
}

.jg-spin-trigger[hidden] {
    display: none;
}

@keyframes jg-spin-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.jg-spin-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 20, 32, .72);
    backdrop-filter: blur(3px);
}

.jg-spin-overlay[hidden] {
    display: none;
}

.jg-spin-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 30px 26px 26px;
    border-radius: 24px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 15% 10%, rgba(225, 146, 75, .25), transparent 35%),
        radial-gradient(circle at 85% 90%, rgba(42, 111, 165, .5), transparent 40%),
        linear-gradient(160deg, #05263b 0%, var(--theme) 60%, var(--theme2) 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.jg-spin-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.jg-spin-close:hover {
    background: rgba(255, 255, 255, .25);
}

.jg-spin-head .badge-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 30px;
    background: rgba(225, 146, 75, .2);
    color: #f5b778;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.jg-spin-head h3 {
    margin: 12px 0 6px;
    color: #fff;
    font-size: 28px;
}

.jg-spin-head p {
    margin: 0;
    color: #f5b778;
    font-weight: 600;
}

.jg-spin-stage {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 26px auto 18px;
}

.jg-spin-wheel-ring {
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(225, 146, 75, .9), 0 16px 40px rgba(0, 0, 0, .35);
}

.jg-spin-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 5s cubic-bezier(.17, .67, .12, .99);
}

.jg-spin-wheel .seg {
    position: absolute;
    inset: 0;
}

.jg-spin-wheel .seg span {
    position: absolute;
    top: 9%;
    left: 50%;
    width: 34%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    text-transform: uppercase;
}

.jg-spin-pointer {
    position: absolute;
    top: -14px;
    left: 50%;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 30px solid var(--theme3);
    transform: translateX(-50%);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35));
}

.jg-spin-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme3), #f0a868);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
}

.jg-spin-hub:hover {
    color: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}

.jg-spin-hub:disabled {
    opacity: .75;
    cursor: wait;
}

.jg-spin-footer p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}

.jg-spin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1;
    transition: all .25s ease;
}

.jg-spin-btn.primary {
    background: var(--theme3);
    color: #fff;
}

.jg-spin-btn.primary:hover {
    background: var(--theme);
    color: #fff;
}

.jg-spin-btn.outline {
    border: 1.5px solid rgba(255, 255, 255, .6);
    background: transparent;
    color: #fff;
}

.jg-spin-btn.outline:hover {
    background: #fff;
    color: var(--theme);
}

.jg-spin-result {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 24px;
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(5, 38, 59, .97), rgba(0, 71, 111, .97));
}

.jg-spin-result[hidden],
.jg-spin-result [hidden] {
    display: none;
}

.jg-spin-result .emoji {
    font-size: 52px;
    line-height: 1;
}

.jg-spin-result h4 {
    margin: 12px 0 8px;
    color: #fff;
    font-size: 26px;
}

.jg-spin-result p {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .85);
}

.jg-spin-result .discount {
    color: #f5b778;
    font-size: 18px;
    font-weight: 700;
}

.jg-spin-result .code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0;
    padding: 10px 10px 10px 18px;
    border: 2px dashed #f5b778;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
}

.jg-spin-result .code-box span {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
}

.jg-spin-result .code-box button {
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--theme);
    font-size: 13px;
    font-weight: 700;
}

.jg-spin-result .applies {
    font-weight: 600;
}

.jg-spin-result .expires {
    color: #f5b778;
    font-size: 14px;
}

.jg-spin-result .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 575px) {
    .jg-spin-modal {
        padding: 26px 16px 20px;
    }

    .jg-spin-head h3 {
        font-size: 23px;
    }

    .jg-spin-stage {
        width: 250px;
        height: 250px;
    }

    .jg-spin-wheel .seg span {
        font-size: 11px;
    }

    .jg-spin-hub {
        width: 64px;
        height: 64px;
        font-size: 14px;
    }

    .jg-spin-trigger {
        left: 12px;
        bottom: 16px;
        padding: 10px 14px;
        font-size: 14px;
    }

    .jg-spin-result .code-box span {
        font-size: 18px;
    }
}

/* ---------- My Coupons page ---------- */
.jg-coupons {
    max-width: 960px;
    margin: 0 auto;
}

.jg-coupon-item {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 71, 111, .08);
}

.jg-coupon-item + .jg-coupon-item {
    margin-top: 18px;
}

.jg-coupon-item .left {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 14px;
    border-right: 2px dashed rgba(255, 255, 255, .5);
    text-align: center;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
}

.jg-coupon-item .left .discount {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
}

.jg-coupon-item .left .tag {
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .18);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.jg-coupon-item .middle {
    flex: 1;
    min-width: 0;
    padding: 20px 22px;
}

.jg-coupon-item .middle h3 {
    margin-bottom: 8px;
    font-size: 18px;
}

.jg-coupon-item .code {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 6px 8px 6px 14px;
    border: 1.5px dashed var(--theme);
    border-radius: 10px;
    background: #f7fbfe;
}

.jg-coupon-item .code span {
    color: var(--theme);
    font-weight: 800;
    letter-spacing: 1.5px;
}

.jg-coupon-item .code button {
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--theme);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.jg-coupon-item .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.jg-coupon-item .meta i {
    margin-right: 4px;
    color: var(--theme3);
}

.jg-coupon-item .right {
    display: flex;
    align-items: center;
    padding: 20px 22px 20px 0;
}

.jg-coupon-item .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
}

.jg-coupon-item .status.used {
    background: #e7f6ec;
    color: #1a7f37;
}

.jg-coupon-item .status.expired {
    background: #fdecea;
    color: #b42318;
}

.jg-coupon-item.used,
.jg-coupon-item.expired {
    opacity: .75;
}

.jg-coupon-item.expired .left,
.jg-coupon-item.used .left {
    background: linear-gradient(135deg, #7a8794, #9aa5b1);
}

@media (max-width: 767px) {
    .jg-coupon-item {
        flex-direction: column;
    }

    .jg-coupon-item .left {
        flex-basis: auto;
        flex-direction: row;
        border-right: 0;
        border-bottom: 2px dashed rgba(255, 255, 255, .5);
    }

    .jg-coupon-item .right {
        padding: 0 22px 20px;
    }

    .jg-coupon-item .right .jg-spin-btn {
        width: 100%;
    }
}


/* ---------- Checkout - user na Lucky Spin coupons ---------- */
.jg-checkout-coupons {
    margin-top: 14px;
}

.jg-checkout-coupons .title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--theme3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.jg-checkout-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px dashed var(--theme);
    border-radius: 10px;
    background: #f7fbfe;
}

.jg-checkout-coupon + .jg-checkout-coupon {
    margin-top: 8px;
}

.jg-checkout-coupon .info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jg-checkout-coupon .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.jg-checkout-coupon .code {
    color: var(--theme);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

.jg-checkout-coupon .off {
    padding: 2px 8px;
    border-radius: 20px;
    background: #e7f6ec;
    color: #1a7f37;
    font-size: 11px;
    font-weight: 700;
}

.jg-checkout-coupon .applies,
.jg-checkout-coupon .meta {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

.jg-checkout-coupon .meta {
    color: var(--theme3);
    font-weight: 600;
}

.jg-checkout-coupon .apply {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--theme);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.jg-checkout-coupon .apply:hover {
    background: var(--theme2);
}

/* Spin popup - claim note */
.jg-spin-result .claim-note {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}


/* ---------- Product detail - user no potano review ---------- */
.jg-my-review {
    margin-top: 24px;
    padding: 22px 24px;
    border: 1.5px solid rgba(0, 71, 111, .2);
    border-radius: 14px;
    background: #fff;
}

.jg-my-review[hidden],
.jg-review-form[hidden] {
    display: none;
}

.jg-my-review .head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.jg-my-review .head strong {
    color: var(--header);
    font-size: 17px;
}

.jg-my-review .badge-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.jg-my-review .badge-status.live {
    background: #e7f6ec;
    color: #1a7f37;
}

.jg-my-review .badge-status.pending {
    background: #fff4e5;
    color: #b25e09;
}

.jg-my-review .stars {
    color: #f5a623;
}

.jg-my-review p {
    margin: 8px 0 14px;
    font-size: 15px;
}

.jg-review-edit,
.jg-review-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1.5px solid var(--theme);
    border-radius: 10px;
    background: transparent;
    color: var(--theme);
    font-weight: 600;
    transition: all .25s ease;
}

.jg-review-edit:hover,
.jg-review-cancel:hover {
    background: var(--theme);
    color: #fff;
}

.jg-review-form .jg-pd-cart-btn {
    flex: none;
    padding: 12px 26px;
}

/* Spin popup - limit puri thay tyare */
.jg-spin-footer [hidden] {
    display: none;
}

.jg-spin-footer .jg-spin-btn.outline {
    margin-top: 4px;
}

.jg-spin-hub:disabled {
    cursor: not-allowed;
}


/* =========================================================
   Service detail page - section-wise content
   ========================================================= */
.jg-highlight-box {
    display: flex;
    gap: 16px;
    margin: 24px 0;
    padding: 22px 24px;
    border-left: 4px solid var(--theme3);
    border-radius: 0 14px 14px 0;
    background: #fff8f1;
}

.jg-highlight-box i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--theme3);
    font-size: 22px;
}

.jg-highlight-box p {
    margin: 0;
}

.jg-tag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-tag-grid li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    background: #fff;
    color: var(--header);
    font-size: 15px;
    font-weight: 500;
}

.jg-tag-grid li i {
    margin-top: 4px;
    color: var(--theme3);
}

.jg-mini-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.jg-mini-tags li {
    padding: 5px 12px;
    border-radius: 20px;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 13px;
    font-weight: 600;
}

.jg-why-grid,
.jg-type-list,
.jg-industry-list,
.jg-location-list,
.jg-tech-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.jg-why-box,
.jg-type-card,
.jg-industry-box,
.jg-location-card,
.jg-tech-group {
    padding: 24px;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(0, 71, 111, .06);
}

.jg-why-box .icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    font-size: 20px;
}

.jg-why-box h4,
.jg-type-card h4,
.jg-industry-box h4,
.jg-location-card h4,
.jg-tech-group h4 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.4;
}

.jg-why-box p,
.jg-type-card p,
.jg-industry-box p,
.jg-location-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

.jg-type-list {
    grid-template-columns: 1fr;
}

.jg-type-card .head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.jg-type-card .head h4 {
    margin: 0;
}

.jg-type-card .num {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme3);
    color: #fff;
    font-weight: 700;
}

.jg-industry-box h4 i,
.jg-location-card h4 i,
.jg-tech-group h4 i {
    margin-right: 6px;
    color: var(--theme3);
}

.jg-tech-group .jg-tech-list li {
    font-size: 14px;
}

.jg-sub-heading {
    margin: 28px 0 12px;
    font-size: 19px;
}

.jg-city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-city-chips li {
    padding: 7px 14px;
    border: 1px solid #dfe8f0;
    border-radius: 30px;
    background: #f7fbfe;
    color: var(--header);
    font-size: 14px;
    font-weight: 500;
}

.jg-mini-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.jg-mini-services a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    transition: transform .3s ease;
}

.jg-mini-services a:hover {
    color: #fff;
    transform: translateY(-4px);
}

.jg-mini-services i {
    margin-bottom: 6px;
    color: #f5b778;
    font-size: 22px;
}

.jg-mini-services b {
    font-size: 17px;
}

.jg-mini-services span {
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

.jg-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0 18px;
    padding: 18px;
    border-radius: 14px;
    background: #f5f8fb;
}

.jg-formula span {
    padding: 6px 12px;
    border-radius: 20px;
    background: #fff;
    color: var(--theme);
    font-size: 14px;
    font-weight: 700;
}

.jg-formula i {
    color: var(--theme3);
    font-size: 12px;
}

.jg-service-content .jg-faq-list .accordion-box {
    margin-top: 10px;
}

.jg-cta-box .core {
    margin: 14px 0 6px;
    color: #f5b778;
    font-weight: 700;
}

.jg-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}

.jg-cta-actions .theme-btn {
    margin-top: 0;
}

.jg-cta-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
}

.jg-cta-call:hover {
    color: #f5b778;
}

@media (max-width: 767px) {
    .jg-tag-grid,
    .jg-why-grid,
    .jg-industry-list,
    .jg-location-list,
    .jg-tech-groups,
    .jg-mini-services {
        grid-template-columns: 1fr;
    }

    .jg-why-box,
    .jg-type-card,
    .jg-industry-box,
    .jg-location-card,
    .jg-tech-group {
        padding: 18px;
    }
}

/* Service page na lamba content ma theme nu "Every Word Capital" nahi - normal lakhan */
.jg-service-content p,
.jg-service-content li,
.jg-service-content .text,
.jg-cta-box p {
    text-transform: none;
}

.jg-mini-services span {
    text-transform: none;
}


/* ---------- Service page - SEO page na vadhara blocks ---------- */
.jg-search-example {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 4px 0 18px;
    padding: 12px 20px;
    border: 1px solid #dfe1e5;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(32, 33, 36, .12);
}

.jg-search-example i {
    color: #9aa0a6;
}

.jg-search-example span {
    color: var(--header);
    font-size: 16px;
}

.jg-note-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #f1f6fa;
    color: #4a5a68;
    font-size: 15px;
    line-height: 1.7;
}

.jg-note-box i {
    margin-top: 5px;
    color: var(--theme);
}

.jg-mini-tags.alt li {
    background: #fff4e9;
    color: #b25e09;
}

.jg-mini-label {
    display: block;
    margin: 12px 0 0;
    color: var(--theme3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.jg-def-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.jg-def-grid > div {
    padding: 14px 16px;
    border-left: 3px solid var(--theme3);
    border-radius: 0 10px 10px 0;
    background: #f7fbfe;
}

.jg-def-grid h5 {
    margin-bottom: 4px;
    font-size: 15px;
}

.jg-def-grid p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.jg-check-list.single {
    grid-template-columns: 1fr;
}

.jg-city-chips li i {
    margin-right: 6px;
    color: #9aa0a6;
    font-size: 12px;
}

.jg-cta-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 6px;
    padding: 0;
    list-style: none;
}

.jg-cta-tags li {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .jg-def-grid {
        grid-template-columns: 1fr;
    }
}

.jg-search-example span {
    text-transform: none;
}


/* ---------- Service page - Digital Marketing page na vadhara blocks ---------- */
.jg-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-channel-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #fff;
    color: var(--header);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.jg-channel-grid li:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 71, 111, .08);
}

.jg-channel-grid li i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 18px;
}

.jg-type-card .jg-btn-link {
    display: inline-flex;
}

.jg-combo-list {
    display: grid;
    gap: 10px;
    max-width: 560px;
}

.jg-combo-list > div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #f5f8fb;
}

.jg-combo-list b {
    flex: 0 0 170px;
    color: var(--theme);
    font-size: 15px;
}

.jg-combo-list i {
    color: var(--theme3);
    font-size: 13px;
}

.jg-combo-list span {
    color: var(--header);
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 991px) {
    .jg-channel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575px) {
    .jg-channel-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jg-combo-list b {
        flex-basis: 120px;
    }
}

.jg-combo-list span {
    text-transform: none;
}


/* ---------- Service page - UI/UX ane Graphic Design pages ---------- */
.jg-card-note {
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px dashed #e3e8ee;
    color: #4a5a68;
    font-size: 14px !important;
    font-style: italic;
}

.jg-cta-box .core a {
    color: #f5b778;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jg-cta-box .core a:hover {
    color: #fff;
}

.jg-process .jg-formula {
    margin-bottom: 0;
    padding: 12px;
}


/* ---------- Service page - Domain & Hosting ---------- */
.jg-domain-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 18px;
}

.jg-domain-examples .jg-search-example {
    margin: 0;
    padding: 10px 18px;
}

.jg-domain-examples .jg-search-example i {
    color: var(--theme3);
}

.jg-domain-examples .jg-search-example span {
    color: var(--theme);
    font-weight: 700;
    text-transform: none;
}

.jg-ext-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jg-ext-chips li {
    min-width: 84px;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    text-transform: none;
}

.jg-ext-chips li.more {
    background: #fff4e9;
    color: #b25e09;
    font-size: 14px;
    font-weight: 600;
}

.jg-city-chips li {
    text-transform: none;
}


/* ---------- Service page - tag grid ma service links ---------- */
.jg-tag-grid li a {
    color: var(--header);
    transition: color .3s ease;
}

.jg-tag-grid li a:hover {
    color: var(--theme);
}


/* ---------- Service page - IoT flow (upar thi niche arrow vado flow) ---------- */
.jg-flow-steps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.jg-flow-steps li {
    position: relative;
    min-width: 260px;
    padding: 10px 18px;
    border: 1px solid #dfe8f0;
    border-left: 4px solid var(--theme3);
    border-radius: 10px;
    background: #f7fbfe;
    color: var(--theme);
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
}

.jg-flow-steps li:not(:last-child)::after {
    content: "\f063";
    position: absolute;
    left: 24px;
    bottom: -23px;
    color: var(--theme3);
    font-family: "Font Awesome 6 Pro";
    font-size: 13px;
    font-weight: 900;
}

.jg-flow-steps li:last-child {
    border-left-color: var(--theme);
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
}

@media (max-width: 575px) {
    .jg-flow-steps li {
        min-width: 0;
        width: 100%;
    }
}


/* =========================================================
   Free Business Tools - list card + tool detail
   ========================================================= */
.jg-tool-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0, 71, 111, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.jg-tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 71, 111, .14);
}

.jg-tool-card .thumb {
    display: block;
    aspect-ratio: 1370 / 385;
    overflow: hidden;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
}

.jg-tool-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.jg-tool-card:hover .thumb img {
    transform: scale(1.04);
}

.jg-tool-card h3 {
    margin: 0;
    padding: 20px 22px;
    font-size: 20px;
    text-align: center;
    transition: color .3s ease;
}

.jg-tool-card:hover h3 {
    color: var(--theme);
}

.jg-tool-action {
    margin: 24px 0 34px;
    padding: 32px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    text-align: center;
}

.jg-tool-action .icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    color: #f5b778;
    font-size: 24px;
}

.jg-service-content .jg-tool-action h3 {
    margin: 0 0 8px;
    color: #fff;
}

.jg-service-content .jg-tool-action p {
    margin: 0 auto 20px;
    max-width: 520px;
    color: rgba(255, 255, 255, .85);
}

.jg-tool-action .theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--theme3);
    color: #fff;
}

.jg-tool-action .theme-btn:hover {
    background: #fff;
    color: var(--theme);
}

.jg-tool-action .hint {
    display: block;
    margin-top: 14px;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    text-transform: none;
}

.jg-tool-action .hint i {
    margin-right: 4px;
}

.jg-why-grid.jg-three {
    grid-template-columns: repeat(3, 1fr);
}

.jg-note-box span {
    text-transform: none;
}

@media (max-width: 991px) {
    .jg-why-grid.jg-three {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Free Tools - SIP calculator
   ========================================================= */
.jg-calc {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    margin: 24px 0 30px;
    padding: 28px;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0, 71, 111, .08);
}

.jg-calc-field + .jg-calc-field {
    margin-top: 24px;
}

.jg-calc-field .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.jg-calc-field label {
    margin: 0;
    color: var(--header);
    font-size: 15px;
    font-weight: 600;
}

.jg-calc-field label small {
    color: #8a96a3;
    font-weight: 500;
}

.jg-calc-field .box {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #eaf2f8;
    color: var(--theme);
    font-weight: 700;
}

.jg-calc-field .box span {
    text-transform: none;
}

.jg-calc-field .box input {
    width: 92px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--theme);
    font-weight: 700;
    text-align: right;
}

.jg-calc-field .box input::-webkit-outer-spin-button,
.jg-calc-field .box input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.jg-calc-field .box input[type=number] {
    -moz-appearance: textfield;
}

.jg-range {
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(to right, var(--theme) 0, var(--theme) var(--fill, 0%), #dfe8f0 var(--fill, 0%), #dfe8f0 100%);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.jg-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--theme3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    -webkit-appearance: none;
    appearance: none;
}

.jg-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--theme3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.jg-calc-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border-radius: 16px;
    background: #f5f8fb;
}

.jg-donut {
    position: relative;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: conic-gradient(var(--theme) 0 var(--invested, 100%), var(--theme3) var(--invested, 100%) 100%);
}

.jg-donut .center {
    position: absolute;
    inset: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f8fb;
    text-align: center;
}

.jg-donut .center small {
    color: #6b7c8a;
    font-size: 13px;
}

.jg-donut .center b {
    color: var(--header);
    font-size: 19px;
}

.jg-calc-legend {
    width: 100%;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.jg-calc-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px dashed #dfe8f0;
    color: #4a5a68;
    font-size: 15px;
    text-transform: none;
}

.jg-calc-legend li b {
    margin-left: auto;
    color: var(--header);
}

.jg-calc-legend li.total {
    border-bottom: 0;
    color: var(--header);
    font-weight: 700;
}

.jg-calc-legend li.total b {
    color: var(--theme);
    font-size: 18px;
}

.jg-calc-legend .dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.jg-calc-legend .dot.invested {
    background: var(--theme);
}

.jg-calc-legend .dot.returns {
    background: var(--theme3);
}

.jg-calc-table {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #eef0f3;
    border-radius: 14px;
}

.jg-calc-table table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.jg-calc-table th {
    position: sticky;
    top: 0;
    padding: 12px 14px;
    background: var(--theme);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.jg-calc-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
    color: #4a5a68;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
}

.jg-calc-table th:first-child,
.jg-calc-table td:first-child {
    text-align: left;
}

.jg-calc-table tbody tr:nth-child(even) td {
    background: #f7fbfe;
}

.jg-service-content .jg-calc-note {
    margin-top: 10px;
    color: #8a96a3;
    font-size: 13px;
}

.jg-sip-formula {
    margin: 6px 0 16px;
    padding: 18px;
    border-radius: 14px;
    background: #f5f8fb;
    color: var(--theme);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-transform: none;
}

@media (max-width: 991px) {
    .jg-calc {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .jg-calc {
        padding: 18px;
    }

    .jg-calc-field .box input {
        width: 76px;
    }

    .jg-donut {
        width: 180px;
        height: 180px;
    }

    .jg-sip-formula {
        font-size: 16px;
    }
}


/* ---------- SIP calculator - moti rakam mate auto-fit (JS data-fit) ---------- */
.jg-calc-result {
    min-width: 0;
}

.jg-donut {
    flex: 0 0 auto;
    max-width: 100%;
}

.jg-donut .center {
    padding: 0 8px;
}

.jg-donut .center b {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.3;
}

.jg-calc-legend li {
    gap: 8px;
    min-width: 0;
}

.jg-calc-legend li .label {
    flex: 0 0 auto;
    white-space: nowrap;
}

.jg-calc-legend li .dot {
    flex: 0 0 12px;
}

.jg-calc-legend li b {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
}

/* Nanamu font pan na samay tyare j tute */
.jg-calc-legend li b.is-wrapped,
.jg-donut .center b.is-wrapped {
    white-space: normal;
    word-break: break-all;
}

@media (max-width: 575px) {
    .jg-calc-result {
        padding: 18px 14px;
    }

    .jg-calc-legend li {
        font-size: 14px;
    }
}


/* =========================================================
   Free Tools - GST calculator (toggle + rate chips)
   ========================================================= */
.jg-calc-label {
    display: block;
    margin-bottom: 10px;
    color: var(--header);
    font-size: 15px;
    font-weight: 600;
}

.jg-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    border-radius: 12px;
    background: #eaf2f8;
}

.jg-seg label,
.jg-rate-chips label {
    margin: 0;
    cursor: pointer;
}

.jg-seg input,
.jg-rate-chips input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.jg-seg span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    border-radius: 9px;
    color: var(--theme);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: all .25s ease;
}

.jg-seg span small {
    color: #6b7c8a;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
}

.jg-seg input:checked + span {
    background: var(--theme);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 71, 111, .25);
}

.jg-seg input:checked + span small {
    color: rgba(255, 255, 255, .8);
}

.jg-seg input:focus-visible + span,
.jg-rate-chips input:focus-visible + span {
    outline: 2px solid var(--theme3);
    outline-offset: 2px;
}

.jg-rate-chips {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.jg-rate-chips span {
    display: block;
    padding: 9px 4px;
    border: 1px solid #dfe8f0;
    border-radius: 10px;
    background: #fff;
    color: var(--theme);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    transition: all .25s ease;
}

.jg-rate-chips label:hover span {
    border-color: var(--theme3);
}

.jg-rate-chips input:checked + span {
    border-color: var(--theme3);
    background: var(--theme3);
    color: #fff;
}

#gstAmount {
    width: 130px;
}

.jg-calc-legend li[hidden] {
    display: none;
}

.jg-calc-legend li.sub {
    padding-left: 20px;
    font-size: 14px;
}

.jg-calc-legend li.sub b {
    color: #4a5a68;
    font-weight: 600;
}

.jg-calc-table td.wrap {
    min-width: 220px;
    white-space: normal;
    text-align: left;
}

@media (max-width: 575px) {
    .jg-rate-chips {
        grid-template-columns: repeat(3, 1fr);
    }

    #gstAmount {
        width: 110px;
    }
}

#gstAmountLabel {
    white-space: nowrap;
}

#gstCalc #gstAmount {
    width: 110px;
}


/* =========================================================
   Free Tools - Invoice Generator
   ========================================================= */
.jg-tool-wide {
    margin-bottom: 60px;
}

.jg-inv-scroll {
    overflow-x: auto;
    padding: 4px;
}

.jg-inv-paper {
    --inv: #00476F;
    min-width: 760px;
    padding: 40px;
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0, 71, 111, .08);
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.jg-inv-paper input,
.jg-inv-paper textarea {
    width: 100%;
    padding: 3px 6px;
    border: 1px dashed transparent;
    border-radius: 6px;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: none;
    transition: border-color .2s ease, background .2s ease;
}

.jg-inv-paper input:hover,
.jg-inv-paper textarea:hover {
    border-color: #cfd8e2;
}

.jg-inv-paper input:focus,
.jg-inv-paper textarea:focus {
    border-color: var(--inv);
    background: #f7fbfe;
}

.jg-inv-paper input::placeholder,
.jg-inv-paper textarea::placeholder {
    color: #9aa5b1;
}

.jg-inv-paper textarea {
    display: block;
    overflow: hidden;
    resize: none;
}

.jg-inv-paper input[type=number] {
    -moz-appearance: textfield;
}

.jg-inv-paper input[type=number]::-webkit-outer-spin-button,
.jg-inv-paper input[type=number]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.jg-inv-paper .print-only {
    display: none;
}

.jg-inv-paper h6 {
    margin: 0 0 4px 6px;
    color: #222;
    font-size: 14px;
    font-weight: 700;
}

/* Head */
.inv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.inv-logo {
    position: relative;
    flex: 0 0 auto;
}

.inv-logo .logo-drop {
    width: 200px;
    height: 90px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed #b9c6d3;
    border-radius: 10px;
    background: #f7fbfe;
    color: var(--inv);
    cursor: pointer;
    transition: border-color .2s ease;
}

.inv-logo .logo-drop:hover {
    border-color: var(--inv);
}

.inv-logo .logo-drop i {
    font-size: 20px;
}

.inv-logo .logo-drop b {
    font-size: 13px;
}

.inv-logo .logo-drop small {
    color: #8a96a3;
    font-size: 11px;
}

.inv-logo.has-logo .logo-drop {
    display: none;
}

.inv-logo img {
    display: block;
    max-width: 220px;
    max-height: 100px;
    object-fit: contain;
}

.inv-logo .logo-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-size: 16px;
    line-height: 1;
}

.jg-inv-paper .inv-title {
    max-width: 60%;
    margin-left: auto;
    color: var(--inv);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: right;
}

.inv-from {
    max-width: 50%;
}

.jg-inv-paper .strong {
    color: #111;
    font-weight: 700;
}

.inv-line {
    display: flex;
    align-items: center;
}

.inv-pre {
    flex: 0 0 auto;
    padding-left: 6px;
    color: #555;
    font-weight: 600;
}

/* Bill to + meta */
.inv-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 26px 0 22px;
}

.inv-meta .inv-line {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    margin-bottom: 4px;
}

.inv-meta .inv-line > span {
    color: #555;
    font-weight: 600;
}

/* Items table */
.inv-table {
    width: 100%;
    border-collapse: collapse;
}

.inv-table th {
    padding: 8px 4px;
    background: var(--inv);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.inv-table th input {
    padding: 2px 4px;
    color: #fff;
    font-weight: 700;
}

.inv-table th input:hover {
    border-color: rgba(255, 255, 255, .5);
}

.inv-table th input:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

.inv-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #edf0f3;
    vertical-align: top;
}

.inv-table .c-sr {
    width: 34px;
    padding-top: 11px;
    color: #777;
    text-align: center;
}

.inv-table th.c-sr input {
    text-align: center;
}

.inv-table .c-desc {
    min-width: 200px;
}

.inv-table .c-hsn {
    width: 96px;
}

.inv-table .c-custom {
    width: 100px;
}

.inv-table th.c-custom {
    position: relative;
    padding-right: 18px;
}

.inv-table .col-x {
    position: absolute;
    top: 50%;
    right: 2px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    transform: translateY(-50%);
}

.inv-table .c-qty {
    width: 64px;
}

.inv-table .c-rate {
    width: 100px;
}

.inv-table .c-disc {
    width: 66px;
}

.inv-table .c-cgst,
.inv-table .c-sgst,
.inv-table .c-igst,
.inv-table .c-cess {
    width: 86px;
}

.inv-table .c-amount {
    width: 110px;
    padding-top: 11px;
    font-weight: 600;
}

.inv-table .c-qty input,
.inv-table .c-rate input,
.inv-table .c-disc input,
.inv-table th.c-qty input,
.inv-table th.c-rate input,
.inv-table th.c-disc input,
.inv-table th.c-cgst input,
.inv-table th.c-sgst input,
.inv-table th.c-igst input,
.inv-table th.c-cess input,
.inv-table th.c-amount input,
.inv-table .c-amount {
    text-align: right;
}

.inv-table .rate-in {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-height: 31px;
}

.inv-table .rate-in input {
    width: 52px;
    padding-right: 1px;
    text-align: right;
}

.inv-table .rate-in span {
    color: #555;
}

.inv-table td small {
    display: block;
    padding-right: 6px;
    color: #8a96a3;
    font-size: 12px;
    text-align: right;
}

.inv-table .c-del {
    width: 30px;
    text-align: center;
}

.inv-table .c-del button {
    width: 24px;
    height: 24px;
    margin-top: 4px;
    border: 0;
    border-radius: 50%;
    background: #fde8e8;
    color: #dc2626;
    font-size: 16px;
    line-height: 1;
}

.inv-add {
    margin: 12px 0 0;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: var(--inv);
    font-weight: 600;
}

/* Totals */
.inv-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-top: 14px;
}

.inv-words {
    flex: 1 1 auto;
    max-width: 50%;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f5f8fb;
}

.inv-words[hidden] {
    display: none;
}

.inv-words span {
    display: block;
    color: #777;
    font-size: 12px;
}

.inv-words b {
    color: #222;
    font-size: 13px;
}

.inv-totals {
    flex: 0 0 320px;
    border-collapse: collapse;
}

.inv-totals td {
    padding: 7px 10px;
}

.inv-totals td:last-child {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.inv-totals tr.grand td {
    background: var(--inv);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

/* Notes + sign */
.inv-notes {
    margin-top: 26px;
}

.inv-notes .inv-line {
    display: block;
    margin-bottom: 14px;
}

.inv-sign {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 42px;
    margin-top: 20px;
    color: #333;
}

.inv-sign .line {
    min-width: 200px;
    padding-top: 6px;
    border-top: 1px solid #999;
    font-size: 13px;
    text-align: center;
}

/* Settings panel */
.jg-inv-panel {
    padding: 24px;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    background: #f5f8fb;
}

.jg-inv-panel h4 {
    margin-bottom: 16px;
    font-size: 19px;
}

.jg-inv-panel .panel-block {
    padding: 14px 0;
    border-top: 1px solid #e3e8ee;
}

.jg-inv-panel .form-select {
    font-size: 14px;
}

.inv-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.inv-swatches button {
    width: 26px;
    height: 26px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #cfd8e2;
}

.inv-swatches button.active {
    box-shadow: 0 0 0 2px var(--theme3);
}

.jg-seg.three {
    grid-template-columns: repeat(3, 1fr);
}

.jg-seg.three span {
    padding: 8px 4px;
    font-size: 12px;
}

.inv-checks {
    display: grid;
    gap: 8px;
}

.inv-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--header);
    font-size: 14px;
    cursor: pointer;
}

.inv-checks input {
    width: 16px;
    height: 16px;
    accent-color: var(--theme);
}

.inv-custom-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.inv-custom-list:empty {
    display: none;
}

.inv-custom-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: 20px;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 13px;
    font-weight: 600;
}

.inv-custom-list li span {
    text-transform: none;
}

.inv-custom-list button {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #dc2626;
    font-size: 13px;
    line-height: 18px;
}

.inv-add-col {
    display: flex;
    gap: 6px;
}

.inv-add-col input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #dfe8f0;
    border-radius: 8px;
    font-size: 14px;
}

.inv-add-col button {
    flex: 0 0 40px;
    border: 0;
    border-radius: 8px;
    background: var(--theme);
    color: #fff;
}

.jg-inv-panel .hint {
    display: block;
    margin-top: 8px;
    color: #8a96a3;
    font-size: 12px;
}

.panel-actions {
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #e3e8ee;
}

.inv-print-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: 6px;
    background: var(--theme);
    color: #fff;
    font-weight: 700;
    transition: background .3s ease;
}

.inv-print-btn:hover {
    background: var(--theme3);
}

.inv-reset {
    padding: 11px;
    border: 1px solid #cfd8e2;
    border-radius: 6px;
    background: #fff;
    color: var(--header);
    font-weight: 600;
}

.inv-reset:hover {
    border-color: #dc2626;
    color: #dc2626;
}

.jg-inv-panel .inv-privacy {
    margin: 12px 0 0;
    color: #6b7c8a;
    font-size: 12px;
    text-transform: none;
}

#invPrintRoot {
    display: none;
}

@media (max-width: 575px) {
    .jg-inv-paper {
        padding: 24px;
    }
}

/* ---------- Print: phakt invoice ---------- */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body.inv-printing {
        background: #fff !important;
    }

    body.inv-printing > *:not(#invPrintRoot) {
        display: none !important;
    }

    body.inv-printing #invPrintRoot {
        display: block !important;
    }

    #invPrintRoot * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #invPrintRoot .jg-inv-paper {
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 12px;
    }

    #invPrintRoot .no-print,
    #invPrintRoot .inv-line.is-empty,
    #invPrintRoot .inv-logo:not(.has-logo),
    #invPrintRoot tr.is-blank {
        display: none !important;
    }

    #invPrintRoot .print-only {
        display: inline !important;
        padding-left: 6px;
    }

    #invPrintRoot input,
    #invPrintRoot textarea {
        border: 0 !important;
        background: transparent !important;
    }

    #invPrintRoot input::placeholder,
    #invPrintRoot textarea::placeholder {
        color: transparent;
    }

    #invPrintRoot .inv-table tr {
        page-break-inside: avoid;
    }

    #invPrintRoot .inv-bottom,
    #invPrintRoot .inv-sign {
        page-break-inside: avoid;
    }
}


/* ---------- Calculators (SIP / GST) - mobile responsive fix ---------- */
.jg-calc {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.jg-calc > *,
.jg-calc-field,
.jg-seg label,
.jg-rate-chips label {
    min-width: 0;
}

@media (max-width: 991px) {
    .jg-calc {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .jg-calc {
        gap: 20px;
        padding: 16px;
        border-radius: 14px;
    }

    .jg-calc-field + .jg-calc-field {
        margin-top: 20px;
    }

    /* Label upar, input box niche aakhi width ma */
    .jg-calc-field .top {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 10px;
    }

    .jg-calc-field .box {
        justify-content: flex-end;
    }

    .jg-calc-field .box input,
    #gstCalc #gstAmount {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    #gstAmountLabel {
        white-space: normal;
    }

    .jg-calc-field label,
    .jg-calc-label {
        font-size: 14px;
    }

    .jg-seg {
        gap: 4px;
        padding: 4px;
    }

    .jg-seg span {
        padding: 8px 4px;
        font-size: 13px;
    }

    .jg-seg span small {
        font-size: 11px;
    }

    .jg-rate-chips {
        gap: 6px;
    }

    .jg-rate-chips span {
        padding: 8px 2px;
        font-size: 14px;
    }

    .jg-calc-result {
        padding: 16px 12px;
    }

    .jg-donut {
        width: 170px;
        height: 170px;
    }

    .jg-donut .center {
        inset: 24px;
    }

    .jg-donut .center small {
        font-size: 12px;
    }

    .jg-calc-legend {
        margin-top: 16px;
    }

    .jg-calc-legend li {
        font-size: 13px;
    }

    .jg-calc-legend li.sub {
        padding-left: 12px;
        font-size: 12px;
    }

    .jg-calc-legend .dot {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }
}

@media (max-width: 360px) {
    .jg-seg span {
        font-size: 12px;
    }

    .jg-rate-chips span {
        font-size: 13px;
    }

    .jg-donut {
        width: 150px;
        height: 150px;
    }

    .jg-donut .center {
        inset: 20px;
    }
}


/* ---------- Invoice Generator - JG IT Solution credit footer ---------- */
.inv-credit {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid #222;
    text-align: center;
}

.inv-credit .made {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #444;
    font-size: 14px;
}

.inv-credit .made img {
    display: block;
    height: 34px;
    width: auto;
}

.jg-inv-paper .inv-credit p {
    margin: 6px 0 0;
    color: #444;
    font-size: 13px;
    text-transform: none;
}

.inv-credit p a {
    color: var(--theme);
    font-weight: 600;
}

.inv-credit p a:hover {
    text-decoration: underline;
}

@media print {
    #invPrintRoot .inv-credit {
        page-break-inside: avoid;
    }
}


/* =========================================================
   Free Tools - Payslip Generator (invoice na style reuse)
   ========================================================= */
.ps-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--inv);
}

.ps-company {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.ps-company .inv-logo .logo-drop {
    width: 150px;
    height: 80px;
}

.ps-company .inv-logo img {
    max-width: 160px;
    max-height: 80px;
}

.ps-company-text {
    min-width: 260px;
}

.jg-inv-paper .ps-company-name {
    font-size: 18px;
}

.ps-title-box {
    flex: 0 0 290px;
}

.jg-ps-paper .ps-title-box .inv-title {
    max-width: 100%;
    margin-bottom: 6px;
}

.ps-period {
    display: grid !important;
    grid-template-columns: 90px 1fr;
}

.ps-period > span {
    color: #555;
    font-weight: 600;
    text-align: right;
}

.ps-period input,
.ps-period .print-only {
    text-align: right;
}

.ps-section {
    margin-top: 20px;
}

.jg-inv-paper .ps-section-title {
    margin: 0 0 8px;
}

.jg-inv-paper .ps-section-title input {
    color: var(--inv);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.ps-emp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 30px;
    padding: 12px 10px;
    border: 1px solid #edf0f3;
    border-radius: 10px;
    background: #fafcfe;
}

.ps-emp-row {
    display: grid !important;
    grid-template-columns: 150px 1fr 24px;
    align-items: center;
}

.jg-inv-paper .ps-emp-label {
    color: #555;
    font-weight: 600;
}

.jg-inv-paper .ps-emp-value {
    color: #111;
}

.ps-x {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fde8e8;
    color: #dc2626;
    font-size: 14px;
    line-height: 20px;
}

.ps-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 22px;
}

.ps-table th.ps-c-label input {
    text-align: left;
}

.ps-table .ps-c-amt {
    width: 120px;
}

.ps-table .ps-c-amt input,
.ps-table tfoot .ps-c-amt {
    text-align: right;
}

.ps-table tfoot td {
    padding: 9px 4px;
    border-top: 2px solid var(--inv);
    background: #f5f8fb;
    font-weight: 700;
}

.ps-table tfoot td.ps-c-amt {
    padding-right: 10px;
    white-space: nowrap;
}

.jg-inv-paper .ps-table tfoot input {
    font-weight: 700;
}

.ps-net {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--inv);
    color: #fff;
}

.jg-inv-paper .ps-net-label {
    width: 220px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.jg-inv-paper .ps-net-label:hover {
    border-color: rgba(255, 255, 255, .5);
}

.jg-inv-paper .ps-net-label:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

.ps-net small {
    display: block;
    padding-left: 7px;
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
}

.ps-net-amount {
    font-size: 24px;
    white-space: nowrap;
}

.ps-words {
    max-width: none !important;
    margin-top: 12px;
}

.ps-sign {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 56px;
}

.ps-sign[hidden] {
    display: none;
}

.ps-sign .line {
    min-width: 200px;
    padding-top: 6px;
    border-top: 1px solid #999;
    color: #333;
    font-size: 13px;
    text-align: center;
}

@media print {
    #invPrintRoot .ps-emp {
        background: #fafcfe;
    }

    #invPrintRoot .ps-tables,
    #invPrintRoot .ps-net,
    #invPrintRoot .ps-sign {
        page-break-inside: avoid;
    }
}


/* =========================================================
   Floating WhatsApp button (admin Settings no WhatsApp number)
   ========================================================= */
.jg-whatsapp-float {
    position: fixed;
    right: 30px;
    bottom: 96px;
    z-index: 9998;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 30px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
    transition: transform .3s ease, box-shadow .3s ease;
}

.jg-whatsapp-float::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: #25D366;
    animation: jg-wa-pulse 2s ease-out infinite;
}

.jg-whatsapp-float:hover {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(37, 211, 102, .55);
}

.jg-whatsapp-float .tip {
    position: absolute;
    right: 66px;
    top: 50%;
    padding: 6px 12px;
    border-radius: 6px;
    background: #fff;
    color: var(--header);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translate(8px, -50%);
    transition: all .3s ease;
}

.jg-whatsapp-float:hover .tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

@keyframes jg-wa-pulse {
    0% {
        opacity: .6;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

/* Mobile ma back-to-top chhupu hoy - etle sauthi niche */
@media (max-width: 575px) {
    .jg-whatsapp-float {
        right: 16px;
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 28px;
    }

    .jg-whatsapp-float .tip {
        display: none;
    }
}

@media print {
    .jg-whatsapp-float {
        display: none !important;
    }
}


/* ---------- Blog detail - H1 (blog title) + FAQ ---------- */
.breadcrumb-sub-title .jg-blog-h1 {
    max-width: 900px;
    margin: 0 auto;
    font-size: 44px;
    line-height: 1.25;
    text-transform: none;
}

.jg-blog-faq {
    margin-top: 40px;
}

.jg-blog-faq h2 {
    margin-bottom: 16px;
    font-size: 26px;
}

.jg-blog-faq .accordion-box {
    margin-top: 0;
}

.jg-blog-faq .text {
    text-transform: none;
}

@media (max-width: 991px) {
    .breadcrumb-sub-title .jg-blog-h1 {
        font-size: 34px;
    }
}

@media (max-width: 575px) {
    .breadcrumb-sub-title .jg-blog-h1 {
        font-size: 26px;
    }
}


/* ---------- Blog detail - theme nu "Every Word Capital" nahi, normal lakhan ---------- */
.breadcrumb-wrapper .page-heading .breadcrumb-sub-title h1.jg-blog-h1,
.jg-blog-content,
.jg-blog-content p,
.jg-blog-content li,
.jg-blog-content td,
.jg-blog-content th,
.jg-blog-content span,
.jg-blog-content a,
.jg-blog-content h2,
.jg-blog-content h3,
.jg-blog-content h4,
.jg-blog-content h5,
.jg-blog-content h6,
.jg-blog-faq .acc-btn,
.jg-blog-faq .text {
    text-transform: none;
}


/* ---------- Free Tools - Percentage to CGPA calculator ---------- */
.jg-calc-hint {
    display: block;
    color: #8a96a3;
    font-size: 12px;
    text-transform: none;
}

#cgpaCalc .form-select {
    font-size: 15px;
}

#cgpaCalc #cgpaValue {
    width: 80px;
}

.jg-calc-legend li.cgpa-formula b {
    font-weight: 600;
}


/* =========================================================
   Free Tools - Certificate Generator (A4 landscape 1123 x 794)
   ========================================================= */
.cert-stage {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 12px 35px rgba(0, 71, 111, .12);
}

.cert {
    --c: #B8860B;
    position: absolute;
    top: 0;
    left: 0;
    width: 1123px;
    height: 794px;
    overflow: hidden;
    background: #fff;
    color: #2b2b2b;
    font-family: 'Playfair Display', Georgia, serif;
    transform-origin: top left;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.cert [hidden] {
    display: none !important;
}

.cert .print-only {
    display: none;
}

.cert input,
.cert textarea {
    width: 100%;
    padding: 2px 8px;
    border: 1px dashed transparent;
    border-radius: 6px;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    text-transform: none;
    transition: border-color .2s ease, background .2s ease;
}

.cert input:hover,
.cert textarea:hover {
    border-color: rgba(0, 0, 0, .25);
}

.cert input:focus,
.cert textarea:focus {
    border-color: var(--c);
    background: rgba(255, 255, 255, .6);
}

.cert input::placeholder,
.cert textarea::placeholder {
    color: rgba(0, 0, 0, .3);
}

.cert textarea {
    display: block;
    overflow: hidden;
    resize: none;
}

.cert .deco {
    position: absolute;
    pointer-events: none;
}

.cert-inner {
    position: absolute;
    inset: 64px 90px 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cert-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 64px;
}

.cert-logo {
    position: relative;
    flex: 0 0 auto;
}

.cert-logo .logo-drop {
    width: 76px;
    height: 58px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(0, 0, 0, .3);
    border-radius: 8px;
    color: var(--c);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.cert-logo.has-logo .logo-drop {
    display: none;
}

.cert-logo img {
    display: block;
    max-width: 160px;
    max-height: 64px;
    object-fit: contain;
}

.cert-logo .logo-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.cert .cert-org {
    width: 420px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}

.cert .cert-title {
    margin-top: 12px;
    color: var(--c);
    font-family: 'Cinzel', 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cert .cert-subtitle {
    margin-top: 8px;
    color: #555;
    font-size: 18px;
    font-style: italic;
}

.cert .cert-name {
    margin-top: 4px;
    color: #1d1d1d;
    font-family: 'Great Vibes', cursive;
    font-size: 66px;
    line-height: 1.25;
}

.cert-name-line {
    display: block;
    width: 480px;
    height: 2px;
    margin: 0 auto 14px;
    background: var(--c);
}

.cert .cert-desc {
    max-width: 780px;
    color: #444;
    font-size: 17px;
    line-height: 1.6;
}

.cert-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 30px;
    width: 100%;
    margin-top: auto;
}

.cert-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cert-sign .sig-img {
    max-width: 180px;
    max-height: 56px;
    margin-bottom: 4px;
    object-fit: contain;
}

.cert-sign .sig-line {
    width: 230px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.cert .sig-name {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
}

.cert .sig-role {
    color: #666;
    font-size: 14px;
}

.cert-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cert-seal {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-size: 40px;
    box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--c);
}

.cert-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    white-space: nowrap;
}

.cert-date input {
    width: 150px;
    text-align: left !important;
}

.cert-no {
    position: absolute;
    top: -38px;
    right: -40px;
    display: flex;
    align-items: center;
    gap: 2px;
    color: #777;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
}

.cert .cert-no input {
    width: 130px;
    text-align: left;
}

/* ---------- Template 1: Classic ---------- */
.tpl-classic {
    background: #fffdf6;
}

.tpl-classic .d1 {
    inset: 18px;
    border: 10px solid var(--c);
}

.tpl-classic .d2 {
    inset: 34px;
    border: 1.5px solid var(--c);
}

.tpl-classic .d3,
.tpl-classic .d4 {
    width: 70px;
    height: 70px;
    border: 3px solid var(--c);
}

.tpl-classic .d3 {
    top: 44px;
    left: 44px;
    border-right: 0;
    border-bottom: 0;
}

.tpl-classic .d4 {
    right: 44px;
    bottom: 44px;
    border-top: 0;
    border-left: 0;
}

/* ---------- Template 2: Modern ---------- */
.tpl-modern {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.tpl-modern .d1 {
    top: 0;
    bottom: 0;
    left: 0;
    width: 70px;
    background: var(--c);
}

.tpl-modern .d2 {
    top: -200px;
    right: -200px;
    width: 400px;
    height: 400px;
    background: var(--c);
    opacity: .1;
    transform: rotate(45deg);
}

.tpl-modern .d3 {
    right: -150px;
    bottom: -210px;
    width: 300px;
    height: 300px;
    background: #E1924B;
    transform: rotate(45deg);
}

.tpl-modern .d4 {
    top: 26px;
    right: 26px;
    bottom: 26px;
    left: 96px;
    border: 1px solid #dde3ea;
}

.tpl-modern .cert-inner {
    left: 130px;
}

.tpl-modern .cert-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.tpl-modern .cert-subtitle {
    font-style: normal;
    letter-spacing: 1px;
}

.tpl-modern .cert-name {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 700;
}

.tpl-modern .cert-name-line {
    width: 140px;
    height: 4px;
    background: #E1924B;
}

.tpl-modern .cert-seal {
    border-radius: 18px;
    box-shadow: none;
    transform: rotate(45deg);
}

.tpl-modern .cert-seal i {
    transform: rotate(-45deg);
}

/* ---------- Template 3: Elegant (dark) ---------- */
.tpl-elegant {
    background: #0f1d33;
    color: #f3ead2;
}

.tpl-elegant .d1 {
    inset: 22px;
    border: 2px solid var(--c);
}

.tpl-elegant .d2 {
    inset: 30px;
    border: 1px solid var(--c);
    opacity: .6;
}

.tpl-elegant .d3,
.tpl-elegant .d4 {
    width: 90px;
    height: 90px;
    border: 4px solid var(--c);
}

.tpl-elegant .d3 {
    top: 14px;
    left: 14px;
    border-right: 0;
    border-bottom: 0;
}

.tpl-elegant .d4 {
    right: 14px;
    bottom: 14px;
    border-top: 0;
    border-left: 0;
}

.tpl-elegant .cert-subtitle,
.tpl-elegant .cert-desc {
    color: #d5dbe5;
}

.tpl-elegant .cert-name {
    color: #fff;
}

.tpl-elegant .sig-role,
.tpl-elegant .cert-no {
    color: #b8c2d3;
}

.tpl-elegant .cert-seal {
    color: #0f1d33;
    box-shadow: 0 0 0 5px #0f1d33, 0 0 0 8px var(--c);
}

.tpl-elegant input::placeholder,
.tpl-elegant textarea::placeholder {
    color: rgba(255, 255, 255, .35);
}

.tpl-elegant input:hover,
.tpl-elegant textarea:hover {
    border-color: rgba(255, 255, 255, .35);
}

.tpl-elegant input:focus,
.tpl-elegant textarea:focus {
    background: rgba(255, 255, 255, .06);
}

.tpl-elegant .logo-drop {
    border-color: rgba(255, 255, 255, .4);
}

/* ---------- Template 4: Minimal ---------- */
.tpl-minimal {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.tpl-minimal .d1 {
    top: 0;
    right: 0;
    left: 0;
    height: 14px;
    background: var(--c);
}

.tpl-minimal .d2 {
    inset: 40px;
    border: 1px solid #e5e5e5;
}

.tpl-minimal .cert-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.tpl-minimal .cert-subtitle {
    font-style: normal;
}

.tpl-minimal .cert-name {
    font-family: 'Playfair Display', serif;
    font-size: 54px;
}

.tpl-minimal .cert-name-line {
    width: 80px;
}

.tpl-minimal .cert-seal {
    background: transparent;
    color: var(--c);
    border: 2px solid var(--c);
    box-shadow: none;
}

/* ---------- Template 5: Award ---------- */
.tpl-award .d1 {
    top: -170px;
    left: -10%;
    width: 120%;
    height: 280px;
    border-radius: 0 0 50% 50%;
    background: var(--c);
}

.tpl-award .d2 {
    bottom: -170px;
    left: -10%;
    width: 120%;
    height: 240px;
    border-radius: 50% 50% 0 0;
    background: var(--c);
    opacity: .9;
}

.tpl-award .d3 {
    top: 96px;
    left: -10%;
    width: 120%;
    height: 8px;
    border-radius: 50%;
    background: #00476F;
    opacity: .15;
}

.tpl-award .d4 {
    inset: 16px;
    border: 2px dashed var(--c);
    opacity: .35;
}

.tpl-award .cert-inner {
    top: 34px;
}

.tpl-award .cert-org,
.tpl-award .cert-top {
    color: #fff;
}

.tpl-award .logo-drop {
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

.tpl-award .cert-title {
    margin-top: 40px;
}

.tpl-award .cert-no {
    top: auto;
    right: auto;
    bottom: -44px;
    left: 0;
    color: #fff;
}

.tpl-award .cert-seal {
    box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--c), 0 10px 20px rgba(0, 0, 0, .15);
}

/* ---------- Panel ---------- */
.cert-hint {
    margin: 12px 0 0;
    color: #6b7c8a;
    font-size: 14px;
    text-align: center;
    text-transform: none;
}

.cert-templates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cert-thumb {
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s ease;
}

.cert-thumb.active,
.cert-thumb:hover {
    border-color: var(--theme3);
}

.cert-thumb small {
    display: block;
    margin-top: 4px;
    color: var(--header);
    font-size: 11px;
    font-weight: 600;
}

.cert-thumb .mini {
    position: relative;
    display: block;
    aspect-ratio: 1.414;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.cert-thumb .mini i {
    position: absolute;
    top: 46%;
    left: 25%;
    width: 50%;
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .3);
}

.mini-classic {
    background: #fffdf6 !important;
    border: 3px double #B8860B;
}

.mini-modern {
    border-left: 9px solid #00476F;
}

.mini-elegant {
    background: #0f1d33 !important;
    border: 2px solid #B8860B;
}

.mini-elegant i {
    background: rgba(255, 255, 255, .5) !important;
}

.mini-minimal {
    border-top: 5px solid #00476F;
}

.mini-award {
    background: linear-gradient(#E1924B 0 20%, #fff 20% 82%, #E1924B 82%) !important;
}

.cert-uploads {
    display: grid;
    gap: 6px;
}

.cert-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px dashed #b9c6d3;
    border-radius: 8px;
    background: #fff;
    color: var(--theme);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cert-upload:hover {
    border-color: var(--theme);
}

.cert-clear-sign {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #dc2626;
    font-size: 12px;
    text-decoration: underline;
}

/* ---------- Print: phakt certificate, A4 landscape ---------- */
@media print {
    body.cert-printing #invPrintRoot .cert {
        position: relative;
        width: 297mm;
        height: 210mm;
        transform: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    body.cert-printing #invPrintRoot .cert input,
    body.cert-printing #invPrintRoot .cert textarea {
        border-color: transparent !important;
    }
}


/* ---------- Certificate - position fixes ---------- */
.cert-no {
    top: -24px;
    right: 0;
}

.tpl-award .d2 {
    bottom: -165px;
    height: 205px;
}

.tpl-award .d3 {
    display: none;
}

.tpl-award .cert-inner {
    bottom: 64px;
}

.tpl-award .cert-no {
    top: -22px;
    right: -30px;
    bottom: auto;
    left: auto;
    color: #fff;
}


/* =========================================================
   Free Tools - Website Cost Calculator
   ========================================================= */
.wcc p,
.wcc small,
.wcc li,
.wcc td,
.wcc em,
.wcc span {
    text-transform: none;
}

.wcc-step {
    margin-bottom: 24px;
    padding: 26px;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0, 71, 111, .06);
}

.wcc-step-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.wcc-step-head .no {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme3);
    color: #fff;
    font-weight: 700;
}

.wcc-step-head h3 {
    margin: 0 0 2px;
    font-size: 21px;
}

.wcc-step-head p {
    margin: 0;
    color: #6b7c8a;
    font-size: 14px;
}

/* Step 1 - types */
.wcc-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wcc-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px;
    border: 2px solid #e6ecf2;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.wcc-type:hover {
    border-color: #b9cddd;
    transform: translateY(-2px);
}

.wcc-type.active {
    border-color: var(--theme3);
    background: #fffaf5;
    box-shadow: 0 10px 24px rgba(225, 146, 75, .18);
}

.wcc-type .icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    font-size: 19px;
}

.wcc-type.active .icon {
    background: var(--theme3);
}

.wcc-type b {
    color: var(--header);
    font-size: 16px;
}

.wcc-type small {
    color: #6b7c8a;
    font-size: 13px;
    line-height: 1.5;
}

.wcc-type .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
}

.wcc-type .meta em {
    padding: 3px 10px;
    border-radius: 20px;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

/* Step 2 - pages */
.wcc-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wcc-pages li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f5f8fb;
    color: var(--header);
    font-size: 14px;
    font-weight: 600;
}

.wcc-pages li i {
    margin-top: 3px;
    color: #1f9d55;
}

.wcc-features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.wcc-features .label {
    color: var(--header);
    font-size: 14px;
    font-weight: 700;
}

.wcc-features ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wcc-features li {
    padding: 4px 10px;
    border-radius: 20px;
    background: #fff4e9;
    color: #b25e09;
    font-size: 12px;
    font-weight: 600;
}

.wcc-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px dashed #cfd8e2;
    border-radius: 12px;
}

.wcc-extra b {
    display: block;
    color: var(--header);
}

.wcc-extra small {
    color: #6b7c8a;
}

.wcc-stepper {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cfd8e2;
    border-radius: 10px;
}

.wcc-stepper button {
    width: 40px;
    height: 40px;
    border: 0;
    background: #eaf2f8;
    color: var(--theme);
    font-size: 20px;
    font-weight: 700;
}

.wcc-stepper input {
    width: 60px;
    height: 40px;
    border: 0;
    outline: none;
    color: var(--header);
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

.wcc-stepper input::-webkit-outer-spin-button,
.wcc-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* Step 3 */
.wcc-two {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}

/* Step 4 - add-ons */
.wcc-addons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.wcc-addon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 40px 12px 12px;
    border: 2px solid #e6ecf2;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.wcc-addon input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wcc-addon .icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf2f8;
    color: var(--theme);
}

.wcc-addon .text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wcc-addon b {
    color: var(--header);
    font-size: 14px;
    line-height: 1.3;
}

.wcc-addon .price {
    color: #6b7c8a;
    font-size: 12px;
}

.wcc-addon .inc {
    display: none;
    color: #1f9d55;
    font-size: 12px;
    font-weight: 700;
}

.wcc-addon .tick {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #cfd8e2;
    border-radius: 6px;
    color: transparent;
    font-size: 11px;
    transform: translateY(-50%);
}

.wcc-addon:has(input:checked),
.wcc-addon.is-checked {
    border-color: var(--theme);
    background: #f5f9fc;
}

.wcc-addon input:checked ~ .tick {
    border-color: var(--theme);
    background: var(--theme);
    color: #fff;
}

.wcc-addon input:focus-visible ~ .tick {
    outline: 2px solid var(--theme3);
    outline-offset: 2px;
}

.wcc-addon.is-included {
    border-color: #bfe6cf;
    background: #f3fbf6;
    cursor: default;
}

.wcc-addon.is-included .price {
    display: none;
}

.wcc-addon.is-included .inc {
    display: block;
}

.wcc-addon.is-included input ~ .tick {
    border-color: #1f9d55;
    background: #1f9d55;
    color: #fff;
}

/* Result */
.wcc-result {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 71, 111, .14);
}

.wcc-result-main {
    padding: 30px;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
}

.wcc-result-main .label {
    display: block;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    font-weight: 600;
}

.wcc-total {
    display: block;
    margin: 6px 0 16px;
    font-size: 32px;
    line-height: 1.2;
}

.wcc-quick {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.wcc-quick li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
}

.wcc-quick i {
    width: 18px;
    color: #f5b778;
}

.wcc-gst {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.wcc-gst input {
    width: 16px;
    height: 16px;
    accent-color: var(--theme3);
}

.wcc-cta {
    display: grid;
    gap: 10px;
}

.wcc-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    transition: transform .2s ease;
}

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

.wcc-wa {
    background: #25D366;
    color: #fff;
}

.wcc-wa:hover {
    color: #fff;
}

.wcc-contact {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
}

.wcc-contact:hover {
    background: #fff;
    color: var(--theme);
}

.wcc-breakdown {
    padding: 26px;
    background: #fff;
}

.wcc-breakdown h4 {
    margin-bottom: 12px;
    font-size: 19px;
}

.wcc-breakdown table {
    width: 100%;
    border-collapse: collapse;
}

.wcc-breakdown td {
    padding: 9px 4px;
    border-bottom: 1px solid #edf0f3;
    color: #4a5a68;
    font-size: 14px;
}

.wcc-breakdown td:last-child {
    color: var(--header);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.wcc-breakdown tr.total td {
    border-bottom: 0;
    border-top: 2px solid var(--theme);
    color: var(--theme);
    font-size: 16px;
    font-weight: 700;
}

.wcc-breakdown .note {
    margin: 12px 0 0;
    color: #8a96a3;
    font-size: 12px;
}

/* Live total bar */
.wcc-bar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 990;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 40px;
    background: var(--header);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 20px);
    transition: all .3s ease;
}

.wcc-bar.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.wcc-bar:hover {
    color: #fff;
}

.wcc-bar span {
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
}

.wcc-bar b {
    color: #f5b778;
    font-size: 16px;
    white-space: nowrap;
}

.wcc-bar em {
    color: #fff;
    font-size: 13px;
    font-style: normal;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .wcc-addons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .wcc-types {
        grid-template-columns: repeat(2, 1fr);
    }

    .wcc-two,
    .wcc-result {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .wcc-step {
        padding: 18px 14px;
    }

    .wcc-types,
    .wcc-addons {
        grid-template-columns: 1fr;
    }

    .wcc-extra {
        flex-direction: column;
        align-items: flex-start;
    }

    .wcc-total {
        font-size: 26px;
    }

    .wcc-result-main,
    .wcc-breakdown {
        padding: 20px 16px;
    }

    /* WhatsApp float sathe takkar na thay */
    .wcc-bar {
        left: 12px;
        right: 80px;
        justify-content: space-between;
        transform: translateY(20px);
    }

    .wcc-bar.show {
        transform: translateY(0);
    }

    .wcc-bar span {
        display: none;
    }
}

@media (max-width: 575px) {
    .wcc-bar em {
        display: none;
    }
}


/* =========================================================
   Free Tools - Land Area Calculator
   ========================================================= */
.land-calc {
    margin: 24px 0 30px;
    padding: 26px;
    border: 1px solid #eef0f3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0, 71, 111, .08);
}

.land-calc span,
.land-calc small,
.land-calc label {
    text-transform: none;
}

.land-row {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr auto 1.3fr;
    align-items: end;
    gap: 14px;
}

.land-field {
    min-width: 0;
}

.land-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--header);
    font-size: 14px;
    font-weight: 600;
}

.land-field input,
.land-field .form-select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #cfd8e2;
    border-radius: 10px;
    background-color: #fff;
    color: var(--header);
    font-size: 15px;
    font-weight: 600;
    outline: none;
}

.land-field input:focus,
.land-field .form-select:focus {
    border-color: var(--theme);
    box-shadow: 0 0 0 3px rgba(0, 71, 111, .12);
}

.land-swap {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--theme3);
    color: #fff;
    font-size: 18px;
    transition: transform .3s ease;
}

.land-swap:hover {
    transform: rotate(180deg);
}

.land-vigha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff4e9;
    color: #8a4a08;
    font-size: 14px;
}

.land-vigha[hidden] {
    display: none;
}

.land-vigha label {
    margin: 0;
    font-weight: 700;
}

.land-vigha input {
    width: 110px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #f0c9a0;
    border-radius: 8px;
    color: var(--header);
    font-weight: 700;
    outline: none;
}

.land-vigha small {
    flex-basis: 100%;
    color: #a0662c;
    font-size: 12px;
}

.land-result {
    margin-top: 18px;
    padding: 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--theme), var(--theme2));
    color: #fff;
    text-align: center;
}

.land-result-label {
    display: block;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}

.land-result-value {
    display: block;
    margin: 4px 0;
    font-size: 34px;
    line-height: 1.25;
    word-break: break-word;
}

.land-formula {
    display: block;
    color: #f5b778;
    font-size: 13px;
    font-weight: 600;
}

.land-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.land-popular > span {
    color: var(--header);
    font-size: 14px;
    font-weight: 700;
}

.land-popular button {
    padding: 6px 12px;
    border: 1px solid #dfe8f0;
    border-radius: 20px;
    background: #f7fbfe;
    color: var(--theme);
    font-size: 13px;
    font-weight: 600;
    transition: all .2s ease;
}

.land-popular button:hover,
.land-popular button.active {
    border-color: var(--theme3);
    background: var(--theme3);
    color: #fff;
}

.land-all {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.land-all > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #edf0f3;
    border-radius: 10px;
    background: #fafcfe;
}

.land-all > div.active {
    border-color: var(--theme3);
    background: #fffaf5;
}

.land-all b {
    display: block;
    color: var(--theme);
    font-size: 16px;
    word-break: break-word;
}

.land-all span {
    color: #6b7c8a;
    font-size: 12px;
}

@media (max-width: 767px) {
    .land-row {
        grid-template-columns: 1fr;
    }

    .land-swap {
        justify-self: center;
        transform: rotate(90deg);
    }

    .land-swap:hover {
        transform: rotate(270deg);
    }

    .land-all {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .land-calc {
        padding: 16px;
    }

    .land-result-value {
        font-size: 26px;
    }
}


/* ---------- Custom dropdown (theme mujab, 5 options pachhi scroll) ---------- */
.land-field {
    position: relative;
}

.jg-dd-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.jg-dd {
    position: relative;
}

.jg-dd-btn {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #cfd8e2;
    border-radius: 10px;
    background: #fff;
    color: var(--header);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.jg-dd-btn:hover {
    border-color: #9fb4c7;
}

.jg-dd-btn:focus-visible,
.jg-dd.open .jg-dd-btn {
    border-color: var(--theme);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 71, 111, .12);
}

.jg-dd-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: none;
}

.jg-dd-btn i {
    flex: 0 0 auto;
    color: var(--theme);
    font-size: 13px;
    transition: transform .25s ease;
}

.jg-dd.open .jg-dd-btn i {
    transform: rotate(180deg);
}

.jg-dd-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 60;
    max-height: 218px; /* ek sathe 5 options */
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(0, 71, 111, .16);
    scrollbar-width: thin;
    scrollbar-color: #c5d3df transparent;
}

.jg-dd-list[hidden] {
    display: none;
}

.jg-dd-list::-webkit-scrollbar {
    width: 6px;
}

.jg-dd-list::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #c5d3df;
}

.jg-dd-list li {
    height: 41px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--header);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-transform: none;
}

.jg-dd-list li.hl {
    background: #eef4f9;
}

.jg-dd-list li.selected {
    background: var(--theme);
    color: #fff;
    font-weight: 700;
}

/* Lamba option naam na kapay - list button karta pahodi thai shake */
.jg-dd-list {
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: min(320px, calc(100vw - 32px));
}


/* ---------- Header cart count badge - theme rang ---------- */
.header-main .header-right .header-icon li a .number {
    background-color: var(--theme);
    color: #fff;
}
/* ---------- Digital product detail - Live Preview button ---------- */
.jg-dp-actions .jg-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--theme);
    color: #fff;
}
 
.jg-dp-actions .jg-preview-btn:hover {
    color: #fff;
}
/* 1) Mobile horizontal scroll fix */
@media (max-width: 991px) {
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}
 
/* 2) Blog content na table mobile par kapay nahi - table ni andar j side scroll */
.jg-blog-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}