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

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

.home-page__hero-area:not(.demo-class .home-page__hero-area) {
    padding-bottom: 260px
}

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

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

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

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

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

.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__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
}

@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
}

@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
    }
}

.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__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,.home-page__faq {
    margin-top: 6rem;
    margin-bottom: 6rem
}

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

.home-page__faq:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background-color: #1d2d27;
    z-index: -1
}

.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__faq,.home-page__are-you-ready {
        margin-top: 5rem;
        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)
    }
}