/* CSS Reset */
*{
    margin: 0;
    padding: 0;
}
/* CSS Variables */
:root{
    --navbar-height:59px;
}
/* Navigation Bar */
#navbar{
    display:flex;
    align-items:center;
    position:sticky;
    top:0px;
}

/* Navigation Bar Logo and Image */
#logo{
    margin: 10px 34px;
}
#logo img{
    height:60px;
    margin: 3px 6px;
}

/* Navigation Bar List Style */
 #navbar ul{
    display:flex;
}
#navbar ul li{
    list-style:none;
    font-size:1.3rem;
}
#navbar ul li a{
    display: block;
    padding:3px 20px;
    border-radius: 20px;
    text-decoration: none;
    /* color:white; */
}
#navbar ul li a:hover{
    color:black;
    background-color:white;
}
#navbar ::before{
    content: "";
    background-color: black;
    position:absolute;
    height: 100%;
    width:100%;
    z-index: -1;
    opacity: 0.4;
    top:0px;
    left:0px;
}

/* Home Section */
#home{
    display:flex;
    flex-direction: column;
    padding:3px 200px;
    justify-content:center;
    align-items:center;
    height:578px;
}
#home ::before{
    content: "";
    position: absolute;
    background:url('../bg1.jpg') no-repeat center center/cover;
    height:642px;
    width:100%;
    z-index: -1;
    opacity: o.89;
    top:0px;
    left:0px;

}
#home h1{
    color: #0336f1;
    font-size: 70px;
    text-align: center;
}
#home p{
    color:white;
    text-align:center;
    font-size:1.5rem;
}
.btn{
    padding:6px 20px;
    border:2px solid white;
    background-color: brown;
    color:white;
    margin:17px;
    font-size: 1.5rem;
    border-radius: 10px;
    cursor: pointer;
}

/* Service Section */
#services{
    margin:34px;
    display:flex;
}
#services .box{
    border-radius:2px solid red;
    padding:34px;
    margin:3px 6px;
    border-radius: 23px;
    background-color:#f2f2f2;
}
#services .box img{
    height:130px;
    display:block;
    margin:auto;
}
#services .box h2{
    text-align:center;
}
  .service-container h1{
      text-align: center;
  }



  /* Client Section */

  #client-section{
      height:344px;
      position: relatives;

  }
  #client-section::before{
      content:" ";
      position: absolute;
      background-color: black;
      width: 100%;
      height:54%;
      z-index: -1;
      opacity:0.4;
  }
  #clients{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #client-section h1{
      text-align: center;
      color: red;
      background-color:white;
      font-size:70px;
  }
 
  .client-item{
       
      padding:34px;
  }
  
  /*Contact Section */
  #contact{
      position:relative;

  }
  #contact-box{
      display:flex;
      justify-content:center;
      align-items: center;
      padding-bottom:34px;
  }
  #contact::before{
      content:" ";
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity:0.7;
      background:url('../C3.jpg') no-repeat center center/cover;
  }
  #contact-box input,
  #contact-box textarea{
      width:100%;
      padding:o.5rem;
      border-radius:9px;
      font-size: 1.1rem;
      
  }
  #contact-box form{
      width: 90%;
    
  }
  #contact-box label{
      font-size:1.3rem;
      }
   #contact h1{
    text-align: center;
    background-color: white;
    height: 50px;
    font-size: 60px;
    padding-top: 0px;
    padding-bottom: 28px;
   }

      /* Footer */
      footer{
          background:black;
          color:white;
          padding: 9px 20px ;
          text-align:center;
      }
/* Utility Classes */
.h-primary{
    font-size:2.8rem;
    padding:12px;
    
}
.h-secondary{
    font-size:2.8rem;
    padding:12px;

}