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

.footer{
    background:#111;
    color:#fff;
    padding:70px 0 0;
}

.footer-container{
    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

/*==================================
        LOGO
==================================*/

.footer-logo{
    width:180px;
    margin-bottom:20px;
    display:block;
}

.footer-box p{
    color:#bbb;
    line-height:1.8;
    font-size:15px;
}

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

.footer-box h3{
    color:#fff;
    font-size:22px;
    margin-bottom:20px;
}

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

.footer-box ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-box ul li{
    margin-bottom:12px;
}

.footer-box ul li a{
    color:#bbb;
    text-decoration:none;
    transition:.3s;
}

.footer-box ul li a:hover{
    color:#fff;
    padding-left:8px;
}

/*==================================
      NEWSLETTER
==================================*/

.footer-box form{
    margin-top:20px;
}

.footer-box input{
    width:100%;
    padding:14px;
    border:none;
    outline:none;
    border-radius:5px;
    margin-bottom:15px;
    font-size:15px;
}

.footer-box button{
    width:100%;
    padding:14px;
    border:none;
    cursor:pointer;
    border-radius:5px;
    background:#fff;
    color:#111;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.footer-box button:hover{
    background:#ddd;
}

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

.copyright{
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
    padding:25px;
    color:#999;
    font-size:14px;
}

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

@media (max-width:991px){

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

}

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

@media (max-width:768px){

    .footer{
        padding:50px 0 0;
    }

    .footer-container{

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

        gap:25px;

        align-items:start;

    }

    .footer-box{

        text-align:left;

    }

    .footer-logo{

        width:130px;

        margin-bottom:15px;

    }

    .footer-box h3{

        font-size:18px;

        margin-bottom:15px;

    }

    .footer-box p{

        font-size:14px;

        line-height:1.6;

    }

    .footer-box ul li{

        margin-bottom:10px;

    }

    .footer-box ul li a:hover{

        padding-left:0;

    }

    .footer-box input{

        padding:12px;

        font-size:14px;

    }

    .footer-box button{

        padding:12px;

        font-size:14px;

    }

    .copyright{

        margin-top:40px;

        padding:18px;

        font-size:13px;

    }

}

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

@media (max-width:480px){

    .footer-container{

        gap:20px;

    }

    .footer-logo{

        width:110px;

    }

    .footer-box h3{

        font-size:17px;

    }

    .footer-box p,
    .footer-box ul li a{

        font-size:13px;

    }

    .footer-box input,
    .footer-box button{

        font-size:13px;

        padding:10px;

    }

}