/* Local-only tweaks for the offline clone. Keep minimal so original design is preserved. */

/* Ensure images that failed lazy-init still display at natural size */
img { max-width: 100%; }

/* The original delays JS; make sure sticky header sits above carousels */
.header-sticky { z-index: 1030; }

/* Missing-image placeholder styling (applied by site.js) */
img.is-placeholder {
  object-fit: contain;
  background: #eef0f3;
  min-width: 40px;
  min-height: 40px;
}
.is-placeholder-bg {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* === Push page content below the fixed site header === */
.odoo-integration .ks-hero-sec .ks-banner-sec {
    padding-top: 110px;   /* match your header height */
}

@media (max-width: 991px) {
    .odoo-integration .ks-hero-sec .ks-banner-sec {
        padding-top: 80px;
    }
}

/* ============================================================
   Business Growth — redesigned UI (bento card grid)
   Content is unchanged; only the layout/styling is new.
   ============================================================ */
.business-growth.bg-redesign .bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 20px;
}

.business-growth.bg-redesign .bg-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 32px 28px;
    background: #ffffff;
    border: 1px solid #EFE6EE;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(40, 41, 46, .05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.business-growth.bg-redesign .bg-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(162, 70, 137, .16);
    border-color: #A24689;
}

.business-growth.bg-redesign .bg-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBF1F8;
    margin-bottom: 20px;
}

/* override the global `.business-growth img{min-width:64px}` rule */
.business-growth.bg-redesign .bg-card__icon img {
    width: 44px;
    height: 44px;
    min-width: 0;
    object-fit: contain;
}

.business-growth.bg-redesign .bg-card h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #28292E;
    margin: 0 0 10px;
    text-align: left;
}

.business-growth.bg-redesign .bg-card p {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #3F3F41;
    margin: 0;
    text-align: left;
}

/* Featured card: tall, left column, dark gradient */
.business-growth.bg-redesign .bg-card--feature {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-content: center;
    background: linear-gradient(160deg, #3A2740 0%, #34353A 60%, #28292E 100%);
    border-color: transparent;
}

.business-growth.bg-redesign .bg-card--feature .bg-card__icon {
    background: rgba(255, 255, 255, .12);
}

.business-growth.bg-redesign .bg-card--feature h3 {
    color: #ffffff;
    font-size: 26px;
    line-height: 34px;
}

.business-growth.bg-redesign .bg-card--feature p {
    color: #E8E7E7;
    font-size: 16px;
}

.business-growth.bg-redesign .bg-card--feature:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(40, 41, 46, .28);
}

/* Tablet: 2 columns, feature becomes a full-width banner on top */
@media (max-width: 991px) {
    .business-growth.bg-redesign .bg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .business-growth.bg-redesign .bg-card--feature {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* Mobile: single column stack */
@media (max-width: 575px) {
    .business-growth.bg-redesign .bg-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .business-growth.bg-redesign .bg-card {
        padding: 24px 20px;
    }
    .business-growth.bg-redesign .bg-card--feature h3 {
        font-size: 22px;
        line-height: 30px;
    }
}

/* ============================================================
   Odoo Offerings (.odoolinks) — redesigned UI (service cards)
   Content/links unchanged; only the layout/styling is new.
   ============================================================ */
.odoolinks.offer-redesign .offer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.odoolinks.offer-redesign .offer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: center;
    padding: 30px 20px;
    background: #ffffff;
    border: 1px solid #EFE6EE;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(40, 41, 46, .05);
    text-decoration: none;
    /* neutralise the legacy `.odoolinks a:hover{transform:scale(1.04)}` */
    transform: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.odoolinks.offer-redesign .offer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(225, 61, 75, .15);
    border-color: #E13D4B;
}

.odoolinks.offer-redesign .offer-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBF1F8;
    transition: background-color .3s ease;
}

.odoolinks.offer-redesign .offer-card:hover .offer-card__icon {
    background: #FDEAEC;
}

.odoolinks.offer-redesign .offer-card__icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.odoolinks.offer-redesign .offer-card__title {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #3F3F41;
    transition: color .3s ease;
}

.odoolinks.offer-redesign .offer-card:hover .offer-card__title {
    color: #E13D4B;
}

/* Tablet: 3 then 2 columns */
@media (max-width: 1199px) {
    .odoolinks.offer-redesign .offer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .odoolinks.offer-redesign .offer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .odoolinks.offer-redesign .offer-card {
        padding: 24px 14px;
    }
}

/* ============================================================
   Benefits (.ks-java-experties) — redesigned right-side grid
   Content unchanged; new icons + visually rich card grid.
   ============================================================ */
.ks-java-experties.benefits-redesign .benefits-right {
    position: relative;
}

/* soft decorative glow behind the grid */
.ks-java-experties.benefits-redesign .benefits-right::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 240px;
    height: 240px;
    right: -40px;
    top: -40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(203, 106, 179, .18), rgba(203, 106, 179, 0) 70%);
    pointer-events: none;
}

.ks-java-experties.benefits-redesign .bx-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ks-java-experties.benefits-redesign .bx-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #EFE6EE;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(40, 41, 46, .05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ks-java-experties.benefits-redesign .bx-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(162, 70, 137, .18);
    border-color: #CB6AB3;
}

.ks-java-experties.benefits-redesign .bx-card__icon {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #A24689 0%, #CB6AB3 100%);
    box-shadow: 0 8px 16px rgba(162, 70, 137, .30);
    transition: transform .3s ease;
}

.ks-java-experties.benefits-redesign .bx-card:hover .bx-card__icon {
    transform: scale(1.08) rotate(-3deg);
}

.ks-java-experties.benefits-redesign .bx-card__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    min-width: 0;
}

.ks-java-experties.benefits-redesign .bx-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: #1C1C1C;
    transition: color .3s ease;
}

.ks-java-experties.benefits-redesign .bx-card:hover .bx-card__title {
    color: #A24689;
}

/* Mobile: single column */
@media (max-width: 575px) {
    .ks-java-experties.benefits-redesign .bx-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ks-java-experties.benefits-redesign .bx-card {
        padding: 16px;
    }
}

/* Hire developers — photo styling */
.hiring-devs .hire-team-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 16px 40px rgba(40, 41, 46, .12);
}

/* ============================================================
   Why Choose Us — animated reason cards (.why-reasons)
   ============================================================ */
.why-reasons {
    margin-top: 8px;
}

.why-reasons .wr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-reasons .wr-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #EFE6EE;
    border-radius: 18px;
    padding: 30px 26px;
    box-shadow: 0 6px 22px rgba(40, 41, 46, .06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* animated gradient accent bar across the top on hover */
.why-reasons .wr-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, #A24689, #CB6AB3);
    transition: width .4s ease;
}

.why-reasons .wr-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px rgba(162, 70, 137, .18);
    border-color: #CB6AB3;
}

.why-reasons .wr-card:hover::before {
    width: 100%;
}

/* faint watermark number */
.why-reasons .wr-card__num {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #A24689, #CB6AB3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: .12;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.why-reasons .wr-card:hover .wr-card__num {
    opacity: .22;
    transform: scale(1.06);
}

/* gradient icon badge */
.why-reasons .wr-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #A24689 0%, #CB6AB3 100%);
    box-shadow: 0 10px 18px rgba(162, 70, 137, .30);
    transition: transform .35s ease;
}

.why-reasons .wr-card:hover .wr-card__icon {
    transform: scale(1.08) rotate(-4deg);
}

.why-reasons .wr-card__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    min-width: 0;
}

.why-reasons .wr-card__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #28292E;
    margin: 0 0 8px;
}

.why-reasons .wr-card__desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
    color: #3F3F41;
    margin: 0;
}

/* Scroll-reveal entrance (only active once JS adds .reveal-ready;
   without JS the cards stay fully visible — graceful fallback) */
.why-reasons.reveal-ready .wr-card {
    opacity: 0;
    transform: translateY(28px);
}

.why-reasons.reveal-ready .wr-card.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: calc(var(--i, 0) * .08s);
}

/* Tablet: 2 columns */
@media (max-width: 991px) {
    .why-reasons .wr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

/* Mobile: single column */
@media (max-width: 575px) {
    .why-reasons .wr-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .why-reasons .wr-card {
        padding: 24px 20px;
    }
    .why-reasons .wr-card__num {
        font-size: 38px;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .why-reasons.reveal-ready .wr-card {
        opacity: 1;
        transform: none;
    }
    .why-reasons .wr-card,
    .why-reasons .wr-card::before,
    .why-reasons .wr-card__icon,
    .why-reasons .wr-card__num {
        transition: none;
    }
}

/* ============================================================
   Our Diverse Industry Reach — animated industry cards
   ============================================================ */
.industries-redesign .ind-wrap {
    position: relative;
}

.industries-redesign .ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.industries-redesign .ind-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 32px 20px;
    background: #ffffff;
    border: 1px solid #EFE6EE;
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(40, 41, 46, .05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* soft glow that expands from behind the icon on hover */
.industries-redesign .ind-card::after {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(203, 106, 179, .16), transparent 70%);
    transition: transform .5s ease;
    z-index: 0;
    pointer-events: none;
}

.industries-redesign .ind-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(162, 70, 137, .16);
    border-color: #CB6AB3;
}

.industries-redesign .ind-card:hover::after {
    transform: translateX(-50%) scale(1.4);
}

.industries-redesign .ind-card__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: linear-gradient(135deg, #A24689 0%, #CB6AB3 100%);
    box-shadow: 0 10px 18px rgba(162, 70, 137, .30);
    transition: transform .35s ease;
}

.industries-redesign .ind-card:hover .ind-card__icon {
    transform: scale(1.1) rotate(-5deg);
}

.industries-redesign .ind-card__icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    min-width: 0;
}

.industries-redesign .ind-card__title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    color: #28292E;
    transition: color .3s ease;
}

.industries-redesign .ind-card:hover .ind-card__title {
    color: #A24689;
}

/* Scroll-reveal entrance (JS adds .reveal-ready; graceful without JS) */
.industries-redesign .ind-grid.reveal-ready .ind-card {
    opacity: 0;
    transform: translateY(28px);
}

.industries-redesign .ind-grid.reveal-ready .ind-card.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease, transform .55s ease;
    transition-delay: calc(var(--i, 0) * .07s);
}

/* Responsive */
@media (max-width: 991px) {
    .industries-redesign .ind-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .industries-redesign .ind-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .industries-redesign .ind-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industries-redesign .ind-grid.reveal-ready .ind-card {
        opacity: 1;
        transform: none;
    }
    .industries-redesign .ind-card,
    .industries-redesign .ind-card::after,
    .industries-redesign .ind-card__icon,
    .industries-redesign .ind-card__title {
        transition: none;
    }
}