/*@font face will help you add your own custimzed font I am using binancePlex*/
@font-face {
  font-family: Binance PLEX;      /*In this case I have downloaded Binance Plex font */
  src: url(BinancePlex-Regular.ttf);
}


*{
  font-family:Binance PLEX;   /*The whole website will be in Binance Plex font*/
  margin:0;
  padding:0;
  box-sizing: border-box;
}


:root{

  --fs-head:clamp(2rem, 3vw, 15rem); /*The max font size will be 3rem and min will be 2rem keeping the viewport width 3*/
  --fs-para:clamp(1rem,1vw,4vw);   /*The max font size will be 2rem and min will be 1rem keeping the viewport width 1*/
  --color-black:black;            /*declaring var with value black*/
  --color-white:#fff;             /*declaring var with value white*/
  --text-align:center;
  --margin_top:2%;
}


/*head represents heading*/
.head{
  font-size:var(--fs-head);         /*the font-size will be value of var --fs-head*/
  }


/*The headings which are in black color*/
  .head_color_black{
  color:var(--color-black);
}


/*The headings which are in white color*/
.head_color_white{
  color:var(--color-white);

}


/*The paragraphs*/
.para{
  font-size:var(--fs-para);
 
}

.para_1{
  font-size: clamp(1rem,1vw,5rem);
}

/*All the text that is aligned center*/
.text_align{
  text-align:center;
}

/*margin-top equals to variable value*/
.margin_top{
  margin-top:var(--margin_top);
}

.space{
  text-align:center;
  width:70%;
  margin-left:auto;
  margin-right: auto;

  
}

a{
  text-decoration: none;
  color:var(--black);

}

/*menu bar*/
.nav-bar{
  position: fixed;    /*to keep the menu bar at the top even if scrolling*/
  z-index: 999;          /*so it doesnt hide under anything else*/
  top:0;
  width: 100%;
  display:flex;          
  justify-content: space-around;    
  align-items: center;
   min-height: 8vh;
   background-color: var(--color-black);
}

/*This portion appears only when the screen size is less then 768px otherwise hidden*/
.logo{
      color:var(--color-white);      
      letter-spacing:  2px;
      font-size: 20px;
      display:none;
    }


/*The distance of streamie logo from menu bar*/
.logo_margin{
  margin-top:clamp(10vh,4vh ,8rem);
}


/*The links*/
.nav-links{
  display: flex;
  justify-content: space-around;
  width:  80%;
}

.nav-links li{
  list-style: none;
}

.nav-links a{
     text-decoration: none;
     color:var(--color-white);
     letter-spacing: 2px;
     font-weight: bold;
}

/*To make menu icon */
.menu-icon div{
      width:18px;
      height:2px;                          /*height of each line*/
      background-color:var(--color-white);
      margin:3px;
      transition: all 0.3s ease;           /*transition from menu icon to close takes 0.3s*/
}

/*menu icon is visible only when screen is smaller thn 768px otherwise hidden*/
.menu-icon{
  display: none;
}


/*animation*/
@keyframes navLinkFade {
  /*from disappearing */
  from{
    opacity:0;
    transform:translate(50px);
  }
  /*to appearing*/
  to{
    opacity:1;
    transform:translate(0px);
  }
}

/*to toggle between menu icon and close*/
.toggle .line1{
     transform: rotate(-45deg) translate(-5px, 3px);
}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(+45deg) translate(-5px, -3px);
}



.mySlides {
  display: none
}

img {
  vertical-align: middle;
}



/* Slideshow container */
.slideshow-container {

 width:clamp(380px, 60%,2500px);             
 position: relative;             /* arrow position is set relative to position of images thus its position is relative*/
 margin: auto;                   /* margin is set to auto for proper spacing*/

}


/* Next & previous arrows */
.prev, .next {
 cursor: pointer;                 /*so the pointer appears everytime mouse goes on the arrows*/
 position: absolute;              /*the position of arrows are set relative to images*/
 top: 50%;                        /* distance from top is 50%*/
 width: auto;                     /* */
 padding: 10px;                   /*padding is space created around the content(the arrows) which is set to 12*/
 margin-top: -22px;               /**/
 color: var(--color-black);                  
                 
 /*transition: 0.6s ease;  */        /**/
 border-radius: 0 10px 10px 0;
/* user-select: none;*/
}




/* Position the "next button" to the right */
.next {
 right: 0;                           /*to move the right arrow to right side*/
/* border-radius: 3px 0 0 3px;*/
}

* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: #dcdcdc;       /* on hover the color changes to light grey*/

}





/* The dots/bullets/indicators */
/*.dot {
cursor: pointer;                  
height:clamp(12px,2vh, 50px);        /* determining the size of bullets*/
/*width:clamp(15px,1.5vw,58px);
/*margin: 0 2px;*/
/*background-color: #bbb;     /* the color of inactive bullet*/
/*border-radius: 50%;           /*for round shape*/
/*display: inline-block;        /*both are placed  next to each other*/
/*transition: background-color 1s ease;   /*the color of bullet changes smoothly over 1s*/
/*}*/

/*.active, .dot:hover {
background-color: var(--color-black);
}*/

/* to make the images fade on clicking the next and previous */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}


@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}


/*for single screen section*/
.section-1{
  background-color: var(--color-black);           /*background color of single screen section*/
  padding-bottom:2%;                   /*This is for the reviews at the bottom to increase the distance of the review from bottom*/

}

/*The heading of single screen multiple views section */
.head_multi_views{
  padding:3%; 
  color: var(--color-white);

}


/*The width of single screen image */
.img_responsive{
  width: 80%;
  }


  /*Reviews container*/
.reviews{
  background-color: #F4F4F4;
  padding:2%;
  margin:2%;
  margin-top:3% ;
  border: 1px solid #dcdcdc
}

.review_text{
  border : 2px solid #dcdcdc; 
  padding:2%;
  margin:2%;
  background-color: var(--color-white);
  
}


/*for parallax effect of image*/
.parallax{
  
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/*how and which image appears*/
.section-3{
  min-height:1200px ;
  background-image: url("image_6(1).png");
  opacity:0.8;
  margin-bottom: 5%;
  
}


/*the text of parallax*/
.parallax_image{
  
  position:absolute;
  top:30%; 
  background-color:var(--color-black);
  padding:3%;
  font-size:var(--fs-para);
  margin-left:20%;
  
  width:60%;

}

.motion-container{
  display: flex;
  justify-content: space-around;
}


/*for motion detection text*/
.motion-text{
  font-weight:bold;
 }


/*images for motion detection*/
  .motion_image{
   
   width:28%;
   /*margin-left:15%;*/
  /* max-height:1500px;*/
  

  }



  /*Features section*/
.features_background{
  background-color:#F4F4F4;
  padding:2%;
}


/*features are inline*/
.features_inline{
  display:inline-block;
  /*justify-content:space-around ;*/
 width : 25%;      
  
}


/*for spacing of the video section*/
/*.section-2{
  margin-top:5%;
  
   }*/




iframe{
  
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  
}

.tech_specs{
  width:70%;
  margin-right:auto;
  margin-left:auto;
}

/*for footer*/

.footer_container{
  background-color:black ;
  /*padding-left:5%; */
  padding-top:2%;
  padding-left:40%;
  padding-bottom:2%
}


/*footer icons*/
.icons{
  width:4%;
 
}



.icons_app{
  width:10%;
  
}

/*hide the second image */
.multi_images{
    display: none;
  }



/*for max screen size of 600px*/
@media only screen and (max-width:600px){

 

   /* .parallax_image{
     left:20%;
      }*/
  
      /*the second image of motion notification section disappears on smaller screens*/
    .motion_responsive{
        display:none;
      }
  
      /*the first image width*/
      .motion_image_responsive{
        width: 50%;
        margin-left:auto;
        margin-right:auto;
      }
    }

  
  /*for max screen size of 768px*/
@media  screen and (max-width:768px) {
      body{
        overflow-x:hidden;
      }

      /*hide the name streamie under the logo so it appears only on menubar*/
      .streamie_name{
          display:none
      }

      /*streamie name appears on menu bar*/
      .logo{
          display: flex;
      }

      /*for  links  to appear vertically */
      .nav-links{
        position:absolute;             
        right:0px;                       /*to extreme right */
        height:92vh;
        top:8vh;
        background-color:var(--color-black);
        display:flex;          
        flex-direction: column;           /*downward direction*/
        align-items:center;
        width:50%;                        /*appears on half of page*/
       transform:translate(100%);        /*the menu bar goes in an out */
        transition:transform 0.6s ease-in ;       /*time needed for to make menu bar move in an out*/
      }
      
      .nav-links li{
        opacity:0;                     /*for giving a sliding look when appearing */

      }

      /*menu icon */
      .menu-icon{
        display:block;
        cursor: pointer;
      }

      
      /*to make sliding menu bar active */
      .nav-active{
        transform:translate(0%);
      }

     .features{
      
        display : none;
     }
     
    }

   /* .video-container{
         padding-top:50%;
      
      
    }*/

    @media only screen and (max-width:2000px){
        .section-3{
          min-height: 500px;
        }
    

    }
    @media only screen and (max-width:1000px){
    .space{
        
      width:100%;
     }

     .motion_image{
      max-height: 500px;
     }

     
     .icons{
      width:6%;
    }

    
.icons_app{
  width:14%;
  
}
    }

    @media only screen and (max-device-width: 1366px) {
      .parallax {
        background-attachment: scroll;
      }
    }