*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: Roboto
}

html{
    /*background-color: #324376; */
    font-family: Roboto;
    background: linear-gradient(157deg, rgba(255,255,255,1) 0%, rgba(193,193,193,1) 100%);
}

body{
    padding: 1rem 0rem 0rem 0rem;
    margin: 1rem 0rem 0rem 0rem;

}

.main{
    display: flex;
    align-items: flex-end;
}

.logo{
    width:70px;
    padding-right: 1rem;
}

.header{
    margin-right: 1rem;
    display: flex;
    margin-bottom: 2rem;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
}

.header h1{
    color: #f5dd90;
    text-wrap: nowrap;
    margin-left: 0rem;
    font-weight: 800;
}
.header h1 span{
    color: #324376;
    font-weight: 300;
}
.header ul{
    display:flex;
    list-style: none;
}

.header ul li a{
    color:black;
    cursor: pointer;
    margin: 0rem 1rem;
    text-decoration: none;
}

.header ul li:hover{
    text-decoration: underline;
}

.hero{
    padding:0rem 1rem;
    background-image: url(local/heroimg1.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 400px;
    width:100%;
}

.heroText{
    font-size: 1rem;
    user-select: none;
    color: antiquewhite;
    flex:1;
    height:auto;
    padding:1rem;
    margin:1rem;
    background-color: rgba(0, 0, 0, .6);
}
.cta{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.heroBtn{
    color:black;
}

.cta button{
    font-size: 25px;
    font-weight: 600;
    width:200px;
    height:75px;
    cursor: pointer;
    padding:.5rem;
    border: solid 2px #f5dd90;
    border-radius: 5px;
    background-color: #f5dd90;
}
.cta button:hover{
    background-color: aliceblue;
    color:#f5dd90;
}

.contactdetails{
    margin: 1rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contactdetails div{
    margin:1rem 0rem;
}

.contact ul{
    list-style: none;
}
.contact span{
    font-weight: 700;
}
.services{
    margin: 5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.stop{
    color:aliceblue
}

.services h1{
    font-size: 42px;
    margin-bottom: 1rem;
}

.services img{
    margin:1rem 0;
    width:75%;
}
.opening-hours{
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    width:100%;
    padding:2rem;
    margin-right:1rem;
}

.contact{
    padding: .5rem;
    background-color: #324376;
    color:aliceblue;
}
.contactdetails{
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
}

.copyright{
    display: flex;
    font-weight: 200;
    justify-content: center;
}

.copyright a{
    font-size: 0.75rem;
    text-decoration: none;
    color:aliceblue;
}


@media screen and (max-width: 750px){
    .main{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .header{
        flex-direction: column;
        margin: 1rem 1rem;
    }
    .header h1{
        font-size: 25px;
        padding-top:1rem;
        padding-bottom: 2rem;
    }

    .hero{
        flex-direction: column;
        padding:2rem;
        justify-content: center;
    }
    .heroText{
        flex:1;
        margin-bottom: 1rem;
    }
    .cta{
        flex:3;
    }
    .contactdetails{
        width:100vw;
        align-items: flex-start;
        justify-content: center;
        padding: 0rem;
    }
}