body {
    font-family: 'Hind Siliguri', sans-serif;
    background: #17221e;
    overflow-x: hidden;
}

/* Full-page dotted texture, ported from the reference site's
   `.nk-mask.bg-pattern-dot-white-sm`: an absolutely positioned layer the
   height of the whole page (not the viewport — it scrolls with the
   content), tiling a small dot sprite behind/through every section.
   pointer-events: none so it never intercepts clicks.

   `isolation: isolate` makes .home-page__root its own stacking context, so
   a negative z-index on the mask only drops it below this root's own
   children (cards, images, the sticky header, ...) — without isolation it
   would compare against ancestors further up and paint completely behind
   body's opaque background, i.e. invisible everywhere instead of just
   behind content. */
.home-page__root {
    position: relative;
    isolation: isolate;
}

.home-page__dot-mask {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url(/legacy-inventory/assets/images/hero/dot-a-white.png);
    background-size: 20px 20px;
    background-position: center;
}

/* Ambient background shapes, ported from the reference site's `.nk-shape`
   system (https://copygen.themenio.com/index-s5.html): soft blurred glows
   and thin arc outlines, centred horizontally then nudged off-centre with
   the exact width/height and margin offsets read out of their stylesheet.
   Percentage margins (including margin-top) resolve against the width of
   whichever positioned ancestor each shape sits in — that's intentional,
   it's what produces the large sweeping placement. Purely decorative, so
   pointer-events: none and a low z-index that only needs to clear default
   static content. */
.home-page__shape-gap {
    position: relative;
}

/* border-c's margin-top now pulls it down far enough to reach the
   DemoVideoBanner card below. The base .home-page__shape z-index:1 would
   otherwise paint it above that card (positive z-index always wins over
   the card's plain position:relative/z-index:auto, regardless of DOM
   order) — drop it to 0 so the card, which comes later in the DOM, wins
   the tie and the shape stays behind it instead of over it. */
.home-page__shape-gap .home-page__shape {
    z-index: 0;
}

.home-page__shape {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.home-page__shape--blur-q {
    width: 928px;
    height: 866px;
    background-image: url(/legacy-inventory/assets/images/shape/blur-q.png);
    margin-top: -20%;
    margin-left: 10%;
}

.home-page__shape--blur-r {
    width: 883px;
    height: 883px;
    background-image: url(/legacy-inventory/assets/images/shape/blur-r.png);
    margin-top: -10%;
    margin-left: -10%;
}

.home-page__shape--border-a {
    width: 572px;
    height: 481px;
    background-image: url(/legacy-inventory/assets/images/shape/border-a.png);
    top: 100%;
    margin-top: -6rem;
    margin-left: 40%;
}

.home-page__shape--border-b {
    width: 237px;
    height: 237px;
    background-image: url(/legacy-inventory/assets/images/shape/border-b.png);
    margin-top: -5rem;
    margin-left: 30%;
}

.home-page__shape--border-c {
    width: 949px;
    height: 949px;
    background-image: url(/legacy-inventory/assets/images/shape/border-c.png);
    margin-top: -36rem;
    margin-left: -40%;
    z-index: 1;
}

.home-page__shape--border-d {
    width: 237px;
    height: 237px;
    background-image: url(/legacy-inventory/assets/images/shape/border-d.png);
    margin-top: -4.5rem;
}

@media(min-width: 992px) {
    .home-page__shape--border-d {
        margin-top: -5rem;
    }
}

.home-page__shape--border-e {
    width: 175px;
    height: 175px;
    background-image: url(/legacy-inventory/assets/images/shape/border-e.png);
    margin-top: .5rem;
    margin-left: -25%;
}

.home-page__shape--border-f {
    width: 257px;
    height: 256px;
    background-image: url(/legacy-inventory/assets/images/shape/border-f.png);
    margin-top: 4.5rem;
    margin-left: 40%;
}

.home-page__hero-area {
    padding-top: 180px;
    background: radial-gradient(134.76% 134.76% at 50% 16.67%,#17221e 37.5%,#1fdb95);
    position: relative
}

/* This used to be 300px (200/180/160/140/120px across breakpoints) to leave
   room for a banner image that overlapped the bottom of the gradient via a
   large negative margin. That banner no longer lives inside Hero (see
   DemoVideoBanner, rendered as its own section elsewhere on the page), so
   the old padding just left a huge empty gradient block below the badges.
   Kept as plain bottom breathing room instead. */
.home-page__hero-area:not(.demo-class .home-page__hero-area) {
    padding-bottom: 120px
}

@media(max-width: 700px) {
    .home-page__hero-area:not(.demo-class .home-page__hero-area) {
        padding-bottom:64px
    }
}

@media(max-width: 560px) {
    .home-page__hero-area:not(.demo-class .home-page__hero-area) {
        padding-bottom:56px
    }
}

@media(max-width: 500px) {
    .home-page__hero-area:not(.demo-class .home-page__hero-area) {
        padding-bottom:48px
    }
}

@media(max-width: 450px) {
    .home-page__hero-area:not(.demo-class .home-page__hero-area) {
        padding-bottom:44px
    }

}

@media(max-width: 400px) {
    .home-page__hero-area:not(.demo-class .home-page__hero-area) {
        padding-bottom:40px
    }
}

.home-page__hero-area__title {
    font-weight: 800;
    font-size: 60px;
    line-height: 68px;
    color: #fff;
    animation: fade-up .6s ease-in-out
}

.home-page__hero-area__title span {
    background: radial-gradient(65.14% 924.42% at 50% 50%,#5eeab4,#0e9c67);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: shine 3s linear infinite
}

@media(max-width: 1199.9px) {
    .home-page__hero-area__title {
        font-size:50px;
        line-height: 58px
    }
}

@media(max-width: 991.9px) {
    .home-page__hero-area__title {
        font-size:40px;
        line-height: 48px
    }
}

@media(max-width: 767.9px) {
    .home-page__hero-area__title {
        font-size:30px;
        line-height: 38px
    }
}

.home-page__hero-area__text {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    color: #fff;
    opacity: 0;
    animation: fade-up .6s ease-in-out .5s forwards
}

.home-page__hero-area__badges {
    margin-top: 110px;
    opacity: 0;
    animation: fade-up .6s ease-in-out .65s forwards
}

.home-page__hero-area__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid #4a6058;
    background-color: #14231d;
    box-shadow: 0 6px 18px #0000002e;
    font-family: Hind Siliguri,sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    transition: border-color .2s ease-in-out, background-color .2s ease-in-out
}

.home-page__hero-area__badge:hover {
    border-color: #1fdb95;
    background-color: #1c2824
}

.home-page__hero-area__badge__icon {
    display: inline-flex;
    color: #1fdb95;
    flex-shrink: 0
}

.home-page__hero-area__badge__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.9
}

.home-page__hero-area__badge__icon img {
    width: 26px;
    height: 26px;
    object-fit: contain
}

@media(max-width: 767.9px) {
    .home-page__hero-area__badge {
        padding: 8px 16px;
        font-size: 13px
    }

    .home-page__hero-area__badge__icon svg {
        width: 18px;
        height: 18px
    }

    .home-page__hero-area__badge__icon img {
        width: 20px;
        height: 20px
    }
}

.home-page__hero-area__icon {
    animation: circle 2.5s linear infinite;
    position: absolute;
    z-index: 1
}

@media(max-width: 1100px) {
    .home-page__hero-area__icon {
        display:none
    }
}

.home-page__hero-area__icon:nth-child(1) {
    left: 20px;
    top: 100px
}

.home-page__hero-area__icon:nth-child(2) {
    right: 30px;
    top: 100px
}

.home-page__hero-area__icon:nth-child(3) {
    left: 40px;
    bottom: 175px
}

.home-page__hero-area__icon:nth-child(4) {
    right: 50px;
    bottom: 175px
}

.home-page__hero-area__icon div {
    width: 80px;
    height: 67px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.home-page__hero-area__icon:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(242.31deg,#1fdb954d 29.84%,#0aa06a4d 77.15%);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: -1
}

.home-page__hero-area__mascot {
    position: absolute;
    left: 3%;
    bottom: 0;
    width: 200px;
    z-index: 1;
    animation: mascot-bob 3.5s ease-in-out infinite
}

@media(max-width: 1300px) {
    .home-page__hero-area__mascot {
        width: 160px
    }
}

@media(max-width: 1100px) {
    .home-page__hero-area__mascot {
        display: none
    }
}

@keyframes mascot-bob {
    0%, 100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-14px)
    }
}

@media(max-width: 767.9px) {
    .home-page__hero-area {
        padding-top:68px
    }

    .home-page__hero-area__text {
        font-size: 16px
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

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

@keyframes shine {
    0% {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

@keyframes circle {
    0% {
        transform: translate(8px)
    }

    12.5% {
        transform: translate(6px,6px)
    }

    25% {
        transform: translateY(8px)
    }

    37.5% {
        transform: translate(-6px,6px)
    }

    50% {
        transform: translate(-8px)
    }

    62.5% {
        transform: translate(-6px,-6px)
    }

    75% {
        transform: translateY(-8px)
    }

    87.5% {
        transform: translate(6px,-6px)
    }

    to {
        transform: translate(8px)
    }
}

/* The hero thumbnail artwork ships with its own play button drawn into it,
   so this stays an invisible hit area centred over that artwork button —
   still a real <button>, so click, keyboard and screen readers all work.
   Sized in % (not px) so it tracks the drawn circle as the image scales. */
.home-page__banner__play-icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    background-color: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
    width: 11%;
    aspect-ratio: 1;
    /* On phones 11% lands around 39px — under the 44px minimum tap target,
       so floor it. Harmless that it slightly overhangs the drawn circle:
       the button is transparent. */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer
}

.home-page__banner__play-icon:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 6px
}

.home-page__banner__play-icon::before,
.home-page__banner__play-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: #1fdb95;
    pointer-events: none;
    opacity: 0;
    animation: play-icon-pulse 5s ease-out infinite;
}

.home-page__banner__play-icon::after {
    animation-delay: 0.4s
}

/* Pulse only runs for the first ~1s of the 5s cycle (0%-20%), then holds
   invisible for the remaining ~4s before the next pulse — a spaced-out
   "heartbeat" instead of a continuous ring. Starts from scale(0.85) at
   opacity 0 so it grows out from behind the button rather than flashing
   on top of it. */
@keyframes play-icon-pulse {
    0% {
        transform: scale(0.85);
        opacity: 0
    }

    8% {
        opacity: 0.45
    }

    20%, 100% {
        transform: scale(2.4);
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page__banner__play-icon::before,
    .home-page__banner__play-icon::after {
        animation: none;
        display: none
    }
}

@keyframes scale {
    0% {
        transform: translate(-50%,-50%) scale(1)
    }

    50% {
        transform: translate(-50%,-50%) scale(1.25)
    }

    to {
        transform: translate(-50%,-50%) scale(1)
    }
}

.home-page__banner {
    min-height: unset!important;
    padding: 0 20px;
    opacity: 0;
    animation: scale-in .4s ease-in-out 1s forwards;
    margin-top: -210px
}

@media(max-width: 700px) {
    .home-page__banner {
        margin-top:-180px
    }
}

@media(max-width: 560px) {
    .home-page__banner {
        margin-top:-160px
    }
}

@media(max-width: 500px) {
    .home-page__banner {
        margin-top:-140px
    }
}

@media(max-width: 450px) {
    .home-page__banner {
        margin-top:-120px
    }
}

@media(max-width: 400px) {
    .home-page__banner {
        margin-top:-100px
    }
}

/* The -210px pull above exists only to let the Hero banner overlap the
   gradient hero backdrop behind it. Reused as a standalone section (e.g.
   below RetailStoresSection) there's no backdrop to pull into, so cancel
   the negative margin. This unconditional rule comes after all the
   `.home-page__banner` breakpoint rules above, so on an equal-specificity
   tie it wins at every viewport width without needing to repeat the same
   media queries. */
.home-page__banner--standalone {
    margin-top: 0
}

.home-page__banner iframe,.home-page__banner__image {
    width: 100%;
    max-width: 1000px;
    border-radius: 16px;
    background-color: #cecece;
    aspect-ratio: 16/9
}

/* The hero thumbnail artwork is 3:2, not 16:9. An <img> defaults to
   object-fit: fill, so without this it gets stretched horizontally into the
   16:9 box and the mockup's text distorts. Overrides the image only — a
   real video iframe in the banner should stay 16:9. The placeholder colour
   goes dark too, so there's no light-grey flash before the near-black
   artwork loads. */
.home-page__banner__image {
    aspect-ratio: 3/2;
    background-color: #0b0f0d
}

@media(max-width: 1500px) {
    .home-page__banner iframe,.home-page__banner__image {
        max-width:800px
    }
}

/* An <img>'s own bitmap always paints over its box-shadow/background — a
   CSS-only tint on the image itself is invisible once it's loaded. Shrink
   wraps to the image's rendered size (same technique as .home-page__banner
   __boom-wrap) so the real overlay div below can sit exactly on top of it. */
.home-page__banner__hero-wrap {
    position: relative;
    display: table;
    margin: 0 auto;
    max-width: 100%
}

.home-page__banner__tint {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: rgba(20, 41, 33, 0.28);
    pointer-events: none
}

/* Shrink-wraps to whatever size the image inside actually renders at (no
   width/max-width/background of its own) so the boom-frame overlay below
   can never end up bigger than the image and expose bare background. */
.home-page__banner__boom-wrap {
    position: relative;
    display: table;
    margin: 0 auto;
    max-width: 100%
}

/* Ring pulse that traces the full image on scroll-in — see banner-boom.js,
   which flips data-boom once when the wrapper enters the viewport. Animation
   duration IS the "stays 500ms" requirement, no JS timer needed. */
.home-page__banner__boom-frame {
    position: absolute;
    inset: -14px;
    border-radius: 24px;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(31,219,149,.55), 0 0 0 0 rgba(10,160,106,.35)
}

.home-page__banner__boom-frame[data-boom="true"] {
    animation: banner-boom .5s ease-out
}

.home-page__banner__watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    letter-spacing: 2px;
    pointer-events: none;
    user-select: none
}

@media(max-width: 700px) {
    .home-page__banner__watermark {
        font-size: 40px
    }
}

@keyframes banner-boom {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(31,219,149,.55), 0 0 0 0 rgba(10,160,106,.35)
    }

    60% {
        opacity: .7
    }

    to {
        opacity: 0;
        box-shadow: 0 0 0 18px rgba(31,219,149,0), 0 0 0 34px rgba(10,160,106,0)
    }
}

.home-page__text {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 2rem;
    color: #5c5c5c;
    max-width: 950px;
    margin: 0 auto 2rem
}

.home-page__why-phitron {
    max-width: 1280px;
    position: relative
}

.home-page__why-phitron .home-page__title {
    margin: 0
}

.home-page__why-phitron__journey {
    max-width: 1170px;
    margin: 0 auto
}

.home-page__why-phitron__journey__container {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.home-page__why-phitron__line-area {
    position: absolute;
    top: 12px;
    right: 0;
    /* Extends past the journey container's own bottom edge (negative offset)
       so the drawn path can travel through the "সমাধান" label and dip into
       the banner image below — see home-page__why-phitron__draw-path's
       path, which now ends inside that image, and why.js's boom-celebration
       trigger at path end. */
    bottom: -225px;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

.home-page__why-phitron__draw-path {
    width: 100%;
    height: 1080px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: visible
}

.home-page__why-phitron__moving-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #0aa06a;
    background: #fff;
    box-shadow: 0 16px 32px #0aa06a26;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
    will-change: transform
}

.home-page__why-phitron__moving-arrow__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.home-page__why-phitron__moving-arrow__icon svg {
    display: block;
    width: 20px;
    height: 20px
}

/* Celebration burst spawned once the moving arrow reaches the end of its
   path (inside the banner image) — see the `celebrate()` call in why.js.
   Rings/dots are positioned via the same x/y transform the arrow itself
   uses, so they originate exactly where the arrow disappears. */
.home-page__why-phitron__boom-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #0aa06a;
    pointer-events: none;
    will-change: transform, opacity
}

.home-page__why-phitron__boom-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity
}

.home-page__why-phitron__questions {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 145px
}

.home-page__why-phitron__question {
    width: min(100%,600px);
    min-height: 102px;
    border-radius: 28px;
    border: 2px solid #d9f8ed;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 40px #1f73540f;
    filter: blur(3px);
    opacity: .35;
    transition: filter .5s ease-in-out,transform .5s ease-in-out,opacity .5s ease-in-out
}

.home-page__why-phitron__question[data-state=visible] {
    filter: none;
    opacity: 1
}

.home-page__why-phitron__question--start,.home-page__why-phitron__question--end {
    align-self: center
}

.home-page__why-phitron__question--avatar-left {
    padding: 26px 32px 26px 78px
}

.home-page__why-phitron__question--avatar-left .home-page__why-phitron__question__avatar {
    left: -18px
}

.home-page__why-phitron__question--avatar-right {
    padding: 26px 78px 26px 32px
}

.home-page__why-phitron__question--avatar-right .home-page__why-phitron__question__avatar {
    right: -18px
}

.home-page__why-phitron__question--sky {
    background: #def7ee
}

.home-page__why-phitron__question--sand {
    background: #f7f0d8
}

.home-page__why-phitron__question--pink {
    background: #f3d7e6
}

.home-page__why-phitron__question__avatar {
    position: absolute;
    bottom: 0;
    width: 92px;
    height: auto
}

.home-page__why-phitron__question__content {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.home-page__why-phitron__question p {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    color: #31403b;
    text-align: center
}

.home-page__why-phitron__question h3 {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 120%;
    color: #0b2e21;
    text-align: center
}

.home-page__why-phitron__solution {
    margin-top: 40px;
    font-family: Hind Siliguri,sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 100%;
    color: #fff;
    position: relative;
    z-index: 2
}

.banner-2{
    margin-top: 50px;
}


@media(max-width: 991.9px) {
    .home-page__why-phitron__journey {
        max-width:760px
    }

    .home-page__why-phitron__questions {
        margin-top: 0
    }

    .home-page__why-phitron__question,.home-page__why-phitron__question--center {
        width: min(100%,620px)
    }

    .home-page__why-phitron__question h3 {
        font-size: 28px
    }



    .home-page__why-phitron__solution {
        font-size: 32px
    }

}

@media(max-width: 767.9px) {
    .home-page__why-phitron__journey {
        gap:32px
    }

    .home-page__why-phitron__line-area {
        display: none
    }

    .home-page__why-phitron__questions {
        gap: 24px
    }

    .home-page__why-phitron__question {
        width: calc(100% - 56px);
        min-height: 96px;
        filter: none;
        opacity: 1
    }

    .home-page__why-phitron__question--start {
        margin-left: 0;
        margin-right: auto
    }

    .home-page__why-phitron__question--end {
        margin-right: 0;
        margin-left: auto
    }



    .home-page__why-phitron__question--avatar-left {
        padding: 22px 18px 22px 66px
    }

    .home-page__why-phitron__question--avatar-right {
        padding: 22px 66px 22px 18px
    }

    .home-page__why-phitron__question__avatar {
        width: 78px
    }

    .home-page__why-phitron__question p {
        font-size: 16px
    }

    .home-page__why-phitron__question h3 {
        font-size: 22px
    }











    .home-page__why-phitron__solution {
        font-size: 28px
    }










}

.home-page__become-backend-developer {
    margin-top: 6rem;
    margin-bottom: 36px
}

.home-page__become-backend-developer .home-page__title {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto
}

.home-page__become-backend-developer .home-page__title span.home-page__title__highlight {
    font-family: Montserrat,sans-serif
}

.home-page__become-backend-developer .home-page__title span.home-page__title__highlight svg {
    margin-top: -6px
}

.home-page__become-backend-developer__rocket {
    top: 0;
    left: 0;
    z-index: 1;
    rotate: 270deg;
    transition: opacity .6s ease-in-out
}

.home-page__become-backend-developer__line-svg {
    top: 0;
    left: 50%;
    transform: translate(-50%);
    height: 2020px;
    width: 50%;
    z-index: 0
}

.home-page__become-backend-developer__inner {
    max-width: 800px
}

.home-page__become-backend-developer__items {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap: 20px
}

.home-page__become-backend-developer__item {
    background-image: linear-gradient(180deg,#fff,#f5f6f6);
    background-color: #f8f8f8;
    box-shadow: 0 0 15.1px #0000001f;
    border-radius: 20px;
    padding: 20px;
    border-width: 1px;
    border-left-width: 0;
    border-right-width: 0;
    border-style: solid;
    border-color: #fff;
    position: relative;
    z-index: 2;
    max-width: 400px;
    min-height: 323px;
    filter: blur(2px);
    transform: translateY(30px);
    opacity: .3;
    transition: filter .5s ease-in-out,transform .5s ease-in-out,opacity .5s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,background-image .2s ease-in-out,box-shadow .2s ease-in-out
}

/* Fade-in/out preview image that sits in each row's empty grid cell, on
   whichever side is opposite its step card — feature-preview.js toggles
   data-visible per pair while that row's card crosses the middle band of
   the viewport (see the IntersectionObserver rootMargin there for what
   counts as "middle"). Sized to match .item exactly so it reads as a
   paired card, not a random image dropped into the gap. */
.home-page__become-backend-developer__empty-item--preview {
    position: relative;
    width: 100%;
    max-width: 400px;
    min-height: 323px
}

/* Card sits in the left column -> push the image right, away from it. */
.home-page__become-backend-developer__empty-item--preview-right {
    margin-left: 250px
}

/* Card sits in the right column -> push the image left, away from it. */
.home-page__become-backend-developer__empty-item--preview-left {
    margin-left: -250px
}

.home-page__become-backend-developer__preview-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 0 15.1px #0000001f;
    opacity: 0;
    transition: opacity .5s ease-in-out
}

.home-page__become-backend-developer__preview-image[data-visible="true"] {
    opacity: 1
}

.home-page__become-backend-developer__item.home-page__become-backend-developer__item--blue {
    background-image: linear-gradient(135deg,#79dfc1,#4fd1b0);
    background-color: #79dfc1
}

.home-page__become-backend-developer__item.home-page__become-backend-developer__item--warm {
    background-image: linear-gradient(135deg,#ffd9a8,#ffb8cf);
    background-color: #ffd9a8
}

.home-page__become-backend-developer__item.home-page__become-backend-developer__item--green {
    background-image: linear-gradient(135deg,#a9e6b8,#84dbcf);
    background-color: #a9e6b8
}

.home-page__become-backend-developer__item[data-state=visible] {
    filter: unset;
    transform: unset;
    opacity: 1
}

.home-page__become-backend-developer__item__step {
    max-width: max-content;
    margin-left: auto;
    padding: 11.75px 12px;
    border-radius: 8px;
    background-color: #e0fcf2;
    border: 1px solid #0aa06a;
    transition: background-image .2s ease-in-out,background-color .2s ease-in-out
}

.home-page__become-backend-developer__item__step span {
    transition: background .2s ease-in-out,color .2s ease-in-out;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    background: var(--primary-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent
}

.home-page__become-backend-developer__item:hover {
    background-color: #e0fcf2;
    border-color: #e0fcf2;
    background-image: unset;
    box-shadow: unset
}

.home-page__become-backend-developer__item:hover .home-page__become-backend-developer__item__step {
    background-image: var(--primary-gradient)
}

.home-page__become-backend-developer__item:hover .home-page__become-backend-developer__item__step span {
    color: var(--white);
    background: unset;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    -moz-text-fill-color: unset
}

.home-page__become-backend-developer__item h4 {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 100%;
    color: #0b2e21
}

.home-page__become-backend-developer__cta {
    margin-top: 70px;
    background-image: var(--primary-gradient);
    border: 1px solid #59f2ba66;
    border-radius: 999px;
    padding: 12px 34px;
    font-family: Hind Siliguri,sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--white);
    box-shadow: 0 10px 30px #1fdb954d, inset 0 1px 0 #ffffff26;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out
}

.home-page__become-backend-developer__cta:hover,
.home-page__become-backend-developer__cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px #1fdb9573, inset 0 1px 0 #ffffff33;
    color: var(--white)
}

.home-page__become-backend-developer__item p {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 150%
}

@media(max-width: 839.9px) {
    .home-page__become-backend-developer__rocket,.home-page__become-backend-developer__line-svg,.home-page__become-backend-developer__empty-item {
        display:none
    }

    .home-page__become-backend-developer__items {
        grid-template-columns: repeat(1,1fr);
        column-gap: 20px
    }
}

.home-page__problem-solvers-club {
    margin-top: 6rem;
    margin-bottom: 6rem
}

.home-page__retail-stores__eyebrow {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .3px;
    color: #1fdb95;
    margin-bottom: .5rem
}

.home-page__retail-stores__title {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 52px;
    color: #fff;
    margin-bottom: 0
}

.home-page__retail-stores__row {
    margin-top: 3rem
}

.home-page__retail-stores__media img {
    width: 100%;
    max-width: 100%;
    height: auto
}

.home-page__retail-stores__card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 20px 22px;
    background-color: #1c2824;
    border: 1px solid #384b44;
    border-radius: 16px;
    transition: border-color .2s ease-in-out
}

.home-page__retail-stores__card:hover {
    border-color: #1fdb95
}

.home-page__retail-stores__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: #1fdb95
}

.home-page__retail-stores__icon svg {
    width: 24px;
    height: 24px
}

.home-page__retail-stores__label {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #dbe7e3
}

@media(max-width: 991.9px) {
    .home-page__retail-stores__title {
        font-size: 30px;
        line-height: 40px
    }
}

@media(max-width: 767.9px) {
    .home-page__retail-stores__card {
        padding: 16px;
        gap: 10px
    }

    .home-page__retail-stores__label {
        font-size: 14px
    }
}

.home-page__faq {
    position: relative;
    margin-bottom: 6rem;
    padding: 4rem 0 3.5rem;
    z-index: 0
}

.home-page__faq__row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-top: 3rem
}

.home-page__faq__col {
    flex: 0 0 50%;
    max-width: 50%
}

.home-page__faq__col--image {
    display: flex;
    justify-content: center
}

.home-page__faq__col--image img {
    width: 100%;
    max-width: 100%;
    height: auto
}

.home-page__faq__col--accordion .home-page__faq__accordion {
    max-width: 100%;
    margin: 0
}

@media(max-width: 991.9px) {
    .home-page__faq__row {
        flex-direction: column;
        gap: 2rem
    }

    .home-page__faq__col {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.home-page__faq__accordion .milestone-title {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #fff
}

.home-page__faq__accordion .MuiPaper-root {
    background-color: #1c2824;
    border: 1px solid #384b44;
    border-radius: 24px!important;
    padding: 20px 32px;
    box-shadow: 12px 12px 48px #0000000d!important;
    margin-bottom: 1rem!important
}

.home-page__faq__accordion .MuiPaper-root .accordion-custom-details p {
    font-family: Hind Siliguri,sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #b0c2bb;
    padding-bottom: 10px
}

.home-page__faq .home-page__text {
    color: #b0c2bb
}

.home-page__pricing .home-page__text {
    color: #fff
}

@media(max-width: 991.9px) {
    .home-page__faq__accordion .milestone-title {
        font-size:20px;
        line-height: 28px
    }

    .home-page__faq__accordion .MuiPaper-root {
        padding: 18px 28px
    }
}

@media(max-width: 767.9px) {
    .home-page__faq__accordion .milestone-title {
        font-size:16px!important;
        line-height: 22px
    }

    .home-page__faq__accordion .MuiPaper-root {
        padding: 16px 24px
    }
}

.home-page__faq__accordion .MuiAccordionSummary-root {
    padding: 0
}

.home-page__faq__accordion .Mui-expanded .milestone-title {
    background: var(--primary-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent
}

.home-page__faq__accordion .MuiIconButton-root {
    color: #1fdb95;
    font-size: 20px
}

.home-page__faq__accordion .MuiIconButton-root.Mui-expanded {
    color: #1fdb95
}

@media(max-width: 767.9px) {




    .home-page__features,.home-page__what-will-learn,.home-page__become-backend-developer,.home-page__problem-solvers-club,.home-page__are-you-ready {
        margin-top: 5rem;
        margin-bottom: 5rem
    }

    .home-page__faq {
        margin-bottom: 5rem
    }
}

@keyframes scale-out {
    0% {
        opacity: 0;
        transform: scale(1.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes shake {
    0%,to {
        transform: translate(var(--translate-x, 0)) rotate(0)
    }

    20%,60% {
        transform: translate(var(--translate-x, 0)) rotate(10deg)
    }

    40%,80% {
        transform: translate(var(--translate-x, 0)) rotate(-10deg)
    }
}