/* ==========================================================
   INFOWORLD V2
   FOOTER.CSS
========================================================== */

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

.site-footer{

    margin-top:80px;

    background:#0f172a;

    color:#fff;

}

/* ==========================================
   TOP
========================================== */

.footer-top{

    padding:70px 0 50px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

/* ==========================================
   GRID
========================================== */

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;

    gap:40px;

}

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

.footer-brand h2{

    color:#fff;

    font-size:2rem;

    margin-bottom:20px;

}

.footer-brand p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:25px;

}

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

.footer-social{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.08);

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}

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

.footer-title{

    color:#fff;

    font-size:1.1rem;

    margin-bottom:22px;

}

/* ==========================================
   MENU
========================================== */

.footer-menu{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-menu a{

    color:#cbd5e1;

    transition:.3s;

}

.footer-menu a:hover{

    color:#fff;

    padding-left:8px;

}

/* ==========================================
   TAG
========================================== */

.footer-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.footer-tags a{

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:#e2e8f0;

    font-size:.85rem;

    transition:.3s;

}

.footer-tags a:hover{

    background:var(--primary);

    color:#fff;

}

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

.footer-newsletter p{

    color:#cbd5e1;

    margin-bottom:18px;

}

.footer-newsletter form{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-newsletter input{

    height:50px;

    border:none;

    border-radius:10px;

    padding:0 16px;

}

.footer-newsletter button{

    height:50px;

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.footer-newsletter button:hover{

    background:var(--primary-dark);

}

/* ==========================================
   BOTTOM
========================================== */

.footer-bottom{

    padding:22px 0;

}

.footer-bottom .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    color:#94a3b8;

    margin:0;

}

.footer-links{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}

.footer-links a{

    color:#cbd5e1;

    font-size:.9rem;

}

.footer-links a:hover{

    color:#fff;

}

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

@media(max-width:1200px){

.footer-grid{

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

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom .container{

flex-direction:column;

text-align:center;

}

.footer-links{

justify-content:center;

}

}