main {
    padding-top: 2rem;
}

/* Start Banner Section */
.banner {
    background-image: url(../../img/testimonial/banner-bg.webp);
    background-size: cover;
}

.banner .banner-container .breadcrumb li a {
    color: var(--black) !important;
}

.banner .breadcrumb li:first-child a {
    width: 18px;
    height: 18px;
}

/* End Banner Section */

/* Start Course Section */
.course .course-link {
    border-top: 1px solid var(--darkGreyColor);
    border-bottom: 1px solid var(--darkGreyColor);
}

.course .course-link li {
    margin: 1rem 1rem 0 0;
    border: 1px solid var(--lightGreyColor);
}

.course .course-link li.active a {
    background-image: linear-gradient(90deg, var(--primaryColor) 0%, var(--greenColor) 100%);
    color: var(--white);
}

.course .course-link li:last-child {
    margin-right: 0 !important;
}

.course .course-link li a {
    color: var(--black);
}

.course .content-item {
    border-radius: 8px;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
    padding: 1.2rem;
    margin-top: 2rem;
}

.course .content-item p {
    color: var(--grey);
}

.course .content-item .buttons a {
    min-width: 130px;
    padding: 6px 16px;
}

.course .content-item .duration h3 {
    font-size: 15px !important;
}

.course .buttons .btn-white {
    box-shadow: none;
}


.pagination {
    margin-top: 2.5rem;
}

.pagination .pagination-btn {
    width: 35px;
    height: 35px;
    color: var(--darkBlue);
}

.pagination .next {
    border-radius: 20px 5px 5px 20px;
}

.pagination .prev,
.pagination ul li:first-child.active a {
    border-radius: 5px 20px 20px 5px !important;
}

.pagination ul {
    width: 232px;
}

.pagination ul li a {
    color: var(--grey);
    border: 1px solid var(--darkGreyColor);
    transition: all 0.2s ease-in-out;
    width: 35px;
    height: 35px;
}

.pagination ul li.active a {
    color: var(--white);
    background-image: linear-gradient(90deg,
            var(--primaryColor) 0%,
            var(--greenColor) 100%);
    border: none;
    outline: none;
}

.pagination ul .dots {
    color: var(--grey);
}

/* End Course Section */

/* Start Career Section */

.career .career-container {
    padding: 2rem;
}

.career .career-content .heading h2 {
    font-size: 21px;
}

/* End Career Section */


/* Start Deal Section */

.deal .deal-head {
    width: 320px;
    height: 300px;
}

/* End Deal Section */


/* Start FAQ section */
.faq .accordion-button::after {
    content: "";
    background-image: url(../../img/about/black-arrow.svg);
    background-size: 100% 100%;
    margin-top: 5px;
    transition: 0.7s all;
}

.faq .accordion-flush .accordion-item {
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px 30px 30px 8px;
    border: 1px solid var(--darkGreyColor) !important;
}

.faq .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
    filter: invert(28%) sepia(98%) saturate(3435%) hue-rotate(222deg) brightness(95%) contrast(101%);
}

.faq .accordion-flush .accordion-item .accordion-button:not(.collapsed) {
    border-bottom: 1px solid var(--darkGreyColor) !important;
    padding-bottom: 1.3rem !important;
}

.faq .accordion-body {
    padding: 1rem 0 0 0 !important;
}

.faq .accordion-button {
    padding: 0 !important;
    color: var(--black);
}

.faq .accordion-flush .accordion-item.active {
    border: 1px solid var(--primaryColor) !important;
    border-radius: 8px 30px 30px 30px;
}

/* End FAQ Section */

@media screen and (min-width: 768px) {
    main {
        padding-top: 2rem;
    }

    /* Start Course Section */
    .course .content-item {
        width: 47%;
        margin-right: 2rem;
    }

    .course .content-item:nth-child(2n) {
        margin-right: 0;
    }

    .course .content-item:last-child {
        margin-right: 0 !important;
    }

    /* End Course Section */


    /* Start Career Section */
    .career .career-container {
        padding: 2.5rem;
    }

    .career .career-info {
        background-image: url(../../img/category/client.webp);
        width: 455px;
        height: 234px;
        border-left: 5px solid var(--primaryColor);
        border-radius: 0 70px;
        overflow: hidden;

    }

    .career .career-info .fact-list {
        background-color: rgba(13, 38, 101, 0.5);
        backdrop-filter: blur(12px);
        padding: 1rem 1rem 1rem 2.3rem;
    }


    .career .career-info .fact-list .fact-item::before {
        content: '';
        width: 8px;
        height: 8px;
        background-color: var(--primaryColor);
        position: absolute;
        right: -17px;
        top: 25px;
    }

    .career .career-info .fact-list .fact-item:last-child::before {
        content: none;
    }

    .career .career-info .fact-list .fact-item p {
        text-align: center;
    }

    /* End Career Section */

    /* Start Deal Section */
    .deal .deal-content {
        width: 50%;
    }

    .deal .deal-content .heading h2 {
        text-align: start;
    }

    .deal .deal-content p {
        text-align: start !important;
    }

    /* End Deal Section */

    /* Start FAQ section */
    .faq .accordion-flush {
        counter-reset: section;
    }

    .faq .accordion-item::before {
        content: counter(section, decimal-leading-zero);
        counter-increment: section;
        background-color: var(--backgroundColor);
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        position: absolute;
        left: -17px;
        top: 11px;
    }

    .faq .accordion-item {
        padding: 1.3rem 1.3rem 1.3rem 2.8rem !important;
    }

    .faq .accordion-item.active::before {
        background-image: linear-gradient(90deg,
                var(--primaryColor) 0%,
                var(--greenColor) 100%);
        color: var(--white);
    }

    .faq .faq-container {
        width: 95%;
        margin: 0 auto;
    }

    /* End FAQ Section */
}

@media screen and (min-width: 1024px) {

    main {
        padding-top: 7rem;
    }

    /* Start Banner Section */
    .banner .banner-container h1::after {
        content: "";
        background-image: url(../../img/testimonial/arrow.webp);
        background-size: 100% 100%;
        min-width: 85px;
        height: 82px;
        margin-left: 3rem;
    }

    /* End Banner Section */

    /* Start Course Section */

    .course .course-link li a {
        font-size: 16px;
    }

    /* End Course Section */

    /* Start Career Section */

    .career .career-content {
        width: 400px;
    }

    .career .career-info .fact-list .fact-item strong {
        font-size: 25px;
    }

    /* End Career Section */

    /* Start Deal Section */
    .deal .deal-content {
        width: 50%;
    }

    .deal .deal-head {
        width: 390px;
        height: 380px;
    }

    /* End Deal Section */

}

@media screen and (min-width: 1366px) {

    main {
        padding-top: 5rem;
    }

    /* Start Banner Section */
    .banner {
        background-size: 100% 100%;
    }

    .banner .banner-container h1 {
        font-size: 50px;
    }

    /* End Banner Section */


    /* Start Course Section */
    .course .duration {
        border-left: 1px solid var(--darkGreyColor);
        padding: 9px 0 9px 15px;
        width: calc(100% - 305px);
    }

    .course .duration::before {
        content: "";
        height: 56px;
        border-left: 3px solid var(--darkBlue);
        position: absolute;
        left: -4px;
        animation: Element 4s ease-in-out infinite;
    }

    .course .content-item {
        background-image: url(../../img/category/book.svg);
        background-size: 33px 31px;
        background-repeat: no-repeat;
        background-position: center left 20px;
        padding-left: 4.5rem;
        width: 48%;
    }


    /* End Course Section */

    /* Start Career Section */

    .career .career-content {
        width: 555px;
    }

    .career .career-info {
        width: 496px;
    }

    .career .career-content .heading h2 {
        font-size: 27px;
    }


    .career .career-info .fact-list .fact-item::before {
        right: -27px;
    }

    /* End Career Section */

    /* Start Deal Section */

    .deal .deal-container {
        width: 92%;
    }

    .deal .deal-content {
        width: 60%;
    }

    /* End Deal Section */

    /* Start FAQ Section */
    .faq .faq-container {
        width: 78%;
    }

    /* End FAQ Section */
}