html{
    --main-primary: #cb6200;
    --main-secondary: #ffa24c;
    --text-contrast: #fff;
    --bg-contrast: #fff;
    --bg2-darker: #ddd;
    --main-text-color: #000;
    --button-color: #fe7a00;
    --footer-bg: #353535;
    font-family: Helvetica, Arial, sans-serif;
}

/* GENERAL */
body{
    margin:0;
    background-image: linear-gradient(var(--main-primary), var(--main-secondary));
}

a{
    text-decoration: none;
    display:block;
}

main a:visited, footer a:visited{
    color:blue;
}

h2{
    font-size:2rem;
}

/* HEADER */
header{
    width:100%;
    justify-content: right;
    background-color: var(--bg2-darker);
    margin-bottom:0;
}

/* NAV */
nav {
    overflow: hidden;
    font-family: Arial;
    margin: auto 1em;
}

nav a {
    color: var(--main-text-color);
    text-align: center;
    text-decoration: none;
}

nav a, nav div{
    width:100%;
    padding: 0.2rem 0;
    border-bottom:1px solid black;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropbtn {
    color: var(--main-text-color);
    padding: 0.2rem;
    font-family: inherit;
    margin: 0;
    text-align: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg2-darker);
    min-width: 160px;
}

.dropdown-content a {
    float: none;
    color: var(--main-text-color);
    padding: 1em;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--bg2-darker);
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* MAIN */
main p, main h1, main h2, main h3{
    padding: 0 3rem;
}

main h1{
    margin-top:2em;
}

main h1~p:last-child{
    margin-bottom:6em;
}

section[id]{
    padding: 3em 0;
}

.title{
    margin-top:0;
    color:var(--text-contrast);
    background-image:url("../images/titleimg1.jpg");
    background-size:cover;
}

.title h1{
    font-size:2em;
}

.title p:last-of-type{
    margin-bottom:2em;
}

.title a{
    color:var(--text-contrast);
    background-color: var(--button-color);
    padding:.75em 1em;
    border-radius:5px;
    margin-top:2em;
}

#intro{
    margin-bottom:0;
    padding-bottom:3em;
}

#intro img{
    float:left;
    
    width:20em;
    margin: 0 7%;
}

#intro p{
    font-size:1.2em;
}

#intro h2{
    text-align: center;
}

#articles{
    padding:2.5em 0;
}

main{
    text-align: center;
}

ul {
    list-style-position: inside;
}

table{
    display:flex;
    justify-content: center;
}

#enquiries{
    background-color: var(--bg-contrast);
    text-align: center;
}

.enquiries-sub img{
    width:5em;
}

textarea{
    width:20em;
    height:7em;
    resize:none;
}

td img{
    width:2em;
}

#services{
    background-color:var(--bg-contrast);
}

#services h2{
    text-align:center;
}

.sub-services{
    display:block;
}

.sub-services *{
    text-align: center;
    justify-self: center;
}

.sub-services img{
    width: 80%;
    height:65%;
}

footer{
    text-align: center;
    background-color: var(--footer-bg);
    color:white;
    padding-top:0.5em;
    padding-bottom:1em;
}

@media screen and (min-width:800px){
    header{
        display:flex;
        justify-content: space-between;
    }

    a{
        display:inline;
    }

    nav{
        margin: auto 1em;
        display:flex;
        justify-content: space-between;
        width:100%
    }

    nav a{
        float: left;
        padding: 1em;
    }

    nav a, nav div{
        border-bottom:none;
        margin:auto;
    }

    .title{
        padding: 9em 0 9em 4em;
    }

    .sub-services{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .sub-services img{
        width:10em;
    }

    #enquiries{
        display:flex;
        justify-content: space-around;
    }
}

@media screen and (min-width:1080px){
    header{
        position:fixed;
    }

    #intro img{
        margin: 5em 5em 3em 6em;
    }

    #intro p{
        margin-right:10em;
    }

    #intro h2{
        margin-right:7em;
    }

    nav a, nav div{
        width:fit-content;
    }

    div a{
        text-align: left;
    }
}