@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
font-family: "Nunito", serif;
text-align: center;
background:#0c0c0c;
margin: 0;
padding: 0;
overflow-x: hidden;
}

#email {
    text-decoration: none; /* Remove the default underline */
    color:rgba(255, 255, 255, 0.8) ; /* Change the color of the link */
    font-size: 18px; /* Increase the font size */
    font-weight: bold; /* Make the font bold */
    padding: 10px 20px; /* Add padding around the text */
    border-radius: 5px; /* Round the corners */
    background-color: #0c0c0c; /* Light background color */
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 50px;
  }
  
  /* Style the paragraph within the email link */
  #email p {
    margin: 0; /* Remove margin */
    display: inline; /* Make the paragraph inline so it behaves like a link */
  }
  
  /* Hover effect for the email link */
  #email:hover {
    color: #0c0c0c; /* Change text color on hover */
    background-color: rgba(255, 255, 255, 0.8); /* Change background color on hover */
  }

#backToTopBtn {
position: fixed;
bottom: 300px;
right: 20px;
background-color: #0c0c0c;
color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
padding: 10px 15px;
cursor: pointer;
display: none; /* Hidden by default */
font-size: 16px;
}

#backToTopBtn:hover {
background-color: rgba(255, 255, 255, 0.8);
color: #0c0c0c;
}
  

.owner-image {
display: block;
max-width: 100%;
height: auto;
margin: 20px auto;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
}


h2 {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 15px;
border-bottom: 2px solid whitesmoke; /* Underline */
padding-bottom: 5px; /* Space between text and underline */
display: inline-block;
}

p {
color: whitesmoke;
}

label {
color: whitesmoke;
}

main {
flex-grow: 1; /* This will push the footer down if there's less content */
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: #333;
color: rgba(255, 255, 255, 0.8);
}

/* Control the logo size */
.logo img {
max-width: 50px; /* Adjust this value to your desired width */
height: auto; /* Maintain the aspect ratio */
border-radius: 20%;
}

.nav-links {
list-style: none;
display: flex;
z-index: 1;
}

.nav-links li {
margin: 0 15px;
}

.nav-links a {
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
}

.nav-links a:hover {
font-weight: bold;
}

.menu-toggle {
display: none;
font-size: 24px;
cursor: pointer;
color: whitesmoke;
}

.logo a {
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
font-weight: bolder;
}

.hero {
position: relative;
height: 70vh;
overflow: hidden;
display: flex;
}
.hero-video-left,
.hero-video-right {
position: relative;
width: 50%; /* Each video takes up half the screen */
height: 100%;
overflow: hidden;
z-index: 0;
}

.hero-video-left video,
.hero-video-right video {
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1; /* Ensures videos cover the full area */
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6); /* Semi-transparent black overlay */
z-index: 1; /* Keeps the overlay behind the text */
}

.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
margin-top: 0;
}


.cta-btn {
background: #101010;
padding: 10px 20px;
text-decoration: none;
color: rgb(234, 234, 234);
border-radius: 20px;
font-weight: bold;
}

.cta-btn:hover {
color: #101010;
background: rgb(234, 234, 234);
}

#about {
padding: 40px;

}

#categories {
padding: 40px;
text-align: center;

}

#about {
max-width: 700px;
margin: 0 auto; /* Centers the section horizontally */
text-align: center; /* Centers the text */
padding: 20px;
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}

.card {
width: calc(50% - 20px);
max-width: 500px;
height: 590px;
background-size: cover;
background-position: center;
border-radius: 15px;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin: 30px;

}

.card-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the video covers the card area */
z-index: -1;
border-radius: 15px; /* Keeps the video in the background */
}

/* Custom Alert Box */
.alert-box {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #101010;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
z-index: 1001;
max-width: 80%;
width: 300px;
}

.alert-box p {
margin: 0;
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
}

.alert-box button {
margin-top: 15px;
padding: 8px 15px;
border: none;
background: rgba(255, 255, 255, 0.8);
color: #101010;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}

.alert-box button:hover {
background: #101010;
color: rgba(255, 255, 255, 0.8);
}

/* Overlay to darken background */
.alert-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1000;
}


/* Make Cards Full Width on Small Screens */
@media (max-width: 768px) {
.card {
width: 100%; /* Cards take full width on mobile */
height: 350px;
max-width: none; /* Reduce height slightly */
}
.hero {
height: 50vh; /* Reduced height on smaller screens */
}

.hero-content {
padding: 15px; /* Slightly reduced padding */
}

.cta-btn {
font-size: 16px; /* Slightly smaller button text */
padding: 8px 16px; /* Reduced padding */
}

p {
font-size: 14px; /* Adjust paragraph text size */
}
}

/* Even Smaller Screens (Phones) */
@media (max-width: 480px) {
body {
overflow-x: hidden; /* Prevent horizontal scrolling */
}
.card {
height: 320px;
}

.card-btn {
font-size: 16px; /* Make button text smaller */
padding: 10px; /* Reduce padding */
}

.hero {
height: 60vh; /* Further reduced height for mobile devices */
}

.hero-content {
padding: 10px; /* Further reduced padding */
}

.cta-btn {
font-size: 14px; /* Smaller button text for mobile */
padding: 6px 12px; /* Reduced button padding */
}
}

.card-btn {
display: block;
width: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 15px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
border-radius: 0 0 15px 15px;
}

.card-btn:hover {
background: rgba(255, 255, 255, 0.8);
color: black;
}

h1 {
color: rgba(255, 255, 255, 0.8);
margin-top: 20px;
}

button {
padding: 10px 20px;
background-color: #0c0c0c;
color: rgba(255, 255, 255, 0.8);
border: none;
cursor: pointer;
border-radius: 20px;
font-weight: bold;
font-family: "Nunito", serif;
}

.product-quantity {border-radius: 10px;
border: none;
}

button:hover {
background-color: rgba(255, 255, 255, 0.8);
color: #0c0c0c;
}


#whatsapp-btn {
font-weight: bold;
font-family: "Nunito", serif;
padding: 10px 20px;
background-color: #25d366; /* WhatsApp green */
color: rgba(255, 255, 255, 0.8);
border: none;
cursor: pointer;
border-radius: 20px;
}

a {
text-decoration: none;
}

.button-container {
display: flex;
justify-content: center;
gap: 20px;
align-items: center;
margin-top: 20px;
}

.back-btn, .cart-button {
padding: 10px 20px;
background: #101010;
border-radius: 20px;
color: rgba(255, 255, 255, 0.8);
font-weight: bold;
text-decoration: none;
}

.back-btn:hover, .cart-button:hover {
background: rgba(255, 255, 255, 0.8);
color: #101010;
}

.cart-button {
background-color: #101010;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
border-radius: 50px;
padding: 10px 15px;
cursor: pointer;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.3s;
}

#cart-count {
font-weight: bold;
}

.whatsapp-float {
position: fixed;
bottom: 20px;
right: 5px;
width: 60px;
height: 60px;
z-index: 1000;
}

.whatsapp-float img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease-in-out;
}

.whatsapp-float img:hover {
transform: scale(1.1);
}

.delivery-sticker {
position: absolute; 
top: 60vh;
left: 11px;
background-color: #333;
color: rgba(255, 255, 255, 0.8);
width: 11vw; 
height: 11vw; 
border-radius: 50%; 
font-size: 1.8vw; 
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 1100; 
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
text-align: center;
padding: 0;
animation: pulse 2s infinite; 
}

@keyframes pulse {
0% {
transform: scale(1); /* Normal size */
}
50% {
transform: scale(1.1); /* Slightly larger size */
}
100% {
transform: scale(1); /* Back to normal size */
}
}

.delivery-sticker {
transform: translateY(-50%); /* Adjust the vertical position */
}



.icon {
color: rgba(255, 255, 255, 0.8);
}


/* Footer */
footer {
padding: 20px;
background: #333;
color: rgba(255, 255, 255, 0.8);
margin-top: 20px;
}

@media (max-width: 768px) {
body {
overflow-x: hidden; /* Prevent horizontal scrolling */
}
.nav-links {
display: none;
flex-direction: column;
background: #0c0c0c;
position: absolute;
top: 40px;
left: 0;
width: 100%;
text-align: center;
padding: 10px 0;
z-index: 999;
}

.nav-links.active {
display: flex;
}

.nav-links li {
margin: 10px 0;
}

.menu-toggle {
display: block;
}

.hero {
height: 40vh;
}

.delivery-sticker {
bottom: 120px; /* Increased gap for mobile screens */
}

#backToTopBtn {
 font-size: 7px;
 }
    

}

.product-card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}

.product-card {
background-color: #333;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: calc(33% - 20px); /* 3 columns for medium to large screens */
box-sizing: border-box;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 1px solid #0c0c0c;
}

.product-card label {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}

.product-card input {
width: 40px;
padding: 5px;
font-size: 16px;
margin: 10px 0;
}

.product-card button {
background-color: #101010;
color: rgba(255, 255, 255, 0.8);
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
width: 100%;
max-width: 200px;
}

.product-card button:hover {
background-color: rgba(255, 255, 255, 0.8);
color: #101010;
}

#search-bar {
width: 40%;
padding: 10px;
margin-bottom: 20px;
font-size: 16px;
border-radius: 20px;
border: none;
box-sizing: border-box;
}

.social-links {
margin-top: 10px;
text-align: center;
}

.social-links a {
display: inline-block;
margin: 0 10px;
font-size: 24px;
color: rgba(255, 255, 255, 0.8); /* Adjust color as needed */
transition: color 0.3s ease;
}

.social-links a:hover {
font-size: 20px; /* Change to the desired hover color */
}

.cart-item {
color: rgba(255, 255, 255, 0.8); /* Change this to any color you prefer */
font-weight: bold; /* Optional: Makes text bold */
font-size: 16px; /* Optional: Adjust font size */
}


@media (max-width: 768px) {
.product-card {
width: calc(50% - 20px); /* 2 columns on medium screens */
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.product-card label {
font-size: 14px;
margin-right: 10px;
}

.product-card input {
width: 30px;
}

.product-card button {
font-size: 14px;
width: 45%;
margin-left: 10px;
}

#whatsapp-btn, .back-btn {
font-size: 14px; /* Reduce text size */
padding: 8px 16px; /* Adjust padding */
width: auto; /* Ensure it doesn't stretch */
}
}

@media (max-width: 480px) {
.product-card {
width: 100%; /* 1 column on small screens */
flex-direction: column;
}

.product-card label {
font-size: 14px;
}

.product-card input {
width: 40px;
}

.product-card button {
width: 100%;
font-size: 14px;
}
#whatsapp-btn, .back-btn {
font-size: 12px; /* Reduce font size further */
padding: 6px 12px; /* Smaller padding */
}


}

@media (max-width: 376px) {
.hero {
height: 60vh; /* Reduced height on smaller screens */
}
}

@media (max-width: 870px) {
.delivery-sticker {
bottom: 120px; /* Increased gap for mobile screens */
}
}

@media (max-width: 413px) {
.hero {
height: 60vh; /* Reduced height on smaller screens */
}

}

@media (max-width: 1025px) {
.hero {
height: 40vh; /* Reduced height on smaller screens */
}
}

@media (max-width: 542px) {
.hero {
height: 50vh; /* Reduced height on smaller screens */
}
}

@media (max-width: 912px) {
.delivery-sticker {
top: 40vh; /* Move it higher */
}
}

@media (max-width: 820px) {
.delivery-sticker {
top: 45vh; /* Slightly higher */
}
}

@media (max-width: 767px) {
.delivery-sticker {
top: 55vh; /* Higher position for smaller screens */
}
}