@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p, h1, h2, h3,h4,h5,h6{
    margin: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    height: 100vh;
}

.cake-container {
    margin: 0;
   
    width: 100%;
  
    background: url(./home-background.png);
    background-position: center ;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    height: 100vh;
    
}

ul{
   list-style: none;
}

a {
    text-decoration: none;
}

.absolute {
    position: absolute;
    bottom: 0;
}

.cake-body {
    padding-top: 62px;


}

.body-content {
    margin-top: 30px;
}

.body-content > a {
   padding: 8px 0;
   width: 120px;
   background-color: #fff;
   border: 0;
   border-radius: 10px;
   color: #000;
   font-family: Roboto;
    font-size: 17px;
    font-weight: 700;
    text-align:center;

}

.body-text > h2 {
    font-family: Roboto;
    font-size: 56px;
    font-weight: 700;
    line-height: 70.5px;
    text-align: left;
    color: #fff;
}

.body-text > h4 {
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 28.13px;
    text-align: left;
    color: #fff;

}

/* about Us */

.aboutus-container {
 display: flex;
 flex-direction: column;
}

.aboutus-divide {
    display: flex;
    gap: 25px;
}

.aboutus-image {
    display: flex;
    justify-content: space-between;
    gap: 70px;

}


.back-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    cursor: pointer;
}

.about-image{
    width: auto;
    height: 400px;
    object-fit: contain;

}

.aboutus-content > h2 {
    font-family: Parisienne;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    color: #F81000;
}

.aboutus-writeup {
    margin-bottom: 10px;
}

.aboutus-writeup > h4 {
    font-family: Roboto;
    font-size: 20px;
    font-weight: 700;
    line-height: 20.13px;
    text-align: left;
    color: #F81000;
    margin-bottom: 10px;
}


.aboutus-writeup > p, .aboutus-writeup > ul > li {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 400;
    line-height: 28.13px;
    text-align: left;
    color: #000;
    margin-bottom: 10px;
    
}

.aboutus-writeup > ul {
    list-style-type: disc;
    
}

/* product */

.product-container {
    height: 100%;
}

.product-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
}


.product-content2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 85px;

 
    
}




.product-header > h2 {
    font-family: Parisienne;
    font-size: 30px;
    font-weight: 400;
    line-height: 49.04px;
    text-align: center;
    color: #F81000;
    
}


.productcard-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-bottom: 20px;
}

.product-card {
grid-column: span 3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 1rem;

}

.product-card >  img {
    width: 280px;
    height: 280px;
    object-fit: contain;
}

.product-card > img:hover {
    transform: scale(1.05);
    transition: all .3s;

}

.product-card > h5 {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 28.13px;
    text-align: center;
}

.buy-button{
    background-color:#ED82A2;
    color: #fff;
    padding: 8px 15px;
    width: 110px;
    border-radius: 15px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border: 0;
}
.buy-button2{
    background-color:#ED82A2;
    color: #fff;
    padding: 4px 8px;
   
    border-radius: 10px;
    font-family: Roboto;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border: 0;
}



.load-button{
    background-color: #ED82A2;
    color: #fff;
    padding: 8px 15px;
    width: 120px;
    border-radius: 15px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border: 0;
    margin-top: 20px;
    margin-bottom: 50px
}

/* Contact Us */

.main-contact {
    height: 100vh; 
    background: url(../assets/contactus-background.png);
     background-repeat: no-repeat;
      background-position: center top;
       background-size: cover;
}

.newheight {
    height: 100vh;
    
}

.white-text > h2 {
    color: #fff;
    margin-bottom: 10px;
}

.contactus-container {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;

 
    margin-bottom: 10px;
    width: 100%;
  

  
}

.vertical-line {
    background-color: #fff;
}


.contactus-form {
    column-span: 5;
    display: flex;
    flex-direction: column;
   justify-content: center;
   gap: 25px;
   padding: 20px;
}

.contactus-smallerform {
    display: grid;
    grid-template-columns: 20% 80%;

}

.contactus-smallerform > label {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 600;
    line-height: 28.13px;
    text-align: left;
    color: #fff; 
}

.contactus-smallerform > input{
    width: 100%;
    height: 35px;
    padding: 5px 10px;
    background: #ED82A278;
    border: 0;
    color: #fff;
    font-size: 17px;

}

.contactus-smallerform > textarea {
    width: 100%;
    color: #fff;
    font-size: 17px;
    padding: 5px 10px;
    background: #ED82A278;
}

.contact-content {
    display: flex;
    flex-direction: column;
    padding: 50px 10px 5px 20px;

    height: 100%;

}
.contact-info {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    height: 100%;

    flex-direction: column;
    
}
.contact-icon > p {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 600;
  
    text-align: left;
    color: #fff; 
}

.contact-icon {
    display: flex;
    gap: 10px;
}


.contactus-image {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.contactus-image > img {
    width: 25px;
    height: 25px;
}

.contactus-button  {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactus-button > button {
    background: #ED82A2;
    color: #fff;
    border-radius: 10px;
    padding: 10px 25px;
    border: 0;
}

/* Cart */

.ash-background {
    background-color: #f5f5f5;
}

.cart-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 20px;
    margin-bottom: 65px;
    padding: 0 70px;   
}
.accountoverview-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 20px;
    margin-bottom: 65px;
    padding: 0 70px;   
}

.cart-content {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
    background-color: #fff;
    height: fit-content;
}



.second-cartcontent {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    height: fit-content;
    padding: 15px;
    /* gap: 10px; */
    background-color: #fff;
}

.card-scroll {
    overflow-y: scroll;
    height: 290px;
}

.cart-card {
    display: flex;
    justify-content: space-between;
   
    width: 100%;
    border-radius: 15px;

}

.main-firstcart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-first {
    display: flex;
    gap: 40px;
}

.cart-first > img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.cart-text {
    display: flex;
    gap: 10px;
    /* flex-direction: column; */
}

.vertical-line {
    border-right: 1px solid #000 ;
    height: 30%;
    padding-right: 10px;
}

.cart-text > h2 {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;

    text-align: left;
    color: #000;
    margin: 0;
}

.cart-text > h3 {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #000;
    margin: 0;
}

.cart-quantity-cash {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cart-quantity-cash2 {
    display: flex;
    justify-content: center;
}

.cart-quantity-cash > p {
    font-family: Roboto;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    display: flex;
    align-items: flex-start;
}

.cart-quantity-cash2 > p {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 46.88px;
    text-align: left;

}



.cart-text > h4 {
    font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    margin: 0;
    
}

.inch-num {
   color: #FF543E;
}

.remove-container {
    display: flex;
    gap: 10px;
    margin: 0;
    align-items: flex-start;
    margin-top: 10px;
    border: 0;
    background-color: #fff;
}

.remove-container > img {
    width: auto;
    height: 14px;
}
.remove-container > p {
    font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    color: #C9102B;
    margin: 0;

    
}

.cart-second {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    margin: 0;

}

.cart-buttons {
    display: flex;
    gap: 20px;
}

.cart-buttons > button {
    border: 0;

    background: none;
}
.cart-buttons > button > img {
    border: 0;
    height: 25px;
    width: auto;
    background: none;
    border-radius: 5px;
}

.cart-nav {
    display: flex;
    justify-content: center;
    gap: 120px;
    margin-top: 30px;
    margin-bottom: 70px;
}

.cart-nav > a {
    background-color: #ED82A2;
    color: #fff;
    padding: 10px 20px;
    border-radius: 15px;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 700;

}

.cart-number {
    display: flex;
    font-family: Roboto;
    font-size: 17px;
    font-weight: 400;
    background-color: #C9102B;
    color: #fff;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 0;

}

.cart-number2 {
    display: flex;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 0;

}


.summary-first {
    display: flex;
    flex-direction: column;


}

.summary-first > h3 {
    font-size: 17px;
    text-align: left;
    color: #ED82A2;

}

.subtotal {
    display: flex;
    justify-content: space-between;

}

.subtotal > p {
    margin: 0;
}

.subtotal-text {
    text-align: right;
}

.delivery {
    font-size: 14px;
    text-align: left;
    color: #000;
}

.checkout-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkout {
    border: 0;
    width: 100%;
    background-color: #ED82A2;
    border-radius: 10px;
    height: 45px;
    color: #fff;
    font-size: 15px;
}
.proceed-checkout {
    border: 0;
    width: 100px;
    background-color: #9b9494;
    border-radius: 10px;
    height: 45px;
    color: #fff;
    font-size: 15px;
}

.checkout-address {
    border: 0;
    width: 100%;
    background-color: #9e9595;
    border-radius: 10px;
    height: 45px;
    color: #fff;
    font-size: 15px;
}

.summary-second {
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 10px;

}

.summary-second > h4 {
    font-size: 15px;
    text-align: left;
    color: #575555;
}

.summary-second > p {
    font-size: 13px;
    text-align: left;
    color: #000;
}

.subtotal-delivery {
    display: flex;
    align-items: center;
    gap: 5px;
}
.subtotal-delivery > p, .subtotal > p {
    margin: 0;
    font-size: 15px;

}

.change-address{
    color: #ED82A2;
    cursor: pointer;

}

.change{
    color: rgb(102, 99, 99);
    font-size: 15px;
    font-weight: 500;
}

.first-customer {
    font-size: 15px;
    font-weight: 500;
}

.customer-name{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.customer-unity{
    font-size: 13px;
    font-weight: 400;
}

.ship-cake{
    font-size: 14px;
    font-weight: 400;
}

.set-default {
    display: flex;
    align-items: center;
    gap: 5px;
}

.set-default > label{
    font-size: 13px;
    font-weight: 400;

}


/* cart-modification */
.apply{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.apply > input {
    padding: 5px 10px;
}

.apply > label {
    font-size: 13px;
}

.complete{
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
}



.terms-text {
    font-size: 13px;
    text-align: center;
    margin-top: 5px;
}

/* customer address page */
.address-form{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.address-head{
    font-size: 13px;
}

.address-smallerform{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}

.address-splitform {
    display: flex;
    flex-direction: column;
    position: relative;
}

.address-splitform2 {
    display: flex;
    flex-direction: column;
    position: relative;
}

.address-splitform > input, .address-splitform > select, .address-splitform2 > input, .address-splitform2 > select  {
    padding: 9px 10px;
    border: 1px solid #afacac;
    font-size: 14px;
    border-radius: 10px;
    width: 100%;
}
.address-splitform2 > input, .address-splitform2 > select  {
    padding: 9px 10px;
    border: 1px solid #afacac;
    font-size: 14px;
    width: 100%;
}
.address-splitform > label, .address-splitform2 > label {
    font-size: 11px;
    position: absolute;
    top: -9px;
    z-index: 10;
    background-color: #fff;
    left: 20px;
}

.address-smallerform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.address-prefixform {
    display: grid;
    grid-template-columns: 20% 77%;
    gap: 10px;
}

.prefix-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.prefix-container > p{
    font-size: 13px;
    font-weight: 400;
}
.prefix-container > h3{
    font-size: 14px;
    font-weight: 500;
}

.save-address{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cancel{
    border: 0;
    color: #E37A76;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
}
.save{
    border: 0;
    color: #fff;
    background-color: #E37A76;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
}

/* Summary page */

.placecart-content {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
    height: fit-content;
    margin-bottom: 25px;
    background-color: #fff;
}

.address-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.customer-address {
    display: flex;
    justify-content: space-between;
}

.address-change{
    display: flex;
    align-items: center;
}

.delivery-date {
    display: flex;
    flex-direction: column;
}

.both-addresscontent {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    gap: 30px;
}

.shipment-container{
    margin-top: 20px;
}

.shipment-detail {
    padding: 7px;
    border: 1px solid #6e6c6c;
    border-radius: 10px;
}

.shipment-product{
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

.shipment-image{
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.default{
    font-size: 14px;
    font-weight: 400;
}

.shipment-text{
    font-size: 12px;
    font-weight: 500;
}

.naira {
    width: 70px;
    display: flex;
    justify-content: space-between;
}


/* Description */

.description-container {
    display: flex;
    flex-direction: column;
    padding: 20px 40px;
    margin-top: 2rem;

}

.description-content {
    display: flex;
    gap: 100px;

}


.description-image > img {
    width: 460px;
    height: 443px;
    border-radius: 45px;
    border: 20px solid #ED82A2;
}

.description-cart {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.decription-cart > h2 {
    font-family: Roboto;
    font-size: 34px;
    font-weight: 400;
    text-align: left;
    color: #F81000;
    margin-bottom: 20px;
    
}

.description-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    
}

.description-smallerform, .description-flavours {
    display: grid;
    grid-template-columns: 20% 80%;
    height: 55px;
}

.description-smallerform3 {
    display: grid;
    grid-template-columns: 20% 80%;
 
}

.description-smallerform3 > p {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    text-align: left;

}

.description-smallerform > label, .description-flavours > label, .description-smallerform3 > label {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    color: #F81000;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}



.description-smallerform > input, .description-flavours > select, .description-flavours > input {
    width: 40%;
    height: 37px;
    padding: 0 20px;
    border-radius: 15px;
    opacity: 0px;
    background: #FADBE4;
    border: 0;

    font-size: 16px;
}


.description-flavours > textarea {
    width: 60%;
    padding: 10px 20px;
    border-radius: 15px;
    opacity: 0px;
    background: #FADBE4;
    border: 0;
    font-size: 16px;
}

.description-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 40%;
    height: 37px;
    background: #FADBE4;
    padding: 0px 15px;
    align-items: center;
    border-radius: 15px;
}

.description-buttons > button{
    border: 0;
    background-color: none;
    width: auto;
    height: 20px;
}

.description-buttons > button > img{
    width: auto;
    height: 20px;
}

#quantity-digit {
    margin: 0;
}

.addcart-button {
    display: grid;
    grid-template-columns: 40% 60%;
    width: 478px;
    padding:  20px;
    background: #ED82A2;
    font-family: Roboto;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    color: #fff;
    border: 0;
    border-radius: 15px;
}

.addcart-button > img {
    width: auto;
    height: 20px;
    align-self: center;
}

.description-text {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.description-text > h3 {
    font-family: Roboto;
    font-size: 25px;
    font-weight: 400;

    text-align: left;
    color: #F81000; 
    margin-top: 15px;
}

.description-text > p {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 400;
    line-height: 32.88px;
    width: 100%;
}

/* Order */

.order-container {
    display: flex;
    justify-content: center;
    padding: 0 20px;
    /* position: fixed; */
    width: 100%;
    



}

.order-billing {
    display: flex;
    flex-direction: column;
    width: 90%;

}

.returning-container {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
}

.returning-container > h3 {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 500;
    text-align: left;
    color: #000;
    margin-bottom: 10px;  
}

.red-login {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 500;
    text-align: left;
    color: #ED82A2;
    margin-bottom: 10px;  
}

.order-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #E7548045;
    padding: 30px;
}

.order-smallerform {
    display: grid;
    grid-template-columns: 20% 80%;
    margin-bottom: 20px;
}

.order-smallerform2 {
    display: grid;
    grid-template-columns: 40% 60%;
    margin-bottom: 10px;
}

.order-smallerform3 {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.split-smallerform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    margin-bottom: 10px;
}

.order-smallerform > label, .order-smallerform3 > label {
    font-family: Roboto;
    font-size: 15px;
    font-weight: 500;

    text-align: left;
    color: #000;
}

.order-smallerform2 > label {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    
    text-align: left;
    color: #000;
}

.order-smallerform > input, .order-smallerform > select {
    border: 1px solid #FF543E;
    padding: 5px 20px;
    width: 100%;
    border-radius: 10px;
    height: 30px;
    font-size: 14px;
}
.order-smallerform3 > textarea{
    border: 1px solid #FF543E;
    padding: 5px 20px;
    width: 100%;
    border-radius: 10px;
    font-size: 14px;
}

.order-smallerform2 > input, .order-smallerform3 > input, .order-smallerform3 > select {
    border: 1px solid #FF543E;
    padding: 5px 20px;
    width: 100%;
    border-radius: 10px;
    height: 30px;
    font-size: 14px;
}

.your-order{
    display: flex;
    flex-direction: column;
}

 .your-order > h2 {
    font-family: Roboto;
    font-size: 36px;
    font-weight: 500;
    line-height: 42.19px;
    text-align: center;
    color: #C9102B;
    margin-bottom: 30px;
}

.yourorder-container {
    padding: 30px 20px;
    border: 1px solid #FF543E;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.order-center {
    display: flex;
    justify-content: center;
}

.order-product {
    display: flex;
    background-color: #ED82A2;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    border-radius: 25px;
    gap: 100px;
    width: 70%;
}

.order-product > p {
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: #fff;

}

.order-creamy {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}
.order-creamy > p {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 500;
    text-align: left;
    margin: 0;
    padding: 0;
}

.calc-content {
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
    padding-left: 40px;
}

.calc-content2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-right: 40px;
}

.order-size {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

.order-flavour {
    display: flex;
    gap: 50px;
}

.order-calc {
    display: grid;
    grid-template-columns: 70% 30% ;
}

.order-cash {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-pay {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 200px;
    margin-top: 10px;
}

.order-pay > a, .order-pay > button {
    width: 121px;
    height: 37px;

    border-radius: 15px ;
    background: #ED82A2;
    border: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.optional-header {
    font-family: Roboto;
    font-size: 15px;
    font-weight: 700;
    line-height: 19.92px;
    text-align: left;
    margin-bottom: 10px;
}

.item-container {
    display: flex;
    flex-direction: column;
}

.optional-header2 {
    font-family: Roboto;
    font-size: 15px;
    font-weight: 700;
    line-height: 19.92px;
    text-align: center;
    margin-bottom: 10px;
}

.billing-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 50px;
}

.billing-button {
    border: 0;
    background: #ED82A2;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
}

.carddetails-form {
    display: none;
    flex-direction: column;
}

.one-form {
    display: flex;
    flex-direction: column;
}

.one-form > label{
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 29.05px;
    text-align: center;
    margin-top: 5px;  
}

.one-form > input {
    width: 100%;
    
    border: 1px solid #E37A76;
    padding: 3px 5px;
}
.one-form > input:focus-visible {
    border-top: 0;
    width: 100%;

}

.three-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
}

.third-party {
    display: none;
}



/* Payment Successful */

.payment-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
   
}

.payment-container > img{
    position: relative;
    top: 20px;
    height: 40px;
    width: auto;

    
}

.thankyou > img {
    width: auto;
    height: 40px;
    margin-top: 10px;
}

.payment-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #C9102B;
    border-radius: 15px;
    padding: 20px 40px;
    box-shadow: 10px 10px 4px 0px #00000040;

}

.payment-content > h3 {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 600;
    line-height: 42.19px;
    text-align: center;
    
}

.payment-successfull > h4 {
    font-family: Roboto;
font-size: 18px;
font-weight: 500;
line-height: 37.5px;
text-align: center;

}

.payment-details {
    background-color: #EDEDED;
    border-radius: 10px;
    padding: 20px;
}

.payment-details > p {
    font-family: Roboto;
    font-size: 11px;
    font-weight: 500;
    line-height: 17.58px;
    text-align: left;
    color: #ED82A2;
}

.payment-info > p {
    font-family: Roboto;
font-size: 14px;
font-weight: 500;
line-height: 28.13px;
text-align: left;

}

/* updates 1 */

.chatbot, chatbot1 {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: flex-end;*/
    /*align-items: flex-end;*/
    /*position: fixed;*/
    /*bottom: 45px;*/

}

.chatbot > img, chatbot1 > img {
    width: auto;
    height: 50px;
    object-fit: contain;
    margin-top: 8px;
    cursor: pointer;
}

/*.message-chatbot {*/
/*    display: none;*/
/*    background-color: #fff;*/
/*    width: 400px;*/
/*    margin-right:500px;*/
  
/*}*/

.message-chatbotwelcome {
    display: block;
    grid-template-rows: 1fr 1fr;
    background-color: #fff;
    width: 400px;
    height: 400px;
    margin-right:500px;
}


.chatbot-header {
    background-color: #ED82A2;
    width: 100%;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px 10px;

}

.chatbotwelcome-header {
    display: flex;
    flex-direction: column;
    background-color: #ED82A2;
    width: 100%;
    padding: 10px 20px;
    height: 145px;
}

.chatbot {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.message-chatbot {
    display: none;
    background-color: #fff;
    width: 300px;
    height: 400px;
    position: absolute;
    bottom: 60px;   /* appears above the button */
    right: 0;       /* aligns properly */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    left:-200px;
}

.second-header {
    width: 100%;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px 10px;
}

.group-hello{
    display: flex;
    gap: 10px;
    align-items: center;
}

.group-hello > h1{
    color: #fff;
    font-size: 18px;
    margin: 0;
}

.hello-container > p{
    color: #fff;
    font-size: 12px;
    margin: 0;
}

.group-hello > img {
    height: 25px;
    width: auto;
}

/* Welcome Message for Chatbot */
.send-message {
    border: 0;
}
.new-message{
    display: flex;
    justify-content: center;
    background: #E75480BA;
    color: #fff;
    gap: 10px;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    border: 0;
}

.new-message-container {
    display: flex;
    justify-content: center;
    border: 2px solid #ED82A2;
    margin-left: 55px;
    padding: 20px 40px;
    position: absolute;
    box-shadow: 10px 4px 4px 0px #00000040;
    background-color: #fff;
    top: -30px;

}

.white-message {


 
    position: relative;

}

.message-body {
    height: 250px;
    scrollbar-width: thin;
   overflow-y: scroll;
}

.chatbot-header > img, .chatbot-header > span, .second-header > img,  .second-header > span  {
    justify-self: end;
    color: #fff;
}

.close-chatbot {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }




.message-content {
    background-color: #E7548087;
    border-radius: 8px;
    word-wrap: break-word;
    color: #fff;
    padding: 5px 10px;
}

.message-buttons {
    display: flex;
    justify-content: space-between;
    margin: 15px;
    align-items: center;
}

.message-icons {
    width: auto;
    height: 25px;
    object-fit: contain;
}

.message-input  {
    width: 90%;
    border: 2px solid #ED82A2;
    padding: 5px 10px;
}


.chatbot-messaging {
    display: flex;
    gap: 5px;

}

.message-image {
    width: auto;
    height: 20px;
}

.out {
    justify-content: flex-end;
    margin: 15px ;
}

.response {
    justify-content: flex-start;
    margin: 15px;
    cursor: pointer;
}

/* Birthday */



.filter-container{
    position: absolute;
    display: none;
    flex-direction: column;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    width: 180px;
    z-index: 9;
    top: 50px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
   
}

.filter-container2{
    position: absolute;
    display: none;
    flex-direction: column;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    width: 180px;
    z-index: 9;
    top: 30px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
   
}

.filter-click {
    border: 1px solid #ED82A2;
    border-radius: 5px;
    background-color: #fff;
    margin: 5px 0;
    width: fit-content;
    font-size: 14px;
    padding: 2px 5px;
}

.filter-click:hover {
    background-color: #ED82A2;
    color: #fff;
    border: 0;

}


.ussd{
    font-family: Roboto;
font-size: 15px;
font-weight: 400;
line-height: 15.72px;
text-align: left;
color: #000;
margin-bottom: 15px;
cursor: pointer;

}

.filter-dropdown{
    display: flex;
    flex-direction: column;
    position: relative;
   align-items: flex-end;
   
}
.filter-dropdown > p{
    margin: 0;
    font-family: Roboto;
    font-size: 17px;
    font-weight: 500;
    line-height: 23.44px;
    text-align: left;
    color: #fff;
    cursor: pointer;

}

.filter-button {
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Layered Cake */

.layered-header > h2 {
    font-family: Parisienne;
    font-size: 36px;
    font-weight: 400;
    line-height: 49.04px;
    text-align: left;
    color: #F81000;
    margin-top: 10px;
}


/* Modal */
.modal-container{
    display: none; 
    position: fixed; /* Fixed position */
    z-index: 12000; /* Make sure it appears on top of everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scrolling if needed */
    background-color: rgba(0,0,0,0.4); /* Black background with opacity */
  
}
/* .modal-content {

    position: fixed; 
    background-color: #fefefe; 
    top: 15%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    padding: 20px;
    width: 80%;
    max-height: 100vh; 
    max-width: 600px;
} */



.cartmodal-content {

    position: fixed; 
    background-color: #fefefe; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    padding: 20px;
    width: 80%;
    max-height: 500px; 
    max-width: 600px;
    border-radius: 15px;
    overflow-y: auto;


}
.address-content {

    position: fixed; 
    background-color: #fefefe; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    padding: 20px;
    width: 80%;
    max-height: 500px; 
    max-width: 400px;
    border-radius: 15px;
    overflow-y: auto;


}

.search-modal {
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-modal > input{
    background-color: #ED82A247;
    border: 0;
    height: 35px;
    width: 100%;
    padding: 0 10px ;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

.hr {
    margin: 10px 0;
}

.cart-modal {
    display: flex;
    flex-direction: column;
}

.cartmodal-heading{
    display: flex;
    justify-content: space-between;
}

.cartmodal-heading > h2{
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
}

.cartmodal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;

}
.cartmodal-buttons > .first-cartbutton {
 
    background-color: #fff;
    color: #ED82A2;
    padding: 4px 15px;
    
    border-radius: 10px;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: 0;
    border: 1px solid #000;


}
.cartmodal-buttons > .second-cartbutton{
 
    background-color: #ED82A2;
    color: #fff;
    padding: 4px 15px;
    
    border-radius: 10px;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: 0;
 
}

.cake-sizes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 10px;
}

.cake-sizes > button {
    border: 1px solid #a19c9c;
    border-radius: 4px;
    font-size: 14px;
    padding: 5px 10px;
}

.address-header {
    border-bottom: 0.5px solid #7e7878;
    margin-bottom: 15px;
}

.address-header > h1{
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color:  #ED82A2;

}

.address-input {
    margin-bottom: 15px;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid #000;
    width: 100%;
}

.address-smallerclass {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}

.delivery-info {
    display: flex;
    flex-direction: column;
}

.address-button-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-button{
    border: 0;
    background-color:  #ED82A2;
    color: #fff;
    padding: 3px 20px;
    border-radius: 5px;

}

/* Billing */

.billing-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.billing-content {
    width: 400px;
    margin-top: 20px;
}


.order-summarycontainer {
    display: flex;
    flex-direction: column;
}


.order-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.total-pay {
    display: flex;
    justify-content: space-between;
    background-color:  #E2DCDC;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
 

}

.total-pay > h4 {
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    text-align: left;
    
}

.total-pay > p {
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    text-align: left;
    color: #ED82A2;
    margin: 0;
    
}

.order-summary > h4 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;

    text-align: left;
    color: #000;
    margin: 0;
}
.order-summary > p {
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: #ED82A2;
    margin: 0;
}

.method-class {
    display: flex;
    flex-direction: column;
}

.method-class > h4 {
    font-family: Inter;
font-size: 16px;
font-weight: 700;
line-height: 29.05px;
text-align: left;

}

.choose-method {
    display: flex;
    
}

.choose-method > h4 {
    font-family: Inter;
font-size: 16px;
font-weight: 700;
line-height: 29.05px;
text-align: left;

}

.bank-transfercontainer {
    display: flex;
    flex-direction: column;
}

.bank-transfer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:  #E2DCDC;
    padding: 10px;
    margin-bottom: 20px;
}

.bank-transfer > p {
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: #000;
    margin: 0;
    
}

.bank-image {
    display: flex;
    gap: 10px;
}

.bank-image > img {
   width: auto;
   height: 30px;
}

.see-details {
    cursor: pointer;
}

/* Billing Modal */

.cart-detailheading {
    display: flex;
    justify-content: space-between;
}

.margin-bottom{
    margin-bottom: 100px;
}

.cart-detailheading > h2 {
    font-family: Inter;
font-size: 16px;
font-weight: 600;
text-align: left;
margin: 0;


}


.cart-items > h3 {
    font-family: Inter;
font-size: 12px;
font-weight: 600;
text-align: left;
background-color: #F1EDED;
padding: 10px;
margin-bottom: 5px ;

}

.item-content {
    display: flex;
    justify-content: space-between;
}

.item-content > h3{
    font-family: Inter;
font-size: 14px;
font-weight: 500;
text-align: left;
margin: 0;
padding: 0 10px;

}

.item-text{
    display: flex;
    flex-direction: column;
}

.item-text > h4{
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    margin: 0;
    padding: 0 10px;
}

.item-text > p{
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    margin: 0;
    padding: 0 10px;
    
}

/* Login */

.login-container2 {
    background: url(../assets/login-background.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    padding-left: 0 ;




}

.login-content {
    height: 100%;
}

.second-login-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    width: 100%;
   
}

.login-details > p {
    font-family: Roboto;
font-size: 15px;
font-weight: 700;
line-height: 28.13px;
text-align: left;
color: #fff;
}

.login-body{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 500px;
    /* height: 100%; */
    background-color:#956F62A8;
    padding: 40px;

}
.login-body2{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 500px;

    background-color:#956F62A8;
    padding: 4px 40px;

}

.login-body3 {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 500px;
    /* height: 100%; */
    margin-top: 80px;
    background-color:#956F62A8;
    padding: 40px;

}

.login-content > h1{
    font-family: Roboto;
    font-size: 45px;
    font-weight: 700;
    line-height: 112.5px;
    text-align: center;
    color: #fff;
}


.login-content2 > h1{
    font-family: Roboto;
    font-size: 45px;
    font-weight: 700;
    line-height: 75.5px;
    text-align: center;
    color: #fff;
}

.login-content3 > h1{
    font-family: Roboto;
    font-size: 45px;
    font-weight: 700;
    line-height: 52.5px;
    text-align: center;
    color: #fff;
}

.smaller-form > label {
    font-family: Roboto;
font-size: 15px;
font-weight: 600;
line-height: 33.51px;
text-align: left;
color: #fff;
}

.smaller-form > input {
    padding: 5px 10px;
    height: 45px;
    border-radius: 10px;
    width: 100%;
    background-color: #fff;
    border: 0;
    font-size: 15px;
}

.login-button-container{
    display: flex;
    justify-content: center;

 
}

.login-button {
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #ED82A2;
    border: 0;
    color: #fff;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 600;
}

.signup-button {
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #ED82A2;
    border: 0;
    color: #fff;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}


.smaller-form {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forgot-password {
    display: flex;
    justify-content: flex-end;
}

.forgot-password > a {
    font-family: Roboto;
    font-size: 15px;
    font-weight: 600;

    text-align: left;
    color: #fff;
    
}

.signup-biggerform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 10px;
}

/* makepayment */
.makepayment-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    margin-top: 80px;
}

.makepayment-headertext{
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 28.13px;
    text-align: left;

}

.makepayment-card{
    border: 1px solid #C9102B;
    box-shadow: 10px 10px 4px 0px #00000040;
    padding: 10px;
    border-radius: 10px;


}

.makepayment-cardone, .makepayment-cardtwo {
    display: flex;
    justify-content: space-between;
}

.bank-header {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    margin: 0;
    display: flex;
    align-items: flex-end;
}

.bank-name {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 600;
 
    text-align: left;
    margin: 0;
    display: flex;
    align-items: flex-end;
}

.bankaccount-header{
    font-family: Roboto;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    margin: 0;
}

.bankaccount-number {
    font-family: Roboto;
font-size: 16px;
font-weight: 600;

text-align: left;

}

.bankaccount-swiss {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 600;
    line-height: 0.5px;
    text-align: left;
}

.copy-number {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.copynumber-button {
    border: 0;
    background: #ED82A2;
    border-radius: 5px;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 500;
 
    text-align: left;
    color: #fff;
    padding: 1px 3px;

}

.transfer-text {
    font-family: Roboto;
font-size: 12px;
font-weight: 400;
margin: 0;
text-align: left;
color: #E37A76;
}

.transaction {
    display: flex;
    justify-content: center;
    margin-top: 10px;

}

.transaction-time {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 400;
    line-height: 28.13px;
    text-align: left;
    color: #C9102B;

}

.bothbank-details {
    display: flex;
    gap: 5px;
    align-items: flex-end;
    margin-top: 10px;
}

.bankname-container{
    display: flex;
    gap: 20px;
}

.account-details {
    display: flex;
}

.flex-end {
    justify-content: flex-end;
}

.bankname-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* MY ACCOUNT */

.myaccount-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 890px;
}


.myaccount-content {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
    height: fit-content;
    margin-bottom: 25px;
    background-color: #fff;
    width: 100%;
    
}


.placecart-content {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
    height: fit-content;
    margin-bottom: 25px;
    background-color: #fff;
}

.myaccount{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

/* Account Overview */
.account-subheading {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
}

.account-subheading:hover {
    background-color: #979595;
    color: #fff;
}
.account-subheading > a {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}
.account-subheading > a:hover {
    color: #fff;
}

.terms2{
    position: fixed;
    width: 280px;
}

.overview-first {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.account-icon2 {
    width: auto;
    height: 30px;
}

table{
    width: 100%;
    table-layout: fixed;
    /* border-spacing: 0 30px;
    border-collapse: separate; */
}

thead{
    /* border: 1px solid #000; */
    color: #fff;
    background-color: #E37A76; 
}

/* .th{
    padding: 5px 0;
    font-size: 15px;
} */
/* .td{
    padding: 15px 0;
    font-size: 14px;
    border-bottom: 1px solid #afacac;

} */

/* Saved Items */

.saved-image {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
}

.delete-savedbtn{
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-bottom: 6px;
}

.saved-description {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: 23.13px;
    text-align: center;
}

.saved-cost {
    font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    line-height: 18.13px;
    text-align: center;
}

.saved-cakeimage-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.saved-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.saved-image > a > img{
    width: auto;
    height: 170px;
}

.star-container {
    display: flex;
    margin-top: 7px;
    justify-content: center;
}

.rate-star {
    width: auto;
    height: 20px;
}

.hamburger{
    display: none;

}

/* Additonal */
.text-left {
    text-align: left;
    text-overflow: ellipsis;
    max-width: 50px;
}

.left-align {
    text-align: left;
    text-overflow: clip;
    max-width: 200px;
}

.th{
    position: sticky;
    top: -0.5px;
    background-color: #fff;
    z-index: 100; 
    background-color: #E37A76;
    margin-top: -30px;
    text-align: left;
}

.dasboard-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
   
    width: 100%;
    overflow-y: scroll;
    max-height: 71vh; 
    padding-bottom: 100px;
  
}

td {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.6;
    text-align: center;
    padding: 0;
    border-bottom: 5px solid #dbd6d6;
    text-overflow: ellipsis;
    max-width: 50px;

}

/* Review and Saved */

.display-none{
    display: none;
}

.extra-icons {
    display: flex;
    justify-content: space-between;
    width: 280px;
    align-items: center;
}
.review-container {
    display: flex;
    gap: 5px;
    margin: 3px 0;
    align-items: center;
    background-color: #fff;

    border: 0;
    border-radius: 3px;
    padding: 3px 0;

}

.review-text{
    font-size: 13px;
}

.review-icon{
    width: auto;
    height: 13px;
}

/* Review Modal */
.add-header {
    background-color: #C9102B;
}

.add-row {
    display: flex;
}


.add-header > h5 {
    color: #fff;
    font-family: Roboto;
     font-size: 25px;
     font-weight: 500;
     line-height: 42.2px;
     text-align: left;
 }

 .modal-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.modal-smallform {
    display: grid;
    grid-template-columns: 34% 54%;
    padding: 0;
    gap: 10px;
}
.modal-smallform2, .modal-smallform3 {
    display: grid;
    grid-template-columns: 17% 83%;
    padding: 0;
    gap: 10px;
}

.modal-smallimage {
    display: grid;
    grid-template-columns: 33% 83%;
    padding: 0;
    gap: 10px;
}

.modal-smallform > label, .modal-smallform2 > label, .modal-smallimage > label, .modal-smallform3 > label {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 28.13px;
    text-align: left;  
    display: flex;
    align-items: center;
}

.modal-smallimage > input {
    align-self: center;
}


.modal-smallform > input, .modal-smallform > select,.modal-smallform2 > select, .modal-smallform2 > input{
    background: #FBC00029;

    width: 90%;
    height: 41px;
    border-radius: 15px;
    padding: 0 10px;
    border: 0.5px solid #000;
}

.modal-smallform3 > textarea {
    background: #FBC00029;
    width: 90%;
    border-radius: 15px;
    padding: 10px;
    border: 0.5px solid #000;
}
.modal-smallform > input:focus, .modal-smallform > select:focus, .modal-smallform2 > input:focus {
    background: #FBC00029;

}

.modal-smallform2 > textarea{
    background: #FBC00029;
    border: 0;
    width: 100%;
    border-radius: 15px;
    padding: 10px;
}

.preview{
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-smallimage {
    display: grid;
    grid-template-columns: 10% 83%;
    padding: 0;
    gap: 10px;
}

.modal-smallform > label, .modal-smallform2 > label, .modal-smallimage > label, .modal-smallform3 > label {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 28.13px;
    text-align: left;  
    display: flex;
    align-items: center;
}

.preview-image{
    width: 100px;
    height: 100px;
}

/* for the star */
.star-rating label {
    font-size: 16px;
    color: #333;
}

.star-select {
    font-size: 16px;
    padding: 5px;
}

.star-select option {
    font-size: 16px;
    color: gold;
}

/* saved image */
.saved-img{
    width: 200px;
    height: 200px;
}



@media only screen and (min-width:200px) and (max-width: 600px) {

    .hamburger{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
        padding: 0 0 0 7px;
        
    }
    .hamburger-icon{
        width: auto;
        height: 15px;
    }

    .body-text > h2 {
        font-size: 33px;
        font-weight: 700;
        line-height: 45.5px;
        text-align: left;
    }
    
    .body-text > h4 {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 500;
        line-height: 20.13px;
    }

    .body-content > a {
        padding: 4px 0;
        width: 80px;
        background-color: #fff;
        border: 0;
        border-radius: 10px;
        color: #000;
        font-family: Roboto;
         font-size: 13px;
         font-weight: 700;
         text-align:center;
     
     }

     .chatbot {
        /*display: flex;*/
        /*justify-content: flex-end;*/
        /*position: fixed;*/
        /*bottom: 40px;*/
    }

     .chatbot > img {
        width: auto;
        height: 50px;
    }



    /* birthday cake */

    .product-card > img {
        width: auto;
        height: 80px;
        object-fit: contain;
    }

    .product-card > h5 {
        font-size: 10px;
        line-height: 15.13px;
        margin: 0;
    }

    .buy-button{
        background-color:#ED82A2;
        color: #fff;
        padding: 3px 5px;
        width: 60px;
        border-radius: 7px;
        font-size: 10px;
    }

    .product-header > h2 {
        font-family: Parisienne;
        font-size: 15px;
        font-weight: 400;
        line-height: 29.04px;
    }

    .back-icon {
        width: auto;
        height: 15px;
    }

    .filter-container{
        position: absolute;
        display: none;
        flex-direction: column;
        background-color: #fff;
        padding: 10px;
        border-radius: 10px;
        width: 130px;
        z-index: 9;
        top: 30px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
       
    }
    

    
    .filter-container > p{
        font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    line-height: 10.72px;
    text-align: left;
    color: #000;
    margin-bottom: 12px;
    cursor: pointer;
    
    }
    
    .filter-dropdown{
        display: flex;
        flex-direction: column;
        position: relative;
       align-items: flex-end;
       
    }
    .filter-dropdown > p{
        margin: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 23.44px;
        text-align: left;
        color: #fff;
        cursor: pointer;
    
    }
    
    .filter-button {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .filter-button > img {
        object-fit: contain;
        width: auto;
        height: 10px;
    }

    /* ABOUT US */
    .aboutus-container{
        margin-bottom: 20px;
    }
    
    .aboutus-divide {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .about-image {
        display: none;
    }

    .aboutus-writeup > h4 {
        font-family: Roboto;
        font-size: 15px;
 
        line-height: 20.13px;
        

        margin-bottom: 10px;
    }

    .aboutus-content > h2 {
        font-family: Parisienne;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        color: #F81000;
    }

    .aboutus-writeup > p, .aboutus-writeup > ul > li {
        font-family: Roboto;
        font-size: 12px;
        font-weight: 400;
        line-height: 18.13px;
        text-align: left;
        color: #000;
        margin-bottom: 10px;
        
    }

    .saved-cakeimage-container > img{
        height: auto;
        width: 60px;
    }

    .saved-description{
        font-family: Roboto;
        font-size: 9px;
        font-weight: 400;
        line-height: 5.13px;
        text-align: center;
        margin: 0;
    }
    .saved-cost {
        font-family: Roboto;
        font-size: 9px;
        font-weight: 400;
        line-height: 5.13px;
        text-align: center;
        margin: 0;
    }

    .delete-savedbtn{
        width: 10px;
        height: 10px;
        margin-left: 5px;
        margin-bottom: 2px;
    }

    /* Contact us */

    .contactus-smallerform {
        display: flex;
        flex-direction: column;
    }

    .contactus-smallerform > label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 600;
        line-height: 18.13px;
        text-align: left;
        color: #fff; 
    }

    .contactus-smallerform > input{
        width: 100%;
        height: 25px;
        padding: 5px 10px;
        background: #ED82A278;
        border: 0;
        color: #fff;
        font-size: 17px;
    
    }

    .contactus-form {
       gap: 15px;
    }

    .contact-icon > p {
        font-size: 13px;

    }

    .small-contact-icon {
        width: auto;
        height: 15px;
    }

    .cart-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 45px;
        padding: 0 5px;
    }



    .cart-second {
        width: 70px;
    }

    .cart-first {
        display: flex;
        gap: 20px;
    }
    

    .cart-text > h4 {
        font-family: Roboto;
        font-size: 10px;
        font-weight: 400;
        margin-bottom: 3px;
    
        text-align: left;
        color: #000;
      
    }
    
    .cart-text > h3 {
        font-family: Roboto;
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 3px;
    
        text-align: left;
        color: #000;
        
    }
    
    .cart-quantity-cash > p {
        font-family: Roboto;
        font-size: 10px;
        font-weight: 500;
   
        text-align: left;
    }
    .cart-quantity-cash, .cart-buttons {
        width: 60px;
        gap: 0;
    }

    .cart-first {
        display: flex;
        gap: 10px;
    }

    .cart-first > img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .cart-buttons > button > img {
        border: 0;
        height: 15px;
        width: auto;

    }

    .summary-first > h3 {
        font-size: 12px;
    
    }

    .subtotal > p {
        font-size: 12px;
    }
    
    .delivery > p {
        font-size: 12px;
    }

    .checkout {
        border: 0;
        width: 50%;
        font-size: 10px;
        background-color: #F81000;
        border-radius: 10px;
        height: 30px;
        color: #fff;
    }

    .remove-container > img {
        width: auto;
        height: 12px;
    }
    .remove-container > p {
        font-family: Roboto;
        font-size: 10px;
        font-weight: 400;
        text-align: left;
        color: #C9102B;
        margin: 0;
    
    }


    /* Description */

    .description-content {
        display: flex;
        gap: 20px;
    
    }

    .description-content {
        flex-direction: column;
    }

    .description-container {
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        margin-top: 0rem;
        align-items: center;
        width: 375px;
    
    }

    .description-image  {
        display: flex;
        justify-content: center;
        align-items:  center;
    }
    .description-image > img {
        width: 180px;
        height: 180px;
        border-radius: 15px;
        border: 8px solid #ED82A2;
    }

    .description-cart {
        display: flex;
        flex-direction: column;
        
    }

    .decription-cart > h2 {
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #F81000;
        margin-bottom: 20px;
        
    }

    .addcart-button {
        display: grid;
        grid-template-columns: 40% 60%;
        width: 130px;
        padding:  10px;
        background: #ED82A2;
        font-family: Roboto;
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        color: #fff;
        border: 0;
        border-radius: 15px;
    }

    .description-smallerform > input, .description-flavours > select, .description-flavours > input {
        width: 100%;
        height: 37px;
        padding: 0 20px;
        border-radius: 15px;
        opacity: 0px;
        background: #FADBE4;
        border: 0;
    
        font-size: 16px;
    }

    .description-smallerform > label, .description-flavours > label, .description-smallerform3 > label {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 400;
        text-align: left;
        color: #F81000;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .description-smallerform, .description-flavours {
        display: grid;
        grid-template-columns: 40% 60%;
        height: 55px;
    }
    
    .description-smallerform3 {
        display: grid;
        grid-template-columns: 40% 60%;
        height: 55px;
    }

    .description-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 37px;
        background: #FADBE4;
        padding: 0px 15px;
        align-items: center;
        border-radius: 15px;
    }

    .description-flavours > textarea {
        width: 100%;
        padding: 10px 20px;
        border-radius: 15px;
        opacity: 0px;
        background: #FADBE4;
        border: 0;
        font-size: 16px;
    }

    .description-text > h3 {
        font-family: Roboto;
        font-size: 20px;
        font-weight: 400;
    
        text-align: left;
        color: #F81000; 
        margin-top: 15px;
    }

    .description-text > p {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 400;
    
        text-align: left;
        margin-top: 15px;
    }
    
    .description-text  {
        width: 300px;
    }

    .th{
        padding: 5px 0;
        font-size: 12px;
    }
    .td{
        padding: 15px 0;
        font-size: 10px;
        border-bottom: 1px solid #afacac;
    }

    /* My Account */

    .myaccount-container {
        display: flex;
        flex-direction: column;
    }
    

    .accountoverview-container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        column-gap: 0px;
        margin-bottom: 65px;
        padding: 0;   
    }
    

    .second-cartcontent {
    display: none;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    height: fit-content;
    padding: 15px;
    /* gap: 10px; */
    background-color: #fff;
    width: 150px;
    z-index: 2000;
}

.myaccount-content {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
    height: fit-content;
    margin-bottom: 25px;
    background-color: #fff;
    width: 300px;
    
}

.overview-first {
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 1000;
}

.saved-image > a > img{
    width: auto;
    height: 60px;
}

.rate-star {
    width: auto;
    height: 10px;
}




}

@media only screen and (min-width:605px) and (max-width: 1000px) {

    .body-text > h2 {
        font-size: 65px;
        font-weight: 700;
        line-height: 69.5px;
        text-align: left;
        margin-top: 100px;
    }
    
    .body-text > h4 {
        font-family: Roboto;
        font-size: 20px;
        font-weight: 500;
        line-height: 25.13px;
        width: 500px;
        margin-top: 10px;
    }

    .body-content > a {
        padding: 8px 0;
        width: 110px;
        background-color: #fff;
        border: 0;
        border-radius: 10px;
        color: #000;
        font-family: Roboto;
         font-size: 18px;
         font-weight: 700;
         text-align:center;
         margin-top: 10px;
     
     }

     .chatbot {
        /*display: flex;*/
        /*justify-content: flex-end;*/
        /*position: fixed;*/
        /*bottom: 40px;*/
    }

     .chatbot > img {
        width: auto;
        height: 90px;
    }

    /* birthday cake */

    .product-card > img {
        width: auto;
        height: 200px;
        object-fit: contain;
        margin-bottom: 5px;
    }

    .product-card > h5 {
        font-size: 14px;
        line-height: 24.13px;
        margin: 0;
    }

    .buy-button{
        background-color:#ED82A2;
        color: #fff;
        padding: 6px 2px;
        border-radius: 7px;
        font-size: 13px;
        margin-top: 5px;
    }

    .product-header > h2 {
        font-family: Parisienne;
        font-size: 25px;
        font-weight: 400;
        line-height: 29.04px;
    }

    .back-icon {
        width: auto;
        height: 18px;
    }

    .filter-container{
        position: absolute;
        display: none;
        flex-direction: column;
        background-color: #fff;
        padding: 10px 15px;
        border-radius: 10px;
        width: 150px;
        z-index: 9;
        top: 40px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    }
    

    
    .filter-container > p{
        font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    line-height: 10.72px;
    text-align: left;
    color: #000;
    margin-bottom: 12px;
    cursor: pointer;
    
    }
    
    .filter-dropdown{
        display: flex;
        flex-direction: column;
        position: relative;
       align-items: flex-end;
       
    }
    .filter-dropdown > p{
        margin: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 23.44px;
        text-align: left;
        color: #fff;
        cursor: pointer;
    
    }
    
    .filter-button {
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }

    .filter-button > img {
        object-fit: contain;
        width: auto;
        height: 10px;
        margin-right: 5px;
    }

    /* ABOUT US */
    .aboutus-container{
        margin-bottom: 20px;
    }
    
    .aboutus-divide {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .about-image {
        display: block;
        margin-bottom: 20px;
    }

    .aboutus-writeup > h4 {
        font-family: Roboto;
        font-size: 25px;
 
        line-height: 20.13px;
        

        margin-bottom: 10px;
    }

    .aboutus-content > h2 {
        font-family: Parisienne;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        color: #F81000;
    }

    .aboutus-writeup > p, .aboutus-writeup > ul > li {
        font-family: Roboto;
        font-size: 18px;
        font-weight: 400;
        line-height: 28.13px;
        text-align: left;
        color: #000;
        margin-bottom: 10px;
        
    }

    /* Contact us */

    .contactus-container {
        height: 100%;
    }

    .contactus-smallerform {
        display: flex;
        flex-direction: column;
  
    }

    .contactus-smallerform > label {
        font-family: Roboto;
        font-size: 22px;
        font-weight: 600;
        line-height: 48.13px;
        text-align: left;
        color: #fff; 
    }

    .contactus-smallerform > input{
        width: 100%;
        height: 65px;
        padding: 5px 10px;
        background: #ED82A278;
        border: 0;
        color: #fff;
        font-size: 17px;
        margin-bottom: 25px;
    
    }

    .contactus-button  {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
    }
    
    .contactus-button > button {
        background: #ED82A2;
        color: #fff;
        border-radius: 10px;
        padding: 7px 25px;
        font-size: 20px;
        border: 0;
    }



    .contactus-form {
       gap: 15px;
    }



    .contact-icon {
       margin-bottom: 30px;
       gap: 20px;

    }
    .contact-icon > p {
        font-size: 20px;
        margin-left: 10px;

    }

    .small-contact-icon {
        width: auto;
        height: 15px;
    }


    /* Cart screen */

    .cart-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 45px;
        padding: 0 5px;
    }



    .cart-first {
        display: flex;
        gap: 30px;
    }

    .cart-text > h4 {
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 6px;
        text-align: left;
        color: #000;
      
    }
    
    .cart-text > h3 {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 400;
        margin-bottom: 6px;
        text-align: left;
        color: #000;
    }

    .cart-second {
        width: 100px;
    }
    
    .cart-quantity-cash > p {
        font-family: Roboto;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
    }

    .cart-quantity-cash, .cart-buttons {
        width: 90px;
        gap: 0;
        display: flex;
        justify-content: space-between;
    }

    .cart-first {
        display: flex;
        gap: 20px;
    }

    .cart-first > img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 10px;
    }



    .cart-buttons > button > img {
        border: 0;
        height: 25px;
        width: auto;

    }

    .summary-first > h3 {
        font-size: 15px;
    
    }

    .subtotal > p {
        font-size: 15px;
    }
    
    .delivery > p {
        font-size: 15px;
    }

    .checkout {
        border: 0;
        width: 25%;
        font-size: 14px;
        background-color: #F81000;
        border-radius: 10px;
        height: 35px;
        color: #fff;
    }

    .remove-container > img {
        width: auto;
        height: 15px;
        margin-right: 5px;
    }
    .remove-container > p {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 400;
        text-align: left;
        color: #C9102B;
        margin: 0;
    
        
    }

    /* Description */

    .description-content {
        display: flex;
        gap: 20px;
    
    }

    .description-content {
        flex-direction: column;
    }

    .description-container {
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        margin-top: 0rem;
        align-items: center;
        width: 100%;
    
    }

    .description-image  {
        display: flex;
        justify-content: center;
        align-items:  center;
    }
    .description-image > img {
        width: 320px;
        height: 320px;
        border-radius: 15px;
        border: 8px solid #ED82A2;
        margin-bottom: 20px;
    }

    .description-cart {
        display: flex;
        flex-direction: column;
        
    }

    .decription-cart > h2 {
        font-family: Roboto;
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        color: #F81000;
        margin-bottom: 60px;
        margin-top: 60px;
        
    }

    .addcart-button {
        display: flex;
        grid-template-columns: 40% 60%;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 150px;
        padding:  10px;
        background: #ED82A2;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
        color: #fff;
        border: 0;
        border-radius: 15px;
        margin-top: 30px;
    }

    .description-smallerform > input, .description-flavours > select, .description-flavours > input {
        width: 100%;
        height: 37px;
        padding: 0 20px;
        border-radius: 15px;
        opacity: 0px;
        background: #FADBE4;
        border: 0;
    
        font-size: 16px;
    }

    .description-smallerform > label, .description-flavours > label, .description-smallerform3 > label {
        font-family: Roboto;
        font-size: 20px;
        font-weight: 400;
        text-align: left;
        color: #F81000;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .description-smallerform, .description-flavours {
        display: grid;
        grid-template-columns: 40% 60%;
        height: 55px;
    }
    
    .description-smallerform3 {
        display: grid;
        grid-template-columns: 40% 60%;
        height: 55px;
    }

    .description-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 37px;
        background: #FADBE4;
        padding: 0px 15px;
        align-items: center;
        border-radius: 15px;
   
    }

    .description-flavours > textarea {
        width: 100%;
        padding: 10px 20px;
        border-radius: 15px;
        opacity: 0px;
        background: #FADBE4;
        border: 0;
        font-size: 16px;
    }

    .description-text > h3 {
        font-family: Roboto;
        font-size: 35px;
        font-weight: 400;
    
        text-align: left;
        color: #F81000; 
        margin-top: 45px;
    }

    .description-text > p {
        font-family: Roboto;
        font-size: 23px;
        font-weight: 400;
    
        text-align: left;
        margin-top: 15px;
    }
    
    .description-text  {
        width: 100%;
    }

    
    
}




/* ============================================
   UX / UI ENHANCEMENTS
   ============================================ */

/* Smooth scroll & page fade-in */
html {
    scroll-behavior: smooth;
}
body {
    animation: ka-fadeIn 0.35s ease both;
}
@keyframes ka-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f5f0ee; }
::-webkit-scrollbar-thumb { background: #A2867A; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #925239; }

/* ---- Input focus states ---- */
.smaller-form > input:focus,
.smaller-form > .password-wrapper input:focus,
.contactus-smallerform > input:focus,
.contactus-smallerform > textarea:focus,
.description-smallerform > input:focus,
.description-flavours > select:focus,
.description-flavours > input:focus,
.description-flavours > textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(237, 130, 162, 0.35);
    border: 1.5px solid #ED82A2;
    transition: box-shadow 0.2s ease, border 0.2s ease;
}

.smaller-form > input,
.smaller-form > .password-wrapper input {
    transition: box-shadow 0.2s ease, border 0.2s ease;
}

/* ---- Button hover/active transitions ---- */
.buy-button,
.buy-button2,
.load-button,
.login-button,
.signup-button,
.contactus-button > button,
.description-button {
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    cursor: pointer;
}

.buy-button:hover,
.buy-button2:hover,
.load-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(237, 130, 162, 0.45);
    opacity: 0.92;
}

.buy-button:active,
.buy-button2:active,
.load-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.login-button:hover,
.signup-button:hover,
.contactus-button > button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(149, 111, 98, 0.4);
    opacity: 0.9;
}

.login-button:active,
.signup-button:active,
.contactus-button > button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ---- Product card full-card hover ---- */
.product-card {
    border-radius: 12px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Prevent double-transform on just the image */
.product-card:hover > img {
    transform: none;
}

/* ---- Signup form: fix background & width ---- */
.login-container2 {
    min-height: 100vh;
    height: auto;
}

.login-body2 {
    width: clamp(320px, 90vw, 780px);
    margin: 20px auto;
}

.signup-biggerform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .signup-biggerform {
        grid-template-columns: 1fr;
    }
    .login-body2 {
        width: 95vw;
        padding: 20px;
    }
}

/* ---- Password match feedback ---- */
#password-match.match   { color: #4caf50; font-weight: 600; }
#password-match.no-match { color: #f44336; font-weight: 600; }

/* ---- Cart & summary card scroll smoothness ---- */
.card-scroll {
    scrollbar-width: thin;
    scrollbar-color: #ED82A2 #f5f0ee;
}

/* ---- Dropdown links hover ---- */
.dropdown-container > a:hover,
.layered-container > a:hover {
    color: #F81000;
    padding-left: 5px;
    transition: padding-left 0.15s ease, color 0.15s ease;
}

.dropdown-container > a,
.layered-container > a {
    transition: padding-left 0.15s ease, color 0.15s ease;
}

/* ---- Forgot password link ---- */
.forgot-password > a {
    transition: color 0.15s ease;
}
.forgot-password > a:hover {
    color: #ED82A2;
    text-decoration: underline;
}

/* ---- Toggle password button ---- */
.toggle-pw {
    transition: color 0.15s ease;
}
.toggle-pw:hover {
    color: #ED82A2;
}