/* import fonts from fonts.css file */
@import url(./fonts.css);



/*css variables*/
@import url(./partials/_variables.css);


/*import global styling*/
@import url(./partials/_global.css);

a{
  text-decoration: none;
}

.navbar {
  background-color: rgb(0, 0, 0);
}



/*start contact area*/

.contact {


    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
  /*end contact area*/
  
  
  /*start services area*/
  
  .site-main .services-area {
    padding: 7rem 2rem;
  }
  
  .site-main .services-area .services-title {
    padding: 0 14rem;
  }
  
  .site-main .services-area .services-title h1 {
    font-size: 35px;
  
  }
  
  .site-main .services-area h5 {
    font-size: 20px;
    color: black;
  }
  
  
  .site-main .services-area .services {
    background: rgba(248, 252, 253, 0.973);
    padding: 2rem 0;
    width: 16rem;
    margin: 5rem .5rem;
    transition: box-shadow .7s ease;
  }
  
  .site-main .services-area .services:hover {
    box-shadow: var(--box-shadow);
  }
  
  
  
  
  /*end services area*/
  
  
  /*start project area*/
  
  .site-main .project-area {
    padding: 4rem 0;
  }
  
  .site-main .project-area .button-group button {
    background: transparent;
    border: none;
    font: normal 500 16px/130px var(--roboto);
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding-left: 15px;
    color: #e20000;
  }
  
  .site-main .project-area .button-group button+button {
    padding-left: 3rem;
  }
  
  .site-main .project-area .grid .our-project .title h4 {
    font: normal 700 15px/12px var(--roboto);
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    padding-left: 15px;
  }
  .site-main .project-area .grid .our-project .title span{
    font: normal 700 15px/12px var(--roboto);
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    padding-left: 15px;
  }
  
  .site-main .project-area .grid .our-project .img a{  
    transition: box-shadow .3s ease;
  }
  
  .site-main .project-area .grid .our-project .img a:hover{
    filter: brightness(1.1) drop-shadow(1px 8px 30px #7f7f7f);
  }
  
  
  
  /*end project area*/

  
.site-main .office-area section2{
    display: block;
    max-width: 1000px;
    background: rgb(255, 255, 255);
    margin: 0 auto 1rem;
    height: 340px;
    position: relative;
    border-right: .2rem;
    transform: preserve-3d;
    color: rgb(130, 130, 130);
    
    
  }
  
  .site-main .office-area .block{
    margin-top: 200px;
    padding: 3rem;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    transition: box-shadow .3s ease;
    
  }
  
  .site-main .office-area .block:hover{
    box-shadow: var(--box-shadow);
    
  }
  
  
  
  
  /*end office-area area*/

  
/* start blog-area area */

.site-main .blog-area .card{  
    transition: box-shadow .3s ease;
  }
  
  
  .site-main .blog-area .card:hover{
    box-shadow: var(--box-shadow);  
  }
  
  
  /* end blog-area area */
  /* navbar area */
  
  .site-main .navbar-area .navbar {
    background-color: black;
    height: 100px;
  }
  
  /* navbar area */
  
  
  /*     NAVBAR    buttons animation               */
  .nav-link{
    transition: box-shadow .5s ease;
  }
  
  
  .nav-link:hover{
    border-bottom-style: ridge;
    background: rgba(97, 97, 97, 0); /*changes colour of the navbar buttons*/
  }
  
  
  /*     NAVBAR   buttons animation                */
  
  /*     social-link  footer                    */
  
  .social-links{
    align-items: center;;
  }
  
  .social-items i{
    color: rgb(117, 117, 117);
  }
  
  
  .social-items .fa-solid{
    transition: box-shadow .3s ease;
  }
  
  .social-items .fa-solid:hover{
    box-shadow: var(--box-shadow2);  
    color: #e20000;
  }
  
  .social-items .fa-brands{
    transition: box-shadow .3s ease;
  }
  
  .social-items .fa-brands:hover{
    box-shadow: var(--box-shadow2);  
    color: #e20000
  }
  
  /*     social-link    footer                  */
  
  /*     footer                  */
  
  body{
    min-height: 100vh;
  }
  
  .sticky-footer{
    position: sticky;
    top: 100%;
    text-align: center;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    padding: 20px;
  }
  
  /*     footer                  */