:root {
    --main: #000;
    --second: #ffffff;
    --ter:#ea3732;
    --padding-main:10px;
    --padding-sec: 20px;
    --padding-ter: 20px;
    --size-main: 1em;
  }
  *{
    -webkit-font-smoothing: antialiased;
  }
   @font-face {
    font-family: Roboto Light;
    src: url(../fonts/Roboto-Light.ttf);
  }
   @font-face {
    font-family: Poppins Black;
    src: url(../fonts/Poppins-Black.ttf);
  } 
  @font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Regular.ttf);
  } 
  h1,h2,h3,h5{
    font-family: Poppins Black;
    font-size: 30px;
    letter-spacing: 0.3px;
  }
  p,span,a{
    font-family: Roboto Light;
    font-weight: normal;
    line-height: 1.6em;
    letter-spacing: 1px;
    font-size: 18.5px;
    font-weight: 100;
    letter-spacing: 1px;
  }
  p{color: #000;}
  body,
  html {
    font-family: Poppins Black, Sans-serif;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    background-color: var(--main);
  }
  section{
    height: 100vh !important;
  }
  h2
/* nav-bar */
section.cover{
  height: 100vh;
  width: 100vw;
  position: relative;
}

 main {
  z-index: 2;
  right: 0;
  position: fixed;
  height: 100%;
  background-color: var(--second);
  -webkit-transition: transform .7s ease-in-out;
  -moz-transition: transform .7s ease-in-out;
  -ms-transition: transform .7s ease-in-out;
  -o-transition: transform .7s ease-in-out;
  transition: transform .7s ease-in-out;
}

.sidebar {
  height: 100%;
  width: 20%;
  position: fixed;
  top: 0;
  z-index: -1;
  right: 0;
  overflow-x: hidden !important;
  background-color: transparent;
  -webkit-transition: all .7s .2s ease-in-out;
  -moz-transition: all .7s .2s ease-in-out;
  -ms-transition: all .7s .2s ease-in-out;
  -o-transition: all .7s .2s ease-in-out;
  transition: all .7s .2s ease-in-out;
}

.bar {
  display: block;
    height: 2px;
    width: 30px;
    background-color: #959292;
    margin: 10px auto;
}

.button {
  cursor: pointer;
  display: inline-block;
  width: auto;
  margin: 0 auto;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.nav-right {
  position: fixed;
  right: 40px;
  top: 20px;
}

.nav-right.visible-xs {
  z-index: 3;
}

.hidden-xs {
  display: none;
}

.middle {
  margin-left: 20%;
  width: 40px;
}

.bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.nav-right.visible-xs .active .bar {
  background-color: var(--second);
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.button.active .top {
  -webkit-transform: translateY(15px) rotateZ(45deg);
  -moz-transform: translateY(15px) rotateZ(45deg);
  -ms-transform: translateY(15px) rotateZ(45deg);
  -o-transform: translateY(15px) rotateZ(45deg);
  transform: translateY(15px) rotateZ(45deg);
}

.button.active .bottom {
  -webkit-transform: translateY(-15px) rotateZ(-45deg);
  -moz-transform: translateY(-15px) rotateZ(-45deg);
  -ms-transform: translateY(-15px) rotateZ(-45deg);
  -o-transform: translateY(-15px) rotateZ(-45deg);
  transform: translateY(-15px) rotateZ(-45deg);
}

.button.active .middle {
  width: 0;
}

.move-to-left {
  -webkit-transform: translateX(-18vw);
  -moz-transform: translateX(-18vw);
  -ms-transform: translateX(-18vw);
  -o-transform: translateX(-18vw);
  transform: translateX(-18vw);
}

nav {
  padding-top: 30px;
}

.sidebar-list {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  margin-top: 15vh;
  text-align: center;
}

.sidebar-item {
  margin: 30px 0;
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
}

.sidebar-item:first-child {
  -webkit-transition: all .2s .2s ease-in-out;
  -moz-transition: all .2s .2s ease-in-out;
  -ms-transition: all .2s .2s ease-in-out;
  -o-transition: all .2s .2s ease-in-out;
  transition: all .2s .2s ease-in-out;
}

.sidebar-item:nth-child(2) {
  -webkit-transition: all .2s .4s ease-in-out;
  -moz-transition: all .2s .4s ease-in-out;
  -ms-transition: all .2s .4s ease-in-out;
  -o-transition: all .2s .4s ease-in-out;
  transition: all .2s .4s ease-in-out;
}

.sidebar-item:nth-child(3) {
  -webkit-transition: all .2s .6s ease-in-out;
  -moz-transition: all .2s .6s ease-in-out;
  -ms-transition: all .2s .6s ease-in-out;
  -o-transition: all .2s .6s ease-in-out;
  transition: all .2s .6s ease-in-out;
}
.sidebar-item:nth-child(4) {
  -webkit-transition: all .2s .8s ease-in-out;
  -moz-transition: all .2s .8s ease-in-out;
  -ms-transition: all .2s .8s ease-in-out;
  -o-transition: all .2s .8s ease-in-out;
  transition: all .2s .8s ease-in-out;
}
.sidebar-item:nth-child(5) {
  -webkit-transition: all .2s 1s ease-in-out;
  -moz-transition: all .2s 1s ease-in-out;
  -ms-transition: all .2s 1s ease-in-out;
  -o-transition: all .2s 1s ease-in-out;
  transition: all .2s 1s ease-in-out;
}
.sidebar-item:nth-child(6) {
  -webkit-transition: all .2s 1.2s ease-in-out;
  -moz-transition: all .2s 1.2s ease-in-out;
  -ms-transition: all .2s 1.2s ease-in-out;
  -o-transition: all .2s 1.2s ease-in-out;
  transition: all .2s 1.2s ease-in-out;
}

.sidebar-item:last-child {
  -webkit-transition: all .2s 1.4s ease-in-out;
  -moz-transition: all .2s 1.4s ease-in-out;
  -ms-transition: all .2s 1.4s ease-in-out;
  -o-transition: all .2s 1.4s ease-in-out;
  transition: all .2s 1.4s ease-in-out;
}
.sidebar.active{
  background-color: #201f1f;
  z-index: 100;
}
.sidebar-item.active {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

.sidebar-anchor {
  color: var(--second);
  text-decoration: none;
  font-size: 1em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 7px;
}

.sidebar-anchor:before {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--ter);
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.sidebar-anchor:hover:before {
  width: 100%;
}

.ua {
  position: absolute;
  bottom: 20px;
  left: 30px;
}

.fa {
  font-size: 3.4em;
  color: #808080;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.ua:hover .fa {
  color: #FFF;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.sidebar-anchor:hover{
  color: #959292;
}

/* nav ends here */

/* banner video */
.banner{
  height: 100%;
  width: 100%;
  /* background-image:var(--main) url('../img/thumb.png');
  background-size: cover; */
  background-color: var(--main);
}
.banner-vid{
  height: auto;
  width: 100vw;
  position: relative;
}
/* end banner video */
/* innovate section */
.innovate,.pratyaksh{
  background-color: var(--main);
  width: 100vw;
  height: 100vh;
  position: relative;
}
.logo{
  position: absolute;
  top: 0;
  padding: var(--padding-sec) 0;

}
.logo img{
  width: 126px;
}
#weinnovate
{
  width: 100%;
  height: 100%;
}
/* innovate section ends */
/* pratyaksh starts */
.pratyaksh{
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: relative;
}
.info-pratyaksh {
  z-index: 2;
  padding-top: 20px;
  top: 0;
  text-align: center;
  width: 100vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--second);
}
.img-pratyaksh img{
overflow: hidden;  
height: 612px;
width: 602px;
}
.info-pratyaksh h2{
  font-family: Poppins;
    letter-spacing: 0.6px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size: 36px;
}
.info-pratyaksh p{
  color: #fff;
}
h2{
  position: relative;
}
#show-hidden-menu{
  font-weight: bold;
}
.solid {
  border-top: 8px solid var(--ter);
  width: 20%;
  opacity: 100;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.info-pratyaksh .solid{
  width: 10%;
}

hr {
  margin: 0.6rem 0;
}
span{
  padding: 5px;
  border-radius:50%;
}
.img-pratyaksh{
  padding-top: 6%;
  width: 100vw;
  text-align: center;
}

/* video carousel starts */
.video-carousel{
  background-color: var(--main);
  width: 100vw;
  position: relative;
}
.text-carousel1
{
  background-color: #000000;
width: 100vw;
}
.text-carousel2
{
width: 100vw;
height: 100vh;
}
.training,.explore,.contact-us
{
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: url("../img/website-training.jpeg");
  background-size: cover;
}
.info-training{
  font-weight: bolder;
  text-align: center;
  width: 100vw;
  position: absolute;
  padding: 1% 5%;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
}
.info-training h2,.swarm-info h2, .contact-us h2{
  font-size: 30px;
  text-transform: uppercase;
}
h3{
  font-size: 1.7vw;
  font-weight: bolder;
  text-transform: uppercase;
}

.explore{
  background-image: url("../img/09_Website-HR222.jpeg");
}
.contact-us{
  padding-top: 3%;
  background-image: url("../img/10sdfsf_Website-Contact-US.jpg");

}
/* video carousel ends */

/* text carousel start */
.swarm-info{
  padding: 4% 5% 0 5%;
  width: 100vw;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
/* text carousel end */
.carousel-item img{
  height: 100vh;
}
h4{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4%;
}
.hidden-menu{
  height: auto !important;
  padding: 5%;
}
.hidden-row{
  padding: 2% 0;
}
.hidden-text{
  padding: 2% 5%;
  color: var(--second);
}

.hidden-text h5{
  font-size: 1.5vw;
}
.hidden-text p{
  letter-spacing: 1px !important;
  line-height: 1.6em;
  font-size: 18.5px !important;
  color: var(--second);
}
.office{
  padding: 0 10%;
}
.desk-view{
  display: block;
}
.mob-view{
  display: none;
}
@media (min-width: 480px) {
  .nav-list {
    display: block;
  }
}

#switch-container {
  top: 2%;
  left: 2%;
  position: absolute;
  z-index: 2;
}

#sound-off-icon,
#sound-on-icon {
  z-index: 0;
  position: absolute;
  top: -10%;
}

#sound-off-icon {
  right: 5%;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23808080' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
 }
 
 .carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23808080' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
 }

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.switch:before input { 
  content: "switch";
  opacity: 0;
  width: 0;
  height: 0;
}

input:before {
  content: "input";
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #c7c7c7;  /* light gray */
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--ter); /* blue */
}

input:focus + .slider {
  /* blue */
  box-shadow: 0 0 1px #2196F3; /* blue */
}

input:checked + .slider:before {
  content: "";
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* give the button rounded edges */
/* for square edges, remove these values */
.slider.round {
  border-radius: 34px;
  
}
.slide1-bg{background: url(../img/05_Website-Swarming.jpg);}
.slide2-bg{background: url(../img/06_Website-Surveillance&Security.jpg);}
.slide3-bg{background: url(../img/07_Website-Testing.jpg);}
.slide4-bg{background: url(../img/application.jpg);}

.slide1-bg,.slide2-bg,.slide3-bg,.slide4-bg,.slide5-bg{
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}
.slider.round:before {
  border-radius: 50%;
}

.svg-icon {
  width: 1em;
  height: 1em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #fff;
}

.svg-icon circle {
  stroke: #fff;
  stroke-width: 1;
}
.logo-bottom{
  position: absolute;
  bottom: 40%;
  padding: 5px;
  left: 50%;
  transform: translate(-50%,50%);
  background-color: var(--main);
  border-radius: 5px;
  box-shadow: 0px 3px 17px 20px;
}
.logo-bottom img{
  height: 150px;
}
.copy{
  position: absolute;
  bottom: 0;
  left: 50%;
  letter-spacing: 3px;
  color: var(--second);
  transform: translateX(-50%);
  font-size:1em;
}
.row p{
  font-size: 14.5px;
  letter-spacing: normal;
}
.contact-us .solid{
  width: 10%;
}
/* heading popins black 35
para roboto light 18.5 px */

/* background-position: center right;
background-repeat: no-repeat;
background-size: cover; */

/* media width */
.img-pratyaksh>img:nth-child(2){
  display: none;
}
.img-pratyaksh>img:nth-child(1){
  display: initial;
}
.video-mob,.img-desk-mob{
  display: none;
}
/* media starte here---------------------------------------------------------- */
@media (max-width: 768px) {
  .nav-right {
    position: absolute;
  }
  .hidden-xs {
    display: block;
  }
  .visible-xs {
    display: none;
  }
  .logo {
    position: absolute;
    top: 0;
    padding: var(--padding-sec) 0;
}
  .pratyaksh{
    background:var(--main) url("../mobile/pkp_mobile.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .info-pratyaksh h2 {
    font-size: 30px;
  }
    .info-pratyaksh > p {
      font-size: 15px;
      letter-spacing: 1px;
      padding: 2px 27px;

  }

  .img-pratyaksh {
    overflow: hidden;
    height: 100vh;
  }
  .img-pratyaksh>img:nth-child(1){
    display: none;
  }
  .img-pratyaksh>img:nth-child(2){
    display: initial;
    margin-left: -6%;
  }
  .training{
    background: var(--main) url("../mobile/Website_training.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .info-training h2{
    font-size: 30px;
    color: #000000;
  }
  .info-training>p{
    font-size: 14.5px;
    color: #000000;
    letter-spacing: 1px;
  }
  .solid{
      border-top: 6px solid var(--ter);
      width: 30% !important;
  }
  .contact-us h2 {
    font-size: 35px;
  }
  .contact-us p {
    text-align: left;
    font-size: 14.5px;
    color: #000000;
    letter-spacing: 1px;
    padding-left: 20px;
  }
  .contact-us{
    height: max-content;
    background: #95d1f4 url("../mobile/contact_us_mobile.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .svg-icon {
    width: 1em;
    height: 1em;
  }
  #sound-off-icon,#sound-on-icon{
    top:-10%;
  }
  .move-to-left{
    -webkit-transform: translateX(0vw); 
    -moz-transform: translateX(0vw);
    -ms-transform: translateX(0vw);
    -o-transform: translateX(0vw);
    transform: translateX(0vw);
    z-index: 1000;
  }
  .sidebar{
    width: 50%;
  }
  .video-desk,.img-desk-slide{
    display: none;
  }
  .video-mob,.img-desk-mob{
    display: block;
  }
.swarm-info {
  padding: 4% 0% 0 0%;
}
.swarm-info h2{
  font-size: 30px;
}
.swarm-info p {
  font-size: 15px;
  letter-spacing: 1px;
  padding: 2px 20px;
}
.info-training {
  text-align: center;
  width: 100vw;
  position: absolute;
  padding: 0% 5px;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
}
.explore{
  background-image: url("../mobile/HR_mobile.jpg");
  background-position: center top;
  background-size: cover;
}
.desk-view{
  display: none;
}
.mob-view{
  display: block;
}
.hidden-menu {
  height: auto !important;
  padding: 1%;
}
.office {
  padding: 0 1%;
}
.card-img img{
  width: 96vw;
  height: auto;
}
.hidden-text h5 {
  font-size: 30px;
  padding-top: 20px;
}
.slide1-bg{background-image: url(../mobile/05_Website\ -Swarming\ mobile.jpg);background-position: right center;}
.slide2-bg{background-image: url(../mobile/06_Website\ -Surveillance\ &\ Security\ mobile.jpg);}
.slide3-bg{background-image: url(../mobile/Website_Testing.jpg);}
.slide4-bg{background-image: url(../mobile/04_Website\ -Applications\ mobile.jpg);}

}
@media (max-width: 377px){
  .logo img {
    width: 90px;
}
.logo {
top: -2%;
}
}