body {
    background-color: #EFEFEF;
}

/* Base Container Styling */
.container-fluid {
    display: flex; /* Use flexbox for layout */
    align-items: center;
    justify-content: space-between; /* Space out elements */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    height: auto; /* Adjust height dynamically */
    background-color: #FFFFFF;
    box-shadow: 0 7px 3px -2px lightgrey;
    padding: 10px 20px;
    position: relative; /* Enables precise positioning adjustments */
}

/* Logo Styling */
.logo {
    width: 240px;
    height: auto; /* Maintain aspect ratio */
    max-width: 100%;
    margin-left: 20px; /* Move logo to the right */
    position: relative; /* Allows precise control over placement */
    left: 20px; /* Fine-tune placement */
}

/* Search Bar Styling */
.search-bar {
    display: flex;
    flex-grow: 1; /* Allow search bar to grow dynamically */
    max-width: 800px; /* Limit max width */
    margin-right: 10px;
}

/* Search Input Field */
.search-bar .form-control {
    flex-grow: 1; /* Fill available space */
    font-size: 18px;
    border-radius: 74px;
    padding-left: 40px;
    margin-right: 10px; /* Space between input and button */
}

/* Search Button */
.search-bar .btn-outline-success {
    height: 55px;
    font-size: 20px;
    border-radius: 74px;
    background-color: #1A54C0;
    color: #FFFFFF;
    padding: 0 45px;
}

/* Hover Effects */
.search-bar .btn-outline-success:hover {
    background-color: #154a9e;
    transform: scale(1.05); /* Hover effect */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Login Button Styling */
.btn-primary {
    height: 40px;
    font-size: 16px;
    border-radius: 74px;
    background-color: #1A54C0;
    padding: 0 25px;
    margin-right: 20px; /* Adjust spacing for better placement */
    position: relative;
    right: 40px; /* Move the login button to the left */
}

.btn-primary:hover {
    background-color: #154a9e;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .container-fluid {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the left */
    }

    .logo {
        margin-bottom: 20px; /* Add spacing below the logo */
        margin-left: 0; /* Reset left margin */
        left: 0; /* Reset left position */
    }

    .search-bar {
        flex-direction: column; /* Stack input and button */
        align-items: stretch; /* Full width for stacked elements */
        width: 100%; /* Take full width */
        max-width: 100%;
        margin-bottom: 20px; /* Add spacing below */
    }

    .search-bar .form-control {
        margin-right: 0; /* Remove margin for stacking */
        margin-bottom: 10px; /* Add spacing below input */
    }

    .search-bar .btn-outline-success {
        width: 100%; /* Full width button */
    }

    .btn-primary {
        width: 100%; /* Full width login button */
        margin: 0; /* Align with other buttons */
        left: -5px; /* Reset right position */
    }
}



.mx-2 {
    
}

/* Hide the input number controls */
#quantity::-webkit-outer-spin-button,
#quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-add-to-cart {
    height: 40px;
    font-size: 16px;
    border-radius: 74px;
    background-color: #1A54C0;
    padding: 0 25px;
    margin-left: 40px; /* Adjust spacing for better placement */
    position: relative;
    right: 40px; /* Move the login button to the left */
    color: #FFFFFF;
}

.btn-add-to-cart:hover {
    background-color: #154a9e;
    color: #FFFFFF;
}

.btn-success {
    height: 40px;
    font-size: 16px;
    border-radius: 74px;
    padding: 0 25px;
    position: relative;
    margin-left: 5px;
    right: 40px; /* Move the login button to the left */
    color: #FFFFFF;
}

.text-justify {
    text-align: justify;
}

.modal-content {
    border-radius: 8px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  
  .modal-header {
    border-bottom: none;
    text-align: center;
  }
  
  .modal-header .modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
  
  /* Base Container Styling */
  .container-fluid {
    display: flex; /* Use flexbox for layout */
    align-items: center;
    justify-content: space-between; /* Space out elements */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    height: auto; /* Adjust height dynamically */
    background-color: #FFFFFF;
    box-shadow: 0 7px 3px -2px lightgrey;
    padding: 10px 20px;
    position: relative; /* Enables precise positioning adjustments */
  }
  
  /* Logo Styling */
  .logo {
    width: 240px;
    height: auto; /* Maintain aspect ratio */
    max-width: 100%;
    margin-left: 20px; /* Move logo to the right */
    position: relative; /* Allows precise control over placement */
    left: 20px; /* Fine-tune placement */
  }
  
  /* Search Bar Styling */
  .search-bar {
    display: flex;
    flex-grow: 1; /* Allow search bar to grow dynamically */
    max-width: 800px; /* Limit max width */
    margin-right: 10px;
  }
  
  /* Search Input Field */
  .search-bar .form-control {
    flex-grow: 1; /* Fill available space */
    font-size: 18px;
    border-radius: 74px;
    padding-left: 40px;
    margin-right: 10px; /* Space between input and button */
  }
  
  /* Search Button */
  .search-bar .btn-outline-success {
    height: 55px;
    font-size: 20px;
    border-radius: 74px;
    background-color: #1A54C0;
    color: #FFFFFF;
    padding: 0 45px;
  }
  
  /* Hover Effects */
  .search-bar .btn-outline-success:hover {
    background-color: #154a9e;
    transform: scale(1.01); /* Hover effect */
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  /* Login Button Styling */
  .btn-primary {
    height: 40px;
    font-size: 16px;
    border-radius: 74px;
    background-color: #1A54C0;
    padding: 0 25px;
    margin-right: 20px; /* Adjust spacing for better placement */
    position: relative;
    right: 40px; /* Move the login button to the left */
  }
  
  .btn-primary:hover {
    background-color: #154a9e;
    transform: scale(1.01); /* Hover effect */
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .container-fluid {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the left */
    }
  
    .logo {
        margin-bottom: 20px; /* Add spacing below the logo */
        margin-left: 0; /* Reset left margin */
        left: 0; /* Reset left position */
    }
  
    .search-bar {
        flex-direction: column; /* Stack input and button */
        align-items: stretch; /* Full width for stacked elements */
        width: 100%; /* Take full width */
        max-width: 100%;
        margin-bottom: 20px; /* Add spacing below */
    }
  
    .search-bar .form-control {
        margin-right: 0; /* Remove margin for stacking */
        margin-bottom: 10px; /* Add spacing below input */
    }
  
    .search-bar .btn-outline-success {
        width: 100%; /* Full width button */
    }
  
    .btn-primary {
        width: 100%; /* Full width login button */
        margin: 0; /* Align with other buttons */
        left: -5px; /* Reset right position */
    }
  }
  
  /* Logo Styling for Modal */
  .rpc-logo {
    width: 300px;
    height: 100px;
    margin-left: 60px;
  }
  
  /* Login Form Styling */
  .form-box {
    text-align: center;
  }
  
  .form-box img {
    max-width: 100px;
    margin-bottom: 15px;
  }
  
  .input-group {
    margin-bottom: 15px;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center; /* Vertically aligns input and icon */
  }
  
  .input-group label {
    font-size: 0.9rem;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: #333;
  }
  
  .input {
    background-color: #D9D9D9;
    border-radius: 18px;
    padding-left: 20px;
    width: 100%;
    font-size: 0.9rem;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Smooth focus transitions */
  }
  
  .input-field {
    width: 100%;
    padding: 10px;
    padding-left: 20px;
    border: 1px solid #ddd;
    border-radius: 18px !important;
    font-size: 0.9rem;
    background-color: #D9D9D9;
  }
  
  .input-group .toggle-password {
    position: absolute; /* Position inside the container */
    right: 20px; /* Distance from the right edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
    width: 20px; /* Icon size */
    height: 20px;
    cursor: pointer;
    opacity: 0.7; /* Slight transparency */
    transition: opacity 0.2s ease;
    z-index: 10; /* Ensure it stays above input field */
    margin-top: 15px;
  }
  
  .input-group:focus-within .toggle-password {
    opacity: 1; /* Full visibility on focus */
  }
  
  .input-field:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
  }
  
  /* Button Styling */
  .d-grid .login-btn {
    width: 130px;
    height: 40px;
    background-color: #007bff;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0;
    justify-content: center;
    margin-left: 150px;
    border: none;
    border-radius: 18px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
  }
  
  .d-grid .login-btn:hover {
    background-color: #0056b3;
    transform: scale(1.03); /* Hover effect */
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  /* Create Account Link */
  .create-account {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9rem;
  }
  
  .create-account:hover {
    text-decoration: underline;
  }
  
  /* Center the "Don't have an account?" text */
  p {
    font-size: 0.9rem;
    margin: 12px 0;
    color: #333;
    text-align: center;
  }
  
  /* Registration Styling */
  #registrationModal .modal-content {
    border-radius: 20px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  
  #registrationModal .rpc-logo {
    margin-right: 65px;
    margin-bottom: -20px;
  }
  
  #registrationModal .input-group {
    position: relative;
    display: flex;
    align-items: center; /* Vertically aligns input and icon */
  }
  
  #registrationModal .input-field {
    width: 100%;
    padding: 10px;
    padding-left: 20px;
    border: 1px solid #ddd;
    border-radius: 18px !important;
    font-size: 0.9rem;
    background-color: #D9D9D9;
  }
  
  /* Toggle Password Icon Styling */
  #registrationModal .input-group .toggle-password {
    position: absolute; /* Anchored to the input group */
    right: 30px; /* Adjust distance from the right edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Ensure perfect centering */
    width: 20px; /* Icon size */
    height: 20px;
    cursor: pointer;
    opacity: 0.7; /* Slight transparency */
    transition: opacity 0.2s ease, transform 0.2s ease; /* Smooth transition */
    margin-top: 15px;
    z-index: 10; /* Ensure it stays above input field */
  }
  
  #registrationModal .input-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
  }
  
  /* Ensure icon stays visible while typing */
  #registrationModal .input-group:focus-within .toggle-password {
    opacity: 1; /* Full visibility on focus */
  }
  
  #registrationModal .btn-primary {
    width: 130px;
    height: 40px;
    border-radius: 18px;
    padding: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #registrationModal .btn-primary {
    margin-left: 170px;
  }
  
  #registrationModal .btn-primary:hover {
    background-color: #0056b3;
    transform: scale(1.03); /* Hover effect */
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  .feedback {
    font-size: 0.9rem;
    margin-top: -15px;
  }
  
  /* Terms and Conditions */
  #registrationModal .terms {
    margin-top: 15px;
    font-size: 0.9rem;
  }
  
  #registrationModal .terms a {
    color: #007bff;
  }
  
  #registrationModal .terms a:hover {
    text-decoration: underline;
  }
  
  /* Create Account Link in Registration */
  #registrationModal .create-account {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9rem;
  }
  
  #registrationModal .create-account:hover {
    text-decoration: underline;
  }
  
  /* Center the "Already have an account?" text */
  #registrationModal p {
    font-size: 0.9rem;
    color: #333;
    text-align: center;
    margin-top: -8px;
    margin-bottom: 25px;
  }