/* reset code */
/* Developer:Umesh*/
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    transition: background .3s ease-in-out;
}
body{
    -webkit-font-smoothing: antialiased;
    font-family: 'Nunito', sans-serif;
    background:var(--primary);
    color:var(--fontcolor);    
}
/* colors */
.theme-light{
--primary:#fff;
--secondary:whitesmoke;
--accent:#54c75b;
--fontcolor:black;
--pure:white;
}
.theme-dark{
    --primary:#121212;
    --secondary:#0b0b0b;
    --accent:#54c75b;
    --fontcolor:#fff;
    --pure:#fff;
    }
    .theme-ocean{
        --primary:#252c35;
        --secondary:#20272e;
        --accent:#54c75b;
        --fontcolor:#fff;
        --pure:#fff;
        }
        .theme-sepia{
            --primary:#fbf1c7;
            --secondary:#eadfb5;
            --accent:#704214;
            --fontcolor:#704214;
            --pure:#fff;
            }
.container{
    width:1192px;
    max-width:90%;
    margin:0 auto;
}
nav{
    display: flex;
    align-items:center;
    justify-content:space-between;
    padding:1.6rem 0;  /* for body block we use padding */
   
}
nav .branding{
    font-weight:700;
    font-size:1.2rem;
    text-transform:uppercase;
    color:var(--accent);
}
nav ul{
    list-style:none;
    
}
nav ul li{
    display:inline-block;
    margin-left:1rem; /*for single element we use margin*/
   
}
nav ul li a{
    text-decoration:none;
    font-weight:700;
    color:var(--fontcolor);
    text-transform:uppercase;
}
nav ul select{
    display:inline-block;
    height:30px;
    width:150px;
    padding:2px 10px;
    margin-left:1rem;
    outline:none;
    color:var(--fontcolor);
    border:none;
    background:var(--secondary);
    border-radius:4px;
}

header{
    display:grid;
    align-items:center;
    grid-template-columns:2fr 3fr;
}
header .hero-img img{
    width:100%;
    position:relative;
    top:70px;
    right:-114px;
}
header h1{
    font-size:3rem;
    line-height:1;
    font-weight:700;
}
header p{
    font-size:1.5rem;
    width:70%;
    margin-top:1rem;
}
header button{
    background:var(--accent);
    color:var(--pure);
    border:none;
    padding:0.6rem 1rem;
    border-radius:50px;
    outline:none;
    cursor: pointer;
    margin-top:1rem;
    text-transform:uppercase;
}

section div.empty{
background:var(--secondary);
padding:2rem;
height:400px;
width:100%;
}

footer h2 {
    text-align:center;
  
}
footer a{
    text-decoration:none;
    color:var(--accent);
}