/** HOME PAGE STYLING**/

html 
  {
    scroll-behavior: smooth;
    --white:#ffffff;
    --gray:#58595B;
    --orange:#F99B1C;
    --darkgray:#2f302f;
  }

body 
  {
    font-family: 'Montserrat', sans-serif;
    font-size: 110%;
  }

/** top information above header **/
.breadcrumb
  {
    background-color: #dba307;
    border-radius:0;
    height: 40px;
    padding: 12px;
  }
.breadcrumb-item.active 
  {
    color:var(--white);
    font-weight: 200;
    font-size: 12px;
  }

.breadcrumb-item + .breadcrumb-item::before 
  {
    display: inline-block;
    padding-right: .5rem;
    color: var(--white);
    content: "|";
  }
span
  {
    font-size:20px;
    margin-top: -4px;
    margin-right: 5px; 
  }



/** Header ---------------------------------------- **/
.bg-info 
  {
    background-color:white !important;
    box-shadow: 
       inset 
             0 0  0 2px rgb(255,255,255),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
    }


/** Logo Image **/
a img
   {
    height: 58px;
    width: 180px;
   }

/** menu items **/
.navbar-nav a 
   {
   margin-left: 60px;       
   }

.navbar-dark .navbar-nav .nav-link 
   {
    color:#080652;
   }


.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover 
   {
    color:#dba307;
   }

.navbar-dark .navbar-toggler 
   {
    color:#080652;
    border-color:#080652;
   }

.navbar-dark span
  {
    font-size:30px;
    padding: 10px;
  
  }

.navbar-dark>.navbar-toggler-icon
    {
  
         display: none;
        color: #080652;
     }



/** Banner section--------------------------------**/
.jumbotron 
  {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-image: url(../images/jh-banner1.jpg);
    border-radius:0;
    color: white;
  }

 .jumbotron p
  {
    text-align: center;
     line-height: 1.8;;
  }
.btn-primary 
  {
    background-color: #dba307;
    border-color:#dba307;
    margin-top: 10vh;
  }

.btn-primary:hover 
  {
   background-color: #080652;
   border-color:#080652;
  }


/** big text styles for headings with underline**/
.display-3 
  {
    font-size: 2.2rem;
    font-weight: 500;
    line-height:1.2;
    text-align: center;
    position: relative;
    float: center;
    clear: center;
    padding: 15px;
    margin-top: -90px;
  }
.display-3:after 
  {
  content: "";
  position: absolute;
  border-top: 4px solid #dba307;
  left: 43%;
  bottom: 0;
  width: 14%;
  height: 0px;
  }

.display-4 
  {
    font-size: 1.9rem;
    font-weight: 600;
    line-height:1.2;
    position: relative;
    text-align: center;
    float: center;
    clear: center;
    padding: 15px;
    color: var(--darkgray);
  }
.display-4:after 
  {
  content: "";
  position: absolute;
  border-top: 4px solid #dba307;
  left: 43%;
  bottom: 0;
  width: 14%;
  height: 0px;
  } 

/** ABOUT SECTION IMAGE**/
.image
  {
    text-align: center;
  }
.image img
   {
    height: 300px;
    width: 300px;
    text-align: center;
   }

.ul-style 
 {
  margin: 0;
  padding: 0;
 }
.ul-style li 
  {
    list-style: none; 
    color: var(--darkgray);
    line-height: 20px;
    font-weight: 200;
    font-size: 80%;
   }
.ul-style li span 
   {
      color: #dba307;
      margin-right: 20px; 
   }



/* SERVICES SECTION-------------------------------*/


.services
  {
    background-image: url(../images/service-banner.jpg);
    margin-top: 30px;
    text-align: center;
    color: white;
    width: 100%;
  }
.services .row
  {
    margin-left: 10px;
    margin-right: 10px;
  }
 .services .row .col-sm i
  {
     padding-top: 80px;
     font-size:60px;
     color:#F99B1C;
     padding-bottom: 30px;
  }

.services .row .col-sm i:hover
  {
    color: white;
  }

.services h1
  {
    font-size: 130%;
    line-height: 100%;
    font-weight: 400;
    color: white;
  }
.services p
  {
    color: white;
    line-height: 20px;
    font-weight: 200;
    font-size: 90%;
  }

/** big text styles for headings with underline**/
.services .display-4 
  {
    font-size: 1.9rem;
    font-weight: 600;
    line-height:1.2;
    position: relative;
    text-align: center;
    float: center;
    clear: center;
    padding: 15px;
  }
.services .display-4:after 
  {
  content: "";
  position: absolute;
  border-top: 4px solid #dba307;
  left: 43%;
  bottom: 0;
  width: 14%;
  height: 0px;
  }


/*WORK SECTION ---------------------------------*/
.work 
   {
    width: 100%;
    background-color: white;
    padding-bottom: 100px;
    color: var(--darkgray);
   }

.work .row
  {
    margin-left: 10px;
    margin-right: 10px;
  }


/*FOOTER SECTION ----------------------------------*/
footer 
  {
    background-color: var(--darkgray);
    color: white;
    width: 100%;
    padding-top: 50px;
  }

footer img
  {
    width: 170px;
    height: 53px;
  }
footer .row
  {
    margin-left: 20px;
    margin-right: 20px;
  }

footer h1 
  {
    font-size: 130%;
    line-height: 100%;
    font-weight: 400;
    color: white;
    padding-top: 20px;
 
  }
footer a
  {
    color: #fff;
    text-decoration: none;
  }
footer a:hover
  {
    color: #dba307;
    text-decoration: none;
  }

  footer .ul-style li 
  {
    list-style: none; 
    color: white;
    line-height: 20px;
    font-weight: 200;
    font-size: 80%;
    padding-top: 10px;
  }

/**UPARROW--------- **/
footer .uparrow
   {
    font-size: 400%;
    margin: 2rem 0;
    float: right;
    right: 0;
   }

.uparrow:hover
  {
    color: #dba307;
  }



/** MEDIA QUERIES --------------------------------**/
@media (min-width: 576px) 
   {
    .jumbotron 
       {
        padding:4rem 2rem;
        padding-top: 40vh;
       }
   }

@media screen and (max-width: 900px )
  {
 
    .breadcrumb
       {
        height: auto;
       }
    .navbar-nav a 
       {
        text-align: right;
       }
    .services .row .col-sm i
      {
       padding-top: 20px;
       font-size:60px;
       color:#F99B1C;
       padding-bottom: 10px;
      }
    .display-3
      {
        margin-top: 50%;
      }
    .image img
      {
       height: 250px;
       width: 250px;
      }
  }

@media screen and (max-width: 800px ) 
   {
 
    
    .display-3
       {
        margin-top: 2%;
       }
    }


@media screen and (max-width: 414px ) 
{

     .items 
    {
    
       flex-basis: 50%;
    }
     .display-3
    {
        margin-top: 50%;
    }
}


@media screen and (max-width: 1024px )
{
     .navbar-nav a 
       {
         margin-left: 20px;
       
       }
}

#about, #services, #work 
    {
    margin: 3em 0;
    }