/* from below the media queries begins */
@media only screen and (min-width:1200px ) {
   /* this is for the laptop view  */
/* below classes are imp for js */
.active{
   display: block !important;
    box-shadow: 10px;
    color: blue;
    border-radius: 10px;
    border: none;
    transform: scale(1.2);
   
 }
 
*{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}
 
 /* above classes are imp for js */

   /* below snippet is for the background,and * */
   .back-img{
      background: url(./src/bg.jpg);
      background-position:center;
      background-size: cover;
      background-size: 100% 100%;
      height: 100vh;
      background-repeat: no-repeat;
      max-width: 100%;
      opacity: 1;
   }
   *{
      overflow-y: hidden;
      overflow-x:hidden;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
   }
   /* above snippet is for the background,and * */
   /* below snippet is for the navbar related */
   .navbar{
      border: none;
      display: flex;
      height: 9%;
      width: 100%;
      justify-content:flex-start;
      background-color: rgb(202, 202, 202);
      
   }
   .nav-text{
      flex-direction: row;
      color: rgb(186, 59, 59);
      
      font-weight: 900;
      margin-left: 4%;
      margin-top:10px;
      font-size:xx-large ;
   }
   .nav-img{
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: 20px;
   }
   /* above snippet is for the navbar related */
   
   
  /* below snippet is for the footer box */
  .footer{
     display: flex;
     position: relative;
    
     width: 55%;
     justify-content: space-around;
     background-color: transparent ;
     flex-direction: row;
     margin-left: 49.6vh;
    
     margin-top: -13.9vh;
     
   }
   .foot-box-1{
      /* this will allows you to make changes on input boxes in footer */
      height: 20%;
      overflow: hidden;
      margin-top:1% ;
   }
  
   .foot-box-2{
      
      /* filter: brightness(0); */
      
      height: 20%;
      margin-top:1%;
      margin-bottom:1%;
   }
   .foot-box-2>button:hover{
      border: 5px solid red;
      filter: brightness(20);
      
   }
   /* above snippet is for the footer box */
   .add{ 
      /* this class is for the middle plus icon */
      border: none;
      cursor: pointer;
   }
   .add img{
      /* this is imp code for the plus icon  */
      /* box-4 not working upto the mark  */
       height: 15vh !important; 
      
     }

   button{
      /* this class is for the  4 round symbols and footer 1 symbol */
      background: transparent;
      border-radius: 50%;
      cursor:pointer;
   }
   /* below snippet is for the middle square box and related */
   .box-1{
      /* this is the external rectangle */
     border: none;
     margin-left: 21%;
     margin-top: 10%;
     height: 62vh;
     width: 60vw;
     display: flex;
     justify-content: center;
     position: absolute;
     background-color: #1ca9bc95;
     box-shadow: 0 0 0  3px #2a2a2a;
  }
    
   .box-2{
      /* this is the external  round circle  */
      border: none;
      height: 40vh;
      width: 40vh;
     border-radius: 50%;
     margin-top: 75px;
     margin-left: 35.5%;
     background-color: #3564BF;
     display: none;
     justify-content: center;
     box-shadow: 0 0 0  3px #2a2a2a;
     position: absolute;
  }
  
  .box-4{
   /* this is the plus icon class */
     position: absolute;
     margin-top: 165px;
     margin-left: 57vh;
    
   }
   
   /* above snippet is for the middle square box and related */
   
  /* this below inp ids for the designing of 4 input boxes */
  #inp-1{
     display: none;
     position: absolute;
     margin-left: 50vh;
     margin-top: 1.2vh;
     width: 30vh;
     /* input file top */
   }
   #inp-2{
      display: none;
      position: absolute;
      margin-left: 50vh ;
      margin-top: 56vh;
      width: 30vh;
      
      /* input file bottom  */
   }
   #inp-3{
      display: none;
      position: absolute;
      margin-top:140px;
      margin-left:30px;
      word-wrap: break-word;
      word-break: break-all;
      vertical-align: top;
      height:160px;
      font-size: 15px;
      color: black;
      border: none;
      width:230px;
      z-index: 200;
   l  
   }

   #inp-4{
      display: none;
      position: absolute;
      margin-left: 95vh;
      margin-top: 29vh;
      width: 25vh;
      /* input text */
   
   /* this above inp ids for the designing of 4 input boxes */

   /* below icns classes is for the designing of the 4 icons */
   }
   .icns>button,.icns-2>button,.icns-3>button,.icns-4>button{
      border: none;
      cursor: pointer;
   }
   .icns{
      position: absolute;
      margin-top: 20px;
      justify-content: center;
      margin-left: 125px;
   }
   
  .icns-2{
   position: absolute;
   margin-top: 31vh;
   justify-content: center;
   margin-left: 125px;
   height: 19vh;
   
}

.icns-3{
   position: absolute;
   margin-top: 16vh;
   justify-content: center;
   margin-left: 20px;
   height: 19%;
   
}
.icns-4{
   position: absolute;
   margin-top: 16vh;
   justify-content: center;
   margin-left: 78%;
   height: 19%;
}
   .icns>button:hover,.icns-2>button:hover,.icns-3>button:hover,.icns-4>button:hover{
      filter: brightness(20);
      filter: contrast(0);
      transform: scale(1.2);
      
   }
   /* above icns classes is for the designing of the 4 icons */
 }

































@media only screen and (min-width:1020px ) and (max-width:1030px)     {
   /* this is i think for tablet and all ohk  */
   .back-img{
      background: url(./src/bg.jpg);
      background-position:center;
      background-size: cover;
      background-size: 100% 100%;
     height: 100vh;
      background-repeat: no-repeat;
      max-width: 100%;
      opacity: 1;
  }
  *{
      overflow-y: hidden;
      overflow-x:hidden;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
  }
  .square{
      border: 3px solid red;
     
   }
   .navbar{
      border: 2px solid red;
      
      display: flex;
      height: 9%;
      width: 99.7%;
      justify-content:flex-start;
      background-color: rgb(202, 202, 202);
  
   }
   .nav-text{
      flex-direction: row;
    
      color: rgb(186, 59, 59);
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-weight: 900;
      margin-left: 4%;
      font-size:xx-large ;
   }
   .nav-img{
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: 2%;
   }
  
   
  
  .footer{
     display: flex;
     position: relative;
     
     border: 2px solid red;
    
     
     justify-content: space-around;
     background-color: transparent ;
     flex-direction: row;
     margin-left: 43vh;
     margin-right: 38vh;
     
     margin-top: -15.9vh;
     
  }
  .foot-box-1{
     /* this will allows you to make changes on input boxes in footer */
     height: 20%;
     overflow: hidden;
 
   
     margin-top:1% ;
  }
  .inp-foot{
   background-color: red !important;

  }
  .foot-box-2{
     
     /* filter: brightness(0); */
  
     height: 20%;
   
     margin-top:1% ;
     margin-bottom: 1%;
  }
  .foot-box-2>button:hover{
   border: 5px solid red;
   filter: brightness(20);
   
  }
  .btn{ 
     /* this class is for the middle plus icon */
     border: none;
  }
  button{
     background: transparent;
     border-radius: 50%;
     
     /* border: none; */
  }
  .box-2{
     border: 2px solid red;
     height: 40vh;
     width: 40vh;
     border-radius: 50%;
     margin-top: 11vh;
     margin-left: 30vh;
    
     justify-content: center;
     
     
     position: absolute;
  }
  .active{
   display: none;
    
     cursor:help;
     box-shadow: 0 0 0  5px rgb(15, 154, 209);
     
  }

  .active2{
   
   
   display: block !important;
   box-shadow: 10px;
   background-color: red;
   color: blue;
   border-radius: 10px;
   border: 3px solid red;
   transform: scale(1.2);
  }

  #inp-1{
   display: none;
   position: absolute;
   margin-left: 35vh;
   margin-top: 1.2vh;
   width: 30vh;
  }
  #inp-2{
   display: none;
   position: absolute;
   margin-left: 39vh ;
   margin-top: 55vh;
   width: 30vh;
  }
  #inp-3{
   display: none;
   position: absolute;
   margin-left: 3vh;
   width: 22vh;
   margin-top: 30vh;
  }
  #inp-4{
   display: none;
   position: absolute;
   margin-left: 75vh;
   margin-top: 29vh;
   width: 22vh;
  }

  .box-4{
   position: absolute;
   margin-top: 23.7vh;
   margin-left: 43.7vh;
  
  }
  
  
 
  .box-1{
      
     border: 2px solid rgb(162, 203, 213);
     margin-left: 21%;
     margin-top: 10%;
     height: 62vh;
     width: 60vw;
     display: flex;
     justify-content: center;
     
     position: absolute;
  }  
  .box-1:hover{
   border: 1px solid rgb(230, 134, 44);
   background-color: rgba(101, 168, 193, 0.516);
   
  }
  
  .icns>button,.icns-2>button,.icns-3>button,.icns-4>button{
     border: none;
  }
  
  .icns{
     position: absolute;
     margin-top: 0.6vh;
 
     justify-content: center;
     margin-left: 16vh;
 
     height: 28vh !important;
  }
  .icns>button:hover,.icns-2>button:hover,.icns-3>button:hover,.icns-4>button:hover{
   filter: brightness(20);
   filter: contrast(0);
   transform: scale(1.2);
   
  }

  .btn img{
   height: 15vh !important; 
   
  }
  
 
  .icns-2{
     position: absolute;
     margin-top: 31vh;
     /* display: flex; */
     justify-content: center;
     margin-left: 16.7vh;
     /* filter: brightness(0); */
     height: 19vh;
     /* display: none; */
  }
 
  .icns-3{
     position: absolute;
     margin-top: 16vh;
     /* display: flex; */
     justify-content: center;
     margin-left: 0.9vh;
     /* filter: brightness(0); */
     height: 19%;
     /* display: none; */
  }
  
  .icns-4{
     position: absolute;
     margin-top: 16vh;
     /* display: flex; */
     justify-content: center;
     margin-left: 78%;
     /* filter: brightness(0);   */
     height: 19%;
     /* display: none; */
  
  }
 
 
  

 }

 @media only screen and (min-width:1030px ) and (max-width:1040px)     {
   /* this is i think for tablet and all ohk  */
   .back-img{
      background: url(./src/bg.jpg);
      background-position:center;
      background-size: cover;
      background-size: 100% 100%;
     height: 100vh;
      background-repeat: no-repeat;
      max-width: 100%;
      opacity: 1;
  }
  *{
      overflow-y: hidden;
      overflow-x:hidden;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
  }
  .square{
      border: 3px solid red;
      
   }
   .navbar{
      border: 2px solid red;
     
      display: flex;
      height: 9%;
      width: 99.7%;
      justify-content:flex-start;
      background-color: rgb(202, 202, 202);
  
   }
   .nav-text{
      flex-direction: row;
    
      color: rgb(186, 59, 59);
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-weight: 900;
      margin-left: 4%;
      font-size:xx-large ;
   }
   .nav-img{
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: 2%;
   }
  
   
  
  .footer{
     display: flex;
     position: relative;
    
     border: 2px solid red;
     
     
     justify-content: space-around;
     background-color: transparent ;
     flex-direction: row;
     margin-left: 43vh;
     margin-right: 38vh;
    
     margin-top: -15.9vh;
     
  }
  .foot-box-1{
     /* this will allows you to make changes on input boxes in footer */
     height: 20%;
     overflow: hidden;
 
    
     margin-top:1% ;
  }
  .inp-foot{
   background-color: red !important;

  }
  .foot-box-2{
     

  
     height: 20%;
    
     margin-top:1% ;
     margin-bottom: 1%;
  }
  .foot-box-2>button:hover{
   border: 5px solid red;
   filter: brightness(20);
   
  }
  .btn{ 
     /* this class is for the middle plus icon */
     border: none;
  }
  button{
     background: transparent;
     border-radius: 50%;
     
   
  }
  .box-2{
     border: 2px solid red;
     height: 40vh;
     width: 40vh;
     border-radius: 50%;
     margin-top: 11vh;
     margin-left: 34vh;
    
     justify-content: center;
    
     
     position: absolute;
  }
  .active{
   display: none;
   
     cursor:help;
     box-shadow: 0 0 0  5px rgb(15, 154, 209);
     
  }

  .active2{
   
   
   display: block !important;
   box-shadow: 10px;
   background-color: red;
   color: blue;
   border-radius: 10px;
   border: 3px solid red;
   transform: scale(1.2);
  }

  #inp-1{
   display: none;
   position: absolute;
   margin-left: 35vh;
   margin-top: 1.2vh;
   width: 30vh;
  }
  #inp-2{
   display: none;
   position: absolute;
   margin-left: 39vh ;
   margin-top: 55vh;
   width: 30vh;
  }
  #inp-3{
   display: none;
   position: absolute;
   margin-left: 3vh;
   width: 22vh;
   margin-top: 30vh;
  }
  #inp-4{
   display: none;
   position: absolute;
   margin-left: 75vh;
   margin-top: 29vh;
   width: 22vh;
  }

 
  .box-4{
   position: absolute;
   margin-top: 23.7vh;
   margin-left: 47.7vh;
  
  }
  
  

  .box-1{
      
     border: 2px solid rgb(162, 203, 213);
     margin-left: 21%;
     margin-top: 10%;
     height: 62vh;
     width: 60vw;
     display: flex;
     justify-content: center;
 
     position: absolute;
  }  
  .box-1:hover{
   border: 1px solid rgb(230, 134, 44);
   background-color: rgba(101, 168, 193, 0.516);

  }
  
  .icns>button,.icns-2>button,.icns-3>button,.icns-4>button{
     border: none;
  }
  
  .icns{
     position: absolute;
     margin-top: 0.6vh;
    
     justify-content: center;
     margin-left: 16vh;
  
     height: 28vh !important;
  }
  .icns>button:hover,.icns-2>button:hover,.icns-3>button:hover,.icns-4>button:hover{
   filter: brightness(20);
   filter: contrast(0);
   transform: scale(1.2);
   
  }

 
  .btn img{
   height: 15vh !important; 
   
  }
  
 
  .icns-2{
     position: absolute;
     margin-top: 31vh;
     
     justify-content: center;
     margin-left: 16.7vh;
    
     height: 19vh;
 
  }
 
  .icns-3{
     position: absolute;
     margin-top: 16vh;
     
     justify-content: center;
     margin-left: 0.9vh;
     
     height: 19%;
    
  }
  
  .icns-4{
     position: absolute;
     margin-top: 16vh;
     
     justify-content: center;
     margin-left: 78%;
    
     height: 19%;
    
  
  }
  
 
  

 }