/*

    * This file contains the styling for the Home Variation Five, this
    is the file you need to edit to change the look of the
    template.

******************************************************
*****************************************************/
:root {
    --font-family-base: 'Nunito', sans-serif !important;
    --font-semi-bold: 700;
    --font-bold: 800;
}

.footer-area .bg-overlay::before {
    opacity: 0 !important;
}

.footer-area .copy-right-area {
    border-top: 1px solid var(--color-gray-1) !important;
}

.copy-right-content p {
    color: var(--color-dark) !important;
}


.home-slider.home-slider-5 {
    padding: 176px 0 156px;
}

.custom-section.latest_product,
.custom-section.video_section,
.custom-section.categories_section,
.custom-section.hero_section {
    padding-top: 70px;
}

.custom-section.categories_section {
    padding-bottom: 0px !important;
}

@media only screen and (max-width: 991.99px) {
    .home-slider.home-slider-5 {
        padding: 176px 0 100px;
    }

    .products.pb-100 {
        padding-bottom: 40px !important;
    }
}

.category-5 .category-slider {
    padding-inline: 60px;
}

.category-5 .category-item {
    position: relative;
    padding: 25px;
    text-align: center;
}

.category-5 .category-item::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    border-radius: 15px;
    background: var(--color-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='15' ry='15' stroke='%23333' stroke-width='3' stroke-dasharray='6%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='15' ry='15' stroke='%23333' stroke-width='3' stroke-dasharray='6%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    z-index: -1;
}

.category-5 .category-item::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 15px;
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    background: rgba(var(--color-primary-rgb), 0.11);
    z-index: -2;
}

.category-5 .category-item .category-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    text-align: center;
    margin-inline: auto;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    background: var(--color-white);
}

.category-5 .category-item .category-title {
    margin-bottom: 0;
}

.category-5 .category-item.color-1::after {
    background: #CD49CD;
}

.category-5 .category-item.color-1::before {
    background: #FFF6FF;
}

.category-5 .category-item.color-1 .category-icon {
    border-color: #3F5DFF;
}

.category-5 .category-item.color-2::after {
    background: #CD49CD;
}

.category-5 .category-item.color-2::before {
    background: rgba(205, 73, 205, 0.11);
}

.category-5 .category-item.color-2 .category-icon {
    border-color: #CD49CD;
}

.category-5 .category-item.color-3::after {
    background: #95CE58;
}

.category-5 .category-item.color-3::before {
    background: rgba(149, 206, 88, 0.11);
}

.category-5 .category-item.color-3 .category-icon {
    border-color: #95CE58;
}

.category-5 .category-item.color-4::after {
    background: #CD8B52;
}

.category-5 .category-item.color-4::before {
    background: rgba(205, 139, 82, 0.11);
}

.category-5 .category-item.color-4 .category-icon {
    border-color: #CD8B52;
}

.category-5 .category-item.color-5::after {
    background: #269EDA;
}

.category-5 .category-item.color-5::before {
    background: rgba(38, 158, 218, 0.11);
}

.category-5 .category-item.color-5 .category-icon {
    border-color: #269EDA;
}

.category-5 .category-item.color-6::after {
    background: #F0D969;
}

.category-5 .category-item.color-6::before {
    background: rgba(240, 217, 105, 0.11);
}

.category-5 .category-item.color-6 .category-icon {
    border-color: #F0D969;
}

.category-5 .category-item.color-7::after {
    background: #ED798E;
}

.category-5 .category-item.color-7::before {
    background: rgba(237, 121, 142, 0.11);
}

.category-5 .category-item.color-7 .category-icon {
    border-color: #ED798E;
}

.category-5 .category-item.color-8::after {
    background: #B3CDE3;
}

.category-5 .category-item.color-8::before {
    background: rgba(179, 205, 227, 0.11);
}

.category-5 .category-item.color-8 .category-icon {
    border-color: #B3CDE3;
}


.banner-sm.banner-vertical.ratio::before {
    padding-bottom: 142%;
}

@media (max-width: 768.99px) {
    .banner-sm .btn-sm {
        min-width: 130px;
    }
}

@media only screen and (max-width: 1199px) {
    .banner-collection .banner-sm.ratio.ratio-21-9::before {
        padding-bottom: 53.85%;
    }

    .banner-sm .banner-content {
        max-width: 70%;
        padding: 0 15px;
    }

    .banner-sm.ratio.ratio-16-9::before {
        padding-bottom: 75%;
    }

    .banner-sm.content-top.ratio.ratio-1-2::before {
        padding-bottom: 160.2%;
    }
}

@media only screen and (max-width: 991px) {
    .banner-sm.content-top.ratio.ratio-1-2::before {
        padding-bottom: 70.2%;
    }
}

@media only screen and (max-width: 768px) {
    .banner-collection .banner-sm.ratio.ratio-16-9::before {
        padding-bottom: 80.25%;
    }

    .banner-sm .banner-content {
        max-width: 100%;
    }
}


.home-slider-5 .animated-slider .slick-dots {
    position: absolute;
    bottom: -60px;
    text-align: start;
}

.home-slider-5 .animated-slider .slick-dots li {
    height: 12px;
    width: 12px;
    background: var(--color-primary);
}

.home-slider-5 .animated-slider .slick-dots li.slick-active {
    width: 30px;
    border-radius: 30px;
    background: var(--color-primary);
}
.header-mt-fix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.header-next {
    margin-top: 234px;
}

/*# sourceMappingURL=home-5.css.map */