@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
.sectionContainer{
    margin-top: 40px;
    margin-right: 80px;
    margin-left: 80px;
    margin-bottom: 100px;
}

.checkoutHeader{
    color: var(--Style, #F54748);
font-feature-settings: 'liga' off, 'clig' off;
font-family: "Playfair Display";
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 56px; /* 155.556% */
}
.checkoutLeft{
    display: flex;
flex-direction: column;
gap: 40px;
}
.contactInfo{
    display: flex;
    flex-direction: column;
gap: 16px;
}
.contactTitle{
    color: #000;
font-family: 'Cairo';
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 66.667% */
}
.contactInfo label{
    color: #4F4F4F;
font-family: 'Cairo';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
margin-bottom: 8px;
}
.contactInfoText h6{
    color: var(--base-text, #000);
font-family: 'Cairo';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: 0.021px;
}
.contactInfo p{
    color: var(--base-textSubdued, #707070);
font-family: 'Cairo';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
}
/* rewards */
.rewards{
    display: flex;
padding: 16px;
flex-direction: column;
gap: 8px;
border-radius: 8px;
border: 1px solid rgba(0, 105, 167, 0.40);
}
.rewardsTitle{
    color: #50A337;
font-family: 'Cairo';
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 16px; /* 66.667% */
margin-bottom: 8px;
}
.rewardsDesc{
    color: rgba(33, 33, 33, 0.80);
font-family: 'Cairo';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
margin-bottom: 8px;
}
.rewardsPass{
    display: flex;
padding: 16px;
gap: 10px;
margin-bottom: 16px;
border-radius: 4px;
border: 1px solid #DFDFDF;
background: #FFF;
box-shadow: 0px 2px 6px 0px rgba(47, 61, 77, 0.10);
}
.rewardsPass h6,
.rewardsSignLater h6{
    color: var(--base-text, #000);
font-family: 'Cairo';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: 0.021px;
}
.rewardsPass p{
    color: var(--base-textSubdued, #707070);
font-family: 'Cairo';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
margin-top: 8px;
margin-bottom: 16px;
}
.rewardsSignLater{
    display: flex;
padding: 16px;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #DFDFDF;
background: #FFF;
box-shadow: 0px 2px 6px 0px rgba(47, 61, 77, 0.10);
}
/* payment */
.paymentTitle{
    color: var(--base-text, #000);
font-feature-settings: 'liga' off, 'clig' off;
font-family: "SF Pro Display";
font-size: 21px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 25.2px */
}
.paymentDesc{
    color: var(--base-textSubdued, #707070);
font-family: "SF Pro Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
margin-bottom: 16px;
}
.paymentDetails{
    padding: var(--spacing-base, 14px);
background: var(--control-backgroundSubdued, #F5F5F5);
}
.paymentDetails p{
    color: var(--base-text, #000);
    font-family: "SF Pro Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
letter-spacing: 0.021px;
}
.inputIcon{
    position: absolute;
    top: 15px;
    right: 10px;
}
.blueBtn{
    display: flex;
min-height: 56px;
justify-content: center;
align-items: center;
border-radius: var(--cornerRadius-base, 5px);
background: var(--primaryButton-background, #1773B0);
color: var(--primaryButton-text, #FFF);
text-align: center;
font-family: 'Cairo';
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 20px */
}
.tipsTitle{
    color: var(--base-text, #000);
font-family: 'Cairo';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 19.2px */
margin-bottom: 14px;
}
.tipsBox{
    border-radius: 5px;
    border: 1px solid var(--control-border, #DEDEDE);
    background: var(--control-background, #FFF);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.tipsBox h6{
    padding: 14px;
    border-radius: var(--cornerRadius-base, 5px) var(--cornerRadius-base, 5px) var(--cornerRadius-none, 0px) var(--cornerRadius-none, 0px);
    border: 1px solid var(--control-border, #DEDEDE);
    background: var(--control-background, #FFF);
    color: var(--control-text, #000);
    font-family: 'Cairo';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    -webkit-border-radius: var(--cornerRadius-base, 5px) var(--cornerRadius-base, 5px) var(--cornerRadius-none, 0px) var(--cornerRadius-none, 0px);
    -moz-border-radius: var(--cornerRadius-base, 5px) var(--cornerRadius-base, 5px) var(--cornerRadius-none, 0px) var(--cornerRadius-none, 0px);
    -ms-border-radius: var(--cornerRadius-base, 5px) var(--cornerRadius-base, 5px) var(--cornerRadius-none, 0px) var(--cornerRadius-none, 0px);
    -o-border-radius: var(--cornerRadius-base, 5px) var(--cornerRadius-base, 5px) var(--cornerRadius-none, 0px) var(--cornerRadius-none, 0px);
}
.tipsBoxSecond{
    padding: 14px;
border-radius: var(--cornerRadius-none, 0px) var(--cornerRadius-none, 0px) var(--cornerRadius-base, 5px) var(--cornerRadius-base, 5px);
border-right: 1px solid var(--control-border, #DEDEDE);
border-bottom: 1px solid var(--control-border, #DEDEDE);
border-left: 1px solid var(--control-border, #DEDEDE);
background: var(--control-backgroundSubdued, #F5F5F5);
}
.tipsPercentage{
    display: flex;
    justify-content: center;
        margin-bottom: 14px;

}
.tipsPercentageDiv{
    padding: 8px 14px;
    border-radius: var(--cornerRadius-base, 5px);
    border: 1px solid var(--control-border, #DEDEDE);
    background: var(--control-background, #FFF);
    display: flex;
    align-items: center;
    align-content: center;
    -webkit-border-radius: var(--cornerRadius-base, 5px);
    -moz-border-radius: var(--cornerRadius-base, 5px);
    -ms-border-radius: var(--cornerRadius-base, 5px);
    -o-border-radius: var(--cornerRadius-base, 5px);
}
.tipsPercentage h5{
    color: var(--control-selected-text, #000);
font-family: "SF Pro Text";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 21px */
}
.tipsPercentage span{
    color: var(--control-textSubdued, #707070);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
font-family: "SF Pro Text";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 18px */
}
.tipsCustom input{
    border-radius: var(--cornerRadius-base, 5px);
border: 1px solid var(--control-border, #DEDEDE);
background: var(--control-background, #FFF);
padding: 11px;
}
.tipsCustom{
    display: flex;
    gap: 15px;
}
.tipsCustom input:focus{
    outline: none;
}
.tipsBoxSecond p{
    color: var(--control-text, #000);
font-family: "SF Pro Text";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
margin-top: 14px;
}
.selctTip{
    padding: 8px 12px;
    border-radius: var(--cornerRadius-base, 5px);
border: 1px solid var(--control-selected-border, #1773B0);
background: var(--control-selected-background, #EFF5FF);
}

@media screen and (max-width: 768px) {
.sectionContainer{
    margin-top: 16px;
    margin-right: 16px;
    margin-left: 16px;
    margin-bottom: 100px;
}
.tipsPercentage div{
    padding: 8px 16px;
}
.inputCard{
    padding-right: 0px;
    margin-bottom: 12px;
}
}