/* =========================================================
   ANJANEY AGRO ENTERPRISE
   COMMON FOOTER
========================================================= */


/* =========================================================
   FOOTER
   Main footer background and default text color.
========================================================= */

.site-footer {
    background: #111a14;
    color: rgba(255, 255, 255, 0.7);
}


/* =========================================================
   FOOTER GRID
   Main footer column layout.
========================================================= */

.footer-grid {
    display: grid;
    grid-template-columns: 3.5fr 1fr 1fr 1fr;
    gap: 60px;
    padding: 75px 0;
}


/* =========================================================
   COMPANY
   Controls company logo.
========================================================= */

.footer-company img {
    width: 150px;
    margin-bottom: 22px;
    filter: brightness(0) invert(1);
}


/* =========================================================
   COMPANY DESCRIPTION
========================================================= */

.footer-company p {
    max-width: 390px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* =========================================================
   FOOTER COLUMN HEADING
========================================================= */

.footer-column h3 {
    color: var(--white);
    font-size: 16px;
    margin-bottom: 22px;
}


/* =========================================================
   FOOTER COLUMN LINKS
========================================================= */

.footer-column a {
    margin-bottom: 10px;
    font-size: 14px;
    transition: var(--transition);
}


.footer-column a:hover {
    color: #e4c16a;
}


/* =========================================================
   FOOTER COLUMN PARAGRAPHS
========================================================= */

.footer-column p {
    margin-bottom: 8px;
    font-size: 14px;
}


/* =========================================================
   FOLLOW TITLE
========================================================= */

.follow-title {
    margin-top: 20px;
}


/* =========================================================
   EXISTING SOCIAL LINKS
========================================================= */

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


.social-links a {
    margin: 0;
}


/* =========================================================
   FOOTER CONTACT INFORMATION
   Icon + text contact details.
========================================================= */

.footer-contact-list {
    display: flex;
    flex-direction: column;

    gap: 12px; /* Space between contact rows */
}


/* =========================================================
   FOOTER CONTACT ITEM
   Controls icon-to-text spacing.
========================================================= */

.footer-contact-item {
    display: inline-flex;
    align-items: center;

    gap: 12px; /* Space between SVG and text */

    margin-bottom: 0 !important;

    text-decoration: none;
}


/* =========================================================
   FOOTER CONTACT ICON
   Controls SVG size and colour.
========================================================= */

.footer-contact-icon {
    width: 20px;
    height: 20px;

    display: block;
    flex-shrink: 0;

    object-fit: contain;

    /* Force external SVG to white */
    filter: brightness(0) invert(1);

    /* Icon transparency */
    opacity: 0.85;

    transition: var(--transition);
}


/* =========================================================
   FOOTER CONTACT TEXT
========================================================= */

.footer-contact-item span {
    display: block;
    font-size: 14px;
}


/* =========================================================
   CONTACT ICON HOVER
   Makes icon fully white on hover.
========================================================= */

.footer-contact-item:hover .footer-contact-icon {
    opacity: 1;
}


/* =========================================================
   FOOTER ICON-ONLY LINKS
   Call / WhatsApp / Email / Instagram.
========================================================= */

.footer-icons {
    display: flex;
    align-items: center;
    margin-top: 20px;
    

    gap: 16px; /* Space between standalone icons */
}


/* =========================================================
   FOOTER ICON LINK
   Controls clickable area.
========================================================= */

.footer-icon {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    margin: 0 !important;

    flex-shrink: 0;

    transition: var(--transition);
}


/* =========================================================
   FOOTER ICON IMAGE
   Controls actual SVG size and colour.
========================================================= */

.footer-icon img {
    width: 28px;
    height: 28px;

    display: block;

    object-fit: contain;

   
    /* Normal icon opacity */
    opacity: 1;

    transition: var(--transition);
}


/* =========================================================
   ICON-ONLY HOVER
   Makes icon brighter and slightly raises it.
========================================================= */

.footer-icon:hover {
    transform: translateY(-2px);
}


.footer-icon:hover img {
    opacity: 1;
}




/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 0;
    }


    /* ---------------------------------------------------------
       MOBILE CONTACT INFORMATION
    --------------------------------------------------------- */

    .footer-contact-list {
        gap: 10px;
    }


    .footer-contact-item {
        gap: 10px;
    }


    .footer-contact-icon {
        width: 19px;
        height: 19px;
    }


    .footer-contact-item span {
        font-size: 14px;
    }


    /* ---------------------------------------------------------
       MOBILE ICON-ONLY LINKS
    --------------------------------------------------------- */

    .footer-icons {
        gap: 14px;
        margin-top: 15px;
    }


    .footer-icon {
        width: 32px;
        height: 32px;
    }


    .footer-icon img {
        width: 27px;
        height: 27px;
    }

}

/* =========================================================
   FOOTER BOTTOM
   Copyright / bottom information separator.
========================================================= */

.footer-bottom {
    width: 100%;
    grid-column: 1 / -1;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
}


/* =========================================================
   FOOTER BOTTOM CONTAINER
   Centers the copyright across the full footer width.
========================================================= */

.footer-bottom .container {
    width: 100%;
    min-height: 55px;
    margin-bottom: -200px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   FOOTER COPYRIGHT TEXT
   Keeps copyright text centered horizontally.
========================================================= */

.footer-bottom p {
    width: 100%;
    margin: 0;

    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);

    text-align: center;
}


/* =========================================================
   MOBILE
   Maintains centered copyright on smaller screens.
========================================================= */

@media (max-width: 768px) {

    .footer-bottom .container {
        min-height: 65px;
    }

    .footer-bottom p {
        font-size: 12px;
        text-align: center;
    }

}