/* ========================================================== 
   FOOTER 
========================================================== */ 
 
.footer { 
    background: #2c2c2c; 
    padding: 80px 0; 
} 
 
.footer-container { 
    max-width: 1440px; 
    margin: 0 auto; 
    padding: 0 96px; 
 
    display: grid; 
    grid-template-columns: 2fr 2fr 1fr 1fr; 
    gap: 60px; 
} 
 
/* ========================================================== 
   LOGO 
========================================================== */ 
 
.footer-logo { 
    width: 300px; 
    margin-bottom: 24px; 
} 
 
/* ========================================================== 
   DESCRIPTION 
========================================================== */ 
 
.footer-text { 
    max-width: 400px; 
 
    color: #ddd; 
 
    font-family: Inter, sans-serif; 
    font-size: 16px; 
    font-weight: 400; 
    line-height: 1.8; 
} 
 
/* ========================================================== 
   HEADING 
========================================================== */ 
 
.footer h3 { 
    margin-bottom: 22px; 
 
    color: #ff6b2c; 
 
    font-family: Inter, sans-serif; 
    font-size: 22px; 
    font-weight: 600; 
} 
 
/* ========================================================== 
   LIST 
========================================================== */ 
 
.footer ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
 
.footer ul li { 
    margin-bottom: 14px; 
} 
 
/* ========================================================== 
   LINKS 
========================================================== */ 
 
.footer a { 
    color: #ddd; 
 
    text-decoration: none; 
 
    font-family: Inter, sans-serif; 
    font-size: 16px; 
    line-height: 1.6; 
 
    transition: .3s; 
} 
 
.footer a:hover { 
    color: #ff4b85; 
} 
 
/* Keep Services in one line */ 
 
.footer-col ul li a { 
    white-space: nowrap; 
} 
 
/* ========================================================== 
   PARAGRAPH 
========================================================== */ 
 
.footer p { 
    color: #ddd; 
 
    font-family: Inter, sans-serif; 
    font-size: 16px; 
    line-height: 1.7; 
 
    margin-bottom: 14px; 
} 
 
/* ========================================================== 
   PHONE CONTACTS 
========================================================== */ 
 
.phone-contacts { 
    width: 100%; 
} 
 
.phone-contact { 
    margin-bottom: 10px; 
} 
 
.phone-contact .contact-name, 
.phone-contact .contact-number { 
    margin: 0; 
} 
 
.phone-contact .contact-number a { 
    display: inline-block; 
} 
 
/* ========================================================== 
   SOCIAL ICONS 
========================================================== */ 
 
.social-icons { 
    display: flex; 
    gap: 18px; 
    margin-top: 20px; 
} 
 
.social-icons a { 
    font-size: 28px; 
    color: #fff; 
 
    transition: .3s; 
} 
 
.social-icons a:hover { 
    color: #ff4b85; 
    transform: translateY(-5px); 
} 
 
 
/* ========================================================== 
   RESPONSIVE 
========================================================== */ 
 
@media (max-width: 1200px) { 
 
    .footer-container { 
        padding: 0 60px; 
        grid-template-columns: repeat(2, 1fr); 
    } 
 
    .footer-col ul li a { 
        white-space: normal; 
    } 
} 
 
 
/* ========================================================== 
   MOBILE 
========================================================== */ 
 
@media (max-width: 768px) { 
 
    .footer { 
        padding: 62px 0 72px; 
    } 
 
    .footer-container { 
        padding: 0 24px; 
        gap: 24px; 
        grid-template-columns: 1fr; 
        text-align: center; 
    } 
 
    /* Logo */ 
 
    .footer-logo { 
        margin: 0 auto 24px; 
        width: min(245px, 100%); 
        height: auto; 
    } 
 
    /* Text */ 
 
    .footer-text { 
        max-width: 100%; 
    } 
 
    .footer-text, 
    .footer p, 
    .footer a { 
        font-size: 16px; 
        line-height: 1.45; 
    } 
 
    /* Headings */ 
 
    .footer h3 { 
        margin-bottom: 8px; 
        font-size: 20px; 
    } 
 
    /* Services hidden */ 
 
    .footer-col:nth-child(2) { 
        display: none; 
    } 
 
 
    /* ======================================================
       ADDRESS + EMAIL
    ====================================================== */ 
 
    .footer-col:nth-child(3) { 
        display: grid; 
        gap: 4px; 
        text-align: center; 
    } 
 
    .footer-col:nth-child(3) h3 { 
        text-align: center; 
    } 
 
    .footer-col:nth-child(3) h3:not(:first-child) { 
        margin-top: 16px; 
    } 
 
    .footer-col:nth-child(3) p { 
        text-align: center; 
        margin-left: auto; 
        margin-right: auto; 
    } 
 
 
    /* ======================================================
       CONTACT US COLUMN
    ====================================================== */ 
 
    .footer-col:nth-child(4) { 
        display: grid; 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
        column-gap: 22px; 
        row-gap: 8px; 
        text-align: center; 
    } 
 
 
    /* ======================================================
       CONTACT US HEADING
    ====================================================== */ 
 
    .footer-col:nth-child(4) > h3:first-child { 
        grid-column: 1 / -1; 
        width: 100%; 
        text-align: center; 
        margin-bottom: 8px; 
    } 
 
 
    /* ======================================================
       TWO CONTACTS SIDE BY SIDE
    ====================================================== */ 
 
    .footer-col:nth-child(4) .phone-contacts { 
        grid-column: 1 / -1; 
 
        width: 100%; 
 
        display: grid; 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
 
        column-gap: 22px; 
        row-gap: 8px; 
 
        align-items: start; 
        justify-items: center; 
 
        margin: 0 auto; 
        text-align: center; 
    } 
 
 
    /* Individual contact */ 
 
    .footer-col:nth-child(4) .phone-contact { 
        width: 100%; 
 
        margin: 0; 
 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: flex-start; 
 
        text-align: center; 
    } 
 
 
    /* Contact name */ 
 
    .footer-col:nth-child(4) .contact-name { 
        width: 100%; 
 
        margin: 0 0 2px 0; 
 
        text-align: center; 
 
        white-space: nowrap; 
    } 
 
 
    /* Contact number */ 
 
    .footer-col:nth-child(4) .contact-number { 
        width: 100%; 
 
        margin: 0; 
 
        text-align: center; 
 
        white-space: nowrap; 
    } 
 
 
    /* Phone link */ 
 
    .footer-col:nth-child(4) .contact-number a { 
        display: inline-block; 
 
        width: auto; 
 
        text-align: center; 
    } 
 
 /* ==========================================================
   MOBILE FOLLOW US - EXACT CENTER ALIGNMENT
========================================================== */



    /* Follow Us heading */
    .footer-col:nth-child(4) h3[style] {
        width: 100% !important;
        display: block !important;

        margin-top: 35px !important;
        margin-bottom: 0px !important;

        text-align: center !important;

        grid-column: 1 / -1 !important;
    }

    /* Social media icons */
    .footer-col:nth-child(4) .social-icons {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;

        justify-content: center !important;
        align-items: center !important;

        gap: 16px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        grid-column: 1 / -1 !important;
    }

    /* Individual icons */
    .footer-col:nth-child(4) .social-icons a {
        width: auto !important;
        height: auto !important;

        display: flex !important;

        justify-content: center !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 20px !important;

        position: static !important;
        transform: none !important;
    }

    /* Font Awesome icons */
    .footer-col:nth-child(4) .social-icons a i {
        display: block !important;
        font-size: 20px !important;
    }
}