/**
 *
 * Home page
 *
 * NOTE: All styles must inherit .home class to prevent style
 * conflict in production as all css file will be merged
 */

/*=============================================
=               Banner Section                =
=============================================*/
.home .banner {
    /* --banner-height: 400px;
     */
    --banner-height: auto;

    height: var(--banner-height);
    background: rgb(233, 233, 233);
    background: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 1) 0%,
        rgb(233, 233, 233) 100%
    );
}

.home .banner .wrap,
.home .banner .container {
    height: inherit;
}

.home .banner .wrap {
    align-items: center;
}

.home .banner .content {
    width: 100%;
}
.home .banner .content > span {
    display: block;
}
.home .banner .content hr {
    margin: 1.25rem 0;
    background: #868686;
}

.home .banner .image {
    display: none;
    height: var(--banner-height);
}
.home .banner .image > img {
    height: inherit;
}

@media (min-width: 1200px) {
    .home .banner .content {
        width: 75%;
    }
    .home .banner .title {
        width: 80%;
    }
    .home .banner .content > span {
        width: 78%;
    }

    .home .banner .image {
        display: block;
    }
}
/*=====  End of Banner Section  ======*/


/*=============================================
=             Popular vouchers section            =
=============================================*/
.home .popular-vouchers .swiper-button-prev,
.home .popular-vouchers .swiper-button-next {
    color: var(--jo-secondary-rgb);
}
.home .popular-vouchers .swiper-button-prev::after,
.home .popular-vouchers .swiper-button-next::after {
    font-size: 30px;
}

.home .popular-vouchers .voucher-slider-item img {
    width: 240px;
}
/*=====  End of popular vouchers Section  ======*/


/*=============================================
=             How it works section            =
=============================================*/
.home .howitworks {
    --section-bg: #ffffff;
    --item-shadow: 0px 2px 20px #d8d8d8;
    --item-width: 170px;
   
    
}

.home .howitworks .shade {
    height: 140px;
    width: 100%;
    background: var(--jo-primary-rgb);
    position: absolute;
    z-index: 1;
}

.home .howitworks .swiper-button-prev,
.home .howitworks .swiper-button-next {
    color: var(--jo-secondary-rgb);
}

.home .howitworks .items-container {
    padding-top: 4rem;
    z-index: 2;
}

.home .howitworks .item-container {
    max-width: var(--item-width);
    margin: auto;
    user-select: none;
}
.home .howitworks .item-container .item-icon-wrap {
    border-radius: 50%;
    padding: 1rem;
    background: var(--section-bg);
}
.home
    .howitworks
    .item-container
    .item-icon-wrap
    > .item-icon {
    padding: 2rem;
    box-shadow: var(--item-shadow);
    border-radius: 50%;
    background: white;
}
.home
    .howitworks
    .item-container
    .item-icon-wrap
    > .item-icon
    img {
    width: inherit;
    height: inherit;
    margin: auto;
    max-width: 100%;
}

.home .howitworks .content-swiper {
    padding-top: 1.5rem;
    
}

.home .howitworks .content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: calc(var(--item-width) + 75px);
    margin: auto;
    position: relative;
}

@media (min-width: 900px) {
    .home .howitworks .content-container {
        max-width: calc(var(--item-width) + 56px);
    }
}

@media (min-width: 1200px) {
    .home .howitworks .content-container {
        max-width: calc(var(--item-width) + 105px);
    }
}

.home
    .howitworks
    .swiper-slide:not(:last-of-type)
    .content-container::after {
    content: ".....................";
    font-size: 60px;
    color: #cccccc;
    display: inline-block;
    vertical-align: 3px;
    position: absolute;
    left: 67.5%;
    top: 11%;
    z-index: 1;
}
.home .howitworks .content-container .title {
    position: absolute;
    top: -19px;
    padding: 0.575rem 1.2rem;
    border-radius: 15px;
    background-color: var(--jo-primary-rgb);
    color: white;
    font-weight: 500;
    z-index: 3;
}
.home .howitworks .content-container .content {
    padding: 2.5rem 1.3rem 2.5rem 1.3rem;
    text-align: center;
    background: white;
    box-shadow: var(--item-shadow);
    border-radius: 15px;
    font-size: 14.5px;
    z-index: 2;
    height: 200px;
    display: flex;
    align-items: center;
}
.home .howitworks .content-container .step-num {
    position: absolute;
    bottom: -37.5px;
    padding: 1rem 1.3rem;
    background-color: var(--jo-yellow-rgb);
    border-radius: 50%;
    z-index: 3;
}
.home .howitworks .content-container .step-num > span {
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--jo-primary-rgb);
}
/*=====  End of How it works section  ======*/

/*=============================================
=      Course referral benefits section       =
=============================================*/
.home .benefits {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.home .benefits .course-selector-tab-pills-container {
    text-align: center;
}

.home .benefits .course-selector-tab-pills {
    display: inline-flex;
    margin-bottom: 2rem;
    list-style: none;
    padding: 0;
}
.home .benefits .course-selector-tab-pills .tab-pill {
    position: relative;
    padding: 0.575rem 1.75rem;
    border-radius: 10px;
    color: var(--jo-primary-rgb);
    text-transform: uppercase;
    transition: background-color 0.3s;
}
.home
    .benefits
    .course-selector-tab-pills
    .tab-pill:not(:last-of-type) {
    margin-right: 1rem;
}
.home .benefits .course-selector-tab-pills .tab-pill:hover {
    background-color: var(--jo-primary-rgb-1);
}
.home .benefits .course-selector-tab-pills .tab-pill > a {
    transition: color 0.3s;
    text-decoration: inherit;
    color: inherit;
}
.home
    .benefits
    .course-selector-tab-pills
    .tab-pill:hover
    > a {
    color: var(--jo-primary-rgb);
}
.home
    .benefits
    .course-selector-tab-pills
    .tab-pill.active {
    background-color: var(--jo-primary-rgb-1);
    pointer-events: none;
}
.home
    .benefits
    .course-selector-tab-pills
    .tab-pill.active:hover {
    background-color: var(--jo-primary-rgb-1);
}
.home
    .benefits
    .course-selector-tab-pills
    .tab-pill.active
    > a {
    color: var(--jo-primary-rgb);
}
.home
    .benefits
    .course-selector-tab-pills
    .tab-pill.active:hover
    > a {
    color: var(--jo-primary-rgb);
}

.home .benefits .courses-list {
    width: 30%;
    max-width: 370px;
    margin-right: 4rem;
    list-style: none;
    padding: 0;
}
.home .benefits .courses-list .item {
    padding: 1rem 2rem;
    border: 1px solid var(--jo-primary-rgb-2);
    border-radius: 10px;
    position: relative;
    transition: background-color 0.3s;
}
.home .benefits .courses-list .item:hover {
    background-color: var(--jo-secondary-rgb-2);
}
.home .benefits .courses-list .item:not(:last-of-type) {
    margin-bottom: 1rem;
}

.home .benefits .courses-list .item.active {
    border: none;
    background-color: var(--jo-yellow-rgb);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.home .benefits .courses-list .item.active:hover {
    background-color: var(--jo-yellow-rgb);
}
.home .benefits .courses-list .item.active::after {
    content: "";
    position: absolute;
    right: -49px;
    top: 0px;
    width: 0;
    height: 0;
    border-left: 49px solid var(--jo-yellow-rgb);
    border-bottom: 27px solid transparent;
    border-top: 29px solid transparent;
}
.home .benefits .courses-list .item > a {
    color: var(--jo-primary-rgb);
    text-decoration: inherit;
}

.home .benefits .courses-content {
    width: 70%;
    max-width: 1055px;
}

.home .benefits .tab-content {
    display: flex;
    flex-direction: column;
}
.home .benefits .tab-content .item {
    padding: calc(1rem - 0.4rem) 1rem;
    box-shadow: 0px 2px 5px #cccccc;
    border-radius: 10px;
    justify-content: space-between;
}
.home .benefits .tab-content .item:not(:last-of-type) {
    margin-bottom: 1rem;
}
.home .benefits .tab-content .item .label {
    padding-left: 1rem;
    padding-right: 2rem;
}
.home .benefits .tab-content .item .name {
    flex-grow: 1;
}
.home .benefits .tab-content .item .price {
    padding: 0.4rem 1.5rem;
    border: 1px solid var(--jo-primary-rgb-2);
    border-radius: 10px;
}
/*=====  End of Course referral benefits section  ======*/

/*=============================================
=                 FAQs Section                =
=============================================*/
.home .faqs {
    background-color: #f7f7f7;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.home .faqs .wrap {
    flex-direction: column;
}

.home .faqs .title-panel {
    background-color: var(--jo-primary-rgb);
    border: none;
    /* margin-right: 1rem; */
    margin-right: 0;
    /* width: 52%; */
    width: 100%;
    max-width: 430px;
    height: fit-content;
    border-radius: 10px;
}

.home .faqs .title-panel .excellence-image {
    position: absolute;
    right: -15px;
    bottom: -20px;
}

.home .faqs .title-panel .title {
    line-height: 1.4;
    padding-bottom: 1rem;
}
.home .faqs .title-panel .title > span {
    display: block;
    width: 100%;
}

.home .faqs .question-answers {
    width: 100%;
    max-width: 1050px;
    margin-top: 2rem;
    margin-left: 0;
}

.home .faqs .accordion-item:last-of-type {
    border-bottom-right-radius: 0rem;
    border-bottom-left-radius: 0rem;
}

.home .faqs .accordion-item.outer-item {
    box-shadow: 0px 3px 20px #cccccc;
    border: none;
    color: var(--jo-primary-rgb);
}
.home .faqs .accordion-item.outer-item:not(:last-of-type) {
    margin-bottom: 1.5rem;
}

.home .faqs .accordion-item.outer-item .accordion-body {
    font-size: 0.9rem;
}

.home
    .faqs
    .accordion-item.outer-item
    .accordion-button:not(.collapsed) {
    color: var(--jo-primary-rgb);
    background-color: transparent;
    box-shadow: none;
}

.home .faqs .accordion-item.inner-item {
    box-shadow: none;
    border: none;
    color: #727272;
}
.home .faqs .accordion-item.inner-item .accordion-button {
    color: #727272;
    border-bottom: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.home
    .faqs
    .accordion-item.inner-item
    .accordion-button:not(.collapsed) {
    border-bottom: 1px solid #c9c9c9;
    color: #727272;
}

@media (min-width: 576px) {
    .home .faqs .wrap {
        align-items: center;
    }
}

@media (min-width: 992px) {
    .home .faqs .wrap {
        flex-direction: row;
        align-items: flex-start;
    }

    .home .faqs .title-panel {
        margin-right: 1rem;
        width: 52%;
    }
    
    .home .faqs .question-answers {
        margin-top: 0;
        margin-left: 1rem;
    }
}
/*=====  End of FAQs Section  ======*/

/*=============================================
=              Contact us section             =
=============================================*/
.home .contact-us {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.home .contact-us .item {
    max-width: 480px;
    margin: auto;
    transition: box-shadow 0.3s;
}
.home .contact-us .item:hover {
    box-shadow: 0px 3px 5px var(--jo-secondary-rgb-6);
}
.home .contact-us .item .icon > i {
    font-size: 1.7rem;
    color: white;
}
/*=====  End of Contact us section  ======*/