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

.site-footer{

    background:#ffffff;

    border-top:1px solid #ECEFEA;

    padding:55px 0 22px;

}

.site-footer .container{

    max-width:1320px;

    margin:auto;

    padding:0 24px;

}

/* ==========================================================
   LAYOUT
========================================================== */

.footer-wrapper{

    display:grid;

    grid-template-columns:1.7fr 1fr 1fr 1fr;

    gap:55px;

    align-items:flex-start;

}

/* ==========================================================
   COMMON
========================================================== */

.footer-brand,
.footer-services,
.footer-links,
.footer-contact{

    text-align:right;

}

.footer-services h3,
.footer-links h3,
.footer-contact h3{

    margin:0 0 26px;

    font-size:28px;

    font-weight:700;

    color:#202020;

}

.footer-services ul,
.footer-links ul,
.footer-contact ul{

    margin:0;

    padding:0;

    list-style:none;

}

/* ==========================================================
   BRAND
========================================================== */

.brand-header{

    display:inline-flex;

    align-items:center;

    justify-content:flex-start;

    gap:6px;

    margin-bottom:18px;

    width:auto;

}

.footer-logo{

    width:150px;

    height:auto;

    margin-top:0;

    margin-right:-12px;

    flex-shrink:0;

}

.brand-text{

    display:flex;

    flex-direction:column;

}

.brand-text h2{

    margin:0;

    font-size:22px;

    font-weight:700;

    line-height:1.15;

    color:#202020;

}

.brand-text span{

    display:block;

    margin-top:6px;

    font-size:15px;

    font-weight:500;

    color:#6B8A5C;

}

.brand-description{

    margin:0;

    font-size:16px;

    line-height:2.1;

    color:#666;

    max-width:360px;

}

/* ==========================================================
   SOCIAL
========================================================== */

.footer-social{

    display:flex;

    gap:12px;

    margin-top:28px;

}

.footer-social a{

    width:44px;

    height:44px;

    border-radius:50%;

    border:1px solid #DDE6D8;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#6B8A5C;

    text-decoration:none;

    transition:.25s;

}

.footer-social a:hover{

    background:#6B8A5C;

    border-color:#6B8A5C;

    color:#fff;

  }

/* ==========================================================
   SERVICES
========================================================== */

.footer-services li{

    margin-bottom:16px;

    font-size:16px;

    color:#666;

    transition:.25s;

}

.footer-services li:hover{

    color:#6B8A5C;

    padding-right:6px;

}

/* ==========================================================
   QUICK LINKS
========================================================== */

.footer-links li{

    margin-bottom:16px;

}

.footer-links a{

    text-decoration:none;

    color:#666;

    font-size:16px;

    transition:.25s;

}

.footer-links a:hover{

    color:#6B8A5C;

    padding-right:6px;

}

/* ==========================================================
   CONTACT
========================================================== */

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;

    color:#666;

    line-height:2;

}

.footer-contact i{

    width:20px;

    color:#6B8A5C;

    margin-top:6px;

    flex-shrink:0;

}

.footer-contact span{

    font-size:16px;

}

/* ==========================================================
   COPYRIGHT
========================================================== */

.footer-bottom{

    margin-top:45px;

    padding-top:20px;

    border-top:1px solid #ECEFEA;

    text-align:center;

    color:#8A8A8A;

    font-size:15px;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1100px){

    .footer-wrapper{

        grid-template-columns:1fr 1fr;

        gap:40px;

    }

}

@media(max-width:768px){

    .site-footer{

        padding:40px 0 18px;

    }

    .footer-wrapper{

        grid-template-columns:1fr;

        gap:36px;

    }

    .footer-brand{

    text-align:right;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    }

    .footer-services,
    .footer-links,
    .footer-contact{

        text-align:center;

    }

    .brand-header{

        justify-content:center;

    }

    .brand-description{

        max-width:none;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-contact li{

        justify-content:center;

        text-align:right;

    }

}