@font-face {
    font-family: 'Poppins';
    src: url('./../utils/fonts/Poppins-Regular.woff2') format('woff2'),
         url('./../utils/fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('./../utils/fonts/Poppins-Bold.woff2') format('woff2'),
         url('./../utils/fonts/Poppins-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
  }

body {
    margin: 0;
    padding: 0;
    background: #f4f4f4;
    font-family: "Poppins", Helvetica, Arial;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 100%;
}

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 50px);
}

.logo-box {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 50%;
    height: 33vh;
    position: relative;
}

h3 {
    font-size: 24px;
    color: #333;
    float: left;
    margin-right: 15px;
    padding-top: 0px;
    margin-top: 0px;
}

.contact-box {
    padding-left: 15px;
    float: left;
    width: 50%;
    min-height: 33vh;
    border-left: 1px solid #303030;
    padding-top: 24px;
    padding-bottom: 24px;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    color: #fff;
    background-color: #303030;
}

.footer a {
    color: #fff
}

h2 {
    font-family: 'Poppins';
    color: #303030;
    font-size: 24px;
    margin-bottom: 5px !important;
    margin-top: 0px !important;
}

li {
    list-style-type: none;
    padding: 2px;
}

h4 {
    font-weight: light;
    margin-top: 5px !important;
}

a {
    text-decoration: none;
    color: #303030;
}

i {
    color: #303030;
    padding-right: 10px;
}

img {
    float: right;
    padding-right: 15px;
}

@media  screen and (max-width: 980px), 
        screen and (max-height: 450px) {
    body{
        overflow-y: auto;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100vh - 50px);
        margin-left: 10%;
        margin-right: 10%;
        align-items: center;

    }

    .logo-box {
        margin-top: 24px;
        height: auto;
        padding-bottom: 24px;
        justify-content: center;
    }

    .contact-box {
        padding-top: 15px;
        float: none;
        min-height: 33vh;
        border-top: 1px solid #303030;
        border-left: none;
        width: auto;
        padding-top: 24px;
        padding-bottom: 24px;
        justify-content: center;
    }
}