/* ==========================================================
   FOOTER
   PabrikTani
========================================================== */

.site-footer {

    background: linear-gradient(180deg, #1B5E20, #145214);

    color: #fff;

}

.footer-top {

    padding: 70px 0 50px;

}

.footer-grid {

    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;

    gap: 40px;

}

.footer-col h4 {

    font-size: 18px;

    font-weight: 700;

    margin: 0 0 20px;

    color: #fff;

}

.footer-col ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-col ul li {

    margin-bottom: 12px;

}

.footer-col ul li a {

    color: rgba(255, 255, 255, 0.75);

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s;

}

.footer-col ul li a:hover {

    color: #A5D6A7;

}

.footer-contact li {

    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;

    line-height: 1.6;

}

.footer-logo {

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 14px;

}

.footer-newsletter p {

    font-size: 14px;

    color: rgba(255, 255, 255, 0.75);

    line-height: 1.7;

    margin: 0 0 20px;

}

.newsletter-form {

    display: flex;

    gap: 0;

    margin-bottom: 12px;

    border-radius: 14px;

    overflow: hidden;

}

.newsletter-notice {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.newsletter-notice--success {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(129, 199, 132, 0.55);
    color: #E8F5E9;
}

.newsletter-notice--info {
    background: rgba(255, 213, 79, 0.18);
    border: 1px solid rgba(255, 213, 79, 0.45);
    color: #FFF8E1;
}

.newsletter-notice--error {
    background: rgba(229, 57, 53, 0.2);
    border: 1px solid rgba(239, 154, 154, 0.5);
    color: #FFEBEE;
}

.newsletter-form input {

    flex: 1;

    border: none;

    outline: none;

    padding: 14px 18px;

    font-size: 14px;

    background: rgba(255, 255, 255, 0.95);

    color: #333;

}

.newsletter-form button {

    border: none;

    background: #FFD54F;

    color: #222;

    font-weight: 700;

    font-size: 14px;

    padding: 14px 22px;

    cursor: pointer;

    transition: 0.3s;

    white-space: nowrap;

}

.newsletter-form button:hover {

    background: #FFCA28;

}

.footer-social {

    display: flex;

    gap: 12px;

    margin-top: 12px;

}

.footer-social a,
.footer-social-link {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);

    color: #fff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition: 0.3s;

    border: 0;

    box-sizing: border-box;

}

.footer-social a svg,
.footer-social-link svg,
.footer-social a img,
.footer-social-link img {

    width: 18px;

    height: 18px;

    display: block;

}

.footer-social-link.is-disabled {
    opacity: 0.55;
    cursor: default;
}

.footer-social a:hover,
.footer-social-link:hover:not(.is-disabled) {

    background: rgba(255, 255, 255, 0.25);

    color: #fff;

    transform: translateY(-3px);

}

.footer-social-link--instagram:hover:not(.is-disabled) {
    background: #E1306C;
}

.footer-social-link--facebook:hover:not(.is-disabled) {
    background: #1877F2;
}

.footer-social-link--youtube:hover:not(.is-disabled) {
    background: #FF0000;
}

.footer-social-link--tiktok:hover:not(.is-disabled) {
    background: #111111;
}

.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, 0.12);

    padding: 22px 0;

}

.footer-bottom-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

}

.footer-bottom-meta {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.footer-weather-sources {

    font-size: 12px;

    color: rgba(255, 255, 255, 0.5);

}

.footer-bottom p {

    margin: 0;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.6);

}

@media (max-width: 991px) {

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 576px) {

    .footer-top {

        padding: 50px 0 36px;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 32px;

    }

    .footer-bottom-inner {

        flex-direction: column;

        text-align: center;

    }

}