@import url('https://fonts.googleapis.com/css?family=Montserrat');

/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
  color: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
} */


.standing_man
{
  margin-top: 50px; 
  height: 100%; 
  width: 100%;
}

.testimonial_image{
  border-style: solid;
  border-color: #2565A5;
  border-width: 4px;
  margin-left: 15px;
  margin-top: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #2565a5;
}


.intro_video
{
  display: flex; 
  align-items: center;  
  justify-content: center; 
  margin-bottom: 100px;
  margin-top: 30px;
}
.intro_video video{
  width: 600px;
  height: 340px;
}


.about_banner img{
  width: 50%;
  height: 50%;
}

.navbar
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

.navbar_li
{
  float: left;
}

.navbar_li a{
    display: block;
    color: white;
    text-align: center;
    font-size: 16px;
    padding: 16px;
    text-decoration: none;  
}
.navbar_li a:hover {
  background-color: #111111;
}

.product_navbar{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: #2764A0;
}


:root {
  --marquee-width: 80vw;
  --marquee-height: 35vh;
  --marquee-elements: 47; /* defined with JavaScript */
  --marquee-elements-displayed: 6;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 2s);
}

.marque {
  display: flex;
  margin-left: 10%;
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: #ffffff;
  color: #eee;
  overflow: hidden;
  position: relative;
}
.scroller_clients_heading{
  text-align: center;
  margin-top: 50px;
}
.marque:before, .marque:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
/* .marquee:before {
  left: 0;
  background: linear-gradient(to right, #111 0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, #111 0%, transparent 100%);
} */
.marque-content {
  list-style: none;
  height: 100%;
  display: flex;
  margin-top: 10px;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
.marque-content:hover {
  animation-play-state: paused;
}
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marque-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
}

.marque-content li img {
   /* width: 100%; */
  /* height: 100%; */
  border: 1px solid grey;
  box-shadow:3px 3px 3px 3px gray; 
  height: 130px;
  width: 140px;
  margin-bottom: 20px;
}

.circle-icon {
  background: #5CBAD0;
  padding:30px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.circle-icon2 {
  background: #5CBAD0;
  padding:30px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.glyphicon{
  font-size: 3em;
  color: #ffffff;
}



.product_images img {
width: 30%; 
height: 50%;  
margin-left: 13px; 
margin-bottom: 5px; 
border: solid black 3px; 
padding: 2px; 
float: right; 
}
.product_top_images img {
  width: 30%; 
  height: 50%;  
  margin-left: 13px; 
  margin-bottom: 5px; 
  border: solid black 3px; 
  padding: 2px; 
  float: right; 
  }

@media (max-width: 1200px) {

  :root {
    --marquee-width: 80vw;
    --marquee-height: 30vh;
    --marquee-elements-displayed: 3;
  }
  .marque:before, .marque:after { width: 5rem; }
  .marque-content li img {
    /* width: 100%; */
   /* height: 100%; */
   border: 0.5px solid grey;
   box-shadow:1px 1px 1px 1px gray; 
   height: 90px;
   width: 140px;
 
 }
 .scroller_clients_heading{
   font-size: 25px;
   margin-top: 50px;
 }
 .intro_video video{
  width: 600px;
  height: 340px;
}
}

@media (max-width: 900px) {

  :root {
    --marquee-width: 80vw;
    --marquee-height: 30vh;
    --marquee-elements-displayed: 2;
  }
  .marque:before, .marque:after { width: 5rem; }
  .marque-content li img {
    /* width: 100%; */
   /* height: 100%; */
   border: 0.5px solid grey;
   box-shadow:1px 1px 1px 1px gray; 
   height: 90px;
   width: 140px;
 
 }
 .scroller_clients_heading{
   font-size: 25px;
  margin-top: 50px;
 }
 .intro_video video{
  width: 450px;
  height: 240px;
}
}


@media (max-width: 600px) {

  :root {
    --marquee-width: 80vw;
    --marquee-height: 30vh;
    --marquee-elements-displayed: 1;
  }
  .marque:before, .marque:after { width: 5rem; }
  .marque-content li img {
    /* width: 100%; */
   /* height: 100%; */
   border: 0.5px solid grey;
   box-shadow:1px 1px 1px 1px gray; 
   height: 90px;
   width: 140px;
 
 }
 .scroller_clients_heading{
   font-size: 25px;
 }

 .product_top_images img{
  border: 1px solid grey;
  box-shadow:3px 3px 3px 3px gray; 
  height: 150px;
  width: 150px;
  margin-right: 10%;
  margin-bottom: 20px;
 }

 .product_images img {
  /* width: 100%; */
 /* height: 100%; */
 border: 1px solid grey;
 box-shadow:3px 3px 3px 3px gray; 
 height: 170px;
 width: 170px;
 margin-right: 26%;
 margin-bottom: 20px;
 margin-top: 38px;
}
.about_banner img{
  width: 105%;
  height: 120%;
}
.intro_video video{
  width: 300px;
  height: 220px;
}
.standing_man
{
  margin-top: 50px; 
  height: 0px; 
  width: 0px; 
}
.circle-icon2 {
  background: #f2f2f2;
  border-radius:0px;
  margin-bottom: 0px;
}
.glyphicon{
  font-size: 0em;
  color: #f2f2f2;
}
}