/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Merriweather", serif;
}
#navbar{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    padding: .3rem 3rem;
    box-shadow: 5px 5px 20px rgba(0,0,0,.5);
    background: black;
}
.navbar .navbar-brand{
    font-size: 25px;
    font-weight: 800;
    color: #29f700 !important;
}
#navbarSupportedContent a{
    color: #fff;
    border-bottom: 2px solid transparent;
}
#navbarSupportedContent a:hover{
    border-bottom: 2px solid #29f700;
}
#navbarSupportedContent button{
    background: #29f700;
    width: 6rem;
    border-radius: 10px;
}
section{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/****Home****/
#home{
    background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.4)),url(bg.avif);
    background-size: cover;
    background-position: center; 
    flex-direction: column;   
}
#home h1{
    font-size: 90px;
    color: white;
    letter-spacing: 3px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-shadow: 0px 1px 0px #ccc,
                 0px 2px 0px #ccc,
                 0px 3px 0px #ccc,
                 0px 4px 0px #ccc,
                 0px 5px 0px #ccc,
                 0px 6px 0px #ccc,
                 0px 7px 0px #ccc,;  
}
#home p{
    font-size: 18px;
    color: #fff;
}
#home .input-group{
    width: 40%;
    height: 45px;
}
.signin{
    background: green !important;
    color: white !important;
    box-shadow: 2px 4px 5px rgba(0,0,0,.3);
}

/*****About******/

#about{
    background-color:purple;
}
#about h1{
    font-weight: 800;
    font-size: 70px;
    color: white;
}
#about p{
    font-size: 17px;
    color: white;
}

/****Products****/

#product{
    background: #e5e5e5;
}
#product h1{
    font-size: 50px;
    letter-spacing: 2px;
    font-weight: 700;
}
#product img{
    width: 260px;
    height: 200px;
}
#product button{
    text-align: center;
    background: #29f700;
    color: white;
    width: 150px;
    height: 45px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
#product button:hover{
    background-color: #218838;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
#product button{
    text-align: center;
    background: #29f700;
    color: white;
    width: 150px;
    height: 45px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
#product button:hover{
    background-color: #218838;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.card{
    width: 250px;
    height: 300px;
    background: white !important;
    border: none !important;
    box-shadow: 15px 20px 20px rgba(0,0,0,.3),
                inset 4px 4px 10px white;
    border-radius: 20px !important;
    overflow: hidden;
    justify-content: center;
    align-items: center; 
    margin: 20px 60px;
    transition: .2s;    
}
.card:hover{
    box-shadow: inset 5px 5px 10px rgba(0,0,0,.3),
                inset -4px -4px 10px white;
    transition: .2s;
}
/*****contact******/

#contact img{
    height: 100%;
}
.box{
    width: 80% !important;
    background: goldenrod;
    margin-top: 10px;
}
form{
    display: flex;
    flex-direction: column;
}
#contact input{
    margin: 10px 0px;
}
#contact textarea{
    margin: 10px 0px;
}

#cart-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;
    padding: 20px;
}

h1 {
    font-size: 50px;
    color: #333;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;
}

#cart-items {
    width: 80%;
    margin-top: 20px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.cart-item .item-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.cart-item .item-price {
    font-size: 18px;
    color: #333;
}

.cart-item .remove-btn {
    background-color: #dc3545;
    border: none;
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.cart-item .remove-btn:hover {
    background-color: #c82333;
}

#total-section {
    width: 80%;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    text-align: right;
}

#generate-qr-button {
    text-align: center;
    background: #29f700;
    color: white;
    width: 150px;
    height: 45px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

#generate-qr-button:hover {
    background-color: #218838;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

#qr-code-container {
    margin-top: 30px;
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    #cart-items {
        width: 90%;
    }
    h1 {
        font-size: 40px;
    }
    #generate-qr-button {
        width: 120px;
    }
}