:root {
    --primary-gradient: linear-gradient(94.71deg, #0aa06a 17.91%, #1fdb95 79.7%);
    --primary-color: #0aa06a;
    --white: #fff;
    --success: #19ba62;
}















.home-page__hero-area .btn-outline-primary,
.home-page__hero-area .btn-outline-secondary {
    border-radius: 999px;
    padding: 10px 26px;
    font-family: Hind Siliguri, sans-serif;
    font-weight: 600;
    font-size: 16px;
    transition: transform .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out
}

.home-page__hero-area .btn-outline-primary {
    background-color: #1c2824;
    border: 1px solid #384b44;
    color: #dbe7e3
}

.home-page__hero-area .btn-outline-primary:hover,
.home-page__hero-area .btn-outline-primary:focus {
    background-color: #263530;
    border-color: #4a6058;
    color: #fff
}

.home-page__hero-area .btn-outline-secondary {
    background: linear-gradient(135deg, #1fdb95, #0aa06a);
    border: none;
    color: #fff;
    box-shadow: 0 8px 20px #0aa06a40
}

.home-page__hero-area .btn-outline-secondary:hover,
.home-page__hero-area .btn-outline-secondary:focus {
    transform: translateY(-2px);
    color: #fff
}

















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































.home-page__why-phitron__line-area {
    position: absolute;
    top: 12px;
    right: 0;
    bottom: 205px;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

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













































































@media(max-width: 991.9px) {
    

    

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

    

    

    

    

    

    

    

    

    

    

    
}



















































































































































































































































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



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

















.home-page__faq__accordion .MuiPaper-root {
    background-color: #1c2824;
    border: 1px solid #384b44;
    transition: box-shadow .2s ease-in-out
}

.home-page__faq__accordion .MuiAccordionSummary-root {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer
}

.home-page__faq__accordion .MuiIconButton-root {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px
}

.home-page__faq__accordion .MuiIconButton-root .home-page__faq__icon-vertical {
    transition: opacity .2s ease-in-out;
    transform-origin: center;
    opacity: 1
}

.home-page__faq__accordion .MuiIconButton-root.Mui-expanded .home-page__faq__icon-vertical {
    opacity: 0
}

.home-page__faq__accordion .accordion-custom-details {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease-in-out
}



































































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