body{
            font-family: sans-serif;
        }
      #container1{
          width:100%;
          height:50px;
          border-top:1px solid rgb(218, 214, 214);
          display:flex;
          width:1350px;

      }
      #container1>div{
          border-right:1px solid rgb(218, 214, 214);
          width:10%;
           
      }
      #container1>div>img{
          width:100%;
          height:100%;
          margin-top: -10px;
          margin-left: -10px;
      }
      #zap_logo:hover{
          background-color: rgb(27, 27, 161);
      }
      #vrsnl_logo>p{
          
          color:gray;
          font-weight: bold;
          text-align: center;
           font-size: 20px;
           margin-top: 10px;
           
           
      }
       #vrsnl_logo>p:hover{
           color: black;
          
       }
       #container2{
          width:100%;
          height:50px;
          
          display:flex;
           width:1350px;

      }
      #Cust{
         
          width:15%;
          
      }
      #select{
          
          height:100%;
          width:100%;
          background-color: rgb(34, 81, 184);
          color:white;
          font-weight: bold;
          padding:10px;
          border-right:3px solid black;
      }
      option{
          background-color: white;
          color:rgb(20, 20, 36);
      }
      #Cust~div{
          width:100%;
          color: white;
          background-color: rgb(34, 81, 184);
          padding-left: 20px;
      }
      #container3{
          width:100%;
          height:100px;
          /* border:1px solid rgba(146, 142, 142, 0.897); */
          /* padding:30px; */
           
          display:flex;
          column-gap: 0px;
          width:1350px;
      }
      #container3>#logo2{
          /* border:1px solid red; */
            width:10%;

      }
      #textarea{
          /* border:1px solid rgb(50, 153, 46); */
          padding:20px;
          padding-right: 0px;
          
      }
      #text{
         justify-content: center;
        margin-top:0px;
        color: rgb(10, 10, 10);
        
      }

      #logo2>img{
          width:100%;
          height:80%;
          padding:3px;
      }
      #search{
          width:5%;
          height:9%;
          padding:20px;
          margin-top: 20px;
          color:white;
          background-color: rgb(5, 32, 107);
      }
      #search:hover{
          background-color: #2c78aa;
      }
      #cart{
          width:10%;
          margin: auto;
          margin-right: 30px;
          height:50%;
         display:flex;
          border: 1px solid green;
          border-radius: 5px;
      }
      #imgDiv>img{
          padding:5px;
          width:80%;
          height:70%;
      }
      #imgDiv~div{
         text-align: center;
         padding:13px;

      }
       #imgDiv~div>a{
           text-decoration: none;
           color:rgb(11, 51, 11)
       }
     #cart:hover{
         background-color: rgb(168, 241, 168);
          color:rgb(11, 51, 11)
     }
     #container4{
         display:flex;
         column-gap: 20px;
         padding:10px;
         height:25px;
         /* border: 1px solid red; */
         background-color: rgb(243, 240, 240);
         width:1350px;
     }
   .category{
       width:7%;
       height:45px;
       color:rgb(8, 51, 51);
       background-color:rgb(243, 240, 240) ;
       border:1px solid rgb(243, 240, 240);
        margin-top: -10px;
        font-weight: bold;
      
   }
   .category:hover{
        border-bottom:1px solid  rgb(8, 51, 51);
   }
   #Login{
       color:rgb(8, 51, 51);
       width:45%;
       height:45px;
       margin-left: 200px;
       margin-top: -10px;
       font-size: 17px;
       border: 1px solid whitesmoke;
      font-weight: bold;

       
   }
   #Login:hover{
       border-bottom:1px solid  rgb(8, 51, 51);
   }
   #container5{
       /* width:98.5%; */
       height:40px;
       /* border:1px solid red; */
       background-color: rgb(221, 235, 235);
       text-align: center;
       padding:10px;
       width:1350px;

   }
    #container5>div~div{
        text-decoration: underline;
        font-weight: bold;
    }
    #container6{
        width:100%;
        height:220px;
        margin-bottom: 60px;;
        /* border:1px solid red; */
    }
     #footer{
             margin-top: -100px;;
              /* border:1px solid red; */
              height:730px;
              background-color: #0f4366;
              width:1360px;;
          }
           #footer>div{
               height:150px;
               background-color:rgb(15, 59, 85) ;
               color:white;
           }
           form{
               padding:30px;
           }
           form>input+input{
               border:1px solid white;
               background-color: rgb(15, 59, 85) ;
               color:white;
               text-align: center;
               font-size: 16px;
               font-weight: bold;;
               
           }
           form>input+input:hover{
               background-color: white;
               color:black
           }
           form>label{
                margin-top: 10px;
           }
           form>input{
               border-radius: 5px;;
               height:40px;
               width:200px;
               margin-top: 5px;;
           }
           form~div{
               
               /* border:1px solid green; */
               display:flex;
               column-gap: 150px;

           }
           form~div>div>p{
               /* width:150%; */
                 
               width:200px;
               /* border:1px solid red; */
               font-weight: bold;
               font-size: 16px;;
               margin-left: 20px;;
               
           }
            form~div>div>div{
                /* border:1px solid red; */
                padding:2px;
                margin:2px;
                margin-left: 20px;;
            }
             form~div>div>div>span{
                 font-weight: bold;;
             }
            form~div>:last-child>div{
                color:white;
                width:260px;
                height:190px;
                border:1px solid rgb(12, 74, 109) ; ;
                margin-left: -50px;
                margin-top: 20px;
                background-color:rgb(13, 90, 134) ;
                padding:10px;
                border-radius: 5px;

            
            
            }
            form~div>:last-child>div>input{
             background-color:rgb(13, 90, 134) ; 
             border:1px solid white;
             color:white;
             text-align: center;
            }
             form~div>:last-child>div>input:hover{
                 background-color: white;
                 color:black
             }
             form~div>:last-child>:last-child
             {
                    background-color:#0f4366;
                    height:100px;
                    /* border:1px solid red; */

             }
             
               form~div>:last-child>:last-child>div{
                  width:80%;
                  height:60%;
               }
              form~div>:last-child>:last-child>div>img{
                  width:90%;
                  height:98%;
              };
              #detail>#card{
                  border:1px solid green
              }
              #detail>#card>label{
                font-size: 18px
              }
                 #detail>#card>input{
                    width:200px;
                    height:20px; 
                 }
             
            #state{
                width:10px;
            }




       #outer_box{
                  width:1360px;
                  /* border:1px solid red;; */
                  display:flex;
                  margin-bottom: 100px;;
              }

        #product{
        margin:-1% 5% 5% 5%;
        /* padding:20px; */
        /* border:1px solid violet; */
        height:800px;
        width:600px;
        display:grid;
        grid-template-columns:20%;
        grid-template-rows: 30%;;
        grid-gap:5%;
        justify-content: center;
         /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
        padding:10px;
       

    
    }
    #express{
        /* border:1px solid red; */
        width:520px;;
        height:200px;
        padding:10px;
        margin-left: -200px;;
         box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
         border-radius: 10px;;

    }
    #detail{
         /* border:1px solid red; */
          height:800px;
         width:600px; 
         background-color: rgba(248, 248, 246, 0.801); 
         /* box-shadow: rgba(174, 174, 177, 0.15) 0px 48px 100px 0px; */
        padding:10px;
        border-radius: 10px;;
      
    }
    #heading{
        margin-left: 70px;
        width: 44%;
       
        text-align: center;
    }
    #form_div{
        margin-top: 10px;;
         box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        padding:10px;
        width:520px;
        margin-left: -200px;;
        border-radius: 10px;;
    }

    img{
        width:88%;
        height:80%;
        /* margin:40px; */
        padding:10px;
        /* border:1px solid blue; */
        
    }
    #img_div{
        height:130px;
        width:130px;
        background-color: lightblue;
        /* margin-left: -200px;; */
        /* border:1px solid green; */
        /* margin-top:100px ; */
        /* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */
        margin-top: 100px;;
        /* padding:10px; */
        border-radius: 10px;;
    
    }
    #img_div:hover{
        border:1px solid rgb(150, 147, 147)
    }
    #detail_div{
        border-radius: 10px;;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        /* margin-left: -200px;; */
        /* margin-top:250px;; */
        border:1px solid lightgray;
        width:430px;
        height:150px;
        background-color: whitesmoke;
        padding:10px;
        margin-top: 10px;;
    }
    #heading{
      /* border:1px solid whitesmoke; */
    
    }
    
    #prd_detail{
      /* border:1px solid yellow; */
      margin:10px;



    }
    
    #form_div>input{
        width:350px;
        height:15px;
    }

     #price:hover{
         /* border:1px solid red; */
         color:gray;
         font-weight: bold;
     }
     #name{
         color:indigo;
          font-weight: bold;
     }
     #crt_btn{
         width:30%;
         height:30px;
         background-color: rgb(150, 196, 196);
         border-radius: 10px;
     }
     #crt_btn:hover{
         background-color: rgb(55, 114, 114);
           color: white;
          
     }