@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@800&display=swap";
@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500&display=swap";
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Baloo 2', sans-serif;
    
}
body{
    background-color: black;
    color: white;
}

/* home page css */
@keyframes zoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  } */
  
  .svg-container{
    animation: zoom 5s ease-in-out infinite alternate;
    /* padding: 163px 0px 9px 4px; */
  } 
  
  

  #Layer_1{
      margin-top: 150px;
  }

  
  
  .pulse{
      height: 150px;
      width: 150px;
      background: linear-gradient(
          #ef5350,
          #ef5350
      );
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0px;
      bottom: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 50px;
      color: #ffffff;
  }
  .pulse:before,
  .pulse:after{
      content: "";
      position: absolute;
      height: 100%;
    width: 100%;
      background-color: #ef5350;
      border-radius: 50%;
      z-index: -1;
      opacity: 0.7;
  }
  .pulse:before{
      animation: pulse 2s ease-out infinite;
  }
  .pulse:after{
      animation: pulse 2s 1s ease-out infinite;
  }
  @keyframes pulse{
      100%{
          transform: scale(2.5);
          opacity: 0;
      }
  }
  .section1{
    border: 3px solid white;
    border-radius: 5px; 
  }
  .chnagehumansec{
    border-right: 1px solid white; 
    border-radius: 0px 50px 50px 0px ;
    position: relative;
    background: #4e4f4e;
    border: none;
  }
  .section1para{
    border-left: 1px solid white; 
    border-radius: 50px 0px 0px 50px ;
    position: relative;
  }
  .section1para p{
    padding: 40px 0px 0px 12px;
  }
  .battery{
    position: absolute;
    top: -60px;
  }
  .rec{
    position: absolute;
    top: -73px;
    right: 15px;
    text-align: right;
  }
  .humangif{
    height: 480px;
    object-fit: cover;
    padding: 45px 0px 0px 0px;
  }

  /* marquee slider for media presence */
  .marquee {
    display: flex;
    block-size: var(--marquee-item-height);
    margin-block: var(--marquee-item-height);
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    align-items: center;
}

.marquee--8 {
    --marquee-item-width: 237px;
    --marquee-item-height: 133px;
    --marquee-duration: 60s;
    --marquee-items: 16;
    margin-top: 50px;
    margin-bottom: 11px;
}



.marquee__item {
    --marquee-item-offset: max( calc(var(--marquee-item-width) * var(--marquee-items)), calc(100% + var(--marquee-item-width)) );
    --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
    position: absolute;
    inset-inline-start: var(--marquee-item-offset);
    transform: translateX(-50%);
    animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
    transform: scale(2.6);
}



.marquee--8 .marquee__item:nth-of-type(1) {
    --marquee-item-index: 1;
}

.marquee--8 .marquee__item:nth-of-type(2) {
    --marquee-item-index: 2;
}

.marquee--8 .marquee__item:nth-of-type(3) {
    --marquee-item-index: 3;
}

.marquee--8 .marquee__item:nth-of-type(4) {
    --marquee-item-index: 4;
}

.marquee--8 .marquee__item:nth-of-type(5) {
    --marquee-item-index: 5;
}

.marquee--8 .marquee__item:nth-of-type(6) {
    --marquee-item-index: 6;
}

.marquee--8 .marquee__item:nth-of-type(7) {
    --marquee-item-index: 7;
}

.marquee--8 .marquee__item:nth-of-type(8) {
    --marquee-item-index: 8;
}

.marquee--8 .marquee__item:nth-of-type(9) {
    --marquee-item-index: 9;
}

.marquee--8 .marquee__item:nth-of-type(10) {
    --marquee-item-index: 10;
}

.marquee--8 .marquee__item:nth-of-type(11) {
    --marquee-item-index: 11;
}

.marquee--8 .marquee__item:nth-of-type(12) {
    --marquee-item-index: 12;
}

.marquee--8 .marquee__item:nth-of-type(13) {
    --marquee-item-index: 13;
}

.marquee--8 .marquee__item:nth-of-type(14) {
    --marquee-item-index: 14;
}

.marquee--8 .marquee__item:nth-of-type(15) {
    --marquee-item-index: 15;
}

.marquee--8 .marquee__item:nth-of-type(16) {
    --marquee-item-index: 16;
}
@keyframes go {
  to {  
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}
/* for media presence end */





/* home page css end */

/* record page css */
.video-card{
  border-radius: 5px;
  border: 1px solid;
  background-color: #ffffff;
  padding: 20px;
}
.wrapper {
  position: relative;
  background-color: black;
}
.wrapper video {
width: 100%;
height: 100%;
}
.wrapper .video-playback {
height: calc(100% - 78px);
display: none;
}
.wrapper .controls {
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.wrapper .controls .btn1 {
width: 48px;
height: 48px;
border-radius: 100%;
border: 3px solid #f11616;
background-color: black;
color: white;
margin: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.stop-btn1{
  border: 3px solid white !important;
  color: #f11616 !important;
}
.download-btn1{
  border: 3px solid green !important;
}
.download-btn1 svg{
  color: green;
}
.wrapper .controls .record-btn1 {
display: flex;
}
.wrapper .controls .progress-btn1, .wrapper .controls .upload-btn1, .wrapper .controls .download-btn1, .wrapper .controls .stop-btn1 {
display: none;
}

.btn1:hover {
cursor: pointer;
transform: scale(1.1);
}

.go-back-btn1, .toggle-cam-btn1 {
position: absolute;
top: 20px;
width: 32px;
height: 32px;
border-radius: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}

.go-back-btn1 {
left: 20px;
display: none;
}

.toggle-cam-btn1 {
right: 20px;
}

.file-input-video {
display: none;
}
#counterDisplay{
  position: absolute;
  font-size: 150px;
  top: 179px;
  left: 265px;
  z-index: 20;
}
#durationDisplay {
  position: absolute;
  font-size: 34px;
  bottom: 13px;
  color: green;
  left: 20px;
  font-weight: 500;

  
}
/* record page css */