/* General Reset */

html, body {
    height: 100%; /* Ensures the page content takes full height */
    margin: 0; /* Removes default margin */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures content flows vertically */
}

main {
    flex: 1; /* Takes up remaining space between header and footer */
}

footer {
    flex-shrink: 0; /* Prevents footer from shrinking */
    position: relative;
}

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

/* Header (Top Section) */
header {
    background-color: #f8f9fa; /* Light gray background for the header */
    z-index: 1050;
}

/* Logo and Search Bar */
.navbar-brand img {
    height: 60px;
    width: auto;
}

form .form-control {
    padding-left: 40px; /* To accommodate the search icon */
    border-radius: 25px;
}

form i {
    font-size: 18px;
    color: #6c757d;
}

/* Navigation Menu */
.navbar {
    background-color: #343a40; /* Dark background for navbar */
}

.navbar-nav .nav-link {
    color: #c18945 !important; /* White text for menu items */
    padding: 10px 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #f8c032; /* Hover effect with gold color */
}

.navbar-toggler {
    border: 2px solid orange; /* Toggler icon border color */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,..."); /* Customize the hamburger icon */
}

/* Profile Dropdown */
.navbar .dropdown-menu {
    background-color: rgb(239, 9, 9) /* Match dropdown menu to navbar */
}

.navbar .dropdown-item {
    color: orange !important;
    padding: 12px 15px;
    font-size: 1rem;
}

.navbar .dropdown-item:hover {
    background-color: #f8c032; /* Highlight dropdown items on hover */
    color: #343a40 !important;
}

/* Footer Styling */
footer {
    background-color: #343a40;
    color: #ffffff;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%; /* Adjust width as needed */
    margin: 0 auto;    /* Center the footer */
    border-radius: 0px;
    border-color: orange; /* Optional: Add rounded corners */
    margin-top: 50px;
}
.btn-outline-light {
    color:#003366!important;
}
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: orange!important;
      /* Set the border color to orange */
}


footer h4,
footer h5 {
    color: #f8c032; /* Gold color for headings */
    font-weight: bold;
    margin-bottom: 20px;
}

footer p {
    color: #b0b0b0; /* Lighter text for descriptions */
    font-size: 0.9rem;
}

footer .input-group {
    max-width: 350px;
    margin: 0 auto;
}

footer .form-control {
    border-radius: 25px;
    padding: 15px;
}

footer .btn-primary {
    background-color: orange;
    border: none;
    border-radius: 25px;
    color: #343a40;
    padding: 12px 25px;
}

footer .btn-primary:hover {
    
    background-color: orange;
    color: white;
}

footer .social-media a {
    font-size: 20px;
    color:white;
    margin-right: 15px;
}

footer .social-media a:hover {
    color: #f8c032; /* Highlight social icons on hover */
}

/* Iron Group Section */
footer .row img {
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

footer .row img:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Footer Bottom */
footer .row p {
    font-size: 0.8rem;
    color: #b0b0b0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }

    .navbar-nav .nav-link {
        font-size: 1rem;
        padding: 15px 20px;
    }

    footer .input-group {
        width: 100%;
    }

    footer .social-media {
        text-align: center;
        margin-top: 20px;
    }

    footer .row img {
        max-width: 80%;
        margin: 0 auto;
    }
}

.message-container {
    position: fixed;
    top: 72px;
    right: 15px;
    z-index: 9999; /* Ensure it's above other elements */
    overflow: visible;
}

.toast {
    background-color: #ffffff; /* White background */
    color: #000; /* Black text */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.toast-header {
    background-color: #343a40; /* Dark background for header */
    color: #ffffff;
}

.toast-body {
    font-size: 1rem;
    padding: 1rem;
}

.header-container {
    /* background: linear-gradient(90deg, rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url('/static/images/profile-bg.jpg'); */
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 50px 20px;
    border-radius: 10px;
}

.btn-back {
    background-color: #f8f9fa;
    color: #333;
    border: 2px solid #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-back:hover {
    background-color: #333;
    color: #fff;
}

.btn-cart {
    background-color: #ff8c00; /* Orange color */
    color: white;
    border: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-cart:hover {
    background-color: #e67e22;
    transform: translateY(-5px); /* Slight lift effect */
}

/* Spacing and Layout Adjustments */
.container {
    max-width: 1200px; /* Limit the width */
}

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

.col-md-6 {
    margin-bottom: 20px;
}

h1.logo-font {
    font-family: 'Georgia', serif;
    font-weight: bold;
    font-size: 2.5rem;
    color: #333;
}

/* Modal overlay */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}



.btn-dark {
    background-color: #343a40;
    border: none;
    color: #fff;
    transition: background-color 0.3s ease;
}

.btn-dark:hover {
    background-color: #495057;
}

.list-group-item {
    font-size: 0.9rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.list-group-item strong {
    color: #212529;
}

/* Product Form */

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0;
    border-color: #dc3545;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #dc3545;
    border-color: #dc3545;
    border-radius: 0;
}



  /* Optional: Adjust card hover effect for different screen sizes */
  @media (max-width: 768px) {
    .product-card:hover .card {
      transform: translateY(0); /* Disable hover effect for small screens */
    }
  }
  /* Hide logo on small screens */
@media (max-width: 767px) {
    .logo-container {
        display: none;
    }

    /* Adjust search bar and icons container */
    .d-flex.align-items-center {
        justify-content: space-between;
        width: 100%;
    }
}

/* Ensure proper alignment when logo is visible */
@media (min-width: 768px) {
    .d-flex.align-items-center {
        justify-content: flex-end;
    }
    footer {
        padding: 35px;
    }
}

  /* Custom dropdown menu styling */
  .dropdown-menu {
    background-color: white;; /* Change to your preferred background color */
    color: orange; /* Change text color */
    border-radius: 8px; /* Optional: Rounded corners for the dropdown */
    padding: 10px 0; /* Optional: Add some padding for better spacing */
}

/* Hover effect for items inside the dropdown */
.dropdown-item:hover {
    background-color: orange; /* Darker shade for hover */
    color: black; /* Keep text white when hovered */
}

/* Focus effect for items inside the dropdown */
.dropdown-item:focus {
    background-color: #0056b3;
    color: white;
}

/* Optional: Change active item color */
.dropdown-item.active {
    background-color: #004085; /* Darker color for active state */
    color: white;
}