/*=============== TUTORS HERO ===============*/
.tutors__hero {
    padding-block: 13.5rem 50px;

    .tutors__hero__container {

        .tutors__hero__content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            gap: 24px;

            .header__tutors {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                .span {
                    font-size: 14px;
                    font-weight: var(--font-regular);
                    color: #666666;
                }

                h1 {
                    font-size: 36px;
                    font-weight: var(--font-semi-bold);
                    color: var(--dark);

                    .yellow {
                        color: var(--yellow);
                    }

                    .green {
                        color: var(--green);
                    }
                }
            }

            .img {
                position: relative;
                max-width: 658.4891px;
                width: 100%;
                height: 535.2266px;
                border-radius: 2px 42px 2px 42px;
                z-index: 5;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 2px 42px 2px 42px;
                }

                &::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: calc(100% + 4.5px);
                    height: calc(100% + 4.5px);
                    border-radius: 2px 42px 2px 42px;
                    background: linear-gradient(171.31deg, #36876D 52.06%, #E9C556 52.59%);
                    z-index: -1;
                }

                .pra {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    bottom: -5%;
                    left: 10%;
                    transform: translate(-50%, -50%);
                    box-shadow: 0px 4px 6px -4px #0000001A,
                        0px 10px 15px -3px #0000001A;

                    background-color: white;
                    border-radius: 8px;
                    padding: 10px 18px;

                    p {
                        font-size: 12px;
                        font-weight: var(--font-medium);
                        color: var(--yellow);
                    }

                    i {
                        font-size: 12px;
                        color: var(--yellow);
                        position: absolute;
                    }

                    .q1 {
                        left: 4px;
                        top: 0.35px;
                        transform: rotate(180deg);
                    }

                    .q2 {
                        right: 4px;
                        bottom: 0.35px;
                    }
                }

                .circle {
                    position: absolute;

                    width: 172px;
                    height: 123px;
                    border-radius: 50%;
                    z-index: -1;
                }

                .circle1 {
                    bottom: -8px;
                    left: -36px;
                    background-color: #F9F3E1;
                }

                .circle2 {
                    top: 85.5px;
                    right: -36px;
                    background-color: #E7ECEA;
                }
            }

            .text {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 32px;

                p {
                    font-size: 18px;
                    font-weight: var(--font-regular);
                    color: var(--dark);
                    max-width: 632px;
                    width: 100%;
                }

                .btns {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 16px;
                    width: 100%;

                    .btn {
                        max-width: 358px;
                        width: 100%;
                        height: 52px;
                        border-radius: 8px;
                        font-size: 18px;
                    }

                    .btn__prime {
                        background-color: var(--yellow);
                        color: white;
                        font-weight: var(--font-bold);
                    }

                    .btn__second {
                        border: 2px solid #ACB3B71A;
                        background-color: #ACB3B71A;
                        color: #666666;
                    }
                }
            }
        }
    }
}

/*=============== TUTORS ===============*/
.tutors {
    padding-block: 70px 150px;

    .tutors__container {

        .tutors__content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 48px;

            h2 {
                font-size: 42px;
                font-weight: var(--font-semi-bold);
                color: var(--dark);
            }

            .tutors__cards {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 48px;
                max-width: 1055px;
                width: 100%;

                .tutor__card {
                    display: flex;
                    justify-content: center;
                    align-items: start;
                    flex-direction: column;
                    padding: 13px 24px 19px 24px;
                    background-color: white;
                    border-radius: 12px;
                    gap: 16.5px;
                    box-shadow: 0px 1px 2px 0px #F59E0B;
                    width: 100%;

                    .header__card {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        width: 100%;

                        .info__tutor {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 10px;

                            img {
                                width: 90px;
                                height: 90px;
                                border-radius: 50%;
                                object-fit: cover;
                                border: 2px solid #ACB3B71A;
                            }

                            .data__tutor {
                                display: flex;
                                justify-content: center;
                                align-items: start;
                                flex-direction: column;

                                h3 {
                                    font-size: 23px;
                                    font-weight: var(--font-medium);
                                    color: #2C3437;
                                }

                                span {
                                    font-size: 15px;
                                    font-weight: var(--font-regular);
                                    color: #596064;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    width: 80%;
                                }
                            }

                        }

                        .star {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 66px;
                            height: 28px;
                            border-radius: 4px;
                            background-color: #F9F3E1;
                            gap: 4px;
                            color: var(--yellow);
                            font-size: 18px;
                            font-weight: var(--font-bold);
                        }
                    }

                    .tutor__content {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        padding-block: 1rem;
                        border-block: 1px solid #ACB3B726;

                        .item {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                            width: 320px;

                            p {
                                font-size: 23px;
                                font-weight: var(--font-bold);
                                color: var(--dark);
                            }

                            span {
                                font-size: 13px;
                                font-weight: var(--font-bold);
                                color: #666666;
                            }

                            &:nth-child(2) {
                                border-inline: 1px solid #ACB3B726;
                            }
                        }
                    }

                    .profile__tutor {
                        width: 100%;
                        height: 56px;
                        background-color: #ACB3B71A;
                        border-radius: 8px;
                        border: 1px solid #ACB3B71A;
                        font-weight: var(--font-regular);
                        color: #666666;
                        transition: all 0.3s ease-in-out;
                        font-size: 23px;

                        &:hover {
                            background-color: var(--green);
                            color: white;
                        }
                    }
                }
            }

            /* Pagination */
            .pagination {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                box-shadow: 0px 0px 114.57px 0px #0000001C;
                background-color: white;
                border-radius: 45px;
                padding: 16px 43px;
            }

            .pages {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 12px;
            }

            .pagination button {
                font-size: 18px;
                background: transparent;
                cursor: pointer;
                color: #666666;
            }

            .pagination .page {
                width: 42px;
                height: 42px;
                border: none;
                background: transparent;
                cursor: pointer;
                border-radius: 50%;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                font-weight: var(--font-semi-bold);
                color: #666666;
            }

            .pagination .active {
                background: var(--yellow);
                color: #fff;
            }

            .pagination span {
                user-select: none;
            }

        }
    }
}



/*=============== RESPONSIVE ===============*/
@media (max-width: 991px) {

    /*=============== TUTORS HERO ===============*/
    .tutors__hero {
        padding-block: 12.5rem 32px;

        .tutors__hero__container {

            .tutors__hero__content {


                .img {
                    max-width: 415.84136962890625px;
                    height: 338px;

                    .pra {
                        bottom: -7%;

                        p {
                            font-size: 10px;
                        }

                        i {
                            font-size: 10px;
                            color: var(--yellow);
                            position: absolute;
                        }
                    }

                    .circle {
                        width: 108.59223937988281px;
                        height: 77.81930541992188px;
                    }

                    .circle1 {
                        bottom: -8px;
                        left: -23px;
                    }

                    .circle2 {
                        top: 37px;
                        right: -23px;
                    }
                }

                .text {

                    p {
                        font-size: 14px;
                        max-width: 518px;
                    }

                    .btns {

                        .btn {
                            max-width: 266px;
                        }

                    }
                }
            }
        }
    }

    /*=============== TUTORS ===============*/
    .tutors {
        padding-block: 125px 55px;

        .tutors__container {

            .tutors__content {
                gap: 38px;

                h2 {
                    font-size: 32px;
                    max-width: 450px;
                    width: 100%;
                }

                .tutors__cards {
                    gap: 38px;
                    max-width: 695px;

                    .tutor__card {
                        gap: 13px;

                        .header__card {

                            .info__tutor {
                                gap: 8px;

                                img {
                                    width: 71px;
                                    height: 71px;
                                }

                                .data__tutor {

                                    h3 {
                                        font-size: 18px;
                                    }

                                    span {
                                        font-size: 12px;
                                    }
                                }

                            }

                            .star {
                                font-size: 14px;
                            }
                        }

                        .tutor__content {

                            .item {
                                width: 205px;

                                p {
                                    font-size: 18px;
                                }

                                span {
                                    font-size: 10px;
                                }

                            }
                        }

                        .profile__tutor {
                            height: 44px;
                            font-size: 18px;
                        }
                    }
                }

                /* Pagination */
                .pagination {
                    gap: 15px;
                }

                .pages {
                    gap: 10px;
                }

                .pagination button {
                    font-size: 15px;
                }

                .pagination .page {
                    width: 25px;
                    height: 25px;
                    font-size: 14px;
                }


            }
        }
    }
}



@media (max-width: 576px) {

    /*=============== TUTORS HERO ===============*/
    .tutors__hero {

        .tutors__hero__container {

            .tutors__hero__content {

                .header__tutors {
                    .span {
                        font-size: 14px;
                    }

                    h1 {
                        font-size: 35px;
                    }
                }

                .img {
                    max-width: 298px;
                    height: 338px;

                    .pra {
                        bottom: 5%;
                        left: 38%;
                        width: 255px;

                        p {
                            font-size: 9px;
                        }

                        i {
                            font-size: 8px;
                        }
                    }

                    .circle {
                        width: 77.81930541992188px;
                        height: 77.81930541992188px;
                    }

                    .circle1 {
                        bottom: -5px;
                        left: -18px;
                    }

                    .circle2 {
                        top: 37px;
                        right: -23px;
                    }
                }

                .text {

                    p {
                        font-size: 14px;
                        max-width: 324px;
                    }

                    .btns {
                        flex-direction: column;

                        .btn {
                            max-width: 100%;
                        }

                    }
                }
            }
        }
    }

    /*=============== TUTORS ===============*/
    .tutors {
        padding-block: 125px 55px;

        .tutors__container {

            .tutors__content {
                gap: 38px;


                h2 {
                    font-size: 32px;
                    max-width: 450px;
                    width: 100%;
                    text-align: center;
                }

                .tutors__cards {
                    gap: 32px;
                    max-width: 327px;

                    .tutor__card {
                        position: relative;
                        padding-top: 40px;

                        .header__card {


                            .star {
                                position: absolute;
                                top: 10px;
                                right: 10px;
                            }
                        }
                    }
                }

                /* Pagination */
                .pagination {
                    gap: 15px;
                    padding: 10px 25px;
                }

                .pages {
                    gap: 10px;
                }

                .pagination button {
                    font-size: 15px;
                }

                .pagination .page {
                    width: 25px;
                    height: 25px;
                    font-size: 14px;
                }


            }
        }
    }
}