*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a:hover
{
    text-decoration: none;
}
ul
{
    list-style: none;
}
body
{
    width: 100%;
    overflow-x: hidden;
}
html
{
    scroll-behavior: smooth;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
/*end global rules*/
/*start checkout section*/
.checkout
{
    width: 100%;
    overflow-x: hidden;
    padding-top: 70px;
    padding-bottom: 70px;
}
.check-header h4
{
    background-color:  #ecfdff;
    font-size: 15px;
    line-height: 40px;
    text-transform: capitalize;
    padding-left: 10px;
    letter-spacing: 1.2px;
}
.check-header a
{
    color: #e83e8c;
}
.check-header p
{
    font-size: 14px;
    font-weight: bold;
    line-height: 50px;
}
.check-header #check-mail,
.check-header #check-pass
{
    width: 35%;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-right: 13%;
    padding-left: 15px;
    outline: 1px solid transparent;
}
.check-header #check-mail:focus,
.check-header #check-pass:focus
{
    outline: 1px solid #007bff;
}
.check-header #check-sub
{
    width: 140px;
    height: 45px;
    margin-top: 25px;
    background-color: #e83e8c;
    border: 1px solid #e83e8c;
    border-radius: 20px;
    color: #fff;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-right: 15px;
    transition: .5s;
}
.check-header #check-sub:hover
{
    background-color: #dc3545;
    border: 1px solid #dc3545;
}
.check-header label
{
    padding-left: 10px;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.check-header .lost
{
    color: #777;
    line-height: 50px;
    text-transform: capitalize;
}
.copon-head h4
{
    background-color:  #ecfdff;
    font-size: 15px;
    line-height: 40px;
    text-transform: capitalize;
    padding-left: 10px;
    letter-spacing: 1.2px;
}
.copon-head a
{
    color: #e83e8c;
    padding-left: 5px;
}
.copon-head #copon-code
{
    width: 60%;
    margin-right: 39%;
    height: 45px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 20px;
    padding-left: 15px;
    margin-top: 20px;
    outline: 1px solid transparent;
}
.copon-head #copon-but
{
    width: 150px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: black;
    line-height: 35px;
    text-transform: capitalize;
    letter-spacing: 1px;
    transition: .6s;
}
.copon-head #copon-but:hover
{
    background-color: var(--pink);
    border-color: var(--pink);
    color: #fff;
}
.billing-detailes h3
{
    text-transform: capitalize;
    font-weight: bold;
    line-height: 70px;
    font-size: 19px;
}
.billing-detailes #bill-name,
.billing-detailes #bill-mail,
.billing-detailes #bill-number
{
    width: 47%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-right:1%;
    padding-left: 15px;
    outline: 1px solid transparent;
    margin-bottom: 20px;
}
.billing-detailes #company-name,
.billing-detailes #bill-select,
.billing-detailes #bill-address,
.billing-detailes #bill-post
{
    width: 97%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-right:1%;
    padding-left: 15px;
    outline: 1px solid transparent;
    margin-bottom: 20px;
}
.billing-detailes h4
{
    text-transform: capitalize;
    font-weight: bold;
    line-height: 40px;
    font-size: 19px;
}
.billing-detailes textarea
{
    width: 98%;
    height: 110px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-right:1%;
    padding-left: 15px;
    outline: 1px solid transparent;
    padding-top: 10px;
    margin-top: 25px;
}
@media(max-width:600px)
{
.check-header #check-sub
{
    display: block;
    margin: auto;
    margin-bottom: 15px;
}
.check-header #check-mail,
.check-header #check-pass
{
    width: 100%;
    margin-bottom: 20px;
}
.copon-head #copon-code
{
    width: 100%;
}
.billing-detailes #bill-name,
.billing-detailes #bill-mail,
.billing-detailes #bill-number
{
    width: 100%;
}
.billing-detailes #company-name,
.billing-detailes #bill-select,
.billing-detailes #bill-address,
.billing-detailes #bill-post
{
    width: 100%;
}
}
/*start order process*/
.order-process
{
    width: 100%;
    background-color: #ecfdff;
    padding-left: 15px;
    margin-top: 50px;
}
.order-process h3
{
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    padding-top: 10px;
    border-bottom: 1px solid #ddd;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.process-text
{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    line-height: 30px;
}
.process-text p
{
    font-size: 15px;
    padding-top: 10px;
}
.process-text span
{
    padding-right: 20px;
    font-size: 15px;
    padding-top: 5px;
    line-height: 30px;
}
.process-text h4
{
    text-transform: capitalize;
    padding-top: 5px;
    line-height: 25px;
}
.order-process label
{
    padding-top: 20px;
    padding-bottom: 10px;
}
.pay-advice
{
    width: 90%;
    margin-left: 5%;
    border-radius: 10px;
    background-color: #fff;
}
.pay-advice p
{
    padding: 12px 16px;
    line-height: 30px;
}
.order-process label
{
    font-size: 13px;
    color: black;
    padding-left: 5px;
}
.order-process a
{
    color: #e83e8c;
    padding-left: 5px;
}
.process-button
{
    width: 90%;
    height: 55px;
    margin-left:5%;
    background-color: #e83e8c;
    color: #fff;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-size: 19px;
    border: 1px solid #e83e8c;
    border-radius: 25px;
    margin-bottom: 25px;
    margin-top: 20px;
    transition: .6s;
}
.process-button:hover
{
    background-color: var(--danger);
    border: 1px solid var(--danger);
}
/*end checkout section*/