@font-face {
    font-family: "Lato";
    src: url("./fonts/Lato-Regular.ttf");
}

*, *::before, *::after{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-size: 62.5%;
    font-family: "Lato", sans-serif;
}

body{
    width: 100%;
    overflow-x: hidden;
}

.nolink{
    text-decoration: none;
    color: inherit;
}

nav{
    height: 14rem;
    width: 100%;
    display: flex;
    background-color: white;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.nav-menu{
    font-size: 6rem;
    cursor: pointer;
}

.nav-menu a{
    border-radius: 0.5rem;
    transition: 0.05s all;
}

.nav-menu a:hover{
    border-top: 0.5rem solid rgb(255, 166, 0);
    border-bottom: 0.5rem solid rgb(255, 166, 0);
    color: rgb(255, 166, 0);
}

.nav-logo{
    height: 85%;
}

.nav-logo img{
    height: 100%;
}

header{
    word-break: break-all;
}

footer{
    width: 100%;
    height: 14rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.footer-logo{
    height: 70%;
}

.footer-logo img{
    height: 100%;
    width: auto;
}

footer p{
    font-size: 2rem;
}

footer ul{
    list-style-type: none;
    display: flex;
    align-items: center;
}

footer li{
    font-size: 2rem;
    display: inline-block;
    margin-right: 1rem;
}

.graysmalltext{
    color: gray;
    font-size: 1.6rem;
    margin: 1rem 0;
}

.nadolea{
    font-size: 2rem;
    color: black;
    cursor: pointer;
    text-decoration: none;
}

.nadolea:visited, .nadolea:active{
    color: black;
}

#welcome{
    background-image: url("./imgs/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    height: 40rem;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
}

#welcome h1{
    font-size: 8rem;
    color: white;
    text-shadow: 2px 4px 5px rgba(0, 0, 0, .2), 3px 8px 5px rgba(0, 0, 0, .2), 4px 10px 5px rgba(0, 0, 0, .2), 5px 12px 5px rgba(0, 0, 0, .2), 6px 14px 5px rgba(0, 0, 0, .2);
}

#welcome h2{
    font-size: 6rem;
    text-shadow: -1px -1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(255,255,255,.5);
}

#ourcompany{
    width: 80%;
    margin: 2rem auto;
    border-bottom: 2px solid gray;
    text-align: center;
}

#ourcompany p{
    font-size: 3rem;
    color: black;
    margin: 2rem;
}

#faq{
    width: 100%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
}

.halfbox{
    width: 50%;
    height: 40rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.halfbox img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 70%;
}

.halfbox h5{
    font-size: 5rem;
    margin: 5rem;
}

.halfbox p{
    font-size: 2rem;
    margin: 0 2rem 2rem 2rem;
}

.halfbox ol{
    margin: 0 2rem 2rem 2rem;
}

.halfbox li{
    display: block;
    font-size: 2rem;
}

#contact{
    width: 80%;
    margin: 5rem auto;
    display: flex;
    flex-flow: row nowrap;
}

#contact div{
    width: 50%;
}

#contact h4{
    font-size: 5rem;
}

#contact div img{
    width: 80%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#contact h5{
    font-size: 3rem;
}

.contact-map{
    width: 100%;
    margin: auto;
    text-align: center;
}

.pc{
    display: block;
}

.mobile{
    display: none;
}

@media screen and (max-width: 768px){
    :root{
        font-size: 50%;
    }

    nav{
        flex-flow: column nowrap;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        height: 30rem;
        display: block;
        position: static;
    }

    .nav-logo{
        text-align: center;
        height: 40%;
    }

    .nav-menu{
        margin-top: 2rem;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .nav-menu a{
        display: block;
    }

    #contact{
        width: 90%;
        flex-direction: column;
    }

    #contact div{
        width: 100%;
        text-align: center;
    }

    #contact div img{
        width: 100%;
        margin: 2rem 0;
    }

    footer{
        margin: 2rem 0;
        flex-flow: row wrap;
        justify-content: center;
    }

    footer ul{
        justify-content: center;
    }

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

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

    .halfbox{
        width: 100%;
    }

    .pc{
        display: none;
    }

    .mobile{
        display: block;
    }
}