.checkout-page{
background: var(--Base-Off-White, #FAFAFA);
margin-top: 123px;
padding: 80px;
}
.pc-txt{
    color: var(--Base-Off-Black, #0F0F0F);
text-align: center;
margin:0px;
font-family: "Google Sans Flex";
font-size: 56px;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 67.2px */
letter-spacing: -0.56px;
text-transform: capitalize;
}
.checkkk{
    display:flex;
    justify-content:center;
    align-items:center;
}
.os-cont{
    border-radius: 8px;
background: var(--Base-White, #FFF);
    display: flex;
padding: 24px;
justify-content: center;
align-items: flex-start;
flex: 1 0 0;
max-width:1256px;
align-self: stretch;
}
.os-box{
    display: flex;
padding: 40px;
flex-direction: column;
justify-content: center;
gap: 40px;
border-radius: 8px;
background: var(--Base-Off-White, #FAFAFA);
flex: 1 0 0;
}
.order-sum{
    display:flex;
    flex-direction: column;
    gap:24px;
}
.os-large{
    color: var(--Base-Off-Black, #0F0F0F);
font-feature-settings: 'liga' off, 'clig' off;
margin: 0px;
font-family: "Google Sans Flex";
font-size: 24px;
font-style: normal;
text-align: start;
font-weight: 500;
line-height: 130%; /* 31.2px */
text-transform: capitalize;
}

.os-item{
    color: var(--Base-Off-Black, #0F0F0F);
font-feature-settings: 'liga' off, 'clig' off;
margin: 0px;
font-family: "Google Sans Flex";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 23.4px */
text-transform: capitalize;
}
.disc{
    border-radius: 4px;
background: rgba(71, 177, 71, 0.10);
display: flex;
padding: 8px;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.disc-txt{
    color: var(--Base-Success-Green, #47B147);
margin: 0px;
font-family: "Google Sans Flex";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}

.per-det{
padding: 40px;
padding-left:88px;
display: flex;
flex-direction: column;
gap: 24px;
width: 628px;
}
.check-inp-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:24px;
}
.check-inp{
    border-radius: 4px;
border: 1px solid var(--Base-04, #E9E9E9);
background: var(--Base-Off-White, #FAFAFA);
display: flex;
height: 56px;
padding: 16px 24px;
align-items: center;
gap: 8px;
align-self: stretch;
}
.check-inp::placeholder,.check-ip{
    color: var(--Base-02, #727272);
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}
.country-check{
    border-radius: 4px;
border: 1px solid var(--Base-04, #E9E9E9);
background-color: var(--Base-Off-White, #FAFAFA);
display: flex;
height: 56px;
padding: 16px 24px;
align-items: center;
gap: 8px;
align-self: stretch;
}
.term-box{
    display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.mp-black{
    border-radius: var(--Sml, 4px);
background: var(--Base-Off-Black, #0F0F0F);
display: flex;
height: 56px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
color: var(--Base-Off-White, #FAFAFA);
text-align: center;
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}
.custom-checkbox{
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
   
}
.custom-checkbox p{
     color: var(--Base-Off-Black, #0F0F0F);
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 25.6px */
margin: 0px;
}
.custom-checkbox p a{
    color: var(--brand-blue, #2C6AFB);
text-decoration: none;
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 160%;
}
.custom-checkbox input {
    display: none;
}

.checkmark {
    width: 24px;
    height: 24px;
    border: 1px solid #0F0F0F;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.custom-checkbox input:checked + .checkmark::after {
    content: "";
    width: 14px;
    height: 14px;
    background:#2C6AFB;   /* Change dot color here */
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
}
.sub-tot{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 16px;
}
.promo-code{
    border-radius: 4px;
border: 1px solid var(--Base-04, #E9E9E9);
background: var(--Base-White, #FFF);
display: flex;
height: 56px;
padding: 8px 8px 8px 24px;
align-items: center;
gap: 8px;
align-self: stretch;
}
.promo-inp{
    border: none;
    background: none;
    width: 100%;
}
.promo-inp::placeholder{
color: var(--Base-02, #727272);
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}
.promo-btn{
    display: flex;
width: 128px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 2px;
background: var(--Base-Off-Black, #0F0F0F);
color: var(--Base-Off-White, #FAFAFA);
text-align: center;

/* P/Btn */
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}
.total-amt{
    color: var(--brand-blue, #2C6AFB);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
margin: 0px;
font-family: "Google Sans Flex";
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 31.2px */
text-transform: capitalize;
}
.product_pc{
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
.product-line{
    display: flex;
height: 54px;
padding: 10px 24px;
justify-content:space-between;
align-items: center;
gap: 24px;
align-self: stretch;
border-radius: 8px;
background: var(--Base-White, #FFF);
}
.line-off{
    display: flex;
align-items: center;
gap: 16px;
}
.price_cancel{
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}
.checkoutt{
background: var(--Base-Off-White, #FAFAFA);
margin-top: 123px;
padding: 0px;
}
.order-s1{
    display: flex;
padding: 64px 0;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
}
.order-s1 img{
width: 80px;
height: 80px;
}
.order-s1 p{
    color: var(--Base-Off-Black, #0F0F0F);
text-align: center;
margin: 0px;
font-family: "Google Sans Flex";
font-size: 56px;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 67.2px */
letter-spacing: -0.56px;
text-transform: capitalize;
}
.order-s2{
    display: flex;
padding-bottom: 104px;
flex-direction: column;
align-items: center;
gap: 48px;
align-self: stretch;
}
.sparcle-box{
    display: flex;
width: 800px;
padding: 40px;
flex-direction: column;
align-items: flex-start;
gap: 40px;
border-radius: 12px;
border: 1px solid var(--Base-04, #E9E9E9);
background: var(--Base-White, #FFF);
}
.sparcle-cont{
    display: flex;
padding: 24px;
flex-direction: column;
align-items: center;
gap: 16px;
align-self: stretch;
border-radius: 12px;
background: var(--Base-Off-White, #FAFAFA);
}
.sp-text{
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.sp-text h1{
    color: var(--Base-Off-Black, #0F0F0F);
font-feature-settings: 'liga' off, 'clig' off;
margin: 0px;
font-family: "Google Sans Flex";
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 56px */
text-transform: capitalize;
}
.sp-text p{
    color: var(--Base-02, #727272);
margin: 0px;
font-family: "Google Sans Flex";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.purchase-det{
    display: flex;
    width: 100%;
    justify-content:space-between;
    align-items: center;
}
.purchase-bx{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.purchase-pd{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: end;
}
.on-txt{
color: var(--grayscale-02, #727272);
margin: 0px;
font-family: "Google Sans Flex";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.pd-txt{
    color: var(--Base-Off-Black, #0F0F0F);
font-feature-settings: 'liga' off, 'clig' off;
margin: 0px;
font-family: "Google Sans Flex";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 23.4px */
text-transform: capitalize;
}
.spark-buttons{
    display: flex;
    gap: 24px;
}
.spark-bbtn{
    display: flex;
width: 240px;
height: 56px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 4px;
background: var(--Base-Off-Black, #0F0F0F);
color: var(--Base-Off-White, #FAFAFA);
text-align: center;
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}
.spark-wbtn{
display: flex;
width: 240px;
height: 56px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 4px;
border: 1px solid var(--Base-04, #E9E9E9);
background: var(--Base-White, #FFF);
color: var(--Base-Off-Black, #0F0F0F);
text-align: center;
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
}

@media only screen and (max-device-width: 600px) {
    .product_pc{
        display:none !important;
    }
    .check-inp-box{
        gap:16px;
    }
    .pc-txt{
        color: var(--Base-Off-Black, #0F0F0F);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
margin:0px;
font-family: "Google Sans Flex";
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -1px;
text-transform: capitalize;
    }
    .sub-tot .os-item{
        color: var(--Base-Off-Black, #0F0F0F);
margin:0px;
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 25.6px */
    }
    .checkout-page,.checkoutt{
    padding: 0px;
    margin-top: 90px;
    }
    .os-cont{
    flex-direction: column;
    max-width: 200%;
    padding: 0px;
    }
    .os-box{
    padding: 40px 24px;
    gap: 24px;
    }
    .per-det {
        padding: 40px 24px;
    width: 100%;
    }
    .order-s1{
        padding: 40px 0px;
    }
    .order-s2{
        padding: 0px 24px 40px 24px;
    }
    .sparcle-box{
        padding: 24px;
        width: auto;
    }
    .purchase-det,.spark-buttons{
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }
    .purchase-bx,.purchase-pd{
        align-items: center;
    }
    .spark-buttons a{
       width: 100%;
    }
    .sp-text h1{
        font-size: 24px;
    }
    .pr-line{
        display: flex;
padding: 16px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 8px;
background: var(--Base-White, #FFF);
    }
    .product-line{
        padding: 0px;
        height: auto;
    }
    .product-mob{
     display: flex !important;
     flex-direction: column;
     gap: 16px;
    }
    .product-linee{
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .product-linee span{
        color: var(--Base-Off-Black, #0F0F0F);
font-family: "Google Sans Flex";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 25.6px */
    }
    .pr-linee{
        display: flex;
padding: 12px 16px;
justify-content:space-between;
align-items: center;
gap: 24px;
align-self: stretch;
border-radius: 8px;
background: var(--Base-White, #FFF);
    }
}

@media only screen and (min-device-width: 1200px) and (max-device-width: 1348px) {
   
}

@media only screen and (min-device-width: 1349px) and (max-device-width: 1439px) {
   
}
@media only screen and (min-device-width: 1440px) and (max-device-width: 1499px) {

}

@media only screen and (min-device-width: 1500px) and (max-device-width: 1599px) {

}

@media only screen and (min-device-width: 1600px) and (max-device-width: 1699px) {
    
}

@media only screen and (min-device-width: 1700px) and (max-device-width: 1799px) {
    
}

@media only screen and (min-device-width: 1800px) and (max-device-width: 1919px) {

}

@media only screen and (max-device-width: 1920px) {
   
}