html{
    background-image: url(images/bg800bulbs.jpg);
}

body{
    background-color: rgb(255, 255, 255);
    max-width: 80dvw;
    margin: 2em auto 2em auto;
    border-radius: 10px;
    box-shadow: 0px -1px 20px 0 black, 0px 6px 20px 0 black;
    padding: 1em;
}

/* -----------   navigation  --------------*/
header {
    display: flex;
    align-items: center;
    margin: 1em auto 0 auto;
    justify-content: space-evenly;
}

div.nav-logo {
    display: flex;
    align-items: center;  
}

p.noto{
    margin-right:4em;
    font-family: "Roboto", serif;
    font-weight: 200;
    font-style: normal;
    font-size: 1.5rem;
}

.nav-logo img{
    width:20%;
    margin: 1em;
}

.nav-logo ul{
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    margin-left: 8em;
    font-family: Arial, Helvetica, sans-serif;
}

.nav-logo a{
    margin-right: 2em;
    text-decoration: none;
    color: rgb(34, 33, 33);
}

.nav-logo a:hover{
    color: brown;
}


/*  ------------  banner  ----------------*/
.banner img{
    display: block;
    width: 80dvw;
    margin-left: auto;
    margin-right: auto;
}
    
h1.headline {
    text-align: center;
    margin: 1em auto 0 auto;
    font-family: "Roboto", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2.3rem;
}

.banner p{
    width: 80dvw;
    margin: 1em auto 3em auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    padding-right: 1em;
}

.banner hr{
    border: 0.5px solid gray;
}

/* ------- 3 energy solutions ---------*/
section.energy{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 4em;
}

.energy div:after{
   content: "";
   display: block;
   clear: both;
}

.energy img{
    float: right;
    margin: 1em 0 1em 1em;
}

h2.subtile{
    margin-right: 1em;
    font-family: "Roboto", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5rem;
}
    
.energy p{
    text-align: left;
    padding-top:1em;
    padding-bottom: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

.energy hr{
    border: 0.5px solid gray;
}


/* ------------- About us ------------- */
.about-us{
   columns: 2;
   padding-top: 1em;
   gap: 2.5em;
   width: 90%;
   background-color: orange;
   border-radius: 10px;
   padding-top: 3em;
   padding-left: 2em;
   padding-right: 2em;
   padding-bottom: 4em;
   margin-left: auto;
   margin-right: auto;
}

h2.sub-about-us{
    column-span: all;
    font-family: "Roboto", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.5rem;
    margin-bottom: 0.7em;
    border-bottom: 1px dotted black;
}

.about-us p {
    padding-top: 1em;
    padding-bottom: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

.about-us hr{
    border: 1px dotted black;
}

/* --------- testimonials -----------*/
.testimonials {
    margin: 4em auto 4em auto;
}

h2.sub-testimonials{
    font-family: "Roboto", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.2rem;
    margin-bottom: 0.3em;
}

.testimonials p{
    font-family: Arial, Helvetica, sans-serif;
}

span.name-location{
    font-family: "Roboto", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
   
}
.testimonials div{
    margin: 1em auto 2em auto;
}

.testimonials div:after{
    content: "";
    display: block;
    clear: both;
}

.testimonials img{
    float: left;
    padding-right: 1em;
    border-left: 8px solid rgb(128, 241, 213);
}

.testimonials hr{
    border: 0.5px solid gray;
}


/* ------------- resources ----------*/

.resources {
   width: 90%;
   margin: 1em auto 1em auto;
   columns: 2;
   gap: 3em;
   background-color: orange;
   padding: 2em;
   line-height: 1.8em;
   border-radius: 10px;
}

.resources h2{
    column-span: all;
    padding-left: 0.7em;
    line-height: 1.8em;
    border-bottom: 1px dotted black;
    margin-bottom: 1em;
}

h3.topics{
    margin-left: 0.6em;
    font-family: "Roboto", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.1rem;
    border-bottom: 1px dotted black;

}

.resources p{
    padding-left: 1em;
    padding-bottom: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

.resources ul{
    padding:0.8em;
    list-style: outside;
    font-family: Arial, Helvetica, sans-serif;
}


/* ------------------links -------------*/
.links {
    width: 95%;
    margin: 3em auto 3em auto;
    
}

h3.link-title{
    text-align: center;
    margin: 0 auto 0 auto;
    font-family: "Roboto", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.1rem;
}

.links p{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-bottom: 3em;

}

h4.contact{
    padding-bottom: 1em;
    border-bottom: 1px solid gray;
    margin: 0 2em 0 2em;
    font-family: "Roboto", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.1rem;
}

.links li{
    font-family: Arial, Helvetica, sans-serif;
}


div.link-cards{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.link-cards article{
    flex: 1 1 30.33%;
    gap: 2em;
}

.link-cards ul{
    list-style-type: none;
    margin: 1em;
}

.links hr{
    border: 1px solid gray;
}

.right-border{
    border-right: 1px solid gray;
}




/* --------- footer --------*/

footer{ 
    margin: 3em auto 3em auto;
    width: 90%;
}

h4.footer{
    text-align: center;
    font-family: "Roboto", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.1rem;
}

footer ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1em;
   
}

footer li{
    padding-right:0.5em;
    padding-left: 0.5em;
    text-decoration: none;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
}

footer hr{
    border: 0.1px solid rgb(226, 225, 225);
    margin: 1em;
}

    
/* --------back to top -----------*/
a.top{
    width: 12em;
    display: block;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 10px;
    border: 1px solid gray;
    box-shadow: none;
    margin: 3em auto 3em auto;
    padding: 0.3em 3em 0.3em 3em;
    text-decoration: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}

a.top:hover{
    color: brown;
}