/* =====================
   General
   ====================== */
    .vc_row.wpb_row.vc_row-fluid:not(.hero-section) {
        padding-block: 54px;
    }
    h2.vc_custom_heading.vc_do_custom_heading {
        margin-bottom: 40px;
    }
    .slick-slider .slick-next:before, .slick-slider .slick-prev:before {
        color: #121212;
        font-size: 25px;
    }
    .slick-slider .slick-next {
        right: 0;
        z-index: 9;
        transform: translateY(0px);
    }
    .slick-slider .slick-prev {
        left: 0;
        z-index: 9;
        transform: translateY(0px);
    }

/* =====================
   Hero section
   ====================== */
    .hero-slider.slick-slide {
        position: relative;
        /*min-height: 70vh;*/
    }
    .hero-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    .hero-slider .hero-slider--content {
        position: relative;
        min-height: 70vh;
        display: flex;
        align-items: center;
        padding-block: 10%;
        padding-inline: 30px;
    }
    
    .hero-slider--content-wrap span {
        color: #333;
        font-size: 1.5rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        line-height: 1;
    }
    .hero-slider--content-wrap .hero-slider--heading {
        font-size: 5.5rem;
        margin-bottom: 1.5rem;
        max-width: 450px;
    }
    .hero-slider--content-wrap .hero-slider--desp {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    
    .hero-sliders .slick-next, .hero-sliders .slick-prev {
        width: 50px;
        height: 50px;
        z-index: 1;
    }
    .hero-sliders .slick-next:before, .hero-sliders .slick-prev:before {
        font-size: 32px;
        opacity: 1;
        font-weight: 600;
        transition: font-size .1s ease;
    }
    .hero-sliders .slick-next:hover::before, .hero-sliders .slick-prev:hover::before {
        font-size: 36px;
    }
    .hero-sliders .slick-prev {
        left: 0;
    }
    .hero-sliders .slick-next {
        right: 0;
    }

/* =====================
   USPS
   ====================== */

    .usps-section .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 3rem;
        row-gap: 3rem;
    }
    .usps-item {
        padding: 2.5rem;
        border: 1px solid #e7e7e7;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .usps-item h3 {
        margin-top: 10px;
        margin-bottom: 0;
        font-weight: 600;
    }
    .usps-item p {
        color: rgba(18, 18, 18, 0.75);
    }

/* =====================
   Feature products
   ====================== */

    .feature-products .d-flex {
        gap: 2%;
    }
   .feature-products__banner {
        width: 32%;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
    .feature-products__banner--content {
        position: absolute;
        padding: 40px;
        left: 0;
        bottom: 0;
    }
    .feature-products__banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .feature-products__products {
        width: 66%;
        display: flex;
        flex-wrap: wrap;
        gap: 3%;
    }
    .feature-product {
        width: 31.3%;
    }
    .feature-product__img {
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid rgba(18, 18, 18, 0.08);
        position: relative;
        margin-bottom: 5px;
    }
    .feature-product__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1);
        transition: .6s;
    }
    .feature-product__img:hover img {
        transform: scale(1.1);
    }
    .feature-product__content {
        text-align: center;
    }
    .feature-product__content .term {
        color: rgba(18, 18, 18, 0.75);
        text-transform: lowercase;
    }
    .feature-product__content .rating i {
        font-size: 14px;
        color: rgb(255 120 0);
    }
    .feature-product__content h3 {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .badge {
        position: absolute;
        top: 8px;
        left: 8px;
        font-size: 13px;
        line-height: 1;
        padding: 4px 10px;
        text-align: center;
        background-color: #333;
        color: #fff;
        border-radius: 3px;
    }
    del {
        opacity: 0.6;
    }
    .feature-product__content ins,
    .best-product__content ins {
        background-color: transparent;
        font-weight: 500;
    }


/* =====================
   Popular products
   ====================== */

    .popular-products .feature-products__products {
        width: 100%;
    }
    .popular-products__heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
    }
    .popular-products__heading h2 {
        margin-bottom: 0;
    }
    .popular-products .slick-slider {
      margin-left: -10px; /* Half of the desired gutter width */
      margin-right: -10px; /* Half of the desired gutter width */
    }
    .popular-products .slick-slide {
      margin-left: 10px; /* Half of the desired gutter width */
      margin-right: 10px; /* Half of the desired gutter width */
    }
    .custom-arrows {
        position: relative;
    }
    .custom-arrows button.slick-arrow {
        border: 1px solid var(--text-color);
        background-color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(18,18,18, .15);
        transition: all 0.3s ease 0s;
        transform: translateY(0px);
    }
    .custom-arrows button.slick-arrow::before {
        content: none;
    }
    .custom-arrows button.slick-arrow i {
        font-size: 32px;
        line-height: 1;
        color: var(--text-color);
    }
    .custom-arrows button.slick-prev {
        left: -40px;
    }
    .custom-arrows button.slick-next {
        right: 50px;
    }
    .custom-arrows button.slick-arrow:hover {
        background-color: var(--text-color);
    }
    .custom-arrows button.slick-arrow:hover i {
        color: var(--white);
    }

/* =====================
   Special features
   ====================== */

    .special-features .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
        row-gap: 2rem; 
    }
    .special-feature {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        max-height: 30rem;
        cursor: pointer;
        transition: .6s;
    }
    .special-feature img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1);
        transition: .6s;
    }
    .special-feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    .special-feature__content {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 8rem;
        max-width: 250px;
    }
    .special-feature:after {
        display: block;
        position: absolute;
        content: "";
        top: 20px;
        left: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        background-color: transparent;
        border: 1px solid #fff;
        opacity: 1;
        visibility: visible;
        -webkit-transition: .6s;
        -o-transition: .6s;
        transition: .6s;
        z-index: 3;
    }
    .special-feature p {
        color: rgba(18, 18, 18, 0.75);
        font-weight: bold;
    }
    .special-feature:hover img {
        transform: scale(1.1);
    }
    .special-feature:hover:after {
        visibility: hidden;
        opacity: 0;
    }

/* =====================
   About us
   ====================== */

    .about-us .d-flex {
        gap: 2%;
        align-items: center;
    }
    .about-us__media.d-flex {
        width: 66%;
        gap: 16px;
        justify-content: space-between;
    }
    .about-us__content {
        width: 34%;
    }
    .about-us__media img {
        object-fit: cover;
        width: 50%;
        height: 50rem;
        border-radius: 5px;
        overflow-x: auto;
    }

/* =====================
   Discover Best Item
   ====================== */

   .best-products .feature-products__products {
        width: 100%;
        gap: 2.5%;
    }
    .best-product {
        display: flex;
        align-items: center;
        width: 31.6%;
        gap: 14px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid rgba(18,18,18,0.10);
        background-color: #f6f6f6;
        margin-bottom: 30px;
        position: relative;
    }
    .wpb_text_column .best-product:last-child {
        margin-bottom: 30px;
    }
    .best-product__img {
        max-width: 180px;
    }
    .best-product__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .best-product .term {
        color: rgba(18, 18, 18, 0.75);
        text-transform: lowercase;
        display: block;
    }

/* =====================
   Testimonials
   ====================== */

    .testimonials {
        background-color: #f3f3f3;
        padding-block: 90px 100px;
    }
    .testimonials__item {
        background-color: #fff;
        padding: 30px 50px;
        border-radius: 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .testimonials .slick-slider {
      margin-left: -10px; /* Half of the desired gutter width */
      margin-right: -10px; /* Half of the desired gutter width */
    }
    .testimonials .slick-slide {
      margin-left: 10px; /* Half of the desired gutter width */
      margin-right: 10px; /* Half of the desired gutter width */
    }
    .client-avator {
        font-size: 2.2rem;
    }
    .client-avator {
        font-size: 2.2rem;
    }
    .text {
        margin-bottom: 8px;
        font-size: 1.7rem;
        max-width: 800px;
        margin-top: 8px;
    }



/* =====================
   Latest blog
   ====================== */
    
    .blog-posts__heading h2 {
        margin-bottom: 0;
    }
    .blog-posts__heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
    }

    .blog-posts__content.d-flex {
        display: flex;
        gap: 2%;
        flex-wrap: wrap;
    }
    .blog-post {
        width: 32%;
    }
    .blog-post img {
        border-radius: 5px;
        display: block;
        width: 100%;
        margin-bottom: 2rem;
    }
    .meta-data {
        color: rgba(18, 18, 18, 0.75);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .meta-data i {
        padding-right: 5px;
    }

/* =====================
   Responsive 
   ====================== */

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

        .about-us .d-flex {
            flex-direction: column;
            gap: 20px;
        }
        .about-us__media.d-flex,
        .about-us__content {
            width: 100%;
        }
        .about-us__media.d-flex {
            flex-direction: row;
        }

    }

    @media screen and (max-width: 991px){

        .vc_row.wpb_row.vc_row-fluid:not(.hero-section) {
            padding-block: 25px;
        }

        .feature-products .d-flex {
            row-gap: 20px;
            flex-direction: column;
        }
        .feature-products__banner,
        .feature-products__products {
            width: 100%;
        }
        .feature-products__banner {
            max-height: 350px;
            overflow: hidden;
        }
        .feature-products__products {
            gap: 2%;
        }
        .feature-product {
            width: 32%;
        }


    }

    @media screen and (max-width: 767px){

        .hero-slider--content {
            justify-content: center;
            text-align: center;
        }
        .hero-slider--content-wrap .hero-slider--heading {
            font-size: 4.5rem;
        }

        .usps-section .container {
            grid-template-columns: repeat(1, 1fr);
            column-gap: 1rem;
            row-gap: 1rem;
        }
        .feature-product {
            width: 49%;
        }
        .special-features .container {
            grid-template-columns: repeat(1, 1fr);
        }
        .best-product {
            width: 48.7%;
            flex-direction: column;
            margin-bottom: 10px;
            gap: 0;
        }
        .best-product__content {
            width: 100%;
            padding: 10px;
            text-align: center;
        }
        .wpb_text_column .best-product:last-child {
            margin-bottom: 10px;
        }

        
        .popular-products .slick-slider {
            margin-left: 0;
            margin-right: 0;
        }
        



    }

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

        .blog-post {
            width: 100%;
            display: none;
        }
        .blog-post:first-child {
            display: block;
        }
        .blog-posts__heading {
            flex-direction: column;
            gap: 20px;
            margin-bottom: 20px;
        }
        h2.vc_custom_heading.vc_do_custom_heading,
        .popular-products__heading {
            margin-bottom: 20px;
        }
 

    }

    @media screen and (max-width: 480px) {

        .feature-product {
            width: 100%;
        }
        .popular-products .slick-slide {
            margin-left: 0;
            margin-right: 0;
        }
    }