/* Color Variables */
:root {
    --color-white: #FEFEFE;
    --color-pink: #FBF0FD;
    --color-brown: #4D3124;
    --color-light-brown: #8a7065;
    --color-green: #64D16E;
    --color-light-grey: #F4F4F4;
    --color-dark-grey: #C3BBC4;
}

body {
    overflow-x: hidden;
}
@media (min-width: 992px) {
    body {
        zoom: 1.1 /* Apply zoom only on desktop view (screens 992px and above) */
    }
}
/* Extended Utility Classes  */
.hide_me {
    visibility: hidden;
}
.show_me {
    visibility: visible;
}
a {
    text-decoration: none; /* Remove underline from all links */
    color: var(--color-brown); /* Default link color */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-brown); /* Default heading color */
}
h1-reverse, h2-reverse, h3-reverse, h4-reverse, h5-reverse, h6-reverse {
    color: var(--color-white); /* Default heading color */
}
p {
    color: var(--color-brown); /* Default paragraph color */
    text-align: justify;
}
.btn-pink {
    background-color: var(--color-pink);
    color: var(--color-brown);
    padding: 1rem 2rem;
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}
.btn-pink:hover {
    background-color: var(--color-brown);
    color: var(--color-white);
    padding: 1rem 2rem;
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}

.btn-brown {
    background-color: var(--color-brown);
    color: var(--color-white);
    padding: 1rem 2rem;
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}
.btn-brown:hover {
    background-color: var(--color-pink);
    color: var(--color-brown);
    padding: 1rem 2rem;
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}
.btn-brown-small {
    background-color: var(--color-brown);
    color: var(--color-white);
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}
.btn-brown-small:hover {
    background-color: var(--color-pink);
    color: var(--color-brown);
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}

.btn-white {
    background-color: var(--color-white);
    color: var(--color-brown);
    padding: 1rem 2rem;
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}
.btn-white:hover {
    background-color: var(--color-brown);
    color: var(--color-white);
    padding: 1rem 2rem;
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}
.btn-white-small {
    background-color: var(--color-white);
    color: var(--color-brown);
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}
.btn-white-small:hover {
    background-color: var(--color-brown);
    color: var(--color-white);
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    text-decoration: none;
}



/* HEADER */
/* Container for all icons */
.logo{
    /* width: 80%;
    height: 80%; */
    display: flex;
}

.icon-container {
    display: flex;
    align-items: center; /* Vertically center the icons */
    justify-content: space-between; /* Distribute space between icons evenly */
    gap: 1rem; /* Space between each icon */
}

.custom-circle-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem; /* Reduced width of the circle */
    height: 1.5rem; /* Reduced height of the circle */
    border-radius: 50%; /* Makes the link circular */
    background-color: var(--color-brown); /* Background color (similar to btn-secondary) */
    color: var(--color-white); /* Icon color */
    text-decoration: none; /* Remove underline */
    font-size: 1rem; /* Adjust icon size */
    transition: background-color 0.3s ease;
}

/* Remove the default hover effect for links */
.custom-circle-link:hover {
    color: var(--color-white); /* Keep the icon color unchanged */
    background-color: var(--color-brown); /* Keep the background color unchanged */
    text-decoration: none; /* Ensure no underline on hover */
}

.nav-link {
    color: var(--color-brown);  /* Link color */
    font-size: 13px; /* Adjust font size as needed */
}

a:hover {
    text-decoration: none; /* Ensure no underline on hover */
    color: var(--color-brown);  /* Keep the icon color unchanged */
}

.search-input {
    background-color: var(--color-pink); /* Example: light pink background */
    border: none; /* Remove the default border */
}

.search-input::placeholder {
    font-size: 0.6rem; /* Adjust this value to reduce the placeholder text size */
    color: var(--color-brown);  /* Optional: Change the color of the placeholder text */
}

/* Prevent background color change when the input is focused */
.search-input:focus {
    background-color: var(--color-pink); /* Keep the same color when focused */
    box-shadow: none; /* Remove the default box shadow on focus */
}

.container-fluid {
    margin-left: 10%;  /* Adjust this value as needed */
    margin-right: 10%; /* Adjust this value as needed */
}
/* HEADER ends here */

/* Hero Banner Section */
.container-img{
    position: relative;
    text-align: center;
    width: 100%;
    height: 90vh; /* Set height to 40% of the viewport height */
    overflow: hidden; 
}

.banner-image {
    width: 100%; /* Stretch the image to fill the container */
    height: 100%; /* Stretch the image to take up full container height */
    object-fit: cover; /* Ensure the image maintains aspect ratio and covers the container */
}

/* Center the text over the image */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Text color for visibility */
    font-size: 48px; /* Optional: Adjust font size */
    text-align: center;
    z-index: 1; /* Ensure text is above the image */
    font-weight: bold; /* Bold font for emphasis */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: Add shadow for better readability */
}

/* Position the dropdown container below the text */
.dropdown-container {
    position: absolute;
    top: calc(70% + 30px); /* Position it below the text, relative to the text */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    background-color: white;
    appearance: none;
}
.country-select {
    border: 1px solid var(--color-white); /* Optional: Add a border to match the design */
    margin: 1px solid var(--color-white);
    appearance: none;
}
.country-option {
    border: 1px solid white; /* Optional: Add a border to match the design */
    margin: none;
    appearance: none;
}

/* Adjust font size on smaller screens */
@media (max-width: 768px) {
    .centered {
        font-size: 2rem; /* Adjust for smaller screen */
    }

    /* Adjust dropdown position for smaller screens if needed */
    .dropdown-container {
        top: calc(70% + 30px);
    }
}

/* Style the dropdown button */
.btn-group {
    margin-bottom: 0; /* Remove any bottom margin */
}

/* Style the arrow button */
.btn-arrow {
    background-color:var(--color-brown); /* Change to your preferred color */
    color: var(--color-white);
    border: 1px solid var(--color-brown); /* Optional: Add a border */
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    align-content: center;
}

/* Style the arrow icon with brown background */
.btn-arrow i {
   /* Set the background color to brown */
    color: var(--color-white); /* Set the icon color to white */
    border-radius: 50%; /* Optional: rounds the corners of the background */
    padding: 10px; /* Add padding around the icon */
}

.dropdown-menu {
    text-align: center; /* Align the dropdown items to the left */
    background-color: var(--color-white); /* Change background to white */
    border: 1px solid #ddd; /* Optional: Add a border to match the design */
    max-height: 200px; /* Set a max height for the dropdown */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    width: 100%; /* Optional: Ensure dropdown width matches button width */
}

.dropdown-item {
    color: black; /* Text color for the items */
}

.dropdown-item:hover {
    background-color: #f8f9fa; /* Change hover color */
}

.dropdown-toggle {
    background-color: white; /* Set background to white */
    color: black; /* Set text color to black */
    border: 1px solid #ddd; /* Optional: Add a light border */
    padding: 10px 20px; /* Adjust padding for the button */
    font-size: 16px; /* Adjust font size if needed */
    border: none;
}

.dropdown-toggle:hover {
    background-color: #f8f9fa; /* Light gray background on hover */
    color: black; /* Ensure text stays black */
}
/* Hero Banner Section ends here */


/* categories */
  /* Custom styles for favorite button */
  .favorite-btn {
    background-color: var(--color-white);
    border: none;
    font-size: 1rem; 
    border-radius: 50%;          /* Make the button circular */
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;                 /* Set the width of the button */
    height: 30px;                /* Set the height to make it a perfect circle */
}

/* Heart icon turns red when selected */
.favorite-btn.selected {
    color: red; /* Red color for the heart when selected */
}

/* Equal height for the cards */
.category-card {
    margin-bottom: 1rem;
    /* border-radius: 8px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards stretch to fill space */
}

.category-card .card-body {
    flex-grow: 1;
    padding: 1.5rem;
}

.category-card .card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.category-card .card-text {
    margin-bottom: 1rem;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
    /* border-radius: 8px; */
}

.card-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

.card-original-price {
    text-decoration: line-through;
    color: #888;
    margin-right: 10px;
}

.card-discounted-price {
    color: green;
}

/* Custom style for active tabs */
.nav-tabs .nav-link.active {
    background-color: var(--color-brown);
    color: white;
}

/* Container for header and tabs */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-container .title {
    font-size: 2rem;
    /* font-weight: bold; */
    color: var(--color-brown);
}

.header-container .nav-tabs .nav-link {
    border: 1px solid var(--color-brown);
    border-radius: 0 !important;
}

/* Equal height for the card rows */
.row-cols-md-3 .col {
    display: flex;
    justify-content: stretch;
}
/* categories end */
.store-btn {
    color: var(--color-white);
    background-color: var(--color-brown);
    border: 2px solid black;
    border-radius: 3px;
}

/* Our Story Section */
.OurStory {
    background-color: var(--color-pink);
}
.OurStoryImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.ReadMoreBtn {
    border: 1px solid var(--color-brown);
    background-color: var(--color-pink);
}
.ReadMoreBtn a {
    color: var(--color-brown);
    text-decoration: none;
}
.ReadMoreBtn:hover {
    border: 1px solid var(--color-pink);
    background-color: var(--color-brown);
}
.ReadMoreBtn:hover a {
    color: var(--color-white);
    text-decoration: none;
}
/* Our Story Section End */


/* How it Works Section */
.HowItWorksImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.HowItWorksCount {
    color: var(--color-brown);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
}
.HowItWorksItem {
    color: var(--color-brown);
}
.HowItWorksBtn {
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    background-color: var(--color-white);
}
.HowItWorksBtn a {
    color: var(--color-brown);
    text-decoration: none;
}
.HowItWorksBtn:hover {
    border: 1px solid var(--color-brown);
    border-radius: 5px;
    background-color: var(--color-brown);
}
.HowItWorksBtn:hover a {
    color: var(--color-white);
    text-decoration: none;
}

/* How it Works Section End*/
.OurService {
    border-top: 1px solid var(--color-brown);
}
.OurServicesItem {
    color: var(--color-brown);
}
.OurServicesImage {
    background-color: var(--color-brown);
    border: 1px solid var(--color-brown);
    border-radius: 50%;
    font-size: 2rem;
}
.OurServicesImage i {
    color: var(--color-white);
    border-radius: 50%;
    font-size: 3rem;
}


/* FOOTER */
.footer-container {
    background-color: var(--color-brown);    
}
footer {
    background-color: transparent;
    color: var(--color-white);
    text-align: center;
}
footer a {
    color: var(--color-white);
}
footer a:hover {
    color: var(--color-white);
}
.justified-text {
    text-align: justify;
}
.copyright {
    border-top: 1px solid var(--color-white);
}
/* FOOTER ENDS HERE */

/* Back to Top Button */
.back-to-top-btn {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-brown);
    color: var(--color-white);
    border: none;
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease-in-out;
}

.back-to-top-btn:hover {
    background-color: var(--color-pink);
    color: var(--color-brown);
}