body {
    height: 100%;
    background:fixed;
    margin: 0;
    padding: 0;
    
    background-color: #f9dafdd7;
    background-size: cover;
    background-position: center;
   
  }


.loader-container{
    position: fixed;
    top:0; left:0;
    z-index: 10000;
    background:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
    width:100%;
  }
  
  .loader-container.fade-out{
    top:-120%;
  }
  

  .block1{

    width: 96%;
    height: 420px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    position: relative;
    display:flex;
    /* border: 3px solid rgb(197, 255, 255); */
    border-radius: 20px;
    justify-content: space-between;
    margin-bottom: auto;

  }



   /* 1) VEDa Cafe */

  #veda {
    
    width: 32%;
    height: 94%;
    margin: 15px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: rgb(253, 245, 201);
    /*border: 3px solid rgb(15, 12, 12);
    border-radius: 10px; */
    box-shadow: 6px 6px 12px 1px gray;
    transition: ease-out 0.4s;
  }

  #imm1{
    height: 45%;
    width: 50%;
    background-image: url(cof.jpg);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }


  #veda:hover{
    
    width: 34%;
    height: 96%;

  }

/*
  #veda:hover{
    transform: translateY(10px);
  }
        */


  /*-------------------------------------------------------------INSIDE BOX SPECIFICATIONS--------------------------------------------------------*/

       /*---------------------------Upper Yellow portion------------------------*/
      #veda1 {

        width: 100%;
        height: 30%;
        background-color:transparent;
        border-top-left-radius : 10px;
        border-top-right-radius: 10px;

      }

          /*---------NAME OF PLACE----------*/

          #veda1 h1{
                
            text-align: center;
          /*  font-size: 2.5vw;  */
            color: rgb(132, 19, 177);
            margin-right: auto;
            margin-left: auto;
            font-family:Arial, Helvetica, sans-serif;
            font-style: italic;
          }

          /*----------WEBSITE LINK------------*/

          #wsite{
            width: 50%;
            height: 30%;
            background-color: transparent;
            border: 3px solid rgb(0, 0, 0);
            margin: auto;
            border-radius: 20px;
            transition: ease-out 1s;
          }

          
          #wsite a{
            font-size: 20px;
            color: rgb(0, 0, 0);
          }

          #wsite a:hover{
            color: rgb(249, 250, 242);
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-style: inherit;
          }

          #wsite:hover{
            box-shadow: inset 300px 0 0 0 rgb(255, 0, 0);
            font-style:bold;
            color: rgb(255, 255, 255);

          }

          /*------------------------------LOWER BLUE PART---------------------------------*/


      #veda2 {
           
        width: 100%;
        height: 70%;
        background-color: rgba(136, 201, 255, 0.658);  
        border-top-right-radius: 100px;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        transition: ease-out 0.4s;
      
      }
/*
      #best h2{
        font-size: 1.5vw;
      }

      #predi h2{
        font-size: 2vw;
      }

      */

      #veda2:hover{

        background-color: rgba(0, 0, 0, 0.979);  
        color: rgb(246, 253, 253);

      }

  /*-----------------------------------------------------------INSIDE BOX SPECIFICATIONS ENDS-----------------------------------------------------*/


  
   /* 2) TECHNO-SOFT */

   #techno {

    width: 32%;
    height: 94%;
    margin: 15px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: rgb(253, 245, 201);
    box-shadow: 6px 6px 12px 1px gray;
    transition: ease-out 0.4s;

  }

  
  #imm2{
    height: 45%;
    width: 50%;
    background-image: url(momo.png);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }

  #techno:hover{
    width: 34%;
    height: 98%;
  }

  

  /* 3) MAHAK */

  #mahak {
    
    width: 32%;
    height: 94%;
    margin: 15px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: rgb(253, 245, 201);
    box-shadow: 6px 6px 12px 1px gray;
    transition: ease-out 0.5s;

  }

  #imm3{
    height: 45%;
    width: 50%;
    background-image: url(pbm.jpg);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }

  #mahak:hover{
    width: 34%;
    height: 98%;
  }

  /* 4) PAHAN */


  #pahan {
    
    width: 32%;
    height: 94%;
    margin: 15px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: rgb(253, 245, 201);
    box-shadow: 6px 6px 12px 1px gray;
    transition: ease-out 0.5s;
   /* border: 3px solid rgb(15, 12, 12);
    border-radius: 10px;*/

  }

  #imm4{
    height: 45%;
    width: 50%;
    background-image: url(phn.jpg);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }

  #pahan:hover{
    width: 34%;
    height: 98%;
  }


  .block2{

    width: 96%;
    height: 420px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    position: relative;
    display: flex;
    margin-top: 1px;
    /* border: 3px solid rgb(197, 255, 255); */
    border-radius: 20px;
    justify-content: space-between;
    

  }

  
  /* 5) HOT AND COLD */

  #HnC{   
    width: 32%;
    height: 94%;
    margin: 15px;
    margin-top: auto;
    margin-bottom: auto; 
    background-color: rgb(253, 245, 201);
    /*border: 3px solid rgb(15, 12, 12);
    border-radius: 10px;*/
    box-shadow: 6px 6px 12px 1px gray;
    transition: ease-out 0.5s;
  }

  #imm5{
    height: 45%;
    width: 50%;
    background-image: url(hunc.png);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }

  #HnC:hover{
    width: 34%;
    height: 96%;
  }

  /* 6) FOOD CLUSTER */

  #FoodCluster{ 
    width: 32%;
    height: 94%;
    margin: 15px;
    margin-top: auto;
    margin-bottom: auto; 
    background-color: rgb(253, 245, 201);
    /*border: 3px solid rgb(15, 12, 12);
    border-radius: 10px;*/
    box-shadow: 6px 6px 12px 1px gray;
    transition: ease-out 0.5s;
  }

  #imm6{
    height: 45%;
    width: 50%;
    background-image: url(fluster.png);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }

  #FoodCluster:hover{  
    width: 34%;
    height: 96%;
  }

  /* 7) CHOTU DHABA */

  #Chotu{
    
    width: 32%;
    height: 94%;
    margin: 15px;
    margin-top: auto;
    margin-bottom: auto;    
    background-color: rgb(253, 245, 201);
    box-shadow: 6px 6px 12px 1px gray;
   /* border: 3px solid rgb(15, 12, 12);
    border-radius: 10px; */
    transition: ease-out 0.5s;
  }

  #imm7{
    height: 45%;
    width: 50%;
    background-image: url(FDD.jpg);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }

  #Chotu:hover{ 
    width: 34%;
    height: 96%;
  }

  /* 8)  LAXMI CANTEEN */


  #Laxmi{  
    width: 32%;
    height: 94%;
    margin: 15px;
    margin-top: auto;
    margin-bottom: auto; 
    background-color: rgb(253, 245, 201);
   /* border: 3px solid rgb(15, 12, 12);
    border-radius: 10px; */
    box-shadow: 6px 6px 12px 1px gray;
    transition: ease-out 0.5s;
  }

  #imm8{
    height: 45%;
    width: 50%;
    background-image: url(FDD.jpg);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
  }

  #Laxmi:hover{   
    width: 34%;
    height: 96%;
  }


  

  /* --------------------------------------------------------------------STATUS------------------------------------------------------ */
        #statt{
          height: 20%;
          background-image: url(closd.png);
          /*background-color: aqua;*/  
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width:50%;
          margin-left: auto;
          margin-right: auto;
        }

        
        #statt2{
          height: 20%;
          background-image: url(closd.png);
          /*background-color: aqua;*/
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width:50%;
          margin-left: auto;
          margin-right: auto;
        }
        #statt3{
          height: 20%;
          background-image: url(closd.png);
          /*background-color: aqua;*/
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width:50%;
          margin-left: auto;
          margin-right: auto;
        }

        #statt4{
          
          height: 20%;
          background-image: url(closd.png);
          /*background-color: aqua;*/
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width:50%;
          margin-left: auto;
          margin-right: auto;
        }

        #statt5{
          height: 20%;
          background-image: url(closd.png);
          /*background-color: aqua;*/
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width:50%;
          margin-left: auto;
          margin-right: auto;
        }
        #statt6{
          height: 20%;
          background-image: url(closd.png);
          /*background-color: aqua;*/
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width:50%;
          margin-left: auto;
          margin-right: auto;
        }
        #statt7{
          height: 20%;
          background-image: url(closd.png);
          /*background-color: aqua;*/
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width:50%;
          margin-left: auto;
          margin-right: auto;
        }

        #statt8{
          height: 20%;
          background-image: url(closd.png);
          /*background-color: aqua;*/
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          width:50%;
          margin-left: auto;
          margin-right: auto;
        }

  .foot{
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    height: 50px;
    background-color: rgb(82, 76, 75);
  }
  
  .foot h1{
    text-align: center;
    font-size: 35px;
    color: rgb(250, 229, 211);
  }

  #predi h2 {
    text-align: center;
  }

  #imm{
    text-align: center;
  }



  @media (max-width: 1400px)
   {


    .block1 {
      flex-direction: column;
      padding: 10px;
      margin-top: 10px;
      width: 90%;
      height: auto;
      align-content: center;
      align-items: center;
    }

    
    #veda {

      
      height: 400px;
      width: 80%;
      margin-bottom: 10px;
      margin-top: auto;
      transition: ease-out 0.4s;

    }


    #veda:hover{
    
      width: 83%;
      height: 410px;
  
    }

    #techno{

      
      height: 400px;
      width: 80%;
      margin-bottom: 10px;
      margin-top: auto;
      transition: ease-out 0.4s;


    }

    #techno:hover{
    
      width: 83%;
      height: 410px;
  
    }

    #mahak {

      
      height: 400px;
      width: 80%;
      margin-bottom: 10px;
      margin-top: auto;
      transition: ease-out 0.4s;


    }

    #mahak:hover{
    
      width: 83%;
      height: 410px;
  
    }

    #pahan {

      
      height: 400px;
      width: 80%;
      margin-bottom: 10px;
      margin-top: auto;
      transition: ease-out 0.4s;


    }

    #pahan:hover{
    
      width: 83%;
      height: 410px;
  
    }

    .block2{
      flex-direction: column;
      padding: 10px;
      width: 90%;
      align-content: center;
      align-items: center;
      height: auto;
    }

    #Chotu{

      
      height: 400px;
      width: 80%;
      margin-bottom: 10px;
      margin-top: auto;
      transition: ease-out 0.4s;


    }

    #Chotu:hover{
    
      width: 83%;
      height: 410px;
  
    }

    #Laxmi{

      
      height: 400px;
      width: 80%;
      margin-bottom: 10px;
      margin-top: auto;
      transition: ease-out 0.4s;


    }

    #Laxmi:hover{
    
      width: 83%;
      height: 410px;
  
    }

    #wsite{
      padding-top: auto;
      padding-bottom: auto;
      
    }

    #FoodCluster{

      height: 400px;
      width: 80%;
      margin-bottom: 10px;
      margin-top: auto;
      transition: ease-out 0.4s;

    }

    #FoodCluster:hover{
    
      width: 83%;
      height: 410px;
  
    }

    #HnC {

      height: 400px;
      width: 80%;
      margin-bottom: 10px;
      margin-top: auto;
      transition: ease-out 0.4s;

    }

    #HnC:hover{
    
      width: 83%;
      height: 410px;
  
    }

    #predi h2{
      font-size: large;
    }

    #best h2{
      font-size: large;
    }

    #naam{
      font-size:larger;
    }
    
  }