1#@!#!123s

: / home / forge / almahero.online / public / frontend-theme-4 / assets / scss /
Filename : _testimonial-item.scss
back
.testimonial {
    &-section {
        padding: toRem(120) 0;
        @media screen and (max-width: 991px) {
            padding: toRem(80) 0;
        }
        @media screen and (max-width: 575px) {
            padding: toRem(50) 0;
        }
        &-content {
            .title-wrap {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: toRem(11);
                padding-bottom: toRem(59);
                @media screen and (max-width: 767px) {
                    padding-bottom: toRem(30);
                }
                .title {
                    @include fontFamilyAlt(41, $fw_medium, 1.065, $white);
                    text-align: center;
                    max-width: toRem(350);
                    margin: 0 auto !important;
                    @media screen and (max-width: 991px) {
                        font-size: toRem(36);
                    }
                    @media screen and (max-width: 767px) {
                        font-size: toRem(34);
                    }
                    @media screen and (max-width: 575px) {
                        font-size: toRem(30);
                    }
                }
                .text {
                    max-width: toRem(345);
                    @include fontFamilyAlt(16, $fw_regular, 1.54, $para-text);
                    text-align: center;
                }
            }
        }
        &-cooking {
            .testimonial-section {
                &-content {
                    border-bottom: toRem(1) solid $cooking-primary-20;
                    .title-wrap {
                        position: relative;
                        align-items: flex-start;
                        z-index: 3;
                        @media screen and (min-width: 992px) {
                            height: 100%;
                            flex-direction: column;
                            justify-content: center;
                        }
                        &::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 200%;
                            height: 100%;
                            background: $section-bg;
                            z-index: -1;
                        }
                        .title {
                            color: $cooking-primary;
                            @media screen and (min-width: 992px) {
                                margin-left: 0 !important;
                                text-align: left;
                            }
                        }
                        .text {
                            max-width: toRem(517);
                            color: $cooking-para-text;
                        }
                    }
                }
            }
        }
        &-meditation {
            padding: 0;
            .testimonial-section {
                &-content {
                    .title-wrap {
                        .title {
                            color: $meditation-primary;
                        }
                        .text {
                            max-width: toRem(517);
                            color: $meditation-para-text;
                        }
                    }
                }
            }
        }
        &-kindergarten {
            position: relative;
            padding-top: toRem(247);
            background-color: $kindergarten-secondary-light;
            @media screen and (max-width: 1450px) {
                padding-top: toRem(200);
            }
            @media screen and (max-width: 1300px) {
                padding-top: toRem(130);
            }
            .wave-img {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: auto;
                @media screen and (max-width: 991px) {
                    display: none;
                }
            }
            .testimonial-section {
                &-content {
                    .title-wrap {
                        .title {
                            color: $kindergarten-primary;
                        }
                        .text {
                            max-width: toRem(517);
                            color: $kindergarten-para-text;
                        }
                    }
                }
            }
        }
    }
    &-item {
        &-one {
            width: 100%;
            max-width: 634px;
            margin: 0 auto;
            padding: toRem(50) toRem(28);
            border: toRem(1) solid $white-20;
            background-color: $purple-light;
            display: flex;
            align-items: center;
            gap: toRem(23);
            @media screen and (max-width: 767px) {
                flex-direction: column;
            }
            .author {
                flex: 1 1 auto;
                max-width: toRem(224);
                .img {
                    margin-bottom: toRem(17);
                }
                .info {
                    @media screen and (max-width: 767px) {
                        text-align: center;
                    }
                    .name {
                        @include fontFamily(16, $fw_medium, 17, $white);
                        padding-bottom: toRem(7);
                        text-transform: uppercase;
                    }
                    .degi {
                        @include fontFamily(13, $fw_medium, 14, $white-72);
                        text-transform: uppercase;
                    }
                }
            }
            .content {
                flex: 1 1 auto;
                max-width: toRem(344);
                @media screen and (max-width: 767px) {
                    text-align: center;
                }
                .icon {
                    max-width: toRem(50);
                    @media screen and (max-width: 767px) {
                        margin: 0 auto;
                    }
                }
                .text-content {
                    margin-top: toRem(7);
                    padding-top: toRem(22);
                    padding-bottom: toRem(20);
                    border-top: toRem(1) solid $white-20;
                    .title {
                        @include fontFamily(20, $fw_medium, 31, $white);
                        padding-bottom: toRem(13);
                    }
                    .text {
                        @include fontFamily(17, $fw_regular, 27, $white-72);
                    }
                }
                .search-instructor-rating {
                    @media screen and (max-width: 767px) {
                        justify-content: center;
                    }
                }
            }
        }
        &-two {
            height: 100%;
            background-color: $white;
            padding: toRem(40);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: toRem(34);
            @media screen and (max-width: 991px) {
                padding: toRem(20);
            }
            .author {
                display: flex;
                align-items: center;
                gap: toRem(18);
                .img {
                    flex-shrink: 0;
                    width: toRem(84);
                    height: toRem(84);
                    border-radius: 50%;
                    overflow: hidden;
                    @media screen and (max-width: 575px) {
                        width: toRem(60);
                        height: toRem(60);
                    }
                }
                .content {
                    .name {
                        @include fontFamily(
                            20,
                            $fw_medium,
                            31,
                            $kindergarten-primary
                        );
                    }
                    .degi {
                        @include fontFamily(
                            16,
                            $fw_regular,
                            24,
                            $kindergarten-para-text
                        );
                    }
                }
            }
            .text {
                @include fontFamily(
                    17,
                    $fw_regular,
                    27,
                    $kindergarten-para-text
                );
            }
            .rating-wrap {
                display: flex;
                align-items: center;
                gap: toRem(9);
                .no {
                    @include fontFamily(
                        14,
                        $fw_medium,
                        15,
                        $kindergarten-primary
                    );
                }
            }
        }
        &-three {
            padding: toRem(50) toRem(28);
            background-color: $meditation-testi-bg-20;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: toRem(40);
            .author {
                .img {
                    max-width: toRem(160);
                    max-height: toRem(220);
                }
                .info {
                    padding-bottom: toRem(35);
                    text-align: center;
                    .name {
                        @include fontFamily(
                            24,
                            $fw_medium,
                            32,
                            $meditation-primary
                        );
                    }
                    .degi {
                        @include fontFamily(
                            18,
                            $fw_regular,
                            20,
                            $meditation-para-text
                        );
                        padding-bottom: toRem(15);
                    }
                }
            }
            .text {
                @include fontFamily(17, $fw_regular, 27, $meditation-para-text);
                text-align: center;
            }
        }
        &-four {
            height: 100%;
            background-color: $cooking-header;
            padding: toRem(40);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: toRem(34);
            @media screen and (max-width: 991px) {
                padding: toRem(20);
            }
            .author {
                display: flex;
                align-items: center;
                gap: toRem(18);
                .img {
                    flex-shrink: 0;
                    width: toRem(84);
                    height: toRem(84);
                    border-radius: 50%;
                    overflow: hidden;
                    @media screen and (max-width: 575px) {
                        width: toRem(60);
                        height: toRem(60);
                    }
                }
                .content {
                    .name {
                        @include fontFamily(
                            20,
                            $fw_medium,
                            31,
                            $cooking-primary
                        );
                    }
                    .degi {
                        @include fontFamily(
                            16,
                            $fw_regular,
                            24,
                            $cooking-para-text
                        );
                    }
                }
            }
            .text {
                @include fontFamily(17, $fw_regular, 27, $cooking-para-text);
            }
            .rating-wrap {
                display: flex;
                align-items: center;
                gap: toRem(9);
                .no {
                    @include fontFamily(14, $fw_medium, 15, $cooking-primary);
                }
            }
        }
    }
    &-grid-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        gap: toRem(24);
        @media screen and (max-width: 991px) {
            align-items: start;
            grid-template-columns: repeat(2, 1fr);
        }
        @media screen and (max-width: 991px) and (min-width: 768px) {
            grid-template-rows: repeat(2, auto);
        }
        @media screen and (max-width: 767px) {
            grid-template-columns: 1fr;
        }
        .item-big {
            @media screen and (max-width: 991px) and (min-width: 768px) {
                grid-column: 2/3;
                grid-row: 1/3;
            }
        }
    }
}
.landing-testimonial {
    &-wrap {
        // .swiper {
        //   // @media screen and (min-width: 1600px) {
        //   //   overflow: visible !important;
        //   // }
        //   overflow: visible !important;
        //   padding-bottom: toRem(120);
        // }
        .arrowControl {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 130px;
            height: 60px;
            .swiper {
                &-button {
                    &-next,
                    &-prev {
                        top: 0;
                        margin-top: 0;
                        width: toRem(60);
                        height: toRem(60);
                        border-radius: 50%;
                        background-color: $white;
                        font-size: toRem(25);
                        color: $black;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        &::after {
                            display: none;
                        }
                        &:hover {
                            background-color: $main-color;
                            color: $white;
                        }
                    }
                    &-next {
                        right: 0;
                    }
                    &-prev {
                        left: 0;
                    }
                }
            }
        }
    }
}

.lan-testimonial-slider {
    padding-bottom: toRem(104);
    @media screen and (max-width: 991px) {
        padding-bottom: toRem(80);
    }
    .owl-stage-outer {
        overflow: visible;
    }
    .owl-nav {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        button {
            width: 50px;
            height: 50px;
            background: var(--white-color) !important;
            border: 1px solid var(--border-color2) !important;
            border-radius: 50%;
            margin: 0 4px;
            &:hover {
                background: var(--theme-color) !important;
                svg path {
                    fill: var(--white-color) !important;
                }
            }
        }
    }
}

.cooking-testimonial-slider {
    padding-bottom: toRem(55);
    .owl-stage-outer {
        overflow: visible;
    }
    .owl-nav {
        position: absolute;
        right: 0;
        bottom: -25px;
        background-color: $section-bg;
        padding-left: 18px;
        button {
            width: 50px;
            height: 50px;
            background: var(--white-color) !important;
            border: 1px solid var(--border-color2) !important;
            border-radius: 50%;
            margin: 0 0 0 8px;
            &:hover {
                background: $cooking-primary !important;
                svg path {
                    fill: var(--white-color) !important;
                }
            }
        }
    }
}