payment.css

body{
    background-color: #f3f3f3;
    /* position:fixed; */
}
#navbar{
    width:100%;
    height:80px;
    margin-top: -10px;
    background-color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px;
    display:flex;
}
#navbar>div:first-child(){
    border:1px solid red;
}
/* #navbar>img{
    width:100%;
} */

#paymentof{
    display: flex;
}

#info{
  width:85%;
  height:auto;
  border:1px solid rgb(83, 199, 235); 
  margin: 30px auto;
  display: flex;
  background-color: #f2fdff;
  border-radius: 10px;
  
}
/* #info>div>h3{
    font-family: Inter, Roboto, Arial, sans-serif;
} */
#info>div:first-child{
    width:5%;
   
}
#info>div>img{
  width:40%;
  display: block;
  padding: 18px 0px 0px 18px;
}
/* ---------------------------------------------- */
#heading{
    width:85%;
    /* border: 1px solid black; */
    margin: auto;
}
#heading>h3{
    padding-left: 30px;
    font-family: Inter, Roboto, Arial, sans-serif;
}
/* ------------------------------------------------ */
#container{
    width:85%;
    height:auto;
    /* border:1px solid green; */
    margin: auto auto auto 100px ;
    display: flex;
    gap:1%;
    
}
.first{
    width:25%;
    height:auto;
    /* border:1px solid red; */
    display:grid;
    background-color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px;
    
    
}
.second{
    width:40%;
    height:300px;
    background-color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px;
    /* border:1px solid red; */
}

.first>div{
    width:100%;
    border-bottom:1px solid grey;
   
}
.first>div>p{
    font-size: 20px;
    color: darkslategrey;
    padding-left: 10px;
    font-family: Inter, Roboto, Arial, sans-serif;
    
}
.first>div>p:hover{
    color:#e70e61;
    cursor: pointer;
    font-weight: bold;
    
}

/* ---------------------------------------------------------- */
.second>div:first-child{
    width:100%;
    border-bottom:1px solid grey;

}
.second>div:first-child>p{
    font-size: 20px;
    font-family: Inter, Roboto, Arial, sans-serif;
    font-weight: bold;
    padding-left: 10px;
}
/* .second>div:nth-child(2){
    width:100%;
    border:1px solid grey;
}
.second>div:nth-child(2)>input{
    width:80%;
    height:58px;
} */
input:first-child{
    width:80%;
    height:60px;
    padding-left: 10px;
    margin: 10px auto 10px;
    margin-left: 10px;
    border: transparent;
    border-bottom: 1px solid black;
}
#date{
    height:50px;
    margin-top: 10px;
    margin-left: 10px;
    border: transparent;
    border-bottom: 1px solid black;
}
#date::placeholder{
    padding-left: 10px;
}
#cvv{
    height:50px;
    width:50px;
    border: transparent;
    border-bottom: 1px solid black;
    margin-left: 20px;
}
::placeholder{
    font-size: 20px;
}
label{
    font-size: 20px;
    color:rgb(92, 88, 88);
    padding-left: 20px;
    
}
#submit{
    width:100%;
    height:60px;
    font-size: 20px;
    margin: 30px auto;
    background-color: #fc2779 ;
    color:white;
}
#bottom{
    width:100%;
}
/* --------------------------------------------------- */
.third{
    width:35%;
    height:550px;
    /* border:1px solid red; */
    
   
}
#up{
    width:100%;
    height:auto;
    /* border:1px solid blue; */
    background-color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px;
}
#down{
    width:100%;
    height:200px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px;
  
}
#up>div{
    width:100%;
    height:75px;
    /* border:1px solid black; */
   
}
#up>div>div>p{
    /* text-align: center; */
    padding-left: 20px;
    padding-top: 10px;
    font-family: Inter, Roboto, Arial, sans-serif;
}
#one{
    display:flex;
    border-bottom:1px solid grey
}
#one>div:first-child{
  width:70%;
  height:100%;
  /* border:1px solid red;   */
}
#one>div:nth-child(2){
    width:30%;
    height:100%;
    /* border:1px solid blue;  */
    
}
#one>div:first-child>p{
    font-weight: bold;
    color:orange;
}
#one>div:last-child>p{
    font-weight: bold;
    color:red;
}
#two{
    display:flex;
    
}
#two>div:first-child{
  width:70%;
  height:100%;
  /* border:1px solid red;   */
}
#two>div:nth-child(2){
    width:30%;
    height:100%;
    /* border:1px solid blue;   */
}
#three{
    display:flex;
    border-bottom:1px solid grey

}
#three>div:first-child{
  width:70%;
  height:100%;
  /* border:1px solid red;   */
}
#three>div:nth-child(2){
    width:30%;
    height:100%;
    
    /* border:1px solid blue;   */
}
#three>div:nth-child(2)>p{
   
    color:rgb(20, 184, 20);
}

#four{
    display:flex;
    border-bottom:1px solid grey
}
#four>div:first-child{
  width:70%;
  height:100%;
  /* border:1px solid red;   */
}
#four>div:nth-child(2){
    width:30%;
    height:100%;
    /* border:1px solid blue;   */
}

/* font-family: Inter, Roboto, Arial, sans-serif; */
#down>div{
    width:100%;
    height: auto;
    /* border:1px solid red; */
   
}
#five{
    display: flex;
}
#five>div:first-child{
    width:70%;
    height:100%;
    /* border:1px solid blue; */
}
#five>div:nth-child(2){
    width:30%;
    height:100%;
    /* border:1px solid blue; */
}
#five>div:first-child>p{
padding-left: 10px;
font-family: Inter, Roboto, Arial, sans-serif;
font-weight: bolder;

}
#five>div:nth-child(2)>p{
padding-left: 10px;
font-family: Inter, Roboto, Arial, sans-serif;
font-weight: bold;
color:red

}
#six>p{
    padding-left: 10px;
    font-family: Inter, Roboto, Arial, sans-serif; 
}
#seven>p{
    padding-left: 10px;
    font-family: Inter, Roboto, Arial, sans-serif; 
}
#eight>p{
    padding-left: 10px;
    font-family: Inter, Roboto, Arial, sans-serif; 
}