/* start of hero section */
section.hero {
    --v: 100%;
    /* min-height: 500px; */
    min-height: calc(100dvh - var(--topbar-height) - var(--navlink-height));
    position: relative;
}

section.hero::after,
section.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section.hero::before {
    background-color: var(--wc-dark);
    background: transparent;
    z-index: -2;
}

section.hero::after {
    filter: brightness(0.6);
    opacity: var(--v);
    background: var(--url);
    background: #262626;
    background-size: contain;
    z-index: -1;
    background: transparent;
}

section.hero>div {
    min-height: calc(100dvh - 132px);
}

section.hero .con-1 {
    height: 80dvh;
    align-items: center;
    width: 100%;
    display: flex;
    flex: 1 1 50%;
    padding: 1rem;
    justify-content: center;
}

section.hero .con-1>div {
    --o: 0;
    --s: 200%;
    position: relative;
    padding: 0.25rem;
    overflow: hidden;
    z-index: 1;
    aspect-ratio: 1;
}

section.hero .con-1>div,
section.hero .con-1 video {
    mask-size: var(--s) var(--s);
    mask-repeat: no-repeat;
    mask-position: center;
}

section.hero .con-1>div::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: red;
    opacity: var(--o);
    z-index: -1;
    background: conic-gradient(transparent 25%, var(--wc-green)50%, transparent 50%, var(--wc-green-2)) 75%;
    animation: rotate360 linear 2s infinite;
}

section.hero .con-1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.hero .con-2 {
    background-color: gren;
    height: 100%;
    display: flex;
    flex: 0 0 50%;
    overflow: hidden
}

@media screen and (min-width: 768px) {
    section.hero .con-1 {
        padding: 3rem;
    }
}

section.hero .hero-content {
    color: var(--wc-white);
}

@keyframes rotate360 {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* end of hero section */

/* start of highlights section */
.highlights {
    position: relative;
}

.highlights::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--url);
    background-size: 1080px;
    opacity: 0.08;
    z-index: -1;
}

.highlights::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--wc-light-dark);
    z-index: -2;
}

div.d-flex:has(>.highlight-card) {
    column-gap: 1rem;
    row-gap: 3rem;
}

.highlights .highlight-card {
    --w: 100%;
    width: var(--w);
    background-color: var(--wc-light-white);
    /* background-color: white; */
    position: relative;
    padding: 1rem;
    color: var(--wc-dark);
    border-radius: 1rem;
    cursor: pointer;
    transition: all ease 300ms;
}

.highlights .highlight-card .highlight-content {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    background: var(--wc-green);
    padding: 1rem;
    z-index: 2;
    opacity: 0;
    user-select: none;
    pointer-events: none;
    border-top: 1px solid transparent;
    transition: all ease 300ms 450ms;
}

.highlights .highlight-card:hover .highlight-content {
    opacity: 1;
    top: 100%;
    border-color: var(--wc-white);
}

.highlights .highlight-card .highlight-content p {
    margin-bottom: 0;
}

.highlights .highlight-card:hover {
    background-color: var(--wc-green);
    border-radius: 0;
    border-color: transparent;
    color: var(--wc-white);
}

.highlights .highlight-card:hover {
    background-color: var(--wc-green);
}

.highlights .highlight-card img {
    height: 70px;
    aspect-ratio: 1;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    transition: all ease 300ms;
}

.highlights .highlight-card:hover img {
    filter: saturate(0) brightness(10);
}

.highlight-card .highlight-title h5 {
    padding-top: 0.75rem;
    text-align: center;
}

@media screen and (min-width: 576px) {
    .highlights .highlight-card {
        --w: calc(50% - 1rem)
    }
}

@media screen and (min-width: 992px) {
    .highlights .highlight-card {
        --w: calc(25% - 1rem)
    }
}

.highlight-content {
    font-size: 0.8rem
}

.highlight-title h4 {
    font-size: 1.25em!important;
}
/* end of highlights section */

/* start of small about section */
section.about {
    padding: 5rem 0.5rem;
    position: relative;
}

section.about::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--url);
    background-size: 1080px;
    background-repeat: repeat;
    z-index: -1;
    opacity: 0.05;
}

section.about>div {
    max-width: var(--vw);
    margin: 0 auto;
}

section.about p {
    font-size: 1em;
}

section.about p strong {
    color: var(--wc-green);
    font-size: 1.1em;
}

section.about .play img {
    filter: blur(20px);
}

section.about video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: all ease 300ms;
}

section.about .play video {
    filter: none;
    opacity: 1;
    pointer-events: none;
}

/* end of small about section */

/* start of products gallery section */
section.products-gallery {
    position: relative;
    padding: 5rem 0.5rem;
}

section.products-gallery::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: var(--wc-black);
}

section.products-gallery .decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section.products-gallery .decor::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 45%, var(--wc-white) 45%, var(--wc-white) 55%, transparent 55%);
    background-size: 100% 33%;
    background-repeat: repeat-y;
    z-index: 0;
    opacity: 0.7;
}

section.products-gallery h2 span {
    position: relative;
    color: var(--wc-white);
    display: inline-block;
    margin: auto;
    padding: 0 0.5rem;
    background-color: black;
    z-index: 1;
}

section.products-gallery .product-category .category {
    padding: 0.2rem;
    border-radius: 50rem;
    overflow: hidden;
}

section.products-gallery .product-category .category button {
    font-size: 1em;
}

section.products-gallery .products {
    max-width: var(--vw);
    margin: auto;
}

section.products-gallery .products .product-card {
    background-color: var(--wc-white);
    padding: 1rem;
    border-radius: 1rem;
}

section.products-gallery .products .product-card a {
    text-decoration: none;
    color: var(--wc-dark);
}

section.products-gallery .products .product-card a:hover {
    color: var(--wc-green);
}

section.products-gallery .products .product-card .product-image {
    transition: all ease 300ms;
}

section.products-gallery .products .product-card:hover .product-image {
    transform: scale(1.1);
}

section.products-gallery .products .product-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

section.products-gallery .products .product-title {
    font-family: "Open Sauce", sans-serif;
    text-align: center;
    font-size: 20px;
    margin-top: 0.5rem;
}

section.products-gallery .products .product-item {
    --w: 100%;
    width: var(--w);
    padding: 0.75rem;
}

@media screen and (min-width: 576px) {
    section.products-gallery .products .product-item {
        --w: 50%;
    }
}

@media screen and (min-width: 768px) {
    section.products-gallery .products .product-item {
        --w: 33%;
    }
}

@media screen and (min-width: 992px) {
    section.products-gallery .products .product-item {
        --w: 25%;
    }
}

/* end of products gallery section */

/* start of product category section */

section.product-category {
    padding: 5rem 0.5rem;
    position: relative;
}

section.product-category>div {
    max-width: var(--vw);
    margin: auto;
}

section.product-category::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--url);
    background-size: 1080px;
    background-repeat: repeat;
    opacity: 0.15;
    z-index: -1;

}

section.product-category .decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section.product-category .decor::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 45%, var(--wc-white) 45%, var(--wc-white) 55%, transparent 55%);
    background-size: 100% 33%;
    background-repeat: repeat-y;
    z-index: 0;
    opacity: 0.7;
}

section.product-category h2 span {
    position: relative;
    color: var(--wc-green);
    color: var(--wc-dark);
    color: var(--wc-white);
    display: inline-block;
    margin: auto;
    padding: 0 0.5rem;
    /* background-color: var(--wc-white); */
    background: linear-gradient(to right, var(--wc-dark), black);
    z-index: 1;
}

section.product-category .category-card-lg {
    scroll-margin-top: calc(var(--scroll-mt) + 1rem);
    background: linear-gradient(to bottom, var(--wc-green), var(--wc-green-2));
    background: var(--wc-light-white);
    padding: 1.5rem;
    border-radius: 1.5rem;
    color: black;
}

section.product-category .category-card-lg .row {
        align-items: center;
}

section.product-category .category-card-lg div :has(.category-image) {
    position: relative;
    overflow: hidden;
}

section.product-category .category-card-lg .category-image {
    display: block;
    width: 100%;
    height: 100%;
    /* border-radius: 1rem; */
    /* aspect-ratio: 16 / 9; */
    object-fit: contain;
    /* aspect-ratio: 1; */
    filter: drop-shadow(12px 0px 6px rgba(0, 0, 0, 0.5));
    transition: all ease 300ms;
}

section.product-category .category-card-lg .category-image:last-child {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
}

section.product-category .category-card-lg .content {
    color: var(--wc-white);
}

section.product-category .category-card-lg .category-title {
    font-size: 40px;
    color: var(--wc-dark);
}

section.product-category .category-card-lg .category-title + div {
    color: var(--wc-dark);
}

section.product-category .category-card-lg a {
    font-size: 1.2em;
}

section.product-category .category-card-lg:hover .category-image:first-child {
    transform: scale(0.5);
    opacity: 0;
}

section.product-category .category-card-lg:hover .category-image:last-child {
    top: 0;
}

@media screen and (min-width: 768px) {
    section.product-category .category-card-lg:nth-child(odd) div :has(img) {
        order: 1;
        /* height: 100%; */
    }
}

/* end of product category */

/* start of certifications */
section.certifications {
    background-color: var(--wc-black);
}

section.certifications #certifications {
    padding: 5rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

section.certifications .certification {
    padding: 1rem 2rem;
    align-items: center;
}

section.certifications .certification img {
    display: block;
    width: 200px;
    aspect-ratio: 1;
}

section.certifications .certification p {
    font-weight: 500;
    color: var(--wc-white);
}

/* end of certifications */



/* start of blog section */
section.blogs {
    padding: 5rem 0.5rem 1rem;
    max-width: var(--vw);
    margin: auto;
}

section.blogs .content {
    text-align: center;
    margin-bottom: 3rem;
    max-width: var(--cw);
    margin: auto;
}

section.blogs .content h2 {
    color: var(--wc-green);
}

section.blogs .latest-post {
    background: linear-gradient(to right, var(--wc-green), var(--wc-green-2));
    padding: 1rem;
    border-radius: 1rem;
    position: sticky;
    top: 1.5rem;
    transition: all ease 300ms;
}

section.blogs .latest-post:hover {
    transform: scale(1.03);
    transform-origin: center bottom;
}

section.blogs .latest-post a,
section.blogs .recent-post a {
    color: var(--wc-white);
}

section.blogs .recent-post {
    padding: 1rem;
    border-radius: 1rem;
    flex-basis: 100%;
    background-color: var(--wc-light-dark);
    height: fit-content;
    transition: all ease 300ms;
}

section.blogs .recent-post:hover {
    background-color: var(--wc-dark);
    transform: scale(1.05);
}

section.blogs .post-image {
    width: 100%;
    border-radius: 0.5rem;
    aspect-ratio: 16/9;
    object-fit: contain;
    background-color: var(--wc-white);
}

section.blogs .post-title {
    margin-top: 1rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

section.blogs .post-date {
    display: block;
    text-align: right;
}

section.blogs .recent-post .post-date {
    color: var(--wc-light-white);
}

/* section.blogs a.wc-btn {
    border: 2px solid var(--wc-green);
    color: var(--wc-green);
} */


@media screen and (min-width: 576px) {
    section.blogs .recent-post {
        flex-basis: calc(50% - 0.3rem);
    }
}

@media screen and (min-width: 768px) {
    section.blogs .recent-post {
        flex-basis: calc(50% - 0.8rem);
    }
}

@media screen and (min-width: 992px) {
    section.blogs .recent-post {
        flex-basis: 100%;
    }
}

/* end of blog section */