/*-----------------------------------------------------------------------------------
    Selberry - Footer Styles (Gardeno index-2 footer layout)
    Linked from resources/views/include/footer.blade.php, so it applies on every page.
    Colours are written out (not CSS variables) because the theme variables differ per page.
    Logo green gradient: #63A04A > #2E7D44 > #076342, accent #B8DC8E, deep #0B3A28.
-----------------------------------------------------------------------------------*/

/* The green background sits on a pseudo-element so the theme's torn-paint top edge
   (the transparent shape of img/home-2/footer/footer-bg.png) can be cut out with a mask. */
.sb-footer {
    background: transparent;
}
/* When the section above the footer is the light green Inquiry (home page, or the common sections
   ending with Inquiry), let the torn gaps show that colour instead of a white strip */
.sb-home ~ .sb-footer,
.sb-sec-end-inquiry ~ .sb-footer {
    background-color: #F1F7EC;
}
.sb-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        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%);
    -webkit-mask-image: url("../image/footer/edge-mask.webp"), linear-gradient(#000, #000);
    mask-image: url("../image/footer/edge-mask.webp"), linear-gradient(#000, #000);
    -webkit-mask-size: 1920px 40px, 100% calc(100% - 39px);
    mask-size: 1920px 40px, 100% calc(100% - 39px);
    /* wider than 1920px (big screens, or the browser zoomed out): stretch the torn edge to the
       full width, otherwise its ends are not covered and show square steps at the sides */
    -webkit-mask-size: max(1920px, 100%) 40px, 100% calc(100% - 39px);
    mask-size: max(1920px, 100%) 40px, 100% calc(100% - 39px);
    -webkit-mask-position: center top, 0 100%;
    mask-position: center top, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
}

/* Newsletter row */
.sb-footer .footer-newsletter-content-2 {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
.sb-footer .footer-newsletter-content-2 .newsletter-content {
    padding: 100px 0px 50px;
}
.sb-footer .footer-newsletter-content-2 .newsletter-content form .form-clt input {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
.sb-footer .footer-newsletter-content-2 .newsletter-content form .form-clt input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.sb-footer .footer-newsletter-content-2 .newsletter-content form .form-clt input:focus {
    border-color: #B8DC8E;
}
.sb-footer .footer-newsletter-content-2 .newsletter-content form .form-clt .theme-btn {
    background: linear-gradient(135deg, #B8DC8E 0%, #63A04A 100%);
    color: #0B3A28;
    font-weight: 600;
}

/* Widgets */
.sb-footer .footer-widget-wrapper-2 {
    padding: 30px 0 60px;
}
/* Index-2 vertical divider between the brand column and the other columns */
.sb-footer .footer-widget-wrapper-2::before {
    display: block;
    left: 38.6667%; /* right edge of the 5/12 brand column */
    background-color: rgba(255, 255, 255, 0.22);
}
@media (max-width: 1199px) {
    .sb-footer .footer-widget-wrapper-2::before {
        display: none;
    }
}
/* Space between the divider and the first link column; keep text off the line on the brand side */
@media (min-width: 1200px) {
    .sb-footer .footer-widget-wrapper-2 .row > div:nth-child(1) {
        padding-right: 50px;
    }
    .sb-footer .footer-widget-wrapper-2 .row > div:nth-child(2) {
        padding-left: 40px;
    }
    .sb-footer .footer-widget-wrapper-2 .row > div:nth-child(3) {
        padding-left: 28px;
    }
}
.sb-footer .single-sideber-widget .widget-title h3 {
    position: relative;
    padding-bottom: 16px;
    color: #ffffff;
}
.sb-footer .single-sideber-widget .widget-title h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    border-radius: 3px;
    background: var(--sb-grad-light);
}
.sb-footer .sb-footer-logo img {
    width: 230px;
    max-width: 100%;
    filter: brightness(0) invert(1);
}
.sb-footer .sb-footer-about {
    max-width: 340px;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.8;
}

/* Contact rows with round green icons */
.sb-footer .footer-icon-item {
    align-items: flex-start;
    gap: 14px;
}
.sb-footer .footer-icon-item .icon {
    flex: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #63A04A 0%, #2E7D44 55%, #076342 100%);
    font-size: 15px;
}
.sb-footer .footer-icon-item h6 {
    margin: 0;
    padding-top: 1px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.65;
}
.sb-footer .footer-icon-item h6 a {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    word-break: break-word;
    transition: color 0.3s ease;
}
.sb-footer .footer-icon-item h6 a:hover {
    color: #B8DC8E;
}

/* Link lists */
.sb-footer .single-sideber-widget .list-area.quick_links li {
    display: inline-block;
    width: 49%;
}

.sb-footer .single-sideber-widget .list-area li:not(:last-child) {
    margin-bottom: 16px;
}
.sb-footer .single-sideber-widget .list-area li a {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.801);
}
.sb-footer .single-sideber-widget .list-area li a i {
    color: #B8DC8E;
    font-size: 10px;
}
.sb-footer .single-sideber-widget .list-area li:hover a,
.sb-footer .single-sideber-widget .list-area li:hover a i {
    color: #B8DC8E;
}

/* Bottom bar: copyright left, social icons exactly in the middle, "Powered By" right */
@media (min-width: 768px) {
    .sb-footer .footer-bottom-2 .footer-wrapper-2 {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 20px;
    }
    .sb-footer .footer-bottom-2 .footer-wrapper-2 > :last-child {
        justify-self: end;
        text-align: right;
    }
}
@media (max-width: 767px) {
    .sb-footer .footer-bottom-2 .footer-wrapper-2 {
        flex-direction: column;
        justify-content: center;
        gap: 14px;
        text-align: center;
    }
}

/* Social icons: in the bottom bar, between the copyright and "Powered By" */
.sb-footer .footer-bottom-2 .sb-footer-social .social-icon {
    gap: 12px;
    justify-content: center;
}
.sb-footer .footer-bottom-2 .sb-footer-social .social-icon a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.sb-footer .footer-bottom-2 .sb-footer-social .social-icon a:hover {
    background: var(--sb-grad-light); /* like the newsletter button */
    border-color: #B8DC8E;
    color: #0B3A28;
    transform: translateY(-3px);
}

/* Bottom bar */
.sb-footer .footer-bottom-2 {
    border-top-color: rgba(255, 255, 255, 0.14);
}
.sb-footer .footer-bottom-2 .footer-wrapper-2 {
    padding: 15px 0;
}
.sb-footer .footer-bottom-2 .footer-wrapper-2 p {
    margin: 0;
    color: rgba(255, 255, 255, 0.801);
    font-size: 14px;
    font-weight: 300;
}
.sb-footer .footer-bottom-2 .footer-wrapper-2 a {
    color: #ffffff;
    font-weight: 500;
    transition: color 0.3s ease;
}
.sb-footer .footer-bottom-2 .footer-wrapper-2 a:hover {
    color: #B8DC8E;
}

@media (max-width: 767px) {
    .sb-footer .footer-newsletter-content-2 .newsletter-content {
        padding: 60px 0 40px;
    }
    .sb-footer .footer-newsletter-content-2 .newsletter-content h3 br {
        display: none;
    }
    .sb-footer .footer-newsletter-content-2 .newsletter-content form .form-clt input {
        padding-right: 20px !important;
    }
    .sb-footer .footer-newsletter-content-2 .newsletter-content form .form-clt .theme-btn {
        position: static;
        width: 100%;
        margin-top: 14px;
    }
}