<!-- Background color of Logo #6cb5de -->

body {
    position: relative;
}

.active{
    font-weight: bold;
    /* font-style: italic; */
}
/* Put the transition into the original element */
.bg-light {
  background: transparent !important;
  transition: 1.5s ease;
}
/* Put the newly added styles in the newly defined class that gets toggled upon scroll of the page */
.bg-light.scrolled {
  background-color: #de966c !important;
  opacity: 0.9;
}

#nLogo {
  transition: 1.5s ease;
}

#nLogo.scrolled {
  transform: translatex(5px) scale(1.2);
}

.nav-link {
  transition: 1.5s ease;
}

.nav-link.scrolled {
  transform: translatex(5px) scale(1.1);
}

.navbar-collapse {
  transition: 1.5s ease;
}

.navbar-collapse.scrolled {
  transform: translatex(20px);
}

.jumbotron {
    text-align: center;
    /* margin-top: 60px; */
    background-color: #6cb5de;
}

#about {
    text-align: center;
}

#projectsTitle {
  text-align: center;
}

#projectsPara {
  text-align: center;
}

#featuredClient {
    text-align: center;
}

/* start css for picture scramble  */
/* Area lay out */
#area1 {
    grid-area: area1;
}

#area2 {
    grid-area: area2;
}
#area3 {
    grid-area: area3;
}
#area4 {
    grid-area: area4;
}
#area5 {
    grid-area: area5;
}
#area6 {
    grid-area: area6;
}
#area7 {
    grid-area: area7;
}
#area8 {
    grid-area: area8;
}
#area9 {
    grid-area: area9;
}

.grid-container {
    display: grid;
    grid-template-areas:
        'area1 area2 area3'
        'area4 area5 area6'
        'area7 area8 area9';
    grid-gap: 0px;
    background-color: #6cb5de;
    padding: 5px;
    width: 610px;
    height: 610px;
}

.grid-container > div {
    background-image: url("../images/JaybeeGroup_ScreenShot600x600.png");
    padding: 20px 0;
}

/* end css for picture scramble */

#email {
    width: 300px;
}

#footer {
    background-color: #6cb5de;
    height: 400px;
    text-align: center;
}
/* Button hover effect */
.btn2{
    cursor:pointer;
    position:relative;
    padding:10px 20px;
    width: 200px;
    height: 50px;
    background:blue;
    font-size:16px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    transition:all 2s;
}

.btn2:before, .btn2:after{
    content:" ";
    width:10px;
    height:10px;
    position:absolute;
    border :0px solid #fff;
    transition:all 1s;
}
.btn2:before{
    top:-1px;
    left:-1px;
    border-top: 5px solid white;
    border-left: 5px solid white;
}

.btn2:after{
    bottom:-1px;
    right:-1px;
    border-right: 5px solid white;
    border-bottom: 5px solid white;
}


.btn2:hover{
    background-color: white;
    color: blue;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.btn2:hover:before{
    width: 104%;
    height: 110%;
    border-top-left-radius: 10px;
    border-color: black;
}

.btn2:hover:after{
    width: 104%;
    height: 110%;
    border-bottom-right-radius: 10px;
    border-color: blue;
}
/* Button Hover Effect CSS end */