.checkout-page{
    padding: 0px;
    background: url(../media/user-info.png) no-repeat;
    background-size: cover;
    background-color:#F4E2B1;
    padding-top: 118px;
    display: flex;
    justify-content: center;
}
.user-info{
    /* background: url(../media/user-info.png) no-repeat;
    background-size: cover;
    background-color:#EACC9C;
    height: 600px; */
    width: 1078px;
}
.billing-info{
    display: flex;
padding: 104px 0;
flex-direction: column;
justify-content: center;
/* align-items: center; */
gap: 24px;
}
.billing-info form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}
.ub-h1{
    color: var(--Base-Off-Black, #0F0F0F);
margin: 0px;
font-family: "LEMON MILK";
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.44px;
}
.ab-field{
    display: flex;
    gap: 24px;
}
.field-box{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
flex: 1 0 0;
}
.ay-txt{
    color: var(--Base-Off-Black, #0F0F0F);
margin: 0px;
font-family: "LEMON MILK";
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 28.8px */
letter-spacing: 0.96px;
}
.inp-bx{
    display: block;
    width: 100%;
    box-sizing: border-box;
height: 56px;
padding: 12px 24px;
border: 1px solid var(--Base-03, #BDBDBD);
background: var(--Base-Off-White, #FAFAFA);
    font-family: Sen;
    font-size: 16px;
    font-weight: 400;
    color: var(--Base-Off-Black, #0F0F0F);
    border-radius: 0;
    outline: none;
}
.inp-bx::placeholder{
    color: var(--Base-Off-Black, #0F0F0F);
font-family: Sen;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.ap-b{
    display: flex;
    width: 100%;
    gap: 16px;
}
.button-sec{
    display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.yello-btn{
    display: flex;
height: 56px;
padding: 16px 40px;
border-radius: 0;
justify-content: center;
align-items: center;
gap: 8px;
background: var(--Core-yellow, #FFC760);
border: 4px solid var(--Core-yellow, #FFC760);
color: var(--Core-Main-Blue, #030527);
text-decoration: none;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%;
letter-spacing: 0.84px;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.yello-btn:hover{
    background: var(--Core-Secondary-yellow-dark, #E3AA00);
    border-color: var(--Core-Secondary-yellow-dark, #E3AA00);
    color: var(--Core-Main-Blue, #030527);
}
.yello-btn a{
    color: var(--Core-Main-Blue, #030527);
text-decoration: none;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
}
.bluee-btn{
    display: flex;
height: 56px;
border-radius: 0;
padding: 16px 40px;
justify-content: center;
align-items: center;
gap: 8px;
background: var(--Core-Main-Blue, #030527);
border: 4px solid var(--Core-Main-Blue, #030527);
color: var(--Base-White, #FFF);
text-align: center;
text-decoration: none;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%;
letter-spacing: 0.84px;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bluee-btn:hover{
    background: #0F0F0F;
    border-color: #383838;
    color: var(--Base-White, #FFF);
}
.bluee-btn a{
    color: var(--Base-White, #FFF);
text-align: center;
text-decoration: none;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
}
.order-summary{
    padding: 0px;
    background: url(../media/order-smr.png) no-repeat;
    background-size: 100% 100%;
    background-color:#F4E2B1;
    padding-top: 156px;
    padding-bottom: 120px;
    display: flex;
    justify-content: center;
}
.summary-box{
    display: flex;
width: 526px;
padding: 48px 40px 32px 40px;
flex-direction: column;
align-items: center;
gap: 32px;
border-radius: var(--Edge-bev, 16px) var(--Edge-bev, 16px) 0 0;
}
.item-bx{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.itemss{
    display: flex;
padding: 16px 24px;
align-items: flex-start;
gap: 8px;
align-items: center;
align-self: stretch;
border: 1px solid var(--Base-03, #BDBDBD);
background: var(--Base-White, #FFF);
}
.left-item{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item-name{
    color: var(--Base-Off-Black, #0F0F0F);
margin: 0px;
font-family: Sen;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.item-price{
    color: var(--Base-Off-Black, #0F0F0F);
margin: 0px;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
}
.items-detail{
    display: flex;
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border: 1px solid var(--Base-03, #BDBDBD);
background: var(--Base-White, #FFF);
}
.item-d{
    display: flex;
height: 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.pdet{
    color: var(--Base-Off-Black, #0F0F0F);
margin: 0px;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
}
.dblt{
    color: var(--Base-Off-Black, #0F0F0F);
margin: 0px;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
}
.term-bx{
    display: flex;
width: 446px;
height: 26px;
justify-content: center;
align-items: center;
gap: 16px;
}
.radio-terms{
    width: 24px;
height: 24px;
flex-shrink: 0;
}
.termss{
    color: var(--Base-01, #383838);
font-family: "IBM Plex Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 160%; /* 25.6px */
}
.termss a{
    color: var(--Base-Info-Blue, #54A8FF);
font-family: "IBM Plex Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 160%;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.promocode-bx{
    display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
gap: 24px;
align-self: stretch;
}
.promocode-bx > div {
    width: 100%;
}
.promo-code{
    display: flex;
width: 100%;
height: 56px;
padding: 12px 24px;
align-items: center;
gap: 8px;
background: var(--Base-White, #FFF);
border: none;
}
.promo-code::placeholder{
    color: var(--Base-Off-Black, #0F0F0F);
font-family: Sen;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.promo-button{
    display: flex;
align-items: flex-start;
gap: 24px;
width: 100%;
align-self: stretch;
}
.pricing-page{
    padding: 0px;
}
.msc-desktop .col-md-4{
    padding: 0px;
}
.pricing-s1{
    background: url(../media/pricing-s1.png) no-repeat;
    /* background-size:100% 100%; */
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 200px 0px;
    padding-top: 174px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.m-price-box{
    display: flex;
max-width: 1170px;
flex-direction: column;
align-items: center;
gap: 52px;
}
.price-text{
    display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 1000px;
/* align-self: stretch; */
}
.price-text h1{
    color: var(--Base-Off-White, #FAFAFA);
text-align: center;
margin: 0px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
font-family: "LEMON MILK";
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.44px;
}
.price-text p{
    color: var(--Core-yellow, #FFC760);
text-align: center;
margin: 0px;
font-family: Sen;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
/* section-1-carousel */
.msc-desktop{
    display: flex;
padding-bottom: 24px;
/* justify-content: center; */
align-items: center;
gap: 0px;
}
.msc-card {
      display: flex;
width: 344px;
padding: 68px 56px 72px 56px;
flex-direction: column;
align-items: center;
gap: 24px;
background: url(../media/inactive-bg.png) no-repeat;
background-size: 100% 100%;
    }
.package-detail{
    display: flex;
padding: 16px 3px;
flex-direction: column;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 8px;
background: linear-gradient(0deg, rgba(188, 147, 104, 0.30) 0%, rgba(188, 147, 104, 0.30) 100%), #F6DBB4;
background-blend-mode: multiply, normal;
box-shadow: 0 4px 4px 0 #CCA97D inset, 0 3px 3px 0 rgba(255, 255, 255, 0.60);
}
.package-name{
    color: var(--Core-Main-Blue, #030527);
text-align: center;
margin: 0px;
font-family: "LEMON MILK";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 16px */
letter-spacing: 0.96px;
}
.tokenss{
    color: var(--Core-Secondary-Mute-Red, #DF514E);
text-align: center;
margin: 0px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
font-family: "LEMON MILK";
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.12px;
}
.no-story{
    color: var(--Base-02, #727272);
text-align: center;
margin: 0px;
font-family: Sen;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
    /* Desktop: center (2nd) card bigger */
    .msc-desktop .col-md-4:nth-child(2) .msc-card {
      transform: scale(1.08);
      box-shadow: 0 20px 40px rgba(0,0,0,0.25);
      z-index: 2;
    }

    /* .msc-desktop .msc-card {
      transform: scale(0.98);
    } */
/* Mobile carousel: center(active) bigger, sides slightly smaller */
    .carousel-item .msc-card {
      transform: scale(0.9);
      opacity: 0.85;
    }

    .carousel-item.active .msc-card {
      transform: scale(1.05);
      opacity: 1;
      box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    }

    .msc-badge-popular {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      background: #4CAF50;
      color: #fff;
      padding: 6px 15px;
      border-radius: 20px;
      font-size: 12px;
    }
.box-p{
    color: var(--Base-01, #383838);
text-align: center;
margin: 0px;
font-family: Sen;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.price{
    color: var(--Base-Off-Black, #0F0F0F);
text-align: center;
leading-trim: both;
text-edge: cap;
margin: 0px;
font-family: Sen;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */
}
    .msc-btn {
      color: var(--Base-White, #FFF);
text-align: center;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
background: var(--Core-Main-Blue, #030527);
text-align: center;
border-radius: 0px;
    }
.most-popular{
    border-radius: 28px;
background: var(--Base-Success-Green, #47B147);
display: flex;
padding: 16px 24px;
justify-content: center;
align-items: center;
margin-top: 24px;
}
.most-popular p{
    color: var(--Base-White, #FFF);
text-align: center;
margin: 0px;
font-family: "LEMON MILK";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 16px */
letter-spacing: 0.96px;
}
    .msc-carousel-item {
      padding: 20px 0;
    }

    .msc-carousel-inner {
      overflow: visible;
    }

    .msc-carousel-controls {
      text-align: center;
      margin-top: 20px;
    }
    .msc-carousel-controls button {
      background: white;
      border: none;
      margin: 0 5px;
      border-radius: 6px;
      width: 35px;
      height: 35px;
    }
/* section-1-carousel */
.p-item{
    display: flex;
padding: 32px 40px;
flex-direction: column;
align-items: center;
gap: 24px;
flex: 1 0 0;
border-radius: 4px;
background: var(--Core-Secondary-Wall-Beige, #FFE6BC);
box-shadow: 0 3px 3px 0 rgba(255, 255, 255, 0.60), 0 4px 4px 0 #EECAA2 inset;
width: 342px;
}
.p-item button{
    display: flex;
height: 56px;
padding: 16px 40px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
background: var(--Core-Main-Blue, #030527);
color: var(--Base-White, #FFF);
text-align: center;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
}
.itemss-box{
display: grid;
  grid-template-columns: repeat(4, 1fr);
width: 1440px;
gap: 24px;
}
.pr-det{
display: flex;
flex-direction: column;
gap: 8px;
}
.pr-det h1{
    color: var(--Core-Main-Blue, #030527);
text-align: center;
margin: 0px;
font-family: "LEMON MILK";
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 1.12px;
}
.pr-det p{
    color: var(--Core-Secondary-Mute-Red, #DF514E);
text-align: center;
leading-trim: both;
text-edge: cap;
margin: 0px;
font-family: Sen;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 30px */
}
.pricing-s2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(../media/pricing-s2.png) no-repeat;
    background-size:cover;
    background-position: center;
    padding: 84px 0px 180px 0px;
    gap: 72px;
}
.adit-info{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.adit-info h1{
    color: var(--Base-White, #FFF);
text-align: center;
margin: 0px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
font-family: "LEMON MILK";
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1.44px;
}
.adit-info p{
    color: #BDBDBD;
text-align: center;
margin: 0px;
font-family: Sen;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.items-list{
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    align-items: center;
}
.custom-det{
    border-radius: 4px;
background: var(--Core-Secondary-Wall-Beige, #FFE6BC);
box-shadow: 0 3px 3px 0 rgba(255, 255, 255, 0.60), 0 4px 4px 0 #EECAA2 inset;
display: flex;
width: 708px;
padding: 24px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
}
.custom-det h1{
    color: var(--Core-Main-Blue, #030527);
margin: 0px;
font-family: "LEMON MILK";
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 1.12px;
}
.amt-box{
    display: flex;
    gap: 16px;
    align-items: center;
}
.amt-box input{
    border: 2px solid var(--Base-04, #E9E9E9);
background: var(--Base-Off-White, #FAFAFA);
color: var(--Base-Off-Black, #0F0F0F);
display: flex;
height: 56px;
padding: 12px 24px;
align-items: center;
gap: 8px;
flex: 1 0 0;
}
.amt-box input::placeholder{
    color: var(--Base-Off-Black, #0F0F0F);
font-family: Sen;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.amt-box span{
    color: var(--Core-Secondary-blue-body, #51648C);
font-family: Quicksand;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 24px */
}
.amt-box button{
    display: flex;
height: 56px;
padding: 16px 40px;
justify-content: center;
align-items: center;
gap: 8px;
background: var(--Core-Main-Blue, #030527);
color: var(--Base-White, #FFF);
text-align: center;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
border-radius: 0px;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
}
.mobile-swipe{
    display: none;
}












@media (max-width: 768px) {
      .msc-desktop { display: none; }
      .itemss-box{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        overflow:scroll;
        width: 327px;
      }
    }

    @media (min-width: 769px) {
      .msc-mobile { display: none; }
    }
@media only screen and (max-device-width: 600px) {
    .adit-info h1,.price-text h1{
        font-size: 28px;
        letter-spacing: 1.12px;
    }
    .mobile-swipe{
        display: block;
    color: var(--Core-yellow, #FFC760);
margin: 0px;
font-family: "LEMON MILK";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 21px */
letter-spacing: 0.84px;
    }
    .p-item{
        padding: 32px;
    width: 259px;
    }
    .p-item button{
        padding: 16px 0px;
    }
    .pr-det h1{
        font-size: 20px;
    }
    .checkout-page{
        background: none;
        background-color:#F4E2B1;
        padding-top: 0px;
        display: flex;
padding: 133px 24px 0px 24px;
flex-direction: column;
align-items: center;
gap: 0px;
align-self: stretch;
    }  
    .user-info{
        width:327px;
    }
    .ab-field,.ap-b{
        flex-direction: column;
        width: 100%;
    }
    .button-sec{
        flex-direction: column;
    gap: 24px;
    }
    .yello-btn,.bluee-btn{
        width: 100%;
    }
    .billing-info{
        padding:0px 0px 24px 0px;
    }
    .ub-h1 {
        font-size: 28px;
        font-weight: 500;
    }
    .order-summary{
        display: flex;
padding: 150px 24px 0px 24px;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
background: none;
background-color: #F4E2B1;
    }
    .summary-box{
        width: 327px;
        padding: 0px;
        gap: 24px;
    }
    .promo-button{
        flex-direction: column;
    }
    .pricing-s1{
        background: url(../media/pricing-s1-mb.png) no-repeat;
        background-size: 100% 100%;
        padding: 145px 0px 40px 0px;
    }
    .price-text{
        width: 327px;
    }
    .pricing-s2{
        background: url(../media/pricing-s2-mb.png) no-repeat;
        background-size: 100% 100%;
        align-items: center;
        gap: 24px;
    }
    .amt-box{
        flex-direction: column;
    }
    .custom-det{
        width: 327px;
    }
    .adit-info{
        width: 327px;
    }
}

@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) {
   
}