@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
body{background-color:#fff;font-family: 'Roboto', sans-serif;}
header{z-index: 9999; background-color: #fff;box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);}
p{font-weight: 300;}
.logo{height: 50px;}
.nav-linka{background-color:#00A82D; color: #fff; border-radius: 3px; padding: 8px 20px; margin-left: 30px;float: right; text-decoration: none; font-weight: 500;}
.nav-linkb{background-color:#00A82D; color: #fff; border-radius: 3px; padding: 8px 20px; margin-top: 20px; display: inline-block; text-decoration: none; font-weight: 500;}
.nav-linka:hover, .nav-linkb:hover{background-color:#00A222; color: #fff;}
.banner{background-image:url(../images/banner.png); background-size: cover; background-repeat: no-repeat; height: 100vh; position: relative; }
.banneroverlay{  padding-top: 5%; padding-left: 5%; max-width: 450px;}
.formbg{background-color:rgba(255, 255, 255, 1); border-radius: 4px; padding:10% 12%;}
.inptbx{background-color: #ddd; border-radius: 4px; border:0px; margin: 10px 0; padding: 8px 12px; width: 100%;}
.prvctxt{font-size: 11px;}
.loginbtn{background-color: #0066FF; width: 100%; padding: 10px 20px; color: #fff; font-weight: bold; text-align: center; border:0px; border-radius: 4px; margin-top: 20px;}
.brdrlft{border-left: 2px solid #fff;}
.frmcnr{width: 50%;}
.btn-sbt{padding: 6px 35px; background-color: #484848; color: #fff;}


.theboxbg{background-color: #222; text-align: left; color: #fff; padding: 20px;}
.theboxbg img{float: left; height: 60px; margin-right: 15px;}
.theboxbg p{color: rgba(255, 255, 255, 0.8);}
.responsive-img{width:100%; height:auto;}
.greybg{background-color: #eee;}
.darkgreybg{background-color: #333; padding: 40px 30px; color: #fff;}
 

  .footer{background-color: #222; color: #fff;}
  .copyright{font-size: small; color: #999; background-color: #000; text-align: center;}
  .copyright a{color: #999; text-decoration: none; margin: 0 10px;}
   

  @media screen and (max-width: 480px) {
  .banner{height: 400px;}
  .banneroverlay{padding:2%; width: 100%;}
  .frmcnr{width: 100%;}
  .formbg{padding: 10%;}
  }





  logo-slider {
    --image-size: 100px;
    
    padding: 20px;
    overflow: hidden;
    /* max-width: 900px; */
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
  }
  logo-slider:hover div {
    animation-play-state: paused;
  }
  logo-slider div {
    display: flex;
    position: relative;
    animation: marquee 5s linear infinite;
    justify-content: space-around;
  }
  logo-slider img {
    display: block;
    min-width: var(--image-size);
    height: var(--image-size);
    margin: 0 1vw;
  }
  logo-slider:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* background: linear-gradient(to right, white, rgba(255, 255, 255, 0) 80px, rgba(255, 255, 255, 0) calc(100% - 80px), white); */
  }
  @media (max-width: 900px) {
    logo-slider {
      --image-size: 50px;
      --image-size: min(max(50px, 10vw), 100px);
    }
  }
  
  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }