:root {
    --title-color: #141313;
    --text-color: #777777;
    --border-color: #201f1f17;
    --gradient-color: linear-gradient(90deg, #4458dc 0%, #854fee 100%);
    --shadow-color: 0px 10px 30px rgba(1, 1, 2, 0.3);
    --box-shadow: 0px 10px 30px rgba(57, 56, 61, 0.205);
    --primary1-color:#f2f2f2;
    --primary2-color:#f96d00;
    --primary3-color:#393e46;
    --primary4-color:#222831;
}
footer {
    font-family: 'Raleway';
    width: 100%;
    margin: auto;
    background-color: rgb(54, 54, 54);
    text-align: center;
}
body,p,h1,h2,h3,h4,h5,h6{
    font-family: 'Raleway';
}
.inner-footer {
    width: 80%;
    margin: auto;
}

.social-media a {
    color: rgb(53, 202, 53);
    padding: 10px;
}

.social-media i {
    font-size: 25px;
    margin-top: 13px;
    margin-bottom: 0px;
}

.social-media i:hover {
    color: white;
    transform: scale(1.2);
}

.footer-items {
    color: white;
    width: 80%;
    display: block;
    padding: 20px 10px;
    margin: auto;
    box-sizing: border-box;
}

.section-box {
    flex-basis: 15%;
    display: flex;
    flex-direction: column;
    padding: 0.5em 0px;
}

@media(min-width:600px) {
    .footer-items {
        color: white;
        width: 80%;
        display: flex;
        padding: 15px 10px;
        margin: auto;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: space-around;
    }
    .section-box {
        flex-basis: 30%;
        display: flex;
        flex-direction: column;
    }
}

.section-box h5 {
    color: rgb(226, 226, 226);
    font-size: 20px;
}

.section-box a {
    font-size: 16px;
    padding: 0.1em;
    text-decoration: none !important;
    color: rgb(170, 170, 170);
}

.section-box a:hover {
    color: white;
}

.section-box p {
    color: rgb(170, 170, 170);
    font-size: 14px;
}

.bottom-footer {
    width: 100%;
    margin: auto;
    color: white;
    background-color: var(--primary3-color);
    font-size: 13px;
    padding: 6px;
}

.bottom-container {
    width: 80%;
    margin: auto;
}

.bottom-footer p {
    font-size: 16px;
    padding: 2px;
}

.bottom-footer a {
    color: white;
}

.bottom-footer a:hover {
    color: black;
}