footer {
    display: flex;
    padding-top: 4rem;
    padding-bottom: 4rem;
    flex-direction: column;
    align-items: flex-start;
    background: var(--sys-light-information-container, #E0F2FE);
    margin-top: 4rem;
    display: flex;
    align-items:center;
}
.footer-container{
    width: 58%;
    gap: 2rem;
}

footer h2 {
    color: var(--sys-light-on-information-container, #055580);
    margin:2rem 0;
    /* Display md/bold */
    font-family: Inter;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.75rem;
    /* 122.222% */
    letter-spacing: -0.045rem;
}

.support {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 1.5rem;
    align-self: stretch;
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1 0 0;
}

footer h6 {
    color: var(--sys-light-on-information-container, #055580);
    margin: 0;
    /* Text xl/bold */
    font-family: Inter;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem;
    /* 150% */
}

.contact a {
    align-self: stretch;
    color: var(--sys-light-on-information-container, #055580);
    text-decoration: none;
    /* Text xl/regular */
    font-family: Inter;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem;
    /* 150% */
}


.socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    flex: 1 0 0;
}

.socials-img {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.socials-img img {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#instagram-ico{
    padding: 0rem 0.00088rem 0.00031rem 0rem;

}
.copyright{
    color: var(--sys-light-on-information-container, #055580);
    font-family: Inter;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; 
}



/* responsive design */

/* medium screens  tablets */
@media screen and (min-width: 768px) and (max-width: 991px) {
    footer {

        padding-bottom: 2.5rem;
        gap: 1.5rem;
        margin-top: 3rem;
    }
    .footer-container{
        margin-top:1.5rem ;
        /* width: 70%; */
        width: 91vw;
        gap: 1.5rem;
    }
    .footer-margin{
        margin:0 0;
    }
    
    footer h2 {
       font-size: 1.875rem;
       line-height: 2.25rem;
    }
    footer h6 {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .contact a {
        font-size: 1rem;
        line-height: 1.5rem;
    }


    .socials {
        gap: 0.5rem;
    }

    .socials-img {
        gap: 0.8rem;
    }

    .socials-img img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .copyright{
        font-size: 1rem;
        line-height: 1.5rem; 
    }
}

/* small screens phones */
@media screen and (min-width: 0px) and (max-width: 767px){
    footer {
        padding: 0rem 2rem;
        gap: 1rem;
        margin-top: 2rem;
        align-items:first baseline;
    }
    .footer-container{
        gap: 1rem;
        margin-bottom: 2rem;
        margin-top: 1rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: first baseline;
    }
    
    footer h2 {
       font-size: 1.25rem;
       line-height: 1.75rem;
    }
    footer h6 {
        font-size: 0.875rem;
        line-height: 1.3125rem;
    }
    .support {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
        
    }

    .contact a {
        font-size: 0.875rem;
        line-height: 1.3125rem;
    }


    .socials {
        gap: 0.375rem;
    }

    .socials-img {
        gap: 0.5rem;
    }

    .socials-img img {
        width: 1rem;
        height: 1rem;
    }

    .copyright{
        font-size: 0.875rem;
        line-height: 1.1rem; 
        margin-left: -3px;
    }
}