.checkout-payment-sub{



    width: 84%;

    margin: auto;

}



.payment-details{
    height: 556px;
    width: 67%;
    border: 1px solid var(--second-border-color);
}

.payment-method-heading{
    background-color: #F7F7F7;
    width: 100%;
    border-bottom: 1px solid var(--second-border-color);
}

.payment-method-heading h1{
    color: var(--heading-color);

    font-size: 20px;

    font-weight: 500;

    text-transform: capitalize;

    letter-spacing: 0.7px;

    padding: 15px;

}



.payment-options{



    border: 1px solid var(--second-border-color);

    width: 96%;

    gap: 10px;

    padding: 10px;

    margin: auto;

    display: flex;

}



.credit-card{

    width: 150px;

}



.credit-card:hover{



    background-color: var(--heading-color);

    color: #fff;

}



.payment-method-cp{



    font-size: 16px;

    color: var(--heading-color);

    letter-spacing: 0.7px;

    font-weight: 500;

    text-transform: capitalize;

    padding: 10px;

    transition: all 0.2s linear;

}



.netbancking-card{

    width: 150px;

}



.netbancking-card:hover{



    background-color: var(--heading-color);

    color: #fff;

}



.paypal{



    width: 100px;

}



.paypal:hover{



     background-color: var(--heading-color);

    color: #fff;

}



.payment-card-details{



    margin: 14px 0;

}



.cp-field-name input{



    border: 1px solid var(--second-border-color);

    padding: 10px;

    outline: none;

    text-transform: capitalize;

    letter-spacing: 0.7px;

    font-size: 14px;

    width: 100%;

}



.cp-field-name input::placeholder{



    color: rgba(212, 212, 213, 0.913);

    font-size: 16px;

    font-weight: 500;

}



.cp-field-name input:focus{



    box-shadow: var(--focus-box-shadow);

    border-color: #86b7fe;

}



.card-details{



    width: 96%;

    margin: 18px;

    border: 1px solid var(--second-border-color);

}



.form-fieldscp{

    display: block;

    width: 100%;

    padding: 10px;

}



.label-name-cp{



        padding: 10px 0 11px 0;

}



.card-imgs-section{

    display: flex;

    width: 20%;

    border-top: 1px solid var(--second-border-color);

    border-right: 1px solid var(--second-border-color);

    border-bottom: 1px solid var(--second-border-color);



}



.card-imgs-block:first-child{



    border-left: none;

}



.card-imgs-block {

    

    width: 80px;

    padding: 5px 0;

    text-align: center;

    background-color: #E9ECEF;

    border-left: 1px solid var(--second-border-color);

    align-content: center;

}



.card-imgs-block img{



        width: 69%;



}



.cards-fields{

    display: flex;

}



.cards-fields .cp-field-name{



    width: 95%;

}



.expiration-date-block{



    display: flex;

     width: 100%;

}



.confirm-payment{



    color: #fff;

    background-color: var(--heading-color);

    font-weight: 500;

    font-size: 14px;

    padding: 8px;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    cursor: pointer;

    transition: all 0.2s linear;

    border: none;

    width: 100%;

    margin: 15px 0;

}



.confirm-payment:hover{



    background-color: var(--fade-background-color);

}



.border-bottom{

    margin: 10px 0;

    height: 2px;

    width: 100%;

    background-color:var(--second-border-color);

}



.checkout-payment-details{

    display: flex;

    gap:30px;

}