.thecontainer {
      width: 95vw;
      position: absolute;
      top:0px;
      left:0px;
      }

    /* body {
        display: flex;
      align-items: center;
      flex-direction: column;

    } */
    h2 {
      margin-bottom: 20px;
    }


    .container {
      margin-bottom: 0px; 
    } 


    
    .container > svg {
      overflow: visible;
    }


  

    .inline{
      text-align: center;
    }
   
    .container-1 {
    display:flex;
    justify-content:space-evenly;
          }


          
      .middletext{
        font-family: sans-serif;
        font-size: 6vmin;
        font-weight: bold;
        color:white;

      }
      
      .color-green{
        color:#36e2b2;
      }

      .color-orange{
        color:#ffae1d;
      }

      .color-purple{
        color:#8e4dff;
      }

      .color-skyblue{
        color:#61c3ff;
      }

      .color-text{
        color:#afafaf;
      }


           .marg1{
        flex: 0.5;
      }

      .marg2{
        flex:0.5;
      }


      .svgs{
        flex:1;
        max-width: 150px;
        min-width: 100px;

      }


      .icon{
        flex:1;
        justify-content: center;

      }

      




html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


#particles-js{
  width: 95vw;
  height: 100vh;
  min-height: 600px;
  background-color: #201d1d;
  background-image: url('');
  background-size: cover;
  /* background-position: 50% 50%; */
  background-repeat: no-repeat;
  position: relative;
  top:0px;
  left:0px;



}







.part2{
  font-family: Arial, Helvetica, sans-serif;
  color: #36e2b2
  ;
}


.bk{
  background-color: #000;
}

.sp{
  border:1px solid white;
}


.thegrid {

  /* flex:3; */
  display: flex;
  flex-wrap: wrap;
  /* margin: 0.3 auto; */
  /* text-align: center; */
  max-width: 800px;
}

.thespn {

  flex: 1 1 190px;
  /* cursor: pointer; */
  font-size: 8;
  overflow: hidden;
  border:5px solid rgba(0, 0, 0, 0);
  /* width:300px;
  height:200px; */
  /* flex:1;
  min-width:200px; */
  /* text-align: center; */
    /* margin: auto; */
    display: inline;
    float: none;

}


.thespn2 {
  flex: 1 1 190px;
  height: 2px;
  /* cursor: pointer; */
  font-size: 0;
  overflow: hidden;
  border:5px solid rgb(0, 0, 0,0);
  /* width:300px;
  height:200px; */
  /* flex:1;
  min-width:200px; */

  

}

.bk_pic {

  width: 174px;
   height: 174px; 
   object-fit: cover;
  pointer-events: none;
}

/* .thegap{


  flex:0.0;
} */

.parent {
  position: relative;
  /* top: 0;
  left: 0;*/
  
  width:180px;
  border:3px solid rgb(184, 184, 184);
  /* text-align: center; */
  margin: 0 auto;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
}
 
.image2 {
  position: absolute;
  top: 0;
  left: 0;

}


/* .parentalt {
  position: relative;


  height:100px;
  width:140px; 

  margin: 0 auto;
}

.para{
  background-color:rgb(87, 29, 29);color:white;
  text-align: center;
  padding: 40px 0;
  font-size: 15;
}

.para2{
  background-color:rgb(29, 87, 70);color:white;
  text-align: center;
  padding: 40px 0;
  font-size: 15;
} */


.themain2out{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}


.themain2{

    width: 100%;

}


.thegrid2 {

  /* flex:3; */
  display: flex;
  flex-wrap: wrap;
  /* margin: 0.3 auto; */
  /* text-align: center; */
  max-width: 850px;
}

.thespnviz {

  flex: 1 0 200px;
  /* cursor: pointer; */
  font-size: 8;
  overflow: hidden;
  border:5px solid rgba(0, 0, 0, 0);
  max-width: 250px;
  /* width:300px;
  height:200px; */
  /* flex:1;
  min-width:200px; */
  /* text-align: center; */
    /* margin: auto; */
    display: inline;
    float: none;

}

.thespnviz2 {

  flex: 2 0 350px;
  /* max-width: 450px; */
  /* cursor: pointer; */
  font-size: 8;
  overflow: hidden;
  border:5px solid rgba(0, 0, 0, 0);
  /* width:300px;
  height:200px; */
  /* flex:1;
  min-width:200px; */
  /* text-align: center; */
    /* margin: auto; */


    /* display: inline;
    float: none; */
   
    display: flex; 
    align-items: center; 
    justify-content: center; 


}



  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


  .bk-centred{
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }