* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and border are included within element width/height */
}
body {
    padding-top: 45px; /* Adjust according to the height of the fixed elements */
}

/*********************CONTACT BEGINS***********************************/
.contact-details {
    background-color: #E0F7FA; /* Light cyan-blue background */
    color: #333; /* Dark text for better readability */

}
.location {
    position: relative;
    text-align: center;
}
.location img {
    width: 100%; /* Set to 100% of the parent container */
    height: auto;
    object-fit: cover; /* Makes sure the image is cropped if necessary */
    display: block; /* Ensure block display */
}

.middle-right {
    position: absolute;
    top: 30%;
    right: 20px; /* Adjust the position */
    max-width: 500px; /* Max box width for responsiveness */
    background-color: rgba(255, 255, 255, 0.9); /* White background with transparency */
    border: 2px solid #333; /* Solid border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for a 3D effect */
}
.fa-facebook {
    font-size: 30px; /* Adjust the size */
    color: #4267B2;  /* Facebook's blue color */
    margin-right: 10px; /* Optional spacing */
}
.fa-whatsapp{
    font-size: 30px; /* Adjust the size */
    color: green;  /* Facebook's blue color */
    margin-right: 10px; /* Optional spacing */
}

/*********************CONTACT ENDS***********************************/
/**************************BEST SELLERS BEGINS ***************************/
.productt {
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align items */
    justify-content: flex-start; /* Align to the top */
    gap: 0px; /* Space between image and text */
    width: 100%;
}

.productt img {
    width: 100%; /* Set to 100% of the parent container */
    max-width: 300px; /* Limit to a maximum width of 300px */
    height: auto;
    object-fit: cover; /* Makes sure the image is cropped if necessary */
    display: block; /* Ensure block display */
}

/* Product Name & Price Text */
.productt h3, .productt .price {
    text-align: center; /* Center text */
    margin: 0; /* Remove default margin */
    color: #1a5149; /* Light text for name and price */
    font-weight: 700;
}

.productt h3 {
    font-size: 1.5rem;
}

.productt .price {
    font-size: 1.2rem;
    margin-top: 10px; /* Space above price */
}

/**************************BEST SELLERS ENDS ***************************/

/********************************INTRO BEGINS******************************/
.intro {
    padding: 40px 20px;  /*Adds spacious padding */
    background-color: #f8f1e4; /* A soft, neutral background color */
    color: #333; /* Dark text for better contrast */
    text-align: center; /* Centers text */
    border-radius: 15px; /* Soft rounded corners for a modern look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animation */
}

.intro:hover {
    transform: translateY(-5px); /* Slightly lift the container on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase shadow depth on hover */
}

.intro h3 {
    font-size: 1.8rem; /* Adjusted font size for better readability *//
}
.about{
    padding: 30px 20px;
    background-color: rgba(0, 0, 0, 0.153);
}

/********************************INTRO ENDS******************************/

/****************************30ML WHITE BEGINS ********************************/

.thirtyml-container {
    padding: 20px; /* Adjusted for better spacing */
    background-color: rgba(125, 125, 125, 0.833); /* Background color */
}

.ml30 .card-body {
    padding: 1rem; /* Adjust padding for card body */
}

.ml30 .price {
    font-size: 1em; /* Adjust price text size if needed */
    color: rgb(30, 56, 56);
    margin: 0; /* No margin for compactness */
}

.ml30:hover {
    transform: translateY(-5px);
    transition: transform 0.3s; /* Smooth transition for hover effect */
}


/****************************30ML WHITE ENDS ********************************/

/***************50ML COLOR BEGINS ****************************************/
.fiftyml-container {
    padding: 20px; /* Adjusted for better spacing */
    background-color: rgba(125, 125, 125, 0.833); /* Background color */
}

.ml50 .card-body {
    padding: 1rem; /* Adjust padding for card body */
}

.ml50 .price {
    font-size: 1em; /* Adjust price text size if needed */
    color: rgb(30, 56, 56);
    margin: 0; /* No margin for compactness */
}

.ml50:hover {
    transform: translateY(-5px);
    transition: transform 0.3s; /* Smooth transition for hover effect */
}

/*********************50ML COLOR ENDS************************************/

/****************BUKHOOR BEGINS *****************************/
.bukhoor-section {
    background-color: #c4bfbf; /* Dark background */
    color: white; /* Text in white for contrast */
}

.bukhoor-item {
    background-color: #eff1e0; /* Slightly lighter background */
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.bukhoor-item img {
    max-width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: contain;
    margin-bottom: 15px;
}

.bukhoor-item h3 {
    font-size: 1.2em;
    color: #060503; /* A light gold color to match the dark background */
    margin-bottom: 5px;
}

.bukhoor-item p.price {
    font-size: 1.1em;
    color: #020101; /* Subtle gray for the price */
}

.bukhoor-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}


/****************BUKHOOR ENDS*****************************/

/************************HEADER BEGINS*********************/

/* Header Styles */
h5 {
    background-color: antiquewhite; /* Sets background color */
    padding: 10px; /* Adds padding inside the element */
    width: 100%; /* Makes the h5 span the full width of the page */
    position: fixed; /* Fixes the h5 element at the top of the viewport */
    top: 0; /* Positions the element exactly at the top */
    z-index: 1000; /* Ensures the h5 stays on top of other content */
    height: 35px; /* Defines the height of the h5, making sure it's consistent */
}

.first > h3 {
    text-align: center;
    background-color: black; /* Background for the h1 */
    position: fixed; /* Fixes the h1 relative to the viewport */
    top: 35px; /* Places the h1 just below the h5 */
    z-index: 999; /* Keeps the h1 above other content but below the h5 */
    width: 100%;
    color: whitesmoke;
    padding: 20px;
}
/* Style for the navbar */
.navbar {
    margin-top: 50px; /* Ensure space for the fixed header elements */
    width: 100%; /* Full-width navbar */
    background-color: black; /* Soft black/charcoal background */
    padding: 0;
    justify-content: center; /* Centers the content horizontally */
}

.navbar-nav {
    width: 100%; /* Ensures the nav covers full width */
    justify-content: center; /* Aligns nav-items to the center */
}

.navbar-nav .nav-item {
    margin: 0 15px; /* Space between nav items */
}

.navbar-nav .nav-link {
    color: #f5f5f5; /* Light gray/white text for contrast */
    font-size: 18px; /* Larger font for readability */
    padding: 10px 20px; /* Add padding for spacing */
    text-transform: uppercase; /* Make text uppercase for style */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.navbar-nav .nav-link:hover {
    background-color: #555555; /* Dark gray for hover effect */
    color: #e0e0e0; /* Lighter gray for hover text */
}
.navbar-toggler {
    border-color: #f5f5f5; /* Light gray for the button border */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23f5f5f5' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); 
    /* Custom light gray icon for the three bars */
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: #4444; /* Slightly lighter shade for dropdown */
    border: none; /* Remove border */
}

.dropdown-item {
    color: #f5f5f5; /* Light gray for dropdown items */
}

.dropdown-item:hover {
    background-color: #666666; /* Slightly lighter gray on hover */
    color: #ffffff; /* White text on hover */
}

/************************HEADER ENDS*********************/

/****************************** FOOTER CSS *****************************/

.footerr {
    background-color: antiquewhite; /* Sets the footer background color */
    padding: 20px 0; /* Adds padding for spacing */
    width: 100%; /* Ensures the footer takes the full width */
}

.footer-content {
    padding: 20px; /* Padding around content */
    text-align: left; /* Aligns all text to the left for consistency */
}

.footer-content h2 {
    font-size: 1.5rem; /* Adjust heading size */
    margin-bottom: 15px; /* Space below heading */
    font-weight: bold; /* Makes the headings bold */
    color: #333; /* Heading color */
    padding-bottom: 5px; /* Space below the underline */
}

.footer-content ul {
    list-style-type: none; /* Removes bullet points */
    padding: 0; /* Removes default padding */
}

.footer-content ul li {
    margin-bottom: 10px; /* Space between list items */
}

.footer-content ul li a {
    color: #333; /* Text color */
    font-size: 1rem; /* Font size */
    text-decoration: none; /* Removes underline */
    transition: color 0.3s; /* Smooth transition for hover effect */
}

.footer-content ul li a:hover {
    color: #a02020; /* Change color on hover for links */
    text-decoration: underline; /* Underline on hover for links */
}

.footer-copyright {
    background-color: antiquewhite; /* Sets background color */
    padding: 10px; /* Adds padding inside the copyright section */
    text-align: left; /* Align text to the left */
    font-size: smaller; /* Font size for copyright text */
    color: #666; /* Darker gray for better readability */
    margin-top: 10px; /* Space above the copyright text */
    border-top: 1px solid #ccc; /* Adds a subtle top border */
}




/****************************** FOOTER CSS ENDS*****************************/