@use "../utils/mixins";
@use "../utils/variables";

/*============================
  35.home-03
============================*/
.support-section {
    &.support-three {
        @include mixins.transform(skew(0, -0.81deg));
        margin-top: -15px;
    }
}
.pickup-card {
    margin-bottom: 0;
    h5 {
        max-width: 210px;
    }
}
.category-wrapper {
    padding-top: 60px;
    @include mixins.respond-below(lg) {
        padding-top: 50px;
    }
}
.category-wrap {
    text-align: center;
    margin-bottom: 24px;
    .category-img {
        background: variables.$light-200;
        @include mixins.rounded(10px);
        margin-bottom: 8px;
        text-align: center;
        height: 168px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        overflow: hidden;
        position: relative;
        padding: 10px;
        img {
            transform: scale(1);
            @include mixins.transition(all 0.9s);
        }
        .badge {
            font-size: variables.$font-size-14;
            font-weight: variables.$font-weight-normal;
            @include mixins.rounded(5px 0 0 5px);
            position: absolute;
            top: 10px;
            right: 0;
        }
        &:hover {
            img {
                transform: scale(1.12);
                @include mixins.transition(all 0.9s);
            }
        }
    }
}
.feeback-section {
    position: relative;
    &::before {
        position: absolute;
        top: 50%;
        left: 0;
        content: "";
        background: variables.$light-200;
        height: 50%;
        width: 100%;
        z-index: -1;
    }
    .rating-feedback {
        overflow: hidden;
    }
}
.faq-section-three {
    background: url('../img/bg/faq-bg-03.png') no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
    padding: 100px 0;
    &::before {
        background: variables.$light-200;
        content: "";
        top: 0;
        left: 0;
        height: 20%;
        width: 100%;
        position: absolute;
        z-index: -1;
    }
    @include mixins.respond-below(lg) {
        padding: 50px 0;
        background: variables.$gray-900;
    }
}
.plan-sec {
    margin-right: 60px;
    z-index: 2;
    position: relative;
    @include mixins.respond-below(xxl) {
        margin-right: 90px;
    }
    @include mixins.respond-below(xl) {
        margin-right: 30px;
    }
    @include mixins.respond-below(lg) {
        margin-right: 0;
    }
}
.plan-card {
    background: variables.$white;
    padding: 40px;
    @include mixins.rounded(10px);
    margin-bottom: 24px;
    &:last-child {
        margin-bottom: 0;
    }
    &.active {
        background: variables.$primary;
        h2 {
            color: variables.$white;

            span {
                color: variables.$light;
            }
        }
        h5 {
            color: variables.$white;
        }
        p {
            color: variables.$light;
        }
        .btn {
            background: variables.$white;
            border-color: variables.$white;
            color: variables.$gray-900;

            &:hover {
                background: variables.$primary;
                border-color: variables.$gray-900;
            }
        }
    }
}
.work-item {
    margin-bottom: 48px;
    &:last-child {
        margin-bottom: 0;
    }
    @include mixins.respond-below(lg) {
        margin-bottom: 24px;
    }
}
.work-img {
    margin: 20px 30px;
    position: relative;
    z-index: 1;
    padding: 10px 0 45px;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 5%;
        background: variables.$primary;
        width: 330px;
        height: 162px;
        @include mixins.rounded(0 110px 0 100px);
        z-index: -1;

        @include mixins.respond-below(xxl) {
            width: 270px;
            right: 2%;
        }
    }
    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 5%;
        background: variables.$secondary;
        width: 330px;
        height: 178px;
        @include mixins.rounded(0 110px 0 100px);
        z-index: -1;

        @include mixins.respond-below(xxl) {
            width: 270px;
        }
    }
    @include mixins.respond-below(xxl) {
        margin: 0;
    }

    @include mixins.respond-below(lg) {
        display: none;
    }
}
.faq-three {
    z-index: 2;
    position: relative;
    .accordion-item {
        padding: 16px 0;
        background-color: transparent;
        border-color: variables.$gray-800;
        &:first-child {
            margin-top: 0;
        }
        &:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .accordion-button {
            padding: 8px 0 8px 30px;
            background-color: transparent;
            color: variables.$white;
            font-size: variables.$font-size-18;
            &::after {
                content: url(../img/icons/Plus-20.png);
                position: absolute;
                top: 50%;
                @include mixins.transform(translateY(-50%));
                left: 0;
                color: variables.$white;
            }
            &:not(.collapsed) {
                padding-bottom: 8px;

                &::after {
                    content: url("../img/icons/minus_sign.png");
                    color: variables.$primary;
                }
            }
        }
        .accordion-body {
            position: relative;
            margin-left: 22px;
            padding: 0 0 16px 16px;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: calc(50% - 8px);
                @include mixins.transform(translateY(-50%));
                background: variables.$primary;
                width: 2px;
                height: 60%;
            }

            p {
                color: variables.$light;
            }
        }
    }
}
.faq-shape {
    position: absolute;
    top: 50%;
    @include mixins.transform(translateY(-50%));
    left: 0;
    z-index: 1;
    @include mixins.respond-below(lg) {
        top: 25%;
    }
    @include mixins.respond-below(md) {
        width: 50%;
    }
}
.about-car {
    margin-right: 50px;
    position: relative;
    @include mixins.transition(all 0.3s ease-out 0s);
    overflow: hidden;
    @include mixins.respond-below(xl) {
        margin-right: 30px;
    }
    @include mixins.respond-below(lg) {
        margin-right: 0;
    }
    img {
        overflow: hidden;
        @include mixins.transition(all 0.3s ease-out 0s);
        @include mixins.transform(scale(1.02));
    }
    .about-img-01 {
        @include mixins.rounded(0px 60px);
        overflow: hidden;
        img {
            @include mixins.rounded(0px 60px);
        }
    }
    .about-img-02 {
        overflow: hidden;
        @include mixins.rounded(60px 0px);
        img {
            @include mixins.rounded(60px 0px);
        }
    }
    .about-img-03 {
        @include mixins.rounded(60px 0 60px 0);
        overflow: hidden;

        img {
            @include mixins.rounded(60px 0 60px 0);
        }
    }
    .about-img-04 {
        @include mixins.rounded(0 60px 0 60px);
        overflow: hidden;

        img {
            @include mixins.rounded(0 60px 0 60px);
        }
    }
    .about-exp {
        width: 140px;
        height: 140px;
        @include mixins.rounded(50%);
        background: variables.$primary;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        @include mixins.transform(translate(-50%, -50%));
        h2 {
            color: variables.$white;
        }
        p {
            color: variables.$light;
        }
    }
    &:hover {
        img {
            @include mixins.transform(scale(1.1));
            @include mixins.transition(all 0.3s ease-out 0s);
        }
    }
}
.three-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.location-item {
    @include mixins.rounded(10px);
    border: 1px solid variables.$border-color;
    margin-bottom: 24px;
    .location-img {
        @include mixins.rounded(10px 10px 0 0);
        position: relative;
        overflow: hidden;
        display: block;
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        img {
            @include mixins.rounded(10px 10px 0 0);
            transform: scale(1);
            @include mixins.transition(all 0.9s);
        }
        .location-name {
            position: absolute;
            bottom: 20px;
            left: 50%;
            @include mixins.transform(translateX(-50%));
            text-align: center;
            z-index: 2;
            h5,
            p {
                color: variables.$white;
            }
        }
    }
    .location-info {
        padding: 20px;
        .location-view {
            width: 32px;
            height: 32px;
            background: variables.$light;
            color: variables.$white;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            @include mixins.rounded(50%);
            &:hover {
                background: variables.$primary;
                color: variables.$white;
            }
        }
    }
    &:hover {
        box-shadow: variables.$box-shadow;

        img {
            transform: scale(1.12);
            @include mixins.transition(all 0.9s);
        }
    }
}
.owl-dot-bottom {
    .owl-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 16px;
        .owl-dot span {
            width: unset;
            height: unset;
        }
        .owl-dot {
            width: 8px;
            height: 8px;
            @include mixins.rounded(50%);
            background: variables.$light;
            margin-right: 3px;
            &.active {
                width: 22px;
                height: 8px;
                outline: 1px solid variables.$white;
                background: variables.$primary;
                @include mixins.rounded(30px);
                outline: none;
            }
        }
    }
}
.app-wrap {
    padding: 0 40px;
    @include mixins.rounded(10px);
    position: relative;
    z-index: 1;
    margin: 60px 0 110px;
    .app-bg-01 {
        position: absolute;
        top: 0;
        right: 40px;
        z-index: -1;
        @include mixins.respond-below(xl) {
            width: 40%;
        }
    }
    .app-bg-02 {
        position: absolute;
        bottom: 0;
        right: 28%;
        z-index: -1;

        @include mixins.respond-below(xl) {
            width: 25%;
        }
    }
    .app-info {
        padding: 40px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        flex-direction: column;
        .display-5 {
            @include mixins.respond-below(xl) {
                font-size: variables.$font-size-34;
            }

            @include mixins.respond-below(md) {
                font-size: variables.$font-size-26;
            }
        }
    }
    .app-img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: end;
        -webkit-justify-content: end;
        -ms-flex-pack: end;
        flex-direction: column;
        img {
            position: relative;
            bottom: -50px;
        }
        @include mixins.respond-below(lg) {
            display: none;
        }
    }
    @include mixins.respond-below(lg) {
        margin: 50px 0;
    }
}
.blog-item {
    &.blog-wrap {
        border: 1px solid variables.$border-color;
        .blog-img {
            overflow: hidden;
            position: relative;
            @include mixins.rounded(10px 10px 0 0);
            img {
                @include mixins.rounded(10px 10px 0 0);
            }
            &::before {
                content: none;
            }
        }
        .badge {
            bottom: 20px;
            top: auto;
        }
    }
    .blog-content {
        padding: 20px;
    }
}
.testimonial-section-three {
    position: relative;
    .testimonial-icon {
        position: absolute;
        top: 10%;
        right: 10%;
        @include mixins.respond-below(sm) {
            display: none;
        }
    }
}