/* FOOTER */

.footer{

background:#0b1c2c;

color:white;

padding:60px 0 20px 0;

}


.footer-wrap{

display:grid;

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

gap:30px;

}


.footer-col h3{

margin-bottom:10px;

}


.footer-col h4{

margin-bottom:10px;

}


.footer-col p{

font-size:14px;

line-height:1.9;

color:#ddd;

text-align:justify;

text-justify:inter-word;

margin-top:12px;

}


.footer-col ul{

list-style:none;

padding:0;

}


.footer-col ul li{

margin-bottom:8px;

}


.footer-col ul li a{

color:#ddd;

text-decoration:none;

font-size:14px;

}


.footer-col ul li a:hover{

color:#fff;

}


.footer-bottom{

text-align:center;

margin-top:30px;

border-top:1px solid rgba(255,255,255,0.2);

padding-top:15px;

font-size:14px;

color:#ccc;

}



/* RESPONSIVE */

@media(max-width:992px){

.footer-wrap{

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

}

}


@media(max-width:600px){

.footer-wrap{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.footer-col p{

text-align:left;

}

}

.footer-brand{

color:#ccc;

text-decoration:none;

font-weight:600;

transition:.3s;

position:relative;

}



/* hover */

.footer-brand:hover{

color:white;

}



/* garis animasi */

.footer-brand::after{

content:"";

position:absolute;

left:0;
bottom:-3px;

width:0;

height:1px;

background:white;

transition:.3s;

}


.footer-brand:hover::after{

width:100%;

}