diff --git a/Payment.css b/Payment.css
index fb124f8..b2a882b 100644
--- a/Payment.css
+++ b/Payment.css
@@ -27,19 +27,18 @@ body {
 
 #nav1>h2 {
     margin-bottom: -10px;
-    font-size: 24px;
 }
 
 #container {
     align-items: center;
     width: 35vw;
     background-color: #F5F5F5;
+    margin: auto;
+    margin-top: -18px;
     padding-left: 10px;
     padding-bottom: 20px;
-    position: fixed;
-    top: 88px;
-    left: 32%;
-    
+    margin-top: 88px;
+    z-index: 0;
 }
 
 .main {
@@ -143,14 +142,15 @@ body {
     position: fixed;
     top: 0px;
     left: 0px;
-    width: 100vw;
-    height: 100vh;
-    background:rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    background:rgba(0, 0, 0, 0.7);
     z-index: 1;
     display: none;
 
 }
 
+
 .popup{
     position: fixed;
     top: -150%;
@@ -163,6 +163,8 @@ body {
     box-sizing: border-box;
     border-radius: 20px;
     padding: 50px;
+    z-index: 3;
+    border-radius: 20px;
     
 }
 
@@ -184,7 +186,7 @@ body {
  body.popup-active .popup {
      top: 50%;
  }
- body.popup-active .popup.overlay{
+ body.popup-active .popup-overlay{
     display: block;
  }
 
@@ -233,12 +235,11 @@ body {
     border: 0px solid;
     margin-right: 20px;
 }
-
-.popup1{
+.popup1 {
     position: fixed;
     top: -150%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     width: auto;
     background: #f5f5f5;
     text-align: center;
@@ -246,44 +247,352 @@ body {
     box-sizing: border-box;
     border-radius: 20px;
     padding: 50px;
-    
+    z-index: 10;
+    border-radius: 20px;
+}
+
+.popup-overlay1 {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .8);
+    z-index: 5;
+    display: none;
+
+}
+
+.popup-close-btn1 {
+    position: absolute;
+    right: 20px;
+    top: -40px;
+    width: 30px;
+    height: 30px;
+    background: #222;
+    color: #fff;
+    font-size: 25px;
+    font-weight: 600;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 50%;
+
 }
+
 body.popup1-active .popup1 {
     top: 50%;
 }
-body.popup-active .popup1.overlay{
-   display: block;
+
+body.popup1-active .popup-overlay1 {
+    display: block;
 }
 
+.popup1>h3 {
+    text-align: center;
+}
+
+.popup1>p {
+    text-align: center;
+}
 
+#otp {
+    text-align: center;
+    margin: auto;
+    width: 100%;
+}
 
+#submit {
+    background-color: gray;
+    border-radius: 10px;
+    border: 0px solid;
+    margin-right: 20px;
+    padding: 10px;
+}
 
+#submitOtp {
+    text-align: center;
+    margin: auto;
+    margin-top: 10px;
+}
 
+/*  paytm css*/
 
+#wallet1>img{
 
+    width: 5%;
 
-@media all and (min-width:500px) and (max-width:768px){
- 
- 
-    #nav1>h2 {
-        margin-bottom: -5px;
-        font-size: 20px;
-    }
-    #leftArrow {
-        padding: 2PX 10px;
-    }
 
+}        
+.walletPaytm{
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background:rgba(0, 0, 0, 0.5);
+    z-index: 0;
+    display: none;
+  
+
+}
+
+.walletPaytm1>div{
+    margin-left: 0px;
+    margin-top: -20px;
+    margin-bottom: 30px;
+}
+
+.walletPaytm1>div>img{
+    width: 20%;
 }
 
-@media all and (min-width:320px) and (max-width:480px){
+.walletPaytm1>h3{
+    margin-left: 0px;
 
+}
+.walletPaytm1{
+    position: fixed;
+    top: -150%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 500px;
+    background: #f5f5f5;
+    padding: 20px;
+    box-sizing: border-box;
+    z-index: 2px;
+    border-radius: 15px;
     
-    #nav1>h2 {
-        margin-bottom: -2px;
-        font-size: 16px;
-    }
-    #leftArrow {
-        padding: 1PX 7px;
-    }
+}
+
+.wallet-close-btn{
+    position: absolute;
+    right: 2px;
+    top: -12px;
+    width: 30px;
+    height: 30px;
+    background: #222;
+    color:  #fff;
+    font-size: 25px;
+    font-weight: 600;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 50%;
+ 
+ }
+  body.walletPaytm1-active .walletPaytm1{
+     top: 50%;
+ }
+ body.walletPaytm1-active .walletPaytm{
+    display: block;
+ } 
+
+ .userInput{
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    padding-top: 15px;
+ }
+ .userInput>input{
+    margin: 0px;
+    height: 30px;
+    width: 50px;
+    border: none;
+    border-radius: 5px;
+    text-align: center;
+    font-family: Arial;
+    background-color: rgb(180, 178, 178);
+ }
+
+ #input{
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+    width: 80%;
+ }
+ #input>button{
+    background-color: #222;
+    color: #fff;
+    font-family: Arial, Helvetica, sans-serif;
+    width: 80px;
+    font-size: 16px;
+    border-radius: 5px;
+ }
+
+
+ /* upi css */
+ .upi-overlay {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 0;
+    display: none;
+
+
+}
+
+.upipopup {
+    position: fixed;
+    top: -150%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: auto;
+    background: #f5f5f5;
+    padding: 20px;
+    box-sizing: border-box;
+    z-index: 2px;
+    border-radius: 20px;
+
+}
+
+.upiClose {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 30px;
+    height: 30px;
+    background: #222;
+    color: #fff;
+    font-size: 25px;
+    font-weight: 600;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 50%;
+
+}
+
+body.upipopup-active .upipopup {
+    top: 50%;
+}
+
+body.upipopup-active .upi-overlay {
+    display: block;
+}
+
+.popup>h3 {
+    text-align: left;
+    margin-top: 0px;
+}
+
+#upicardNum {
+    display: flex;
+    justify-content: flex-start;
+    width: 30vw;
+    font-size: 12px;
+    text-align: left;
+    padding: 5px;
+    border: 0.1px solid #B22222;
+    border-radius: 10px;
+    padding: 15px;
+}
+
+#upicheckbox {
+    display: flex;
+    justify-content: flex-start;
+}
+
+#confirm {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+}
+
+#upisubmit {
+    background-color: gray;
+    border-radius: 10px;
+    border: 0px solid;
+    margin-right: 20px;
+}
+
+#examp {
+    padding-left: 5px;
+    padding-top: 15px;
+    color: rgb(43, 40, 40);
+}
 
+#upicheckbox {
+    color: rgb(43, 40, 40);
+}
+
+/*  */
+
+.upipopup1 {
+    position: fixed;
+    top: -150%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: auto;
+    background: #f5f5f5;
+    text-align: center;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 20px;
+    padding: 50px;
+    z-index: 10;
+    border-radius: 20px;
+}
+
+.upi-overlay1 {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .8);
+    z-index: 5;
+    display: none;
+
+}
+
+.upiClose1 {
+    position: absolute;
+    right: 20px;
+    top: -40px;
+    width: 30px;
+    height: 30px;
+    background: #222;
+    color: #fff;
+    font-size: 25px;
+    font-weight: 600;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 50%;
+
+}
+
+body.upipopup1-active .upipopup1 {
+    top: 50%;
+}
+
+body.upipopup1-active .upi-overlay1 {
+    display: block;
+}
+
+.upipopup1>h3 {
+    text-align: center;
+}
+
+.upipopup1>p {
+    text-align: center;
+}
+
+#upipin {
+    text-align: center;
+    margin: auto;
+    width: 100%;
+}
+
+#submitupiOtp {
+    text-align: center;
+    margin: auto;
+    margin-top: 10px;
+}
+.payAmt{
+    margin-left: 20px;
+    
+}
+#payhead{
+    padding-top: 4px;
 }
\ No newline at end of file
diff --git a/Payment.html b/Payment.html
index c4cbb43..2a68424 100644
--- a/Payment.html
+++ b/Payment.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="Payment.css"/>
+    <link rel="stylesheet" href="Payment.css" />
     <title>Payment Page</title>
-  
+
 </head>
 
 <body>
@@ -16,13 +16,15 @@
             <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                 <path d="M0 0h24v24H0z" fill="none" />
                 <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+
+
             </svg>
         </div>
         <div ID="nav1">
             <h2>Select Payment Method</h2>
             <div id="payMode">
                 <p id="payhead">Amount to pay rs:</p>
-                <h3 id="payAmt"></h3>
+                <h3 class="payAmt"></h3>
             </div>
 
         </div>
@@ -34,38 +36,71 @@ <h3>Debit or Credit Card</h3>
             <div id="paytm1">
                 <img
                     src="https://res.cloudinary.com/urbanclap/image/upload/t_high_res_category,q_auto:low,f_auto,dpr_1.25/images/monet/customer-app-monet/1622015769641-3fc187.png" />
-                <p>Add a Card</p>
-                
+                <p>Add to cart</p>
             </div>
-        </div>
-        <div class="popup">
-            <h3>Add new card</h3>
-            <input id="cardNum" type="text" maxlength="19" onkeypress="cardspace()" placeholder="Card Number"/>
-            <div class="float">
-                <input id="validtill" type="text" maxlength="7" onkeypress="addslaches()" placeholder="MM/YY"/>
-                <input id="cvv" type="text" maxlength="3" placeholder="CVV"/>
-            </div>
-            <div id="checkbox">
-                <input id="checkbox1" type="checkbox" />
-                <p>Save the card details for future use except CVV</p>
-    
-            </div>
-            <div id="confirm">
-                <h3 id="payAmt"></h3>
-                <button id="submit">save and proceed</button>
+            <div class="popup-overlay"></div>
+            <div class="popup">
+                <h3>Add new card</h3>
+                <input id="cardNum" type="text" maxlength="19" onkeypress="cardspace()" placeholder="Card Number" />
+                <div class="float">
+                    <input id="validtill" type="text" maxlength="7" onkeypress="addslaches()" placeholder="MM/YY" />
+                    <input id="cvv" type="text" maxlength="3" placeholder="CVV" />
+                </div>
+                <div id="checkbox">
+                    <input id="checkbox1" type="checkbox" />
+                    <p>Save the card details for future use except CVV</p>
+
+                </div>
+                <div id="confirm">
+                    <h3 class="payAmt"></h3>
+                    <button id="submit">save and proceed</button>
+                </div>
 
-               
+                <div class="popup-close-btn">&times</div>
             </div>
-            <div class="popup-close-btn" >&times</div>
         </div>
-        
+        <div class="popup-overlay1"></div>
+        <div class="popup1">
+            <h3>Enter OTP</h3>
+            <p>Check your mobile for OTP</p>
+            <div id="Enter_OTP">
+                <input id="otp" type="text" maxlength="4" placeholder="Enter OTP" />
+            </div>
+            <div class="popup-close-btn1">&times</div>
+            <button id="submitOtp">Submit</button>
+        </div>
+
         <div class="main">
             <h3>Wallet</h3>
             <div id="wallet1">
                 <img
                     src="https://res.cloudinary.com/urbanclap/image/upload/t_high_res_category,q_auto:low,f_auto,dpr_2.0000000298023224/images/monet/customer-app-monet/1622035139912-c6c7d1.png" />
                 <p>Paytm</p>
-                
+            </div>
+            <div class="walletPaytm"></div>
+            <div class="walletPaytm1">
+                <div>
+                    <img
+                        src="https://res.cloudinary.com/urbanclap/image/upload/t_high_res_category,q_auto:low,f_auto,dpr_2.0000000298023224/images/monet/customer-app-monet/1622035139912-c6c7d1.png" />
+                </div>
+
+                <h3>Link Payment</h3>
+                <p> Please enter the 6-digit OTP sent on your mobile number</p>
+                <div class="wallet-close-btn">&times</div>
+                <div class="userInput">
+                    <input class="userpass" type="text" maxlength="1" />
+                    <input class="userpass" type="text" maxlength="1" />
+                    <input class="userpass" type="text" maxlength="1" />
+                    <input class="userpass" type="text" maxlength="1" />
+                    <input class="userpass" type="text" maxlength="1" />
+                    <input class="userpass" type="text" maxlength="1" />
+                </div>
+                <p id="countdown">1:00</p>
+                <div id="input">
+                    <h3 class="payAmt"></h3>
+                    <button id="paytmverify">verify</button>
+                </div>
+
             </div>
         </div>
 
@@ -75,9 +110,34 @@ <h3>UPI</h3>
                 <img
                     src="https://res.cloudinary.com/urbanclap/image/upload/t_high_res_category,q_auto:low,f_auto,dpr_1.25/images/monet/customer-app-monet/1622035138755-c9ea9d.png" />
                 <p>Pay via another UPI ID</p>
-                
+            </div>
+            <div class="upi-overlay"></div>
+            <div class="upipopup">
+                <h3>Pay via UPI</h3>
+                <input id="upicardNum" type="text" maxlength="14" placeholder="Enter UPI ID" />
+                <P id="examp">Eg.8421746478@upi</P>
+                <div id="upicheckbox">
+                    <input id="upicheckbox1" type="checkbox" />
+                    <p>Save my UPI ID securarly</p>
+    
+                </div>
+                <div id="confirm">
+                    <h3 class="payAmt"></h3>
+                    <button id="upisubmit">save and proceed</button>
+                </div>
+                <div class="upiClose">&times</div>
             </div>
         </div>
+        <div class="upi-overlay1"></div>
+        <div class="upipopup1">
+            <h3>Enter OTP</h3>
+            <p>Check your mobile for OTP</p>
+            <div id="Enter_upi">
+                <input id="upipin" type="text" maxlength="4"  placeholder="Enter OTP" />
+            </div>
+            <div class="upiClose1">&times</div>
+            <button id="submitupiOtp">Submit</button>
+        </div>
 
         <div class="main">
             <h3>Netbanking</h3>
@@ -85,18 +145,16 @@ <h3>Netbanking</h3>
                 <img
                     src="https://res.cloudinary.com/urbanclap/image/upload/t_high_res_category,q_auto:low,f_auto,dpr_1.25/images/monet/customer-app-monet/1622015760056-139840.png" />
                 <p>See All Banks</p>
-                
+
             </div>
         </div>
 
         <div class="main">
             <h3>Pay after services</h3>
             <div id="cash">
-                <p>Pay online after services</p>
+                <p>Pay by cash after services</p>
             </div>
         </div>
-
-
     </div>
 
 
diff --git a/Payment.js b/Payment.js
index 4bd6bb2..cf787c1 100644
--- a/Payment.js
+++ b/Payment.js
@@ -1,35 +1,196 @@
-//console.log("ok")
+//1.pay bt card
+
+let totalAmount=localStorage.getItem("payAmount")
+let payAmt=document.querySelectorAll(".payAmt")
+
+for(let i=0;i<payAmt.length;i++){
+    payAmt[i].innerText=totalAmount
+}
 
 
-let openPopupBtn=document.querySelector("#paytm1");
-let closePopupBtn=document.querySelector(".popup-close-btn");
 
-openPopupBtn.addEventListener("click",function(){
+let openPopupBtn = document.querySelector("#paytm1");
+let closePopupBtn = document.querySelector(".popup-close-btn");
+
+
+openPopupBtn.addEventListener("click", function () {
     document.body.classList.add("popup-active")
 })
 
-closePopupBtn.addEventListener("click",function(){
+
+
+
+closePopupBtn.addEventListener("click", function () {
     document.body.classList.remove("popup-active")
 })
 
-function cardspace(){
-    let carddigit=document.getElementById("cardNum").value
+function cardspace() {
+    let carddigit = document.getElementById("cardNum").value
 
-    if(carddigit.length==4||carddigit.length==9||carddigit.length==14){
-        document.getElementById("cardNum").value=carddigit+" "
-        document.getElementById("cardNum").max=1
+    if (carddigit.length == 4 || carddigit.length == 9 || carddigit.length == 14) {
+        document.getElementById("cardNum").value = carddigit + " "
+        document.getElementById("cardNum").max = 1
     }
 
 }
 
-function addslaches(){
-    let expdate=document.getElementById("validtill").value
+function addslaches() {
+    let expdate = document.getElementById("validtill").value
 
-    if(expdate.length==2){
-        document.getElementById("validtill").value=expdate+"/"
-        document.getElementById("validtill").max=1
+    if (expdate.length == 2) {
+        document.getElementById("validtill").value = expdate + "/"
+        document.getElementById("validtill").max = 1
     }
 
 }
 
+let submit = document.querySelector("#submit");
+let closeOtp = document.querySelector(".popup-close-btn1");
+let submitOtp=document.querySelector("#submitOtp");
+
+submit.addEventListener("click", myEnter)
+   
+   function myEnter(event){
+    event.preventDafault
+        let obj={
+            cardNum:document.getElementById("cardNum").value,
+            validtill:document.getElementById("validtill").value,
+            cvv:document.getElementById("cvv").value,
+        }
+        
+        if( obj.cardNum.length<19 ){
+            alert("please Enter Valid card Number")
+        }else if(obj.validtill.length<7){
+            alert("please Enter Valid card data")
+        }else if(obj.cvv.length<3){
+            alert("please Enter Valid card data")
+        }
+        else{
+            document.body.classList.add("popup1-active")
+        }
+   }
+  
+
+closeOtp.addEventListener("click", function () {
+    document.body.classList.remove("popup1-active")
+})
+
+submitOtp.addEventListener("click",otpSub)
+   function otpSub(event){
+    event.preventDafault
+
+    let obj={
+        otp:document.getElementById("otp").value
+    }
+
+    if(obj.otp.length<4){
+        alert("please Enter Valid Data")
+    }else{
+        alert("Payment done successfully")
+        window.location.href="homepage.html"
+    }
+   }
+
+   //2.paytm
+
+
+   let openPopup=document.querySelector("#wallet1");
+   let walletcloseBtn=document.querySelector(".wallet-close-btn");
+   
+   openPopup.addEventListener("click",function(){
+       document.body.classList.add("walletPaytm1-active")
+   })
+   
+   walletcloseBtn.addEventListener("click",function(){
+       document.body.classList.remove("walletPaytm1-active")
+   })
+   
+   
+   const starttime=1
+   let time= starttime*60;
+   let countdown=document.getElementById("countdown")
+   
+   setInterval(updatcount,1000)
+   
+   function  updatcount(){
+       let minutes=Math.floor(time/60)
+   
+       let sec=time%60
+   
+       countdown.innerHTML=`${minutes}:${sec}`;
+       time-- ;
+         
+   }
+
+   let paytmverify=document.getElementById("paytmverify")
+
+   paytmverify.addEventListener("click" ,subpaytm)
+
+     function subpaytm(){
+        let userpass=document.querySelector(".userpass").value
+        if(userpass.length<1){
+            alert("please Enter Valid Data")
+        }else{
+            alert("Payment done successfully")
+            window.location.href="homepage.html"
+        }
+        
+     }
+
+    //  upi payment
+    let upi = document.querySelector("#upi");
+    let upiClose = document.querySelector(".upiClose");
+
+
+    upi.addEventListener("click", upifun)
+
+    function upifun() {
+        document.body.classList.add("upipopup-active")
+    }
+
+    upiClose.addEventListener("click", function () {
+        document.body.classList.remove("upipopup-active")
+    })
+
+    let upisubmit = document.getElementById("upisubmit")
+    let upiClose1 = document.querySelector(".upiClose1");
+
+    upisubmit.addEventListener("click", submitupi)
+
+
+    function submitupi(event) {
+        let upicardNum=document.getElementById("upicardNum").value
+
+        if(upicardNum.length<14){
+            alert("please Enter Valid Data")
+        }else{
+            document.body.classList.add("upipopup1-active")
+        }
+
+    }
+    let submitupiOtp=document.getElementById("submitupiOtp")
+    submitupiOtp.addEventListener("click",subotp)
+
+    function subotp(event){
+
+        let upipin=document.getElementById("upipin").value
+
+        console.log(upi.length)
+
+        if(upipin.length<4){
+            alert("please Enter Valid Data")
+        }else{
+            alert("Payment done successfully")
+            window.location.href="homepage.html"
+        }
+
+
+
+    }
+
+    upiClose1.addEventListener("click", function () {
+        document.body.classList.remove("upipopup1-active")
+    })
+
 
+    
\ No newline at end of file