:active,
:hover,
:focus {
    outline:unset;
    outline-offset: 0;
    box-shadow: none;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

   
    * {
        scrollbar-width: thin;
        scrollbar-color: #d2d2d2 var(--tertiary-color); 
    }

  

   
:root {
    --primary-color: #0068C8;
    --secondary-color: #0054A1;
    --tertiary-color: #F5F9FF;
    --white-color: #fff;
    --text-color: #666666;
    --black-color: #0b0b0b;
    --red-color: #E70000;
    --green-color: #00A651;
}

h1 {
    font-family: "Catamaran", serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 3.625rem;
    letter-spacing: -1px;
    margin-bottom: 0px;
}

h2 {

    font-family: "Catamaran", serif;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 2.937rem;
    margin-bottom: 0px;
}

h3 {
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 2.437rem;
    margin-bottom: 0px;
}

h4 {
    font-family: "Catamaran", serif;
    font-weight: 450;
    font-size: 1.375rem;
    line-height: 2.0625rem;
    margin-bottom: 0px;
}

h5 {
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    margin-bottom: 0px;
}

h6 {

    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 0px;
}

p {
    font-family: "Catamaran", serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.625rem;
    margin-bottom: 0px;
    color: var(--text-color);
}

a {
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: auto;
    margin-bottom: 0px;
}

li:hover {
    color: var(--primary-color);
}

.btn-sm {
    font-family: "Catamaran", serif;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0px;
}

.btn-md {
    font-family: "Catamaran", serif;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0px;
}

.btn-lg {
    font-family: "Catamaran", serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0px;
}

.btn-primary {
    color: var(--white-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 0.25rem;
}

.btn-primary:hover {
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 0.25rem;
}

.btn-outline-primary {
    color: var(--primary-color);
    background-color: var(--white-color);
    border-color: var(--primary-color);
    border-radius: 0.25rem;
}

.btn-outline-primary:hover {
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 0.25rem;
}

.btn-outline-secondary {
    color: var(--white-color);
    background-color: transparent;
    border-color: var(--white-color);
    border-radius: 0.25rem;
}

.btn-outline-secondary:hover {
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--white-color);
    border-radius: 0.25rem;
}

.form-filling .nav-link .active{
    color: var(--white-color);
    background-color: var(--primary-color);
    border-radius: 0;
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 0px;
}

.form-filling .nav-link{
    color: var(--primary-color);
    background-color: var(--tertiary-color);
    border-radius: 0;
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 0px;
}

.form-filling .nav-link:hover{
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 0;
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 0px;
}
.form-filling .nav-link.active{
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 0;
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 0px;
}

.form-filling .nav-link:focus{
    outline: unset;
    border: unset;
    box-shadow: none;
}


.dashboard .nav-link .active{
    color: var(--white-color);
    background-color: var(--primary-color);
    border-radius: 0;
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    margin-bottom: 0px;
    
}

.dashboard .nav-link{
    color: var(--primary-color);
    background-color: var(--tertiary-color);
    border-radius: 0;
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    margin-bottom: 0px;
}

.dashboard .nav-link:hover{
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 0;
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    margin-bottom: 0px;
}
.dashboard .nav-link.active{
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 0;
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    margin-bottom: 0px;
}

.dashboard .nav-link:focus{
    outline: unset;
    border: unset;
    box-shadow: none;
}

.wrapper {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}

.wrapper-background {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    background-color: var(--tertiary-color);
}

.breadcrumb-wrapper {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: var(--tertiary-color);
}

.overflow-auto::-webkit-srcollbar {
    width: 0.625rem;
}

.overflow-auto::-webkit-scrollbar-track {
    background: var(--white-color);
}

.overflow-auto::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

/* Header*/

header {
    background-color: var(--black-color);
}

/* Footer*/

footer {
    background-color: var(--black-color);
}

footer .col-md-4 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.footernav {
    color: var(--white-color);
}

footer .social-icons {
    height: 2rem;
    width: 2rem;
}

body {
    overflow-x: hidden;
}

/* Homepage */

.nav-link {
    color: var(--white-color);
}

.navbar-nav .nav-link {
    color: var(--white-color);
}

.navbar {
    position: fixed;
    width: 100%;
    background-color: #0b0b0b;
    z-index: 1000;
    transition: all 0.3s ease-out;
}

.dropdown-submenu {
    position: relative;
  }

  .dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: 0;
    display: none;
  }

  .dropdown-submenu.show > .dropdown-menu {
    display: block;
  }

  /* Optional: cursor styling */
  .dropdown-submenu > a {
    cursor: pointer;
  }

.hero {
    background-image: url('../images/Frame\ 8.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 31.25rem;
}

.hero .box-1 {
    height: 31.25rem;
}

.hero .box-1 h4,
h1 {
    color: var(--white-color);
}

.enquiry-section .seller {
    border-radius: 0.25rem;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    background-image: url('../images/Frame\ 15.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.enquiry-section .buyer {
    border-radius: 0.25rem;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    background-image: url('../images/Frame\ 141.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.enquiry-section h3 {
    color: var(--white-color);
}

.categoryYouMayLike .card {
    display: flex;
    align-items: center;
    box-shadow: 0.625rem;
    border-radius: 0.625rem;
}

.categoryYouMayLike .card:hover {
    background-color: var(--secondary-color);
}

.categoryYouMayLike a:hover {
    color: var(--white-color);
}

.top-heading {
    border-bottom: 0.25rem solid var(--primary-color);
    width: fit-content;
    padding-left: 0rem;
}

.categorycarousel .card .category-image {
    width: 80%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.custom-nav {
    display: flex;
    z-index: 2;
    justify-content: space-between;
}

.owl-prev {
    border-radius: 50%;
    position: relative;
    bottom: 9.0625rem;
    z-index: 9;
    left: -0.75rem;
    background-color: var(--white-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.owl-next {
    border-radius: 50%;
    position: relative;
    bottom: 9.0625rem;
    z-index: 9;
    left: 0.75rem;
    background-color: var(--white-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.rowcategory {
    margin-top: 2.5rem;
}

.header-search {
    background-color: var(--black-color);
}

.productsYouMayLike img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 0.25rem;
}

.product-box {
    margin-top: 2.5rem;
}

.product-box h5 {

    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

.product-box h6 {
    margin-top: 1rem;
    color: var(--text-color);
}

.product-box .d-flex {
    margin-top: 1rem;
}

.product-box h3 {
    color: var(--red-color);
    margin-top: 1rem;
}

.product-box .send-enquiry-btn {
    margin-top: 1.75rem;
}



.Arrival-Famous .image-large {
    width: 100%;
    aspect-ratio: 2/1;
    object-fit: cover;
    border-radius: 0.625rem;
}

.Arrival-Famous .image-small {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0.25rem;
}

.Arrival-Box {
    margin-top: 2.5rem;
}

.Famous-Box {
    margin-top: 2.5rem;
}

.custom-nav2 {
    margin-top: 1.875rem;
    display: flex;
    justify-content: center;
}

.benefits {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-left: 1.5625rem;
    margin-right: 1.5625rem;
}


.BuyerandSeller form {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.BuyerandSeller .row {
    margin-top: 2.5rem;
    display: flex;
    justify-content: space-between;

}

.FindSellersByCity .row {
    margin-top: 2.5rem;
}

.FindSellersByCity .city-images {
    width: 6.25rem;
    height: 6.25rem;
    object-fit:fill;
    border-radius: 100%;
}

.FindSellersByCity .city-name h4 {
    color: var(--black-color);
}

.FindSellersByCity .city-name:hover h4 {
    font-weight: 600;
    color: var(--secondary-color);
}

.FindSellersByCity .city-name:hover .city-images {
    border: 4px solid var(--secondary-color);
}


.Testimony .description {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    color: var(--text-color);
}

.reviewer {
    border-radius: 6.25rem;
    width: 5rem;
    aspect-ratio: 1/1;
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
}

.reviewer-name {
    color: var(--primary-color);
}

.blogcarousel {
    margin-top: 2.5rem;
}

.Blogs .heading {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.Blogs .description {
    color: var(--text-color);
    margin-bottom: 1.25rem;
}

.Blogs .commentbox {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.owl-nextll {
    border-radius: 50%;
    position: relative;
    bottom: 17.625rem;
    z-index: 9;
    left: 0.75rem;
    background-color: var(--white-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.owl-prevll {
    border-radius: 50%;
    position: relative;
    bottom: 17.625rem;
    z-index: 9;
    left: -0.75rem;
    background-color: var(--white-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.heading {
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
}

.decription {
    margin-top: 0.625rem;
    margin-bottom: 1.25rem;
}

.App h4 {
    color: var(--text-color);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.App .scan-image {
    width: 5.25rem;
    height: 5.25rem;
}

.App .google-image {
    width: 7.5rem;
    height: 2.5rem;
}

.App .apple-image {
    width: 7.5rem;
    height: 2.5rem;
}

.tradeshowcrousel h5 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.tradeshow-prev {
    border-radius: 50%;
    position: relative;
    bottom: 11.5rem;
    z-index: 9;
    left: -0.75rem;
    background-color: var(--white-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.tradeshow-next {
    border-radius: 50%;
    position: relative;
    bottom: 11.5rem;
    z-index: 9;
    left: 0.75rem;
    background-color: var(--white-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.tradeshowcrousel {
    margin-top: 2.5rem;
}

/* CategoryYouMayLike*/

.Category-content .extra-line {
    width: 11.5rem;
}

.Category-content p {
    margin-top: 2.5rem;
    color: var(--text-color);
}

.Category-content .form-control {
    border: none;
    color: var(--black-color);
}

.Category-content input[type="search"]::placeholder {
    color: var(--black-color);
    /* Placeholder text color */
}

.location-search-button {
    border-radius: 4px;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.location-search-button:hover {
    color: var(--white-color);
}

.Category-content .col-md-8 {
    overflow-x: auto;
}

.Category-content .location-search-button {
    flex: 0 0 auto;
}

.Category-content .row {
    margin-top: 5rem;
}

.Category-content-products .filter-wrapper {
    padding: 1rem 1rem;
    background-color: var(--tertiary-color);
    border-radius: 0.625rem;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.Category-content-products .btn-link {
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--primary-color);
}

.Category-content-products .btn-link:focus {
    outline: unset;
    border: unset;
    box-shadow: none;
}

.btn-custom {
    font-family: "Catamaran", serif;
    font-weight: 500;
    font-size: 1rem;
    color: var();
    background-color: var(--white-color);
}

.btn-custom:focus {
    outline: unset;
    border: unset;
    box-shadow: none;
}

.btn-custom:hover {
    color: var(--red-color);
}

.Category-content-products .products img {
    border-radius: 0.25rem;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.Category-content-products .products h6 {
    color: var(--text-color);
}

.Category-content-products .products h4 {
    margin-bottom: 0.812rem;
    color: var(--black-color)
}

.Category-content-products .products p {
    margin-bottom: 1rem;
    color: var(--text-color);
}

.Category-content-products .products .stars {
    margin-bottom: 1rem;
}

.Category-content-products .products h3 {
    margin-bottom: 1.5rem;
    color: var(--red-color);
}

.Category-content-products .products .quantity h6 {
    color: var(--black-color);
}

.Category-content-products .products .quantity p {
    color: var(--black-color);
}

.Category-content-products .products .btn-md {
    flex-grow: 1;
}

.Category-content-products .btn-side-nav {
    font-size: 1.375rem;

}

.prev-next-btn {
    border: none;
    color: var(--primary-color);
}

.prev-next-clicked-btn {
    border: none;
    color: var(--primary-color);
    outline: unset;
    border: unset;
    box-shadow: none;
}

.prev-next-clicked-btn:focus {
    border: none;
    color: var(--primary-color);
    outline: unset;
    border: unset;
    box-shadow: none;
}

.pagination .nav-num {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 100%;
    border-color: var(--primary-color);
}

.pagination .nav-num:focus {
    outline: unset;
    border: unset;
    box-shadow: none;
}

/* ProductDetail*/

.thumbnail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.25rem;
}

.gap-product-detail1 {
    gap: 1rem;
}

.gap-product-detail2 {
    gap: 0.8rem;
}

.review-paragraph{
    color: var(--text-color);
}

.gap-product-detail2 h6 {
    color: var(--text-color);
}

.gap-product-detail2 h3 {
    color: var(--black-color);
}

.gap-product-detail2 h2 {
    color: var(--red-color);
}

.gap-product-detail2 p {
    color: var(--text-color);
}

.gap-product-detail2 h5 {
    color: var(--green-color);
}

.gap-product-detail2 .btn-link {
    font-weight: 600;
    text-decoration: none;
}

.gap-product-detail2 .quantity h6,
.gap-product-detail2 .quantity p {
    color: var(--black-color);
}

.gap-product-detail2 .quantity p {
    color: var(--black-color);
}

#text-content {
    color: var(--text-color);
}

.img-border {
    border: 4px solid var(--primary-color);
}

.gap-product-detail2 .form-control {
    color: var(--black-color);
    /* Placeholder text color */
    border: none;
    outline: unset;
    border: unset;
    box-shadow: none;
}

.gap-product-detail1 .primary-button {
    flex-grow: 1;
}

.gap-product-detail1 .secondary-button {
    flex-grow: 1;
}

.gap-overview {
    gap: 3.75rem;
    margin-top: 2.5rem;
}

.overview p {
    color: var(--text-color);
}

.overview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.625rem;
}

.about-seller p {
    color: var(--text-color);
}

.about-seller .row {
    margin-top: 2.5rem;
}

.gap-rate-review {
    margin-top: 2.5rem;
}

.rate-review .progress {
    border-radius: 2.5rem;
    height: 0.4rem;
}

.rate-images {
    height: 5rem;
    width: 5rem;
    border-radius: 0.25rem;
}

.rate-images2 img{
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 0.25rem;
}

.rate-images img{
    height: 5rem;
}

.rate-images .d-lg-block {
    height: 5rem;
    width: 5rem;
    border-radius: 0.25rem;
}

.reviewer-image {
    height: 6.25rem;
    width: 6.25rem;
    object-fit: cover;
    border-radius: 0.25rem;
}

.gap-images {
    gap: 1.5rem;
}

.img5 {
    background-image:
        linear-gradient(rgb(0, 104, 200), rgba(0, 104, 200, 0.7)),
        url('../images/Frame\ 292.png');
    background-size: cover;
    background-position: center;
}

.reviews {
    margin-top: 5rem;
}

/*ProductByCity*/

.city-banner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/Map.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 31.25rem;
}

.city-banner h3 {
    color: var(--white-color);
}

.buy-requirement-button {
    background-color: var(--tertiary-color);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.buy-requirement-button .btn {
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
    border-top-left-radius: 2.5rem;
    border-bottom-left-radius: 2.5rem;
}

.category-filter .category-card {
    background-color: var(--tertiary-color);
    border-radius: 3.125rem;
}

.city-categories {
    padding-top: 1.875rem;

}

.city-categories .owl-next {
    border-radius: 50%;
    position: relative;
    bottom: 3.3rem;
    z-index: 9;
    left: 1.75rem;
    background-color: transparent;
    color: var(--primary-color);
    border: none;
}

.city-categories .owl-prev {
    border-radius: 50%;
    position: relative;
    bottom: 3.3rem;
    z-index: 9;
    left: -1.75rem;
    background-color: transparent;
    color: var(--primary-color);
    border: none;
}

.category-filter .category-card:hover {
    background-color: var(--secondary-color);

}

.category-filter p {
    color: var(--primary-color);
}

.category-card:hover p {
    color: var(--white-color);
}

.category-items .product-name a {
    color: var(--primary-color);
}

.category-items .product-name a:hover {
    font-weight: 600;
    color: var(--secondary-color);
}

.category-items .category-image {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0.25rem;
}

.overflow-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--white-color);
    scroll-margin-top: 1.875rem;
    scroll-padding-top: 1.875rem;
}

.category-items .top-heading {
    margin-top: 1.875rem;
}

/* Blog Page */

.extra-line{
    border-bottom: 3px solid #0068C8;
    transform: translateY(17px);
    width: 12.5rem;
}

/* Blog Detail Page */

.heading h2 {
    color: #0b0b0b;
    font-family: Catamaran;
    font-weight: 500;
    font-size: 2.25rem;
    text-align: left;
    height: auto;
    width: auto;
}

.blog-details {
    width: 500px;
    height: 26px;
}

.section-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

.user-quote {
    background-color: #F5F9FF;
}

.user-quote img {
    width: 100px; 
    height: 100px; 
    border-radius: 50%;
}

.blogcomment {
    width: 100%;
    height: 257px;
    gap: 0px;
    border-radius: 10px;
    border: 1px solid #666666;
    opacity: 0px;
}

.blogcomment::placeholder {
    position: absolute;
    top: 15px;
    left: 15px;
}

/* Tradeshow Page  */

.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Tradeshow Detail Page */

.trade-website {
    text-align: right;
    color: blue;
    text-decoration: none;
}

.form {
    text-align: right;
}

.form .btn {
    border: 1px solid #0068C8;
}

.exhibitor-profile {
    background-color: #F5F9FF;
}

.exhibitor-profile a{
    text-decoration: none;
}

.exhibitor-profile a p{
    color: #0068C8;
    font-size: 16px;
}

.visitor-profile {
    background-color: #F5F9FF;
}

.visitor-profile a{
    text-decoration: none;
}

.visitor-profile a p{
    color: #0068C8;
    font-size: 16px;
}

.venue-address {
    background-color: #F5F9FF;
}

.venue-address img{
    width: 100%; 
    height: auto; 
    object-fit: contain; 
    border-radius: 4px;
}

.review h5{
    color: #666666;
}

.add-button{
    text-align: right;
}

.popular-tags button{
    border: 1px solid #0068C8;
    background-color: white;
    color: #0068C8;
    border-radius: 4px;
    padding: 10px;
    gap: 10px;
    margin-top: 20px;
    margin-left: 22px;
}

/* Sign-up popup */

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  #popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    height: auto;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
    overflow: hidden;
  }

  .popup-left {
    background-image: url('../images/login_image.jpg');
    background-size: cover;
    background-position: center;
    height: 200px;
  }

  @media (min-width: 768px) {
    .popup-left {
      height: auto;
    }
  }

  .popup-right {
    padding: 20px;
  }

  .popup-right h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .input-container {
    display: flex;
    align-items: center;
    border: 1px solid #999999;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
  }

  .input-container input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 16px;
  }

  .input-container i {
    color: #aaa;
    cursor: pointer;
  }

  .input-container i:hover {
    color: #000;
  }

  .popup-right button {
    margin-top: 15px;
    padding: 10px;
    background-color: #0068C8;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
  }

  .popup-right button:hover {
    background-color: #005bb5;
  }

  .popup-right p {
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
  }

  .popup-right p a {
    font-weight: bold;
    color: #0078d7;
    text-decoration: none;
  }

  .popup-right p a:hover {
    text-decoration: underline;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    cursor: pointer;
  }

  .close-btn:hover {
    color: #0078d7;
  }

  /* Login Pop-up */

  #overlayss {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  #popupss {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    height: auto;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
    overflow: hidden;
  }

  .popup-left {
    background-image: url('../images/login_image.jpg');
    background-size: cover;
    background-position: center;
    height: 200px;
  }

  @media (min-width: 768px) {
    .popup-left {
      height: auto;
    }
  }

  .popup-right {
    padding: 20px;
  }

  .popup-right h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .popup-right form a {
    font-weight: 600;
    text-align: right;
    text-decoration: none;
    color: #000000;
  }

  .input-container {
    display: flex;
    align-items: center;
    border: 1px solid #999999;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
  }

  .input-container input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 16px;
  }

  .input-container i {
    color: #aaa;
    cursor: pointer;
  }

  .input-container i:hover {
    color: #000;
  }

  .popup-right button {
    margin-top: 15px;
    padding: 10px;
    background-color: #0068C8;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
  }

  .popup-right button:hover {
    background-color: #005bb5;
  }

  .popup-right p {
    font-family: Catamaran;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 22.96px;
    text-align: left;
  }

  .popup-right p a {
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
  }

  .popup-right p a:hover {
    text-decoration: underline;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    cursor: pointer;
  }

  .close-btn:hover {
    color: #0078d7;
  }

  /* Seller Page */

  .extra-line-seller{
    border-bottom: 3px solid #0068C8;
    transform: translateY(17px);
    width: 22.5rem;
}

.card-body-seller .card-text-seller {
    font-family: Catamaran;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #666666;
}

.extra-line-choose{
    border-bottom: 3px solid #0068C8;
    transform: translateY(17px);
    width: 13rem;
}

.why-choose .card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

@media (max-width: 768px){
    .points h5 {
        margin-left: 15px;
    }
}

.product-form-container {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: auto;
    padding: 20px;
}

.product-form-container h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.form-label {
    font-weight: bold;
}

.image-preview {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.image-preview img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.btn-add {
    background-color: #007bff;
    color: white;
}

.btn-add:hover {
    background-color: #0056b3;
}


/* Buyer Page */

.product-form-container2 {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: auto;
    padding: 20px;
}

.product-form-container2 h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.form-label {
    font-weight: bold;
}

.image-preview {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.image-preview img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.btn-add {
    background-color: #007bff;
    color: white;
}

.btn-add:hover {
    background-color: #0056b3;
}

.product-form-container2 form button{
    margin-left: auto;
    margin-right: auto;
}

/* Buyer Form Filling page */

.form-floating-label {
    position: relative;
  }

  .form-floating-label input {
    border: 2px solid var(--text-color);
    border-radius: 0.25rem;
    padding: 1rem 0.5rem 0.5rem;
  }

  .form-floating-label label {
    position: absolute;
    top: 1.25rem;
    left: 1rem;
    transform: translateY(-30%);
    background-color: var(--white-color);
    padding: 0 0.3125rem;
    transition: 0.2s ease all;
    color: var(--text-color);
  }

  .form-floating-label input:focus ~ label,
  .form-floating-label input:not(:placeholder-shown) ~ label {
    top: -0.625rem;
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: var(--black-color);
  }

  .form-floating-label input:focus{
    border:2px solid var(--text-color);
    box-shadow: none;
  }

  .form-select{
    border:2px solid var(--text-color);
    padding: 0.75rem 0.5rem 0.75rem;
  }

  .form-filling option{
    transform: translateY(-50%);
  }

  .form-filling .add-image{
    width: 5.25rem;
    height: 5.25rem;
    border: 2px solid var(--text-color);
    border-radius: 0.25rem;
  }

  .form-filling .add-image p{
   color: var(--text-color);
  }

  .form-filling .image{
    width: 5.25rem;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0.25rem;
  }

  /* Who we are */

  .introduction-images img{
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
  }

  .how-we-do-it .cutout-image {
    aspect-ratio: 1/1;
    background-image: url('../images/experience.png');;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.how-we-do-it .cutout-image .background {
    background-color: var(--tertiary-color); 
    width: 90%;
    height: 83%;
    position: relative;
}

.how-we-do-it .cutout-image .text {
    font-family: "Catamaran", serif;
    font-weight: 600;
    font-size: 9.375rem;
    line-height:5.75rem;
    position: absolute;
    margin-bottom:  5.5rem;
    z-index: 10;      
    color: transparent;
    background-image: url('../images/experience.png');
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    mix-blend-mode: multiply; /* Cutout Effect */
}

.about-us-introduction p , .how-we-do-it p, .mission-vision p{
    color: var(--text-color);
}


/* Dashboard-dashboard */

.nav-link:hover .svg-color path {
    fill: var(--white-color) !important; /* Change to the desired active color */
}
.nav-link.active .svg-color path {
    fill: var(--white-color) !important; /* Change to the desired active color */
}

.nav-link .svg-color path {
    fill: var(--primary-color) !important; /* Default color */
}

.nav-link:hover .svg-border-color path{
    stroke: var(--white-color) !important;
}
.nav-link.active .svg-border-color path{
    stroke: var(--white-color) !important;
}
.nav-link .svg-border-color path{
    stroke: var(--primary-color) !important;
}


.dashboard .inquiry-box{
    background-color: var(--white-color);
    border-radius: 0.625rem;    
}

.dashboard .graph-box1 div{
    background-color: var(--green-color);
    width: 0.875rem;
    height: 0.875rem;
}

.dashboard .graph-box2 div{
    background-color: orange;
    width: 0.875rem;
    height: 0.875rem;
}

.dashboard .graph-box3 div{
    background-color: var(--red-color);
    width: 0.875rem;
    height: 0.875rem;
}

.dashboard .graph-box1 p{
    color: var(--green-color); 
    line-height: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.dashboard .graph-box2 p{
    color: orange; 
    line-height: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.dashboard .graph-box3 p{
    color: var(--red-color); 
    line-height: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.product-tab .nav-link{
    color: var(--primary-color);
    border-radius: 50%;
    background-color: transparent;
}

.product-tab .nav-link.active{
    color: var(--primary-color);
    background-color: transparent;
    border-radius: 50%;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.product-tab .nav-link:hover{
    color: var(--primary-color);
    background-color: transparent;
    border-radius: 50%;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.dasboard-product-list img{
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    border-radius: 0.25rem;
}

.dasboard-product-list h6{
    color: var(--text-color);
}

.dasboard-product-list:hover img{
    border: 2px solid var(--primary-color);
}

.dasboard-product-list:hover h4{
    color: var(--primary-color);
}


.lead-tab .nav-link{
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 4px;
}

.lead-tab .nav-link.active{
    color: var(--white-color);
    background-color: var(--primary-color);
    border-radius:4px;
}

.lead-tab .nav-link:hover{
    color: var(--white-color);
    background-color: var(--primary-color);
    border-radius:4px;
}

.truncate-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 5em; /* Adjust based on font-size */
    white-space: normal;
  }

  .message-detail h6{
    font-size: 0.875rem;
  }

  .select-cities{
    background-color: var(--tertiary-color);
    border-radius: 0.025rem;
  }


.bg-primary{
    background-color: var(--tertiary-color) !important;
    color: var(--primary-color);
    border-radius: 0.025rem;
}

.btn-close{
    color: var(--primary-color) !important;
}




  .dashboard .add-image{
    width: 5.25rem;
    height: 5.25rem;
    border: 2px solid var(--text-color);
    border-radius: 0.25rem;
  }

  .dashboard .add-image p{
   color: var(--text-color);
  }

  .dashboard .image{
    width: 5.25rem;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 0.25rem;
  }

  .dashboard .edit{
    color: var(--secondary-color);
    font-size: 1.2rem;
    font-weight: 600;
  }

  .dashboard .delete{
    color: var(--red-color);
    font-size: 1.2rem;
  }