@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

@font-face {
    font-family: 'Abuget';
    src: url('../assets/fonts/Abuget.ttf');
}

*,
*::after,
*::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:focus {
    outline-color: #2dacef;
}

img, input, select, label, button {
    max-width: 100%;
}

/* navigation */
.nav {
    height: 55px;
    background-color: #323942;
    display: flex;
    align-items: center;
}


/* global section max-width to 1000px */
.article, .width-limit {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}

.footer {
    background: #16546d;
    color: #fff;
    padding: 0 20px 82px;
}

.footer .article {
    display: flex;
}

.adress {
    /* border: 1px solid red; */
    width: 300px;
    max-width: 100%;
}

.adress__paras p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}

.adress__paras {
    padding-left: 42px;
    position: relative;
}

.adress__paras::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0px;
    width: 23px;
    height: 24px;
    background: url('../assets/images/location.png');
}

.contact p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.contact .phone {
    font-weight: 400;
    font-size: 24px;
    padding-left: 33px;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.contact .phone::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 24px;
    height: 24px;
    background: url('../assets/images/phone.png');
}

.contact {
    /* border: 1px solid black; */
    width: 30vw;
}

.footer-header {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 20px 0;
}

@media(max-width: 1000px) {
    .footer {
        padding: 48px 0;
    }
 }

 @media (max-width: 767px) {

    .adress,
    .contact {
        width: 40vw;
        margin: 0 auto;
    }
}

@media (max-width: 510px) {
    .footer .article {
        flex-direction: column;
    }

    .footer-header {
        width: 100%;
        text-align: center;
    }

    .adress,
    .contact {
        width: 100vw;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .adress .footer-header {
        padding-top: 0;
    }

    .adress__paras {
        margin-left: -65px;
    }
}