/*-----------------------------------------------------------------------------------
    Selberry - Brand gradients (all pages)
    Linked from resources/views/include/head.blade.php, right after main.css.

    User's rule (2026-10-21): no flat single-green fills anywhere on the site.
      --sb-grad        the footer background (deep green with a leaf-green glow): for green
                       fills, dark sections and buttons on light backgrounds
      --sb-grad-light  the footer newsletter "Subscribe" button (light leaf gradient, dark
                       text): for buttons and small fills inside dark sections
    The custom CSS files (home, sections, products, contact, footer, header, translator and the
    page CSS at the end of main.css) use these variables directly; this file only holds the
    variables and the fixes for parts of the Gardeno theme itself.
    Other companies' brand colours stay as they are (LinkedIn blue, WhatsApp green buttons).
-----------------------------------------------------------------------------------*/
:root {
    --sb-grad:
        radial-gradient(circle at 92% 0%, rgba(99, 160, 74, 0.3) 0%, rgba(99, 160, 74, 0) 42%),
        radial-gradient(circle at 0% 100%, rgba(184, 220, 142, 0.1) 0%, rgba(184, 220, 142, 0) 40%),
        linear-gradient(180deg, #0B3A28 0%, #07281b 100%);
    --sb-grad-light: linear-gradient(135deg, #B8DC8E 0%, #63A04A 100%);
}

/*---------------- Theme buttons ----------------*/
/* on light backgrounds; the theme's hover (a white fill grows, text turns dark) stays */
.theme-btn {
    background: var(--sb-grad);
}
/* home hero (dark photo): newsletter-button style */
.hero-2 .hero-content .hero-button .theme-btn {
    background: var(--sb-grad-light);
    color: #0B3A28;
}
.hero-2 .hero-content .hero-button .theme-btn i {
    color: #0B3A28;
}
/* header button once the header is sticky (light): the theme fills it with --header on hover,
   which is as dark as the gradient, so the hover fill is the light gradient instead */
#header-sticky.header-1.sticky .header-right .theme-btn::before {
    background: var(--sb-grad-light);
}
#header-sticky.header-1.sticky .header-right .theme-btn:hover {
    color: #0B3A28;
}
/* same for the button in the side panel (offcanvas) */
.offcanvas__wrapper .offcanvas__content .theme-btn::before {
    background: var(--sb-grad-light);
}
.offcanvas__wrapper .offcanvas__content .theme-btn:hover {
    color: #0B3A28;
}

/* back to top */
.back-to-top {
    background: var(--sb-grad);
}
.back-to-top:hover {
    background: var(--sb-grad-light);
    color: #0B3A28;
}

/*---------------- Theme parts with a flat green fill ----------------*/
.counting-card-items:hover,
.process-content-items:hover,
.process-section03.growth-partner-step .process-content-items:hover,
.choose--items:hover .icons,
.offcanvas__wrapper .offcanvas__content .offcanvas__close,
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .contact-list li .icon,
.offcanvas__wrapper .offcanvas__content .social-icon a:hover {
    background: var(--sb-grad);
}
/* mouse-follower dot and ring */
.cursor-inner,
.cursor-outer {
    background: var(--sb-grad);
    border-color: #0B3A28;
}