/*CSS for all the elements*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    --dark: #2d4059;
    --light: #7bcecc;
    --background:#fbfbfb;
}
body{
    background-color: var(--background);
}
/*Header */
header{
    background-color: var(--dark);
    width: 100%;
    display: flex;
    justify-content: space-between;
  
}
#title, #subtitle{
    padding: 5px;
    margin: 10px;
    margin-left: 0;
    background:var(--light);
    text-align: center;
    color: var(--dark);
    padding-left: 50px;
}

.main-menu{
 display: flex;
 text-align: center;
 justify-content:right;
 
}


.main-menu > li {
   font-size: 20px;   
    list-style-type: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 10px;
    margin: 10px;
    color: var(--light);
    
}
a:link{
    text-decoration: none; 
    color: var(--light);
}
/*Adding pseudo class to avoid the blue/purple color on the visited links*/
a:visited { 
    text-decoration: none; 
    color: var(--light);
}
a:before{
    text-decoration: none; 
    color: var(--light);
}

.hero-banner{
    height: 200px;
    width: 100%;
    margin-bottom: 25px;
    background-image:url("../images/Hero-banner.jpg");
    background-size: cover;
    background-position: center;
}
#subtitle{
    display: flex;
    margin-right: 0;
    padding: 10px;
    justify-content: right;
    float: right;
    position: absolute;
    top: 180px;
    right: 16px;
}

.page-section{
    color:#2d4059;
    background-color: var(--background);
    
}

.page-headings{
    display: flex;
    float: left;
    margin-left: 50px;
    font-size: 40px;
   text-align: right;
   color: var(--dark);
   background-color: var(--background);
   
}
.container{
    margin-left: 220px;
    padding: 40px;
    margin-bottom: 80px;
     font-family: Helvetica, sans-serif;
     color:var(--dark);
     font-size: 1.5em;
     border: 1px solid var(--background);;
     border-left: var(--dark) solid 5px;
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
     
    
}


  
.container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  
 
}
.myImage
{
    float: left;
    padding: 10px;
    margin-right: 20px;
    border: 2px solid var(--light);
}
article{
    padding: 10px;
}
.projects{
    margin: 30px 10px;
    width: 45%;
    flex-direction: row;
    
}
.projects1
{
    margin: 30px 10px;
    width: 45%;
    flex-direction: row;
    flex-basis: 98%;
}
.proj1{
   
    height: 400px;
    flex-basis: 100%;
    width: 94%;
    border: 5px solid var(--light);
    background-repeat: no-repeat;
    background-image: url(../images/Proj1.jpg);  
    opacity: 0.8;
    

}
.proj2{
    height: 150px;
   
    border: 5px solid var(--light);
    background-repeat: no-repeat;
    background-image: url(../images/curate1.JPG);  
    opacity: 0.8;
   
}
.proj3{
    height: 150px;
    border: 5px solid var(--light);
    background-repeat: no-repeat;
    background-image: url(../images/sarapp.JPG);  
    opacity: 0.8;
}
.proj4{
    height: 150px;
    border: 5px solid var(--light);
    background-repeat: no-repeat;
    background-image: url(../images/Proj4.jpg); 
    opacity: 0.8; 

}
.proj5{
    height: 150px;
    border: 5px solid var(--light);
    background-repeat: no-repeat;
    background-image: url(../images/Proj5.jpg);  
    opacity: 0.8;
}
.projects :hover{
    opacity: 1;
    

}
.projects1 :hover{
    opacity: 1;
}

/*
.project2{
    background-image: url(../images/Proj2.jpg);
    height: 150px;
    width: 50%;
   
    border: 8px solid #7bcecc;

}*/

h3{
    display: flex;
    margin-right: 0;
    padding: 10px;
    justify-content: flex-start;
    position: relative;
    border: 8px solid var(--light);
    background: var(--light);
    padding: 10px;
    float: left;
    margin-top: 45px;
    margin-bottom: 20px;
    color: var(--dark);
    
}

.heading1{
    margin-top: 250px;
}

.contact > ul
{
    text-align: left;
    display: flex;
    float: inline-start;
    justify-content: space-evenly;
    color: var(--dark);
    background-color: var(--background);
}
.contact-details > li {
    list-style-type: none;
    display: inline;
    margin-left: 25px;
    color: var(--dark);
    text-decoration: underline;
    list-style-type: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.links > a  {
    color: var(--dark);
}
.links > a :before{
    text-decoration: none; 
    color: var(--dark);

}
.links > a :visited { 
text-decoration: none; 
color: var(--dark);
}

a {
    box-shadow: inset 0 0 0 0 var(--light);
    color:#7bcecc;
    
    transition: color .4s ease-in-out, box-shadow .4s ease-in-out;
  }
  a:hover {
    box-shadow: inset 500px 0 0 0  var(--light);
    color:var(--dark);
  }

@media screen and (max-width: 776px) {
    header {
      flex-direction: column;
    }
  
    .page-headings{
        flex-direction: column;
        justify-content: center;
    }
    .container .projects .contact-details{
        flex-direction: column;
        justify-content: center;
        
    }
    .page-section
    {
        flex-direction: column;
        flex: 0 0 48%;
        max-width: 48%;
    }
   
    body{
        max-width: 776px;
    }
    .projects{
        flex: 0 0 48%;
        max-width: 48%;
    }
    .projects1
    {
        flex: 0 0 48%;
         max-width: 48%;
    }
  }

@media screen and (max-width: 576px) {
    header {
      flex-direction: column;
    }
    .page-headings{
        flex-direction: column;
        justify-content: center;
    }
    .container .projects .contact-details .proj1{
        flex-direction: column;
        justify-content: center;
    }
    .test{
        flex-direction: column;
        justify-content: center;
    }
    body {
      max-width: 576px;
    }
    .projects{
        flex: 0 0 48%;
        max-width: 48%;
    }
    .projects1
    {
        flex: 0 0 48%;
         max-width: 48%;
    }
  }