/* -- -------------------------------------------------------footer -- */
.footer {
    background-image: url('/images/construction8.avif');
    background-size: cover;
    color: #ffffff;
    padding-bottom: 3vw;
    position: relative;
}

.footer-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1b252ff1;
    z-index: 6;
}

.footer ul {
    margin: 0;
}

.foo-top-info {
    list-style-type: none;
    display: grid;
    grid-template-columns: 33.5% 33% 33.5%;
    margin: 0;
    padding: 0;
    background-color: #2d4e9a49;
    position: relative;
    z-index: 7;
}

.foo-top-info h5 {
    font-size: 1.2vw;
    font-weight: 400;
    margin: 0;
}

.foo-top-info li {
    padding-block: 1.5vw;
    padding-inline: 3vw;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: left;
    gap: 1vw;
    border-bottom: 1.5px solid #ffffff6c;
}

.foo-info-icon {
    width: 2.4vw;
    background-color: #f51307;
    border-radius: 0.5vw;
    padding: 0.5vw;
}

.foo-email {
    border-left: 1.5px solid #ffffff6c;
    border-right: 1.5px solid #ffffff6c;
}

.foo-sec-two {
    padding-inline: 8vw;
    margin-top: 4vw;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    position: relative;
    z-index: 7;
}

.foo-vision img {
    width: 5vw;
    background-color: #ffffff69;
    border-radius: 50%;
}

.foo-vision p {
    font-size: 1.2vw;
    text-align: justify;
    word-break: keep-all;
}

.foo-useful-links,
.foo-internal-links {
    list-style-type: none;
}

.link-header {
    font-size: 1.6vw;
    font-weight: 600;
    padding: 0;
    margin-bottom: 2vw;
}

.link-items a {
    text-decoration: none;
    color: #ffffff;
    padding-bottom: 1.4vw;
    font-size: 1.2vw;
    display: block;
}

.foo-social h5 {
    margin: 0 0 2vw 0;
    font-size: 1.6vw;
    font-weight: 600;
    padding: 0;
}

.social-links a {
    text-decoration: none;
    color: #ffffff;
}

.foo-so-icon {
    width: 1.5vw;
    padding: 1vw;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(245, 19, 7, 1) 0%, rgba(42, 123, 155, 1) 73%);
}


.social-links {
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;
}

.app-link {
    padding-top: 2vw;
}

.app-link a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.app-link img {
    width: 11vw;
    margin: 0;
    padding: 0;
}

.foo-copy {
    position: relative;
    background-color: #0f2027;
    padding-block: 1.5vw;
    text-align: center;
    color: #ffffffda;
    display: grid;
    grid-template-columns: auto;
    justify-content: center;
    align-items: center;
}

.foo-copy code {
    font-size: 1vw;
}

.last-hr {
    position: absolute;
    margin: 0;
    top: -0.1vw;
    left: 2.5vw;
    right: 2.5vw;
    height: 0.1vw;
    border: none;
    background-color: #2d4e9a50;
    z-index: 55;
}

/* ---------------------------------------------------- screen 800--------  */
@media screen and (max-width: 800px) {

    /* -- ------------------------------------------------footer 800-- */

    .foo-top-info {
        grid-template-columns: auto;
    }

    .line-breaker {
        display: none;
    }

    .foo-top-info h5 {
        font-size: 2.2vw;
    }

    .foo-top-info li {
        padding-block: 2vw;
        padding-inline: 8vw;
        gap: 2vw;
    }

    .foo-email {
        border-left: none;
        border-right: none;
    }

    .foo-sec-two {
        margin-top: 4vw;
        grid-template-columns: auto auto auto;
        justify-content: space-between;
        gap: 2vw;
    }

    .foo-vision {
        display: none;
    }

    .foo-useful-links,
    .foo-internal-links {
        padding: 0;
    }

    .link-header {
        font-size: 2.6vw;
    }

    .link-items a {
        padding-bottom: 1.4vw;
        font-size: 2vw;
    }

    .foo-social h5 {
        font-size: 2.6vw;
    }

    .foo-so-icon {
        width: 3vw;
    }

    .social-links {
        gap: 1vw;
    }

    .app-link img {
        width: 15vw;
    }

    .foo-copy code {
        font-size: 1.8vw;
    }
}

/* ---------------------------------------------------- screen 500--------  */
@media screen and (max-width: 500px) {

    /* -- ------------------------------------------------footer 500-- */

    .foo-top-info h5 {
        font-size: 4vw;
    }

    .foo-top-info li {
        padding-block: none;
        height: 15vw;
    }

    .foo-info-icon {
        width: 8vw;
    }

    .foo-sec-two {
        margin-top: 8vw;
        grid-template-columns: auto;
        justify-content: unset;
        gap: 4vw;
    }

    .foo-vision {
        display: block;
    }

    .foo-vision img {
        width: 18vw;
    }

    .foo-vision p {
        font-size: 4vw;
    }

    .link-header {
        font-size: 6vw;
    }

    .link-items a {
        padding-bottom: 2vw;
        font-size: 4vw;
    }

    .foo-social h5 {
        /* margin: 0 0 2vw 0;*/
        font-size: 6vw;
    }

    .foo-so-icon {
        width: 8vw;
    }

    .social-links {
        gap: 1vw;
    }

    .app-link {
        padding-top: 5vw;
    }

    .app-link img {
        width: 28vw;
    }

    .foo-copy code {
        font-size: 2.1vw;
    }
}