*{
    margin: 0;
    padding: 0;

  
}
::-webkit-scrollbar {
  display: none;
}
  h1,h2,h3,h4,h5,h6,span{
        font-family: var(--headings-font);
        font-weight: lighter;
    }
    p,a,select,input,option,textarea{
      font-family: var(--bodytext-font);
    }
:root{
    --color-background: #FFFFFF;      /* White background */
  --color-primary: #910a2c;         /*  maroon primary color for important headings, keys and titles */
  --color-text: #222222;            /* Almost-black for high readability */
  --color-btn-link-icons: #590016;          /* Use maroon for buttons, links and icons */
  --color-btn-link-icons-hover: #a70d39;    /* Darker maroon for hover states */
  --color-border: #EDEDED;          /* Soft gray for dividers */
   --color-notification-alert: #f38e8e;       /* Soft blush light red for notification and alerts*/
   --headings-font: 'Playfair Display', serif;
   --bodytext-font: "Forum", serif;
   --logofont:"Great Vibes", cursive;
}

/* checkout section starts here */

.checkout{
    width: 100vw;
    min-height: 100vh;
    margin-top: 5rem;
    padding-top: 5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    

    
}
.checkout .checkout-info{
display: flex;
flex-direction: column;
width: 50%;
align-items: end;
border-right: 1px solid var(--color-border);
}
.checkout .checkout-info .info-wrapper{
width: 70%;

}

.checkout .checkout-info .info-wrapper form .contact{
    display: flex;
    flex-direction: column;
    height: 180px;
    justify-content: space-evenly;



}
.checkout .checkout-info .info-wrapper form .contact .inputs{
   display: flex;
    flex-direction: column;
    justify-content: space-evenly;
        height: 100px;
}
.checkout .checkout-info .info-wrapper form .contact .inputs input[type="email"],.checkout .checkout-info .info-wrapper form .delivery .select select , .checkout .checkout-info .info-wrapper form .delivery .inputs input, .checkout .checkout-info .info-wrapper form .shipping-method .karachi, .checkout .checkout-info .info-wrapper form .shipping-method .other-city, .checkout .checkout-info .info-wrapper form .payment-method .Cod, .checkout .checkout-info .info-wrapper form .payment-method .bank-deposit{


     width: 85%;
     height: 40px;
     border-radius: 7px;
        font-size: 1rem;
         padding-left: 1rem;
         border: none;
         border: 1px solid rgba(0,0,0,0.2);

}
.checkout .checkout-info .info-wrapper form .contact .inputs input[type="email"]:focus,.checkout .checkout-info .info-wrapper form .delivery .select select:focus, .checkout .checkout-info .info-wrapper form .delivery .inputs input:focus{
outline: none;
border: 2px solid var(--color-btn-link-icons-hover);
}
.checkout .checkout-info .info-wrapper form .contact .inputs .checkbox{
    display: flex;
height: 40px;

align-items: center;
}


.checkout .checkout-info .info-wrapper form .contact .inputs .checkbox p{
    margin-left: 0.5rem;
}
/* customized checkbox */
     input[type="checkbox"] {
            width: 20px;
            height: 20px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
          transition-duration: 0.2s;
            border: 1px solid var(--color-btn-link-icons-hover);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            
        }
  input[type="checkbox"]:checked {
   background-color: var(--color-btn-link-icons-hover);
        }
       input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 1px;
            width: 5px;
            height: 10px;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            border-color: var(--color-background);
            border-style: solid;
        }

/*customized checkbox */

.checkout .checkout-info .info-wrapper form .delivery{
     display: flex;
    flex-direction: column;
    justify-content: space-evenly;
        height: 380px;
}

.checkout .checkout-info .info-wrapper form .delivery .select{
    width: 90%;
    height: 50px;
             display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.checkout .checkout-info .info-wrapper form .delivery .select select{
    height: 100% !important;
    width: 100% !important;
    color: var(--color-text);
    font-size: 1.1rem;
 
}
.checkout .checkout-info .info-wrapper form .delivery .inputs {
    width: 90%;
    height: 250px;
         display: flex;
    flex-direction: column;
    justify-content: space-evenly;

}
.checkout .checkout-info .info-wrapper form .delivery .inputs  .inline-div{
    width: 100%;
    display: flex;
    justify-content: space-between;


}

.checkout .checkout-info .info-wrapper form .delivery .inputs .inline{


    width: 200px !important;
   

}

.checkout .checkout-info .info-wrapper form .delivery .inputs input{
    width:96% !important;
        height: 40px;
}

 .checkout .checkout-info .info-wrapper form .shipping-method{
    
    width: 100%;
height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
 }

 .checkout .checkout-info .info-wrapper form .shipping-method .karachi , .checkout .checkout-info .info-wrapper form .shipping-method .other-city{
 width: calc(90% - 2rem);
    height: 50px;
    display: flex;
    justify-content: space-between;
align-items: center;
    padding-right: 1rem;
 }
 .checkout .checkout-info .info-wrapper form .shipping-method .radio-div{
 display: flex;
 align-items: center;
justify-content: space-evenly;
width: 160px;


}
 .checkout .checkout-info .info-wrapper form .shipping-method .karachi, .checkout .checkout-info .info-wrapper form .payment-method .Cod{
    border: 1px solid var(--color-btn-link-icons-hover);
    background-color:rgba(166, 12, 56, 0.084);
 }
 .checkout .checkout-info .info-wrapper form .shipping-method .karachi .radio-div{
width: 110px !important;
 }



 .checkout .checkout-info .info-wrapper form .payment-method{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
   min-height: 300px;

 }
 .checkout .checkout-info .info-wrapper form .payment-method .Cod, .checkout .checkout-info .info-wrapper form .payment-method .bank-deposit{
    height: 50px;
    display: flex;
    justify-content: start;
    align-items: center;
 width: calc(90% - 2rem);

padding-left: 1rem;

 }


 .checkout .checkout-info .info-wrapper form .payment-method .Cod .Cod-div ,.checkout .checkout-info .info-wrapper form .payment-method .bank-deposit .bank-deposit-div{
    height: 50px;
    display: flex;
 align-items: center;
justify-content: space-evenly;
width: 200px;
 }
.checkout .checkout-info .info-wrapper form .payment-method  .collapse-div{
  position: relative;

}
.checkout .checkout-info .info-wrapper form .payment-method  .collapse-div .bank-info{
  top: -6vh;
  z-index: 1;
position: relative;
min-height: 300px;
padding: 0rem 2rem;
width: calc(90% - 4.8rem);
background-color:var(--color-border);
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: start;
flex-wrap: wrap;
display: none;

}
.checkout .checkout-info .info-wrapper form .payment-method  .collapse-div .bank-info .bank{
  width: 100%;
 
}
.checkout .checkout-info .info-wrapper form .payment-method .bank-deposit .bank-deposit-div{
    width: 140px;
   
} 
.complete-order{
width: calc(90% - 1rem); 
margin-top: 2rem;
}
.complete-order button {
  border: none;
  width: 100%;
  height: 4em;
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: var(--color-primary);
  cursor: pointer;
  transition: all 450ms ease-in-out;
}



.complete-order button .text {
  font-size: 1.2rem;
  color: var(--color-background);
  letter-spacing: 1px;

}

.complete-order button:hover {
  background: linear-gradient(0deg,var(--color-btn-link-icons-hover),var(--color-notification-alert));
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(255, 255, 255, 0.2),
  0px 0px 180px 0px var(--color-primary);
  transform: translateY(-2px);
}

.complete-order button .text  {
  color: white;
   text-decoration: none;
}







/* customized radio button */ 

.radio-group {
  display: flex;
  flex-direction: column;
}



.radio-input {
  position: absolute;
  opacity: 0;
}


.radio-label:hover {
    cursor: pointer;
}

.radio-inner-circle {
  display: inline-block;
 background-color: var(--color-background); 
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  margin-right: 0.5em;
  transition: border-color 0.2s;
  position: relative;
  width: 1em;
  height: 1em;
}



.radio-input:checked + .radio-label .radio-inner-circle {
  border-color: var(--color-btn-link-icons-hover);
}

.radio-input:checked + .radio-label .radio-inner-circle::after {
  content: '';
  display: block;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--color-background);
  border-radius: 50%;
  position: absolute;
  border: 6px solid var(--color-primary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
/* customized radio button */ 





















 
.checkout .bill{
  display: flex;
width: 40%;
justify-content: start;
align-items: start;




}
.checkout .bill .order-summary{
  width: 80%;
position: sticky;
top: 150px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  
  }
  .checkout .bill .order-summary h1{
    text-align: center;
    margin-bottom: 1rem;
  }
.checkout .bill .order-summary .order{
    width: 100%;
margin-bottom: 2rem;
      display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.checkout .bill .order-summary .order .order-img{

    width: 350px;
    max-width: 100%;
    height: 100px;
    display: flex;
align-items: center;
    justify-content: space-between;
}
.checkout .bill .order-summary .order .order-img .quantity-div{
  height: 100px;
  width: 100px;
  position: relative;
}
.checkout .bill .order-summary .order .order-img .quantity-div::before{
position: absolute;
content: "1";
top: -9px;
right: -5px;
width: 25px;
border-radius: 50%;
height: 25px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
line-height: 1.5;
color: var(--color-background);
font-family: var(--bodytext-font);

}
.checkout .bill .order-summary .order .order-img img{
    width: 100px;
height: 100%
}
.checkout .bill .order-summary .order .order-img .about-img{
 
    display: flex;
    flex-direction: column;
    justify-content: center;
  
  
}
.checkout .bill .order-summary .order .order-img .about-img .desc{
    font-size: 1.2rem;
  
}
.checkout .bill .order-summary .order .order-img .about-img .size{
color:#000000cc ;
}
.checkout .bill .order-summary .order .order-price{
    width: 150px;
display: flex;
align-items: center;
justify-content: center;
    height: 90px;
}
.checkout .bill .subtotal-main{
      width: 90%;
      display: flex;
      height: 150px;
      flex-direction: column;
      justify-content: space-evenly;
}
.checkout .bill .subtotal-main .subtotal-children{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;


}
.checkout .bill .subtotal-main .subtotal-children .pkr h1 span{
  font-family: var(--headings-font);
  color: var(--color-text);
}
.checkout .bill .subtotal-main .subtotal-children .pkr{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 150px;

}
.checkout .bill .subtotal-main .subtotal-children .pkr span{
  color: rgba(0, 0, 0, 0.7);
}





/* checkout section starts here */









@media (max-width:1200px) {
.checkout .bill .subtotal-main{
      width: 95%;
    
}
   .checkout{
  
display: flex;
  align-items: center;
       flex-direction: column;
    justify-content: space-evenly;

   
  
} 
.checkout .bill{
display: flex;
flex-direction: column;
width: 80%;
align-items: center;
 padding-top: 5rem;
}


.checkout .bill .order-summary{
  width: 100%;
  height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
  }
.checkout .bill .order-summary .order{
    width: 100%;
    height: 100px;
      display: flex;
    flex-direction: row;
    justify-content: space-between;
}



    .checkout{
    flex-direction: column;
  align-items: center;
    justify-content: space-evenly;
} 


.checkout .checkout-info{
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.checkout .checkout-info .info-wrapper{
width: 70%;

}
.checkout .checkout-info .info-wrapper form .payment-method,.shipping-method{

   min-height: 300px;

 }
}

@media (max-width:700px) {
.checkout{
  flex-direction: column-reverse;
}
  .checkout .checkout-info .info-wrapper form .delivery .inputs {
    width: 90%;
    height: 350px;
   
}
  .checkout .checkout-info .info-wrapper form .delivery .inputs  .inline-div{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
height: 100px;


}

.checkout .checkout-info .info-wrapper form .delivery .inputs .inline{


    width: 96% !important;
   

}

.checkout .checkout-info .info-wrapper form .delivery .inputs input{
    width:96% !important;
       
}

.checkout .checkout-info .info-wrapper form .delivery h1{
  margin-bottom: 1rem;
}
.checkout .bill{
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
}


@media (max-width:570px) {


.checkout .bill{

width: 90%;

}
.checkout .bill .subtotal-main{
      width: 90%;
    
}
 .checkout .checkout-info .info-wrapper form .shipping-method .karachi , .checkout .checkout-info .info-wrapper form .shipping-method .other-city{
width: 100%;
}

 .checkout .checkout-info .info-wrapper form .shipping-method .radio-div{

width: none;


}

 .checkout .checkout-info .info-wrapper form .shipping-method .karachi .radio-div{
width: none !important;
 }

}

@media (max-width:430px) {
  .checkout .checkout-info .info-wrapper form .payment-method .bank-deposit, .checkout .checkout-info .info-wrapper form .payment-method .Cod{
  width: 100%;
   
} 
.checkout .checkout-info .info-wrapper form .payment-method  .collapse-div .bank-info{
width: 80%;
}
}