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

    /* component sec css */
    .component-sec .component-card:nth-child(3n+1) {
        border-image: linear-gradient(to right, transparent, var(--border-color)) 1;
    }

    .component-sec .component-card:nth-child(3n+3) {
        border-image: linear-gradient(to left, transparent, var(--border-color)) 1;
    }

    .component-sec .component-card:nth-last-child(-n+3),
    .component-sec .component-card:nth-child(3) {
        border-bottom: 0;
    }

    .component-sec .component-card:nth-child(2),
    .component-sec .component-card:nth-child(3) {
        border-image: linear-gradient(to bottom, transparent, var(--border-color)) 1;
    }

    .component-sec .component-card:nth-child(3)::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(to left, transparent, var(--border-color));
    }

    .component-sec .component-card:last-child,
    .component-sec .component-card:nth-last-child(2) {
        border-image: linear-gradient(to top, transparent, var(--border-color)) 1;
    }

    .component-sec .component-card:nth-child(3n+1)::after,
    .component-sec .component-card:nth-child(2)::after,
    .component-sec .component-card:nth-child(3)::after {
        display: none;
    }

    .component-sec .component-card:nth-child(1),
    .component-sec .component-card:nth-child(2),
    .component-sec .component-card:nth-child(3) {
        padding-top: 0;
    }

    .component-sec .component-card:nth-last-child(3),
    .component-sec .component-card:nth-last-child(2),
    .component-sec .component-card:last-child {
        padding-bottom: 0;
    }
}

@media screen and (min-width: 768px) {
    .home-feature-card:not(:last-of-type) {
        border-right: 1px solid var(--border-color);
    }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {

    /* component sec css */
    .component-sec .component-card:nth-child(2n+1) {
        border-image: linear-gradient(to right, transparent, var(--border-color)) 1;
    }

    .component-sec .component-card:nth-child(2n+2) {
        border-image: linear-gradient(to left, transparent, var(--border-color)) 1;
    }

    .component-sec .component-card:nth-last-child(-n+2),
    .component-sec .component-card:nth-child(2) {
        border-bottom: 0;
    }

    .component-sec .component-card:nth-child(2) {
        border-image: linear-gradient(to bottom, transparent, var(--border-color)) 1;
    }

    .component-sec .component-card:nth-child(2)::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background: linear-gradient(to left, transparent, var(--border-color));
    }

    .component-sec .component-card:last-child {
        border-image: linear-gradient(to top, transparent, var(--border-color)) 1;
    }

    .component-sec .component-card:nth-child(2n+1)::after,
    .component-sec .component-card:nth-child(2)::after {
        display: none;
    }
}

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

    .component-sec .component-card {
        border-left: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .component-sec .component-card:nth-child(1),
    .component-sec .component-card:nth-child(2) {
        padding-top: 0;
    }

    .component-sec .component-card:nth-last-child(2),
    .component-sec .component-card:last-child {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 1199px) {
    :root {
        --h1: normal 500 52px/1.2 var(--first-font);
    }
}

@media screen and (max-width: 1023px) {
    :root {
        --h1: normal 500 46px/1.2 var(--first-font);
        --common-text: normal 400 14px/1.4 var(--first-font);
    }

}

@media screen and (max-width: 767px) {
    :root {
        --h1: normal 500 40px/1.2 var(--first-font);
    }

    .btn {
        padding: 11px 15px;
    }

    .form-control {
        padding: 8px 15px;
    }
    /* testimonial-sec css */
    .testimonial-sec .swiper-slide-active{
        opacity: 1;
        transform: translateY(15px);
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
        -o-transform: translateY(15px);
    }
    .testimonial-sec .swiper-slide-prev,
    .testimonial-sec .swiper-slide-next {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}

@media screen and (max-width: 639px) {
    :root {
        --h1: normal 500 36px/1.2 var(--first-font);
        --h2: normal 500 24px/34px var(--first-font);
    }

    .component-sec .component-card::after {
        display: none;
    }
    .component-sec .component-grid {
        border: 1px solid var(--border-color);
    }
    .component-sec .component-card:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }
    .templates-sec .template-tab-wrp ul li a.active {
        border-color: var(--black);
    }
}