*{
    font-family: 'Century Gothic';
}

.footer{
    display: flex;
    flex-direction: column;
}

.top{
    flex: calc(80%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #01002A;
    justify-content: center;
    color: #fff;
}

/* logo section */

.logo-box{
    align-self: center;
    justify-self: center;
    width: fit-content;
    padding: 2%;
}

/* about ABP section */

.about-abp-box{
    display: flex;
    flex-direction: column;
}

.about-abp-box h2{
    flex: calc(10%);
    text-align: center;
}

.list{
    flex: calc(90%);
    display: flex;
}

.list ul:first-child{
    flex: calc(50%);
    text-align: left;
}

.list ul:nth-child(2){
    flex: calc(50%);
    text-align: right;
}

.list ul li{
    padding-top: 30px;
}

.about-abp-box p:nth-child(2){
    text-align: left;
}

/* social media section */
.social-media{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 1%;
    align-items: start;
    justify-content: center;
    align-self: self-start;
    gap: 10px;
    row-gap: 100px;
}

h2{
    grid-column: 1/3;
    text-align: center;
}

.icon-box{
    background-color: #fff;
    display: grid;
    width: fit-content;
    padding: 1%;
    cursor: pointer;
}

.icon-box:first-of-type{
    grid-column: 1/2;
    justify-self: right;
}

.icon-box:nth-of-type(2){
    grid-column: 2/3;
    justify-self: left;
}

.icon-box i{
    color: #01002A;
    align-self: center;
    justify-self: center;
    font-size: 50px;
    transition: all 0.2s ease;
}

.icon-box:hover i{
    color: #000;
}

/* Bottom section */

.bottom{
    background-color: #2A6E95;
    flex: calc(20%);
    text-align: center;

}

.bottom h3{
    color: #fff;
    font-size: 15px;
    font-weight: 100;
}

/* --------------Responsive-------------- */

@media(320px <= width <= 640px){
    .top{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .list{
        flex-direction: column;
    }

    .list ul:first-child{
        flex: calc(100%);
        text-align: center;
    }
    
    .list ul:nth-child(2){
        flex: calc(100%);
        text-align: center;
    }

    .social-media{
        align-self: center;
    }

    /* bottom */
    .bottom h3{
        font-size: 16px;
    }
}