/* ==========================================

   PRODUCTS HERO

========================================== */

.products-hero {

    position: relative;

    width: 100%;

    height: 72vh;

    min-height: 560px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}

/* ==========================================

   HERO VIDEO

========================================== */

.products-hero-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

    pointer-events: none;

}

/* ==========================================

   HERO VIDEO OVERLAY

========================================== */

.products-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(

            90deg,

            rgba(11, 62, 42, 0.76),

            rgba(22, 104, 72, 0.55),

            rgba(11, 62, 42, 0.42)

        );

    pointer-events: none;

}

/* ==========================================

   HERO CONTENT

========================================== */

.products-hero-content {

    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 900px;

    text-align: center;

    color: #ffffff;

}

.products-hero-label {

    display: inline-block;

    margin-bottom: 22px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #d8f2df;

}

.products-hero h1 {

    margin: 0;

    font-size:

        clamp(48px, 6vw, 82px);

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -1.5px;

    color: #ffffff;

}

.products-hero-content p {

    max-width: 650px;

    margin: 28px auto 0;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 400;

    color:

        rgba(255, 255, 255, 0.92);

}

/* ==========================================

   HERO DECORATIVE LINE

========================================== */

.products-hero-line {

    width: 60px;

    height: 2px;

    margin: 30px auto 0;

    background: #f3fcf6;

    border-radius: 10px;

}

/* ==========================================

   HERO SCROLL INDICATOR

========================================== */

.products-hero-scroll {

    position: absolute;

    z-index: 3;

    left: 50%;

    bottom: 28px;

    transform:

        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    color:

        rgba(255, 255, 255, 0.88);

    font-size: 12px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.scroll-arrow {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:

        1px solid

        rgba(255, 255, 255, 0.45);

    border-radius: 50%;

    font-size: 17px;

    animation:

        heroScroll 2s ease-in-out infinite;

}

@keyframes heroScroll {

    0%,

    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(6px);

    }

}

/* ==========================================

   PRODUCTS SECTION

========================================== */

.products-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:

        110px 50px

        120px;

    box-sizing: border-box;

    overflow: hidden;

    background:

        radial-gradient(

            circle at 0% 0%,

            rgba(215, 219, 218, 0.753),

            transparent 30%

        ),

        radial-gradient(

            circle at 100% 15%,

            rgba(243, 238, 238, 0.795),

            transparent 30%

        ),

        radial-gradient(

            circle at 0% 100%,

            rgb(236, 245, 242),

            transparent 32%

        ),

        linear-gradient(

            135deg,

            #ffffff 0%,

            #ffffff 50%,

            #e6f3e9 100%

        );

}

/* ==========================================

   BACKGROUND DECORATION

========================================== */

.products-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: 300px;

    right: -250px;

    border-radius: 50%;

    background:

        rgba(22, 140, 97, 0.05);

    filter: blur(20px);

    pointer-events: none;

}

.products-section::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    bottom: 100px;

    left: -200px;

    border-radius: 50%;

    background:

        rgba(42, 126, 190, 0.04);

    filter: blur(20px);

    pointer-events: none;

}

/* ==========================================

   PRODUCT CATEGORY

========================================== */

.product-category {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1500px;

    margin:

        0 auto 130px;

    display: grid;

    grid-template-columns:

        1.15fr 0.85fr;

    align-items: center;

    gap: 80px;

}

/* ==========================================

   REVERSE CATEGORY

========================================== */

.product-category.reverse {

    grid-template-columns:

        0.85fr 1.15fr;

}

.product-category.reverse

.category-image {

    order: 2;

}

.product-category.reverse

.category-content {

    order: 1;

}

/* ==========================================

   CATEGORY IMAGE

========================================== */

.category-image {

    width: 100%;

    height: 500px;

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:

        0 20px 50px

        rgba(28, 65, 48, 0.12);

}

.category-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:

        transform

        0.8s

        cubic-bezier(

            0.22,

            1,

            0.36,

            1

        );

}

.category-image:hover img {

    transform: scale(1.035);

}

/* ==========================================

   CATEGORY CONTENT

========================================== */

.category-content {

    padding: 20px 10px;

}

.category-number {

    display: block;

    margin-bottom: 18px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #168c61;

}

.category-content h2 {

    margin:

        0 0 12px;

    font-size:

        clamp(30px, 3vw, 42px);

    line-height: 1.15;

    font-weight: 700;

    color: #17251f;

    text-transform: capitalize;

}

.category-content h3 {

    margin:

        0 0 20px;

    font-size: 17px;

    font-weight: 600;

    color: #168c61;

}

.category-content > p {

    max-width: 520px;

    margin:

        0 0 30px;

    font-size: 16px;

    line-height: 1.8;

    font-weight: 900;

    color: #34483f;

}

/* ==========================================

   PRODUCT LIST

========================================== */

.product-list {

    margin-bottom: 32px;

}

.product-list > span {

    display: block;

    margin-bottom: 12px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #17251f;

}

.product-list ul {

    margin: 0;

    padding: 0;

    font-weight: 600;

    list-style: none;

}

.product-list li {

    position: relative;

    margin-bottom: 9px;

    padding-left: 18px;

    font-size: 14px;

    color: #4f655b;

}

.product-list li::before {

    content: "";

    position: absolute;

    width: 5px;

    height: 5px;

    left: 0;

    top: 8px;

    border-radius: 50%;

    background: #168c61;

}

/* ==========================================

   EXPLORE BUTTON

========================================== */

.explore-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:

        12px 22px;

    border:

        1px solid #168c61;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 800;

    color: #168c61;

    transition:

        background 0.3s ease,

        color 0.3s ease,

        transform 0.3s ease;

}

.explore-btn span {

    font-size: 18px;

    transition:

        transform 0.3s ease;

}

.explore-btn:hover {

    color: #ffffff;

    background: #168c61;

    transform:

        translateY(-2px);

}

.explore-btn:hover span {

    transform:

        translateX(5px);

}

/* ==========================================

   PERFORMANCE / CLS

========================================== */

.category-image {

    contain: layout paint;

}

.category-image img {

    aspect-ratio: 1 / 1;

}


/* ==========================================
   PRODUCTS HERO
========================================== */

.products-hero {
    position: relative;
    width: 100%;
    height: 72vh;
    min-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero video */

.products-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Hero overlay */

.products-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(11, 62, 42, 0.76),
        rgba(22, 104, 72, 0.55),
        rgba(11, 62, 42, 0.42)
    );
    pointer-events: none;
}

/* Hero content */

.products-hero-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
    text-align: center;
    color: #fff;
}

.products-hero-label {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d8f2df;
}

.products-hero h1 {
    margin: 0;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -1.5px;
    color: #fff;
}

.products-hero-content p {
    max-width: 650px;
    margin: 28px auto 0;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
}

/* Hero decorative line */

.products-hero-line {
    width: 60px;
    height: 2px;
    margin: 30px auto 0;
    background: #f3fcf6;
    border-radius: 10px;
}

/* Hero scroll indicator */

.products-hero-scroll {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    font-size: 17px;
    animation: heroScroll 2s ease-in-out infinite;
}

@keyframes heroScroll {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ==========================================
   PRODUCTS SECTION
========================================== */

.products-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 110px 50px 120px;
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(215, 219, 218, 0.753),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 15%,
            rgba(243, 238, 238, 0.795),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgb(236, 245, 242),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            #fff 50%,
            #e6f3e9 100%
        );
}

/* Background decoration */

.products-section::before,
.products-section::after {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    content: "";
}

.products-section::before {
    width: 500px;
    height: 500px;
    top: 300px;
    right: -250px;
    background: rgba(22, 140, 97, 0.05);
}

.products-section::after {
    width: 400px;
    height: 400px;
    bottom: 100px;
    left: -200px;
    background: rgba(42, 126, 190, 0.04);
}

/* ==========================================
   PRODUCT CATEGORY
========================================== */

.product-category {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto 130px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 80px;
}

.product-category.reverse {
    grid-template-columns: 0.85fr 1.15fr;
}

.product-category.reverse .category-image {
    order: 2;
}

.product-category.reverse .category-content {
    order: 1;
}

/* Category image */

.category-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    contain: layout paint;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(28, 65, 48, 0.12);
}

.category-image img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-image:hover img {
    transform: scale(1.035);
}

/* Category content */

.category-content {
    padding: 20px 10px;
}

.category-number {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #168c61;
}

.category-content h2 {
    margin: 0 0 12px;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    color: #17251f;
    text-transform: capitalize;
}

.category-content h3 {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    color: #168c61;
}

.category-content > p {
    max-width: 520px;
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 900;
    color: #34483f;
}

/* Product list */

.product-list {
    margin-bottom: 32px;
}

.product-list > span {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #17251f;
}

.product-list ul {
    margin: 0;
    padding: 0;
    font-weight: 600;
    list-style: none;
}

.product-list li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 18px;
    font-size: 14px;
    color: #4f655b;
}

.product-list li::before {
    position: absolute;
    width: 5px;
    height: 5px;
    left: 0;
    top: 8px;
    border-radius: 50%;
    background: #168c61;
    content: "";
}

/* Explore button */

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border: 1px solid #168c61;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 800;
    color: #168c61;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.explore-btn span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.explore-btn:hover {
    color: #fff;
    background: #168c61;
    transform: translateY(-2px);
}

.explore-btn:hover span {
    transform: translateX(5px);
}

/* ==========================================
   PRODUCTS HERO
========================================== */

.products-hero {
    position: relative;
    width: 100%;
    height: 72vh;
    min-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.products-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.products-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(11, 62, 42, 0.76),
        rgba(22, 104, 72, 0.55),
        rgba(11, 62, 42, 0.42)
    );
    pointer-events: none;
}

.products-hero-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
    text-align: center;
    color: #fff;
}

.products-hero-label {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d8f2df;
}

.products-hero h1 {
    margin: 0;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -1.5px;
    color: #fff;
}

.products-hero-content p {
    max-width: 650px;
    margin: 28px auto 0;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
}

.products-hero-line {
    width: 60px;
    height: 2px;
    margin: 30px auto 0;
    background: #f3fcf6;
    border-radius: 10px;
}

.products-hero-scroll {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    font-size: 17px;
    animation: heroScroll 2s ease-in-out infinite;
}

@keyframes heroScroll {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ==========================================
   PRODUCTS SECTION
========================================== */

.products-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 110px 50px 120px;
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(215, 219, 218, 0.753),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 15%,
            rgba(243, 238, 238, 0.795),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgb(236, 245, 242),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            #fff 50%,
            #e6f3e9 100%
        );
}

.products-section::before,
.products-section::after {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    content: "";
}

.products-section::before {
    width: 500px;
    height: 500px;
    top: 300px;
    right: -250px;
    background: rgba(22, 140, 97, 0.05);
}

.products-section::after {
    width: 400px;
    height: 400px;
    bottom: 100px;
    left: -200px;
    background: rgba(42, 126, 190, 0.04);
}

/* ==========================================
   PRODUCT CATEGORY
========================================== */

.product-category {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto 130px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 80px;
}

.product-category.reverse {
    grid-template-columns: 0.85fr 1.15fr;
}

.product-category.reverse .category-image {
    order: 2;
}

.product-category.reverse .category-content {
    order: 1;
}

/* Category image */

.category-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    contain: layout paint;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(28, 65, 48, 0.12);
}

.category-image img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-image:hover img {
    transform: scale(1.035);
}

/* Category content */

.category-content {
    padding: 20px 10px;
}

.category-number {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #168c61;
}

.category-content h2 {
    margin: 0 0 12px;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    color: #17251f;
    text-transform: capitalize;
}

.category-content h3 {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    color: #168c61;
}

.category-content > p {
    max-width: 520px;
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 900;
    color: #34483f;
}

/* Product list */

.product-list {
    margin-bottom: 32px;
}

.product-list > span {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #17251f;
}

.product-list ul {
    margin: 0;
    padding: 0;
    font-weight: 600;
    list-style: none;
}

.product-list li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 18px;
    font-size: 14px;
    color: #4f655b;
}

.product-list li::before {
    position: absolute;
    width: 5px;
    height: 5px;
    left: 0;
    top: 8px;
    border-radius: 50%;
    background: #168c61;
    content: "";
}

/* Explore button */

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border: 1px solid #168c61;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 800;
    color: #168c61;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.explore-btn span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.explore-btn:hover {
    color: #fff;
    background: #168c61;
    transform: translateY(-2px);
}

.explore-btn:hover span {
    transform: translateX(5px);
}

/* ==========================================
   PRODUCTS HERO
========================================== */

.products-hero {
    position: relative;
    width: 100%;
    height: 72vh;
    min-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.products-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.products-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(11, 62, 42, 0.76),
        rgba(22, 104, 72, 0.55),
        rgba(11, 62, 42, 0.42)
    );
    pointer-events: none;
}

.products-hero-content {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 900px;
    text-align: center;
    color: #fff;
}

.products-hero-label {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d8f2df;
}

.products-hero h1 {
    margin: 0;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -1.5px;
    color: #fff;
}

.products-hero-content p {
    max-width: 650px;
    margin: 28px auto 0;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
}

.products-hero-line {
    width: 60px;
    height: 2px;
    margin: 30px auto 0;
    background: #f3fcf6;
    border-radius: 10px;
}

.products-hero-scroll {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    font-size: 17px;
    animation: heroScroll 2s ease-in-out infinite;
}

@keyframes heroScroll {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ==========================================
   PRODUCTS SECTION
========================================== */

.products-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 110px 50px 120px;
    box-sizing: border-box;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(215, 219, 218, 0.753),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 15%,
            rgba(243, 238, 238, 0.795),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgb(236, 245, 242),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #fff 0%,
            #fff 50%,
            #e6f3e9 100%
        );
}

.products-section::before,
.products-section::after {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    content: "";
}

.products-section::before {
    width: 500px;
    height: 500px;
    top: 300px;
    right: -250px;
    background: rgba(22, 140, 97, 0.05);
}

.products-section::after {
    width: 400px;
    height: 400px;
    bottom: 100px;
    left: -200px;
    background: rgba(42, 126, 190, 0.04);
}

/* ==========================================
   PRODUCT CATEGORY
========================================== */

.product-category {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto 130px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 80px;
}

.product-category.reverse {
    grid-template-columns: 0.85fr 1.15fr;
}

.product-category.reverse .category-image {
    order: 2;
}

.product-category.reverse .category-content {
    order: 1;
}

/* Category image */

.category-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    contain: layout paint;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(28, 65, 48, 0.12);
}

.category-image img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-image:hover img {
    transform: scale(1.035);
}

/* Category content */

.category-content {
    padding: 20px 10px;
}

.category-number {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #168c61;
}

.category-content h2 {
    margin: 0 0 12px;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    color: #17251f;
    text-transform: capitalize;
}

.category-content h3 {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    color: #168c61;
}

.category-content > p {
    max-width: 520px;
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 900;
    color: #34483f;
}

/* Product list */

.product-list {
    margin-bottom: 32px;
}

.product-list > span {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #17251f;
}

.product-list ul {
    margin: 0;
    padding: 0;
    font-weight: 600;
    list-style: none;
}

.product-list li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 18px;
    font-size: 14px;
    color: #4f655b;
}

.product-list li::before {
    position: absolute;
    width: 5px;
    height: 5px;
    left: 0;
    top: 8px;
    border-radius: 50%;
    background: #168c61;
    content: "";
}

/* Explore button */

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border: 1px solid #168c61;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 800;
    color: #168c61;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.explore-btn span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.explore-btn:hover {
    color: #fff;
    background: #168c61;
    transform: translateY(-2px);
}

.explore-btn:hover span {
    transform: translateX(5px);
}