:root {
    --footer-bg: #088355;
    --color: #f2f3fb;
    --color-smooth: #d1ffee;
    --input-border: #3a456a;
    --btn-bg-color: #f1f2fc;
    --btn-hover-bg: #d5d9f6;
    --btn-color: #1e2641;
}

footer {
    background: var(--footer-bg);
    align-items: start;
    justify-content: center;
    gap: 1em;
    font-family: "IBM Plex Sans", sans-serif;
}

    footer ul {
        list-style: none;
        padding-left:0px !important;
    }

.col {
    flex: 1;
}

.col-title {
    font-family: "Merriweather", serif;
    color: var(--color);
    font-size: 20px;
    font-weight: bold;
    /*padding: 0.5em 0;*/
}

.col-list a {
    color: #d1ffee;
    text-decoration: none;
    line-height: 1.4;
    font-weight: 400;
}

    .col-list a:hover,
    .col-list a:focus {
        text-decoration: underline;
    }

.subscribe-form,
.social-media {
    display: flex;
    gap: 0.5em;
    padding: 0.5em 0;
}

.subscribe-input {
    width: auto;
    flex: 1;
    background: transparent;
    border: 0.06em solid var(--input-border);
    font-size: 1em;
    font-weight: 500;
    padding: 0.5em;
    border-radius: 0.3em;
    transition: all 0.25s ease 0s;
    display: inline-block;
    color: var(--color-smooth);
}

    .subscribe-input:focus {
        outline: none;
        border-color: var(--color);
        color: var(--color);
    }

.subscribe-btn {
    background: var(--btn-bg-color);
    border: none;
    font-size: 1em;
    font-weight: 600;
    padding: 0.5em;
    border-radius: 0.3em;
    transition: all 0.25s ease 0s;
    display: inline-block;
    color: var(--btn-color);
    cursor: pointer;
}

    .subscribe-btn:hover,
    .subscribe-btn:focus {
        background: var(--btn-hover-bg);
    }

.form-title,
.social-col-title {
    font-size: 1em;
    color: var(--color);
    font-weight: 500;
}

.social-media {
    flex-direction: column;
}

.social-media-list {
    display: flex;
    gap: 0.5rem;
}

    .social-media-list a {
        padding: 0.5em;
        color: var(--color-smooth);
        display: flex;
        border-radius: 0.3em;
        transition: all 0.25s ease 0s;
    }

        .social-media-list a:hover,
        .social-media-list a:focus {
            color: var(--color);
            background: #ffffff1a;
        }

    .social-media-list svg {
        width: 1.5em;
        height: 1.5em;
        transition: all 0.25s ease 0s;
    }
.navlist {
    background: none !important;
}

@media screen and (max-width: 750px) {
    footer {
        padding: 2em;
        flex-direction: column;
    }
}