/*=========================================
FOOTER
=========================================*/

        .site-footer {

            background: #0b4f2d;

            color: #fff;

        }

        .footer-container {

            max-width: 1450px;

            margin: auto;

            padding: 55px 60px 40px;

            display: grid;

            grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr;

            gap: 45px;

        }

        .footer-col h3 {

            font-size: 34px;

            margin-bottom: 4px;

        }

        .footer-logo {

            display: block;

            letter-spacing: 2px;

            font-size: 14px;

            font-weight: 700;

            margin-bottom: 20px;

            color: #c8f0d5;

        }

        .footer-col h4 {

            margin-bottom: 18px;

            font-size: 20px;

        }

        .footer-col p {

            color: #d8e9dd;

            line-height: 1.8;

            margin-bottom: 22px;

        }

        .footer-col ul {

            list-style: none;

        }

        .footer-col ul li {

            margin-bottom: 12px;

        }

        .footer-col ul li a {

            color: #d8e9dd;

            text-decoration: none;

            transition: .25s;

        }

        .footer-col ul li a:hover {

            color: #fff;

            padding-left: 6px;

        }

        .social-links {

            display: flex;

            gap: 12px;

        }

        .social-links a {

            width: 40px;

            height: 40px;

            border: 1px solid rgba(255, 255, 255, .2);

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            color: #fff;

            text-decoration: none;

        }

        .social-links a:hover {

            background: #14804a;

        }

        .contact-list li {

            display: flex;

            gap: 12px;

            align-items: flex-start;

            line-height: 1.7;

        }

        .contact-list i {

            color: #8fd3a7;

            margin-top: 4px;

        }

        .footer-bottom {

            border-top: 1px solid rgba(255, 255, 255, .12);

            max-width: 1450px;

            margin: auto;

            padding: 22px 60px;

            display: flex;

            justify-content: space-between;

            color: #d8e9dd;

            font-size: 15px;

        }

        @media(max-width:1000px) {

            .footer-container {

                grid-template-columns: repeat(2, 1fr);

            }

            .footer-bottom {

                flex-direction: column;

                gap: 12px;

                text-align: center;

            }

        }

        @media(max-width:700px) {

            .footer-container {

                grid-template-columns: 1fr;

                padding: 45px 25px;

            }

            .footer-bottom {

                padding: 20px 25px;

            }

        }


        /* =====================================
   MOBILE RESPONSIVE (STEP 10)
   Footer
===================================== */

        @media (max-width:768px) {

            .footer-container {

                grid-template-columns: 1fr;

                gap: 30px;

                padding: 40px 20px;

            }

            .footer-col {

                text-align: center;

            }

            .footer-col h3 {

                font-size: 28px;

            }

            .footer-col h4 {

                font-size: 20px;

            }

            .social-links {

                justify-content: center;

            }

            .contact-list li {

                justify-content: center;

                text-align: left;

            }

            .footer-bottom {

                flex-direction: column;

                gap: 10px;

                text-align: center;

                padding: 20px;

            }

        }